@kelvininc/ui-components/components/kv-alert.js

Kelvin UI Components

import { t as EIconName, n as EAlertType, H as proxyCustomElement, I as H, J as createEvent, e as EComponentSize, K as h, m as EActionButtonType, L as Host } from './p-BP5CxQcH.js';
import { d as defineCustomElement$4 } from './p-0XA6IHyr.js';
import { d as defineCustomElement$3 } from './p-DviRLduP.js';
import { d as defineCustomElement$2 } from './p-DQ7v6WT-.js';
import { i as isEmpty } from './p-BZNGlO8m.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$1 = /*@__PURE__*/ proxyCustomElement(class KvAlert extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        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" })))));
    }
    static get style() { return alertCss; }
}, [257, "kv-alert", {
        "type": [513],
        "size": [513],
        "showIcon": [516, "show-icon"],
        "label": [513],
        "description": [513],
        "closable": [516]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["kv-alert", "kv-action-button", "kv-action-button-text", "kv-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "kv-alert":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, KvAlert$1);
            }
            break;
        case "kv-action-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "kv-action-button-text":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "kv-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}
defineCustomElement$1();

const KvAlert = KvAlert$1;
const defineCustomElement = defineCustomElement$1;

export { KvAlert, defineCustomElement };