@kelvininc/ui-components
Version:
Kelvin UI Components
103 lines (97 loc) • 5.7 kB
JavaScript
import { h, p as proxyCustomElement, H, d as createEvent, e as Host } from './p-D6GMjtmE.js';
import { E as EAnchorTarget } from './p-BRgmvbuh.js';
import './p-DBphUUgi.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { d as defineCustomElement$2 } from './p-D3eUowCJ.js';
import { d as defineCustomElement$1 } from './p-BeCwHLdO.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}}.radio-list-item-container{display:flex;flex-direction:column;border:1px solid var(--kv-neutral-7, #2a2a2a);border-radius:2px;transition:border-color 0.25s ease-in-out;cursor:pointer;user-select:none}.radio-list-item-container--checked,.radio-list-item-container:hover{border-color:var(--kv-neutral-0, #fff)}.radio-list-item-container--disabled{pointer-events:none;opacity:0.5}.radio-list-item-container kv-radio{--input-height-large:unset}.radio-list-item-container .content{display:flex;align-items:center;padding:var(--kv-spacing-4x, 16px)}.radio-list-item-container .info{flex:1;margin-left:var(--kv-spacing-4x, 16px)}.radio-list-item-container .info .label{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:16px;font-weight:600;font-stretch:normal;font-style:normal;line-height:24px;letter-spacing:normal;text-transform:none;color:var(--kv-neutral-0, #fff)}.radio-list-item-container .info .description{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;color:var(--kv-neutral-4, #bebebe)}.radio-list-item-container .info .description kv-link::part(container){display:inline}";
const KvRadioListItem = /*@__PURE__*/ proxyCustomElement(class KvRadioListItem extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.optionClick = createEvent(this, "optionClick", 7);
/** @inheritdoc */
this.checked = false;
/** @inheritdoc */
this.disabled = false;
this.parsedDescription = buildDescription(this.description);
this.onOptionClick = (ev) => {
ev.stopPropagation();
this.optionClick.emit(this.optionId);
};
}
descriptionWatcher(newValue, old) {
if (newValue === old)
return;
this.parsedDescription = buildDescription(newValue);
}
render() {
return (h(Host, { key: '7ce9aa25a427477080dcf3b6f33a74a3ec4ddbe9' }, h("div", { key: 'abe44a5c569fa607eacfcbb51b80dcd9f462e051', 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: '04d4aedbc299fab34295623edbd1af20b0ee4e19', name: "header" }), h("div", { key: '4b2c0cacc8ed406a74438cf5cfde039a52cc190a', class: "content" }, h("kv-radio", { key: 'f0ba306654dba6e357f715f201d159639ce3e649', checked: this.checked, disabled: this.disabled }), h("div", { key: '12b2bed2c789184eb8124a0438ed47ce6546267a', class: "info" }, h("slot", { key: 'f8462beeb86f61d6c7e023aade064dc945fc40d7', name: "label" }, h("div", { key: '4c8f95adc66ace1480732c99cdceb0f2730b7414', class: "label" }, this.label)), this.description && h("div", { key: '919a182a51fd4d8d43829157533f7be40e222193', class: "description" }, this.parsedDescription), h("slot", { key: 'bbfa4b0873e65a85f20b5813f234c99e3533e0c8', name: "additional-info" }))))));
}
static get watchers() { return {
"description": ["descriptionWatcher"]
}; }
static get style() { return radioListItemCss; }
}, [1, "kv-radio-list-item", {
"optionId": [520, "option-id"],
"label": [513],
"description": [513],
"checked": [516],
"disabled": [516],
"parsedDescription": [32]
}, undefined, {
"description": ["descriptionWatcher"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-radio-list-item", "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-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 };