@kelvininc/ui-components
Version:
Kelvin UI Components
68 lines (63 loc) • 6.88 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
var config = require('./config-CX2UH6bG.js');
var components = require('./components-D2lyDQ_a.js');
require('./lib-config-QLtHwxiM.js');
require('./action-button.types-BYOe6st0.js');
require('./absolute-time-picker-dropdown.types-mPwO9zQk.js');
require('./icon.types-B8lvUrX_.js');
require('./summary-card.types-W26sTdH1.js');
require('./toaster.types-DlSCye8T.js');
require('./tree-item.types-C2yRoORC.js');
require('./tag-alarm.types-BeZw-7PT.js');
require('./wizard.types-DTbE-B6d.js');
var throttle = require('./throttle-U8vjnKpb.js');
var isEmpty = require('./isEmpty-C_HQvGy-.js');
require('./isObject-COPdF2vE.js');
require('./isSymbol-D9AiXf1V.js');
require('./_Set-BIUoGFN6.js');
require('./_Map-DiT24PAz.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) {
index.registerInstance(this, hostRef);
this.checkedChange = index.createEvent(this, "checkedChange", 7);
/** @inheritdoc */
this.size = components.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.throttle(() => this.onCheck(), config.DEFAULT_THROTTLE_WAIT);
}
render() {
const hasLabel = !isEmpty.isEmpty(this.label);
const hasIcon = !isEmpty.isEmpty(this.icon);
return (index.h(index.Host, { key: 'd61477b126323cd9a78efe0989fd4be103cf03e0' }, index.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 && index.h("kv-radio", { key: '0b95f3dfcef736bd3fc0c712f93bc163fb6353df', checked: this.checked }), hasIcon && (index.h("div", { key: 'e2d34192acef997f4e5b5f022d44289474f3a8e0', class: "toggle-button-icon", part: "toggle-icon" }, index.h("kv-icon", { key: 'e2c1993eb9419adbffc4bf22c03f69e9ab95828f', name: this.icon }))), hasLabel && (index.h("div", { key: '85bc10437e873158650dded6de7abfe7d6f28360', class: "toggle-button-label", part: "toggle-label" }, this.label)))));
}
};
KvToggleButton.style = toggleButtonCss;
exports.kv_toggle_button = KvToggleButton;