@kelvininc/ui-components
Version:
Kelvin UI Components
119 lines (118 loc) • 4.71 kB
JavaScript
import { Host, h } from "@stencil/core";
import { isValidLabel } from "../../utils/string.helper";
import { ETagColor } from "./tag.types";
import { EBadgeType } from "../badge/badge.types";
export class KvTag {
constructor() {
/** (optional) Tag color variant */
this.color = ETagColor.Neutral;
}
render() {
return (h(Host, { key: 'ddefd367080e428867d44988889433b9cf154f88' }, h("div", { key: '8777459b8b1a44789dbd65a94cc49a00c0d8d98e', class: { 'tag-container': true, [`tag-container--color-${this.color}`]: true } }, h("slot", { key: '4e9d589f5a5000c461efdc4c07b245227c39e6dc', name: "left-slot" }, this.icon && h("kv-icon", { key: 'ba3ba8a05424dceb8668736b342196fceebe6ef8', name: this.icon, exportparts: "icon" })), isValidLabel(this.label) && h("div", { key: '34272a8a667f065b54e470e94d23ae5cd4a6f70e', class: "tag-label" }, this.label), h("slot", { key: '447e6616d069fb5fcb4df82fed48eff4e324c240', name: "right-slot" }, isValidLabel(this.badgeLabel) && h("kv-badge", { key: '3f3f43a8dea74f8d97bfb505e9a8251357d00755', type: EBadgeType.Secondary }, this.badgeLabel)))));
}
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
},
"color": {
"type": "string",
"attribute": "color",
"mutable": false,
"complexType": {
"original": "ETagColor",
"resolved": "ETagColor.Blue | ETagColor.Brand | ETagColor.Green | ETagColor.Neutral | ETagColor.Purple | ETagColor.Red | ETagColor.Yellow",
"references": {
"ETagColor": {
"location": "import",
"path": "./tag.types",
"id": "src/components/tag/tag.types.ts::ETagColor"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "(optional) Tag color variant"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "ETagColor.Neutral"
},
"icon": {
"type": "string",
"attribute": "icon",
"mutable": false,
"complexType": {
"original": "EIconName",
"resolved": "EIconName",
"references": {
"EIconName": {
"location": "import",
"path": "../icon/icon.types",
"id": "src/components/icon/icon.types.ts::EIconName"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Icon to display inside the tag"
},
"getter": false,
"setter": false,
"reflect": true
},
"badgeLabel": {
"type": "string",
"attribute": "badge-label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Badge label displayed at the end of the tag"
},
"getter": false,
"setter": false,
"reflect": true
}
};
}
}