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 CxInput } from '../../../../../atoms/src/components/input/input.ts';
import { default as CxSpace } from '../../../../../atoms/src/components/space/space.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 CortexElement } from '../../../../../base/src/cortex-element.ts';
import { CSSResultGroup, TemplateResult } from 'lit';

export type CxAssetLinkFormatQualityChangeEvent = CustomEvent<number>;
/**
 * @summary The `cx-asset-link-format-quality` component is used to define the asset quality in the asset link formatter.
 *
 * @event `cx-asset-link-format-quality-change` - Emitted when the quality settings are changed.
 */
export default class CxAssetLinkFormatQuality extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-button': typeof CxButton;
        'cx-details': typeof CxDetails;
        'cx-icon': typeof CxIcon;
        'cx-input': typeof CxInput;
        'cx-space': typeof CxSpace;
        'cx-tooltip': typeof CxTooltip;
        '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 input quality.
     * This value represents the quality of the asset link format, ranging from 1 to 100.
     * @default 100
     */
    value: 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;
    scopedValue: number;
    /**
     * A computed property that checks if the current quality value is invalid.
     * The value is considered invalid if it is not a number, less than 1, greater than 100, or equal to the current value.
     * @return {boolean} True if the value is invalid, false otherwise.
     */
    get invalidValue(): boolean;
    handleValueChange(): void;
    private handleQualityChange;
    /**
     * Handles the application of the input quality.
     * This method emits a custom event with the input quality when the "Apply" button is clicked.
     * It prevents further actions if the component is currently loading.
     */
    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;
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-asset-link-format-quality': CxAssetLinkFormatQuality;
    }
    interface GlobalEventHandlersEventMap {
        'cx-asset-link-format-quality-change': CxAssetLinkFormatQualityChangeEvent;
    }
}
