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

Tegel Design System

import{t,p as e,H as o,h as i,a as s}from"./index.js";const n=e(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.disabled=!1,this.selected=!1}async setSelected(t){this.selected=t}connectedCallback(){const t=this.host.querySelectorAll("button, a");for(let e=0;e<t.length;e++){const o=t[e];o.getAttribute("aria-controls")||console.warn("Tegel inline-tab component: Interactive elements should have aria-controls attribute to link the tab to its corresponding panel"),"tab"!==o.getAttribute("role")&&console.warn('Tegel inline-tab component: Interactive elements should have attribute role="tab"'),this.disabled?o.setAttribute("aria-disabled","true"):o.removeAttribute("aria-disabled")}}render(){return i(s,{key:"f1dec66ce92e3d2913941faedc3fe0f9d4e0ce17","aria-selected":this.selected},i("div",{key:"55335b61d72e1b20d6fddddc40f58c966c827f41",class:{"inline-tab-item":!0,selected:this.selected,disabled:this.disabled}},i("slot",{key:"3ff73b16df1a3a97924ced2f61ff72c92c92835c"})))}get host(){return this}static get style(){return':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-inline-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 0}:host ::slotted(*:focus-visible)::before{content:"";position:absolute;left:0;right:0;top:3px;bottom:3px;outline:2px solid var(--tds-blue-400);outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .inline-tab-item:not(.selected)::after{width:0%;transition:width 0.15s ease-in-out 0s}:host .inline-tab-item{position:relative}:host .inline-tab-item:hover{cursor:pointer}:host .inline-tab-item:hover ::slotted(*){color:var(--tds-inline-tabs-tab-color-hover)}: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 ::slotted(*){color:var(--tds-inline-tabs-tab-color-disabled)}:host .disabled::after{content:none}:host .disabled ::slotted(*:hover){cursor:not-allowed;color:var(--tds-inline-tabs-tab-color-disabled)}:host .disabled ::slotted(*:focus-visible){outline:none}:host(.last){margin-right:32px}'}},[257,"tds-inline-tab",{disabled:[4],selected:[32],setSelected:[64]}]);function a(){"undefined"!=typeof customElements&&["tds-inline-tab"].forEach((e=>{"tds-inline-tab"===e&&(customElements.get(t(e))||customElements.define(t(e),n))}))}a();const l=n,r=a;export{l as TdsInlineTab,r as defineCustomElement}