iobroker.lovelace
Version:
With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI
1 lines • 18.5 kB
JavaScript
export const __rspack_esm_id=91793;export const __rspack_esm_ids=[91793];export const __webpack_modules__={99939(e,t,a){a.d(t,{S_:()=>o,Xd:()=>d,lZ:()=>c});a(74423),a(18111),a(7588),a(17642),a(58004),a(33853),a(45876),a(32475),a(15024),a(31698);const i=["zone","persistent_notification"],s=(e,t)=>{if("call-service"!==t.action||!t.target?.entity_id&&!t.service_data?.entity_id&&!t.data?.entity_id)return;let a=t.service_data?.entity_id??t.data?.entity_id??t.target?.entity_id;Array.isArray(a)||(a=[a]);for(const t of a)e.add(t)},r=(e,t)=>{t&&("string"!=typeof t?(t.entity&&e.add(t.entity),t.camera_image&&e.add(t.camera_image),t.tap_action&&s(e,t.tap_action),t.hold_action&&s(e,t.hold_action)):e.add(t))},n=(e,t)=>{t.entity&&r(e,t.entity),t.entities&&Array.isArray(t.entities)&&t.entities.forEach(t=>r(e,t)),t.card&&n(e,t.card),t.cards&&Array.isArray(t.cards)&&t.cards.forEach(t=>n(e,t)),t.elements&&Array.isArray(t.elements)&&t.elements.forEach(t=>n(e,t)),t.badges&&Array.isArray(t.badges)&&t.badges.forEach(t=>r(e,t)),t.sections&&Array.isArray(t.sections)&&t.sections.forEach(t=>n(e,t))},o=e=>{const t=new Set;return e.views.forEach(e=>{n(t,e)}),t},d=(e,t)=>{const a=new Set;for(const s of Object.keys(e.states))t.has(s)||i.includes(s.split(".",1)[0])||a.add(s);return a},c=(e,t)=>{const a=o(t);return d(e,a)}},81797(e,t,a){a.a(e,async function(e,t){try{a(74423),a(18111),a(22489),a(61701);var i=a(62826),s=a(78648),r=a(5124),n=a(22441),o=a(6412),d=a(91450),c=a(22786),l=a(93905),h=a(1087),p=a(52220),g=(a(11382),a(65829)),u=a(36866),y=a(22675),m=a(45291),v=a(14503),_=a(99939),f=a(8349),b=a(43100),w=a(92708),E=e([g,u,f,b]);[g,u,f,b]=E.then?(await E)():E;class C extends r.WF{async focus(){await this.updateComplete,await(this._searchInput?.updateComplete),this._searchInput?.focus()}render(){if(!(this.hass&&this.lovelace&&this._unusedEntities&&this._usedEntities))return r.s6;const e=this._suggestedCards(this._cards),t=this._otherCards(this._cards),a=this._energyCards(this._cards),i=this._customCards(this._cards);return r.qy` <ha-input-search appearance="outlined" .value="${this._filter}" ="${this._handleSearchChange}" .placeholder="${this.hass.localize("ui.panel.lovelace.editor.edit_card.search_cards")}"></ha-input-search> <div id="content" class="ha-scrollbar"> ${this._filter?r.qy`<div class="cards-container"> ${this._filterCards(this._cards,this._filter).map(e=>e.element)} </div>`:r.qy` ${e.length>0?r.qy` <ha-expansion-panel expanded> <div slot="header" class="cards-container-header"> ${this.hass.localize("ui.panel.lovelace.editor.card.generic.suggested_cards")} </div> <div class="cards-container"> ${this._renderClipboardCard()} ${e.map(e=>e.element)} </div> </ha-expansion-panel>`:r.s6} <ha-expansion-panel expanded> <div slot="header" class="cards-container-header"> ${this.hass.localize("ui.panel.lovelace.editor.card.generic.core_cards")} </div> <div class="cards-container"> ${0===e.length?this._renderClipboardCard():r.s6} ${t.map(e=>e.element)} </div> </ha-expansion-panel> <ha-expansion-panel> <div slot="header" class="cards-container-header"> ${this.hass.localize("ui.panel.lovelace.editor.card.generic.energy_cards")} </div> <div class="cards-container"> ${a.map(e=>e.element)} </div> </ha-expansion-panel> ${i.length>0?r.qy` <ha-expansion-panel expanded> <div slot="header" class="cards-container-header"> ${this.hass.localize("ui.panel.lovelace.editor.card.generic.custom_cards")} </div> <div class="cards-container"> ${i.map(e=>e.element)} </div> </ha-expansion-panel> `:r.s6} `} <div class="cards-container"> <div class="card manual" ="${this._cardPicked}" .config="${{type:""}}"> <div class="card-header"> ${this.hass.localize("ui.panel.lovelace.editor.card.generic.manual")} </div> <div class="preview description"> ${this.hass.localize("ui.panel.lovelace.editor.card.generic.manual_description")} </div> <ha-ripple></ha-ripple> </div> </div> </div> `}shouldUpdate(e){const t=e.get("hass");return!t||t.locale!==this.hass.locale}firstUpdated(){if(!this.hass||!this.lovelace)return;const e=(0,_.S_)(this.lovelace),t=(0,_.Xd)(this.hass,e);this._usedEntities=[...e].filter(e=>this.hass.states[e]&&this.hass.states[e].state!==y.Hh&&this.hass.states[e].state!==y.HV),this._unusedEntities=[...t].filter(e=>this.hass.states[e]&&this.hass.states[e].state!==y.Hh&&this.hass.states[e].state!==y.HV),this._loadCards()}updated(e){if(super.updated(e),e.has("_filter")){const e=this.parentElement.shadowRoot.getElementById("content");e&&e.scrollTo({behavior:"auto",top:0})}}_loadCards(){let e=w.j.map(e=>({name:this.hass.localize(`ui.panel.lovelace.editor.card.${e.type}.name`),description:this.hass.localize(`ui.panel.lovelace.editor.card.${e.type}.description`),isSuggested:this.suggestedCards?.includes(e.type)||!1,...e}));e=e.sort((e,t)=>e.isSuggested&&!t.isSuggested?-1:!e.isSuggested&&t.isSuggested?1:(0,p.xL)(e.name||e.type,t.name||t.type,this.hass?.language)),e=e.concat(w.U.map(e=>({name:this.hass.localize(`ui.panel.lovelace.editor.card.${e.type}.name`),description:this.hass.localize(`ui.panel.lovelace.editor.card.${e.type}.description`),isEnergy:!0,...e}))),m.J_.length>0&&(e=e.concat(m.J_.map(e=>({type:e.type,name:e.name,description:e.description,showElement:e.preview,isCustom:!0})).sort((e,t)=>(0,p.xL)(e.name||e.type,t.name||t.type,this.hass?.language)))),this._cards=e.map(e=>({card:e,element:r.qy`${(0,d.T)(this._renderCardElement(e),r.qy` <div class="card spinner"> <ha-spinner></ha-spinner> </div> `)}`}))}_renderClipboardCard(){return this._clipboard?r.qy` ${(0,d.T)(this._renderCardElement({type:this._clipboard.type,showElement:!0,isCustom:!1,name:this.hass.localize("ui.panel.lovelace.editor.card.generic.paste"),description:`${this.hass.localize("ui.panel.lovelace.editor.card.generic.paste_description",{type:this._clipboard.type})}`},this._clipboard),r.qy` <div class="card spinner"> <ha-spinner></ha-spinner> </div> `)}`:r.s6}_handleSearchChange(e){this._filter=e.target.value??""}_cardPicked(e){const t=e.currentTarget.config;(0,h.r)(this,"config-changed",{config:t})}_tryCreateCardElement(e){const t=(0,f.MJ)(e);return t.hass=this.hass,t.addEventListener("ll-rebuild",a=>{a.stopPropagation(),this._rebuildCard(t,e)},{once:!0}),t}_rebuildCard(e,t){let a;try{a=this._tryCreateCardElement(t)}catch(e){return}e.parentElement&&e.parentElement.replaceChild(a,e)}async _renderCardElement(e,t){let{type:a}=e;const{showElement:i,isCustom:s,name:n,description:d}=e,c=s?(0,m.wi)(a):void 0;let l;s&&(a=`${m.IP}${a}`);let h=t??{type:a};if(this.hass&&this.lovelace&&(t||(h=await(0,b.N)(this.hass,a,this._unusedEntities,this._usedEntities)),i))try{l=this._tryCreateCardElement(h)}catch(e){l=void 0}return l&&(l.tabIndex=-1),r.qy` <div class="card" tabindex="0"> <div class="overlay" ="${this._cardPicked}" .config="${h}"></div> <div class="card-header"> ${c?c.name||c.type:n} </div> <div class="preview ${(0,o.H)({description:!l||"HUI-ERROR-CARD"===l.tagName})}"> ${l&&"HUI-ERROR-CARD"!==l.tagName?l:c?c.description||this.hass.localize("ui.panel.lovelace.editor.cardpicker.no_description"):d} </div> <ha-ripple></ha-ripple> </div> `}static get styles(){return[v.dp,r.AH`:host{display:flex;flex-direction:column;min-height:0}#content{flex:1;min-height:0;overflow:auto}ha-input-search{padding:var(--ha-space-3) var(--ha-space-3) 0;position:sticky;top:0;z-index:10}.cards-container-header{font-size:var(--ha-font-size-l);font-weight:var(--ha-font-weight-medium);padding:var(--ha-space-3) var(--ha-space-2);margin:0;grid-column:1/-1;position:sticky;top:0;z-index:1;background:linear-gradient(90deg,var(--ha-dialog-surface-background,var(--mdc-theme-surface,#fff)) 0%,#ffffff00 80%)}.cards-container{display:grid;gap:var(--ha-space-2);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));padding:var(--ha-space-3)}.card{height:100%;max-width:500px;display:flex;flex-direction:column;border-radius:var(--ha-card-border-radius,var(--ha-border-radius-lg));background:var(--primary-background-color,#fafafa);cursor:pointer;position:relative;overflow:hidden;border:var(--ha-card-border-width,1px) solid var(--ha-card-border-color,var(--divider-color))}.card-header{color:var(--ha-card-header-color,var(--primary-text-color));font-family:var(--ha-card-header-font-family, inherit);font-size:var(--ha-font-size-l);font-weight:var(--ha-font-weight-bold);letter-spacing:-.012em;line-height:var(--ha-line-height-condensed);padding:var(--ha-space-3) var(--ha-space-4);display:block;text-align:center}.preview{pointer-events:none;margin:var(--ha-space-5);flex-grow:1;display:flex;align-items:center;justify-content:center}.preview>:first-child{display:block;width:100%}.description{text-align:center}.spinner{align-items:center;justify-content:center}.overlay{position:absolute;width:100%;height:100%;z-index:1;box-sizing:border-box;border-radius:var(--ha-card-border-radius,var(--ha-border-radius-lg))}.manual{max-width:none;grid-column:1/-1}.icon{position:absolute;top:var(--ha-space-2);right:var(--ha-space-2);inset-inline-start:var(--ha-space-2);inset-inline-end:var(--ha-space-2);border-radius:var(--ha-border-radius-circle);--mdc-icon-size:var(--ha-space-4);line-height:var(--ha-space-4);box-sizing:border-box;color:var(--text-primary-color);padding:var(--ha-space-1)}.icon.custom{background:var(--warning-color)}`]}constructor(...e){super(...e),this._cards=[],this._filter="",this._filterCards=(0,c.A)((e,t)=>{if(!t)return e;let a=e.map(e=>e.card);const i={keys:["type","name","description"],isCaseSensitive:!1,minMatchCharLength:Math.min(t.length,2),threshold:.2,ignoreDiacritics:!0,ignoreLocation:!0},r=new s.A(a,i);return a=r.search(t).map(e=>e.item),e.filter(e=>a.includes(e.card))}),this._suggestedCards=(0,c.A)(e=>e.filter(e=>e.card.isSuggested)),this._customCards=(0,c.A)(e=>e.filter(e=>e.card.isCustom&&!e.card.isSuggested)),this._otherCards=(0,c.A)(e=>e.filter(e=>!e.card.isSuggested&&!e.card.isCustom&&!e.card.isEnergy)),this._energyCards=(0,c.A)(e=>e.filter(e=>e.card.isEnergy))}}(0,i.Cg)([(0,n.MZ)({attribute:!1})],C.prototype,"hass",void 0),(0,i.Cg)([(0,n.MZ)({attribute:!1})],C.prototype,"suggestedCards",void 0),(0,i.Cg)([(0,n.wk)(),(0,l.I)({key:"dashboardCardClipboard",state:!0,subscribe:!0,storage:"sessionStorage"})],C.prototype,"_clipboard",void 0),(0,i.Cg)([(0,n.wk)()],C.prototype,"_cards",void 0),(0,i.Cg)([(0,n.wk)()],C.prototype,"_filter",void 0),(0,i.Cg)([(0,n.P)("ha-input-search")],C.prototype,"_searchInput",void 0),C=(0,i.Cg)([(0,n.EM)("hui-card-picker")],C),t()}catch(e){t(e)}})},82632(e,t,a){a.a(e,async function(e,i){try{a.r(t),a.d(t,{HuiConditionalCardEditor:()=>x});var s=a(62826),r=a(34271),n=a(5124),o=a(22441),d=a(63533),c=a(93905),l=a(1087),h=a(18350),p=(a(67094),a(66289)),g=(a(62647),a(97962)),u=a(81797),y=a(13898),m=a(30461),v=a(91322),_=a(84698),f=a(7382),b=e([h,p,g,u,y,m,v]);[h,p,g,u,y,m,v]=b.then?(await b)():b;const w="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z",E="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z",C="M11 15H17V17H11V15M9 7H7V9H9V7M11 13H17V11H11V13M11 9H17V7H11V9M9 11H7V13H9V11M21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H19C20.1 3 21 3.9 21 5M19 5H5V19H19V5M9 15H7V17H9V15Z",$=(0,d.kp)(_.H,(0,d.Ik)({card:(0,d.bz)(),conditions:(0,d.lq)((0,d.YO)((0,d.bz)()))}));class x extends n.WF{setConfig(e){(0,d.vA)(e,$),this._config=e}focusYamlEditor(){this._cardEditorEl?.focusYamlEditor()}render(){if(!this.hass||!this._config)return n.s6;const e=!this._cardEditorEl||this._GUImode;return n.qy` <ha-tab-group -tab-show="${this._selectTab}"> <ha-tab-group-tab slot="nav" panel="conditions" .active="${!this._cardTab}"> ${this.hass.localize("ui.panel.lovelace.editor.card.conditional.conditions")} </ha-tab-group-tab> <ha-tab-group-tab slot="nav" panel="card" .active="${this._cardTab}"> ${this.hass.localize("ui.panel.lovelace.editor.card.conditional.card")} </ha-tab-group-tab> </ha-tab-group> ${this._cardTab?n.qy` <div class="card"> ${void 0!==this._config.card.type?n.qy` <div class="card-options"> <ha-icon-button class="gui-mode-button" ="${this._toggleMode}" .disabled="${!this._guiModeAvailable}" .label="${this.hass.localize(e?"ui.panel.lovelace.editor.edit_card.show_code_editor":"ui.panel.lovelace.editor.edit_card.show_visual_editor")}" .path="${e?w:C}"></ha-icon-button> <ha-icon-button .label="${this.hass.localize("ui.panel.lovelace.editor.edit_card.copy")}" .path="${E}" ="${this._handleCopyCard}"></ha-icon-button> <ha-button appearance="plain" size="small" ="${this._handleReplaceCard}">${this.hass.localize("ui.panel.lovelace.editor.card.conditional.change_type")}</ha-button> </div> <hui-card-element-editor .hass="${this.hass}" .value="${this._config.card}" .lovelace="${this.lovelace}" -changed="${this._handleCardChanged}" -changed="${this._handleGUIModeChanged}"></hui-card-element-editor> `:n.qy` <hui-card-picker .hass="${this.hass}" .lovelace="${this.lovelace}" -changed="${this._handleCardPicked}"></hui-card-picker> `} </div> `:n.qy` <ha-visibility-status .hass="${this.hass}" .conditions="${this._config.conditions??[]}"></ha-visibility-status> <ha-card-conditions-editor .hass="${this.hass}" .conditions="${this._config.conditions}" -changed="${this._conditionChanged}"> </ha-card-conditions-editor> `} `}_selectTab(e){this._cardTab="card"===e.detail.name}_toggleMode(){this._cardEditorEl?.toggleMode()}_setMode(e){this._GUImode=e,this._cardEditorEl&&(this._cardEditorEl.GUImode=e)}_handleGUIModeChanged(e){e.stopPropagation(),this._GUImode=e.detail.guiMode,this._guiModeAvailable=e.detail.guiModeAvailable}_handleCardPicked(e){e.stopPropagation(),this._config&&(this._setMode(!0),this._guiModeAvailable=!0,this._config={...this._config,card:e.detail.config},(0,l.r)(this,"config-changed",{config:this._config}))}_handleCopyCard(){this._config&&(this._clipboard=(0,r.A)(this._config.card))}_handleCardChanged(e){e.stopPropagation(),this._config&&(this._config={...this._config,card:e.detail.config},this._guiModeAvailable=e.detail.guiModeAvailable,(0,l.r)(this,"config-changed",{config:this._config}))}_handleReplaceCard(){this._config&&(this._config={...this._config,card:{}},(0,l.r)(this,"config-changed",{config:this._config}))}_conditionChanged(e){if(e.stopPropagation(),!this._config)return;const t=e.detail.value;this._config={...this._config,conditions:t},(0,l.r)(this,"config-changed",{config:this._config})}static get styles(){return[f.U,n.AH`ha-tab-group-tab{flex:1}ha-tab-group-tab::part(base){width:100%;justify-content:center}ha-visibility-status{margin-top:var(--ha-space-3);margin-bottom:var(--ha-space-3)}.card{margin-top:8px;border:1px solid var(--divider-color);padding:12px} (max-width:450px){.card,.condition{margin:8px -12px 0}}.card .card-options{display:flex;justify-content:flex-end;width:100%}.card-options{align-items:center}.gui-mode-button{margin-right:auto;margin-inline-end:auto;margin-inline-start:initial}`]}constructor(...e){super(...e),this._GUImode=!0,this._guiModeAvailable=!0,this._cardTab=!1}}(0,s.Cg)([(0,o.MZ)({attribute:!1})],x.prototype,"hass",void 0),(0,s.Cg)([(0,o.MZ)({attribute:!1})],x.prototype,"lovelace",void 0),(0,s.Cg)([(0,c.I)({key:"dashboardCardClipboard",state:!1,subscribe:!1,storage:"sessionStorage"})],x.prototype,"_clipboard",void 0),(0,s.Cg)([(0,o.wk)()],x.prototype,"_config",void 0),(0,s.Cg)([(0,o.wk)()],x.prototype,"_GUImode",void 0),(0,s.Cg)([(0,o.wk)()],x.prototype,"_guiModeAvailable",void 0),(0,s.Cg)([(0,o.wk)()],x.prototype,"_cardTab",void 0),(0,s.Cg)([(0,o.P)("hui-card-element-editor")],x.prototype,"_cardEditorEl",void 0),x=(0,s.Cg)([(0,o.EM)("hui-conditional-card-editor")],x),i()}catch(e){i(e)}})},43100(e,t,a){a.a(e,async function(e,i){try{a.d(t,{N:()=>n});var s=a(8349),r=e([s]);s=(r.then?(await r)():r)[0];const n=async(e,t,a,i)=>{let r={type:t};const n=await(0,s.dY)(t);if(n&&n.getStubConfig){const t=await n.getStubConfig(e,a,i);r={...r,...t}}return r};i()}catch(e){i(e)}})},92708(e,t,a){a.d(t,{U:()=>s,j:()=>i});const i=[{type:"alarm-panel",showElement:!0},{type:"button",showElement:!0},{type:"calendar",showElement:!0},{type:"clock",showElement:!0},{type:"entities",showElement:!0},{type:"entity",showElement:!0},{type:"gauge",showElement:!0},{type:"glance",showElement:!0},{type:"history-graph",showElement:!0},{type:"distribution",showElement:!0},{type:"statistics-graph",showElement:!1},{type:"statistic",showElement:!0},{type:"humidifier",showElement:!0},{type:"light",showElement:!0},{type:"map",showElement:!0},{type:"markdown",showElement:!0},{type:"media-control",showElement:!0},{type:"picture",showElement:!0},{type:"picture-elements",showElement:!0},{type:"picture-entity",showElement:!0},{type:"picture-glance",showElement:!0},{type:"plant-status",showElement:!0},{type:"sensor",showElement:!0},{type:"thermostat",showElement:!0},{type:"weather-forecast",showElement:!0},{type:"area",showElement:!0},{type:"tile",showElement:!0},{type:"conditional"},{type:"entity-filter"},{type:"grid"},{type:"horizontal-stack"},{type:"iframe"},{type:"logbook"},{type:"vertical-stack"},{type:"todo-list"},{type:"heading",showElement:!0},{type:"shortcut",showElement:!0}],s=[{type:"energy-date-selection",showElement:!0},{type:"energy-distribution",showElement:!1},{type:"energy-usage-graph",showElement:!1},{type:"energy-solar-graph",showElement:!1},{type:"energy-gas-graph",showElement:!1},{type:"energy-water-graph",showElement:!1},{type:"power-sources-graph",showElement:!1},{type:"energy-sources-table",showElement:!1},{type:"energy-devices-graph",showElement:!1},{type:"energy-devices-detail-graph",showElement:!1},{type:"energy-sankey",showElement:!1},{type:"power-sankey",showElement:!1},{type:"water-sankey",showElement:!1},{type:"water-flow-sankey",showElement:!1},{type:"energy-solar-consumed-gauge",showElement:!1},{type:"energy-self-sufficiency-gauge",showElement:!1},{type:"energy-grid-neutrality-gauge",showElement:!1},{type:"energy-grid-balance",showElement:!1},{type:"energy-carbon-consumed-gauge",showElement:!1},{type:"energy-compare",showElement:!1}]},84698(e,t,a){a.d(t,{H:()=>s});var i=a(63533);const s=(0,i.Ik)({type:(0,i.Yj)(),view_layout:(0,i.bz)(),layout_options:(0,i.bz)(),grid_options:(0,i.bz)(),visibility:(0,i.bz)(),disabled:(0,i.lq)((0,i.zM)())})}};