@kelvininc/ui-components
Version:
Kelvin UI Components
95 lines (90 loc) • 7.2 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { D as DEFAULT_THROTTLE_WAIT } from './p-YDhuCIKq.js';
import { a as EComponentSize } from './p-BRgmvbuh.js';
import './p-DBphUUgi.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { t as throttle } from './p-BlTxH6qj.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 = /*@__PURE__*/ proxyCustomElement(class KvRadio extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
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"]
}; }
static get style() { return {
light: radioLightCss,
night: radioNightCss
}; }
}, [33, "kv-radio", {
"checked": [516],
"disabled": [516],
"label": [513],
"size": [1],
"isChecked": [32],
"isDisabled": [32]
}, [[1, "keydown", "handleKeyDown"]], {
"checked": ["checkedChangeHandler"],
"disabled": ["disabledChangeHandler"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-radio"];
components.forEach(tagName => { switch (tagName) {
case "kv-radio":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvRadio);
}
break;
} });
}
defineCustomElement();
export { KvRadio as K, defineCustomElement as d };