@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 13.1 kB
JavaScript
import{r,c as t,h as o,H as e}from"./p-WTwLUJcM.js";import{o as a,k as c,c as n,j as l}from"./p-COrzvkrr.js";import{i as s}from"./p-GpUjqmUL.js";import"./p-Dkd2PDJ-.js";const i={[c.Info]:a.Error,[c.Error]:a.Error,[c.Success]:a.Success,[c.Warning]:a.Warning},d=class{constructor(o){r(this,o),this.clickCloseButton=t(this,"clickCloseButton",7),this.size=n.Large,this.showIcon=!0,this.closable=!1,this.onCloseClick=r=>{this.clickCloseButton.emit(r)}}render(){return o(e,{key:"fef4b74603eef1155295000e6ab01664b328e65d"},o("div",{key:"af27e31dbbef30303faecc97ce5b58b4a450bfb1",class:"alert-container"},o("div",{key:"8f04189f2218982b7ec0538e87e2802e3a960336",part:"container",class:{alert:!0,[`alert--type-${this.type}`]:!0,"alert--size-small":this.size===n.Small||!s(this.description)}},o("div",{key:"d109469c67d7809d594e38ad2ef47aa10158b3ed",class:{main:!0,"show-icon":!!this.showIcon}},o("div",{key:"84da6efac503aca62e0cfbb417e5bcd499a26b98",class:"information"},this.showIcon&&o("kv-icon",{key:"7d89b0ecdc953cafc2fdfeb370926a81b02e5469",name:i[this.type],class:"icon"}),o("div",{key:"0a98637c22264ef2ab6035e64d2e065ceeff9967",class:"text-container"},o("div",{key:"d2d719d7cefd6e865ddafbb12990741a2979b668",class:"title"},this.label),o("slot",{key:"a8527efd5f572058372b5436fdcb6ebb04ce3e6d",name:"description"},this.description&&o("div",{key:"c89e341cc507ccdeece9619b355754b4514d7bc2",class:"description"},this.description)))),o("slot",{key:"a04eb17b38e37035ab1e736afe4484f29b96e4ff",name:"actions"}),this.closable&&o("kv-action-button-text",{key:"50d5403b2477a9e4c52bc79913b2e0d8038d4135",size:n.Small,type:l.Text,icon:a.Close,class:"close-button",onClick:this.onCloseClick})),o("slot",{key:"b599e02e47a1be38cbe45504c305dec8d0cdc2d6",name:"alert-content"}))))}};d.style='@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}';export{d as kv_alert}