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

Kelvin UI Components

'use strict';

var index = require('./index-DpuMIXDY.js');
var floatingUi_dom = require('./floating-ui.dom-CxA-aH57.js');
var components = require('./components-D2lyDQ_a.js');
require('./lib-config-QLtHwxiM.js');
require('./action-button.types-BYOe6st0.js');
require('./absolute-time-picker-dropdown.types-mPwO9zQk.js');
require('./icon.types-B8lvUrX_.js');
require('./summary-card.types-W26sTdH1.js');
require('./toaster.types-DlSCye8T.js');
require('./tree-item.types-C2yRoORC.js');
require('./tag-alarm.types-BeZw-7PT.js');
require('./wizard.types-DTbE-B6d.js');
var cssClass_helper = require('./css-class.helper-B7G6WFT7.js');

const TEXT_TOOLTIP_MAIN_AXIS_OFFSET = 4;
const DEFAULT_TEXT_TOOLTIP_CONFIG = {
    placement: components.ETooltipPosition.Bottom,
    middleware: [floatingUi_dom.offset(TEXT_TOOLTIP_MAIN_AXIS_OFFSET)]
};
const DEFAULT_ICON_TOGGLETIP_CONFIG = {
    position: components.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) {
        index.registerInstance(this, hostRef);
        /** @inheritdoc */
        this.descriptionTooltipConfig = DEFAULT_TEXT_TOOLTIP_CONFIG;
        /** @inheritdoc */
        this.iconToggletipConfig = DEFAULT_ICON_TOGGLETIP_CONFIG;
        /** @inheritdoc */
        this.customClass = '';
    }
    render() {
        var _a;
        return (index.h(index.Host, { key: 'a20498b7d24520a83ddf8cbad7df9dbba8bdc7b4' }, index.h("div", { key: '21f8d93338e66999c09b35876f615a4cd4d5ef68', class: Object.assign({ 'description-list-container': true }, cssClass_helper.getClassMap(this.customClass)) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(({ title, description, popoverInfo }) => (index.h(index.Fragment, null, index.h("div", { class: "title" }, title), index.h("div", { class: "description" }, index.h("kv-tooltip", { text: getTooltipText(popoverInfo), options: this.descriptionTooltipConfig, customClass: "description-list-tooltip-container" }, description), (popoverInfo === null || popoverInfo === void 0 ? void 0 : popoverInfo.icon) && (index.h("kv-toggle-tip", Object.assign({ text: popoverInfo.text }, this.iconToggletipConfig, { customClass: "description-list-tooltip-container" }), index.h("kv-icon", { name: popoverInfo.icon, customClass: "icon-16", slot: "open-element-slot" }))))))))));
    }
};
KvDescriptionList.style = descriptionListCss;

exports.kv_description_list = KvDescriptionList;