@yuuvis/client-framework 2.1.0 → 2.1.2
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.
- package/fesm2022/yuuvis-client-framework-forms.mjs +18 -35
- package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-details.mjs +228 -195
- package/fesm2022/yuuvis-client-framework-object-details.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-tile-list.mjs +41 -21
- package/fesm2022/yuuvis-client-framework-tile-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-upload-progress.mjs +18 -2
- package/fesm2022/yuuvis-client-framework-upload-progress.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-widget-grid.mjs +2 -3
- package/fesm2022/yuuvis-client-framework-widget-grid.mjs.map +1 -1
- package/forms/lib/elements/datetime-range/datetime-range.component.d.ts +4 -4
- package/forms/lib/elements/range-select-date/date-range-picker/date-range-picker.component.d.ts +3 -3
- package/lib/assets/i18n/de.json +2 -2
- package/lib/assets/i18n/en.json +2 -2
- package/master-details/index.d.ts +1 -0
- package/object-details/index.d.ts +3 -0
- package/object-details/lib/object-details-header/object-details-header.component.d.ts +26 -0
- package/object-details/lib/object-details-shell/object-details-shell.component.d.ts +17 -43
- package/object-details/lib/object-details-shell/object-details-shell.service.d.ts +13 -0
- package/object-details/lib/object-details.component.d.ts +11 -17
- package/object-details/lib/object-details.module.d.ts +12 -0
- package/package.json +4 -4
- package/tile-list/lib/tile-config/tile-config-tile/tile-config-tile.component.d.ts +3 -3
- package/tile-list/lib/tile-config/tile-config.component.d.ts +3 -2
- package/upload-progress/index.d.ts +1 -0
- package/upload-progress/lib/upload-progress/upload-progress.module.d.ts +7 -0
|
@@ -604,7 +604,7 @@ class TileListComponent {
|
|
|
604
604
|
this.searchResultSubscription.unsubscribe();
|
|
605
605
|
}
|
|
606
606
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
607
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: TileListComponent, isStandalone: true, selector: "yuv-tile-list", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, flavor: { classPropertyName: "flavor", publicName: "flavor", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, preselect: { classPropertyName: "preselect", publicName: "preselect", isSignal: true, isRequired: false, transformFunction: null }, highlights: { classPropertyName: "highlights", publicName: "highlights", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", tileCopy: "tileCopy", tileCut: "tileCut", busy: "busy", queryResult: "queryResult", selectionChange: "selectionChange", itemDblClick: "itemDblClick", ctxMenu: "ctxMenu" }, host: { attributes: { "tabindex": "0", "role": "listbox" }, listeners: { "contextmenu": "onContextMenu($event)", "mousedown": "onMouseDown($event)", "keydown.control.c": "onCopy($event)", "keydown.control.x": "onCut($event)", "keydown": "onKeydown($event)" }, properties: { "class.pagination": "this.pagination" } }, providers: [], queries: [{ propertyName: "emptyContent", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tiles", predicate: TileComponent, descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ListItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"tiles\"\n [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n (dragSelectChange)=\"onDragSelectChange($event)\"\n (dragSelect)=\"onDragSelect($event)\"\n>\n @for (i of items; track i.id) {\n <yuv-tile\n yuvDragSelectItem\n yuvListItem\n [attr.aria-selected]=\"selection().includes(i.id)\"\n (click.single)=\"select(i, $event)\"\n (click.double)=\"itemDblClick.emit(i)\"\n [ngClass]=\"{ selected: selection().includes(i.id), last: $last }\"\n [actionContext]=\"options()?.actionContext\"\n [tile]=\"i\"\n [ngStyle]=\"highlightStyles()[i.id]\"\n (contextmenu)=\"contextMenuHandler($event, $index)\"\n ></yuv-tile>\n } @empty {\n <div class=\"empyt-list\">\n @if (searchExecuted && emptyContent()) {\n <ng-content></ng-content>\n }\n </div>\n }\n <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</div>\n@if (pagination) {\n <mat-paginator\n class=\"paginator\"\n [length]=\"pagination?.total\"\n [pageSize]=\"query()?.size\"\n aria-label=\"Select page\"\n (page)=\"changePage($event)\"\n hidePageSize\n >\n </mat-paginator>\n}\n", styles: [":host{--tile-current-background: var(--ymt-focus-background);--tile-on-current: var(--ymt-on-focus-background);--tile-selected-background: var(--ymt-selection-background);--tile-on-selected: var(--ymt-on-selection-background);--tile-selected-icon-fill: var(--ymt-primary);--tile-gap: 0px;--tile-border: none;--tile-border-width: 1px;--tile-icon-size: initial;--paging-button-size: 18px;--paging-margin: var(--ymt-spacing-xs);--paging-padding: var(--ymt-spacing-2xs);position:relative;display:grid;grid-template-rows:1fr auto var(--paging-margin);grid-template-columns:var(--paging-margin) 1fr var(--paging-margin)}:host.pagination yuv-tile.last{margin-block-end:calc(var(--paging-margin) * 2 + var(--paging-padding) * 2 + var(--paging-button-size))}:host .tiles{grid-column:1/-1;grid-row:1/-1;overflow-y:auto;
|
|
607
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: TileListComponent, isStandalone: true, selector: "yuv-tile-list", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, flavor: { classPropertyName: "flavor", publicName: "flavor", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, preselect: { classPropertyName: "preselect", publicName: "preselect", isSignal: true, isRequired: false, transformFunction: null }, highlights: { classPropertyName: "highlights", publicName: "highlights", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", tileCopy: "tileCopy", tileCut: "tileCut", busy: "busy", queryResult: "queryResult", selectionChange: "selectionChange", itemDblClick: "itemDblClick", ctxMenu: "ctxMenu" }, host: { attributes: { "tabindex": "0", "role": "listbox" }, listeners: { "contextmenu": "onContextMenu($event)", "mousedown": "onMouseDown($event)", "keydown.control.c": "onCopy($event)", "keydown.control.x": "onCut($event)", "keydown": "onKeydown($event)" }, properties: { "class.pagination": "this.pagination" } }, providers: [], queries: [{ propertyName: "emptyContent", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tiles", predicate: TileComponent, descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ListItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"tiles\"\n [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n (dragSelectChange)=\"onDragSelectChange($event)\"\n (dragSelect)=\"onDragSelect($event)\"\n>\n @for (i of items; track i.id) {\n <yuv-tile\n yuvDragSelectItem\n yuvListItem\n [attr.aria-selected]=\"selection().includes(i.id)\"\n (click.single)=\"select(i, $event)\"\n (click.double)=\"itemDblClick.emit(i)\"\n [ngClass]=\"{ selected: selection().includes(i.id), last: $last }\"\n [actionContext]=\"options()?.actionContext\"\n [tile]=\"i\"\n [ngStyle]=\"highlightStyles()[i.id]\"\n (contextmenu)=\"contextMenuHandler($event, $index)\"\n ></yuv-tile>\n } @empty {\n <div class=\"empyt-list\">\n @if (searchExecuted && emptyContent()) {\n <ng-content></ng-content>\n }\n </div>\n }\n <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</div>\n@if (pagination) {\n <mat-paginator\n class=\"paginator\"\n [length]=\"pagination?.total\"\n [pageSize]=\"query()?.size\"\n aria-label=\"Select page\"\n (page)=\"changePage($event)\"\n hidePageSize\n >\n </mat-paginator>\n}\n", styles: [":host{--tile-current-background: var(--ymt-focus-background);--tile-on-current: var(--ymt-on-focus-background);--tile-selected-background: var(--ymt-selection-background);--tile-on-selected: var(--ymt-on-selection-background);--tile-selected-icon-fill: var(--ymt-primary);--tile-gap: 0px;--tile-border: none;--tile-border-width: 1px;--tile-icon-size: initial;--paging-button-size: 18px;--paging-margin: var(--ymt-spacing-xs);--paging-padding: var(--ymt-spacing-2xs);--paging-background: var(--ymt-surface-panel);--paging-outline: transparent;position:relative;display:grid;grid-template-rows:1fr auto var(--paging-margin);grid-template-columns:var(--paging-margin) 1fr var(--paging-margin)}:host.pagination yuv-tile.last{margin-block-end:calc(var(--paging-margin) * 2 + var(--paging-padding) * 2 + var(--paging-button-size))}:host .tiles{grid-column:1/-1;grid-row:1/-1;overflow-y:auto;display:flex;flex-flow:column}:host .tiles yuv-tile{flex:0 0 auto}:host .tiles .offset{flex:1 1 auto}:host .paginator{z-index:1;margin-top:auto;grid-column:2/-2;grid-row:2/-2;border-block-start:1px solid var(--ymt-outline-variant);font:inherit;background-color:var(--paging-background)}:host yuv-tile{cursor:pointer}:host yuv-tile:not(.last){border:var(--tile-border);border-width:var(--tile-border-width);margin-block-end:var(--tile-gap)}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TileComponent, selector: "yuv-tile", inputs: ["tile", "actionContext"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: YuvListModule }, { kind: "directive", type: i3.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "directive", type: ClickDoubleDirective, selector: "[click.single],[click.double]", inputs: ["debounceTime"], outputs: ["click.double", "click.single"] }, { kind: "directive", type: DragSelectDirective, selector: "[yuvDragSelect]", inputs: ["yuvDragSelect"], outputs: ["dragSelectChange", "dragSelect"] }, { kind: "directive", type: DragSelectItemDirective, selector: "[yuvDragSelectItem]" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
|
|
608
608
|
}
|
|
609
609
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileListComponent, decorators: [{
|
|
610
610
|
type: Component,
|
|
@@ -622,7 +622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
|
|
|
622
622
|
], host: {
|
|
623
623
|
tabindex: '0',
|
|
624
624
|
role: 'listbox'
|
|
625
|
-
}, template: "<div\n class=\"tiles\"\n [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n (dragSelectChange)=\"onDragSelectChange($event)\"\n (dragSelect)=\"onDragSelect($event)\"\n>\n @for (i of items; track i.id) {\n <yuv-tile\n yuvDragSelectItem\n yuvListItem\n [attr.aria-selected]=\"selection().includes(i.id)\"\n (click.single)=\"select(i, $event)\"\n (click.double)=\"itemDblClick.emit(i)\"\n [ngClass]=\"{ selected: selection().includes(i.id), last: $last }\"\n [actionContext]=\"options()?.actionContext\"\n [tile]=\"i\"\n [ngStyle]=\"highlightStyles()[i.id]\"\n (contextmenu)=\"contextMenuHandler($event, $index)\"\n ></yuv-tile>\n } @empty {\n <div class=\"empyt-list\">\n @if (searchExecuted && emptyContent()) {\n <ng-content></ng-content>\n }\n </div>\n }\n <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</div>\n@if (pagination) {\n <mat-paginator\n class=\"paginator\"\n [length]=\"pagination?.total\"\n [pageSize]=\"query()?.size\"\n aria-label=\"Select page\"\n (page)=\"changePage($event)\"\n hidePageSize\n >\n </mat-paginator>\n}\n", styles: [":host{--tile-current-background: var(--ymt-focus-background);--tile-on-current: var(--ymt-on-focus-background);--tile-selected-background: var(--ymt-selection-background);--tile-on-selected: var(--ymt-on-selection-background);--tile-selected-icon-fill: var(--ymt-primary);--tile-gap: 0px;--tile-border: none;--tile-border-width: 1px;--tile-icon-size: initial;--paging-button-size: 18px;--paging-margin: var(--ymt-spacing-xs);--paging-padding: var(--ymt-spacing-2xs);position:relative;display:grid;grid-template-rows:1fr auto var(--paging-margin);grid-template-columns:var(--paging-margin) 1fr var(--paging-margin)}:host.pagination yuv-tile.last{margin-block-end:calc(var(--paging-margin) * 2 + var(--paging-padding) * 2 + var(--paging-button-size))}:host .tiles{grid-column:1/-1;grid-row:1/-1;overflow-y:auto;
|
|
625
|
+
}, template: "<div\n class=\"tiles\"\n [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n (dragSelectChange)=\"onDragSelectChange($event)\"\n (dragSelect)=\"onDragSelect($event)\"\n>\n @for (i of items; track i.id) {\n <yuv-tile\n yuvDragSelectItem\n yuvListItem\n [attr.aria-selected]=\"selection().includes(i.id)\"\n (click.single)=\"select(i, $event)\"\n (click.double)=\"itemDblClick.emit(i)\"\n [ngClass]=\"{ selected: selection().includes(i.id), last: $last }\"\n [actionContext]=\"options()?.actionContext\"\n [tile]=\"i\"\n [ngStyle]=\"highlightStyles()[i.id]\"\n (contextmenu)=\"contextMenuHandler($event, $index)\"\n ></yuv-tile>\n } @empty {\n <div class=\"empyt-list\">\n @if (searchExecuted && emptyContent()) {\n <ng-content></ng-content>\n }\n </div>\n }\n <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</div>\n@if (pagination) {\n <mat-paginator\n class=\"paginator\"\n [length]=\"pagination?.total\"\n [pageSize]=\"query()?.size\"\n aria-label=\"Select page\"\n (page)=\"changePage($event)\"\n hidePageSize\n >\n </mat-paginator>\n}\n", styles: [":host{--tile-current-background: var(--ymt-focus-background);--tile-on-current: var(--ymt-on-focus-background);--tile-selected-background: var(--ymt-selection-background);--tile-on-selected: var(--ymt-on-selection-background);--tile-selected-icon-fill: var(--ymt-primary);--tile-gap: 0px;--tile-border: none;--tile-border-width: 1px;--tile-icon-size: initial;--paging-button-size: 18px;--paging-margin: var(--ymt-spacing-xs);--paging-padding: var(--ymt-spacing-2xs);--paging-background: var(--ymt-surface-panel);--paging-outline: transparent;position:relative;display:grid;grid-template-rows:1fr auto var(--paging-margin);grid-template-columns:var(--paging-margin) 1fr var(--paging-margin)}:host.pagination yuv-tile.last{margin-block-end:calc(var(--paging-margin) * 2 + var(--paging-padding) * 2 + var(--paging-button-size))}:host .tiles{grid-column:1/-1;grid-row:1/-1;overflow-y:auto;display:flex;flex-flow:column}:host .tiles yuv-tile{flex:0 0 auto}:host .tiles .offset{flex:1 1 auto}:host .paginator{z-index:1;margin-top:auto;grid-column:2/-2;grid-row:2/-2;border-block-start:1px solid var(--ymt-outline-variant);font:inherit;background-color:var(--paging-background)}:host yuv-tile{cursor:pointer}:host yuv-tile:not(.last){border:var(--tile-border);border-width:var(--tile-border-width);margin-block-end:var(--tile-gap)}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"] }]
|
|
626
626
|
}], ctorParameters: () => [], propDecorators: { onContextMenu: [{
|
|
627
627
|
type: HostListener,
|
|
628
628
|
args: ['contextmenu', ['$event']]
|
|
@@ -655,11 +655,11 @@ class ActionSelectComponent {
|
|
|
655
655
|
this.actionSelect = output();
|
|
656
656
|
}
|
|
657
657
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ActionSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
658
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: ActionSelectComponent, isStandalone: true, selector: "yuv-tile-action-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: true, transformFunction: null }, selectedActionIds: { classPropertyName: "selectedActionIds", publicName: "selectedActionIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelect: "actionSelect" }, ngImport: i0, template: "<div class=\"actions\">\n @for (a of actions(); track a.id) {\n <button [ngClass]=\"{ selected: selectedActionIds().includes(a.id) }\" (click)=\"actionSelect.emit(a)\">\n <mat-icon>{{ a.icon }}</mat-icon\n >{{ a.label }}\n </button>\n }\n</div>\n", styles: [":host .actions button{
|
|
658
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: ActionSelectComponent, isStandalone: true, selector: "yuv-tile-action-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: true, transformFunction: null }, selectedActionIds: { classPropertyName: "selectedActionIds", publicName: "selectedActionIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelect: "actionSelect" }, ngImport: i0, template: "<div class=\"actions\">\n @for (a of actions(); track a.id) {\n <button [ngClass]=\"{ selected: selectedActionIds().includes(a.id) }\" (click)=\"actionSelect.emit(a)\">\n <mat-icon>{{ a.icon }}</mat-icon\n >{{ a.label }}\n </button>\n }\n</div>\n", styles: [":host .actions{display:flex;gap:var(--ymt-spacing-xs)}:host .actions button{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);border:0;display:inline-flex;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);align-items:center;border-radius:var(--ymt-corner-s)}:host .actions button.selected{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
659
659
|
}
|
|
660
660
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ActionSelectComponent, decorators: [{
|
|
661
661
|
type: Component,
|
|
662
|
-
args: [{ selector: 'yuv-tile-action-select', standalone: true, imports: [NgClass, MatIconModule], template: "<div class=\"actions\">\n @for (a of actions(); track a.id) {\n <button [ngClass]=\"{ selected: selectedActionIds().includes(a.id) }\" (click)=\"actionSelect.emit(a)\">\n <mat-icon>{{ a.icon }}</mat-icon\n >{{ a.label }}\n </button>\n }\n</div>\n", styles: [":host .actions button{
|
|
662
|
+
args: [{ selector: 'yuv-tile-action-select', standalone: true, imports: [NgClass, MatIconModule], template: "<div class=\"actions\">\n @for (a of actions(); track a.id) {\n <button [ngClass]=\"{ selected: selectedActionIds().includes(a.id) }\" (click)=\"actionSelect.emit(a)\">\n <mat-icon>{{ a.icon }}</mat-icon\n >{{ a.label }}\n </button>\n }\n</div>\n", styles: [":host .actions{display:flex;gap:var(--ymt-spacing-xs)}:host .actions button{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);border:0;display:inline-flex;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);align-items:center;border-radius:var(--ymt-corner-s)}:host .actions button.selected{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}\n"] }]
|
|
663
663
|
}] });
|
|
664
664
|
|
|
665
665
|
class IconSelectComponent {
|
|
@@ -766,12 +766,12 @@ class PropertySelectComponent {
|
|
|
766
766
|
return this.system.getLocalizedLabel(otf.id) || otf.id;
|
|
767
767
|
}
|
|
768
768
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: PropertySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
769
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: PropertySelectComponent, isStandalone: true, selector: "yuv-tile-property-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null }, selectedProperty: { classPropertyName: "selectedProperty", publicName: "selectedProperty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { propertySelect: "propertySelect" }, ngImport: i0, template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n <div class=\"filter-input\">\n <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n @if (query()) {\n <button class=\"icn\" (click)=\"query.set(null)\">\n <yuv-icon [svg]=\"clearIcon\"></yuv-icon>\n </button>\n }\n </div>\n</form> -->\n\n<ul class=\"properties\">\n @for (p of filteredObjectTypeFields(); track $index) {\n <li [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\" (click)=\"selectProperty(p)\">\n <div class=\"label\">{{ p.label }}</div>\n <button mat-icon-button (click)=\"removeProperty($event)\">\n <mat-icon>close</mat-icon>\n </button>\n </li>\n }\n</ul>\n", styles: [":host{display:flex;flex-flow:column;max-height:100%}:host .filter{flex:0 0 auto}:host .filter .filter-input{background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--ymt-text-color)}:host
|
|
769
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: PropertySelectComponent, isStandalone: true, selector: "yuv-tile-property-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null }, selectedProperty: { classPropertyName: "selectedProperty", publicName: "selectedProperty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { propertySelect: "propertySelect" }, ngImport: i0, template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n <div class=\"filter-input\">\n <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n @if (query()) {\n <button class=\"icn\" (click)=\"query.set(null)\">\n <yuv-icon [svg]=\"clearIcon\"></yuv-icon>\n </button>\n }\n </div>\n</form> -->\n\n<ul class=\"properties\">\n @for (p of filteredObjectTypeFields(); track $index) {\n <li [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\" (click)=\"selectProperty(p)\">\n <div class=\"label\">{{ p.label }}</div>\n <button mat-icon-button (click)=\"removeProperty($event)\">\n <mat-icon>close</mat-icon>\n </button>\n </li>\n }\n</ul>\n", styles: [":host{display:flex;flex-flow:column;max-height:100%}:host .filter{flex:0 0 auto}:host .filter .filter-input{background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--ymt-text-color)}:host .properties{flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--ymt-outline);column-gap:2em;margin-block-start:var(--ymt-spacing-m)}:host .properties li{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;display:flex;align-items:center;justify-content:space-between;cursor:default}:host .properties li:hover{background-color:var(--ymt-hover-background)}:host .properties li.baseProperty{font-style:italic}:host .properties li.selected{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host .properties li:not(.selected) button{display:none}:host .properties li .label{padding:var(--ymt-spacing-xs) var(--ymt-spacing-m)}:host .properties li button{color:currentColor}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
770
770
|
}
|
|
771
771
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: PropertySelectComponent, decorators: [{
|
|
772
772
|
type: Component,
|
|
773
773
|
args: [{ selector: 'yuv-tile-property-select', standalone: true, imports: [NgClass, FormsModule, TranslateModule,
|
|
774
|
-
MatButtonModule, MatIconModule], template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n <div class=\"filter-input\">\n <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n @if (query()) {\n <button class=\"icn\" (click)=\"query.set(null)\">\n <yuv-icon [svg]=\"clearIcon\"></yuv-icon>\n </button>\n }\n </div>\n</form> -->\n\n<ul class=\"properties\">\n @for (p of filteredObjectTypeFields(); track $index) {\n <li [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\" (click)=\"selectProperty(p)\">\n <div class=\"label\">{{ p.label }}</div>\n <button mat-icon-button (click)=\"removeProperty($event)\">\n <mat-icon>close</mat-icon>\n </button>\n </li>\n }\n</ul>\n", styles: [":host{display:flex;flex-flow:column;max-height:100%}:host .filter{flex:0 0 auto}:host .filter .filter-input{background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--ymt-text-color)}:host
|
|
774
|
+
MatButtonModule, MatIconModule], template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n <div class=\"filter-input\">\n <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n @if (query()) {\n <button class=\"icn\" (click)=\"query.set(null)\">\n <yuv-icon [svg]=\"clearIcon\"></yuv-icon>\n </button>\n }\n </div>\n</form> -->\n\n<ul class=\"properties\">\n @for (p of filteredObjectTypeFields(); track $index) {\n <li [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\" (click)=\"selectProperty(p)\">\n <div class=\"label\">{{ p.label }}</div>\n <button mat-icon-button (click)=\"removeProperty($event)\">\n <mat-icon>close</mat-icon>\n </button>\n </li>\n }\n</ul>\n", styles: [":host{display:flex;flex-flow:column;max-height:100%}:host .filter{flex:0 0 auto}:host .filter .filter-input{background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--ymt-text-color)}:host .properties{flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--ymt-outline);column-gap:2em;margin-block-start:var(--ymt-spacing-m)}:host .properties li{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;display:flex;align-items:center;justify-content:space-between;cursor:default}:host .properties li:hover{background-color:var(--ymt-hover-background)}:host .properties li.baseProperty{font-style:italic}:host .properties li.selected{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host .properties li:not(.selected) button{display:none}:host .properties li .label{padding:var(--ymt-spacing-xs) var(--ymt-spacing-m)}:host .properties li button{color:currentColor}\n"] }]
|
|
775
775
|
}] });
|
|
776
776
|
|
|
777
777
|
/**
|
|
@@ -784,9 +784,9 @@ class TileConfigTileComponent {
|
|
|
784
784
|
this.#system = inject(SystemService);
|
|
785
785
|
this.disableIconSlot = input();
|
|
786
786
|
this.disableBadgesSlot = input();
|
|
787
|
-
this.
|
|
788
|
-
this.
|
|
789
|
-
const oc = this.
|
|
787
|
+
this.objectConfig = input.required();
|
|
788
|
+
this._objectConfig = computed(() => {
|
|
789
|
+
const oc = this.objectConfig();
|
|
790
790
|
if (oc) {
|
|
791
791
|
[oc.title, oc.description, oc.meta, oc.aside].forEach((field) => {
|
|
792
792
|
if (field) {
|
|
@@ -825,13 +825,13 @@ class TileConfigTileComponent {
|
|
|
825
825
|
});
|
|
826
826
|
}
|
|
827
827
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileConfigTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
828
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: TileConfigTileComponent, isStandalone: true, selector: "yuv-tile-config-tile", inputs: { disableIconSlot: { classPropertyName: "disableIconSlot", publicName: "disableIconSlot", isSignal: true, isRequired: false, transformFunction: null }, disableBadgesSlot: { classPropertyName: "disableBadgesSlot", publicName: "disableBadgesSlot", isSignal: true, isRequired: false, transformFunction: null },
|
|
828
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: TileConfigTileComponent, isStandalone: true, selector: "yuv-tile-config-tile", inputs: { disableIconSlot: { classPropertyName: "disableIconSlot", publicName: "disableIconSlot", isSignal: true, isRequired: false, transformFunction: null }, disableBadgesSlot: { classPropertyName: "disableBadgesSlot", publicName: "disableBadgesSlot", isSignal: true, isRequired: false, transformFunction: null }, objectConfig: { classPropertyName: "objectConfig", publicName: "objectConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { slotSelect: "slotSelect" }, ngImport: i0, template: "@let oc = _objectConfig();\n\n<div data-slot=\"icon\" [attr.disabled]=\"disableIconSlot()\" (click)=\"selectSlot('icon')\">\n @if (oc.icon) {\n <yuv-icon [svg]=\"oc.icon.svg\"></yuv-icon>\n } @else {\n <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\"></yuv-object-type-icon>\n }\n</div>\n<div data-slot=\"title\" (click)=\"selectSlot('title')\">{{ oc.title?.label }}</div>\n<div data-slot=\"actions\" (click)=\"selectSlot('actions')\">\n @for (a of actions(); track a.id) {\n <button mat-icon-button [matTooltip]=\"a.label\">\n <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n </button>\n }\n</div>\n<div data-slot=\"description\" (click)=\"selectSlot('description')\">{{ oc.description?.label }}</div>\n<div data-slot=\"aside\" (click)=\"selectSlot('aside')\">{{ oc.aside?.label }}</div>\n<div data-slot=\"meta\" (click)=\"selectSlot('meta')\">{{ oc.meta?.label }}</div>\n@if (!disableBadgesSlot()) {\n <div data-slot=\"badges\" (click)=\"selectSlot('badges')\">\n {{ oc.badges }}\n </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--ymt-spacing-m);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline);padding:.25em .5em;box-sizing:border-box;min-height:2.2em;border-radius:var(--ymt-corner-xs)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]){cursor:pointer}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]).active,:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]):hover{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{width:24px;height:24px;pointer-events:none;color:currentColor}:host [data-slot=aside]{min-width:4em}:host [data-slot=icon]{height:3em;width:100%}\n"], dependencies: [{ kind: "component", type: YuvIconComponent, selector: "yuv-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }] }); }
|
|
829
829
|
}
|
|
830
830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileConfigTileComponent, decorators: [{
|
|
831
831
|
type: Component,
|
|
832
832
|
args: [{ selector: 'yuv-tile-config-tile', standalone: true, imports: [YuvIconComponent, MatButtonModule,
|
|
833
833
|
MatTooltipModule,
|
|
834
|
-
MatIconModule, CommonModule, ObjectTypeIconComponent], template: "@let oc =
|
|
834
|
+
MatIconModule, CommonModule, ObjectTypeIconComponent], template: "@let oc = _objectConfig();\n\n<div data-slot=\"icon\" [attr.disabled]=\"disableIconSlot()\" (click)=\"selectSlot('icon')\">\n @if (oc.icon) {\n <yuv-icon [svg]=\"oc.icon.svg\"></yuv-icon>\n } @else {\n <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\"></yuv-object-type-icon>\n }\n</div>\n<div data-slot=\"title\" (click)=\"selectSlot('title')\">{{ oc.title?.label }}</div>\n<div data-slot=\"actions\" (click)=\"selectSlot('actions')\">\n @for (a of actions(); track a.id) {\n <button mat-icon-button [matTooltip]=\"a.label\">\n <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n </button>\n }\n</div>\n<div data-slot=\"description\" (click)=\"selectSlot('description')\">{{ oc.description?.label }}</div>\n<div data-slot=\"aside\" (click)=\"selectSlot('aside')\">{{ oc.aside?.label }}</div>\n<div data-slot=\"meta\" (click)=\"selectSlot('meta')\">{{ oc.meta?.label }}</div>\n@if (!disableBadgesSlot()) {\n <div data-slot=\"badges\" (click)=\"selectSlot('badges')\">\n {{ oc.badges }}\n </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--ymt-spacing-m);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline);padding:.25em .5em;box-sizing:border-box;min-height:2.2em;border-radius:var(--ymt-corner-xs)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]){cursor:pointer}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]).active,:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]):hover{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{width:24px;height:24px;pointer-events:none;color:currentColor}:host [data-slot=aside]{min-width:4em}:host [data-slot=icon]{height:3em;width:100%}\n"] }]
|
|
835
835
|
}] });
|
|
836
836
|
|
|
837
837
|
class TileConfigComponent {
|
|
@@ -858,7 +858,7 @@ class TileConfigComponent {
|
|
|
858
858
|
this.save = output();
|
|
859
859
|
this.cancel = output();
|
|
860
860
|
this.selectedTypeProperties = [];
|
|
861
|
-
this
|
|
861
|
+
this.#emptyObjectConfig = {
|
|
862
862
|
objectTypeId: '',
|
|
863
863
|
title: { propertyName: '', label: '' },
|
|
864
864
|
description: { propertyName: '', label: '' },
|
|
@@ -868,9 +868,14 @@ class TileConfigComponent {
|
|
|
868
868
|
badges: []
|
|
869
869
|
};
|
|
870
870
|
this.flavors = [];
|
|
871
|
+
this.changes = {};
|
|
871
872
|
}
|
|
872
873
|
#objectConfigService;
|
|
873
874
|
#system;
|
|
875
|
+
get configChanged() {
|
|
876
|
+
return Object.keys(this.changes).length > 0;
|
|
877
|
+
}
|
|
878
|
+
#emptyObjectConfig;
|
|
874
879
|
getConfigValue(p) {
|
|
875
880
|
return this.objectConfig ? this.objectConfig[p] : undefined;
|
|
876
881
|
}
|
|
@@ -903,20 +908,28 @@ class TileConfigComponent {
|
|
|
903
908
|
}
|
|
904
909
|
async #selectType(t) {
|
|
905
910
|
this.selectedType = t;
|
|
911
|
+
const alreadyChanged = this.changes[t.id];
|
|
906
912
|
// load tile config
|
|
907
|
-
|
|
913
|
+
// if the type has been changed before load that config instead of the persisted one
|
|
914
|
+
this.objectConfig = alreadyChanged || (await this.#objectConfigService.getObjectConfig(t, this.bucket() || ''));
|
|
908
915
|
if (!this.objectConfig) {
|
|
909
916
|
this.objectConfig = {
|
|
910
|
-
...this
|
|
917
|
+
...this.#emptyObjectConfig,
|
|
911
918
|
objectTypeId: t.id
|
|
912
919
|
};
|
|
913
920
|
}
|
|
914
921
|
}
|
|
915
922
|
iconSelected(icon) {
|
|
916
|
-
if (this.
|
|
923
|
+
if (!this.selectedType)
|
|
924
|
+
return;
|
|
925
|
+
if (this.objectConfig) {
|
|
917
926
|
this.objectConfig.icon = icon ? { svg: icon } : undefined;
|
|
927
|
+
this.changes[this.selectedType.id] = this.objectConfig;
|
|
928
|
+
}
|
|
918
929
|
}
|
|
919
930
|
propertySelected(tileSlot, field) {
|
|
931
|
+
if (!this.selectedType)
|
|
932
|
+
return;
|
|
920
933
|
const p = {};
|
|
921
934
|
p[tileSlot] = field
|
|
922
935
|
? {
|
|
@@ -928,8 +941,11 @@ class TileConfigComponent {
|
|
|
928
941
|
...this.objectConfig,
|
|
929
942
|
...p
|
|
930
943
|
});
|
|
944
|
+
this.changes[this.selectedType.id] = this.objectConfig;
|
|
931
945
|
}
|
|
932
946
|
actionSelected(action) {
|
|
947
|
+
if (!this.selectedType)
|
|
948
|
+
return;
|
|
933
949
|
if (this.objectConfig) {
|
|
934
950
|
if (!this.objectConfig?.actions)
|
|
935
951
|
this.objectConfig.actions = [];
|
|
@@ -939,18 +955,22 @@ class TileConfigComponent {
|
|
|
939
955
|
else
|
|
940
956
|
this.objectConfig.actions.push({ id: action.id });
|
|
941
957
|
this.objectConfig = structuredClone(this.objectConfig);
|
|
958
|
+
this.changes[this.selectedType.id] = this.objectConfig;
|
|
942
959
|
}
|
|
943
960
|
}
|
|
944
961
|
saveConfig() {
|
|
945
|
-
this.
|
|
962
|
+
if (Object.keys(this.changes).length) {
|
|
963
|
+
this.#objectConfigService.saveObjectConfigs(this.changes, this.bucket()).subscribe((_) => this.save.emit());
|
|
964
|
+
}
|
|
946
965
|
}
|
|
947
|
-
|
|
948
|
-
if (this.selectedType
|
|
949
|
-
this
|
|
966
|
+
resetConfig() {
|
|
967
|
+
if (this.selectedType) {
|
|
968
|
+
this.changes[this.selectedType.id] = undefined;
|
|
969
|
+
this.objectConfig = this.#objectConfigService.getRegisteredDefault(this.selectedType.id, this.bucket()) || this.#emptyObjectConfig;
|
|
950
970
|
}
|
|
951
971
|
}
|
|
952
972
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
953
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: TileConfigComponent, isStandalone: true, selector: "yuv-tile-config", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, bucketLabel: { classPropertyName: "bucketLabel", publicName: "bucketLabel", isSignal: true, isRequired: false, transformFunction: null }, configTypes: { classPropertyName: "configTypes", publicName: "configTypes", isSignal: true, isRequired: false, transformFunction: null }, configFlavors: { classPropertyName: "configFlavors", publicName: "configFlavors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", cancel: "cancel" }, ngImport: i0, template: "<yuv-dialog [headertitel]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n <main class=\"tile-config\">\n <yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"'yuv.framework.tile-config.layout'\">\n <!-- list of types -->\n <ng-template yuvSplitArea [size]=\"30\">\n <div class=\"types\">\n <yuv-list (itemSelect)=\"itemSelected($event)\">\n @for (t of types() || []; track t.id) {\n <div yuvListItem>\n @if (t.icon) {\n <yuv-icon [svg]=\"t.icon\"></yuv-icon>\n } @else {\n <yuv-object-type-icon [objectTypeId]=\"t.id\"></yuv-object-type-icon>\n }\n {{ t.id | translate }}\n </div>\n }\n </yuv-list>\n </div>\n </ng-template>\n\n <!-- selected type details-->\n <ng-template yuvSplitArea [size]=\"70\">\n <div class=\"details\">\n @if (selectedType) {\n <header>{{ selectedType.id | translate }}</header>\n <div class=\"dummy-preview\">\n <yuv-tile-config-tile\n [disableIconSlot]=\"true\"\n [disableBadgesSlot]=\"true\"\n [objectConfig]=\"objectConfig!\"\n (slotSelect)=\"slotSelect($event)\"\n ></yuv-tile-config-tile>\n </div>\n <main>\n @if (selectedSlot === 'icon') {\n <
|
|
973
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: TileConfigComponent, isStandalone: true, selector: "yuv-tile-config", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, bucketLabel: { classPropertyName: "bucketLabel", publicName: "bucketLabel", isSignal: true, isRequired: false, transformFunction: null }, configTypes: { classPropertyName: "configTypes", publicName: "configTypes", isSignal: true, isRequired: false, transformFunction: null }, configFlavors: { classPropertyName: "configFlavors", publicName: "configFlavors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", cancel: "cancel" }, ngImport: i0, template: "<yuv-dialog [headertitel]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n <main class=\"tile-config\">\n <yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"'yuv.framework.tile-config.layout'\">\n <!-- list of types -->\n <ng-template yuvSplitArea [size]=\"30\">\n <div class=\"types\">\n <yuv-list (itemSelect)=\"itemSelected($event)\">\n @for (t of types() || []; track t.id) {\n <div yuvListItem>\n @if (t.icon) {\n <yuv-icon [svg]=\"t.icon\"></yuv-icon>\n } @else {\n <yuv-object-type-icon [objectTypeId]=\"t.id\"></yuv-object-type-icon>\n }\n {{ t.id | translate }}\n </div>\n }\n </yuv-list>\n </div>\n </ng-template>\n\n <!-- selected type details-->\n <ng-template yuvSplitArea [size]=\"70\">\n <div class=\"details\">\n @if (selectedType) {\n <header>\n <h2>{{ selectedType.id | translate }}</h2>\n <button ymtButton=\"secondary\" (click)=\"resetConfig()\">{{ 'yuv.tile-config.button.reset' | translate }}</button>\n </header>\n <div class=\"dummy-preview\">\n <yuv-tile-config-tile\n [disableIconSlot]=\"true\"\n [disableBadgesSlot]=\"true\"\n [objectConfig]=\"objectConfig!\"\n (slotSelect)=\"slotSelect($event)\"\n ></yuv-tile-config-tile>\n </div>\n <main>\n @if (selectedSlot === 'icon') {\n <h3>{{ 'yuv.tile-config.slot.icon.headline' | translate }}</h3>\n <yuv-icon-select [objectType]=\"selectedType\" (iconSelect)=\"iconSelected($event)\"></yuv-icon-select>\n } @else if (selectedSlot === 'badges') {\n <div class=\"placeholder empty\">\n <p>Future feature: Select badges (like: is favorite, ratings, ...)</p>\n </div>\n } @else if (!selectedSlot) {\n } @else if (selectedSlot === 'actions') {\n <h3>{{ 'yuv.tile-config.slot.action.headline' | translate }}</h3>\n <yuv-tile-action-select\n [objectType]=\"selectedType\"\n [selectedActionIds]=\"getSelectedActions()\"\n (actionSelect)=\"actionSelected($event)\"\n ></yuv-tile-action-select>\n } @else {\n <h3>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h3>\n <yuv-tile-property-select\n [objectType]=\"selectedType\"\n [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n ></yuv-tile-property-select>\n }\n </main>\n } @else {\n <div class=\"placeholder empty\">\n <h2>{{ 'yuv.tile-config.details.empty.title' | translate }}</h2>\n <p>{{ 'yuv.tile-config.details.empty.description' | translate }}</p>\n </div>\n }\n </div>\n </ng-template>\n </yuv-split-view>\n </main>\n <footer>\n <button ymtButton=\"secondary\" (click)=\"cancel.emit()\">{{ 'yuv.tile-config.button.close' | translate }}</button>\n <button ymtButton=\"primary\" [disabled]=\"!configChanged\" (click)=\"saveConfig()\">{{ 'yuv.tile-config.button.save' | translate }}</button>\n </footer>\n</yuv-dialog>\n", styles: [":host{display:flex;height:100%;flex-flow:column}:host main.tile-config{height:100%;display:contents}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);flex:1}:host .details{box-sizing:border-box}:host div.types{box-sizing:border-box;height:100%;overflow-y:auto}:host div.types div[yuvListItem]{display:flex;gap:var(--ymt-spacing-m);align-items:center;padding:var(--ymt-spacing-xs) var(--ymt-spacing-m);cursor:pointer}:host div.types div[yuvListItem]:not([aria-selected=true]):hover,:host div.types div[yuvListItem]:not([aria-selected=true])[aria-current=true]{background-color:var(--ymt-focus-background)}:host div.types div[yuvListItem][aria-selected=true]{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host div.types div[yuvListItem] yuv-object-type-icon{flex:0 0 auto;color:currentColor;opacity:.54}:host .details{height:100%;display:flex;flex-flow:column;overflow:hidden}:host .details header{flex:0 0 auto;display:flex;align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m);gap:var(--ymt-spacing-m)}:host .details header h2{flex:1;overflow:hidden;text-overflow:ellipsis;margin:0}:host .details .dummy-preview{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-surface-panel);border-bottom:1px solid var(--ymt-outline-variant)}:host .details .dummy-preview yuv-tile-config-tile{border-radius:var(--ymt-corner-m);border:1px solid var(--ymt-outline);background-color:var(--ymt-surface-container)}:host .details main{flex:1;overflow-y:auto;padding:var(--ymt-spacing-m)}:host .details main h3{margin:0;padding-block-end:var(--ymt-spacing-m);font:var(--ymt-font-subhead)}:host .details .placeholder.empty{height:100%;display:grid;place-content:center;color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: YuvSplitViewModule }, { kind: "directive", type: i1$3.SplitAreaDirective, selector: "[yuvSplitArea]", inputs: ["size", "minSize", "maxSize", "panelClass", "visible"] }, { kind: "component", type: i1$3.SplitViewComponent, selector: "yuv-split-view", inputs: ["direction", "gutterSize", "restrictMove", "disabled", "layoutSettingsID"], outputs: ["layoutSettingsChange", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"] }, { kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }, { kind: "component", type: TileConfigTileComponent, selector: "yuv-tile-config-tile", inputs: ["disableIconSlot", "disableBadgesSlot", "objectConfig"], outputs: ["slotSelect"] }, { kind: "component", type: IconSelectComponent, selector: "yuv-icon-select", inputs: ["objectType"], outputs: ["iconSelect"] }, { kind: "component", type: PropertySelectComponent, selector: "yuv-tile-property-select", inputs: ["objectType", "selectedProperty"], outputs: ["propertySelect"] }, { kind: "component", type: ActionSelectComponent, selector: "yuv-tile-action-select", inputs: ["objectType", "selectedActionIds"], outputs: ["actionSelect"] }, { kind: "component", type: YuvIconComponent, selector: "yuv-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i3.ListComponent, selector: "yuv-list", inputs: ["multiselect", "selfHandleSelection", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: i3.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitel"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] }); }
|
|
954
974
|
}
|
|
955
975
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileConfigComponent, decorators: [{
|
|
956
976
|
type: Component,
|
|
@@ -969,7 +989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
|
|
|
969
989
|
MatButtonModule,
|
|
970
990
|
DialogComponent,
|
|
971
991
|
YmtButtonDirective
|
|
972
|
-
], template: "<yuv-dialog [headertitel]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n <main class=\"tile-config\">\n <yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"'yuv.framework.tile-config.layout'\">\n <!-- list of types -->\n <ng-template yuvSplitArea [size]=\"30\">\n <div class=\"types\">\n <yuv-list (itemSelect)=\"itemSelected($event)\">\n @for (t of types() || []; track t.id) {\n <div yuvListItem>\n @if (t.icon) {\n <yuv-icon [svg]=\"t.icon\"></yuv-icon>\n } @else {\n <yuv-object-type-icon [objectTypeId]=\"t.id\"></yuv-object-type-icon>\n }\n {{ t.id | translate }}\n </div>\n }\n </yuv-list>\n </div>\n </ng-template>\n\n <!-- selected type details-->\n <ng-template yuvSplitArea [size]=\"70\">\n <div class=\"details\">\n @if (selectedType) {\n <header>{{ selectedType.id | translate }}</header>\n <div class=\"dummy-preview\">\n <yuv-tile-config-tile\n [disableIconSlot]=\"true\"\n [disableBadgesSlot]=\"true\"\n [objectConfig]=\"objectConfig!\"\n (slotSelect)=\"slotSelect($event)\"\n ></yuv-tile-config-tile>\n </div>\n <main>\n @if (selectedSlot === 'icon') {\n <
|
|
992
|
+
], template: "<yuv-dialog [headertitel]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n <main class=\"tile-config\">\n <yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"'yuv.framework.tile-config.layout'\">\n <!-- list of types -->\n <ng-template yuvSplitArea [size]=\"30\">\n <div class=\"types\">\n <yuv-list (itemSelect)=\"itemSelected($event)\">\n @for (t of types() || []; track t.id) {\n <div yuvListItem>\n @if (t.icon) {\n <yuv-icon [svg]=\"t.icon\"></yuv-icon>\n } @else {\n <yuv-object-type-icon [objectTypeId]=\"t.id\"></yuv-object-type-icon>\n }\n {{ t.id | translate }}\n </div>\n }\n </yuv-list>\n </div>\n </ng-template>\n\n <!-- selected type details-->\n <ng-template yuvSplitArea [size]=\"70\">\n <div class=\"details\">\n @if (selectedType) {\n <header>\n <h2>{{ selectedType.id | translate }}</h2>\n <button ymtButton=\"secondary\" (click)=\"resetConfig()\">{{ 'yuv.tile-config.button.reset' | translate }}</button>\n </header>\n <div class=\"dummy-preview\">\n <yuv-tile-config-tile\n [disableIconSlot]=\"true\"\n [disableBadgesSlot]=\"true\"\n [objectConfig]=\"objectConfig!\"\n (slotSelect)=\"slotSelect($event)\"\n ></yuv-tile-config-tile>\n </div>\n <main>\n @if (selectedSlot === 'icon') {\n <h3>{{ 'yuv.tile-config.slot.icon.headline' | translate }}</h3>\n <yuv-icon-select [objectType]=\"selectedType\" (iconSelect)=\"iconSelected($event)\"></yuv-icon-select>\n } @else if (selectedSlot === 'badges') {\n <div class=\"placeholder empty\">\n <p>Future feature: Select badges (like: is favorite, ratings, ...)</p>\n </div>\n } @else if (!selectedSlot) {\n } @else if (selectedSlot === 'actions') {\n <h3>{{ 'yuv.tile-config.slot.action.headline' | translate }}</h3>\n <yuv-tile-action-select\n [objectType]=\"selectedType\"\n [selectedActionIds]=\"getSelectedActions()\"\n (actionSelect)=\"actionSelected($event)\"\n ></yuv-tile-action-select>\n } @else {\n <h3>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h3>\n <yuv-tile-property-select\n [objectType]=\"selectedType\"\n [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n ></yuv-tile-property-select>\n }\n </main>\n } @else {\n <div class=\"placeholder empty\">\n <h2>{{ 'yuv.tile-config.details.empty.title' | translate }}</h2>\n <p>{{ 'yuv.tile-config.details.empty.description' | translate }}</p>\n </div>\n }\n </div>\n </ng-template>\n </yuv-split-view>\n </main>\n <footer>\n <button ymtButton=\"secondary\" (click)=\"cancel.emit()\">{{ 'yuv.tile-config.button.close' | translate }}</button>\n <button ymtButton=\"primary\" [disabled]=\"!configChanged\" (click)=\"saveConfig()\">{{ 'yuv.tile-config.button.save' | translate }}</button>\n </footer>\n</yuv-dialog>\n", styles: [":host{display:flex;height:100%;flex-flow:column}:host main.tile-config{height:100%;display:contents}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);flex:1}:host .details{box-sizing:border-box}:host div.types{box-sizing:border-box;height:100%;overflow-y:auto}:host div.types div[yuvListItem]{display:flex;gap:var(--ymt-spacing-m);align-items:center;padding:var(--ymt-spacing-xs) var(--ymt-spacing-m);cursor:pointer}:host div.types div[yuvListItem]:not([aria-selected=true]):hover,:host div.types div[yuvListItem]:not([aria-selected=true])[aria-current=true]{background-color:var(--ymt-focus-background)}:host div.types div[yuvListItem][aria-selected=true]{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host div.types div[yuvListItem] yuv-object-type-icon{flex:0 0 auto;color:currentColor;opacity:.54}:host .details{height:100%;display:flex;flex-flow:column;overflow:hidden}:host .details header{flex:0 0 auto;display:flex;align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m);gap:var(--ymt-spacing-m)}:host .details header h2{flex:1;overflow:hidden;text-overflow:ellipsis;margin:0}:host .details .dummy-preview{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-surface-panel);border-bottom:1px solid var(--ymt-outline-variant)}:host .details .dummy-preview yuv-tile-config-tile{border-radius:var(--ymt-corner-m);border:1px solid var(--ymt-outline);background-color:var(--ymt-surface-container)}:host .details main{flex:1;overflow-y:auto;padding:var(--ymt-spacing-m)}:host .details main h3{margin:0;padding-block-end:var(--ymt-spacing-m);font:var(--ymt-font-subhead)}:host .details .placeholder.empty{height:100%;display:grid;place-content:center;color:var(--ymt-text-color-subtle)}\n"] }]
|
|
973
993
|
}] });
|
|
974
994
|
|
|
975
995
|
class TileConfigTriggerComponent {
|