@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 3.22 kB
JavaScript
import{r as t,c as i,h as e,H as a}from"./p-D-JVwta2.js";import{D as o}from"./p-YDhuCIKq.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{g as r}from"./p-DKOxy79t.js";import{t as n}from"./p-BlTxH6qj.js";import"./p-Dkd2PDJ-.js";import"./p-CqZa0G50.js";const c=class{constructor(e){t(this,e),this.tabSelected=i(this,"tabSelected",7),this.disabled=!1,this.selected=!1,this.hasNotification=!1,this.notificationColor="",this.size=s.Large,this.customClass="",this.tabClick=()=>{this.tabSelected.emit(this.tabKey)}}connectedCallback(){this.tabClickThrottler=n((()=>this.tabClick()),o)}render(){const t={backgroundColor:this.notificationColor};return e(a,{key:"cc47d84b83391d75d45e1502db22c9600254fc29"},e("div",{key:"a5dccdf93379670adb4b631fd7ab09f581f2ec9b",class:Object.assign({"tab-item-container":!0,selected:this.selected,disabled:this.disabled,"has-notification":this.hasNotification,small:this.size===s.Small},r(this.customClass)),onClick:this.tabClickThrottler,style:this.customStyle},e("div",{key:"b9f7701a21d2350b578c5e3d71d52c19fba61324",class:"label"},this.label),this.icon&&e("div",{key:"b9bf233b90ae0996f715789fda44277a39291303",class:"icon"},e("kv-icon",{key:"d6d4339e64bb321aacf230d0333bd74ab5c8ab6b",name:this.icon,part:"icon"})),this.hasNotification&&e("div",{key:"15b656346cefc42ccb2ecc2918b9e759b677a748",class:"notification-dot",style:t})))}};c.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{height:inherit}:host .tab-item-container{height:100%;display:flex;align-items:center;padding:0 var(--kv-spacing-6x, 24px);user-select:none;white-space:nowrap;cursor:pointer}:host .tab-item-container.selected .label{color:var(--kv-text, #fff)}:host .tab-item-container.disabled{cursor:not-allowed;pointer-events:none}:host .tab-item-container.disabled .label{color:var(--kv-text-step-5, #707070)}:host .tab-item-container .label{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:16px;font-weight:600;font-stretch:normal;font-style:normal;line-height:24px;letter-spacing:normal;text-transform:none;color:var(--kv-text-step-4, #bebebe)}:host .tab-item-container.small{margin:0 var(--kv-spacing-4x, 16px)}:host .tab-item-container.small .label{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:12px;font-weight:600;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none}:host .tab-item-container .icon{margin-left:var(--kv-spacing, 4px)}:host .tab-item-container .icon kv-icon{--icon-width:var(--tab-item-icon-size, 16px);--icon-height:var(--tab-item-icon-size, 16px);--icon-color:var(--tab-item-icon-color, var(--kv-text, #fff))}:host .tab-item-container .notification-dot{width:6px;height:6px;border-radius:50%;margin-left:var(--kv-spacing-2x, 8px);background-color:var(--kv-error, #e11900);animation:circleGrow 0.25s}@keyframes circleGrow{from{transform:scale(0)}to{transform:scale(1)}}';export{c as kv_tab_item}