import { default as CxButton } from '../../../../../atoms/src/components/button/button.ts';
import { default as CxDetails } from '../../../../../atoms/src/components/details/details.ts';
import { default as CxIcon } from '../../../../../atoms/src/components/icon/icon.ts';
import { default as CxIconButton } from '../../../../../atoms/src/components/icon-button/icon-button.ts';
import { default as CxInput } from '../../../../../atoms/src/components/input/input.ts';
import { default as CxOption } from '../../../../../atoms/src/components/option/option.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 CxTypography } from '../../../../../atoms/src/components/typography/typography.ts';
import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
import { Unit } from '../../../../../types/src/asset-link-format';
import { CSSResultGroup, TemplateResult } from 'lit';

export type CxAssetLinkFormatResizeChangeEvent = CustomEvent<{
    height: number;
    keepAspectRatio?: boolean;
    unit: Unit;
    width: number;
}>;
export type CxAssetLinkFormatResizeApplyEvent = CustomEvent<{
    height: number;
    keepAspectRatio?: boolean;
    unit: Unit;
    width: number;
}>;
/**
 * @summary The `cx-asset-link-format-resize` component is used to define resize values for an asset link.
 *
 * @event `cx-asset-link-format-resize-change` - Emitted when the resize values are changed.
 */
export default class CxAssetLinkFormatResize extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-button': typeof CxButton;
        'cx-details': typeof CxDetails;
        'cx-icon': typeof CxIcon;
        'cx-icon-button': typeof CxIconButton;
        'cx-input': typeof CxInput;
        'cx-option': typeof CxOption;
        'cx-select': typeof CxSelect;
        'cx-space': typeof CxSpace;
        'cx-typography': typeof CxTypography;
    };
    private readonly localize;
    /**
     * The base element for the details section.
     * This is used to control the visibility of the details section and to handle events related to showing and hiding the details.
     */
    base: CxDetails;
    /**
     * The open state of the details section.
     * @default false
     */
    open: boolean;
    /**
     * The width of the asset to be resized.
     * @default 0
     */
    width: number;
    /**
     * The height of the asset to be resized.
     * @default 0
     */
    height: number;
    /**
     * The maximum width of the asset to be resized.
     * @default 0
     */
    maxWidth: number;
    /**
     * The maximum height of the asset to be resized.
     * @default 0
     */
    maxHeight: number;
    /**
     * The ratio width of the asset to be cropped.
     */
    ratioWidth: number;
    /**
     * The ratio height of the asset to be cropped.
     */
    ratioHeight: number;
    /**
     * The unit of measurement for the resize settings.
     * This can be either 'px' or '%'.
     * @default Unit.Pixel
     */
    unit: Unit;
    /**
     * The last applied resize settings for each unit.
     * This is used to restore the last applied settings when the component is closed.
     * @default {
     *   [Unit.Pixel]: { height: 0, width: 0 },
     *   [Unit.AspectRatio]: { height: 1, width: 1 },
     * }
     */
    lastAppliedSetting: Record<Unit, {
        height: number;
        width: number;
    }>;
    /**
     * The loading state of the component.
     * This is used to indicate that an operation is in progress, such as applying a new quality value.
     * @default false
     */
    loading: boolean;
    /**
     * Whether to keep the aspect ratio when changing width or height.
     * This is used to automatically adjust the other dimension when one is changed.
     */
    keepAspectRatio: boolean;
    /**
     * Whether the width input is invalid.
     * This is used to show an error state when the width is not a valid number.
     * @default false
     */
    invalidWidth: boolean;
    /**
     * Whether the height input is invalid.
     * This is used to show an error state when the height is not a valid number.
     * @default false
     */
    invalidHeight: boolean;
    /**
     * The aspect ratio of the crop settings.
     * This is calculated based on the maximum width and height on load and when the crop mode or keep aspect ratio changes.
     */
    aspectRatio: number;
    /**
     * A computed property that checks if the current resize settings match the last applied settings.
     * This is used to disable the apply button when no changes have been made.
     * @returns {boolean} True if the current settings match the last applied settings, false otherwise.
     */
    get disabledApply(): boolean;
    handleCropModeChange(): Promise<void>;
    handleOpenChange(): Promise<void>;
    private handleWidthChange;
    private handleHeightChange;
    private onUnitChange;
    private handleApply;
    /**
     * Handles showing the details section.
     * This method prevents the event from propagating if the target is not the base element, such as tooltips, select dropdowns, or other interactive elements inside the details.
     * This ensures that the details section is only shown when the user interacts with the base element.
     */
    private onShowDetails;
    /**
     * Handles hiding the details section.
     * This method prevents the event from propagating if the target is not the base element, such as tooltips, select dropdowns, or other interactive elements inside the details.
     * This ensures that the details section is only hidden when the user interacts with the base element.
     */
    private onHideDetails;
    private handleAspectRatioClick;
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-asset-link-format-resize': CxAssetLinkFormatResize;
    }
    interface GlobalEventHandlersEventMap {
        'cx-asset-link-format-resize-apply': CxAssetLinkFormatResizeApplyEvent;
        'cx-asset-link-format-resize-change': CxAssetLinkFormatResizeChangeEvent;
    }
}
