@kelvininc/ui-components
Version:
Kelvin UI Components
74 lines (73 loc) • 2.67 kB
JavaScript
import { Host, h } from "@stencil/core";
import { isValidLabel } from "../../utils/string.helper";
import { EComponentSize } from "../../types";
export class KvTag {
constructor() {
/** (optional) Sets the size of tag */
this.size = EComponentSize.Large;
}
render() {
return (h(Host, { key: 'e84d6c0289f96d95c7ca6f7545ad140ebb4edcda' }, h("div", { key: '15bace72e865977719b45bb6c360800f601fa7b8', class: { 'tag-container': true, [`tag-container--size-${this.size}`]: true } }, h("slot", { key: '92e076f6a3a178bb699f74884ea36ea6a4490c4b', name: "left-slot" }), isValidLabel(this.label) && h("div", { key: '949a9623220f293292ebb0f33e33996b02829269', class: "tag-label" }, this.label))));
}
static get is() { return "kv-tag"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["tag.scss"]
};
}
static get styleUrls() {
return {
"$": ["tag.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Tag label"
},
"getter": false,
"setter": false,
"reflect": true
},
"size": {
"type": "string",
"attribute": "size",
"mutable": false,
"complexType": {
"original": "EComponentSize",
"resolved": "EComponentSize.Large | EComponentSize.Small",
"references": {
"EComponentSize": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::EComponentSize"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "(optional) Sets the size of tag"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "EComponentSize.Large"
}
};
}
}