@hug/ngx-layout 22.0.0-alpha.1 → 22.0.0-alpha.10

package/fesm2022/hug-ngx-layout.mjs

@@ -1,16 +1,30 @@
 import * as i0 from '@angular/core';
-import { Injectable, signal, computed, inject, contentChildren, ElementRef, viewChild, Renderer2, DestroyRef, effect, ChangeDetectionStrategy, ViewEncapsulation, Component, input, output, Directive, contentChild, afterRenderEffect, untracked } from '@angular/core';
-import * as i2 from '@angular/material/button';
-import { MatIconButton, MatButtonModule } from '@angular/material/button';
-import * as i1$1 from '@angular/material/icon';
-import { MatIcon, MatIconModule } from '@angular/material/icon';
-import * as i1 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i3 from '@angular/material/tooltip';
-import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
+import { Directive, Injectable, signal, effect, computed, inject, contentChildren, ElementRef, viewChild, Renderer2, ViewEncapsulation, ChangeDetectionStrategy, Component, input, output, InjectionToken, TemplateRef, forwardRef, model, contentChild, afterRenderEffect, untracked } from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
+import { MatTooltip } from '@angular/material/tooltip';
 import { NgxAbstractIntl, provideNgxIntl } from '@hug/ngx-core';
+import { NgTemplateOutlet, LowerCasePipe } from '@angular/common';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import * as i1 from '@angular/forms';
+import { FormsModule, NgControl } from '@angular/forms';
+import { MatBadge } from '@angular/material/badge';
+import { MatChip, MatChipOption, MatChipTrailingIcon, MatChipSet } from '@angular/material/chips';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { NgControl } from '@angular/forms';
+
+class NgxActionDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: NgxActionDirective, isStandalone: true, selector: "button, [ngxAction]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button, [ngxAction]',
+                    standalone: true
+                }]
+        }] });
 
 /**
  * Data for internationalization
@@ -21,10 +35,15 @@ class NgxLayoutIntl extends NgxAbstractIntl {
     deleteSearch = '';
     openSearchBar = '';
     moreActions = '';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxLayoutIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxLayoutIntl });
+    allFilters = '';
+    filters = '';
+    actives = '';
+    reset = '';
+    close = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxLayoutIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxLayoutIntl });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxLayoutIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxLayoutIntl, decorators: [{
             type: Injectable
         }] });
 
@@ -45,21 +64,28 @@ const buttonDimensions = 40;
  * @param box
  * @param defaultSize
  */
-const resizeSignal = (element, destroyRef, box = 'border-box') => {
-    const initialValue = {
-        borderBoxSize: [],
-        contentRect: element.getBoundingClientRect(),
-        contentBoxSize: [],
-        devicePixelContentBoxSize: [],
-        target: element
-    };
-    const value = signal(initialValue, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    const ro = new ResizeObserver(entries => {
-        value.set(entries[0] || initialValue);
-    });
-    ro.observe(element, { box });
-    destroyRef.onDestroy(() => {
-        ro.disconnect();
+const resizeSignal$1 = (element, box = 'border-box') => {
+    const value = signal(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    effect(onCleanup => {
+        const el = element()?.nativeElement;
+        if (!el) {
+            return;
+        }
+        const initialValue = {
+            borderBoxSize: [],
+            contentRect: new DOMRect(),
+            contentBoxSize: [],
+            devicePixelContentBoxSize: [],
+            target: el
+        };
+        value.set(initialValue);
+        const ro = new ResizeObserver(entries => {
+            value.set(entries[0] || initialValue);
+        });
+        ro.observe(el, { box });
+        onCleanup(() => {
+            ro.disconnect();
+        });
     });
     return value;
 };
@@ -69,14 +95,13 @@ class NgxActionsGroupComponent {
         return this.iconButtons().slice(maxVisible);
     }, ...(ngDevMode ? [{ debugName: "hiddenActions" }] : []));
     intl = inject(NgxLayoutIntl, { optional: true });
-    iconButtons = contentChildren(MatIconButton, { ...(ngDevMode ? { debugName: "iconButtons" } : {}), read: ElementRef });
+    iconButtons = contentChildren(NgxActionDirective, { ...(ngDevMode ? { debugName: "iconButtons" } : {}), read: ElementRef });
     container = viewChild.required('container');
     hiddenContainer = viewChild.required('hiddenContainer');
     hostElement = inject(ElementRef);
     renderer = inject(Renderer2);
-    destroyRef = inject(DestroyRef);
-    hostSize = resizeSignal(this.hostElement.nativeElement, this.destroyRef);
-    hostWidth = computed(() => this.hostSize().contentRect.width, ...(ngDevMode ? [{ debugName: "hostWidth" }] : []));
+    hostSize = resizeSignal$1(() => this.hostElement);
+    hostWidth = computed(() => Math.ceil(this.hostSize()?.contentRect.width || 0), ...(ngDevMode ? [{ debugName: "hostWidth" }] : []));
     visibleActions = computed(() => {
         const maxVisible = this.getMaxVisibleAction(this.hostWidth());
         return this.iconButtons().slice(0, maxVisible);
@@ -119,25 +144,26 @@ class NgxActionsGroupComponent {
         // -1 => Allows for the more button to be displayed
         return maxVisibleActions - 1;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxActionsGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NgxActionsGroupComponent, isStandalone: true, selector: "ngx-actions-group", queries: [{ propertyName: "iconButtons", predicate: MatIconButton, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "hiddenContainer", first: true, predicate: ["hiddenContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #container class=\"container\">\n    <ng-content></ng-content>\n    @if (hiddenActions().length > 0) {\n        <button\n            matIconButton\n            class=\"more-actions-button\"\n            [matMenuTriggerFor]=\"menuActionsGroup\"\n            matTooltip=\"{{ intl?.moreActions ?? 'More actions' }}\">\n            <mat-icon>more_horiz</mat-icon>\n        </button>\n    }\n    <mat-menu #menuActionsGroup=\"matMenu\" class=\"actions-group-menu\">\n        <div #hiddenContainer></div>\n    </mat-menu>\n</div>\n", styles: ["ngx-actions-group{display:flex;inline-size:100%}ngx-actions-group .container{display:flex;inline-size:fit-content;align-items:center;gap:var(--ngx-actions-group-gap, .75rem);border-radius:var(--ngx-actions-group-radius, 2rem);padding:var(--ngx-actions-group-padding, .25rem);background-color:var(--mat-sys-surface-container-low);max-width:100%;box-sizing:border-box}ngx-actions-group .container .more-actions-button{order:999}.actions-group-menu.mat-mdc-menu-panel{padding:var(--ngx-actions-group-menu-padding, 0 .75rem)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxActionsGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: NgxActionsGroupComponent, isStandalone: true, selector: "ngx-actions-group", queries: [{ propertyName: "iconButtons", predicate: NgxActionDirective, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "hiddenContainer", first: true, predicate: ["hiddenContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #container class=\"container\">\n    <ng-content select=\"button, [ngxAction]\"></ng-content>\n    @if (hiddenActions().length > 0) {\n        <button\n            matIconButton\n            class=\"more-actions-button\"\n            [matMenuTriggerFor]=\"menuActionsGroup\"\n            matTooltip=\"{{ intl?.moreActions ?? 'More actions' }}\">\n            <mat-icon>more_horiz</mat-icon>\n        </button>\n    }\n    <mat-menu #menuActionsGroup=\"matMenu\" class=\"actions-group-menu\">\n        <div #hiddenContainer></div>\n    </mat-menu>\n</div>\n", styles: ["ngx-actions-group{display:flex;inline-size:100%;max-width:364px}ngx-actions-group .container{display:flex;inline-size:fit-content;align-items:center;gap:var(--ngx-actions-group-gap, .75rem);border-radius:var(--ngx-actions-group-radius, 2rem);padding:var(--ngx-actions-group-padding, .25rem);background-color:var(--mat-sys-surface-container-low);max-width:100%;box-sizing:border-box}ngx-actions-group .container .more-actions-button{order:999}.actions-group-menu.mat-mdc-menu-panel{padding:var(--ngx-actions-group-menu-padding, 0 .75rem)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxActionsGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxActionsGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-actions-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'ngx-actions-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         MatIcon,
                         MatIconButton,
                         MatTooltip,
-                        MatMenuModule
-                    ], template: "<div #container class=\"container\">\n    <ng-content></ng-content>\n    @if (hiddenActions().length > 0) {\n        <button\n            matIconButton\n            class=\"more-actions-button\"\n            [matMenuTriggerFor]=\"menuActionsGroup\"\n            matTooltip=\"{{ intl?.moreActions ?? 'More actions' }}\">\n            <mat-icon>more_horiz</mat-icon>\n        </button>\n    }\n    <mat-menu #menuActionsGroup=\"matMenu\" class=\"actions-group-menu\">\n        <div #hiddenContainer></div>\n    </mat-menu>\n</div>\n", styles: ["ngx-actions-group{display:flex;inline-size:100%}ngx-actions-group .container{display:flex;inline-size:fit-content;align-items:center;gap:var(--ngx-actions-group-gap, .75rem);border-radius:var(--ngx-actions-group-radius, 2rem);padding:var(--ngx-actions-group-padding, .25rem);background-color:var(--mat-sys-surface-container-low);max-width:100%;box-sizing:border-box}ngx-actions-group .container .more-actions-button{order:999}.actions-group-menu.mat-mdc-menu-panel{padding:var(--ngx-actions-group-menu-padding, 0 .75rem)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { iconButtons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MatIconButton), { ...{ read: ElementRef }, isSignal: true }] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], hiddenContainer: [{ type: i0.ViewChild, args: ['hiddenContainer', { isSignal: true }] }] } });
+                        MatMenu,
+                        MatMenuTrigger
+                    ], template: "<div #container class=\"container\">\n    <ng-content select=\"button, [ngxAction]\"></ng-content>\n    @if (hiddenActions().length > 0) {\n        <button\n            matIconButton\n            class=\"more-actions-button\"\n            [matMenuTriggerFor]=\"menuActionsGroup\"\n            matTooltip=\"{{ intl?.moreActions ?? 'More actions' }}\">\n            <mat-icon>more_horiz</mat-icon>\n        </button>\n    }\n    <mat-menu #menuActionsGroup=\"matMenu\" class=\"actions-group-menu\">\n        <div #hiddenContainer></div>\n    </mat-menu>\n</div>\n", styles: ["ngx-actions-group{display:flex;inline-size:100%;max-width:364px}ngx-actions-group .container{display:flex;inline-size:fit-content;align-items:center;gap:var(--ngx-actions-group-gap, .75rem);border-radius:var(--ngx-actions-group-radius, 2rem);padding:var(--ngx-actions-group-padding, .25rem);background-color:var(--mat-sys-surface-container-low);max-width:100%;box-sizing:border-box}ngx-actions-group .container .more-actions-button{order:999}.actions-group-menu.mat-mdc-menu-panel{padding:var(--ngx-actions-group-menu-padding, 0 .75rem)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { iconButtons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NgxActionDirective), { ...{ read: ElementRef }, isSignal: true }] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], hiddenContainer: [{ type: i0.ViewChild, args: ['hiddenContainer', { isSignal: true }] }] } });
 
 class NgxAppBarComponent {
     mode = input('standard', ...(ngDevMode ? [{ debugName: "mode" }] : []));
     title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
     subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : []));
     helpUrl = input(...(ngDevMode ? [undefined, { debugName: "helpUrl" }] : []));
-    withBackIcon = input(false, ...(ngDevMode ? [{ debugName: "withBackIcon" }] : []));
+    withBackButton = input(false, ...(ngDevMode ? [{ debugName: "withBackButton" }] : []));
     goBack = output();
     intl = inject(NgxLayoutIntl, { optional: true });
     helpPopup;
@@ -156,50 +182,208 @@ class NgxAppBarComponent {
     triggerGoBack() {
         this.goBack.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxAppBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NgxAppBarComponent, isStandalone: true, selector: "ngx-app-bar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, helpUrl: { classPropertyName: "helpUrl", publicName: "helpUrl", isSignal: true, isRequired: false, transformFunction: null }, withBackIcon: { classPropertyName: "withBackIcon", publicName: "withBackIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { goBack: "goBack" }, host: { properties: { "class.condensed": "mode()===\"condensed\"" } }, ngImport: i0, template: "@if (withBackIcon()) {\n    <button matIconButton matTooltip=\"{{ intl?.back ?? 'Back' }}\" (click)=\"triggerGoBack()\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n}\n\n<header class=\"{{ mode() }}\">\n    <h1 class=\"title\">{{ title() }}</h1>\n    @if (subtitle()) {\n        @if (mode() === 'condensed') {\n            <mat-icon>chevron_right</mat-icon>\n        }\n        <h2 class=\"subtitle\">{{ subtitle() }}</h2>\n    }\n</header>\n\n<section class=\"actions\">\n    <ng-content />\n    @if (helpUrl()) {\n        <button matIconButton matTooltip=\"{{ intl?.help ?? 'Help' }}\" (click)=\"openHelp()\">\n            <mat-icon>help</mat-icon>\n        </button>\n    }\n</section>\n", styles: ["ngx-app-bar{display:flex;flex-direction:row;align-items:center;min-height:var(--ngx-app-bar-min-height, 3.5rem);box-sizing:border-box;gap:var(--ngx-app-bar-gap, .25rem)}ngx-app-bar header{color:var(--mat-sys-on-surface-variant)}ngx-app-bar header.condensed{display:flex;flex-direction:row;align-items:center;gap:var(--ngx-app-bar-condensed-gap, .5rem)}ngx-app-bar header.condensed mat-icon{color:var(--mat-sys-outline)}ngx-app-bar header .title,ngx-app-bar header .subtitle{margin:0;white-space:nowrap}ngx-app-bar header .title{font:var(--ngx-app-bar-title-font, var(--mat-sys-headline-medium));letter-spacing:var(--ngx-app-bar-title-letter-spacing, var(--mat-sys-headline-medium-tracking))}ngx-app-bar header .subtitle{font:var(--ngx-app-bar-subtitle-font, var(--mat-sys-headline-small));letter-spacing:var(--ngx-app-bar-subtitle-letter-spacing, var(--mat-sys-headline-small-tracking))}ngx-app-bar .actions{display:flex;justify-content:flex-end;flex-grow:1;gap:var(--ngx-app-bar-actions-gap, .5rem)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxAppBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: NgxAppBarComponent, isStandalone: true, selector: "ngx-app-bar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, helpUrl: { classPropertyName: "helpUrl", publicName: "helpUrl", isSignal: true, isRequired: false, transformFunction: null }, withBackButton: { classPropertyName: "withBackButton", publicName: "withBackButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { goBack: "goBack" }, host: { properties: { "class.condensed": "mode()===\"condensed\"" } }, ngImport: i0, template: "@if (withBackButton()) {\n    <button matIconButton matTooltip=\"{{ intl?.back ?? 'Back' }}\" (click)=\"triggerGoBack()\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n}\n\n<header class=\"{{ mode() }}\">\n    <h1 class=\"title\">{{ title() }}</h1>\n    @if (subtitle()) {\n        @if (mode() === 'condensed') {\n            <mat-icon>chevron_right</mat-icon>\n        }\n        <h2 class=\"subtitle\">{{ subtitle() }}</h2>\n    }\n</header>\n\n<section class=\"actions\">\n    <ng-content />\n    @if (helpUrl()) {\n        <button matIconButton matTooltip=\"{{ intl?.help ?? 'Help' }}\" (click)=\"openHelp()\">\n            <mat-icon>help</mat-icon>\n        </button>\n    }\n</section>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;min-height:var(--ngx-app-bar-min-height, 3.5rem);box-sizing:border-box;gap:var(--ngx-app-bar-gap, .25rem);padding:var(--ngx-app-bar-padding, .25rem 1rem)}:host header{color:var(--mat-sys-on-surface-variant)}:host header.condensed{display:flex;flex-direction:row;align-items:center;gap:var(--ngx-app-bar-condensed-gap, .5rem)}:host header.condensed mat-icon{color:var(--mat-sys-outline)}:host header .title,:host header .subtitle{margin:0;white-space:nowrap}:host header .title{font:var(--ngx-app-bar-title-font, var(--mat-sys-headline-medium));letter-spacing:var(--ngx-app-bar-title-letter-spacing, var(--mat-sys-headline-medium-tracking))}:host header .subtitle{font:var(--ngx-app-bar-subtitle-font, var(--mat-sys-headline-small));letter-spacing:var(--ngx-app-bar-subtitle-letter-spacing, var(--mat-sys-headline-small-tracking))}:host .actions{display:flex;justify-content:flex-end;flex-grow:1;gap:var(--ngx-app-bar-actions-gap, .5rem)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxAppBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxAppBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-app-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, MatButtonModule, MatTooltipModule], host: {
+            args: [{ selector: 'ngx-app-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, MatIconButton, MatTooltip], host: {
                         // eslint-disable-next-line @typescript-eslint/naming-convention
                         '[class.condensed]': 'mode()==="condensed"'
-                    }, template: "@if (withBackIcon()) {\n    <button matIconButton matTooltip=\"{{ intl?.back ?? 'Back' }}\" (click)=\"triggerGoBack()\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n}\n\n<header class=\"{{ mode() }}\">\n    <h1 class=\"title\">{{ title() }}</h1>\n    @if (subtitle()) {\n        @if (mode() === 'condensed') {\n            <mat-icon>chevron_right</mat-icon>\n        }\n        <h2 class=\"subtitle\">{{ subtitle() }}</h2>\n    }\n</header>\n\n<section class=\"actions\">\n    <ng-content />\n    @if (helpUrl()) {\n        <button matIconButton matTooltip=\"{{ intl?.help ?? 'Help' }}\" (click)=\"openHelp()\">\n            <mat-icon>help</mat-icon>\n        </button>\n    }\n</section>\n", styles: ["ngx-app-bar{display:flex;flex-direction:row;align-items:center;min-height:var(--ngx-app-bar-min-height, 3.5rem);box-sizing:border-box;gap:var(--ngx-app-bar-gap, .25rem)}ngx-app-bar header{color:var(--mat-sys-on-surface-variant)}ngx-app-bar header.condensed{display:flex;flex-direction:row;align-items:center;gap:var(--ngx-app-bar-condensed-gap, .5rem)}ngx-app-bar header.condensed mat-icon{color:var(--mat-sys-outline)}ngx-app-bar header .title,ngx-app-bar header .subtitle{margin:0;white-space:nowrap}ngx-app-bar header .title{font:var(--ngx-app-bar-title-font, var(--mat-sys-headline-medium));letter-spacing:var(--ngx-app-bar-title-letter-spacing, var(--mat-sys-headline-medium-tracking))}ngx-app-bar header .subtitle{font:var(--ngx-app-bar-subtitle-font, var(--mat-sys-headline-small));letter-spacing:var(--ngx-app-bar-subtitle-letter-spacing, var(--mat-sys-headline-small-tracking))}ngx-app-bar .actions{display:flex;justify-content:flex-end;flex-grow:1;gap:var(--ngx-app-bar-actions-gap, .5rem)}\n"] }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], helpUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpUrl", required: false }] }], withBackIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "withBackIcon", required: false }] }], goBack: [{ type: i0.Output, args: ["goBack"] }] } });
+                    }, template: "@if (withBackButton()) {\n    <button matIconButton matTooltip=\"{{ intl?.back ?? 'Back' }}\" (click)=\"triggerGoBack()\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n}\n\n<header class=\"{{ mode() }}\">\n    <h1 class=\"title\">{{ title() }}</h1>\n    @if (subtitle()) {\n        @if (mode() === 'condensed') {\n            <mat-icon>chevron_right</mat-icon>\n        }\n        <h2 class=\"subtitle\">{{ subtitle() }}</h2>\n    }\n</header>\n\n<section class=\"actions\">\n    <ng-content />\n    @if (helpUrl()) {\n        <button matIconButton matTooltip=\"{{ intl?.help ?? 'Help' }}\" (click)=\"openHelp()\">\n            <mat-icon>help</mat-icon>\n        </button>\n    }\n</section>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;min-height:var(--ngx-app-bar-min-height, 3.5rem);box-sizing:border-box;gap:var(--ngx-app-bar-gap, .25rem);padding:var(--ngx-app-bar-padding, .25rem 1rem)}:host header{color:var(--mat-sys-on-surface-variant)}:host header.condensed{display:flex;flex-direction:row;align-items:center;gap:var(--ngx-app-bar-condensed-gap, .5rem)}:host header.condensed mat-icon{color:var(--mat-sys-outline)}:host header .title,:host header .subtitle{margin:0;white-space:nowrap}:host header .title{font:var(--ngx-app-bar-title-font, var(--mat-sys-headline-medium));letter-spacing:var(--ngx-app-bar-title-letter-spacing, var(--mat-sys-headline-medium-tracking))}:host header .subtitle{font:var(--ngx-app-bar-subtitle-font, var(--mat-sys-headline-small));letter-spacing:var(--ngx-app-bar-subtitle-letter-spacing, var(--mat-sys-headline-small-tracking))}:host .actions{display:flex;justify-content:flex-end;flex-grow:1;gap:var(--ngx-app-bar-actions-gap, .5rem)}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], helpUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpUrl", required: false }] }], withBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "withBackButton", required: false }] }], goBack: [{ type: i0.Output, args: ["goBack"] }] } });
 
-class NgxLayoutComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: NgxLayoutComponent, isStandalone: true, selector: "ngx-layout", ngImport: i0, template: "<ng-content select=\"ngx-app-bar\"></ng-content>\n<ng-content select=\"ngx-main-bar\"></ng-content>\n<!--\n    The ng-content's is not clearly defined yet. The potential use-cases are:\n    - Display GPD bars\n    - Display warnings\n -->\n<ng-content></ng-content>\n<section class=\"content\">\n    <ng-content select=\"ngx-panel\"></ng-content>\n</section>\n", styles: [":host{display:flex;flex-direction:column;flex:1 1 0;background-color:var(--mat-sys-surface-container);padding-block-end:var(--ngx-layout-padding-block-end, .75rem);padding-inline:var(--ngx-layout-padding-inline, 1rem);box-sizing:border-box}:host .content{display:flex;flex:1 1 0;overflow:hidden;gap:var(--ngx-layout-content-gap, .5rem);padding-block:var(--ngx-layout-content-padding-block, .25rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class NgxColumnComponent {
+    contentPadding = input(undefined, ...(ngDevMode ? [{ debugName: "contentPadding" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: NgxColumnComponent, isStandalone: true, selector: "ngx-column", inputs: { contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content select=\"ngx-column-bar\"></ng-content>\n<section class=\"content\" [class.no-padding]=\"contentPadding() === 'none'\">\n    <ng-content></ng-content>\n</section>\n", styles: [":host{flex:1;display:flex;flex-direction:column;box-sizing:border-box;block-size:100%;min-width:min-content;position:relative;overflow:visible}:host .content{overflow:auto;display:flex;flex-direction:column;gap:var(--ngx-column-content-gap, .5rem);padding:var(--ngx-column-content-padding, .25rem .5rem);flex:1}:host .content.no-padding{padding:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-layout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"ngx-app-bar\"></ng-content>\n<ng-content select=\"ngx-main-bar\"></ng-content>\n<!--\n    The ng-content's is not clearly defined yet. The potential use-cases are:\n    - Display GPD bars\n    - Display warnings\n -->\n<ng-content></ng-content>\n<section class=\"content\">\n    <ng-content select=\"ngx-panel\"></ng-content>\n</section>\n", styles: [":host{display:flex;flex-direction:column;flex:1 1 0;background-color:var(--mat-sys-surface-container);padding-block-end:var(--ngx-layout-padding-block-end, .75rem);padding-inline:var(--ngx-layout-padding-inline, 1rem);box-sizing:border-box}:host .content{display:flex;flex:1 1 0;overflow:hidden;gap:var(--ngx-layout-content-gap, .5rem);padding-block:var(--ngx-layout-content-padding-block, .25rem)}\n"] }]
-        }] });
+            args: [{ selector: 'ngx-column', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"ngx-column-bar\"></ng-content>\n<section class=\"content\" [class.no-padding]=\"contentPadding() === 'none'\">\n    <ng-content></ng-content>\n</section>\n", styles: [":host{flex:1;display:flex;flex-direction:column;box-sizing:border-box;block-size:100%;min-width:min-content;position:relative;overflow:visible}:host .content{overflow:auto;display:flex;flex-direction:column;gap:var(--ngx-column-content-gap, .5rem);padding:var(--ngx-column-content-padding, .25rem .5rem);flex:1}:host .content.no-padding{padding:0}\n"] }]
+        }], propDecorators: { contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }] } });
 
-class NgxMainBarComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxMainBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: NgxMainBarComponent, isStandalone: true, selector: "ngx-main-bar", ngImport: i0, template: "<ng-content select=\"ngx-actions-group\"></ng-content>\n\n<div class=\"right\">\n    <ng-content select=\"ngx-filters-group\"></ng-content>\n    <ng-content select=\"ngx-search-bar-container\"></ng-content>\n</div>\n", styles: ["ngx-main-bar{display:flex;align-items:center;padding-block:var(--ngx-main-bar-padding-block, .25rem);gap:var(--ngx-main-bar-gap, .75rem)}ngx-main-bar .right{flex:1;display:flex;justify-content:flex-end;gap:var(--ngx-main-bar-right-gap, .75rem)}ngx-main-bar ngx-actions-group{flex:1;min-inline-size:var(--ngx-main-bar-action-min-inline-size, 3rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+class NgxBarTitleDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxBarTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: NgxBarTitleDirective, isStandalone: true, selector: "h2[ngxBarTitle], h3[ngxBarTitle], h4[ngxBarTitle], h5[ngxBarTitle], h6[ngxBarTitle]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxMainBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-main-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"ngx-actions-group\"></ng-content>\n\n<div class=\"right\">\n    <ng-content select=\"ngx-filters-group\"></ng-content>\n    <ng-content select=\"ngx-search-bar-container\"></ng-content>\n</div>\n", styles: ["ngx-main-bar{display:flex;align-items:center;padding-block:var(--ngx-main-bar-padding-block, .25rem);gap:var(--ngx-main-bar-gap, .75rem)}ngx-main-bar .right{flex:1;display:flex;justify-content:flex-end;gap:var(--ngx-main-bar-right-gap, .75rem)}ngx-main-bar ngx-actions-group{flex:1;min-inline-size:var(--ngx-main-bar-action-min-inline-size, 3rem)}\n"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxBarTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'h2[ngxBarTitle], h3[ngxBarTitle], h4[ngxBarTitle], h5[ngxBarTitle], h6[ngxBarTitle]',
+                    standalone: true
+                }]
         }] });
 
-class NgxPanelComponent {
-    appearance = input(undefined, ...(ngDevMode ? [{ debugName: "appearance" }] : []));
-    contentPadding = input(undefined, { ...(ngDevMode ? { debugName: "contentPadding" } : {}), alias: 'content-padding' });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: NgxPanelComponent, isStandalone: true, selector: "ngx-panel", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "content-padding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.appearance": "this.appearance()", "attr.content-padding": "this.contentPadding()" } }, ngImport: i0, template: "<ng-content select=\"ngx-panel-bar[primary]\"></ng-content>\n<ng-content select=\"ngx-panel-bar\"></ng-content>\n<section class=\"content\">\n    <ng-content></ng-content>\n</section>\n", styles: ["ngx-panel{display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;block-size:100%;border-radius:var(--ngx-panel-radius, 2rem);padding-block:var(--ngx-panel-padding-block, .25rem);background-color:var(--mat-sys-surface-container-lowest);min-width:min-content}ngx-panel[appearance=transparent]{background-color:transparent}ngx-panel .content{overflow:auto;display:flex;flex-direction:column;gap:var(--ngx-panel-content-gap, .5rem);flex:1;padding-inline:var(--ngx-panel-content-padding-inline, .5rem);padding-block-end:var(--ngx-panel-content-padding-block-end, .75rem)}ngx-panel[content-padding=none] .content{padding-inline:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const FILTER_TOKEN = new InjectionToken('FILTER_TOKEN');
+
+class NgxFilterDirective {
+    type = 'complex';
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    active = input.required(...(ngDevMode ? [{ debugName: "active" }] : []));
+    selectedFilterLabel = input('', ...(ngDevMode ? [{ debugName: "selectedFilterLabel" }] : []));
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: NgxFilterDirective, isStandalone: true, selector: "ng-template[ngxFilter]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, selectedFilterLabel: { classPropertyName: "selectedFilterLabel", publicName: "selectedFilterLabel", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: FILTER_TOKEN, useExisting: forwardRef(() => NgxFilterDirective) }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[ngxFilter]',
+                    standalone: true,
+                    providers: [{ provide: FILTER_TOKEN, useExisting: forwardRef(() => NgxFilterDirective) }]
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], selectedFilterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedFilterLabel", required: false }] }] } });
+
+class NgxFilterToggleDirective {
+    type = 'toggle';
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    active = model.required(...(ngDevMode ? [{ debugName: "active" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxFilterToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: NgxFilterToggleDirective, isStandalone: true, selector: "ng-template[ngxFilterToggle]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { active: "activeChange" }, providers: [{ provide: FILTER_TOKEN, useExisting: forwardRef(() => NgxFilterToggleDirective) }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxFilterToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[ngxFilterToggle]',
+                    standalone: true,
+                    providers: [{ provide: FILTER_TOKEN, useExisting: forwardRef(() => NgxFilterToggleDirective) }]
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }, { type: i0.Output, args: ["activeChange"] }] } });
+
+const resizeSignal = (element, box = 'border-box') => {
+    const value = signal(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    effect(onCleanup => {
+        const el = element()?.nativeElement;
+        if (!el) {
+            return;
+        }
+        const initialValue = {
+            borderBoxSize: [],
+            contentRect: new DOMRect(),
+            contentBoxSize: [],
+            devicePixelContentBoxSize: [],
+            target: el
+        };
+        value.set(initialValue);
+        const ro = new ResizeObserver(entries => {
+            value.set(entries[0] || initialValue);
+        });
+        ro.observe(el, { box });
+        onCleanup(() => {
+            ro.disconnect();
+        });
+    });
+    return value;
+};
+class NgxFiltersGroupComponent {
+    resetFilters = output();
+    folded = input(...(ngDevMode ? [undefined, { debugName: "folded" }] : []));
+    intl = inject(NgxLayoutIntl, { optional: true });
+    // #region Overlay
+    overlayOrigin = signal(undefined, ...(ngDevMode ? [{ debugName: "overlayOrigin" }] : []));
+    overlayContent = signal(undefined, ...(ngDevMode ? [{ debugName: "overlayContent" }] : []));
+    overlayOpen = signal(false, ...(ngDevMode ? [{ debugName: "overlayOpen" }] : []));
+    moreFiltersOverlay = signal(false, ...(ngDevMode ? [{ debugName: "moreFiltersOverlay" }] : []));
+    overlayPositions = [{
+            originX: 'center',
+            originY: 'bottom',
+            overlayX: 'center',
+            overlayY: 'top',
+            offsetY: 16
+        }, {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetY: 16
+        }];
+    // #endregion
+    // #region Filters
+    allFilters = contentChildren(FILTER_TOKEN, ...(ngDevMode ? [{ debugName: "allFilters" }] : []));
+    activeFiltersAmount = computed(() => this.invisibleFilters().filter(filter => filter.active()).length, ...(ngDevMode ? [{ debugName: "activeFiltersAmount" }] : []));
+    visibleFilters = computed(() => {
+        const lastFittingIndex = this.lastFittingIndex();
+        if (lastFittingIndex < 0) {
+            return [];
+        }
+        return this.allFilters().slice(0, lastFittingIndex);
+    }, ...(ngDevMode ? [{ debugName: "visibleFilters" }] : []));
+    invisibleFilters = computed(() => {
+        const lastFittingIndex = this.lastFittingIndex();
+        if (lastFittingIndex < 0) {
+            return this.allFilters();
+        }
+        return this.allFilters().slice(lastFittingIndex);
+    }, ...(ngDevMode ? [{ debugName: "invisibleFilters" }] : []));
+    filterContainerRef = viewChild.required('container');
+    filterContainerPadding = computed(() => Number.parseFloat(globalThis.getComputedStyle(this.filterContainerRef().nativeElement).paddingInline), ...(ngDevMode ? [{ debugName: "filterContainerPadding" }] : []));
+    // #endregion
+    // #region Host
+    hostElement = inject(ElementRef);
+    hostSize = resizeSignal(() => this.hostElement);
+    hostWidth = computed(() => Math.ceil(this.hostSize()?.contentRect.width || 0), ...(ngDevMode ? [{ debugName: "hostWidth" }] : []));
+    // #endregion
+    // #region MeasureRow
+    measureRowRef = viewChild('measureRow', ...(ngDevMode ? [{ debugName: "measureRowRef" }] : []));
+    measureRowSize = resizeSignal(() => this.measureRowRef());
+    measureRowWidth = computed(() => Math.ceil(this.measureRowSize()?.contentRect.width || 0), ...(ngDevMode ? [{ debugName: "measureRowWidth" }] : []));
+    // #endregion
+    // #region StaticFields
+    staticFieldsRef = viewChild('static', ...(ngDevMode ? [{ debugName: "staticFieldsRef" }] : []));
+    staticFieldsSize = resizeSignal(() => this.staticFieldsRef());
+    staticFieldsWidth = computed(() => Math.ceil(this.staticFieldsSize()?.contentRect.width || 0), ...(ngDevMode ? [{ debugName: "staticFieldsWidth" }] : []));
+    // #endregion
+    lastFittingIndex = computed(() => {
+        const hostWidth = this.hostWidth();
+        if (!hostWidth) {
+            return -1;
+        }
+        const availableSpace = hostWidth - (this.staticFieldsWidth() + (2 * this.filterContainerPadding()));
+        const filters = Array.from(this.measureRowRef()?.nativeElement.querySelectorAll('mat-chip-option') ?? []);
+        if (availableSpace - this.measureRowWidth() >= 0) {
+            return filters.length;
+        }
+        return this.getLastFittingIndex(availableSpace, filters);
+    }, ...(ngDevMode ? [{ debugName: "lastFittingIndex" }] : []));
+    emitResetClicked() {
+        this.resetFilters.emit();
+    }
+    getLastFittingIndex(availableSpace, elements) {
+        const firstEl = elements[0];
+        if (!firstEl || availableSpace <= 0 || availableSpace - firstEl.offsetWidth < 0) {
+            return -1;
+        }
+        let residualAvailableSpace = availableSpace;
+        const lastFittingIndex = elements.findIndex(el => {
+            residualAvailableSpace -= el.offsetWidth + 16;
+            return residualAvailableSpace <= 0;
+        });
+        return lastFittingIndex >= 0 ? lastFittingIndex : elements.length - 1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxFiltersGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: NgxFiltersGroupComponent, isStandalone: true, selector: "ngx-filters-group", inputs: { folded: { classPropertyName: "folded", publicName: "folded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetFilters: "resetFilters" }, queries: [{ propertyName: "allFilters", predicate: FILTER_TOKEN, isSignal: true }], viewQueries: [{ propertyName: "filterContainerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "measureRowRef", first: true, predicate: ["measureRow"], descendants: true, isSignal: true }, { propertyName: "staticFieldsRef", first: true, predicate: ["static"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (folded()) {\n    <section\n        class=\"filter-container\"\n        #container\n        [matBadge]=\"activeFiltersAmount()\"\n        [matBadgeHidden]=\"activeFiltersAmount() <= 0\">\n        <button\n            mat-icon-button\n            aria-label=\"All filters\"\n            cdkOverlayOrigin\n            #trigger=\"cdkOverlayOrigin\"\n            (click)=\"\n                this.overlayOrigin.set(trigger);\n                this.overlayContent.set(moreFilters);\n                this.overlayOpen.set(true);\n                this.moreFiltersOverlay.set(true)\n            \"\n            matTooltip=\"{{ intl?.allFilters ?? 'All filters' }}\">\n            <mat-icon>filter_alt</mat-icon>\n        </button>\n    </section>\n} @else {\n    @if (allFilters()) {\n        <section #measureRow class=\"measure-row\">\n            <mat-chip-set>\n                @for (f of allFilters(); track $index) {\n                    <mat-chip-option [selectable]=\"false\" [selected]=\"f.active()\">\n                        {{ f.label() }}\n                        @if (f.type === 'complex' && f.selectedFilterLabel()) {\n                            <span class=\"selected-label\">: {{ f.selectedFilterLabel() }}</span>\n                        }\n                        @if (f.type === 'complex') {\n                            <mat-icon matChipTrailingIcon>arrow_drop_down</mat-icon>\n                        }\n                    </mat-chip-option>\n                }\n                <mat-chip #overflowMeasure>\n                    +00 {{ intl?.filters ?? 'Filters' | lowercase }} (00 {{ intl?.actives ?? 'Actives' | lowercase }})\n                    <mat-icon matChipTrailingIcon>arrow_drop_down</mat-icon>\n                </mat-chip>\n            </mat-chip-set>\n        </section>\n    }\n\n    <section class=\"filter-container\" #container>\n        @if (this.visibleFilters().length) {\n            <mat-chip-set>\n                @for (f of visibleFilters(); track $index) {\n                    @if (f.type === 'toggle') {\n                        <mat-chip-option\n                            selectable=\"true\"\n                            [selected]=\"f.active()\"\n                            (selectionChange)=\"f.active.set($event.selected)\">\n                            {{ f.label() }}\n                        </mat-chip-option>\n                    } @else {\n                        <mat-chip-option\n                            [selectable]=\"false\"\n                            [selected]=\"f.active()\"\n                            cdkOverlayOrigin\n                            #trigger=\"cdkOverlayOrigin\"\n                            (click)=\"\n                                this.overlayOrigin.set(trigger);\n                                this.overlayContent.set(f.templateRef);\n                                this.overlayOpen.set(true);\n                                this.moreFiltersOverlay.set(false)\n                            \">\n                            {{ f.label() }}\n                            @if (f.selectedFilterLabel()) {\n                                <span class=\"selected-label\">: {{ f.selectedFilterLabel() }}</span>\n                            }\n                            <mat-icon\n                                [class.is-overlay-open]=\"this.overlayOpen() && this.overlayContent() === f.templateRef\"\n                                matChipTrailingIcon>\n                                arrow_drop_down\n                            </mat-icon>\n                        </mat-chip-option>\n                    }\n                }\n            </mat-chip-set>\n        }\n        <section class=\"static\" #static>\n            @if (invisibleFilters().length; as invisibleFiltersAmount) {\n                <mat-chip-set>\n                    <mat-chip\n                        cdkOverlayOrigin\n                        [class.filter-active]=\"activeFiltersAmount()\"\n                        #trigger=\"cdkOverlayOrigin\"\n                        (click)=\"\n                            this.overlayOrigin.set(trigger);\n                            this.overlayContent.set(moreFilters);\n                            this.overlayOpen.set(true);\n                            this.moreFiltersOverlay.set(true)\n                        \">\n                        +{{ invisibleFiltersAmount }} {{ intl?.filters ?? 'Filters' | lowercase }} ({{\n                            activeFiltersAmount()\n                        }}\n                        {{ intl?.actives ?? 'Actives' | lowercase }})\n                        <mat-icon\n                            [class.is-overlay-open]=\"this.overlayOpen() && this.overlayContent() === moreFilters\"\n                            matChipTrailingIcon>\n                            arrow_drop_down\n                        </mat-icon>\n                    </mat-chip>\n                </mat-chip-set>\n            }\n            <button\n                mat-icon-button\n                aria-label=\"Reset filters\"\n                (click)=\"emitResetClicked()\"\n                matTooltip=\"{{ intl?.reset ?? 'Reset' }}\">\n                <mat-icon>settings_backup_restore</mat-icon>\n            </button>\n        </section>\n    </section>\n}\n\n<ng-template #moreFilters>\n    @if (allFilters()) {\n        @for (f of allFilters(); track $index) {\n            @if (f.type === 'toggle') {\n                <section class=\"filter\">\n                    <mat-slide-toggle labelPosition=\"before\" [(ngModel)]=\"f.active\">\n                        {{ f.label() }}\n                    </mat-slide-toggle>\n                </section>\n            } @else {\n                <section class=\"filter\">\n                    <div class=\"title\">\n                        <span class=\"label\">{{ f.label() }}</span>\n                        <span class=\"value\">{{ f.selectedFilterLabel() }}</span>\n                    </div>\n                    @if (f.templateRef) {\n                        <ng-container *ngTemplateOutlet=\"f.templateRef\"></ng-container>\n                    }\n                </section>\n            }\n        }\n    }\n</ng-template>\n\n@let overlayOrigin = this.overlayOrigin();\n@let overlayOpen = this.overlayOpen();\n@let overlayContent = this.overlayContent();\n@if (overlayOrigin && overlayOpen && overlayContent) {\n    <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n        [cdkConnectedOverlayOpen]=\"overlayOpen\"\n        (detach)=\"this.overlayOpen.set(false)\"\n        cdkConnectedOverlayHasBackdrop=\"true\"\n        backdrop\n        (backdropClick)=\"this.overlayOpen.set(false)\"\n        cdkConnectedOverlayPanelClass=\"filter-group--overlay\"\n        cdkConnectedOverlayBackdropClass=\"filter-group--overlay--backdrop--transparent\"\n        [cdkConnectedOverlayPositions]=\"overlayPositions\"\n        [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n        [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n        [cdkConnectedOverlayViewportMargin]=\"32\">\n        <div class=\"filters-group--overlay--container\">\n            @if (moreFiltersOverlay()) {\n                <div class=\"filters--title\">\n                    <span>{{ intl?.filters ?? 'Filters' }}</span>\n                    <button\n                        mat-icon-button\n                        aria-label=\"Reset filters\"\n                        (click)=\"emitResetClicked()\"\n                        matTooltip=\"{{ intl?.reset ?? 'Reset' }}\">\n                        <mat-icon>settings_backup_restore</mat-icon>\n                    </button>\n                </div>\n            }\n            <div class=\"filters--content\">\n                <ng-container *ngTemplateOutlet=\"overlayContent\"></ng-container>\n            </div>\n        </div>\n    </ng-template>\n}\n", styles: ["ngx-filters-group{flex:1;display:flex;flex-direction:row;justify-content:end}ngx-filters-group .selected-label{max-width:var(--ngx-filters-group-selected-label-max-width, 27ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}ngx-filters-group .measure-row{display:flex;flex-direction:row;gap:var(--ngx-filters-group-gap, .5rem);position:absolute;visibility:hidden;pointer-events:none}ngx-filters-group .filter-container{display:flex;flex-direction:row;align-items:center;gap:var(--ngx-filters-group-gap, .5rem);block-size:var(--ngx-filters-group-block-size, 3rem);border-radius:var(--ngx-filters-group-radius, 2rem);padding-inline:var(--ngx-filters-group-padding-inline, .5rem);background-color:var(--mat-sys-surface-container-low)}ngx-filters-group .filter-container .static{display:flex;flex-direction:row;gap:var(--ngx-filters-group-gap, .5rem)}ngx-filters-group .filter-container .static:only-child mat-chip-set mat-chip{--mat-chip-container-shape-radius: var(--ngx-filters-group-first-chip-option-shape-radius, 1rem .5rem .5rem 1rem)}ngx-filters-group .filter-container .static mat-chip:first-child{--mat-chip-container-shape-radius: var(--ngx-filters-group-first-chip-shape-radius, .5rem)}ngx-filters-group .filter-container .static mat-chip.filter-active{--mat-chip-elevated-container-color: var(--mat-sys-secondary-container);--mat-chip-outline-color: transparent}ngx-filters-group .filter-container mat-chip-set>div{flex-wrap:nowrap}ngx-filters-group .filter-container mat-chip,ngx-filters-group .filter-container mat-chip-option{min-width:0}ngx-filters-group .filter-container mat-chip:first-child,ngx-filters-group .filter-container mat-chip-option:first-child{--mat-chip-container-shape-radius: var(--ngx-filters-group-first-chip-option-shape-radius, 1rem .5rem .5rem 1rem)}ngx-filters-group .filter-container mat-chip .mat-mdc-chip-action-label,ngx-filters-group .filter-container mat-chip-option .mat-mdc-chip-action-label{display:flex;align-items:center}ngx-filters-group .filter-container mat-chip .is-overlay-open,ngx-filters-group .filter-container mat-chip-option .is-overlay-open{transform:rotate(180deg)}ngx-filters-group .filter-container:has(>button:only-of-type){padding-inline:var(--ngx-filters-group-folded-padding-inline, .25rem)}.filters-group--overlay--container{display:flex;flex-direction:column;background-color:var(--mat-sys-surface-container-high);border-radius:var(--ngx-filters-group-overlay-radius, .5rem);overflow:hidden}.filters-group--overlay--container mat-slide-toggle>*{width:100%;justify-content:space-between}.filters-group--overlay--container mat-slide-toggle>* label{margin:0}.filters-group--overlay--container .filters--title{font:var(--mat-sys-title-medium);letter-spacing:var(--mat-sys-title-medium-tracking);color:var(--mat-sys-on-surface-variant);border-block-end:1px solid var(--mat-sys-outline-variant);display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding-inline:var(--ngx-filters-group-overlay-title-padding-inline, 1rem);padding-block:calc(var(--ngx-filters-group-overlay-title-padding-block, 1rem) / 4)}.filters-group--overlay--container .filters--content{min-width:18.75rem;overflow:auto;display:flex;flex-direction:column;justify-items:stretch;gap:var(--ngx-filters-group-overlay-content-gap, .5rem);padding:var(--ngx-filters-group-overlay-filter-padding, 1rem)}.filters-group--overlay--container .filters--content .filter{display:flex;flex-direction:column;gap:var(--ngx-filters-group-overlay-content-filter-gap, .5rem);padding-block:var(--ngx-filters-group-overlay-filter-padding, 1rem)}.filters-group--overlay--container .filters--content .filter:not(:last-child){border-bottom:1px dashed var(--mat-sys-outline-variant)}.filters-group--overlay--container .filters--content .filter:last-child{padding-block-end:unset}.filters-group--overlay--container .filters--content .filter:first-child{padding-block-start:unset}.filters-group--overlay--container .filters--content .filter .title{display:inline-flex;justify-content:space-between;align-items:baseline}.filters-group--overlay--container .filters--content .filter .title .label{font:var(--mat-sys-label-large)}.filters-group--overlay--container .filters--content .filter .title .value{font:var(--mat-sys-label-medium);max-width:var(--ngx-filters-group-overlay-title-max-width, 27ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-group--overlay--container .filters--content .filter>[no-padding]{margin-inline:-1rem}.filter-group--overlay--backdrop--transparent{background-color:transparent}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: FormsModule }, { 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: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxFiltersGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-panel', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        // eslint-disable-next-line @typescript-eslint/naming-convention
-                        '[attr.appearance]': 'this.appearance()',
-                        // eslint-disable-next-line @typescript-eslint/naming-convention
-                        '[attr.content-padding]': 'this.contentPadding()'
-                    }, template: "<ng-content select=\"ngx-panel-bar[primary]\"></ng-content>\n<ng-content select=\"ngx-panel-bar\"></ng-content>\n<section class=\"content\">\n    <ng-content></ng-content>\n</section>\n", styles: ["ngx-panel{display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;block-size:100%;border-radius:var(--ngx-panel-radius, 2rem);padding-block:var(--ngx-panel-padding-block, .25rem);background-color:var(--mat-sys-surface-container-lowest);min-width:min-content}ngx-panel[appearance=transparent]{background-color:transparent}ngx-panel .content{overflow:auto;display:flex;flex-direction:column;gap:var(--ngx-panel-content-gap, .5rem);flex:1;padding-inline:var(--ngx-panel-content-padding-inline, .5rem);padding-block-end:var(--ngx-panel-content-padding-block-end, .75rem)}ngx-panel[content-padding=none] .content{padding-inline:0}\n"] }]
-        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "content-padding", required: false }] }] } });
+            args: [{ selector: 'ngx-filters-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        MatIcon,
+                        MatIconButton,
+                        MatChip,
+                        MatChipOption,
+                        MatChipTrailingIcon,
+                        MatChipSet,
+                        MatTooltip,
+                        NgTemplateOutlet,
+                        CdkConnectedOverlay,
+                        CdkOverlayOrigin,
+                        MatSlideToggle,
+                        FormsModule,
+                        MatBadge,
+                        LowerCasePipe
+                    ], template: "@if (folded()) {\n    <section\n        class=\"filter-container\"\n        #container\n        [matBadge]=\"activeFiltersAmount()\"\n        [matBadgeHidden]=\"activeFiltersAmount() <= 0\">\n        <button\n            mat-icon-button\n            aria-label=\"All filters\"\n            cdkOverlayOrigin\n            #trigger=\"cdkOverlayOrigin\"\n            (click)=\"\n                this.overlayOrigin.set(trigger);\n                this.overlayContent.set(moreFilters);\n                this.overlayOpen.set(true);\n                this.moreFiltersOverlay.set(true)\n            \"\n            matTooltip=\"{{ intl?.allFilters ?? 'All filters' }}\">\n            <mat-icon>filter_alt</mat-icon>\n        </button>\n    </section>\n} @else {\n    @if (allFilters()) {\n        <section #measureRow class=\"measure-row\">\n            <mat-chip-set>\n                @for (f of allFilters(); track $index) {\n                    <mat-chip-option [selectable]=\"false\" [selected]=\"f.active()\">\n                        {{ f.label() }}\n                        @if (f.type === 'complex' && f.selectedFilterLabel()) {\n                            <span class=\"selected-label\">: {{ f.selectedFilterLabel() }}</span>\n                        }\n                        @if (f.type === 'complex') {\n                            <mat-icon matChipTrailingIcon>arrow_drop_down</mat-icon>\n                        }\n                    </mat-chip-option>\n                }\n                <mat-chip #overflowMeasure>\n                    +00 {{ intl?.filters ?? 'Filters' | lowercase }} (00 {{ intl?.actives ?? 'Actives' | lowercase }})\n                    <mat-icon matChipTrailingIcon>arrow_drop_down</mat-icon>\n                </mat-chip>\n            </mat-chip-set>\n        </section>\n    }\n\n    <section class=\"filter-container\" #container>\n        @if (this.visibleFilters().length) {\n            <mat-chip-set>\n                @for (f of visibleFilters(); track $index) {\n                    @if (f.type === 'toggle') {\n                        <mat-chip-option\n                            selectable=\"true\"\n                            [selected]=\"f.active()\"\n                            (selectionChange)=\"f.active.set($event.selected)\">\n                            {{ f.label() }}\n                        </mat-chip-option>\n                    } @else {\n                        <mat-chip-option\n                            [selectable]=\"false\"\n                            [selected]=\"f.active()\"\n                            cdkOverlayOrigin\n                            #trigger=\"cdkOverlayOrigin\"\n                            (click)=\"\n                                this.overlayOrigin.set(trigger);\n                                this.overlayContent.set(f.templateRef);\n                                this.overlayOpen.set(true);\n                                this.moreFiltersOverlay.set(false)\n                            \">\n                            {{ f.label() }}\n                            @if (f.selectedFilterLabel()) {\n                                <span class=\"selected-label\">: {{ f.selectedFilterLabel() }}</span>\n                            }\n                            <mat-icon\n                                [class.is-overlay-open]=\"this.overlayOpen() && this.overlayContent() === f.templateRef\"\n                                matChipTrailingIcon>\n                                arrow_drop_down\n                            </mat-icon>\n                        </mat-chip-option>\n                    }\n                }\n            </mat-chip-set>\n        }\n        <section class=\"static\" #static>\n            @if (invisibleFilters().length; as invisibleFiltersAmount) {\n                <mat-chip-set>\n                    <mat-chip\n                        cdkOverlayOrigin\n                        [class.filter-active]=\"activeFiltersAmount()\"\n                        #trigger=\"cdkOverlayOrigin\"\n                        (click)=\"\n                            this.overlayOrigin.set(trigger);\n                            this.overlayContent.set(moreFilters);\n                            this.overlayOpen.set(true);\n                            this.moreFiltersOverlay.set(true)\n                        \">\n                        +{{ invisibleFiltersAmount }} {{ intl?.filters ?? 'Filters' | lowercase }} ({{\n                            activeFiltersAmount()\n                        }}\n                        {{ intl?.actives ?? 'Actives' | lowercase }})\n                        <mat-icon\n                            [class.is-overlay-open]=\"this.overlayOpen() && this.overlayContent() === moreFilters\"\n                            matChipTrailingIcon>\n                            arrow_drop_down\n                        </mat-icon>\n                    </mat-chip>\n                </mat-chip-set>\n            }\n            <button\n                mat-icon-button\n                aria-label=\"Reset filters\"\n                (click)=\"emitResetClicked()\"\n                matTooltip=\"{{ intl?.reset ?? 'Reset' }}\">\n                <mat-icon>settings_backup_restore</mat-icon>\n            </button>\n        </section>\n    </section>\n}\n\n<ng-template #moreFilters>\n    @if (allFilters()) {\n        @for (f of allFilters(); track $index) {\n            @if (f.type === 'toggle') {\n                <section class=\"filter\">\n                    <mat-slide-toggle labelPosition=\"before\" [(ngModel)]=\"f.active\">\n                        {{ f.label() }}\n                    </mat-slide-toggle>\n                </section>\n            } @else {\n                <section class=\"filter\">\n                    <div class=\"title\">\n                        <span class=\"label\">{{ f.label() }}</span>\n                        <span class=\"value\">{{ f.selectedFilterLabel() }}</span>\n                    </div>\n                    @if (f.templateRef) {\n                        <ng-container *ngTemplateOutlet=\"f.templateRef\"></ng-container>\n                    }\n                </section>\n            }\n        }\n    }\n</ng-template>\n\n@let overlayOrigin = this.overlayOrigin();\n@let overlayOpen = this.overlayOpen();\n@let overlayContent = this.overlayContent();\n@if (overlayOrigin && overlayOpen && overlayContent) {\n    <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n        [cdkConnectedOverlayOpen]=\"overlayOpen\"\n        (detach)=\"this.overlayOpen.set(false)\"\n        cdkConnectedOverlayHasBackdrop=\"true\"\n        backdrop\n        (backdropClick)=\"this.overlayOpen.set(false)\"\n        cdkConnectedOverlayPanelClass=\"filter-group--overlay\"\n        cdkConnectedOverlayBackdropClass=\"filter-group--overlay--backdrop--transparent\"\n        [cdkConnectedOverlayPositions]=\"overlayPositions\"\n        [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n        [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n        [cdkConnectedOverlayViewportMargin]=\"32\">\n        <div class=\"filters-group--overlay--container\">\n            @if (moreFiltersOverlay()) {\n                <div class=\"filters--title\">\n                    <span>{{ intl?.filters ?? 'Filters' }}</span>\n                    <button\n                        mat-icon-button\n                        aria-label=\"Reset filters\"\n                        (click)=\"emitResetClicked()\"\n                        matTooltip=\"{{ intl?.reset ?? 'Reset' }}\">\n                        <mat-icon>settings_backup_restore</mat-icon>\n                    </button>\n                </div>\n            }\n            <div class=\"filters--content\">\n                <ng-container *ngTemplateOutlet=\"overlayContent\"></ng-container>\n            </div>\n        </div>\n    </ng-template>\n}\n", styles: ["ngx-filters-group{flex:1;display:flex;flex-direction:row;justify-content:end}ngx-filters-group .selected-label{max-width:var(--ngx-filters-group-selected-label-max-width, 27ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}ngx-filters-group .measure-row{display:flex;flex-direction:row;gap:var(--ngx-filters-group-gap, .5rem);position:absolute;visibility:hidden;pointer-events:none}ngx-filters-group .filter-container{display:flex;flex-direction:row;align-items:center;gap:var(--ngx-filters-group-gap, .5rem);block-size:var(--ngx-filters-group-block-size, 3rem);border-radius:var(--ngx-filters-group-radius, 2rem);padding-inline:var(--ngx-filters-group-padding-inline, .5rem);background-color:var(--mat-sys-surface-container-low)}ngx-filters-group .filter-container .static{display:flex;flex-direction:row;gap:var(--ngx-filters-group-gap, .5rem)}ngx-filters-group .filter-container .static:only-child mat-chip-set mat-chip{--mat-chip-container-shape-radius: var(--ngx-filters-group-first-chip-option-shape-radius, 1rem .5rem .5rem 1rem)}ngx-filters-group .filter-container .static mat-chip:first-child{--mat-chip-container-shape-radius: var(--ngx-filters-group-first-chip-shape-radius, .5rem)}ngx-filters-group .filter-container .static mat-chip.filter-active{--mat-chip-elevated-container-color: var(--mat-sys-secondary-container);--mat-chip-outline-color: transparent}ngx-filters-group .filter-container mat-chip-set>div{flex-wrap:nowrap}ngx-filters-group .filter-container mat-chip,ngx-filters-group .filter-container mat-chip-option{min-width:0}ngx-filters-group .filter-container mat-chip:first-child,ngx-filters-group .filter-container mat-chip-option:first-child{--mat-chip-container-shape-radius: var(--ngx-filters-group-first-chip-option-shape-radius, 1rem .5rem .5rem 1rem)}ngx-filters-group .filter-container mat-chip .mat-mdc-chip-action-label,ngx-filters-group .filter-container mat-chip-option .mat-mdc-chip-action-label{display:flex;align-items:center}ngx-filters-group .filter-container mat-chip .is-overlay-open,ngx-filters-group .filter-container mat-chip-option .is-overlay-open{transform:rotate(180deg)}ngx-filters-group .filter-container:has(>button:only-of-type){padding-inline:var(--ngx-filters-group-folded-padding-inline, .25rem)}.filters-group--overlay--container{display:flex;flex-direction:column;background-color:var(--mat-sys-surface-container-high);border-radius:var(--ngx-filters-group-overlay-radius, .5rem);overflow:hidden}.filters-group--overlay--container mat-slide-toggle>*{width:100%;justify-content:space-between}.filters-group--overlay--container mat-slide-toggle>* label{margin:0}.filters-group--overlay--container .filters--title{font:var(--mat-sys-title-medium);letter-spacing:var(--mat-sys-title-medium-tracking);color:var(--mat-sys-on-surface-variant);border-block-end:1px solid var(--mat-sys-outline-variant);display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding-inline:var(--ngx-filters-group-overlay-title-padding-inline, 1rem);padding-block:calc(var(--ngx-filters-group-overlay-title-padding-block, 1rem) / 4)}.filters-group--overlay--container .filters--content{min-width:18.75rem;overflow:auto;display:flex;flex-direction:column;justify-items:stretch;gap:var(--ngx-filters-group-overlay-content-gap, .5rem);padding:var(--ngx-filters-group-overlay-filter-padding, 1rem)}.filters-group--overlay--container .filters--content .filter{display:flex;flex-direction:column;gap:var(--ngx-filters-group-overlay-content-filter-gap, .5rem);padding-block:var(--ngx-filters-group-overlay-filter-padding, 1rem)}.filters-group--overlay--container .filters--content .filter:not(:last-child){border-bottom:1px dashed var(--mat-sys-outline-variant)}.filters-group--overlay--container .filters--content .filter:last-child{padding-block-end:unset}.filters-group--overlay--container .filters--content .filter:first-child{padding-block-start:unset}.filters-group--overlay--container .filters--content .filter .title{display:inline-flex;justify-content:space-between;align-items:baseline}.filters-group--overlay--container .filters--content .filter .title .label{font:var(--mat-sys-label-large)}.filters-group--overlay--container .filters--content .filter .title .value{font:var(--mat-sys-label-medium);max-width:var(--ngx-filters-group-overlay-title-max-width, 27ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-group--overlay--container .filters--content .filter>[no-padding]{margin-inline:-1rem}.filter-group--overlay--backdrop--transparent{background-color:transparent}\n"] }]
+        }], propDecorators: { resetFilters: [{ type: i0.Output, args: ["resetFilters"] }], folded: [{ type: i0.Input, args: [{ isSignal: true, alias: "folded", required: false }] }], allFilters: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FILTER_TOKEN), { isSignal: true }] }], filterContainerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], measureRowRef: [{ type: i0.ViewChild, args: ['measureRow', { isSignal: true }] }], staticFieldsRef: [{ type: i0.ViewChild, args: ['static', { isSignal: true }] }] } });
 
 class NgxSearchInputDirective {
     blurred = signal(false, ...(ngDevMode ? [{ debugName: "blurred" }] : []));
@@ -216,13 +400,13 @@ class NgxSearchInputDirective {
     reset() {
         this.control.reset();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxSearchInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: NgxSearchInputDirective, isStandalone: true, selector: "input[ngx-search-input]", host: { listeners: { "blur": "blurred.set(true);", "focus": "blurred.set(false);" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxSearchInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: NgxSearchInputDirective, isStandalone: true, selector: "input[ngxSearchInput]", host: { listeners: { "blur": "blurred.set(true);", "focus": "blurred.set(false);" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxSearchInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxSearchInputDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'input[ngx-search-input]',
+                    selector: 'input[ngxSearchInput]',
                     /* eslint-disable @typescript-eslint/naming-convention */
                     host: {
                         '(blur)': 'blurred.set(true);',
@@ -268,7 +452,7 @@ class NgxSearchBarContainerComponent {
             if (!searchInput) {
                 return;
             }
-            if (!this.isFolded()) {
+            if (!this.isFolded() && this.folded()) {
                 searchInput.focus();
             }
         });
@@ -278,7 +462,7 @@ class NgxSearchBarContainerComponent {
                 const searchText = untracked(this.searchText);
                 const blurred = this.searchInput()?.blurred();
                 if (blurred && !searchText) {
-                    this.toggleFolded();
+                    this.manualFoldingState.set(true);
                 }
             }
         });
@@ -294,17 +478,94 @@ class NgxSearchBarContainerComponent {
         searchInput.reset();
         searchInput.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxSearchBarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NgxSearchBarContainerComponent, isStandalone: true, selector: "ngx-search-bar-container", inputs: { folded: { classPropertyName: "folded", publicName: "folded", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "searchInput", first: true, predicate: NgxSearchInputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isFolded()) {\n    <button\n        matIconButton\n        aria-label=\"Open search bar\"\n        (click)=\"toggleFolded()\"\n        matTooltip=\"{{ intl?.openSearchBar ?? 'Open search bar' }}\">\n        <mat-icon>search</mat-icon>\n    </button>\n} @else {\n    <ng-content select=\"[ngx-search-input]\"></ng-content>\n\n    @if (searchText()) {\n        <button\n            matIconButton\n            aria-label=\"Clear button\"\n            (click)=\"resetInput()\"\n            matTooltip=\"{{ intl?.deleteSearch ?? 'Clear search' }}\">\n            <mat-icon>close</mat-icon>\n        </button>\n    } @else {\n        <mat-icon class=\"icon-search-bar\" aria-hidden=\"false\" aria-label=\"Search icon\" fontIcon=\"search\" />\n    }\n}\n", styles: ["ngx-search-bar-container{display:flex;align-items:center;block-size:var(--ngx-search-bar-container-block-size, 3rem);border-radius:var(--ngx-search-bar-container-radius, 2rem);padding-inline-start:var(--ngx-search-bar-container-padding-inline-start, 1.125rem);padding-inline-end:var(--ngx-search-bar-container-padding-inline-end, .25rem);background-color:var(--mat-sys-surface-container-high);gap:var(--ngx-search-bar-container-gap, .125rem)}ngx-search-bar-container:has(button:only-child){width:fit-content;padding:var(--ngx-search-bar-folded-container-padding, 0 .25rem)}ngx-search-bar-container>input[ngx-search-input]{font:var(--mat-sys-body-large);letter-spacing:var(--mat-sys-body-large-tracking);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ngx-search-bar-container>input[ngx-search-input]::placeholder{color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container mat-icon.icon-search-bar{padding:var(--ngx-search-bar-icon-padding, .5rem);color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container [ngx-search-input]{flex:1;background:none;border:none}ngx-search-bar-container [ngx-search-input]:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxSearchBarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: NgxSearchBarContainerComponent, isStandalone: true, selector: "ngx-search-bar-container", inputs: { folded: { classPropertyName: "folded", publicName: "folded", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "searchInput", first: true, predicate: NgxSearchInputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isFolded()) {\n    <button\n        matIconButton\n        aria-label=\"Open search bar\"\n        (click)=\"toggleFolded()\"\n        matTooltip=\"{{ intl?.openSearchBar ?? 'Open search bar' }}\">\n        <mat-icon>search</mat-icon>\n    </button>\n} @else {\n    <ng-content select=\"[ngxSearchInput]\"></ng-content>\n\n    @if (searchText()) {\n        <button\n            matIconButton\n            aria-label=\"Clear button\"\n            (click)=\"resetInput()\"\n            matTooltip=\"{{ intl?.deleteSearch ?? 'Clear search' }}\">\n            <mat-icon>close</mat-icon>\n        </button>\n    } @else {\n        <mat-icon class=\"icon-search-bar\" aria-hidden=\"false\" aria-label=\"Search icon\" fontIcon=\"search\" />\n    }\n}\n", styles: ["ngx-search-bar-container{display:flex;flex:1 1 auto;max-width:var(--ngx-search-bar-container-max-width, 400px);align-items:center;block-size:var(--ngx-search-bar-container-block-size, 3rem);border-radius:var(--ngx-search-bar-container-radius, 2rem);padding-inline-start:var(--ngx-search-bar-container-padding-inline-start, 1.125rem);padding-inline-end:var(--ngx-search-bar-container-padding-inline-end, .25rem);background-color:var(--mat-sys-surface-container-high);gap:var(--ngx-search-bar-container-gap, .125rem)}ngx-search-bar-container:has(button:only-child){width:fit-content;padding:var(--ngx-search-bar-container-folded-padding, 0 .25rem);flex:0}ngx-search-bar-container>input[ngxSearchInput]{font:var(--mat-sys-body-large);letter-spacing:var(--mat-sys-body-large-tracking);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:10px}ngx-search-bar-container>input[ngxSearchInput]::placeholder{color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container mat-icon.icon-search-bar{padding:var(--ngx-search-bar-container-icon-padding, .5rem);color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container [ngxSearchInput]{flex:1;background:none;border:none}ngx-search-bar-container [ngxSearchInput]:focus{outline:none}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxSearchBarContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxSearchBarContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-search-bar-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, MatButtonModule, MatTooltipModule], template: "@if (isFolded()) {\n    <button\n        matIconButton\n        aria-label=\"Open search bar\"\n        (click)=\"toggleFolded()\"\n        matTooltip=\"{{ intl?.openSearchBar ?? 'Open search bar' }}\">\n        <mat-icon>search</mat-icon>\n    </button>\n} @else {\n    <ng-content select=\"[ngx-search-input]\"></ng-content>\n\n    @if (searchText()) {\n        <button\n            matIconButton\n            aria-label=\"Clear button\"\n            (click)=\"resetInput()\"\n            matTooltip=\"{{ intl?.deleteSearch ?? 'Clear search' }}\">\n            <mat-icon>close</mat-icon>\n        </button>\n    } @else {\n        <mat-icon class=\"icon-search-bar\" aria-hidden=\"false\" aria-label=\"Search icon\" fontIcon=\"search\" />\n    }\n}\n", styles: ["ngx-search-bar-container{display:flex;align-items:center;block-size:var(--ngx-search-bar-container-block-size, 3rem);border-radius:var(--ngx-search-bar-container-radius, 2rem);padding-inline-start:var(--ngx-search-bar-container-padding-inline-start, 1.125rem);padding-inline-end:var(--ngx-search-bar-container-padding-inline-end, .25rem);background-color:var(--mat-sys-surface-container-high);gap:var(--ngx-search-bar-container-gap, .125rem)}ngx-search-bar-container:has(button:only-child){width:fit-content;padding:var(--ngx-search-bar-folded-container-padding, 0 .25rem)}ngx-search-bar-container>input[ngx-search-input]{font:var(--mat-sys-body-large);letter-spacing:var(--mat-sys-body-large-tracking);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ngx-search-bar-container>input[ngx-search-input]::placeholder{color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container mat-icon.icon-search-bar{padding:var(--ngx-search-bar-icon-padding, .5rem);color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container [ngx-search-input]{flex:1;background:none;border:none}ngx-search-bar-container [ngx-search-input]:focus{outline:none}\n"] }]
+            args: [{ selector: 'ngx-search-bar-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, MatIconButton, MatTooltip], template: "@if (isFolded()) {\n    <button\n        matIconButton\n        aria-label=\"Open search bar\"\n        (click)=\"toggleFolded()\"\n        matTooltip=\"{{ intl?.openSearchBar ?? 'Open search bar' }}\">\n        <mat-icon>search</mat-icon>\n    </button>\n} @else {\n    <ng-content select=\"[ngxSearchInput]\"></ng-content>\n\n    @if (searchText()) {\n        <button\n            matIconButton\n            aria-label=\"Clear button\"\n            (click)=\"resetInput()\"\n            matTooltip=\"{{ intl?.deleteSearch ?? 'Clear search' }}\">\n            <mat-icon>close</mat-icon>\n        </button>\n    } @else {\n        <mat-icon class=\"icon-search-bar\" aria-hidden=\"false\" aria-label=\"Search icon\" fontIcon=\"search\" />\n    }\n}\n", styles: ["ngx-search-bar-container{display:flex;flex:1 1 auto;max-width:var(--ngx-search-bar-container-max-width, 400px);align-items:center;block-size:var(--ngx-search-bar-container-block-size, 3rem);border-radius:var(--ngx-search-bar-container-radius, 2rem);padding-inline-start:var(--ngx-search-bar-container-padding-inline-start, 1.125rem);padding-inline-end:var(--ngx-search-bar-container-padding-inline-end, .25rem);background-color:var(--mat-sys-surface-container-high);gap:var(--ngx-search-bar-container-gap, .125rem)}ngx-search-bar-container:has(button:only-child){width:fit-content;padding:var(--ngx-search-bar-container-folded-padding, 0 .25rem);flex:0}ngx-search-bar-container>input[ngxSearchInput]{font:var(--mat-sys-body-large);letter-spacing:var(--mat-sys-body-large-tracking);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:10px}ngx-search-bar-container>input[ngxSearchInput]::placeholder{color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container mat-icon.icon-search-bar{padding:var(--ngx-search-bar-container-icon-padding, .5rem);color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container [ngxSearchInput]{flex:1;background:none;border:none}ngx-search-bar-container [ngxSearchInput]:focus{outline:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { folded: [{ type: i0.Input, args: [{ isSignal: true, alias: "folded", required: false }] }], searchInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxSearchInputDirective), { isSignal: true }] }] } });
 
+class NgxColumnBarComponent {
+    hasRightContent = computed(() => this.filtersGroup() ?? this.searchBarContainer(), ...(ngDevMode ? [{ debugName: "hasRightContent" }] : []));
+    hasTitle = computed(() => !!this.barTitle(), ...(ngDevMode ? [{ debugName: "hasTitle" }] : []));
+    filtersGroup = contentChild(NgxFiltersGroupComponent, ...(ngDevMode ? [{ debugName: "filtersGroup" }] : []));
+    searchBarContainer = contentChild(NgxSearchBarContainerComponent, ...(ngDevMode ? [{ debugName: "searchBarContainer" }] : []));
+    barTitle = contentChild(NgxBarTitleDirective, ...(ngDevMode ? [{ debugName: "barTitle" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxColumnBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: NgxColumnBarComponent, isStandalone: true, selector: "ngx-column-bar", queries: [{ propertyName: "filtersGroup", first: true, predicate: NgxFiltersGroupComponent, descendants: true, isSignal: true }, { propertyName: "searchBarContainer", first: true, predicate: NgxSearchBarContainerComponent, descendants: true, isSignal: true }, { propertyName: "barTitle", first: true, predicate: NgxBarTitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasTitle()) {\n    <ng-content select=\"[ngxBarTitle]\"></ng-content>\n    <ng-container [ngTemplateOutlet]=\"contentLeft\"></ng-container>\n} @else {\n    <ng-container [ngTemplateOutlet]=\"actionsGroup\"></ng-container>\n}\n\n@if (hasRightContent()) {\n    <div class=\"right\">\n        @if (hasTitle()) {\n            <ng-container [ngTemplateOutlet]=\"actionsGroup\"></ng-container>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"contentLeft\"></ng-container>\n        }\n        <ng-content select=\"ngx-filters-group\"></ng-content>\n        <ng-content select=\"ngx-search-bar-container\"></ng-content>\n        <ng-content select=\"[ngxContentRight]\"></ng-content>\n    </div>\n}\n\n<ng-template #actionsGroup>\n    <ng-content select=\"ngx-actions-group\"></ng-content>\n</ng-template>\n\n<ng-template #contentLeft>\n    <ng-content select=\"[ngxContentLeft]\"></ng-content>\n</ng-template>\n", styles: ["ngx-column-bar{display:flex;align-items:center;min-height:var(--ngx-column-bar-min-height, 3rem);padding:var(--ngx-column-bar-padding, .25rem 0);gap:var(--ngx-column-bar-gap, .75rem)}ngx-column-bar h1,ngx-column-bar h2,ngx-column-bar h3,ngx-column-bar h4,ngx-column-bar h5,ngx-column-bar h6{white-space:nowrap;margin:0;font:var(--mat-sys-title-medium);letter-spacing:var(--mat-sys-title-medium-tracking);color:var(--mat-sys-on-surface-variant);overflow:hidden;min-width:var(--ngx-column-bar-title-min-width, 6ch);text-overflow:ellipsis}ngx-column-bar h1:first-child,ngx-column-bar h2:first-child,ngx-column-bar h3:first-child,ngx-column-bar h4:first-child,ngx-column-bar h5:first-child,ngx-column-bar h6:first-child{margin-inline-start:var(--ngx-column-bar-title-margin-inline-start, .5rem)}ngx-column-bar:has(h1,h2,h3,h4,h5,h6) .right:has(ngx-actions-group) ngx-filters-group{flex:none}ngx-column-bar:has(h1,h2,h3,h4,h5,h6) ngx-actions-group{justify-content:flex-end}ngx-column-bar .right,ngx-column-bar ngx-actions-group{display:flex;align-items:center;gap:var(--ngx-column-bar-elements-gap, .75rem)}ngx-column-bar .right{flex:1;justify-content:flex-end}ngx-column-bar ngx-actions-group{flex:1;min-inline-size:var(--ngx-column-bar-actions-group-min-inline-size, 3rem)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxColumnBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-column-bar', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasTitle()) {\n    <ng-content select=\"[ngxBarTitle]\"></ng-content>\n    <ng-container [ngTemplateOutlet]=\"contentLeft\"></ng-container>\n} @else {\n    <ng-container [ngTemplateOutlet]=\"actionsGroup\"></ng-container>\n}\n\n@if (hasRightContent()) {\n    <div class=\"right\">\n        @if (hasTitle()) {\n            <ng-container [ngTemplateOutlet]=\"actionsGroup\"></ng-container>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"contentLeft\"></ng-container>\n        }\n        <ng-content select=\"ngx-filters-group\"></ng-content>\n        <ng-content select=\"ngx-search-bar-container\"></ng-content>\n        <ng-content select=\"[ngxContentRight]\"></ng-content>\n    </div>\n}\n\n<ng-template #actionsGroup>\n    <ng-content select=\"ngx-actions-group\"></ng-content>\n</ng-template>\n\n<ng-template #contentLeft>\n    <ng-content select=\"[ngxContentLeft]\"></ng-content>\n</ng-template>\n", styles: ["ngx-column-bar{display:flex;align-items:center;min-height:var(--ngx-column-bar-min-height, 3rem);padding:var(--ngx-column-bar-padding, .25rem 0);gap:var(--ngx-column-bar-gap, .75rem)}ngx-column-bar h1,ngx-column-bar h2,ngx-column-bar h3,ngx-column-bar h4,ngx-column-bar h5,ngx-column-bar h6{white-space:nowrap;margin:0;font:var(--mat-sys-title-medium);letter-spacing:var(--mat-sys-title-medium-tracking);color:var(--mat-sys-on-surface-variant);overflow:hidden;min-width:var(--ngx-column-bar-title-min-width, 6ch);text-overflow:ellipsis}ngx-column-bar h1:first-child,ngx-column-bar h2:first-child,ngx-column-bar h3:first-child,ngx-column-bar h4:first-child,ngx-column-bar h5:first-child,ngx-column-bar h6:first-child{margin-inline-start:var(--ngx-column-bar-title-margin-inline-start, .5rem)}ngx-column-bar:has(h1,h2,h3,h4,h5,h6) .right:has(ngx-actions-group) ngx-filters-group{flex:none}ngx-column-bar:has(h1,h2,h3,h4,h5,h6) ngx-actions-group{justify-content:flex-end}ngx-column-bar .right,ngx-column-bar ngx-actions-group{display:flex;align-items:center;gap:var(--ngx-column-bar-elements-gap, .75rem)}ngx-column-bar .right{flex:1;justify-content:flex-end}ngx-column-bar ngx-actions-group{flex:1;min-inline-size:var(--ngx-column-bar-actions-group-min-inline-size, 3rem)}\n"] }]
+        }], propDecorators: { filtersGroup: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxFiltersGroupComponent), { isSignal: true }] }], searchBarContainer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxSearchBarContainerComponent), { isSignal: true }] }], barTitle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxBarTitleDirective), { isSignal: true }] }] } });
+
+class NgxLayoutComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.6", type: NgxLayoutComponent, isStandalone: true, selector: "ngx-layout", ngImport: i0, template: "<ng-content select=\"ngx-app-bar\"></ng-content>\n<ng-content select=\"ngx-main-bar\"></ng-content>\n<!--\n    The ng-content's is not clearly defined yet. The potential use-cases are:\n    - Display GPD bars\n    - Display warnings\n -->\n<div class=\"extra-content\">\n    <ng-content></ng-content>\n</div>\n<section class=\"content\">\n    <ng-content select=\"ngx-panel\"></ng-content>\n</section>\n", styles: [":host{display:flex;flex-direction:column;flex:1 1 0;font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);background-color:var(--mat-sys-surface-container);box-sizing:border-box}:host .extra-content{padding:var(--ngx-layout-extra-content-padding, .25rem 1rem)}:host .extra-content:empty{display:none}:host .content{display:flex;flex:1 1 0;overflow:hidden;gap:var(--ngx-layout-content-gap, .5rem);padding:var(--ngx-layout-content-padding, .25rem 1rem 1rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-layout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"ngx-app-bar\"></ng-content>\n<ng-content select=\"ngx-main-bar\"></ng-content>\n<!--\n    The ng-content's is not clearly defined yet. The potential use-cases are:\n    - Display GPD bars\n    - Display warnings\n -->\n<div class=\"extra-content\">\n    <ng-content></ng-content>\n</div>\n<section class=\"content\">\n    <ng-content select=\"ngx-panel\"></ng-content>\n</section>\n", styles: [":host{display:flex;flex-direction:column;flex:1 1 0;font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);background-color:var(--mat-sys-surface-container);box-sizing:border-box}:host .extra-content{padding:var(--ngx-layout-extra-content-padding, .25rem 1rem)}:host .extra-content:empty{display:none}:host .content{display:flex;flex:1 1 0;overflow:hidden;gap:var(--ngx-layout-content-gap, .5rem);padding:var(--ngx-layout-content-padding, .25rem 1rem 1rem)}\n"] }]
+        }] });
+
+class NgxMainBarComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxMainBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.6", type: NgxMainBarComponent, isStandalone: true, selector: "ngx-main-bar", ngImport: i0, template: "<ng-content select=\"ngx-actions-group\"></ng-content>\n<ng-content select=\"[ngxContentLeft]\"></ng-content>\n<div class=\"right\">\n    <ng-content select=\"ngx-filters-group\"></ng-content>\n    <ng-content select=\"ngx-search-bar-container\"></ng-content>\n    <ng-content select=\"[ngxContentRight]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:center;padding:var(--ngx-main-bar-padding, .25rem 1rem);gap:var(--ngx-main-bar-gap, .75rem)}:host .right{flex:1;display:flex;justify-content:flex-end;gap:var(--ngx-main-bar-right-gap, .75rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxMainBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-main-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"ngx-actions-group\"></ng-content>\n<ng-content select=\"[ngxContentLeft]\"></ng-content>\n<div class=\"right\">\n    <ng-content select=\"ngx-filters-group\"></ng-content>\n    <ng-content select=\"ngx-search-bar-container\"></ng-content>\n    <ng-content select=\"[ngxContentRight]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:center;padding:var(--ngx-main-bar-padding, .25rem 1rem);gap:var(--ngx-main-bar-gap, .75rem)}:host .right{flex:1;display:flex;justify-content:flex-end;gap:var(--ngx-main-bar-right-gap, .75rem)}\n"] }]
+        }] });
+
+class NgxPanelComponent {
+    appearance = input(undefined, ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    contentPadding = input(undefined, ...(ngDevMode ? [{ debugName: "contentPadding" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: NgxPanelComponent, isStandalone: true, selector: "ngx-panel", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.appearance": "this.appearance()" } }, ngImport: i0, template: "<ng-content select=\"ngx-panel-bar\"></ng-content>\n<section class=\"content\" [class.no-padding]=\"contentPadding() === 'none'\">\n    <ng-content></ng-content>\n</section>\n", styles: ["ngx-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;block-size:100%;border-radius:var(--ngx-panel-radius, 2rem);padding:var(--ngx-panel-padding, .25rem);background-color:var(--mat-sys-surface-container-lowest);min-width:min-content}ngx-panel[appearance=transparent]{background-color:transparent}ngx-panel .content{overflow:auto;display:flex;flex-direction:column;gap:var(--ngx-panel-content-gap, .5rem);padding:var(--ngx-panel-content-padding, .25rem .75rem);flex:1}ngx-panel .content:has(>ngx-column){padding:0;flex-direction:row;gap:var(--ngx-panel-content-column-gap, 1rem)}ngx-panel .content:has(>ngx-column) ngx-column+ngx-column:before{position:absolute;content:\"\";display:block;width:var(--ngx-panel-content-column-divider-width, 1px);background-color:var(--mat-sys-outline-variant);inset-block:0;inset-inline-start:var(--ngx-panel-content-divider-inset-inline-start, -8.5px)}ngx-panel .content:has(>ngx-column) ngx-column:first-child{margin-inline-start:var(--ngx-panel-first-column-margin-inline-start, .25rem)}ngx-panel .content:has(>ngx-column) ngx-column:last-child{margin-inline-end:var(--ngx-panel-last-column-margin-inline-end, .25rem)}ngx-panel .content.no-padding{padding:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-panel', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        '[attr.appearance]': 'this.appearance()'
+                    }, template: "<ng-content select=\"ngx-panel-bar\"></ng-content>\n<section class=\"content\" [class.no-padding]=\"contentPadding() === 'none'\">\n    <ng-content></ng-content>\n</section>\n", styles: ["ngx-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;block-size:100%;border-radius:var(--ngx-panel-radius, 2rem);padding:var(--ngx-panel-padding, .25rem);background-color:var(--mat-sys-surface-container-lowest);min-width:min-content}ngx-panel[appearance=transparent]{background-color:transparent}ngx-panel .content{overflow:auto;display:flex;flex-direction:column;gap:var(--ngx-panel-content-gap, .5rem);padding:var(--ngx-panel-content-padding, .25rem .75rem);flex:1}ngx-panel .content:has(>ngx-column){padding:0;flex-direction:row;gap:var(--ngx-panel-content-column-gap, 1rem)}ngx-panel .content:has(>ngx-column) ngx-column+ngx-column:before{position:absolute;content:\"\";display:block;width:var(--ngx-panel-content-column-divider-width, 1px);background-color:var(--mat-sys-outline-variant);inset-block:0;inset-inline-start:var(--ngx-panel-content-divider-inset-inline-start, -8.5px)}ngx-panel .content:has(>ngx-column) ngx-column:first-child{margin-inline-start:var(--ngx-panel-first-column-margin-inline-start, .25rem)}ngx-panel .content:has(>ngx-column) ngx-column:last-child{margin-inline-end:var(--ngx-panel-last-column-margin-inline-end, .25rem)}ngx-panel .content.no-padding{padding:0}\n"] }]
+        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }] } });
+
+class NgxPanelBarComponent {
+    // inputs
+    hasBackButton = input(...(ngDevMode ? [undefined, { debugName: "hasBackButton" }] : []));
+    closable = input(...(ngDevMode ? [undefined, { debugName: "closable" }] : []));
+    // output
+    backClicked = output();
+    closeClicked = output();
+    intl = inject(NgxLayoutIntl, { optional: true });
+    hasRightContent = computed(() => !!(this.searchBarContainer()
+        ?? this.filtersGroup()
+        ?? this.closable()
+        ?? (!this.hasTitle() && this.actionsGroup())), ...(ngDevMode ? [{ debugName: "hasRightContent" }] : []));
+    hasTitle = computed(() => !!this.barTitle(), ...(ngDevMode ? [{ debugName: "hasTitle" }] : []));
+    actionsGroup = contentChild(NgxActionsGroupComponent, ...(ngDevMode ? [{ debugName: "actionsGroup" }] : []));
+    filtersGroup = contentChild(NgxFiltersGroupComponent, ...(ngDevMode ? [{ debugName: "filtersGroup" }] : []));
+    searchBarContainer = contentChild(NgxSearchBarContainerComponent, ...(ngDevMode ? [{ debugName: "searchBarContainer" }] : []));
+    barTitle = contentChild(NgxBarTitleDirective, ...(ngDevMode ? [{ debugName: "barTitle" }] : []));
+    emitBackClicked() {
+        this.backClicked.emit();
+    }
+    emitCloseClicked() {
+        this.closeClicked.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxPanelBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: NgxPanelBarComponent, isStandalone: true, selector: "ngx-panel-bar", inputs: { hasBackButton: { classPropertyName: "hasBackButton", publicName: "hasBackButton", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backClicked: "backClicked", closeClicked: "closeClicked" }, queries: [{ propertyName: "actionsGroup", first: true, predicate: NgxActionsGroupComponent, descendants: true, isSignal: true }, { propertyName: "filtersGroup", first: true, predicate: NgxFiltersGroupComponent, descendants: true, isSignal: true }, { propertyName: "searchBarContainer", first: true, predicate: NgxSearchBarContainerComponent, descendants: true, isSignal: true }, { propertyName: "barTitle", first: true, predicate: NgxBarTitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasBackButton()) {\n    <button\n        mat-icon-button\n        aria-label=\"Back button\"\n        matTooltip=\"{{ intl?.back ?? 'Back' }}\"\n        (click)=\"emitBackClicked()\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n}\n\n@if (hasTitle()) {\n    <ng-content select=\"[ngxBarTitle]\"></ng-content>\n    <ng-container [ngTemplateOutlet]=\"contentLeft\"></ng-container>\n} @else {\n    <ng-container [ngTemplateOutlet]=\"actionsGroup\"></ng-container>\n}\n\n@if (hasRightContent()) {\n    <div class=\"right\">\n        @if (hasTitle()) {\n            <ng-container [ngTemplateOutlet]=\"actionsGroup\"></ng-container>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"contentLeft\"></ng-container>\n        }\n        <ng-content select=\"ngx-filters-group\"></ng-content>\n        <ng-content select=\"ngx-search-bar-container\"></ng-content>\n        <ng-content select=\"[ngxContentRight]\"></ng-content>\n        @if (closable()) {\n            <button\n                mat-icon-button\n                class=\"close-button\"\n                aria-label=\"Close button\"\n                matTooltip=\"{{ intl?.close ?? 'Close' }}\"\n                (click)=\"emitCloseClicked()\">\n                <mat-icon>close</mat-icon>\n            </button>\n        }\n    </div>\n}\n\n<ng-template #actionsGroup>\n    <ng-content select=\"ngx-actions-group\"></ng-content>\n</ng-template>\n\n<ng-template #contentLeft>\n    <ng-content select=\"[ngxContentLeft]\"></ng-content>\n</ng-template>\n", styles: ["ngx-panel-bar{display:flex;align-items:center;padding:var(--ngx-panel-bar-padding, .25rem);gap:var(--ngx-panel-bar-gap, .75rem);min-height:var(--ngx-panel-bar-min-height, 3rem);flex-wrap:nowrap}ngx-panel-bar h1,ngx-panel-bar h2,ngx-panel-bar h3,ngx-panel-bar h4,ngx-panel-bar h5,ngx-panel-bar h6{white-space:nowrap;margin:0;font:var(--mat-sys-title-large);letter-spacing:var(--mat-sys-title-large-tracking);color:var(--mat-sys-on-surface-variant);overflow:hidden;min-width:var(--ngx-panel-bar-title-min-width, 6ch);text-overflow:ellipsis}ngx-panel-bar h1:first-child,ngx-panel-bar h2:first-child,ngx-panel-bar h3:first-child,ngx-panel-bar h4:first-child,ngx-panel-bar h5:first-child,ngx-panel-bar h6:first-child{padding-inline-start:var(--ngx-panel-bar-title-first-child-padding-start, .5rem)}ngx-panel-bar:has(h1,h2,h3,h4,h5,h6) .right:has(ngx-actions-group) ngx-filters-group{flex:none}ngx-panel-bar:has(h1,h2,h3,h4,h5,h6) ngx-actions-group{justify-content:flex-end}ngx-panel-bar .right,ngx-panel-bar ngx-actions-group{display:flex;align-items:center;gap:var(--ngx-panel-bar-elements-gap, .75rem)}ngx-panel-bar .right{flex:1;justify-content:flex-end}ngx-panel-bar ngx-actions-group{flex:1;min-inline-size:var(--ngx-panel-bar-actions-group-min-inline-size, 3rem)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxPanelBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-panel-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, MatIconButton, MatTooltip, NgTemplateOutlet], template: "@if (hasBackButton()) {\n    <button\n        mat-icon-button\n        aria-label=\"Back button\"\n        matTooltip=\"{{ intl?.back ?? 'Back' }}\"\n        (click)=\"emitBackClicked()\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n}\n\n@if (hasTitle()) {\n    <ng-content select=\"[ngxBarTitle]\"></ng-content>\n    <ng-container [ngTemplateOutlet]=\"contentLeft\"></ng-container>\n} @else {\n    <ng-container [ngTemplateOutlet]=\"actionsGroup\"></ng-container>\n}\n\n@if (hasRightContent()) {\n    <div class=\"right\">\n        @if (hasTitle()) {\n            <ng-container [ngTemplateOutlet]=\"actionsGroup\"></ng-container>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"contentLeft\"></ng-container>\n        }\n        <ng-content select=\"ngx-filters-group\"></ng-content>\n        <ng-content select=\"ngx-search-bar-container\"></ng-content>\n        <ng-content select=\"[ngxContentRight]\"></ng-content>\n        @if (closable()) {\n            <button\n                mat-icon-button\n                class=\"close-button\"\n                aria-label=\"Close button\"\n                matTooltip=\"{{ intl?.close ?? 'Close' }}\"\n                (click)=\"emitCloseClicked()\">\n                <mat-icon>close</mat-icon>\n            </button>\n        }\n    </div>\n}\n\n<ng-template #actionsGroup>\n    <ng-content select=\"ngx-actions-group\"></ng-content>\n</ng-template>\n\n<ng-template #contentLeft>\n    <ng-content select=\"[ngxContentLeft]\"></ng-content>\n</ng-template>\n", styles: ["ngx-panel-bar{display:flex;align-items:center;padding:var(--ngx-panel-bar-padding, .25rem);gap:var(--ngx-panel-bar-gap, .75rem);min-height:var(--ngx-panel-bar-min-height, 3rem);flex-wrap:nowrap}ngx-panel-bar h1,ngx-panel-bar h2,ngx-panel-bar h3,ngx-panel-bar h4,ngx-panel-bar h5,ngx-panel-bar h6{white-space:nowrap;margin:0;font:var(--mat-sys-title-large);letter-spacing:var(--mat-sys-title-large-tracking);color:var(--mat-sys-on-surface-variant);overflow:hidden;min-width:var(--ngx-panel-bar-title-min-width, 6ch);text-overflow:ellipsis}ngx-panel-bar h1:first-child,ngx-panel-bar h2:first-child,ngx-panel-bar h3:first-child,ngx-panel-bar h4:first-child,ngx-panel-bar h5:first-child,ngx-panel-bar h6:first-child{padding-inline-start:var(--ngx-panel-bar-title-first-child-padding-start, .5rem)}ngx-panel-bar:has(h1,h2,h3,h4,h5,h6) .right:has(ngx-actions-group) ngx-filters-group{flex:none}ngx-panel-bar:has(h1,h2,h3,h4,h5,h6) ngx-actions-group{justify-content:flex-end}ngx-panel-bar .right,ngx-panel-bar ngx-actions-group{display:flex;align-items:center;gap:var(--ngx-panel-bar-elements-gap, .75rem)}ngx-panel-bar .right{flex:1;justify-content:flex-end}ngx-panel-bar ngx-actions-group{flex:1;min-inline-size:var(--ngx-panel-bar-actions-group-min-inline-size, 3rem)}\n"] }]
+        }], propDecorators: { hasBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackButton", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], backClicked: [{ type: i0.Output, args: ["backClicked"] }], closeClicked: [{ type: i0.Output, args: ["closeClicked"] }], actionsGroup: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxActionsGroupComponent), { isSignal: true }] }], filtersGroup: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxFiltersGroupComponent), { isSignal: true }] }], searchBarContainer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxSearchBarContainerComponent), { isSignal: true }] }], barTitle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxBarTitleDirective), { isSignal: true }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgxActionsGroupComponent, NgxAppBarComponent, NgxLayoutComponent, NgxLayoutIntl, NgxMainBarComponent, NgxPanelComponent, NgxSearchBarContainerComponent, NgxSearchInputDirective, provideNgxLayout, resizeSignal };
+export { NgxActionDirective, NgxActionsGroupComponent, NgxAppBarComponent, NgxBarTitleDirective, NgxColumnBarComponent, NgxColumnComponent, NgxFilterDirective, NgxFilterToggleDirective, NgxFiltersGroupComponent, NgxLayoutComponent, NgxLayoutIntl, NgxMainBarComponent, NgxPanelBarComponent, NgxPanelComponent, NgxSearchBarContainerComponent, NgxSearchInputDirective, provideNgxLayout };
 //# sourceMappingURL=hug-ngx-layout.mjs.map