@wolkabout/commons 0.1.2 → 0.1.3

package/fesm2022/wolkabout-commons.mjs

@@ -7215,13 +7215,13 @@ class DoubleDrawerLayoutComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DoubleDrawerLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DoubleDrawerLayoutComponent, isStandalone: true, selector: "app-double-drawer-layout", inputs: { leftDrawerConfig: { classPropertyName: "leftDrawerConfig", publicName: "leftDrawerConfig", isSignal: true, isRequired: true, transformFunction: null }, rightDrawerConfig: { classPropertyName: "rightDrawerConfig", publicName: "rightDrawerConfig", isSignal: true, isRequired: false, transformFunction: null }, backdropConfig: { classPropertyName: "backdropConfig", publicName: "backdropConfig", isSignal: true, isRequired: true, transformFunction: null }, dialogConfig: { classPropertyName: "dialogConfig", publicName: "dialogConfig", isSignal: true, isRequired: false, transformFunction: null }, enableFullScreen: { classPropertyName: "enableFullScreen", publicName: "enableFullScreen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { leftDrawerToggled: "leftDrawerToggled", rightDrawerToggled: "rightDrawerToggled" }, host: { listeners: { "window:mousemove": "onMouseMove()" } }, ngImport: i0, template: "<div class=\"w-full h-full relative\">\r\n  <div class=\"absolute h-full drawer\" [ngClass]=\"{open : isLeftDrawerOpen()}\" [ngStyle]=\"{'width': isLeftDrawerOpen() ? leftDrawerConfig().width : '0px'}\">\r\n    <button mat-flat-button class=\"drawer-toggle\"\r\n            (click)=\"isLeftDrawerOpen.set(!isLeftDrawerOpen())\"\r\n            [ngClass]=\"{\r\n               'destructive-flat-button': isLeftDrawerOpen(),\r\n               'drawer-toggle-name': leftDrawerConfig().title && !isLeftDrawerOpen()\r\n               }\"\r\n            [matTooltip]=\"isLeftDrawerOpen() ?\r\n              ('DASHBOARDS.COLLAPSE_DASHBOARD_NAVIGATION' | translate) :\r\n              leftDrawerConfig().title ?\r\n                leftDrawerConfig().title :\r\n                ('DASHBOARDS.EXPAND_DASHBOARD_NAVIGATION' | translate)\"\r\n            matTooltipPosition=\"right\">\r\n      @if (leftDrawerConfig().title && !isLeftDrawerOpen()) {\r\n        <span>{{ leftDrawerConfig().title }}</span>\r\n      } @else {\r\n        <span class=\"block\"><mat-icon [ngClass]=\"{'toggle-icon-small': !isLeftDrawerOpen()}\" [svgIcon]=\"isLeftDrawerOpen() ? 'close' : 'arrow_right'\"></mat-icon></span>\r\n      }\r\n    </button>\r\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isLeftDrawerOpen()}\">\r\n      <ng-content select=\"[left-drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <div class=\"h-full w-full content-wrapper\" [ngClass]=\"{'open': (isLeftDrawerOpen() || isRightDrawerOpen()) && backdropConfig().show}\">\r\n    <div class=\"message-wrapper\" [ngClass]=\"{'show': backdropConfig().showMessage}\">\r\n      <span>{{ backdropConfig().message | translate }}</span>\r\n    </div>\r\n    <div class=\"content-backdrop\" [ngClass]=\"{'transparent': backdropConfig().showTransparentBackdrop}\" (click)=\"backdropClick()\">\r\n    </div>\r\n    <div class=\"flex flex-col flex-auto gap-4 h-full w-full overflow-hidden relative\">\r\n      @if (showFullscreenButton()) {\r\n        <button mat-icon-button type=\"button\" class=\"absolute top-2 right-3 !z-10\" [ngClass]=\"!isLeftDrawerOpen() && !isRightDrawerOpen() ? '!block' : '!hidden' \" (mouseover)=\"mouseOver()\" (mouseout)=\"hoverActive.set(false)\"\r\n                [matTooltip]=\"fullScreenEnabled() ? ('Exit fullscreen' | translate) : ('Enter fullscreen' | translate)\" (click)=\"fullscreenService.toggleFullScreen(); hoverActive.set(false)\" matTooltipPosition=\"left\">\r\n          @if (fullScreenEnabled()) {\r\n            <mat-icon>fullscreen_exit</mat-icon>\r\n          } @else {\r\n            <mat-icon>fullscreen</mat-icon>\r\n          }\r\n        </button>\r\n      }\r\n      <ng-content select=\"[details]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <div class=\"absolute h-full drawer right\" [ngClass]=\"{open : isRightDrawerOpen()}\" [ngStyle]=\"{'width': isRightDrawerOpen() ? rightDrawerConfig()?.width : '0px'}\">\r\n    <button mat-flat-button class=\"drawer-toggle\"\r\n            (click)=\"toggleRightDrawer()\"\r\n            [ngClass]=\"{'destructive-flat-button': isRightDrawerOpen()}\"\r\n            [matTooltip]=\"isRightDrawerOpen() ? ('DASHBOARDS.COLLAPSE_DASHBOARD_NAVIGATION' | translate) : ('DASHBOARDS.EXPAND_DASHBOARD_NAVIGATION' | translate)\"\r\n            matTooltipPosition=\"right\">\r\n      <span class=\"block\"><mat-icon [svgIcon]=\"isRightDrawerOpen() ? 'close' : 'arrow_left'\"></mat-icon></span>\r\n    </button>\r\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isRightDrawerOpen()}\">\r\n      <ng-content select=\"[right-drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.drawer{z-index:10;width:0;max-width:calc(100% - 40px);transition:all .3s cubic-bezier(.4,0,.2,1) 0s;position:relative;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.drawer:after{content:\"\";display:block;width:100%;height:100%;opacity:.6;position:absolute;inset:0;background-color:var(--mat-sys-surface-container);z-index:-1}.drawer .drawer-toggle{position:absolute;bottom:16px;right:0;word-break:keep-all;white-space:nowrap;min-width:fit-content!important;width:fit-content!important;transform:translate(100%);border-radius:0 5px 5px 0!important;padding:0 10px}.drawer .drawer-toggle.drawer-toggle-name{max-width:300px!important;min-width:unset!important;overflow:hidden}.drawer .drawer-toggle.drawer-toggle-name span{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis}.drawer .drawer-toggle .toggle-icon-small{margin:0 6px;height:10px;width:10px}.drawer.right{right:0;top:0}.drawer.right .drawer-toggle{display:none;position:absolute;bottom:16px;left:0;transform:translate(-100%);border-radius:5px 0 0 5px!important}.drawer.right .drawer-toggle span{line-height:12px}.drawer.right .drawer-toggle span mat-icon{height:24px;width:24px}.drawer.open{border-right:1px solid var(--mat-sys-outline-variant)}.drawer.open.right .drawer-toggle{display:block}.drawer.open.right{border-right:unset;border-left:1px solid var(--mat-sys-outline-variant)}.drawer.open .drawer-toggle span{line-height:12px}.drawer.open .drawer-toggle span mat-icon{height:24px;width:24px}:host-context(.alt-theme) .drawer.after{background-color:var(--mat-sys-surface-container-lowest)}.content-wrapper{position:relative}.content-wrapper .content-backdrop{transition:all .3s cubic-bezier(.4,0,.2,1) 0s;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;z-index:-1;background-color:transparent}.content-wrapper .message-wrapper{transition:all .5s cubic-bezier(.4,0,.2,1) 0s;position:absolute;right:32px;top:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);opacity:0;z-index:-1}.content-wrapper .message-wrapper.show{opacity:1;z-index:4}.content-wrapper.open .content-backdrop{background-color:#000;opacity:.5;z-index:3}.content-wrapper.open .content-backdrop.transparent{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DoubleDrawerLayoutComponent, isStandalone: true, selector: "app-double-drawer-layout", inputs: { leftDrawerConfig: { classPropertyName: "leftDrawerConfig", publicName: "leftDrawerConfig", isSignal: true, isRequired: true, transformFunction: null }, rightDrawerConfig: { classPropertyName: "rightDrawerConfig", publicName: "rightDrawerConfig", isSignal: true, isRequired: false, transformFunction: null }, backdropConfig: { classPropertyName: "backdropConfig", publicName: "backdropConfig", isSignal: true, isRequired: true, transformFunction: null }, dialogConfig: { classPropertyName: "dialogConfig", publicName: "dialogConfig", isSignal: true, isRequired: false, transformFunction: null }, enableFullScreen: { classPropertyName: "enableFullScreen", publicName: "enableFullScreen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { leftDrawerToggled: "leftDrawerToggled", rightDrawerToggled: "rightDrawerToggled" }, host: { listeners: { "window:mousemove": "onMouseMove()" } }, ngImport: i0, template: "<div class=\"w-full h-full relative\">\r\n  <div class=\"absolute h-full drawer\" [ngClass]=\"{open : isLeftDrawerOpen()}\" [ngStyle]=\"{'width': isLeftDrawerOpen() ? leftDrawerConfig().width : '0px'}\">\r\n    <button mat-flat-button class=\"drawer-toggle\"\r\n            (click)=\"isLeftDrawerOpen.set(!isLeftDrawerOpen())\"\r\n            [ngClass]=\"{\r\n               'destructive-flat-button': isLeftDrawerOpen(),\r\n               'drawer-toggle-name': leftDrawerConfig().title && !isLeftDrawerOpen()\r\n               }\"\r\n            [matTooltip]=\"isLeftDrawerOpen() ?\r\n              ('COMMON.COLLAPSE_NAVIGATION' | translate) :\r\n              leftDrawerConfig().title ?\r\n                leftDrawerConfig().title :\r\n                ('COMMON.EXPAND_NAVIGATION' | translate)\"\r\n            matTooltipPosition=\"right\">\r\n      @if (leftDrawerConfig().title && !isLeftDrawerOpen()) {\r\n        <span>{{ leftDrawerConfig().title }}</span>\r\n      } @else {\r\n        <span class=\"block\"><mat-icon [ngClass]=\"{'toggle-icon-small': !isLeftDrawerOpen()}\" [svgIcon]=\"isLeftDrawerOpen() ? 'close' : 'arrow_right'\"></mat-icon></span>\r\n      }\r\n    </button>\r\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isLeftDrawerOpen()}\">\r\n      <ng-content select=\"[left-drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <div class=\"h-full w-full content-wrapper\" [ngClass]=\"{'open': (isLeftDrawerOpen() || isRightDrawerOpen()) && backdropConfig().show}\">\r\n    <div class=\"message-wrapper\" [ngClass]=\"{'show': backdropConfig().showMessage}\">\r\n      <span>{{ backdropConfig().message | translate }}</span>\r\n    </div>\r\n    <div class=\"content-backdrop\" [ngClass]=\"{'transparent': backdropConfig().showTransparentBackdrop}\" (click)=\"backdropClick()\">\r\n    </div>\r\n    <div class=\"flex flex-col flex-auto gap-4 h-full w-full overflow-hidden relative\">\r\n      @if (showFullscreenButton()) {\r\n        <button mat-icon-button type=\"button\" class=\"absolute top-2 right-3 !z-10\" [ngClass]=\"!isLeftDrawerOpen() && !isRightDrawerOpen() ? '!block' : '!hidden' \" (mouseover)=\"mouseOver()\" (mouseout)=\"hoverActive.set(false)\"\r\n                [matTooltip]=\"fullScreenEnabled() ? ('COMMON.EXIT_FULLSCREEN' | translate) : ('COMMON.ENTER_FULLSCREEN' | translate)\" (click)=\"fullscreenService.toggleFullScreen(); hoverActive.set(false)\" matTooltipPosition=\"left\">\r\n          @if (fullScreenEnabled()) {\r\n            <mat-icon>fullscreen_exit</mat-icon>\r\n          } @else {\r\n            <mat-icon>fullscreen</mat-icon>\r\n          }\r\n        </button>\r\n      }\r\n      <ng-content select=\"[details]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <div class=\"absolute h-full drawer right\" [ngClass]=\"{open : isRightDrawerOpen()}\" [ngStyle]=\"{'width': isRightDrawerOpen() ? rightDrawerConfig()?.width : '0px'}\">\r\n    <button mat-flat-button class=\"drawer-toggle\"\r\n            (click)=\"toggleRightDrawer()\"\r\n            [ngClass]=\"{'destructive-flat-button': isRightDrawerOpen()}\"\r\n            [matTooltip]=\"isRightDrawerOpen() ? ('COMMON.COLLAPSE_NAVIGATION' | translate) : ('COMMON.EXPAND_NAVIGATION' | translate)\"\r\n            matTooltipPosition=\"right\">\r\n      <span class=\"block\"><mat-icon [svgIcon]=\"isRightDrawerOpen() ? 'close' : 'arrow_left'\"></mat-icon></span>\r\n    </button>\r\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isRightDrawerOpen()}\">\r\n      <ng-content select=\"[right-drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.drawer{z-index:10;width:0;max-width:calc(100% - 40px);transition:all .3s cubic-bezier(.4,0,.2,1) 0s;position:relative;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.drawer:after{content:\"\";display:block;width:100%;height:100%;opacity:.6;position:absolute;inset:0;background-color:var(--mat-sys-surface-container);z-index:-1}.drawer .drawer-toggle{position:absolute;bottom:16px;right:0;word-break:keep-all;white-space:nowrap;min-width:fit-content!important;width:fit-content!important;transform:translate(100%);border-radius:0 5px 5px 0!important;padding:0 10px}.drawer .drawer-toggle.drawer-toggle-name{max-width:300px!important;min-width:unset!important;overflow:hidden}.drawer .drawer-toggle.drawer-toggle-name span{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis}.drawer .drawer-toggle .toggle-icon-small{margin:0 6px;height:10px;width:10px}.drawer.right{right:0;top:0}.drawer.right .drawer-toggle{display:none;position:absolute;bottom:16px;left:0;transform:translate(-100%);border-radius:5px 0 0 5px!important}.drawer.right .drawer-toggle span{line-height:12px}.drawer.right .drawer-toggle span mat-icon{height:24px;width:24px}.drawer.open{border-right:1px solid var(--mat-sys-outline-variant)}.drawer.open.right .drawer-toggle{display:block}.drawer.open.right{border-right:unset;border-left:1px solid var(--mat-sys-outline-variant)}.drawer.open .drawer-toggle span{line-height:12px}.drawer.open .drawer-toggle span mat-icon{height:24px;width:24px}:host-context(.alt-theme) .drawer.after{background-color:var(--mat-sys-surface-container-lowest)}.content-wrapper{position:relative}.content-wrapper .content-backdrop{transition:all .3s cubic-bezier(.4,0,.2,1) 0s;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;z-index:-1;background-color:transparent}.content-wrapper .message-wrapper{transition:all .5s cubic-bezier(.4,0,.2,1) 0s;position:absolute;right:32px;top:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);opacity:0;z-index:-1}.content-wrapper .message-wrapper.show{opacity:1;z-index:4}.content-wrapper.open .content-backdrop{background-color:#000;opacity:.5;z-index:3}.content-wrapper.open .content-backdrop.transparent{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DoubleDrawerLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-double-drawer-layout', imports: [
                         SharedModule
-                    ], template: "<div class=\"w-full h-full relative\">\r\n  <div class=\"absolute h-full drawer\" [ngClass]=\"{open : isLeftDrawerOpen()}\" [ngStyle]=\"{'width': isLeftDrawerOpen() ? leftDrawerConfig().width : '0px'}\">\r\n    <button mat-flat-button class=\"drawer-toggle\"\r\n            (click)=\"isLeftDrawerOpen.set(!isLeftDrawerOpen())\"\r\n            [ngClass]=\"{\r\n               'destructive-flat-button': isLeftDrawerOpen(),\r\n               'drawer-toggle-name': leftDrawerConfig().title && !isLeftDrawerOpen()\r\n               }\"\r\n            [matTooltip]=\"isLeftDrawerOpen() ?\r\n              ('DASHBOARDS.COLLAPSE_DASHBOARD_NAVIGATION' | translate) :\r\n              leftDrawerConfig().title ?\r\n                leftDrawerConfig().title :\r\n                ('DASHBOARDS.EXPAND_DASHBOARD_NAVIGATION' | translate)\"\r\n            matTooltipPosition=\"right\">\r\n      @if (leftDrawerConfig().title && !isLeftDrawerOpen()) {\r\n        <span>{{ leftDrawerConfig().title }}</span>\r\n      } @else {\r\n        <span class=\"block\"><mat-icon [ngClass]=\"{'toggle-icon-small': !isLeftDrawerOpen()}\" [svgIcon]=\"isLeftDrawerOpen() ? 'close' : 'arrow_right'\"></mat-icon></span>\r\n      }\r\n    </button>\r\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isLeftDrawerOpen()}\">\r\n      <ng-content select=\"[left-drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <div class=\"h-full w-full content-wrapper\" [ngClass]=\"{'open': (isLeftDrawerOpen() || isRightDrawerOpen()) && backdropConfig().show}\">\r\n    <div class=\"message-wrapper\" [ngClass]=\"{'show': backdropConfig().showMessage}\">\r\n      <span>{{ backdropConfig().message | translate }}</span>\r\n    </div>\r\n    <div class=\"content-backdrop\" [ngClass]=\"{'transparent': backdropConfig().showTransparentBackdrop}\" (click)=\"backdropClick()\">\r\n    </div>\r\n    <div class=\"flex flex-col flex-auto gap-4 h-full w-full overflow-hidden relative\">\r\n      @if (showFullscreenButton()) {\r\n        <button mat-icon-button type=\"button\" class=\"absolute top-2 right-3 !z-10\" [ngClass]=\"!isLeftDrawerOpen() && !isRightDrawerOpen() ? '!block' : '!hidden' \" (mouseover)=\"mouseOver()\" (mouseout)=\"hoverActive.set(false)\"\r\n                [matTooltip]=\"fullScreenEnabled() ? ('Exit fullscreen' | translate) : ('Enter fullscreen' | translate)\" (click)=\"fullscreenService.toggleFullScreen(); hoverActive.set(false)\" matTooltipPosition=\"left\">\r\n          @if (fullScreenEnabled()) {\r\n            <mat-icon>fullscreen_exit</mat-icon>\r\n          } @else {\r\n            <mat-icon>fullscreen</mat-icon>\r\n          }\r\n        </button>\r\n      }\r\n      <ng-content select=\"[details]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <div class=\"absolute h-full drawer right\" [ngClass]=\"{open : isRightDrawerOpen()}\" [ngStyle]=\"{'width': isRightDrawerOpen() ? rightDrawerConfig()?.width : '0px'}\">\r\n    <button mat-flat-button class=\"drawer-toggle\"\r\n            (click)=\"toggleRightDrawer()\"\r\n            [ngClass]=\"{'destructive-flat-button': isRightDrawerOpen()}\"\r\n            [matTooltip]=\"isRightDrawerOpen() ? ('DASHBOARDS.COLLAPSE_DASHBOARD_NAVIGATION' | translate) : ('DASHBOARDS.EXPAND_DASHBOARD_NAVIGATION' | translate)\"\r\n            matTooltipPosition=\"right\">\r\n      <span class=\"block\"><mat-icon [svgIcon]=\"isRightDrawerOpen() ? 'close' : 'arrow_left'\"></mat-icon></span>\r\n    </button>\r\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isRightDrawerOpen()}\">\r\n      <ng-content select=\"[right-drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.drawer{z-index:10;width:0;max-width:calc(100% - 40px);transition:all .3s cubic-bezier(.4,0,.2,1) 0s;position:relative;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.drawer:after{content:\"\";display:block;width:100%;height:100%;opacity:.6;position:absolute;inset:0;background-color:var(--mat-sys-surface-container);z-index:-1}.drawer .drawer-toggle{position:absolute;bottom:16px;right:0;word-break:keep-all;white-space:nowrap;min-width:fit-content!important;width:fit-content!important;transform:translate(100%);border-radius:0 5px 5px 0!important;padding:0 10px}.drawer .drawer-toggle.drawer-toggle-name{max-width:300px!important;min-width:unset!important;overflow:hidden}.drawer .drawer-toggle.drawer-toggle-name span{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis}.drawer .drawer-toggle .toggle-icon-small{margin:0 6px;height:10px;width:10px}.drawer.right{right:0;top:0}.drawer.right .drawer-toggle{display:none;position:absolute;bottom:16px;left:0;transform:translate(-100%);border-radius:5px 0 0 5px!important}.drawer.right .drawer-toggle span{line-height:12px}.drawer.right .drawer-toggle span mat-icon{height:24px;width:24px}.drawer.open{border-right:1px solid var(--mat-sys-outline-variant)}.drawer.open.right .drawer-toggle{display:block}.drawer.open.right{border-right:unset;border-left:1px solid var(--mat-sys-outline-variant)}.drawer.open .drawer-toggle span{line-height:12px}.drawer.open .drawer-toggle span mat-icon{height:24px;width:24px}:host-context(.alt-theme) .drawer.after{background-color:var(--mat-sys-surface-container-lowest)}.content-wrapper{position:relative}.content-wrapper .content-backdrop{transition:all .3s cubic-bezier(.4,0,.2,1) 0s;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;z-index:-1;background-color:transparent}.content-wrapper .message-wrapper{transition:all .5s cubic-bezier(.4,0,.2,1) 0s;position:absolute;right:32px;top:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);opacity:0;z-index:-1}.content-wrapper .message-wrapper.show{opacity:1;z-index:4}.content-wrapper.open .content-backdrop{background-color:#000;opacity:.5;z-index:3}.content-wrapper.open .content-backdrop.transparent{background-color:transparent}\n"] }]
+                    ], template: "<div class=\"w-full h-full relative\">\r\n  <div class=\"absolute h-full drawer\" [ngClass]=\"{open : isLeftDrawerOpen()}\" [ngStyle]=\"{'width': isLeftDrawerOpen() ? leftDrawerConfig().width : '0px'}\">\r\n    <button mat-flat-button class=\"drawer-toggle\"\r\n            (click)=\"isLeftDrawerOpen.set(!isLeftDrawerOpen())\"\r\n            [ngClass]=\"{\r\n               'destructive-flat-button': isLeftDrawerOpen(),\r\n               'drawer-toggle-name': leftDrawerConfig().title && !isLeftDrawerOpen()\r\n               }\"\r\n            [matTooltip]=\"isLeftDrawerOpen() ?\r\n              ('COMMON.COLLAPSE_NAVIGATION' | translate) :\r\n              leftDrawerConfig().title ?\r\n                leftDrawerConfig().title :\r\n                ('COMMON.EXPAND_NAVIGATION' | translate)\"\r\n            matTooltipPosition=\"right\">\r\n      @if (leftDrawerConfig().title && !isLeftDrawerOpen()) {\r\n        <span>{{ leftDrawerConfig().title }}</span>\r\n      } @else {\r\n        <span class=\"block\"><mat-icon [ngClass]=\"{'toggle-icon-small': !isLeftDrawerOpen()}\" [svgIcon]=\"isLeftDrawerOpen() ? 'close' : 'arrow_right'\"></mat-icon></span>\r\n      }\r\n    </button>\r\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isLeftDrawerOpen()}\">\r\n      <ng-content select=\"[left-drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <div class=\"h-full w-full content-wrapper\" [ngClass]=\"{'open': (isLeftDrawerOpen() || isRightDrawerOpen()) && backdropConfig().show}\">\r\n    <div class=\"message-wrapper\" [ngClass]=\"{'show': backdropConfig().showMessage}\">\r\n      <span>{{ backdropConfig().message | translate }}</span>\r\n    </div>\r\n    <div class=\"content-backdrop\" [ngClass]=\"{'transparent': backdropConfig().showTransparentBackdrop}\" (click)=\"backdropClick()\">\r\n    </div>\r\n    <div class=\"flex flex-col flex-auto gap-4 h-full w-full overflow-hidden relative\">\r\n      @if (showFullscreenButton()) {\r\n        <button mat-icon-button type=\"button\" class=\"absolute top-2 right-3 !z-10\" [ngClass]=\"!isLeftDrawerOpen() && !isRightDrawerOpen() ? '!block' : '!hidden' \" (mouseover)=\"mouseOver()\" (mouseout)=\"hoverActive.set(false)\"\r\n                [matTooltip]=\"fullScreenEnabled() ? ('COMMON.EXIT_FULLSCREEN' | translate) : ('COMMON.ENTER_FULLSCREEN' | translate)\" (click)=\"fullscreenService.toggleFullScreen(); hoverActive.set(false)\" matTooltipPosition=\"left\">\r\n          @if (fullScreenEnabled()) {\r\n            <mat-icon>fullscreen_exit</mat-icon>\r\n          } @else {\r\n            <mat-icon>fullscreen</mat-icon>\r\n          }\r\n        </button>\r\n      }\r\n      <ng-content select=\"[details]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <div class=\"absolute h-full drawer right\" [ngClass]=\"{open : isRightDrawerOpen()}\" [ngStyle]=\"{'width': isRightDrawerOpen() ? rightDrawerConfig()?.width : '0px'}\">\r\n    <button mat-flat-button class=\"drawer-toggle\"\r\n            (click)=\"toggleRightDrawer()\"\r\n            [ngClass]=\"{'destructive-flat-button': isRightDrawerOpen()}\"\r\n            [matTooltip]=\"isRightDrawerOpen() ? ('COMMON.COLLAPSE_NAVIGATION' | translate) : ('COMMON.EXPAND_NAVIGATION' | translate)\"\r\n            matTooltipPosition=\"right\">\r\n      <span class=\"block\"><mat-icon [svgIcon]=\"isRightDrawerOpen() ? 'close' : 'arrow_left'\"></mat-icon></span>\r\n    </button>\r\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isRightDrawerOpen()}\">\r\n      <ng-content select=\"[right-drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.drawer{z-index:10;width:0;max-width:calc(100% - 40px);transition:all .3s cubic-bezier(.4,0,.2,1) 0s;position:relative;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.drawer:after{content:\"\";display:block;width:100%;height:100%;opacity:.6;position:absolute;inset:0;background-color:var(--mat-sys-surface-container);z-index:-1}.drawer .drawer-toggle{position:absolute;bottom:16px;right:0;word-break:keep-all;white-space:nowrap;min-width:fit-content!important;width:fit-content!important;transform:translate(100%);border-radius:0 5px 5px 0!important;padding:0 10px}.drawer .drawer-toggle.drawer-toggle-name{max-width:300px!important;min-width:unset!important;overflow:hidden}.drawer .drawer-toggle.drawer-toggle-name span{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis}.drawer .drawer-toggle .toggle-icon-small{margin:0 6px;height:10px;width:10px}.drawer.right{right:0;top:0}.drawer.right .drawer-toggle{display:none;position:absolute;bottom:16px;left:0;transform:translate(-100%);border-radius:5px 0 0 5px!important}.drawer.right .drawer-toggle span{line-height:12px}.drawer.right .drawer-toggle span mat-icon{height:24px;width:24px}.drawer.open{border-right:1px solid var(--mat-sys-outline-variant)}.drawer.open.right .drawer-toggle{display:block}.drawer.open.right{border-right:unset;border-left:1px solid var(--mat-sys-outline-variant)}.drawer.open .drawer-toggle span{line-height:12px}.drawer.open .drawer-toggle span mat-icon{height:24px;width:24px}:host-context(.alt-theme) .drawer.after{background-color:var(--mat-sys-surface-container-lowest)}.content-wrapper{position:relative}.content-wrapper .content-backdrop{transition:all .3s cubic-bezier(.4,0,.2,1) 0s;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;z-index:-1;background-color:transparent}.content-wrapper .message-wrapper{transition:all .5s cubic-bezier(.4,0,.2,1) 0s;position:absolute;right:32px;top:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);opacity:0;z-index:-1}.content-wrapper .message-wrapper.show{opacity:1;z-index:4}.content-wrapper.open .content-backdrop{background-color:#000;opacity:.5;z-index:3}.content-wrapper.open .content-backdrop.transparent{background-color:transparent}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onMouseMove: [{
                 type: HostListener,
                 args: ['window:mousemove']