@yuuvis/client-framework 2.0.0-beta.9 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/yuuvis-client-framework-actions.mjs +16 -16
- package/fesm2022/yuuvis-client-framework-actions.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-app-bar.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-autocomplete.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-clipboard.mjs +6 -6
- package/fesm2022/yuuvis-client-framework-clipboard.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-common.mjs +66 -74
- package/fesm2022/yuuvis-client-framework-common.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-datepicker.mjs +33 -32
- package/fesm2022/yuuvis-client-framework-datepicker.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-forms.mjs +77 -65
- package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-icons.mjs +9 -9
- package/fesm2022/yuuvis-client-framework-list.mjs +31 -27
- package/fesm2022/yuuvis-client-framework-list.mjs.map +1 -1
- 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 +26 -26
- package/fesm2022/yuuvis-client-framework-object-details.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs +24 -24
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-form.mjs +28 -28
- package/fesm2022/yuuvis-client-framework-object-preview.mjs +10 -10
- package/fesm2022/yuuvis-client-framework-object-preview.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-summary.mjs +23 -23
- package/fesm2022/yuuvis-client-framework-object-summary.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-overflow-menu.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-pagination.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-panel.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-popout.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-renderer.mjs +34 -34
- 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-split-view.mjs +10 -10
- package/fesm2022/yuuvis-client-framework-tile-list.mjs +49 -41
- 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 +6 -6
- package/fesm2022/yuuvis-client-framework.mjs +4 -4
- package/forms/lib/elements/data-grid/data-grid/data-grid.component.d.ts +6 -6
- package/package.json +4 -4
- package/tile-list/lib/tile-list/tile-list.component.d.ts +2 -0
|
@@ -20,8 +20,9 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
|
20
20
|
import { YUV_ICONS, YuvIconComponent, ObjectTypeIconComponent } from '@yuuvis/client-framework/icons';
|
|
21
21
|
import * as i3 from '@yuuvis/client-framework/list';
|
|
22
22
|
import { ListItemDirective, YuvListModule } from '@yuuvis/client-framework/list';
|
|
23
|
-
import {
|
|
24
|
-
import
|
|
23
|
+
import { YmtMatIconRegistryService, YmtButtonDirective } from '@yuuvis/material';
|
|
24
|
+
import * as i2$1 from '@angular/material/paginator';
|
|
25
|
+
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
25
26
|
import { MatDialogModule, MatDialog } from '@angular/material/dialog';
|
|
26
27
|
import * as i1$3 from '@yuuvis/client-framework/split-view';
|
|
27
28
|
import { YuvSplitViewModule } from '@yuuvis/client-framework/split-view';
|
|
@@ -50,10 +51,10 @@ class TileExtensionService {
|
|
|
50
51
|
getTileExtension(typeId) {
|
|
51
52
|
return this._extensions[typeId];
|
|
52
53
|
}
|
|
53
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
54
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
54
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileExtensionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
55
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileExtensionService, providedIn: 'root' }); }
|
|
55
56
|
}
|
|
56
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
57
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileExtensionService, decorators: [{
|
|
57
58
|
type: Injectable,
|
|
58
59
|
args: [{
|
|
59
60
|
providedIn: 'root'
|
|
@@ -83,10 +84,10 @@ class TileExtensionDirective {
|
|
|
83
84
|
this.component = this.#containerRef.createComponent(ext.cmp);
|
|
84
85
|
this.component.setInput('data', data);
|
|
85
86
|
}
|
|
86
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
87
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
87
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileExtensionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
88
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.12", type: TileExtensionDirective, isStandalone: true, selector: "[yuvTileExtension]", inputs: { yuvTileExtension: { classPropertyName: "yuvTileExtension", publicName: "yuvTileExtension", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
88
89
|
}
|
|
89
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
90
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileExtensionDirective, decorators: [{
|
|
90
91
|
type: Directive,
|
|
91
92
|
args: [{
|
|
92
93
|
selector: '[yuvTileExtension]',
|
|
@@ -132,10 +133,10 @@ class TileComponent {
|
|
|
132
133
|
.pipe(switchMap((o) => a.run([o])))
|
|
133
134
|
.subscribe();
|
|
134
135
|
}
|
|
135
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
136
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
136
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
137
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", 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 } }, ngImport: i0, template: "<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", styles: [":host{display:flex;align-items:center;background-color:var(--tile-background, transparent);padding:var(--tile-padding, var(--ymt-spacing-s) var(--ymt-spacing-l));transition:background-color var(--transition-duration, .1s);position:relative;color:var(--ymt-text-color)}:host .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:hover:not([aria-selected=true]){--tile-background: var(--ymt-hover-background)}:host[aria-selected=true]{--tile-background: var(--ymt-selection-background)}:host[aria-current=true]{--tile-background: var(--ymt-focus-background)}:host[aria-current=true]:not([aria-selected=true]){--tile-border: 2px solid var(--ymt-outline)}:host [data-slot]{-webkit-user-select:none;user-select:none;display:grid;align-self:baseline;word-break:break-word}:host [data-slot=icon]{--icon-renderer-icon-size: var(--tile-icon-size);width:3rem;grid-area:icon;display:flex;align-self:flex-start}:host [data-slot=title-description]{grid-area:title-description;display:grid;grid-template-areas:\"title\" \"description\";align-self:flex-start}:host [data-slot=title]{font:var(--tile-font-title, var(--ymt-font-title-small));grid-area:title;align-self:flex-start}:host [data-slot=description]{grid-area:description;font:var(--tile-font-description, var(--ymt-font-body));color:var(--ymt-text-color-subtle);--tile-slot-padding: var(--ymt-spacing-2xs) 0}:host [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 [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) 0 var(--ymt-spacing-2xs) var(--ymt-spacing-2xs)}:host [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:hover [data-slot=actions]{opacity:1;pointer-events:all}:host [data-slot=actions]{grid-area:actions;flex:0 0 auto;display:flex;align-items:start}:host [data-slot=actions] button{gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host .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"] }] }); }
|
|
137
138
|
}
|
|
138
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileComponent, decorators: [{
|
|
139
140
|
type: Component,
|
|
140
141
|
args: [{ selector: 'yuv-tile', standalone: true, imports: [MatIconModule,
|
|
141
142
|
MatTooltipModule,
|
|
@@ -397,6 +398,12 @@ class TileListComponent {
|
|
|
397
398
|
this.#select(this._lastSelection - 1);
|
|
398
399
|
}
|
|
399
400
|
}
|
|
401
|
+
changePage($event) {
|
|
402
|
+
const { pageSize, pageIndex } = $event;
|
|
403
|
+
if (this.#query)
|
|
404
|
+
this.#query.size = pageSize;
|
|
405
|
+
this.goToPage(pageIndex + 1);
|
|
406
|
+
}
|
|
400
407
|
goToPage(page) {
|
|
401
408
|
if (!this.#query)
|
|
402
409
|
return;
|
|
@@ -530,7 +537,7 @@ class TileListComponent {
|
|
|
530
537
|
rendererType: 'icon',
|
|
531
538
|
propertyName: 'custom',
|
|
532
539
|
value: oc.icon.svg,
|
|
533
|
-
meta: { isFontIcon:
|
|
540
|
+
meta: { isFontIcon: YmtMatIconRegistryService.isFontIcon(oc.icon.svg), objectTypeId: '' }
|
|
534
541
|
}
|
|
535
542
|
: {
|
|
536
543
|
rendererType: 'icon',
|
|
@@ -596,10 +603,10 @@ class TileListComponent {
|
|
|
596
603
|
this._keyManager?.destroy();
|
|
597
604
|
this.searchResultSubscription.unsubscribe();
|
|
598
605
|
}
|
|
599
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
600
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
606
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
607
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: TileListComponent, isStandalone: true, selector: "yuv-tile-list", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, flavor: { classPropertyName: "flavor", publicName: "flavor", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, preselect: { classPropertyName: "preselect", publicName: "preselect", isSignal: true, isRequired: false, transformFunction: null }, highlights: { classPropertyName: "highlights", publicName: "highlights", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", tileCopy: "tileCopy", tileCut: "tileCut", busy: "busy", queryResult: "queryResult", selectionChange: "selectionChange", itemDblClick: "itemDblClick", ctxMenu: "ctxMenu" }, host: { attributes: { "tabindex": "0", "role": "listbox" }, listeners: { "contextmenu": "onContextMenu($event)", "mousedown": "onMouseDown($event)", "keydown.control.c": "onCopy($event)", "keydown.control.x": "onCut($event)", "keydown": "onKeydown($event)" }, properties: { "class.pagination": "this.pagination" } }, providers: [], queries: [{ propertyName: "emptyContent", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tiles", predicate: TileComponent, descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ListItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"tiles\"\n [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n (dragSelectChange)=\"onDragSelectChange($event)\"\n (dragSelect)=\"onDragSelect($event)\"\n>\n @for (i of items; track i.id) {\n <yuv-tile\n yuvDragSelectItem\n yuvListItem\n [attr.aria-selected]=\"selection().includes(i.id)\"\n (click.single)=\"select(i, $event)\"\n (click.double)=\"itemDblClick.emit(i)\"\n [ngClass]=\"{ selected: selection().includes(i.id), last: $last }\"\n [actionContext]=\"options()?.actionContext\"\n [tile]=\"i\"\n [ngStyle]=\"highlightStyles()[i.id]\"\n (contextmenu)=\"contextMenuHandler($event, $index)\"\n ></yuv-tile>\n } @empty {\n <div class=\"empyt-list\">\n @if (searchExecuted && emptyContent()) {\n <ng-content></ng-content>\n }\n </div>\n }\n <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</div>\n@if (pagination) {\n <mat-paginator\n class=\"paginator\"\n [length]=\"pagination?.total\"\n [pageSize]=\"query()?.size\"\n aria-label=\"Select page\"\n (page)=\"changePage($event)\"\n hidePageSize\n\n >\n </mat-paginator>\n}\n", styles: [":host{--tile-current-background: var(--ymt-focus-background);--tile-on-current: var(--ymt-on-focus-background);--tile-selected-background: var(--ymt-selection-background);--tile-on-selected: var(--ymt-on-selection-background);--tile-selected-icon-fill: var(--ymt-primary);--tile-gap: 0px;--tile-border: none;--tile-border-width: 1px;--tile-icon-size: initial;--paging-button-size: 18px;--paging-margin: var(--ymt-spacing-xs);--paging-padding: var(--ymt-spacing-2xs);position:relative;display:grid;grid-template-rows:1fr auto var(--paging-margin);grid-template-columns:var(--paging-margin) 1fr var(--paging-margin)}:host.pagination yuv-tile.last{margin-block-end:calc(var(--paging-margin) * 2 + var(--paging-padding) * 2 + var(--paging-button-size))}:host .tiles{grid-column:1/-1;grid-row:1/-1;overflow-y:auto;padding-block:var(--ymt-spacing-s);display:flex;flex-flow:column}:host .tiles yuv-tile{flex:0 0 auto}:host .tiles .offset{flex:1 1 auto}:host yuv-pagination{z-index:2;grid-column:2/-2;grid-row:2/-2;border:1px solid var(--ymt-outline-variant)}:host .paginator{margin-top:auto;grid-column:2/-2;grid-row:2/-2;border-block-start:1px solid var(--ymt-outline-variant);font:inherit}:host yuv-tile{cursor:pointer}:host yuv-tile:not(.last){border:var(--tile-border);border-width:var(--tile-border-width);margin-block-end:var(--tile-gap)}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TileComponent, selector: "yuv-tile", inputs: ["tile", "actionContext"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: YuvListModule }, { kind: "directive", type: i3.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "directive", type: ClickDoubleDirective, selector: "[click.single],[click.double]", inputs: ["debounceTime"], outputs: ["click.double", "click.single"] }, { kind: "directive", type: DragSelectDirective, selector: "[yuvDragSelect]", inputs: ["yuvDragSelect"], outputs: ["dragSelectChange", "dragSelect"] }, { kind: "directive", type: DragSelectItemDirective, selector: "[yuvDragSelectItem]" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
|
|
601
608
|
}
|
|
602
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
609
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileListComponent, decorators: [{
|
|
603
610
|
type: Component,
|
|
604
611
|
args: [{ selector: 'yuv-tile-list', standalone: true, providers: [], imports: [
|
|
605
612
|
NgClass,
|
|
@@ -607,15 +614,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
607
614
|
TileComponent,
|
|
608
615
|
TranslateModule,
|
|
609
616
|
ReactiveFormsModule,
|
|
610
|
-
PaginationComponent,
|
|
611
617
|
YuvListModule,
|
|
612
618
|
ClickDoubleDirective,
|
|
613
619
|
DragSelectDirective,
|
|
614
|
-
DragSelectItemDirective
|
|
620
|
+
DragSelectItemDirective,
|
|
621
|
+
MatPaginatorModule,
|
|
615
622
|
], host: {
|
|
616
623
|
tabindex: '0',
|
|
617
624
|
role: 'listbox'
|
|
618
|
-
}, template: "<div\n class=\"tiles\"\n [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n (dragSelectChange)=\"onDragSelectChange($event)\"\n (dragSelect)=\"onDragSelect($event)\"\n>\n @for (i of items; track i.id) {\n <yuv-tile\n yuvDragSelectItem\n yuvListItem\n [attr.aria-selected]=\"selection().includes(i.id)\"\n (click.single)=\"select(i, $event)\"\n (click.double)=\"itemDblClick.emit(i)\"\n [ngClass]=\"{ selected: selection().includes(i.id), last: $last }\"\n [actionContext]=\"options()?.actionContext\"\n [tile]=\"i\"\n [ngStyle]=\"highlightStyles()[i.id]\"\n (contextmenu)=\"contextMenuHandler($event, $index)\"\n ></yuv-tile>\n } @empty {\n <div class=\"empyt-list\">\n @if (searchExecuted && emptyContent()) {\n <ng-content></ng-content>\n }\n </div>\n }\n <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</div>\n@if (pagination) {\n <
|
|
625
|
+
}, template: "<div\n class=\"tiles\"\n [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n (dragSelectChange)=\"onDragSelectChange($event)\"\n (dragSelect)=\"onDragSelect($event)\"\n>\n @for (i of items; track i.id) {\n <yuv-tile\n yuvDragSelectItem\n yuvListItem\n [attr.aria-selected]=\"selection().includes(i.id)\"\n (click.single)=\"select(i, $event)\"\n (click.double)=\"itemDblClick.emit(i)\"\n [ngClass]=\"{ selected: selection().includes(i.id), last: $last }\"\n [actionContext]=\"options()?.actionContext\"\n [tile]=\"i\"\n [ngStyle]=\"highlightStyles()[i.id]\"\n (contextmenu)=\"contextMenuHandler($event, $index)\"\n ></yuv-tile>\n } @empty {\n <div class=\"empyt-list\">\n @if (searchExecuted && emptyContent()) {\n <ng-content></ng-content>\n }\n </div>\n }\n <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</div>\n@if (pagination) {\n <mat-paginator\n class=\"paginator\"\n [length]=\"pagination?.total\"\n [pageSize]=\"query()?.size\"\n aria-label=\"Select page\"\n (page)=\"changePage($event)\"\n hidePageSize\n\n >\n </mat-paginator>\n}\n", styles: [":host{--tile-current-background: var(--ymt-focus-background);--tile-on-current: var(--ymt-on-focus-background);--tile-selected-background: var(--ymt-selection-background);--tile-on-selected: var(--ymt-on-selection-background);--tile-selected-icon-fill: var(--ymt-primary);--tile-gap: 0px;--tile-border: none;--tile-border-width: 1px;--tile-icon-size: initial;--paging-button-size: 18px;--paging-margin: var(--ymt-spacing-xs);--paging-padding: var(--ymt-spacing-2xs);position:relative;display:grid;grid-template-rows:1fr auto var(--paging-margin);grid-template-columns:var(--paging-margin) 1fr var(--paging-margin)}:host.pagination yuv-tile.last{margin-block-end:calc(var(--paging-margin) * 2 + var(--paging-padding) * 2 + var(--paging-button-size))}:host .tiles{grid-column:1/-1;grid-row:1/-1;overflow-y:auto;padding-block:var(--ymt-spacing-s);display:flex;flex-flow:column}:host .tiles yuv-tile{flex:0 0 auto}:host .tiles .offset{flex:1 1 auto}:host yuv-pagination{z-index:2;grid-column:2/-2;grid-row:2/-2;border:1px solid var(--ymt-outline-variant)}:host .paginator{margin-top:auto;grid-column:2/-2;grid-row:2/-2;border-block-start:1px solid var(--ymt-outline-variant);font:inherit}: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"] }]
|
|
619
626
|
}], ctorParameters: () => [], propDecorators: { onContextMenu: [{
|
|
620
627
|
type: HostListener,
|
|
621
628
|
args: ['contextmenu', ['$event']]
|
|
@@ -647,10 +654,10 @@ class ActionSelectComponent {
|
|
|
647
654
|
this.selectedActionIds = input([]);
|
|
648
655
|
this.actionSelect = output();
|
|
649
656
|
}
|
|
650
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
651
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
657
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ActionSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
658
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: ActionSelectComponent, isStandalone: true, selector: "yuv-tile-action-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: true, transformFunction: null }, selectedActionIds: { classPropertyName: "selectedActionIds", publicName: "selectedActionIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelect: "actionSelect" }, ngImport: i0, template: "<div class=\"actions\">\n @for (a of actions(); track a.id) {\n <button [ngClass]=\"{ selected: selectedActionIds().includes(a.id) }\" (click)=\"actionSelect.emit(a)\">\n <mat-icon>{{ a.icon }}</mat-icon\n >{{ a.label }}\n </button>\n }\n</div>\n", styles: [":host .actions button{width:100%;border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px}:host .actions button.selected{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}\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"] }] }); }
|
|
652
659
|
}
|
|
653
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
660
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ActionSelectComponent, decorators: [{
|
|
654
661
|
type: Component,
|
|
655
662
|
args: [{ selector: 'yuv-tile-action-select', standalone: true, imports: [NgClass, MatIconModule], template: "<div class=\"actions\">\n @for (a of actions(); track a.id) {\n <button [ngClass]=\"{ selected: selectedActionIds().includes(a.id) }\" (click)=\"actionSelect.emit(a)\">\n <mat-icon>{{ a.icon }}</mat-icon\n >{{ a.label }}\n </button>\n }\n</div>\n", styles: [":host .actions button{width:100%;border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px}:host .actions button.selected{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}\n"] }]
|
|
656
663
|
}] });
|
|
@@ -675,10 +682,10 @@ class IconSelectComponent {
|
|
|
675
682
|
#emit(data) {
|
|
676
683
|
this.iconSelect.emit(data);
|
|
677
684
|
}
|
|
678
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
679
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
685
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: IconSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
686
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.12", type: IconSelectComponent, isStandalone: true, selector: "yuv-icon-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { iconSelect: "iconSelect" }, ngImport: i0, template: "<input style=\"display: none\" #fileInput type=\"file\" accept=\".svg\" (change)=\"createIcon(fileInput)\" />\n\n<button class=\"primary\" (click)=\"fileInput.click()\">{{ 'yuv.tile-config.icon-select.pick' | translate }}</button>\n<button class=\"secondary\" (click)=\"reset()\">{{ 'yuv.tile-config.icon-select.reset' | translate }}</button>\n", styles: [":host{display:flex;gap:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
680
687
|
}
|
|
681
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
688
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: IconSelectComponent, decorators: [{
|
|
682
689
|
type: Component,
|
|
683
690
|
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"] }]
|
|
684
691
|
}] });
|
|
@@ -758,10 +765,10 @@ class PropertySelectComponent {
|
|
|
758
765
|
_getLabel(otf) {
|
|
759
766
|
return this.system.getLocalizedLabel(otf.id) || otf.id;
|
|
760
767
|
}
|
|
761
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
762
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
768
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: PropertySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
769
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: PropertySelectComponent, isStandalone: true, selector: "yuv-tile-property-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null }, selectedProperty: { classPropertyName: "selectedProperty", publicName: "selectedProperty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { propertySelect: "propertySelect" }, ngImport: i0, template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n <div class=\"filter-input\">\n <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n @if (query()) {\n <button class=\"icn\" (click)=\"query.set(null)\">\n <yuv-icon [svg]=\"clearIcon\"></yuv-icon>\n </button>\n }\n </div>\n</form> -->\n\n<ul class=\"properties\">\n @for (p of filteredObjectTypeFields(); track $index) {\n <li [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\" (click)=\"selectProperty(p)\">\n <div class=\"label\">{{ p.label }}</div>\n <button mat-icon-button (click)=\"removeProperty($event)\">\n <mat-icon>close</mat-icon>\n </button>\n </li>\n }\n</ul>\n", styles: [":host{display:flex;flex-flow:column;max-height:100%}:host .filter{flex:0 0 auto}:host .filter .filter-input{background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--ymt-text-color)}:host ul.properties{list-style:none;margin:0;padding:0;flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--ymt-text-color-subtle);column-gap:2em;margin-block-start:var(--ymt-spacing-m)}:host ul.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 ul.properties li:hover{background-color:var(--ymt-hover-background)}:host ul.properties li.baseProperty{font-style:italic}:host ul.properties li.selected{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host ul.properties li:not(.selected) button{display:none}:host ul.properties li .label{padding:var(--ymt-spacing-xs) var(--ymt-spacing-m)}\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"] }] }); }
|
|
763
770
|
}
|
|
764
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
771
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: PropertySelectComponent, decorators: [{
|
|
765
772
|
type: Component,
|
|
766
773
|
args: [{ selector: 'yuv-tile-property-select', standalone: true, imports: [NgClass, FormsModule, TranslateModule,
|
|
767
774
|
MatButtonModule, MatIconModule], template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n <div class=\"filter-input\">\n <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n @if (query()) {\n <button class=\"icn\" (click)=\"query.set(null)\">\n <yuv-icon [svg]=\"clearIcon\"></yuv-icon>\n </button>\n }\n </div>\n</form> -->\n\n<ul class=\"properties\">\n @for (p of filteredObjectTypeFields(); track $index) {\n <li [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\" (click)=\"selectProperty(p)\">\n <div class=\"label\">{{ p.label }}</div>\n <button mat-icon-button (click)=\"removeProperty($event)\">\n <mat-icon>close</mat-icon>\n </button>\n </li>\n }\n</ul>\n", styles: [":host{display:flex;flex-flow:column;max-height:100%}:host .filter{flex:0 0 auto}:host .filter .filter-input{background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--ymt-text-color)}:host ul.properties{list-style:none;margin:0;padding:0;flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--ymt-text-color-subtle);column-gap:2em;margin-block-start:var(--ymt-spacing-m)}:host ul.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 ul.properties li:hover{background-color:var(--ymt-hover-background)}:host ul.properties li.baseProperty{font-style:italic}:host ul.properties li.selected{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host ul.properties li:not(.selected) button{display:none}:host ul.properties li .label{padding:var(--ymt-spacing-xs) var(--ymt-spacing-m)}\n"] }]
|
|
@@ -817,10 +824,10 @@ class TileConfigTileComponent {
|
|
|
817
824
|
e.classList.remove('active');
|
|
818
825
|
});
|
|
819
826
|
}
|
|
820
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
821
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
827
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileConfigTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
828
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: TileConfigTileComponent, isStandalone: true, selector: "yuv-tile-config-tile", inputs: { disableIconSlot: { classPropertyName: "disableIconSlot", publicName: "disableIconSlot", isSignal: true, isRequired: false, transformFunction: null }, disableBadgesSlot: { classPropertyName: "disableBadgesSlot", publicName: "disableBadgesSlot", isSignal: true, isRequired: false, transformFunction: null }, objectConfigInput: { classPropertyName: "objectConfigInput", publicName: "objectConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { slotSelect: "slotSelect" }, ngImport: i0, template: "@let oc = objectConfig();\n\n<div data-slot=\"icon\" [attr.disabled]=\"disableIconSlot()\" (click)=\"selectSlot('icon')\">\n @if (oc.icon) {\n <yuv-icon [svg]=\"oc.icon.svg\"></yuv-icon>\n } @else {\n <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\"></yuv-object-type-icon>\n }\n</div>\n<div data-slot=\"title\" (click)=\"selectSlot('title')\">{{ oc.title?.label }}</div>\n<div data-slot=\"actions\" (click)=\"selectSlot('actions')\">\n @for (a of actions(); track a.id) {\n <button mat-icon-button [matTooltip]=\"a.label\">\n <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n </button>\n }\n</div>\n<div data-slot=\"description\" (click)=\"selectSlot('description')\">{{ oc.description?.label }}</div>\n<div data-slot=\"aside\" (click)=\"selectSlot('aside')\">{{ oc.aside?.label }}</div>\n<div data-slot=\"meta\" (click)=\"selectSlot('meta')\">{{ oc.meta?.label }}</div>\n@if (!disableBadgesSlot()) {\n <div data-slot=\"badges\" (click)=\"selectSlot('badges')\">\n <!-- {{ tile().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);padding:.25em .5em;box-sizing:border-box;min-height:1.7em;border-radius:.25em}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]){cursor:pointer}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]).active,:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]):hover{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{pointer-events:none;color:currentColor}:host [data-slot=aside]{min-width:4em}:host [data-slot=icon]{height:3em;width:100%}\n"], dependencies: [{ kind: "component", type: YuvIconComponent, selector: "yuv-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }] }); }
|
|
822
829
|
}
|
|
823
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
830
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileConfigTileComponent, decorators: [{
|
|
824
831
|
type: Component,
|
|
825
832
|
args: [{ selector: 'yuv-tile-config-tile', standalone: true, imports: [YuvIconComponent, MatButtonModule,
|
|
826
833
|
MatTooltipModule,
|
|
@@ -942,10 +949,10 @@ class TileConfigComponent {
|
|
|
942
949
|
this.#objectConfigService.saveObjectConfig(this.selectedType, this.objectConfig, this.bucket()).subscribe((_) => this.save.emit());
|
|
943
950
|
}
|
|
944
951
|
}
|
|
945
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
946
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
952
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
953
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: TileConfigComponent, isStandalone: true, selector: "yuv-tile-config", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, bucketLabel: { classPropertyName: "bucketLabel", publicName: "bucketLabel", isSignal: true, isRequired: false, transformFunction: null }, configTypes: { classPropertyName: "configTypes", publicName: "configTypes", isSignal: true, isRequired: false, transformFunction: null }, configFlavors: { classPropertyName: "configFlavors", publicName: "configFlavors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", cancel: "cancel" }, ngImport: i0, template: "<yuv-dialog [headertitel]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n <main class=\"tile-config\">\n <yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"'yuv.framework.tile-config.layout'\">\n <!-- list of types -->\n <ng-template yuvSplitArea [size]=\"30\">\n <div class=\"types\">\n <yuv-list (itemSelect)=\"itemSelected($event)\">\n @for (t of types() || []; track t.id) {\n <div yuvListItem>\n @if (t.icon) {\n <yuv-icon [svg]=\"t.icon\"></yuv-icon>\n } @else {\n <yuv-object-type-icon [objectTypeId]=\"t.id\"></yuv-object-type-icon>\n }\n {{ t.id | translate }}\n </div>\n }\n </yuv-list>\n </div>\n </ng-template>\n\n <!-- selected type details-->\n <ng-template yuvSplitArea [size]=\"70\">\n <div class=\"details\">\n @if (selectedType) {\n <header>{{ selectedType.id | translate }}</header>\n <div class=\"dummy-preview\">\n <yuv-tile-config-tile\n [disableIconSlot]=\"true\"\n [disableBadgesSlot]=\"true\"\n [objectConfig]=\"objectConfig!\"\n (slotSelect)=\"slotSelect($event)\"\n ></yuv-tile-config-tile>\n </div>\n <main>\n @if (selectedSlot === 'icon') {\n <h2>{{ 'yuv.tile-config.slot.icon.headline' | translate }}</h2>\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 <h2>{{ 'yuv.tile-config.slot.action.headline' | translate }}</h2>\n <yuv-tile-action-select\n [objectType]=\"selectedType\"\n [selectedActionIds]=\"getSelectedActions()\"\n (actionSelect)=\"actionSelected($event)\"\n ></yuv-tile-action-select>\n } @else {\n <h2>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h2>\n <yuv-tile-property-select\n [objectType]=\"selectedType\"\n [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n ></yuv-tile-property-select>\n }\n </main>\n } @else {\n <div class=\"placeholder empty\">\n <h2>{{ 'yuv.tile-config.details.empty.title' | translate }}</h2>\n <p>{{ 'yuv.tile-config.details.empty.description' | translate }}</p>\n </div>\n }\n </div>\n </ng-template>\n </yuv-split-view>\n </main>\n <footer>\n <button ymtButton=\"secondary\" (click)=\"cancel.emit()\">{{ 'yuv.tile-config.button.close' | translate }}</button>\n <button ymtButton=\"primary\" (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 .tile-config{height:100%;display:contents}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);flex:1}:host .details{box-sizing:border-box}:host div.types{box-sizing:border-box;height:100%;overflow-y:auto;background-color:var(--ymt-surface-panel)}:host div.types div[yuvListItem]{display:flex;gap:var(--ymt-spacing-m);align-items:center;padding:var(--ymt-spacing-xs) var(--ymt-spacing-m);cursor:pointer}:host div.types div[yuvListItem]:not([aria-selected=true]):hover,:host div.types div[yuvListItem]:not([aria-selected=true])[aria-current=true]{background-color:var(--ymt-focus-background)}:host div.types div[yuvListItem][aria-selected=true]{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host div.types div[yuvListItem] yuv-object-type-icon{flex:0 0 auto;color:currentColor;opacity:.54}:host .details{height:100%;display:flex;flex-flow:column;overflow:hidden;background-color:var(--ymt-surface-panel)}:host .details header{flex:0 0 auto;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host .details .dummy-preview{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-surface-panel);border-bottom:1px solid var(--ymt-outline-variant)}:host .details .dummy-preview yuv-tile-config-tile{border:1px solid var(--ymt-outline-variant);background-color:var(--ymt-surface-panel)}:host .details main{flex:1;overflow-y:auto;padding:var(--ymt-spacing-m)}:host .details main h2{margin:0;padding-block-end:var(--ymt-spacing-m);font:var(--ymt-font-subhead)}:host .details .placeholder.empty{height:100%;display:grid;place-content:center;color:var(--ymt-text-color-subtle)}:host .details footer{flex:0 0 auto;padding:var(--ymt-spacing-xs);display:flex;justify-content:flex-end;gap:var(--ymt-spacing-2xs)}\n"], dependencies: [{ kind: "ngmodule", type: YuvSplitViewModule }, { kind: "directive", type: i1$3.SplitAreaDirective, selector: "[yuvSplitArea]", inputs: ["size", "minSize", "maxSize", "panelClass", "visible"] }, { kind: "component", type: i1$3.SplitViewComponent, selector: "yuv-split-view", inputs: ["direction", "gutterSize", "restrictMove", "disabled", "layoutSettingsID"], outputs: ["layoutSettingsChange", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"] }, { kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }, { kind: "component", type: TileConfigTileComponent, selector: "yuv-tile-config-tile", inputs: ["disableIconSlot", "disableBadgesSlot", "objectConfig"], outputs: ["slotSelect"] }, { kind: "component", type: IconSelectComponent, selector: "yuv-icon-select", inputs: ["objectType"], outputs: ["iconSelect"] }, { kind: "component", type: PropertySelectComponent, selector: "yuv-tile-property-select", inputs: ["objectType", "selectedProperty"], outputs: ["propertySelect"] }, { kind: "component", type: ActionSelectComponent, selector: "yuv-tile-action-select", inputs: ["objectType", "selectedActionIds"], outputs: ["actionSelect"] }, { kind: "component", type: YuvIconComponent, selector: "yuv-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i3.ListComponent, selector: "yuv-list", inputs: ["multiselect", "selfHandleSelection", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: i3.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitel"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] }); }
|
|
947
954
|
}
|
|
948
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
955
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileConfigComponent, decorators: [{
|
|
949
956
|
type: Component,
|
|
950
957
|
args: [{ selector: 'yuv-tile-config', standalone: true, imports: [
|
|
951
958
|
YuvSplitViewModule,
|
|
@@ -960,8 +967,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
960
967
|
MatIconModule,
|
|
961
968
|
MatDialogModule,
|
|
962
969
|
MatButtonModule,
|
|
963
|
-
DialogComponent
|
|
964
|
-
|
|
970
|
+
DialogComponent,
|
|
971
|
+
YmtButtonDirective
|
|
972
|
+
], template: "<yuv-dialog [headertitel]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n <main class=\"tile-config\">\n <yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"'yuv.framework.tile-config.layout'\">\n <!-- list of types -->\n <ng-template yuvSplitArea [size]=\"30\">\n <div class=\"types\">\n <yuv-list (itemSelect)=\"itemSelected($event)\">\n @for (t of types() || []; track t.id) {\n <div yuvListItem>\n @if (t.icon) {\n <yuv-icon [svg]=\"t.icon\"></yuv-icon>\n } @else {\n <yuv-object-type-icon [objectTypeId]=\"t.id\"></yuv-object-type-icon>\n }\n {{ t.id | translate }}\n </div>\n }\n </yuv-list>\n </div>\n </ng-template>\n\n <!-- selected type details-->\n <ng-template yuvSplitArea [size]=\"70\">\n <div class=\"details\">\n @if (selectedType) {\n <header>{{ selectedType.id | translate }}</header>\n <div class=\"dummy-preview\">\n <yuv-tile-config-tile\n [disableIconSlot]=\"true\"\n [disableBadgesSlot]=\"true\"\n [objectConfig]=\"objectConfig!\"\n (slotSelect)=\"slotSelect($event)\"\n ></yuv-tile-config-tile>\n </div>\n <main>\n @if (selectedSlot === 'icon') {\n <h2>{{ 'yuv.tile-config.slot.icon.headline' | translate }}</h2>\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 <h2>{{ 'yuv.tile-config.slot.action.headline' | translate }}</h2>\n <yuv-tile-action-select\n [objectType]=\"selectedType\"\n [selectedActionIds]=\"getSelectedActions()\"\n (actionSelect)=\"actionSelected($event)\"\n ></yuv-tile-action-select>\n } @else {\n <h2>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h2>\n <yuv-tile-property-select\n [objectType]=\"selectedType\"\n [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n ></yuv-tile-property-select>\n }\n </main>\n } @else {\n <div class=\"placeholder empty\">\n <h2>{{ 'yuv.tile-config.details.empty.title' | translate }}</h2>\n <p>{{ 'yuv.tile-config.details.empty.description' | translate }}</p>\n </div>\n }\n </div>\n </ng-template>\n </yuv-split-view>\n </main>\n <footer>\n <button ymtButton=\"secondary\" (click)=\"cancel.emit()\">{{ 'yuv.tile-config.button.close' | translate }}</button>\n <button ymtButton=\"primary\" (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 .tile-config{height:100%;display:contents}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);flex:1}:host .details{box-sizing:border-box}:host div.types{box-sizing:border-box;height:100%;overflow-y:auto;background-color:var(--ymt-surface-panel)}:host div.types div[yuvListItem]{display:flex;gap:var(--ymt-spacing-m);align-items:center;padding:var(--ymt-spacing-xs) var(--ymt-spacing-m);cursor:pointer}:host div.types div[yuvListItem]:not([aria-selected=true]):hover,:host div.types div[yuvListItem]:not([aria-selected=true])[aria-current=true]{background-color:var(--ymt-focus-background)}:host div.types div[yuvListItem][aria-selected=true]{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host div.types div[yuvListItem] yuv-object-type-icon{flex:0 0 auto;color:currentColor;opacity:.54}:host .details{height:100%;display:flex;flex-flow:column;overflow:hidden;background-color:var(--ymt-surface-panel)}:host .details header{flex:0 0 auto;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host .details .dummy-preview{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-surface-panel);border-bottom:1px solid var(--ymt-outline-variant)}:host .details .dummy-preview yuv-tile-config-tile{border:1px solid var(--ymt-outline-variant);background-color:var(--ymt-surface-panel)}:host .details main{flex:1;overflow-y:auto;padding:var(--ymt-spacing-m)}:host .details main h2{margin:0;padding-block-end:var(--ymt-spacing-m);font:var(--ymt-font-subhead)}:host .details .placeholder.empty{height:100%;display:grid;place-content:center;color:var(--ymt-text-color-subtle)}:host .details footer{flex:0 0 auto;padding:var(--ymt-spacing-xs);display:flex;justify-content:flex-end;gap:var(--ymt-spacing-2xs)}\n"] }]
|
|
965
973
|
}] });
|
|
966
974
|
|
|
967
975
|
class TileConfigTriggerComponent {
|
|
@@ -991,10 +999,10 @@ class TileConfigTriggerComponent {
|
|
|
991
999
|
if (this.#dialogRef)
|
|
992
1000
|
this.#dialogRef.close();
|
|
993
1001
|
}
|
|
994
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
995
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.
|
|
1002
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileConfigTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1003
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.12", type: TileConfigTriggerComponent, isStandalone: true, selector: "yuv-tile-config-trigger", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, bucketLabel: { classPropertyName: "bucketLabel", publicName: "bucketLabel", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tplTileConfig", first: true, predicate: ["tplTileConfig"], descendants: true, isSignal: true }], ngImport: i0, template: "<button mat-icon-button 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 (cancel)=\"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", "cancel"] }, { kind: "ngmodule", type: TranslateModule$1 }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { 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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
996
1004
|
}
|
|
997
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1005
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileConfigTriggerComponent, decorators: [{
|
|
998
1006
|
type: Component,
|
|
999
1007
|
args: [{ selector: 'yuv-tile-config-trigger', standalone: true, imports: [CommonModule, TileConfigComponent, TranslateModule$1, MatButtonModule, MatTooltipModule, MatIcon], template: "<button mat-icon-button 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 (cancel)=\"onObjectConfigCancel()\"\n [bucket]=\"bucket() || undefined\"\n [bucketLabel]=\"bucketLabel()\"\n [configTypes]=\"options()?.configTypes\"\n [configFlavors]=\"options()?.configFlavors || []\"\n ></yuv-tile-config>\n</ng-template>\n" }]
|
|
1000
1008
|
}] });
|
|
@@ -1010,8 +1018,8 @@ class EmailTileExtensionComponent {
|
|
|
1010
1018
|
evt.stopPropagation();
|
|
1011
1019
|
alert(`You clicked '${a}' my friend.`);
|
|
1012
1020
|
}
|
|
1013
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1014
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1021
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: EmailTileExtensionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1022
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: EmailTileExtensionComponent, isStandalone: true, selector: "yuv-email-tile-extension", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.attachments": "hasAttachements()" } }, ngImport: i0, template: `
|
|
1015
1023
|
@if (hasAttachements()) {
|
|
1016
1024
|
<span>{{ attachments().length }}</span>
|
|
1017
1025
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5f6368" viewBox="0 -960 960 960">
|
|
@@ -1022,7 +1030,7 @@ class EmailTileExtensionComponent {
|
|
|
1022
1030
|
}
|
|
1023
1031
|
`, isInline: true, styles: [":host{display:flex;justify-content:end;margin-top:.5rem}:host .icon{height:1rem}\n"] }); }
|
|
1024
1032
|
}
|
|
1025
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1033
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: EmailTileExtensionComponent, decorators: [{
|
|
1026
1034
|
type: Component,
|
|
1027
1035
|
args: [{ selector: 'yuv-email-tile-extension', standalone: true, imports: [], template: `
|
|
1028
1036
|
@if (hasAttachements()) {
|