@limetech/lime-elements
Version:
322 lines (321 loc) • 11.6 kB
JavaScript
import { h, Host } from '@stencil/core';
import { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';
import { getRel } from '../../util/link-helper';
/**
* This component can be used on places such as a start page or a dashboard.
* It offers features for visualizing aggregated data along with supplementary
* information.
*
* If clicking on the component should navigate the user to
* a new screen or web page, you need to provide a URL,
* using the `link` property.
*
* @exampleComponent limel-example-info-tile
* @exampleComponent limel-example-info-tile-badge
* @exampleComponent limel-example-info-tile-progress
* @exampleComponent limel-example-info-tile-loading
* @exampleComponent limel-example-info-tile-primary-slot
* @exampleComponent limel-example-info-tile-styling
*/
export class InfoTile {
constructor() {
this.renderPrefix = () => {
if (this.prefix) {
return h("span", { class: "prefix" }, this.prefix);
}
};
this.renderValue = () => {
var _a;
const characterCount = ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString().length;
if (!this.value && this.loading) {
return h("span", { class: "value" }, "\u00B7\u00B7\u00B7");
}
if (this.value) {
return (h("span", { class: {
value: true,
[`ch-${characterCount}`]: true,
} }, this.value));
}
};
this.renderSuffix = () => {
if (this.suffix) {
return h("span", { class: "suffix" }, this.suffix);
}
};
this.renderIcon = () => {
if (this.icon) {
return h("limel-icon", { class: "icon", name: this.icon });
}
};
this.updateHasPrimarySlotContent = (e) => {
var _a;
const slot = (_a = e === null || e === void 0 ? void 0 : e.target) !== null && _a !== void 0 ? _a : this.host.shadowRoot.querySelector('slot[name="primary"]');
this.hasPrimarySlot = slot && slot.assignedElements().length > 0;
};
this.renderProgress = () => {
var _a, _b;
if (this.hasPrimarySlot) {
return;
}
if (!((_a = this.progress) === null || _a === void 0 ? void 0 : _a.value) && ((_b = this.progress) === null || _b === void 0 ? void 0 : _b.value) !== 0) {
return;
}
return (h("limel-circular-progress", { class: "progress", prefix: this.progress.prefix, value: this.progress.value, suffix: this.progress.suffix, maxValue: this.progress.maxValue, displayPercentageColors: this.progress.displayPercentageColors }));
};
this.renderLabel = () => {
if (this.label) {
return h("span", { class: "label" }, this.label);
}
};
this.renderNotification = () => {
if (this.badge) {
return h("limel-badge", { label: this.badge });
}
};
this.renderSpinner = () => {
if (this.loading) {
return h("limel-linear-progress", { indeterminate: true });
}
};
this.value = undefined;
this.icon = undefined;
this.label = null;
this.prefix = undefined;
this.suffix = undefined;
this.disabled = false;
this.badge = undefined;
this.loading = false;
this.link = undefined;
this.progress = undefined;
this.hasPrimarySlot = false;
}
componentWillLoad() {
const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(this.host);
this.handleMouseEnter = handleMouseEnter;
this.handleMouseLeave = handleMouseLeave;
this.updateHasPrimarySlotContent();
}
render() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
const extendedAriaLabel = this.checkProps(this === null || this === void 0 ? void 0 : this.prefix) +
this.value +
' ' +
this.checkProps(this === null || this === void 0 ? void 0 : this.suffix) +
this.checkProps(this === null || this === void 0 ? void 0 : this.label) +
'. ' +
this.checkProps((_a = this === null || this === void 0 ? void 0 : this.progress) === null || _a === void 0 ? void 0 : _a.prefix) +
this.checkProps((_b = this === null || this === void 0 ? void 0 : this.progress) === null || _b === void 0 ? void 0 : _b.value) +
this.checkProps((_c = this === null || this === void 0 ? void 0 : this.progress) === null || _c === void 0 ? void 0 : _c.suffix) +
this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
const link = this.disabled ? '#' : (_e = this.link) === null || _e === void 0 ? void 0 : _e.href;
const rel = getRel((_f = this.link) === null || _f === void 0 ? void 0 : _f.target, (_g = this.link) === null || _g === void 0 ? void 0 : _g.rel);
return (h(Host, { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { title: (_h = this.link) === null || _h === void 0 ? void 0 : _h.title, href: link, target: (_j = this.link) === null || _j === void 0 ? void 0 : _j.target, rel: rel, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
'is-clickable': !!((_k = this.link) === null || _k === void 0 ? void 0 : _k.href) && !this.disabled,
} }, this.renderIcon(), this.renderProgress(), h("slot", { name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { class: "value-group" }, this.renderPrefix(), h("div", { class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", null)), this.renderNotification()));
}
checkProps(propValue) {
return propValue ? propValue + ' ' : '';
}
static get is() { return "limel-info-tile"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["info-tile.scss"]
};
}
static get styleUrls() {
return {
"$": ["info-tile.css"]
};
}
static get properties() {
return {
"value": {
"type": "any",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "A piece of text or number that is the main piece of information\nwhich the component is intended to visualize."
},
"attribute": "value",
"reflect": true
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Name of icon for the info tile."
},
"attribute": "icon",
"reflect": false
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The text to show below the info tile. Long labels will be truncated."
},
"attribute": "label",
"reflect": true,
"defaultValue": "null"
},
"prefix": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "A string of text that is visually placed before the value."
},
"attribute": "prefix",
"reflect": true
},
"suffix": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "A string of text that is visually placed after the value."
},
"attribute": "suffix",
"reflect": true
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set to `true` if info tile is disabled."
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"badge": {
"type": "any",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "If supplied, the info tile will display a notification badge."
},
"attribute": "badge",
"reflect": true
},
"loading": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set to `true` to put the component in the `loading` state.\nThis does _not_ disable the link. To do so, the\n`disabled` property should be set to `true` as well."
},
"attribute": "loading",
"reflect": true,
"defaultValue": "false"
},
"link": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Link",
"resolved": "Link",
"references": {
"Link": {
"location": "import",
"path": "../../global/shared-types/link.types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "If supplied, the info tile will be a clickable link.\n\nSupplying a value also adds an elevated effect using a shadow,\nas well as `cursor: pointer`, which appears on hover.\nWhile we strongly recommend supplying a link whenever the\ncomponent should act as a link, if this is not possible, and\nyou need to provide interaction through a click handler,\nyou can still get the correct styling by supplying a `Link`\nobject with the `href` property set to `'#'`."
}
},
"progress": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "InfoTileProgress",
"resolved": "InfoTileProgress",
"references": {
"InfoTileProgress": {
"location": "import",
"path": "../info-tile/info-tile.types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Properties of the optional circular progress bar.\n\nDefaults:\n- `maxValue`: 100\n- `suffix`: %\n- `displayPercentageColors`: false\n\nColors change with intervals of 10 %."
}
}
};
}
static get states() {
return {
"hasPrimarySlot": {}
};
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=info-tile.js.map