@kelvininc/ui-components
Version:
Kelvin UI Components
132 lines (131 loc) • 5.21 kB
JavaScript
import { isEmpty } from "lodash-es";
import { Host, h } from "@stencil/core";
import { ETagAlarmSize } from "./tag-alarm.types";
import { ALARM_CONFIG } from "./tag-alarm.config";
export class KvTagAlarm {
constructor() {
/** (optional) Tag Alarm Size */
this.size = ETagAlarmSize.Normal;
/** (optional) Hide alarm label */
this.hideLabel = false;
/** (optional) Alarm custom label */
this.label = '';
}
render() {
const alarmConfig = ALARM_CONFIG[this.severity];
return (h(Host, { key: 'e8f6cc84537c176989c918c430a1481c46f53370' }, h("div", { key: '42d88a309a537b00f22d5c192d7c1b8673525964', class: {
'alarm-tag': true,
[`alarm-tag--severity-${this.severity}`]: true
} }, h("kv-tag", { key: '8cc78b537a791c1c733b02baf6e85ff2086a4711' }, h("div", { key: '3380b3ce5556b39edec5682bfd6ff313d1314fcc', class: "alarm-tag-container", slot: "left-slot" }, h("div", { key: '9a179c753430f29c2c4eacff91ac7f2a96d75ce9', class: {
'icon-wrapper': true,
[`icon-wrapper--size-${this.size}`]: true
} }, h("kv-icon", { key: '3bf34eb526e7c9bf882e265cbe0de88adaded42c', name: alarmConfig.icon })), !this.hideLabel && h("div", { key: '0c92f373a84c255e5d6f7d2f2ef8c0691efca00e', class: "alarm-tag-label" }, isEmpty(this.label) ? alarmConfig.name : this.label))))));
}
static get is() { return "kv-tag-alarm"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["tag-alarm.scss"]
};
}
static get styleUrls() {
return {
"$": ["tag-alarm.css"]
};
}
static get properties() {
return {
"severity": {
"type": "string",
"attribute": "severity",
"mutable": false,
"complexType": {
"original": "EAlarmSeverity",
"resolved": "EAlarmSeverity.Five | EAlarmSeverity.Four | EAlarmSeverity.One | EAlarmSeverity.Three | EAlarmSeverity.Two",
"references": {
"EAlarmSeverity": {
"location": "import",
"path": "../../utils/types/components",
"id": "src/utils/types/components.ts::EAlarmSeverity"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "(required) Alarm Severity"
},
"getter": false,
"setter": false,
"reflect": true
},
"size": {
"type": "string",
"attribute": "size",
"mutable": false,
"complexType": {
"original": "ETagAlarmSize",
"resolved": "ETagAlarmSize.Large | ETagAlarmSize.Normal | ETagAlarmSize.Small | ETagAlarmSize.XSmall | ETagAlarmSize.XXSmall",
"references": {
"ETagAlarmSize": {
"location": "import",
"path": "./tag-alarm.types",
"id": "src/components/tag-alarm/tag-alarm.types.ts::ETagAlarmSize"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Tag Alarm Size"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "ETagAlarmSize.Normal"
},
"hideLabel": {
"type": "boolean",
"attribute": "hide-label",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Hide alarm label"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Alarm custom label"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "''"
}
};
}
}