dap-design-system 0.53.21 → 0.54.0

package/dist/common/types.d.ts

@@ -90,3 +90,4 @@ export interface TimePreset {
 export type CloseSource = 'cancel-button' | 'close-button' | 'esc' | 'ok-button' | 'overlay';
 export type AccordionVariant = 'default' | 'collapsed' | 'clean' | 'clean-collapsed';
 export type TabNavigationMode = 'group' | 'items';
+export type DialogState = 'closed' | 'opening' | 'open' | 'closing';

package/dist/components/icons/system/system-zoom-in-line/system-zoom-in-line.component.d.ts

@@ -0,0 +1,30 @@
+import { PropertyValueMap } from 'lit';
+import { DdsElement } from '../../../../internal/dds-hu-element';
+/**
+ * `dap-ds-icon-zoom-in-line`
+ * @summary An icon
+ * @element dap-ds-icon-zoom-in-line
+ * @title - SystemZoomInLine
+ * @group icon
+ * @icontype system
+ *
+ * @attribute {number} size - (optional) The width and height in pixels
+ * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute
+ * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility
+ * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus
+ *
+ * @csspart base - The main icon container.
+ */
+export default class SystemZoomInLine extends DdsElement {
+    /** (optional) The width and height in pixels */
+    size?: number | undefined;
+    /** (optional) Sets the icon color via the `fill` attribute */
+    selected?: boolean;
+    /** (optional) When using the icon standalone, make it meaningful for accessibility */
+    accessibilityTitle?: string;
+    /** (optional) If `true` the icon can receive focus */
+    focusable?: boolean;
+    static readonly styles: import('lit').CSSResult;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    render(): import('lit-html').TemplateResult;
+}

package/dist/components/icons/system/system-zoom-in-line/system-zoom-in-line.d.ts

@@ -0,0 +1,8 @@
+import { default as SystemZoomInLine } from './system-zoom-in-line.component.js';
+export * from './system-zoom-in-line.component.js';
+export default SystemZoomInLine;
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-icon-zoom-in-line': SystemZoomInLine;
+    }
+}

package/dist/components/icons/system/system-zoom-out-line/system-zoom-out-line.component.d.ts

@@ -0,0 +1,30 @@
+import { PropertyValueMap } from 'lit';
+import { DdsElement } from '../../../../internal/dds-hu-element';
+/**
+ * `dap-ds-icon-zoom-out-line`
+ * @summary An icon
+ * @element dap-ds-icon-zoom-out-line
+ * @title - SystemZoomOutLine
+ * @group icon
+ * @icontype system
+ *
+ * @attribute {number} size - (optional) The width and height in pixels
+ * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute
+ * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility
+ * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus
+ *
+ * @csspart base - The main icon container.
+ */
+export default class SystemZoomOutLine extends DdsElement {
+    /** (optional) The width and height in pixels */
+    size?: number | undefined;
+    /** (optional) Sets the icon color via the `fill` attribute */
+    selected?: boolean;
+    /** (optional) When using the icon standalone, make it meaningful for accessibility */
+    accessibilityTitle?: string;
+    /** (optional) If `true` the icon can receive focus */
+    focusable?: boolean;
+    static readonly styles: import('lit').CSSResult;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    render(): import('lit-html').TemplateResult;
+}

package/dist/components/icons/system/system-zoom-out-line/system-zoom-out-line.d.ts

@@ -0,0 +1,8 @@
+import { default as SystemZoomOutLine } from './system-zoom-out-line.component.js';
+export * from './system-zoom-out-line.component.js';
+export default SystemZoomOutLine;
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-icon-zoom-out-line': SystemZoomOutLine;
+    }
+}

package/dist/components/image-zoom/image-zoom.component.d.ts

@@ -0,0 +1,78 @@
+import { PropertyValueMap } from 'lit';
+import { DdsElement } from '../../internal/dds-hu-element';
+/**
+ * `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 <img> 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.
+ *
+ * @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;
+    private _dialogState;
+    private _slottedImgSrc;
+    private _slottedImgAlt;
+    private _touchStartY;
+    private _closeTimeout?;
+    private _previouslyFocusedElement;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): 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>;
+}