@yuuvis/material 2.11.3 → 2.11.4

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.
@@ -1,14 +1,58 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, TemplateRef, input, signal, Directive, Injectable, ElementRef, DestroyRef, contentChildren, computed, untracked, viewChild, effect, model, Component, NgModule } from '@angular/core';
2
+ import { inject, ElementRef, input, effect, Directive, TemplateRef, signal, Injectable, DestroyRef, contentChildren, computed, untracked, viewChild, model, Component, NgModule } from '@angular/core';
3
3
  import * as i1 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
- import * as i2 from 'angular-split';
6
- import { AngularSplitModule } from 'angular-split';
7
- import * as i3 from '@yuuvis/material/panes';
8
- import { YmtPanesModule } from '@yuuvis/material/panes';
9
5
  import { MatDialog } from '@angular/material/dialog';
10
- import { DeviceService } from '@yuuvis/material';
11
6
  import { Router } from '@angular/router';
7
+ import { DeviceService } from '@yuuvis/material';
8
+ import * as i3 from '@yuuvis/material/panes';
9
+ import { YmtPanesModule } from '@yuuvis/material/panes';
10
+ import * as i2 from 'angular-split';
11
+ import { AngularSplitModule } from 'angular-split';
12
+
13
+ /**
14
+ * TODO: This directive is currently used in the MasterDetailsLayoutComponent to add a cover element during dragging of the split area,
15
+ * to prevent iframes in the panes from capturing the drag events.
16
+ * However, this directive is very generic and can be used in any component that needs to add a cover element during dragging.
17
+ * Therefore, it should be moved to @yuuvis/client-components and then replaced with the SplitAreaCoverDirective from the client-framework/split-view library.
18
+ */
19
+ class AreaCoverDirective {
20
+ #elRef = inject(ElementRef);
21
+ yuvSplitAreaCover = input(false);
22
+ #draggingEffect = effect(() => {
23
+ this.#toggleCover(this.yuvSplitAreaCover());
24
+ });
25
+ #coverElement;
26
+ #toggleCover(active) {
27
+ const el = this.#elRef.nativeElement;
28
+ if (this.#coverElement) {
29
+ el.style.position = 'initial';
30
+ this.#coverElement.remove();
31
+ this.#coverElement = undefined;
32
+ }
33
+ if (active) {
34
+ el.style.position = 'relative';
35
+ this.#coverElement = this.#createCoverElement();
36
+ el.append(this.#coverElement);
37
+ }
38
+ }
39
+ #createCoverElement() {
40
+ const coverElement = document.createElement('div');
41
+ coverElement.classList.add('yuv-split-area-cover');
42
+ coverElement.style.position = 'absolute';
43
+ coverElement.style.zIndex = '500';
44
+ coverElement.style.inset = '0';
45
+ return coverElement;
46
+ }
47
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AreaCoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
48
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: AreaCoverDirective, isStandalone: true, selector: "[yuvSplitAreaCover]", inputs: { yuvSplitAreaCover: { classPropertyName: "yuvSplitAreaCover", publicName: "yuvSplitAreaCover", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
49
+ }
50
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AreaCoverDirective, decorators: [{
51
+ type: Directive,
52
+ args: [{
53
+ selector: '[yuvSplitAreaCover]'
54
+ }]
55
+ }] });
12
56
 
13
57
  /**
14
58
  * Directive to mark a layout pane.
@@ -91,6 +135,7 @@ class MasterDetailsLayoutComponent {
91
135
  #router = inject(Router);
92
136
  #dRef = inject(DestroyRef);
93
137
  #DEFAULT_GUTTER_SIZE_PX = 16;
138
+ isDragging = signal(false);
94
139
  panes = contentChildren(YmtLayoutPaneDirective);
95
140
  _panes = computed(() => {
96
141
  const _panes = this.panes();
@@ -149,7 +194,7 @@ class MasterDetailsLayoutComponent {
149
194
  width: '100vw',
150
195
  height: '100vh',
151
196
  maxWidth: '100vw',
152
- panelClass: 'ymt-dialog-fullscreen',
197
+ panelClass: 'ymt-dialog-fullscreen'
153
198
  });
154
199
  this.#detailsPaneDialogRef.afterClosed().subscribe((silent) => {
155
200
  if (!silent) {
@@ -171,8 +216,12 @@ class MasterDetailsLayoutComponent {
171
216
  this.detailsActive.set(false);
172
217
  });
173
218
  });
219
+ onDragStart(e) {
220
+ this.isDragging.set(true);
221
+ }
174
222
  onDragEnd(e) {
175
223
  this.#updateLayoutSettings(e.sizes);
224
+ this.isDragging.set(false);
176
225
  }
177
226
  #updateLayoutSettings(sizes) {
178
227
  const layoutSettings = {
@@ -214,11 +263,11 @@ class MasterDetailsLayoutComponent {
214
263
  }
215
264
  }
216
265
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MasterDetailsLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
217
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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"] }] });
266
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MasterDetailsLayoutComponent, isStandalone: true, selector: "ymt-master-details-layout", inputs: { layoutSettingsID: { classPropertyName: "layoutSettingsID", publicName: "layoutSettingsID", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, detailsActive: { classPropertyName: "detailsActive", publicName: "detailsActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { detailsActive: "detailsActiveChange" }, queries: [{ propertyName: "panes", predicate: YmtLayoutPaneDirective, isSignal: true }], viewQueries: [{ propertyName: "detailsPaneTemplateRef", first: true, predicate: ["tplDetailsPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "@let mp = _panes().master;\n@let dp = _panes().details;\n@if (!smallScreenLayout()) {\n <as-split\n [direction]=\"direction()\"\n [unit]=\"'percent'\"\n [gutterSize]=\"_gutterSize()\"\n [gutterStep]=\"1\"\n [useTransition]=\"false\"\n (dragStart)=\"onDragStart($event)\"\n (dragEnd)=\"onDragEnd($event)\"\n >\n @if (gutterSize() === 1) {\n <div *asSplitGutter=\"let isDragged = isDragged\" class=\"shade-gutter\" [class.dragged]=\"isDragged\">\n <div class=\"shade-gutter-icon\" [class.vertical]=\"direction() === 'vertical'\" [class.horizontal]=\"direction() === 'horizontal'\"></div>\n </div>\n } @else {\n <div *asSplitGutter class=\"split-gutter\">\n <div\n asSplitGutterDragHandle\n class=\"split-gutter-handle\"\n [class.vertical]=\"direction() === 'vertical'\"\n [class.horizontal]=\"direction() === 'horizontal'\"\n ></div>\n </div>\n }\n\n <!-- master pane -->\n @if (mp) {\n <as-split-area\n [yuvSplitAreaCover]=\"isDragging()\"\n [maxSize]=\"mp.areaProperties().maxSize\"\n [minSize]=\"mp.areaProperties().minSize\"\n [lockSize]=\"mp.areaProperties().lockSize\"\n [size]=\"mp.areaProperties().size\"\n [visible]=\"mp.areaProperties().visible\"\n >\n <ymt-pane [topBarActions]=\"mp.topBarActions()\" [plain]=\"!!options().plainMode\">\n <ng-template [ngTemplateOutlet]=\"mp.template\"></ng-template>\n </ymt-pane>\n </as-split-area>\n }\n <!-- details pane -->\n @if (dp) {\n <as-split-area\n [yuvSplitAreaCover]=\"isDragging()\"\n [maxSize]=\"dp.areaProperties().maxSize\"\n [minSize]=\"dp.areaProperties().minSize\"\n [lockSize]=\"dp.areaProperties().lockSize\"\n [size]=\"dp.areaProperties().size\"\n [visible]=\"dp.areaProperties().visible\"\n >\n <ymt-pane [topBarActions]=\"dp.topBarActions()\" [plain]=\"!!options().plainMode\">\n <ng-template [ngTemplateOutlet]=\"dp.template\"></ng-template>\n </ymt-pane>\n </as-split-area>\n }\n </as-split>\n} @else {\n <ymt-pane [topBarActions]=\"mp.topBarActions()\">\n <ng-template [ngTemplateOutlet]=\"mp.template\"></ng-template>\n </ymt-pane>\n}\n\n<ng-template #tplDetailsPanel>\n <ymt-pane class=\"fullscreen\" [topBarActions]=\"dp.topBarActions()\" [mode]=\"'navigation'\" (navigationClicked)=\"detailsActive.set(false)\">\n <ng-template [ngTemplateOutlet]=\"dp.template\"></ng-template>\n </ymt-pane>\n</ng-template>\n", styles: [":host{--_split-gutter-background-color: var(--split-gutter-background-color, transparent);--_split-gutter-handle-border-radius: var(--split-gutter-handle-border-radius, 2px);--_split-gutter-handle-width: var(--split-gutter-handle-width, 2px);--_split-gutter-handle-height: var(--split-gutter-handle-height, var(--ymt-spacing-3xl));--_split-gutter-shade-background: var(--split-gutter-shade-background, var(--ymt-outline-variant));--_split-gutter-shade-hover-background: var(--split-gutter-shade-hover-background, currentColor);--_split-gutter-shade-size: var(--split-gutter-shade-size, 16px);overflow:hidden}:host ymt-pane{display:block}:host as-split{--as-gutter-background-color: var(--_split-gutter-background-color)}:host .split-gutter{width:100%;height:100%}:host .split-gutter .split-gutter-handle{width:100%;height:100%;display:flex;align-items:center;justify-content:center}:host .split-gutter .split-gutter-handle:after{content:\"\";transition:background-color .3s ease-in-out;background-color:rgb(from var(--ymt-text-color) r g b/.2);display:block;width:var(--_split-gutter-handle-width);height:var(--_split-gutter-handle-height);border-radius:var(--_split-gutter-handle-border-radius)}:host .split-gutter .split-gutter-handle.vertical:after{width:var(--_split-gutter-handle-height);height:var(--_split-gutter-handle-width)}:host .split-gutter:hover .split-gutter-handle:after{background-color:rgb(from var(--ymt-text-color) r g b/.9)}:host .shade-gutter{width:100%;height:100%;background-color:var(--_split-gutter-shade-background);position:relative}:host .shade-gutter-icon{height:100%;width:100%;background-color:var(--_split-gutter-shade-hover-background);transition:opacity .3s;opacity:0;position:absolute;z-index:500}.dragged :host .shade-gutter-icon,:host .shade-gutter-icon:hover{opacity:.1}:host .shade-gutter-icon.horizontal{width:calc(var(--_split-gutter-shade-size) + 1px);inset-inline-start:calc(var(--_split-gutter-shade-size) / -2);inset-inline-end:var(--_split-gutter-shade-size)}:host .shade-gutter-icon.vertical{height:calc(var(--_split-gutter-shade-size) + 1px);inset-block-start:calc(var(--_split-gutter-shade-size) / -2);inset-block-end:var(--_split-gutter-shade-size)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AngularSplitModule }, { kind: "component", type: i2.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i2.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i2.SplitGutterDirective, selector: "[asSplitGutter]" }, { kind: "directive", type: i2.SplitGutterDragHandleDirective, selector: "[asSplitGutterDragHandle]" }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i3.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "plain", "mode", "modeAlign"], outputs: ["paneToggled", "navigationClicked"] }, { kind: "directive", type: AreaCoverDirective, selector: "[yuvSplitAreaCover]", inputs: ["yuvSplitAreaCover"] }] });
218
267
  }
219
268
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MasterDetailsLayoutComponent, decorators: [{
220
269
  type: Component,
221
- 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"] }]
270
+ args: [{ selector: 'ymt-master-details-layout', imports: [CommonModule, AngularSplitModule, YmtPanesModule, AreaCoverDirective], template: "@let mp = _panes().master;\n@let dp = _panes().details;\n@if (!smallScreenLayout()) {\n <as-split\n [direction]=\"direction()\"\n [unit]=\"'percent'\"\n [gutterSize]=\"_gutterSize()\"\n [gutterStep]=\"1\"\n [useTransition]=\"false\"\n (dragStart)=\"onDragStart($event)\"\n (dragEnd)=\"onDragEnd($event)\"\n >\n @if (gutterSize() === 1) {\n <div *asSplitGutter=\"let isDragged = isDragged\" class=\"shade-gutter\" [class.dragged]=\"isDragged\">\n <div class=\"shade-gutter-icon\" [class.vertical]=\"direction() === 'vertical'\" [class.horizontal]=\"direction() === 'horizontal'\"></div>\n </div>\n } @else {\n <div *asSplitGutter class=\"split-gutter\">\n <div\n asSplitGutterDragHandle\n class=\"split-gutter-handle\"\n [class.vertical]=\"direction() === 'vertical'\"\n [class.horizontal]=\"direction() === 'horizontal'\"\n ></div>\n </div>\n }\n\n <!-- master pane -->\n @if (mp) {\n <as-split-area\n [yuvSplitAreaCover]=\"isDragging()\"\n [maxSize]=\"mp.areaProperties().maxSize\"\n [minSize]=\"mp.areaProperties().minSize\"\n [lockSize]=\"mp.areaProperties().lockSize\"\n [size]=\"mp.areaProperties().size\"\n [visible]=\"mp.areaProperties().visible\"\n >\n <ymt-pane [topBarActions]=\"mp.topBarActions()\" [plain]=\"!!options().plainMode\">\n <ng-template [ngTemplateOutlet]=\"mp.template\"></ng-template>\n </ymt-pane>\n </as-split-area>\n }\n <!-- details pane -->\n @if (dp) {\n <as-split-area\n [yuvSplitAreaCover]=\"isDragging()\"\n [maxSize]=\"dp.areaProperties().maxSize\"\n [minSize]=\"dp.areaProperties().minSize\"\n [lockSize]=\"dp.areaProperties().lockSize\"\n [size]=\"dp.areaProperties().size\"\n [visible]=\"dp.areaProperties().visible\"\n >\n <ymt-pane [topBarActions]=\"dp.topBarActions()\" [plain]=\"!!options().plainMode\">\n <ng-template [ngTemplateOutlet]=\"dp.template\"></ng-template>\n </ymt-pane>\n </as-split-area>\n }\n </as-split>\n} @else {\n <ymt-pane [topBarActions]=\"mp.topBarActions()\">\n <ng-template [ngTemplateOutlet]=\"mp.template\"></ng-template>\n </ymt-pane>\n}\n\n<ng-template #tplDetailsPanel>\n <ymt-pane class=\"fullscreen\" [topBarActions]=\"dp.topBarActions()\" [mode]=\"'navigation'\" (navigationClicked)=\"detailsActive.set(false)\">\n <ng-template [ngTemplateOutlet]=\"dp.template\"></ng-template>\n </ymt-pane>\n</ng-template>\n", styles: [":host{--_split-gutter-background-color: var(--split-gutter-background-color, transparent);--_split-gutter-handle-border-radius: var(--split-gutter-handle-border-radius, 2px);--_split-gutter-handle-width: var(--split-gutter-handle-width, 2px);--_split-gutter-handle-height: var(--split-gutter-handle-height, var(--ymt-spacing-3xl));--_split-gutter-shade-background: var(--split-gutter-shade-background, var(--ymt-outline-variant));--_split-gutter-shade-hover-background: var(--split-gutter-shade-hover-background, currentColor);--_split-gutter-shade-size: var(--split-gutter-shade-size, 16px);overflow:hidden}:host ymt-pane{display:block}: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"] }]
222
271
  }] });
223
272
 
224
273
  const cmp = [MasterDetailsLayoutComponent, YmtLayoutPaneDirective];
@@ -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 {\n Component,\n computed,\n contentChildren,\n DestroyRef,\n effect,\n ElementRef,\n inject,\n input,\n model,\n signal,\n TemplateRef,\n untracked,\n viewChild\n} from '@angular/core';\nimport { 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';\nimport { NavigationEnd, NavigationStart, Router, UrlSegmentGroup, UrlTree } from '@angular/router';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { filter, Subscription } from 'rxjs';\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 #router = inject(Router);\n #dRef = inject(DestroyRef);\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 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/area-cover.directive.ts","../../../../../libs/yuuvis/material/layout/src/lib/directives/layout-pane.directive.ts","../../../../../libs/yuuvis/material/layout/src/lib/services/layout.service.ts","../../../../../libs/yuuvis/material/layout/src/lib/components/master-details-layout/master-details-layout.component.ts","../../../../../libs/yuuvis/material/layout/src/lib/components/master-details-layout/master-details-layout.component.html","../../../../../libs/yuuvis/material/layout/src/lib/layout.module.ts","../../../../../libs/yuuvis/material/layout/src/yuuvis-material-layout.ts"],"sourcesContent":["import { Directive, effect, ElementRef, inject, input } from '@angular/core';\n\n/**\n * TODO: This directive is currently used in the MasterDetailsLayoutComponent to add a cover element during dragging of the split area,\n * to prevent iframes in the panes from capturing the drag events.\n * However, this directive is very generic and can be used in any component that needs to add a cover element during dragging.\n * Therefore, it should be moved to @yuuvis/client-components and then replaced with the SplitAreaCoverDirective from the client-framework/split-view library.\n */\n@Directive({\n selector: '[yuvSplitAreaCover]'\n})\nexport class AreaCoverDirective {\n #elRef = inject(ElementRef);\n\n yuvSplitAreaCover = input<boolean>(false);\n #draggingEffect = effect(() => {\n this.#toggleCover(this.yuvSplitAreaCover());\n });\n\n #coverElement?: HTMLElement;\n\n #toggleCover(active: boolean) {\n const el: HTMLElement = this.#elRef.nativeElement as HTMLElement;\n\n if (this.#coverElement) {\n el.style.position = 'initial';\n this.#coverElement.remove();\n this.#coverElement = undefined;\n }\n if (active) {\n el.style.position = 'relative';\n this.#coverElement = this.#createCoverElement();\n el.append(this.#coverElement);\n }\n }\n\n #createCoverElement(): HTMLElement {\n const coverElement = document.createElement('div');\n coverElement.classList.add('yuv-split-area-cover');\n coverElement.style.position = 'absolute';\n coverElement.style.zIndex = '500';\n coverElement.style.inset = '0';\n return coverElement;\n }\n}\n","import { Directive, inject, input, signal, TemplateRef } from '@angular/core';\nimport { LayoutPaneRole, PaneLayoutSettings } from '../layout.interface';\n\n/**\n * Directive to mark a layout pane.\n */\n@Directive({\n selector: '[ymtLayoutPane]'\n})\nexport class YmtLayoutPaneDirective {\n template = inject(TemplateRef<any>);\n // Role the pane takes in the layout\n role = input.required<LayoutPaneRole>();\n // template holding the actions shown in the top bar of the pane\n topBarActions = input<TemplateRef<any>>();\n\n updateSettings(s: PaneLayoutSettings) {\n this.areaProperties.set({ ...this.areaProperties(), ...s });\n }\n\n areaProperties = signal<PaneLayoutSettings>({ visible: true });\n}\n","import { Injectable } from '@angular/core';\n\n/**\n * Service to store and retrieve layout settings. Those\n * settings are stored on the users device because in\n * general layout settings like panel widths are highly\n * dependent on the current device.\n */\n@Injectable({\n providedIn: 'root'\n})\nexport class LayoutService {\n #STORAGE_PREFIX = 'ymt.layout:';\n\n DEFAULT_SPLIT_VIEW_GUTTER_SIZE = 16;\n\n saveSettings(key: string, settings: unknown): boolean {\n if (typeof settings === 'object') {\n localStorage.setItem(this.#getKey(key), JSON.stringify(settings));\n return true;\n } else return false;\n }\n\n getSettings(key: string): unknown | undefined {\n try {\n const v = localStorage.getItem(this.#getKey(key));\n return v ? JSON.parse(v) : undefined;\n } catch (e) {\n console.error('Error while parsing layout settings', e);\n return undefined;\n }\n }\n\n #getKey(key: string) {\n return `${this.#STORAGE_PREFIX}${key}`;\n }\n\n /**\n * Clears all layout settings.\n */\n clearSettings(): void {\n Object.keys(localStorage).forEach((key) => {\n if (key.startsWith(this.#STORAGE_PREFIX)) {\n localStorage.removeItem(key);\n }\n });\n }\n}\n","import { CommonModule } from '@angular/common';\nimport {\n Component,\n computed,\n contentChildren,\n DestroyRef,\n effect,\n ElementRef,\n inject,\n input,\n model,\n signal,\n TemplateRef,\n untracked,\n viewChild\n} from '@angular/core';\nimport { MatDialog, MatDialogRef } from '@angular/material/dialog';\nimport { Router } from '@angular/router';\nimport { DeviceService } from '@yuuvis/material';\nimport { YmtPanesModule } from '@yuuvis/material/panes';\nimport { AngularSplitModule, SplitAreaSize, SplitDirection } from 'angular-split';\nimport { AreaCoverDirective } from '../../directives/area-cover.directive';\nimport { YmtLayoutPaneDirective } from '../../directives/layout-pane.directive';\nimport { LayoutOutputData, LayoutSettings, MasterDetailsPaneLayoutOptions, PaneLayoutSettings } from '../../layout.interface';\nimport { LayoutService } from '../../services/layout.service';\n\n@Component({\n selector: 'ymt-master-details-layout',\n imports: [CommonModule, AngularSplitModule, YmtPanesModule, AreaCoverDirective],\n templateUrl: './master-details-layout.component.html',\n styleUrl: './master-details-layout.component.scss'\n})\nexport class MasterDetailsLayoutComponent {\n #elRef = inject(ElementRef);\n #layoutService = inject(LayoutService);\n #dialog = inject(MatDialog);\n #device = inject(DeviceService);\n #router = inject(Router);\n #dRef = inject(DestroyRef);\n\n #DEFAULT_GUTTER_SIZE_PX = 16;\n\n isDragging = signal(false);\n\n panes = contentChildren<YmtLayoutPaneDirective>(YmtLayoutPaneDirective);\n _panes = computed<{\n master: YmtLayoutPaneDirective;\n details: YmtLayoutPaneDirective;\n }>(() => {\n const _panes = this.panes();\n const _options = this.options();\n untracked(() => {\n _panes.forEach((p) =>\n p.updateSettings({\n size: _options[`${p.role()}Size` as keyof MasterDetailsPaneLayoutOptions] as SplitAreaSize,\n minSize: _options[`${p.role()}MinSize` as keyof MasterDetailsPaneLayoutOptions] as number,\n maxSize: _options[`${p.role()}MaxSize` as keyof MasterDetailsPaneLayoutOptions] as number\n })\n );\n });\n\n const res = {\n master: _panes.find((p) => p.role() === 'master')!,\n details: _panes.find((p) => p.role() === 'details')!\n };\n if (!res.master || !res.details) console.error('Both master and details panes are required in MasterDetailsLayoutComponent');\n return res;\n });\n\n #detailsPaneDialogRef: MatDialogRef<any> | null = null;\n detailsPaneTemplateRef = viewChild.required<TemplateRef<any>>('tplDetailsPanel');\n\n /**\n * Setting ID for persisting layout settings. If not set, layout settings won't be persisted.\n */\n layoutSettingsID = input<string | undefined>(undefined);\n\n options = input<MasterDetailsPaneLayoutOptions>({\n resizable: true\n });\n #optionsEffect = computed(() => {\n const o = this.options();\n // if(o.m)\n });\n\n /**\n * The split views direction. Could be 'horizontal' or 'vertical'. Defaults to 'horizontal'.\n */\n direction = input<SplitDirection>('horizontal');\n\n /**\n * Size of the gutter in Pixel.\n */\n gutterSize = input<number>(this.#DEFAULT_GUTTER_SIZE_PX);\n _gutterSize = signal<number>(this.#DEFAULT_GUTTER_SIZE_PX);\n #gutterSizeEffect = effect(() => {\n this._gutterSize.set(this.gutterSize());\n });\n\n /**\n * Enable/disable details pane (also use as two-way-bound variable: [(detailsActive)])\n */\n detailsActive = model<boolean>(false);\n #detailsActiveEffect = effect(() => {\n const da = this.detailsActive();\n untracked(() => {\n if (this.#detailsPaneDialogRef) this.#detailsPaneDialogRef.close();\n if (this.smallScreenLayout() && da) {\n this.#detailsPaneDialogRef = this.#dialog.open(this.detailsPaneTemplateRef(), {\n width: '100vw',\n height: '100vh',\n maxWidth: '100vw',\n panelClass: 'ymt-dialog-fullscreen'\n });\n this.#detailsPaneDialogRef.afterClosed().subscribe((silent: boolean) => {\n if (!silent) {\n this.detailsActive.set(false);\n }\n this.#detailsPaneDialogRef = null;\n });\n }\n });\n });\n\n smallScreenLayout = this.#device.smallScreenLayout;\n #smallScreenLayoutEffect = effect(() => {\n const ssl = this.smallScreenLayout();\n if (this.#detailsPaneDialogRef) this.#detailsPaneDialogRef.close(true);\n untracked(() => {\n const da = this.detailsActive();\n if (ssl && da) this.detailsActive.set(false);\n });\n });\n\n onDragStart(e: LayoutOutputData) {\n this.isDragging.set(true);\n }\n\n onDragEnd(e: LayoutOutputData) {\n this.#updateLayoutSettings(e.sizes);\n this.isDragging.set(false);\n }\n\n #updateLayoutSettings(sizes: SplitAreaSize[]) {\n const layoutSettings: LayoutSettings = {\n areas: this.panes().map((a: YmtLayoutPaneDirective, idx: number) => ({\n visible: a.areaProperties().visible === false ? false : true,\n size: sizes[idx]\n }))\n };\n // save layout settings if persistence is enabled\n const lsid = this.layoutSettingsID();\n if (lsid) {\n this.#layoutService.saveSettings(lsid, layoutSettings);\n }\n }\n\n #calculateGutterSize() {\n const computedStyle = getComputedStyle(this.#elRef.nativeElement);\n const spacing = computedStyle.getPropertyValue('--ymt-spacing-m').trim();\n const fontSize = parseFloat(computedStyle.fontSize.trim());\n const spacingPx = spacing.endsWith('rem') ? parseFloat(spacing) * fontSize : spacing.endsWith('px') ? parseFloat(spacing) : this.#DEFAULT_GUTTER_SIZE_PX;\n if (this._gutterSize() === this.#DEFAULT_GUTTER_SIZE_PX) this._gutterSize.set(spacingPx);\n }\n\n applyLayoutSettings(settings: LayoutSettings) {\n if (!this.#isLayoutSettingsObject(settings)) return;\n settings.areas.forEach((a: PaneLayoutSettings, index: number) => {\n this.panes()[index].updateSettings(a);\n });\n }\n\n #isLayoutSettingsObject(v: any): boolean {\n return v && 'areas' in v;\n }\n\n ngAfterViewInit(): void {\n this.#calculateGutterSize();\n // try to load layout settings if persistence is enabled\n const lsid = this.layoutSettingsID();\n if (lsid) {\n this.applyLayoutSettings(this.#layoutService.getSettings(lsid) as LayoutSettings);\n }\n }\n}\n","@let mp = _panes().master;\n@let dp = _panes().details;\n@if (!smallScreenLayout()) {\n <as-split\n [direction]=\"direction()\"\n [unit]=\"'percent'\"\n [gutterSize]=\"_gutterSize()\"\n [gutterStep]=\"1\"\n [useTransition]=\"false\"\n (dragStart)=\"onDragStart($event)\"\n (dragEnd)=\"onDragEnd($event)\"\n >\n @if (gutterSize() === 1) {\n <div *asSplitGutter=\"let isDragged = isDragged\" class=\"shade-gutter\" [class.dragged]=\"isDragged\">\n <div class=\"shade-gutter-icon\" [class.vertical]=\"direction() === 'vertical'\" [class.horizontal]=\"direction() === 'horizontal'\"></div>\n </div>\n } @else {\n <div *asSplitGutter class=\"split-gutter\">\n <div\n asSplitGutterDragHandle\n class=\"split-gutter-handle\"\n [class.vertical]=\"direction() === 'vertical'\"\n [class.horizontal]=\"direction() === 'horizontal'\"\n ></div>\n </div>\n }\n\n <!-- master pane -->\n @if (mp) {\n <as-split-area\n [yuvSplitAreaCover]=\"isDragging()\"\n [maxSize]=\"mp.areaProperties().maxSize\"\n [minSize]=\"mp.areaProperties().minSize\"\n [lockSize]=\"mp.areaProperties().lockSize\"\n [size]=\"mp.areaProperties().size\"\n [visible]=\"mp.areaProperties().visible\"\n >\n <ymt-pane [topBarActions]=\"mp.topBarActions()\" [plain]=\"!!options().plainMode\">\n <ng-template [ngTemplateOutlet]=\"mp.template\"></ng-template>\n </ymt-pane>\n </as-split-area>\n }\n <!-- details pane -->\n @if (dp) {\n <as-split-area\n [yuvSplitAreaCover]=\"isDragging()\"\n [maxSize]=\"dp.areaProperties().maxSize\"\n [minSize]=\"dp.areaProperties().minSize\"\n [lockSize]=\"dp.areaProperties().lockSize\"\n [size]=\"dp.areaProperties().size\"\n [visible]=\"dp.areaProperties().visible\"\n >\n <ymt-pane [topBarActions]=\"dp.topBarActions()\" [plain]=\"!!options().plainMode\">\n <ng-template [ngTemplateOutlet]=\"dp.template\"></ng-template>\n </ymt-pane>\n </as-split-area>\n }\n </as-split>\n} @else {\n <ymt-pane [topBarActions]=\"mp.topBarActions()\">\n <ng-template [ngTemplateOutlet]=\"mp.template\"></ng-template>\n </ymt-pane>\n}\n\n<ng-template #tplDetailsPanel>\n <ymt-pane class=\"fullscreen\" [topBarActions]=\"dp.topBarActions()\" [mode]=\"'navigation'\" (navigationClicked)=\"detailsActive.set(false)\">\n <ng-template [ngTemplateOutlet]=\"dp.template\"></ng-template>\n </ymt-pane>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { MasterDetailsLayoutComponent } from './components/master-details-layout/master-details-layout.component';\nimport { YmtLayoutPaneDirective } from './directives/layout-pane.directive';\n\nconst cmp = [MasterDetailsLayoutComponent, YmtLayoutPaneDirective]\n\n@NgModule({\n imports: cmp,\n exports: cmp\n})\nexport class YmtLayoutModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
@@ -5,6 +5,7 @@ import { LayoutOutputData, LayoutSettings, MasterDetailsPaneLayoutOptions } from
5
5
  import * as i0 from "@angular/core";
6
6
  export declare class MasterDetailsLayoutComponent {
7
7
  #private;
8
+ isDragging: import("@angular/core").WritableSignal<boolean>;
8
9
  panes: import("@angular/core").Signal<readonly YmtLayoutPaneDirective[]>;
9
10
  _panes: import("@angular/core").Signal<{
10
11
  master: YmtLayoutPaneDirective;
@@ -30,6 +31,7 @@ export declare class MasterDetailsLayoutComponent {
30
31
  */
31
32
  detailsActive: import("@angular/core").ModelSignal<boolean>;
32
33
  smallScreenLayout: import("@angular/core").WritableSignal<boolean>;
34
+ onDragStart(e: LayoutOutputData): void;
33
35
  onDragEnd(e: LayoutOutputData): void;
34
36
  applyLayoutSettings(settings: LayoutSettings): void;
35
37
  ngAfterViewInit(): void;
@@ -0,0 +1,13 @@
1
+ import * as i0 from "@angular/core";
2
+ /**
3
+ * TODO: This directive is currently used in the MasterDetailsLayoutComponent to add a cover element during dragging of the split area,
4
+ * to prevent iframes in the panes from capturing the drag events.
5
+ * However, this directive is very generic and can be used in any component that needs to add a cover element during dragging.
6
+ * Therefore, it should be moved to @yuuvis/client-components and then replaced with the SplitAreaCoverDirective from the client-framework/split-view library.
7
+ */
8
+ export declare class AreaCoverDirective {
9
+ #private;
10
+ yuvSplitAreaCover: import("@angular/core").InputSignal<boolean>;
11
+ static ɵfac: i0.ɵɵFactoryDeclaration<AreaCoverDirective, never>;
12
+ static ɵdir: i0.ɵɵDirectiveDeclaration<AreaCoverDirective, "[yuvSplitAreaCover]", never, { "yuvSplitAreaCover": { "alias": "yuvSplitAreaCover"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
13
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yuuvis/material",
3
- "version": "2.11.3",
3
+ "version": "2.11.4",
4
4
  "author": "OPTIMAL SYSTEMS GmbH <npm@optimal-systems.de>",
5
5
  "license": "MIT",
6
6
  "peerDependencies": {