c.ecbce863.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437
  1. import{aw as e,ax as t,ay as i,a6 as a,a7 as o,a8 as s,a as n,h as r,e as l,$ as d,o as c,r as h,n as p,m as g,az as u,ah as m,aA as v,c as f,aB as y,aC as b,aD as w,d as k}from"./main-ad130be7.js";import"./c.82eccc94.js";import{A as x}from"./c.bc5a73e9.js";import{i as $}from"./c.21c042d4.js";import{c as _}from"./c.4a97632a.js";import"./c.f1291e50.js";import"./c.2d5ed670.js";import"./c.11ad1623.js";import{b as z}from"./c.0a1cf8d0.js";import{s as C}from"./c.2645c235.js";import"./c.8e28b461.js";import"./c.f6611997.js";import"./c.743a15a1.js";import"./c.5d3ce9d6.js";import"./c.4266acdb.js";customElements.define("ha-icon-next",class extends e{connectedCallback(){super.connectedCallback(),setTimeout((()=>{this.path="ltr"===window.getComputedStyle(this).direction?t:i}),100)}}),a({_template:o`
  2. <style>
  3. :host {
  4. display: block;
  5. /**
  6. * Force app-header-layout to have its own stacking context so that its parent can
  7. * control the stacking of it relative to other elements (e.g. app-drawer-layout).
  8. * This could be done using \`isolation: isolate\`, but that's not well supported
  9. * across browsers.
  10. */
  11. position: relative;
  12. z-index: 0;
  13. }
  14. #wrapper ::slotted([slot=header]) {
  15. @apply --layout-fixed-top;
  16. z-index: 1;
  17. }
  18. #wrapper.initializing ::slotted([slot=header]) {
  19. position: relative;
  20. }
  21. :host([has-scrolling-region]) {
  22. height: 100%;
  23. }
  24. :host([has-scrolling-region]) #wrapper ::slotted([slot=header]) {
  25. position: absolute;
  26. }
  27. :host([has-scrolling-region]) #wrapper.initializing ::slotted([slot=header]) {
  28. position: relative;
  29. }
  30. :host([has-scrolling-region]) #wrapper #contentContainer {
  31. @apply --layout-fit;
  32. overflow-y: auto;
  33. -webkit-overflow-scrolling: touch;
  34. }
  35. :host([has-scrolling-region]) #wrapper.initializing #contentContainer {
  36. position: relative;
  37. }
  38. :host([fullbleed]) {
  39. @apply --layout-vertical;
  40. @apply --layout-fit;
  41. }
  42. :host([fullbleed]) #wrapper,
  43. :host([fullbleed]) #wrapper #contentContainer {
  44. @apply --layout-vertical;
  45. @apply --layout-flex;
  46. }
  47. #contentContainer {
  48. /* Create a stacking context here so that all children appear below the header. */
  49. position: relative;
  50. z-index: 0;
  51. }
  52. @media print {
  53. :host([has-scrolling-region]) #wrapper #contentContainer {
  54. overflow-y: visible;
  55. }
  56. }
  57. </style>
  58. <div id="wrapper" class="initializing">
  59. <slot id="headerSlot" name="header"></slot>
  60. <div id="contentContainer">
  61. <slot></slot>
  62. </div>
  63. </div>
  64. `,is:"app-header-layout",behaviors:[x],properties:{hasScrollingRegion:{type:Boolean,value:!1,reflectToAttribute:!0}},observers:["resetLayout(isAttached, hasScrollingRegion)"],get header(){return s(this.$.headerSlot).getDistributedNodes()[0]},_updateLayoutStates:function(){var e=this.header;if(this.isAttached&&e){this.$.wrapper.classList.remove("initializing"),e.scrollTarget=this.hasScrollingRegion?this.$.contentContainer:this.ownerDocument.documentElement;var t=e.offsetHeight;this.hasScrollingRegion?(e.style.left="",e.style.right=""):requestAnimationFrame(function(){var t=this.getBoundingClientRect(),i=document.documentElement.clientWidth-t.right;e.style.left=t.left+"px",e.style.right=i+"px"}.bind(this));var i=this.$.contentContainer.style;e.fixed&&!e.condenses&&this.hasScrollingRegion?(i.marginTop=t+"px",i.paddingTop=""):(i.paddingTop=t+"px",i.marginTop="")}}});class E extends(customElements.get("app-header-layout")){static get template(){return o`
  65. <style>
  66. :host {
  67. display: block;
  68. /**
  69. * Force app-header-layout to have its own stacking context so that its parent can
  70. * control the stacking of it relative to other elements (e.g. app-drawer-layout).
  71. * This could be done using \`isolation: isolate\`, but that's not well supported
  72. * across browsers.
  73. */
  74. position: relative;
  75. z-index: 0;
  76. }
  77. #wrapper ::slotted([slot="header"]) {
  78. @apply --layout-fixed-top;
  79. z-index: 1;
  80. }
  81. #wrapper.initializing ::slotted([slot="header"]) {
  82. position: relative;
  83. }
  84. :host([has-scrolling-region]) {
  85. height: 100%;
  86. }
  87. :host([has-scrolling-region]) #wrapper ::slotted([slot="header"]) {
  88. position: absolute;
  89. }
  90. :host([has-scrolling-region])
  91. #wrapper.initializing
  92. ::slotted([slot="header"]) {
  93. position: relative;
  94. }
  95. :host([has-scrolling-region]) #wrapper #contentContainer {
  96. @apply --layout-fit;
  97. overflow-y: auto;
  98. -webkit-overflow-scrolling: touch;
  99. }
  100. :host([has-scrolling-region]) #wrapper.initializing #contentContainer {
  101. position: relative;
  102. }
  103. #contentContainer {
  104. /* Create a stacking context here so that all children appear below the header. */
  105. position: relative;
  106. z-index: 0;
  107. /* Using 'transform' will cause 'position: fixed' elements to behave like
  108. 'position: absolute' relative to this element. */
  109. transform: translate(0);
  110. margin-left: env(safe-area-inset-left);
  111. margin-right: env(safe-area-inset-right);
  112. }
  113. @media print {
  114. :host([has-scrolling-region]) #wrapper #contentContainer {
  115. overflow-y: visible;
  116. }
  117. }
  118. </style>
  119. <div id="wrapper" class="initializing">
  120. <slot id="headerSlot" name="header"></slot>
  121. <div id="contentContainer"><slot></slot></div>
  122. <slot id="fab" name="fab"></slot>
  123. </div>
  124. `}}customElements.define("ha-app-layout",E),n([p("ha-config-section")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[l()],key:"isWide",value:()=>!1},{kind:"field",decorators:[l({type:Boolean})],key:"vertical",value:()=>!1},{kind:"field",decorators:[l({type:Boolean,attribute:"full-width"})],key:"fullWidth",value:()=>!1},{kind:"method",key:"render",value:function(){return d`
  125. <div
  126. class="content ${c({narrow:!this.isWide,"full-width":this.fullWidth})}"
  127. >
  128. <div class="header"><slot name="header"></slot></div>
  129. <div
  130. class="together layout ${c({narrow:!this.isWide,vertical:this.vertical||!this.isWide,horizontal:!this.vertical&&this.isWide})}"
  131. >
  132. <div class="intro"><slot name="introduction"></slot></div>
  133. <div class="panel flex-auto"><slot></slot></div>
  134. </div>
  135. </div>
  136. `}},{kind:"get",static:!0,key:"styles",value:function(){return h`
  137. :host {
  138. display: block;
  139. }
  140. .content {
  141. padding: 28px 20px 0;
  142. max-width: 1040px;
  143. margin: 0 auto;
  144. }
  145. .layout {
  146. display: flex;
  147. }
  148. .horizontal {
  149. flex-direction: row;
  150. }
  151. .vertical {
  152. flex-direction: column;
  153. }
  154. .flex-auto {
  155. flex: 1 1 auto;
  156. }
  157. .header {
  158. font-family: var(--paper-font-headline_-_font-family);
  159. -webkit-font-smoothing: var(
  160. --paper-font-headline_-_-webkit-font-smoothing
  161. );
  162. font-size: var(--paper-font-headline_-_font-size);
  163. font-weight: var(--paper-font-headline_-_font-weight);
  164. letter-spacing: var(--paper-font-headline_-_letter-spacing);
  165. line-height: var(--paper-font-headline_-_line-height);
  166. opacity: var(--dark-primary-opacity);
  167. }
  168. .together {
  169. margin-top: 32px;
  170. }
  171. .intro {
  172. font-family: var(--paper-font-subhead_-_font-family);
  173. -webkit-font-smoothing: var(
  174. --paper-font-subhead_-_-webkit-font-smoothing
  175. );
  176. font-weight: var(--paper-font-subhead_-_font-weight);
  177. line-height: var(--paper-font-subhead_-_line-height);
  178. width: 100%;
  179. opacity: var(--dark-primary-opacity);
  180. font-size: 14px;
  181. padding-bottom: 20px;
  182. }
  183. .horizontal .intro {
  184. max-width: 400px;
  185. margin-right: 40px;
  186. }
  187. .panel {
  188. margin-top: -24px;
  189. }
  190. .panel ::slotted(*) {
  191. margin-top: 24px;
  192. display: block;
  193. }
  194. .narrow.content {
  195. max-width: 640px;
  196. }
  197. .narrow .together {
  198. margin-top: 20px;
  199. }
  200. .narrow .intro {
  201. padding-bottom: 20px;
  202. margin-right: 0;
  203. max-width: 500px;
  204. }
  205. .full-width {
  206. padding: 0;
  207. }
  208. .full-width .layout {
  209. flex-direction: column;
  210. }
  211. `}}]}}),r);const j=g(((e,t)=>{var i,a;const o=[],s=[],n=[];var r,l;return e.repositories.forEach((t=>{var i;if("pending-restart"===t.status&&n.push(t),e.addedToLovelace(e,t)||s.push(t),t.installed&&null!==(i=e.removed.map((e=>e.repository)))&&void 0!==i&&i.includes(t.full_name)){const i=e.removed.find((e=>e.repository===t.full_name));o.push({name:e.localize("entry.messages.removed_repository",{repository:i.repository}),info:i.reason,severity:"warning",dialog:"remove",repository:t})}})),null!==(i=e.info)&&void 0!==i&&i.startup&&["setup","waiting","startup"].includes(e.info.stage)&&o.push({name:e.localize(`entry.messages.${e.info.stage}.title`),info:e.localize(`entry.messages.${e.info.stage}.content`),severity:"warning"}),null!==(a=e.info)&&void 0!==a&&a.disabled_reason?[{name:e.localize("entry.messages.disabled.title"),secondary:e.localize(`entry.messages.disabled.${null===(r=e.info)||void 0===r?void 0:r.disabled_reason}.title`),info:e.localize(`entry.messages.disabled.${null===(l=e.info)||void 0===l?void 0:l.disabled_reason}.description`),severity:"error"}]:(s.length>0&&o.push({name:e.localize("entry.messages.resources.title"),info:e.localize("entry.messages.resources.content",{number:s.length}),severity:"error"}),n.length>0&&o.push({name:e.localize("entry.messages.restart.title"),path:t?"/_my_redirect/server_controls":void 0,info:e.localize("entry.messages.restart.content",{number:n.length,pluralWording:1===n.length?e.localize("common.integration"):e.localize("common.integration_plural")}),severity:"error"}),o)}));let S=n([p("hacs-entry-panel")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[l({attribute:!1})],key:"hacs",value:void 0},{kind:"field",decorators:[l({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[l({attribute:!1})],key:"route",value:void 0},{kind:"field",decorators:[l({type:Boolean,reflect:!0})],key:"narrow",value:void 0},{kind:"field",decorators:[l({type:Boolean})],key:"isWide",value:void 0},{kind:"method",key:"render",value:function(){var e,t;const i=[],a=[],o=j(this.hacs,$(this.hass,"my"));return this.hacs.repositories.forEach((e=>{e.pending_upgrade&&i.push(e)})),o.forEach((e=>{a.push({iconPath:u,name:e.name,info:e.info,secondary:e.secondary,path:e.path||"",severity:e.severity,dialog:e.dialog,repository:e.repository})})),this.dispatchEvent(new CustomEvent("update-hacs",{detail:{messages:a,updates:i},bubbles:!0,composed:!0})),d`
  212. <ha-app-layout>
  213. <app-header fixed slot="header">
  214. <app-toolbar>
  215. <ha-menu-button .hass=${this.hass} .narrow=${this.narrow}></ha-menu-button>
  216. <div main-title>${this.narrow?"HACS":"Home Assistant Community Store"}</div>
  217. </app-toolbar>
  218. </app-header>
  219. <ha-config-section .narrow=${this.narrow} .isWide=${this.isWide} full-width>
  220. ${0!==(null===(e=this.hacs.messages)||void 0===e?void 0:e.length)?this.hacs.messages.map((e=>d`
  221. <ha-alert
  222. .alertType=${e.severity}
  223. .title=${e.secondary?`${e.name} - ${e.secondary}`:e.name}
  224. .rtl=${_(this.hass)}
  225. >
  226. ${e.info}
  227. <mwc-button
  228. slot="action"
  229. .label=${e.path?this.hacs.localize("common.navigate"):e.dialog?this.hacs.localize("common.show"):""}
  230. @click=${()=>e.path?m(e.path):this._openDialog(e)}
  231. >
  232. </mwc-button>
  233. </ha-alert>
  234. `)):(this.narrow,"")}
  235. ${0!==(null===(t=this.hacs.updates)||void 0===t?void 0:t.length)?d` <ha-card outlined>
  236. <div class="title">${this.hacs.localize("common.updates")}</div>
  237. <mwc-list>
  238. ${v(this.hacs.updates).map((e=>d`
  239. <ha-clickable-list-item
  240. graphic="avatar"
  241. disableHref
  242. twoline
  243. @click=${()=>this._openUpdateDialog(e)}
  244. >
  245. ${"integration"===e.category?d`
  246. <img
  247. loading="lazy"
  248. .src=${z({domain:e.domain,darkOptimized:this.hass.themes.darkMode,type:"icon"})}
  249. referrerpolicy="no-referrer"
  250. @error=${this._onImageError}
  251. @load=${this._onImageLoad}
  252. slot="graphic"
  253. />
  254. `:d`
  255. <ha-svg-icon
  256. slot="graphic"
  257. path="${f}"
  258. style="padding-left: 0; height: 40px; width: 40px;"
  259. >
  260. </ha-svg-icon>
  261. `}
  262. <span>${e.name}</span>
  263. <span slot="secondary"
  264. >${this.hacs.localize("sections.pending_repository_upgrade",{downloaded:e.installed_version,available:e.available_version})}</span
  265. >
  266. </ha-clickable-list-item>
  267. `))}
  268. </mwc-list>
  269. </ha-card>`:""}
  270. <ha-card outlined>
  271. <mwc-list>
  272. ${this.hacs.sections.map((e=>d`
  273. <ha-clickable-list-item
  274. graphic="avatar"
  275. twoline
  276. .hasMeta=${!this.narrow}
  277. href=${e.path}
  278. >
  279. <div
  280. slot="graphic"
  281. class=${e.iconColor?"icon-background":""}
  282. .style="background-color: ${e.iconColor||"undefined"}"
  283. >
  284. <ha-svg-icon .path=${e.iconPath}></ha-svg-icon>
  285. </div>
  286. <span>${e.name}</span>
  287. <span slot="secondary">${e.description}</span>
  288. ${this.narrow?"":d`<ha-icon-next slot="meta"></ha-icon-next>`}
  289. </ha-clickable-list-item>
  290. `))}
  291. ${$(this.hass,"my")&&$(this.hass,"hassio")?d`
  292. <ha-clickable-list-item
  293. graphic="avatar"
  294. disableHref
  295. twoline
  296. @click=${this._openSupervisorDialog}
  297. .hasMeta=${!this.narrow}
  298. >
  299. <div
  300. class="icon-background"
  301. slot="graphic"
  302. style="background-color: rgb(64, 132, 205)"
  303. >
  304. <ha-svg-icon .path=${y}></ha-svg-icon>
  305. </div>
  306. <span>${this.hacs.localize("sections.addon.title")}</span>
  307. <span slot="secondary"
  308. >${this.hacs.localize("sections.addon.description")}</span
  309. >
  310. </ha-clickable-list-item>
  311. `:""}
  312. <ha-clickable-list-item
  313. graphic="avatar"
  314. twoline
  315. @click=${this._openAboutDialog}
  316. disableHref
  317. >
  318. <div
  319. class="icon-background"
  320. slot="graphic"
  321. style="background-color: rgb(74, 89, 99)"
  322. >
  323. <ha-svg-icon .path=${b}></ha-svg-icon>
  324. </div>
  325. <span>${this.hacs.localize("sections.about.title")}</span>
  326. <span slot="secondary">${this.hacs.localize("sections.about.description")}</span>
  327. </ha-clickable-list-item>
  328. </mwc-list>
  329. </ha-card>
  330. </ha-config-section>
  331. </ha-app-layout>
  332. `}},{kind:"method",key:"_onImageLoad",value:function(e){e.target.style.visibility="initial"}},{kind:"method",key:"_onImageError",value:function(e){e.target&&(e.target.outerHTML=`\n <div slot="item-icon" class="icon-background">\n <ha-svg-icon path="${f}" style="padding-left: 0; height: 40px; width: 40px;"></ha-svg-icon>\n </div>`)}},{kind:"method",key:"_openDialog",value:function(e){e.dialog&&("remove"==e.dialog&&(e.dialog="removed"),this.dispatchEvent(new CustomEvent("hacs-dialog",{detail:{type:e.dialog,repository:e.repository},bubbles:!0,composed:!0})))}},{kind:"method",key:"_openUpdateDialog",value:function(e){this.dispatchEvent(new CustomEvent("hacs-dialog",{detail:{type:"update",repository:e.id},bubbles:!0,composed:!0}))}},{kind:"method",key:"_openAboutDialog",value:async function(){C(this,this.hacs)}},{kind:"method",key:"_openSupervisorDialog",value:async function(){this.dispatchEvent(new CustomEvent("hacs-dialog",{detail:{type:"navigate",path:"/_my_redirect/supervisor"},bubbles:!0,composed:!0}))}},{kind:"get",static:!0,key:"styles",value:function(){return[w,k,h`
  333. :host {
  334. --mdc-list-vertical-padding: 0;
  335. }
  336. ha-card:last-child {
  337. margin-bottom: env(safe-area-inset-bottom);
  338. }
  339. :host(:not([narrow])) ha-card:last-child {
  340. margin-bottom: max(24px, env(safe-area-inset-bottom));
  341. }
  342. ha-config-section {
  343. margin: auto;
  344. margin-top: -32px;
  345. max-width: 600px;
  346. }
  347. ha-card {
  348. overflow: hidden;
  349. }
  350. ha-card a {
  351. text-decoration: none;
  352. color: var(--primary-text-color);
  353. }
  354. a.button {
  355. display: block;
  356. color: var(--primary-color);
  357. padding: 16px;
  358. }
  359. .title {
  360. font-size: 16px;
  361. padding: 16px;
  362. padding-bottom: 0;
  363. }
  364. @media all and (max-width: 600px) {
  365. ha-card {
  366. border-width: 1px 0;
  367. border-radius: 0;
  368. box-shadow: unset;
  369. }
  370. ha-config-section {
  371. margin-top: -42px;
  372. }
  373. }
  374. ha-svg-icon,
  375. ha-icon-next {
  376. color: var(--secondary-text-color);
  377. height: 24px;
  378. width: 24px;
  379. display: block;
  380. }
  381. ha-svg-icon {
  382. padding: 8px;
  383. }
  384. .icon-background {
  385. border-radius: 50%;
  386. }
  387. .icon-background ha-svg-icon {
  388. color: #fff;
  389. }
  390. ha-clickable-list-item {
  391. cursor: pointer;
  392. font-size: 16px;
  393. padding: 0;
  394. }
  395. `]}}]}}),r);export{S as HacsEntryPanel};