import { default as CxTypography } from '../../../../../atoms/src/components/typography/typography.ts';
import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
import { Asset, AssetTypeString, EditorMode, PropertyConfig } from '../../../../../types/src/content-builder';
import { VideoFormatValue } from '../../../../../types/src/video-format-picker';
import { Component, DataRecord, StyleProps } from 'grapesjs';
import { CxConfigForm } from '../config-form';

export type CxContentBuilderConfigureEvent = CustomEvent<{
    description: string;
    isDetachTemplate?: boolean;
    name: string;
    settings: {
        attributes: Record<string, string>;
        properties?: Record<string, unknown>;
        styleProps: StyleProps;
        translations: Record<string, Record<string, string>>;
    };
    templateId: string;
}>;
/**
 * @summary The `cx-config-manager` component is used to configure the attributes, properties, styles, and traits of a block in the content builder.
 *
 * @event cx-content-builder-configure - Emitted when the user saves the configuration of a block.
 */
export default class CxConfigManager extends CortexElement {
    static readonly styles: import('lit').CSSResult[];
    static readonly dependencies: {
        'cx-config-form': typeof CxConfigForm;
        'cx-typography': typeof CxTypography;
    };
    private readonly localize;
    private readonly configsController;
    /**
     * The dialog element used to display the configuration manager.
     * This is used to show and hide the configuration manager dialog.
     */
    dialog: CxConfigForm;
    /**
     * The component to configure.
     * This is set by the content builder when the user selects a block.
     * It contains the properties, styles, and traits of the block.
     * @default null
     */
    component: Component | null;
    /**
     * The loading state of the component.
     * This is used to show a loading spinner when the component is being configured.
     * @default false
     */
    loading: boolean;
    /**
     * The mode of the editor.
     * This is used to determine if the template is editable or not.
     * @default EditorMode.Template
     */
    mode: EditorMode;
    /**
     * Whether to expose asset format / transformation / download-format /
     * video-format-picker controls for image, video, gallery, carousel,
     * and timeline blocks.
     * @default false
     */
    enableAssetFormatControls: boolean;
    /**
     * A list of properties that are not shown in the configuration manager if mode is EditorMode.Content.
     * @default []
     */
    adhocProperties: string[];
    /**
     * The name of the template.
     * This is used to display the template name in the dialog header.
     * @default ''
     */
    templateName: string;
    templateId: string;
    supportedLanguages: string[];
    /**
     * The default language of the translatable controls.
     * This is used to store the default language of the translatable controls.
     * @default 'en-us'
     */
    defaultLanguage: string;
    /**
     * The values of the translatable controls.
     * This is used to store the values of the translatable controls.
     * @default []
     */
    translatableControlValues: DataRecord[];
    /**
     * The boundary property of the confirm popover's dropdown/dialog popup.
     */
    boundary: HTMLElement;
    /**
     * Function to request an asset.
     * This is used to open the asset picker dialog when the user selects an asset from the DAM.
     * The function should return a promise that resolves to an Asset object.
     * @param type - The type of asset to request (image, video, etc.).
     * @returns A promise that resolves to an Asset object.
     * @default undefined
     */
    onRequestAsset: ((type: AssetTypeString, multiple?: boolean, accepts?: string[]) => Promise<Asset | Record<string, Asset>>) | undefined;
    /**
     * Function to request a download format.
     * This is used to download an asset in a different format.
     * The function should return a promise that resolves to an array of Asset objects.
     * @param assetIds - The ids of the assets to download.
     * @returns A promise that resolves to an array of Asset objects.
     * @default undefined
     */
    onRequestDownloadFormat: ((assetIds: string[]) => Promise<Asset[]>) | undefined;
    /** Callback forwarded to `cx-config-form` → `cx-video-format-picker` for video format selection. */
    onRequestVideoFormat: ((assetId: string, value?: VideoFormatValue) => Promise<VideoFormatValue | null | undefined>) | undefined;
    /**
     * The attributes of the component.
     * This is used to store the attributes of the block being configured.
     * It is updated when the component changes.
     * @default {}
     */
    blockAttributes: Record<string, any>;
    /**
     * The properties of the component.
     * This is used to store the properties of the block being configured.
     * It is updated when the component changes.
     * @default {}
     */
    blockProperties: Record<string, any>;
    /**
     * The styles of the component.
     * This is used to store the styles of the block being configured.
     * It is updated when the component changes.
     * @default {}
     */
    blockStyles: StyleProps;
    /**
     * The traits of the component.
     * This is used to store the traits of the block being configured.
     * It is updated when the component changes.
     * @default []
     */
    traits: PropertyConfig[];
    /**
     * The type of the block being configured.
     * This is used to retrieve the trait list of the block.
     * @default ''
     */
    blockType: string;
    /**
     * The name of the block being configured.
     * This is used to display the block name in the dialog header.
     * @default ''
     */
    blockName: string;
    /**
     * The name of the template.
     * This is used to edit the template name when the user is editing the template settings.
     * This is not the same as the templateName property.
     * @default ''
     */
    name: string;
    /**
     * The description of the template.
     * This is used to edit the template description when the user is editing the template settings.
     * @default ''
     */
    description: string;
    /**
     * The currently selected tab in the configuration manager.
     * This is used to switch between different tabs in the configuration manager.
     * @default ''
     */
    tab: string;
    /**
     * Whether the user is currently editing the template settings.
     * This is used to determine if the user is editing the template name and description.
     * This is true when the user clicks the "Save as new template" button or when the user is editing a new template.
     * This is false when the user is configuring the properties, styles, and traits of the block.
     * @default false
     */
    isEditingTemplateSettings: boolean;
    /**
     * The values of the translatable controls.
     * This is used to store the values of the translatable controls.
     * @default {}
     */
    translatableControlValuesMap: Record<string, Record<string, string>>;
    /**
     * The list of input controls to render in the configuration form.
     * These are the input controls that will support multiple languages.
     */
    translatableControls: PropertyConfig[];
    /**
     * Whether the template is editable.
     * This is used to determine if the user can save the settings as a template.
     * If the mode is EditorMode.Template, the template is editable.
     * If the mode is EditorMode.Content, the template is not editable.
     * @default true
     */
    get isTemplateEditable(): boolean;
    constructor();
    private getFlattenTraits;
    handleTraitsChange(): Promise<void>;
    handleComponentChange(): Promise<void>;
    private handleSave;
    private handleClose;
    show(): void;
    hide(): void;
    private handleTranslatableValueChange;
    private handleChange;
    private handleFieldChange;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-config-manager': CxConfigManager;
    }
    interface GlobalEventHandlersEventMap {
        'cx-content-builder-configure': CxContentBuilderConfigureEvent;
    }
}
