@kelvininc/ui-components
Version:
Kelvin UI Components
93 lines (89 loc) • 7.64 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { D as DEFAULT_THROTTLE_WAIT } from './p-YDhuCIKq.js';
import { a as EComponentSize } from './p-BRgmvbuh.js';
import './p-DBphUUgi.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { d as defineCustomElement$2 } from './p-B41PGLQm.js';
import { d as defineCustomElement$1 } from './p-BeCwHLdO.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}}: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)}";
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;
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: 'd61477b126323cd9a78efe0989fd4be103cf03e0' }, h("div", { key: 'be95927d3fcde890f8986e852c40d370d3b32f56', class: {
'toggle-button': true,
'toggle-button--checked': this.checked,
'toggle-button--disabled': this.disabled,
'toggle-button--only-icon': hasIcon && !hasLabel,
[`toggle-button--size-${this.size}`]: true
}, part: "toggle-button", onClick: this.onClick }, this.withRadio && h("kv-radio", { key: '0b95f3dfcef736bd3fc0c712f93bc163fb6353df', checked: this.checked }), hasIcon && (h("div", { key: 'e2d34192acef997f4e5b5f022d44289474f3a8e0', class: "toggle-button-icon", part: "toggle-icon" }, h("kv-icon", { key: 'e2c1993eb9419adbffc4bf22c03f69e9ab95828f', name: this.icon }))), hasLabel && (h("div", { key: '85bc10437e873158650dded6de7abfe7d6f28360', class: "toggle-button-label", part: "toggle-label" }, this.label)))));
}
static get style() { return toggleButtonCss; }
}, [1, "kv-toggle-button", {
"value": [520],
"label": [513],
"icon": [513],
"size": [513],
"disabled": [516],
"checked": [516],
"preventDefault": [516, "prevent-default"],
"withRadio": [516, "with-radio"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-toggle-button", "kv-icon", "kv-radio"];
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$2();
}
break;
case "kv-radio":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvToggleButton as K, defineCustomElement as d };