dap-design-system/dist/components/icon/icon.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 r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { html as l, unsafeStatic as m } from "../../node_modules/lit-html/static.js";
import { DdsElement as f } from "../../internal/dds-hu-element.js";
import h from "./_styles/icon.scss.js";
import { unsafeCSS as _ } from "../../node_modules/@lit/reactive-element/css-tag.js";
var g = Object.defineProperty, o = (d, t, e, n) => {
  for (var s = void 0, c = d.length - 1, p; c >= 0; c--)
    (p = d[c]) && (s = p(t, e, s) || s);
  return s && g(t, e, s), s;
};
const a = class a extends f {
  constructor() {
    super(...arguments), this.size = "md", this.focusable = !1;
  }
  /** True unless the consumer explicitly opted out with `aria-hidden="false"`. */
  get _isDecorative() {
    return this.ariaHidden !== "false";
  }
  willUpdate(t) {
    super.willUpdate(t), this.setAttribute("aria-hidden", this._isDecorative ? "true" : "false");
  }
  firstUpdated(t) {
    super.firstUpdated(t), this.classList.add("dap-ds-icon");
  }
  render() {
    return l`
      <span
        class=${u("icon", {})}
        part="base"
        tabindex="-1"
        aria-hidden=${this._isDecorative ? "true" : "false"}>
        ${this.name ? this._getNamedIcon() : this._getSlotIcon()}
      </span>
    `;
  }
  _getNamedIcon() {
    var e, n;
    const t = `dap-ds-icon-${this.name}`;
    return l`
     <${m(t)}
        part="icon"
        size=${(e = this.staticSize) != null ? e : this._getIconSizePx(this.size)}
        viewBox="0 0 24 24"
        role="img"
        aria-hidden=${this._isDecorative ? "true" : "false"}
        aria-label=${(n = this.ariaLabel) != null ? n : ""}
        tabindex=${this.focusable ? 0 : -1}
      >
      </${m(t)}
    `;
  }
  _getSlotIcon() {
    return l`
      <span
        part="icon"
        class=${u("icon--custom-icon", { [this.size]: !0 })}
        aria-hidden=${this._isDecorative ? "true" : "false"}>
        <slot></slot>
      </span>
    `;
  }
  _getIconSizePx(t) {
    switch (t) {
      case "xxl":
        return 40;
      case "xl":
        return 32;
      case "lg":
        return 24;
      case "md":
        return 20;
      case "sm":
        return 16;
      case "xs":
        return 12;
      default:
        return 20;
    }
  }
};
a.tagName = "dap-ds-icon", a.styles = _(h);
let i = a;
o([
  r()
], i.prototype, "name");
o([
  r()
], i.prototype, "size");
o([
  r({ type: Number })
], i.prototype, "staticSize");
o([
  r({ type: Boolean })
], i.prototype, "focusable");
export {
  i as default
};
//# sourceMappingURL=icon.component.js.map