@yuuvis/client-framework 3.14.1 → 3.16.0
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-actions.mjs +19 -19
- package/fesm2022/yuuvis-client-framework-app-bar.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-badges.mjs +16 -13
- package/fesm2022/yuuvis-client-framework-badges.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-breadcrumb.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-clipboard.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-datepicker.mjs +31 -31
- package/fesm2022/yuuvis-client-framework-forms.mjs +70 -68
- package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-icons.mjs +9 -9
- package/fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-metadata-form.mjs +18 -18
- package/fesm2022/yuuvis-client-framework-object-details.mjs +28 -28
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs +18 -18
- package/fesm2022/yuuvis-client-framework-object-form.mjs +35 -35
- package/fesm2022/yuuvis-client-framework-object-form.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-preview.mjs +9 -9
- package/fesm2022/yuuvis-client-framework-object-relationship.mjs +38 -38
- package/fesm2022/yuuvis-client-framework-object-relationship.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-summary.mjs +13 -13
- package/fesm2022/yuuvis-client-framework-object-versions.mjs +8 -8
- package/fesm2022/yuuvis-client-framework-object-versions.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-pagination.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-query-list.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-renderer.mjs +99 -53
- package/fesm2022/yuuvis-client-framework-renderer.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-sequence-list.mjs +16 -8
- package/fesm2022/yuuvis-client-framework-sequence-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-simple-search.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-smart-search.mjs +13 -13
- package/fesm2022/yuuvis-client-framework-sort.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-tile-list.mjs +77 -35
- package/fesm2022/yuuvis-client-framework-tile-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-token-search.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-tree.mjs +9 -9
- package/fesm2022/yuuvis-client-framework-upload-progress.mjs +10 -10
- package/fesm2022/yuuvis-client-framework.mjs +108 -36
- package/fesm2022/yuuvis-client-framework.mjs.map +1 -1
- package/lib/assets/i18n/de.json +4 -3
- package/lib/assets/i18n/en.json +4 -3
- package/package.json +10 -10
- package/types/yuuvis-client-framework-forms.d.ts +3 -1
- package/types/yuuvis-client-framework-renderer.d.ts +18 -2
- package/types/yuuvis-client-framework-sequence-list.d.ts +9 -1
- package/types/yuuvis-client-framework-tile-list.d.ts +1 -0
- package/types/yuuvis-client-framework.d.ts +12 -2
|
@@ -50,10 +50,10 @@ class TileActionsMenuComponent {
|
|
|
50
50
|
this.matMenu().closed.emit('click');
|
|
51
51
|
this.itemSelect.emit(action);
|
|
52
52
|
}
|
|
53
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
54
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
53
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileActionsMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
54
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: TileActionsMenuComponent, isStandalone: true, selector: "yuv-tile-actions-menu", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, providers: [{ provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: { position: 'right' } }], viewQueries: [{ propertyName: "matMenu", first: true, predicate: ["menuRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-menu #menuRef>\n <!-- @if (loading() && !actions().length) {\n <div class=\"loading-indicator\">\n <mat-spinner diameter=\"24\"></mat-spinner>\n </div>\n } -->\n @for (action of actions(); track action.id) {\n @if (action.children?.length) {\n <span [matTooltip]=\"action.description\" [matTooltipDisabled]=\"!action.description\">\n <button\n mat-menu-item\n [disabled]=\"!!action.disabled\"\n [attr.disabled]=\"!!action.disabled\"\n [matMenuTriggerFor]=\"subMenu.matMenu()\"\n >\n @if (action.icon) {\n <mat-icon>{{ action.icon }}</mat-icon>\n }\n <span>{{ action.label }}</span>\n </button>\n <yuv-tile-actions-menu #subMenu [actions]=\"action.children!\" (itemSelect)=\"itemSelect.emit($event)\" />\n </span>\n } @else {\n <span [matTooltip]=\"action.description\" [matTooltipDisabled]=\"!action.description\">\n <button\n mat-menu-item\n [disabled]=\"!!action.disabled\"\n [attr.disabled]=\"!!action.disabled\"\n (click)=\"itemClicked($event, action)\"\n >\n @if (action.icon) {\n <mat-icon>{{ action.icon }}</mat-icon>\n }\n <span>{{ action.label }}</span>\n </button>\n </span>\n }\n }\n</mat-menu>\n", styles: [":host{display:block}.loading-indicator{display:flex;justify-content:center;padding:8px 16px}button[mat-menu-item][disabled]{opacity:var(--ymt-disabled-opacity, .38);cursor:default;pointer-events:none}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => TileActionsMenuComponent), selector: "yuv-tile-actions-menu", inputs: ["actions", "loading"], outputs: ["itemSelect"] }, { kind: "component", type: i0.forwardRef(() => MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i0.forwardRef(() => MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
55
55
|
}
|
|
56
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
56
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileActionsMenuComponent, decorators: [{
|
|
57
57
|
type: Component,
|
|
58
58
|
args: [{ selector: 'yuv-tile-actions-menu', imports: [MatMenu, MatIcon, MatMenuItem, MatMenuTrigger, MatTooltip, forwardRef(() => TileActionsMenuComponent)], providers: [{ provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: { position: 'right' } }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-menu #menuRef>\n <!-- @if (loading() && !actions().length) {\n <div class=\"loading-indicator\">\n <mat-spinner diameter=\"24\"></mat-spinner>\n </div>\n } -->\n @for (action of actions(); track action.id) {\n @if (action.children?.length) {\n <span [matTooltip]=\"action.description\" [matTooltipDisabled]=\"!action.description\">\n <button\n mat-menu-item\n [disabled]=\"!!action.disabled\"\n [attr.disabled]=\"!!action.disabled\"\n [matMenuTriggerFor]=\"subMenu.matMenu()\"\n >\n @if (action.icon) {\n <mat-icon>{{ action.icon }}</mat-icon>\n }\n <span>{{ action.label }}</span>\n </button>\n <yuv-tile-actions-menu #subMenu [actions]=\"action.children!\" (itemSelect)=\"itemSelect.emit($event)\" />\n </span>\n } @else {\n <span [matTooltip]=\"action.description\" [matTooltipDisabled]=\"!action.description\">\n <button\n mat-menu-item\n [disabled]=\"!!action.disabled\"\n [attr.disabled]=\"!!action.disabled\"\n (click)=\"itemClicked($event, action)\"\n >\n @if (action.icon) {\n <mat-icon>{{ action.icon }}</mat-icon>\n }\n <span>{{ action.label }}</span>\n </button>\n </span>\n }\n }\n</mat-menu>\n", styles: [":host{display:block}.loading-indicator{display:flex;justify-content:center;padding:8px 16px}button[mat-menu-item][disabled]{opacity:var(--ymt-disabled-opacity, .38);cursor:default;pointer-events:none}\n"] }]
|
|
59
59
|
}], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], matMenu: [{ type: i0.ViewChild, args: ['menuRef', { isSignal: true }] }] } });
|
|
@@ -110,10 +110,10 @@ class TileExtensionDirective {
|
|
|
110
110
|
this.#renderedCmp = undefined;
|
|
111
111
|
}
|
|
112
112
|
}
|
|
113
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
114
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.
|
|
113
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileExtensionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
114
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.20", type: TileExtensionDirective, isStandalone: true, selector: "[yuvTileExtension]", inputs: { yuvTileExtension: { classPropertyName: "yuvTileExtension", publicName: "yuvTileExtension", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
115
115
|
}
|
|
116
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileExtensionDirective, decorators: [{
|
|
117
117
|
type: Directive,
|
|
118
118
|
args: [{
|
|
119
119
|
selector: '[yuvTileExtension]',
|
|
@@ -1309,10 +1309,10 @@ class TileListComponent {
|
|
|
1309
1309
|
#preselectEffect;
|
|
1310
1310
|
#closeMenuEffect;
|
|
1311
1311
|
#outsideClickCloseEffect;
|
|
1312
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1313
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1312
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1313
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: TileListComponent, isStandalone: true, selector: "yuv-tile-list", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", 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 }, preventChangeUntil: { classPropertyName: "preventChangeUntil", publicName: "preventChangeUntil", isSignal: true, isRequired: false, transformFunction: null }, autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: true, isRequired: false, transformFunction: null }, disableCustomContextMenu: { classPropertyName: "disableCustomContextMenu", publicName: "disableCustomContextMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", tileCopy: "tileCopy", tileCut: "tileCut", busy: "busy", queryResult: "queryResult", selectionChange: "selectionChange", itemDblClick: "itemDblClick", ctxMenu: "ctxMenu" }, host: { listeners: { "keydown.control.c": "onCopy($event)", "keydown.control.x": "onCut($event)" }, properties: { "class.dense": "dense()" } }, providers: [], queries: [{ propertyName: "menuComponent", first: true, predicate: TileActionsMenuComponent, descendants: true, isSignal: true }, { propertyName: "emptyContent", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "menuTriggers", predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "<yuv-query-list\n #list\n [query]=\"query()\"\n [transformer]=\"transformer\"\n idProperty=\"id\"\n [preventChangeUntil]=\"preventChangeUntil()\"\n [autoSelect]=\"autoSelect()\"\n [pageSize]=\"pageSize()\"\n [multiselect]=\"multiselect()\"\n (itemDoubleClick)=\"onItemDoubleClick($event)\"\n (itemSelect)=\"onListItemsSelect($event)\"\n (queryResult)=\"onQueryResult($event)\"\n (dragSelectChange)=\"onDragSelectChange($event)\"\n>\n <ng-template #yuvQueryListItem let-item let-index=\"index\">\n <yuv-list-tile [class.dense]=\"dense()\" [style]=\"highlightStyles()[item.id]\" (contextmenu)=\"contextMenuHandler($event, index)\">\n <ng-template #iconSlot><ng-container *yuvRenderer=\"item.icon\" /></ng-template>\n <ng-template #titleSlot><ng-container *yuvRenderer=\"item.title\" /></ng-template>\n <ng-template #descriptionSlot><ng-container *yuvRenderer=\"item.description\" /></ng-template>\n <ng-template #metaSlot><ng-container *yuvRenderer=\"item.meta\" /></ng-template>\n <ng-template #asideSlot><ng-container *yuvRenderer=\"item.aside\" /></ng-template>\n <ng-template #actionsSlot>\n @for (a of item.actions; track a.id) {\n <button\n ymt-icon-button\n [matTooltip]=\"a.label\"\n icon-button-size=\"small\"\n [disabled]=\"a.disabled\"\n (click)=\"executeAction(item, a, $event)\"\n >\n <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n </button>\n }\n\n @if (menu()) {\n <button\n ymt-icon-button\n icon-button-size=\"small\"\n (click)=\"menuItemClicked(item, $event)\"\n [matTooltip]=\"'yuv.tile-list.item.actions-menu.button.tooltip' | translate\"\n [matMenuTriggerFor]=\"menu()\"\n >\n <mat-icon inert=\"true\">more_vert</mat-icon>\n </button>\n }\n <ng-content select=\"yuv-tile-actions-menu, [yuv-tile-actions-menu]\" />\n </ng-template>\n <ng-template #extensionSlot>\n <ng-container *yuvTileExtension=\"{ typeId: item.objectTypeId, flavorTypeId: item.flavorTypeId, data: item.instanceData }\" />\n </ng-template>\n <ng-template #badgesSlot>\n <yuv-tile-badges [dmsObject]=\"item.dmsObject\" [badgeIds]=\"badgeIdsFor(item)\" [bucket]=\"bucket()\" />\n </ng-template>\n </yuv-list-tile>\n </ng-template>\n\n <ng-template #yuvQueryListEmpty>\n <div class=\"empty-list\">\n @let searchExe = searchExecuted();\n @if (searchExe && emptyContent()) {\n <ng-content />\n }\n </div>\n </ng-template>\n <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</yuv-query-list>\n", styles: [":host{--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host yuv-query-list{flex:1;overflow-y:auto;display:flex;flex-flow:column;height:100%}:host yuv-query-list .offset{flex:1 1 auto}:host .empty-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i1.ListTileComponent, selector: "yuv-list-tile" }, { kind: "ngmodule", type: YuvQueryListModule }, { kind: "component", type: i2.QueryListComponent, selector: "yuv-query-list", inputs: ["query", "idProperty", "transformer", "preventChangeUntil", "autoSelect", "pageSize", "enableDragSelect", "multiselect", "selfHandleSelection", "includePermissions"], outputs: ["itemSelect", "dragSelectChange", "itemDoubleClick", "queryResult"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "directive", type: TileExtensionDirective, selector: "[yuvTileExtension]", inputs: ["yuvTileExtension"] }, { kind: "component", type: TileBadgesComponent, selector: "yuv-tile-badges", inputs: ["dmsObject", "badgeIds", "bucket"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1314
1314
|
}
|
|
1315
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1315
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileListComponent, decorators: [{
|
|
1316
1316
|
type: Component,
|
|
1317
1317
|
args: [{ selector: 'yuv-tile-list', standalone: true, providers: [], imports: [
|
|
1318
1318
|
TranslatePipe,
|
|
@@ -1344,10 +1344,10 @@ class ActionSelectComponent {
|
|
|
1344
1344
|
}, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
|
|
1345
1345
|
}
|
|
1346
1346
|
#actionService;
|
|
1347
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1348
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1347
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ActionSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1348
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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 } @empty {\n <span class=\"empty\">{{ 'yuv.action.empty.selection' | translate }}</span>\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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
1349
1349
|
}
|
|
1350
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1350
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ActionSelectComponent, decorators: [{
|
|
1351
1351
|
type: Component,
|
|
1352
1352
|
args: [{ selector: 'yuv-tile-action-select', imports: [NgClass, MatIconModule, TranslatePipe], 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 } @empty {\n <span class=\"empty\">{{ 'yuv.action.empty.selection' | translate }}</span>\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"] }]
|
|
1353
1353
|
}], propDecorators: { objectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectType", required: true }] }], selectedActionIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedActionIds", required: false }] }], actionSelect: [{ type: i0.Output, args: ["actionSelect"] }] } });
|
|
@@ -1449,10 +1449,10 @@ class PropertySelectComponent {
|
|
|
1449
1449
|
_getLabel(otf) {
|
|
1450
1450
|
return this.system.getLocalizedLabel(otf.id) || otf.id;
|
|
1451
1451
|
}
|
|
1452
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1453
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1452
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: PropertySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1453
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: PropertySelectComponent, isStandalone: true, selector: "yuv-tile-property-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null }, excludeProperties: { classPropertyName: "excludeProperties", publicName: "excludeProperties", 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\n tabindex=\"0\"\n [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\"\n (click)=\"selectProperty(p)\"\n (keydown.enter)=\"selectPropertyOnKeydown($event, p)\"\n (keydown.space)=\"selectPropertyOnKeydown($event, p)\"\n >\n <div class=\"label\">{{ p.label }}</div>\n <button\n mat-icon-button\n (click)=\"removeProperty($event)\"\n (keydown.enter)=\"removePropertyOnKeydown($event)\"\n (keydown.space)=\"removePropertyOnKeydown($event)\"\n >\n <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">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-container);color:var(--ymt-on-primary-container)}: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: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
1454
1454
|
}
|
|
1455
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1455
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: PropertySelectComponent, decorators: [{
|
|
1456
1456
|
type: Component,
|
|
1457
1457
|
args: [{ selector: 'yuv-tile-property-select', standalone: true, imports: [NgClass, FormsModule, 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\n tabindex=\"0\"\n [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\"\n (click)=\"selectProperty(p)\"\n (keydown.enter)=\"selectPropertyOnKeydown($event, p)\"\n (keydown.space)=\"selectPropertyOnKeydown($event, p)\"\n >\n <div class=\"label\">{{ p.label }}</div>\n <button\n mat-icon-button\n (click)=\"removeProperty($event)\"\n (keydown.enter)=\"removePropertyOnKeydown($event)\"\n (keydown.space)=\"removePropertyOnKeydown($event)\"\n >\n <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">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-container);color:var(--ymt-on-primary-container)}: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"] }]
|
|
1458
1458
|
}], propDecorators: { objectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectType", required: false }] }], excludeProperties: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeProperties", required: false }] }], selectedProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedProperty", required: false }] }], propertySelect: [{ type: i0.Output, args: ["propertySelect"] }] } });
|
|
@@ -1477,10 +1477,10 @@ class IconSelectComponent {
|
|
|
1477
1477
|
#emit(data) {
|
|
1478
1478
|
this.iconSelect.emit(data);
|
|
1479
1479
|
}
|
|
1480
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1481
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
1480
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: IconSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1481
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.20", type: IconSelectComponent, isStandalone: true, selector: "yuv-icon-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { iconSelect: "iconSelect" }, ngImport: i0, template: "<input style=\"display: none\" #fileInput type=\"file\" accept=\".svg\" (change)=\"createIcon(fileInput)\" />\n\n<button class=\"primary\" (click)=\"fileInput.click()\">{{ 'yuv.tile-config.icon-select.pick' | translate }}</button>\n<button class=\"secondary\" (click)=\"reset()\">{{ 'yuv.tile-config.icon-select.reset' | translate }}</button>\n", styles: [":host{display:flex;gap:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
1482
1482
|
}
|
|
1483
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1483
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: IconSelectComponent, decorators: [{
|
|
1484
1484
|
type: Component,
|
|
1485
1485
|
args: [{ selector: 'yuv-icon-select', standalone: true, imports: [TranslatePipe], template: "<input style=\"display: none\" #fileInput type=\"file\" accept=\".svg\" (change)=\"createIcon(fileInput)\" />\n\n<button class=\"primary\" (click)=\"fileInput.click()\">{{ 'yuv.tile-config.icon-select.pick' | translate }}</button>\n<button class=\"secondary\" (click)=\"reset()\">{{ 'yuv.tile-config.icon-select.reset' | translate }}</button>\n", styles: [":host{display:flex;gap:var(--ymt-spacing-m)}\n"] }]
|
|
1486
1486
|
}], propDecorators: { objectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectType", required: false }] }], iconSelect: [{ type: i0.Output, args: ["iconSelect"] }] } });
|
|
@@ -1547,10 +1547,10 @@ class TileConfigTileComponent {
|
|
|
1547
1547
|
? element.classList.add('active')
|
|
1548
1548
|
: element.classList.remove('active'));
|
|
1549
1549
|
}
|
|
1550
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1551
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1550
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileConfigTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1551
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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 }, bucket: { classPropertyName: "bucket", publicName: "bucket", 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\n data-slot=\"icon\"\n [attr.disabled]=\"disableIconSlot()\"\n tabindex=\"0\"\n (click)=\"selectSlot('icon')\"\n (keydown.enter)=\"selectSlot('icon')\"\n (keydown.space)=\"selectSlot('icon'); $event.preventDefault()\"\n>\n @if (oc && oc.icon) {\n <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">{{ oc.icon.svg }}</mat-icon>\n } @else if (oc && oc.objectTypeId) {\n <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\" />\n }\n</div>\n<div\n data-slot=\"title\"\n tabindex=\"0\"\n (click)=\"selectSlot('title')\"\n (keydown.enter)=\"selectSlot('title')\"\n (keydown.space)=\"selectSlot('title'); $event.preventDefault()\"\n>\n {{ oc?.title?.label }}\n</div>\n<div\n data-slot=\"actions\"\n tabindex=\"0\"\n (click)=\"selectSlot('actions')\"\n (keydown.enter)=\"selectSlot('actions')\"\n (keydown.space)=\"selectSlot('actions'); $event.preventDefault()\"\n>\n @for (a of actions(); track a.id) {\n <button mat-icon-button [matTooltip]=\"a.label\" [attr.inert]=\"true\" aria-hidden=\"true\">\n <mat-icon inert=\"true\" aria-hidden=\"true\">{{ a.icon }}</mat-icon>\n </button>\n }\n</div>\n<div\n data-slot=\"description\"\n tabindex=\"0\"\n (click)=\"selectSlot('description')\"\n (keydown.enter)=\"selectSlot('description')\"\n (keydown.space)=\"selectSlot('description'); $event.preventDefault()\"\n>\n {{ oc?.description?.label }}\n</div>\n<div\n data-slot=\"aside\"\n tabindex=\"0\"\n (click)=\"selectSlot('aside')\"\n (keydown.enter)=\"selectSlot('aside')\"\n (keydown.space)=\"selectSlot('aside'); $event.preventDefault()\"\n>\n {{ oc?.aside?.label }}\n</div>\n<div\n data-slot=\"meta\"\n tabindex=\"0\"\n (click)=\"selectSlot('meta')\"\n (keydown.enter)=\"selectSlot('meta')\"\n (keydown.space)=\"selectSlot('meta'); $event.preventDefault()\"\n>\n {{ oc?.meta?.label }}\n</div>\n\n@if (!disableBadgesSlot()) {\n <div\n data-slot=\"badges\"\n tabindex=\"0\"\n (click)=\"selectSlot('badges')\"\n (keydown.enter)=\"selectSlot('badges')\"\n (keydown.space)=\"selectSlot('badges'); $event.preventDefault()\"\n >\n @for (badge of badges(); track badge.id) {\n <yuv-badge-chip [badge]=\"badge\" />\n }\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]):hover{background-color:var(--ymt-focus-background);color:var(--ymt-on-focus-background)}: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{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta])[disabled]{border:none;background-color:transparent}: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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }, { kind: "component", type: BadgeChipComponent, selector: "yuv-badge-chip", inputs: ["badge", "showLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1552
1552
|
}
|
|
1553
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1553
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileConfigTileComponent, decorators: [{
|
|
1554
1554
|
type: Component,
|
|
1555
1555
|
args: [{ selector: 'yuv-tile-config-tile', standalone: true, imports: [MatButtonModule, MatTooltipModule, MatIconModule, ObjectTypeIconComponent, BadgeChipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let oc = _objectConfig();\n\n<div\n data-slot=\"icon\"\n [attr.disabled]=\"disableIconSlot()\"\n tabindex=\"0\"\n (click)=\"selectSlot('icon')\"\n (keydown.enter)=\"selectSlot('icon')\"\n (keydown.space)=\"selectSlot('icon'); $event.preventDefault()\"\n>\n @if (oc && oc.icon) {\n <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">{{ oc.icon.svg }}</mat-icon>\n } @else if (oc && oc.objectTypeId) {\n <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\" />\n }\n</div>\n<div\n data-slot=\"title\"\n tabindex=\"0\"\n (click)=\"selectSlot('title')\"\n (keydown.enter)=\"selectSlot('title')\"\n (keydown.space)=\"selectSlot('title'); $event.preventDefault()\"\n>\n {{ oc?.title?.label }}\n</div>\n<div\n data-slot=\"actions\"\n tabindex=\"0\"\n (click)=\"selectSlot('actions')\"\n (keydown.enter)=\"selectSlot('actions')\"\n (keydown.space)=\"selectSlot('actions'); $event.preventDefault()\"\n>\n @for (a of actions(); track a.id) {\n <button mat-icon-button [matTooltip]=\"a.label\" [attr.inert]=\"true\" aria-hidden=\"true\">\n <mat-icon inert=\"true\" aria-hidden=\"true\">{{ a.icon }}</mat-icon>\n </button>\n }\n</div>\n<div\n data-slot=\"description\"\n tabindex=\"0\"\n (click)=\"selectSlot('description')\"\n (keydown.enter)=\"selectSlot('description')\"\n (keydown.space)=\"selectSlot('description'); $event.preventDefault()\"\n>\n {{ oc?.description?.label }}\n</div>\n<div\n data-slot=\"aside\"\n tabindex=\"0\"\n (click)=\"selectSlot('aside')\"\n (keydown.enter)=\"selectSlot('aside')\"\n (keydown.space)=\"selectSlot('aside'); $event.preventDefault()\"\n>\n {{ oc?.aside?.label }}\n</div>\n<div\n data-slot=\"meta\"\n tabindex=\"0\"\n (click)=\"selectSlot('meta')\"\n (keydown.enter)=\"selectSlot('meta')\"\n (keydown.space)=\"selectSlot('meta'); $event.preventDefault()\"\n>\n {{ oc?.meta?.label }}\n</div>\n\n@if (!disableBadgesSlot()) {\n <div\n data-slot=\"badges\"\n tabindex=\"0\"\n (click)=\"selectSlot('badges')\"\n (keydown.enter)=\"selectSlot('badges')\"\n (keydown.space)=\"selectSlot('badges'); $event.preventDefault()\"\n >\n @for (badge of badges(); track badge.id) {\n <yuv-badge-chip [badge]=\"badge\" />\n }\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]):hover{background-color:var(--ymt-focus-background);color:var(--ymt-on-focus-background)}: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{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta])[disabled]{border:none;background-color:transparent}: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"] }]
|
|
1556
1556
|
}], propDecorators: { disableIconSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableIconSlot", required: false }] }], disableBadgesSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableBadgesSlot", required: false }] }], bucket: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucket", required: false }] }], objectConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectConfig", required: true }] }], slotSelect: [{ type: i0.Output, args: ["slotSelect"] }] } });
|
|
@@ -1612,6 +1612,9 @@ class TileConfigComponent {
|
|
|
1612
1612
|
get configChanged() {
|
|
1613
1613
|
return Object.keys(this.changes).length > 0;
|
|
1614
1614
|
}
|
|
1615
|
+
get isConfigEmpty() {
|
|
1616
|
+
return !!this.selectedType && this.#isEmptyConfig(this.objectConfig);
|
|
1617
|
+
}
|
|
1615
1618
|
#typesEffeconfigTypes;
|
|
1616
1619
|
#emptyObjectConfig;
|
|
1617
1620
|
getConfigValue(value) {
|
|
@@ -1691,13 +1694,26 @@ class TileConfigComponent {
|
|
|
1691
1694
|
}
|
|
1692
1695
|
}
|
|
1693
1696
|
saveConfig() {
|
|
1697
|
+
Object.keys(this.changes).forEach((typeId) => {
|
|
1698
|
+
if (!this.#isEmptyConfig(this.changes[typeId]))
|
|
1699
|
+
return;
|
|
1700
|
+
const substitute = this.#substituteEmptyConfig(typeId, this.changes[typeId]);
|
|
1701
|
+
const effectiveConfig = this.#objectConfigService.getObjectConfig({ id: typeId }, this.bucket());
|
|
1702
|
+
if (this.#deepEqual(substitute, effectiveConfig))
|
|
1703
|
+
delete this.changes[typeId];
|
|
1704
|
+
else
|
|
1705
|
+
this.changes[typeId] = substitute;
|
|
1706
|
+
});
|
|
1694
1707
|
if (Object.keys(this.changes).length) {
|
|
1695
1708
|
this.#objectConfigService.saveObjectConfigs(this.changes, this.bucket()).subscribe((_) => this.save.emit());
|
|
1696
1709
|
}
|
|
1710
|
+
else {
|
|
1711
|
+
this.save.emit();
|
|
1712
|
+
}
|
|
1697
1713
|
}
|
|
1698
1714
|
resetConfig() {
|
|
1699
1715
|
if (this.selectedType) {
|
|
1700
|
-
const defaults = this.#
|
|
1716
|
+
const defaults = this.#getDefaults(this.selectedType.id) ?? this.#emptyObjectConfig;
|
|
1701
1717
|
this.changes[this.selectedType.id] = { ...defaults };
|
|
1702
1718
|
this.objectConfig = { ...defaults };
|
|
1703
1719
|
const originalConfig = this.#objectConfigService.getObjectConfig(this.selectedType, this.bucket());
|
|
@@ -1719,6 +1735,32 @@ class TileConfigComponent {
|
|
|
1719
1735
|
? this.#translate.instant(typeId)
|
|
1720
1736
|
: this.#system.getLocalizedResource(typeId);
|
|
1721
1737
|
}
|
|
1738
|
+
/**
|
|
1739
|
+
* An empty config must not be persisted. Replace it with the type's default
|
|
1740
|
+
* (keeping the user's icon/actions/badges where set). If no default exists at
|
|
1741
|
+
* all, return `undefined` so the stored entry gets deleted on save and the
|
|
1742
|
+
* fallback chain applies at render time.
|
|
1743
|
+
*/
|
|
1744
|
+
#substituteEmptyConfig(typeId, userConfig) {
|
|
1745
|
+
const defaults = this.#getDefaults(typeId);
|
|
1746
|
+
if (!defaults || this.#isEmptyConfig(defaults))
|
|
1747
|
+
return undefined;
|
|
1748
|
+
const merged = { ...defaults };
|
|
1749
|
+
if (userConfig?.icon)
|
|
1750
|
+
merged.icon = userConfig.icon;
|
|
1751
|
+
if (userConfig?.actions?.length)
|
|
1752
|
+
merged.actions = userConfig.actions;
|
|
1753
|
+
if (userConfig?.badges?.length)
|
|
1754
|
+
merged.badges = userConfig.badges;
|
|
1755
|
+
return merged;
|
|
1756
|
+
}
|
|
1757
|
+
#getDefaults(typeId) {
|
|
1758
|
+
const registered = this.#objectConfigService.getRegisteredDefault(typeId, this.bucket());
|
|
1759
|
+
return registered ?? this.#objectConfigService.getDefaultConfig(typeId);
|
|
1760
|
+
}
|
|
1761
|
+
#isEmptyConfig(config) {
|
|
1762
|
+
return !config || ['title', 'description', 'meta', 'aside'].every((slot) => !config[slot]?.propertyName);
|
|
1763
|
+
}
|
|
1722
1764
|
#selectFlavor(flavor) {
|
|
1723
1765
|
const type = this.#system.getObjectType(flavor.sot);
|
|
1724
1766
|
if (type)
|
|
@@ -1758,10 +1800,10 @@ class TileConfigComponent {
|
|
|
1758
1800
|
}
|
|
1759
1801
|
return true;
|
|
1760
1802
|
}
|
|
1761
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1762
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1803
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1804
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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 }, excludeProperties: { classPropertyName: "excludeProperties", publicName: "excludeProperties", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", canceled: "canceled" }, ngImport: i0, template: "<yuv-dialog [headertitle]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n <main class=\"tile-config\">\n <section class=\"picker\">\n <mat-form-field>\n <mat-select [panelWidth]=\"null\" [(ngModel)]=\"selectedType\" (ngModelChange)=\"typeSelected($event)\">\n @for (t of types() || []; track t.id; let i = $index) {\n <mat-option [value]=\"t.data\">{{ getTypeLabel(t.id) }}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n @if (selectedType) {\n <button ymtButton=\"secondary\" (click)=\"resetConfig()\">{{ 'yuv.tile-config.button.reset' | translate }}</button>\n }\n </section>\n\n <section class=\"details\">\n @if (selectedType) {\n <div class=\"dummy-preview\">\n <yuv-tile-config-tile\n [disableIconSlot]=\"true\"\n [objectConfig]=\"objectConfig!\"\n [bucket]=\"bucket()\"\n (slotSelect)=\"slotSelect($event)\"\n />\n </div>\n @if (isConfigEmpty) {\n <section class=\"config-warning\">{{ 'yuv.tile-config.warning.empty' | translate }}</section>\n }\n\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)\" />\n } @else if (selectedSlot === 'badges') {\n <h3>{{ 'yuv.tile-config.slot.badges.headline' | translate }}</h3>\n <yuv-tile-badge-select\n [selectedBadgeIds]=\"getSelectedBadges()\"\n [bucket]=\"bucket()\"\n (badgeSelect)=\"badgeSelected($event)\"\n />\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 />\n } @else {\n <h3>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h3>\n <yuv-tile-property-select\n [objectType]=\"selectedType\"\n [excludeProperties]=\"excludeProperties()\"\n [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n />\n }\n </main>\n } @else {\n <div class=\"placeholder empty\"></div>\n }\n </section>\n </main>\n\n <footer>\n <button ymtButton=\"secondary\" (click)=\"cancelConfig()\">{{ 'yuv.tile-config.button.close' | translate }}</button>\n <button ymtButton=\"primary\" [disabled]=\"!configChanged\" (click)=\"saveConfig()\">\n {{ 'yuv.tile-config.button.save' | translate }}\n </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 .picker{display:flex;justify-content:space-between;gap:var(--ymt-spacing-m);align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host .details{flex:1;display:flex;flex-flow:column;box-sizing:border-box;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{max-width:500px;margin:auto;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)}:host .config-warning{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-warning-container);color:var(--ymt-on-warning-container);border-top:1px solid var(--ymt-outline-variant)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TileConfigTileComponent, selector: "yuv-tile-config-tile", inputs: ["disableIconSlot", "disableBadgesSlot", "bucket", "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", "excludeProperties", "selectedProperty"], outputs: ["propertySelect"] }, { kind: "component", type: ActionSelectComponent, selector: "yuv-tile-action-select", inputs: ["objectType", "selectedActionIds"], outputs: ["actionSelect"] }, { kind: "component", type: BadgeSelectComponent, selector: "yuv-tile-badge-select", inputs: ["selectedBadgeIds", "bucket"], outputs: ["badgeSelect"] }, { kind: "ngmodule", type: YuvListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1763
1805
|
}
|
|
1764
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1806
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileConfigComponent, decorators: [{
|
|
1765
1807
|
type: Component,
|
|
1766
1808
|
args: [{ selector: 'yuv-tile-config', standalone: true, imports: [
|
|
1767
1809
|
FormsModule,
|
|
@@ -1779,7 +1821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1779
1821
|
DialogComponent,
|
|
1780
1822
|
MatFormFieldModule,
|
|
1781
1823
|
YmtButtonDirective
|
|
1782
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<yuv-dialog [headertitle]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n <main class=\"tile-config\">\n <section class=\"picker\">\n <mat-form-field>\n <mat-select [panelWidth]=\"null\" [(ngModel)]=\"selectedType\" (ngModelChange)=\"typeSelected($event)\">\n @for (t of types() || []; track t.id; let i = $index) {\n <mat-option [value]=\"t.data\">{{ getTypeLabel(t.id) }}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n @if (selectedType) {\n <button ymtButton=\"secondary\" (click)=\"resetConfig()\">{{ 'yuv.tile-config.button.reset' | translate }}</button>\n }\n </section>\n\n <section class=\"details\">\n @if (selectedType) {\n <div class=\"dummy-preview\">\n <yuv-tile-config-tile\n [disableIconSlot]=\"true\"\n [objectConfig]=\"objectConfig!\"\n [bucket]=\"bucket()\"\n (slotSelect)=\"slotSelect($event)\"\n />\n </div>\n\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)\" />\n } @else if (selectedSlot === 'badges') {\n <h3>{{ 'yuv.tile-config.slot.badges.headline' | translate }}</h3>\n <yuv-tile-badge-select\n [selectedBadgeIds]=\"getSelectedBadges()\"\n [bucket]=\"bucket()\"\n (badgeSelect)=\"badgeSelected($event)\"\n />\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 />\n } @else {\n <h3>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h3>\n <yuv-tile-property-select\n [objectType]=\"selectedType\"\n [excludeProperties]=\"excludeProperties()\"\n [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n />\n }\n </main>\n } @else {\n <div class=\"placeholder empty\"></div>\n }\n </section>\n </main>\n\n <footer>\n <button ymtButton=\"secondary\" (click)=\"cancelConfig()\">{{ 'yuv.tile-config.button.close' | translate }}</button>\n <button ymtButton=\"primary\" [disabled]=\"!configChanged\" (click)=\"saveConfig()\">\n {{ 'yuv.tile-config.button.save' | translate }}\n </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 .picker{display:flex;justify-content:space-between;gap:var(--ymt-spacing-m);align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host .details{flex:1;display:flex;flex-flow:column;box-sizing:border-box;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{max-width:500px;margin:auto;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"] }]
|
|
1824
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<yuv-dialog [headertitle]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n <main class=\"tile-config\">\n <section class=\"picker\">\n <mat-form-field>\n <mat-select [panelWidth]=\"null\" [(ngModel)]=\"selectedType\" (ngModelChange)=\"typeSelected($event)\">\n @for (t of types() || []; track t.id; let i = $index) {\n <mat-option [value]=\"t.data\">{{ getTypeLabel(t.id) }}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n @if (selectedType) {\n <button ymtButton=\"secondary\" (click)=\"resetConfig()\">{{ 'yuv.tile-config.button.reset' | translate }}</button>\n }\n </section>\n\n <section class=\"details\">\n @if (selectedType) {\n <div class=\"dummy-preview\">\n <yuv-tile-config-tile\n [disableIconSlot]=\"true\"\n [objectConfig]=\"objectConfig!\"\n [bucket]=\"bucket()\"\n (slotSelect)=\"slotSelect($event)\"\n />\n </div>\n @if (isConfigEmpty) {\n <section class=\"config-warning\">{{ 'yuv.tile-config.warning.empty' | translate }}</section>\n }\n\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)\" />\n } @else if (selectedSlot === 'badges') {\n <h3>{{ 'yuv.tile-config.slot.badges.headline' | translate }}</h3>\n <yuv-tile-badge-select\n [selectedBadgeIds]=\"getSelectedBadges()\"\n [bucket]=\"bucket()\"\n (badgeSelect)=\"badgeSelected($event)\"\n />\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 />\n } @else {\n <h3>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h3>\n <yuv-tile-property-select\n [objectType]=\"selectedType\"\n [excludeProperties]=\"excludeProperties()\"\n [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n />\n }\n </main>\n } @else {\n <div class=\"placeholder empty\"></div>\n }\n </section>\n </main>\n\n <footer>\n <button ymtButton=\"secondary\" (click)=\"cancelConfig()\">{{ 'yuv.tile-config.button.close' | translate }}</button>\n <button ymtButton=\"primary\" [disabled]=\"!configChanged\" (click)=\"saveConfig()\">\n {{ 'yuv.tile-config.button.save' | translate }}\n </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 .picker{display:flex;justify-content:space-between;gap:var(--ymt-spacing-m);align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host .details{flex:1;display:flex;flex-flow:column;box-sizing:border-box;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{max-width:500px;margin:auto;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)}:host .config-warning{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-warning-container);color:var(--ymt-on-warning-container);border-top:1px solid var(--ymt-outline-variant)}\n"] }]
|
|
1783
1825
|
}], propDecorators: { bucket: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucket", required: false }] }], bucketLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucketLabel", required: false }] }], configTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "configTypes", required: false }] }], configFlavors: [{ type: i0.Input, args: [{ isSignal: true, alias: "configFlavors", required: false }] }], excludeProperties: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeProperties", required: false }] }], save: [{ type: i0.Output, args: ["save"] }], canceled: [{ type: i0.Output, args: ["canceled"] }] } });
|
|
1784
1826
|
|
|
1785
1827
|
class TileConfigTriggerComponent {
|
|
@@ -1811,10 +1853,10 @@ class TileConfigTriggerComponent {
|
|
|
1811
1853
|
if (this.#dialogRef)
|
|
1812
1854
|
this.#dialogRef.close();
|
|
1813
1855
|
}
|
|
1814
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1815
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
1856
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileConfigTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1857
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.20", type: TileConfigTriggerComponent, isStandalone: true, selector: "yuv-tile-config-trigger", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, bucketLabel: { classPropertyName: "bucketLabel", publicName: "bucketLabel", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tplTileConfig", first: true, predicate: ["tplTileConfig"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n ymt-icon-button\n [icon-button-size]=\"small() ? 'small' : 'medium'\"\n class=\"settings icon\"\n (click)=\"openTileConfigOverlay()\"\n [matTooltip]=\"'yuv.tile-config.trigger.tooltip' | translate\"\n>\n <mat-icon>settings</mat-icon>\n</button>\n\n<ng-template #tplTileConfig>\n <yuv-tile-config\n (save)=\"onObjectConfigSave()\"\n (canceled)=\"onObjectConfigCancel()\"\n [bucket]=\"bucket() || undefined\"\n [bucketLabel]=\"bucketLabel()\"\n [configTypes]=\"options()?.configTypes\"\n [configFlavors]=\"options()?.configFlavors || []\"\n />\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: TileConfigComponent, selector: "yuv-tile-config", inputs: ["bucket", "bucketLabel", "configTypes", "configFlavors", "excludeProperties"], outputs: ["save", "canceled"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe$1, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1816
1858
|
}
|
|
1817
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1859
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileConfigTriggerComponent, decorators: [{
|
|
1818
1860
|
type: Component,
|
|
1819
1861
|
args: [{ selector: 'yuv-tile-config-trigger', standalone: true, imports: [TileConfigComponent, TranslatePipe$1, YmtIconButtonDirective, MatButtonModule, MatTooltipModule, MatIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n ymt-icon-button\n [icon-button-size]=\"small() ? 'small' : 'medium'\"\n class=\"settings icon\"\n (click)=\"openTileConfigOverlay()\"\n [matTooltip]=\"'yuv.tile-config.trigger.tooltip' | translate\"\n>\n <mat-icon>settings</mat-icon>\n</button>\n\n<ng-template #tplTileConfig>\n <yuv-tile-config\n (save)=\"onObjectConfigSave()\"\n (canceled)=\"onObjectConfigCancel()\"\n [bucket]=\"bucket() || undefined\"\n [bucketLabel]=\"bucketLabel()\"\n [configTypes]=\"options()?.configTypes\"\n [configFlavors]=\"options()?.configFlavors || []\"\n />\n</ng-template>\n" }]
|
|
1820
1862
|
}], propDecorators: { tplTileConfig: [{ type: i0.ViewChild, args: ['tplTileConfig', { isSignal: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], bucket: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucket", required: false }] }], bucketLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucketLabel", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }] } });
|
|
@@ -1830,8 +1872,8 @@ class EmailTileExtensionComponent {
|
|
|
1830
1872
|
this.attachments = computed(() => this.data()['appSystemmail:attachments'] || [], ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
|
|
1831
1873
|
this.hasAttachements = computed(() => !!this.data()['appSystemmail:attachmentCount'], ...(ngDevMode ? [{ debugName: "hasAttachements" }] : /* istanbul ignore next */ []));
|
|
1832
1874
|
}
|
|
1833
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1834
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1875
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: EmailTileExtensionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1876
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: EmailTileExtensionComponent, isStandalone: true, selector: "yuv-email-tile-extension", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.attachments": "hasAttachements()" } }, ngImport: i0, template: `
|
|
1835
1877
|
@if (hasAttachements()) {
|
|
1836
1878
|
<span>{{ attachments().length }}</span>
|
|
1837
1879
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5f6368" viewBox="0 -960 960 960">
|
|
@@ -1842,7 +1884,7 @@ class EmailTileExtensionComponent {
|
|
|
1842
1884
|
}
|
|
1843
1885
|
`, isInline: true, styles: [":host{display:flex;justify-content:end;margin-top:.5rem}:host .icon{height:1rem}\n"] }); }
|
|
1844
1886
|
}
|
|
1845
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: EmailTileExtensionComponent, decorators: [{
|
|
1846
1888
|
type: Component,
|
|
1847
1889
|
args: [{ selector: 'yuv-email-tile-extension', standalone: true, imports: [], template: `
|
|
1848
1890
|
@if (hasAttachements()) {
|
|
@@ -1891,10 +1933,10 @@ class TileExtensionService {
|
|
|
1891
1933
|
getTileExtension(typeId) {
|
|
1892
1934
|
return this.shellService.getTileExtension(typeId);
|
|
1893
1935
|
}
|
|
1894
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1895
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
1936
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileExtensionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1937
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileExtensionService, providedIn: 'root' }); }
|
|
1896
1938
|
}
|
|
1897
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1939
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileExtensionService, decorators: [{
|
|
1898
1940
|
type: Injectable,
|
|
1899
1941
|
args: [{
|
|
1900
1942
|
providedIn: 'root'
|