@c8y/ngx-components 1023.90.1 → 1023.96.0

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

@@ -1,12 +1,12 @@
 import { NgIf, NgClass, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, Input, Component, input, computed, ChangeDetectionStrategy, viewChild, SecurityContext, ViewChild, DestroyRef, signal } from '@angular/core';
+import { inject, Injectable, Input, Component, input, computed, ChangeDetectionStrategy, viewChild, SecurityContext, EventEmitter, ViewChild, Output, DestroyRef, signal } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { Router, RouterModule } from '@angular/router';
 import { gettext } from '@c8y/ngx-components/gettext';
 import * as i2$1 from '@c8y/ngx-components';
-import { AppStateService, Permissions, IconDirective, C8yTranslatePipe, ManagedObjectRealtimeService, TabsModule, LoadingComponent, AlertService, OptionsService, ClipboardService, DashboardChildComponent } from '@c8y/ngx-components';
+import { AppStateService, Permissions, IconDirective, C8yTranslatePipe, ManagedObjectRealtimeService, TabsModule, LoadingComponent, AlertService, OptionsService, ClipboardService, DismissAlertStrategy, DynamicComponentAlert } from '@c8y/ngx-components';
 import { WidgetConfigService, quoteAndEscape, WidgetConfigFeedbackComponent, AssetPropertyMappingsService, renamePropertyKeyInCode } from '@c8y/ngx-components/context-dashboard';
 import * as i1 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
@@ -23,7 +23,7 @@ import { PRESET_NAME, REFRESH_OPTION, LocalControlsComponent, GLOBAL_CONTEXT_DIS
 import * as i4 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { EditorComponent } from '@c8y/ngx-components/editor';
-import { map as map$1, distinctUntilChanged as distinctUntilChanged$1, switchMap as switchMap$1, filter as filter$1 } from 'rxjs/operators';
+import { map as map$1, distinctUntilChanged as distinctUntilChanged$1, switchMap as switchMap$1, filter as filter$1, tap, retry, take } from 'rxjs/operators';
 import { AssetPropertyListComponent, AssetPropertyActionDirective } from '@c8y/ngx-components/asset-properties';
 
 const INITIAL_HTML_FORMATTED = `<div>
@@ -364,6 +364,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class HtmlFrameComponent {
     constructor() {
         this.propertyValues$ = EMPTY;
+        /**
+         * Gates the managed-object realtime subscription. Defaults to always-on
+         * for backwards compatibility; callers that own a global time-context
+         * control (e.g. SCADA) can pass a live-mode observable to pause the MO
+         * updates when the widget is paused.
+         */
+        this.realtimeControl$ = of(true);
         /**
          * If set to true, it will be ensured that a unique hash is generated
          * for every webcomponent. This is useful if configured as otherwise it might
@@ -399,6 +406,8 @@ class HtmlFrameComponent {
         this.alerts = [];
         const div = this.hostElement();
         div.nativeElement.innerHTML = '';
+        this.currentWebComponent = undefined;
+        this.currentLegacyElement = undefined;
         this.reload$.next();
     }
     async initDiv(divHostElement) {
@@ -420,7 +429,11 @@ class HtmlFrameComponent {
         }
         // same goes for an HTML Element
         if (defaultModule.default instanceof HTMLElement) {
+            if (this.currentLegacyElement?.parentNode === divHostElement) {
+                divHostElement.removeChild(this.currentLegacyElement);
+            }
             divHostElement.appendChild(defaultModule.default);
+            this.currentLegacyElement = defaultModule.default;
             // Find and execute scripts
             const scripts = divHostElement.querySelectorAll('script');
             scripts.forEach(script => {
@@ -473,15 +486,17 @@ class HtmlFrameComponent {
         return merge(errorEvents$, rejectionEvents$);
     }
     createWebComponent(webComponentName, divHostElement, context) {
+        // Remove previous web component if it exists
+        if (this.currentWebComponent && this.currentWebComponent.parentNode === divHostElement) {
+            divHostElement.removeChild(this.currentWebComponent);
+        }
         const webComponent = document.createElement(webComponentName);
         const instantTranslate = this.translateService.instant.bind(this.translateService);
         webComponent.c8yTranslate = instantTranslate;
-        // TODO: should c8yContext be updated in realtime and also connected under global time controls?
         webComponent.c8yContext = context;
         if (context?.id) {
-            this.moRealtime
-                .onAll$(context.id)
-                .pipe(takeUntil(merge(this.reload$, this.destroy$)))
+            this.realtimeControl$
+                .pipe(switchMap(enabled => (enabled ? this.moRealtime.onAll$(context.id) : EMPTY)), takeUntil(merge(this.reload$, this.destroy$)))
                 .subscribe(res => {
                 webComponent.c8yContext = res.data;
             });
@@ -490,6 +505,8 @@ class HtmlFrameComponent {
             webComponent.c8yProperties = values;
         });
         divHostElement.appendChild(webComponent);
+        // Store reference to current component
+        this.currentWebComponent = webComponent;
         return webComponent;
     }
     mapErrorEventToAlert(event) {
@@ -530,7 +547,7 @@ class HtmlFrameComponent {
         return webComponentScript;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: HtmlFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: HtmlFrameComponent, isStandalone: true, selector: "c8y-html-frame", inputs: { config: "config", device: "device", propertyValues$: "propertyValues$", useSalt: "useSalt" }, host: { classAttribute: "d-contents" }, viewQueries: [{ propertyName: "hostElement", first: true, predicate: ["hostElement"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@for (alert of alerts; track alert) {\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}\n<div\n  class=\"fit-w fit-h\"\n  #hostElement\n></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: HtmlFrameComponent, isStandalone: true, selector: "c8y-html-frame", inputs: { config: "config", device: "device", propertyValues$: "propertyValues$", realtimeControl$: "realtimeControl$", useSalt: "useSalt" }, host: { classAttribute: "d-contents" }, viewQueries: [{ propertyName: "hostElement", first: true, predicate: ["hostElement"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@for (alert of alerts; track alert) {\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}\n<div\n  class=\"fit-w fit-h\"\n  #hostElement\n></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: HtmlFrameComponent, decorators: [{
             type: Component,
@@ -541,6 +558,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], propertyValues$: [{
                 type: Input
+            }], realtimeControl$: [{
+                type: Input
             }], useSalt: [{
                 type: Input
             }], hostElement: [{ type: i0.ViewChild, args: ['hostElement', { isSignal: true }] }] } });
@@ -548,10 +567,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class WidgetCodeEditorComponent {
     constructor() {
         this.mode = 'code';
-        this.configService = inject(HtmlWidgetConfigService);
+        this.showAdvancedSettings = true;
+        this.codeChange = new EventEmitter();
+        this.cssChange = new EventEmitter();
         this.translate = inject(TranslateService);
         this.widgetConfigService = inject(WidgetConfigService);
-        this.propertyKeys$ = this.widgetConfigService.currentConfig$.pipe(map(config => Object.keys(config?.properties || {}).sort((a, b) => a.localeCompare(b))));
+        this.defaultPropertyKeys$ = this.widgetConfigService.currentConfig$.pipe(map(config => Object.keys(config?.properties || {}).sort((a, b) => a.localeCompare(b))));
+        this.propertyKeys$ = this.defaultPropertyKeys$;
+        this.propertyPrefix = 'this.c8yProperties';
         this.isAutoSaveEnabled = true;
         this.language = 'html';
         this.isLoading = false;
@@ -563,6 +586,11 @@ class WidgetCodeEditorComponent {
         this.TAB_OUTLET_NAME = 'html-widget-tab-outlet';
         this.destroy$ = new Subject();
         this.suggestionProviders = [];
+        this.getFormattedPropertyExpression = (key) => {
+            const nonAlphanumericRegex = /[^a-zA-Z0-9]/;
+            const formattedKey = nonAlphanumericRegex.test(key) ? `[${quoteAndEscape(key)}]` : `${key}`;
+            return '${' + this.propertyPrefix + '?.' + formattedKey + '}';
+        };
     }
     ngOnDestroy() {
         this.suggestionProviders.forEach(a => a.dispose());
@@ -624,10 +652,10 @@ class WidgetCodeEditorComponent {
     saveCode(codeStr) {
         const code = codeStr || this.editor.getValue();
         if (this.mode === 'code') {
-            this.configService.changeCode(code);
+            this.codeChange.next(code);
             return;
         }
-        this.configService.changeCss(code);
+        this.cssChange.next(code);
     }
     insertPropertyAtCursor(key) {
         if (!this.editor) {
@@ -646,6 +674,7 @@ class WidgetCodeEditorComponent {
         if (!keys.length)
             return;
         const monaco = this.editorComponent.monaco;
+        const escapedPrefix = this.propertyPrefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
         const providerOptions = {
             triggerCharacters: ['$', '.', '[', "'"],
             provideCompletionItems: (model, position) => {
@@ -661,8 +690,8 @@ class WidgetCodeEditorComponent {
                     startColumn,
                     endColumn: position.column
                 });
-                // Case 1: after dot access – this.c8yProperties?. or this.c8yProperties.
-                const dotMatch = /this\.c8yProperties\??\.(\w*)$/.exec(lineText);
+                // Case 1: after dot access – <prefix>?. or <prefix>.
+                const dotMatch = new RegExp(escapedPrefix + '\\??\\.(' + '\\w*)$').exec(lineText);
                 if (dotMatch) {
                     const typed = dotMatch[1];
                     const startColumn = position.column - typed.length;
@@ -677,8 +706,8 @@ class WidgetCodeEditorComponent {
                     }));
                     return { suggestions };
                 }
-                // Case 2: after bracket access – this.c8yProperties?.[ or this.c8yProperties[
-                const bracketMatch = /this\.c8yProperties(?:\?\.)?\[([^\]]*)$/.exec(lineText);
+                // Case 2: after bracket access – <prefix>?.[ or <prefix>[
+                const bracketMatch = new RegExp(escapedPrefix + '(?:\\?\\.)?' + '\\[([^\\]]*)$').exec(lineText);
                 if (bracketMatch) {
                     const typed = bracketMatch[1];
                     const charAfterCursor = model.getValueInRange({
@@ -733,13 +762,8 @@ class WidgetCodeEditorComponent {
         };
         this.suggestionProviders.push(monaco.languages.registerCompletionItemProvider('html', providerOptions), monaco.languages.registerCompletionItemProvider('javascript', providerOptions));
     }
-    getFormattedPropertyExpression(key) {
-        const nonAlphanumericRegex = /[^a-zA-Z0-9]/;
-        const formattedKey = nonAlphanumericRegex.test(key) ? `[${quoteAndEscape(key)}]` : `${key}`;
-        return '${this.c8yProperties?.' + formattedKey + '}';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WidgetCodeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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      @let propertyKeys = propertyKeys$ | async;\n      @if (mode !== 'css' && propertyKeys?.length) {\n        <div\n          class=\"btn-group btn-group-sm m-l-4\"\n          container=\"body\"\n          dropdown\n        >\n          <button\n            class=\"btn btn-default\"\n            [attr.aria-label]=\"'Insert property' | translate\"\n            [tooltip]=\"'Insert property' | translate\"\n            placement=\"top\"\n            container=\"body\"\n            type=\"button\"\n            [delay]=\"500\"\n            dropdownToggle\n          >\n            <i [c8yIcon]=\"'plus-circle'\"></i>\n          </button>\n          <ul\n            class=\"dropdown-menu\"\n            *dropdownMenu\n          >\n            @for (key of propertyKeys; track key) {\n              <li>\n                <button\n                  class=\"dropdown-item\"\n                  type=\"button\"\n                  (click)=\"insertPropertyAtCursor(key)\"\n                >\n                  {{ key }}\n                </button>\n              </li>\n            }\n          </ul>\n        </div>\n      }\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: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { 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: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: WidgetCodeEditorComponent, isStandalone: true, selector: "c8y-widget-code-editor", inputs: { mode: "mode", config: "config", showAdvancedSettings: "showAdvancedSettings", propertyKeys$: "propertyKeys$", propertyPrefix: "propertyPrefix", getFormattedPropertyExpression: "getFormattedPropertyExpression" }, outputs: { codeChange: "codeChange", cssChange: "cssChange" }, 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  @if (showAdvancedSettings) {\n    <c8y-html-widget-advanced-settings\n      [devMode]=\"config?.devMode\"\n      [cssEncapsulation]=\"config?.options?.cssEncapsulation\"\n    ></c8y-html-widget-advanced-settings>\n  }\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      @let propertyKeys = propertyKeys$ | async;\n      @if (mode !== 'css' && propertyKeys?.length) {\n        <div\n          class=\"btn-group btn-group-sm m-l-4\"\n          container=\"body\"\n          dropdown\n        >\n          <button\n            class=\"btn btn-default\"\n            [attr.aria-label]=\"'Insert property' | translate\"\n            [tooltip]=\"'Insert property' | translate\"\n            placement=\"top\"\n            container=\"body\"\n            type=\"button\"\n            [delay]=\"500\"\n            dropdownToggle\n          >\n            <i [c8yIcon]=\"'plus-circle'\"></i>\n          </button>\n          <ul\n            class=\"dropdown-menu\"\n            *dropdownMenu\n          >\n            @for (key of propertyKeys; track key) {\n              <li>\n                <button\n                  class=\"dropdown-item\"\n                  type=\"button\"\n                  (click)=\"insertPropertyAtCursor(key)\"\n                >\n                  {{ key }}\n                </button>\n              </li>\n            }\n          </ul>\n        </div>\n      }\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: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { 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: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WidgetCodeEditorComponent, decorators: [{
             type: Component,
@@ -756,14 +780,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         BsDropdownModule,
                         LoadingComponent,
                         AdvancedSettingsComponent
-                    ], selector: 'c8y-widget-code-editor', 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      @let propertyKeys = propertyKeys$ | async;\n      @if (mode !== 'css' && propertyKeys?.length) {\n        <div\n          class=\"btn-group btn-group-sm m-l-4\"\n          container=\"body\"\n          dropdown\n        >\n          <button\n            class=\"btn btn-default\"\n            [attr.aria-label]=\"'Insert property' | translate\"\n            [tooltip]=\"'Insert property' | translate\"\n            placement=\"top\"\n            container=\"body\"\n            type=\"button\"\n            [delay]=\"500\"\n            dropdownToggle\n          >\n            <i [c8yIcon]=\"'plus-circle'\"></i>\n          </button>\n          <ul\n            class=\"dropdown-menu\"\n            *dropdownMenu\n          >\n            @for (key of propertyKeys; track key) {\n              <li>\n                <button\n                  class=\"dropdown-item\"\n                  type=\"button\"\n                  (click)=\"insertPropertyAtCursor(key)\"\n                >\n                  {{ key }}\n                </button>\n              </li>\n            }\n          </ul>\n        </div>\n      }\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" }]
+                    ], selector: 'c8y-widget-code-editor', 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  @if (showAdvancedSettings) {\n    <c8y-html-widget-advanced-settings\n      [devMode]=\"config?.devMode\"\n      [cssEncapsulation]=\"config?.options?.cssEncapsulation\"\n    ></c8y-html-widget-advanced-settings>\n  }\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      @let propertyKeys = propertyKeys$ | async;\n      @if (mode !== 'css' && propertyKeys?.length) {\n        <div\n          class=\"btn-group btn-group-sm m-l-4\"\n          container=\"body\"\n          dropdown\n        >\n          <button\n            class=\"btn btn-default\"\n            [attr.aria-label]=\"'Insert property' | translate\"\n            [tooltip]=\"'Insert property' | translate\"\n            placement=\"top\"\n            container=\"body\"\n            type=\"button\"\n            [delay]=\"500\"\n            dropdownToggle\n          >\n            <i [c8yIcon]=\"'plus-circle'\"></i>\n          </button>\n          <ul\n            class=\"dropdown-menu\"\n            *dropdownMenu\n          >\n            @for (key of propertyKeys; track key) {\n              <li>\n                <button\n                  class=\"dropdown-item\"\n                  type=\"button\"\n                  (click)=\"insertPropertyAtCursor(key)\"\n                >\n                  {{ key }}\n                </button>\n              </li>\n            }\n          </ul>\n        </div>\n      }\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" }]
         }], propDecorators: { mode: [{
                 type: Input
             }], config: [{
                 type: Input
+            }], showAdvancedSettings: [{
+                type: Input
+            }], codeChange: [{
+                type: Output
+            }], cssChange: [{
+                type: Output
+            }], propertyKeys$: [{
+                type: Input
+            }], propertyPrefix: [{
+                type: Input
             }], editorComponent: [{
                 type: ViewChild,
                 args: [EditorComponent]
+            }], getFormattedPropertyExpression: [{
+                type: Input
             }] } });
 
 class HtmlWidgetConfigComponent {
@@ -781,7 +817,7 @@ class HtmlWidgetConfigComponent {
         this.htmlWidgetConfigService = inject(HtmlWidgetConfigService);
         this.widgetConfigService = inject(WidgetConfigService);
         this.assetPropertyMappings = inject(AssetPropertyMappingsService);
-        this.controls = PRESET_NAME.AUTO_REFRESH_ONLY;
+        this.controls = PRESET_NAME.AUTO_REFRESH_ONLY_CONFIG;
         this.destroyRef = inject(DestroyRef);
         this.realtimeControl$ = this.widgetConfigService.currentConfig$.pipe(map$1(config => config?.refreshOption === REFRESH_OPTION.LIVE && config?.isAutoRefreshEnabled === true), distinctUntilChanged$1());
         this.propertyValues$ = this.widgetConfigService.currentConfig$.pipe(switchMap$1(config => this.assetPropertyMappings.getValues$(config?.properties, this.realtimeControl$)));
@@ -796,6 +832,12 @@ class HtmlWidgetConfigComponent {
         // it here.
         this.htmlWidgetConfigService.destroy();
     }
+    onCodeChange(value) {
+        this.htmlWidgetConfigService.changeCode(value);
+    }
+    onCssChange(value) {
+        this.htmlWidgetConfigService.changeCss(value);
+    }
     handleRename(notification) {
         const { oldKey, newKey } = notification;
         const htmlWidgetConfig = this.widgetConfigService.currentConfig;
@@ -812,7 +854,7 @@ class HtmlWidgetConfigComponent {
         this.alert.success(gettext('Renamed asset property and updated references in HTML code.'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: HtmlWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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  @if ((widgetConfigService.currentConfig$ | async)?.displayMode !== 'dashboard') {\n    <c8y-local-controls\n      [controls]=\"controls\"\n      [displayMode]=\"(widgetConfigService.currentConfig$ | async)?.displayMode\"\n      [config]=\"globalContextState$ | async\"\n      [disabled]=\"true\"\n    ></c8y-local-controls>\n  }\n  <c8y-html-frame\n    [config]=\"htmlWidgetConfigService.codeEditorChangeConfig$ | async\"\n    [device]=\"(widgetConfigService.currentConfig$ | async).device\"\n    [propertyValues$]=\"propertyValues$\"\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", "propertyValues$", "useSalt"] }, { kind: "component", type: WidgetCodeEditorComponent, selector: "c8y-widget-code-editor", inputs: ["mode", "config"] }, { kind: "component", type: LocalControlsComponent, selector: "c8y-local-controls", inputs: ["controls", "displayMode", "config", "isLoading", "disabled", "emitRefresh", "dashboardChild"], outputs: ["configChange", "refresh"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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  (codeChange)=\"onCodeChange($event)\"\n  (cssChange)=\"onCssChange($event)\"\n></c8y-widget-code-editor>\n\n<ng-template #htmlPreview>\n  @if ((widgetConfigService.currentConfig$ | async)?.displayMode !== 'dashboard') {\n    <c8y-local-controls\n      [controls]=\"controls\"\n      [displayMode]=\"(widgetConfigService.currentConfig$ | async)?.displayMode\"\n      [config]=\"globalContextState$ | async\"\n      [disabled]=\"true\"\n    ></c8y-local-controls>\n  }\n  <c8y-html-frame\n    [config]=\"htmlWidgetConfigService.codeEditorChangeConfig$ | async\"\n    [device]=\"(widgetConfigService.currentConfig$ | async).device\"\n    [propertyValues$]=\"propertyValues$\"\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", "propertyValues$", "realtimeControl$", "useSalt"] }, { kind: "component", type: WidgetCodeEditorComponent, selector: "c8y-widget-code-editor", inputs: ["mode", "config", "showAdvancedSettings", "propertyKeys$", "propertyPrefix", "getFormattedPropertyExpression"], outputs: ["codeChange", "cssChange"] }, { kind: "component", type: LocalControlsComponent, selector: "c8y-local-controls", inputs: ["controls", "displayMode", "config", "isLoading", "disabled", "propagateAutoRefresh", "emitRefresh", "dashboardChild"], outputs: ["configChange", "refresh"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: HtmlWidgetConfigComponent, decorators: [{
             type: Component,
@@ -823,7 +865,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         HtmlFrameComponent,
                         WidgetCodeEditorComponent,
                         LocalControlsComponent
-                    ], template: "<c8y-widget-code-editor\n  [config]=\"htmlWidgetConfigService.config$ | async\"\n  [mode]=\"'code'\"\n></c8y-widget-code-editor>\n\n<ng-template #htmlPreview>\n  @if ((widgetConfigService.currentConfig$ | async)?.displayMode !== 'dashboard') {\n    <c8y-local-controls\n      [controls]=\"controls\"\n      [displayMode]=\"(widgetConfigService.currentConfig$ | async)?.displayMode\"\n      [config]=\"globalContextState$ | async\"\n      [disabled]=\"true\"\n    ></c8y-local-controls>\n  }\n  <c8y-html-frame\n    [config]=\"htmlWidgetConfigService.codeEditorChangeConfig$ | async\"\n    [device]=\"(widgetConfigService.currentConfig$ | async).device\"\n    [propertyValues$]=\"propertyValues$\"\n    [useSalt]=\"true\"\n  ></c8y-html-frame>\n</ng-template>\n" }]
+                    ], template: "<c8y-widget-code-editor\n  [config]=\"htmlWidgetConfigService.config$ | async\"\n  [mode]=\"'code'\"\n  (codeChange)=\"onCodeChange($event)\"\n  (cssChange)=\"onCssChange($event)\"\n></c8y-widget-code-editor>\n\n<ng-template #htmlPreview>\n  @if ((widgetConfigService.currentConfig$ | async)?.displayMode !== 'dashboard') {\n    <c8y-local-controls\n      [controls]=\"controls\"\n      [displayMode]=\"(widgetConfigService.currentConfig$ | async)?.displayMode\"\n      [config]=\"globalContextState$ | async\"\n      [disabled]=\"true\"\n    ></c8y-local-controls>\n  }\n  <c8y-html-frame\n    [config]=\"htmlWidgetConfigService.codeEditorChangeConfig$ | async\"\n    [device]=\"(widgetConfigService.currentConfig$ | async).device\"\n    [propertyValues$]=\"propertyValues$\"\n    [useSalt]=\"true\"\n  ></c8y-html-frame>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { htmlPreviewTemplate: [{
                 type: ViewChild,
                 args: ['htmlPreview']
@@ -874,8 +916,14 @@ class HtmlWidgetComponent {
     constructor() {
         this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
         this.realtimeControl$ = new BehaviorSubject(false);
-        this.propertyValues$ = computed(() => this.assetPropertiesMappings.getValues$(this.config()?.properties, this.realtimeControl$.asObservable()), ...(ngDevMode ? [{ debugName: "propertyValues$" }] : []));
-        this.dashboardChild = inject(DashboardChildComponent);
+        this.refresh$ = new Subject();
+        this.SERVER_ERROR_TEXT = gettext('Server error occurred.');
+        this.propertyValues$ = computed(() => this.assetPropertiesMappings
+            .getValues$(this.config()?.properties, this.realtimeControl$.asObservable(), this.refresh$.asObservable())
+            .pipe(tap({
+            next: () => this.isLoading.set(false),
+            error: () => this.isLoading.set(false)
+        }), retry({ delay: err => this.handleFetchError(err) })), ...(ngDevMode ? [{ debugName: "propertyValues$" }] : []));
         this.displayMode = signal(GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD, ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
         this.contextConfig = signal({}, ...(ngDevMode ? [{ debugName: "contextConfig" }] : []));
         this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
@@ -891,6 +939,7 @@ class HtmlWidgetComponent {
         this.assetPropertiesMappings = inject(AssetPropertyMappingsService);
     }
     ngOnInit() {
+        this.alerts?.setAlertGroupDismissStrategy('warning', DismissAlertStrategy.TEMPORARY_OR_PERMANENT);
         const config = this.config();
         if (config?.html && !config.config) {
             config.config = this.mapLegacyConfig(config);
@@ -913,9 +962,11 @@ class HtmlWidgetComponent {
         const { context } = event;
         this.contextConfig.set(context);
         this.realtimeControl$.next(this.shouldEnableRealtime());
+        this.onRefresh();
     }
-    getDashboardChild() {
-        return this.dashboardChild;
+    onRefresh() {
+        this.isLoading.set(true);
+        this.refresh$.next();
     }
     shouldEnableRealtime() {
         const ctx = this.contextConfig();
@@ -937,8 +988,15 @@ class HtmlWidgetComponent {
             }
         };
     }
+    handleFetchError(err) {
+        this.alerts?.addAlerts(new DynamicComponentAlert({
+            type: 'warning',
+            text: err?.message ?? this.SERVER_ERROR_TEXT
+        }));
+        return this.refresh$.pipe(take(1));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: HtmlWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: HtmlWidgetComponent, isStandalone: true, selector: "c8y-html-widget", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n  <c8y-global-context-connector\n    [controls]=\"PRESET_NAME.AUTO_REFRESH_ONLY\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading()\"\n    [dashboardChild]=\"getDashboardChild()\"\n    [linked]=\"isLinkedToGlobal()\"\n    [emitRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n  >\n  </c8y-global-context-connector>\n} @else {\n  <c8y-local-controls\n    [controls]=\"PRESET_NAME.AUTO_REFRESH_ONLY\"\n    [displayMode]=\"displayMode()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading()\"\n    [emitRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n  >\n  </c8y-local-controls>\n}\n\n<div class=\"p-16\">\n  <c8y-html-frame\n    [config]=\"config().config\"\n    [device]=\"config().device\"\n    [propertyValues$]=\"propertyValues$()\"\n  ></c8y-html-frame>\n</div>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: HtmlFrameComponent, selector: "c8y-html-frame", inputs: ["config", "device", "propertyValues$", "useSalt"] }, { kind: "component", type: GlobalContextConnectorComponent, selector: "c8y-global-context-connector", inputs: ["controls", "config", "isLoading", "dashboardChild", "linked", "emitRefresh"], outputs: ["configChange", "refresh", "linkedChange"] }, { kind: "component", type: LocalControlsComponent, selector: "c8y-local-controls", inputs: ["controls", "displayMode", "config", "isLoading", "disabled", "emitRefresh", "dashboardChild"], outputs: ["configChange", "refresh"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: HtmlWidgetComponent, isStandalone: true, selector: "c8y-html-widget", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n  <c8y-global-context-connector\n    [controls]=\"PRESET_NAME.AUTO_REFRESH_ONLY_CONFIG\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading()\"\n    [linked]=\"isLinkedToGlobal()\"\n    [propagateAutoRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  >\n  </c8y-global-context-connector>\n} @else {\n  <c8y-local-controls\n    [controls]=\"PRESET_NAME.AUTO_REFRESH_ONLY_CONFIG\"\n    [displayMode]=\"displayMode()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading()\"\n    [propagateAutoRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  >\n  </c8y-local-controls>\n}\n\n<div class=\"p-16\">\n  <c8y-html-frame\n    [config]=\"config().config\"\n    [device]=\"config().device\"\n    [propertyValues$]=\"propertyValues$()\"\n  ></c8y-html-frame>\n</div>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: HtmlFrameComponent, selector: "c8y-html-frame", inputs: ["config", "device", "propertyValues$", "realtimeControl$", "useSalt"] }, { kind: "component", type: GlobalContextConnectorComponent, selector: "c8y-global-context-connector", inputs: ["controls", "config", "isLoading", "dashboardChild", "linked", "propagateAutoRefresh", "emitRefresh"], outputs: ["configChange", "refresh", "linkedChange"] }, { kind: "component", type: LocalControlsComponent, selector: "c8y-local-controls", inputs: ["controls", "displayMode", "config", "isLoading", "disabled", "propagateAutoRefresh", "emitRefresh", "dashboardChild"], outputs: ["configChange", "refresh"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: HtmlWidgetComponent, decorators: [{
             type: Component,
@@ -947,7 +1005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         HtmlFrameComponent,
                         GlobalContextConnectorComponent,
                         LocalControlsComponent
-                    ], template: "@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n  <c8y-global-context-connector\n    [controls]=\"PRESET_NAME.AUTO_REFRESH_ONLY\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading()\"\n    [dashboardChild]=\"getDashboardChild()\"\n    [linked]=\"isLinkedToGlobal()\"\n    [emitRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n  >\n  </c8y-global-context-connector>\n} @else {\n  <c8y-local-controls\n    [controls]=\"PRESET_NAME.AUTO_REFRESH_ONLY\"\n    [displayMode]=\"displayMode()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading()\"\n    [emitRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n  >\n  </c8y-local-controls>\n}\n\n<div class=\"p-16\">\n  <c8y-html-frame\n    [config]=\"config().config\"\n    [device]=\"config().device\"\n    [propertyValues$]=\"propertyValues$()\"\n  ></c8y-html-frame>\n</div>\n" }]
+                    ], template: "@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n  <c8y-global-context-connector\n    [controls]=\"PRESET_NAME.AUTO_REFRESH_ONLY_CONFIG\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading()\"\n    [linked]=\"isLinkedToGlobal()\"\n    [propagateAutoRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  >\n  </c8y-global-context-connector>\n} @else {\n  <c8y-local-controls\n    [controls]=\"PRESET_NAME.AUTO_REFRESH_ONLY_CONFIG\"\n    [displayMode]=\"displayMode()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading()\"\n    [propagateAutoRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  >\n  </c8y-local-controls>\n}\n\n<div class=\"p-16\">\n  <c8y-html-frame\n    [config]=\"config().config\"\n    [device]=\"config().device\"\n    [propertyValues$]=\"propertyValues$()\"\n  ></c8y-html-frame>\n</div>\n" }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
 
 /**