@kelvininc/ui-components
Version:
Kelvin UI Components
102 lines (95 loc) • 6.37 kB
JavaScript
import { f as ETooltipPosition, H as proxyCustomElement, I as H, K as h, M as Fragment, L as Host } from './p-BP5CxQcH.js';
import { o as offset, d as defineCustomElement$5 } from './p-CgqRIP0M.js';
import { a as getClassMap } from './p-DCOsOAOy.js';
import { d as defineCustomElement$7 } from './p-CdpiKgMO.js';
import { d as defineCustomElement$6 } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$4 } from './p-CJY_M4BW.js';
import { d as defineCustomElement$3 } from './p-DdZmrasC.js';
import { d as defineCustomElement$2 } from './p-DFBbXuLI.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$1 = /*@__PURE__*/ proxyCustomElement(class KvDescriptionList extends H {
constructor() {
super();
this.__registerHost();
/** @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))))))));
}
static get style() { return descriptionListCss; }
}, [256, "kv-description-list", {
"items": [16],
"descriptionTooltipConfig": [16, "description-tooltip-config"],
"iconToggletipConfig": [16, "icon-toggletip-config"],
"customClass": [513, "custom-class"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-description-list", "kv-copy-to-clipboard", "kv-icon", "kv-portal", "kv-toggle-tip", "kv-tooltip", "kv-tooltip-text"];
components.forEach(tagName => { switch (tagName) {
case "kv-description-list":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvDescriptionList$1);
}
break;
case "kv-copy-to-clipboard":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-toggle-tip":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const KvDescriptionList = KvDescriptionList$1;
const defineCustomElement = defineCustomElement$1;
export { KvDescriptionList, defineCustomElement };