@yuuvis/client-framework 3.0.0 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/yuuvis-client-framework-forms.mjs +702 -613
- package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs +4 -3
- package/fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-metadata-form.mjs +4 -2
- package/fesm2022/yuuvis-client-framework-metadata-form.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-details.mjs +173 -173
- package/fesm2022/yuuvis-client-framework-object-details.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-form.mjs +9 -5
- package/fesm2022/yuuvis-client-framework-object-form.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-relationship.mjs +1 -1
- package/fesm2022/yuuvis-client-framework-object-relationship.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-summary.mjs +2 -2
- package/fesm2022/yuuvis-client-framework-object-summary.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-renderer.mjs +1 -1
- package/fesm2022/yuuvis-client-framework-renderer.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-sequence-list.mjs +47 -35
- package/fesm2022/yuuvis-client-framework-sequence-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-tile-list.mjs +34 -17
- package/fesm2022/yuuvis-client-framework-tile-list.mjs.map +1 -1
- package/lib/assets/i18n/de.json +22 -22
- package/lib/assets/i18n/en.json +12 -12
- package/package.json +6 -6
- package/types/yuuvis-client-framework-forms.d.ts +215 -186
- package/types/yuuvis-client-framework-object-details.d.ts +99 -99
- package/types/yuuvis-client-framework-sequence-list.d.ts +2 -2
- package/types/yuuvis-client-framework-tile-list.d.ts +3 -2
|
@@ -3,7 +3,6 @@ import { input, output, viewChild, ChangeDetectionStrategy, Component, forwardRe
|
|
|
3
3
|
import * as i3 from '@angular/material/icon';
|
|
4
4
|
import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
5
5
|
import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
|
|
6
|
-
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
|
7
6
|
import * as i4 from '@angular/material/tooltip';
|
|
8
7
|
import { MatTooltip, MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipModule } from '@angular/material/tooltip';
|
|
9
8
|
import { ObjectConfigService, DmsService, SearchService, DmsObject, BaseObjectTypeField, TranslatePipe, SystemService, ContentStreamField, Utils, Sort } from '@yuuvis/client-core';
|
|
@@ -24,7 +23,7 @@ import { NgClass } from '@angular/common';
|
|
|
24
23
|
import * as i1$1 from '@angular/material/button';
|
|
25
24
|
import { MatButtonModule } from '@angular/material/button';
|
|
26
25
|
import { MatDialogModule, MatDialog } from '@angular/material/dialog';
|
|
27
|
-
import { TranslatePipe as TranslatePipe$1 } from '@ngx-translate/core';
|
|
26
|
+
import { TranslateService, TranslatePipe as TranslatePipe$1 } from '@ngx-translate/core';
|
|
28
27
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
29
28
|
import * as i2$1 from '@angular/material/select';
|
|
30
29
|
import { MatSelectModule } from '@angular/material/select';
|
|
@@ -46,19 +45,11 @@ class TileActionsMenuComponent {
|
|
|
46
45
|
this.itemSelect.emit(action);
|
|
47
46
|
}
|
|
48
47
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TileActionsMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
49
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TileActionsMenuComponent, isStandalone: true, selector: "yuv-tile-actions-menu", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, providers: [{ provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: { position: 'right' } }], viewQueries: [{ propertyName: "matMenu", first: true, predicate: ["menuRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-menu #menuRef>\n <!-- @if (loading() && !actions().length) {\n <div class=\"loading-indicator\">\n <mat-spinner diameter=\"24\"></mat-spinner>\n </div>\n } -->\n @for (action of actions(); track action.id) {\n @if (action.children?.length) {\n <span [matTooltip]=\"action.description\" [matTooltipDisabled]=\"!action.description\">\n <button\n mat-menu-item\n [disabled]=\"!!action.disabled\"\n [attr.disabled]=\"!!action.disabled\"\n [matMenuTriggerFor]=\"subMenu.matMenu()\"\n >\n @if (action.icon) {\n <mat-icon>{{ action.icon }}</mat-icon>\n }\n <span>{{ action.label }}</span>\n </button>\n <yuv-tile-actions-menu #subMenu [actions]=\"action.children!\" (itemSelect)=\"itemSelect.emit($event)\" />\n </span>\n } @else {\n <span [matTooltip]=\"action.description\" [matTooltipDisabled]=\"!action.description\">\n <button\n mat-menu-item\n [disabled]=\"!!action.disabled\"\n [attr.disabled]=\"!!action.disabled\"\n (click)=\"itemClicked($event, action)\"\n >\n @if (action.icon) {\n <mat-icon>{{ action.icon }}</mat-icon>\n }\n <span>{{ action.label }}</span>\n </button>\n </span>\n }\n }\n</mat-menu>\n", styles: [":host{display:block}.loading-indicator{display:flex;justify-content:center;padding:8px 16px}button[mat-menu-item][disabled]{opacity:var(--ymt-disabled-opacity, .38);cursor:default;pointer-events:none}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => TileActionsMenuComponent), selector: "yuv-tile-actions-menu", inputs: ["actions", "loading"], outputs: ["itemSelect"] }, { kind: "component", type: i0.forwardRef(() => MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i0.forwardRef(() => MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
48
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }); }
|
|
50
49
|
}
|
|
51
50
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TileActionsMenuComponent, decorators: [{
|
|
52
51
|
type: Component,
|
|
53
|
-
args: [{ selector: 'yuv-tile-actions-menu', imports: [
|
|
54
|
-
MatMenu,
|
|
55
|
-
MatIcon,
|
|
56
|
-
MatMenuItem,
|
|
57
|
-
MatMenuTrigger,
|
|
58
|
-
MatProgressSpinner,
|
|
59
|
-
MatTooltip,
|
|
60
|
-
forwardRef(() => TileActionsMenuComponent)
|
|
61
|
-
], providers: [{ provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: { position: 'right' } }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-menu #menuRef>\n <!-- @if (loading() && !actions().length) {\n <div class=\"loading-indicator\">\n <mat-spinner diameter=\"24\"></mat-spinner>\n </div>\n } -->\n @for (action of actions(); track action.id) {\n @if (action.children?.length) {\n <span [matTooltip]=\"action.description\" [matTooltipDisabled]=\"!action.description\">\n <button\n mat-menu-item\n [disabled]=\"!!action.disabled\"\n [attr.disabled]=\"!!action.disabled\"\n [matMenuTriggerFor]=\"subMenu.matMenu()\"\n >\n @if (action.icon) {\n <mat-icon>{{ action.icon }}</mat-icon>\n }\n <span>{{ action.label }}</span>\n </button>\n <yuv-tile-actions-menu #subMenu [actions]=\"action.children!\" (itemSelect)=\"itemSelect.emit($event)\" />\n </span>\n } @else {\n <span [matTooltip]=\"action.description\" [matTooltipDisabled]=\"!action.description\">\n <button\n mat-menu-item\n [disabled]=\"!!action.disabled\"\n [attr.disabled]=\"!!action.disabled\"\n (click)=\"itemClicked($event, action)\"\n >\n @if (action.icon) {\n <mat-icon>{{ action.icon }}</mat-icon>\n }\n <span>{{ action.label }}</span>\n </button>\n </span>\n }\n }\n</mat-menu>\n", styles: [":host{display:block}.loading-indicator{display:flex;justify-content:center;padding:8px 16px}button[mat-menu-item][disabled]{opacity:var(--ymt-disabled-opacity, .38);cursor:default;pointer-events:none}\n"] }]
|
|
52
|
+
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"] }]
|
|
62
53
|
}], 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 }] }] } });
|
|
63
54
|
|
|
64
55
|
class TileExtensionService {
|
|
@@ -556,9 +547,29 @@ class TileListComponent {
|
|
|
556
547
|
});
|
|
557
548
|
onCleanup(() => closeMenu$.unsubscribe());
|
|
558
549
|
};
|
|
550
|
+
this.#outsideClickCloseEffect = (onCleanup) => {
|
|
551
|
+
if (!this.menuComponent())
|
|
552
|
+
return;
|
|
553
|
+
const handler = (event) => {
|
|
554
|
+
const openTriggers = this.menuTriggers().filter((trigger) => trigger.menuOpen);
|
|
555
|
+
if (openTriggers.length === 0)
|
|
556
|
+
return;
|
|
557
|
+
const target = event.target;
|
|
558
|
+
if (!target)
|
|
559
|
+
return;
|
|
560
|
+
if (target.closest('.mat-mdc-menu-panel'))
|
|
561
|
+
return;
|
|
562
|
+
if (target.closest('[aria-expanded="true"][aria-haspopup="menu"]'))
|
|
563
|
+
return;
|
|
564
|
+
openTriggers.forEach((trigger) => trigger.closeMenu());
|
|
565
|
+
};
|
|
566
|
+
document.addEventListener('click', handler, true);
|
|
567
|
+
onCleanup(() => document.removeEventListener('click', handler, true));
|
|
568
|
+
};
|
|
559
569
|
effect(this.#flavorEffect);
|
|
560
570
|
effect(this.#preselectEffect);
|
|
561
571
|
effect(this.#closeMenuEffect);
|
|
572
|
+
effect(this.#outsideClickCloseEffect);
|
|
562
573
|
}
|
|
563
574
|
//#region Lifecycle hooks
|
|
564
575
|
ngOnInit() {
|
|
@@ -704,9 +715,9 @@ class TileListComponent {
|
|
|
704
715
|
* external callers.
|
|
705
716
|
*
|
|
706
717
|
* @param event The originating mouse event (used to suppress default and for positioning).
|
|
707
|
-
* @param
|
|
718
|
+
* @param _index Zero-based index of the right-clicked tile.
|
|
708
719
|
*/
|
|
709
|
-
contextMenuHandler(event,
|
|
720
|
+
contextMenuHandler(event, _index) {
|
|
710
721
|
if (this.disableCustomContextMenu())
|
|
711
722
|
return;
|
|
712
723
|
event.preventDefault();
|
|
@@ -892,7 +903,7 @@ class TileListComponent {
|
|
|
892
903
|
return { index: idx, value };
|
|
893
904
|
})
|
|
894
905
|
.filter((update) => update !== undefined);
|
|
895
|
-
this.#resolveInlineActionsDisabledState(updates.map((
|
|
906
|
+
this.#resolveInlineActionsDisabledState(updates.map((update) => update.value));
|
|
896
907
|
this.updateListItems(updates);
|
|
897
908
|
}
|
|
898
909
|
/**
|
|
@@ -1196,6 +1207,7 @@ class TileListComponent {
|
|
|
1196
1207
|
#flavorEffect;
|
|
1197
1208
|
#preselectEffect;
|
|
1198
1209
|
#closeMenuEffect;
|
|
1210
|
+
#outsideClickCloseEffect;
|
|
1199
1211
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1200
1212
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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>{{ item.badges }}</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: "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 }); }
|
|
1201
1213
|
}
|
|
@@ -1426,6 +1438,7 @@ class TileConfigComponent {
|
|
|
1426
1438
|
constructor() {
|
|
1427
1439
|
this.#objectConfigService = inject(ObjectConfigService);
|
|
1428
1440
|
this.#system = inject(SystemService);
|
|
1441
|
+
this.#translate = inject(TranslateService);
|
|
1429
1442
|
/**
|
|
1430
1443
|
* Tile configurations are stored globally for all apps. If you want a
|
|
1431
1444
|
* separate config for your app/component you can specify a bucket. A bucket
|
|
@@ -1469,6 +1482,7 @@ class TileConfigComponent {
|
|
|
1469
1482
|
}
|
|
1470
1483
|
#objectConfigService;
|
|
1471
1484
|
#system;
|
|
1485
|
+
#translate;
|
|
1472
1486
|
get configChanged() {
|
|
1473
1487
|
return Object.keys(this.changes).length > 0;
|
|
1474
1488
|
}
|
|
@@ -1579,6 +1593,9 @@ class TileConfigComponent {
|
|
|
1579
1593
|
this.changes = {};
|
|
1580
1594
|
this.canceled.emit();
|
|
1581
1595
|
}
|
|
1596
|
+
getTypeLabel(typeId) {
|
|
1597
|
+
return !this.#translate.instant(typeId).includes('!missing key') ? this.#translate.instant(typeId) : this.#system.getLocalizedLabel(typeId);
|
|
1598
|
+
}
|
|
1582
1599
|
#deepEqual(a, b) {
|
|
1583
1600
|
if (a === b)
|
|
1584
1601
|
return true;
|
|
@@ -1597,7 +1614,7 @@ class TileConfigComponent {
|
|
|
1597
1614
|
return true;
|
|
1598
1615
|
}
|
|
1599
1616
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TileConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1600
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 [headertitel]=\"'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\">{{ t.id
|
|
1617
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 [headertitel]=\"'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 [disableBadgesSlot]=\"true\"\n [objectConfig]=\"objectConfig!\"\n (slotSelect)=\"slotSelect($event)\"\n ></yuv-tile-config-tile>\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)\"></yuv-icon-select>\n } @else if (selectedSlot === 'badges') {\n <div class=\"placeholder empty\">\n <p>Future feature: Select badges (like: is favorite, ratings, ...)</p>\n </div>\n } @else if (!selectedSlot) {\n } @else if (selectedSlot === 'actions') {\n <h3>{{ 'yuv.tile-config.slot.action.headline' | translate }}</h3>\n <yuv-tile-action-select\n [objectType]=\"selectedType\"\n [selectedActionIds]=\"getSelectedActions()\"\n (actionSelect)=\"actionSelected($event)\"\n ></yuv-tile-action-select>\n } @else {\n <h3>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h3>\n <yuv-tile-property-select\n [objectType]=\"selectedType\"\n [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n ></yuv-tile-property-select>\n }\n </main>\n } @else {\n <div class=\"placeholder empty\"></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()\">{{ 'yuv.tile-config.button.save' | translate }}</button>\n </footer>\n</yuv-dialog>\n", styles: [":host{display:flex;height:100%;flex-flow:column}:host main.tile-config{height:100%;display:contents}:host .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", "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: "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" }] }); }
|
|
1601
1618
|
}
|
|
1602
1619
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TileConfigComponent, decorators: [{
|
|
1603
1620
|
type: Component,
|
|
@@ -1616,7 +1633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1616
1633
|
DialogComponent,
|
|
1617
1634
|
MatFormFieldModule,
|
|
1618
1635
|
YmtButtonDirective
|
|
1619
|
-
], template: "<yuv-dialog [headertitel]=\"'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\">{{ t.id
|
|
1636
|
+
], template: "<yuv-dialog [headertitel]=\"'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 [disableBadgesSlot]=\"true\"\n [objectConfig]=\"objectConfig!\"\n (slotSelect)=\"slotSelect($event)\"\n ></yuv-tile-config-tile>\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)\"></yuv-icon-select>\n } @else if (selectedSlot === 'badges') {\n <div class=\"placeholder empty\">\n <p>Future feature: Select badges (like: is favorite, ratings, ...)</p>\n </div>\n } @else if (!selectedSlot) {\n } @else if (selectedSlot === 'actions') {\n <h3>{{ 'yuv.tile-config.slot.action.headline' | translate }}</h3>\n <yuv-tile-action-select\n [objectType]=\"selectedType\"\n [selectedActionIds]=\"getSelectedActions()\"\n (actionSelect)=\"actionSelected($event)\"\n ></yuv-tile-action-select>\n } @else {\n <h3>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h3>\n <yuv-tile-property-select\n [objectType]=\"selectedType\"\n [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n ></yuv-tile-property-select>\n }\n </main>\n } @else {\n <div class=\"placeholder empty\"></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()\">{{ 'yuv.tile-config.button.save' | translate }}</button>\n </footer>\n</yuv-dialog>\n", styles: [":host{display:flex;height:100%;flex-flow:column}:host main.tile-config{height:100%;display:contents}:host .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"] }]
|
|
1620
1637
|
}], 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"] }] } });
|
|
1621
1638
|
|
|
1622
1639
|
class TileConfigTriggerComponent {
|