c.866cbf1f.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. 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-bfa41146.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`
  2. <div
  3. class="issue-type ${r({rtl:this.rtl,[this.alertType]:!0})}"
  4. role="alert"
  5. >
  6. <div class="icon ${this.title?"":"no-title"}">
  7. <slot name="icon">
  8. <ha-svg-icon .path=${y[this.alertType]}></ha-svg-icon>
  9. </slot>
  10. </div>
  11. <div class="content">
  12. <div class="main-content">
  13. ${this.title?o`<div class="title">${this.title}</div>`:""}
  14. <slot></slot>
  15. </div>
  16. <div class="action">
  17. <slot name="action">
  18. ${this.dismissable?o`<ha-icon-button
  19. @click=${this._dismiss_clicked}
  20. label="Dismiss alert"
  21. .path=${s}
  22. ></ha-icon-button>`:""}
  23. </slot>
  24. </div>
  25. </div>
  26. </div>
  27. `}},{kind:"method",key:"_dismiss_clicked",value:function(){n(this,"alert-dismissed-clicked")}},{kind:"field",static:!0,key:"styles",value:()=>a`
  28. .issue-type {
  29. position: relative;
  30. padding: 8px;
  31. display: flex;
  32. }
  33. .issue-type.rtl {
  34. flex-direction: row-reverse;
  35. }
  36. .issue-type::after {
  37. position: absolute;
  38. top: 0;
  39. right: 0;
  40. bottom: 0;
  41. left: 0;
  42. opacity: 0.12;
  43. pointer-events: none;
  44. content: "";
  45. border-radius: 4px;
  46. }
  47. .icon {
  48. z-index: 1;
  49. }
  50. .icon.no-title {
  51. align-self: center;
  52. }
  53. .issue-type.rtl > .content {
  54. flex-direction: row-reverse;
  55. text-align: right;
  56. }
  57. .content {
  58. display: flex;
  59. justify-content: space-between;
  60. align-items: center;
  61. width: 100%;
  62. }
  63. .action {
  64. z-index: 1;
  65. width: min-content;
  66. --mdc-theme-primary: var(--primary-text-color);
  67. }
  68. .main-content {
  69. overflow-wrap: anywhere;
  70. word-break: break-word;
  71. margin-left: 8px;
  72. margin-right: 0;
  73. }
  74. .issue-type.rtl > .content > .main-content {
  75. margin-left: 0;
  76. margin-right: 8px;
  77. }
  78. .title {
  79. margin-top: 2px;
  80. font-weight: bold;
  81. }
  82. .action mwc-button,
  83. .action ha-icon-button {
  84. --mdc-theme-primary: var(--primary-text-color);
  85. --mdc-icon-button-size: 36px;
  86. }
  87. .issue-type.info > .icon {
  88. color: var(--info-color);
  89. }
  90. .issue-type.info::after {
  91. background-color: var(--info-color);
  92. }
  93. .issue-type.warning > .icon {
  94. color: var(--warning-color);
  95. }
  96. .issue-type.warning::after {
  97. background-color: var(--warning-color);
  98. }
  99. .issue-type.error > .icon {
  100. color: var(--error-color);
  101. }
  102. .issue-type.error::after {
  103. background-color: var(--error-color);
  104. }
  105. .issue-type.success > .icon {
  106. color: var(--success-color);
  107. }
  108. .issue-type.success::after {
  109. background-color: var(--success-color);
  110. }
  111. `}]}}),t);