@kelvininc/ui-components
Version:
Kelvin UI Components
159 lines (158 loc) • 7.57 kB
JavaScript
import { Fragment, Host, h } from "@stencil/core";
import { DEFAULT_ICON_TOGGLETIP_CONFIG, DEFAULT_TEXT_TOOLTIP_CONFIG } from "./description-list.config";
import { getTooltipText } from "./description-list.helper";
import { getClassMap } from "../../utils/css-class.helper";
/**
* @part row - The description list row element.
*/
export class KvDescriptionList {
constructor() {
/** @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 is() { return "kv-description-list"; }
static get originalStyleUrls() {
return {
"$": ["description-list.scss"]
};
}
static get styleUrls() {
return {
"$": ["description-list.css"]
};
}
static get properties() {
return {
"items": {
"type": "unknown",
"attribute": "items",
"mutable": false,
"complexType": {
"original": "IDescriptionListItem[]",
"resolved": "IDescriptionListItem[]",
"references": {
"IDescriptionListItem": {
"location": "import",
"path": "./description-list.types",
"id": "src/components/description-list/description-list.types.ts::IDescriptionListItem"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) The array of items to display in the list"
},
"getter": false,
"setter": false
},
"descriptionTooltipConfig": {
"type": "unknown",
"attribute": "description-tooltip-config",
"mutable": false,
"complexType": {
"original": "Partial<ComputePositionConfig>",
"resolved": "{ strategy?: Strategy; placement?: Placement; middleware?: (false | { name: string; options?: any; fn: (state: { x: number; y: number; initialPlacement: Placement; strategy: Strategy; platform: Platform; placement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable<MiddlewareReturn>; })[]; platform?: Platform; }",
"references": {
"Partial": {
"location": "global",
"id": "global::Partial"
},
"ComputePositionConfig": {
"location": "import",
"path": "@floating-ui/dom",
"id": "../../node_modules/.pnpm/@floating-ui+dom@1.6.11/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::ComputePositionConfig"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The config to use on the tooltip that shows hovering the text"
},
"getter": false,
"setter": false,
"defaultValue": "DEFAULT_TEXT_TOOLTIP_CONFIG"
},
"iconToggletipConfig": {
"type": "unknown",
"attribute": "icon-toggletip-config",
"mutable": false,
"complexType": {
"original": "IDescriptionListItemToggletipConfig",
"resolved": "IDescriptionListItemToggletipConfig",
"references": {
"IDescriptionListItemToggletipConfig": {
"location": "import",
"path": "./description-list.types",
"id": "src/components/description-list/description-list.types.ts::IDescriptionListItemToggletipConfig"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The config to use on the icon toggletip"
},
"getter": false,
"setter": false,
"defaultValue": "DEFAULT_ICON_TOGGLETIP_CONFIG"
},
"customClass": {
"type": "string",
"attribute": "custom-class",
"mutable": false,
"complexType": {
"original": "CustomCssClass",
"resolved": "CssClassMap | string | string[]",
"references": {
"CustomCssClass": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::CustomCssClass"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "''"
}
};
}
}