@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 3.87 kB
JavaScript
import{r as i,c as a,h as r,H as e}from"./p-WTwLUJcM.js";import{D as o}from"./p-YDhuCIKq.js";import{c as t,o as n}from"./p-COrzvkrr.js";import{t as c}from"./p-BMjOCSrs.js";import"./p-Dkd2PDJ-.js";const l=class{constructor(r){i(this,r),this.checkedChange=a(this,"checkedChange",7),this.label="",this.size=t.Small,this.checked=!1,this.disabled=!1,this.onCheck=i=>{this.disabled||this.checkedChange.emit(i)}}handleKeyDown(i){"Space"===i.code&&this.onCheck(i)}connectedCallback(){this.clickThrottler=c((i=>this.onCheck(i)),o)}render(){return r(e,{key:"c066f1e9fb31b6b32c59609fc8912cec362e5d79"},r("div",{key:"0851054649e4553fc890bc695d444225d28271d3",class:{"radio-container":!0,[`radio-container--size-${this.size}`]:!0,disabled:this.disabled},onClick:this.clickThrottler},r("div",{key:"132e9c8a428ced35038a48932cd3743a942068db",class:"circle",tabIndex:this.disabled?-1:0},r("slot",{key:"8369e51ed3070e343dc9f4a44f8ba2c3f6cf24f3",name:"action-icon"},r("kv-icon",{key:"bc2543805261d450e93ff253393255a3d2408c26",name:this.checked?n.RadioBtnSelected:n.RadioBtn,part:"icon"}))),this.label&&r("span",{key:"61b4eb00b2829ee2c67056d7397e4871a403aaae",part:"label",class:"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{--input-height-large:var(--input-height-regular);--input-height-small:var(--input-height-compact);--input-gap-large:var(--spacing-none);--input-gap-small:var(--spacing-xs);--input-label-color:var(--text-surface-neutral-secondary);--radio-input-large:var(--size-xl);--radio-input-small:var(--size-default);--radio-input-default-color:var(--icon-persistent-indicator-on);--radio-input-disabled-color:var(--icon-surface-neutral-disabled);--radio-background-default-color:var(--transparent);--radio-background-hover-color:var(--overlay-interactive-opacity-10);--radio-background-pressed-color:var(--overlay-interactive-opacity-16);--radio-background-disabled-color:var(--transparent)}.radio-container{display:flex;align-items:center;width:fit-content;cursor:pointer;user-select:none;pointer-events:all}.radio-container--size-large{height:var(--input-height-large);gap:var(--input-gap-large)}.radio-container--size-large .circle{height:var(--input-height-large);width:var(--input-height-large)}.radio-container--size-large .circle ::slotted(kv-icon),.radio-container--size-large .circle kv-icon{--icon-width:var(--radio-input-large);--icon-height:var(--radio-input-large)}.radio-container--size-small{height:var(--input-height-small);gap:var(--input-gap-small)}.radio-container--size-small .circle{height:var(--input-height-small);width:var(--input-height-small)}.radio-container--size-small .circle ::slotted(kv-icon),.radio-container--size-small .circle kv-icon{--icon-width:var(--radio-input-small);--icon-height:var(--radio-input-small)}.radio-container.disabled{cursor:not-allowed;user-select:none}.radio-container.disabled .circle{background-color:var(--radio-background-disabled-color)}.radio-container.disabled .circle ::slotted(kv-icon),.radio-container.disabled .circle kv-icon{--icon-color:var(--radio-input-disabled-color)}.radio-container.disabled .label{color:var(--radio-input-disabled-color)}.circle{display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);outline:none}.circle:hover{background-color:var(--radio-background-hover-color)}.circle:focus,.circle:active{background-color:var(--radio-background-pressed-color)}.circle ::slotted(kv-icon),.circle kv-icon{--icon-color:var(--radio-input-default-color);transition:all 0.2s ease-out}.label{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--input-label-color)}';export{l as kv_radio}