@c8y/ngx-components 1023.71.1 → 1023.75.1

package/widgets/implementations/html-widget/index.d.ts

@@ -1,21 +1,24 @@
 import { Router } from '@angular/router';
-import { WidgetSettings, AppStateService, Permissions, Alert, OptionsService, ClipboardService } from '@c8y/ngx-components';
-import { WidgetConfigService } from '@c8y/ngx-components/context-dashboard';
+import { WidgetSettings, AppStateService, Permissions, Alert, AlertService, OptionsService, ClipboardService, DashboardChildComponent } from '@c8y/ngx-components';
+import { ContextWidgetConfig, AssetPropertyMappings, WidgetConfigService, WidgetConfigNotification, AssetPropertyMappingsService } from '@c8y/ngx-components/context-dashboard';
 import { CockpitConfig } from '@c8y/ngx-components/cockpit-config';
+import * as rxjs from 'rxjs';
 import { Subject, Observable } from 'rxjs';
 import { IManagedObject, IIdentified } from '@c8y/client';
-import { InterpolationParameters, Translation } from '@ngx-translate/core';
+import { InterpolationParameters, Translation, TranslateService } from '@ngx-translate/core';
 import * as i0 from '@angular/core';
 import { OnChanges, OnDestroy, SimpleChanges, TemplateRef } from '@angular/core';
 import { ToolCallPart } from '@c8y/ngx-components/ai';
+import { PresetName, GlobalContextState, GLOBAL_CONTEXT_DISPLAY_MODE } from '@c8y/ngx-components/global-context';
 import { AssetPropertyType } from '@c8y/ngx-components/asset-properties';
 import { EditorComponent } from '@c8y/ngx-components/editor';
 import * as Monaco from 'monaco-editor';
 
-interface HtmlWidgetConfig {
+interface HtmlWidgetConfig extends ContextWidgetConfig {
     device?: IIdentified | null;
     config: HtmlWidget;
     settings?: WidgetSettings;
+    properties?: AssetPropertyMappings;
     /**
      * On HTML WIdget 1.0 this property was used to store the HTML code.
      * It is not used anymore, but we need to keep it for backward compatibility.
@@ -28,7 +31,6 @@ type C8yProperties = Array<PathProperty | ComputedProperty>;
 interface HtmlWidget {
     css: string;
     code: string;
-    props?: C8yProperties;
     options: HtmlWidgetOptions;
     legacy: boolean;
     devMode: boolean;
@@ -40,6 +42,7 @@ interface HtmlWidgetOptions {
 }
 interface WebcomponentContext extends HTMLElement {
     c8yContext: IManagedObject;
+    c8yProperties?: Record<string, unknown>;
     c8yTranslate: (key: string | string[], interpolateParams?: InterpolationParameters) => Translation;
 }
 interface PathProperty {
@@ -54,7 +57,7 @@ interface ComputedProperty {
     query: string;
     reducer?: string;
 }
-declare const INITIAL_HTML_FORMATTED = "<div>\n  <h2>Hello from <span class=\"branded\">HTML widget</span></h2>\n  <p class=\"m-b-8 m-t-16\">\n  ${this.c8yTranslate('You can use HTML and Javascript template literals here:')} <br>\n  ${this.c8yContext ? this.c8yTranslate('Device {{deviceName}} selected', { deviceName: this.c8yContext.name }) : this.c8yTranslate('No device selected')}\n  </p>\n\n  <a class=\"btn btn-primary m-b-16\" href=\"#/group\">${this.c8yTranslate('Go to groups')}</a>\n\n  <p>\n    Use the CSS editor to customize the CSS. You can use <span class=\"text-bold\">any design-token CSS variable</span> in there.\n  </p>\n\n  <p>\n    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.\n  </p>\n</div>";
+declare const INITIAL_HTML_FORMATTED = "<div>\n  <h2>Hello from <span class=\"branded\">HTML widget</span></h2>\n\n  <p class=\"m-t-16\">\n    ${this.c8yTranslate('You can use HTML and JavaScript template literals:')}\n  </p>\n\n  <p class=\"m-t-16\">\n    <b>Context properties:</b> Access the assigned asset's properties via <code>c8yContext</code>: <br>\n    <tt>${this.c8yContext ? this.c8yTranslate('Selected asset: {{ assetName }}', { assetName: this.c8yContext.name }) : this.c8yTranslate('No asset selected')}</tt>\n  </p>\n  \n  <p class=\"m-t-16\">\n    <b>Asset properties:</b> Use \"Asset properties\" to select other properties (incl. computed ones) and access their values via <code>c8yProperties</code>: <br>\n    <i>Last updated:</i> <tt>${this.c8yProperties?.lastUpdated || '-'}</tt> <br>\n    <i>Last device message:</i> <tt>${this.c8yProperties?.lastDeviceMessage || '-'}</tt>\n  </p>\n\n  <p class=\"m-t-16\">\n    <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.\n  </p>\n\n  <p class=\"m-t-16\">\n    <b>Translations:</b> Use the <code>c8yTranslate('text {{ var }}', { var: value })</code> function to translate strings.\n    <i>Note: texts must be written in English and their translations must be available in the loaded standard or custom translation resources.</i>\n  </p>\n\n  <p class=\"m-t-16\">\n    <b>Buttons:</b> Use other HTML elements like buttons: <br>\n    <a class=\"btn btn-primary m-t-8\" href=\"#/group\">${this.c8yTranslate('Go to groups')}</a>\n  </p>\n</div>";
 declare const INITIAL_CSS_FORMATTED = "\n:host > div {\n  padding: var(--c8y-root-component-padding-default);\n}\nspan.branded { \n  color: var(--brand-primary, var(--c8y-brand-primary)); \n}";
 declare const defaultWebComponentName = "DefaultWebComponent";
 declare const defaultWebComponentAttributeNameContext = "c8yContext";
@@ -68,6 +71,7 @@ declare class HtmlWidgetConfigService {
     widgetConfigService: WidgetConfigService;
     appState: AppStateService;
     destroy$: Subject<void>;
+    readonly notify$: Observable<WidgetConfigNotification>;
     init$: Observable<HtmlWidget>;
     config$: Observable<HtmlWidget>;
     codeEditorChangeConfig$: Observable<HtmlWidget>;
@@ -121,6 +125,7 @@ declare class HtmlAiChatToolDetailsComponent {
 declare class HtmlFrameComponent implements OnChanges, OnDestroy {
     config: HtmlWidget;
     device: IManagedObject | IIdentified;
+    propertyValues$: Observable<Record<string, unknown>>;
     /**
      * 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
@@ -131,6 +136,7 @@ declare class HtmlFrameComponent implements OnChanges, OnDestroy {
     alerts: Alert[];
     private sanitizer;
     private translateService;
+    private moRealtime;
     private destroy$;
     private hostElement;
     private reload$;
@@ -152,15 +158,24 @@ declare class HtmlFrameComponent implements OnChanges, OnDestroy {
     private generateHash;
     private createDefaultWebcomponentCode;
     static ɵfac: i0.ɵɵFactoryDeclaration<HtmlFrameComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HtmlFrameComponent, "c8y-html-frame", never, { "config": { "alias": "config"; "required": false; }; "device": { "alias": "device"; "required": false; }; "useSalt": { "alias": "useSalt"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HtmlFrameComponent, "c8y-html-frame", never, { "config": { "alias": "config"; "required": false; }; "device": { "alias": "device"; "required": false; }; "propertyValues$": { "alias": "propertyValues$"; "required": false; }; "useSalt": { "alias": "useSalt"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare class HtmlWidgetConfigComponent implements OnDestroy {
     set htmlPreviewTemplate(template: TemplateRef<any>);
+    alert: AlertService;
     options: OptionsService;
     htmlWidgetConfigService: HtmlWidgetConfigService;
     widgetConfigService: WidgetConfigService;
+    assetPropertyMappings: AssetPropertyMappingsService;
+    controls: PresetName;
+    private readonly destroyRef;
+    private realtimeControl$;
+    propertyValues$: rxjs.Observable<Record<string, unknown>>;
+    globalContextState$: rxjs.Observable<GlobalContextState>;
+    constructor();
     ngOnDestroy(): void;
+    private handleRename;
     static ɵfac: i0.ɵɵFactoryDeclaration<HtmlWidgetConfigComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<HtmlWidgetConfigComponent, "c8y-html-widget-config", never, {}, {}, never, never, true, never>;
 }
@@ -179,11 +194,49 @@ declare class HtmlWidgetPropertiesSelectorComponent {
 }
 
 declare class HtmlWidgetComponent {
-    config: HtmlWidgetConfig;
+    config: i0.InputSignal<HtmlWidgetConfig>;
+    private realtimeControl$;
+    propertyValues$: i0.Signal<rxjs.Observable<Record<string, unknown>>>;
+    private dashboardChild;
+    displayMode: i0.WritableSignal<"config" | "dashboard" | "view_and_config">;
+    contextConfig: i0.WritableSignal<GlobalContextState>;
+    isLoading: i0.WritableSignal<boolean>;
+    /**
+     * 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
+     */
+    isLinkedToGlobal: i0.WritableSignal<boolean>;
+    readonly GLOBAL_CONTEXT_DISPLAY_MODE: typeof GLOBAL_CONTEXT_DISPLAY_MODE;
+    readonly PRESET_NAME: {
+        readonly DEFAULT: "default";
+        readonly ALARM_LIST: "alarmList";
+        readonly CHART: "chart";
+        readonly LIVE_ONLY: "liveOnly";
+        readonly AUTO_REFRESH_ONLY: "autoRefreshOnly";
+        readonly AUTO_REFRESH_ONLY_CONFIG: "autoRefreshOnlyConfig";
+        readonly HISTORY_ONLY: "historyOnly";
+        readonly ALARM_LIST_CONFIG: "alarmListConfig";
+        readonly ALARM_LIST_LEGACY: "alarmListLegacy";
+        readonly KPI: "kpi";
+        readonly KPI_CONFIG: "kpiConfig";
+        readonly DATA_POINTS_LIST: "dataPointsList";
+        readonly DATA_POINTS_LIST_CONFIG: "dataPointsListConfig";
+        readonly DATAPOINTS_GRAPH: "datapointsGraph";
+        readonly DATAPOINTS_GRAPH_CONFIG: "datapointsGraphConfig";
+    };
+    private assetPropertiesMappings;
     ngOnInit(): void;
+    onContextChange(event: {
+        context: GlobalContextState;
+        diff: GlobalContextState;
+    }): void;
+    getDashboardChild(): DashboardChildComponent;
+    private shouldEnableRealtime;
     private mapLegacyConfig;
     static ɵfac: i0.ɵɵFactoryDeclaration<HtmlWidgetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HtmlWidgetComponent, "c8y-html-widget", never, { "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HtmlWidgetComponent, "c8y-html-widget", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare const legacyTemplate: (html: string, deviceId?: string | number, deviceName?: string) => string;
@@ -195,6 +248,9 @@ declare class WidgetCodeEditorComponent implements OnDestroy {
     config: HtmlWidget;
     editorComponent: EditorComponent;
     configService: HtmlWidgetConfigService;
+    translate: TranslateService;
+    private widgetConfigService;
+    propertyKeys$: rxjs.Observable<string[]>;
     editor: Monaco.editor.IStandaloneCodeEditor;
     isAutoSaveEnabled: boolean;
     language: 'html' | 'css' | 'javascript';
@@ -207,6 +263,7 @@ declare class WidgetCodeEditorComponent implements OnDestroy {
     readonly BUTTON_ENABLE_AUTOSAVE_LABEL: "Enable auto save`An action you can do on the html widget editor`";
     readonly TAB_OUTLET_NAME = "html-widget-tab-outlet";
     private destroy$;
+    private suggestionProviders;
     ngOnDestroy(): void;
     ngOnChanges(changes: SimpleChanges): void;
     loadCode(): void;
@@ -217,6 +274,9 @@ declare class WidgetCodeEditorComponent implements OnDestroy {
     undo(): void;
     changeCode($event: string): void;
     saveCode(codeStr?: string): void;
+    insertPropertyAtCursor(key: string): void;
+    private registerPropertySuggestions;
+    private getFormattedPropertyExpression;
     static ɵfac: i0.ɵɵFactoryDeclaration<WidgetCodeEditorComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<WidgetCodeEditorComponent, "c8y-widget-code-editor", never, { "mode": { "alias": "mode"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
 }

package/widgets/implementations/html-widget/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sources":["../../../../widgets/implementations/html-widget/html-widget.model.ts","../../../../widgets/implementations/html-widget/html-widget-config.service.ts","../../../../widgets/implementations/html-widget/advanced-settings/advanced-settings.component.ts","../../../../widgets/implementations/html-widget/html-ai-chat-tool-details.component.ts","../../../../widgets/implementations/html-widget/html-frame/html-frame.component.ts","../../../../widgets/implementations/html-widget/html-widget-config.component.ts","../../../../widgets/implementations/html-widget/html-widget-properties-selector/html-widget-properties-selector.component.ts","../../../../widgets/implementations/html-widget/html-widget.component.ts","../../../../widgets/implementations/html-widget/legacy-template.ts","../../../../widgets/implementations/html-widget/webcomponent-template.ts","../../../../widgets/implementations/html-widget/widget-code-editor-section/widget-code-editor.component.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null],"names":[],"mappings":";;;;;;;;;;;;;;;AAKE;;;AAIA;;;;;AAKG;;AAEJ;AAEK;;;;;;;;;AAUL;;;;AAKA;AAEK;;AAEJ;AAID;;;;;;AAOA;;;;;;AAOA;AAED;AAiBA;AAQA;AAEA;;AC3DA;;;;AAGmD;AAAoB;AACrE;AACA;AACA;AAEA;AAgBA;AAEA;AAoBA;AAEA;AAkBA;;;;;AA2CA;AAaA;;;AAsBD;;AC7JD;AAOE;AACA;AACA;AACA;AAEA;;;AAMA;AAIA;;;;AAyBM;;;AAMP;;AC3DD;;;AAQ0D;AACxD;AACA;AAEA;AAEA;;AAEG;;AAKH;;;AAWD;;ACHD;;AAYE;AAEA;;;;;AAKG;AAEH;;;;;;;;;;;AAmCA;AAKA;;;;;AAsFA;AAUA;AAeA;AAaA;AASA;;AAiBA;;;AAuBD;;ACnQD;;AAeE;AACA;AACA;AAEA;;;AAMD;;ACvBD;AAiBE;AACA;AAEA;;;;AAIG;;;;AAcJ;;AC5CD;;AASE;AAMA;;;AAgBD;;ACrCD;;ACEA;;ACYA;AAmBE;;;AAOA;AAEA;AACA;AACA;;AAEA;;;;;;;;AAeA;AAKA;;AAgCA;AAKA;;;;;AA0BA;;;AAQD;;;"}
+{"version":3,"file":"index.d.ts","sources":["../../../../widgets/implementations/html-widget/html-widget.model.ts","../../../../widgets/implementations/html-widget/html-widget-config.service.ts","../../../../widgets/implementations/html-widget/advanced-settings/advanced-settings.component.ts","../../../../widgets/implementations/html-widget/html-ai-chat-tool-details.component.ts","../../../../widgets/implementations/html-widget/html-frame/html-frame.component.ts","../../../../widgets/implementations/html-widget/html-widget-config.component.ts","../../../../widgets/implementations/html-widget/html-widget-properties-selector/html-widget-properties-selector.component.ts","../../../../widgets/implementations/html-widget/html-widget.component.ts","../../../../widgets/implementations/html-widget/legacy-template.ts","../../../../widgets/implementations/html-widget/webcomponent-template.ts","../../../../widgets/implementations/html-widget/widget-code-editor-section/widget-code-editor.component.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null],"names":[],"mappings":";;;;;;;;;;;;;;;;AAQM;AACJ;;;;AAKA;;;;;AAKG;;AAEJ;AAEK;;;;;;;;AASL;;;;AAKA;AAEK;;;AAGJ;AAID;;;;;;AAOA;;;;;;AAOA;AAED;AAgCA;AAQA;AAEA;;AC3EA;;;;AAGmD;AAAoB;AACrE;AACA;AACA;AACA;AAEA;AAgBA;AAEA;AAoBA;AAEA;AAkBA;;;;;AA2CA;AAaA;;;AAsBD;;AClKD;AAOE;AACA;AACA;AACA;AAEA;;;AAMA;AAIA;;;;AAyBM;;;AAMP;;AC3DD;;;AAQ0D;AACxD;AACA;AAEA;AAEA;;AAEG;;AAKH;;;AAWD;;ACHD;;AAYE;;AAKA;;;;;AAKG;AAEH;;;;;;;;;;;;AAoCA;AAKA;;;;;AAsFA;AAUA;AAeA;AA0BA;AASA;;AAiBA;;;AAuBD;;ACpQD;;AAsBE;AACA;AACA;AACA;AACA;;AAEA;;AAQA;AAKA;;AAgBA;AAOA;;;AAeD;;AC7FD;AAiBE;AACA;AAEA;;;;AAIG;;;;AAcJ;;AC9BD;AAYE;;AAEA;;AAQA;AACA;AACA;AACA;;;;;AAKG;AACH;;AAGA;;;;;;;;;;;;;;;;AAAmC;;AAInC;;;;AA8BgF;AAMhF;AAIA;AAKA;;;AAgBD;;ACvHD;;ACEA;;ACmBA;AAqBE;;;AAOA;AACA;;AAGA;AAIA;AACA;AACA;;AAEA;;;;;;;;;AAgBA;AAMA;;AAgCA;AAKA;;;;;AA8BA;;AA4BA;AAwGA;;;AAKD;;;"}