@scania/tegel/dist/components/tds-folder-tab.js

Tegel Design System

import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.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;border-left:1px solid;border-left-color:transparent}:host ::slotted(*:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host div:not(.selected){background-color:var(--tds-folder-tab-background)}:host div:not(.selected) ::slotted(*){border-left-color:var(--tds-folder-tab-divider-color);border-top:2px solid var(--tds-folder-tab-background);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-color:var(--tds-folder-tab-background-hover);color:var(--tds-folder-tab-color)}: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-background-selected);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(.first) :not(.selected) ::slotted(*){border-left-color:transparent}";
const TdsFolderTabStyle0 = folderTabCss;

const TdsFolderTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsFolderTab extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.disabled = false;
        this.selected = false;
        this.tabWidth = undefined;
    }
    /** @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: '19a42f7143a8f32130642bd50dd6817f871fdf20', "aria-selected": this.selected }, h("div", { key: '51bef3bebff5e13d7c949529919865780d8b33de', class: {
                selected: this.selected,
                disabled: this.disabled,
            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '2b661d3518f047f7bd0e50a121987eb62c5d42e8' }))));
    }
    get host() { return this; }
    static get style() { return TdsFolderTabStyle0; }
}, [1, "tds-folder-tab", {
        "disabled": [4],
        "selected": [32],
        "tabWidth": [32],
        "setTabWidth": [64],
        "setSelected": [64]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["tds-folder-tab"];
    components.forEach(tagName => { switch (tagName) {
        case "tds-folder-tab":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TdsFolderTab$1);
            }
            break;
    } });
}
defineCustomElement$1();

const TdsFolderTab = TdsFolderTab$1;
const defineCustomElement = defineCustomElement$1;

export { TdsFolderTab, defineCustomElement };