From 94d4c5bf76e0e3ebf631dc43e3a9ce625c0ac51a Mon Sep 17 00:00:00 2001 From: Cloos <36499953+Clooos@users.noreply.github.com> Date: Tue, 9 Jan 2024 16:03:35 +0100 Subject: [PATCH] v1.6.4 --- dist/bubble-card.js | 31 ++++++---- dist/bubble-pop-up.js | 24 +++++--- src/cards/button.ts | 2 +- src/cards/pop-up.ts | 93 +++++++++++++++--------------- src/editor/bubble-card-editor.ts | 7 +++ src/editor/bubble-pop-up-editor.ts | 20 ++++--- src/tools/url-listener.ts | 14 ++--- src/var/version.ts | 2 +- 8 files changed, 108 insertions(+), 85 deletions(-) diff --git a/dist/bubble-card.js b/dist/bubble-card.js index b707939..34ef680 100644 --- a/dist/bubble-card.js +++ b/dist/bubble-card.js @@ -1,4 +1,4 @@ -(()=>{"use strict";var __webpack_modules__={946:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{G:()=>getIconStyles,IU:()=>createIcon,L2:()=>addStyles,_k:()=>convertToRGBA,mk:()=>getIconColor,wW:()=>isColorCloseToWhite});let timeouts={},idCounter=0;const addStyles=function(hass,context,styles,customStyles,state,entityId,stateChanged,path="",element=context.content){const id=idCounter++,key=id+styles,executeStyles=()=>{const customStylesEval=customStyles?eval("`"+customStyles+"`"):"";let styleAddedKey=styles+"Added";if(!context[styleAddedKey]||context.previousStyle!==customStylesEval||stateChanged||context.previousConfig!==context.config){if(!context[styleAddedKey]){if(context.styleElement=element.querySelector("style"),!context.styleElement){context.styleElement=document.createElement("style");const e=path?element.querySelector(path):element;e?.appendChild(context.styleElement)}context[styleAddedKey]=!0}const e=document.createElement("style");e.innerHTML=customStylesEval+styles,context.styleElement.parentNode.insertBefore(e,context.styleElement.nextSibling),context.styleElement.parentNode.removeChild(context.styleElement),context.styleElement=e,context.previousStyle=customStylesEval,context.previousConfig=context.config}};timeouts[key]?clearTimeout(timeouts[key]):executeStyles(),timeouts[key]=setTimeout(executeStyles,500)};function createIcon(e,t,n,o,i){let a=e._hass,r=!(!t||!a.states[t].attributes)&&a.states[t].attributes;e.imageUrl=!!r.entity_picture&&r.entity_picture,updateIcon(e,a,t,n,o),i||setInterval((()=>{a=e._hass,t&&a.states[t]&&(e.currentEntityPicture=a.states[t].attributes.entity_picture,e.currentEntityPicture!==e.previousEntityPicture&&(e.imageUrl=e.currentEntityPicture,updateIcon(e,a,t,n,o),e.previousEntityPicture=e.currentEntityPicture))}),1e3)}function updateIcon(e,t,n,o,i){for(;i.firstChild;)i.removeChild(i.firstChild);let a=e.config.icon&&e.config.icon.includes("/")?e.config.icon:e.imageUrl?e.imageUrl:"";if(a&&(r=t.states[n].state,n.startsWith("media_player.")&&!["off","unknown","idle",void 0].includes(r)||!n.startsWith("media_player."))){const e=document.createElement("div");e.setAttribute("class","entity-picture"),e.setAttribute("alt","Icon"),i&&(i.appendChild(e),i.style.background="center / cover no-repeat url("+a+"), var(--card-background-color,var(--ha-card-background))")}else{const e=document.createElement("ha-icon");e.setAttribute("icon",o),e.setAttribute("class","icon"),i&&i.appendChild(e)}var r}function isColorCloseToWhite(e){let t=[220,220,190];for(let n=0;n<3;n++)if(e[n]{for(var n in t)__webpack_require__.o(t,n)&&!__webpack_require__.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var __webpack_exports__={};(()=>{let e="v1.6.3";function t(){const e=function(){try{return document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("ha-drawer > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("div")}catch(e){return}}();if(e)return e.classList.contains("edit-mode")}var n=__webpack_require__(946);const o=(e,t,n,o)=>{o=o||{},n=null==n?{}:n;const i=new Event(t,{bubbles:void 0===o.bubbles||o.bubbles,cancelable:Boolean(o.cancelable),composed:void 0===o.composed||o.composed});return i.detail=n,e.dispatchEvent(i),i},i=e=>{o(window,"haptic",e)},a=(e,t,n=!1)=>{n?history.replaceState(null,"",t):history.pushState(null,"",t),o(window,"location-changed",{replace:n})};function r(e,t){e.callService("homeassistant","toggle",{entity_id:t})}const s=300;let l,c,d,p,h,u=null,g=0,m=0;class b{constructor(e,t,n){this.element=e,this.config=t,this.sendActionEvent=n,this.holdDuration=300,this.holdTimeout=null,this.tapTimeout=null,this.lastTap=0,this.holdTriggered=!1}handleStart(){this.holdTriggered=!1,this.holdTimeout=setTimeout((()=>{this.sendActionEvent(this.element,this.config,"hold"),this.holdTriggered=!0}),this.holdDuration)}handleEnd(e){clearTimeout(this.holdTimeout);let t=(new Date).getTime(),n=t-this.lastTap;n0?(clearTimeout(this.tapTimeout),this.sendActionEvent(this.element,this.config,"double_tap")):this.holdTriggered||(this.tapTimeout=setTimeout((()=>{this.sendActionEvent(this.element,this.config,"tap")}),this.holdDuration)),this.lastTap=t,this.holdTriggered=!1}handleCancel(){clearTimeout(this.holdTimeout),this.holdTriggered=!1}}function f(e,t,n){const o=Date.now();if("tap"===n&&o-mi.handleEnd(e)),{passive:!0}),e.addEventListener("touchcancel",i.handleCancel.bind(i),{passive:!0})):(e.addEventListener("mousedown",i.handleStart.bind(i),{passive:!0}),e.addEventListener("mouseup",(e=>i.handleEnd(e)),{passive:!0}),e.addEventListener("mouseout",i.handleCancel.bind(i),{passive:!0}))}function v(e,t,o,i){let a=t.styles?t.styles:"",r=t.entity&&o.states[t.entity]?t.entity:"",s=!t.icon&&r?o.states[r].attributes.icon||o.states[r].attributes.entity_picture||"":t.icon||"",h=t.name?t.name:r?o.states[r].attributes.friendly_name:"",u=t.width_desktop||"540px",g=u?u.match(/(\d+)(\D+)/):"",m=t.is_sidebar_hidden||!1,b=r?o.states[r].state:"";!function(e,t,n){e.hasState=t.states[n],e.hasState&&(e.newState=[e.hasState.state,e.hasState.attributes.rgb_color],e.oldState&&e.newState[0]===e.oldState[0]&&e.newState[1]===e.oldState[1]?e.stateChanged=!1:(e.oldState=e.newState,e.stateChanged=!0),e.stateChanged)}(e,o,r);let f=e.stateChanged,_=["on","open","cleaning","true","home","playing"].includes(b)||0!==Number(b)&&!isNaN(Number(b)),v=void 0===t.rise_animation||t.rise_animation,y=t.margin?"0"!==t.margin?t.margin:"0px":"7px",w=void 0!==t.bg_opacity?t.bg_opacity:"88",x=void 0!==t.shadow_opacity?t.shadow_opacity:"0",k=void 0!==t.bg_blur?t.bg_blur:"10",{iconColorOpacity:C,iconColor:$,iconFilter:S}=(0,n.mk)(o,r,_,n.wW),E=(0,n.G)(r,_,$,S),O=getComputedStyle(document.body),L=O.getPropertyValue("--ha-card-background")||O.getPropertyValue("--card-background-color"),A=t.bg_color?t.bg_color:L;if(A&&(!e.color||A!==e.color)){const t=1.02;c=(0,n._k)(A,w/100,t),document.body.style.setProperty("--bubble-pop-up-background",c),e.color=A,window.color=A}return{customStyles:a,entityId:r,icon:s,name:h,widthDesktop:u,widthDesktopDivided:g,isSidebarHidden:m,state:b,stateChanged:f,stateOn:_,formatedState:p,riseAnimation:v,marginCenter:y,popUpOpen:l,rgbaColor:c,rgbColor:d,bgOpacity:w,shadowOpacity:x,bgBlur:k,iconColorOpacity:C,iconColor:$,iconFilter:S,iconStyles:E,haStyle:O,themeBgColor:L,color:A}}function y(e){const r=e._hass;let{customStyles:s,entityId:l,icon:c,name:d,widthDesktop:p,widthDesktopDivided:u,isSidebarHidden:g,state:m,stateChanged:b,stateOn:f,riseAnimation:_,marginCenter:y,popUpOpen:w,rgbaColor:x,rgbColor:k,bgOpacity:C,shadowOpacity:$,bgBlur:S,iconColorOpacity:E,iconColor:O,iconFilter:L,iconStyles:A,haStyle:I,themeBgColor:T,color:D}=v(e,e.config,r);setInterval((()=>{h=t(),h&&!e.editorModeAdded?(e.buttonsContainer.classList.add("editor"),e.card.classList.add("editor"),e.editorModeAdded=!0):!h&&e.editorModeAdded&&(e.buttonsContainer.classList.remove("editor"),e.card.classList.remove("editor"),e.editorModeAdded=!1)}),100);if(!e.buttonsAdded){const t=document.createElement("div");t.classList.add("horizontal-buttons-stack-container"),e.content.appendChild(t),e.buttonsContainer=t}const V=(e,t,o)=>{if(r.states[t].attributes.rgb_color){const o=r.states[t].attributes.rgb_color,i=(0,n.wW)(o)?"rgba(255,220,200, 0.5)":`rgba(${o}, 0.5)`;e.style.backgroundColor=i,e.style.border="1px solid rgba(0,0,0,0)"}else r.states[t].attributes.rgb_color||"on"!=r.states[t].state?(e.style.backgroundColor="rgba(0,0,0,0)",e.style.border="1px solid var(--primary-text-color)"):(e.style.backgroundColor="rgba(255,255,255,0.5)",e.style.border="1px solid rgba(0,0,0,0)")};let M=[],z=1;for(;e.config[z+"_link"];){const t=z+"_",n=e.config[t+"name"]||"",o=e.config[t+"pir_sensor"];c=e.config[t+"icon"]||"";const i=e.config[t+"link"],a=e.config[t+"entity"];M.push({button:n,pirSensor:o,icon:c,link:i,lightEntity:a}),z++}if(e.config.auto_order&&M.sort(((e,t)=>e.pirSensor&&t.pirSensor?"on"===r.states[e.pirSensor].state&&"on"===r.states[t.pirSensor].state?r.states[e.pirSensor].last_updated{const r=((t,n,r)=>{const s=document.createElement("button");return s.setAttribute("class",`button ${n.substring(1)}`),s.innerHTML=`\n ${""!==r?``:""}\n ${""!==t?`

${t}

`:""}\n `,s.hasListener||(s.addEventListener("click",(e=>{w=location.hash+!0,w!==n+!0?(a(0,n),w=n+!0):(history.replaceState(null,null,location.href.split("#")[0]),o(window,"location-changed",!0),w=n+!1),i("light")}),{passive:!0}),window.addEventListener("urlChanged",(()=>{e.config.highlight_current_view&&(location.pathname===n||location.hash===n?s.classList.add("highlight"):s.classList.remove("highlight"))}),{passive:!0}),s.hasListener=!0),s})(n.button,n.link,n.icon);t[n.link]=r,e.buttonsContainer.appendChild(r)})),e.buttonsAdded=!0,e.buttons=t}let U=0;!function(e){if(e.buttonsUpdated&&!h)return;let t=[];for(let n of M)e.buttons[n.link]&&(t.push(localStorage.getItem(`buttonWidth-${n.link}`)),t.push(localStorage.getItem(`buttonContent-${n.link}`)));Promise.all(t).then((t=>{let n=0;for(let o of M){let i=e.buttons[o.link];if(i){let a=t[n],r=t[n+1];n+=2,a&&"0"!==a&&r===i.innerHTML&&!h||(a=i.offsetWidth,localStorage.setItem(`buttonWidth-${o.link}`,a),localStorage.setItem(`buttonContent-${o.link}`,i.innerHTML),e.previousConfig=e.config),i.style.transform=`translateX(${U}px)`,U+=parseInt(a)+12}o.lightEntity&&V(i,o.lightEntity,o.link)}e.buttonsAdded=!0}))}(e);const B=`\n ha-card {\n border-radius: 0;\n }\n .horizontal-buttons-stack {\n width: 100%;\n margin-top: 0 !important;\n background: none !important;\n position: fixed;\n height: 51px;\n bottom: 16px;\n left: ${y};\n z-index: 1 !important; /* Higher value hide the more-info panel */\n }\n @keyframes from-bottom {\n 0% {transform: translateY(200px);}\n 20% {transform: translateY(200px);}\n 46% {transform: translateY(-8px);}\n 56% {transform: translateY(1px);}\n 62% {transform: translateY(-2px);}\n 70% {transform: translateY(0);}\n 100% {transform: translateY(0);}\n }\n .horizontal-buttons-stack-container {\n width: max-content;\n position: relative;\n height: 51px;\n }\n .button {\n display: inline-flex;\n position: absolute;\n box-sizing: border-box !important;\n border: 1px solid var(--primary-text-color);\n align-items: center;\n height: 50px;\n line-height: 16px;\n white-space: nowrap;\n width: auto;\n border-radius: 25px;\n z-index: 1;\n padding: 0 16px;\n background: none;\n transition: background-color 1s, border 1s, transform 1s;\n color: var(--primary-text-color);\n }\n .highlight {\n animation: pulse 1.4s infinite alternate;\n }\n @keyframes pulse {\n 0% {\n filter: brightness(0.7);\n }\n 100% {\n filter: brightness(1.3);\n }\n }\n .icon {\n height: 24px;\n }\n .card-content {\n width: calc(100% + 18px);\n box-sizing: border-box !important;\n margin: 0 -36px !important;\n padding: 0 36px !important;\n overflow: scroll !important;\n -ms-overflow-style: none;\n scrollbar-width: none;\n -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) calc(0% + 28px), rgba(0, 0, 0, 1) calc(100% - 28px), transparent 100%);\n /* mask-image: linear-gradient(90deg, transparent 2%, rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 1) 96%, transparent 100%); */\n /* -webkit-mask-image: linear-gradient(90deg, transparent 2%, rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 1) 96%, transparent 100%); */\n }\n .horizontal-buttons-stack::before {\n content: '';\n position: absolute;\n top: -32px;\n left: -100%;\n display: block;\n background: linear-gradient(0deg, var(--background-color, var(--primary-background-color)) 50%, rgba(79, 69, 87, 0));\n width: 200%;\n height: 100px;\n }\n .card-content::-webkit-scrollbar {\n display: none;\n }\n @media only screen and (min-width: 600px) {\n .card-content {\n position: fixed;\n width: ${p} !important;\n left: calc(50% - ${u[1]/2}${u[2]});\n margin-left: -13px !important;\n padding: 0 26px !important;\n }\n }\n @media only screen and (min-width: 870px) {\n .card-content {\n position: fixed;\n width: calc(${p}${"%"!==u[2]||g?"":" - var(--mdc-drawer-width)"}) !important;\n left: calc(50% - ${u[1]/2}${u[2]} + ${!0===g?"0px":"var(--mdc-drawer-width) "+("%"===u[2]?"":"/ 2")});\n margin-left: -13px !important;\n padding: 0 26px !important;\n }\n }\n .horizontal-buttons-stack.editor {\n position: relative;\n bottom: 0;\n left: 0;\n overflow: hidden;\n }\n .horizontal-buttons-stack.editor::before {\n top: -32px;\n left: -100%;\n background: none;\n width: 100%;\n height: 0;\n }\n .horizontal-buttons-stack-container.editor > .button {\n transition: background-color 0s, border 0s, transform 0s;\n }\n .horizontal-buttons-stack-container.editor {\n margin-left: 1px;\n }\n .horizontal-buttons-stack.editor > .card-content {\n position: relative;\n width: calc(100% + 26px) !important;\n left: -26px;\n margin: 0 !important;\n padding: 0;\n }\n `;!window.hasAnimated&&_&&(e.content.style.animation="from-bottom 1.3s forwards",window.hasAnimated=!0,setTimeout((()=>{e.content.style.animation="none"}),1500)),(0,n.L2)(r,e,B,s)}const w=Object.getPrototypeOf(customElements.get("ha-panel-lovelace")),x=w.prototype.html,k=w.prototype.css;let C;!function(){if(!window.eventAdded){const e=new Event("urlChanged");function t(){let t=0;window.dispatchEvent(e);const n=setInterval((()=>{t<10?(window.dispatchEvent(e),t++):clearInterval(n)}),1e3)}window.popUpInitialized=!1,["location-changed","connection-status"].forEach((e=>{window.addEventListener(e,t)}),{passive:!0});const n=()=>{window.dispatchEvent(e),window.addEventListener("popstate",t,{passive:!0})};window.addEventListener("popUpInitialized",n,{passive:!0}),window.eventAdded=!0}}();class $ extends HTMLElement{set hass(e){var s;switch(this._hass=e,C=t(),this.editor=C,async function(e){if(!window.resourcesChecked){window.resourcesChecked=!0;try{let t=(await e.callWS({type:"lovelace/resources"})).find((e=>e.url.includes("bubble-pop-up.js")));async function n(e){let t=await e.callWS({type:"lovelace/resources"}),n=t.findIndex((e=>e.url.includes("bubble-card.js"))),o=null;if(-1!==n&&0!==n){o=t.splice(n,1)[0];for(let n of t)await e.callWS({type:"lovelace/resources/delete",resource_id:n.id});o&&-1===(await e.callWS({type:"lovelace/resources"})).findIndex((e=>e.url.includes("bubble-card.js")))&&await e.callWS({type:"lovelace/resources/create",res_type:o.type,url:o.url});for(let n of t)await e.callWS({type:"lovelace/resources/create",res_type:n.type,url:n.url})}}t&&await e.callWS({type:"lovelace/resources/delete",resource_id:t.id}),n(e)}catch(o){throw o}}}(e),(s=this).content||(s.attachShadow({mode:"open"}),s.shadowRoot.innerHTML='\n \n
\n
\n \n ',s.card=s.shadowRoot.querySelector("ha-card"),s.content=s.shadowRoot.querySelector("div")),this.config.card_type){case"pop-up":!function(e){const t=e._hass,i=e.editor,s=e.config;if(!t)return;let l,c,d,p,{customStyles:h,entityId:u,icon:g,name:m,widthDesktop:b,widthDesktopDivided:f,isSidebarHidden:y,state:w,stateChanged:x,stateOn:k,formatedState:C,riseAnimation:$,marginCenter:S,popUpOpen:E,rgbaColor:O,rgbColor:L,bgOpacity:A,shadowOpacity:I,bgBlur:T,iconColorOpacity:D,iconColor:V,iconFilter:M,iconStyles:z,haStyle:U,themeBgColor:B,color:q}=v(e,s,t),H=s.auto_close||!1,W=s.hash,F=s.trigger_entity?s.trigger_entity:"",Y=s.trigger_state?s.trigger_state:"",P=!!s.trigger_close&&s.trigger_close,R=s.entity?"flex":"none",j=s.text||"",N=s.state,X=s.close_on_click||!1,G=s.margin_top_mobile&&"0"!==s.margin_top_mobile?s.margin_top_mobile:"0px",K=s.margin_top_desktop&&"0"!==s.margin_top_desktop?s.margin_top_desktop:"0px";if(w=N&&t.states[N]?t.states[N].state:"",e.errorTriggered)return;function Z(e){if(window.hash===W&&Q(),!window.justOpened)return;const t=e.composedPath();!t||t.some((e=>"HA-MORE-INFO-DIALOG"===e.nodeName))||t.some((e=>"root"===e.id&&!e.classList.contains("close-pop-up")))||E!==W+!0||setTimeout((function(){window.hash===W&&document.body.contains(e.target)&&(E=W+!1,J(),localStorage.setItem("isManuallyClosed_"+W,!0))}),0)}function J(){history.replaceState(null,null,location.href.split("#")[0]),o(window,"location-changed",!0)}function Q(){clearTimeout(d),H>0&&(d=setTimeout(J,H))}function ee(){r(t,u)}function te(e){"Escape"===e.key&&(E=W+!1,J(),localStorage.setItem("isManuallyClosed_"+W,!0))}function ne(e){window.hash===W&&Q(),l=e.touches[0].clientY,c=l}function oe(e){e.touches[0].clientY-l>300&&e.touches[0].clientY>c&&(E=W+!1,J(),localStorage.setItem("isManuallyClosed_"+W,!0)),c=e.touches[0].clientY}function ie(){i||(window.hash=location.hash.split("?")[0],window.hash===W&&E!==W+!0?(e.popUp.classList.remove("close-pop-up"),e.popUp.classList.add("open-pop-up"),e.content.querySelector(".power-button").addEventListener("click",ee,{passive:!0}),window.addEventListener("keydown",te,{passive:!0}),e.popUp.addEventListener("touchstart",ne,{passive:!0}),e.popUp.addEventListener("touchmove",oe,{passive:!0}),document.body.style.overflow="hidden",ae(e.popUp,!1),Q(),X?(e.popUp.addEventListener("mouseup",J,{passive:!0}),e.popUp.addEventListener("touchend",J,{passive:!0})):window.addEventListener("click",Z,{passive:!0}),e.popUpOpen=W+!0,setTimeout((function(){window.justOpened=!0}),10)):window.hash!==W&&E!==W+!1&&(window.justOpened=!1,e.popUp.classList.remove("open-pop-up"),e.popUp.classList.add("close-pop-up"),e.content.querySelector(".power-button").removeEventListener("click",ee),window.removeEventListener("keydown",te),e.popUp.removeEventListener("touchstart",ne),e.popUp.removeEventListener("touchmove",oe),document.body.style.overflow="",clearTimeout(d),X?(e.popUp.removeEventListener("mouseup",J),e.popUp.removeEventListener("touchend",J)):window.removeEventListener("click",Z),e.popUpOpen=W+!1,setTimeout((function(){ae(e.popUp,!0)}),320)))}function ae(e,t){for(var n=e.querySelectorAll("video"),o=0;o0&&!n[o].paused&&!n[o].ended&&n[o].readyState>n[o].HAVE_CURRENT_DATA;t&&i?n[o].pause():t||i||(n[o].play(),n[o].currentTime>0&&(n[o].currentTime=1e4))}var a=e.querySelectorAll("*");for(o=0;o :first-child::after {\n content: '';\n display: block;\n position: sticky;\n top: 0;\n left: -50px;\n margin: -70px 0 -36px -36px;\n overflow: visible;\n width: 200%;\n height: 100px;\n background: linear-gradient(0deg, ${p} 0%, ${O} 80%);\n z-index: 0;\n } \n #root::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n }\n #root > :first-child {\n position: sticky;\n top: 0;\n z-index: 1;\n background: none !important;\n overflow: visible;\n }\n #root.open-pop-up {\n transform: translateY(-120%);\n }\n #root.open-pop-up > * {\n /* Block child items to overflow and if they do clip them */\n /*max-width: calc(100vw - 38px);*/\n max-width: 100% !important;\n /*overflow-x: clip;*/\n }\n #root.close-pop-up { \n transform: translateY(-20%);\n box-shadow: none;\n }\n @media only screen and (min-width: 600px) {\n #root {\n top: calc(120% + ${K} + var(--header-height));\n width: calc(${b}${"%"!==f[2]||y?"":" - var(--mdc-drawer-width)"}) !important;\n left: calc(50% - ${f[1]/2}${f[2]});\n margin: 0 !important;\n }\n } \n @media only screen and (min-width: 870px) {\n #root {\n left: calc(50% - ${f[1]/2}${f[2]} + ${y?"0px":"var(--mdc-drawer-width) "+("%"===f[2]?"":"/ 2")});\n }\n } \n #root.editor {\n position: inherit !important;\n width: 100% !important;\n padding: 18px !important;\n backdrop-filter: none !important;\n }\n `,r=`\n ${z}\n\n ha-card {\n margin-top: 0 !important;\n }\n #header-container {\n display: inline-flex;\n ${g||m||u||w||j?"":"flex-direction: row-reverse;"}\n height: 50px;\n width: 100%;\n margin: 0;\n padding: 0;\n }\n #header-container > div {\n display: ${g||m||u||w||j?"inline-flex":"none"};\n align-items: center;\n position: relative;\n padding-right: 6px;\n z-index: 1;\n flex-grow: 1;\n background-color: ${u?e.rgbColorOpacity:"var(--background-color,var(--secondary-background-color))"};\n transition: background 1s;\n border-radius: 25px;\n margin-right: 14px;\n backdrop-filter: blur(14px);\n -webkit-backdrop-filter: blur(14px);\n }\n #header-container h2 {\n display: inline-flex;\n margin: 0 18px 0 0;\n padding: 4px;\n z-index: 1;\n font-size: 18px;\n }\n #header-container p {\n display: inline-flex;\n font-size: 16px;\n min-width: fit-content ;\n }\n .power-button {\n cursor: pointer; \n flex-grow: inherit; \n width: 24px;\n height: 24px;\n border-radius: 12px;\n margin: 0 10px;\n background: none !important;\n justify-content: flex-end;\n background-color: var(--background-color,var(--secondary-background-color));\n }\n .close-pop-up {\n height: 50px;\n width: 50px;\n border: none;\n border-radius: 50%;\n z-index: 1;\n background: var(--background-color,var(--secondary-background-color));\n color: var(--primary-text-color);\n flex-shrink: 0;\n cursor: pointer;\n }\n `;(0,n.L2)(t,e,a,h,w,u,"","",o),(0,n.L2)(t,e,r,h,w,u,x)}e.initStyleAdded||e.popUp||i||(e.card.style.marginTop="4000px",e.initStyleAdded=!0);const se=setTimeout((()=>{if(e.element||(e.element=e.getRootNode().querySelector("#root")),e.element&&(!e.popUp||x||i&&!e.editorModeAdded)){if(e.popUp=e.element,i&&e.popUp&&!e.editorModeAdded)return e.popUp.classList.add("editor"),e.popUp.classList.remove("close-pop-up","open-pop-up","hide-pop-up"),e.editorModeAdded=!0,void re();re(),clearTimeout(se);const t=new Event("popUpInitialized");window.dispatchEvent(t)}else!i&&e.popUp&&e.editorModeAdded&&(e.popUp.classList.remove("editor"),e.editorModeAdded=!1)}),0);e.popUp&&F&&x&&(()=>{null===localStorage.getItem("previousTriggerState_"+W)&&localStorage.setItem("previousTriggerState_"+W,""),null===localStorage.getItem("isManuallyClosed_"+W)&&localStorage.setItem("isManuallyClosed_"+W,"false"),null===localStorage.getItem("isTriggered_"+W)&&localStorage.setItem("isTriggered_"+W,"false");let n=localStorage.getItem("previousTriggerState_"+W),o="true"===localStorage.getItem("isManuallyClosed_"+W),i="true"===localStorage.getItem("isTriggered_"+W);t.states[F].state!==Y||null!==n||i||(a(0,W),i=!0,localStorage.setItem("isTriggered_"+W,i)),t.states[F].state!==n&&(o=!1,localStorage.setItem("previousTriggerState_"+W,t.states[F].state),localStorage.setItem("isManuallyClosed_"+W,o)),t.states[F].state!==Y||o?t.states[F].state!==Y&&P&&e.popUp.classList.contains("open-pop-up")&&i&&!o&&(J(),E=W+!1,i=!1,o=!0,localStorage.setItem("isManuallyClosed_"+W,o),localStorage.setItem("isTriggered_"+W,i)):(a(0,W),i=!0,localStorage.setItem("isTriggered_"+W,i))})()}(this);break;case"horizontal-buttons-stack":y(this);break;case"button":!function(e){const t=e._hass,o=e.editor;let{customStyles:a,entityId:s,icon:l,name:c,widthDesktop:d,widthDesktopDivided:p,isSidebarHidden:h,state:u,stateChanged:g,stateOn:m,formatedState:b,riseAnimation:f,marginCenter:y,popUpOpen:w,rgbaColor:x,rgbColor:k,bgOpacity:C,shadowOpacity:$,bgBlur:S,iconColorOpacity:E,iconColor:O,iconFilter:L,iconStyles:A,haStyle:I,themeBgColor:T,color:D}=v(e,e.config,t);b=s&&(g||o)?t.formatEntityState(t.states[s]):"";let V=e.config.button_type||"switch",M=!!e.config.show_state&&e.config.show_state,z=s?t.states[s].attributes.brightness||0:"",U=s?t.states[s].attributes.volume_level||0:"",B=!1,q=z,H=U,W=0,F=0,Y=0,P=!1,R=null;if(e.config.service_on,e.config.service_off,!e.buttonAdded){const t=document.createElement("div");t.setAttribute("class","button-container"),e.content.appendChild(t)}const j=document.createElement("div");j.setAttribute("class","icon-container"),e.iconContainer=j;const N=document.createElement("div");N.setAttribute("class","name-container");const X=document.createElement("div");X.setAttribute("class","switch-button");const G=document.createElement("div");G.setAttribute("class","range-slider");const K=document.createElement("div");if(K.setAttribute("class","range-fill"),!e.buttonContainer||o){if(o&&e.buttonContainer){for(;e.buttonContainer.firstChild;)e.buttonContainer.removeChild(e.buttonContainer.firstChild);e.eventAdded=!1,e.wasEditing=!0}e.buttonContainer=e.content.querySelector(".button-container"),"slider"!==V||e.buttonAdded&&!o?("switch"===V||"custom"===V||o)&&(e.buttonContainer.appendChild(X),X.appendChild(j),X.appendChild(N),e.switchButton=e.content.querySelector(".switch-button")):(e.buttonContainer.appendChild(G),G.appendChild(j),G.appendChild(N),G.appendChild(K),e.rangeFill=e.content.querySelector(".range-fill")),(0,n.IU)(e,s,l,j,o),N.innerHTML=`\n

${c}

\n ${M?`

${b}

`:""}\n `,e.buttonAdded=!0}function Z(e){i("success");let t=e.querySelector(".feedback-element");t||(t=document.createElement("div"),t.setAttribute("class","feedback-element"),e.appendChild(t)),t.style.animation="tap-feedback .5s",setTimeout((()=>{t.style.animation="none",e.removeChild(t)}),500)}function J(e){W=e.pageX||(e.touches?e.touches[0].pageX:0),F=e.pageY||(e.touches?e.touches[0].pageY:0),Y=G.value,e.target!==j&&e.target!==j.querySelector("ha-icon")&&(B=!0,document.addEventListener("mouseup",ee,{passive:!0}),document.addEventListener("touchend",ee,{passive:!0}),document.addEventListener("mousemove",Q,{passive:!0}),document.addEventListener("touchmove",Q,{passive:!0}),R=setTimeout((()=>{oe(e.pageX||e.touches[0].pageX),te(),R=null}),200))}function Q(e){const t=e.pageX||(e.touches?e.touches[0].pageX:0),n=e.pageY||(e.touches?e.touches[0].pageY:0);Math.abs(n-F)>Math.abs(t-W)?(clearTimeout(R),ee()):(document.removeEventListener("mousemove",Q),document.removeEventListener("touchmove",Q),document.addEventListener("mousemove",ne,{passive:!0}),document.addEventListener("touchmove",ne,{passive:!0}))}function ee(){B=!1,P=!1,te(),document.removeEventListener("mouseup",ee),document.removeEventListener("touchend",ee),document.removeEventListener("mousemove",ne),document.removeEventListener("touchmove",ne)}function te(){s.startsWith("light.")?(z=q,t.callService("light","turn_on",{entity_id:s,brightness:z})):s.startsWith("media_player.")&&(U=H,t.callService("media_player","volume_set",{entity_id:s,volume_level:U}))}function ne(e){const t=e.pageX||(e.touches?e.touches[0].pageX:0),n=e.pageY||(e.touches?e.touches[0].pageY:0);B&&Math.abs(t-W)>10?(i("light"),oe(t)):B&&Math.abs(n-F)>10&&(B=!1,G.value=Y)}function oe(e){const t=G.getBoundingClientRect(),n=Math.min(Math.max(e-t.left,0),t.width)/t.width;s.startsWith("light.")?q=Math.round(255*n):s.startsWith("media_player.")&&(H=n),K.style.transition="none",K.style.transform=`translateX(${100*n}%)`}M&&b&&(e.content.querySelector(".state").textContent=b),e.eventAdded||"switch"!==V?e.eventAdded||"slider"!==V?e.eventAdded||"custom"!==V||(X.addEventListener("click",(()=>Z(e.switchButton)),{passive:!0}),_(j,e.config),e.eventAdded=!0):(G.addEventListener("mousedown",J,{passive:!0}),G.addEventListener("touchstart",J,{passive:!0}),_(j,e.config),e.eventAdded=!0):(X.addEventListener("click",(()=>Z(e.switchButton)),{passive:!0}),X.addEventListener("click",(function(e){e.target!==j&&e.target!==j.querySelector("ha-icon")&&r(t,s)}),{passive:!0}),_(j,e.config),e.eventAdded=!0),e.isDragging||"slider"!==V||(e.rangeFill.style.transition="all .3s",s.startsWith("light.")?e.rangeFill.style.transform=`translateX(${z/255*100}%)`:s.startsWith("media_player.")&&(e.rangeFill.style.transform=`translateX(${100*U}%)`));const ie=`\n ha-card {\n margin-top: 0 !important;\n background: none !important;\n opacity: ${"unavailable"!==u?"1":"0.5"};\n }\n \n .button-container {\n position: relative;\n width: 100%;\n height: 50px;\n z-index: 0;\n background-color: var(--background-color-2,var(--secondary-background-color));\n border-radius: 25px;\n mask-image: radial-gradient(white, black);\n -webkit-mask-image: radial-gradient(white, black);\n -webkit-backface-visibility: hidden;\n -moz-backface-visibility: hidden;\n -webkit-transform: translateZ(0);\n overflow: hidden;\n }\n \n .switch-button,\n .range-slider {\n display: inline-flex;\n position: absolute;\n height: 100%;\n width: 100%;\n transition: background-color 1.5s;\n background-color: ${m&&["switch","custom"].includes(V)?"var(--accent-color)":"rgba(0,0,0,0)"};\n }\n\n .range-fill {\n z-index: -1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n background-color: ${E};\n width: 100%;\n left: -100%;\n }\n \n .switch-button {\n cursor: pointer !important;\n }\n \n .range-slider {\n cursor: ew-resize;\n }\n \n .name-container {\n position: relative;\n display: ${M?"block":"inline-flex"};\n margin-left: 4px;\n z-index: 1;\n font-weight: 600;\n align-items: center;\n line-height: ${M?"4px":"16px"};\n padding-right: 16px;\n }\n \n .state {\n font-size: 12px;\n opacity: 0.7;\n }\n \n .feedback-element {\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n width: 100%;\n height: 100%;\n background-color: rgb(0,0,0);\n }\n \n @keyframes tap-feedback {\n 0% {transform: translateX(-100%); opacity: 0;}\n 64% {transform: translateX(0); opacity: 0.1;}\n 100% {transform: translateX(100%); opacity: 0;}\n }\n\n ${A}\n `;(0,n.L2)(t,e,ie,a,u,s,g)}(this);break;case"separator":!function(e){const t=e._hass,o=e.editor,i=e.config;let{customStyles:a,entityId:r,icon:s,name:l,widthDesktop:c,widthDesktopDivided:d,isSidebarHidden:p,state:h,stateChanged:u,stateOn:g,formatedState:m,riseAnimation:b,marginCenter:f,popUpOpen:_,rgbaColor:y,rgbColor:w,bgOpacity:x,shadowOpacity:k,bgBlur:C,iconColorOpacity:$,iconColor:S,iconFilter:E,iconStyles:O,haStyle:L,themeBgColor:A,color:I}=v(e,i,t);if(!e.separatorAdded||o){if(o&&e.separatorContainer)for(;e.separatorContainer.firstChild;)e.separatorContainer.removeChild(e.separatorContainer.firstChild);e.separatorAdded||(e.separatorContainer=document.createElement("div"),e.separatorContainer.setAttribute("class","separator-container")),e.separatorContainer.innerHTML=`\n
\n \n

${l}

\n
\n
\n `,e.content.appendChild(e.separatorContainer),e.separatorAdded=!0}(0,n.L2)(t,e,"\n .separator-container {\n display: inline-flex;\n width: 100%;\n margin-top: 12px;\n }\n .separator-container div:first-child {\n display: inline-flex;\n max-width: calc(100% - 38px);\n }\n .separator-container div ha-icon {\n display: inline-flex;\n height: 24px;\n width: 24px;\n margin: 0 22px 0 8px;\n transform: translateY(-2px);\n }\n .separator-container div h4 {\n display: inline-flex;\n margin: 0 20px 0 0;\n font-size: 16px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .separator-container div:last-child {\n display: inline-flex; \n border-radius: 6px; \n opacity: 0.5; \n margin-left: 10px; \n flex-grow: 1; \n height: 6px; \n align-self: center; \n background-color: var(--background-color,var(--secondary-background-color));\n }\n ",a)}(this);break;case"cover":!function(e){const t=e._hass,o=e.editor,i=e.config;let{customStyles:a,entityId:r,icon:s,name:l,widthDesktop:c,widthDesktopDivided:d,isSidebarHidden:p,state:h,stateChanged:u,stateOn:g,formatedState:m,riseAnimation:b,marginCenter:f,popUpOpen:y,rgbaColor:w,rgbColor:x,bgOpacity:k,shadowOpacity:C,bgBlur:$,iconColorOpacity:S,iconColor:E,iconFilter:O,iconStyles:L,haStyle:A,themeBgColor:I,color:T}=v(e,i,t);const D=i.icon_open?i.icon_open:"mdi:window-shutter-open",V=i.icon_close?i.icon_close:"mdi:window-shutter",M=i.open_service?i.open_service:"cover.open_cover",z=i.close_service?i.close_service:"cover.close_cover",U=i.stop_service?i.stop_service:"cover.stop_cover",B=i.icon_up?i.icon_up:"mdi:arrow-up",q=i.icon_down?i.icon_down:"mdi:arrow-down",H=!!e.config.show_state&&e.config.show_state;if(s="open"===t.states[i.entity].state?D:V,m=u?t.formatEntityState(t.states[r]):m||"",!e.coverAdded||o){if(o&&e.coverContainer)for(;e.coverContainer.firstChild;)e.coverContainer.removeChild(e.coverContainer.firstChild);e.coverContainer=document.createElement("div"),e.coverContainer.setAttribute("class","cover-container"),e.coverContainer.innerHTML=`\n
\n
\n
\n
\n

${l}

\n

\n
\n
\n
\n \n \n \n
\n `,e.content.appendChild(e.coverContainer);const n=e.coverContainer.querySelector(".open"),a=e.coverContainer.querySelector(".stop"),s=e.coverContainer.querySelector(".close");n.addEventListener("click",(()=>{t.callService(M.split(".")[0],M.split(".")[1],{entity_id:r})}),{passive:!0}),a.addEventListener("click",(()=>{t.callService(U.split(".")[0],U.split(".")[1],{entity_id:r})}),{passive:!0}),s.addEventListener("click",(()=>{t.callService(z.split(".")[0],z.split(".")[1],{entity_id:r})}),{passive:!0}),e.iconContainer=e.content.querySelector(".icon-container"),_(e.iconContainer,i),e.coverAdded=!0}e.iconContainer&&(u||o)&&(e.iconContainer.innerHTML=``,e.content.querySelector(".state").textContent=H?m:""),(0,n.L2)(t,e,"\n ha-card {\n margin-top: 0 !important;\n background: none !important;\n }\n \n .header-container {\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n }\n \n .cover-container {\n display: grid;\n }\n \n .icon-container {\n display: flex;\n margin: 0 !important;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n /*z-index: 1;*/\n width: 48px;\n height: 48px;\n margin: 6px;\n border-radius: 50%;\n background-color: var(--card-background-color,var(--ha-card-background));\n border: 6px solid var(--background-color-2,var(--secondary-background-color));\n box-sizing: border-box;\n }\n \n .name-container {\n font-weight: 600;\n margin-left: 10px;\n line-height: 4px;\n }\n \n .buttons-container {\n display: grid;\n align-self: center;\n grid-auto-flow: column;\n grid-gap: 18px; \n }\n \n .state {\n font-size: 12px;\n opacity: 0.7;\n }\n \n ha-icon {\n display: flex; \n height: 24px; \n width: 24px; \n color: var(--primary-text-color);\n }\n \n .button {\n display: flex;\n background: var(--background-color-2,var(--secondary-background-color));\n height: 42px;\n border-radius: 32px;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: none;\n }\n ",a,h,r)}(this);break;case"empty-column":!function(e){if(!e.emptyCollumnAdded){const t=document.createElement("div");t.setAttribute("class","empty-column"),t.innerHTML='\n
\n ',e.content.appendChild(t),e.emptyColumnAdded=!0}}(this)}window.columnFix||(window.columnFix=this.config.column_fix)}setConfig(e){if("pop-up"===e.card_type){if(!e.hash)throw new Error("You need to define an hash. Please note that this card must be placed inside a vertical_stack to work as a pop-up.")}else if("horizontal-buttons-stack"===e.card_type){var t={};for(var n in e)if(n.match(/^\d+_icon$/)){var o=n.replace("_icon","_link");if(void 0===e[o])throw new Error("You need to define "+o);if(t[e[o]])throw new Error("You can't use "+e[o]+" twice");t[e[o]]=!0}}else if(("button"===e.card_type||"cover"===e.card_type)&&!e.entity)throw new Error("You need to define an entity");if(window.entityError)throw new Error("You need to define a valid entity");this.config=e}getCardSize(){return window.columnFix?0:-1}static getConfigElement(){return document.createElement("bubble-card-editor")}}customElements.define("bubble-card",$),customElements.define("bubble-card-editor",class extends w{setConfig(e){this._config={...e}}static get properties(){return{hass:{},_config:{}}}get _card_type(){return this._config.card_type||""}get _button_type(){return this._config.button_type||"switch"}get _entity(){return this._config.entity||""}get _name(){return this._config.name||""}get _icon(){return this._config.icon||""}get _state(){return this._config.state||""}get _text(){return this._config.text||""}get _hash(){return this._config.hash||"#pop-up-name"}get _trigger_entity(){return this._config.trigger_entity||""}get _trigger_state(){return this._config.trigger_state||""}get _trigger_close(){return this._config.trigger_close||!1}get _margin(){return this._config.margin||"7px"}get _margin_top_mobile(){return this._config.margin_top_mobile||"0px"}get _margin_top_desktop(){return this._config.margin_top_desktop||"0px"}get _width_desktop(){return this._config.width_desktop||"540px"}get _bg_color(){return this._config.bg_color||window.color}get _bg_opacity(){return void 0!==this._config.bg_opacity?this._config.bg_opacity:"88"}get _bg_blur(){return void 0!==this._config.bg_blur?this._config.bg_blur:"14"}get _shadow_opacity(){return void 0!==this._config.shadow_opacity?this._config.shadow_opacity:"0"}get _is_sidebar_hidden(){return this._config.is_sidebar_hidden||!1}get _rise_animation(){return void 0===this._config.rise_animation||this._config.rise_animation}get _auto_close(){return this._config.auto_close||""}get _close_on_click(){return this._config.close_on_click||!1}get _icon_open(){return this._config.icon_open||""}get _icon_close(){return this._config.icon_close||""}get _open_service(){return this._config.open_service||"cover.open_cover"}get _close_service(){return this._config.open_service||"cover.close_cover"}get _stop_service(){return this._config.open_service||"cover.stop_cover"}get _auto_order(){return this._config.auto_order||!1}get _highlightCurrentview(){return this._config.highlight_current_view||!1}get _show_state(){return this._config.show_state||!1}render(){if(!this.hass)return x``;if(!this.listsUpdated){const e=e=>({label:e,value:e});this.allEntitiesList=Object.keys(this.hass.states).map(e),this.lightList=Object.keys(this.hass.states).filter((e=>"light"===e.substr(0,e.indexOf(".")))).map(e),this.sensorList=Object.keys(this.hass.states).filter((e=>"sensor"===e.substr(0,e.indexOf(".")))).map(e),this.binarySensorList=Object.keys(this.hass.states).filter((e=>"binary_sensor"===e.substr(0,e.indexOf(".")))).map(e),this.coverList=Object.keys(this.hass.states).filter((e=>"cover"===e.substr(0,e.indexOf(".")))).map(e),this.cardTypeList=[{label:"Button",value:"button"},{label:"Cover",value:"cover"},{label:"Empty column",value:"empty-column"},{label:"Horizontal buttons stack",value:"horizontal-buttons-stack"},{label:"Pop-up",value:"pop-up"},{label:"Separator",value:"separator"}],this.buttonTypeList=[{label:"Switch",value:"switch"},{label:"Slider",value:"slider"}],this.listsUpdated=!0}const t=this.allEntitiesList,n=(this.lightList,this.sensorList,this.coverList),o=this.cardTypeList,i=this.buttonTypeList;if("pop-up"===this._config.card_type)return x` +(()=>{"use strict";var __webpack_modules__={946:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{G:()=>getIconStyles,IU:()=>createIcon,L2:()=>addStyles,_k:()=>convertToRGBA,mk:()=>getIconColor,wW:()=>isColorCloseToWhite});let timeouts={},idCounter=0;const addStyles=function(hass,context,styles,customStyles,state,entityId,stateChanged,path="",element=context.content){const id=idCounter++,key=id+styles,executeStyles=()=>{const customStylesEval=customStyles?eval("`"+customStyles+"`"):"";let styleAddedKey=styles+"Added";if(!context[styleAddedKey]||context.previousStyle!==customStylesEval||stateChanged||context.previousConfig!==context.config){if(!context[styleAddedKey]){if(context.styleElement=element.querySelector("style"),!context.styleElement){context.styleElement=document.createElement("style");const e=path?element.querySelector(path):element;e?.appendChild(context.styleElement)}context[styleAddedKey]=!0}const e=document.createElement("style");e.innerHTML=customStylesEval+styles,context.styleElement.parentNode.insertBefore(e,context.styleElement.nextSibling),context.styleElement.parentNode.removeChild(context.styleElement),context.styleElement=e,context.previousStyle=customStylesEval,context.previousConfig=context.config}};timeouts[key]?clearTimeout(timeouts[key]):executeStyles(),timeouts[key]=setTimeout(executeStyles,500)};function createIcon(e,t,n,o,i){let a=e._hass,r=!(!t||!a.states[t].attributes)&&a.states[t].attributes;e.imageUrl=!!r.entity_picture&&r.entity_picture,updateIcon(e,a,t,n,o),i||setInterval((()=>{a=e._hass,t&&a.states[t]&&(e.currentEntityPicture=a.states[t].attributes.entity_picture,e.currentEntityPicture!==e.previousEntityPicture&&(e.imageUrl=e.currentEntityPicture,updateIcon(e,a,t,n,o),e.previousEntityPicture=e.currentEntityPicture))}),1e3)}function updateIcon(e,t,n,o,i){for(;i.firstChild;)i.removeChild(i.firstChild);let a=e.config.icon&&e.config.icon.includes("/")?e.config.icon:e.imageUrl?e.imageUrl:"";if(a&&(r=t.states[n].state,n.startsWith("media_player.")&&!["off","unknown","idle",void 0].includes(r)||!n.startsWith("media_player."))){const e=document.createElement("div");e.setAttribute("class","entity-picture"),e.setAttribute("alt","Icon"),i&&(i.appendChild(e),i.style.background="center / cover no-repeat url("+a+"), var(--card-background-color,var(--ha-card-background))")}else{const e=document.createElement("ha-icon");e.setAttribute("icon",o),e.setAttribute("class","icon"),i&&i.appendChild(e)}var r}function isColorCloseToWhite(e){let t=[220,220,190];for(let n=0;n<3;n++)if(e[n]{for(var n in t)__webpack_require__.o(t,n)&&!__webpack_require__.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var __webpack_exports__={};(()=>{let e="v1.6.4";const t=new Event("urlChanged");function n(){const e=function(){try{return document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("ha-drawer > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("div")}catch(e){return}}();if(e)return e.classList.contains("edit-mode")}var o=__webpack_require__(946);const i=(e,t,n,o)=>{o=o||{},n=null==n?{}:n;const i=new Event(t,{bubbles:void 0===o.bubbles||o.bubbles,cancelable:Boolean(o.cancelable),composed:void 0===o.composed||o.composed});return i.detail=n,e.dispatchEvent(i),i},a=e=>{i(window,"haptic",e)},r=(e,t,n=!1)=>{n?history.replaceState(null,"",t):history.pushState(null,"",t),i(window,"location-changed",{replace:n})};function s(e,t){e.callService("homeassistant","toggle",{entity_id:t})}const l=300;let c,d,p,h,u,g,m=null,b=0,f=0;class _{constructor(e,t,n){this.element=e,this.config=t,this.sendActionEvent=n,this.holdDuration=300,this.holdTimeout=null,this.tapTimeout=null,this.lastTap=0,this.holdTriggered=!1}handleStart(){this.holdTriggered=!1,this.holdTimeout=setTimeout((()=>{this.sendActionEvent(this.element,this.config,"hold"),this.holdTriggered=!0}),this.holdDuration)}handleEnd(e){clearTimeout(this.holdTimeout);let t=(new Date).getTime(),n=t-this.lastTap;n0?(clearTimeout(this.tapTimeout),this.sendActionEvent(this.element,this.config,"double_tap")):this.holdTriggered||(this.tapTimeout=setTimeout((()=>{this.sendActionEvent(this.element,this.config,"tap")}),this.holdDuration)),this.lastTap=t,this.holdTriggered=!1}handleCancel(){clearTimeout(this.holdTimeout),this.holdTriggered=!1}}function v(e,t,n){const o=Date.now();if("tap"===n&&o-fi.handleEnd(e)),{passive:!0}),e.addEventListener("touchcancel",i.handleCancel.bind(i),{passive:!0})):(e.addEventListener("mousedown",i.handleStart.bind(i),{passive:!0}),e.addEventListener("mouseup",(e=>i.handleEnd(e)),{passive:!0}),e.addEventListener("mouseout",i.handleCancel.bind(i),{passive:!0}))}function w(e,t,n,i){let a=t.styles?t.styles:"",r=t.entity&&n.states[t.entity]?t.entity:"",s=!t.icon&&r?n.states[r].attributes.icon||n.states[r].attributes.entity_picture||"":t.icon||"",l=t.name?t.name:r?n.states[r].attributes.friendly_name:"",u=t.width_desktop||"540px",g=u?u.match(/(\d+)(\D+)/):"",m=t.is_sidebar_hidden||!1,b=r?n.states[r].state:"";!function(e,t,n){e.hasState=t.states[n],e.hasState&&(e.newState=[e.hasState.state,e.hasState.attributes.rgb_color],e.oldState&&e.newState[0]===e.oldState[0]&&e.newState[1]===e.oldState[1]?e.stateChanged=!1:(e.oldState=e.newState,e.stateChanged=!0),e.stateChanged)}(e,n,r);let f=e.stateChanged,_=["on","open","cleaning","true","home","playing"].includes(b)||0!==Number(b)&&!isNaN(Number(b)),v=void 0===t.rise_animation||t.rise_animation,y=t.margin?"0"!==t.margin?t.margin:"0px":"7px",w=void 0!==t.bg_opacity?t.bg_opacity:"88",x=void 0!==t.shadow_opacity?t.shadow_opacity:"0",k=void 0!==t.bg_blur?t.bg_blur:"10",{iconColorOpacity:C,iconColor:$,iconFilter:S}=(0,o.mk)(n,r,_,o.wW),E=(0,o.G)(r,_,$,S),O=getComputedStyle(document.body),A=O.getPropertyValue("--ha-card-background")||O.getPropertyValue("--card-background-color"),L=t.bg_color?t.bg_color:A;if(L&&(!e.color||L!==e.color)){const t=1.02;d=(0,o._k)(L,w/100,t),document.body.style.setProperty("--bubble-pop-up-background",d),e.color=L,window.color=L}return{customStyles:a,entityId:r,icon:s,name:l,widthDesktop:u,widthDesktopDivided:g,isSidebarHidden:m,state:b,stateChanged:f,stateOn:_,formatedState:h,riseAnimation:v,marginCenter:y,popUpOpen:c,rgbaColor:d,rgbColor:p,bgOpacity:w,shadowOpacity:x,bgBlur:k,iconColorOpacity:C,iconColor:$,iconFilter:S,iconStyles:E,haStyle:O,themeBgColor:A,color:L}}function x(e){const t=e._hass;let{customStyles:s,entityId:l,icon:c,name:d,widthDesktop:p,widthDesktopDivided:h,isSidebarHidden:u,state:m,stateChanged:b,stateOn:f,riseAnimation:_,marginCenter:v,popUpOpen:y,rgbaColor:x,rgbColor:k,bgOpacity:C,shadowOpacity:$,bgBlur:S,iconColorOpacity:E,iconColor:O,iconFilter:A,iconStyles:L,haStyle:I,themeBgColor:T,color:D}=w(e,e.config,t);setInterval((()=>{g=n(),g&&!e.editorModeAdded?(e.buttonsContainer.classList.add("editor"),e.card.classList.add("editor"),e.editorModeAdded=!0):!g&&e.editorModeAdded&&(e.buttonsContainer.classList.remove("editor"),e.card.classList.remove("editor"),e.editorModeAdded=!1)}),100);if(!e.buttonsAdded){const t=document.createElement("div");t.classList.add("horizontal-buttons-stack-container"),e.content.appendChild(t),e.buttonsContainer=t}const V=(e,n,i)=>{if(t.states[n].attributes.rgb_color){const i=t.states[n].attributes.rgb_color,a=(0,o.wW)(i)?"rgba(255,220,200, 0.5)":`rgba(${i}, 0.5)`;e.style.backgroundColor=a,e.style.border="1px solid rgba(0,0,0,0)"}else t.states[n].attributes.rgb_color||"on"!=t.states[n].state?(e.style.backgroundColor="rgba(0,0,0,0)",e.style.border="1px solid var(--primary-text-color)"):(e.style.backgroundColor="rgba(255,255,255,0.5)",e.style.border="1px solid rgba(0,0,0,0)")};let M=[],z=1;for(;e.config[z+"_link"];){const t=z+"_",n=e.config[t+"name"]||"",o=e.config[t+"pir_sensor"];c=e.config[t+"icon"]||"";const i=e.config[t+"link"],a=e.config[t+"entity"];M.push({button:n,pirSensor:o,icon:c,link:i,lightEntity:a}),z++}if(e.config.auto_order&&M.sort(((e,n)=>e.pirSensor&&n.pirSensor?"on"===t.states[e.pirSensor].state&&"on"===t.states[n.pirSensor].state?t.states[e.pirSensor].last_updated{const o=((t,n,o)=>{const s=document.createElement("button");return s.setAttribute("class",`button ${n.substring(1)}`),s.innerHTML=`\n ${""!==o?``:""}\n ${""!==t?`

${t}

`:""}\n `,s.hasListener||(s.addEventListener("click",(e=>{y=location.hash+!0,y!==n+!0?(r(0,n),y=n+!0):(history.replaceState(null,null,location.href.split("#")[0]),i(window,"location-changed",!0),y=n+!1),a("light")}),{passive:!0}),window.addEventListener("urlChanged",(()=>{e.config.highlight_current_view&&(location.pathname===n||location.hash===n?s.classList.add("highlight"):s.classList.remove("highlight"))}),{passive:!0}),s.hasListener=!0),s})(n.button,n.link,n.icon);t[n.link]=o,e.buttonsContainer.appendChild(o)})),e.buttonsAdded=!0,e.buttons=t}let B=0;!function(e){if(e.buttonsUpdated&&!g)return;let t=[];for(let n of M)e.buttons[n.link]&&(t.push(localStorage.getItem(`buttonWidth-${n.link}`)),t.push(localStorage.getItem(`buttonContent-${n.link}`)));Promise.all(t).then((t=>{let n=0;for(let o of M){let i=e.buttons[o.link];if(i){let a=t[n],r=t[n+1];n+=2,a&&"0"!==a&&r===i.innerHTML&&!g||(a=i.offsetWidth,localStorage.setItem(`buttonWidth-${o.link}`,a),localStorage.setItem(`buttonContent-${o.link}`,i.innerHTML),e.previousConfig=e.config),i.style.transform=`translateX(${B}px)`,B+=parseInt(a)+12}o.lightEntity&&V(i,o.lightEntity,o.link)}e.buttonsAdded=!0}))}(e);const U=`\n ha-card {\n border-radius: 0;\n }\n .horizontal-buttons-stack {\n width: 100%;\n margin-top: 0 !important;\n background: none !important;\n position: fixed;\n height: 51px;\n bottom: 16px;\n left: ${v};\n z-index: 1 !important; /* Higher value hide the more-info panel */\n }\n @keyframes from-bottom {\n 0% {transform: translateY(200px);}\n 20% {transform: translateY(200px);}\n 46% {transform: translateY(-8px);}\n 56% {transform: translateY(1px);}\n 62% {transform: translateY(-2px);}\n 70% {transform: translateY(0);}\n 100% {transform: translateY(0);}\n }\n .horizontal-buttons-stack-container {\n width: max-content;\n position: relative;\n height: 51px;\n }\n .button {\n display: inline-flex;\n position: absolute;\n box-sizing: border-box !important;\n border: 1px solid var(--primary-text-color);\n align-items: center;\n height: 50px;\n line-height: 16px;\n white-space: nowrap;\n width: auto;\n border-radius: 25px;\n z-index: 1;\n padding: 0 16px;\n background: none;\n transition: background-color 1s, border 1s, transform 1s;\n color: var(--primary-text-color);\n }\n .highlight {\n animation: pulse 1.4s infinite alternate;\n }\n @keyframes pulse {\n 0% {\n filter: brightness(0.7);\n }\n 100% {\n filter: brightness(1.3);\n }\n }\n .icon {\n height: 24px;\n }\n .card-content {\n width: calc(100% + 18px);\n box-sizing: border-box !important;\n margin: 0 -36px !important;\n padding: 0 36px !important;\n overflow: scroll !important;\n -ms-overflow-style: none;\n scrollbar-width: none;\n -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) calc(0% + 28px), rgba(0, 0, 0, 1) calc(100% - 28px), transparent 100%);\n /* mask-image: linear-gradient(90deg, transparent 2%, rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 1) 96%, transparent 100%); */\n /* -webkit-mask-image: linear-gradient(90deg, transparent 2%, rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 1) 96%, transparent 100%); */\n }\n .horizontal-buttons-stack::before {\n content: '';\n position: absolute;\n top: -32px;\n left: -100%;\n display: block;\n background: linear-gradient(0deg, var(--background-color, var(--primary-background-color)) 50%, rgba(79, 69, 87, 0));\n width: 200%;\n height: 100px;\n }\n .card-content::-webkit-scrollbar {\n display: none;\n }\n @media only screen and (min-width: 600px) {\n .card-content {\n position: fixed;\n width: ${p} !important;\n left: calc(50% - ${h[1]/2}${h[2]});\n margin-left: -13px !important;\n padding: 0 26px !important;\n }\n }\n @media only screen and (min-width: 870px) {\n .card-content {\n position: fixed;\n width: calc(${p}${"%"!==h[2]||u?"":" - var(--mdc-drawer-width)"}) !important;\n left: calc(50% - ${h[1]/2}${h[2]} + ${!0===u?"0px":"var(--mdc-drawer-width) "+("%"===h[2]?"":"/ 2")});\n margin-left: -13px !important;\n padding: 0 26px !important;\n }\n }\n .horizontal-buttons-stack.editor {\n position: relative;\n bottom: 0;\n left: 0;\n overflow: hidden;\n }\n .horizontal-buttons-stack.editor::before {\n top: -32px;\n left: -100%;\n background: none;\n width: 100%;\n height: 0;\n }\n .horizontal-buttons-stack-container.editor > .button {\n transition: background-color 0s, border 0s, transform 0s;\n }\n .horizontal-buttons-stack-container.editor {\n margin-left: 1px;\n }\n .horizontal-buttons-stack.editor > .card-content {\n position: relative;\n width: calc(100% + 26px) !important;\n left: -26px;\n margin: 0 !important;\n padding: 0;\n }\n `;!window.hasAnimated&&_&&(e.content.style.animation="from-bottom 1.3s forwards",window.hasAnimated=!0,setTimeout((()=>{e.content.style.animation="none"}),1500)),(0,o.L2)(t,e,U,s)}const k=Object.getPrototypeOf(customElements.get("ha-panel-lovelace")),C=k.prototype.html,$=k.prototype.css;let S;!function(){if(!window.eventAdded){function e(){let e=0;const n=setInterval((()=>{e<10?(window.dispatchEvent(t),e++):clearInterval(n)}),100)}window.eventAdded=!0,window.popUpInitialized=!1,["location-changed","connection-status","popstate"].forEach((t=>{window.addEventListener(t,e)}),{passive:!0});const n=()=>{window.dispatchEvent(t)};window.addEventListener("popUpInitialized",n,{passive:!0})}}();class E extends HTMLElement{set hass(e){var t;switch(this._hass=e,S=n(),this.editor=S,async function(e){if(!window.resourcesChecked){window.resourcesChecked=!0;try{let t=(await e.callWS({type:"lovelace/resources"})).find((e=>e.url.includes("bubble-pop-up.js")));async function n(e){let t=await e.callWS({type:"lovelace/resources"}),n=t.findIndex((e=>e.url.includes("bubble-card.js"))),o=null;if(-1!==n&&0!==n){o=t.splice(n,1)[0];for(let n of t)await e.callWS({type:"lovelace/resources/delete",resource_id:n.id});o&&-1===(await e.callWS({type:"lovelace/resources"})).findIndex((e=>e.url.includes("bubble-card.js")))&&await e.callWS({type:"lovelace/resources/create",res_type:o.type,url:o.url});for(let n of t)await e.callWS({type:"lovelace/resources/create",res_type:n.type,url:n.url})}}t&&await e.callWS({type:"lovelace/resources/delete",resource_id:t.id}),n(e)}catch(o){throw o}}}(e),(t=this).content||(t.attachShadow({mode:"open"}),t.shadowRoot.innerHTML='\n \n
\n
\n \n ',t.card=t.shadowRoot.querySelector("ha-card"),t.content=t.shadowRoot.querySelector("div")),this.config.card_type){case"pop-up":!function(e){const t=e._hass,n=e.editor,a=e.config;if(!t)return;let l,c,d,p,{customStyles:h,entityId:g,icon:m,name:b,widthDesktop:f,widthDesktopDivided:_,isSidebarHidden:v,state:x,stateChanged:k,stateOn:C,formatedState:$,riseAnimation:S,marginCenter:E,popUpOpen:O,rgbaColor:A,rgbColor:L,bgOpacity:I,shadowOpacity:T,bgBlur:D,iconColorOpacity:V,iconColor:M,iconFilter:z,iconStyles:B,haStyle:U,themeBgColor:q,color:H}=w(e,a,t),W=a.auto_close||!1,F=a.hash,Y=a.trigger_entity?a.trigger_entity:"",R=a.trigger_state?a.trigger_state:"",P=!!a.trigger_close&&a.trigger_close,N=a.entity?"flex":"none",j=a.text||"",X=a.state,G=a.close_on_click||!1,K=a.margin_top_mobile&&"0"!==a.margin_top_mobile?a.margin_top_mobile:"0px",Z=a.margin_top_desktop&&"0"!==a.margin_top_desktop?a.margin_top_desktop:"0px";if(x=X&&t.states[X]?t.states[X].state:"",e.errorTriggered)return;function J(){history.replaceState(null,null,location.href.split("#")[0]),i(window,"location-changed",!0)}function Q(e){window.hash===F&&ee();const t=e.composedPath();!t||t.some((e=>"HA-MORE-INFO-DIALOG"===e.nodeName))||t.some((e=>"root"===e.id&&!e.classList.contains("close-pop-up")))||setTimeout((function(){window.hash===F&&(J(),localStorage.setItem("isManuallyClosed_"+F,!0))}),100)}function ee(){clearTimeout(d),W>0&&(d=setTimeout(J,W))}function te(){s(t,g)}function ne(e){"Escape"===e.key&&(J(),localStorage.setItem("isManuallyClosed_"+F,!0))}function oe(e){window.hash===F&&ee(),l=e.touches[0].clientY,c=l}function ie(e){e.touches[0].clientY-l>300&&e.touches[0].clientY>c&&(J(),localStorage.setItem("isManuallyClosed_"+F,!0)),c=e.touches[0].clientY}function ae(){n||(window.hash=location.hash.split("?")[0],window.hash===F&&O!==F+!0?(e.popUp.classList.remove("close-pop-up"),e.popUp.classList.add("open-pop-up"),e.content.querySelector(".power-button").addEventListener("click",te,{passive:!0}),window.addEventListener("keydown",ne,{passive:!0}),e.popUp.addEventListener("touchstart",oe,{passive:!0}),e.popUp.addEventListener("touchmove",ie,{passive:!0}),document.body.style.overflow="hidden",re(e.popUp,!1),ee(),G&&(e.popUp.addEventListener("mouseup",J,{passive:!0}),e.popUp.addEventListener("touchend",J,{passive:!0})),O=F+!0,setTimeout((function(){window.addEventListener("click",Q,{passive:!0})}),10)):window.hash!==F&&O!==F+!1&&(e.popUp.classList.remove("open-pop-up"),e.popUp.classList.add("close-pop-up"),e.content.querySelector(".power-button").removeEventListener("click",te),window.removeEventListener("keydown",ne),window.removeEventListener("click",Q),e.popUp.removeEventListener("touchstart",oe),e.popUp.removeEventListener("touchmove",ie),document.body.style.overflow="",clearTimeout(d),G&&(e.popUp.removeEventListener("mouseup",J),e.popUp.removeEventListener("touchend",J)),O=F+!1,setTimeout((function(){re(e.popUp,!0)}),320)))}function re(e,t){for(var n=e.querySelectorAll("video"),o=0;o0&&!n[o].paused&&!n[o].ended&&n[o].readyState>n[o].HAVE_CURRENT_DATA;t&&i?n[o].pause():t||i||(n[o].play(),n[o].currentTime>0&&(n[o].currentTime=1e4))}var a=e.querySelectorAll("*");for(o=0;o :first-child::after {\n content: '';\n display: block;\n position: sticky;\n top: 0;\n left: -50px;\n margin: -70px 0 -36px -36px;\n overflow: visible;\n width: 200%;\n height: 100px;\n background: linear-gradient(0deg, ${p} 0%, ${A} 80%);\n z-index: 0;\n } \n #root::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n }\n #root > :first-child {\n position: sticky;\n top: 0;\n z-index: 1;\n background: none !important;\n overflow: visible;\n }\n #root.open-pop-up {\n transform: translateY(-120%);\n }\n #root.open-pop-up > * {\n /* Block child items to overflow and if they do clip them */\n /*max-width: calc(100vw - 38px);*/\n max-width: 100% !important;\n /*overflow-x: clip;*/\n }\n #root.close-pop-up { \n transform: translateY(-20%);\n box-shadow: none;\n }\n @media only screen and (min-width: 600px) {\n #root {\n top: calc(120% + ${Z} + var(--header-height));\n width: calc(${f}${"%"!==_[2]||v?"":" - var(--mdc-drawer-width)"}) !important;\n left: calc(50% - ${_[1]/2}${_[2]});\n margin: 0 !important;\n }\n } \n @media only screen and (min-width: 870px) {\n #root {\n left: calc(50% - ${_[1]/2}${_[2]} + ${v?"0px":"var(--mdc-drawer-width) "+("%"===_[2]?"":"/ 2")});\n }\n } \n #root.editor {\n position: inherit !important;\n width: 100% !important;\n padding: 18px !important;\n backdrop-filter: none !important;\n }\n `,s=`\n ${B}\n\n ha-card {\n margin-top: 0 !important;\n }\n #header-container {\n display: inline-flex;\n ${m||b||g||x||j?"":"flex-direction: row-reverse;"}\n height: 50px;\n width: 100%;\n margin: 0;\n padding: 0;\n }\n #header-container > div {\n display: ${m||b||g||x||j?"inline-flex":"none"};\n align-items: center;\n position: relative;\n padding-right: 6px;\n z-index: 1;\n flex-grow: 1;\n background-color: ${g?e.rgbColorOpacity:"var(--background-color,var(--secondary-background-color))"};\n transition: background 1s;\n border-radius: 25px;\n margin-right: 14px;\n backdrop-filter: blur(14px);\n -webkit-backdrop-filter: blur(14px);\n }\n #header-container h2 {\n display: inline-flex;\n margin: 0 18px 0 0;\n padding: 4px;\n z-index: 1;\n font-size: 18px;\n }\n #header-container p {\n display: inline-flex;\n font-size: 16px;\n min-width: fit-content ;\n }\n .power-button {\n cursor: pointer; \n flex-grow: inherit; \n width: 24px;\n height: 24px;\n border-radius: 12px;\n margin: 0 10px;\n background: none !important;\n justify-content: flex-end;\n background-color: var(--background-color,var(--secondary-background-color));\n }\n .close-pop-up {\n height: 50px;\n width: 50px;\n border: none;\n border-radius: 50%;\n z-index: 1;\n background: var(--background-color,var(--secondary-background-color));\n color: var(--primary-text-color);\n flex-shrink: 0;\n cursor: pointer;\n }\n `;(0,o.L2)(t,e,r,h,x,g,"","",i),(0,o.L2)(t,e,s,h,x,g,k)}e.initStyleAdded||e.popUp||n||(e.card.style.marginTop="4000px",e.initStyleAdded=!0);const le=setTimeout((()=>{const t=new Event("popUpInitialized");e.element||(e.element=e.getRootNode().querySelector("#root")),e.element&&(!e.popUp||k||n&&!e.editorModeAdded)?(e.popUp=e.element,n&&e.popUp&&!e.editorModeAdded?(e.popUp.classList.add("editor"),e.popUp.classList.remove("close-pop-up","open-pop-up"),se(),e.editorModeAdded=!0):se(),clearTimeout(le),window.dispatchEvent(t)):!n&&e.popUp&&e.editorModeAdded&&(e.popUp.classList.remove("editor"),se(),e.editorModeAdded=!1)}),0);e.popUp&&Y&&function(t){if(!t||t===u)return;u=t,null===localStorage.getItem("previousTriggerState_"+F)&&localStorage.setItem("previousTriggerState_"+F,""),null===localStorage.getItem("isManuallyClosed_"+F)&&localStorage.setItem("isManuallyClosed_"+F,"false"),null===localStorage.getItem("isTriggered_"+F)&&localStorage.setItem("isTriggered_"+F,"false");let n=localStorage.getItem("previousTriggerState_"+F),o="true"===localStorage.getItem("isManuallyClosed_"+F),i="true"===localStorage.getItem("isTriggered_"+F);t!==R||null!==n||i||(r(0,F),i=!0,localStorage.setItem("isTriggered_"+F,i)),t!==n&&(o=!1,localStorage.setItem("previousTriggerState_"+F,t),localStorage.setItem("isManuallyClosed_"+F,o)),t!==R||o?t!==R&&P&&e.popUp.classList.contains("open-pop-up")&&i&&!o&&(J(),i=!1,o=!0,localStorage.setItem("isManuallyClosed_"+F,o),localStorage.setItem("isTriggered_"+F,i)):(r(0,F),i=!0,localStorage.setItem("isTriggered_"+F,i))}(t.states[Y].state)}(this);break;case"horizontal-buttons-stack":x(this);break;case"button":!function(e){const t=e._hass,n=e.editor;let{customStyles:i,entityId:r,icon:l,name:c,widthDesktop:d,widthDesktopDivided:p,isSidebarHidden:h,state:u,stateChanged:g,stateOn:m,formatedState:b,riseAnimation:f,marginCenter:_,popUpOpen:v,rgbaColor:x,rgbColor:k,bgOpacity:C,shadowOpacity:$,bgBlur:S,iconColorOpacity:E,iconColor:O,iconFilter:A,iconStyles:L,haStyle:I,themeBgColor:T,color:D}=w(e,e.config,t);b=r&&(g||n)?t.formatEntityState(t.states[r]):"";let V=e.config.button_type||"switch",M=!!e.config.show_state&&e.config.show_state,z=r?t.states[r].attributes.brightness||0:"",B=r?t.states[r].attributes.volume_level||0:"",U=!1,q=z,H=B,W=0,F=0,Y=0,R=!1,P=null;if(e.config.service_on,e.config.service_off,!e.buttonAdded){const t=document.createElement("div");t.setAttribute("class","button-container"),e.content.appendChild(t)}const N=document.createElement("div");N.setAttribute("class","icon-container"),e.iconContainer=N;const j=document.createElement("div");j.setAttribute("class","name-container");const X=document.createElement("div");X.setAttribute("class","switch-button");const G=document.createElement("div");G.setAttribute("class","range-slider");const K=document.createElement("div");if(K.setAttribute("class","range-fill"),!e.buttonContainer||n){if(n&&e.buttonContainer){for(;e.buttonContainer.firstChild;)e.buttonContainer.removeChild(e.buttonContainer.firstChild);e.eventAdded=!1,e.wasEditing=!0}e.buttonContainer=e.content.querySelector(".button-container"),"slider"!==V||e.buttonAdded&&!n?("switch"===V||"custom"===V||n)&&(e.buttonContainer.appendChild(X),X.appendChild(N),X.appendChild(j),e.switchButton=e.content.querySelector(".switch-button")):(e.buttonContainer.appendChild(G),G.appendChild(N),G.appendChild(j),G.appendChild(K),e.rangeFill=e.content.querySelector(".range-fill")),(0,o.IU)(e,r,l,N,n),j.innerHTML=`\n

${c}

\n ${M?`

${b}

`:""}\n `,e.buttonAdded=!0}function Z(e){a("success");let t=e.querySelector(".feedback-element");t||(t=document.createElement("div"),t.setAttribute("class","feedback-element"),e.appendChild(t)),t.style.animation="tap-feedback .5s",setTimeout((()=>{t.style.animation="none",e.removeChild(t)}),500)}function J(e){W=e.pageX||(e.touches?e.touches[0].pageX:0),F=e.pageY||(e.touches?e.touches[0].pageY:0),Y=G.value,e.target!==N&&e.target!==N.querySelector("ha-icon")&&(U=!0,document.addEventListener("mouseup",ee,{passive:!0}),document.addEventListener("touchend",ee,{passive:!0}),document.addEventListener("mousemove",Q,{passive:!0}),document.addEventListener("touchmove",Q,{passive:!0}),P=setTimeout((()=>{oe(e.pageX||e.touches[0].pageX),te(),P=null}),200))}function Q(e){const t=e.pageX||(e.touches?e.touches[0].pageX:0),n=e.pageY||(e.touches?e.touches[0].pageY:0);Math.abs(n-F)>Math.abs(t-W)?(clearTimeout(P),ee()):(document.removeEventListener("mousemove",Q),document.removeEventListener("touchmove",Q),document.addEventListener("mousemove",ne,{passive:!0}),document.addEventListener("touchmove",ne,{passive:!0}))}function ee(){U=!1,R=!1,te(),document.removeEventListener("mouseup",ee),document.removeEventListener("touchend",ee),document.removeEventListener("mousemove",ne),document.removeEventListener("touchmove",ne)}function te(){r.startsWith("light.")?(z=q,t.callService("light","turn_on",{entity_id:r,brightness:z})):r.startsWith("media_player.")&&(B=H,t.callService("media_player","volume_set",{entity_id:r,volume_level:B}))}function ne(e){const t=e.pageX||(e.touches?e.touches[0].pageX:0),n=e.pageY||(e.touches?e.touches[0].pageY:0);U&&Math.abs(t-W)>10?(a("light"),oe(t)):U&&Math.abs(n-F)>10&&(U=!1,G.value=Y)}function oe(e){const t=G.getBoundingClientRect(),n=Math.min(Math.max(e-t.left,0),t.width)/t.width;r.startsWith("light.")?q=Math.round(255*n):r.startsWith("media_player.")&&(H=n),K.style.transition="none",K.style.transform=`translateX(${100*n}%)`}M&&b&&(e.content.querySelector(".state").textContent=b),e.eventAdded||"switch"!==V?e.eventAdded||"slider"!==V?e.eventAdded||"custom"!==V||(X.addEventListener("click",(()=>Z(e.switchButton)),{passive:!0}),y(X,e.config),e.eventAdded=!0):(G.addEventListener("mousedown",J,{passive:!0}),G.addEventListener("touchstart",J,{passive:!0}),y(N,e.config),e.eventAdded=!0):(X.addEventListener("click",(()=>Z(e.switchButton)),{passive:!0}),X.addEventListener("click",(function(e){e.target!==N&&e.target!==N.querySelector("ha-icon")&&s(t,r)}),{passive:!0}),y(N,e.config),e.eventAdded=!0),e.isDragging||"slider"!==V||(e.rangeFill.style.transition="all .3s",r.startsWith("light.")?e.rangeFill.style.transform=`translateX(${z/255*100}%)`:r.startsWith("media_player.")&&(e.rangeFill.style.transform=`translateX(${100*B}%)`));const ie=`\n ha-card {\n margin-top: 0 !important;\n background: none !important;\n opacity: ${"unavailable"!==u?"1":"0.5"};\n }\n \n .button-container {\n position: relative;\n width: 100%;\n height: 50px;\n z-index: 0;\n background-color: var(--background-color-2,var(--secondary-background-color));\n border-radius: 25px;\n mask-image: radial-gradient(white, black);\n -webkit-mask-image: radial-gradient(white, black);\n -webkit-backface-visibility: hidden;\n -moz-backface-visibility: hidden;\n -webkit-transform: translateZ(0);\n overflow: hidden;\n }\n \n .switch-button,\n .range-slider {\n display: inline-flex;\n position: absolute;\n height: 100%;\n width: 100%;\n transition: background-color 1.5s;\n background-color: ${m&&["switch","custom"].includes(V)?"var(--accent-color)":"rgba(0,0,0,0)"};\n }\n\n .range-fill {\n z-index: -1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n background-color: ${E};\n width: 100%;\n left: -100%;\n }\n \n .switch-button {\n cursor: pointer !important;\n }\n \n .range-slider {\n cursor: ew-resize;\n }\n \n .name-container {\n position: relative;\n display: ${M?"block":"inline-flex"};\n margin-left: 4px;\n z-index: 1;\n font-weight: 600;\n align-items: center;\n line-height: ${M?"4px":"16px"};\n padding-right: 16px;\n }\n \n .state {\n font-size: 12px;\n opacity: 0.7;\n }\n \n .feedback-element {\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n width: 100%;\n height: 100%;\n background-color: rgb(0,0,0);\n }\n \n @keyframes tap-feedback {\n 0% {transform: translateX(-100%); opacity: 0;}\n 64% {transform: translateX(0); opacity: 0.1;}\n 100% {transform: translateX(100%); opacity: 0;}\n }\n\n ${L}\n `;(0,o.L2)(t,e,ie,i,u,r,g)}(this);break;case"separator":!function(e){const t=e._hass,n=e.editor,i=e.config;let{customStyles:a,entityId:r,icon:s,name:l,widthDesktop:c,widthDesktopDivided:d,isSidebarHidden:p,state:h,stateChanged:u,stateOn:g,formatedState:m,riseAnimation:b,marginCenter:f,popUpOpen:_,rgbaColor:v,rgbColor:y,bgOpacity:x,shadowOpacity:k,bgBlur:C,iconColorOpacity:$,iconColor:S,iconFilter:E,iconStyles:O,haStyle:A,themeBgColor:L,color:I}=w(e,i,t);if(!e.separatorAdded||n){if(n&&e.separatorContainer)for(;e.separatorContainer.firstChild;)e.separatorContainer.removeChild(e.separatorContainer.firstChild);e.separatorAdded||(e.separatorContainer=document.createElement("div"),e.separatorContainer.setAttribute("class","separator-container")),e.separatorContainer.innerHTML=`\n
\n \n

${l}

\n
\n
\n `,e.content.appendChild(e.separatorContainer),e.separatorAdded=!0}(0,o.L2)(t,e,"\n .separator-container {\n display: inline-flex;\n width: 100%;\n margin-top: 12px;\n }\n .separator-container div:first-child {\n display: inline-flex;\n max-width: calc(100% - 38px);\n }\n .separator-container div ha-icon {\n display: inline-flex;\n height: 24px;\n width: 24px;\n margin: 0 22px 0 8px;\n transform: translateY(-2px);\n }\n .separator-container div h4 {\n display: inline-flex;\n margin: 0 20px 0 0;\n font-size: 16px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .separator-container div:last-child {\n display: inline-flex; \n border-radius: 6px; \n opacity: 0.5; \n margin-left: 10px; \n flex-grow: 1; \n height: 6px; \n align-self: center; \n background-color: var(--background-color,var(--secondary-background-color));\n }\n ",a)}(this);break;case"cover":!function(e){const t=e._hass,n=e.editor,i=e.config;let{customStyles:a,entityId:r,icon:s,name:l,widthDesktop:c,widthDesktopDivided:d,isSidebarHidden:p,state:h,stateChanged:u,stateOn:g,formatedState:m,riseAnimation:b,marginCenter:f,popUpOpen:_,rgbaColor:v,rgbColor:x,bgOpacity:k,shadowOpacity:C,bgBlur:$,iconColorOpacity:S,iconColor:E,iconFilter:O,iconStyles:A,haStyle:L,themeBgColor:I,color:T}=w(e,i,t);const D=i.icon_open?i.icon_open:"mdi:window-shutter-open",V=i.icon_close?i.icon_close:"mdi:window-shutter",M=i.open_service?i.open_service:"cover.open_cover",z=i.close_service?i.close_service:"cover.close_cover",B=i.stop_service?i.stop_service:"cover.stop_cover",U=i.icon_up?i.icon_up:"mdi:arrow-up",q=i.icon_down?i.icon_down:"mdi:arrow-down",H=!!e.config.show_state&&e.config.show_state;if(s="open"===t.states[i.entity].state?D:V,m=u?t.formatEntityState(t.states[r]):m||"",!e.coverAdded||n){if(n&&e.coverContainer)for(;e.coverContainer.firstChild;)e.coverContainer.removeChild(e.coverContainer.firstChild);e.coverContainer=document.createElement("div"),e.coverContainer.setAttribute("class","cover-container"),e.coverContainer.innerHTML=`\n
\n
\n
\n
\n

${l}

\n

\n
\n
\n
\n \n \n \n
\n `,e.content.appendChild(e.coverContainer);const o=e.coverContainer.querySelector(".open"),a=e.coverContainer.querySelector(".stop"),s=e.coverContainer.querySelector(".close");o.addEventListener("click",(()=>{t.callService(M.split(".")[0],M.split(".")[1],{entity_id:r})}),{passive:!0}),a.addEventListener("click",(()=>{t.callService(B.split(".")[0],B.split(".")[1],{entity_id:r})}),{passive:!0}),s.addEventListener("click",(()=>{t.callService(z.split(".")[0],z.split(".")[1],{entity_id:r})}),{passive:!0}),e.iconContainer=e.content.querySelector(".icon-container"),y(e.iconContainer,i),e.coverAdded=!0}e.iconContainer&&(u||n)&&(e.iconContainer.innerHTML=``,e.content.querySelector(".state").textContent=H?m:""),(0,o.L2)(t,e,"\n ha-card {\n margin-top: 0 !important;\n background: none !important;\n }\n \n .header-container {\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n }\n \n .cover-container {\n display: grid;\n }\n \n .icon-container {\n display: flex;\n margin: 0 !important;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n /*z-index: 1;*/\n width: 48px;\n height: 48px;\n margin: 6px;\n border-radius: 50%;\n background-color: var(--card-background-color,var(--ha-card-background));\n border: 6px solid var(--background-color-2,var(--secondary-background-color));\n box-sizing: border-box;\n }\n \n .name-container {\n font-weight: 600;\n margin-left: 10px;\n line-height: 4px;\n }\n \n .buttons-container {\n display: grid;\n align-self: center;\n grid-auto-flow: column;\n grid-gap: 18px; \n }\n \n .state {\n font-size: 12px;\n opacity: 0.7;\n }\n \n ha-icon {\n display: flex; \n height: 24px; \n width: 24px; \n color: var(--primary-text-color);\n }\n \n .button {\n display: flex;\n background: var(--background-color-2,var(--secondary-background-color));\n height: 42px;\n border-radius: 32px;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: none;\n }\n ",a,h,r)}(this);break;case"empty-column":!function(e){if(!e.emptyCollumnAdded){const t=document.createElement("div");t.setAttribute("class","empty-column"),t.innerHTML='\n
\n ',e.content.appendChild(t),e.emptyColumnAdded=!0}}(this)}window.columnFix||(window.columnFix=this.config.column_fix)}setConfig(e){if("pop-up"===e.card_type){if(!e.hash)throw new Error("You need to define an hash. Please note that this card must be placed inside a vertical_stack to work as a pop-up.")}else if("horizontal-buttons-stack"===e.card_type){var t={};for(var n in e)if(n.match(/^\d+_icon$/)){var o=n.replace("_icon","_link");if(void 0===e[o])throw new Error("You need to define "+o);if(t[e[o]])throw new Error("You can't use "+e[o]+" twice");t[e[o]]=!0}}else if(("button"===e.card_type||"cover"===e.card_type)&&!e.entity)throw new Error("You need to define an entity");if(window.entityError)throw new Error("You need to define a valid entity");this.config=e}getCardSize(){return window.columnFix?0:-1}static getConfigElement(){return document.createElement("bubble-card-editor")}}customElements.define("bubble-card",E),customElements.define("bubble-card-editor",class extends k{setConfig(e){this._config={...e}}static get properties(){return{hass:{},_config:{}}}get _card_type(){return this._config.card_type||""}get _button_type(){return this._config.button_type||"switch"}get _entity(){return this._config.entity||""}get _name(){return this._config.name||""}get _icon(){return this._config.icon||""}get _state(){return this._config.state||""}get _text(){return this._config.text||""}get _hash(){return this._config.hash||"#pop-up-name"}get _trigger_entity(){return this._config.trigger_entity||""}get _trigger_state(){return this._config.trigger_state||""}get _trigger_close(){return this._config.trigger_close||!1}get _margin(){return this._config.margin||"7px"}get _margin_top_mobile(){return this._config.margin_top_mobile||"0px"}get _margin_top_desktop(){return this._config.margin_top_desktop||"0px"}get _width_desktop(){return this._config.width_desktop||"540px"}get _bg_color(){return this._config.bg_color||window.color}get _bg_opacity(){return void 0!==this._config.bg_opacity?this._config.bg_opacity:"88"}get _bg_blur(){return void 0!==this._config.bg_blur?this._config.bg_blur:"14"}get _shadow_opacity(){return void 0!==this._config.shadow_opacity?this._config.shadow_opacity:"0"}get _is_sidebar_hidden(){return this._config.is_sidebar_hidden||!1}get _rise_animation(){return void 0===this._config.rise_animation||this._config.rise_animation}get _auto_close(){return this._config.auto_close||""}get _close_on_click(){return this._config.close_on_click||!1}get _icon_open(){return this._config.icon_open||""}get _icon_close(){return this._config.icon_close||""}get _open_service(){return this._config.open_service||"cover.open_cover"}get _close_service(){return this._config.open_service||"cover.close_cover"}get _stop_service(){return this._config.open_service||"cover.stop_cover"}get _auto_order(){return this._config.auto_order||!1}get _highlightCurrentview(){return this._config.highlight_current_view||!1}get _show_state(){return this._config.show_state||!1}render(){if(!this.hass)return C``;if(!this.listsUpdated){const e=e=>({label:e,value:e});this.allEntitiesList=Object.keys(this.hass.states).map(e),this.lightList=Object.keys(this.hass.states).filter((e=>"light"===e.substr(0,e.indexOf(".")))).map(e),this.sensorList=Object.keys(this.hass.states).filter((e=>"sensor"===e.substr(0,e.indexOf(".")))).map(e),this.binarySensorList=Object.keys(this.hass.states).filter((e=>"binary_sensor"===e.substr(0,e.indexOf(".")))).map(e),this.coverList=Object.keys(this.hass.states).filter((e=>"cover"===e.substr(0,e.indexOf(".")))).map(e),this.cardTypeList=[{label:"Button",value:"button"},{label:"Cover",value:"cover"},{label:"Empty column",value:"empty-column"},{label:"Horizontal buttons stack",value:"horizontal-buttons-stack"},{label:"Pop-up",value:"pop-up"},{label:"Separator",value:"separator"}],this.buttonTypeList=[{label:"Switch",value:"switch"},{label:"Slider",value:"slider"}],this.listsUpdated=!0}const t=this.allEntitiesList,n=(this.lightList,this.sensorList,this.coverList),o=this.cardTypeList,i=this.buttonTypeList;if("pop-up"===this._config.card_type)return C`
${this.makeDropdown("Card type","card_type",o)}

Pop-up @@ -163,7 +163,7 @@ Set ‘Background blur’ to 0 if your pop-up animations are rendering at low FPS. ${this.makeVersion()}

- `;if("button"===this._config.card_type)return x` + `;if("button"===this._config.card_type)return C`
${this.makeDropdown("Card type","card_type",o)}

Button

@@ -191,7 +191,7 @@ ${this.makeDropdown("Optional - Icon","icon")} ${this.makeVersion()}
- `;if("separator"===this._config.card_type)return x` + `;if("separator"===this._config.card_type)return C`
${this.makeDropdown("Card type","card_type",o)}

Separator

@@ -206,7 +206,7 @@ ${this.makeDropdown("Icon","icon")} ${this.makeVersion()}
- `;if("horizontal-buttons-stack"===this._config.card_type){if(!this.buttonAdded&&this.shadowRoot.querySelector("#add-button")){this.buttonAdded=!0;const e=this.shadowRoot.querySelector("#add-button");for(this.buttonIndex=0;this._config[this.buttonIndex+1+"_link"];)this.buttonIndex++;e.addEventListener("click",(()=>{this.buttonIndex++;const t=e.style.opacity,n=e.innerText;e.style.opacity="0.6",e.style.transition="opacity 1s",e.innerText="Loading...",setTimeout((()=>{e.style.opacity=t,e.innerText=n}),5e3)}),{passive:!0})}return x` + `;if("horizontal-buttons-stack"===this._config.card_type){if(!this.buttonAdded&&this.shadowRoot.querySelector("#add-button")){this.buttonAdded=!0;const e=this.shadowRoot.querySelector("#add-button");for(this.buttonIndex=0;this._config[this.buttonIndex+1+"_link"];)this.buttonIndex++;e.addEventListener("click",(()=>{this.buttonIndex++;const t=e.style.opacity,n=e.innerText;e.style.opacity="0.6",e.style.transition="opacity 1s",e.innerText="Loading...",setTimeout((()=>{e.style.opacity=t,e.innerText=n}),5e3)}),{passive:!0})}return C`
${this.makeDropdown("Card type","card_type",o)}

Horizontal buttons stack

@@ -276,7 +276,7 @@ ${this.makeVersion()}
- `}return"cover"===this._config.card_type?x` + `}return"cover"===this._config.card_type?C`
${this.makeDropdown("Card type","card_type",o)}

Cover

@@ -328,19 +328,20 @@ ${this.makeDropdown("Optional - Arrow up icon","icon_up")} ${this.makeVersion()}
- `:"empty-column"===this._config.card_type?x` + `:"empty-column"===this._config.card_type?C`
${this.makeDropdown("Card type","card_type",o)}

Empty column

Just an empty card to fill any empty column. ${this.makeVersion()}
- `:this._config.card_type?void 0:x` + `:this._config.card_type?void 0:C`
${this.makeDropdown("Card type","card_type",o)} You need to add a card type first.

The Bubble Card ${e} changelog is available here. +

Column fix: If you experience some issues with your dashboard layout, such as empty columns or misaligned cards. You can apply a fix that restores the behavior of the previous versions by adding column_fix: true in YAML to the first Bubble Card on your dashboard. Then refresh the page.

Almost everything is available in the GUI editor, but in the YAML editor you can add your own custom styles, create custom buttons or modify the tap actions of all cards. You can find more details on my GitHub page.

@@ -352,7 +353,7 @@
${this.makeVersion()} - `}makeDropdown(e,t,n){return this.hass,e.includes("icon")||e.includes("Icon")?x` + `}makeDropdown(e,t,n){return this.hass,e.includes("icon")||e.includes("Icon")?C`
- `:x` + `:C`
- `}makeButton(){let e=[];for(let t=1;t<=this.buttonIndex;t++)e.push(x` + `}makeButton(){let e=[];for(let t=1;t<=this.buttonIndex;t++)e.push(C`
this.removeButton(t)}> @@ -417,7 +418,7 @@ @value-changed="${this._valueChanged}" >
- `);return e}makeVersion(){return x` + `);return e}makeVersion(){return C`

{"use strict";var __webpack_modules__={946:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{G:()=>getIconStyles,IU:()=>createIcon,L2:()=>addStyles,_k:()=>convertToRGBA,mk:()=>getIconColor,wW:()=>isColorCloseToWhite});let timeouts={},idCounter=0;const addStyles=function(hass,context,styles,customStyles,state,entityId,stateChanged,path="",element=context.content){const id=idCounter++,key=id+styles,executeStyles=()=>{const customStylesEval=customStyles?eval("`"+customStyles+"`"):"";let styleAddedKey=styles+"Added";if(!context[styleAddedKey]||context.previousStyle!==customStylesEval||stateChanged||context.previousConfig!==context.config){if(!context[styleAddedKey]){if(context.styleElement=element.querySelector("style"),!context.styleElement){context.styleElement=document.createElement("style");const e=path?element.querySelector(path):element;e?.appendChild(context.styleElement)}context[styleAddedKey]=!0}const e=document.createElement("style");e.innerHTML=customStylesEval+styles,context.styleElement.parentNode.insertBefore(e,context.styleElement.nextSibling),context.styleElement.parentNode.removeChild(context.styleElement),context.styleElement=e,context.previousStyle=customStylesEval,context.previousConfig=context.config}};timeouts[key]?clearTimeout(timeouts[key]):executeStyles(),timeouts[key]=setTimeout(executeStyles,500)};function createIcon(e,t,n,o,i){let a=e._hass,r=!(!t||!a.states[t].attributes)&&a.states[t].attributes;e.imageUrl=!!r.entity_picture&&r.entity_picture,updateIcon(e,a,t,n,o),i||setInterval((()=>{a=e._hass,t&&a.states[t]&&(e.currentEntityPicture=a.states[t].attributes.entity_picture,e.currentEntityPicture!==e.previousEntityPicture&&(e.imageUrl=e.currentEntityPicture,updateIcon(e,a,t,n,o),e.previousEntityPicture=e.currentEntityPicture))}),1e3)}function updateIcon(e,t,n,o,i){for(;i.firstChild;)i.removeChild(i.firstChild);let a=e.config.icon&&e.config.icon.includes("/")?e.config.icon:e.imageUrl?e.imageUrl:"";if(a&&(r=t.states[n].state,n.startsWith("media_player.")&&!["off","unknown","idle",void 0].includes(r)||!n.startsWith("media_player."))){const e=document.createElement("div");e.setAttribute("class","entity-picture"),e.setAttribute("alt","Icon"),i&&(i.appendChild(e),i.style.background="center / cover no-repeat url("+a+"), var(--card-background-color,var(--ha-card-background))")}else{const e=document.createElement("ha-icon");e.setAttribute("icon",o),e.setAttribute("class","icon"),i&&i.appendChild(e)}var r}function isColorCloseToWhite(e){let t=[220,220,190];for(let n=0;n<3;n++)if(e[n]{for(var n in t)__webpack_require__.o(t,n)&&!__webpack_require__.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var __webpack_exports__={};(()=>{let e="v1.6.3";var t=__webpack_require__(946);const n=(e,t,n,o)=>{o=o||{},n=null==n?{}:n;const i=new Event(t,{bubbles:void 0===o.bubbles||o.bubbles,cancelable:Boolean(o.cancelable),composed:void 0===o.composed||o.composed});return i.detail=n,e.dispatchEvent(i),i},o=(e,t,o=!1)=>{o?history.replaceState(null,"",t):history.pushState(null,"",t),n(window,"location-changed",{replace:o})},i=300;let a,r,s,l,d,c=null,p=0,h=0;class u{constructor(e,t,n){this.element=e,this.config=t,this.sendActionEvent=n,this.holdDuration=300,this.holdTimeout=null,this.tapTimeout=null,this.lastTap=0,this.holdTriggered=!1}handleStart(){this.holdTriggered=!1,this.holdTimeout=setTimeout((()=>{this.sendActionEvent(this.element,this.config,"hold"),this.holdTriggered=!0}),this.holdDuration)}handleEnd(e){clearTimeout(this.holdTimeout);let t=(new Date).getTime(),n=t-this.lastTap;n0?(clearTimeout(this.tapTimeout),this.sendActionEvent(this.element,this.config,"double_tap")):this.holdTriggered||(this.tapTimeout=setTimeout((()=>{this.sendActionEvent(this.element,this.config,"tap")}),this.holdDuration)),this.lastTap=t,this.holdTriggered=!1}handleCancel(){clearTimeout(this.holdTimeout),this.holdTriggered=!1}}function g(e,t,n){const o=Date.now();if("tap"===n&&o-h"HA-MORE-INFO-DIALOG"===e.nodeName))||t.some((e=>"root"===e.id&&!e.classList.contains("close-pop-up")))||$!==B+!0||setTimeout((function(){window.hash===B&&document.body.contains(e.target)&&($=B+!1,Q(),localStorage.setItem("isManuallyClosed_"+B,!0))}),0)}function Q(){history.replaceState(null,null,location.href.split("#")[0]),n(window,"location-changed",!0)}function Z(){clearTimeout(d),F>0&&(d=setTimeout(Q,F))}function ee(){!function(e,t){e.callService("homeassistant","toggle",{entity_id:t})}(i,h)}function te(e){"Escape"===e.key&&($=B+!1,Q(),localStorage.setItem("isManuallyClosed_"+B,!0))}function ne(e){window.hash===B&&Z(),s=e.touches[0].clientY,l=s}function oe(e){e.touches[0].clientY-s>300&&e.touches[0].clientY>l&&($=B+!1,Q(),localStorage.setItem("isManuallyClosed_"+B,!0)),l=e.touches[0].clientY}function ie(){a||(window.hash=location.hash.split("?")[0],window.hash===B&&$!==B+!0?(e.popUp.classList.remove("close-pop-up"),e.popUp.classList.add("open-pop-up"),e.content.querySelector(".power-button").addEventListener("click",ee,{passive:!0}),window.addEventListener("keydown",te,{passive:!0}),e.popUp.addEventListener("touchstart",ne,{passive:!0}),e.popUp.addEventListener("touchmove",oe,{passive:!0}),document.body.style.overflow="hidden",ae(e.popUp,!1),Z(),G?(e.popUp.addEventListener("mouseup",Q,{passive:!0}),e.popUp.addEventListener("touchend",Q,{passive:!0})):window.addEventListener("click",X,{passive:!0}),e.popUpOpen=B+!0,setTimeout((function(){window.justOpened=!0}),10)):window.hash!==B&&$!==B+!1&&(window.justOpened=!1,e.popUp.classList.remove("open-pop-up"),e.popUp.classList.add("close-pop-up"),e.content.querySelector(".power-button").removeEventListener("click",ee),window.removeEventListener("keydown",te),e.popUp.removeEventListener("touchstart",ne),e.popUp.removeEventListener("touchmove",oe),document.body.style.overflow="",clearTimeout(d),G?(e.popUp.removeEventListener("mouseup",Q),e.popUp.removeEventListener("touchend",Q)):window.removeEventListener("click",X),e.popUpOpen=B+!1,setTimeout((function(){ae(e.popUp,!0)}),320)))}function ae(e,t){for(var n=e.querySelectorAll("video"),o=0;o0&&!n[o].paused&&!n[o].ended&&n[o].readyState>n[o].HAVE_CURRENT_DATA;t&&i?n[o].pause():t||i||(n[o].play(),n[o].currentTime>0&&(n[o].currentTime=1e4))}var a=e.querySelectorAll("*");for(o=0;oi.handleEnd(e)),{passive:!0}),e.addEventListener("touchcancel",i.handleCancel.bind(i),{passive:!0})):(e.addEventListener("mousedown",i.handleStart.bind(i),{passive:!0}),e.addEventListener("mouseup",(e=>i.handleEnd(e)),{passive:!0}),e.addEventListener("mouseout",i.handleCancel.bind(i),{passive:!0}))}(e.iconContainer,r),e.h2=document.createElement("h2"),e.h2.textContent=_,e.div.appendChild(e.h2),e.p=document.createElement("p"),e.p.textContent=C,e.div.appendChild(e.p),e.haIcon2=document.createElement("ha-icon"),e.haIcon2.setAttribute("class","power-button"),e.haIcon2.setAttribute("icon","mdi:power"),e.haIcon2.setAttribute("style",`display: ${H};`),e.div.appendChild(e.haIcon2),e.button=document.createElement("button"),e.button.setAttribute("class","close-pop-up"),e.button.onclick=function(){Q(),localStorage.setItem("isManuallyClosed_"+B,!0)},e.headerContainer.appendChild(e.button),e.haIcon3=document.createElement("ha-icon"),e.haIcon3.setAttribute("icon","mdi:close"),e.button.appendChild(e.haIcon3),e.content.appendChild(e.headerContainer),e.header=e.div,e.headerAdded=!0),function(){if(h){const n=i.states[h].attributes.rgb_color;e.rgbColor=n?(0,t.wW)(n)?"rgb(255,220,200)":`rgb(${n})`:k?h.startsWith("light.")?"rgba(255,220,200, 0.5)":"var(--accent-color)":"rgba(255, 255, 255, 1",e.rgbColorOpacity=n?(0,t.wW)(n)?"rgba(255,220,200, 0.5)":`rgba(${n}, 0.5)`:h&&k?h.startsWith("light.")?"rgba(255,220,200, 0.5)":"var(--accent-color)":"var(--background-color,var(--secondary-background-color))",c=(0,t._k)(P,0),e.iconFilter=n?(0,t.wW)(n)?"none":"brightness(1.1)":"none"}else c=(0,t._k)(P,0)}(),e.eventAdded||a||(window["checkHashRef_"+B]=ie,window.addEventListener("urlChanged",window["checkHashRef_"+B],{passive:!0}),e.eventAdded=!0);const o=` \n ha-card {\n margin-top: 0 !important;\n background: none !important;\n border: none !important;\n }\n .card-content {\n width: 100% !important;\n padding: 0 !important;\n }\n #root {\n \ttransition: transform .36s !important;\n position: fixed !important;\n margin: 0 -${E}; /* 7px */\n width: 100%;\n ${r.bg_color||r.bg_opacity?"--bubble-pop-up-background-custom: "+T:""};\n background-color: var(--bubble-pop-up-background-custom, var(--bubble-pop-up-background));\n box-shadow: 0px 0px 50px rgba(0,0,0,${A/100});\n backdrop-filter: blur(${L}px);\n -webkit-backdrop-filter: blur(${L}px);\n border-radius: 42px;\n box-sizing: border-box;\n top: calc(120% + ${K} + var(--header-height));\n grid-gap: 12px !important;\n gap: 12px !important;\n grid-auto-rows: min-content;\n padding: 18px 18px 220px 18px !important;\n height: 100% !important;\n -ms-overflow-style: none; /* for Internet Explorer, Edge */\n scrollbar-width: none; /* for Firefox */\n overflow-y: auto; \n overflow-x: hidden; \n z-index: 1 !important; /* Higher value hide the more-info panel */\n /* For older Safari but not working with Firefox */\n /* display: grid !important; */ \n }\n #root.hidden {\n \tdisplay: none !important;\n }\n #root > :first-child::after {\n content: '';\n display: block;\n position: sticky;\n top: 0;\n left: -50px;\n margin: -70px 0 -36px -36px;\n overflow: visible;\n width: 200%;\n height: 100px;\n background: linear-gradient(0deg, ${c} 0%, ${T} 80%);\n z-index: 0;\n } \n #root::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n }\n #root > :first-child {\n position: sticky;\n top: 0;\n z-index: 1;\n background: none !important;\n overflow: visible;\n }\n #root.open-pop-up {\n transform: translateY(-120%);\n }\n #root.open-pop-up > * {\n /* Block child items to overflow and if they do clip them */\n /*max-width: calc(100vw - 38px);*/\n max-width: 100% !important;\n /*overflow-x: clip;*/\n }\n #root.close-pop-up { \n transform: translateY(-20%);\n box-shadow: none;\n }\n @media only screen and (min-width: 600px) {\n #root {\n top: calc(120% + ${J} + var(--header-height));\n width: calc(${f}${"%"!==v[2]||y?"":" - var(--mdc-drawer-width)"}) !important;\n left: calc(50% - ${v[1]/2}${v[2]});\n margin: 0 !important;\n }\n } \n @media only screen and (min-width: 870px) {\n #root {\n left: calc(50% - ${v[1]/2}${v[2]} + ${y?"0px":"var(--mdc-drawer-width) "+("%"===v[2]?"":"/ 2")});\n }\n } \n #root.editor {\n position: inherit !important;\n width: 100% !important;\n padding: 18px !important;\n backdrop-filter: none !important;\n }\n `,s=`\n ${q}\n\n ha-card {\n margin-top: 0 !important;\n }\n #header-container {\n display: inline-flex;\n ${b||_||h||w||j?"":"flex-direction: row-reverse;"}\n height: 50px;\n width: 100%;\n margin: 0;\n padding: 0;\n }\n #header-container > div {\n display: ${b||_||h||w||j?"inline-flex":"none"};\n align-items: center;\n position: relative;\n padding-right: 6px;\n z-index: 1;\n flex-grow: 1;\n background-color: ${h?e.rgbColorOpacity:"var(--background-color,var(--secondary-background-color))"};\n transition: background 1s;\n border-radius: 25px;\n margin-right: 14px;\n backdrop-filter: blur(14px);\n -webkit-backdrop-filter: blur(14px);\n }\n #header-container h2 {\n display: inline-flex;\n margin: 0 18px 0 0;\n padding: 4px;\n z-index: 1;\n font-size: 18px;\n }\n #header-container p {\n display: inline-flex;\n font-size: 16px;\n min-width: fit-content ;\n }\n .power-button {\n cursor: pointer; \n flex-grow: inherit; \n width: 24px;\n height: 24px;\n border-radius: 12px;\n margin: 0 10px;\n background: none !important;\n justify-content: flex-end;\n background-color: var(--background-color,var(--secondary-background-color));\n }\n .close-pop-up {\n height: 50px;\n width: 50px;\n border: none;\n border-radius: 50%;\n z-index: 1;\n background: var(--background-color,var(--secondary-background-color));\n color: var(--primary-text-color);\n flex-shrink: 0;\n cursor: pointer;\n }\n `;(0,t.L2)(i,e,o,p,w,h,"","",n),(0,t.L2)(i,e,s,p,w,h,x)}e.initStyleAdded||e.popUp||a||(e.card.style.marginTop="4000px",e.initStyleAdded=!0);const se=setTimeout((()=>{if(e.element||(e.element=e.getRootNode().querySelector("#root")),e.element&&(!e.popUp||x||a&&!e.editorModeAdded)){if(e.popUp=e.element,a&&e.popUp&&!e.editorModeAdded)return e.popUp.classList.add("editor"),e.popUp.classList.remove("close-pop-up","open-pop-up","hide-pop-up"),e.editorModeAdded=!0,void re();re(),clearTimeout(se);const t=new Event("popUpInitialized");window.dispatchEvent(t)}else!a&&e.popUp&&e.editorModeAdded&&(e.popUp.classList.remove("editor"),e.editorModeAdded=!1)}),0);e.popUp&&R&&x&&(()=>{null===localStorage.getItem("previousTriggerState_"+B)&&localStorage.setItem("previousTriggerState_"+B,""),null===localStorage.getItem("isManuallyClosed_"+B)&&localStorage.setItem("isManuallyClosed_"+B,"false"),null===localStorage.getItem("isTriggered_"+B)&&localStorage.setItem("isTriggered_"+B,"false");let t=localStorage.getItem("previousTriggerState_"+B),n="true"===localStorage.getItem("isManuallyClosed_"+B),a="true"===localStorage.getItem("isTriggered_"+B);i.states[R].state!==W||null!==t||a||(o(0,B),a=!0,localStorage.setItem("isTriggered_"+B,a)),i.states[R].state!==t&&(n=!1,localStorage.setItem("previousTriggerState_"+B,i.states[R].state),localStorage.setItem("isManuallyClosed_"+B,n)),i.states[R].state!==W||n?i.states[R].state!==W&&N&&e.popUp.classList.contains("open-pop-up")&&a&&!n&&(Q(),$=B+!1,a=!1,n=!0,localStorage.setItem("isManuallyClosed_"+B,n),localStorage.setItem("isTriggered_"+B,a)):(o(0,B),a=!0,localStorage.setItem("isTriggered_"+B,a))})()}new MutationObserver(((t,o)=>{if(customElements.get("ha-panel-lovelace")){const t=Object.getPrototypeOf(customElements.get("ha-panel-lovelace")),i=t.prototype.html,a=t.prototype.css;class r extends t{setConfig(e){this._config={...e}}static get properties(){return{hass:{},_config:{}}}get _entity(){return this._config.entity||""}get _name(){return this._config.name||""}get _icon(){return this._config.icon||""}get _state(){return this._config.state||""}get _text(){return this._config.text||""}get _hash(){return this._config.hash||"#pop-up-name"}get _trigger_entity(){return this._config.trigger_entity||""}get _trigger_state(){return this._config.trigger_state||""}get _trigger_close(){return this._config.trigger_close||!1}get _margin(){return this._config.margin||"7px"}get _margin_top_mobile(){return this._config.margin_top_mobile||"0px"}get _margin_top_desktop(){return this._config.margin_top_desktop||"0px"}get _width_desktop(){return this._config.width_desktop||"540px"}get _bg_color(){return this._config.bg_color||window.color}get _bg_opacity(){return void 0!==this._config.bg_opacity?this._config.bg_opacity:"88"}get _bg_blur(){return void 0!==this._config.bg_blur?this._config.bg_blur:"14"}get _shadow_opacity(){return void 0!==this._config.shadow_opacity?this._config.shadow_opacity:"0"}get _is_sidebar_hidden(){return this._config.is_sidebar_hidden||!1}get _auto_close(){return this._config.auto_close||""}get _back_open(){return this._config.back_open||!1}render(){if(!this.hass)return i``;if(!this.listsUpdated){const e=e=>({label:e,value:e});this.allEntitiesList=Object.keys(this.hass.states).map(e),this.listsUpdated=!0}const e=this.allEntitiesList;return this.lightList,this.cardTypeList,this.buttonTypeList,i` +(()=>{"use strict";var __webpack_modules__={946:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{G:()=>getIconStyles,IU:()=>createIcon,L2:()=>addStyles,_k:()=>convertToRGBA,mk:()=>getIconColor,wW:()=>isColorCloseToWhite});let timeouts={},idCounter=0;const addStyles=function(hass,context,styles,customStyles,state,entityId,stateChanged,path="",element=context.content){const id=idCounter++,key=id+styles,executeStyles=()=>{const customStylesEval=customStyles?eval("`"+customStyles+"`"):"";let styleAddedKey=styles+"Added";if(!context[styleAddedKey]||context.previousStyle!==customStylesEval||stateChanged||context.previousConfig!==context.config){if(!context[styleAddedKey]){if(context.styleElement=element.querySelector("style"),!context.styleElement){context.styleElement=document.createElement("style");const e=path?element.querySelector(path):element;e?.appendChild(context.styleElement)}context[styleAddedKey]=!0}const e=document.createElement("style");e.innerHTML=customStylesEval+styles,context.styleElement.parentNode.insertBefore(e,context.styleElement.nextSibling),context.styleElement.parentNode.removeChild(context.styleElement),context.styleElement=e,context.previousStyle=customStylesEval,context.previousConfig=context.config}};timeouts[key]?clearTimeout(timeouts[key]):executeStyles(),timeouts[key]=setTimeout(executeStyles,500)};function createIcon(e,t,n,o,i){let a=e._hass,r=!(!t||!a.states[t].attributes)&&a.states[t].attributes;e.imageUrl=!!r.entity_picture&&r.entity_picture,updateIcon(e,a,t,n,o),i||setInterval((()=>{a=e._hass,t&&a.states[t]&&(e.currentEntityPicture=a.states[t].attributes.entity_picture,e.currentEntityPicture!==e.previousEntityPicture&&(e.imageUrl=e.currentEntityPicture,updateIcon(e,a,t,n,o),e.previousEntityPicture=e.currentEntityPicture))}),1e3)}function updateIcon(e,t,n,o,i){for(;i.firstChild;)i.removeChild(i.firstChild);let a=e.config.icon&&e.config.icon.includes("/")?e.config.icon:e.imageUrl?e.imageUrl:"";if(a&&(r=t.states[n].state,n.startsWith("media_player.")&&!["off","unknown","idle",void 0].includes(r)||!n.startsWith("media_player."))){const e=document.createElement("div");e.setAttribute("class","entity-picture"),e.setAttribute("alt","Icon"),i&&(i.appendChild(e),i.style.background="center / cover no-repeat url("+a+"), var(--card-background-color,var(--ha-card-background))")}else{const e=document.createElement("ha-icon");e.setAttribute("icon",o),e.setAttribute("class","icon"),i&&i.appendChild(e)}var r}function isColorCloseToWhite(e){let t=[220,220,190];for(let n=0;n<3;n++)if(e[n]{for(var n in t)__webpack_require__.o(t,n)&&!__webpack_require__.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var __webpack_exports__={};(()=>{let e="v1.6.4";const t=new Event("urlChanged");var n=__webpack_require__(946);const o=(e,t,n,o)=>{o=o||{},n=null==n?{}:n;const i=new Event(t,{bubbles:void 0===o.bubbles||o.bubbles,cancelable:Boolean(o.cancelable),composed:void 0===o.composed||o.composed});return i.detail=n,e.dispatchEvent(i),i},i=(e,t,n=!1)=>{n?history.replaceState(null,"",t):history.pushState(null,"",t),o(window,"location-changed",{replace:n})},a=300;let r,s,l,d,c,p,h=null,u=0,g=0;class m{constructor(e,t,n){this.element=e,this.config=t,this.sendActionEvent=n,this.holdDuration=300,this.holdTimeout=null,this.tapTimeout=null,this.lastTap=0,this.holdTriggered=!1}handleStart(){this.holdTriggered=!1,this.holdTimeout=setTimeout((()=>{this.sendActionEvent(this.element,this.config,"hold"),this.holdTriggered=!0}),this.holdDuration)}handleEnd(e){clearTimeout(this.holdTimeout);let t=(new Date).getTime(),n=t-this.lastTap;n0?(clearTimeout(this.tapTimeout),this.sendActionEvent(this.element,this.config,"double_tap")):this.holdTriggered||(this.tapTimeout=setTimeout((()=>{this.sendActionEvent(this.element,this.config,"tap")}),this.holdDuration)),this.lastTap=t,this.holdTriggered=!1}handleCancel(){clearTimeout(this.holdTimeout),this.holdTriggered=!1}}function b(e,t,n){const o=Date.now();if("tap"===n&&o-g"HA-MORE-INFO-DIALOG"===e.nodeName))||t.some((e=>"root"===e.id&&!e.classList.contains("close-pop-up")))||setTimeout((function(){window.hash===R&&(Q(),localStorage.setItem("isManuallyClosed_"+R,!0))}),100)}function ee(){clearTimeout(d),B>0&&(d=setTimeout(Q,B))}function te(){!function(e,t){e.callService("homeassistant","toggle",{entity_id:t})}(t,u)}function ne(e){"Escape"===e.key&&(Q(),localStorage.setItem("isManuallyClosed_"+R,!0))}function oe(e){window.hash===R&&ee(),s=e.touches[0].clientY,l=s}function ie(e){e.touches[0].clientY-s>300&&e.touches[0].clientY>l&&(Q(),localStorage.setItem("isManuallyClosed_"+R,!0)),l=e.touches[0].clientY}function ae(){a||(window.hash=location.hash.split("?")[0],window.hash===R&&T!==R+!0?(e.popUp.classList.remove("close-pop-up"),e.popUp.classList.add("open-pop-up"),e.content.querySelector(".power-button").addEventListener("click",te,{passive:!0}),window.addEventListener("keydown",ne,{passive:!0}),e.popUp.addEventListener("touchstart",oe,{passive:!0}),e.popUp.addEventListener("touchmove",ie,{passive:!0}),document.body.style.overflow="hidden",re(e.popUp,!1),ee(),K&&(e.popUp.addEventListener("mouseup",Q,{passive:!0}),e.popUp.addEventListener("touchend",Q,{passive:!0})),T=R+!0,setTimeout((function(){window.addEventListener("click",Z,{passive:!0})}),10)):window.hash!==R&&T!==R+!1&&(e.popUp.classList.remove("open-pop-up"),e.popUp.classList.add("close-pop-up"),e.content.querySelector(".power-button").removeEventListener("click",te),window.removeEventListener("keydown",ne),window.removeEventListener("click",Z),e.popUp.removeEventListener("touchstart",oe),e.popUp.removeEventListener("touchmove",ie),document.body.style.overflow="",clearTimeout(d),K&&(e.popUp.removeEventListener("mouseup",Q),e.popUp.removeEventListener("touchend",Q)),T=R+!1,setTimeout((function(){re(e.popUp,!0)}),320)))}function re(e,t){for(var n=e.querySelectorAll("video"),o=0;o0&&!n[o].paused&&!n[o].ended&&n[o].readyState>n[o].HAVE_CURRENT_DATA;t&&i?n[o].pause():t||i||(n[o].play(),n[o].currentTime>0&&(n[o].currentTime=1e4))}var a=e.querySelectorAll("*");for(o=0;oi.handleEnd(e)),{passive:!0}),e.addEventListener("touchcancel",i.handleCancel.bind(i),{passive:!0})):(e.addEventListener("mousedown",i.handleStart.bind(i),{passive:!0}),e.addEventListener("mouseup",(e=>i.handleEnd(e)),{passive:!0}),e.addEventListener("mouseout",i.handleCancel.bind(i),{passive:!0}))}(e.iconContainer,r),e.h2=document.createElement("h2"),e.h2.textContent=f,e.div.appendChild(e.h2),e.p=document.createElement("p"),e.p.textContent=S,e.div.appendChild(e.p),e.haIcon2=document.createElement("ha-icon"),e.haIcon2.setAttribute("class","power-button"),e.haIcon2.setAttribute("icon","mdi:power"),e.haIcon2.setAttribute("style",`display: ${j};`),e.div.appendChild(e.haIcon2),e.button=document.createElement("button"),e.button.setAttribute("class","close-pop-up"),e.button.onclick=function(){Q(),localStorage.setItem("isManuallyClosed_"+R,!0)},e.headerContainer.appendChild(e.button),e.haIcon3=document.createElement("ha-icon"),e.haIcon3.setAttribute("icon","mdi:close"),e.button.appendChild(e.haIcon3),e.content.appendChild(e.headerContainer),e.header=e.div,e.headerAdded=!0),function(){if(u){const o=t.states[u].attributes.rgb_color;e.rgbColor=o?(0,n.wW)(o)?"rgb(255,220,200)":`rgb(${o})`:C?u.startsWith("light.")?"rgba(255,220,200, 0.5)":"var(--accent-color)":"rgba(255, 255, 255, 1",e.rgbColorOpacity=o?(0,n.wW)(o)?"rgba(255,220,200, 0.5)":`rgba(${o}, 0.5)`:u&&C?u.startsWith("light.")?"rgba(255,220,200, 0.5)":"var(--accent-color)":"var(--background-color,var(--secondary-background-color))",p=(0,n._k)(F,0),e.iconFilter=o?(0,n.wW)(o)?"none":"brightness(1.1)":"none"}else p=(0,n._k)(F,0)}(),e.eventAdded||a?e.eventAdded&&a&&(window.removeEventListener("urlChanged",window["checkHashRef_"+R]),e.eventAdded=!1):(window["checkHashRef_"+R]=ae,window.addEventListener("urlChanged",window["checkHashRef_"+R],{passive:!0}),e.eventAdded=!0);const i=` \n ha-card {\n margin-top: 0 !important;\n background: none !important;\n border: none !important;\n }\n .card-content {\n width: 100% !important;\n padding: 0 !important;\n }\n #root {\n \ttransition: transform .36s !important;\n position: fixed !important;\n margin: 0 -${$}; /* 7px */\n width: 100%;\n ${r.bg_color||r.bg_opacity?"--bubble-pop-up-background-custom: "+I:""};\n background-color: var(--bubble-pop-up-background-custom, var(--bubble-pop-up-background));\n box-shadow: 0px 0px 50px rgba(0,0,0,${L/100});\n backdrop-filter: blur(${U}px);\n -webkit-backdrop-filter: blur(${U}px);\n border-radius: 42px;\n box-sizing: border-box;\n top: calc(120% + ${J} + var(--header-height));\n grid-gap: 12px !important;\n gap: 12px !important;\n grid-auto-rows: min-content;\n padding: 18px 18px 220px 18px !important;\n height: 100% !important;\n -ms-overflow-style: none; /* for Internet Explorer, Edge */\n scrollbar-width: none; /* for Firefox */\n overflow-y: auto; \n overflow-x: hidden; \n z-index: 1 !important; /* Higher value hide the more-info panel */\n /* For older Safari but not working with Firefox */\n /* display: grid !important; */ \n }\n #root.hidden {\n \tdisplay: none !important;\n }\n #root > :first-child::after {\n content: '';\n display: block;\n position: sticky;\n top: 0;\n left: -50px;\n margin: -70px 0 -36px -36px;\n overflow: visible;\n width: 200%;\n height: 100px;\n background: linear-gradient(0deg, ${p} 0%, ${I} 80%);\n z-index: 0;\n } \n #root::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n }\n #root > :first-child {\n position: sticky;\n top: 0;\n z-index: 1;\n background: none !important;\n overflow: visible;\n }\n #root.open-pop-up {\n transform: translateY(-120%);\n }\n #root.open-pop-up > * {\n /* Block child items to overflow and if they do clip them */\n /*max-width: calc(100vw - 38px);*/\n max-width: 100% !important;\n /*overflow-x: clip;*/\n }\n #root.close-pop-up { \n transform: translateY(-20%);\n box-shadow: none;\n }\n @media only screen and (min-width: 600px) {\n #root {\n top: calc(120% + ${X} + var(--header-height));\n width: calc(${v}${"%"!==y[2]||w?"":" - var(--mdc-drawer-width)"}) !important;\n left: calc(50% - ${y[1]/2}${y[2]});\n margin: 0 !important;\n }\n } \n @media only screen and (min-width: 870px) {\n #root {\n left: calc(50% - ${y[1]/2}${y[2]} + ${w?"0px":"var(--mdc-drawer-width) "+("%"===y[2]?"":"/ 2")});\n }\n } \n #root.editor {\n position: inherit !important;\n width: 100% !important;\n padding: 18px !important;\n backdrop-filter: none !important;\n }\n `,s=`\n ${D}\n\n ha-card {\n margin-top: 0 !important;\n }\n #header-container {\n display: inline-flex;\n ${g||f||u||x||Y?"":"flex-direction: row-reverse;"}\n height: 50px;\n width: 100%;\n margin: 0;\n padding: 0;\n }\n #header-container > div {\n display: ${g||f||u||x||Y?"inline-flex":"none"};\n align-items: center;\n position: relative;\n padding-right: 6px;\n z-index: 1;\n flex-grow: 1;\n background-color: ${u?e.rgbColorOpacity:"var(--background-color,var(--secondary-background-color))"};\n transition: background 1s;\n border-radius: 25px;\n margin-right: 14px;\n backdrop-filter: blur(14px);\n -webkit-backdrop-filter: blur(14px);\n }\n #header-container h2 {\n display: inline-flex;\n margin: 0 18px 0 0;\n padding: 4px;\n z-index: 1;\n font-size: 18px;\n }\n #header-container p {\n display: inline-flex;\n font-size: 16px;\n min-width: fit-content ;\n }\n .power-button {\n cursor: pointer; \n flex-grow: inherit; \n width: 24px;\n height: 24px;\n border-radius: 12px;\n margin: 0 10px;\n background: none !important;\n justify-content: flex-end;\n background-color: var(--background-color,var(--secondary-background-color));\n }\n .close-pop-up {\n height: 50px;\n width: 50px;\n border: none;\n border-radius: 50%;\n z-index: 1;\n background: var(--background-color,var(--secondary-background-color));\n color: var(--primary-text-color);\n flex-shrink: 0;\n cursor: pointer;\n }\n `;(0,n.L2)(t,e,i,h,x,u,"","",o),(0,n.L2)(t,e,s,h,x,u,k)}e.initStyleAdded||e.popUp||a||(e.card.style.marginTop="4000px",e.initStyleAdded=!0);const le=setTimeout((()=>{const t=new Event("popUpInitialized");e.element||(e.element=e.getRootNode().querySelector("#root")),e.element&&(!e.popUp||k||a&&!e.editorModeAdded)?(e.popUp=e.element,a&&e.popUp&&!e.editorModeAdded?(e.popUp.classList.add("editor"),e.popUp.classList.remove("close-pop-up","open-pop-up"),se(),e.editorModeAdded=!0):se(),clearTimeout(le),window.dispatchEvent(t)):!a&&e.popUp&&e.editorModeAdded&&(e.popUp.classList.remove("editor"),se(),e.editorModeAdded=!1)}),0);e.popUp&&W&&function(t){if(!t||t===c)return;c=t,null===localStorage.getItem("previousTriggerState_"+R)&&localStorage.setItem("previousTriggerState_"+R,""),null===localStorage.getItem("isManuallyClosed_"+R)&&localStorage.setItem("isManuallyClosed_"+R,"false"),null===localStorage.getItem("isTriggered_"+R)&&localStorage.setItem("isTriggered_"+R,"false");let n=localStorage.getItem("previousTriggerState_"+R),o="true"===localStorage.getItem("isManuallyClosed_"+R),a="true"===localStorage.getItem("isTriggered_"+R);t!==H||null!==n||a||(i(0,R),a=!0,localStorage.setItem("isTriggered_"+R,a)),t!==n&&(o=!1,localStorage.setItem("previousTriggerState_"+R,t),localStorage.setItem("isManuallyClosed_"+R,o)),t!==H||o?t!==H&&N&&e.popUp.classList.contains("open-pop-up")&&a&&!o&&(Q(),a=!1,o=!0,localStorage.setItem("isManuallyClosed_"+R,o),localStorage.setItem("isTriggered_"+R,a)):(i(0,R),a=!0,localStorage.setItem("isTriggered_"+R,a))}(t.states[W].state)}new MutationObserver(((t,n)=>{if(customElements.get("ha-panel-lovelace")){const t=Object.getPrototypeOf(customElements.get("ha-panel-lovelace")),i=t.prototype.html,a=t.prototype.css;class r extends t{setConfig(e){this._config={...e}}static get properties(){return{hass:{},_config:{}}}get _entity(){return this._config.entity||""}get _name(){return this._config.name||""}get _icon(){return this._config.icon||""}get _state(){return this._config.state||""}get _text(){return this._config.text||""}get _hash(){return this._config.hash||"#pop-up-name"}get _trigger_entity(){return this._config.trigger_entity||""}get _trigger_state(){return this._config.trigger_state||""}get _trigger_close(){return this._config.trigger_close||!1}get _margin(){return this._config.margin||"7px"}get _margin_top_mobile(){return this._config.margin_top_mobile||"0px"}get _margin_top_desktop(){return this._config.margin_top_desktop||"0px"}get _width_desktop(){return this._config.width_desktop||"540px"}get _bg_color(){return this._config.bg_color||window.color}get _bg_opacity(){return void 0!==this._config.bg_opacity?this._config.bg_opacity:"88"}get _bg_blur(){return void 0!==this._config.bg_blur?this._config.bg_blur:"14"}get _shadow_opacity(){return void 0!==this._config.shadow_opacity?this._config.shadow_opacity:"0"}get _is_sidebar_hidden(){return this._config.is_sidebar_hidden||!1}get _auto_close(){return this._config.auto_close||""}get _back_open(){return this._config.back_open||!1}render(){if(!this.hass)return i``;if(!this.listsUpdated){const e=e=>({label:e,value:e});this.allEntitiesList=Object.keys(this.hass.states).map(e),this.listsUpdated=!0}const e=this.allEntitiesList;return this.lightList,this.cardTypeList,this.buttonTypeList,i`

Pop-up - 👍 Optimized mode + Optimized mode

- This card allows you to convert any vertical stack into a pop-up. Each pop-up can be opened by targeting its link (e.g. '#pop-up-name'), with navigation_path or with the horizontal buttons stack that is included.
It must be placed within a vertical-stack card at the top most position to function properly. The pop-up will be hidden by default until you open it. + Since the recent updates of Home Assistant, the optimized mode has become obsolete. The regular mode is now exactly as efficient, which greatly simplifies things for both new and current users. So if you are on the latest Home Assistant release you can remove it from your extra modules and in your pop-ups in YAML just replace custom:bubble-pop-up with custom:bubble-card then add card_type: pop-up. This mode will be removed around the v2.0.0.

- `}_valueChanged(e){if(!this._config||!this.hass)return;const t=e.target,o=e.detail;let i,a="string"==typeof t.value?t.value.replace(",","."):t.value;("string"!=typeof a||!a.endsWith(".")&&"-"!==a)&&(t.configValue&&("ha-switch"===t.type?i=t.checked:(""!==a&&(!isNaN(parseFloat(a))&&isFinite(a)?(i=parseFloat(a),isNaN(i)&&(i=void 0)):i=a),i=void 0!==i?i:void 0===t.checked&&o.value?t.checked||o.value:t.value||t.checked),this._config[t.configValue]!==i&&(this._config={...this._config,[t.configValue]:i},n(this,"config-changed",{config:this._config}))),"HA-COMBO-BOX"===t.tagName&&(o.value?this._config={...this._config,[t.configValue]:o.value}:this._config={...this._config,[t.configValue]:void 0},n(this,"config-changed",{config:this._config})))}static get styles(){return a` - div { - display: grid; - grid-gap: 12px; - } - `}}customElements.define("bubble-pop-up-editor",r),o.disconnect()}})).observe(document,{childList:!0,subtree:!0}),function(){if(!window.eventAdded){const e=new Event("urlChanged");function t(){let t=0;window.dispatchEvent(e);const n=setInterval((()=>{t<10?(window.dispatchEvent(e),t++):clearInterval(n)}),1e3)}window.popUpInitialized=!1,["location-changed","connection-status"].forEach((e=>{window.addEventListener(e,t)}),{passive:!0});const n=()=>{window.dispatchEvent(e),window.addEventListener("popstate",t,{passive:!0})};window.addEventListener("popUpInitialized",n,{passive:!0}),window.eventAdded=!0}}();class _ extends HTMLElement{set hass(e){var t;this._hass=e,d=function(){const e=function(){try{return document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("ha-drawer > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("div")}catch(e){return}}();if(e)return e.classList.contains("edit-mode")}(),this.editor=d,(t=this).content||(t.attachShadow({mode:"open"}),t.shadowRoot.innerHTML='\n \n
\n
\n \n ',t.card=t.shadowRoot.querySelector("ha-card"),t.content=t.shadowRoot.querySelector("div")),b(this),window.columnFix||(window.columnFix=this.config.column_fix)}setConfig(e){if(!e.hash)throw new Error("You need to define an hash. Please note that this card must be placed inside a vertical_stack to work as a pop-up.");this.config=e}getCardSize(){return window.columnFix?0:-1}static getConfigElement(){return document.createElement("bubble-pop-up-editor")}}new MutationObserver(((e,t)=>{customElements.get("ha-panel-lovelace")&&(customElements.define("bubble-pop-up",_),t.disconnect())})).observe(document,{childList:!0,subtree:!0}),window.customCards=window.customCards||[],window.customCards.push({type:"bubble-pop-up",name:"Bubble Pop-up",preview:!1,description:"Just add it in a vertical-stack first."}),console.info(`%c Bubble Card - Pop-up %c ${e} `,"background-color: #555;color: #fff;padding: 3px 2px 3px 3px;border-radius: 14px 0 0 14px;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)","background-color: #506eac;color: #fff;padding: 3px 3px 3px 2px;border-radius: 0 14px 14px 0;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)")})()})(); \ No newline at end of file + `}_valueChanged(e){if(!this._config||!this.hass)return;const t=e.target,n=e.detail;let i,a="string"==typeof t.value?t.value.replace(",","."):t.value;("string"!=typeof a||!a.endsWith(".")&&"-"!==a)&&(t.configValue&&("ha-switch"===t.type?i=t.checked:(""!==a&&(!isNaN(parseFloat(a))&&isFinite(a)?(i=parseFloat(a),isNaN(i)&&(i=void 0)):i=a),i=void 0!==i?i:void 0===t.checked&&n.value?t.checked||n.value:t.value||t.checked),this._config[t.configValue]!==i&&(this._config={...this._config,[t.configValue]:i},o(this,"config-changed",{config:this._config}))),"HA-COMBO-BOX"===t.tagName&&(n.value?this._config={...this._config,[t.configValue]:n.value}:this._config={...this._config,[t.configValue]:void 0},o(this,"config-changed",{config:this._config})))}static get styles(){return a` + div { + display: grid; + grid-gap: 12px; + } + code { + background: var(--accent-color); + background-blend-mode: darken; + padding: 2px 4px; + border-radius: 6px; + } + `}}customElements.define("bubble-pop-up-editor",r),n.disconnect()}})).observe(document,{childList:!0,subtree:!0}),function(){if(!window.eventAdded){function e(){let e=0;const n=setInterval((()=>{e<10?(window.dispatchEvent(t),e++):clearInterval(n)}),100)}window.eventAdded=!0,window.popUpInitialized=!1,["location-changed","connection-status","popstate"].forEach((t=>{window.addEventListener(t,e)}),{passive:!0});const n=()=>{window.dispatchEvent(t)};window.addEventListener("popUpInitialized",n,{passive:!0})}}();class v extends HTMLElement{set hass(e){var t;this._hass=e,p=function(){const e=function(){try{return document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("ha-drawer > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("div")}catch(e){return}}();if(e)return e.classList.contains("edit-mode")}(),this.editor=p,(t=this).content||(t.attachShadow({mode:"open"}),t.shadowRoot.innerHTML='\n \n
\n
\n \n ',t.card=t.shadowRoot.querySelector("ha-card"),t.content=t.shadowRoot.querySelector("div")),f(this),window.columnFix||(window.columnFix=this.config.column_fix)}setConfig(e){if(!e.hash)throw new Error("You need to define an hash. Please note that this card must be placed inside a vertical_stack to work as a pop-up.");this.config=e}getCardSize(){return window.columnFix?0:-1}static getConfigElement(){return document.createElement("bubble-pop-up-editor")}}new MutationObserver(((e,t)=>{customElements.get("ha-panel-lovelace")&&(customElements.define("bubble-pop-up",v),t.disconnect())})).observe(document,{childList:!0,subtree:!0}),window.customCards=window.customCards||[],window.customCards.push({type:"bubble-pop-up",name:"Bubble Pop-up",preview:!1,description:"Just add it in a vertical-stack first."}),console.info(`%c Bubble Card - Pop-up %c ${e} `,"background-color: #555;color: #fff;padding: 3px 2px 3px 3px;border-radius: 14px 0 0 14px;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)","background-color: #506eac;color: #fff;padding: 3px 3px 3px 2px;border-radius: 0 14px 14px 0;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)")})()})(); \ No newline at end of file diff --git a/src/cards/button.ts b/src/cards/button.ts index ee87035..cfbdd5f 100644 --- a/src/cards/button.ts +++ b/src/cards/button.ts @@ -231,7 +231,7 @@ export function handleButton(context) { context.eventAdded = true; } else if (!context.eventAdded && buttonType === 'custom') { switchButton.addEventListener('click', () => tapFeedback(context.switchButton), { passive: true }); - addActions(iconContainer, context.config, hass, forwardHaptic); + addActions(switchButton, context.config, hass, forwardHaptic); context.eventAdded = true; } diff --git a/src/cards/pop-up.ts b/src/cards/pop-up.ts index 9fd05b8..1b8de39 100644 --- a/src/cards/pop-up.ts +++ b/src/cards/pop-up.ts @@ -22,8 +22,7 @@ import { import { addActions } from '../tools/tap-actions.ts'; import { getVariables } from '../var/cards.ts'; -let mouseUpListenerAdded = false; -let touchEndListenerAdded = false; +let oldTriggerEntityState; export function handlePopUp(context) { @@ -95,6 +94,11 @@ export function handlePopUp(context) { context.initStyleAdded = true; } + function removeHash() { + history.replaceState(null, null, location.href.split('#')[0]); + fireEvent(window, "location-changed", true); + } + function createHeader() { if (!context.headerAdded) { context.headerContainer = document.createElement("div"); @@ -154,37 +158,23 @@ export function handlePopUp(context) { // Reset auto close window.hash === popUpHash && resetAutoClose(); - if (!window.justOpened) { - return; - } - const target = e.composedPath(); if ( target && !target.some(el => el.nodeName === 'HA-MORE-INFO-DIALOG') && !target.some(el => el.id === 'root' - && !el.classList.contains('close-pop-up')) - && popUpOpen === popUpHash + true + && !el.classList.contains('close-pop-up')) ){ const close = setTimeout(function() { - if (window.hash === popUpHash) { - // Vérifiez si le clic a été effectué sur le corps de la page - if (document.body.contains(e.target)) { - popUpOpen = popUpHash + false; - removeHash(); - localStorage.setItem('isManuallyClosed_' + popUpHash, true); - } + if (window.hash === popUpHash) { //&& !closeOnClick + removeHash(); + localStorage.setItem('isManuallyClosed_' + popUpHash, true); } - }, 0); + }, 100); } } - function removeHash() { - history.replaceState(null, null, location.href.split('#')[0]); - fireEvent(window, "location-changed", true); - } - function resetAutoClose() { // Clear any existing timeout clearTimeout(closeTimeout); @@ -200,7 +190,6 @@ export function handlePopUp(context) { function windowKeydownHandler(e) { if (e.key === 'Escape') { - popUpOpen = popUpHash + false; removeHash(); localStorage.setItem('isManuallyClosed_' + popUpHash, true) } @@ -223,7 +212,6 @@ export function handlePopUp(context) { // If the distance is positive (i.e., the finger is moving downward) and exceeds a certain threshold, close the pop-up if (touchMoveDistance > 300 && event.touches[0].clientY > lastTouchY) { - popUpOpen = popUpHash + false; removeHash(); localStorage.setItem('isManuallyClosed_' + popUpHash, true) } @@ -303,36 +291,36 @@ export function handlePopUp(context) { document.body.style.overflow = 'hidden'; // Fix scroll inside pop-ups only pauseVideos(context.popUp, false); resetAutoClose(); + if (closeOnClick) { context.popUp.addEventListener('mouseup', removeHash, { passive: true }); context.popUp.addEventListener('touchend', removeHash, { passive: true }); - } else { - window.addEventListener('click', closePopUpByClickingOutside, { passive: true }); } - context.popUpOpen = popUpHash + true; + + popUpOpen = popUpHash + true; setTimeout(function() { - window.justOpened = true; + window.addEventListener('click', closePopUpByClickingOutside, { passive: true }); }, 10); } function closePopUp() { - window.justOpened = false; context.popUp.classList.remove('open-pop-up'); context.popUp.classList.add('close-pop-up'); context.content.querySelector('.power-button').removeEventListener('click', powerButtonClickHandler); window.removeEventListener('keydown', windowKeydownHandler); + window.removeEventListener('click', closePopUpByClickingOutside); context.popUp.removeEventListener('touchstart', popUpTouchstartHandler); context.popUp.removeEventListener('touchmove', popUpTouchmoveHandler); document.body.style.overflow = ''; clearTimeout(closeTimeout); + if (closeOnClick) { context.popUp.removeEventListener('mouseup', removeHash); context.popUp.removeEventListener('touchend', removeHash); - } else { - window.removeEventListener('click', closePopUpByClickingOutside); - } - context.popUpOpen = popUpHash + false; + } + + popUpOpen = popUpHash + false; setTimeout(function() { pauseVideos(context.popUp, true); @@ -350,6 +338,9 @@ export function handlePopUp(context) { window['checkHashRef_' + popUpHash] = checkHash; window.addEventListener('urlChanged', window['checkHashRef_' + popUpHash], { passive: true }); context.eventAdded = true; + } else if (context.eventAdded && editor) { + window.removeEventListener('urlChanged', window['checkHashRef_' + popUpHash]); + context.eventAdded = false; } const popUpStyles = ` @@ -519,6 +510,8 @@ export function handlePopUp(context) { // Initialize pop-up const initPopUp = setTimeout(() => { + const initEvent = new Event('popUpInitialized'); + if (!context.element) { context.element = context.getRootNode().querySelector('#root'); } @@ -532,26 +525,32 @@ export function handlePopUp(context) { if (editor && context.popUp && !context.editorModeAdded) { context.popUp.classList.add('editor'); - context.popUp.classList.remove('close-pop-up', 'open-pop-up', 'hide-pop-up'); + context.popUp.classList.remove('close-pop-up', 'open-pop-up'); + createPopUp(); context.editorModeAdded = true; + } else { createPopUp(); - return; } - createPopUp(); - clearTimeout(initPopUp); - const initEvent = new Event('popUpInitialized'); - window.dispatchEvent(initEvent); + clearTimeout(initPopUp); + window.dispatchEvent(initEvent); } else if (!editor && context.popUp && context.editorModeAdded) { context.popUp.classList.remove('editor'); + createPopUp(); context.editorModeAdded = false; } }, 0); // Pop-up triggers - const popUpTriggers = () => { + function popUpTriggers(triggerEntityState) { + if (!triggerEntityState || triggerEntityState === oldTriggerEntityState) { + return; + } + + oldTriggerEntityState = triggerEntityState; + if (localStorage.getItem('previousTriggerState_' + popUpHash) === null) { localStorage.setItem('previousTriggerState_' + popUpHash, ''); } @@ -566,25 +565,24 @@ export function handlePopUp(context) { let isManuallyClosed = localStorage.getItem('isManuallyClosed_' + popUpHash) === 'true'; let isTriggered = localStorage.getItem('isTriggered_' + popUpHash) === 'true'; - if (hass.states[triggerEntity].state === triggerState && previousTriggerState === null && !isTriggered) { + if (triggerEntityState === triggerState && previousTriggerState === null && !isTriggered) { navigate('', popUpHash); isTriggered = true; localStorage.setItem('isTriggered_' + popUpHash, isTriggered); } - if (hass.states[triggerEntity].state !== previousTriggerState) { + if (triggerEntityState !== previousTriggerState) { isManuallyClosed = false; - localStorage.setItem('previousTriggerState_' + popUpHash, hass.states[triggerEntity].state); + localStorage.setItem('previousTriggerState_' + popUpHash, triggerEntityState); localStorage.setItem('isManuallyClosed_' + popUpHash, isManuallyClosed); } - if (hass.states[triggerEntity].state === triggerState && !isManuallyClosed) { + if (triggerEntityState === triggerState && !isManuallyClosed) { navigate('', popUpHash); isTriggered = true; localStorage.setItem('isTriggered_' + popUpHash, isTriggered); - } else if (hass.states[triggerEntity].state !== triggerState && triggerClose && context.popUp.classList.contains('open-pop-up') && isTriggered && !isManuallyClosed) { + } else if (triggerEntityState !== triggerState && triggerClose && context.popUp.classList.contains('open-pop-up') && isTriggered && !isManuallyClosed) { removeHash(); - popUpOpen = popUpHash + false; isTriggered = false; isManuallyClosed = true; localStorage.setItem('isManuallyClosed_' + popUpHash, isManuallyClosed); @@ -592,7 +590,8 @@ export function handlePopUp(context) { } } - if (context.popUp && triggerEntity && stateChanged) { - popUpTriggers(); + if (context.popUp && triggerEntity) { + const triggerEntityState = hass.states[triggerEntity].state; + popUpTriggers(triggerEntityState); } } \ No newline at end of file diff --git a/src/editor/bubble-card-editor.ts b/src/editor/bubble-card-editor.ts index c0aad08..c96716e 100644 --- a/src/editor/bubble-card-editor.ts +++ b/src/editor/bubble-card-editor.ts @@ -601,6 +601,7 @@ export default class BubbleCardEditor extends LitElement { You need to add a card type first.

The Bubble Card ${version} changelog is available here. +

Column fix: If you experience some issues with your dashboard layout, such as empty columns or misaligned cards. You can apply a fix that restores the behavior of the previous versions by adding column_fix: true in YAML to the first Bubble Card on your dashboard. Then refresh the page.

Almost everything is available in the GUI editor, but in the YAML editor you can add your own custom styles, create custom buttons or modify the tap actions of all cards. You can find more details on my GitHub page.

@@ -841,6 +842,12 @@ export default class BubbleCardEditor extends LitElement { opacity: .15; margin: 8px 0 0 0; } + code { + background: var(--accent-color); + background-blend-mode: darken; + padding: 2px 4px; + border-radius: 6px; + } .button-header { height: auto; width: 100%; diff --git a/src/editor/bubble-pop-up-editor.ts b/src/editor/bubble-pop-up-editor.ts index adb9275..0f42fa7 100644 --- a/src/editor/bubble-pop-up-editor.ts +++ b/src/editor/bubble-pop-up-editor.ts @@ -133,10 +133,10 @@ let bubblePopUpEditor = new MutationObserver((mutationsList, observer) => { padding: 2px 6px; border-radius: 8px; "> - 👍 Optimized mode + Optimized mode - This card allows you to convert any vertical stack into a pop-up. Each pop-up can be opened by targeting its link (e.g. '#pop-up-name'), with navigation_path or with the horizontal buttons stack that is included.
It must be placed within a vertical-stack card at the top most position to function properly. The pop-up will be hidden by default until you open it. + Since the recent updates of Home Assistant, the optimized mode has become obsolete. The regular mode is now exactly as efficient, which greatly simplifies things for both new and current users. So if you are on the latest Home Assistant release you can remove it from your extra modules and in your pop-ups in YAML just replace custom:bubble-pop-up with custom:bubble-card then add card_type: pop-up. This mode will be removed around the v2.0.0. { static get styles() { return css` - div { - display: grid; - grid-gap: 12px; - } - `; + div { + display: grid; + grid-gap: 12px; + } + code { + background: var(--accent-color); + background-blend-mode: darken; + padding: 2px 4px; + border-radius: 6px; + } + `; } } diff --git a/src/tools/url-listener.ts b/src/tools/url-listener.ts index 175764b..e8c51a5 100644 --- a/src/tools/url-listener.ts +++ b/src/tools/url-listener.ts @@ -1,18 +1,19 @@ +const event = new Event('urlChanged'); + export function addUrlListener() { if (!window.eventAdded) { // 'urlChanged' custom event - const event = new Event('urlChanged'); + window.eventAdded = true; window.popUpInitialized = false; - ['location-changed', 'connection-status'].forEach((eventType) => { + ['location-changed', 'connection-status', 'popstate'].forEach((eventType) => { window.addEventListener(eventType, urlChanged); }, { passive: true }); function urlChanged() { let count = 0; - window.dispatchEvent(event); // Send more events for when the connexion was lost const intervalId = setInterval(() => { @@ -22,17 +23,14 @@ export function addUrlListener() { } else { clearInterval(intervalId); } - }, 1000); + }, 100); } // Check url when pop-ups are initialized const popUpInitialized = () => { window.dispatchEvent(event); - window.addEventListener('popstate', urlChanged, { passive: true }); }; - window.addEventListener('popUpInitialized', popUpInitialized, { passive: true }); - - window.eventAdded = true; + window.addEventListener('popUpInitialized', popUpInitialized, { passive: true }); } } diff --git a/src/var/version.ts b/src/var/version.ts index 86aad3d..a7e6e7b 100644 --- a/src/var/version.ts +++ b/src/var/version.ts @@ -1 +1 @@ -export let version = 'v1.6.3'; \ No newline at end of file +export let version = 'v1.6.4'; \ No newline at end of file