dap-design-system 0.60.2 → 0.61.0

package/dist/components/image-zoom/image-zoom.component.js

@@ -0,0 +1,243 @@
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as u, html as h } from "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as l } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as g } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { query as z } from "../../node_modules/@lit/reactive-element/decorators/query.js";
+import { ifDefined as p } from "../../node_modules/lit-html/directives/if-defined.js";
+import { DdsElement as f } from "../../internal/dds-hu-element.js";
+import "../../localization/localization.js";
+import b from "../button/button.component.js";
+import y from "../icon/icon.component.js";
+import S from "./image-zoom.scss.js";
+import { t as _ } from "../../node_modules/i18next/dist/esm/i18next.js";
+import { unsafeCSS as v } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var T = Object.defineProperty, a = (m, t, e, o) => {
+  for (var s = void 0, n = m.length - 1, r; n >= 0; n--)
+    (r = m[n]) && (s = r(t, e, s) || s);
+  return s && T(t, e, s), s;
+};
+const d = class d extends f {
+  constructor() {
+    super(...arguments), this.open = !1, this.isDisabled = !1, this.zoomMargin = 0, this.expandButtonAriaLabel = null, this.unzoomButtonAriaLabel = null, this.canSwipeToUnzoom = !0, this.swipeToUnzoomThreshold = 10, this.hideButtons = !1, this.zoomButtonVariant = "primary", this.expandButtonTestId = "image-zoom-expand-button", this.unzoomButtonTestId = "image-zoom-unzoom-button", this._dialogState = "closed", this._slottedImgSrc = "", this._slottedImgAlt = "", this._slottedImg = null, this._touchStartY = 0, this._previouslyFocusedElement = null;
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), clearTimeout(this._closeTimeout), (t = this._dialog) != null && t.open && this._dialog.close(), document.body.style.overflow = "";
+  }
+  updated(t) {
+    if (super.updated(t), t.has("open")) {
+      const e = t.get("open");
+      this.open && !e ? this._openDialog() : !this.open && e && this._dialogState !== "closing" && this._dialogState !== "closed" && this._animateClose();
+    }
+  }
+  // Updates dialog's data-state attribute imperatively (no Lit re-render)
+  _setDialogState(t) {
+    this._dialogState = t, this._dialog && (this._dialog.dataset.state = t);
+  }
+  _handleSlotChange() {
+    var s, n;
+    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot:not([name])"), e = (n = t == null ? void 0 : t.assignedElements({ flatten: !0 })) != null ? n : [];
+    let o = null;
+    for (const r of e) {
+      if (r.tagName === "IMG") {
+        o = r;
+        break;
+      }
+      const c = r.querySelector("img");
+      if (c) {
+        o = c;
+        break;
+      }
+    }
+    this._slottedImg = o, this._slottedImgSrc = (o == null ? void 0 : o.currentSrc) || (o == null ? void 0 : o.src) || (o == null ? void 0 : o.getAttribute("src")) || "", this._slottedImgAlt = (o == null ? void 0 : o.alt) || (o == null ? void 0 : o.getAttribute("alt")) || "";
+  }
+  _openDialog() {
+    if (this._previouslyFocusedElement = document.activeElement, this._slottedImg && !this.zoomSrc) {
+      const e = this._slottedImg;
+      this._slottedImgSrc = e.currentSrc || e.src || e.getAttribute("src") || "";
+    }
+    if (this.emit("dds-zoom", void 0, { cancelable: !0 }).defaultPrevented) {
+      this.open = !1;
+      return;
+    }
+    this._setDialogState("opening"), this._dialog.showModal(), document.body.style.overflow = "hidden", requestAnimationFrame(() => {
+      var e;
+      this._setDialogState("open"), (e = this._dialog.querySelector(".image-zoom__unzoom-btn")) == null || e.focus();
+    });
+  }
+  _animateClose() {
+    var s;
+    if (this._dialogState === "closing" || this._dialogState === "closed")
+      return;
+    this._setDialogState("closing");
+    let t = !1;
+    const e = () => {
+      var n;
+      t || (t = !0, clearTimeout(this._closeTimeout), (n = this._dialog) == null || n.close(), this._setDialogState("closed"), document.body.style.overflow = "", this._previouslyFocusedElement instanceof HTMLElement && this._previouslyFocusedElement.focus(), this.emit("dds-unzoom"));
+    }, o = (s = this._dialog) == null ? void 0 : s.querySelector(
+      ".image-zoom__zoomed"
+    );
+    o ? (o.addEventListener("transitionend", e, { once: !0 }), this._closeTimeout = window.setTimeout(e, 500)) : e();
+  }
+  /** Programmatically zoom the image. */
+  zoom() {
+    this.isDisabled || this.open || (this.open = !0);
+  }
+  /** Programmatically unzoom the image. */
+  unzoom() {
+    this.open && (this._animateClose(), this.open = !1);
+  }
+  _handleTriggerClick() {
+    this.zoom();
+  }
+  _handleTriggerKeydown(t) {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.zoom());
+  }
+  _handleDialogCancel(t) {
+    t.preventDefault(), this.unzoom();
+  }
+  _handleTouchStart(t) {
+    this.canSwipeToUnzoom && (this._touchStartY = t.touches[0].clientY);
+  }
+  _handleTouchEnd(t) {
+    if (!this.canSwipeToUnzoom) return;
+    Math.abs(t.changedTouches[0].clientY - this._touchStartY) > this.swipeToUnzoomThreshold && this.unzoom();
+  }
+  render() {
+    var o, s, n;
+    const t = (o = this.zoomSrc) != null ? o : this._slottedImgSrc, e = this._slottedImgAlt;
+    return h`
+      <div
+        part="trigger"
+        class="image-zoom__trigger"
+        role="button"
+        tabindex=${p(this.isDisabled ? void 0 : 0)}
+        aria-label=${[
+      this._slottedImgAlt,
+      (s = this.expandButtonAriaLabel) != null ? s : _("image-zoom.expand")
+    ].filter(Boolean).join(", ")}
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-disabled=${p(this.isDisabled ? "true" : void 0)}
+        @click=${this._handleTriggerClick}
+        @keydown=${this._handleTriggerKeydown}>
+        <slot @slotchange=${this._handleSlotChange}></slot>
+        ${!this.isDisabled && !this.hideButtons ? h`
+              <dap-ds-button
+                variant=${this.zoomButtonVariant}
+                shape="circle"
+                part="expand-button"
+                data-testid=${this.expandButtonTestId}
+                class="image-zoom__expand-button"
+                aria-hidden="true"
+                exportparts="base:expand-button-base, content:expand-button-content"
+                tabindex="-1">
+                <dap-ds-icon
+                  aria-hidden="true"
+                  name="zoom-in-line"
+                  part="expand-button-icon">
+                </dap-ds-icon>
+              </dap-ds-button>
+            ` : u}
+      </div>
+
+      <dialog
+        class="image-zoom__dialog"
+        part="dialog"
+        data-state=${this._dialogState}
+        @cancel=${this._handleDialogCancel}
+        @touchstart=${this._handleTouchStart}
+        @touchend=${this._handleTouchEnd}>
+        <div
+          class="image-zoom__overlay"
+          part="overlay"
+          @click=${() => this.unzoom()}></div>
+
+        <div
+          class="image-zoom__content-area"
+          style="--dds-image-zoom-margin: ${this.zoomMargin}px">
+          ${t ? h`
+                <img
+                  class="image-zoom__zoomed"
+                  part="zoomed-image"
+                  src=${t}
+                  alt=${e}
+                  @click=${() => this.unzoom()} />
+              ` : u}
+        </div>
+
+        ${this.hideButtons ? u : h`
+              <dap-ds-button
+                class="image-zoom__unzoom-btn"
+                part="unzoom-button"
+                data-testid=${this.unzoomButtonTestId}
+                variant=${this.zoomButtonVariant}
+                shape="circle"
+                aria-label=${(n = this.unzoomButtonAriaLabel) != null ? n : _("image-zoom.unzoom")}
+                exportparts="base:unzoom-button-base, content:unzoom-button-content"
+                @click=${() => this.unzoom()}>
+                <dap-ds-icon
+                  aria-hidden="true"
+                  name="zoom-out-line"
+                  part="unzoom-button-icon">
+                </dap-ds-icon>
+              </dap-ds-button>
+            `}
+      </dialog>
+    `;
+  }
+};
+d.tagName = "dap-ds-image-zoom", d.dependencies = {
+  "dap-ds-button": b,
+  "dap-ds-icon": y
+}, d.styles = v(S);
+let i = d;
+a([
+  z(".image-zoom__dialog")
+], i.prototype, "_dialog");
+a([
+  l({ type: Boolean, reflect: !0 })
+], i.prototype, "open");
+a([
+  l({ type: Boolean })
+], i.prototype, "isDisabled");
+a([
+  l({ type: Number })
+], i.prototype, "zoomMargin");
+a([
+  l()
+], i.prototype, "expandButtonAriaLabel");
+a([
+  l()
+], i.prototype, "unzoomButtonAriaLabel");
+a([
+  l({ type: Boolean })
+], i.prototype, "canSwipeToUnzoom");
+a([
+  l({ type: Number })
+], i.prototype, "swipeToUnzoomThreshold");
+a([
+  l()
+], i.prototype, "zoomSrc");
+a([
+  l({ type: Boolean })
+], i.prototype, "hideButtons");
+a([
+  l()
+], i.prototype, "zoomButtonVariant");
+a([
+  l()
+], i.prototype, "expandButtonTestId");
+a([
+  l()
+], i.prototype, "unzoomButtonTestId");
+a([
+  g()
+], i.prototype, "_slottedImgSrc");
+a([
+  g()
+], i.prototype, "_slottedImgAlt");
+export {
+  i as default
+};
+//# sourceMappingURL=image-zoom.component.js.map

package/dist/components/image-zoom/image-zoom.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-zoom.component.js","sources":["../../../src/components/image-zoom/image-zoom.component.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport type { ButtonVariant } from '@/common/types'\nimport { DialogState } from '@/dap-design-system'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { t } from '@/localization/localization'\n\nimport DapDSButton from '../button/button.component'\nimport DapDSIcon from '../icon/icon.component'\nimport styles from './image-zoom.scss?inline'\n\n/**\n * `dap-ds-image-zoom`\n * @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.\n * @element dap-ds-image-zoom\n * @title - Image Zoom\n *\n * @property {boolean} open - The open/zoomed state. Can be used for controlled mode.\n * @property {boolean} isDisabled - Disables zoom functionality.\n * @property {number} zoomMargin - Margin in pixels from viewport edges when zoomed. Default is 0.\n * @property {string} expandButtonAriaLabel - Accessible label for the zoom trigger. Default is 'Expand image'.\n * @property {string} unzoomButtonAriaLabel - Accessible label for the unzoom button. Default is 'Minimize image'.\n * @property {boolean} hideButtons - Hides the expand and unzoom buttons. Default is false.\n * @property {boolean} canSwipeToUnzoom - Enables swipe gesture to close when zoomed. Default is true.\n * @property {number} swipeToUnzoomThreshold - Swipe distance in pixels required to trigger unzoom. Default is 10.\n * @property {string} zoomSrc - URL of a higher quality image to display when zoomed. Falls back to the slotted image src.\n *\n * @event {CustomEvent} dds-zoom - Fires when the image is about to zoom. Cancelable via event.preventDefault().\n * @event {CustomEvent} dds-unzoom - Fires after the image has unzoomed.\n *\n * @slot - The image or content element to zoom. Should contain an <img> element.\n *\n * @csspart trigger - The zoom trigger wrapper element.\n * @csspart dialog - The zoom dialog element.\n * @csspart overlay - The backdrop overlay element.\n * @csspart zoomed-image - The zoomed image element.\n * @csspart unzoom-button - The button to close the zoomed view.\n * @csspart expand-button - The button to expand the image.\n * @csspart expand-button-base - The base of the expand button.\n * @csspart expand-button-content - The content of the expand button.\n * @csspart unzoom-button-base - The base of the unzoom button.\n * @csspart unzoom-button-content - The content of the unzoom button.\n * @csspart expand-button-icon - The icon of the expand button.\n * @csspart unzoom-button-icon - The icon of the unzoom button.\n *\n * @cssproperty --dds-image-zoom-overlay-bg - Overlay background color (default: rgba(0, 0, 0, 0.8)).\n * @cssproperty --dds-image-zoom-transition-speed - Animation duration (default: 300ms).\n * @cssproperty --dds-image-zoom-transition-timing - Animation timing function (default: var(--dds-easing-ease-in-out, ease-in-out)).\n */\nexport default class DapDSImageZoom extends DdsElement {\n  static tagName = 'dap-ds-image-zoom'\n\n  static dependencies = {\n    'dap-ds-button': DapDSButton,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  @query('.image-zoom__dialog') private _dialog!: HTMLDialogElement\n\n  /** The open/zoomed state. */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /** Disables zoom functionality. */\n  @property({ type: Boolean }) isDisabled = false\n\n  /** Margin in pixels from viewport edges when zoomed. */\n  @property({ type: Number }) zoomMargin = 0\n\n  /** Accessible label for the zoom trigger. */\n  @property() expandButtonAriaLabel: string | null = null\n\n  /** Accessible label for the unzoom button. */\n  @property() unzoomButtonAriaLabel: string | null = null\n\n  /** Enable swipe down gesture to close when zoomed. */\n  @property({ type: Boolean }) canSwipeToUnzoom = true\n\n  /** Distance in pixels a swipe must travel to trigger unzoom. */\n  @property({ type: Number }) swipeToUnzoomThreshold = 10\n\n  /** URL of a higher quality image to display when zoomed. Falls back to slotted image src. */\n  @property() zoomSrc?: string\n\n  /** Hides the expand and unzoom buttons. Useful when the host UI provides its own controls. */\n  @property({ type: Boolean }) hideButtons = false\n\n  @property() zoomButtonVariant: ButtonVariant = 'primary'\n\n  /** `data-testid` for the expand/zoom button. */\n  @property() expandButtonTestId = 'image-zoom-expand-button'\n\n  /** `data-testid` for the unzoom/close button. */\n  @property() unzoomButtonTestId = 'image-zoom-unzoom-button'\n\n  // Managed imperatively to avoid update-in-update Lit warnings\n  private _dialogState: DialogState = 'closed'\n\n  // Updated via slotchange — not @state to avoid re-render chains\n  @state() private _slottedImgSrc = ''\n  @state() private _slottedImgAlt = ''\n\n  private _slottedImg: HTMLImageElement | null = null\n\n  private _touchStartY = 0\n  private _closeTimeout?: number\n  private _previouslyFocusedElement: Element | null = null\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    clearTimeout(this._closeTimeout)\n    if (this._dialog?.open) {\n      this._dialog.close()\n    }\n    document.body.style.overflow = ''\n  }\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('open')) {\n      const prev = changedProperties.get('open') as boolean | undefined\n      if (this.open && !prev) {\n        this._openDialog()\n      } else if (\n        !this.open &&\n        prev &&\n        this._dialogState !== 'closing' &&\n        this._dialogState !== 'closed'\n      ) {\n        this._animateClose()\n      }\n    }\n  }\n\n  // Updates dialog's data-state attribute imperatively (no Lit re-render)\n  private _setDialogState(state: DialogState): void {\n    this._dialogState = state\n    if (this._dialog) {\n      this._dialog.dataset['state'] = state\n    }\n  }\n\n  private _handleSlotChange(): void {\n    const slot =\n      this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])')\n    const nodes = slot?.assignedElements({ flatten: true }) ?? []\n\n    let img: HTMLImageElement | null = null\n    for (const el of nodes) {\n      if (el.tagName === 'IMG') {\n        img = el as HTMLImageElement\n        break\n      }\n      const found = el.querySelector<HTMLImageElement>('img')\n      if (found) {\n        img = found\n        break\n      }\n    }\n\n    this._slottedImg = img\n    this._slottedImgSrc =\n      img?.currentSrc || img?.src || img?.getAttribute('src') || ''\n    this._slottedImgAlt = img?.alt || img?.getAttribute('alt') || ''\n  }\n\n  private _openDialog(): void {\n    this._previouslyFocusedElement = document.activeElement\n\n    // Re-read src at open time — currentSrc may have been empty at slotchange\n    if (this._slottedImg && !this.zoomSrc) {\n      const img = this._slottedImg\n      this._slottedImgSrc =\n        img.currentSrc || img.src || img.getAttribute('src') || ''\n    }\n\n    const event = this.emit('dds-zoom', undefined, { cancelable: true })\n    if (event.defaultPrevented) {\n      this.open = false\n      return\n    }\n\n    // Set state imperatively — no reactive update triggered\n    this._setDialogState('opening')\n    this._dialog.showModal()\n    document.body.style.overflow = 'hidden'\n\n    requestAnimationFrame(() => {\n      this._setDialogState('open')\n      this._dialog\n        .querySelector<HTMLButtonElement>('.image-zoom__unzoom-btn')\n        ?.focus()\n    })\n  }\n\n  private _animateClose(): void {\n    if (this._dialogState === 'closing' || this._dialogState === 'closed')\n      return\n\n    this._setDialogState('closing')\n\n    let settled = false\n    const onDone = () => {\n      if (settled) return\n      settled = true\n      clearTimeout(this._closeTimeout)\n      this._dialog?.close()\n      this._setDialogState('closed')\n      document.body.style.overflow = ''\n\n      if (this._previouslyFocusedElement instanceof HTMLElement) {\n        this._previouslyFocusedElement.focus()\n      }\n\n      this.emit('dds-unzoom')\n    }\n\n    const zoomed = this._dialog?.querySelector<HTMLElement>(\n      '.image-zoom__zoomed',\n    )\n    if (zoomed) {\n      zoomed.addEventListener('transitionend', onDone, { once: true })\n      this._closeTimeout = window.setTimeout(onDone, 500)\n    } else {\n      onDone()\n    }\n  }\n\n  /** Programmatically zoom the image. */\n  zoom(): void {\n    if (this.isDisabled || this.open) return\n    this.open = true\n  }\n\n  /** Programmatically unzoom the image. */\n  unzoom(): void {\n    if (!this.open) return\n    this._animateClose()\n    this.open = false\n  }\n\n  private _handleTriggerClick(): void {\n    this.zoom()\n  }\n\n  private _handleTriggerKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      this.zoom()\n    }\n  }\n\n  private _handleDialogCancel(e: Event): void {\n    e.preventDefault()\n    this.unzoom()\n  }\n\n  private _handleTouchStart(e: TouchEvent): void {\n    if (!this.canSwipeToUnzoom) return\n    this._touchStartY = e.touches[0].clientY\n  }\n\n  private _handleTouchEnd(e: TouchEvent): void {\n    if (!this.canSwipeToUnzoom) return\n    const delta = Math.abs(e.changedTouches[0].clientY - this._touchStartY)\n    if (delta > this.swipeToUnzoomThreshold) {\n      this.unzoom()\n    }\n  }\n\n  render() {\n    const resolvedSrc = this.zoomSrc ?? this._slottedImgSrc\n    const resolvedAlt = this._slottedImgAlt\n\n    return html`\n      <div\n        part=\"trigger\"\n        class=\"image-zoom__trigger\"\n        role=\"button\"\n        tabindex=${ifDefined(this.isDisabled ? undefined : 0)}\n        aria-label=${[\n          this._slottedImgAlt,\n          this.expandButtonAriaLabel ?? t('image-zoom.expand'),\n        ]\n          .filter(Boolean)\n          .join(', ')}\n        aria-expanded=${this.open ? 'true' : 'false'}\n        aria-disabled=${ifDefined(this.isDisabled ? 'true' : undefined)}\n        @click=${this._handleTriggerClick}\n        @keydown=${this._handleTriggerKeydown}>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n        ${!this.isDisabled && !this.hideButtons\n          ? html`\n              <dap-ds-button\n                variant=${this.zoomButtonVariant}\n                shape=\"circle\"\n                part=\"expand-button\"\n                data-testid=${this.expandButtonTestId}\n                class=\"image-zoom__expand-button\"\n                aria-hidden=\"true\"\n                exportparts=\"base:expand-button-base, content:expand-button-content\"\n                tabindex=\"-1\">\n                <dap-ds-icon\n                  aria-hidden=\"true\"\n                  name=\"zoom-in-line\"\n                  part=\"expand-button-icon\">\n                </dap-ds-icon>\n              </dap-ds-button>\n            `\n          : nothing}\n      </div>\n\n      <dialog\n        class=\"image-zoom__dialog\"\n        part=\"dialog\"\n        data-state=${this._dialogState}\n        @cancel=${this._handleDialogCancel}\n        @touchstart=${this._handleTouchStart}\n        @touchend=${this._handleTouchEnd}>\n        <div\n          class=\"image-zoom__overlay\"\n          part=\"overlay\"\n          @click=${() => this.unzoom()}></div>\n\n        <div\n          class=\"image-zoom__content-area\"\n          style=\"--dds-image-zoom-margin: ${this.zoomMargin}px\">\n          ${resolvedSrc\n            ? html`\n                <img\n                  class=\"image-zoom__zoomed\"\n                  part=\"zoomed-image\"\n                  src=${resolvedSrc}\n                  alt=${resolvedAlt}\n                  @click=${() => this.unzoom()} />\n              `\n            : nothing}\n        </div>\n\n        ${!this.hideButtons\n          ? html`\n              <dap-ds-button\n                class=\"image-zoom__unzoom-btn\"\n                part=\"unzoom-button\"\n                data-testid=${this.unzoomButtonTestId}\n                variant=${this.zoomButtonVariant}\n                shape=\"circle\"\n                aria-label=${this.unzoomButtonAriaLabel ??\n                t('image-zoom.unzoom')}\n                exportparts=\"base:unzoom-button-base, content:unzoom-button-content\"\n                @click=${() => this.unzoom()}>\n                <dap-ds-icon\n                  aria-hidden=\"true\"\n                  name=\"zoom-out-line\"\n                  part=\"unzoom-button-icon\">\n                </dap-ds-icon>\n              </dap-ds-button>\n            `\n          : nothing}\n      </dialog>\n    `\n  }\n}\n"],"names":["_DapDSImageZoom","DdsElement","_a","changedProperties","prev","state","slot","nodes","_b","img","el","found","settled","onDone","zoomed","e","resolvedSrc","resolvedAlt","html","ifDefined","t","nothing","_c","DapDSButton","DapDSIcon","unsafeCSS","styles","DapDSImageZoom","__decorateClass","query","property"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+import { default as DapDSImageZoom } from './image-zoom.component';
+export * from './image-zoom.component';
+export default DapDSImageZoom;
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-image-zoom': DapDSImageZoom;
+    }
+}

package/dist/components/image-zoom/image-zoom.js

@@ -0,0 +1,6 @@
+import e from "./image-zoom.component.js";
+e.define();
+export {
+  e as default
+};
+//# sourceMappingURL=image-zoom.js.map

package/dist/components/image-zoom/image-zoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-zoom.js","sources":["../../../src/components/image-zoom/image-zoom.ts"],"sourcesContent":["import DapDSImageZoom from './image-zoom.component'\n\nexport * from './image-zoom.component'\nexport default DapDSImageZoom\n\nDapDSImageZoom.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-image-zoom': DapDSImageZoom\n  }\n}\n"],"names":["DapDSImageZoom"],"mappings":";AAKAA,EAAe,OAAO;"}

package/dist/components/image-zoom/image-zoom.scss.js

@@ -0,0 +1,5 @@
+const o = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{--dds-image-zoom-overlay-bg: rgb(0 0 0 / 80%);--dds-image-zoom-transition-speed: .3s;--dds-image-zoom-transition-timing: var( --dds-easing-ease-in-out, ease-in-out );display:inline-block}.image-zoom__trigger{display:inline-block;position:relative;cursor:zoom-in}.image-zoom__trigger:focus-visible{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large)}.image-zoom__trigger[aria-disabled=true]{cursor:default}.image-zoom__trigger:hover:not([aria-disabled=true]) .image-zoom__expand-button,.image-zoom__trigger:focus-visible:not([aria-disabled=true]) .image-zoom__expand-button{opacity:1}.image-zoom__expand-button{display:flex;position:absolute;right:var(--dds-spacing-200, 8px);bottom:var(--dds-spacing-200, 8px);transition:opacity var(--dds-image-zoom-transition-speed) var(--dds-image-zoom-transition-timing);opacity:0;pointer-events:none}.image-zoom__dialog{display:none;position:fixed;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;overflow:hidden;border:0;background:transparent;inset:0}.image-zoom__dialog[open]{display:flex;align-items:center;justify-content:center}.image-zoom__dialog::backdrop{background:transparent}.image-zoom__overlay{position:absolute;transition:opacity var(--dds-image-zoom-transition-speed) var(--dds-image-zoom-transition-timing);opacity:0;background:var(--dds-image-zoom-overlay-bg);cursor:zoom-out;inset:0}.image-zoom__dialog[data-state=open] .image-zoom__overlay{opacity:1}.image-zoom__content-area{display:flex;position:absolute;z-index:1;align-items:center;justify-content:center;inset:var(--dds-image-zoom-margin, 0);pointer-events:none}.image-zoom__zoomed{max-width:100%;max-height:100%;transform:scale(.85);transition:opacity var(--dds-image-zoom-transition-speed) var(--dds-image-zoom-transition-timing),transform var(--dds-image-zoom-transition-speed) var(--dds-image-zoom-transition-timing);opacity:0;cursor:zoom-out;pointer-events:auto;object-fit:contain}.image-zoom__dialog[data-state=open] .image-zoom__zoomed{transform:scale(1);opacity:1}.image-zoom__unzoom-btn{display:flex;position:absolute;z-index:2;top:var(--dds-spacing-400, 16px);right:var(--dds-spacing-400, 16px);align-items:center;justify-content:center;transition:opacity var(--dds-image-zoom-transition-speed) var(--dds-image-zoom-transition-timing);opacity:0;cursor:pointer}.image-zoom__unzoom-btn:hover{filter:brightness(1.2)}.image-zoom__unzoom-btn:focus-visible{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large)}.image-zoom__dialog[data-state=open] .image-zoom__unzoom-btn{opacity:1}";
+export {
+  o as default
+};
+//# sourceMappingURL=image-zoom.scss.js.map

package/dist/components/image-zoom/image-zoom.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-zoom.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/input/_styles/input.scss.js

@@ -0,0 +1,5 @@
+const d = '*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}:root{--font-family: "Inter", sans-serif}:host{--dds-text-color: var(--dds-text-neutral-base);--dds-text-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-heading-color: var(--dds-text-neutral-strong);--dds-text-heading-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-description-color: var(--dds-text-neutral-subtle);--dds-text-description-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-font-family: var(--font-family);--dds-text-font-weight-medium: var(--dds-font-weight-medium);--dds-text-font-weight-bold: var(--dds-font-weight-bold);--dds-text-font-size-h1: var(--dds-font-7xl);--dds-text-font-size-h2: var(--dds-font-4xl);--dds-text-font-size-h3: var(--dds-font-2xl);--dds-text-font-size-h4: var(--dds-font-xl);--dds-text-font-size-h5: var(--dds-font-lg);--dds-text-font-size-h6: var(--dds-font-base);--dds-text-font-size-body: var(--dds-font-base);--dds-text-font-size-caption: var(--dds-font-xs);--dds-text-font-size-description: var(--dds-font-base);--dds-text-font-size-description-lg: var(--dds-font-base);--dds-text-font-size-description-sm: var(--dds-font-sm);--dds-text-font-size-lg: var(--dds-font-lg);--dds-text-font-size-md: var(--dds-font-base);--dds-text-font-size-sm: var(--dds-font-sm);--dds-text-font-size-xs: var(--dds-font-xs)}:host([variant=h1]),:host([variant=h2]),:host([variant=h3]),:host([variant=h4]),:host([variant=h5]),:host([variant=h6]){color:var(--dds-text-heading-color)}:host([inverted]) :host([variant=h1]),:host([inverted]) :host([variant=h2]),:host([inverted]) :host([variant=h3]),:host([inverted]) :host([variant=h4]),:host([inverted]) :host([variant=h5]),:host([inverted]) :host([variant=h6]){color:var(--dds-text-heading-color-inverted)}:host([variant=description]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=description]){color:var(--dds-text-description-color-inverted)}:host([variant=body]){color:var(--dds-text-color)}:host([inverted]) :host([variant=body]){color:var(--dds-text-color-inverted)}:host([variant=caption]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=caption]){color:var(--dds-text-description-color-inverted)}.typography{margin:0;font-family:var(--dds-text-font-family);font-weight:var(--dds-text-font-weight-medium);letter-spacing:0}.heading{font-weight:var(--dds-text-font-weight-bold);line-height:var(--dds-font-line-height-large)}.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.72px}@media (width >= 768px){.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.8px;line-height:var(--dds-font-line-height-xlarge)}}.typography-h2{font-size:var(--dds-text-font-size-h2);letter-spacing:-.56px}.typography-h3{font-size:var(--dds-text-font-size-h3);letter-spacing:-.48px}.typography-h4{font-size:var(--dds-text-font-size-h4);letter-spacing:-.4px}.typography-h5{font-size:var(--dds-text-font-size-h5)}.typography-h6{font-size:var(--dds-text-font-size-h6)}.typography-body{font-size:var(--dds-text-font-size-body);line-height:var(--dds-font-line-height-xlarge)}.typography-caption{font-size:var(--dds-text-font-size-caption);line-height:var(--dds-font-line-height-xlarge)}.typography-description{font-size:var(--dds-text-font-size-description);line-height:var(--dds-font-line-height-xlarge)}.typography-description-lg{font-size:var(--dds-text-font-size-description-lg);line-height:var(--dds-font-line-height-xlarge)}.typography-description-sm{font-size:var(--dds-text-font-size-description-sm);line-height:var(--dds-font-line-height-xlarge)}.typography-size-lg{font-size:var(--dds-text-font-size-lg);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-md{font-size:var(--dds-text-font-size-md);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-sm{font-size:var(--dds-text-font-size-sm);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-xs{font-size:var(--dds-text-font-size-xs);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-inverted{color:var(--dds-text-color-inverted)}.typography-heading-inverted{color:var(--dds-text-heading-color-inverted)}.typography-description-inverted{color:var(--dds-text-description-color-inverted)}:host{display:block;width:100%;--dds-input-height-xs: var(--dds-spacing-800);--dds-input-height-sm: var(--dds-spacing-1000);--dds-input-height-lg: var(--dds-spacing-1200);--dds-input-padding-xs: 0 var(--dds-spacing-200);--dds-input-padding-sm: 0 var(--dds-spacing-300);--dds-input-padding-lg: 0 var(--dds-spacing-400);--dds-input-font-size-xs: var(--dds-font-sm);--dds-input-font-size-sm: var(--dds-font-base);--dds-input-font-size-lg: var(--dds-font-lg);--dds-input-border: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-background: var(--dds-fields-background-default);--dds-input-text-color: var(--dds-text-neutral-base);--dds-input-border-radius: var(--dds-radius-base);--dds-input-disabled-border: 0 solid var(--dds-border-neutral-disabled);--dds-input-disabled-background: var(--dds-fields-background-disabled);--dds-input-disabled-text: var(--dds-text-neutral-disabled);--dds-input-readonly-border: 0 solid var(--dds-border-neutral-subtle);--dds-input-readonly-background: var(--dds-fields-background-read-only);--dds-input-readonly-text: var(--dds-text-neutral-subtle);--dds-input-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-error-border: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-background: var(--dds-fields-background-default);--dds-input-addon-success-background: var(--dds-fields-background-default);--dds-input-addon-error-background: var(--dds-fields-background-default);--dds-input-addon-border-before: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-addon-border-after: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-addon-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-input-addon-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-before: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-after: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-success-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-input-addon-error-border-before: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-error-border-after: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-error-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-error-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}.input{display:inline-flex;flex:1 1 auto;align-items:stretch;width:100%;vertical-align:middle}.input__container{display:flex;position:relative;flex:auto;align-items:center;width:auto}.input__control{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);display:inline-block;width:100%;height:var(--dds-input-height);padding:0 var(--dds-input-padding);border:var(--dds-input-border);border-radius:var(--dds-input-border-radius);background:var(--dds-input-background);color:var(--dds-input-text-color);font-size:var(--dds-input-font-size)}.input__control:focus-visible{outline-style:solid}.input__control--xs{height:var(--dds-input-height-xs);padding:var(--dds-input-padding-xs);font-size:var(--dds-input-font-size-xs)}.input__control--sm{height:var(--dds-input-height-sm);padding:var(--dds-input-padding-sm);font-size:var(--dds-input-font-size-sm)}.input__control--lg{height:var(--dds-input-height-lg);padding:var(--dds-input-padding-lg);font-size:var(--dds-input-font-size-lg)}.input__control[disabled],.input__control--disabled{border:var(--dds-input-disabled-border);background:var(--dds-input-disabled-background);color:var(--dds-input-disabled-text);cursor:not-allowed}.input__control--has-addon-before{border-left:var(--dds-border-width-none);border-top-left-radius:var(--dds-radius-none);border-bottom-left-radius:var(--dds-radius-none)}.input__control--has-addon-after{border-right:var(--dds-border-width-none);border-top-right-radius:var(--dds-radius-none);border-bottom-right-radius:var(--dds-radius-none)}.input__control[readonly],.input__control--readonly{border:var(--dds-input-readonly-border);background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.input__control--success{border:var(--dds-input-success-border)}.input__control--success.input__control--has-addon-before{border-left-width:0}.input__control--success.input__control--has-addon-after{border-right-width:0}.input__control--error{border:var(--dds-input-error-border)}.input__control--error.input__control--has-addon-before{border-left-width:0}.input__control--error.input__control--has-addon-after{border-right-width:0}.input__control--has-prefix{padding-left:var(--dds-spacing-1400)}.input__control--has-prefix:focus-visible{z-index:10}.input__control--has-postfix{padding-right:var(--dds-spacing-1400)}.input__control--has-postfix:focus-visible{z-index:10}.input__addon-before{display:flex;align-items:center;padding:var(--dds-spacing-200) var(--dds-spacing-300);border:var(--dds-input-addon-border-before);border-width:var(--dds-input-addon-border-width-before);border-radius:var(--dds-input-border-radius) 0 0 var(--dds-input-border-radius);background:var(--dds-input-addon-background)}.input__addon-before--xs{height:var(--dds-spacing-800);padding:var(--dds-spacing-200)}.input__addon-before--sm{height:var(--dds-spacing-1000);padding:var(--dds-spacing-300)}.input__addon-before--lg{height:var(--dds-spacing-1200);padding:var(--dds-spacing-400)}.input__addon-before--disabled{border-width:0;background:var(--dds-input-disabled-background);color:var(--dds-input-disabled-text);cursor:not-allowed}.input__addon-before--readonly{border-width:0;background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.input__addon-before--success{border:var(--dds-input-addon-success-border-before);border-width:var(--dds-input-addon-success-border-width-before);background:var(--dds-input-addon-success-background)}.input__addon-before--error{border:var(--dds-input-addon-error-border-before);border-width:var(--dds-input-addon-error-border-width-before);background:var(--dds-input-addon-error-background)}.input__addon-after{display:flex;align-items:center;padding:var(--dds-spacing-200) var(--dds-spacing-300);border:var(--dds-input-addon-border-after);border-width:var(--dds-input-addon-border-width-after);border-radius:0 var(--dds-input-border-radius) var(--dds-input-border-radius) 0;background:var(--dds-input-addon-background)}.input__addon-after--xs{height:var(--dds-spacing-800);padding:var(--dds-spacing-200)}.input__addon-after--sm{height:var(--dds-spacing-1000);padding:var(--dds-spacing-300)}.input__addon-after--lg{height:var(--dds-spacing-1200);padding:var(--dds-spacing-400)}.input__addon-after--disabled{border-width:0;background:var(--dds-input-disabled-background);color:var(--dds-input-disabled-text);cursor:not-allowed}.input__addon-after--readonly{border-width:0;background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.input__addon-after--success{border:var(--dds-input-addon-success-border-after);border-width:var(--dds-input-addon-success-border-width-after);background:var(--dds-input-addon-success-background)}.input__addon-after--error{border:var(--dds-input-addon-error-border-after);border-width:var(--dds-input-addon-error-border-width-after);background:var(--dds-input-addon-error-background)}.input__addon-prefix{display:inline-flex;position:absolute;z-index:var(--dds-z-index-10);left:var(--dds-spacing-400);align-items:center}.input__addon-postfix{display:inline-flex;position:absolute;z-index:var(--dds-z-index-10);right:var(--dds-spacing-400);align-items:center;gap:var(--dds-spacing-200)}';
+export {
+  d as default
+};
+//# sourceMappingURL=input.scss.js.map

package/dist/components/input/_styles/input.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}