@scania/tegel
Version:
Tegel Design System
66 lines (61 loc) • 4.14 kB
JavaScript
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
const navigationTabCss = ":host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-navigation-tabs-tab-color) !important;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;padding:26px 4px}:host ::slotted(*:focus-visible)::before{content:\"\";position:absolute;left:0;right:0;top:26px;bottom:26px;outline:2px solid var(--tds-blue-400)}:host .navigation-tab-item:not(.selected)::after{width:0%;transition:width 0.15s ease-in-out 0s}:host .navigation-tab-item{position:relative;margin-right:32px}:host .navigation-tab-item:hover{cursor:pointer}:host .navigation-tab-item:hover::after{width:100%}:host .navigation-tab-item::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--tds-navigation-tabs-tab-indicator-background-hover);z-index:1}:host .selected ::slotted(*){color:var(--tds-navigation-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-navigation-tabs-tab-indicator-background-active)}:host .disabled{color:var(--tds-navigation-tabs-tab-color-disabled)}:host .disabled ::slotted(*){opacity:var(--tds-navigation-tabs-tab-color-opacity-disabled)}:host .disabled::after{content:none}:host .disabled ::slotted(*:hover){cursor:not-allowed}:host .disabled ::slotted(*:focus-visible){outline:none}:host(.last){margin-right:32px}";
const TdsNavigationTabStyle0 = navigationTabCss;
const TdsNavigationTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigationTab extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.disabled = false;
this.selected = false;
}
/** @internal Method to set the Tab as selected. Used by the <tds-navigation-tabs> */
async setSelected(selected) {
this.selected = selected;
}
connectedCallback() {
const elements = this.host.querySelectorAll('button, a');
for (let index = 0; index < elements.length; index++) {
const element = elements[index];
if (!element.getAttribute('aria-controls')) {
console.warn('Tegel navigation-tab component: Interactive elements should have aria-controls attribute to link the tab to its corresponding panel');
}
if (element.getAttribute('role') !== 'tab') {
console.warn('Tegel navigation-tab component: Interactive elements should have attribute role="tab"');
}
if (this.disabled) {
element.setAttribute('aria-disabled', 'true');
}
else {
element.removeAttribute('aria-disabled');
}
}
}
render() {
return (h(Host, { key: '28ba6f5bedc4f2a31e5011e37bf92d3b38fa8abe' }, h("div", { key: 'ac5aad203d8a13dc42a8f9e99b2ccdd7c784c9af', class: `navigation-tab-item ${this.selected ? 'selected' : ''}
${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'da6292612753748f6cac68e0b282ecde642cb5b5' }))));
}
get host() { return this; }
static get style() { return TdsNavigationTabStyle0; }
}, [1, "tds-navigation-tab", {
"disabled": [4],
"selected": [32],
"setSelected": [64]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["tds-navigation-tab"];
components.forEach(tagName => { switch (tagName) {
case "tds-navigation-tab":
if (!customElements.get(tagName)) {
customElements.define(tagName, TdsNavigationTab$1);
}
break;
} });
}
defineCustomElement$1();
const TdsNavigationTab = TdsNavigationTab$1;
const defineCustomElement = defineCustomElement$1;
export { TdsNavigationTab, defineCustomElement };