@kelvininc/ui-components
Version:
Kelvin UI Components
42 lines (37 loc) • 3.38 kB
JavaScript
;
var index = require('./index-DpuMIXDY.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');
const toggleSwitchCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}.toggle-switch-container{display:flex}.toggle-switch-container>:last-child{--border-radius-top-right:4px;--border-radius-bottom-right:4px}.toggle-switch-container>:first-child{--border-radius-top-left:4px;--border-radius-bottom-left:4px}.toggle-switch-container kv-toggle-button{--border-radius-top-right:0;--border-radius-bottom-right:0;--border-radius-top-left:0;--border-radius-bottom-left:0;--button-padding-small:var(--kv-spacing, 4px) var(--kv-spacing-3x, 12px);--button-padding-large:var(--kv-spacing-2x, 8px) var(--kv-spacing-3x, 12px);--text-color-default:var(--kv-neutral-4, #bebebe);--text-color-active:var(--kv-neutral-2, #e5e5e5);--text-color-disabled:var(--kv-neutral-5, #707070);--text-color-disabled-active:var(--kv-neutral-5, #707070);--background-color-default:\"transparent\";--background-color-active:var(--kv-neutral-6, #3f3f3f);--background-color-disabled:\"transparent\";--background-color-disabled-active:var(--kv-neutral-7, #2a2a2a);--border-color-default:var(--kv-neutral-6, #3f3f3f);--border-color-active:var(--kv-neutral-2, #e5e5e5);--border-color-disabled:var(--kv-neutral-6, #3f3f3f);--border-color-disabled-active:var(--kv-neutral-6, #3f3f3f)}.toggle-switch-container kv-toggle-button::part(toggle-label){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}";
const KvToggleSwitch = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.checkedChange = index.createEvent(this, "checkedChange", 7);
/** @inheritdoc */
this.options = [];
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.size = components.EComponentSize.Small;
/** @inheritdoc */
this.selectedOption = '';
/** @inheritdoc */
this.disabledButtons = {};
}
render() {
return (index.h(index.Host, { key: '94071d84c6043b263c17e3a912c8198ae27e809b' }, index.h("div", { key: '3fbb05bd6df3229bb8b259865439f281d37da47e', class: "toggle-switch-container" }, this.options.map(option => {
var _a;
return (index.h("kv-toggle-button", { part: "toggle-switch-option-container", exportparts: "toggle-button", value: option.value, label: option.label, icon: option.icon, preventDefault: option.preventDefault, size: (_a = this.size) !== null && _a !== void 0 ? _a : option.size, disabled: this.disabled || this.disabledButtons[option.value] || option.disabled, checked: this.selectedOption === option.value }));
}))));
}
};
KvToggleSwitch.style = toggleSwitchCss;
exports.kv_toggle_switch = KvToggleSwitch;