import { default as CxButton } from '../../../../../atoms/src/components/button/button.ts';
import { default as CxButtonGroup } from '../../../../../atoms/src/components/button-group/button-group.ts';
import { default as CxCard } from '../../../../../atoms/src/components/card/card.ts';
import { default as CxCheckbox } from '../../../../../atoms/src/components/checkbox/checkbox.ts';
import { default as CxDialog } from '../../../../../atoms/src/components/dialog/dialog.ts';
import { default as CxDivider } from '../../../../../atoms/src/components/divider/divider.ts';
import { default as CxDropdown } from '../../../../../atoms/src/components/dropdown/dropdown.ts';
import { default as CxGrid } from '../../../../../atoms/src/components/grid/grid.ts';
import { default as CxGridItem } from '../../../../../atoms/src/components/grid-item/grid-item.ts';
import { default as CxIcon } from '../../../../../atoms/src/components/icon/icon.ts';
import { default as CxInput } from '../../../../../atoms/src/components/input/input.ts';
import { default as CxLineClamp } from '../../../../../atoms/src/components/line-clamp/line-clamp.ts';
import { default as CxMenu } from '../../../../../atoms/src/components/menu/menu.ts';
import { default as CxMenuItem } from '../../../../../atoms/src/components/menu-item/menu-item.ts';
import { default as CxOption } from '../../../../../atoms/src/components/option/option.ts';
import { default as CxRadio } from '../../../../../atoms/src/components/radio/radio.ts';
import { default as CxRadioCard } from '../../../../../atoms/src/components/radio-card/radio-card.ts';
import { default as CxRadioGroup } from '../../../../../atoms/src/components/radio-group/radio-group.ts';
import { default as CxSelect } from '../../../../../atoms/src/components/select/select.ts';
import { default as CxSpace } from '../../../../../atoms/src/components/space/space.ts';
import { default as CxSwitch } from '../../../../../atoms/src/components/switch/switch.ts';
import { default as CxTab } from '../../../../../atoms/src/components/tab/tab.ts';
import { default as CxTabGroup } from '../../../../../atoms/src/components/tab-group/tab-group.ts';
import { default as CxTabPanel } from '../../../../../atoms/src/components/tab-panel/tab-panel.ts';
import { default as CxTextarea } from '../../../../../atoms/src/components/textarea/textarea.ts';
import { default as CxTooltip } from '../../../../../atoms/src/components/tooltip/tooltip.ts';
import { default as CxTypography } from '../../../../../atoms/src/components/typography/typography.ts';
import { default as CxVisuallyHidden } from '../../../../../atoms/src/components/visually-hidden/visually-hidden.ts';
import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
import { CxIconPicker } from '../../../../../molecules/src/index.ts';
import { default as CxAssetPicker } from '../../../../../molecules/src/asset-picker/asset-picker.ts';
import { default as CxBicolorPicker } from '../../../../../molecules/src/bicolor-picker/bicolor-picker.ts';
import { default as CxBorderInputGroup } from '../../../../../molecules/src/border-input-group/border-input-group.ts';
import { default as CxConfirmPopover } from '../../../../../molecules/src/confirm-popover/confirm-popover.ts';
import { default as CxCornerPositionInputGroup } from '../../../../../molecules/src/corner-position-input-group/corner-position-input-group.ts';
import { default as CxDownloadFormatPicker } from '../../../../../molecules/src/download-format-picker/download-format-picker.ts';
import { default as CxDynamicSelect } from '../../../../../molecules/src/dynamic-select/dynamic-select.ts';
import { default as CxListEditor } from '../../../../../molecules/src/list-editor/list-editor.ts';
import { default as CxPaddingInputGroup } from '../../../../../molecules/src/padding-input-group/padding-input-group.ts';
import { default as CxPositionPicker } from '../../../../../molecules/src/position-picker/position-picker.ts';
import { default as CxShadowInputGroup } from '../../../../../molecules/src/shadow-input-group/shadow-input-group.ts';
import { default as CxSizeInputGroup } from '../../../../../molecules/src/size-input-group/size-input-group.ts';
import { default as CxVideoFormatPicker } from '../../../../../molecules/src/video-format-picker/video-format-picker.ts';
import { default as CxAssetTransformationDialog } from '../../../asset-transformation-dialog/asset-transformation-dialog.ts';
import { Asset, AssetTypeString, EditorMode, PropertyConfig } from '../../../../../types/src/content-builder';
import { VideoFormatValue } from '../../../../../types/src/video-format-picker';
import { StyleProps } from 'grapesjs';
import { CxColorSwatchPicker } from '../color-swatch-picker';
import { CxFolderPicker } from '../folder-picker';
import { default as CxGalleryPicker } from '../gallery-picker/gallery-picker';
import { default as CxPagePicker } from '../page-picker/page-picker';

export type CxContentBuilderFormChangeEvent = CustomEvent<{
    type: 'attribute' | 'style' | 'property' | 'decorative';
    value: Record<string, unknown>;
}>;
export type CxContentBuilderFormFieldChangeEvent = CustomEvent<{
    field: string;
    value: unknown;
}>;
export type CxContentBuilderFormSaveEvent = CustomEvent<{
    isDetachTemplate?: boolean;
    isNewTemplate: boolean;
}>;
export declare enum TabType {
    Content = "content",
    Effects = "effects",
    Styling = "styling"
}
/**
 * @summary The `cx-config-form` component is used to configure the attributes, properties, styles, and traits of a block in the content builder.
 *
 * @event cx-content-builder-form-save - Emitted when the user saves the configuration of a block.
 */
export default class CxConfigForm extends CortexElement {
    static readonly styles: import('lit').CSSResult[];
    static readonly dependencies: {
        'cx-asset-picker': typeof CxAssetPicker;
        'cx-asset-transformation-dialog': typeof CxAssetTransformationDialog;
        'cx-bicolor-picker': typeof CxBicolorPicker;
        'cx-border-input-group': typeof CxBorderInputGroup;
        'cx-button': typeof CxButton;
        'cx-button-group': typeof CxButtonGroup;
        'cx-card': typeof CxCard;
        'cx-checkbox': typeof CxCheckbox;
        'cx-color-swatch-picker': typeof CxColorSwatchPicker;
        'cx-confirm-popover': typeof CxConfirmPopover;
        'cx-corner-position-input-group': typeof CxCornerPositionInputGroup;
        'cx-dialog': typeof CxDialog;
        'cx-divider': typeof CxDivider;
        'cx-download-format-picker': typeof CxDownloadFormatPicker;
        'cx-dropdown': typeof CxDropdown;
        'cx-dynamic-select': typeof CxDynamicSelect;
        'cx-folder-picker': typeof CxFolderPicker;
        'cx-gallery-picker': typeof CxGalleryPicker;
        'cx-grid': typeof CxGrid;
        'cx-grid-item': typeof CxGridItem;
        'cx-icon': typeof CxIcon;
        'cx-icon-picker': typeof CxIconPicker;
        'cx-input': typeof CxInput;
        'cx-line-clamp': typeof CxLineClamp;
        'cx-list-editor': typeof CxListEditor;
        'cx-menu': typeof CxMenu;
        'cx-menu-item': typeof CxMenuItem;
        'cx-option': typeof CxOption;
        'cx-padding-input-group': typeof CxPaddingInputGroup;
        'cx-page-picker': typeof CxPagePicker;
        'cx-position-picker': typeof CxPositionPicker;
        'cx-radio': typeof CxRadio;
        'cx-radio-card': typeof CxRadioCard;
        'cx-radio-group': typeof CxRadioGroup;
        'cx-select': typeof CxSelect;
        'cx-shadow-input-group': typeof CxShadowInputGroup;
        'cx-size-input-group': typeof CxSizeInputGroup;
        'cx-space': typeof CxSpace;
        'cx-switch': typeof CxSwitch;
        'cx-tab': typeof CxTab;
        'cx-tab-group': typeof CxTabGroup;
        'cx-tab-panel': typeof CxTabPanel;
        'cx-textarea': typeof CxTextarea;
        'cx-tooltip': typeof CxTooltip;
        'cx-typography': typeof CxTypography;
        'cx-video-format-picker': typeof CxVideoFormatPicker;
        'cx-visually-hidden': typeof CxVisuallyHidden;
    };
    private readonly localize;
    private readonly configFormController;
    /**
     * The dialog element used to display the configuration manager.
     * This is used to show and hide the configuration manager dialog.
     */
    dialog: CxDialog;
    form: HTMLFormElement;
    /**
     * The confirm popover element used to display the confirm popover.
     * This is used to display the confirm popover when the user clicks the close button.
     */
    confirmPopover: CxConfirmPopover;
    /**
     * The tab group element used to display the tab group.
     */
    tabGroup?: CxTabGroup;
    /**
     * 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;
    /**
     * 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;
    /**
     * The id of the template.
     * This is used to validate the template id when the user is saving the configuration.
     */
    templateId: string;
    /**
     * The list of languages available in the content builder.
     * This is the list of languages that will be used to store the translatable texts.
     */
    supportedLanguages: string[];
    /**
     * The values of the translatable controls.
     * This is used to store the values of the translatable controls.
     * @default []
     */
    translatableControlValues: Record<string, Record<string, string>>;
    /**
     * The default language of the translatable controls.
     * This is used to store the default language of the translatable controls.
     * @default 'en'
     */
    defaultLanguage: string;
    /**
     * 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
     */
    /** Base URL passed through to cx-asset-transformation-dialog for asset fetching. */
    baseUrl: string;
    /** Auth token passed through to cx-asset-transformation-dialog for asset fetching. */
    token: string;
    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[], formats?: Record<string, string[]>) => Promise<Record<string, string[]>>) | undefined;
    /** Callback invoked when a video format needs to be selected via an external popup. */
    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 list of input controls to render in the configuration form.
     * These are the input controls that will support multiple languages.
     */
    translatableControls: PropertyConfig[];
    /**
     * The name of the block being configured.
     * This is used to display the block name in the dialog header.
     * It is updated when the component changes.
     * @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;
    showTemplateTab: boolean;
    dialogTitle: string;
    skipShowCheck: boolean;
    /**
     * 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;
    /**
     * Whether the user can close the configuration dialog.
     */
    disableCloseConfigDialog: boolean;
    /**
     * Whether the dialog is after show animation.
     * This is used to determine if the dialog is after show animation.
     * @default false
     */
    isAfterShow: boolean;
    sortedLanguages: string[];
    /**
     * 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;
    /**
     * Returns the list of tabs available in the configuration manager.
     * This is derived from the tabMap property, which maps trait IDs to their corresponding tab names.
     * It returns a unique list of trait tabs.
     * @returns {string[]} An array of unique trait tabs.
     */
    get tabs(): TabType[];
    /**
     * A map of trait IDs to their corresponding tab names.
     * This is used to determine which tab a trait belongs to.
     * It is derived from the traits of the component and adhoc properties and is used to render the tabs in the configuration manager.
     * @return {Record<string, string>} A record mapping trait IDs to tab names.
     */
    get tabMap(): Record<string, TabType>;
    handleTabMapChange(): Promise<void>;
    handleSupportedLanguagesChange(): Promise<void>;
    private handleClose;
    private handleAfterShow;
    private handleAfterHide;
    private handleRequestClose;
    private handleNameInputChange;
    private handleDescriptionInputChange;
    private handleCancelClick;
    private handleSaveClick;
    private handleDropdownSelect;
    private handleAssetRequestStatus;
    private handleFormSubmit;
    show(): void;
    hide(): void;
    private renderTemplateForm;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-config-form': CxConfigForm;
    }
    interface GlobalEventHandlersEventMap {
        'cx-content-builder-form-change': CxContentBuilderFormChangeEvent;
        'cx-content-builder-form-field-change': CxContentBuilderFormFieldChangeEvent;
        'cx-content-builder-form-save': CxContentBuilderFormSaveEvent;
    }
}
