import { default as CxImage } from '../../../atoms/src/components/image/image.ts';
import { default as HighlightableElement } from '../../../base/src/highlightable-element.ts';
import { default as CxAssetDataDisplay } from '../asset-data-display/asset-data-display.ts';
import { ObjectFit } from '../../../types/src/index.ts';
import { GalleryItemContentPosition, GalleryItemContentVariant, GalleryItemShowContentType } from '../../../types/src/gallery-item';
import { LocalizeController } from '../../../utils/src/custom-element/i18n';
import { CSSResultGroup } from 'lit';

/**
 * @summary CxGalleryItem A component that displays an image with optional content.
 * Use this component to display an image with optional content in a gallery.
 *
 * @description All css property of the gallery item are exposed as css custom properties to parent components.
 *
 * @csspart base - The wrapper of gallery item.
 * @csspart content - The content of gallery item.
 * @csspart image - The image of gallery item.
 *
 * @slot slot-${itemId} - The carousel item's content the item has that id.
 * @slot (default) - The carousel item's content that all items have.
 *
 * @cssproperty [--content-border=none] - The border of the gallery content.
 * @cssproperty [--content-border-radius=0] - The border radius of the gallery content.
 * @cssproperty [--content-gap=var(--cx-spacing-2x-small)] - The gap of the gallery content.
 * @cssproperty [--content-padding=var(--cx-spacing-x-small)] - The padding of the gallery content.
 * @cssproperty [--background-color=light-dark(var(--cx-color-neutral-0), var(--cx-color-neutral-0))] - The background color of the gallery item.
 *
 * @cssproperty [--gallery-item-box-shadow=0 4px 8px rgba(0, 0, 0, 0.075)] - The box shadow of the gallery item.
 * @cssproperty [--gallery-item-border=none] - The border of the gallery item.
 * @cssproperty [--gallery-item-border-radius=var(--cx-border-radius-x-large)] - The border radius of the gallery item.
 * @cssproperty [--color=light-dark(var(--cx-color-neutral-1000), var(--cx-color-neutral-0))] - The color of text content in the gallery item.
 *
 * @cssproperty [--header-text-align=start] - The text alignment of the header.
 * @cssproperty [--header-font-size=var(--cx-font-size-x-large)] - The font size of the header.
 * @cssproperty [--header-line-height=var(--cx-line-height-medium)] - The line height of the header.
 * @cssproperty [--header-letter-spacing=var(--cx-letter-spacing-normal)] - The letter spacing of the header.
 * @cssproperty [--header-color=light-dark(var(--cx-color-neutral-0), var(--cx-color-neutral-1000))] - The color of the header.
 * @cssproperty [--details-text-align=start] - The text alignment of the details.
 * @cssproperty [--details-font-size=var(--cx-font-size-medium)] - The font size of the details.
 * @cssproperty [--details-line-height=var(--cx-line-height-medium)] - The line height of the details.
 * @cssproperty [--details-letter-spacing=var(--cx-letter-spacing-normal)] - The letter spacing of the details.
 * @cssproperty [--details-color=light-dark(var(--cx-color-neutral-0), var(--cx-color-neutral-1000))] - The color of the details.
 *
 * @cssproperty [--top=0] - For content position at corner only: The top position of the content.
 * @cssproperty [--left=0] - For content position at corner only: The left position of the content.
 * @cssproperty [--bottom=0] - For content position at corner only: The bottom position of the content.
 * @cssproperty [--right=0] - For content position at corner only: The right position of the content.
 * @cssproperty [--content-width=fit-content] - For content position at corner only: The width of the content.
 * @cssproperty [--content-border-radius=var(--cx-border-radius-large)] - For content position at corner only: The border radius of the content.
 * @cssproperty [--content-background-color=light-dark(var(--cx-color-neutral-0), var(--cx-color-neutral-0))] - For content position at corner only: The background color of the content.
 *
 * @typedef GalleryItemSize - `${number}x${number}`
 * @typedef GalleryItemContentPosition - 'top' | 'bottom' | 'left' | 'right'
 * @typedef GalleryItemContentVariant - 'default' | 'overlay'
 * @typedef ObjectFit - 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
 * @typedef GalleryItem - {
 *   id: string;
 *   alt: string;
 *   className?: string;
 *   objectFit?: ObjectFit;
 *   src: string;
 *   content?: { description?: string; title?: string };
 *   contentPosition: GalleryItemContentPosition;
 *   contentVariant: 'default' | 'overlay';
 *   size: GalleryItemSize;
 * }
 */
export default class CxGalleryItem extends HighlightableElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-asset-data-display': typeof CxAssetDataDisplay;
        'cx-image': typeof CxImage;
    };
    localize: LocalizeController;
    /**
     * The image element.
     */
    readonly imageEl?: CxImage;
    /**
     * The source of the image.
     */
    src: string | undefined;
    /**
     * The alt text for the image.
     */
    alt: string;
    /**
     * The page id of the attached page.
     */
    pageId: string;
    /**
     * The object fit style for the image.
     */
    objectFit: ObjectFit;
    /**
     * Whether to open the link in a new tab.
     */
    openInNewTab: boolean;
    /**
     * The variant of the content.
     */
    contentVariant: GalleryItemContentVariant;
    /**
     * The show content type.
     */
    showContentType: GalleryItemShowContentType;
    /**
     * The position of the content compared to the image.
     */
    contentPosition: GalleryItemContentPosition;
    /**
     * Whether to zoom on image click.
     */
    canZoom: boolean;
    /**
     * Whether the image is loading.
     */
    loading: boolean;
    /**
     * Whether the gallery item can be selected.
     */
    canSelect: boolean;
    /**
     * Whether the gallery item is selected.
     */
    selected: boolean;
    /**
     * Whether the gallery item is in view.
     */
    inView: boolean;
    /**
     * Whether the gallery item is inert. (For carousel item only)
     */
    isInert: boolean;
    /**
     * The index of the gallery item.
     */
    itemIndex: number;
    get canZoomWithSelectMode(): boolean;
    /**
     * Handle mouse enter event.
     */
    private handleMouseEnter;
    /**
     * Handle mouse leave event.
     */
    private handleMouseLeave;
    renderHighlighter(params?: {
        slot: string;
    }): import('lit').TemplateResult<1>;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-gallery-item': CxGalleryItem;
    }
}
