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

Tegel Design System

import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';

const inlineTabCss = ":host{box-sizing:border-box;display:block;position:relative}: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);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:20px 4px}:host ::slotted(*:focus-visible)::before{content:\"\";position:absolute;left:0;right:0;top:20px;bottom:20px;outline:2px solid var(--tds-blue-400)}:host .inline-tab-item:not(.selected)::after{width:0%;transition:width 0.15s ease-in-out 0s}:host .inline-tab-item{position:relative;margin-right:32px}:host .inline-tab-item:hover{cursor:pointer}:host .inline-tab-item:hover::after{width:100%}:host .inline-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-inline-tabs-tab-indicator-background-hover);z-index:1}:host .selected ::slotted(*){color:var(--tds-inline-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-inline-tabs-tab-indicator-background-active)}:host .disabled{color:var(--tds-inline-tabs-tab-color-disabled)}:host .disabled ::slotted(*){opacity:var(--tds-inline-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 TdsInlineTabStyle0 = inlineTabCss;

const TdsInlineTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTab 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-inline-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 inline-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 inline-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: '496b56fa31a50e26ceea5275e29873d030ea2937', "aria-selected": this.selected }, h("div", { key: 'c67bfb892ea721b1ad329e00453fe62dcf4681c0', class: {
                'inline-tab-item': true,
                'selected': this.selected,
                'disabled': this.disabled,
            } }, h("slot", { key: 'bae7788e0625279f4eb82129da1256fbb7f1c95b' }))));
    }
    get host() { return this; }
    static get style() { return TdsInlineTabStyle0; }
}, [1, "tds-inline-tab", {
        "disabled": [4],
        "selected": [32],
        "setSelected": [64]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["tds-inline-tab"];
    components.forEach(tagName => { switch (tagName) {
        case "tds-inline-tab":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TdsInlineTab$1);
            }
            break;
    } });
}
defineCustomElement$1();

const TdsInlineTab = TdsInlineTab$1;
const defineCustomElement = defineCustomElement$1;

export { TdsInlineTab, defineCustomElement };