@limetech/lime-elements
Version:
71 lines (70 loc) • 1.94 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
* @exampleComponent limel-example-badge-number
* @exampleComponent limel-example-badge-string
*/
export class Badge {
constructor() {
this.label = undefined;
}
render() {
return (h(Host, { title: this.labelIsLarge() ? this.label : '', class: {
'has-large-label': this.labelIsLarge(),
} }, h("span", null, 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."
},
"attribute": "label",
"reflect": true
}
};
}
}
//# sourceMappingURL=badge.js.map