dap-design-system/dist/components/toggle-button/toggle-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 f } from "../../node_modules/lit-html/static.js";
import { GenericFormElement as c } from "../../internal/mixin/genericFormElement.js";
import b from "./_styles/toggle-button.scss.js";
import { unsafeCSS as m } from "../../node_modules/@lit/reactive-element/css-tag.js";
var g = Object.defineProperty, l = (d, t, i, h) => {
  for (var e = void 0, o = d.length - 1, n; o >= 0; o--)
    (n = d[o]) && (e = n(t, i, e) || e);
  return e && g(t, i, e), e;
};
const r = class r extends c {
  constructor() {
    super(), this.active = !1, this.shape = "button", this.sizeChildren = "true", this.size = "md";
  }
  /** Maps effectiveSize from SizedMixin to toggle button visual size (xxs→xs). */
  get toggleButtonSize() {
    return this.effectiveSize === "xxs" ? "xs" : this.effectiveSize;
  }
  get focusElement() {
    var t;
    return (t = this.shadowRoot) == null ? void 0 : t.querySelector("button");
  }
  firstUpdated(t) {
    super.firstUpdated(t), this._sizeSlottedChildren();
  }
  updated(t) {
    super.updated(t), (t.has("size") || t.has("sizeMap") || t.has("sizeChildren")) && this._sizeSlottedChildren();
  }
  _sizeSlottedChildren() {
    var i;
    if (this.sizeChildren !== "true") return;
    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot");
    t == null || t.assignedElements().forEach((h) => {
      h.setAttribute("size", this.toggleButtonSize);
    });
  }
  handleClick() {
    this.disabled;
  }
  render() {
    return f`
      <button
        part="base"
        .disabled=${this.disabled}
        aria-disabled=${this.disabled}
        aria-label=${p(this.ariaLabel) || ""}
        aria-pressed=${this.active}
        .autofocus=${this.autofocus}
        type="button"
        class=${u(
      "toggle-button",
      `toggle-button--${this.toggleButtonSize}`,
      `toggle-button--${this.shape}`,
      {
        "toggle-button--active": this.active,
        "toggle-button--disabled": this.disabled
      }
    )}
        @click=${this.handleClick}>
        <div part="high-contrast" class="toggle-button__highcontrast"></div>
        <slot></slot>
      </button>
    `;
  }
};
r.tagName = "dap-ds-toggle-button", r.styles = m(b);
let s = r;
l([
  a({ type: Boolean, reflect: !0 })
], s.prototype, "active");
l([
  a({ reflect: !0 })
], s.prototype, "shape");
l([
  a({ type: String })
], s.prototype, "sizeChildren");
export {
  s as default
};
//# sourceMappingURL=toggle-button.component.js.map