@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
71 lines (70 loc) • 3.51 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { LitElement, setAttribute, safeClassMap } from "@arcgis/lumina";
import { o as nodeListToArray } from "../../chunks/dom.js";
import { g as guid } from "../../chunks/guid.js";
const CSS = {
container: "container",
content: "content",
scale: (scale) => `scale-${scale}`
};
const IDS = {
tabTitleId: (id) => `calcite-tab-title-${id}`
};
const styles = css`:host{display:none}:host,.container,.content{block-size:100%;inline-size:100%}:host([selected]),:host([selected]) .container{display:flex;flex-direction:column}.content{box-sizing:border-box;padding-block:var(--calcite-tab-content-space-y, var(--calcite-tab-content-block-padding, var(--calcite-internal-tab-content-space-y)))}.scale-s{--calcite-internal-tab-content-space-y: .25rem;font-size:var(--calcite-font-size-sm);line-height:1rem}.scale-m{--calcite-internal-tab-content-space-y: .5rem;font-size:var(--calcite-font-size);line-height:1rem}.scale-l{--calcite-internal-tab-content-space-y: .625rem;font-size:var(--calcite-font-size-md);line-height:1.25rem}.container{display:none;block-size:100%;inline-size:100%;overflow:auto;outline-color:transparent}.container:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([hidden]){display:none}[hidden]{display:none}`;
class Tab extends LitElement {
constructor() {
super();
this.guid = IDS.tabTitleId(guid());
this.scale = "m";
this.selected = false;
this.listenOn(document.body, "calciteInternalTabChange", this.internalTabChangeHandler);
}
static {
this.properties = { labeledBy: [16, {}, { state: true }], scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], tab: [3, {}, { reflect: true }] };
}
static {
this.styles = styles;
}
async getTabIndex() {
return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter((el) => el.matches("calcite-tab")), this.el);
}
_updateAriaInfo(tabIds = [], titleIds = []) {
this.labeledBy = titleIds[tabIds.indexOf(this.el.id)] || null;
}
connectedCallback() {
super.connectedCallback();
this.parentTabsEl = this.el.closest("calcite-tabs");
}
disconnectedCallback() {
super.disconnectedCallback();
document.body?.dispatchEvent(new CustomEvent("calciteTabUnregister", {
detail: this.el
}));
}
internalTabChangeHandler(event) {
const targetTabsEl = event.composedPath().find((el) => el.tagName === "CALCITE-TABS");
if (targetTabsEl !== this.parentTabsEl) {
return;
}
if (this.tab) {
this.selected = this.tab === event.detail.tab;
} else {
this.getTabIndex().then((index) => {
this.selected = index === event.detail.tab;
});
}
event.stopPropagation();
}
render() {
const id = this.el.id || this.guid;
setAttribute(this.el, "aria-labelledby", this.labeledBy);
setAttribute(this.el, "id", id);
return html`<div class=${safeClassMap({ [CSS.container]: true, [CSS.scale(this.scale)]: true })} role=tabpanel .tabIndex=${this.selected ? 0 : -1}><section class=${safeClassMap(CSS.content)}><slot></slot></section></div>`;
}
}
customElement("calcite-tab", Tab);
export {
Tab
};