@kelvininc/ui-components
Version:
Kelvin UI Components
69 lines (65 loc) • 4.35 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { a as EComponentSize } from './p-BRgmvbuh.js';
import { b as EIconName } from './p-DBphUUgi.js';
import { D as DEFAULT_THROTTLE_WAIT } from './p-YDhuCIKq.js';
import { d as defineCustomElement$1 } from './p-B41PGLQm.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}}:host{--off-background-color:var(--kv-neutral-5, #707070);--on-background-color:var(--kv-primary, #005cc7);--sqr-background-color:var(--kv-primary-contrast, #fff);display:flex;align-items:center;gap:var(--kv-spacing-2x, 8px)}.switch-button{display:flex;box-sizing:border-box;cursor:pointer;border-radius:4px;background-color:var(--off-background-color);transition:background-color 0.3s ease-out}.switch-button--disabled{cursor:not-allowed;user-select:none}.switch-button--on{background-color:var(--on-background-color)}.switch-button--on .icon-square kv-icon::part(icon){fill:var(--on-background-color)}.switch-button--large{height:20px;width:40px;padding:2px 2px}.switch-button--large .icon-square{height:16px;width:16px}.switch-button--large .icon-square kv-icon{--icon-width:12px;--icon-height:12px}.switch-button--large.switch-button--on .icon-square{transform:translateX(20px)}.switch-button--small{height:16px;width:32px;padding:2.5px 2.5px}.switch-button--small .icon-square{height:11px;width:11px}.switch-button--small .icon-square kv-icon{--icon-width:8px;--icon-height:8px}.switch-button--small.switch-button--on .icon-square{transform:translateX(16px)}.icon-square{display:inline-flex;align-items:center;justify-content:center;transition:transform 0.3s ease-out;border-radius:2px;background-color:var(--sqr-background-color);font-size:0}.icon-square kv-icon{--icon-color:var(--off-background-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() {
const iconName = this.disabled ? EIconName.Lock : EIconName.DoneAll;
return (h(Host, { key: '34f0a04060c25d556253bdb0a31350180fdcb560' }, h("slot", { key: 'adfffd71bb675a3e50e6ce765308bdb4e9a716ce', name: "left-slot" }), h("div", { key: '8d4739d60a8c1157be500384cdc1cd383df46de6', 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: '9d07c60351217da43c60dec6c8d6a03e3d70c419', class: "icon-square", part: "icon-square" }, h("kv-icon", { key: 'f901cb72307f1137e5dff79497ef020d7d9bb7dd', name: iconName, part: "icon-svg" }))), h("slot", { key: '1a3eddf7f7ea2cb25e13c37f07f75d4898fe3250', name: "right-slot" })));
}
static get style() { return switchButtonCss; }
}, [1, "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 };