@hug/ngx-layout 21.0.2 → 22.0.0-alpha.2

package/fesm2022/hug-ngx-layout.mjs

@@ -1,22 +1,39 @@
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, ElementRef, Input, ViewChild, ContentChild, Output, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
-import { MatIconButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
-import { MatDrawer, MatDrawerContainer, MatDrawerContent } from '@angular/material/sidenav';
-import { MatToolbar } from '@angular/material/toolbar';
-import { MatTooltip } from '@angular/material/tooltip';
-import { NgxAbstractIntl, provideNgxIntl, NgxMediaService } from '@hug/ngx-core';
-import { NgxSidenavService } from '@hug/ngx-sidenav';
+import { Injectable, signal, effect, computed, inject, contentChildren, ElementRef, viewChild, Renderer2, ChangeDetectionStrategy, ViewEncapsulation, Component, input, output, InjectionToken, TemplateRef, forwardRef, Directive, model, 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 { NgxAbstractIntl, provideNgxIntl } from '@hug/ngx-core';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { NgTemplateOutlet, LowerCasePipe } from '@angular/common';
+import * as i3$1 from '@angular/forms';
+import { FormsModule, NgControl } from '@angular/forms';
+import * as i4 from '@angular/material/badge';
+import { MatBadgeModule } from '@angular/material/badge';
+import * as i1$2 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i2$1 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 /**
  * Data for internationalization
  */
 class NgxLayoutIntl extends NgxAbstractIntl {
-    closeLabel = '';
-    backLabel = '';
-    sideFilterLabel = '';
+    help = '';
+    back = '';
+    deleteSearch = '';
+    openSearchBar = '';
+    moreActions = '';
+    allFilters = '';
+    filters = '';
+    actives = '';
+    reset = '';
     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 });
 }
@@ -32,153 +49,448 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  */
 const provideNgxLayout = (options) => provideNgxIntl(NgxLayoutIntl, options?.translationsPath ?? 'translations/ngx-layout', options?.customIntl ?? NgxLayoutIntl);
 
-class NgxLayoutComponent {
-    toolbarColor = 'primary';
-    editorToolbarId = 'editor-toolbar';
-    layoutToolbarExternal;
-    layoutPrimaryActionExternal;
-    layoutActionsExternal;
-    layoutInfoBoxesExternal;
-    layoutRightExternal;
-    closeButtonClicked = new EventEmitter();
-    backButtonClicked = new EventEmitter();
-    sideFilterClosed = new EventEmitter();
-    sideFilterOpened = new EventEmitter();
-    layoutToolbarContent;
-    layoutPrimaryActionContent;
-    layoutActionsContent;
-    layoutInfoBoxesContent;
-    layoutRightContent;
-    sideFilter;
+const buttonGap = 12;
+const buttonDimensions = 40;
+/**
+ *
+ * @param element
+ * @param destroyRef
+ * @param box
+ * @param defaultSize
+ */
+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;
+};
+class NgxActionsGroupComponent {
+    hiddenActions = computed(() => {
+        const maxVisible = this.getMaxVisibleAction(this.hostWidth());
+        return this.iconButtons().slice(maxVisible);
+    }, ...(ngDevMode ? [{ debugName: "hiddenActions" }] : []));
     intl = inject(NgxLayoutIntl, { optional: true });
-    mediaService = inject(NgxMediaService);
-    sidenavService = inject(NgxSidenavService);
-    elementRef = inject(ElementRef);
-    get layoutToolbar() {
-        return this.layoutToolbarExternal ?? this.layoutToolbarContent;
+    iconButtons = contentChildren(MatIconButton, { ...(ngDevMode ? { debugName: "iconButtons" } : {}), read: ElementRef });
+    container = viewChild.required('container');
+    hiddenContainer = viewChild.required('hiddenContainer');
+    hostElement = inject(ElementRef);
+    renderer = inject(Renderer2);
+    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);
+    }, ...(ngDevMode ? [{ debugName: "visibleActions" }] : []));
+    constructor() {
+        effect(() => {
+            const buttons = this.iconButtons();
+            if (buttons.length === 0) {
+                return;
+            }
+            const visibleButtons = this.visibleActions();
+            const containerEl = this.container();
+            visibleButtons.forEach(button => {
+                const element = button.nativeElement;
+                containerEl.nativeElement.appendChild(element);
+            });
+            const hiddenButtons = this.hiddenActions();
+            const hiddenContainerEl = this.hiddenContainer();
+            if (hiddenButtons.length > 0) {
+                hiddenButtons.forEach(button => {
+                    const element = button.nativeElement;
+                    const hasMenu = element.classList.contains('mat-mdc-menu-trigger');
+                    if (hasMenu) {
+                        this.renderer.listen(element, 'click', (event) => {
+                            event.stopPropagation();
+                        });
+                    }
+                    hiddenContainerEl.nativeElement.appendChild(element);
+                });
+            }
+        });
     }
-    get layoutPrimaryAction() {
-        return this.layoutPrimaryActionExternal ?? this.layoutPrimaryActionContent;
+    getMaxVisibleAction(width) {
+        const maxNumberOfActions = Math.floor(width / (buttonDimensions + buttonGap));
+        const maxVisibleActions = Math.max(1, maxNumberOfActions);
+        const totalButtons = this.iconButtons().length;
+        if (maxVisibleActions >= totalButtons) {
+            return totalButtons;
+        }
+        // -1 => Allows for the more button to be displayed
+        return maxVisibleActions - 1;
     }
-    get layoutActions() {
-        return this.layoutActionsExternal ?? this.layoutActionsContent;
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxActionsGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-actions-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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 }] }] } });
+
+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" }] : []));
+    goBack = output();
+    intl = inject(NgxLayoutIntl, { optional: true });
+    helpPopup;
+    openHelp() {
+        const params = [
+            `height=${screen.height}`,
+            `width=${screen.width}`,
+            'fullscreen=yes'
+        ].join(',');
+        if (this.helpPopup) {
+            this.helpPopup.close();
+        }
+        this.helpPopup = window.open(this.helpUrl(), 'help_popup', params) ?? undefined;
+        this.helpPopup?.moveTo(0, 0);
     }
-    get layoutInfoBoxes() {
-        return this.layoutInfoBoxesExternal ?? this.layoutInfoBoxesContent;
+    triggerGoBack() {
+        this.goBack.emit();
     }
-    get layoutRight() {
-        const value = this.layoutRightExternal ?? this.layoutRightContent;
-        if (!value) {
-            this.elementRef.nativeElement.setAttribute('no-right', 'true');
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxAppBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-app-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, MatButtonModule, MatTooltipModule], 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"] }] } });
+
+// 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.1", ngImport: i0, type: NgxFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: NgxFilterDirective, isStandalone: true, selector: "ng-template[ngx-filter]", 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: NgxFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[ngx-filter]',
+                    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.1", ngImport: i0, type: NgxFilterToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: NgxFilterToggleDirective, isStandalone: true, selector: "ng-template[ngx-filter-toggle]", 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.1", ngImport: i0, type: NgxFilterToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[ngx-filter-toggle]',
+                    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;
         }
-        else {
-            this.elementRef.nativeElement.removeAttribute('no-right');
+        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 value;
-    }
-    _withSidenav = false;
-    set withSidenav(value) {
-        this._withSidenav = coerceBooleanProperty(value);
-    }
-    get withSidenav() {
-        return this._withSidenav;
-    }
-    _keepFilterButtonDisplayed = true;
-    set keepFilterButtonDisplayed(value) {
-        this._keepFilterButtonDisplayed = coerceBooleanProperty(value);
+        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();
     }
-    get keepFilterButtonDisplayed() {
-        return this._keepFilterButtonDisplayed;
+    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;
     }
-    _withCloseButton = false;
-    set withCloseButton(value) {
-        this._withCloseButton = coerceBooleanProperty(value);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxFiltersGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", 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        <mat-chip-set>\n            @if (this.visibleFilters().length) {\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            }\n        </mat-chip-set>\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        [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n        [cdkConnectedOverlayViewportMargin]=\"32\">\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    </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-border-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 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)}.filter-group--overlay{display:flex;flex-direction:column;background-color:var(--mat-sys-surface-container-high);border-radius:var(--ngx-filters-group-overlay-border-radius, .5rem);overflow:hidden}.filter-group--overlay mat-slide-toggle>*{width:100%;justify-content:space-between}.filter-group--overlay mat-slide-toggle>* label{margin:0}.filter-group--overlay{--filter-padding: var(--ngx-filters-group-overlay-filter-padding, 1rem)}.filter-group--overlay .filters--title{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(--filter-padding);padding-block:calc(var(--filter-padding) / 4)}.filter-group--overlay .filters--content{min-width:18.75rem;overflow:auto;display:flex;flex-direction:column;justify-items:stretch;gap:var(--ngx-filters-group-overlay-filter-gap, .5rem);padding:var(--filter-padding)}.filter-group--overlay .filters--content .filter{display:flex;flex-direction:column;gap:var(--ngx-filters-group-overlay-filter-gap, .5rem);padding-block:var(--filter-padding)}.filter-group--overlay .filters--content .filter:not(:last-child){border-bottom:1px dashed var(--mat-sys-outline-variant)}.filter-group--overlay .filters--content .filter:last-child{padding-block-end:unset}.filter-group--overlay .filters--content .filter:first-child{padding-block-start:unset}.filter-group--overlay .filters--content .filter .title{display:inline-flex;justify-content:space-between;align-items:baseline}.filter-group--overlay .filters--content .filter .title .label{font:var(--mat-sys-label-large)}.filter-group--overlay .filters--content .filter .title .value{font:var(--mat-sys-label-medium);max-width:var(--ngx-filters-group-overlay-max-width, 27ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filter-group--overlay .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: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$2.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: i1$2.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: i1$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: i1$2.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { 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: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i2$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4.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.1", ngImport: i0, type: NgxFiltersGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-filters-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatIcon,
+                        MatIconButton,
+                        MatChipsModule,
+                        MatTooltip,
+                        NgTemplateOutlet,
+                        CdkConnectedOverlay,
+                        CdkOverlayOrigin,
+                        MatSlideToggleModule,
+                        FormsModule,
+                        MatBadgeModule,
+                        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        <mat-chip-set>\n            @if (this.visibleFilters().length) {\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            }\n        </mat-chip-set>\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        [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n        [cdkConnectedOverlayViewportMargin]=\"32\">\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    </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-border-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 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)}.filter-group--overlay{display:flex;flex-direction:column;background-color:var(--mat-sys-surface-container-high);border-radius:var(--ngx-filters-group-overlay-border-radius, .5rem);overflow:hidden}.filter-group--overlay mat-slide-toggle>*{width:100%;justify-content:space-between}.filter-group--overlay mat-slide-toggle>* label{margin:0}.filter-group--overlay{--filter-padding: var(--ngx-filters-group-overlay-filter-padding, 1rem)}.filter-group--overlay .filters--title{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(--filter-padding);padding-block:calc(var(--filter-padding) / 4)}.filter-group--overlay .filters--content{min-width:18.75rem;overflow:auto;display:flex;flex-direction:column;justify-items:stretch;gap:var(--ngx-filters-group-overlay-filter-gap, .5rem);padding:var(--filter-padding)}.filter-group--overlay .filters--content .filter{display:flex;flex-direction:column;gap:var(--ngx-filters-group-overlay-filter-gap, .5rem);padding-block:var(--filter-padding)}.filter-group--overlay .filters--content .filter:not(:last-child){border-bottom:1px dashed var(--mat-sys-outline-variant)}.filter-group--overlay .filters--content .filter:last-child{padding-block-end:unset}.filter-group--overlay .filters--content .filter:first-child{padding-block-start:unset}.filter-group--overlay .filters--content .filter .title{display:inline-flex;justify-content:space-between;align-items:baseline}.filter-group--overlay .filters--content .filter .title .label{font:var(--mat-sys-label-large)}.filter-group--overlay .filters--content .filter .title .value{font:var(--mat-sys-label-medium);max-width:var(--ngx-filters-group-overlay-max-width, 27ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filter-group--overlay .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 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", 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<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"] }]
+        }] });
+
+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 });
+}
+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"] }]
+        }] });
+
+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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", 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()',
+                        // 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 }] }] } });
+
+class NgxSearchInputDirective {
+    blurred = signal(false, ...(ngDevMode ? [{ debugName: "blurred" }] : []));
+    value;
+    ngControl = inject(NgControl);
+    input = inject(ElementRef);
+    control = this.ngControl.control;
+    constructor() {
+        this.value = toSignal(this.control.valueChanges, { initialValue: '' });
     }
-    get withCloseButton() {
-        return this._withCloseButton;
+    focus() {
+        this.input.nativeElement.focus();
     }
-    _withBackButton = false;
-    set withBackButton(value) {
-        this._withBackButton = coerceBooleanProperty(value);
+    reset() {
+        this.control.reset();
     }
-    get withBackButton() {
-        return this._withBackButton;
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxSearchInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[ngx-search-input]',
+                    /* eslint-disable @typescript-eslint/naming-convention */
+                    host: {
+                        '(blur)': 'blurred.set(true);',
+                        '(focus)': 'blurred.set(false);'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+// type SearchBarContainerSize = 'medium' | 'small';
+class NgxSearchBarContainerComponent {
+    // inputs
+    folded = input(false, ...(ngDevMode ? [{ debugName: "folded" }] : []));
+    /*
+    protected size = input<SearchBarContainerSize>('medium');
+    protected sizeButtonAttributeName = input<string>();
+    protected sizeButtonAttributeValue = input<string>();
+    */
+    intl = inject(NgxLayoutIntl, { optional: true });
+    manualFoldingState = signal(true, ...(ngDevMode ? [{ debugName: "manualFoldingState" }] : []));
+    isFolded = computed(() => this.folded() && this.manualFoldingState() && !this.searchText(), ...(ngDevMode ? [{ debugName: "isFolded" }] : []));
+    searchInput = contentChild(NgxSearchInputDirective, ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
+    searchText = computed(() => this.searchInput()?.value(), ...(ngDevMode ? [{ debugName: "searchText" }] : []));
+    /*
+    private hostElement = inject(ElementRef);
+    private renderer = inject(Renderer2);
+    */
+    constructor() {
+        /*
+        afterRender(() => {
+            const containerElement = this.hostElement.nativeElement;
+            const buttons = containerElement.querySelectorAll('button') as NodeListOf<HTMLElement>;
+
+            buttons.forEach((button: HTMLElement) => {
+                if (this.sizeButtonAttributeName()?.trim() && this.sizeButtonAttributeValue()?.trim()) {
+                    this.renderer.setAttribute(button, this.sizeButtonAttributeName(), this.sizeButtonAttributeValue());
+                }
+
+            });
+        });
+        */
+        afterRenderEffect(() => {
+            const searchInput = this.searchInput();
+            if (!searchInput) {
+                return;
+            }
+            if (!this.isFolded()) {
+                searchInput.focus();
+            }
+        });
+        effect(() => {
+            const baseFoldStatus = this.folded();
+            if (baseFoldStatus) {
+                const searchText = untracked(this.searchText);
+                const blurred = this.searchInput()?.blurred();
+                if (blurred && !searchText) {
+                    this.manualFoldingState.set(true);
+                }
+            }
+        });
     }
-    closeSideFilter() {
-        void this.sideFilter?.close();
+    toggleFolded() {
+        this.manualFoldingState.update(folded => !folded);
     }
-    openSideFilter() {
-        void this.sideFilter?.open();
+    resetInput() {
+        const searchInput = this.searchInput();
+        if (!searchInput) {
+            return;
+        }
+        searchInput.reset();
+        searchInput.focus();
     }
-    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: "17.0.0", version: "21.1.1", type: NgxLayoutComponent, isStandalone: true, selector: "ngx-layout", inputs: { toolbarColor: "toolbarColor", editorToolbarId: "editorToolbarId", layoutToolbarExternal: "layoutToolbarExternal", layoutPrimaryActionExternal: "layoutPrimaryActionExternal", layoutActionsExternal: "layoutActionsExternal", layoutInfoBoxesExternal: "layoutInfoBoxesExternal", layoutRightExternal: "layoutRightExternal", withSidenav: "withSidenav", keepFilterButtonDisplayed: "keepFilterButtonDisplayed", withCloseButton: "withCloseButton", withBackButton: "withBackButton" }, outputs: { closeButtonClicked: "closeButtonClicked", backButtonClicked: "backButtonClicked", sideFilterClosed: "sideFilterClosed", sideFilterOpened: "sideFilterOpened" }, queries: [{ propertyName: "layoutToolbarContent", first: true, predicate: ["layoutToolbar"], descendants: true }, { propertyName: "layoutPrimaryActionContent", first: true, predicate: ["layoutPrimaryAction"], descendants: true }, { propertyName: "layoutActionsContent", first: true, predicate: ["layoutActions"], descendants: true }, { propertyName: "layoutInfoBoxesContent", first: true, predicate: ["layoutInfoBoxes"], descendants: true }, { propertyName: "layoutRightContent", first: true, predicate: ["layoutRight"], descendants: true }], viewQueries: [{ propertyName: "sideFilter", first: true, predicate: ["sideFilter"], descendants: true }], ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n    <div class=\"main-content\">\n        @if (\n            layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\n        ) {\n            <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        <ng-content></ng-content>\n    </div>\n    @if ((mediaService.isHandset$ | async) && actionsToolbar) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar\n        id=\"actions-toolbar\"\n        class=\"actions\"\n        [color]=\"toolbarColor\"\n        [class.bottom]=\"mediaService.isHandset$ | async\">\n        @if (layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n            <span class=\"primary-action-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        @if (layoutActions) {\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        }\n        @if (layoutInfoBoxes && (mediaService.isHandset$ | async) === false) {\n            <div class=\"info-boxes-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n            </div>\n        }\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    @if (layoutToolbar || layoutRight) {\n        <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\">\n            @if (withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false) {\n                <button type=\"button\" id=\"sidenav-button\" mat-icon-button (click)=\"sidenavService.toggle()\">\n                    <mat-icon>menu</mat-icon>\n                </button>\n            }\n            @if (withBackButton) {\n                <button\n                    type=\"button\"\n                    id=\"back-button\"\n                    mat-icon-button\n                    (click)=\"this.backButtonClicked.emit($event)\"\n                    [matTooltip]=\"intl?.backLabel ?? 'Back'\">\n                    <mat-icon>arrow_back</mat-icon>\n                </button>\n            }\n            <div id=\"toolbar-content-container\">\n                @if (layoutToolbar) {\n                    <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n                }\n            </div>\n            @if (sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight) {\n                <button\n                    type=\"button\"\n                    id=\"filter-button\"\n                    mat-icon-button\n                    (click)=\"sideFilter.toggle()\"\n                    [matTooltip]=\"intl?.sideFilterLabel ?? 'Show/Hide filters'\">\n                    <mat-icon>tune</mat-icon>\n                </button>\n            }\n            @if (withCloseButton) {\n                <button\n                    type=\"button\"\n                    id=\"close-button\"\n                    mat-icon-button\n                    (click)=\"this.closeButtonClicked.emit($event)\"\n                    [matTooltip]=\"intl?.closeLabel ?? 'Close'\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            }\n        </mat-toolbar>\n    }\n\n    @if ((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n    @if (layoutRight) {\n        <mat-drawer-container autosize=\"true\">\n            <mat-drawer-content>\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </mat-drawer-content>\n            <mat-drawer\n                id=\"side-filter\"\n                #sideFilter\n                (closed)=\"sideFilterClosed.emit()\"\n                (openedChange)=\"sideFilterOpened.emit()\"\n                class=\"right\"\n                position=\"end\"\n                [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\"\n                [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\"\n                [opened]=\"(mediaService.isHandset$ | async) === false\">\n                <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n            </mat-drawer>\n        </mat-drawer-container>\n    } @else {\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    }\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left[no-right=true] .main-content{padding:0}ngx-layout mat-sidenav-container{position:absolute;inset:0}ngx-layout mat-drawer-content,ngx-layout mat-sidenav-content{display:flex!important;flex-direction:column}ngx-layout mat-sidenav{width:200px}ngx-layout mat-drawer#side-filter{width:220px}ngx-layout mat-drawer#side-filter.right{padding:.3rem}ngx-layout mat-drawer#side-filter.right [filters-title]{font-size:1.2rem;display:flex;align-items:center;justify-content:space-between;flex:1 1 auto;font-weight:700;padding:.6rem;margin-bottom:.3rem}ngx-layout mat-drawer#side-filter.right [filters-subtitle]{font-size:1rem;display:flex;align-items:center;justify-content:space-between;flex:1 1 auto;font-weight:600;padding:.4rem .6rem;margin-bottom:.3rem;margin-top:.3rem}ngx-layout mat-drawer#side-filter.right [icons-container]{display:flex;align-items:center}ngx-layout mat-drawer#side-filter.right [filters-icon]{cursor:pointer;transition:color .3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-chip-list] mat-chip-listbox{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer#side-filter.right [filters-chip-list] .mat-mdc-chip{position:relative;padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-chip-list] .mat-mdc-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer#side-filter.right [filters-chip-list] .mat-mdc-chip:not([disabled]):hover:before{font-family:Material Icons;content:\"close\";display:flex;align-items:center;justify-content:center;position:absolute;inset:0;font-weight:700;font-size:1.2rem;cursor:pointer;transition:.3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-toggle-group]{display:flex}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle{transition:.3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle mat-icon{margin-right:1rem}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-label-content{text-align:start}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-focus-overlay{height:100%}ngx-layout mat-drawer#side-filter.right mat-form-field{width:100%}ngx-layout mat-drawer#side-filter.right .mat-mdc-form-field-infix{width:inherit}ngx-layout mat-drawer#side-filter.right.mat-drawer-side{box-shadow:-3px 0 5px -1px #0003;z-index:10}ngx-layout mat-drawer-container{flex:1}ngx-layout .mat-toolbar:not(.actions){display:flex;flex-shrink:0;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;z-index:10}ngx-layout .mat-toolbar:not(.actions) #toolbar-content-container{display:flex;flex-grow:1;overflow:hidden}ngx-layout .mat-toolbar:not(.actions) [toolbar-title]{overflow:hidden;text-overflow:ellipsis}ngx-layout .mat-toolbar:not(.actions)>div{display:flex;align-items:center}ngx-layout .mat-toolbar .mat-mdc-icon-button{height:40px;line-height:40px;width:40px;display:flex;justify-content:center;align-items:center;padding:0}ngx-layout .mat-toolbar#actions-toolbar{flex:0 0 auto;height:40px;font-size:inherit;padding-right:0}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container{display:flex;flex:1 1 auto;justify-content:flex-end}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container .info-box{display:flex;flex-grow:0;line-height:40px;padding-left:2rem;padding-right:2rem;box-shadow:-3px 0 5px -1px #0003}ngx-layout .mat-toolbar#actions-toolbar.bottom#actions-toolbar{display:flex;width:100%;justify-content:space-around}ngx-layout .mat-toolbar#actions-toolbar .primary-action-container{z-index:20}ngx-layout .main-content{position:relative;display:flex;flex:1 1 auto;overflow:hidden}ngx-layout .main-content .primary-action-container{position:absolute;z-index:20;opacity:.8;transition:.3s ease-in-out}ngx-layout .main-content .primary-action-container:hover{opacity:1}ngx-layout .main-content .primary-action-container.bottom{right:1rem;bottom:1rem}ngx-layout .main-content .primary-action-container:not(.bottom){top:1rem;left:1rem}ngx-layout ::-webkit-scrollbar{width:12px;height:12px}ngx-layout ::-webkit-scrollbar-thumb{transition:.3s ease-in-out;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    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;flex:1 1 auto;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-folded-container-padding, 0 .25rem);flex:0}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;width:10px}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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxSearchBarContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-layout', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgTemplateOutlet,
-                        AsyncPipe,
-                        MatIconButton,
-                        MatIcon,
-                        MatDrawer,
-                        MatDrawerContainer,
-                        MatDrawerContent,
-                        MatToolbar,
-                        MatTooltip
-                    ], template: "<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n    <div class=\"main-content\">\n        @if (\n            layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\n        ) {\n            <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        <ng-content></ng-content>\n    </div>\n    @if ((mediaService.isHandset$ | async) && actionsToolbar) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar\n        id=\"actions-toolbar\"\n        class=\"actions\"\n        [color]=\"toolbarColor\"\n        [class.bottom]=\"mediaService.isHandset$ | async\">\n        @if (layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n            <span class=\"primary-action-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        @if (layoutActions) {\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        }\n        @if (layoutInfoBoxes && (mediaService.isHandset$ | async) === false) {\n            <div class=\"info-boxes-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n            </div>\n        }\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    @if (layoutToolbar || layoutRight) {\n        <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\">\n            @if (withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false) {\n                <button type=\"button\" id=\"sidenav-button\" mat-icon-button (click)=\"sidenavService.toggle()\">\n                    <mat-icon>menu</mat-icon>\n                </button>\n            }\n            @if (withBackButton) {\n                <button\n                    type=\"button\"\n                    id=\"back-button\"\n                    mat-icon-button\n                    (click)=\"this.backButtonClicked.emit($event)\"\n                    [matTooltip]=\"intl?.backLabel ?? 'Back'\">\n                    <mat-icon>arrow_back</mat-icon>\n                </button>\n            }\n            <div id=\"toolbar-content-container\">\n                @if (layoutToolbar) {\n                    <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n                }\n            </div>\n            @if (sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight) {\n                <button\n                    type=\"button\"\n                    id=\"filter-button\"\n                    mat-icon-button\n                    (click)=\"sideFilter.toggle()\"\n                    [matTooltip]=\"intl?.sideFilterLabel ?? 'Show/Hide filters'\">\n                    <mat-icon>tune</mat-icon>\n                </button>\n            }\n            @if (withCloseButton) {\n                <button\n                    type=\"button\"\n                    id=\"close-button\"\n                    mat-icon-button\n                    (click)=\"this.closeButtonClicked.emit($event)\"\n                    [matTooltip]=\"intl?.closeLabel ?? 'Close'\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            }\n        </mat-toolbar>\n    }\n\n    @if ((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n    @if (layoutRight) {\n        <mat-drawer-container autosize=\"true\">\n            <mat-drawer-content>\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </mat-drawer-content>\n            <mat-drawer\n                id=\"side-filter\"\n                #sideFilter\n                (closed)=\"sideFilterClosed.emit()\"\n                (openedChange)=\"sideFilterOpened.emit()\"\n                class=\"right\"\n                position=\"end\"\n                [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\"\n                [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\"\n                [opened]=\"(mediaService.isHandset$ | async) === false\">\n                <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n            </mat-drawer>\n        </mat-drawer-container>\n    } @else {\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    }\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left[no-right=true] .main-content{padding:0}ngx-layout mat-sidenav-container{position:absolute;inset:0}ngx-layout mat-drawer-content,ngx-layout mat-sidenav-content{display:flex!important;flex-direction:column}ngx-layout mat-sidenav{width:200px}ngx-layout mat-drawer#side-filter{width:220px}ngx-layout mat-drawer#side-filter.right{padding:.3rem}ngx-layout mat-drawer#side-filter.right [filters-title]{font-size:1.2rem;display:flex;align-items:center;justify-content:space-between;flex:1 1 auto;font-weight:700;padding:.6rem;margin-bottom:.3rem}ngx-layout mat-drawer#side-filter.right [filters-subtitle]{font-size:1rem;display:flex;align-items:center;justify-content:space-between;flex:1 1 auto;font-weight:600;padding:.4rem .6rem;margin-bottom:.3rem;margin-top:.3rem}ngx-layout mat-drawer#side-filter.right [icons-container]{display:flex;align-items:center}ngx-layout mat-drawer#side-filter.right [filters-icon]{cursor:pointer;transition:color .3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-chip-list] mat-chip-listbox{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer#side-filter.right [filters-chip-list] .mat-mdc-chip{position:relative;padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-chip-list] .mat-mdc-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer#side-filter.right [filters-chip-list] .mat-mdc-chip:not([disabled]):hover:before{font-family:Material Icons;content:\"close\";display:flex;align-items:center;justify-content:center;position:absolute;inset:0;font-weight:700;font-size:1.2rem;cursor:pointer;transition:.3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-toggle-group]{display:flex}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle{transition:.3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle mat-icon{margin-right:1rem}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-label-content{text-align:start}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-focus-overlay{height:100%}ngx-layout mat-drawer#side-filter.right mat-form-field{width:100%}ngx-layout mat-drawer#side-filter.right .mat-mdc-form-field-infix{width:inherit}ngx-layout mat-drawer#side-filter.right.mat-drawer-side{box-shadow:-3px 0 5px -1px #0003;z-index:10}ngx-layout mat-drawer-container{flex:1}ngx-layout .mat-toolbar:not(.actions){display:flex;flex-shrink:0;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;z-index:10}ngx-layout .mat-toolbar:not(.actions) #toolbar-content-container{display:flex;flex-grow:1;overflow:hidden}ngx-layout .mat-toolbar:not(.actions) [toolbar-title]{overflow:hidden;text-overflow:ellipsis}ngx-layout .mat-toolbar:not(.actions)>div{display:flex;align-items:center}ngx-layout .mat-toolbar .mat-mdc-icon-button{height:40px;line-height:40px;width:40px;display:flex;justify-content:center;align-items:center;padding:0}ngx-layout .mat-toolbar#actions-toolbar{flex:0 0 auto;height:40px;font-size:inherit;padding-right:0}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container{display:flex;flex:1 1 auto;justify-content:flex-end}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container .info-box{display:flex;flex-grow:0;line-height:40px;padding-left:2rem;padding-right:2rem;box-shadow:-3px 0 5px -1px #0003}ngx-layout .mat-toolbar#actions-toolbar.bottom#actions-toolbar{display:flex;width:100%;justify-content:space-around}ngx-layout .mat-toolbar#actions-toolbar .primary-action-container{z-index:20}ngx-layout .main-content{position:relative;display:flex;flex:1 1 auto;overflow:hidden}ngx-layout .main-content .primary-action-container{position:absolute;z-index:20;opacity:.8;transition:.3s ease-in-out}ngx-layout .main-content .primary-action-container:hover{opacity:1}ngx-layout .main-content .primary-action-container.bottom{right:1rem;bottom:1rem}ngx-layout .main-content .primary-action-container:not(.bottom){top:1rem;left:1rem}ngx-layout ::-webkit-scrollbar{width:12px;height:12px}ngx-layout ::-webkit-scrollbar-thumb{transition:.3s ease-in-out;border-radius:6px}\n"] }]
-        }], propDecorators: { toolbarColor: [{
-                type: Input
-            }], editorToolbarId: [{
-                type: Input
-            }], layoutToolbarExternal: [{
-                type: Input
-            }], layoutPrimaryActionExternal: [{
-                type: Input
-            }], layoutActionsExternal: [{
-                type: Input
-            }], layoutInfoBoxesExternal: [{
-                type: Input
-            }], layoutRightExternal: [{
-                type: Input
-            }], closeButtonClicked: [{
-                type: Output
-            }], backButtonClicked: [{
-                type: Output
-            }], sideFilterClosed: [{
-                type: Output
-            }], sideFilterOpened: [{
-                type: Output
-            }], layoutToolbarContent: [{
-                type: ContentChild,
-                args: ['layoutToolbar']
-            }], layoutPrimaryActionContent: [{
-                type: ContentChild,
-                args: ['layoutPrimaryAction']
-            }], layoutActionsContent: [{
-                type: ContentChild,
-                args: ['layoutActions']
-            }], layoutInfoBoxesContent: [{
-                type: ContentChild,
-                args: ['layoutInfoBoxes']
-            }], layoutRightContent: [{
-                type: ContentChild,
-                args: ['layoutRight']
-            }], sideFilter: [{
-                type: ViewChild,
-                args: ['sideFilter']
-            }], withSidenav: [{
-                type: Input
-            }], keepFilterButtonDisplayed: [{
-                type: Input
-            }], withCloseButton: [{
-                type: Input
-            }], withBackButton: [{
-                type: Input
-            }] } });
+            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;flex:1 1 auto;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-folded-container-padding, 0 .25rem);flex:0}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;width:10px}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"] }]
+        }], ctorParameters: () => [], propDecorators: { folded: [{ type: i0.Input, args: [{ isSignal: true, alias: "folded", required: false }] }], searchInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxSearchInputDirective), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgxLayoutComponent, NgxLayoutIntl, provideNgxLayout };
+export { NgxActionsGroupComponent, NgxAppBarComponent, NgxFilterDirective, NgxFilterToggleDirective, NgxFiltersGroupComponent, NgxLayoutComponent, NgxLayoutIntl, NgxMainBarComponent, NgxPanelComponent, NgxSearchBarContainerComponent, NgxSearchInputDirective, provideNgxLayout };
 //# sourceMappingURL=hug-ngx-layout.mjs.map