@yuuvis/client-framework 3.1.0 → 3.2.1
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 +209 -126
- package/fesm2022/yuuvis-client-framework-actions.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-app-bar.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-app-bar.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-badges.mjs +379 -0
- package/fesm2022/yuuvis-client-framework-badges.mjs.map +1 -0
- package/fesm2022/yuuvis-client-framework-breadcrumb.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-breadcrumb.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-clipboard.mjs +8 -8
- package/fesm2022/yuuvis-client-framework-clipboard.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-datepicker.mjs +31 -31
- package/fesm2022/yuuvis-client-framework-datepicker.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-forms.mjs +65 -66
- package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-icons.mjs +9 -9
- package/fesm2022/yuuvis-client-framework-icons.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-metadata-form.mjs +15 -15
- package/fesm2022/yuuvis-client-framework-metadata-form.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-details.mjs +53 -46
- package/fesm2022/yuuvis-client-framework-object-details.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs +18 -18
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-form.mjs +32 -32
- 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-preview.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-relationship.mjs +28 -28
- package/fesm2022/yuuvis-client-framework-object-relationship.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-summary.mjs +14 -14
- package/fesm2022/yuuvis-client-framework-object-summary.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-versions.mjs +18 -12
- 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-pagination.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-query-list.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-query-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-renderer.mjs +39 -39
- package/fesm2022/yuuvis-client-framework-renderer.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-sequence-list.mjs +3 -3
- 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-simple-search.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-sort.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-sort.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-tile-list.mjs +163 -125
- 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-token-search.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-tree.mjs +9 -9
- package/fesm2022/yuuvis-client-framework-tree.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-upload-progress.mjs +10 -10
- package/fesm2022/yuuvis-client-framework-upload-progress.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework.mjs +96 -51
- package/fesm2022/yuuvis-client-framework.mjs.map +1 -1
- package/lib/assets/i18n/de.json +12 -1
- package/lib/assets/i18n/en.json +12 -1
- package/package.json +9 -5
- package/types/yuuvis-client-framework-actions.d.ts +81 -52
- package/types/yuuvis-client-framework-badges.d.ts +194 -0
- package/types/yuuvis-client-framework-object-details.d.ts +5 -5
- package/types/yuuvis-client-framework-object-versions.d.ts +1 -0
- package/types/yuuvis-client-framework-tile-list.d.ts +10 -6
- package/types/yuuvis-client-framework.d.ts +13 -0
|
@@ -12,6 +12,7 @@ import * as i1$2 from '@angular/forms';
|
|
|
12
12
|
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
13
13
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
14
14
|
import { ActionsService } from '@yuuvis/client-framework/actions';
|
|
15
|
+
import { TileBadgesComponent, BadgeRegistryService, BadgeChipComponent, BadgeSelectComponent } from '@yuuvis/client-framework/badges';
|
|
15
16
|
import * as i1 from '@yuuvis/client-framework/list';
|
|
16
17
|
import { YuvListModule } from '@yuuvis/client-framework/list';
|
|
17
18
|
import * as i2 from '@yuuvis/client-framework/query-list';
|
|
@@ -44,10 +45,10 @@ class TileActionsMenuComponent {
|
|
|
44
45
|
return;
|
|
45
46
|
this.itemSelect.emit(action);
|
|
46
47
|
}
|
|
47
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
48
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
48
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileActionsMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
49
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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 [hasBackdrop]=\"false\">\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 }); }
|
|
49
50
|
}
|
|
50
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
51
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileActionsMenuComponent, decorators: [{
|
|
51
52
|
type: Component,
|
|
52
53
|
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 [hasBackdrop]=\"false\">\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"] }]
|
|
53
54
|
}], 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 }] }] } });
|
|
@@ -75,10 +76,10 @@ class TileExtensionService {
|
|
|
75
76
|
getTileExtension(typeId) {
|
|
76
77
|
return this._extensions[typeId];
|
|
77
78
|
}
|
|
78
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
79
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
79
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileExtensionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
80
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileExtensionService, providedIn: 'root' }); }
|
|
80
81
|
}
|
|
81
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
82
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileExtensionService, decorators: [{
|
|
82
83
|
type: Injectable,
|
|
83
84
|
args: [{
|
|
84
85
|
providedIn: 'root'
|
|
@@ -108,10 +109,10 @@ class TileExtensionDirective {
|
|
|
108
109
|
this.component = this.#containerRef.createComponent(ext.cmp);
|
|
109
110
|
this.component.setInput('data', data);
|
|
110
111
|
}
|
|
111
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
112
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.
|
|
112
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileExtensionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
113
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: TileExtensionDirective, isStandalone: true, selector: "[yuvTileExtension]", inputs: { yuvTileExtension: { classPropertyName: "yuvTileExtension", publicName: "yuvTileExtension", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
113
114
|
}
|
|
114
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
115
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileExtensionDirective, decorators: [{
|
|
115
116
|
type: Directive,
|
|
116
117
|
args: [{
|
|
117
118
|
selector: '[yuvTileExtension]',
|
|
@@ -717,7 +718,10 @@ class TileListComponent {
|
|
|
717
718
|
* @param event The originating mouse event (used to suppress default and for positioning).
|
|
718
719
|
* @param _index Zero-based index of the right-clicked tile.
|
|
719
720
|
*/
|
|
720
|
-
|
|
721
|
+
badgeIdsFor(item) {
|
|
722
|
+
return item.badges?.map((badge) => badge.id);
|
|
723
|
+
}
|
|
724
|
+
contextMenuHandler(event, index) {
|
|
721
725
|
if (this.disableCustomContextMenu())
|
|
722
726
|
return;
|
|
723
727
|
event.preventDefault();
|
|
@@ -1208,10 +1212,10 @@ class TileListComponent {
|
|
|
1208
1212
|
#preselectEffect;
|
|
1209
1213
|
#closeMenuEffect;
|
|
1210
1214
|
#outsideClickCloseEffect;
|
|
1211
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1212
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1215
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1216
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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, 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 }); }
|
|
1213
1217
|
}
|
|
1214
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1218
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileListComponent, decorators: [{
|
|
1215
1219
|
type: Component,
|
|
1216
1220
|
args: [{ selector: 'yuv-tile-list', standalone: true, providers: [], imports: [
|
|
1217
1221
|
TranslatePipe,
|
|
@@ -1221,32 +1225,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1221
1225
|
YuvListModule,
|
|
1222
1226
|
RendererDirective,
|
|
1223
1227
|
TileExtensionDirective,
|
|
1228
|
+
TileBadgesComponent,
|
|
1224
1229
|
YmtIconButtonDirective,
|
|
1225
1230
|
...MATERIAL_IMPORTS
|
|
1226
1231
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1227
1232
|
'[class.dense]': 'dense()',
|
|
1228
1233
|
'(keydown.control.c)': 'onCopy($event)',
|
|
1229
1234
|
'(keydown.control.x)': 'onCut($event)'
|
|
1230
|
-
}, 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, data: item.instanceData }\" />\n </ng-template>\n <ng-template #badgesSlot
|
|
1235
|
+
}, 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, 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"] }]
|
|
1231
1236
|
}], ctorParameters: () => [], propDecorators: { menuComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TileActionsMenuComponent), { isSignal: true }] }], emptyContent: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], menuTriggers: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatMenuTrigger), { isSignal: true }] }], bucket: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucket", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], multiselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselect", required: false }] }], dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], flavor: [{ type: i0.Input, args: [{ isSignal: true, alias: "flavor", required: false }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], preselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "preselect", required: false }] }], highlights: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlights", required: false }] }], preventChangeUntil: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventChangeUntil", required: false }] }], autoSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelect", required: false }] }], disableCustomContextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableCustomContextMenu", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], tileCopy: [{ type: i0.Output, args: ["tileCopy"] }], tileCut: [{ type: i0.Output, args: ["tileCut"] }], busy: [{ type: i0.Output, args: ["busy"] }], queryResult: [{ type: i0.Output, args: ["queryResult"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], itemDblClick: [{ type: i0.Output, args: ["itemDblClick"] }], ctxMenu: [{ type: i0.Output, args: ["ctxMenu"] }] } });
|
|
1232
1237
|
|
|
1233
1238
|
class ActionSelectComponent {
|
|
1234
1239
|
constructor() {
|
|
1235
|
-
this
|
|
1240
|
+
this.#actionService = inject(ActionsService);
|
|
1236
1241
|
this.objectType = input.required(...(ngDevMode ? [{ debugName: "objectType" }] : /* istanbul ignore next */ []));
|
|
1237
|
-
this.actions = computed(() => {
|
|
1238
|
-
const ot = this.objectType();
|
|
1239
|
-
return ot.objectType ? this.actionService.getActionsForType(ot.objectType) : [];
|
|
1240
|
-
}, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
|
|
1241
1242
|
this.selectedActionIds = input([], ...(ngDevMode ? [{ debugName: "selectedActionIds" }] : /* istanbul ignore next */ []));
|
|
1242
1243
|
this.actionSelect = output();
|
|
1244
|
+
this.actions = computed(() => {
|
|
1245
|
+
const oType = this.objectType();
|
|
1246
|
+
return oType.objectType ? this.#actionService.getActionsForType(oType.objectType) : [];
|
|
1247
|
+
}, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
|
|
1243
1248
|
}
|
|
1244
|
-
|
|
1245
|
-
static { this.ɵ
|
|
1249
|
+
#actionService;
|
|
1250
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ActionSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1251
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 } @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" }] }); }
|
|
1246
1252
|
}
|
|
1247
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1253
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ActionSelectComponent, decorators: [{
|
|
1248
1254
|
type: Component,
|
|
1249
|
-
args: [{ selector: 'yuv-tile-action-select',
|
|
1255
|
+
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"] }]
|
|
1250
1256
|
}], 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"] }] } });
|
|
1251
1257
|
|
|
1252
1258
|
class PropertySelectComponent {
|
|
@@ -1340,10 +1346,10 @@ class PropertySelectComponent {
|
|
|
1340
1346
|
_getLabel(otf) {
|
|
1341
1347
|
return this.system.getLocalizedLabel(otf.id) || otf.id;
|
|
1342
1348
|
}
|
|
1343
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1344
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1349
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: PropertySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1350
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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\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"] }] }); }
|
|
1345
1351
|
}
|
|
1346
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: PropertySelectComponent, decorators: [{
|
|
1347
1353
|
type: Component,
|
|
1348
1354
|
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"] }]
|
|
1349
1355
|
}], propDecorators: { objectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectType", required: false }] }], selectedProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedProperty", required: false }] }], propertySelect: [{ type: i0.Output, args: ["propertySelect"] }] } });
|
|
@@ -1368,10 +1374,10 @@ class IconSelectComponent {
|
|
|
1368
1374
|
#emit(data) {
|
|
1369
1375
|
this.iconSelect.emit(data);
|
|
1370
1376
|
}
|
|
1371
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1372
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
1377
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IconSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1378
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", 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" }] }); }
|
|
1373
1379
|
}
|
|
1374
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1380
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IconSelectComponent, decorators: [{
|
|
1375
1381
|
type: Component,
|
|
1376
1382
|
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"] }]
|
|
1377
1383
|
}], propDecorators: { objectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectType", required: false }] }], iconSelect: [{ type: i0.Output, args: ["iconSelect"] }] } });
|
|
@@ -1381,58 +1387,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1381
1387
|
*/
|
|
1382
1388
|
class TileConfigTileComponent {
|
|
1383
1389
|
constructor() {
|
|
1384
|
-
this
|
|
1385
|
-
this
|
|
1390
|
+
this.#actionService = inject(ActionsService);
|
|
1391
|
+
this.#elRef = inject(ElementRef);
|
|
1386
1392
|
this.#system = inject(SystemService);
|
|
1387
|
-
this
|
|
1388
|
-
this.
|
|
1393
|
+
this.#badges = inject(BadgeRegistryService);
|
|
1394
|
+
this.disableIconSlot = input(false, ...(ngDevMode ? [{ debugName: "disableIconSlot" }] : /* istanbul ignore next */ []));
|
|
1395
|
+
this.disableBadgesSlot = input(false, ...(ngDevMode ? [{ debugName: "disableBadgesSlot" }] : /* istanbul ignore next */ []));
|
|
1396
|
+
this.bucket = input(...(ngDevMode ? [undefined, { debugName: "bucket" }] : /* istanbul ignore next */ []));
|
|
1389
1397
|
this.objectConfig = input.required(...(ngDevMode ? [{ debugName: "objectConfig" }] : /* istanbul ignore next */ []));
|
|
1390
1398
|
this._objectConfig = computed(() => {
|
|
1391
|
-
const
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
}
|
|
1400
|
-
return oc;
|
|
1399
|
+
const objectConfig = this.objectConfig();
|
|
1400
|
+
[objectConfig.title, objectConfig.description, objectConfig.meta, objectConfig.aside].forEach((field) => {
|
|
1401
|
+
if (field) {
|
|
1402
|
+
const label = this.#system.getLocalizedLabel(field.propertyName);
|
|
1403
|
+
field.label = label || field.label || field.propertyName;
|
|
1404
|
+
}
|
|
1405
|
+
});
|
|
1406
|
+
return objectConfig;
|
|
1401
1407
|
}, ...(ngDevMode ? [{ debugName: "_objectConfig" }] : /* istanbul ignore next */ []));
|
|
1408
|
+
this.badges = computed(() => {
|
|
1409
|
+
const configBadges = this.objectConfig().badges;
|
|
1410
|
+
if (!configBadges?.length)
|
|
1411
|
+
return [];
|
|
1412
|
+
const bucket = this.bucket();
|
|
1413
|
+
return configBadges
|
|
1414
|
+
.map((entry) => this.#badges.get(entry.id, bucket))
|
|
1415
|
+
.filter((badge) => badge !== undefined)
|
|
1416
|
+
.sort((first, second) => (first.priority ?? 0) - (second.priority ?? 0));
|
|
1417
|
+
}, ...(ngDevMode ? [{ debugName: "badges" }] : /* istanbul ignore next */ []));
|
|
1402
1418
|
this.actions = computed(() => {
|
|
1403
1419
|
const actionsList = [];
|
|
1404
1420
|
const ocActions = this.objectConfig();
|
|
1405
|
-
if (ocActions
|
|
1406
|
-
ocActions.actions
|
|
1407
|
-
const
|
|
1408
|
-
if (
|
|
1409
|
-
actionsList.push(
|
|
1421
|
+
if (ocActions.actions?.length) {
|
|
1422
|
+
ocActions.actions.forEach((action) => {
|
|
1423
|
+
const actionById = this.#actionService.getActionById(action.id);
|
|
1424
|
+
if (actionById)
|
|
1425
|
+
actionsList.push(actionById);
|
|
1410
1426
|
});
|
|
1411
1427
|
}
|
|
1412
1428
|
return actionsList;
|
|
1413
1429
|
}, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
|
|
1414
1430
|
this.slotSelect = output();
|
|
1415
1431
|
}
|
|
1432
|
+
#actionService;
|
|
1433
|
+
#elRef;
|
|
1416
1434
|
#system;
|
|
1435
|
+
#badges;
|
|
1417
1436
|
selectSlot(slot) {
|
|
1418
1437
|
if (this.disableIconSlot() && slot === 'icon')
|
|
1419
1438
|
return;
|
|
1420
1439
|
this.slotSelect.emit(slot);
|
|
1421
1440
|
// set active state
|
|
1422
|
-
this
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
}
|
|
1429
|
-
static { this.ɵ
|
|
1430
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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\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\"></yuv-object-type-icon>\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@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 {{ 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]):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"] }] }); }
|
|
1441
|
+
this.#elRef.nativeElement
|
|
1442
|
+
.querySelectorAll('[data-slot]')
|
|
1443
|
+
.forEach((element) => element.getAttribute('data-slot') === slot
|
|
1444
|
+
? element.classList.add('active')
|
|
1445
|
+
: element.classList.remove('active'));
|
|
1446
|
+
}
|
|
1447
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileConfigTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1448
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 }, 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 }); }
|
|
1431
1449
|
}
|
|
1432
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1450
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileConfigTileComponent, decorators: [{
|
|
1433
1451
|
type: Component,
|
|
1434
|
-
args: [{ selector: 'yuv-tile-config-tile', standalone: true, imports: [MatButtonModule, MatTooltipModule, MatIconModule, ObjectTypeIconComponent], 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\"
|
|
1435
|
-
}], propDecorators: { disableIconSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableIconSlot", required: false }] }], disableBadgesSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableBadgesSlot", required: false }] }], objectConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectConfig", required: true }] }], slotSelect: [{ type: i0.Output, args: ["slotSelect"] }] } });
|
|
1452
|
+
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"] }]
|
|
1453
|
+
}], 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"] }] } });
|
|
1436
1454
|
|
|
1437
1455
|
class TileConfigComponent {
|
|
1438
1456
|
constructor() {
|
|
@@ -1450,21 +1468,21 @@ class TileConfigComponent {
|
|
|
1450
1468
|
this.configTypes = input(undefined, ...(ngDevMode ? [{ debugName: "configTypes" }] : /* istanbul ignore next */ []));
|
|
1451
1469
|
this.configFlavors = input([], ...(ngDevMode ? [{ debugName: "configFlavors" }] : /* istanbul ignore next */ []));
|
|
1452
1470
|
this.types = computed(() => {
|
|
1453
|
-
const
|
|
1454
|
-
const
|
|
1471
|
+
const configTypes = this.configTypes() || [];
|
|
1472
|
+
const configFlavors = [];
|
|
1455
1473
|
// TODO: enable when flavors are supported in tile config
|
|
1456
1474
|
// const cf = this.configFlavors() || [];
|
|
1457
1475
|
return [
|
|
1458
|
-
...
|
|
1459
|
-
...
|
|
1476
|
+
...configTypes.map((types) => ({ id: types.id, icon: types.icon, data: types })),
|
|
1477
|
+
...configFlavors.map((flavors) => ({ id: flavors.id, icon: flavors.icon, flavor: true, data: flavors }))
|
|
1460
1478
|
];
|
|
1461
1479
|
}, ...(ngDevMode ? [{ debugName: "types" }] : /* istanbul ignore next */ []));
|
|
1462
|
-
this.#
|
|
1463
|
-
const
|
|
1464
|
-
if (
|
|
1465
|
-
this.typeSelected(
|
|
1480
|
+
this.#typesEffeconfigTypes = effect(() => {
|
|
1481
|
+
const types = this.types();
|
|
1482
|
+
if (types.length && !this.selectedType) {
|
|
1483
|
+
this.typeSelected(types[0]);
|
|
1466
1484
|
}
|
|
1467
|
-
}, ...(ngDevMode ? [{ debugName: "#
|
|
1485
|
+
}, ...(ngDevMode ? [{ debugName: "#typesEffeconfigTypes" }] : /* istanbul ignore next */ []));
|
|
1468
1486
|
this.save = output();
|
|
1469
1487
|
this.canceled = output();
|
|
1470
1488
|
this.selectedTypeProperties = [];
|
|
@@ -1486,50 +1504,31 @@ class TileConfigComponent {
|
|
|
1486
1504
|
get configChanged() {
|
|
1487
1505
|
return Object.keys(this.changes).length > 0;
|
|
1488
1506
|
}
|
|
1489
|
-
#
|
|
1507
|
+
#typesEffeconfigTypes;
|
|
1490
1508
|
#emptyObjectConfig;
|
|
1491
|
-
getConfigValue(
|
|
1492
|
-
return this.objectConfig ? this.objectConfig[
|
|
1509
|
+
getConfigValue(value) {
|
|
1510
|
+
return this.objectConfig ? this.objectConfig[value] : undefined;
|
|
1493
1511
|
}
|
|
1494
|
-
getConfigProperty(
|
|
1495
|
-
return this.getConfigValue(
|
|
1512
|
+
getConfigProperty(value) {
|
|
1513
|
+
return this.getConfigValue(value);
|
|
1496
1514
|
}
|
|
1497
1515
|
getSelectedActions() {
|
|
1498
|
-
return this.objectConfig?.actions ? this.objectConfig.actions.map((
|
|
1516
|
+
return this.objectConfig?.actions ? this.objectConfig.actions.map((action) => action.id) : [];
|
|
1517
|
+
}
|
|
1518
|
+
getSelectedBadges() {
|
|
1519
|
+
return this.objectConfig?.badges ? this.objectConfig.badges.map((badge) => badge.id) : [];
|
|
1499
1520
|
}
|
|
1500
1521
|
slotSelect(item) {
|
|
1501
1522
|
this.selectedSlot = item;
|
|
1502
1523
|
}
|
|
1503
|
-
typeSelected(
|
|
1504
|
-
const
|
|
1505
|
-
if (!
|
|
1524
|
+
typeSelected(innerType) {
|
|
1525
|
+
const types = this.types().find((type) => type.id === innerType.id);
|
|
1526
|
+
if (!types)
|
|
1506
1527
|
return;
|
|
1507
|
-
if (
|
|
1508
|
-
this.#selectFlavor(
|
|
1528
|
+
if (types.flavor)
|
|
1529
|
+
this.#selectFlavor(types.data);
|
|
1509
1530
|
else
|
|
1510
|
-
this.#selectType(
|
|
1511
|
-
}
|
|
1512
|
-
#selectFlavor(flavor) {
|
|
1513
|
-
const t = this.#system.getObjectType(flavor.sot);
|
|
1514
|
-
if (t)
|
|
1515
|
-
this.#selectType({
|
|
1516
|
-
id: flavor.id,
|
|
1517
|
-
objectType: flavor.objectTypeID,
|
|
1518
|
-
sots: [flavor.sot]
|
|
1519
|
-
});
|
|
1520
|
-
}
|
|
1521
|
-
async #selectType(t) {
|
|
1522
|
-
this.selectedType = t;
|
|
1523
|
-
const alreadyChanged = this.changes[t.id];
|
|
1524
|
-
// load tile config
|
|
1525
|
-
// if the type has been changed before load that config instead of the persisted one
|
|
1526
|
-
this.objectConfig = { ...(alreadyChanged || this.#objectConfigService.getObjectConfig(t, this.bucket() || '')) };
|
|
1527
|
-
if (!this.objectConfig) {
|
|
1528
|
-
this.objectConfig = {
|
|
1529
|
-
...this.#emptyObjectConfig,
|
|
1530
|
-
objectTypeId: t.id
|
|
1531
|
-
};
|
|
1532
|
-
}
|
|
1531
|
+
this.#selectType(types.data);
|
|
1533
1532
|
}
|
|
1534
1533
|
iconSelected(icon) {
|
|
1535
1534
|
if (!this.selectedType)
|
|
@@ -1542,8 +1541,8 @@ class TileConfigComponent {
|
|
|
1542
1541
|
propertySelected(tileSlot, field) {
|
|
1543
1542
|
if (!this.selectedType)
|
|
1544
1543
|
return;
|
|
1545
|
-
const
|
|
1546
|
-
|
|
1544
|
+
const property = {};
|
|
1545
|
+
property[tileSlot] = field
|
|
1547
1546
|
? {
|
|
1548
1547
|
label: field.label,
|
|
1549
1548
|
propertyName: field.id
|
|
@@ -1551,7 +1550,7 @@ class TileConfigComponent {
|
|
|
1551
1550
|
: null;
|
|
1552
1551
|
this.objectConfig = structuredClone({
|
|
1553
1552
|
...this.objectConfig,
|
|
1554
|
-
...
|
|
1553
|
+
...property
|
|
1555
1554
|
});
|
|
1556
1555
|
this.changes[this.selectedType.id] = this.objectConfig;
|
|
1557
1556
|
}
|
|
@@ -1560,7 +1559,7 @@ class TileConfigComponent {
|
|
|
1560
1559
|
return;
|
|
1561
1560
|
if (this.objectConfig) {
|
|
1562
1561
|
const actions = this.objectConfig?.actions ? [...this.objectConfig.actions] : [];
|
|
1563
|
-
const idx = actions.findIndex((
|
|
1562
|
+
const idx = actions.findIndex((actions) => actions.id === action.id);
|
|
1564
1563
|
if (idx !== -1)
|
|
1565
1564
|
actions.splice(idx, 1);
|
|
1566
1565
|
else
|
|
@@ -1569,6 +1568,20 @@ class TileConfigComponent {
|
|
|
1569
1568
|
this.changes[this.selectedType.id] = { ...this.objectConfig };
|
|
1570
1569
|
}
|
|
1571
1570
|
}
|
|
1571
|
+
badgeSelected(badge) {
|
|
1572
|
+
if (!this.selectedType)
|
|
1573
|
+
return;
|
|
1574
|
+
if (this.objectConfig) {
|
|
1575
|
+
const badges = this.objectConfig.badges ? [...this.objectConfig.badges] : [];
|
|
1576
|
+
const idx = badges.findIndex((existing) => existing.id === badge.id);
|
|
1577
|
+
if (idx !== -1)
|
|
1578
|
+
badges.splice(idx, 1);
|
|
1579
|
+
else
|
|
1580
|
+
badges.push({ id: badge.id });
|
|
1581
|
+
this.objectConfig = { ...this.objectConfig, badges };
|
|
1582
|
+
this.changes[this.selectedType.id] = { ...this.objectConfig };
|
|
1583
|
+
}
|
|
1584
|
+
}
|
|
1572
1585
|
saveConfig() {
|
|
1573
1586
|
if (Object.keys(this.changes).length) {
|
|
1574
1587
|
this.#objectConfigService.saveObjectConfigs(this.changes, this.bucket()).subscribe((_) => this.save.emit());
|
|
@@ -1594,29 +1607,53 @@ class TileConfigComponent {
|
|
|
1594
1607
|
this.canceled.emit();
|
|
1595
1608
|
}
|
|
1596
1609
|
getTypeLabel(typeId) {
|
|
1597
|
-
return !this.#translate.instant(typeId).includes('!missing key')
|
|
1610
|
+
return !this.#translate.instant(typeId).includes('!missing key')
|
|
1611
|
+
? this.#translate.instant(typeId)
|
|
1612
|
+
: this.#system.getLocalizedResource(typeId);
|
|
1613
|
+
}
|
|
1614
|
+
#selectFlavor(flavor) {
|
|
1615
|
+
const type = this.#system.getObjectType(flavor.sot);
|
|
1616
|
+
if (type)
|
|
1617
|
+
this.#selectType({
|
|
1618
|
+
id: flavor.id,
|
|
1619
|
+
objectType: flavor.objectTypeID,
|
|
1620
|
+
sots: [flavor.sot]
|
|
1621
|
+
});
|
|
1622
|
+
}
|
|
1623
|
+
#selectType(type) {
|
|
1624
|
+
this.selectedType = type;
|
|
1625
|
+
const alreadyChanged = this.changes[type.id];
|
|
1626
|
+
// load tile config
|
|
1627
|
+
// if the type has been changed before load that config instead of the persisted one
|
|
1628
|
+
this.objectConfig = { ...(alreadyChanged || this.#objectConfigService.getObjectConfig(type, this.bucket() || '')) };
|
|
1629
|
+
if (!this.objectConfig) {
|
|
1630
|
+
this.objectConfig = {
|
|
1631
|
+
...this.#emptyObjectConfig,
|
|
1632
|
+
objectTypeId: type.id
|
|
1633
|
+
};
|
|
1634
|
+
}
|
|
1598
1635
|
}
|
|
1599
|
-
#deepEqual(
|
|
1600
|
-
if (
|
|
1636
|
+
#deepEqual(valueA, valueB) {
|
|
1637
|
+
if (valueA === valueB)
|
|
1601
1638
|
return true;
|
|
1602
|
-
if (typeof
|
|
1639
|
+
if (typeof valueA !== 'object' || typeof valueB !== 'object' || valueA === null || valueB === null)
|
|
1603
1640
|
return false;
|
|
1604
|
-
const keysA = Object.keys(
|
|
1605
|
-
const keysB = Object.keys(
|
|
1641
|
+
const keysA = Object.keys(valueA);
|
|
1642
|
+
const keysB = Object.keys(valueB);
|
|
1606
1643
|
if (keysA.length !== keysB.length)
|
|
1607
1644
|
return false;
|
|
1608
1645
|
for (const key of keysA) {
|
|
1609
1646
|
if (!keysB.includes(key))
|
|
1610
1647
|
return false;
|
|
1611
|
-
if (!this.#deepEqual(
|
|
1648
|
+
if (!this.#deepEqual(valueA[key], valueB[key]))
|
|
1612
1649
|
return false;
|
|
1613
1650
|
}
|
|
1614
1651
|
return true;
|
|
1615
1652
|
}
|
|
1616
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1617
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1653
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1654
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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", 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\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 [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"], 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", "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 }); }
|
|
1618
1655
|
}
|
|
1619
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1656
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileConfigComponent, decorators: [{
|
|
1620
1657
|
type: Component,
|
|
1621
1658
|
args: [{ selector: 'yuv-tile-config', standalone: true, imports: [
|
|
1622
1659
|
FormsModule,
|
|
@@ -1624,6 +1661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1624
1661
|
IconSelectComponent,
|
|
1625
1662
|
PropertySelectComponent,
|
|
1626
1663
|
ActionSelectComponent,
|
|
1664
|
+
BadgeSelectComponent,
|
|
1627
1665
|
TranslatePipe,
|
|
1628
1666
|
YuvListModule,
|
|
1629
1667
|
MatIconModule,
|
|
@@ -1633,7 +1671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1633
1671
|
DialogComponent,
|
|
1634
1672
|
MatFormFieldModule,
|
|
1635
1673
|
YmtButtonDirective
|
|
1636
|
-
], template: "<yuv-dialog [
|
|
1674
|
+
], 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 [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"] }]
|
|
1637
1675
|
}], 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 }] }], save: [{ type: i0.Output, args: ["save"] }], canceled: [{ type: i0.Output, args: ["canceled"] }] } });
|
|
1638
1676
|
|
|
1639
1677
|
class TileConfigTriggerComponent {
|
|
@@ -1665,12 +1703,12 @@ class TileConfigTriggerComponent {
|
|
|
1665
1703
|
if (this.#dialogRef)
|
|
1666
1704
|
this.#dialogRef.close();
|
|
1667
1705
|
}
|
|
1668
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1669
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
1706
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileConfigTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1707
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", 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"], 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 }); }
|
|
1670
1708
|
}
|
|
1671
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1709
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileConfigTriggerComponent, decorators: [{
|
|
1672
1710
|
type: Component,
|
|
1673
|
-
args: [{ selector: 'yuv-tile-config-trigger', standalone: true, imports: [TileConfigComponent, TranslatePipe$1, YmtIconButtonDirective, MatButtonModule, MatTooltipModule, MatIcon], template: "<button ymt-icon-button
|
|
1711
|
+
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" }]
|
|
1674
1712
|
}], 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 }] }] } });
|
|
1675
1713
|
|
|
1676
1714
|
class EmailTileExtensionComponent {
|
|
@@ -1684,8 +1722,8 @@ class EmailTileExtensionComponent {
|
|
|
1684
1722
|
evt.stopPropagation();
|
|
1685
1723
|
alert(`You clicked '${a}' my friend.`);
|
|
1686
1724
|
}
|
|
1687
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1688
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1725
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EmailTileExtensionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1726
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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: `
|
|
1689
1727
|
@if (hasAttachements()) {
|
|
1690
1728
|
<span>{{ attachments().length }}</span>
|
|
1691
1729
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5f6368" viewBox="0 -960 960 960">
|
|
@@ -1696,7 +1734,7 @@ class EmailTileExtensionComponent {
|
|
|
1696
1734
|
}
|
|
1697
1735
|
`, isInline: true, styles: [":host{display:flex;justify-content:end;margin-top:.5rem}:host .icon{height:1rem}\n"] }); }
|
|
1698
1736
|
}
|
|
1699
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1737
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EmailTileExtensionComponent, decorators: [{
|
|
1700
1738
|
type: Component,
|
|
1701
1739
|
args: [{ selector: 'yuv-email-tile-extension', standalone: true, imports: [], template: `
|
|
1702
1740
|
@if (hasAttachements()) {
|