@limetech/lime-elements
Version:
98 lines (97 loc) • 2.45 kB
JavaScript
import { h } from '@stencil/core';
/**
* This component is used internally by `limel-tooltip`.
*
* @private
*/
export class TooltipContent {
constructor() {
this.label = undefined;
this.helperLabel = undefined;
this.maxlength = undefined;
}
render() {
let isLabelsTextLong = false;
if (this.helperLabel && this.maxlength) {
isLabelsTextLong =
this.label.length + this.helperLabel.length > this.maxlength;
}
const props = {};
if (this.maxlength) {
props.style = {
'--tooltip-max-width-of-text': `${this.maxlength}` + 'ch',
};
}
return [
h("text", Object.assign({ class: { 'has-column-layout': isLabelsTextLong } }, props), h("div", { class: "label" }, this.label), h("div", { class: "helper-label" }, this.helperLabel)),
];
}
static get is() { return "limel-tooltip-content"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["tooltip-content.scss"]
};
}
static get styleUrls() {
return {
"$": ["tooltip-content.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Read more in tooltip.tsx"
},
"attribute": "label",
"reflect": true
},
"helperLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Read more in tooltip.tsx"
},
"attribute": "helper-label",
"reflect": true
},
"maxlength": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Read more in tooltip.tsx"
},
"attribute": "maxlength",
"reflect": true
}
};
}
}
//# sourceMappingURL=tooltip-content.js.map