@kelvininc/ui-components
Version:
Kelvin UI Components
71 lines (67 loc) • 5.49 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, e as EComponentSize, K as h, t as EIconName, L as Host } from './p-BP5CxQcH.js';
import { D as DEFAULT_THROTTLE_WAIT } from './p-YDhuCIKq.js';
import { d as defineCustomElement$1 } from './p-DQ7v6WT-.js';
import { t as throttle } from './p-BlTxH6qj.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 = /*@__PURE__*/ proxyCustomElement(class KvRadio extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.checkedChange = createEvent(this, "checkedChange", 7);
/** @inheritdoc */
this.label = '';
/** @inheritdoc */
this.size = 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((event) => this.onCheck(event), DEFAULT_THROTTLE_WAIT);
}
render() {
return (h(Host, { key: 'c066f1e9fb31b6b32c59609fc8912cec362e5d79' }, h("div", { key: '0851054649e4553fc890bc695d444225d28271d3', class: {
'radio-container': true,
[`radio-container--size-${this.size}`]: true,
'disabled': this.disabled
}, onClick: this.clickThrottler }, h("div", { key: '132e9c8a428ced35038a48932cd3743a942068db', class: "circle", tabIndex: this.disabled ? -1 : 0 }, h("slot", { key: '8369e51ed3070e343dc9f4a44f8ba2c3f6cf24f3', name: "action-icon" }, h("kv-icon", { key: 'bc2543805261d450e93ff253393255a3d2408c26', name: this.checked ? EIconName.RadioBtnSelected : EIconName.RadioBtn, part: "icon" }))), this.label && (h("span", { key: '61b4eb00b2829ee2c67056d7397e4871a403aaae', part: "label", class: "label" }, this.label)))));
}
static get style() { return radioCss; }
}, [257, "kv-radio", {
"label": [513],
"size": [1],
"checked": [516],
"disabled": [516]
}, [[1, "keydown", "handleKeyDown"]]]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-radio", "kv-icon"];
components.forEach(tagName => { switch (tagName) {
case "kv-radio":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvRadio);
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvRadio as K, defineCustomElement as d };