@kelvininc/ui-components
Version:
Kelvin UI Components
74 lines (67 loc) • 4.81 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
var components = require('./components-D2lyDQ_a.js');
require('./lib-config-QLtHwxiM.js');
require('./action-button.types-BYOe6st0.js');
require('./absolute-time-picker-dropdown.types-mPwO9zQk.js');
require('./icon.types-B8lvUrX_.js');
require('./summary-card.types-W26sTdH1.js');
require('./toaster.types-DlSCye8T.js');
require('./tree-item.types-C2yRoORC.js');
require('./tag-alarm.types-BeZw-7PT.js');
require('./wizard.types-DTbE-B6d.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(index.h("kv-link", { label: label, href: href, target: components.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 = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.optionClick = index.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 (index.h(index.Host, { key: '7ce9aa25a427477080dcf3b6f33a74a3ec4ddbe9' }, index.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 }, index.h("slot", { key: '04d4aedbc299fab34295623edbd1af20b0ee4e19', name: "header" }), index.h("div", { key: '4b2c0cacc8ed406a74438cf5cfde039a52cc190a', class: "content" }, index.h("kv-radio", { key: 'f0ba306654dba6e357f715f201d159639ce3e649', checked: this.checked, disabled: this.disabled }), index.h("div", { key: '12b2bed2c789184eb8124a0438ed47ce6546267a', class: "info" }, index.h("slot", { key: 'f8462beeb86f61d6c7e023aade064dc945fc40d7', name: "label" }, index.h("div", { key: '4c8f95adc66ace1480732c99cdceb0f2730b7414', class: "label" }, this.label)), this.description && index.h("div", { key: '919a182a51fd4d8d43829157533f7be40e222193', class: "description" }, this.parsedDescription), index.h("slot", { key: 'bbfa4b0873e65a85f20b5813f234c99e3533e0c8', name: "additional-info" }))))));
}
static get watchers() { return {
"description": ["descriptionWatcher"]
}; }
};
KvRadioListItem.style = radioListItemCss;
exports.kv_radio_list_item = KvRadioListItem;