@scania/tegel/dist/cjs/tds-folder-tab.cjs.entry.js

Tegel Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-ca8040ad.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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        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 (index.h(index.Host, { key: '19a42f7143a8f32130642bd50dd6817f871fdf20', "aria-selected": this.selected }, index.h("div", { key: '51bef3bebff5e13d7c949529919865780d8b33de', class: {
                selected: this.selected,
                disabled: this.disabled,
            }, style: { width: `${this.tabWidth}px` } }, index.h("slot", { key: '2b661d3518f047f7bd0e50a121987eb62c5d42e8' }))));
    }
    get host() { return index.getElement(this); }
};
TdsFolderTab.style = TdsFolderTabStyle0;

exports.tds_folder_tab = TdsFolderTab;