@c8y/ngx-components 1024.0.0 → 1024.1.6

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 (34) hide show
  1. package/fesm2022/c8y-ngx-components-datapoint-explorer-devicemanagement.mjs +0 -1
  2. package/fesm2022/c8y-ngx-components-datapoint-explorer-devicemanagement.mjs.map +1 -1
  3. package/fesm2022/c8y-ngx-components-operations-bulk-single-operations-list.mjs +4 -6
  4. package/fesm2022/c8y-ngx-components-operations-bulk-single-operations-list.mjs.map +1 -1
  5. package/fesm2022/c8y-ngx-components-repository-configuration.mjs +493 -417
  6. package/fesm2022/c8y-ngx-components-repository-configuration.mjs.map +1 -1
  7. package/fesm2022/c8y-ngx-components-repository-shared.mjs +69 -10
  8. package/fesm2022/c8y-ngx-components-repository-shared.mjs.map +1 -1
  9. package/fesm2022/c8y-ngx-components-widgets-implementations-quick-links.mjs +53 -24
  10. package/fesm2022/c8y-ngx-components-widgets-implementations-quick-links.mjs.map +1 -1
  11. package/fesm2022/c8y-ngx-components.mjs +51 -24
  12. package/fesm2022/c8y-ngx-components.mjs.map +1 -1
  13. package/locales/de.po +42 -39
  14. package/locales/es.po +32 -29
  15. package/locales/fr.po +24 -21
  16. package/locales/ja_JP.po +47 -44
  17. package/locales/ko.po +30 -27
  18. package/locales/locales.pot +3 -0
  19. package/locales/nl.po +27 -24
  20. package/locales/pl.po +42 -39
  21. package/locales/pt_BR.po +29 -26
  22. package/locales/zh_CN.po +28 -25
  23. package/locales/zh_TW.po +38 -35
  24. package/package.json +1 -1
  25. package/types/c8y-ngx-components-datapoint-explorer-devicemanagement.d.ts.map +1 -1
  26. package/types/c8y-ngx-components-operations-bulk-single-operations-list.d.ts.map +1 -1
  27. package/types/c8y-ngx-components-repository-configuration.d.ts +30 -11
  28. package/types/c8y-ngx-components-repository-configuration.d.ts.map +1 -1
  29. package/types/c8y-ngx-components-repository-shared.d.ts +26 -2
  30. package/types/c8y-ngx-components-repository-shared.d.ts.map +1 -1
  31. package/types/c8y-ngx-components-widgets-implementations-quick-links.d.ts +18 -5
  32. package/types/c8y-ngx-components-widgets-implementations-quick-links.d.ts.map +1 -1
  33. package/types/c8y-ngx-components.d.ts +16 -5
  34. package/types/c8y-ngx-components.d.ts.map +1 -1
@@ -1,5 +1,6 @@
1
1
  import * as i0 from '@angular/core';
2
- import { output, inject, Component, Injectable, Pipe, input, signal, ViewChild } from '@angular/core';
2
+ import { output, inject, Component, Injectable, Pipe, input, signal, computed, ViewChild } from '@angular/core';
3
+ import { toSignal } from '@angular/core/rxjs-interop';
3
4
  import { gettext } from '@c8y/ngx-components/gettext';
4
5
  import * as i2 from '@c8y/ngx-components';
5
6
  import { ValidationPattern, ChangeIconComponent, FormGroupComponent, MessagesComponent, MessageDirective, C8yTranslatePipe, DocsService, NavigatorService, sortByPriority, DashboardChildComponent, AppSwitcherService, AppHrefPipe, HumanizeAppNamePipe, AppIconComponent, EmptyStateComponent, IconDirective, FormsModule, ListGroupModule, DynamicFormsModule, C8yTranslateModule, ModalService, InterAppService, SupportedApps, Status, DashboardComponent } from '@c8y/ngx-components';
@@ -13,7 +14,7 @@ import * as i4$1 from 'ngx-bootstrap/collapse';
13
14
  import { CollapseModule } from 'ngx-bootstrap/collapse';
14
15
  import { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';
15
16
  import * as i1 from '@angular/forms';
16
- import { FormBuilder, Validators, ReactiveFormsModule, NgForm, FormsModule as FormsModule$1 } from '@angular/forms';
17
+ import { FormBuilder, Validators, ReactiveFormsModule, NgForm, ControlContainer } from '@angular/forms';
17
18
  import { IconSelectorService } from '@c8y/ngx-components/icon-selector';
18
19
  import { combineLatest, of, take, firstValueFrom, Subject, switchMap as switchMap$1, takeUntil, lastValueFrom, forkJoin } from 'rxjs';
19
20
  import { isEmpty } from 'lodash';
@@ -537,7 +538,7 @@ class QuickLinksWidgetViewComponent {
537
538
  : this.dashboardChild['data']?.name;
538
539
  }
539
540
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QuickLinksWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
540
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: QuickLinksWidgetViewComponent, isStandalone: true, selector: "c8y-quick-links-widget-view", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, isPreview: { classPropertyName: "isPreview", publicName: "isPreview", isSignal: true, isRequired: false, transformFunction: null } }, providers: [AppHrefPipe, HumanizeAppNamePipe, RelativeUrlParserPipe], ngImport: i0, template: "@let links = config().links;\n@let pointerNoneStylesPreview = isPreview() ? { 'pointer-events': 'none' } : null;\n\n@if (config().displayOption === DisplayOption.GRID) {\n @if (links?.length) {\n <div class=\"card-group-block interact-grid border-top m-b-0\">\n @for (link of links; track link) {\n @let linkLabel = config().translateLinkLabels ? (link.label | translate) : link.label;\n <a\n class=\"card card--btn pointer\"\n [ngStyle]=\"pointerNoneStylesPreview\"\n [title]=\"linkLabel\"\n [ngClass]=\"{\n disabled: isPreview()\n }\"\n data-cy=\"c8y-quick-links-widget-view--quick-link-card\"\n [attr.role]=\"isPreview() ? null : 'button'\"\n [target]=\"!isPreview() && link.newTab ? '_blank' : '_self'\"\n [attr.rel]=\"isPreview() ? null : 'noopener noreferrer'\"\n [attr.href]=\"isPreview() ? null : (link.url | relativeUrlParser)\"\n >\n @if (link.newTab && !isPreview()) {\n <div\n class=\"card-actions showOnHover\"\n title=\"{{ 'Open in new tab' | translate }}\"\n >\n <span class=\"dropdown-toggle c8y-dropdown\">\n <i c8yIcon=\"external-link\"></i>\n </span>\n </div>\n }\n\n <div class=\"card-block text-center\">\n <div class=\"icon-32\">\n @if (link.icon) {\n <i\n class=\"c8y-icon-duocolor\"\n [c8yIcon]=\"link.icon\"\n ></i>\n } @else {\n <c8y-app-icon\n [name]=\"link.app.name\"\n [app]=\"link.app\"\n [contextPath]=\"link.app.contextPath\"\n ></c8y-app-icon>\n }\n </div>\n <small class=\"text-muted\">\n {{ linkLabel }}\n </small>\n </div>\n </a>\n }\n </div>\n } @else {\n <c8y-ui-empty-state\n [icon]=\"DEFAULT_QUICK_LINK_ICON\"\n [title]=\"'No quick links to display.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n }\n} @else {\n @if (links?.length) {\n <div class=\"separator-top\">\n @for (link of links; track link) {\n @let linkLabel = config().translateLinkLabels ? (link.label | translate) : link.label;\n <a\n class=\"d-flex a-i-center btn-clean gap-8 p-16 text-truncate separator-bottom\"\n [ngStyle]=\"pointerNoneStylesPreview\"\n [title]=\"linkLabel\"\n data-cy=\"c8y-quick-links-widget-view--quick-link-list-item\"\n [attr.role]=\"isPreview() ? null : 'button'\"\n [target]=\"!isPreview() && link.newTab ? '_blank' : '_self'\"\n [attr.rel]=\"isPreview() ? null : 'noopener noreferrer'\"\n [attr.href]=\"isPreview() ? null : (link.url | relativeUrlParser)\"\n >\n @if (link.icon) {\n <i\n class=\"c8y-icon-duocolor icon-24\"\n [c8yIcon]=\"link.icon\"\n ></i>\n } @else {\n <c8y-app-icon\n [name]=\"link.app.name\"\n [app]=\"link.app\"\n [contextPath]=\"link.app.contextPath\"\n ></c8y-app-icon>\n }\n\n <span\n class=\"text-truncate\"\n [title]=\"linkLabel\"\n >\n {{ linkLabel }}\n </span>\n @if (link.newTab) {\n <i\n class=\"text-muted m-l-auto showOnHover\"\n [c8yIcon]=\"'external-link'\"\n title=\"{{ 'Open in new tab' | translate }}\"\n ></i>\n }\n </a>\n }\n </div>\n } @else {\n <c8y-ui-empty-state\n [icon]=\"DEFAULT_QUICK_LINK_ICON\"\n [title]=\"'No quick links to display.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: RelativeUrlParserPipe, name: "relativeUrlParser" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
541
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: QuickLinksWidgetViewComponent, isStandalone: true, selector: "c8y-quick-links-widget-view", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, isPreview: { classPropertyName: "isPreview", publicName: "isPreview", isSignal: true, isRequired: false, transformFunction: null } }, providers: [AppHrefPipe, HumanizeAppNamePipe, RelativeUrlParserPipe], ngImport: i0, template: "@let links = config().links;\n@let pointerNoneStylesPreview = isPreview() ? { 'pointer-events': 'none' } : null;\n\n@if (config().displayOption === DisplayOption.GRID) {\n @if (links?.length) {\n <div class=\"card-group-block interact-grid border-top m-b-0\">\n @for (link of links; track $index) {\n @let linkLabel = config().translateLinkLabels ? (link.label | translate) : link.label;\n <a\n class=\"card card--btn pointer\"\n [ngStyle]=\"pointerNoneStylesPreview\"\n [title]=\"linkLabel\"\n [ngClass]=\"{\n disabled: isPreview()\n }\"\n data-cy=\"c8y-quick-links-widget-view--quick-link-card\"\n [attr.role]=\"isPreview() ? null : 'button'\"\n [target]=\"!isPreview() && link.newTab ? '_blank' : '_self'\"\n [attr.rel]=\"isPreview() ? null : 'noopener noreferrer'\"\n [attr.href]=\"isPreview() ? null : (link.url | relativeUrlParser)\"\n >\n @if (link.newTab && !isPreview()) {\n <div\n class=\"card-actions showOnHover\"\n title=\"{{ 'Open in new tab' | translate }}\"\n >\n <span class=\"dropdown-toggle c8y-dropdown\">\n <i c8yIcon=\"external-link\"></i>\n </span>\n </div>\n }\n\n <div class=\"card-block text-center\">\n <div class=\"icon-32\">\n @if (link.icon) {\n <i\n class=\"c8y-icon-duocolor\"\n [c8yIcon]=\"link.icon\"\n ></i>\n } @else {\n <c8y-app-icon\n [name]=\"link.app.name\"\n [app]=\"link.app\"\n [contextPath]=\"link.app.contextPath\"\n ></c8y-app-icon>\n }\n </div>\n <small class=\"text-muted\">\n {{ linkLabel }}\n </small>\n </div>\n </a>\n }\n </div>\n } @else {\n <c8y-ui-empty-state\n [icon]=\"DEFAULT_QUICK_LINK_ICON\"\n [title]=\"'No quick links to display.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n }\n} @else {\n @if (links?.length) {\n <div class=\"separator-top\">\n @for (link of links; track $index) {\n @let linkLabel = config().translateLinkLabels ? (link.label | translate) : link.label;\n <a\n class=\"d-flex a-i-center btn-clean gap-8 p-16 text-truncate separator-bottom\"\n [ngStyle]=\"pointerNoneStylesPreview\"\n [title]=\"linkLabel\"\n data-cy=\"c8y-quick-links-widget-view--quick-link-list-item\"\n [attr.role]=\"isPreview() ? null : 'button'\"\n [target]=\"!isPreview() && link.newTab ? '_blank' : '_self'\"\n [attr.rel]=\"isPreview() ? null : 'noopener noreferrer'\"\n [attr.href]=\"isPreview() ? null : (link.url | relativeUrlParser)\"\n >\n @if (link.icon) {\n <i\n class=\"c8y-icon-duocolor icon-24\"\n [c8yIcon]=\"link.icon\"\n ></i>\n } @else {\n <c8y-app-icon\n [name]=\"link.app.name\"\n [app]=\"link.app\"\n [contextPath]=\"link.app.contextPath\"\n ></c8y-app-icon>\n }\n\n <span\n class=\"text-truncate\"\n [title]=\"linkLabel\"\n >\n {{ linkLabel }}\n </span>\n @if (link.newTab) {\n <i\n class=\"text-muted m-l-auto showOnHover\"\n [c8yIcon]=\"'external-link'\"\n title=\"{{ 'Open in new tab' | translate }}\"\n ></i>\n }\n </a>\n }\n </div>\n } @else {\n <c8y-ui-empty-state\n [icon]=\"DEFAULT_QUICK_LINK_ICON\"\n [title]=\"'No quick links to display.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: RelativeUrlParserPipe, name: "relativeUrlParser" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
541
542
  }
542
543
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QuickLinksWidgetViewComponent, decorators: [{
543
544
  type: Component,
@@ -548,7 +549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
548
549
  EmptyStateComponent,
549
550
  IconDirective,
550
551
  C8yTranslatePipe
551
- ], providers: [AppHrefPipe, HumanizeAppNamePipe, RelativeUrlParserPipe], template: "@let links = config().links;\n@let pointerNoneStylesPreview = isPreview() ? { 'pointer-events': 'none' } : null;\n\n@if (config().displayOption === DisplayOption.GRID) {\n @if (links?.length) {\n <div class=\"card-group-block interact-grid border-top m-b-0\">\n @for (link of links; track link) {\n @let linkLabel = config().translateLinkLabels ? (link.label | translate) : link.label;\n <a\n class=\"card card--btn pointer\"\n [ngStyle]=\"pointerNoneStylesPreview\"\n [title]=\"linkLabel\"\n [ngClass]=\"{\n disabled: isPreview()\n }\"\n data-cy=\"c8y-quick-links-widget-view--quick-link-card\"\n [attr.role]=\"isPreview() ? null : 'button'\"\n [target]=\"!isPreview() && link.newTab ? '_blank' : '_self'\"\n [attr.rel]=\"isPreview() ? null : 'noopener noreferrer'\"\n [attr.href]=\"isPreview() ? null : (link.url | relativeUrlParser)\"\n >\n @if (link.newTab && !isPreview()) {\n <div\n class=\"card-actions showOnHover\"\n title=\"{{ 'Open in new tab' | translate }}\"\n >\n <span class=\"dropdown-toggle c8y-dropdown\">\n <i c8yIcon=\"external-link\"></i>\n </span>\n </div>\n }\n\n <div class=\"card-block text-center\">\n <div class=\"icon-32\">\n @if (link.icon) {\n <i\n class=\"c8y-icon-duocolor\"\n [c8yIcon]=\"link.icon\"\n ></i>\n } @else {\n <c8y-app-icon\n [name]=\"link.app.name\"\n [app]=\"link.app\"\n [contextPath]=\"link.app.contextPath\"\n ></c8y-app-icon>\n }\n </div>\n <small class=\"text-muted\">\n {{ linkLabel }}\n </small>\n </div>\n </a>\n }\n </div>\n } @else {\n <c8y-ui-empty-state\n [icon]=\"DEFAULT_QUICK_LINK_ICON\"\n [title]=\"'No quick links to display.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n }\n} @else {\n @if (links?.length) {\n <div class=\"separator-top\">\n @for (link of links; track link) {\n @let linkLabel = config().translateLinkLabels ? (link.label | translate) : link.label;\n <a\n class=\"d-flex a-i-center btn-clean gap-8 p-16 text-truncate separator-bottom\"\n [ngStyle]=\"pointerNoneStylesPreview\"\n [title]=\"linkLabel\"\n data-cy=\"c8y-quick-links-widget-view--quick-link-list-item\"\n [attr.role]=\"isPreview() ? null : 'button'\"\n [target]=\"!isPreview() && link.newTab ? '_blank' : '_self'\"\n [attr.rel]=\"isPreview() ? null : 'noopener noreferrer'\"\n [attr.href]=\"isPreview() ? null : (link.url | relativeUrlParser)\"\n >\n @if (link.icon) {\n <i\n class=\"c8y-icon-duocolor icon-24\"\n [c8yIcon]=\"link.icon\"\n ></i>\n } @else {\n <c8y-app-icon\n [name]=\"link.app.name\"\n [app]=\"link.app\"\n [contextPath]=\"link.app.contextPath\"\n ></c8y-app-icon>\n }\n\n <span\n class=\"text-truncate\"\n [title]=\"linkLabel\"\n >\n {{ linkLabel }}\n </span>\n @if (link.newTab) {\n <i\n class=\"text-muted m-l-auto showOnHover\"\n [c8yIcon]=\"'external-link'\"\n title=\"{{ 'Open in new tab' | translate }}\"\n ></i>\n }\n </a>\n }\n </div>\n } @else {\n <c8y-ui-empty-state\n [icon]=\"DEFAULT_QUICK_LINK_ICON\"\n [title]=\"'No quick links to display.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n }\n}\n" }]
552
+ ], providers: [AppHrefPipe, HumanizeAppNamePipe, RelativeUrlParserPipe], template: "@let links = config().links;\n@let pointerNoneStylesPreview = isPreview() ? { 'pointer-events': 'none' } : null;\n\n@if (config().displayOption === DisplayOption.GRID) {\n @if (links?.length) {\n <div class=\"card-group-block interact-grid border-top m-b-0\">\n @for (link of links; track $index) {\n @let linkLabel = config().translateLinkLabels ? (link.label | translate) : link.label;\n <a\n class=\"card card--btn pointer\"\n [ngStyle]=\"pointerNoneStylesPreview\"\n [title]=\"linkLabel\"\n [ngClass]=\"{\n disabled: isPreview()\n }\"\n data-cy=\"c8y-quick-links-widget-view--quick-link-card\"\n [attr.role]=\"isPreview() ? null : 'button'\"\n [target]=\"!isPreview() && link.newTab ? '_blank' : '_self'\"\n [attr.rel]=\"isPreview() ? null : 'noopener noreferrer'\"\n [attr.href]=\"isPreview() ? null : (link.url | relativeUrlParser)\"\n >\n @if (link.newTab && !isPreview()) {\n <div\n class=\"card-actions showOnHover\"\n title=\"{{ 'Open in new tab' | translate }}\"\n >\n <span class=\"dropdown-toggle c8y-dropdown\">\n <i c8yIcon=\"external-link\"></i>\n </span>\n </div>\n }\n\n <div class=\"card-block text-center\">\n <div class=\"icon-32\">\n @if (link.icon) {\n <i\n class=\"c8y-icon-duocolor\"\n [c8yIcon]=\"link.icon\"\n ></i>\n } @else {\n <c8y-app-icon\n [name]=\"link.app.name\"\n [app]=\"link.app\"\n [contextPath]=\"link.app.contextPath\"\n ></c8y-app-icon>\n }\n </div>\n <small class=\"text-muted\">\n {{ linkLabel }}\n </small>\n </div>\n </a>\n }\n </div>\n } @else {\n <c8y-ui-empty-state\n [icon]=\"DEFAULT_QUICK_LINK_ICON\"\n [title]=\"'No quick links to display.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n }\n} @else {\n @if (links?.length) {\n <div class=\"separator-top\">\n @for (link of links; track $index) {\n @let linkLabel = config().translateLinkLabels ? (link.label | translate) : link.label;\n <a\n class=\"d-flex a-i-center btn-clean gap-8 p-16 text-truncate separator-bottom\"\n [ngStyle]=\"pointerNoneStylesPreview\"\n [title]=\"linkLabel\"\n data-cy=\"c8y-quick-links-widget-view--quick-link-list-item\"\n [attr.role]=\"isPreview() ? null : 'button'\"\n [target]=\"!isPreview() && link.newTab ? '_blank' : '_self'\"\n [attr.rel]=\"isPreview() ? null : 'noopener noreferrer'\"\n [attr.href]=\"isPreview() ? null : (link.url | relativeUrlParser)\"\n >\n @if (link.icon) {\n <i\n class=\"c8y-icon-duocolor icon-24\"\n [c8yIcon]=\"link.icon\"\n ></i>\n } @else {\n <c8y-app-icon\n [name]=\"link.app.name\"\n [app]=\"link.app\"\n [contextPath]=\"link.app.contextPath\"\n ></c8y-app-icon>\n }\n\n <span\n class=\"text-truncate\"\n [title]=\"linkLabel\"\n >\n {{ linkLabel }}\n </span>\n @if (link.newTab) {\n <i\n class=\"text-muted m-l-auto showOnHover\"\n [c8yIcon]=\"'external-link'\"\n title=\"{{ 'Open in new tab' | translate }}\"\n ></i>\n }\n </a>\n }\n </div>\n } @else {\n <c8y-ui-empty-state\n [icon]=\"DEFAULT_QUICK_LINK_ICON\"\n [title]=\"'No quick links to display.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n }\n}\n" }]
552
553
  }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], isPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPreview", required: false }] }] } });
553
554
 
554
555
  class QuickLinksWidgetConfigListComponent {
@@ -560,8 +561,13 @@ class QuickLinksWidgetConfigListComponent {
560
561
  this.iconSelector = inject(IconSelectorService);
561
562
  }
562
563
  drop(event) {
564
+ const formArray = this.quickLinksFormArray();
565
+ // Reorder through the FormArray API so the same control instances are preserved
566
+ // (stable `@for` identity) and value/validity/valueChanges stay in sync for the preview.
567
+ const control = formArray.at(event.previousIndex);
568
+ formArray.removeAt(event.previousIndex);
569
+ formArray.insert(event.currentIndex, control);
563
570
  moveItemInArray(this.config().links, event.previousIndex, event.currentIndex);
564
- moveItemInArray(this.quickLinksFormArray().controls, event.previousIndex, event.currentIndex);
565
571
  }
566
572
  async changeLinkIcon(linkForm) {
567
573
  try {
@@ -613,7 +619,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
613
619
  class QuickLinksWidgetConfigComponent {
614
620
  constructor() {
615
621
  this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
616
- this.selectedDisplayOption = DEFAULT_DISPLAY_OPTION_VALUE;
617
622
  this.appsNameChanged = signal([], ...(ngDevMode ? [{ debugName: "appsNameChanged" }] : /* istanbul ignore next */ []));
618
623
  this.addLinkIsCollapsed = true;
619
624
  this.destroy$ = new Subject();
@@ -628,7 +633,24 @@ class QuickLinksWidgetConfigComponent {
628
633
  this.formBuilder = inject(FormBuilder);
629
634
  this.translateService = inject(TranslateService);
630
635
  this.widgetConfigService = inject(WidgetConfigService);
631
- this.parentForm = inject(NgForm, { optional: true });
636
+ this.form = inject(NgForm);
637
+ this.quickLinksForm = this.initForm();
638
+ /** Live snapshot of the config form value; single source of truth for the preview. */
639
+ this.formValue = toSignal(this.quickLinksForm.valueChanges, {
640
+ initialValue: this.quickLinksForm.getRawValue()
641
+ });
642
+ /**
643
+ * Preview config derived purely from the form. Recomputes automatically on any
644
+ * form change (links, order, display option, translate toggle) — no manual refresh.
645
+ */
646
+ this.previewConfig = computed(() => {
647
+ const value = this.formValue();
648
+ return {
649
+ links: (value?.quickLinks ?? []),
650
+ displayOption: (value?.displayOption ?? DEFAULT_DISPLAY_OPTION_VALUE),
651
+ translateLinkLabels: value?.translateLinkLabels ?? false
652
+ };
653
+ }, ...(ngDevMode ? [{ debugName: "previewConfig" }] : /* istanbul ignore next */ []));
632
654
  }
633
655
  set previewSet(template) {
634
656
  if (template) {
@@ -640,15 +662,19 @@ class QuickLinksWidgetConfigComponent {
640
662
  get quickLinksFormArray() {
641
663
  return this.quickLinksForm.get('quickLinks');
642
664
  }
665
+ get displayOptionControl() {
666
+ return this.quickLinksForm.get('displayOption');
667
+ }
668
+ get translateLinkLabelsControl() {
669
+ return this.quickLinksForm.get('translateLinkLabels');
670
+ }
643
671
  ngOnInit() {
644
672
  this.onInitConfig();
645
673
  }
646
674
  ngOnDestroy() {
647
675
  this.destroy$.next();
648
676
  this.destroy$.complete();
649
- if (this.parentForm) {
650
- this.parentForm.form.removeControl('quickLinks');
651
- }
677
+ this.form.form.removeControl('quickLinks');
652
678
  }
653
679
  getQuickLinks() {
654
680
  return this.quickLinksForm.getRawValue().quickLinks;
@@ -672,10 +698,15 @@ class QuickLinksWidgetConfigComponent {
672
698
  this.config().links = this.getQuickLinks();
673
699
  }
674
700
  async onBeforeSave(config) {
701
+ if (!this.quickLinksForm.valid) {
702
+ return false;
703
+ }
675
704
  try {
676
705
  await this.confirmAppIconChanges();
706
+ const { displayOption, translateLinkLabels } = this.quickLinksForm.getRawValue();
677
707
  config.links = this.getQuickLinks();
678
- config.displayOption = this.selectedDisplayOption;
708
+ config.displayOption = displayOption;
709
+ config.translateLinkLabels = translateLinkLabels;
679
710
  return true;
680
711
  }
681
712
  catch {
@@ -696,7 +727,7 @@ class QuickLinksWidgetConfigComponent {
696
727
  .subscribe(quickLinks => (this.config().links = quickLinks));
697
728
  }
698
729
  resetLinks() {
699
- this.quickLinksForm = this.initForm();
730
+ this.quickLinksFormArray.clear();
700
731
  this.assignLinksToConfig();
701
732
  this.config().links.forEach(link => this.addQuickLink(link));
702
733
  }
@@ -705,18 +736,14 @@ class QuickLinksWidgetConfigComponent {
705
736
  if (!this.config().links) {
706
737
  this.assignLinksToConfig();
707
738
  }
739
+ this.quickLinksForm.patchValue({
740
+ displayOption: this.config().displayOption ?? DEFAULT_DISPLAY_OPTION_VALUE,
741
+ translateLinkLabels: this.config().translateLinkLabels ?? false
742
+ });
708
743
  this.config().links.forEach(link => this.addQuickLink(link));
709
- if (!this.config().displayOption) {
710
- this.config().displayOption = this.selectedDisplayOption;
711
- return;
712
- }
713
- this.selectedDisplayOption = this.config().displayOption;
714
744
  }
715
745
  setupQuickLinksForm() {
716
- this.quickLinksForm = this.initForm();
717
- if (this.parentForm) {
718
- this.parentForm.form.addControl('quickLinks', this.quickLinksForm);
719
- }
746
+ this.form.form.addControl('quickLinks', this.quickLinksForm);
720
747
  }
721
748
  async confirmAppIconChanges() {
722
749
  if (this.appsNameChanged().length > 0) {
@@ -732,11 +759,13 @@ class QuickLinksWidgetConfigComponent {
732
759
  }
733
760
  initForm() {
734
761
  return this.formBuilder.group({
762
+ displayOption: [DEFAULT_DISPLAY_OPTION_VALUE],
763
+ translateLinkLabels: [false],
735
764
  quickLinks: this.formBuilder.array([])
736
765
  });
737
766
  }
738
767
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QuickLinksWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
739
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: QuickLinksWidgetConfigComponent, isStandalone: true, selector: "c8y-quick-links-widget-config", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DashboardChildComponent, DashboardComponent], viewQueries: [{ propertyName: "previewSet", first: true, predicate: ["quickLinksPreview"], descendants: true }], ngImport: i0, template: "<fieldset class=\"c8y-fieldset\">\n <legend>{{ 'General' | translate }}</legend>\n <div class=\"d-flex a-i-center gap-8 p-b-8\">\n <label class=\"m-b-0 text-label-small\">{{ 'Display as' | translate }}</label>\n <div class=\"c8y-select-wrapper form-group-sm\">\n <select\n class=\"form-control\"\n title=\"{{ 'Refresh options`options for refreshing a view`' | translate }}\"\n [(ngModel)]=\"selectedDisplayOption\"\n >\n <option [value]=\"DisplayOption.GRID\">\n {{ DisplayOption.GRID | translate }}\n </option>\n <option [value]=\"DisplayOption.LIST\">\n {{ DisplayOption.LIST | translate }}\n </option>\n </select>\n </div>\n <label\n class=\"c8y-checkbox m-l-auto\"\n title=\"{{ 'Translate labels if possible' | translate }}\"\n >\n <input\n type=\"checkbox\"\n [(ngModel)]=\"config().translateLinkLabels\"\n />\n <span></span>\n <span>{{ 'Translate labels if possible' | translate }}</span>\n </label>\n </div>\n</fieldset>\n\n<fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Links' | translate }}</legend>\n <div class=\"d-flex a-i-center gap-8 p-b-8\">\n <button\n class=\"btn btn-clean btn-sm\"\n title=\"{{ 'Add a quick link' | translate }}\"\n type=\"button\"\n (click)=\"addLinkIsCollapsed = !addLinkIsCollapsed\"\n >\n <i [c8yIcon]=\"'plus-circle'\"></i>\n {{ 'Add a quick link' | translate }}\n </button>\n\n <button\n class=\"btn btn-clean btn-sm\"\n title=\"{{ 'Reset links' | translate }}\"\n [popover]=\"confirmPopover\"\n placement=\"bottom\"\n container=\"body\"\n type=\"button\"\n [adaptivePosition]=\"false\"\n [outsideClick]=\"true\"\n #pop=\"bs-popover\"\n >\n <i [c8yIcon]=\"'reset'\"></i>\n {{ 'Reset links' | translate }}\n </button>\n <ng-template #confirmPopover>\n <p class=\"m-b-8\">\n {{\n 'Resetting links removes all custom links and resets the widget to its default state.'\n | translate\n }}\n </p>\n <button\n class=\"btn btn-default btn-sm\"\n (click)=\"pop.hide()\"\n >\n {{ 'Cancel' | translate }}\n </button>\n <button\n class=\"btn btn-primary btn-sm\"\n (click)=\"resetLinks(); pop.hide()\"\n >\n {{ 'Reset links' | translate }}\n </button>\n </ng-template>\n </div>\n <div\n class=\"collapse bg.component\"\n #collapse=\"bs-collapse\"\n [collapse]=\"addLinkIsCollapsed\"\n [isAnimated]=\"true\"\n >\n <fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Add a quick link' | translate }}</legend>\n <c8y-quick-links-widget-config-add-link\n class=\"d-block p-b-16 p-l-8 p-r-8\"\n (onQuickLinkCreated)=\"addQuickLink($event); addLinkIsCollapsed = true\"\n (onCancel)=\"addLinkIsCollapsed = true\"\n ></c8y-quick-links-widget-config-add-link>\n </fieldset>\n </div>\n\n @if (config().links.length) {\n <c8y-quick-links-widget-config-list\n class=\"separator-top\"\n [quickLinksForm]=\"quickLinksForm\"\n [config]=\"config()\"\n [quickLinksFormArray]=\"quickLinksFormArray\"\n [appsNameChanged]=\"appsNameChanged\"\n ></c8y-quick-links-widget-config-list>\n } @else {\n <c8y-ui-empty-state\n [icon]=\"DEFAULT_QUICK_LINK_ICON\"\n [title]=\"'No quick links to display' | translate\"\n [horizontal]=\"true\"\n >\n <div>\n <button\n class=\"btn btn-primary m-t-16\"\n title=\"{{ 'Reset links' | translate }}\"\n type=\"button\"\n (click)=\"resetLinks()\"\n translate\n >\n Reset links\n </button>\n </div>\n </c8y-ui-empty-state>\n }\n</fieldset>\n\n<ng-template #quickLinksPreview>\n <c8y-quick-links-widget-view\n [config]=\"{\n links: getQuickLinks(),\n displayOption: selectedDisplayOption,\n translateLinkLabels: config().translateLinkLabels\n }\"\n [isPreview]=\"true\"\n ></c8y-quick-links-widget-view>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: QuickLinksWidgetConfigAddLinkComponent, selector: "c8y-quick-links-widget-config-add-link", outputs: ["onQuickLinkCreated", "onCancel"] }, { kind: "component", type: QuickLinksWidgetViewComponent, selector: "c8y-quick-links-widget-view", inputs: ["config", "isPreview"] }, { kind: "component", type: QuickLinksWidgetConfigListComponent, selector: "c8y-quick-links-widget-config-list", inputs: ["quickLinksForm", "config", "quickLinksFormArray", "appsNameChanged"] }, { kind: "ngmodule", type: C8yTranslateModule }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i4$1.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
768
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: QuickLinksWidgetConfigComponent, isStandalone: true, selector: "c8y-quick-links-widget-config", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DashboardChildComponent, DashboardComponent], viewQueries: [{ propertyName: "previewSet", first: true, predicate: ["quickLinksPreview"], descendants: true }], ngImport: i0, template: "<fieldset class=\"c8y-fieldset\">\n <legend>{{ 'General' | translate }}</legend>\n <div class=\"d-flex a-i-center gap-8 p-b-8\">\n <label class=\"m-b-0 text-label-small\">{{ 'Display as' | translate }}</label>\n <div class=\"c8y-select-wrapper form-group-sm\">\n <select\n class=\"form-control\"\n title=\"{{ 'Refresh options`options for refreshing a view`' | translate }}\"\n [formControl]=\"displayOptionControl\"\n >\n <option [value]=\"DisplayOption.GRID\">\n {{ DisplayOption.GRID | translate }}\n </option>\n <option [value]=\"DisplayOption.LIST\">\n {{ DisplayOption.LIST | translate }}\n </option>\n </select>\n </div>\n <label\n class=\"c8y-checkbox m-l-auto\"\n title=\"{{ 'Translate labels if possible' | translate }}\"\n >\n <input\n type=\"checkbox\"\n [formControl]=\"translateLinkLabelsControl\"\n />\n <span></span>\n <span>{{ 'Translate labels if possible' | translate }}</span>\n </label>\n </div>\n</fieldset>\n\n<fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Links' | translate }}</legend>\n <div class=\"d-flex a-i-center gap-8 p-b-8\">\n <button\n class=\"btn btn-clean btn-sm\"\n title=\"{{ 'Add a quick link' | translate }}\"\n type=\"button\"\n (click)=\"addLinkIsCollapsed = !addLinkIsCollapsed\"\n >\n <i [c8yIcon]=\"'plus-circle'\"></i>\n {{ 'Add a quick link' | translate }}\n </button>\n\n <button\n class=\"btn btn-clean btn-sm\"\n title=\"{{ 'Reset links' | translate }}\"\n [popover]=\"confirmPopover\"\n placement=\"bottom\"\n container=\"body\"\n type=\"button\"\n [adaptivePosition]=\"false\"\n [outsideClick]=\"true\"\n #pop=\"bs-popover\"\n >\n <i [c8yIcon]=\"'reset'\"></i>\n {{ 'Reset links' | translate }}\n </button>\n <ng-template #confirmPopover>\n <p class=\"m-b-8\">\n {{\n 'Resetting links removes all custom links and resets the widget to its default state.'\n | translate\n }}\n </p>\n <button\n class=\"btn btn-default btn-sm\"\n (click)=\"pop.hide()\"\n >\n {{ 'Cancel' | translate }}\n </button>\n <button\n class=\"btn btn-primary btn-sm\"\n (click)=\"resetLinks(); pop.hide()\"\n >\n {{ 'Reset links' | translate }}\n </button>\n </ng-template>\n </div>\n <div\n class=\"collapse bg.component\"\n #collapse=\"bs-collapse\"\n [collapse]=\"addLinkIsCollapsed\"\n [isAnimated]=\"true\"\n >\n <fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Add a quick link' | translate }}</legend>\n <c8y-quick-links-widget-config-add-link\n class=\"d-block p-b-16 p-l-8 p-r-8\"\n (onQuickLinkCreated)=\"addQuickLink($event); addLinkIsCollapsed = true\"\n (onCancel)=\"addLinkIsCollapsed = true\"\n ></c8y-quick-links-widget-config-add-link>\n </fieldset>\n </div>\n\n @if (config().links.length) {\n <c8y-quick-links-widget-config-list\n class=\"separator-top\"\n [quickLinksForm]=\"quickLinksForm\"\n [config]=\"config()\"\n [quickLinksFormArray]=\"quickLinksFormArray\"\n [appsNameChanged]=\"appsNameChanged\"\n ></c8y-quick-links-widget-config-list>\n } @else {\n <c8y-ui-empty-state\n [icon]=\"DEFAULT_QUICK_LINK_ICON\"\n [title]=\"'No quick links to display' | translate\"\n [horizontal]=\"true\"\n >\n <div>\n <button\n class=\"btn btn-primary m-t-16\"\n title=\"{{ 'Reset links' | translate }}\"\n type=\"button\"\n (click)=\"resetLinks()\"\n translate\n >\n Reset links\n </button>\n </div>\n </c8y-ui-empty-state>\n }\n</fieldset>\n\n<ng-template #quickLinksPreview>\n <c8y-quick-links-widget-view\n [config]=\"previewConfig()\"\n [isPreview]=\"true\"\n ></c8y-quick-links-widget-view>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: QuickLinksWidgetConfigAddLinkComponent, selector: "c8y-quick-links-widget-config-add-link", outputs: ["onQuickLinkCreated", "onCancel"] }, { kind: "component", type: QuickLinksWidgetViewComponent, selector: "c8y-quick-links-widget-view", inputs: ["config", "isPreview"] }, { kind: "component", type: QuickLinksWidgetConfigListComponent, selector: "c8y-quick-links-widget-config-list", inputs: ["quickLinksForm", "config", "quickLinksFormArray", "appsNameChanged"] }, { kind: "ngmodule", type: C8yTranslateModule }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i4$1.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
740
769
  }
741
770
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QuickLinksWidgetConfigComponent, decorators: [{
742
771
  type: Component,
@@ -749,10 +778,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
749
778
  QuickLinksWidgetConfigListComponent,
750
779
  C8yTranslateModule,
751
780
  EmptyStateComponent,
752
- FormsModule$1,
781
+ ReactiveFormsModule,
753
782
  IconDirective,
754
783
  CollapseModule
755
- ], providers: [DashboardChildComponent, DashboardComponent], template: "<fieldset class=\"c8y-fieldset\">\n <legend>{{ 'General' | translate }}</legend>\n <div class=\"d-flex a-i-center gap-8 p-b-8\">\n <label class=\"m-b-0 text-label-small\">{{ 'Display as' | translate }}</label>\n <div class=\"c8y-select-wrapper form-group-sm\">\n <select\n class=\"form-control\"\n title=\"{{ 'Refresh options`options for refreshing a view`' | translate }}\"\n [(ngModel)]=\"selectedDisplayOption\"\n >\n <option [value]=\"DisplayOption.GRID\">\n {{ DisplayOption.GRID | translate }}\n </option>\n <option [value]=\"DisplayOption.LIST\">\n {{ DisplayOption.LIST | translate }}\n </option>\n </select>\n </div>\n <label\n class=\"c8y-checkbox m-l-auto\"\n title=\"{{ 'Translate labels if possible' | translate }}\"\n >\n <input\n type=\"checkbox\"\n [(ngModel)]=\"config().translateLinkLabels\"\n />\n <span></span>\n <span>{{ 'Translate labels if possible' | translate }}</span>\n </label>\n </div>\n</fieldset>\n\n<fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Links' | translate }}</legend>\n <div class=\"d-flex a-i-center gap-8 p-b-8\">\n <button\n class=\"btn btn-clean btn-sm\"\n title=\"{{ 'Add a quick link' | translate }}\"\n type=\"button\"\n (click)=\"addLinkIsCollapsed = !addLinkIsCollapsed\"\n >\n <i [c8yIcon]=\"'plus-circle'\"></i>\n {{ 'Add a quick link' | translate }}\n </button>\n\n <button\n class=\"btn btn-clean btn-sm\"\n title=\"{{ 'Reset links' | translate }}\"\n [popover]=\"confirmPopover\"\n placement=\"bottom\"\n container=\"body\"\n type=\"button\"\n [adaptivePosition]=\"false\"\n [outsideClick]=\"true\"\n #pop=\"bs-popover\"\n >\n <i [c8yIcon]=\"'reset'\"></i>\n {{ 'Reset links' | translate }}\n </button>\n <ng-template #confirmPopover>\n <p class=\"m-b-8\">\n {{\n 'Resetting links removes all custom links and resets the widget to its default state.'\n | translate\n }}\n </p>\n <button\n class=\"btn btn-default btn-sm\"\n (click)=\"pop.hide()\"\n >\n {{ 'Cancel' | translate }}\n </button>\n <button\n class=\"btn btn-primary btn-sm\"\n (click)=\"resetLinks(); pop.hide()\"\n >\n {{ 'Reset links' | translate }}\n </button>\n </ng-template>\n </div>\n <div\n class=\"collapse bg.component\"\n #collapse=\"bs-collapse\"\n [collapse]=\"addLinkIsCollapsed\"\n [isAnimated]=\"true\"\n >\n <fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Add a quick link' | translate }}</legend>\n <c8y-quick-links-widget-config-add-link\n class=\"d-block p-b-16 p-l-8 p-r-8\"\n (onQuickLinkCreated)=\"addQuickLink($event); addLinkIsCollapsed = true\"\n (onCancel)=\"addLinkIsCollapsed = true\"\n ></c8y-quick-links-widget-config-add-link>\n </fieldset>\n </div>\n\n @if (config().links.length) {\n <c8y-quick-links-widget-config-list\n class=\"separator-top\"\n [quickLinksForm]=\"quickLinksForm\"\n [config]=\"config()\"\n [quickLinksFormArray]=\"quickLinksFormArray\"\n [appsNameChanged]=\"appsNameChanged\"\n ></c8y-quick-links-widget-config-list>\n } @else {\n <c8y-ui-empty-state\n [icon]=\"DEFAULT_QUICK_LINK_ICON\"\n [title]=\"'No quick links to display' | translate\"\n [horizontal]=\"true\"\n >\n <div>\n <button\n class=\"btn btn-primary m-t-16\"\n title=\"{{ 'Reset links' | translate }}\"\n type=\"button\"\n (click)=\"resetLinks()\"\n translate\n >\n Reset links\n </button>\n </div>\n </c8y-ui-empty-state>\n }\n</fieldset>\n\n<ng-template #quickLinksPreview>\n <c8y-quick-links-widget-view\n [config]=\"{\n links: getQuickLinks(),\n displayOption: selectedDisplayOption,\n translateLinkLabels: config().translateLinkLabels\n }\"\n [isPreview]=\"true\"\n ></c8y-quick-links-widget-view>\n</ng-template>\n" }]
784
+ ], providers: [DashboardChildComponent, DashboardComponent], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<fieldset class=\"c8y-fieldset\">\n <legend>{{ 'General' | translate }}</legend>\n <div class=\"d-flex a-i-center gap-8 p-b-8\">\n <label class=\"m-b-0 text-label-small\">{{ 'Display as' | translate }}</label>\n <div class=\"c8y-select-wrapper form-group-sm\">\n <select\n class=\"form-control\"\n title=\"{{ 'Refresh options`options for refreshing a view`' | translate }}\"\n [formControl]=\"displayOptionControl\"\n >\n <option [value]=\"DisplayOption.GRID\">\n {{ DisplayOption.GRID | translate }}\n </option>\n <option [value]=\"DisplayOption.LIST\">\n {{ DisplayOption.LIST | translate }}\n </option>\n </select>\n </div>\n <label\n class=\"c8y-checkbox m-l-auto\"\n title=\"{{ 'Translate labels if possible' | translate }}\"\n >\n <input\n type=\"checkbox\"\n [formControl]=\"translateLinkLabelsControl\"\n />\n <span></span>\n <span>{{ 'Translate labels if possible' | translate }}</span>\n </label>\n </div>\n</fieldset>\n\n<fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Links' | translate }}</legend>\n <div class=\"d-flex a-i-center gap-8 p-b-8\">\n <button\n class=\"btn btn-clean btn-sm\"\n title=\"{{ 'Add a quick link' | translate }}\"\n type=\"button\"\n (click)=\"addLinkIsCollapsed = !addLinkIsCollapsed\"\n >\n <i [c8yIcon]=\"'plus-circle'\"></i>\n {{ 'Add a quick link' | translate }}\n </button>\n\n <button\n class=\"btn btn-clean btn-sm\"\n title=\"{{ 'Reset links' | translate }}\"\n [popover]=\"confirmPopover\"\n placement=\"bottom\"\n container=\"body\"\n type=\"button\"\n [adaptivePosition]=\"false\"\n [outsideClick]=\"true\"\n #pop=\"bs-popover\"\n >\n <i [c8yIcon]=\"'reset'\"></i>\n {{ 'Reset links' | translate }}\n </button>\n <ng-template #confirmPopover>\n <p class=\"m-b-8\">\n {{\n 'Resetting links removes all custom links and resets the widget to its default state.'\n | translate\n }}\n </p>\n <button\n class=\"btn btn-default btn-sm\"\n (click)=\"pop.hide()\"\n >\n {{ 'Cancel' | translate }}\n </button>\n <button\n class=\"btn btn-primary btn-sm\"\n (click)=\"resetLinks(); pop.hide()\"\n >\n {{ 'Reset links' | translate }}\n </button>\n </ng-template>\n </div>\n <div\n class=\"collapse bg.component\"\n #collapse=\"bs-collapse\"\n [collapse]=\"addLinkIsCollapsed\"\n [isAnimated]=\"true\"\n >\n <fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Add a quick link' | translate }}</legend>\n <c8y-quick-links-widget-config-add-link\n class=\"d-block p-b-16 p-l-8 p-r-8\"\n (onQuickLinkCreated)=\"addQuickLink($event); addLinkIsCollapsed = true\"\n (onCancel)=\"addLinkIsCollapsed = true\"\n ></c8y-quick-links-widget-config-add-link>\n </fieldset>\n </div>\n\n @if (config().links.length) {\n <c8y-quick-links-widget-config-list\n class=\"separator-top\"\n [quickLinksForm]=\"quickLinksForm\"\n [config]=\"config()\"\n [quickLinksFormArray]=\"quickLinksFormArray\"\n [appsNameChanged]=\"appsNameChanged\"\n ></c8y-quick-links-widget-config-list>\n } @else {\n <c8y-ui-empty-state\n [icon]=\"DEFAULT_QUICK_LINK_ICON\"\n [title]=\"'No quick links to display' | translate\"\n [horizontal]=\"true\"\n >\n <div>\n <button\n class=\"btn btn-primary m-t-16\"\n title=\"{{ 'Reset links' | translate }}\"\n type=\"button\"\n (click)=\"resetLinks()\"\n translate\n >\n Reset links\n </button>\n </div>\n </c8y-ui-empty-state>\n }\n</fieldset>\n\n<ng-template #quickLinksPreview>\n <c8y-quick-links-widget-view\n [config]=\"previewConfig()\"\n [isPreview]=\"true\"\n ></c8y-quick-links-widget-view>\n</ng-template>\n" }]
756
785
  }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], previewSet: [{
757
786
  type: ViewChild,
758
787
  args: ['quickLinksPreview']