@kelvininc/ui-components
Version:
Kelvin UI Components
111 lines (105 loc) • 8.34 kB
JavaScript
import { K as h, d as EAnchorTarget, H as proxyCustomElement, I as H, J as createEvent, e as EComponentSize, L as Host } from './p-BP5CxQcH.js';
import { d as defineCustomElement$3 } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$2 } from './p-DSpDHkW6.js';
import { d as defineCustomElement$1 } from './p-s9JMr6UQ.js';
const LINK_MATCHER_REGEX = /\[(.+?)\]\((https?:\/\/.+?)\)/g;
const buildDescription = (description) => {
if (!description)
return;
const linkMatches = [...description.matchAll(LINK_MATCHER_REGEX)];
const parsedJSX = [];
let curIdx = 0;
for (const match of linkMatches) {
const beforeLink = description.slice(curIdx, match.index);
if (beforeLink.length > 0) {
parsedJSX.push(beforeLink);
}
const [expression, label, href] = match;
parsedJSX.push(h("kv-link", { label: label, href: href, target: EAnchorTarget.NewTab }));
curIdx = match.index + expression.length;
}
const remainingText = description.slice(curIdx);
if (remainingText.length > 0) {
parsedJSX.push(remainingText);
}
return parsedJSX;
};
const radioListItemCss = "@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{--radio-list-item-background:var(--background-container-radio-selector-default);--radio-list-item-background-hover:var(--background-container-radio-selector-default);--radio-list-item-background-checked:var(--background-container-radio-selector-default);--radio-list-item-label-color:var(--text-interactive-card-radio-selector-default);--radio-list-item-label-color-hover:var(--text-interactive-card-radio-selector-hover);--radio-list-item-label-color-checked:var(--text-interactive-card-radio-selector-selected);--radio-list-item-label-color-disabled:var(--text-interactive-card-disabled);--radio-list-item-description-color:var(--text-container-neutral-subtle);--radio-list-item-description-color-disabled:var(--text-container-neutral-disabled);--radio-list-item-border:1px solid var(--border-persistent-card-radio-selector-default);--radio-list-item-border-color-hover:var(--border-persistent-card-radio-selector-hover);--radio-list-item-border-color-checked:var(--border-persistent-card-radio-selector-seleted);--radio-list-item-border-radius:var(--radius-md);--radio-list-item-padding-large:var(--spacing-2xl);--radio-list-item-padding-small:var(--spacing-xs) var(--spacing-2xl) var(--spacing-xs) var(--spacing-md);--radio-list-item-gap-large:var(--spacing-md);--radio-list-item-gap-small:var(--spacing-none)}.radio-list-item-container{display:flex;flex-direction:column;background:var(--radio-list-item-background);border:var(--radio-list-item-border);border-radius:var(--radio-list-item-border-radius);transition:border-color 0.25s ease-in-out, background 0.25s ease-in-out;outline:none;cursor:pointer;user-select:none;pointer-events:all}.radio-list-item-container .info{flex:1;min-width:0}.radio-list-item-container .info .label{font-family:Proxima Nova;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0;color:var(--radio-list-item-label-color)}.radio-list-item-container .info .description{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;color:var(--radio-list-item-description-color)}.radio-list-item-container .info .description kv-link::part(container){display:inline}.radio-list-item-container:hover:not(.radio-list-item-container--checked):not(.radio-list-item-container--disabled){background:var(--radio-list-item-background-hover);border-color:var(--radio-list-item-border-color-hover)}.radio-list-item-container:hover:not(.radio-list-item-container--checked):not(.radio-list-item-container--disabled) .info .label{color:var(--radio-list-item-label-color-hover)}.radio-list-item-container--checked:not(.radio-list-item-container--disabled){background:var(--radio-list-item-background-checked);border-color:var(--radio-list-item-border-color-checked)}.radio-list-item-container--checked:not(.radio-list-item-container--disabled) .info .label{color:var(--radio-list-item-label-color-checked)}.radio-list-item-container--disabled{cursor:not-allowed;user-select:none}.radio-list-item-container--disabled .info .label{color:var(--radio-list-item-label-color-disabled)}.radio-list-item-container--disabled .info .description{color:var(--radio-list-item-description-color-disabled)}.radio-list-item-container .content{display:flex;align-items:center;padding:var(--radio-list-item-padding-large);gap:var(--radio-list-item-gap-large)}.radio-list-item-container .content--size-small{gap:var(--radio-list-item-gap-small);padding:var(--radio-list-item-padding-small)}";
const KvRadioListItem = /*@__PURE__*/ proxyCustomElement(class KvRadioListItem extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.optionClick = createEvent(this, "optionClick", 7);
/** @inheritdoc */
this.size = EComponentSize.Large;
/** @inheritdoc */
this.checked = false;
/** @inheritdoc */
this.disabled = false;
this.parsedDescription = buildDescription(this.description);
this.onOptionClick = (ev) => {
ev.stopPropagation();
if (this.disabled) {
return;
}
this.optionClick.emit(this.optionId);
};
}
descriptionWatcher(newValue, old) {
if (newValue === old)
return;
this.parsedDescription = buildDescription(newValue);
}
render() {
return (h(Host, { key: 'c43669c04e2c2fba57f6493d163a2c9b2403ad1f' }, h("div", { key: '972be142d95fae0cbb6c32e77655a3f68ec58749', class: {
'radio-list-item-container': true,
'radio-list-item-container--disabled': !!this.disabled,
'radio-list-item-container--checked': !!this.checked
}, onClick: this.onOptionClick }, h("slot", { key: '61c7663a10dadf8c2615b04a2b5d541ab485bf87', name: "header" }), h("div", { key: '717221c3e4a2cd9a396a5a57e1b98bdcdc9cc5f8', class: { content: true, [`content--size-${this.size}`]: true } }, h("kv-radio", { key: '3f8f321cd1bc58794ded45e7f53c35bfd186d04a', size: EComponentSize.Small, checked: this.checked, disabled: this.disabled, onCheckedChange: this.onOptionClick }), h("div", { key: '0dad5bc293f29e8015b13263746d488367342981', class: "info" }, h("div", { key: '9908124ea6360c8b0c00e43e81f12283bdc3c5ff', class: "label" }, h("slot", { key: 'c5e7a446d8f74ada162dbd5fb1e2ba6f80ad5079', name: "label" }, this.label)), this.description && h("div", { key: '4a82a398e032a447f3402d8b69c9c82d44444f7b', class: "description" }, this.parsedDescription), h("slot", { key: 'f42b790b4b2860c4e4104f8478d22e50a57e57a5', name: "additional-info" }))))));
}
static get watchers() { return {
"description": ["descriptionWatcher"]
}; }
static get style() { return radioListItemCss; }
}, [257, "kv-radio-list-item", {
"optionId": [520, "option-id"],
"label": [513],
"description": [513],
"size": [513],
"checked": [516],
"disabled": [516],
"parsedDescription": [32]
}, undefined, {
"description": ["descriptionWatcher"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-radio-list-item", "kv-icon", "kv-link", "kv-radio"];
components.forEach(tagName => { switch (tagName) {
case "kv-radio-list-item":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvRadioListItem);
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-link":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "kv-radio":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvRadioListItem as K, defineCustomElement as d };