npm - @c8y/ngx-components - Versions diffs - 1023.58.3 → 1023.61.0 - Mend

@c8y/ngx-components 1023.58.3 → 1023.61.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 (285) hide show

package/fesm2022/c8y-ngx-components-widgets-implementations-quick-links.mjs CHANGED Viewed

@@ -13,12 +13,12 @@ import * as i4$1 from 'ngx-bootstrap/collapse';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
 import { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';
 import * as i1 from '@angular/forms';
-import { FormBuilder, Validators, ReactiveFormsModule, FormsModule as FormsModule$1 } from '@angular/forms';
+import { FormBuilder, Validators, ReactiveFormsModule, NgForm, FormsModule as FormsModule$1 } from '@angular/forms';
 import { IconSelectorService } from '@c8y/ngx-components/icon-selector';
 import { combineLatest, of, take, firstValueFrom, Subject, switchMap as switchMap$1, lastValueFrom, forkJoin } from 'rxjs';
 import { isEmpty } from 'lodash';
-import { map, switchMap, combineLatestWith, debounceTime, takeUntil } from 'rxjs/operators';
-import { ContextDashboardService, WidgetConfigService } from '@c8y/ngx-components/context-dashboard';
+import { map, switchMap, combineLatestWith } from 'rxjs/operators';
+import { WidgetConfigService } from '@c8y/ngx-components/context-dashboard';
 import * as i3 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { TranslateService } from '@ngx-translate/core';
@@ -67,10 +67,10 @@ class QuickLinksWidgetConfigAddLinkComponent {
         };
         return this.fb.group(controls);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickLinksWidgetConfigAddLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: QuickLinksWidgetConfigAddLinkComponent, isStandalone: true, selector: "c8y-quick-links-widget-config-add-link", outputs: { onQuickLinkCreated: "onQuickLinkCreated", onCancel: "onCancel" }, ngImport: i0, template: "<form [formGroup]=\"addLinkFormGroup\">\n  <div class=\"d-flex a-i-center gap-24\">\n    <div class=\"form-group\">\n      <label>{{ 'Icon' | translate }}</label>\n      <c8y-change-icon\n        class=\"form-control\"\n        [currentIcon]=\"addLinkFormGroup.controls.icon.value\"\n        (onButtonClick)=\"changeLinkIcon()\"\n      ></c8y-change-icon>\n    </div>\n    <div class=\"form-group flex-grow\">\n      <label for=\"ql-label\">{{ 'Label' | translate }}</label>\n      <input\n        class=\"form-control\"\n        id=\"ql-label\"\n        type=\"text\"\n        formControlName=\"label\"\n        maxlength=\"50\"\n        [placeholder]=\"'e.g. my Quick Link' | translate\"\n      />\n    </div>\n  </div>\n  <div class=\"d-flex a-i-center gap-24\">\n    <div class=\"form-group flex-grow\">\n      <label for=\"ql-url\">{{ 'URL' | translate }}</label>\n      <input\n        class=\"form-control\"\n        id=\"ql-url\"\n        type=\"text\"\n        formControlName=\"url\"\n        maxlength=\"150\"\n        [placeholder]=\"'e.g. http://www.example.com' | translate\"\n      />\n    </div>\n    <div class=\"form-group flex-noshrink\">\n      <label>&nbsp;</label>\n      <label\n        class=\"c8y-checkbox\"\n        title=\"{{ 'Open the link in a new browser tab' | translate }}\"\n      >\n        <input\n          [attr.aria-label]=\"'Open in new tab' | translate\"\n          type=\"checkbox\"\n          formControlName=\"newTab\"\n          checked=\"checked\"\n        />\n        <span></span>\n        <span>{{ 'New tab' | translate }}</span>\n      </label>\n    </div>\n  </div>\n</form>\n\n<button\n  class=\"btn btn-default btn-sm\"\n  type=\"button\"\n  (click)=\"onCancel.emit()\"\n>\n  {{ 'Cancel' | translate }}\n</button>\n<button\n  class=\"btn btn-primary btn-sm\"\n  title=\"{{ 'Create a quick link' | translate }}\"\n  type=\"button\"\n  (click)=\"createQuickLink()\"\n  [disabled]=\"addLinkFormGroup.invalid\"\n>\n  {{ 'Add quick link' | translate }}\n</button>\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChangeIconComponent, selector: "c8y-change-icon", inputs: ["currentIcon"], outputs: ["onButtonClick"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuickLinksWidgetConfigAddLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: QuickLinksWidgetConfigAddLinkComponent, isStandalone: true, selector: "c8y-quick-links-widget-config-add-link", outputs: { onQuickLinkCreated: "onQuickLinkCreated", onCancel: "onCancel" }, ngImport: i0, template: "<form [formGroup]=\"addLinkFormGroup\">\n  <div class=\"d-flex a-i-center gap-24\">\n    <div class=\"form-group\">\n      <label>{{ 'Icon' | translate }}</label>\n      <c8y-change-icon\n        class=\"form-control\"\n        [currentIcon]=\"addLinkFormGroup.controls.icon.value\"\n        (onButtonClick)=\"changeLinkIcon()\"\n      ></c8y-change-icon>\n    </div>\n    <div class=\"form-group flex-grow\">\n      <label for=\"ql-label\">{{ 'Label' | translate }}</label>\n      <input\n        class=\"form-control\"\n        id=\"ql-label\"\n        type=\"text\"\n        formControlName=\"label\"\n        maxlength=\"50\"\n        [placeholder]=\"'e.g. my Quick Link' | translate\"\n      />\n    </div>\n  </div>\n  <div class=\"d-flex a-i-center gap-24\">\n    <div class=\"form-group flex-grow\">\n      <label for=\"ql-url\">{{ 'URL' | translate }}</label>\n      <input\n        class=\"form-control\"\n        id=\"ql-url\"\n        type=\"text\"\n        formControlName=\"url\"\n        maxlength=\"150\"\n        [placeholder]=\"'e.g. http://www.example.com' | translate\"\n      />\n    </div>\n    <div class=\"form-group flex-noshrink\">\n      <label>&nbsp;</label>\n      <label\n        class=\"c8y-checkbox\"\n        title=\"{{ 'Open the link in a new browser tab' | translate }}\"\n      >\n        <input\n          [attr.aria-label]=\"'Open in new tab' | translate\"\n          type=\"checkbox\"\n          formControlName=\"newTab\"\n          checked=\"checked\"\n        />\n        <span></span>\n        <span>{{ 'New tab' | translate }}</span>\n      </label>\n    </div>\n  </div>\n</form>\n\n<button\n  class=\"btn btn-default btn-sm\"\n  type=\"button\"\n  (click)=\"onCancel.emit()\"\n>\n  {{ 'Cancel' | translate }}\n</button>\n<button\n  class=\"btn btn-primary btn-sm\"\n  title=\"{{ 'Create a quick link' | translate }}\"\n  type=\"button\"\n  (click)=\"createQuickLink()\"\n  [disabled]=\"addLinkFormGroup.invalid\"\n>\n  {{ 'Add quick link' | translate }}\n</button>\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChangeIconComponent, selector: "c8y-change-icon", inputs: ["currentIcon"], outputs: ["onButtonClick"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickLinksWidgetConfigAddLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuickLinksWidgetConfigAddLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-quick-links-widget-config-add-link', imports: [TooltipModule, C8yTranslatePipe, ReactiveFormsModule, ChangeIconComponent], template: "<form [formGroup]=\"addLinkFormGroup\">\n  <div class=\"d-flex a-i-center gap-24\">\n    <div class=\"form-group\">\n      <label>{{ 'Icon' | translate }}</label>\n      <c8y-change-icon\n        class=\"form-control\"\n        [currentIcon]=\"addLinkFormGroup.controls.icon.value\"\n        (onButtonClick)=\"changeLinkIcon()\"\n      ></c8y-change-icon>\n    </div>\n    <div class=\"form-group flex-grow\">\n      <label for=\"ql-label\">{{ 'Label' | translate }}</label>\n      <input\n        class=\"form-control\"\n        id=\"ql-label\"\n        type=\"text\"\n        formControlName=\"label\"\n        maxlength=\"50\"\n        [placeholder]=\"'e.g. my Quick Link' | translate\"\n      />\n    </div>\n  </div>\n  <div class=\"d-flex a-i-center gap-24\">\n    <div class=\"form-group flex-grow\">\n      <label for=\"ql-url\">{{ 'URL' | translate }}</label>\n      <input\n        class=\"form-control\"\n        id=\"ql-url\"\n        type=\"text\"\n        formControlName=\"url\"\n        maxlength=\"150\"\n        [placeholder]=\"'e.g. http://www.example.com' | translate\"\n      />\n    </div>\n    <div class=\"form-group flex-noshrink\">\n      <label>&nbsp;</label>\n      <label\n        class=\"c8y-checkbox\"\n        title=\"{{ 'Open the link in a new browser tab' | translate }}\"\n      >\n        <input\n          [attr.aria-label]=\"'Open in new tab' | translate\"\n          type=\"checkbox\"\n          formControlName=\"newTab\"\n          checked=\"checked\"\n        />\n        <span></span>\n        <span>{{ 'New tab' | translate }}</span>\n      </label>\n    </div>\n  </div>\n</form>\n\n<button\n  class=\"btn btn-default btn-sm\"\n  type=\"button\"\n  (click)=\"onCancel.emit()\"\n>\n  {{ 'Cancel' | translate }}\n</button>\n<button\n  class=\"btn btn-primary btn-sm\"\n  title=\"{{ 'Create a quick link' | translate }}\"\n  type=\"button\"\n  (click)=\"createQuickLink()\"\n  [disabled]=\"addLinkFormGroup.invalid\"\n>\n  {{ 'Add quick link' | translate }}\n</button>\n" }]
         }], propDecorators: { onQuickLinkCreated: [{ type: i0.Output, args: ["onQuickLinkCreated"] }], onCancel: [{ type: i0.Output, args: ["onCancel"] }] } });
@@ -365,10 +365,10 @@ class QuickLinksService {
         }
         return navNode;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickLinksService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickLinksService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuickLinksService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuickLinksService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickLinksService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuickLinksService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -407,10 +407,10 @@ class RelativeUrlParserPipe {
     isQueryParameter(url) {
         return url.startsWith('?');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RelativeUrlParserPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: RelativeUrlParserPipe, isStandalone: true, name: "relativeUrlParser" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RelativeUrlParserPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: RelativeUrlParserPipe, isStandalone: true, name: "relativeUrlParser" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RelativeUrlParserPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RelativeUrlParserPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'relativeUrlParser'
@@ -515,10 +515,10 @@ class QuickLinksWidgetViewComponent {
             ? this.dashboardChild['data']?.componentId
             : this.dashboardChild['data']?.name;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickLinksWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuickLinksWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickLinksWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuickLinksWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-quick-links-widget-view', imports: [
                         CommonModule,
@@ -567,10 +567,10 @@ class QuickLinksWidgetConfigListComponent {
     getQuickLinks() {
         return this.quickLinksForm().getRawValue().quickLinks;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickLinksWidgetConfigListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: QuickLinksWidgetConfigListComponent, isStandalone: true, selector: "c8y-quick-links-widget-config-list", inputs: { quickLinksForm: { classPropertyName: "quickLinksForm", publicName: "quickLinksForm", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, quickLinksFormArray: { classPropertyName: "quickLinksFormArray", publicName: "quickLinksFormArray", isSignal: true, isRequired: false, transformFunction: null }, appsNameChanged: { classPropertyName: "appsNameChanged", publicName: "appsNameChanged", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<c8y-list-group\n  class=\"cdk-droplist no-border-last separator-top\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n  [cdkDropListDisabled]=\"getQuickLinks().length < 2\"\n>\n  <form\n    class=\"d-contents\"\n    [formGroup]=\"quickLinksForm()\"\n  >\n    <div\n      class=\"d-contents\"\n      [formArrayName]=\"'quickLinks'\"\n    >\n      @for (link of quickLinksFormArray().controls; track link; let i = $index) {\n        @let linkValue = link.getRawValue();\n\n        <c8y-li\n          [dense]=\"true\"\n          [formGroupName]=\"i\"\n          cdkDrag\n        >\n          <c8y-li-drag-handle\n            title=\"{{ 'Drag to reorder' | translate }}\"\n            cdkDragHandle\n          >\n            <i c8yIcon=\"drag-reorder\"></i>\n          </c8y-li-drag-handle>\n          <c8y-li-icon\n            class=\"icon-24 p-relative changeIcon a-s-stretch\"\n            [ngClass]=\"{\n              'm-l-16': getQuickLinks().length < 2\n            }\"\n          >\n            @if (linkValue.icon) {\n              <c8y-change-icon\n                [currentIcon]=\"linkValue.icon\"\n                (onButtonClick)=\"changeLinkIcon(link)\"\n              ></c8y-change-icon>\n            } @else {\n              <c8y-change-icon (onButtonClick)=\"changeLinkIcon(link)\">\n                <c8y-app-icon\n                  [name]=\"linkValue.app.name\"\n                  [app]=\"linkValue.app\"\n                  [contextPath]=\"linkValue.app.contextPath\"\n                ></c8y-app-icon>\n              </c8y-change-icon>\n            }\n          </c8y-li-icon>\n\n          <div class=\"d-flex gap-8 a-i-center\">\n            <div class=\"input-group input-group-editable\">\n              <input\n                class=\"form-control\"\n                formControlName=\"label\"\n                [placeholder]=\"'e.g. my Quick Link' | translate\"\n              />\n              <span></span>\n            </div>\n\n            <button\n              class=\"showOnHover btn-dot btn-dot--danger m-l-auto\"\n              [attr.aria-label]=\"'Delete' | translate\"\n              tooltip=\"{{ 'Delete' | translate }}\"\n              placement=\"top\"\n              type=\"button\"\n              [delay]=\"500\"\n              (click)=\"removeLink(i)\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n          <c8y-list-item-collapse>\n            <div class=\"d-flex a-i-center gap-24\">\n              <div class=\"form-group flex-grow\">\n                <label for=\"ql-url\">{{ 'URL' | translate }}</label>\n                <input\n                  class=\"form-control\"\n                  id=\"ql-url\"\n                  type=\"text\"\n                  formControlName=\"url\"\n                  maxlength=\"150\"\n                  [placeholder]=\"'e.g. https://www.example.com' | translate\"\n                />\n              </div>\n              <div class=\"form-group flex-noshrink\">\n                <label>&nbsp;</label>\n                <label\n                  class=\"c8y-checkbox\"\n                  title=\"{{ 'Open the link in a new browser tab' | translate }}\"\n                >\n                  <input\n                    [attr.aria-label]=\"'Open in new tab' | translate\"\n                    type=\"checkbox\"\n                    formControlName=\"newTab\"\n                    checked=\"checked\"\n                  />\n                  <span></span>\n                  <span>{{ 'New tab' | translate }}</span>\n                </label>\n              </div>\n            </div>\n          </c8y-list-item-collapse>\n        </c8y-li>\n      }\n    </div>\n  </form>\n</c8y-list-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i2.ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "ngmodule", type: DynamicFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "ngmodule", type: C8yTranslateModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: ChangeIconComponent, selector: "c8y-change-icon", inputs: ["currentIcon"], outputs: ["onButtonClick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuickLinksWidgetConfigListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: QuickLinksWidgetConfigListComponent, isStandalone: true, selector: "c8y-quick-links-widget-config-list", inputs: { quickLinksForm: { classPropertyName: "quickLinksForm", publicName: "quickLinksForm", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, quickLinksFormArray: { classPropertyName: "quickLinksFormArray", publicName: "quickLinksFormArray", isSignal: true, isRequired: false, transformFunction: null }, appsNameChanged: { classPropertyName: "appsNameChanged", publicName: "appsNameChanged", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<c8y-list-group\n  class=\"cdk-droplist no-border-last separator-top\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n  [cdkDropListDisabled]=\"getQuickLinks().length < 2\"\n>\n  <form\n    class=\"d-contents\"\n    [formGroup]=\"quickLinksForm()\"\n  >\n    <div\n      class=\"d-contents\"\n      [formArrayName]=\"'quickLinks'\"\n    >\n      @for (link of quickLinksFormArray().controls; track link; let i = $index) {\n        @let linkValue = link.getRawValue();\n\n        <c8y-li\n          [dense]=\"true\"\n          [formGroupName]=\"i\"\n          cdkDrag\n        >\n          <c8y-li-drag-handle\n            title=\"{{ 'Drag to reorder' | translate }}\"\n            cdkDragHandle\n          >\n            <i c8yIcon=\"drag-reorder\"></i>\n          </c8y-li-drag-handle>\n          <c8y-li-icon\n            class=\"icon-24 p-relative changeIcon a-s-stretch\"\n            [ngClass]=\"{\n              'm-l-16': getQuickLinks().length < 2\n            }\"\n          >\n            @if (linkValue.icon) {\n              <c8y-change-icon\n                [currentIcon]=\"linkValue.icon\"\n                (onButtonClick)=\"changeLinkIcon(link)\"\n              ></c8y-change-icon>\n            } @else {\n              <c8y-change-icon (onButtonClick)=\"changeLinkIcon(link)\">\n                <c8y-app-icon\n                  [name]=\"linkValue.app.name\"\n                  [app]=\"linkValue.app\"\n                  [contextPath]=\"linkValue.app.contextPath\"\n                ></c8y-app-icon>\n              </c8y-change-icon>\n            }\n          </c8y-li-icon>\n\n          <div class=\"d-flex gap-8 a-i-center\">\n            <div class=\"input-group input-group-editable\">\n              <input\n                class=\"form-control\"\n                formControlName=\"label\"\n                [placeholder]=\"'e.g. my Quick Link' | translate\"\n              />\n              <span></span>\n            </div>\n\n            <button\n              class=\"showOnHover btn-dot btn-dot--danger m-l-auto\"\n              [attr.aria-label]=\"'Delete' | translate\"\n              tooltip=\"{{ 'Delete' | translate }}\"\n              placement=\"top\"\n              type=\"button\"\n              [delay]=\"500\"\n              (click)=\"removeLink(i)\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n          <c8y-list-item-collapse>\n            <div class=\"d-flex a-i-center gap-24\">\n              <div class=\"form-group flex-grow\">\n                <label for=\"ql-url\">{{ 'URL' | translate }}</label>\n                <input\n                  class=\"form-control\"\n                  id=\"ql-url\"\n                  type=\"text\"\n                  formControlName=\"url\"\n                  maxlength=\"150\"\n                  [placeholder]=\"'e.g. https://www.example.com' | translate\"\n                />\n              </div>\n              <div class=\"form-group flex-noshrink\">\n                <label>&nbsp;</label>\n                <label\n                  class=\"c8y-checkbox\"\n                  title=\"{{ 'Open the link in a new browser tab' | translate }}\"\n                >\n                  <input\n                    [attr.aria-label]=\"'Open in new tab' | translate\"\n                    type=\"checkbox\"\n                    formControlName=\"newTab\"\n                    checked=\"checked\"\n                  />\n                  <span></span>\n                  <span>{{ 'New tab' | translate }}</span>\n                </label>\n              </div>\n            </div>\n          </c8y-list-item-collapse>\n        </c8y-li>\n      }\n    </div>\n  </form>\n</c8y-list-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i2.ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "ngmodule", type: DynamicFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "ngmodule", type: C8yTranslateModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: ChangeIconComponent, selector: "c8y-change-icon", inputs: ["currentIcon"], outputs: ["onButtonClick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickLinksWidgetConfigListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuickLinksWidgetConfigListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-quick-links-widget-config-list', host: {
                         class: 'd-contents'
@@ -605,9 +605,9 @@ class QuickLinksWidgetConfigComponent {
         this.humanizeAppNamePipe = inject(HumanizeAppNamePipe);
         this.interAppService = inject(InterAppService);
         this.formBuilder = inject(FormBuilder);
-        this.contextDashboardService = inject(ContextDashboardService);
         this.translateService = inject(TranslateService);
         this.widgetConfigService = inject(WidgetConfigService);
+        this.parentForm = inject(NgForm, { optional: true });
     }
     set previewSet(template) {
         if (template) {
@@ -625,6 +625,9 @@ class QuickLinksWidgetConfigComponent {
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
+        if (this.parentForm) {
+            this.parentForm.form.removeControl('quickLinks');
+        }
     }
     getQuickLinks() {
         return this.quickLinksForm.getRawValue().quickLinks;
@@ -678,9 +681,9 @@ class QuickLinksWidgetConfigComponent {
     }
     setupQuickLinksForm() {
         this.quickLinksForm = this.initForm();
-        this.quickLinksForm.statusChanges
-            .pipe(debounceTime(30), takeUntil(this.destroy$))
-            .subscribe(status => (this.contextDashboardService.formDisabled$ = of(status === 'INVALID')));
+        if (this.parentForm) {
+            this.parentForm.form.addControl('quickLinks', this.quickLinksForm);
+        }
     }
     async confirmAppIconChanges() {
         if (this.appsNameChanged().length > 0) {
@@ -699,10 +702,10 @@ class QuickLinksWidgetConfigComponent {
             quickLinks: this.formBuilder.array([])
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickLinksWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuickLinksWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickLinksWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuickLinksWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-quick-links-widget-config', imports: [
                         CommonModule,