@scania/tegel
Version:
Tegel Design System
49 lines (45 loc) • 4.27 kB
JavaScript
import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
const folderTabCss = () => `:host{box-sizing:border-box;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;min-width:142px;display:block;width:calc(100% - 32px);font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;cursor:pointer;padding:16px;white-space:nowrap;text-decoration:none;text-align:left;outline:none;border:none}:host ::slotted(*:focus-within)::before{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;content:"";position:absolute;top:3px;bottom:3px;left:3px;right:3px}:host div:not(.selected){background-color:var(--tds-folder-tab-background);position:relative}:host div:not(.selected)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background-color:var(--tds-folder-tab-divider-color)}:host div:not(.selected) ::slotted(*){border-top:2px solid transparent;color:var(--tds-folder-tab-item-color)}:host div:not(.selected):hover:not(.disabled){background-color:var(--tds-folder-tab-background-hover);cursor:pointer}:host div:not(.selected):hover:not(.disabled) ::slotted(*){border-top:2px solid var(--tds-folder-tab-top-border-hover);color:var(--tds-folder-tab-color)}:host div:not(.selected).disabled{background-color:var(--tds-folder-tab-item-background-disabled)}:host div:not(.selected).disabled ::slotted(*){color:var(--tds-folder-tab-item-color-disabled)}:host div:not(.selected).disabled ::slotted(*:focus-visible){outline:none}:host div:not(.selected).disabled ::slotted(*:hover){cursor:not-allowed}:host div:not(.selected).disabled ::slotted(*::after){content:none}:host .selected{background-color:var(--tds-folder-tab-background-selected);border-top:2px solid var(--tds-folder-tab-border-selected)}:host .selected::after{content:" ";background-color:var(--tds-folder-tab-divider-color);width:1px;top:0;bottom:0;right:-1px;display:block;position:absolute;z-index:1}:host .selected ::slotted(*){color:var(--tds-folder-tab-color)}:host .selected:hover:not(.disabled){background-color:var(--tds-folder-tab-background-hover);cursor:pointer}:host .selected:hover:not(.disabled) ::slotted(*){color:var(--tds-folder-tab-color)}:host(.first) ::slotted(*){border-left-color:transparent}:host(.first) .selected{border-left:none}`;
const TdsFolderTab = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** Disables the Tab. */
this.disabled = false;
this.selected = false;
}
/** @internal Method to set the width of the tab. Used by the <tds-folder-tabs> */
async setTabWidth(width) {
this.tabWidth = width;
}
/** @internal Method to set the tab as selected. Used by the <tds-folder-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 folder-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 folder-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: 'bcb1ed17ebb34e2a458daa2fb3c6f7f52c3d9bf6', "aria-selected": this.selected }, h("div", { key: 'b6ee4cef0bac744ad09e92a32453ba6fb6021c41', class: {
selected: this.selected,
disabled: this.disabled,
}, style: { width: `${this.tabWidth}px` } }, h("slot", { key: 'b7d230c050fc315fb5de735a0496c69c967bdefe' }))));
}
get host() { return getElement(this); }
};
TdsFolderTab.style = folderTabCss();
export { TdsFolderTab as tds_folder_tab };