@kelvininc/ui-components
Version:
Kelvin UI Components
77 lines (72 loc) • 6.74 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 './isObject-Dkd2PDJ-.js';
import './isSymbol-CfrylQep.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) {
registerInstance(this, hostRef);
this.checkedChange = 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 = 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(() => this.onCheck(), DEFAULT_THROTTLE_WAIT);
}
render() {
return (h(Host, { key: '338fa86ff83838f12bb9432d38c49a85203d6e75' }, h("div", { key: 'e0202ca8e61085b9966b4b968375fd160c76d902', class: {
'radio-container': true,
[`radio-container--size-${this.size}`]: true,
'checked': this.isChecked,
'disabled': this.isDisabled
}, onClick: this.clickThrottler }, h("div", { key: '13685d18745a5a770e2c1b8defa64fa35e4b16d0', tabIndex: this.isChecked || this.isDisabled ? -1 : 0, class: "circle" }, h("div", { key: '6873a32ff55be5c4af6813bda78c37cba892ef19', class: "checked-icon" })), this.label && h("span", { key: 'ea894a6023673e32f23d7387f628773f22b3bed3', class: "label" }, this.label))));
}
static get watchers() { return {
"checked": ["checkedChangeHandler"],
"disabled": ["disabledChangeHandler"]
}; }
};
KvRadio.style = {
light: radioLightCss,
night: radioNightCss
};
export { KvRadio as kv_radio };