iobroker.lovelace
Version:
With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI
8 lines • 17 kB
JavaScript
/*! For license information please see 29572.62bfe571b16c1729.js.LICENSE.txt */
export const __rspack_esm_id=29572;export const __rspack_esm_ids=[29572];export const __webpack_modules__={62647(e,t,a){var i=a(62826),s=a(9866),o=a(5124),r=a(22441);class n extends s.A{static get styles(){return[s.A.styles,o.AH`:host{font-size:var(--ha-font-size-m);--wa-color-brand-on-quiet:var(
--ha-tab-active-text-color,
var(--primary-color)
);--wa-color-neutral-on-quiet:var(--wa-color-brand-on-quiet);opacity:.8;color:inherit;--wa-space-l:16px}:host([active]:not([disabled])){opacity:1} (hover:hover){:host(:hover:not([disabled]):not([active])) .tab{color:var(--wa-color-brand-on-quiet)}}`]}}n=(0,i.Cg)([(0,r.EM)("ha-tab-group-tab")],n)},66289(e,t,a){a.a(e,async function(e,t){try{var i=a(62826),s=a(42814),o=a(5124),r=a(22441),n=a(36356),d=e([s]);s=(d.then?(await d)():d)[0];class h extends s.A{connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this._handleKeyDown,!0)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._handleKeyDown,!0)}handleClick(e){this._dragScrollController.scrolled||super.handleClick(e)}static get styles(){return[s.A.styles,o.AH`:host{--track-width:2px;--track-color:var(--ha-tab-track-color, var(--divider-color));--indicator-color:var(
--ha-tab-indicator-color,
var(--primary-color)
);--wa-color-neutral-on-quiet:var(--indicator-color)}.tab-group-top ::slotted(ha-tab-group-tab[active]){border-block-end:solid var(--track-width) var(--indicator-color);margin-block-end:calc(-1 * var(--track-width))}.tab-group-start ::slotted(ha-tab-group-tab[active]){border-inline-end:solid var(--track-width) var(--indicator-color);margin-inline-end:calc(-1 * var(--track-width))}.tab-group-end ::slotted(ha-tab-group-tab[active]){border-inline-start:solid var(--track-width) var(--indicator-color);margin-inline-start:calc(-1 * var(--track-width))}.scroll-button::part(base):hover{background-color:transparent}`]}constructor(...e){super(...e),this._dragScrollController=new n.q(this,{selector:".nav"}),this.tabTag="ha-tab-group-tab",this.tabOnly=!0,this._handleKeyDown=e=>{(e.altKey||e.metaKey)&&e.stopPropagation()}}}(0,i.Cg)([(0,r.MZ)({attribute:"tab-tag"})],h.prototype,"tabTag",void 0),(0,i.Cg)([(0,r.MZ)({attribute:"tab-only",type:Boolean})],h.prototype,"tabOnly",void 0),h=(0,i.Cg)([(0,r.EM)("ha-tab-group")],h),t()}catch(e){t(e)}})},39924(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),o=a(5124),r=a(22441),n=a(6412),d=a(89784),h=a(91450),l=a(22786),c=a(93905),g=a(1087),p=a(52220),u=a(65829),b=a(36866),v=a(22675),_=a(45291),m=a(14503),y=a(99939),f=a(21018),w=a(93931),k=a(12347),C=e([u,b,f,w]);[u,b,f,w]=C.then?(await C)():C;class $ extends o.WF{async focus(){await this.updateComplete,await(this._searchInput?.updateComplete),this._searchInput?.focus()}render(){if(!(this.hass&&this.lovelace&&this._unusedEntities&&this._usedEntities))return o.s6;const e=this._suggestedBadges(this._badges),t=this._otherBadges(this._badges),a=this._customBadges(this._badges);return o.qy` <ha-input-search appearance="outlined" .value="${this._filter}" ="${this._handleSearchChange}"></ha-input-search> <div id="content" class="ha-scrollbar" style="${(0,d.W)({width:this._width?`${this._width}px`:"auto",height:this._height?`${this._height}px`:"auto"})}"> <div class="badges-container"> ${this._filter?this._filterBadges(this._badges,this._filter).map(e=>e.element):o.qy` ${e.length>0?o.qy` <div class="badges-container-header"> ${this.hass.localize("ui.panel.lovelace.editor.badge.generic.suggested_badges")} </div> `:o.s6} ${this._renderClipboardBadge()} ${e.map(e=>e.element)} ${e.length>0?o.qy` <div class="badges-container-header"> ${this.hass.localize("ui.panel.lovelace.editor.badge.generic.other_badges")} </div> `:o.s6} ${t.map(e=>e.element)} ${a.length>0?o.qy` <div class="badges-container-header"> ${this.hass.localize("ui.panel.lovelace.editor.badge.generic.custom_badges")} </div> `:o.s6} ${a.map(e=>e.element)} `} </div> <div class="badges-container"> <div class="badge manual" ="${this._badgePicked}" .config="${{type:""}}"> <div class="badge-header"> ${this.hass.localize("ui.panel.lovelace.editor.badge.generic.manual")} </div> <div class="preview description"> ${this.hass.localize("ui.panel.lovelace.editor.badge.generic.manual_description")} </div> </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,y.S_)(this.lovelace),t=(0,y.Xd)(this.hass,e);this._usedEntities=[...e].filter(e=>this.hass.states[e]&&this.hass.states[e].state!==v.Hh&&this.hass.states[e].state!==v.HV),this._unusedEntities=[...t].filter(e=>this.hass.states[e]&&this.hass.states[e].state!==v.Hh&&this.hass.states[e].state!==v.HV),this._loadBages()}_loadBages(){let e=k._.map(e=>({name:this.hass.localize(`ui.panel.lovelace.editor.badge.${e.type}.name`),description:this.hass.localize(`ui.panel.lovelace.editor.badge.${e.type}.description`),isSuggested:this.suggestedBadges?.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)),_.O9.length>0&&(e=e.concat(_.O9.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._badges=e.map(e=>({badge:e,element:o.qy`${(0,h.T)(this._renderBadgeElement(e),o.qy` <div class="badge spinner"> <ha-spinner></ha-spinner> </div> `)}`}))}_renderClipboardBadge(){return this._clipboard?o.qy` ${(0,h.T)(this._renderBadgeElement({type:this._clipboard.type,showElement:!0,isCustom:!1,name:this.hass.localize("ui.panel.lovelace.editor.badge.generic.paste"),description:`${this.hass.localize("ui.panel.lovelace.editor.badge.generic.paste_description",{type:this._clipboard.type})}`},this._clipboard),o.qy` <div class="badge spinner"> <ha-spinner></ha-spinner> </div> `)}`:o.s6}_handleSearchChange(e){const t=e.target.value;if(t){if(!this._width||!this._height){const e=this.shadowRoot.getElementById("content");if(e&&!this._width){const t=e.clientWidth;t&&(this._width=t)}if(e&&!this._height){const t=e.clientHeight;t&&(this._height=t)}}}else this._width=void 0,this._height=void 0;this._filter=t??""}_badgePicked(e){const t=e.currentTarget.config;(0,g.r)(this,"config-changed",{config:t})}_tryCreateBadgeElement(e){const t=(0,f.hZ)(e);return t.hass=this.hass,t.addEventListener("ll-rebuild",a=>{a.stopPropagation(),this._rebuildBadge(t,e)},{once:!0}),t}_rebuildBadge(e,t){let a;try{a=this._tryCreateBadgeElement(t)}catch(e){return}e.parentElement&&e.parentElement.replaceChild(a,e)}async _renderBadgeElement(e,t){let{type:a}=e;const{showElement:i,isCustom:s,name:r,description:d}=e,h=s?(0,_.b$)(a):void 0;let l;s&&(a=`${_.IP}${a}`);let c=t??{type:a};if(this.hass&&this.lovelace&&(t||(c=await(0,w.K)(this.hass,a,this._unusedEntities,this._usedEntities)),i))try{l=this._tryCreateBadgeElement(c)}catch(e){l=void 0}return o.qy` <div class="badge"> <div class="overlay" ="${this._badgePicked}" .config="${c}"></div> <div class="badge-header"> ${h?h.name||h.type:r} </div> <div class="preview ${(0,n.H)({description:!l||"HUI-ERROR-BADGE"===l.tagName})}"> ${l&&"HUI-ERROR-BADGE"!==l.tagName?l:h?h.description||this.hass.localize("ui.panel.lovelace.editor.badge_picker.no_description"):d} </div> </div> `}static get styles(){return[m.dp,o.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}.badges-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) var(--ha-space-1) var(--ha-space-2);margin:0;grid-column:1/-1}.badges-container{display:grid;gap:var(--ha-space-2);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));padding:var(--ha-space-3)}.badge{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))}.badge-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;background:var(--ha-card-background,var(--card-background-color,#fff));border-bottom:var(--ha-card-border-width,1px) solid var(--divider-color)}.preview{pointer-events:none;margin:var(--ha-space-5);flex-grow:1;display:flex;align-items:center;justify-content:center}.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{grid-column:1/-1;max-width:none}.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._badges=[],this._filter="",this._filterBadges=(0,l.A)((e,t)=>{if(!t)return e;let a=e.map(e=>e.badge);const i={keys:["type","name","description"],isCaseSensitive:!1,minMatchCharLength:Math.min(t.length,2),threshold:.2,ignoreDiacritics:!0,ignoreLocation:!0},o=new s.A(a,i);return a=o.search(t).map(e=>e.item),e.filter(e=>a.includes(e.badge))}),this._suggestedBadges=(0,l.A)(e=>e.filter(e=>e.badge.isSuggested)),this._customBadges=(0,l.A)(e=>e.filter(e=>e.badge.isCustom&&!e.badge.isSuggested)),this._otherBadges=(0,l.A)(e=>e.filter(e=>!e.badge.isSuggested&&!e.badge.isCustom))}}(0,i.Cg)([(0,r.MZ)({attribute:!1})],$.prototype,"hass",void 0),(0,i.Cg)([(0,r.MZ)({attribute:!1})],$.prototype,"suggestedBadges",void 0),(0,i.Cg)([(0,r.wk)(),(0,c.I)({key:"dashboardBadgeClipboard",state:!0,subscribe:!0,storage:"sessionStorage"})],$.prototype,"_clipboard",void 0),(0,i.Cg)([(0,r.wk)()],$.prototype,"_badges",void 0),(0,i.Cg)([(0,r.wk)()],$.prototype,"_filter",void 0),(0,i.Cg)([(0,r.wk)()],$.prototype,"_width",void 0),(0,i.Cg)([(0,r.wk)()],$.prototype,"_height",void 0),(0,i.Cg)([(0,r.P)("ha-input-search")],$.prototype,"_searchInput",void 0),$=(0,i.Cg)([(0,r.EM)("hui-badge-picker")],$),t()}catch(e){t(e)}})},59407(e,t,a){a.a(e,async function(e,i){try{a.r(t),a.d(t,{HuiCreateDialogBadge:()=>k});var s=a(62826),o=a(5124),r=a(22441),n=a(74985),d=a(6412),h=a(1087),l=a(18350),c=(a(76538),a(93444),a(66289)),g=(a(62647),a(72554)),p=a(14503),u=a(40747),b=a(83824),v=a(75196),_=a(39924),m=a(63023),y=a(79430),f=e([l,c,g,b,_]);[l,c,g,b,_]=f.then?(await f)():f;const w="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z";class k extends o.WF{async showDialog(e){this._params=e;const t=(0,v.ys)(e.lovelaceConfig,e.path);if("strategy"in t)throw new Error("Can't edit strategy");this._containerConfig=t,this._open=!0}closeDialog(){return this._open=!1,!0}_dialogClosed(){this._open=!1,this._params=void 0,this._currTab="badge",this._selectedEntities=[],(0,h.r)(this,"dialog-closed",{dialog:this.localName})}render(){if(!this._params)return o.s6;const e=this._containerConfig.title?this.hass.localize("ui.panel.lovelace.editor.edit_badge.pick_badge_title",{name:this._containerConfig.title}):this.hass.localize("ui.panel.lovelace.editor.edit_badge.pick_badge");return o.qy` <ha-dialog .open="${this._open}" flexcontent width="large" ="${this._ignoreKeydown}" ="${this._dialogClosed}" class="${(0,d.H)({table:"entity"===this._currTab})}"> <ha-dialog-header show-border slot="header"> <ha-icon-button slot="navigationIcon" ="${this._cancel}" .label="${this.hass.localize("ui.common.close")}" .path="${w}"></ha-icon-button> <span slot="title">${e}</span> <ha-tab-group -tab-show="${this._handleTabChanged}"> <ha-tab-group-tab slot="nav" .active="${"badge"===this._currTab}" panel="badge"> ${this.hass.localize("ui.panel.lovelace.editor.badge_picker.by_badge")} </ha-tab-group-tab> <ha-tab-group-tab slot="nav" .active="${"entity"===this._currTab}" panel="entity">${this.hass.localize("ui.panel.lovelace.editor.badge_picker.by_entity")}</ha-tab-group-tab> </ha-tab-group> </ha-dialog-header> ${(0,n.P)("badge"===this._currTab?o.qy` <hui-badge-picker autofocus .suggestedBadges="${this._params.suggestedBadges}" .lovelace="${this._params.lovelaceConfig}" .hass="${this.hass}" -changed="${this._handleBadgePicked}"></hui-badge-picker> `:o.qy` <hui-entity-picker-table .hass="${this.hass}" .narrow="${!0}" -changed="${this._handleSelectedChanged}"></hui-entity-picker-table> `)} <ha-dialog-footer slot="footer"> <ha-button slot="secondaryAction" appearance="plain" ="${this._cancel}"> ${this.hass.localize("ui.common.cancel")} </ha-button> ${this._selectedEntities.length?o.qy` <ha-button slot="primaryAction" ="${this._suggestBadges}"> ${this.hass.localize("ui.common.continue")} </ha-button> `:""} </ha-dialog-footer> </ha-dialog> `}_ignoreKeydown(e){e.stopPropagation()}static get styles(){return[p.nA,o.AH`ha-dialog{--dialog-content-padding:0;--dialog-z-index:6}ha-dialog.table{--dialog-content-padding:0}ha-dialog::part(body){overflow:hidden}ha-tab-group-tab{flex:1}ha-tab-group-tab::part(base){width:100%;justify-content:center}hui-badge-picker{--badge-picker-search-shape:0;--badge-picker-search-margin:0;display:flex;flex-direction:column;min-height:0}hui-badge-picker,hui-entity-picker-table{height:calc(100vh - 198px)}hui-entity-picker-table{display:block;--mdc-shape-small:0} all and (max-width:450px),all and (max-height:500px){hui-badge-picker,hui-entity-picker-table{height:calc(100vh - 158px)}}`]}_handleBadgePicked(e){const t=e.detail.config;this._params.entities&&this._params.entities.length&&("entities"in t?t.entities=this._params.entities:"entity"in t&&(t.entity=this._params.entities[0])),(0,m.N)(this,{lovelaceConfig:this._params.lovelaceConfig,saveConfig:this._params.saveConfig,path:this._params.path,badgeConfig:t}),this.closeDialog()}_handleTabChanged(e){const t=e.detail.name;t!==this._currTab&&(this._currTab=t,this._selectedEntities=[])}_handleSelectedChanged(e){this._selectedEntities=e.detail.selectedEntities}_cancel(e){e&&e.stopPropagation(),this.closeDialog()}_suggestBadges(){const e=(0,u.KT)(this.hass.states,this._selectedEntities);(0,y.$)(this,{lovelaceConfig:this._params.lovelaceConfig,saveConfig:this._params.saveConfig,path:this._params.path,entities:this._selectedEntities,badgeConfig:e}),this.closeDialog()}constructor(...e){super(...e),this._open=!1,this._selectedEntities=[],this._currTab="badge"}}(0,s.Cg)([(0,r.MZ)({attribute:!1})],k.prototype,"hass",void 0),(0,s.Cg)([(0,r.wk)()],k.prototype,"_params",void 0),(0,s.Cg)([(0,r.wk)()],k.prototype,"_open",void 0),(0,s.Cg)([(0,r.wk)()],k.prototype,"_containerConfig",void 0),(0,s.Cg)([(0,r.wk)()],k.prototype,"_selectedEntities",void 0),(0,s.Cg)([(0,r.wk)()],k.prototype,"_currTab",void 0),k=(0,s.Cg)([(0,r.EM)("hui-dialog-create-badge")],k),i()}catch(e){i(e)}})},79430(e,t,a){a.d(t,{$:()=>o});var i=a(1087);const s=()=>a.e(14558).then(a.bind(a,69293)),o=(e,t)=>{(0,i.r)(e,"show-dialog",{dialogTag:"hui-dialog-suggest-badge",dialogImport:s,dialogParams:t})}},93931(e,t,a){a.a(e,async function(e,i){try{a.d(t,{K:()=>r});var s=a(21018),o=e([s]);s=(o.then?(await o)():o)[0];const r=async(e,t,a,i)=>{let o={type:t};const r=await(0,s.ww)(t);if(r&&r.getStubConfig){const t=await r.getStubConfig(e,a,i);o={...o,...t}}return o};i()}catch(e){i(e)}})},12347(e,t,a){a.d(t,{_:()=>i});const i=[{type:"entity",showElement:!0},{type:"shortcut",showElement:!0}]},74985(e,t,a){a.d(t,{P:()=>n});a(88454),a(29452);var i=a(5055),s=a(42017),o=a(63937);const r=e=>(0,o.ps)(e)?e._$litType$.h:e.strings,n=(0,s.u$)(class extends s.WL{render(e){return[e]}update(e,[t]){const a=(0,o.qb)(this.it)?r(this.it):null,s=(0,o.qb)(t)?r(t):null;if(null!==a&&(null===s||a!==s)){const t=(0,o.cN)(e).pop();let s=this.et.get(a);if(void 0===s){const e=document.createDocumentFragment();s=(0,i.XX)(i.s6,e),s.setConnected(!1),this.et.set(a,s)}(0,o.mY)(s,[t]),(0,o.Dx)(s,void 0,t)}if(null!==s){if(null===a||a!==s){const t=this.et.get(s);if(void 0!==t){const a=(0,o.cN)(t).pop();(0,o.Jz)(e),(0,o.Dx)(e,void 0,a),(0,o.mY)(e,[a])}}this.it=t}else this.it=void 0;return this.render(t)}constructor(e){super(e),this.et=new WeakMap}})}};