@yuuvis/client-framework 3.0.0-beta.20.0 → 3.0.0-beta.21.0

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.
Files changed (109) hide show
  1. package/fesm2022/yuuvis-client-framework-actions.mjs +25 -25
  2. package/fesm2022/yuuvis-client-framework-actions.mjs.map +1 -1
  3. package/fesm2022/yuuvis-client-framework-app-bar.mjs +6 -6
  4. package/fesm2022/yuuvis-client-framework-app-bar.mjs.map +1 -1
  5. package/fesm2022/yuuvis-client-framework-autocomplete.mjs +22 -22
  6. package/fesm2022/yuuvis-client-framework-autocomplete.mjs.map +1 -1
  7. package/fesm2022/yuuvis-client-framework-breadcrumb.mjs +4 -4
  8. package/fesm2022/yuuvis-client-framework-breadcrumb.mjs.map +1 -1
  9. package/fesm2022/yuuvis-client-framework-clipboard.mjs +7 -6
  10. package/fesm2022/yuuvis-client-framework-clipboard.mjs.map +1 -1
  11. package/fesm2022/yuuvis-client-framework-common.mjs +135 -135
  12. package/fesm2022/yuuvis-client-framework-common.mjs.map +1 -1
  13. package/fesm2022/yuuvis-client-framework-datepicker.mjs +51 -51
  14. package/fesm2022/yuuvis-client-framework-datepicker.mjs.map +1 -1
  15. package/fesm2022/yuuvis-client-framework-forms.mjs +154 -167
  16. package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
  17. package/fesm2022/yuuvis-client-framework-icons.mjs +14 -14
  18. package/fesm2022/yuuvis-client-framework-icons.mjs.map +1 -1
  19. package/fesm2022/yuuvis-client-framework-list.mjs +34 -46
  20. package/fesm2022/yuuvis-client-framework-list.mjs.map +1 -1
  21. package/fesm2022/yuuvis-client-framework-master-details.mjs +14 -14
  22. package/fesm2022/yuuvis-client-framework-master-details.mjs.map +1 -1
  23. package/fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs +7 -7
  24. package/fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs.map +1 -1
  25. package/fesm2022/yuuvis-client-framework-metadata-form.mjs +28 -28
  26. package/fesm2022/yuuvis-client-framework-metadata-form.mjs.map +1 -1
  27. package/fesm2022/yuuvis-client-framework-object-details.mjs +92 -95
  28. package/fesm2022/yuuvis-client-framework-object-details.mjs.map +1 -1
  29. package/fesm2022/yuuvis-client-framework-object-flavor.mjs +46 -44
  30. package/fesm2022/yuuvis-client-framework-object-flavor.mjs.map +1 -1
  31. package/fesm2022/yuuvis-client-framework-object-form.mjs +47 -47
  32. package/fesm2022/yuuvis-client-framework-object-form.mjs.map +1 -1
  33. package/fesm2022/yuuvis-client-framework-object-preview.mjs +37 -58
  34. package/fesm2022/yuuvis-client-framework-object-preview.mjs.map +1 -1
  35. package/fesm2022/yuuvis-client-framework-object-relationship.mjs +80 -80
  36. package/fesm2022/yuuvis-client-framework-object-relationship.mjs.map +1 -1
  37. package/fesm2022/yuuvis-client-framework-object-summary.mjs +37 -38
  38. package/fesm2022/yuuvis-client-framework-object-summary.mjs.map +1 -1
  39. package/fesm2022/yuuvis-client-framework-object-versions.mjs +20 -20
  40. package/fesm2022/yuuvis-client-framework-object-versions.mjs.map +1 -1
  41. package/fesm2022/yuuvis-client-framework-overflow-hidden.mjs +9 -9
  42. package/fesm2022/yuuvis-client-framework-overflow-hidden.mjs.map +1 -1
  43. package/fesm2022/yuuvis-client-framework-overflow-menu.mjs +15 -15
  44. package/fesm2022/yuuvis-client-framework-overflow-menu.mjs.map +1 -1
  45. package/fesm2022/yuuvis-client-framework-pagination.mjs +5 -5
  46. package/fesm2022/yuuvis-client-framework-pagination.mjs.map +1 -1
  47. package/fesm2022/yuuvis-client-framework-popout.mjs +21 -21
  48. package/fesm2022/yuuvis-client-framework-popout.mjs.map +1 -1
  49. package/fesm2022/yuuvis-client-framework-query-list.mjs +26 -28
  50. package/fesm2022/yuuvis-client-framework-query-list.mjs.map +1 -1
  51. package/fesm2022/yuuvis-client-framework-renderer.mjs +51 -51
  52. package/fesm2022/yuuvis-client-framework-renderer.mjs.map +1 -1
  53. package/fesm2022/yuuvis-client-framework-sequence-list.mjs +7 -7
  54. package/fesm2022/yuuvis-client-framework-sequence-list.mjs.map +1 -1
  55. package/fesm2022/yuuvis-client-framework-simple-search.mjs +4 -4
  56. package/fesm2022/yuuvis-client-framework-simple-search.mjs.map +1 -1
  57. package/fesm2022/yuuvis-client-framework-sort.mjs +34 -55
  58. package/fesm2022/yuuvis-client-framework-sort.mjs.map +1 -1
  59. package/fesm2022/yuuvis-client-framework-split-view.mjs +33 -36
  60. package/fesm2022/yuuvis-client-framework-split-view.mjs.map +1 -1
  61. package/fesm2022/yuuvis-client-framework-tile-list.mjs +88 -90
  62. package/fesm2022/yuuvis-client-framework-tile-list.mjs.map +1 -1
  63. package/fesm2022/yuuvis-client-framework-token-search.mjs +21 -21
  64. package/fesm2022/yuuvis-client-framework-token-search.mjs.map +1 -1
  65. package/fesm2022/yuuvis-client-framework-tree.mjs +16 -16
  66. package/fesm2022/yuuvis-client-framework-tree.mjs.map +1 -1
  67. package/fesm2022/yuuvis-client-framework-upload-progress.mjs +15 -15
  68. package/fesm2022/yuuvis-client-framework-upload-progress.mjs.map +1 -1
  69. package/fesm2022/yuuvis-client-framework-widget-grid.mjs +59 -63
  70. package/fesm2022/yuuvis-client-framework-widget-grid.mjs.map +1 -1
  71. package/fesm2022/yuuvis-client-framework.mjs +22 -22
  72. package/fesm2022/yuuvis-client-framework.mjs.map +1 -1
  73. package/package.json +49 -48
  74. package/{clipboard/index.d.ts → types/yuuvis-client-framework-clipboard.d.ts} +1 -1
  75. package/{object-flavor/index.d.ts → types/yuuvis-client-framework-object-flavor.d.ts} +1 -0
  76. package/{renderer/index.d.ts → types/yuuvis-client-framework-renderer.d.ts} +2 -2
  77. package/{widget-grid/index.d.ts → types/yuuvis-client-framework-widget-grid.d.ts} +3 -3
  78. /package/{actions/index.d.ts → types/yuuvis-client-framework-actions.d.ts} +0 -0
  79. /package/{app-bar/index.d.ts → types/yuuvis-client-framework-app-bar.d.ts} +0 -0
  80. /package/{autocomplete/index.d.ts → types/yuuvis-client-framework-autocomplete.d.ts} +0 -0
  81. /package/{breadcrumb/index.d.ts → types/yuuvis-client-framework-breadcrumb.d.ts} +0 -0
  82. /package/{common/index.d.ts → types/yuuvis-client-framework-common.d.ts} +0 -0
  83. /package/{datepicker/index.d.ts → types/yuuvis-client-framework-datepicker.d.ts} +0 -0
  84. /package/{forms/index.d.ts → types/yuuvis-client-framework-forms.d.ts} +0 -0
  85. /package/{icons/index.d.ts → types/yuuvis-client-framework-icons.d.ts} +0 -0
  86. /package/{list/index.d.ts → types/yuuvis-client-framework-list.d.ts} +0 -0
  87. /package/{master-details/index.d.ts → types/yuuvis-client-framework-master-details.d.ts} +0 -0
  88. /package/{metadata-form-defaults/index.d.ts → types/yuuvis-client-framework-metadata-form-defaults.d.ts} +0 -0
  89. /package/{metadata-form/index.d.ts → types/yuuvis-client-framework-metadata-form.d.ts} +0 -0
  90. /package/{object-details/index.d.ts → types/yuuvis-client-framework-object-details.d.ts} +0 -0
  91. /package/{object-form/index.d.ts → types/yuuvis-client-framework-object-form.d.ts} +0 -0
  92. /package/{object-preview/index.d.ts → types/yuuvis-client-framework-object-preview.d.ts} +0 -0
  93. /package/{object-relationship/index.d.ts → types/yuuvis-client-framework-object-relationship.d.ts} +0 -0
  94. /package/{object-summary/index.d.ts → types/yuuvis-client-framework-object-summary.d.ts} +0 -0
  95. /package/{object-versions/index.d.ts → types/yuuvis-client-framework-object-versions.d.ts} +0 -0
  96. /package/{overflow-hidden/index.d.ts → types/yuuvis-client-framework-overflow-hidden.d.ts} +0 -0
  97. /package/{overflow-menu/index.d.ts → types/yuuvis-client-framework-overflow-menu.d.ts} +0 -0
  98. /package/{pagination/index.d.ts → types/yuuvis-client-framework-pagination.d.ts} +0 -0
  99. /package/{popout/index.d.ts → types/yuuvis-client-framework-popout.d.ts} +0 -0
  100. /package/{query-list/index.d.ts → types/yuuvis-client-framework-query-list.d.ts} +0 -0
  101. /package/{sequence-list/index.d.ts → types/yuuvis-client-framework-sequence-list.d.ts} +0 -0
  102. /package/{simple-search/index.d.ts → types/yuuvis-client-framework-simple-search.d.ts} +0 -0
  103. /package/{sort/index.d.ts → types/yuuvis-client-framework-sort.d.ts} +0 -0
  104. /package/{split-view/index.d.ts → types/yuuvis-client-framework-split-view.d.ts} +0 -0
  105. /package/{tile-list/index.d.ts → types/yuuvis-client-framework-tile-list.d.ts} +0 -0
  106. /package/{token-search/index.d.ts → types/yuuvis-client-framework-token-search.d.ts} +0 -0
  107. /package/{tree/index.d.ts → types/yuuvis-client-framework-tree.d.ts} +0 -0
  108. /package/{upload-progress/index.d.ts → types/yuuvis-client-framework-upload-progress.d.ts} +0 -0
  109. /package/{index.d.ts → types/yuuvis-client-framework.d.ts} +0 -0
@@ -7,7 +7,7 @@ import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dial
7
7
  import * as i3$2 from '@angular/material/icon';
8
8
  import { MatIconModule } from '@angular/material/icon';
9
9
  import { TranslateService, TranslatePipe } from '@yuuvis/client-core';
10
- import { GridsterItemComponent, DisplayGrid, GridType, GridsterComponent } from 'angular-gridster2';
10
+ import { Gridster, DisplayGrid, GridType, GridsterItem } from 'angular-gridster2';
11
11
  import * as i3 from 'ng-dynamic-component';
12
12
  import { DynamicIoModule } from 'ng-dynamic-component';
13
13
  import { ReplaySubject, Subject } from 'rxjs';
@@ -39,10 +39,10 @@ class WidgetGridEventService {
39
39
  trigger(evt) {
40
40
  this.widgetGridEventSource.next(evt);
41
41
  }
42
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
43
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetGridEventService, providedIn: 'root' }); }
42
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
43
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridEventService, providedIn: 'root' }); }
44
44
  }
45
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetGridEventService, decorators: [{
45
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridEventService, decorators: [{
46
46
  type: Injectable,
47
47
  args: [{
48
48
  providedIn: 'root',
@@ -50,10 +50,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
50
50
  }] });
51
51
 
52
52
  class NoopComponent {
53
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
54
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: NoopComponent, isStandalone: true, selector: "yuv-noop", inputs: { widgetConfig: "widgetConfig" }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.5\"/><circle cx=\"8.5\" cy=\"9.5\" r=\"1.5\"/><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-6c-2.33 0-4.32 1.45-5.12 3.5h1.67c.69-1.19 1.97-2 3.45-2s2.75.81 3.45 2h1.67c-.8-2.05-2.79-3.5-5.12-3.5z\"/></svg>", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:center;padding:var(--ymt-spacing-m);background-color:var(--panel-background);opacity:.7}:host svg{width:48px;height:48px;fill:var(--text-color-caption)}:host span{margin-top:var(--ymt-spacing-m)}\n"] }); }
53
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
54
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: NoopComponent, isStandalone: true, selector: "yuv-noop", inputs: { widgetConfig: "widgetConfig" }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.5\"/><circle cx=\"8.5\" cy=\"9.5\" r=\"1.5\"/><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-6c-2.33 0-4.32 1.45-5.12 3.5h1.67c.69-1.19 1.97-2 3.45-2s2.75.81 3.45 2h1.67c-.8-2.05-2.79-3.5-5.12-3.5z\"/></svg>", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:center;padding:var(--ymt-spacing-m);background-color:var(--panel-background);opacity:.7}:host svg{width:48px;height:48px;fill:var(--text-color-caption)}:host span{margin-top:var(--ymt-spacing-m)}\n"] }); }
55
55
  }
56
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NoopComponent, decorators: [{
56
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NoopComponent, decorators: [{
57
57
  type: Component,
58
58
  args: [{ selector: 'yuv-noop', template: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.5\"/><circle cx=\"8.5\" cy=\"9.5\" r=\"1.5\"/><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-6c-2.33 0-4.32 1.45-5.12 3.5h1.67c.69-1.19 1.97-2 3.45-2s2.75.81 3.45 2h1.67c-.8-2.05-2.79-3.5-5.12-3.5z\"/></svg>", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:center;padding:var(--ymt-spacing-m);background-color:var(--panel-background);opacity:.7}:host svg{width:48px;height:48px;fill:var(--text-color-caption)}:host span{margin-top:var(--ymt-spacing-m)}\n"] }]
59
59
  }], propDecorators: { widgetConfig: [{
@@ -207,10 +207,10 @@ class WidgetGridRegistry {
207
207
  const regexPattern = new RegExp('^' + pattern.replace(/\?/g, '.').replace(/\*/g, '.*') + '$');
208
208
  return regexPattern.test(text);
209
209
  }
210
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetGridRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
211
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetGridRegistry, providedIn: 'root' }); }
210
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
211
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridRegistry, providedIn: 'root' }); }
212
212
  }
213
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetGridRegistry, decorators: [{
213
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridRegistry, decorators: [{
214
214
  type: Injectable,
215
215
  args: [{
216
216
  providedIn: 'root'
@@ -365,10 +365,10 @@ class WidgetGridService {
365
365
  this.widgetGridSource.next(this.widgetGrid);
366
366
  this.widgetGridUpdateSource.next(gridItemId);
367
367
  }
368
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetGridService, deps: [{ token: WidgetGridRegistry }], target: i0.ɵɵFactoryTarget.Injectable }); }
369
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetGridService }); }
368
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridService, deps: [{ token: WidgetGridRegistry }], target: i0.ɵɵFactoryTarget.Injectable }); }
369
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridService }); }
370
370
  }
371
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetGridService, decorators: [{
371
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridService, decorators: [{
372
372
  type: Injectable
373
373
  }], ctorParameters: () => [{ type: WidgetGridRegistry }] });
374
374
 
@@ -395,7 +395,7 @@ class WidgetPickerComponent {
395
395
  this.widgetConfigState = s || undefined;
396
396
  }
397
397
  };
398
- this.pickerData = input(this.#dialogData.pickerData, ...(ngDevMode ? [{ debugName: "pickerData" }] : []));
398
+ this.pickerData = input(this.#dialogData.pickerData, ...(ngDevMode ? [{ debugName: "pickerData" }] : /* istanbul ignore next */ []));
399
399
  this.#pickerDataEffect = effect(() => {
400
400
  const pd = this.pickerData();
401
401
  if (pd) {
@@ -406,7 +406,7 @@ class WidgetPickerComponent {
406
406
  this.widgetConfigMap = pd.widgetConfigMap || {};
407
407
  this.widgetId = pd.widgetId;
408
408
  }
409
- }, ...(ngDevMode ? [{ debugName: "#pickerDataEffect" }] : []));
409
+ }, ...(ngDevMode ? [{ debugName: "#pickerDataEffect" }] : /* istanbul ignore next */ []));
410
410
  /**
411
411
  * Collection of buckets to load available widgets from. Wildcards are also posssible:
412
412
  * `[buckets]="['app.default', '*.public.*', 'app.no?.widgets']"`
@@ -414,7 +414,7 @@ class WidgetPickerComponent {
414
414
  * `*` represents any character 0-n times
415
415
  * `?` represents exactly one character
416
416
  */
417
- this.buckets = input(this.#dialogData.buckets, ...(ngDevMode ? [{ debugName: "buckets" }] : []));
417
+ this.buckets = input(this.#dialogData.buckets, ...(ngDevMode ? [{ debugName: "buckets" }] : /* istanbul ignore next */ []));
418
418
  this.picked = output();
419
419
  this.canceled = output();
420
420
  this.pickerFormControl.valueChanges.pipe(takeUntilDestroyed()).subscribe((widgets) => {
@@ -473,10 +473,10 @@ class WidgetPickerComponent {
473
473
  ngOnInit() {
474
474
  this.registeredWidgets = this.#widgetGridRegistry.getRegisteredWidgets(this.buckets());
475
475
  }
476
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
477
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "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: i2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: DynamicIoModule }, { kind: "directive", type: i3.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }, { kind: "directive", type: i3.ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SignalComponentIoModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
476
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
477
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "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: i2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: DynamicIoModule }, { kind: "directive", type: i3.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }, { kind: "directive", type: i3.ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SignalComponentIoModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
478
478
  }
479
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetPickerComponent, decorators: [{
479
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetPickerComponent, decorators: [{
480
480
  type: Component,
481
481
  args: [{ selector: 'yuv-widget-picker', imports: [
482
482
  CommonModule,
@@ -503,7 +503,7 @@ class YuvWidgetGridComponent {
503
503
  this.#dialog = inject(MatDialog);
504
504
  this.#widgetGridService = inject(WidgetGridService);
505
505
  this.#widgetGridEventService = inject(WidgetGridEventService);
506
- this.gridsterItems = viewChild.required(GridsterItemComponent);
506
+ this.gridster = viewChild(Gridster, ...(ngDevMode ? [{ debugName: "gridster" }] : /* istanbul ignore next */ []));
507
507
  this.widgetPicker = viewChild.required('widgetPicker', { read: TemplateRef });
508
508
  this.options = {
509
509
  gridType: GridType.Fit,
@@ -519,11 +519,11 @@ class YuvWidgetGridComponent {
519
519
  resizable: {
520
520
  enabled: false
521
521
  },
522
- itemChangeCallback: (gridsterItem, gridsterItemComponent) => {
522
+ itemChangeCallback: (item, itemComponent) => {
523
523
  this.emitChange();
524
524
  }
525
525
  };
526
- this.gridConfig = input(...(ngDevMode ? [undefined, { debugName: "gridConfig" }] : []));
526
+ this.gridConfig = input(...(ngDevMode ? [undefined, { debugName: "gridConfig" }] : /* istanbul ignore next */ []));
527
527
  this.#gridConfigEffect = effect(() => {
528
528
  const cfg = this.gridConfig();
529
529
  if (cfg?.rows) {
@@ -546,17 +546,15 @@ class YuvWidgetGridComponent {
546
546
  if (cfg?.gridType) {
547
547
  this.options.gridType = cfg.gridType;
548
548
  }
549
- if (this.options.api?.optionsChanged) {
550
- this.options.api.optionsChanged();
551
- }
552
- }, ...(ngDevMode ? [{ debugName: "#gridConfigEffect" }] : []));
553
- this._editMode = signal(false, ...(ngDevMode ? [{ debugName: "_editMode" }] : []));
549
+ this.gridster()?.api.calculateLayout();
550
+ }, ...(ngDevMode ? [{ debugName: "#gridConfigEffect" }] : /* istanbul ignore next */ []));
551
+ this._editMode = signal(false, ...(ngDevMode ? [{ debugName: "_editMode" }] : /* istanbul ignore next */ []));
554
552
  /**
555
553
  * Whether or not to enable edit mode. In edit mode controls
556
554
  * for editing existing tiles and creating new ones are shown.
557
555
  * This mode also enables positioning and resizing of the tiles.
558
556
  */
559
- this.editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
557
+ this.editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
560
558
  this.#editModeEffect = effect(() => {
561
559
  const e = this.editMode();
562
560
  this._editMode.set(e);
@@ -565,15 +563,13 @@ class YuvWidgetGridComponent {
565
563
  this.options.displayGrid = e ? DisplayGrid.Always : DisplayGrid.None;
566
564
  // set timeout to ensure that the grid has been redrawn before notifying the widgets about the change
567
565
  setTimeout(() => {
568
- if (this.options.api?.optionsChanged) {
569
- this.options.api.optionsChanged();
570
- }
566
+ this.gridster()?.api.calculateLayout();
571
567
  }, 0);
572
- }, ...(ngDevMode ? [{ debugName: "#editModeEffect" }] : []));
573
- this.gridItemConfig = input(undefined, ...(ngDevMode ? [{ debugName: "gridItemConfig" }] : []));
568
+ }, ...(ngDevMode ? [{ debugName: "#editModeEffect" }] : /* istanbul ignore next */ []));
569
+ this.gridItemConfig = input(undefined, ...(ngDevMode ? [{ debugName: "gridItemConfig" }] : /* istanbul ignore next */ []));
574
570
  this.#gridItemConfigEffect = effect(() => {
575
571
  this.#widgetGridService.setWidgetGrid(this.gridItemConfig());
576
- }, ...(ngDevMode ? [{ debugName: "#gridItemConfigEffect" }] : []));
572
+ }, ...(ngDevMode ? [{ debugName: "#gridItemConfigEffect" }] : /* istanbul ignore next */ []));
577
573
  /**
578
574
  * Collection of buckets to load available widgets from. Wildcards are also posssible:
579
575
  * `[buckets]="['app.default', '*.public.*', 'app.no?.widgets']"`
@@ -581,7 +577,7 @@ class YuvWidgetGridComponent {
581
577
  * `*` represents any character 0-n times
582
578
  * `?` represents exactly one character
583
579
  */
584
- this.buckets = input(undefined, ...(ngDevMode ? [{ debugName: "buckets" }] : []));
580
+ this.buckets = input(undefined, ...(ngDevMode ? [{ debugName: "buckets" }] : /* istanbul ignore next */ []));
585
581
  // @Input() buckets?: string[];
586
582
  /**
587
583
  * Emitted when the grid has been changed
@@ -649,37 +645,37 @@ class YuvWidgetGridComponent {
649
645
  });
650
646
  this.gridChange.emit(mapped);
651
647
  }
652
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvWidgetGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
653
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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()\" [matTooltip]=\"'yuv.widget-grid.widget.add.tooltip' | translate\">\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", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: DynamicIoModule }, { kind: "directive", type: i3.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }, { kind: "directive", type: i3.ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SignalComponentIoModule }, { kind: "component", type: GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { 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"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
648
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
649
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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: "gridster", first: true, predicate: Gridster, 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()\" [matTooltip]=\"'yuv.widget-grid.widget.add.tooltip' | translate\">\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", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: DynamicIoModule }, { kind: "directive", type: i3.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }, { kind: "directive", type: i3.ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SignalComponentIoModule }, { kind: "component", type: Gridster, selector: "gridster", inputs: ["options"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: WidgetPickerComponent, selector: "yuv-widget-picker", inputs: ["pickerData", "buckets"], outputs: ["picked", "canceled"] }, { kind: "component", type: GridsterItem, 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"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
654
650
  }
655
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvWidgetGridComponent, decorators: [{
651
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridComponent, decorators: [{
656
652
  type: Component,
657
653
  args: [{ selector: 'yuv-widget-grid', imports: [
658
654
  CommonModule,
659
655
  DynamicIoModule,
660
656
  SignalComponentIoModule,
661
657
  TranslatePipe,
662
- GridsterComponent,
658
+ Gridster,
663
659
  MatIconModule,
664
660
  MatTooltipModule,
665
661
  MatButtonModule,
666
662
  WidgetPickerComponent,
667
- GridsterItemComponent,
663
+ GridsterItem,
668
664
  YmtIconButtonDirective,
669
665
  MatTooltip
670
666
  ], 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()\" [matTooltip]=\"'yuv.widget-grid.widget.add.tooltip' | translate\">\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"] }]
671
- }], ctorParameters: () => [], propDecorators: { gridsterItems: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GridsterItemComponent), { isSignal: true }] }], widgetPicker: [{ type: i0.ViewChild, args: ['widgetPicker', { ...{ read: TemplateRef }, isSignal: true }] }], gridConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridConfig", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], gridItemConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridItemConfig", required: false }] }], buckets: [{ type: i0.Input, args: [{ isSignal: true, alias: "buckets", required: false }] }], gridChange: [{ type: i0.Output, args: ["gridChange"] }], gridItemEvent: [{ type: i0.Output, args: ["gridItemEvent"] }], widgetPickerOpen: [{ type: i0.Output, args: ["widgetPickerOpen"] }] } });
667
+ }], ctorParameters: () => [], propDecorators: { gridster: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Gridster), { isSignal: true }] }], widgetPicker: [{ type: i0.ViewChild, args: ['widgetPicker', { ...{ read: TemplateRef }, isSignal: true }] }], gridConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridConfig", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], gridItemConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridItemConfig", required: false }] }], buckets: [{ type: i0.Input, args: [{ isSignal: true, alias: "buckets", required: false }] }], gridChange: [{ type: i0.Output, args: ["gridChange"] }], gridItemEvent: [{ type: i0.Output, args: ["gridItemEvent"] }], widgetPickerOpen: [{ type: i0.Output, args: ["widgetPickerOpen"] }] } });
672
668
 
673
669
  class WorkspaceEditComponent {
674
670
  constructor() {
675
671
  this.dialogRef = inject((MatDialogRef));
676
- this.workspaceForm = input.required(...(ngDevMode ? [{ debugName: "workspaceForm" }] : []));
672
+ this.workspaceForm = input.required(...(ngDevMode ? [{ debugName: "workspaceForm" }] : /* istanbul ignore next */ []));
677
673
  this.workspaceSubmit = output();
678
674
  }
679
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WorkspaceEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
680
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.19", type: WorkspaceEditComponent, isStandalone: true, selector: "yuv-workspace-edit", inputs: { workspaceForm: { classPropertyName: "workspaceForm", publicName: "workspaceForm", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { workspaceSubmit: "workspaceSubmit" }, ngImport: i0, template: "<yuv-dialog [headertitel]=\"'yuv.widget-grid.workspaces.edit.title' | translate\">\n <main>\n <form id=\"workspaceEditForm\" [formGroup]=\"workspaceForm()\" (ngSubmit)=\"workspaceSubmit.emit()\">\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.widget-grid.workspaces.workspace.label' | translate }}</mat-label>\n <input matInput formControlName=\"label\" />\n </mat-form-field>\n </form>\n </main>\n <footer>\n <button ymtButton=\"secondary\" type=\"button\" (click)=\"dialogRef.close()\">\n {{ 'yuv.widget-grid.workspaces.edit.cancel' | translate }}\n </button>\n <button ymtButton=\"primary\" form=\"workspaceEditForm\" type=\"submit\" [disabled]=\"workspaceForm().invalid\">\n {{ 'yuv.widget-grid.workspaces.edit.save' | translate }}\n </button>\n </footer>\n</yuv-dialog>\n", styles: [":host main{padding:var(--ymt-spacing-m)}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { 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: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe$1, name: "translate" }] }); }
675
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WorkspaceEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
676
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: WorkspaceEditComponent, isStandalone: true, selector: "yuv-workspace-edit", inputs: { workspaceForm: { classPropertyName: "workspaceForm", publicName: "workspaceForm", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { workspaceSubmit: "workspaceSubmit" }, ngImport: i0, template: "<yuv-dialog [headertitel]=\"'yuv.widget-grid.workspaces.edit.title' | translate\">\n <main>\n <form id=\"workspaceEditForm\" [formGroup]=\"workspaceForm()\" (ngSubmit)=\"workspaceSubmit.emit()\">\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.widget-grid.workspaces.workspace.label' | translate }}</mat-label>\n <input matInput formControlName=\"label\" />\n </mat-form-field>\n </form>\n </main>\n <footer>\n <button ymtButton=\"secondary\" type=\"button\" (click)=\"dialogRef.close()\">\n {{ 'yuv.widget-grid.workspaces.edit.cancel' | translate }}\n </button>\n <button ymtButton=\"primary\" form=\"workspaceEditForm\" type=\"submit\" [disabled]=\"workspaceForm().invalid\">\n {{ 'yuv.widget-grid.workspaces.edit.save' | translate }}\n </button>\n </footer>\n</yuv-dialog>\n", styles: [":host main{padding:var(--ymt-spacing-m)}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { 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: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe$1, name: "translate" }] }); }
681
677
  }
682
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WorkspaceEditComponent, decorators: [{
678
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WorkspaceEditComponent, decorators: [{
683
679
  type: Component,
684
680
  args: [{ selector: 'yuv-workspace-edit', imports: [
685
681
  DialogComponent,
@@ -712,15 +708,15 @@ class YuvWidgetGridWorkspacesComponent {
712
708
  id: [''],
713
709
  label: ['', Validators.required]
714
710
  });
715
- this.options = input(this.#DEFAULT_WORKSPACE_OPTIONS, ...(ngDevMode ? [{ debugName: "options" }] : []));
711
+ this.options = input(this.#DEFAULT_WORKSPACE_OPTIONS, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
716
712
  this._workspaceOptions = computed(() => ({
717
713
  gridConfig: {
718
714
  ...this.#DEFAULT_WORKSPACE_OPTIONS.gridConfig,
719
715
  ...(this.options().gridConfig || {})
720
716
  }
721
- }), ...(ngDevMode ? [{ debugName: "_workspaceOptions" }] : []));
722
- this.workspaceConfig = input(undefined, ...(ngDevMode ? [{ debugName: "workspaceConfig" }] : []));
723
- this._workspaceConfig = signal(undefined, ...(ngDevMode ? [{ debugName: "_workspaceConfig" }] : []));
717
+ }), ...(ngDevMode ? [{ debugName: "_workspaceOptions" }] : /* istanbul ignore next */ []));
718
+ this.workspaceConfig = input(undefined, ...(ngDevMode ? [{ debugName: "workspaceConfig" }] : /* istanbul ignore next */ []));
719
+ this._workspaceConfig = signal(undefined, ...(ngDevMode ? [{ debugName: "_workspaceConfig" }] : /* istanbul ignore next */ []));
724
720
  this.#workspaceConfigEffect = effect(() => {
725
721
  const wsc = this.workspaceConfig();
726
722
  untracked(() => {
@@ -730,7 +726,7 @@ class YuvWidgetGridWorkspacesComponent {
730
726
  this.setWorkspace(wsc.currentWorkspace, true);
731
727
  }
732
728
  });
733
- }, ...(ngDevMode ? [{ debugName: "#workspaceConfigEffect" }] : []));
729
+ }, ...(ngDevMode ? [{ debugName: "#workspaceConfigEffect" }] : /* istanbul ignore next */ []));
734
730
  /**
735
731
  * Collection of buckets to load available widgets from. Wildcards are also posssible:
736
732
  * `[buckets]="['app.default', '*.public.*', 'app.no?.widgets']"`
@@ -738,13 +734,13 @@ class YuvWidgetGridWorkspacesComponent {
738
734
  * `*` represents any character 0-n times
739
735
  * `?` represents exactly one character
740
736
  */
741
- this.buckets = input(undefined, ...(ngDevMode ? [{ debugName: "buckets" }] : []));
737
+ this.buckets = input(undefined, ...(ngDevMode ? [{ debugName: "buckets" }] : /* istanbul ignore next */ []));
742
738
  this.configChange = output();
743
739
  this.gridItemEvent = output();
744
740
  this.editModeChange = output();
745
- this.editMode = signal(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
741
+ this.editMode = signal(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
746
742
  // currently selected workspace
747
- this.workspace = signal(undefined, ...(ngDevMode ? [{ debugName: "workspace" }] : []));
743
+ this.workspace = signal(undefined, ...(ngDevMode ? [{ debugName: "workspace" }] : /* istanbul ignore next */ []));
748
744
  this.#workspaceEffect = effect(() => {
749
745
  const ws = this.workspace();
750
746
  this.workspaceLabel.set(ws ? this.getLabel(ws) : '');
@@ -753,9 +749,9 @@ class YuvWidgetGridWorkspacesComponent {
753
749
  this.workspaceForm.patchValue({ label: this.workspaceLabel(), id: ws.id });
754
750
  this.gridItemConfig.set(ws ? JSON.parse(JSON.stringify(ws.grid)) : undefined);
755
751
  });
756
- }, ...(ngDevMode ? [{ debugName: "#workspaceEffect" }] : []));
757
- this.workspaceLabel = signal('', ...(ngDevMode ? [{ debugName: "workspaceLabel" }] : []));
758
- this.gridItemConfig = signal(undefined, ...(ngDevMode ? [{ debugName: "gridItemConfig" }] : []));
752
+ }, ...(ngDevMode ? [{ debugName: "#workspaceEffect" }] : /* istanbul ignore next */ []));
753
+ this.workspaceLabel = signal('', ...(ngDevMode ? [{ debugName: "workspaceLabel" }] : /* istanbul ignore next */ []));
754
+ this.gridItemConfig = signal(undefined, ...(ngDevMode ? [{ debugName: "gridItemConfig" }] : /* istanbul ignore next */ []));
759
755
  }
760
756
  #dialog;
761
757
  #fb;
@@ -906,10 +902,10 @@ class YuvWidgetGridWorkspacesComponent {
906
902
  emitConfigChange() {
907
903
  this.configChange.emit(this._workspaceConfig());
908
904
  }
909
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvWidgetGridWorkspacesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
910
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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\n mat-icon-button\n [matTooltip]=\"'yuv.widget-grid.workspaces.workspace.menu.tooltip' | translate\"\n [disabled]=\"editMode()\"\n [matMenuTriggerFor]=\"workspacePickerMenu\"\n >\n <mat-icon>menu</mat-icon>\n </button>\n\n <mat-menu #workspacePickerMenu=\"matMenu\">\n @for (ws of workspaces; track ws.id) {\n <button mat-menu-item (click)=\"setWorkspace(ws.id)\">{{ getLabel(ws) }}</button>\n }\n <mat-divider></mat-divider>\n <button mat-menu-item (click)=\"openWorkspaceDialog(true, tplWorkspaceEdit)\">{{ 'yuv.widget-grid.workspaces.workspace.menu.create' | translate }}</button>\n </mat-menu>\n\n @if (!editMode()) {\n <h2 class=\"label\">{{ workspaceLabel() }}</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 || ws.translateLabel) {\n <h2 class=\"label\">{{ workspaceLabel() }}</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, tplWorkspaceEdit)\">\n {{ 'yuv.widget-grid.workspaces.empty.button.create' | translate }}\n </button>\n </div>\n}\n\n<ng-template #tplWorkspaceEdit>\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: "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: i3$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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$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$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.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: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: WorkspaceEditComponent, selector: "yuv-workspace-edit", inputs: ["workspaceForm"], outputs: ["workspaceSubmit"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
905
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridWorkspacesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
906
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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\n mat-icon-button\n [matTooltip]=\"'yuv.widget-grid.workspaces.workspace.menu.tooltip' | translate\"\n [disabled]=\"editMode()\"\n [matMenuTriggerFor]=\"workspacePickerMenu\"\n >\n <mat-icon>menu</mat-icon>\n </button>\n\n <mat-menu #workspacePickerMenu=\"matMenu\">\n @for (ws of workspaces; track ws.id) {\n <button mat-menu-item (click)=\"setWorkspace(ws.id)\">{{ getLabel(ws) }}</button>\n }\n <mat-divider></mat-divider>\n <button mat-menu-item (click)=\"openWorkspaceDialog(true, tplWorkspaceEdit)\">{{ 'yuv.widget-grid.workspaces.workspace.menu.create' | translate }}</button>\n </mat-menu>\n\n @if (!editMode()) {\n <h2 class=\"label\">{{ workspaceLabel() }}</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 || ws.translateLabel) {\n <h2 class=\"label\">{{ workspaceLabel() }}</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, tplWorkspaceEdit)\">\n {{ 'yuv.widget-grid.workspaces.empty.button.create' | translate }}\n </button>\n </div>\n}\n\n<ng-template #tplWorkspaceEdit>\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: "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: i3$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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$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$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.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: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: WorkspaceEditComponent, selector: "yuv-workspace-edit", inputs: ["workspaceForm"], outputs: ["workspaceSubmit"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
911
907
  }
912
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvWidgetGridWorkspacesComponent, decorators: [{
908
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridWorkspacesComponent, decorators: [{
913
909
  type: Component,
914
910
  args: [{ selector: 'yuv-widget-grid-workspaces', imports: [
915
911
  YuvWidgetGridComponent,
@@ -932,13 +928,13 @@ const cmp = [
932
928
  YuvWidgetGridWorkspacesComponent
933
929
  ];
934
930
  class YuvWidgetGridModule {
935
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvWidgetGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
936
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: YuvWidgetGridModule, imports: [YuvWidgetGridComponent,
931
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
932
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridModule, imports: [YuvWidgetGridComponent,
937
933
  YuvWidgetGridWorkspacesComponent], exports: [YuvWidgetGridComponent,
938
934
  YuvWidgetGridWorkspacesComponent] }); }
939
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvWidgetGridModule, imports: [cmp] }); }
935
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridModule, imports: [cmp] }); }
940
936
  }
941
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvWidgetGridModule, decorators: [{
937
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridModule, decorators: [{
942
938
  type: NgModule,
943
939
  args: [{
944
940
  imports: [cmp],