MaDgIK
/
irish-monitor
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

[develop]: Align changes in indicator card with monitor. Update version and changelog

This commit is contained in:
Konstantinos Triantafyllou 2024-07-25 10:54:25 +03:00
parent 9e4c684540
commit 561cdfbc23
4 changed files with 134 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
CHANGELOG.md
View File

@ -14,6 +14,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- *Fixed (for any bug fixes)* - *Fixed (for any bug fixes)*
- *Security (in case of vulnerabilities)* - *Security (in case of vulnerabilities)*
## v1.0.1 - 25.07.2024
### Fixed
Problem with ORCID KPIs regarding a researcher.
Reordered action buttons in a search page.
Fix import/export indicators tab title wasn't imported.
Fix the redirection URL after verification of a manager.
### Changed
Extract a stakeholder in every field of a json in a chart.
Improvements regarding import/export indicators and editing an indicator.
## v1.0.0 - 26.06.2024 - Official Release ## v1.0.0 - 26.06.2024 - Official Release
### Added ### Added
Add banner for announcements. Disabled by default. Add banner for announcements. Disabled by default.

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "irish-monitor", "name": "irish-monitor",
"version": "1.0.0", "version": "1.0.1",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "ng serve --port 5500 --disable-host-check --host 0.0.0.0", "start": "ng serve --port 5500 --disable-host-check --host 0.0.0.0",

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 7bb45fefa04f7dea80d7679b507030fb22ac7cba Subproject commit 310f06b2348977c64825231fff79180f70fb404d

220
src/app/shared/monitor/monitor.component.html
View File

@ -4,7 +4,8 @@
<div class="uk-width-expand"> <div class="uk-width-expand">
<ng-container *ngTemplateOutlet="selected_filters_pills"></ng-container> <ng-container *ngTemplateOutlet="selected_filters_pills"></ng-container>
</div> </div>
<a *ngIf="countSelectedFilters() > 1" class="uk-text-small uk-margin-small-left" (click)="clearAll()"> Clear All </a> <a *ngIf="countSelectedFilters() > 1" class="uk-text-small uk-margin-small-left" (click)="clearAll()"> Clear
All </a>
</div> </div>
<div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 0" [class.uk-margin-bottom]="isMobile"> <div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 0" [class.uk-margin-bottom]="isMobile">
<slider-tabs *ngIf="stakeholder && !loading && activeTopic" [border]="!isMobile" [type]="'dynamic'"> <slider-tabs *ngIf="stakeholder && !loading && activeTopic" [border]="!isMobile" [type]="'dynamic'">
@ -21,23 +22,24 @@
<div inner> <div inner>
<loading *ngIf="loading" class="uk-margin-top"></loading> <loading *ngIf="loading" class="uk-margin-top"></loading>
<div *ngIf="!activeSubCategory && !loading" class="message"> <div *ngIf="!activeSubCategory && !loading" class="message">
No {{entities.stakeholder}} yet. No {{ entities.stakeholder }} yet.
</div> </div>
<div *ngIf="activeSubCategory" class="uk-section-small"> <div *ngIf="activeSubCategory" class="uk-section-small">
<div *ngIf="activeSubCategory.description" [innerHTML]="activeSubCategory.description" class="uk-margin-medium-bottom"> <div *ngIf="activeSubCategory.description" [innerHTML]="activeSubCategory.description"
class="uk-margin-medium-bottom">
</div> </div>
<div [class.uk-margin-large-bottom]="activeSubCategory.numbers.length > 0 && !tabs"> <div [class.uk-margin-large-bottom]="activeSubCategory.numbers.length > 0 && !tabs">
<ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;"> <ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
<div *ngIf="!isMobile" class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom" uk-grid <div *ngIf="!isMobile" class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom" uk-grid
uk-height-match="target: .uk-card"> uk-height-match="target: .uk-card">
<h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5> <h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{ number.title }}</h5>
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index"> <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
<div *ngIf="hasPermission(indicator.visibility)" <div *ngIf="hasPermission(indicator.visibility)"
[ngClass]="getNumberClassBySize(indicator.width)"> [ngClass]="getNumberClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative" <div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative"
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"> [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div *ngIf="!indicator.overlay"> <div *ngIf="!indicator.overlay">
<div class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div> <div class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{ indicator.name }}</div>
<div class="number uk-text-small uk-text-bold"> <div class="number uk-text-small uk-text-bold">
<span *ngIf="numberResults.get(i + '-' + j + '-0')" <span *ngIf="numberResults.get(i + '-' + j + '-0')"
[innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j + '-0') | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j + '-0') | numberPercentage: stakeholder.locale))"></span> [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j + '-0') | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j + '-0') | numberPercentage: stakeholder.locale))"></span>
@ -45,7 +47,8 @@
</div> </div>
<div *ngIf="indicator.description || indicator.additionalDescription" <div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right uk-visible@m"> class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right uk-visible@m">
<a class="uk-display-inline-block uk-button uk-button-link" uk-tooltip="Note" <a class="uk-display-inline-block uk-button uk-button-link"
uk-tooltip="Note"
(click)="changeOverlay($event, indicator, 'description')"> (click)="changeOverlay($event, indicator, 'description')">
<span class="uk-flex uk-flex-middle"> <span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon> <icon name="analytics" type="outlined" [flex]="true"></icon>
@ -66,10 +69,10 @@
</div> </div>
<div class="uk-margin-small-top uk-margin-right"> <div class="uk-margin-small-top uk-margin-right">
<p *ngIf="indicator.description"> <p *ngIf="indicator.description">
{{indicator.description}} {{ indicator.description }}
</p> </p>
<p *ngIf="indicator.additionalDescription"> <p *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}} {{ indicator.additionalDescription }}
</p> </p>
</div> </div>
</div> </div>
@ -78,7 +81,7 @@
</ng-template> </ng-template>
</div> </div>
<div *ngIf="isMobile"> <div *ngIf="isMobile">
<h6 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h6> <h6 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{ number.title }}</h6>
<div class="uk-card uk-card-default uk-padding-small number-card"> <div class="uk-card uk-card-default uk-padding-small number-card">
<div class="uk-grid uk-grid-small uk-child-width-1-1" uk-grid> <div class="uk-grid uk-grid-small uk-child-width-1-1" uk-grid>
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index"> <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
@ -87,7 +90,8 @@
<div [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"> <div [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div *ngIf="!indicator.overlay"> <div *ngIf="!indicator.overlay">
<div <div
class="uk-text-xsmall uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div> class="uk-text-xsmall uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{ indicator.name }}
</div>
<div class="number uk-text-small uk-text-bold"> <div class="number uk-text-small uk-text-bold">
<span *ngIf="numberResults.get(i + '-' + j + '-0')" <span *ngIf="numberResults.get(i + '-' + j + '-0')"
[innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j + '-0') | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j + '-0') | numberPercentage: stakeholder.locale))"></span> [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j + '-0') | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j + '-0') | numberPercentage: stakeholder.locale))"></span>
@ -104,101 +108,118 @@
</div> </div>
<div [class.section-container]="tabs"> <div [class.section-container]="tabs">
<ul *ngIf="tabs" class="tabs"> <ul *ngIf="tabs" class="tabs">
<li *ngFor="let tab of activeSubCategory.charts; let i = index;" [class.uk-active]="i === activeChartSectionIndex" <li *ngFor="let tab of activeSubCategory.charts; let i = index;"
[class.uk-active]="i === activeChartSectionIndex"
(click)="changeSection(i)" class="uk-text-truncate" [attr.uk-tooltip]="getSectionTitle(tab)"> (click)="changeSection(i)" class="uk-text-truncate" [attr.uk-tooltip]="getSectionTitle(tab)">
{{getSectionTitle(tab)}} {{ getSectionTitle(tab) }}
</li> </li>
</ul> </ul>
<div *ngIf="chart" class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid uk-height-match="target: .uk-card"> <div *ngIf="chart"
<h5 *ngIf="chart.title && !isMobile && !tabs" class="uk-width-1-1 uk-margin-bottom">{{getSectionTitle(chart)}}</h5> class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid
<div *ngIf="getSectionDescription(chart)" class="uk-width-1-1 uk-margin-bottom">{{getSectionDescription(chart)}}</div> uk-height-match="target: .uk-card">
<h6 *ngIf="chart.title && isMobile && !tabs" class="uk-width-1-1">{{getSectionTitle(chart)}}</h6> <h5 *ngIf="chart.title && !isMobile && !tabs"
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index"> class="uk-width-1-1 uk-margin-bottom">{{ getSectionTitle(chart) }}</h5>
<div *ngIf="getSectionDescription(chart)"
class="uk-width-1-1 uk-margin-bottom">{{ getSectionDescription(chart) }}
</div>
<h6 *ngIf="chart.title && isMobile && !tabs" class="uk-width-1-1">{{ getSectionTitle(chart) }}</h6>
<ng-container *ngFor="let indicator of chart.indicators; let j=index">
<div *ngIf="hasPermission(indicator.visibility)" <div *ngIf="hasPermission(indicator.visibility)"
[ngClass]="getChartClassBySize(indicator.width)"> [ngClass]="getChartClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-position-relative" <div class="uk-card uk-card-default uk-position-relative"
[class.semiFiltered]="getActiveIndicatorPath(indicator).filtersApplied < countSelectedFilters()"> [class.semiFiltered]="getActiveIndicatorPath(indicator).filtersApplied < countSelectedFilters()">
<div class="uk-card-body uk-margin-small-bottom"> <div class="uk-card-body uk-margin-small-bottom">
<h6 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom"> <!-- Main content-->
{{indicator.name + " "}} <div>
</h6> <h6 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom">
<iframe [class.uk-blend-multiply]="!isFullscreen" {{ indicator.name + " " }}
*ngIf=" !properties.disableFrameLoad && getActiveIndicatorPath(indicator).source !== 'image'" </h6>
[src]="getActiveIndicatorPath(indicator).safeResourceUrl" <iframe [class.uk-blend-multiply]="!isFullscreen"
class="uk-width-1-1" allowfullscreen="true" mozallowfullscreen="true" *ngIf=" !properties.disableFrameLoad && getActiveIndicatorPath(indicator).source !== 'image'"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe> [src]="getActiveIndicatorPath(indicator).safeResourceUrl"
<div *ngIf="properties.disableFrameLoad && getActiveIndicatorPath(indicator).source !== 'image'"> class="uk-width-1-1" allowfullscreen="true"
<img class="uk-width-1-1 uk-blend-multiply" mozallowfullscreen="true"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
src="assets/chart-placeholder.png"> <div *ngIf="properties.disableFrameLoad && getActiveIndicatorPath(indicator)?.source !=='image'">
<img class="uk-width-1-1 uk-blend-multiply"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
src="assets/chart-placeholder.png">
</div>
<img *ngIf="getActiveIndicatorPath(indicator).source === 'image'"
[src]="getActiveIndicatorPath(indicator).url"
class="uk-width-1-1 uk-blend-multiply"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
</div> </div>
<img *ngIf="getActiveIndicatorPath(indicator).source === 'image'" <!-- Tabs -->
[src]="getActiveIndicatorPath(indicator).safeResourceUrl" <slider-tabs [type]="'dynamic'" [flexPosition]="'right'"
class="uk-width-1-1 uk-blend-multiply" (activeEmitter)="indicator.activePath = $event"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"> tabsClass="uk-subnav uk-subnav-pill uk-subnav-small"
<slider-tabs *ngIf="indicator.indicatorPaths.length > 1" [type]="'dynamic'" [flexPosition]="'right'" (activeEmitter)="indicator.activePath = $event" containerClass="uk-margin-top uk-margin-bottom" [border]="false">
tabsClass="uk-subnav uk-subnav-pill uk-subnav-small" containerClass="uk-margin-top uk-margin-bottom" [border]="false"> <slider-tab
<slider-tab *ngFor="let indicatorPath of indicator.indicatorPaths; let i=index" *ngFor="let indicatorPath of indicator.indicatorPaths; let i=index"
[tabTitle]="indicatorPath.parameters.tab ? indicatorPath.parameters.tab : indicatorPath.parameters.title" [tabTitle]="indicatorPath.parameters.tab ? indicatorPath.parameters.tab : indicatorPath.parameters.title"
[tabId]="i.toString()" [active]="(!indicator.activePath && i == 0) || indicator.activePath == i"> [invisible]="indicator.indicatorPaths.length < 2"
[tabId]="i" [active]="getActivePathIndex(indicator) == i">
</slider-tab> </slider-tab>
</slider-tabs> </slider-tabs>
</div> <div class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom uk-visible@m">
<div class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom uk-visible@m"> <a *ngIf="indicator.description || indicator.additionalDescription"
<a *ngIf="indicator.description || indicator.additionalDescription" class="uk-display-inline-block uk-button uk-button-link uk-margin-right"
class="uk-display-inline-block uk-button uk-button-link uk-margin-right" (click)="changeOverlay($event, indicator, 'description')">
(click)="changeOverlay($event, indicator, 'description')"> <span class="uk-flex uk-flex-middle">
<span class="uk-flex uk-flex-middle"> <icon name="analytics" type="outlined" [flex]="true"></icon>
<icon name="analytics" type="outlined" [flex]="true"></icon> <span class="uk-margin-xsmall-left">Note</span>
<span class="uk-margin-xsmall-left">Note</span> </span>
</span> </a>
</a> <a class="uk-display-inline-block uk-button uk-button-link"
<a class="uk-display-inline-block uk-button uk-button-link" (click)="changeOverlay($event, indicator, 'embed')">
(click)="changeOverlay($event, indicator, 'embed')"> <span class="uk-flex uk-flex-middle">
<span class="uk-flex uk-flex-middle"> <icon name="code" type="outlined" [flex]="true"></icon>
<icon name="code" type="outlined" [flex]="true"></icon> <span class="uk-margin-xsmall-left">Embed</span>
<span class="uk-margin-xsmall-left">Embed</span> </span>
</span> </a>
</a> </div>
</div> <div *ngIf="indicator.overlay"
<div *ngIf="indicator.overlay" class="indicator-overlay uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
class="indicator-overlay uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center"> <div *ngIf="indicator.overlay == 'description'" class="inner"
<div *ngIf="indicator.overlay == 'description'" class="inner" click-outside-or-esc click-outside-or-esc
(clickOutside)="closeOverlay($event, indicator)"> (clickOutside)="closeOverlay($event, indicator)">
<div class="uk-padding-small"> <div class="uk-padding-small">
<div class="uk-flex uk-flex-right"> <div class="uk-flex uk-flex-right">
<button class="uk-close uk-icon" <button class="uk-close uk-icon"
(click)="changeOverlay($event, indicator, false)"> (click)="changeOverlay($event, indicator, false)">
<icon name="close" ratio="1"></icon> <icon name="close" ratio="1"></icon>
</button> </button>
</div> </div>
<div class="uk-padding-small uk-padding-remove-horizontal"> <div class="uk-padding-small uk-padding-remove-horizontal">
<p *ngIf="indicator.description"> <p *ngIf="indicator.description">
{{indicator.description}} {{ indicator.description }}
</p> </p>
<p *ngIf="indicator.additionalDescription"> <p *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}} {{ indicator.additionalDescription }}
</p> </p>
</div>
</div> </div>
</div> </div>
</div> <div *ngIf="indicator.overlay === 'embed'" class="inner" click-outside-or-esc
<div *ngIf="indicator.overlay === 'embed'" class="inner" click-outside-or-esc (clickOutside)="closeOverlay($event, indicator)">
(clickOutside)="closeOverlay($event, indicator)"> <div class="uk-padding-small">
<div class="uk-padding-small"> <div class="uk-flex uk-flex-right">
<div class="uk-flex uk-flex-right"> <button class="uk-close uk-icon"
<button class="uk-close uk-icon" (click)="changeOverlay($event, indicator, false)">
(click)="changeOverlay($event, indicator, false)"> <icon name="close" ratio="1"></icon>
<icon name="close" ratio="1"></icon> </button>
</button> </div>
</div> <div class="clipboard-wrapper uk-margin-top uk-margin-bottom">
<div class="clipboard-wrapper uk-margin-top uk-margin-bottom"> <pre id="embed_content_id" class="uk-padding-small"><code>&lt;iframe width="500" height="500" <br> src="{{ getActiveIndicatorPath(indicator).safeResourceUrl.changingThisBreaksApplicationSecurity }}
<pre id="embed_content_id" class="uk-padding-small"><code>&lt;iframe width="500" height="500" <br> src="{{getActiveIndicatorPath(indicator).safeResourceUrl.changingThisBreaksApplicationSecurity}}"<br> allowfullscreen="true" mozallowfullscreen="true"&gt;<br>&lt;/iframe&gt;</code></pre> "<br> allowfullscreen="true" mozallowfullscreen="true"&gt;<br>&lt;/iframe&gt;</code></pre>
</div> </div>
<div class="uk-flex uk-flex-right"> <div class="uk-flex uk-flex-right">
<a class="uk-link-reset copy clipboard_btn" <a class="uk-link-reset copy clipboard_btn"
data-clipboard-target="#embed_content_id" title="Copy code"> data-clipboard-target="#embed_content_id" title="Copy code">
<icon [flex]="true" name="content_copy"></icon> <icon [flex]="true" name="content_copy"></icon>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -206,7 +227,7 @@
</div> </div>
</div> </div>
<div class="printGap uk-hidden"></div> <div class="printGap uk-hidden"></div>
</ng-template> </ng-container>
</div> </div>
</div> </div>
</div> </div>
@ -217,7 +238,7 @@
<icon name="filters" ratio="1.5" visuallyHidden="Filters" gradient="filters_icon"></icon> <icon name="filters" ratio="1.5" visuallyHidden="Filters" gradient="filters_icon"></icon>
<span [class.uk-hidden]="countSelectedFilters() === 0" <span [class.uk-hidden]="countSelectedFilters() === 0"
class="uk-offcanvas-count uk-flex uk-flex-middle uk-flex-center"> class="uk-offcanvas-count uk-flex uk-flex-middle uk-flex-center">
{{countSelectedFilters()}} {{ countSelectedFilters() }}
</span> </span>
</a> </a>
<div *ngIf="stakeholder" id="style_switcher" class="uk-offcanvas" <div *ngIf="stakeholder" id="style_switcher" class="uk-offcanvas"
@ -269,7 +290,7 @@
<li *ngIf="periodFilter.selectedFromAndToValues.length > 0"> <li *ngIf="periodFilter.selectedFromAndToValues.length > 0">
<span class="uk-label uk-label-small uk-label-secondary uk-flex uk-flex-middle"> <span class="uk-label uk-label-small uk-label-secondary uk-flex uk-flex-middle">
<span <span
class="uk-margin-small-right uk-width-expand uk-text-truncate">{{periodFilter.selectedFromAndToValues}}</span> class="uk-margin-small-right uk-width-expand uk-text-truncate">{{ periodFilter.selectedFromAndToValues }}</span>
<button [class.uk-disabled]="loading" (click)="clearPeriodFilter()" class="uk-close uk-icon" <button [class.uk-disabled]="loading" (click)="clearPeriodFilter()" class="uk-close uk-icon"
[disabled]="loading"> [disabled]="loading">
<icon name="close" flex="true" ratio="0.7"></icon> <icon name="close" flex="true" ratio="0.7"></icon>
@ -286,14 +307,15 @@
<ng-container <ng-container
*ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean"> *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
{{filter.title}}: {{ filter.title }}:
{{(value.name == 'true' || value.name == 'Yes') ? 'Yes' : 'No'}} {{ (value.name == 'true' || value.name == 'Yes') ? 'Yes' : 'No' }}
</ng-container> </ng-container>
<ng-template #noboolean> <ng-template #noboolean>
{{value.name}} {{ value.name }}
</ng-template> </ng-template>
</span> </span>
<button [class.uk-disabled]="loading" (click)="clearFilterValue(filter, value)" <button [class.uk-disabled]="loading"
(click)="clearFilterValue(filter, value)"
class="uk-close uk-icon" [disabled]="loading"> class="uk-close uk-icon" [disabled]="loading">
<icon name="close" flex="true" ratio="0.7"></icon> <icon name="close" flex="true" ratio="0.7"></icon>
</button> </button>