@kelvininc/ui-components
Version:
Kelvin UI Components
66 lines (62 loc) • 6.84 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-D-JVwta2.js';
import { D as DEFAULT_THROTTLE_WAIT } from './config-YDhuCIKq.js';
import { a as EComponentSize } from './components-DzZLIMy0.js';
import './lib-config-DwRzddFC.js';
import './action-button.types-DVds6a5Z.js';
import './absolute-time-picker-dropdown.types-CojoW2Y2.js';
import './icon.types-SVedE_O8.js';
import './summary-card.types-BcMhjKoS.js';
import './toaster.types-vhHhaF4Q.js';
import './tree-item.types-CBuzk8fR.js';
import './tag-alarm.types-DHk26cGe.js';
import './wizard.types-7ioMFMb5.js';
import { t as throttle } from './throttle-CI91gV45.js';
import { i as isEmpty } from './isEmpty-BAGi1PqI.js';
import './isObject-Dkd2PDJ-.js';
import './isSymbol-CfrylQep.js';
import './_Set-B7Zkvu4X.js';
import './_Map-B6Xd0L4K.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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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)))));
}
};
KvToggleButton.style = toggleButtonCss;
export { KvToggleButton as kv_toggle_button };