From 2dc78349a39aef088da79af16ea790cee6cf18f9 Mon Sep 17 00:00:00 2001 From: s1rd4v3 Date: Wed, 13 Nov 2024 11:10:07 +0100 Subject: [PATCH] densed layout optimization (#4) --- dist/advanced-tile-card.js | 2 +- src/Card/styles.scss | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/dist/advanced-tile-card.js b/dist/advanced-tile-card.js index 9b9aede..0257a12 100644 --- a/dist/advanced-tile-card.js +++ b/dist/advanced-tile-card.js @@ -104,7 +104,7 @@ const Ht=1,Lt=t=>(...e)=>({_$litDirective$:t,values:e});let Mt=class{constructor - `}_handleTap(t){this.toggleClickClass(),b("light"),$(this,this.hass,this.config,t.detail.action)}_handleIconTouchMove(){this.isDragging=!0}_handleIconTap(t){if(this.isDragging)return void(this.isDragging=!1);t.preventDefault(),t.stopPropagation(),this.toggleClickClass(),b("success");const e={entity:this.config.entity,tap_action:this.config.icon_tap_action};$(this,this.hass,e,"tap")}toggleClickClass(){this.isClicked=!0,setTimeout((()=>{this.isClicked=!1}),500)}_showWarning(t){return ot` ${t} `}static get styles(){return z('* {\n box-sizing: border-box;\n}\n\nha-card {\n /*** \n * Variables START\n ***/\n --atc-default-card-background: var(--ha-card-background, var(--card-background-color, white));\n --atc-default-card-border-radius: var(--ha-card-border-radius, 12px);\n --atc-default-icon-color: var(--state-inactive-color);\n --atc-default-icon-color-active: var(--primary-color);\n --atc-default-icon-background: var(--state-inactive-color);\n --atc-default-icon-background-active: var(--primary-color);\n --atc-default-icon-background-opacity: 0.2;\n --atc-default-text-color: var(--primary-text-color);\n --atc-default-text-color-active: var(--primary-text-color-active);\n --atc-default-text-color-unavailble: var(--state-inactive-color);\n --atc-card-background: var(--atc-theme-card-background, var(--atc-default-card-background));\n --atc-card-background-active: var(--atc-theme-card-background-active, var(--atc-default-card-background));\n --atc-card-background-unavailable: var(--atc-theme-card-background-unavailable, transparent);\n --atc-card-background-mask: linear-gradient(0deg, transparent 50px, black 100%);\n --atc-card-spacing: 12px;\n --atc-card-border-radius: var(--atc-theme-card-border-radius, var(--atc-default-card-border-radius));\n --atc-card-transition: 180ms ease-in-out 0s;\n --atc-icon-size: var(--atc-theme-icon-size, 40px);\n --atc-icon-color: var(--atc-theme-icon-color, var(--atc-default-icon-color));\n --atc-icon-color-active: var(--atc-theme-icon-color-active, var(--atc-default-icon-color-active));\n --atc-icon-color-unavailable: var(--state-inactive-color);\n --atc-icon-background: var(--atc-theme-icon-background, var(--atc-default-icon-background));\n --atc-icon-background-active: var(--atc-theme-icon-background-active, var(--atc-default-icon-background-active));\n --atc-icon-background-unavailable: var(--atc-theme-icon-background-unavailable,var(--atc-default-card-background));\n --atc-icon-background-opacity: var(--atc-theme-icon-background-opacity, var(--atc-default-icon-background-opacity));\n --atc-name-font-size: var(--atc-theme-name-font-size, 16px);\n --atc-name-font-weight: var(--atc-theme-name-font-weight, 500);\n --atc-state-font-size: var(--atc-theme-state-font-size, 14px);\n --atc-state-font-weight: var(--atc-theme-state-font-weight, 400);\n --atc-text-color: var(--atc-theme-text-color, var(--atc-default-text-color));\n --atc-text-color-active: var(--atc-theme-text-color-active, var(--atc-default-text-color-active));\n --atc-text-color-unavailable: var(--atc-theme-text-color-unavailable, var(--atc-default-text-color-unavailble));\n /*** \n * Variables END\n ***/\n width: 100%;\n height: 100%;\n background: var(--atc-card-background);\n background-size: cover;\n background-position: center;\n transition: background-color var(--atc-card-transition);\n border-radius: var(--atc-card-border-radius);\n cursor: pointer;\n /*** \n * Elements\n ***/\n /*** \n * Densed Layout\n ***/\n /*** \n * Active State \n ***/\n /*** \n * Available State \n ***/\n /*** \n * Clicked State \n ***/\n}\nha-card .background-image {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n mask-image: var(--atc-card-background-mask);\n -webkit-mask-image: var(--atc-card-background-mask);\n border-radius: var(--atc-card-border-radius);\n}\nha-card .background-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\nha-card .container {\n display: grid;\n grid-template-columns: 50% 50%;\n grid-template-rows: min-content auto min-content;\n grid-template-areas: "icon-area ." ". ." "name-area name-area";\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\nha-card .container .icon-area {\n grid-area: icon-area;\n display: flex;\n align-items: center;\n padding-top: var(--atc-card-spacing);\n padding-bottom: calc(var(--atc-card-spacing) / 2);\n padding-right: var(--atc-card-spacing);\n padding-left: var(--atc-card-spacing);\n}\nha-card .container .icon-area .icon-wrapper {\n padding: 8px;\n width: var(--atc-icon-size);\n height: var(--atc-icon-size);\n aspect-ratio: 1;\n position: relative;\n display: flex;\n align-items: center;\n border: var(--atc-icon-border);\n justify-content: center;\n}\nha-card .container .icon-area .icon-wrapper:before {\n content: "";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: 100%;\n background: var(--atc-icon-background);\n background-size: cover;\n transition: background-color var(--atc-card-transition);\n opacity: var(--atc-icon-background-opacity);\n}\nha-card .container .icon-area .icon-wrapper .icon {\n transition: color var(--atc-card-transition);\n color: var(--atc-icon-color);\n}\nha-card .container .name-area {\n grid-area: name-area;\n padding-bottom: var(--atc-card-spacing);\n padding-top: calc(var(--atc-card-spacing) / 2);\n padding-left: var(--atc-card-spacing);\n padding-right: var(--atc-card-spacing);\n position: relative;\n color: var(--atc-text-color);\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\nha-card .container .name-area .entity-state {\n font-size: var(--atc-state-font-size);\n font-weight: var(--atc-state-font-weight);\n line-height: normal;\n max-width: 100%;\n}\nha-card .container .name-area .entity-name {\n font-size: var(--atc-name-font-size);\n font-weight: var(--atc-name-font-weight);\n line-height: normal;\n max-width: 100%;\n}\nha-card.entity-picture-as-icon {\n --atc-icon-background-opacity: 1;\n}\nha-card.is-densed-layout .container {\n grid-template-columns: min-content calc(100% - (var(--atc-icon-size) + 2 * var(--atc-card-spacing)));\n grid-template-rows: auto;\n grid-template-areas: "icon-area name-area";\n}\nha-card.is-densed-layout .container .icon-area {\n padding-top: inherit;\n padding-bottom: inherit;\n}\nha-card.is-densed-layout .container .name-area {\n padding-bottom: inherit;\n padding-top: inherit;\n padding-left: inherit;\n}\nha-card.is-active {\n --atc-card-background: var(--atc-card-background-active);\n --atc-icon-border: var(--atc-icon-border-active);\n --atc-icon-background: var(--atc-icon-background-active);\n --atc-icon-color: var(--atc-icon-color-active);\n --atc-text-color: var(--atc-text-color-active);\n}\nha-card.is-unavailable {\n --atc-card-background: var(--atc-card-background-unavailable);\n --atc-text-color: var(--atc-text-color-unavailable);\n --atc-icon-background: var(--atc-icon-background-unavailable);\n --atc-icon-color: var(--atc-icon-color-unavailable);\n}\nha-card.is-clicked {\n animation: var(--atc-theme-click-animation);\n}\n\n/*** \n* Helper Classes \n***/\n.ellipsis {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n@keyframes card_bounce {\n 0% {\n transform: scale(1);\n }\n 15% {\n transform: scale(0.9);\n }\n 25% {\n transform: scale(1);\n }\n 30% {\n transform: scale(0.98);\n }\n 100% {\n transform: scale(1);\n }\n}')}};t([zt({attribute:!1})],ae.prototype,"hass",void 0),t([Pt()],ae.prototype,"isClicked",void 0),t([Pt()],ae.prototype,"config",void 0),ae=t([Et("advanced-tile-card")],ae);var re=ae;let oe;window.customCards=window.customCards||[],window.customCards.push(Kt),console.info(`%c ${Kt.name} \n%c ${ne("common.version")} 1.0.0 `,"color: orange; font-weight: bold; background: black","color: white; font-weight: bold; background: dimgray");const se=(t,e)=>{const i=e&&oe!==t.entity,n=u(t.entity??"");if(Object.keys(t).includes("card_columns")||(t.card_columns="2"),Object.keys(t).includes("card_rows")||(t.card_rows="2"),!Object.keys(t).includes("tap_action")||!t.tap_action||i)switch(n){case"person":case"alarm_control_panel":case"camera":case"sensor":case"binary_sensor":case"sun":t.tap_action={action:"more-info"};break;case"scene":t.tap_action={action:"call-service",service:"scene.turn_on",target:{entity_id:t.entity}};break;case"media_player":t.tap_action={action:"call-service",service:"media_player.media_play_pause",target:{entity_id:t.entity}};break;case"cover":t.tap_action={action:"call-service",service:"cover.toggle",target:{entity_id:t.entity}};break;default:t.tap_action={action:"toggle"}}return Object.keys(t).includes("use_entity_picture_as_icon")&&!i||(t.use_entity_picture_as_icon="person"===n),Object.keys(t).includes("use_entity_picture_as_background")||(t.use_entity_picture_as_background="camera"===n||"media_player"===n),Object.keys(t).includes("show_state_string")&&!i||(t.show_state_string="sensor"===n),oe=t.entity,t};const ce=(t,e,i,n)=>{const a=((t,e,i,n)=>({entity:()=>({condition:()=>!0,name:"entity",label:n.localize("ui.components.entity.entity-picker.entity"),selector:{entity:{}}}),name:()=>({condition:()=>!0,name:"name",label:n.localize("ui.dialogs.helper_settings.generic.name"),type:"string"}),densed_layout:()=>({condition:()=>!0,name:"densed_layout",label:"Densed layout?",selector:{boolean:{}}}),icon:()=>({condition:()=>!0,name:"icon",label:n.localize("ui.dialogs.helper_settings.generic.icon"),selector:{icon:{placeholder:t}}}),icon_tap_action:()=>({condition:()=>!0,name:"icon_tap_action",label:n.localize("ui.panel.lovelace.editor.card.tile.icon_tap_action"),selector:{"ui-action":{}}}),tap_action:()=>({condition:()=>!0,name:"tap_action",label:n.localize("ui.panel.lovelace.editor.card.generic.tap_action"),selector:{"ui-action":{}}}),show_state_string:()=>({condition:()=>!0,name:"show_state_string",label:n.localize("ui.panel.lovelace.editor.card.generic.show_state"),selector:{boolean:{}}}),conditional_state:()=>({condition:()=>!!i.show_state_string,name:"conditional_state",label:`${n.localize("ui.panel.lovelace.editor.card.conditional.name")}?`,selector:{boolean:{}}}),if_state:()=>({condition:()=>!!i.conditional_state,name:"if_state",label:n.localize("ui.panel.lovelace.editor.card.conditional.state_equal"),selector:{text:{}}}),use_attribute_as_state:()=>({condition:()=>!!i.show_state_string,name:"use_attribute_as_state",label:"Use attribute as state",selector:{boolean:{}}}),attribute_to_show:()=>({condition:()=>!!i.use_attribute_as_state,name:"attribute_to_show",label:n.localize("ui.panel.lovelace.editor.card.generic.attribute"),selector:{attribute:{entity_id:i.entity}}}),use_entity_picture_as_icon:()=>({condition:()=>"person"===e||"camera"===e||"media_player"===e,name:"use_entity_picture_as_icon",label:`${n.localize("ui.dialogs.helper_settings.generic.icon")}: ${n.localize("ui.panel.lovelace.editor.card.tile.show_entity_picture")}`,selector:{boolean:{}}}),use_entity_picture_as_background:()=>({condition:()=>parseInt(i.card_rows,10)>1&&("person"===e||"camera"===e||"media_player"===e),name:"use_entity_picture_as_background",label:`Background: ${n.localize("ui.panel.lovelace.editor.card.tile.show_entity_picture")}`,selector:{boolean:{}}}),grid:t=>({condition:()=>!0,name:"",type:"grid",schema:t}),expandable_appearance:t=>({condition:()=>!!t?.length,name:"",type:"expandable",iconPath:"M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z",title:n.localize("ui.panel.lovelace.editor.card.tile.appearance"),schema:t}),expandable_actions:t=>({condition:()=>!!t?.length,name:"",type:"expandable",title:n.localize("ui.panel.lovelace.editor.card.tile.actions"),iconPath:"M10,9A1,1 0 0,1 11,8A1,1 0 0,1 12,9V13.47L13.21,13.6L18.15,15.79C18.68,16.03 19,16.56 19,17.14V21.5C18.97,22.32 18.32,22.97 17.5,23H11C10.62,23 10.26,22.85 10,22.57L5.1,18.37L5.84,17.6C6.03,17.39 6.3,17.28 6.58,17.28H6.8L10,19V9M11,5A4,4 0 0,1 15,9C15,10.5 14.2,11.77 13,12.46V11.24C13.61,10.69 14,9.89 14,9A3,3 0 0,0 11,6A3,3 0 0,0 8,9C8,9.89 8.39,10.69 9,11.24V12.46C7.8,11.77 7,10.5 7,9A4,4 0 0,1 11,5Z",schema:t}),expandable_state:t=>({condition:()=>!0,name:"",type:"expandable",title:n.localize("ui.panel.lovelace.editor.card.generic.state"),iconPath:"M6.27 17.05C6.72 17.58 7 18.25 7 19C7 20.66 5.66 22 4 22S1 20.66 1 19 2.34 16 4 16C4.18 16 4.36 16 4.53 16.05L7.6 10.69L5.86 9.7L9.95 8.58L11.07 12.67L9.33 11.68L6.27 17.05M20 16C18.7 16 17.6 16.84 17.18 18H11V16L8 19L11 22V20H17.18C17.6 21.16 18.7 22 20 22C21.66 22 23 20.66 23 19S21.66 16 20 16M12 8C12.18 8 12.36 8 12.53 7.95L15.6 13.31L13.86 14.3L17.95 15.42L19.07 11.33L17.33 12.32L14.27 6.95C14.72 6.42 15 5.75 15 5C15 3.34 13.66 2 12 2S9 3.34 9 5 10.34 8 12 8Z",schema:t})}))(t,e,i,n),r={};return Object.keys(a).forEach((t=>{r[t]=e=>{const i=a[t](e);return i.condition()?i:{}}})),r};let le=class extends xt{constructor(){super(...arguments),this._initialized=!1}setConfig(t){this._config=se(t),this.dispatchEvent(new CustomEvent("config-changed",{detail:{config:this._config}})),this.loadCardHelpers()}shouldUpdate(){return this._initialized||this._initialize(),!0}get _name(){return this._config?.name||""}get _entity(){return this._config?.entity||""}get _icon(){return this._config?.icon||this._config?.entity&&this.hass?.states[this._config.entity].attributes.icon||f(u(this._config?.entity??""))||""}_handleChange(t){if(!this._config)return;const e=se(t.detail.value,!0);this._config={...this._config,...e},this.dispatchEvent(new CustomEvent("config-changed",{detail:{config:this._config}}))}render(){return this.hass&&this._helpers&&this._config?ot` + `}_handleTap(t){this.toggleClickClass(),b("light"),$(this,this.hass,this.config,t.detail.action)}_handleIconTouchMove(){this.isDragging=!0}_handleIconTap(t){if(this.isDragging)return void(this.isDragging=!1);t.preventDefault(),t.stopPropagation(),this.toggleClickClass(),b("success");const e={entity:this.config.entity,tap_action:this.config.icon_tap_action};$(this,this.hass,e,"tap")}toggleClickClass(){this.isClicked=!0,setTimeout((()=>{this.isClicked=!1}),500)}_showWarning(t){return ot` ${t} `}static get styles(){return z('* {\n box-sizing: border-box;\n}\n\nha-card {\n /*** \n * Variables START\n ***/\n --atc-default-card-background: var(--ha-card-background, var(--card-background-color, white));\n --atc-default-card-border-radius: var(--ha-card-border-radius, 12px);\n --atc-default-icon-color: var(--state-inactive-color);\n --atc-default-icon-color-active: var(--primary-color);\n --atc-default-icon-background: var(--state-inactive-color);\n --atc-default-icon-background-active: var(--primary-color);\n --atc-default-icon-background-opacity: 0.2;\n --atc-default-text-color: var(--primary-text-color);\n --atc-default-text-color-active: var(--primary-text-color-active);\n --atc-default-text-color-unavailble: var(--state-inactive-color);\n --atc-card-background: var(--atc-theme-card-background, var(--atc-default-card-background));\n --atc-card-background-active: var(--atc-theme-card-background-active, var(--atc-default-card-background));\n --atc-card-background-unavailable: var(--atc-theme-card-background-unavailable, transparent);\n --atc-card-background-mask: linear-gradient(0deg, transparent 50px, black 100%);\n --atc-card-spacing: 12px;\n --atc-card-border-radius: var(--atc-theme-card-border-radius, var(--atc-default-card-border-radius));\n --atc-card-transition: 180ms ease-in-out 0s;\n --atc-icon-size: var(--atc-theme-icon-size, 40px);\n --atc-icon-color: var(--atc-theme-icon-color, var(--atc-default-icon-color));\n --atc-icon-color-active: var(--atc-theme-icon-color-active, var(--atc-default-icon-color-active));\n --atc-icon-color-unavailable: var(--state-inactive-color);\n --atc-icon-background: var(--atc-theme-icon-background, var(--atc-default-icon-background));\n --atc-icon-background-active: var(--atc-theme-icon-background-active, var(--atc-default-icon-background-active));\n --atc-icon-background-unavailable: var(--atc-theme-icon-background-unavailable,var(--atc-default-card-background));\n --atc-icon-background-opacity: var(--atc-theme-icon-background-opacity, var(--atc-default-icon-background-opacity));\n --atc-name-font-size: var(--atc-theme-name-font-size, 16px);\n --atc-name-font-weight: var(--atc-theme-name-font-weight, 500);\n --atc-state-font-size: var(--atc-theme-state-font-size, 14px);\n --atc-state-font-weight: var(--atc-theme-state-font-weight, 400);\n --atc-text-color: var(--atc-theme-text-color, var(--atc-default-text-color));\n --atc-text-color-active: var(--atc-theme-text-color-active, var(--atc-default-text-color-active));\n --atc-text-color-unavailable: var(--atc-theme-text-color-unavailable, var(--atc-default-text-color-unavailble));\n /*** \n * Variables END\n ***/\n width: 100%;\n height: 100%;\n background: var(--atc-card-background);\n background-size: cover;\n background-position: center;\n transition: background-color var(--atc-card-transition);\n border-radius: var(--atc-card-border-radius);\n cursor: pointer;\n /*** \n * Elements\n ***/\n /*** \n * Densed Layout\n ***/\n /*** \n * Active State \n ***/\n /*** \n * Available State \n ***/\n /*** \n * Clicked State \n ***/\n}\nha-card .background-image {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n mask-image: var(--atc-card-background-mask);\n -webkit-mask-image: var(--atc-card-background-mask);\n border-radius: var(--atc-card-border-radius);\n}\nha-card .background-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\nha-card .container {\n display: grid;\n grid-template-columns: 50% 50%;\n grid-template-rows: min-content auto min-content;\n grid-template-areas: "icon-area ." ". ." "name-area name-area";\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\nha-card .container .icon-area {\n grid-area: icon-area;\n display: flex;\n align-items: center;\n padding-top: var(--atc-card-spacing);\n padding-bottom: calc(var(--atc-card-spacing) / 2);\n padding-right: var(--atc-card-spacing);\n padding-left: var(--atc-card-spacing);\n}\nha-card .container .icon-area .icon-wrapper {\n padding: 8px;\n width: var(--atc-icon-size);\n height: var(--atc-icon-size);\n aspect-ratio: 1;\n position: relative;\n display: flex;\n align-items: center;\n border: var(--atc-icon-border);\n justify-content: center;\n}\nha-card .container .icon-area .icon-wrapper:before {\n content: "";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: 100%;\n background: var(--atc-icon-background);\n background-size: cover;\n transition: background-color var(--atc-card-transition);\n opacity: var(--atc-icon-background-opacity);\n}\nha-card .container .icon-area .icon-wrapper .icon {\n transition: color var(--atc-card-transition);\n color: var(--atc-icon-color);\n}\nha-card .container .name-area {\n grid-area: name-area;\n padding-bottom: var(--atc-card-spacing);\n padding-top: calc(var(--atc-card-spacing) / 2);\n padding-left: var(--atc-card-spacing);\n padding-right: var(--atc-card-spacing);\n position: relative;\n color: var(--atc-text-color);\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\nha-card .container .name-area .entity-state {\n font-size: var(--atc-state-font-size);\n font-weight: var(--atc-state-font-weight);\n line-height: normal;\n max-width: 100%;\n}\nha-card .container .name-area .entity-name {\n font-size: var(--atc-name-font-size);\n font-weight: var(--atc-name-font-weight);\n line-height: normal;\n max-width: 100%;\n}\nha-card.entity-picture-as-icon {\n --atc-icon-background-opacity: 1;\n}\nha-card.is-densed-layout .container {\n grid-template-columns: min-content calc(100% - (var(--atc-icon-size) + 2 * var(--atc-card-spacing)));\n grid-template-rows: auto;\n grid-template-areas: "icon-area name-area";\n}\nha-card.is-densed-layout .container .icon-area {\n padding-top: calc(var(--atc-card-spacing) / 2);\n padding-bottom: calc(var(--atc-card-spacing) / 2);\n}\nha-card.is-densed-layout .container .name-area {\n padding-bottom: calc(var(--atc-card-spacing) / 2);\n padding-top: calc(var(--atc-card-spacing) / 2);\n padding-left: 0;\n}\nha-card.is-active {\n --atc-card-background: var(--atc-card-background-active);\n --atc-icon-border: var(--atc-icon-border-active);\n --atc-icon-background: var(--atc-icon-background-active);\n --atc-icon-color: var(--atc-icon-color-active);\n --atc-text-color: var(--atc-text-color-active);\n}\nha-card.is-unavailable {\n --atc-card-background: var(--atc-card-background-unavailable);\n --atc-text-color: var(--atc-text-color-unavailable);\n --atc-icon-background: var(--atc-icon-background-unavailable);\n --atc-icon-color: var(--atc-icon-color-unavailable);\n}\nha-card.is-clicked {\n animation: var(--atc-theme-click-animation);\n}\n\n/*** \n* Helper Classes \n***/\n.ellipsis {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n@keyframes card_bounce {\n 0% {\n transform: scale(1);\n }\n 15% {\n transform: scale(0.9);\n }\n 25% {\n transform: scale(1);\n }\n 30% {\n transform: scale(0.98);\n }\n 100% {\n transform: scale(1);\n }\n}')}};t([zt({attribute:!1})],ae.prototype,"hass",void 0),t([Pt()],ae.prototype,"isClicked",void 0),t([Pt()],ae.prototype,"config",void 0),ae=t([Et("advanced-tile-card")],ae);var re=ae;let oe;window.customCards=window.customCards||[],window.customCards.push(Kt),console.info(`%c ${Kt.name} \n%c ${ne("common.version")} 1.0.0 `,"color: orange; font-weight: bold; background: black","color: white; font-weight: bold; background: dimgray");const se=(t,e)=>{const i=e&&oe!==t.entity,n=u(t.entity??"");if(Object.keys(t).includes("card_columns")||(t.card_columns="2"),Object.keys(t).includes("card_rows")||(t.card_rows="2"),!Object.keys(t).includes("tap_action")||!t.tap_action||i)switch(n){case"person":case"alarm_control_panel":case"camera":case"sensor":case"binary_sensor":case"sun":t.tap_action={action:"more-info"};break;case"scene":t.tap_action={action:"call-service",service:"scene.turn_on",target:{entity_id:t.entity}};break;case"media_player":t.tap_action={action:"call-service",service:"media_player.media_play_pause",target:{entity_id:t.entity}};break;case"cover":t.tap_action={action:"call-service",service:"cover.toggle",target:{entity_id:t.entity}};break;default:t.tap_action={action:"toggle"}}return Object.keys(t).includes("use_entity_picture_as_icon")&&!i||(t.use_entity_picture_as_icon="person"===n),Object.keys(t).includes("use_entity_picture_as_background")||(t.use_entity_picture_as_background="camera"===n||"media_player"===n),Object.keys(t).includes("show_state_string")&&!i||(t.show_state_string="sensor"===n),oe=t.entity,t};const ce=(t,e,i,n)=>{const a=((t,e,i,n)=>({entity:()=>({condition:()=>!0,name:"entity",label:n.localize("ui.components.entity.entity-picker.entity"),selector:{entity:{}}}),name:()=>({condition:()=>!0,name:"name",label:n.localize("ui.dialogs.helper_settings.generic.name"),type:"string"}),densed_layout:()=>({condition:()=>!0,name:"densed_layout",label:"Densed layout?",selector:{boolean:{}}}),icon:()=>({condition:()=>!0,name:"icon",label:n.localize("ui.dialogs.helper_settings.generic.icon"),selector:{icon:{placeholder:t}}}),icon_tap_action:()=>({condition:()=>!0,name:"icon_tap_action",label:n.localize("ui.panel.lovelace.editor.card.tile.icon_tap_action"),selector:{"ui-action":{}}}),tap_action:()=>({condition:()=>!0,name:"tap_action",label:n.localize("ui.panel.lovelace.editor.card.generic.tap_action"),selector:{"ui-action":{}}}),show_state_string:()=>({condition:()=>!0,name:"show_state_string",label:n.localize("ui.panel.lovelace.editor.card.generic.show_state"),selector:{boolean:{}}}),conditional_state:()=>({condition:()=>!!i.show_state_string,name:"conditional_state",label:`${n.localize("ui.panel.lovelace.editor.card.conditional.name")}?`,selector:{boolean:{}}}),if_state:()=>({condition:()=>!!i.conditional_state,name:"if_state",label:n.localize("ui.panel.lovelace.editor.card.conditional.state_equal"),selector:{text:{}}}),use_attribute_as_state:()=>({condition:()=>!!i.show_state_string,name:"use_attribute_as_state",label:"Use attribute as state",selector:{boolean:{}}}),attribute_to_show:()=>({condition:()=>!!i.use_attribute_as_state,name:"attribute_to_show",label:n.localize("ui.panel.lovelace.editor.card.generic.attribute"),selector:{attribute:{entity_id:i.entity}}}),use_entity_picture_as_icon:()=>({condition:()=>"person"===e||"camera"===e||"media_player"===e,name:"use_entity_picture_as_icon",label:`${n.localize("ui.dialogs.helper_settings.generic.icon")}: ${n.localize("ui.panel.lovelace.editor.card.tile.show_entity_picture")}`,selector:{boolean:{}}}),use_entity_picture_as_background:()=>({condition:()=>parseInt(i.card_rows,10)>1&&("person"===e||"camera"===e||"media_player"===e),name:"use_entity_picture_as_background",label:`Background: ${n.localize("ui.panel.lovelace.editor.card.tile.show_entity_picture")}`,selector:{boolean:{}}}),grid:t=>({condition:()=>!0,name:"",type:"grid",schema:t}),expandable_appearance:t=>({condition:()=>!!t?.length,name:"",type:"expandable",iconPath:"M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z",title:n.localize("ui.panel.lovelace.editor.card.tile.appearance"),schema:t}),expandable_actions:t=>({condition:()=>!!t?.length,name:"",type:"expandable",title:n.localize("ui.panel.lovelace.editor.card.tile.actions"),iconPath:"M10,9A1,1 0 0,1 11,8A1,1 0 0,1 12,9V13.47L13.21,13.6L18.15,15.79C18.68,16.03 19,16.56 19,17.14V21.5C18.97,22.32 18.32,22.97 17.5,23H11C10.62,23 10.26,22.85 10,22.57L5.1,18.37L5.84,17.6C6.03,17.39 6.3,17.28 6.58,17.28H6.8L10,19V9M11,5A4,4 0 0,1 15,9C15,10.5 14.2,11.77 13,12.46V11.24C13.61,10.69 14,9.89 14,9A3,3 0 0,0 11,6A3,3 0 0,0 8,9C8,9.89 8.39,10.69 9,11.24V12.46C7.8,11.77 7,10.5 7,9A4,4 0 0,1 11,5Z",schema:t}),expandable_state:t=>({condition:()=>!0,name:"",type:"expandable",title:n.localize("ui.panel.lovelace.editor.card.generic.state"),iconPath:"M6.27 17.05C6.72 17.58 7 18.25 7 19C7 20.66 5.66 22 4 22S1 20.66 1 19 2.34 16 4 16C4.18 16 4.36 16 4.53 16.05L7.6 10.69L5.86 9.7L9.95 8.58L11.07 12.67L9.33 11.68L6.27 17.05M20 16C18.7 16 17.6 16.84 17.18 18H11V16L8 19L11 22V20H17.18C17.6 21.16 18.7 22 20 22C21.66 22 23 20.66 23 19S21.66 16 20 16M12 8C12.18 8 12.36 8 12.53 7.95L15.6 13.31L13.86 14.3L17.95 15.42L19.07 11.33L17.33 12.32L14.27 6.95C14.72 6.42 15 5.75 15 5C15 3.34 13.66 2 12 2S9 3.34 9 5 10.34 8 12 8Z",schema:t})}))(t,e,i,n),r={};return Object.keys(a).forEach((t=>{r[t]=e=>{const i=a[t](e);return i.condition()?i:{}}})),r};let le=class extends xt{constructor(){super(...arguments),this._initialized=!1}setConfig(t){this._config=se(t),this.dispatchEvent(new CustomEvent("config-changed",{detail:{config:this._config}})),this.loadCardHelpers()}shouldUpdate(){return this._initialized||this._initialize(),!0}get _name(){return this._config?.name||""}get _entity(){return this._config?.entity||""}get _icon(){return this._config?.icon||this._config?.entity&&this.hass?.states[this._config.entity].attributes.icon||f(u(this._config?.entity??""))||""}_handleChange(t){if(!this._config)return;const e=se(t.detail.value,!0);this._config={...this._config,...e},this.dispatchEvent(new CustomEvent("config-changed",{detail:{config:this._config}}))}render(){return this.hass&&this._helpers&&this._config?ot`