@scania/tegel
Version:
Tegel Design System
54 lines (50 loc) • 2.38 kB
JavaScript
import { r as registerInstance, h } from './index-9xxNGlso.js';
const badgeCss = () => `:host{--tds-badge-background-color:var(--tds-red-400);--tds-badge-color-text:var(--tds-white);box-sizing:border-box;display:block}:host *{box-sizing:border-box}.tds-badge{display:block;border-radius:12px;background-color:var(--tds-badge-background-color);text-align:center}.tds-badge.tds-badge-sm{height:8px;width:8px;line-height:8px}.tds-badge.tds-badge-lg{height:20px;line-height:20px;width:20px}.tds-badge.tds-badge-pill{display:inline-block;width:unset;padding-left:8px;padding-right:8px}.tds-badge.tds-badge-hidden{display:none}.tds-badge-text{font-size:12px;color:var(--tds-badge-color-text);font-weight:bold}`;
const TdsBadge = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** Value shown in Badge */
this.value = '';
/** Changes visibility of Badge */
this.hidden = false;
/** Sets component size. */
this.size = 'lg';
/** Defines aria-live attribute */
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 watchers() { return {
"value": [{
"watchProps": 0
}],
"size": [{
"watchProps": 0
}]
}; }
};
TdsBadge.style = badgeCss();
export { TdsBadge as tds_badge };