homeassistant/www/community/button-card/button-card.js

540 lines
90 KiB
JavaScript
Raw Normal View History

function t(t,e,i,n){var r,s=arguments.length,a=s<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,n);else for(var o=t.length-1;o>=0;o--)(r=t[o])&&(a=(s<3?r(a):s>3?r(e,i,a):r(e,i))||a);return s>3&&a&&Object.defineProperty(e,i,a),a}const e="undefined"!=typeof window&&null!=window.customElements&&void 0!==window.customElements.polyfillWrapFlushCallback,i=(t,e,i=null)=>{for(;e!==i;){const i=e.nextSibling;t.removeChild(e),e=i}},n=`{{lit-${String(Math.random()).slice(2)}}}`,r=`\x3c!--${n}--\x3e`,s=new RegExp(`${n}|${r}`);class a{constructor(t,e){this.parts=[],this.element=e;const i=[],r=[],a=document.createTreeWalker(e.content,133,null,!1);let l=0,u=-1,d=0;const{strings:p,values:{length:f}}=t;for(;d<f;){const t=a.nextNode();if(null!==t){if(u++,1===t.nodeType){if(t.hasAttributes()){const e=t.attributes,{length:i}=e;let n=0;for(let t=0;t<i;t++)o(e[t].name,"$lit$")&&n++;for(;n-- >0;){const e=p[d],i=h.exec(e)[2],n=i.toLowerCase()+"$lit$",r=t.getAttribute(n);t.removeAttribute(n);const a=r.split(s);this.parts.push({type:"attribute",index:u,name:i,strings:a}),d+=a.length-1}}"TEMPLATE"===t.tagName&&(r.push(t),a.currentNode=t.content)}else if(3===t.nodeType){const e=t.data;if(e.indexOf(n)>=0){const n=t.parentNode,r=e.split(s),a=r.length-1;for(let e=0;e<a;e++){let i,s=r[e];if(""===s)i=c();else{const t=h.exec(s);null!==t&&o(t[2],"$lit$")&&(s=s.slice(0,t.index)+t[1]+t[2].slice(0,-"$lit$".length)+t[3]),i=document.createTextNode(s)}n.insertBefore(i,t),this.parts.push({type:"node",index:++u})}""===r[a]?(n.insertBefore(c(),t),i.push(t)):t.data=r[a],d+=a}}else if(8===t.nodeType)if(t.data===n){const e=t.parentNode;null!==t.previousSibling&&u!==l||(u++,e.insertBefore(c(),t)),l=u,this.parts.push({type:"node",index:u}),null===t.nextSibling?t.data="":(i.push(t),u--),d++}else{let e=-1;for(;-1!==(e=t.data.indexOf(n,e+1));)this.parts.push({type:"node",index:-1}),d++}}else a.currentNode=r.pop()}for(const n of i)n.parentNode.removeChild(n)}}const o=(t,e)=>{const i=t.length-e.length;return i>=0&&t.slice(i)===e},l=t=>-1!==t.index,c=()=>document.createComment(""),h=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function u(t,e){const{element:{content:i},parts:n}=t,r=document.createTreeWalker(i,133,null,!1);let s=p(n),a=n[s],o=-1,l=0;const c=[];let h=null;for(;r.nextNode();){o++;const t=r.currentNode;for(t.previousSibling===h&&(h=null),e.has(t)&&(c.push(t),null===h&&(h=t)),null!==h&&l++;void 0!==a&&a.index===o;)a.index=null!==h?-1:a.index-l,s=p(n,s),a=n[s]}c.forEach((t=>t.parentNode.removeChild(t)))}const d=t=>{let e=11===t.nodeType?0:1;const i=document.createTreeWalker(t,133,null,!1);for(;i.nextNode();)e++;return e},p=(t,e=-1)=>{for(let i=e+1;i<t.length;i++){const e=t[i];if(l(e))return i}return-1};const f=new WeakMap,g=t=>(...e)=>{const i=t(...e);return f.set(i,!0),i},m=t=>"function"==typeof t&&f.has(t),_={},b={};class y{constructor(t,e,i){this.__parts=[],this.template=t,this.processor=e,this.options=i}update(t){let e=0;for(const i of this.__parts)void 0!==i&&i.setValue(t[e]),e++;for(const i of this.__parts)void 0!==i&&i.commit()}_clone(){const t=e?this.template.element.content.cloneNode(!0):document.importNode(this.template.element.content,!0),i=[],n=this.template.parts,r=document.createTreeWalker(t,133,null,!1);let s,a=0,o=0,c=r.nextNode();for(;a<n.length;)if(s=n[a],l(s)){for(;o<s.index;)o++,"TEMPLATE"===c.nodeName&&(i.push(c),r.currentNode=c.content),null===(c=r.nextNode())&&(r.currentNode=i.pop(),c=r.nextNode());if("node"===s.type){const t=this.processor.handleTextExpression(this.options);t.insertAfterNode(c.previousSibling),this.__parts.push(t)}else this.__parts.push(...this.processor.handleAttributeExpressions(c,s.name,s.strings,this.options));a++}else this.__parts.push(void 0),a++;return e&&(document.adoptNode(t),customElements.upgrade(t)),t}}const v=window.trustedTypes&&trustedTypes.createPolicy("lit-html",{createHTML:t=>t}),w=` ${n} `;class S{constructor(t,e,i,n
:host {
position: relative;
display: block;
}
ha-card {
cursor: pointer;
overflow: hidden;
box-sizing: border-box;
position: relative;
display: flex;
justify-content: center;
align-items: center;
line-height: normal;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Opera and Firefox */
}
ha-card.disabled {
pointer-events: none;
cursor: default;
}
.tooltip .tooltiptext {
opacity: 0;
text-align: center;
padding: 4px;
border-radius: var(--ha-card-border-radius, 4px);
box-shadow: var(
--ha-card-box-shadow,
0px 2px 1px -1px rgba(0, 0, 0, 0.2),
0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12)
);
background: var(--ha-card-background, var(--card-background-color, white));
border: 1px solid var(--primary-text-color);
color: var(--primary-text-color);
position: absolute;
z-index: 9999;
}
.tooltip:hover span.tooltiptext {
opacity: 1;
transition-delay: 1.5s;
}
ha-icon {
display: inline-block;
margin: auto;
--mdc-icon-size: 100%;
--iron-icon-width: 100%;
--iron-icon-height: 100%;
}
ha-card.button-card-main {
padding: 4% 0px;
text-transform: none;
font-weight: 400;
font-size: 1.2rem;
align-items: center;
text-align: center;
letter-spacing: normal;
width: 100%;
}
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
#overlay {
align-items: flex-start;
justify-content: flex-end;
padding: 8px 7px;
opacity: 0.5;
/* DO NOT override items below */
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 50;
display: flex;
}
#lock {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
margin: unset;
width: 24px;
}
.invalid {
animation: blink 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 1s, opacity 1s linear;
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
[rotating] {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
#container {
display: grid;
width: 100%;
height: 100%;
text-align: center;
align-items: center;
}
#img-cell {
display: flex;
grid-area: i;
height: 100%;
width: 100%;
max-width: 100%;
max-height: 100%;
align-self: center;
justify-self: center;
overflow: hidden;
justify-content: center;
align-items: center;
position: relative;
}
ha-icon#icon {
height: 100%;
width: 100%;
max-height: 100%;
position: absolute;
}
img#icon {
display: block;
height: auto;
width: 100%;
position: absolute;
}
#name {
grid-area: n;
max-width: 100%;
align-self: center;
justify-self: center;
/* margin: auto; */
}
#state {
grid-area: s;
max-width: 100%;
align-self: center;
justify-self: center;
/* margin: auto; */
}
#label {
grid-area: l;
max-width: 100%;
align-self: center;
justify-self: center;
}
#container.vertical {
grid-template-areas: 'i' 'n' 's' 'l';
grid-template-columns: 1fr;
grid-template-rows: 1fr min-content min-content min-content;
}
/* Vertical No Icon */
#container.vertical.no-icon {
grid-template-areas: 'n' 's' 'l';
grid-template-columns: 1fr;
grid-template-rows: 1fr min-content 1fr;
}
#container.vertical.no-icon #state {
align-self: center;
}
#container.vertical.no-icon #name {
align-self: end;
}
#container.vertical.no-icon #label {
align-self: start;
}
/* Vertical No Icon No Name */
#container.vertical.no-icon.no-name {
grid-template-areas: 's' 'l';
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
#container.vertical.no-icon.no-name #state {
align-self: end;
}
#container.vertical.no-icon.no-name #label {
align-self: start;
}
/* Vertical No Icon No State */
#container.vertical.no-icon.no-state {
grid-template-areas: 'n' 'l';
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
#container.vertical.no-icon.no-state #name {
align-self: end;
}
#container.vertical.no-icon.no-state #label {
align-self: start;
}
/* Vertical No Icon No Label */
#container.vertical.no-icon.no-label {
grid-template-areas: 'n' 's';
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
#container.vertical.no-icon.no-label #name {
align-self: end;
}
#container.vertical.no-icon.no-label #state {
align-self: start;
}
/* Vertical No Icon No Label No Name */
#container.vertical.no-icon.no-label.no-name {
grid-template-areas: 's';
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
#container.vertical.no-icon.no-label.no-name #state {
align-self: center;
}
/* Vertical No Icon No Label No State */
#container.vertical.no-icon.no-label.no-state {
grid-template-areas: 'n';
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
#container.vertical.no-icon.no-label.no-state #name {
align-self: center;
}
/* Vertical No Icon No Name No State */
#container.vertical.no-icon.no-name.no-state {
grid-template-areas: 'l';
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
#container.vertical.no-icon.no-name.no-state #label {
align-self: center;
}
#container.icon_name_state {
grid-template-areas: 'i n' 'l l';
grid-template-columns: 40% 1fr;
grid-template-rows: 1fr min-content;
}
#container.icon_name {
grid-template-areas: 'i n' 's s' 'l l';
grid-template-columns: 40% 1fr;
grid-template-rows: 1fr min-content min-content;
}
#container.icon_state {
grid-template-areas: 'i s' 'n n' 'l l';
grid-template-columns: 40% 1fr;
grid-template-rows: 1fr min-content min-content;
}
#container.name_state {
grid-template-areas: 'i' 'n' 'l';
grid-template-columns: 1fr;
grid-template-rows: 1fr min-content min-content;
}
#container.name_state.no-icon {
grid-template-areas: 'n' 'l';
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
#container.name_state.no-icon #name {
align-self: end;
}
#container.name_state.no-icon #label {
align-self: start;
}
#container.name_state.no-icon.no-label {
grid-template-areas: 'n';
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
#container.name_state.no-icon.no-label #name {
align-self: center;
}
/* icon_name_state2nd default */
#container.icon_name_state2nd {
grid-template-areas: 'i n' 'i s' 'i l';
grid-template-columns: 40% 1fr;
grid-template-rows: 1fr min-content 1fr;
}
#container.icon_name_state2nd #name {
align-self: end;
}
#container.icon_name_state2nd #state {
align-self: center;
}
#container.icon_name_state2nd #label {
align-self: start;
}
/* icon_name_state2nd No Label */
#container.icon_name_state2nd.no-label {
grid-template-areas: 'i n' 'i s';
grid-template-columns: 40% 1fr;
grid-template-rows: 1fr 1fr;
}
#container.icon_name_state2nd #name {
align-self: end;
}
#container.icon_name_state2nd #state {
align-self: start;
}
/* icon_state_name2nd Default */
#container.icon_state_name2nd {
grid-template-areas: 'i s' 'i n' 'i l';
grid-template-columns: 40% 1fr;
grid-template-rows: 1fr min-content 1fr;
}
#container.icon_state_name2nd #state {
align-self: end;
}
#container.icon_state_name2nd #name {
align-self: center;
}
#container.icon_state_name2nd #label {
align-self: start;
}
/* icon_state_name2nd No Label */
#container.icon_state_name2nd.no-label {
grid-template-areas: 'i s' 'i n';
grid-template-columns: 40% 1fr;
grid-template-rows: 1fr 1fr;
}
#container.icon_state_name2nd #state {
align-self: end;
}
#container.icon_state_name2nd #name {
align-self: start;
}
#container.icon_label {
grid-template-areas: 'i l' 'n n' 's s';
grid-template-columns: 40% 1fr;
grid-template-rows: 1fr min-content min-content;
}
[style*='--aspect-ratio'] > :first-child {
width: 100%;
}
[style*='--aspect-ratio'] > img {
height: auto;
}
@supports (--custom: property) {
[style*='--aspect-ratio'] {
position: relative;
}
[style*='--aspect-ratio']::before {
content: '';
display: block;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
[style*='--aspect-ratio'] > :first-child {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}
`;const Ae=(t,e,i,n)=>{if(!((t,e,i)=>{const[n,r]=t.split(".",2);return Number(n)>e||Number(n)===e&&Number(r)>=i})(t.config.version,0,109))return function(t,e){let i;const n=ke(e.entity_id);return"binary_sensor"===n?(e.attributes.device_class&&(i=t(`state.${n}.${e.attributes.device_class}.${e.state}`)),i||(i=t(`state.${n}.default.${e.state}`))):i=e.attributes.unit_of_measurement&&!["unknown","unavailable"].includes(e.state)?e.state:"zwave"===n?["initializing","dead"].includes(e.state)?t("state.zwave.query_stage."+e.state,"query_stage",e.attributes.query_stage):t("state.zwave.default."+e.state):t(`state.${n}.${e.state}`),i||(i=t("state.default."+e.state)||t(`component.${n}.state.${e.state}`)||e.state),i}(e,i);if("unknown"===i.state||"unavailable"===i.state)return e("state.default."+i.state);if(i.attributes.unit_of_measurement)return`${i.state} ${i.attributes.unit_of_measurement}`;const r=ke(i.entity_id);if("input_datetime"===r){let t;if(!i.attributes.has_time)return t=new Date(i.attributes.year,i.attributes.month-1,i.attributes.day),jt(t,n);if(!i.attributes.has_date){const e=new Date;return t=new Date(e.getFullYear(),e.getMonth(),e.getDay(),i.attributes.hour,i.attributes.minute),Ht(t,n)}return t=new Date(i.attributes.year,i.attributes.month-1,i.attributes.day,i.attributes.hour,i.attributes.minute),$t(t,n)}return i.attributes.device_class&&e(`component.${r}.state.${i.attributes.device_class}.${i.state}`)||e(`component.${r}.state._.${i.state}`)||i.state};var Ne=Function.prototype.toString,Pe=Object.create,je=Object.defineProperty,$e=Object.getOwnPropertyDescriptor,He=Object.getOwnPropertyNames,Re=Object.getOwnPropertySymbols,Ve=Object.getPrototypeOf,De=Object.prototype,Le=De.hasOwnProperty,Fe=De.propertyIsEnumerable,Ie="function"==typeof Re,ze="function"==typeof WeakMap,Ue=function(t,e){if(!t.constructor)return Pe(null);var i=t.constructor,n=t.__proto__||Ve(t);if(i===e.Object)return n===e.Object.prototype?{}:Pe(n);if(~Ne.call(i).indexOf("[native code]"))try{return new i}catch(r){}return Pe(n)},qe=function(t,e,i,n){var r=Ue(t,e);for(var s in n.set(t,r),t)Le.call(t,s)&&(r[s]=i(t[s],n));if(Ie){var a=Re(t),o=a.length;if(o)for(var l=0,c=void 0;l<o;l++)c=a[l],Fe.call(t,c)&&(r[c]=i(t[c],n))}return r},Ye=function(t,e,i,n){var r=Ue(t,e);n.set(t,r);var s=Ie?He(t).concat(Re(t)):He(t),a=s.length;if(a)for(var o=0,l=void 0,c=void 0;o<a;o++)if("callee"!==(l=s[o])&&"caller"!==l)if(c=$e(t,l)){c.get||c.set||(c.value=i(t[l],n));try{je(r,l,c)}catch(h){r[l]=c.value}}else r[l]=i(t[l],n);return r},Be=Array.isArray,We="undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:void(console&&console.error&&console.error('Unable to locate global object, returning "this".'));function Ge(t,e){var i=!(!e||!e.isStrict),n=e&&e.realm||We,r=i?Ye:qe,s=function(t,e){if(!t||"object"!=typeof t)return t;if(e.has(t))return e.get(t);var a,o,l,c=t.constructor;if(c===n.Object)return r(t,n,s,e);if(Be(t)){if(i)return Ye(t,n,s,e);var h=t.length;a=new c,e.set(t,a);for(var u=0;u<h;u++)a[u]=s(t[u],e);return a}if(t instanceof n.Date)return new c(t.getTime());if(t instanceof n.RegExp)return(a=new c(t.source,t.flags||(l="",(o=t).global&&(l+="g"),o.ignoreCase&&(l+="i"),o.multiline&&(l+="m"),o.unicode&&(l+="u"),o.sticky&&(l+="y"),l))).lastIndex=t.lastIndex,a;if(n.Map&&t instanceof n.Map)return a=new c,e.set(t,a),t.forEach((function(t,i){a.set(i,s(t,e))})),a;if(n.Set&&t instanceof n.Set)return a=new c,e.set(t,a),t.forEach((function(t){a.add(s(t,e))})),a;if(n.Blob&&t instanceof n.Blob)return a=new Blob([t],{type:t.type});if(n.Buffer&&n.Buffer.isBuffer(t))return a=n.Buffer.allocUnsafe?n.Buffer.allocUnsafe(t.length):new c(t.length),e.set(t,a),t.copy(a),a;if(n.ArrayBuffer){if(n.ArrayBuffer.isView(t))return a=new c(t.buffer.slice(0)),e.set(t,a),a;if(t instanceof n.ArrayBuffer)return a=t.slice(0),e.set(t,a),a}return"function"==typeof t.then||t instanceof Error||n.WeakMap&&t instanceof n.WeakMap||n.WeakSet&&t instanceof n.WeakSet?t:r(t,n,s,e)};return s(t,function(){if(ze)return new WeakMap;var t=Pe({has:function(e){return!!~t._keys.indexOf(e)},se
<ha-relative-time
id="label"
class="ellipsis"
.hass="${this._hass}"
.datetime="${t.last_changed}"
style=${at(e)}
></ha-relative-time>
`:void 0}_buildLabel(t,e){if(!this._config.show_label)return;let i;return i=(null==e?void 0:e.label)?e.label:this._config.label,this._getTemplateOrValue(t,i)}_buildCustomFields(t,e){let i=D``;const n={},r={};return this._config.custom_fields&&Object.keys(this._config.custom_fields).forEach((e=>{const i=this._config.custom_fields[e];i.card?r[e]=this._objectEvalTemplate(t,i.card):n[e]=this._getTemplateOrValue(t,i)})),(null==e?void 0:e.custom_fields)&&Object.keys(e.custom_fields).forEach((i=>{const s=e.custom_fields[i];s.card?r[i]=this._objectEvalTemplate(t,s.card):n[i]=this._getTemplateOrValue(t,s)})),Object.keys(n).forEach((r=>{if(null!=n[r]){const s=Object.assign(Object.assign({},this._buildCustomStyleGeneric(t,e,r)),{"grid-area":r});i=D`
${i}
<div id=${r} class="ellipsis" style=${at(s)}>
${n[r]&&"html"===n[r].type?n[r]:lt(n[r])}
</div>
`}})),Object.keys(r).forEach((n=>{if(null!=r[n]){const s=Object.assign(Object.assign({},this._buildCustomStyleGeneric(t,e,n)),{"grid-area":n});let a;Kt(this._cardsConfig[n],r[n])?a=this._cards[n]:(a=this._createCard(r[n]),this._cards[n]=a,this._cardsConfig[n]=Ge(r[n])),a.hass=this._hass,i=D`
${i}
<div
id=${n}
class="ellipsis"
@click=${this._stopPropagation}
@touchstart=${this._stopPropagation}
style=${at(s)}
>
${a}
</div>
`}})),i}_isClickable(t){let e=!0;const i=this._getTemplateOrValue(t,this._config.tap_action.action),n=this._getTemplateOrValue(t,this._config.hold_action.action),r=this._getTemplateOrValue(t,this._config.double_tap_action.action);return e="none"!=i||"none"!=n||"none"!=r,e}_rotate(t){return!!(null==t?void 0:t.spin)}_blankCardColoredHtml(t){const e=Object.assign({background:"none","box-shadow":"none"},t);return D`
<ha-card class="disabled" style=${at(e)}>
<div></div>
</ha-card>
`}_cardHtml(){var t,e;const i=this._getMatchingConfigState(this._stateObj),n=this._buildCssColorAttribute(this._stateObj,i);let r=n,s={},a={};const o={},l=this._buildStyleGeneric(this._stateObj,i,"lock"),c=this._buildStyleGeneric(this._stateObj,i,"card"),h=this._buildStyleGeneric(this._stateObj,i,"tooltip"),u={"button-card-main":!0,tooltip:!!(null===(t=this._config)||void 0===t?void 0:t.tooltip),disabled:!this._isClickable(this._stateObj)};switch(c.width&&(this.style.setProperty("flex","0 0 auto"),this.style.setProperty("max-width","fit-content")),this._config.color_type){case"blank-card":return this._blankCardColoredHtml(c);case"card":case"label-card":{const t=function(t){const e=new Se(Oe(t));return e.isValid&&e.getLuminance()>.5?"rgb(62, 62, 62)":"rgb(234, 234, 234)"}(n);s.color=t,a.color=t,s["background-color"]=n,s=Object.assign(Object.assign({},s),c),r="inherit";break}default:s=c}this._config.aspect_ratio?(o["--aspect-ratio"]=this._config.aspect_ratio,s.position="absolute"):o.display="inline",this.style.setProperty("--button-card-light-color",this._getColorForLightEntity(this._stateObj,!0)),this.style.setProperty("--button-card-light-color-no-temperature",this._getColorForLightEntity(this._stateObj,!1)),a=Object.assign(Object.assign({},a),l);const d=this._config.extra_styles?D`
<style>
${this._getTemplateOrValue(this._stateObj,this._config.extra_styles)}
</style>
`:D``;return D`
${d}
<div id="aspect-ratio" style=${at(o)}>
<ha-card
id="card"
class=${ut(u)}
style=${at(s)}
@action=${this._handleAction}
@focus="${this.handleRippleFocus}"
@blur="${this.handleRippleBlur}"
@mousedown="${this.handleRippleActivate}"
@mouseup="${this.handleRippleDeactivate}"
@touchstart="${this.handleRippleActivate}"
@touchend="${this.handleRippleDeactivate}"
@touchcancel="${this.handleRippleDeactivate}"
.actionHandler=${ie({hasDoubleClick:"none"!==this._config.double_tap_action.action,hasHold:"none"!==this._config.hold_action.action,repeat:this._config.hold_action.repeat})}
.config="${this._config}"
>
${this._buttonContent(this._stateObj,i,r)}
${(null===(e=this._config)||void 0===e?void 0:e.tooltip)?D`
<span class="tooltiptext" style=${at(h)}
>${this._getTemplateOrValue(this._stateObj,this._config.tooltip)}</span
>
`:""}
<mwc-ripple id="ripple"></mwc-ripple>
</ha-card>
</div>
${this._getLock(a)}
`}_getLock(t){return this._config.lock&&this._getTemplateOrValue(this._stateObj,this._config.lock.enabled)?D`
<div
id="overlay"
style=${at(t)}
@action=${this._handleUnlockType}
.actionHandler=${ie({hasDoubleClick:"double_tap"===this._config.lock.unlock,hasHold:"hold"===this._config.lock.unlock})}
.config="${this._config}"
>
<ha-icon id="lock" icon="mdi:lock-outline"></ha-icon>
</div>
`:D``}_buttonContent(t,e,i){const n=this._buildName(t,e),r=this._config.show_state&&this._config.state_display?this._getTemplateOrValue(t,this._config.state_display):void 0,s=r||this._buildStateString(t),a=function(t,e){if(!t&&!e)return;let i;return i=e?t?`${t}: ${e}`:e:t,i}(n,s);switch(this._config.layout){case"icon_name_state":case"name_state":return this._gridHtml(t,e,this._config.layout,i,a,void 0);default:return this._gridHtml(t,e,this._config.layout,i,n,s)}}_gridHtml(t,e,i,n,r,s){const a=this._getIconHtml(t,e,n),o=[i],l=this._buildLabel(t,e),c=this._buildStyleGeneric(t,e,"name"),h=this._buildStyleGeneric(t,e,"state"),u=this._buildStyleGeneric(t,e,"label"),d=this._buildLastChanged(t,u),p=this._buildStyleGeneric(t,e,"grid");return a||o.push("no-icon"),r||o.push("no-name"),s||o.push("no-state"),l||d||o.push("no-label"),D`
<div id="container" class=${o.join(" ")} style=${at(p)}>
${a||""}
${r?D`
<div id="name" class="ellipsis" style=${at(c)}>
${"html"===r.type?r:lt(r)}
</div>
`:""}
${s?D`
<div id="state" class="ellipsis" style=${at(h)}>
${"html"===s.type?s:lt(s)}
</div>
`:""}
${l&&!d?D`
<div id="label" class="ellipsis" style=${at(u)}>
${"html"===l.type?l:lt(l)}
</div>
`:""}
${d||""} ${this._buildCustomFields(t,e)}
</div>
`}_getIconHtml(t,e,i){const n=this._buildIcon(t,e),r=this._buildEntityPicture(t,e),s=this._buildStyleGeneric(t,e,"entity_picture"),a=this._buildStyleGeneric(t,e,"icon"),o=this._buildStyleGeneric(t,e,"img_cell"),l=this._buildStyleGeneric(t,e,"card"),c=Object.assign({color:i,width:this._config.size,position:this._config.aspect_ratio||l.height?"absolute":"relative"},a),h=Object.assign(Object.assign({},c),s),u=this._buildLiveStream(h);return n||r?D`
<div id="img-cell" style=${at(o)}>
${!n||r||u?"":D`
<ha-icon
style=${at(c)}
.icon="${n}"
id="icon"
?rotating=${this._rotate(e)}
></ha-icon>
`}
${u||""}
${r&&!u?D`
<img
src="${r}"
style=${at(h)}
id="icon"
?rotating=${this._rotate(e)}
/>
`:""}
</div>
`:void 0}_buildLiveStream(t){return this._config.show_live_stream&&this._config.entity&&"camera"===ke(this._config.entity)?D`
<hui-image
.hass=${this._hass}
.cameraImage=${this._config.entity}
.entity=${this._config.entity}
cameraView="live"
style=${at(t)}
></hui-image>
`:void 0}_configFromLLTemplates(t,e){const i=e.template;if(!i)return e;let n,r={};const s=i&&Array.isArray(i)?i:[i];return null==s||s.forEach((e=>{var i;if(!(null===(i=t.config.button_card_templates)||void 0===i?void 0:i[e]))throw new Error(`Button-card template '${e}' is missing!`);const s=this._configFromLLTemplates(t,t.config.button_card_templates[e]);r=Me(r,s),n=Ce(n,s.state)})),r=Me(r,e),r.state=Ce(n,e.state),r}setConfig(t){if(!t)throw new Error("Invalid configuration");this._cards={},this._cardsConfig={};const e=function(){var t=document.querySelector("home-assistant");if(t=(t=(t=(t=(t=(t=(t=(t=t&&t.shadowRoot)&&t.querySelector("home-assistant-main"))&&t.shadowRoot)&&t.querySelector("app-drawer-layout partial-panel-resolver"))&&t.shadowRoot||t)&&t.querySelector("ha-panel-lovelace"))&&t.shadowRoot)&&t.querySelector("hui-root")){var e=t.lovelace;return e.current_view=t.___curView,e}return null}()||function(){let t=document.querySelector("hc-main");if(t=t&&t.shadowRoot,t=t&&t.querySelector("hc-lovelace"),t=t&&t.shadowRoot,t=t&&(t.querySelector("hui-view")||t.querySelector("hui-panel-view")),t){const e=t.lovelace;return e.current_view=t.___curView,e}return null}();let i=Ge(t);i=this._configFromLLTemplates(e,i),this._config=Object.assign(Object.assign({type:"custom:button-card",group_expand:!1,hold_action:{action:"none"},double_tap_action:{action:"none"},layout:"vertical",size:"40%",color_type:"icon",show_name:!0,show_state:!1,show_icon:!0,show_units:!0,show_label:!1,show_entity_picture:!1,show_live_stream:!1,card_size:3},i),{default_color:"DUMMY",color_off:"DUMMY",color_on:"DUMMY",lock:Object.assign({enabled:!1,duration:5,unlock:"tap"},i.lock)}),this._config.entity&&Ft.has(ke(this._config.entity))?this._config=Object.assign({tap_action:{action:"toggle"}},this._config):this._config=Object.assign({tap_action:{action:"more-info"}},this._config),this._config.default_color="var(--primary-text-color)","icon"!==this._config.color_type?this._config.color_off="var(--card-background-color)":this._config.color_off="var(--paper-item-icon-color)",this._config.color_on="var(--paper-item-icon-active-color)";const n=JSON.stringify(this._config);if(this._entities=[],Array.isArray(this._config.triggers_update)?this._entities=[...this._config.triggers_update]:"string"==typeof this._config.triggers_update&&"all"!==this._config.triggers_update&&this._entities.push(this._config.triggers_update),"all"!==this._config.triggers_update){const t=new RegExp(/states\[\s*('|\\")([a-zA-Z0-9_]+\.[a-zA-Z0-9_]+)\1\s*\]/,"gm"),e=new RegExp(/states\[\s*('|\\")([a-zA-Z0-9_]+\.[a-zA-Z0-9_]+)\1\s*\]/,"m"),i=n.match(t);null==i||i.forEach((t=>{const i=t.match(e);i&&!this._entities.includes(i[2])&&this._entities.push(i[2])}))}this._config.entity&&!this._entities.includes(this._config.entity)&&this._entities.push(this._config.entity),this._expandTriggerGroups();const r=new RegExp("\\[\\[\\[.*\\]\\]\\]","m");this._hasTemplate=!("all"!==this._config.triggers_update||!n.match(r)),this._initial_setup_complete||this._initConnected()}_loopGroup(t){t&&t.forEach((t=>{var e,i;(null===(e=this._hass)||void 0===e?void 0:e.states[t])&&("group"===ke(t)&&(null===(i=this._hass.states[t].attributes)||void 0===i?void 0:i.entity_id)?this._loopGroup(this._hass.states[t].attributes.entity_id):this._entities.includes(t)||this._entities.push(t))}))}_expandTriggerGroups(){var t;this._hass&&(null===(t=this._config)||void 0===t?void 0:t.group_expand)&&this._entities&&this._entities.forEach((t=>{var e,i;"group"===ke(t)&&this._loopGroup(null===(i=null===(e=this._hass)||void 0===e?void 0:e.states[t].attributes)||void 0===i?void 0:i.entity_id)}))}getCardSize(){var t;return(null===(t=this._config)||void 0===t?void 0:t.card_size)||3}_evalActions(t,e){const i=Ge(t),n=t=>t?(Object.keys(t).forEach((e=>{"object"==typeof t[e]?t[e]=n(t[e]):t[e]=this._getTemplateOrValue(this._stateObj,t[e])})),t):t;return i[e]=n(i[e]),!i[e].confirmation&&i.confirmation&&(i[e].confirmation=n(i.confirmation)),i}handleRippleActivate(t){this._ripple.then((e=>e&&e.startPress&&this._rippleHandlers.startPress(t)))}ha