@kelvininc/ui-components
Version:
Kelvin UI Components
57 lines (53 loc) • 7.14 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-BOTigrTZ.js';
import { D as DEFAULT_THROTTLE_WAIT } from './config-YDhuCIKq.js';
import { c as EComponentSize } from './wizard.types-COrzvkrr.js';
import { t as throttle } from './throttle-Ddn7tNe4.js';
import { i as isEmpty } from './isEmpty-DYR6-7ab.js';
import './isObject-Dkd2PDJ-.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 = 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;
/** @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))))));
}
};
KvToggleButton.style = toggleButtonCss;
export { KvToggleButton as kv_toggle_button };