@kelvininc/ui-components
Version:
Kelvin UI Components
48 lines (43 loc) • 4.7 kB
JavaScript
'use strict';
var index = require('./index-rNNWWpit.js');
var config = require('./config-CX2UH6bG.js');
var wizard_types = require('./wizard.types-C9Yhv1tt.js');
var throttle = require('./throttle-ElO2JQGe.js');
require('./isObject-COPdF2vE.js');
const radioCss = "@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{--input-height-large:var(--input-height-regular);--input-height-small:var(--input-height-compact);--input-gap-large:var(--spacing-none);--input-gap-small:var(--spacing-xs);--input-label-color:var(--text-surface-neutral-secondary);--radio-input-large:var(--size-xl);--radio-input-small:var(--size-default);--radio-input-default-color:var(--icon-persistent-indicator-on);--radio-input-disabled-color:var(--icon-surface-neutral-disabled);--radio-background-default-color:var(--transparent);--radio-background-hover-color:var(--overlay-interactive-opacity-10);--radio-background-pressed-color:var(--overlay-interactive-opacity-16);--radio-background-disabled-color:var(--transparent)}.radio-container{display:flex;align-items:center;width:fit-content;cursor:pointer;user-select:none;pointer-events:all}.radio-container--size-large{height:var(--input-height-large);gap:var(--input-gap-large)}.radio-container--size-large .circle{height:var(--input-height-large);width:var(--input-height-large)}.radio-container--size-large .circle ::slotted(kv-icon),.radio-container--size-large .circle kv-icon{--icon-width:var(--radio-input-large);--icon-height:var(--radio-input-large)}.radio-container--size-small{height:var(--input-height-small);gap:var(--input-gap-small)}.radio-container--size-small .circle{height:var(--input-height-small);width:var(--input-height-small)}.radio-container--size-small .circle ::slotted(kv-icon),.radio-container--size-small .circle kv-icon{--icon-width:var(--radio-input-small);--icon-height:var(--radio-input-small)}.radio-container.disabled{cursor:not-allowed;user-select:none}.radio-container.disabled .circle{background-color:var(--radio-background-disabled-color)}.radio-container.disabled .circle ::slotted(kv-icon),.radio-container.disabled .circle kv-icon{--icon-color:var(--radio-input-disabled-color)}.radio-container.disabled .label{color:var(--radio-input-disabled-color)}.circle{display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);outline:none}.circle:hover{background-color:var(--radio-background-hover-color)}.circle:focus,.circle:active{background-color:var(--radio-background-pressed-color)}.circle ::slotted(kv-icon),.circle kv-icon{--icon-color:var(--radio-input-default-color);transition:all 0.2s ease-out}.label{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--input-label-color)}";
const KvRadio = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.checkedChange = index.createEvent(this, "checkedChange", 7);
/** @inheritdoc */
this.label = '';
/** @inheritdoc */
this.size = wizard_types.EComponentSize.Small;
/** @inheritdoc */
this.checked = false;
/** @inheritdoc */
this.disabled = false;
this.onCheck = (event) => {
if (!this.disabled) {
this.checkedChange.emit(event);
}
};
}
handleKeyDown(ev) {
if (ev.code === 'Space') {
this.onCheck(ev);
}
}
connectedCallback() {
this.clickThrottler = throttle.throttle((event) => this.onCheck(event), config.DEFAULT_THROTTLE_WAIT);
}
render() {
return (index.h(index.Host, { key: 'c066f1e9fb31b6b32c59609fc8912cec362e5d79' }, index.h("div", { key: '0851054649e4553fc890bc695d444225d28271d3', class: {
'radio-container': true,
[`radio-container--size-${this.size}`]: true,
'disabled': this.disabled
}, onClick: this.clickThrottler }, index.h("div", { key: '132e9c8a428ced35038a48932cd3743a942068db', class: "circle", tabIndex: this.disabled ? -1 : 0 }, index.h("slot", { key: '8369e51ed3070e343dc9f4a44f8ba2c3f6cf24f3', name: "action-icon" }, index.h("kv-icon", { key: 'bc2543805261d450e93ff253393255a3d2408c26', name: this.checked ? wizard_types.EIconName.RadioBtnSelected : wizard_types.EIconName.RadioBtn, part: "icon" }))), this.label && (index.h("span", { key: '61b4eb00b2829ee2c67056d7397e4871a403aaae', part: "label", class: "label" }, this.label)))));
}
};
KvRadio.style = radioCss;
exports.kv_radio = KvRadio;