dap-design-system/dist/components/tab/tab.component.js

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

import { clsx as n } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { html as c } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as p } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as f } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { DdsElement as m } from "../../internal/dds-hu-element.js";
import b from "./tab.scss.js";
import { unsafeCSS as h } from "../../node_modules/@lit/reactive-element/css-tag.js";
var u = Object.defineProperty, a = (d, t, s, _) => {
  for (var e = void 0, l = d.length - 1, o; l >= 0; l--)
    (o = d[l]) && (e = o(t, s, e) || e);
  return e && u(t, s, e), e;
};
const i = class i extends m {
  constructor() {
    super(...arguments), this.disabled = !1, this._selected = !1;
  }
  firstUpdated() {
    this.setAttribute("id", this.tabId);
    const t = this.parentElement;
    t == null || t.addEventListener("dds-tab-select", (s) => {
      s.detail && this.tabId === s.detail.tabId ? this._selected = !0 : this._selected && (this._selected = !1);
    }), (t == null ? void 0 : t.selectedTabId) === this.tabId && (this._selected = !0);
  }
  render() {
    return c`<div
      id=${this.tabId}
      part="base"
      tabindex=${this._selected ? 0 : -1}
      class=${n("tab-panel", {
      "tab-panel--selected": this._selected
    })}
      role="tabpanel"
      aria-labelledby=${this.tabId}>
      <slot class="tab-panel__title"></slot>
      <slot name="content"></slot>
    </div>`;
  }
};
i.tagName = "dap-ds-tab", i.styles = h(b);
let r = i;
a([
  p({ type: String, reflect: !0 })
], r.prototype, "tabId");
a([
  p({ type: Boolean, reflect: !0 })
], r.prototype, "disabled");
a([
  f()
], r.prototype, "_selected");
export {
  r as default
};
//# sourceMappingURL=tab.component.js.map