@kelvininc/ui-components/dist/esm/kv-description-list.entry.js

Kelvin UI Components

import { r as registerInstance, h, F as Fragment, H as Host } from './index-D-JVwta2.js';
import { o as offset } from './floating-ui.dom-CJTtq_QG.js';
import { b as ETooltipPosition } from './components-DzZLIMy0.js';
import './lib-config-DwRzddFC.js';
import './action-button.types-DVds6a5Z.js';
import './absolute-time-picker-dropdown.types-CojoW2Y2.js';
import './icon.types-SVedE_O8.js';
import './summary-card.types-BcMhjKoS.js';
import './toaster.types-vhHhaF4Q.js';
import './tree-item.types-CBuzk8fR.js';
import './tag-alarm.types-DHk26cGe.js';
import './wizard.types-7ioMFMb5.js';
import { g as getClassMap } from './css-class.helper-DKOxy79t.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 = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /** @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" }))))))))));
    }
};
KvDescriptionList.style = descriptionListCss;

export { KvDescriptionList as kv_description_list };