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