@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 3.6 kB
JavaScript
import{r as t,c as a,h as i}from"./p-WTwLUJcM.js";import{s,l as e,u as r}from"./p-COrzvkrr.js";import{i as o}from"./p-GpUjqmUL.js";import"./p-Dkd2PDJ-.js";const n="600 16px Proxima Nova",d="400 14px Proxima Nova",l=async t=>{await document.fonts.load(n),await document.fonts.load(d);const a=document.createElement("canvas").getContext("2d");a.font=n;const i=document.createElement("canvas").getContext("2d");return i.font=d,t.reduce(((s,{tabKey:e,label:r,tagIcon:o,badge:n},d)=>{const l=d>0?t[d-1]:void 0,c=l?+s[l.tabKey].width+ +s[l.tabKey].left:0,h=o?24:0,b=Math.round(a.measureText(r).width),p=n?Math.round(i.measureText(n).width)+8+8:0;return s[e]={left:`${c}`,width:`${b+48+h+p}`},s}),{})},c=class{constructor(i){t(this,i),this.tabChange=a(this,"tabChange",7),this.tabs=[],this.type=s.Primary,this.tabsIndicatorConfig={},this.selectedTabIndicatorConfig={left:"0px",width:"0px"}}tabSelectionHandler(t){this.tabChange.emit(t.detail)}async tabsChangeHandler(){this.type===s.Primary&&(this.tabsIndicatorConfig=await l(this.tabs),this.applySelectedTabStyling())}async tabSelectionChangeHandler(){this.type!==s.Secondary&&(o(this.tabsIndicatorConfig)&&(this.tabsIndicatorConfig=await l(this.tabs)),this.applySelectedTabStyling())}async componentDidLoad(){this.type===s.Primary&&(this.tabsIndicatorConfig=await l(this.tabs),this.applySelectedTabStyling())}applySelectedTabStyling(){if(o(this.selectedTabKey)||o(this.tabsIndicatorConfig[this.selectedTabKey]))return;const{left:t,width:a}=this.tabsIndicatorConfig[this.selectedTabKey];this.selectedTabIndicatorConfig={left:`${t}px`,width:`${a}px`}}render(){return i("div",{key:"5d92049120e60dfb35381b6caece9453c3297c79",class:{[this.type]:!0}},this.tabs.map((t=>{var a,s;return i("kv-tab-item",{key:t.tabKey,tabKey:t.tabKey,label:t.label,icon:t.icon,disabled:t.disabled,selected:t.tabKey===this.selectedTabKey,type:this.type,customAttributes:t.customAttributes},(!o(t.badge)||!o(t.tagIcon))&&i("div",{slot:"right-slot"},!o(t.badge)&&i("kv-badge",{type:null!==(a=t.badgeType)&&void 0!==a?a:e.Secondary},t.badge),!o(t.tagIcon)&&i("kv-tag-status",{icon:t.tagIcon,state:null!==(s=t.tagState)&&void 0!==s?s:r.Unknown})))})),this.type===s.Primary&&i("div",{key:"0d8efc09b49d09b7d3c9da1810bb82f3a99eeb0d",class:"selected-tab-indicator",style:this.selectedTabIndicatorConfig}))}static get watchers(){return{tabs:["tabsChangeHandler"],type:["tabsChangeHandler"],selectedTabKey:["tabSelectionChangeHandler"]}}};c.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--tab-list-bg-color:transparent;--tab-list-indicator-color:var(--tab-primary-border-color-selected);--tab-list-divider-color:var(--tab-primary-border-color-default);--secondary-tab-list-direction:row;--secondary-items-align:center}:host .primary{position:relative;width:100%;display:flex;background-color:var(--tab-list-bg-color)}:host .primary::before{content:"";width:100%;position:absolute;bottom:0;border-bottom:var(--tab-primary-border-thickness-default) solid var(--tab-list-divider-color)}:host .primary .selected-tab-indicator{height:var(--tab-primary-border-thickness-strong);position:absolute;bottom:0;transition:all 0.3s ease-out;background:var(--tab-list-indicator-color)}:host .secondary{display:flex;gap:var(--spacing-xl);align-items:var(--secondary-items-align);flex-direction:var(--secondary-tab-list-direction)}:host kv-badge{--badge-height:var(--size-md)}:host kv-tag-status{--tag-status-icon-size:var(--size-md)}';export{c as kv_tab_navigation}