@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 6.03 kB
JavaScript
import{r as o,c as t,h as e,H as r}from"./p-WTwLUJcM.js";import{D as a}from"./p-YDhuCIKq.js";import{c as i}from"./p-COrzvkrr.js";import{t as l}from"./p-BMjOCSrs.js";import{i as d}from"./p-GpUjqmUL.js";import"./p-Dkd2PDJ-.js";const n=class{constructor(e){o(this,e),this.checkedChange=t(this,"checkedChange",7),this.size=i.Small,this.disabled=!1,this.checked=!1,this.preventDefault=!1,this.withRadio=!1,this.customAttributes={},this.onCheck=()=>{this.disabled||this.checkedChange.emit(this.value)},this.onClick=o=>{this.preventDefault&&o.preventDefault(),this.clickThrottler(o)}}connectedCallback(){this.clickThrottler=l((()=>this.onCheck()),a)}render(){const o=!d(this.label),t=!d(this.icon);return e(r,{key:"88124e20a79f65038d8538a9430536fa7ded4625"},e("kv-tooltip",{key:"85bad479f27e72b9096c6e4bb6097ac5d209e772",text:this.tooltip},e("div",Object.assign({key:"3f52d7a5a93b8bbdba4f31a3ff579db1a974e4b0",class:{"toggle-button":!0,"toggle-button--checked":!!this.checked,"toggle-button--disabled":!!this.disabled,"toggle-button--only-icon":t&&!o,"toggle-button--with-radio":!!this.withRadio,[`toggle-button--size-${this.size}`]:!0},part:"toggle-button",onClick:this.onClick},this.customAttributes),this.withRadio&&e("kv-radio",{key:"f3e0cdc47d6f64d0bb2416feafb4746d174e0a60",size:i.Small,checked:this.checked,disabled:this.disabled}),t&&e("div",{key:"61b70309c17d54c206034a5ea404734a37d74e61",class:"toggle-button-icon",part:"toggle-icon"},e("kv-icon",{key:"2c4e747df55344d764c421f3adc7bc9940403943",name:this.icon})),o&&e("div",{key:"1bd9c5d966f450e673b74632531b83cfe63916d2",class:"toggle-button-label",part:"toggle-label"},this.label))))}};n.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{--button-height-large:var(--toggle-height-regular);--button-height-small:var(--toggle-height-compact);--button-width:100%;--button-padding-large:var(--spacing-none) var(--toggle-padding-x-default);--button-padding-small:var(--spacing-none) var(--toggle-padding-x-default);--button-icon-height-large:var(--toggle-icon-size-default);--button-icon-height-small:var(--toggle-icon-size-default);--button-icon-width-large:var(--toggle-icon-size-default);--button-icon-width-small:var(--toggle-icon-size-default);--text-color-default:var(--toggle-text-off);--text-color-active:var(--toggle-text-on);--text-color-disabled:var(--toggle-text-disabled);--text-color-disabled-active:var(--toggle-text-disabled);--icon-color-default:var(--toggle-icon-color-off);--icon-color-active:var(--toggle-icon-color-on);--icon-color-disabled:var(--toggle-icon-color-disabled);--icon-color-disabled-active:var(--toggle-icon-color-disabled);--background-color-default:var(--transparent);--background-color-active:var(--toggle-background-on);--background-color-disabled:var(--transparent);--background-color-disabled-active:var(--toggle-background-disabled);--border-size:var(--toggle-border-thickness-default);--border-left-size:var(--toggle-border-thickness-default);--border-right-size:var(--toggle-border-thickness-default);--border-color-default:var(--toggle-border-color-off);--border-color-active:var(--toggle-border-color-on);--border-color-disabled:var(--toggle-border-color-disabled);--border-color-disabled-active:var(--toggle-border-color-disabled);--border-radius-top-left:var(--toggle-radius-default);--border-radius-bottom-left:var(--toggle-radius-default);--border-radius-top-right:var(--toggle-radius-default);--border-radius-bottom-right:var(--toggle-radius-default)}kv-tooltip::part(content){width:var(--button-width)}.toggle-button{display:inline-flex;align-items:center;gap:var(--spacing-md);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:var(--border-size) solid var(--border-color-default);border-left-width:var(--border-left-size);border-right-width:var(--border-right-size);text-decoration:none;box-sizing:border-box;background:var(--background-color-default);color:var(--text-color-default);height:var(--button-height-large);padding:var(--button-padding-large);width:var(--button-width);font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;cursor:pointer;user-select:none;pointer-events:all}.toggle-button .toggle-button-icon kv-icon{--icon-color:var(--icon-color-default);--icon-width:var(--button-icon-width-large);--icon-height:var(--button-icon-height-large)}.toggle-button--checked{border-left-width:var(--border-size);border-right-width:var(--border-size);border-color: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(--icon-color-active)}.toggle-button--disabled{cursor:not-allowed;user-select:none;border-color:var(--border-color-disabled);background:var(--background-color-disabled);color:var(--text-color-disabled)}.toggle-button--disabled.toggle-button--checked{border-color: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(--icon-color-disabled)}.toggle-button--size-small{padding:var(--button-padding-small);height:var(--button-height-small)}.toggle-button--size-small.toggle-button--only-icon{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)}.toggle-button--only-icon{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)}.toggle-button--with-radio{gap:var(--spacing-none);padding-left:var(--spacing-md)}';export{n as kv_toggle_button}