@c8y/ngx-components 1024.10.8 → 1024.14.0

package/fesm2022/c8y-ngx-components-widgets-implementations-pie-chart.mjs

@@ -52,10 +52,10 @@ class CurrentMeasurementService {
             notFound: true
         })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CurrentMeasurementService, deps: [{ token: i1.MeasurementRealtimeService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CurrentMeasurementService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CurrentMeasurementService, deps: [{ token: i1.MeasurementRealtimeService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CurrentMeasurementService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CurrentMeasurementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CurrentMeasurementService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.MeasurementRealtimeService }] });
@@ -239,14 +239,14 @@ class PieChartWidgetViewComponent {
     encodeHtml(text) {
         return echarts.format.encodeHTML(text);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PieChartWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: PieChartWidgetViewComponent, isStandalone: true, selector: "c8y-pie-chart", inputs: { config: "config" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PieChartWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: PieChartWidgetViewComponent, isStandalone: true, selector: "c8y-pie-chart", inputs: { config: "config" }, providers: [
             MeasurementRealtimeService,
             CurrentMeasurementService,
             { provide: NGX_ECHARTS_CONFIG, useFactory: () => ({ echarts: () => import('echarts') }) }
         ], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-relative fit-h overflow-hidden\">\n  <div\n    class=\"p-absolute fit-w fit-h\"\n    #chart\n    echarts\n    [options]=\"chartOptions$ | async\"\n    (chartInit)=\"onChartInit($event)\"\n  ></div>\n\n  <c8y-chart-alerts [alerts]=\"alerts\"></c8y-chart-alerts>\n</div>\n", dependencies: [{ kind: "ngmodule", type: NgxEchartsModule }, { kind: "directive", type: i1$1.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "component", type: ChartAlertsComponent, selector: "c8y-chart-alerts", inputs: ["alerts"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PieChartWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PieChartWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-pie-chart', providers: [
                         MeasurementRealtimeService,
@@ -305,10 +305,10 @@ class PieChartWidgetConfigComponent {
         });
         return form;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PieChartWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PieChartWidgetConfigComponent, isStandalone: true, selector: "app-pie-chart-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["pieChartPreview"], descendants: true }], ngImport: i0, template: "@if (formGroup) {\n  <div [formGroup]=\"formGroup\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Pie chart options' | translate }}</legend>\n      <div\n        class=\"d-flex flex-column gap-8 form-group-sm p-b-8\"\n        formGroupName=\"pieChartOptions\"\n      >\n        <label class=\"c8y-checkbox\">\n          <input\n            type=\"checkbox\"\n            formControlName=\"showLabels\"\n          />\n          <span></span>\n          <span>\n            {{ 'Show labels' | translate }}\n          </span>\n        </label>\n        <label class=\"c8y-checkbox\">\n          <input\n            type=\"checkbox\"\n            formControlName=\"showLegend\"\n          />\n          <span></span>\n          <span>\n            {{ 'Show legend' | translate }}\n          </span>\n        </label>\n        <label class=\"c8y-checkbox\">\n          <input\n            type=\"checkbox\"\n            formControlName=\"showTooltips\"\n          />\n          <span></span>\n          <span>\n            {{ 'Show tooltips' | translate }}\n          </span>\n        </label>\n      </div>\n    </fieldset>\n  </div>\n\n  <ng-template #pieChartPreview>\n    @if (config.datapoints?.length > 0) {\n      <c8y-pie-chart\n        class=\"w-100 h-100\"\n        [config]=\"{\n          datapoints: config.datapoints,\n          pieChartOptions: {\n            showLabels: formGroup.value.pieChartOptions.showLabels,\n            showLegend: formGroup.value.pieChartOptions.showLegend,\n            showTooltips: formGroup.value.pieChartOptions.showTooltips\n          }\n        }\"\n      ></c8y-pie-chart>\n    } @else {\n      <div class=\"col-md-6 d-col a-i-start j-c-center\">\n        <c8y-ui-empty-state\n          [icon]=\"'c8y-data-points'\"\n          [title]=\"'No data points selected' | translate\"\n          [subtitle]=\"'Select data point to render content' | translate\"\n          [horizontal]=\"false\"\n          data-cy=\"kpi-widget--empty-state-no-data-point-selected\"\n        >\n          <p c8y-guide-docs>\n            <small\n              translate\n              ngNonBindable\n            >\n              Find out more in the\n              <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#kpi\">user documentation</a>.\n            </small>\n          </p>\n        </c8y-ui-empty-state>\n      </div>\n    }\n  </ng-template>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i1.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: PieChartWidgetViewComponent, selector: "c8y-pie-chart", inputs: ["config"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PieChartWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PieChartWidgetConfigComponent, isStandalone: true, selector: "app-pie-chart-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["pieChartPreview"], descendants: true }], ngImport: i0, template: "@if (formGroup) {\n  <div [formGroup]=\"formGroup\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Pie chart options' | translate }}</legend>\n      <div\n        class=\"d-flex flex-column gap-8 form-group-sm p-b-8\"\n        formGroupName=\"pieChartOptions\"\n      >\n        <label class=\"c8y-checkbox\">\n          <input\n            type=\"checkbox\"\n            formControlName=\"showLabels\"\n          />\n          <span></span>\n          <span>\n            {{ 'Show labels' | translate }}\n          </span>\n        </label>\n        <label class=\"c8y-checkbox\">\n          <input\n            type=\"checkbox\"\n            formControlName=\"showLegend\"\n          />\n          <span></span>\n          <span>\n            {{ 'Show legend' | translate }}\n          </span>\n        </label>\n        <label class=\"c8y-checkbox\">\n          <input\n            type=\"checkbox\"\n            formControlName=\"showTooltips\"\n          />\n          <span></span>\n          <span>\n            {{ 'Show tooltips' | translate }}\n          </span>\n        </label>\n      </div>\n    </fieldset>\n  </div>\n\n  <ng-template #pieChartPreview>\n    @if (config.datapoints?.length > 0) {\n      <c8y-pie-chart\n        class=\"w-100 h-100\"\n        [config]=\"{\n          datapoints: config.datapoints,\n          pieChartOptions: {\n            showLabels: formGroup.value.pieChartOptions.showLabels,\n            showLegend: formGroup.value.pieChartOptions.showLegend,\n            showTooltips: formGroup.value.pieChartOptions.showTooltips\n          }\n        }\"\n      ></c8y-pie-chart>\n    } @else {\n      <div class=\"col-md-6 d-col a-i-start j-c-center\">\n        <c8y-ui-empty-state\n          [icon]=\"'c8y-data-points'\"\n          [title]=\"'No data points selected' | translate\"\n          [subtitle]=\"'Select data point to render content' | translate\"\n          [horizontal]=\"false\"\n          data-cy=\"kpi-widget--empty-state-no-data-point-selected\"\n        >\n          <p c8y-guide-docs>\n            <small\n              translate\n              ngNonBindable\n            >\n              Find out more in the\n              <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#kpi\">user documentation</a>.\n            </small>\n          </p>\n        </c8y-ui-empty-state>\n      </div>\n    }\n  </ng-template>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i1.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: PieChartWidgetViewComponent, selector: "c8y-pie-chart", inputs: ["config"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PieChartWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PieChartWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-pie-chart-config', imports: [
                         CommonModule,

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

@@ -77,10 +77,10 @@ class QuickLinksWidgetConfigAddLinkComponent {
         };
         return this.fb.group(controls);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QuickLinksWidgetConfigAddLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.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    <c8y-form-group class=\"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        [placeholder]=\"'e.g. http://www.example.com' | translate\"\n      />\n      <c8y-messages>\n        <c8y-message\n          name=\"maxlength\"\n          [text]=\"'The URL must not exceed {{ requiredLength }} characters.' | translate\"\n        ></c8y-message>\n      </c8y-messages>\n    </c8y-form-group>\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],[formArray],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: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: QuickLinksWidgetConfigAddLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", 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    <c8y-form-group class=\"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        [placeholder]=\"'e.g. http://www.example.com' | translate\"\n      />\n      <c8y-messages>\n        <c8y-message\n          name=\"maxlength\"\n          [text]=\"'The URL must not exceed {{ requiredLength }} characters.' | translate\"\n        ></c8y-message>\n      </c8y-messages>\n    </c8y-form-group>\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],[formArray],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: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QuickLinksWidgetConfigAddLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: QuickLinksWidgetConfigAddLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-quick-links-widget-config-add-link', imports: [
                         TooltipModule,
@@ -383,10 +383,10 @@ class QuickLinksService {
         }
         return navNode;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QuickLinksService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QuickLinksService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: QuickLinksService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: QuickLinksService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QuickLinksService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: QuickLinksService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -429,10 +429,10 @@ class RelativeUrlParserPipe {
     isQueryParameter(url) {
         return url.startsWith('?');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RelativeUrlParserPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: RelativeUrlParserPipe, isStandalone: true, name: "relativeUrlParser" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RelativeUrlParserPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: RelativeUrlParserPipe, isStandalone: true, name: "relativeUrlParser" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RelativeUrlParserPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RelativeUrlParserPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'relativeUrlParser'
@@ -537,10 +537,10 @@ class QuickLinksWidgetViewComponent {
             ? this.dashboardChild['data']?.componentId
             : this.dashboardChild['data']?.name;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QuickLinksWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: QuickLinksWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QuickLinksWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: QuickLinksWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-quick-links-widget-view', imports: [
                         CommonModule,
@@ -594,10 +594,10 @@ class QuickLinksWidgetConfigListComponent {
     getQuickLinks() {
         return this.quickLinksForm().getRawValue().quickLinks;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QuickLinksWidgetConfigListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.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              <c8y-form-group class=\"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                  [placeholder]=\"'e.g. https://www.example.com' | translate\"\n                />\n                <c8y-messages>\n                  <c8y-message\n                    name=\"maxlength\"\n                    [text]=\"'The URL must not exceed {{ requiredLength }} characters.' | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { 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: "21.2.19", ngImport: i0, type: QuickLinksWidgetConfigListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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              <c8y-form-group class=\"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                  [placeholder]=\"'e.g. https://www.example.com' | translate\"\n                />\n                <c8y-messages>\n                  <c8y-message\n                    name=\"maxlength\"\n                    [text]=\"'The URL must not exceed {{ requiredLength }} characters.' | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { 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: "21.2.17", ngImport: i0, type: QuickLinksWidgetConfigListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: QuickLinksWidgetConfigListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-quick-links-widget-config-list', host: {
                         class: 'd-contents'
@@ -764,10 +764,10 @@ class QuickLinksWidgetConfigComponent {
             quickLinks: this.formBuilder.array([])
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QuickLinksWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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 }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: QuickLinksWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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 }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QuickLinksWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: QuickLinksWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-quick-links-widget-config', imports: [
                         CommonModule,

package/fesm2022/c8y-ngx-components-widgets-implementations-scada.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, DestroyRef, input, computed, ChangeDetectionStrategy, Component, viewChild, signal, ElementRef, output, effect } from '@angular/core';
+import { Injectable, inject, DestroyRef, input, computed, ChangeDetectionStrategy, Component, ChangeDetectorRef, viewChild, signal, ElementRef, output, effect } from '@angular/core';
 import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
 import * as i2 from '@c8y/ngx-components';
 import { IconDirective, C8yTranslatePipe, AlertService, DropAreaComponent, FormGroupComponent, ListGroupModule, ModalModule, FormsModule as FormsModule$1, DashboardChildComponent, DynamicComponentAlertAggregator, DismissAlertStrategy, DynamicComponentAlert, ManagedObjectRealtimeService } from '@c8y/ngx-components';
@@ -349,10 +349,10 @@ class ScadaWidgetService {
             containerBoxSizing: 'border-box'
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScadaWidgetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScadaWidgetService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScadaWidgetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScadaWidgetService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScadaWidgetService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScadaWidgetService, decorators: [{
             type: Injectable
         }] });
 
@@ -959,10 +959,10 @@ class ScadaWidgetConfigService {
             return assetProperty;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScadaWidgetConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScadaWidgetConfigService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScadaWidgetConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScadaWidgetConfigService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScadaWidgetConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScadaWidgetConfigService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -1014,10 +1014,10 @@ class ScadaAiChatToolDetailsComponent {
             .replace(/\$\{this\.c8yScadaValues\?\.(\w+)[^}]*\}/g, '{$1}')
             .replace(/\$\{[^}]+\}/g, '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScadaAiChatToolDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ScadaAiChatToolDetailsComponent, isStandalone: true, selector: "c8y-scada-ai-chat-tool-details", inputs: { tool: { classPropertyName: "tool", publicName: "tool", isSignal: true, isRequired: true, transformFunction: null } }, host: { styleAttribute: "display: block" }, ngImport: i0, template: "@if (svgContent()) {\n  <div\n    class=\"m-b-8\"\n    style=\"max-height: 320px; overflow: auto\"\n    [innerHTML]=\"previewSvg()\"\n  ></div>\n}\n@if (mappingRows(); as rows) {\n  <div\n    class=\"m-b-8\"\n    style=\"max-height: 160px; overflow: auto\"\n  >\n    <table class=\"table table-condensed m-b-0\">\n      <thead>\n        <tr>\n          <th>{{ 'Placeholder' | translate }}</th>\n          <th>{{ 'Asset' | translate }}</th>\n          <th>{{ 'Property' | translate }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of rows; track row.placeholder) {\n          <tr>\n            <td>\n              <code>{{ row.placeholder }}</code>\n            </td>\n            <td>{{ row.asset }}</td>\n            <td>{{ row.property }}</td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n} @else if (mappingContent()) {\n  <pre\n    class=\"m-b-8\"\n    style=\"max-height: 160px\"\n    >{{ mappingContent() }}</pre\n  >\n}\n@if (!isExecuting()) {\n  <div class=\"d-flex j-c-end\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [attr.aria-label]=\"'Apply' | translate\"\n      [tooltip]=\"'Apply' | translate\"\n      container=\"body\"\n      (click)=\"apply()\"\n    >\n      <i c8yIcon=\"check\"></i>\n    </button>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: 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: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScadaAiChatToolDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ScadaAiChatToolDetailsComponent, isStandalone: true, selector: "c8y-scada-ai-chat-tool-details", inputs: { tool: { classPropertyName: "tool", publicName: "tool", isSignal: true, isRequired: true, transformFunction: null } }, host: { styleAttribute: "display: block" }, ngImport: i0, template: "@if (svgContent()) {\n  <div\n    class=\"m-b-8\"\n    style=\"max-height: 320px; overflow: auto\"\n    [innerHTML]=\"previewSvg()\"\n  ></div>\n}\n@if (mappingRows(); as rows) {\n  <div\n    class=\"m-b-8\"\n    style=\"max-height: 160px; overflow: auto\"\n  >\n    <table class=\"table table-condensed m-b-0\">\n      <thead>\n        <tr>\n          <th>{{ 'Placeholder' | translate }}</th>\n          <th>{{ 'Asset' | translate }}</th>\n          <th>{{ 'Property' | translate }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of rows; track row.placeholder) {\n          <tr>\n            <td>\n              <code>{{ row.placeholder }}</code>\n            </td>\n            <td>{{ row.asset }}</td>\n            <td>{{ row.property }}</td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n} @else if (mappingContent()) {\n  <pre\n    class=\"m-b-8\"\n    style=\"max-height: 160px\"\n    >{{ mappingContent() }}</pre\n  >\n}\n@if (!isExecuting()) {\n  <div class=\"d-flex j-c-end\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [attr.aria-label]=\"'Apply' | translate\"\n      [tooltip]=\"'Apply' | translate\"\n      container=\"body\"\n      (click)=\"apply()\"\n    >\n      <i c8yIcon=\"check\"></i>\n    </button>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: 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: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScadaAiChatToolDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScadaAiChatToolDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-scada-ai-chat-tool-details', host: { style: 'display: block' }, imports: [TooltipDirective, C8yTranslatePipe, IconDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (svgContent()) {\n  <div\n    class=\"m-b-8\"\n    style=\"max-height: 320px; overflow: auto\"\n    [innerHTML]=\"previewSvg()\"\n  ></div>\n}\n@if (mappingRows(); as rows) {\n  <div\n    class=\"m-b-8\"\n    style=\"max-height: 160px; overflow: auto\"\n  >\n    <table class=\"table table-condensed m-b-0\">\n      <thead>\n        <tr>\n          <th>{{ 'Placeholder' | translate }}</th>\n          <th>{{ 'Asset' | translate }}</th>\n          <th>{{ 'Property' | translate }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of rows; track row.placeholder) {\n          <tr>\n            <td>\n              <code>{{ row.placeholder }}</code>\n            </td>\n            <td>{{ row.asset }}</td>\n            <td>{{ row.property }}</td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n} @else if (mappingContent()) {\n  <pre\n    class=\"m-b-8\"\n    style=\"max-height: 160px\"\n    >{{ mappingContent() }}</pre\n  >\n}\n@if (!isExecuting()) {\n  <div class=\"d-flex j-c-end\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [attr.aria-label]=\"'Apply' | translate\"\n      [tooltip]=\"'Apply' | translate\"\n      container=\"body\"\n      (click)=\"apply()\"\n    >\n      <i c8yIcon=\"check\"></i>\n    </button>\n  </div>\n}\n" }]
         }], propDecorators: { tool: [{ type: i0.Input, args: [{ isSignal: true, alias: "tool", required: true }] }] } });
@@ -1040,6 +1040,7 @@ class ScadaWidgetSvgSelectorComponent {
         this.aiService = inject(AIService);
         this.formBuilder = inject(FormBuilder);
         this.destroyRef = inject(DestroyRef);
+        this.cdRef = inject(ChangeDetectorRef);
         this.formGroup = this.formBuilder.group({
             source: this.formBuilder.nonNullable.control('file'),
             svgCode: this.formBuilder.nonNullable.control('', []),
@@ -1195,21 +1196,24 @@ class ScadaWidgetSvgSelectorComponent {
         });
     }
     async onSvgFileDropped(event) {
-        this.dropArea().loading = true;
+        // Captured once: switching the Source radio away from "file" mid-upload destroys #dropArea.
+        const dropArea = this.dropArea();
+        dropArea.loading = true;
         try {
             const svgFile = event[0].file;
             const config = await firstValueFrom(this.scadaConfigService.config$);
             const updatedConfig = await this.scadaConfigService.updateConfigWithSvgFile(config, svgFile);
             this.scadaConfigService.save(updatedConfig);
             this.sectionComponent.section.expanded = false;
-            this.dropArea().files = null;
+            dropArea.files = null;
             this.alertService.success(gettext('SVG file uploaded.'));
         }
         catch (e) {
             this.alertService.danger(gettext('Could not upload the selected SVG file.'), e?.message || e);
         }
         finally {
-            this.dropArea().loading = false;
+            dropArea.loading = false;
+            this.cdRef.markForCheck();
         }
     }
     async applySvgCode() {
@@ -1241,10 +1245,10 @@ class ScadaWidgetSvgSelectorComponent {
     async applyScadaOutput(content) {
         await this.scadaConfigService.applyScadaOutput(content);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScadaWidgetSvgSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ScadaWidgetSvgSelectorComponent, isStandalone: true, selector: "c8y-scada-widget-svg-selector", viewQueries: [{ propertyName: "dropArea", first: true, predicate: ["dropArea"], descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Source' | translate }}</legend>\n    <div class=\"form-group\">\n      <label\n        class=\"c8y-radio radio-inline\"\n        title=\"{{ 'Upload file' | translate }}\"\n      >\n        <input\n          name=\"source\"\n          type=\"radio\"\n          value=\"file\"\n          formControlName=\"source\"\n        />\n        <span></span>\n        <span>{{ 'Upload file' | translate }}</span>\n      </label>\n      <label\n        class=\"c8y-radio radio-inline m-l-8\"\n        title=\"{{ 'Paste text' | translate }}\"\n      >\n        <input\n          name=\"source\"\n          type=\"radio\"\n          value=\"text\"\n          formControlName=\"source\"\n        />\n        <span></span>\n        <span>\n          {{ 'Paste text' | translate }}\n        </span>\n      </label>\n      @if (isAiAvailable()) {\n        <label\n          class=\"c8y-radio radio-inline m-l-8\"\n          title=\"{{ 'Generate with AI' | translate }}\"\n        >\n          <input\n            name=\"source\"\n            type=\"radio\"\n            value=\"ai\"\n            formControlName=\"source\"\n          />\n          <span></span>\n          <div\n            class=\"btn btn-ai btn-icon-dot btn-sm btn-ai-hint m-l-4 m-r-4\"\n            aria-hidden=\"true\"\n          >\n            <span></span>\n          </div>\n          <span>\n            {{ 'Generate with AI' | translate }}\n          </span>\n        </label>\n      }\n    </div>\n\n    @switch (formGroup.get('source')?.value) {\n      @case ('file') {\n        <c8y-form-group class=\"m-b-24\">\n          <c8y-drop-area\n            class=\"drop-area-sm\"\n            [icon]=\"'upload'\"\n            #dropArea\n            [accept]=\"'.svg'\"\n            [maxAllowedFiles]=\"1\"\n            (dropped)=\"onSvgFileDropped($event)\"\n            [message]=\"'Browse or drop file here\u2026' | translate\"\n          ></c8y-drop-area>\n        </c8y-form-group>\n      }\n      @case ('text') {\n        <c8y-form-group class=\"m-b-24\">\n          <textarea\n            class=\"form-control\"\n            aria-label=\"{{ 'Paste SVG code here' | translate }}\"\n            id=\"svgCode\"\n            placeholder=\"{{ placeholderText }}\"\n            rows=\"6\"\n            formControlName=\"svgCode\"\n          ></textarea>\n        </c8y-form-group>\n        <button\n          class=\"btn btn-default\"\n          (click)=\"applySvgCode()\"\n          translate\n          [disabled]=\"!formGroup.get('svgCode')?.value?.trim()\"\n        >\n          Apply\n        </button>\n      }\n      @case ('ai') {\n        @if (isAiAvailable()) {\n          <c8y-agent-chat\n            #agentChat\n            [chatConfig]=\"chatConfig\"\n            [suggestions]=\"agentChat.isWelcoming() ? suggestions : []\"\n            [agent]=\"agent\"\n            [variables]=\"variables\"\n            [preprocessAgentMessage]=\"preprocessAgentMessage\"\n            [assistantMessageDisplayConfig]=\"assistantMessageDisplayConfig\"\n          ></c8y-agent-chat>\n        }\n      }\n    }\n  </fieldset>\n\n  <div formGroupName=\"svgDisplaySettings\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>\n        {{ 'Image display' | translate }}\n      </legend>\n      <c8y-form-group class=\"form-group-sm m-b-0\">\n        <c8y-list-group\n          class=\"no-border-last p-b-16\"\n          role=\"list\"\n        >\n          @for (displayOption of displayOptions; track displayOption.value) {\n            <c8y-li role=\"listitem\">\n              <label class=\"c8y-radio\">\n                <input\n                  type=\"radio\"\n                  formControlName=\"displayOption\"\n                  [value]=\"displayOption.value\"\n                />\n                <span></span>\n                <span class=\"l-h-1\">\n                  {{ displayOption.label | translate }}\n                  <br />\n                  <small class=\"text-muted\">\n                    {{ displayOption.description | translate }}\n                  </small>\n                </span>\n              </label>\n            </c8y-li>\n          }\n        </c8y-list-group>\n      </c8y-form-group>\n    </fieldset>\n    @if (formGroup.get('svgDisplaySettings')?.get('displayOption')?.value === 'contain') {\n      <fieldset class=\"c8y-fieldset\">\n        <legend>\n          {{ 'Image alignment' | translate }}\n        </legend>\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label>{{ 'Horizontal`alignment`' | translate }}</label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"horizontalAlignment\"\n                >\n                  @for (option of horizontalAlignmentOptions; track option.value) {\n                    <option [ngValue]=\"option.value\">\n                      {{ option.label | translate }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-6\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label>{{ 'Vertical`alignment`' | translate }}</label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"verticalAlignment\"\n                >\n                  @for (option of verticalAlignmentOptions; track option.value) {\n                    <option [ngValue]=\"option.value\">\n                      {{ option.label | translate }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </c8y-form-group>\n          </div>\n        </div>\n      </fieldset>\n    }\n  </div>\n</form>\n", dependencies: [{ kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: AgentChatComponent, selector: "c8y-agent-chat", inputs: ["agent", "suggestions", "chatConfig", "welcomeTemplate", "autoCreateAgents", "variables", "assistantMessageComponent", "assistantMessageDisplayConfig", "preprocessAgentMessage", "pruneMessagesForAgent", "skipHealthCheck", "initialChatHistory", "groundingContextProvider", "userAnalyticsContext"], outputs: ["onMessageFinish", "onToolResult", "onFeedback", "onMessagesChange"] }, { 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: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScadaWidgetSvgSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ScadaWidgetSvgSelectorComponent, isStandalone: true, selector: "c8y-scada-widget-svg-selector", viewQueries: [{ propertyName: "dropArea", first: true, predicate: ["dropArea"], descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Source' | translate }}</legend>\n    <div class=\"form-group\">\n      <label\n        class=\"c8y-radio radio-inline\"\n        title=\"{{ 'Upload file' | translate }}\"\n      >\n        <input\n          name=\"source\"\n          type=\"radio\"\n          value=\"file\"\n          formControlName=\"source\"\n        />\n        <span></span>\n        <span>{{ 'Upload file' | translate }}</span>\n      </label>\n      <label\n        class=\"c8y-radio radio-inline m-l-8\"\n        title=\"{{ 'Paste text' | translate }}\"\n      >\n        <input\n          name=\"source\"\n          type=\"radio\"\n          value=\"text\"\n          formControlName=\"source\"\n        />\n        <span></span>\n        <span>\n          {{ 'Paste text' | translate }}\n        </span>\n      </label>\n      @if (isAiAvailable()) {\n        <label\n          class=\"c8y-radio radio-inline m-l-8\"\n          title=\"{{ 'Generate with AI' | translate }}\"\n        >\n          <input\n            name=\"source\"\n            type=\"radio\"\n            value=\"ai\"\n            formControlName=\"source\"\n          />\n          <span></span>\n          <div\n            class=\"btn btn-ai btn-icon-dot btn-sm btn-ai-hint m-l-4 m-r-4\"\n            aria-hidden=\"true\"\n          >\n            <span></span>\n          </div>\n          <span>\n            {{ 'Generate with AI' | translate }}\n          </span>\n        </label>\n      }\n    </div>\n\n    @switch (formGroup.get('source')?.value) {\n      @case ('file') {\n        <c8y-form-group class=\"m-b-24\">\n          <c8y-drop-area\n            class=\"drop-area-sm\"\n            [icon]=\"'upload'\"\n            #dropArea\n            [accept]=\"'.svg'\"\n            [maxAllowedFiles]=\"1\"\n            (dropped)=\"onSvgFileDropped($event)\"\n            [message]=\"'Browse or drop file here\u2026' | translate\"\n          ></c8y-drop-area>\n        </c8y-form-group>\n      }\n      @case ('text') {\n        <c8y-form-group class=\"m-b-24\">\n          <textarea\n            class=\"form-control\"\n            aria-label=\"{{ 'Paste SVG code here' | translate }}\"\n            id=\"svgCode\"\n            placeholder=\"{{ placeholderText }}\"\n            rows=\"6\"\n            formControlName=\"svgCode\"\n          ></textarea>\n        </c8y-form-group>\n        <button\n          class=\"btn btn-default\"\n          (click)=\"applySvgCode()\"\n          translate\n          [disabled]=\"!formGroup.get('svgCode')?.value?.trim()\"\n        >\n          Apply\n        </button>\n      }\n      @case ('ai') {\n        @if (isAiAvailable()) {\n          <c8y-agent-chat\n            #agentChat\n            [chatConfig]=\"chatConfig\"\n            [suggestions]=\"agentChat.isWelcoming() ? suggestions : []\"\n            [agent]=\"agent\"\n            [variables]=\"variables\"\n            [preprocessAgentMessage]=\"preprocessAgentMessage\"\n            [assistantMessageDisplayConfig]=\"assistantMessageDisplayConfig\"\n          ></c8y-agent-chat>\n        }\n      }\n    }\n  </fieldset>\n\n  <div formGroupName=\"svgDisplaySettings\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>\n        {{ 'Image display' | translate }}\n      </legend>\n      <c8y-form-group class=\"form-group-sm m-b-0\">\n        <c8y-list-group\n          class=\"no-border-last p-b-16\"\n          role=\"list\"\n        >\n          @for (displayOption of displayOptions; track displayOption.value) {\n            <c8y-li role=\"listitem\">\n              <label class=\"c8y-radio\">\n                <input\n                  type=\"radio\"\n                  formControlName=\"displayOption\"\n                  [value]=\"displayOption.value\"\n                />\n                <span></span>\n                <span class=\"l-h-1\">\n                  {{ displayOption.label | translate }}\n                  <br />\n                  <small class=\"text-muted\">\n                    {{ displayOption.description | translate }}\n                  </small>\n                </span>\n              </label>\n            </c8y-li>\n          }\n        </c8y-list-group>\n      </c8y-form-group>\n    </fieldset>\n    @if (formGroup.get('svgDisplaySettings')?.get('displayOption')?.value === 'contain') {\n      <fieldset class=\"c8y-fieldset\">\n        <legend>\n          {{ 'Image alignment' | translate }}\n        </legend>\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label>{{ 'Horizontal`alignment`' | translate }}</label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"horizontalAlignment\"\n                >\n                  @for (option of horizontalAlignmentOptions; track option.value) {\n                    <option [ngValue]=\"option.value\">\n                      {{ option.label | translate }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-6\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label>{{ 'Vertical`alignment`' | translate }}</label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"verticalAlignment\"\n                >\n                  @for (option of verticalAlignmentOptions; track option.value) {\n                    <option [ngValue]=\"option.value\">\n                      {{ option.label | translate }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </c8y-form-group>\n          </div>\n        </div>\n      </fieldset>\n    }\n  </div>\n</form>\n", dependencies: [{ kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: AgentChatComponent, selector: "c8y-agent-chat", inputs: ["agent", "suggestions", "chatConfig", "welcomeTemplate", "autoCreateAgents", "variables", "assistantMessageComponent", "assistantMessageDisplayConfig", "preprocessAgentMessage", "pruneMessagesForAgent", "skipHealthCheck", "initialChatHistory", "groundingContextProvider", "userAnalyticsContext", "telemetry"], outputs: ["onMessageFinish", "onToolResult", "onFeedback", "onMessagesChange"] }, { 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: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScadaWidgetSvgSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScadaWidgetSvgSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-scada-widget-svg-selector', imports: [
                         DropAreaComponent,
@@ -1287,8 +1291,8 @@ class ScadaWidgetPlaceholderModalComponent {
         this._close(this.form.get('placeholderName')?.value);
         this.modal()?._close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScadaWidgetPlaceholderModalComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: ScadaWidgetPlaceholderModalComponent, isStandalone: true, selector: "c8y-scada-widget-placeholder-modal", viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }, { propertyName: "placeholderNameInput", first: true, predicate: ["placeholderNameInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScadaWidgetPlaceholderModalComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.19", type: ScadaWidgetPlaceholderModalComponent, isStandalone: true, selector: "c8y-scada-widget-placeholder-modal", viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }, { propertyName: "placeholderNameInput", first: true, predicate: ["placeholderNameInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <c8y-modal
       [title]="'Add placeholder' | translate"
       [headerClasses]="'dialog-header'"
@@ -1332,7 +1336,7 @@ class ScadaWidgetPlaceholderModalComponent {
     </c8y-modal>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ModalModule }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "ngmodule", type: FormsModule$1 }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScadaWidgetPlaceholderModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScadaWidgetPlaceholderModalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'c8y-scada-widget-placeholder-modal',
@@ -1560,10 +1564,10 @@ class ScadaWidgetViewComponent {
         }));
         return this.refresh$.pipe(take(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScadaWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ScadaWidgetViewComponent, isStandalone: true, selector: "c8y-scada-widget-view", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, enablePotentialPlaceholders: { classPropertyName: "enablePotentialPlaceholders", publicName: "enablePotentialPlaceholders", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { potentialPlaceholderClick: "potentialPlaceholderClick" }, host: { classAttribute: "d-contents" }, providers: [ScadaWidgetService, ScadaWidgetConfigService, ManagedObjectRealtimeService], ngImport: i0, template: "@let cfg = effectiveConfig();\n@if (cfg) {\n  @if (cfg.displayMode === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n    @if (dashboardChild) {\n      <c8y-global-context-connector\n        [controls]=\"PRESET_NAME.AUTO_REFRESH_ONLY_CONFIG\"\n        [config]=\"cfg\"\n        [isLoading]=\"isLoading()\"\n        [dashboardChild]=\"dashboardChild\"\n        [linked]=\"isLinkedToGlobal()\"\n        [propagateAutoRefresh]=\"false\"\n        (configChange)=\"onContextChange($event)\"\n        (refresh)=\"onRefresh()\"\n      >\n      </c8y-global-context-connector>\n    }\n  } @else {\n    <c8y-local-controls\n      [controls]=\"PRESET_NAME.AUTO_REFRESH_ONLY_CONFIG\"\n      [displayMode]=\"cfg.displayMode\"\n      [config]=\"cfg\"\n      [isLoading]=\"isLoading()\"\n      [propagateAutoRefresh]=\"false\"\n      (configChange)=\"onContextChange($event)\"\n      (refresh)=\"onRefresh()\"\n    >\n    </c8y-local-controls>\n  }\n  <c8y-html-frame\n    [config]=\"htmlFrameConfig()\"\n    [device]=\"device()\"\n    [propertyValues$]=\"propertyValues$\"\n    [realtimeControl$]=\"realtimeControl$\"\n  ></c8y-html-frame>\n}\n", dependencies: [{ kind: "component", type: HtmlFrameComponent, selector: "c8y-html-frame", inputs: ["config", "device", "propertyValues$", "realtimeControl$", "useSalt"] }, { kind: "component", type: GlobalContextConnectorComponent, selector: "c8y-global-context-connector", inputs: ["controls", "config", "isLoading", "dashboardChild", "linked", "propagateAutoRefresh", "emitRefresh"], outputs: ["configChange", "refresh", "linkedChange"] }, { kind: "component", type: LocalControlsComponent, selector: "c8y-local-controls", inputs: ["controls", "displayMode", "config", "isLoading", "disabled", "propagateAutoRefresh", "emitRefresh", "dashboardChild"], outputs: ["configChange", "refresh"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScadaWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ScadaWidgetViewComponent, isStandalone: true, selector: "c8y-scada-widget-view", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, enablePotentialPlaceholders: { classPropertyName: "enablePotentialPlaceholders", publicName: "enablePotentialPlaceholders", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { potentialPlaceholderClick: "potentialPlaceholderClick" }, host: { classAttribute: "d-contents" }, providers: [ScadaWidgetService, ScadaWidgetConfigService, ManagedObjectRealtimeService], ngImport: i0, template: "@let cfg = effectiveConfig();\n@if (cfg) {\n  @if (cfg.displayMode === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n    @if (dashboardChild) {\n      <c8y-global-context-connector\n        [controls]=\"PRESET_NAME.AUTO_REFRESH_ONLY_CONFIG\"\n        [config]=\"cfg\"\n        [isLoading]=\"isLoading()\"\n        [dashboardChild]=\"dashboardChild\"\n        [linked]=\"isLinkedToGlobal()\"\n        [propagateAutoRefresh]=\"false\"\n        (configChange)=\"onContextChange($event)\"\n        (refresh)=\"onRefresh()\"\n      >\n      </c8y-global-context-connector>\n    }\n  } @else {\n    <c8y-local-controls\n      [controls]=\"PRESET_NAME.AUTO_REFRESH_ONLY_CONFIG\"\n      [displayMode]=\"cfg.displayMode\"\n      [config]=\"cfg\"\n      [isLoading]=\"isLoading()\"\n      [propagateAutoRefresh]=\"false\"\n      (configChange)=\"onContextChange($event)\"\n      (refresh)=\"onRefresh()\"\n    >\n    </c8y-local-controls>\n  }\n  <c8y-html-frame\n    [config]=\"htmlFrameConfig()\"\n    [device]=\"device()\"\n    [propertyValues$]=\"propertyValues$\"\n    [realtimeControl$]=\"realtimeControl$\"\n  ></c8y-html-frame>\n}\n", dependencies: [{ kind: "component", type: HtmlFrameComponent, selector: "c8y-html-frame", inputs: ["config", "device", "propertyValues$", "realtimeControl$", "useSalt"] }, { kind: "component", type: GlobalContextConnectorComponent, selector: "c8y-global-context-connector", inputs: ["controls", "config", "isLoading", "dashboardChild", "linked", "propagateAutoRefresh", "emitRefresh"], outputs: ["configChange", "refresh", "linkedChange"] }, { kind: "component", type: LocalControlsComponent, selector: "c8y-local-controls", inputs: ["controls", "displayMode", "config", "isLoading", "disabled", "propagateAutoRefresh", "emitRefresh", "dashboardChild"], outputs: ["configChange", "refresh"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScadaWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScadaWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-scada-widget-view', host: { class: 'd-contents' }, imports: [HtmlFrameComponent, GlobalContextConnectorComponent, LocalControlsComponent], providers: [ScadaWidgetService, ScadaWidgetConfigService, ManagedObjectRealtimeService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let cfg = effectiveConfig();\n@if (cfg) {\n  @if (cfg.displayMode === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n    @if (dashboardChild) {\n      <c8y-global-context-connector\n        [controls]=\"PRESET_NAME.AUTO_REFRESH_ONLY_CONFIG\"\n        [config]=\"cfg\"\n        [isLoading]=\"isLoading()\"\n        [dashboardChild]=\"dashboardChild\"\n        [linked]=\"isLinkedToGlobal()\"\n        [propagateAutoRefresh]=\"false\"\n        (configChange)=\"onContextChange($event)\"\n        (refresh)=\"onRefresh()\"\n      >\n      </c8y-global-context-connector>\n    }\n  } @else {\n    <c8y-local-controls\n      [controls]=\"PRESET_NAME.AUTO_REFRESH_ONLY_CONFIG\"\n      [displayMode]=\"cfg.displayMode\"\n      [config]=\"cfg\"\n      [isLoading]=\"isLoading()\"\n      [propagateAutoRefresh]=\"false\"\n      (configChange)=\"onContextChange($event)\"\n      (refresh)=\"onRefresh()\"\n    >\n    </c8y-local-controls>\n  }\n  <c8y-html-frame\n    [config]=\"htmlFrameConfig()\"\n    [device]=\"device()\"\n    [propertyValues$]=\"propertyValues$\"\n    [realtimeControl$]=\"realtimeControl$\"\n  ></c8y-html-frame>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], enablePotentialPlaceholders: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePotentialPlaceholders", required: false }] }], potentialPlaceholderClick: [{ type: i0.Output, args: ["potentialPlaceholderClick"] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }] } });
@@ -1696,10 +1700,10 @@ class ScadaWidgetAdvancedEditorComponent {
         result += str.slice(lastIndex);
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScadaWidgetAdvancedEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ScadaWidgetAdvancedEditorComponent, isStandalone: true, selector: "c8y-scada-widget-advanced-editor", providers: [HtmlWidgetConfigService], viewQueries: [{ propertyName: "scadaWidgetPreview", first: true, predicate: ["scadaWidgetPreview"], descendants: true, isSignal: true }], ngImport: i0, template: "@let config = config$ | async;\n@if (config) {\n  @let htmlWidgetConfig = config.config?.htmlWidgetConfig;\n  @if (htmlWidgetConfig) {\n    <c8y-widget-code-editor\n      [config]=\"htmlWidgetConfig.config\"\n      [mode]=\"'code'\"\n      [showAdvancedSettings]=\"false\"\n      [propertyKeys$]=\"propertyKeys$\"\n      [getFormattedPropertyExpression]=\"getFormattedPropertyExpressionFn\"\n      (codeChange)=\"changeCode($event)\"\n    ></c8y-widget-code-editor>\n  }\n\n  <ng-template #scadaWidgetPreview>\n    <c8y-scada-widget-view\n      [config]=\"config\"\n      [enablePotentialPlaceholders]=\"true\"\n      (potentialPlaceholderClick)=\"addPlaceholder($event)\"\n      [preview]=\"true\"\n    ></c8y-scada-widget-view>\n  </ng-template>\n}\n", dependencies: [{ kind: "component", type: ScadaWidgetViewComponent, selector: "c8y-scada-widget-view", inputs: ["config", "enablePotentialPlaceholders", "preview"], outputs: ["potentialPlaceholderClick"] }, { kind: "component", type: WidgetCodeEditorComponent, selector: "c8y-widget-code-editor", inputs: ["mode", "config", "showAdvancedSettings", "propertyKeys$", "propertyPrefix", "getFormattedPropertyExpression"], outputs: ["codeChange", "cssChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScadaWidgetAdvancedEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ScadaWidgetAdvancedEditorComponent, isStandalone: true, selector: "c8y-scada-widget-advanced-editor", providers: [HtmlWidgetConfigService], viewQueries: [{ propertyName: "scadaWidgetPreview", first: true, predicate: ["scadaWidgetPreview"], descendants: true, isSignal: true }], ngImport: i0, template: "@let config = config$ | async;\n@if (config) {\n  @let htmlWidgetConfig = config.config?.htmlWidgetConfig;\n  @if (htmlWidgetConfig) {\n    <c8y-widget-code-editor\n      [config]=\"htmlWidgetConfig.config\"\n      [mode]=\"'code'\"\n      [showAdvancedSettings]=\"false\"\n      [propertyKeys$]=\"propertyKeys$\"\n      [getFormattedPropertyExpression]=\"getFormattedPropertyExpressionFn\"\n      (codeChange)=\"changeCode($event)\"\n    ></c8y-widget-code-editor>\n  }\n\n  <ng-template #scadaWidgetPreview>\n    <c8y-scada-widget-view\n      [config]=\"config\"\n      [enablePotentialPlaceholders]=\"true\"\n      (potentialPlaceholderClick)=\"addPlaceholder($event)\"\n      [preview]=\"true\"\n    ></c8y-scada-widget-view>\n  </ng-template>\n}\n", dependencies: [{ kind: "component", type: ScadaWidgetViewComponent, selector: "c8y-scada-widget-view", inputs: ["config", "enablePotentialPlaceholders", "preview"], outputs: ["potentialPlaceholderClick"] }, { kind: "component", type: WidgetCodeEditorComponent, selector: "c8y-widget-code-editor", inputs: ["mode", "config", "showAdvancedSettings", "propertyKeys$", "propertyPrefix", "getFormattedPropertyExpression"], outputs: ["codeChange", "cssChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScadaWidgetAdvancedEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScadaWidgetAdvancedEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-scada-widget-advanced-editor', imports: [ScadaWidgetViewComponent, AsyncPipe, WidgetCodeEditorComponent], providers: [HtmlWidgetConfigService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let config = config$ | async;\n@if (config) {\n  @let htmlWidgetConfig = config.config?.htmlWidgetConfig;\n  @if (htmlWidgetConfig) {\n    <c8y-widget-code-editor\n      [config]=\"htmlWidgetConfig.config\"\n      [mode]=\"'code'\"\n      [showAdvancedSettings]=\"false\"\n      [propertyKeys$]=\"propertyKeys$\"\n      [getFormattedPropertyExpression]=\"getFormattedPropertyExpressionFn\"\n      (codeChange)=\"changeCode($event)\"\n    ></c8y-widget-code-editor>\n  }\n\n  <ng-template #scadaWidgetPreview>\n    <c8y-scada-widget-view\n      [config]=\"config\"\n      [enablePotentialPlaceholders]=\"true\"\n      (potentialPlaceholderClick)=\"addPlaceholder($event)\"\n      [preview]=\"true\"\n    ></c8y-scada-widget-view>\n  </ng-template>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { scadaWidgetPreview: [{ type: i0.ViewChild, args: ['scadaWidgetPreview', { isSignal: true }] }] } });