@c8y/ngx-components 1023.71.1 → 1023.76.0

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

@@ -1,41 +1,61 @@
 import { NgIf, NgClass, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, Input, Component, input, computed, ChangeDetectionStrategy, viewChild, SecurityContext, ViewChild } from '@angular/core';
+import { inject, Injectable, Input, Component, input, computed, ChangeDetectionStrategy, viewChild, SecurityContext, ViewChild, 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, TabsModule, LoadingComponent, OptionsService, ClipboardService } from '@c8y/ngx-components';
-import { WidgetConfigService, WidgetConfigFeedbackComponent } from '@c8y/ngx-components/context-dashboard';
+import { AppStateService, Permissions, IconDirective, C8yTranslatePipe, ManagedObjectRealtimeService, TabsModule, LoadingComponent, AlertService, OptionsService, ClipboardService, DashboardChildComponent } 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';
 import * as i3 from 'ngx-bootstrap/tooltip';
 import { TooltipModule, TooltipDirective } from 'ngx-bootstrap/tooltip';
 import { isEmpty } from 'lodash';
-import { Subject, first, map, filter, withLatestFrom, switchMap, shareReplay, takeUntil, startWith, combineLatest, distinctUntilChanged, debounceTime, of, merge, from, isEmpty as isEmpty$1, catchError, EMPTY, fromEvent } from 'rxjs';
+import { Subject, first, map, filter, withLatestFrom, switchMap, shareReplay, takeUntil, startWith, combineLatest, distinctUntilChanged, debounceTime, of, EMPTY, merge, from, isEmpty as isEmpty$1, catchError, fromEvent, BehaviorSubject } from 'rxjs';
 import { DomSanitizer } from '@angular/platform-browser';
 import { InventoryService } from '@c8y/client';
 import { kebabCase } from 'lodash-es';
 import { TranslateService } from '@ngx-translate/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { PRESET_NAME, REFRESH_OPTION, LocalControlsComponent, GLOBAL_CONTEXT_DISPLAY_MODE, GlobalContextConnectorComponent } from '@c8y/ngx-components/global-context';
+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 { AssetPropertyListComponent, AssetPropertyActionDirective } from '@c8y/ngx-components/asset-properties';
 
 const INITIAL_HTML_FORMATTED = `<div>
   <h2>Hello from <span class="branded">HTML widget</span></h2>
-  <p class="m-b-8 m-t-16">
-  \$\{this.c8yTranslate('You can use HTML and Javascript template literals here:')\} <br>
-  \$\{this.c8yContext ? this.c8yTranslate('Device {{deviceName}} selected', { deviceName: this.c8yContext.name }) : this.c8yTranslate('No device selected')\}
+
+  <p class="m-t-16">
+    \$\{this.c8yTranslate('You can use HTML and JavaScript template literals:')\}
   </p>
 
-  <a class="btn btn-primary m-b-16" href="#/group">\$\{this.c8yTranslate('Go to groups')\}</a>
+  <p class="m-t-16">
+    <b>Context properties:</b> Access the assigned asset's properties via <code>c8yContext</code>: <br>
+    <tt>\$\{this.c8yContext ? this.c8yTranslate('Selected asset: {{ assetName }}', { assetName: this.c8yContext.name }) : this.c8yTranslate('No asset selected')\}</tt>
+  </p>
+  
+  <p class="m-t-16">
+    <b>Asset properties:</b> Use "Asset properties" to select other properties (incl. computed ones) and access their values via <code>c8yProperties</code>: <br>
+    <i>Last updated:</i> <tt>\${this.c8yProperties?.lastUpdated || '-'}</tt> <br>
+    <i>Last device message:</i> <tt>\${this.c8yProperties?.lastDeviceMessage || '-'}</tt>
+  </p>
 
-  <p>
-    Use the CSS editor to customize the CSS. You can use <span class="text-bold">any design-token CSS variable</span> in there.
+  <p class="m-t-16">
+    <b>Styles:</b> Use the CSS editor to customize styles. You can use <span class="text-bold">any design-token CSS variable</span> in there.
   </p>
 
-  <p>
-    Note that you are only able to translate strings using the c8yTranslate method if they are written in English and their translations are available in the loaded standard or custom translation resources.
+  <p class="m-t-16">
+    <b>Translations:</b> Use the <code>c8yTranslate('text {{ var }}', { var: value })</code> function to translate strings.
+    <i>Note: texts must be written in English and their translations must be available in the loaded standard or custom translation resources.</i>
+  </p>
+
+  <p class="m-t-16">
+    <b>Buttons:</b> Use other HTML elements like buttons: <br>
+    <a class="btn btn-primary m-t-8" href="#/group">\$\{this.c8yTranslate('Go to groups')\}</a>
   </p>
 </div>`;
 const INITIAL_CSS_FORMATTED = `
@@ -60,6 +80,10 @@ export default class ${name} extends LitElement {
   static properties = {
     // The managed object this widget is assigned to. Can be null.
     c8yContext: { type: Object },
+    // The object with realtime values of configured properties. Can be null.
+    c8yProperties: { type: Object },
+    // The instant translation function.
+    c8yTranslate: { type: Function },
   };
 
   constructor() {
@@ -143,6 +167,7 @@ class HtmlWidgetConfigService {
         this.widgetConfigService = inject(WidgetConfigService);
         this.appState = inject(AppStateService);
         this.destroy$ = new Subject();
+        this.notify$ = this.widgetConfigService.notify$;
         this.init$ = this.widgetConfigService.currentConfig$.pipe(first(), map(current => {
             if (current.html) {
                 current.config = this.mapLegacyConfig(current);
@@ -338,6 +363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 
 class HtmlFrameComponent {
     constructor() {
+        this.propertyValues$ = EMPTY;
         /**
          * 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
@@ -348,6 +374,7 @@ class HtmlFrameComponent {
         this.alerts = [];
         this.sanitizer = inject(DomSanitizer);
         this.translateService = inject(TranslateService);
+        this.moRealtime = inject(ManagedObjectRealtimeService);
         this.destroy$ = new Subject();
         this.hostElement = viewChild('hostElement', ...(ngDevMode ? [{ debugName: "hostElement" }] : []));
         this.reload$ = new Subject();
@@ -447,9 +474,21 @@ class HtmlFrameComponent {
     }
     createWebComponent(webComponentName, divHostElement, context) {
         const webComponent = document.createElement(webComponentName);
-        webComponent.c8yContext = context;
         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$)))
+                .subscribe(res => {
+                webComponent.c8yContext = res.data;
+            });
+        }
+        this.propertyValues$.pipe(takeUntil(merge(this.reload$, this.destroy$))).subscribe(values => {
+            webComponent.c8yProperties = values;
+        });
         divHostElement.appendChild(webComponent);
         return webComponent;
     }
@@ -491,7 +530,7 @@ class HtmlFrameComponent {
         return webComponentScript;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HtmlFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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: "@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.18", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HtmlFrameComponent, decorators: [{
             type: Component,
@@ -500,6 +539,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], device: [{
                 type: Input
+            }], propertyValues$: [{
+                type: Input
             }], useSalt: [{
                 type: Input
             }], hostElement: [{ type: i0.ViewChild, args: ['hostElement', { isSignal: true }] }] } });
@@ -508,6 +549,9 @@ class WidgetCodeEditorComponent {
     constructor() {
         this.mode = 'code';
         this.configService = inject(HtmlWidgetConfigService);
+        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.isAutoSaveEnabled = true;
         this.language = 'html';
         this.isLoading = false;
@@ -518,8 +562,10 @@ class WidgetCodeEditorComponent {
         this.BUTTON_ENABLE_AUTOSAVE_LABEL = gettext('Enable auto save`An action you can do on the html widget editor`');
         this.TAB_OUTLET_NAME = 'html-widget-tab-outlet';
         this.destroy$ = new Subject();
+        this.suggestionProviders = [];
     }
     ngOnDestroy() {
+        this.suggestionProviders.forEach(a => a.dispose());
         this.destroy$.next();
         this.destroy$.complete();
     }
@@ -557,6 +603,9 @@ class WidgetCodeEditorComponent {
         this.editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
             this.saveCode();
         });
+        this.propertyKeys$.pipe(takeUntil(this.destroy$)).subscribe(keys => {
+            this.registerPropertySuggestions(keys);
+        });
     }
     formatCode() {
         this.editor.getAction('editor.action.formatDocument').run();
@@ -580,12 +629,122 @@ class WidgetCodeEditorComponent {
         }
         this.configService.changeCss(code);
     }
+    insertPropertyAtCursor(key) {
+        if (!this.editor) {
+            return;
+        }
+        const text = this.getFormattedPropertyExpression(key);
+        const monaco = this.editorComponent.monaco;
+        const position = this.editor.getPosition();
+        const range = new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column);
+        this.editor.executeEdits('insert-property', [{ range, text, forceMoveMarkers: true }]);
+        this.editor.focus();
+    }
+    registerPropertySuggestions(keys) {
+        this.suggestionProviders.forEach(a => a.dispose());
+        this.suggestionProviders = [];
+        if (!keys.length)
+            return;
+        const monaco = this.editorComponent.monaco;
+        const providerOptions = {
+            triggerCharacters: ['$', '.', '[', "'"],
+            provideCompletionItems: (model, position) => {
+                const lineText = model.getValueInRange({
+                    startLineNumber: position.lineNumber,
+                    startColumn: 1,
+                    endLineNumber: position.lineNumber,
+                    endColumn: position.column
+                });
+                const makeRange = (startColumn) => ({
+                    startLineNumber: position.lineNumber,
+                    endLineNumber: position.lineNumber,
+                    startColumn,
+                    endColumn: position.column
+                });
+                // Case 1: after dot access – this.c8yProperties?. or this.c8yProperties.
+                const dotMatch = /this\.c8yProperties\??\.(\w*)$/.exec(lineText);
+                if (dotMatch) {
+                    const typed = dotMatch[1];
+                    const startColumn = position.column - typed.length;
+                    const suggestions = keys
+                        .filter(key => !/[^a-zA-Z0-9_]/.test(key) && key.startsWith(typed))
+                        .map(key => ({
+                        label: key,
+                        kind: monaco.languages.CompletionItemKind.Property,
+                        insertText: key,
+                        range: makeRange(startColumn),
+                        sortText: key
+                    }));
+                    return { suggestions };
+                }
+                // Case 2: after bracket access – this.c8yProperties?.[ or this.c8yProperties[
+                const bracketMatch = /this\.c8yProperties(?:\?\.)?\[([^\]]*)$/.exec(lineText);
+                if (bracketMatch) {
+                    const typed = bracketMatch[1];
+                    const charAfterCursor = model.getValueInRange({
+                        startLineNumber: position.lineNumber,
+                        startColumn: position.column,
+                        endLineNumber: position.lineNumber,
+                        endColumn: position.column + 1
+                    });
+                    const closingBracketAlreadyPresent = charAfterCursor === ']';
+                    const startColumn = position.column - typed.length;
+                    const endColumn = closingBracketAlreadyPresent ? position.column + 1 : position.column;
+                    const suggestions = keys.map(key => ({
+                        label: key,
+                        kind: monaco.languages.CompletionItemKind.Property,
+                        insertText: `${quoteAndEscape(key)}]`,
+                        range: {
+                            startLineNumber: position.lineNumber,
+                            endLineNumber: position.lineNumber,
+                            startColumn,
+                            endColumn
+                        },
+                        sortText: key
+                    }));
+                    return { suggestions };
+                }
+                // Case 3: fresh new expression – cursor is at a word boundary and the user
+                // has started typing a key name.
+                const freshMatch = /(?:^|[\s=(<>,;{}\[\]"'`])(\w*)$/.exec(lineText);
+                if (freshMatch) {
+                    const typed = freshMatch[1];
+                    if (!typed)
+                        return { suggestions: [] };
+                    const startColumn = position.column - typed.length;
+                    const suggestions = keys
+                        .filter(key => key.startsWith(typed))
+                        .map(key => {
+                        const insertText = this.getFormattedPropertyExpression(key);
+                        return {
+                            label: key,
+                            kind: monaco.languages.CompletionItemKind.Property,
+                            insertText,
+                            range: makeRange(startColumn),
+                            detail: insertText,
+                            filterText: key,
+                            sortText: key
+                        };
+                    });
+                    return { suggestions };
+                }
+                return { suggestions: [] };
+            }
+        };
+        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.18", ngImport: i0, type: WidgetCodeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: WidgetCodeEditorComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
+                        AsyncPipe,
                         EditorComponent,
                         FormsModule,
                         IconDirective,
@@ -594,9 +753,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         TabsModule,
                         TooltipModule,
                         PopoverModule,
+                        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      <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  <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" }]
         }], propDecorators: { mode: [{
                 type: Input
             }], config: [{
@@ -607,11 +767,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }] } });
 
 class HtmlWidgetConfigComponent {
-    constructor() {
-        this.options = inject(OptionsService);
-        this.htmlWidgetConfigService = inject(HtmlWidgetConfigService);
-        this.widgetConfigService = inject(WidgetConfigService);
-    }
     set htmlPreviewTemplate(template) {
         if (template) {
             this.widgetConfigService.setPreview(template);
@@ -620,19 +775,56 @@ class HtmlWidgetConfigComponent {
             this.widgetConfigService.setPreview(null);
         }
     }
+    constructor() {
+        this.alert = inject(AlertService);
+        this.options = inject(OptionsService);
+        this.htmlWidgetConfigService = inject(HtmlWidgetConfigService);
+        this.widgetConfigService = inject(WidgetConfigService);
+        this.assetPropertyMappings = inject(AssetPropertyMappingsService);
+        this.controls = PRESET_NAME.AUTO_REFRESH_ONLY;
+        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$)));
+        this.globalContextState$ = this.widgetConfigService.currentConfig$.pipe(map$1(config => config));
+        this.htmlWidgetConfigService.notify$
+            .pipe(takeUntilDestroyed(this.destroyRef), filter$1((n) => n.type === 'asset-property-mapping-key-renamed'))
+            .subscribe(notification => this.handleRename(notification));
+    }
     ngOnDestroy() {
         // sadly the service is component scoped
         // but still not recycled correctly. That is why we do
         // it here.
         this.htmlWidgetConfigService.destroy();
     }
+    handleRename(notification) {
+        const { oldKey, newKey } = notification;
+        const htmlWidgetConfig = this.widgetConfigService.currentConfig;
+        if (!htmlWidgetConfig?.config) {
+            return;
+        }
+        const newCode = renamePropertyKeyInCode(htmlWidgetConfig.config.code, oldKey, newKey);
+        if (newCode === htmlWidgetConfig.config.code) {
+            return;
+        }
+        const updated = { ...htmlWidgetConfig.config, code: newCode };
+        this.htmlWidgetConfigService.save(updated);
+        this.htmlWidgetConfigService.configChanged$.next(updated);
+        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.18", ngImport: i0, type: HtmlWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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"], outputs: ["configChange", "refresh"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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: [{
+            args: [{ selector: 'c8y-html-widget-config', standalone: true, imports: [
+                        RouterModule,
+                        FormsModule,
+                        AsyncPipe,
+                        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" }]
+        }], ctorParameters: () => [], propDecorators: { htmlPreviewTemplate: [{
                 type: ViewChild,
                 args: ['htmlPreview']
             }] } });
@@ -679,10 +871,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         }] });
 
 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.displayMode = signal(GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD, ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
+        this.contextConfig = signal({}, ...(ngDevMode ? [{ debugName: "contextConfig" }] : []));
+        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        /**
+         * Controls link state to global context:
+         * - true/undefined: Widget follows global time context
+         * - false: Widget uses local state, ignores global changes
+         * Set to false when user is interacting (scrolling, zooming) to prevent interruption
+         */
+        this.isLinkedToGlobal = signal(undefined, ...(ngDevMode ? [{ debugName: "isLinkedToGlobal" }] : []));
+        this.GLOBAL_CONTEXT_DISPLAY_MODE = GLOBAL_CONTEXT_DISPLAY_MODE;
+        this.PRESET_NAME = PRESET_NAME;
+        this.assetPropertiesMappings = inject(AssetPropertyMappingsService);
+    }
     ngOnInit() {
-        if (this.config.html && !this.config.config) {
-            this.config.config = this.mapLegacyConfig(this.config);
+        const config = this.config();
+        if (config?.html && !config.config) {
+            config.config = this.mapLegacyConfig(config);
         }
+        const { displayMode = GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD, dateTimeContext, aggregation, isAutoRefreshEnabled, refreshInterval, refreshOption } = config;
+        this.displayMode.set(displayMode);
+        this.contextConfig.set({
+            dateTimeContext,
+            aggregation,
+            isAutoRefreshEnabled,
+            refreshInterval,
+            refreshOption
+        });
+        // Initialize realtime from persisted config — controls may be hidden in
+        // config display mode (AUTO_REFRESH_ONLY.config = []), in which case
+        // onContextChange never fires and realtimeControl$ would stay false.
+        this.realtimeControl$.next(this.shouldEnableRealtime());
+    }
+    onContextChange(event) {
+        const { context } = event;
+        this.contextConfig.set(context);
+        this.realtimeControl$.next(this.shouldEnableRealtime());
+    }
+    getDashboardChild() {
+        return this.dashboardChild;
+    }
+    shouldEnableRealtime() {
+        const ctx = this.contextConfig();
+        return ctx.refreshOption === REFRESH_OPTION.LIVE && ctx.isAutoRefreshEnabled === true;
     }
     mapLegacyConfig(current) {
         const isAlreadyInAdvancedMode = current?.config?.devMode === true;
@@ -701,14 +938,17 @@ class HtmlWidgetComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HtmlWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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"], outputs: ["configChange", "refresh"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'c8y-html-widget', standalone: true, imports: [
+                        RouterModule,
+                        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" }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.