@scania/tegel
Version:
Tegel Design System
1 lines • 3.59 kB
JavaScript
import{t,p as e,H as o,h as s,a as d}from"./index.js";import{d as r}from"./p-CLF3diNe.js";import{d as i}from"./p-CbSJY3jI.js";const a=e(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.active=!1,this.selected=!1}updateSlotted(t,e){var o;const s=null===(o=this.slotEl)||void 0===o?void 0:o.assignedElements({flatten:!0});if(!(null==s?void 0:s.length))return;const d=s[0];if(d){const o=r(d,t);o&&e(o)}}updateSlottedElements(){this.slotEl&&(this.updateSlotted((t=>"tds-icon"===t.tagName.toLowerCase()||"svg"===t.tagName.toLowerCase()),(t=>t.classList.add("__tds-header-item-icon"))),this.updateSlotted((t=>"img"===t.tagName.toLowerCase()),(t=>t.classList.add("__tds-header-item-image"))))}updateOrder(){this.host.style.order="end"===this.host.getAttribute("order")?"1":"0"}componentDidLoad(){var t,e;this.slotEl=null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector("slot"),this.updateSlottedElements(),null===(e=this.slotEl)||void 0===e||e.addEventListener("slotchange",this.updateSlottedElements),this.updateOrder(),this.mutationObserver=new MutationObserver((t=>{t.forEach((t=>{"attributes"===t.type&&"order"===t.attributeName&&this.updateOrder()}))})),this.mutationObserver.observe(this.host,{attributes:!0,attributeFilter:["order"]})}disconnectedCallback(){this.mutationObserver&&this.mutationObserver.disconnect()}render(){return s(d,{key:"94dfaa314f682dee3810cf876f11d3a60ff44cec"},s("tds-core-header-item",{key:"dafce7d3bd855dcb815cd92648d9a9765a9365e0",class:{"component-active":this.active,"component-selected":this.selected}},s("slot",{key:"a0cfa89d9744fd2a2012c34dc3cb8c1c974029a6"})))}get host(){return this}static get style(){return":host ::slotted(button),:host ::slotted(a){all:unset;box-sizing:border-box;background-color:var(--tds-header-background);border-right:1px solid var(--tds-header--basic-element-border);width:100%;height:100%;cursor:pointer;padding:0 24px;display:flex;align-items:center;gap:8px}:host ::slotted(button) *,:host ::slotted(a) *{box-sizing:border-box}:host ::slotted(button:hover),:host ::slotted(a:hover){background-color:var(--tds-header-item-hover);box-shadow:inset 0 -2px 0 0 var(--tds-header-item-border-hover)}:host ::slotted(button:active),:host ::slotted(a:active){background-color:var(--tds-header-item-active);box-shadow:inset 0 -2px 0 0 var(--tds-header-item-border-active)}:host ::slotted(button:focus-visible),:host ::slotted(a:focus-visible){border:none;margin-right:1px;outline:2px solid var(--tds-focus-outline-color);box-shadow:inset 0 0 0 3px var(--tds-white);outline-offset:-2px}:host .component-active ::slotted(button),:host .component-active ::slotted(a){background-color:var(--tds-header--basic-element-background-open);color:var(--tds-header-nav-item-dropdown-opened-color);border-color:var(--tds-header--basic-element-border-open)}:host .component-selected:not(.component-active) ::slotted(button),:host .component-selected:not(.component-active) ::slotted(a){box-shadow:inset 0 -4px 0 0 var(--tds-header-item-border-hover)}:host .component-selected:not(.component-active) ::slotted(button:focus-visible),:host .component-selected:not(.component-active) ::slotted(a:focus-visible){box-shadow:inset 0 0 0 3px var(--tds-white)}"}},[257,"tds-header-item",{active:[4],selected:[4]}]);function n(){"undefined"!=typeof customElements&&["tds-header-item","tds-core-header-item"].forEach((e=>{switch(e){case"tds-header-item":customElements.get(t(e))||customElements.define(t(e),a);break;case"tds-core-header-item":customElements.get(t(e))||i()}}))}n();export{a as T,n as d}