@yuuvis/material 2.14.0 → 2.16.0

package/fesm2022/yuuvis-material-layout.mjs

@@ -1,10 +1,12 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, effect, Directive, TemplateRef, signal, Injectable, DestroyRef, contentChildren, computed, untracked, viewChild, model, Component, NgModule } from '@angular/core';
+import { inject, ElementRef, input, effect, Directive, TemplateRef, signal, Injectable, DestroyRef, viewChild, contentChildren, computed, untracked, model, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { MatDialog } from '@angular/material/dialog';
+import * as i4 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
 import { Router } from '@angular/router';
-import { DeviceService } from '@yuuvis/material';
+import { DeviceService, YmtIconButtonDirective } from '@yuuvis/material';
 import * as i3 from '@yuuvis/material/panes';
 import { YmtPanesModule } from '@yuuvis/material/panes';
 import * as i2 from 'angular-split';
@@ -63,10 +65,10 @@ class YmtLayoutPaneDirective {
     role = input.required();
     // template holding the actions shown in the top bar of the pane
     topBarActions = input();
-    updateSettings(s) {
-        this.areaProperties.set({ ...this.areaProperties(), ...s });
-    }
     areaProperties = signal({ visible: true });
+    updateSettings(settings) {
+        this.areaProperties.set({ ...this.areaProperties(), ...settings });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtLayoutPaneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", type: YmtLayoutPaneDirective, isStandalone: true, selector: "[ymtLayoutPane]", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: true, transformFunction: null }, topBarActions: { classPropertyName: "topBarActions", publicName: "topBarActions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
@@ -135,6 +137,8 @@ class MasterDetailsLayoutComponent {
     #router = inject(Router);
     #dRef = inject(DestroyRef);
     #DEFAULT_GUTTER_SIZE_PX = 16;
+    masterPaneRef = viewChild('masterPane');
+    detailsPaneRef = viewChild('detailsPane');
     isDragging = signal(false);
     panes = contentChildren(YmtLayoutPaneDirective);
     _panes = computed(() => {
@@ -216,17 +220,48 @@ class MasterDetailsLayoutComponent {
                 this.detailsActive.set(false);
         });
     });
-    onDragStart(e) {
+    onDragStart() {
         this.isDragging.set(true);
     }
-    onDragEnd(e) {
-        this.#updateLayoutSettings(e.sizes);
+    onDragEnd(event) {
+        this.#updateLayoutSettings(event.sizes);
         this.isDragging.set(false);
     }
+    hideArea(role) {
+        const pane = this._panes()[role];
+        pane.updateSettings({ visible: false });
+    }
+    showArea(role) {
+        const pane = this._panes()[role];
+        pane.updateSettings({ visible: true });
+    }
+    toggleArea(role) {
+        const pane = this._panes()[role];
+        pane.updateSettings({ visible: !pane.areaProperties().visible });
+    }
+    isAreaVisible(role) {
+        const pane = this._panes()[role];
+        return pane.areaProperties().visible !== false;
+    }
+    toggleFullscreen(role) {
+        const pane = role === 'master' ? this.masterPaneRef() : this.detailsPaneRef();
+        if (pane) {
+            if (pane.fullscreenActive()) {
+                pane.exitFullscreen();
+            }
+            else {
+                pane.enterFullscreen();
+            }
+        }
+    }
+    fullscreenActive(role) {
+        const pane = role === 'master' ? this.masterPaneRef() : this.detailsPaneRef();
+        return pane ? pane.fullscreenActive() : false;
+    }
     #updateLayoutSettings(sizes) {
         const layoutSettings = {
-            areas: this.panes().map((a, idx) => ({
-                visible: a.areaProperties().visible === false ? false : true,
+            areas: this.panes().map((area, idx) => ({
+                visible: area.areaProperties().visible === false ? false : true,
                 size: sizes[idx]
             }))
         };
@@ -240,7 +275,11 @@ class MasterDetailsLayoutComponent {
         const computedStyle = getComputedStyle(this.#elRef.nativeElement);
         const spacing = computedStyle.getPropertyValue('--ymt-spacing-m').trim();
         const fontSize = parseFloat(computedStyle.fontSize.trim());
-        const spacingPx = spacing.endsWith('rem') ? parseFloat(spacing) * fontSize : spacing.endsWith('px') ? parseFloat(spacing) : this.#DEFAULT_GUTTER_SIZE_PX;
+        const spacingPx = spacing.endsWith('rem')
+            ? parseFloat(spacing) * fontSize
+            : spacing.endsWith('px')
+                ? parseFloat(spacing)
+                : this.#DEFAULT_GUTTER_SIZE_PX;
         if (this._gutterSize() === this.#DEFAULT_GUTTER_SIZE_PX)
             this._gutterSize.set(spacingPx);
     }
@@ -263,11 +302,21 @@ class MasterDetailsLayoutComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MasterDetailsLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: MasterDetailsLayoutComponent, isStandalone: true, selector: "ymt-master-details-layout", inputs: { layoutSettingsID: { classPropertyName: "layoutSettingsID", publicName: "layoutSettingsID", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, detailsActive: { classPropertyName: "detailsActive", publicName: "detailsActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { detailsActive: "detailsActiveChange" }, queries: [{ propertyName: "panes", predicate: YmtLayoutPaneDirective, isSignal: true }], viewQueries: [{ propertyName: "detailsPaneTemplateRef", first: true, predicate: ["tplDetailsPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "@let mp = _panes().master;\n@let dp = _panes().details;\n@if (!smallScreenLayout()) {\n  <as-split\n    [direction]=\"direction()\"\n    [unit]=\"'percent'\"\n    [gutterSize]=\"_gutterSize()\"\n    [gutterStep]=\"1\"\n    [useTransition]=\"false\"\n    (dragStart)=\"onDragStart($event)\"\n    (dragEnd)=\"onDragEnd($event)\"\n  >\n    @if (gutterSize() === 1) {\n      <div *asSplitGutter=\"let isDragged = isDragged\" class=\"shade-gutter\" [class.dragged]=\"isDragged\">\n        <div class=\"shade-gutter-icon\" [class.vertical]=\"direction() === 'vertical'\" [class.horizontal]=\"direction() === 'horizontal'\"></div>\n      </div>\n    } @else {\n      <div *asSplitGutter class=\"split-gutter\">\n        <div\n          asSplitGutterDragHandle\n          class=\"split-gutter-handle\"\n          [class.vertical]=\"direction() === 'vertical'\"\n          [class.horizontal]=\"direction() === 'horizontal'\"\n        ></div>\n      </div>\n    }\n\n    <!-- master pane -->\n    @if (mp) {\n      <as-split-area\n        [yuvSplitAreaCover]=\"isDragging()\"\n        [maxSize]=\"mp.areaProperties().maxSize\"\n        [minSize]=\"mp.areaProperties().minSize\"\n        [lockSize]=\"mp.areaProperties().lockSize\"\n        [size]=\"mp.areaProperties().size\"\n        [visible]=\"mp.areaProperties().visible\"\n      >\n        <ymt-pane [topBarActions]=\"mp.topBarActions()\" [plain]=\"!!options().plainMode\">\n          <ng-template [ngTemplateOutlet]=\"mp.template\"></ng-template>\n        </ymt-pane>\n      </as-split-area>\n    }\n    <!-- details pane -->\n    @if (dp) {\n      <as-split-area\n        [yuvSplitAreaCover]=\"isDragging()\"\n        [maxSize]=\"dp.areaProperties().maxSize\"\n        [minSize]=\"dp.areaProperties().minSize\"\n        [lockSize]=\"dp.areaProperties().lockSize\"\n        [size]=\"dp.areaProperties().size\"\n        [visible]=\"dp.areaProperties().visible\"\n      >\n        <ymt-pane [topBarActions]=\"dp.topBarActions()\" [plain]=\"!!options().plainMode\">\n          <ng-template [ngTemplateOutlet]=\"dp.template\"></ng-template>\n        </ymt-pane>\n      </as-split-area>\n    }\n  </as-split>\n} @else {\n  <ymt-pane [topBarActions]=\"mp.topBarActions()\">\n    <ng-template [ngTemplateOutlet]=\"mp.template\"></ng-template>\n  </ymt-pane>\n}\n\n<ng-template #tplDetailsPanel>\n  <ymt-pane class=\"fullscreen\" [topBarActions]=\"dp.topBarActions()\" [mode]=\"'navigation'\" (navigationClicked)=\"detailsActive.set(false)\">\n    <ng-template [ngTemplateOutlet]=\"dp.template\"></ng-template>\n  </ymt-pane>\n</ng-template>\n", styles: [":host{--_split-gutter-background-color: var(--split-gutter-background-color, transparent);--_split-gutter-handle-border-radius: var(--split-gutter-handle-border-radius, 2px);--_split-gutter-handle-width: var(--split-gutter-handle-width, 2px);--_split-gutter-handle-height: var(--split-gutter-handle-height, var(--ymt-spacing-3xl));--_split-gutter-shade-background: var(--split-gutter-shade-background, var(--ymt-outline-variant));--_split-gutter-shade-hover-background: var(--split-gutter-shade-hover-background, currentColor);--_split-gutter-shade-size: var(--split-gutter-shade-size, 16px);overflow:hidden}:host as-split{--as-gutter-background-color: var(--_split-gutter-background-color)}:host .split-gutter{width:100%;height:100%}:host .split-gutter .split-gutter-handle{width:100%;height:100%;display:flex;align-items:center;justify-content:center}:host .split-gutter .split-gutter-handle:after{content:\"\";transition:background-color .3s ease-in-out;background-color:rgb(from var(--ymt-text-color) r g b/.2);display:block;width:var(--_split-gutter-handle-width);height:var(--_split-gutter-handle-height);border-radius:var(--_split-gutter-handle-border-radius)}:host .split-gutter .split-gutter-handle.vertical:after{width:var(--_split-gutter-handle-height);height:var(--_split-gutter-handle-width)}:host .split-gutter:hover .split-gutter-handle:after{background-color:rgb(from var(--ymt-text-color) r g b/.9)}:host .shade-gutter{width:100%;height:100%;background-color:var(--_split-gutter-shade-background);position:relative}:host .shade-gutter-icon{height:100%;width:100%;background-color:var(--_split-gutter-shade-hover-background);transition:opacity .3s;opacity:0;position:absolute;z-index:500}.dragged :host .shade-gutter-icon,:host .shade-gutter-icon:hover{opacity:.1}:host .shade-gutter-icon.horizontal{width:calc(var(--_split-gutter-shade-size) + 1px);inset-inline-start:calc(var(--_split-gutter-shade-size) / -2);inset-inline-end:var(--_split-gutter-shade-size)}:host .shade-gutter-icon.vertical{height:calc(var(--_split-gutter-shade-size) + 1px);inset-block-start:calc(var(--_split-gutter-shade-size) / -2);inset-block-end:var(--_split-gutter-shade-size)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AngularSplitModule }, { kind: "component", type: i2.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i2.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i2.SplitGutterDirective, selector: "[asSplitGutter]" }, { kind: "directive", type: i2.SplitGutterDragHandleDirective, selector: "[asSplitGutterDragHandle]" }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i3.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "plain", "mode", "modeAlign"], outputs: ["paneToggled", "navigationClicked"] }, { kind: "directive", type: AreaCoverDirective, selector: "[yuvSplitAreaCover]", inputs: ["yuvSplitAreaCover"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: MasterDetailsLayoutComponent, isStandalone: true, selector: "ymt-master-details-layout", inputs: { layoutSettingsID: { classPropertyName: "layoutSettingsID", publicName: "layoutSettingsID", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, detailsActive: { classPropertyName: "detailsActive", publicName: "detailsActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { detailsActive: "detailsActiveChange" }, queries: [{ propertyName: "panes", predicate: YmtLayoutPaneDirective, isSignal: true }], viewQueries: [{ propertyName: "masterPaneRef", first: true, predicate: ["masterPane"], descendants: true, isSignal: true }, { propertyName: "detailsPaneRef", first: true, predicate: ["detailsPane"], descendants: true, isSignal: true }, { propertyName: "detailsPaneTemplateRef", first: true, predicate: ["tplDetailsPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "@let mp = _panes().master;\n@let dp = _panes().details;\n@if (!smallScreenLayout()) {\n  <as-split\n    [direction]=\"direction()\"\n    unit=\"percent\"\n    [gutterSize]=\"_gutterSize()\"\n    [gutterStep]=\"1\"\n    [useTransition]=\"false\"\n    (dragStart)=\"onDragStart()\"\n    (dragEnd)=\"onDragEnd($event)\"\n  >\n    @if (gutterSize() === 1) {\n      <div *asSplitGutter=\"let isDragged = isDragged\" class=\"shade-gutter\" [class.dragged]=\"isDragged\">\n        <div\n          class=\"shade-gutter-icon\"\n          [class.vertical]=\"direction() === 'vertical'\"\n          [class.horizontal]=\"direction() === 'horizontal'\"\n        ></div>\n      </div>\n    } @else {\n      <div *asSplitGutter class=\"split-gutter\">\n        <div\n          asSplitGutterDragHandle\n          class=\"split-gutter-handle\"\n          [class.vertical]=\"direction() === 'vertical'\"\n          [class.horizontal]=\"direction() === 'horizontal'\"\n        ></div>\n      </div>\n    }\n\n    <!-- master pane -->\n    @if (mp) {\n      <as-split-area\n        [yuvSplitAreaCover]=\"isDragging()\"\n        [maxSize]=\"mp.areaProperties().maxSize\"\n        [minSize]=\"mp.areaProperties().minSize\"\n        [lockSize]=\"mp.areaProperties().lockSize\"\n        [size]=\"mp.areaProperties().size\"\n        [visible]=\"mp.areaProperties().visible\"\n      >\n        <ymt-pane #masterPane [topBarActions]=\"mp.topBarActions()\" [plain]=\"!!options().plainMode\">\n          <ng-template [ngTemplateOutlet]=\"mp.template\"></ng-template>\n        </ymt-pane>\n      </as-split-area>\n    }\n    <!-- details pane -->\n    @if (dp) {\n      <as-split-area\n        [yuvSplitAreaCover]=\"isDragging()\"\n        [maxSize]=\"dp.areaProperties().maxSize\"\n        [minSize]=\"dp.areaProperties().minSize\"\n        [lockSize]=\"dp.areaProperties().lockSize\"\n        [size]=\"dp.areaProperties().size\"\n        [visible]=\"dp.areaProperties().visible\"\n      >\n        <ymt-pane #detailsPane [topBarActions]=\"dp.topBarActions()\" [plain]=\"!!options().plainMode\">\n          <ng-template [ngTemplateOutlet]=\"dp.template\"></ng-template>\n        </ymt-pane>\n      </as-split-area>\n    }\n  </as-split>\n} @else {\n  <ymt-pane #masterPane [topBarActions]=\"mp.topBarActions()\">\n    <ng-template [ngTemplateOutlet]=\"mp.template\"></ng-template>\n  </ymt-pane>\n}\n\n<ng-template #tplDetailsPanel>\n  <ymt-pane #detailsPane class=\"fullscreen\" [topBarActions]=\"detailsBackAction\">\n    <ng-template [ngTemplateOutlet]=\"dp.template\"></ng-template>\n  </ymt-pane>\n</ng-template>\n\n<ng-template #detailsBackAction>\n  <button align=\"start\" ymt-icon-button icon-button-size=\"small\" (click)=\"detailsActive.set(false)\">\n    <mat-icon>arrow_back</mat-icon>\n  </button>\n  @if (dp.topBarActions(); as dta) {\n    <ng-container *ngTemplateOutlet=\"dta\"></ng-container>\n  }\n</ng-template>\n", styles: [":host{--_split-gutter-background-color: var(--split-gutter-background-color, transparent);--_split-gutter-handle-border-radius: var(--split-gutter-handle-border-radius, 2px);--_split-gutter-handle-width: var(--split-gutter-handle-width, 2px);--_split-gutter-handle-height: var(--split-gutter-handle-height, var(--ymt-spacing-3xl));--_split-gutter-shade-background: var(--split-gutter-shade-background, var(--ymt-outline-variant));--_split-gutter-shade-hover-background: var(--split-gutter-shade-hover-background, currentColor);--_split-gutter-shade-size: var(--split-gutter-shade-size, 16px);overflow:hidden}:host as-split{--as-gutter-background-color: var(--_split-gutter-background-color)}:host .split-gutter{width:100%;height:100%}:host .split-gutter .split-gutter-handle{width:100%;height:100%;display:flex;align-items:center;justify-content:center}:host .split-gutter .split-gutter-handle:after{content:\"\";transition:background-color .3s ease-in-out;background-color:rgb(from var(--ymt-text-color) r g b/.2);display:block;width:var(--_split-gutter-handle-width);height:var(--_split-gutter-handle-height);border-radius:var(--_split-gutter-handle-border-radius)}:host .split-gutter .split-gutter-handle.vertical:after{width:var(--_split-gutter-handle-height);height:var(--_split-gutter-handle-width)}:host .split-gutter:hover .split-gutter-handle:after{background-color:rgb(from var(--ymt-text-color) r g b/.9)}:host .shade-gutter{width:100%;height:100%;background-color:var(--_split-gutter-shade-background);position:relative}:host .shade-gutter-icon{height:100%;width:100%;background-color:var(--_split-gutter-shade-hover-background);transition:opacity .3s;opacity:0;position:absolute;z-index:500}.dragged :host .shade-gutter-icon,:host .shade-gutter-icon:hover{opacity:.1}:host .shade-gutter-icon.horizontal{width:calc(var(--_split-gutter-shade-size) + 1px);inset-inline-start:calc(var(--_split-gutter-shade-size) / -2);inset-inline-end:var(--_split-gutter-shade-size)}:host .shade-gutter-icon.vertical{height:calc(var(--_split-gutter-shade-size) + 1px);inset-block-start:calc(var(--_split-gutter-shade-size) / -2);inset-block-end:var(--_split-gutter-shade-size)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AngularSplitModule }, { kind: "component", type: i2.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i2.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i2.SplitGutterDirective, selector: "[asSplitGutter]" }, { kind: "directive", type: i2.SplitGutterDragHandleDirective, selector: "[asSplitGutterDragHandle]" }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i3.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "plain"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "directive", type: AreaCoverDirective, selector: "[yuvSplitAreaCover]", inputs: ["yuvSplitAreaCover"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MasterDetailsLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ymt-master-details-layout', imports: [CommonModule, AngularSplitModule, YmtPanesModule, AreaCoverDirective], template: "@let mp = _panes().master;\n@let dp = _panes().details;\n@if (!smallScreenLayout()) {\n  <as-split\n    [direction]=\"direction()\"\n    [unit]=\"'percent'\"\n    [gutterSize]=\"_gutterSize()\"\n    [gutterStep]=\"1\"\n    [useTransition]=\"false\"\n    (dragStart)=\"onDragStart($event)\"\n    (dragEnd)=\"onDragEnd($event)\"\n  >\n    @if (gutterSize() === 1) {\n      <div *asSplitGutter=\"let isDragged = isDragged\" class=\"shade-gutter\" [class.dragged]=\"isDragged\">\n        <div class=\"shade-gutter-icon\" [class.vertical]=\"direction() === 'vertical'\" [class.horizontal]=\"direction() === 'horizontal'\"></div>\n      </div>\n    } @else {\n      <div *asSplitGutter class=\"split-gutter\">\n        <div\n          asSplitGutterDragHandle\n          class=\"split-gutter-handle\"\n          [class.vertical]=\"direction() === 'vertical'\"\n          [class.horizontal]=\"direction() === 'horizontal'\"\n        ></div>\n      </div>\n    }\n\n    <!-- master pane -->\n    @if (mp) {\n      <as-split-area\n        [yuvSplitAreaCover]=\"isDragging()\"\n        [maxSize]=\"mp.areaProperties().maxSize\"\n        [minSize]=\"mp.areaProperties().minSize\"\n        [lockSize]=\"mp.areaProperties().lockSize\"\n        [size]=\"mp.areaProperties().size\"\n        [visible]=\"mp.areaProperties().visible\"\n      >\n        <ymt-pane [topBarActions]=\"mp.topBarActions()\" [plain]=\"!!options().plainMode\">\n          <ng-template [ngTemplateOutlet]=\"mp.template\"></ng-template>\n        </ymt-pane>\n      </as-split-area>\n    }\n    <!-- details pane -->\n    @if (dp) {\n      <as-split-area\n        [yuvSplitAreaCover]=\"isDragging()\"\n        [maxSize]=\"dp.areaProperties().maxSize\"\n        [minSize]=\"dp.areaProperties().minSize\"\n        [lockSize]=\"dp.areaProperties().lockSize\"\n        [size]=\"dp.areaProperties().size\"\n        [visible]=\"dp.areaProperties().visible\"\n      >\n        <ymt-pane [topBarActions]=\"dp.topBarActions()\" [plain]=\"!!options().plainMode\">\n          <ng-template [ngTemplateOutlet]=\"dp.template\"></ng-template>\n        </ymt-pane>\n      </as-split-area>\n    }\n  </as-split>\n} @else {\n  <ymt-pane [topBarActions]=\"mp.topBarActions()\">\n    <ng-template [ngTemplateOutlet]=\"mp.template\"></ng-template>\n  </ymt-pane>\n}\n\n<ng-template #tplDetailsPanel>\n  <ymt-pane class=\"fullscreen\" [topBarActions]=\"dp.topBarActions()\" [mode]=\"'navigation'\" (navigationClicked)=\"detailsActive.set(false)\">\n    <ng-template [ngTemplateOutlet]=\"dp.template\"></ng-template>\n  </ymt-pane>\n</ng-template>\n", styles: [":host{--_split-gutter-background-color: var(--split-gutter-background-color, transparent);--_split-gutter-handle-border-radius: var(--split-gutter-handle-border-radius, 2px);--_split-gutter-handle-width: var(--split-gutter-handle-width, 2px);--_split-gutter-handle-height: var(--split-gutter-handle-height, var(--ymt-spacing-3xl));--_split-gutter-shade-background: var(--split-gutter-shade-background, var(--ymt-outline-variant));--_split-gutter-shade-hover-background: var(--split-gutter-shade-hover-background, currentColor);--_split-gutter-shade-size: var(--split-gutter-shade-size, 16px);overflow:hidden}:host as-split{--as-gutter-background-color: var(--_split-gutter-background-color)}:host .split-gutter{width:100%;height:100%}:host .split-gutter .split-gutter-handle{width:100%;height:100%;display:flex;align-items:center;justify-content:center}:host .split-gutter .split-gutter-handle:after{content:\"\";transition:background-color .3s ease-in-out;background-color:rgb(from var(--ymt-text-color) r g b/.2);display:block;width:var(--_split-gutter-handle-width);height:var(--_split-gutter-handle-height);border-radius:var(--_split-gutter-handle-border-radius)}:host .split-gutter .split-gutter-handle.vertical:after{width:var(--_split-gutter-handle-height);height:var(--_split-gutter-handle-width)}:host .split-gutter:hover .split-gutter-handle:after{background-color:rgb(from var(--ymt-text-color) r g b/.9)}:host .shade-gutter{width:100%;height:100%;background-color:var(--_split-gutter-shade-background);position:relative}:host .shade-gutter-icon{height:100%;width:100%;background-color:var(--_split-gutter-shade-hover-background);transition:opacity .3s;opacity:0;position:absolute;z-index:500}.dragged :host .shade-gutter-icon,:host .shade-gutter-icon:hover{opacity:.1}:host .shade-gutter-icon.horizontal{width:calc(var(--_split-gutter-shade-size) + 1px);inset-inline-start:calc(var(--_split-gutter-shade-size) / -2);inset-inline-end:var(--_split-gutter-shade-size)}:host .shade-gutter-icon.vertical{height:calc(var(--_split-gutter-shade-size) + 1px);inset-block-start:calc(var(--_split-gutter-shade-size) / -2);inset-block-end:var(--_split-gutter-shade-size)}\n"] }]
+            args: [{ selector: 'ymt-master-details-layout', imports: [
+                        CommonModule,
+                        AngularSplitModule,
+                        YmtPanesModule,
+                        MatIconModule,
+                        YmtIconButtonDirective,
+                        CommonModule,
+                        AngularSplitModule,
+                        YmtPanesModule,
+                        AreaCoverDirective
+                    ], template: "@let mp = _panes().master;\n@let dp = _panes().details;\n@if (!smallScreenLayout()) {\n  <as-split\n    [direction]=\"direction()\"\n    unit=\"percent\"\n    [gutterSize]=\"_gutterSize()\"\n    [gutterStep]=\"1\"\n    [useTransition]=\"false\"\n    (dragStart)=\"onDragStart()\"\n    (dragEnd)=\"onDragEnd($event)\"\n  >\n    @if (gutterSize() === 1) {\n      <div *asSplitGutter=\"let isDragged = isDragged\" class=\"shade-gutter\" [class.dragged]=\"isDragged\">\n        <div\n          class=\"shade-gutter-icon\"\n          [class.vertical]=\"direction() === 'vertical'\"\n          [class.horizontal]=\"direction() === 'horizontal'\"\n        ></div>\n      </div>\n    } @else {\n      <div *asSplitGutter class=\"split-gutter\">\n        <div\n          asSplitGutterDragHandle\n          class=\"split-gutter-handle\"\n          [class.vertical]=\"direction() === 'vertical'\"\n          [class.horizontal]=\"direction() === 'horizontal'\"\n        ></div>\n      </div>\n    }\n\n    <!-- master pane -->\n    @if (mp) {\n      <as-split-area\n        [yuvSplitAreaCover]=\"isDragging()\"\n        [maxSize]=\"mp.areaProperties().maxSize\"\n        [minSize]=\"mp.areaProperties().minSize\"\n        [lockSize]=\"mp.areaProperties().lockSize\"\n        [size]=\"mp.areaProperties().size\"\n        [visible]=\"mp.areaProperties().visible\"\n      >\n        <ymt-pane #masterPane [topBarActions]=\"mp.topBarActions()\" [plain]=\"!!options().plainMode\">\n          <ng-template [ngTemplateOutlet]=\"mp.template\"></ng-template>\n        </ymt-pane>\n      </as-split-area>\n    }\n    <!-- details pane -->\n    @if (dp) {\n      <as-split-area\n        [yuvSplitAreaCover]=\"isDragging()\"\n        [maxSize]=\"dp.areaProperties().maxSize\"\n        [minSize]=\"dp.areaProperties().minSize\"\n        [lockSize]=\"dp.areaProperties().lockSize\"\n        [size]=\"dp.areaProperties().size\"\n        [visible]=\"dp.areaProperties().visible\"\n      >\n        <ymt-pane #detailsPane [topBarActions]=\"dp.topBarActions()\" [plain]=\"!!options().plainMode\">\n          <ng-template [ngTemplateOutlet]=\"dp.template\"></ng-template>\n        </ymt-pane>\n      </as-split-area>\n    }\n  </as-split>\n} @else {\n  <ymt-pane #masterPane [topBarActions]=\"mp.topBarActions()\">\n    <ng-template [ngTemplateOutlet]=\"mp.template\"></ng-template>\n  </ymt-pane>\n}\n\n<ng-template #tplDetailsPanel>\n  <ymt-pane #detailsPane class=\"fullscreen\" [topBarActions]=\"detailsBackAction\">\n    <ng-template [ngTemplateOutlet]=\"dp.template\"></ng-template>\n  </ymt-pane>\n</ng-template>\n\n<ng-template #detailsBackAction>\n  <button align=\"start\" ymt-icon-button icon-button-size=\"small\" (click)=\"detailsActive.set(false)\">\n    <mat-icon>arrow_back</mat-icon>\n  </button>\n  @if (dp.topBarActions(); as dta) {\n    <ng-container *ngTemplateOutlet=\"dta\"></ng-container>\n  }\n</ng-template>\n", styles: [":host{--_split-gutter-background-color: var(--split-gutter-background-color, transparent);--_split-gutter-handle-border-radius: var(--split-gutter-handle-border-radius, 2px);--_split-gutter-handle-width: var(--split-gutter-handle-width, 2px);--_split-gutter-handle-height: var(--split-gutter-handle-height, var(--ymt-spacing-3xl));--_split-gutter-shade-background: var(--split-gutter-shade-background, var(--ymt-outline-variant));--_split-gutter-shade-hover-background: var(--split-gutter-shade-hover-background, currentColor);--_split-gutter-shade-size: var(--split-gutter-shade-size, 16px);overflow:hidden}:host as-split{--as-gutter-background-color: var(--_split-gutter-background-color)}:host .split-gutter{width:100%;height:100%}:host .split-gutter .split-gutter-handle{width:100%;height:100%;display:flex;align-items:center;justify-content:center}:host .split-gutter .split-gutter-handle:after{content:\"\";transition:background-color .3s ease-in-out;background-color:rgb(from var(--ymt-text-color) r g b/.2);display:block;width:var(--_split-gutter-handle-width);height:var(--_split-gutter-handle-height);border-radius:var(--_split-gutter-handle-border-radius)}:host .split-gutter .split-gutter-handle.vertical:after{width:var(--_split-gutter-handle-height);height:var(--_split-gutter-handle-width)}:host .split-gutter:hover .split-gutter-handle:after{background-color:rgb(from var(--ymt-text-color) r g b/.9)}:host .shade-gutter{width:100%;height:100%;background-color:var(--_split-gutter-shade-background);position:relative}:host .shade-gutter-icon{height:100%;width:100%;background-color:var(--_split-gutter-shade-hover-background);transition:opacity .3s;opacity:0;position:absolute;z-index:500}.dragged :host .shade-gutter-icon,:host .shade-gutter-icon:hover{opacity:.1}:host .shade-gutter-icon.horizontal{width:calc(var(--_split-gutter-shade-size) + 1px);inset-inline-start:calc(var(--_split-gutter-shade-size) / -2);inset-inline-end:var(--_split-gutter-shade-size)}:host .shade-gutter-icon.vertical{height:calc(var(--_split-gutter-shade-size) + 1px);inset-block-start:calc(var(--_split-gutter-shade-size) / -2);inset-block-end:var(--_split-gutter-shade-size)}\n"] }]
         }] });
 
 const cmp = [MasterDetailsLayoutComponent, YmtLayoutPaneDirective];

package/fesm2022/yuuvis-material-layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"yuuvis-material-layout.mjs","sources":["../../../../../libs/yuuvis/material/layout/src/lib/directives/area-cover.directive.ts","../../../../../libs/yuuvis/material/layout/src/lib/directives/layout-pane.directive.ts","../../../../../libs/yuuvis/material/layout/src/lib/services/layout.service.ts","../../../../../libs/yuuvis/material/layout/src/lib/components/master-details-layout/master-details-layout.component.ts","../../../../../libs/yuuvis/material/layout/src/lib/components/master-details-layout/master-details-layout.component.html","../../../../../libs/yuuvis/material/layout/src/lib/layout.module.ts","../../../../../libs/yuuvis/material/layout/src/yuuvis-material-layout.ts"],"sourcesContent":["import { Directive, effect, ElementRef, inject, input } from '@angular/core';\n\n/**\n * TODO: This directive is currently used in the MasterDetailsLayoutComponent to add a cover element during dragging of the split area,\n * to prevent iframes in the panes from capturing the drag events.\n * However, this directive is very generic and can be used in any component that needs to add a cover element during dragging.\n * Therefore, it should be moved to @yuuvis/client-components and then replaced with the SplitAreaCoverDirective from the client-framework/split-view library.\n */\n@Directive({\n  selector: '[yuvSplitAreaCover]'\n})\nexport class AreaCoverDirective {\n  #elRef = inject(ElementRef);\n\n  yuvSplitAreaCover = input<boolean>(false);\n  #draggingEffect = effect(() => {\n    this.#toggleCover(this.yuvSplitAreaCover());\n  });\n\n  #coverElement?: HTMLElement;\n\n  #toggleCover(active: boolean) {\n    const el: HTMLElement = this.#elRef.nativeElement as HTMLElement;\n\n    if (this.#coverElement) {\n      el.style.position = 'initial';\n      this.#coverElement.remove();\n      this.#coverElement = undefined;\n    }\n    if (active) {\n      el.style.position = 'relative';\n      this.#coverElement = this.#createCoverElement();\n      el.append(this.#coverElement);\n    }\n  }\n\n  #createCoverElement(): HTMLElement {\n    const coverElement = document.createElement('div');\n    coverElement.classList.add('yuv-split-area-cover');\n    coverElement.style.position = 'absolute';\n    coverElement.style.zIndex = '500';\n    coverElement.style.inset = '0';\n    return coverElement;\n  }\n}\n","import { Directive, inject, input, signal, TemplateRef } from '@angular/core';\nimport { LayoutPaneRole, PaneLayoutSettings } from '../layout.interface';\n\n/**\n * Directive to mark a layout pane.\n */\n@Directive({\n  selector: '[ymtLayoutPane]'\n})\nexport class YmtLayoutPaneDirective {\n  template = inject(TemplateRef<any>);\n  // Role the pane takes in the layout\n  role = input.required<LayoutPaneRole>();\n  // template holding the actions shown in the top bar of the pane\n  topBarActions = input<TemplateRef<any>>();\n\n  updateSettings(s: PaneLayoutSettings) {\n    this.areaProperties.set({ ...this.areaProperties(), ...s });\n  }\n\n  areaProperties = signal<PaneLayoutSettings>({ visible: true });\n}\n","import { Injectable } from '@angular/core';\n\n/**\n * Service to store and retrieve layout settings. Those\n * settings are stored on the users device because in\n * general layout settings like panel widths are highly\n * dependent on the current device.\n */\n@Injectable({\n  providedIn: 'root'\n})\nexport class LayoutService {\n  #STORAGE_PREFIX = 'ymt.layout:';\n\n  DEFAULT_SPLIT_VIEW_GUTTER_SIZE = 16;\n\n  saveSettings(key: string, settings: unknown): boolean {\n    if (typeof settings === 'object') {\n      localStorage.setItem(this.#getKey(key), JSON.stringify(settings));\n      return true;\n    } else return false;\n  }\n\n  getSettings(key: string): unknown | undefined {\n    try {\n      const v = localStorage.getItem(this.#getKey(key));\n      return v ? JSON.parse(v) : undefined;\n    } catch (e) {\n      console.error('Error while parsing layout settings', e);\n      return undefined;\n    }\n  }\n\n  #getKey(key: string) {\n    return `${this.#STORAGE_PREFIX}${key}`;\n  }\n\n  /**\n   * Clears all layout settings.\n   */\n  clearSettings(): void {\n    Object.keys(localStorage).forEach((key) => {\n      if (key.startsWith(this.#STORAGE_PREFIX)) {\n        localStorage.removeItem(key);\n      }\n    });\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport {\n  Component,\n  computed,\n  contentChildren,\n  DestroyRef,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  model,\n  signal,\n  TemplateRef,\n  untracked,\n  viewChild\n} from '@angular/core';\nimport { MatDialog, MatDialogRef } from '@angular/material/dialog';\nimport { Router } from '@angular/router';\nimport { DeviceService } from '@yuuvis/material';\nimport { YmtPanesModule } from '@yuuvis/material/panes';\nimport { AngularSplitModule, SplitAreaSize, SplitDirection } from 'angular-split';\nimport { AreaCoverDirective } from '../../directives/area-cover.directive';\nimport { YmtLayoutPaneDirective } from '../../directives/layout-pane.directive';\nimport { LayoutOutputData, LayoutSettings, MasterDetailsPaneLayoutOptions, PaneLayoutSettings } from '../../layout.interface';\nimport { LayoutService } from '../../services/layout.service';\n\n@Component({\n  selector: 'ymt-master-details-layout',\n  imports: [CommonModule, AngularSplitModule, YmtPanesModule, AreaCoverDirective],\n  templateUrl: './master-details-layout.component.html',\n  styleUrl: './master-details-layout.component.scss'\n})\nexport class MasterDetailsLayoutComponent {\n  #elRef = inject(ElementRef);\n  #layoutService = inject(LayoutService);\n  #dialog = inject(MatDialog);\n  #device = inject(DeviceService);\n  #router = inject(Router);\n  #dRef = inject(DestroyRef);\n\n  #DEFAULT_GUTTER_SIZE_PX = 16;\n\n  isDragging = signal(false);\n\n  panes = contentChildren<YmtLayoutPaneDirective>(YmtLayoutPaneDirective);\n  _panes = computed<{\n    master: YmtLayoutPaneDirective;\n    details: YmtLayoutPaneDirective;\n  }>(() => {\n    const _panes = this.panes();\n    const _options = this.options();\n    untracked(() => {\n      _panes.forEach((p) =>\n        p.updateSettings({\n          size: _options[`${p.role()}Size` as keyof MasterDetailsPaneLayoutOptions] as SplitAreaSize,\n          minSize: _options[`${p.role()}MinSize` as keyof MasterDetailsPaneLayoutOptions] as number,\n          maxSize: _options[`${p.role()}MaxSize` as keyof MasterDetailsPaneLayoutOptions] as number\n        })\n      );\n    });\n\n    const res = {\n      master: _panes.find((p) => p.role() === 'master')!,\n      details: _panes.find((p) => p.role() === 'details')!\n    };\n    if (!res.master || !res.details) console.error('Both master and details panes are required in MasterDetailsLayoutComponent');\n    return res;\n  });\n\n  #detailsPaneDialogRef: MatDialogRef<any> | null = null;\n  detailsPaneTemplateRef = viewChild.required<TemplateRef<any>>('tplDetailsPanel');\n\n  /**\n   * Setting ID for persisting layout settings. If not set, layout settings won't be persisted.\n   */\n  layoutSettingsID = input<string | undefined>(undefined);\n\n  options = input<MasterDetailsPaneLayoutOptions>({\n    resizable: true\n  });\n  #optionsEffect = computed(() => {\n    const o = this.options();\n    // if(o.m)\n  });\n\n  /**\n   * The split views direction. Could be 'horizontal' or 'vertical'. Defaults to 'horizontal'.\n   */\n  direction = input<SplitDirection>('horizontal');\n\n  /**\n   * Size of the gutter in Pixel.\n   */\n  gutterSize = input<number>(this.#DEFAULT_GUTTER_SIZE_PX);\n  _gutterSize = signal<number>(this.#DEFAULT_GUTTER_SIZE_PX);\n  #gutterSizeEffect = effect(() => {\n    this._gutterSize.set(this.gutterSize());\n  });\n\n  /**\n   * Enable/disable details pane (also use as two-way-bound variable: [(detailsActive)])\n   */\n  detailsActive = model<boolean>(false);\n  #detailsActiveEffect = effect(() => {\n    const da = this.detailsActive();\n    untracked(() => {\n      if (this.#detailsPaneDialogRef) this.#detailsPaneDialogRef.close();\n      if (this.smallScreenLayout() && da) {\n        this.#detailsPaneDialogRef = this.#dialog.open(this.detailsPaneTemplateRef(), {\n          width: '100vw',\n          height: '100vh',\n          maxWidth: '100vw',\n          panelClass: 'ymt-dialog-fullscreen'\n        });\n        this.#detailsPaneDialogRef.afterClosed().subscribe((silent: boolean) => {\n          if (!silent) {\n            this.detailsActive.set(false);\n          }\n          this.#detailsPaneDialogRef = null;\n        });\n      }\n    });\n  });\n\n  smallScreenLayout = this.#device.smallScreenLayout;\n  #smallScreenLayoutEffect = effect(() => {\n    const ssl = this.smallScreenLayout();\n    if (this.#detailsPaneDialogRef) this.#detailsPaneDialogRef.close(true);\n    untracked(() => {\n      const da = this.detailsActive();\n      if (ssl && da) this.detailsActive.set(false);\n    });\n  });\n\n  onDragStart(e: LayoutOutputData) {\n    this.isDragging.set(true);\n  }\n\n  onDragEnd(e: LayoutOutputData) {\n    this.#updateLayoutSettings(e.sizes);\n    this.isDragging.set(false);\n  }\n\n  #updateLayoutSettings(sizes: SplitAreaSize[]) {\n    const layoutSettings: LayoutSettings = {\n      areas: this.panes().map((a: YmtLayoutPaneDirective, idx: number) => ({\n        visible: a.areaProperties().visible === false ? false : true,\n        size: sizes[idx]\n      }))\n    };\n    // save layout settings if persistence is enabled\n    const lsid = this.layoutSettingsID();\n    if (lsid) {\n      this.#layoutService.saveSettings(lsid, layoutSettings);\n    }\n  }\n\n  #calculateGutterSize() {\n    const computedStyle = getComputedStyle(this.#elRef.nativeElement);\n    const spacing = computedStyle.getPropertyValue('--ymt-spacing-m').trim();\n    const fontSize = parseFloat(computedStyle.fontSize.trim());\n    const spacingPx = spacing.endsWith('rem') ? parseFloat(spacing) * fontSize : spacing.endsWith('px') ? parseFloat(spacing) : this.#DEFAULT_GUTTER_SIZE_PX;\n    if (this._gutterSize() === this.#DEFAULT_GUTTER_SIZE_PX) this._gutterSize.set(spacingPx);\n  }\n\n  applyLayoutSettings(settings: LayoutSettings) {\n    if (!this.#isLayoutSettingsObject(settings)) return;\n    settings.areas.forEach((a: PaneLayoutSettings, index: number) => {\n      this.panes()[index].updateSettings(a);\n    });\n  }\n\n  #isLayoutSettingsObject(v: any): boolean {\n    return v && 'areas' in v;\n  }\n\n  ngAfterViewInit(): void {\n    this.#calculateGutterSize();\n    // try to load layout settings if persistence is enabled\n    const lsid = this.layoutSettingsID();\n    if (lsid) {\n      this.applyLayoutSettings(this.#layoutService.getSettings(lsid) as LayoutSettings);\n    }\n  }\n}\n","@let mp = _panes().master;\n@let dp = _panes().details;\n@if (!smallScreenLayout()) {\n  <as-split\n    [direction]=\"direction()\"\n    [unit]=\"'percent'\"\n    [gutterSize]=\"_gutterSize()\"\n    [gutterStep]=\"1\"\n    [useTransition]=\"false\"\n    (dragStart)=\"onDragStart($event)\"\n    (dragEnd)=\"onDragEnd($event)\"\n  >\n    @if (gutterSize() === 1) {\n      <div *asSplitGutter=\"let isDragged = isDragged\" class=\"shade-gutter\" [class.dragged]=\"isDragged\">\n        <div class=\"shade-gutter-icon\" [class.vertical]=\"direction() === 'vertical'\" [class.horizontal]=\"direction() === 'horizontal'\"></div>\n      </div>\n    } @else {\n      <div *asSplitGutter class=\"split-gutter\">\n        <div\n          asSplitGutterDragHandle\n          class=\"split-gutter-handle\"\n          [class.vertical]=\"direction() === 'vertical'\"\n          [class.horizontal]=\"direction() === 'horizontal'\"\n        ></div>\n      </div>\n    }\n\n    <!-- master pane -->\n    @if (mp) {\n      <as-split-area\n        [yuvSplitAreaCover]=\"isDragging()\"\n        [maxSize]=\"mp.areaProperties().maxSize\"\n        [minSize]=\"mp.areaProperties().minSize\"\n        [lockSize]=\"mp.areaProperties().lockSize\"\n        [size]=\"mp.areaProperties().size\"\n        [visible]=\"mp.areaProperties().visible\"\n      >\n        <ymt-pane [topBarActions]=\"mp.topBarActions()\" [plain]=\"!!options().plainMode\">\n          <ng-template [ngTemplateOutlet]=\"mp.template\"></ng-template>\n        </ymt-pane>\n      </as-split-area>\n    }\n    <!-- details pane -->\n    @if (dp) {\n      <as-split-area\n        [yuvSplitAreaCover]=\"isDragging()\"\n        [maxSize]=\"dp.areaProperties().maxSize\"\n        [minSize]=\"dp.areaProperties().minSize\"\n        [lockSize]=\"dp.areaProperties().lockSize\"\n        [size]=\"dp.areaProperties().size\"\n        [visible]=\"dp.areaProperties().visible\"\n      >\n        <ymt-pane [topBarActions]=\"dp.topBarActions()\" [plain]=\"!!options().plainMode\">\n          <ng-template [ngTemplateOutlet]=\"dp.template\"></ng-template>\n        </ymt-pane>\n      </as-split-area>\n    }\n  </as-split>\n} @else {\n  <ymt-pane [topBarActions]=\"mp.topBarActions()\">\n    <ng-template [ngTemplateOutlet]=\"mp.template\"></ng-template>\n  </ymt-pane>\n}\n\n<ng-template #tplDetailsPanel>\n  <ymt-pane class=\"fullscreen\" [topBarActions]=\"dp.topBarActions()\" [mode]=\"'navigation'\" (navigationClicked)=\"detailsActive.set(false)\">\n    <ng-template [ngTemplateOutlet]=\"dp.template\"></ng-template>\n  </ymt-pane>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { MasterDetailsLayoutComponent } from './components/master-details-layout/master-details-layout.component';\nimport { YmtLayoutPaneDirective } from './directives/layout-pane.directive';\n\nconst cmp = [MasterDetailsLayoutComponent, YmtLayoutPaneDirective]\n\n@NgModule({\n  imports: cmp,\n  exports: cmp\n})\nexport class YmtLayoutModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"yuuvis-material-layout.mjs","sources":["../../../../../libs/yuuvis/material/layout/src/lib/directives/area-cover.directive.ts","../../../../../libs/yuuvis/material/layout/src/lib/directives/layout-pane.directive.ts","../../../../../libs/yuuvis/material/layout/src/lib/services/layout.service.ts","../../../../../libs/yuuvis/material/layout/src/lib/components/master-details-layout/master-details-layout.component.ts","../../../../../libs/yuuvis/material/layout/src/lib/components/master-details-layout/master-details-layout.component.html","../../../../../libs/yuuvis/material/layout/src/lib/layout.module.ts","../../../../../libs/yuuvis/material/layout/src/yuuvis-material-layout.ts"],"sourcesContent":["import { Directive, effect, ElementRef, inject, input } from '@angular/core';\n\n/**\n * TODO: This directive is currently used in the MasterDetailsLayoutComponent to add a cover element during dragging of the split area,\n * to prevent iframes in the panes from capturing the drag events.\n * However, this directive is very generic and can be used in any component that needs to add a cover element during dragging.\n * Therefore, it should be moved to @yuuvis/client-components and then replaced with the SplitAreaCoverDirective from the client-framework/split-view library.\n */\n@Directive({\n  selector: '[yuvSplitAreaCover]'\n})\nexport class AreaCoverDirective {\n  #elRef = inject(ElementRef);\n\n  yuvSplitAreaCover = input<boolean>(false);\n  #draggingEffect = effect(() => {\n    this.#toggleCover(this.yuvSplitAreaCover());\n  });\n\n  #coverElement?: HTMLElement;\n\n  #toggleCover(active: boolean) {\n    const el: HTMLElement = this.#elRef.nativeElement as HTMLElement;\n\n    if (this.#coverElement) {\n      el.style.position = 'initial';\n      this.#coverElement.remove();\n      this.#coverElement = undefined;\n    }\n    if (active) {\n      el.style.position = 'relative';\n      this.#coverElement = this.#createCoverElement();\n      el.append(this.#coverElement);\n    }\n  }\n\n  #createCoverElement(): HTMLElement {\n    const coverElement = document.createElement('div');\n    coverElement.classList.add('yuv-split-area-cover');\n    coverElement.style.position = 'absolute';\n    coverElement.style.zIndex = '500';\n    coverElement.style.inset = '0';\n    return coverElement;\n  }\n}\n","import { Directive, inject, input, signal, TemplateRef } from '@angular/core';\nimport { LayoutPaneRole, PaneLayoutSettings } from '../layout.interface';\n\n/**\n * Directive to mark a layout pane.\n */\n@Directive({\n  selector: '[ymtLayoutPane]'\n})\nexport class YmtLayoutPaneDirective {\n  template = inject(TemplateRef<unknown>);\n  // Role the pane takes in the layout\n  role = input.required<LayoutPaneRole>();\n  // template holding the actions shown in the top bar of the pane\n  topBarActions = input<TemplateRef<unknown>>();\n  areaProperties = signal<PaneLayoutSettings>({ visible: true });\n\n  updateSettings(settings: PaneLayoutSettings): void {\n    this.areaProperties.set({ ...this.areaProperties(), ...settings });\n  }\n}\n","import { Injectable } from '@angular/core';\n\n/**\n * Service to store and retrieve layout settings. Those\n * settings are stored on the users device because in\n * general layout settings like panel widths are highly\n * dependent on the current device.\n */\n@Injectable({\n  providedIn: 'root'\n})\nexport class LayoutService {\n  #STORAGE_PREFIX = 'ymt.layout:';\n\n  DEFAULT_SPLIT_VIEW_GUTTER_SIZE = 16;\n\n  saveSettings(key: string, settings: unknown): boolean {\n    if (typeof settings === 'object') {\n      localStorage.setItem(this.#getKey(key), JSON.stringify(settings));\n      return true;\n    } else return false;\n  }\n\n  getSettings(key: string): unknown | undefined {\n    try {\n      const v = localStorage.getItem(this.#getKey(key));\n      return v ? JSON.parse(v) : undefined;\n    } catch (e) {\n      console.error('Error while parsing layout settings', e);\n      return undefined;\n    }\n  }\n\n  #getKey(key: string) {\n    return `${this.#STORAGE_PREFIX}${key}`;\n  }\n\n  /**\n   * Clears all layout settings.\n   */\n  clearSettings(): void {\n    Object.keys(localStorage).forEach((key) => {\n      if (key.startsWith(this.#STORAGE_PREFIX)) {\n        localStorage.removeItem(key);\n      }\n    });\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport {\n  Component,\n  computed,\n  contentChildren,\n  DestroyRef,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  model,\n  signal,\n  TemplateRef,\n  untracked,\n  viewChild\n} from '@angular/core';\nimport { MatDialog, MatDialogRef } from '@angular/material/dialog';\nimport { MatIconModule } from '@angular/material/icon';\nimport { Router } from '@angular/router';\nimport { DeviceService, YmtIconButtonDirective } from '@yuuvis/material';\nimport { YmtPaneComponent, YmtPanesModule } from '@yuuvis/material/panes';\nimport { AngularSplitModule, SplitAreaSize, SplitDirection } from 'angular-split';\nimport { AreaCoverDirective } from '../../directives/area-cover.directive';\nimport { YmtLayoutPaneDirective } from '../../directives/layout-pane.directive';\nimport {\n  LayoutOutputData,\n  LayoutSettings,\n  MasterDetailsPaneLayoutOptions,\n  PaneLayoutSettings\n} from '../../layout.interface';\nimport { LayoutService } from '../../services/layout.service';\n\n@Component({\n  selector: 'ymt-master-details-layout',\n  imports: [\n    CommonModule,\n    AngularSplitModule,\n    YmtPanesModule,\n    MatIconModule,\n    YmtIconButtonDirective,\n    CommonModule,\n    AngularSplitModule,\n    YmtPanesModule,\n    AreaCoverDirective\n  ],\n  templateUrl: './master-details-layout.component.html',\n  styleUrl: './master-details-layout.component.scss'\n})\nexport class MasterDetailsLayoutComponent {\n  #elRef = inject(ElementRef);\n  #layoutService = inject(LayoutService);\n  #dialog = inject(MatDialog);\n  #device = inject(DeviceService);\n  #router = inject(Router);\n  #dRef = inject(DestroyRef);\n\n  #DEFAULT_GUTTER_SIZE_PX = 16;\n\n  masterPaneRef = viewChild<YmtPaneComponent>('masterPane');\n  detailsPaneRef = viewChild<YmtPaneComponent>('detailsPane');\n\n  isDragging = signal(false);\n\n  panes = contentChildren<YmtLayoutPaneDirective>(YmtLayoutPaneDirective);\n  _panes = computed<{\n    master: YmtLayoutPaneDirective;\n    details: YmtLayoutPaneDirective;\n  }>(() => {\n    const _panes = this.panes();\n    const _options = this.options();\n    untracked(() => {\n      _panes.forEach((p) =>\n        p.updateSettings({\n          size: _options[`${p.role()}Size` as keyof MasterDetailsPaneLayoutOptions] as SplitAreaSize,\n          minSize: _options[`${p.role()}MinSize` as keyof MasterDetailsPaneLayoutOptions] as number,\n          maxSize: _options[`${p.role()}MaxSize` as keyof MasterDetailsPaneLayoutOptions] as number\n        })\n      );\n    });\n\n    const res = {\n      master: _panes.find((p) => p.role() === 'master')!,\n      details: _panes.find((p) => p.role() === 'details')!\n    };\n    if (!res.master || !res.details)\n      console.error('Both master and details panes are required in MasterDetailsLayoutComponent');\n    return res;\n  });\n\n  #detailsPaneDialogRef: MatDialogRef<any> | null = null;\n  detailsPaneTemplateRef = viewChild.required<TemplateRef<any>>('tplDetailsPanel');\n\n  /**\n   * Setting ID for persisting layout settings. If not set, layout settings won't be persisted.\n   */\n  layoutSettingsID = input<string | undefined>(undefined);\n\n  options = input<MasterDetailsPaneLayoutOptions>({\n    resizable: true\n  });\n  #optionsEffect = computed(() => {\n    const o = this.options();\n    // if(o.m)\n  });\n\n  /**\n   * The split views direction. Could be 'horizontal' or 'vertical'. Defaults to 'horizontal'.\n   */\n  direction = input<SplitDirection>('horizontal');\n\n  /**\n   * Size of the gutter in Pixel.\n   */\n  gutterSize = input<number>(this.#DEFAULT_GUTTER_SIZE_PX);\n  _gutterSize = signal<number>(this.#DEFAULT_GUTTER_SIZE_PX);\n  #gutterSizeEffect = effect(() => {\n    this._gutterSize.set(this.gutterSize());\n  });\n\n  /**\n   * Enable/disable details pane (also use as two-way-bound variable: [(detailsActive)])\n   */\n  detailsActive = model<boolean>(false);\n  #detailsActiveEffect = effect(() => {\n    const da = this.detailsActive();\n    untracked(() => {\n      if (this.#detailsPaneDialogRef) this.#detailsPaneDialogRef.close();\n      if (this.smallScreenLayout() && da) {\n        this.#detailsPaneDialogRef = this.#dialog.open(this.detailsPaneTemplateRef(), {\n          width: '100vw',\n          height: '100vh',\n          maxWidth: '100vw',\n          panelClass: 'ymt-dialog-fullscreen'\n        });\n        this.#detailsPaneDialogRef.afterClosed().subscribe((silent: boolean) => {\n          if (!silent) {\n            this.detailsActive.set(false);\n          }\n          this.#detailsPaneDialogRef = null;\n        });\n      }\n    });\n  });\n\n  smallScreenLayout = this.#device.smallScreenLayout;\n  #smallScreenLayoutEffect = effect(() => {\n    const ssl = this.smallScreenLayout();\n    if (this.#detailsPaneDialogRef) this.#detailsPaneDialogRef.close(true);\n    untracked(() => {\n      const da = this.detailsActive();\n      if (ssl && da) this.detailsActive.set(false);\n    });\n  });\n\n  onDragStart(): void {\n    this.isDragging.set(true);\n  }\n\n  onDragEnd(event: LayoutOutputData): void {\n    this.#updateLayoutSettings(event.sizes);\n    this.isDragging.set(false);\n  }\n\n  hideArea(role: 'master' | 'details'): void {\n    const pane = this._panes()[role];\n    pane.updateSettings({ visible: false });\n  }\n\n  showArea(role: 'master' | 'details'): void {\n    const pane = this._panes()[role];\n    pane.updateSettings({ visible: true });\n  }\n\n  toggleArea(role: 'master' | 'details'): void {\n    const pane = this._panes()[role];\n    pane.updateSettings({ visible: !pane.areaProperties().visible });\n  }\n\n  isAreaVisible(role: 'master' | 'details'): boolean {\n    const pane = this._panes()[role];\n    return pane.areaProperties().visible !== false;\n  }\n\n  toggleFullscreen(role: 'master' | 'details'): void {\n    const pane = role === 'master' ? this.masterPaneRef() : this.detailsPaneRef();\n    if (pane) {\n      if (pane.fullscreenActive()) {\n        pane.exitFullscreen();\n      } else {\n        pane.enterFullscreen();\n      }\n    }\n  }\n\n  fullscreenActive(role: 'master' | 'details'): boolean {\n    const pane = role === 'master' ? this.masterPaneRef() : this.detailsPaneRef();\n    return pane ? pane.fullscreenActive() : false;\n  }\n\n  #updateLayoutSettings(sizes: SplitAreaSize[]): void {\n    const layoutSettings: LayoutSettings = {\n      areas: this.panes().map((area: YmtLayoutPaneDirective, idx: number) => ({\n        visible: area.areaProperties().visible === false ? false : true,\n        size: sizes[idx]\n      }))\n    };\n    // save layout settings if persistence is enabled\n    const lsid = this.layoutSettingsID();\n    if (lsid) {\n      this.#layoutService.saveSettings(lsid, layoutSettings);\n    }\n  }\n\n  #calculateGutterSize() {\n    const computedStyle = getComputedStyle(this.#elRef.nativeElement);\n    const spacing = computedStyle.getPropertyValue('--ymt-spacing-m').trim();\n    const fontSize = parseFloat(computedStyle.fontSize.trim());\n    const spacingPx = spacing.endsWith('rem')\n      ? parseFloat(spacing) * fontSize\n      : spacing.endsWith('px')\n        ? parseFloat(spacing)\n        : this.#DEFAULT_GUTTER_SIZE_PX;\n    if (this._gutterSize() === this.#DEFAULT_GUTTER_SIZE_PX) this._gutterSize.set(spacingPx);\n  }\n\n  applyLayoutSettings(settings: LayoutSettings) {\n    if (!this.#isLayoutSettingsObject(settings)) return;\n    settings.areas.forEach((a: PaneLayoutSettings, index: number) => {\n      this.panes()[index].updateSettings(a);\n    });\n  }\n\n  #isLayoutSettingsObject(v: any): boolean {\n    return v && 'areas' in v;\n  }\n\n  ngAfterViewInit(): void {\n    this.#calculateGutterSize();\n    // try to load layout settings if persistence is enabled\n    const lsid = this.layoutSettingsID();\n    if (lsid) {\n      this.applyLayoutSettings(this.#layoutService.getSettings(lsid) as LayoutSettings);\n    }\n  }\n}\n","@let mp = _panes().master;\n@let dp = _panes().details;\n@if (!smallScreenLayout()) {\n  <as-split\n    [direction]=\"direction()\"\n    unit=\"percent\"\n    [gutterSize]=\"_gutterSize()\"\n    [gutterStep]=\"1\"\n    [useTransition]=\"false\"\n    (dragStart)=\"onDragStart()\"\n    (dragEnd)=\"onDragEnd($event)\"\n  >\n    @if (gutterSize() === 1) {\n      <div *asSplitGutter=\"let isDragged = isDragged\" class=\"shade-gutter\" [class.dragged]=\"isDragged\">\n        <div\n          class=\"shade-gutter-icon\"\n          [class.vertical]=\"direction() === 'vertical'\"\n          [class.horizontal]=\"direction() === 'horizontal'\"\n        ></div>\n      </div>\n    } @else {\n      <div *asSplitGutter class=\"split-gutter\">\n        <div\n          asSplitGutterDragHandle\n          class=\"split-gutter-handle\"\n          [class.vertical]=\"direction() === 'vertical'\"\n          [class.horizontal]=\"direction() === 'horizontal'\"\n        ></div>\n      </div>\n    }\n\n    <!-- master pane -->\n    @if (mp) {\n      <as-split-area\n        [yuvSplitAreaCover]=\"isDragging()\"\n        [maxSize]=\"mp.areaProperties().maxSize\"\n        [minSize]=\"mp.areaProperties().minSize\"\n        [lockSize]=\"mp.areaProperties().lockSize\"\n        [size]=\"mp.areaProperties().size\"\n        [visible]=\"mp.areaProperties().visible\"\n      >\n        <ymt-pane #masterPane [topBarActions]=\"mp.topBarActions()\" [plain]=\"!!options().plainMode\">\n          <ng-template [ngTemplateOutlet]=\"mp.template\"></ng-template>\n        </ymt-pane>\n      </as-split-area>\n    }\n    <!-- details pane -->\n    @if (dp) {\n      <as-split-area\n        [yuvSplitAreaCover]=\"isDragging()\"\n        [maxSize]=\"dp.areaProperties().maxSize\"\n        [minSize]=\"dp.areaProperties().minSize\"\n        [lockSize]=\"dp.areaProperties().lockSize\"\n        [size]=\"dp.areaProperties().size\"\n        [visible]=\"dp.areaProperties().visible\"\n      >\n        <ymt-pane #detailsPane [topBarActions]=\"dp.topBarActions()\" [plain]=\"!!options().plainMode\">\n          <ng-template [ngTemplateOutlet]=\"dp.template\"></ng-template>\n        </ymt-pane>\n      </as-split-area>\n    }\n  </as-split>\n} @else {\n  <ymt-pane #masterPane [topBarActions]=\"mp.topBarActions()\">\n    <ng-template [ngTemplateOutlet]=\"mp.template\"></ng-template>\n  </ymt-pane>\n}\n\n<ng-template #tplDetailsPanel>\n  <ymt-pane #detailsPane class=\"fullscreen\" [topBarActions]=\"detailsBackAction\">\n    <ng-template [ngTemplateOutlet]=\"dp.template\"></ng-template>\n  </ymt-pane>\n</ng-template>\n\n<ng-template #detailsBackAction>\n  <button align=\"start\" ymt-icon-button icon-button-size=\"small\" (click)=\"detailsActive.set(false)\">\n    <mat-icon>arrow_back</mat-icon>\n  </button>\n  @if (dp.topBarActions(); as dta) {\n    <ng-container *ngTemplateOutlet=\"dta\"></ng-container>\n  }\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { MasterDetailsLayoutComponent } from './components/master-details-layout/master-details-layout.component';\nimport { YmtLayoutPaneDirective } from './directives/layout-pane.directive';\n\nconst cmp = [MasterDetailsLayoutComponent, YmtLayoutPaneDirective]\n\n@NgModule({\n  imports: cmp,\n  exports: cmp\n})\nexport class YmtLayoutModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/yuuvis-material-panes.mjs

@@ -1,10 +1,9 @@
 import * as i0 from '@angular/core';
-import { Component, input, contentChild, output, signal, effect, NgModule } from '@angular/core';
+import { Component, input, contentChild, inject, ElementRef, Renderer2, output, signal, computed, Directive, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { YmtIconButtonDirective } from '@yuuvis/material';
 
 class YmtPaneAsideComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtPaneAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -68,37 +67,173 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             args: [{ selector: 'ymt-pane-header', imports: [CommonModule, MatIconModule], template: "<header>\n  @if (icon()) {\n    <div class=\"icon\">\n      <mat-icon class=\"pane-icon\">{{ icon() }}</mat-icon>\n    </div>\n  }\n  <h2>\n    @let ts = titleSlot();\n    @if (ts) {\n      <ng-container *ngTemplateOutlet=\"ts\"></ng-container>\n    } @else {\n      {{ title() }}\n    }\n  </h2>\n  <small>\n    @let ss = subtitleSlot();\n    @if (ss) {\n      <ng-container *ngTemplateOutlet=\"ss\"></ng-container>\n    } @else {\n      {{ subtitle() }}\n    }\n  </small>\n  @let a = actions();\n  @if (a) {\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"a\"></ng-container>\n    </div>\n  }\n</header>\n", styles: [":host{--_header-padding: var(--header-padding, var(--ymt-spacing-xl));--_header-background: var(--header-background, transparent);--_header-border-color: var(--header-border-color, transparent);--_header-icon-background: var(--header-icon-background, var(--ymt-surface-container-high))}:host header{display:grid;align-items:center;grid-template-columns:var(--_header-padding) auto 1fr auto;grid-template-rows:var(--_header-padding) auto auto var(--_header-padding);grid-template-areas:\". icon . actions\" \". icon title actions\" \". icon subtitle actions\" \". . . actions\";flex:0 0 auto;background-color:var(--_header-background);border-block-end:1px solid var(--_header-border-color)}:host header .icon{grid-area:icon;margin-inline-end:var(--ymt-spacing-m);background-color:var(--_header-icon-background);border-radius:0 0 var(--ymt-corner-s) var(--ymt-corner-s);height:100%;width:var(--ymt-sizing-3xl);display:flex;align-items:center;justify-content:center}:host header h2{grid-area:title;margin:0;font:var(--ymt-font-title-large);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host header small{grid-area:subtitle;font:var(--ymt-font-body-subtle-font);font-weight:var(--ymt-font-body-subtle-weight);color:var(--ymt-on-surface-type-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host header .actions{grid-area:actions;padding-inline:var(--ymt-spacing-xl);display:flex;gap:var(--ymt-spacing-xs)}\n"] }]
         }] });
 
+/**
+ * Directive that enables any host element to toggle into a fullscreen overlay
+ * covering the entire viewport. Background content is made inert and body scroll
+ * is locked while fullscreen is active.
+ *
+ * @example
+ * ```html
+ * <div yuvFullscreen #fs="yuvFullscreen">
+ *   <button (click)="fs.toggle()">Toggle</button>
+ *   <p>Content</p>
+ * </div>
+ * ```
+ */
+class FullscreenDirective {
+    #elRef = inject(ElementRef);
+    #renderer = inject(Renderer2);
+    /** Whether the fullscreen toggle is disabled. */
+    disabled = input(false);
+    /** Emitted when fullscreen mode is entered. */
+    fullscreenEnter = output();
+    /** Emitted when fullscreen mode is exited. */
+    fullscreenExit = output();
+    #isActive = signal(false);
+    /** Read-only signal indicating whether fullscreen is currently active. */
+    active = computed(() => this.#isActive());
+    #originalStyles = {};
+    #inertElements = [];
+    #originalBodyOverflow = '';
+    /** Toggle fullscreen on/off. */
+    toggle() {
+        if (this.disabled())
+            return;
+        if (this.#isActive()) {
+            this.exit();
+        }
+        else {
+            this.enter();
+        }
+    }
+    /** Enter fullscreen mode. No-op if already active or disabled. */
+    enter() {
+        if (this.#isActive() || this.disabled())
+            return;
+        this.#saveOriginalStyles();
+        this.#applyFullscreenStyles();
+        this.#makeBackgroundInert();
+        this.#lockBodyScroll();
+        this.#isActive.set(true);
+        this.fullscreenEnter.emit();
+    }
+    /** Exit fullscreen mode. No-op if not active. */
+    exit() {
+        if (!this.#isActive())
+            return;
+        this.#restoreOriginalStyles();
+        this.#restoreBackground();
+        this.#unlockBodyScroll();
+        this.#isActive.set(false);
+        this.fullscreenExit.emit();
+    }
+    /** @internal */
+    onEscape() {
+        if (this.#isActive()) {
+            this.exit();
+        }
+    }
+    #saveOriginalStyles() {
+        const style = this.#elRef.nativeElement.style;
+        this.#originalStyles = {
+            position: style.position,
+            inset: style.inset,
+            zIndex: style.zIndex,
+            width: style.width,
+            height: style.height,
+            overflow: style.overflow,
+            backgroundColor: style.backgroundColor
+        };
+    }
+    #applyFullscreenStyles() {
+        const el = this.#elRef.nativeElement;
+        this.#renderer.setStyle(el, 'position', 'fixed');
+        this.#renderer.setStyle(el, 'inset', '0');
+        this.#renderer.setStyle(el, 'z-index', '1000');
+        this.#renderer.setStyle(el, 'width', '100vw');
+        this.#renderer.setStyle(el, 'height', '100vh');
+        this.#renderer.setStyle(el, 'overflow', 'auto');
+        this.#renderer.setStyle(el, 'background-color', 'var(--ymt-surface, #fff)');
+    }
+    #restoreOriginalStyles() {
+        const el = this.#elRef.nativeElement;
+        for (const [prop, value] of Object.entries(this.#originalStyles)) {
+            if (value) {
+                this.#renderer.setStyle(el, prop, value);
+            }
+            else {
+                this.#renderer.removeStyle(el, prop);
+            }
+        }
+        this.#originalStyles = {};
+    }
+    #makeBackgroundInert() {
+        this.#inertElements = [];
+        let current = this.#elRef.nativeElement;
+        while (current.parentElement) {
+            const parent = current.parentElement;
+            for (let i = 0; i < parent.children.length; i++) {
+                const sibling = parent.children[i];
+                if (sibling !== current && !sibling.hasAttribute('inert')) {
+                    this.#renderer.setAttribute(sibling, 'inert', '');
+                    this.#inertElements.push(sibling);
+                }
+            }
+            if (parent === document.body)
+                break;
+            current = parent;
+        }
+    }
+    #restoreBackground() {
+        for (const el of this.#inertElements) {
+            this.#renderer.removeAttribute(el, 'inert');
+        }
+        this.#inertElements = [];
+    }
+    #lockBodyScroll() {
+        this.#originalBodyOverflow = document.body.style.overflow;
+        this.#renderer.setStyle(document.body, 'overflow', 'hidden');
+    }
+    #unlockBodyScroll() {
+        if (this.#originalBodyOverflow) {
+            this.#renderer.setStyle(document.body, 'overflow', this.#originalBodyOverflow);
+        }
+        else {
+            this.#renderer.removeStyle(document.body, 'overflow');
+        }
+        this.#originalBodyOverflow = '';
+    }
+    ngOnDestroy() {
+        if (this.#isActive()) {
+            this.exit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FullscreenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", type: FullscreenDirective, isStandalone: true, selector: "[yuvFullscreen]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fullscreenEnter: "fullscreenEnter", fullscreenExit: "fullscreenExit" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class.yuv-fullscreen-active": "active()" } }, exportAs: ["yuvFullscreen"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FullscreenDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuvFullscreen]',
+                    exportAs: 'yuvFullscreen',
+                    host: {
+                        '[class.yuv-fullscreen-active]': 'active()',
+                        '(document:keydown.escape)': 'onEscape()'
+                    }
+                }]
+        }] });
+
 class YmtPaneTopBarComponent {
     /**
      * TemplateRef for actions area in the top bar.
      */
     actions = input();
-    modeAlign = input('start');
-    mode = input(undefined);
-    /**
-     * Event emitted when the pane toggle button is clicked.
-     */
-    paneToggled = output();
-    navigationClicked = output();
-    paneCollapsed = signal(false);
-    #paneCollapsedEffect = effect(() => {
-        this.paneToggled.emit(this.paneCollapsed());
-    });
-    togglePane() {
-        this.paneCollapsed.set(!this.paneCollapsed());
-    }
-    navClick() {
-        this.navigationClicked.emit(true);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtPaneTopBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: YmtPaneTopBarComponent, isStandalone: true, selector: "ymt-pane-top-bar", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, modeAlign: { classPropertyName: "modeAlign", publicName: "modeAlign", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paneToggled: "paneToggled", navigationClicked: "navigationClicked" }, host: { properties: { "class.inverse": "modeAlign() === \"end\"", "class.has-mode": "mode() !== undefined" } }, ngImport: i0, template: " @let ta = actions();\n  <div class=\"top-bar\">\n    @let m = mode();\n    @if (m === 'toggle') {\n      <button class=\"pane-toggle\" ymt-icon-button icon-button-size=\"small\" (click)=\"togglePane()\">\n        <mat-icon>{{ paneCollapsed() ? 'right_panel_open' : 'right_panel_close' }}</mat-icon>\n      </button>\n    } @else if (m === 'navigation') {\n      <button class=\"pane-nav\" ymt-icon-button icon-button-size=\"small\" (click)=\"navClick()\">\n        <mat-icon>arrow_back</mat-icon>\n      </button>\n    }\n    @if (ta) {\n      <div class=\"actions\">\n        <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n      </div>\n    }\n  </div>", styles: [":host{border-block-end:1px solid var(--ymt-outline-variant)}:host.inverse .top-bar{--flow: row-reverse}:host.inverse .top-bar button.pane-toggle{rotate:180deg}:host.has-mode .top-bar{justify-content:space-between}:host .top-bar{--flow: row;flex:0 0 auto;flex-flow:var(--flow);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);display:flex;justify-content:end;align-items:center}:host .top-bar .actions{display:flex;flex-flow:var(--flow);gap:var(--ymt-spacing-xs);align-items:center;justify-self:end}\n"], dependencies: [{ kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: YmtPaneTopBarComponent, isStandalone: true, selector: "ymt-pane-top-bar", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let ta = actions();\n@if (ta) {\n  <div class=\"top-bar\">\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n    </div>\n  </div>\n}\n", styles: [":host{border-block-end:1px solid var(--ymt-outline-variant)}:host .top-bar{flex:0 0 auto;padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);display:flex;align-items:center}:host .top-bar .actions{display:flex;flex:1;gap:var(--ymt-spacing-xs);align-items:center;justify-content:end}:host .top-bar .actions ::ng-deep>[align=start]{margin-inline-end:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtPaneTopBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ymt-pane-top-bar', imports: [YmtIconButtonDirective, MatIconModule, CommonModule], host: {
-                        '[class.inverse]': 'modeAlign() === "end"',
-                        '[class.has-mode]': 'mode() !== undefined'
-                    }, template: " @let ta = actions();\n  <div class=\"top-bar\">\n    @let m = mode();\n    @if (m === 'toggle') {\n      <button class=\"pane-toggle\" ymt-icon-button icon-button-size=\"small\" (click)=\"togglePane()\">\n        <mat-icon>{{ paneCollapsed() ? 'right_panel_open' : 'right_panel_close' }}</mat-icon>\n      </button>\n    } @else if (m === 'navigation') {\n      <button class=\"pane-nav\" ymt-icon-button icon-button-size=\"small\" (click)=\"navClick()\">\n        <mat-icon>arrow_back</mat-icon>\n      </button>\n    }\n    @if (ta) {\n      <div class=\"actions\">\n        <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n      </div>\n    }\n  </div>", styles: [":host{border-block-end:1px solid var(--ymt-outline-variant)}:host.inverse .top-bar{--flow: row-reverse}:host.inverse .top-bar button.pane-toggle{rotate:180deg}:host.has-mode .top-bar{justify-content:space-between}:host .top-bar{--flow: row;flex:0 0 auto;flex-flow:var(--flow);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);display:flex;justify-content:end;align-items:center}:host .top-bar .actions{display:flex;flex-flow:var(--flow);gap:var(--ymt-spacing-xs);align-items:center;justify-self:end}\n"] }]
+            args: [{ selector: 'ymt-pane-top-bar', imports: [CommonModule], template: "@let ta = actions();\n@if (ta) {\n  <div class=\"top-bar\">\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n    </div>\n  </div>\n}\n", styles: [":host{border-block-end:1px solid var(--ymt-outline-variant)}:host .top-bar{flex:0 0 auto;padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);display:flex;align-items:center}:host .top-bar .actions{display:flex;flex:1;gap:var(--ymt-spacing-xs);align-items:center;justify-content:end}:host .top-bar .actions ::ng-deep>[align=start]{margin-inline-end:auto}\n"] }]
         }] });
 
 /**
@@ -143,8 +278,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * </ymt-pane>
  * ```
  *
+ * Toggle fullscreen mode:
+ * ```html
+ * <ymt-pane #pane>
+ *   <ymt-pane-body>
+ *     <button (click)="pane.toggleFullscreen()">Fullscreen</button>
+ *   </ymt-pane-body>
+ * </ymt-pane>
+ * ```
+ *
  */
 class YmtPaneComponent {
+    #fullscreen = inject(FullscreenDirective);
     /**
      * TemplateRef for actions area in the top bar. These actions will be placed at the end of
      * the top bar.
@@ -165,40 +310,33 @@ class YmtPaneComponent {
      * and want to apply custom styles to the pane.
      */
     plain = input(false);
-    /**
-     * A pane may have different modes to control the behavior of the top bar.
-     * - `navigation`: Shows a back button on the left side of the top bar to close the pane or navigate back.
-     * - `toggle`: Shows a toggle button on the left side of the top bar to collapse/expand the pane.
-     */
-    mode = input(undefined);
-    modeAlign = input('start');
-    /**
-     * Event emitted when the pane toggle button is clicked. This toggle button is shown
-     * when mode is set to 'toggle'.
-     */
-    paneToggled = output();
-    /**
-     * Event emitted when the navigation button is clicked. Navigation button is shown when
-     * mode is set to 'navigation'.
-     */
-    navigationClicked = output();
-    /**
-     * Collapsed state of the pane. Only relevant when mode is set to 'toggle'.
-     */
-    collapsed = signal(false);
-    togglePane(collapsed) {
-        this.collapsed.set(collapsed);
-        this.paneToggled.emit(collapsed);
+    /** Read-only signal indicating whether fullscreen is currently active. */
+    fullscreenActive = this.#fullscreen.active;
+    /** Toggle fullscreen mode on/off. */
+    toggleFullscreen() {
+        this.#fullscreen.toggle();
+    }
+    /** Enter fullscreen mode. */
+    enterFullscreen() {
+        this.#fullscreen.enter();
+    }
+    /** Exit fullscreen mode. */
+    exitFullscreen() {
+        this.#fullscreen.exit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: YmtPaneComponent, isStandalone: true, selector: "ymt-pane", inputs: { topBarActions: { classPropertyName: "topBarActions", publicName: "topBarActions", isSignal: true, isRequired: false, transformFunction: null }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, modeAlign: { classPropertyName: "modeAlign", publicName: "modeAlign", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paneToggled: "paneToggled", navigationClicked: "navigationClicked" }, host: { properties: { "class.collapsed": "collapsed()", "class.plain": "plain()" } }, ngImport: i0, template: "@let topBarVisible = mode() || topBarActions();\n@if (topBarVisible) {\n  <ymt-pane-top-bar\n    [actions]=\"topBarActions()\"\n    [modeAlign]=\"modeAlign()\"\n    [mode]=\"mode()\"\n    (navigationClicked)=\"navigationClicked.emit(true)\"\n    (paneToggled)=\"togglePane($event)\"\n  ></ymt-pane-top-bar>\n}\n<ng-content></ng-content>\n", styles: [":host{--_header-area-padding: var(--header-area-padding, var(--ymt-spacing-xl));--_header-area-background: var(--header-area-background, transparent);--_header-area-border-color: var(--header-area-border-color, transparent);--_main-area-padding: var(--main-area-padding, 0);--_pane-background-color: var(--pane-background-color, var(--ymt-surface));background-color:var(--_pane-background-color);color:var(--ymt-on-surface);display:grid;grid-template-rows:auto auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"top-bar\" \"header\" \"main\" \"footer\";height:100%;overflow:hidden}:host.plain{--pane-background-color: transparent}:host:not(.fullscreen,.plain){border-radius:var(--ymt-corner-m);border:1px solid var(--ymt-outline-variant)}:host.collapsed{overflow:hidden}:host.collapsed ::ng-deep ymt-pane-header,:host.collapsed ::ng-deep ymt-pane-body{display:none!important}:host.collapsed ::ng-deep ymt-pane-top-bar .actions{display:none!important}:host ymt-pane-top-bar{grid-area:top-bar}:host ::ng-deep ymt-pane-header{--header-padding: var(--_header-area-padding);--header-background: var(--_header-area-background);--header-border-color: var(--_header-area-border-color);grid-area:header}:host ::ng-deep ymt-pane-body{grid-area:main;overflow-y:auto;padding:var(--_main-area-padding)}:host ::ng-deep ymt-pane-footer{grid-area:footer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: YmtPaneTopBarComponent, selector: "ymt-pane-top-bar", inputs: ["actions", "modeAlign", "mode"], outputs: ["paneToggled", "navigationClicked"] }, { kind: "ngmodule", type: MatIconModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: YmtPaneComponent, isStandalone: true, selector: "ymt-pane", inputs: { topBarActions: { classPropertyName: "topBarActions", publicName: "topBarActions", isSignal: true, isRequired: false, transformFunction: null }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.plain": "plain()" } }, hostDirectives: [{ directive: FullscreenDirective, outputs: ["fullscreenEnter", "fullscreenEnter", "fullscreenExit", "fullscreenExit"] }], ngImport: i0, template: "@if (topBarActions()) {\n  <ymt-pane-top-bar [actions]=\"topBarActions()\"></ymt-pane-top-bar>\n}\n<ng-content></ng-content>\n", styles: [":host{--_header-area-padding: var(--header-area-padding, var(--ymt-spacing-xl));--_header-area-background: var(--header-area-background, transparent);--_header-area-border-color: var(--header-area-border-color, transparent);--_main-area-padding: var(--main-area-padding, 0);--_pane-background-color: var(--pane-background-color, var(--ymt-surface));background-color:var(--_pane-background-color);color:var(--ymt-on-surface);display:grid;grid-template-rows:auto auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"top-bar\" \"header\" \"main\" \"footer\";height:100%;overflow:hidden}:host.plain{--pane-background-color: transparent}:host:not(.fullscreen,.plain){border-radius:var(--ymt-corner-m);border:1px solid var(--ymt-outline-variant)}:host ymt-pane-top-bar{grid-area:top-bar}:host ::ng-deep ymt-pane-header{--header-padding: var(--_header-area-padding);--header-background: var(--_header-area-background);--header-border-color: var(--_header-area-border-color);grid-area:header}:host ::ng-deep ymt-pane-body{grid-area:main;overflow-y:auto;padding:var(--_main-area-padding)}:host ::ng-deep ymt-pane-footer{grid-area:footer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: YmtPaneTopBarComponent, selector: "ymt-pane-top-bar", inputs: ["actions"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtPaneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ymt-pane', imports: [CommonModule, YmtPaneTopBarComponent, MatIconModule], host: {
-                        '[class.collapsed]': 'collapsed()',
+            args: [{ selector: 'ymt-pane', imports: [CommonModule, YmtPaneTopBarComponent], hostDirectives: [
+                        {
+                            directive: FullscreenDirective,
+                            outputs: ['fullscreenEnter', 'fullscreenExit']
+                        }
+                    ], host: {
                         '[class.plain]': 'plain()'
-                    }, template: "@let topBarVisible = mode() || topBarActions();\n@if (topBarVisible) {\n  <ymt-pane-top-bar\n    [actions]=\"topBarActions()\"\n    [modeAlign]=\"modeAlign()\"\n    [mode]=\"mode()\"\n    (navigationClicked)=\"navigationClicked.emit(true)\"\n    (paneToggled)=\"togglePane($event)\"\n  ></ymt-pane-top-bar>\n}\n<ng-content></ng-content>\n", styles: [":host{--_header-area-padding: var(--header-area-padding, var(--ymt-spacing-xl));--_header-area-background: var(--header-area-background, transparent);--_header-area-border-color: var(--header-area-border-color, transparent);--_main-area-padding: var(--main-area-padding, 0);--_pane-background-color: var(--pane-background-color, var(--ymt-surface));background-color:var(--_pane-background-color);color:var(--ymt-on-surface);display:grid;grid-template-rows:auto auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"top-bar\" \"header\" \"main\" \"footer\";height:100%;overflow:hidden}:host.plain{--pane-background-color: transparent}:host:not(.fullscreen,.plain){border-radius:var(--ymt-corner-m);border:1px solid var(--ymt-outline-variant)}:host.collapsed{overflow:hidden}:host.collapsed ::ng-deep ymt-pane-header,:host.collapsed ::ng-deep ymt-pane-body{display:none!important}:host.collapsed ::ng-deep ymt-pane-top-bar .actions{display:none!important}:host ymt-pane-top-bar{grid-area:top-bar}:host ::ng-deep ymt-pane-header{--header-padding: var(--_header-area-padding);--header-background: var(--_header-area-background);--header-border-color: var(--_header-area-border-color);grid-area:header}:host ::ng-deep ymt-pane-body{grid-area:main;overflow-y:auto;padding:var(--_main-area-padding)}:host ::ng-deep ymt-pane-footer{grid-area:footer}\n"] }]
+                    }, template: "@if (topBarActions()) {\n  <ymt-pane-top-bar [actions]=\"topBarActions()\"></ymt-pane-top-bar>\n}\n<ng-content></ng-content>\n", styles: [":host{--_header-area-padding: var(--header-area-padding, var(--ymt-spacing-xl));--_header-area-background: var(--header-area-background, transparent);--_header-area-border-color: var(--header-area-border-color, transparent);--_main-area-padding: var(--main-area-padding, 0);--_pane-background-color: var(--pane-background-color, var(--ymt-surface));background-color:var(--_pane-background-color);color:var(--ymt-on-surface);display:grid;grid-template-rows:auto auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"top-bar\" \"header\" \"main\" \"footer\";height:100%;overflow:hidden}:host.plain{--pane-background-color: transparent}:host:not(.fullscreen,.plain){border-radius:var(--ymt-corner-m);border:1px solid var(--ymt-outline-variant)}:host ymt-pane-top-bar{grid-area:top-bar}:host ::ng-deep ymt-pane-header{--header-padding: var(--_header-area-padding);--header-background: var(--_header-area-background);--header-border-color: var(--_header-area-border-color);grid-area:header}:host ::ng-deep ymt-pane-body{grid-area:main;overflow-y:auto;padding:var(--_main-area-padding)}:host ::ng-deep ymt-pane-footer{grid-area:footer}\n"] }]
         }] });
 
 class YmtPaneFooterComponent {
@@ -228,5 +366,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { YmtPaneAsideComponent, YmtPaneBodyComponent, YmtPaneComponent, YmtPaneFooterComponent, YmtPaneHeaderComponent, YmtPanesModule };
+export { FullscreenDirective, YmtPaneAsideComponent, YmtPaneBodyComponent, YmtPaneComponent, YmtPaneFooterComponent, YmtPaneHeaderComponent, YmtPanesModule };
 //# sourceMappingURL=yuuvis-material-panes.mjs.map

package/fesm2022/yuuvis-material-panes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"yuuvis-material-panes.mjs","sources":["../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-aside/pane-aside.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-aside/pane-aside.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-body/pane-body.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-body/pane-body.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-header/pane-header.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-header/pane-header.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-top-bar/pane-top-bar.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-top-bar/pane-top-bar.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-footer/pane-footer.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-footer/pane-footer.component.html","../../../../../libs/yuuvis/material/panes/src/lib/panes.module.ts","../../../../../libs/yuuvis/material/panes/src/yuuvis-material-panes.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-aside',\n  imports: [CommonModule],\n  templateUrl: './pane-aside.component.html',\n  styleUrl: './pane-aside.component.scss'\n})\nexport class YmtPaneAsideComponent {}\n","<p>pane-aside works!</p>\n","import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-body',\n  imports: [CommonModule],\n  templateUrl: './pane-body.component.html',\n  styleUrl: './pane-body.component.scss'\n})\nexport class YmtPaneBodyComponent {}\n","<ng-content></ng-content>\n","import { CommonModule } from '@angular/common';\nimport { Component, contentChild, input, TemplateRef } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\n\n/**\n * Component for the pane header. It can be used to display a title,\n * subtitle and actions in the pane header.\n *\n * The title and subtitle can be set via the `title` and `subtitle` inputs\n * or via the `yuvPaneHeaderTitle` and `yuvPaneHeaderSubtitle` template refs:\n *\n * ```html\n * <!-- Using inputs -->\n * <ymt-pane-header [title]=\"'Pane Title'\" [subtitle]=\"'Pane Subtitle'\"></ymt-pane-header>\n * <!-- Using template refs -->\n * <ymt-pane-header>\n * <ng-template #yuvPaneHeaderTitle><h2>🦁Custom pane title</h2></ng-template>\n * <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity=\"warning\">locked</ymt-badge></ng-template>\n * </ymt-pane-header>\n * ```\n */\n@Component({\n  selector: 'ymt-pane-header',\n  imports: [CommonModule, MatIconModule],\n  templateUrl: './pane-header.component.html',\n  styleUrl: './pane-header.component.scss'\n})\nexport class YmtPaneHeaderComponent {\n  /**\n   * Title of the pane\n   */\n  title = input<string>();\n  /**\n   * Icon of the pane\n   */\n  icon = input<string>();\n  /**\n   * Subtitle of the pane\n   */\n  subtitle = input<string>();\n  /**\n   * TemplateRef for actions area in the pane header.\n   */\n  actions = input<TemplateRef<any>>();\n\n  titleSlot = contentChild<TemplateRef<any>>('yuvPaneHeaderTitle');\n  subtitleSlot = contentChild<TemplateRef<any>>('yuvPaneHeaderSubtitle');\n}\n","<header>\n  @if (icon()) {\n    <div class=\"icon\">\n      <mat-icon class=\"pane-icon\">{{ icon() }}</mat-icon>\n    </div>\n  }\n  <h2>\n    @let ts = titleSlot();\n    @if (ts) {\n      <ng-container *ngTemplateOutlet=\"ts\"></ng-container>\n    } @else {\n      {{ title() }}\n    }\n  </h2>\n  <small>\n    @let ss = subtitleSlot();\n    @if (ss) {\n      <ng-container *ngTemplateOutlet=\"ss\"></ng-container>\n    } @else {\n      {{ subtitle() }}\n    }\n  </small>\n  @let a = actions();\n  @if (a) {\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"a\"></ng-container>\n    </div>\n  }\n</header>\n","import { Component, effect, input, output, signal, TemplateRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatIconModule } from '@angular/material/icon';\nimport { YmtIconButtonDirective } from '@yuuvis/material';\n\n@Component({\n  selector: 'ymt-pane-top-bar',\n  imports: [YmtIconButtonDirective, MatIconModule, CommonModule],\n  templateUrl: './pane-top-bar.component.html',\n  styleUrl: './pane-top-bar.component.scss',\n  host: {\n    '[class.inverse]': 'modeAlign() === \"end\"',\n    '[class.has-mode]': 'mode() !== undefined'\n  }\n})\nexport class YmtPaneTopBarComponent {\n  /**\n   * TemplateRef for actions area in the top bar.\n   */\n  actions = input<TemplateRef<any>>();\n  modeAlign = input<'start' | 'end'>('start');\n\n  mode = input<'navigation' | 'toggle' | undefined>(undefined);\n\n  /**\n   * Event emitted when the pane toggle button is clicked.\n   */\n  paneToggled = output<boolean>();\n  navigationClicked = output<boolean>();\n\n  paneCollapsed = signal<boolean>(false);\n  #paneCollapsedEffect = effect(() => {\n    this.paneToggled.emit(this.paneCollapsed());\n  });\n\n  togglePane() {\n    this.paneCollapsed.set(!this.paneCollapsed());\n  }\n\n  navClick() {\n    this.navigationClicked.emit(true);\n  }\n}\n"," @let ta = actions();\n  <div class=\"top-bar\">\n    @let m = mode();\n    @if (m === 'toggle') {\n      <button class=\"pane-toggle\" ymt-icon-button icon-button-size=\"small\" (click)=\"togglePane()\">\n        <mat-icon>{{ paneCollapsed() ? 'right_panel_open' : 'right_panel_close' }}</mat-icon>\n      </button>\n    } @else if (m === 'navigation') {\n      <button class=\"pane-nav\" ymt-icon-button icon-button-size=\"small\" (click)=\"navClick()\">\n        <mat-icon>arrow_back</mat-icon>\n      </button>\n    }\n    @if (ta) {\n      <div class=\"actions\">\n        <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n      </div>\n    }\n  </div>","import { CommonModule } from '@angular/common';\nimport { Component, contentChild, input, output, signal, TemplateRef } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { YmtPaneAsideComponent } from './pane-aside/pane-aside.component';\nimport { YmtPaneTopBarComponent } from './pane-top-bar/pane-top-bar.component';\n\n/**\n * Pane component.\n *\n * A pane has a header and a main area. You may choose to not show a header at all:\n *\n * ```html\n * <ymt-pane>\n *  Pane content goes here.\n * </ymt-pane>\n * ```\n * \n * There are other components to be used within a pane:\n * - `ymt-pane-header`: Renders a pre-styled header area for the pane.\n * - `ymt-pane-body`: The main content area of the pane.\n * - `ymt-pane-footer`: A footer component to be used as footer area of the pane.\n *\n * You can change the appearance of the header area via CSS variables:\n * ```css\n * ymt-pane {\n *   --header-area-background: var(--ymt-surface-container-low);\n *   --header-area-border-color: var(--ymt-outline-variant);\n * }\n * ```\n *\n * The main area has a padding by default. You can customize or remove the padding via\n * CSS variables:\n * ```css\n * ymt-pane {\n *   --main-area-padding: 0;\n * }\n * ```\n *\n * Add actions to a pane:\n * ```html\n * <ymt-pane title=\"My Pane\" subTitle=\"Pane Subtitle\">\n *   <ng-template #yuvPaneActions>\n *     <button ymt-icon-button><mat-icon>settings</mat-icon></button>\n *     <button ymt-icon-button><mat-icon>more</mat-icon></button>\n *   </ng-template>\n * </ymt-pane>\n * ```\n *\n */\n@Component({\n  selector: 'ymt-pane',\n  imports: [CommonModule, YmtPaneTopBarComponent, MatIconModule],\n  templateUrl: './pane.component.html',\n  styleUrl: './pane.component.scss',\n  host: {\n    '[class.collapsed]': 'collapsed()',\n    '[class.plain]': 'plain()'\n  }\n})\nexport class YmtPaneComponent {\n  /**\n   * TemplateRef for actions area in the top bar. These actions will be placed at the end of\n   * the top bar.\n   * \n   * ```html\n   * <ymt-pane title=\"My Pane\" subTitle=\"Pane Subtitle\" [topBarActions]=\"topBarActions\"></ymt-pane>\n   * <ng-template #topBarActions>\n   *   <button ymt-icon-button icon-button-size=\"small\"><mat-icon>settings</mat-icon></button>\n   * </ng-template>\n   * ```\n   * Make sure to set the `icon-button-size=\"small\"` for proper alignment in the top bar.\n   */\n  topBarActions = input<TemplateRef<any>>();\n\n  /**\n   * Setting this to true will remove the default styles for the pane. So it will\n   * render without border-radius, border and background color, but keep the inner\n   * structure. This is useful when you want to use the pane inside another container\n   * and want to apply custom styles to the pane.\n   */\n  plain = input<boolean>(false);\n\n  /**\n   * A pane may have different modes to control the behavior of the top bar.\n   * - `navigation`: Shows a back button on the left side of the top bar to close the pane or navigate back.\n   * - `toggle`: Shows a toggle button on the left side of the top bar to collapse/expand the pane.\n   */\n  mode = input<'navigation' | 'toggle' | undefined>(undefined);\n\n  modeAlign = input<'start' | 'end'>('start');\n  /**\n   * Event emitted when the pane toggle button is clicked. This toggle button is shown\n   * when mode is set to 'toggle'.\n   */\n  paneToggled = output<boolean>();\n\n  /**\n   * Event emitted when the navigation button is clicked. Navigation button is shown when\n   * mode is set to 'navigation'.\n   */\n  navigationClicked = output<boolean>();\n\n  /**\n   * Collapsed state of the pane. Only relevant when mode is set to 'toggle'.\n   */\n  collapsed = signal<boolean>(false);\n\n  togglePane(collapsed: boolean) {\n    this.collapsed.set(collapsed);\n    this.paneToggled.emit(collapsed);\n  }\n}\n","@let topBarVisible = mode() || topBarActions();\n@if (topBarVisible) {\n  <ymt-pane-top-bar\n    [actions]=\"topBarActions()\"\n    [modeAlign]=\"modeAlign()\"\n    [mode]=\"mode()\"\n    (navigationClicked)=\"navigationClicked.emit(true)\"\n    (paneToggled)=\"togglePane($event)\"\n  ></ymt-pane-top-bar>\n}\n<ng-content></ng-content>\n","import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-footer',\n  imports: [CommonModule],\n  templateUrl: './pane-footer.component.html',\n  styleUrl: './pane-footer.component.scss'\n})\nexport class YmtPaneFooterComponent {}\n","<footer><ng-content></ng-content></footer>\n","import { NgModule } from '@angular/core';\nimport { YmtPaneAsideComponent } from './pane/pane-aside/pane-aside.component';\nimport { YmtPaneBodyComponent } from './pane/pane-body/pane-body.component';\nimport { YmtPaneHeaderComponent } from './pane/pane-header/pane-header.component';\nimport { YmtPaneComponent } from './pane/pane.component';\nimport { YmtPaneFooterComponent } from './pane/pane-footer/pane-footer.component';\n\nconst cmp = [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneBodyComponent, YmtPaneFooterComponent, YmtPaneAsideComponent];\n\n@NgModule({\n  imports: cmp,\n  exports: cmp\n})\nexport class YmtPanesModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2"],"mappings":"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"}
+{"version":3,"file":"yuuvis-material-panes.mjs","sources":["../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-aside/pane-aside.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-aside/pane-aside.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-body/pane-body.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-body/pane-body.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-header/pane-header.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-header/pane-header.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/fullscreen.directive.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-top-bar/pane-top-bar.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-top-bar/pane-top-bar.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-footer/pane-footer.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-footer/pane-footer.component.html","../../../../../libs/yuuvis/material/panes/src/lib/panes.module.ts","../../../../../libs/yuuvis/material/panes/src/yuuvis-material-panes.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-aside',\n  imports: [CommonModule],\n  templateUrl: './pane-aside.component.html',\n  styleUrl: './pane-aside.component.scss'\n})\nexport class YmtPaneAsideComponent {}\n","<p>pane-aside works!</p>\n","import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-body',\n  imports: [CommonModule],\n  templateUrl: './pane-body.component.html',\n  styleUrl: './pane-body.component.scss'\n})\nexport class YmtPaneBodyComponent {}\n","<ng-content></ng-content>\n","import { CommonModule } from '@angular/common';\nimport { Component, contentChild, input, TemplateRef } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\n\n/**\n * Component for the pane header. It can be used to display a title,\n * subtitle and actions in the pane header.\n *\n * The title and subtitle can be set via the `title` and `subtitle` inputs\n * or via the `yuvPaneHeaderTitle` and `yuvPaneHeaderSubtitle` template refs:\n *\n * ```html\n * <!-- Using inputs -->\n * <ymt-pane-header [title]=\"'Pane Title'\" [subtitle]=\"'Pane Subtitle'\"></ymt-pane-header>\n * <!-- Using template refs -->\n * <ymt-pane-header>\n * <ng-template #yuvPaneHeaderTitle><h2>🦁Custom pane title</h2></ng-template>\n * <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity=\"warning\">locked</ymt-badge></ng-template>\n * </ymt-pane-header>\n * ```\n */\n@Component({\n  selector: 'ymt-pane-header',\n  imports: [CommonModule, MatIconModule],\n  templateUrl: './pane-header.component.html',\n  styleUrl: './pane-header.component.scss'\n})\nexport class YmtPaneHeaderComponent {\n  /**\n   * Title of the pane\n   */\n  title = input<string>();\n  /**\n   * Icon of the pane\n   */\n  icon = input<string>();\n  /**\n   * Subtitle of the pane\n   */\n  subtitle = input<string>();\n  /**\n   * TemplateRef for actions area in the pane header.\n   */\n  actions = input<TemplateRef<any>>();\n\n  titleSlot = contentChild<TemplateRef<any>>('yuvPaneHeaderTitle');\n  subtitleSlot = contentChild<TemplateRef<any>>('yuvPaneHeaderSubtitle');\n}\n","<header>\n  @if (icon()) {\n    <div class=\"icon\">\n      <mat-icon class=\"pane-icon\">{{ icon() }}</mat-icon>\n    </div>\n  }\n  <h2>\n    @let ts = titleSlot();\n    @if (ts) {\n      <ng-container *ngTemplateOutlet=\"ts\"></ng-container>\n    } @else {\n      {{ title() }}\n    }\n  </h2>\n  <small>\n    @let ss = subtitleSlot();\n    @if (ss) {\n      <ng-container *ngTemplateOutlet=\"ss\"></ng-container>\n    } @else {\n      {{ subtitle() }}\n    }\n  </small>\n  @let a = actions();\n  @if (a) {\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"a\"></ng-container>\n    </div>\n  }\n</header>\n","import {\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  output,\n  Renderer2,\n  signal\n} from '@angular/core';\n\n/**\n * Directive that enables any host element to toggle into a fullscreen overlay\n * covering the entire viewport. Background content is made inert and body scroll\n * is locked while fullscreen is active.\n *\n * @example\n * ```html\n * <div yuvFullscreen #fs=\"yuvFullscreen\">\n *   <button (click)=\"fs.toggle()\">Toggle</button>\n *   <p>Content</p>\n * </div>\n * ```\n */\n@Directive({\n  selector: '[yuvFullscreen]',\n  exportAs: 'yuvFullscreen',\n  host: {\n    '[class.yuv-fullscreen-active]': 'active()',\n    '(document:keydown.escape)': 'onEscape()'\n  }\n})\nexport class FullscreenDirective implements OnDestroy {\n  #elRef = inject(ElementRef);\n  #renderer = inject(Renderer2);\n\n  /** Whether the fullscreen toggle is disabled. */\n  disabled = input<boolean>(false);\n\n  /** Emitted when fullscreen mode is entered. */\n  fullscreenEnter = output<void>();\n  /** Emitted when fullscreen mode is exited. */\n  fullscreenExit = output<void>();\n\n  #isActive = signal(false);\n\n  /** Read-only signal indicating whether fullscreen is currently active. */\n  active = computed(() => this.#isActive());\n\n  #originalStyles: Record<string, string> = {};\n  #inertElements: HTMLElement[] = [];\n  #originalBodyOverflow = '';\n\n  /** Toggle fullscreen on/off. */\n  toggle(): void {\n    if (this.disabled()) return;\n    if (this.#isActive()) {\n      this.exit();\n    } else {\n      this.enter();\n    }\n  }\n\n  /** Enter fullscreen mode. No-op if already active or disabled. */\n  enter(): void {\n    if (this.#isActive() || this.disabled()) return;\n    this.#saveOriginalStyles();\n    this.#applyFullscreenStyles();\n    this.#makeBackgroundInert();\n    this.#lockBodyScroll();\n    this.#isActive.set(true);\n    this.fullscreenEnter.emit();\n  }\n\n  /** Exit fullscreen mode. No-op if not active. */\n  exit(): void {\n    if (!this.#isActive()) return;\n    this.#restoreOriginalStyles();\n    this.#restoreBackground();\n    this.#unlockBodyScroll();\n    this.#isActive.set(false);\n    this.fullscreenExit.emit();\n  }\n\n  /** @internal */\n  onEscape(): void {\n    if (this.#isActive()) {\n      this.exit();\n    }\n  }\n\n  #saveOriginalStyles(): void {\n    const style = this.#elRef.nativeElement.style;\n    this.#originalStyles = {\n      position: style.position,\n      inset: style.inset,\n      zIndex: style.zIndex,\n      width: style.width,\n      height: style.height,\n      overflow: style.overflow,\n      backgroundColor: style.backgroundColor\n    };\n  }\n\n  #applyFullscreenStyles(): void {\n    const el = this.#elRef.nativeElement;\n    this.#renderer.setStyle(el, 'position', 'fixed');\n    this.#renderer.setStyle(el, 'inset', '0');\n    this.#renderer.setStyle(el, 'z-index', '1000');\n    this.#renderer.setStyle(el, 'width', '100vw');\n    this.#renderer.setStyle(el, 'height', '100vh');\n    this.#renderer.setStyle(el, 'overflow', 'auto');\n    this.#renderer.setStyle(el, 'background-color', 'var(--ymt-surface, #fff)');\n  }\n\n  #restoreOriginalStyles(): void {\n    const el = this.#elRef.nativeElement;\n    for (const [prop, value] of Object.entries(this.#originalStyles)) {\n      if (value) {\n        this.#renderer.setStyle(el, prop, value);\n      } else {\n        this.#renderer.removeStyle(el, prop);\n      }\n    }\n    this.#originalStyles = {};\n  }\n\n  #makeBackgroundInert(): void {\n    this.#inertElements = [];\n    let current: HTMLElement = this.#elRef.nativeElement;\n\n    while (current.parentElement) {\n      const parent = current.parentElement;\n      for (let i = 0; i < parent.children.length; i++) {\n        const sibling = parent.children[i] as HTMLElement;\n        if (sibling !== current && !sibling.hasAttribute('inert')) {\n          this.#renderer.setAttribute(sibling, 'inert', '');\n          this.#inertElements.push(sibling);\n        }\n      }\n      if (parent === document.body) break;\n      current = parent;\n    }\n  }\n\n  #restoreBackground(): void {\n    for (const el of this.#inertElements) {\n      this.#renderer.removeAttribute(el, 'inert');\n    }\n    this.#inertElements = [];\n  }\n\n  #lockBodyScroll(): void {\n    this.#originalBodyOverflow = document.body.style.overflow;\n    this.#renderer.setStyle(document.body, 'overflow', 'hidden');\n  }\n\n  #unlockBodyScroll(): void {\n    if (this.#originalBodyOverflow) {\n      this.#renderer.setStyle(document.body, 'overflow', this.#originalBodyOverflow);\n    } else {\n      this.#renderer.removeStyle(document.body, 'overflow');\n    }\n    this.#originalBodyOverflow = '';\n  }\n\n  ngOnDestroy(): void {\n    if (this.#isActive()) {\n      this.exit();\n    }\n  }\n}\n","import { Component, input, TemplateRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-top-bar',\n  imports: [CommonModule],\n  templateUrl: './pane-top-bar.component.html',\n  styleUrl: './pane-top-bar.component.scss',\n})\nexport class YmtPaneTopBarComponent {\n  /**\n   * TemplateRef for actions area in the top bar.\n   */\n  actions = input<TemplateRef<any>>();\n}\n","@let ta = actions();\n@if (ta) {\n  <div class=\"top-bar\">\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n    </div>\n  </div>\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, inject, input, TemplateRef } from '@angular/core';\nimport { FullscreenDirective } from './fullscreen.directive';\nimport { YmtPaneTopBarComponent } from './pane-top-bar/pane-top-bar.component';\n\n/**\n * Pane component.\n *\n * A pane has a header and a main area. You may choose to not show a header at all:\n *\n * ```html\n * <ymt-pane>\n *  Pane content goes here.\n * </ymt-pane>\n * ```\n *\n * There are other components to be used within a pane:\n * - `ymt-pane-header`: Renders a pre-styled header area for the pane.\n * - `ymt-pane-body`: The main content area of the pane.\n * - `ymt-pane-footer`: A footer component to be used as footer area of the pane.\n *\n * You can change the appearance of the header area via CSS variables:\n * ```css\n * ymt-pane {\n *   --header-area-background: var(--ymt-surface-container-low);\n *   --header-area-border-color: var(--ymt-outline-variant);\n * }\n * ```\n *\n * The main area has a padding by default. You can customize or remove the padding via\n * CSS variables:\n * ```css\n * ymt-pane {\n *   --main-area-padding: 0;\n * }\n * ```\n *\n * Add actions to a pane:\n * ```html\n * <ymt-pane title=\"My Pane\" subTitle=\"Pane Subtitle\">\n *   <ng-template #yuvPaneActions>\n *     <button ymt-icon-button><mat-icon>settings</mat-icon></button>\n *     <button ymt-icon-button><mat-icon>more</mat-icon></button>\n *   </ng-template>\n * </ymt-pane>\n * ```\n *\n * Toggle fullscreen mode:\n * ```html\n * <ymt-pane #pane>\n *   <ymt-pane-body>\n *     <button (click)=\"pane.toggleFullscreen()\">Fullscreen</button>\n *   </ymt-pane-body>\n * </ymt-pane>\n * ```\n *\n */\n@Component({\n  selector: 'ymt-pane',\n  imports: [CommonModule, YmtPaneTopBarComponent],\n  templateUrl: './pane.component.html',\n  styleUrl: './pane.component.scss',\n  hostDirectives: [\n    {\n      directive: FullscreenDirective,\n      outputs: ['fullscreenEnter', 'fullscreenExit']\n    }\n  ],\n  host: {\n    '[class.plain]': 'plain()'\n  }\n})\nexport class YmtPaneComponent {\n  #fullscreen = inject(FullscreenDirective);\n\n  /**\n   * TemplateRef for actions area in the top bar. These actions will be placed at the end of\n   * the top bar.\n   *\n   * ```html\n   * <ymt-pane title=\"My Pane\" subTitle=\"Pane Subtitle\" [topBarActions]=\"topBarActions\"></ymt-pane>\n   * <ng-template #topBarActions>\n   *   <button ymt-icon-button icon-button-size=\"small\"><mat-icon>settings</mat-icon></button>\n   * </ng-template>\n   * ```\n   * Make sure to set the `icon-button-size=\"small\"` for proper alignment in the top bar.\n   */\n  topBarActions = input<TemplateRef<unknown>>();\n\n  /**\n   * Setting this to true will remove the default styles for the pane. So it will\n   * render without border-radius, border and background color, but keep the inner\n   * structure. This is useful when you want to use the pane inside another container\n   * and want to apply custom styles to the pane.\n   */\n  plain = input<boolean>(false);\n\n  /** Read-only signal indicating whether fullscreen is currently active. */\n  fullscreenActive = this.#fullscreen.active;\n\n  /** Toggle fullscreen mode on/off. */\n  toggleFullscreen(): void {\n    this.#fullscreen.toggle();\n  }\n\n  /** Enter fullscreen mode. */\n  enterFullscreen(): void {\n    this.#fullscreen.enter();\n  }\n\n  /** Exit fullscreen mode. */\n  exitFullscreen(): void {\n    this.#fullscreen.exit();\n  }\n}\n","@if (topBarActions()) {\n  <ymt-pane-top-bar [actions]=\"topBarActions()\"></ymt-pane-top-bar>\n}\n<ng-content></ng-content>\n","import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-footer',\n  imports: [CommonModule],\n  templateUrl: './pane-footer.component.html',\n  styleUrl: './pane-footer.component.scss'\n})\nexport class YmtPaneFooterComponent {}\n","<footer><ng-content></ng-content></footer>\n","import { NgModule } from '@angular/core';\nimport { YmtPaneAsideComponent } from './pane/pane-aside/pane-aside.component';\nimport { YmtPaneBodyComponent } from './pane/pane-body/pane-body.component';\nimport { YmtPaneHeaderComponent } from './pane/pane-header/pane-header.component';\nimport { YmtPaneComponent } from './pane/pane.component';\nimport { YmtPaneFooterComponent } from './pane/pane-footer/pane-footer.component';\n\nconst cmp = [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneBodyComponent, YmtPaneFooterComponent, YmtPaneAsideComponent];\n\n@NgModule({\n  imports: cmp,\n  exports: cmp\n})\nexport class YmtPanesModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.FullscreenDirective"],"mappings":"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"}

package/layout/lib/components/master-details-layout/master-details-layout.component.d.ts

@@ -1,10 +1,13 @@
 import { TemplateRef } from '@angular/core';
+import { YmtPaneComponent } from '@yuuvis/material/panes';
 import { SplitDirection } from 'angular-split';
 import { YmtLayoutPaneDirective } from '../../directives/layout-pane.directive';
 import { LayoutOutputData, LayoutSettings, MasterDetailsPaneLayoutOptions } from '../../layout.interface';
 import * as i0 from "@angular/core";
 export declare class MasterDetailsLayoutComponent {
     #private;
+    masterPaneRef: import("@angular/core").Signal<YmtPaneComponent | undefined>;
+    detailsPaneRef: import("@angular/core").Signal<YmtPaneComponent | undefined>;
     isDragging: import("@angular/core").WritableSignal<boolean>;
     panes: import("@angular/core").Signal<readonly YmtLayoutPaneDirective[]>;
     _panes: import("@angular/core").Signal<{
@@ -31,8 +34,14 @@ export declare class MasterDetailsLayoutComponent {
      */
     detailsActive: import("@angular/core").ModelSignal<boolean>;
     smallScreenLayout: import("@angular/core").WritableSignal<boolean>;
-    onDragStart(e: LayoutOutputData): void;
-    onDragEnd(e: LayoutOutputData): void;
+    onDragStart(): void;
+    onDragEnd(event: LayoutOutputData): void;
+    hideArea(role: 'master' | 'details'): void;
+    showArea(role: 'master' | 'details'): void;
+    toggleArea(role: 'master' | 'details'): void;
+    isAreaVisible(role: 'master' | 'details'): boolean;
+    toggleFullscreen(role: 'master' | 'details'): void;
+    fullscreenActive(role: 'master' | 'details'): boolean;
     applyLayoutSettings(settings: LayoutSettings): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MasterDetailsLayoutComponent, never>;

package/layout/lib/directives/layout-pane.directive.d.ts

@@ -7,9 +7,9 @@ import * as i0 from "@angular/core";
 export declare class YmtLayoutPaneDirective {
     template: TemplateRef<any>;
     role: import("@angular/core").InputSignal<LayoutPaneRole>;
-    topBarActions: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
-    updateSettings(s: PaneLayoutSettings): void;
+    topBarActions: import("@angular/core").InputSignal<TemplateRef<unknown> | undefined>;
     areaProperties: import("@angular/core").WritableSignal<PaneLayoutSettings>;
+    updateSettings(settings: PaneLayoutSettings): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<YmtLayoutPaneDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<YmtLayoutPaneDirective, "[ymtLayoutPane]", never, { "role": { "alias": "role"; "required": true; "isSignal": true; }; "topBarActions": { "alias": "topBarActions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuuvis/material",
-  "version": "2.14.0",
+  "version": "2.16.0",
   "author": "OPTIMAL SYSTEMS GmbH <npm@optimal-systems.de>",
   "license": "MIT",
   "peerDependencies": {

package/panes/README.md

@@ -11,58 +11,43 @@ The main pane component that provides a structured layout with optional header a
 #### Basic Usage
 
 ```html
-<ymt-pane [title]="'My Pane'" [subtitle]="'Optional subtitle'">
-  Your pane content goes here.
+<ymt-pane>
+  <ymt-pane-header [title]="'My Pane'" [subtitle]="'Optional subtitle'"></ymt-pane-header>
+  <ymt-pane-body>Your pane content goes here.</ymt-pane-body>
+  <ymt-pane-footer>
+    <button ymtButton="primary">Save</button>
+  </ymt-pane-footer>
 </ymt-pane>
 ```
 
-#### Without Header
+#### With Top Bar Actions
+
+Add action buttons to the top bar area:
 
 ```html
-<ymt-pane [header]="false">
-  Content without header area.
+<ymt-pane [topBarActions]="myTopBarActions">
+  <ymt-pane-body>Pane content.</ymt-pane-body>
 </ymt-pane>
-```
 
-#### With Actions
+<ng-template #myTopBarActions>
+  <button ymt-icon-button icon-button-size="small">
+    <mat-icon>settings</mat-icon>
+  </button>
+</ng-template>
+```
 
-Add action buttons to either the header or top bar areas:
+#### With Header Actions
 
 ```html
 <ymt-pane>
-  <!-- Top bar actions (use small icon buttons) -->
-  <ng-template #yuvPaneTopBarActions>
-    <button ymt-icon-button icon-button-size="small">
-      <mat-icon>close</mat-icon>
-    </button>
-  </ng-template>
-
-  <!-- Header actions (regular icon buttons) -->
-  <ng-template #yuvPaneActions>
-    <button ymt-icon-button>
-      <mat-icon>settings</mat-icon>
-    </button>
-    <button ymt-icon-button>
-      <mat-icon>more_vert</mat-icon>
-    </button>
-  </ng-template>
-
-  <!-- Pane content -->
-  <p>Settings content...</p>
+  <ymt-pane-header [title]="'My Pane'" [actions]="headerActions"></ymt-pane-header>
+  <ymt-pane-body>Content here.</ymt-pane-body>
 </ymt-pane>
-```
-
-#### With Pane Toggle
 
-Enable collapsible pane functionality:
-
-```html
-<ymt-pane 
-  title="Collapsible Pane" 
-  paneToggle="start"
-  (paneToggled)="onPaneToggled($event)">
-  Collapsible content here.
-</ymt-pane>
+<ng-template #headerActions>
+  <button ymt-icon-button><mat-icon>settings</mat-icon></button>
+  <button ymt-icon-button><mat-icon>more_vert</mat-icon></button>
+</ng-template>
 ```
 
 #### API
@@ -71,60 +56,24 @@ Enable collapsible pane functionality:
 
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
-| `title` | `string` | - | Title displayed in the header |
-| `subtitle` | `string` | - | Subtitle displayed below the title |
-| `header` | `boolean` | `true` | Whether to show the header area |
-| `topBar` | `boolean` | `true` | Whether to show the top bar |
-| `paneToggle` | `'start' \| 'end' \| 'none'` | `'none'` | Position of the toggle button |
-
-##### Outputs
-
-| Output | Type | Description |
-|--------|------|-------------|
-| `paneToggled` | `boolean` | Emitted when pane is collapsed/expanded |
-
-##### Content Children
-
-| Template Reference | Description |
-|-------------------|-------------|
-| `#yuvPaneTopBarActions` | Actions for the top bar (use small buttons) |
-| `#yuvPaneActions` | Actions for the header area |
+| `topBarActions` | `TemplateRef<any>` | - | Template for action buttons in the top bar |
+| `plain` | `boolean` | `false` | Removes border, border-radius, and background |
 
 #### Customization
 
 ##### CSS Variables
 
-Customize the appearance using CSS custom properties:
-
 ```css
 ymt-pane {
   /* Header area styling */
   --header-area-background: var(--ymt-surface-container-low);
   --header-area-border-color: var(--ymt-outline-variant);
-  
+
   /* Main content area padding */
   --main-area-padding: 1rem;
-  
-  /* Remove padding entirely */
-  --main-area-padding: 0;
-}
-```
-
-##### Examples
-
-**Minimal pane without padding:**
-```css
-.minimal-pane {
-  --main-area-padding: 0;
-  --header-area-background: transparent;
-}
-```
 
-**Custom header styling:**
-```css
-.custom-header-pane {
-  --header-area-background: var(--ymt-primary-container);
-  --header-area-border-color: var(--ymt-primary);
+  /* Pane background color */
+  --pane-background-color: var(--ymt-surface);
 }
 ```
 
@@ -133,59 +82,24 @@ ymt-pane {
 This is a secondary entry point of `@yuuvis/material`. Import it directly:
 
 ```typescript
-import { YmtPaneComponent } from '@yuuvis/material/panes';
+import { YmtPanesModule } from '@yuuvis/material/panes';
 
 @Component({
-  imports: [YmtPaneComponent],
+  imports: [YmtPanesModule],
   // ...
 })
 export class MyComponent {}
 ```
 
-## Related Components
+## Sub-Components
 
-- **YmtPaneHeaderComponent**: Internal component for rendering pane headers
-- **YmtPaneTopBarComponent**: Internal component for rendering top bars with toggle functionality
+- **`ymt-pane-header`**: Header area with title, subtitle, icon, and actions slot
+- **`ymt-pane-body`**: Scrollable main content area
+- **`ymt-pane-footer`**: Footer area for actions
+- **`ymt-pane-top-bar`**: Internal top bar rendered when `topBarActions` is provided
 
 ## Best Practices
 
 1. Use `icon-button-size="small"` for buttons in the top bar actions template
 2. Keep header and top bar actions minimal for better UX
-3. Use the pane toggle feature for space-constrained layouts
-4. Customize CSS variables instead of overriding component styles
-5. Consider accessibility when using toggle functionality
-
-## Examples
-
-### Dashboard Layout
-
-```html
-<div class="dashboard">
-  <ymt-pane title="Navigation" paneToggle="start" class="sidebar">
-    <nav>...</nav>
-  </ymt-pane>
-  
-  <ymt-pane title="Main Content" [topBar]="false" class="main">
-    <main>...</main>
-  </ymt-pane>
-</div>
-```
-
-### Settings Panel
-
-```html
-<ymt-pane title="User Settings" subtitle="Manage your preferences">
-  <ng-template #yuvPaneActions>
-    <button ymt-icon-button (click)="save()">
-      <mat-icon>save</mat-icon>
-    </button>
-    <button ymt-icon-button (click)="reset()">
-      <mat-icon>refresh</mat-icon>
-    </button>
-  </ng-template>
-  
-  <form>
-    <!-- Settings form content -->
-  </form>
-</ymt-pane>
-```
+3. Customize CSS variables instead of overriding component styles

package/panes/index.d.ts

@@ -1,5 +1,6 @@
 export * from './lib/panes.module';
 export * from './lib/pane/pane.component';
+export * from './lib/pane/fullscreen.directive';
 export * from './lib/pane/pane-header/pane-header.component';
 export * from './lib/pane/pane-body/pane-body.component';
 export * from './lib/pane/pane-aside/pane-aside.component';

package/panes/lib/pane/fullscreen.directive.d.ts

@@ -0,0 +1,37 @@
+import { OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Directive that enables any host element to toggle into a fullscreen overlay
+ * covering the entire viewport. Background content is made inert and body scroll
+ * is locked while fullscreen is active.
+ *
+ * @example
+ * ```html
+ * <div yuvFullscreen #fs="yuvFullscreen">
+ *   <button (click)="fs.toggle()">Toggle</button>
+ *   <p>Content</p>
+ * </div>
+ * ```
+ */
+export declare class FullscreenDirective implements OnDestroy {
+    #private;
+    /** Whether the fullscreen toggle is disabled. */
+    disabled: import("@angular/core").InputSignal<boolean>;
+    /** Emitted when fullscreen mode is entered. */
+    fullscreenEnter: import("@angular/core").OutputEmitterRef<void>;
+    /** Emitted when fullscreen mode is exited. */
+    fullscreenExit: import("@angular/core").OutputEmitterRef<void>;
+    /** Read-only signal indicating whether fullscreen is currently active. */
+    active: import("@angular/core").Signal<boolean>;
+    /** Toggle fullscreen on/off. */
+    toggle(): void;
+    /** Enter fullscreen mode. No-op if already active or disabled. */
+    enter(): void;
+    /** Exit fullscreen mode. No-op if not active. */
+    exit(): void;
+    /** @internal */
+    onEscape(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FullscreenDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FullscreenDirective, "[yuvFullscreen]", ["yuvFullscreen"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "fullscreenEnter": "fullscreenEnter"; "fullscreenExit": "fullscreenExit"; }, never, never, true, never>;
+}

package/panes/lib/pane/pane-top-bar/pane-top-bar.component.d.ts

@@ -1,21 +1,10 @@
 import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class YmtPaneTopBarComponent {
-    #private;
     /**
      * TemplateRef for actions area in the top bar.
      */
     actions: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
-    modeAlign: import("@angular/core").InputSignal<"start" | "end">;
-    mode: import("@angular/core").InputSignal<"navigation" | "toggle" | undefined>;
-    /**
-     * Event emitted when the pane toggle button is clicked.
-     */
-    paneToggled: import("@angular/core").OutputEmitterRef<boolean>;
-    navigationClicked: import("@angular/core").OutputEmitterRef<boolean>;
-    paneCollapsed: import("@angular/core").WritableSignal<boolean>;
-    togglePane(): void;
-    navClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<YmtPaneTopBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<YmtPaneTopBarComponent, "ymt-pane-top-bar", never, { "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "modeAlign": { "alias": "modeAlign"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, { "paneToggled": "paneToggled"; "navigationClicked": "navigationClicked"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<YmtPaneTopBarComponent, "ymt-pane-top-bar", never, { "actions": { "alias": "actions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/panes/lib/pane/pane.component.d.ts

@@ -1,5 +1,6 @@
 import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
+import * as i1 from "./fullscreen.directive";
 /**
  * Pane component.
  *
@@ -42,8 +43,18 @@ import * as i0 from "@angular/core";
  * </ymt-pane>
  * ```
  *
+ * Toggle fullscreen mode:
+ * ```html
+ * <ymt-pane #pane>
+ *   <ymt-pane-body>
+ *     <button (click)="pane.toggleFullscreen()">Fullscreen</button>
+ *   </ymt-pane-body>
+ * </ymt-pane>
+ * ```
+ *
  */
 export declare class YmtPaneComponent {
+    #private;
     /**
      * TemplateRef for actions area in the top bar. These actions will be placed at the end of
      * the top bar.
@@ -56,7 +67,7 @@ export declare class YmtPaneComponent {
      * ```
      * Make sure to set the `icon-button-size="small"` for proper alignment in the top bar.
      */
-    topBarActions: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    topBarActions: import("@angular/core").InputSignal<TemplateRef<unknown> | undefined>;
     /**
      * Setting this to true will remove the default styles for the pane. So it will
      * render without border-radius, border and background color, but keep the inner
@@ -64,28 +75,14 @@ export declare class YmtPaneComponent {
      * and want to apply custom styles to the pane.
      */
     plain: import("@angular/core").InputSignal<boolean>;
-    /**
-     * A pane may have different modes to control the behavior of the top bar.
-     * - `navigation`: Shows a back button on the left side of the top bar to close the pane or navigate back.
-     * - `toggle`: Shows a toggle button on the left side of the top bar to collapse/expand the pane.
-     */
-    mode: import("@angular/core").InputSignal<"navigation" | "toggle" | undefined>;
-    modeAlign: import("@angular/core").InputSignal<"start" | "end">;
-    /**
-     * Event emitted when the pane toggle button is clicked. This toggle button is shown
-     * when mode is set to 'toggle'.
-     */
-    paneToggled: import("@angular/core").OutputEmitterRef<boolean>;
-    /**
-     * Event emitted when the navigation button is clicked. Navigation button is shown when
-     * mode is set to 'navigation'.
-     */
-    navigationClicked: import("@angular/core").OutputEmitterRef<boolean>;
-    /**
-     * Collapsed state of the pane. Only relevant when mode is set to 'toggle'.
-     */
-    collapsed: import("@angular/core").WritableSignal<boolean>;
-    togglePane(collapsed: boolean): void;
+    /** Read-only signal indicating whether fullscreen is currently active. */
+    fullscreenActive: import("@angular/core").Signal<boolean>;
+    /** Toggle fullscreen mode on/off. */
+    toggleFullscreen(): void;
+    /** Enter fullscreen mode. */
+    enterFullscreen(): void;
+    /** Exit fullscreen mode. */
+    exitFullscreen(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<YmtPaneComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<YmtPaneComponent, "ymt-pane", never, { "topBarActions": { "alias": "topBarActions"; "required": false; "isSignal": true; }; "plain": { "alias": "plain"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "modeAlign": { "alias": "modeAlign"; "required": false; "isSignal": true; }; }, { "paneToggled": "paneToggled"; "navigationClicked": "navigationClicked"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<YmtPaneComponent, "ymt-pane", never, { "topBarActions": { "alias": "topBarActions"; "required": false; "isSignal": true; }; "plain": { "alias": "plain"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.FullscreenDirective; inputs: {}; outputs: { "fullscreenEnter": "fullscreenEnter"; "fullscreenExit": "fullscreenExit"; }; }]>;
 }