@scania/tegel
Version:
Tegel Design System
1 lines • 3.84 kB
JavaScript
import{r as t,h as e,H as o,a as s}from"./p-9xxNGlso.js";import{d}from"./p-CLF3diNe.js";const r=class{constructor(e){t(this,e)}render(){return e(o,{key:"065394c82cbfb0b40ee971c5cebc52bcfe85b526"},e("div",{key:"7028fa75d5be79c1036abdb5bd4f0f6d94718061",class:"item"},e("slot",{key:"79a30696b9001f8c3f2304d0b73b5f4caa6a9a56"})))}};r.style=":host{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-header-nav-item-color)}:host .item{all:unset;box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-width:var(--tds-header-height);height:var(--tds-header-height);margin:0}:host .item *{box-sizing:border-box}:host slot{white-space:nowrap}:host ::slotted(svg){font-size:20px}";const i=class{constructor(e){t(this,e),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 r=s[0];if(r){const o=d(r,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 e(o,{key:"94dfaa314f682dee3810cf876f11d3a60ff44cec"},e("tds-core-header-item",{key:"dafce7d3bd855dcb815cd92648d9a9765a9365e0",class:{"component-active":this.active,"component-selected":this.selected}},e("slot",{key:"a0cfa89d9744fd2a2012c34dc3cb8c1c974029a6"})))}get host(){return s(this)}};i.style=":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)}";export{r as tds_core_header_item,i as tds_header_item}