@yuuvis/client-framework 2.4.0 → 2.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/yuuvis-client-framework-forms.mjs +124 -109
- package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-list.mjs +38 -6
- package/fesm2022/yuuvis-client-framework-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs +1 -1
- package/fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-relationship.mjs +72 -50
- package/fesm2022/yuuvis-client-framework-object-relationship.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-renderer.mjs +81 -6
- package/fesm2022/yuuvis-client-framework-renderer.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-tile-list.mjs +137 -177
- package/fesm2022/yuuvis-client-framework-tile-list.mjs.map +1 -1
- package/forms/lib/elements/data-grid/data-grid/data-grid.component.d.ts +2 -2
- package/forms/lib/elements/organization/organization.component.d.ts +6 -11
- package/forms/lib/elements/organization-set/organization-set.component.d.ts +3 -5
- package/lib/assets/i18n/de.json +2 -0
- package/lib/assets/i18n/en.json +2 -0
- package/list/index.d.ts +1 -0
- package/list/lib/list-tile/list-tile.component.d.ts +14 -0
- package/list/lib/list.component.d.ts +1 -0
- package/list/lib/list.module.d.ts +2 -1
- package/object-relationship/lib/actions/add-relationship/add-relationship.component.d.ts +3 -1
- package/object-relationship/lib/object-relationship.component.d.ts +2 -0
- package/object-relationship/lib/object-relationship.const.d.ts +4 -0
- package/package.json +12 -12
- package/renderer/lib/property-renderer/organization.renderer.d.ts +4 -1
- package/tile-list/index.d.ts +1 -1
- package/tile-list/lib/tile-actions-menu/tile-actions-menu.component.d.ts +11 -0
- package/tile-list/lib/tile-list/tile-list.component.d.ts +18 -24
- package/tile-list/lib/tile/tile.component.d.ts +0 -22
|
@@ -1,33 +1,32 @@
|
|
|
1
|
-
import { NgClass, NgStyle, CommonModule } from '@angular/common';
|
|
2
1
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { Injectable, inject, ViewContainerRef, input, effect, Directive,
|
|
4
|
-
import * as i1$
|
|
5
|
-
import {
|
|
2
|
+
import { Injectable, inject, ViewContainerRef, input, effect, Directive, output, viewChild, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, contentChild, computed, viewChildren, signal, untracked, HostBinding, HostListener } from '@angular/core';
|
|
3
|
+
import * as i1$1 from '@yuuvis/client-core';
|
|
4
|
+
import { ObjectConfigService, SystemService, SearchService, EventService, DmsService, YuvEventType, BaseObjectTypeField, DmsObject, TranslateModule, ContentStreamField, Utils, Sort } from '@yuuvis/client-core';
|
|
6
5
|
import { ClickDoubleDirective, DragSelectDirective, DragSelectItemDirective, DialogComponent } from '@yuuvis/client-framework/common';
|
|
7
|
-
import * as i1 from '@angular/material/icon';
|
|
8
|
-
import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
9
|
-
import { ActionsService } from '@yuuvis/client-framework/actions';
|
|
10
|
-
import { RendererDirective } from '@yuuvis/client-framework/renderer';
|
|
11
|
-
import { switchMap, finalize } from 'rxjs';
|
|
12
|
-
import * as i1$1 from '@angular/material/button';
|
|
13
|
-
import { MatButtonModule } from '@angular/material/button';
|
|
14
|
-
import * as i2 from '@angular/material/tooltip';
|
|
15
|
-
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
16
|
-
import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
|
|
17
|
-
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
18
6
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
19
|
-
import * as i1$
|
|
7
|
+
import * as i1$3 from '@angular/forms';
|
|
20
8
|
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
21
|
-
import * as i2
|
|
9
|
+
import * as i2 from '@angular/material/icon';
|
|
10
|
+
import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
11
|
+
import * as i3 from '@angular/material/paginator';
|
|
22
12
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
13
|
+
import * as i2$1 from '@angular/material/tooltip';
|
|
14
|
+
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
15
|
+
import { ActionsService } from '@yuuvis/client-framework/actions';
|
|
23
16
|
import { YUV_ICONS, ObjectTypeIconComponent } from '@yuuvis/client-framework/icons';
|
|
24
|
-
import * as i1
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
17
|
+
import * as i1 from '@yuuvis/client-framework/list';
|
|
18
|
+
import { ListTileComponent, YuvListModule } from '@yuuvis/client-framework/list';
|
|
19
|
+
import { RendererDirective } from '@yuuvis/client-framework/renderer';
|
|
20
|
+
import { DeviceService, YmtMatIconRegistryService, YmtIconButtonDirective, YmtButtonDirective } from '@yuuvis/material';
|
|
21
|
+
import { switchMap, finalize } from 'rxjs';
|
|
22
|
+
import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
|
|
23
|
+
import * as i1$2 from '@angular/material/button';
|
|
24
|
+
import { MatButtonModule } from '@angular/material/button';
|
|
27
25
|
import { MatDialogModule, MatDialog } from '@angular/material/dialog';
|
|
28
26
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
29
|
-
import * as i3 from '@angular/material/select';
|
|
27
|
+
import * as i3$1 from '@angular/material/select';
|
|
30
28
|
import { MatSelectModule } from '@angular/material/select';
|
|
29
|
+
import { NgClass, CommonModule } from '@angular/common';
|
|
31
30
|
import { TranslateModule as TranslateModule$1 } from '@ngx-translate/core';
|
|
32
31
|
|
|
33
32
|
class TileExtensionService {
|
|
@@ -97,53 +96,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
97
96
|
}]
|
|
98
97
|
}] });
|
|
99
98
|
|
|
100
|
-
class
|
|
99
|
+
class TileActionsMenuComponent {
|
|
101
100
|
constructor() {
|
|
102
|
-
this.
|
|
103
|
-
this
|
|
104
|
-
this
|
|
105
|
-
this.tile = input.required();
|
|
106
|
-
this.actionContext = input();
|
|
107
|
-
this.dense = input(false);
|
|
108
|
-
this.actions = computed(() => {
|
|
109
|
-
const actionsList = [];
|
|
110
|
-
if (this.tile().actions?.length) {
|
|
111
|
-
this.tile().actions?.forEach((a) => {
|
|
112
|
-
const aa = this.#actionService.getActionById(a.id, this.actionContext());
|
|
113
|
-
if (aa)
|
|
114
|
-
actionsList.push(aa);
|
|
115
|
-
});
|
|
116
|
-
}
|
|
117
|
-
return actionsList;
|
|
118
|
-
});
|
|
119
|
-
this.rendererInputs = computed(() => {
|
|
120
|
-
return {
|
|
121
|
-
icon: this.tile().icon,
|
|
122
|
-
title: this.tile().title,
|
|
123
|
-
description: this.tile().description,
|
|
124
|
-
meta: this.tile().meta,
|
|
125
|
-
aside: this.tile().aside
|
|
126
|
-
};
|
|
127
|
-
});
|
|
128
|
-
}
|
|
129
|
-
#dmsService;
|
|
130
|
-
#actionService;
|
|
131
|
-
executeAction(a, evt) {
|
|
132
|
-
evt.preventDefault();
|
|
133
|
-
evt.stopPropagation();
|
|
134
|
-
this.#dmsService
|
|
135
|
-
.getDmsObject(this.tile().id)
|
|
136
|
-
.pipe(switchMap((o) => a.run([o])))
|
|
137
|
-
.subscribe();
|
|
101
|
+
this.actions = input.required();
|
|
102
|
+
this.itemSelect = output();
|
|
103
|
+
this.matMenu = viewChild.required('menuRef');
|
|
138
104
|
}
|
|
139
|
-
|
|
140
|
-
|
|
105
|
+
itemClicked(event, action) {
|
|
106
|
+
event.stopPropagation();
|
|
107
|
+
event.preventDefault();
|
|
108
|
+
this.itemSelect.emit(action);
|
|
109
|
+
}
|
|
110
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileActionsMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TileActionsMenuComponent, isStandalone: true, selector: "yuv-tile-actions-menu", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: ["menuRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
112
|
+
<mat-menu #menuRef>
|
|
113
|
+
@for (action of actions(); track action.id) {
|
|
114
|
+
<button mat-menu-item (click)="itemClicked($event, action)">
|
|
115
|
+
@if (action.icon) {
|
|
116
|
+
<mat-icon>{{ action.icon }}</mat-icon>
|
|
117
|
+
}
|
|
118
|
+
<span>{{ action.label }}</span>
|
|
119
|
+
</button>
|
|
120
|
+
}
|
|
121
|
+
</mat-menu>
|
|
122
|
+
`, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
141
123
|
}
|
|
142
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type:
|
|
124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileActionsMenuComponent, decorators: [{
|
|
143
125
|
type: Component,
|
|
144
|
-
args: [{ selector: 'yuv-tile',
|
|
145
|
-
|
|
146
|
-
|
|
126
|
+
args: [{ selector: 'yuv-tile-actions-menu', imports: [MatMenu, MatIcon, MatMenuItem], template: `
|
|
127
|
+
<mat-menu #menuRef>
|
|
128
|
+
@for (action of actions(); track action.id) {
|
|
129
|
+
<button mat-menu-item (click)="itemClicked($event, action)">
|
|
130
|
+
@if (action.icon) {
|
|
131
|
+
<mat-icon>{{ action.icon }}</mat-icon>
|
|
132
|
+
}
|
|
133
|
+
<span>{{ action.label }}</span>
|
|
134
|
+
</button>
|
|
135
|
+
}
|
|
136
|
+
</mat-menu>
|
|
137
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
|
|
147
138
|
}] });
|
|
148
139
|
|
|
149
140
|
/**
|
|
@@ -159,6 +150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
159
150
|
* the tiles in a staggered way (only if the user has not set up the OS to not
|
|
160
151
|
* play animation).
|
|
161
152
|
*/
|
|
153
|
+
const MATERIAL_IMPORTS = [MatIconModule, MatPaginatorModule, MatTooltipModule, MatMenuTrigger];
|
|
162
154
|
class TileListComponent {
|
|
163
155
|
#objectConfigService;
|
|
164
156
|
#system;
|
|
@@ -167,63 +159,18 @@ class TileListComponent {
|
|
|
167
159
|
#device;
|
|
168
160
|
#elRef;
|
|
169
161
|
#events;
|
|
170
|
-
#
|
|
171
|
-
|
|
162
|
+
#actionService;
|
|
163
|
+
#dmsService;
|
|
172
164
|
#contextFlag;
|
|
173
|
-
onContextMenu(event) {
|
|
174
|
-
event.preventDefault();
|
|
175
|
-
if (this.#contextFlag()) {
|
|
176
|
-
this.#contextFlag.set(false);
|
|
177
|
-
return;
|
|
178
|
-
}
|
|
179
|
-
setTimeout(() => {
|
|
180
|
-
this.ctxMenu.emit({ event, selection: this.selection() });
|
|
181
|
-
}, 200);
|
|
182
|
-
}
|
|
183
|
-
onMouseDown(event) {
|
|
184
|
-
// TODO: Clicking on the scrollbar also resets selection ... need to find a different way
|
|
185
|
-
// (event.target as HTMLElement).parentElement?.tagName === 'YUV-TILE-LIST' && this.#select(-1);
|
|
186
|
-
if (event.button === 2) {
|
|
187
|
-
this.#contextFlag.set(true);
|
|
188
|
-
this.onContextMenu(event);
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
165
|
onCopy(event) {
|
|
192
166
|
event.preventDefault();
|
|
193
167
|
if (this._selection.length)
|
|
194
|
-
this.tileCopy.emit(this._selectionToTileData());
|
|
168
|
+
this.tileCopy.emit(this._selectionToTileData(this._selection));
|
|
195
169
|
}
|
|
196
170
|
onCut(event) {
|
|
197
171
|
event.preventDefault();
|
|
198
172
|
if (this._selection.length)
|
|
199
|
-
this.tileCut.emit(this._selectionToTileData());
|
|
200
|
-
}
|
|
201
|
-
onKeydown(event) {
|
|
202
|
-
switch (event.code) {
|
|
203
|
-
case 'Escape': {
|
|
204
|
-
this.clearSelection();
|
|
205
|
-
break;
|
|
206
|
-
}
|
|
207
|
-
case 'Enter': {
|
|
208
|
-
// same as double click
|
|
209
|
-
const aii = this._keyManager.activeItemIndex !== null ? this._keyManager.activeItemIndex : -1;
|
|
210
|
-
if (aii >= 0) {
|
|
211
|
-
this.itemDblClick.emit(this.items[aii]);
|
|
212
|
-
}
|
|
213
|
-
break;
|
|
214
|
-
}
|
|
215
|
-
case 'Space': {
|
|
216
|
-
// same as single click
|
|
217
|
-
const aii = this._keyManager.activeItemIndex !== null ? this._keyManager.activeItemIndex : -1;
|
|
218
|
-
if (aii >= 0) {
|
|
219
|
-
this.select(this.items[aii], event);
|
|
220
|
-
}
|
|
221
|
-
break;
|
|
222
|
-
}
|
|
223
|
-
default: {
|
|
224
|
-
this._keyManager?.onKeydown(event);
|
|
225
|
-
}
|
|
226
|
-
}
|
|
173
|
+
this.tileCut.emit(this._selectionToTileData(this._selection));
|
|
227
174
|
}
|
|
228
175
|
#currBusy;
|
|
229
176
|
#_busyEffect;
|
|
@@ -239,16 +186,17 @@ class TileListComponent {
|
|
|
239
186
|
this.#device = inject(DeviceService);
|
|
240
187
|
this.#elRef = inject(ElementRef);
|
|
241
188
|
this.#events = inject(EventService);
|
|
189
|
+
this.#actionService = inject(ActionsService);
|
|
190
|
+
this.#dmsService = inject(DmsService);
|
|
191
|
+
this.menuComponent = contentChild(TileActionsMenuComponent);
|
|
192
|
+
this.menu = computed(() => {
|
|
193
|
+
const comp = this.menuComponent();
|
|
194
|
+
return comp?.matMenu() ?? null;
|
|
195
|
+
});
|
|
242
196
|
this.emptyContent = contentChild('empty');
|
|
243
197
|
this.isTouchDevice = this.#device.isTouchEnabled;
|
|
244
|
-
this.tiles = viewChildren(
|
|
245
|
-
this.
|
|
246
|
-
this.#listItemsEffect = effect(() => {
|
|
247
|
-
if (this._keyManager)
|
|
248
|
-
this._keyManager.destroy();
|
|
249
|
-
this._keyManager = new ActiveDescendantKeyManager(this.listItems() || []).withWrap();
|
|
250
|
-
});
|
|
251
|
-
// #openContextMenu = signal<{ event: MouseEvent } | null>(null);
|
|
198
|
+
this.tiles = viewChildren(ListTileComponent);
|
|
199
|
+
this.list = viewChild.required('list');
|
|
252
200
|
this.#contextFlag = signal(false);
|
|
253
201
|
this.#currBusy = false;
|
|
254
202
|
this._busy = signal(false);
|
|
@@ -331,7 +279,16 @@ class TileListComponent {
|
|
|
331
279
|
this.itemDblClick = output();
|
|
332
280
|
this.ctxMenu = output();
|
|
333
281
|
// the items rendered in the list
|
|
334
|
-
this.items = [];
|
|
282
|
+
this.items = signal([]);
|
|
283
|
+
this._items = computed(() => {
|
|
284
|
+
const items = this.items();
|
|
285
|
+
return items.map((item) => ({
|
|
286
|
+
...item,
|
|
287
|
+
actions: (item.actions || [])
|
|
288
|
+
.map((a) => this.#actionService.getActionById(a.id, this.options()?.actionContext))
|
|
289
|
+
.filter((a) => a !== undefined)
|
|
290
|
+
}));
|
|
291
|
+
});
|
|
335
292
|
this.searchExecuted = false;
|
|
336
293
|
this.#executeQueryEffect = effect(() => {
|
|
337
294
|
// execute the query each time it changes
|
|
@@ -348,53 +305,68 @@ class TileListComponent {
|
|
|
348
305
|
.subscribe((e) => {
|
|
349
306
|
const dmsObject = e.data;
|
|
350
307
|
// check if the updated object is part of the list
|
|
351
|
-
this.items.findIndex((item) => item.id === dmsObject.id) >= 0 && this.updateTileList([dmsObject]);
|
|
308
|
+
this.items().findIndex((item) => item.id === dmsObject.id) >= 0 && this.updateTileList([dmsObject]);
|
|
352
309
|
});
|
|
353
310
|
}
|
|
354
311
|
getPageSize() {
|
|
355
312
|
return typeof this.#query === 'string' ? this.pageSize() : this.#query?.size || this.pageSize();
|
|
356
313
|
}
|
|
357
314
|
contextMenuHandler(event, index) {
|
|
358
|
-
|
|
359
|
-
|
|
315
|
+
event.preventDefault();
|
|
316
|
+
// if not yet selected, select
|
|
317
|
+
if (this._selection.length === 0 || !this._selection.includes(index)) {
|
|
318
|
+
this.selectByIndex(index, event);
|
|
360
319
|
}
|
|
320
|
+
setTimeout(() => {
|
|
321
|
+
this.ctxMenu.emit({ event, selection: this.selection() });
|
|
322
|
+
}, 200);
|
|
323
|
+
}
|
|
324
|
+
executeAction(t, a, evt) {
|
|
325
|
+
evt.preventDefault();
|
|
326
|
+
evt.stopPropagation();
|
|
327
|
+
this.#dmsService
|
|
328
|
+
.getDmsObject(t.id)
|
|
329
|
+
.pipe(switchMap((o) => a.run([o])))
|
|
330
|
+
.subscribe();
|
|
361
331
|
}
|
|
362
332
|
select(i, evt) {
|
|
363
333
|
const check = this.preventChangeUntil();
|
|
364
334
|
const checked = check();
|
|
365
335
|
if (checked) {
|
|
366
|
-
const idx = this.items.findIndex((item) => item.id === i.id);
|
|
367
|
-
this.
|
|
336
|
+
const idx = this.items().findIndex((item) => item.id === i.id);
|
|
337
|
+
this.selectByIndex(idx, evt);
|
|
368
338
|
}
|
|
369
339
|
}
|
|
370
340
|
selectById(ids) {
|
|
371
341
|
if (this._busy())
|
|
372
342
|
this.#preselect.set(ids);
|
|
373
343
|
else {
|
|
374
|
-
|
|
375
|
-
this.
|
|
344
|
+
const selection = ids.map((id) => this.items().findIndex((i) => i.id === id)).filter((i) => i !== -1);
|
|
345
|
+
this.list().multiSelect(selection);
|
|
376
346
|
this.#elRef.nativeElement.focus();
|
|
377
|
-
this.listItems().forEach((item, i) => item.selectedInput.set(this._selection.includes(i)));
|
|
378
|
-
const tiles = this._selectionToTileData();
|
|
347
|
+
// this.listItems().forEach((item: ListItemDirective, i: number) => item.selectedInput.set(this._selection.includes(i)));
|
|
348
|
+
const tiles = this._selectionToTileData(selection);
|
|
379
349
|
this.selectionChange.emit(tiles);
|
|
380
350
|
}
|
|
381
351
|
}
|
|
382
352
|
onDragSelectChange(sel) {
|
|
383
|
-
|
|
384
|
-
this._keyManager.setActiveItem(-1);
|
|
353
|
+
this.list().multiSelect(sel);
|
|
385
354
|
this._selection = sel;
|
|
386
355
|
this._selection.sort();
|
|
387
|
-
this.listItems().forEach((item, i) => item.selectedInput.set(this._selection.includes(i)));
|
|
388
356
|
}
|
|
389
357
|
onDragSelect(sel) {
|
|
390
358
|
this.#elRef.nativeElement.focus();
|
|
391
359
|
this._selection = sel;
|
|
392
|
-
this._keyManager.setActiveItem(sel[0] || 0);
|
|
393
|
-
const tiles = this._selectionToTileData();
|
|
360
|
+
// this._keyManager.setActiveItem(sel[0] || 0);
|
|
361
|
+
const tiles = this._selectionToTileData(sel);
|
|
394
362
|
this.selectionChange.emit(tiles);
|
|
395
363
|
}
|
|
396
|
-
|
|
397
|
-
this.
|
|
364
|
+
onListItemsSelect(sel) {
|
|
365
|
+
this._selection = sel;
|
|
366
|
+
this.selectByIndex(sel[0]);
|
|
367
|
+
}
|
|
368
|
+
selectByIndex(idx, evt) {
|
|
369
|
+
// this._keyManager.setActiveItem(idx);
|
|
398
370
|
this.#select(idx, evt?.shiftKey, evt?.ctrlKey);
|
|
399
371
|
}
|
|
400
372
|
refresh() {
|
|
@@ -409,13 +381,11 @@ class TileListComponent {
|
|
|
409
381
|
applyFlavor(flavor) {
|
|
410
382
|
this.appliedFlavor = this.appliedFlavor?.id === flavor.id ? undefined : flavor;
|
|
411
383
|
if (this._rawResult)
|
|
412
|
-
this.items
|
|
384
|
+
this.items.set(this._mapSearchResult(this._rawResult));
|
|
413
385
|
}
|
|
414
386
|
clearSelection(silent = false) {
|
|
415
387
|
if (this._selection.length) {
|
|
416
388
|
this._selection = [];
|
|
417
|
-
this._keyManager.setActiveItem(-1);
|
|
418
|
-
this.listItems().forEach((item) => item.selectedInput.set(false));
|
|
419
389
|
if (!silent)
|
|
420
390
|
this.selectionChange.emit([]);
|
|
421
391
|
}
|
|
@@ -449,7 +419,7 @@ class TileListComponent {
|
|
|
449
419
|
.subscribe({
|
|
450
420
|
next: (res) => {
|
|
451
421
|
this.#setupPagination(res);
|
|
452
|
-
this.items
|
|
422
|
+
this.items.set(this._mapSearchResult(res));
|
|
453
423
|
},
|
|
454
424
|
error: (err) => {
|
|
455
425
|
// TODO: how should errors be handles in case hat loading pages fail
|
|
@@ -491,14 +461,14 @@ class TileListComponent {
|
|
|
491
461
|
}
|
|
492
462
|
this._lastSelection = this._selection.length === 0 ? undefined : index;
|
|
493
463
|
this._selection.sort();
|
|
494
|
-
this.listItems().forEach((item, i) => item.selectedInput.set(this._selection.includes(i)));
|
|
495
|
-
const tiles = this._selectionToTileData();
|
|
464
|
+
// this.listItems().forEach((item: ListItemDirective, i: number) => item.selectedInput.set(this._selection.includes(i)));
|
|
465
|
+
const tiles = this._selectionToTileData(this._selection);
|
|
496
466
|
this.selectionChange.emit(tiles);
|
|
497
467
|
tiles.length === 1 && this.itemSelect.emit(tiles[0]);
|
|
498
|
-
this.selectedTile.set(this._selection.map((idx) => this.items[idx]));
|
|
468
|
+
this.selectedTile.set(this._selection.map((idx) => this.items()[idx]));
|
|
499
469
|
}
|
|
500
|
-
_selectionToTileData() {
|
|
501
|
-
return
|
|
470
|
+
_selectionToTileData(selection) {
|
|
471
|
+
return selection.map((idx) => this.items()[idx]);
|
|
502
472
|
}
|
|
503
473
|
/**
|
|
504
474
|
* Executes a search query.
|
|
@@ -509,7 +479,7 @@ class TileListComponent {
|
|
|
509
479
|
if (query && this.#system.system && !this._busy()) {
|
|
510
480
|
this.searchExecuted = false;
|
|
511
481
|
// reset items to avoid old data being shown while new stuff is loaded
|
|
512
|
-
this.items
|
|
482
|
+
this.items.set([]);
|
|
513
483
|
this._busy.set(true);
|
|
514
484
|
const isSearchQuery = query && typeof query !== 'string';
|
|
515
485
|
if (isSearchQuery) {
|
|
@@ -520,7 +490,7 @@ class TileListComponent {
|
|
|
520
490
|
.subscribe({
|
|
521
491
|
next: (res) => {
|
|
522
492
|
this.#setupPagination(res);
|
|
523
|
-
this.items
|
|
493
|
+
this.items.set(this._mapSearchResult(res));
|
|
524
494
|
this.queryResult.emit({ totalCount: res.items.length });
|
|
525
495
|
const preselect = this.preselect();
|
|
526
496
|
if (preselect) {
|
|
@@ -618,10 +588,10 @@ class TileListComponent {
|
|
|
618
588
|
}
|
|
619
589
|
updateTileList(listItems) {
|
|
620
590
|
listItems.forEach((item) => {
|
|
621
|
-
const idx = this.items.findIndex((listItem) => listItem.id === item.id);
|
|
591
|
+
const idx = this.items().findIndex((listItem) => listItem.id === item.id);
|
|
622
592
|
if (idx >= 0 && this.oc) {
|
|
623
593
|
const mappedTileData = this.#mapToTileData([item]);
|
|
624
|
-
this.items[idx] = mappedTileData[0];
|
|
594
|
+
this.items()[idx] = mappedTileData[0];
|
|
625
595
|
}
|
|
626
596
|
});
|
|
627
597
|
}
|
|
@@ -638,44 +608,34 @@ class TileListComponent {
|
|
|
638
608
|
});
|
|
639
609
|
}
|
|
640
610
|
ngOnDestroy() {
|
|
641
|
-
this._keyManager?.destroy();
|
|
611
|
+
// this._keyManager?.destroy();
|
|
642
612
|
}
|
|
643
613
|
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: {
|
|
614
|
+
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: { listeners: { "keydown.control.c": "onCopy($event)", "keydown.control.x": "onCut($event)" }, properties: { "class.dense": "dense()", "class.pagination": "this.pagination" } }, providers: [], queries: [{ propertyName: "menuComponent", first: true, predicate: TileActionsMenuComponent, descendants: true, isSignal: true }, { propertyName: "emptyContent", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tiles", predicate: ListTileComponent, descendants: true, isSignal: true }, { propertyName: "list", first: true, predicate: ["list"], 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\n<yuv-list\n #list\n [multiselect]=\"this.multiselect()\"\n [selfHandleSelection]=\"true\"\n (itemSelect)=\"onListItemsSelect($event)\"\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-list-tile\n yuvListItem\n yuvDragSelectItem\n (click.single)=\"select(i, $event)\"\n (click.double)=\"itemDblClick.emit(i)\"\n (contextmenu)=\"contextMenuHandler($event, $index)\"\n >\n <ng-template #iconSlot><ng-container *yuvRenderer=\"i.icon\"></ng-container></ng-template>\n <ng-template #titleSlot><ng-container *yuvRenderer=\"i.title\"></ng-container></ng-template>\n <ng-template #descriptionSlot><ng-container *yuvRenderer=\"i.description\"></ng-container></ng-template>\n <ng-template #metaSlot><ng-container *yuvRenderer=\"i.meta\"></ng-container></ng-template>\n <ng-template #asideSlot><ng-container *yuvRenderer=\"i.aside\"></ng-container></ng-template>\n <ng-template #actionsSlot>\n @for (a of i.actions; track a.id) {\n <button ymt-icon-button [icon-button-size]=\"'small'\" [matTooltip]=\"a.label\" (click)=\"executeAction(i, a, $event)\">\n <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n </button>\n }\n\n @if (menu()) {\n <button ymt-icon-button [icon-button-size]=\"'small'\" [matMenuTriggerFor]=\"menu()\">\n <mat-icon inert=\"true\">more_vert</mat-icon>\n </button>\n }\n <ng-content select=\"yuv-tile-actions-menu, [yuv-tile-actions-menu]\"></ng-content>\n </ng-template>\n <ng-template #extensionSlot> <ng-container *yuvTileExtension=\"{ typeId: i.objectTypeId, data: i.instanceData }\"></ng-container> </ng-template>\n <ng-template #badgesSlot>{{ i.badges }}</ng-template>\n </yuv-list-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</yuv-list>\n@if (pagination) {\n <mat-paginator class=\"paginator\" [length]=\"pagination?.total\" [pageSize]=\"getPageSize()\" (page)=\"changePage($event)\" hidePageSize> </mat-paginator>\n}\n", styles: [":host{--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host yuv-list{overflow-y:auto;display:flex;flex-flow:column;height:100%}:host yuv-list .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: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i1.ListComponent, selector: "yuv-list", inputs: ["preventChangeUntil", "multiselect", "selfHandleSelection", "autoSelect", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: i1.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "component", type: i1.ListTileComponent, selector: "yuv-list-tile" }, { 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: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "directive", type: TileExtensionDirective, selector: "[yuvTileExtension]", inputs: ["yuvTileExtension"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
|
|
645
615
|
}
|
|
646
616
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileListComponent, decorators: [{
|
|
647
617
|
type: Component,
|
|
648
618
|
args: [{ selector: 'yuv-tile-list', standalone: true, providers: [], imports: [
|
|
649
|
-
NgClass,
|
|
650
|
-
NgStyle,
|
|
651
|
-
TileComponent,
|
|
652
619
|
TranslateModule,
|
|
653
620
|
ReactiveFormsModule,
|
|
654
621
|
YuvListModule,
|
|
655
622
|
ClickDoubleDirective,
|
|
623
|
+
YuvListModule,
|
|
656
624
|
DragSelectDirective,
|
|
657
625
|
DragSelectItemDirective,
|
|
658
|
-
|
|
626
|
+
RendererDirective,
|
|
627
|
+
TileExtensionDirective,
|
|
628
|
+
YmtIconButtonDirective,
|
|
629
|
+
...MATERIAL_IMPORTS
|
|
659
630
|
], host: {
|
|
660
|
-
tabindex: '0',
|
|
661
|
-
role: 'listbox',
|
|
662
631
|
'[class.dense]': 'dense()'
|
|
663
|
-
}, template: "<div\n class=\"tiles\"\n [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n (dragSelectChange)=\"onDragSelectChange($event)\"\n (dragSelect)=\"onDragSelect($event)\"\n>\n @for (i of
|
|
664
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
665
|
-
type: HostListener,
|
|
666
|
-
args: ['contextmenu', ['$event']]
|
|
667
|
-
}], onMouseDown: [{
|
|
668
|
-
type: HostListener,
|
|
669
|
-
args: ['mousedown', ['$event']]
|
|
670
|
-
}], onCopy: [{
|
|
632
|
+
}, template: "<!-- <div\n class=\"tiles\"\n [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n (dragSelectChange)=\"onDragSelectChange($event)\"\n (dragSelect)=\"onDragSelect($event)\"\n> -->\n\n<yuv-list\n #list\n [multiselect]=\"this.multiselect()\"\n [selfHandleSelection]=\"true\"\n (itemSelect)=\"onListItemsSelect($event)\"\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-list-tile\n yuvListItem\n yuvDragSelectItem\n (click.single)=\"select(i, $event)\"\n (click.double)=\"itemDblClick.emit(i)\"\n (contextmenu)=\"contextMenuHandler($event, $index)\"\n >\n <ng-template #iconSlot><ng-container *yuvRenderer=\"i.icon\"></ng-container></ng-template>\n <ng-template #titleSlot><ng-container *yuvRenderer=\"i.title\"></ng-container></ng-template>\n <ng-template #descriptionSlot><ng-container *yuvRenderer=\"i.description\"></ng-container></ng-template>\n <ng-template #metaSlot><ng-container *yuvRenderer=\"i.meta\"></ng-container></ng-template>\n <ng-template #asideSlot><ng-container *yuvRenderer=\"i.aside\"></ng-container></ng-template>\n <ng-template #actionsSlot>\n @for (a of i.actions; track a.id) {\n <button ymt-icon-button [icon-button-size]=\"'small'\" [matTooltip]=\"a.label\" (click)=\"executeAction(i, a, $event)\">\n <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n </button>\n }\n\n @if (menu()) {\n <button ymt-icon-button [icon-button-size]=\"'small'\" [matMenuTriggerFor]=\"menu()\">\n <mat-icon inert=\"true\">more_vert</mat-icon>\n </button>\n }\n <ng-content select=\"yuv-tile-actions-menu, [yuv-tile-actions-menu]\"></ng-content>\n </ng-template>\n <ng-template #extensionSlot> <ng-container *yuvTileExtension=\"{ typeId: i.objectTypeId, data: i.instanceData }\"></ng-container> </ng-template>\n <ng-template #badgesSlot>{{ i.badges }}</ng-template>\n </yuv-list-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</yuv-list>\n@if (pagination) {\n <mat-paginator class=\"paginator\" [length]=\"pagination?.total\" [pageSize]=\"getPageSize()\" (page)=\"changePage($event)\" hidePageSize> </mat-paginator>\n}\n", styles: [":host{--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host yuv-list{overflow-y:auto;display:flex;flex-flow:column;height:100%}:host yuv-list .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"] }]
|
|
633
|
+
}], ctorParameters: () => [], propDecorators: { onCopy: [{
|
|
671
634
|
type: HostListener,
|
|
672
635
|
args: ['keydown.control.c', ['$event']]
|
|
673
636
|
}], onCut: [{
|
|
674
637
|
type: HostListener,
|
|
675
638
|
args: ['keydown.control.x', ['$event']]
|
|
676
|
-
}], onKeydown: [{
|
|
677
|
-
type: HostListener,
|
|
678
|
-
args: ['keydown', ['$event']]
|
|
679
639
|
}], pagination: [{
|
|
680
640
|
type: HostBinding,
|
|
681
641
|
args: ['class.pagination']
|
|
@@ -693,7 +653,7 @@ class ActionSelectComponent {
|
|
|
693
653
|
this.actionSelect = output();
|
|
694
654
|
}
|
|
695
655
|
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:
|
|
656
|
+
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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
697
657
|
}
|
|
698
658
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ActionSelectComponent, decorators: [{
|
|
699
659
|
type: Component,
|
|
@@ -721,7 +681,7 @@ class IconSelectComponent {
|
|
|
721
681
|
this.iconSelect.emit(data);
|
|
722
682
|
}
|
|
723
683
|
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$
|
|
684
|
+
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$1.TranslatePipe, name: "translate" }] }); }
|
|
725
685
|
}
|
|
726
686
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IconSelectComponent, decorators: [{
|
|
727
687
|
type: Component,
|
|
@@ -811,7 +771,7 @@ class PropertySelectComponent {
|
|
|
811
771
|
return this.system.getLocalizedLabel(otf.id) || otf.id;
|
|
812
772
|
}
|
|
813
773
|
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$
|
|
774
|
+
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$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
815
775
|
}
|
|
816
776
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PropertySelectComponent, decorators: [{
|
|
817
777
|
type: Component,
|
|
@@ -870,7 +830,7 @@ class TileConfigTileComponent {
|
|
|
870
830
|
});
|
|
871
831
|
}
|
|
872
832
|
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$
|
|
833
|
+
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$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.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"] }] }); }
|
|
874
834
|
}
|
|
875
835
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileConfigTileComponent, decorators: [{
|
|
876
836
|
type: Component,
|
|
@@ -1051,7 +1011,7 @@ class TileConfigComponent {
|
|
|
1051
1011
|
return true;
|
|
1052
1012
|
}
|
|
1053
1013
|
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$
|
|
1014
|
+
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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: YuvListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] }); }
|
|
1055
1015
|
}
|
|
1056
1016
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileConfigComponent, decorators: [{
|
|
1057
1017
|
type: Component,
|
|
@@ -1103,7 +1063,7 @@ class TileConfigTriggerComponent {
|
|
|
1103
1063
|
this.#dialogRef.close();
|
|
1104
1064
|
}
|
|
1105
1065
|
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$
|
|
1066
|
+
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$1.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$1.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"] }] }); }
|
|
1107
1067
|
}
|
|
1108
1068
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileConfigTriggerComponent, decorators: [{
|
|
1109
1069
|
type: Component,
|
|
@@ -1155,5 +1115,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1155
1115
|
* Generated bundle index. Do not edit.
|
|
1156
1116
|
*/
|
|
1157
1117
|
|
|
1158
|
-
export { ActionSelectComponent, EmailTileExtensionComponent, PropertySelectComponent,
|
|
1118
|
+
export { ActionSelectComponent, EmailTileExtensionComponent, PropertySelectComponent, TileActionsMenuComponent, TileConfigComponent, TileConfigTriggerComponent, TileExtensionDirective, TileExtensionService, TileListComponent };
|
|
1159
1119
|
//# sourceMappingURL=yuuvis-client-framework-tile-list.mjs.map
|