@scania/tegel
Version:
Tegel Design System
77 lines (72 loc) • 3.08 kB
JavaScript
import { p as proxyCustomElement, H, h } from './p-28ef5186.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 TdsBadgeStyle0 = badgeCss;
const TdsBadge$1 = /*@__PURE__*/ proxyCustomElement(class TdsBadge extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
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 watchers() { return {
"value": ["watchProps"],
"size": ["watchProps"]
}; }
static get style() { return TdsBadgeStyle0; }
}, [1, "tds-badge", {
"value": [1],
"hidden": [516],
"size": [1],
"tdsAriaLive": [1, "tds-aria-live"],
"tdsAriaLabel": [32],
"shape": [32],
"text": [32]
}, undefined, {
"value": ["watchProps"],
"size": ["watchProps"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["tds-badge"];
components.forEach(tagName => { switch (tagName) {
case "tds-badge":
if (!customElements.get(tagName)) {
customElements.define(tagName, TdsBadge$1);
}
break;
} });
}
defineCustomElement$1();
const TdsBadge = TdsBadge$1;
const defineCustomElement = defineCustomElement$1;
export { TdsBadge, defineCustomElement };