115 lines
3.4 KiB
JavaScript
115 lines
3.4 KiB
JavaScript
import{a as e,h as t,e as i,$ as o,o as r,z as s,A as n,r as a,n as c,C as l,D as d,E as u,F as p}from"./main-ad130be7.js";const y={info:l,warning:d,error:u,success:p};e([c("ha-alert")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[i()],key:"title",value:()=>""},{kind:"field",decorators:[i({attribute:"alert-type"})],key:"alertType",value:()=>"info"},{kind:"field",decorators:[i({type:Boolean})],key:"dismissable",value:()=>!1},{kind:"field",decorators:[i({type:Boolean})],key:"rtl",value:()=>!1},{kind:"method",key:"render",value:function(){return o`
|
|
<div
|
|
class="issue-type ${r({rtl:this.rtl,[this.alertType]:!0})}"
|
|
role="alert"
|
|
>
|
|
<div class="icon ${this.title?"":"no-title"}">
|
|
<slot name="icon">
|
|
<ha-svg-icon .path=${y[this.alertType]}></ha-svg-icon>
|
|
</slot>
|
|
</div>
|
|
<div class="content">
|
|
<div class="main-content">
|
|
${this.title?o`<div class="title">${this.title}</div>`:""}
|
|
<slot></slot>
|
|
</div>
|
|
<div class="action">
|
|
<slot name="action">
|
|
${this.dismissable?o`<ha-icon-button
|
|
@click=${this._dismiss_clicked}
|
|
label="Dismiss alert"
|
|
.path=${s}
|
|
></ha-icon-button>`:""}
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`}},{kind:"method",key:"_dismiss_clicked",value:function(){n(this,"alert-dismissed-clicked")}},{kind:"field",static:!0,key:"styles",value:()=>a`
|
|
.issue-type {
|
|
position: relative;
|
|
padding: 8px;
|
|
display: flex;
|
|
}
|
|
.issue-type.rtl {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.issue-type::after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
opacity: 0.12;
|
|
pointer-events: none;
|
|
content: "";
|
|
border-radius: 4px;
|
|
}
|
|
.icon {
|
|
z-index: 1;
|
|
}
|
|
.icon.no-title {
|
|
align-self: center;
|
|
}
|
|
.issue-type.rtl > .content {
|
|
flex-direction: row-reverse;
|
|
text-align: right;
|
|
}
|
|
.content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
.action {
|
|
z-index: 1;
|
|
width: min-content;
|
|
--mdc-theme-primary: var(--primary-text-color);
|
|
}
|
|
.main-content {
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
margin-left: 8px;
|
|
margin-right: 0;
|
|
}
|
|
.issue-type.rtl > .content > .main-content {
|
|
margin-left: 0;
|
|
margin-right: 8px;
|
|
}
|
|
.title {
|
|
margin-top: 2px;
|
|
font-weight: bold;
|
|
}
|
|
.action mwc-button,
|
|
.action ha-icon-button {
|
|
--mdc-theme-primary: var(--primary-text-color);
|
|
--mdc-icon-button-size: 36px;
|
|
}
|
|
.issue-type.info > .icon {
|
|
color: var(--info-color);
|
|
}
|
|
.issue-type.info::after {
|
|
background-color: var(--info-color);
|
|
}
|
|
|
|
.issue-type.warning > .icon {
|
|
color: var(--warning-color);
|
|
}
|
|
.issue-type.warning::after {
|
|
background-color: var(--warning-color);
|
|
}
|
|
|
|
.issue-type.error > .icon {
|
|
color: var(--error-color);
|
|
}
|
|
.issue-type.error::after {
|
|
background-color: var(--error-color);
|
|
}
|
|
|
|
.issue-type.success > .icon {
|
|
color: var(--success-color);
|
|
}
|
|
.issue-type.success::after {
|
|
background-color: var(--success-color);
|
|
}
|
|
`}]}}),t);
|