@kelvininc/ui-components
Version:
Kelvin UI Components
59 lines (54 loc) • 4.21 kB
JavaScript
import { r as registerInstance, h, H as Host } from './index-D-JVwta2.js';
import { E as ETagAlarmSize } from './tag-alarm.types-DHk26cGe.js';
import { c as EAlarmSeverity } from './components-DzZLIMy0.js';
import { E as EIconName } from './icon.types-SVedE_O8.js';
import { i as isEmpty } from './isEmpty-BAGi1PqI.js';
import './_Set-B7Zkvu4X.js';
import './_Map-B6Xd0L4K.js';
import './isObject-Dkd2PDJ-.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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** (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))))));
}
};
KvTagAlarm.style = tagAlarmCss;
export { KvTagAlarm as kv_tag_alarm };