@c8y/ngx-components/widgets/implementations/html-widget/index.d.ts

Angular modules for Cumulocity IoT applications

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 { CockpitConfig } from '@c8y/ngx-components/cockpit-config';
import { Subject, Observable } from 'rxjs';
import { IManagedObject, IIdentified } from '@c8y/client';
import * as i0 from '@angular/core';
import { OnInit, OnChanges, SimpleChanges, OnDestroy, TemplateRef } from '@angular/core';
import { AgentStep } from '@c8y/ngx-components/ai';
import { AssetPropertyType } from '@c8y/ngx-components/asset-properties';
import { EditorComponent } from '@c8y/ngx-components/editor';
import * as Monaco from 'monaco-editor';

interface HtmlWidgetConfig {
    device: IManagedObject;
    settings: WidgetSettings;
    config: HtmlWidget;
    /**
     * 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;
    props?: C8yProperties;
    options: HtmlWidgetOptions;
    legacy: boolean;
    devMode: boolean;
    latestCodeHash?: string;
}
interface HtmlWidgetOptions {
    cssEncapsulation: boolean;
    advancedSecurity: boolean;
}
interface WebcomponentContext extends HTMLElement {
    c8yContext: IManagedObject;
}
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  <p class=\"m-b-8 m-t-16\">\n  You can use HTML and Javascript template literals here: <br>\n  ${this.c8yContext ? this.c8yContext.name : 'No device selected'}\n  </p>\n\n  <a class=\"btn btn-primary m-b-16\" href=\"#/group\">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</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>;
    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 HtmlAiChatFeedbackComponent implements OnInit, OnChanges {
    step: AgentStep;
    /**
     * The label to display for the feedback section.
     */
    label: string;
    /**
     * Indicates whether the feedback section is in a loading state.
     */
    loading: boolean;
    /**
     * Indicates whether the detailed feedback section is collapsed.
     */
    collapsed: boolean;
    /**
     * Indicates whether the feedback section can be collapsed.
     */
    canCollapse: boolean;
    /**
     * The code extracted from the agent step (if any).
     */
    code: string;
    /**
     * The text before the code block (if any).
     */
    textBeforeCode: string;
    /**
     * The text after the code block (if any).
     */
    textAfterCode: string;
    private readonly codeTag;
    private readonly htmlWidgetConfigService;
    /**
     * @ignore
     */
    ngOnInit(): void;
    /**
     * @ignore
     */
    ngOnChanges(changes: SimpleChanges): void;
    /**
     * Parse the agent step. Extracts the code block if present and updates the state accordingly.
     * @param step The agent step to parse.
     */
    parseAgentStep(step: AgentStep): void;
    /**
     * Revert to the last applied code.
     */
    revert(): void;
    private parseCodeBlock;
    private applyCurrentCode;
    static ɵfac: i0.ɵɵFactoryDeclaration<HtmlAiChatFeedbackComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<HtmlAiChatFeedbackComponent, "c8y-html-ai-chat-feedback", never, { "step": { "alias": "step"; "required": true; }; }, {}, never, never, true, never>;
}

declare class HtmlFrameComponent implements OnChanges, OnDestroy {
    config: HtmlWidget;
    device: IManagedObject | IIdentified;
    /**
     * 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 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; }; "useSalt": { "alias": "useSalt"; "required": false; }; }, {}, never, never, true, never>;
}

declare class HtmlWidgetConfigComponent implements OnDestroy {
    set htmlPreviewTemplate(template: TemplateRef<any>);
    options: OptionsService;
    htmlWidgetConfigService: HtmlWidgetConfigService;
    widgetConfigService: WidgetConfigService;
    ngOnDestroy(): void;
    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: HtmlWidgetConfig;
    ngOnInit(): void;
    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>;
}

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;
    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$;
    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;
    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, HtmlAiChatFeedbackComponent, 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