@kelvininc/ui-components
Version:
Kelvin UI Components
91 lines (85 loc) • 5.24 kB
JavaScript
import { p as proxyCustomElement, H, h, e as Host } from './p-D6GMjtmE.js';
import { b as EIconName, j as ETagAlarmSize } from './p-DBphUUgi.js';
import { c as EAlarmSeverity } from './p-BRgmvbuh.js';
import { d as defineCustomElement$3 } from './p-B41PGLQm.js';
import { d as defineCustomElement$2 } from './p-BjJhwPoi.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
const ALARM_CONFIG = {
[EAlarmSeverity.One]: {
name: 'Critical',
icon: EIconName.Circle
},
[EAlarmSeverity.Two]: {
name: 'Urgent',
icon: EIconName.Nabla
},
[EAlarmSeverity.Three]: {
name: 'Advisory',
icon: EIconName.Triangle
},
[EAlarmSeverity.Four]: {
name: 'Medium',
icon: EIconName.Square
},
[EAlarmSeverity.Five]: {
name: 'Low',
icon: EIconName.Diamond
}
};
const tagAlarmCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host .alarm-tag kv-tag{--tag-content-padding:var(--kv-spacing, 4px)}:host .alarm-tag--severity-1 kv-tag{--tag-background-color:rgba(var(--kv-error-dark-rgb, 198, 22, 0), 0.16)}:host .alarm-tag--severity-1 kv-icon{--icon-color:var(--kv-error-dark, #c61600)}:host .alarm-tag--severity-2 kv-tag{--tag-background-color:rgba(var(--kv-warning-dark-rgb, 224, 169, 59), 0.16)}:host .alarm-tag--severity-2 kv-icon{--icon-color:var(--kv-warning-dark, #e0a93b)}:host .alarm-tag--severity-3 kv-tag{--tag-background-color:rgba(var(--kv-secondary-1-dark-rgb, 4, 5, 62), 0.16)}:host .alarm-tag--severity-3 kv-icon{--icon-color:var(--kv-secondary-1-dark, #04053e)}:host .alarm-tag--severity-4 kv-tag{--tag-background-color:rgba(var(--kv-secondary-3-dark-rgb, 48, 89, 96), 0.16)}:host .alarm-tag--severity-4 kv-icon{--icon-color:var(--kv-secondary-3-dark, #305960)}:host .alarm-tag--severity-5 kv-tag{--tag-background-color:rgba(var(--kv-info-dark-rgb, 34, 97, 212), 0.16)}:host .alarm-tag--severity-5 kv-icon{--icon-color:var(--kv-info-dark, #2261d4)}:host .icon-wrapper--size-xxsmall kv-icon{--icon-height:12px;--icon-width:12px}:host .icon-wrapper--size-xsmall kv-icon{--icon-height:16px;--icon-width:16px}:host .icon-wrapper--size-small kv-icon{--icon-height:18px;--icon-width:18px}:host .icon-wrapper--size-normal kv-icon{--icon-height:24px;--icon-width:24px}:host .icon-wrapper--size-large kv-icon{--icon-height:28px;--icon-width:28px}:host .alarm-tag-container{display:flex;flex-direction:row;gap:var(--kv-spacing, 4px);align-items:center}:host .alarm-tag-container .alarm-tag-label{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;color:var(--kv-neutral-2, #e5e5e5)}";
const KvTagAlarm$1 = /*@__PURE__*/ proxyCustomElement(class KvTagAlarm extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
/** (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 style() { return tagAlarmCss; }
}, [1, "kv-tag-alarm", {
"severity": [513],
"size": [513],
"hideLabel": [516, "hide-label"],
"label": [513]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-tag-alarm", "kv-icon", "kv-tag"];
components.forEach(tagName => { switch (tagName) {
case "kv-tag-alarm":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvTagAlarm$1);
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-tag":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const KvTagAlarm = KvTagAlarm$1;
const defineCustomElement = defineCustomElement$1;
export { KvTagAlarm, defineCustomElement };