forked from thomasloven/lovelace-layout-card
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlayout-card.js
210 lines (206 loc) · 48.3 KB
/
layout-card.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
function t(t,e,i,s){var o,n=arguments.length,r=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(n<3?o(r):n>3?o(e,i,r):o(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r}const e="undefined"!=typeof window&&null!=window.customElements&&void 0!==window.customElements.polyfillWrapFlushCallback,i=(t,e,i=null)=>{for(;e!==i;){const i=e.nextSibling;t.removeChild(e),e=i}},s=`{{lit-${String(Math.random()).slice(2)}}}`,o=`\x3c!--${s}--\x3e`,n=new RegExp(`${s}|${o}`);class r{constructor(t,e){this.parts=[],this.element=e;const i=[],o=[],r=document.createTreeWalker(e.content,133,null,!1);let d=0,h=-1,u=0;const{strings:p,values:{length:g}}=t;for(;u<g;){const t=r.nextNode();if(null!==t){if(h++,1===t.nodeType){if(t.hasAttributes()){const e=t.attributes,{length:i}=e;let s=0;for(let t=0;t<i;t++)a(e[t].name,"$lit$")&&s++;for(;s-- >0;){const e=p[u],i=c.exec(e)[2],s=i.toLowerCase()+"$lit$",o=t.getAttribute(s);t.removeAttribute(s);const r=o.split(n);this.parts.push({type:"attribute",index:h,name:i,strings:r}),u+=r.length-1}}"TEMPLATE"===t.tagName&&(o.push(t),r.currentNode=t.content)}else if(3===t.nodeType){const e=t.data;if(e.indexOf(s)>=0){const s=t.parentNode,o=e.split(n),r=o.length-1;for(let e=0;e<r;e++){let i,n=o[e];if(""===n)i=l();else{const t=c.exec(n);null!==t&&a(t[2],"$lit$")&&(n=n.slice(0,t.index)+t[1]+t[2].slice(0,-"$lit$".length)+t[3]),i=document.createTextNode(n)}s.insertBefore(i,t),this.parts.push({type:"node",index:++h})}""===o[r]?(s.insertBefore(l(),t),i.push(t)):t.data=o[r],u+=r}}else if(8===t.nodeType)if(t.data===s){const e=t.parentNode;null!==t.previousSibling&&h!==d||(h++,e.insertBefore(l(),t)),d=h,this.parts.push({type:"node",index:h}),null===t.nextSibling?t.data="":(i.push(t),h--),u++}else{let e=-1;for(;-1!==(e=t.data.indexOf(s,e+1));)this.parts.push({type:"node",index:-1}),u++}}else r.currentNode=o.pop()}for(const t of i)t.parentNode.removeChild(t)}}const a=(t,e)=>{const i=t.length-e.length;return i>=0&&t.slice(i)===e},d=t=>-1!==t.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(t,e){const{element:{content:i},parts:s}=t,o=document.createTreeWalker(i,133,null,!1);let n=p(s),r=s[n],a=-1,d=0;const l=[];let c=null;for(;o.nextNode();){a++;const t=o.currentNode;for(t.previousSibling===c&&(c=null),e.has(t)&&(l.push(t),null===c&&(c=t)),null!==c&&d++;void 0!==r&&r.index===a;)r.index=null!==c?-1:r.index-d,n=p(s,n),r=s[n]}l.forEach((t=>t.parentNode.removeChild(t)))}const u=t=>{let e=11===t.nodeType?0:1;const i=document.createTreeWalker(t,133,null,!1);for(;i.nextNode();)e++;return e},p=(t,e=-1)=>{for(let i=e+1;i<t.length;i++){const e=t[i];if(d(e))return i}return-1};const g=new WeakMap,f=t=>"function"==typeof t&&g.has(t),_={},m={};class y{constructor(t,e,i){this.__parts=[],this.template=t,this.processor=e,this.options=i}update(t){let e=0;for(const i of this.__parts)void 0!==i&&i.setValue(t[e]),e++;for(const t of this.__parts)void 0!==t&&t.commit()}_clone(){const t=e?this.template.element.content.cloneNode(!0):document.importNode(this.template.element.content,!0),i=[],s=this.template.parts,o=document.createTreeWalker(t,133,null,!1);let n,r=0,a=0,l=o.nextNode();for(;r<s.length;)if(n=s[r],d(n)){for(;a<n.index;)a++,"TEMPLATE"===l.nodeName&&(i.push(l),o.currentNode=l.content),null===(l=o.nextNode())&&(o.currentNode=i.pop(),l=o.nextNode());if("node"===n.type){const t=this.processor.handleTextExpression(this.options);t.insertAfterNode(l.previousSibling),this.__parts.push(t)}else this.__parts.push(...this.processor.handleAttributeExpressions(l,n.name,n.strings,this.options));r++}else this.__parts.push(void 0),r++;return e&&(document.adoptNode(t),customElements.upgrade(t)),t}}const v=window.trustedTypes&&trustedTypes.createPolicy("lit-html",{createHTML:t=>t}),w=` ${s} `;class b{constructor(t,e,i,s){this.strings=t,this.values=e,this.type=i,this.processor=s}getHTML(){const t=this.strings.length-1;let e="",i=!1;for(let n=0;n<t;n++){const t=this.strings[n],r=t.lastIndexOf("\x3c!--");i=(r>-1||i)&&-1===t.indexOf("--\x3e",r+1);const a=c.exec(t);e+=null===a?t+(i?w:o):t.substr(0,a.index)+a[1]+a[2]+"$lit$"+a[3]+s}return e+=this.strings[t],e}getTemplateElement(){const t=document.createElement("template");let e=this.getHTML();return void 0!==v&&(e=v.createHTML(e)),t.innerHTML=e,t}}const C=t=>null===t||!("object"==typeof t||"function"==typeof t),S=t=>Array.isArray(t)||!(!t||!t[Symbol.iterator]);class x{constructor(t,e,i){this.dirty=!0,this.element=t,this.name=e,this.strings=i,this.parts=[];for(let t=0;t<i.length-1;t++)this.parts[t]=this._createPart()}_createPart(){return new E(this)}_getValue(){const t=this.strings,e=t.length-1,i=this.parts;if(1===e&&""===t[0]&&""===t[1]){const t=i[0].value;if("symbol"==typeof t)return String(t);if("string"==typeof t||!S(t))return t}let s="";for(let o=0;o<e;o++){s+=t[o];const e=i[o];if(void 0!==e){const t=e.value;if(C(t)||!S(t))s+="string"==typeof t?t:String(t);else for(const e of t)s+="string"==typeof e?e:String(e)}}return s+=t[e],s}commit(){this.dirty&&(this.dirty=!1,this.element.setAttribute(this.name,this._getValue()))}}class E{constructor(t){this.value=void 0,this.committer=t}setValue(t){t===_||C(t)&&t===this.value||(this.value=t,f(t)||(this.committer.dirty=!0))}commit(){for(;f(this.value);){const t=this.value;this.value=_,t(this)}this.value!==_&&this.committer.commit()}}class ${constructor(t){this.value=void 0,this.__pendingValue=void 0,this.options=t}appendInto(t){this.startNode=t.appendChild(l()),this.endNode=t.appendChild(l())}insertAfterNode(t){this.startNode=t,this.endNode=t.nextSibling}appendIntoPart(t){t.__insert(this.startNode=l()),t.__insert(this.endNode=l())}insertAfterPart(t){t.__insert(this.startNode=l()),this.endNode=t.endNode,t.endNode=this.startNode}setValue(t){this.__pendingValue=t}commit(){if(null===this.startNode.parentNode)return;for(;f(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=_,t(this)}const t=this.__pendingValue;t!==_&&(C(t)?t!==this.value&&this.__commitText(t):t instanceof b?this.__commitTemplateResult(t):t instanceof Node?this.__commitNode(t):S(t)?this.__commitIterable(t):t===m?(this.value=m,this.clear()):this.__commitText(t))}__insert(t){this.endNode.parentNode.insertBefore(t,this.endNode)}__commitNode(t){this.value!==t&&(this.clear(),this.__insert(t),this.value=t)}__commitText(t){const e=this.startNode.nextSibling,i="string"==typeof(t=null==t?"":t)?t:String(t);e===this.endNode.previousSibling&&3===e.nodeType?e.data=i:this.__commitNode(document.createTextNode(i)),this.value=t}__commitTemplateResult(t){const e=this.options.templateFactory(t);if(this.value instanceof y&&this.value.template===e)this.value.update(t.values);else{const i=new y(e,t.processor,this.options),s=i._clone();i.update(t.values),this.__commitNode(s),this.value=i}}__commitIterable(t){Array.isArray(this.value)||(this.value=[],this.clear());const e=this.value;let i,s=0;for(const o of t)i=e[s],void 0===i&&(i=new $(this.options),e.push(i),0===s?i.appendIntoPart(this):i.insertAfterPart(e[s-1])),i.setValue(o),i.commit(),s++;s<e.length&&(e.length=s,this.clear(i&&i.endNode))}clear(t=this.startNode){i(this.startNode.parentNode,t.nextSibling,this.endNode)}}class T{constructor(t,e,i){if(this.value=void 0,this.__pendingValue=void 0,2!==i.length||""!==i[0]||""!==i[1])throw new Error("Boolean attributes can only contain a single expression");this.element=t,this.name=e,this.strings=i}setValue(t){this.__pendingValue=t}commit(){for(;f(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=_,t(this)}if(this.__pendingValue===_)return;const t=!!this.__pendingValue;this.value!==t&&(t?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name),this.value=t),this.__pendingValue=_}}class P extends x{constructor(t,e,i){super(t,e,i),this.single=2===i.length&&""===i[0]&&""===i[1]}_createPart(){return new M(this)}_getValue(){return this.single?this.parts[0].value:super._getValue()}commit(){this.dirty&&(this.dirty=!1,this.element[this.name]=this._getValue())}}class M extends E{}let N=!1;(()=>{try{const t={get capture(){return N=!0,!1}};window.addEventListener("test",t,t),window.removeEventListener("test",t,t)}catch(t){}})();class k{constructor(t,e,i){this.value=void 0,this.__pendingValue=void 0,this.element=t,this.eventName=e,this.eventContext=i,this.__boundHandleEvent=t=>this.handleEvent(t)}setValue(t){this.__pendingValue=t}commit(){for(;f(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=_,t(this)}if(this.__pendingValue===_)return;const t=this.__pendingValue,e=this.value,i=null==t||null!=e&&(t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive),s=null!=t&&(null==e||i);i&&this.element.removeEventListener(this.eventName,this.__boundHandleEvent,this.__options),s&&(this.__options=O(t),this.element.addEventListener(this.eventName,this.__boundHandleEvent,this.__options)),this.value=t,this.__pendingValue=_}handleEvent(t){"function"==typeof this.value?this.value.call(this.eventContext||this.element,t):this.value.handleEvent(t)}}const O=t=>t&&(N?{capture:t.capture,passive:t.passive,once:t.once}:t.capture);function A(t){let e=R.get(t.type);void 0===e&&(e={stringsArray:new WeakMap,keyString:new Map},R.set(t.type,e));let i=e.stringsArray.get(t.strings);if(void 0!==i)return i;const o=t.strings.join(s);return i=e.keyString.get(o),void 0===i&&(i=new r(t,t.getTemplateElement()),e.keyString.set(o,i)),e.stringsArray.set(t.strings,i),i}const R=new Map,U=new WeakMap;const L=new class{handleAttributeExpressions(t,e,i,s){const o=e[0];if("."===o){return new P(t,e.slice(1),i).parts}if("@"===o)return[new k(t,e.slice(1),s.eventContext)];if("?"===o)return[new T(t,e.slice(1),i)];return new x(t,e,i).parts}handleTextExpression(t){return new $(t)}};"undefined"!=typeof window&&(window.litHtmlVersions||(window.litHtmlVersions=[])).push("1.3.0");const j=(t,...e)=>new b(t,e,"html",L),z=(t,e)=>`${t}--${e}`;let V=!0;void 0===window.ShadyCSS?V=!1:void 0===window.ShadyCSS.prepareTemplateDom&&(console.warn("Incompatible ShadyCSS version detected. Please update to at least @webcomponents/[email protected] and @webcomponents/[email protected]."),V=!1);const q=t=>e=>{const i=z(e.type,t);let o=R.get(i);void 0===o&&(o={stringsArray:new WeakMap,keyString:new Map},R.set(i,o));let n=o.stringsArray.get(e.strings);if(void 0!==n)return n;const a=e.strings.join(s);if(n=o.keyString.get(a),void 0===n){const i=e.getTemplateElement();V&&window.ShadyCSS.prepareTemplateDom(i,t),n=new r(e,i),o.keyString.set(a,n)}return o.stringsArray.set(e.strings,n),n},I=["html","svg"],H=new Set,F=(t,e,i)=>{H.add(t);const s=i?i.element:document.createElement("template"),o=e.querySelectorAll("style"),{length:n}=o;if(0===n)return void window.ShadyCSS.prepareTemplateStyles(s,t);const r=document.createElement("style");for(let t=0;t<n;t++){const e=o[t];e.parentNode.removeChild(e),r.textContent+=e.textContent}(t=>{I.forEach((e=>{const i=R.get(z(e,t));void 0!==i&&i.keyString.forEach((t=>{const{element:{content:e}}=t,i=new Set;Array.from(e.querySelectorAll("style")).forEach((t=>{i.add(t)})),h(t,i)}))}))})(t);const a=s.content;i?function(t,e,i=null){const{element:{content:s},parts:o}=t;if(null==i)return void s.appendChild(e);const n=document.createTreeWalker(s,133,null,!1);let r=p(o),a=0,d=-1;for(;n.nextNode();)for(d++,n.currentNode===i&&(a=u(e),i.parentNode.insertBefore(e,i));-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)}}(i,r,a.firstChild):a.insertBefore(r,a.firstChild),window.ShadyCSS.prepareTemplateStyles(s,t);const d=a.querySelector("style");if(window.ShadyCSS.nativeShadow&&null!==d)e.insertBefore(d.cloneNode(!0),e.firstChild);else if(i){a.insertBefore(r,a.firstChild);const t=new Set;t.add(r),h(i,t)}};window.JSCompiler_renameProperty=(t,e)=>t;const B={toAttribute(t,e){switch(e){case Boolean:return t?"":null;case Object:case Array:return null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){switch(e){case Boolean:return null!==t;case Number:return null===t?null:Number(t);case Object:case Array:return JSON.parse(t)}return t}},G=(t,e)=>e!==t&&(e==e||t==t),W={attribute:!0,type:String,converter:B,reflect:!1,hasChanged:G};class D extends HTMLElement{constructor(){super(),this.initialize()}static get observedAttributes(){this.finalize();const t=[];return this._classProperties.forEach(((e,i)=>{const s=this._attributeNameForProperty(i,e);void 0!==s&&(this._attributeToPropertyMap.set(s,i),t.push(s))})),t}static _ensureClassProperties(){if(!this.hasOwnProperty(JSCompiler_renameProperty("_classProperties",this))){this._classProperties=new Map;const t=Object.getPrototypeOf(this)._classProperties;void 0!==t&&t.forEach(((t,e)=>this._classProperties.set(e,t)))}}static createProperty(t,e=W){if(this._ensureClassProperties(),this._classProperties.set(t,e),e.noAccessor||this.prototype.hasOwnProperty(t))return;const i="symbol"==typeof t?Symbol():`__${t}`,s=this.getPropertyDescriptor(t,i,e);void 0!==s&&Object.defineProperty(this.prototype,t,s)}static getPropertyDescriptor(t,e,i){return{get(){return this[e]},set(s){const o=this[t];this[e]=s,this.requestUpdateInternal(t,o,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this._classProperties&&this._classProperties.get(t)||W}static finalize(){const t=Object.getPrototypeOf(this);if(t.hasOwnProperty("finalized")||t.finalize(),this.finalized=!0,this._ensureClassProperties(),this._attributeToPropertyMap=new Map,this.hasOwnProperty(JSCompiler_renameProperty("properties",this))){const t=this.properties,e=[...Object.getOwnPropertyNames(t),..."function"==typeof Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(t):[]];for(const i of e)this.createProperty(i,t[i])}}static _attributeNameForProperty(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}static _valueHasChanged(t,e,i=G){return i(t,e)}static _propertyValueFromAttribute(t,e){const i=e.type,s=e.converter||B,o="function"==typeof s?s:s.fromAttribute;return o?o(t,i):t}static _propertyValueToAttribute(t,e){if(void 0===e.reflect)return;const i=e.type,s=e.converter;return(s&&s.toAttribute||B.toAttribute)(t,i)}initialize(){this._updateState=0,this._updatePromise=new Promise((t=>this._enableUpdatingResolver=t)),this._changedProperties=new Map,this._saveInstanceProperties(),this.requestUpdateInternal()}_saveInstanceProperties(){this.constructor._classProperties.forEach(((t,e)=>{if(this.hasOwnProperty(e)){const t=this[e];delete this[e],this._instanceProperties||(this._instanceProperties=new Map),this._instanceProperties.set(e,t)}}))}_applyInstanceProperties(){this._instanceProperties.forEach(((t,e)=>this[e]=t)),this._instanceProperties=void 0}connectedCallback(){this.enableUpdating()}enableUpdating(){void 0!==this._enableUpdatingResolver&&(this._enableUpdatingResolver(),this._enableUpdatingResolver=void 0)}disconnectedCallback(){}attributeChangedCallback(t,e,i){e!==i&&this._attributeToProperty(t,i)}_propertyToAttribute(t,e,i=W){const s=this.constructor,o=s._attributeNameForProperty(t,i);if(void 0!==o){const t=s._propertyValueToAttribute(e,i);if(void 0===t)return;this._updateState=8|this._updateState,null==t?this.removeAttribute(o):this.setAttribute(o,t),this._updateState=-9&this._updateState}}_attributeToProperty(t,e){if(8&this._updateState)return;const i=this.constructor,s=i._attributeToPropertyMap.get(t);if(void 0!==s){const t=i.getPropertyOptions(s);this._updateState=16|this._updateState,this[s]=i._propertyValueFromAttribute(e,t),this._updateState=-17&this._updateState}}requestUpdateInternal(t,e,i){let s=!0;if(void 0!==t){const o=this.constructor;i=i||o.getPropertyOptions(t),o._valueHasChanged(this[t],e,i.hasChanged)?(this._changedProperties.has(t)||this._changedProperties.set(t,e),!0!==i.reflect||16&this._updateState||(void 0===this._reflectingProperties&&(this._reflectingProperties=new Map),this._reflectingProperties.set(t,i))):s=!1}!this._hasRequestedUpdate&&s&&(this._updatePromise=this._enqueueUpdate())}requestUpdate(t,e){return this.requestUpdateInternal(t,e),this.updateComplete}async _enqueueUpdate(){this._updateState=4|this._updateState;try{await this._updatePromise}catch(t){}const t=this.performUpdate();return null!=t&&await t,!this._hasRequestedUpdate}get _hasRequestedUpdate(){return 4&this._updateState}get hasUpdated(){return 1&this._updateState}performUpdate(){if(!this._hasRequestedUpdate)return;this._instanceProperties&&this._applyInstanceProperties();let t=!1;const e=this._changedProperties;try{t=this.shouldUpdate(e),t?this.update(e):this._markUpdated()}catch(e){throw t=!1,this._markUpdated(),e}t&&(1&this._updateState||(this._updateState=1|this._updateState,this.firstUpdated(e)),this.updated(e))}_markUpdated(){this._changedProperties=new Map,this._updateState=-5&this._updateState}get updateComplete(){return this._getUpdateComplete()}_getUpdateComplete(){return this._updatePromise}shouldUpdate(t){return!0}update(t){void 0!==this._reflectingProperties&&this._reflectingProperties.size>0&&(this._reflectingProperties.forEach(((t,e)=>this._propertyToAttribute(e,this[e],t))),this._reflectingProperties=void 0),this._markUpdated()}updated(t){}firstUpdated(t){}}D.finalized=!0;const Q=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?Object.assign(Object.assign({},e),{finisher(i){i.createProperty(e.key,t)}}):{kind:"field",key:Symbol(),placement:"own",descriptor:{},initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(i){i.createProperty(e.key,t)}};function J(t){return(e,i)=>void 0!==i?((t,e,i)=>{e.constructor.createProperty(i,t)})(t,e,i):Q(t,e)}function K(t){return J({attribute:!1,hasChanged:null==t?void 0:t.hasChanged})}const Y=(t,e,i)=>{Object.defineProperty(e,i,t)},X=(t,e)=>({kind:"method",placement:"prototype",key:e.key,descriptor:t}),Z=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,tt=Symbol();class et{constructor(t,e){if(e!==tt)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){return void 0===this._styleSheet&&(Z?(this._styleSheet=new CSSStyleSheet,this._styleSheet.replaceSync(this.cssText)):this._styleSheet=null),this._styleSheet}toString(){return this.cssText}}const it=(t,...e)=>{const i=e.reduce(((e,i,s)=>e+(t=>{if(t instanceof et)return t.cssText;if("number"==typeof t)return t;throw new Error(`Value passed to 'css' function must be a 'css' function result: ${t}. Use 'unsafeCSS' to pass non-literal values, but\n take care to ensure page security.`)})(i)+t[s+1]),t[0]);return new et(i,tt)};(window.litElementVersions||(window.litElementVersions=[])).push("2.4.0");const st={};class ot extends D{static getStyles(){return this.styles}static _getUniqueStyles(){if(this.hasOwnProperty(JSCompiler_renameProperty("_styles",this)))return;const t=this.getStyles();if(Array.isArray(t)){const e=(t,i)=>t.reduceRight(((t,i)=>Array.isArray(i)?e(i,t):(t.add(i),t)),i),i=e(t,new Set),s=[];i.forEach((t=>s.unshift(t))),this._styles=s}else this._styles=void 0===t?[]:[t];this._styles=this._styles.map((t=>{if(t instanceof CSSStyleSheet&&!Z){const e=Array.prototype.slice.call(t.cssRules).reduce(((t,e)=>t+e.cssText),"");return new et(String(e),tt)}return t}))}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 t=this.constructor._styles;0!==t.length&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow?Z?this.renderRoot.adoptedStyleSheets=t.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):this._needsShimAdoptedStyleSheets=!0:window.ShadyCSS.ScopingShim.prepareAdoptedCssText(t.map((t=>t.cssText)),this.localName))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&void 0!==window.ShadyCSS&&window.ShadyCSS.styleElement(this)}update(t){const e=this.render();super.update(t),e!==st&&this.constructor.render(e,this.renderRoot,{scopeName:this.localName,eventContext:this}),this._needsShimAdoptedStyleSheets&&(this._needsShimAdoptedStyleSheets=!1,this.constructor._styles.forEach((t=>{const e=document.createElement("style");e.textContent=t.cssText,this.renderRoot.appendChild(e)})))}render(){return st}}ot.finalized=!0,ot.render=(t,e,s)=>{if(!s||"object"!=typeof s||!s.scopeName)throw new Error("The `scopeName` option is required.");const o=s.scopeName,n=U.has(e),r=V&&11===e.nodeType&&!!e.host,a=r&&!H.has(o),d=a?document.createDocumentFragment():e;if(((t,e,s)=>{let o=U.get(e);void 0===o&&(i(e,e.firstChild),U.set(e,o=new $(Object.assign({templateFactory:A},s))),o.appendInto(e)),o.setValue(t),o.commit()})(t,d,Object.assign({templateFactory:q(o)},s)),a){const t=U.get(d);U.delete(d);const s=t.value instanceof y?t.value.template:void 0;F(o,d,s),i(e,e.firstChild),e.appendChild(d),U.set(e,t)}!n&&r&&window.ShadyCSS.styleElement(e.host)};var nt=function(t){if("getBBox"in t){var e=t.getBBox();return Object.freeze({height:e.height,left:0,top:0,width:e.width})}var i=window.getComputedStyle(t);return Object.freeze({height:parseFloat(i.height||"0"),left:parseFloat(i.paddingLeft||"0"),top:parseFloat(i.paddingTop||"0"),width:parseFloat(i.width||"0")})},rt=Object.defineProperty({ContentRect:nt},"__esModule",{value:!0}),at=function(){function t(t){this.target=t,this.$$broadcastWidth=this.$$broadcastHeight=0}return Object.defineProperty(t.prototype,"broadcastWidth",{get:function(){return this.$$broadcastWidth},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"broadcastHeight",{get:function(){return this.$$broadcastHeight},enumerable:!0,configurable:!0}),t.prototype.isActive=function(){var t=rt.ContentRect(this.target);return!!t&&(t.width!==this.broadcastWidth||t.height!==this.broadcastHeight)},t}(),dt=Object.defineProperty({ResizeObservation:at},"__esModule",{value:!0}),lt=function(t){this.target=t,this.contentRect=rt.ContentRect(t)},ct=Object.defineProperty({ResizeObserverEntry:lt},"__esModule",{value:!0}),ht=[],ut=function(){function t(t){this.$$observationTargets=[],this.$$activeTargets=[],this.$$skippedTargets=[];var e=function(t){if(void 0===t)return"Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.";if("function"!=typeof t)return"Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function."}(t);if(e)throw TypeError(e);this.$$callback=t,ht.push(this)}return t.prototype.observe=function(t){var e=pt("observe",t);if(e)throw TypeError(e);gt(this.$$observationTargets,t)>0||(this.$$observationTargets.push(new dt.ResizeObservation(t)),Ct())},t.prototype.unobserve=function(t){var e=pt("unobserve",t);if(e)throw TypeError(e);var i=gt(this.$$observationTargets,t);i<0||(this.$$observationTargets.splice(i,1),xt())},t.prototype.disconnect=function(){this.$$observationTargets=[],this.$$activeTargets=[]},t}();function pt(t,e){return void 0===e?"Failed to execute '"+t+"' on 'ResizeObserver': 1 argument required, but only 0 present.":e instanceof window.Element?void 0:"Failed to execute '"+t+"' on 'ResizeObserver': parameter 1 is not of type 'Element'."}function gt(t,e){for(var i=0;i<t.length;i+=1)if(t[i].target===e)return i;return-1}var ft,_t,mt,yt=function(t){ht.forEach((function(e){e.$$activeTargets=[],e.$$skippedTargets=[],e.$$observationTargets.forEach((function(i){i.isActive()&&(wt(i.target)>t?e.$$activeTargets.push(i):e.$$skippedTargets.push(i))}))}))},vt=function(){var t=1/0;return ht.forEach((function(e){if(e.$$activeTargets.length){var i=[];e.$$activeTargets.forEach((function(e){var s=new ct.ResizeObserverEntry(e.target);i.push(s),e.$$broadcastWidth=s.contentRect.width,e.$$broadcastHeight=s.contentRect.height;var o=wt(e.target);o<t&&(t=o)})),e.$$callback(i,e),e.$$activeTargets=[]}})),t},wt=function(t){for(var e=0;t.parentNode;)t=t.parentNode,e+=1;return e},bt=function(){var t,e=0;for(yt(e);ht.some((function(t){return!!t.$$activeTargets.length}));)e=vt(),yt(e);ht.some((function(t){return!!t.$$skippedTargets.length}))&&(t=new window.ErrorEvent("ResizeLoopError",{message:"ResizeObserver loop completed with undelivered notifications."}),window.dispatchEvent(t))},Ct=function(){ft||St()},St=function(){ft=window.requestAnimationFrame((function(){bt(),St()}))},xt=function(){ft&&!ht.some((function(t){return!!t.$$observationTargets.length}))&&(window.cancelAnimationFrame(ft),ft=void 0)};class Et extends ot{constructor(){super(...arguments),this.cards=[],this._editMode=!1,this._editorLoaded=!1}async setConfig(t){this._config=Object.assign({},t),this._config.view_layout&&void 0===this._config.layout&&(this._config.layout=this._config.view_layout)}async updated(t){var e,i,s,o,n;if(t.has("lovelace")&&(null===(e=this.lovelace)||void 0===e?void 0:e.editMode)!=(null===(i=t.get("lovelace"))||void 0===i?void 0:i.editMode)){if((null===(s=this.lovelace)||void 0===s?void 0:s.editMode)&&!this._editorLoaded){this._editorLoaded=!0;{const t=document.createElement("hui-masonry-view");t.lovelace={editMode:!0},t.updated(new Map)}}this.cards.forEach((t=>{var e;return t.editMode=null===(e=this.lovelace)||void 0===e?void 0:e.editMode})),this._editMode=null!==(n=null===(o=this.lovelace)||void 0===o?void 0:o.editMode)&&void 0!==n&&n}}_shouldShow(t,e,i){var s,o;return"always"===(null===(s=e.view_layout)||void 0===s?void 0:s.show)||"never"!==(null===(o=e.view_layout)||void 0===o?void 0:o.show)}getCardElement(t){var e;if(!(null===(e=this.lovelace)||void 0===e?void 0:e.editMode))return t.card;const i=document.createElement("hui-card-options");return i.hass=this.hass,i.lovelace=this.lovelace,i.path=[this.index,t.index],t.card.editMode=!0,i.appendChild(t.card),!1===t.show&&(i.style.border="1px solid red"),i}_addCard(){this.dispatchEvent(new CustomEvent("ll-create-card"))}_render_fab(){var t;return!0==!(null===(t=this.lovelace)||void 0===t?void 0:t.editMode)?j``:j`
<ha-fab .label=${"Add card"} extended @click=${this._addCard}>
<ha-icon slot="icon" .icon=${"mdi:plus"}></ha-icon>
</ha-fab>
`}static get _fab_styles(){return it`
ha-fab {
position: sticky;
float: right;
right: calc(16px + env(safe-area-inset-right));
bottom: calc(16px + env(safe-area-inset-bottom));
z-index: 1;
}
`}}t([J()],Et.prototype,"cards",void 0),t([J()],Et.prototype,"index",void 0),t([J()],Et.prototype,"narrow",void 0),t([J()],Et.prototype,"hass",void 0),t([J()],Et.prototype,"lovelace",void 0),t([J()],Et.prototype,"_editMode",void 0),t([J()],Et.prototype,"_config",void 0);class $t extends Et{constructor(){super(...arguments),this._mediaQueries=[]}async setConfig(t){var e,i,s;await super.setConfig(t);for(const t of this._config.cards)if("string"!=typeof(null===(e=t.view_layout)||void 0===e?void 0:e.show)&&(null===(s=null===(i=t.view_layout)||void 0===i?void 0:i.show)||void 0===s?void 0:s.mediaquery)){const e=window.matchMedia(`${t.view_layout.show.mediaquery}`);this._mediaQueries.push(e),e.addEventListener("change",(()=>this._makeLayout()))}else this._mediaQueries.push(null);this._observer&&this._observer.disconnect(),this._observer=new ut((()=>{this._updateSize()}))}async updated(t){var e;await super.updated(t),(t.has("_columns")||t.has("cards"))&&this._makeLayout(),t.has("_editMode")&&this._makeLayout(),t.has("narrow")&&this._updateSize(),t.has("hass")&&(null===(e=t.get("hass"))||void 0===e?void 0:e.dockedSidebar)!=this.hass.dockedSidebar&&this._updateSize()}async firstUpdated(){var t,e,i,s,o,n,r;this._updateSize();const a=(null===(t=this._config.layout)||void 0===t?void 0:t.width)||300,d=(null===(e=this._config.layout)||void 0===e?void 0:e.max_width)||((null===(i=this._config.layout)||void 0===i?void 0:i.width)?Math.ceil(1.5*(null===(s=this._config.layout)||void 0===s?void 0:s.width)):500),l=(null===(o=this._config.layout)||void 0===o?void 0:o.width)?2*this._config.layout.width:600,c=document.createElement("style");c.innerHTML=`\n :host {\n --column-max-width: ${d}px;\n --column-width: ${a}px;\n --column-widths: ${null!==(r=null===(n=this._config.layout)||void 0===n?void 0:n.column_widths)&&void 0!==r?r:"none"};\n }\n @media (max-width: ${d}px) {\n .column:first-child > * {\n margin-left: 0;\n }\n .column:last-child > * {\n margin-right: 0;\n }\n }\n @media (max-width: ${l-1}px) {\n .column {\n --column-max-width: ${l}px;\n }\n }\n `,this.shadowRoot.appendChild(c)}connectedCallback(){super.connectedCallback(),this._updateSize()}disconnectedCallback(){super.disconnectedCallback(),this._observer.disconnect()}async _updateSize(){var t,e,i;let s=this.getBoundingClientRect().width,o=0;o=Math.floor(s/((null===(t=this._config.layout)||void 0===t?void 0:t.width)||300)),o=Math.min(o,(null===(e=this._config.layout)||void 0===e?void 0:e.max_cols)||("docked"===(null===(i=this.hass)||void 0===i?void 0:i.dockedSidebar)?3:4)),o=Math.max(o,1),o!==this._columns&&(this._columns=o)}_shouldShow(t,e,i){if(!super._shouldShow(t,e,i))return!1;const s=this._mediaQueries[i];return!s||!!s.matches}isBreak(t){return"layout-break"===t.localName}async _makeLayout(){this._makeColumnLayout()}async _makeColumnLayout(){var t;if(this._observer.disconnect(),!this._columns)return;let e=[];for(let t=0;t<this._columns;t++){const t=document.createElement("div");t.classList.add("column"),t.length=0,e.push(t)}let i=this.cards.map(((t,e)=>{const i=this._config.cards[e];return{card:t,config:i,index:e,show:this._shouldShow(t,i,e)}}));await this._placeColumnCards(e,i.filter((t=>{var e;return(null===(e=this.lovelace)||void 0===e?void 0:e.editMode)||t.show}))),e=e.filter((t=>t.childElementCount>0)),(null===(t=this._config.layout)||void 0===t?void 0:t.rtl)&&e.reverse();const s=this.shadowRoot.querySelector("#columns");for(;s.firstChild;)s.removeChild(s.firstChild);for(const t of e)s.appendChild(t);this.requestUpdate().then((()=>this._observer.observe(this)))}async _placeColumnCards(t,e){}render(){return j`
<div id="columns"></div>
${this._render_fab()}
`}static get styles(){return[this._fab_styles,it`
:host {
display: block;
padding-top: 4px;
height: 100%;
box-sizing: border-box;
}
#columns {
display: grid;
grid-auto-columns: minmax(
var(--column-width),
var(--column-max-width)
);
grid-template-columns: var(--column-widths);
justify-content: center;
justify-items: center;
margin-left: 4px;
margin-right: 4px;
}
.column {
grid-row: 1/2;
max-width: var(--column-max-width);
width: 100%;
}
.column > * {
display: block;
margin: var(--masonry-view-card-margin, 4px 4px 8px);
}
`]}}t([J()],$t.prototype,"_columns",void 0),t([J()],$t.prototype,"_config",void 0);customElements.define("masonry-layout",class extends $t{async _placeColumnCards(t,e){var i;const s=(null===(i=this._config.layout)||void 0===i?void 0:i.min_height)||5;function o(){let e=0;for(let i=0;i<t.length;i++){if(t[i].length&&t[i].length<s)return t[i];t[i].length<t[e].length&&(e=i)}return t[e]}for(const t of e){const e=o();e.appendChild(this.getCardElement(t)),e.length+=t.card.getCardSize?await t.card.getCardSize():1}}});customElements.define("horizontal-layout",class extends $t{async _placeColumnCards(t,e){var i,s;let o=0;for(const n of e){o+=1,(null===(i=n.config.view_layout)||void 0===i?void 0:i.column)&&(o=n.config.view_layout.column);const e=t[(o-1)%t.length];e.appendChild(this.getCardElement(n)),this.isBreak(n.card)&&(o=0,(null===(s=this.lovelace)||void 0===s?void 0:s.editMode)||e.removeChild(n.card))}}});customElements.define("vertical-layout",class extends $t{async _placeColumnCards(t,e){var i;let s=1;for(const o of e){(null===(i=o.config.view_layout)||void 0===i?void 0:i.column)&&(s=o.config.view_layout.column);t[(s-1)%t.length].appendChild(this.getCardElement(o)),this.isBreak(o.card)&&(s+=1)}}});class Tt extends HTMLElement{setConfig(){this.style.display="none";const t=document.createElement("ha-card");t.innerHTML="BREAK",t.style.cssText="\n background: red;\n text-align: center;\n font-size: large;\n color: white;\n padding: 16px;\n ",this.appendChild(t)}getCardSize(){return 0}set editMode(t){this.style.display=t?"block":"none"}static getConfigElement(){return document.createElement("layout-break-editor")}static getStubConfig(){return{}}}customElements.define("layout-break",Tt),window.customCards=window.customCards||[],window.customCards.push({type:"layout-break",name:"Layout Break",preview:!1,description:"Forces a break in the layout flow. For use with layout-card or special layouts."});class Pt extends HTMLElement{setConfig(t){const e=document.createElement("div");e.innerHTML="BREAK",this.appendChild(e)}}customElements.define("layout-break-editor",Pt);customElements.define("grid-layout",class extends Et{constructor(){super(...arguments),this._mediaQueries=[],this._layoutMQs=[]}async setConfig(t){var e,i,s,o,n;await super.setConfig(t);for(const t of this._config.cards)if("string"!=typeof(null===(e=t.view_layout)||void 0===e?void 0:e.show)&&(null===(s=null===(i=t.view_layout)||void 0===i?void 0:i.show)||void 0===s?void 0:s.mediaquery)){const e=window.matchMedia(`${t.view_layout.show.mediaquery}`);this._mediaQueries.push(e),e.addEventListener("change",(()=>this._placeCards()))}else this._mediaQueries.push(null);if(null===(o=this._config.layout)||void 0===o?void 0:o.mediaquery)for(const[t,e]of Object.entries(null===(n=this._config.layout)||void 0===n?void 0:n.mediaquery)){const e=window.matchMedia(t);this._layoutMQs.push(e),e.addEventListener("change",(()=>this._setGridStyles()))}this._setGridStyles()}async updated(t){await super.updated(t),(t.has("cards")||t.has("_editMode"))&&this._placeCards()}async firstUpdated(){this._setGridStyles()}_setGridStyles(){const t=this.shadowRoot.querySelector("#root");if(!t)return;const e=e=>{for(const[i,s]of Object.entries(e))(i.startsWith("grid")||"grid"===i||"place-items"===i)&&t.style.setProperty(i,s)};t.style.cssText="",this._config.layout&&e(this._config.layout);for(const t of this._layoutMQs)if(t.matches){e(this._config.layout.mediaquery[t.media]);break}}_shouldShow(t,e,i){if(!super._shouldShow(t,e,i))return!1;const s=this._mediaQueries[i];return!s||!!s.matches}_placeCards(){var t,e;const i=this.shadowRoot.querySelector("#root");for(;i.firstChild;)i.removeChild(i.firstChild);let s=this.cards.map(((t,e)=>{const i=this._config.cards[e];return{card:t,config:i,index:e,show:this._shouldShow(t,i,e)}}));for(const o of s.filter((t=>{var e;return(null===(e=this.lovelace)||void 0===e?void 0:e.editMode)||t.show}))){const s=this.getCardElement(o);for(const[i,n]of Object.entries(null!==(e=null===(t=o.config)||void 0===t?void 0:t.view_layout)&&void 0!==e?e:{}))(i.startsWith("grid")||"place-self"===i)&&s.style.setProperty(i,n);i.appendChild(s)}}render(){return j` <div id="root"></div>
${this._render_fab()}`}static get styles(){return[this._fab_styles,it`
:host {
padding-top: 4px;
height: 100%;
box-sizing: border-box;
}
#root {
display: grid;
margin-left: 4px;
margin-right: 4px;
justify-content: stretch;
}
#root > * {
margin: var(--masonry-view-card-margin, 4px 4px 8px);
}
`]}});class Mt extends ot{constructor(){super(...arguments),this.editMode=!1,this.isPanel=!1,this._cards=[]}setConfig(t){this._config=Object.assign({},t),this._config.entities&&(this._config.cards=this._config.entities.map((t=>t.type?t:Object.assign(Object.assign({},t),{type:"entity"}))));let e=t.layout_type;e?((null==e?void 0:e.endsWith("-layout"))||(e+="-layout"),e.startsWith("custom:")&&(e=e.substr("custom:".length))):e="hui-masonry-view",this._layoutType=e}async updated(t){if(super.updated(t),t.has("_layoutType")||t.has("_config")){const t={type:this._layoutType,layout:this._config.layout||this._config.layout_options,cards:this._config.cards},e=document.createElement(this._layoutType);e.setConfig(t),this._layoutElement=e,await this._createCards(),this._layoutElement.hass=this.hass,this._layoutElement.narrow=!1,this._layoutElement.lovelace=Object.assign(Object.assign({},this._getLovelace()),{editMode:!1}),this._layoutElement.index=1}t.has("hass")&&(this._cards.forEach((t=>{t.hass=this.hass})),this._layoutElement&&(this._layoutElement.hass=this.hass)),t.has("_cards")&&this._layoutElement&&(this._layoutElement.cards=this._cards),t.has("editMode")&&this._layoutElement&&(this._layoutElement.lovelace=Object.assign(Object.assign({},this._getLovelace()),{editMode:!1}))}_getLovelace(t=this){return t.lovelace?t.lovelace:"home-assistant"!==t.localName?t.parentElement&&t.parentElement.host?this._getLovelace(t.parentElement.host):t.parentNode&&t.parentNode.host?this._getLovelace(t.parentNode.host):t.parentElement?this._getLovelace(t.parentElement):t.parentNode?this._getLovelace(t.parentNode):void 0:void 0}_createCard(t,e){const i=e.createCardElement(t);return i.addEventListener("ll-rebuild",(e=>{e.stopPropagation(),this._rebuildCard(i,t)})),i.hass=this.hass,i}async _createCards(){const t=await window.loadCardHelpers();this._cards=this._config.cards.map((e=>this._createCard(e,t)))}async _rebuildCard(t,e){const i=await window.loadCardHelpers(),s=this._createCard(e,i);t.parentElement&&t.parentElement.replaceChild(s,t),this._cards=this._cards.map((e=>e===t?s:e))}render(){return j`${this._layoutElement}`}static get styles(){return it`
:host(:not(:first-child)) {
margin-top: 0 !important;
}
:host(:not(:last-child)) {
margin-bottom: 0 !important;
}
`}static getConfigElement(){return document.createElement("layout-card-editor")}static getStubConfig(){return{layout_type:"masonry",layout:{},cards:[]}}}t([J()],Mt.prototype,"hass",void 0),t([J()],Mt.prototype,"editMode",void 0),t([J()],Mt.prototype,"isPanel",void 0),t([J()],Mt.prototype,"_config",void 0),t([J()],Mt.prototype,"_cards",void 0),t([J()],Mt.prototype,"_layoutElement",void 0),t([J()],Mt.prototype,"_layoutType",void 0),customElements.define("layout-card",Mt),window.customCards=window.customCards||[],window.customCards.push({type:"layout-card",name:"Layout Card",preview:!1,description:"Like a stack card, but with way more control."});class Nt extends ot{constructor(){super(...arguments),this._selectedTab=0,this._selectedCard=0,this._cardGUIMode=!0,this._cardGUIModeAvailable=!0}setConfig(t){this._config=t}_handleSwitchTab(t){this._selectedTab=parseInt(t.detail.index,10)}_layoutChanged(t){t.stopPropagation();const e=t.detail.config.type?t.detail.config.type.substr("custom:".length).slice(0,-"-layout".length):"default";this._config=Object.assign({},this._config),"default"!==e?this._config.layout_type=e:delete this._config.layout_type,t.detail.config.layout?this._config.layout_options=t.detail.config.layout:delete this._config.layout_options,this.dispatchEvent(new CustomEvent("config-changed",{detail:{config:this._config}}))}_editCard(t){t.stopPropagation(),"add-card"!==t.target.id?(this._cardGUIMode=!0,this._cardEditorEl&&(this._cardEditorEl.GUImode=!0),this._cardGUIModeAvailable=!0,this._selectedCard=parseInt(t.detail.selected,10)):this._selectedCard=this._config.cards.length}_addCard(t){t.stopPropagation();const e=[...this._config.cards];e.push(t.detail.config),this._config=Object.assign(Object.assign({},this._config),{cards:e}),this._selectedCard=this._config.cards.length-1,this.dispatchEvent(new CustomEvent("config-changed",{detail:{config:this._config}}))}_updateCard(t){t.stopPropagation();const e=[...this._config.cards];e[this._selectedCard]=t.detail.config,this._config=Object.assign(Object.assign({},this._config),{cards:e}),this._cardGUIModeAvailable=t.detail.guiModeAvailable,this.dispatchEvent(new CustomEvent("config-changed",{detail:{config:this._config}}))}_GUIModeChange(t){t.stopPropagation(),this._cardGUIMode=t.detail.guiMode,this._cardGUIModeAvailable=t.detail.guiModeAvailable}_toggleMode(t){this._cardEditorEl.toggleMode()}_moveCard(t){const e=this._selectedCard,i=e+t.currentTarget.move,s=[...this._config.cards],o=s.splice(e,1)[0];s.splice(i,0,o),this._config=Object.assign(Object.assign({},this._config),{cards:s}),this._selectedCard=i,this.dispatchEvent(new CustomEvent("config-changed",{detail:{config:this._config}}))}_deleteCard(){const t=[...this._config.cards];t.splice(this._selectedCard,1),this._config=Object.assign(Object.assign({},this._config),{cards:t}),this._selectedCard=Math.max(0,this._selectedCard-1),this.dispatchEvent(new CustomEvent("config-changed",{detail:{config:this._config}}))}render(){return this.hass&&this._config?j`
<div class="card-config">
<div class="toolbar">
<mwc-tab-bar
.activeIndex=${this._selectedTab}
@MDCTabBar:activated=${this._handleSwitchTab}
>
<mwc-tab .label=${"Layout"}></mwc-tab>
<mwc-tab .label=${"Cards"}></mwc-tab>
</mwc-tab-bar>
</div>
<div id="editor">
${[this._renderLayoutEditor,this._renderCardsEditor][this._selectedTab].bind(this)()}
</div>
</div>
`:j``}_renderLayoutEditor(){const t=this._config.layout_type&&"default"!==this._config.layout_type?`custom:${this._config.layout_type}-layout`:void 0,e=this._config.layout_options;return j`<div class="layout">
<view-layout-editor
.config=${{type:t,layout:e}}
@view-layout-changed=${this._layoutChanged}
></view-layout-editor>
</div>`}_renderCardsEditor(){const t=this._selectedCard,e=this._config.cards.length;return this._config.entities?j`
This layout-card has the <code>entities</code> parameter set. You cannot
manually select cards.
`:j`
<div class="cards">
<div class="toolbar">
<paper-tabs
scrollable
.selected=${t}
@iron-activate=${this._editCard}
>
${this._config.cards.map(((t,e)=>j` <paper-tab> ${e+1} </paper-tab> `))}
</paper-tabs>
<paper-tabs
id="add-card"
.selected=${t==e?"0":void 0}
@iron-activate=${this._editCard}
>
<paper-tab>
<ha-icon .icon=${"mdi:plus"}></ha-icon>
</paper-tab>
</paper-tabs>
</div>
<div id="editor">
${t<e?j`
<div class="card-options">
<mwc-button
@click=${this._toggleMode}
.disabled=${!this._cardGUIModeAvailable}
class="gui-mode-button"
>
${this.hass.localize(this._cardEditorEl||this._cardGUIMode?"ui.panel.lovelace.editor.edit_card.show_code_editor":"ui.panel.lovelace.editor.edit_card.show_visual_editor")}
</mwc-button>
<mwc-icon-button
.disabled=${0===t}
@click=${this._moveCard}
.move=${-1}
>
<ha-icon .icon=${"mdi:arrow-left"}></ha-icon>
</mwc-icon-button>
<mwc-icon-button
.disabled=${t===e-1}
@click=${this._moveCard}
.move=${1}
>
<ha-icon .icon=${"mdi:arrow-right"}></ha-icon>
</mwc-icon-button>
<mwc-icon-button @click=${this._deleteCard}>
<ha-icon .icon=${"mdi:delete"}></ha-icon>
</mwc-icon-button>
</div>
<hui-card-element-editor
.hass=${this.hass}
.value=${this._config.cards[t]}
.lovelace=${this.lovelace}
@config-changed=${this._updateCard}
@GUImode-changed=${this._GUIModeChange}
></hui-card-element-editor>
`:j`
<hui-card-picker
.hass=${this.hass}
.lovelace=${this.lovelace}
@config-changed=${this._addCard}
></hui-card-picker>
`}
</div>
</div>
`}static get styles(){return[it`
mwc-tab-bar {
border-bottom: 1px solid var(--divider-color);
}
.layout,
.cards #editor {
margin-top: 8px;
border: 1px solid var(--divider-color);
padding: 12px;
}
.cards .toolbar {
display: flex;
--paper-tabs-selection-bar-color: var(--primary-color);
--paper-tab-ink: var(--primary-color);
}
paper-tabs {
display: flex;
font-size: 14px;
flex-grow: 1;
}
#add-card {
max-width: 32px;
padding: 0;
}
.cards .card-options {
display: flex;
justify-content: flex-end;
width: 100%;
}
#editor {
border: 1px solid var(--divider-color);
padding: 12px;
}
.gui-mode-button {
margin-right: auto;
}
`]}}t([J()],Nt.prototype,"_config",void 0),t([J()],Nt.prototype,"lovelace",void 0),t([J()],Nt.prototype,"hass",void 0),t([K()],Nt.prototype,"_selectedTab",void 0),t([K()],Nt.prototype,"_selectedCard",void 0),t([K()],Nt.prototype,"_cardGUIMode",void 0),t([K()],Nt.prototype,"_cardGUIModeAvailable",void 0),t([(_t="hui-card-element-editor",(t,e)=>{const i={get(){return this.renderRoot.querySelector(_t)},enumerable:!0,configurable:!0};if(mt){const t="symbol"==typeof e?Symbol():`__${e}`;i.get=function(){return void 0===this[t]&&(this[t]=this.renderRoot.querySelector(_t)),this[t]}}return void 0!==e?Y(i,t,e):X(i,t)})],Nt.prototype,"_cardEditorEl",void 0),customElements.define("layout-card-editor",Nt),customElements.whenDefined("hui-dialog-edit-view").then((()=>{const t=customElements.get("hui-dialog-edit-view");{const t=document.createElement("hui-masonry-view");t.lovelace={editMode:!0},t.updated(new Map)}const e=t.prototype.firstUpdated;t.prototype.updated=function(t){var i,s;if(null==e||e.bind(this)(t),t.has("_params")&&void 0===t.get("_params")){const t=document.createElement("paper-tab");t.id="tab-layout",t.innerHTML="Layout",this.shadowRoot.querySelector("paper-tabs").appendChild(t)}if(t.has("_curTab"))if("tab-layout"===this._curTab){const t=document.createElement("view-layout-editor");t.config=this._config,t.addEventListener("view-layout-changed",this._viewConfigChanged.bind(this));const e=this.shadowRoot.querySelector("div[slot='heading']");null===(i=null==e?void 0:e.parentNode)||void 0===i||i.insertBefore(t,e.nextSibling)}else{const t=this.shadowRoot.querySelector("view-layout-editor");null===(s=null==t?void 0:t.parentNode)||void 0===s||s.removeChild(t)}t.has("_config")&&this.shadowRoot.querySelector("view-layout-editor")&&(this.shadowRoot.querySelector("view-layout-editor").config=this._config)}}));const kt=["default","masonry","horizontal","vertical","grid"];customElements.define("view-layout-editor",class extends ot{_typeChanged(t){t.stopPropagation();const e=kt[t.target.selected];this.config=Object.assign({},this.config),"default"===e?delete this.config.type:this.config.type=`custom:${e}-layout`,this.dispatchEvent(new CustomEvent("view-layout-changed",{detail:{config:this.config}}))}_layoutChanged(t){t.stopPropagation(),this.config=Object.assign({},this.config),this.config.layout=t.detail.value,this.dispatchEvent(new CustomEvent("view-layout-changed",{detail:{config:this.config}}))}render(){var t;const e=this.config.type?this.config.type.substr("custom:".length).slice(0,-"-layout".length):"default";return j`
<paper-dropdown-menu .label=${"Layout type"}>
<paper-listbox
.selected=${kt.indexOf(e)}
slot="dropdown-content"
@selected-item-changed=${this._typeChanged}
>
${kt.map((t=>j` <paper-item>${t}</paper-item> `))}
</paper-listbox>
</paper-dropdown-menu>
<ha-yaml-editor
.label=${"Layout options"}
.defaultValue=${null!==(t=this.config.layout)&&void 0!==t?t:""}
@value-changed=${this._layoutChanged}
>
</ha-yaml-editor>
`}}),customElements.whenDefined("hui-card-element-editor").then((()=>{const t=customElements.get("hui-card-element-editor"),e=t.prototype.getConfigElement;t.prototype.getConfigElement=async function(){const t=await e.bind(this)();if(t){const e=t.setConfig;t.setConfig=function(t){let i=JSON.parse(JSON.stringify(t));this._layoutData=i.layout,delete i.view_layout,e.bind(this)(i)}}return t};const i=t.prototype._handleUIConfigChanged;t.prototype._handleUIConfigChanged=function(t){this._configElement&&this._configElement._layoutData&&(t.detail.config.view_layout=this._configElement._layoutData),i.bind(this)(t)}}));var Ot="2.2.3";console.info(`%cLAYOUT-CARD ${Ot} IS INSTALLED`,"color: green; font-weight: bold","");