@hestia-earth/ui-components 0.32.70 → 0.32.71

package/fesm2022/hestia-earth-ui-components.mjs

@@ -9081,7 +9081,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 /* eslint-disable complexity */
 /* eslint-disable max-len */
 /* eslint-disable no-useless-escape */
-const guidePageId = (nodeType, errorMessage) => [toDashCase(nodeType), validationsByMessage?.[errorMessage]?.[0]?.function].filter(Boolean).join('#');
+const guidePageId = (nodeType, errorMessage) => {
+    const error = validationsByMessage?.[errorMessage]?.[0]?.function;
+    return error ? [toDashCase(nodeType), error].filter(Boolean).join('#') : null;
+};
 const mapErrorMessage = 'does not contain latitude and longitude';
 const parseDataPath = (dataPath = '') => {
     const [_, ...paths] = dataPath
@@ -12889,10 +12892,7 @@ class FilterStore extends ComponentStore {
         });
         this.filteredData = this.selectSignal(({ filter, filterFn, data, mapFn }) => {
             const filteredData = this._getFilteredData(filter, filterFn, data);
-            if (mapFn) {
-                return mapFilterData(filteredData, mapFn);
-            }
-            return filteredData;
+            return mapFn ? mapFilterData(filteredData, mapFn) : filteredData;
         });
     }
     _getFilteredData(filter, filterFn, data) {
@@ -13365,8 +13365,25 @@ class FilterAccordionComponent extends ControlValueAccessor {
     constructor() {
         super();
         this.filterStore = inject(FilterStore);
+        /**
+         * Component title.
+         */
         this.title = input('Filter available data by');
+        /**
+         * Component title tooltip.
+         */
         this.tooltip = input(undefined);
+        /**
+         * Show a search bar to search within all groups.
+         */
+        this.showGlobalSearch = input(false);
+        /**
+         * Placeholder for the global search input.
+         */
+        this.globalSearchPlaceholder = input('Search');
+        /**
+         * Show button to clear all filters.
+         */
         this.showClearAll = input(true);
         this.getOptionCountFn = input(() => undefined);
         this.preserveOptionsOnSelection = input(false);
@@ -13383,6 +13400,8 @@ class FilterAccordionComponent extends ControlValueAccessor {
         this.getFilteredDirectChildren = getFilteredDirectChildren;
         this.removeCountFromLabel = removeCountFromLabel;
         this.isNumber = isNumber;
+        this.search = signal('');
+        effect(() => this.filterStore.patchState({ filter: this.search() }));
         effect(() => this.data() && this.filterStore.setData(this.data()));
         effect(() => (this.panelStates = Object.fromEntries(allGroups(this.data()).map(({ label }) => [
             label,
@@ -13459,14 +13478,14 @@ class FilterAccordionComponent extends ControlValueAccessor {
         return this.disabled() || item.disabled || parentDisabled;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilterAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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 }, 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: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FilterAccordionComponent),
                 multi: true
             },
             FilterStore
-        ], usesInheritance: true, ngImport: i0, template: "<div>\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\"></he-svg-icon>\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  </div>\n\n  <div>\n    @for (item of filterStore.filteredData(); track item.trackId || item.label) {\n      @if (item.type === 'group') {\n        @if (panelStates[item.label]) {\n          @let groupState = panelStates[item.label];\n          <div class=\"has-border-bottom\" [class.is-active]=\"groupState.expanded\">\n            <div\n              class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n              (click)=\"groupState.expanded = !groupState.expanded\">\n              <label class=\"checkbox is-flex is-justify-content-center is-align-items-center mr-3\" (click)=\"$event.stopPropagation()\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isGroupFullySelected(item)\"\n                  [indeterminate]=\"isGroupPartiallySelected(item)\"\n                  (change)=\"toggleGroup(item)\"\n                  [disabled]=\"isItemEffectivelyDisabled(item)\" />\n              </label>\n\n              <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                {{ removeCountFromLabel(item.label) }}\n              </span>\n\n              <he-svg-icon\n                class=\"has-text-secondary transition-transform\"\n                [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\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 is-italic 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>\n                  @for (\n                    child of getFilteredDirectChildren(item, groupState.searchTerm);\n                    track child.trackId || child.label;\n                    let childLast = $last\n                  ) {\n                    @if (child.type === 'group') {\n                      <!-- Nested group -->\n                      @if (panelStates[child.label]) {\n                        @let childState = panelStates[child.label];\n                        <div class=\"pl-5\" [class.has-border-bottom]=\"!childLast\">\n                          <div [class.is-active]=\"childState.expanded\">\n                            <div\n                              class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n                              (click)=\"childState.expanded = !childState.expanded\">\n                              <label class=\"checkbox is-flex is-justify-content-center is-align-items-center mr-3\" (click)=\"$event.stopPropagation()\">\n                                <input\n                                  type=\"checkbox\"\n                                  [checked]=\"isGroupFullySelected(child)\"\n                                  [indeterminate]=\"isGroupPartiallySelected(child)\"\n                                  (change)=\"toggleGroup(child)\"\n                                  [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\" />\n                              </label>\n\n                              <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                                {{ removeCountFromLabel(child.label) }}\n                              </span>\n\n                              <he-svg-icon\n                                class=\"has-text-secondary transition-transform\"\n                                [class.is-rotated-180]=\"childState.expanded\"\n                                [name]=\"childState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n                            </div>\n\n                            <div\n                              class=\"filter-accordion__panel-content\"\n                              [class.filter-accordion__panel-content--expanded]=\"childState.expanded\"\n                              [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n                              <div class=\"filter-accordion__panel-inner\">\n                                <div\n                                  class=\"filter-accordion__search\"\n                                  [class.d-none]=\"optionsFromGroup(child).length < 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 is-size-7 search-input\"\n                                        placeholder=\"Search {{ removeCountFromLabel(child.label) }}\"\n                                        [value]=\"childState.searchTerm || ''\"\n                                        [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\"\n                                        (input)=\"childState.searchTerm = $any($event.target).value\" />\n                                      <a\n                                        class=\"icon is-small is-right\"\n                                        [class.is-hidden]=\"!childState.searchTerm\"\n                                        (click)=\"childState.searchTerm = ''\">\n                                        <he-svg-icon name=\"xmark\" />\n                                      </a>\n                                      <a class=\"icon is-small is-right\" [class.is-hidden]=\"childState.searchTerm\">\n                                        <he-svg-icon name=\"search\" />\n                                      </a>\n                                    </div>\n                                  </div>\n                                </div>\n                                <div>\n                                  @for (\n                                    nestedOption of getFilteredOptions(\n                                      child,\n                                      childState.searchTerm || groupState.searchTerm\n                                    );\n                                    track nestedOption.trackId || nestedOption.label;\n                                    let nestedLast = $last\n                                  ) {\n                                    <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!nestedLast\">\n                                      <ng-container\n                                        *ngTemplateOutlet=\"\n                                          optionLabel;\n                                          context: {\n                                            item: nestedOption,\n                                            parentDisabled: isItemEffectivelyDisabled(\n                                              child,\n                                              isItemEffectivelyDisabled(item)\n                                            )\n                                          }\n                                        \" />\n                                    </div>\n                                  }\n                                </div>\n                              </div>\n                            </div>\n                          </div>\n                        </div>\n                      }\n                    } @else {\n                      <!-- Direct option -->\n                      <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!childLast\">\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            optionLabel;\n                            context: { item: child, parentDisabled: isItemEffectivelyDisabled(item) }\n                          \" />\n                      </div>\n                    }\n                  }\n\n                  @if (getFilteredDirectChildren(item, groupState.searchTerm).length === 0 && groupState.searchTerm) {\n                    <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n                      No results found for \"{{ groupState.searchTerm }}\"\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      }\n\n      @if (item.type === 'option') {\n        <div class=\"is-flex is-justify-content-space-between has-border-bottom accordion-row\">\n          <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n    <input\n      type=\"checkbox\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\"\n      class=\"mr-3 is-flex-shrink-0\" />\n\n    <span class=\"is-flex-grow-1\">\n      {{ removeCountFromLabel(item.label) }}\n    </span>\n\n    @let count = getOptionCountFn()(item.value);\n\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{padding:4px 0;min-height:25px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.control{height:28px}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;color:#b5b5b5;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;cursor:pointer;background-color:transparent;accent-color:transparent}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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 }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div>\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  <div>\n    @for (item of filterStore.filteredData(); track item.trackId || item.label) {\n      @if (item.type === 'group') {\n        @if (panelStates[item.label]) {\n          @let groupState = panelStates[item.label];\n          <div class=\"has-border-bottom\" [class.is-active]=\"groupState.expanded\">\n            <div\n              class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n              (click)=\"groupState.expanded = !groupState.expanded\">\n              <label\n                class=\"checkbox is-flex is-justify-content-center is-align-items-center mr-3\"\n                (click)=\"$event.stopPropagation()\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isGroupFullySelected(item)\"\n                  [indeterminate]=\"isGroupPartiallySelected(item)\"\n                  (change)=\"toggleGroup(item)\"\n                  [disabled]=\"isItemEffectivelyDisabled(item)\" />\n              </label>\n\n              <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                {{ removeCountFromLabel(item.label) }}\n              </span>\n\n              <he-svg-icon\n                class=\"has-text-secondary transition-transform\"\n                [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\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>\n                  @for (\n                    child of getFilteredDirectChildren(item, groupState.searchTerm);\n                    track child.trackId || child.label;\n                    let childLast = $last\n                  ) {\n                    @if (child.type === 'group') {\n                      <!-- Nested group -->\n                      @if (panelStates[child.label]) {\n                        @let childState = panelStates[child.label];\n                        <div class=\"pl-5\" [class.has-border-bottom]=\"!childLast\">\n                          <div [class.is-active]=\"childState.expanded\">\n                            <div\n                              class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n                              (click)=\"childState.expanded = !childState.expanded\">\n                              <label\n                                class=\"checkbox is-flex is-justify-content-center is-align-items-center mr-3\"\n                                (click)=\"$event.stopPropagation()\">\n                                <input\n                                  type=\"checkbox\"\n                                  [checked]=\"isGroupFullySelected(child)\"\n                                  [indeterminate]=\"isGroupPartiallySelected(child)\"\n                                  (change)=\"toggleGroup(child)\"\n                                  [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\" />\n                              </label>\n\n                              <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                                {{ removeCountFromLabel(child.label) }}\n                              </span>\n\n                              <he-svg-icon\n                                class=\"has-text-secondary transition-transform\"\n                                [class.is-rotated-180]=\"childState.expanded\"\n                                [name]=\"childState.expanded ? 'chevron-up' : 'chevron-down'\" />\n                            </div>\n\n                            <div\n                              class=\"filter-accordion__panel-content\"\n                              [class.filter-accordion__panel-content--expanded]=\"childState.expanded\"\n                              [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n                              <div class=\"filter-accordion__panel-inner\">\n                                <div\n                                  class=\"filter-accordion__search\"\n                                  [class.d-none]=\"optionsFromGroup(child).length < 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 is-size-7 search-input\"\n                                        placeholder=\"Search {{ removeCountFromLabel(child.label) }}\"\n                                        [value]=\"childState.searchTerm || ''\"\n                                        [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\"\n                                        (input)=\"childState.searchTerm = $any($event.target).value\" />\n                                      <a\n                                        class=\"icon is-small is-right\"\n                                        [class.is-hidden]=\"!childState.searchTerm\"\n                                        (click)=\"childState.searchTerm = ''\">\n                                        <he-svg-icon name=\"xmark\" />\n                                      </a>\n                                      <a class=\"icon is-small is-right\" [class.is-hidden]=\"childState.searchTerm\">\n                                        <he-svg-icon name=\"search\" />\n                                      </a>\n                                    </div>\n                                  </div>\n                                </div>\n                                <div>\n                                  @for (\n                                    nestedOption of getFilteredOptions(\n                                      child,\n                                      childState.searchTerm || groupState.searchTerm\n                                    );\n                                    track nestedOption.trackId || nestedOption.label;\n                                    let nestedLast = $last\n                                  ) {\n                                    <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!nestedLast\">\n                                      <ng-container\n                                        *ngTemplateOutlet=\"\n                                          optionLabel;\n                                          context: {\n                                            item: nestedOption,\n                                            parentDisabled: isItemEffectivelyDisabled(\n                                              child,\n                                              isItemEffectivelyDisabled(item)\n                                            )\n                                          }\n                                        \" />\n                                    </div>\n                                  }\n                                </div>\n                              </div>\n                            </div>\n                          </div>\n                        </div>\n                      }\n                    } @else {\n                      <!-- Direct option -->\n                      <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!childLast\">\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            optionLabel;\n                            context: { item: child, parentDisabled: isItemEffectivelyDisabled(item) }\n                          \" />\n                      </div>\n                    }\n                  }\n\n                  @if (groupState.searchTerm && getFilteredDirectChildren(item, groupState.searchTerm).length === 0) {\n                    <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n                      No results found for \"{{ groupState.searchTerm }}\"\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      }\n\n      @if (item.type === 'option') {\n        <div class=\"is-flex is-justify-content-space-between has-border-bottom accordion-row\">\n          <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n    <input\n      type=\"checkbox\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\"\n      class=\"mr-3 is-flex-shrink-0\" />\n\n    <span class=\"is-flex-grow-1\">\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\n    @let count = getOptionCountFn()(item.value);\n\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{padding:4px 0;min-height:25px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.control{height:28px}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;color:#b5b5b5;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;cursor:pointer;background-color:transparent;accent-color:transparent}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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilterAccordionComponent, decorators: [{
             type: Component$1,
@@ -13477,7 +13496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                             multi: true
                         },
                         FilterStore
-                    ], imports: [FormsModule, ReactiveFormsModule, HESvgIconComponent, NgbTooltip, NgTemplateOutlet], template: "<div>\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\"></he-svg-icon>\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  </div>\n\n  <div>\n    @for (item of filterStore.filteredData(); track item.trackId || item.label) {\n      @if (item.type === 'group') {\n        @if (panelStates[item.label]) {\n          @let groupState = panelStates[item.label];\n          <div class=\"has-border-bottom\" [class.is-active]=\"groupState.expanded\">\n            <div\n              class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n              (click)=\"groupState.expanded = !groupState.expanded\">\n              <label class=\"checkbox is-flex is-justify-content-center is-align-items-center mr-3\" (click)=\"$event.stopPropagation()\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isGroupFullySelected(item)\"\n                  [indeterminate]=\"isGroupPartiallySelected(item)\"\n                  (change)=\"toggleGroup(item)\"\n                  [disabled]=\"isItemEffectivelyDisabled(item)\" />\n              </label>\n\n              <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                {{ removeCountFromLabel(item.label) }}\n              </span>\n\n              <he-svg-icon\n                class=\"has-text-secondary transition-transform\"\n                [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\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 is-italic 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>\n                  @for (\n                    child of getFilteredDirectChildren(item, groupState.searchTerm);\n                    track child.trackId || child.label;\n                    let childLast = $last\n                  ) {\n                    @if (child.type === 'group') {\n                      <!-- Nested group -->\n                      @if (panelStates[child.label]) {\n                        @let childState = panelStates[child.label];\n                        <div class=\"pl-5\" [class.has-border-bottom]=\"!childLast\">\n                          <div [class.is-active]=\"childState.expanded\">\n                            <div\n                              class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n                              (click)=\"childState.expanded = !childState.expanded\">\n                              <label class=\"checkbox is-flex is-justify-content-center is-align-items-center mr-3\" (click)=\"$event.stopPropagation()\">\n                                <input\n                                  type=\"checkbox\"\n                                  [checked]=\"isGroupFullySelected(child)\"\n                                  [indeterminate]=\"isGroupPartiallySelected(child)\"\n                                  (change)=\"toggleGroup(child)\"\n                                  [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\" />\n                              </label>\n\n                              <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                                {{ removeCountFromLabel(child.label) }}\n                              </span>\n\n                              <he-svg-icon\n                                class=\"has-text-secondary transition-transform\"\n                                [class.is-rotated-180]=\"childState.expanded\"\n                                [name]=\"childState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n                            </div>\n\n                            <div\n                              class=\"filter-accordion__panel-content\"\n                              [class.filter-accordion__panel-content--expanded]=\"childState.expanded\"\n                              [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n                              <div class=\"filter-accordion__panel-inner\">\n                                <div\n                                  class=\"filter-accordion__search\"\n                                  [class.d-none]=\"optionsFromGroup(child).length < 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 is-size-7 search-input\"\n                                        placeholder=\"Search {{ removeCountFromLabel(child.label) }}\"\n                                        [value]=\"childState.searchTerm || ''\"\n                                        [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\"\n                                        (input)=\"childState.searchTerm = $any($event.target).value\" />\n                                      <a\n                                        class=\"icon is-small is-right\"\n                                        [class.is-hidden]=\"!childState.searchTerm\"\n                                        (click)=\"childState.searchTerm = ''\">\n                                        <he-svg-icon name=\"xmark\" />\n                                      </a>\n                                      <a class=\"icon is-small is-right\" [class.is-hidden]=\"childState.searchTerm\">\n                                        <he-svg-icon name=\"search\" />\n                                      </a>\n                                    </div>\n                                  </div>\n                                </div>\n                                <div>\n                                  @for (\n                                    nestedOption of getFilteredOptions(\n                                      child,\n                                      childState.searchTerm || groupState.searchTerm\n                                    );\n                                    track nestedOption.trackId || nestedOption.label;\n                                    let nestedLast = $last\n                                  ) {\n                                    <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!nestedLast\">\n                                      <ng-container\n                                        *ngTemplateOutlet=\"\n                                          optionLabel;\n                                          context: {\n                                            item: nestedOption,\n                                            parentDisabled: isItemEffectivelyDisabled(\n                                              child,\n                                              isItemEffectivelyDisabled(item)\n                                            )\n                                          }\n                                        \" />\n                                    </div>\n                                  }\n                                </div>\n                              </div>\n                            </div>\n                          </div>\n                        </div>\n                      }\n                    } @else {\n                      <!-- Direct option -->\n                      <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!childLast\">\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            optionLabel;\n                            context: { item: child, parentDisabled: isItemEffectivelyDisabled(item) }\n                          \" />\n                      </div>\n                    }\n                  }\n\n                  @if (getFilteredDirectChildren(item, groupState.searchTerm).length === 0 && groupState.searchTerm) {\n                    <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n                      No results found for \"{{ groupState.searchTerm }}\"\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      }\n\n      @if (item.type === 'option') {\n        <div class=\"is-flex is-justify-content-space-between has-border-bottom accordion-row\">\n          <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n    <input\n      type=\"checkbox\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\"\n      class=\"mr-3 is-flex-shrink-0\" />\n\n    <span class=\"is-flex-grow-1\">\n      {{ removeCountFromLabel(item.label) }}\n    </span>\n\n    @let count = getOptionCountFn()(item.value);\n\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{padding:4px 0;min-height:25px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.control{height:28px}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;color:#b5b5b5;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;cursor:pointer;background-color:transparent;accent-color:transparent}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"] }]
+                    ], imports: [FormsModule, ReactiveFormsModule, HESvgIconComponent, NgbTooltip, NgTemplateOutlet], template: "<div>\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  <div>\n    @for (item of filterStore.filteredData(); track item.trackId || item.label) {\n      @if (item.type === 'group') {\n        @if (panelStates[item.label]) {\n          @let groupState = panelStates[item.label];\n          <div class=\"has-border-bottom\" [class.is-active]=\"groupState.expanded\">\n            <div\n              class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n              (click)=\"groupState.expanded = !groupState.expanded\">\n              <label\n                class=\"checkbox is-flex is-justify-content-center is-align-items-center mr-3\"\n                (click)=\"$event.stopPropagation()\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isGroupFullySelected(item)\"\n                  [indeterminate]=\"isGroupPartiallySelected(item)\"\n                  (change)=\"toggleGroup(item)\"\n                  [disabled]=\"isItemEffectivelyDisabled(item)\" />\n              </label>\n\n              <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                {{ removeCountFromLabel(item.label) }}\n              </span>\n\n              <he-svg-icon\n                class=\"has-text-secondary transition-transform\"\n                [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\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>\n                  @for (\n                    child of getFilteredDirectChildren(item, groupState.searchTerm);\n                    track child.trackId || child.label;\n                    let childLast = $last\n                  ) {\n                    @if (child.type === 'group') {\n                      <!-- Nested group -->\n                      @if (panelStates[child.label]) {\n                        @let childState = panelStates[child.label];\n                        <div class=\"pl-5\" [class.has-border-bottom]=\"!childLast\">\n                          <div [class.is-active]=\"childState.expanded\">\n                            <div\n                              class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n                              (click)=\"childState.expanded = !childState.expanded\">\n                              <label\n                                class=\"checkbox is-flex is-justify-content-center is-align-items-center mr-3\"\n                                (click)=\"$event.stopPropagation()\">\n                                <input\n                                  type=\"checkbox\"\n                                  [checked]=\"isGroupFullySelected(child)\"\n                                  [indeterminate]=\"isGroupPartiallySelected(child)\"\n                                  (change)=\"toggleGroup(child)\"\n                                  [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\" />\n                              </label>\n\n                              <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                                {{ removeCountFromLabel(child.label) }}\n                              </span>\n\n                              <he-svg-icon\n                                class=\"has-text-secondary transition-transform\"\n                                [class.is-rotated-180]=\"childState.expanded\"\n                                [name]=\"childState.expanded ? 'chevron-up' : 'chevron-down'\" />\n                            </div>\n\n                            <div\n                              class=\"filter-accordion__panel-content\"\n                              [class.filter-accordion__panel-content--expanded]=\"childState.expanded\"\n                              [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n                              <div class=\"filter-accordion__panel-inner\">\n                                <div\n                                  class=\"filter-accordion__search\"\n                                  [class.d-none]=\"optionsFromGroup(child).length < 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 is-size-7 search-input\"\n                                        placeholder=\"Search {{ removeCountFromLabel(child.label) }}\"\n                                        [value]=\"childState.searchTerm || ''\"\n                                        [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\"\n                                        (input)=\"childState.searchTerm = $any($event.target).value\" />\n                                      <a\n                                        class=\"icon is-small is-right\"\n                                        [class.is-hidden]=\"!childState.searchTerm\"\n                                        (click)=\"childState.searchTerm = ''\">\n                                        <he-svg-icon name=\"xmark\" />\n                                      </a>\n                                      <a class=\"icon is-small is-right\" [class.is-hidden]=\"childState.searchTerm\">\n                                        <he-svg-icon name=\"search\" />\n                                      </a>\n                                    </div>\n                                  </div>\n                                </div>\n                                <div>\n                                  @for (\n                                    nestedOption of getFilteredOptions(\n                                      child,\n                                      childState.searchTerm || groupState.searchTerm\n                                    );\n                                    track nestedOption.trackId || nestedOption.label;\n                                    let nestedLast = $last\n                                  ) {\n                                    <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!nestedLast\">\n                                      <ng-container\n                                        *ngTemplateOutlet=\"\n                                          optionLabel;\n                                          context: {\n                                            item: nestedOption,\n                                            parentDisabled: isItemEffectivelyDisabled(\n                                              child,\n                                              isItemEffectivelyDisabled(item)\n                                            )\n                                          }\n                                        \" />\n                                    </div>\n                                  }\n                                </div>\n                              </div>\n                            </div>\n                          </div>\n                        </div>\n                      }\n                    } @else {\n                      <!-- Direct option -->\n                      <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!childLast\">\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            optionLabel;\n                            context: { item: child, parentDisabled: isItemEffectivelyDisabled(item) }\n                          \" />\n                      </div>\n                    }\n                  }\n\n                  @if (groupState.searchTerm && getFilteredDirectChildren(item, groupState.searchTerm).length === 0) {\n                    <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n                      No results found for \"{{ groupState.searchTerm }}\"\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      }\n\n      @if (item.type === 'option') {\n        <div class=\"is-flex is-justify-content-space-between has-border-bottom accordion-row\">\n          <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n    <input\n      type=\"checkbox\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\"\n      class=\"mr-3 is-flex-shrink-0\" />\n\n    <span class=\"is-flex-grow-1\">\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\n    @let count = getOptionCountFn()(item.value);\n\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{padding:4px 0;min-height:25px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.control{height:28px}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;color:#b5b5b5;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;cursor:pointer;background-color:transparent;accent-color:transparent}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"] }]
         }], ctorParameters: () => [] });
 
 const sortedPoints = (values) => Object.entries(values)