@kelvininc/ui-components
Version:
Kelvin UI Components
45 lines (39 loc) • 4.25 kB
JavaScript
import { r as registerInstance, h, F as Fragment, H as Host } from './index-BOTigrTZ.js';
import { o as offset } from './floating-ui.dom-CJTtq_QG.js';
import { d as ETooltipPosition } from './wizard.types-COrzvkrr.js';
import { a as getClassMap } from './css-class.helper-DCOsOAOy.js';
const TEXT_TOOLTIP_MAIN_AXIS_OFFSET = 4;
const DEFAULT_TEXT_TOOLTIP_CONFIG = {
placement: ETooltipPosition.Bottom,
middleware: [offset(TEXT_TOOLTIP_MAIN_AXIS_OFFSET)]
};
const DEFAULT_ICON_TOGGLETIP_CONFIG = {
position: ETooltipPosition.BottomStart
};
function getTooltipText(popoverInfo) {
return (popoverInfo === null || popoverInfo === void 0 ? void 0 : popoverInfo.text) && !popoverInfo.icon ? popoverInfo.text : '';
}
const descriptionListCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}kv-description-list{--description-list-row-gap:var(--spacing-xl);--description-list-row-extremes:0;--description-list-row-inline-padding:0;--description-list-row-align:baseline}.description-list-container{display:grid;grid-template-columns:max-content 1fr;column-gap:var(--space-28);word-break:break-all}.description-list-container .row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:var(--description-list-row-align);padding-block:var(--description-list-row-gap);padding-inline:var(--description-list-row-inline-padding)}.description-list-container .row:first-child{padding-block-start:var(--description-list-row-extremes)}.description-list-container .row:last-child{padding-block-end:var(--description-list-row-extremes)}.description-list-container .title{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-container-neutral-subtle)}.description-list-container .description{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;color:var(--text-container-neutral-default)}.description-list-container .description kv-tooltip::part(content){display:inline}.description-list-container .description kv-toggle-tip .toggle-tip-open-element-container{cursor:pointer;user-select:none;pointer-events:all;display:inline-block;vertical-align:text-top;margin-left:var(--spacing-md)}.description-list-container .description kv-copy-to-clipboard{--container-padding:0;--icon-start-opacity:1}.description-list-tooltip-container::part(tooltip-container){padding:var(--spacing-md)}";
const KvDescriptionList = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** @inheritdoc */
this.descriptionTooltipConfig = DEFAULT_TEXT_TOOLTIP_CONFIG;
/** @inheritdoc */
this.iconToggletipConfig = DEFAULT_ICON_TOGGLETIP_CONFIG;
/** @inheritdoc */
this.customClass = '';
}
customRenderDescription({ description, popoverInfo, copiableTextConfig }) {
if (copiableTextConfig) {
return h("kv-copy-to-clipboard", Object.assign({}, copiableTextConfig), description);
}
return (h(Fragment, null, h("kv-tooltip", { text: getTooltipText(popoverInfo), options: this.descriptionTooltipConfig, customClass: "description-list-tooltip-container" }, description), (popoverInfo === null || popoverInfo === void 0 ? void 0 : popoverInfo.icon) && (h("kv-toggle-tip", Object.assign({ text: popoverInfo.text }, this.iconToggletipConfig, { customClass: "description-list-tooltip-container" }), h("kv-icon", { name: popoverInfo.icon, customClass: "icon-16", slot: "open-element-slot" })))));
}
render() {
var _a;
return (h(Host, { key: 'c720849cde2e21c55a4ec1f6be993f8156b32e59' }, h("div", { key: '21027ad97c25b66db504b86914399ba019f8a56e', class: Object.assign({ 'description-list-container': true }, getClassMap(this.customClass)) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => (h("div", { class: "row", part: "row" }, h("div", { class: "title" }, item.title), h("div", { class: "description" }, this.customRenderDescription(item))))))));
}
};
KvDescriptionList.style = descriptionListCss;
export { KvDescriptionList as kv_description_list };