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 CxDivider } from '../../../../../atoms/src/components/divider/divider.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 { CropMode, FocusMode, Unit } from '../../../../../types/src/asset-link-format';
import { CSSResultGroup, TemplateResult } from 'lit';

export type CxAssetLinkFormatCropChangeEvent = CustomEvent<{
    breakAspectRatio?: boolean;
    height: number;
    keepAspectRatio?: boolean;
    silent?: boolean;
    unit: Unit;
    width: number;
}>;
export type CxAssetLinkFormatCropChangedEvent = CustomEvent<Record<PropertyKey, unknown>>;
export type CxAssetLinkFormatCropApplyEvent = CustomEvent<{
    height?: number;
    mode?: string;
    unit?: Unit;
    width?: number;
}>;
export type CxAssetLinkFormatCropModeChangeEvent = CustomEvent<{
    mode: string;
}>;
export type CxAssetLinkFormatCropFocusModeChangeEvent = CustomEvent<{
    mode: string;
}>;
/**
 * @summary The `cx-asset-link-format-crop` component is used to crop an asset in the asset link formatter.
 *
 * @event `cx-asset-link-format-crop-change` - Emitted when the crop settings are changed.
 * @event `cx-asset-link-format-crop-changed` - Emitted when crop input changes are complete.
 * @event `cx-asset-link-format-crop-apply` - Emitted when the crop settings are applied.
 * @event `cx-asset-link-format-crop-auto` - Emitted when the auto cropping is applied.
 */
export default class CxAssetLinkFormatCrop extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-button': typeof CxButton;
        'cx-details': typeof CxDetails;
        'cx-divider': typeof CxDivider;
        '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.
     */
    open: boolean;
    /**
     * The width of the asset to be cropped.
     */
    width: number;
    /**
     * The height of the asset to be cropped.
     */
    height: number;
    /**
     * The maximum width of the asset to be cropped.
     */
    maxWidth: number;
    /**
     * The maximum height of the asset to be cropped.
     */
    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 percentage width of the asset to be cropped.
     */
    percentageWidth: number;
    /**
     * The percentage height of the asset to be cropped.
     */
    percentageHeight: number;
    /**
     * The unit of measurement for the crop settings.
     * This can be either 'px' or '%'.
     */
    unit: Unit;
    /**
     * Whether the apply button is disabled.
     */
    disabledApply: boolean;
    /**
     * The last applied crop settings for each unit.
     * This is used to restore the last applied settings when the component is closed.
     */
    lastAppliedSetting: Record<Unit, {
        height: number;
        percentageHeight: number;
        percentageWidth: number;
        unit: Unit;
        width: number;
        x: number;
        y: 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.
     */
    loading: boolean;
    /**
     * The list of available crop modes.
     * This is an array of objects, each containing a `label` and a `value` and an optional `auto` property.
     * The `label` is the name displayed in the dropdown, the `value` is the actual value, and the `auto` property is used to indicate if the crop mode is automatic.
     */
    cropModes: CropMode[];
    focusModes: FocusMode[];
    /**
     * The mode of focusing.
     */
    focusMode: string;
    /**
     * The mode of cropping.
     * This can be either 'free' or a specific aspect ratio like '16:9'.
     */
    cropMode: string;
    /**
     * 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.
     */
    invalidWidth: boolean;
    /**
     * Whether the height input is invalid.
     * This is used to show an error state when the height is not a valid number.
     */
    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;
    get selectedMode(): CropMode | undefined;
    handleCropModeChange(): Promise<void>;
    handleOpenChange(): Promise<void>;
    private handleWidthChange;
    private handleHeightChange;
    private onCropModeChange;
    private onFocusModeChange;
    /**
     * Handles the change of the unit of measurement for the crop settings.
     * When the unit is changed to Aspect Ratio, it emits an event with the last applied settings for Aspect Ratio.
     * When the unit is changed to Pixels, it emits an event with the last applied settings for Pixels.
     * This allows the parent component to update the crop settings accordingly.
     */
    private onUnitChange;
    private handleInputChange;
    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-crop': CxAssetLinkFormatCrop;
    }
    interface GlobalEventHandlersEventMap {
        'cx-asset-link-format-crop-apply': CxAssetLinkFormatCropApplyEvent;
        'cx-asset-link-format-crop-change': CxAssetLinkFormatCropChangeEvent;
        'cx-asset-link-format-crop-changed': CxAssetLinkFormatCropChangedEvent;
        'cx-asset-link-format-crop-focus-mode-change': CxAssetLinkFormatCropFocusModeChangeEvent;
        'cx-asset-link-format-crop-mode-change': CxAssetLinkFormatCropModeChangeEvent;
    }
}
