npm - @yuuvis/material - Versions diffs - 2.3.19 → 2.3.20 - Mend

@yuuvis/material 2.3.19 → 2.3.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/fesm2022/yuuvis-material-layout.mjs +2 -2
package/fesm2022/yuuvis-material-layout.mjs.map +1 -1
package/fesm2022/yuuvis-material-panes.mjs +11 -5
package/fesm2022/yuuvis-material-panes.mjs.map +1 -1
package/package.json +1 -1
package/panes/lib/pane/pane-header/pane-header.component.d.ts +7 -1

package/fesm2022/yuuvis-material-layout.mjs CHANGED Viewed

@@ -211,11 +211,11 @@ class MasterDetailsLayoutComponent {
         }
     }
     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    @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        [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        [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}.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"] }] });
+    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    @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        [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        [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"] }] });
 }
 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    @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        [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        [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}.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], 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    @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        [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        [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"] }]
         }] });
 const cmp = [MasterDetailsLayoutComponent, YmtLayoutPaneDirective];

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

	@@ -1 +1 @@
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 @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 [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 [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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"}
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 @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 [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 [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":";;;;;;;;;;;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,k3EA4DA,srEDhDY,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,k3EAAA,EAAA,MAAA,EAAA,CAAA,+nEAAA,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 CHANGED Viewed

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Component, input, output, signal, effect, NgModule } from '@angular/core';
+import { Component, input, contentChild, 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 * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { YmtIconButtonDirective } from '@yuuvis/material';
@@ -29,6 +29,10 @@ class YmtPaneHeaderComponent {
      * Title of the pane
      */
     title = input();
+    /**
+     * Icon of the pane
+     */
+    icon = input();
     /**
      * Subtitle of the pane
      */
@@ -37,12 +41,14 @@ class YmtPaneHeaderComponent {
      * TemplateRef for actions area in the pane header.
      */
     actions = input();
+    titleSlot = contentChild('yuvPaneHeaderTitle');
+    subtitleSlot = contentChild('yuvPaneHeaderSubtitle');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: YmtPaneHeaderComponent, isStandalone: true, selector: "ymt-pane-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: " <header>\n    <h2>{{ title() }}</h2>\n    <small>{{ subtitle() }}</small>\n    @let a = actions();\n    @if (a) {\n      <div class=\"actions\">\n        <ng-container *ngTemplateOutlet=\"a\"></ng-container>\n      </div>\n    }\n  </header>", 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)}:host header{display:grid;align-items:center;grid-template-columns:var(--_header-padding) 1fr auto;grid-template-rows:var(--_header-padding) auto auto var(--_header-padding);grid-template-areas:\". . actions\" \". title actions\" \". subtitle actions\" \". . actions\";flex:0 0 auto;background-color:var(--_header-background);border-block-end:1px solid var(--_header-border-color)}: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-subhead);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"], dependencies: [{ 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: YmtPaneHeaderComponent, isStandalone: true, selector: "ymt-pane-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "titleSlot", first: true, predicate: ["yuvPaneHeaderTitle"], descendants: true, isSignal: true }, { propertyName: "subtitleSlot", first: true, predicate: ["yuvPaneHeaderSubtitle"], descendants: true, isSignal: true }], ngImport: i0, 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-small-font);font-weight:var(--ymt-font-title-small-weight);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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ymt-pane-header', imports: [CommonModule], template: " <header>\n    <h2>{{ title() }}</h2>\n    <small>{{ subtitle() }}</small>\n    @let a = actions();\n    @if (a) {\n      <div class=\"actions\">\n        <ng-container *ngTemplateOutlet=\"a\"></ng-container>\n      </div>\n    }\n  </header>", 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)}:host header{display:grid;align-items:center;grid-template-columns:var(--_header-padding) 1fr auto;grid-template-rows:var(--_header-padding) auto auto var(--_header-padding);grid-template-areas:\". . actions\" \". title actions\" \". subtitle actions\" \". . actions\";flex:0 0 auto;background-color:var(--_header-background);border-block-end:1px solid var(--_header-border-color)}: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-subhead);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"] }]
+            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-small-font);font-weight:var(--ymt-font-title-small-weight);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"] }]
         }] });
 class YmtPaneTopBarComponent {
@@ -68,7 +74,7 @@ class YmtPaneTopBarComponent {
         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 }, 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"] }] });
+    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: 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneTopBarComponent, decorators: [{
             type: Component,

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

	@@ -1 +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, input, TemplateRef } from '@angular/core';\n\n@Component({\n selector: 'ymt-pane-header',\n imports: [CommonModule],\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 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"," <header>\n <h2>{{ title() }}</h2>\n <small>{{ subtitle() }}</small>\n @let a = actions();\n @if (a) {\n <div class=\"actions\">\n <ng-container ngTemplateOutlet=\"a\"></ng-container>\n </div>\n }\n </header>","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 [header]=\"false\">\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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"}
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@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 [header]=\"false\">\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":";;;;;;;;MASa,qBAAqB,CAAA;wGAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTlC,4BACA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDIY,YAAY,EAAA,CAAA,EAAA,CAAA;;4FAIX,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBANjC,SAAS;+BACE,gBAAgB,EAAA,OAAA,EACjB,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,4BAAA,EAAA;;;MEIZ,oBAAoB,CAAA;wGAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTjC,6BACA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDIY,YAAY,EAAA,CAAA,EAAA,CAAA;;4FAIX,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBANhC,SAAS;+BACE,eAAe,EAAA,OAAA,EAChB,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA;;;MEKZ,sBAAsB,CAAA;AACjC;;AAEG;IACH,KAAK,GAAG,KAAK,EAAU;AACvB;;AAEG;IACH,IAAI,GAAG,KAAK,EAAU;AACtB;;AAEG;IACH,QAAQ,GAAG,KAAK,EAAU;AAC1B;;AAEG;IACH,OAAO,GAAG,KAAK,EAAoB;AAEnC,IAAA,SAAS,GAAG,YAAY,CAAmB,oBAAoB,CAAC;AAChE,IAAA,YAAY,GAAG,YAAY,CAAmB,uBAAuB,CAAC;wGAnB3D,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,sBAAsB,ECVnC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,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,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,uBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,wnBA6BA,EDvBY,MAAA,EAAA,CAAA,g9CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,qMAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FAI1B,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBANlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAClB,OAAA,EAAA,CAAC,YAAY,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,wnBAAA,EAAA,MAAA,EAAA,CAAA,g9CAAA,CAAA,EAAA;;;MES3B,sBAAsB,CAAA;AACjC;;AAEG;IACH,OAAO,GAAG,KAAK,EAAoB;AACnC,IAAA,SAAS,GAAG,KAAK,CAAkB,OAAO,CAAC;AAE3C,IAAA,IAAI,GAAG,KAAK,CAAsC,SAAS,CAAC;AAE5D;;AAEG;IACH,WAAW,GAAG,MAAM,EAAW;IAC/B,iBAAiB,GAAG,MAAM,EAAW;AAErC,IAAA,aAAa,GAAG,MAAM,CAAU,KAAK,CAAC;AACtC,IAAA,oBAAoB,GAAG,MAAM,CAAC,MAAK;QACjC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;AAC7C,KAAC,CAAC;IAEF,UAAU,GAAA;QACR,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;;IAG/C,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;;wGAzBxB,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,sBAAsB,gpBCfnC,ypBAiBQ,EAAA,MAAA,EAAA,CAAA,wfAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDVI,sBAAsB,EAAE,QAAA,EAAA,mFAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,eAAA,EAAA,eAAA,EAAA,qBAAA,EAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,aAAa,mLAAE,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FAQlD,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAVlC,SAAS;+BACE,kBAAkB,EAAA,OAAA,EACnB,CAAC,sBAAsB,EAAE,aAAa,EAAE,YAAY,CAAC,EAGxD,IAAA,EAAA;AACJ,wBAAA,iBAAiB,EAAE,uBAAuB;AAC1C,wBAAA,kBAAkB,EAAE;AACrB,qBAAA,EAAA,QAAA,EAAA,ypBAAA,EAAA,MAAA,EAAA,CAAA,wfAAA,CAAA,EAAA;;;AEPH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CG;MAWU,gBAAgB,CAAA;AAC3B;;;;;;;;;;;AAWG;IACH,aAAa,GAAG,KAAK,EAAoB;AAEzC;;;;;AAKG;AACH,IAAA,KAAK,GAAG,KAAK,CAAU,KAAK,CAAC;AAE7B;;;;AAIG;AACH,IAAA,IAAI,GAAG,KAAK,CAAsC,SAAS,CAAC;AAE5D,IAAA,SAAS,GAAG,KAAK,CAAkB,OAAO,CAAC;AAC3C;;;AAGG;IACH,WAAW,GAAG,MAAM,EAAW;AAE/B;;;AAGG;IACH,iBAAiB,GAAG,MAAM,EAAW;AAErC;;AAEG;AACH,IAAA,SAAS,GAAG,MAAM,CAAU,KAAK,CAAC;AAElC,IAAA,UAAU,CAAC,SAAkB,EAAA;AAC3B,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC;AAC7B,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;;wGAlDvB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,wvBC3D7B,oVAWA,EAAA,MAAA,EAAA,CAAA,00CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDwCY,YAAY,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,sBAAsB,qJAAE,aAAa,EAAA,CAAA,EAAA,CAAA;;4FAQlD,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAV5B,SAAS;+BACE,UAAU,EAAA,OAAA,EACX,CAAC,YAAY,EAAE,sBAAsB,EAAE,aAAa,CAAC,EAGxD,IAAA,EAAA;AACJ,wBAAA,mBAAmB,EAAE,aAAa;AAClC,wBAAA,eAAe,EAAE;AAClB,qBAAA,EAAA,QAAA,EAAA,oVAAA,EAAA,MAAA,EAAA,CAAA,00CAAA,CAAA,EAAA;;;MEhDU,sBAAsB,CAAA;wGAAtB,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,QAAA,EAAA,EAAA,EAAA,QAAA,ECTnC,8CACA,EAAA,MAAA,EAAA,CAAA,8MAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDIY,YAAY,EAAA,CAAA,EAAA,CAAA;;4FAIX,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBANlC,SAAS;+BACE,iBAAiB,EAAA,OAAA,EAClB,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,8CAAA,EAAA,MAAA,EAAA,CAAA,8MAAA,CAAA,EAAA;;;AEEzB,MAAM,GAAG,GAAG,CAAC,gBAAgB,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,qBAAqB,CAAC;MAM9G,cAAc,CAAA;wGAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,YANd,gBAAgB,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,qBAAqB,CAA7G,EAAA,OAAA,EAAA,CAAA,gBAAgB,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,qBAAqB,CAAA,EAAA,CAAA;AAM7G,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,YAHhB,GAAG,CAAA,EAAA,CAAA;;4FAGD,cAAc,EAAA,UAAA,EAAA,CAAA;kBAJ1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,GAAG;AACZ,oBAAA,OAAO,EAAE;AACV,iBAAA;;;ACZD;;AAEG;;;;"}

package/package.json CHANGED Viewed

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

package/panes/lib/pane/pane-header/pane-header.component.d.ts CHANGED Viewed

@@ -5,6 +5,10 @@ export declare class YmtPaneHeaderComponent {
      * Title of the pane
      */
     title: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * Icon of the pane
+     */
+    icon: import("@angular/core").InputSignal<string | undefined>;
     /**
      * Subtitle of the pane
      */
@@ -13,6 +17,8 @@ export declare class YmtPaneHeaderComponent {
      * TemplateRef for actions area in the pane header.
      */
     actions: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    titleSlot: import("@angular/core").Signal<TemplateRef<any> | undefined>;
+    subtitleSlot: import("@angular/core").Signal<TemplateRef<any> | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<YmtPaneHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<YmtPaneHeaderComponent, "ymt-pane-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<YmtPaneHeaderComponent, "ymt-pane-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; }, {}, ["titleSlot", "subtitleSlot"], never, true, never>;
 }