From 64030083f9ccf8220ddfdec9ae6f6117cf203cd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= Date: Sat, 27 Feb 2021 21:14:50 +0000 Subject: [PATCH] Better update on parent update --- card-mod.js | 4 +-- package-lock.json | 2 +- package.json | 2 +- rollup.config.js | 2 +- src/card-mod.ts | 57 ++++++++++++++++++++++++++------ src/helpers.ts | 6 ++++ test/views/5_dom_navigation.yaml | 20 +++++++++++ 7 files changed, 78 insertions(+), 15 deletions(-) diff --git a/card-mod.js b/card-mod.js index b8ed97a..40b37af 100644 --- a/card-mod.js +++ b/card-mod.js @@ -1,5 +1,5 @@ -!function(){"use strict";const e="undefined"!=typeof window&&null!=window.customElements&&void 0!==window.customElements.polyfillWrapFlushCallback,t=(e,t,s=null)=>{for(;t!==s;){const s=t.nextSibling;e.removeChild(t),t=s}},s=`{{lit-${String(Math.random()).slice(2)}}}`,n=`\x3c!--${s}--\x3e`,o=new RegExp(`${s}|${n}`),i="$lit$";class r{constructor(e,t){this.parts=[],this.element=t;const n=[],r=[],d=document.createTreeWalker(t.content,133,null,!1);let h=0,p=-1,u=0;const{strings:m,values:{length:f}}=e;for(;u0;){const t=m[u],s=c.exec(t)[2],n=s.toLowerCase()+i,r=e.getAttribute(n);e.removeAttribute(n);const a=r.split(o);this.parts.push({type:"attribute",index:p,name:s,strings:a}),u+=a.length-1}}"TEMPLATE"===e.tagName&&(r.push(e),d.currentNode=e.content)}else if(3===e.nodeType){const t=e.data;if(t.indexOf(s)>=0){const s=e.parentNode,r=t.split(o),d=r.length-1;for(let t=0;t{const s=e.length-t.length;return s>=0&&e.slice(s)===t},d=e=>-1!==e.index,l=()=>document.createComment(""),c=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function h(e,t){const{element:{content:s},parts:n}=e,o=document.createTreeWalker(s,133,null,!1);let i=u(n),r=n[i],a=-1,d=0;const l=[];let c=null;for(;o.nextNode();){a++;const e=o.currentNode;for(e.previousSibling===c&&(c=null),t.has(e)&&(l.push(e),null===c&&(c=e)),null!==c&&d++;void 0!==r&&r.index===a;)r.index=null!==c?-1:r.index-d,i=u(n,i),r=n[i]}l.forEach((e=>e.parentNode.removeChild(e)))}const p=e=>{let t=11===e.nodeType?0:1;const s=document.createTreeWalker(e,133,null,!1);for(;s.nextNode();)t++;return t},u=(e,t=-1)=>{for(let s=t+1;s"function"==typeof e&&m.has(e),y={},_={};class g{constructor(e,t,s){this.__parts=[],this.template=e,this.processor=t,this.options=s}update(e){let t=0;for(const s of this.__parts)void 0!==s&&s.setValue(e[t]),t++;for(const e of this.__parts)void 0!==e&&e.commit()}_clone(){const t=e?this.template.element.content.cloneNode(!0):document.importNode(this.template.element.content,!0),s=[],n=this.template.parts,o=document.createTreeWalker(t,133,null,!1);let i,r=0,a=0,l=o.nextNode();for(;re}),w=` ${s} `;class S{constructor(e,t,s,n){this.strings=e,this.values=t,this.type=s,this.processor=n}getHTML(){const e=this.strings.length-1;let t="",o=!1;for(let r=0;r-1||o)&&-1===e.indexOf("--\x3e",a+1);const d=c.exec(e);t+=null===d?e+(o?w:n):e.substr(0,d.index)+d[1]+d[2]+i+d[3]+s}return t+=this.strings[e],t}getTemplateElement(){const e=document.createElement("template");let t=this.getHTML();return void 0!==v&&(t=v.createHTML(t)),e.innerHTML=t,e}}const b=e=>null===e||!("object"==typeof e||"function"==typeof e),E=e=>Array.isArray(e)||!(!e||!e[Symbol.iterator]);class C{constructor(e,t,s){this.dirty=!0,this.element=e,this.name=t,this.strings=s,this.parts=[];for(let e=0;e{try{const e={get capture(){return O=!0,!1}};window.addEventListener("test",e,e),window.removeEventListener("test",e,e)}catch(e){}})();class R{constructor(e,t,s){this.value=void 0,this.__pendingValue=void 0,this.element=e,this.eventName=t,this.eventContext=s,this.__boundHandleEvent=e=>this.handleEvent(e)}setValue(e){this.__pendingValue=e}commit(){for(;f(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=y,e(this)}if(this.__pendingValue===y)return;const e=this.__pendingValue,t=this.value,s=null==e||null!=t&&(e.capture!==t.capture||e.once!==t.once||e.passive!==t.passive),n=null!=e&&(null==t||s);s&&this.element.removeEventListener(this.eventName,this.__boundHandleEvent,this.__options),n&&(this.__options=U(e),this.element.addEventListener(this.eventName,this.__boundHandleEvent,this.__options)),this.value=e,this.__pendingValue=y}handleEvent(e){"function"==typeof this.value?this.value.call(this.eventContext||this.element,e):this.value.handleEvent(e)}}const U=e=>e&&(O?{capture:e.capture,passive:e.passive,once:e.once}:e.capture);function M(e){let t=k.get(e.type);void 0===t&&(t={stringsArray:new WeakMap,keyString:new Map},k.set(e.type,t));let n=t.stringsArray.get(e.strings);if(void 0!==n)return n;const o=e.strings.join(s);return n=t.keyString.get(o),void 0===n&&(n=new r(e,e.getTemplateElement()),t.keyString.set(o,n)),t.stringsArray.set(e.strings,n),n}const k=new Map,V=new WeakMap;const q=new class{handleAttributeExpressions(e,t,s,n){const o=t[0];if("."===o){return new T(e,t.slice(1),s).parts}if("@"===o)return[new R(e,t.slice(1),n.eventContext)];if("?"===o)return[new x(e,t.slice(1),s)];return new C(e,t,s).parts}handleTextExpression(e){return new P(e)}};"undefined"!=typeof window&&(window.litHtmlVersions||(window.litHtmlVersions=[])).push("1.3.0");const $=(e,...t)=>new S(e,t,"html",q),D=(e,t)=>`${e}--${t}`;let L=!0;void 0===window.ShadyCSS?L=!1:void 0===window.ShadyCSS.prepareTemplateDom&&(console.warn("Incompatible ShadyCSS version detected. Please update to at least @webcomponents/webcomponentsjs@2.0.2 and @webcomponents/shadycss@1.3.1."),L=!1);const I=e=>t=>{const n=D(t.type,e);let o=k.get(n);void 0===o&&(o={stringsArray:new WeakMap,keyString:new Map},k.set(n,o));let i=o.stringsArray.get(t.strings);if(void 0!==i)return i;const a=t.strings.join(s);if(i=o.keyString.get(a),void 0===i){const s=t.getTemplateElement();L&&window.ShadyCSS.prepareTemplateDom(s,e),i=new r(t,s),o.keyString.set(a,i)}return o.stringsArray.set(t.strings,i),i},j=["html","svg"],z=new Set,H=(e,t,s)=>{z.add(e);const n=s?s.element:document.createElement("template"),o=t.querySelectorAll("style"),{length:i}=o;if(0===i)return void window.ShadyCSS.prepareTemplateStyles(n,e);const r=document.createElement("style");for(let e=0;e{j.forEach((t=>{const s=k.get(D(t,e));void 0!==s&&s.keyString.forEach((e=>{const{element:{content:t}}=e,s=new Set;Array.from(t.querySelectorAll("style")).forEach((e=>{s.add(e)})),h(e,s)}))}))})(e);const a=n.content;s?function(e,t,s=null){const{element:{content:n},parts:o}=e;if(null==s)return void n.appendChild(t);const i=document.createTreeWalker(n,133,null,!1);let r=u(o),a=0,d=-1;for(;i.nextNode();)for(d++,i.currentNode===s&&(a=p(t),s.parentNode.insertBefore(t,s));-1!==r&&o[r].index===d;){if(a>0){for(;-1!==r;)o[r].index+=a,r=u(o,r);return}r=u(o,r)}}(s,r,a.firstChild):a.insertBefore(r,a.firstChild),window.ShadyCSS.prepareTemplateStyles(n,e);const d=a.querySelector("style");if(window.ShadyCSS.nativeShadow&&null!==d)t.insertBefore(d.cloneNode(!0),t.firstChild);else if(s){a.insertBefore(r,a.firstChild);const e=new Set;e.add(r),h(s,e)}};window.JSCompiler_renameProperty=(e,t)=>e;const J={toAttribute(e,t){switch(t){case Boolean:return e?"":null;case Object:case Array:return null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){switch(t){case Boolean:return null!==e;case Number:return null===e?null:Number(e);case Object:case Array:return JSON.parse(e)}return e}},F=(e,t)=>t!==e&&(t==t||e==e),B={attribute:!0,type:String,converter:J,reflect:!1,hasChanged:F},W="finalized";class Y extends HTMLElement{constructor(){super(),this.initialize()}static get observedAttributes(){this.finalize();const e=[];return this._classProperties.forEach(((t,s)=>{const n=this._attributeNameForProperty(s,t);void 0!==n&&(this._attributeToPropertyMap.set(n,s),e.push(n))})),e}static _ensureClassProperties(){if(!this.hasOwnProperty(JSCompiler_renameProperty("_classProperties",this))){this._classProperties=new Map;const e=Object.getPrototypeOf(this)._classProperties;void 0!==e&&e.forEach(((e,t)=>this._classProperties.set(t,e)))}}static createProperty(e,t=B){if(this._ensureClassProperties(),this._classProperties.set(e,t),t.noAccessor||this.prototype.hasOwnProperty(e))return;const s="symbol"==typeof e?Symbol():`__${e}`,n=this.getPropertyDescriptor(e,s,t);void 0!==n&&Object.defineProperty(this.prototype,e,n)}static getPropertyDescriptor(e,t,s){return{get(){return this[t]},set(n){const o=this[e];this[t]=n,this.requestUpdateInternal(e,o,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this._classProperties&&this._classProperties.get(e)||B}static finalize(){const e=Object.getPrototypeOf(this);if(e.hasOwnProperty(W)||e.finalize(),this.finalized=!0,this._ensureClassProperties(),this._attributeToPropertyMap=new Map,this.hasOwnProperty(JSCompiler_renameProperty("properties",this))){const e=this.properties,t=[...Object.getOwnPropertyNames(e),..."function"==typeof Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e):[]];for(const s of t)this.createProperty(s,e[s])}}static _attributeNameForProperty(e,t){const s=t.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof e?e.toLowerCase():void 0}static _valueHasChanged(e,t,s=F){return s(e,t)}static _propertyValueFromAttribute(e,t){const s=t.type,n=t.converter||J,o="function"==typeof n?n:n.fromAttribute;return o?o(e,s):e}static _propertyValueToAttribute(e,t){if(void 0===t.reflect)return;const s=t.type,n=t.converter;return(n&&n.toAttribute||J.toAttribute)(e,s)}initialize(){this._updateState=0,this._updatePromise=new Promise((e=>this._enableUpdatingResolver=e)),this._changedProperties=new Map,this._saveInstanceProperties(),this.requestUpdateInternal()}_saveInstanceProperties(){this.constructor._classProperties.forEach(((e,t)=>{if(this.hasOwnProperty(t)){const e=this[t];delete this[t],this._instanceProperties||(this._instanceProperties=new Map),this._instanceProperties.set(t,e)}}))}_applyInstanceProperties(){this._instanceProperties.forEach(((e,t)=>this[t]=e)),this._instanceProperties=void 0}connectedCallback(){this.enableUpdating()}enableUpdating(){void 0!==this._enableUpdatingResolver&&(this._enableUpdatingResolver(),this._enableUpdatingResolver=void 0)}disconnectedCallback(){}attributeChangedCallback(e,t,s){t!==s&&this._attributeToProperty(e,s)}_propertyToAttribute(e,t,s=B){const n=this.constructor,o=n._attributeNameForProperty(e,s);if(void 0!==o){const e=n._propertyValueToAttribute(t,s);if(void 0===e)return;this._updateState=8|this._updateState,null==e?this.removeAttribute(o):this.setAttribute(o,e),this._updateState=-9&this._updateState}}_attributeToProperty(e,t){if(8&this._updateState)return;const s=this.constructor,n=s._attributeToPropertyMap.get(e);if(void 0!==n){const e=s.getPropertyOptions(n);this._updateState=16|this._updateState,this[n]=s._propertyValueFromAttribute(t,e),this._updateState=-17&this._updateState}}requestUpdateInternal(e,t,s){let n=!0;if(void 0!==e){const o=this.constructor;s=s||o.getPropertyOptions(e),o._valueHasChanged(this[e],t,s.hasChanged)?(this._changedProperties.has(e)||this._changedProperties.set(e,t),!0!==s.reflect||16&this._updateState||(void 0===this._reflectingProperties&&(this._reflectingProperties=new Map),this._reflectingProperties.set(e,s))):n=!1}!this._hasRequestedUpdate&&n&&(this._updatePromise=this._enqueueUpdate())}requestUpdate(e,t){return this.requestUpdateInternal(e,t),this.updateComplete}async _enqueueUpdate(){this._updateState=4|this._updateState;try{await this._updatePromise}catch(e){}const e=this.performUpdate();return null!=e&&await e,!this._hasRequestedUpdate}get _hasRequestedUpdate(){return 4&this._updateState}get hasUpdated(){return 1&this._updateState}performUpdate(){if(!this._hasRequestedUpdate)return;this._instanceProperties&&this._applyInstanceProperties();let e=!1;const t=this._changedProperties;try{e=this.shouldUpdate(t),e?this.update(t):this._markUpdated()}catch(t){throw e=!1,this._markUpdated(),t}e&&(1&this._updateState||(this._updateState=1|this._updateState,this.firstUpdated(t)),this.updated(t))}_markUpdated(){this._changedProperties=new Map,this._updateState=-5&this._updateState}get updateComplete(){return this._getUpdateComplete()}_getUpdateComplete(){return this._updatePromise}shouldUpdate(e){return!0}update(e){void 0!==this._reflectingProperties&&this._reflectingProperties.size>0&&(this._reflectingProperties.forEach(((e,t)=>this._propertyToAttribute(t,this[t],e))),this._reflectingProperties=void 0),this._markUpdated()}updated(e){}firstUpdated(e){}}Y.finalized=!0;const G=(e,t)=>"method"===t.kind&&t.descriptor&&!("value"in t.descriptor)?Object.assign(Object.assign({},t),{finisher(s){s.createProperty(t.key,e)}}):{kind:"field",key:Symbol(),placement:"own",descriptor:{},initializer(){"function"==typeof t.initializer&&(this[t.key]=t.initializer.call(this))},finisher(s){s.createProperty(t.key,e)}};const K=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,Q=Symbol();class X{constructor(e,t){if(t!==Q)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e}get styleSheet(){return void 0===this._styleSheet&&(K?(this._styleSheet=new CSSStyleSheet,this._styleSheet.replaceSync(this.cssText)):this._styleSheet=null),this._styleSheet}toString(){return this.cssText}}(window.litElementVersions||(window.litElementVersions=[])).push("2.4.0");const Z={};class ee extends Y{static getStyles(){return this.styles}static _getUniqueStyles(){if(this.hasOwnProperty(JSCompiler_renameProperty("_styles",this)))return;const e=this.getStyles();if(Array.isArray(e)){const t=(e,s)=>e.reduceRight(((e,s)=>Array.isArray(s)?t(s,e):(e.add(s),e)),s),s=t(e,new Set),n=[];s.forEach((e=>n.unshift(e))),this._styles=n}else this._styles=void 0===e?[]:[e];this._styles=this._styles.map((e=>{if(e instanceof CSSStyleSheet&&!K){const t=Array.prototype.slice.call(e.cssRules).reduce(((e,t)=>e+t.cssText),"");return new X(String(t),Q)}return e}))}initialize(){super.initialize(),this.constructor._getUniqueStyles(),this.renderRoot=this.createRenderRoot(),window.ShadowRoot&&this.renderRoot instanceof window.ShadowRoot&&this.adoptStyles()}createRenderRoot(){return this.attachShadow({mode:"open"})}adoptStyles(){const e=this.constructor._styles;0!==e.length&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow?K?this.renderRoot.adoptedStyleSheets=e.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet)):this._needsShimAdoptedStyleSheets=!0:window.ShadyCSS.ScopingShim.prepareAdoptedCssText(e.map((e=>e.cssText)),this.localName))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&void 0!==window.ShadyCSS&&window.ShadyCSS.styleElement(this)}update(e){const t=this.render();super.update(e),t!==Z&&this.constructor.render(t,this.renderRoot,{scopeName:this.localName,eventContext:this}),this._needsShimAdoptedStyleSheets&&(this._needsShimAdoptedStyleSheets=!1,this.constructor._styles.forEach((e=>{const t=document.createElement("style");t.textContent=e.cssText,this.renderRoot.appendChild(t)})))}render(){return Z}}function te(){return document.querySelector("hc-main")?document.querySelector("hc-main").hass:document.querySelector("home-assistant")?document.querySelector("home-assistant").hass:void 0}ee.finalized=!0,ee.render=(e,s,n)=>{if(!n||"object"!=typeof n||!n.scopeName)throw new Error("The `scopeName` option is required.");const o=n.scopeName,i=V.has(s),r=L&&11===s.nodeType&&!!s.host,a=r&&!z.has(o),d=a?document.createDocumentFragment():s;if(((e,s,n)=>{let o=V.get(s);void 0===o&&(t(s,s.firstChild),V.set(s,o=new P(Object.assign({templateFactory:M},n))),o.appendInto(s)),o.setValue(e),o.commit()})(e,d,Object.assign({templateFactory:I(o)},n)),a){const e=V.get(d);V.delete(d);const n=e.value instanceof g?e.value.template:void 0;H(o,d,n),t(s,s.firstChild),s.appendChild(d),V.set(s,e)}!i&&r&&window.ShadyCSS.styleElement(s.host)};const se="lovelace-player-device-id";function ne(){if(!localStorage[se]){const e=()=>Math.floor(1e5*(1+Math.random())).toString(16).substring(1);window.fully&&"function"==typeof fully.getDeviceId?localStorage[se]=fully.getDeviceId():localStorage[se]=`${e()}${e()}-${e()}${e()}`}return localStorage[se]}let oe=ne();const ie=new URLSearchParams(window.location.search);var re;ie.get("deviceID")&&null!==(re=ie.get("deviceID"))&&("clear"===re?localStorage.removeItem(se):localStorage[se]=re,oe=ne()),window.cardMod_template_cache=window.cardMod_template_cache||{};const ae=window.cardMod_template_cache;async function de(e,t,s){const n=te().connection,o=JSON.stringify([t,s]);let i=ae[o];i?(e(i.value),i.callbacks.add(e)):(e(""),s=Object.assign({user:te().user.name,browser:oe,hash:location.hash.substr(1)||""},s),ae[o]=i={template:t,variables:s,value:"",callbacks:new Set([e]),unsubscribe:n.subscribeMessage((e=>function(e,t){const s=ae[e];s&&(s.value=t.result,s.callbacks.forEach((e=>e(t.result))))}(o,e)),{type:"render_template",template:t,variables:s})})}var le="3.0.2";async function ce(e,t,s=!1){let n=e;"string"==typeof t&&(t=t.split(/(\$| )/)),""===t[t.length-1]&&t.pop();for(const[e,o]of t.entries())if(o.trim().length){if(!n)return null;n.localName&&n.localName.includes("-")&&await customElements.whenDefined(n.localName),n.updateComplete&&await n.updateComplete,n="$"===o?s&&e==t.length-1?[n.shadowRoot]:n.shadowRoot:s&&e==t.length-1?n.querySelectorAll(o):n.querySelector(o)}return n}async function he(e,t,s=!1,n=1e4){return Promise.race([ce(e,t,s),new Promise(((e,t)=>setTimeout((()=>t(new Error("timeout"))),n)))]).catch((e=>{if(!e.message||"timeout"!==e.message)throw e;return null}))}const pe=async e=>{await(async()=>{if(customElements.get("developer-tools-event"))return;await customElements.whenDefined("partial-panel-resolver");const e=document.createElement("partial-panel-resolver");e.hass={panels:[{url_path:"tmp",component_name:"developer-tools"}]},e._updateRoutes(),await e.routerOptions.routes.tmp.load(),await customElements.whenDefined("developer-tools-router");const t=document.createElement("developer-tools-router");await t.routerOptions.routes.event.load()})();return document.createElement("developer-tools-event")._computeParsedEventData(e)};async function ue(e,t,s="",n={},o=null,i=!0){var r;let a;(null===(r=e.localName)||void 0===r?void 0:r.includes("-"))&&await customElements.whenDefined(e.localName),e.updateComplete&&await e.updateComplete,void 0===e._cardMod&&(e._cardMod=[]);for(const s of e._cardMod)if(s.type===t){a=s;break}a||(a=document.createElement("card-mod"),a.type=t,e._cardMod.push(a));return(e.modElement?e.modElement:i&&e.shadowRoot||e).appendChild(a),a.variables=n,a.styles=s,a}function me(e,t){const s=e=>e&&"object"==typeof e&&!Array.isArray(e);if(s(e)&&s(t))for(const n in t)s(t[n])?(e[n]||Object.assign(e,{[n]:{}}),"string"==typeof e[n]&&(e[n]={".":e[n]}),me(e[n],t[n])):e[n]?e[n]=t[n]+e[n]:e[n]=t[n];return e}function fe(e){return e.config?e.config:e._config?e._config:e.host?fe(e.host):e.parentElement?fe(e.parentElement):e.parentNode?fe(e.parentNode):null}function ye(e,t){for(const s of t)e.add(s)}async function _e(e,t=0){let s=new Set;return 10==t?s:e?(e._cardMod&&e._cardMod.style&&s.add(e._cardMod),e.updateComplete&&await e.updateComplete,e.parentElement&&ye(s,await _e(e.parentElement,t+1)),e.parentNode&&ye(s,await _e(e.parentNode,t+1)),e.host&&ye(s,await _e(e.host,t+1)),s):s}class ge extends ee{constructor(){super(),this._rendered_styles="",this._styleChildren=new Set,this._observer=new MutationObserver((e=>{e.some((e=>"card-mod"!==e.target.localName))&&this.refresh()})),document.querySelector("home-assistant").addEventListener("settheme",(()=>this.refresh()))}static get applyToElement(){return ue}connectedCallback(){super.connectedCallback(),this.refresh(),this.setAttribute("slot","none")}disconnectedCallback(){super.disconnectedCallback(),this._disconnect()}set styles(e){this._input_styles=e,this.refresh()}async refresh(){await this._disconnect(),this._connect(this._input_styles)}async _connect(e){let t=JSON.parse(JSON.stringify(e||{}));"string"==typeof t&&(t={".":t});me(t,await async function(e){if(!e.type)return null;const t=e.parentElement?e.parentElement:e,s=window.getComputedStyle(t).getPropertyValue("--card-mod-theme"),n=te().themes.themes;return n[s]?n[s][`card-mod-${e.type}-yaml`]?pe(n[s][`card-mod-${e.type}-yaml`]):n[s][`card-mod-${e.type}`]?{".":n[s][`card-mod-${e.type}`]}:{}:{}}(this));const s=this.parentElement||this.parentNode;for(const[e,n]of Object.entries(t))if("."===e)this._styles=n;else for(const t of await he(s,e,!0))this._styleChildren.add(await ue(t,`${this.type}-child`,n,this.variables,null,!1));var n;this._styles&&(n=this._styles,String(n).includes("{%")||String(n).includes("{{"))?(this._renderer=this._renderer||this._style_rendered.bind(this),de(this._renderer,this._styles,this.variables)):this._style_rendered(this._styles||""),this._observer.observe(s.host?s.host:s,{childList:!0})}async _disconnect(){this._observer.disconnect(),await async function(e){let t;for(const[s,n]of Object.entries(ae))if(n.callbacks.has(e)){n.callbacks.delete(e),0==n.callbacks.size&&(t=n.unsubscribe,delete ae[s]);break}t&&await(await t)()}(this._renderer),this._rendered_styles="";for(const e of this._styleChildren)e&&(e.styles=""),this._styleChildren.delete(e)}_style_rendered(e){this._rendered_styles=e,this.dispatchEvent(new Event("card-mod-update"))}createRenderRoot(){return this}render(){return $` +const e="undefined"!=typeof window&&null!=window.customElements&&void 0!==window.customElements.polyfillWrapFlushCallback,t=(e,t,s=null)=>{for(;t!==s;){const s=t.nextSibling;e.removeChild(t),t=s}},s=`{{lit-${String(Math.random()).slice(2)}}}`,n=`\x3c!--${s}--\x3e`,o=new RegExp(`${s}|${n}`);class i{constructor(e,t){this.parts=[],this.element=t;const n=[],i=[],a=document.createTreeWalker(t.content,133,null,!1);let c=0,h=-1,p=0;const{strings:u,values:{length:m}}=e;for(;p0;){const t=u[p],s=l.exec(t)[2],n=s.toLowerCase()+"$lit$",i=e.getAttribute(n);e.removeAttribute(n);const r=i.split(o);this.parts.push({type:"attribute",index:h,name:s,strings:r}),p+=r.length-1}}"TEMPLATE"===e.tagName&&(i.push(e),a.currentNode=e.content)}else if(3===e.nodeType){const t=e.data;if(t.indexOf(s)>=0){const s=e.parentNode,i=t.split(o),a=i.length-1;for(let t=0;t{const s=e.length-t.length;return s>=0&&e.slice(s)===t},a=e=>-1!==e.index,d=()=>document.createComment(""),l=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function c(e,t){const{element:{content:s},parts:n}=e,o=document.createTreeWalker(s,133,null,!1);let i=p(n),r=n[i],a=-1,d=0;const l=[];let c=null;for(;o.nextNode();){a++;const e=o.currentNode;for(e.previousSibling===c&&(c=null),t.has(e)&&(l.push(e),null===c&&(c=e)),null!==c&&d++;void 0!==r&&r.index===a;)r.index=null!==c?-1:r.index-d,i=p(n,i),r=n[i]}l.forEach((e=>e.parentNode.removeChild(e)))}const h=e=>{let t=11===e.nodeType?0:1;const s=document.createTreeWalker(e,133,null,!1);for(;s.nextNode();)t++;return t},p=(e,t=-1)=>{for(let s=t+1;s"function"==typeof e&&u.has(e),f={},y={};class _{constructor(e,t,s){this.__parts=[],this.template=e,this.processor=t,this.options=s}update(e){let t=0;for(const s of this.__parts)void 0!==s&&s.setValue(e[t]),t++;for(const e of this.__parts)void 0!==e&&e.commit()}_clone(){const t=e?this.template.element.content.cloneNode(!0):document.importNode(this.template.element.content,!0),s=[],n=this.template.parts,o=document.createTreeWalker(t,133,null,!1);let i,r=0,d=0,l=o.nextNode();for(;re}),v=` ${s} `;class w{constructor(e,t,s,n){this.strings=e,this.values=t,this.type=s,this.processor=n}getHTML(){const e=this.strings.length-1;let t="",o=!1;for(let i=0;i-1||o)&&-1===e.indexOf("--\x3e",r+1);const a=l.exec(e);t+=null===a?e+(o?v:n):e.substr(0,a.index)+a[1]+a[2]+"$lit$"+a[3]+s}return t+=this.strings[e],t}getTemplateElement(){const e=document.createElement("template");let t=this.getHTML();return void 0!==g&&(t=g.createHTML(t)),e.innerHTML=t,e}}const S=e=>null===e||!("object"==typeof e||"function"==typeof e),b=e=>Array.isArray(e)||!(!e||!e[Symbol.iterator]);class E{constructor(e,t,s){this.dirty=!0,this.element=e,this.name=t,this.strings=s,this.parts=[];for(let e=0;e{try{const e={get capture(){return A=!0,!1}};window.addEventListener("test",e,e),window.removeEventListener("test",e,e)}catch(e){}})();class O{constructor(e,t,s){this.value=void 0,this.__pendingValue=void 0,this.element=e,this.eventName=t,this.eventContext=s,this.__boundHandleEvent=e=>this.handleEvent(e)}setValue(e){this.__pendingValue=e}commit(){for(;m(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=f,e(this)}if(this.__pendingValue===f)return;const e=this.__pendingValue,t=this.value,s=null==e||null!=t&&(e.capture!==t.capture||e.once!==t.once||e.passive!==t.passive),n=null!=e&&(null==t||s);s&&this.element.removeEventListener(this.eventName,this.__boundHandleEvent,this.__options),n&&(this.__options=R(e),this.element.addEventListener(this.eventName,this.__boundHandleEvent,this.__options)),this.value=e,this.__pendingValue=f}handleEvent(e){"function"==typeof this.value?this.value.call(this.eventContext||this.element,e):this.value.handleEvent(e)}}const R=e=>e&&(A?{capture:e.capture,passive:e.passive,once:e.once}:e.capture);function U(e){let t=$.get(e.type);void 0===t&&(t={stringsArray:new WeakMap,keyString:new Map},$.set(e.type,t));let n=t.stringsArray.get(e.strings);if(void 0!==n)return n;const o=e.strings.join(s);return n=t.keyString.get(o),void 0===n&&(n=new i(e,e.getTemplateElement()),t.keyString.set(o,n)),t.stringsArray.set(e.strings,n),n}const $=new Map,M=new WeakMap;const k=new class{handleAttributeExpressions(e,t,s,n){const o=t[0];if("."===o){return new x(e,t.slice(1),s).parts}if("@"===o)return[new O(e,t.slice(1),n.eventContext)];if("?"===o)return[new P(e,t.slice(1),s)];return new E(e,t,s).parts}handleTextExpression(e){return new N(e)}};"undefined"!=typeof window&&(window.litHtmlVersions||(window.litHtmlVersions=[])).push("1.3.0");const V=(e,...t)=>new w(e,t,"html",k),q=(e,t)=>`${e}--${t}`;let D=!0;void 0===window.ShadyCSS?D=!1:void 0===window.ShadyCSS.prepareTemplateDom&&(console.warn("Incompatible ShadyCSS version detected. Please update to at least @webcomponents/webcomponentsjs@2.0.2 and @webcomponents/shadycss@1.3.1."),D=!1);const L=e=>t=>{const n=q(t.type,e);let o=$.get(n);void 0===o&&(o={stringsArray:new WeakMap,keyString:new Map},$.set(n,o));let r=o.stringsArray.get(t.strings);if(void 0!==r)return r;const a=t.strings.join(s);if(r=o.keyString.get(a),void 0===r){const s=t.getTemplateElement();D&&window.ShadyCSS.prepareTemplateDom(s,e),r=new i(t,s),o.keyString.set(a,r)}return o.stringsArray.set(t.strings,r),r},I=["html","svg"],j=new Set,z=(e,t,s)=>{j.add(e);const n=s?s.element:document.createElement("template"),o=t.querySelectorAll("style"),{length:i}=o;if(0===i)return void window.ShadyCSS.prepareTemplateStyles(n,e);const r=document.createElement("style");for(let e=0;e{I.forEach((t=>{const s=$.get(q(t,e));void 0!==s&&s.keyString.forEach((e=>{const{element:{content:t}}=e,s=new Set;Array.from(t.querySelectorAll("style")).forEach((e=>{s.add(e)})),c(e,s)}))}))})(e);const a=n.content;s?function(e,t,s=null){const{element:{content:n},parts:o}=e;if(null==s)return void n.appendChild(t);const i=document.createTreeWalker(n,133,null,!1);let r=p(o),a=0,d=-1;for(;i.nextNode();)for(d++,i.currentNode===s&&(a=h(t),s.parentNode.insertBefore(t,s));-1!==r&&o[r].index===d;){if(a>0){for(;-1!==r;)o[r].index+=a,r=p(o,r);return}r=p(o,r)}}(s,r,a.firstChild):a.insertBefore(r,a.firstChild),window.ShadyCSS.prepareTemplateStyles(n,e);const d=a.querySelector("style");if(window.ShadyCSS.nativeShadow&&null!==d)t.insertBefore(d.cloneNode(!0),t.firstChild);else if(s){a.insertBefore(r,a.firstChild);const e=new Set;e.add(r),c(s,e)}};window.JSCompiler_renameProperty=(e,t)=>e;const H={toAttribute(e,t){switch(t){case Boolean:return e?"":null;case Object:case Array:return null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){switch(t){case Boolean:return null!==e;case Number:return null===e?null:Number(e);case Object:case Array:return JSON.parse(e)}return e}},J=(e,t)=>t!==e&&(t==t||e==e),F={attribute:!0,type:String,converter:H,reflect:!1,hasChanged:J};class B extends HTMLElement{constructor(){super(),this.initialize()}static get observedAttributes(){this.finalize();const e=[];return this._classProperties.forEach(((t,s)=>{const n=this._attributeNameForProperty(s,t);void 0!==n&&(this._attributeToPropertyMap.set(n,s),e.push(n))})),e}static _ensureClassProperties(){if(!this.hasOwnProperty(JSCompiler_renameProperty("_classProperties",this))){this._classProperties=new Map;const e=Object.getPrototypeOf(this)._classProperties;void 0!==e&&e.forEach(((e,t)=>this._classProperties.set(t,e)))}}static createProperty(e,t=F){if(this._ensureClassProperties(),this._classProperties.set(e,t),t.noAccessor||this.prototype.hasOwnProperty(e))return;const s="symbol"==typeof e?Symbol():`__${e}`,n=this.getPropertyDescriptor(e,s,t);void 0!==n&&Object.defineProperty(this.prototype,e,n)}static getPropertyDescriptor(e,t,s){return{get(){return this[t]},set(n){const o=this[e];this[t]=n,this.requestUpdateInternal(e,o,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this._classProperties&&this._classProperties.get(e)||F}static finalize(){const e=Object.getPrototypeOf(this);if(e.hasOwnProperty("finalized")||e.finalize(),this.finalized=!0,this._ensureClassProperties(),this._attributeToPropertyMap=new Map,this.hasOwnProperty(JSCompiler_renameProperty("properties",this))){const e=this.properties,t=[...Object.getOwnPropertyNames(e),..."function"==typeof Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e):[]];for(const s of t)this.createProperty(s,e[s])}}static _attributeNameForProperty(e,t){const s=t.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof e?e.toLowerCase():void 0}static _valueHasChanged(e,t,s=J){return s(e,t)}static _propertyValueFromAttribute(e,t){const s=t.type,n=t.converter||H,o="function"==typeof n?n:n.fromAttribute;return o?o(e,s):e}static _propertyValueToAttribute(e,t){if(void 0===t.reflect)return;const s=t.type,n=t.converter;return(n&&n.toAttribute||H.toAttribute)(e,s)}initialize(){this._updateState=0,this._updatePromise=new Promise((e=>this._enableUpdatingResolver=e)),this._changedProperties=new Map,this._saveInstanceProperties(),this.requestUpdateInternal()}_saveInstanceProperties(){this.constructor._classProperties.forEach(((e,t)=>{if(this.hasOwnProperty(t)){const e=this[t];delete this[t],this._instanceProperties||(this._instanceProperties=new Map),this._instanceProperties.set(t,e)}}))}_applyInstanceProperties(){this._instanceProperties.forEach(((e,t)=>this[t]=e)),this._instanceProperties=void 0}connectedCallback(){this.enableUpdating()}enableUpdating(){void 0!==this._enableUpdatingResolver&&(this._enableUpdatingResolver(),this._enableUpdatingResolver=void 0)}disconnectedCallback(){}attributeChangedCallback(e,t,s){t!==s&&this._attributeToProperty(e,s)}_propertyToAttribute(e,t,s=F){const n=this.constructor,o=n._attributeNameForProperty(e,s);if(void 0!==o){const e=n._propertyValueToAttribute(t,s);if(void 0===e)return;this._updateState=8|this._updateState,null==e?this.removeAttribute(o):this.setAttribute(o,e),this._updateState=-9&this._updateState}}_attributeToProperty(e,t){if(8&this._updateState)return;const s=this.constructor,n=s._attributeToPropertyMap.get(e);if(void 0!==n){const e=s.getPropertyOptions(n);this._updateState=16|this._updateState,this[n]=s._propertyValueFromAttribute(t,e),this._updateState=-17&this._updateState}}requestUpdateInternal(e,t,s){let n=!0;if(void 0!==e){const o=this.constructor;s=s||o.getPropertyOptions(e),o._valueHasChanged(this[e],t,s.hasChanged)?(this._changedProperties.has(e)||this._changedProperties.set(e,t),!0!==s.reflect||16&this._updateState||(void 0===this._reflectingProperties&&(this._reflectingProperties=new Map),this._reflectingProperties.set(e,s))):n=!1}!this._hasRequestedUpdate&&n&&(this._updatePromise=this._enqueueUpdate())}requestUpdate(e,t){return this.requestUpdateInternal(e,t),this.updateComplete}async _enqueueUpdate(){this._updateState=4|this._updateState;try{await this._updatePromise}catch(e){}const e=this.performUpdate();return null!=e&&await e,!this._hasRequestedUpdate}get _hasRequestedUpdate(){return 4&this._updateState}get hasUpdated(){return 1&this._updateState}performUpdate(){if(!this._hasRequestedUpdate)return;this._instanceProperties&&this._applyInstanceProperties();let e=!1;const t=this._changedProperties;try{e=this.shouldUpdate(t),e?this.update(t):this._markUpdated()}catch(t){throw e=!1,this._markUpdated(),t}e&&(1&this._updateState||(this._updateState=1|this._updateState,this.firstUpdated(t)),this.updated(t))}_markUpdated(){this._changedProperties=new Map,this._updateState=-5&this._updateState}get updateComplete(){return this._getUpdateComplete()}_getUpdateComplete(){return this._updatePromise}shouldUpdate(e){return!0}update(e){void 0!==this._reflectingProperties&&this._reflectingProperties.size>0&&(this._reflectingProperties.forEach(((e,t)=>this._propertyToAttribute(t,this[t],e))),this._reflectingProperties=void 0),this._markUpdated()}updated(e){}firstUpdated(e){}}B.finalized=!0;const W=(e,t)=>"method"===t.kind&&t.descriptor&&!("value"in t.descriptor)?Object.assign(Object.assign({},t),{finisher(s){s.createProperty(t.key,e)}}):{kind:"field",key:Symbol(),placement:"own",descriptor:{},initializer(){"function"==typeof t.initializer&&(this[t.key]=t.initializer.call(this))},finisher(s){s.createProperty(t.key,e)}};const Y=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,G=Symbol();class K{constructor(e,t){if(t!==G)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e}get styleSheet(){return void 0===this._styleSheet&&(Y?(this._styleSheet=new CSSStyleSheet,this._styleSheet.replaceSync(this.cssText)):this._styleSheet=null),this._styleSheet}toString(){return this.cssText}}(window.litElementVersions||(window.litElementVersions=[])).push("2.4.0");const Q={};class X extends B{static getStyles(){return this.styles}static _getUniqueStyles(){if(this.hasOwnProperty(JSCompiler_renameProperty("_styles",this)))return;const e=this.getStyles();if(Array.isArray(e)){const t=(e,s)=>e.reduceRight(((e,s)=>Array.isArray(s)?t(s,e):(e.add(s),e)),s),s=t(e,new Set),n=[];s.forEach((e=>n.unshift(e))),this._styles=n}else this._styles=void 0===e?[]:[e];this._styles=this._styles.map((e=>{if(e instanceof CSSStyleSheet&&!Y){const t=Array.prototype.slice.call(e.cssRules).reduce(((e,t)=>e+t.cssText),"");return new K(String(t),G)}return e}))}initialize(){super.initialize(),this.constructor._getUniqueStyles(),this.renderRoot=this.createRenderRoot(),window.ShadowRoot&&this.renderRoot instanceof window.ShadowRoot&&this.adoptStyles()}createRenderRoot(){return this.attachShadow({mode:"open"})}adoptStyles(){const e=this.constructor._styles;0!==e.length&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow?Y?this.renderRoot.adoptedStyleSheets=e.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet)):this._needsShimAdoptedStyleSheets=!0:window.ShadyCSS.ScopingShim.prepareAdoptedCssText(e.map((e=>e.cssText)),this.localName))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&void 0!==window.ShadyCSS&&window.ShadyCSS.styleElement(this)}update(e){const t=this.render();super.update(e),t!==Q&&this.constructor.render(t,this.renderRoot,{scopeName:this.localName,eventContext:this}),this._needsShimAdoptedStyleSheets&&(this._needsShimAdoptedStyleSheets=!1,this.constructor._styles.forEach((e=>{const t=document.createElement("style");t.textContent=e.cssText,this.renderRoot.appendChild(t)})))}render(){return Q}}function Z(){return document.querySelector("hc-main")?document.querySelector("hc-main").hass:document.querySelector("home-assistant")?document.querySelector("home-assistant").hass:void 0}X.finalized=!0,X.render=(e,s,n)=>{if(!n||"object"!=typeof n||!n.scopeName)throw new Error("The `scopeName` option is required.");const o=n.scopeName,i=M.has(s),r=D&&11===s.nodeType&&!!s.host,a=r&&!j.has(o),d=a?document.createDocumentFragment():s;if(((e,s,n)=>{let o=M.get(s);void 0===o&&(t(s,s.firstChild),M.set(s,o=new N(Object.assign({templateFactory:U},n))),o.appendInto(s)),o.setValue(e),o.commit()})(e,d,Object.assign({templateFactory:L(o)},n)),a){const e=M.get(d);M.delete(d);const n=e.value instanceof _?e.value.template:void 0;z(o,d,n),t(s,s.firstChild),s.appendChild(d),M.set(s,e)}!i&&r&&window.ShadyCSS.styleElement(s.host)};const ee="lovelace-player-device-id";function te(){if(!localStorage[ee]){const e=()=>Math.floor(1e5*(1+Math.random())).toString(16).substring(1);window.fully&&"function"==typeof fully.getDeviceId?localStorage[ee]=fully.getDeviceId():localStorage[ee]=`${e()}${e()}-${e()}${e()}`}return localStorage[ee]}let se=te();const ne=new URLSearchParams(window.location.search);var oe;ne.get("deviceID")&&null!==(oe=ne.get("deviceID"))&&("clear"===oe?localStorage.removeItem(ee):localStorage[ee]=oe,se=te()),window.cardMod_template_cache=window.cardMod_template_cache||{};const ie=window.cardMod_template_cache;async function re(e,t,s){const n=Z().connection,o=JSON.stringify([t,s]);let i=ie[o];i?(e(i.value),i.callbacks.add(e)):(e(""),s=Object.assign({user:Z().user.name,browser:se,hash:location.hash.substr(1)||""},s),ie[o]=i={template:t,variables:s,value:"",callbacks:new Set([e]),unsubscribe:n.subscribeMessage((e=>function(e,t){const s=ie[e];s&&(s.value=t.result,s.callbacks.forEach((e=>e(t.result))))}(o,e)),{type:"render_template",template:t,variables:s})})}var ae="3.0.3";async function de(e,t,s=!1){let n=e;"string"==typeof t&&(t=t.split(/(\$| )/)),""===t[t.length-1]&&t.pop();for(const[e,o]of t.entries())if(o.trim().length){if(!n)return null;n.localName&&n.localName.includes("-")&&await customElements.whenDefined(n.localName),n.updateComplete&&await n.updateComplete,n="$"===o?s&&e==t.length-1?[n.shadowRoot]:n.shadowRoot:s&&e==t.length-1?n.querySelectorAll(o):n.querySelector(o)}return n}async function le(e,t,s=!1,n=1e4){return Promise.race([de(e,t,s),new Promise(((e,t)=>setTimeout((()=>t(new Error("timeout"))),n)))]).catch((e=>{if(!e.message||"timeout"!==e.message)throw e;return null}))}const ce=async e=>{await(async()=>{if(customElements.get("developer-tools-event"))return;await customElements.whenDefined("partial-panel-resolver");const e=document.createElement("partial-panel-resolver");e.hass={panels:[{url_path:"tmp",component_name:"developer-tools"}]},e._updateRoutes(),await e.routerOptions.routes.tmp.load(),await customElements.whenDefined("developer-tools-router");const t=document.createElement("developer-tools-router");await t.routerOptions.routes.event.load()})();return document.createElement("developer-tools-event")._computeParsedEventData(e)};async function he(e,t,s="",n={},o=null,i=!0){var r;let a;(null===(r=e.localName)||void 0===r?void 0:r.includes("-"))&&await customElements.whenDefined(e.localName),e.updateComplete&&await e.updateComplete,void 0===e._cardMod&&(e._cardMod=[]);for(const s of e._cardMod)if(s.type===t){a=s;break}a||(a=document.createElement("card-mod"),a.type=t,e._cardMod.push(a));return(e.modElement?e.modElement:i&&e.shadowRoot||e).appendChild(a),a.variables=n,a.styles=s,a}function pe(e,t){const s=e=>e&&"object"==typeof e&&!Array.isArray(e);if(s(e)&&s(t))for(const n in t)s(t[n])?(e[n]||Object.assign(e,{[n]:{}}),"string"==typeof e[n]&&(e[n]={".":e[n]}),pe(e[n],t[n])):e[n]?e[n]=t[n]+e[n]:e[n]=t[n];return e}function ue(e){return e.config?e.config:e._config?e._config:e.host?ue(e.host):e.parentElement?ue(e.parentElement):e.parentNode?ue(e.parentNode):null}function me(e,t){for(const s of t)e.add(s)}async function fe(e,t=0){let s=new Set;return 10==t?s:e?(e._cardMod&&e._cardMod.style&&s.add(e._cardMod),e.updateComplete&&await e.updateComplete,e.parentElement&&me(s,await fe(e.parentElement,t+1)),e.parentNode&&me(s,await fe(e.parentNode,t+1)),e.host&&me(s,await fe(e.host,t+1)),s):s}function ye(e){if(!e)return;const t=e.parentElement||e.parentNode;return t.host?t.host:t}class _e extends X{constructor(){super(),this._rendered_styles="",this._styleChildren=new Set,this._refreshCooldown={running:!1,repeat:!1},this._observer=new MutationObserver((e=>{for(const t of e){if("card-mod"===t.target.localName)return;let e=!0;if(t.addedNodes.length&&t.addedNodes.forEach((t=>{"card-mod"!==t.localName&&(e=!1)})),e)return;e=!0,t.removedNodes.length&&t.removedNodes.forEach((t=>{"card-mod"!==t.localName&&(e=!1)}))}this.refresh()})),document.querySelector("home-assistant").addEventListener("settheme",(()=>this.refresh()))}static get applyToElement(){return he}connectedCallback(){super.connectedCallback(),this.refresh(),this.setAttribute("slot","none")}disconnectedCallback(){super.disconnectedCallback(),this._disconnect()}set styles(e){this._input_styles=e,this.refresh()}refresh(){this._refreshCooldown.running?this._refreshCooldown.repeat=!0:(window.setTimeout((()=>{this._refreshCooldown.running=!1,this._refreshCooldown.repeat&&this.refresh()}),1),this._refreshCooldown.repeat=!1,this._disconnect().then((()=>this._connect(this._input_styles))))}async _connect(e){let t=JSON.parse(JSON.stringify(e||{}));"string"==typeof t&&(t={".":t});pe(t,await async function(e){if(!e.type)return null;const t=e.parentElement?e.parentElement:e,s=window.getComputedStyle(t).getPropertyValue("--card-mod-theme"),n=Z().themes.themes;return n[s]?n[s][`card-mod-${e.type}-yaml`]?ce(n[s][`card-mod-${e.type}-yaml`]):n[s][`card-mod-${e.type}`]?{".":n[s][`card-mod-${e.type}`]}:{}:{}}(this));const s=this.parentElement||this.parentNode;for(const[e,n]of Object.entries(t))if("."===e)this._styles=n;else for(const t of await le(s,e,!0))this._styleChildren.add(await he(t,`${this.type}-child`,n,this.variables,null,!1));var n;this._styles&&(n=this._styles,String(n).includes("{%")||String(n).includes("{{"))?(this._renderer=this._renderer||this._style_rendered.bind(this),re(this._renderer,this._styles,this.variables)):this._style_rendered(this._styles||""),this._observer.observe(ye(this),{childList:!0});const o=ye(ye(this));if(this._observer.observe(o,{childList:!0}),o&&o.updated&&!o._cm_update_patched){const e=o.updated,t=this;o.updated=function(s){e.bind(this)(s),this.updateComplete.then((()=>t.refresh()))},o._cm_update_patched=!0}}async _disconnect(){this._observer.disconnect(),await async function(e){let t;for(const[s,n]of Object.entries(ie))if(n.callbacks.has(e)){n.callbacks.delete(e),0==n.callbacks.size&&(t=n.unsubscribe,delete ie[s]);break}t&&await(await t)()}(this._renderer),this._rendered_styles="";for(const e of this._styleChildren)e&&(e.styles=""),this._styleChildren.delete(e)}_style_rendered(e){this._rendered_styles=e,this.dispatchEvent(new Event("card-mod-update"))}createRenderRoot(){return this}render(){return V` - `}}var ve;function we(e,t,s=null){if((e=new Event(e,{bubbles:!0,cancelable:!1,composed:!0})).detail=t||{},s)s.dispatchEvent(e);else{var n=function(){var e=document.querySelector("hc-main");return e?(e=(e=(e=e&&e.shadowRoot)&&e.querySelector("hc-lovelace"))&&e.shadowRoot)&&e.querySelector("hui-view")||e.querySelector("hui-panel-view"):(e=(e=(e=(e=(e=(e=(e=(e=(e=(e=(e=(e=document.querySelector("home-assistant"))&&e.shadowRoot)&&e.querySelector("home-assistant-main"))&&e.shadowRoot)&&e.querySelector("app-drawer-layout partial-panel-resolver"))&&e.shadowRoot||e)&&e.querySelector("ha-panel-lovelace"))&&e.shadowRoot)&&e.querySelector("hui-root"))&&e.shadowRoot)&&e.querySelector("ha-app-layout"))&&e.querySelector("#view"))&&e.firstElementChild}();n&&n.dispatchEvent(e)}}!function(e,t,s,n){var o,i=arguments.length,r=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,s):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,n);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(r=(i<3?o(r):i>3?o(t,s,r):o(t,s))||r);i>3&&r&&Object.defineProperty(t,s,r)}([(e,t)=>void 0!==t?((e,t,s)=>{t.constructor.createProperty(s,e)})(ve,e,t):G(ve,e)],ge.prototype,"_rendered_styles",void 0),customElements.get("card-mod")||(customElements.define("card-mod",ge),console.info(`%cCARD-MOD ${le} IS INSTALLED`,"color: green; font-weight: bold","")),customElements.whenDefined("ha-card").then((()=>{const e=customElements.get("ha-card");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.firstUpdated;e.prototype.firstUpdated=function(e){var s,n;null==t||t.bind(this)(e);const o=this.shadowRoot.querySelector(".card-header");o&&this.insertBefore(o,this.children[0]);const i=fe(this);(null===(s=null==i?void 0:i.card_mod)||void 0===s?void 0:s.class)&&this.classList.add(i.card_mod.class),(null==i?void 0:i.type)&&this.classList.add(`type-${i.type.replace(":","-")}`),ue(this,"card",(null===(n=null==i?void 0:i.card_mod)||void 0===n?void 0:n.style)||(null==i?void 0:i.style)||"",{config:i},null,!1).then((e=>{var t,s;if(null===(s=null===(t=this.parentNode)||void 0===t?void 0:t.host)||void 0===s?void 0:s.setConfig){const t=this.parentNode.host.setConfig;this.parentNode.host.setConfig=function(s){t.bind(this)(s),s.card_mod&&(e.variables={config:s},e.styles=s.card_mod)}}}))},we("ll-rebuild",{})})),customElements.whenDefined("hui-entities-card").then((()=>{const e=customElements.get("hui-entities-card");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.renderEntity;e.prototype.renderEntity=function(e){var s;const n=t.bind(this)(e);if(!n||!n.values)return n;const o=n.values[0];if(!o)return n;(null===(s=null==e?void 0:e.card_mod)||void 0===s?void 0:s.class)&&o.classList.add(e.card_mod.class),(null==e?void 0:e.type)&&o.classList.add(`type-${e.type.replace(":","-")}`);const i=()=>{var t;return ue(o,"row",(null===(t=null==e?void 0:e.card_mod)||void 0===t?void 0:t.style)||(null==e?void 0:e.style)||"",{config:e})};return i(),n.values[0]&&n.values[0].addEventListener("ll-rebuild",i),n},we("ll-rebuild",{})}));customElements.whenDefined("hui-glance-card").then((()=>{const e=customElements.get("hui-glance-card");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.updated;e.prototype.updated=function(e){var s,n;null==t||t.bind(this)(e);for(const e of this.shadowRoot.querySelectorAll("ha-card div.entity")){if(!e.cardmod_patched){e.cardmod_patched=!0;const t=e.attachShadow({mode:"open"});for(;e.firstChild;)t.append(e.firstChild);const s=document.createElement("style");t.appendChild(s),s.innerHTML="\ndiv {\n width: 100%;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.name {\n min-height: var(--paper-font-body1_-_line-height, 20px);\n}\nstate-badge {\n margin: 8px 0;\n}\n"}const t=e.config||e.entityConf;(null===(s=null==t?void 0:t.card_mod)||void 0===s?void 0:s.class)&&e.classList.add(t.card_mod.class),ue(e,"glance",(null===(n=null==t?void 0:t.card_mod)||void 0===n?void 0:n.style)||(null==t?void 0:t.style)||"",{config:t})}},we("ll-rebuild",{})})),customElements.whenDefined("hui-state-label-badge").then((()=>{const e=customElements.get("hui-state-label-badge");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.firstUpdated;e.prototype.firstUpdated=function(e){var s,n;null==t||t.bind(this)(e);const o=this._config;(null===(s=null==o?void 0:o.card_mod)||void 0===s?void 0:s.class)&&this.classList.add(o.card_mod.class),ue(this,"badge",(null===(n=null==o?void 0:o.card_mod)||void 0===n?void 0:n.style)||(null==o?void 0:o.style)||"",{config:o})},we("ll-rebuild",{})})),customElements.whenDefined("hui-view").then((()=>{const e=customElements.get("hui-view");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.firstUpdated;e.prototype.firstUpdated=function(e){null==t||t.bind(this)(e),ue(this,"view")},we("ll-rebuild",{})})),customElements.whenDefined("hui-root").then((()=>{const e=customElements.get("hui-root");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.firstUpdated;e.prototype.firstUpdated=async function(e){null==t||t.bind(this)(e),ue(this,"root")},we("ll-rebuild",{}),he(document,"home-assistant$home-assistant-main$app-drawer-layout partial-panel-resolver ha-panel-lovelace$hui-root",!1).then((e=>{null==e||e.firstUpdated()}))})),customElements.whenDefined("ha-more-info-dialog").then((()=>{const e=customElements.get("ha-more-info-dialog");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.showDialog;e.prototype.showDialog=function(e){null==t||t.bind(this)(e),this.requestUpdate().then((async()=>{ue(this.shadowRoot.querySelector("ha-dialog"),"more-info","",{config:e},null,!1)}))},he(document,"home-assistant$ha-more-info-dialog",!1).then((t=>{t&&(t.showDialog=e.prototype.showDialog.bind(t),t.showDialog({entityId:t.entityId}))}))})),customElements.whenDefined("ha-sidebar").then((()=>{const e=customElements.get("ha-sidebar");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.firstUpdated;e.prototype.firstUpdated=async function(e){null==t||t.bind(this)(e),ue(this,"sidebar")},we("ll-rebuild",{}),he(document,"home-assistant$home-assistant-main$app-drawer-layout app-drawer ha-sidebar",!1).then((e=>null==e?void 0:e.firstUpdated()))})),customElements.whenDefined("hui-card-element-editor").then((()=>{const e=customElements.get("hui-card-element-editor");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.getConfigElement;e.prototype.getConfigElement=async function(){const e=await t.bind(this)();if(e){const t=e.setConfig;e.setConfig=function(e){var s,n;const o=JSON.parse(JSON.stringify(e)),i={card:o.card_mod,entities:[]};if(delete o.card_mod,o.entities)for(const[e,t]of null===(s=o.entities)||void 0===s?void 0:s.entries())i.entities[e]=t.card_mod,delete t.card_mod;if(t.bind(this)(o),i.card&&(o.card_mod=i.card),o.entities)for(const[e,t]of null===(n=o.entities)||void 0===n?void 0:n.entries())i.entities[e]&&(t.card_mod=i.entities[e])}}return e}})),customElements.whenDefined("hui-dialog-edit-card").then((()=>{const e=customElements.get("hui-dialog-edit-card");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.updated;e.prototype.updated=function(e){null==t||t.bind(this)(e),this.updateComplete.then((async()=>{var e,t,s;this._cardModIcon||(this._cardModIcon=document.createElement("ha-icon"),this._cardModIcon.icon="mdi:brush");const n=this.shadowRoot.querySelector("mwc-button[slot=secondaryAction]");n&&(n.appendChild(this._cardModIcon),(null===(e=this._cardConfig)||void 0===e?void 0:e.card_mod)||(null===(s=null===(t=this._cardConfig)||void 0===t?void 0:t.entities)||void 0===s?void 0:s.some((e=>e.card_mod)))?this._cardModIcon.style.visibility="visible":this._cardModIcon.style.visibility="hidden")}))}})),customElements.whenDefined("hui-picture-elements-card").then((()=>{const e=customElements.get("hui-picture-elements-card");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.setConfig;e.prototype.setConfig=function(e){var s,n;null==t||t.bind(this)(e);for(const[e,t]of this._elements.entries()){const o=this._config.elements[e];(null===(s=null==o?void 0:o.card_mod)||void 0===s?void 0:s.class)&&t.clasList.add(o.card_mod.class),(null==o?void 0:o.type)&&t.classList.add(`type-${o.type.replace(":","-")}`),ue(t,"element",null===(n=null==o?void 0:o.card_mod)||void 0===n?void 0:n.style,{config:o})}},we("ll-rebuild",{})})),customElements.whenDefined("ha-icon").then((()=>{const e=customElements.get("ha-icon");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.firstUpdated;e.prototype.firstUpdated=function(){null==t||t.bind(this)();const e=()=>{const e=window.getComputedStyle(this).getPropertyValue("--icon");e&&(this.icon=e.trim());const t=window.getComputedStyle(this).getPropertyValue("--icon-color");t&&(this.style.color=t)};(async()=>{const t=await _e(this);for(const s of t)s.addEventListener("card-mod-update",(async()=>{await s.updateComplete,e()}));e()})()}}));const Se="custom:";let be=window.cardHelpers;const Ee=new Promise((async(e,t)=>{be&&e();const s=async()=>{be=await window.loadCardHelpers(),window.cardHelpers=be,e()};window.loadCardHelpers?s():window.addEventListener("load",(async()=>{!async function(){if(customElements.get("hui-view"))return!0;await customElements.whenDefined("partial-panel-resolver");const e=document.createElement("partial-panel-resolver");if(e.hass={panels:[{url_path:"tmp",component_name:"lovelace"}]},e._updateRoutes(),await e.routerOptions.routes.tmp.load(),!customElements.get("ha-panel-lovelace"))return!1;const t=document.createElement("ha-panel-lovelace");t.hass=te(),void 0===t.hass&&(await new Promise((e=>{window.addEventListener("connection-status",(t=>{console.log(t),e()}),{once:!0})})),t.hass=te()),t.panel={config:{mode:null}},t._fetchConfig()}(),window.loadCardHelpers&&s()}))}));function Ce(e,t){const s={type:"error",error:e,origConfig:t},n=document.createElement("hui-error-card");return customElements.whenDefined("hui-error-card").then((()=>{const e=document.createElement("hui-error-card");e.setConfig(s),n.parentElement&&n.parentElement.replaceChild(e,n)})),Ee.then((()=>{we("ll-rebuild",{},n)})),n}function Ne(e,t){if(!t||"object"!=typeof t||!t.type)return Ce(`No ${e} type configured`,t);let s=t.type;if(s=s.startsWith(Se)?s.substr(Se.length):`hui-${s}-${e}`,customElements.get(s))return function(e,t){let s=document.createElement(e);try{s.setConfig(JSON.parse(JSON.stringify(t)))}catch(e){s=Ce(e,t)}return Ee.then((()=>{we("ll-rebuild",{},s)})),s}(s,t);const n=Ce(`Custom element doesn't exist: ${s}.`,t);n.style.display="None";const o=setTimeout((()=>{n.style.display=""}),2e3);return customElements.whenDefined(s).then((()=>{clearTimeout(o),we("ll-rebuild",{},n)})),n}const Pe="\nha-card {\n background: none;\n box-shadow: none;\n}";customElements.define("mod-card",class extends ee{static get properties(){return{hass:{}}}setConfig(e){this._config=JSON.parse(JSON.stringify(e));let t=this._config.card_mod||this._config.style;void 0===t?t=Pe:"string"==typeof t?t=Pe+t:t["."]?t["."]=Pe+t["."]:t["."]=Pe,this._config.card_mod=t,this.card=function(e){return be?be.createCardElement(e):Ne("card",e)}(e.card),this.card.hass=te()}firstUpdated(){window.setTimeout((()=>{var e,t;if(null===(t=null===(e=this.card)||void 0===e?void 0:e.shadowRoot)||void 0===t?void 0:t.querySelector("ha-card")){console.info("%cYou are doing it wrong!","color: red; font-weight: bold","");let e=this.card.localName.replace(/hui-(.*)-card/,"$1");console.info(`mod-card should NEVER be used with a card that already has a ha-card element, such as ${e}`)}}),3e3)}render(){return $` ${this.card} `}set hass(e){this.card&&(this.card.hass=e)}getCardSize(){if(this._config.report_size)return this._config.report_size;let e=this.shadowRoot;return e&&(e=e.querySelector("ha-card card-maker")),e&&(e=e.getCardSize),e&&(e=e()),e||1}})}(); + `}}var ge;function ve(e,t,s=null){if((e=new Event(e,{bubbles:!0,cancelable:!1,composed:!0})).detail=t||{},s)s.dispatchEvent(e);else{var n=function(){var e=document.querySelector("hc-main");return e?(e=(e=(e=e&&e.shadowRoot)&&e.querySelector("hc-lovelace"))&&e.shadowRoot)&&e.querySelector("hui-view")||e.querySelector("hui-panel-view"):(e=(e=(e=(e=(e=(e=(e=(e=(e=(e=(e=(e=document.querySelector("home-assistant"))&&e.shadowRoot)&&e.querySelector("home-assistant-main"))&&e.shadowRoot)&&e.querySelector("app-drawer-layout partial-panel-resolver"))&&e.shadowRoot||e)&&e.querySelector("ha-panel-lovelace"))&&e.shadowRoot)&&e.querySelector("hui-root"))&&e.shadowRoot)&&e.querySelector("ha-app-layout"))&&e.querySelector("#view"))&&e.firstElementChild}();n&&n.dispatchEvent(e)}}!function(e,t,s,n){var o,i=arguments.length,r=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,s):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,n);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(r=(i<3?o(r):i>3?o(t,s,r):o(t,s))||r);i>3&&r&&Object.defineProperty(t,s,r)}([(e,t)=>void 0!==t?((e,t,s)=>{t.constructor.createProperty(s,e)})(ge,e,t):W(ge,e)],_e.prototype,"_rendered_styles",void 0),customElements.get("card-mod")||(customElements.define("card-mod",_e),console.info(`%cCARD-MOD ${ae} IS INSTALLED`,"color: green; font-weight: bold","")),customElements.whenDefined("ha-card").then((()=>{const e=customElements.get("ha-card");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.firstUpdated;e.prototype.firstUpdated=function(e){var s,n;null==t||t.bind(this)(e);const o=this.shadowRoot.querySelector(".card-header");o&&this.insertBefore(o,this.children[0]);const i=ue(this);(null===(s=null==i?void 0:i.card_mod)||void 0===s?void 0:s.class)&&this.classList.add(i.card_mod.class),(null==i?void 0:i.type)&&this.classList.add(`type-${i.type.replace(":","-")}`),he(this,"card",(null===(n=null==i?void 0:i.card_mod)||void 0===n?void 0:n.style)||(null==i?void 0:i.style)||"",{config:i},null,!1).then((e=>{var t,s;if(null===(s=null===(t=this.parentNode)||void 0===t?void 0:t.host)||void 0===s?void 0:s.setConfig){const t=this.parentNode.host.setConfig;this.parentNode.host.setConfig=function(s){t.bind(this)(s),s.card_mod&&(e.variables={config:s},e.styles=s.card_mod)}}}))},ve("ll-rebuild",{})})),customElements.whenDefined("hui-entities-card").then((()=>{const e=customElements.get("hui-entities-card");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.renderEntity;e.prototype.renderEntity=function(e){var s;const n=t.bind(this)(e);if(!n||!n.values)return n;const o=n.values[0];if(!o)return n;(null===(s=null==e?void 0:e.card_mod)||void 0===s?void 0:s.class)&&o.classList.add(e.card_mod.class),(null==e?void 0:e.type)&&o.classList.add(`type-${e.type.replace(":","-")}`);const i=()=>{var t;return he(o,"row",(null===(t=null==e?void 0:e.card_mod)||void 0===t?void 0:t.style)||(null==e?void 0:e.style)||"",{config:e})};return i(),n.values[0]&&n.values[0].addEventListener("ll-rebuild",i),n},ve("ll-rebuild",{})}));customElements.whenDefined("hui-glance-card").then((()=>{const e=customElements.get("hui-glance-card");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.updated;e.prototype.updated=function(e){var s,n;null==t||t.bind(this)(e);for(const e of this.shadowRoot.querySelectorAll("ha-card div.entity")){if(!e.cardmod_patched){e.cardmod_patched=!0;const t=e.attachShadow({mode:"open"});for(;e.firstChild;)t.append(e.firstChild);const s=document.createElement("style");t.appendChild(s),s.innerHTML="\ndiv {\n width: 100%;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.name {\n min-height: var(--paper-font-body1_-_line-height, 20px);\n}\nstate-badge {\n margin: 8px 0;\n}\n"}const t=e.config||e.entityConf;(null===(s=null==t?void 0:t.card_mod)||void 0===s?void 0:s.class)&&e.classList.add(t.card_mod.class),he(e,"glance",(null===(n=null==t?void 0:t.card_mod)||void 0===n?void 0:n.style)||(null==t?void 0:t.style)||"",{config:t})}},ve("ll-rebuild",{})})),customElements.whenDefined("hui-state-label-badge").then((()=>{const e=customElements.get("hui-state-label-badge");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.firstUpdated;e.prototype.firstUpdated=function(e){var s,n;null==t||t.bind(this)(e);const o=this._config;(null===(s=null==o?void 0:o.card_mod)||void 0===s?void 0:s.class)&&this.classList.add(o.card_mod.class),he(this,"badge",(null===(n=null==o?void 0:o.card_mod)||void 0===n?void 0:n.style)||(null==o?void 0:o.style)||"",{config:o})},ve("ll-rebuild",{})})),customElements.whenDefined("hui-view").then((()=>{const e=customElements.get("hui-view");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.firstUpdated;e.prototype.firstUpdated=function(e){null==t||t.bind(this)(e),he(this,"view")},ve("ll-rebuild",{})})),customElements.whenDefined("hui-root").then((()=>{const e=customElements.get("hui-root");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.firstUpdated;e.prototype.firstUpdated=async function(e){null==t||t.bind(this)(e),he(this,"root")},ve("ll-rebuild",{}),le(document,"home-assistant$home-assistant-main$app-drawer-layout partial-panel-resolver ha-panel-lovelace$hui-root",!1).then((e=>{null==e||e.firstUpdated()}))})),customElements.whenDefined("ha-more-info-dialog").then((()=>{const e=customElements.get("ha-more-info-dialog");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.showDialog;e.prototype.showDialog=function(e){null==t||t.bind(this)(e),this.requestUpdate().then((async()=>{he(this.shadowRoot.querySelector("ha-dialog"),"more-info","",{config:e},null,!1)}))},le(document,"home-assistant$ha-more-info-dialog",!1).then((t=>{t&&(t.showDialog=e.prototype.showDialog.bind(t),t.showDialog({entityId:t.entityId}))}))})),customElements.whenDefined("ha-sidebar").then((()=>{const e=customElements.get("ha-sidebar");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.firstUpdated;e.prototype.firstUpdated=async function(e){null==t||t.bind(this)(e),he(this,"sidebar")},ve("ll-rebuild",{}),le(document,"home-assistant$home-assistant-main$app-drawer-layout app-drawer ha-sidebar",!1).then((e=>null==e?void 0:e.firstUpdated()))})),customElements.whenDefined("hui-card-element-editor").then((()=>{const e=customElements.get("hui-card-element-editor");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.getConfigElement;e.prototype.getConfigElement=async function(){const e=await t.bind(this)();if(e){const t=e.setConfig;e.setConfig=function(e){var s,n;const o=JSON.parse(JSON.stringify(e)),i={card:o.card_mod,entities:[]};if(delete o.card_mod,o.entities)for(const[e,t]of null===(s=o.entities)||void 0===s?void 0:s.entries())i.entities[e]=t.card_mod,delete t.card_mod;if(t.bind(this)(o),i.card&&(o.card_mod=i.card),o.entities)for(const[e,t]of null===(n=o.entities)||void 0===n?void 0:n.entries())i.entities[e]&&(t.card_mod=i.entities[e])}}return e}})),customElements.whenDefined("hui-dialog-edit-card").then((()=>{const e=customElements.get("hui-dialog-edit-card");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.updated;e.prototype.updated=function(e){null==t||t.bind(this)(e),this.updateComplete.then((async()=>{var e,t,s;this._cardModIcon||(this._cardModIcon=document.createElement("ha-icon"),this._cardModIcon.icon="mdi:brush");const n=this.shadowRoot.querySelector("mwc-button[slot=secondaryAction]");n&&(n.appendChild(this._cardModIcon),(null===(e=this._cardConfig)||void 0===e?void 0:e.card_mod)||(null===(s=null===(t=this._cardConfig)||void 0===t?void 0:t.entities)||void 0===s?void 0:s.some((e=>e.card_mod)))?this._cardModIcon.style.visibility="visible":this._cardModIcon.style.visibility="hidden")}))}})),customElements.whenDefined("hui-picture-elements-card").then((()=>{const e=customElements.get("hui-picture-elements-card");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.setConfig;e.prototype.setConfig=function(e){var s,n;null==t||t.bind(this)(e);for(const[e,t]of this._elements.entries()){const o=this._config.elements[e];(null===(s=null==o?void 0:o.card_mod)||void 0===s?void 0:s.class)&&t.classList.add(o.card_mod.class),(null==o?void 0:o.type)&&t.classList.add(`type-${o.type.replace(":","-")}`),he(t,"element",null===(n=null==o?void 0:o.card_mod)||void 0===n?void 0:n.style,{config:o})}},ve("ll-rebuild",{})})),customElements.whenDefined("ha-icon").then((()=>{const e=customElements.get("ha-icon");if(e.prototype.cardmod_patched)return;e.prototype.cardmod_patched=!0;const t=e.prototype.firstUpdated;e.prototype.firstUpdated=function(){null==t||t.bind(this)();const e=()=>{const e=window.getComputedStyle(this).getPropertyValue("--icon");e&&(this.icon=e.trim());const t=window.getComputedStyle(this).getPropertyValue("--icon-color");t&&(this.style.color=t)};(async()=>{const t=await fe(this);for(const s of t)s.addEventListener("card-mod-update",(async()=>{await s.updateComplete,e()}));e()})()}}));let we=window.cardHelpers;const Se=new Promise((async(e,t)=>{we&&e();const s=async()=>{we=await window.loadCardHelpers(),window.cardHelpers=we,e()};window.loadCardHelpers?s():window.addEventListener("load",(async()=>{!async function(){if(customElements.get("hui-view"))return!0;await customElements.whenDefined("partial-panel-resolver");const e=document.createElement("partial-panel-resolver");if(e.hass={panels:[{url_path:"tmp",component_name:"lovelace"}]},e._updateRoutes(),await e.routerOptions.routes.tmp.load(),!customElements.get("ha-panel-lovelace"))return!1;const t=document.createElement("ha-panel-lovelace");t.hass=Z(),void 0===t.hass&&(await new Promise((e=>{window.addEventListener("connection-status",(t=>{console.log(t),e()}),{once:!0})})),t.hass=Z()),t.panel={config:{mode:null}},t._fetchConfig()}(),window.loadCardHelpers&&s()}))}));function be(e,t){const s={type:"error",error:e,origConfig:t},n=document.createElement("hui-error-card");return customElements.whenDefined("hui-error-card").then((()=>{const e=document.createElement("hui-error-card");e.setConfig(s),n.parentElement&&n.parentElement.replaceChild(e,n)})),Se.then((()=>{ve("ll-rebuild",{},n)})),n}function Ee(e,t){if(!t||"object"!=typeof t||!t.type)return be(`No ${e} type configured`,t);let s=t.type;if(s=s.startsWith("custom:")?s.substr("custom:".length):`hui-${s}-${e}`,customElements.get(s))return function(e,t){let s=document.createElement(e);try{s.setConfig(JSON.parse(JSON.stringify(t)))}catch(e){s=be(e,t)}return Se.then((()=>{ve("ll-rebuild",{},s)})),s}(s,t);const n=be(`Custom element doesn't exist: ${s}.`,t);n.style.display="None";const o=setTimeout((()=>{n.style.display=""}),2e3);return customElements.whenDefined(s).then((()=>{clearTimeout(o),ve("ll-rebuild",{},n)})),n}const Ce="\nha-card {\n background: none;\n box-shadow: none;\n}";customElements.define("mod-card",class extends X{static get properties(){return{hass:{}}}setConfig(e){this._config=JSON.parse(JSON.stringify(e));let t=this._config.card_mod||this._config.style;void 0===t?t=Ce:"string"==typeof t?t=Ce+t:t["."]?t["."]=Ce+t["."]:t["."]=Ce,this._config.card_mod=t,this.card=function(e){return we?we.createCardElement(e):Ee("card",e)}(e.card),this.card.hass=Z()}firstUpdated(){window.setTimeout((()=>{var e,t;if(null===(t=null===(e=this.card)||void 0===e?void 0:e.shadowRoot)||void 0===t?void 0:t.querySelector("ha-card")){console.info("%cYou are doing it wrong!","color: red; font-weight: bold","");let e=this.card.localName.replace(/hui-(.*)-card/,"$1");console.info(`mod-card should NEVER be used with a card that already has a ha-card element, such as ${e}`)}}),3e3)}render(){return V` ${this.card} `}set hass(e){this.card&&(this.card.hass=e)}getCardSize(){if(this._config.report_size)return this._config.report_size;let e=this.shadowRoot;return e&&(e=e.querySelector("ha-card card-maker")),e&&(e=e.getCardSize),e&&(e=e()),e||1}}); diff --git a/package-lock.json b/package-lock.json index 2d9dbc0..e957350 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "card-mod", - "version": "3.0.0b2", + "version": "3.0.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index e06e3ef..432db58 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "card-mod", "private": true, - "version": "3.0.2", + "version": "3.0.3", "description": "", "scripts": { "build": "rollup -c", diff --git a/rollup.config.js b/rollup.config.js index d780e18..52bf4a0 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -10,7 +10,7 @@ export default { input: "src/main.ts", output: { file: "card-mod.js", - format: "iife", + format: "es", }, plugins: [ nodeResolve(), diff --git a/src/card-mod.ts b/src/card-mod.ts index 2cd51a8..8e4b95a 100644 --- a/src/card-mod.ts +++ b/src/card-mod.ts @@ -3,7 +3,13 @@ import { bind_template, unbind_template } from "./templates"; import { hasTemplate } from "card-tools/src/templates"; import pjson from "../package.json"; import { selectTree } from "card-tools/src/helpers"; -import { applyToElement, get_theme, merge_deep, Styles } from "./helpers"; +import { + applyToElement, + get_theme, + merge_deep, + parentElement, + Styles, +} from "./helpers"; export class CardMod extends LitElement { type: string; @@ -14,11 +20,25 @@ export class CardMod extends LitElement { _renderer: (_: string) => void; _styleChildren: Set = new Set(); _input_styles: Styles; + _refreshCooldown = { running: false, repeat: false }; _observer: MutationObserver = new MutationObserver((mutations) => { - if (mutations.some((m) => (m.target as Element).localName !== "card-mod")) { - this.refresh(); + for (const m of mutations) { + if ((m.target as any).localName === "card-mod") return; + let stop = true; + if (m.addedNodes.length) + m.addedNodes.forEach((n) => { + if ((n as any).localName !== "card-mod") stop = false; + }); + if (stop) return; + stop = true; + if (m.removedNodes.length) + m.removedNodes.forEach((n) => { + if ((n as any).localName !== "card-mod") stop = false; + }); } + + this.refresh(); }); static get applyToElement() { @@ -48,9 +68,17 @@ export class CardMod extends LitElement { this.refresh(); } - async refresh() { - await this._disconnect(); - this._connect(this._input_styles); + refresh() { + if (this._refreshCooldown.running) { + this._refreshCooldown.repeat = true; + return; + } + window.setTimeout(() => { + this._refreshCooldown.running = false; + if (this._refreshCooldown.repeat) this.refresh(); + }, 1); + this._refreshCooldown.repeat = false; + this._disconnect().then(() => this._connect(this._input_styles)); } private async _connect(stl: Styles) { @@ -89,10 +117,19 @@ export class CardMod extends LitElement { this._style_rendered((this._styles as string) || ""); } - this._observer.observe( - (parent as any).host ? (parent as any).host : parent, - { childList: true } - ); + this._observer.observe(parentElement(this), { childList: true }); + + const p = parentElement(parentElement(this)) as any; + this._observer.observe(p, { childList: true }); + if (p && p.updated && !p._cm_update_patched) { + const _updated = p.updated; + const _this = this; + p.updated = function (param) { + _updated.bind(this)(param); + this.updateComplete.then(() => _this.refresh()); + }; + p._cm_update_patched = true; + } } private async _disconnect() { diff --git a/src/helpers.ts b/src/helpers.ts index 0a71259..107c1eb 100644 --- a/src/helpers.ts +++ b/src/helpers.ts @@ -129,3 +129,9 @@ export async function findParentCardMod( joinSet(cardMods, await findParentCardMod((node as any).host, step + 1)); return cardMods; } + +export function parentElement(el: Node): Node { + if (!el) return undefined; + const node = el.parentElement || el.parentNode; + return (node as any).host ? (node as any).host : node; +} diff --git a/test/views/5_dom_navigation.yaml b/test/views/5_dom_navigation.yaml index 8ee1941..e01b620 100644 --- a/test/views/5_dom_navigation.yaml +++ b/test/views/5_dom_navigation.yaml @@ -122,6 +122,7 @@ cards: - <<: *desc content: | ## Overriding DOM navigation + [Forum issue](https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/1449) First two icons red Third icon green - type: entities @@ -153,3 +154,22 @@ cards: ha-svg-icon { color: red; } + - type: vertical-stack + cards: + - <<: *desc + content: | + ## Slow to load elements + [Github issue](https://github.com/thomasloven/lovelace-card-mod/issues/11) + Red Map Markers + - type: map + entities: + - device_tracker.demo_paulus + - device_tracker.demo_anne_therese + card_mod: + style: + ha-entity-marker: + $: | + .marker { + background: red; + } + hours_to_show: 1