-
-
- input_boolean) and trigger its opening/closing in an automation.
+ ${n}
`,t.style="";const e=t.scrollWidth,i=t.parentNode?.offsetWidth||0;o&&e>i?(function(e,t,n){const o=' | ',a=`${t+o+t+o}`;e.innerHTML=`${a}
`;const i=function(e){return`\n .${e} .scrolling-container {\n width: 100%;\n white-space: nowrap;\n mask-image: linear-gradient(to right, transparent, black calc(0% + 8px), black calc(100% - 8px), transparent);\n mask-image: linear-gradient(to left, transparent, black calc(0% + 8px), black calc(100% - 8px), transparent);\n }\n .${e} .scrolling-container span {\n display: inline-block;\n animation: scroll 14s linear infinite;\n }\n\n .bubble-scroll-separator {\n opacity: .3;\n margin: 0 6px 0 8px;\n }\n\n @keyframes scroll {\n from { transform: translateX(0%); }\n to { transform: translateX(-50%); }\n }\n `}(n);e.styleElement=document.createElement("style"),e.appendChild(e.styleElement),e.styleElement.innerHTML=i}(t,n,a),t.previousText=n):t.previousText=n}requestAnimationFrame(i),t.eventAdded||(window.addEventListener("resize",debounce(i,300)),t.eventAdded=!0)}function applyNonScrollingStyle(e,t){e.innerHTML=t,e.previousText=t,e.style.whiteSpace="normal",e.style.display="-webkit-box",e.style.webkitLineClamp="2",e.style.webkitBoxOrient="vertical",e.style.textOverflow="ellipsis"}function formatDateTime(e,t){if(!e)return"";const n=new Date(e),o=new Date;let a,i,r=Math.floor((o-n)/1e3);return isNaN(r)?"":(r<60?(a="second",i=r+1):r<3600?(a="minute",i=Math.floor(r/60)):r<86400?(a="hour",i=Math.floor(r/3600)):(a="day",i=Math.floor(r/86400)),new Intl.RelativeTimeFormat(t,{numeric:"auto"}).format(-i,a))}function setLayout(e){const t=e.config.card_layout,n="large"===t||"large-2-rows"===t,o="large-2-rows"===t;n!==e.content.classList.contains("large")&&e.content.classList.toggle("large",n),o!==e.content.classList.contains("rows-2")&&e.content.classList.toggle("rows-2",o)}function throttle(e,t=300){let n;return(...o)=>{void 0===n&&(e(...o),n=setTimeout((()=>{n=void 0}),t))}}}},__webpack_module_cache__={};function __webpack_require__(e){var t=__webpack_module_cache__[e];if(void 0!==t)return t.exports;var n=__webpack_module_cache__[e]={exports:{}};return __webpack_modules__[e](n,n.exports,__webpack_require__),n.exports}__webpack_require__.d=(e,t)=>{for(var n in t)__webpack_require__.o(t,n)&&!__webpack_require__.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var __webpack_exports__={};(()=>{let e="v2.3.1";var t=__webpack_require__(946),n=__webpack_require__(191);function o(e,t,n){setTimeout((()=>{const o=new Event("hass-action",{bubbles:!0,composed:!0}),a={...t};!a.entity_id&&this?.config?.entity&&(a.entity_id=this.config.entity),"tap"===n||"double_tap"===n||"hold"===n?o.detail={config:a,action:n}:(e.modifiedConfig={...a,tap_action:{...a[n]}},delete e.modifiedConfig[n],o.detail={config:e.modifiedConfig,action:"tap"}),e.dispatchEvent(o)}),10)}function a(e,t,n,o){e.classList.add("bubble-action"),e.dataset.entity=t?.entity||n,e.dataset.tapAction=JSON.stringify(t?.tap_action||o?.tap_action||{action:"more-info"}),e.dataset.doubleTapAction=JSON.stringify(t?.double_tap_action||o?.double_tap_action||{action:"toggle"}),e.dataset.holdAction=JSON.stringify(t?.hold_action||o?.hold_action||{action:"toggle"});const a=JSON.parse(e.dataset.tapAction),i=JSON.parse(e.dataset.doubleTapAction),r=JSON.parse(e.dataset.holdAction);e.style.cursor="none"===a.action&&"none"===i.action&&"none"===r.action?"":"pointer"}window.isScrolling=!1,document.addEventListener("scroll",(function(){window.isScrolling=!0,setTimeout((()=>{window.isScrolling=!1}),150)}),{passive:!0}),document.body.addEventListener("pointerdown",(e=>{if(window.isScrolling)return;const t=e.composedPath();let n=null;for(const e of t)if(e.classList&&e.classList.contains("bubble-action")){n=e;break}if(n){const t={tap_action:JSON.parse(n.dataset.tapAction),double_tap_action:JSON.parse(n.dataset.doubleTapAction),hold_action:JSON.parse(n.dataset.holdAction),entity:n.dataset.entity};n.actionHandler||(n.actionHandler=new i(n,t,r)),n.actionHandler.handleStart(e),n.addEventListener("pointerup",n.actionHandler.handleEnd.bind(n.actionHandler),{once:!0}),document.addEventListener("scroll",n.actionHandler.handleScroll.bind(n.actionHandler),{once:!0})}}),{passive:!0});class i{constructor(e,t,n){this.element=e,this.config=t,this.sendActionEvent=n,this.tapTimeout=null,this.holdTimeout=null,this.startX=0,this.startY=0,this.holdFired=!1,this.pointerMoveListener=this.detectScrollLikeMove.bind(this)}handleStart(e){window.isScrolling||this.isDisconnected||(this.startX=e.clientX,this.startY=e.clientY,this.holdFired=!1,document.addEventListener("pointermove",this.pointerMoveListener),this.holdTimeout=setTimeout((()=>{"none"===(this.config.hold_action||{action:"none"}).action||window.isScrolling||(this.sendActionEvent(this.element,this.config,"hold"),this.holdFired=!0)}),400))}detectScrollLikeMove(e){const t=Math.abs(e.clientX-this.startX),n=Math.abs(e.clientY-this.startY);(t>5||n>5)&&(clearTimeout(this.holdTimeout),this.holdTimeout=null,document.removeEventListener("pointermove",this.pointerMoveListener))}handleEnd(e){if(window.isScrolling||this.isDisconnected)return;if(clearTimeout(this.holdTimeout),this.holdTimeout=null,document.removeEventListener("pointermove",this.pointerMoveListener),this.holdFired)return;const t=Date.now(),n=this.config.double_tap_action||{action:"none"},o=this.config.tap_action||{action:"none"};this.lastTap&&t-this.lastTap<200&&"none"!==n.action?(clearTimeout(this.tapTimeout),this.sendActionEvent(this.element,this.config,"double_tap")):"none"!==o.action&&(this.tapTimeout=setTimeout((()=>{this.sendActionEvent(this.element,this.config,"tap")}),200)),this.lastTap=t}handleScroll(){clearTimeout(this.holdTimeout),this.holdTimeout=null,document.removeEventListener("pointermove",this.pointerMoveListener)}}function r(e,t,n){const a=t.tap_action||{action:"more-info"},i=t.double_tap_action||{action:"toggle"},r=t.hold_action||{action:"toggle"},s=t.entity||this.config?.entity,l=e=>e.service&&"entity"===e.target?.entity_id&&s?{...e,target:{...e.target,entity_id:s}}:e,c=l(a),d=l(i),u=l(r);let b;switch(n){case"tap":default:b=c;break;case"double_tap":b=d;break;case"hold":b=u}o(e,{entity:s,tap_action:c,double_tap_action:d,hold_action:u},n)}function s(e,t){e.addEventListener("click",(()=>{(0,n.jk)("selection"),(0,n.Jn)(t)}))}let l=!1;function c(){!l&&location.hash&&setTimeout((()=>{const e=window.location.href.split("#")[0];history.replaceState(null,"",e),window.dispatchEvent(new Event("location-changed"))}),50)}function d(e){const t=e.startsWith("#")?window.location.href.split("#")[0]+e:e;history.pushState(null,"",t),window.dispatchEvent(new Event("location-changed"))}function u(e,t){e.editor||(e.hideContentTimeout=setTimeout((()=>{const{sectionRow:t,sectionRowContainer:n}=e;"hui-card"===t?.tagName.toLowerCase()&&(t.hidden=!0,t.style.display="none",n?.classList.contains("card")&&(n.style.display="none"))}),t))}function b(e,t){const{showBackdrop:n,hideBackdrop:o}=L(e);t?n():o()}function p(e,t){if(e.config.background_update)return;const n=t?"appendChild":"removeChild";requestAnimationFrame((()=>{e.verticalStack[n](e.popUp)}))}function h(e,t){requestAnimationFrame((()=>{e.classList.toggle("is-popup-opened",t),e.classList.toggle("is-popup-closed",!t)}))}function m(e,t){e.boundClickOutside||(e.boundClickOutside=t=>function(e,t){(t.config.close_by_clicking_outside??1)&&(e.composedPath().find((e=>e.classList?.contains("bubble-pop-up")||["HA-DIALOG","HA-MORE-INFO-DIALOG","HA-DIALOG-DATE-PICKER"].includes(e.nodeName)))||c())}(t,e)),t?(e.listenersAdded||(e.popUp.addEventListener("touchstart",e.resetCloseTimeout,{passive:!0}),e.listenersAdded=!0),window.clickOutsideListenerAdded||(window.addEventListener("click",e.boundClickOutside,{passive:!0}),window.clickOutsideListenerAdded=!0)):e.listenersAdded&&(e.popUp.removeEventListener("touchstart",e.resetCloseTimeout),e.listenersAdded=!1,!location.hash&&window.clickOutsideListenerAdded&&(window.removeEventListener("click",e.boundClickOutside),window.clickOutsideListenerAdded=!1))}function g(e){document.body.style.overflow=e}function f(e){["hideContentTimeout","removeDomTimeout","closeTimeout"].forEach((t=>clearTimeout(e[t])))}const y="\n .bubble-backdrop {\n position: fixed;\n background-color: var(--bubble-backdrop-background-color);\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 4;\n opacity: 0;\n transition: opacity 0.3s;\n transition-delay: .1s;\n display: flex;\n backdrop-filter: var(--custom-backdrop-filter);\n -webkit-backdrop-filter: var(--custom-backdrop-filter);\n transform: translate3d(0, 0, 0);\n }\n\n .bubble-backdrop.is-visible {\n opacity: 1;\n }\n\n .bubble-backdrop.is-hidden {\n opacity: 0;\n pointer-events: none;\n }\n";let _,v,w,x,k=!1;const C=window.matchMedia("(prefers-color-scheme: dark)"),$=(0,n.az)("style");function S(){x=getComputedStyle(document.body).getPropertyValue("--ha-card-background")||getComputedStyle(document.body).getPropertyValue("--card-background-color"),document.body.style.setProperty("--bubble-backdrop-background-color",(0,t._k)(x,.8,.6))}function L(e){const t=e.config.hide_backdrop??!1;if(_)return _;$.innerHTML=y,document.head.appendChild($);const o=(0,n.az)("style");document.head.appendChild(o);const a=(0,n.az)("div","bubble-backdrop backdrop is-hidden");return t&&(a.style.display="none",a.style.pointerEvents="none"),document.body.appendChild(a),a.style.setProperty("--custom-backdrop-filter",`blur(${e.config.backdrop_blur??0}px)`),_={hideBackdrop:function(){a.classList.add("is-hidden"),a.classList.remove("is-visible")},showBackdrop:function(){requestAnimationFrame((()=>{a.classList.add("is-visible"),a.classList.remove("is-hidden")}))},backdropElement:a,backdropCustomStyle:o},_}function T(e,t,n,o){let a;switch(n){case"hvac_modes":a=document.createElement("ha-icon"),a.slot="graphic",a.icon=function(e){switch(e){case"auto":return"mdi:thermostat-auto";case"cool":return"mdi:snowflake";case"heat":return"mdi:fire";case"heat_cool":return"mdi:sun-snowflake-variant";case"dry":return"mdi:water-percent";case"fan_only":default:return"mdi:fan";case"off":return"mdi:power"}}(o);break;case"fan_modes":if(!t.attributes.fan_modes)return null;a=document.createElement("ha-attribute-icon"),a.slot="graphic",a.attribute="fan_mode",a.attributeValue=o,a.hass=e._hass,a.stateObj=t;break;case"swing_modes":a=document.createElement("ha-attribute-icon"),a.slot="graphic",a.attribute="swing_mode",a.attributeValue=o,a.hass=e._hass,a.stateObj=t;break;case"preset_modes":a=document.createElement("ha-attribute-icon"),a.slot="graphic",a.attribute="preset_mode",a.attributeValue=o,a.hass=e._hass,a.stateObj=t;break;default:a=!1}return a}C.addEventListener("change",S),S();const O="\n * {\n -webkit-tap-highlight-color: transparent !important;\n }\n ha-card {\n margin-top: 0;\n background: none;\n opacity: 1;\n }\n mwc-list-item {\n border-radius: var(--bubble-select-list-border-radius, var(--bubble-border-radius, 24px));\n margin: 0 8px;\n }\n mwc-list-item[selected] {\n color: var(--primary-text-color) !important;\n background-color: var(--bubble-list-item-accent-color, var(--bubble-accent-color, var(--accent-color)));\n }\n ha-select {\n --mdc-shape-medium: var(--bubble-select-list-border-radius, var(--bubble-border-radius, 32px));\n --mdc-theme-surface: var(--bubble-select-list-background-color, var(--bubble-select-main-background-color, var(--bubble-main-background-color, var(--card-background-color, var(--secondary-background-color)))));\n --mdc-shape-large: 32px;\n --mdc-shape-small: 64px;\n --mdc-menu-max-width: min-content;\n --mdc-menu-min-width: var(--bubble-select-list-width, 200px);\n --mdc-select-max-width: min-content;\n --mdc-select-outlined-hover-border-color: transparent;\n --mdc-select-outlined-idle-border-color: transparent;\n --mdc-theme-primary: transparent;\n --right-value: calc(var(--mdc-menu-min-width) - 154px);\n }\n .mdc-select {\n color: transparent !important;\n width: 150px !important;\n position: absolute !important;\n pointer-events: none;\n right: var(--right-value, 46px);\n top: -28px;\n }\n .mdc-menu, mwc-list, .mdc-list-item {\n pointer-events: auto;\n }\n .mdc-select__dropdown-icon {\n display: none !important;\n }\n .mdc-select__selected-text {\n color: transparent !important;\n }\n .mdc-select__anchor {\n width: 100%;\n pointer-events: none;\n }\n .bubble-dropdown-container {\n display: flex !important;\n width: auto;\n height: 100%;\n align-items: center;\n }\n .bubble-dropdown-arrow {\n display: flex;\n position: absolute;\n background: var(--bubble-select-arrow-background-color, var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--card-background-color, var(--ha-card-background)))));\n height: 36px;\n width: 36px;\n right: 6px;\n pointer-events: none;\n border-radius: var(--bubble-select-button-border-radius, var(--bubble-border-radius, 20px));\n align-items: center;\n justify-content: center;\n transition: background 0.2s, transform 0.2s;\n pointer-events: none;\n }\n .bubble-dropdown-select {\n position: relative;\n width: 42px;\n }\n .is-unavailable {\n opacity: 0.5;\n }\n .bubble-select-card-container {\n position: relative;\n width: 100%;\n height: 50px;\n background-color: var(--bubble-select-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));\n border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px));\n box-shadow: var(--bubble-select-box-shadow, var(--bubble-box-shadow, none));\n touch-action: pan-y;\n box-sizing: border-box;\n border: solid 2px transparent;\n transition: all 0.15s;\n cursor: pointer;\n }\n .bubble-select-card,\n .bubble-select-background {\n display: flex;\n position: absolute;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n width: 100%;\n transition: background-color 1.5s;\n }\n .bubble-select-background {\n background-color: var(--bubble-select-background-color);\n opacity: .5;\n overflow: hidden !important;\n border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px));\n }\n .is-unavailable .bubble-select-card {\n cursor: not-allowed;\n }\n .bubble-icon-container {\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n justify-content: center;\n min-width: 38px;\n min-height: 38px;\n margin: 6px;\n border-radius: var(--bubble-select-icon-border-radius, var(--bubble-icon-border-radius, var(--bubble-border-radius, 50%)));\n background-color: var(--bubble-select-icon-background-color, var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--card-background-color, var(--ha-card-background)))));\n overflow: hidden;\n position: relative;\n cursor: pointer;\n }\n .bubble-icon-container::after {\n content: '';\n background-color: currentColor;\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n transition: all 1s;\n left: 0;\n right: 0;\n opacity: 0;\n pointer-events: none;\n }\n\n .bubble-icon {\n display: flex;\n opacity: 0.6;\n }\n\n .bubble-entity-picture {\n background-size: cover;\n background-position: center;\n height: 100%;\n width: 100%;\n position: absolute;\n }\n\n .bubble-name,\n .bubble-state {\n display: flex;\n position: relative;\n white-space: nowrap;\n }\n\n .bubble-name-container {\n display: flex;\n line-height: 18px;\n flex-direction: column;\n justify-content: center;\n flex-grow: 1;\n margin: 0 16px 0 4px;\n pointer-events: none;\n position: relative;\n overflow: hidden;\n }\n\n .bubble-name {\n font-weight: 600;\n }\n\n .bubble-state {\n font-size: 12px;\n font-weight: normal;\n opacity: 0.7;\n }\n\n .bubble-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 pointer-events: none;\n }\n\n @keyframes tap-feedback {\n 0% {transform: translateX(-100%); opacity: 0;}\n 64% {transform: translateX(0); opacity: 0.1;}\n 100% {transform: translateX(100%); opacity: 0;}\n }\n\n .large .bubble-select-card-container {\n height: 56px;\n border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px));\n }\n\n .large .bubble-icon-container {\n --mdc-icon-size: 24px;\n min-width: 42px !important;\n min-height: 42px !important;\n margin-left: 6px;\n }\n\n .rows-2 .bubble-sub-button-container {\n flex-direction: column;\n gap: 4px !important;\n display: grid !important;\n grid-template-columns: repeat(2, min-content);\n grid-template-rows: repeat(2, 1fr);\n grid-auto-flow: column;\n width: auto;\n }\n\n .rows-2 .bubble-sub-button {\n height: 20px !important;\n }\n";function z(e,t=e.elements,o){t.dropdownContainer=(0,n.az)("div","bubble-dropdown-container"),t.dropdownSelect=(0,n.az)("ha-select","bubble-dropdown-select"),t.dropdownSelect.setAttribute("outlined",""),t.dropdownArrow=(0,n.az)("ha-icon","bubble-dropdown-arrow"),t.dropdownArrow.setAttribute("icon","mdi:chevron-down"),t.dropdownContainer.appendChild(t.dropdownArrow),t.dropdownStyleElement=(0,n.az)("style"),t.dropdownCustomStyleElement=(0,n.az)("style"),t.dropdownStyleElement.textContent=O,t.dropdownSelect.updateComplete.then((()=>{!function(){if(t.dropdownSelect.shadowRoot)if(t!==e.elements){t.dropdownSelectStyleElement=(0,n.az)("style"),t.dropdownSelectStyleElement.textContent=O,t.dropdownSelect.shadowRoot.appendChild(t.dropdownSelectStyleElement),t.dropdownContainer.appendChild(t.dropdownStyleElement),o&&(t.dropdownContainer.style.width="24px"),t.dropdownArrow.style.height="20px",t.dropdownArrow.style.width="20px",t.mainContainer=t.parentElement.parentElement.parentElement;let e=t.dropdownSelect.shadowRoot.querySelector("mwc-menu");e&&(e.style.position="relative",e.style.right="138px")}else t.dropdownSelect.shadowRoot.appendChild(t.dropdownStyleElement),t.dropdownSelect.shadowRoot.appendChild(t.dropdownCustomStyleElement)}()})),t===e.elements?t.selectCard.appendChild(t.dropdownContainer):t.appendChild(t.dropdownContainer)}function E(e,t=e.elements,n=e.config.entity,o=e.config){const{dropdownArrow:a,dropdownSelect:i,selectCardContainer:r,selectBackground:s}=t,l=t===e.elements?r:t,c=t===e.elements?s:t;t!==e.elements&&(l.style.border="solid 2px rgba(0,0,0,0)");let d=!0;c.addEventListener("click",(e=>{if("mwc-list-item"===e.target.tagName.toLowerCase())return;const n=i.shadowRoot.querySelector("mwc-menu"),o=()=>{a.style.transform="rotate(180deg)",t.dropdownArrow.style.background="var(--accent-color)",l.style.border="var(--bubble-select-border, solid 2px var(--accent-color))",t.mainContainer&&(t.mainContainer.style.overflow="visible")};d?(d=!1,a.style.transition="none",n.setAttribute("open",""),requestAnimationFrame((()=>{n.removeAttribute("open"),setTimeout((()=>{a.style.transition="",o()}),140)}))):(n.hasAttribute("open")||(n.removeAttribute("mdc-menu-surface--is-open-below"),n.setAttribute("mdc-menu-surface--is-open-above",""),n.setAttribute("open","")),o())})),i.addEventListener("closed",(e=>{e.stopPropagation(),e.preventDefault(),a.style.transform="rotate(0deg)",l.style.border="solid 2px rgba(0,0,0,0)",t.dropdownArrow.style.background="",t.mainContainer&&(t.mainContainer.style.overflow="")})),t.dropdownSelect.addEventListener("click",(t=>{const a=t.target.value;!function(e,t,n,o){const a=t?.split(".")[0];switch(a){case"input_select":e._hass.callService("input_select","select_option",{entity_id:t,option:n});break;case"select":e._hass.callService("select","select_option",{entity_id:t,option:n});break;case"climate":switch(o.select_attribute){case"hvac_modes":e._hass.callService("climate","set_hvac_mode",{entity_id:t,hvac_mode:n});break;case"fan_modes":e._hass.callService("climate","set_fan_mode",{entity_id:t,fan_mode:n});break;case"swing_modes":e._hass.callService("climate","set_swing_mode",{entity_id:t,swing_mode:n});break;case"preset_modes":e._hass.callService("climate","set_preset_mode",{entity_id:t,preset_mode:n})}break;case"fan":"preset_modes"===o.select_attribute&&e._hass.callService("fan","set_preset_mode",{entity_id:t,preset_mode:n});break;case"light":"effect_list"===o.select_attribute&&e._hass.callService("light","turn_on",{entity_id:t,effect:n});break;case"media_player":switch(o.select_attribute){case"source_list":e._hass.callService("media_player","select_source",{entity_id:t,source:n});break;case"sound_mode_list":e._hass.callService("media_player","select_sound_mode",{entity_id:t,sound_mode:n})}break;default:console.warn(`Unsupported entity type: ${a}`)}}(e,n,a,o)}))}function B(e,t=e.elements,n=e.config.entity,o){if(t.currentState=e._hass.states[n]?.state,!t.currentState)return;if(t.currentList=n?.startsWith("input_select")||n?.startsWith("select")?e._hass.states[n].attributes.options:e._hass.states[n].attributes[o.select_attribute],t.previousList===t.currentList&&t.previousState===t.currentState)return;let a=t.currentList;for(t.currentState;t.dropdownSelect.firstChild;)t.dropdownSelect.removeChild(t.dropdownSelect.firstChild);a.forEach((a=>{const i=document.createElement("mwc-list-item");i.value=a;const r=T(e,e._hass.states[n],o.select_attribute,a);r&&(i.graphic="icon",i.appendChild(r));const s=function(e,t,n,o){switch(n){case"fan_modes":return e._hass.formatEntityAttributeValue(t,"fan_mode",o);case"hvac_modes":return e._hass.formatEntityState(t,o);case"swing_modes":return e._hass.formatEntityAttributeValue(t,"swing_mode",o);case"preset_modes":return e._hass.formatEntityAttributeValue(t,"preset_mode",o);default:return function(e){const t=e.replace(/_/g," ");return t.charAt(0).toUpperCase()+t.slice(1)}(o)}}(e,e._hass.states[n],o.select_attribute,a);i.appendChild(document.createTextNode(s)),a===function(e,t){switch(t){case"fan_modes":return e.attributes.fan_mode||null;case"swing_modes":return e.attributes.swing_mode||null;case"preset_modes":return e.attributes.preset_mode||null;case"effect_list":return e.attributes.effect||null;case"source_list":return e.attributes.source||null;case"sound_mode_list":return e.attributes.sound_mode||null;default:return e.state}}(e._hass.states[n],o.select_attribute)&&i.setAttribute("selected",""),t.dropdownSelect.appendChild(i),t.previousList=t.currentList,t.previousState=t.currentState})),t.dropdownContainer.appendChild(t.dropdownSelect)}function A(e,t){try{if(e.states[t])return e.states[t]?.state}catch{}}function I(e,t){const n=e.entity&&t.states[e.entity]?t.states[e.entity].state:"unavailable";let o=e.state??e.state_not;if(Array.isArray(o)){const e=o.map((e=>A(t,e))).filter((e=>void 0!==e));o=[...o,...e]}else if("string"==typeof o){const e=A(t,o);o=[o],e&&o.push(e)}return null!=e.state?V(o).includes(n):!V(o).includes(n)}function V(e){return void 0===e||Array.isArray(e)?e:[e]}function P(e,t){return e.every((e=>{if("condition"in e)switch(e.condition){case"screen":return!!(n=e).media_query&&matchMedia(n.media_query).matches;case"user":return function(e,t){return!(!e.users||!t.user?.id)&&e.users.includes(t.user.id)}(e,t);case"numeric_state":return function(e,t){const n=(e.entity?t.states[e.entity]:void 0)?.state;let o=e.above,a=e.below;"string"==typeof o&&(o=A(t,o)??o),"string"==typeof a&&(a=A(t,a)??a);const i=Number(n),r=Number(o),s=Number(a);return!isNaN(i)&&(null==e.above||isNaN(r)||r
- ${this.makeDropdown("Card type","card_type",o)}
+ ${this.makeDropdown("Card type","card_type",a)}
@@ -272,9 +262,9 @@
Since v1.7.0, the optimized mode has been removed to ensure stability and to simplify updates for everyone. However, if your pop-up content still appears on the screen during page loading, you can install this similar fix.
${this.makeVersion()}
- `;if("button"===this._config?.card_type)return ae`
+ `}if("button"===this._config?.card_type)return ce`
- ${this.makeDropdown("Optional - Entity to open the pop-up based on its state","trigger_entity",n)}
-
-
- 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._conditionChanged(e)}
+ >
+
+
+ The pop-up will be opened when ALL conditions are fulfilled. 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 (
- ${this.makeDropdown("Card type","card_type",o)}
+ ${this.makeDropdown("Card type","card_type",a)}
${this.makeDropdown("Button type","button_type",i)}
${this.makeDropdown("slider"!==this._button_type?"Entity (toggle)":"Entity (light, media_player, cover or input_number)","entity",n,r)}
@@ -341,9 +331,9 @@
This card allows you to control your entities. ${"slider"===this._config.button_type?"Supported entities: Light (brightness), media player (volume), cover (position), fan (percentage), climate (temperature), input number and number (value). To access color / control of an entity, simply tap on the icon.":""}
${this.makeVersion()}
- `;if("separator"===this._config?.card_type)return ae`
+ `;if("separator"===this._config?.card_type)return ce`
- ${this.makeDropdown("Card type","card_type",o)}
+ ${this.makeDropdown("Card type","card_type",a)}
This card is a simple separator for dividing your pop-up into categories / sections. e.g. Lights, Devices, Covers, Settings, Automations...
${this.makeVersion()}
- `;if("horizontal-buttons-stack"===this._config?.card_type){if(!this.buttonAdded)for(this.buttonAdded=!0,this.buttonIndex=0;this._config[this.buttonIndex+1+"_link"];)this.buttonIndex++;function l(){this.buttonIndex++,this.requestUpdate()}return ae`
+ `;if("horizontal-buttons-stack"===this._config?.card_type){if(!this.buttonAdded)for(this.buttonAdded=!0,this.buttonIndex=0;this._config[this.buttonIndex+1+"_link"];)this.buttonIndex++;function c(){this.buttonIndex++,this.requestUpdate()}return ce`
- ${this.makeDropdown("Card type","card_type",o)}
+ ${this.makeDropdown("Card type","card_type",a)}
-
- `}if("cover"===this._config?.card_type)return ae`
+ `}if("cover"===this._config?.card_type)return ce`
- ${this.makeDropdown("Card type","card_type",o)}
- ${this.makeDropdown("Entity","entity",a)}
+ ${this.makeDropdown("Card type","card_type",a)}
+ ${this.makeDropdown("Entity","entity",o)}
- `;if("media-player"===this._config?.card_type)return ae`
+ `;if("media-player"===this._config?.card_type)return ce`
This card allows you to control your covers.
${this.makeVersion()}
- ${this.makeDropdown("Card type","card_type",o)}
+ ${this.makeDropdown("Card type","card_type",a)}
${this.makeDropdown("Entity","entity",this.mediaPlayerList)}
@@ -660,9 +650,9 @@
- `;if("empty-column"===this._config?.card_type)return ae`
+ `;if("empty-column"===this._config?.card_type)return ce`
@@ -660,9 +650,9 @@
This card allows you to control a media player. You can tap on the icon to get more control.
${this.makeVersion()}
- ${this.makeDropdown("Card type","card_type",o)}
+ ${this.makeDropdown("Card type","card_type",a)}
- `;if("select"===this._config?.card_type){const c=this._config.entity,d=(c?.startsWith("input_select")||c?.startsWith("select")||this._config.select_attribute,this.hass.states[c]?.attributes),u=this._selectable_attributes.some((e=>d?.[e])),p=Object.keys(this.hass.states[c]?.attributes||{}).map((e=>{let t=this.hass.states[c];return{label:this.hass.formatEntityAttributeName(t,e),value:e}})).filter((e=>this._selectable_attributes.includes(e.value)));return ae`
+ `;if("select"===this._config?.card_type){const d=this._config.entity,u=(d?.startsWith("input_select")||d?.startsWith("select")||this._config.select_attribute,this.hass.states[d]?.attributes),b=this._selectable_attributes.some((e=>u?.[e])),p=Object.keys(this.hass.states[d]?.attributes||{}).map((e=>{let t=this.hass.states[d];return{label:this.hass.formatEntityAttributeName(t,e),value:e}})).filter((e=>this._selectable_attributes.includes(e.value)));return ce`
Just an empty card to fill any empty column.
${this.makeVersion()}
- ${this.makeDropdown("Card type","card_type",o)}
+ ${this.makeDropdown("Card type","card_type",a)}
${this.makeDropdown("Entity","entity",this.inputSelectList)}
- ${u?ae`
+ ${b?ce`
${this.makeVersion()}
- `}if("climate"===this._config?.card_type){if("climate"===this._config.card_type&&!this.climateSubButtonsAdded&&this._config.entity){const b=this.hass.states[this._config.entity]?.attributes?.hvac_modes;this._config.sub_button&&0!==this._config.sub_button.length?this._config.sub_button=this._config.sub_button.filter((e=>!("temperature"===e.attribute&&"mdi:thermometer"===e.icon))):this._config.sub_button=[b?{name:"HVAC modes menu",select_attribute:"hvac_modes",state_background:!1,show_arrow:!1}:null].filter(Boolean),this.climateSubButtonsAdded=!0}return ae`
+ `}if("climate"===this._config?.card_type){if("climate"===this._config.card_type&&!this.climateSubButtonsAdded&&this._config.entity){const h=this.hass.states[this._config.entity]?.attributes?.hvac_modes;this._config.sub_button&&0!==this._config.sub_button.length||(this._config.sub_button=[h?{name:"HVAC modes menu",select_attribute:"hvac_modes",state_background:!1,show_arrow:!1}:null].filter(Boolean)),this.climateSubButtonsAdded=!0}return ce`
- `}makeShowState(e=this._config,t="",n=!1,a){const o=e?.entity??this._config.entity??"",i="name"===this._config.button_type,r=o?.startsWith("input_select")||o?.startsWith("select")||e.select_attribute,s=Object.keys(this.hass.states[o]?.attributes||{}).map((e=>{let t=this.hass.states[o];return{label:this.hass.formatEntityAttributeName(t,e),value:e}}));return ae`
- ${"sub_button"!==n?ae`
+ `}makeShowState(e=this._config,t="",n=!1,o){const a=e?.entity??this._config.entity??"",i="name"===this._config.button_type,r=a?.startsWith("input_select")||a?.startsWith("select")||e.select_attribute,s=Object.keys(this.hass.states[a]?.attributes||{}).map((e=>{let t=this.hass.states[a];return{label:this.hass.formatEntityAttributeName(t,e),value:e}}));return ce`
+ ${"sub_button"!==n?ce`
- ${this.makeDropdown("Card type","card_type",o)}
+ ${this.makeDropdown("Card type","card_type",a)}
${this.makeDropdown("Entity","entity",this.climateList)}
@@ -757,7 +747,7 @@
>
${this.makeDropdown("Optional - Icon","icon")}
${this.makeShowState()}
- ${this.hass.states[this._config.entity]?.attributes?.target_temp_low?ae`
+ ${this.hass.states[this._config.entity]?.attributes?.target_temp_low?ce`
- `}return this._config?.card_type?void 0:ae`
+ `}return this._config?.card_type?void 0:ce`
@@ -757,7 +747,7 @@
>
${this.makeDropdown("Optional - Icon","icon")}
${this.makeShowState()}
- ${this.hass.states[this._config.entity]?.attributes?.target_temp_low?ae`
+ ${this.hass.states[this._config.entity]?.attributes?.target_temp_low?ce`
`:""}
- ${this.hass.states[this._config.entity]?.attributes?.target_temp_high?ae`
+ ${this.hass.states[this._config.entity]?.attributes?.target_temp_high?ce`
This card allows you to control your climate entities. You can also add a sub-button that display a select menu for your climate modes (check if you have "Select menu" available when you create a new sub-button).
${this.makeVersion()}
- ${this.makeDropdown("Card type","card_type",o)}
+ ${this.makeDropdown("Card type","card_type",a)}
You need to add a card type first. Please note that in some cases, a page refresh might be needed after exiting the editor.
- `}makeLayoutOptions(){return ae`
+ `}makeLayoutOptions(){return ce`
The Bubble Card ${e} changelog is available here.
@@ -846,7 +836,7 @@Thank you! 🍻
${this.makeVersion()}
@@ -931,20 +921,20 @@
aria-label="Optional - Show icon"
.checked=${e?.show_icon??!0}
.configValue="${t+"show_icon"}"
- @change="${n?e=>this._arrayValueChange(a,{show_icon:e.target.checked},n):this._valueChanged}"
+ @change="${n?e=>this._arrayValueChange(o,{show_icon:e.target.checked},n):this._valueChanged}"
>
- ${"sub_button"!==n?ae`
+ ${"sub_button"!==n?ce`
- `);return e}makeVersion(){return ae`
+ `);return e}makeVersion(){return ce`
@@ -956,7 +946,7 @@
aria-label="Optional - Show name"
.checked=${!!(e?.show_name??"sub_button"!==n)}
.configValue="${t+"show_name"}"
- @change="${n?e=>this._arrayValueChange(a,{show_name:e.target.checked},n):this._valueChanged}"
+ @change="${n?e=>this._arrayValueChange(o,{show_name:e.target.checked},n):this._valueChanged}"
>
- `}makeButton(){let e=[];for(let t=1;t<=this.buttonIndex;t++)e.push(ae`
+ `}makeButton(){let e=[];for(let t=1;t<=this.buttonIndex;t++)e.push(ce`
@@ -968,7 +958,7 @@
.checked="${e?.show_state??"state"===e.button_type}"
.configValue="${t+"show_state"}"
.disabled="${i&&"sub_button"!==n}"
- @change="${n?e=>this._arrayValueChange(a,{show_state:e.target.checked},n):this._valueChanged}"
+ @change="${n?e=>this._arrayValueChange(o,{show_state:e.target.checked},n):this._valueChanged}"
>
@@ -1135,12 +1125,12 @@
-
+
+
+
+
+
- `}));return ae`
+ `}));return ce`
@@ -980,7 +970,7 @@
.checked=${e?.show_last_changed}
.configValue="${t+"show_last_changed"}"
.disabled="${i&&"sub_button"!==n}"
- @change="${n?e=>this._arrayValueChange(a,{show_last_changed:e.target.checked},n):this._valueChanged}"
+ @change="${n?e=>this._arrayValueChange(o,{show_last_changed:e.target.checked},n):this._valueChanged}"
>
`:""}
- ${"call-service"===r?.action&&r?.service?ae`
+ ${"call-service"===r?.action&&r?.service?ce`
For now, you still need to switch to the YAML editor if you want to add
`:""}
- `}makeSubButtonPanel(){const e=this._config?.sub_button?.map(((e,t)=>{if(!e)return;const n="sub_button."+t+".",a=e.entity??this._config.entity,o=a?.startsWith("input_select")||a?.startsWith("select")||e.select_attribute,i=this.hass.states[a]?.attributes,r=this._selectable_attributes.some((e=>i?.[e])),s=Object.keys(this.hass.states[a]?.attributes||{}).map((e=>{let t=this.hass.states[a];return{label:this.hass.formatEntityAttributeName(t,e),value:e}})).filter((e=>this._selectable_attributes.includes(e.value)));return ae`
+ `}makeSubButtonPanel(){const e=this._config?.sub_button?.map(((e,t)=>{if(!e)return;const n="sub_button."+t+".",o=e.entity??this._config.entity,a=o?.startsWith("input_select")||o?.startsWith("select")||e.select_attribute,i=this.hass.states[o]?.attributes,r=this._selectable_attributes.some((e=>i?.[e])),s=Object.keys(this.hass.states[o]?.attributes||{}).map((e=>{let t=this.hass.states[o];return{label:this.hass.formatEntityAttributeName(t,e),value:e}})).filter((e=>this._selectable_attributes.includes(e.value))),l=e.visibility??[];return ce`
@@ -992,13 +982,13 @@
.checked=${e?.show_attribute}
.configValue="${t+"show_attribute"}"
.disabled="${i&&"sub_button"!==n}"
- @change="${n?e=>this._arrayValueChange(a,{show_attribute:e.target.checked},n):this._valueChanged}"
+ @change="${n?e=>this._arrayValueChange(o,{show_attribute:e.target.checked},n):this._valueChanged}"
>
- ${e?.show_attribute?ae`
+ ${e?.show_attribute?ce`
`:""}
- `}makeDropdown(e,t,n,a){return e.includes("icon")||e.includes("Icon")?ae`
+ `}makeDropdown(e,t,n,o){return e.includes("icon")||e.includes("Icon")?ce`
- `:ae`
+ `:ce`
- ${"navigate"===r?.action?ae`
+ ${"navigate"===r?.action?ce`
@@ -1091,37 +1081,37 @@
label="Optional - Entity"
.value="${r?.target?.entity_id}"
.items="${this.allEntitiesList}"
- @value-changed="${"entity"!==r?.target?.entity_id?e=>{this._tapActionValueChange(o,{[s]:{target:{entity_id:e.detail.value}}},a)}:""}"
+ @value-changed="${"entity"!==r?.target?.entity_id?e=>{this._tapActionValueChange(a,{[s]:{target:{entity_id:e.detail.value}}},o)}:""}"
>
data: to your service.
@@ -1135,12 +1125,12 @@
+
+
+ this._conditionChanged(e,t,"sub_button")}
+ >
+
+
+ The sub-button will be shown when ALL conditions are fulfilled. If no conditions are set, the sub-button will always be shown.
+
+
+
this._arrayValueChange(e,t,a)),10);this._config[a]=this._config[a]||[];let o=[...this._config[a]];o[e]=o[e]||{},o[e]={...o[e],...t},this._config[a]=o,(0,n.BX)(this,"config-changed",{config:this._config}),this.requestUpdate()}_tapActionValueChange(e,t,a){if(void 0===a)for(let e in t)this._config[e]={...this._config[e],...t[e]};else{this._config[a]=this._config[a]||(a?{}:[]);let n=Array.isArray(this._config[a])?[...this._config[a]]:{...this._config[a]};if(Array.isArray(n)){n[e]=n[e]||{};let a={...n[e]};for(let e in t)a[e]=e in a?{...a[e],...t[e]}:t[e];n[e]=a}else for(let e in t)n.hasOwnProperty(e)?n[e]={...n[e],...t[e]}:n[e]=t[e];this._config[a]=n}(0,n.BX)(this,"config-changed",{config:this._config}),this.requestUpdate()}static get styles(){return oe`
+ `}_valueChanged(e){const t=e.target,o=e.detail;let a;if("HA-SWITCH"===t.tagName?a=t.checked:void 0!==t.value&&(a="string"==typeof t.value?t.value.replace(",","."):t.value),"string"==typeof a&&(a.endsWith(".")||"-"===a))return;const{configValue:i,checked:r}=t;if(i){const n=i.split(".");let r=this._config;for(let e=0;ethis._arrayValueChange(e,t,o)),10);this._config[o]=this._config[o]||[];let a=[...this._config[o]];a[e]=a[e]||{},a[e]={...a[e],...t},a[e]={...a[e].visibility,...t},this._config[o]=a,(0,n.BX)(this,"config-changed",{config:this._config}),this.requestUpdate()}_tapActionValueChange(e,t,o){if(void 0===o)for(let e in t)this._config[e]={...this._config[e],...t[e]};else{this._config[o]=this._config[o]||(o?{}:[]);let n=Array.isArray(this._config[o])?[...this._config[o]]:{...this._config[o]};if(Array.isArray(n)){n[e]=n[e]||{};let o={...n[e]};for(let e in t)o[e]=e in o?{...o[e],...t[e]}:t[e];n[e]=o}else for(let e in t)n.hasOwnProperty(e)?n[e]={...n[e],...t[e]}:n[e]=t[e];this._config[o]=n}(0,n.BX)(this,"config-changed",{config:this._config}),this.requestUpdate()}_conditionChanged(e,t,o){if(e.stopPropagation(),o){this._config[o]=this._config[o]||[];let n=[...this._config[o]];n[t]=n[t]||{};const a=e.detail.value;n[t]={...n[t],visibility:a},this._config[o]=n}else if("pop-up"===this._config.card_type){const t=e.detail.value;this._config={...this._config,trigger:t}}(0,n.BX)(this,"config-changed",{config:this._config}),this.requestUpdate()}static get styles(){return de`
div {
display: grid;
grid-gap: 12px;
@@ -1414,4 +1421,8 @@
padding: 0;
margin: 0 8px;
}
- `}})}(),document.createElement("bubble-card-editor")}getLayoutOptions(){let e=1;"pop-up"===this.config.card_type?e=0:"horizontal-buttons-stack"===this.config.card_type?e=1:["cover"].includes(this.config.card_type)&&(e=2);let t=4;return"pop-up"===this.config.card_type?t=0:"horizontal-buttons-stack"===this.config.card_type&&(t=4),{grid_columns:this.config.columns??t,grid_rows:this.config.rows??e}}}customElements.define("bubble-card",ie),window.customCards=window.customCards||[],window.customCards.push({type:"bubble-card",name:"Bubble Card",preview:!1,description:"A minimalist card collection with a nice pop-up touch.",documentationURL:"https://github.com/Clooos/Bubble-Card/"}),console.info(`%c Bubble Card %c ${e} `,"background-color: #555;color: #fff;padding: 3px 2px 3px 3px;border-radius: 14px 0 0 14px;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)","background-color: #506eac;color: #fff;padding: 3px 3px 3px 2px;border-radius: 0 14px 14px 0;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)")})()})();
\ No newline at end of file
+
+ ha-card-conditions-editor {
+ margin-top: -12px;
+ }
+ `}})}(),document.createElement("bubble-card-editor")}getLayoutOptions(){let e=1;"pop-up"===this.config.card_type?e=0:"horizontal-buttons-stack"===this.config.card_type?e=1:["cover"].includes(this.config.card_type)&&(e=2);let t=4;return"pop-up"===this.config.card_type?t=0:"horizontal-buttons-stack"===this.config.card_type&&(t=4),{grid_columns:this.config.columns??t,grid_rows:this.config.rows??e}}}customElements.define("bubble-card",ue),window.customCards=window.customCards||[],window.customCards.push({type:"bubble-card",name:"Bubble Card",preview:!1,description:"A minimalist card collection with a nice pop-up touch.",documentationURL:"https://github.com/Clooos/Bubble-Card/"}),console.info(`%c Bubble Card %c ${e} `,"background-color: #555;color: #fff;padding: 3px 2px 3px 3px;border-radius: 14px 0 0 14px;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)","background-color: #506eac;color: #fff;padding: 3px 3px 3px 2px;border-radius: 0 14px 14px 0;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)")})()})();
\ No newline at end of file
diff --git a/src/cards/button/changes.ts b/src/cards/button/changes.ts
index 9bacc73..6ad59bf 100644
--- a/src/cards/button/changes.ts
+++ b/src/cards/button/changes.ts
@@ -115,6 +115,7 @@ export function changeIcon(context) {
}
export function changeName(context) {
+ if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
const buttonType = getButtonType(context);
const name = buttonType !== 'name' ? getName(context) : context.config.name;
if (name !== context.elements.previousName) {
@@ -188,20 +189,6 @@ export function changeStatus(context) {
}
}
- if (isEntityType(context, "light")) {
- if (cardType === 'button') {
- context.card.classList.add('is-light');
- } else if (cardType === 'pop-up') {
- context.elements.headerContainer.classList.add('is-light');
- }
- } else {
- if (cardType === 'button') {
- context.card.classList.remove('is-light');
- } else if (cardType === 'pop-up') {
- context.elements.headerContainer.classList.remove('is-light');
- }
- }
-
if (isStateOn(context)) {
if (cardType === 'button') {
context.card.classList.add('is-on');
@@ -229,8 +216,8 @@ export function changeStyle(context) {
try {
customStyle = context.config.styles
- ? Function('hass', 'entity', 'state', 'icon', 'subButtonIcon', 'getWeatherIcon', 'card', `return \`${context.config.styles}\`;`)
- (context._hass, context.config.entity, state, context.elements.icon, context.subButtonIcon, getWeatherIcon, context.card)
+ ? Function('hass', 'entity', 'state', 'icon', 'subButtonIcon', 'getWeatherIcon', 'card', 'name', `return \`${context.config.styles}\`;`)
+ (context._hass, context.config.entity, state, context.elements.icon, context.subButtonIcon, getWeatherIcon, context.card, context.card.name)
: '';
} catch (error) {
throw new Error(`Error in generating button custom templates: ${error.message}`);
diff --git a/src/cards/button/index.ts b/src/cards/button/index.ts
index f6e5563..9c36d0c 100644
--- a/src/cards/button/index.ts
+++ b/src/cards/button/index.ts
@@ -39,8 +39,9 @@ export function handleButton(context, container = context.content, appendTo = co
}
changeIcon(context);
- changeName(context);
+
changeState(context);
changeSubButtonState(context, container, context.elements.buttonCard);
if (context.cardType !== 'pop-up') changeStyle(context);
+ changeName(context);
}
\ No newline at end of file
diff --git a/src/cards/button/styles.ts b/src/cards/button/styles.ts
index f23b5ce..c7129f8 100644
--- a/src/cards/button/styles.ts
+++ b/src/cards/button/styles.ts
@@ -22,6 +22,7 @@ export default `
height: 50px;
background-color: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 32px));
+ box-shadow: var(--bubble-button-box-shadow, var(--bubble-box-shadow, none));
overflow: scroll;
touch-action: pan-y;
}
diff --git a/src/cards/climate/changes.ts b/src/cards/climate/changes.ts
index c8c4fa2..a6150a8 100644
--- a/src/cards/climate/changes.ts
+++ b/src/cards/climate/changes.ts
@@ -64,8 +64,8 @@ export function changeIcon(context) {
}
export function changeName(context) {
+ if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
const name = getName(context);
-
if (name !== context.previousName && context.elements.name) {
context.elements.name.innerText = name;
context.previousName = name;
diff --git a/src/cards/climate/styles.ts b/src/cards/climate/styles.ts
index fd49252..c1c4928 100644
--- a/src/cards/climate/styles.ts
+++ b/src/cards/climate/styles.ts
@@ -18,6 +18,7 @@ export default `
height: 50px;
background-color: var(--bubble-climate-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, 32px));
+ box-shadow: var(--bubble-climate-box-shadow, var(--bubble-box-shadow, none));
overflow: visible;
touch-action: pan-y;
}
diff --git a/src/cards/cover/changes.ts b/src/cards/cover/changes.ts
index d5584a4..cadf55e 100644
--- a/src/cards/cover/changes.ts
+++ b/src/cards/cover/changes.ts
@@ -87,6 +87,7 @@ export function changeIcon(context) {
}
export function changeName(context) {
+ if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
const name = getName(context);
if (name !== context.elements.previousName) {
context.elements.name.innerText = name;
diff --git a/src/cards/cover/styles.ts b/src/cards/cover/styles.ts
index 541e78a..b830c79 100644
--- a/src/cards/cover/styles.ts
+++ b/src/cards/cover/styles.ts
@@ -90,6 +90,7 @@ export default `
background: var(--bubble-cover-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
height: 42px;
border-radius: var(--bubble-cover-border-radius, var(--bubble-border-radius, 32px));
+ box-shadow: var(--bubble-cover-box-shadow, var(--bubble-button-box-shadow, var(--bubble-box-shadow, none)));
align-items: center;
justify-content: center;
cursor: pointer;
diff --git a/src/cards/media-player/changes.ts b/src/cards/media-player/changes.ts
index 55c7815..425080f 100644
--- a/src/cards/media-player/changes.ts
+++ b/src/cards/media-player/changes.ts
@@ -77,8 +77,8 @@ export function changeBackground(context) {
}
export function changeName(context) {
+ if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
const name = getName(context);
-
if (name !== context.previousName) {
context.elements.name.innerText = name;
context.previousName = name;
@@ -168,7 +168,7 @@ export function changeVolumeIcon(context) {
context.elements.volumeButton.setAttribute("icon", newIcon);
context.elements.mediaInfoContainer.style.opacity = newOpacity;
context.elements.nameContainer.style.opacity = newOpacity;
- if(context.elements.subButtonContainer)context.elements.subButtonContainer.style.opacity = newOpacity;
+ if (context.elements.subButtonContainer) context.elements.subButtonContainer.style.opacity = newOpacity;
context.elements.previousButton.style.opacity = newOpacity;
context.elements.nextButton.style.opacity = newOpacity;
context.elements.powerButton.style.opacity = newOpacity;
@@ -242,4 +242,4 @@ export function changeStyle(context) {
if (context.elements.customStyle) {
context.elements.customStyle.innerText = customStyle;
}
-}
+}
\ No newline at end of file
diff --git a/src/cards/media-player/styles.ts b/src/cards/media-player/styles.ts
index ffa16b8..bdc77b7 100644
--- a/src/cards/media-player/styles.ts
+++ b/src/cards/media-player/styles.ts
@@ -20,6 +20,7 @@ export default `
background-color: var(--bubble-media-player-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
touch-action: pan-y;
border-radius: inherit;
+ box-shadow: var(--bubble-media-player-box-shadow, var(--bubble-box-shadow, none));
}
.bubble-media-player {
diff --git a/src/cards/pop-up/changes.ts b/src/cards/pop-up/changes.ts
index 636d3df..32b3957 100644
--- a/src/cards/pop-up/changes.ts
+++ b/src/cards/pop-up/changes.ts
@@ -3,6 +3,7 @@ import { getIcon, getIconColor, getImage, getName, getState, isEntityType, isSta
import { getBackdrop } from "./create.ts";
import { addHash, onEditorChange, removeHash } from "./helpers.ts";
import { initializesubButtonIcon } from '../../tools/global-changes.ts';
+import { checkConditionsMet, validateConditionalConfig, ensureArray } from '../../tools/validate-condition.ts';
export function changeEditor(context) {
if (!context.verticalStack) return;
@@ -110,34 +111,63 @@ export function changeStyle(context) {
backdropCustomStyle.innerText = customStyle;
}
-
export function changeTriggered(context) {
- let triggerEntity = context.config.trigger_entity ?? '';
+ const triggerConditions = context.config.trigger;
- if (triggerEntity === '') return;
+ if (triggerConditions) {
+ const isInitialLoad = !context.hasPageLoaded;
+ context.hasPageLoaded = true;
- let triggerState = context.config.trigger_state ?? '';
- let triggerClose = context.config.trigger_close ?? false;
- let triggerEntityState = context._hass.states[triggerEntity]?.state;
+ console.log(context.hashAdded)
- if (!triggerEntity) return;
- if (!triggerState) return;
- if (context.oldTriggerEntityState === triggerEntityState) return;
+ //Check conditions
+ const triggerConditions_array = ensureArray(triggerConditions);
+ if (validateConditionalConfig(triggerConditions_array)){
+ const trigger = checkConditionsMet(triggerConditions_array,context._hass);
- const isInitialLoad = !context.hasPageLoaded;
- context.hasPageLoaded = true;
+ if (trigger === context.previousTrigger) return;
- if (context.config.hash === location.hash) {
- if (triggerClose && triggerState !== triggerEntityState) {
- if (!isInitialLoad) {
- removeHash();
- }
+ if (context.config.hash === location.hash) {
+ if (!trigger && !isInitialLoad) {
+ removeHash();
+ }
+ } else {
+ if (trigger) {
+ addHash(context.config.hash);
+ }
+ }
+
+ context.previousTrigger = trigger;
}
} else {
- if (triggerEntityState === triggerState) {
- addHash(context.config.hash);
+ // Deprecated method
+ let triggerEntity = context.config.trigger_entity ?? '';
+
+ if (triggerEntity === '') return;
+
+ let triggerState = context.config.trigger_state ?? '';
+ let triggerClose = context.config.trigger_close ?? false;
+ let triggerEntityState = context._hass.states[triggerEntity]?.state;
+
+ if (!triggerEntity) return;
+ if (!triggerState) return;
+ if (context.oldTriggerEntityState === triggerEntityState) return;
+
+ const isInitialLoad = !context.hasPageLoaded;
+ context.hasPageLoaded = true;
+
+ if (context.config.hash === location.hash) {
+ if (triggerClose && triggerState !== triggerEntityState) {
+ if (!isInitialLoad) {
+ removeHash();
+ }
+ }
+ } else {
+ if (triggerEntityState === triggerState) {
+ addHash(context.config.hash);
+ }
}
- }
- context.oldTriggerEntityState = triggerEntityState;
+ context.oldTriggerEntityState = triggerEntityState;
+ }
}
diff --git a/src/cards/select/changes.ts b/src/cards/select/changes.ts
index 2ea42cd..b86623c 100644
--- a/src/cards/select/changes.ts
+++ b/src/cards/select/changes.ts
@@ -36,6 +36,7 @@ export function changeIcon(context) {
}
export function changeName(context) {
+ if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
const name = getName(context);
if (name !== context.elements.previousName) {
applyScrollingEffect(context, context.elements.name, name);
diff --git a/src/cards/select/helpers.ts b/src/cards/select/helpers.ts
index cf539b4..37651dd 100644
--- a/src/cards/select/helpers.ts
+++ b/src/cards/select/helpers.ts
@@ -21,17 +21,17 @@ export function getTranslatedAttribute(context, state, attribute, option) {
export function getSelectedAttribute(state, attribute) {
switch (attribute) {
case 'fan_modes':
- return state.attributes.fan_mode;
+ return state.attributes.fan_mode || null;
case 'swing_modes':
- return state.attributes.swing_mode;
+ return state.attributes.swing_mode || null;
case 'preset_modes':
- return state.attributes.preset_mode;
+ return state.attributes.preset_mode || null;
case 'effect_list':
- return state.attributes.effect;
+ return state.attributes.effect || null;
case 'source_list':
- return state.attributes.source;
+ return state.attributes.source || null;
case 'sound_mode_list':
- return state.attributes.sound_mode;
+ return state.attributes.sound_mode || null;
default:
return state.state;
}
@@ -68,6 +68,7 @@ export function getOptionIcon(context, state, attribute, option) {
icon.icon = getHvacModeIcon(option);
break;
case 'fan_modes':
+ if (!state.attributes.fan_modes) return null;
icon = document.createElement('ha-attribute-icon');
icon.slot = 'graphic';
icon.attribute = 'fan_mode';
diff --git a/src/cards/select/styles.ts b/src/cards/select/styles.ts
index 9a15b57..3a1b506 100644
--- a/src/cards/select/styles.ts
+++ b/src/cards/select/styles.ts
@@ -82,6 +82,7 @@ export default `
height: 50px;
background-color: var(--bubble-select-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px));
+ box-shadow: var(--bubble-select-box-shadow, var(--bubble-box-shadow, none));
touch-action: pan-y;
box-sizing: border-box;
border: solid 2px transparent;
diff --git a/src/cards/separator/changes.ts b/src/cards/separator/changes.ts
index faaaa1f..9eb21a4 100644
--- a/src/cards/separator/changes.ts
+++ b/src/cards/separator/changes.ts
@@ -12,6 +12,7 @@ export function changeIcon(context) {
}
}
export function changeName(context) {
+ if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
const name = getName(context);
if (name !== context.elements.name.innerText) {
context.elements.name.innerText = name;
diff --git a/src/editor/bubble-card-editor.ts b/src/editor/bubble-card-editor.ts
index 08351ab..c092f72 100644
--- a/src/editor/bubble-card-editor.ts
+++ b/src/editor/bubble-card-editor.ts
@@ -459,6 +459,7 @@ export function createBubbleCardEditor() {
const nameButton = this._config?.button_type === 'name';
if (this._config?.card_type === 'pop-up') {
+ const conditions = this._config?.trigger ?? [];
return html`
${this.makeDropdown("Card type", "card_type", cardTypeList)}
@@ -593,25 +594,15 @@ export function createBubbleCardEditor() {
Pop-up trigger
- ${this.makeDropdown("Optional - Entity to open the pop-up based on its state", "trigger_entity", allEntitiesList)}
-
-
- 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._conditionChanged(ev)}
+ >
+
+
+ The pop-up will be opened when ALL conditions are fulfilled. 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.
+
@@ -1256,11 +1247,6 @@ export function createBubbleCardEditor() {
show_arrow: false
} : null
].filter(Boolean);
- } else {
- // Remove the previously added temperature sub-button if it exists when the editor is opened
- this._config.sub_button = this._config.sub_button.filter(button =>
- !(button.attribute === 'temperature' && button.icon === 'mdi:thermometer')
- );
}
this.climateSubButtonsAdded = true;
@@ -1463,7 +1449,7 @@ export function createBubbleCardEditor() {
${this.makeDropdown("Card type", "card_type", cardTypeList)}
@@ -593,25 +594,15 @@ export function createBubbleCardEditor() {
Pop-up trigger
@@ -1256,11 +1247,6 @@ export function createBubbleCardEditor() {
show_arrow: false
} : null
].filter(Boolean);
- } else {
- // Remove the previously added temperature sub-button if it exists when the editor is opened
- this._config.sub_button = this._config.sub_button.filter(button =>
- !(button.attribute === 'temperature' && button.icon === 'mdi:thermometer')
- );
}
this.climateSubButtonsAdded = true;
@@ -1463,7 +1449,7 @@ export function createBubbleCardEditor() {
- ${this.makeDropdown("Optional - Entity to open the pop-up based on its state", "trigger_entity", allEntitiesList)}
-
-
- 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._conditionChanged(ev)}
+ >
+
+
+ The pop-up will be opened when ALL conditions are fulfilled. 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._conditionChanged(index ,ev,'sub_button')}
+ @value-changed=${(ev) => this._conditionChanged(ev, index, 'sub_button')}
>
+
+ The sub-button will be shown when ALL conditions are fulfilled. If no conditions are set, the sub-button will always be shown.
+
@@ -2145,19 +2131,30 @@ export function createBubbleCardEditor() {
this.requestUpdate();
}
- _conditionChanged(index, ev, array) {
+ _conditionChanged(ev, index, array) {
ev.stopPropagation();
- this._config[array] = this._config[array] || [];
- let arrayCopy = [...this._config[array]];
- arrayCopy[index] = arrayCopy[index] || {};
- const conditions = ev.detail.value;
- arrayCopy[index] = { ...arrayCopy[index],
- visibility: conditions };
- this._config[array] = arrayCopy;
+
+ if (array) {
+ this._config[array] = this._config[array] || [];
+ let arrayCopy = [...this._config[array]];
+ arrayCopy[index] = arrayCopy[index] || {};
+ const conditions = ev.detail.value;
+ arrayCopy[index] = {
+ ...arrayCopy[index],
+ visibility: conditions
+ };
+ this._config[array] = arrayCopy;
+ } else if (this._config.card_type === 'pop-up') {
+ const conditions = ev.detail.value;
+ this._config = {
+ ...this._config,
+ trigger: conditions
+ };
+ }
+
fireEvent(this, "config-changed", { config: this._config });
this.requestUpdate();
}
-
static get styles() {
return css`
@@ -2272,6 +2269,10 @@ export function createBubbleCardEditor() {
padding: 0;
margin: 0 8px;
}
+
+ ha-card-conditions-editor {
+ margin-top: -12px;
+ }
`;
}
}
diff --git a/src/tools/global-changes.ts b/src/tools/global-changes.ts
index 95f841c..6719c26 100644
--- a/src/tools/global-changes.ts
+++ b/src/tools/global-changes.ts
@@ -15,7 +15,7 @@ import {
getIconColor,
isColorLight
} from './utils.ts';
-import {checkConditionsMet, validateConditionalConfig, ensureArray} from './validate-condition.ts';
+import { checkConditionsMet, validateConditionalConfig, ensureArray } from './validate-condition.ts';
export function changeState(context) {
const state = context._hass.states[context.config.entity];
@@ -179,6 +179,12 @@ export function changeSubButtonState(context, container = context.content, appen
const attribute = getAttribute(context, attributeType, entity);
const isOn = isStateOn(context, entity);
+ if (attributeType === 'fan_modes' && attribute == null) {
+ const subButtonElement = context.elements[index] || createElement('div', 'bubble-sub-button bubble-sub-button-' + index);
+ subButtonElement.classList.add('hidden');
+ return;
+ }
+
const showName = subButton.show_name ?? false;
const showState = subButton.show_state ?? false;
const showAttribute = subButton.show_attribute ?? false;
diff --git a/src/tools/utils.ts b/src/tools/utils.ts
index 09cbfd7..08b0a80 100644
--- a/src/tools/utils.ts
+++ b/src/tools/utils.ts
@@ -127,14 +127,6 @@ export function getIcon(context, entity = context.config.entity, icon = context.
return isOff ? "mdi:door-closed" : "mdi:door-open";
case "garage_door":
return isOff ? "mdi:garage" : "mdi:garage-open";
- case "power":
- return isOff ? "mdi:power-plug-off" : "mdi:power-plug";
- case "tamper":
- return isOff ? "mdi:check-circle" : "mdi:alert-circle";
- case "safety":
- return isOff ? "mdi:check-circle" : "mdi:alert-circle";
- case "smoke":
- return isOff ? "mdi:check-circle" : "mdi:smoke";
case "heat":
return isOff ? "mdi:thermometer" : "mdi:fire";
case "light":
@@ -151,12 +143,20 @@ export function getIcon(context, entity = context.config.entity, icon = context.
return isOff ? "mdi:square" : "mdi:square-outline";
case "plug":
return isOff ? "mdi:power-plug-off" : "mdi:power-plug";
+ case "power":
+ return isOff ? "mdi:power-plug-off" : "mdi:power-plug";
case "presence":
return isOff ? "mdi:home-outline" : "mdi:home";
case "running":
return isOff ? "mdi:stop" : "mdi:play";
+ case "safety":
+ return isOff ? "mdi:check-circle" : "mdi:alert-circle";
+ case "smoke":
+ return isOff ? "mdi:check-circle" : "mdi:smoke";
case "sound":
return isOff ? "mdi:music-note-off" : "mdi:music-note";
+ case "tamper":
+ return isOff ? "mdi:check-circle" : "mdi:alert-circle";
case "update":
return isOff ? "mdi:package" : "mdi:package-up";
case "vibration":
@@ -393,17 +393,33 @@ export function isColorLight(cssVariable) {
}
export function getIconColor(context, entity = context.config.entity, brightness = 1) {
+ const cardType = context.config.card_type;
const defaultColor = `var(--bubble-accent-color, var(--accent-color))`;
const entityRgbColor = getAttribute(context, "rgb_color", entity);
const isThemeLight = isColorLight('var(--bubble-button-icon-background-color, var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--card-background-color, var(--ha-card-background)))))');
brightness = isThemeLight ? brightness - 0.2 : brightness;
if (!entity) return defaultColor;
- if (entity.startsWith("light.") === false) return defaultColor;
- const defaultLightOnColor = isThemeLight ? [200, 200, 195] : [225, 225, 222];
- const defaultLightOffColor = isThemeLight ? [200, 180, 180] : [255, 255, 255];
- const defaultLightColor = isStateOn(context) ? defaultLightOnColor : defaultLightOffColor;
+ if (isEntityType(context, "light") && entityRgbColor) {
+ if (cardType === 'button') {
+ context.card.classList.add('is-light');
+ } else if (cardType === 'pop-up') {
+ context.elements.headerContainer.classList.add('is-light');
+ }
+ } else {
+ if (cardType === 'button') {
+ context.card.classList.remove('is-light');
+ } else if (cardType === 'pop-up') {
+ context.elements.headerContainer.classList.remove('is-light');
+ }
+ }
+
+ if (entity.startsWith("light.") === false || !entityRgbColor) return defaultColor;
+
+ //const defaultLightOnColor = [225, 225, 210];
+ //const defaultLightOffColor = [255, 255, 255];
+ const defaultLightColor = [225, 225, 210]; //isStateOn(context) ? defaultLightOnColor : defaultLightOffColor;
if (!entityRgbColor) {
const adjustedDefaultLightColor = defaultLightColor.map(channel => Math.min(255, channel * brightness));
@@ -412,26 +428,32 @@ export function getIconColor(context, entity = context.config.entity, brightness
const adjustedColor = entityRgbColor.map(channel => Math.min(255, channel * brightness));
return isColorCloseToWhite(entityRgbColor) ?
- `var(--bubble-light-color, rgba(${defaultLightOnColor.map(channel => Math.min(255, channel * brightness)).join(', ')}))` :
+ `var(--bubble-light-color, rgba(${defaultLightColor.map(channel => Math.min(255, channel * brightness)).join(', ')}))` :
`var(--bubble-light-color, rgba(${adjustedColor.join(', ')}))`;
}
-export function getImage(context) {
+export function getImage(context, entity = context.config.entity) {
if (context.config.force_icon) return '';
- const entityImageLocal = getAttribute(context, "entity_picture_local");
- const entityImage = getAttribute(context, "entity_picture");
+ const stateObj = context._hass.states[entity];
- if (entityImageLocal) return entityImageLocal;
- if (entityImage) return entityImage;
+ const entityPicture =
+ stateObj.attributes.entity_picture_local ||
+ stateObj.attributes.entity_picture;
- return '';
+ if (!entityPicture) return '';
+
+ let imageUrl = context._hass.hassUrl(entityPicture);
+
+ return imageUrl;
}
export function getName(context) {
const configName = context.config.name;
const entityName = getAttribute(context, "friendly_name");
+ const templateName = context.name;
+ if (templateName) return templateName;
if (configName) return configName;
if (entityName) return entityName;
@@ -651,4 +673,4 @@ export function throttle(mainFunction, delay = 300) {
}, delay);
}
};
-}
+}
\ No newline at end of file
diff --git a/src/var/version.ts b/src/var/version.ts
index f7b73c6..ff1c057 100644
--- a/src/var/version.ts
+++ b/src/var/version.ts
@@ -1 +1 @@
-export let version = 'v2.3.0';
\ No newline at end of file
+export let version = 'v2.3.1';
\ No newline at end of file
- The sub-button will be shown when ALL conditions below are fulfilled. If no conditions are set, the sub-button will always be shown. -