@limetech/lime-elements
Version:
69 lines (68 loc) • 2.3 kB
JavaScript
import { h, Host } from "@stencil/core";
import { abbreviate } from "./format";
/**
* The Badge component can be used to display a notification badge,
* optionally with a number or a text label.
*
* @exampleComponent limel-example-badge-basic
* @exampleComponent limel-example-badge-number
* @exampleComponent limel-example-badge-string
*/
export class Badge {
render() {
return (h(Host, { key: '995d46502d8ea017877e6308ea9dde691706cf9a', title: this.labelIsLarge() ? this.label : '', class: {
'has-large-label': this.labelIsLarge(),
} }, h("span", { key: 'dc6f429f03e8768b2af2fb254bef0715e9fce839' }, this.renderLabel())));
}
renderLabel() {
if (typeof this.label === 'number') {
return abbreviate(this.label);
}
return this.label;
}
labelIsLarge() {
const largeNumericLabel = 999;
const largeStringLabel = 6;
if ((typeof this.label === 'number' &&
this.label > largeNumericLabel) ||
(typeof this.label === 'string' &&
this.label.length > largeStringLabel)) {
return true;
}
}
static get is() { return "limel-badge"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["badge.scss"]
};
}
static get styleUrls() {
return {
"$": ["badge.css"]
};
}
static get properties() {
return {
"label": {
"type": "any",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Label to display in the badge.\nNumeric labels larger than 999 will be rounded and abbreviated.\nString labels get truncated if their length is longer than\nsix characters."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "label"
}
};
}
}