@yuuvis/client-framework 2.3.7 → 2.3.9
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-common.mjs +3 -1
- package/fesm2022/yuuvis-client-framework-common.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-forms.mjs +31 -12
- package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-details.mjs +28 -30
- package/fesm2022/yuuvis-client-framework-object-details.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs +2 -2
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-form.mjs +4 -4
- package/fesm2022/yuuvis-client-framework-object-form.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-sort.mjs +40 -15
- package/fesm2022/yuuvis-client-framework-sort.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-tile-list.mjs +10 -5
- package/fesm2022/yuuvis-client-framework-tile-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-widget-grid.mjs +20 -10
- package/fesm2022/yuuvis-client-framework-widget-grid.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework.mjs +1 -1
- package/fesm2022/yuuvis-client-framework.mjs.map +1 -1
- package/forms/lib/elements/data-grid/data-grid/data-grid.component.d.ts +2 -3
- package/lib/assets/i18n/de.json +8 -6
- package/lib/assets/i18n/en.json +2 -0
- package/object-details/lib/object-audit/object-audit.component.d.ts +3 -8
- package/package.json +9 -9
- package/sort/lib/sort/sort.component.d.ts +5 -1
- package/tile-list/lib/tile/tile.component.d.ts +2 -1
- package/tile-list/lib/tile-list/tile-list.component.d.ts +2 -1
- package/widget-grid/lib/widget-grid-registry.service.d.ts +1 -0
|
@@ -20,6 +20,7 @@ class SortComponent {
|
|
|
20
20
|
this.#systemService = inject(SystemService);
|
|
21
21
|
this.translate = inject(TranslateService);
|
|
22
22
|
this.sortOptions = input([]);
|
|
23
|
+
this.selectedSortOption = input(undefined);
|
|
23
24
|
this.storageKey = input();
|
|
24
25
|
this.sortChanged = output();
|
|
25
26
|
this.orderOptions = signal([
|
|
@@ -47,16 +48,28 @@ class SortComponent {
|
|
|
47
48
|
});
|
|
48
49
|
this.#reEvaluate = signal(null);
|
|
49
50
|
this.sortFields = linkedSignal({
|
|
50
|
-
source: () => ({
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
51
|
+
source: () => ({
|
|
52
|
+
sortOptions: this.sortOptions(),
|
|
53
|
+
orderOptions: this.orderOptions(),
|
|
54
|
+
selectedSortOption: this.selectedSortOption(),
|
|
55
|
+
evaluate: this.#reEvaluate()
|
|
56
|
+
}),
|
|
57
|
+
computation: ({ sortOptions, orderOptions, selectedSortOption }) => {
|
|
58
|
+
console.log('sortOptions', sortOptions, 'selectedSortOption', selectedSortOption);
|
|
59
|
+
// Ensure selectedSortOption.field is present in sortOptions
|
|
60
|
+
if (selectedSortOption && selectedSortOption.field && !sortOptions.includes(selectedSortOption.order)) {
|
|
61
|
+
orderOptions = orderOptions.map((order) => (order.value === selectedSortOption.order ? { ...order, selected: true } : { ...order, selected: false }));
|
|
62
|
+
}
|
|
63
|
+
return [
|
|
64
|
+
...sortOptions.map((f, index) => ({
|
|
65
|
+
label: this.#systemService.getLocalizedLabel(f) || f,
|
|
66
|
+
value: f,
|
|
67
|
+
type: 'sort',
|
|
68
|
+
selected: index === 0 // first sort option is default
|
|
69
|
+
})),
|
|
70
|
+
...orderOptions
|
|
71
|
+
];
|
|
72
|
+
}
|
|
60
73
|
});
|
|
61
74
|
this.translate.onLangChange.pipe(takeUntilDestroyed()).subscribe({ next: () => this.#reEvaluate.set(new Date()) });
|
|
62
75
|
}
|
|
@@ -75,15 +88,21 @@ class SortComponent {
|
|
|
75
88
|
this.sortChanged.emit(fields);
|
|
76
89
|
}
|
|
77
90
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
78
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SortComponent, isStandalone: true, selector: "yuv-sort", inputs: { sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChanged: "sortChanged" }, ngImport: i0, template: `<button mat-icon-button [matMenuTriggerFor]="menu" title="{{ 'yuv.sort.tooltip' | translate }}">
|
|
91
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SortComponent, isStandalone: true, selector: "yuv-sort", inputs: { sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, selectedSortOption: { classPropertyName: "selectedSortOption", publicName: "selectedSortOption", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChanged: "sortChanged" }, ngImport: i0, template: `<button mat-icon-button [matMenuTriggerFor]="menu" title="{{ 'yuv.sort.tooltip' | translate }}">
|
|
79
92
|
<mat-icon>swap_vert</mat-icon>
|
|
80
93
|
</button>
|
|
81
94
|
|
|
82
95
|
<mat-menu #menu="matMenu" class="sort-menu" [ariaLabel]="'yuv.sort.tooltip' | translate">
|
|
83
96
|
@for (option of sortFields(); track $index) {
|
|
84
|
-
<button
|
|
97
|
+
<button
|
|
98
|
+
mat-menu-item
|
|
99
|
+
class="sort-menu-item"
|
|
100
|
+
[class.selected]="option.selected"
|
|
101
|
+
(click)="selectSort(option)"
|
|
102
|
+
[attr.aria-label]="option.label"
|
|
103
|
+
[attr.title]="option.label"
|
|
104
|
+
>
|
|
85
105
|
<mat-icon>{{ option.selected ? 'radio_button_checked' : '' }}</mat-icon>
|
|
86
|
-
|
|
87
106
|
<span>{{ option.label }}</span>
|
|
88
107
|
</button>
|
|
89
108
|
@if (sortFields().length - 3 === $index) {
|
|
@@ -100,9 +119,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
100
119
|
|
|
101
120
|
<mat-menu #menu="matMenu" class="sort-menu" [ariaLabel]="'yuv.sort.tooltip' | translate">
|
|
102
121
|
@for (option of sortFields(); track $index) {
|
|
103
|
-
<button
|
|
122
|
+
<button
|
|
123
|
+
mat-menu-item
|
|
124
|
+
class="sort-menu-item"
|
|
125
|
+
[class.selected]="option.selected"
|
|
126
|
+
(click)="selectSort(option)"
|
|
127
|
+
[attr.aria-label]="option.label"
|
|
128
|
+
[attr.title]="option.label"
|
|
129
|
+
>
|
|
104
130
|
<mat-icon>{{ option.selected ? 'radio_button_checked' : '' }}</mat-icon>
|
|
105
|
-
|
|
106
131
|
<span>{{ option.label }}</span>
|
|
107
132
|
</button>
|
|
108
133
|
@if (sortFields().length - 3 === $index) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"yuuvis-client-framework-sort.mjs","sources":["../../../../../libs/yuuvis/client-framework/sort/src/lib/sort/sort.component.ts","../../../../../libs/yuuvis/client-framework/sort/src/yuuvis-client-framework-sort.ts"],"sourcesContent":["import { Component, effect, inject, input, linkedSignal, output, signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDivider } from '@angular/material/divider';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { SystemService, TranslateModule, TranslateService } from '@yuuvis/client-core';\nimport { SortMenuOption, SortType } from './models';\n\nconst MATERIAL_MODULES = [MatIconModule, MatMenuModule, MatButtonModule, MatDivider];\n\n@Component({\n selector: 'yuv-sort',\n imports: [TranslateModule, ...MATERIAL_MODULES],\n template: `<button mat-icon-button [matMenuTriggerFor]=\"menu\" title=\"{{ 'yuv.sort.tooltip' | translate }}\">\n <mat-icon>swap_vert</mat-icon>\n </button>\n\n <mat-menu #menu=\"matMenu\" class=\"sort-menu\" [ariaLabel]=\"'yuv.sort.tooltip' | translate\">\n @for (option of sortFields(); track $index) {\n <button mat-menu-item class=\"sort-menu-item\" [class.selected]=\"option.selected\" (click)=\"selectSort(option)\" [attr.aria-label]=\"option.label\">\n <mat-icon>{{ option.selected ? 'radio_button_checked' : '' }}</mat-icon>\n\n <span>{{ option.label }}</span>\n </button>\n @if (sortFields().length - 3 === $index) {\n <mat-divider></mat-divider>\n }\n }\n </mat-menu>`,\n styleUrl: './sort.component.scss'\n})\nexport class SortComponent {\n readonly #systemService = inject(SystemService);\n readonly translate = inject(TranslateService);\n\n sortOptions = input<string[]>([]);\n storageKey = input<string>();\n sortChanged = output<{ field: string; order: SortType }>();\n\n orderOptions = signal<SortMenuOption[]>([\n { label: this.translate.instant('yuv.sort.ascending'), value: 'asc', type: 'order', selected: true },\n { label: this.translate.instant('yuv.sort.descending'), value: 'desc', type: 'order', selected: false }\n ]);\n\n #rememberSort = effect(() => {\n const storageKey = this.storageKey();\n if (storageKey) {\n const storage = localStorage.getItem(storageKey);\n if (storage) {\n try {\n const data = JSON.parse(storage);\n this.sortFields.update((fields) =>\n fields.map((field) =>\n field.type === 'sort' && field.value === data.field\n ? { ...field, selected: true }\n : field.type === 'order' && field.value === data.order\n ? { ...field, selected: true }\n : { ...field, selected: false }\n )\n );\n } catch (error) {\n console.error('Error parsing sort data from localStorage:', error);\n }\n }\n }\n });\n\n #reEvaluate = signal<Date | null>(null);\n sortFields = linkedSignal({\n source: () => ({ sortOptions: this.sortOptions(), orderOptions: this.orderOptions(), evaluate: this.#reEvaluate() }),\n computation: ({ sortOptions, orderOptions }) => [\n ...sortOptions.map((f, index) => ({\n label: this.#systemService.getLocalizedLabel(f) || f,\n value: f,\n type: 'sort' as const,\n selected: index === 0 // first sort option is default\n })),\n ...orderOptions\n ]\n });\n\n constructor() {\n this.translate.onLangChange.pipe(takeUntilDestroyed()).subscribe({ next: () => this.#reEvaluate.set(new Date()) });\n }\n\n selectSort(option: SortMenuOption) {\n this.sortFields.update((fields) => fields.map((field) => (field.type === option.type ? { ...field, selected: field.value === option.value } : field)));\n const selectedFields = this.sortFields().filter((field) => field.selected);\n const fields = selectedFields.reduce(\n (acc, field) => {\n if (field.type === 'sort') acc.field = field.value;\n if (field.type === 'order') acc.order = field.value as SortType;\n return acc;\n },\n { field: '', order: 'asc' as SortType }\n );\n\n const storageKey = this.storageKey();\n storageKey && localStorage.setItem(storageKey, JSON.stringify(fields));\n this.sortChanged.emit(fields);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"yuuvis-client-framework-sort.mjs","sources":["../../../../../libs/yuuvis/client-framework/sort/src/lib/sort/sort.component.ts","../../../../../libs/yuuvis/client-framework/sort/src/yuuvis-client-framework-sort.ts"],"sourcesContent":["import { Component, effect, inject, input, linkedSignal, output, signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDivider } from '@angular/material/divider';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { SystemService, TranslateModule, TranslateService } from '@yuuvis/client-core';\nimport { SortMenuOption, SortType } from './models';\n\nconst MATERIAL_MODULES = [MatIconModule, MatMenuModule, MatButtonModule, MatDivider];\n\n@Component({\n selector: 'yuv-sort',\n imports: [TranslateModule, ...MATERIAL_MODULES],\n template: `<button mat-icon-button [matMenuTriggerFor]=\"menu\" title=\"{{ 'yuv.sort.tooltip' | translate }}\">\n <mat-icon>swap_vert</mat-icon>\n </button>\n\n <mat-menu #menu=\"matMenu\" class=\"sort-menu\" [ariaLabel]=\"'yuv.sort.tooltip' | translate\">\n @for (option of sortFields(); track $index) {\n <button\n mat-menu-item\n class=\"sort-menu-item\"\n [class.selected]=\"option.selected\"\n (click)=\"selectSort(option)\"\n [attr.aria-label]=\"option.label\"\n [attr.title]=\"option.label\"\n >\n <mat-icon>{{ option.selected ? 'radio_button_checked' : '' }}</mat-icon>\n <span>{{ option.label }}</span>\n </button>\n @if (sortFields().length - 3 === $index) {\n <mat-divider></mat-divider>\n }\n }\n </mat-menu>`,\n styleUrl: './sort.component.scss'\n})\nexport class SortComponent {\n readonly #systemService = inject(SystemService);\n readonly translate = inject(TranslateService);\n\n sortOptions = input<string[]>([]);\n selectedSortOption = input<{ field: string; order: SortType } | undefined>(undefined);\n storageKey = input<string>();\n sortChanged = output<{ field: string; order: SortType }>();\n\n orderOptions = signal<SortMenuOption[]>([\n { label: this.translate.instant('yuv.sort.ascending'), value: 'asc', type: 'order', selected: true },\n { label: this.translate.instant('yuv.sort.descending'), value: 'desc', type: 'order', selected: false }\n ]);\n\n #rememberSort = effect(() => {\n const storageKey = this.storageKey();\n if (storageKey) {\n const storage = localStorage.getItem(storageKey);\n if (storage) {\n try {\n const data = JSON.parse(storage);\n this.sortFields.update((fields) =>\n fields.map((field) =>\n field.type === 'sort' && field.value === data.field\n ? { ...field, selected: true }\n : field.type === 'order' && field.value === data.order\n ? { ...field, selected: true }\n : { ...field, selected: false }\n )\n );\n } catch (error) {\n console.error('Error parsing sort data from localStorage:', error);\n }\n }\n }\n });\n\n #reEvaluate = signal<Date | null>(null);\n sortFields = linkedSignal({\n source: () => ({\n sortOptions: this.sortOptions(),\n orderOptions: this.orderOptions(),\n selectedSortOption: this.selectedSortOption(),\n evaluate: this.#reEvaluate()\n }),\n computation: ({ sortOptions, orderOptions, selectedSortOption }) => {\n console.log('sortOptions', sortOptions, 'selectedSortOption', selectedSortOption);\n\n // Ensure selectedSortOption.field is present in sortOptions\n if (selectedSortOption && selectedSortOption.field && !sortOptions.includes(selectedSortOption.order)) {\n orderOptions = orderOptions.map((order) => (order.value === selectedSortOption.order ? { ...order, selected: true } : { ...order, selected: false }));\n }\n\n return [\n ...sortOptions.map((f, index) => ({\n label: this.#systemService.getLocalizedLabel(f) || f,\n value: f,\n type: 'sort' as const,\n selected: index === 0 // first sort option is default\n })),\n ...orderOptions\n ];\n }\n });\n\n constructor() {\n this.translate.onLangChange.pipe(takeUntilDestroyed()).subscribe({ next: () => this.#reEvaluate.set(new Date()) });\n }\n\n selectSort(option: SortMenuOption) {\n this.sortFields.update((fields) => fields.map((field) => (field.type === option.type ? { ...field, selected: field.value === option.value } : field)));\n const selectedFields = this.sortFields().filter((field) => field.selected);\n const fields = selectedFields.reduce(\n (acc, field) => {\n if (field.type === 'sort') acc.field = field.value;\n if (field.type === 'order') acc.order = field.value as SortType;\n return acc;\n },\n { field: '', order: 'asc' as SortType }\n );\n\n const storageKey = this.storageKey();\n storageKey && localStorage.setItem(storageKey, JSON.stringify(fields));\n this.sortChanged.emit(fields);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -102,6 +102,7 @@ class TileComponent {
|
|
|
102
102
|
this.#actionService = inject(ActionsService);
|
|
103
103
|
this.tile = input.required();
|
|
104
104
|
this.actionContext = input();
|
|
105
|
+
this.dense = input(false);
|
|
105
106
|
this.actions = computed(() => {
|
|
106
107
|
const actionsList = [];
|
|
107
108
|
if (this.tile().actions?.length) {
|
|
@@ -134,11 +135,13 @@ class TileComponent {
|
|
|
134
135
|
.subscribe();
|
|
135
136
|
}
|
|
136
137
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
137
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 class=\"tile\">\n <div data-slot=\"icon\">\n <ng-container *yuvRenderer=\"rendererInputs().icon\"></ng-container>\n </div>\n \n <div class=\"slots\">\n <div data-slot=\"title-description\">\n <div data-slot=\"title\">\n <ng-container *yuvRenderer=\"rendererInputs().title\"></ng-container>\n </div>\n <div data-slot=\"description\">\n <ng-container *yuvRenderer=\"rendererInputs().description\"></ng-container>\n </div>\n </div>\n \n <div data-slot=\"actions\">\n @for (a of actions(); track a.id) {\n <button mat-icon-button [matTooltip]=\"a.label\" (click)=\"executeAction(a, $event)\">\n <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n </button>\n }\n </div>\n \n <div data-slot=\"aside\">\n <ng-container *yuvRenderer=\"rendererInputs().aside\"></ng-container>\n </div>\n \n <div data-slot=\"meta\">\n <ng-container *yuvRenderer=\"rendererInputs().meta\"></ng-container>\n </div>\n \n <div data-slot=\"badges\">{{ tile().badges }}</div>\n \n <div class=\"extension\">\n <ng-container *yuvTileExtension=\"{ typeId: tile().objectTypeId, data: tile().instanceData }\"></ng-container>\n </div>\n </div>\n</div>\n", styles: [":host{--tile-margin: var(--ymt-spacing-xs)}:host:hover:not([aria-selected=true]) .tile{--tile-background: var(--ymt-hover-background)}:host[aria-selected=true] .tile{--tile-background: var(--ymt-selection-background)}:host[aria-current=true] .tile{--tile-background: var(--ymt-focus-background)}:host .tile{display:flex;align-items:center;background-color:var(--tile-background, transparent);padding:calc(var(--
|
|
138
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TileComponent, isStandalone: true, selector: "yuv-tile", inputs: { tile: { classPropertyName: "tile", publicName: "tile", isSignal: true, isRequired: true, transformFunction: null }, actionContext: { classPropertyName: "actionContext", publicName: "actionContext", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dense": "dense()" } }, ngImport: i0, template: "<div class=\"tile\">\n <div data-slot=\"icon\">\n <ng-container *yuvRenderer=\"rendererInputs().icon\"></ng-container>\n </div>\n \n <div class=\"slots\">\n <div data-slot=\"title-description\">\n <div data-slot=\"title\">\n <ng-container *yuvRenderer=\"rendererInputs().title\"></ng-container>\n </div>\n <div data-slot=\"description\">\n <ng-container *yuvRenderer=\"rendererInputs().description\"></ng-container>\n </div>\n </div>\n \n <div data-slot=\"actions\">\n @for (a of actions(); track a.id) {\n <button mat-icon-button [matTooltip]=\"a.label\" (click)=\"executeAction(a, $event)\">\n <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n </button>\n }\n </div>\n \n <div data-slot=\"aside\">\n <ng-container *yuvRenderer=\"rendererInputs().aside\"></ng-container>\n </div>\n \n <div data-slot=\"meta\">\n <ng-container *yuvRenderer=\"rendererInputs().meta\"></ng-container>\n </div>\n \n <div data-slot=\"badges\">{{ tile().badges }}</div>\n \n <div class=\"extension\">\n <ng-container *yuvTileExtension=\"{ typeId: tile().objectTypeId, data: tile().instanceData }\"></ng-container>\n </div>\n </div>\n</div>\n", styles: [":host{--tile-margin: var(--ymt-spacing-xs);--tile-padding-inline: var(--ymt-spacing-2xl);--tile-padding-block: var(--ymt-spacing-l)}:host.dense .tile{--tile-padding-inline: var(--ymt-spacing-m);--tile-padding-block: var(--ymt-spacing-s);--tile-margin: var(--ymt-spacing-xs);gap:var(--ymt-spacing-s)}:host.dense .tile [data-slot=aside],:host.dense .tile [data-slot=meta],:host.dense .tile [data-slot=actions]{display:none}:host.dense .tile [data-slot=icon]{--icon-renderer-icon-size: 18px}:host:hover:not([aria-selected=true]) .tile{--tile-background: var(--ymt-hover-background)}:host[aria-selected=true] .tile{--tile-background: var(--ymt-selection-background)}:host[aria-current=true] .tile{--tile-background: var(--ymt-focus-background)}:host .tile{display:flex;align-items:center;background-color:var(--tile-background, transparent);padding:calc(var(--tile-padding-block) - var(--tile-margin)) calc(var(--tile-padding-inline) - var(--tile-margin));transition:background-color var(--transition-duration, .1s);position:relative;color:var(--ymt-text-color);border-radius:var(--ymt-corner-s);margin:var(--tile-margin);gap:var(--ymt-spacing-m)}:host .tile .slots{display:grid;grid-template-rows:repeat(4,auto);grid-template-columns:auto;grid-template-areas:\"title-description title-description actions\" \"meta meta aside\" \"badges badges badges\" \"ext ext ext\";flex:1}:host .tile [data-slot]{-webkit-user-select:none;user-select:none;display:grid;align-self:baseline;word-break:break-word}:host .tile [data-slot=icon]{--icon-renderer-icon-size: var(--tile-icon-size);grid-area:icon;display:flex;align-self:flex-start}:host .tile [data-slot=title-description]{grid-area:title-description;display:grid;grid-template-areas:\"title\" \"description\";align-self:flex-start}:host .tile [data-slot=title]{font:var(--tile-font-title, var(--ymt-font-title-smallest));grid-area:title;align-self:flex-start;--tile-slot-padding: 0}:host .tile [data-slot=description]{grid-area:description;font:var(--tile-font-description, var(--ymt-font-body));color:var(--ymt-text-color-subtle);--tile-slot-padding: 0}:host .tile [data-slot=meta]{grid-area:meta;font:var(--tile-font-meta, var(--ymt-font-body-subtle));color:var(--ymt-text-color-subtle);--tile-slot-padding: var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) 0}:host .tile [data-slot=aside]{flex:0 0 auto;grid-area:aside;font:var(--tile-font-aside, var(--ymt-font-body-subtle));color:var(--ymt-text-color-subtle);justify-content:flex-end;text-align:right;--tile-slot-padding: var(--ymt-spacing-2xs)}:host .tile [data-slot=actions]{opacity:.2;transition:opacity var(--_transition-duration);pointer-events:none;display:flex;justify-content:flex-end;padding-block-end:var(--ymt-spacing-2xs);gap:var(--ymt-spacing-3xs)}:host .tile:hover [data-slot=actions]{opacity:1;pointer-events:all}:host .tile [data-slot=actions]{grid-area:actions;flex:0 0 auto;display:flex;align-items:start}:host .tile [data-slot=actions] button{gap:2px}:host .tile [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host .tile .extension{grid-area:ext}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "directive", type: TileExtensionDirective, selector: "[yuvTileExtension]", inputs: ["yuvTileExtension"] }] }); }
|
|
138
139
|
}
|
|
139
140
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TileComponent, decorators: [{
|
|
140
141
|
type: Component,
|
|
141
|
-
args: [{ selector: 'yuv-tile', standalone: true, imports: [MatIconModule, MatTooltipModule, MatButtonModule, RendererDirective, TileExtensionDirective],
|
|
142
|
+
args: [{ selector: 'yuv-tile', standalone: true, imports: [MatIconModule, MatTooltipModule, MatButtonModule, RendererDirective, TileExtensionDirective], host: {
|
|
143
|
+
'[class.dense]': 'dense()'
|
|
144
|
+
}, template: "<div class=\"tile\">\n <div data-slot=\"icon\">\n <ng-container *yuvRenderer=\"rendererInputs().icon\"></ng-container>\n </div>\n \n <div class=\"slots\">\n <div data-slot=\"title-description\">\n <div data-slot=\"title\">\n <ng-container *yuvRenderer=\"rendererInputs().title\"></ng-container>\n </div>\n <div data-slot=\"description\">\n <ng-container *yuvRenderer=\"rendererInputs().description\"></ng-container>\n </div>\n </div>\n \n <div data-slot=\"actions\">\n @for (a of actions(); track a.id) {\n <button mat-icon-button [matTooltip]=\"a.label\" (click)=\"executeAction(a, $event)\">\n <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n </button>\n }\n </div>\n \n <div data-slot=\"aside\">\n <ng-container *yuvRenderer=\"rendererInputs().aside\"></ng-container>\n </div>\n \n <div data-slot=\"meta\">\n <ng-container *yuvRenderer=\"rendererInputs().meta\"></ng-container>\n </div>\n \n <div data-slot=\"badges\">{{ tile().badges }}</div>\n \n <div class=\"extension\">\n <ng-container *yuvTileExtension=\"{ typeId: tile().objectTypeId, data: tile().instanceData }\"></ng-container>\n </div>\n </div>\n</div>\n", styles: [":host{--tile-margin: var(--ymt-spacing-xs);--tile-padding-inline: var(--ymt-spacing-2xl);--tile-padding-block: var(--ymt-spacing-l)}:host.dense .tile{--tile-padding-inline: var(--ymt-spacing-m);--tile-padding-block: var(--ymt-spacing-s);--tile-margin: var(--ymt-spacing-xs);gap:var(--ymt-spacing-s)}:host.dense .tile [data-slot=aside],:host.dense .tile [data-slot=meta],:host.dense .tile [data-slot=actions]{display:none}:host.dense .tile [data-slot=icon]{--icon-renderer-icon-size: 18px}:host:hover:not([aria-selected=true]) .tile{--tile-background: var(--ymt-hover-background)}:host[aria-selected=true] .tile{--tile-background: var(--ymt-selection-background)}:host[aria-current=true] .tile{--tile-background: var(--ymt-focus-background)}:host .tile{display:flex;align-items:center;background-color:var(--tile-background, transparent);padding:calc(var(--tile-padding-block) - var(--tile-margin)) calc(var(--tile-padding-inline) - var(--tile-margin));transition:background-color var(--transition-duration, .1s);position:relative;color:var(--ymt-text-color);border-radius:var(--ymt-corner-s);margin:var(--tile-margin);gap:var(--ymt-spacing-m)}:host .tile .slots{display:grid;grid-template-rows:repeat(4,auto);grid-template-columns:auto;grid-template-areas:\"title-description title-description actions\" \"meta meta aside\" \"badges badges badges\" \"ext ext ext\";flex:1}:host .tile [data-slot]{-webkit-user-select:none;user-select:none;display:grid;align-self:baseline;word-break:break-word}:host .tile [data-slot=icon]{--icon-renderer-icon-size: var(--tile-icon-size);grid-area:icon;display:flex;align-self:flex-start}:host .tile [data-slot=title-description]{grid-area:title-description;display:grid;grid-template-areas:\"title\" \"description\";align-self:flex-start}:host .tile [data-slot=title]{font:var(--tile-font-title, var(--ymt-font-title-smallest));grid-area:title;align-self:flex-start;--tile-slot-padding: 0}:host .tile [data-slot=description]{grid-area:description;font:var(--tile-font-description, var(--ymt-font-body));color:var(--ymt-text-color-subtle);--tile-slot-padding: 0}:host .tile [data-slot=meta]{grid-area:meta;font:var(--tile-font-meta, var(--ymt-font-body-subtle));color:var(--ymt-text-color-subtle);--tile-slot-padding: var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) 0}:host .tile [data-slot=aside]{flex:0 0 auto;grid-area:aside;font:var(--tile-font-aside, var(--ymt-font-body-subtle));color:var(--ymt-text-color-subtle);justify-content:flex-end;text-align:right;--tile-slot-padding: var(--ymt-spacing-2xs)}:host .tile [data-slot=actions]{opacity:.2;transition:opacity var(--_transition-duration);pointer-events:none;display:flex;justify-content:flex-end;padding-block-end:var(--ymt-spacing-2xs);gap:var(--ymt-spacing-3xs)}:host .tile:hover [data-slot=actions]{opacity:1;pointer-events:all}:host .tile [data-slot=actions]{grid-area:actions;flex:0 0 auto;display:flex;align-items:start}:host .tile [data-slot=actions] button{gap:2px}:host .tile [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host .tile .extension{grid-area:ext}\n"] }]
|
|
142
145
|
}] });
|
|
143
146
|
|
|
144
147
|
/**
|
|
@@ -278,6 +281,7 @@ class TileListComponent {
|
|
|
278
281
|
* Sets up the ability to select multile tiles
|
|
279
282
|
*/
|
|
280
283
|
this.multiselect = input(false);
|
|
284
|
+
this.dense = input(false);
|
|
281
285
|
this.options = input(undefined);
|
|
282
286
|
this.flavor = input();
|
|
283
287
|
this.flavorEffect = effect(() => {
|
|
@@ -635,7 +639,7 @@ class TileListComponent {
|
|
|
635
639
|
this._keyManager?.destroy();
|
|
636
640
|
}
|
|
637
641
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
638
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, flavor: { classPropertyName: "flavor", publicName: "flavor", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, preselect: { classPropertyName: "preselect", publicName: "preselect", isSignal: true, isRequired: false, transformFunction: null }, highlights: { classPropertyName: "highlights", publicName: "highlights", isSignal: true, isRequired: false, transformFunction: null }, preventChangeUntil: { classPropertyName: "preventChangeUntil", publicName: "preventChangeUntil", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", tileCopy: "tileCopy", tileCut: "tileCut", busy: "busy", queryResult: "queryResult", selectionChange: "selectionChange", itemDblClick: "itemDblClick", ctxMenu: "ctxMenu" }, host: { attributes: { "tabindex": "0", "role": "listbox" }, listeners: { "contextmenu": "onContextMenu($event)", "mousedown": "onMouseDown($event)", "keydown.control.c": "onCopy($event)", "keydown.control.x": "onCut($event)", "keydown": "onKeydown($event)" }, properties: { "class.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]=\"getPageSize()\"\n (page)=\"changePage($event)\"\n hidePageSize\n >\n </mat-paginator>\n}\n", styles: [":host{--tile-current-background: var(--ymt-focus-background);--tile-on-current: var(--ymt-on-focus-background);--tile-selected-background: var(--ymt-selection-background);--tile-on-selected: var(--ymt-on-selection-background);--tile-selected-icon-fill: var(--ymt-primary);--tile-gap: 0px;--tile-border: var(--tile-border-width, 1px) solid var(--ymt-outline-variant);--tile-border-width: 1px;--tile-icon-size: initial;--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host .tiles{overflow-y:auto;display:flex;flex-flow:column;height:100%}:host .tiles yuv-tile{flex:0 0 auto}:host .tiles .offset{flex:1 1 auto}:host .paginator{border-block-start:1px solid var(--ymt-outline-variant);font:inherit;background-color:var(--paging-background)}:host yuv-tile{cursor:pointer}:host yuv-tile:not(.last){border:var(--tile-border);border-width:var(--tile-border-width);margin-block-end:var(--tile-gap)}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TileComponent, selector: "yuv-tile", inputs: ["tile", "actionContext"] }, { 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"] }] }); }
|
|
642
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TileListComponent, isStandalone: true, selector: "yuv-tile-list", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, flavor: { classPropertyName: "flavor", publicName: "flavor", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, preselect: { classPropertyName: "preselect", publicName: "preselect", isSignal: true, isRequired: false, transformFunction: null }, highlights: { classPropertyName: "highlights", publicName: "highlights", isSignal: true, isRequired: false, transformFunction: null }, preventChangeUntil: { classPropertyName: "preventChangeUntil", publicName: "preventChangeUntil", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", tileCopy: "tileCopy", tileCut: "tileCut", busy: "busy", queryResult: "queryResult", selectionChange: "selectionChange", itemDblClick: "itemDblClick", ctxMenu: "ctxMenu" }, host: { attributes: { "tabindex": "0", "role": "listbox" }, listeners: { "contextmenu": "onContextMenu($event)", "mousedown": "onMouseDown($event)", "keydown.control.c": "onCopy($event)", "keydown.control.x": "onCut($event)", "keydown": "onKeydown($event)" }, properties: { "class.dense": "dense()", "class.pagination": "this.pagination" } }, providers: [], queries: [{ propertyName: "emptyContent", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tiles", predicate: TileComponent, descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ListItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"tiles\"\n [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n (dragSelectChange)=\"onDragSelectChange($event)\"\n (dragSelect)=\"onDragSelect($event)\"\n>\n @for (i of items; track i.id) {\n <yuv-tile\n [dense]=\"dense()\"\n yuvDragSelectItem\n yuvListItem\n [attr.aria-selected]=\"selection().includes(i.id)\"\n (click.single)=\"select(i, $event)\"\n (click.double)=\"itemDblClick.emit(i)\"\n [ngClass]=\"{ selected: selection().includes(i.id), last: $last }\"\n [actionContext]=\"options()?.actionContext\"\n [tile]=\"i\"\n [ngStyle]=\"highlightStyles()[i.id]\"\n (contextmenu)=\"contextMenuHandler($event, $index)\"\n ></yuv-tile>\n } @empty {\n <div class=\"empyt-list\">\n @if (searchExecuted && emptyContent()) {\n <ng-content></ng-content>\n }\n </div>\n }\n <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</div>\n@if (pagination) {\n <mat-paginator\n class=\"paginator\"\n [length]=\"pagination?.total\"\n [pageSize]=\"getPageSize()\"\n (page)=\"changePage($event)\"\n hidePageSize\n >\n </mat-paginator>\n}\n", styles: [":host{--tile-current-background: var(--ymt-focus-background);--tile-on-current: var(--ymt-on-focus-background);--tile-selected-background: var(--ymt-selection-background);--tile-on-selected: var(--ymt-on-selection-background);--tile-selected-icon-fill: var(--ymt-primary);--tile-gap: 0px;--tile-border: var(--tile-border-width, 1px) solid var(--ymt-outline-variant);--tile-border-width: 1px;--tile-icon-size: initial;--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host .tiles{overflow-y:auto;display:flex;flex-flow:column;height:100%}:host .tiles yuv-tile{flex:0 0 auto}:host .tiles .offset{flex:1 1 auto}:host .paginator{border-block-start:1px solid var(--ymt-outline-variant);font:inherit;background-color:var(--paging-background)}:host yuv-tile{cursor:pointer}:host yuv-tile:not(.last){border:var(--tile-border);border-width:var(--tile-border-width);margin-block-end:var(--tile-gap)}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TileComponent, selector: "yuv-tile", inputs: ["tile", "actionContext", "dense"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: YuvListModule }, { kind: "directive", type: 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"] }] }); }
|
|
639
643
|
}
|
|
640
644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TileListComponent, decorators: [{
|
|
641
645
|
type: Component,
|
|
@@ -652,8 +656,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
652
656
|
MatPaginatorModule
|
|
653
657
|
], host: {
|
|
654
658
|
tabindex: '0',
|
|
655
|
-
role: 'listbox'
|
|
656
|
-
|
|
659
|
+
role: 'listbox',
|
|
660
|
+
'[class.dense]': 'dense()'
|
|
661
|
+
}, template: "<div\n class=\"tiles\"\n [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n (dragSelectChange)=\"onDragSelectChange($event)\"\n (dragSelect)=\"onDragSelect($event)\"\n>\n @for (i of items; track i.id) {\n <yuv-tile\n [dense]=\"dense()\"\n yuvDragSelectItem\n yuvListItem\n [attr.aria-selected]=\"selection().includes(i.id)\"\n (click.single)=\"select(i, $event)\"\n (click.double)=\"itemDblClick.emit(i)\"\n [ngClass]=\"{ selected: selection().includes(i.id), last: $last }\"\n [actionContext]=\"options()?.actionContext\"\n [tile]=\"i\"\n [ngStyle]=\"highlightStyles()[i.id]\"\n (contextmenu)=\"contextMenuHandler($event, $index)\"\n ></yuv-tile>\n } @empty {\n <div class=\"empyt-list\">\n @if (searchExecuted && emptyContent()) {\n <ng-content></ng-content>\n }\n </div>\n }\n <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</div>\n@if (pagination) {\n <mat-paginator\n class=\"paginator\"\n [length]=\"pagination?.total\"\n [pageSize]=\"getPageSize()\"\n (page)=\"changePage($event)\"\n hidePageSize\n >\n </mat-paginator>\n}\n", styles: [":host{--tile-current-background: var(--ymt-focus-background);--tile-on-current: var(--ymt-on-focus-background);--tile-selected-background: var(--ymt-selection-background);--tile-on-selected: var(--ymt-on-selection-background);--tile-selected-icon-fill: var(--ymt-primary);--tile-gap: 0px;--tile-border: var(--tile-border-width, 1px) solid var(--ymt-outline-variant);--tile-border-width: 1px;--tile-icon-size: initial;--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host .tiles{overflow-y:auto;display:flex;flex-flow:column;height:100%}:host .tiles yuv-tile{flex:0 0 auto}:host .tiles .offset{flex:1 1 auto}:host .paginator{border-block-start:1px solid var(--ymt-outline-variant);font:inherit;background-color:var(--paging-background)}:host yuv-tile{cursor:pointer}:host yuv-tile:not(.last){border:var(--tile-border);border-width:var(--tile-border-width);margin-block-end:var(--tile-gap)}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"] }]
|
|
657
662
|
}], ctorParameters: () => [], propDecorators: { onContextMenu: [{
|
|
658
663
|
type: HostListener,
|
|
659
664
|
args: ['contextmenu', ['$event']]
|