@hug/ngx-layout 2.0.0 → 3.0.0

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+# 3.0.0 (2025-02-06)
+
+### 🚀 Features
+
+- ⚠️ migrate to Angular 19 ([d186ab2](https://github.com/DSI-HUG/ngx-components/commit/d186ab2))
+- ⚠️ remove useless DialogService and TooltipService ([481d2d2](https://github.com/DSI-HUG/ngx-components/commit/481d2d2))
+
+### 🌱 Dependencies
+
+- **@hug/ngx-sidenav:** upgrade to v3.0.0 ([0f8f4f9](https://github.com/DSI-HUG/ngx-components/commit/0f8f4f9))
+- **@hug/ngx-core:** upgrade to v3.0.0 ([b945bd6](https://github.com/DSI-HUG/ngx-components/commit/b945bd6))
+
+### ❤️ Thank You
+
+- damien-guillermet @damien-guillermet
+- dsi-hug-bot @dsi-hug-bot
+- Serge @serge
+
+## 2.0.1 (2024-09-20)
+
+
+### 🐛 Fixes
+
+- **ngx-layout:** remove hardcoded backcolor ([36b052e](https://github.com/DSI-HUG/ngx-components/commit/36b052e))
+
+
+### ❤️  Thank You
+
+- Serge
+
 # 2.0.0 (2024-09-11)
 
 

package/fesm2022/hug-ngx-layout.mjs

@@ -1,7 +1,7 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, ContentChild, HostBinding, ViewChild } from '@angular/core';
+import { EventEmitter, inject, ElementRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, ContentChild, ViewChild } from '@angular/core';
 import { MatIconButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { MatDrawer, MatDrawerContainer, MatDrawerContent } from '@angular/material/sidenav';
@@ -29,10 +29,10 @@ class NgxLayoutComponent {
     layoutActionsContent;
     layoutInfoBoxesContent;
     layoutRightContent;
-    noRight = false;
     sideFilter;
     mediaService = inject(NgxMediaService);
     sidenavService = inject(NgxSidenavService);
+    elementRef = inject(ElementRef);
     get layoutToolbar() {
         return this.layoutToolbarExternal ?? this.layoutToolbarContent;
     }
@@ -47,7 +47,12 @@ class NgxLayoutComponent {
     }
     get layoutRight() {
         const value = this.layoutRightExternal ?? this.layoutRightContent;
-        this.noRight = !value;
+        if (!value) {
+            this.elementRef.nativeElement.setAttribute('no-right', 'true');
+        }
+        else {
+            this.elementRef.nativeElement.removeAttribute('no-right');
+        }
         return value;
     }
     _withSidenav = false;
@@ -84,12 +89,12 @@ class NgxLayoutComponent {
     openSideFilter() {
         void this.sideFilter?.open();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NgxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", 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", withSidenav: "withSidenav", keepFilterButtonDisplayed: "keepFilterButtonDisplayed", withCloseButton: "withCloseButton", withBackButton: "withBackButton" }, 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        @if (\n            layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\n        ) {\n            <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        <ng-content></ng-content>\n    </div>\n    @if ((mediaService.isHandset$ | async) && actionsToolbar) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar\n        id=\"actions-toolbar\"\n        class=\"actions\"\n        [color]=\"toolbarColor\"\n        [class.bottom]=\"mediaService.isHandset$ | async\">\n        @if (layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n            <span class=\"primary-action-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        @if (layoutActions) {\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        }\n        @if (layoutInfoBoxes && (mediaService.isHandset$ | async) === false) {\n            <div class=\"info-boxes-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n            </div>\n        }\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    @if (layoutToolbar || layoutRight) {\n        <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\">\n            @if (withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false) {\n                <button type=\"button\" id=\"sidenav-button\" mat-icon-button (click)=\"sidenavService.toggle()\">\n                    <mat-icon>menu</mat-icon>\n                </button>\n            }\n            @if (withBackButton) {\n                <button\n                    type=\"button\"\n                    id=\"back-button\"\n                    mat-icon-button\n                    (click)=\"this.backButtonClicked.emit($event)\"\n                    [matTooltip]=\"backButtonLabel\">\n                    <mat-icon>arrow_back</mat-icon>\n                </button>\n            }\n            <div id=\"toolbar-content-container\">\n                @if (layoutToolbar) {\n                    <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n                }\n            </div>\n            @if (sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight) {\n                <button\n                    type=\"button\"\n                    id=\"filter-button\"\n                    mat-icon-button\n                    (click)=\"sideFilter.toggle()\"\n                    matTooltip=\"Afficher/Masquer les filtres\">\n                    <mat-icon>tune</mat-icon>\n                </button>\n            }\n            @if (withCloseButton) {\n                <button\n                    type=\"button\"\n                    id=\"close-button\"\n                    mat-icon-button\n                    (click)=\"this.closeButtonClicked.emit($event)\"\n                    [matTooltip]=\"closeButtonLabel\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            }\n        </mat-toolbar>\n    }\n\n    @if ((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n    @if (layoutRight) {\n        <mat-drawer-container autosize=\"true\">\n            <mat-drawer-content>\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </mat-drawer-content>\n            <mat-drawer\n                id=\"side-filter\"\n                #sideFilter\n                (closed)=\"sideFilterClosed.emit()\"\n                (openedChange)=\"sideFilterOpened.emit()\"\n                class=\"right\"\n                position=\"end\"\n                [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\"\n                [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\"\n                [opened]=\"(mediaService.isHandset$ | async) === false\">\n                <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n            </mat-drawer>\n        </mat-drawer-container>\n    } @else {\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    }\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left.no-right .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-listbox{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer.right [filters-chip-list] .mat-mdc-chip{position:relative;padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-mdc-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer.right [filters-chip-list] .mat-mdc-chip:not([disabled]):hover:before{font-family:Material Icons;content:\"close\";display:flex;align-items:center;justify-content:center;position:absolute;inset:0;font-weight:700;font-size:1.2rem;cursor:pointer;transition:.3s ease-in-out}ngx-layout mat-drawer.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-mdc-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 .mat-mdc-icon-button{height:40px;line-height:40px;width:40px;display:flex;justify-content:center;align-items:center;padding:0}ngx-layout .mat-toolbar#actions-toolbar{flex:0 0 auto;height:40px;font-size:inherit;padding-right:0}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container{display:flex;flex:1 1 auto;justify-content:flex-end}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container .info-box{display:flex;flex-grow:0;line-height:40px;padding-left:2rem;padding-right:2rem;box-shadow:-3px 0 5px -1px #0003}ngx-layout .mat-toolbar#actions-toolbar.bottom#actions-toolbar{display:flex;width:100%;justify-content:space-around}ngx-layout .mat-toolbar#actions-toolbar .primary-action-container{z-index:20}ngx-layout .mat-toolbar#actions-toolbar .primary-action-container button{background-color:#009688}ngx-layout .main-content{position:relative;display:flex;flex:1 1 auto;overflow:hidden}ngx-layout .main-content .primary-action-container{position:absolute;z-index:20;opacity:.8;transition:.3s ease-in-out}ngx-layout .main-content .primary-action-container:hover{opacity:1}ngx-layout .main-content .primary-action-container.bottom{right:1rem;bottom:1rem}ngx-layout .main-content .primary-action-container:not(.bottom){top:1rem;left:1rem}ngx-layout ::-webkit-scrollbar{width:12px;height:12px}ngx-layout ::-webkit-scrollbar-thumb{transition:.3s ease-in-out;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", 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", withSidenav: "withSidenav", keepFilterButtonDisplayed: "keepFilterButtonDisplayed", withCloseButton: "withCloseButton", withBackButton: "withBackButton" }, outputs: { closeButtonClicked: "closeButtonClicked", backButtonClicked: "backButtonClicked", sideFilterClosed: "sideFilterClosed", sideFilterOpened: "sideFilterOpened" }, queries: [{ propertyName: "layoutToolbarContent", first: true, predicate: ["layoutToolbar"], descendants: true }, { propertyName: "layoutPrimaryActionContent", first: true, predicate: ["layoutPrimaryAction"], descendants: true }, { propertyName: "layoutActionsContent", first: true, predicate: ["layoutActions"], descendants: true }, { propertyName: "layoutInfoBoxesContent", first: true, predicate: ["layoutInfoBoxes"], descendants: true }, { propertyName: "layoutRightContent", first: true, predicate: ["layoutRight"], descendants: true }], viewQueries: [{ propertyName: "sideFilter", first: true, predicate: ["sideFilter"], descendants: true }], ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n    <div class=\"main-content\">\n        @if (\n            layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\n        ) {\n            <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        <ng-content></ng-content>\n    </div>\n    @if ((mediaService.isHandset$ | async) && actionsToolbar) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar\n        id=\"actions-toolbar\"\n        class=\"actions\"\n        [color]=\"toolbarColor\"\n        [class.bottom]=\"mediaService.isHandset$ | async\">\n        @if (layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n            <span class=\"primary-action-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        @if (layoutActions) {\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        }\n        @if (layoutInfoBoxes && (mediaService.isHandset$ | async) === false) {\n            <div class=\"info-boxes-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n            </div>\n        }\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    @if (layoutToolbar || layoutRight) {\n        <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\">\n            @if (withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false) {\n                <button type=\"button\" id=\"sidenav-button\" mat-icon-button (click)=\"sidenavService.toggle()\">\n                    <mat-icon>menu</mat-icon>\n                </button>\n            }\n            @if (withBackButton) {\n                <button\n                    type=\"button\"\n                    id=\"back-button\"\n                    mat-icon-button\n                    (click)=\"this.backButtonClicked.emit($event)\"\n                    [matTooltip]=\"backButtonLabel\">\n                    <mat-icon>arrow_back</mat-icon>\n                </button>\n            }\n            <div id=\"toolbar-content-container\">\n                @if (layoutToolbar) {\n                    <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n                }\n            </div>\n            @if (sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight) {\n                <button\n                    type=\"button\"\n                    id=\"filter-button\"\n                    mat-icon-button\n                    (click)=\"sideFilter.toggle()\"\n                    matTooltip=\"Afficher/Masquer les filtres\">\n                    <mat-icon>tune</mat-icon>\n                </button>\n            }\n            @if (withCloseButton) {\n                <button\n                    type=\"button\"\n                    id=\"close-button\"\n                    mat-icon-button\n                    (click)=\"this.closeButtonClicked.emit($event)\"\n                    [matTooltip]=\"closeButtonLabel\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            }\n        </mat-toolbar>\n    }\n\n    @if ((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n    @if (layoutRight) {\n        <mat-drawer-container autosize=\"true\">\n            <mat-drawer-content>\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </mat-drawer-content>\n            <mat-drawer\n                id=\"side-filter\"\n                #sideFilter\n                (closed)=\"sideFilterClosed.emit()\"\n                (openedChange)=\"sideFilterOpened.emit()\"\n                class=\"right\"\n                position=\"end\"\n                [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\"\n                [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\"\n                [opened]=\"(mediaService.isHandset$ | async) === false\">\n                <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n            </mat-drawer>\n        </mat-drawer-container>\n    } @else {\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    }\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left[no-right=true] .main-content{padding:0}ngx-layout mat-sidenav-container{position:absolute;inset:0}ngx-layout mat-drawer-content,ngx-layout mat-sidenav-content{display:flex!important;flex-direction:column}ngx-layout mat-sidenav{width:200px}ngx-layout mat-drawer{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-listbox{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer.right [filters-chip-list] .mat-mdc-chip{position:relative;padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-mdc-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer.right [filters-chip-list] .mat-mdc-chip:not([disabled]):hover:before{font-family:Material Icons;content:\"close\";display:flex;align-items:center;justify-content:center;position:absolute;inset:0;font-weight:700;font-size:1.2rem;cursor:pointer;transition:.3s ease-in-out}ngx-layout mat-drawer.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-mdc-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 .mat-mdc-icon-button{height:40px;line-height:40px;width:40px;display:flex;justify-content:center;align-items:center;padding:0}ngx-layout .mat-toolbar#actions-toolbar{flex:0 0 auto;height:40px;font-size:inherit;padding-right:0}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container{display:flex;flex:1 1 auto;justify-content:flex-end}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container .info-box{display:flex;flex-grow:0;line-height:40px;padding-left:2rem;padding-right:2rem;box-shadow:-3px 0 5px -1px #0003}ngx-layout .mat-toolbar#actions-toolbar.bottom#actions-toolbar{display:flex;width:100%;justify-content:space-around}ngx-layout .mat-toolbar#actions-toolbar .primary-action-container{z-index:20}ngx-layout .main-content{position:relative;display:flex;flex:1 1 auto;overflow:hidden}ngx-layout .main-content .primary-action-container{position:absolute;z-index:20;opacity:.8;transition:.3s ease-in-out}ngx-layout .main-content .primary-action-container:hover{opacity:1}ngx-layout .main-content .primary-action-container.bottom{right:1rem;bottom:1rem}ngx-layout .main-content .primary-action-container:not(.bottom){top:1rem;left:1rem}ngx-layout ::-webkit-scrollbar{width:12px;height:12px}ngx-layout ::-webkit-scrollbar-thumb{transition:.3s ease-in-out;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NgxLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgxLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-layout', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+            args: [{ selector: 'ngx-layout', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
                         AsyncPipe,
                         MatIconButton,
@@ -99,7 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                         MatDrawerContent,
                         MatToolbar,
                         MatTooltip
-                    ], template: "<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n    <div class=\"main-content\">\n        @if (\n            layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\n        ) {\n            <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        <ng-content></ng-content>\n    </div>\n    @if ((mediaService.isHandset$ | async) && actionsToolbar) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar\n        id=\"actions-toolbar\"\n        class=\"actions\"\n        [color]=\"toolbarColor\"\n        [class.bottom]=\"mediaService.isHandset$ | async\">\n        @if (layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n            <span class=\"primary-action-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        @if (layoutActions) {\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        }\n        @if (layoutInfoBoxes && (mediaService.isHandset$ | async) === false) {\n            <div class=\"info-boxes-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n            </div>\n        }\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    @if (layoutToolbar || layoutRight) {\n        <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\">\n            @if (withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false) {\n                <button type=\"button\" id=\"sidenav-button\" mat-icon-button (click)=\"sidenavService.toggle()\">\n                    <mat-icon>menu</mat-icon>\n                </button>\n            }\n            @if (withBackButton) {\n                <button\n                    type=\"button\"\n                    id=\"back-button\"\n                    mat-icon-button\n                    (click)=\"this.backButtonClicked.emit($event)\"\n                    [matTooltip]=\"backButtonLabel\">\n                    <mat-icon>arrow_back</mat-icon>\n                </button>\n            }\n            <div id=\"toolbar-content-container\">\n                @if (layoutToolbar) {\n                    <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n                }\n            </div>\n            @if (sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight) {\n                <button\n                    type=\"button\"\n                    id=\"filter-button\"\n                    mat-icon-button\n                    (click)=\"sideFilter.toggle()\"\n                    matTooltip=\"Afficher/Masquer les filtres\">\n                    <mat-icon>tune</mat-icon>\n                </button>\n            }\n            @if (withCloseButton) {\n                <button\n                    type=\"button\"\n                    id=\"close-button\"\n                    mat-icon-button\n                    (click)=\"this.closeButtonClicked.emit($event)\"\n                    [matTooltip]=\"closeButtonLabel\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            }\n        </mat-toolbar>\n    }\n\n    @if ((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n    @if (layoutRight) {\n        <mat-drawer-container autosize=\"true\">\n            <mat-drawer-content>\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </mat-drawer-content>\n            <mat-drawer\n                id=\"side-filter\"\n                #sideFilter\n                (closed)=\"sideFilterClosed.emit()\"\n                (openedChange)=\"sideFilterOpened.emit()\"\n                class=\"right\"\n                position=\"end\"\n                [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\"\n                [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\"\n                [opened]=\"(mediaService.isHandset$ | async) === false\">\n                <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n            </mat-drawer>\n        </mat-drawer-container>\n    } @else {\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    }\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left.no-right .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-listbox{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer.right [filters-chip-list] .mat-mdc-chip{position:relative;padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-mdc-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer.right [filters-chip-list] .mat-mdc-chip:not([disabled]):hover:before{font-family:Material Icons;content:\"close\";display:flex;align-items:center;justify-content:center;position:absolute;inset:0;font-weight:700;font-size:1.2rem;cursor:pointer;transition:.3s ease-in-out}ngx-layout mat-drawer.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-mdc-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 .mat-mdc-icon-button{height:40px;line-height:40px;width:40px;display:flex;justify-content:center;align-items:center;padding:0}ngx-layout .mat-toolbar#actions-toolbar{flex:0 0 auto;height:40px;font-size:inherit;padding-right:0}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container{display:flex;flex:1 1 auto;justify-content:flex-end}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container .info-box{display:flex;flex-grow:0;line-height:40px;padding-left:2rem;padding-right:2rem;box-shadow:-3px 0 5px -1px #0003}ngx-layout .mat-toolbar#actions-toolbar.bottom#actions-toolbar{display:flex;width:100%;justify-content:space-around}ngx-layout .mat-toolbar#actions-toolbar .primary-action-container{z-index:20}ngx-layout .mat-toolbar#actions-toolbar .primary-action-container button{background-color:#009688}ngx-layout .main-content{position:relative;display:flex;flex:1 1 auto;overflow:hidden}ngx-layout .main-content .primary-action-container{position:absolute;z-index:20;opacity:.8;transition:.3s ease-in-out}ngx-layout .main-content .primary-action-container:hover{opacity:1}ngx-layout .main-content .primary-action-container.bottom{right:1rem;bottom:1rem}ngx-layout .main-content .primary-action-container:not(.bottom){top:1rem;left:1rem}ngx-layout ::-webkit-scrollbar{width:12px;height:12px}ngx-layout ::-webkit-scrollbar-thumb{transition:.3s ease-in-out;border-radius:6px}\n"] }]
+                    ], template: "<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n    <div class=\"main-content\">\n        @if (\n            layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\n        ) {\n            <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        <ng-content></ng-content>\n    </div>\n    @if ((mediaService.isHandset$ | async) && actionsToolbar) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar\n        id=\"actions-toolbar\"\n        class=\"actions\"\n        [color]=\"toolbarColor\"\n        [class.bottom]=\"mediaService.isHandset$ | async\">\n        @if (layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n            <span class=\"primary-action-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        @if (layoutActions) {\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        }\n        @if (layoutInfoBoxes && (mediaService.isHandset$ | async) === false) {\n            <div class=\"info-boxes-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n            </div>\n        }\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    @if (layoutToolbar || layoutRight) {\n        <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\">\n            @if (withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false) {\n                <button type=\"button\" id=\"sidenav-button\" mat-icon-button (click)=\"sidenavService.toggle()\">\n                    <mat-icon>menu</mat-icon>\n                </button>\n            }\n            @if (withBackButton) {\n                <button\n                    type=\"button\"\n                    id=\"back-button\"\n                    mat-icon-button\n                    (click)=\"this.backButtonClicked.emit($event)\"\n                    [matTooltip]=\"backButtonLabel\">\n                    <mat-icon>arrow_back</mat-icon>\n                </button>\n            }\n            <div id=\"toolbar-content-container\">\n                @if (layoutToolbar) {\n                    <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n                }\n            </div>\n            @if (sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight) {\n                <button\n                    type=\"button\"\n                    id=\"filter-button\"\n                    mat-icon-button\n                    (click)=\"sideFilter.toggle()\"\n                    matTooltip=\"Afficher/Masquer les filtres\">\n                    <mat-icon>tune</mat-icon>\n                </button>\n            }\n            @if (withCloseButton) {\n                <button\n                    type=\"button\"\n                    id=\"close-button\"\n                    mat-icon-button\n                    (click)=\"this.closeButtonClicked.emit($event)\"\n                    [matTooltip]=\"closeButtonLabel\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            }\n        </mat-toolbar>\n    }\n\n    @if ((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n    @if (layoutRight) {\n        <mat-drawer-container autosize=\"true\">\n            <mat-drawer-content>\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </mat-drawer-content>\n            <mat-drawer\n                id=\"side-filter\"\n                #sideFilter\n                (closed)=\"sideFilterClosed.emit()\"\n                (openedChange)=\"sideFilterOpened.emit()\"\n                class=\"right\"\n                position=\"end\"\n                [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\"\n                [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\"\n                [opened]=\"(mediaService.isHandset$ | async) === false\">\n                <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n            </mat-drawer>\n        </mat-drawer-container>\n    } @else {\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    }\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left[no-right=true] .main-content{padding:0}ngx-layout mat-sidenav-container{position:absolute;inset:0}ngx-layout mat-drawer-content,ngx-layout mat-sidenav-content{display:flex!important;flex-direction:column}ngx-layout mat-sidenav{width:200px}ngx-layout mat-drawer{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-listbox{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer.right [filters-chip-list] .mat-mdc-chip{position:relative;padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-mdc-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer.right [filters-chip-list] .mat-mdc-chip:not([disabled]):hover:before{font-family:Material Icons;content:\"close\";display:flex;align-items:center;justify-content:center;position:absolute;inset:0;font-weight:700;font-size:1.2rem;cursor:pointer;transition:.3s ease-in-out}ngx-layout mat-drawer.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-mdc-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 .mat-mdc-icon-button{height:40px;line-height:40px;width:40px;display:flex;justify-content:center;align-items:center;padding:0}ngx-layout .mat-toolbar#actions-toolbar{flex:0 0 auto;height:40px;font-size:inherit;padding-right:0}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container{display:flex;flex:1 1 auto;justify-content:flex-end}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container .info-box{display:flex;flex-grow:0;line-height:40px;padding-left:2rem;padding-right:2rem;box-shadow:-3px 0 5px -1px #0003}ngx-layout .mat-toolbar#actions-toolbar.bottom#actions-toolbar{display:flex;width:100%;justify-content:space-around}ngx-layout .mat-toolbar#actions-toolbar .primary-action-container{z-index:20}ngx-layout .main-content{position:relative;display:flex;flex:1 1 auto;overflow:hidden}ngx-layout .main-content .primary-action-container{position:absolute;z-index:20;opacity:.8;transition:.3s ease-in-out}ngx-layout .main-content .primary-action-container:hover{opacity:1}ngx-layout .main-content .primary-action-container.bottom{right:1rem;bottom:1rem}ngx-layout .main-content .primary-action-container:not(.bottom){top:1rem;left:1rem}ngx-layout ::-webkit-scrollbar{width:12px;height:12px}ngx-layout ::-webkit-scrollbar-thumb{transition:.3s ease-in-out;border-radius:6px}\n"] }]
         }], propDecorators: { toolbarColor: [{
                 type: Input
             }], editorToolbarId: [{
@@ -141,9 +146,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
             }], layoutRightContent: [{
                 type: ContentChild,
                 args: ['layoutRight']
-            }], noRight: [{
-                type: HostBinding,
-                args: ['class.no-right']
             }], sideFilter: [{
                 type: ViewChild,
                 args: ['sideFilter']

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

@@ -1 +1 @@
-{"version":3,"file":"hug-ngx-layout.mjs","sources":["../../../projects/layout/src/layout.component.ts","../../../projects/layout/src/layout.component.html","../../../projects/layout/src/hug-ngx-layout.ts"],"sourcesContent":["import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, HostBinding, inject, Input, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatDrawer, MatDrawerContainer, MatDrawerContent } from '@angular/material/sidenav';\nimport { MatToolbar } from '@angular/material/toolbar';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { NgxMediaService } from '@hug/ngx-core';\nimport { NgxSidenavService } from '@hug/ngx-sidenav';\n\n@Component({\n    selector: 'ngx-layout',\n    templateUrl: './layout.component.html',\n    styleUrls: ['./layout.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true,\n    imports: [\n        NgTemplateOutlet,\n        AsyncPipe,\n        MatIconButton,\n        MatIcon,\n        MatDrawer,\n        MatDrawerContainer,\n        MatDrawerContent,\n        MatToolbar,\n        MatTooltip\n    ]\n})\nexport class NgxLayoutComponent {\n    @Input() public toolbarColor = 'primary';\n    @Input() public editorToolbarId = 'editor-toolbar';\n\n    @Input() public closeButtonLabel = 'Fermer';\n    @Input() public backButtonLabel = 'Retour';\n\n    @Input() public layoutToolbarExternal?: TemplateRef<unknown>;\n    @Input() public layoutPrimaryActionExternal?: TemplateRef<unknown>;\n    @Input() public layoutActionsExternal?: TemplateRef<unknown>;\n    @Input() public layoutInfoBoxesExternal?: TemplateRef<unknown>;\n    @Input() public layoutRightExternal?: TemplateRef<unknown>;\n\n    @Output() public readonly closeButtonClicked = new EventEmitter<MouseEvent>();\n    @Output() public readonly backButtonClicked = new EventEmitter<MouseEvent>();\n    @Output() public readonly sideFilterClosed = new EventEmitter<void>();\n    @Output() public readonly sideFilterOpened = new EventEmitter<void>();\n\n    @ContentChild('layoutToolbar') protected layoutToolbarContent?: TemplateRef<unknown>;\n    @ContentChild('layoutPrimaryAction') protected layoutPrimaryActionContent?: TemplateRef<unknown>;\n    @ContentChild('layoutActions') protected layoutActionsContent?: TemplateRef<unknown>;\n    @ContentChild('layoutInfoBoxes') protected layoutInfoBoxesContent?: TemplateRef<unknown>;\n    @ContentChild('layoutRight') protected layoutRightContent?: TemplateRef<unknown>;\n\n    @HostBinding('class.no-right') protected noRight = false;\n\n    @ViewChild('sideFilter') protected sideFilter?: MatDrawer;\n\n    protected mediaService = inject(NgxMediaService);\n    protected sidenavService = inject(NgxSidenavService);\n\n    public get layoutToolbar(): TemplateRef<unknown> | undefined {\n        return this.layoutToolbarExternal ?? this.layoutToolbarContent;\n    }\n\n    public get layoutPrimaryAction(): TemplateRef<unknown> | undefined {\n        return this.layoutPrimaryActionExternal ?? this.layoutPrimaryActionContent;\n    }\n\n    public get layoutActions(): TemplateRef<unknown> | undefined {\n        return this.layoutActionsExternal ?? this.layoutActionsContent;\n    }\n\n    public get layoutInfoBoxes(): TemplateRef<unknown> | undefined {\n        return this.layoutInfoBoxesExternal ?? this.layoutInfoBoxesContent;\n    }\n\n    public get layoutRight(): TemplateRef<unknown> | undefined {\n        const value = this.layoutRightExternal ?? this.layoutRightContent;\n        this.noRight = !value;\n        return value;\n    }\n\n    private _withSidenav = false;\n\n    @Input()\n    public set withSidenav(value: BooleanInput) {\n        this._withSidenav = coerceBooleanProperty(value);\n    }\n\n    public get withSidenav(): BooleanInput {\n        return this._withSidenav;\n    }\n\n    private _keepFilterButtonDisplayed = true;\n\n    @Input()\n    public set keepFilterButtonDisplayed(value: BooleanInput) {\n        this._keepFilterButtonDisplayed = coerceBooleanProperty(value);\n    }\n\n    public get keepFilterButtonDisplayed(): BooleanInput {\n        return this._keepFilterButtonDisplayed;\n    }\n\n    private _withCloseButton = false;\n\n    @Input()\n    public set withCloseButton(value: BooleanInput) {\n        this._withCloseButton = coerceBooleanProperty(value);\n    }\n\n    public get withCloseButton(): BooleanInput {\n        return this._withCloseButton;\n    }\n\n    private _withBackButton = false;\n\n    @Input()\n    public set withBackButton(value: BooleanInput) {\n        this._withBackButton = coerceBooleanProperty(value);\n    }\n\n    public get withBackButton(): BooleanInput {\n        return this._withBackButton;\n    }\n\n    public closeSideFilter(): void {\n        void this.sideFilter?.close();\n    }\n\n    public openSideFilter(): void {\n        void this.sideFilter?.open();\n    }\n}\n","<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n    <div class=\"main-content\">\n        @if (\n            layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\n        ) {\n            <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        <ng-content></ng-content>\n    </div>\n    @if ((mediaService.isHandset$ | async) && actionsToolbar) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar\n        id=\"actions-toolbar\"\n        class=\"actions\"\n        [color]=\"toolbarColor\"\n        [class.bottom]=\"mediaService.isHandset$ | async\">\n        @if (layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n            <span class=\"primary-action-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        @if (layoutActions) {\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        }\n        @if (layoutInfoBoxes && (mediaService.isHandset$ | async) === false) {\n            <div class=\"info-boxes-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n            </div>\n        }\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    @if (layoutToolbar || layoutRight) {\n        <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\">\n            @if (withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false) {\n                <button type=\"button\" id=\"sidenav-button\" mat-icon-button (click)=\"sidenavService.toggle()\">\n                    <mat-icon>menu</mat-icon>\n                </button>\n            }\n            @if (withBackButton) {\n                <button\n                    type=\"button\"\n                    id=\"back-button\"\n                    mat-icon-button\n                    (click)=\"this.backButtonClicked.emit($event)\"\n                    [matTooltip]=\"backButtonLabel\">\n                    <mat-icon>arrow_back</mat-icon>\n                </button>\n            }\n            <div id=\"toolbar-content-container\">\n                @if (layoutToolbar) {\n                    <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n                }\n            </div>\n            @if (sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight) {\n                <button\n                    type=\"button\"\n                    id=\"filter-button\"\n                    mat-icon-button\n                    (click)=\"sideFilter.toggle()\"\n                    matTooltip=\"Afficher/Masquer les filtres\">\n                    <mat-icon>tune</mat-icon>\n                </button>\n            }\n            @if (withCloseButton) {\n                <button\n                    type=\"button\"\n                    id=\"close-button\"\n                    mat-icon-button\n                    (click)=\"this.closeButtonClicked.emit($event)\"\n                    [matTooltip]=\"closeButtonLabel\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            }\n        </mat-toolbar>\n    }\n\n    @if ((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n    @if (layoutRight) {\n        <mat-drawer-container autosize=\"true\">\n            <mat-drawer-content>\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </mat-drawer-content>\n            <mat-drawer\n                id=\"side-filter\"\n                #sideFilter\n                (closed)=\"sideFilterClosed.emit()\"\n                (openedChange)=\"sideFilterOpened.emit()\"\n                class=\"right\"\n                position=\"end\"\n                [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\"\n                [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\"\n                [opened]=\"(mediaService.isHandset$ | async) === false\">\n                <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n            </mat-drawer>\n        </mat-drawer-container>\n    } @else {\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"hug-ngx-layout.mjs","sources":["../../../projects/layout/src/layout.component.ts","../../../projects/layout/src/layout.component.html","../../../projects/layout/src/hug-ngx-layout.ts"],"sourcesContent":["import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, inject, Input, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatDrawer, MatDrawerContainer, MatDrawerContent } from '@angular/material/sidenav';\nimport { MatToolbar } from '@angular/material/toolbar';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { NgxMediaService } from '@hug/ngx-core';\nimport { NgxSidenavService } from '@hug/ngx-sidenav';\n\n@Component({\n    selector: 'ngx-layout',\n    templateUrl: './layout.component.html',\n    styleUrls: ['./layout.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        NgTemplateOutlet,\n        AsyncPipe,\n        MatIconButton,\n        MatIcon,\n        MatDrawer,\n        MatDrawerContainer,\n        MatDrawerContent,\n        MatToolbar,\n        MatTooltip\n    ]\n})\nexport class NgxLayoutComponent {\n    @Input() public toolbarColor = 'primary';\n    @Input() public editorToolbarId = 'editor-toolbar';\n\n    @Input() public closeButtonLabel = 'Fermer';\n    @Input() public backButtonLabel = 'Retour';\n\n    @Input() public layoutToolbarExternal?: TemplateRef<unknown>;\n    @Input() public layoutPrimaryActionExternal?: TemplateRef<unknown>;\n    @Input() public layoutActionsExternal?: TemplateRef<unknown>;\n    @Input() public layoutInfoBoxesExternal?: TemplateRef<unknown>;\n    @Input() public layoutRightExternal?: TemplateRef<unknown>;\n\n    @Output() public readonly closeButtonClicked = new EventEmitter<MouseEvent>();\n    @Output() public readonly backButtonClicked = new EventEmitter<MouseEvent>();\n    @Output() public readonly sideFilterClosed = new EventEmitter<void>();\n    @Output() public readonly sideFilterOpened = new EventEmitter<void>();\n\n    @ContentChild('layoutToolbar') protected layoutToolbarContent?: TemplateRef<unknown>;\n    @ContentChild('layoutPrimaryAction') protected layoutPrimaryActionContent?: TemplateRef<unknown>;\n    @ContentChild('layoutActions') protected layoutActionsContent?: TemplateRef<unknown>;\n    @ContentChild('layoutInfoBoxes') protected layoutInfoBoxesContent?: TemplateRef<unknown>;\n    @ContentChild('layoutRight') protected layoutRightContent?: TemplateRef<unknown>;\n\n    @ViewChild('sideFilter') protected sideFilter?: MatDrawer;\n\n    protected mediaService = inject(NgxMediaService);\n    protected sidenavService = inject(NgxSidenavService);\n    protected elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    public get layoutToolbar(): TemplateRef<unknown> | undefined {\n        return this.layoutToolbarExternal ?? this.layoutToolbarContent;\n    }\n\n    public get layoutPrimaryAction(): TemplateRef<unknown> | undefined {\n        return this.layoutPrimaryActionExternal ?? this.layoutPrimaryActionContent;\n    }\n\n    public get layoutActions(): TemplateRef<unknown> | undefined {\n        return this.layoutActionsExternal ?? this.layoutActionsContent;\n    }\n\n    public get layoutInfoBoxes(): TemplateRef<unknown> | undefined {\n        return this.layoutInfoBoxesExternal ?? this.layoutInfoBoxesContent;\n    }\n\n    public get layoutRight(): TemplateRef<unknown> | undefined {\n        const value = this.layoutRightExternal ?? this.layoutRightContent;\n        if (!value) {\n            this.elementRef.nativeElement.setAttribute('no-right', 'true');\n        } else {\n            this.elementRef.nativeElement.removeAttribute('no-right');\n        }\n        return value;\n    }\n\n    private _withSidenav = false;\n\n    @Input()\n    public set withSidenav(value: BooleanInput) {\n        this._withSidenav = coerceBooleanProperty(value);\n    }\n\n    public get withSidenav(): BooleanInput {\n        return this._withSidenav;\n    }\n\n    private _keepFilterButtonDisplayed = true;\n\n    @Input()\n    public set keepFilterButtonDisplayed(value: BooleanInput) {\n        this._keepFilterButtonDisplayed = coerceBooleanProperty(value);\n    }\n\n    public get keepFilterButtonDisplayed(): BooleanInput {\n        return this._keepFilterButtonDisplayed;\n    }\n\n    private _withCloseButton = false;\n\n    @Input()\n    public set withCloseButton(value: BooleanInput) {\n        this._withCloseButton = coerceBooleanProperty(value);\n    }\n\n    public get withCloseButton(): BooleanInput {\n        return this._withCloseButton;\n    }\n\n    private _withBackButton = false;\n\n    @Input()\n    public set withBackButton(value: BooleanInput) {\n        this._withBackButton = coerceBooleanProperty(value);\n    }\n\n    public get withBackButton(): BooleanInput {\n        return this._withBackButton;\n    }\n\n    public closeSideFilter(): void {\n        void this.sideFilter?.close();\n    }\n\n    public openSideFilter(): void {\n        void this.sideFilter?.open();\n    }\n}\n","<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n    <div class=\"main-content\">\n        @if (\n            layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\n        ) {\n            <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        <ng-content></ng-content>\n    </div>\n    @if ((mediaService.isHandset$ | async) && actionsToolbar) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar\n        id=\"actions-toolbar\"\n        class=\"actions\"\n        [color]=\"toolbarColor\"\n        [class.bottom]=\"mediaService.isHandset$ | async\">\n        @if (layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n            <span class=\"primary-action-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        @if (layoutActions) {\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        }\n        @if (layoutInfoBoxes && (mediaService.isHandset$ | async) === false) {\n            <div class=\"info-boxes-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n            </div>\n        }\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    @if (layoutToolbar || layoutRight) {\n        <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\">\n            @if (withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false) {\n                <button type=\"button\" id=\"sidenav-button\" mat-icon-button (click)=\"sidenavService.toggle()\">\n                    <mat-icon>menu</mat-icon>\n                </button>\n            }\n            @if (withBackButton) {\n                <button\n                    type=\"button\"\n                    id=\"back-button\"\n                    mat-icon-button\n                    (click)=\"this.backButtonClicked.emit($event)\"\n                    [matTooltip]=\"backButtonLabel\">\n                    <mat-icon>arrow_back</mat-icon>\n                </button>\n            }\n            <div id=\"toolbar-content-container\">\n                @if (layoutToolbar) {\n                    <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n                }\n            </div>\n            @if (sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight) {\n                <button\n                    type=\"button\"\n                    id=\"filter-button\"\n                    mat-icon-button\n                    (click)=\"sideFilter.toggle()\"\n                    matTooltip=\"Afficher/Masquer les filtres\">\n                    <mat-icon>tune</mat-icon>\n                </button>\n            }\n            @if (withCloseButton) {\n                <button\n                    type=\"button\"\n                    id=\"close-button\"\n                    mat-icon-button\n                    (click)=\"this.closeButtonClicked.emit($event)\"\n                    [matTooltip]=\"closeButtonLabel\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            }\n        </mat-toolbar>\n    }\n\n    @if ((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n    @if (layoutRight) {\n        <mat-drawer-container autosize=\"true\">\n            <mat-drawer-content>\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </mat-drawer-content>\n            <mat-drawer\n                id=\"side-filter\"\n                #sideFilter\n                (closed)=\"sideFilterClosed.emit()\"\n                (openedChange)=\"sideFilterOpened.emit()\"\n                class=\"right\"\n                position=\"end\"\n                [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\"\n                [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\"\n                [opened]=\"(mediaService.isHandset$ | async) === false\">\n                <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n            </mat-drawer>\n        </mat-drawer-container>\n    } @else {\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/layout.component.d.ts

@@ -1,5 +1,5 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { EventEmitter, TemplateRef } from '@angular/core';
+import { ElementRef, EventEmitter, TemplateRef } from '@angular/core';
 import { MatDrawer } from '@angular/material/sidenav';
 import { NgxMediaService } from '@hug/ngx-core';
 import { NgxSidenavService } from '@hug/ngx-sidenav';
@@ -23,10 +23,10 @@ export declare class NgxLayoutComponent {
     protected layoutActionsContent?: TemplateRef<unknown>;
     protected layoutInfoBoxesContent?: TemplateRef<unknown>;
     protected layoutRightContent?: TemplateRef<unknown>;
-    protected noRight: boolean;
     protected sideFilter?: MatDrawer;
     protected mediaService: NgxMediaService;
     protected sidenavService: NgxSidenavService;
+    protected elementRef: ElementRef<HTMLElement>;
     get layoutToolbar(): TemplateRef<unknown> | undefined;
     get layoutPrimaryAction(): TemplateRef<unknown> | undefined;
     get layoutActions(): TemplateRef<unknown> | undefined;

package/package.json

@@ -1,51 +1,49 @@
 {
-  "name": "@hug/ngx-layout",
-  "version": "2.0.0",
-  "description": "HUG Angular - layout component",
-  "homepage": "https://github.com/dsi-hug/ngx-components",
-  "license": "GPL-3.0-only",
-  "author": "HUG - Hôpitaux Universitaires Genève",
-  "contributors": [
-    "badisi (https://github.com/badisi)",
-    "vapkse (https://github.com/vapkse)"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/dsi-hug/ngx-components.git"
-  },
-  "keywords": [
-    "angular",
-    "material",
-    "material design",
-    "components"
-  ],
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "sass": "./_layout-theme.scss",
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/hug-ngx-layout.mjs",
-      "esm": "./esm2022/hug-ngx-layout.mjs",
-      "default": "./fesm2022/hug-ngx-layout.mjs"
+    "name": "@hug/ngx-layout",
+    "version": "3.0.0",
+    "description": "HUG Angular - layout component",
+    "homepage": "https://github.com/dsi-hug/ngx-components",
+    "license": "GPL-3.0-only",
+    "author": "HUG - Hôpitaux Universitaires Genève",
+    "contributors": [
+        "badisi (https://github.com/badisi)",
+        "vapkse (https://github.com/vapkse)"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/dsi-hug/ngx-components.git"
     },
-    "./package.json": {
-      "default": "./package.json"
-    }
-  },
-  "peerDependencies": {
-    "@angular/common": ">=18 <19",
-    "@angular/core": ">=18 <19",
-    "@angular/cdk": ">=18 <19",
-    "@angular/material": ">=18 <19",
-    "@hug/ngx-core": "^2.0.0",
-    "@hug/ngx-sidenav": "^2.0.0"
-  },
-  "dependencies": {
-    "tslib": "^2.7.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "module": "fesm2022/hug-ngx-layout.mjs",
-  "typings": "index.d.ts"
+    "keywords": [
+        "angular",
+        "material",
+        "material design",
+        "components"
+    ],
+    "sideEffects": false,
+    "exports": {
+        ".": {
+            "sass": "./_layout-theme.scss",
+            "types": "./index.d.ts",
+            "default": "./fesm2022/hug-ngx-layout.mjs"
+        },
+        "./package.json": {
+            "default": "./package.json"
+        }
+    },
+    "peerDependencies": {
+        "@angular/common": ">=19 <20",
+        "@angular/core": ">=19 <20",
+        "@angular/cdk": ">=19 <20",
+        "@angular/material": ">=19 <20",
+        "@hug/ngx-core": "^3.0.0",
+        "@hug/ngx-sidenav": "^3.0.0"
+    },
+    "dependencies": {
+        "tslib": "^2.7.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "module": "fesm2022/hug-ngx-layout.mjs",
+    "typings": "index.d.ts"
 }

package/esm2022/hug-ngx-layout.mjs

@@ -1,5 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './index';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHVnLW5neC1sYXlvdXQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy9sYXlvdXQvc3JjL2h1Zy1uZ3gtbGF5b3V0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19

package/esm2022/index.mjs

@@ -1,2 +0,0 @@
-export * from './layout.component';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy9sYXlvdXQvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsb0JBQW9CLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2xheW91dC5jb21wb25lbnQnO1xuIl19

package/esm2022/layout.component.mjs

@@ -1,158 +0,0 @@
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, HostBinding, inject, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
-import { MatIconButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
-import { MatDrawer, MatDrawerContainer, MatDrawerContent } from '@angular/material/sidenav';
-import { MatToolbar } from '@angular/material/toolbar';
-import { MatTooltip } from '@angular/material/tooltip';
-import { NgxMediaService } from '@hug/ngx-core';
-import { NgxSidenavService } from '@hug/ngx-sidenav';
-import * as i0 from "@angular/core";
-export class NgxLayoutComponent {
-    toolbarColor = 'primary';
-    editorToolbarId = 'editor-toolbar';
-    closeButtonLabel = 'Fermer';
-    backButtonLabel = 'Retour';
-    layoutToolbarExternal;
-    layoutPrimaryActionExternal;
-    layoutActionsExternal;
-    layoutInfoBoxesExternal;
-    layoutRightExternal;
-    closeButtonClicked = new EventEmitter();
-    backButtonClicked = new EventEmitter();
-    sideFilterClosed = new EventEmitter();
-    sideFilterOpened = new EventEmitter();
-    layoutToolbarContent;
-    layoutPrimaryActionContent;
-    layoutActionsContent;
-    layoutInfoBoxesContent;
-    layoutRightContent;
-    noRight = false;
-    sideFilter;
-    mediaService = inject(NgxMediaService);
-    sidenavService = inject(NgxSidenavService);
-    get layoutToolbar() {
-        return this.layoutToolbarExternal ?? this.layoutToolbarContent;
-    }
-    get layoutPrimaryAction() {
-        return this.layoutPrimaryActionExternal ?? this.layoutPrimaryActionContent;
-    }
-    get layoutActions() {
-        return this.layoutActionsExternal ?? this.layoutActionsContent;
-    }
-    get layoutInfoBoxes() {
-        return this.layoutInfoBoxesExternal ?? this.layoutInfoBoxesContent;
-    }
-    get layoutRight() {
-        const value = this.layoutRightExternal ?? this.layoutRightContent;
-        this.noRight = !value;
-        return value;
-    }
-    _withSidenav = false;
-    set withSidenav(value) {
-        this._withSidenav = coerceBooleanProperty(value);
-    }
-    get withSidenav() {
-        return this._withSidenav;
-    }
-    _keepFilterButtonDisplayed = true;
-    set keepFilterButtonDisplayed(value) {
-        this._keepFilterButtonDisplayed = coerceBooleanProperty(value);
-    }
-    get keepFilterButtonDisplayed() {
-        return this._keepFilterButtonDisplayed;
-    }
-    _withCloseButton = false;
-    set withCloseButton(value) {
-        this._withCloseButton = coerceBooleanProperty(value);
-    }
-    get withCloseButton() {
-        return this._withCloseButton;
-    }
-    _withBackButton = false;
-    set withBackButton(value) {
-        this._withBackButton = coerceBooleanProperty(value);
-    }
-    get withBackButton() {
-        return this._withBackButton;
-    }
-    closeSideFilter() {
-        void this.sideFilter?.close();
-    }
-    openSideFilter() {
-        void this.sideFilter?.open();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NgxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", 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", withSidenav: "withSidenav", keepFilterButtonDisplayed: "keepFilterButtonDisplayed", withCloseButton: "withCloseButton", withBackButton: "withBackButton" }, 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        @if (\n            layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\n        ) {\n            <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        <ng-content></ng-content>\n    </div>\n    @if ((mediaService.isHandset$ | async) && actionsToolbar) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar\n        id=\"actions-toolbar\"\n        class=\"actions\"\n        [color]=\"toolbarColor\"\n        [class.bottom]=\"mediaService.isHandset$ | async\">\n        @if (layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n            <span class=\"primary-action-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        @if (layoutActions) {\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        }\n        @if (layoutInfoBoxes && (mediaService.isHandset$ | async) === false) {\n            <div class=\"info-boxes-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n            </div>\n        }\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    @if (layoutToolbar || layoutRight) {\n        <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\">\n            @if (withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false) {\n                <button type=\"button\" id=\"sidenav-button\" mat-icon-button (click)=\"sidenavService.toggle()\">\n                    <mat-icon>menu</mat-icon>\n                </button>\n            }\n            @if (withBackButton) {\n                <button\n                    type=\"button\"\n                    id=\"back-button\"\n                    mat-icon-button\n                    (click)=\"this.backButtonClicked.emit($event)\"\n                    [matTooltip]=\"backButtonLabel\">\n                    <mat-icon>arrow_back</mat-icon>\n                </button>\n            }\n            <div id=\"toolbar-content-container\">\n                @if (layoutToolbar) {\n                    <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n                }\n            </div>\n            @if (sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight) {\n                <button\n                    type=\"button\"\n                    id=\"filter-button\"\n                    mat-icon-button\n                    (click)=\"sideFilter.toggle()\"\n                    matTooltip=\"Afficher/Masquer les filtres\">\n                    <mat-icon>tune</mat-icon>\n                </button>\n            }\n            @if (withCloseButton) {\n                <button\n                    type=\"button\"\n                    id=\"close-button\"\n                    mat-icon-button\n                    (click)=\"this.closeButtonClicked.emit($event)\"\n                    [matTooltip]=\"closeButtonLabel\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            }\n        </mat-toolbar>\n    }\n\n    @if ((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n    @if (layoutRight) {\n        <mat-drawer-container autosize=\"true\">\n            <mat-drawer-content>\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </mat-drawer-content>\n            <mat-drawer\n                id=\"side-filter\"\n                #sideFilter\n                (closed)=\"sideFilterClosed.emit()\"\n                (openedChange)=\"sideFilterOpened.emit()\"\n                class=\"right\"\n                position=\"end\"\n                [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\"\n                [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\"\n                [opened]=\"(mediaService.isHandset$ | async) === false\">\n                <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n            </mat-drawer>\n        </mat-drawer-container>\n    } @else {\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    }\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left.no-right .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-listbox{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer.right [filters-chip-list] .mat-mdc-chip{position:relative;padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-mdc-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer.right [filters-chip-list] .mat-mdc-chip:not([disabled]):hover:before{font-family:Material Icons;content:\"close\";display:flex;align-items:center;justify-content:center;position:absolute;inset:0;font-weight:700;font-size:1.2rem;cursor:pointer;transition:.3s ease-in-out}ngx-layout mat-drawer.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-mdc-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 .mat-mdc-icon-button{height:40px;line-height:40px;width:40px;display:flex;justify-content:center;align-items:center;padding:0}ngx-layout .mat-toolbar#actions-toolbar{flex:0 0 auto;height:40px;font-size:inherit;padding-right:0}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container{display:flex;flex:1 1 auto;justify-content:flex-end}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container .info-box{display:flex;flex-grow:0;line-height:40px;padding-left:2rem;padding-right:2rem;box-shadow:-3px 0 5px -1px #0003}ngx-layout .mat-toolbar#actions-toolbar.bottom#actions-toolbar{display:flex;width:100%;justify-content:space-around}ngx-layout .mat-toolbar#actions-toolbar .primary-action-container{z-index:20}ngx-layout .mat-toolbar#actions-toolbar .primary-action-container button{background-color:#009688}ngx-layout .main-content{position:relative;display:flex;flex:1 1 auto;overflow:hidden}ngx-layout .main-content .primary-action-container{position:absolute;z-index:20;opacity:.8;transition:.3s ease-in-out}ngx-layout .main-content .primary-action-container:hover{opacity:1}ngx-layout .main-content .primary-action-container.bottom{right:1rem;bottom:1rem}ngx-layout .main-content .primary-action-container:not(.bottom){top:1rem;left:1rem}ngx-layout ::-webkit-scrollbar{width:12px;height:12px}ngx-layout ::-webkit-scrollbar-thumb{transition:.3s ease-in-out;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NgxLayoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-layout', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        NgTemplateOutlet,
-                        AsyncPipe,
-                        MatIconButton,
-                        MatIcon,
-                        MatDrawer,
-                        MatDrawerContainer,
-                        MatDrawerContent,
-                        MatToolbar,
-                        MatTooltip
-                    ], template: "<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n    <div class=\"main-content\">\n        @if (\n            layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\n        ) {\n            <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        <ng-content></ng-content>\n    </div>\n    @if ((mediaService.isHandset$ | async) && actionsToolbar) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #actionsToolbar>\n    <mat-toolbar\n        id=\"actions-toolbar\"\n        class=\"actions\"\n        [color]=\"toolbarColor\"\n        [class.bottom]=\"mediaService.isHandset$ | async\">\n        @if (layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n            <span class=\"primary-action-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n            </span>\n        }\n        @if (layoutActions) {\n            <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n        }\n        @if (layoutInfoBoxes && (mediaService.isHandset$ | async) === false) {\n            <div class=\"info-boxes-container\">\n                <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n            </div>\n        }\n    </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n    @if (layoutToolbar || layoutRight) {\n        <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\">\n            @if (withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false) {\n                <button type=\"button\" id=\"sidenav-button\" mat-icon-button (click)=\"sidenavService.toggle()\">\n                    <mat-icon>menu</mat-icon>\n                </button>\n            }\n            @if (withBackButton) {\n                <button\n                    type=\"button\"\n                    id=\"back-button\"\n                    mat-icon-button\n                    (click)=\"this.backButtonClicked.emit($event)\"\n                    [matTooltip]=\"backButtonLabel\">\n                    <mat-icon>arrow_back</mat-icon>\n                </button>\n            }\n            <div id=\"toolbar-content-container\">\n                @if (layoutToolbar) {\n                    <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n                }\n            </div>\n            @if (sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight) {\n                <button\n                    type=\"button\"\n                    id=\"filter-button\"\n                    mat-icon-button\n                    (click)=\"sideFilter.toggle()\"\n                    matTooltip=\"Afficher/Masquer les filtres\">\n                    <mat-icon>tune</mat-icon>\n                </button>\n            }\n            @if (withCloseButton) {\n                <button\n                    type=\"button\"\n                    id=\"close-button\"\n                    mat-icon-button\n                    (click)=\"this.closeButtonClicked.emit($event)\"\n                    [matTooltip]=\"closeButtonLabel\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            }\n        </mat-toolbar>\n    }\n\n    @if ((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n        <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n    }\n    @if (layoutRight) {\n        <mat-drawer-container autosize=\"true\">\n            <mat-drawer-content>\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </mat-drawer-content>\n            <mat-drawer\n                id=\"side-filter\"\n                #sideFilter\n                (closed)=\"sideFilterClosed.emit()\"\n                (openedChange)=\"sideFilterOpened.emit()\"\n                class=\"right\"\n                position=\"end\"\n                [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\"\n                [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\"\n                [opened]=\"(mediaService.isHandset$ | async) === false\">\n                <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n            </mat-drawer>\n        </mat-drawer-container>\n    } @else {\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    }\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left.no-right .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-listbox{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer.right [filters-chip-list] .mat-mdc-chip{position:relative;padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer.right [filters-chip-list] .mat-mdc-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer.right [filters-chip-list] .mat-mdc-chip:not([disabled]):hover:before{font-family:Material Icons;content:\"close\";display:flex;align-items:center;justify-content:center;position:absolute;inset:0;font-weight:700;font-size:1.2rem;cursor:pointer;transition:.3s ease-in-out}ngx-layout mat-drawer.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-mdc-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 .mat-mdc-icon-button{height:40px;line-height:40px;width:40px;display:flex;justify-content:center;align-items:center;padding:0}ngx-layout .mat-toolbar#actions-toolbar{flex:0 0 auto;height:40px;font-size:inherit;padding-right:0}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container{display:flex;flex:1 1 auto;justify-content:flex-end}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container .info-box{display:flex;flex-grow:0;line-height:40px;padding-left:2rem;padding-right:2rem;box-shadow:-3px 0 5px -1px #0003}ngx-layout .mat-toolbar#actions-toolbar.bottom#actions-toolbar{display:flex;width:100%;justify-content:space-around}ngx-layout .mat-toolbar#actions-toolbar .primary-action-container{z-index:20}ngx-layout .mat-toolbar#actions-toolbar .primary-action-container button{background-color:#009688}ngx-layout .main-content{position:relative;display:flex;flex:1 1 auto;overflow:hidden}ngx-layout .main-content .primary-action-container{position:absolute;z-index:20;opacity:.8;transition:.3s ease-in-out}ngx-layout .main-content .primary-action-container:hover{opacity:1}ngx-layout .main-content .primary-action-container.bottom{right:1rem;bottom:1rem}ngx-layout .main-content .primary-action-container:not(.bottom){top:1rem;left:1rem}ngx-layout ::-webkit-scrollbar{width:12px;height:12px}ngx-layout ::-webkit-scrollbar-thumb{transition:.3s ease-in-out;border-radius:6px}\n"] }]
-        }], propDecorators: { toolbarColor: [{
-                type: Input
-            }], editorToolbarId: [{
-                type: Input
-            }], closeButtonLabel: [{
-                type: Input
-            }], backButtonLabel: [{
-                type: Input
-            }], layoutToolbarExternal: [{
-                type: Input
-            }], layoutPrimaryActionExternal: [{
-                type: Input
-            }], layoutActionsExternal: [{
-                type: Input
-            }], layoutInfoBoxesExternal: [{
-                type: Input
-            }], layoutRightExternal: [{
-                type: Input
-            }], closeButtonClicked: [{
-                type: Output
-            }], backButtonClicked: [{
-                type: Output
-            }], sideFilterClosed: [{
-                type: Output
-            }], sideFilterOpened: [{
-                type: Output
-            }], layoutToolbarContent: [{
-                type: ContentChild,
-                args: ['layoutToolbar']
-            }], layoutPrimaryActionContent: [{
-                type: ContentChild,
-                args: ['layoutPrimaryAction']
-            }], layoutActionsContent: [{
-                type: ContentChild,
-                args: ['layoutActions']
-            }], layoutInfoBoxesContent: [{
-                type: ContentChild,
-                args: ['layoutInfoBoxes']
-            }], layoutRightContent: [{
-                type: ContentChild,
-                args: ['layoutRight']
-            }], noRight: [{
-                type: HostBinding,
-                args: ['class.no-right']
-            }], sideFilter: [{
-                type: ViewChild,
-                args: ['sideFilter']
-            }], withSidenav: [{
-                type: Input
-            }], keepFilterButtonDisplayed: [{
-                type: Input
-            }], withCloseButton: [{
-                type: Input
-            }], withBackButton: [{
-                type: Input
-            }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF5b3V0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2xheW91dC9zcmMvbGF5b3V0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uL3Byb2plY3RzL2xheW91dC9zcmMvbGF5b3V0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBZ0IscUJBQXFCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUM1RSxPQUFPLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDOUQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBZSxTQUFTLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDOUssT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3pELE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUNqRCxPQUFPLEVBQUUsU0FBUyxFQUFFLGtCQUFrQixFQUFFLGdCQUFnQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDNUYsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2hELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGtCQUFrQixDQUFDOztBQXFCckQsTUFBTSxPQUFPLGtCQUFrQjtJQUNYLFlBQVksR0FBRyxTQUFTLENBQUM7SUFDekIsZUFBZSxHQUFHLGdCQUFnQixDQUFDO0lBRW5DLGdCQUFnQixHQUFHLFFBQVEsQ0FBQztJQUM1QixlQUFlLEdBQUcsUUFBUSxDQUFDO0lBRTNCLHFCQUFx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VUFBVTtzQkFBNUMsU0FBUzt1QkFBQyxZQUFZO2dCQThCWixXQUFXO3NCQURyQixLQUFLO2dCQVlLLHlCQUF5QjtzQkFEbkMsS0FBSztnQkFZSyxlQUFlO3NCQUR6QixLQUFLO2dCQVlLLGNBQWM7c0JBRHhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb29sZWFuSW5wdXQsIGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9jb2VyY2lvbic7XG5pbXBvcnQgeyBBc3luY1BpcGUsIE5nVGVtcGxhdGVPdXRsZXQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgQ29udGVudENoaWxkLCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLCBpbmplY3QsIElucHV0LCBPdXRwdXQsIFRlbXBsYXRlUmVmLCBWaWV3Q2hpbGQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXRJY29uQnV0dG9uIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvYnV0dG9uJztcbmltcG9ydCB7IE1hdEljb24gfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9pY29uJztcbmltcG9ydCB7IE1hdERyYXdlciwgTWF0RHJhd2VyQ29udGFpbmVyLCBNYXREcmF3ZXJDb250ZW50IH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvc2lkZW5hdic7XG5pbXBvcnQgeyBNYXRUb29sYmFyIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvdG9vbGJhcic7XG5pbXBvcnQgeyBNYXRUb29sdGlwIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvdG9vbHRpcCc7XG5pbXBvcnQgeyBOZ3hNZWRpYVNlcnZpY2UgfSBmcm9tICdAaHVnL25neC1jb3JlJztcbmltcG9ydCB7IE5neFNpZGVuYXZTZXJ2aWNlIH0gZnJvbSAnQGh1Zy9uZ3gtc2lkZW5hdic7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbmd4LWxheW91dCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2xheW91dC5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vbGF5b3V0LmNvbXBvbmVudC5zY3NzJ10sXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIGltcG9ydHM6IFtcbiAgICAgICAgTmdUZW1wbGF0ZU91dGxldCxcbiAgICAgICAgQXN5bmNQaXBlLFxuICAgICAgICBNYXRJY29uQnV0dG9uLFxuICAgICAgICBNYXRJY29uLFxuICAgICAgICBNYXREcmF3ZXIsXG4gICAgICAgIE1hdERyYXdlckNvbnRhaW5lcixcbiAgICAgICAgTWF0RHJhd2VyQ29udGVudCxcbiAgICAgICAgTWF0VG9vbGJhcixcbiAgICAgICAgTWF0VG9vbHRpcFxuICAgIF1cbn0pXG5leHBvcnQgY2xhc3MgTmd4TGF5b3V0Q29tcG9uZW50IHtcbiAgICBASW5wdXQoKSBwdWJsaWMgdG9vbGJhckNvbG9yID0gJ3ByaW1hcnknO1xuICAgIEBJbnB1dCgpIHB1YmxpYyBlZGl0b3JUb29sYmFySWQgPSAnZWRpdG9yLXRvb2xiYXInO1xuXG4gICAgQElucHV0KCkgcHVibGljIGNsb3NlQnV0dG9uTGFiZWwgPSAnRmVybWVyJztcbiAgICBASW5wdXQoKSBwdWJsaWMgYmFja0J1dHRvbkxhYmVsID0gJ1JldG91cic7XG5cbiAgICBASW5wdXQoKSBwdWJsaWMgbGF5b3V0VG9vbGJhckV4dGVybmFsPzogVGVtcGxhdGVSZWY8dW5rbm93bj47XG4gICAgQElucHV0KCkgcHVibGljIGxheW91dFByaW1hcnlBY3Rpb25FeHRlcm5hbD86IFRlbXBsYXRlUmVmPHVua25vd24+O1xuICAgIEBJbnB1dCgpIHB1YmxpYyBsYXlvdXRBY3Rpb25zRXh0ZXJuYWw/OiBUZW1wbGF0ZVJlZjx1bmtub3duPjtcbiAgICBASW5wdXQoKSBwdWJsaWMgbGF5b3V0SW5mb0JveGVzRXh0ZXJuYWw/OiBUZW1wbGF0ZVJlZjx1bmtub3duPjtcbiAgICBASW5wdXQoKSBwdWJsaWMgbGF5b3V0UmlnaHRFeHRlcm5hbD86IFRlbXBsYXRlUmVmPHVua25vd24+O1xuXG4gICAgQE91dHB1dCgpIHB1YmxpYyByZWFkb25seSBjbG9zZUJ1dHRvbkNsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+KCk7XG4gICAgQE91dHB1dCgpIHB1YmxpYyByZWFkb25seSBiYWNrQnV0dG9uQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXI8TW91c2VFdmVudD4oKTtcbiAgICBAT3V0cHV0KCkgcHVibGljIHJlYWRvbmx5IHNpZGVGaWx0ZXJDbG9zZWQgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG4gICAgQE91dHB1dCgpIHB1YmxpYyByZWFkb25seSBzaWRlRmlsdGVyT3BlbmVkID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gICAgQENvbnRlbnRDaGlsZCgnbGF5b3V0VG9vbGJhcicpIHByb3RlY3RlZCBsYXlvdXRUb29sYmFyQ29udGVudD86IFRlbXBsYXRlUmVmPHVua25vd24+O1xuICAgIEBDb250ZW50Q2hpbGQoJ2xheW91dFByaW1hcnlBY3Rpb24nKSBwcm90ZWN0ZWQgbGF5b3V0UHJpbWFyeUFjdGlvbkNvbnRlbnQ/OiBUZW1wbGF0ZVJlZjx1bmtub3duPjtcbiAgICBAQ29udGVudENoaWxkKCdsYXlvdXRBY3Rpb25zJykgcHJvdGVjdGVkIGxheW91dEFjdGlvbnNDb250ZW50PzogVGVtcGxhdGVSZWY8dW5rbm93bj47XG4gICAgQENvbnRlbnRDaGlsZCgnbGF5b3V0SW5mb0JveGVzJykgcHJvdGVjdGVkIGxheW91dEluZm9Cb3hlc0NvbnRlbnQ/OiBUZW1wbGF0ZVJlZjx1bmtub3duPjtcbiAgICBAQ29udGVudENoaWxkKCdsYXlvdXRSaWdodCcpIHByb3RlY3RlZCBsYXlvdXRSaWdodENvbnRlbnQ/OiBUZW1wbGF0ZVJlZjx1bmtub3duPjtcblxuICAgIEBIb3N0QmluZGluZygnY2xhc3Mubm8tcmlnaHQnKSBwcm90ZWN0ZWQgbm9SaWdodCA9IGZhbHNlO1xuXG4gICAgQFZpZXdDaGlsZCgnc2lkZUZpbHRlcicpIHByb3RlY3RlZCBzaWRlRmlsdGVyPzogTWF0RHJhd2VyO1xuXG4gICAgcHJvdGVjdGVkIG1lZGlhU2VydmljZSA9IGluamVjdChOZ3hNZWRpYVNlcnZpY2UpO1xuICAgIHByb3RlY3RlZCBzaWRlbmF2U2VydmljZSA9IGluamVjdChOZ3hTaWRlbmF2U2VydmljZSk7XG5cbiAgICBwdWJsaWMgZ2V0IGxheW91dFRvb2xiYXIoKTogVGVtcGxhdGVSZWY8dW5rbm93bj4gfCB1bmRlZmluZWQge1xuICAgICAgICByZXR1cm4gdGhpcy5sYXlvdXRUb29sYmFyRXh0ZXJuYWwgPz8gdGhpcy5sYXlvdXRUb29sYmFyQ29udGVudDtcbiAgICB9XG5cbiAgICBwdWJsaWMgZ2V0IGxheW91dFByaW1hcnlBY3Rpb24oKTogVGVtcGxhdGVSZWY8dW5rbm93bj4gfCB1bmRlZmluZWQge1xuICAgICAgICByZXR1cm4gdGhpcy5sYXlvdXRQcmltYXJ5QWN0aW9uRXh0ZXJuYWwgPz8gdGhpcy5sYXlvdXRQcmltYXJ5QWN0aW9uQ29udGVudDtcbiAgICB9XG5cbiAgICBwdWJsaWMgZ2V0IGxheW91dEFjdGlvbnMoKTogVGVtcGxhdGVSZWY8dW5rbm93bj4gfCB1bmRlZmluZWQge1xuICAgICAgICByZXR1cm4gdGhpcy5sYXlvdXRBY3Rpb25zRXh0ZXJuYWwgPz8gdGhpcy5sYXlvdXRBY3Rpb25zQ29udGVudDtcbiAgICB9XG5cbiAgICBwdWJsaWMgZ2V0IGxheW91dEluZm9Cb3hlcygpOiBUZW1wbGF0ZVJlZjx1bmtub3duPiB8IHVuZGVmaW5lZCB7XG4gICAgICAgIHJldHVybiB0aGlzLmxheW91dEluZm9Cb3hlc0V4dGVybmFsID8/IHRoaXMubGF5b3V0SW5mb0JveGVzQ29udGVudDtcbiAgICB9XG5cbiAgICBwdWJsaWMgZ2V0IGxheW91dFJpZ2h0KCk6IFRlbXBsYXRlUmVmPHVua25vd24+IHwgdW5kZWZpbmVkIHtcbiAgICAgICAgY29uc3QgdmFsdWUgPSB0aGlzLmxheW91dFJpZ2h0RXh0ZXJuYWwgPz8gdGhpcy5sYXlvdXRSaWdodENvbnRlbnQ7XG4gICAgICAgIHRoaXMubm9SaWdodCA9ICF2YWx1ZTtcbiAgICAgICAgcmV0dXJuIHZhbHVlO1xuICAgIH1cblxuICAgIHByaXZhdGUgX3dpdGhTaWRlbmF2ID0gZmFsc2U7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBzZXQgd2l0aFNpZGVuYXYodmFsdWU6IEJvb2xlYW5JbnB1dCkge1xuICAgICAgICB0aGlzLl93aXRoU2lkZW5hdiA9IGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSh2YWx1ZSk7XG4gICAgfVxuXG4gICAgcHVibGljIGdldCB3aXRoU2lkZW5hdigpOiBCb29sZWFuSW5wdXQge1xuICAgICAgICByZXR1cm4gdGhpcy5fd2l0aFNpZGVuYXY7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBfa2VlcEZpbHRlckJ1dHRvbkRpc3BsYXllZCA9IHRydWU7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBzZXQga2VlcEZpbHRlckJ1dHRvbkRpc3BsYXllZCh2YWx1ZTogQm9vbGVhbklucHV0KSB7XG4gICAgICAgIHRoaXMuX2tlZXBGaWx0ZXJCdXR0b25EaXNwbGF5ZWQgPSBjb2VyY2VCb29sZWFuUHJvcGVydHkodmFsdWUpO1xuICAgIH1cblxuICAgIHB1YmxpYyBnZXQga2VlcEZpbHRlckJ1dHRvbkRpc3BsYXllZCgpOiBCb29sZWFuSW5wdXQge1xuICAgICAgICByZXR1cm4gdGhpcy5fa2VlcEZpbHRlckJ1dHRvbkRpc3BsYXllZDtcbiAgICB9XG5cbiAgICBwcml2YXRlIF93aXRoQ2xvc2VCdXR0b24gPSBmYWxzZTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHNldCB3aXRoQ2xvc2VCdXR0b24odmFsdWU6IEJvb2xlYW5JbnB1dCkge1xuICAgICAgICB0aGlzLl93aXRoQ2xvc2VCdXR0b24gPSBjb2VyY2VCb29sZWFuUHJvcGVydHkodmFsdWUpO1xuICAgIH1cblxuICAgIHB1YmxpYyBnZXQgd2l0aENsb3NlQnV0dG9uKCk6IEJvb2xlYW5JbnB1dCB7XG4gICAgICAgIHJldHVybiB0aGlzLl93aXRoQ2xvc2VCdXR0b247XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBfd2l0aEJhY2tCdXR0b24gPSBmYWxzZTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHNldCB3aXRoQmFja0J1dHRvbih2YWx1ZTogQm9vbGVhbklucHV0KSB7XG4gICAgICAgIHRoaXMuX3dpdGhCYWNrQnV0dG9uID0gY29lcmNlQm9vbGVhblByb3BlcnR5KHZhbHVlKTtcbiAgICB9XG5cbiAgICBwdWJsaWMgZ2V0IHdpdGhCYWNrQnV0dG9uKCk6IEJvb2xlYW5JbnB1dCB7XG4gICAgICAgIHJldHVybiB0aGlzLl93aXRoQmFja0J1dHRvbjtcbiAgICB9XG5cbiAgICBwdWJsaWMgY2xvc2VTaWRlRmlsdGVyKCk6IHZvaWQge1xuICAgICAgICB2b2lkIHRoaXMuc2lkZUZpbHRlcj8uY2xvc2UoKTtcbiAgICB9XG5cbiAgICBwdWJsaWMgb3BlblNpZGVGaWx0ZXIoKTogdm9pZCB7XG4gICAgICAgIHZvaWQgdGhpcy5zaWRlRmlsdGVyPy5vcGVuKCk7XG4gICAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImZpbHRlclwiPjwvbmctY29udGFpbmVyPlxuXG48bmctdGVtcGxhdGUgI2NvbnRlbnQ+XG4gICAgPGRpdiBjbGFzcz1cIm1haW4tY29udGVudFwiPlxuICAgICAgICBAaWYgKFxuICAgICAgICAgICAgbGF5b3V0UHJpbWFyeUFjdGlvbiAmJiAhKChsYXlvdXRBY3Rpb25zIHx8IGxheW91dEluZm9Cb3hlcykgJiYgKG1lZGlhU2VydmljZS5pc0hhbmRzZXQkIHwgYXN5bmMpID09PSBmYWxzZSlcbiAgICAgICAgKSB7XG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cInByaW1hcnktYWN0aW9uLWNvbnRhaW5lclwiIFtjbGFzcy5ib3R0b21dPVwibWVkaWFTZXJ2aWNlLmlzSGFuZHNldCQgfCBhc3luY1wiPlxuICAgICAgICAgICAgICAgIDxuZy10ZW1wbGF0ZSBbbmdUZW1wbGF0ZU91dGxldF09XCJsYXlvdXRQcmltYXJ5QWN0aW9uXCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgfVxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gICAgQGlmICgobWVkaWFTZXJ2aWNlLmlzSGFuZHNldCQgfCBhc3luYykgJiYgYWN0aW9uc1Rvb2xiYXIpIHtcbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImFjdGlvbnNUb29sYmFyXCI+PC9uZy1jb250YWluZXI+XG4gICAgfVxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNhY3Rpb25zVG9vbGJhcj5cbiAgICA8bWF0LXRvb2xiYXJcbiAgICAgICAgaWQ9XCJhY3Rpb25zLXRvb2xiYXJcIlxuICAgICAgICBjbGFzcz1cImFjdGlvbnNcIlxuICAgICAgICBbY29sb3JdPVwidG9vbGJhckNvbG9yXCJcbiAgICAgICAgW2NsYXNzLmJvdHRvbV09XCJtZWRpYVNlcnZpY2UuaXNIYW5kc2V0JCB8IGFzeW5jXCI+XG4gICAgICAgIEBpZiAobGF5b3V0UHJpbWFyeUFjdGlvbiAmJiAobGF5b3V0QWN0aW9ucyB8fCBsYXlvdXRJbmZvQm94ZXMpICYmIChtZWRpYVNlcnZpY2UuaXNIYW5kc2V0JCB8IGFzeW5jKSA9PT0gZmFsc2UpIHtcbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwicHJpbWFyeS1hY3Rpb24tY29udGFpbmVyXCI+XG4gICAgICAgICAgICAgICAgPG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImxheW91dFByaW1hcnlBY3Rpb25cIj48L25nLXRlbXBsYXRlPlxuICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICB9XG4gICAgICAgIEBpZiAobGF5b3V0QWN0aW9ucykge1xuICAgICAgICAgICAgPG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImxheW91dEFjdGlvbnNcIj48L25nLXRlbXBsYXRlPlxuICAgICAgICB9XG4gICAgICAgIEBpZiAobGF5b3V0SW5mb0JveGVzICYmIChtZWRpYVNlcnZpY2UuaXNIYW5kc2V0JCB8IGFzeW5jKSA9PT0gZmFsc2UpIHtcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJpbmZvLWJveGVzLWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgICAgIDxuZy10ZW1wbGF0ZSBbbmdUZW1wbGF0ZU91dGxldF09XCJsYXlvdXRJbmZvQm94ZXNcIj48L25nLXRlbXBsYXRlPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIH1cbiAgICA8L21hdC10b29sYmFyPlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNmaWx0ZXI+XG4gICAgQGlmIChsYXlvdXRUb29sYmFyIHx8IGxheW91dFJpZ2h0KSB7XG4gICAgICAgIDxtYXQtdG9vbGJhciBpZD1cInRvb2xiYXJcIiBbY29sb3JdPVwidG9vbGJhckNvbG9yXCI+XG4gICAgICAgICAgICBAaWYgKHdpdGhTaWRlbmF2ICYmIChtZWRpYVNlcnZpY2UuaXNIYW5kc2V0JCB8IGFzeW5jKSAmJiAoc2lkZW5hdlNlcnZpY2Uub3BlbkNoYW5nZWQkIHwgYXN5bmMpID09PSBmYWxzZSkge1xuICAgICAgICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIGlkPVwic2lkZW5hdi1idXR0b25cIiBtYXQtaWNvbi1idXR0b24gKGNsaWNrKT1cInNpZGVuYXZTZXJ2aWNlLnRvZ2dsZSgpXCI+XG4gICAgICAgICAgICAgICAgICAgIDxtYXQtaWNvbj5tZW51PC9tYXQtaWNvbj5cbiAgICAgICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIEBpZiAod2l0aEJhY2tCdXR0b24pIHtcbiAgICAgICAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgICAgICAgICBpZD1cImJhY2stYnV0dG9uXCJcbiAgICAgICAgICAgICAgICAgICAgbWF0LWljb24tYnV0dG9uXG4gICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJ0aGlzLmJhY2tCdXR0b25DbGlja2VkLmVtaXQoJGV2ZW50KVwiXG4gICAgICAgICAgICAgICAgICAgIFttYXRUb29sdGlwXT1cImJhY2tCdXR0b25MYWJlbFwiPlxuICAgICAgICAgICAgICAgICAgICA8bWF0LWljb24+YXJyb3dfYmFjazwvbWF0LWljb24+XG4gICAgICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICA8ZGl2IGlkPVwidG9vbGJhci1jb250ZW50LWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgICAgIEBpZiAobGF5b3V0VG9vbGJhcikge1xuICAgICAgICAgICAgICAgICAgICA8bmctdGVtcGxhdGUgW25nVGVtcGxhdGVPdXRsZXRdPVwibGF5b3V0VG9vbGJhclwiPjwvbmctdGVtcGxhdGU+XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICBAaWYgKHNpZGVGaWx0ZXIgJiYgKGtlZXBGaWx0ZXJCdXR0b25EaXNwbGF5ZWQgfHwgKG1lZGlhU2VydmljZS5pc0hhbmRzZXQkIHwgYXN5bmMpKSAmJiBsYXlvdXRSaWdodCkge1xuICAgICAgICAgICAgICAgIDxidXR0b25cbiAgICAgICAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgICAgICAgICAgIGlkPVwiZmlsdGVyLWJ1dHRvblwiXG4gICAgICAgICAgICAgICAgICAgIG1hdC1pY29uLWJ1dHRvblxuICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwic2lkZUZpbHRlci50b2dnbGUoKVwiXG4gICAgICAgICAgICAgICAgICAgIG1hdFRvb2x0aXA9XCJBZmZpY2hlci9NYXNxdWVyIGxlcyBmaWx0cmVzXCI+XG4gICAgICAgICAgICAgICAgICAgIDxtYXQtaWNvbj50dW5lPC9tYXQtaWNvbj5cbiAgICAgICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIEBpZiAod2l0aENsb3NlQnV0dG9uKSB7XG4gICAgICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgICAgICAgICAgaWQ9XCJjbG9zZS1idXR0b25cIlxuICAgICAgICAgICAgICAgICAgICBtYXQtaWNvbi1idXR0b25cbiAgICAgICAgICAgICAgICAgICAgKGNsaWNrKT1cInRoaXMuY2xvc2VCdXR0b25DbGlja2VkLmVtaXQoJGV2ZW50KVwiXG4gICAgICAgICAgICAgICAgICAgIFttYXRUb29sdGlwXT1cImNsb3NlQnV0dG9uTGFiZWxcIj5cbiAgICAgICAgICAgICAgICAgICAgPG1hdC1pY29uPmNsb3NlPC9tYXQtaWNvbj5cbiAgICAgICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgIH1cbiAgICAgICAgPC9tYXQtdG9vbGJhcj5cbiAgICB9XG5cbiAgICBAaWYgKChsYXlvdXRBY3Rpb25zIHx8IGxheW91dEluZm9Cb3hlcykgJiYgKG1lZGlhU2VydmljZS5pc0hhbmRzZXQkIHwgYXN5bmMpID09PSBmYWxzZSkge1xuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiYWN0aW9uc1Rvb2xiYXJcIj48L25nLWNvbnRhaW5lcj5cbiAgICB9XG4gICAgQGlmIChsYXlvdXRSaWdodCkge1xuICAgICAgICA8bWF0LWRyYXdlci1jb250YWluZXIgYXV0b3NpemU9XCJ0cnVlXCI+XG4gICAgICAgICAgICA8bWF0LWRyYXdlci1jb250ZW50PlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb250ZW50XCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICA8L21hdC1kcmF3ZXItY29udGVudD5cbiAgICAgICAgICAgIDxtYXQtZHJhd2VyXG4gICAgICAgICAgICAgICAgaWQ9XCJzaWRlLWZpbHRlclwiXG4gICAgICAgICAgICAgICAgI3NpZGVGaWx0ZXJcbiAgICAgICAgICAgICAgICAoY2xvc2VkKT1cInNpZGVGaWx0ZXJDbG9zZWQuZW1pdCgpXCJcbiAgICAgICAgICAgICAgICAob3BlbmVkQ2hhbmdlKT1cInNpZGVGaWx0ZXJPcGVuZWQuZW1pdCgpXCJcbiAgICAgICAgICAgICAgICBjbGFzcz1cInJpZ2h0XCJcbiAgICAgICAgICAgICAgICBwb3NpdGlvbj1cImVuZFwiXG4gICAgICAgICAgICAgICAgW2F0dHIucm9sZV09XCIobWVkaWFTZXJ2aWNlLmlzSGFuZHNldCQgfCBhc3luYykgPyAnZGlhbG9nJyA6ICduYXZpZ2F0aW9uJ1wiXG4gICAgICAgICAgICAgICAgW21vZGVdPVwiKG1lZGlhU2VydmljZS5pc0hhbmRzZXQkIHwgYXN5bmMpID8gJ292ZXInIDogJ3NpZGUnXCJcbiAgICAgICAgICAgICAgICBbb3BlbmVkXT1cIihtZWRpYVNlcnZpY2UuaXNIYW5kc2V0JCB8IGFzeW5jKSA9PT0gZmFsc2VcIj5cbiAgICAgICAgICAgICAgICA8bmctdGVtcGxhdGUgW25nVGVtcGxhdGVPdXRsZXRdPVwibGF5b3V0UmlnaHRcIj48L25nLXRlbXBsYXRlPlxuICAgICAgICAgICAgPC9tYXQtZHJhd2VyPlxuICAgICAgICA8L21hdC1kcmF3ZXItY29udGFpbmVyPlxuICAgIH0gQGVsc2Uge1xuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiY29udGVudFwiPjwvbmctY29udGFpbmVyPlxuICAgIH1cbjwvbmctdGVtcGxhdGU+XG4iXX0=