v4web-components
Version:
Stencil Component Starter
107 lines (106 loc) • 3.22 kB
JavaScript
import { h } from '@stencil/core';
export class LabDsBadge {
constructor() {
this.states = {
success: { color: 'var(--lab-ds-semantic-placeholder-color-bg-dark-success)', icon: 'check_circle' },
error: { color: 'var(--lab-ds-semantic-placeholder-color-bg-dark-error)', icon: 'error' },
warning: { color: 'var(--lab-ds-semantic-placeholder-color-bg-dark-warning)', icon: 'warning' },
};
this.label = 'badge';
this.variant = 'outlined';
this.state = 'success';
this.size = 'medium';
}
render() {
return (h("div", { class: `${this.variant} ${this.state} ${this.size} badge` }, h("span", { class: "label" }, this.label), this.variant === 'dot' ? (h("lab-ds-icon-not-selectable", { class: `holder ${this.state}`, size: `${this.size === 'medium' ? 'x-small' : 'xx-small'}`, icon: "circle", color: this.states[this.state].color })) : (h("lab-ds-icon-not-selectable", { class: "holder", size: `small`, icon: this.states[this.state].icon, color: this.states[this.state].color }))));
}
static get is() { return "lab-ds-badge"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["lab-ds-badge.css"]
};
}
static get styleUrls() {
return {
"$": ["lab-ds-badge.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "label",
"reflect": false,
"defaultValue": "'badge'"
},
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'outlined' | 'ghost' | 'dot'",
"resolved": "\"dot\" | \"ghost\" | \"outlined\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "variant",
"reflect": false,
"defaultValue": "'outlined'"
},
"state": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'success' | 'error' | 'warning'",
"resolved": "\"error\" | \"success\" | \"warning\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "state",
"reflect": false,
"defaultValue": "'success'"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'medium' | 'small'",
"resolved": "\"medium\" | \"small\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "size",
"reflect": false,
"defaultValue": "'medium'"
}
};
}
}
//# sourceMappingURL=lab-ds-badge.js.map