@kelvininc/ui-components
Version:
Kelvin UI Components
94 lines (87 loc) • 5.43 kB
JavaScript
import { p as proxyCustomElement, H, h, F as Fragment, e as Host } from './p-D6GMjtmE.js';
import { o as offset, d as defineCustomElement$5 } from './p-BIWUEm1f.js';
import { b as ETooltipPosition } from './p-BRgmvbuh.js';
import './p-DBphUUgi.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { g as getClassMap } from './p-DKOxy79t.js';
import { d as defineCustomElement$6 } from './p-B41PGLQm.js';
import { d as defineCustomElement$4 } from './p-Dmh-PER6.js';
import { d as defineCustomElement$3 } from './p-GHnCHOez.js';
import { d as defineCustomElement$2 } from './p-BuaFqlfN.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}}.description-list-container{display:grid;grid-template-columns:max-content 1fr;gap:var(--kv-spacing-5x, 20px) var(--kv-spacing-7x, 28px);word-break:break-all;align-items:baseline}.description-list-container .title{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;letter-spacing:1.5px;text-transform:uppercase;color:var(--kv-neutral-4, #bebebe)}.description-list-container .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-2, #e5e5e5)}.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(--kv-spacing-2x, 8px)}.description-list-tooltip-container::part(tooltip-container){padding:var(--kv-spacing-2x, 8px)}";
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 = '';
}
render() {
var _a;
return (h(Host, { key: 'a20498b7d24520a83ddf8cbad7df9dbba8bdc7b4' }, h("div", { key: '21f8d93338e66999c09b35876f615a4cd4d5ef68', class: Object.assign({ 'description-list-container': true }, getClassMap(this.customClass)) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(({ title, description, popoverInfo }) => (h(Fragment, null, h("div", { class: "title" }, title), h("div", { class: "description" }, 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" }))))))))));
}
static get style() { return descriptionListCss; }
}, [0, "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-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-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 };