@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 5.16 kB
JavaScript
import{r as e,c as i,h as r,H as t}from"./p-D-JVwta2.js";import{D as o}from"./p-YDhuCIKq.js";import{a}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{t as n}from"./p-BlTxH6qj.js";import"./p-Dkd2PDJ-.js";import"./p-CqZa0G50.js";const l=class{constructor(r){e(this,r),this.checkedChange=i(this,"checkedChange",7),this.checked=!1,this.disabled=!1,this.label="",this.size=a.Large,this.isChecked=this.checked,this.isDisabled=this.disabled,this.onCheck=()=>{this.isChecked=!0,this.checkedChange.emit(this.isChecked)}}checkedChangeHandler(e){this.isChecked=e}disabledChangeHandler(e){this.isDisabled=e}handleKeyDown(e){"Space"===e.code&&this.onCheck()}connectedCallback(){this.clickThrottler=n((()=>this.onCheck()),o)}render(){return r(t,{key:"338fa86ff83838f12bb9432d38c49a85203d6e75"},r("div",{key:"e0202ca8e61085b9966b4b968375fd160c76d902",class:{"radio-container":!0,[`radio-container--size-${this.size}`]:!0,checked:this.isChecked,disabled:this.isDisabled},onClick:this.clickThrottler},r("div",{key:"13685d18745a5a770e2c1b8defa64fa35e4b16d0",tabIndex:this.isChecked||this.isDisabled?-1:0,class:"circle"},r("div",{key:"6873a32ff55be5c4af6813bda78c37cba892ef19",class:"checked-icon"})),this.label&&r("span",{key:"ea894a6023673e32f23d7387f628773f22b3bed3",class:"label"},this.label)))}static get watchers(){return{checked:["checkedChangeHandler"],disabled:["disabledChangeHandler"]}}};l.style={light:'@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--input-height-large:36px;--input-height-small:28px}.radio-container{display:flex;align-items:center;cursor:pointer;user-select:none;width:fit-content}.radio-container--size-large{height:var(--input-height-large)}.radio-container--size-small{height:var(--input-height-small)}.radio-container.disabled{pointer-events:none;opacity:0.5}.radio-container.disabled .circle{border-color:var(--radio-input-default-color)}.circle{height:14px;width:14px;border-radius:50%;border:1px solid var(--radio-input-default-color);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.circle:focus{outline:none;border-color:var(--radio-input-focused-color)}.circle .checked-icon{height:8px;width:8px;border-radius:50%;transition:all 0.2s ease-out}.checked .circle{border:1px solid var(--radio-input-checked-color)}.checked .circle .checked-icon{height:8px;width:8px;border-radius:50%;background:var(--radio-input-checked-color);transition:all 0.2s ease-out}.label{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--radio-label-text-color);margin-left:var(--kv-spacing-2x, 8px)}:host{--radio-label-text-color:var(--kv-text, #fff);--radio-input-checked-color:var(--kv-primary, #005cc7);--radio-input-focused-color:var(--kv-primary, #005cc7);--radio-input-default-color:var(--kv-neutral-3, #ddd)}',night:'@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--input-height-large:36px;--input-height-small:28px}.radio-container{display:flex;align-items:center;cursor:pointer;user-select:none;width:fit-content}.radio-container--size-large{height:var(--input-height-large)}.radio-container--size-small{height:var(--input-height-small)}.radio-container.disabled{pointer-events:none;opacity:0.5}.radio-container.disabled .circle{border-color:var(--radio-input-default-color)}.circle{height:14px;width:14px;border-radius:50%;border:1px solid var(--radio-input-default-color);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.circle:focus{outline:none;border-color:var(--radio-input-focused-color)}.circle .checked-icon{height:8px;width:8px;border-radius:50%;transition:all 0.2s ease-out}.checked .circle{border:1px solid var(--radio-input-checked-color)}.checked .circle .checked-icon{height:8px;width:8px;border-radius:50%;background:var(--radio-input-checked-color);transition:all 0.2s ease-out}.label{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--radio-label-text-color);margin-left:var(--kv-spacing-2x, 8px)}:host{--radio-label-text-color:var(--kv-neutral-2, #e5e5e5);--radio-input-checked-color:var(--kv-neutral-0, #fff);--radio-input-focused-color:var(--kv-neutral-5, #707070);--radio-input-default-color:var(--kv-neutral-0, #fff)}'};export{l as kv_radio}