dap-design-system/dist/components/content-switcher/content-switcher.component.js

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

var m = (r, l, e) => new Promise((i, s) => {
  var t = (a) => {
    try {
      o(e.next(a));
    } catch (h) {
      s(h);
    }
  }, c = (a) => {
    try {
      o(e.throw(a));
    } catch (h) {
      s(h);
    }
  }, o = (a) => a.done ? i(a.value) : Promise.resolve(a.value).then(t, c);
  o((e = e.apply(r, l)).next());
});
import { clsx as v } 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 d } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { html as f } from "../../node_modules/lit-html/static.js";
import { DdsElement as y } from "../../internal/dds-hu-element.js";
import g from "./content-switcher.scss.js";
import { unsafeCSS as k } from "../../node_modules/@lit/reactive-element/css-tag.js";
var I = Object.defineProperty, p = (r, l, e, i) => {
  for (var s = void 0, t = r.length - 1, c; t >= 0; t--)
    (c = r[t]) && (s = c(l, e, s) || s);
  return s && I(l, e, s), s;
};
const n = class n extends y {
  constructor() {
    super(...arguments), this.multiSelect = !1;
  }
  getAllInputs() {
    return [
      ...this.querySelectorAll(
        "dap-ds-content-switcher-item"
      )
    ];
  }
  syncInputElements() {
    return m(this, null, function* () {
      const l = this.getAllInputs();
      yield Promise.all(
        l.map((e) => m(this, null, function* () {
          var i;
          if (this.multiSelect && this.value) {
            const s = (i = this.value) == null ? void 0 : i.split(",").map((t) => t.trim());
            e.checked = s.includes(e.value);
          } else
            e.checked = e.value === this.value;
        }))
      );
    });
  }
  handleInputClick(l) {
    const e = l.target.closest("dap-ds-content-switcher-item"), i = this.getAllInputs(), s = this.value;
    e.disabled || (this.multiSelect ? (e.checked = !e.checked, this.value = i.filter((t) => t.checked).map((t) => t.value).join(","), this.emit("dds-change", { value: this.value })) : (this.value = e.value, i.forEach((t) => t.checked = t === e), this.value !== s && this.emit("dds-change", { value: e.value, selected: !0 })));
  }
  updated(l) {
    l.has("value") && this.syncInputElements();
  }
  render() {
    return f`
      <div part="base" class=${v("content-switcher")}>
        <slot
          @click=${this.handleInputClick}
          @slotchange=${this.syncInputElements}></slot>
      </div>
    `;
  }
};
n.tagName = "dap-ds-content-switcher", n.styles = k(g);
let u = n;
p([
  d({ type: Boolean, reflect: !0 })
], u.prototype, "multiSelect");
p([
  d({ type: String, reflect: !0 })
], u.prototype, "value");
export {
  u as default
};
//# sourceMappingURL=content-switcher.component.js.map