@c8y/ngx-components 1024.10.2 → 1024.10.5

package/fesm2022/c8y-ngx-components.mjs

@@ -25493,7 +25493,7 @@ class FilePickerComponent {
         this.uploadChoiceChange.emit('provided');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FilePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: FilePickerComponent, isStandalone: true, selector: "c8y-file-picker", inputs: { maxAllowedFiles: "maxAllowedFiles", uploadChoice: "uploadChoice", allowedUploadChoices: "allowedUploadChoices", fileUrl: "fileUrl", fileBinary: "fileBinary", config: "config", filePickerIndex: "filePickerIndex", fileUrlPopover: "fileUrlPopover", editInlineConfirmTitle: "editInlineConfirmTitle", editInlineConfirmMessage: "editInlineConfirmMessage" }, outputs: { onFilesPicked: "onFilesPicked", uploadChoiceChange: "uploadChoiceChange", fileBinaryChange: "fileBinaryChange", fileUrlChange: "fileUrlChange", textFilePicked: "textFilePicked" }, host: { properties: { "class.d-col": "uploadChoice === 'editInline'", "class.flex-grow": "uploadChoice === 'editInline'", "class.min-height-0": "uploadChoice === 'editInline'" } }, viewQueries: [{ propertyName: "dropArea", first: true, predicate: DropAreaComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\">\n  <label\n    class=\"c8y-radio\"\n    title=\"{{ 'Upload a binary' | translate }}\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadBinary\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label\n    class=\"c8y-radio\"\n    title=\"{{ 'Provide a file path' | translate }}\"\n    data-cy=\"file-picker--file-path-input\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadUrl\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    @if (isPopoverUsed()) {\n      <button\n        class=\"btn-help\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ fileUrlPopover | translate }}\"\n        placement=\"top\"\n        placement=\"top\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n        data-cy=\"file-picker--file-path-help\"\n      ></button>\n    }\n  </label>\n  @if (allowedUploadChoices.includes('provided')) {\n    <label\n      class=\"c8y-radio\"\n      title=\"{{ 'Mark as provided' | translate }}\"\n    >\n      <input\n        name=\"uploadChoice-{{ filePickerIndex }}\"\n        type=\"radio\"\n        value=\"provided\"\n        #radio\n        [(ngModel)]=\"uploadChoice\"\n        (click)=\"setProvidedOption()\"\n      />\n      <span></span>\n      <span>{{ 'Provided' | translate }}</span>\n      <button\n        class=\"btn-help\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ providedPopover | translate }}\"\n        placement=\"top\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    </label>\n  }\n  @if (allowedUploadChoices.includes('editInline')) {\n    <label\n      class=\"c8y-radio\"\n      title=\"{{ 'Edit inline' | translate }}\"\n    >\n      <input\n        name=\"uploadChoice-{{ filePickerIndex }}\"\n        type=\"radio\"\n        value=\"editInline\"\n        #radio\n        [checked]=\"uploadChoice === 'editInline'\"\n        (click)=\"selectEditInline(); $event.preventDefault()\"\n      />\n      <span></span>\n      <span>{{ 'Edit inline' | translate }}</span>\n    </label>\n  }\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [attr.aria-label]=\"'Drop file or click to browse' | translate\"\n      (dropped)=\"onFileDropped($event)\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n@if (uploadChoice === 'editInline') {\n  <div class=\"d-col flex-grow min-height-0\">\n    <ng-content select=\"[c8yInlineEditor]\"></ng-content>\n  </div>\n}\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          class=\"form-control\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          name=\"fileUrl\"\n          type=\"text\"\n          required\n          data-cy=\"file-picker--fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          maxlength=\"{{ config.maxlength }}\"\n          [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$7.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$7.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$7.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$8.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: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { 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: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: FilePickerComponent, isStandalone: true, selector: "c8y-file-picker", inputs: { maxAllowedFiles: "maxAllowedFiles", uploadChoice: "uploadChoice", allowedUploadChoices: "allowedUploadChoices", fileUrl: "fileUrl", fileBinary: "fileBinary", config: "config", filePickerIndex: "filePickerIndex", fileUrlPopover: "fileUrlPopover", editInlineConfirmTitle: "editInlineConfirmTitle", editInlineConfirmMessage: "editInlineConfirmMessage" }, outputs: { onFilesPicked: "onFilesPicked", uploadChoiceChange: "uploadChoiceChange", fileBinaryChange: "fileBinaryChange", fileUrlChange: "fileUrlChange", textFilePicked: "textFilePicked" }, host: { properties: { "class.d-col": "uploadChoice === 'editInline'", "class.flex-grow": "uploadChoice === 'editInline'", "class.min-height-0": "uploadChoice === 'editInline'" } }, viewQueries: [{ propertyName: "dropArea", first: true, predicate: DropAreaComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\">\n  <label\n    class=\"c8y-radio\"\n    title=\"{{ 'Upload a binary' | translate }}\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadBinary\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label\n    class=\"c8y-radio\"\n    title=\"{{ 'Provide a file path' | translate }}\"\n    data-cy=\"file-picker--file-path-input\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadUrl\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    @if (isPopoverUsed()) {\n      <button\n        class=\"btn-help\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ fileUrlPopover | translate }}\"\n        placement=\"top\"\n        placement=\"top\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n        data-cy=\"file-picker--file-path-help\"\n      ></button>\n    }\n  </label>\n  @if (allowedUploadChoices.includes('provided')) {\n    <label\n      class=\"c8y-radio\"\n      title=\"{{ 'Mark as provided' | translate }}\"\n    >\n      <input\n        name=\"uploadChoice-{{ filePickerIndex }}\"\n        type=\"radio\"\n        value=\"provided\"\n        #radio\n        [(ngModel)]=\"uploadChoice\"\n        (click)=\"setProvidedOption()\"\n      />\n      <span></span>\n      <span>{{ 'Provided' | translate }}</span>\n      <button\n        class=\"btn-help\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ providedPopover | translate }}\"\n        placement=\"top\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    </label>\n  }\n  @if (allowedUploadChoices.includes('editInline')) {\n    <label\n      class=\"c8y-radio\"\n      title=\"{{ 'Edit inline' | translate }}\"\n    >\n      <input\n        name=\"uploadChoice-{{ filePickerIndex }}\"\n        type=\"radio\"\n        value=\"editInline\"\n        #radio\n        [(ngModel)]=\"uploadChoice\"\n        (click)=\"selectEditInline()\"\n      />\n      <span></span>\n      <span>{{ 'Edit inline' | translate }}</span>\n    </label>\n  }\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [attr.aria-label]=\"'Drop file or click to browse' | translate\"\n      (dropped)=\"onFileDropped($event)\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n@if (uploadChoice === 'editInline') {\n  <div class=\"d-col flex-grow min-height-0\">\n    <ng-content select=\"[c8yInlineEditor]\"></ng-content>\n  </div>\n}\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          class=\"form-control\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          name=\"fileUrl\"\n          type=\"text\"\n          required\n          data-cy=\"file-picker--fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          maxlength=\"{{ config.maxlength }}\"\n          [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$7.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$7.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$7.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$8.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: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { 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: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FilePickerComponent, decorators: [{
             type: Component,
@@ -25509,7 +25509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         IconDirective,
                         RequiredInputPlaceholderDirective,
                         C8yTranslatePipe
-                    ], template: "<div class=\"form-group\">\n  <label\n    class=\"c8y-radio\"\n    title=\"{{ 'Upload a binary' | translate }}\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadBinary\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label\n    class=\"c8y-radio\"\n    title=\"{{ 'Provide a file path' | translate }}\"\n    data-cy=\"file-picker--file-path-input\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadUrl\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    @if (isPopoverUsed()) {\n      <button\n        class=\"btn-help\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ fileUrlPopover | translate }}\"\n        placement=\"top\"\n        placement=\"top\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n        data-cy=\"file-picker--file-path-help\"\n      ></button>\n    }\n  </label>\n  @if (allowedUploadChoices.includes('provided')) {\n    <label\n      class=\"c8y-radio\"\n      title=\"{{ 'Mark as provided' | translate }}\"\n    >\n      <input\n        name=\"uploadChoice-{{ filePickerIndex }}\"\n        type=\"radio\"\n        value=\"provided\"\n        #radio\n        [(ngModel)]=\"uploadChoice\"\n        (click)=\"setProvidedOption()\"\n      />\n      <span></span>\n      <span>{{ 'Provided' | translate }}</span>\n      <button\n        class=\"btn-help\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ providedPopover | translate }}\"\n        placement=\"top\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    </label>\n  }\n  @if (allowedUploadChoices.includes('editInline')) {\n    <label\n      class=\"c8y-radio\"\n      title=\"{{ 'Edit inline' | translate }}\"\n    >\n      <input\n        name=\"uploadChoice-{{ filePickerIndex }}\"\n        type=\"radio\"\n        value=\"editInline\"\n        #radio\n        [checked]=\"uploadChoice === 'editInline'\"\n        (click)=\"selectEditInline(); $event.preventDefault()\"\n      />\n      <span></span>\n      <span>{{ 'Edit inline' | translate }}</span>\n    </label>\n  }\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [attr.aria-label]=\"'Drop file or click to browse' | translate\"\n      (dropped)=\"onFileDropped($event)\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n@if (uploadChoice === 'editInline') {\n  <div class=\"d-col flex-grow min-height-0\">\n    <ng-content select=\"[c8yInlineEditor]\"></ng-content>\n  </div>\n}\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          class=\"form-control\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          name=\"fileUrl\"\n          type=\"text\"\n          required\n          data-cy=\"file-picker--fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          maxlength=\"{{ config.maxlength }}\"\n          [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n" }]
+                    ], template: "<div class=\"form-group\">\n  <label\n    class=\"c8y-radio\"\n    title=\"{{ 'Upload a binary' | translate }}\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadBinary\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label\n    class=\"c8y-radio\"\n    title=\"{{ 'Provide a file path' | translate }}\"\n    data-cy=\"file-picker--file-path-input\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadUrl\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    @if (isPopoverUsed()) {\n      <button\n        class=\"btn-help\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ fileUrlPopover | translate }}\"\n        placement=\"top\"\n        placement=\"top\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n        data-cy=\"file-picker--file-path-help\"\n      ></button>\n    }\n  </label>\n  @if (allowedUploadChoices.includes('provided')) {\n    <label\n      class=\"c8y-radio\"\n      title=\"{{ 'Mark as provided' | translate }}\"\n    >\n      <input\n        name=\"uploadChoice-{{ filePickerIndex }}\"\n        type=\"radio\"\n        value=\"provided\"\n        #radio\n        [(ngModel)]=\"uploadChoice\"\n        (click)=\"setProvidedOption()\"\n      />\n      <span></span>\n      <span>{{ 'Provided' | translate }}</span>\n      <button\n        class=\"btn-help\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ providedPopover | translate }}\"\n        placement=\"top\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    </label>\n  }\n  @if (allowedUploadChoices.includes('editInline')) {\n    <label\n      class=\"c8y-radio\"\n      title=\"{{ 'Edit inline' | translate }}\"\n    >\n      <input\n        name=\"uploadChoice-{{ filePickerIndex }}\"\n        type=\"radio\"\n        value=\"editInline\"\n        #radio\n        [(ngModel)]=\"uploadChoice\"\n        (click)=\"selectEditInline()\"\n      />\n      <span></span>\n      <span>{{ 'Edit inline' | translate }}</span>\n    </label>\n  }\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [attr.aria-label]=\"'Drop file or click to browse' | translate\"\n      (dropped)=\"onFileDropped($event)\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n@if (uploadChoice === 'editInline') {\n  <div class=\"d-col flex-grow min-height-0\">\n    <ng-content select=\"[c8yInlineEditor]\"></ng-content>\n  </div>\n}\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          class=\"form-control\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          name=\"fileUrl\"\n          type=\"text\"\n          required\n          data-cy=\"file-picker--fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          maxlength=\"{{ config.maxlength }}\"\n          [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n" }]
         }], propDecorators: { dropArea: [{
                 type: ViewChild,
                 args: [DropAreaComponent, { static: true }]
@@ -31972,7 +31972,6 @@ const BASELINE_ROWS = 24;
  * Ensures widgets maintain their visual proportions relative to the grid.
  */
 function scaleWidgetDimensions(widget, options) {
-    console.log('Scaled ?!', options);
     const { oldColumns, newColumns, oldRows, newRows } = options;
     const colScale = newColumns / oldColumns;
     const rowScale = oldRows && newRows ? newRows / oldRows : 1;
@@ -32709,6 +32708,18 @@ class WidgetsDashboardComponent {
         }
         return this.settings.defaultHeight;
     }
+    get scaledDefaultMinWidth() {
+        return Math.max(1, Math.round((this.settings.defaultMinWidth || 1) *
+            ((this.settings.columns || BASELINE_COLUMNS) / BASELINE_COLUMNS)));
+    }
+    get scaledDefaultMinHeight() {
+        if (this.settings.layout === 'custom' &&
+            this.settings.alignViewHeight &&
+            typeof this.settings.rows === 'number') {
+            return Math.max(1, Math.round((this.settings.defaultMinHeight || 1) * (this.settings.rows / BASELINE_ROWS)));
+        }
+        return this.settings.defaultMinHeight || 1;
+    }
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
@@ -32733,6 +32744,8 @@ class WidgetsDashboardComponent {
             translateDashboardTitle: true,
             defaultHeight: 4,
             defaultWidth: 4,
+            defaultMinWidth: 2,
+            defaultMinHeight: 1,
             allowFullscreen: false,
             canCopy: true,
             canDelete: true,
@@ -33059,7 +33072,7 @@ class WidgetsDashboardComponent {
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: WidgetsDashboardComponent, deps: [{ token: DynamicComponentService }, { token: i1$1.TranslateService }, { token: i1$3.ActivatedRoute }, { token: ModalService }, { token: WidgetGlobalAutoRefreshService }, { token: i1$3.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: WidgetsDashboardComponent, isStandalone: true, selector: "c8y-widgets-dashboard", inputs: { widgets: "widgets", context: "context", contextDashboard: "contextDashboard", _settings: ["settings", "_settings"], isCopyDisabled: "isCopyDisabled", breadcrumb: "breadcrumb", editModeButtons: "editModeButtons", isSaveDisabled: "isSaveDisabled", clearWidgetContentOnLeave: "clearWidgetContentOnLeave" }, outputs: { onAddWidget: "onAddWidget", onEditWidget: "onEditWidget", onDeleteWidget: "onDeleteWidget", onChangeDashboard: "onChangeDashboard", onResize: "onResize", onEditDashboard: "onEditDashboard", onCopyDashboard: "onCopyDashboard", onDeleteDashboard: "onDeleteDashboard", onChangeStart: "onChangeStart", onChangeEnd: "onChangeEnd", onSaveDashboard: "onSaveDashboard", onCancelDashboard: "onCancelDashboard", revertChange: "revertChange" }, host: { styleAttribute: "\n      display: block;\n    ", classAttribute: "dashboard c8y-grid-dashboard" }, providers: [WidgetsDashboardEventService], viewQueries: [{ propertyName: "dashboardChildren", predicate: DashboardChildComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (!!settings.title) {\n  <c8y-title>\n    @let dashboardTitle =\n      settings.translateDashboardTitle ? (settings.title | translate) : settings.title;\n    {{ dashboardTitle }}\n  </c8y-title>\n}\n\n@if (!!breadcrumb) {\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item\n      [icon]=\"breadcrumb.icon\"\n      [label]=\"breadcrumb.label\"\n      [path]=\"breadcrumb.path\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n}\n\n@if (!(editMode$ | async)) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  >\n    <button\n      class=\"btn btn-link animated fadeIn hidden-xs\"\n      title=\"{{ 'Edit widgets' | translate }}\"\n      type=\"button\"\n      [disabled]=\"settings.isDisabled\"\n      (click)=\"enableEditMode()\"\n      data-cy=\"c8y-widget-dashboard--edit-widgets\"\n    >\n      <i c8yIcon=\"send-backward\"></i>\n      <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n    </button>\n    <button\n      class=\"btn btn-link visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"send-backward\"></i>\n      <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (editMode$ | async) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  >\n    <button\n      class=\"btn btn-link animated fadeIn\"\n      title=\"{{ 'Add widget' | translate }}\"\n      type=\"button\"\n      (click)=\"onAddWidget.emit()\"\n      data-cy=\"widget-dashboard--Add-widget\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add widget' | translate }}\n    </button>\n  </c8y-action-bar-item>\n\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n    itemClass=\"d-flex a-i-center gap-8\"\n  >\n    <div class=\"input-group input-group-sm animated fadeIn\">\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default btn-sm btn-icon\"\n          [attr.aria-label]=\"'Undo' | translate\"\n          [tooltip]=\"\n            editModeButtons.undoButtonDisabled\n              ? ''\n              : (undoMessage\n                | translate: { changeToUndo: editModeButtons.changeToUndoName | translate })\n          \"\n          container=\"body\"\n          (click)=\"revertChange.emit('undo')\"\n          [disabled]=\"editModeButtons.undoButtonDisabled\"\n        >\n          <i [c8yIcon]=\"'undo'\"></i>\n        </button>\n      </div>\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default btn-sm btn-icon\"\n          [attr.aria-label]=\"'Redo' | translate\"\n          [tooltip]=\"\n            editModeButtons.redoButtonDisabled\n              ? ''\n              : (redoMessage\n                | translate: { changeToRedo: editModeButtons.changeToRedoName | translate })\n          \"\n          container=\"body\"\n          (click)=\"revertChange.emit('redo')\"\n          [disabled]=\"editModeButtons.redoButtonDisabled\"\n        >\n          <i [c8yIcon]=\"'redo'\"></i>\n        </button>\n      </div>\n      <span></span>\n    </div>\n    <div class=\"btn-group animated fadeIn\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        title=\"{{ 'Cancel' | translate }}\"\n        type=\"button\"\n        (click)=\"cancelDashboardSave()\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n      <button\n        class=\"btn btn-primary btn-sm m-l-8\"\n        title=\"{{ 'Save' | translate }}\"\n        type=\"button\"\n        [disabled]=\"editModeButtons.undoButtonDisabled && isSaveDisabled\"\n        (click)=\"saveDashboard()\"\n        data-cy=\"c8y-widgets-dashboard--save\"\n      >\n        {{ 'Save' | translate }}\n      </button>\n    </div>\n  </c8y-action-bar-item>\n}\n\n@if (onEditDashboard.observers.length) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <button\n      class=\"btn btn-link hidden-xs m-l-0\"\n      title=\"{{ 'Dashboard settings' | translate }}\"\n      type=\"button\"\n      [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n      (click)=\"onEditDashboard.emit()\"\n      data-cy=\"c8y-widgets-dashboard--edit-dashboard\"\n    >\n      <i c8yIcon=\"sorting-slider\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Dashboard settings' | translate }}\n      </span>\n    </button>\n    <button\n      class=\"btn btn-link visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"sorting-slider\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Dashboard settings' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.allowFullscreen) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"-5000\"\n    itemClass=\"pull-right\"\n  >\n    <button\n      class=\"btn btn-link\"\n      [attr.aria-label]=\"'Full screen' | translate\"\n      tooltip=\"{{ 'Full screen' | translate }}\"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [delay]=\"500\"\n      (click)=\"toggleFullscreen()\"\n      data-cy=\"widgets-dashboard--Full-screen\"\n    >\n      <i [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n        {{ 'Full screen' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.canCopy) {\n  <c8y-action-bar-item\n    [placement]=\"'more'\"\n    [priority]=\"-2000\"\n  >\n    <div class=\"d-flex a-i-center p-r-16\">\n      <button\n        class=\"hidden-xs\"\n        title=\"{{\n          (isCopyDisabled === true || !isCopyDisabled?.state ? 'Disabled' : copyDashboardLabel)\n            | translate\n        }}\"\n        type=\"button\"\n        [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"onCopyDashboard.emit()\"\n        [disabled]=\"isCopyDisabled === true || !isCopyDisabled?.state || (editMode$ | async)\"\n      >\n        <i c8yIcon=\"clone\"></i>\n        <span>{{ copyDashboardLabel | translate }}</span>\n      </button>\n      @if (!isCopyDisabled?.state && copyDisabledPopoverMsg) {\n        <button\n          class=\"btn-help btn-help--sm hidden-xs flex-no-shrink\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"copyDisabledPopoverMsg | translate\"\n          placement=\"top\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          data-cy=\"widgets-dashboard--info-copy-dashboard\"\n          (click)=\"$event.preventDefault(); $event.stopPropagation()\"\n        ></button>\n      }\n    </div>\n    <button\n      class=\"visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"clone\"></i>\n      <span>{{ copyDashboardLabel | translate }}</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.canDelete && onDeleteDashboard.observers.length) {\n  <c8y-action-bar-item\n    [placement]=\"'more'\"\n    [priority]=\"-3000\"\n  >\n    <button\n      class=\"hidden-xs\"\n      title=\"{{ 'Delete dashboard' | translate }}\"\n      type=\"button\"\n      data-cy=\"widgets-dashboard--delete-dashboard\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n      (click)=\"onDeleteDashboard.emit()\"\n      [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n    >\n      <i c8yIcon=\"delete\"></i>\n      <span translate>Delete dashboard</span>\n    </button>\n    <button\n      class=\"visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      data-cy=\"widgets-dashboard--delete-dashboard-mobile\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"delete\"></i>\n      <span translate>Delete dashboard</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (!(isLoadingWidgets$ | async)) {\n  @if (resolvedWidgets$ | async; as widgetsToDisplay) {\n    <!-- empty state -->\n    @if (widgetsToDisplay?.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-device'\"\n        [title]=\"'No widgets to display.' | translate\"\n      >\n        @if (onAddWidget.observers.length) {\n          <div>\n            @if (editMode$ | async) {\n              <p translate>Add widgets to this dashboard.</p>\n            }\n            @if (!(editMode$ | async)) {\n              <p translate>Click \"Edit widgets\" to unlock</p>\n            }\n            <div>\n              @if (!settings.isDisabled && (editMode$ | async)) {\n                <button\n                  class=\"btn btn-primary m-t-16\"\n                  title=\"{{ 'Add widget' | translate }}\"\n                  type=\"button\"\n                  (click)=\"onAddWidget.emit()\"\n                  data-cy=\"c8y-widgets-dashboard--add-widget\"\n                  translate\n                >\n                  Add widget\n                </button>\n              }\n            </div>\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/working-with-dashboards\">user documentation</a>.\n              </small>\n            </p>\n          </div>\n        }\n      </c8y-ui-empty-state>\n    }\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      [layout]=\"settings.layout\"\n      [rows]=\"settings.rows\"\n      [alignViewHeight]=\"settings.alignViewHeight\"\n      [float]=\"settings.float\"\n      [gap]=\"settings.widgetMargin\"\n      #dashboard\n    >\n      @for (widget of widgetsToDisplay; track widget.id || widget.name || $index) {\n        <c8y-dashboard-child\n          [class]=\"widget.classes\"\n          [x]=\"widget._x\"\n          [y]=\"widget._y\"\n          [width]=\"widget._width || scaledDefaultWidth\"\n          [height]=\"widget._height || scaledDefaultHeight\"\n          [margin]=\"settings.widgetMargin\"\n          [data]=\"widget\"\n          [useIntersection]=\"true\"\n          [editMode]=\"editMode$ | async\"\n          (changeStart)=\"\n            onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\n          \"\n          (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n          [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n          #child\n        >\n          @let widgetTitle =\n            widget.title | translate: { noTranslateRemoveContext: !settings.translateWidgetTitle };\n          <c8y-dashboard-child-title [attr.title]=\"widgetTitle\">\n            <span data-cy=\"c8y-dashboard-list--device-widget\">\n              {{ widgetTitle }}\n            </span>\n          </c8y-dashboard-child-title>\n          @if (onEditWidget.observers.length) {\n            <c8y-dashboard-child-action>\n              <button\n                title=\"{{ 'Edit widget' | translate }}\"\n                type=\"button\"\n                data-cy=\"widgets-dashboard--Edit-widget\"\n                (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n              >\n                <i c8yIcon=\"pencil\"></i>\n                <span translate>Edit</span>\n              </button>\n            </c8y-dashboard-child-action>\n          }\n          @if (onDeleteWidget.observers.length) {\n            <c8y-dashboard-child-action>\n              <button\n                title=\"{{ 'Remove widget' | translate }}\"\n                type=\"button\"\n                data-cy=\"c8y-widgets-dashboard--remove-widget\"\n                (click)=\"\n                  onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\n                \"\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span translate>Remove</span>\n              </button>\n            </c8y-dashboard-child-action>\n          }\n\n          @if (child.intersected) {\n            <c8y-dynamic-component\n              [componentId]=\"widget.componentId || widget.name\"\n              [config]=\"\n                widget.templateUrl || widget.widgetComponent\n                  ? { child: widget, dashboard: contextDashboard, context: context }\n                  : widget.config\n              \"\n              (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n            ></c8y-dynamic-component>\n          }\n        </c8y-dashboard-child>\n      }\n    </c8y-dashboard>\n  }\n} @else {\n  <c8y-loading class=\"col-xs-12 text-center\"></c8y-loading>\n}\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$4.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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "layout", "alignViewHeight", "float", "gap", "minH", "minW", "rows"], outputs: ["dashboardChange"] }, { kind: "component", type: DashboardChildComponent, selector: "c8y-dashboard-child", inputs: ["x", "y", "width", "height", "minH", "minW", "data", "margin", "useIntersection", "isFrozen", "canToggleFullscreen", "editMode", "class"], outputs: ["changeStart", "changeEnd", "toggleFullscreen"] }, { kind: "component", type: DashboardChildTitleComponent, selector: "c8y-dashboard-child-title" }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { kind: "component", type: DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: WidgetsDashboardComponent, isStandalone: true, selector: "c8y-widgets-dashboard", inputs: { widgets: "widgets", context: "context", contextDashboard: "contextDashboard", _settings: ["settings", "_settings"], isCopyDisabled: "isCopyDisabled", breadcrumb: "breadcrumb", editModeButtons: "editModeButtons", isSaveDisabled: "isSaveDisabled", clearWidgetContentOnLeave: "clearWidgetContentOnLeave" }, outputs: { onAddWidget: "onAddWidget", onEditWidget: "onEditWidget", onDeleteWidget: "onDeleteWidget", onChangeDashboard: "onChangeDashboard", onResize: "onResize", onEditDashboard: "onEditDashboard", onCopyDashboard: "onCopyDashboard", onDeleteDashboard: "onDeleteDashboard", onChangeStart: "onChangeStart", onChangeEnd: "onChangeEnd", onSaveDashboard: "onSaveDashboard", onCancelDashboard: "onCancelDashboard", revertChange: "revertChange" }, host: { styleAttribute: "\n      display: block;\n    ", classAttribute: "dashboard c8y-grid-dashboard" }, providers: [WidgetsDashboardEventService], viewQueries: [{ propertyName: "dashboardChildren", predicate: DashboardChildComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (!!settings.title) {\n  <c8y-title>\n    @let dashboardTitle =\n      settings.translateDashboardTitle ? (settings.title | translate) : settings.title;\n    {{ dashboardTitle }}\n  </c8y-title>\n}\n\n@if (!!breadcrumb) {\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item\n      [icon]=\"breadcrumb.icon\"\n      [label]=\"breadcrumb.label\"\n      [path]=\"breadcrumb.path\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n}\n\n@if (!(editMode$ | async)) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  >\n    <button\n      class=\"btn btn-link animated fadeIn hidden-xs\"\n      title=\"{{ 'Edit widgets' | translate }}\"\n      type=\"button\"\n      [disabled]=\"settings.isDisabled\"\n      (click)=\"enableEditMode()\"\n      data-cy=\"c8y-widget-dashboard--edit-widgets\"\n    >\n      <i c8yIcon=\"send-backward\"></i>\n      <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n    </button>\n    <button\n      class=\"btn btn-link visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"send-backward\"></i>\n      <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (editMode$ | async) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  >\n    <button\n      class=\"btn btn-link animated fadeIn\"\n      title=\"{{ 'Add widget' | translate }}\"\n      type=\"button\"\n      (click)=\"onAddWidget.emit()\"\n      data-cy=\"widget-dashboard--Add-widget\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add widget' | translate }}\n    </button>\n  </c8y-action-bar-item>\n\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n    itemClass=\"d-flex a-i-center gap-8\"\n  >\n    <div class=\"input-group input-group-sm animated fadeIn\">\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default btn-sm btn-icon\"\n          [attr.aria-label]=\"'Undo' | translate\"\n          [tooltip]=\"\n            editModeButtons.undoButtonDisabled\n              ? ''\n              : (undoMessage\n                | translate: { changeToUndo: editModeButtons.changeToUndoName | translate })\n          \"\n          container=\"body\"\n          (click)=\"revertChange.emit('undo')\"\n          [disabled]=\"editModeButtons.undoButtonDisabled\"\n        >\n          <i [c8yIcon]=\"'undo'\"></i>\n        </button>\n      </div>\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default btn-sm btn-icon\"\n          [attr.aria-label]=\"'Redo' | translate\"\n          [tooltip]=\"\n            editModeButtons.redoButtonDisabled\n              ? ''\n              : (redoMessage\n                | translate: { changeToRedo: editModeButtons.changeToRedoName | translate })\n          \"\n          container=\"body\"\n          (click)=\"revertChange.emit('redo')\"\n          [disabled]=\"editModeButtons.redoButtonDisabled\"\n        >\n          <i [c8yIcon]=\"'redo'\"></i>\n        </button>\n      </div>\n      <span></span>\n    </div>\n    <div class=\"btn-group animated fadeIn\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        title=\"{{ 'Cancel' | translate }}\"\n        type=\"button\"\n        (click)=\"cancelDashboardSave()\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n      <button\n        class=\"btn btn-primary btn-sm m-l-8\"\n        title=\"{{ 'Save' | translate }}\"\n        type=\"button\"\n        [disabled]=\"editModeButtons.undoButtonDisabled && isSaveDisabled\"\n        (click)=\"saveDashboard()\"\n        data-cy=\"c8y-widgets-dashboard--save\"\n      >\n        {{ 'Save' | translate }}\n      </button>\n    </div>\n  </c8y-action-bar-item>\n}\n\n@if (onEditDashboard.observers.length) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <button\n      class=\"btn btn-link hidden-xs m-l-0\"\n      title=\"{{ 'Dashboard settings' | translate }}\"\n      type=\"button\"\n      [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n      (click)=\"onEditDashboard.emit()\"\n      data-cy=\"c8y-widgets-dashboard--edit-dashboard\"\n    >\n      <i c8yIcon=\"sorting-slider\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Dashboard settings' | translate }}\n      </span>\n    </button>\n    <button\n      class=\"btn btn-link visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"sorting-slider\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Dashboard settings' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.allowFullscreen) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"-5000\"\n    itemClass=\"pull-right\"\n  >\n    <button\n      class=\"btn btn-link\"\n      [attr.aria-label]=\"'Full screen' | translate\"\n      tooltip=\"{{ 'Full screen' | translate }}\"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [delay]=\"500\"\n      (click)=\"toggleFullscreen()\"\n      data-cy=\"widgets-dashboard--Full-screen\"\n    >\n      <i [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n        {{ 'Full screen' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.canCopy) {\n  <c8y-action-bar-item\n    [placement]=\"'more'\"\n    [priority]=\"-2000\"\n  >\n    <div class=\"d-flex a-i-center p-r-16\">\n      <button\n        class=\"hidden-xs\"\n        title=\"{{\n          (isCopyDisabled === true || !isCopyDisabled?.state ? 'Disabled' : copyDashboardLabel)\n            | translate\n        }}\"\n        type=\"button\"\n        [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"onCopyDashboard.emit()\"\n        [disabled]=\"isCopyDisabled === true || !isCopyDisabled?.state || (editMode$ | async)\"\n      >\n        <i c8yIcon=\"clone\"></i>\n        <span>{{ copyDashboardLabel | translate }}</span>\n      </button>\n      @if (!isCopyDisabled?.state && copyDisabledPopoverMsg) {\n        <button\n          class=\"btn-help btn-help--sm hidden-xs flex-no-shrink\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"copyDisabledPopoverMsg | translate\"\n          placement=\"top\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          data-cy=\"widgets-dashboard--info-copy-dashboard\"\n          (click)=\"$event.preventDefault(); $event.stopPropagation()\"\n        ></button>\n      }\n    </div>\n    <button\n      class=\"visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"clone\"></i>\n      <span>{{ copyDashboardLabel | translate }}</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.canDelete && onDeleteDashboard.observers.length) {\n  <c8y-action-bar-item\n    [placement]=\"'more'\"\n    [priority]=\"-3000\"\n  >\n    <button\n      class=\"hidden-xs\"\n      title=\"{{ 'Delete dashboard' | translate }}\"\n      type=\"button\"\n      data-cy=\"widgets-dashboard--delete-dashboard\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n      (click)=\"onDeleteDashboard.emit()\"\n      [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n    >\n      <i c8yIcon=\"delete\"></i>\n      <span translate>Delete dashboard</span>\n    </button>\n    <button\n      class=\"visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      data-cy=\"widgets-dashboard--delete-dashboard-mobile\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"delete\"></i>\n      <span translate>Delete dashboard</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (!(isLoadingWidgets$ | async)) {\n  @if (resolvedWidgets$ | async; as widgetsToDisplay) {\n    <!-- empty state -->\n    @if (widgetsToDisplay?.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-device'\"\n        [title]=\"'No widgets to display.' | translate\"\n      >\n        @if (onAddWidget.observers.length) {\n          <div>\n            @if (editMode$ | async) {\n              <p translate>Add widgets to this dashboard.</p>\n            }\n            @if (!(editMode$ | async)) {\n              <p translate>Click \"Edit widgets\" to unlock</p>\n            }\n            <div>\n              @if (!settings.isDisabled && (editMode$ | async)) {\n                <button\n                  class=\"btn btn-primary m-t-16\"\n                  title=\"{{ 'Add widget' | translate }}\"\n                  type=\"button\"\n                  (click)=\"onAddWidget.emit()\"\n                  data-cy=\"c8y-widgets-dashboard--add-widget\"\n                  translate\n                >\n                  Add widget\n                </button>\n              }\n            </div>\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/working-with-dashboards\">user documentation</a>.\n              </small>\n            </p>\n          </div>\n        }\n      </c8y-ui-empty-state>\n    }\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      [layout]=\"settings.layout\"\n      [rows]=\"settings.rows\"\n      [alignViewHeight]=\"settings.alignViewHeight\"\n      [float]=\"settings.float\"\n      [gap]=\"settings.widgetMargin\"\n      #dashboard\n    >\n      @for (widget of widgetsToDisplay; track widget.id || widget.name || $index) {\n        <c8y-dashboard-child\n          [class]=\"widget.classes\"\n          [x]=\"widget._x\"\n          [y]=\"widget._y\"\n          [width]=\"widget._width || scaledDefaultWidth\"\n          [height]=\"widget._height || scaledDefaultHeight\"\n          [minW]=\"widget._minW || scaledDefaultMinWidth\"\n          [minH]=\"widget._minH || scaledDefaultMinHeight\"\n          [margin]=\"settings.widgetMargin\"\n          [data]=\"widget\"\n          [useIntersection]=\"true\"\n          [editMode]=\"editMode$ | async\"\n          (changeStart)=\"\n            onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\n          \"\n          (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n          [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n          #child\n        >\n          @let widgetTitle =\n            widget.title | translate: { noTranslateRemoveContext: !settings.translateWidgetTitle };\n          <c8y-dashboard-child-title [attr.title]=\"widgetTitle\">\n            <span data-cy=\"c8y-dashboard-list--device-widget\">\n              {{ widgetTitle }}\n            </span>\n          </c8y-dashboard-child-title>\n          @if (onEditWidget.observers.length) {\n            <c8y-dashboard-child-action>\n              <button\n                title=\"{{ 'Edit widget' | translate }}\"\n                type=\"button\"\n                data-cy=\"widgets-dashboard--Edit-widget\"\n                (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n              >\n                <i c8yIcon=\"pencil\"></i>\n                <span translate>Edit</span>\n              </button>\n            </c8y-dashboard-child-action>\n          }\n          @if (onDeleteWidget.observers.length) {\n            <c8y-dashboard-child-action>\n              <button\n                title=\"{{ 'Remove widget' | translate }}\"\n                type=\"button\"\n                data-cy=\"c8y-widgets-dashboard--remove-widget\"\n                (click)=\"\n                  onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\n                \"\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span translate>Remove</span>\n              </button>\n            </c8y-dashboard-child-action>\n          }\n\n          @if (child.intersected) {\n            <c8y-dynamic-component\n              [componentId]=\"widget.componentId || widget.name\"\n              [config]=\"\n                widget.templateUrl || widget.widgetComponent\n                  ? { child: widget, dashboard: contextDashboard, context: context }\n                  : widget.config\n              \"\n              (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n            ></c8y-dynamic-component>\n          }\n        </c8y-dashboard-child>\n      }\n    </c8y-dashboard>\n  }\n} @else {\n  <c8y-loading class=\"col-xs-12 text-center\"></c8y-loading>\n}\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$4.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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "layout", "alignViewHeight", "float", "gap", "minH", "minW", "rows"], outputs: ["dashboardChange"] }, { kind: "component", type: DashboardChildComponent, selector: "c8y-dashboard-child", inputs: ["x", "y", "width", "height", "minH", "minW", "data", "margin", "useIntersection", "isFrozen", "canToggleFullscreen", "editMode", "class"], outputs: ["changeStart", "changeEnd", "toggleFullscreen"] }, { kind: "component", type: DashboardChildTitleComponent, selector: "c8y-dashboard-child-title" }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { kind: "component", type: DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: WidgetsDashboardComponent, decorators: [{
             type: Component,
@@ -33091,7 +33104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         DynamicComponentComponent,
                         C8yTranslatePipe,
                         AsyncPipe
-                    ], template: "@if (!!settings.title) {\n  <c8y-title>\n    @let dashboardTitle =\n      settings.translateDashboardTitle ? (settings.title | translate) : settings.title;\n    {{ dashboardTitle }}\n  </c8y-title>\n}\n\n@if (!!breadcrumb) {\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item\n      [icon]=\"breadcrumb.icon\"\n      [label]=\"breadcrumb.label\"\n      [path]=\"breadcrumb.path\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n}\n\n@if (!(editMode$ | async)) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  >\n    <button\n      class=\"btn btn-link animated fadeIn hidden-xs\"\n      title=\"{{ 'Edit widgets' | translate }}\"\n      type=\"button\"\n      [disabled]=\"settings.isDisabled\"\n      (click)=\"enableEditMode()\"\n      data-cy=\"c8y-widget-dashboard--edit-widgets\"\n    >\n      <i c8yIcon=\"send-backward\"></i>\n      <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n    </button>\n    <button\n      class=\"btn btn-link visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"send-backward\"></i>\n      <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (editMode$ | async) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  >\n    <button\n      class=\"btn btn-link animated fadeIn\"\n      title=\"{{ 'Add widget' | translate }}\"\n      type=\"button\"\n      (click)=\"onAddWidget.emit()\"\n      data-cy=\"widget-dashboard--Add-widget\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add widget' | translate }}\n    </button>\n  </c8y-action-bar-item>\n\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n    itemClass=\"d-flex a-i-center gap-8\"\n  >\n    <div class=\"input-group input-group-sm animated fadeIn\">\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default btn-sm btn-icon\"\n          [attr.aria-label]=\"'Undo' | translate\"\n          [tooltip]=\"\n            editModeButtons.undoButtonDisabled\n              ? ''\n              : (undoMessage\n                | translate: { changeToUndo: editModeButtons.changeToUndoName | translate })\n          \"\n          container=\"body\"\n          (click)=\"revertChange.emit('undo')\"\n          [disabled]=\"editModeButtons.undoButtonDisabled\"\n        >\n          <i [c8yIcon]=\"'undo'\"></i>\n        </button>\n      </div>\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default btn-sm btn-icon\"\n          [attr.aria-label]=\"'Redo' | translate\"\n          [tooltip]=\"\n            editModeButtons.redoButtonDisabled\n              ? ''\n              : (redoMessage\n                | translate: { changeToRedo: editModeButtons.changeToRedoName | translate })\n          \"\n          container=\"body\"\n          (click)=\"revertChange.emit('redo')\"\n          [disabled]=\"editModeButtons.redoButtonDisabled\"\n        >\n          <i [c8yIcon]=\"'redo'\"></i>\n        </button>\n      </div>\n      <span></span>\n    </div>\n    <div class=\"btn-group animated fadeIn\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        title=\"{{ 'Cancel' | translate }}\"\n        type=\"button\"\n        (click)=\"cancelDashboardSave()\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n      <button\n        class=\"btn btn-primary btn-sm m-l-8\"\n        title=\"{{ 'Save' | translate }}\"\n        type=\"button\"\n        [disabled]=\"editModeButtons.undoButtonDisabled && isSaveDisabled\"\n        (click)=\"saveDashboard()\"\n        data-cy=\"c8y-widgets-dashboard--save\"\n      >\n        {{ 'Save' | translate }}\n      </button>\n    </div>\n  </c8y-action-bar-item>\n}\n\n@if (onEditDashboard.observers.length) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <button\n      class=\"btn btn-link hidden-xs m-l-0\"\n      title=\"{{ 'Dashboard settings' | translate }}\"\n      type=\"button\"\n      [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n      (click)=\"onEditDashboard.emit()\"\n      data-cy=\"c8y-widgets-dashboard--edit-dashboard\"\n    >\n      <i c8yIcon=\"sorting-slider\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Dashboard settings' | translate }}\n      </span>\n    </button>\n    <button\n      class=\"btn btn-link visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"sorting-slider\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Dashboard settings' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.allowFullscreen) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"-5000\"\n    itemClass=\"pull-right\"\n  >\n    <button\n      class=\"btn btn-link\"\n      [attr.aria-label]=\"'Full screen' | translate\"\n      tooltip=\"{{ 'Full screen' | translate }}\"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [delay]=\"500\"\n      (click)=\"toggleFullscreen()\"\n      data-cy=\"widgets-dashboard--Full-screen\"\n    >\n      <i [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n        {{ 'Full screen' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.canCopy) {\n  <c8y-action-bar-item\n    [placement]=\"'more'\"\n    [priority]=\"-2000\"\n  >\n    <div class=\"d-flex a-i-center p-r-16\">\n      <button\n        class=\"hidden-xs\"\n        title=\"{{\n          (isCopyDisabled === true || !isCopyDisabled?.state ? 'Disabled' : copyDashboardLabel)\n            | translate\n        }}\"\n        type=\"button\"\n        [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"onCopyDashboard.emit()\"\n        [disabled]=\"isCopyDisabled === true || !isCopyDisabled?.state || (editMode$ | async)\"\n      >\n        <i c8yIcon=\"clone\"></i>\n        <span>{{ copyDashboardLabel | translate }}</span>\n      </button>\n      @if (!isCopyDisabled?.state && copyDisabledPopoverMsg) {\n        <button\n          class=\"btn-help btn-help--sm hidden-xs flex-no-shrink\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"copyDisabledPopoverMsg | translate\"\n          placement=\"top\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          data-cy=\"widgets-dashboard--info-copy-dashboard\"\n          (click)=\"$event.preventDefault(); $event.stopPropagation()\"\n        ></button>\n      }\n    </div>\n    <button\n      class=\"visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"clone\"></i>\n      <span>{{ copyDashboardLabel | translate }}</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.canDelete && onDeleteDashboard.observers.length) {\n  <c8y-action-bar-item\n    [placement]=\"'more'\"\n    [priority]=\"-3000\"\n  >\n    <button\n      class=\"hidden-xs\"\n      title=\"{{ 'Delete dashboard' | translate }}\"\n      type=\"button\"\n      data-cy=\"widgets-dashboard--delete-dashboard\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n      (click)=\"onDeleteDashboard.emit()\"\n      [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n    >\n      <i c8yIcon=\"delete\"></i>\n      <span translate>Delete dashboard</span>\n    </button>\n    <button\n      class=\"visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      data-cy=\"widgets-dashboard--delete-dashboard-mobile\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"delete\"></i>\n      <span translate>Delete dashboard</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (!(isLoadingWidgets$ | async)) {\n  @if (resolvedWidgets$ | async; as widgetsToDisplay) {\n    <!-- empty state -->\n    @if (widgetsToDisplay?.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-device'\"\n        [title]=\"'No widgets to display.' | translate\"\n      >\n        @if (onAddWidget.observers.length) {\n          <div>\n            @if (editMode$ | async) {\n              <p translate>Add widgets to this dashboard.</p>\n            }\n            @if (!(editMode$ | async)) {\n              <p translate>Click \"Edit widgets\" to unlock</p>\n            }\n            <div>\n              @if (!settings.isDisabled && (editMode$ | async)) {\n                <button\n                  class=\"btn btn-primary m-t-16\"\n                  title=\"{{ 'Add widget' | translate }}\"\n                  type=\"button\"\n                  (click)=\"onAddWidget.emit()\"\n                  data-cy=\"c8y-widgets-dashboard--add-widget\"\n                  translate\n                >\n                  Add widget\n                </button>\n              }\n            </div>\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/working-with-dashboards\">user documentation</a>.\n              </small>\n            </p>\n          </div>\n        }\n      </c8y-ui-empty-state>\n    }\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      [layout]=\"settings.layout\"\n      [rows]=\"settings.rows\"\n      [alignViewHeight]=\"settings.alignViewHeight\"\n      [float]=\"settings.float\"\n      [gap]=\"settings.widgetMargin\"\n      #dashboard\n    >\n      @for (widget of widgetsToDisplay; track widget.id || widget.name || $index) {\n        <c8y-dashboard-child\n          [class]=\"widget.classes\"\n          [x]=\"widget._x\"\n          [y]=\"widget._y\"\n          [width]=\"widget._width || scaledDefaultWidth\"\n          [height]=\"widget._height || scaledDefaultHeight\"\n          [margin]=\"settings.widgetMargin\"\n          [data]=\"widget\"\n          [useIntersection]=\"true\"\n          [editMode]=\"editMode$ | async\"\n          (changeStart)=\"\n            onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\n          \"\n          (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n          [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n          #child\n        >\n          @let widgetTitle =\n            widget.title | translate: { noTranslateRemoveContext: !settings.translateWidgetTitle };\n          <c8y-dashboard-child-title [attr.title]=\"widgetTitle\">\n            <span data-cy=\"c8y-dashboard-list--device-widget\">\n              {{ widgetTitle }}\n            </span>\n          </c8y-dashboard-child-title>\n          @if (onEditWidget.observers.length) {\n            <c8y-dashboard-child-action>\n              <button\n                title=\"{{ 'Edit widget' | translate }}\"\n                type=\"button\"\n                data-cy=\"widgets-dashboard--Edit-widget\"\n                (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n              >\n                <i c8yIcon=\"pencil\"></i>\n                <span translate>Edit</span>\n              </button>\n            </c8y-dashboard-child-action>\n          }\n          @if (onDeleteWidget.observers.length) {\n            <c8y-dashboard-child-action>\n              <button\n                title=\"{{ 'Remove widget' | translate }}\"\n                type=\"button\"\n                data-cy=\"c8y-widgets-dashboard--remove-widget\"\n                (click)=\"\n                  onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\n                \"\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span translate>Remove</span>\n              </button>\n            </c8y-dashboard-child-action>\n          }\n\n          @if (child.intersected) {\n            <c8y-dynamic-component\n              [componentId]=\"widget.componentId || widget.name\"\n              [config]=\"\n                widget.templateUrl || widget.widgetComponent\n                  ? { child: widget, dashboard: contextDashboard, context: context }\n                  : widget.config\n              \"\n              (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n            ></c8y-dynamic-component>\n          }\n        </c8y-dashboard-child>\n      }\n    </c8y-dashboard>\n  }\n} @else {\n  <c8y-loading class=\"col-xs-12 text-center\"></c8y-loading>\n}\n" }]
+                    ], template: "@if (!!settings.title) {\n  <c8y-title>\n    @let dashboardTitle =\n      settings.translateDashboardTitle ? (settings.title | translate) : settings.title;\n    {{ dashboardTitle }}\n  </c8y-title>\n}\n\n@if (!!breadcrumb) {\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item\n      [icon]=\"breadcrumb.icon\"\n      [label]=\"breadcrumb.label\"\n      [path]=\"breadcrumb.path\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n}\n\n@if (!(editMode$ | async)) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  >\n    <button\n      class=\"btn btn-link animated fadeIn hidden-xs\"\n      title=\"{{ 'Edit widgets' | translate }}\"\n      type=\"button\"\n      [disabled]=\"settings.isDisabled\"\n      (click)=\"enableEditMode()\"\n      data-cy=\"c8y-widget-dashboard--edit-widgets\"\n    >\n      <i c8yIcon=\"send-backward\"></i>\n      <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n    </button>\n    <button\n      class=\"btn btn-link visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"send-backward\"></i>\n      <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (editMode$ | async) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  >\n    <button\n      class=\"btn btn-link animated fadeIn\"\n      title=\"{{ 'Add widget' | translate }}\"\n      type=\"button\"\n      (click)=\"onAddWidget.emit()\"\n      data-cy=\"widget-dashboard--Add-widget\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add widget' | translate }}\n    </button>\n  </c8y-action-bar-item>\n\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n    itemClass=\"d-flex a-i-center gap-8\"\n  >\n    <div class=\"input-group input-group-sm animated fadeIn\">\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default btn-sm btn-icon\"\n          [attr.aria-label]=\"'Undo' | translate\"\n          [tooltip]=\"\n            editModeButtons.undoButtonDisabled\n              ? ''\n              : (undoMessage\n                | translate: { changeToUndo: editModeButtons.changeToUndoName | translate })\n          \"\n          container=\"body\"\n          (click)=\"revertChange.emit('undo')\"\n          [disabled]=\"editModeButtons.undoButtonDisabled\"\n        >\n          <i [c8yIcon]=\"'undo'\"></i>\n        </button>\n      </div>\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default btn-sm btn-icon\"\n          [attr.aria-label]=\"'Redo' | translate\"\n          [tooltip]=\"\n            editModeButtons.redoButtonDisabled\n              ? ''\n              : (redoMessage\n                | translate: { changeToRedo: editModeButtons.changeToRedoName | translate })\n          \"\n          container=\"body\"\n          (click)=\"revertChange.emit('redo')\"\n          [disabled]=\"editModeButtons.redoButtonDisabled\"\n        >\n          <i [c8yIcon]=\"'redo'\"></i>\n        </button>\n      </div>\n      <span></span>\n    </div>\n    <div class=\"btn-group animated fadeIn\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        title=\"{{ 'Cancel' | translate }}\"\n        type=\"button\"\n        (click)=\"cancelDashboardSave()\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n      <button\n        class=\"btn btn-primary btn-sm m-l-8\"\n        title=\"{{ 'Save' | translate }}\"\n        type=\"button\"\n        [disabled]=\"editModeButtons.undoButtonDisabled && isSaveDisabled\"\n        (click)=\"saveDashboard()\"\n        data-cy=\"c8y-widgets-dashboard--save\"\n      >\n        {{ 'Save' | translate }}\n      </button>\n    </div>\n  </c8y-action-bar-item>\n}\n\n@if (onEditDashboard.observers.length) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <button\n      class=\"btn btn-link hidden-xs m-l-0\"\n      title=\"{{ 'Dashboard settings' | translate }}\"\n      type=\"button\"\n      [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n      (click)=\"onEditDashboard.emit()\"\n      data-cy=\"c8y-widgets-dashboard--edit-dashboard\"\n    >\n      <i c8yIcon=\"sorting-slider\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Dashboard settings' | translate }}\n      </span>\n    </button>\n    <button\n      class=\"btn btn-link visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"sorting-slider\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Dashboard settings' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.allowFullscreen) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"-5000\"\n    itemClass=\"pull-right\"\n  >\n    <button\n      class=\"btn btn-link\"\n      [attr.aria-label]=\"'Full screen' | translate\"\n      tooltip=\"{{ 'Full screen' | translate }}\"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [delay]=\"500\"\n      (click)=\"toggleFullscreen()\"\n      data-cy=\"widgets-dashboard--Full-screen\"\n    >\n      <i [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n        {{ 'Full screen' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.canCopy) {\n  <c8y-action-bar-item\n    [placement]=\"'more'\"\n    [priority]=\"-2000\"\n  >\n    <div class=\"d-flex a-i-center p-r-16\">\n      <button\n        class=\"hidden-xs\"\n        title=\"{{\n          (isCopyDisabled === true || !isCopyDisabled?.state ? 'Disabled' : copyDashboardLabel)\n            | translate\n        }}\"\n        type=\"button\"\n        [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"onCopyDashboard.emit()\"\n        [disabled]=\"isCopyDisabled === true || !isCopyDisabled?.state || (editMode$ | async)\"\n      >\n        <i c8yIcon=\"clone\"></i>\n        <span>{{ copyDashboardLabel | translate }}</span>\n      </button>\n      @if (!isCopyDisabled?.state && copyDisabledPopoverMsg) {\n        <button\n          class=\"btn-help btn-help--sm hidden-xs flex-no-shrink\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"copyDisabledPopoverMsg | translate\"\n          placement=\"top\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          data-cy=\"widgets-dashboard--info-copy-dashboard\"\n          (click)=\"$event.preventDefault(); $event.stopPropagation()\"\n        ></button>\n      }\n    </div>\n    <button\n      class=\"visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"clone\"></i>\n      <span>{{ copyDashboardLabel | translate }}</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.canDelete && onDeleteDashboard.observers.length) {\n  <c8y-action-bar-item\n    [placement]=\"'more'\"\n    [priority]=\"-3000\"\n  >\n    <button\n      class=\"hidden-xs\"\n      title=\"{{ 'Delete dashboard' | translate }}\"\n      type=\"button\"\n      data-cy=\"widgets-dashboard--delete-dashboard\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n      (click)=\"onDeleteDashboard.emit()\"\n      [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n    >\n      <i c8yIcon=\"delete\"></i>\n      <span translate>Delete dashboard</span>\n    </button>\n    <button\n      class=\"visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      data-cy=\"widgets-dashboard--delete-dashboard-mobile\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"delete\"></i>\n      <span translate>Delete dashboard</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (!(isLoadingWidgets$ | async)) {\n  @if (resolvedWidgets$ | async; as widgetsToDisplay) {\n    <!-- empty state -->\n    @if (widgetsToDisplay?.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-device'\"\n        [title]=\"'No widgets to display.' | translate\"\n      >\n        @if (onAddWidget.observers.length) {\n          <div>\n            @if (editMode$ | async) {\n              <p translate>Add widgets to this dashboard.</p>\n            }\n            @if (!(editMode$ | async)) {\n              <p translate>Click \"Edit widgets\" to unlock</p>\n            }\n            <div>\n              @if (!settings.isDisabled && (editMode$ | async)) {\n                <button\n                  class=\"btn btn-primary m-t-16\"\n                  title=\"{{ 'Add widget' | translate }}\"\n                  type=\"button\"\n                  (click)=\"onAddWidget.emit()\"\n                  data-cy=\"c8y-widgets-dashboard--add-widget\"\n                  translate\n                >\n                  Add widget\n                </button>\n              }\n            </div>\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/working-with-dashboards\">user documentation</a>.\n              </small>\n            </p>\n          </div>\n        }\n      </c8y-ui-empty-state>\n    }\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      [layout]=\"settings.layout\"\n      [rows]=\"settings.rows\"\n      [alignViewHeight]=\"settings.alignViewHeight\"\n      [float]=\"settings.float\"\n      [gap]=\"settings.widgetMargin\"\n      #dashboard\n    >\n      @for (widget of widgetsToDisplay; track widget.id || widget.name || $index) {\n        <c8y-dashboard-child\n          [class]=\"widget.classes\"\n          [x]=\"widget._x\"\n          [y]=\"widget._y\"\n          [width]=\"widget._width || scaledDefaultWidth\"\n          [height]=\"widget._height || scaledDefaultHeight\"\n          [minW]=\"widget._minW || scaledDefaultMinWidth\"\n          [minH]=\"widget._minH || scaledDefaultMinHeight\"\n          [margin]=\"settings.widgetMargin\"\n          [data]=\"widget\"\n          [useIntersection]=\"true\"\n          [editMode]=\"editMode$ | async\"\n          (changeStart)=\"\n            onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\n          \"\n          (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n          [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n          #child\n        >\n          @let widgetTitle =\n            widget.title | translate: { noTranslateRemoveContext: !settings.translateWidgetTitle };\n          <c8y-dashboard-child-title [attr.title]=\"widgetTitle\">\n            <span data-cy=\"c8y-dashboard-list--device-widget\">\n              {{ widgetTitle }}\n            </span>\n          </c8y-dashboard-child-title>\n          @if (onEditWidget.observers.length) {\n            <c8y-dashboard-child-action>\n              <button\n                title=\"{{ 'Edit widget' | translate }}\"\n                type=\"button\"\n                data-cy=\"widgets-dashboard--Edit-widget\"\n                (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n              >\n                <i c8yIcon=\"pencil\"></i>\n                <span translate>Edit</span>\n              </button>\n            </c8y-dashboard-child-action>\n          }\n          @if (onDeleteWidget.observers.length) {\n            <c8y-dashboard-child-action>\n              <button\n                title=\"{{ 'Remove widget' | translate }}\"\n                type=\"button\"\n                data-cy=\"c8y-widgets-dashboard--remove-widget\"\n                (click)=\"\n                  onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\n                \"\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span translate>Remove</span>\n              </button>\n            </c8y-dashboard-child-action>\n          }\n\n          @if (child.intersected) {\n            <c8y-dynamic-component\n              [componentId]=\"widget.componentId || widget.name\"\n              [config]=\"\n                widget.templateUrl || widget.widgetComponent\n                  ? { child: widget, dashboard: contextDashboard, context: context }\n                  : widget.config\n              \"\n              (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n            ></c8y-dynamic-component>\n          }\n        </c8y-dashboard-child>\n      }\n    </c8y-dashboard>\n  }\n} @else {\n  <c8y-loading class=\"col-xs-12 text-center\"></c8y-loading>\n}\n" }]
         }], ctorParameters: () => [{ type: DynamicComponentService }, { type: i1$1.TranslateService }, { type: i1$3.ActivatedRoute }, { type: ModalService }, { type: WidgetGlobalAutoRefreshService }, { type: i1$3.Router }, { type: i0.ElementRef }], propDecorators: { widgets: [{
                 type: Input
             }], context: [{