diff --git a/fold-entity-row.js b/fold-entity-row.js index bf3da02..1ee038c 100644 --- a/fold-entity-row.js +++ b/fold-entity-row.js @@ -1,343 +1,14 @@ -/*! ***************************************************************************** -Copyright (c) Microsoft Corporation. - -Permission to use, copy, modify, and/or distribute this software for any -purpose with or without fee is hereby granted. - -THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH -REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY -AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, -INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM -LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR -OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR -PERFORMANCE OF THIS SOFTWARE. -***************************************************************************** */ - -function __decorate(decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; -} - -/** - * @license - * Copyright 2019 Google LLC - * SPDX-License-Identifier: BSD-3-Clause - */ -const t$1=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,e$4=Symbol(),n$3=new Map;class s$3{constructor(t,n){if(this._$cssResult$=!0,n!==e$4)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t;}get styleSheet(){let e=n$3.get(this.cssText);return t$1&&void 0===e&&(n$3.set(this.cssText,e=new CSSStyleSheet),e.replaceSync(this.cssText)),e}toString(){return this.cssText}}const o$3=t=>new s$3("string"==typeof t?t:t+"",e$4),r$2=(t,...n)=>{const o=1===t.length?t[0]:n.reduce(((e,n,s)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(n)+t[s+1]),t[0]);return new s$3(o,e$4)},i$3=(e,n)=>{t$1?e.adoptedStyleSheets=n.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):n.forEach((t=>{const n=document.createElement("style"),s=window.litNonce;void 0!==s&&n.setAttribute("nonce",s),n.textContent=t.cssText,e.appendChild(n);}));},S$1=t$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const n of t.cssRules)e+=n.cssText;return o$3(e)})(t):t; - -/** - * @license - * Copyright 2017 Google LLC - * SPDX-License-Identifier: BSD-3-Clause - */var s$2;const e$3=window.reactiveElementPolyfillSupport,r$1={toAttribute(t,i){switch(i){case Boolean:t=t?"":null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t);}catch(t){s=null;}}return s}},h$1=(t,i)=>i!==t&&(i==i||t==t),o$2={attribute:!0,type:String,converter:r$1,reflect:!1,hasChanged:h$1};class n$2 extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o();}static addInitializer(t){var i;null!==(i=this.l)&&void 0!==i||(this.l=[]),this.l.push(t);}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Eh(s,i);void 0!==e&&(this._$Eu.set(e,s),t.push(e));})),t}static createProperty(t,i=o$2){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e);}}static getPropertyDescriptor(t,i,s){return {get(){return this[i]},set(e){const r=this[t];this[i]=e,this.requestUpdate(t,r,s);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||o$2}static finalize(){if(this.hasOwnProperty("finalized"))return !1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s]);}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(i){const s=[];if(Array.isArray(i)){const e=new Set(i.flat(1/0).reverse());for(const i of e)s.unshift(S$1(i));}else void 0!==i&&s.push(S$1(i));return s}static _$Eh(t,i){const s=i.attribute;return !1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}o(){var t;this._$Ev=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Ep(),this.requestUpdate(),null===(t=this.constructor.l)||void 0===t||t.forEach((t=>t(this)));}addController(t){var i,s;(null!==(i=this._$Em)&&void 0!==i?i:this._$Em=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t));}removeController(t){var i;null===(i=this._$Em)||void 0===i||i.splice(this._$Em.indexOf(t)>>>0,1);}_$Ep(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Et.set(i,this[i]),delete this[i]);}));}createRenderRoot(){var t;const s=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return i$3(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$Em)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}));}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$Em)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}));}attributeChangedCallback(t,i,s){this._$AK(t,s);}_$Eg(t,i,s=o$2){var e,h;const n=this.constructor._$Eh(t,s);if(void 0!==n&&!0===s.reflect){const o=(null!==(h=null===(e=s.converter)||void 0===e?void 0:e.toAttribute)&&void 0!==h?h:r$1.toAttribute)(i,s.type);this._$Ei=t,null==o?this.removeAttribute(n):this.setAttribute(n,o),this._$Ei=null;}}_$AK(t,i){var s,e,h;const o=this.constructor,n=o._$Eu.get(t);if(void 0!==n&&this._$Ei!==n){const t=o.getPropertyOptions(n),l=t.converter,a=null!==(h=null!==(e=null===(s=l)||void 0===s?void 0:s.fromAttribute)&&void 0!==e?e:"function"==typeof l?l:null)&&void 0!==h?h:r$1.fromAttribute;this._$Ei=n,this[n]=a(i,t.type),this._$Ei=null;}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||h$1)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$Ei!==t&&(void 0===this._$ES&&(this._$ES=new Map),this._$ES.set(t,s))):e=!1),!this.isUpdatePending&&e&&(this._$Ev=this._$EC());}async _$EC(){this.isUpdatePending=!0;try{await this._$Ev;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Et&&(this._$Et.forEach(((t,i)=>this[i]=t)),this._$Et=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$Em)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$EU();}catch(t){throw i=!1,this._$EU(),t}i&&this._$AE(s);}willUpdate(t){}_$AE(t){var i;null===(i=this._$Em)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Ev}shouldUpdate(t){return !0}update(t){void 0!==this._$ES&&(this._$ES.forEach(((t,i)=>this._$Eg(i,this[i],t))),this._$ES=void 0),this._$EU();}updated(t){}firstUpdated(t){}}n$2.finalized=!0,n$2.elementProperties=new Map,n$2.elementStyles=[],n$2.shadowRootOptions={mode:"open"},null==e$3||e$3({ReactiveElement:n$2}),(null!==(s$2=globalThis.reactiveElementVersions)&&void 0!==s$2?s$2:globalThis.reactiveElementVersions=[]).push("1.0.1"); - -/** - * @license - * Copyright 2017 Google LLC - * SPDX-License-Identifier: BSD-3-Clause - */ -var t;const i$2=globalThis.trustedTypes,s$1=i$2?i$2.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$2=`lit$${(Math.random()+"").slice(9)}$`,o$1="?"+e$2,n$1=`<${o$1}>`,l$1=document,h=(t="")=>l$1.createComment(t),r=t=>null===t||"object"!=typeof t&&"function"!=typeof t,d=Array.isArray,u=t=>{var i;return d(t)||"function"==typeof(null===(i=t)||void 0===i?void 0:i[Symbol.iterator])},c=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,a=/>/g,f=/>|[ \n \r](?:([^\s"'>=/]+)([ \n \r]*=[ \n \r]*(?:[^ \n \r"'`<>=]|("|')|))|$)/g,_=/'/g,m=/"/g,g=/^(?:script|style|textarea)$/i,$=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),p=$(1),b=Symbol.for("lit-noChange"),T=Symbol.for("lit-nothing"),x=new WeakMap,w=(t,i,s)=>{var e,o;const n=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:i;let l=n._$litPart$;if(void 0===l){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;n._$litPart$=l=new N(i.insertBefore(h(),t),t,void 0,null!=s?s:{});}return l._$AI(t),l},A=l$1.createTreeWalker(l$1,129,null,!1),C=(t,i)=>{const o=t.length-1,l=[];let h,r=2===i?"":"",d=c;for(let i=0;i"===u[0]?(d=null!=h?h:c,$=-1):void 0===u[1]?$=-2:($=d.lastIndex-u[2].length,o=u[1],d=void 0===u[3]?f:'"'===u[3]?m:_):d===m||d===_?d=f:d===v||d===a?d=c:(d=f,h=void 0);const y=d===f&&t[i+1].startsWith("/>")?" ":"";r+=d===c?s+n$1:$>=0?(l.push(o),s.slice(0,$)+"$lit$"+s.slice($)+e$2+y):s+e$2+(-2===$?(l.push(void 0),i):y);}const u=r+(t[o]||"")+(2===i?"":"");return [void 0!==s$1?s$1.createHTML(u):u,l]};class P{constructor({strings:t,_$litType$:s},n){let l;this.parts=[];let r=0,d=0;const u=t.length-1,c=this.parts,[v,a]=C(t,s);if(this.el=P.createElement(v,n),A.currentNode=this.el.content,2===s){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes);}for(;null!==(l=A.nextNode())&&c.length0){l.textContent=i$2?i$2.emptyScript:"";for(let i=0;i2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=T;}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=V(this,t,i,0),n=!r(t)||t!==this._$AH&&t!==b,n&&(this._$AH=t);else {const e=t;let l,h;for(t=o[0],l=0;l"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(n){n.createProperty(e.key,i);}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this));},finisher(n){n.createProperty(e.key,i);}};function e$1(e){return (n,t)=>void 0!==t?((i,e,n)=>{e.constructor.createProperty(n,i);})(e,n,t):i$1(e,n)} - -function hass() { - if(document.querySelector('hc-main')) - return document.querySelector('hc-main').hass; - - if(document.querySelector('home-assistant')) - return document.querySelector('home-assistant').hass; - - return undefined; -} - -var name = "fold-entity-row"; -var version = "2.2.0"; -var description = ""; -var scripts = { - build: "rollup -c", - watch: "rollup -c --watch", - "update-card-tools": "npm uninstall card-tools && npm install thomasloven/lovelace-card-tools" -}; -var keywords = [ -]; -var author = "Thomas Lovén"; -var license = "MIT"; -var devDependencies = { - "@babel/core": "^7.16.0", - "@rollup/plugin-babel": "^5.3.0", - "@rollup/plugin-json": "^4.1.0", - "@rollup/plugin-node-resolve": "^13.0.6", - rollup: "^2.59.0", - "rollup-plugin-terser": "^7.0.2", - "rollup-plugin-typescript2": "^0.30.0", - typescript: "^4.4.4" -}; -var dependencies = { - "card-tools": "github:thomasloven/lovelace-card-tools", - lit: "^2.0.2", - tslib: "^2.3.1" -}; -var pjson = { - name: name, - "private": true, - version: version, - description: description, - scripts: scripts, - keywords: keywords, - author: author, - license: license, - devDependencies: devDependencies, - dependencies: dependencies -}; - -async function _selectTree(root, path, all=false) { - let el = root; - if(typeof(path) === "string") { - path = path.split(/(\$| )/); - } - if(path[path.length-1] === "") - path.pop(); - for(const [i, p] of path.entries()) { - if(!p.trim().length) continue; - if(!el) return null; - if(el.localName && el.localName.includes("-")) - await customElements.whenDefined(el.localName); - if(el.updateComplete) - await el.updateComplete; - if(p === "$") - if(all && i == path.length-1) - el = [el.shadowRoot]; - else - el = el.shadowRoot; - else - if(all && i == path.length-1) - el = el.querySelectorAll(p); - else - el = el.querySelector(p); - } - return el; -} - -async function selectTree(root, path, all=false, timeout=10000) { - return Promise.race([ - _selectTree(root, path, all), - new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), timeout)) - ]).catch((err) => { - if(!err.message || err.message !== "timeout") - throw(err); - return null; - }); -} - -/** - * @license - * Copyright 2017 Google LLC - * SPDX-License-Identifier: BSD-3-Clause - */ -const e=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}} - -const DEFAULT_CONFIG = { - open: false, - padding: 24, - group_config: {}, - tap_unfold: undefined, -}; -function ensureObject(config) { - if (config === undefined) - return undefined; - return typeof config === "string" ? { entity: config } : config; -} -async function findParentCard(node, step = 0) { - if (step == 100) - return false; - if (!node) - return false; - if (node.localName === "hui-entities-card") - return node; - if (node.localName === "hui-picture-elements-card") - return node; - if (node.updateComplete) - await node.updateComplete; - if (node.parentElement) - return findParentCard(node.parentElement, step + 1); - else if (node.parentNode) - return findParentCard(node.parentNode, step + 1); - if (node.host) - return findParentCard(node.host, step + 1); - return false; -} -const actionHandlerBind = (element, options) => { - const actionHandler = document.body.querySelector("action-handler"); - if (!actionHandler) - return; - actionHandler.bind(element, options); -}; -const actionHandler = e(class extends i { - update(part, [options]) { - actionHandlerBind(part.element, options); - return b; - } - render(_options) { } -}); -class FoldEntityRow extends s { - constructor() { - super(...arguments); - this.entitiesWarning = false; - } - setConfig(config) { - var _a, _b, _c, _d; - this._config = config = Object.assign({}, DEFAULT_CONFIG, config); - this.open = (_b = (_a = this.open) !== null && _a !== void 0 ? _a : this._config.open) !== null && _b !== void 0 ? _b : false; - let head = ensureObject(config.entity || config.head); - if (!head) { - throw new Error("No fold head specified"); - } - if (this._config.clickable === undefined) { - if (head.entity === undefined && head.tap_action === undefined) { - this._config.clickable = true; - } - } - // Items are taken from the first available of the following - // - config entities: (this allows auto-population of the list) - // - config items: (for backwards compatibility - not recommended) - // - The group specified as head - let items = config.entities || config.items; - if (head.entity && items === undefined) { - items = (_d = (_c = hass().states[head.entity]) === null || _c === void 0 ? void 0 : _c.attributes) === null || _d === void 0 ? void 0 : _d.entity_id; - } - if (items === undefined) { - throw new Error("No entities specified."); - } - if (!items || !Array.isArray(items)) { - throw new Error("Entities must be a list."); - } - (async () => { - this.head = await this._createRow(head, true); - if (this._config.clickable) { - actionHandlerBind(this.head, {}); - this.head.addEventListener("action", (ev) => this.toggle(ev), { - capture: true, - }); - this.head.tabIndex = 0; - this.head.setAttribute("role", "switch"); - this.head.ariaLabel = this.open - ? "Toggle fold closed" - : "Toggle fold open"; - } - this.rows = await Promise.all(items.map(async (i) => this._createRow(ensureObject(i)))); - })(); - } - async _createRow(config, head = false) { - var _a, _b, _c, _d; - const helpers = await window.loadCardHelpers(); - const parentCard = await findParentCard(this); - const state_color = (_c = (_a = this._config.state_color) !== null && _a !== void 0 ? _a : (_b = parentCard === null || parentCard === void 0 ? void 0 : parentCard._config) === null || _b === void 0 ? void 0 : _b.state_color) !== null && _c !== void 0 ? _c : (_d = parentCard === null || parentCard === void 0 ? void 0 : parentCard.config) === null || _d === void 0 ? void 0 : _d.state_color; - config = Object.assign(Object.assign({ state_color }, (head ? {} : this._config.group_config)), config); - const el = helpers.createRowElement(config); - this.applyStyle(el, config, head); - if (this._hass) { - el.hass = this._hass; - } - return el; - } - async applyStyle(root, config, head = false) { - if (head) { - // Special styling to stretch - if (root.localName === "hui-section-row") { - this.classList.add("section-head"); - root.style.minHeight = "53px"; - const el = await selectTree(root, "$.divider"); - if (el) - el.style.marginRight = "-48px"; - } - else { - this.classList.remove("section-head"); - } - } - await customElements.whenDefined("card-mod"); - customElements.get("card-mod").applyToElement(root, "row", config.card_mod ? config.card_mod.style : config.style, { config }); - } - async toggle(ev) { - if (ev) - ev.stopPropagation(); - this.open = this.open == false; - // Accessibility - if (this._config.clickable) { - this.head.ariaLabel = this.open - ? "Toggle fold closed" - : "Toggle fold open"; - this.head.ariaChecked = this.open ? "true" : "false"; - } - } - set hass(hass) { - var _a; - this._hass = hass; - (_a = this.rows) === null || _a === void 0 ? void 0 : _a.forEach((e) => (e.hass = hass)); - if (this.head) - this.head.hass = hass; - } - async updated(changedProperties) { - super.updated(changedProperties); - if (changedProperties.has("open")) { - if (this._cardMod) - this._cardMod.forEach((cm) => cm.refresh()); - } - } - connectedCallback() { - super.connectedCallback(); - window.setTimeout(() => { - if (!this.isConnected || this.entitiesWarning) - return; - findParentCard(this).then((result) => { - if (!result && this._config.mute !== true) { - this.entitiesWarning = true; - console.group("%cYou are doing it wrong!", "color: red; font-weight: bold"); - console.info("Fold-entity-row should only EVER be used INSIDE an ENTITIES CARD."); - console.info("See https://github.com/thomasloven/lovelace-fold-entity-row/issues/146"); - console.info(this); - console.groupEnd(); - // Silence this warning by placing the fold-entity-row inside an entities card. - // or by setting mute: true - } - }); - }, 1000); - } - _customEvent(ev) { - const detail = ev.detail; - if (detail.fold_row) { - this.toggle(ev); - } - } - render() { - var _a; - return p ` +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 l=t.length-1;l>=0;l--)(o=t[l])&&(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=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),s=new Map;class o{constructor(t,e){if(this._$cssResult$=!0,e!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){let t=s.get(this.cssText);return e&&void 0===t&&(s.set(this.cssText,t=new CSSStyleSheet),t.replaceSync(this.cssText)),t}toString(){return this.cssText}}const n=(t,...e)=>{const s=1===t.length?t[0]:e.reduce(((e,i,s)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[s+1]),t[0]);return new o(s,i)},r=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new o("string"==typeof t?t:t+"",i))(e)})(t):t;var l;const a=window.reactiveElementPolyfillSupport,h={toAttribute(t,e){switch(e){case Boolean:t=t?"":null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},d=(t,e)=>e!==t&&(e==e||t==t),c={attribute:!0,type:String,converter:h,reflect:!1,hasChanged:d};class u extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o()}static addInitializer(t){var e;null!==(e=this.l)&&void 0!==e||(this.l=[]),this.l.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,i)=>{const s=this._$Eh(i,e);void 0!==s&&(this._$Eu.set(s,i),t.push(s))})),t}static createProperty(t,e=c){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){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.requestUpdate(t,o,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||c}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const i of e)this.createProperty(i,t[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(r(t))}else void 0!==t&&e.push(r(t));return e}static _$Eh(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}o(){var t;this._$Ev=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Ep(),this.requestUpdate(),null===(t=this.constructor.l)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,i;(null!==(e=this._$Em)&&void 0!==e?e:this._$Em=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(i=t.hostConnected)||void 0===i||i.call(t))}removeController(t){var e;null===(e=this._$Em)||void 0===e||e.splice(this._$Em.indexOf(t)>>>0,1)}_$Ep(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this._$Et.set(e,this[e]),delete this[e])}))}createRenderRoot(){var t;const i=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return((t,i)=>{e?t.adoptedStyleSheets=i.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):i.forEach((e=>{const i=document.createElement("style"),s=window.litNonce;void 0!==s&&i.setAttribute("nonce",s),i.textContent=e.cssText,t.appendChild(i)}))})(i,this.constructor.elementStyles),i}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$Em)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$Em)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)}))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$Eg(t,e,i=c){var s,o;const n=this.constructor._$Eh(t,i);if(void 0!==n&&!0===i.reflect){const r=(null!==(o=null===(s=i.converter)||void 0===s?void 0:s.toAttribute)&&void 0!==o?o:h.toAttribute)(e,i.type);this._$Ei=t,null==r?this.removeAttribute(n):this.setAttribute(n,r),this._$Ei=null}}_$AK(t,e){var i,s,o;const n=this.constructor,r=n._$Eu.get(t);if(void 0!==r&&this._$Ei!==r){const t=n.getPropertyOptions(r),l=t.converter,a=null!==(o=null!==(s=null===(i=l)||void 0===i?void 0:i.fromAttribute)&&void 0!==s?s:"function"==typeof l?l:null)&&void 0!==o?o:h.fromAttribute;this._$Ei=r,this[r]=a(e,t.type),this._$Ei=null}}requestUpdate(t,e,i){let s=!0;void 0!==t&&(((i=i||this.constructor.getPropertyOptions(t)).hasChanged||d)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),!0===i.reflect&&this._$Ei!==t&&(void 0===this._$ES&&(this._$ES=new Map),this._$ES.set(t,i))):s=!1),!this.isUpdatePending&&s&&(this._$Ev=this._$EC())}async _$EC(){this.isUpdatePending=!0;try{await this._$Ev}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Et&&(this._$Et.forEach(((t,e)=>this[e]=t)),this._$Et=void 0);let e=!1;const i=this._$AL;try{e=this.shouldUpdate(i),e?(this.willUpdate(i),null===(t=this._$Em)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)})),this.update(i)):this._$EU()}catch(t){throw e=!1,this._$EU(),t}e&&this._$AE(i)}willUpdate(t){}_$AE(t){var e;null===(e=this._$Em)||void 0===e||e.forEach((t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Ev}shouldUpdate(t){return!0}update(t){void 0!==this._$ES&&(this._$ES.forEach(((t,e)=>this._$Eg(e,this[e],t))),this._$ES=void 0),this._$EU()}updated(t){}firstUpdated(t){}}var p;u.finalized=!0,u.elementProperties=new Map,u.elementStyles=[],u.shadowRootOptions={mode:"open"},null==a||a({ReactiveElement:u}),(null!==(l=globalThis.reactiveElementVersions)&&void 0!==l?l:globalThis.reactiveElementVersions=[]).push("1.0.1");const v=globalThis.trustedTypes,_=v?v.createPolicy("lit-html",{createHTML:t=>t}):void 0,$=`lit$${(Math.random()+"").slice(9)}$`,f="?"+$,g=`<${f}>`,m=document,y=(t="")=>m.createComment(t),A=t=>null===t||"object"!=typeof t&&"function"!=typeof t,w=Array.isArray,b=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,E=/-->/g,S=/>/g,C=/>|[ \n \r](?:([^\s"'>=/]+)([ \n \r]*=[ \n \r]*(?:[^ \n \r"'`<>=]|("|')|))|$)/g,x=/'/g,T=/"/g,P=/^(?:script|style|textarea)$/i,U=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),N=Symbol.for("lit-noChange"),R=Symbol.for("lit-nothing"),k=new WeakMap,H=m.createTreeWalker(m,129,null,!1),O=(t,e)=>{const i=t.length-1,s=[];let o,n=2===e?"":"",r=b;for(let e=0;e"===a[0]?(r=null!=o?o:b,h=-1):void 0===a[1]?h=-2:(h=r.lastIndex-a[2].length,l=a[1],r=void 0===a[3]?C:'"'===a[3]?T:x):r===T||r===x?r=C:r===E||r===S?r=b:(r=C,o=void 0);const c=r===C&&t[e+1].startsWith("/>")?" ":"";n+=r===b?i+g:h>=0?(s.push(l),i.slice(0,h)+"$lit$"+i.slice(h)+$+c):i+$+(-2===h?(s.push(void 0),e):c)}const l=n+(t[i]||"")+(2===e?"":"");return[void 0!==_?_.createHTML(l):l,s]};class M{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let o=0,n=0;const r=t.length-1,l=this.parts,[a,h]=O(t,e);if(this.el=M.createElement(a,i),H.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(s=H.nextNode())&&l.length0){s.textContent=v?v.emptyScript:"";for(let i=0;i{var e;return w(t)||"function"==typeof(null===(e=t)||void 0===e?void 0:e[Symbol.iterator])})(t)?this.M(t):this.$(t)}A(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}S(t){this._$AH!==t&&(this._$AR(),this._$AH=this.A(t))}$(t){this._$AH!==R&&A(this._$AH)?this._$AA.nextSibling.data=t:this.S(m.createTextNode(t)),this._$AH=t}T(t){var e;const{values:i,_$litType$:s}=t,o="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=M.createElement(s.h,this.options)),s);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===o)this._$AH.m(i);else{const t=new D(o,this),e=t.p(this.options);t.m(i),this.S(e),this._$AH=t}}_$AC(t){let e=k.get(t.strings);return void 0===e&&k.set(t.strings,e=new M(t)),e}M(t){w(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,s=0;for(const o of t)s===e.length?e.push(i=new I(this.A(y()),this.A(y()),this,this.options)):i=e[s],i._$AI(o),s++;s2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=R}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,i,s){const o=this.strings;let n=!1;if(void 0===o)t=L(this,t,e,0),n=!A(t)||t!==this._$AH&&t!==N,n&&(this._$AH=t);else{const s=t;let r,l;for(t=o[0],r=0;r{var s,o;const n=null!==(s=null==i?void 0:i.renderBefore)&&void 0!==s?s:e;let r=n._$litPart$;if(void 0===r){const t=null!==(o=null==i?void 0:i.renderBefore)&&void 0!==o?o:null;n._$litPart$=r=new I(e.insertBefore(y(),t),t,void 0,null!=i?i:{})}return r._$AI(t),r})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!1)}render(){return N}}J.finalized=!0,J._$litElement$=!0,null===(K=globalThis.litElementHydrateSupport)||void 0===K||K.call(globalThis,{LitElement:J});const Y=globalThis.litElementPolyfillSupport;null==Y||Y({LitElement:J}),(null!==(F=globalThis.litElementVersions)&&void 0!==F?F:globalThis.litElementVersions=[]).push("3.0.1");const Z=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(i){i.createProperty(e.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(i){i.createProperty(e.key,t)}};function G(t){return(e,i)=>void 0!==i?((t,e,i)=>{e.constructor.createProperty(i,t)})(t,e,i):Z(t,e)}var Q="2.2.0";async function X(t,e,i=!1){let s=t;"string"==typeof e&&(e=e.split(/(\$| )/)),""===e[e.length-1]&&e.pop();for(const[t,o]of e.entries())if(o.trim().length){if(!s)return null;s.localName&&s.localName.includes("-")&&await customElements.whenDefined(s.localName),s.updateComplete&&await s.updateComplete,s="$"===o?i&&t==e.length-1?[s.shadowRoot]:s.shadowRoot:i&&t==e.length-1?s.querySelectorAll(o):s.querySelector(o)}return s}async function tt(t,e=0){return 100!=e&&(!!t&&("hui-entities-card"===t.localName||"hui-picture-elements-card"===t.localName?t:(t.updateComplete&&await t.updateComplete,t.parentElement?tt(t.parentElement,e+1):t.parentNode?tt(t.parentNode,e+1):!!t.host&&tt(t.host,e+1))))}const et=(t,e)=>{const i=document.body.querySelector("action-handler");i&&i.bind(t,e)},it=(t=>(...e)=>({_$litDirective$:t,values:e}))(class extends class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}{update(t,[e]){return et(t.element,e),N}render(t){}}),st={open:!1,padding:24,group_config:{},tap_unfold:void 0};function ot(t){if(void 0!==t)return"string"==typeof t?{entity:t}:t}class nt extends J{constructor(){super(...arguments),this.entitiesWarning=!1}setConfig(t){var e,i;this._config=t=Object.assign({},st,t),this.open=null!==(i=null!==(e=this.open)&&void 0!==e?e:this._config.open)&&void 0!==i&&i,this._finishSetup()}async _finishSetup(){var t,e;let i=ot(this._config.entity||this._config.head);if(!i)throw new Error("No fold head specified");void 0===this._config.clickable&&void 0===i.entity&&void 0===i.tap_action&&(this._config.clickable=!0);let s=this._config.entities||this._config.items;if(i.entity&&void 0===s&&(void 0===this.hass&&await new Promise((t=>this._hassResolve=t)),this._hassResolve=void 0,s=null===(e=null===(t=this._hass.states[i.entity])||void 0===t?void 0:t.attributes)||void 0===e?void 0:e.entity_id),void 0===s)throw new Error("No entities specified.");if(!s||!Array.isArray(s))throw new Error("Entities must be a list.");this.head=await this._createRow(i,!0),this._config.clickable&&(et(this.head,{}),this.head.addEventListener("action",(t=>this.toggle(t)),{capture:!0}),this.head.tabIndex=0,this.head.setAttribute("role","switch"),this.head.ariaLabel=this.open?"Toggle fold closed":"Toggle fold open"),this.rows=await Promise.all(s.map((async t=>this._createRow(ot(t)))))}async _createRow(t,e=!1){var i,s,o,n;const r=await window.loadCardHelpers(),l=await tt(this),a=null!==(o=null!==(i=this._config.state_color)&&void 0!==i?i:null===(s=null==l?void 0:l._config)||void 0===s?void 0:s.state_color)&&void 0!==o?o:null===(n=null==l?void 0:l.config)||void 0===n?void 0:n.state_color;t=Object.assign(Object.assign({state_color:a},e?{}:this._config.group_config),t);const h=r.createRowElement(t);return this.applyStyle(h,t,e),this._hass&&(h.hass=this._hass),h}async applyStyle(t,e,i=!1){if(i)if("hui-section-row"===t.localName){this.classList.add("section-head"),t.style.minHeight="53px";const e=await async function(t,e,i=!1,s=1e4){return Promise.race([X(t,e,i),new Promise(((t,e)=>setTimeout((()=>e(new Error("timeout"))),s)))]).catch((t=>{if(!t.message||"timeout"!==t.message)throw t;return null}))}(t,"$.divider");e&&(e.style.marginRight="-48px")}else this.classList.remove("section-head");await customElements.whenDefined("card-mod"),customElements.get("card-mod").applyToElement(t,"row",e.card_mod?e.card_mod.style:e.style,{config:e})}async toggle(t){t&&t.stopPropagation(),this.open=0==this.open,this._config.clickable&&(this.head.ariaLabel=this.open?"Toggle fold closed":"Toggle fold open",this.head.ariaChecked=this.open?"true":"false")}set hass(t){var e;this._hass=t,null===(e=this.rows)||void 0===e||e.forEach((e=>e.hass=t)),this.head&&(this.head.hass=t),this._hassResolve&&this._hassResolve()}async updated(t){super.updated(t),t.has("open")&&this._cardMod&&this._cardMod.forEach((t=>t.refresh()))}connectedCallback(){super.connectedCallback(),window.setTimeout((()=>{this.isConnected&&!this.entitiesWarning&&tt(this).then((t=>{t||!0===this._config.mute||(this.entitiesWarning=!0,console.group("%cYou are doing it wrong!","color: red; font-weight: bold"),console.info("Fold-entity-row should only EVER be used INSIDE an ENTITIES CARD."),console.info("See https://github.com/thomasloven/lovelace-fold-entity-row/issues/146"),console.info(this),console.groupEnd())}))}),1e3)}_customEvent(t){t.detail.fold_row&&this.toggle(t)}render(){var t;return U` @@ -349,13 +20,10 @@ class FoldEntityRow extends s { style=${`padding-left: ${this._config.padding}px;`} >
- ${this.open ? (_a = this.rows) === null || _a === void 0 ? void 0 : _a.map((row) => p `
${row}
`) : ""} + ${this.open?null===(t=this.rows)||void 0===t?void 0:t.map((t=>U`
${t}
`)):""}
- `; - } - static get styles() { - return r$2 ` + `}static get styles(){return n` #head { display: flex; align-items: center; @@ -407,24 +75,4 @@ class FoldEntityRow extends s { #measure > *:last-child { margin-bottom: 0; } - `; - } -} -__decorate([ - e$1() -], FoldEntityRow.prototype, "open", void 0); -__decorate([ - e$1() -], FoldEntityRow.prototype, "head", void 0); -__decorate([ - e$1() -], FoldEntityRow.prototype, "rows", void 0); -__decorate([ - e$1() -], FoldEntityRow.prototype, "entitiesWarning", void 0); -if (!customElements.get("fold-entity-row")) { - customElements.define("fold-entity-row", FoldEntityRow); - console.info(`%cFOLD-ENTITY-ROW ${pjson.version} IS INSTALLED`, "color: green; font-weight: bold", ""); -} - -export { findParentCard }; + `}}t([G()],nt.prototype,"open",void 0),t([G()],nt.prototype,"head",void 0),t([G()],nt.prototype,"rows",void 0),t([G()],nt.prototype,"entitiesWarning",void 0),customElements.get("fold-entity-row")||(customElements.define("fold-entity-row",nt),console.info(`%cFOLD-ENTITY-ROW ${Q} IS INSTALLED`,"color: green; font-weight: bold","")); diff --git a/src/helpers.ts b/src/helpers.ts new file mode 100644 index 0000000..db97d66 --- /dev/null +++ b/src/helpers.ts @@ -0,0 +1,36 @@ +import { noChange } from "lit"; +import { Directive, directive } from "lit/directive.js"; + +export async function findParentCard( + node: any, + step = 0 +): Promise { + if (step == 100) return false; + if (!node) return false; + + if (node.localName === "hui-entities-card") return node; + if (node.localName === "hui-picture-elements-card") return node; + + if (node.updateComplete) await node.updateComplete; + if (node.parentElement) return findParentCard(node.parentElement, step + 1); + else if (node.parentNode) return findParentCard(node.parentNode, step + 1); + if ((node as any).host) return findParentCard(node.host, step + 1); + return false; +} + +export const actionHandlerBind = (element, options) => { + const actionHandler: any = document.body.querySelector("action-handler"); + if (!actionHandler) return; + actionHandler.bind(element, options); +}; + +export const actionHandler = directive( + class extends Directive { + update(part, [options]) { + actionHandlerBind(part.element, options); + return noChange; + } + + render(_options) {} + } +); diff --git a/src/main.ts b/src/main.ts index 178ab0f..514fcc4 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,9 +1,8 @@ -import { LitElement, html, css, noChange } from "lit"; -import { property, query } from "lit/decorators.js"; -import { hass } from "card-tools/src/hass"; +import { LitElement, html, css } from "lit"; +import { property } from "lit/decorators.js"; import pjson from "../package.json"; import { selectTree } from "card-tools/src/helpers"; -import { Directive, directive } from "lit/directive.js"; +import { findParentCard, actionHandlerBind, actionHandler } from "./helpers.js"; interface LovelaceElement extends HTMLElement { hass?: any; @@ -35,40 +34,6 @@ function ensureObject(config: any) { return typeof config === "string" ? { entity: config } : config; } -export async function findParentCard( - node: any, - step = 0 -): Promise { - if (step == 100) return false; - if (!node) return false; - - if (node.localName === "hui-entities-card") return node; - if (node.localName === "hui-picture-elements-card") return node; - - if (node.updateComplete) await node.updateComplete; - if (node.parentElement) return findParentCard(node.parentElement, step + 1); - else if (node.parentNode) return findParentCard(node.parentNode, step + 1); - if ((node as any).host) return findParentCard(node.host, step + 1); - return false; -} - -const actionHandlerBind = (element, options) => { - const actionHandler: any = document.body.querySelector("action-handler"); - if (!actionHandler) return; - actionHandler.bind(element, options); -}; - -const actionHandler = directive( - class extends Directive { - update(part, [options]) { - actionHandlerBind(part.element, options); - return noChange; - } - - render(_options) {} - } -); - class FoldEntityRow extends LitElement { @property() open: boolean; @property() head?: LovelaceElement; @@ -76,12 +41,17 @@ class FoldEntityRow extends LitElement { @property() entitiesWarning = false; _config: FoldEntityRowConfig; _hass: any; + _hassResolve?: any; setConfig(config: FoldEntityRowConfig) { this._config = config = Object.assign({}, DEFAULT_CONFIG, config); this.open = this.open ?? this._config.open ?? false; - let head = ensureObject(config.entity || config.head); + this._finishSetup(); + } + + async _finishSetup() { + let head = ensureObject(this._config.entity || this._config.head); if (!head) { throw new Error("No fold head specified"); } @@ -95,9 +65,12 @@ class FoldEntityRow extends LitElement { // - config entities: (this allows auto-population of the list) // - config items: (for backwards compatibility - not recommended) // - The group specified as head - let items = config.entities || config.items; + let items = this._config.entities || this._config.items; if (head.entity && items === undefined) { - items = hass().states[head.entity]?.attributes?.entity_id; + if (this.hass === undefined) + await new Promise((resolve) => (this._hassResolve = resolve)); + this._hassResolve = undefined; + items = this._hass.states[head.entity]?.attributes?.entity_id; } if (items === undefined) { throw new Error("No entities specified."); @@ -106,29 +79,27 @@ class FoldEntityRow extends LitElement { throw new Error("Entities must be a list."); } - (async () => { - this.head = await this._createRow(head, true); - - if (this._config.clickable) { - actionHandlerBind(this.head, {}); - this.head.addEventListener( - "action", - (ev: CustomEvent) => this.toggle(ev), - { - capture: true, - } - ); - this.head.tabIndex = 0; - this.head.setAttribute("role", "switch"); - this.head.ariaLabel = this.open - ? "Toggle fold closed" - : "Toggle fold open"; - } + this.head = await this._createRow(head, true); - this.rows = await Promise.all( - items.map(async (i) => this._createRow(ensureObject(i))) + if (this._config.clickable) { + actionHandlerBind(this.head, {}); + this.head.addEventListener( + "action", + (ev: CustomEvent) => this.toggle(ev), + { + capture: true, + } ); - })(); + this.head.tabIndex = 0; + this.head.setAttribute("role", "switch"); + this.head.ariaLabel = this.open + ? "Toggle fold closed" + : "Toggle fold open"; + } + + this.rows = await Promise.all( + items.map(async (i) => this._createRow(ensureObject(i))) + ); } async _createRow(config: any, head = false) { @@ -191,6 +162,7 @@ class FoldEntityRow extends LitElement { this._hass = hass; this.rows?.forEach((e) => (e.hass = hass)); if (this.head) this.head.hass = hass; + if (this._hassResolve) this._hassResolve(); } async updated(changedProperties) {