diff --git a/README.md b/README.md index 66dd496..d151b65 100644 --- a/README.md +++ b/README.md @@ -217,6 +217,8 @@ tap_action: fold_row: true ``` +- You can disable the smooth open and close animation with `no_animation: true` + ## More examples All my test cases are available in the `test/views` directory. diff --git a/fold-entity-row.js b/fold-entity-row.js index c40403b..3a7b2cd 100644 --- a/fold-entity-row.js +++ b/fold-entity-row.js @@ -1,4 +1,4 @@ -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 h=window.reactiveElementPolyfillSupport,a={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:a,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:a.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,h=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:a.fromAttribute;this._$Ei=r,this[r]=h(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==h||h({ReactiveElement:u}),(null!==(l=globalThis.reactiveElementVersions)&&void 0!==l?l:globalThis.reactiveElementVersions=[]).push("1.0.1");const v=globalThis.trustedTypes,g=v?v.createPolicy("lit-html",{createHTML:t=>t}):void 0,f=`lit$${(Math.random()+"").slice(9)}$`,$="?"+f,_=`<${$}>`,m=document,y=(t="")=>m.createComment(t),w=t=>null===t||"object"!=typeof t&&"function"!=typeof t,A=Array.isArray,b=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,E=/-->/g,S=/>/g,x=/>|[ \n\r](?:([^\s"'>=/]+)([ \n\r]*=[ \n\r]*(?:[^ \n\r"'`<>=]|("|')|))|$)/g,C=/'/g,T=/"/g,P=/^(?:script|style|textarea)$/i,R=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),U=Symbol.for("lit-noChange"),k=Symbol.for("lit-nothing"),N=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"===h[0]?(r=null!=o?o:b,a=-1):void 0===h[1]?a=-2:(a=r.lastIndex-h[2].length,l=h[1],r=void 0===h[3]?x:'"'===h[3]?T:C):r===T||r===C?r=x:r===E||r===S?r=b:(r=x,o=void 0);const c=r===x&&t[e+1].startsWith("/>")?" ":"";n+=r===b?i+_:a>=0?(s.push(l),i.slice(0,a)+"$lit$"+i.slice(a)+f+c):i+f+(-2===a?(s.push(void 0),e):c)}const l=n+(t[i]||">")+(2===e?"":"");return[void 0!==g?g.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,[h,a]=O(t,e);if(this.el=M.createElement(h,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 A(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!==k&&w(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=N.get(t.strings);return void 0===e&&N.set(t.strings,e=new M(t)),e}M(t){A(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=k}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=!w(t)||t!==this._$AH&&t!==U,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 U}}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="20.0.13";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}const tt={open:!1,padding:24,group_config:{},tap_unfold:void 0};function et(t){if(void 0!==t)return"string"==typeof t?{entity:t}:t}async function it(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?it(t.parentElement,e+1):t.parentNode?it(t.parentNode,e+1):!!t.host&&it(t.host,e+1))))}const st=(t,e)=>{const i=document.body.querySelector("action-handler");i&&i.bind(t,e)},ot=(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 st(t.element,e),U}render(t){}});class nt extends J{constructor(){super(...arguments),this.height=0,this.maxheight=0,this.entitiesWarning=!1,this.slowclick=!1}setConfig(t){var e,i,s,o;this._config=t=Object.assign({},tt,t),this.open=null!==(i=null!==(e=this.open)&&void 0!==e?e:this._config.open)&&void 0!==i&&i,this.renderRows=this.open;let n=et(t.entity||t.head);if(!n)throw new Error("No fold head specified");void 0===this._config.clickable&&void 0===n.entity&&void 0===n.tap_action&&(this._config.clickable=!0),this._config.slowclick&&(this.slowclick=!0);let r=t.entities||t.items;if(n.entity&&void 0===r&&(r=null===(o=null===(s=(document.querySelector("hc-main")?document.querySelector("hc-main").hass:document.querySelector("home-assistant")?document.querySelector("home-assistant").hass:void 0).states[n.entity])||void 0===s?void 0:s.attributes)||void 0===o?void 0:o.entity_id),void 0===r)throw new Error("No entities specified.");if(!r||!Array.isArray(r))throw new Error("Entities must be a list.");(async()=>{this.head=await this._createRow(n,!0),this._config.clickable&&(st(this.head,{}),this.head.addEventListener("action",(t=>this._handleClick(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(r.map((async t=>this._createRow(et(t)))))})()}async _createRow(t,e=!1){var i,s,o,n;const r=await window.loadCardHelpers(),l=await it(this),h=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:h},e?{}:this._config.group_config),t);const a=r.createRowElement(t);return this.applyStyle(a,t,e),this._hass&&(a.hass=this._hass),a}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="-40px")}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})}toggle(t){var e;null===(e=this.shadowRoot.querySelector("#items"))||void 0===e||e.classList.add("clip"),this.open?(this.open=!1,setTimeout((()=>{this.renderRows=!1}),250)):(this.open=!0,this.renderRows=!0,setTimeout((()=>{var t;null===(t=this.shadowRoot.querySelector("#items"))||void 0===t||t.classList.remove("clip")}),250)),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)}async updateHeight(){this.height=this.open?this.maxheight:0}async updated(t){super.updated(t),(t.has("open")||t.has("maxheight"))&&(this.updateHeight(),this._cardMod&&this._cardMod.forEach((t=>t.refresh())))}firstUpdated(){this._config.open&&window.setTimeout((()=>{this.updateHeight()}),100);const t=this.shadowRoot.querySelector("#measure");try{this.observer=new ResizeObserver((()=>{this.maxheight=t.scrollHeight})),this.observer.observe(t)}catch(t){this.maxheight=1e6}}connectedCallback(){super.connectedCallback(),window.setTimeout((()=>{this.isConnected&&!this.entitiesWarning&&it(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)}async _handleClick(t){const e=this._handleClick;if(e.coolDown)return void t.stopPropagation();if("tap"!==t.detail.action)return e.coolDown=setTimeout((()=>e.coolDown=void 0),300),void("double_tap"===t.detail.action&&(e.doubleTapped=!0));const i=t.composedPath();t.stopPropagation(),e.doubleTapped=!1,this.slowclick&&await new Promise((t=>setTimeout(t,250))),e.doubleTapped||i[0]==this.head&&this.toggle(t)}render(){var t;return R` +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,g=v?v.createPolicy("lit-html",{createHTML:t=>t}):void 0,f=`lit$${(Math.random()+"").slice(9)}$`,$="?"+f,_=`<${$}>`,m=document,y=(t="")=>m.createComment(t),w=t=>null===t||"object"!=typeof t&&"function"!=typeof t,A=Array.isArray,b=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,E=/-->/g,S=/>/g,x=/>|[ \n\r](?:([^\s"'>=/]+)([ \n\r]*=[ \n\r]*(?:[^ \n\r"'`<>=]|("|')|))|$)/g,C=/'/g,T=/"/g,R=/^(?:script|style|textarea)$/i,P=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),U=Symbol.for("lit-noChange"),k=Symbol.for("lit-nothing"),N=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]?x:'"'===a[3]?T:C):r===T||r===C?r=x:r===E||r===S?r=b:(r=x,o=void 0);const c=r===x&&t[e+1].startsWith("/>")?" ":"";n+=r===b?i+_:h>=0?(s.push(l),i.slice(0,h)+"$lit$"+i.slice(h)+f+c):i+f+(-2===h?(s.push(void 0),e):c)}const l=n+(t[i]||">")+(2===e?"":"");return[void 0!==g?g.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 A(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!==k&&w(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=N.get(t.strings);return void 0===e&&N.set(t.strings,e=new M(t)),e}M(t){A(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=k}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=!w(t)||t!==this._$AH&&t!==U,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 U}}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="20.0.14";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}const tt={open:!1,padding:24,group_config:{},tap_unfold:void 0};function et(t){if(void 0!==t)return"string"==typeof t?{entity:t}:t}async function it(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?it(t.parentElement,e+1):t.parentNode?it(t.parentNode,e+1):!!t.host&&it(t.host,e+1))))}const st=(t,e)=>{const i=document.body.querySelector("action-handler");i&&i.bind(t,e)},ot=(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 st(t.element,e),U}render(t){}});class nt extends J{constructor(){super(...arguments),this.height=0,this.maxheight=0,this.entitiesWarning=!1,this.slowclick=!1}setConfig(t){var e,i,s,o;this._config=t=Object.assign({},tt,t),this.open=null!==(i=null!==(e=this.open)&&void 0!==e?e:this._config.open)&&void 0!==i&&i,this.renderRows=this.open;let n=et(t.entity||t.head);if(!n)throw new Error("No fold head specified");void 0===this._config.clickable&&void 0===n.entity&&void 0===n.tap_action&&(this._config.clickable=!0),this._config.slowclick&&(this.slowclick=!0);let r=t.entities||t.items;if(n.entity&&void 0===r&&(r=null===(o=null===(s=(document.querySelector("hc-main")?document.querySelector("hc-main").hass:document.querySelector("home-assistant")?document.querySelector("home-assistant").hass:void 0).states[n.entity])||void 0===s?void 0:s.attributes)||void 0===o?void 0:o.entity_id),void 0===r)throw new Error("No entities specified.");if(!r||!Array.isArray(r))throw new Error("Entities must be a list.");(async()=>{this.head=await this._createRow(n,!0),this._config.clickable&&(st(this.head,{}),this.head.addEventListener("action",(t=>this._handleClick(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(r.map((async t=>this._createRow(et(t)))))})()}async _createRow(t,e=!1){var i,s,o,n;const r=await window.loadCardHelpers(),l=await it(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="-40px")}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})}toggle(t){var e;null===(e=this.shadowRoot.querySelector("#items"))||void 0===e||e.classList.add("clip"),this.open?(this.open=!1,setTimeout((()=>{this.renderRows=!1}),this._config.no_animation?1:250)):(this.open=!0,this.renderRows=!0,setTimeout((()=>{var t;null===(t=this.shadowRoot.querySelector("#items"))||void 0===t||t.classList.remove("clip")}),this._config.no_animation?1:250)),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)}async updateHeight(){this.height=this.open?this.maxheight:0}async updated(t){super.updated(t),(t.has("open")||t.has("maxheight"))&&(this.updateHeight(),this._cardMod&&this._cardMod.forEach((t=>t.refresh())))}firstUpdated(){this._config.open&&window.setTimeout((()=>{this.updateHeight()}),100);const t=this.shadowRoot.querySelector("#measure");try{this.observer=new ResizeObserver((()=>{var e;null===(e=this.shadowRoot.querySelector("#items"))||void 0===e||e.classList.add("transit"),this.maxheight=t.scrollHeight,this.updateHeight(),this.updateComplete.then((()=>{var t;return null===(t=this.shadowRoot.querySelector("#items"))||void 0===t?void 0:t.classList.remove("transit")}))})),this.observer.observe(t)}catch(t){this.maxheight=1e6}}connectedCallback(){super.connectedCallback(),window.setTimeout((()=>{this.isConnected&&!this.entitiesWarning&&it(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)}async _handleClick(t){const e=this._handleClick;if(e.coolDown)return void t.stopPropagation();if("tap"!==t.detail.action)return e.coolDown=setTimeout((()=>e.coolDown=void 0),300),void("double_tap"===t.detail.action&&(e.doubleTapped=!0));const i=t.composedPath();t.stopPropagation(),e.doubleTapped=!1,this.slowclick&&await new Promise((t=>setTimeout(t,250))),e.doubleTapped||i[0]==this.head&&this.toggle(t)}render(){var t;return P` ${this.head} - ${this.renderRows?null===(t=this.rows)||void 0===t?void 0:t.map((t=>R`${t}`)):""} + ${this.renderRows?null===(t=this.rows)||void 0===t?void 0:t.map((t=>P`${t}`)):""} `}static get styles(){return n` @@ -69,6 +70,12 @@ function t(t,e,i,s){var o,n=arguments.length,r=n<3?e:null===s?s=Object.getOwnPro #items.clip { overflow: clip; } + #items.notransition { + transition: none; + } + #items.transit { + transition: none; + } #measure { overflow-x: clip; diff --git a/package.json b/package.json index 6cce069..d455e29 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "fold-entity-row", "private": true, - "version": "20.0.13", + "version": "20.0.14", "description": "", "scripts": { "build": "rollup -c", diff --git a/src/main.ts b/src/main.ts index b246994..70557ae 100644 --- a/src/main.ts +++ b/src/main.ts @@ -22,6 +22,7 @@ interface FoldEntityRowConfig { mute?: boolean; state_color?: boolean; slowclick?: boolean; + no_animation?: boolean; } const DEFAULT_CONFIG = { @@ -186,15 +187,21 @@ class FoldEntityRow extends LitElement { this.shadowRoot.querySelector("#items")?.classList.add("clip"); if (this.open) { this.open = false; - setTimeout(() => { - this.renderRows = false; - }, 250); + setTimeout( + () => { + this.renderRows = false; + }, + this._config.no_animation ? 1 : 250 + ); } else { this.open = true; this.renderRows = true; - setTimeout(() => { - this.shadowRoot.querySelector("#items")?.classList.remove("clip"); - }, 250); + setTimeout( + () => { + this.shadowRoot.querySelector("#items")?.classList.remove("clip"); + }, + this._config.no_animation ? 1 : 250 + ); } if (this._config.clickable) { this.head.ariaLabel = this.open @@ -233,10 +240,19 @@ class FoldEntityRow extends LitElement { const el = this.shadowRoot.querySelector("#measure") as HTMLElement; try { this.observer = new ResizeObserver(() => { + // If a change happens to the height of an internal element + // turn off animation, update height, redraw, + // and then turn animations back on. + this.shadowRoot.querySelector("#items")?.classList.add("transit"); this.maxheight = el.scrollHeight; + this.updateHeight(); + this.updateComplete.then(() => + this.shadowRoot.querySelector("#items")?.classList.remove("transit") + ); }); this.observer.observe(el); } catch (_e) { + // Old safari versions don't have ResizeObserver this.maxheight = 1e6; } } @@ -330,6 +346,7 @@ class FoldEntityRow extends LitElement { aria-hidden="${String(!this.open)}" aria-expanded="${String(this.open)}" style=${`padding-left: ${this._config.padding}px; max-height: ${this.height}px;`} + class=${this._config.no_animation ? "notransition" : ""} > ${this.renderRows @@ -387,6 +404,12 @@ class FoldEntityRow extends LitElement { #items.clip { overflow: clip; } + #items.notransition { + transition: none; + } + #items.transit { + transition: none; + } #measure { overflow-x: clip; diff --git a/test/views/2_cooperation.yaml b/test/views/2_cooperation.yaml index 27c1554..4ec1080 100644 --- a/test/views/2_cooperation.yaml +++ b/test/views/2_cooperation.yaml @@ -304,6 +304,23 @@ cards: - light.bed_light - light.bed_light - light.bed_light + - type: custom:fold-entity-row + no_animation: true + head: + entity: light.bed_light + name: no_animation + entities: + - light.bed_light + - light.bed_light + - light.bed_light + - light.bed_light + - light.bed_light + - light.bed_light + - light.bed_light + - light.bed_light + - light.bed_light + - light.bed_light + - light.bed_light - type: vertical-stack cards: - <<: *desc