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 { InterpolationParameters, Translation } from '@ngx-translate/core';
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?: IIdentified | null;
    config: HtmlWidget;
    settings?: WidgetSettings;
    /**
     * 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;
    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  <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_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 translateService;
    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