@hestia-earth/ui-components 0.35.10 → 0.35.11

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

@@ -2757,7 +2757,12 @@ class DrawerContainerComponent {
         this.id = input('');
         this.opened = outputFromObservable(toObservable(this.menuState).pipe(skip(1), filter(state => state === 'open'), map(() => true)));
         this.closed = outputFromObservable(toObservable(this.menuState).pipe(skip(1), filter(state => state === 'close'), map(() => true)));
-        this.visible = computed(() => [this.links()?.length > 0, !!this.drawerHeaderTemplate(), !!this.drawerMenuHeaderTemplate()].some(Boolean));
+        this.visible = computed(() => [
+            this.links()?.length > 0,
+            !!this.drawerHeaderTemplate(),
+            !!this.drawerMenuHeaderTemplate(),
+            !!this.drawerContentTemplate()
+        ].some(Boolean));
         this.isCompact = toSignal(toObservable(this.compactBreakpoint).pipe(switchMap(breakpoint => this.responsiveService.isAboveBreakpoint$(breakpoint).pipe(map(isAboveBreakpoint => !isAboveBreakpoint)))));
         this.hostClass = computed(() => ['is-flex', this.isCompact() ? 'is-flex-direction-column' : '', this.resizable() ? 'is-resizable' : ''].join(' '));
         this.isHoldingToggle = this.sidenavStore.isResizing;
@@ -2831,7 +2836,7 @@ class DrawerContainerComponent {
         return parseInt(padding, 10) + parseInt(margin, 10);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: DrawerContainerComponent, isStandalone: true, selector: "he-drawer-container", inputs: { compactBreakpoint: { classPropertyName: "compactBreakpoint", publicName: "compactBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, contentStyles: { classPropertyName: "contentStyles", publicName: "contentStyles", isSignal: true, isRequired: false, transformFunction: null }, contentPaddingStyles: { classPropertyName: "contentPaddingStyles", publicName: "contentPaddingStyles", isSignal: true, isRequired: false, transformFunction: null }, menuOverlap: { classPropertyName: "menuOverlap", publicName: "menuOverlap", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderTemplate: { classPropertyName: "drawerHeaderTemplate", publicName: "drawerHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuHeaderTemplate: { classPropertyName: "drawerMenuHeaderTemplate", publicName: "drawerMenuHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerContentTemplate: { classPropertyName: "drawerContentTemplate", publicName: "drawerContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, compactMenuLabel: { classPropertyName: "compactMenuLabel", publicName: "compactMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, compactHeaderClass: { classPropertyName: "compactHeaderClass", publicName: "compactHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, minMenuDistance: { classPropertyName: "minMenuDistance", publicName: "minMenuDistance", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { width: "widthChange", opened: "opened", closed: "closed" }, host: { listeners: { "window:mouseup": "stopResizing()", "window:touchend": "stopResizing()", "window:touchcancel": "stopResizing()" }, properties: { "class": "hostClass()", "attr.drawer-position": "position()", "attr.drawer-state": "menuState()" } }, providers: [sidenavStore], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n  @if (isCompact()) {\n    <div class=\"compact-header\">\n      <div [ngClass]=\"compactHeaderClass()\">\n        <div class=\"is-flex is-align-items-flex-start is-justify-content-space-between is-gap-8 w-100\">\n          <div class=\"is-flex is-flex-grow-1 is-justify-content-space-between is-gap-8 is-flex-direction-column\">\n            @if (drawerHeaderTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n            }\n            @if (drawerMenuHeaderTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n            }\n          </div>\n\n          @if (links()?.length > 0) {\n            <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n              <button\n                ngbDropdownToggle\n                class=\"compact-header--btn button is-small is-no-shadow\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                {{ compactMenuLabel() }}\n\n                <he-svg-icon\n                  class=\"compact-header--btn__icon\"\n                  [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n                  aria-hidden=\"true\" />\n              </button>\n\n              <div ngbDropdownMenu id=\"drawer-menu\">\n                <div class=\"dropdown-content navigation-menu-dropdown\">\n                  <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" />\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <aside>\n      <div\n        class=\"shell__menuContent | h-100\"\n        (@sideMenu.done)=\"animationDone($event)\"\n        [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n        <div\n          class=\"h-100 is-overflow-y-auto\"\n          [class.is-py-4]=\"!drawerContentTemplate()\"\n          [class.is-px-2]=\"!drawerContentTemplate()\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (drawerContentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n          } @else if (links()?.length > 0) {\n            <he-navigation-menu [links]=\"links()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n            </he-navigation-menu>\n          }\n        </div>\n        @if (collapsible()) {\n          <button\n            (click)=\"toggleMenu()\"\n            (mousedown)=\"startResizing($event)\"\n            (touchstart)=\"startResizing($event)\"\n            class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n            pointer>\n            <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n          </button>\n        }\n      </div>\n    </aside>\n  }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n  <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n    <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n      <ng-content select=\"[drawer-content]\" />\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0;box-shadow:6px 6px 6px #0000000f}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{position:absolute;top:0;box-shadow:6px 6px 6px #0000000f;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width:767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width:767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "component", type: NavigationMenuComponent, selector: "he-navigation-menu", inputs: ["links", "sticky", "collapsible", "routerLinkMatchOptions"], outputs: ["closed"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], animations: ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: DrawerContainerComponent, isStandalone: true, selector: "he-drawer-container", inputs: { compactBreakpoint: { classPropertyName: "compactBreakpoint", publicName: "compactBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, contentStyles: { classPropertyName: "contentStyles", publicName: "contentStyles", isSignal: true, isRequired: false, transformFunction: null }, contentPaddingStyles: { classPropertyName: "contentPaddingStyles", publicName: "contentPaddingStyles", isSignal: true, isRequired: false, transformFunction: null }, menuOverlap: { classPropertyName: "menuOverlap", publicName: "menuOverlap", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderTemplate: { classPropertyName: "drawerHeaderTemplate", publicName: "drawerHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuHeaderTemplate: { classPropertyName: "drawerMenuHeaderTemplate", publicName: "drawerMenuHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerContentTemplate: { classPropertyName: "drawerContentTemplate", publicName: "drawerContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, compactMenuLabel: { classPropertyName: "compactMenuLabel", publicName: "compactMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, compactHeaderClass: { classPropertyName: "compactHeaderClass", publicName: "compactHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, minMenuDistance: { classPropertyName: "minMenuDistance", publicName: "minMenuDistance", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { width: "widthChange", opened: "opened", closed: "closed" }, host: { listeners: { "window:mouseup": "stopResizing()", "window:touchend": "stopResizing()", "window:touchcancel": "stopResizing()" }, properties: { "class": "hostClass()", "attr.drawer-position": "position()", "attr.drawer-state": "menuState()" } }, providers: [sidenavStore], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n  @if (isCompact()) {\n    <div class=\"compact-header\">\n      <div [ngClass]=\"compactHeaderClass()\">\n        <div class=\"is-flex is-align-items-flex-start is-justify-content-space-between is-gap-8 w-100\">\n          <div class=\"is-flex is-flex-grow-1 is-justify-content-space-between is-gap-8 is-flex-direction-column\">\n            @if (drawerHeaderTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n            }\n            @if (drawerMenuHeaderTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n            }\n          </div>\n\n          @if (links()?.length > 0) {\n            <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n              <button\n                ngbDropdownToggle\n                class=\"compact-header--btn button is-small is-no-shadow\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                {{ compactMenuLabel() }}\n\n                <he-svg-icon\n                  class=\"compact-header--btn__icon\"\n                  [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n                  aria-hidden=\"true\" />\n              </button>\n\n              <div ngbDropdownMenu id=\"drawer-menu\">\n                <div class=\"dropdown-content navigation-menu-dropdown\">\n                  <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" />\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <aside>\n      <div\n        class=\"shell__menuContent | h-100\"\n        (@sideMenu.done)=\"animationDone($event)\"\n        [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n        <div\n          class=\"h-100 is-overflow-y-auto\"\n          [class.is-py-4]=\"!drawerContentTemplate()\"\n          [class.is-px-2]=\"!drawerContentTemplate()\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (drawerContentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <he-navigation-menu [links]=\"links()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n            </he-navigation-menu>\n          }\n        </div>\n        @if (collapsible()) {\n          <button\n            (click)=\"toggleMenu()\"\n            (mousedown)=\"startResizing($event)\"\n            (touchstart)=\"startResizing($event)\"\n            class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n            pointer>\n            <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n          </button>\n        }\n      </div>\n    </aside>\n  }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n  <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n    <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n      <ng-content select=\"[drawer-content]\" />\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0;box-shadow:6px 6px 6px #0000000f}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{position:absolute;top:0;box-shadow:6px 6px 6px #0000000f;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width:767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width:767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "component", type: NavigationMenuComponent, selector: "he-navigation-menu", inputs: ["links", "sticky", "collapsible", "routerLinkMatchOptions"], outputs: ["closed"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], animations: ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DrawerContainerComponent, decorators: [{
             type: Component$1,
@@ -2848,7 +2853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         '[class]': 'hostClass()',
                         '[attr.drawer-position]': 'position()',
                         '[attr.drawer-state]': 'menuState()'
-                    }, providers: [sidenavStore], template: "@if (visible()) {\n  @if (isCompact()) {\n    <div class=\"compact-header\">\n      <div [ngClass]=\"compactHeaderClass()\">\n        <div class=\"is-flex is-align-items-flex-start is-justify-content-space-between is-gap-8 w-100\">\n          <div class=\"is-flex is-flex-grow-1 is-justify-content-space-between is-gap-8 is-flex-direction-column\">\n            @if (drawerHeaderTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n            }\n            @if (drawerMenuHeaderTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n            }\n          </div>\n\n          @if (links()?.length > 0) {\n            <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n              <button\n                ngbDropdownToggle\n                class=\"compact-header--btn button is-small is-no-shadow\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                {{ compactMenuLabel() }}\n\n                <he-svg-icon\n                  class=\"compact-header--btn__icon\"\n                  [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n                  aria-hidden=\"true\" />\n              </button>\n\n              <div ngbDropdownMenu id=\"drawer-menu\">\n                <div class=\"dropdown-content navigation-menu-dropdown\">\n                  <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" />\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <aside>\n      <div\n        class=\"shell__menuContent | h-100\"\n        (@sideMenu.done)=\"animationDone($event)\"\n        [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n        <div\n          class=\"h-100 is-overflow-y-auto\"\n          [class.is-py-4]=\"!drawerContentTemplate()\"\n          [class.is-px-2]=\"!drawerContentTemplate()\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (drawerContentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n          } @else if (links()?.length > 0) {\n            <he-navigation-menu [links]=\"links()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n            </he-navigation-menu>\n          }\n        </div>\n        @if (collapsible()) {\n          <button\n            (click)=\"toggleMenu()\"\n            (mousedown)=\"startResizing($event)\"\n            (touchstart)=\"startResizing($event)\"\n            class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n            pointer>\n            <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n          </button>\n        }\n      </div>\n    </aside>\n  }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n  <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n    <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n      <ng-content select=\"[drawer-content]\" />\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0;box-shadow:6px 6px 6px #0000000f}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{position:absolute;top:0;box-shadow:6px 6px 6px #0000000f;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width:767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width:767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"] }]
+                    }, providers: [sidenavStore], template: "@if (visible()) {\n  @if (isCompact()) {\n    <div class=\"compact-header\">\n      <div [ngClass]=\"compactHeaderClass()\">\n        <div class=\"is-flex is-align-items-flex-start is-justify-content-space-between is-gap-8 w-100\">\n          <div class=\"is-flex is-flex-grow-1 is-justify-content-space-between is-gap-8 is-flex-direction-column\">\n            @if (drawerHeaderTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n            }\n            @if (drawerMenuHeaderTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n            }\n          </div>\n\n          @if (links()?.length > 0) {\n            <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n              <button\n                ngbDropdownToggle\n                class=\"compact-header--btn button is-small is-no-shadow\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                {{ compactMenuLabel() }}\n\n                <he-svg-icon\n                  class=\"compact-header--btn__icon\"\n                  [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n                  aria-hidden=\"true\" />\n              </button>\n\n              <div ngbDropdownMenu id=\"drawer-menu\">\n                <div class=\"dropdown-content navigation-menu-dropdown\">\n                  <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" />\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <aside>\n      <div\n        class=\"shell__menuContent | h-100\"\n        (@sideMenu.done)=\"animationDone($event)\"\n        [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n        <div\n          class=\"h-100 is-overflow-y-auto\"\n          [class.is-py-4]=\"!drawerContentTemplate()\"\n          [class.is-px-2]=\"!drawerContentTemplate()\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (drawerContentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <he-navigation-menu [links]=\"links()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n            </he-navigation-menu>\n          }\n        </div>\n        @if (collapsible()) {\n          <button\n            (click)=\"toggleMenu()\"\n            (mousedown)=\"startResizing($event)\"\n            (touchstart)=\"startResizing($event)\"\n            class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n            pointer>\n            <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n          </button>\n        }\n      </div>\n    </aside>\n  }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n  <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n    <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n      <ng-content select=\"[drawer-content]\" />\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0;box-shadow:6px 6px 6px #0000000f}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{position:absolute;top:0;box-shadow:6px 6px 6px #0000000f;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width:767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width:767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { stopResizing: [{
                 type: HostListener,
                 args: ['window:mouseup']
@@ -9728,7 +9733,9 @@ const customErrorMessage = {
     'must be below the maximum': ({ params: { max } }) => `Must be below ${max}.`,
     'must be linked to waste input': () => `The term ${code('ionisingCompoundsToAirInputsProduction')} can only have 1 entry of ${code('termType')}: ${glossaryTypeLink(TermTermType.waste)}, so that the ${code('value')} field can represent the amount of units of that waste term.`,
     'must not have background methodTier': ({ params: { allowedValues } }) => `Only background emissions (e.g., "Inputs Production") can have ${code('methodTier')}=${EmissionMethodTier.background}.
-    You must instead choose one of the following values: ${allowedValues.map(code).join(', ')}`
+    You must instead choose one of the following values: ${allowedValues.map(code).join(', ')}`,
+    'should be within acceptable range of the lookup value': ({ params }) => `The ${code(params.term['@id'])} value is ${code(params.delta)}% higher than our default value for this Term (${code(params.expected)}).
+    Please check your data as this may be an error. ${params?.threshold ? `Our threshold is ±${threshold(params?.threshold)}.` : ''}`
 };
 const requiredPropertyError = (message, error) => {
     const field = message.split("'")[1].replace("'", '');
@@ -12820,7 +12827,7 @@ class FilterAccordionComponent extends ControlValueAccessor {
                 multi: true
             },
             FilterStore
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"is-flex is-flex-direction-column is-gap-12 w-100\">\n  @if (showHeader()) {\n    <div class=\"is-flex is-flex-direction-column is-gap-12 is-justify-content-space-between is-align-items-flex-start\">\n      @if (title()) {\n        <div class=\"is-flex is-align-items-center\">\n          <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n          @if (tooltip()) {\n            <he-svg-icon\n              name=\"info-circle\"\n              class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n              [ngbTooltip]=\"tooltip()\"\n              placement=\"right\"\n              triggers=\"hover\"\n              size=\"16\"\n              container=\"body\" />\n          }\n        </div>\n      }\n\n      <ng-content select=\"[header-content]\" />\n\n      @if (showClearAll()) {\n        <span\n          class=\"is-size-7 has-text-weight-normal is-italic | clear-button\"\n          [class.is-clickable]=\"hasSelectedValues()\"\n          (click)=\"clearAll()\">\n          Clear all\n        </span>\n      }\n\n      @if (showGlobalSearch()) {\n        <div class=\"field is-mb-0 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              (input)=\"onSearch($event.target.value, group())\" />\n            <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"clearSearch()\">\n              <he-svg-icon name=\"xmark\" />\n            </a>\n            <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n              <he-svg-icon name=\"search\" />\n            </a>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"has-border-top has-border-bottom\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        itemsList;\n        context: { group: group(), parentSearch: search(), showNoResults: showGlobalSearch() }\n      \" />\n  </div>\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\" let-showNoResults=\"showNoResults\">\n  @for (item of group | filterAccordionGroup: parentSearch; track item.trackId || item.label; let lastItem = $last) {\n    @if (item.type === 'group') {\n      @let groupState = panelStates[item.label];\n      @if (groupState) {\n        <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n          <div\n            class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n            (click)=\"groupState.expanded = !groupState.expanded\">\n            <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n          </div>\n\n          @if (groupState.expanded) {\n            <div class=\"is-overflow-hidden\" [@slideDownUp]=\"groupState.expanded\">\n              @if (!showGlobalSearch() && 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 {{ item.label }}\"\n                      [value]=\"groupState.searchTerm || ''\"\n                      [disabled]=\"isItemEffectivelyDisabled(item)\"\n                      (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\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              }\n\n              <div class=\"pl-5\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemsList;\n                    context: {\n                      group: item,\n                      parentSearch: parentSearch || groupState.searchTerm,\n                      showNoResults: !showGlobalSearch()\n                    }\n                  \" />\n              </div>\n            </div>\n          }\n        </div>\n      }\n    } @else {\n      <div\n        class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n        [class.has-border-bottom]=\"!lastItem\">\n        <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n      </div>\n    }\n  } @empty {\n    @if (parentSearch && showNoResults) {\n      <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n        No results found for \"{{ parentSearch }}\"\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\" let-count=\"count\">\n  <span class=\"is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n    <span>{{ item.label }}</span>\n\n    @if (item.tooltip) {\n      <he-svg-icon\n        name=\"info-circle\"\n        class=\"has-text-grey-light is-ml-1\"\n        [ngbTooltip]=\"item.tooltip\"\n        placement=\"top\"\n        triggers=\"hover\"\n        size=\"16\"\n        container=\"body\" />\n    }\n\n    @if (isNumber(count)) {\n      <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n  @let options = optionsFromGroup(item);\n\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isGroupFullySelected(options)\"\n      [indeterminate]=\"isGroupPartiallySelected(options)\"\n      (change)=\"toggleGroup(options)\"\n      [disabled]=\"isItemEffectivelyDisabled(item)\" />\n  </label>\n\n  <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: showGroupCount() ? item.count : undefined }\" />\n\n  <he-svg-icon\n    class=\"has-text-secondary transition-transform\"\n    [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n    <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: item.count }\" />\n  </label>\n</ng-template>\n", styles: [".clear-button{color:#b5b5b5}.clear-button.is-clickable{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border:1px solid #dbe3ea;border-radius:3px;font-weight:400;line-height:17px;box-shadow:none!important}.has-background-hover-light:hover{background-color:#fafafa}.has-border-top{border-top:1px solid #dbe3ea}.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:3px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { 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"] }, { kind: "pipe", type: FilterAccordionGroupPipe, name: "filterAccordionGroup" }, { kind: "directive", type: InputIndeterminateDirective, selector: "input[indeterminate]", inputs: ["indeterminate"] }], animations: [
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"is-flex is-flex-direction-column is-gap-12 w-100\">\n  @if (showHeader()) {\n    <div class=\"is-flex is-flex-direction-column is-gap-12 is-justify-content-space-between is-align-items-flex-start\">\n      @if (title()) {\n        <div class=\"is-flex is-align-items-center\">\n          <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n          @if (tooltip()) {\n            <he-svg-icon\n              name=\"info-circle\"\n              class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n              [ngbTooltip]=\"tooltip()\"\n              placement=\"right\"\n              triggers=\"hover\"\n              size=\"16\"\n              container=\"body\" />\n          }\n        </div>\n      }\n\n      <ng-content select=\"[header-content]\" />\n\n      @if (showClearAll()) {\n        <span\n          class=\"is-size-7 has-text-weight-normal is-italic | clear-button\"\n          [class.is-clickable]=\"hasSelectedValues()\"\n          (click)=\"clearAll()\">\n          Clear all\n        </span>\n      }\n\n      @if (showGlobalSearch()) {\n        <div class=\"field is-mb-0 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              (input)=\"onSearch($event.target.value, group())\" />\n            <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"clearSearch()\">\n              <he-svg-icon name=\"xmark\" />\n            </a>\n            <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n              <he-svg-icon name=\"search\" />\n            </a>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"has-border-top has-border-bottom\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        itemsList;\n        context: { group: group(), parentSearch: search(), showNoResults: showGlobalSearch() }\n      \" />\n  </div>\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\" let-showNoResults=\"showNoResults\">\n  @for (item of group | filterAccordionGroup: parentSearch; track item.trackId || item.label; let lastItem = $last) {\n    @if (item.type === 'group') {\n      @let groupState = panelStates[item.label];\n      @if (groupState) {\n        <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n          <div\n            class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n            (click)=\"groupState.expanded = !groupState.expanded\">\n            <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n          </div>\n\n          @if (groupState.expanded) {\n            <div class=\"is-overflow-hidden\" [@slideDownUp]=\"groupState.expanded\">\n              @if (!showGlobalSearch() && 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 {{ item.label }}\"\n                      [value]=\"groupState.searchTerm || ''\"\n                      [disabled]=\"isItemEffectivelyDisabled(item)\"\n                      (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\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              }\n\n              <div class=\"pl-5\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemsList;\n                    context: {\n                      group: item,\n                      parentSearch: parentSearch || groupState.searchTerm,\n                      showNoResults: !showGlobalSearch()\n                    }\n                  \" />\n              </div>\n            </div>\n          }\n        </div>\n      }\n    } @else {\n      <div\n        class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n        [class.has-border-bottom]=\"!lastItem\">\n        <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n      </div>\n    }\n  } @empty {\n    @if (parentSearch && showNoResults) {\n      <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n        No results found for \"{{ parentSearch }}\"\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\" let-count=\"count\">\n  <span class=\"is-flex is-gap-4 is-flex-wrap-wrap is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n    <span>{{ item.label }}</span>\n\n    @if (item.tooltip) {\n      <he-svg-icon\n        name=\"info-circle\"\n        class=\"has-text-grey-light\"\n        [ngbTooltip]=\"item.tooltip\"\n        placement=\"top\"\n        triggers=\"hover\"\n        size=\"16\"\n        container=\"body\" />\n    }\n\n    @if (isNumber(count)) {\n      <span class=\"has-text-grey-light is-size-7\">({{ count }})</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n  @let options = optionsFromGroup(item);\n\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isGroupFullySelected(options)\"\n      [indeterminate]=\"isGroupPartiallySelected(options)\"\n      (change)=\"toggleGroup(options)\"\n      [disabled]=\"isItemEffectivelyDisabled(item)\" />\n  </label>\n\n  <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: showGroupCount() ? item.count : undefined }\" />\n\n  <he-svg-icon\n    class=\"has-text-secondary transition-transform\"\n    [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n    <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: item.count }\" />\n  </label>\n</ng-template>\n", styles: [".clear-button{color:#b5b5b5}.clear-button.is-clickable{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border:1px solid #dbe3ea;border-radius:3px;font-weight:400;line-height:17px;box-shadow:none!important}.has-background-hover-light:hover{background-color:#fafafa}.has-border-top{border-top:1px solid #dbe3ea}.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:3px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { 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"] }, { kind: "pipe", type: FilterAccordionGroupPipe, name: "filterAccordionGroup" }, { kind: "directive", type: InputIndeterminateDirective, selector: "input[indeterminate]", inputs: ["indeterminate"] }], animations: [
             trigger('slideDownUp', [
                 transition(':enter', [
                     style({ maxHeight: '0', opacity: 0 }),
@@ -12855,7 +12862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                             ]),
                             transition(':leave', [animate('200ms ease-out', style({ maxHeight: '0', opacity: 0 }))])
                         ])
-                    ], template: "<div class=\"is-flex is-flex-direction-column is-gap-12 w-100\">\n  @if (showHeader()) {\n    <div class=\"is-flex is-flex-direction-column is-gap-12 is-justify-content-space-between is-align-items-flex-start\">\n      @if (title()) {\n        <div class=\"is-flex is-align-items-center\">\n          <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n          @if (tooltip()) {\n            <he-svg-icon\n              name=\"info-circle\"\n              class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n              [ngbTooltip]=\"tooltip()\"\n              placement=\"right\"\n              triggers=\"hover\"\n              size=\"16\"\n              container=\"body\" />\n          }\n        </div>\n      }\n\n      <ng-content select=\"[header-content]\" />\n\n      @if (showClearAll()) {\n        <span\n          class=\"is-size-7 has-text-weight-normal is-italic | clear-button\"\n          [class.is-clickable]=\"hasSelectedValues()\"\n          (click)=\"clearAll()\">\n          Clear all\n        </span>\n      }\n\n      @if (showGlobalSearch()) {\n        <div class=\"field is-mb-0 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              (input)=\"onSearch($event.target.value, group())\" />\n            <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"clearSearch()\">\n              <he-svg-icon name=\"xmark\" />\n            </a>\n            <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n              <he-svg-icon name=\"search\" />\n            </a>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"has-border-top has-border-bottom\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        itemsList;\n        context: { group: group(), parentSearch: search(), showNoResults: showGlobalSearch() }\n      \" />\n  </div>\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\" let-showNoResults=\"showNoResults\">\n  @for (item of group | filterAccordionGroup: parentSearch; track item.trackId || item.label; let lastItem = $last) {\n    @if (item.type === 'group') {\n      @let groupState = panelStates[item.label];\n      @if (groupState) {\n        <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n          <div\n            class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n            (click)=\"groupState.expanded = !groupState.expanded\">\n            <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n          </div>\n\n          @if (groupState.expanded) {\n            <div class=\"is-overflow-hidden\" [@slideDownUp]=\"groupState.expanded\">\n              @if (!showGlobalSearch() && 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 {{ item.label }}\"\n                      [value]=\"groupState.searchTerm || ''\"\n                      [disabled]=\"isItemEffectivelyDisabled(item)\"\n                      (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\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              }\n\n              <div class=\"pl-5\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemsList;\n                    context: {\n                      group: item,\n                      parentSearch: parentSearch || groupState.searchTerm,\n                      showNoResults: !showGlobalSearch()\n                    }\n                  \" />\n              </div>\n            </div>\n          }\n        </div>\n      }\n    } @else {\n      <div\n        class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n        [class.has-border-bottom]=\"!lastItem\">\n        <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n      </div>\n    }\n  } @empty {\n    @if (parentSearch && showNoResults) {\n      <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n        No results found for \"{{ parentSearch }}\"\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\" let-count=\"count\">\n  <span class=\"is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n    <span>{{ item.label }}</span>\n\n    @if (item.tooltip) {\n      <he-svg-icon\n        name=\"info-circle\"\n        class=\"has-text-grey-light is-ml-1\"\n        [ngbTooltip]=\"item.tooltip\"\n        placement=\"top\"\n        triggers=\"hover\"\n        size=\"16\"\n        container=\"body\" />\n    }\n\n    @if (isNumber(count)) {\n      <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n  @let options = optionsFromGroup(item);\n\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isGroupFullySelected(options)\"\n      [indeterminate]=\"isGroupPartiallySelected(options)\"\n      (change)=\"toggleGroup(options)\"\n      [disabled]=\"isItemEffectivelyDisabled(item)\" />\n  </label>\n\n  <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: showGroupCount() ? item.count : undefined }\" />\n\n  <he-svg-icon\n    class=\"has-text-secondary transition-transform\"\n    [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n    <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: item.count }\" />\n  </label>\n</ng-template>\n", styles: [".clear-button{color:#b5b5b5}.clear-button.is-clickable{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border:1px solid #dbe3ea;border-radius:3px;font-weight:400;line-height:17px;box-shadow:none!important}.has-background-hover-light:hover{background-color:#fafafa}.has-border-top{border-top:1px solid #dbe3ea}.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:3px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"] }]
+                    ], template: "<div class=\"is-flex is-flex-direction-column is-gap-12 w-100\">\n  @if (showHeader()) {\n    <div class=\"is-flex is-flex-direction-column is-gap-12 is-justify-content-space-between is-align-items-flex-start\">\n      @if (title()) {\n        <div class=\"is-flex is-align-items-center\">\n          <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n          @if (tooltip()) {\n            <he-svg-icon\n              name=\"info-circle\"\n              class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n              [ngbTooltip]=\"tooltip()\"\n              placement=\"right\"\n              triggers=\"hover\"\n              size=\"16\"\n              container=\"body\" />\n          }\n        </div>\n      }\n\n      <ng-content select=\"[header-content]\" />\n\n      @if (showClearAll()) {\n        <span\n          class=\"is-size-7 has-text-weight-normal is-italic | clear-button\"\n          [class.is-clickable]=\"hasSelectedValues()\"\n          (click)=\"clearAll()\">\n          Clear all\n        </span>\n      }\n\n      @if (showGlobalSearch()) {\n        <div class=\"field is-mb-0 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              (input)=\"onSearch($event.target.value, group())\" />\n            <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"clearSearch()\">\n              <he-svg-icon name=\"xmark\" />\n            </a>\n            <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n              <he-svg-icon name=\"search\" />\n            </a>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"has-border-top has-border-bottom\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        itemsList;\n        context: { group: group(), parentSearch: search(), showNoResults: showGlobalSearch() }\n      \" />\n  </div>\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\" let-showNoResults=\"showNoResults\">\n  @for (item of group | filterAccordionGroup: parentSearch; track item.trackId || item.label; let lastItem = $last) {\n    @if (item.type === 'group') {\n      @let groupState = panelStates[item.label];\n      @if (groupState) {\n        <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n          <div\n            class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n            (click)=\"groupState.expanded = !groupState.expanded\">\n            <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n          </div>\n\n          @if (groupState.expanded) {\n            <div class=\"is-overflow-hidden\" [@slideDownUp]=\"groupState.expanded\">\n              @if (!showGlobalSearch() && 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 {{ item.label }}\"\n                      [value]=\"groupState.searchTerm || ''\"\n                      [disabled]=\"isItemEffectivelyDisabled(item)\"\n                      (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\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              }\n\n              <div class=\"pl-5\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemsList;\n                    context: {\n                      group: item,\n                      parentSearch: parentSearch || groupState.searchTerm,\n                      showNoResults: !showGlobalSearch()\n                    }\n                  \" />\n              </div>\n            </div>\n          }\n        </div>\n      }\n    } @else {\n      <div\n        class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n        [class.has-border-bottom]=\"!lastItem\">\n        <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n      </div>\n    }\n  } @empty {\n    @if (parentSearch && showNoResults) {\n      <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n        No results found for \"{{ parentSearch }}\"\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\" let-count=\"count\">\n  <span class=\"is-flex is-gap-4 is-flex-wrap-wrap is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n    <span>{{ item.label }}</span>\n\n    @if (item.tooltip) {\n      <he-svg-icon\n        name=\"info-circle\"\n        class=\"has-text-grey-light\"\n        [ngbTooltip]=\"item.tooltip\"\n        placement=\"top\"\n        triggers=\"hover\"\n        size=\"16\"\n        container=\"body\" />\n    }\n\n    @if (isNumber(count)) {\n      <span class=\"has-text-grey-light is-size-7\">({{ count }})</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n  @let options = optionsFromGroup(item);\n\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isGroupFullySelected(options)\"\n      [indeterminate]=\"isGroupPartiallySelected(options)\"\n      (change)=\"toggleGroup(options)\"\n      [disabled]=\"isItemEffectivelyDisabled(item)\" />\n  </label>\n\n  <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: showGroupCount() ? item.count : undefined }\" />\n\n  <he-svg-icon\n    class=\"has-text-secondary transition-transform\"\n    [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n    <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: item.count }\" />\n  </label>\n</ng-template>\n", styles: [".clear-button{color:#b5b5b5}.clear-button.is-clickable{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border:1px solid #dbe3ea;border-radius:3px;font-weight:400;line-height:17px;box-shadow:none!important}.has-background-hover-light:hover{background-color:#fafafa}.has-border-top{border-top:1px solid #dbe3ea}.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:3px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"] }]
         }], ctorParameters: () => [] });
 
 const sortedPoints = (values) => Object.entries(values)