@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 3.21 kB
JavaScript
import{r as t,c as i,h as o,H as a}from"./p-D-JVwta2.js";import{a as s}from"./p-DzZLIMy0.js";import"./p-DwRzddFC.js";import"./p-DVds6a5Z.js";import"./p-CojoW2Y2.js";import"./p-SVedE_O8.js";import"./p-BcMhjKoS.js";import"./p-Do0EyoO8.js";import"./p-CBuzk8fR.js";import"./p-DHk26cGe.js";import"./p-7ioMFMb5.js";import{i as e}from"./p-BA_npyc9.js";import"./p-CiDQ1Z66.js";import"./p-DfPM2t43.js";import"./p-Dkd2PDJ-.js";const r={[s.Small]:"normal normal 600 12px proxima-nova",[s.Large]:"normal normal 600 16px proxima-nova"},n=(t,i,o)=>{const a=document.createElement("canvas"),e=r[o],n=a.getContext("2d");return n.font=e,t.reduce(((a,{tabKey:e,label:r,icon:l},d)=>{var h;const p=d>0?t[d-1]:void 0,c=p?+a[p.tabKey].width+ +a[p.tabKey].left:0,b=(null===(h=i[e])||void 0===h?void 0:h.active)?14:0,m=l?20:0,v=o===s.Small?32:0,f=Math.ceil(n.measureText(r).width);return a[e]={left:`${c}`,width:`${f+48+b+v+m}`},a}),{})},l=class{constructor(o){t(this,o),this.tabChange=i(this,"tabChange",7),this.tabs=[],this.notifications={},this.size=s.Large,this.tabsIndicatorConfig={},this.selectedTabIndicatorConfig={left:"0px",width:"0px"}}tabSelectionHandler(t){this.tabChange.emit(t.detail)}tabsChangeHandler(){this.tabsIndicatorConfig=n(this.tabs,this.notifications,this.size),this.applySelectedTabStyling()}tabSelectionChangeHandler(){e(this.tabsIndicatorConfig)&&(this.tabsIndicatorConfig=n(this.tabs,this.notifications,this.size)),this.applySelectedTabStyling()}componentDidLoad(){this.tabsIndicatorConfig=n(this.tabs,this.notifications,this.size),this.applySelectedTabStyling()}applySelectedTabStyling(){if(e(this.selectedTabKey)||e(this.tabsIndicatorConfig[this.selectedTabKey]))return;const{left:t,width:i}=this.tabsIndicatorConfig[this.selectedTabKey];this.selectedTabIndicatorConfig={left:`${t}px`,width:`${i}px`}}render(){return o(a,{key:"d8ab9ffa3148c8b87a67dc824e37b42f7c91d6fc"},this.tabs.map((t=>{var i,a;return o("kv-tab-item",{key:t.tabKey,tabKey:t.tabKey,label:t.label,disabled:t.disabled,selected:t.tabKey===this.selectedTabKey,size:this.size,hasNotification:null===(i=this.notifications[t.tabKey])||void 0===i?void 0:i.active,notificationColor:null===(a=this.notifications[t.tabKey])||void 0===a?void 0:a.color,icon:t.icon,exportparts:"icon"})})),o("div",{key:"193dd35a3d8d29ecf5638dd64e0ee3f19d84a9a6",class:"selected-tab-indicator",style:this.selectedTabIndicatorConfig}))}static get watchers(){return{tabs:["tabsChangeHandler"],size:["tabsChangeHandler"],notifications:["tabsChangeHandler"],selectedTabKey:["tabSelectionChangeHandler"]}}};l.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--tab-list-bg-color:"transparent";--tab-list-indicator-color:var(--kv-primary, #005cc7);--tab-list-divider-color:var(--kv-neutral-5, #707070);position:relative;height:34px;width:100%;display:flex;background-color:var(--tab-list-bg-color)}:host::before{content:"";width:100%;position:absolute;bottom:0;border-bottom:1px solid var(--tab-list-divider-color)}:host .selected-tab-indicator{height:2px;position:absolute;bottom:0;transition:all 0.3s ease-out;background:var(--tab-list-indicator-color)}';export{l as kv_tab_navigation}