@kelvininc/ui-components
Version:
Kelvin UI Components
70 lines (63 loc) • 6.93 kB
JavaScript
'use strict';
var index = require('./index-rNNWWpit.js');
var wizard_types = require('./wizard.types-C9Yhv1tt.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: wizard_types.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 = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.optionClick = index.createEvent(this, "optionClick", 7);
/** @inheritdoc */
this.size = wizard_types.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 (index.h(index.Host, { key: 'c43669c04e2c2fba57f6493d163a2c9b2403ad1f' }, index.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 }, index.h("slot", { key: '61c7663a10dadf8c2615b04a2b5d541ab485bf87', name: "header" }), index.h("div", { key: '717221c3e4a2cd9a396a5a57e1b98bdcdc9cc5f8', class: { content: true, [`content--size-${this.size}`]: true } }, index.h("kv-radio", { key: '3f8f321cd1bc58794ded45e7f53c35bfd186d04a', size: wizard_types.EComponentSize.Small, checked: this.checked, disabled: this.disabled, onCheckedChange: this.onOptionClick }), index.h("div", { key: '0dad5bc293f29e8015b13263746d488367342981', class: "info" }, index.h("div", { key: '9908124ea6360c8b0c00e43e81f12283bdc3c5ff', class: "label" }, index.h("slot", { key: 'c5e7a446d8f74ada162dbd5fb1e2ba6f80ad5079', name: "label" }, this.label)), this.description && index.h("div", { key: '4a82a398e032a447f3402d8b69c9c82d44444f7b', class: "description" }, this.parsedDescription), index.h("slot", { key: 'f42b790b4b2860c4e4104f8478d22e50a57e57a5', name: "additional-info" }))))));
}
static get watchers() { return {
"description": ["descriptionWatcher"]
}; }
};
KvRadioListItem.style = radioListItemCss;
exports.kv_radio_list_item = KvRadioListItem;