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

package/fesm2022/hug-ngx-layout.mjs

@@ -1,22 +1,26 @@
-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, computed, inject, contentChildren, ElementRef, viewChild, Renderer2, DestroyRef, effect, ChangeDetectionStrategy, ViewEncapsulation, Component, input, output, Directive, contentChild, afterRenderEffect, untracked } from '@angular/core';
+import * as i2 from '@angular/material/button';
+import { MatIconButton, MatButtonModule } from '@angular/material/button';
+import * as i1$1 from '@angular/material/icon';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
+import * as i1 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i3 from '@angular/material/tooltip';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
+import { NgxAbstractIntl, provideNgxIntl } from '@hug/ngx-core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { NgControl } from '@angular/forms';
 
 /**
  * Data for internationalization
  */
 class NgxLayoutIntl extends NgxAbstractIntl {
-    closeLabel = '';
-    backLabel = '';
-    sideFilterLabel = '';
+    help = '';
+    back = '';
+    deleteSearch = '';
+    openSearchBar = '';
+    moreActions = '';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxLayoutIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxLayoutIntl });
 }
@@ -32,153 +36,275 @@ 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 = (element, destroyRef, box = 'border-box') => {
+    const initialValue = {
+        borderBoxSize: [],
+        contentRect: element.getBoundingClientRect(),
+        contentBoxSize: [],
+        devicePixelContentBoxSize: [],
+        target: element
+    };
+    const value = signal(initialValue, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    const ro = new ResizeObserver(entries => {
+        value.set(entries[0] || initialValue);
+    });
+    ro.observe(element, { box });
+    destroyRef.onDestroy(() => {
+        ro.disconnect();
+    });
+    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;
-    }
-    get layoutPrimaryAction() {
-        return this.layoutPrimaryActionExternal ?? this.layoutPrimaryActionContent;
-    }
-    get layoutActions() {
-        return this.layoutActionsExternal ?? this.layoutActionsContent;
-    }
-    get layoutInfoBoxes() {
-        return this.layoutInfoBoxesExternal ?? this.layoutInfoBoxesContent;
+    iconButtons = contentChildren(MatIconButton, { ...(ngDevMode ? { debugName: "iconButtons" } : {}), read: ElementRef });
+    container = viewChild.required('container');
+    hiddenContainer = viewChild.required('hiddenContainer');
+    hostElement = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    hostSize = resizeSignal(this.hostElement.nativeElement, this.destroyRef);
+    hostWidth = computed(() => this.hostSize().contentRect.width, ...(ngDevMode ? [{ debugName: "hostWidth" }] : []));
+    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 layoutRight() {
-        const value = this.layoutRightExternal ?? this.layoutRightContent;
-        if (!value) {
-            this.elementRef.nativeElement.setAttribute('no-right', 'true');
+    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;
         }
-        else {
-            this.elementRef.nativeElement.removeAttribute('no-right');
-        }
-        return value;
-    }
-    _withSidenav = false;
-    set withSidenav(value) {
-        this._withSidenav = coerceBooleanProperty(value);
-    }
-    get withSidenav() {
-        return this._withSidenav;
+        // -1 => Allows for the more button to be displayed
+        return maxVisibleActions - 1;
     }
-    _keepFilterButtonDisplayed = true;
-    set keepFilterButtonDisplayed(value) {
-        this._keepFilterButtonDisplayed = coerceBooleanProperty(value);
+    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 keepFilterButtonDisplayed() {
-        return this._keepFilterButtonDisplayed;
+    triggerGoBack() {
+        this.goBack.emit();
     }
-    _withCloseButton = false;
-    set withCloseButton(value) {
-        this._withCloseButton = coerceBooleanProperty(value);
+    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"] }] } });
+
+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.toggleFolded();
+                }
+            }
+        });
     }
-    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;align-items:center;block-size:var(--ngx-search-bar-container-block-size, 3rem);border-radius:var(--ngx-search-bar-container-radius, 2rem);padding-inline-start:var(--ngx-search-bar-container-padding-inline-start, 1.125rem);padding-inline-end:var(--ngx-search-bar-container-padding-inline-end, .25rem);background-color:var(--mat-sys-surface-container-high);gap:var(--ngx-search-bar-container-gap, .125rem)}ngx-search-bar-container:has(button:only-child){width:fit-content;padding:var(--ngx-search-bar-folded-container-padding, 0 .25rem)}ngx-search-bar-container>input[ngx-search-input]{font:var(--mat-sys-body-large);letter-spacing:var(--mat-sys-body-large-tracking);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ngx-search-bar-container>input[ngx-search-input]::placeholder{color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container mat-icon.icon-search-bar{padding:var(--ngx-search-bar-icon-padding, .5rem);color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container [ngx-search-input]{flex:1;background:none;border:none}ngx-search-bar-container [ngx-search-input]:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-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;align-items:center;block-size:var(--ngx-search-bar-container-block-size, 3rem);border-radius:var(--ngx-search-bar-container-radius, 2rem);padding-inline-start:var(--ngx-search-bar-container-padding-inline-start, 1.125rem);padding-inline-end:var(--ngx-search-bar-container-padding-inline-end, .25rem);background-color:var(--mat-sys-surface-container-high);gap:var(--ngx-search-bar-container-gap, .125rem)}ngx-search-bar-container:has(button:only-child){width:fit-content;padding:var(--ngx-search-bar-folded-container-padding, 0 .25rem)}ngx-search-bar-container>input[ngx-search-input]{font:var(--mat-sys-body-large);letter-spacing:var(--mat-sys-body-large-tracking);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ngx-search-bar-container>input[ngx-search-input]::placeholder{color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container mat-icon.icon-search-bar{padding:var(--ngx-search-bar-icon-padding, .5rem);color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container [ngx-search-input]{flex:1;background:none;border:none}ngx-search-bar-container [ngx-search-input]:focus{outline:none}\n"] }]
+        }], 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, NgxLayoutComponent, NgxLayoutIntl, NgxMainBarComponent, NgxPanelComponent, NgxSearchBarContainerComponent, NgxSearchInputDirective, provideNgxLayout, resizeSignal };
 //# sourceMappingURL=hug-ngx-layout.mjs.map