@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
289 lines (276 loc) • 15 kB
TypeScript
import { Router } from '@angular/router';
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, 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 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.
* The HTML code is now stored in the config property.
* @deprecated Use config.code instead.
*/
html?: any;
}
type C8yProperties = Array<PathProperty | ComputedProperty>;
interface HtmlWidget {
css: string;
code: string;
options: HtmlWidgetOptions;
legacy: boolean;
devMode: boolean;
latestCodeHash?: string;
}
interface HtmlWidgetOptions {
cssEncapsulation: boolean;
advancedSecurity: boolean;
}
interface WebcomponentContext extends HTMLElement {
c8yContext: IManagedObject;
c8yProperties?: Record<string, unknown>;
c8yTranslate: (key: string | string[], interpolateParams?: InterpolationParameters) => Translation;
}
interface PathProperty {
name: string;
path: string;
query?: never;
reducer?: never;
}
interface ComputedProperty {
name: string;
path?: never;
query: string;
reducer?: string;
}
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";
declare class HtmlWidgetConfigService {
readonly DEFAULT_AUTO_SAVE_DEBOUNCE = 1000;
codeChange$: Subject<{
value: string;
type: "css" | "code";
}>;
widgetConfigService: WidgetConfigService;
appState: AppStateService;
destroy$: Subject<void>;
readonly notify$: Observable<WidgetConfigNotification>;
init$: Observable<HtmlWidget>;
config$: Observable<HtmlWidget>;
codeEditorChangeConfig$: Observable<HtmlWidget>;
configChanged$: Subject<HtmlWidget>;
initConfig(appConfig: CockpitConfig, widgetConfig: HtmlWidget): Observable<HtmlWidget>;
destroy(): void;
save(config: HtmlWidget): void;
changeCode(value: string): void;
changeCss(value: string): void;
enableAdvancedMode(currentConfig: HtmlWidget): HtmlWidget;
initDefaultMode(advancedSecurity?: boolean): HtmlWidget;
private mapLegacyConfig;
static ɵfac: i0.ɵɵFactoryDeclaration<HtmlWidgetConfigService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<HtmlWidgetConfigService>;
}
declare class AdvancedSettingsComponent {
widgetConfigService: WidgetConfigService;
htmlWidgetConfigService: HtmlWidgetConfigService;
router: Router;
permissionService: Permissions;
canChangeSettings: boolean;
devMode: boolean;
cssEncapsulation: boolean;
CSS_ENCAPSULATION_HELP_CONTEXT: "If enabled, the CSS will be encapsulated and no platform styling will be applied.";
ngOnInit(): void;
disableAdvancedMode(): void;
enableAdvancedMode(): void;
toggleAdvancedMode(): void;
changeOption(option: keyof HtmlWidgetOptions): Promise<void>;
static ɵfac: i0.ɵɵFactoryDeclaration<AdvancedSettingsComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<AdvancedSettingsComponent, "c8y-html-widget-advanced-settings", never, { "devMode": { "alias": "devMode"; "required": false; }; "cssEncapsulation": { "alias": "cssEncapsulation"; "required": false; }; }, {}, never, never, true, never>;
}
declare class HtmlAiChatToolDetailsComponent {
tool: i0.InputSignal<ToolCallPart<{
code: string;
}, unknown>>;
code: i0.Signal<string>;
isExecuting: i0.Signal<boolean>;
private readonly htmlWidgetConfigService;
/**
* Revert to the last applied code.
*/
revert(): void;
private applyCurrentCode;
static ɵfac: i0.ɵɵFactoryDeclaration<HtmlAiChatToolDetailsComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<HtmlAiChatToolDetailsComponent, "c8y-html-ai-chat-tool-details", never, { "tool": { "alias": "tool"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
}
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
* happen that the same code is already used in another webcomponent and the
* error messages can not be assigned correctly.
*/
useSalt: boolean;
alerts: Alert[];
private sanitizer;
private translateService;
private moRealtime;
private destroy$;
private hostElement;
private reload$;
private latestUrl?;
private htmlContentInitialization$;
private inventoryService;
constructor();
ngOnDestroy(): void;
ngOnChanges(changes: SimpleChanges): void;
reloadComponent(): void;
initDiv(divHostElement: HTMLDivElement): Promise<WebcomponentContext | Observable<never>>;
private getContext;
private loadScript;
private generateUrl;
private listenToErrors;
private createWebComponent;
private mapErrorEventToAlert;
private getCode;
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; }; "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>;
}
declare class HtmlWidgetPropertiesSelectorComponent {
widgetConfigService: WidgetConfigService;
clipboardService: ClipboardService;
/**
* Copies the property path to the clipboard in a format suitable for use in HTML widget.
* For nested properties, it uses the keyPath to create a path to nested property.
* @param context The context containing the property information.
*/
copyProperty(context: AssetPropertyType): Promise<void>;
static ɵfac: i0.ɵɵFactoryDeclaration<HtmlWidgetPropertiesSelectorComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<HtmlWidgetPropertiesSelectorComponent, "c8y-html-widget-properties-selector", never, {}, {}, never, never, true, never>;
}
declare class HtmlWidgetComponent {
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 DATA_TABLE: "dataTable";
readonly DATA_TABLE_CONFIG: "dataTableConfig";
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; "isSignal": true; }; }, {}, never, never, true, never>;
}
declare const legacyTemplate: (html: string, deviceId?: string | number, deviceName?: string) => string;
declare const webComponentTemplate: (html: string, css?: string, viewEncapsulation?: boolean, name?: string) => string;
declare class WidgetCodeEditorComponent implements OnDestroy {
mode: 'code' | 'css';
config: HtmlWidget;
editorComponent: EditorComponent;
configService: HtmlWidgetConfigService;
translate: TranslateService;
private widgetConfigService;
propertyKeys$: rxjs.Observable<string[]>;
editor: Monaco.editor.IStandaloneCodeEditor;
isAutoSaveEnabled: boolean;
language: 'html' | 'css' | 'javascript';
value: string;
isLoading: boolean;
readonly TAB_WEBCOMPONENT_LABEL: "Web Component`Tab label of HTML Widget`";
readonly TAB_HTML_LABEL: "HTML`Tab label of HTML Widget`";
readonly TAB_CSS_LABEL: "CSS`Tab label of HTML Widget`";
readonly BUTTON_DISABLE_AUTOSAVE_LABEL: "Disable auto save`An action you can do on the html widget editor`";
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;
switchMode(mode: 'code' | 'css'): void;
editorLoaded(editor: Monaco.editor.IStandaloneCodeEditor): void;
formatCode(): void;
redo(): void;
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>;
}
export { AdvancedSettingsComponent, HtmlAiChatToolDetailsComponent, HtmlFrameComponent, HtmlWidgetComponent, HtmlWidgetConfigComponent, HtmlWidgetConfigService, HtmlWidgetPropertiesSelectorComponent, INITIAL_CSS_FORMATTED, INITIAL_HTML_FORMATTED, WidgetCodeEditorComponent, defaultWebComponentAttributeNameContext, defaultWebComponentName, legacyTemplate, webComponentTemplate };
export type { C8yProperties, ComputedProperty, HtmlWidget, HtmlWidgetConfig, HtmlWidgetOptions, PathProperty, WebcomponentContext };
//# sourceMappingURL=index.d.ts.map