@hestia-earth/ui-components 0.33.5 → 0.33.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -13206,6 +13206,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
13206
13206
|
args: ['class.active']
|
|
13207
13207
|
}] } });
|
|
13208
13208
|
|
|
13209
|
+
/**
|
|
13210
|
+
* @deprecated Use `he-filter-accordion` instead.
|
|
13211
|
+
*/
|
|
13209
13212
|
class FilterComponent extends ControlValueAccessor {
|
|
13210
13213
|
constructor() {
|
|
13211
13214
|
super(...arguments);
|
|
@@ -13351,6 +13354,10 @@ class FilterAccordionComponent extends ControlValueAccessor {
|
|
|
13351
13354
|
constructor() {
|
|
13352
13355
|
super();
|
|
13353
13356
|
this.filterStore = inject(FilterStore);
|
|
13357
|
+
/**
|
|
13358
|
+
* Show the header, with title and global clear/search.
|
|
13359
|
+
*/
|
|
13360
|
+
this.showHeader = input(true);
|
|
13354
13361
|
/**
|
|
13355
13362
|
* Component title.
|
|
13356
13363
|
*/
|
|
@@ -13381,6 +13388,12 @@ class FilterAccordionComponent extends ControlValueAccessor {
|
|
|
13381
13388
|
this.selectionChanged = output();
|
|
13382
13389
|
this.selectControl = new FormControl([]);
|
|
13383
13390
|
this.panelStates = {};
|
|
13391
|
+
/**
|
|
13392
|
+
* Access the current selected value.
|
|
13393
|
+
*
|
|
13394
|
+
* @returns List of values.
|
|
13395
|
+
*/
|
|
13396
|
+
this.selectedValues = () => (this.selectControl.value || []);
|
|
13384
13397
|
this.optionsFromGroup = optionsFromGroup;
|
|
13385
13398
|
this.getDirectOptionsCount = getDirectOptionsCount;
|
|
13386
13399
|
this.getFilteredDirectChildren = getFilteredDirectChildren;
|
|
@@ -13417,18 +13430,21 @@ class FilterAccordionComponent extends ControlValueAccessor {
|
|
|
13417
13430
|
}
|
|
13418
13431
|
])));
|
|
13419
13432
|
}
|
|
13433
|
+
/**
|
|
13434
|
+
* Un-select all options, except disabled options.
|
|
13435
|
+
*/
|
|
13420
13436
|
clearAll() {
|
|
13421
13437
|
// only keep the disabled selected values
|
|
13422
13438
|
const values = disabledValues(this.data());
|
|
13423
|
-
const selectedValues = this.
|
|
13439
|
+
const selectedValues = this.selectedValues();
|
|
13424
13440
|
this.onSelectionChange(selectedValues.filter(value => values.includes(value)));
|
|
13425
13441
|
}
|
|
13426
13442
|
isOptionSelected(value) {
|
|
13427
|
-
const currentValue = this.
|
|
13443
|
+
const currentValue = this.selectedValues();
|
|
13428
13444
|
return Array.isArray(currentValue) ? currentValue.includes(value) : currentValue === value;
|
|
13429
13445
|
}
|
|
13430
13446
|
toggleOption(value) {
|
|
13431
|
-
const currentValue =
|
|
13447
|
+
const currentValue = this.selectedValues();
|
|
13432
13448
|
const newValue = this.isOptionSelected(value)
|
|
13433
13449
|
? currentValue.filter(v => v !== value)
|
|
13434
13450
|
: [...currentValue, value];
|
|
@@ -13436,7 +13452,7 @@ class FilterAccordionComponent extends ControlValueAccessor {
|
|
|
13436
13452
|
}
|
|
13437
13453
|
toggleGroup(group) {
|
|
13438
13454
|
const allGroupValues = optionsFromGroup(group);
|
|
13439
|
-
const currentValue =
|
|
13455
|
+
const currentValue = this.selectedValues();
|
|
13440
13456
|
const allSelected = allGroupValues.every(val => currentValue.includes(val));
|
|
13441
13457
|
const newValue = allSelected
|
|
13442
13458
|
? currentValue.filter(val => !allGroupValues.includes(val))
|
|
@@ -13445,13 +13461,13 @@ class FilterAccordionComponent extends ControlValueAccessor {
|
|
|
13445
13461
|
}
|
|
13446
13462
|
isGroupPartiallySelected(group) {
|
|
13447
13463
|
const allGroupValues = optionsFromGroup(group);
|
|
13448
|
-
const currentValue =
|
|
13464
|
+
const currentValue = this.selectedValues();
|
|
13449
13465
|
const selectedCount = allGroupValues.filter(val => currentValue.includes(val)).length;
|
|
13450
13466
|
return selectedCount > 0 && selectedCount < allGroupValues.length;
|
|
13451
13467
|
}
|
|
13452
13468
|
isGroupFullySelected(group) {
|
|
13453
13469
|
const allGroupValues = optionsFromGroup(group);
|
|
13454
|
-
const currentValue =
|
|
13470
|
+
const currentValue = this.selectedValues();
|
|
13455
13471
|
return allGroupValues.length > 0 && allGroupValues.every(val => currentValue.includes(val));
|
|
13456
13472
|
}
|
|
13457
13473
|
getFilteredOptions(group, searchTerm) {
|
|
@@ -13463,14 +13479,14 @@ class FilterAccordionComponent extends ControlValueAccessor {
|
|
|
13463
13479
|
return this.disabled() || item.disabled || parentDisabled;
|
|
13464
13480
|
}
|
|
13465
13481
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilterAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13466
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: FilterAccordionComponent, isStandalone: true, selector: "he-filter-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, showGlobalSearch: { classPropertyName: "showGlobalSearch", publicName: "showGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, globalSearchPlaceholder: { classPropertyName: "globalSearchPlaceholder", publicName: "globalSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showClearAll: { classPropertyName: "showClearAll", publicName: "showClearAll", isSignal: true, isRequired: false, transformFunction: null }, getOptionCountFn: { classPropertyName: "getOptionCountFn", publicName: "getOptionCountFn", isSignal: true, isRequired: false, transformFunction: null }, preserveOptionsOnSelection: { classPropertyName: "preserveOptionsOnSelection", publicName: "preserveOptionsOnSelection", isSignal: true, isRequired: false, transformFunction: null }, maintainPanelStates: { classPropertyName: "maintainPanelStates", publicName: "maintainPanelStates", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groupMaxHeight: { classPropertyName: "groupMaxHeight", publicName: "groupMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChanged: "selectionChanged" }, providers: [
|
|
13482
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: FilterAccordionComponent, isStandalone: true, selector: "he-filter-accordion", inputs: { showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, showGlobalSearch: { classPropertyName: "showGlobalSearch", publicName: "showGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, globalSearchPlaceholder: { classPropertyName: "globalSearchPlaceholder", publicName: "globalSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showClearAll: { classPropertyName: "showClearAll", publicName: "showClearAll", isSignal: true, isRequired: false, transformFunction: null }, getOptionCountFn: { classPropertyName: "getOptionCountFn", publicName: "getOptionCountFn", isSignal: true, isRequired: false, transformFunction: null }, preserveOptionsOnSelection: { classPropertyName: "preserveOptionsOnSelection", publicName: "preserveOptionsOnSelection", isSignal: true, isRequired: false, transformFunction: null }, maintainPanelStates: { classPropertyName: "maintainPanelStates", publicName: "maintainPanelStates", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groupMaxHeight: { classPropertyName: "groupMaxHeight", publicName: "groupMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChanged: "selectionChanged" }, providers: [
|
|
13467
13483
|
{
|
|
13468
13484
|
provide: NG_VALUE_ACCESSOR,
|
|
13469
13485
|
useExisting: forwardRef(() => FilterAccordionComponent),
|
|
13470
13486
|
multi: true
|
|
13471
13487
|
},
|
|
13472
13488
|
FilterStore
|
|
13473
|
-
], usesInheritance: true, ngImport: i0, template: "<div\n
|
|
13489
|
+
], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\n <div\n class=\"is-flex is-justify-content-space-between is-gap-16 is-align-items-flex-start is-flex-direction-column has-border-bottom\">\n <div class=\"is-flex is-align-items-center\">\n <h3 class=\"title is-size-6 has-text-secondary mr-1 mb-0\">{{ title() }}</h3>\n @if (tooltip()) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey-light\"\n [ngbTooltip]=\"tooltip()\"\n placement=\"top\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n </div>\n\n <ng-content select=\"[header-content]\" />\n\n @if (showClearAll()) {\n <span class=\"is-clickable is-size-7 mb-1 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n Clear all\n </span>\n }\n\n @if (showGlobalSearch()) {\n <div class=\"field is-mb-0 pb-2 w-100\">\n <div class=\"control is-expanded has-icons-right\">\n <input\n type=\"text\"\n class=\"input is-secondary is-small search-input\"\n [placeholder]=\"globalSearchPlaceholder()\"\n [(ngModel)]=\"search\"\n [disabled]=\"disabled()\" />\n <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"search.set('')\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"search()\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n </div>\n}\n\n<div class=\"has-border-bottom\">\n <ng-container\n *ngTemplateOutlet=\"\n itemsList;\n context: { group: { options: filterStore.filteredData() }, parentSearch: search() }\n \" />\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\">\n @let items = getFilteredDirectChildren(group, parentSearch);\n\n @for (item of items; track item.trackId || item.label; let lastItem = $last) {\n @if (item.type === 'group') {\n @let groupState = panelStates[item.label];\n @if (groupState) {\n <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n <div\n class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n (click)=\"groupState.expanded = !groupState.expanded\">\n <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n </div>\n\n <div\n class=\"filter-accordion__panel-content\"\n [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\"\n [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n <div class=\"filter-accordion__panel-inner\">\n <div class=\"filter-accordion__search\" [class.d-none]=\"getDirectOptionsCount(item) <= 5\">\n <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n <div class=\"control is-expanded has-icons-right pl-5\">\n <input\n type=\"text\"\n class=\"input is-secondary is-small search-input pl-2\"\n placeholder=\"Search {{ removeCountFromLabel(item.label) }}\"\n [value]=\"groupState.searchTerm || ''\"\n [disabled]=\"isItemEffectivelyDisabled(item)\"\n (input)=\"groupState.searchTerm = $any($event.target).value\" />\n <a\n class=\"icon has-text-secondary is-small is-right\"\n [class.is-hidden]=\"!groupState.searchTerm\"\n (click)=\"groupState.searchTerm = ''\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n </div>\n\n <div class=\"pl-5\">\n <ng-container\n *ngTemplateOutlet=\"\n itemsList;\n context: { group: item, parentSearch: parentSearch || groupState.searchTerm }\n \" />\n </div>\n </div>\n </div>\n </div>\n }\n } @else {\n <div\n class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n [class.has-border-bottom]=\"!lastItem\">\n <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n </div>\n }\n } @empty {\n @if (parentSearch) {\n <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n No results found for \"{{ parentSearch }}\"\n </div>\n }\n }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\">\n <span class=\"is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n <span>{{ removeCountFromLabel(item.label) }}</span>\n\n @if (item.tooltip) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey-light is-pl-2\"\n [ngbTooltip]=\"item.tooltip\"\n placement=\"top\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n <label\n class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n class=\"mr-3 is-flex-shrink-0\"\n [checked]=\"isGroupFullySelected(item)\"\n [indeterminate]=\"isGroupPartiallySelected(item)\"\n (change)=\"toggleGroup(item)\"\n [disabled]=\"isItemEffectivelyDisabled(item)\" />\n </label>\n\n <ng-container *ngTemplateOutlet=\"itemLabel; context: { item }\" />\n\n <he-svg-icon\n class=\"has-text-secondary transition-transform\"\n [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n <label\n class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n class=\"mr-3 is-flex-shrink-0\"\n [checked]=\"isOptionSelected(item.value)\"\n (change)=\"toggleOption(item.value)\"\n [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n <ng-container *ngTemplateOutlet=\"itemLabel; context: { item }\" />\n\n @let count = getOptionCountFn()(item.value);\n @if (isNumber(count)) {\n <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n }\n </label>\n</ng-template>\n", styles: [".clear-button{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;box-shadow:none!important}.filter-accordion__panel-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1);will-change:grid-template-rows}.filter-accordion__panel-content--expanded{grid-template-rows:1fr}.filter-accordion__panel-inner{min-height:0;overflow:hidden}.filter-accordion__panel-content--expanded .filter-accordion__panel-inner{overflow-y:hidden;max-height:var(--max-height, none)}.filter-accordion__search{opacity:0;visibility:hidden;transition:opacity .15s ease-out,visibility 0s .15s}.filter-accordion__panel-content--expanded .filter-accordion__search{opacity:1;visibility:visible;transition:opacity .2s ease-in .1s,visibility 0s 0s}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s ease-out}input[type=checkbox]{height:14px;width:14px;border:1px solid #b5b5b5;border-radius:2px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13474
13490
|
}
|
|
13475
13491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilterAccordionComponent, decorators: [{
|
|
13476
13492
|
type: Component$1,
|
|
@@ -13481,7 +13497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
13481
13497
|
multi: true
|
|
13482
13498
|
},
|
|
13483
13499
|
FilterStore
|
|
13484
|
-
], imports: [FormsModule, ReactiveFormsModule, HESvgIconComponent, NgbTooltip, NgTemplateOutlet], template: "<div\n
|
|
13500
|
+
], imports: [FormsModule, ReactiveFormsModule, HESvgIconComponent, NgbTooltip, NgTemplateOutlet], template: "@if (showHeader()) {\n <div\n class=\"is-flex is-justify-content-space-between is-gap-16 is-align-items-flex-start is-flex-direction-column has-border-bottom\">\n <div class=\"is-flex is-align-items-center\">\n <h3 class=\"title is-size-6 has-text-secondary mr-1 mb-0\">{{ title() }}</h3>\n @if (tooltip()) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey-light\"\n [ngbTooltip]=\"tooltip()\"\n placement=\"top\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n </div>\n\n <ng-content select=\"[header-content]\" />\n\n @if (showClearAll()) {\n <span class=\"is-clickable is-size-7 mb-1 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n Clear all\n </span>\n }\n\n @if (showGlobalSearch()) {\n <div class=\"field is-mb-0 pb-2 w-100\">\n <div class=\"control is-expanded has-icons-right\">\n <input\n type=\"text\"\n class=\"input is-secondary is-small search-input\"\n [placeholder]=\"globalSearchPlaceholder()\"\n [(ngModel)]=\"search\"\n [disabled]=\"disabled()\" />\n <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"search.set('')\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"search()\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n </div>\n}\n\n<div class=\"has-border-bottom\">\n <ng-container\n *ngTemplateOutlet=\"\n itemsList;\n context: { group: { options: filterStore.filteredData() }, parentSearch: search() }\n \" />\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\">\n @let items = getFilteredDirectChildren(group, parentSearch);\n\n @for (item of items; track item.trackId || item.label; let lastItem = $last) {\n @if (item.type === 'group') {\n @let groupState = panelStates[item.label];\n @if (groupState) {\n <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n <div\n class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n (click)=\"groupState.expanded = !groupState.expanded\">\n <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n </div>\n\n <div\n class=\"filter-accordion__panel-content\"\n [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\"\n [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n <div class=\"filter-accordion__panel-inner\">\n <div class=\"filter-accordion__search\" [class.d-none]=\"getDirectOptionsCount(item) <= 5\">\n <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n <div class=\"control is-expanded has-icons-right pl-5\">\n <input\n type=\"text\"\n class=\"input is-secondary is-small search-input pl-2\"\n placeholder=\"Search {{ removeCountFromLabel(item.label) }}\"\n [value]=\"groupState.searchTerm || ''\"\n [disabled]=\"isItemEffectivelyDisabled(item)\"\n (input)=\"groupState.searchTerm = $any($event.target).value\" />\n <a\n class=\"icon has-text-secondary is-small is-right\"\n [class.is-hidden]=\"!groupState.searchTerm\"\n (click)=\"groupState.searchTerm = ''\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n </div>\n\n <div class=\"pl-5\">\n <ng-container\n *ngTemplateOutlet=\"\n itemsList;\n context: { group: item, parentSearch: parentSearch || groupState.searchTerm }\n \" />\n </div>\n </div>\n </div>\n </div>\n }\n } @else {\n <div\n class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n [class.has-border-bottom]=\"!lastItem\">\n <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n </div>\n }\n } @empty {\n @if (parentSearch) {\n <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n No results found for \"{{ parentSearch }}\"\n </div>\n }\n }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\">\n <span class=\"is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n <span>{{ removeCountFromLabel(item.label) }}</span>\n\n @if (item.tooltip) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey-light is-pl-2\"\n [ngbTooltip]=\"item.tooltip\"\n placement=\"top\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n <label\n class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n class=\"mr-3 is-flex-shrink-0\"\n [checked]=\"isGroupFullySelected(item)\"\n [indeterminate]=\"isGroupPartiallySelected(item)\"\n (change)=\"toggleGroup(item)\"\n [disabled]=\"isItemEffectivelyDisabled(item)\" />\n </label>\n\n <ng-container *ngTemplateOutlet=\"itemLabel; context: { item }\" />\n\n <he-svg-icon\n class=\"has-text-secondary transition-transform\"\n [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n <label\n class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n class=\"mr-3 is-flex-shrink-0\"\n [checked]=\"isOptionSelected(item.value)\"\n (change)=\"toggleOption(item.value)\"\n [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n <ng-container *ngTemplateOutlet=\"itemLabel; context: { item }\" />\n\n @let count = getOptionCountFn()(item.value);\n @if (isNumber(count)) {\n <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n }\n </label>\n</ng-template>\n", styles: [".clear-button{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;box-shadow:none!important}.filter-accordion__panel-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1);will-change:grid-template-rows}.filter-accordion__panel-content--expanded{grid-template-rows:1fr}.filter-accordion__panel-inner{min-height:0;overflow:hidden}.filter-accordion__panel-content--expanded .filter-accordion__panel-inner{overflow-y:hidden;max-height:var(--max-height, none)}.filter-accordion__search{opacity:0;visibility:hidden;transition:opacity .15s ease-out,visibility 0s .15s}.filter-accordion__panel-content--expanded .filter-accordion__search{opacity:1;visibility:visible;transition:opacity .2s ease-in .1s,visibility 0s 0s}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s ease-out}input[type=checkbox]{height:14px;width:14px;border:1px solid #b5b5b5;border-radius:2px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"] }]
|
|
13485
13501
|
}], ctorParameters: () => [] });
|
|
13486
13502
|
|
|
13487
13503
|
const sortedPoints = (values) => Object.entries(values)
|