@kelvininc/ui-components
Version:
Kelvin UI Components
40 lines (35 loc) • 14 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-BOTigrTZ.js';
import { o as EIconName, k as EAlertType, c as EComponentSize, j as EActionButtonType } from './wizard.types-COrzvkrr.js';
import { i as isEmpty } from './isEmpty-DYR6-7ab.js';
import './isObject-Dkd2PDJ-.js';
const ALERT_ICON_NAMES = {
[EAlertType.Info]: EIconName.Error,
[EAlertType.Error]: EIconName.Error,
[EAlertType.Success]: EIconName.Success,
[EAlertType.Warning]: 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) {
registerInstance(this, hostRef);
this.clickCloseButton = createEvent(this, "clickCloseButton", 7);
/** @inheritdoc */
this.size = EComponentSize.Large;
/** @inheritdoc */
this.showIcon = true;
/** @inheritdoc */
this.closable = false;
this.onCloseClick = (event) => {
this.clickCloseButton.emit(event);
};
}
render() {
return (h(Host, { key: 'fef4b74603eef1155295000e6ab01664b328e65d' }, h("div", { key: 'af27e31dbbef30303faecc97ce5b58b4a450bfb1', class: "alert-container" }, h("div", { key: '8f04189f2218982b7ec0538e87e2802e3a960336', part: "container", class: {
'alert': true,
[`alert--type-${this.type}`]: true,
'alert--size-small': this.size === EComponentSize.Small || !isEmpty(this.description)
} }, h("div", { key: 'd109469c67d7809d594e38ad2ef47aa10158b3ed', class: { 'main': true, 'show-icon': !!this.showIcon } }, h("div", { key: '84da6efac503aca62e0cfbb417e5bcd499a26b98', class: "information" }, this.showIcon && h("kv-icon", { key: '7d89b0ecdc953cafc2fdfeb370926a81b02e5469', name: ALERT_ICON_NAMES[this.type], class: "icon" }), h("div", { key: '0a98637c22264ef2ab6035e64d2e065ceeff9967', class: "text-container" }, h("div", { key: 'd2d719d7cefd6e865ddafbb12990741a2979b668', class: "title" }, this.label), h("slot", { key: 'a8527efd5f572058372b5436fdcb6ebb04ce3e6d', name: "description" }, this.description && h("div", { key: 'c89e341cc507ccdeece9619b355754b4514d7bc2', class: "description" }, this.description)))), h("slot", { key: 'a04eb17b38e37035ab1e736afe4484f29b96e4ff', name: "actions" }), this.closable && (h("kv-action-button-text", { key: '50d5403b2477a9e4c52bc79913b2e0d8038d4135', size: EComponentSize.Small, type: EActionButtonType.Text, icon: EIconName.Close, class: "close-button", onClick: this.onCloseClick }))), h("slot", { key: 'b599e02e47a1be38cbe45504c305dec8d0cdc2d6', name: "alert-content" })))));
}
};
KvAlert.style = alertCss;
export { KvAlert as kv_alert };