@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 5.64 kB
JavaScript
import{r as t,c as o,h as r,H as e}from"./p-D-JVwta2.js";import{D as a}from"./p-YDhuCIKq.js";import{a as i}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{i as l}from"./p-BA_npyc9.js";import"./p-Dkd2PDJ-.js";import"./p-CqZa0G50.js";import"./p-CiDQ1Z66.js";import"./p-DfPM2t43.js";const d=class{constructor(r){t(this,r),this.checkedChange=o(this,"checkedChange",7),this.size=i.Small,this.disabled=!1,this.checked=!1,this.preventDefault=!1,this.withRadio=!1,this.onCheck=()=>{this.disabled||this.checkedChange.emit(this.value)},this.onClick=t=>{this.preventDefault&&t.preventDefault(),this.clickThrottler(t)}}connectedCallback(){this.clickThrottler=n((()=>this.onCheck()),a)}render(){const t=!l(this.label),o=!l(this.icon);return r(e,{key:"d61477b126323cd9a78efe0989fd4be103cf03e0"},r("div",{key:"be95927d3fcde890f8986e852c40d370d3b32f56",class:{"toggle-button":!0,"toggle-button--checked":this.checked,"toggle-button--disabled":this.disabled,"toggle-button--only-icon":o&&!t,[`toggle-button--size-${this.size}`]:!0},part:"toggle-button",onClick:this.onClick},this.withRadio&&r("kv-radio",{key:"0b95f3dfcef736bd3fc0c712f93bc163fb6353df",checked:this.checked}),o&&r("div",{key:"e2d34192acef997f4e5b5f022d44289474f3a8e0",class:"toggle-button-icon",part:"toggle-icon"},r("kv-icon",{key:"e2c1993eb9419adbffc4bf22c03f69e9ab95828f",name:this.icon})),t&&r("div",{key:"85bc10437e873158650dded6de7abfe7d6f28360",class:"toggle-button-label",part:"toggle-label"},this.label)))}};d.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--button-height-large:36px;--button-height-small:28px;--button-width:100%;--button-padding-large:var(--kv-spacing-2x, 8px) var(--kv-spacing-4x, 16px);--button-padding-small:var(--kv-spacing, 4px) var(--kv-spacing-3x, 12px);--button-icon-height-large:24px;--button-icon-height-small:16px;--button-icon-width-large:24px;--button-icon-width-small:16px;--text-color-default:var(--kv-neutral-2, #e5e5e5);--text-color-active:var(--kv-neutral-0, #fff);--text-color-disabled:var(--kv-neutral-5, #707070);--text-color-disabled-active:var(--kv-neutral-5, #707070);--background-color-default:var(--kv-neutral-6, #3f3f3f);--background-color-active:var(--kv-neutral-6, #3f3f3f);--background-color-disabled:var(--kv-neutral-7, #2a2a2a);--background-color-disabled-active:var(--kv-neutral-7, #2a2a2a);--border-color-default:var(--kv-neutral-6, #3f3f3f);--border-color-active:var(--kv-neutral-0, #fff);--border-color-disabled:var(--kv-neutral-6, #3f3f3f);--border-color-disabled-active:var(--kv-neutral-6, #3f3f3f);--border-radius-top-left:2px;--border-radius-bottom-left:2px;--border-radius-top-right:2px;--border-radius-bottom-right:2px}.toggle-button{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;position:relative;user-select:none;text-decoration:none;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--kv-spacing-2x, 8px);border-top-left-radius:var(--border-radius-top-left);border-bottom-left-radius:var(--border-radius-bottom-left);border-top-right-radius:var(--border-radius-top-right);border-bottom-right-radius:var(--border-radius-bottom-right);border:1px solid var(--border-color-default);background:var(--background-color-default);color:var(--text-color-default);height:var(--button-height-large);padding:var(--button-padding-large);width:var(--button-width)}.toggle-button .toggle-button-icon kv-icon{--icon-color:var(--text-color-default);--icon-width:16px;--icon-height:16px;width:16px;height:16px}.toggle-button--checked{border:1px solid var(--border-color-active);background:var(--background-color-active);color:var(--text-color-active)}.toggle-button--checked .toggle-button-icon kv-icon{--icon-color:var(--text-color-active)}.toggle-button--disabled{cursor:not-allowed;pointer-events:none;border:1px solid var(--border-color-disabled);background:var(--background-color-disabled);color:var(--text-color-disabled)}.toggle-button--disabled.toggle-button--checked{border:1px solid var(--border-color-disabled-active);background:var(--background-color-disabled-active);color:var(--text-color-disabled-active)}.toggle-button--disabled .toggle-button-icon kv-icon{--icon-color:var(--text-color-disabled)}.toggle-button--size-small{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;padding:var(--button-padding-small);height:var(--button-height-small)}.toggle-button--size-small.toggle-button--only-icon{width:var(--button-height-small);justify-content:center}.toggle-button--size-small.toggle-button--only-icon .toggle-button-icon kv-icon{--icon-width:var(--button-icon-width-small);--icon-height:var(--button-icon-height-small);width:var(--button-icon-width-small);height:var(--button-icon-height-small)}.toggle-button--only-icon{padding:var(--kv-spacing, 4px);width:var(--button-height-large);justify-content:center}.toggle-button--only-icon .toggle-button-icon kv-icon{--icon-width:var(--button-icon-width-large);--icon-height:var(--button-icon-height-large);width:var(--button-icon-width-large);height:var(--button-icon-height-large)}';export{d as kv_toggle_button}