dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
175 lines (173 loc) • 6.09 kB
JavaScript
import { clsx as c } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { html as f } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as h } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { query as p } from "../../node_modules/@lit/reactive-element/decorators/query.js";
import { queryAll as u } from "../../node_modules/@lit/reactive-element/decorators/query-all.js";
import { ifDefined as I } from "../../node_modules/lit-html/directives/if-defined.js";
import { map as T } from "../../node_modules/lit-html/directives/map.js";
import { DdsElement as g } from "../../internal/dds-hu-element.js";
import v from "./tab-group.scss.js";
import { unsafeCSS as _ } from "../../node_modules/@lit/reactive-element/css-tag.js";
var y = Object.defineProperty, d = (b, t, e, s) => {
for (var a = void 0, r = b.length - 1, i; r >= 0; r--)
(i = b[r]) && (a = i(t, e, a) || a);
return a && y(t, e, a), a;
};
const o = class o extends g {
constructor() {
super(...arguments), this.size = "sm", this.mobile = !1, this._tabNavItems = [], this._activeTabIds = [], this._initialEmit = !0;
}
emitTabSelect(t) {
if (!t) {
console.warn("Empty tab id!");
return;
}
this.emit("dds-tab-select", { tabId: t }, { bubbles: !1 }), this._initialEmit && (this._initialEmit = !1);
}
attributeChangedCallback(t, e, s) {
super.attributeChangedCallback(t, e, s), t.toLocaleLowerCase() === "selectedtabid" && s !== e && customElements.whenDefined("dap-ds-tab").then(() => {
s && this._activeTabIds.includes(s) && this.emitTabSelect(s);
});
}
/**
* Collects the title nodes of a tab (every light DOM child that is not
* slotted into the tab content).
*
* The nodes are cloned: rendering the original nodes into the nav would move
* them out of the tab's light DOM, so any later slotchange would find the tab
* title empty and the nav labels would disappear.
* @ignore
*/
getTabTitleNodes(t) {
return Array.from(t.childNodes).filter((e) => !(e instanceof Element && e.slot)).map((e) => e.cloneNode(!0));
}
handleSlotChange(t) {
var r;
const e = (r = t.target) == null ? void 0 : r.assignedElements({ flatten: !0 }).filter((i) => i.tagName.toLowerCase() === "dap-ds-tab");
if (!e)
return;
const s = [], a = [];
e.forEach((i) => {
const n = i.getAttribute("tabId"), m = i.hasAttribute("disabled");
s.push({
titleTemplate: this.getTabTitleNodes(i),
disabled: m,
tabId: n
}), !m && n && a.push(n);
}), this._tabNavItems = s, this._activeTabIds = a, !this.selectedTabId && this._activeTabIds.length ? this.selectedTabId = this._activeTabIds[0] : this._initialEmit && this.emitTabSelect(this.selectedTabId), this.requestUpdate();
}
handleClick(t) {
t === this.selectedTabId || !t || (this.selectedTabId = t, this.emitTabSelect(t));
}
handleKeyDown(t) {
const e = this._activeTabIds.indexOf(this.selectedTabId);
let s = !1;
switch (t.key) {
case "ArrowLeft":
case "ArrowUp":
{
if (e > 0) {
const a = e - 1;
this.handleClick(this._activeTabIds[a]), this.tabNavElements[a].focus();
}
s = !0;
}
break;
case "ArrowRight":
case "ArrowDown":
{
if (e < this._activeTabIds.length - 1) {
const a = e + 1;
this.handleClick(this._activeTabIds[a]), this.tabNavElements[a].focus();
}
s = !0;
}
break;
case "Home":
this.handleClick(this._activeTabIds[0]), this.tabNavElements[0].focus(), s = !0;
break;
case "End":
this.handleClick(this._activeTabIds[this._activeTabIds.length - 1]), this.tabNavElements[this._activeTabIds.length - 1].focus(), s = !0;
break;
}
s && (t.stopPropagation(), t.preventDefault());
}
render() {
return f`
<div part="base" class="tab-group">
<div
role="tablist"
class=" ${c("tab-group__nav", {
"tab-group--mobile": this.mobile
})}">
${T(
this._tabNavItems,
(t) => {
var e;
return f`
<button
part="tab-nav"
?disabled="${t.disabled}"
role="tab"
aria-controls=${I((e = t.tabId) != null ? e : void 0)}
aria-selected="${this.selectedTabId === t.tabId}"
tabindex="${this.selectedTabId === t.tabId ? 0 : -1}"
type="button"
class=${c("tab", {
"tab--selected": this.selectedTabId === t.tabId,
"tab--disabled": t.disabled,
"tab--sm": this.size === "sm",
"tab--lg": this.size === "lg"
})}
=${() => {
this.handleClick(t.tabId);
}}
=${this.handleKeyDown}>
<span
part="high-contrast"
class=${c(
"tab__high-contrast",
{
"tab__high-contrast--selected": this.selectedTabId === t.tabId
},
`tab__high-contrast--${this.size}`
)}></span>
${t.titleTemplate}
</button>
`;
}
)}
</div>
<div part="tab-group-content" class="tab-group__content">
<slot =${this.handleSlotChange}></slot>
</div>
</div>
`;
}
};
o.tagName = "dap-ds-tab-group", o.styles = _(v);
let l = o;
d([
p("slot")
], l.prototype, "defaultSlot");
d([
u(".tab:not(.tab--disabled)")
], l.prototype, "tabNavElements");
d([
h({
type: String,
reflect: !0
})
], l.prototype, "selectedTabId");
d([
h({ type: String, reflect: !0 })
], l.prototype, "size");
d([
h({ type: Boolean, reflect: !0 })
], l.prototype, "mobile");
export {
l as default
};
//# sourceMappingURL=tab-group.component.js.map