@hestia-earth/ui-components 0.32.59 → 0.32.60

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

@@ -1063,7 +1063,7 @@ const defaultBarDrawSettings = {
     yPosFn: (y, index) => y + 3,
     colorFn: (m, index) => 'black',
     textFn: (m, index) => `${m.label} - ${toPrecision(m.data)} kg`,
-    font: '12px Lato',
+    font: '14px Lato',
     maxWidth: 90
 };
 const afterBarDrawPlugin = settings => ({
@@ -5534,11 +5534,11 @@ class ShelfDialogComponent {
         this.showContent.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ShelfDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: ShelfDialogComponent, isStandalone: true, selector: "he-shelf-dialog", inputs: { headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, bottom: { classPropertyName: "bottom", publicName: "bottom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div [style.bottom]=\"bottom()\" class=\"shelf-dialog | is-fixed is-overflow-hidden\">\n  <header class=\"shelf-dialog__header | px-4 py-2 is-flex is-rounded has-text-white is-align-items-center\">\n    <div class=\"is-flex-grow-1\">\n      <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? defaultTemplate\" />\n    </div>\n    <button (click)=\"showContent.set(!showContent())\" class=\"ml-3 has-text-white | dialog-btn\">\n      <he-svg-icon [name]=\"toggleIcon()\" size=\"24\" />\n    </button>\n    <button (click)=\"closed.emit()\" class=\"ml-3 has-text-white | dialog-btn\">\n      <he-svg-icon name=\"xmark\" size=\"24\" />\n    </button>\n  </header>\n  <div [class.max-h-0]=\"!showContent()\" class=\"shelf-dialog__content | has-background-white is-overflow-hidden\">\n    <div>\n      <div class=\"p-4\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultTemplate>\n  {{ title() }}\n</ng-template>\n", styles: [".shelf-dialog{min-width:360px;right:10%;border-radius:.5em .5em 0 0;box-shadow:0 8px 8px #00000026;z-index:99}.shelf-dialog__header{background:#4c7194}.shelf-dialog__content{display:grid;grid-template-rows:1fr;transition:grid-template-rows 125ms}.shelf-dialog__content>*{overflow:hidden}.shelf-dialog .dialog-btn{background:transparent;border:none;width:1.5rem;height:1.5rem}.max-h-0{grid-template-rows:0fr}@media screen and (max-width: 767px){.shelf-dialog{width:100dvw;right:0;border-radius:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: ShelfDialogComponent, isStandalone: true, selector: "he-shelf-dialog", inputs: { headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, bottom: { classPropertyName: "bottom", publicName: "bottom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div [style.bottom]=\"bottom()\" class=\"shelf-dialog | is-fixed is-overflow-hidden\">\n  <header class=\"shelf-dialog__header | px-4 py-2 is-flex is-rounded has-text-secondary is-align-items-center\">\n    <div class=\"is-flex-grow-1\">\n      <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? defaultTemplate\" />\n    </div>\n    <button (click)=\"showContent.set(!showContent())\" class=\"ml-3 has-text-secondary | dialog-btn\">\n      <he-svg-icon [name]=\"toggleIcon()\" size=\"24\" />\n    </button>\n    <button (click)=\"closed.emit()\" class=\"ml-3 has-text-secondary | dialog-btn\">\n      <he-svg-icon name=\"xmark\" size=\"24\" />\n    </button>\n  </header>\n  <div [class.max-h-0]=\"!showContent()\" class=\"shelf-dialog__content | has-background-white is-overflow-hidden\">\n    <div>\n      <div class=\"p-4\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultTemplate>\n  {{ title() }}\n</ng-template>\n", styles: [".shelf-dialog{min-width:360px;right:10%;border-radius:.5em .5em 0 0;box-shadow:0 8px 8px #00000026;z-index:99}.shelf-dialog__header{background:#f5f7f9}.shelf-dialog__content{display:grid;grid-template-rows:1fr;transition:grid-template-rows 125ms}.shelf-dialog__content>*{overflow:hidden}.shelf-dialog .dialog-btn{background:transparent;border:none;width:1.5rem;height:1.5rem}.max-h-0{grid-template-rows:0fr}@media screen and (max-width: 767px){.shelf-dialog{width:100dvw;right:0;border-radius:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ShelfDialogComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-shelf-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, HESvgIconComponent], template: "<div [style.bottom]=\"bottom()\" class=\"shelf-dialog | is-fixed is-overflow-hidden\">\n  <header class=\"shelf-dialog__header | px-4 py-2 is-flex is-rounded has-text-white is-align-items-center\">\n    <div class=\"is-flex-grow-1\">\n      <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? defaultTemplate\" />\n    </div>\n    <button (click)=\"showContent.set(!showContent())\" class=\"ml-3 has-text-white | dialog-btn\">\n      <he-svg-icon [name]=\"toggleIcon()\" size=\"24\" />\n    </button>\n    <button (click)=\"closed.emit()\" class=\"ml-3 has-text-white | dialog-btn\">\n      <he-svg-icon name=\"xmark\" size=\"24\" />\n    </button>\n  </header>\n  <div [class.max-h-0]=\"!showContent()\" class=\"shelf-dialog__content | has-background-white is-overflow-hidden\">\n    <div>\n      <div class=\"p-4\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultTemplate>\n  {{ title() }}\n</ng-template>\n", styles: [".shelf-dialog{min-width:360px;right:10%;border-radius:.5em .5em 0 0;box-shadow:0 8px 8px #00000026;z-index:99}.shelf-dialog__header{background:#4c7194}.shelf-dialog__content{display:grid;grid-template-rows:1fr;transition:grid-template-rows 125ms}.shelf-dialog__content>*{overflow:hidden}.shelf-dialog .dialog-btn{background:transparent;border:none;width:1.5rem;height:1.5rem}.max-h-0{grid-template-rows:0fr}@media screen and (max-width: 767px){.shelf-dialog{width:100dvw;right:0;border-radius:0}}\n"] }]
+            args: [{ selector: 'he-shelf-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, HESvgIconComponent], template: "<div [style.bottom]=\"bottom()\" class=\"shelf-dialog | is-fixed is-overflow-hidden\">\n  <header class=\"shelf-dialog__header | px-4 py-2 is-flex is-rounded has-text-secondary is-align-items-center\">\n    <div class=\"is-flex-grow-1\">\n      <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? defaultTemplate\" />\n    </div>\n    <button (click)=\"showContent.set(!showContent())\" class=\"ml-3 has-text-secondary | dialog-btn\">\n      <he-svg-icon [name]=\"toggleIcon()\" size=\"24\" />\n    </button>\n    <button (click)=\"closed.emit()\" class=\"ml-3 has-text-secondary | dialog-btn\">\n      <he-svg-icon name=\"xmark\" size=\"24\" />\n    </button>\n  </header>\n  <div [class.max-h-0]=\"!showContent()\" class=\"shelf-dialog__content | has-background-white is-overflow-hidden\">\n    <div>\n      <div class=\"p-4\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultTemplate>\n  {{ title() }}\n</ng-template>\n", styles: [".shelf-dialog{min-width:360px;right:10%;border-radius:.5em .5em 0 0;box-shadow:0 8px 8px #00000026;z-index:99}.shelf-dialog__header{background:#f5f7f9}.shelf-dialog__content{display:grid;grid-template-rows:1fr;transition:grid-template-rows 125ms}.shelf-dialog__content>*{overflow:hidden}.shelf-dialog .dialog-btn{background:transparent;border:none;width:1.5rem;height:1.5rem}.max-h-0{grid-template-rows:0fr}@media screen and (max-width: 767px){.shelf-dialog{width:100dvw;right:0;border-radius:0}}\n"] }]
         }] });
 
 const primaryProduct = ({ products }) => (products || []).find(({ primary }) => primary);
@@ -13407,7 +13407,7 @@ class FilterAccordionComponent extends ControlValueAccessor {
                 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-2 mb-0\">{{ title() }}</h3>\n      @if (tooltip()) {\n        <he-svg-icon\n          name=\"info-circle\"\n          class=\"has-text-grey\"\n          [ngbTooltip]=\"tooltip()\"\n          placement=\"top\"\n          triggers=\"hover\"\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 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 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\" />\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}\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\"></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\" />\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilterAccordionComponent, decorators: [{
             type: Component$1,
@@ -13418,7 +13418,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-2 mb-0\">{{ title() }}</h3>\n      @if (tooltip()) {\n        <he-svg-icon\n          name=\"info-circle\"\n          class=\"has-text-grey\"\n          [ngbTooltip]=\"tooltip()\"\n          placement=\"top\"\n          triggers=\"hover\"\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 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 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\" />\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}\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\"></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\" />\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"] }]
         }], ctorParameters: () => [] });
 
 const sortedPoints = (values) => Object.entries(values)