dap-design-system/dist/components/image-zoom/image-zoom.component.js

Official design system for the DÁP (dap.gov.hu)

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