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 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 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 { CSSResultGroup, TemplateResult } from 'lit';

export type CxAssetLinkFormatRotationChangeEvent = CustomEvent<number>;
export type CxAssetLinkFormatRotationApplyEvent = CustomEvent<number>;
/**
 * @summary The `cx-asset-link-format-rotation` component is used to rotate an asset in the asset link formatter.
 *
 * @event `cx-asset-link-format-rotate-change` - Emitted when the rotate settings are changed.
 * @event `cx-asset-link-format-rotate-apply` - Emitted when the rotate settings are applied.
 */
export default class CxAssetLinkFormatRotation extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-button': typeof CxButton;
        'cx-button-group': typeof CxButtonGroup;
        'cx-details': typeof CxDetails;
        'cx-icon': typeof CxIcon;
        'cx-icon-button': typeof CxIconButton;
        '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 value of the defined quality.
     * This value represents the quality of the asset link format, ranging from 1 to 100.
     * @default 0
     */
    value: number;
    /**
     * The value of the defined quality.
     * This value represents the quality of the asset link format, ranging from 1 to 100.
     * @default 0
     */
    defaultValue: number;
    /**
     * The loading state of the component.
     * This is used to indicate that an operation is in progress, such as applying a new rotation value.
     * @default false
     */
    loading: boolean;
    handleOpenChange(): void;
    private handleRotationChange;
    private handleButtonClick;
    private handleClockwiseClick;
    private handleCounterClockwiseClick;
    /**
     * Handles the application of the input rotation.
     * This method emits a custom event with the input rotation when the "Apply" button is clicked.
     * It prevents further actions if the component is currently loading.
     */
    private handleApply;
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-asset-link-format-rotation': CxAssetLinkFormatRotation;
    }
    interface GlobalEventHandlersEventMap {
        'cx-asset-link-format-rotation-apply': CxAssetLinkFormatRotationApplyEvent;
        'cx-asset-link-format-rotation-change': CxAssetLinkFormatRotationChangeEvent;
    }
}
