@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 7.44 kB
JavaScript
import{r as a,c as t,h as o,H as e}from"./p-WTwLUJcM.js";import{D as r}from"./p-YDhuCIKq.js";import{s as n}from"./p-COrzvkrr.js";import{a as s}from"./p-DCOsOAOy.js";import{t as c}from"./p-BMjOCSrs.js";import{i}from"./p-GpUjqmUL.js";import"./p-Dkd2PDJ-.js";const d=class{constructor(o){a(this,o),this.tabSelected=t(this,"tabSelected",7),this.type=n.Primary,this.disabled=!1,this.selected=!1,this.customClass="",this.customAttributes={},this.tabClick=()=>{this.disabled||this.tabSelected.emit(this.tabKey)}}connectedCallback(){this.tabClickThrottler=c((()=>this.tabClick()),r)}render(){return o(e,{key:"c2557509de414c16f79fba72592b0033f9f39728"},o("div",Object.assign({key:"6652862bf2badff72b7d69ca32f12d43a21bbe93",class:Object.assign({"tab-item-container":!0,selected:this.selected,disabled:this.disabled,"only-icon":this.type===n.Secondary&&this.icon&&!this.label,[this.type]:!0},s(this.customClass)),onClick:this.tabClickThrottler,style:this.customStyle},this.customAttributes),this.icon&&this.type===n.Secondary&&o("kv-icon",{key:"8702da8518cd70fc952658a4ee6259018f06746c",name:this.icon}),this.label&&o("div",{key:"50075b698eabc70c4e553f98926195e8a228737c",class:"label"},this.label),o("slot",{key:"81a681b32cc218e136e9fe9e3b5748a6d99cd500",name:"right-slot"})))}};d.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-item-container{display:flex;align-items:center;width:fit-content;height:100%;user-select:none;white-space:nowrap;gap:var(--tab-secondary-gap-default);cursor:pointer}:host .tab-item-container.primary{padding:0 var(--tab-primary-padding-x-default)}:host .tab-item-container.primary .label{font-family:Proxima Nova;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0;color:var(--tab-primary-label-default)}:host .tab-item-container.primary.selected .label{color:var(--tab-primary-label-selected)}:host .tab-item-container.primary.disabled{cursor:not-allowed;pointer-events:none}:host .tab-item-container.primary.disabled .label{color:var(--tab-primary-label-disabled)}:host .tab-item-container.secondary{height:var(--tab-secondary-height-default);padding:var(--tab-secondary-padding-y-default) var(--tab-secondary-padding-x-default);box-sizing:border-box;border:var(--tab-secondary-border-thickness-default) solid var(--transparent);border-radius:var(--tab-secondary-radius-default);align-self:center}:host .tab-item-container.secondary kv-icon{--icon-color:var(--icon-tab-icon-color-default);--icon-width:var(--icon-tab-icon-size-default);--icon-height:var(--icon-tab-icon-size-default)}:host .tab-item-container.secondary .label{font-family:Proxima Nova;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0;color:var(--tab-secondary-label-default)}:host .tab-item-container.secondary:hover:not(.disabled){background:var(--tab-secondary-background-hover)}:host .tab-item-container.secondary:hover:not(.disabled) kv-icon{--icon-color:var(--icon-tab-icon-color-hover)}:host .tab-item-container.secondary:hover:not(.disabled) .label{color:var(--tab-secondary-label-hover)}:host .tab-item-container.secondary.selected:not(:hover):not(.disabled){background:var(--tab-secondary-background-selected);border-color:var(--tab-secondary-border-color-default)}:host .tab-item-container.secondary.selected:not(:hover):not(.disabled) kv-icon{--icon-color:var(--icon-tab-icon-color-selected)}:host .tab-item-container.secondary.selected:not(:hover):not(.disabled) .label{color:var(--tab-secondary-label-selected)}:host .tab-item-container.secondary.disabled{cursor:not-allowed;pointer-events:none;user-select:none;background:var(--tab-secondary-background-disabled);border-color:var(--tab-secondary-border-color-disabled)}:host .tab-item-container.secondary.disabled kv-icon{--icon-color:var(--icon-tab-icon-color-disabled)}:host .tab-item-container.secondary.disabled .label{color:var(--tab-secondary-label-disabled)}:host .tab-item-container.secondary.only-icon{height:var(--icon-tab-height-default);padding:var(--icon-tab-padding-y-default) var(--icon-tab-padding-x-default);border:var(--icon-tab-border-thickness-default) solid var(--transparent);border-radius:var(--icon-tab-radius-default)}:host .tab-item-container.secondary.only-icon:hover:not(.disabled){background:var(--icon-tab-background-hover)}:host .tab-item-container.secondary.only-icon.selected:not(:hover):not(.disabled){background:var(--icon-tab-background-selected);border-color:var(--icon-tab-border-color-default)}:host .tab-item-container.secondary.only-icon.disabled{background:var(--icon-tab-background-disabled);border-color:var(--icon-tab-border-color-disabled)}';const l=class{constructor(t){a(this,t)}render(){return o(e,{key:"7bae64f67b6da6b2964aa1e0b6f21e77d99f2499"},o("div",{key:"60c08c5b865f04e3235979b20cb866ec3d66b956",class:"tag-status"},o("div",{key:"436a030d498c89fc1eef85584398b2dbf5a0ba90",class:{icon:!0,[`icon--state-${this.state}`]:!0}},o("kv-icon",{key:"0c581ced88ff24c71469c0dcb4f5c133a9b76cb1",name:this.icon,exportparts:"icon"})),!i(this.label)&&o("div",{key:"7c73bfe2a3ec90b0fc8700696167f9015dcb9adc",class:"label",part:"label"},this.label)))}};l.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{--tag-status-label-color:var(--text-surface-neutral-secondary );--tag-status-icon-size:var(--size-md);--tag-status-icon-success-color:var(--icon-surface-status-success-default);--tag-status-icon-success-background-color:var(--background-surface-neutral-inverse);--tag-status-icon-error-color:var(--icon-surface-status-danger-default);--tag-status-icon-error-background-color:var(--background-surface-neutral-inverse);--tag-status-icon-unknown-color:var(--icon-surface-status-inactive-default);--tag-status-icon-unknown-background-color:transparent;--tag-status-icon-warning-color:var(--icon-surface-status-warning-default);--tag-status-icon-warning-background-color:transparent;--tag-status-icon-info-color:var(--icon-surface-status-info-default);--tag-status-icon-info-background-color:var(--background-surface-neutral-inverse);--tag-status-gap:var(--spacing-md)}.tag-status{display:flex;align-items:center;gap:var(--tag-status-gap)}.tag-status .label{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;color:var(--tag-status-label-color)}.tag-status .icon kv-icon{--icon-width:var(--tag-status-icon-size);--icon-height:var(--tag-status-icon-size)}.tag-status .icon--state-success kv-icon{--icon-color:var(--tag-status-icon-success-color);--icon-background-color:var(--tag-status-icon-success-background-color)}.tag-status .icon--state-error kv-icon{--icon-color:var(--tag-status-icon-error-color);--icon-background-color:var(--tag-status-icon-error-background-color)}.tag-status .icon--state-unknown kv-icon{--icon-color:var(--tag-status-icon-unknown-color);--icon-background-color:var(--tag-status-icon-unknown-background-color)}.tag-status .icon--state-warning kv-icon{--icon-color:var(--tag-status-icon-warning-color);--icon-background-color:var(--tag-status-icon-warning-background-color)}.tag-status .icon--state-info kv-icon{--icon-color:var(--tag-status-icon-info-color);--icon-background-color:var(--tag-status-icon-info-background-color)}';export{d as kv_tab_item,l as kv_tag_status}