npm - @c8y/ngx-components - Versions diffs - 1023.17.6 → 1023.17.8 - Mend

@c8y/ngx-components 1023.17.6 → 1023.17.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (193) hide show

package/fesm2022/c8y-ngx-components-widgets-implementations-html-widget.mjs CHANGED Viewed

@@ -244,10 +244,10 @@ class HtmlWidgetConfigService {
             }
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlWidgetConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlWidgetConfigService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HtmlWidgetConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HtmlWidgetConfigService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlWidgetConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HtmlWidgetConfigService, decorators: [{
             type: Injectable
         }] });
@@ -287,10 +287,10 @@ class AdvancedSettingsComponent {
         this.htmlWidgetConfigService.save(config);
         this.htmlWidgetConfigService.configChanged$.next(config);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AdvancedSettingsComponent, isStandalone: true, selector: "c8y-html-widget-advanced-settings", inputs: { devMode: "devMode", cssEncapsulation: "cssEncapsulation" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset m-t-0\">\n  <legend>{{ 'Developer mode' | translate }}</legend>\n\n  <div class=\"d-flex a-i-center p-b-16\">\n    <label class=\"c8y-switch\">\n      <input\n        type=\"checkbox\"\n        [ngModel]=\"devMode\"\n        (change)=\"toggleAdvancedMode()\"\n        [disabled]=\"!canChangeSettings\"\n      />\n      <span></span>\n      <span>{{ 'Advanced developer mode' | translate }}</span>\n    </label>\n\n    <button class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"devMode ? disableAdvanced : enableAdvanced\"\n      container=\"body\"\n      placement=\"right\"\n      triggers=\"focus\"\n      type=\"button\"\n    ></button>\n\n    <ng-template #enableAdvanced>\n      <p class=\"text-16 text-bold p-b-8\">\n        <i [c8yIcon]=\"'imac-settings'\"></i>\n        {{ 'Advanced developer mode' | translate }}\n      </p>\n      <p class=\"p-b-8\" translate>\n        Create custom widgets by modifying a basic WebComponent with HTML and JavaScript. This\n        <strong>unsupported</strong>\n        feature is ideal for rapid prototyping and simple customizations.\n      </p>\n      <p class=\"p-b-8\" translate>\n        For production environments, we recommend our fully-supported Angular-based\n        <a href=\"https://styleguide.cumulocity.com\" target=\"_blank\">Web SDK</a>.\n        <br />\n        Enable advanced developer mode to start coding!\n      </p>\n    </ng-template>\n\n    <ng-template #disableAdvanced>\n      <p class=\"text-16 text-bold p-b-8\">\n        {{ 'Advanced developer mode' | translate }}\n      </p>\n      <p class=\"p-b-8\" translate>\n        The advanced developer mode is enabled for this widget allowing to build extensive Web\n        Components.\n      </p>\n      <p class=\"p-b-8\" translate>\n        You can disable this mode again, but it will reset the current code.\n      </p>\n    </ng-template>\n\n    <ng-container *ngIf=\"!devMode\">\n      <label\n        class=\"c8y-switch m-l-auto\"\n      >\n        <input\n          type=\"checkbox\"\n          (change)=\"changeOption('cssEncapsulation')\"\n          [disabled]=\"!canChangeSettings\"\n          [ngModel]=\"cssEncapsulation\"\n        />\n        <span></span>\n        <span>{{ 'CSS encapsulation' | translate }}</span>\n      </label>\n      <button\n        class=\"btn-help m-0\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ CSS_ENCAPSULATION_HELP_CONTEXT | translate }}\"\n        triggers=\"focus\"\n        placement=\"left\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    </ng-container>\n\n  </div>\n</fieldset>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdvancedSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AdvancedSettingsComponent, isStandalone: true, selector: "c8y-html-widget-advanced-settings", inputs: { devMode: "devMode", cssEncapsulation: "cssEncapsulation" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset m-t-0\">\n  <legend>{{ 'Developer mode' | translate }}</legend>\n\n  <div class=\"d-flex a-i-center p-b-16\">\n    <label class=\"c8y-switch\">\n      <input\n        type=\"checkbox\"\n        [ngModel]=\"devMode\"\n        (change)=\"toggleAdvancedMode()\"\n        [disabled]=\"!canChangeSettings\"\n      />\n      <span></span>\n      <span>{{ 'Advanced developer mode' | translate }}</span>\n    </label>\n\n    <button class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"devMode ? disableAdvanced : enableAdvanced\"\n      container=\"body\"\n      placement=\"right\"\n      triggers=\"focus\"\n      type=\"button\"\n    ></button>\n\n    <ng-template #enableAdvanced>\n      <p class=\"text-16 text-bold p-b-8\">\n        <i [c8yIcon]=\"'imac-settings'\"></i>\n        {{ 'Advanced developer mode' | translate }}\n      </p>\n      <p class=\"p-b-8\" translate>\n        Create custom widgets by modifying a basic WebComponent with HTML and JavaScript. This\n        <strong>unsupported</strong>\n        feature is ideal for rapid prototyping and simple customizations.\n      </p>\n      <p class=\"p-b-8\" translate>\n        For production environments, we recommend our fully-supported Angular-based\n        <a href=\"https://styleguide.cumulocity.com\" target=\"_blank\">Web SDK</a>.\n        <br />\n        Enable advanced developer mode to start coding!\n      </p>\n    </ng-template>\n\n    <ng-template #disableAdvanced>\n      <p class=\"text-16 text-bold p-b-8\">\n        {{ 'Advanced developer mode' | translate }}\n      </p>\n      <p class=\"p-b-8\" translate>\n        The advanced developer mode is enabled for this widget allowing to build extensive Web\n        Components.\n      </p>\n      <p class=\"p-b-8\" translate>\n        You can disable this mode again, but it will reset the current code.\n      </p>\n    </ng-template>\n\n    <ng-container *ngIf=\"!devMode\">\n      <label\n        class=\"c8y-switch m-l-auto\"\n      >\n        <input\n          type=\"checkbox\"\n          (change)=\"changeOption('cssEncapsulation')\"\n          [disabled]=\"!canChangeSettings\"\n          [ngModel]=\"cssEncapsulation\"\n        />\n        <span></span>\n        <span>{{ 'CSS encapsulation' | translate }}</span>\n      </label>\n      <button\n        class=\"btn-help m-0\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ CSS_ENCAPSULATION_HELP_CONTEXT | translate }}\"\n        triggers=\"focus\"\n        placement=\"left\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    </ng-container>\n\n  </div>\n</fieldset>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdvancedSettingsComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [IconDirective, NgIf, TooltipModule, PopoverModule, C8yTranslatePipe, FormsModule], selector: 'c8y-html-widget-advanced-settings', template: "<fieldset class=\"c8y-fieldset m-t-0\">\n  <legend>{{ 'Developer mode' | translate }}</legend>\n\n  <div class=\"d-flex a-i-center p-b-16\">\n    <label class=\"c8y-switch\">\n      <input\n        type=\"checkbox\"\n        [ngModel]=\"devMode\"\n        (change)=\"toggleAdvancedMode()\"\n        [disabled]=\"!canChangeSettings\"\n      />\n      <span></span>\n      <span>{{ 'Advanced developer mode' | translate }}</span>\n    </label>\n\n    <button class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"devMode ? disableAdvanced : enableAdvanced\"\n      container=\"body\"\n      placement=\"right\"\n      triggers=\"focus\"\n      type=\"button\"\n    ></button>\n\n    <ng-template #enableAdvanced>\n      <p class=\"text-16 text-bold p-b-8\">\n        <i [c8yIcon]=\"'imac-settings'\"></i>\n        {{ 'Advanced developer mode' | translate }}\n      </p>\n      <p class=\"p-b-8\" translate>\n        Create custom widgets by modifying a basic WebComponent with HTML and JavaScript. This\n        <strong>unsupported</strong>\n        feature is ideal for rapid prototyping and simple customizations.\n      </p>\n      <p class=\"p-b-8\" translate>\n        For production environments, we recommend our fully-supported Angular-based\n        <a href=\"https://styleguide.cumulocity.com\" target=\"_blank\">Web SDK</a>.\n        <br />\n        Enable advanced developer mode to start coding!\n      </p>\n    </ng-template>\n\n    <ng-template #disableAdvanced>\n      <p class=\"text-16 text-bold p-b-8\">\n        {{ 'Advanced developer mode' | translate }}\n      </p>\n      <p class=\"p-b-8\" translate>\n        The advanced developer mode is enabled for this widget allowing to build extensive Web\n        Components.\n      </p>\n      <p class=\"p-b-8\" translate>\n        You can disable this mode again, but it will reset the current code.\n      </p>\n    </ng-template>\n\n    <ng-container *ngIf=\"!devMode\">\n      <label\n        class=\"c8y-switch m-l-auto\"\n      >\n        <input\n          type=\"checkbox\"\n          (change)=\"changeOption('cssEncapsulation')\"\n          [disabled]=\"!canChangeSettings\"\n          [ngModel]=\"cssEncapsulation\"\n        />\n        <span></span>\n        <span>{{ 'CSS encapsulation' | translate }}</span>\n      </label>\n      <button\n        class=\"btn-help m-0\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ CSS_ENCAPSULATION_HELP_CONTEXT | translate }}\"\n        triggers=\"focus\"\n        placement=\"left\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    </ng-container>\n\n  </div>\n</fieldset>\n" }]
         }], propDecorators: { devMode: [{
@@ -410,10 +410,10 @@ class HtmlAiChatFeedbackComponent {
         this.htmlWidgetConfigService.configChanged$.next(newConfig);
         this.htmlWidgetConfigService.widgetConfigService.updateConfig({ config: newConfig }, true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlAiChatFeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: HtmlAiChatFeedbackComponent, isStandalone: true, selector: "c8y-html-ai-chat-feedback", inputs: { step: "step" }, host: { classAttribute: "agent-step-feedback" }, usesOnChanges: true, ngImport: i0, template: "@if (!step.reasoning && !code) {\n  <div [innerHTML]=\"step.text | markdownToHtml | async\"></div>\n}\n@if (code) {\n  <div [innerHTML]=\"textBeforeCode | markdownToHtml | async\"></div>\n}\n@if (label) {\n  <c8y-list-group class=\"m-t-16 m-b-16\">\n    <c8y-li\n      [active]=\"!loading\"\n      [collapsed]=\"collapsed\"\n    >\n      <c8y-li-icon>\n        <span\n          class=\"btn-ai btn-ai-hint btn-sm\"\n          [ngClass]=\"{ working: loading }\"\n        >\n          <span></span>\n        </span>\n      </c8y-li-icon>\n      <c8y-li-body>\n        {{ label }}\n      </c8y-li-body>\n\n      @if (canCollapse) {\n        <c8y-li-collapse>\n          @if (step.reasoning) {\n            <div [innerHTML]=\"step.reasoning | markdownToHtml | async\"></div>\n          } @else if (code) {\n            <pre\n              class=\"fit-w\"\n              style=\"max-height: 320px\"\n              >{{ code }}</pre\n            >\n            @if (!loading) {\n              <button\n                class=\"btn btn-default btn-sm\"\n                [attr.aria-label]=\"'Revert to this version' | translate\"\n                [tooltip]=\"'Revert to this version' | translate\"\n                container=\"body\"\n                (click)=\"revert()\"\n              >\n                <i c8yIcon=\"undo\"></i>\n              </button>\n            }\n          } @else if (step) {\n            <pre\n              class=\"fit-w\"\n              style=\"max-height: 320px\"\n              >{{ step | json }}</pre\n            >\n          }\n        </c8y-li-collapse>\n      }\n    </c8y-li>\n  </c8y-list-group>\n}\n\n@if (code) {\n  <div [innerHTML]=\"textAfterCode | markdownToHtml | async\"></div>\n}\n", dependencies: [{ kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: MarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HtmlAiChatFeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: HtmlAiChatFeedbackComponent, isStandalone: true, selector: "c8y-html-ai-chat-feedback", inputs: { step: "step" }, host: { classAttribute: "agent-step-feedback" }, usesOnChanges: true, ngImport: i0, template: "@if (!step.reasoning && !code) {\n  <div [innerHTML]=\"step.text | markdownToHtml | async\"></div>\n}\n@if (code) {\n  <div [innerHTML]=\"textBeforeCode | markdownToHtml | async\"></div>\n}\n@if (label) {\n  <c8y-list-group class=\"m-t-16 m-b-16\">\n    <c8y-li\n      [active]=\"!loading\"\n      [collapsed]=\"collapsed\"\n    >\n      <c8y-li-icon>\n        <span\n          class=\"btn-ai btn-ai-hint btn-sm\"\n          [ngClass]=\"{ working: loading }\"\n        >\n          <span></span>\n        </span>\n      </c8y-li-icon>\n      <c8y-li-body>\n        {{ label }}\n      </c8y-li-body>\n\n      @if (canCollapse) {\n        <c8y-li-collapse>\n          @if (step.reasoning) {\n            <div [innerHTML]=\"step.reasoning | markdownToHtml | async\"></div>\n          } @else if (code) {\n            <pre\n              class=\"fit-w\"\n              style=\"max-height: 320px\"\n              >{{ code }}</pre\n            >\n            @if (!loading) {\n              <button\n                class=\"btn btn-default btn-sm\"\n                [attr.aria-label]=\"'Revert to this version' | translate\"\n                [tooltip]=\"'Revert to this version' | translate\"\n                container=\"body\"\n                (click)=\"revert()\"\n              >\n                <i c8yIcon=\"undo\"></i>\n              </button>\n            }\n          } @else if (step) {\n            <pre\n              class=\"fit-w\"\n              style=\"max-height: 320px\"\n              >{{ step | json }}</pre\n            >\n          }\n        </c8y-li-collapse>\n      }\n    </c8y-li>\n  </c8y-list-group>\n}\n\n@if (code) {\n  <div [innerHTML]=\"textAfterCode | markdownToHtml | async\"></div>\n}\n", dependencies: [{ kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: MarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlAiChatFeedbackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HtmlAiChatFeedbackComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-html-ai-chat-feedback', imports: [
                         ListGroupComponent,
@@ -584,10 +584,10 @@ class HtmlFrameComponent {
             : this.config.css, this.config.options.cssEncapsulation);
         return webComponentScript;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: HtmlFrameComponent, isStandalone: true, selector: "c8y-html-frame", inputs: { config: "config", device: "device", useSalt: "useSalt" }, host: { classAttribute: "d-contents" }, viewQueries: [{ propertyName: "hostElement", first: true, predicate: ["hostElement"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let alert of alerts\">\n  <div\n    class=\"alert m-8\"\n    role=\"alert\"\n    [ngClass]=\"{\n      'alert-danger': alert.type === 'danger',\n      'alert-warning': alert.type === 'warning',\n      'alert-info': alert.type === 'info',\n      'alert-success': alert.type === 'success'\n    }\"\n  >\n    <p><strong translate>There was an issue in the HTML widget:</strong></p>\n    <pre>{{ alert.text }}</pre>\n  </div>\n</ng-container>\n<div\n  class=\"fit-w fit-h\"\n  #hostElement\n></div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HtmlFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: HtmlFrameComponent, isStandalone: true, selector: "c8y-html-frame", inputs: { config: "config", device: "device", useSalt: "useSalt" }, host: { classAttribute: "d-contents" }, viewQueries: [{ propertyName: "hostElement", first: true, predicate: ["hostElement"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let alert of alerts\">\n  <div\n    class=\"alert m-8\"\n    role=\"alert\"\n    [ngClass]=\"{\n      'alert-danger': alert.type === 'danger',\n      'alert-warning': alert.type === 'warning',\n      'alert-info': alert.type === 'info',\n      'alert-success': alert.type === 'success'\n    }\"\n  >\n    <p><strong translate>There was an issue in the HTML widget:</strong></p>\n    <pre>{{ alert.text }}</pre>\n  </div>\n</ng-container>\n<div\n  class=\"fit-w fit-h\"\n  #hostElement\n></div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlFrameComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HtmlFrameComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [NgFor, NgClass], selector: 'c8y-html-frame', host: { class: 'd-contents' }, template: "<ng-container *ngFor=\"let alert of alerts\">\n  <div\n    class=\"alert m-8\"\n    role=\"alert\"\n    [ngClass]=\"{\n      'alert-danger': alert.type === 'danger',\n      'alert-warning': alert.type === 'warning',\n      'alert-info': alert.type === 'info',\n      'alert-success': alert.type === 'success'\n    }\"\n  >\n    <p><strong translate>There was an issue in the HTML widget:</strong></p>\n    <pre>{{ alert.text }}</pre>\n  </div>\n</ng-container>\n<div\n  class=\"fit-w fit-h\"\n  #hostElement\n></div>\n" }]
         }], ctorParameters: () => [], propDecorators: { config: [{
@@ -674,10 +674,10 @@ class WidgetCodeEditorComponent {
         }
         this.configService.changeCss(code);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WidgetCodeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: WidgetCodeEditorComponent, isStandalone: true, selector: "c8y-widget-code-editor", inputs: { mode: "mode", config: "config" }, viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<c8y-widget-config-feedback>\n  <div class=\"d-flex\">\n    @if (config?.devMode && !config?.legacy) {\n      <span\n        class=\"tag tag--warning text-12\"\n        translate\n      >\n        Advanced developer mode\n      </span>\n    }\n  </div>\n  <div class=\"d-flex\">\n    @if (config?.legacy) {\n      <span\n        class=\"tag tag--warning text-12\"\n        [title]=\"\n          'This widget is in legacy mode. Consider to upgrade this to a new HTML widget. Read our documentation on details to transform your widget'\n            | translate\n        \"\n        translate\n      >\n        Legacy mode\n      </span>\n    }\n  </div>\n</c8y-widget-config-feedback>\n\n<div class=\"d-flex d-col fit-h fit-w\">\n  <c8y-html-widget-advanced-settings\n    [devMode]=\"config?.devMode\"\n    [cssEncapsulation]=\"config?.options?.cssEncapsulation\"\n  ></c8y-html-widget-advanced-settings>\n\n  <fieldset class=\"c8y-fieldset p-0 overflow-hidden\">\n    <legend class=\"m-l-16 p-l-0\">{{ 'Code' | translate }}</legend>\n\n    <div class=\"btn-group btn-group-sm m-l-0 p-t-8 p-b-8 p-l-16 p-r-16 fit-w d-flex\">\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Undo' | translate\"\n        [tooltip]=\"'Undo' | translate\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"undo()\"\n      >\n        <i [c8yIcon]=\"'undo'\"></i>\n      </button>\n\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Redo' | translate\"\n        [tooltip]=\"'Redo' | translate\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"redo()\"\n      >\n        <i [c8yIcon]=\"'redo'\"></i>\n      </button>\n\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Format code' | translate\"\n        [tooltip]=\"'Format code' | translate\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"formatCode()\"\n      >\n        <i [c8yIcon]=\"'format-align-left'\"></i>\n      </button>\n\n      <label class=\"c8y-switch m-l-auto\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"isAutoSaveEnabled\"\n          (change)=\"isAutoSaveEnabled = !isAutoSaveEnabled\"\n        />\n        <span></span>\n        <span translate>Auto save</span>\n      </label>\n    </div>\n\n    <div\n      class=\"btn-toolbar m-0 p-relative\"\n      role=\"toolbar\"\n    >\n      <c8y-tabs-outlet\n        class=\"elevation-none\"\n        [outletName]=\"TAB_OUTLET_NAME\"\n        [orientation]=\"'horizontal'\"\n        [openFirstTab]=\"false\"\n      ></c8y-tabs-outlet>\n      <c8y-tab\n        [icon]=\"'code'\"\n        [label]=\"(config?.devMode ? TAB_WEBCOMPONENT_LABEL : TAB_HTML_LABEL) | translate\"\n        [priority]=\"100\"\n        [showAlways]=\"true\"\n        [tabsOutlet]=\"TAB_OUTLET_NAME\"\n        [isActive]=\"mode === 'code'\"\n        (onSelect)=\"switchMode('code')\"\n      ></c8y-tab>\n      @if (!config?.devMode && !config?.legacy) {\n        <c8y-tab\n          [icon]=\"'c8y-css'\"\n          [label]=\"TAB_CSS_LABEL | translate\"\n          [priority]=\"0\"\n          [tabsOutlet]=\"TAB_OUTLET_NAME\"\n          [isActive]=\"mode === 'css'\"\n          (onSelect)=\"switchMode('css')\"\n        ></c8y-tab>\n      }\n    </div>\n\n    @if (!isLoading) {\n      @if (!(mode === 'css' && config?.devMode)) {\n        <c8y-editor\n          class=\"flex-grow d-block\"\n          style=\"height: 450px\"\n          [ngModel]=\"value\"\n          (ngModelChange)=\"changeCode($event)\"\n          [editorOptions]=\"{\n            language,\n            tabSize: 2,\n            insertSpaces: true,\n            minimap: { enabled: false }\n          }\"\n          (editorInit)=\"editorLoaded($event)\"\n        ></c8y-editor>\n      }\n    } @else {\n      <c8y-loading></c8y-loading>\n    }\n  </fieldset>\n</div>\n", dependencies: [{ kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$1.TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "component", type: i2$1.TabComponent, selector: "c8y-tab", inputs: ["path", "label", "icon", "priority", "orientation", "injector", "tabsOutlet", "isActive", "text", "showAlways"], outputs: ["onSelect"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.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: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: AdvancedSettingsComponent, selector: "c8y-html-widget-advanced-settings", inputs: ["devMode", "cssEncapsulation"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetCodeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: WidgetCodeEditorComponent, isStandalone: true, selector: "c8y-widget-code-editor", inputs: { mode: "mode", config: "config" }, viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<c8y-widget-config-feedback>\n  <div class=\"d-flex\">\n    @if (config?.devMode && !config?.legacy) {\n      <span\n        class=\"tag tag--warning text-12\"\n        translate\n      >\n        Advanced developer mode\n      </span>\n    }\n  </div>\n  <div class=\"d-flex\">\n    @if (config?.legacy) {\n      <span\n        class=\"tag tag--warning text-12\"\n        [title]=\"\n          'This widget is in legacy mode. Consider to upgrade this to a new HTML widget. Read our documentation on details to transform your widget'\n            | translate\n        \"\n        translate\n      >\n        Legacy mode\n      </span>\n    }\n  </div>\n</c8y-widget-config-feedback>\n\n<div class=\"d-flex d-col fit-h fit-w\">\n  <c8y-html-widget-advanced-settings\n    [devMode]=\"config?.devMode\"\n    [cssEncapsulation]=\"config?.options?.cssEncapsulation\"\n  ></c8y-html-widget-advanced-settings>\n\n  <fieldset class=\"c8y-fieldset p-0 overflow-hidden\">\n    <legend class=\"m-l-16 p-l-0\">{{ 'Code' | translate }}</legend>\n\n    <div class=\"btn-group btn-group-sm m-l-0 p-t-8 p-b-8 p-l-16 p-r-16 fit-w d-flex\">\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Undo' | translate\"\n        [tooltip]=\"'Undo' | translate\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"undo()\"\n      >\n        <i [c8yIcon]=\"'undo'\"></i>\n      </button>\n\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Redo' | translate\"\n        [tooltip]=\"'Redo' | translate\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"redo()\"\n      >\n        <i [c8yIcon]=\"'redo'\"></i>\n      </button>\n\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Format code' | translate\"\n        [tooltip]=\"'Format code' | translate\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"formatCode()\"\n      >\n        <i [c8yIcon]=\"'format-align-left'\"></i>\n      </button>\n\n      <label class=\"c8y-switch m-l-auto\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"isAutoSaveEnabled\"\n          (change)=\"isAutoSaveEnabled = !isAutoSaveEnabled\"\n        />\n        <span></span>\n        <span translate>Auto save</span>\n      </label>\n    </div>\n\n    <div\n      class=\"btn-toolbar m-0 p-relative\"\n      role=\"toolbar\"\n    >\n      <c8y-tabs-outlet\n        class=\"elevation-none\"\n        [outletName]=\"TAB_OUTLET_NAME\"\n        [orientation]=\"'horizontal'\"\n        [openFirstTab]=\"false\"\n      ></c8y-tabs-outlet>\n      <c8y-tab\n        [icon]=\"'code'\"\n        [label]=\"(config?.devMode ? TAB_WEBCOMPONENT_LABEL : TAB_HTML_LABEL) | translate\"\n        [priority]=\"100\"\n        [showAlways]=\"true\"\n        [tabsOutlet]=\"TAB_OUTLET_NAME\"\n        [isActive]=\"mode === 'code'\"\n        (onSelect)=\"switchMode('code')\"\n      ></c8y-tab>\n      @if (!config?.devMode && !config?.legacy) {\n        <c8y-tab\n          [icon]=\"'c8y-css'\"\n          [label]=\"TAB_CSS_LABEL | translate\"\n          [priority]=\"0\"\n          [tabsOutlet]=\"TAB_OUTLET_NAME\"\n          [isActive]=\"mode === 'css'\"\n          (onSelect)=\"switchMode('css')\"\n        ></c8y-tab>\n      }\n    </div>\n\n    @if (!isLoading) {\n      @if (!(mode === 'css' && config?.devMode)) {\n        <c8y-editor\n          class=\"flex-grow d-block\"\n          style=\"height: 450px\"\n          [ngModel]=\"value\"\n          (ngModelChange)=\"changeCode($event)\"\n          [editorOptions]=\"{\n            language,\n            tabSize: 2,\n            insertSpaces: true,\n            minimap: { enabled: false }\n          }\"\n          (editorInit)=\"editorLoaded($event)\"\n        ></c8y-editor>\n      }\n    } @else {\n      <c8y-loading></c8y-loading>\n    }\n  </fieldset>\n</div>\n", dependencies: [{ kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$1.TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "component", type: i2$1.TabComponent, selector: "c8y-tab", inputs: ["path", "label", "icon", "priority", "orientation", "injector", "tabsOutlet", "isActive", "text", "showAlways"], outputs: ["onSelect"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.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: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: AdvancedSettingsComponent, selector: "c8y-html-widget-advanced-settings", inputs: ["devMode", "cssEncapsulation"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WidgetCodeEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetCodeEditorComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         EditorComponent,
@@ -720,10 +720,10 @@ class HtmlWidgetConfigComponent {
         // it here.
         this.htmlWidgetConfigService.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HtmlWidgetConfigComponent, isStandalone: true, selector: "c8y-html-widget-config", viewQueries: [{ propertyName: "htmlPreviewTemplate", first: true, predicate: ["htmlPreview"], descendants: true }], ngImport: i0, template: "<c8y-widget-code-editor\n  [config]=\"htmlWidgetConfigService.config$ | async\"\n  [mode]=\"'code'\"\n></c8y-widget-code-editor>\n\n<ng-template #htmlPreview>\n  <c8y-html-frame\n    [config]=\"htmlWidgetConfigService.codeEditorChangeConfig$ | async\"\n    [device]=\"(widgetConfigService.currentConfig$ | async).device\"\n    [useSalt]=\"true\"\n  ></c8y-html-frame>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: HtmlFrameComponent, selector: "c8y-html-frame", inputs: ["config", "device", "useSalt"] }, { kind: "component", type: WidgetCodeEditorComponent, selector: "c8y-widget-code-editor", inputs: ["mode", "config"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HtmlWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: HtmlWidgetConfigComponent, isStandalone: true, selector: "c8y-html-widget-config", viewQueries: [{ propertyName: "htmlPreviewTemplate", first: true, predicate: ["htmlPreview"], descendants: true }], ngImport: i0, template: "<c8y-widget-code-editor\n  [config]=\"htmlWidgetConfigService.config$ | async\"\n  [mode]=\"'code'\"\n></c8y-widget-code-editor>\n\n<ng-template #htmlPreview>\n  <c8y-html-frame\n    [config]=\"htmlWidgetConfigService.codeEditorChangeConfig$ | async\"\n    [device]=\"(widgetConfigService.currentConfig$ | async).device\"\n    [useSalt]=\"true\"\n  ></c8y-html-frame>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: HtmlFrameComponent, selector: "c8y-html-frame", inputs: ["config", "device", "useSalt"] }, { kind: "component", type: WidgetCodeEditorComponent, selector: "c8y-widget-code-editor", inputs: ["mode", "config"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HtmlWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-html-widget-config', standalone: true, imports: [RouterModule, FormsModule, AsyncPipe, HtmlFrameComponent, WidgetCodeEditorComponent], template: "<c8y-widget-code-editor\n  [config]=\"htmlWidgetConfigService.config$ | async\"\n  [mode]=\"'code'\"\n></c8y-widget-code-editor>\n\n<ng-template #htmlPreview>\n  <c8y-html-frame\n    [config]=\"htmlWidgetConfigService.codeEditorChangeConfig$ | async\"\n    [device]=\"(widgetConfigService.currentConfig$ | async).device\"\n    [useSalt]=\"true\"\n  ></c8y-html-frame>\n</ng-template>\n" }]
         }], propDecorators: { htmlPreviewTemplate: [{
@@ -755,10 +755,10 @@ class HtmlWidgetPropertiesSelectorComponent {
         const content = '${this.c8yContext' + path + '}';
         await this.clipboardService.writeText(content);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlWidgetPropertiesSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HtmlWidgetPropertiesSelectorComponent, isStandalone: true, selector: "c8y-html-widget-properties-selector", host: { classAttribute: "bg-level-1" }, ngImport: i0, template: "<div\n  class=\"d-flex m-b-8\"\n  style=\"margin-top: -16px\"\n>\n  <em\n    class=\"m-l-24 text-muted\"\n    translate\n  >\n    How to use properties in the widget\n  </em>\n  <button\n    class=\"btn-help btn-help--sm\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"helpContent\"\n    placement=\"right\"\n    triggers=\"focus\"\n    container=\"body\"\n    type=\"button\"\n  ></button>\n</div>\n<c8y-asset-property-list\n  class=\"inner-scroll bg-inherit d-block\"\n  style=\"max-height: 450px\"\n  [asset]=\"(widgetConfigService.currentConfig$ | async).device\"\n  [config]=\"{\n    selectMode: 'none',\n    expansionMode: 'expandedByDefault',\n    filterable: false,\n    allowDragAndDrop: true\n  }\"\n>\n  <button\n    class=\"btn-dot btn fit-h\"\n    [attr.aria-label]=\"'Copy' | translate\"\n    tooltip=\"{{ 'Copy' | translate }}\"\n    type=\"button\"\n    *c8yAssetPropertyAction=\"let context\"\n    [delay]=\"500\"\n    (click)=\"copyProperty(context)\"\n  >\n    <i class=\"dlt-c8y-icon-copy\"></i>\n  </button>\n</c8y-asset-property-list>\n\n<ng-template #helpContent>\n  <p\n    class=\"p-b-8\"\n    translate\n  >\n    Click the copy icon next to a property, then paste it into the HTML editor below as a template\n    literal.\n  </p>\n</ng-template>\n", dependencies: [{ kind: "component", type: AssetPropertyListComponent, selector: "c8y-asset-property-list", inputs: ["config", "asset", "extraProperties"], outputs: ["selectedProperties"] }, { kind: "directive", type: AssetPropertyActionDirective, selector: "[c8yAssetPropertyAction]" }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HtmlWidgetPropertiesSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: HtmlWidgetPropertiesSelectorComponent, isStandalone: true, selector: "c8y-html-widget-properties-selector", host: { classAttribute: "bg-level-1" }, ngImport: i0, template: "<div\n  class=\"d-flex m-b-8\"\n  style=\"margin-top: -16px\"\n>\n  <em\n    class=\"m-l-24 text-muted\"\n    translate\n  >\n    How to use properties in the widget\n  </em>\n  <button\n    class=\"btn-help btn-help--sm\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"helpContent\"\n    placement=\"right\"\n    triggers=\"focus\"\n    container=\"body\"\n    type=\"button\"\n  ></button>\n</div>\n<c8y-asset-property-list\n  class=\"inner-scroll bg-inherit d-block\"\n  style=\"max-height: 450px\"\n  [asset]=\"(widgetConfigService.currentConfig$ | async).device\"\n  [config]=\"{\n    selectMode: 'none',\n    expansionMode: 'expandedByDefault',\n    filterable: false,\n    allowDragAndDrop: true\n  }\"\n>\n  <button\n    class=\"btn-dot btn fit-h\"\n    [attr.aria-label]=\"'Copy' | translate\"\n    tooltip=\"{{ 'Copy' | translate }}\"\n    type=\"button\"\n    *c8yAssetPropertyAction=\"let context\"\n    [delay]=\"500\"\n    (click)=\"copyProperty(context)\"\n  >\n    <i class=\"dlt-c8y-icon-copy\"></i>\n  </button>\n</c8y-asset-property-list>\n\n<ng-template #helpContent>\n  <p\n    class=\"p-b-8\"\n    translate\n  >\n    Click the copy icon next to a property, then paste it into the HTML editor below as a template\n    literal.\n  </p>\n</ng-template>\n", dependencies: [{ kind: "component", type: AssetPropertyListComponent, selector: "c8y-asset-property-list", inputs: ["config", "asset", "extraProperties"], outputs: ["selectedProperties"] }, { kind: "directive", type: AssetPropertyActionDirective, selector: "[c8yAssetPropertyAction]" }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlWidgetPropertiesSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HtmlWidgetPropertiesSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-html-widget-properties-selector', host: {
                         class: 'bg-level-1'
@@ -794,10 +794,10 @@ class HtmlWidgetComponent {
             }
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HtmlWidgetComponent, isStandalone: true, selector: "c8y-html-widget", inputs: { config: "config" }, ngImport: i0, template: "<c8y-html-frame\n  [config]=\"config.config\"\n  [device]=\"config.device\"\n></c8y-html-frame>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: HtmlFrameComponent, selector: "c8y-html-frame", inputs: ["config", "device", "useSalt"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HtmlWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: HtmlWidgetComponent, isStandalone: true, selector: "c8y-html-widget", inputs: { config: "config" }, ngImport: i0, template: "<c8y-html-frame\n  [config]=\"config.config\"\n  [device]=\"config.device\"\n></c8y-html-frame>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: HtmlFrameComponent, selector: "c8y-html-frame", inputs: ["config", "device", "useSalt"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HtmlWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-html-widget', standalone: true, imports: [RouterModule, HtmlFrameComponent], template: "<c8y-html-frame\n  [config]=\"config.config\"\n  [device]=\"config.device\"\n></c8y-html-frame>\n" }]
         }], propDecorators: { config: [{

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

@@ -66,10 +66,10 @@ class ImageWidgetService {
             'object-position': `${config.styling?.objectPositionX || defaultObjectPositionValue} ${config.styling?.objectPositionY || defaultObjectPositionValue}`
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ImageWidgetService, deps: [{ token: i1.InventoryService }, { token: i2.FilesService }, { token: i2.AlertService }, { token: i3.TranslateService }, { token: i1.InventoryBinaryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ImageWidgetService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageWidgetService, deps: [{ token: i1.InventoryService }, { token: i2.FilesService }, { token: i2.AlertService }, { token: i3.TranslateService }, { token: i1.InventoryBinaryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageWidgetService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ImageWidgetService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageWidgetService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.InventoryService }, { type: i2.FilesService }, { type: i2.AlertService }, { type: i3.TranslateService }, { type: i1.InventoryBinaryService }] });
@@ -191,10 +191,10 @@ class ImageWidgetConfigComponent {
     setStyling(config) {
         this.styling = this.imageWidget.getStyling(config);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ImageWidgetConfigComponent, deps: [{ token: i1$1.FormBuilder }, { token: i1$1.NgForm }, { token: i2.FilesService }, { token: i2.AlertService }, { token: ImageWidgetService }, { token: i4.WidgetConfigComponent, optional: true }, { token: i4.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ImageWidgetConfigComponent, isStandalone: true, selector: "c8y-image-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "imagePreviewTemplate", predicate: ["imagePreview"], descendants: true }], ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Image' | translate }}</legend>\n    <c8y-form-group class=\"m-b-16\">\n      <c8y-drop-area\n        class=\"drop-area-sm\"\n        [icon]=\"'upload'\"\n        formControlName=\"images\"\n        [accept]=\"'image'\"\n        [maxAllowedFiles]=\"1\"\n      ></c8y-drop-area>\n      <c8y-messages>\n        <c8y-message\n          name=\"maxFileSizeReached\"\n          [text]=\"\n            'The maximum image size is {{ maxFileSize }} kB. The selected image has a size of {{ actualFileSize }} kB.'\n              | translate\n          \"\n        ></c8y-message>\n        <c8y-message\n          name=\"wrongFileType\"\n          [text]=\"'Wrong file type, select an image.' | translate\"\n        ></c8y-message>\n        <c8y-message\n          name=\"maxlength\"\n          [text]=\"'Only select one image.' | translate\"\n        ></c8y-message>\n        <c8y-message\n          name=\"required\"\n          [text]=\"'An image is required.' | translate\"\n        ></c8y-message>\n        <c8y-message\n          name=\"minlength\"\n          [text]=\"'An image is required.' | translate\"\n        ></c8y-message>\n      </c8y-messages>\n    </c8y-form-group>\n  </fieldset>\n\n  <div *ngIf=\"imageSrc$ | async as src\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>\n        {{ 'Size and alignment' | translate }}\n      </legend>\n      <div [formGroupName]=\"'styling'\">\n        <c8y-form-group class=\"form-group-sm m-b-0\">\n          <label class=\"m-b-4\">\n            {{ 'Image display' | translate }}\n          </label>\n          <ul class=\"list-group separator-top-bottom\">\n            <li\n              class=\"list-group-item d-flex a-i-center p-l-0\"\n              *ngFor=\"let objectFitOption of objectFitOptions; let i = index\"\n            >\n              <label class=\"c8y-radio\">\n                <input\n                  type=\"radio\"\n                  [id]=\"'groupradiocontentclass' + i\"\n                  formControlName=\"objectFit\"\n                  [value]=\"objectFitOption.value\"\n                />\n                <span></span>\n                <span class=\"l-h-1\">\n                  {{ objectFitOption.label | translate }}\n                  <br />\n                  <small class=\"text-muted\">\n                    {{ objectFitOption.description | translate }}\n                  </small>\n                </span>\n              </label>\n            </li>\n          </ul>\n        </c8y-form-group>\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=\"objectPositionX\"\n                >\n                  <option [ngValue]=\"'left'\">\n                    {{ 'left`horizontal alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'center'\">\n                    {{ 'center`horizontal alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'right'\">\n                    {{ 'right`horizontal alignment`' | translate }}\n                  </option>\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=\"objectPositionY\"\n                >\n                  <option [ngValue]=\"'top'\">\n                    {{ 'top`vertical alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'center'\">\n                    {{ 'center`vertical alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'bottom'\">\n                    {{ 'bottom`vertical alignment`' | translate }}\n                  </option>\n                </select>\n              </div>\n            </c8y-form-group>\n          </div>\n        </div>\n      </div>\n    </fieldset>\n    <ng-template #imagePreview>\n      <img\n        [ngStyle]=\"styling\"\n        [src]=\"src\"\n        [ngClass]=\"styling ? 'fit-h fit-w' : 'img-responsive'\"\n      />\n    </ng-template>\n  </div>\n  <div\n    class=\"d-flex j-c-center\"\n    *ngIf=\"loading\"\n  >\n    <c8y-loading></c8y-loading>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageWidgetConfigComponent, deps: [{ token: i1$1.FormBuilder }, { token: i1$1.NgForm }, { token: i2.FilesService }, { token: i2.AlertService }, { token: ImageWidgetService }, { token: i4.WidgetConfigComponent, optional: true }, { token: i4.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ImageWidgetConfigComponent, isStandalone: true, selector: "c8y-image-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "imagePreviewTemplate", predicate: ["imagePreview"], descendants: true }], ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Image' | translate }}</legend>\n    <c8y-form-group class=\"m-b-16\">\n      <c8y-drop-area\n        class=\"drop-area-sm\"\n        [icon]=\"'upload'\"\n        formControlName=\"images\"\n        [accept]=\"'image'\"\n        [maxAllowedFiles]=\"1\"\n      ></c8y-drop-area>\n      <c8y-messages>\n        <c8y-message\n          name=\"maxFileSizeReached\"\n          [text]=\"\n            'The maximum image size is {{ maxFileSize }} kB. The selected image has a size of {{ actualFileSize }} kB.'\n              | translate\n          \"\n        ></c8y-message>\n        <c8y-message\n          name=\"wrongFileType\"\n          [text]=\"'Wrong file type, select an image.' | translate\"\n        ></c8y-message>\n        <c8y-message\n          name=\"maxlength\"\n          [text]=\"'Only select one image.' | translate\"\n        ></c8y-message>\n        <c8y-message\n          name=\"required\"\n          [text]=\"'An image is required.' | translate\"\n        ></c8y-message>\n        <c8y-message\n          name=\"minlength\"\n          [text]=\"'An image is required.' | translate\"\n        ></c8y-message>\n      </c8y-messages>\n    </c8y-form-group>\n  </fieldset>\n\n  <div *ngIf=\"imageSrc$ | async as src\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>\n        {{ 'Size and alignment' | translate }}\n      </legend>\n      <div [formGroupName]=\"'styling'\">\n        <c8y-form-group class=\"form-group-sm m-b-0\">\n          <label class=\"m-b-4\">\n            {{ 'Image display' | translate }}\n          </label>\n          <ul class=\"list-group separator-top-bottom\">\n            <li\n              class=\"list-group-item d-flex a-i-center p-l-0\"\n              *ngFor=\"let objectFitOption of objectFitOptions; let i = index\"\n            >\n              <label class=\"c8y-radio\">\n                <input\n                  type=\"radio\"\n                  [id]=\"'groupradiocontentclass' + i\"\n                  formControlName=\"objectFit\"\n                  [value]=\"objectFitOption.value\"\n                />\n                <span></span>\n                <span class=\"l-h-1\">\n                  {{ objectFitOption.label | translate }}\n                  <br />\n                  <small class=\"text-muted\">\n                    {{ objectFitOption.description | translate }}\n                  </small>\n                </span>\n              </label>\n            </li>\n          </ul>\n        </c8y-form-group>\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=\"objectPositionX\"\n                >\n                  <option [ngValue]=\"'left'\">\n                    {{ 'left`horizontal alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'center'\">\n                    {{ 'center`horizontal alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'right'\">\n                    {{ 'right`horizontal alignment`' | translate }}\n                  </option>\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=\"objectPositionY\"\n                >\n                  <option [ngValue]=\"'top'\">\n                    {{ 'top`vertical alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'center'\">\n                    {{ 'center`vertical alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'bottom'\">\n                    {{ 'bottom`vertical alignment`' | translate }}\n                  </option>\n                </select>\n              </div>\n            </c8y-form-group>\n          </div>\n        </div>\n      </div>\n    </fieldset>\n    <ng-template #imagePreview>\n      <img\n        [ngStyle]=\"styling\"\n        [src]=\"src\"\n        [ngClass]=\"styling ? 'fit-h fit-w' : 'img-responsive'\"\n      />\n    </ng-template>\n  </div>\n  <div\n    class=\"d-flex j-c-center\"\n    *ngIf=\"loading\"\n  >\n    <c8y-loading></c8y-loading>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ImageWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-image-widget-config', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
                         ReactiveFormsModule,
@@ -236,10 +236,10 @@ class ImageWidgetViewComponent {
     setStyling(config) {
         this.styling = this.imageWidget.getStyling(config);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ImageWidgetViewComponent, deps: [{ token: ImageWidgetService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ImageWidgetViewComponent, isStandalone: true, selector: "c8y-image-widget-view", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"imageDetails$ | async as details; else empty\">\n  <img\n    [src]=\"details.base64\"\n    [title]=\"details.file.name\"\n    [ngClass]=\"styling ? 'fit-h fit-w' : 'img-responsive'\"\n    [ngStyle]=\"styling\"\n  />\n</ng-container>\n\n<ng-template #empty>\n  <div class=\"d-flex fit-h fit-w j-c-center a-i-center\" *ngIf=\"!loading\">\n    <c8y-ui-empty-state\n      class=\"fit-w\"\n      [icon]=\"'no-image'\"\n      [title]=\"'No image to display.' | translate\"\n      [subtitle]=\"'Upload an image.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-template>\n<div class=\"d-flex fit-h fit-w j-c-center a-i-center\" *ngIf=\"loading\">\n  <c8y-loading></c8y-loading>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageWidgetViewComponent, deps: [{ token: ImageWidgetService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ImageWidgetViewComponent, isStandalone: true, selector: "c8y-image-widget-view", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"imageDetails$ | async as details; else empty\">\n  <img\n    [src]=\"details.base64\"\n    [title]=\"details.file.name\"\n    [ngClass]=\"styling ? 'fit-h fit-w' : 'img-responsive'\"\n    [ngStyle]=\"styling\"\n  />\n</ng-container>\n\n<ng-template #empty>\n  <div class=\"d-flex fit-h fit-w j-c-center a-i-center\" *ngIf=\"!loading\">\n    <c8y-ui-empty-state\n      class=\"fit-w\"\n      [icon]=\"'no-image'\"\n      [title]=\"'No image to display.' | translate\"\n      [subtitle]=\"'Upload an image.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-template>\n<div class=\"d-flex fit-h fit-w j-c-center a-i-center\" *ngIf=\"loading\">\n  <c8y-loading></c8y-loading>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ImageWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-image-widget-view', standalone: true, imports: [NgIf, NgClass, AsyncPipe, NgStyle, LoadingComponent, EmptyStateComponent], template: "<ng-container *ngIf=\"imageDetails$ | async as details; else empty\">\n  <img\n    [src]=\"details.base64\"\n    [title]=\"details.file.name\"\n    [ngClass]=\"styling ? 'fit-h fit-w' : 'img-responsive'\"\n    [ngStyle]=\"styling\"\n  />\n</ng-container>\n\n<ng-template #empty>\n  <div class=\"d-flex fit-h fit-w j-c-center a-i-center\" *ngIf=\"!loading\">\n    <c8y-ui-empty-state\n      class=\"fit-w\"\n      [icon]=\"'no-image'\"\n      [title]=\"'No image to display.' | translate\"\n      [subtitle]=\"'Upload an image.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-template>\n<div class=\"d-flex fit-h fit-w j-c-center a-i-center\" *ngIf=\"loading\">\n  <c8y-loading></c8y-loading>\n</div>\n" }]
         }], ctorParameters: () => [{ type: ImageWidgetService }], propDecorators: { config: [{

package/fesm2022/c8y-ngx-components-widgets-implementations-info-gauge.mjs CHANGED Viewed

@@ -78,10 +78,10 @@ class InfoGaugeCurrentMeasurementPipe {
         }
         return { color, strokeDashOffset };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, deps: [{ token: i1.MeasurementRealtimeService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, isStandalone: true, name: "infoGaugeCurrentMeasurement" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, deps: [{ token: i1.MeasurementRealtimeService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, isStandalone: true, name: "infoGaugeCurrentMeasurement" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'infoGaugeCurrentMeasurement',
@@ -743,10 +743,10 @@ class RadialGaugeService {
             return clampedValue;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadialGaugeService, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadialGaugeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadialGaugeService, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadialGaugeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadialGaugeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadialGaugeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -812,14 +812,14 @@ class RadialGaugeViewComponent {
     onChartInit(ec) {
         this.echartsInstance = ec;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadialGaugeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: RadialGaugeViewComponent, isStandalone: true, selector: "c8y-radial-gauge", inputs: { activeDatapointGauge: "activeDatapointGauge", measurement: "measurement", fractionSize: "fractionSize", gaugeOptions: "gaugeOptions", selectedPresetId: "selectedPresetId" }, host: { classAttribute: "c8y-radial-gauge" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadialGaugeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RadialGaugeViewComponent, isStandalone: true, selector: "c8y-radial-gauge", inputs: { activeDatapointGauge: "activeDatapointGauge", measurement: "measurement", fractionSize: "fractionSize", gaugeOptions: "gaugeOptions", selectedPresetId: "selectedPresetId" }, host: { classAttribute: "c8y-radial-gauge" }, providers: [
             MeasurementRealtimeService,
             RadialGaugeService,
             { provide: NGX_ECHARTS_CONFIG, useFactory: () => ({ echarts: () => import('echarts') }) }
         ], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"p-absolute fit-w fit-h\"\n  data-cy=\"c8y-radial-gauge--chart\"\n  #chart\n  echarts\n  [options]=\"chartOptions$ | async\"\n  (chartInit)=\"onChartInit($event)\"\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: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadialGaugeViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadialGaugeViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-radial-gauge', host: { class: 'c8y-radial-gauge' }, providers: [
                         MeasurementRealtimeService,
@@ -886,10 +886,10 @@ class InfoGaugeWidgetViewComponent {
             datapoint.__target = { name, id };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InfoGaugeWidgetViewComponent, deps: [{ token: i2.ContextDashboardComponent, optional: true }, { token: i1.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: InfoGaugeWidgetViewComponent, isStandalone: true, selector: "c8y-info-gauge-widget-view", inputs: { config: "config" }, host: { classAttribute: "d-contents" }, providers: [MeasurementRealtimeService], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"label-value-unit-gauge new-radial\"\n  *ngIf=\"isInfoGauge\"\n>\n  <div\n    class=\"gauge-legend\"\n    *ngIf=\"activeDatapointLabels?.length && isInfoGauge\"\n  >\n    <ng-container *ngFor=\"let dp of activeDatapointLabels\">\n      <ng-container *ngIf=\"dp | infoGaugeCurrentMeasurement | async as measurement\">\n        <label\n          class=\"text-truncate\"\n          title=\"{{ dp.label }}\"\n        >\n          {{ dp.label }}\n        </label>\n        <h3\n          class=\"text-truncate\"\n          title=\"{{ measurement.value | number: fractionSize }} {{ dp.unit || measurement.unit }}\"\n          *ngIf=\"!measurement.notFound; else notFound\"\n        >\n          {{ measurement.value | number: fractionSize }} {{ dp.unit || measurement.unit }}\n        </h3>\n        <ng-template #notFound>\n          <h3>--</h3>\n        </ng-template>\n        <p class=\"text-muted m-b-8\">\n          <small>\n            <em>{{ measurement.date | c8yDate: 'short' }}</em>\n          </small>\n        </p>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <ng-container *ngIf=\"activeDatapointGauge && isInfoGauge\">\n    <div\n      class=\"gauge-svg\"\n      *ngIf=\"activeDatapointGauge | infoGaugeCurrentMeasurement: true | async as measurement\"\n    >\n      <svg\n        height=\"214px\"\n        width=\"214px\"\n        viewBox=\"0 0 214 214\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <desc>radial gauge</desc>\n        <g\n          id=\"scale\"\n          stroke=\"none\"\n          stroke-width=\"1\"\n          fill=\"none\"\n          fill-rule=\"evenodd\"\n          stroke-dasharray=\"1,5\"\n        >\n          <circle\n            id=\"Oval\"\n            stroke=\"#CACECE\"\n            stroke-width=\"7\"\n            cx=\"107\"\n            cy=\"107\"\n            r=\"103\"\n          ></circle>\n          <rect\n            id=\"mask\"\n            height=\"214\"\n            stroke=\"none\"\n            fill-rule=\"evenodd\"\n            x=\"0\"\n            y=\"0\"\n            width=\"214\"\n            transform=\"rotate(-45 290 182)\"\n          ></rect>\n        </g>\n        <path\n          class=\"track\"\n          d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n          transform=\"rotate(-135 107 107)\"\n        ></path>\n        <path\n          class=\"track-value\"\n          [ngStyle]=\"{\n            stroke: measurement.color,\n            'stroke-dashoffset': -measurement.strokeDashOffset\n          }\"\n          d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n          transform=\"rotate(-135 107 107)\"\n        ></path>\n        <foreignObject\n          class=\"d-flex a-i-center j-c-center\"\n          height=\"100%\"\n          width=\"100%\"\n          requiredFeatures=\"http://www.w3.org/TR/SVG11/feature#Extensibility\"\n        >\n          <div\n            class=\"d-flex d-col fit-h a-i-center j-c-center\"\n            style=\"padding: 3rem\"\n            xmlns=\"http://www.w3.org/1999/xhtml\"\n          >\n            <p\n              class=\"text-truncate text-center\"\n              title=\"{{ activeDatapointGauge.label }}\"\n            >\n              {{ activeDatapointGauge.label }}\n            </p>\n            <p\n              class=\"center-value text-truncate\"\n              title=\"{{ measurement.value | number: fractionSize }}\"\n              *ngIf=\"!measurement.notFound; else notFoundSVG\"\n            >\n              {{ measurement.value | number: fractionSize }}\n            </p>\n            <ng-template #notFoundSVG>\n              <p class=\"center-value\">--</p>\n            </ng-template>\n            <p class=\"center-unit strong\">{{ activeDatapointGauge.unit || measurement.unit }}</p>\n            <p class=\"center-date-time\">{{ measurement.date | c8yDate: 'short' }}</p>\n          </div>\n        </foreignObject>\n      </svg>\n    </div>\n  </ng-container>\n\n  <div class=\"clearfix\"></div>\n</div>\n<ng-container *ngIf=\"!isInfoGauge\">\n  <c8y-radial-gauge\n    *ngIf=\"activeDatapointGauge | infoGaugeCurrentMeasurement | async as measurement\"\n    [activeDatapointGauge]=\"activeDatapointGauge\"\n    [measurement]=\"measurement\"\n    [fractionSize]=\"config.fractionSize\"\n    [gaugeOptions]=\"config.gaugeOptions\"\n    [selectedPresetId]=\"config.selectedPresetId\"\n  ></c8y-radial-gauge>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RadialGaugeViewComponent, selector: "c8y-radial-gauge", inputs: ["activeDatapointGauge", "measurement", "fractionSize", "gaugeOptions", "selectedPresetId"] }, { kind: "pipe", type: InfoGaugeCurrentMeasurementPipe, name: "infoGaugeCurrentMeasurement" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InfoGaugeWidgetViewComponent, deps: [{ token: i2.ContextDashboardComponent, optional: true }, { token: i1.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InfoGaugeWidgetViewComponent, isStandalone: true, selector: "c8y-info-gauge-widget-view", inputs: { config: "config" }, host: { classAttribute: "d-contents" }, providers: [MeasurementRealtimeService], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"label-value-unit-gauge new-radial\"\n  *ngIf=\"isInfoGauge\"\n>\n  <div\n    class=\"gauge-legend\"\n    *ngIf=\"activeDatapointLabels?.length && isInfoGauge\"\n  >\n    <ng-container *ngFor=\"let dp of activeDatapointLabels\">\n      <ng-container *ngIf=\"dp | infoGaugeCurrentMeasurement | async as measurement\">\n        <label\n          class=\"text-truncate\"\n          title=\"{{ dp.label }}\"\n        >\n          {{ dp.label }}\n        </label>\n        <h3\n          class=\"text-truncate\"\n          title=\"{{ measurement.value | number: fractionSize }} {{ dp.unit || measurement.unit }}\"\n          *ngIf=\"!measurement.notFound; else notFound\"\n        >\n          {{ measurement.value | number: fractionSize }} {{ dp.unit || measurement.unit }}\n        </h3>\n        <ng-template #notFound>\n          <h3>--</h3>\n        </ng-template>\n        <p class=\"text-muted m-b-8\">\n          <small>\n            <em>{{ measurement.date | c8yDate: 'short' }}</em>\n          </small>\n        </p>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <ng-container *ngIf=\"activeDatapointGauge && isInfoGauge\">\n    <div\n      class=\"gauge-svg\"\n      *ngIf=\"activeDatapointGauge | infoGaugeCurrentMeasurement: true | async as measurement\"\n    >\n      <svg\n        height=\"214px\"\n        width=\"214px\"\n        viewBox=\"0 0 214 214\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <desc>radial gauge</desc>\n        <g\n          id=\"scale\"\n          stroke=\"none\"\n          stroke-width=\"1\"\n          fill=\"none\"\n          fill-rule=\"evenodd\"\n          stroke-dasharray=\"1,5\"\n        >\n          <circle\n            id=\"Oval\"\n            stroke=\"#CACECE\"\n            stroke-width=\"7\"\n            cx=\"107\"\n            cy=\"107\"\n            r=\"103\"\n          ></circle>\n          <rect\n            id=\"mask\"\n            height=\"214\"\n            stroke=\"none\"\n            fill-rule=\"evenodd\"\n            x=\"0\"\n            y=\"0\"\n            width=\"214\"\n            transform=\"rotate(-45 290 182)\"\n          ></rect>\n        </g>\n        <path\n          class=\"track\"\n          d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n          transform=\"rotate(-135 107 107)\"\n        ></path>\n        <path\n          class=\"track-value\"\n          [ngStyle]=\"{\n            stroke: measurement.color,\n            'stroke-dashoffset': -measurement.strokeDashOffset\n          }\"\n          d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n          transform=\"rotate(-135 107 107)\"\n        ></path>\n        <foreignObject\n          class=\"d-flex a-i-center j-c-center\"\n          height=\"100%\"\n          width=\"100%\"\n          requiredFeatures=\"http://www.w3.org/TR/SVG11/feature#Extensibility\"\n        >\n          <div\n            class=\"d-flex d-col fit-h a-i-center j-c-center\"\n            style=\"padding: 3rem\"\n            xmlns=\"http://www.w3.org/1999/xhtml\"\n          >\n            <p\n              class=\"text-truncate text-center\"\n              title=\"{{ activeDatapointGauge.label }}\"\n            >\n              {{ activeDatapointGauge.label }}\n            </p>\n            <p\n              class=\"center-value text-truncate\"\n              title=\"{{ measurement.value | number: fractionSize }}\"\n              *ngIf=\"!measurement.notFound; else notFoundSVG\"\n            >\n              {{ measurement.value | number: fractionSize }}\n            </p>\n            <ng-template #notFoundSVG>\n              <p class=\"center-value\">--</p>\n            </ng-template>\n            <p class=\"center-unit strong\">{{ activeDatapointGauge.unit || measurement.unit }}</p>\n            <p class=\"center-date-time\">{{ measurement.date | c8yDate: 'short' }}</p>\n          </div>\n        </foreignObject>\n      </svg>\n    </div>\n  </ng-container>\n\n  <div class=\"clearfix\"></div>\n</div>\n<ng-container *ngIf=\"!isInfoGauge\">\n  <c8y-radial-gauge\n    *ngIf=\"activeDatapointGauge | infoGaugeCurrentMeasurement | async as measurement\"\n    [activeDatapointGauge]=\"activeDatapointGauge\"\n    [measurement]=\"measurement\"\n    [fractionSize]=\"config.fractionSize\"\n    [gaugeOptions]=\"config.gaugeOptions\"\n    [selectedPresetId]=\"config.selectedPresetId\"\n  ></c8y-radial-gauge>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RadialGaugeViewComponent, selector: "c8y-radial-gauge", inputs: ["activeDatapointGauge", "measurement", "fractionSize", "gaugeOptions", "selectedPresetId"] }, { kind: "pipe", type: InfoGaugeCurrentMeasurementPipe, name: "infoGaugeCurrentMeasurement" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InfoGaugeWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InfoGaugeWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-info-gauge-widget-view', host: { class: 'd-contents' }, providers: [MeasurementRealtimeService], standalone: true, imports: [
                         NgIf,
@@ -945,8 +945,8 @@ class PresetPreviewComponent {
         this.onTouched();
         this.onPresetChange.emit(presetId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PresetPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: PresetPreviewComponent, isStandalone: true, selector: "c8y-preset-preview", inputs: { ALL_GAUGE_PRESETS: "ALL_GAUGE_PRESETS" }, outputs: { onPresetChange: "onPresetChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PresetPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PresetPreviewComponent, isStandalone: true, selector: "c8y-preset-preview", inputs: { ALL_GAUGE_PRESETS: "ALL_GAUGE_PRESETS" }, outputs: { onPresetChange: "onPresetChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PresetPreviewComponent),
@@ -954,7 +954,7 @@ class PresetPreviewComponent {
             }
         ], ngImport: i0, template: "<div class=\"d-grid grid__col--4-4-4 gap-4\">\n  <button\n    class=\"c8y-radial-gauge__preset preset-{{ preset.id }}\"\n    [class.selected]=\"preset.id === selectedPresetId\"\n    [attr.aria-label]=\"preset.name | translate\"\n    type=\"button\"\n    *ngFor=\"let preset of ALL_GAUGE_PRESETS\"\n    (click)=\"emitPresetChange(preset.id)\"\n  >\n    <c8y-radial-gauge\n      class=\"c8y-radial-gauge--square\"\n      *ngIf=\"preset.id !== 'custom'\"\n      [activeDatapointGauge]=\"activeDatapointGauge\"\n      [measurement]=\"measurement\"\n      [fractionSize]=\"2\"\n      [selectedPresetId]=\"preset.id\"\n      [gaugeOptions]=\"preset\"\n    ></c8y-radial-gauge>\n    <span>{{ preset.name | translate }}</span>\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadialGaugeViewComponent, selector: "c8y-radial-gauge", inputs: ["activeDatapointGauge", "measurement", "fractionSize", "gaugeOptions", "selectedPresetId"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PresetPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PresetPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-preset-preview', standalone: true, imports: [CommonModule, RadialGaugeViewComponent], providers: [
                         {
@@ -1195,10 +1195,10 @@ class InfoGaugeWidgetConfigComponent {
             ]
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InfoGaugeWidgetConfigComponent, deps: [{ token: i1$3.FormBuilder }, { token: i1$3.NgForm }, { token: i2.WidgetConfigComponent }, { token: i2.WidgetConfigService }, { token: i1.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: InfoGaugeWidgetConfigComponent, isStandalone: true, selector: "c8y-info-gauge-widget-config", inputs: { config: "config" }, providers: [MeasurementRealtimeService], viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }, { propertyName: "previewMapSet", first: true, predicate: ["gaugePreview"], descendants: true }], ngImport: i0, template: "<form\n  class=\"fit-h\"\n  [formGroup]=\"formGroup\"\n>\n  @if (isInfoGauge) {\n    <div class=\"m-l-16 m-r-16\">\n      <c8y-form-group class=\"p-t-8\">\n        <label translate>Decimal places</label>\n        <input\n          class=\"form-control\"\n          name=\"fractionSize\"\n          type=\"number\"\n          formControlName=\"fractionSize\"\n          step=\"1\"\n        />\n        <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n      </c8y-form-group>\n      @if (formGroup.errors?.noActiveDatapoint) {\n        <div\n          class=\"alert alert-info\"\n          role=\"alert\"\n          translate\n        >\n          At least one data point for the labels or the gauge needs to be selected.\n        </div>\n      }\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top p-t-16 d-block\"\n        listTitle=\"{{ 'Multiple label and value pairs' | translate }}\"\n        name=\"datapoints\"\n        [defaultFormOptions]=\"defaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        [minActiveCount]=\"0\"\n        formControlName=\"datapointsLabels\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top p-t-16 d-block\"\n        listTitle=\"{{ 'Gauge`display`' | translate }}\"\n        name=\"datapoints\"\n        [defaultFormOptions]=\"defaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        [minActiveCount]=\"0\"\n        [maxActiveCount]=\"1\"\n        formControlName=\"datapointsGauge\"\n      ></c8y-datapoint-selection-list>\n    </div>\n  } @else {\n    <c8y-datapoint-selection-list\n      class=\"bg-inherit d-block\"\n      listTitle=\"{{ 'Data points`display`' | translate }}\"\n      name=\"datapoints\"\n      [defaultFormOptions]=\"defaultFormOptions\"\n      [config]=\"datapointSelectionConfig\"\n      [minActiveCount]=\"0\"\n      [maxActiveCount]=\"1\"\n      formControlName=\"datapointsGauge\"\n    ></c8y-datapoint-selection-list>\n\n    <c8y-form-group class=\"p-t-8 p-r-16 p-l-16\">\n      <label translate>Decimal places</label>\n      <input\n        class=\"form-control\"\n        name=\"fractionSize\"\n        type=\"number\"\n        formControlName=\"fractionSize\"\n        step=\"1\"\n      />\n      <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n    </c8y-form-group>\n\n    <div class=\"form-group p-r-16 p-l-16 m-b-0\">\n      <legend>\n        {{ 'Presets' | translate }}\n      </legend>\n      <c8y-preset-preview\n        formControlName=\"gaugePresetId\"\n        [ALL_GAUGE_PRESETS]=\"ALL_GAUGE_PRESETS\"\n        (onPresetChange)=\"onRadioPresetChange($event)\"\n      ></c8y-preset-preview>\n    </div>\n\n    <div class=\"p-16\">\n      <button\n        class=\"btn btn-default\"\n        aria-controls=\"advancedCollapse\"\n        [attr.aria-expanded]=\"showAdvancedOptions\"\n        type=\"button\"\n        (click)=\"showAdvancedOptions = !showAdvancedOptions\"\n      >\n        {{ showAdvancedOptions ? hideAdvancedOptionsLabel : showAdvancedOptionsLabel }}\n      </button>\n    </div>\n\n    <div\n      class=\"collapse\"\n      id=\"advancedCollapse\"\n      [collapse]=\"!showAdvancedOptions\"\n      [isAnimated]=\"true\"\n    >\n      <div\n        class=\"fit-h\"\n        style=\"min-height: 400px\"\n      >\n        <c8y-editor\n          [ngModel]=\"gaugeOptionsString\"\n          (ngModelChange)=\"gaugeJSONChange($event)\"\n          (editorInit)=\"assignSchema()\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          monacoEditorMarkerValidator\n        ></c8y-editor>\n      </div>\n    </div>\n  }\n</form>\n\n<ng-template #gaugePreview>\n  @if (\n    (this.formGroup.value.datapointsGauge?.length > 0 && activeDatapointGauge) ||\n    (this.formGroup.value.datapointsLabels?.length > 0 && activeDatapointLabel)\n  ) {\n    <div style=\"height: 300px\">\n      <c8y-info-gauge-widget-view [config]=\"previewConfig\"></c8y-info-gauge-widget-view>\n    </div>\n  } @else {\n    <div class=\"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=\"info-gauge--empty-state-no-data-point-selected\"\n      >\n        <p c8y-guide-docs>\n          <small translate>\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#info-gauge\">user documentation</a>\n            .\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  }\n</ng-template>\n", dependencies: [{ 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"] }, { 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: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i4.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "directive", type: MonacoEditorMarkerValidatorDirective, selector: "c8y-editor [monacoEditorMarkerValidator]" }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i5.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "component", type: PresetPreviewComponent, selector: "c8y-preset-preview", inputs: ["ALL_GAUGE_PRESETS"], outputs: ["onPresetChange"] }, { kind: "component", type: InfoGaugeWidgetViewComponent, selector: "c8y-info-gauge-widget-view", inputs: ["config"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InfoGaugeWidgetConfigComponent, deps: [{ token: i1$3.FormBuilder }, { token: i1$3.NgForm }, { token: i2.WidgetConfigComponent }, { token: i2.WidgetConfigService }, { token: i1.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InfoGaugeWidgetConfigComponent, isStandalone: true, selector: "c8y-info-gauge-widget-config", inputs: { config: "config" }, providers: [MeasurementRealtimeService], viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }, { propertyName: "previewMapSet", first: true, predicate: ["gaugePreview"], descendants: true }], ngImport: i0, template: "<form\n  class=\"fit-h\"\n  [formGroup]=\"formGroup\"\n>\n  @if (isInfoGauge) {\n    <div class=\"m-l-16 m-r-16\">\n      <c8y-form-group class=\"p-t-8\">\n        <label translate>Decimal places</label>\n        <input\n          class=\"form-control\"\n          name=\"fractionSize\"\n          type=\"number\"\n          formControlName=\"fractionSize\"\n          step=\"1\"\n        />\n        <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n      </c8y-form-group>\n      @if (formGroup.errors?.noActiveDatapoint) {\n        <div\n          class=\"alert alert-info\"\n          role=\"alert\"\n          translate\n        >\n          At least one data point for the labels or the gauge needs to be selected.\n        </div>\n      }\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top p-t-16 d-block\"\n        listTitle=\"{{ 'Multiple label and value pairs' | translate }}\"\n        name=\"datapoints\"\n        [defaultFormOptions]=\"defaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        [minActiveCount]=\"0\"\n        formControlName=\"datapointsLabels\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top p-t-16 d-block\"\n        listTitle=\"{{ 'Gauge`display`' | translate }}\"\n        name=\"datapoints\"\n        [defaultFormOptions]=\"defaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        [minActiveCount]=\"0\"\n        [maxActiveCount]=\"1\"\n        formControlName=\"datapointsGauge\"\n      ></c8y-datapoint-selection-list>\n    </div>\n  } @else {\n    <c8y-datapoint-selection-list\n      class=\"bg-inherit d-block\"\n      listTitle=\"{{ 'Data points`display`' | translate }}\"\n      name=\"datapoints\"\n      [defaultFormOptions]=\"defaultFormOptions\"\n      [config]=\"datapointSelectionConfig\"\n      [minActiveCount]=\"0\"\n      [maxActiveCount]=\"1\"\n      formControlName=\"datapointsGauge\"\n    ></c8y-datapoint-selection-list>\n\n    <c8y-form-group class=\"p-t-8 p-r-16 p-l-16\">\n      <label translate>Decimal places</label>\n      <input\n        class=\"form-control\"\n        name=\"fractionSize\"\n        type=\"number\"\n        formControlName=\"fractionSize\"\n        step=\"1\"\n      />\n      <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n    </c8y-form-group>\n\n    <div class=\"form-group p-r-16 p-l-16 m-b-0\">\n      <legend>\n        {{ 'Presets' | translate }}\n      </legend>\n      <c8y-preset-preview\n        formControlName=\"gaugePresetId\"\n        [ALL_GAUGE_PRESETS]=\"ALL_GAUGE_PRESETS\"\n        (onPresetChange)=\"onRadioPresetChange($event)\"\n      ></c8y-preset-preview>\n    </div>\n\n    <div class=\"p-16\">\n      <button\n        class=\"btn btn-default\"\n        aria-controls=\"advancedCollapse\"\n        [attr.aria-expanded]=\"showAdvancedOptions\"\n        type=\"button\"\n        (click)=\"showAdvancedOptions = !showAdvancedOptions\"\n      >\n        {{ showAdvancedOptions ? hideAdvancedOptionsLabel : showAdvancedOptionsLabel }}\n      </button>\n    </div>\n\n    <div\n      class=\"collapse\"\n      id=\"advancedCollapse\"\n      [collapse]=\"!showAdvancedOptions\"\n      [isAnimated]=\"true\"\n    >\n      <div\n        class=\"fit-h\"\n        style=\"min-height: 400px\"\n      >\n        <c8y-editor\n          [ngModel]=\"gaugeOptionsString\"\n          (ngModelChange)=\"gaugeJSONChange($event)\"\n          (editorInit)=\"assignSchema()\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          monacoEditorMarkerValidator\n        ></c8y-editor>\n      </div>\n    </div>\n  }\n</form>\n\n<ng-template #gaugePreview>\n  @if (\n    (this.formGroup.value.datapointsGauge?.length > 0 && activeDatapointGauge) ||\n    (this.formGroup.value.datapointsLabels?.length > 0 && activeDatapointLabel)\n  ) {\n    <div style=\"height: 300px\">\n      <c8y-info-gauge-widget-view [config]=\"previewConfig\"></c8y-info-gauge-widget-view>\n    </div>\n  } @else {\n    <div class=\"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=\"info-gauge--empty-state-no-data-point-selected\"\n      >\n        <p c8y-guide-docs>\n          <small translate>\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#info-gauge\">user documentation</a>\n            .\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  }\n</ng-template>\n", dependencies: [{ 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"] }, { 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: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i4.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "directive", type: MonacoEditorMarkerValidatorDirective, selector: "c8y-editor [monacoEditorMarkerValidator]" }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i5.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "component", type: PresetPreviewComponent, selector: "c8y-preset-preview", inputs: ["ALL_GAUGE_PRESETS"], outputs: ["onPresetChange"] }, { kind: "component", type: InfoGaugeWidgetViewComponent, selector: "c8y-info-gauge-widget-view", inputs: ["config"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InfoGaugeWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InfoGaugeWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-info-gauge-widget-config', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], providers: [MeasurementRealtimeService], standalone: true, imports: [
                         FormGroupComponent,