@scania/tegel
Version:
Tegel Design System
139 lines (138 loc) • 4.45 kB
JavaScript
import { h } from "@stencil/core";
export class TdsBadge {
constructor() {
this.value = '';
this.hidden = false;
this.size = 'lg';
this.tdsAriaLive = 'polite';
this.tdsAriaLabel = '';
this.shape = '';
this.text = '';
}
watchProps() {
this.checkProps();
}
componentWillLoad() {
this.checkProps();
}
checkProps() {
const valueAsNumber = parseInt(this.value);
if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {
this.shape = this.value.length >= 2 ? 'pill' : '';
this.size = 'lg';
this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();
}
}
render() {
return (h("host", { key: '718d8c1583ad75a49fb5f24bb8efbdad4e3228a7', role: "status", class: {
'tds-badge': true,
[`tds-badge-${this.size}`]: true,
'tds-badge-pill': this.shape === 'pill',
'tds-badge-hidden': this.hidden,
}, "aria-label": this.tdsAriaLabel, "aria-live": this.tdsAriaLive }, h("div", { key: 'd76ae168c4f5926a170472162ecd611b5e6e4639', class: "tds-badge-text", "aria-hidden": "true" }, this.text)));
}
static get is() { return "tds-badge"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["badge.scss"]
};
}
static get styleUrls() {
return {
"$": ["badge.css"]
};
}
static get properties() {
return {
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Value shown in Badge"
},
"attribute": "value",
"reflect": false,
"defaultValue": "''"
},
"hidden": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Changes visibility of Badge"
},
"attribute": "hidden",
"reflect": true,
"defaultValue": "false"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'lg' | 'sm'",
"resolved": "\"lg\" | \"sm\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets component size."
},
"attribute": "size",
"reflect": false,
"defaultValue": "'lg'"
},
"tdsAriaLive": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'off' | 'polite' | 'assertive'",
"resolved": "\"assertive\" | \"off\" | \"polite\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines aria-live attribute"
},
"attribute": "tds-aria-live",
"reflect": false,
"defaultValue": "'polite'"
}
};
}
static get states() {
return {
"tdsAriaLabel": {},
"shape": {},
"text": {}
};
}
static get watchers() {
return [{
"propName": "value",
"methodName": "watchProps"
}, {
"propName": "size",
"methodName": "watchProps"
}];
}
}