@kelvininc/ui-components
Version:
Kelvin UI Components
112 lines (108 loc) • 9.06 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, e as EComponentSize, K as h, L as Host } from './p-BP5CxQcH.js';
import { D as DEFAULT_THROTTLE_WAIT } from './p-YDhuCIKq.js';
import { d as defineCustomElement$5 } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$4 } from './p-CgqRIP0M.js';
import { d as defineCustomElement$3 } from './p-s9JMr6UQ.js';
import { d as defineCustomElement$2 } from './p-DdZmrasC.js';
import { d as defineCustomElement$1 } from './p-DFBbXuLI.js';
import { t as throttle } from './p-BlTxH6qj.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
const toggleButtonCss = "@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)}";
const KvToggleButton = /*@__PURE__*/ proxyCustomElement(class KvToggleButton extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.checkedChange = createEvent(this, "checkedChange", 7);
/** @inheritdoc */
this.size = EComponentSize.Small;
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.checked = false;
/** @inheritdoc */
this.preventDefault = false;
/** @inheritdoc */
this.withRadio = false;
/** @inheritdoc */
this.customAttributes = {};
this.onCheck = () => {
if (!this.disabled) {
this.checkedChange.emit(this.value);
}
};
this.onClick = (event) => {
if (this.preventDefault) {
event.preventDefault();
}
this.clickThrottler(event);
};
}
connectedCallback() {
this.clickThrottler = throttle(() => this.onCheck(), DEFAULT_THROTTLE_WAIT);
}
render() {
const hasLabel = !isEmpty(this.label);
const hasIcon = !isEmpty(this.icon);
return (h(Host, { key: '88124e20a79f65038d8538a9430536fa7ded4625' }, h("kv-tooltip", { key: '85bad479f27e72b9096c6e4bb6097ac5d209e772', text: this.tooltip }, h("div", Object.assign({ key: '3f52d7a5a93b8bbdba4f31a3ff579db1a974e4b0', class: {
'toggle-button': true,
'toggle-button--checked': !!this.checked,
'toggle-button--disabled': !!this.disabled,
'toggle-button--only-icon': hasIcon && !hasLabel,
'toggle-button--with-radio': !!this.withRadio,
[`toggle-button--size-${this.size}`]: true
}, part: "toggle-button", onClick: this.onClick }, this.customAttributes), this.withRadio && h("kv-radio", { key: 'f3e0cdc47d6f64d0bb2416feafb4746d174e0a60', size: EComponentSize.Small, checked: this.checked, disabled: this.disabled }), hasIcon && (h("div", { key: '61b70309c17d54c206034a5ea404734a37d74e61', class: "toggle-button-icon", part: "toggle-icon" }, h("kv-icon", { key: '2c4e747df55344d764c421f3adc7bc9940403943', name: this.icon }))), hasLabel && (h("div", { key: '1bd9c5d966f450e673b74632531b83cfe63916d2', class: "toggle-button-label", part: "toggle-label" }, this.label))))));
}
static get style() { return toggleButtonCss; }
}, [257, "kv-toggle-button", {
"value": [520],
"label": [513],
"icon": [513],
"size": [513],
"disabled": [516],
"checked": [516],
"preventDefault": [516, "prevent-default"],
"withRadio": [516, "with-radio"],
"tooltip": [513],
"customAttributes": [16, "custom-attributes"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-toggle-button", "kv-icon", "kv-portal", "kv-radio", "kv-tooltip", "kv-tooltip-text"];
components.forEach(tagName => { switch (tagName) {
case "kv-toggle-button":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvToggleButton);
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-radio":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvToggleButton as K, defineCustomElement as d };