@yuuvis/client-framework 2.3.8 → 2.3.10
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 +35 -13
- package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-metadata-form.mjs +17 -18
- package/fesm2022/yuuvis-client-framework-metadata-form.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 +39 -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 +28 -15
- 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 +3 -4
- package/lib/assets/i18n/de.json +8 -6
- package/lib/assets/i18n/en.json +2 -0
- package/metadata-form/lib/metadata-form-field/metadata-form-field.component.d.ts +1 -1
- package/object-details/lib/object-audit/object-audit.component.d.ts +3 -8
- package/package.json +8 -8
- 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
|
@@ -14,13 +14,15 @@ import { DynamicIoModule } from 'ng-dynamic-component';
|
|
|
14
14
|
import { ReplaySubject, Subject } from 'rxjs';
|
|
15
15
|
import * as i4$1 from '@angular/forms';
|
|
16
16
|
import { FormControl, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
|
|
17
|
-
import * as
|
|
17
|
+
import * as i6 from '@angular/material/button';
|
|
18
18
|
import { MatButtonModule } from '@angular/material/button';
|
|
19
19
|
import { DialogComponent, ConfirmService } from '@yuuvis/client-framework/common';
|
|
20
20
|
import { SignalComponentIoModule } from 'ng-dynamic-component/signal-component-io';
|
|
21
|
-
import { YmtButtonDirective } from '@yuuvis/material';
|
|
21
|
+
import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
|
|
22
22
|
import * as i3$1 from '@angular/material/list';
|
|
23
23
|
import { MatListModule } from '@angular/material/list';
|
|
24
|
+
import * as i5 from '@angular/material/tooltip';
|
|
25
|
+
import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
|
|
24
26
|
import * as i1$1 from '@angular/material/form-field';
|
|
25
27
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
26
28
|
import * as i2 from '@angular/material/input';
|
|
@@ -133,7 +135,7 @@ class WidgetGridRegistry {
|
|
|
133
135
|
registerGridWidget(widget, buckets) {
|
|
134
136
|
const existingWidget = this.registeredWidgets.find((w) => w.id === widget.id);
|
|
135
137
|
if (!existingWidget)
|
|
136
|
-
this.registeredWidgets.push(widget);
|
|
138
|
+
this.registeredWidgets.push(this.#translateLabel(widget));
|
|
137
139
|
if (buckets?.length) {
|
|
138
140
|
buckets.forEach((b) => {
|
|
139
141
|
this._addToBucket(b, widget.id);
|
|
@@ -149,11 +151,16 @@ class WidgetGridRegistry {
|
|
|
149
151
|
registerGridWidgets(widgets, buckets) {
|
|
150
152
|
const alreadyRegisteredWidgetNames = this.registeredWidgets.map((w) => w.id);
|
|
151
153
|
const widgetsToRegister = widgets.filter((w) => !alreadyRegisteredWidgetNames.includes(w.id));
|
|
152
|
-
this.registeredWidgets = [...this.registeredWidgets, ...widgetsToRegister];
|
|
154
|
+
this.registeredWidgets = [...this.registeredWidgets, ...widgetsToRegister.map(w => this.#translateLabel(w))];
|
|
153
155
|
if (buckets?.length) {
|
|
154
156
|
buckets.forEach((b) => widgets.forEach((w) => this._addToBucket(b, w.id)));
|
|
155
157
|
}
|
|
156
158
|
}
|
|
159
|
+
#translateLabel(widget) {
|
|
160
|
+
const translatedLabel = this.translate.instant(widget.label);
|
|
161
|
+
return { ...widget, label: (translatedLabel && !translatedLabel.startsWith('!missing')) ? translatedLabel : widget.label
|
|
162
|
+
};
|
|
163
|
+
}
|
|
157
164
|
_addToBucket(bucket, widgetName) {
|
|
158
165
|
if (!this.widgetBuckets[bucket])
|
|
159
166
|
this.widgetBuckets[bucket] = [];
|
|
@@ -470,7 +477,7 @@ class WidgetPickerComponent {
|
|
|
470
477
|
this.registeredWidgets = this.#widgetGridRegistry.getRegisteredWidgets(this.buckets());
|
|
471
478
|
}
|
|
472
479
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
473
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: WidgetPickerComponent, isStandalone: true, selector: "yuv-widget-picker", inputs: { pickerData: { classPropertyName: "pickerData", publicName: "pickerData", isSignal: true, isRequired: false, transformFunction: null }, buckets: { classPropertyName: "buckets", publicName: "buckets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { picked: "picked", canceled: "canceled" }, ngImport: i0, template: "<yuv-dialog [headertitel]=\"selectedWidget ? selectedWidget.label : ('yuv.widget-grid.widget-picker.title' | translate)\">\n <!-- <header class=\"dark\" [ngClass]=\"{ listing: !selectedWidget }\">\n @if (selectedWidget) {\n <button mat-icon-button (click)=\"reset()\"><mat-icon>back</mat-icon></button>\n }\n <div class=\"title\">{{ selectedWidget ? selectedWidget.label : ('yuv.widget-grid.widget-picker.title' | translate) }}</div>\n <button mat-icon-button (click)=\"cancel()\"><mat-icon>clear</mat-icon></button>\n </header> -->\n\n <main class=\"{{ !selectedWidget ? 'widget-listing' : 'widget-setup' }}\">\n @if (!selectedWidget) {\n <mat-selection-list role=\"list\" [formControl]=\"pickerFormControl\" [multiple]=\"false\" [hideSingleSelectionIndicator]=\"true\">\n <!-- list of avalable widgets -->\n @for (w of registeredWidgets; track $index) {\n <mat-list-option [value]=\"w\">\n {{
|
|
480
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: WidgetPickerComponent, isStandalone: true, selector: "yuv-widget-picker", inputs: { pickerData: { classPropertyName: "pickerData", publicName: "pickerData", isSignal: true, isRequired: false, transformFunction: null }, buckets: { classPropertyName: "buckets", publicName: "buckets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { picked: "picked", canceled: "canceled" }, ngImport: i0, template: "<yuv-dialog [headertitel]=\"selectedWidget ? selectedWidget.label : ('yuv.widget-grid.widget-picker.title' | translate)\">\n <!-- <header class=\"dark\" [ngClass]=\"{ listing: !selectedWidget }\">\n @if (selectedWidget) {\n <button mat-icon-button (click)=\"reset()\"><mat-icon>back</mat-icon></button>\n }\n <div class=\"title\">{{ selectedWidget ? selectedWidget.label : ('yuv.widget-grid.widget-picker.title' | translate) }}</div>\n <button mat-icon-button (click)=\"cancel()\"><mat-icon>clear</mat-icon></button>\n </header> -->\n\n <main class=\"{{ !selectedWidget ? 'widget-listing' : 'widget-setup' }}\">\n @if (!selectedWidget) {\n <mat-selection-list role=\"list\" [formControl]=\"pickerFormControl\" [multiple]=\"false\" [hideSingleSelectionIndicator]=\"true\">\n <!-- list of avalable widgets -->\n @for (w of registeredWidgets; track $index) {\n <mat-list-option [value]=\"w\">\n {{ w.label }}\n </mat-list-option>\n } @empty {\n <div class=\"empty\">\n {{ 'yuv.widget-grid.widget-picker.empty' | translate }}\n </div>\n }\n </mat-selection-list>\n } @else {\n <div class=\"component\">\n <ng-container\n *ngComponentOutlet=\"selectedWidget!.setupComponent!; ndcDynamicInputs: widgetConfigMap; ndcDynamicOutputs: setupWidgetDynamicOutputs\"\n ></ng-container>\n </div>\n }\n </main>\n <footer>\n @if (selectedWidget) {\n <button ymtButton=\"secondary\" (click)=\"setupComponentCancel()\">{{ 'yuv.widget-grid.button.cancel' | translate }}</button>\n <button ymtButton=\"primary\" [disabled]=\"!widgetConfigDirty || widgetConfigState === 'INVALID'\" (click)=\"setupComponentSave()\">\n {{ 'yuv.widget-grid.button.save' | translate }}\n </button>\n } @else {\n <button ymtButton=\"secondary\" (click)=\"cancel()\">{{ 'yuv.widget-grid.button.cancel' | translate }}</button>\n }\n </footer>\n</yuv-dialog>\n", styles: [":host .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}:host main.widget-setup{height:100%;display:grid;grid-template-rows:1fr auto;grid-template-columns:1fr;grid-template-areas:\"component\" \"buttons\"}:host main.widget-listing .widget{padding:var(--app-pane-padding);border-bottom:1px solid var(--panel-divider-color);cursor:pointer}:host main.widget-listing .widget:hover{background-color:var(--item-focus-background-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitel"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: DynamicIoModule }, { kind: "directive", type: i4.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }, { kind: "directive", type: i4.ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SignalComponentIoModule }] }); }
|
|
474
481
|
}
|
|
475
482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetPickerComponent, decorators: [{
|
|
476
483
|
type: Component,
|
|
@@ -485,7 +492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
485
492
|
DynamicIoModule,
|
|
486
493
|
ReactiveFormsModule,
|
|
487
494
|
SignalComponentIoModule
|
|
488
|
-
], template: "<yuv-dialog [headertitel]=\"selectedWidget ? selectedWidget.label : ('yuv.widget-grid.widget-picker.title' | translate)\">\n <!-- <header class=\"dark\" [ngClass]=\"{ listing: !selectedWidget }\">\n @if (selectedWidget) {\n <button mat-icon-button (click)=\"reset()\"><mat-icon>back</mat-icon></button>\n }\n <div class=\"title\">{{ selectedWidget ? selectedWidget.label : ('yuv.widget-grid.widget-picker.title' | translate) }}</div>\n <button mat-icon-button (click)=\"cancel()\"><mat-icon>clear</mat-icon></button>\n </header> -->\n\n <main class=\"{{ !selectedWidget ? 'widget-listing' : 'widget-setup' }}\">\n @if (!selectedWidget) {\n <mat-selection-list role=\"list\" [formControl]=\"pickerFormControl\" [multiple]=\"false\" [hideSingleSelectionIndicator]=\"true\">\n <!-- list of avalable widgets -->\n @for (w of registeredWidgets; track $index) {\n <mat-list-option [value]=\"w\">\n {{
|
|
495
|
+
], template: "<yuv-dialog [headertitel]=\"selectedWidget ? selectedWidget.label : ('yuv.widget-grid.widget-picker.title' | translate)\">\n <!-- <header class=\"dark\" [ngClass]=\"{ listing: !selectedWidget }\">\n @if (selectedWidget) {\n <button mat-icon-button (click)=\"reset()\"><mat-icon>back</mat-icon></button>\n }\n <div class=\"title\">{{ selectedWidget ? selectedWidget.label : ('yuv.widget-grid.widget-picker.title' | translate) }}</div>\n <button mat-icon-button (click)=\"cancel()\"><mat-icon>clear</mat-icon></button>\n </header> -->\n\n <main class=\"{{ !selectedWidget ? 'widget-listing' : 'widget-setup' }}\">\n @if (!selectedWidget) {\n <mat-selection-list role=\"list\" [formControl]=\"pickerFormControl\" [multiple]=\"false\" [hideSingleSelectionIndicator]=\"true\">\n <!-- list of avalable widgets -->\n @for (w of registeredWidgets; track $index) {\n <mat-list-option [value]=\"w\">\n {{ w.label }}\n </mat-list-option>\n } @empty {\n <div class=\"empty\">\n {{ 'yuv.widget-grid.widget-picker.empty' | translate }}\n </div>\n }\n </mat-selection-list>\n } @else {\n <div class=\"component\">\n <ng-container\n *ngComponentOutlet=\"selectedWidget!.setupComponent!; ndcDynamicInputs: widgetConfigMap; ndcDynamicOutputs: setupWidgetDynamicOutputs\"\n ></ng-container>\n </div>\n }\n </main>\n <footer>\n @if (selectedWidget) {\n <button ymtButton=\"secondary\" (click)=\"setupComponentCancel()\">{{ 'yuv.widget-grid.button.cancel' | translate }}</button>\n <button ymtButton=\"primary\" [disabled]=\"!widgetConfigDirty || widgetConfigState === 'INVALID'\" (click)=\"setupComponentSave()\">\n {{ 'yuv.widget-grid.button.save' | translate }}\n </button>\n } @else {\n <button ymtButton=\"secondary\" (click)=\"cancel()\">{{ 'yuv.widget-grid.button.cancel' | translate }}</button>\n }\n </footer>\n</yuv-dialog>\n", styles: [":host .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}:host main.widget-setup{height:100%;display:grid;grid-template-rows:1fr auto;grid-template-columns:1fr;grid-template-areas:\"component\" \"buttons\"}:host main.widget-listing .widget{padding:var(--app-pane-padding);border-bottom:1px solid var(--panel-divider-color);cursor:pointer}:host main.widget-listing .widget:hover{background-color:var(--item-focus-background-color)}\n"] }]
|
|
489
496
|
}], ctorParameters: () => [] });
|
|
490
497
|
|
|
491
498
|
class YuvWidgetGridComponent {
|
|
@@ -535,8 +542,8 @@ class YuvWidgetGridComponent {
|
|
|
535
542
|
}
|
|
536
543
|
if (cfg?.newItemWidth || cfg?.newItemHeight) {
|
|
537
544
|
this.#widgetGridService.addItemSize = {
|
|
538
|
-
cols: cfg?.newItemWidth ||
|
|
539
|
-
rows: cfg?.newItemHeight ||
|
|
545
|
+
cols: cfg?.newItemWidth || -1, // default value -1 means the grid will autoposition the new item
|
|
546
|
+
rows: cfg?.newItemHeight || -1 // default value -1 means the grid will autoposition the new item
|
|
540
547
|
};
|
|
541
548
|
}
|
|
542
549
|
});
|
|
@@ -553,9 +560,12 @@ class YuvWidgetGridComponent {
|
|
|
553
560
|
this.options.draggable.enabled = !!e;
|
|
554
561
|
this.options.resizable.enabled = !!e;
|
|
555
562
|
this.options.displayGrid = e ? DisplayGrid.Always : DisplayGrid.None;
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
563
|
+
// set timeout to ensure that the grid has been redrawn before notifying the widgets about the change
|
|
564
|
+
setTimeout(() => {
|
|
565
|
+
if (this.options.api && this.options.api.optionsChanged) {
|
|
566
|
+
this.options.api.optionsChanged();
|
|
567
|
+
}
|
|
568
|
+
}, 0);
|
|
559
569
|
});
|
|
560
570
|
this.gridItemConfig = input(undefined);
|
|
561
571
|
this.#gridItemConfigEffect = effect(() => {
|
|
@@ -637,7 +647,7 @@ class YuvWidgetGridComponent {
|
|
|
637
647
|
this.gridChange.emit(mapped);
|
|
638
648
|
}
|
|
639
649
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YuvWidgetGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
640
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: YuvWidgetGridComponent, isStandalone: true, selector: "yuv-widget-grid", inputs: { gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, gridItemConfig: { classPropertyName: "gridItemConfig", publicName: "gridItemConfig", isSignal: true, isRequired: false, transformFunction: null }, buckets: { classPropertyName: "buckets", publicName: "buckets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gridChange: "gridChange", gridItemEvent: "gridItemEvent", widgetPickerOpen: "widgetPickerOpen" }, host: { properties: { "class.widget-grid-edit": "editMode()" } }, providers: [WidgetGridService], viewQueries: [{ propertyName: "gridsterItems", first: true, predicate: GridsterItemComponent, descendants: true, isSignal: true }, { propertyName: "widgetPicker", first: true, predicate: ["widgetPicker"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (_editMode()) {\n <button class=\"fab\" mat-fab [attr.aria-label]=\"'yuv.widget-grid.widget.add.label' | translate\" (click)=\"addItem()\">\n <mat-icon>add</mat-icon>\n </button>\n}\n\n@if (widgetGrid.length === 0 && !_editMode()) {\n <div class=\"empty\"> \n <!-- <p>{{ 'yuv.widget-grid.empty' | translate }}</p>\n <button ymtButton=\"primary\" (click)=\"_editMode.set(true)\"> \n {{'yuv.widget-grid.empty.create' | translate}}</button> -->\n <ng-content select=\".empty\"><p>{{ 'yuv.widget-grid.empty' | translate }}</p></ng-content>\n </div>\n} @else {\n <gridster [options]=\"options\">\n @for (item of widgetGrid; track item.id) {\n <gridster-item [item]=\"item\">\n @if (_editMode()) {\n <div class=\"toolbar\">\n <!-- drag handle -->\n <mat-icon class=\"dragHandle ymt-icon--size-s\">drag_indicator</mat-icon>\n <!-- edit -->\n <button
|
|
650
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: YuvWidgetGridComponent, isStandalone: true, selector: "yuv-widget-grid", inputs: { gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, gridItemConfig: { classPropertyName: "gridItemConfig", publicName: "gridItemConfig", isSignal: true, isRequired: false, transformFunction: null }, buckets: { classPropertyName: "buckets", publicName: "buckets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gridChange: "gridChange", gridItemEvent: "gridItemEvent", widgetPickerOpen: "widgetPickerOpen" }, host: { properties: { "class.widget-grid-edit": "editMode()" } }, providers: [WidgetGridService], viewQueries: [{ propertyName: "gridsterItems", first: true, predicate: GridsterItemComponent, descendants: true, isSignal: true }, { propertyName: "widgetPicker", first: true, predicate: ["widgetPicker"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (_editMode()) {\n <button class=\"fab\" mat-fab [attr.aria-label]=\"'yuv.widget-grid.widget.add.label' | translate\" (click)=\"addItem()\">\n <mat-icon>add</mat-icon>\n </button>\n}\n\n@if (widgetGrid.length === 0 && !_editMode()) {\n <div class=\"empty\"> \n <!-- <p>{{ 'yuv.widget-grid.empty' | translate }}</p>\n <button ymtButton=\"primary\" (click)=\"_editMode.set(true)\"> \n {{'yuv.widget-grid.empty.create' | translate}}</button> -->\n <ng-content select=\".empty\"><p>{{ 'yuv.widget-grid.empty' | translate }}</p></ng-content>\n </div>\n} @else {\n <gridster [options]=\"options\">\n @for (item of widgetGrid; track item.id) {\n <gridster-item [item]=\"item\">\n @if (_editMode()) {\n <div class=\"toolbar\">\n <!-- drag handle -->\n <mat-icon class=\"dragHandle ymt-icon--size-s\">drag_indicator</mat-icon>\n <!-- edit -->\n <button ymt-icon-button icon-button-size=\"small\" \n [matTooltip]=\"'yuv.widget-grid.widget.edit.tooltip' | translate\"\n (click)=\"openWidgetPicker(item)\"><mat-icon class=\"ymt-icon--size-s\">edit</mat-icon></button>\n <!-- remove -->\n <button ymt-icon-button icon-button-size=\"small\" \n [matTooltip]=\"'yuv.widget-grid.widget.remove.tooltip' | translate\"\n (click)=\"removeItem(item)\"><mat-icon class=\"ymt-icon--size-s\">clear</mat-icon></button>\n </div>\n }\n <div class=\"cmp\">\n <ng-container *ngComponentOutlet=\"item.widget; ndcDynamicInputs: item.widgetConfigMap\"></ng-container>\n </div>\n </gridster-item>\n }\n </gridster>\n}\n<ng-template #widgetPicker>\n <yuv-widget-picker [pickerData]=\"widgetPickerData\" [buckets]=\"buckets()\"></yuv-widget-picker>\n</ng-template>\n", styles: [":host{--_widget-grid-toolbar-background: var(--widget-grid-toolbar-background, var(--ymt-surface));--_widget-grid-on-toolbar: var(--widget-grid-on-toolbar, var(--ymt-on-surface));position:relative}:host .fab{position:absolute;inset-inline-end:var(--ymt-spacing-m);inset-block-end:var(--ymt-spacing-m);z-index:100}:host .cmp{height:100%}:host.widget-grid-edit gridster-item{outline:1px solid var(--ymt-outline);outline-offset:-1px}:host .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--ymt-on-surface);font:var(--ymt-font-body-medium)}:host .empty p{padding:var(--ymt-spacing-m);max-width:45ch;text-align:center}:host gridster{background-color:transparent}:host gridster ::ng-deep .gridster-column,:host gridster ::ng-deep .gridster-row{border-color:var(--ymt-outline-variant);transition:none}:host gridster-item{transition:none;background-color:transparent}:host gridster-item .toolbar{position:absolute;z-index:1;background-color:var(--_widget-grid-toolbar-background);color:var(--_widget-grid-on-toolbar);right:0;top:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs);gap:var(--ymt-spacing-s);display:flex;flex-flow:row nowrap;align-items:center;outline:1px solid var(--ymt-outline);outline-offset:-1px}:host gridster-item .toolbar button{color:currentColor}:host gridster-item .dragHandle{display:flex;flex-flow:column;align-items:center;justify-content:center;padding:0 var(--ymt-spacing-s);cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: DynamicIoModule }, { kind: "directive", type: i4.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }, { kind: "directive", type: i4.ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SignalComponentIoModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: WidgetPickerComponent, selector: "yuv-widget-picker", inputs: ["pickerData", "buckets"], outputs: ["picked", "canceled"] }, { kind: "component", type: GridsterItemComponent, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { 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"] }] }); }
|
|
641
651
|
}
|
|
642
652
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YuvWidgetGridComponent, decorators: [{
|
|
643
653
|
type: Component,
|
|
@@ -648,10 +658,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
648
658
|
TranslateModule,
|
|
649
659
|
GridsterComponent,
|
|
650
660
|
MatIconModule,
|
|
661
|
+
MatTooltipModule,
|
|
651
662
|
MatButtonModule,
|
|
652
663
|
WidgetPickerComponent,
|
|
653
664
|
GridsterItemComponent,
|
|
654
|
-
|
|
665
|
+
YmtIconButtonDirective,
|
|
666
|
+
MatTooltip
|
|
667
|
+
], providers: [WidgetGridService], host: { '[class.widget-grid-edit]': 'editMode()' }, template: "@if (_editMode()) {\n <button class=\"fab\" mat-fab [attr.aria-label]=\"'yuv.widget-grid.widget.add.label' | translate\" (click)=\"addItem()\">\n <mat-icon>add</mat-icon>\n </button>\n}\n\n@if (widgetGrid.length === 0 && !_editMode()) {\n <div class=\"empty\"> \n <!-- <p>{{ 'yuv.widget-grid.empty' | translate }}</p>\n <button ymtButton=\"primary\" (click)=\"_editMode.set(true)\"> \n {{'yuv.widget-grid.empty.create' | translate}}</button> -->\n <ng-content select=\".empty\"><p>{{ 'yuv.widget-grid.empty' | translate }}</p></ng-content>\n </div>\n} @else {\n <gridster [options]=\"options\">\n @for (item of widgetGrid; track item.id) {\n <gridster-item [item]=\"item\">\n @if (_editMode()) {\n <div class=\"toolbar\">\n <!-- drag handle -->\n <mat-icon class=\"dragHandle ymt-icon--size-s\">drag_indicator</mat-icon>\n <!-- edit -->\n <button ymt-icon-button icon-button-size=\"small\" \n [matTooltip]=\"'yuv.widget-grid.widget.edit.tooltip' | translate\"\n (click)=\"openWidgetPicker(item)\"><mat-icon class=\"ymt-icon--size-s\">edit</mat-icon></button>\n <!-- remove -->\n <button ymt-icon-button icon-button-size=\"small\" \n [matTooltip]=\"'yuv.widget-grid.widget.remove.tooltip' | translate\"\n (click)=\"removeItem(item)\"><mat-icon class=\"ymt-icon--size-s\">clear</mat-icon></button>\n </div>\n }\n <div class=\"cmp\">\n <ng-container *ngComponentOutlet=\"item.widget; ndcDynamicInputs: item.widgetConfigMap\"></ng-container>\n </div>\n </gridster-item>\n }\n </gridster>\n}\n<ng-template #widgetPicker>\n <yuv-widget-picker [pickerData]=\"widgetPickerData\" [buckets]=\"buckets()\"></yuv-widget-picker>\n</ng-template>\n", styles: [":host{--_widget-grid-toolbar-background: var(--widget-grid-toolbar-background, var(--ymt-surface));--_widget-grid-on-toolbar: var(--widget-grid-on-toolbar, var(--ymt-on-surface));position:relative}:host .fab{position:absolute;inset-inline-end:var(--ymt-spacing-m);inset-block-end:var(--ymt-spacing-m);z-index:100}:host .cmp{height:100%}:host.widget-grid-edit gridster-item{outline:1px solid var(--ymt-outline);outline-offset:-1px}:host .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--ymt-on-surface);font:var(--ymt-font-body-medium)}:host .empty p{padding:var(--ymt-spacing-m);max-width:45ch;text-align:center}:host gridster{background-color:transparent}:host gridster ::ng-deep .gridster-column,:host gridster ::ng-deep .gridster-row{border-color:var(--ymt-outline-variant);transition:none}:host gridster-item{transition:none;background-color:transparent}:host gridster-item .toolbar{position:absolute;z-index:1;background-color:var(--_widget-grid-toolbar-background);color:var(--_widget-grid-on-toolbar);right:0;top:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs);gap:var(--ymt-spacing-s);display:flex;flex-flow:row nowrap;align-items:center;outline:1px solid var(--ymt-outline);outline-offset:-1px}:host gridster-item .toolbar button{color:currentColor}:host gridster-item .dragHandle{display:flex;flex-flow:column;align-items:center;justify-content:center;padding:0 var(--ymt-spacing-s);cursor:move}\n"] }]
|
|
655
668
|
}], ctorParameters: () => [] });
|
|
656
669
|
|
|
657
670
|
class WorkspaceEditComponent {
|
|
@@ -882,7 +895,7 @@ class YuvWidgetGridWorkspacesComponent {
|
|
|
882
895
|
this.configChange.emit(this._workspaceConfig());
|
|
883
896
|
}
|
|
884
897
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YuvWidgetGridWorkspacesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
885
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: YuvWidgetGridWorkspacesComponent, isStandalone: true, selector: "yuv-widget-grid-workspaces", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, workspaceConfig: { classPropertyName: "workspaceConfig", publicName: "workspaceConfig", isSignal: true, isRequired: false, transformFunction: null }, buckets: { classPropertyName: "buckets", publicName: "buckets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configChange: "configChange", gridItemEvent: "gridItemEvent", editModeChange: "editModeChange" }, ngImport: i0, template: "@let ws = workspace();\n\n<div class=\"toolbar\">\n @if (ws) {\n @let workspaces = _workspaceConfig()?.workspaces || [];\n <button mat-icon-button [disabled]=\"editMode()\" [matMenuTriggerFor]=\"workspacePickerMenu\"><mat-icon>menu</mat-icon></button>\n\n <mat-menu #workspacePickerMenu=\"matMenu\">\n @for (ws of workspaces; track ws.id) {\n <button mat-menu-item (click)=\"setWorkspace(ws.id)\">{{ ws.label }}</button>\n }\n <mat-divider></mat-divider>\n <button mat-menu-item (click)=\"openWorkspaceDialog(true, tplWworkspaceEdit)\">{{ 'yuv.widget-grid.workspaces.workspace.menu.create' | translate }}</button>\n </mat-menu>\n\n @if (!editMode()) {\n <h2 class=\"label\">{{ ws.label }}</h2>\n <button mat-icon-button [matMenuTriggerFor]=\"workspaceMenu\"><mat-icon>more_vert</mat-icon></button>\n
|
|
898
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: YuvWidgetGridWorkspacesComponent, isStandalone: true, selector: "yuv-widget-grid-workspaces", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, workspaceConfig: { classPropertyName: "workspaceConfig", publicName: "workspaceConfig", isSignal: true, isRequired: false, transformFunction: null }, buckets: { classPropertyName: "buckets", publicName: "buckets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configChange: "configChange", gridItemEvent: "gridItemEvent", editModeChange: "editModeChange" }, ngImport: i0, template: "@let ws = workspace();\n\n<div class=\"toolbar\">\n @if (ws) {\n @let workspaces = _workspaceConfig()?.workspaces || [];\n\n <button mat-icon-button [disabled]=\"editMode()\" [matMenuTriggerFor]=\"workspacePickerMenu\"><mat-icon>menu</mat-icon></button>\n\n <mat-menu #workspacePickerMenu=\"matMenu\">\n @for (ws of workspaces; track ws.id) {\n <button mat-menu-item (click)=\"setWorkspace(ws.id)\">{{ ws.label }}</button>\n }\n <mat-divider></mat-divider>\n <button mat-menu-item (click)=\"openWorkspaceDialog(true, tplWworkspaceEdit)\">{{ 'yuv.widget-grid.workspaces.workspace.menu.create' | translate }}</button>\n </mat-menu>\n\n @if (!editMode()) {\n <h2 class=\"label\">{{ ws.label }}</h2>\n @if (!ws.preventEdit) {\n <button mat-icon-button [matMenuTriggerFor]=\"workspaceMenu\"><mat-icon>more_vert</mat-icon></button>\n <mat-menu #workspaceMenu=\"matMenu\">\n <button mat-menu-item (click)=\"editMode.set(!editMode())\">{{ 'yuv.widget-grid.workspaces.workspace.menu.edit' | translate }}</button>\n <button mat-menu-item (click)=\"deleteCurrentWorkspace()\">{{ 'yuv.widget-grid.workspaces.workspace.menu.delete' | translate }}</button>\n </mat-menu>\n }\n } @else {\n @if (ws.preventRename) {\n <h2 class=\"label\">{{ ws.label }}</h2>\n } @else {\n <input type=\"text\" class=\"label\" [formControl]=\"workspaceLabelControl\" />\n }\n <button ymtButton=\"secondary\" (click)=\"revertWorkspaceConfig()\">\n {{ 'yuv.widget-grid.workspaces.editMode.cancel' | translate }}\n </button>\n <button ymtButton=\"primary\" (click)=\"persistWorkspaceConfig()\">\n {{ 'yuv.widget-grid.workspaces.editMode.save' | translate }}\n </button>\n }\n }\n</div>\n\n@if (ws) {\n <yuv-widget-grid\n [gridConfig]=\"_workspaceOptions().gridConfig\"\n [gridItemConfig]=\"gridItemConfig()\"\n [buckets]=\"buckets()\"\n [editMode]=\"editMode()\"\n (gridChange)=\"onGridChange($event)\"\n (gridItemEvent)=\"onGridEvent($event)\"\n >\n <div class=\"empty\">\n <p>{{ 'yuv.widget-grid.empty' | translate }}</p>\n <button ymtButton=\"primary\" (click)=\"editMode.set(true)\">\n {{ 'yuv.widget-grid.empty.create' | translate }}\n </button>\n </div>\n </yuv-widget-grid>\n} @else {\n <div class=\"empty\">\n <p>{{ 'yuv.widget-grid.workspaces.empty' | translate }}</p>\n <button ymtButton=\"primary\" (click)=\"openWorkspaceDialog(true, tplWworkspaceEdit)\">\n {{ 'yuv.widget-grid.workspaces.empty.button.create' | translate }}\n </button>\n </div>\n}\n\n<ng-template #tplWworkspaceEdit>\n <yuv-workspace-edit [workspaceForm]=\"workspaceForm\" (workspaceSubmit)=\"saveWorkspace()\"></yuv-workspace-edit>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow-y:auto}:host .toolbar{display:flex;flex-direction:row;align-items:center;gap:var(--ymt-spacing-m)}:host .toolbar .label{flex:1;font:var(--ymt-font-headline-medium);letter-spacing:var(--ymt-font-headline-medium-tracking);margin-inline:0;margin-block:.75em;padding-inline:.25em 0;padding-block:.25em}:host .toolbar input.label{border:0;background-color:transparent}:host .toolbar input.label:not([disabled]){outline:1px solid var(--ymt-outline)}:host yuv-widget-grid{flex:1}:host .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: YuvWidgetGridComponent, selector: "yuv-widget-grid", inputs: ["gridConfig", "editMode", "gridItemConfig", "buckets"], outputs: ["gridChange", "gridItemEvent", "widgetPickerOpen"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$3.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: i4$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: WorkspaceEditComponent, selector: "yuv-workspace-edit", inputs: ["workspaceForm"], outputs: ["workspaceSubmit"] }] }); }
|
|
886
899
|
}
|
|
887
900
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YuvWidgetGridWorkspacesComponent, decorators: [{
|
|
888
901
|
type: Component,
|
|
@@ -899,7 +912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
899
912
|
MatDividerModule,
|
|
900
913
|
TranslateModule,
|
|
901
914
|
WorkspaceEditComponent
|
|
902
|
-
], template: "@let ws = workspace();\n\n<div class=\"toolbar\">\n @if (ws) {\n @let workspaces = _workspaceConfig()?.workspaces || [];\n <button mat-icon-button [disabled]=\"editMode()\" [matMenuTriggerFor]=\"workspacePickerMenu\"><mat-icon>menu</mat-icon></button>\n\n <mat-menu #workspacePickerMenu=\"matMenu\">\n @for (ws of workspaces; track ws.id) {\n <button mat-menu-item (click)=\"setWorkspace(ws.id)\">{{ ws.label }}</button>\n }\n <mat-divider></mat-divider>\n <button mat-menu-item (click)=\"openWorkspaceDialog(true, tplWworkspaceEdit)\">{{ 'yuv.widget-grid.workspaces.workspace.menu.create' | translate }}</button>\n </mat-menu>\n\n @if (!editMode()) {\n <h2 class=\"label\">{{ ws.label }}</h2>\n <button mat-icon-button [matMenuTriggerFor]=\"workspaceMenu\"><mat-icon>more_vert</mat-icon></button>\n
|
|
915
|
+
], template: "@let ws = workspace();\n\n<div class=\"toolbar\">\n @if (ws) {\n @let workspaces = _workspaceConfig()?.workspaces || [];\n\n <button mat-icon-button [disabled]=\"editMode()\" [matMenuTriggerFor]=\"workspacePickerMenu\"><mat-icon>menu</mat-icon></button>\n\n <mat-menu #workspacePickerMenu=\"matMenu\">\n @for (ws of workspaces; track ws.id) {\n <button mat-menu-item (click)=\"setWorkspace(ws.id)\">{{ ws.label }}</button>\n }\n <mat-divider></mat-divider>\n <button mat-menu-item (click)=\"openWorkspaceDialog(true, tplWworkspaceEdit)\">{{ 'yuv.widget-grid.workspaces.workspace.menu.create' | translate }}</button>\n </mat-menu>\n\n @if (!editMode()) {\n <h2 class=\"label\">{{ ws.label }}</h2>\n @if (!ws.preventEdit) {\n <button mat-icon-button [matMenuTriggerFor]=\"workspaceMenu\"><mat-icon>more_vert</mat-icon></button>\n <mat-menu #workspaceMenu=\"matMenu\">\n <button mat-menu-item (click)=\"editMode.set(!editMode())\">{{ 'yuv.widget-grid.workspaces.workspace.menu.edit' | translate }}</button>\n <button mat-menu-item (click)=\"deleteCurrentWorkspace()\">{{ 'yuv.widget-grid.workspaces.workspace.menu.delete' | translate }}</button>\n </mat-menu>\n }\n } @else {\n @if (ws.preventRename) {\n <h2 class=\"label\">{{ ws.label }}</h2>\n } @else {\n <input type=\"text\" class=\"label\" [formControl]=\"workspaceLabelControl\" />\n }\n <button ymtButton=\"secondary\" (click)=\"revertWorkspaceConfig()\">\n {{ 'yuv.widget-grid.workspaces.editMode.cancel' | translate }}\n </button>\n <button ymtButton=\"primary\" (click)=\"persistWorkspaceConfig()\">\n {{ 'yuv.widget-grid.workspaces.editMode.save' | translate }}\n </button>\n }\n }\n</div>\n\n@if (ws) {\n <yuv-widget-grid\n [gridConfig]=\"_workspaceOptions().gridConfig\"\n [gridItemConfig]=\"gridItemConfig()\"\n [buckets]=\"buckets()\"\n [editMode]=\"editMode()\"\n (gridChange)=\"onGridChange($event)\"\n (gridItemEvent)=\"onGridEvent($event)\"\n >\n <div class=\"empty\">\n <p>{{ 'yuv.widget-grid.empty' | translate }}</p>\n <button ymtButton=\"primary\" (click)=\"editMode.set(true)\">\n {{ 'yuv.widget-grid.empty.create' | translate }}\n </button>\n </div>\n </yuv-widget-grid>\n} @else {\n <div class=\"empty\">\n <p>{{ 'yuv.widget-grid.workspaces.empty' | translate }}</p>\n <button ymtButton=\"primary\" (click)=\"openWorkspaceDialog(true, tplWworkspaceEdit)\">\n {{ 'yuv.widget-grid.workspaces.empty.button.create' | translate }}\n </button>\n </div>\n}\n\n<ng-template #tplWworkspaceEdit>\n <yuv-workspace-edit [workspaceForm]=\"workspaceForm\" (workspaceSubmit)=\"saveWorkspace()\"></yuv-workspace-edit>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow-y:auto}:host .toolbar{display:flex;flex-direction:row;align-items:center;gap:var(--ymt-spacing-m)}:host .toolbar .label{flex:1;font:var(--ymt-font-headline-medium);letter-spacing:var(--ymt-font-headline-medium-tracking);margin-inline:0;margin-block:.75em;padding-inline:.25em 0;padding-block:.25em}:host .toolbar input.label{border:0;background-color:transparent}:host .toolbar input.label:not([disabled]){outline:1px solid var(--ymt-outline)}:host yuv-widget-grid{flex:1}:host .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}\n"] }]
|
|
903
916
|
}] });
|
|
904
917
|
|
|
905
918
|
const cmp = [
|