dap-design-system/dist/components/icon-button/icon-button.component.js

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

import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { ifDefined as p } from "../../node_modules/lit-html/directives/if-defined.js";
import { html as d } from "../../node_modules/lit-html/static.js";
import { DdsElement as m } from "../../internal/dds-hu-element.js";
import { SizedMixin as S } from "../../internal/mixin/sizedMixin.js";
import b from "../icon/icon.component.js";
import z from "./icon-button.scss.js";
import { unsafeCSS as y } from "../../node_modules/@lit/reactive-element/css-tag.js";
var v = Object.defineProperty, r = (h, t, e, i) => {
  for (var n = void 0, s = h.length - 1, l; s >= 0; s--)
    (l = h[s]) && (n = l(t, e, n) || n);
  return n && v(t, e, n), n;
};
const g = S(m), c = class c extends g {
  constructor() {
    super(), this.variant = "neutral", this.clean = !1, this.disabled = !1, this.htmlType = "button", this._ariaLabelForButton = null, this.handleSlotChange = () => {
      if (this.shadowRoot) {
        const t = this.shadowRoot.querySelector("slot");
        if (t) {
          const e = t.assignedElements({ flatten: !0 });
          for (const i of e)
            i instanceof HTMLSlotElement && (i.__ddsSlotListenerAdded || (i.addEventListener("slotchange", this.handleSlotChange), i.__ddsSlotListenerAdded = !0));
        }
      }
      this.applySizeToSlotIcons();
    }, this.size = "md";
  }
  /** Aria-label for the inner button; survives host attribute removal so Lit does not clear it */
  get effectiveAriaLabel() {
    var t;
    return (t = this.ariaLabel) != null ? t : this._ariaLabelForButton;
  }
  /**
   * Recursively finds all icon elements in slots and nested slots
   */
  findIconElementsInSlot(t) {
    const e = [], i = t.assignedElements({ flatten: !0 }), n = t.assignedNodes({ flatten: !0 });
    for (const s of i)
      if (s.tagName === "DAP-DS-ICON")
        e.push(s);
      else if (s instanceof HTMLSlotElement)
        e.push(...this.findIconElementsInSlot(s));
      else if (s.children) {
        const l = Array.from(
          s.querySelectorAll("dap-ds-icon")
        );
        e.push(...l);
      }
    for (const s of n)
      if (s instanceof Element && s.tagName === "DAP-DS-ICON")
        e.includes(s) || e.push(s);
      else if (s instanceof Element) {
        const l = Array.from(s.querySelectorAll("dap-ds-icon"));
        for (const f of l)
          e.includes(f) || e.push(f);
      }
    return e;
  }
  /**
   * Applies size props to all icon elements in the slot
   */
  applySizeToSlotIcons() {
    if (!this.shadowRoot) return;
    const t = this.shadowRoot.querySelector("slot");
    if (!t) return;
    const e = this.findIconElementsInSlot(t);
    for (const i of e)
      this.iconSize !== void 0 ? (i.setAttribute("staticSize", this.iconSize.toString()), i.setAttribute("size", this.iconSize.toString())) : (i.setAttribute("size", this.effectiveSize), i.removeAttribute("staticSize"));
  }
  /**
   * Sets up slotchange listeners for the main slot and any nested slots
   */
  setupSlotListeners(t) {
    t.addEventListener("slotchange", this.handleSlotChange);
    const e = t.assignedElements({ flatten: !0 });
    for (const i of e)
      i instanceof HTMLSlotElement && (i.addEventListener("slotchange", this.handleSlotChange), i.__ddsSlotListenerAdded = !0);
  }
  firstUpdated(t) {
    if (super.firstUpdated(t), this.shadowRoot) {
      const e = this.shadowRoot.querySelector("slot");
      e && this.setupSlotListeners(e);
    }
    requestAnimationFrame(() => {
      this.applySizeToSlotIcons();
    });
  }
  updated(t) {
    var i;
    super.updated(t);
    const e = (i = this.getAttribute("aria-label")) != null ? i : this.ariaLabel;
    e != null && e !== "" && (this._ariaLabelForButton = e), this.removeAttribute("aria-label"), (t.has("size") || t.has("sizeMap") || t.has("iconSize") || this.sizeMap) && requestAnimationFrame(() => {
      this.applySizeToSlotIcons();
    });
  }
  focus() {
    var t, e;
    (e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("button")) == null || e.focus();
  }
  render() {
    return d`
      <button
        part="base"
        .disabled=${this.disabled}
        type=${this.htmlType}
        aria-label=${p(this.effectiveAriaLabel) || ""}
        class=${u(
      "icon-button",
      {
        [`icon-button--${this.effectiveSize}`]: this.effectiveSize && this.iconSize === void 0
      },
      { [`icon-button--${this.size}`]: this.size },
      { "icon-button--disabled": this.disabled },
      { "icon-button--clean": this.clean },
      `icon-button--${this.variant}`
    )}>
        <div part="high-contrast" class="button__highcontrast"></div>
        ${this.icon ? d` <dap-ds-icon
              part="content"
              exportparts="icon, base: icon-base"
              name="${this.icon}"
              aria-hidden="true"
              staticSize=${p(this.iconSize)}
              size=${this.effectiveSize === "xxs" ? "xs" : this.effectiveSize}>
            </dap-ds-icon>` : d` <slot></slot> `}
      </button>
    `;
  }
};
c.tagName = "dap-ds-icon-button", c.dependencies = {
  "dap-ds-icon": b
}, c.styles = y(z);
let o = c;
r([
  a({ reflect: !0 })
], o.prototype, "variant");
r([
  a({ type: Boolean, reflect: !0 })
], o.prototype, "clean");
r([
  a({ type: Number })
], o.prototype, "iconSize");
r([
  a({ type: Boolean, reflect: !0 })
], o.prototype, "disabled");
r([
  a()
], o.prototype, "htmlType");
r([
  a()
], o.prototype, "icon");
r([
  a()
], o.prototype, "name");
export {
  o as default
};
//# sourceMappingURL=icon-button.component.js.map