iobroker.lovelace
Version:
With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI
1 lines • 4.48 kB
JavaScript
export const __rspack_esm_id=94332;export const __rspack_esm_ids=[94332];export const __webpack_modules__={55287(e,i,t){t.a(e,async function(e,a){try{t.r(i),t.d(i,{SideBarView:()=>g});t(18111),t(7588);var s=t(62826),o=t(5124),d=t(22441),n=t(1087),r=t(18350),l=t(52667),c=t(82360),h=e([r,l]);[r,l]=h.then?(await h)():h;const p="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z",v="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z",m="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z";class g extends o.WF{connectedCallback(){super.connectedCallback(),this._mql=window.matchMedia("(min-width: 760px)"),this._mqlListenerRef=this._createCards.bind(this),this._mql.addListener(this._mqlListenerRef)}disconnectedCallback(){super.disconnectedCallback(),this._mql?.removeListener(this._mqlListenerRef),this._mqlListenerRef=void 0,this._mql=void 0}setConfig(e){this._config=e}willUpdate(e){if(super.willUpdate(e),this.lovelace?.editMode&&t.e(59127).then(t.bind(t,70410)),e.has("cards")&&this._createCards(),!e.has("lovelace")&&!e.has("_config"))return;const i=e.get("lovelace");(!e.has("cards")&&i?.config!==this.lovelace?.config||i&&i?.editMode!==this.lovelace?.editMode)&&this._createCards()}render(){return o.qy` <hui-view-badges .hass="${this.hass}" .badges="${this.badges}" .lovelace="${this.lovelace}" .viewIndex="${this.index}" show-add-label></hui-view-badges> <div class="container ${this.lovelace?.editMode?"edit-mode":""}"></div> ${this.lovelace?.editMode?o.qy` <ha-button size="large" ="${this._addCard}"> <ha-svg-icon slot="start" .path="${m}"></ha-svg-icon> ${this.hass.localize("ui.panel.lovelace.editor.edit_card.add")} </ha-button> `:""} `}_addCard(){(0,n.r)(this,"ll-create-card")}_createCards(){const e=document.createElement("div");let i;if(e.id="main",this._mql?.matches?(i=document.createElement("div"),i.id="sidebar"):i=e,this.hasUpdated){const t=this._container;this._oldMain&&t.removeChild(this._oldMain),this._oldSidebar&&t.removeChild(this._oldSidebar),t.appendChild(e),t.appendChild(i)}else this.updateComplete.then(()=>{const t=this._container;t.appendChild(e),t.appendChild(i)});this.cards.forEach((t,a)=>{const s=this._config?.cards?.[a];let o;if(this.isStrategy||!this.lovelace?.editMode)t.preview=!1,o=t;else{o=document.createElement("hui-card-options"),o.hass=this.hass,o.lovelace=this.lovelace,o.path=[this.index,a],t.preview=!0;const e=document.createElement("ha-icon-button");e.slot="buttons";const i=document.createElement("ha-svg-icon");i.path="sidebar"!==s?.view_layout?.position?v:p,e.appendChild(i),e.addEventListener("click",()=>{this.lovelace.saveConfig((0,c.bn)(this.lovelace.config,[this.index,a],{...s,view_layout:{position:"sidebar"!==s?.view_layout?.position?"sidebar":"main"}}))}),o.appendChild(e),o.appendChild(t)}"sidebar"!==s?.view_layout?.position?e.appendChild(o):i.appendChild(o)})}constructor(...e){super(...e),this.isStrategy=!1,this.cards=[],this.badges=[]}}g.styles=o.AH`:host{display:block;padding-top:4px}hui-view-badges{display:block;margin:4px 8px 4px 8px;font-size:var(--ha-font-size-s)}.container{display:flex;justify-content:center;margin-left:4px;margin-right:4px}.container.edit-mode{margin-bottom:72px}#main{max-width:1620px;flex-grow:2}#sidebar{flex-grow:1;flex-shrink:0;max-width:380px}.container>div{min-width:0;box-sizing:border-box}.container>div>:not([hidden]){display:block;margin:var(--masonry-view-card-margin,4px 4px 8px)} (max-width:500px){.container>div>*{margin-left:0;margin-right:0}}ha-button{position:fixed;right:calc(16px + var(--safe-area-inset-right));bottom:calc(16px + var(--safe-area-inset-bottom));inset-inline-end:calc(16px + var(--safe-area-inset-right));inset-inline-start:initial;z-index:1;--ha-button-box-shadow:var(--ha-box-shadow-l)}`,(0,s.Cg)([(0,d.MZ)({attribute:!1})],g.prototype,"hass",void 0),(0,s.Cg)([(0,d.MZ)({attribute:!1})],g.prototype,"lovelace",void 0),(0,s.Cg)([(0,d.MZ)({type:Number})],g.prototype,"index",void 0),(0,s.Cg)([(0,d.MZ)({attribute:!1})],g.prototype,"isStrategy",void 0),(0,s.Cg)([(0,d.MZ)({attribute:!1})],g.prototype,"cards",void 0),(0,s.Cg)([(0,d.MZ)({attribute:!1})],g.prototype,"badges",void 0),(0,s.Cg)([(0,d.wk)()],g.prototype,"_config",void 0),(0,s.Cg)([(0,d.P)("#main")],g.prototype,"_oldMain",void 0),(0,s.Cg)([(0,d.P)("#sidebar")],g.prototype,"_oldSidebar",void 0),(0,s.Cg)([(0,d.P)(".container")],g.prototype,"_container",void 0),g=(0,s.Cg)([(0,d.EM)("hui-sidebar-view")],g),a()}catch(e){a(e)}})}};