| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- 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);
|