diff --git a/bubble-card.js b/bubble-card.js index 5f49215..5335fc0 100644 --- a/bubble-card.js +++ b/bubble-card.js @@ -1 +1 @@ -var version="v1.4.0";let editor,entityStates={},lastCall={entityId:null,stateChanged:null,timestamp:null};class BubbleCard extends HTMLElement{constructor(){if(super(),!window.eventAdded){const t=history.pushState;window.popUpInitialized=!1,history.pushState=function(){t.apply(history,arguments),window.dispatchEvent(new Event("pushstate"))};const e=history.replaceState;history.replaceState=function(){e.apply(history,arguments),window.dispatchEvent(new Event("replacestate"))},["pushstate","replacestate","click","popstate","mousedown","touchstart"].forEach((t=>{window.addEventListener(t,i)}),{passive:!0});const n=new Event("urlChanged");function i(){const t=window.location.href;t!==this.currentUrl&&(window.dispatchEvent(n),this.currentUrl=t)}const o=()=>{window.dispatchEvent(n),window.addEventListener("popstate",i,{passive:!0})};window.addEventListener("popUpInitialized",o,{passive:!0}),window.eventAdded=!0}}set hass(hass){if(!this.content){this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML='\n \n
\n
\n \n ',this.card=this.shadowRoot.querySelector("ha-card"),this.content=this.shadowRoot.querySelector("div");const t=new Promise((t=>{t(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"))}));t.then((t=>{this.editorElement=t}))}function toggleEntity(t){hass.callService("homeassistant","toggle",{entity_id:t})}function stateChanged(t){let e=Date.now();if(lastCall.entityId===t&&e-lastCall.timestamp<100)return lastCall.stateChanged;if(!hass.states[t]||!hass.states[t].state)return!1;let n=hass.states[t].state,i=hass.states[t].attributes.rgb_color;entityStates[t]||(entityStates[t]={prevState:null,prevColor:null});let o=entityStates[t].prevState!==n||entityStates[t].prevColor!==i;return entityStates[t].prevState=n,entityStates[t].prevColor=i,lastCall={entityId:t,stateChanged:o,timestamp:e},o}this.editorElement&&(editor=this.editorElement.classList.contains("edit-mode"));const addStyles=function(context,styles,customStyles,state,entityId,stateChangedVar,path="",element=context.content){const customStylesEval=customStyles?eval("`"+customStyles+"`"):"";let styleAddedKey=styles+"Added";if(!context[styleAddedKey]||context.previousStyle!==customStylesEval||stateChangedVar){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}context.styleElement.innerHTML!==customStylesEval+styles&&(context.styleElement.innerHTML=customStylesEval+styles),context.previousStyle=customStylesEval}},forwardHaptic=t=>{fireEvent(window,"haptic",t)},navigate=(t,e,n=!1)=>{n?history.replaceState(null,"",e):history.pushState(null,"",e),fireEvent(window,"location-changed",{replace:n})},handleActionConfig=(t,e,n,i)=>{if(!i.confirmation||i.confirmation.exemptions&&i.confirmation.exemptions.some((t=>t.user===e.user.id))||(forwardHaptic("warning"),confirm(i.confirmation.text||`Are you sure you want to ${i.action}?`)))switch(i.action){case"more-info":(this.config.entity||this.config.camera_image)&&fireEvent(t,"hass-more-info",{entityId:this.config.entity?this.config.entity:this.config.camera_image});break;case"navigate":i.navigation_path&&navigate(t,i.navigation_path);break;case"url":i.url_path&&window.open(i.url_path);break;case"toggle":this.config.entity&&(toggleEntity(this.config.entity),forwardHaptic("success"));break;case"call-service":{if(!i.service)return void forwardHaptic("failure");const[t,n]=i.service.split(".",2);e.callService(t,n,i.service_data,i.target),forwardHaptic("success");break}case"fire-dom-event":fireEvent(t,"ll-custom",i)}},handleAction=(t,e,n,i)=>{let o;"double_tap"===i&&this.config.double_tap_action?o=this.config.double_tap_action:"hold"===i&&this.config.hold_action?o=this.config.hold_action:"tap"===i&&this.config.tap_action?o=this.config.tap_action:"double_tap"!==i||this.config.double_tap_action?("hold"!==i||this.config.hold_action)&&("tap"!==i||this.config.tap_action)||(o={action:"more-info"}):o={action:"toggle"},handleActionConfig(t,e,n,o)},addAction=function(){let t,e;return function(n,i,o,a){o.addEventListener(n,(()=>{const i=(new Date).getTime();"click"===n?i-(e||0)<250?(clearTimeout(t),handleAction(a,hass,{},"double_tap")):t=setTimeout((()=>{handleAction(a,hass,{},"tap")}),250):handleAction(a,hass,{},"hold"),e=i}),{passive:!0})}}();function addActions(t,e){addAction("click","tap",e,t),addAction("contextmenu","hold",e,t)}function createIcon(t,e,n,i){if(t&&t.states&&t.states[e]&&t.states[e].attributes.entity_picture&&!this.config.icon){const n=document.createElement("img");n.setAttribute("src",t.states[e].attributes.entity_picture),n.setAttribute("class","entity-picture"),n.setAttribute("alt","Icon"),i.appendChild(n)}else{const t=document.createElement("ha-icon");t.setAttribute("icon",n),t.setAttribute("class","icon"),i.appendChild(t)}}let haStyle,themeBgColor;haStyle=haStyle||getComputedStyle(document.body),themeBgColor=themeBgColor||haStyle.getPropertyValue("--ha-card-background")||haStyle.getPropertyValue("--card-background-color");let color=this.config.bg_color?this.config.bg_color:themeBgColor,bgOpacity=void 0!==this.config.bg_opacity?this.config.bg_opacity:"88",rgbaColor;function convertToRGBA(t,e){let n="";if(t.startsWith("#")){n="rgba("+parseInt(t.slice(1,3),16)+", "+parseInt(t.slice(3,5),16)+", "+parseInt(t.slice(5,7),16)+", "+e+")"}else if(t.startsWith("rgb")){let i=t.match(/\d+/g);n="rgba("+i[0]+", "+i[1]+", "+i[2]+", "+e+")"}return n}rgbaColor&&!editor||(rgbaColor=convertToRGBA(color,bgOpacity/100),window.color=color);let customStyles=this.config.styles?this.config.styles:"",entityId=this.config.entity?this.config.entity:"",icon=!this.config.icon&&this.config.entity?hass.states[entityId].attributes.icon||hass.states[entityId].attributes.entity_picture||"":this.config.icon||"",name=this.config.name?this.config.name:this.config.entity?hass.states[entityId].attributes.friendly_name:"",widthDesktop=this.config.width_desktop||"540px",widthDesktopDivided=widthDesktop?widthDesktop.match(/(\d+)(\D+)/):"",shadowOpacity=void 0!==this.config.shadow_opacity?this.config.shadow_opacity:"0",bgBlur=void 0!==this.config.bg_blur?this.config.bg_blur:"10",isSidebarHidden=this.config.is_sidebar_hidden||!1,state=entityId?hass.states[entityId].state:"",stateOn=["on","open","cleaning","true","home","playing"].includes(state)||0!==Number(state)&&!isNaN(Number(state)),formatedState,autoClose=this.config.auto_close||!1,riseAnimation=void 0===this.config.rise_animation||this.config.rise_animation,marginCenter=this.config.margin?"0"!==this.config.margin?this.config.margin:"0px":"7px",popUpHash=this.config.hash,popUpOpen;switch(this.config.card_type){case"pop-up":this.initStyleAdded||this.host||editor||(this.card.style.marginTop="2000px",this.initStyleAdded=!0);const e=()=>{if(this.host){if(!this.popUp){if(this.verticalStack=this.getRootNode(),this.popUp=this.verticalStack.querySelector("#root"),!window.popUpInitialized&&this.popUp){this.config.back_open||!1?localStorage.setItem("backOpen",!0):localStorage.setItem("backOpen",!1);if("true"===localStorage.getItem("backOpen")){window.backOpen=!0;const m=new Event("popUpInitialized");setTimeout((()=>{window.dispatchEvent(m)}),10)}else window.backOpen=!1,popUpOpen=popUpHash+!1,history.replaceState(null,null,location.href.split("#")[0]);window.popUpInitialized=!0}this.card.style.marginTop="0"}const t=this.popUp,e=this.config.text||"",n=this.config.state;formatedState=n?hass.formatEntityState(hass.states[n])+" "+e:e;const i=this.config.margin_top_mobile&&"0"!==this.config.margin_top_mobile?this.config.margin_top_mobile:"0px",o=this.config.margin_top_desktop&&"0"!==this.config.margin_top_desktop?this.config.margin_top_desktop:"0px",a=this.config.entity?"flex":"none";let s,r;if(state=n?hass.states[n].state:"",this.headerAdded){if(entityId||editor){const f=this.content.querySelector("#header-container .header-icon"),b=this.content.querySelector("#header-container h2"),y=this.content.querySelector("#header-container p"),v=this.content.querySelector("#header-container .power-button");f.innerHTML="",createIcon(hass,entityId,icon,f),b.textContent=name,y.textContent=formatedState,v.setAttribute("style",`display: ${a};`)}}else{const _=document.createElement("div");_.setAttribute("id","header-container");const w=document.createElement("div");_.appendChild(w);const x=document.createElement("div");x.setAttribute("class","header-icon"),w.appendChild(x),createIcon(hass,entityId,icon,x),addActions(this,x);const k=document.createElement("h2");k.textContent=name,w.appendChild(k);const C=document.createElement("p");C.textContent=formatedState,w.appendChild(C);const $=document.createElement("ha-icon");$.setAttribute("class","power-button"),$.setAttribute("icon","mdi:power"),$.setAttribute("style",`display: ${a};`),w.appendChild($);const S=document.createElement("button");S.setAttribute("class","close-pop-up"),S.onclick=function(){history.replaceState(null,null,location.href.split("#")[0]),localStorage.setItem("isManuallyClosed_"+popUpHash,!0)},_.appendChild(S);const E=document.createElement("ha-icon");E.setAttribute("icon","mdi:close"),S.appendChild(E),this.content.appendChild(_),this.header=w,this.headerAdded=!0}if(!this.eventAdded&&!editor){let I,O;window["checkHashRef_"+popUpHash]=l,window.addEventListener("urlChanged",window["checkHashRef_"+popUpHash],{passive:!0}),this.content.querySelector(".power-button").addEventListener("click",(()=>{toggleEntity(entityId)}),{passive:!0}),window.addEventListener("click",(function(t){if(location.hash===popUpHash&&h(),!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")))||popUpOpen!==popUpHash+!0||(popUpOpen=popUpHash+!1,history.replaceState(null,null,location.href.split("#")[0]),localStorage.setItem("isManuallyClosed_"+popUpHash,!0))}),{passive:!0}),window.addEventListener("keydown",(function(t){"Escape"===t.key&&(popUpOpen=popUpHash+!1,history.replaceState(null,null,location.href.split("#")[0]),localStorage.setItem("isManuallyClosed_"+popUpHash,!0))}),{passive:!0}),t.addEventListener("touchstart",(function(t){location.hash===popUpHash&&h(),I=t.touches[0].clientY,O=I}),{passive:!0}),t.addEventListener("touchmove",(function(t){t.touches[0].clientY-I>300&&t.touches[0].clientY>O&&(popUpOpen=popUpHash+!1,history.replaceState(null,null,location.href.split("#")[0]),popUpOpen=popUpHash+!1,localStorage.setItem("isManuallyClosed_"+popUpHash,!0)),O=t.touches[0].clientY}),{passive:!0}),this.eventAdded=!0}if(entityId){const A=hass.states[entityId].attributes.rgb_color;this.rgbColor=A?`rgb(${A})`:"var(--accent-color)";const L=A&&stateOn?`rgba(${A}, 0.5)`:stateOn?"var(--accent-color)":"var(--background-color,var(--secondary-background-color))";this.header.style.backgroundColor=L,r=convertToRGBA(color,0),this.colorAdded=!0}function l(){if(!editor){location.hash.split("?")[0]===popUpHash?c():t.classList.contains("open-pop-up")&&d()}}function c(){t.classList.remove("close-pop-up"),t.classList.add("open-pop-up"),popUpOpen=popUpHash+!0,setTimeout((()=>{window.justOpened=!0}),10),h()}function d(){t.classList.remove("open-pop-up"),t.classList.add("close-pop-up"),popUpOpen=popUpHash+!1,window.justOpened=!1,clearTimeout(s)}function h(){clearTimeout(s),autoClose>0&&(s=setTimeout(p,autoClose))}function p(){history.replaceState(null,null,location.href.split("#")[0])}const u=`\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 transition: all 1s;\n position: fixed !important;\n margin: 0 -${marginCenter}; /* 7px */\n width: 100%;\n background-color: ${rgbaColor};\n box-shadow: 0px 0px 50px rgba(0,0,0,${shadowOpacity/100});\n backdrop-filter: blur(${bgBlur}px);\n -webkit-backdrop-filter: blur(${bgBlur}px);\n border-radius: 42px;\n box-sizing: border-box;\n top: calc(100% + ${i} + 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 > bubble-card: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, ${r} 0%, ${rgbaColor} 80%);\n z-index: 0;\n } \n #root::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n }\n #root > bubble-card: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 /*will-change: transform;*/\n transform: translateY(-100%);\n transition: transform .4s !important;\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(0%);\n transition: transform .4s !important;\n box-shadow: none;\n }\n @media only screen and (min-width: 768px) {\n #root {\n top: calc(100% + ${o} + var(--header-height));\n width: calc(${widthDesktop}${"%"!==widthDesktopDivided[2]||isSidebarHidden?"":" - var(--mdc-drawer-width)"}) !important;\n left: calc(50% - ${widthDesktopDivided[1]/2}${widthDesktopDivided[2]});\n margin: 0 !important;\n }\n } \n @media only screen and (min-width: 870px) {\n #root {\n left: calc(50% - ${widthDesktopDivided[1]/2}${widthDesktopDivided[2]} + ${isSidebarHidden?"0px":"var(--mdc-drawer-width) "+("%"===widthDesktopDivided[2]?"":"/ 2")});\n }\n } \n #root.editor {\n position: inherit !important;\n width: 100% !important;\n padding: 18px !important;\n }\n `,g=`\n #header-container {\n display: inline-flex;\n ${icon||name||entityId||state||e?"":"flex-direction: row-reverse;"}\n width: 100%;\n margin: 0;\n padding: 0;\n }\n #header-container > div {\n display: ${icon||name||entityId||state||e?"inline-flex":"none"};\n align-items: center;\n position: relative;\n padding: 6px;\n z-index: 1;\n flex-grow: 1;\n background-color: 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-icon {\n display: inline-flex;\n width: 38px;\n height: 38px;\n background-color: var(--card-background-color,var(--ha-card-background));\n border-radius: 100%;\n margin: 0 10px 0 0;\n cursor: ${this.config.entity||this.config.double_tap_action||this.config.tap_action||this.config.hold_action?"pointer":"default"}; \n flex-wrap: wrap;\n align-content: center;\n justify-content: center;\n overflow: hidden;\n }\n .header-icon > ha-icon {\n color: ${stateOn?this.rgbColor?this.rgbColor:"var(--accent-color)":"inherit"};\n opacity: ${stateOn?"1":"0.6"};\n filter: brightness(1.4);\n }\n .header-icon::before {\n content: '';\n position: absolute;\n width: 38px;\n height: 38px;\n display: block;\n opacity: 0.2;\n transition: background-color 1s;\n border-radius: 50%;\n background-color: ${stateOn?this.rgbColor?this.rgbColor:"var(--accent-color)":"var(--card-background-color,var(--ha-card-background))"};\n }\n .entity-picture {\n height: calc(100% + 16px);\n width: calc(100% + 16px);\n }\n #header-container h2 {\n display: inline-flex;\n margin: 0 18px 0 0;\n /*line-height: 0px;*/\n z-index: 1;\n font-size: 20px;\n }\n #header-container p {\n display: inline-flex;\n line-height: 0px;\n font-size: 16px;\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 `;addStyles(this,u,customStyles,state,entityId,"","",t),addStyles(this,g,customStyles,state,entityId,stateChanged(entityId)),editor?(t.classList.add("editor"),t.classList.remove("open-pop-up"),t.classList.remove("close-pop-up")):t.classList.remove("editor")}else this.host=this.getRootNode().host},n=this.config.trigger_entity?this.config.trigger_entity:"",i=this.config.trigger_state?this.config.trigger_state:"",o=!!this.config.trigger_close&&this.config.trigger_close,a=this.config.state;if(this.popUp)!editor&&this.wasEditing?(e(),this.wasEditing=!1):(popUpHash===location.hash&&(stateChanged(entityId)||stateChanged(a))||editor)&&(e(),editor&&(this.wasEditing=!0));else{let N=setInterval((()=>{e(),this.popUp&&clearInterval(N)}),0)}if(this.popUp&&stateChanged(n)&&hass.states[n]){null===localStorage.getItem("previousTriggerState_"+popUpHash)&&localStorage.setItem("previousTriggerState_"+popUpHash,""),null===localStorage.getItem("isManuallyClosed_"+popUpHash)&&localStorage.setItem("isManuallyClosed_"+popUpHash,"false"),null===localStorage.getItem("isTriggered_"+popUpHash)&&localStorage.setItem("isTriggered_"+popUpHash,"false");let G=localStorage.getItem("previousTriggerState_"+popUpHash),K="true"===localStorage.getItem("isManuallyClosed_"+popUpHash),Z="true"===localStorage.getItem("isTriggered_"+popUpHash);hass.states[n].state!==i||null!==G||Z||(navigate("",popUpHash),Z=!0,localStorage.setItem("isTriggered_"+popUpHash,Z)),hass.states[n].state!==G&&(K=!1,localStorage.setItem("previousTriggerState_"+popUpHash,hass.states[n].state),localStorage.setItem("isManuallyClosed_"+popUpHash,K)),hass.states[n].state!==i||K?hass.states[n].state!==i&&o&&this.popUp.classList.contains("open-pop-up")&&Z&&!K&&(history.replaceState(null,null,location.href.split("#")[0]),popUpOpen=popUpHash+!1,Z=!1,K=!0,localStorage.setItem("isManuallyClosed_"+popUpHash,K),localStorage.setItem("isTriggered_"+popUpHash,Z)):(navigate("",popUpHash),Z=!0,localStorage.setItem("isTriggered_"+popUpHash,Z))}break;case"horizontal-buttons-stack":const s=(t,e,n)=>{const i=document.createElement("button");return i.setAttribute("class",`button ${e.substring(1)}`),i.innerHTML=`\n ${""!==n?``:""}\n ${""!==t?`

${t}

`:""}\n `,i.hasListener||(i.addEventListener("click",(t=>{t.stopPropagation(),popUpOpen=location.hash+!0;localStorage.getItem("isManuallyClosed_"+e);popUpOpen!==e+!0?(navigate("",e),popUpOpen=e+!0):(history.replaceState(null,null,location.href.split("#")[0]),popUpOpen=e+!1)}),{passive:!0}),i.hasListener=!0),i};if(!this.buttonsAdded){const J=document.createElement("div");J.setAttribute("class","horizontal-buttons-stack-container"),this.content.appendChild(J),this.buttonsContainer=J}const r=(t,e)=>{if(hass.states[e].attributes.rgb_color){const n=hass.states[e].attributes.rgb_color,i=`rgba(${n[0]}, ${n[1]}, ${n[2]}, 0.5)`;t.style.backgroundColor=i,t.style.border="1px solid rgba(0,0,0,0)"}else hass.states[e].attributes.rgb_color||"on"!=hass.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 l=[],c=1;for(;this.config[c+"_link"];){const Q=c+"_",tt=this.config[Q+"name"]||"",et=this.config[Q+"pir_sensor"];icon=this.config[Q+"icon"]||"";const nt=this.config[Q+"link"],it=this.config[Q+"entity"];l.push({button:tt,pirSensor:et,icon:icon,link:nt,lightEntity:it}),c++}if(this.config.auto_order&&l.sort(((t,e)=>{if(t.pirSensor&&e.pirSensor){if("on"===hass.states[t.pirSensor].state&&"on"===hass.states[e.pirSensor].state){return hass.states[t.pirSensor].last_updated{const e=s(t.button,t.link,t.icon);ot[t.link]=e,this.buttonsContainer.appendChild(e)})),this.buttonsAdded=!0,this.buttons=ot}let d=0,h=12;async function p(){for(let t of l){let e=this.buttons[t.link];if(e){let n=await localStorage.getItem(`buttonWidth-${t.link}`),i=await localStorage.getItem(`buttonContent-${t.link}`);n&&"0"!==n&&i===e.innerHTML&&!editor||(n=e.offsetWidth,await localStorage.setItem(`buttonWidth-${t.link}`,n),await localStorage.setItem(`buttonContent-${t.link}`,e.innerHTML)),e.style.transform=`translateX(${d}px)`,d+=parseInt(n)+h}t.lightEntity&&r(e,t.lightEntity)}}p.call(this);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: ${marginCenter};\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: 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 white-space: nowrap;\n width: auto;\n border-radius: 25px;\n z-index: 1;\n padding: 16px;\n background: none;\n transition: background-color 1s, border 1s, transform 1s;\n color: var(--primary-text-color);\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: 768px) {\n .card-content {\n position: fixed;\n width: ${widthDesktop} !important;\n left: calc(50% - ${widthDesktopDivided[1]/2}${widthDesktopDivided[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(${widthDesktop}${"%"!==widthDesktopDivided[2]||isSidebarHidden?"":" - var(--mdc-drawer-width)"}) !important;\n left: calc(50% - ${widthDesktopDivided[1]/2}${widthDesktopDivided[2]} + ${!0===isSidebarHidden?"0px":"var(--mdc-drawer-width) "+("%"===widthDesktopDivided[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 \n .horizontal-buttons-stack.editor::before {\n top: -32px;\n left: -100%;\n background: none;\n width: 100%;\n height: 0;\n }\n \n .horizontal-buttons-stack-container.editor > .button {\n transition: background-color 0s, border 0s, transform 0s;\n }\n \n .horizontal-buttons-stack-container.editor {\n margin-left: 1px;\n }\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&&riseAnimation&&(this.content.style.animation="from-bottom 1.3s forwards",window.hasAnimated=!0,setTimeout((()=>{this.content.style.animation="none"}),1500)),addStyles(this,u,customStyles),editor?(this.buttonsContainer.classList.add("editor"),this.card.classList.add("editor")):(this.buttonsContainer.classList.remove("editor"),this.card.classList.remove("editor"));break;case"button":if(!this.buttonAdded){const at=document.createElement("div");at.setAttribute("class","button-container"),this.content.appendChild(at)}const g=this.config.button_type||"switch";formatedState=hass.formatEntityState(hass.states[entityId]);const m=!!this.config.show_state&&this.config.show_state;let f=entityId?hass.states[entityId].attributes.brightness||0:"",b=entityId?hass.states[entityId].attributes.volume_level||0:"",y=!1,v=f,_=b,w=0,x=0,k=0,C=!1,$=null;const S=stateChanged(entityId),E=document.createElement("div");E.setAttribute("class","icon-container"),this.iconContainer=E;const I=document.createElement("div");I.setAttribute("class","name-container");const O=document.createElement("div");O.setAttribute("class","switch-button");const A=document.createElement("div");A.setAttribute("class","range-slider");const L=document.createElement("div");if(L.setAttribute("class","range-fill"),entityId&&entityId.startsWith("light.")&&"slider"===g?L.style.transform=`translateX(${f/255*100}%)`:entityId&&entityId.startsWith("media_player.")&&"slider"===g&&(L.style.transform=`translateX(${100*b}%)`),!this.buttonContainer||editor){if(editor&&this.buttonContainer){for(;this.buttonContainer.firstChild;)this.buttonContainer.removeChild(this.buttonContainer.firstChild);this.eventAdded=!1,this.wasEditing=!0}this.buttonContainer=this.content.querySelector(".button-container"),"slider"!==g||this.buttonAdded&&!editor?("switch"===g||"custom"===g||editor)&&(this.buttonContainer.appendChild(O),O.appendChild(E),O.appendChild(I),this.switchButton=this.content.querySelector(".switch-button")):(this.buttonContainer.appendChild(A),A.appendChild(E),A.appendChild(I),A.appendChild(L),this.rangeFill=this.content.querySelector(".range-fill")),!hass.states[entityId].attributes.entity_picture&&!icon.startsWith("/api/image/")||this.config.icon?E.innerHTML=``:E.innerHTML=`Icon`,I.innerHTML=`\n

${name}

\n ${m?`

${formatedState}

`:""}\n `,this.buttonAdded=!0}function H(t){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 U(t){w=t.pageX||(t.touches?t.touches[0].pageX:0),x=t.pageY||(t.touches?t.touches[0].pageY:0),k=A.value,t.target!==E&&t.target!==E.querySelector("ha-icon")&&(y=!0,document.addEventListener("mouseup",D,{passive:!0}),document.addEventListener("touchend",D,{passive:!0}),document.addEventListener("mousemove",T,{passive:!0}),document.addEventListener("touchmove",T,{passive:!0}),$=setTimeout((()=>{B(t.pageX||t.touches[0].pageX),V(),$=null}),200))}function T(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-x)>Math.abs(e-w)?(clearTimeout($),D()):(document.removeEventListener("mousemove",T),document.removeEventListener("touchmove",T),document.addEventListener("mousemove",z,{passive:!0}),document.addEventListener("touchmove",z,{passive:!0}))}function D(){y=!1,C=!1,V(),document.removeEventListener("mouseup",D),document.removeEventListener("touchend",D),document.removeEventListener("mousemove",z),document.removeEventListener("touchmove",z)}function V(){entityId.startsWith("light.")?(f=v,hass.callService("light","turn_on",{entity_id:entityId,brightness:f})):b!==_&&entityId.startsWith("media_player.")&&(b=_,hass.callService("media_player","volume_set",{entity_id:entityId,volume_level:b}))}function z(t){const e=t.pageX||(t.touches?t.touches[0].pageX:0),n=t.pageY||(t.touches?t.touches[0].pageY:0);y&&Math.abs(e-w)>10?B(e):y&&Math.abs(n-x)>10&&(y=!1,A.value=k)}function B(t){const e=A.getBoundingClientRect(),n=Math.min(Math.max(t-e.left,0),e.width)/e.width;entityId.startsWith("light.")?v=Math.round(255*n):entityId.startsWith("media_player.")&&(_=n),L.style.transition="none",L.style.transform=`translateX(${100*n}%)`}if(m&&(this.content.querySelector(".state").textContent=formatedState),this.eventAdded||"switch"!==g?this.eventAdded||"slider"!==g?this.eventAdded||"custom"!==g||(O.addEventListener("click",(()=>H(this.switchButton)),{passive:!0}),addActions(this,this.switchButton),this.eventAdded=!0):(A.addEventListener("mousedown",U,{passive:!0}),A.addEventListener("touchstart",U,{passive:!0}),addActions(this,this.iconContainer),this.eventAdded=!0):(O.addEventListener("click",(()=>H(this.switchButton)),{passive:!0}),O.addEventListener("click",(function(t){t.target!==E&&t.target!==E.querySelector("ha-icon")&&toggleEntity(entityId)}),{passive:!0}),addActions(this,this.iconContainer),this.eventAdded=!0),this.isDragging||"slider"!==g||(this.rangeFill.style.transition="all .3s",entityId.startsWith("light.")?this.rangeFill.style.transform=`translateX(${f/255*100}%)`:entityId.startsWith("media_player.")&&(this.rangeFill.style.transform=`translateX(${100*b}%)`)),"slider"===g&&(!this.colorAdded||S||this.wasEditing)){if(entityId.startsWith("light.")){const st=hass.states[entityId].attributes.rgb_color,rt=st?`rgba(${st}, 0.5)`:"rgba(255, 255, 255, 0.5)";this.rgbColor=st?`rgb(${st})`:"rgba(255, 255, 255, 1)",this.rangeFill.style.backgroundColor=rt}else this.rangeFill.style.backgroundColor="var(--accent-color)";this.colorAdded=!0,this.wasEditing=!1}function M(t,e){if(e.buttonContainer.style.opacity="unavailable"!==t?"1":"0.5",["switch","custom"].includes(g)){const t=stateOn?"var(--accent-color)":"rgba(0,0,0,0)";O.style.backgroundColor=t}}S&&M(state,this);const Y=`\n ha-card {\n margin-top: 0 !important;\n background: none !important;\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 }\n \n .range-fill {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n }\n \n .switch-button {\n cursor: pointer !important;\n }\n \n .range-slider {\n cursor: ew-resize;\n }\n \n .range-fill {\n z-index: 0;\n width: 100%;\n left: -100%;\n }\n \n .icon-container {\n position: absolute;\n z-index: 1;\n width: 38px;\n height: 38px;\n margin: 6px;\n border-radius: 50%;\n cursor: pointer !important;\n background-color: var(--card-background-color,var(--ha-card-background));\n }\n \n .icon-container::after {\n content: '';\n position: absolute;\n display: block;\n opacity: 0.2;\n width: 100%;\n height: 100%;\n transition: all 1s;\n border-radius: 50%;\n background-color: ${stateOn?this.rgbColor?this.rgbColor:"var(--accent-color)":"var(--card-background-color,var(--ha-card-background))"};\n }\n \n ha-icon {\n display: flex;\n position: absolute;\n margin: inherit;\n padding: 1px 2px;\n width: 22px; \n height: 22px;\n color: ${stateOn?this.rgbColor?this.rgbColor:"var(--accent-color)":"inherit"};\n opacity: ${stateOn?"1":"0.6"};\n filter: brightness(1.4);\n }\n \n .entity-picture {\n height: inherit;\n width: 38px;\n border-radius: 100%;\n }\n \n .name-container {\n position: relative;\n display: ${m?"block":"inline-flex"};\n margin-left: 58px;\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 `;addStyles(this,Y,customStyles,state,entityId,S);break;case"separator":if(!this.separatorAdded||editor){if(editor&&this.separatorContainer)for(;this.separatorContainer.firstChild;)this.separatorContainer.removeChild(this.separatorContainer.firstChild);this.separatorAdded||(this.separatorContainer=document.createElement("div"),this.separatorContainer.setAttribute("class","separator-container")),this.separatorContainer.innerHTML=`\n
\n \n

${name}

\n
\n
\n `,this.content.appendChild(this.separatorContainer),this.separatorAdded=!0}const q="\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 20px 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: 17px;\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.3; \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 ";addStyles(this,q,customStyles);break;case"cover":const R=this.config.icon_open?this.config.icon_open:"mdi:window-shutter-open",F=this.config.icon_close?this.config.icon_close:"mdi:window-shutter",j=this.config.open_service?this.config.open_service:"cover.open_cover",P=this.config.close_service?this.config.close_service:"cover.close_cover",W=this.config.stop_service?this.config.stop_service:"cover.stop_cover";if(icon="open"===hass.states[this.config.entity].state?R:F,formatedState=this.config.entity?hass.formatEntityState(hass.states[this.config.entity]):"",!this.coverAdded||editor){if(editor&&this.coverContainer)for(;this.coverContainer.firstChild;)this.coverContainer.removeChild(this.coverContainer.firstChild);this.coverContainer=document.createElement("div"),this.coverContainer.setAttribute("class","cover-container"),this.coverContainer.innerHTML=`\n
\n
\n
\n
\n

${name}

\n

${formatedState}

\n
\n
\n
\n \n \n \n
\n `,this.content.appendChild(this.coverContainer);const lt=this.coverContainer.querySelector(".open"),ct=this.coverContainer.querySelector(".stop"),dt=this.coverContainer.querySelector(".close");lt.addEventListener("click",(()=>{hass.callService(j.split(".")[0],j.split(".")[1],{entity_id:entityId})}),{passive:!0}),ct.addEventListener("click",(()=>{hass.callService(W.split(".")[0],W.split(".")[1],{entity_id:entityId})}),{passive:!0}),dt.addEventListener("click",(()=>{hass.callService(P.split(".")[0],P.split(".")[1],{entity_id:entityId})}),{passive:!0}),this.iconContainer=this.content.querySelector(".icon-container"),addActions(this,this.iconContainer),this.coverAdded=!0}this.iconContainer&&(this.iconContainer.innerHTML=``,this.content.querySelector(".state").textContent=formatedState);const X="\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 ";addStyles(this,X,customStyles,state,entityId);break;case"empty-column":if(!this.emptyCollumnAdded){const ht=document.createElement("div");ht.setAttribute("class","empty-column"),ht.innerHTML='\n
\n ',this.content.appendChild(ht),this.emptyColumnAdded=!0}break;case"loader":if(!this.loaderAdded){const pt=document.createElement("div");pt.setAttribute("class","loader"),pt.innerHTML='\n
\n ',setTimeout((()=>{this.content.appendChild(pt),this.loaderAdded=!0}),0)}}}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 i=n.replace("_icon","_link");if(void 0===t[i])throw new Error("You need to define "+i);if(e[t[i]])throw new Error("You can't use "+t[i]+" twice");e[t[i]]=!0}}else if(("button"===t.card_type||"cover"===t.card_type)&&!t.entity)throw new Error("You need to define an entity");this.config=t}getCardSize(){return 0}static getConfigElement(){return document.createElement("bubble-card-editor")}}console.info(`%c Bubble Card %c ${version} `,"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)"),customElements.define("bubble-card",BubbleCard);const fireEvent=(t,e,n,i)=>{i=i||{},n=null==n?{}:n;const o=new Event(e,{bubbles:void 0===i.bubbles||i.bubbles,cancelable:Boolean(i.cancelable),composed:void 0===i.composed||i.composed});return o.detail=n,t.dispatchEvent(o),o};customElements.get("ha-switch");const LitElement=Object.getPrototypeOf(customElements.get("ha-panel-lovelace")),html=LitElement.prototype.html,css=LitElement.prototype.css;class BubbleCardEditor extends LitElement{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 _show_state(){return this._config.show_state||!1}render(){if(!this.hass)return html``;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 t=this.allEntitiesList,e=(this.lightList,this.sensorList,this.coverList),n=this.cardTypeList,i=this.buttonTypeList;if("pop-up"===this._config.card_type)return html`
${this.makeDropdown("Card type","card_type",n)}

Pop-up

This card allows you to convert any vertical-stack into a pop-up. Each pop-up can be opened by targeting its link (e.g. '#pop-up-name'), with navigation_path or with the horizontal buttons stack that is included.

It must be placed within a vertical-stack card at the top most position to function properly. The pop-up will be hidden by default until you open it. ${this.makeDropdown("Optional - Icon","icon")} ${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",t)}

Styling options
You can't set a value to 0 with the sliders for now, just change it to 0 in the text field if you need to.

Advanced settings

 Back button/event support : This allow you to navigate through your pop-ups history when you press the back button of your browser. This setting can be applied only once, you don't need to change it in all pop-ups. If it's not working just turn it on for each pop-ups. ${this.makeVersion()}
`;if("button"===this._config.card_type)return html`
${this.makeDropdown("Card type","card_type",n)}

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",t)} ${this.makeDropdown("Button type","button_type",i)} ${this.makeDropdown("Optional - Icon","icon")}
${this.makeVersion()}
`;if("separator"===this._config.card_type)return html`
${this.makeDropdown("Card type","card_type",n)}

Separator

This card is a simple separator for dividing your pop-up into categories / sections. e.g. Lights, Devices, Covers, Settings, Automations... ${this.makeDropdown("Icon","icon")} ${this.makeVersion()}
`;if("horizontal-buttons-stack"===this._config.card_type){if(!this.buttonAdded&&this.shadowRoot.querySelector("#add-button")){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}),this.buttonAdded=!0}return html`
${this.makeDropdown("Card type","card_type",n)}

Horizontal buttons stack

This card is the companion to the pop-up card, allowing you to open the corresponding pop-ups. It also allows you to open any page of your dashboard. In addition, you can add your motion sensors so that the order of the buttons adapts according to the room you just entered. This card is scrollable, remains visible and acts as a footer.

Please note that this card may take some time to load in edit mode.
${this.makeButton()}

Styling options
${this.makeVersion()}
`}return"cover"===this._config.card_type?html`
${this.makeDropdown("Card type","card_type",n)}

Cover

This card allows you to control your covers. ${this.makeDropdown("Entity","entity",e)} ${this.makeDropdown("Optional - Open icon","icon_open")} ${this.makeDropdown("Optional - Closed icon","icon_close")} ${this.makeVersion()}
`:"empty-column"===this._config.card_type?html`
${this.makeDropdown("Card type","card_type",n)}

Empty column

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

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.

And if you like my project and want to support me, please consider making a donation. Any amount is welcome and very much appreciated! 🍻

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

Bubble Card ${version}

`}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{window.addEventListener(t,i)}),{passive:!0});const n=new Event("urlChanged");function i(){const t=window.location.href;t!==this.currentUrl&&(window.dispatchEvent(n),this.currentUrl=t)}const o=()=>{window.dispatchEvent(n),window.addEventListener("popstate",i,{passive:!0})};window.addEventListener("popUpInitialized",o,{passive:!0}),window.eventAdded=!0}}set hass(hass){if(!this.content){this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML='\n \n
\n
\n \n ',this.card=this.shadowRoot.querySelector("ha-card"),this.content=this.shadowRoot.querySelector("div");const t=new Promise((t=>{t(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"))}));t.then((t=>{this.editorElement=t}))}function toggleEntity(t){hass.callService("homeassistant","toggle",{entity_id:t})}function stateChanged(t){let e=Date.now();if(lastCall.entityId===t&&e-lastCall.timestamp<100)return lastCall.stateChanged;if(!hass.states[t]||!hass.states[t].state)return!1;let n=hass.states[t].state,i=hass.states[t].attributes.rgb_color;entityStates[t]||(entityStates[t]={prevState:null,prevColor:null});let o=entityStates[t].prevState!==n||entityStates[t].prevColor!==i;return entityStates[t].prevState=n,entityStates[t].prevColor=i,lastCall={entityId:t,stateChanged:o,timestamp:e},o}this.editorElement&&(editor=this.editorElement.classList.contains("edit-mode"));const addStyles=function(context,styles,customStyles,state,entityId,stateChangedVar,path="",element=context.content){const customStylesEval=customStyles?eval("`"+customStyles+"`"):"";let styleAddedKey=styles+"Added";if(!context[styleAddedKey]||context.previousStyle!==customStylesEval||stateChangedVar||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}context.styleElement.innerHTML!==customStylesEval+styles&&(context.styleElement.innerHTML=customStylesEval+styles),context.previousStyle=customStylesEval,context.previousConfig=context.config}},forwardHaptic=t=>{fireEvent(window,"haptic",t)},navigate=(t,e,n=!1)=>{n?history.replaceState(null,"",e):history.pushState(null,"",e),fireEvent(window,"location-changed",{replace:n})},handleActionConfig=(t,e,n,i)=>{if(!i.confirmation||i.confirmation.exemptions&&i.confirmation.exemptions.some((t=>t.user===e.user.id))||(forwardHaptic("warning"),confirm(i.confirmation.text||`Are you sure you want to ${i.action}?`)))switch(i.action){case"more-info":(this.config.entity||this.config.camera_image)&&fireEvent(t,"hass-more-info",{entityId:this.config.entity?this.config.entity:this.config.camera_image});break;case"navigate":i.navigation_path&&navigate(t,i.navigation_path);break;case"url":i.url_path&&window.open(i.url_path);break;case"toggle":this.config.entity&&(toggleEntity(this.config.entity),forwardHaptic("success"));break;case"call-service":{if(!i.service)return void forwardHaptic("failure");const[t,n]=i.service.split(".",2);e.callService(t,n,i.service_data,i.target),forwardHaptic("success");break}case"fire-dom-event":fireEvent(t,"ll-custom",i)}},handleAction=(t,e,n,i)=>{let o;"double_tap"===i&&this.config.double_tap_action?o=this.config.double_tap_action:"hold"===i&&this.config.hold_action?o=this.config.hold_action:"tap"===i&&this.config.tap_action?o=this.config.tap_action:"double_tap"!==i||this.config.double_tap_action?("hold"!==i||this.config.hold_action)&&("tap"!==i||this.config.tap_action)||(o={action:"more-info"}):o={action:"toggle"},handleActionConfig(t,e,n,o)},addAction=function(){let t,e;return function(n,i,o,a){o.addEventListener(n,(()=>{const i=(new Date).getTime();"click"===n?i-(e||0)<250?(clearTimeout(t),handleAction(a,hass,{},"double_tap")):t=setTimeout((()=>{handleAction(a,hass,{},"tap")}),250):handleAction(a,hass,{},"hold"),e=i}),{passive:!0})}}();function addActions(t,e){addAction("click","tap",e,t),addAction("contextmenu","hold",e,t)}function createIcon(t,e,n,i){if(t&&t.states&&t.states[e]&&t.states[e].attributes.entity_picture&&!this.config.icon){const n=document.createElement("img");n.setAttribute("src",t.states[e].attributes.entity_picture),n.setAttribute("class","entity-picture"),n.setAttribute("alt","Icon"),i.appendChild(n)}else{const t=document.createElement("ha-icon");t.setAttribute("icon",n),t.setAttribute("class","icon"),i.appendChild(t)}}let haStyle,themeBgColor;haStyle=haStyle||getComputedStyle(document.body),themeBgColor=themeBgColor||haStyle.getPropertyValue("--ha-card-background")||haStyle.getPropertyValue("--card-background-color");let color=this.config.bg_color?this.config.bg_color:themeBgColor,bgOpacity=void 0!==this.config.bg_opacity?this.config.bg_opacity:"88",rgbaColor;function convertToRGBA(t,e){let n="";if(t.startsWith("#")){n="rgba("+parseInt(t.slice(1,3),16)+", "+parseInt(t.slice(3,5),16)+", "+parseInt(t.slice(5,7),16)+", "+e+")"}else if(t.startsWith("rgb")){let i=t.match(/\d+/g);n="rgba("+i[0]+", "+i[1]+", "+i[2]+", "+e+")"}return n}rgbaColor&&!editor||(rgbaColor=convertToRGBA(color,bgOpacity/100),window.color=color);let customStyles=this.config.styles?this.config.styles:"",entityId=this.config.entity?this.config.entity:"",icon=!this.config.icon&&this.config.entity?hass.states[entityId].attributes.icon||hass.states[entityId].attributes.entity_picture||"":this.config.icon||"",name=this.config.name?this.config.name:this.config.entity?hass.states[entityId].attributes.friendly_name:"",widthDesktop=this.config.width_desktop||"540px",widthDesktopDivided=widthDesktop?widthDesktop.match(/(\d+)(\D+)/):"",shadowOpacity=void 0!==this.config.shadow_opacity?this.config.shadow_opacity:"0",bgBlur=void 0!==this.config.bg_blur?this.config.bg_blur:"10",isSidebarHidden=this.config.is_sidebar_hidden||!1,state=entityId?hass.states[entityId].state:"",stateOn=["on","open","cleaning","true","home","playing"].includes(state)||0!==Number(state)&&!isNaN(Number(state)),formatedState,autoClose=this.config.auto_close||!1,riseAnimation=void 0===this.config.rise_animation||this.config.rise_animation,marginCenter=this.config.margin?"0"!==this.config.margin?this.config.margin:"0px":"7px",popUpHash=this.config.hash,popUpOpen;switch(this.config.card_type){case"pop-up":this.initStyleAdded||this.host||editor||(this.card.style.marginTop="2000px",this.initStyleAdded=!0);const e=()=>{if(this.host){if(!this.popUp){if(this.verticalStack=this.getRootNode(),this.popUp=this.verticalStack.querySelector("#root"),!window.popUpInitialized&&this.popUp){this.config.back_open||!1?localStorage.setItem("backOpen",!0):localStorage.setItem("backOpen",!1);if("true"===localStorage.getItem("backOpen")){window.backOpen=!0;const m=new Event("popUpInitialized");setTimeout((()=>{window.dispatchEvent(m)}),10)}else window.backOpen=!1,popUpOpen=popUpHash+!1,history.replaceState(null,null,location.href.split("#")[0]);window.popUpInitialized=!0}this.card.style.marginTop="0"}const t=this.popUp,e=this.config.text||"",n=this.config.state;formatedState=n?hass.formatEntityState(hass.states[n])+" "+e:e;const i=this.config.margin_top_mobile&&"0"!==this.config.margin_top_mobile?this.config.margin_top_mobile:"0px",o=this.config.margin_top_desktop&&"0"!==this.config.margin_top_desktop?this.config.margin_top_desktop:"0px",a=this.config.entity?"flex":"none";let s,r;if(state=n?hass.states[n].state:"",this.headerAdded){if(entityId||editor){const f=this.content.querySelector("#header-container .header-icon"),b=this.content.querySelector("#header-container h2"),y=this.content.querySelector("#header-container p"),v=this.content.querySelector("#header-container .power-button");f.innerHTML="",createIcon(hass,entityId,icon,f),b.textContent=name,y.textContent=formatedState,v.setAttribute("style",`display: ${a};`)}}else{const _=document.createElement("div");_.setAttribute("id","header-container");const w=document.createElement("div");_.appendChild(w);const x=document.createElement("div");x.setAttribute("class","header-icon"),w.appendChild(x),createIcon(hass,entityId,icon,x),addActions(this,x);const k=document.createElement("h2");k.textContent=name,w.appendChild(k);const C=document.createElement("p");C.textContent=formatedState,w.appendChild(C);const $=document.createElement("ha-icon");$.setAttribute("class","power-button"),$.setAttribute("icon","mdi:power"),$.setAttribute("style",`display: ${a};`),w.appendChild($);const S=document.createElement("button");S.setAttribute("class","close-pop-up"),S.onclick=function(){history.replaceState(null,null,location.href.split("#")[0]),localStorage.setItem("isManuallyClosed_"+popUpHash,!0)},_.appendChild(S);const E=document.createElement("ha-icon");E.setAttribute("icon","mdi:close"),S.appendChild(E),this.content.appendChild(_),this.header=w,this.headerAdded=!0}if(!this.eventAdded&&!editor){let I,O;window["checkHashRef_"+popUpHash]=l,window.addEventListener("urlChanged",window["checkHashRef_"+popUpHash],{passive:!0}),this.content.querySelector(".power-button").addEventListener("click",(()=>{toggleEntity(entityId)}),{passive:!0}),window.addEventListener("click",(function(t){if(location.hash===popUpHash&&h(),!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")))||popUpOpen!==popUpHash+!0||(popUpOpen=popUpHash+!1,history.replaceState(null,null,location.href.split("#")[0]),localStorage.setItem("isManuallyClosed_"+popUpHash,!0))}),{passive:!0}),window.addEventListener("keydown",(function(t){"Escape"===t.key&&(popUpOpen=popUpHash+!1,history.replaceState(null,null,location.href.split("#")[0]),localStorage.setItem("isManuallyClosed_"+popUpHash,!0))}),{passive:!0}),t.addEventListener("touchstart",(function(t){location.hash===popUpHash&&h(),I=t.touches[0].clientY,O=I}),{passive:!0}),t.addEventListener("touchmove",(function(t){t.touches[0].clientY-I>300&&t.touches[0].clientY>O&&(popUpOpen=popUpHash+!1,history.replaceState(null,null,location.href.split("#")[0]),popUpOpen=popUpHash+!1,localStorage.setItem("isManuallyClosed_"+popUpHash,!0)),O=t.touches[0].clientY}),{passive:!0}),this.eventAdded=!0}if(entityId){const A=hass.states[entityId].attributes.rgb_color;this.rgbColor=A?`rgb(${A})`:"var(--accent-color)";const L=A&&stateOn?`rgba(${A}, 0.5)`:stateOn?"var(--accent-color)":"var(--background-color,var(--secondary-background-color))";this.header.style.backgroundColor=L,r=convertToRGBA(color,0),this.colorAdded=!0}function l(){if(!editor){location.hash.split("?")[0]===popUpHash?c():t.classList.contains("open-pop-up")&&d()}}function c(){t.classList.remove("close-pop-up"),t.classList.add("open-pop-up"),popUpOpen=popUpHash+!0,setTimeout((()=>{window.justOpened=!0}),10),h()}function d(){t.classList.remove("open-pop-up"),t.classList.add("close-pop-up"),popUpOpen=popUpHash+!1,window.justOpened=!1,clearTimeout(s)}function h(){clearTimeout(s),autoClose>0&&(s=setTimeout(p,autoClose))}function p(){history.replaceState(null,null,location.href.split("#")[0])}const u=`\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 transition: all 1s;\n position: fixed !important;\n margin: 0 -${marginCenter}; /* 7px */\n width: 100%;\n background-color: ${rgbaColor};\n box-shadow: 0px 0px 50px rgba(0,0,0,${shadowOpacity/100});\n backdrop-filter: blur(${bgBlur}px);\n -webkit-backdrop-filter: blur(${bgBlur}px);\n border-radius: 42px;\n box-sizing: border-box;\n top: calc(100% + ${i} + 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 > bubble-card: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, ${r} 0%, ${rgbaColor} 80%);\n z-index: 0;\n } \n #root::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n }\n #root > bubble-card: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 /*will-change: transform;*/\n transform: translateY(-100%);\n transition: transform .4s !important;\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(0%);\n transition: transform .4s !important;\n box-shadow: none;\n }\n @media only screen and (min-width: 768px) {\n #root {\n top: calc(100% + ${o} + var(--header-height));\n width: calc(${widthDesktop}${"%"!==widthDesktopDivided[2]||isSidebarHidden?"":" - var(--mdc-drawer-width)"}) !important;\n left: calc(50% - ${widthDesktopDivided[1]/2}${widthDesktopDivided[2]});\n margin: 0 !important;\n }\n } \n @media only screen and (min-width: 870px) {\n #root {\n left: calc(50% - ${widthDesktopDivided[1]/2}${widthDesktopDivided[2]} + ${isSidebarHidden?"0px":"var(--mdc-drawer-width) "+("%"===widthDesktopDivided[2]?"":"/ 2")});\n }\n } \n #root.editor {\n position: inherit !important;\n width: 100% !important;\n padding: 18px !important;\n }\n `,g=`\n #header-container {\n display: inline-flex;\n ${icon||name||entityId||state||e?"":"flex-direction: row-reverse;"}\n width: 100%;\n margin: 0;\n padding: 0;\n }\n #header-container > div {\n display: ${icon||name||entityId||state||e?"inline-flex":"none"};\n align-items: center;\n position: relative;\n padding: 6px;\n z-index: 1;\n flex-grow: 1;\n background-color: 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-icon {\n display: inline-flex;\n width: 38px;\n height: 38px;\n background-color: var(--card-background-color,var(--ha-card-background));\n border-radius: 100%;\n margin: 0 10px 0 0;\n cursor: ${this.config.entity||this.config.double_tap_action||this.config.tap_action||this.config.hold_action?"pointer":"default"}; \n flex-wrap: wrap;\n align-content: center;\n justify-content: center;\n overflow: hidden;\n }\n .header-icon > ha-icon {\n color: ${stateOn?this.rgbColor?this.rgbColor:"var(--accent-color)":"inherit"};\n opacity: ${stateOn?"1":"0.6"};\n filter: brightness(1.4);\n }\n .header-icon::before {\n content: '';\n position: absolute;\n width: 38px;\n height: 38px;\n display: block;\n opacity: 0.2;\n transition: background-color 1s;\n border-radius: 50%;\n background-color: ${stateOn?this.rgbColor?this.rgbColor:"var(--accent-color)":"var(--card-background-color,var(--ha-card-background))"};\n }\n .entity-picture {\n height: calc(100% + 16px);\n width: calc(100% + 16px);\n }\n #header-container h2 {\n display: inline-flex;\n margin: 0 18px 0 0;\n /*line-height: 0px;*/\n z-index: 1;\n font-size: 20px;\n }\n #header-container p {\n display: inline-flex;\n line-height: 0px;\n font-size: 16px;\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 `;addStyles(this,u,customStyles,state,entityId,"","",t),addStyles(this,g,customStyles,state,entityId,stateChanged(entityId)),editor?(t.classList.add("editor"),t.classList.remove("open-pop-up"),t.classList.remove("close-pop-up")):t.classList.remove("editor")}else this.host=this.getRootNode().host},n=this.config.trigger_entity?this.config.trigger_entity:"",i=this.config.trigger_state?this.config.trigger_state:"",o=!!this.config.trigger_close&&this.config.trigger_close,a=this.config.state;if(this.popUp)!editor&&this.wasEditing?(e(),this.wasEditing=!1):(popUpHash===location.hash&&(stateChanged(entityId)||stateChanged(a))||editor)&&(e(),editor&&(this.wasEditing=!0));else{let N=setInterval((()=>{e(),this.popUp&&clearInterval(N)}),0)}if(this.popUp&&stateChanged(n)&&hass.states[n]){null===localStorage.getItem("previousTriggerState_"+popUpHash)&&localStorage.setItem("previousTriggerState_"+popUpHash,""),null===localStorage.getItem("isManuallyClosed_"+popUpHash)&&localStorage.setItem("isManuallyClosed_"+popUpHash,"false"),null===localStorage.getItem("isTriggered_"+popUpHash)&&localStorage.setItem("isTriggered_"+popUpHash,"false");let G=localStorage.getItem("previousTriggerState_"+popUpHash),K="true"===localStorage.getItem("isManuallyClosed_"+popUpHash),Z="true"===localStorage.getItem("isTriggered_"+popUpHash);hass.states[n].state!==i||null!==G||Z||(navigate("",popUpHash),Z=!0,localStorage.setItem("isTriggered_"+popUpHash,Z)),hass.states[n].state!==G&&(K=!1,localStorage.setItem("previousTriggerState_"+popUpHash,hass.states[n].state),localStorage.setItem("isManuallyClosed_"+popUpHash,K)),hass.states[n].state!==i||K?hass.states[n].state!==i&&o&&this.popUp.classList.contains("open-pop-up")&&Z&&!K&&(history.replaceState(null,null,location.href.split("#")[0]),popUpOpen=popUpHash+!1,Z=!1,K=!0,localStorage.setItem("isManuallyClosed_"+popUpHash,K),localStorage.setItem("isTriggered_"+popUpHash,Z)):(navigate("",popUpHash),Z=!0,localStorage.setItem("isTriggered_"+popUpHash,Z))}break;case"horizontal-buttons-stack":const s=(t,e,n)=>{const i=document.createElement("button");return i.setAttribute("class",`button ${e.substring(1)}`),i.innerHTML=`\n ${""!==n?``:""}\n ${""!==t?`

${t}

`:""}\n `,i.hasListener||(i.addEventListener("click",(t=>{t.stopPropagation(),popUpOpen=location.hash+!0;localStorage.getItem("isManuallyClosed_"+e);popUpOpen!==e+!0?(navigate("",e),popUpOpen=e+!0):(history.replaceState(null,null,location.href.split("#")[0]),popUpOpen=e+!1)}),{passive:!0}),i.hasListener=!0),i};if(!this.buttonsAdded){const J=document.createElement("div");J.setAttribute("class","horizontal-buttons-stack-container"),this.content.appendChild(J),this.buttonsContainer=J}const r=(t,e)=>{if(hass.states[e].attributes.rgb_color){const n=hass.states[e].attributes.rgb_color,i=`rgba(${n[0]}, ${n[1]}, ${n[2]}, 0.5)`;t.style.backgroundColor=i,t.style.border="1px solid rgba(0,0,0,0)"}else hass.states[e].attributes.rgb_color||"on"!=hass.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 l=[],c=1;for(;this.config[c+"_link"];){const Q=c+"_",tt=this.config[Q+"name"]||"",et=this.config[Q+"pir_sensor"];icon=this.config[Q+"icon"]||"";const nt=this.config[Q+"link"],it=this.config[Q+"entity"];l.push({button:tt,pirSensor:et,icon:icon,link:nt,lightEntity:it}),c++}if(this.config.auto_order&&l.sort(((t,e)=>{if(t.pirSensor&&e.pirSensor){if("on"===hass.states[t.pirSensor].state&&"on"===hass.states[e.pirSensor].state){return hass.states[t.pirSensor].last_updated{const e=s(t.button,t.link,t.icon);ot[t.link]=e,this.buttonsContainer.appendChild(e)})),this.buttonsAdded=!0,this.buttons=ot}let d=0,h=12;async function p(){for(let t of l){let e=this.buttons[t.link];if(e){let n=await localStorage.getItem(`buttonWidth-${t.link}`),i=await localStorage.getItem(`buttonContent-${t.link}`);n&&"0"!==n&&i===e.innerHTML&&!editor||(n=e.offsetWidth,await localStorage.setItem(`buttonWidth-${t.link}`,n),await localStorage.setItem(`buttonContent-${t.link}`,e.innerHTML)),e.style.transform=`translateX(${d}px)`,d+=parseInt(n)+h}t.lightEntity&&r(e,t.lightEntity)}}p.call(this);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: ${marginCenter};\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: 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 white-space: nowrap;\n width: auto;\n border-radius: 25px;\n z-index: 1;\n padding: 16px;\n background: none;\n transition: background-color 1s, border 1s, transform 1s;\n color: var(--primary-text-color);\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: 768px) {\n .card-content {\n position: fixed;\n width: ${widthDesktop} !important;\n left: calc(50% - ${widthDesktopDivided[1]/2}${widthDesktopDivided[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(${widthDesktop}${"%"!==widthDesktopDivided[2]||isSidebarHidden?"":" - var(--mdc-drawer-width)"}) !important;\n left: calc(50% - ${widthDesktopDivided[1]/2}${widthDesktopDivided[2]} + ${!0===isSidebarHidden?"0px":"var(--mdc-drawer-width) "+("%"===widthDesktopDivided[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 \n .horizontal-buttons-stack.editor::before {\n top: -32px;\n left: -100%;\n background: none;\n width: 100%;\n height: 0;\n }\n \n .horizontal-buttons-stack-container.editor > .button {\n transition: background-color 0s, border 0s, transform 0s;\n }\n \n .horizontal-buttons-stack-container.editor {\n margin-left: 1px;\n }\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&&riseAnimation&&(this.content.style.animation="from-bottom 1.3s forwards",window.hasAnimated=!0,setTimeout((()=>{this.content.style.animation="none"}),1500)),addStyles(this,u,customStyles),editor?(this.buttonsContainer.classList.add("editor"),this.card.classList.add("editor")):(this.buttonsContainer.classList.remove("editor"),this.card.classList.remove("editor"));break;case"button":if(!this.buttonAdded){const at=document.createElement("div");at.setAttribute("class","button-container"),this.content.appendChild(at)}const g=this.config.button_type||"switch";formatedState=hass.formatEntityState(hass.states[entityId]);const m=!!this.config.show_state&&this.config.show_state;let f=entityId?hass.states[entityId].attributes.brightness||0:"",b=entityId?hass.states[entityId].attributes.volume_level||0:"",y=!1,v=f,_=b,w=0,x=0,k=0,C=!1,$=null;const S=stateChanged(entityId),E=document.createElement("div");E.setAttribute("class","icon-container"),this.iconContainer=E;const I=document.createElement("div");I.setAttribute("class","name-container");const O=document.createElement("div");O.setAttribute("class","switch-button");const A=document.createElement("div");A.setAttribute("class","range-slider");const L=document.createElement("div");if(L.setAttribute("class","range-fill"),entityId&&entityId.startsWith("light.")&&"slider"===g?L.style.transform=`translateX(${f/255*100}%)`:entityId&&entityId.startsWith("media_player.")&&"slider"===g&&(L.style.transform=`translateX(${100*b}%)`),!this.buttonContainer||editor){if(editor&&this.buttonContainer){for(;this.buttonContainer.firstChild;)this.buttonContainer.removeChild(this.buttonContainer.firstChild);this.eventAdded=!1,this.wasEditing=!0}this.buttonContainer=this.content.querySelector(".button-container"),"slider"!==g||this.buttonAdded&&!editor?("switch"===g||"custom"===g||editor)&&(this.buttonContainer.appendChild(O),O.appendChild(E),O.appendChild(I),this.switchButton=this.content.querySelector(".switch-button")):(this.buttonContainer.appendChild(A),A.appendChild(E),A.appendChild(I),A.appendChild(L),this.rangeFill=this.content.querySelector(".range-fill")),!hass.states[entityId].attributes.entity_picture&&!icon.startsWith("/api/image/")||this.config.icon?E.innerHTML=``:E.innerHTML=`Icon`,I.innerHTML=`\n

${name}

\n ${m?`

${formatedState}

`:""}\n `,this.buttonAdded=!0}function H(t){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 U(t){w=t.pageX||(t.touches?t.touches[0].pageX:0),x=t.pageY||(t.touches?t.touches[0].pageY:0),k=A.value,t.target!==E&&t.target!==E.querySelector("ha-icon")&&(y=!0,document.addEventListener("mouseup",D,{passive:!0}),document.addEventListener("touchend",D,{passive:!0}),document.addEventListener("mousemove",T,{passive:!0}),document.addEventListener("touchmove",T,{passive:!0}),$=setTimeout((()=>{B(t.pageX||t.touches[0].pageX),V(),$=null}),200))}function T(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-x)>Math.abs(e-w)?(clearTimeout($),D()):(document.removeEventListener("mousemove",T),document.removeEventListener("touchmove",T),document.addEventListener("mousemove",z,{passive:!0}),document.addEventListener("touchmove",z,{passive:!0}))}function D(){y=!1,C=!1,V(),document.removeEventListener("mouseup",D),document.removeEventListener("touchend",D),document.removeEventListener("mousemove",z),document.removeEventListener("touchmove",z)}function V(){entityId.startsWith("light.")?(f=v,hass.callService("light","turn_on",{entity_id:entityId,brightness:f})):b!==_&&entityId.startsWith("media_player.")&&(b=_,hass.callService("media_player","volume_set",{entity_id:entityId,volume_level:b}))}function z(t){const e=t.pageX||(t.touches?t.touches[0].pageX:0),n=t.pageY||(t.touches?t.touches[0].pageY:0);y&&Math.abs(e-w)>10?B(e):y&&Math.abs(n-x)>10&&(y=!1,A.value=k)}function B(t){const e=A.getBoundingClientRect(),n=Math.min(Math.max(t-e.left,0),e.width)/e.width;entityId.startsWith("light.")?v=Math.round(255*n):entityId.startsWith("media_player.")&&(_=n),L.style.transition="none",L.style.transform=`translateX(${100*n}%)`}if(m&&(this.content.querySelector(".state").textContent=formatedState),this.eventAdded||"switch"!==g?this.eventAdded||"slider"!==g?this.eventAdded||"custom"!==g||(O.addEventListener("click",(()=>H(this.switchButton)),{passive:!0}),addActions(this,this.switchButton),this.eventAdded=!0):(A.addEventListener("mousedown",U,{passive:!0}),A.addEventListener("touchstart",U,{passive:!0}),addActions(this,this.iconContainer),this.eventAdded=!0):(O.addEventListener("click",(()=>H(this.switchButton)),{passive:!0}),O.addEventListener("click",(function(t){t.target!==E&&t.target!==E.querySelector("ha-icon")&&toggleEntity(entityId)}),{passive:!0}),addActions(this,this.iconContainer),this.eventAdded=!0),this.isDragging||"slider"!==g||(this.rangeFill.style.transition="all .3s",entityId.startsWith("light.")?this.rangeFill.style.transform=`translateX(${f/255*100}%)`:entityId.startsWith("media_player.")&&(this.rangeFill.style.transform=`translateX(${100*b}%)`)),"slider"===g&&(!this.colorAdded||S||this.wasEditing)){if(entityId.startsWith("light.")){const st=hass.states[entityId].attributes.rgb_color,rt=st?`rgba(${st}, 0.5)`:"rgba(255, 255, 255, 0.5)";this.rgbColor=st?`rgb(${st})`:"rgba(255, 255, 255, 1)",this.rangeFill.style.backgroundColor=rt}else this.rangeFill.style.backgroundColor="var(--accent-color)";this.colorAdded=!0,this.wasEditing=!1}function M(t,e){if(e.buttonContainer.style.opacity="unavailable"!==t?"1":"0.5",["switch","custom"].includes(g)){const t=stateOn?"var(--accent-color)":"rgba(0,0,0,0)";O.style.backgroundColor=t}}(S||this.wasEditing)&&(M(state,this),this.wasEditing=!1);const Y=`\n ha-card {\n margin-top: 0 !important;\n background: none !important;\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 }\n \n .range-fill {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n }\n \n .switch-button {\n cursor: pointer !important;\n }\n \n .range-slider {\n cursor: ew-resize;\n }\n \n .range-fill {\n z-index: 0;\n width: 100%;\n left: -100%;\n }\n \n .icon-container {\n position: absolute;\n z-index: 1;\n width: 38px;\n height: 38px;\n margin: 6px;\n border-radius: 50%;\n cursor: pointer !important;\n background-color: var(--card-background-color,var(--ha-card-background));\n }\n \n .icon-container::after {\n content: '';\n position: absolute;\n display: block;\n opacity: 0.2;\n width: 100%;\n height: 100%;\n transition: all 1s;\n border-radius: 50%;\n background-color: ${stateOn?this.rgbColor?this.rgbColor:"var(--accent-color)":"var(--card-background-color,var(--ha-card-background))"};\n }\n \n ha-icon {\n display: flex;\n position: absolute;\n margin: inherit;\n padding: 1px 2px;\n width: 22px; \n height: 22px;\n color: ${stateOn?this.rgbColor?this.rgbColor:"var(--accent-color)":"inherit"};\n opacity: ${stateOn?"1":"0.6"};\n filter: brightness(1.4);\n }\n \n .entity-picture {\n height: inherit;\n width: 38px;\n border-radius: 100%;\n }\n \n .name-container {\n position: relative;\n display: ${m?"block":"inline-flex"};\n margin-left: 58px;\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 `;addStyles(this,Y,customStyles,state,entityId,S);break;case"separator":if(!this.separatorAdded||editor){if(editor&&this.separatorContainer)for(;this.separatorContainer.firstChild;)this.separatorContainer.removeChild(this.separatorContainer.firstChild);this.separatorAdded||(this.separatorContainer=document.createElement("div"),this.separatorContainer.setAttribute("class","separator-container")),this.separatorContainer.innerHTML=`\n
\n \n

${name}

\n
\n
\n `,this.content.appendChild(this.separatorContainer),this.separatorAdded=!0}const q="\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 20px 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: 17px;\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.3; \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 ";addStyles(this,q,customStyles);break;case"cover":const R=this.config.icon_open?this.config.icon_open:"mdi:window-shutter-open",F=this.config.icon_close?this.config.icon_close:"mdi:window-shutter",j=this.config.open_service?this.config.open_service:"cover.open_cover",P=this.config.close_service?this.config.close_service:"cover.close_cover",W=this.config.stop_service?this.config.stop_service:"cover.stop_cover";if(icon="open"===hass.states[this.config.entity].state?R:F,formatedState=this.config.entity?hass.formatEntityState(hass.states[this.config.entity]):"",!this.coverAdded||editor){if(editor&&this.coverContainer)for(;this.coverContainer.firstChild;)this.coverContainer.removeChild(this.coverContainer.firstChild);this.coverContainer=document.createElement("div"),this.coverContainer.setAttribute("class","cover-container"),this.coverContainer.innerHTML=`\n
\n
\n
\n
\n

${name}

\n

${formatedState}

\n
\n
\n
\n \n \n \n
\n `,this.content.appendChild(this.coverContainer);const lt=this.coverContainer.querySelector(".open"),ct=this.coverContainer.querySelector(".stop"),dt=this.coverContainer.querySelector(".close");lt.addEventListener("click",(()=>{hass.callService(j.split(".")[0],j.split(".")[1],{entity_id:entityId})}),{passive:!0}),ct.addEventListener("click",(()=>{hass.callService(W.split(".")[0],W.split(".")[1],{entity_id:entityId})}),{passive:!0}),dt.addEventListener("click",(()=>{hass.callService(P.split(".")[0],P.split(".")[1],{entity_id:entityId})}),{passive:!0}),this.iconContainer=this.content.querySelector(".icon-container"),addActions(this,this.iconContainer),this.coverAdded=!0}this.iconContainer&&(this.iconContainer.innerHTML=``,this.content.querySelector(".state").textContent=formatedState);const X="\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 ";addStyles(this,X,customStyles,state,entityId);break;case"empty-column":if(!this.emptyCollumnAdded){const ht=document.createElement("div");ht.setAttribute("class","empty-column"),ht.innerHTML='\n
\n ',this.content.appendChild(ht),this.emptyColumnAdded=!0}break;case"loader":if(!this.loaderAdded){const pt=document.createElement("div");pt.setAttribute("class","loader"),pt.innerHTML='\n
\n ',setTimeout((()=>{this.content.appendChild(pt),this.loaderAdded=!0}),0)}}}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 i=n.replace("_icon","_link");if(void 0===t[i])throw new Error("You need to define "+i);if(e[t[i]])throw new Error("You can't use "+t[i]+" twice");e[t[i]]=!0}}else if(("button"===t.card_type||"cover"===t.card_type)&&!t.entity)throw new Error("You need to define an entity");this.config=t}getCardSize(){return 0}static getConfigElement(){return document.createElement("bubble-card-editor")}}console.info(`%c Bubble Card %c ${version} `,"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)"),customElements.define("bubble-card",BubbleCard);const fireEvent=(t,e,n,i)=>{i=i||{},n=null==n?{}:n;const o=new Event(e,{bubbles:void 0===i.bubbles||i.bubbles,cancelable:Boolean(i.cancelable),composed:void 0===i.composed||i.composed});return o.detail=n,t.dispatchEvent(o),o};customElements.get("ha-switch");const LitElement=Object.getPrototypeOf(customElements.get("ha-panel-lovelace")),html=LitElement.prototype.html,css=LitElement.prototype.css;class BubbleCardEditor extends LitElement{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 _show_state(){return this._config.show_state||!1}render(){if(!this.hass)return html``;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 t=this.allEntitiesList,e=(this.lightList,this.sensorList,this.coverList),n=this.cardTypeList,i=this.buttonTypeList;if("pop-up"===this._config.card_type)return html`
${this.makeDropdown("Card type","card_type",n)}

Pop-up

This card allows you to convert any vertical-stack into a pop-up. Each pop-up can be opened by targeting its link (e.g. '#pop-up-name'), with navigation_path or with the horizontal buttons stack that is included.

It must be placed within a vertical-stack card at the top most position to function properly. The pop-up will be hidden by default until you open it. ${this.makeDropdown("Optional - Icon","icon")} ${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",t)}

Styling options
You can't set a value to 0 with the sliders for now, just change it to 0 in the text field if you need to.

Advanced settings

 Back button/event support : This allow you to navigate through your pop-ups history when you press the back button of your browser. This setting can be applied only once, you don't need to change it in all pop-ups. If it's not working just turn it on for each pop-ups. ${this.makeVersion()}
`;if("button"===this._config.card_type)return html`
${this.makeDropdown("Card type","card_type",n)}

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",t)} ${this.makeDropdown("Button type","button_type",i)} ${this.makeDropdown("Optional - Icon","icon")}
${this.makeVersion()}
`;if("separator"===this._config.card_type)return html`
${this.makeDropdown("Card type","card_type",n)}

Separator

This card is a simple separator for dividing your pop-up into categories / sections. e.g. Lights, Devices, Covers, Settings, Automations... ${this.makeDropdown("Icon","icon")} ${this.makeVersion()}
`;if("horizontal-buttons-stack"===this._config.card_type){if(!this.buttonAdded&&this.shadowRoot.querySelector("#add-button")){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}),this.buttonAdded=!0}return html`
${this.makeDropdown("Card type","card_type",n)}

Horizontal buttons stack

This card is the companion to the pop-up card, allowing you to open the corresponding pop-ups. It also allows you to open any page of your dashboard. In addition, you can add your motion sensors so that the order of the buttons adapts according to the room you just entered. This card is scrollable, remains visible and acts as a footer.

Please note that this card may take some time to load in edit mode.
${this.makeButton()}

Styling options
${this.makeVersion()}
`}return"cover"===this._config.card_type?html`
${this.makeDropdown("Card type","card_type",n)}

Cover

This card allows you to control your covers. ${this.makeDropdown("Entity","entity",e)} ${this.makeDropdown("Optional - Open icon","icon_open")} ${this.makeDropdown("Optional - Closed icon","icon_close")} ${this.makeVersion()}
`:"empty-column"===this._config.card_type?html`
${this.makeDropdown("Card type","card_type",n)}

Empty column

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

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.

And if you like my project and want to support me, please consider making a donation. Any amount is welcome and very much appreciated! 🍻

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

Bubble Card ${version}

`}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