@kelvininc/ui-components
Version:
Kelvin UI Components
66 lines (62 loc) • 5.45 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, e as EComponentSize, K as h, t as EIconName, L as Host } from './p-BP5CxQcH.js';
import { D as DEFAULT_THROTTLE_WAIT } from './p-YDhuCIKq.js';
import { d as defineCustomElement$1 } from './p-DQ7v6WT-.js';
import { t as throttle } from './p-BlTxH6qj.js';
const switchButtonCss = "@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{--off-background-color:var(--switch-background-off);--on-background-color:var(--switch-background-on);--disabled-background-color:var(--switch-background-disabled);--switch-icon-color:var(--switch-icon-color-default);--switch-disabled-icon-color:var(--switch-icon-color-disabled);--switch-height-large:var(--switch-height-regular);--switch-height-small:var(--switch-height-compact);--switch-width-large:var(--switch-width-regular);--switch-width-small:var(--switch-width-compact);--switch-icon-size-large:var(--switch-icon-size-regular);--switch-icon-size-small:var(--switch-icon-size-compact);--switch-padding-large:var(--spacing-2xs);--switch-padding-small:2.5px;display:flex;align-items:center;gap:var(--spacing-md)}.switch-button{display:flex;box-sizing:border-box;border-radius:var(--switch-radius-default);background-color:var(--off-background-color);transition:background-color 0.3s ease-out;cursor:pointer}.switch-button--disabled{background-color:var(--disabled-background-color);cursor:not-allowed;user-select:none}.switch-button--disabled .icon-square kv-icon{--icon-color:var(--switch-disabled-icon-color)}.switch-button--on:not(.switch-button--disabled){background-color:var(--on-background-color)}.switch-button--large{height:var(--switch-height-large);width:var(--switch-width-large)}.switch-button--large .icon-square{width:var(--switch-icon-size-large);height:var(--switch-icon-size-large);padding:var(--switch-padding-large)}.switch-button--large .icon-square kv-icon{--icon-width:calc(var(--switch-icon-size-large) - var(--switch-padding-large) * 2);--icon-height:calc(var(--switch-icon-size-large) - var(--switch-padding-large) * 2)}.switch-button--large.switch-button--on .icon-square{transform:translateX(calc(var(--switch-width-large) - var(--switch-icon-size-large)))}.switch-button--small{height:var(--switch-height-small);width:var(--switch-width-small)}.switch-button--small .icon-square{width:var(--switch-icon-size-small);height:var(--switch-icon-size-small);padding:var(--switch-padding-small)}.switch-button--small .icon-square kv-icon{--icon-width:calc(var(--switch-icon-size-small) - var(--switch-padding-small) * 2);--icon-height:calc(var(--switch-icon-size-small) - var(--switch-padding-small) * 2)}.switch-button--small.switch-button--on .icon-square{transform:translateX(calc(var(--switch-width-small) - var(--switch-icon-size-small)))}.icon-square{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:transform 0.3s ease-out}.icon-square kv-icon{--icon-color:var(--switch-icon-color)}";
const KvSwitchButton = /*@__PURE__*/ proxyCustomElement(class KvSwitchButton extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.switchChange = createEvent(this, "switchChange", 7);
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.checked = false;
/** @inheritdoc */
this.size = EComponentSize.Large;
}
onStateChange() {
if (this.disabled) {
return;
}
this.checked = !this.checked;
this.switchChange.emit(this.checked);
}
connectedCallback() {
this.onSwitchClick = throttle(() => this.onStateChange(), DEFAULT_THROTTLE_WAIT);
}
render() {
return (h(Host, { key: '7736911aa53d3e8763a7dd0a71fd72edf34e9d55' }, h("slot", { key: '667c99e44b9a358354ab436cef71788043062769', name: "left-slot" }), h("div", { key: '20ccf041d5282a6f6a07b509e9e3e57ab7c4f898', class: {
'switch-button': true,
'switch-button--disabled': this.disabled,
'switch-button--on': this.checked,
[`switch-button--${this.size}`]: true
}, part: "button", onClick: this.onSwitchClick }, h("div", { key: '7e9206b97182a94f1fb74b490ee4e06396e6db33', class: "icon-square", part: "icon-square" }, h("kv-icon", { key: '6130a01087284d9fc14c8954d35d54d019f9d2d0', name: EIconName.CheckState, part: "icon-svg" }))), h("slot", { key: '17367d117ac247c86990d4f6ef59c2dafa114ec0', name: "right-slot" })));
}
static get style() { return switchButtonCss; }
}, [257, "kv-switch-button", {
"disabled": [516],
"checked": [1540],
"size": [1]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-switch-button", "kv-icon"];
components.forEach(tagName => { switch (tagName) {
case "kv-switch-button":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvSwitchButton);
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvSwitchButton as K, defineCustomElement as d };