@yuuvis/material 2.3.16 → 2.3.17

package/fesm2022/yuuvis-material-layout.mjs

@@ -0,0 +1,240 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, input, signal, Directive, Injectable, ElementRef, contentChildren, computed, untracked, viewChild, effect, model, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from 'angular-split';
+import { AngularSplitModule } from 'angular-split';
+import * as i3 from '@yuuvis/material/panes';
+import { YmtPanesModule } from '@yuuvis/material/panes';
+import { MatDialog } from '@angular/material/dialog';
+import { DeviceService } from '@yuuvis/material';
+
+/**
+ * Directive to mark a layout pane.
+ */
+class YmtLayoutPaneDirective {
+    template = inject((TemplateRef));
+    // Role the pane takes in the layout
+    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtLayoutPaneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtLayoutPaneDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ymtLayoutPane]'
+                }]
+        }] });
+
+/**
+ * Service to store and retrieve layout settings. Those
+ * settings are stored on the users device because in
+ * general layout settings like panel widths are highly
+ * dependent on the current device.
+ */
+class LayoutService {
+    #STORAGE_PREFIX = 'ymt.layout:';
+    DEFAULT_SPLIT_VIEW_GUTTER_SIZE = 16;
+    saveSettings(key, settings) {
+        if (typeof settings === 'object') {
+            localStorage.setItem(this.#getKey(key), JSON.stringify(settings));
+            return true;
+        }
+        else
+            return false;
+    }
+    getSettings(key) {
+        try {
+            const v = localStorage.getItem(this.#getKey(key));
+            return v ? JSON.parse(v) : undefined;
+        }
+        catch (e) {
+            console.error('Error while parsing layout settings', e);
+            return undefined;
+        }
+    }
+    #getKey(key) {
+        return `${this.#STORAGE_PREFIX}${key}`;
+    }
+    /**
+     * Clears all layout settings.
+     */
+    clearSettings() {
+        Object.keys(localStorage).forEach((key) => {
+            if (key.startsWith(this.#STORAGE_PREFIX)) {
+                localStorage.removeItem(key);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LayoutService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LayoutService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class MasterDetailsLayoutComponent {
+    #elRef = inject(ElementRef);
+    #layoutService = inject(LayoutService);
+    #dialog = inject(MatDialog);
+    #device = inject(DeviceService);
+    #DEFAULT_GUTTER_SIZE_PX = 16;
+    panes = contentChildren(YmtLayoutPaneDirective);
+    _panes = computed(() => {
+        const _panes = this.panes();
+        const _options = this.options();
+        untracked(() => {
+            _panes.forEach((p) => p.updateSettings({
+                size: _options[`${p.role()}Size`],
+                minSize: _options[`${p.role()}MinSize`],
+                maxSize: _options[`${p.role()}MaxSize`]
+            }));
+        });
+        const res = {
+            master: _panes.find((p) => p.role() === 'master'),
+            details: _panes.find((p) => p.role() === 'details')
+        };
+        if (!res.master || !res.details)
+            console.error('Both master and details panes are required in MasterDetailsLayoutComponent');
+        return res;
+    });
+    #detailsPaneDialogRef = null;
+    detailsPaneTemplateRef = viewChild.required('tplDetailsPanel');
+    /**
+     * Setting ID for persisting layout settings. If not set, layout settings won't be persisted.
+     */
+    layoutSettingsID = input(undefined);
+    options = input({
+        resizable: true
+    });
+    #optionsEffect = computed(() => {
+        const o = this.options();
+        // if(o.m)
+    });
+    /**
+     * The split views direction. Could be 'horizontal' or 'vertical'. Defaults to 'horizontal'.
+     */
+    direction = input('horizontal');
+    /**
+     * Size of the gutter in Pixel.
+     */
+    gutterSize = input(this.#DEFAULT_GUTTER_SIZE_PX);
+    _gutterSize = signal(this.#DEFAULT_GUTTER_SIZE_PX);
+    #gutterSizeEffect = effect(() => {
+        this._gutterSize.set(this.gutterSize());
+    });
+    /**
+     * Enable/disable details pane (also use as two-way-bound variable: [(detailsActive)])
+     */
+    detailsActive = model(false);
+    #detailsActiveEffect = effect(() => {
+        const da = this.detailsActive();
+        untracked(() => {
+            if (this.#detailsPaneDialogRef)
+                this.#detailsPaneDialogRef.close();
+            if (this.smallScreenLayout() && da) {
+                this.#detailsPaneDialogRef = this.#dialog.open(this.detailsPaneTemplateRef(), {
+                    width: '100vw',
+                    height: '100vh',
+                    maxWidth: '100vw',
+                    panelClass: 'ymt-dialog-fullscreen'
+                });
+                this.#detailsPaneDialogRef.afterClosed().subscribe((silent) => {
+                    if (!silent) {
+                        this.detailsActive.set(false);
+                    }
+                    this.#detailsPaneDialogRef = null;
+                });
+            }
+        });
+    });
+    smallScreenLayout = this.#device.smallScreenLayout;
+    #smallScreenLayoutEffect = effect(() => {
+        const ssl = this.smallScreenLayout();
+        if (this.#detailsPaneDialogRef)
+            this.#detailsPaneDialogRef.close(true);
+        untracked(() => {
+            const da = this.detailsActive();
+            if (ssl && da)
+                this.detailsActive.set(false);
+        });
+    });
+    onDragEnd(e) {
+        this.#updateLayoutSettings(e.sizes);
+    }
+    #updateLayoutSettings(sizes) {
+        const layoutSettings = {
+            areas: this.panes().map((a, idx) => ({
+                visible: a.areaProperties().visible === false ? false : true,
+                size: sizes[idx]
+            }))
+        };
+        // save layout settings if persistence is enabled
+        const lsid = this.layoutSettingsID();
+        if (lsid) {
+            this.#layoutService.saveSettings(lsid, layoutSettings);
+        }
+    }
+    #calculateGutterSize() {
+        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;
+        if (this._gutterSize() === this.#DEFAULT_GUTTER_SIZE_PX)
+            this._gutterSize.set(spacingPx);
+    }
+    applyLayoutSettings(settings) {
+        if (!this.#isLayoutSettingsObject(settings))
+            return;
+        settings.areas.forEach((a, index) => {
+            this.panes()[index].updateSettings(a);
+        });
+    }
+    #isLayoutSettingsObject(v) {
+        return v && 'areas' in v;
+    }
+    ngAfterViewInit() {
+        this.#calculateGutterSize();
+        // try to load layout settings if persistence is enabled
+        const lsid = this.layoutSettingsID();
+        if (lsid) {
+            this.applyLayoutSettings(this.#layoutService.getSettings(lsid));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MasterDetailsLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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\n@if (!smallScreenLayout()) {\n  <as-split [direction]=\"direction()\" [unit]=\"'percent'\" [gutterSize]=\"_gutterSize()\" [gutterStep]=\"1\" [useTransition]=\"false\" (dragEnd)=\"onDragEnd($event)\">\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    <!-- master pane -->\n    @if (mp) {\n      <as-split-area\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()\">\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        [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()\">\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, currentColor);--_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)}\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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MasterDetailsLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ymt-master-details-layout', imports: [CommonModule, AngularSplitModule, YmtPanesModule], template: "@let mp = _panes().master;\n@let dp = _panes().details;\n\n@if (!smallScreenLayout()) {\n  <as-split [direction]=\"direction()\" [unit]=\"'percent'\" [gutterSize]=\"_gutterSize()\" [gutterStep]=\"1\" [useTransition]=\"false\" (dragEnd)=\"onDragEnd($event)\">\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    <!-- master pane -->\n    @if (mp) {\n      <as-split-area\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()\">\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        [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()\">\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, currentColor);--_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)}\n"] }]
+        }] });
+
+const cmp = [MasterDetailsLayoutComponent, YmtLayoutPaneDirective];
+class YmtLayoutModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: YmtLayoutModule, imports: [MasterDetailsLayoutComponent, YmtLayoutPaneDirective], exports: [MasterDetailsLayoutComponent, YmtLayoutPaneDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtLayoutModule, imports: [MasterDetailsLayoutComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: cmp,
+                    exports: cmp
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MasterDetailsLayoutComponent, YmtLayoutModule, YmtLayoutPaneDirective };
+//# sourceMappingURL=yuuvis-material-layout.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"yuuvis-material-layout.mjs","sources":["../../../../../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, 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 { Component, computed, contentChildren, effect, ElementRef, inject, input, model, signal, TemplateRef, untracked, viewChild } from '@angular/core';\nimport { AngularSplitModule, SplitAreaSize, SplitDirection } from 'angular-split';\nimport { YmtLayoutPaneDirective } from '../../directives/layout-pane.directive';\nimport { LayoutOutputData, LayoutSettings, MasterDetailsPaneLayoutOptions, PaneLayoutSettings } from '../../layout.interface';\nimport { LayoutService } from '../../services/layout.service';\nimport { YmtPanesModule } from '@yuuvis/material/panes';\nimport { MatDialog, MatDialogRef } from '@angular/material/dialog';\nimport { DeviceService } from '@yuuvis/material';\n\n@Component({\n  selector: 'ymt-master-details-layout',\n  imports: [CommonModule, AngularSplitModule, YmtPanesModule],\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\n  #DEFAULT_GUTTER_SIZE_PX = 16;\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\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  onDragEnd(e: LayoutOutputData) {\n    this.#updateLayoutSettings(e.sizes);\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\n@if (!smallScreenLayout()) {\n  <as-split [direction]=\"direction()\" [unit]=\"'percent'\" [gutterSize]=\"_gutterSize()\" [gutterStep]=\"1\" [useTransition]=\"false\" (dragEnd)=\"onDragEnd($event)\">\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    <!-- master pane -->\n    @if (mp) {\n      <as-split-area\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()\">\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        [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()\">\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":";;;;;;;;;;;AAGA;;AAEG;MAIU,sBAAsB,CAAA;AACjC,IAAA,QAAQ,GAAG,MAAM,EAAC,WAAgB,EAAC;;AAEnC,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAkB;;IAEvC,aAAa,GAAG,KAAK,EAAoB;AAEzC,IAAA,cAAc,CAAC,CAAqB,EAAA;AAClC,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,GAAG,CAAC,EAAE,CAAC;;IAG7D,cAAc,GAAG,MAAM,CAAqB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wGAXnD,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAHlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE;AACX,iBAAA;;;ACND;;;;;AAKG;MAIU,aAAa,CAAA;IACxB,eAAe,GAAG,aAAa;IAE/B,8BAA8B,GAAG,EAAE;IAEnC,YAAY,CAAC,GAAW,EAAE,QAAiB,EAAA;AACzC,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AAChC,YAAA,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;AACjE,YAAA,OAAO,IAAI;;;AACN,YAAA,OAAO,KAAK;;AAGrB,IAAA,WAAW,CAAC,GAAW,EAAA;AACrB,QAAA,IAAI;AACF,YAAA,MAAM,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AACjD,YAAA,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS;;QACpC,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,CAAC,KAAK,CAAC,qCAAqC,EAAE,CAAC,CAAC;AACvD,YAAA,OAAO,SAAS;;;AAIpB,IAAA,OAAO,CAAC,GAAW,EAAA;AACjB,QAAA,OAAO,GAAG,IAAI,CAAC,eAAe,CAAG,EAAA,GAAG,EAAE;;AAGxC;;AAEG;IACH,aAAa,GAAA;QACX,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;YACxC,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE;AACxC,gBAAA,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC;;AAEhC,SAAC,CAAC;;wGAlCO,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAb,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,cAFZ,MAAM,EAAA,CAAA;;4FAEP,aAAa,EAAA,UAAA,EAAA,CAAA;kBAHzB,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE;AACb,iBAAA;;;MCMY,4BAA4B,CAAA;AACvC,IAAA,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC;AAC3B,IAAA,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC;AACtC,IAAA,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC;AAC3B,IAAA,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC;IAE/B,uBAAuB,GAAG,EAAE;AAE5B,IAAA,KAAK,GAAG,eAAe,CAAyB,sBAAsB,CAAC;AACvE,IAAA,MAAM,GAAG,QAAQ,CAGd,MAAK;AACN,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE;AAC3B,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAE;QAC/B,SAAS,CAAC,MAAK;YACb,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KACf,CAAC,CAAC,cAAc,CAAC;gBACf,IAAI,EAAE,QAAQ,CAAC,CAAA,EAAG,CAAC,CAAC,IAAI,EAAE,CAAA,IAAA,CAA8C,CAAkB;gBAC1F,OAAO,EAAE,QAAQ,CAAC,CAAA,EAAG,CAAC,CAAC,IAAI,EAAE,CAAA,OAAA,CAAiD,CAAW;gBACzF,OAAO,EAAE,QAAQ,CAAC,CAAA,EAAG,CAAC,CAAC,IAAI,EAAE,CAAA,OAAA,CAAiD;AAE/E,aAAA,CAAC,CACH;AACH,SAAC,CAAC;AAEF,QAAA,MAAM,GAAG,GAAG;AACV,YAAA,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,KAAK,QAAQ,CAAE;AAClD,YAAA,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,KAAK,SAAS;SACnD;QACD,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,OAAO;AAAE,YAAA,OAAO,CAAC,KAAK,CAAC,4EAA4E,CAAC;AAC5H,QAAA,OAAO,GAAG;AACZ,KAAC,CAAC;IAEF,qBAAqB,GAA6B,IAAI;AACtD,IAAA,sBAAsB,GAAG,SAAS,CAAC,QAAQ,CAAmB,iBAAiB,CAAC;AAEhF;;AAEG;AACH,IAAA,gBAAgB,GAAG,KAAK,CAAqB,SAAS,CAAC;IAEvD,OAAO,GAAG,KAAK,CAAiC;AAC9C,QAAA,SAAS,EAAE;AACZ,KAAA,CAAC;AACF,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;AAC7B,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE;;AAE1B,KAAC,CAAC;AAEF;;AAEG;AACH,IAAA,SAAS,GAAG,KAAK,CAAiB,YAAY,CAAC;AAE/C;;AAEG;AACH,IAAA,UAAU,GAAG,KAAK,CAAS,IAAI,CAAC,uBAAuB,CAAC;AACxD,IAAA,WAAW,GAAG,MAAM,CAAS,IAAI,CAAC,uBAAuB,CAAC;AAC1D,IAAA,iBAAiB,GAAG,MAAM,CAAC,MAAK;QAC9B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;AACzC,KAAC,CAAC;AAEF;;AAEG;AACH,IAAA,aAAa,GAAG,KAAK,CAAU,KAAK,CAAC;AACrC,IAAA,oBAAoB,GAAG,MAAM,CAAC,MAAK;AACjC,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE;QAC/B,SAAS,CAAC,MAAK;YACb,IAAI,IAAI,CAAC,qBAAqB;AAAE,gBAAA,IAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE;AAClE,YAAA,IAAI,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAE,EAAE;AAClC,gBAAA,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,EAAE;AAC5E,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,MAAM,EAAE,OAAO;AACf,oBAAA,QAAQ,EAAE,OAAO;AACjB,oBAAA,UAAU,EAAE;AACb,iBAAA,CAAC;gBACF,IAAI,CAAC,qBAAqB,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,CAAC,MAAe,KAAI;oBACrE,IAAI,CAAC,MAAM,EAAE;AACX,wBAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;;AAE/B,oBAAA,IAAI,CAAC,qBAAqB,GAAG,IAAI;AACnC,iBAAC,CAAC;;AAEN,SAAC,CAAC;AACJ,KAAC,CAAC;AAEF,IAAA,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB;AAClD,IAAA,wBAAwB,GAAG,MAAM,CAAC,MAAK;AACrC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,iBAAiB,EAAE;QACpC,IAAI,IAAI,CAAC,qBAAqB;AAAE,YAAA,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,IAAI,CAAC;QACtE,SAAS,CAAC,MAAK;AACb,YAAA,MAAM,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE;YAC/B,IAAI,GAAG,IAAI,EAAE;AAAE,gBAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;AAC9C,SAAC,CAAC;AACJ,KAAC,CAAC;AAEF,IAAA,SAAS,CAAC,CAAmB,EAAA;AAC3B,QAAA,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,KAAK,CAAC;;AAGrC,IAAA,qBAAqB,CAAC,KAAsB,EAAA;AAC1C,QAAA,MAAM,cAAc,GAAmB;AACrC,YAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,CAAyB,EAAE,GAAW,MAAM;AACnE,gBAAA,OAAO,EAAE,CAAC,CAAC,cAAc,EAAE,CAAC,OAAO,KAAK,KAAK,GAAG,KAAK,GAAG,IAAI;AAC5D,gBAAA,IAAI,EAAE,KAAK,CAAC,GAAG;AAChB,aAAA,CAAC;SACH;;AAED,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,EAAE;QACpC,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,IAAI,EAAE,cAAc,CAAC;;;IAI1D,oBAAoB,GAAA;QAClB,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;QACjE,MAAM,OAAO,GAAG,aAAa,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,IAAI,EAAE;QACxE,MAAM,QAAQ,GAAG,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;AAC1D,QAAA,MAAM,SAAS,GAAG,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,OAAO,CAAC,GAAG,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,uBAAuB;AACxJ,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,uBAAuB;AAAE,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,SAAS,CAAC;;AAG1F,IAAA,mBAAmB,CAAC,QAAwB,EAAA;AAC1C,QAAA,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,QAAQ,CAAC;YAAE;QAC7C,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAqB,EAAE,KAAa,KAAI;YAC9D,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC;AACvC,SAAC,CAAC;;AAGJ,IAAA,uBAAuB,CAAC,CAAM,EAAA;AAC5B,QAAA,OAAO,CAAC,IAAI,OAAO,IAAI,CAAC;;IAG1B,eAAe,GAAA;QACb,IAAI,CAAC,oBAAoB,EAAE;;AAE3B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,EAAE;QACpC,IAAI,IAAI,EAAE;AACR,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,IAAI,CAAmB,CAAC;;;wGA7I1E,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAA5B,4BAA4B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,qBAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,OAAA,EAAA,SAAA,EAQS,sBAAsB,ECxBxE,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,wBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,s9DAsDA,q7CD1CY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,kBAAkB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,KAAA,EAAA,MAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,eAAA,EAAA,wBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,SAAA,EAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,8BAAA,EAAA,QAAA,EAAA,2BAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,cAAc,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,eAAA,EAAA,OAAA,EAAA,MAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,EAAA,mBAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FAI/C,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBANxC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,2BAA2B,WAC5B,CAAC,YAAY,EAAE,kBAAkB,EAAE,cAAc,CAAC,EAAA,QAAA,EAAA,s9DAAA,EAAA,MAAA,EAAA,CAAA,83CAAA,CAAA,EAAA;;;AER7D,MAAM,GAAG,GAAG,CAAC,4BAA4B,EAAE,sBAAsB,CAAC;MAMrD,eAAe,CAAA;wGAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,YANf,4BAA4B,EAAE,sBAAsB,CAApD,EAAA,OAAA,EAAA,CAAA,4BAA4B,EAAE,sBAAsB,CAAA,EAAA,CAAA;AAMpD,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,YANf,4BAA4B,CAAA,EAAA,CAAA;;4FAM5B,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,GAAG;AACZ,oBAAA,OAAO,EAAE;AACV,iBAAA;;;ACTD;;AAEG;;;;"}

package/fesm2022/yuuvis-material-panes.mjs

@@ -1,11 +1,29 @@
 import * as i0 from '@angular/core';
-import { input, Component, output, signal, effect, contentChild, NgModule } from '@angular/core';
+import { Component, input, output, signal, effect, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 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.14", ngImport: i0, type: YmtPaneAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: YmtPaneAsideComponent, isStandalone: true, selector: "ymt-pane-aside", ngImport: i0, template: "<p>pane-aside works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneAsideComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ymt-pane-aside', imports: [CommonModule], template: "<p>pane-aside works!</p>\n" }]
+        }] });
+
+class YmtPaneBodyComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: YmtPaneBodyComponent, isStandalone: true, selector: "ymt-pane-body", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ymt-pane-body', imports: [CommonModule], template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
+        }] });
+
 class YmtPaneHeaderComponent {
     /**
      * Title of the pane
@@ -32,15 +50,13 @@ class YmtPaneTopBarComponent {
      * TemplateRef for actions area in the top bar.
      */
     actions = input();
-    /**
-     * Position of the pane toggle button (default: 'none')
-     * Set to 'none' the pane toggle button in the top bar is hidden.
-     */
-    paneToggle = input('none');
+    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());
@@ -48,24 +64,18 @@ class YmtPaneTopBarComponent {
     togglePane() {
         this.paneCollapsed.set(!this.paneCollapsed());
     }
+    navClick() {
+        this.navigationClicked.emit(true);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneTopBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: YmtPaneTopBarComponent, isStandalone: true, selector: "ymt-pane-top-bar", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, paneToggle: { classPropertyName: "paneToggle", publicName: "paneToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paneToggled: "paneToggled" }, host: { properties: { "class.inverse": "paneToggle() === \"end\"", "class.pane-toggle": "paneToggle() !== \"none\"" } }, ngImport: i0, template: " @let ta = actions();\n  <div class=\"top-bar\">\n    @if (paneToggle() != 'none') {\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    }\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.pane-toggle .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: i1$1.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.14", 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: i1$1.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneTopBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ymt-pane-top-bar', imports: [YmtIconButtonDirective, MatIconModule, CommonModule], host: {
-                        '[class.inverse]': 'paneToggle() === "end"',
-                        '[class.pane-toggle]': 'paneToggle() !== "none"'
-                    }, template: " @let ta = actions();\n  <div class=\"top-bar\">\n    @if (paneToggle() != 'none') {\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    }\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.pane-toggle .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"] }]
-        }] });
-
-class YmtPaneAsideComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: YmtPaneAsideComponent, isStandalone: true, selector: "ymt-pane-aside", ngImport: i0, template: "<p>pane-aside works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneAsideComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ymt-pane-aside', imports: [CommonModule], template: "<p>pane-aside works!</p>\n" }]
+                        '[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"] }]
         }] });
 
 /**
@@ -79,6 +89,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * </ymt-pane>
  * ```
  *
+ * There are other components to be used within a pane:
+ * - `ymt-pane-header`: Renders a pre-styled header area for the pane.
+ * - `ymt-pane-body`: The main content area of the pane.
+ * - `ymt-pane-footer`: A footer component to be used as footer area of the pane.
+ *
  * You can change the appearance of the header area via CSS variables:
  * ```css
  * ymt-pane {
@@ -107,11 +122,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  *
  */
 class YmtPaneComponent {
-    // paneHeader = contentChild(YmtPaneHeaderComponent);
-    // paneBody = contentChild(YmtPaneBodyComponent);
-    paneAside = contentChild(YmtPaneAsideComponent);
     /**
-     * TemplateRef for actions area in the top bar.
+     * TemplateRef for actions area in the top bar. These actions will be placed at the end of
+     * the top bar.
+     *
      * ```html
      * <ymt-pane title="My Pane" subTitle="Pane Subtitle" [topBarActions]="topBarActions"></ymt-pane>
      * <ng-template #topBarActions>
@@ -122,46 +136,61 @@ class YmtPaneComponent {
      */
     topBarActions = input();
     /**
-     * Whether to show the top bar (default: true)
+     * 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
+     * structure. This is useful when you want to use the pane inside another container
+     * and want to apply custom styles to the pane.
      */
-    topBar = input(true);
+    plain = input(false);
     /**
-     * Position of the pane toggle button (default: 'none')
-     * Set to 'none' the pane toggle button in the top bar is hidden.
+     * 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.
      */
-    paneToggle = input('none');
+    mode = input(undefined);
+    modeAlign = input('start');
     /**
-     * Event emitted when the pane toggle button is clicked.
+     * 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);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: YmtPaneComponent, isStandalone: true, selector: "ymt-pane", inputs: { topBarActions: { classPropertyName: "topBarActions", publicName: "topBarActions", isSignal: true, isRequired: false, transformFunction: null }, topBar: { classPropertyName: "topBar", publicName: "topBar", isSignal: true, isRequired: false, transformFunction: null }, paneToggle: { classPropertyName: "paneToggle", publicName: "paneToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paneToggled: "paneToggled" }, host: { properties: { "class.collapsed": "collapsed()" } }, queries: [{ propertyName: "paneAside", first: true, predicate: YmtPaneAsideComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (topBar()) {\n  <ymt-pane-top-bar [actions]=\"topBarActions()\" [paneToggle]=\"paneToggle()\" \n  (paneToggled)=\"togglePane($event)\"></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, var(--ymt-spacing-xl));background-color:var(--ymt-surface);color:var(--ymt-on-surface);border:1px solid var(--ymt-outline-variant);display:grid;grid-template-rows:auto auto 1fr;grid-template-columns:1fr;grid-template-areas:\"top-bar\" \"header\" \"main\";height:100%;border-radius:var(--ymt-corner-m)}: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 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 ymt-pane-body{grid-area:main;overflow:hidden;padding:var(--_main-area-padding)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: YmtPaneTopBarComponent, selector: "ymt-pane-top-bar", inputs: ["actions", "paneToggle"], outputs: ["paneToggled"] }, { kind: "ngmodule", type: MatIconModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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, var(--ymt-spacing-xl));--_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;grid-template-columns:1fr;grid-template-areas:\"top-bar\" \"header\" \"main\";height:100%}: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 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 ymt-pane-body{grid-area:main;overflow:hidden;padding:var(--_main-area-padding)}\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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ymt-pane', imports: [CommonModule, YmtPaneTopBarComponent, MatIconModule], host: {
-                        '[class.collapsed]': 'collapsed()'
-                    }, template: "@if (topBar()) {\n  <ymt-pane-top-bar [actions]=\"topBarActions()\" [paneToggle]=\"paneToggle()\" \n  (paneToggled)=\"togglePane($event)\"></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, var(--ymt-spacing-xl));background-color:var(--ymt-surface);color:var(--ymt-on-surface);border:1px solid var(--ymt-outline-variant);display:grid;grid-template-rows:auto auto 1fr;grid-template-columns:1fr;grid-template-areas:\"top-bar\" \"header\" \"main\";height:100%;border-radius:var(--ymt-corner-m)}: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 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 ymt-pane-body{grid-area:main;overflow:hidden;padding:var(--_main-area-padding)}\n"] }]
+                        '[class.collapsed]': 'collapsed()',
+                        '[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, var(--ymt-spacing-xl));--_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;grid-template-columns:1fr;grid-template-areas:\"top-bar\" \"header\" \"main\";height:100%}: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 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 ymt-pane-body{grid-area:main;overflow:hidden;padding:var(--_main-area-padding)}\n"] }]
         }] });
 
-class YmtPaneBodyComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: YmtPaneBodyComponent, isStandalone: true, selector: "ymt-pane-body", ngImport: i0, template: "!<ng-content></ng-content>!\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+class YmtPaneFooterComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: YmtPaneFooterComponent, isStandalone: true, selector: "ymt-pane-footer", ngImport: i0, template: "<footer><ng-content></ng-content></footer>\n", styles: [":host footer{padding:var(--ymt-spacing-m) var(--ymt-spacing-xl);border-block-start:1px solid var(--ymt-outline-variant);background-color:var(--ymt-surface-variant);display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ymt-pane-body', imports: [CommonModule], template: "!<ng-content></ng-content>!\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ymt-pane-footer', imports: [CommonModule], template: "<footer><ng-content></ng-content></footer>\n", styles: [":host footer{padding:var(--ymt-spacing-m) var(--ymt-spacing-xl);border-block-start:1px solid var(--ymt-outline-variant);background-color:var(--ymt-surface-variant);display:flex;justify-content:flex-end}\n"] }]
         }] });
 
-const cmp = [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneTopBarComponent, YmtPaneBodyComponent, YmtPaneAsideComponent];
+const cmp = [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneBodyComponent, YmtPaneFooterComponent, YmtPaneAsideComponent];
 class YmtPanesModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPanesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: YmtPanesModule, imports: [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneTopBarComponent, YmtPaneBodyComponent, YmtPaneAsideComponent], exports: [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneTopBarComponent, YmtPaneBodyComponent, YmtPaneAsideComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: YmtPanesModule, imports: [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneBodyComponent, YmtPaneFooterComponent, YmtPaneAsideComponent], exports: [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneBodyComponent, YmtPaneFooterComponent, YmtPaneAsideComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPanesModule, imports: [cmp] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPanesModule, decorators: [{
@@ -176,5 +205,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { YmtPaneAsideComponent, YmtPaneBodyComponent, YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneTopBarComponent, YmtPanesModule };
+export { YmtPaneAsideComponent, YmtPaneBodyComponent, YmtPaneComponent, YmtPaneFooterComponent, YmtPaneHeaderComponent, YmtPanesModule };
 //# sourceMappingURL=yuuvis-material-panes.mjs.map