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

package/CHANGELOG.md

@@ -1,3 +1,154 @@
+## 22.0.0-alpha.10 (2026-04-22)
+
+### 🐛 Fixes
+
+- **layout:** harmonize the selectors for directives and components #DESIGNSYS-115 ([ce50402](https://github.com/DSI-HUG/ngx-components/commit/ce50402))
+
+### ❤️ Thank You
+
+- Esther Layat
+
+## 22.0.0-alpha.9 (2026-04-22)
+
+### 🐛 Fixes
+
+- **actions-group:** add missing export for action.directive #DESIGNSYS-213 ([0aaf713](https://github.com/DSI-HUG/ngx-components/commit/0aaf713))
+
+### ❤️ Thank You
+
+- Esther Layat
+
+## 22.0.0-alpha.8 (2026-04-22)
+
+### 🐛 Fixes
+
+- **actions-group:** add NgxActionDirective and update content projection #DESIGNSYS-213 ([b137908](https://github.com/DSI-HUG/ngx-components/commit/b137908))
+- **search-bar-container:** remove focus from the input at startup #DESIGNSYS-115 ([8be134b](https://github.com/DSI-HUG/ngx-components/commit/8be134b))
+
+### ❤️ Thank You
+
+- Esther Layat
+
+## 22.0.0-alpha.7 (2026-04-14)
+
+This was a version bump only for @hug/ngx-layout to align it with other projects, there were no code changes.
+
+## 22.0.0-alpha.6 (2026-04-02)
+
+### 🐛 Fixes
+
+- **package:** update versions to 22.0.0-alpha.2 for multiple components ([4f38846](https://github.com/DSI-HUG/ngx-components/commit/4f38846))
+
+### 🌱 Dependencies
+
+- **@hug/ngx-sidenav**: upgraded to `v22.0.0-alpha.3`
+- **@hug/ngx-core**: upgraded to `v22.0.0-alpha.3`
+
+### ❤️ Thank You
+
+- Esther Layat
+
+## 22.0.0-alpha.5 (2026-04-01)
+
+### 🚀 Features
+
+- **column:** add ngx-column component #DESIGNSYS-214 ([b04757f](https://github.com/DSI-HUG/ngx-components/commit/b04757f))
+- **panel-bar:** update title handling and content projection #DESIGNSYS-104 ([39a25bb](https://github.com/DSI-HUG/ngx-components/commit/39a25bb))
+- **main-bar:** add ngxContentLeft and ngxContentRight #DESIGNSYS-102 ([ffa96c6](https://github.com/DSI-HUG/ngx-components/commit/ffa96c6))
+- **column-bar:** add support for ngxContentLeft and ngxContentRight projection #DESIGNSYS-179 ([9c314fc](https://github.com/DSI-HUG/ngx-components/commit/9c314fc))
+
+### 🐛 Fixes
+
+- **search-bar:** correct the variable names #DESIGNSYS-103 ([14d7e32](https://github.com/DSI-HUG/ngx-components/commit/14d7e32))
+- **filters-group:** correct the variable names #DESIGNSYS-177 ([322270a](https://github.com/DSI-HUG/ngx-components/commit/322270a))
+- **layout:** adjust the padding #DESIGNSYS-178 ([eaf75f6](https://github.com/DSI-HUG/ngx-components/commit/eaf75f6))
+- **layout:** wrap ng-content in extra-content div and adjust padding #DESIGNSYS-178 ([7064b0f](https://github.com/DSI-HUG/ngx-components/commit/7064b0f))
+- **panel-bar:** update first-child padding #DESIGNSYS-104 ([ce02016](https://github.com/DSI-HUG/ngx-components/commit/ce02016))
+- **main-bar:** update padding #DESIGNSYS-102 ([ab0c38d](https://github.com/DSI-HUG/ngx-components/commit/ab0c38d))
+- **app-bar:** update padding variable #DESIGNSYS-101 ([5a771a3](https://github.com/DSI-HUG/ngx-components/commit/5a771a3))
+- **app-bar:** add padding to the sides and simplify the padding #DESIGNSYS-101 ([3029772](https://github.com/DSI-HUG/ngx-components/commit/3029772))
+- **column-bar, panel-bar:** update ngxContentLeft and ngxContentRight #DESIGNSYS-179 ([52cf25d](https://github.com/DSI-HUG/ngx-components/commit/52cf25d))
+- **column-bar:** wrap title content in conditional block for better rendering #DESIGNSYS-179 ([2eb7e57](https://github.com/DSI-HUG/ngx-components/commit/2eb7e57))
+- **search-bar-container:** replace hardcoded max-width with CSS variable #DESIGNSYS-103 ([1b53406](https://github.com/DSI-HUG/ngx-components/commit/1b53406))
+- **column-bar:** add min-height variable #DESIGNSYS-179 ([086aae8](https://github.com/DSI-HUG/ngx-components/commit/086aae8))
+- **filters-group:** adjust mat-chip-set styling for better appearance #DESIGNSYS-177 ([ff51834](https://github.com/DSI-HUG/ngx-components/commit/ff51834))
+- **column-bar:** simplify flex behavior for ngx-column-bar elements #DESIGNSYS-179 ([c4ff3c2](https://github.com/DSI-HUG/ngx-components/commit/c4ff3c2))
+
+### 🌱 Dependencies
+
+- **@hug/ngx-sidenav**: upgraded to `v22.0.0-alpha.2`
+- **@hug/ngx-core**: upgraded to `v22.0.0-alpha.2`
+
+### ❤️ Thank You
+
+- Esther Layat
+
+## 22.0.0-alpha.4 (2026-03-24)
+
+### 🐛 Fixes
+
+- **layout:** add exports for column-bar and panel-bar #DESIGNSYS-104 ([0fa772b](https://github.com/DSI-HUG/ngx-components/commit/0fa772b))
+
+### ❤️ Thank You
+
+- Esther Layat
+
+## 22.0.0-alpha.3 (2026-03-20)
+
+### 🚀 Features
+
+- **column-bar:** add ngx-column-bar component #DESIGNSYS-179 ([7d32d1a](https://github.com/DSI-HUG/ngx-components/commit/7d32d1a))
+- **panel-bar:** add ngx-panel-bar component #DESIGNSYS-104 ([5d4b476](https://github.com/DSI-HUG/ngx-components/commit/5d4b476))
+
+### 🐛 Fixes
+
+- **translations:** correction of the German translation for "active" #DESIGNSYS-177 ([82dd0cb](https://github.com/DSI-HUG/ngx-components/commit/82dd0cb))
+
+### ❤️ Thank You
+
+- Esther Layat
+
+## 22.0.0-alpha.2 (2026-03-18)
+
+### 🚀 Features
+
+- **filters-group:** add filters-group component #DESIGNSYS-177 ([dea1a5f](https://github.com/DSI-HUG/ngx-components/commit/dea1a5f))
+
+### ❤️ Thank You
+
+- Esther Layat
+
+## 22.0.0-alpha.1 (2026-03-13)
+
+### 🚀 Features
+
+- **layout:** adjust styles + add ellipsis for the search input #DESIGNSYS-103 ([7158e2f](https://github.com/DSI-HUG/ngx-components/commit/7158e2f))
+- **layout:** use CSS variables #DESIGNSYS-178 ([309b56a](https://github.com/DSI-HUG/ngx-components/commit/309b56a))
+- **search-bar-container:** use CSS variables #DESIGNSYS-103 ([c35c5f7](https://github.com/DSI-HUG/ngx-components/commit/c35c5f7))
+- **panel:** use CSS variables #DESIGNSYS-176 ([7e75e7b](https://github.com/DSI-HUG/ngx-components/commit/7e75e7b))
+- **main-bar:** use CSS variables #DESIGNSYS-102 ([4a81e1b](https://github.com/DSI-HUG/ngx-components/commit/4a81e1b))
+- **actions-group:** use CSS variables #DESIGNSYS-180 ([9a96e80](https://github.com/DSI-HUG/ngx-components/commit/9a96e80))
+- **app-bar:** use CSS variables for layout properties #DESIGNSYS-101 ([d22a389](https://github.com/DSI-HUG/ngx-components/commit/d22a389))
+- **layout:** adjust properties for better layout #DESIGNSYS-180 ([888699c](https://github.com/DSI-HUG/ngx-components/commit/888699c))
+- **search-bar:** add translations and internationalization support #DESIGNSYS-103 ([50640a2](https://github.com/DSI-HUG/ngx-components/commit/50640a2))
+- **actions-group:** add translations and internationalization support #DESIGNSYS-180 ([ffece73](https://github.com/DSI-HUG/ngx-components/commit/ffece73))
+- **app-bar:** add translations and internationalization support #DESIGNSYS-101 ([e8e42e5](https://github.com/DSI-HUG/ngx-components/commit/e8e42e5))
+- **panel:** add NgxPanelComponent #DESIGNSYS-176 ([69ae788](https://github.com/DSI-HUG/ngx-components/commit/69ae788))
+- **main-bar:** add NgxMainBarComponent #DESIGNSYS-102 ([b972c4e](https://github.com/DSI-HUG/ngx-components/commit/b972c4e))
+- **search-bar:** add ngx-search-bar-container #DESIGNSYS-103 ([5e8da5c](https://github.com/DSI-HUG/ngx-components/commit/5e8da5c))
+- **layout:** add NgxActionsGroupComponent #DESIGNSYS-180 ([7dc1e4e](https://github.com/DSI-HUG/ngx-components/commit/7dc1e4e))
+- **layout:** add NgxLayoutComponent #DESIGNSYS-178 ([edf93bb](https://github.com/DSI-HUG/ngx-components/commit/edf93bb))
+- **app-bar:** added the ngx-app-bar component #DESIGNSYS-101 ([0cc08f3](https://github.com/DSI-HUG/ngx-components/commit/0cc08f3))
+
+### 🌱 Dependencies
+
+- **@hug/ngx-sidenav**: upgraded to `v22.0.0-alpha.1`
+- **@hug/ngx-core**: upgraded to `v22.0.0-alpha.1`
+
+### ❤️ Thank You
+
+- Esther Layat
+
 ## 21.0.2 (2026-02-13)
 
 ### 🌱 Dependencies

package/fesm2022/hug-ngx-layout-m2.mjs

@@ -0,0 +1,184 @@
+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/m2';
+
+/**
+ * Data for internationalization
+ */
+class NgxLayoutIntl extends NgxAbstractIntl {
+    closeLabel = '';
+    backLabel = '';
+    sideFilterLabel = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxLayoutIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxLayoutIntl });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxLayoutIntl, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Provide the component to the application level.
+ * @param options - The component's providing options.
+ * @param options.translationsPath - The path to the translations files (default: `translations/ngx-layout`).
+ * @param options.customIntl - A custom internationalization class to inject.
+ */
+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;
+    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;
+    }
+    get layoutRight() {
+        const value = this.layoutRightExternal ?? this.layoutRightContent;
+        if (!value) {
+            this.elementRef.nativeElement.setAttribute('no-right', 'true');
+        }
+        else {
+            this.elementRef.nativeElement.removeAttribute('no-right');
+        }
+        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);
+    }
+    get keepFilterButtonDisplayed() {
+        return this._keepFilterButtonDisplayed;
+    }
+    _withCloseButton = false;
+    set withCloseButton(value) {
+        this._withCloseButton = coerceBooleanProperty(value);
+    }
+    get withCloseButton() {
+        return this._withCloseButton;
+    }
+    _withBackButton = false;
+    set withBackButton(value) {
+        this._withBackButton = coerceBooleanProperty(value);
+    }
+    get withBackButton() {
+        return this._withBackButton;
+    }
+    closeSideFilter() {
+        void this.sideFilter?.close();
+    }
+    openSideFilter() {
+        void this.sideFilter?.open();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxLayoutComponent, 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
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxLayoutComponent, NgxLayoutIntl, provideNgxLayout };
+//# sourceMappingURL=hug-ngx-layout-m2.mjs.map

package/fesm2022/hug-ngx-layout-m2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hug-ngx-layout-m2.mjs","sources":["../../../projects/layout/m2/providers/ngx-layout-intl.ts","../../../projects/layout/m2/providers/index.ts","../../../projects/layout/m2/layout.component.ts","../../../projects/layout/m2/layout.component.html","../../../projects/layout/m2/hug-ngx-layout-m2.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { NgxAbstractIntl } from '@hug/ngx-core';\n\n/**\n * Data for internationalization\n */\n@Injectable()\nexport class NgxLayoutIntl extends NgxAbstractIntl<NgxLayoutIntl> {\n\n    public closeLabel = '';\n    public backLabel = '';\n    public sideFilterLabel = '';\n}\n","import type { EnvironmentProviders } from '@angular/core';\nimport { type NgxOptionsIntl, provideNgxIntl } from '@hug/ngx-core';\n\nimport { NgxLayoutIntl } from './ngx-layout-intl';\n\nexport * from './ngx-layout-intl';\n\n/**\n * Provide the component to the application level.\n * @param options - The component's providing options.\n * @param options.translationsPath - The path to the translations files (default: `translations/ngx-layout`).\n * @param options.customIntl - A custom internationalization class to inject.\n */\nexport const provideNgxLayout = (options?: NgxOptionsIntl<NgxLayoutIntl>): EnvironmentProviders =>\n    provideNgxIntl(\n        NgxLayoutIntl,\n        options?.translationsPath ?? 'translations/ngx-layout',\n        options?.customIntl ?? NgxLayoutIntl\n    );\n","import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, inject, Input, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatDrawer, MatDrawerContainer, MatDrawerContent } from '@angular/material/sidenav';\nimport { MatToolbar } from '@angular/material/toolbar';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { NgxMediaService } from '@hug/ngx-core';\nimport { NgxSidenavService } from '@hug/ngx-sidenav/m2';\n\nimport { NgxLayoutIntl } from './providers';\n\n@Component({\n    selector: 'ngx-layout',\n    templateUrl: './layout.component.html',\n    styleUrls: ['./layout.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        NgTemplateOutlet,\n        AsyncPipe,\n        MatIconButton,\n        MatIcon,\n        MatDrawer,\n        MatDrawerContainer,\n        MatDrawerContent,\n        MatToolbar,\n        MatTooltip\n    ]\n})\nexport class NgxLayoutComponent {\n    @Input() public toolbarColor = 'primary';\n    @Input() public editorToolbarId = 'editor-toolbar';\n\n    @Input() public layoutToolbarExternal?: TemplateRef<unknown>;\n    @Input() public layoutPrimaryActionExternal?: TemplateRef<unknown>;\n    @Input() public layoutActionsExternal?: TemplateRef<unknown>;\n    @Input() public layoutInfoBoxesExternal?: TemplateRef<unknown>;\n    @Input() public layoutRightExternal?: TemplateRef<unknown>;\n\n    @Output() public readonly closeButtonClicked = new EventEmitter<MouseEvent>();\n    @Output() public readonly backButtonClicked = new EventEmitter<MouseEvent>();\n    @Output() public readonly sideFilterClosed = new EventEmitter<void>();\n    @Output() public readonly sideFilterOpened = new EventEmitter<void>();\n\n    @ContentChild('layoutToolbar') protected layoutToolbarContent?: TemplateRef<unknown>;\n    @ContentChild('layoutPrimaryAction') protected layoutPrimaryActionContent?: TemplateRef<unknown>;\n    @ContentChild('layoutActions') protected layoutActionsContent?: TemplateRef<unknown>;\n    @ContentChild('layoutInfoBoxes') protected layoutInfoBoxesContent?: TemplateRef<unknown>;\n    @ContentChild('layoutRight') protected layoutRightContent?: TemplateRef<unknown>;\n\n    @ViewChild('sideFilter') protected sideFilter?: MatDrawer;\n\n    protected readonly intl = inject(NgxLayoutIntl, { optional: true });\n    protected readonly mediaService = inject(NgxMediaService);\n    protected readonly sidenavService = inject(NgxSidenavService);\n    protected readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    public get layoutToolbar(): TemplateRef<unknown> | undefined {\n        return this.layoutToolbarExternal ?? this.layoutToolbarContent;\n    }\n\n    public get layoutPrimaryAction(): TemplateRef<unknown> | undefined {\n        return this.layoutPrimaryActionExternal ?? this.layoutPrimaryActionContent;\n    }\n\n    public get layoutActions(): TemplateRef<unknown> | undefined {\n        return this.layoutActionsExternal ?? this.layoutActionsContent;\n    }\n\n    public get layoutInfoBoxes(): TemplateRef<unknown> | undefined {\n        return this.layoutInfoBoxesExternal ?? this.layoutInfoBoxesContent;\n    }\n\n    public get layoutRight(): TemplateRef<unknown> | undefined {\n        const value = this.layoutRightExternal ?? this.layoutRightContent;\n        if (!value) {\n            this.elementRef.nativeElement.setAttribute('no-right', 'true');\n        } else {\n            this.elementRef.nativeElement.removeAttribute('no-right');\n        }\n        return value;\n    }\n\n    private _withSidenav = false;\n\n    @Input()\n    public set withSidenav(value: BooleanInput) {\n        this._withSidenav = coerceBooleanProperty(value);\n    }\n\n    public get withSidenav(): BooleanInput {\n        return this._withSidenav;\n    }\n\n    private _keepFilterButtonDisplayed = true;\n\n    @Input()\n    public set keepFilterButtonDisplayed(value: BooleanInput) {\n        this._keepFilterButtonDisplayed = coerceBooleanProperty(value);\n    }\n\n    public get keepFilterButtonDisplayed(): BooleanInput {\n        return this._keepFilterButtonDisplayed;\n    }\n\n    private _withCloseButton = false;\n\n    @Input()\n    public set withCloseButton(value: BooleanInput) {\n        this._withCloseButton = coerceBooleanProperty(value);\n    }\n\n    public get withCloseButton(): BooleanInput {\n        return this._withCloseButton;\n    }\n\n    private _withBackButton = false;\n\n    @Input()\n    public set withBackButton(value: BooleanInput) {\n        this._withBackButton = coerceBooleanProperty(value);\n    }\n\n    public get withBackButton(): BooleanInput {\n        return this._withBackButton;\n    }\n\n    public closeSideFilter(): void {\n        void this.sideFilter?.close();\n    }\n\n    public openSideFilter(): void {\n        void this.sideFilter?.open();\n    }\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;AAGA;;AAEG;AAEG,MAAO,aAAc,SAAQ,eAA8B,CAAA;IAEtD,UAAU,GAAG,EAAE;IACf,SAAS,GAAG,EAAE;IACd,eAAe,GAAG,EAAE;uGAJlB,aAAa,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;2GAAb,aAAa,EAAA,CAAA;;2FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBADzB;;;ACCD;;;;;AAKG;AACI,MAAM,gBAAgB,GAAG,CAAC,OAAuC,KACpE,cAAc,CACV,aAAa,EACb,OAAO,EAAE,gBAAgB,IAAI,yBAAyB,EACtD,OAAO,EAAE,UAAU,IAAI,aAAa;;MCc/B,kBAAkB,CAAA;IACX,YAAY,GAAG,SAAS;IACxB,eAAe,GAAG,gBAAgB;AAElC,IAAA,qBAAqB;AACrB,IAAA,2BAA2B;AAC3B,IAAA,qBAAqB;AACrB,IAAA,uBAAuB;AACvB,IAAA,mBAAmB;AAET,IAAA,kBAAkB,GAAG,IAAI,YAAY,EAAc;AACnD,IAAA,iBAAiB,GAAG,IAAI,YAAY,EAAc;AAClD,IAAA,gBAAgB,GAAG,IAAI,YAAY,EAAQ;AAC3C,IAAA,gBAAgB,GAAG,IAAI,YAAY,EAAQ;AAE5B,IAAA,oBAAoB;AACd,IAAA,0BAA0B;AAChC,IAAA,oBAAoB;AAClB,IAAA,sBAAsB;AAC1B,IAAA,kBAAkB;AAEtB,IAAA,UAAU;IAE1B,IAAI,GAAG,MAAM,CAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAChD,IAAA,YAAY,GAAG,MAAM,CAAC,eAAe,CAAC;AACtC,IAAA,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAC1C,IAAA,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC;AAE3E,IAAA,IAAW,aAAa,GAAA;AACpB,QAAA,OAAO,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,oBAAoB;IAClE;AAEA,IAAA,IAAW,mBAAmB,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,2BAA2B,IAAI,IAAI,CAAC,0BAA0B;IAC9E;AAEA,IAAA,IAAW,aAAa,GAAA;AACpB,QAAA,OAAO,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,oBAAoB;IAClE;AAEA,IAAA,IAAW,eAAe,GAAA;AACtB,QAAA,OAAO,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,sBAAsB;IACtE;AAEA,IAAA,IAAW,WAAW,GAAA;QAClB,MAAM,KAAK,GAAG,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,kBAAkB;QACjE,IAAI,CAAC,KAAK,EAAE;YACR,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC;QAClE;aAAO;YACH,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC;QAC7D;AACA,QAAA,OAAO,KAAK;IAChB;IAEQ,YAAY,GAAG,KAAK;IAE5B,IACW,WAAW,CAAC,KAAmB,EAAA;AACtC,QAAA,IAAI,CAAC,YAAY,GAAG,qBAAqB,CAAC,KAAK,CAAC;IACpD;AAEA,IAAA,IAAW,WAAW,GAAA;QAClB,OAAO,IAAI,CAAC,YAAY;IAC5B;IAEQ,0BAA0B,GAAG,IAAI;IAEzC,IACW,yBAAyB,CAAC,KAAmB,EAAA;AACpD,QAAA,IAAI,CAAC,0BAA0B,GAAG,qBAAqB,CAAC,KAAK,CAAC;IAClE;AAEA,IAAA,IAAW,yBAAyB,GAAA;QAChC,OAAO,IAAI,CAAC,0BAA0B;IAC1C;IAEQ,gBAAgB,GAAG,KAAK;IAEhC,IACW,eAAe,CAAC,KAAmB,EAAA;AAC1C,QAAA,IAAI,CAAC,gBAAgB,GAAG,qBAAqB,CAAC,KAAK,CAAC;IACxD;AAEA,IAAA,IAAW,eAAe,GAAA;QACtB,OAAO,IAAI,CAAC,gBAAgB;IAChC;IAEQ,eAAe,GAAG,KAAK;IAE/B,IACW,cAAc,CAAC,KAAmB,EAAA;AACzC,QAAA,IAAI,CAAC,eAAe,GAAG,qBAAqB,CAAC,KAAK,CAAC;IACvD;AAEA,IAAA,IAAW,cAAc,GAAA;QACrB,OAAO,IAAI,CAAC,eAAe;IAC/B;IAEO,eAAe,GAAA;AAClB,QAAA,KAAK,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE;IACjC;IAEO,cAAc,GAAA;AACjB,QAAA,KAAK,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;IAChC;uGAxGS,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,81CC/B/B,mqJA+GA,EAAA,MAAA,EAAA,CAAA,wtIAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED3FQ,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAEhB,aAAa,uKACb,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,SAAS,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,cAAA,EAAA,WAAA,EAAA,QAAA,CAAA,EAAA,OAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,aAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACT,kBAAkB,oKAClB,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,UAAU,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACV,UAAU,4QAPV,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAUJ,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAlB9B,SAAS;+BACI,YAAY,EAAA,aAAA,EAGP,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC;wBACL,gBAAgB;wBAChB,SAAS;wBACT,aAAa;wBACb,OAAO;wBACP,SAAS;wBACT,kBAAkB;wBAClB,gBAAgB;wBAChB,UAAU;wBACV;AACH,qBAAA,EAAA,QAAA,EAAA,mqJAAA,EAAA,MAAA,EAAA,CAAA,wtIAAA,CAAA,EAAA;;sBAGA;;sBACA;;sBAEA;;sBACA;;sBACA;;sBACA;;sBACA;;sBAEA;;sBACA;;sBACA;;sBACA;;sBAEA,YAAY;uBAAC,eAAe;;sBAC5B,YAAY;uBAAC,qBAAqB;;sBAClC,YAAY;uBAAC,eAAe;;sBAC5B,YAAY;uBAAC,iBAAiB;;sBAC9B,YAAY;uBAAC,aAAa;;sBAE1B,SAAS;uBAAC,YAAY;;sBAmCtB;;sBAWA;;sBAWA;;sBAWA;;;AExHL;;AAEG;;;;"}