@yuuvis/client-framework 2.3.20 → 2.3.21
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 +16 -16
- package/fesm2022/yuuvis-client-framework-app-bar.mjs +4 -4
- package/fesm2022/yuuvis-client-framework-app-bar.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-autocomplete.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-clipboard.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-common.mjs +64 -64
- package/fesm2022/yuuvis-client-framework-datepicker.mjs +31 -31
- package/fesm2022/yuuvis-client-framework-forms.mjs +43 -43
- package/fesm2022/yuuvis-client-framework-icons.mjs +10 -10
- package/fesm2022/yuuvis-client-framework-icons.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-list.mjs +10 -10
- package/fesm2022/yuuvis-client-framework-master-details.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-metadata-form.mjs +15 -15
- package/fesm2022/yuuvis-client-framework-object-details.mjs +28 -28
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs +18 -18
- package/fesm2022/yuuvis-client-framework-object-form.mjs +28 -28
- package/fesm2022/yuuvis-client-framework-object-preview.mjs +11 -11
- package/fesm2022/yuuvis-client-framework-object-preview.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-summary.mjs +13 -13
- package/fesm2022/yuuvis-client-framework-object-versions.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-overflow-hidden.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-overflow-menu.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-pagination.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-popout.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-renderer.mjs +41 -41
- 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-simple-search.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-sort.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-split-view.mjs +10 -10
- package/fesm2022/yuuvis-client-framework-tile-list.mjs +69 -51
- package/fesm2022/yuuvis-client-framework-tile-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-tree.mjs +9 -9
- package/fesm2022/yuuvis-client-framework-upload-progress.mjs +10 -10
- package/fesm2022/yuuvis-client-framework-widget-grid.mjs +28 -28
- package/fesm2022/yuuvis-client-framework.mjs +10 -10
- package/lib/assets/i18n/en.json +5 -5
- package/package.json +4 -4
- package/tile-list/lib/tile-config/tile-config.component.d.ts +9 -7
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { NgClass, NgStyle, CommonModule } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
3
|
import { Injectable, inject, ViewContainerRef, input, effect, Directive, ElementRef, computed, Component, DestroyRef, contentChild, viewChildren, signal, output, untracked, HostBinding, HostListener, viewChild } from '@angular/core';
|
|
4
|
-
import * as i1$
|
|
4
|
+
import * as i1$3 from '@yuuvis/client-core';
|
|
5
5
|
import { DmsService, ObjectConfigService, SystemService, SearchService, EventService, YuvEventType, BaseObjectTypeField, DmsObject, TranslateModule, ContentStreamField, Utils, Sort } from '@yuuvis/client-core';
|
|
6
6
|
import { ClickDoubleDirective, DragSelectDirective, DragSelectItemDirective, DialogComponent } from '@yuuvis/client-framework/common';
|
|
7
7
|
import * as i1 from '@angular/material/icon';
|
|
@@ -16,16 +16,18 @@ import { MatTooltipModule } from '@angular/material/tooltip';
|
|
|
16
16
|
import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
|
|
17
17
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
18
18
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
19
|
+
import * as i1$4 from '@angular/forms';
|
|
19
20
|
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
20
21
|
import * as i2$1 from '@angular/material/paginator';
|
|
21
22
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
22
23
|
import { YUV_ICONS, ObjectTypeIconComponent } from '@yuuvis/client-framework/icons';
|
|
23
|
-
import * as
|
|
24
|
+
import * as i1$2 from '@yuuvis/client-framework/list';
|
|
24
25
|
import { ListItemDirective, YuvListModule } from '@yuuvis/client-framework/list';
|
|
25
26
|
import { DeviceService, YmtMatIconRegistryService, YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
|
|
26
27
|
import { MatDialogModule, MatDialog } from '@angular/material/dialog';
|
|
27
|
-
import
|
|
28
|
-
import
|
|
28
|
+
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
29
|
+
import * as i3 from '@angular/material/select';
|
|
30
|
+
import { MatSelectModule } from '@angular/material/select';
|
|
29
31
|
import { TranslateModule as TranslateModule$1 } from '@ngx-translate/core';
|
|
30
32
|
|
|
31
33
|
class TileExtensionService {
|
|
@@ -51,10 +53,10 @@ class TileExtensionService {
|
|
|
51
53
|
getTileExtension(typeId) {
|
|
52
54
|
return this._extensions[typeId];
|
|
53
55
|
}
|
|
54
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
55
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
56
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileExtensionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
57
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileExtensionService, providedIn: 'root' }); }
|
|
56
58
|
}
|
|
57
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileExtensionService, decorators: [{
|
|
58
60
|
type: Injectable,
|
|
59
61
|
args: [{
|
|
60
62
|
providedIn: 'root'
|
|
@@ -84,10 +86,10 @@ class TileExtensionDirective {
|
|
|
84
86
|
this.component = this.#containerRef.createComponent(ext.cmp);
|
|
85
87
|
this.component.setInput('data', data);
|
|
86
88
|
}
|
|
87
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
88
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
89
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileExtensionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
90
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TileExtensionDirective, isStandalone: true, selector: "[yuvTileExtension]", inputs: { yuvTileExtension: { classPropertyName: "yuvTileExtension", publicName: "yuvTileExtension", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
89
91
|
}
|
|
90
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
92
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileExtensionDirective, decorators: [{
|
|
91
93
|
type: Directive,
|
|
92
94
|
args: [{
|
|
93
95
|
selector: '[yuvTileExtension]',
|
|
@@ -134,10 +136,10 @@ class TileComponent {
|
|
|
134
136
|
.pipe(switchMap((o) => a.run([o])))
|
|
135
137
|
.subscribe();
|
|
136
138
|
}
|
|
137
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
138
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
139
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
140
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TileComponent, isStandalone: true, selector: "yuv-tile", inputs: { tile: { classPropertyName: "tile", publicName: "tile", isSignal: true, isRequired: true, transformFunction: null }, actionContext: { classPropertyName: "actionContext", publicName: "actionContext", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dense": "dense()" } }, ngImport: i0, template: "<div class=\"tile\">\n <div data-slot=\"icon\">\n <ng-container *yuvRenderer=\"rendererInputs().icon\"></ng-container>\n </div>\n \n <div class=\"slots\">\n <div data-slot=\"title-description\">\n <div data-slot=\"title\">\n <ng-container *yuvRenderer=\"rendererInputs().title\"></ng-container>\n </div>\n <div data-slot=\"description\">\n <ng-container *yuvRenderer=\"rendererInputs().description\"></ng-container>\n </div>\n </div>\n \n <div data-slot=\"actions\">\n @for (a of actions(); track a.id) {\n <button mat-icon-button [matTooltip]=\"a.label\" (click)=\"executeAction(a, $event)\">\n <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n </button>\n }\n </div>\n \n <div data-slot=\"aside\">\n <ng-container *yuvRenderer=\"rendererInputs().aside\"></ng-container>\n </div>\n \n <div data-slot=\"meta\">\n <ng-container *yuvRenderer=\"rendererInputs().meta\"></ng-container>\n </div>\n \n <div data-slot=\"badges\">{{ tile().badges }}</div>\n \n <div class=\"extension\">\n <ng-container *yuvTileExtension=\"{ typeId: tile().objectTypeId, data: tile().instanceData }\"></ng-container>\n </div>\n </div>\n</div>\n", styles: [":host{--tile-margin: var(--ymt-spacing-xs);--tile-padding-inline: var(--ymt-spacing-2xl);--tile-padding-block: var(--ymt-spacing-l)}:host.dense .tile{--tile-padding-inline: var(--ymt-spacing-m);--tile-padding-block: var(--ymt-spacing-s);--tile-margin: var(--ymt-spacing-xs);gap:var(--ymt-spacing-s)}:host.dense .tile [data-slot=aside],:host.dense .tile [data-slot=meta],:host.dense .tile [data-slot=actions]{display:none}:host.dense .tile [data-slot=icon]{--icon-renderer-icon-size: 18px}:host:hover:not([aria-selected=true]) .tile{--tile-background: var(--ymt-hover-background)}:host[aria-selected=true] .tile{--tile-background: var(--ymt-selection-background)}:host[aria-current=true] .tile{--tile-background: var(--ymt-focus-background)}:host .tile{display:flex;align-items:center;background-color:var(--tile-background, transparent);padding:calc(var(--tile-padding-block) - var(--tile-margin)) calc(var(--tile-padding-inline) - var(--tile-margin));transition:background-color var(--transition-duration, .1s);position:relative;color:var(--ymt-text-color);border-radius:var(--ymt-corner-s);margin:var(--tile-margin);gap:var(--ymt-spacing-m)}:host .tile .slots{display:grid;grid-template-rows:repeat(4,auto);grid-template-columns:auto;grid-template-areas:\"title-description title-description actions\" \"meta meta aside\" \"badges badges badges\" \"ext ext ext\";flex:1}:host .tile [data-slot]{-webkit-user-select:none;user-select:none;display:grid;align-self:baseline;word-break:break-word}:host .tile [data-slot=icon]{--icon-renderer-icon-size: var(--tile-icon-size);grid-area:icon;display:flex;align-self:flex-start}:host .tile [data-slot=title-description]{grid-area:title-description;display:grid;grid-template-areas:\"title\" \"description\";align-self:flex-start}:host .tile [data-slot=title]{font:var(--tile-font-title, var(--ymt-font-title-smallest));grid-area:title;align-self:flex-start;--tile-slot-padding: 0}:host .tile [data-slot=description]{grid-area:description;font:var(--tile-font-description, var(--ymt-font-body));color:var(--ymt-text-color-subtle);--tile-slot-padding: 0}:host .tile [data-slot=meta]{grid-area:meta;font:var(--tile-font-meta, var(--ymt-font-body-subtle));color:var(--ymt-text-color-subtle);--tile-slot-padding: var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) 0}:host .tile [data-slot=aside]{flex:0 0 auto;grid-area:aside;font:var(--tile-font-aside, var(--ymt-font-body-subtle));color:var(--ymt-text-color-subtle);justify-content:flex-end;text-align:right;--tile-slot-padding: var(--ymt-spacing-2xs)}:host .tile [data-slot=actions]{opacity:.2;transition:opacity var(--_transition-duration);pointer-events:none;display:flex;justify-content:flex-end;padding-block-end:var(--ymt-spacing-2xs);gap:var(--ymt-spacing-3xs)}:host .tile:hover [data-slot=actions]{opacity:1;pointer-events:all}:host .tile [data-slot=actions]{grid-area:actions;flex:0 0 auto;display:flex;align-items:start}:host .tile [data-slot=actions] button{gap:2px}:host .tile [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host .tile .extension{grid-area:ext}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "directive", type: TileExtensionDirective, selector: "[yuvTileExtension]", inputs: ["yuvTileExtension"] }] }); }
|
|
139
141
|
}
|
|
140
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileComponent, decorators: [{
|
|
141
143
|
type: Component,
|
|
142
144
|
args: [{ selector: 'yuv-tile', standalone: true, imports: [MatIconModule, MatTooltipModule, MatButtonModule, RendererDirective, TileExtensionDirective], host: {
|
|
143
145
|
'[class.dense]': 'dense()'
|
|
@@ -638,10 +640,10 @@ class TileListComponent {
|
|
|
638
640
|
ngOnDestroy() {
|
|
639
641
|
this._keyManager?.destroy();
|
|
640
642
|
}
|
|
641
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
642
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
643
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
644
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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 } }, outputs: { itemSelect: "itemSelect", tileCopy: "tileCopy", tileCut: "tileCut", busy: "busy", queryResult: "queryResult", selectionChange: "selectionChange", itemDblClick: "itemDblClick", ctxMenu: "ctxMenu" }, host: { attributes: { "tabindex": "0", "role": "listbox" }, listeners: { "contextmenu": "onContextMenu($event)", "mousedown": "onMouseDown($event)", "keydown.control.c": "onCopy($event)", "keydown.control.x": "onCut($event)", "keydown": "onKeydown($event)" }, properties: { "class.dense": "dense()", "class.pagination": "this.pagination" } }, providers: [], queries: [{ propertyName: "emptyContent", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tiles", predicate: TileComponent, descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ListItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"tiles\"\n [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n (dragSelectChange)=\"onDragSelectChange($event)\"\n (dragSelect)=\"onDragSelect($event)\"\n>\n @for (i of items; track i.id) {\n <yuv-tile\n [dense]=\"dense()\"\n yuvDragSelectItem\n yuvListItem\n [attr.aria-selected]=\"selection().includes(i.id)\"\n (click.single)=\"select(i, $event)\"\n (click.double)=\"itemDblClick.emit(i)\"\n [ngClass]=\"{ selected: selection().includes(i.id), last: $last }\"\n [actionContext]=\"options()?.actionContext\"\n [tile]=\"i\"\n [ngStyle]=\"highlightStyles()[i.id]\"\n (contextmenu)=\"contextMenuHandler($event, $index)\"\n ></yuv-tile>\n } @empty {\n <div class=\"empyt-list\">\n @if (searchExecuted && emptyContent()) {\n <ng-content></ng-content>\n }\n </div>\n }\n <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</div>\n@if (pagination) {\n <mat-paginator\n class=\"paginator\"\n [length]=\"pagination?.total\"\n [pageSize]=\"getPageSize()\"\n (page)=\"changePage($event)\"\n hidePageSize\n >\n </mat-paginator>\n}\n", styles: [":host{--tile-current-background: var(--ymt-focus-background);--tile-on-current: var(--ymt-on-focus-background);--tile-selected-background: var(--ymt-selection-background);--tile-on-selected: var(--ymt-on-selection-background);--tile-selected-icon-fill: var(--ymt-primary);--tile-gap: 0px;--tile-border: var(--tile-border-width, 1px) solid var(--ymt-outline-variant);--tile-border-width: 1px;--tile-icon-size: initial;--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host .tiles{overflow-y:auto;display:flex;flex-flow:column;height:100%}:host .tiles yuv-tile{flex:0 0 auto}:host .tiles .offset{flex:1 1 auto}:host .paginator{border-block-start:1px solid var(--ymt-outline-variant);font:inherit;background-color:var(--paging-background)}:host yuv-tile{cursor:pointer}:host yuv-tile:not(.last){border:var(--tile-border);border-width:var(--tile-border-width);margin-block-end:var(--tile-gap)}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TileComponent, selector: "yuv-tile", inputs: ["tile", "actionContext", "dense"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: YuvListModule }, { kind: "directive", type: i1$2.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "directive", type: ClickDoubleDirective, selector: "[click.single],[click.double]", inputs: ["debounceTime"], outputs: ["click.double", "click.single"] }, { kind: "directive", type: DragSelectDirective, selector: "[yuvDragSelect]", inputs: ["yuvDragSelect"], outputs: ["dragSelectChange", "dragSelect"] }, { kind: "directive", type: DragSelectItemDirective, selector: "[yuvDragSelectItem]" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
|
|
643
645
|
}
|
|
644
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
646
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileListComponent, decorators: [{
|
|
645
647
|
type: Component,
|
|
646
648
|
args: [{ selector: 'yuv-tile-list', standalone: true, providers: [], imports: [
|
|
647
649
|
NgClass,
|
|
@@ -690,10 +692,10 @@ class ActionSelectComponent {
|
|
|
690
692
|
this.selectedActionIds = input([]);
|
|
691
693
|
this.actionSelect = output();
|
|
692
694
|
}
|
|
693
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
694
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
695
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ActionSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
696
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ActionSelectComponent, isStandalone: true, selector: "yuv-tile-action-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: true, transformFunction: null }, selectedActionIds: { classPropertyName: "selectedActionIds", publicName: "selectedActionIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelect: "actionSelect" }, ngImport: i0, template: "<div class=\"actions\">\n @for (a of actions(); track a.id) {\n <button [ngClass]=\"{ selected: selectedActionIds().includes(a.id) }\" (click)=\"actionSelect.emit(a)\">\n <mat-icon>{{ a.icon }}</mat-icon\n >{{ a.label }}\n </button>\n }\n</div>\n", styles: [":host .actions{display:flex;gap:var(--ymt-spacing-xs)}:host .actions button{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);border:0;display:inline-flex;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);align-items:center;border-radius:var(--ymt-corner-s)}:host .actions button.selected{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
695
697
|
}
|
|
696
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
698
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ActionSelectComponent, decorators: [{
|
|
697
699
|
type: Component,
|
|
698
700
|
args: [{ selector: 'yuv-tile-action-select', standalone: true, imports: [NgClass, MatIconModule], template: "<div class=\"actions\">\n @for (a of actions(); track a.id) {\n <button [ngClass]=\"{ selected: selectedActionIds().includes(a.id) }\" (click)=\"actionSelect.emit(a)\">\n <mat-icon>{{ a.icon }}</mat-icon\n >{{ a.label }}\n </button>\n }\n</div>\n", styles: [":host .actions{display:flex;gap:var(--ymt-spacing-xs)}:host .actions button{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);border:0;display:inline-flex;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);align-items:center;border-radius:var(--ymt-corner-s)}:host .actions button.selected{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}\n"] }]
|
|
699
701
|
}] });
|
|
@@ -718,10 +720,10 @@ class IconSelectComponent {
|
|
|
718
720
|
#emit(data) {
|
|
719
721
|
this.iconSelect.emit(data);
|
|
720
722
|
}
|
|
721
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
722
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
723
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IconSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
724
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", 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: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
|
|
723
725
|
}
|
|
724
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
726
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IconSelectComponent, decorators: [{
|
|
725
727
|
type: Component,
|
|
726
728
|
args: [{ selector: 'yuv-icon-select', standalone: true, imports: [CommonModule, TranslateModule], 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"] }]
|
|
727
729
|
}] });
|
|
@@ -773,24 +775,31 @@ class PropertySelectComponent {
|
|
|
773
775
|
getObjectTypeFields(type) {
|
|
774
776
|
if (!type)
|
|
775
777
|
return [];
|
|
776
|
-
|
|
777
|
-
const otf = [];
|
|
778
|
+
const otf = {};
|
|
778
779
|
if (type.sots && type.sots.length > 0) {
|
|
779
780
|
type.sots.forEach((s) => {
|
|
780
781
|
const sot = this.system.getSecondaryObjectType(s);
|
|
781
782
|
if (sot)
|
|
782
|
-
sot.fields.forEach((of) => otf.
|
|
783
|
+
sot.fields.forEach((of) => otf[of.id] = {
|
|
783
784
|
id: of.id,
|
|
784
785
|
label: this._getLabel(of)
|
|
785
|
-
})
|
|
786
|
+
});
|
|
786
787
|
});
|
|
787
788
|
}
|
|
788
|
-
let objectTypeProperties =
|
|
789
|
+
let objectTypeProperties = {};
|
|
789
790
|
if (type.objectType) {
|
|
790
791
|
const ot = this.system.getObjectType(type.objectType);
|
|
791
|
-
|
|
792
|
+
if (ot) {
|
|
793
|
+
ot.fields.forEach((of) => {
|
|
794
|
+
objectTypeProperties[of.id] = {
|
|
795
|
+
id: of.id,
|
|
796
|
+
label: this._getLabel(of),
|
|
797
|
+
baseProperty: true
|
|
798
|
+
};
|
|
799
|
+
});
|
|
800
|
+
}
|
|
792
801
|
}
|
|
793
|
-
this.objectTypeFields = [...objectTypeProperties, ...otf]
|
|
802
|
+
this.objectTypeFields = [...Object.values(objectTypeProperties), ...Object.values(otf)]
|
|
794
803
|
.filter((f) => f.id && !this.#excludeFields.includes(f.id))
|
|
795
804
|
// sort alphanummeric by label
|
|
796
805
|
.sort(Utils.sortValues('label', Sort.ASC))
|
|
@@ -801,10 +810,10 @@ class PropertySelectComponent {
|
|
|
801
810
|
_getLabel(otf) {
|
|
802
811
|
return this.system.getLocalizedLabel(otf.id) || otf.id;
|
|
803
812
|
}
|
|
804
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
805
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
813
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PropertySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
814
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PropertySelectComponent, isStandalone: true, selector: "yuv-tile-property-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null }, selectedProperty: { classPropertyName: "selectedProperty", publicName: "selectedProperty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { propertySelect: "propertySelect" }, ngImport: i0, template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n <div class=\"filter-input\">\n <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n @if (query()) {\n <button class=\"icn\" (click)=\"query.set(null)\">\n <yuv-icon [svg]=\"clearIcon\"></yuv-icon>\n </button>\n }\n </div>\n</form> -->\n\n<ul class=\"properties\">\n @for (p of filteredObjectTypeFields(); track $index) {\n <li [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\" (click)=\"selectProperty(p)\">\n <div class=\"label\">{{ p.label }}</div>\n <button mat-icon-button (click)=\"removeProperty($event)\">\n <mat-icon>close</mat-icon>\n </button>\n </li>\n }\n</ul>\n", styles: [":host{display:flex;flex-flow:column;max-height:100%}:host .filter{flex:0 0 auto}:host .filter .filter-input{background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--ymt-text-color)}:host .properties{flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--ymt-outline);column-gap:2em;margin-block-start:var(--ymt-spacing-m)}:host .properties li{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;display:flex;align-items:center;justify-content:space-between;cursor:default}:host .properties li:hover{background-color:var(--ymt-hover-background)}:host .properties li.baseProperty{font-style:italic}:host .properties li.selected{background-color:var(--ymt-primary-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: TranslateModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
806
815
|
}
|
|
807
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
816
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PropertySelectComponent, decorators: [{
|
|
808
817
|
type: Component,
|
|
809
818
|
args: [{ selector: 'yuv-tile-property-select', standalone: true, imports: [NgClass, FormsModule, TranslateModule,
|
|
810
819
|
MatButtonModule, MatIconModule], template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n <div class=\"filter-input\">\n <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n @if (query()) {\n <button class=\"icn\" (click)=\"query.set(null)\">\n <yuv-icon [svg]=\"clearIcon\"></yuv-icon>\n </button>\n }\n </div>\n</form> -->\n\n<ul class=\"properties\">\n @for (p of filteredObjectTypeFields(); track $index) {\n <li [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\" (click)=\"selectProperty(p)\">\n <div class=\"label\">{{ p.label }}</div>\n <button mat-icon-button (click)=\"removeProperty($event)\">\n <mat-icon>close</mat-icon>\n </button>\n </li>\n }\n</ul>\n", styles: [":host{display:flex;flex-flow:column;max-height:100%}:host .filter{flex:0 0 auto}:host .filter .filter-input{background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--ymt-text-color)}:host .properties{flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--ymt-outline);column-gap:2em;margin-block-start:var(--ymt-spacing-m)}:host .properties li{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;display:flex;align-items:center;justify-content:space-between;cursor:default}:host .properties li:hover{background-color:var(--ymt-hover-background)}:host .properties li.baseProperty{font-style:italic}:host .properties li.selected{background-color:var(--ymt-primary-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"] }]
|
|
@@ -860,10 +869,10 @@ class TileConfigTileComponent {
|
|
|
860
869
|
e.classList.remove('active');
|
|
861
870
|
});
|
|
862
871
|
}
|
|
863
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
864
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
872
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileConfigTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
873
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TileConfigTileComponent, isStandalone: true, selector: "yuv-tile-config-tile", inputs: { disableIconSlot: { classPropertyName: "disableIconSlot", publicName: "disableIconSlot", isSignal: true, isRequired: false, transformFunction: null }, disableBadgesSlot: { classPropertyName: "disableBadgesSlot", publicName: "disableBadgesSlot", isSignal: true, isRequired: false, transformFunction: null }, objectConfig: { classPropertyName: "objectConfig", publicName: "objectConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { slotSelect: "slotSelect" }, ngImport: i0, template: "@let oc = _objectConfig();\n\n<div data-slot=\"icon\" [attr.disabled]=\"disableIconSlot()\" (click)=\"selectSlot('icon')\">\n @if (oc && oc.icon) {\n <mat-icon>{{ 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 data-slot=\"title\" (click)=\"selectSlot('title')\">{{ oc?.title?.label }}</div>\n<div data-slot=\"actions\" (click)=\"selectSlot('actions')\">\n @for (a of actions(); track a.id) {\n <button mat-icon-button [matTooltip]=\"a.label\">\n <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n </button>\n }\n</div>\n<div data-slot=\"description\" (click)=\"selectSlot('description')\">{{ oc?.description?.label }}</div>\n<div data-slot=\"aside\" (click)=\"selectSlot('aside')\">{{ oc?.aside?.label }}</div>\n<div data-slot=\"meta\" (click)=\"selectSlot('meta')\">{{ oc?.meta?.label }}</div>\n@if (!disableBadgesSlot()) {\n <div data-slot=\"badges\" (click)=\"selectSlot('badges')\">\n {{ oc?.badges }}\n </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--ymt-spacing-m);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline);padding:.25em .5em;box-sizing:border-box;min-height:2.2em;border-radius:var(--ymt-corner-xs)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]){cursor:pointer}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]):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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }] }); }
|
|
865
874
|
}
|
|
866
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
875
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileConfigTileComponent, decorators: [{
|
|
867
876
|
type: Component,
|
|
868
877
|
args: [{ selector: 'yuv-tile-config-tile', standalone: true, imports: [MatButtonModule,
|
|
869
878
|
MatTooltipModule,
|
|
@@ -891,6 +900,12 @@ class TileConfigComponent {
|
|
|
891
900
|
// const cf = this.configFlavors() || [];
|
|
892
901
|
return [...ct.map((t) => ({ id: t.id, icon: t.icon, data: t })), ...cf.map((f) => ({ id: f.id, icon: f.icon, flavor: true, data: f }))];
|
|
893
902
|
});
|
|
903
|
+
this.#typesEffect = effect(() => {
|
|
904
|
+
const t = this.types();
|
|
905
|
+
if (t.length && !this.selectedType) {
|
|
906
|
+
this.typeSelected(t[0]);
|
|
907
|
+
}
|
|
908
|
+
});
|
|
894
909
|
this.save = output();
|
|
895
910
|
this.canceled = output();
|
|
896
911
|
this.selectedTypeProperties = [];
|
|
@@ -911,6 +926,7 @@ class TileConfigComponent {
|
|
|
911
926
|
get configChanged() {
|
|
912
927
|
return Object.keys(this.changes).length > 0;
|
|
913
928
|
}
|
|
929
|
+
#typesEffect;
|
|
914
930
|
#emptyObjectConfig;
|
|
915
931
|
getConfigValue(p) {
|
|
916
932
|
return this.objectConfig ? this.objectConfig[p] : undefined;
|
|
@@ -924,8 +940,8 @@ class TileConfigComponent {
|
|
|
924
940
|
slotSelect(item) {
|
|
925
941
|
this.selectedSlot = item;
|
|
926
942
|
}
|
|
927
|
-
|
|
928
|
-
const t = this.types()
|
|
943
|
+
typeSelected(type) {
|
|
944
|
+
const t = this.types().find((ty) => ty.id === type.id);
|
|
929
945
|
if (!t)
|
|
930
946
|
return;
|
|
931
947
|
if (t.flavor)
|
|
@@ -947,7 +963,7 @@ class TileConfigComponent {
|
|
|
947
963
|
const alreadyChanged = this.changes[t.id];
|
|
948
964
|
// load tile config
|
|
949
965
|
// if the type has been changed before load that config instead of the persisted one
|
|
950
|
-
this.objectConfig = { ...alreadyChanged || this.#objectConfigService.getObjectConfig(t, this.bucket() || '') };
|
|
966
|
+
this.objectConfig = { ...(alreadyChanged || this.#objectConfigService.getObjectConfig(t, this.bucket() || '')) };
|
|
951
967
|
if (!this.objectConfig) {
|
|
952
968
|
this.objectConfig = {
|
|
953
969
|
...this.#emptyObjectConfig,
|
|
@@ -1034,13 +1050,13 @@ class TileConfigComponent {
|
|
|
1034
1050
|
}
|
|
1035
1051
|
return true;
|
|
1036
1052
|
}
|
|
1037
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1038
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1053
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1054
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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 | translate }}</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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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: TranslateModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: YuvListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] }); }
|
|
1039
1055
|
}
|
|
1040
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1056
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileConfigComponent, decorators: [{
|
|
1041
1057
|
type: Component,
|
|
1042
1058
|
args: [{ selector: 'yuv-tile-config', standalone: true, imports: [
|
|
1043
|
-
|
|
1059
|
+
FormsModule,
|
|
1044
1060
|
TileConfigTileComponent,
|
|
1045
1061
|
IconSelectComponent,
|
|
1046
1062
|
PropertySelectComponent,
|
|
@@ -1049,10 +1065,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1049
1065
|
YuvListModule,
|
|
1050
1066
|
MatIconModule,
|
|
1051
1067
|
MatDialogModule,
|
|
1068
|
+
MatSelectModule,
|
|
1052
1069
|
MatButtonModule,
|
|
1053
1070
|
DialogComponent,
|
|
1071
|
+
MatFormFieldModule,
|
|
1054
1072
|
YmtButtonDirective
|
|
1055
|
-
], template: "<yuv-dialog [headertitel]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n <main class=\"tile-config\">\n <
|
|
1073
|
+
], 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 | translate }}</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"] }]
|
|
1056
1074
|
}] });
|
|
1057
1075
|
|
|
1058
1076
|
class TileConfigTriggerComponent {
|
|
@@ -1084,10 +1102,10 @@ class TileConfigTriggerComponent {
|
|
|
1084
1102
|
if (this.#dialogRef)
|
|
1085
1103
|
this.#dialogRef.close();
|
|
1086
1104
|
}
|
|
1087
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1088
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.
|
|
1105
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileConfigTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1106
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", 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 ymt-icon-button [icon-button-size]=\"small() ? 'small' : 'medium'\" class=\"settings icon\" (click)=\"openTileConfigOverlay()\" [matTooltip]=\"'yuv.tile-config.trigger.tooltip' | translate\">\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 ></yuv-tile-config>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TileConfigComponent, selector: "yuv-tile-config", inputs: ["bucket", "bucketLabel", "configTypes", "configFlavors"], outputs: ["save", "canceled"] }, { kind: "ngmodule", type: TranslateModule$1 }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { 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: i2.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"] }] }); }
|
|
1089
1107
|
}
|
|
1090
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1108
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileConfigTriggerComponent, decorators: [{
|
|
1091
1109
|
type: Component,
|
|
1092
1110
|
args: [{ selector: 'yuv-tile-config-trigger', standalone: true, imports: [CommonModule, TileConfigComponent, TranslateModule$1,
|
|
1093
1111
|
YmtIconButtonDirective,
|
|
@@ -1105,8 +1123,8 @@ class EmailTileExtensionComponent {
|
|
|
1105
1123
|
evt.stopPropagation();
|
|
1106
1124
|
alert(`You clicked '${a}' my friend.`);
|
|
1107
1125
|
}
|
|
1108
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1109
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1126
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EmailTileExtensionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1127
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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: `
|
|
1110
1128
|
@if (hasAttachements()) {
|
|
1111
1129
|
<span>{{ attachments().length }}</span>
|
|
1112
1130
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5f6368" viewBox="0 -960 960 960">
|
|
@@ -1115,9 +1133,9 @@ class EmailTileExtensionComponent {
|
|
|
1115
1133
|
/>
|
|
1116
1134
|
</svg>
|
|
1117
1135
|
}
|
|
1118
|
-
`, isInline: true, styles: [":host{display:flex;justify-content:end;margin-top:.5rem
|
|
1136
|
+
`, isInline: true, styles: [":host{display:flex;justify-content:end;margin-top:.5rem;.icon{height:1rem}}\n"] }); }
|
|
1119
1137
|
}
|
|
1120
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EmailTileExtensionComponent, decorators: [{
|
|
1121
1139
|
type: Component,
|
|
1122
1140
|
args: [{ selector: 'yuv-email-tile-extension', standalone: true, imports: [], template: `
|
|
1123
1141
|
@if (hasAttachements()) {
|
|
@@ -1130,7 +1148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1130
1148
|
}
|
|
1131
1149
|
`, host: {
|
|
1132
1150
|
'[class.attachments]': 'hasAttachements()'
|
|
1133
|
-
}, styles: [":host{display:flex;justify-content:end;margin-top:.5rem
|
|
1151
|
+
}, styles: [":host{display:flex;justify-content:end;margin-top:.5rem;.icon{height:1rem}}\n"] }]
|
|
1134
1152
|
}] });
|
|
1135
1153
|
|
|
1136
1154
|
/**
|