@kelvininc/ui-components
Version:
Kelvin UI Components
42 lines (36 loc) • 14.2 kB
JavaScript
'use strict';
var index = require('./index-rNNWWpit.js');
var wizard_types = require('./wizard.types-C9Yhv1tt.js');
var isEmpty = require('./isEmpty-CqcsgK-A.js');
require('./isObject-COPdF2vE.js');
const ALERT_ICON_NAMES = {
[wizard_types.EAlertType.Info]: wizard_types.EIconName.Error,
[wizard_types.EAlertType.Error]: wizard_types.EIconName.Error,
[wizard_types.EAlertType.Success]: wizard_types.EIconName.Success,
[wizard_types.EAlertType.Warning]: wizard_types.EIconName.Warning
};
const alertCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}.alert-container{height:var(--alert-container-height, unset);border-radius:var(--alert-radius-default)}.alert{display:flex;flex-direction:column;height:100%}.alert--type-info{background-color:var(--alert-background-primary-info)}.alert--type-info kv-icon{--icon-color:var(--alert-icon-color-primary-info)}.alert--type-info ::slotted(*){--icon-color-default-secondary:var(--alert-button-text-info-default);--icon-color-hover-secondary:var(--alert-button-text-info-hover);--icon-color-focus-secondary:var(--alert-button-text-info-pressed);--icon-color-active-secondary:var(--alert-button-text-info-pressed);--text-color-default-secondary:var(--alert-button-text-info-default);--text-color-hover-secondary:var(--alert-button-text-info-hover);--text-color-focus-secondary:var(--alert-button-text-info-pressed);--text-color-active-secondary:var(--alert-button-text-info-pressed);--background-color-hover-secondary:var(--alert-button-background-info);--background-color-focus-secondary:var(--alert-button-background-info);--background-color-active-secondary:var(--alert-button-background-info);--border-color-default-secondary:var(--alert-button-border-info);--border-color-hover-secondary:var(--alert-button-background-info);--border-color-focus-secondary:var(--alert-button-background-info);--border-color-active-secondary:var(--alert-button-background-info);--icon-color-default-tertiary:var(--alert-button-text-info-default);--icon-color-hover-tertiary:var(--alert-button-text-info-hover);--icon-color-focus-tertiary:var(--alert-button-text-info-pressed);--icon-color-active-tertiary:var(--alert-button-text-info-pressed);--text-color-default-tertiary:var(--alert-button-text-info-default);--text-color-hover-tertiary:var(--alert-button-text-info-hover);--text-color-focus-tertiary:var(--alert-button-text-info-pressed);--text-color-active-tertiary:var(--alert-button-text-info-pressed);--background-color-hover-tertiary:var(--alert-button-background-info);--background-color-focus-tertiary:var(--alert-button-background-info);--background-color-active-tertiary:var(--alert-button-background-info);--border-color-hover-tertiary:var(--alert-button-background-info);--border-color-focus-tertiary:var(--alert-button-background-info);--border-color-active-tertiary:var(--alert-button-background-info)}.alert--type-info .close-button{--icon-color-default-text:var(--alert-button-icon-info);--icon-color-hover-text:var(--alert-button-icon-info);--icon-color-focus-text:var(--alert-button-icon-info);--icon-color-active-text:var(--alert-button-icon-info)}.alert--type-error{background-color:var(--alert-background-primary-error)}.alert--type-error kv-icon{--icon-color:var(--alert-icon-color-primary-danger)}.alert--type-error ::slotted(*){--icon-color-default-secondary:var(--alert-button-text-danger-default);--icon-color-hover-secondary:var(--alert-button-text-danger-hover);--icon-color-focus-secondary:var(--alert-button-text-danger-pressed);--icon-color-active-secondary:var(--alert-button-text-danger-pressed);--text-color-default-secondary:var(--alert-button-text-danger-default);--text-color-hover-secondary:var(--alert-button-text-danger-hover);--text-color-focus-secondary:var(--alert-button-text-danger-pressed);--text-color-active-secondary:var(--alert-button-text-danger-pressed);--background-color-hover-secondary:var(--alert-button-background-danger);--background-color-focus-secondary:var(--alert-button-background-danger);--background-color-active-secondary:var(--alert-button-background-danger);--border-color-default-secondary:var(--alert-button-border-danger);--border-color-hover-secondary:var(--alert-button-background-danger);--border-color-focus-secondary:var(--alert-button-background-danger);--border-color-active-secondary:var(--alert-button-background-danger);--icon-color-default-tertiary:var(--alert-button-text-danger-default);--icon-color-hover-tertiary:var(--alert-button-text-danger-hover);--icon-color-focus-tertiary:var(--alert-button-text-danger-pressed);--icon-color-active-tertiary:var(--alert-button-text-danger-pressed);--text-color-default-tertiary:var(--alert-button-text-danger-default);--text-color-hover-tertiary:var(--alert-button-text-danger-hover);--text-color-focus-tertiary:var(--alert-button-text-danger-pressed);--text-color-active-tertiary:var(--alert-button-text-danger-pressed);--background-color-hover-tertiary:var(--alert-button-background-danger);--background-color-focus-tertiary:var(--alert-button-background-danger);--background-color-active-tertiary:var(--alert-button-background-danger);--border-color-hover-tertiary:var(--alert-button-background-danger);--border-color-focus-tertiary:var(--alert-button-background-danger);--border-color-active-tertiary:var(--alert-button-background-danger)}.alert--type-error .close-button{--icon-color-default-text:var(--alert-button-icon-danger);--icon-color-hover-text:var(--alert-button-icon-danger);--icon-color-focus-text:var(--alert-button-icon-danger);--icon-color-active-text:var(--alert-button-icon-danger)}.alert--type-success{background-color:var(--alert-background-primary-success)}.alert--type-success kv-icon{--icon-color:var(--alert-icon-color-primary-success)}.alert--type-success ::slotted(*){--icon-color-default-secondary:var(--alert-button-text-success-default);--icon-color-hover-secondary:var(--alert-button-text-success-hover);--icon-color-focus-secondary:var(--alert-button-text-success-pressed);--icon-color-active-secondary:var(--alert-button-text-success-pressed);--text-color-default-secondary:var(--alert-button-text-success-default);--text-color-hover-secondary:var(--alert-button-text-success-hover);--text-color-focus-secondary:var(--alert-button-text-success-pressed);--text-color-active-secondary:var(--alert-button-text-success-pressed);--background-color-hover-secondary:var(--alert-button-background-success);--background-color-focus-secondary:var(--alert-button-background-success);--background-color-active-secondary:var(--alert-button-background-success);--border-color-default-secondary:var(--alert-button-border-success);--border-color-hover-secondary:var(--alert-button-background-success);--border-color-focus-secondary:var(--alert-button-background-success);--border-color-active-secondary:var(--alert-button-background-success);--icon-color-default-tertiary:var(--alert-button-text-success-default);--icon-color-hover-tertiary:var(--alert-button-text-success-hover);--icon-color-focus-tertiary:var(--alert-button-text-success-pressed);--icon-color-active-tertiary:var(--alert-button-text-success-pressed);--text-color-default-tertiary:var(--alert-button-text-success-default);--text-color-hover-tertiary:var(--alert-button-text-success-hover);--text-color-focus-tertiary:var(--alert-button-text-success-pressed);--text-color-active-tertiary:var(--alert-button-text-success-pressed);--background-color-hover-tertiary:var(--alert-button-background-success);--background-color-focus-tertiary:var(--alert-button-background-success);--background-color-active-tertiary:var(--alert-button-background-success);--border-color-hover-tertiary:var(--alert-button-background-success);--border-color-focus-tertiary:var(--alert-button-background-success);--border-color-active-tertiary:var(--alert-button-background-success)}.alert--type-success .close-button{--icon-color-default-text:var(--alert-button-icon-success);--icon-color-hover-text:var(--alert-button-icon-success);--icon-color-focus-text:var(--alert-button-icon-success);--icon-color-active-text:var(--alert-button-icon-success)}.alert--type-warning{background-color:var(--alert-background-primary-warning)}.alert--type-warning kv-icon{--icon-color:var(--alert-icon-color-primary-warning)}.alert--type-warning ::slotted(*){--icon-color-default-secondary:var(--alert-button-text-warning-default);--icon-color-hover-secondary:var(--alert-button-text-warning-hover);--icon-color-focus-secondary:var(--alert-button-text-warning-pressed);--icon-color-active-secondary:var(--alert-button-text-warning-pressed);--text-color-default-secondary:var(--alert-button-text-warning-default);--text-color-hover-secondary:var(--alert-button-text-warning-hover);--text-color-focus-secondary:var(--alert-button-text-warning-pressed);--text-color-active-secondary:var(--alert-button-text-warning-pressed);--background-color-hover-secondary:var(--alert-button-background-warning);--background-color-focus-secondary:var(--alert-button-background-warning);--background-color-active-secondary:var(--alert-button-background-warning);--border-color-default-secondary:var(--alert-button-border-warning);--border-color-hover-secondary:var(--alert-button-background-warning);--border-color-focus-secondary:var(--alert-button-background-warning);--border-color-active-secondary:var(--alert-button-background-warning);--icon-color-default-tertiary:var(--alert-button-text-warning-default);--icon-color-hover-tertiary:var(--alert-button-text-warning-hover);--icon-color-focus-tertiary:var(--alert-button-text-warning-pressed);--icon-color-active-tertiary:var(--alert-button-text-warning-pressed);--text-color-default-tertiary:var(--alert-button-text-warning-default);--text-color-hover-tertiary:var(--alert-button-text-warning-hover);--text-color-focus-tertiary:var(--alert-button-text-warning-pressed);--text-color-active-tertiary:var(--alert-button-text-warning-pressed);--background-color-hover-tertiary:var(--alert-button-background-warning);--background-color-focus-tertiary:var(--alert-button-background-warning);--background-color-active-tertiary:var(--alert-button-background-warning);--border-color-hover-tertiary:var(--alert-button-background-warning);--border-color-focus-tertiary:var(--alert-button-background-warning);--border-color-active-tertiary:var(--alert-button-background-warning)}.alert--type-warning .close-button{--icon-color-default-text:var(--alert-button-icon-warning);--icon-color-hover-text:var(--alert-button-icon-warning);--icon-color-focus-text:var(--alert-button-icon-warning);--icon-color-active-text:var(--alert-button-icon-warning)}.alert .main{display:flex;align-items:center;justify-content:space-between;gap:var(--alert-gap-vertical-small);padding:var(--alert-padding-y-default) var(--alert-padding-x-default)}.alert .information{display:flex;flex:1;overflow:hidden;gap:var(--alert-gap-vertical-small)}.alert .information kv-icon{height:20px;align-items:center;display:flex;--icon-height:var(--size-default);--icon-width:var(--size-default)}.alert .information .title{font-family:Proxima Nova;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0;color:var(--alert-text-default)}.alert .information .description{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;color:var(--alert-text-default);margin-top:var(--spacing-xs)}.alert .close-button::part(button){display:flex}.alert--size-small .main{flex-wrap:wrap;row-gap:var(--alert-gap-horizontal-large)}.alert--size-small .main .close-button{order:1;align-self:start}.alert--size-small .main ::slotted([slot=actions]){order:2;flex-basis:100%}.alert--size-small .main.show-icon ::slotted([slot=actions]){margin-left:calc(var(--size-default) + var(--alert-gap-vertical-small)) !important}";
const KvAlert = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.clickCloseButton = index.createEvent(this, "clickCloseButton", 7);
/** @inheritdoc */
this.size = wizard_types.EComponentSize.Large;
/** @inheritdoc */
this.showIcon = true;
/** @inheritdoc */
this.closable = false;
this.onCloseClick = (event) => {
this.clickCloseButton.emit(event);
};
}
render() {
return (index.h(index.Host, { key: 'fef4b74603eef1155295000e6ab01664b328e65d' }, index.h("div", { key: 'af27e31dbbef30303faecc97ce5b58b4a450bfb1', class: "alert-container" }, index.h("div", { key: '8f04189f2218982b7ec0538e87e2802e3a960336', part: "container", class: {
'alert': true,
[`alert--type-${this.type}`]: true,
'alert--size-small': this.size === wizard_types.EComponentSize.Small || !isEmpty.isEmpty(this.description)
} }, index.h("div", { key: 'd109469c67d7809d594e38ad2ef47aa10158b3ed', class: { 'main': true, 'show-icon': !!this.showIcon } }, index.h("div", { key: '84da6efac503aca62e0cfbb417e5bcd499a26b98', class: "information" }, this.showIcon && index.h("kv-icon", { key: '7d89b0ecdc953cafc2fdfeb370926a81b02e5469', name: ALERT_ICON_NAMES[this.type], class: "icon" }), index.h("div", { key: '0a98637c22264ef2ab6035e64d2e065ceeff9967', class: "text-container" }, index.h("div", { key: 'd2d719d7cefd6e865ddafbb12990741a2979b668', class: "title" }, this.label), index.h("slot", { key: 'a8527efd5f572058372b5436fdcb6ebb04ce3e6d', name: "description" }, this.description && index.h("div", { key: 'c89e341cc507ccdeece9619b355754b4514d7bc2', class: "description" }, this.description)))), index.h("slot", { key: 'a04eb17b38e37035ab1e736afe4484f29b96e4ff', name: "actions" }), this.closable && (index.h("kv-action-button-text", { key: '50d5403b2477a9e4c52bc79913b2e0d8038d4135', size: wizard_types.EComponentSize.Small, type: wizard_types.EActionButtonType.Text, icon: wizard_types.EIconName.Close, class: "close-button", onClick: this.onCloseClick }))), index.h("slot", { key: 'b599e02e47a1be38cbe45504c305dec8d0cdc2d6', name: "alert-content" })))));
}
};
KvAlert.style = alertCss;
exports.kv_alert = KvAlert;