@hug/ngx-layout 1.1.5 → 1.1.7

package/CHANGELOG.md

@@ -1,3 +1,47 @@
+## 1.1.7 (2024-07-24)
+
+
+### 🐛 Fixes
+
+- **ngx-layout:** update patch version ([1e19c96](https://github.com/DSI-HUG/ngx-components/commit/1e19c96))
+
+
+### 🌱 Dependencies
+
+- **@hug/ngx-core:** upgrade to v1.1.11 ([bda1d8c](https://github.com/DSI-HUG/ngx-components/commit/bda1d8c))
+
+- **@hug/ngx-sidenav:** upgrade to v1.1.5 ([7b0ce30](https://github.com/DSI-HUG/ngx-components/commit/7b0ce30))
+
+
+### ❤️  Thank You
+
+- dsi-hug-bot @dsi-hug-bot
+- Serge
+
+## 1.1.6 (2024-07-23)
+
+
+### 🐛 Fixes
+
+- **ngx-core:** ngx prefix ([e08e71a](https://github.com/DSI-HUG/ngx-components/commit/e08e71a))
+
+- **ngx-layout:** compile path ([f9f464e](https://github.com/DSI-HUG/ngx-components/commit/f9f464e))
+
+
+### 🌱 Dependencies
+
+- **@hug/ngx-core:** upgrade to v1.1.9 ([3692c68](https://github.com/DSI-HUG/ngx-components/commit/3692c68))
+
+- **@hug/ngx-sidenav:** upgrade to v1.1.4 ([47676fa](https://github.com/DSI-HUG/ngx-components/commit/47676fa))
+
+- **@hug/ngx-core:** upgrade to v1.1.10 ([78dbe21](https://github.com/DSI-HUG/ngx-components/commit/78dbe21))
+
+
+### ❤️  Thank You
+
+- dsi-hug-bot @dsi-hug-bot
+- Serge
+
 ## 1.1.5 (2024-07-23)
 
 

package/esm2020/layout.component.mjs

@@ -96,7 +96,7 @@ export class NgxLayoutComponent {
     }
 }
 NgxLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgxLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgxLayoutComponent, isStandalone: true, selector: "ngx-layout", inputs: { toolbarColor: "toolbarColor", editorToolbarId: "editorToolbarId", closeButtonLabel: "closeButtonLabel", backButtonLabel: "backButtonLabel", layoutToolbarExternal: "layoutToolbarExternal", layoutPrimaryActionExternal: "layoutPrimaryActionExternal", layoutActionsExternal: "layoutActionsExternal", layoutInfoBoxesExternal: "layoutInfoBoxesExternal", layoutRightExternal: "layoutRightExternal", withEditorToolbar: "withEditorToolbar", withSidenav: "withSidenav", keepFilterButtonDisplayed: "keepFilterButtonDisplayed", withCloseButton: "withCloseButton", withBackButton: "withBackButton", displayEditorToolbar: "displayEditorToolbar" }, outputs: { closeButtonClicked: "closeButtonClicked", backButtonClicked: "backButtonClicked", sideFilterClosed: "sideFilterClosed", sideFilterOpened: "sideFilterOpened" }, host: { properties: { "class.no-right": "this.noRight" } }, 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        <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\" *ngIf=\"layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-content></ng-content>\n    </div>\n    <ng-container *ngIf=\"(mediaService.isHandset$ | async) && actionsToolbar\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar id=\"actions-toolbar\" class=\"actions\" [color]=\"toolbarColor\" [class.bottom]=\"mediaService.isHandset$ | async\">\n        <span class=\"primary-action-container\" *ngIf=\"layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-container *ngIf=\"layoutActions\">\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        </ng-container>\n        <div class=\"info-boxes-container\" *ngIf=\"layoutInfoBoxes && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n        </div>\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\" *ngIf=\"layoutToolbar || layoutRight\">\n        <button type=\"button\" id=\"sidenav-button\" mat-icon-button *ngIf=\"withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false\" (click)=\"sidenavService.toggle()\">\n            <mat-icon>menu</mat-icon>\n        </button>\n        <button type=\"button\" id=\"back-button\" mat-icon-button *ngIf=\"withBackButton\" (click)=\"this.backButtonClicked.emit($event)\" [matTooltip]=\"backButtonLabel\">\n            <mat-icon>arrow_back</mat-icon>\n        </button>\n        <div id=\"toolbar-content-container\">\n            <ng-container *ngIf=\"layoutToolbar\">\n                <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n            </ng-container>\n        </div>\n        <button type=\"button\" id=\"filter-button\" mat-icon-button (click)=\"sideFilter.toggle()\" *ngIf=\"sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight\" matTooltip=\"Afficher/Masquer les filtres\">\n            <mat-icon>tune</mat-icon>\n        </button>\n        <button type=\"button\" id=\"close-button\" mat-icon-button *ngIf=\"withCloseButton\" (click)=\"this.closeButtonClicked.emit($event)\" [matTooltip]=\"closeButtonLabel\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <ng-container *ngIf=\"(layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n    <mat-drawer-container *ngIf=\"layoutRight; else content\" autosize=\"true\">\n        <mat-drawer-content>\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </mat-drawer-content>\n        <mat-drawer id=\"side-filter\" #sideFilter (closed)=\"sideFilterClosed.emit()\" (openedChange)=\"sideFilterOpened.emit()\" class=\"right\" position=\"end\" [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\" [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\" [opened]=\"(mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n        </mat-drawer>\n    </mat-drawer-container>\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left.no-right .main-content{padding:0}ngx-layout mat-sidenav-container{position:absolute;inset:0}ngx-layout mat-sidenav-content,ngx-layout mat-drawer-content{display:flex!important;flex-direction:column}ngx-layout mat-sidenav{width:200px}ngx-layout mat-drawer{width:220px}ngx-layout mat-drawer.right{padding:.3rem}ngx-layout mat-drawer.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.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.right [icons-container]{display:flex;align-items:center}ngx-layout mat-drawer.right [filters-icon]{cursor:pointer;transition:color .3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-chip-list-wrapper{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{position:relative}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]):hover:before{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.right [filters-toggle-group]{display:flex}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle{transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle mat-icon{margin-right:1rem}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-label-content{text-align:start}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-focus-overlay{height:100%}ngx-layout mat-drawer.right mat-form-field{width:100%}ngx-layout mat-drawer.right .mat-form-field-infix{width:inherit}ngx-layout mat-drawer.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;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#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{-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i4.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NgxLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgxLayoutComponent, isStandalone: true, selector: "ngx-layout", inputs: { toolbarColor: "toolbarColor", editorToolbarId: "editorToolbarId", closeButtonLabel: "closeButtonLabel", backButtonLabel: "backButtonLabel", layoutToolbarExternal: "layoutToolbarExternal", layoutPrimaryActionExternal: "layoutPrimaryActionExternal", layoutActionsExternal: "layoutActionsExternal", layoutInfoBoxesExternal: "layoutInfoBoxesExternal", layoutRightExternal: "layoutRightExternal", withEditorToolbar: "withEditorToolbar", withSidenav: "withSidenav", keepFilterButtonDisplayed: "keepFilterButtonDisplayed", withCloseButton: "withCloseButton", withBackButton: "withBackButton", displayEditorToolbar: "displayEditorToolbar" }, outputs: { closeButtonClicked: "closeButtonClicked", backButtonClicked: "backButtonClicked", sideFilterClosed: "sideFilterClosed", sideFilterOpened: "sideFilterOpened" }, host: { properties: { "class.no-right": "this.noRight" } }, 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        <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\" *ngIf=\"layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-content></ng-content>\n    </div>\n    <ng-container *ngIf=\"(mediaService.isHandset$ | async) && actionsToolbar\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar id=\"actions-toolbar\" class=\"actions\" [color]=\"toolbarColor\" [class.bottom]=\"mediaService.isHandset$ | async\">\n        <span class=\"primary-action-container\" *ngIf=\"layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-container *ngIf=\"layoutActions\">\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        </ng-container>\n        <div class=\"info-boxes-container\" *ngIf=\"layoutInfoBoxes && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n        </div>\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\" *ngIf=\"layoutToolbar || layoutRight\">\n        <button type=\"button\" id=\"sidenav-button\" mat-icon-button *ngIf=\"withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false\" (click)=\"sidenavService.toggle()\">\n            <mat-icon>menu</mat-icon>\n        </button>\n        <button type=\"button\" id=\"back-button\" mat-icon-button *ngIf=\"withBackButton\" (click)=\"this.backButtonClicked.emit($event)\" [matTooltip]=\"backButtonLabel\">\n            <mat-icon>arrow_back</mat-icon>\n        </button>\n        <div id=\"toolbar-content-container\">\n            <ng-container *ngIf=\"layoutToolbar\">\n                <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n            </ng-container>\n        </div>\n        <button type=\"button\" id=\"filter-button\" mat-icon-button (click)=\"sideFilter.toggle()\" *ngIf=\"sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight\" matTooltip=\"Afficher/Masquer les filtres\">\n            <mat-icon>tune</mat-icon>\n        </button>\n        <button type=\"button\" id=\"close-button\" mat-icon-button *ngIf=\"withCloseButton\" (click)=\"this.closeButtonClicked.emit($event)\" [matTooltip]=\"closeButtonLabel\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <ng-container *ngIf=\"(layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n    <mat-drawer-container *ngIf=\"layoutRight; else content\" autosize=\"true\">\n        <mat-drawer-content>\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </mat-drawer-content>\n        <mat-drawer id=\"side-filter\" #sideFilter (closed)=\"sideFilterClosed.emit()\" (openedChange)=\"sideFilterOpened.emit()\" class=\"right\" position=\"end\" [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\" [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\" [opened]=\"(mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n        </mat-drawer>\n    </mat-drawer-container>\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left.no-right .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{width:220px}ngx-layout mat-drawer.right{padding:.3rem}ngx-layout mat-drawer.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.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.right [icons-container]{display:flex;align-items:center}ngx-layout mat-drawer.right [filters-icon]{cursor:pointer;transition:color .3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-chip-list-wrapper{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{position:relative}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]):hover:before{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.right [filters-toggle-group]{display:flex}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle{transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle mat-icon{margin-right:1rem}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-label-content{text-align:start}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-focus-overlay{height:100%}ngx-layout mat-drawer.right mat-form-field{width:100%}ngx-layout mat-drawer.right .mat-form-field-infix{width:inherit}ngx-layout mat-drawer.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;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#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{-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i4.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-layout', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
@@ -106,7 +106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         MatSidenavModule,
                         MatToolbarModule,
                         MatTooltipModule
-                    ], template: "<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n    <div class=\"main-content\">\n        <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\" *ngIf=\"layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-content></ng-content>\n    </div>\n    <ng-container *ngIf=\"(mediaService.isHandset$ | async) && actionsToolbar\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar id=\"actions-toolbar\" class=\"actions\" [color]=\"toolbarColor\" [class.bottom]=\"mediaService.isHandset$ | async\">\n        <span class=\"primary-action-container\" *ngIf=\"layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-container *ngIf=\"layoutActions\">\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        </ng-container>\n        <div class=\"info-boxes-container\" *ngIf=\"layoutInfoBoxes && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n        </div>\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\" *ngIf=\"layoutToolbar || layoutRight\">\n        <button type=\"button\" id=\"sidenav-button\" mat-icon-button *ngIf=\"withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false\" (click)=\"sidenavService.toggle()\">\n            <mat-icon>menu</mat-icon>\n        </button>\n        <button type=\"button\" id=\"back-button\" mat-icon-button *ngIf=\"withBackButton\" (click)=\"this.backButtonClicked.emit($event)\" [matTooltip]=\"backButtonLabel\">\n            <mat-icon>arrow_back</mat-icon>\n        </button>\n        <div id=\"toolbar-content-container\">\n            <ng-container *ngIf=\"layoutToolbar\">\n                <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n            </ng-container>\n        </div>\n        <button type=\"button\" id=\"filter-button\" mat-icon-button (click)=\"sideFilter.toggle()\" *ngIf=\"sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight\" matTooltip=\"Afficher/Masquer les filtres\">\n            <mat-icon>tune</mat-icon>\n        </button>\n        <button type=\"button\" id=\"close-button\" mat-icon-button *ngIf=\"withCloseButton\" (click)=\"this.closeButtonClicked.emit($event)\" [matTooltip]=\"closeButtonLabel\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <ng-container *ngIf=\"(layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n    <mat-drawer-container *ngIf=\"layoutRight; else content\" autosize=\"true\">\n        <mat-drawer-content>\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </mat-drawer-content>\n        <mat-drawer id=\"side-filter\" #sideFilter (closed)=\"sideFilterClosed.emit()\" (openedChange)=\"sideFilterOpened.emit()\" class=\"right\" position=\"end\" [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\" [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\" [opened]=\"(mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n        </mat-drawer>\n    </mat-drawer-container>\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left.no-right .main-content{padding:0}ngx-layout mat-sidenav-container{position:absolute;inset:0}ngx-layout mat-sidenav-content,ngx-layout mat-drawer-content{display:flex!important;flex-direction:column}ngx-layout mat-sidenav{width:200px}ngx-layout mat-drawer{width:220px}ngx-layout mat-drawer.right{padding:.3rem}ngx-layout mat-drawer.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.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.right [icons-container]{display:flex;align-items:center}ngx-layout mat-drawer.right [filters-icon]{cursor:pointer;transition:color .3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-chip-list-wrapper{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{position:relative}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]):hover:before{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.right [filters-toggle-group]{display:flex}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle{transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle mat-icon{margin-right:1rem}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-label-content{text-align:start}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-focus-overlay{height:100%}ngx-layout mat-drawer.right mat-form-field{width:100%}ngx-layout mat-drawer.right .mat-form-field-infix{width:inherit}ngx-layout mat-drawer.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;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#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{-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;border-radius:6px}\n"] }]
+                    ], template: "<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n    <div class=\"main-content\">\n        <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\" *ngIf=\"layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-content></ng-content>\n    </div>\n    <ng-container *ngIf=\"(mediaService.isHandset$ | async) && actionsToolbar\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar id=\"actions-toolbar\" class=\"actions\" [color]=\"toolbarColor\" [class.bottom]=\"mediaService.isHandset$ | async\">\n        <span class=\"primary-action-container\" *ngIf=\"layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-container *ngIf=\"layoutActions\">\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        </ng-container>\n        <div class=\"info-boxes-container\" *ngIf=\"layoutInfoBoxes && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n        </div>\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\" *ngIf=\"layoutToolbar || layoutRight\">\n        <button type=\"button\" id=\"sidenav-button\" mat-icon-button *ngIf=\"withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false\" (click)=\"sidenavService.toggle()\">\n            <mat-icon>menu</mat-icon>\n        </button>\n        <button type=\"button\" id=\"back-button\" mat-icon-button *ngIf=\"withBackButton\" (click)=\"this.backButtonClicked.emit($event)\" [matTooltip]=\"backButtonLabel\">\n            <mat-icon>arrow_back</mat-icon>\n        </button>\n        <div id=\"toolbar-content-container\">\n            <ng-container *ngIf=\"layoutToolbar\">\n                <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n            </ng-container>\n        </div>\n        <button type=\"button\" id=\"filter-button\" mat-icon-button (click)=\"sideFilter.toggle()\" *ngIf=\"sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight\" matTooltip=\"Afficher/Masquer les filtres\">\n            <mat-icon>tune</mat-icon>\n        </button>\n        <button type=\"button\" id=\"close-button\" mat-icon-button *ngIf=\"withCloseButton\" (click)=\"this.closeButtonClicked.emit($event)\" [matTooltip]=\"closeButtonLabel\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <ng-container *ngIf=\"(layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n    <mat-drawer-container *ngIf=\"layoutRight; else content\" autosize=\"true\">\n        <mat-drawer-content>\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </mat-drawer-content>\n        <mat-drawer id=\"side-filter\" #sideFilter (closed)=\"sideFilterClosed.emit()\" (openedChange)=\"sideFilterOpened.emit()\" class=\"right\" position=\"end\" [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\" [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\" [opened]=\"(mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n        </mat-drawer>\n    </mat-drawer-container>\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left.no-right .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{width:220px}ngx-layout mat-drawer.right{padding:.3rem}ngx-layout mat-drawer.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.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.right [icons-container]{display:flex;align-items:center}ngx-layout mat-drawer.right [filters-icon]{cursor:pointer;transition:color .3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-chip-list-wrapper{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{position:relative}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]):hover:before{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.right [filters-toggle-group]{display:flex}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle{transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle mat-icon{margin-right:1rem}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-label-content{text-align:start}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-focus-overlay{height:100%}ngx-layout mat-drawer.right mat-form-field{width:100%}ngx-layout mat-drawer.right .mat-form-field-infix{width:inherit}ngx-layout mat-drawer.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;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#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{-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;border-radius:6px}\n"] }]
         }], propDecorators: { toolbarColor: [{
                 type: Input
             }], editorToolbarId: [{

package/fesm2015/hug-ngx-layout.mjs

@@ -104,7 +104,7 @@ class NgxLayoutComponent {
     }
 }
 NgxLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgxLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgxLayoutComponent, isStandalone: true, selector: "ngx-layout", inputs: { toolbarColor: "toolbarColor", editorToolbarId: "editorToolbarId", closeButtonLabel: "closeButtonLabel", backButtonLabel: "backButtonLabel", layoutToolbarExternal: "layoutToolbarExternal", layoutPrimaryActionExternal: "layoutPrimaryActionExternal", layoutActionsExternal: "layoutActionsExternal", layoutInfoBoxesExternal: "layoutInfoBoxesExternal", layoutRightExternal: "layoutRightExternal", withEditorToolbar: "withEditorToolbar", withSidenav: "withSidenav", keepFilterButtonDisplayed: "keepFilterButtonDisplayed", withCloseButton: "withCloseButton", withBackButton: "withBackButton", displayEditorToolbar: "displayEditorToolbar" }, outputs: { closeButtonClicked: "closeButtonClicked", backButtonClicked: "backButtonClicked", sideFilterClosed: "sideFilterClosed", sideFilterOpened: "sideFilterOpened" }, host: { properties: { "class.no-right": "this.noRight" } }, 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        <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\" *ngIf=\"layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-content></ng-content>\n    </div>\n    <ng-container *ngIf=\"(mediaService.isHandset$ | async) && actionsToolbar\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar id=\"actions-toolbar\" class=\"actions\" [color]=\"toolbarColor\" [class.bottom]=\"mediaService.isHandset$ | async\">\n        <span class=\"primary-action-container\" *ngIf=\"layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-container *ngIf=\"layoutActions\">\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        </ng-container>\n        <div class=\"info-boxes-container\" *ngIf=\"layoutInfoBoxes && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n        </div>\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\" *ngIf=\"layoutToolbar || layoutRight\">\n        <button type=\"button\" id=\"sidenav-button\" mat-icon-button *ngIf=\"withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false\" (click)=\"sidenavService.toggle()\">\n            <mat-icon>menu</mat-icon>\n        </button>\n        <button type=\"button\" id=\"back-button\" mat-icon-button *ngIf=\"withBackButton\" (click)=\"this.backButtonClicked.emit($event)\" [matTooltip]=\"backButtonLabel\">\n            <mat-icon>arrow_back</mat-icon>\n        </button>\n        <div id=\"toolbar-content-container\">\n            <ng-container *ngIf=\"layoutToolbar\">\n                <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n            </ng-container>\n        </div>\n        <button type=\"button\" id=\"filter-button\" mat-icon-button (click)=\"sideFilter.toggle()\" *ngIf=\"sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight\" matTooltip=\"Afficher/Masquer les filtres\">\n            <mat-icon>tune</mat-icon>\n        </button>\n        <button type=\"button\" id=\"close-button\" mat-icon-button *ngIf=\"withCloseButton\" (click)=\"this.closeButtonClicked.emit($event)\" [matTooltip]=\"closeButtonLabel\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <ng-container *ngIf=\"(layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n    <mat-drawer-container *ngIf=\"layoutRight; else content\" autosize=\"true\">\n        <mat-drawer-content>\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </mat-drawer-content>\n        <mat-drawer id=\"side-filter\" #sideFilter (closed)=\"sideFilterClosed.emit()\" (openedChange)=\"sideFilterOpened.emit()\" class=\"right\" position=\"end\" [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\" [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\" [opened]=\"(mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n        </mat-drawer>\n    </mat-drawer-container>\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left.no-right .main-content{padding:0}ngx-layout mat-sidenav-container{position:absolute;inset:0}ngx-layout mat-sidenav-content,ngx-layout mat-drawer-content{display:flex!important;flex-direction:column}ngx-layout mat-sidenav{width:200px}ngx-layout mat-drawer{width:220px}ngx-layout mat-drawer.right{padding:.3rem}ngx-layout mat-drawer.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.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.right [icons-container]{display:flex;align-items:center}ngx-layout mat-drawer.right [filters-icon]{cursor:pointer;transition:color .3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-chip-list-wrapper{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{position:relative}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]):hover:before{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.right [filters-toggle-group]{display:flex}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle{transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle mat-icon{margin-right:1rem}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-label-content{text-align:start}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-focus-overlay{height:100%}ngx-layout mat-drawer.right mat-form-field{width:100%}ngx-layout mat-drawer.right .mat-form-field-infix{width:inherit}ngx-layout mat-drawer.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;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#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{-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i4.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NgxLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgxLayoutComponent, isStandalone: true, selector: "ngx-layout", inputs: { toolbarColor: "toolbarColor", editorToolbarId: "editorToolbarId", closeButtonLabel: "closeButtonLabel", backButtonLabel: "backButtonLabel", layoutToolbarExternal: "layoutToolbarExternal", layoutPrimaryActionExternal: "layoutPrimaryActionExternal", layoutActionsExternal: "layoutActionsExternal", layoutInfoBoxesExternal: "layoutInfoBoxesExternal", layoutRightExternal: "layoutRightExternal", withEditorToolbar: "withEditorToolbar", withSidenav: "withSidenav", keepFilterButtonDisplayed: "keepFilterButtonDisplayed", withCloseButton: "withCloseButton", withBackButton: "withBackButton", displayEditorToolbar: "displayEditorToolbar" }, outputs: { closeButtonClicked: "closeButtonClicked", backButtonClicked: "backButtonClicked", sideFilterClosed: "sideFilterClosed", sideFilterOpened: "sideFilterOpened" }, host: { properties: { "class.no-right": "this.noRight" } }, 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        <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\" *ngIf=\"layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-content></ng-content>\n    </div>\n    <ng-container *ngIf=\"(mediaService.isHandset$ | async) && actionsToolbar\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar id=\"actions-toolbar\" class=\"actions\" [color]=\"toolbarColor\" [class.bottom]=\"mediaService.isHandset$ | async\">\n        <span class=\"primary-action-container\" *ngIf=\"layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-container *ngIf=\"layoutActions\">\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        </ng-container>\n        <div class=\"info-boxes-container\" *ngIf=\"layoutInfoBoxes && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n        </div>\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\" *ngIf=\"layoutToolbar || layoutRight\">\n        <button type=\"button\" id=\"sidenav-button\" mat-icon-button *ngIf=\"withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false\" (click)=\"sidenavService.toggle()\">\n            <mat-icon>menu</mat-icon>\n        </button>\n        <button type=\"button\" id=\"back-button\" mat-icon-button *ngIf=\"withBackButton\" (click)=\"this.backButtonClicked.emit($event)\" [matTooltip]=\"backButtonLabel\">\n            <mat-icon>arrow_back</mat-icon>\n        </button>\n        <div id=\"toolbar-content-container\">\n            <ng-container *ngIf=\"layoutToolbar\">\n                <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n            </ng-container>\n        </div>\n        <button type=\"button\" id=\"filter-button\" mat-icon-button (click)=\"sideFilter.toggle()\" *ngIf=\"sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight\" matTooltip=\"Afficher/Masquer les filtres\">\n            <mat-icon>tune</mat-icon>\n        </button>\n        <button type=\"button\" id=\"close-button\" mat-icon-button *ngIf=\"withCloseButton\" (click)=\"this.closeButtonClicked.emit($event)\" [matTooltip]=\"closeButtonLabel\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <ng-container *ngIf=\"(layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n    <mat-drawer-container *ngIf=\"layoutRight; else content\" autosize=\"true\">\n        <mat-drawer-content>\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </mat-drawer-content>\n        <mat-drawer id=\"side-filter\" #sideFilter (closed)=\"sideFilterClosed.emit()\" (openedChange)=\"sideFilterOpened.emit()\" class=\"right\" position=\"end\" [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\" [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\" [opened]=\"(mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n        </mat-drawer>\n    </mat-drawer-container>\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left.no-right .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{width:220px}ngx-layout mat-drawer.right{padding:.3rem}ngx-layout mat-drawer.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.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.right [icons-container]{display:flex;align-items:center}ngx-layout mat-drawer.right [filters-icon]{cursor:pointer;transition:color .3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-chip-list-wrapper{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{position:relative}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]):hover:before{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.right [filters-toggle-group]{display:flex}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle{transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle mat-icon{margin-right:1rem}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-label-content{text-align:start}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-focus-overlay{height:100%}ngx-layout mat-drawer.right mat-form-field{width:100%}ngx-layout mat-drawer.right .mat-form-field-infix{width:inherit}ngx-layout mat-drawer.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;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#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{-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i4.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-layout', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
@@ -114,7 +114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         MatSidenavModule,
                         MatToolbarModule,
                         MatTooltipModule
-                    ], template: "<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n    <div class=\"main-content\">\n        <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\" *ngIf=\"layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-content></ng-content>\n    </div>\n    <ng-container *ngIf=\"(mediaService.isHandset$ | async) && actionsToolbar\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar id=\"actions-toolbar\" class=\"actions\" [color]=\"toolbarColor\" [class.bottom]=\"mediaService.isHandset$ | async\">\n        <span class=\"primary-action-container\" *ngIf=\"layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-container *ngIf=\"layoutActions\">\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        </ng-container>\n        <div class=\"info-boxes-container\" *ngIf=\"layoutInfoBoxes && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n        </div>\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\" *ngIf=\"layoutToolbar || layoutRight\">\n        <button type=\"button\" id=\"sidenav-button\" mat-icon-button *ngIf=\"withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false\" (click)=\"sidenavService.toggle()\">\n            <mat-icon>menu</mat-icon>\n        </button>\n        <button type=\"button\" id=\"back-button\" mat-icon-button *ngIf=\"withBackButton\" (click)=\"this.backButtonClicked.emit($event)\" [matTooltip]=\"backButtonLabel\">\n            <mat-icon>arrow_back</mat-icon>\n        </button>\n        <div id=\"toolbar-content-container\">\n            <ng-container *ngIf=\"layoutToolbar\">\n                <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n            </ng-container>\n        </div>\n        <button type=\"button\" id=\"filter-button\" mat-icon-button (click)=\"sideFilter.toggle()\" *ngIf=\"sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight\" matTooltip=\"Afficher/Masquer les filtres\">\n            <mat-icon>tune</mat-icon>\n        </button>\n        <button type=\"button\" id=\"close-button\" mat-icon-button *ngIf=\"withCloseButton\" (click)=\"this.closeButtonClicked.emit($event)\" [matTooltip]=\"closeButtonLabel\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <ng-container *ngIf=\"(layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n    <mat-drawer-container *ngIf=\"layoutRight; else content\" autosize=\"true\">\n        <mat-drawer-content>\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </mat-drawer-content>\n        <mat-drawer id=\"side-filter\" #sideFilter (closed)=\"sideFilterClosed.emit()\" (openedChange)=\"sideFilterOpened.emit()\" class=\"right\" position=\"end\" [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\" [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\" [opened]=\"(mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n        </mat-drawer>\n    </mat-drawer-container>\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left.no-right .main-content{padding:0}ngx-layout mat-sidenav-container{position:absolute;inset:0}ngx-layout mat-sidenav-content,ngx-layout mat-drawer-content{display:flex!important;flex-direction:column}ngx-layout mat-sidenav{width:200px}ngx-layout mat-drawer{width:220px}ngx-layout mat-drawer.right{padding:.3rem}ngx-layout mat-drawer.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.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.right [icons-container]{display:flex;align-items:center}ngx-layout mat-drawer.right [filters-icon]{cursor:pointer;transition:color .3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-chip-list-wrapper{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{position:relative}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]):hover:before{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.right [filters-toggle-group]{display:flex}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle{transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle mat-icon{margin-right:1rem}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-label-content{text-align:start}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-focus-overlay{height:100%}ngx-layout mat-drawer.right mat-form-field{width:100%}ngx-layout mat-drawer.right .mat-form-field-infix{width:inherit}ngx-layout mat-drawer.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;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#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{-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;border-radius:6px}\n"] }]
+                    ], template: "<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n    <div class=\"main-content\">\n        <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\" *ngIf=\"layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-content></ng-content>\n    </div>\n    <ng-container *ngIf=\"(mediaService.isHandset$ | async) && actionsToolbar\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar id=\"actions-toolbar\" class=\"actions\" [color]=\"toolbarColor\" [class.bottom]=\"mediaService.isHandset$ | async\">\n        <span class=\"primary-action-container\" *ngIf=\"layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-container *ngIf=\"layoutActions\">\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        </ng-container>\n        <div class=\"info-boxes-container\" *ngIf=\"layoutInfoBoxes && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n        </div>\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\" *ngIf=\"layoutToolbar || layoutRight\">\n        <button type=\"button\" id=\"sidenav-button\" mat-icon-button *ngIf=\"withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false\" (click)=\"sidenavService.toggle()\">\n            <mat-icon>menu</mat-icon>\n        </button>\n        <button type=\"button\" id=\"back-button\" mat-icon-button *ngIf=\"withBackButton\" (click)=\"this.backButtonClicked.emit($event)\" [matTooltip]=\"backButtonLabel\">\n            <mat-icon>arrow_back</mat-icon>\n        </button>\n        <div id=\"toolbar-content-container\">\n            <ng-container *ngIf=\"layoutToolbar\">\n                <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n            </ng-container>\n        </div>\n        <button type=\"button\" id=\"filter-button\" mat-icon-button (click)=\"sideFilter.toggle()\" *ngIf=\"sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight\" matTooltip=\"Afficher/Masquer les filtres\">\n            <mat-icon>tune</mat-icon>\n        </button>\n        <button type=\"button\" id=\"close-button\" mat-icon-button *ngIf=\"withCloseButton\" (click)=\"this.closeButtonClicked.emit($event)\" [matTooltip]=\"closeButtonLabel\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <ng-container *ngIf=\"(layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n    <mat-drawer-container *ngIf=\"layoutRight; else content\" autosize=\"true\">\n        <mat-drawer-content>\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </mat-drawer-content>\n        <mat-drawer id=\"side-filter\" #sideFilter (closed)=\"sideFilterClosed.emit()\" (openedChange)=\"sideFilterOpened.emit()\" class=\"right\" position=\"end\" [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\" [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\" [opened]=\"(mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n        </mat-drawer>\n    </mat-drawer-container>\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left.no-right .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{width:220px}ngx-layout mat-drawer.right{padding:.3rem}ngx-layout mat-drawer.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.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.right [icons-container]{display:flex;align-items:center}ngx-layout mat-drawer.right [filters-icon]{cursor:pointer;transition:color .3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-chip-list-wrapper{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{position:relative}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]):hover:before{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.right [filters-toggle-group]{display:flex}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle{transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle mat-icon{margin-right:1rem}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-label-content{text-align:start}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-focus-overlay{height:100%}ngx-layout mat-drawer.right mat-form-field{width:100%}ngx-layout mat-drawer.right .mat-form-field-infix{width:inherit}ngx-layout mat-drawer.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;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#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{-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;border-radius:6px}\n"] }]
         }], propDecorators: { toolbarColor: [{
                 type: Input
             }], editorToolbarId: [{

package/fesm2020/hug-ngx-layout.mjs

@@ -97,7 +97,7 @@ class NgxLayoutComponent {
     }
 }
 NgxLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgxLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgxLayoutComponent, isStandalone: true, selector: "ngx-layout", inputs: { toolbarColor: "toolbarColor", editorToolbarId: "editorToolbarId", closeButtonLabel: "closeButtonLabel", backButtonLabel: "backButtonLabel", layoutToolbarExternal: "layoutToolbarExternal", layoutPrimaryActionExternal: "layoutPrimaryActionExternal", layoutActionsExternal: "layoutActionsExternal", layoutInfoBoxesExternal: "layoutInfoBoxesExternal", layoutRightExternal: "layoutRightExternal", withEditorToolbar: "withEditorToolbar", withSidenav: "withSidenav", keepFilterButtonDisplayed: "keepFilterButtonDisplayed", withCloseButton: "withCloseButton", withBackButton: "withBackButton", displayEditorToolbar: "displayEditorToolbar" }, outputs: { closeButtonClicked: "closeButtonClicked", backButtonClicked: "backButtonClicked", sideFilterClosed: "sideFilterClosed", sideFilterOpened: "sideFilterOpened" }, host: { properties: { "class.no-right": "this.noRight" } }, 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        <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\" *ngIf=\"layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-content></ng-content>\n    </div>\n    <ng-container *ngIf=\"(mediaService.isHandset$ | async) && actionsToolbar\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar id=\"actions-toolbar\" class=\"actions\" [color]=\"toolbarColor\" [class.bottom]=\"mediaService.isHandset$ | async\">\n        <span class=\"primary-action-container\" *ngIf=\"layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-container *ngIf=\"layoutActions\">\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        </ng-container>\n        <div class=\"info-boxes-container\" *ngIf=\"layoutInfoBoxes && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n        </div>\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\" *ngIf=\"layoutToolbar || layoutRight\">\n        <button type=\"button\" id=\"sidenav-button\" mat-icon-button *ngIf=\"withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false\" (click)=\"sidenavService.toggle()\">\n            <mat-icon>menu</mat-icon>\n        </button>\n        <button type=\"button\" id=\"back-button\" mat-icon-button *ngIf=\"withBackButton\" (click)=\"this.backButtonClicked.emit($event)\" [matTooltip]=\"backButtonLabel\">\n            <mat-icon>arrow_back</mat-icon>\n        </button>\n        <div id=\"toolbar-content-container\">\n            <ng-container *ngIf=\"layoutToolbar\">\n                <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n            </ng-container>\n        </div>\n        <button type=\"button\" id=\"filter-button\" mat-icon-button (click)=\"sideFilter.toggle()\" *ngIf=\"sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight\" matTooltip=\"Afficher/Masquer les filtres\">\n            <mat-icon>tune</mat-icon>\n        </button>\n        <button type=\"button\" id=\"close-button\" mat-icon-button *ngIf=\"withCloseButton\" (click)=\"this.closeButtonClicked.emit($event)\" [matTooltip]=\"closeButtonLabel\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <ng-container *ngIf=\"(layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n    <mat-drawer-container *ngIf=\"layoutRight; else content\" autosize=\"true\">\n        <mat-drawer-content>\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </mat-drawer-content>\n        <mat-drawer id=\"side-filter\" #sideFilter (closed)=\"sideFilterClosed.emit()\" (openedChange)=\"sideFilterOpened.emit()\" class=\"right\" position=\"end\" [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\" [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\" [opened]=\"(mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n        </mat-drawer>\n    </mat-drawer-container>\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left.no-right .main-content{padding:0}ngx-layout mat-sidenav-container{position:absolute;inset:0}ngx-layout mat-sidenav-content,ngx-layout mat-drawer-content{display:flex!important;flex-direction:column}ngx-layout mat-sidenav{width:200px}ngx-layout mat-drawer{width:220px}ngx-layout mat-drawer.right{padding:.3rem}ngx-layout mat-drawer.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.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.right [icons-container]{display:flex;align-items:center}ngx-layout mat-drawer.right [filters-icon]{cursor:pointer;transition:color .3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-chip-list-wrapper{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{position:relative}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]):hover:before{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.right [filters-toggle-group]{display:flex}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle{transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle mat-icon{margin-right:1rem}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-label-content{text-align:start}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-focus-overlay{height:100%}ngx-layout mat-drawer.right mat-form-field{width:100%}ngx-layout mat-drawer.right .mat-form-field-infix{width:inherit}ngx-layout mat-drawer.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;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#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{-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i4.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NgxLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgxLayoutComponent, isStandalone: true, selector: "ngx-layout", inputs: { toolbarColor: "toolbarColor", editorToolbarId: "editorToolbarId", closeButtonLabel: "closeButtonLabel", backButtonLabel: "backButtonLabel", layoutToolbarExternal: "layoutToolbarExternal", layoutPrimaryActionExternal: "layoutPrimaryActionExternal", layoutActionsExternal: "layoutActionsExternal", layoutInfoBoxesExternal: "layoutInfoBoxesExternal", layoutRightExternal: "layoutRightExternal", withEditorToolbar: "withEditorToolbar", withSidenav: "withSidenav", keepFilterButtonDisplayed: "keepFilterButtonDisplayed", withCloseButton: "withCloseButton", withBackButton: "withBackButton", displayEditorToolbar: "displayEditorToolbar" }, outputs: { closeButtonClicked: "closeButtonClicked", backButtonClicked: "backButtonClicked", sideFilterClosed: "sideFilterClosed", sideFilterOpened: "sideFilterOpened" }, host: { properties: { "class.no-right": "this.noRight" } }, 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        <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\" *ngIf=\"layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-content></ng-content>\n    </div>\n    <ng-container *ngIf=\"(mediaService.isHandset$ | async) && actionsToolbar\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar id=\"actions-toolbar\" class=\"actions\" [color]=\"toolbarColor\" [class.bottom]=\"mediaService.isHandset$ | async\">\n        <span class=\"primary-action-container\" *ngIf=\"layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-container *ngIf=\"layoutActions\">\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        </ng-container>\n        <div class=\"info-boxes-container\" *ngIf=\"layoutInfoBoxes && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n        </div>\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\" *ngIf=\"layoutToolbar || layoutRight\">\n        <button type=\"button\" id=\"sidenav-button\" mat-icon-button *ngIf=\"withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false\" (click)=\"sidenavService.toggle()\">\n            <mat-icon>menu</mat-icon>\n        </button>\n        <button type=\"button\" id=\"back-button\" mat-icon-button *ngIf=\"withBackButton\" (click)=\"this.backButtonClicked.emit($event)\" [matTooltip]=\"backButtonLabel\">\n            <mat-icon>arrow_back</mat-icon>\n        </button>\n        <div id=\"toolbar-content-container\">\n            <ng-container *ngIf=\"layoutToolbar\">\n                <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n            </ng-container>\n        </div>\n        <button type=\"button\" id=\"filter-button\" mat-icon-button (click)=\"sideFilter.toggle()\" *ngIf=\"sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight\" matTooltip=\"Afficher/Masquer les filtres\">\n            <mat-icon>tune</mat-icon>\n        </button>\n        <button type=\"button\" id=\"close-button\" mat-icon-button *ngIf=\"withCloseButton\" (click)=\"this.closeButtonClicked.emit($event)\" [matTooltip]=\"closeButtonLabel\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <ng-container *ngIf=\"(layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n    <mat-drawer-container *ngIf=\"layoutRight; else content\" autosize=\"true\">\n        <mat-drawer-content>\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </mat-drawer-content>\n        <mat-drawer id=\"side-filter\" #sideFilter (closed)=\"sideFilterClosed.emit()\" (openedChange)=\"sideFilterOpened.emit()\" class=\"right\" position=\"end\" [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\" [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\" [opened]=\"(mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n        </mat-drawer>\n    </mat-drawer-container>\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left.no-right .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{width:220px}ngx-layout mat-drawer.right{padding:.3rem}ngx-layout mat-drawer.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.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.right [icons-container]{display:flex;align-items:center}ngx-layout mat-drawer.right [filters-icon]{cursor:pointer;transition:color .3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-chip-list-wrapper{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{position:relative}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]):hover:before{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.right [filters-toggle-group]{display:flex}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle{transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle mat-icon{margin-right:1rem}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-label-content{text-align:start}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-focus-overlay{height:100%}ngx-layout mat-drawer.right mat-form-field{width:100%}ngx-layout mat-drawer.right .mat-form-field-infix{width:inherit}ngx-layout mat-drawer.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;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#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{-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i4.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-layout', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
@@ -107,7 +107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         MatSidenavModule,
                         MatToolbarModule,
                         MatTooltipModule
-                    ], template: "<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n    <div class=\"main-content\">\n        <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\" *ngIf=\"layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-content></ng-content>\n    </div>\n    <ng-container *ngIf=\"(mediaService.isHandset$ | async) && actionsToolbar\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar id=\"actions-toolbar\" class=\"actions\" [color]=\"toolbarColor\" [class.bottom]=\"mediaService.isHandset$ | async\">\n        <span class=\"primary-action-container\" *ngIf=\"layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-container *ngIf=\"layoutActions\">\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        </ng-container>\n        <div class=\"info-boxes-container\" *ngIf=\"layoutInfoBoxes && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n        </div>\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\" *ngIf=\"layoutToolbar || layoutRight\">\n        <button type=\"button\" id=\"sidenav-button\" mat-icon-button *ngIf=\"withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false\" (click)=\"sidenavService.toggle()\">\n            <mat-icon>menu</mat-icon>\n        </button>\n        <button type=\"button\" id=\"back-button\" mat-icon-button *ngIf=\"withBackButton\" (click)=\"this.backButtonClicked.emit($event)\" [matTooltip]=\"backButtonLabel\">\n            <mat-icon>arrow_back</mat-icon>\n        </button>\n        <div id=\"toolbar-content-container\">\n            <ng-container *ngIf=\"layoutToolbar\">\n                <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n            </ng-container>\n        </div>\n        <button type=\"button\" id=\"filter-button\" mat-icon-button (click)=\"sideFilter.toggle()\" *ngIf=\"sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight\" matTooltip=\"Afficher/Masquer les filtres\">\n            <mat-icon>tune</mat-icon>\n        </button>\n        <button type=\"button\" id=\"close-button\" mat-icon-button *ngIf=\"withCloseButton\" (click)=\"this.closeButtonClicked.emit($event)\" [matTooltip]=\"closeButtonLabel\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <ng-container *ngIf=\"(layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n    <mat-drawer-container *ngIf=\"layoutRight; else content\" autosize=\"true\">\n        <mat-drawer-content>\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </mat-drawer-content>\n        <mat-drawer id=\"side-filter\" #sideFilter (closed)=\"sideFilterClosed.emit()\" (openedChange)=\"sideFilterOpened.emit()\" class=\"right\" position=\"end\" [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\" [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\" [opened]=\"(mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n        </mat-drawer>\n    </mat-drawer-container>\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left.no-right .main-content{padding:0}ngx-layout mat-sidenav-container{position:absolute;inset:0}ngx-layout mat-sidenav-content,ngx-layout mat-drawer-content{display:flex!important;flex-direction:column}ngx-layout mat-sidenav{width:200px}ngx-layout mat-drawer{width:220px}ngx-layout mat-drawer.right{padding:.3rem}ngx-layout mat-drawer.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.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.right [icons-container]{display:flex;align-items:center}ngx-layout mat-drawer.right [filters-icon]{cursor:pointer;transition:color .3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-chip-list-wrapper{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{position:relative}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]):hover:before{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.right [filters-toggle-group]{display:flex}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle{transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle mat-icon{margin-right:1rem}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-label-content{text-align:start}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-focus-overlay{height:100%}ngx-layout mat-drawer.right mat-form-field{width:100%}ngx-layout mat-drawer.right .mat-form-field-infix{width:inherit}ngx-layout mat-drawer.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;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#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{-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;border-radius:6px}\n"] }]
+                    ], template: "<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n    <div class=\"main-content\">\n        <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\" *ngIf=\"layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-content></ng-content>\n    </div>\n    <ng-container *ngIf=\"(mediaService.isHandset$ | async) && actionsToolbar\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar id=\"actions-toolbar\" class=\"actions\" [color]=\"toolbarColor\" [class.bottom]=\"mediaService.isHandset$ | async\">\n        <span class=\"primary-action-container\" *ngIf=\"layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n        </span>\n        <ng-container *ngIf=\"layoutActions\">\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        </ng-container>\n        <div class=\"info-boxes-container\" *ngIf=\"layoutInfoBoxes && (mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n        </div>\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\" *ngIf=\"layoutToolbar || layoutRight\">\n        <button type=\"button\" id=\"sidenav-button\" mat-icon-button *ngIf=\"withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false\" (click)=\"sidenavService.toggle()\">\n            <mat-icon>menu</mat-icon>\n        </button>\n        <button type=\"button\" id=\"back-button\" mat-icon-button *ngIf=\"withBackButton\" (click)=\"this.backButtonClicked.emit($event)\" [matTooltip]=\"backButtonLabel\">\n            <mat-icon>arrow_back</mat-icon>\n        </button>\n        <div id=\"toolbar-content-container\">\n            <ng-container *ngIf=\"layoutToolbar\">\n                <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n            </ng-container>\n        </div>\n        <button type=\"button\" id=\"filter-button\" mat-icon-button (click)=\"sideFilter.toggle()\" *ngIf=\"sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight\" matTooltip=\"Afficher/Masquer les filtres\">\n            <mat-icon>tune</mat-icon>\n        </button>\n        <button type=\"button\" id=\"close-button\" mat-icon-button *ngIf=\"withCloseButton\" (click)=\"this.closeButtonClicked.emit($event)\" [matTooltip]=\"closeButtonLabel\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <ng-container *ngIf=\"(layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false\">\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    </ng-container>\n    <mat-drawer-container *ngIf=\"layoutRight; else content\" autosize=\"true\">\n        <mat-drawer-content>\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </mat-drawer-content>\n        <mat-drawer id=\"side-filter\" #sideFilter (closed)=\"sideFilterClosed.emit()\" (openedChange)=\"sideFilterOpened.emit()\" class=\"right\" position=\"end\" [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\" [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\" [opened]=\"(mediaService.isHandset$ | async) === false\">\n            <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n        </mat-drawer>\n    </mat-drawer-container>\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left.no-right .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{width:220px}ngx-layout mat-drawer.right{padding:.3rem}ngx-layout mat-drawer.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.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.right [icons-container]{display:flex;align-items:center}ngx-layout mat-drawer.right [filters-icon]{cursor:pointer;transition:color .3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-chip-list-wrapper{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{position:relative}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip{padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer.right [filters-chip-list] .mat-standard-chip:not([disabled]):hover:before{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.right [filters-toggle-group]{display:flex}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle{transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle mat-icon{margin-right:1rem}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-label-content{text-align:start}ngx-layout mat-drawer.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-focus-overlay{height:100%}ngx-layout mat-drawer.right mat-form-field{width:100%}ngx-layout mat-drawer.right .mat-form-field-infix{width:inherit}ngx-layout mat-drawer.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;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#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{-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;border-radius:6px}\n"] }]
         }], propDecorators: { toolbarColor: [{
                 type: Input
             }], editorToolbarId: [{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hug/ngx-layout",
-    "version": "1.1.5",
+    "version": "1.1.7",
     "description": "HUG Angular - layout component",
     "homepage": "https://github.com/dsi-hug/ngx-components",
     "license": "GPL-3.0-only",
@@ -39,8 +39,8 @@
         "@angular/core": ">= 14",
         "@angular/cdk": ">= 14",
         "@angular/material": ">= 14",
-        "@hug/ngx-core": "1.1.8",
-        "@hug/ngx-sidenav": "1.1.3"
+        "@hug/ngx-core": "1.1.11",
+        "@hug/ngx-sidenav": "1.1.5"
     },
     "dependencies": {
         "tslib": "^2.6.3"