@yuuvis/client-framework 2.4.3 → 2.4.4
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 +5 -10
- package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-tile-list.mjs +45 -45
- package/fesm2022/yuuvis-client-framework-tile-list.mjs.map +1 -1
- package/forms/lib/elements/data-grid/data-grid/data-grid.component.d.ts +0 -1
- package/package.json +16 -16
- package/tile-list/lib/tile-list/tile-list.component.d.ts +2 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { input, output, viewChild, ChangeDetectionStrategy, Component, Injectable, inject, ViewContainerRef, effect, Directive, DestroyRef, ElementRef, contentChild, computed, viewChildren, signal, untracked, HostBinding, HostListener } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@yuuvis/client-core';
|
|
4
4
|
import { ObjectConfigService, SystemService, SearchService, EventService, DmsService, YuvEventType, BaseObjectTypeField, DmsObject, TranslateModule, ContentStreamField, Utils, Sort } from '@yuuvis/client-core';
|
|
5
5
|
import { ClickDoubleDirective, DragSelectDirective, DragSelectItemDirective, DialogComponent } from '@yuuvis/client-framework/common';
|
|
@@ -8,6 +8,7 @@ import * as i1$3 from '@angular/forms';
|
|
|
8
8
|
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
9
9
|
import * as i2 from '@angular/material/icon';
|
|
10
10
|
import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
11
|
+
import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
|
|
11
12
|
import * as i3 from '@angular/material/paginator';
|
|
12
13
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
13
14
|
import * as i2$1 from '@angular/material/tooltip';
|
|
@@ -19,7 +20,6 @@ import { ListTileComponent, YuvListModule } from '@yuuvis/client-framework/list'
|
|
|
19
20
|
import { RendererDirective } from '@yuuvis/client-framework/renderer';
|
|
20
21
|
import { DeviceService, YmtMatIconRegistryService, YmtIconButtonDirective, YmtButtonDirective } from '@yuuvis/material';
|
|
21
22
|
import { switchMap, finalize } from 'rxjs';
|
|
22
|
-
import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
|
|
23
23
|
import * as i1$2 from '@angular/material/button';
|
|
24
24
|
import { MatButtonModule } from '@angular/material/button';
|
|
25
25
|
import { MatDialogModule, MatDialog } from '@angular/material/dialog';
|
|
@@ -29,6 +29,47 @@ import { MatSelectModule } from '@angular/material/select';
|
|
|
29
29
|
import { NgClass, CommonModule } from '@angular/common';
|
|
30
30
|
import { TranslateModule as TranslateModule$1 } from '@ngx-translate/core';
|
|
31
31
|
|
|
32
|
+
class TileActionsMenuComponent {
|
|
33
|
+
constructor() {
|
|
34
|
+
this.actions = input.required();
|
|
35
|
+
this.itemSelect = output();
|
|
36
|
+
this.matMenu = viewChild.required('menuRef');
|
|
37
|
+
}
|
|
38
|
+
itemClicked(event, action) {
|
|
39
|
+
event.stopPropagation();
|
|
40
|
+
event.preventDefault();
|
|
41
|
+
this.itemSelect.emit(action);
|
|
42
|
+
}
|
|
43
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileActionsMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
44
|
+
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: `
|
|
45
|
+
<mat-menu #menuRef>
|
|
46
|
+
@for (action of actions(); track action.id) {
|
|
47
|
+
<button mat-menu-item (click)="itemClicked($event, action)">
|
|
48
|
+
@if (action.icon) {
|
|
49
|
+
<mat-icon>{{ action.icon }}</mat-icon>
|
|
50
|
+
}
|
|
51
|
+
<span>{{ action.label }}</span>
|
|
52
|
+
</button>
|
|
53
|
+
}
|
|
54
|
+
</mat-menu>
|
|
55
|
+
`, 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 }); }
|
|
56
|
+
}
|
|
57
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileActionsMenuComponent, decorators: [{
|
|
58
|
+
type: Component,
|
|
59
|
+
args: [{ selector: 'yuv-tile-actions-menu', imports: [MatMenu, MatIcon, MatMenuItem], template: `
|
|
60
|
+
<mat-menu #menuRef>
|
|
61
|
+
@for (action of actions(); track action.id) {
|
|
62
|
+
<button mat-menu-item (click)="itemClicked($event, action)">
|
|
63
|
+
@if (action.icon) {
|
|
64
|
+
<mat-icon>{{ action.icon }}</mat-icon>
|
|
65
|
+
}
|
|
66
|
+
<span>{{ action.label }}</span>
|
|
67
|
+
</button>
|
|
68
|
+
}
|
|
69
|
+
</mat-menu>
|
|
70
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
|
|
71
|
+
}] });
|
|
72
|
+
|
|
32
73
|
class TileExtensionService {
|
|
33
74
|
constructor() {
|
|
34
75
|
this._extensions = {};
|
|
@@ -96,47 +137,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
96
137
|
}]
|
|
97
138
|
}] });
|
|
98
139
|
|
|
99
|
-
class TileActionsMenuComponent {
|
|
100
|
-
constructor() {
|
|
101
|
-
this.actions = input.required();
|
|
102
|
-
this.itemSelect = output();
|
|
103
|
-
this.matMenu = viewChild.required('menuRef');
|
|
104
|
-
}
|
|
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 }); }
|
|
123
|
-
}
|
|
124
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileActionsMenuComponent, decorators: [{
|
|
125
|
-
type: Component,
|
|
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"] }]
|
|
138
|
-
}] });
|
|
139
|
-
|
|
140
140
|
/**
|
|
141
141
|
* List that renders the result of a search query as object config based tiles. It also contains a component to
|
|
142
142
|
* set up that configuration.
|
|
@@ -609,7 +609,7 @@ class TileListComponent {
|
|
|
609
609
|
// this._keyManager?.destroy();
|
|
610
610
|
}
|
|
611
611
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
612
|
-
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: "<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"] }] }); }
|
|
612
|
+
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: "<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 [class.dense]=\"dense()\"\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"] }] }); }
|
|
613
613
|
}
|
|
614
614
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileListComponent, decorators: [{
|
|
615
615
|
type: Component,
|
|
@@ -627,7 +627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
627
627
|
...MATERIAL_IMPORTS
|
|
628
628
|
], host: {
|
|
629
629
|
'[class.dense]': 'dense()'
|
|
630
|
-
}, template: "<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"] }]
|
|
630
|
+
}, template: "<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 [class.dense]=\"dense()\"\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"] }]
|
|
631
631
|
}], ctorParameters: () => [], propDecorators: { onCopy: [{
|
|
632
632
|
type: HostListener,
|
|
633
633
|
args: ['keydown.control.c', ['$event']]
|