@kelvininc/ui-components
Version:
Kelvin UI Components
242 lines (241 loc) • 10.3 kB
JavaScript
import { h, Host } from "@stencil/core";
import { ResizeSensor } from "css-element-queries";
import { isEmpty } from "lodash-es";
import { copyTextToClipboard } from "../../utils/clipboard.helper";
import { EIconName } from "../icon/icon.types";
import { DEFAULT_DESCRIPTION_COLLAPSED_TEXT, DEFAULT_DESCRIPTION_OPENED_TEXT } from "./info-label.config";
import { COPY_TOOLTIP } from "./info-label.types";
/**
* @part title - Label title.
*/
export class KvInfoLabel {
constructor() {
this.tooltipConfig = COPY_TOOLTIP;
this.resizeSensor = null;
/** Define if the show more button needed to be visible */
this.enableShowMoreButton = false;
/** Define if the label content is completely visible */
this.isExpanded = false;
/** Store the current div content height */
this.currentDescriptionHeight = null;
/** (optional) Info label description collapse text */
this.descriptionCollapsedText = DEFAULT_DESCRIPTION_COLLAPSED_TEXT;
/** (optional) Info label description opened text */
this.descriptionOpenedText = DEFAULT_DESCRIPTION_OPENED_TEXT;
/** (optional) Show text with a shadow */
this.showTextShadow = false;
this.onShowMoreToggle = () => {
this.isExpanded = !this.isExpanded;
if (this.isExpanded) {
const textElementHeight = this.descriptionContainer.clientHeight;
this.currentDescriptionHeight = textElementHeight;
return;
}
this.currentDescriptionHeight = this.descriptionHeight;
};
this.onClickCopyAction = async () => {
const tooltip = this.el.shadowRoot.querySelector('kv-tooltip');
const tooltipText = tooltip.shadowRoot.querySelector('#tooltip');
if (await copyTextToClipboard(this.copyValue)) {
tooltipText.innerText = this.tooltipConfig.resultLabel;
}
else {
console.error('Copy to clipboard failed');
}
};
}
get showMoreButtonLabel() {
return this.isExpanded ? this.descriptionOpenedText : this.descriptionCollapsedText;
}
loadDescriptionHeight() {
if (this.descriptionHeight !== undefined) {
const descriptionHeight = this.descriptionContainer.clientHeight;
this.enableShowMoreButton = descriptionHeight !== undefined && descriptionHeight > this.descriptionHeight;
}
else {
this.enableShowMoreButton = false;
}
this.isExpanded = this.enableShowMoreButton ? this.isExpanded : false;
this.currentDescriptionHeight = this.enableShowMoreButton && !this.isExpanded ? this.descriptionHeight : null;
}
componentDidRender() {
this.descriptionContainer = this.el.shadowRoot.querySelector('.description');
if (this.descriptionHeight >= 0) {
this.resizeSensor = new ResizeSensor(this.descriptionContainer, () => {
this.loadDescriptionHeight();
});
}
}
disconnectedCallback() {
var _a, _b;
(_a = this.resizeSensor) === null || _a === void 0 ? void 0 : _a.reset();
(_b = this.resizeSensor) === null || _b === void 0 ? void 0 : _b.detach();
this.resizeSensor = null;
}
render() {
return (h(Host, { key: '8f547b932e3667d4d0c3fbf758f37323faeb785a' }, h("div", { key: '36545708584bb4f4f0308c83bbd93d5676e4d17a', class: "info-label" }, this.labelTitle && (h("div", { key: 'ab986205bc9e2bb260ef641a05093c8e9d474b48', part: "title", class: { 'title': true, 'no-description': isEmpty(this.description) } }, this.labelTitle)), h("div", { key: 'f45e6bd9aa8e33912f60426d4b2de8f76fe6cdcc', style: { height: `${this.currentDescriptionHeight}px` }, class: "description-wrapper" }, h("div", { key: 'de424e67dc7d38fb84ab5012b593cb1d56f9e0f8', class: "description" }, h("slot", { key: '0d50deef33e094a592c53aea71bbc7d17074ee7b' }, this.description && h("div", { key: 'a955b580c29f876bbaf3d56e0ee9f8fc01714c4d', class: "text" }, this.description), this.copyValue && (h("kv-tooltip", { key: '6d70a35873865788bd7c445132e377d1ed5f546b', text: this.tooltipConfig.label, position: this.tooltipConfig.position }, h("kv-icon", { key: 'c1c42886a57df72900d534654cac6bb711fe6829', class: "copy-icon", name: EIconName.Copy, onClick: this.onClickCopyAction }))))), this.showTextShadow && this.enableShowMoreButton && (h("div", { key: '2fb62bc35ce8f5007ee45dc860ad2500d0728cba', class: {
'description-fade': true,
'description-fade--expanded': this.isExpanded
} }))), this.enableShowMoreButton && (h("div", { key: '21b2ad78bce89e3be36339412673ad0d724d6bf4', class: { 'expand-description-button': true, 'expanded': this.isExpanded }, onClick: this.onShowMoreToggle }, this.showMoreButtonLabel, h("kv-icon", { key: '98fdbb75bd7e308abfe8627c459e84db9dcdc983', name: EIconName.Expand }))))));
}
static get is() { return "kv-info-label"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["info-label.scss"]
};
}
static get styleUrls() {
return {
"$": ["info-label.css"]
};
}
static get properties() {
return {
"labelTitle": {
"type": "string",
"attribute": "label-title",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Info label title"
},
"getter": false,
"setter": false,
"reflect": true
},
"description": {
"type": "string",
"attribute": "description",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Info label description"
},
"getter": false,
"setter": false,
"reflect": true
},
"descriptionHeight": {
"type": "number",
"attribute": "description-height",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Info label description height"
},
"getter": false,
"setter": false,
"reflect": true
},
"descriptionCollapsedText": {
"type": "string",
"attribute": "description-collapsed-text",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "(optional) Info label description collapse text"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "DEFAULT_DESCRIPTION_COLLAPSED_TEXT"
},
"descriptionOpenedText": {
"type": "string",
"attribute": "description-opened-text",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "(optional) Info label description opened text"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "DEFAULT_DESCRIPTION_OPENED_TEXT"
},
"copyValue": {
"type": "string",
"attribute": "copy-value",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Info label copy value"
},
"getter": false,
"setter": false,
"reflect": true
},
"showTextShadow": {
"type": "boolean",
"attribute": "show-text-shadow",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "(optional) Show text with a shadow"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
}
};
}
static get states() {
return {
"enableShowMoreButton": {},
"isExpanded": {},
"currentDescriptionHeight": {}
};
}
static get elementRef() { return "el"; }
}