From 7666723088f529260f487abb4674bf6a7540b9bf Mon Sep 17 00:00:00 2001 From: Cloos <36499953+Clooos@users.noreply.github.com> Date: Sun, 7 Jan 2024 16:50:35 +0100 Subject: [PATCH] v1.6.3 --- dist/bubble-card.js | 77 ++++++++++++--------- dist/bubble-pop-up.js | 4 +- hacs.json | 2 +- src/bubble-card.ts | 8 ++- src/bubble-pop-up.ts | 6 +- src/cards/button.ts | 6 +- src/cards/horizontal-buttons-stack.ts | 2 +- src/cards/pop-up.ts | 98 +++++++++++++-------------- src/editor/bubble-card-editor.ts | 19 ++++-- src/tools/init.ts | 10 --- src/var/version.ts | 2 +- 11 files changed, 128 insertions(+), 106 deletions(-) diff --git a/dist/bubble-card.js b/dist/bubble-card.js index 3c05899f..f7881542 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 t=path?element.querySelector(path):element;t?.appendChild(context.styleElement)}context[styleAddedKey]=!0}const t=document.createElement("style");t.innerHTML=customStylesEval+styles,context.styleElement.parentNode.insertBefore(t,context.styleElement.nextSibling),context.styleElement.parentNode.removeChild(context.styleElement),context.styleElement=t,context.previousStyle=customStylesEval,context.previousConfig=context.config}};timeouts[key]?clearTimeout(timeouts[key]):executeStyles(),timeouts[key]=setTimeout(executeStyles,500)};function createIcon(t,e,n,o,i){let a=t._hass,r=!(!e||!a.states[e].attributes)&&a.states[e].attributes;t.imageUrl=!!r.entity_picture&&r.entity_picture,updateIcon(t,a,e,n,o),i||setInterval((()=>{a=t._hass,e&&a.states[e]&&(t.currentEntityPicture=a.states[e].attributes.entity_picture,t.currentEntityPicture!==t.previousEntityPicture&&(t.imageUrl=t.currentEntityPicture,updateIcon(t,a,e,n,o),t.previousEntityPicture=t.currentEntityPicture))}),1e3)}function updateIcon(t,e,n,o,i){for(;i.firstChild;)i.removeChild(i.firstChild);let a=t.config.icon&&t.config.icon.includes("/")?t.config.icon:t.imageUrl?t.imageUrl:"";if(a&&(r=e.states[n].state,n.startsWith("media_player.")&&!["off","unknown","idle",void 0].includes(r)||!n.startsWith("media_player."))){const t=document.createElement("div");t.setAttribute("class","entity-picture"),t.setAttribute("alt","Icon"),i&&(i.appendChild(t),i.style.background="center / cover no-repeat url("+a+"), var(--card-background-color,var(--ha-card-background))")}else{const t=document.createElement("ha-icon");t.setAttribute("icon",o),t.setAttribute("class","icon"),i&&i.appendChild(t)}var r}function isColorCloseToWhite(t){let e=[220,220,190];for(let n=0;n<3;n++)if(t[n]{for(var n in e)__webpack_require__.o(e,n)&&!__webpack_require__.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},__webpack_require__.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var __webpack_exports__={};(()=>{let t="v1.6.1";function e(){const t=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(t){return}}();if(t)return t.classList.contains("edit-mode")}var n=__webpack_require__(946);const o=(t,e,n,o)=>{o=o||{},n=null==n?{}:n;const i=new Event(e,{bubbles:void 0===o.bubbles||o.bubbles,cancelable:Boolean(o.cancelable),composed:void 0===o.composed||o.composed});return i.detail=n,t.dispatchEvent(i),i},i=t=>{o(window,"haptic",t)},a=(t,e,n=!1)=>{n?history.replaceState(null,"",e):history.pushState(null,"",e),o(window,"location-changed",{replace:n})};function r(t,e){t.callService("homeassistant","toggle",{entity_id:e})}const s=300;let l,c,d,p,h,u=null,g=0,m=0;class b{constructor(t,e,n){this.element=t,this.config=e,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(t){clearTimeout(this.holdTimeout);let e=(new Date).getTime(),n=e-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=e,this.holdTriggered=!1}handleCancel(){clearTimeout(this.holdTimeout),this.holdTriggered=!1}}function f(t,e,n){const o=Date.now();if("tap"===n&&o-mi.handleEnd(t)),{passive:!0}),t.addEventListener("touchcancel",i.handleCancel.bind(i),{passive:!0})):(t.addEventListener("mousedown",i.handleStart.bind(i),{passive:!0}),t.addEventListener("mouseup",(t=>i.handleEnd(t)),{passive:!0}),t.addEventListener("mouseout",i.handleCancel.bind(i),{passive:!0}))}function v(t,e,o,i){let a=e.styles?e.styles:"",r=e.entity&&o.states[e.entity]?e.entity:"",s=!e.icon&&r?o.states[r].attributes.icon||o.states[r].attributes.entity_picture||"":e.icon||"",h=e.name?e.name:r?o.states[r].attributes.friendly_name:"",u=e.width_desktop||"540px",g=u?u.match(/(\d+)(\D+)/):"",m=e.is_sidebar_hidden||!1,b=r?o.states[r].state:"";!function(t,e,n){t.hasState=e.states[n],t.hasState&&(t.newState=[t.hasState.state,t.hasState.attributes.rgb_color],t.oldState&&t.newState[0]===t.oldState[0]&&t.newState[1]===t.oldState[1]?t.stateChanged=!1:(t.oldState=t.newState,t.stateChanged=!0),t.stateChanged)}(t,o,r);let f=t.stateChanged,_=["on","open","cleaning","true","home","playing"].includes(b)||0!==Number(b)&&!isNaN(Number(b)),v=void 0===e.rise_animation||e.rise_animation,y=e.margin?"0"!==e.margin?e.margin:"0px":"7px",w=void 0!==e.bg_opacity?e.bg_opacity:"88",x=void 0!==e.shadow_opacity?e.shadow_opacity:"0",k=void 0!==e.bg_blur?e.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),A=O.getPropertyValue("--ha-card-background")||O.getPropertyValue("--card-background-color"),L=e.bg_color?e.bg_color:A;if(L&&(!t.color||L!==t.color)){const e=1.02;c=(0,n._k)(L,w/100,e),document.body.style.setProperty("--bubble-pop-up-background",c),t.color=L,window.color=L}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:A,color:L}}function y(t){const r=t._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:A,iconStyles:L,haStyle:I,themeBgColor:T,color:D}=v(t,t.config,r);setInterval((()=>{h=e(),h&&!t.editorModeAdded?(t.buttonsContainer.classList.add("editor"),t.card.classList.add("editor"),t.editorModeAdded=!0):!h&&t.editorModeAdded&&(t.buttonsContainer.classList.remove("editor"),t.card.classList.remove("editor"),t.editorModeAdded=!1)}),100);if(!t.buttonsAdded){const e=document.createElement("div");e.classList.add("horizontal-buttons-stack-container"),t.content.appendChild(e),t.buttonsContainer=e}const V=(t,e,o)=>{if(r.states[e].attributes.rgb_color){const o=r.states[e].attributes.rgb_color,i=(0,n.wW)(o)?"rgba(255,220,200, 0.5)":`rgba(${o}, 0.5)`;t.style.backgroundColor=i,t.style.border="1px solid rgba(0,0,0,0)"}else r.states[e].attributes.rgb_color||"on"!=r.states[e].state?(t.style.backgroundColor="rgba(0,0,0,0)",t.style.border="1px solid var(--primary-text-color)"):(t.style.backgroundColor="rgba(255,255,255,0.5)",t.style.border="1px solid rgba(0,0,0,0)")};let M=[],z=1;for(;t.config[z+"_link"];){const e=z+"_",n=t.config[e+"name"]||"",o=t.config[e+"pir_sensor"];c=t.config[e+"icon"]||"";const i=t.config[e+"link"],a=t.config[e+"entity"];M.push({button:n,pirSensor:o,icon:c,link:i,lightEntity:a}),z++}if(t.config.auto_order&&M.sort(((t,e)=>t.pirSensor&&e.pirSensor?"on"===r.states[t.pirSensor].state&&"on"===r.states[e.pirSensor].state?r.states[t.pirSensor].last_updated{const r=((e,n,r)=>{const s=document.createElement("button");return s.setAttribute("class",`button ${n.substring(1)}`),s.innerHTML=`\n ${""!==r?``:""}\n ${""!==e?`

${e}

`:""}\n `,s.hasListener||(s.addEventListener("click",(t=>{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",(()=>{t.config.highlightCurrentview&&(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);e[n.link]=r,t.buttonsContainer.appendChild(r)})),t.buttonsAdded=!0,t.buttons=e}let B=0;!function(t){if(t.buttonsUpdated&&!h)return;let e=[];for(let n of M)t.buttons[n.link]&&(e.push(localStorage.getItem(`buttonWidth-${n.link}`)),e.push(localStorage.getItem(`buttonContent-${n.link}`)));Promise.all(e).then((e=>{let n=0;for(let o of M){let i=t.buttons[o.link];if(i){let a=e[n],r=e[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),t.previousConfig=t.config),i.style.transform=`translateX(${B}px)`,B+=parseInt(a)+12}o.lightEntity&&V(i,o.lightEntity,o.link)}t.buttonsAdded=!0}))}(t);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: ${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&&_&&(t.content.style.animation="from-bottom 1.3s forwards",window.hasAnimated=!0,setTimeout((()=>{t.content.style.animation="none"}),1500)),(0,n.L2)(r,t,U,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 t=new Event("urlChanged");function e(){let e=0;window.dispatchEvent(t);const n=setInterval((()=>{e<10?(window.dispatchEvent(t),e++):clearInterval(n)}),1e3)}window.popUpInitialized=!1,["location-changed","connection-status"].forEach((t=>{window.addEventListener(t,e)}),{passive:!0});const n=()=>{window.dispatchEvent(t),window.addEventListener("popstate",e,{passive:!0})};window.addEventListener("popUpInitialized",n,{passive:!0}),window.eventAdded=!0}}();class $ extends HTMLElement{set hass(s){var l;switch(this._hass=s,C=e(),this.editor=C,async function(e){if(!window.resourcesChecked){window.resourcesChecked=!0;try{let n=t;localStorage.getItem("version")!==n&&(localStorage.setItem("version",n),location.reload());let o=(await e.callWS({type:"lovelace/resources"})).find((t=>t.url.includes("bubble-pop-up.js")));async function i(t){let e=await t.callWS({type:"lovelace/resources"}),n=e.findIndex((t=>t.url.includes("bubble-card.js"))),o=null;if(-1!==n&&0!==n){o=e.splice(n,1)[0];for(let n of e)await t.callWS({type:"lovelace/resources/delete",resource_id:n.id});o&&-1===(await t.callWS({type:"lovelace/resources"})).findIndex((t=>t.url.includes("bubble-card.js")))&&await t.callWS({type:"lovelace/resources/create",res_type:o.type,url:o.url});for(let n of e)await t.callWS({type:"lovelace/resources/create",res_type:n.type,url:n.url})}}o&&await e.callWS({type:"lovelace/resources/delete",resource_id:o.id}),i(e)}catch(a){throw a}}}(s),(l=this).content||(l.attachShadow({mode:"open"}),l.shadowRoot.innerHTML='\n \n
\n
\n \n ',l.card=l.shadowRoot.querySelector("ha-card"),l.content=l.shadowRoot.querySelector("div")),this.config.card_type){case"pop-up":!function(t){const e=t._hass,i=t.editor,s=t.config;if(!e)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:A,bgOpacity:L,shadowOpacity:I,bgBlur:T,iconColorOpacity:D,iconColor:V,iconFilter:M,iconStyles:z,haStyle:B,themeBgColor:U,color:q}=v(t,s,e),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.margin_top_mobile&&"0"!==s.margin_top_mobile?s.margin_top_mobile:"0px",G=s.margin_top_desktop&&"0"!==s.margin_top_desktop?s.margin_top_desktop:"0px";if(w=N&&e.states[N]?e.states[N].state:"",t.errorTriggered)return;function K(t){if(window.hash===W&&Z(),!window.justOpened)return;const e=t.composedPath();!e||e.some((t=>"HA-MORE-INFO-DIALOG"===t.nodeName))||e.some((t=>"root"===t.id&&!t.classList.contains("close-pop-up")))||E!==W+!0||setTimeout((function(){window.hash===W&&document.body.contains(t.target)&&(E=W+!1,history.replaceState(null,null,location.href.split("#")[0]),o(window,"location-changed",!0),localStorage.setItem("isManuallyClosed_"+W,!0))}),0)}function Z(){clearTimeout(d),H>0&&(d=setTimeout(J,H))}function J(){history.replaceState(null,null,location.href.split("#")[0]),o(window,"location-changed",!0)}function Q(){r(e,u)}function tt(t){"Escape"===t.key&&(E=W+!1,history.replaceState(null,null,location.href.split("#")[0]),o(window,"location-changed",!0),localStorage.setItem("isManuallyClosed_"+W,!0))}function et(t){window.hash===W&&Z(),l=t.touches[0].clientY,c=l}function nt(t){t.touches[0].clientY-l>300&&t.touches[0].clientY>c&&(E=W+!1,history.replaceState(null,null,location.href.split("#")[0]),o(window,"location-changed",!0),localStorage.setItem("isManuallyClosed_"+W,!0)),c=t.touches[0].clientY}function ot(){i||(window.hash=location.hash.split("?")[0],window.hash===W?(window.removeEventListener("click",K),t.popUp.classList.remove("close-pop-up"),t.popUp.classList.add("open-pop-up"),t.content.querySelector(".power-button").addEventListener("click",Q,{passive:!0}),window.addEventListener("keydown",tt,{passive:!0}),t.popUp.addEventListener("touchstart",et,{passive:!0}),t.popUp.addEventListener("touchmove",nt,{passive:!0}),E=W+!0,document.body.style.overflow="hidden",setTimeout((()=>{window.justOpened=!0}),10),it(t.popUp,!1),Z(),setTimeout((function(){window.addEventListener("click",K,{passive:!0})}),10)):t.popUp.classList.contains("open-pop-up")&&(t.popUp.classList.remove("open-pop-up"),t.popUp.classList.add("close-pop-up"),t.content.querySelector(".power-button").removeEventListener("click",Q),window.removeEventListener("keydown",tt),t.popUp.removeEventListener("touchstart",et),t.popUp.removeEventListener("touchmove",nt),E=W+!1,document.body.style.overflow="",window.justOpened=!1,clearTimeout(d),setTimeout((function(){it(t.popUp,!0)}),320)))}function it(t,e){for(var n=t.querySelectorAll("video"),o=0;o0&&!n[o].paused&&!n[o].ended&&n[o].readyState>n[o].HAVE_CURRENT_DATA;e&&i?n[o].pause():e||i||(n[o].play(),n[o].currentTime>0&&(n[o].currentTime=1e4))}var a=t.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% + ${G} + 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 `,l=`\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?t.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)(e,t,r,h,w,u,"","",a),(0,n.L2)(e,t,l,h,w,u,x)}t.initStyleAdded||t.popUp||i||(t.card.style.marginTop="4000px",t.initStyleAdded=!0);const rt=setTimeout((()=>{if(t.element||(t.element=t.getRootNode().querySelector("#root")),t.element&&(!t.popUp||x||i&&!t.editorModeAdded)){if(t.popUp=t.element,i&&t.popUp&&!t.editorModeAdded)return t.popUp.classList.add("editor"),t.popUp.classList.remove("close-pop-up","open-pop-up","hide-pop-up"),t.editorModeAdded=!0,void at();at(),clearTimeout(rt);const e=new Event("popUpInitialized");window.dispatchEvent(e)}else!i&&t.popUp&&t.editorModeAdded&&(t.popUp.classList.remove("editor"),t.editorModeAdded=!1)}),0);t.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),i="true"===localStorage.getItem("isManuallyClosed_"+W),r="true"===localStorage.getItem("isTriggered_"+W);e.states[F].state!==Y||null!==n||r||(a(0,W),r=!0,localStorage.setItem("isTriggered_"+W,r)),e.states[F].state!==n&&(i=!1,localStorage.setItem("previousTriggerState_"+W,e.states[F].state),localStorage.setItem("isManuallyClosed_"+W,i)),e.states[F].state!==Y||i?e.states[F].state!==Y&&P&&t.popUp.classList.contains("open-pop-up")&&r&&!i&&(history.replaceState(null,null,location.href.split("#")[0]),o(window,"location-changed",!0),E=W+!1,r=!1,i=!0,localStorage.setItem("isManuallyClosed_"+W,i),localStorage.setItem("isTriggered_"+W,r)):(a(0,W),r=!0,localStorage.setItem("isTriggered_"+W,r))})()}(this);break;case"horizontal-buttons-stack":y(this);break;case"button":!function(t){const e=t._hass,o=t.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:A,iconStyles:L,haStyle:I,themeBgColor:T,color:D}=v(t,t.config,e);b=s&&(g||o)?e.formatEntityState(e.states[s]):"";const V=t.config.button_type||"switch",M=!!t.config.show_state&&t.config.show_state;let z=s?e.states[s].attributes.brightness||0:"",B=s?e.states[s].attributes.volume_level||0:"",U=!1,q=z,H=B,W=0,F=0,Y=0,P=!1,R=null;if(!t.buttonAdded){const e=document.createElement("div");e.setAttribute("class","button-container"),t.content.appendChild(e)}const j=document.createElement("div");j.setAttribute("class","icon-container"),t.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"),!t.buttonContainer||o){if(o&&t.buttonContainer){for(;t.buttonContainer.firstChild;)t.buttonContainer.removeChild(t.buttonContainer.firstChild);t.eventAdded=!1,t.wasEditing=!0}t.buttonContainer=t.content.querySelector(".button-container"),"slider"!==V||t.buttonAdded&&!o?("switch"===V||"custom"===V||o)&&(t.buttonContainer.appendChild(X),X.appendChild(j),X.appendChild(N),t.switchButton=t.content.querySelector(".switch-button")):(t.buttonContainer.appendChild(G),G.appendChild(j),G.appendChild(N),G.appendChild(K),t.rangeFill=t.content.querySelector(".range-fill")),(0,n.IU)(t,s,l,j,o),N.innerHTML=`\n

${c}

\n ${M?`

${b}

`:""}\n `,t.buttonAdded=!0}function Z(t){i("success");let e=t.querySelector(".feedback-element");e||(e=document.createElement("div"),e.setAttribute("class","feedback-element"),t.appendChild(e)),e.style.animation="tap-feedback .5s",setTimeout((()=>{e.style.animation="none",t.removeChild(e)}),500)}function J(t){W=t.pageX||(t.touches?t.touches[0].pageX:0),F=t.pageY||(t.touches?t.touches[0].pageY:0),Y=G.value,t.target!==j&&t.target!==j.querySelector("ha-icon")&&(U=!0,document.addEventListener("mouseup",tt,{passive:!0}),document.addEventListener("touchend",tt,{passive:!0}),document.addEventListener("mousemove",Q,{passive:!0}),document.addEventListener("touchmove",Q,{passive:!0}),R=setTimeout((()=>{ot(t.pageX||t.touches[0].pageX),et(),R=null}),200))}function Q(t){const e=t.pageX||(t.touches?t.touches[0].pageX:0),n=t.pageY||(t.touches?t.touches[0].pageY:0);Math.abs(n-F)>Math.abs(e-W)?(clearTimeout(R),tt()):(document.removeEventListener("mousemove",Q),document.removeEventListener("touchmove",Q),document.addEventListener("mousemove",nt,{passive:!0}),document.addEventListener("touchmove",nt,{passive:!0}))}function tt(){U=!1,P=!1,et(),document.removeEventListener("mouseup",tt),document.removeEventListener("touchend",tt),document.removeEventListener("mousemove",nt),document.removeEventListener("touchmove",nt)}function et(){s.startsWith("light.")?(z=q,e.callService("light","turn_on",{entity_id:s,brightness:z})):s.startsWith("media_player.")&&(B=H,e.callService("media_player","volume_set",{entity_id:s,volume_level:B}))}function nt(t){const e=t.pageX||(t.touches?t.touches[0].pageX:0),n=t.pageY||(t.touches?t.touches[0].pageY:0);U&&Math.abs(e-W)>10?(i("light"),ot(e)):U&&Math.abs(n-F)>10&&(U=!1,G.value=Y)}function ot(t){const e=G.getBoundingClientRect(),n=Math.min(Math.max(t-e.left,0),e.width)/e.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&&(t.content.querySelector(".state").textContent=b),t.eventAdded||"switch"!==V?t.eventAdded||"slider"!==V?t.eventAdded||"custom"!==V||(X.addEventListener("click",(()=>Z(t.switchButton)),{passive:!0}),_(j,t.config),t.eventAdded=!0):(G.addEventListener("mousedown",J,{passive:!0}),G.addEventListener("touchstart",J,{passive:!0}),_(j,t.config),t.eventAdded=!0):(X.addEventListener("click",(()=>Z(t.switchButton)),{passive:!0}),X.addEventListener("click",(function(t){t.target!==j&&t.target!==j.querySelector("ha-icon")&&r(e,s)}),{passive:!0}),_(j,t.config),t.eventAdded=!0),t.isDragging||"slider"!==V||(t.rangeFill.style.transition="all .3s",s.startsWith("light.")?t.rangeFill.style.transform=`translateX(${z/255*100}%)`:s.startsWith("media_player.")&&(t.rangeFill.style.transform=`translateX(${100*B}%)`));const it=`\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,n.L2)(e,t,it,a,u,s,g)}(this);break;case"separator":!function(t){const e=t._hass,o=t.editor,i=t.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:A,themeBgColor:L,color:I}=v(t,i,e);if(!t.separatorAdded||o){if(o&&t.separatorContainer)for(;t.separatorContainer.firstChild;)t.separatorContainer.removeChild(t.separatorContainer.firstChild);t.separatorAdded||(t.separatorContainer=document.createElement("div"),t.separatorContainer.setAttribute("class","separator-container")),t.separatorContainer.innerHTML=`\n
\n \n

${l}

\n
\n
\n `,t.content.appendChild(t.separatorContainer),t.separatorAdded=!0}(0,n.L2)(e,t,"\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(t){const e=t._hass,o=t.editor,i=t.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:A,haStyle:L,themeBgColor:I,color:T}=v(t,i,e);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=!!t.config.show_state&&t.config.show_state;if(s="open"===e.states[i.entity].state?D:V,m=u?e.formatEntityState(e.states[r]):m||"",!t.coverAdded||o){if(o&&t.coverContainer)for(;t.coverContainer.firstChild;)t.coverContainer.removeChild(t.coverContainer.firstChild);t.coverContainer=document.createElement("div"),t.coverContainer.setAttribute("class","cover-container"),t.coverContainer.innerHTML=`\n
\n
\n
\n
\n

${l}

\n

\n
\n
\n
\n \n \n \n
\n `,t.content.appendChild(t.coverContainer);const n=t.coverContainer.querySelector(".open"),a=t.coverContainer.querySelector(".stop"),s=t.coverContainer.querySelector(".close");n.addEventListener("click",(()=>{e.callService(M.split(".")[0],M.split(".")[1],{entity_id:r})}),{passive:!0}),a.addEventListener("click",(()=>{e.callService(B.split(".")[0],B.split(".")[1],{entity_id:r})}),{passive:!0}),s.addEventListener("click",(()=>{e.callService(z.split(".")[0],z.split(".")[1],{entity_id:r})}),{passive:!0}),t.iconContainer=t.content.querySelector(".icon-container"),_(t.iconContainer,i),t.coverAdded=!0}t.iconContainer&&(u||o)&&(t.iconContainer.innerHTML=``,t.content.querySelector(".state").textContent=H?m:""),(0,n.L2)(e,t,"\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(t){if(!t.emptyCollumnAdded){const e=document.createElement("div");e.setAttribute("class","empty-column"),e.innerHTML='\n
\n ',t.content.appendChild(e),t.emptyColumnAdded=!0}}(this)}}setConfig(t){if("pop-up"===t.card_type){if(!t.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"===t.card_type){var e={};for(var n in t)if(n.match(/^\d+_icon$/)){var o=n.replace("_icon","_link");if(void 0===t[o])throw new Error("You need to define "+o);if(e[t[o]])throw new Error("You can't use "+t[o]+" twice");e[t[o]]=!0}}else if(("button"===t.card_type||"cover"===t.card_type)&&!t.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=t}getCardSize(){return-1e4}static getConfigElement(){return document.createElement("bubble-card-editor")}}customElements.define("bubble-card",$),customElements.define("bubble-card-editor",class extends w{setConfig(t){this._config={...t}}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 _back_open(){return this._config.back_open||!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.highlightCurrentview||!1}get _show_state(){return this._config.show_state||!1}render(){if(!this.hass)return x``;if(!this.listsUpdated){const t=t=>({label:t,value:t});this.allEntitiesList=Object.keys(this.hass.states).map(t),this.lightList=Object.keys(this.hass.states).filter((t=>"light"===t.substr(0,t.indexOf(".")))).map(t),this.sensorList=Object.keys(this.hass.states).filter((t=>"sensor"===t.substr(0,t.indexOf(".")))).map(t),this.binarySensorList=Object.keys(this.hass.states).filter((t=>"binary_sensor"===t.substr(0,t.indexOf(".")))).map(t),this.coverList=Object.keys(this.hass.states).filter((t=>"cover"===t.substr(0,t.indexOf(".")))).map(t),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 e=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.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:T,themeBgColor:I,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 B=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(${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: ${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,U,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:T,bgBlur:I,iconColorOpacity:D,iconColor:V,iconFilter:M,iconStyles:z,haStyle:B,themeBgColor:U,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.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}),E=W+!0,document.body.style.overflow="hidden",setTimeout((()=>{window.justOpened=!0}),10),ae(e.popUp,!1),Q(),setTimeout((function(){X?(window.addEventListener("mouseup",J,{passive:!0}),window.addEventListener("touchend",J,{passive:!0})):window.addEventListener("click",Z,{passive:!0})}),10)):e.popUp.classList.contains("open-pop-up")&&(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),E=W+!1,document.body.style.overflow="",window.justOpened=!1,clearTimeout(d),setTimeout((function(){window.removeEventListener("mouseup",J),window.removeEventListener("touchend",J),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:T,themeBgColor:I,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:"",B=s?t.states[s].attributes.volume_level||0:"",U=!1,q=z,H=B,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")&&(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}),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(){U=!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.")&&(B=H,t.callService("media_player","volume_set",{entity_id:s,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?(i("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;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*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 ${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:T}=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:T,color:I}=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",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||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(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"),_(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`
${this.makeDropdown("Card type","card_type",o)}

Pop-up @@ -28,8 +28,8 @@ style="width: 100%;" > ${this.makeDropdown("Optional - Icon","icon")} - ${this.makeDropdown("Optional - Entity to toggle (e.g. room light group)","entity",e)} - ${this.makeDropdown("Optional - Entity state to display (e.g. room temperature)","state",e)} + ${this.makeDropdown("Optional - Entity to toggle (e.g. room light group)","entity",t)} + ${this.makeDropdown("Optional - Entity state to display (e.g. room temperature)","state",t)} + + +
+ +
+

Pop-up trigger

This allows you to open this pop-up based on the state of any entity, for example you can open a "Security" pop-up with a camera when a person is in front of your house. You can also create a toggle helper (input_boolean) and trigger its opening/closing in an automation. - ${this.makeDropdown("Optional - Entity to open the pop-up based on its state","trigger_entity",e)} + ${this.makeDropdown("Optional - Entity to open the pop-up based on its state","trigger_entity",t)} Button This card can be a slider or a button, allowing you to toggle your entities, control the brightness of your lights and the volume of your media players. To access color / control of an entity, simply tap on the icon. - ${this.makeDropdown("slider"!==this._button_type?"Entity (toggle)":"Entity (light or media_player)","entity",e)} + ${this.makeDropdown("slider"!==this._button_type?"Entity (toggle)":"Entity (light or media_player)","entity",t)} - `;if("horizontal-buttons-stack"===this._config.card_type){if(!this.buttonAdded&&this.shadowRoot.querySelector("#add-button")){this.buttonAdded=!0;const t=this.shadowRoot.querySelector("#add-button");for(this.buttonIndex=0;this._config[this.buttonIndex+1+"_link"];)this.buttonIndex++;t.addEventListener("click",(()=>{this.buttonIndex++;const e=t.style.opacity,n=t.innerText;t.style.opacity="0.6",t.style.transition="opacity 1s",t.innerText="Loading...",setTimeout((()=>{t.style.opacity=e,t.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 x`
${this.makeDropdown("Card type","card_type",o)}

Horizontal buttons stack

@@ -256,7 +267,7 @@
@@ -329,7 +340,7 @@ ${this.makeDropdown("Card type","card_type",o)} You need to add a card type first. -

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

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

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.

@@ -341,12 +352,12 @@
${this.makeVersion()}
- `}makeDropdown(t,e,n){return this.hass,t.includes("icon")||t.includes("Icon")?x` + `}makeDropdown(e,t,n){return this.hass,e.includes("icon")||e.includes("Icon")?x`
- `}makeButton(){let t=[];for(let e=1;e<=this.buttonIndex;e++)t.push(x` -
+ `}makeButton(){let e=[];for(let t=1;t<=this.buttonIndex;t++)e.push(x` +
- this.removeButton(e)}> - Button ${e} + this.removeButton(t)}> + Button ${t}
- `);return t}makeVersion(){return x` + `);return e}makeVersion(){return x`

- ${t} + ${e}

- `}removeButton(t){delete this._config[t+"_name"],delete this._config[t+"_icon"],delete this._config[t+"_link"],delete this._config[t+"_entity"],delete this._config[t+"_pir_sensor"];for(let e=t;e{"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.1";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")))||$!==R+!0||setTimeout((function(){window.hash===R&&document.body.contains(e.target)&&($=R+!1,history.replaceState(null,null,location.href.split("#")[0]),n(window,"location-changed",!0),localStorage.setItem("isManuallyClosed_"+R,!0))}),0)}function X(){clearTimeout(d),B>0&&(d=setTimeout(Q,B))}function Q(){history.replaceState(null,null,location.href.split("#")[0]),n(window,"location-changed",!0)}function Z(){!function(e,t){e.callService("homeassistant","toggle",{entity_id:t})}(i,h)}function ee(e){"Escape"===e.key&&($=R+!1,history.replaceState(null,null,location.href.split("#")[0]),n(window,"location-changed",!0),localStorage.setItem("isManuallyClosed_"+R,!0))}function te(e){window.hash===R&&X(),s=e.touches[0].clientY,l=s}function ne(e){e.touches[0].clientY-s>300&&e.touches[0].clientY>l&&($=R+!1,history.replaceState(null,null,location.href.split("#")[0]),n(window,"location-changed",!0),localStorage.setItem("isManuallyClosed_"+R,!0)),l=e.touches[0].clientY}function oe(){a||(window.hash=location.hash.split("?")[0],window.hash===R?(window.removeEventListener("click",J),e.popUp.classList.remove("close-pop-up"),e.popUp.classList.add("open-pop-up"),e.content.querySelector(".power-button").addEventListener("click",Z,{passive:!0}),window.addEventListener("keydown",ee,{passive:!0}),e.popUp.addEventListener("touchstart",te,{passive:!0}),e.popUp.addEventListener("touchmove",ne,{passive:!0}),$=R+!0,document.body.style.overflow="hidden",setTimeout((()=>{window.justOpened=!0}),10),ie(e.popUp,!1),X(),setTimeout((function(){window.addEventListener("click",J,{passive:!0})}),10)):e.popUp.classList.contains("open-pop-up")&&(e.popUp.classList.remove("open-pop-up"),e.popUp.classList.add("close-pop-up"),e.content.querySelector(".power-button").removeEventListener("click",Z),window.removeEventListener("keydown",ee),e.popUp.removeEventListener("touchstart",te),e.popUp.removeEventListener("touchmove",ne),$=R+!1,document.body.style.overflow="",window.justOpened=!1,clearTimeout(d),setTimeout((function(){ie(e.popUp,!0)}),320)))}function ie(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(){history.replaceState(null,null,location.href.split("#")[0]),n(window,"location-changed",!0),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(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_"+R]=oe,window.addEventListener("urlChanged",window["checkHashRef_"+R],{passive:!0}),window.addEventListener("click",J,{passive:!0}),e.eventAdded=!0);const s=` \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% + ${G} + 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% + ${K} + var(--header-height));\n width: calc(${f}${"%"!==y[2]||v?"":" - 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]} + ${v?"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 `,l=`\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,s,p,w,h,"","",o),(0,t.L2)(i,e,l,p,w,h,x)}e.initStyleAdded||e.popUp||a||(e.card.style.marginTop="4000px",e.initStyleAdded=!0);const re=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 ae();ae(),clearTimeout(re);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&&W&&x&&(()=>{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 t=localStorage.getItem("previousTriggerState_"+R),a="true"===localStorage.getItem("isManuallyClosed_"+R),r="true"===localStorage.getItem("isTriggered_"+R);i.states[W].state!==F||null!==t||r||(o(0,R),r=!0,localStorage.setItem("isTriggered_"+R,r)),i.states[W].state!==t&&(a=!1,localStorage.setItem("previousTriggerState_"+R,i.states[W].state),localStorage.setItem("isManuallyClosed_"+R,a)),i.states[W].state!==F||a?i.states[W].state!==F&&N&&e.popUp.classList.contains("open-pop-up")&&r&&!a&&(history.replaceState(null,null,location.href.split("#")[0]),n(window,"location-changed",!0),$=R+!1,r=!1,a=!0,localStorage.setItem("isManuallyClosed_"+R,a),localStorage.setItem("isTriggered_"+R,r)):(o(0,R),r=!0,localStorage.setItem("isTriggered_"+R,r))})()}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.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?(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}),$=B+!0,document.body.style.overflow="hidden",setTimeout((()=>{window.justOpened=!0}),10),ae(e.popUp,!1),Z(),setTimeout((function(){G?(window.addEventListener("mouseup",Q,{passive:!0}),window.addEventListener("touchend",Q,{passive:!0})):window.addEventListener("click",X,{passive:!0})}),10)):e.popUp.classList.contains("open-pop-up")&&(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),$=B+!1,document.body.style.overflow="",window.justOpened=!1,clearTimeout(d),setTimeout((function(){window.removeEventListener("mouseup",Q),window.removeEventListener("touchend",Q),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}${"%"!==y[2]||v?"":" - 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]} + ${v?"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 ${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`

Pop-up {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)}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-1e4}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 + `}}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 diff --git a/hacs.json b/hacs.json index f8a39a68..233285f4 100644 --- a/hacs.json +++ b/hacs.json @@ -3,5 +3,5 @@ "content_in_root": false, "render_readme": true, "filename": "bubble-card.js", - "homeassistant": "2023.9.0" + "homeassistant": "2023.9.0", } diff --git a/src/bubble-card.ts b/src/bubble-card.ts index 27fa2dec..517761a6 100644 --- a/src/bubble-card.ts +++ b/src/bubble-card.ts @@ -10,6 +10,8 @@ import { handleEmptyColumn } from './cards/empty-column.ts'; import BubbleCardEditor from './editor/bubble-card-editor.ts'; let editor; +let cardSize; + addUrlListener(); class BubbleCard extends HTMLElement { @@ -56,6 +58,10 @@ class BubbleCard extends HTMLElement { handleEmptyColumn(this); break; } + + if (!window.columnFix) { + window.columnFix = this.config.column_fix + } } setConfig(config) { @@ -97,7 +103,7 @@ class BubbleCard extends HTMLElement { getCardSize() { // Fix the empty columns caused by the pop-ups on the dashboard - return -10000; + return window.columnFix ? 0 : -1; } static getConfigElement() { diff --git a/src/bubble-pop-up.ts b/src/bubble-pop-up.ts index 3ddbb647..18ed8f24 100644 --- a/src/bubble-pop-up.ts +++ b/src/bubble-pop-up.ts @@ -20,6 +20,10 @@ class BubblePopUp extends HTMLElement { // Initialize pop-up card handlePopUp(this); + + if (!window.columnFix) { + window.columnFix = this.config.column_fix + } } setConfig(config) { @@ -31,7 +35,7 @@ class BubblePopUp extends HTMLElement { getCardSize() { // Fix the empty columns caused by the pop-ups on the dashboard - return -10000; + return window.columnFix ? 0 : -1; } static getConfigElement() { diff --git a/src/cards/button.ts b/src/cards/button.ts index daab21fd..ee870359 100644 --- a/src/cards/button.ts +++ b/src/cards/button.ts @@ -50,8 +50,8 @@ export function handleButton(context) { } = getVariables(context, context.config, hass, editor); formatedState = entityId && (stateChanged || editor) ? hass.formatEntityState(hass.states[entityId]) : ''; - const buttonType = context.config.button_type || 'switch'; - const showState = !context.config.show_state ? false : context.config.show_state; + let buttonType = context.config.button_type || 'switch'; + let showState = !context.config.show_state ? false : context.config.show_state; let currentBrightness = !entityId ? '' : hass.states[entityId].attributes.brightness || 0; let currentVolume = !entityId ? '' : hass.states[entityId].attributes.volume_level || 0; let isDragging = false; @@ -62,6 +62,8 @@ export function handleButton(context) { let startValue = 0; let movingVertically = false; let timeoutId = null; + let serviceOn = context.config.service_on || 'homeassistant.toggle'; + let serviceOff = context.config.service_off || 'homeassistant.toggle'; if (!context.buttonAdded) { const buttonContainer = document.createElement("div"); diff --git a/src/cards/horizontal-buttons-stack.ts b/src/cards/horizontal-buttons-stack.ts index ff71f7a2..4d042ecc 100644 --- a/src/cards/horizontal-buttons-stack.ts +++ b/src/cards/horizontal-buttons-stack.ts @@ -94,7 +94,7 @@ export function handleHorizontalButtonsStack(context) { } function highlightButton() { - if (context.config.highlightCurrentview) { + if (context.config.highlight_current_view) { const isShown = location.pathname === link || location.hash === link; if (isShown) { buttonElement.classList.add("highlight"); diff --git a/src/cards/pop-up.ts b/src/cards/pop-up.ts index 3ba31052..2a293e29 100644 --- a/src/cards/pop-up.ts +++ b/src/cards/pop-up.ts @@ -69,6 +69,7 @@ export function handlePopUp(context) { let displayPowerButton = config.entity ? 'flex' : 'none'; let text = config.text || ''; let stateEntityId = config.state; + let closeOnClick = config.close_on_click || false; let marginTopMobile = config.margin_top_mobile ? (config.margin_top_mobile !== '0' ? config.margin_top_mobile : '0px') : '0px'; @@ -123,8 +124,7 @@ export function handlePopUp(context) { context.button = document.createElement("button"); context.button.setAttribute("class", "close-pop-up"); context.button.onclick = function() { - history.replaceState(null, null, location.href.split('#')[0]); - fireEvent(window, "location-changed", true); + removeHash(); localStorage.setItem('isManuallyClosed_' + popUpHash, true); }; context.headerContainer.appendChild(context.button); @@ -169,8 +169,7 @@ export function handlePopUp(context) { // Vérifiez si le clic a été effectué sur le corps de la page if (document.body.contains(e.target)) { popUpOpen = popUpHash + false; - history.replaceState(null, null, location.href.split('#')[0]); - fireEvent(window, "location-changed", true); + removeHash(); localStorage.setItem('isManuallyClosed_' + popUpHash, true); } } @@ -178,20 +177,20 @@ export function handlePopUp(context) { } } + function removeHash() { + history.replaceState(null, null, location.href.split('#')[0]); + fireEvent(window, "location-changed", true); + } + function resetAutoClose() { // Clear any existing timeout clearTimeout(closeTimeout); // Start autoclose if enabled if (autoClose > 0) { - closeTimeout = setTimeout(autoClosePopUp, autoClose); + closeTimeout = setTimeout(removeHash, autoClose); } } - function autoClosePopUp(){ - history.replaceState(null, null, location.href.split('#')[0]); - fireEvent(window, "location-changed", true); - } - function powerButtonClickHandler() { toggleEntity(hass, entityId); } @@ -199,8 +198,7 @@ export function handlePopUp(context) { function windowKeydownHandler(e) { if (e.key === 'Escape') { popUpOpen = popUpHash + false; - history.replaceState(null, null, location.href.split('#')[0]); - fireEvent(window, "location-changed", true); + removeHash(); localStorage.setItem('isManuallyClosed_' + popUpHash, true) } } @@ -223,8 +221,7 @@ 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; - history.replaceState(null, null, location.href.split('#')[0]); - fireEvent(window, "location-changed", true); + removeHash(); localStorage.setItem('isManuallyClosed_' + popUpHash, true) } @@ -293,41 +290,45 @@ export function handlePopUp(context) { } } - function openPopUp() { - window.removeEventListener('click', closePopUpByClickingOutside); - context.popUp.classList.remove('close-pop-up'); - context.popUp.classList.add('open-pop-up'); - context.content.querySelector('.power-button').addEventListener('click', powerButtonClickHandler, { passive: true }); - window.addEventListener('keydown', windowKeydownHandler, { passive: true }); - context.popUp.addEventListener('touchstart', popUpTouchstartHandler, { passive: true }); - context.popUp.addEventListener('touchmove', popUpTouchmoveHandler, { passive: true }); - popUpOpen = popUpHash + true; - document.body.style.overflow = 'hidden'; // Fix scroll inside pop-ups only - setTimeout(() => { window.justOpened = true; }, 10); - pauseVideos(context.popUp, false); - resetAutoClose(); + function openPopUp() { + context.popUp.classList.remove('close-pop-up'); + context.popUp.classList.add('open-pop-up'); + context.content.querySelector('.power-button').addEventListener('click', powerButtonClickHandler, { passive: true }); + window.addEventListener('keydown', windowKeydownHandler, { passive: true }); + context.popUp.addEventListener('touchstart', popUpTouchstartHandler, { passive: true }); + context.popUp.addEventListener('touchmove', popUpTouchmoveHandler, { passive: true }); + popUpOpen = popUpHash + true; + document.body.style.overflow = 'hidden'; // Fix scroll inside pop-ups only + setTimeout(() => { window.justOpened = true; }, 10); + pauseVideos(context.popUp, false); + resetAutoClose(); setTimeout(function() { - window.addEventListener('click', closePopUpByClickingOutside, { passive: true }); + if (closeOnClick) { + window.addEventListener('mouseup', removeHash, { passive: true }); + window.addEventListener('touchend', removeHash, { passive: true }); + } else { + window.addEventListener('click', closePopUpByClickingOutside, { passive: true }); + } }, 10); - } - - function closePopUp() { - 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); - context.popUp.removeEventListener('touchstart', popUpTouchstartHandler); - context.popUp.removeEventListener('touchmove', popUpTouchmoveHandler); - popUpOpen = popUpHash + false; - document.body.style.overflow = ''; - window.justOpened = false; - clearTimeout(closeTimeout); - setTimeout(function() { - pauseVideos(context.popUp, true); - }, 320); - } + } - // This function can be optimized by + function closePopUp() { + 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); + context.popUp.removeEventListener('touchstart', popUpTouchstartHandler); + context.popUp.removeEventListener('touchmove', popUpTouchmoveHandler); + popUpOpen = popUpHash + false; + document.body.style.overflow = ''; + window.justOpened = false; + clearTimeout(closeTimeout); + setTimeout(function() { + window.removeEventListener('mouseup', removeHash); + window.removeEventListener('touchend', removeHash); + pauseVideos(context.popUp, true); + }, 320); + } function createPopUp() { let popUp = context.popUp; @@ -339,8 +340,6 @@ export function handlePopUp(context) { if (!context.eventAdded && !editor) { window['checkHashRef_' + popUpHash] = checkHash; window.addEventListener('urlChanged', window['checkHashRef_' + popUpHash], { passive: true }); - window.addEventListener('click', closePopUpByClickingOutside, { passive: true }); - context.eventAdded = true; } @@ -575,8 +574,7 @@ export function handlePopUp(context) { isTriggered = true; localStorage.setItem('isTriggered_' + popUpHash, isTriggered); } else if (hass.states[triggerEntity].state !== triggerState && triggerClose && context.popUp.classList.contains('open-pop-up') && isTriggered && !isManuallyClosed) { - history.replaceState(null, null, location.href.split('#')[0]); - fireEvent(window, "location-changed", true); + removeHash(); popUpOpen = popUpHash + false; isTriggered = false; isManuallyClosed = true; diff --git a/src/editor/bubble-card-editor.ts b/src/editor/bubble-card-editor.ts index 18c18e8e..c0aad080 100644 --- a/src/editor/bubble-card-editor.ts +++ b/src/editor/bubble-card-editor.ts @@ -108,8 +108,8 @@ export default class BubbleCardEditor extends LitElement { return this._config.auto_close || ''; } - get _back_open() { - return this._config.back_open || false; + get _close_on_click() { + return this._config.close_on_click || false; } get _icon_open() { @@ -137,7 +137,7 @@ export default class BubbleCardEditor extends LitElement { } get _highlightCurrentview() { - return this._config.highlightCurrentview || false; + return this._config.highlight_current_view || false; } get _show_state() { @@ -270,6 +270,17 @@ export default class BubbleCardEditor extends LitElement { @input="${this._valueChanged}" style="width: 100%;" > + + +
+ +
+

Pop-up trigger

This allows you to open this pop-up based on the state of any entity, for example you can open a "Security" pop-up with a camera when a person is in front of your house. You can also create a toggle helper (input_boolean) and trigger its opening/closing in an automation. ${this.makeDropdown("Optional - Entity to open the pop-up based on its state", "trigger_entity", allEntitiesList)} @@ -510,7 +521,7 @@ export default class BubbleCardEditor extends LitElement {
diff --git a/src/tools/init.ts b/src/tools/init.ts index 434c6da3..82859d84 100644 --- a/src/tools/init.ts +++ b/src/tools/init.ts @@ -47,16 +47,6 @@ export async function checkResources(hass) { window.resourcesChecked = true; try { - // Reload the cache after every updates - - let currentVersion = version; - const storedVersion = localStorage.getItem('version'); - - if (storedVersion !== currentVersion) { - localStorage.setItem('version', currentVersion); - location.reload(); - } - // Check if bubble-pop-up.js is installed as a resource and remove it (fix for the previous 1.5.0/1 users) let resources = await hass.callWS({ type: "lovelace/resources" }); diff --git a/src/var/version.ts b/src/var/version.ts index 59b387c0..86aad3d9 100644 --- a/src/var/version.ts +++ b/src/var/version.ts @@ -1 +1 @@ -export let version = 'v1.6.1'; \ No newline at end of file +export let version = 'v1.6.3'; \ No newline at end of file