import { default as CxButton } from '../../../../../atoms/src/components/button/button.ts';
import { default as CxInput } from '../../../../../atoms/src/components/input/input.ts';
import { default as CxSpace } from '../../../../../atoms/src/components/space/space.ts';
import { default as CxTypography } from '../../../../../atoms/src/components/typography/typography.ts';
import { default as CortexElement, CortexFormControl } from '../../../../../base/src/cortex-element.ts';
import { default as CxMasonry } from '../../../../../molecules/src/masonry/masonry.ts';
import { Asset, AssetTypeString, DialogType } from '../../../../../types/src/content-builder';
import { SourceVariant } from '../../../../../types/src/gallery';
import { Image } from '../../../../../types/src/gallery-config';
import { GalleryItemCardType } from '../../../../../types/src/gallery-item';
import { CSSResultGroup } from 'lit';
import { default as CxGalleryConfig } from '../gallery-config/gallery-config';

/**
 * @summary The `cx-gallery-picker` component is used to select images for the content builder.
 *
 * @dependency cx-dialog
 *
 * @event cx-content-builder-gallery-change - Emitted when the user selects images.
 */
export default class CxGalleryPicker extends CortexElement implements CortexFormControl {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-button': typeof CxButton;
        'cx-gallery-config': typeof CxGalleryConfig;
        'cx-input': typeof CxInput;
        'cx-masonry': typeof CxMasonry;
        'cx-space': typeof CxSpace;
        'cx-typography': typeof CxTypography;
    };
    private readonly formControlController;
    private readonly localize;
    galleryConfig: CxGalleryConfig;
    masonry: CxMasonry;
    scrollWrapper: HTMLElement;
    inputEl: CxInput;
    variant: GalleryItemCardType;
    /**
     * Specifies the way the carousel will be populated.
     */
    sourceVariant: SourceVariant;
    /**
     * Specifies the variant of the dialog.
     */
    dialogVariant: DialogType;
    name: string;
    value: Image[] | undefined;
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultValue: Image[] | undefined;
    /**
     * Specifies the id of the src of the carousel. This is only used when the variant is set to 'api'.
     */
    src: string;
    /**
     * The asset format code used to resolve image src URLs when fetching records by ID.
     */
    format: string;
    /**
     * The boundary property of the confirm popover's dropdown/dialog popup.
     */
    boundary: HTMLElement;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string | HTMLElement | undefined;
    onRequestAsset: ((type: AssetTypeString, multiple?: boolean, accepts?: string[]) => Promise<Asset>) | undefined;
    loading: boolean;
    masonryData: Array<{
        alt?: string;
        id: string;
        rawId?: string;
        src?: string;
    }>;
    dataCount: number;
    currentPage: number;
    selectedPosition: number;
    /**
     * Indicate if the data has finished fetching
     */
    hasFinishedFetchingData: boolean;
    errorDataMap: Map<string, true>;
    private osInstance;
    private readonly itemsPerPage;
    private readonly maxRows;
    private readonly maxColumns;
    private readonly rowHeight;
    private readonly spacing;
    private autofetchController;
    /** Gets the validity state object */
    get validity(): {
        badInput: boolean;
        customError: boolean;
        patternMismatch: boolean;
        rangeOverflow: boolean;
        rangeUnderflow: boolean;
        stepMismatch: boolean;
        tooLong: boolean;
        tooShort: boolean;
        typeMismatch: boolean;
        valid: boolean;
        valueMissing: boolean;
    };
    /** Gets the validation message */
    get validationMessage(): string;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    show(): void;
    hide(): void;
    private getValidityValue;
    handleVariantChange(): Promise<void>;
    fetchImagesInFolderBySlide(): Promise<void>;
    handleSourceVariantChange(): void;
    fetchImagesByIDs(oldValue: unknown, newValue: unknown): Promise<void>;
    handleFormatChange(): Promise<void>;
    private doFetchByIds;
    private get maxMasonryHeight();
    private get hasMore();
    private handleAddItem;
    private handleEditItem;
    private handleDeleteItem;
    private handleSave;
    private handleReorder;
    connectedUpdatedCallback(): void;
    disconnectedCallback(): void;
    private initializeOverlayScrollbar;
    private destroyOverlayScrollbar;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-gallery-picker': CxGalleryPicker;
    }
}
