import { PropertyValueMap } from 'lit'; import { DdsElement } from '../../internal/dds-hu-element'; import { ButtonVariant } from '../button/button.component'; /** * `dap-ds-image-zoom` * @summary An image zoom component that provides a Medium.com-style zoom experience. Click an image to expand it to fill the viewport with a smooth animation. * @element dap-ds-image-zoom * @title - Image Zoom * * @property {boolean} open - The open/zoomed state. Can be used for controlled mode. * @property {boolean} isDisabled - Disables zoom functionality. * @property {number} zoomMargin - Margin in pixels from viewport edges when zoomed. Default is 0. * @property {string} expandButtonAriaLabel - Accessible label for the zoom trigger. Default is 'Expand image'. * @property {string} unzoomButtonAriaLabel - Accessible label for the unzoom button. Default is 'Minimize image'. * @property {boolean} hideButtons - Hides the expand and unzoom buttons. Default is false. * @property {boolean} canSwipeToUnzoom - Enables swipe gesture to close when zoomed. Default is true. * @property {number} swipeToUnzoomThreshold - Swipe distance in pixels required to trigger unzoom. Default is 10. * @property {string} zoomSrc - URL of a higher quality image to display when zoomed. Falls back to the slotted image src. * * @event {CustomEvent} dds-zoom - Fires when the image is about to zoom. Cancelable via event.preventDefault(). * @event {CustomEvent} dds-unzoom - Fires after the image has unzoomed. * * @slot - The image or content element to zoom. Should contain an element. * * @csspart trigger - The zoom trigger wrapper element. * @csspart dialog - The zoom dialog element. * @csspart overlay - The backdrop overlay element. * @csspart zoomed-image - The zoomed image element. * @csspart unzoom-button - The button to close the zoomed view. * @csspart expand-button - The button to expand the image. * @csspart expand-button-base - The base of the expand button. * @csspart expand-button-content - The content of the expand button. * @csspart unzoom-button-base - The base of the unzoom button. * @csspart unzoom-button-content - The content of the unzoom button. * @csspart expand-button-icon - The icon of the expand button. * @csspart unzoom-button-icon - The icon of the unzoom button. * * @cssproperty --dds-image-zoom-overlay-bg - Overlay background color (default: rgba(0, 0, 0, 0.8)). * @cssproperty --dds-image-zoom-transition-speed - Animation duration (default: 300ms). * @cssproperty --dds-image-zoom-transition-timing - Animation timing function (default: var(--dds-easing-ease-in-out, ease-in-out)). */ export default class DapDSImageZoom extends DdsElement { static readonly styles: import('lit').CSSResult; private _dialog; /** The open/zoomed state. */ open: boolean; /** Disables zoom functionality. */ isDisabled: boolean; /** Margin in pixels from viewport edges when zoomed. */ zoomMargin: number; /** Accessible label for the zoom trigger. */ expandButtonAriaLabel: string | null; /** Accessible label for the unzoom button. */ unzoomButtonAriaLabel: string | null; /** Enable swipe down gesture to close when zoomed. */ canSwipeToUnzoom: boolean; /** Distance in pixels a swipe must travel to trigger unzoom. */ swipeToUnzoomThreshold: number; /** URL of a higher quality image to display when zoomed. Falls back to slotted image src. */ zoomSrc?: string; /** Hides the expand and unzoom buttons. Useful when the host UI provides its own controls. */ hideButtons: boolean; zoomButtonVariant: ButtonVariant; private _dialogState; private _slottedImgSrc; private _slottedImgAlt; private _slottedImg; private _touchStartY; private _closeTimeout?; private _previouslyFocusedElement; disconnectedCallback(): void; protected updated(changedProperties: PropertyValueMap | Map): void; private _setDialogState; private _handleSlotChange; private _openDialog; private _animateClose; /** Programmatically zoom the image. */ zoom(): void; /** Programmatically unzoom the image. */ unzoom(): void; private _handleTriggerClick; private _handleTriggerKeydown; private _handleDialogCancel; private _handleTouchStart; private _handleTouchEnd; render(): import('lit-html').TemplateResult<1>; }