@kelvininc/ui-components
Version:
Kelvin UI Components
79 lines (73 loc) • 6.76 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');
require('./isObject-COPdF2vE.js');
require('./isSymbol-D9AiXf1V.js');
const radioLightCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--input-height-large:36px;--input-height-small:28px}.radio-container{display:flex;align-items:center;cursor:pointer;user-select:none;width:fit-content}.radio-container--size-large{height:var(--input-height-large)}.radio-container--size-small{height:var(--input-height-small)}.radio-container.disabled{pointer-events:none;opacity:0.5}.radio-container.disabled .circle{border-color:var(--radio-input-default-color)}.circle{height:14px;width:14px;border-radius:50%;border:1px solid var(--radio-input-default-color);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.circle:focus{outline:none;border-color:var(--radio-input-focused-color)}.circle .checked-icon{height:8px;width:8px;border-radius:50%;transition:all 0.2s ease-out}.checked .circle{border:1px solid var(--radio-input-checked-color)}.checked .circle .checked-icon{height:8px;width:8px;border-radius:50%;background:var(--radio-input-checked-color);transition:all 0.2s ease-out}.label{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;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--radio-label-text-color);margin-left:var(--kv-spacing-2x, 8px)}:host{--radio-label-text-color:var(--kv-text, #fff);--radio-input-checked-color:var(--kv-primary, #005cc7);--radio-input-focused-color:var(--kv-primary, #005cc7);--radio-input-default-color:var(--kv-neutral-3, #ddd)}";
const radioNightCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--input-height-large:36px;--input-height-small:28px}.radio-container{display:flex;align-items:center;cursor:pointer;user-select:none;width:fit-content}.radio-container--size-large{height:var(--input-height-large)}.radio-container--size-small{height:var(--input-height-small)}.radio-container.disabled{pointer-events:none;opacity:0.5}.radio-container.disabled .circle{border-color:var(--radio-input-default-color)}.circle{height:14px;width:14px;border-radius:50%;border:1px solid var(--radio-input-default-color);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.circle:focus{outline:none;border-color:var(--radio-input-focused-color)}.circle .checked-icon{height:8px;width:8px;border-radius:50%;transition:all 0.2s ease-out}.checked .circle{border:1px solid var(--radio-input-checked-color)}.checked .circle .checked-icon{height:8px;width:8px;border-radius:50%;background:var(--radio-input-checked-color);transition:all 0.2s ease-out}.label{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;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--radio-label-text-color);margin-left:var(--kv-spacing-2x, 8px)}:host{--radio-label-text-color:var(--kv-neutral-2, #e5e5e5);--radio-input-checked-color:var(--kv-neutral-0, #fff);--radio-input-focused-color:var(--kv-neutral-5, #707070);--radio-input-default-color:var(--kv-neutral-0, #fff)}";
const KvRadio = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.checkedChange = index.createEvent(this, "checkedChange", 7);
/** (optional) Sets the button as checked when initializing */
this.checked = false;
/** (optional) Sets this button styling to be disabled and disables click events */
this.disabled = false;
/** (optional) Adds a label aside the button */
this.label = '';
/** (optional) Sets this tab item to a different styling configuration */
this.size = components.EComponentSize.Large;
/** Internal checked / unchecked state */
this.isChecked = this.checked;
/** Internal enabled / disabled state */
this.isDisabled = this.disabled;
this.onCheck = () => {
this.isChecked = true;
this.checkedChange.emit(this.isChecked);
};
}
/** Watch the `checked` property and update internal state accordingly */
checkedChangeHandler(newValue) {
this.isChecked = newValue;
}
/** Watch the `disabled` property and update internal state accordingly */
disabledChangeHandler(newValue) {
this.isDisabled = newValue;
}
handleKeyDown(ev) {
if (ev.code === 'Space') {
this.onCheck();
}
}
connectedCallback() {
this.clickThrottler = throttle.throttle(() => this.onCheck(), config.DEFAULT_THROTTLE_WAIT);
}
render() {
return (index.h(index.Host, { key: '338fa86ff83838f12bb9432d38c49a85203d6e75' }, index.h("div", { key: 'e0202ca8e61085b9966b4b968375fd160c76d902', class: {
'radio-container': true,
[`radio-container--size-${this.size}`]: true,
'checked': this.isChecked,
'disabled': this.isDisabled
}, onClick: this.clickThrottler }, index.h("div", { key: '13685d18745a5a770e2c1b8defa64fa35e4b16d0', tabIndex: this.isChecked || this.isDisabled ? -1 : 0, class: "circle" }, index.h("div", { key: '6873a32ff55be5c4af6813bda78c37cba892ef19', class: "checked-icon" })), this.label && index.h("span", { key: 'ea894a6023673e32f23d7387f628773f22b3bed3', class: "label" }, this.label))));
}
static get watchers() { return {
"checked": ["checkedChangeHandler"],
"disabled": ["disabledChangeHandler"]
}; }
};
KvRadio.style = {
light: radioLightCss,
night: radioNightCss
};
exports.kv_radio = KvRadio;