state-card-custom-ui.html

<script>/*! For license information please see scripts.js.LICENSE */
!function(t){var e={};function i(s){if(e[s])return e[s].exports;var a=e[s]={i:s,l:!1,exports:{}};return t[s].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=t,i.c=e,i.d=function(t,e,s){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:s})},i.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){"use strict";function s(t,e,i,s=!1){t._themes||(t._themes={});let a=e.default_theme;("default"===i||i&&e.themes[i])&&(a=i);const n=Object.assign({},t._themes);if("default"!==a){var o=e.themes[a];Object.keys(o).forEach(e=>{var i="--"+e;t._themes[i]="",n[i]=o[e]})}if(t.updateStyles?t.updateStyles(n):window.ShadyCSS&&window.ShadyCSS.styleSubtree(t,n),!s)return;const r=document.querySelector("meta[name=theme-color]");if(r){r.hasAttribute("default-content")||r.setAttribute("default-content",r.getAttribute("content"));const t=n["--primary-color"]||r.getAttribute("default-content");r.setAttribute("content",t)}}function a(t){return t.substr(0,t.indexOf("."))}function n(t){return a(t.entity_id)}function o(t,e,i){const s=t;let a;s.lastChild&&s.lastChild.tagName===e?a=s.lastChild:(s.lastChild&&s.removeChild(s.lastChild),a=document.createElement(e.toLowerCase())),a.setProperties?a.setProperties(i):Object.keys(i).forEach(t=>{a[t]=i[t]}),null===a.parentNode&&s.appendChild(a)}i.r(e);const r=(t,e)=>0!=(t.attributes.supported_features&e),l=["climate","cover","configurator","input_select","input_number","input_text","lock","media_player","scene","script","timer","vacuum","water_heater","weblink"];new Set(["fan","input_boolean","light","switch"]),i(1);class c{constructor(t){this.value=t.toString()}toString(){return this.value}}const d=function(t,...e){const i=document.createElement("template");return i.innerHTML=e.reduce((e,i,s)=>e+function(t){if(t instanceof HTMLTemplateElement)return t.innerHTML;if(t instanceof c)return function(t){if(t instanceof c)return t.value;throw new Error(`non-literal value passed to Polymer's htmlLiteral function: ${t}`)}(t);throw new Error(`non-template value passed to Polymer's html function: ${t}`)}(i)+t[s+1],t[0]),i};var u=t=>(class extends t{fire(t,e={},i={}){const s=new Event(t,{bubbles:void 0===i.bubbles||i.bubbles,cancelable:Boolean(i.cancelable),composed:void 0===i.composed||i.composed});return s.detail=e,(i.node||this).dispatchEvent(s),s}});customElements.define("ha-config-custom-ui",class extends(u(Polymer.Element)){static get template(){return d`
    <style include="ha-style"></style>
    <app-header-layout has-scrolling-region>
      <app-header slot="header" fixed>
        <app-toolbar>
          <paper-icon-button
            icon='hass:arrow-left'
            on-click='_backHandler'
          ></paper-icon-button>
          <div main-title>Custom UI settings</div>
        </app-toolbar>
      </app-header>

      <ha-config-section is-wide='[[isWide]]'>
        <paper-card heading='Device name'>
          <div class='card-content'>
            Set device name so that you can reference it in per-device settings
            <paper-input
              label='Name'
              value='{{name}}'
            ></paper-input>
          </div>
        </paper-card>
      </ha-config-section>
    </app-header-layout>
    `}static get properties(){return{isWide:Boolean,name:{type:String,observer:"nameChanged"}}}ready(){super.ready(),this.name=window.customUI.getName()}nameChanged(t){window.customUI.setName(t)}_backHandler(){window.history.back(),this.fire("location-changed")}});const m={DOMAIN_DEVICE_CLASS:{binary_sensor:["battery","cold","connectivity","door","garage_door","gas","heat","light","lock","moisture","motion","moving","occupancy","opening","plug","power","presence","problem","safety","smoke","sound","vibration","window"],cover:["garage"],sensor:["battery","humidity","illuminance","temperature","pressure"]},UNKNOWN_TYPE:"json",ADD_TYPE:"key-value",TYPE_TO_TAG:{string:"ha-customize-string",json:"ha-customize-string",icon:"ha-customize-icon",boolean:"ha-customize-boolean",array:"ha-customize-array","key-value":"ha-customize-key-value"}};m.LOGIC_STATE_ATTRIBUTES=m.LOGIC_STATE_ATTRIBUTES||{entity_picture:void 0,friendly_name:{type:"string",description:"Name"},icon:{type:"icon"},emulated_hue:{type:"boolean",domains:["emulated_hue"]},emulated_hue_name:{type:"string",domains:["emulated_hue"]},haaska_hidden:void 0,haaska_name:void 0,homebridge_hidden:{type:"boolean"},homebridge_name:{type:"string"},supported_features:void 0,attribution:void 0,custom_ui_more_info:{type:"string"},custom_ui_state_card:{type:"string"},device_class:{type:"array",options:m.DOMAIN_DEVICE_CLASS,description:"Device class",domains:["binary_sensor","cover","sensor"]},hidden:{type:"boolean",description:"Hide from UI"},assumed_state:{type:"boolean",domains:["switch","light","cover","climate","fan","group","water_heater"]},initial_state:{type:"string",domains:["automation"]},unit_of_measurement:{type:"string"}};var h=m;window.hassAttributeUtil=window.hassAttributeUtil||{};const p=["single-line","break-slider","break-slider-toggle","hide-slider","no-slider"],b={group:void 0,device:void 0,templates:void 0,state:void 0,_stateDisplay:void 0,control_element:{type:"string"},state_card_mode:{type:"array",options:{light:p.concat("badges"),cover:p.concat("badges"),climate:p.concat("badges"),"*":["badges"]}},state_card_custom_ui_secondary:{type:"string"},badges_list:{type:"json"},show_last_changed:{type:"boolean"},hide_control:{type:"boolean"},extra_data_template:{type:"string"},extra_badge:{type:"json"},stretch_slider:{type:"boolean"},slider_theme:{type:"json"},theme:{type:"string"},confirm_controls:{type:"boolean"},confirm_controls_show_lock:{type:"boolean"},hide_in_default_view:{type:"boolean"},icon_color:{type:"string"}};window.hassAttributeUtil.LOGIC_STATE_ATTRIBUTES=h.LOGIC_STATE_ATTRIBUTES,window.hassAttributeUtil.UNKNOWN_TYPE=h.UNKNOWN_TYPE,Object.assign(window.hassAttributeUtil.LOGIC_STATE_ATTRIBUTES,b),window.customUI=window.customUI||{SUPPORTED_SLIDER_MODES:["single-line","break-slider","break-slider-toggle","hide-slider","no-slider"],domHost(t){if(t===document)return null;const e=t.getRootNode();return e instanceof DocumentFragment?e.host:e},lightOrShadow:(t,e)=>t.shadowRoot?t.shadowRoot.querySelector(e):t.querySelector(e),getElementHierarchy(t,e){if(null===t)return null;const i=e.shift();return i?window.customUI.getElementHierarchy(window.customUI.lightOrShadow(t,i),e):t},getContext(t){if(void 0===t._context){t._context=[];for(let e="HA-ENTITIES-CARD"===t.tagName?window.customUI.domHost(t):t;e;e=window.customUI.domHost(e))switch(e.tagName){case"HA-ENTITIES-CARD":e.groupEntity?t._context.push(e.groupEntity.entity_id):!1===e.groupEntity&&e.states&&e.states.length&&t._context.push(`group.${n(e.states[0])}`);break;case"MORE-INFO-GROUP":case"STATE-CARD-CONTENT":e.stateObj&&t._context.push(e.stateObj.entity_id);break;case"HA-CARDS":t._context.push(e.getAttribute("data-view")||"default_view")}t._context.reverse()}return t._context},findMatch:(t,e)=>e?e[t]?t:Object.keys(e).find(e=>t.match(`^${e}$`)):null,maybeChangeObjectByDevice(t){const e=window.customUI.getName();if(!e)return t;const i=this.findMatch(e,t.attributes.device);if(!i)return t;const s=Object.assign({},t.attributes.device[i]);return Object.keys(s).length?window.customUI.applyAttributes(t,s):t},maybeChangeObjectByGroup(t,e){const i=window.customUI.getContext(t);if(!i)return e;if(!e.attributes.group)return e;const s={};return i.forEach(t=>{const i=this.findMatch(t,e.attributes.group);e.attributes.group[i]&&Object.assign(s,e.attributes.group[i])}),Object.keys(s).length?window.customUI.applyAttributes(e,s):e},_setKeep(t,e){void 0===t._cui_keep?t._cui_keep=e:t._cui_keep=t._cui_keep&&e},maybeApplyTemplateAttributes(t,e,i,s){if(!s.templates)return window.customUI._setKeep(i,!0),i;const a={};let n=!1,o=!1;if(Object.keys(s.templates).forEach(r=>{const l=s.templates[r];l.match(/\b(entities|hass)\b/)&&(n=!0);const c=window.customUI.computeTemplate(l,t,e,i,s,i.untemplated_attributes&&i.untemplated_attributes[r]||s[r],i.untemplated_state||i.state);null!==c&&(a[r]=c,"state"===r?c!==i.state&&(o=!0):"_stateDisplay"===r?c!==i._stateDisplay&&(o=!0):c!==s[r]&&(o=!0))}),window.customUI._setKeep(i,!n),!o)return i;if(i.attributes===s){const t=window.customUI.applyAttributes(i,a);return Object.prototype.hasOwnProperty.call(a,"state")&&null!==a.state&&(t.state=String(a.state),t.untemplated_state=i.state),Object.prototype.hasOwnProperty.call(a,"_stateDisplay")&&(t._stateDisplay=a._stateDisplay,t.untemplated_stateDisplay=i._stateDisplay),window.customUI._setKeep(t,!n),t}return Object.assign({},i)},maybeApplyTemplates(t,e,i){const s=window.customUI.maybeApplyTemplateAttributes(t,e,i,i.attributes);let a=s!==i;function n(i){i&&(Object.values(i).forEach(i=>{const n=window.customUI.maybeApplyTemplateAttributes(t,e,s,i);a|=n!==s}),n(i.device),n(i.group))}return n(i.attributes.device),n(i.attributes.group),s!==i?s:a?Object.assign({},i):i},applyAttributes:(t,e)=>({entity_id:t.entity_id,state:t.state,attributes:Object.assign({},t.attributes,e),untemplated_attributes:t.attributes,last_changed:t.last_changed}),maybeChangeObject(t,e,i,s){if(i)return e;let a=window.customUI.maybeChangeObjectByDevice(e);return a=window.customUI.maybeChangeObjectByGroup(t,a),(a=window.customUI.maybeApplyTemplateAttributes(t.hass,t.hass.states,a,a.attributes))!==e&&a.attributes.hidden&&s?null:a},fixGroupTitles(){const t=window.customUI.getElementHierarchy(document,["home-assistant","home-assistant-main"]);if(null===t)return void window.setTimeout(window.customUI.fixGroupTitles,1e3);const e=window.customUI.getElementHierarchy(t,["partial-cards","ha-cards[view-visible]"]);null!==e&&(window.customUI.lightOrShadow(e,".main")||e.$.main).querySelectorAll("ha-entities-card").forEach(t=>{if(t.groupEntity){const e=window.customUI.maybeChangeObject(t,t.groupEntity,!1,!1);e!==t.groupEntity&&e.attributes.friendly_name&&(window.customUI.lightOrShadow(t,".name").textContent=e.attributes.friendly_name)}})},controlColumns(t){const e=window.customUI.getElementHierarchy(document,["home-assistant","home-assistant-main","partial-cards"]);if(null===e)return void window.setTimeout(window.customUI.controlColumns.bind(null,t),1e3);const i=e.handleWindowChange||e._updateColumns;e.mqls.forEach(t=>{t.removeListener(i)}),e.mqls=t.map(t=>{const e=window.matchMedia(`(min-width: ${t}px)`);return e.addListener(i),e}),i()},useCustomizer(){const t=window.customUI.lightOrShadow(document,"home-assistant").hass.states["customizer.customizer"];t&&(t.attributes.columns&&window.customUI.controlColumns(t.attributes.columns),t.attributes.hide_attributes&&window.hassAttributeUtil&&window.hassAttributeUtil.LOGIC_STATE_ATTRIBUTES&&t.attributes.hide_attributes.forEach(t=>{Object.prototype.hasOwnProperty.call(window.hassAttributeUtil.LOGIC_STATE_ATTRIBUTES,t)||(window.hassAttributeUtil.LOGIC_STATE_ATTRIBUTES[t]=void 0)}))},updateConfigPanel(){if(!window.location.pathname.startsWith("/config"))return;const t=window.customUI.getElementHierarchy(document,["home-assistant","home-assistant-main","partial-panel-resolver","ha-panel-config"]);if(!t)return void window.setTimeout(window.customUI.updateConfigPanel,100);const e=window.customUI.getElementHierarchy(t,["ha-config-dashboard","ha-config-navigation"]);e&&(e.localize&&!e.cuiPatch&&(e.cuiPatch=!0,e._originalComputeLoaded=e._computeLoaded,e._originalComputeCaption=e._computeCaption,e._originalComputeDescription=e._computeDescription,e._computeLoaded=((t,i)=>"customui"===i||e._originalComputeLoaded(t,i)),e._computeCaption=((t,i)=>"customui"===t?"Custom UI":e._originalComputeCaption(t,i)),e._computeDescription=((t,i)=>"customui"===t?"SetUI tweaks":e._originalComputeDescription(t,i))),e.pages.some(t=>"customui"===t||"customui"===t.domain)||e.push("pages",e.localize?"customui":{domain:"customui",caption:"Custom UI",description:"Set UI tweaks.",loaded:!0}));const i=()=>{const e=document.createElement("ha-config-custom-ui");return e.isWide=t.isWide,e.setAttribute("page-name","customui"),e},s=window.customUI.lightOrShadow(t,"iron-pages");if(s){if("HA-CONFIG-CUSTOM-UI"!==s.lastElementChild.tagName){const t=i();s.appendChild(t),s.addEventListener("iron-items-changed",()=>{window.location.pathname.startsWith("/config/customui")&&s.select("customui")})}}else if(t.shadowRoot){const e=t.shadowRoot||t;if("HA-CONFIG-CUSTOM-UI"!==e.lastElementChild.tagName){const t=i();e.appendChild(t)}const s=window.location.pathname.startsWith("/config/customui");e.lastElementChild.style.display=s?"":"none"}else t.routerOptions&&t.routerOptions.routes&&(t.routerOptions.routes.customui||(t.routerOptions.routes.customui={tag:"ha-config-custom-ui",load:()=>Promise.resolve()},window.location.pathname.startsWith("/config/customui")&&t.update(new Map([["route",void 0]]))))},installStatesHook(){customElements.whenDefined("home-assistant").then(()=>{const t=customElements.get("home-assistant");if(!t||!t.prototype._updateHass)return;const e=t.prototype._updateHass;t.prototype._updateHass=function(t){const{hass:i}=this;t.states&&Object.keys(t.states).forEach(e=>{const s=t.states[e];if(s._cui_keep)return;const a=window.customUI.maybeApplyTemplates(i,t.states,s);i.states&&s!==i.states[e]?t.states[e]=a:s!==a&&(t.states[e]=a)}),e.call(this,t),t.themes&&i._themeWaiters&&(i._themeWaiters.forEach(t=>t.stateChanged(t.state)),i._themeWaiters=void 0)};const i=window.customUI.lightOrShadow(document,"home-assistant");i.hass&&i.hass.states&&i._updateHass({states:i.hass.states})})},installPartialCards(){customElements.whenDefined("partial-cards").then(()=>{const t=customElements.get("partial-cards");t&&t.prototype._defaultViewFilter&&(t.prototype._defaultViewFilter=((t,e)=>{if(t.states[e].attributes.hidden)return!1;const i={};return Object.values(t.states).forEach(e=>{if(e.attributes&&e.attributes.hide_in_default_view){const s=e.entity_id;if(i[s])return;if(i[s]=e,e.attributes.view){const s=function(t,i){const s={};return e.attributes.entity_id.forEach(e=>{const i=t[e];if(i&&!i.attributes.hidden&&(s[i.entity_id]=i,"group"===a(i.entity_id))){const e=function(t,e){const s={};return i.attributes.entity_id.forEach(e=>{const i=t[e];i&&(s[i.entity_id]=i)}),s}(t);Object.keys(e).forEach(t=>{const i=e[t];i.attributes.hidden||(s[t]=i)})}}),s}(t.states);Object.keys(s).filter(t=>!1!==s[t].attributes.hide_in_default_view).forEach(t=>{i[t]=s[t]})}}}),!i[e]}))})},installActionName(t){customElements.whenDefined(t).then(()=>{const e=customElements.get(t);e&&e.prototype&&Object.defineProperty(e.prototype,"localize",{get:()=>(function(t){return this.stateObj&&this.stateObj.attributes&&this.stateObj.attributes.action_name?this.stateObj.attributes.action_name:this.__data.localize(t)}),set(){}})})},installHaStateLabelBadge(){customElements.whenDefined("ha-state-label-badge").then(()=>{const t=customElements.get("ha-state-label-badge");t&&t.prototype.stateChanged&&(t.prototype.stateChanged=function(t){t.attributes.theme&&(null===this.hass.themes?(this.hass._themeWaiters=this.hass._themeWaiters||[],this.hass._themeWaiters.push(this)):s(this,this.hass.themes||{default_theme:"default",themes:{}},t.attributes.theme||"default")),this.updateStyles(),this.startInterval&&this.startInterval(t)})})},installStateBadge(){customElements.whenDefined("state-badge").then(()=>{const t=customElements.get("state-badge");if(t)if(t.prototype._updateIconAppearance){const e=t.prototype._updateIconAppearance;t.prototype._updateIconAppearance=function(t){t.attributes.icon_color&&!t.attributes.entity_picture?(this.style.backgroundImage="",Object.assign(this.$.icon.style,{color:t.attributes.icon_color,filter:""})):e.call(this,t)}}else if(t.prototype.updated){const e=t.prototype.updated;t.prototype.updated=function(t){if(!t.has("stateObj"))return;const{stateObj:i}=this;i.attributes.icon_color&&!i.attributes.entity_picture?(this.style.backgroundImage="",Object.assign(this._icon.style,{color:i.attributes.icon_color,filter:""})):e.call(this,t)}}})},installHaAttributes(){customElements.whenDefined("ha-attributes").then(()=>{const t=customElements.get("ha-attributes");t&&t.prototype.computeFiltersArray&&window.hassAttributeUtil&&(t.prototype.computeFiltersArray=function(t){return Object.keys(window.hassAttributeUtil.LOGIC_STATE_ATTRIBUTES).concat(t?t.split(","):[])})})},installHaFormCustomize(){window.location.pathname.startsWith("/config")&&customElements.whenDefined("ha-form-customize").then(()=>{const t=customElements.get("ha-form-customize");t?window.customUI.haFormCustomizeInitDone||(window.customUI.haFormCustomizeInitDone=!0,window.hassAttributeUtil&&(t.prototype._computeSingleAttribute&&(t.prototype._computeSingleAttribute=function(t,e,i){const s=window.hassAttributeUtil.LOGIC_STATE_ATTRIBUTES[t]||{type:window.hassAttributeUtil.UNKNOWN_TYPE};return this._initOpenObject(t,"json"===s.type?JSON.stringify(e):e,i,s)}),t.prototype.getNewAttributesOptions&&(t.prototype.getNewAttributesOptions=function(t,e,i,s){return Object.keys(window.hassAttributeUtil.LOGIC_STATE_ATTRIBUTES).filter(t=>{const e=window.hassAttributeUtil.LOGIC_STATE_ATTRIBUTES[t];return e&&(!e.domains||!this.entity||e.domains.includes(n(this.entity)))}).filter(this.filterFromAttributes(t)).filter(this.filterFromAttributes(e)).filter(this.filterFromAttributes(i)).filter(this.filterFromAttributes(s)).sort().concat("Other")}))):window.setTimeout(window.customUI.installHaFormCustomize,100)})},installClassHooks(){window.customUI.classInitDone||(window.customUI.classInitDone=!0,window.customUI.installPartialCards(),window.customUI.installStatesHook(),window.customUI.installHaStateLabelBadge(),window.customUI.installStateBadge(),window.customUI.installHaAttributes(),window.customUI.installActionName("state-card-scene"),window.customUI.installActionName("state-card-script"))},init(){if(window.customUI.initDone)return;window.customUI.installClassHooks();const t=window.customUI.lightOrShadow(document,"home-assistant");t.hass&&t.hass.states?(window.customUI.initDone=!0,window.customUI.useCustomizer(),window.customUI.runHooks(),window.addEventListener("location-changed",window.setTimeout.bind(null,window.customUI.runHooks,100)),console.log("Loaded CustomUI 20190324"),window.CUSTOM_UI_LIST||(window.CUSTOM_UI_LIST=[]),window.CUSTOM_UI_LIST.push({name:"CustomUI",version:"20190324",url:"https://github.com/andrey-git/home-assistant-custom-ui"})):window.setTimeout(window.customUI.init,1e3)},runHooks(){window.customUI.fixGroupTitles(),window.customUI.updateConfigPanel(),window.customUI.installHaFormCustomize()},getName:()=>window.localStorage.getItem("ha-device-name")||"",setName(t){window.localStorage.setItem("ha-device-name",t||"")},computeTemplate(t,e,i,s,a,n,o){const r=t.indexOf("return")>=0?t:`return \`${t}\`;`;try{return new Function("hass","entities","entity","attributes","attribute","state",r)(e,i,s,a,n,o)}catch(t){if(t instanceof SyntaxError||t instanceof ReferenceError)return console.warn(`${t.name}: ${t.message} in template ${r}`),null;throw t}}},window.customUI.init();var g=class extends Polymer.Element{static get properties(){return{hass:Object,inDialog:{type:Boolean,value:!1},stateObj:Object,controlElement:String,extra:{type:Array,computed:"computeExtra(hass, stateObj)"}}}computeExtra(t,e){let i=e.attributes.extra_data_template;return i?(Array.isArray(i)||(i=[i]),i.map(i=>window.customUI.computeTemplate(i,t,t.states,e,e.attributes,void 0,e.state)).filter(t=>null!==t)):[]}showLastChanged(t,e,i){return!!e||!i.length&&!!t.attributes.show_last_changed}hasExtra(t){return t.length>0}};customElements.define("dynamic-element",class extends Polymer.Element{static get properties(){return{hass:Object,stateObj:Object,elementName:String,inDialog:{type:Boolean,value:!1}}}static get observers(){return["observerFunc(hass, stateObj, elementName, inDialog)"]}observerFunc(t,e,i,s){o(this,i?i.toUpperCase():"DIV",{hass:t,stateObj:e,inDialog:s})}}),customElements.whenDefined("state-card-display").then(()=>{customElements.define("dynamic-with-extra",class extends(customElements.get("state-card-display")){static get template(){return d`
      <style is="custom-style" include="iron-flex iron-flex-alignment iron-flex-factors"></style>
      <style>
        :host {
          display: inline-block;
        }
        .control-wrapper {
          margin: -4px -16px -4px 0;
          padding: 4px 16px;
        }
        ha-state-label-badge {
          margin-left: 8px;
        }
        dynamic-element {
          display: block;
          text-align: right;
        }
        #overlay {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          text-align: right;
          z-index: 1;
        }
        #lock {
          margin-top: 8px;
          opacity: 0.3;
          margin-right: 7px;
        }
        #lock.ha-cover-controls {
          margin-right: 52px;
          background-color: white;
        }
        .extra {
          margin-bottom: -16px;
          --ha-label-badge-size: 36px;
          --ha-label-badge-font-size: 1.2em;
        }
        .state {
          @apply --paper-font-body1;
          color: var(--primary-text-color);
          margin-left: 16px;
          text-align: right;
          line-height: 40px;
        }
      </style>
      <div class$='[[extraClass(extraObjVisible)]] horizontal layout'>
        <template is='dom-if' if='[[extraObjVisible]]'>
          <template is='dom-repeat'
                    items='[[extraObj]]'
                    on-dom-change='extraDomChanged'>
            <ha-state-label-badge hass='[[hass]]' state='[[item]]'></ha-state-label-badge>
          </template>
        </template>
        <template is='dom-if' if='[[_showControl(inDialog, stateObj)]]'>
          <template is='dom-if' if='[[controlElement]]'>
            <div class="control-wrapper">
              <dynamic-element
                  class='flex'
                  state-obj="[[stateObj]]"
                  hass='[[hass]]'
                  element-name='[[controlElement]]'>
              </dynamic-element>
              <template is='dom-if' if='[[isConfirmControls(stateObj)]]'>
                <div id="overlay" on-click='clickHandler'>
                  <template is='dom-if' if='[[stateObj.attributes.confirm_controls_show_lock]]'>
                    <iron-icon id="lock" class$="[[controlElement]]" icon="mdi:lock-outline"></iron-icon>
                  </template>
                </div>
              </template>
            </div>
          </template>
          <template is='dom-if' if='[[!controlElement]]'>
            <div class='state'>[[computeStateDisplay(stateObj)]]</div>
          </template>
        </template>
      </div>
      `}static get properties(){return{hass:Object,inDialog:{type:Boolean,value:!1},stateObj:Object,controlElement:String,extraObj:{type:Array,computed:"computeExtra(hass, stateObj, _attached)"},_attached:Boolean,extraObjVisible:{type:Boolean,computed:"computeExtraVisible(extraObj, inDialog)"}}}connectedCallback(){super.connectedCallback(),this._attached=!0}disconnectedCallback(){this._isAttached=!1,super.disconnectedCallback()}computeExtra(t,e,i){if(!e.attributes.extra_badge||!i)return[];let s=e.attributes.extra_badge;return Array.isArray(s)||(s=[s]),s.map(i=>{let s=null;if(i.entity_id&&t.states[i.entity_id]?s=Object.assign({},window.customUI.maybeChangeObject(this,t.states[i.entity_id],this.inDialog,!1)):i.attribute&&void 0!==e.attributes[i.attribute]&&(s={state:String(e.attributes[i.attribute]),entity_id:"none.none",attributes:{unit_of_measurement:i.unit}}),!s)return null;let a=i.blacklist_states;return void 0!==a&&(Array.isArray(a)||(a=[a]),a.some(t=>RegExp(t).test(s.state.toString())))?null:(s._entityDisplay="",s.attributes=Object.assign({},{friendly_name:""}),s)}).filter(t=>null!=t)}computeExtraVisible(t,e){return!(e||!t)&&0!==t.length}extraClass(t){return t?"extra":""}_showControl(t,e){return!!t||!e.attributes.hide_control}computeStateDisplay(t){return super.computeStateDisplay(this.haLocalize||this.localize,t)}isConfirmControls(t){return t.attributes.confirm_controls||t.attributes.confirm_controls_show_lock}clickHandler(t){this.root.querySelector("#overlay").style.pointerEvents="none";const e=this.root.querySelector("#lock");e&&(e.icon="mdi:lock-open-outline",e.style.opacity="0.1"),window.setTimeout(()=>{this.root.querySelector("#overlay").style.pointerEvents="",e&&(e.icon="mdi:lock-outline",e.style.opacity="")},5e3),t.stopPropagation()}applyThemes(t,e,i){const a=i.attributes.theme||"default";s(e,t.themes||{default_theme:"default",themes:{}},a)}extraDomChanged(){this.root.querySelectorAll("ha-state-label-badge").forEach(t=>{this.applyThemes(this.hass,t,t.state)})}})}),customElements.define("ha-themed-slider",class extends Polymer.Element{static get template(){return d`
    <style>
      :host {
        margin: var(--ha-themed-slider-margin, initial);
      }
      .disable-off-when-min {
        --paper-slider-pin-start-color:  var(--paper-slider-pin-color);
      }

      .disable-off-when-min.is-on {
        --paper-slider-knob-start-color: var(--paper-slider-knob-color);
        --paper-slider-knob-start-border-color: var(--paper-slider-knob-color);
      }
      paper-slider {
        margin: 4px 0;
        max-width: 100%;
        min-width: 100px;
        width: var(--ha-paper-slider-width, 200px);
      }
    </style>

    <paper-slider
         min='[[_themedMin]]'
         max='[[_computeAttribute(theme, "max", max)]]'
         pin='[[_computeAttribute(theme, "pin", pin)]]'
         class$='[[computeClass(theme, isOn, _themedMin)]]' value='[[value]]'
         on-change='valueChanged'>
    </paper-slider>
    `}ready(){super.ready(),this.disableOffWhenMin=!this._computeAttribute(this.theme,"off_when_min",!this.disableOffWhenMin),this.computeEnabledThemedReportWhenNotChanged(this.theme,this.disableReportWhenNotChanged)}static get properties(){return{min:{type:Number,value:0},max:{type:Number,value:100},pin:{type:Boolean,value:!1},isOn:{type:Boolean,value:!1},disableOffWhenMin:{type:Boolean,value:!1,notify:!0},disableReportWhenNotChanged:{type:Boolean,value:!1},theme:Object,value:{type:Number,notify:!0},_themedMin:{type:Number,computed:'_computeAttribute(theme, "min", min)'}}}static get observers(){return["computeEnabledThemedReportWhenNotChanged(theme, disableReportWhenNotChanged)"]}computeEnabledThemedReportWhenNotChanged(t,e){this._enabledThemedReportWhenNotChanged=this._computeAttribute(t,"report_when_not_changed",!e)}_computeAttribute(t,e,i){return t&&e in t?t[e]:i}computeClass(t,e,i){let s="";return e&&(s+="is-on "),this._computeAttribute(t,"off_when_min",!this.disableOffWhenMin)||0===i?"":`${s}disable-off-when-min`}valueChanged(t){this._enabledThemedReportWhenNotChanged||this.value!==t.target.value?this.value=t.target.value:t.stopPropagation()}}),customElements.define("state-card-with-slider",class extends g{static get template(){return d`
    <style is="custom-style" include="iron-flex iron-flex-alignment iron-flex-factors"></style>
    <style>
      #container {
        position: relative;
      }
      .second-line, .state-and-toggle, .state-info {
        max-width: 100%;
      }
      .nowrap .state-and-toggle {
        overflow: hidden;
        flex-grow: 0;
      }
      .nowrap .second-line {
        overflow: hidden;
      }

      .second-line {
        padding-top: 20px;
        padding-bottom: 16px;
        margin-top: -20px;
        margin-bottom: -16px;
      }
      .stretch .second-line, .stretch ha-themed-slider {
        width: 100%;
        --ha-paper-slider-width: 100%;
      }
      .nowrap .state-info {
        min-width: initial;
      }
      ha-themed-slider, .top-wrapper {
        min-width: 100px;
        max-width: 100%;
      }
      .top-wrapper.stretch {
        display: block;
      }

      .hidden {
        display: none;
      }
    </style>

    <div id='container' class$='horizontal layout flex top-wrapper [[_computeWrapClass(mode, stretchSlider, lineTooLong, inDialog)]]'>
      <div class='horizontal layout justified flex-auto state-and-toggle'>
        <state-info
            class='state-info flex-auto'
            hass='[[hass]]'
            state-obj='[[stateObj]]'
            in-dialog='[[showLastChanged(stateObj, inDialog, extra)]]'
            secondary-line$='[[hasExtra(extra)]]'
        >
          <template is='dom-repeat' items='[[extra]]'>
            <div>[[item]]</div>
          </template>
        </state-info>
        <template is='dom-if' if='[[breakSlider]]' class='hidden'>
          <dynamic-with-extra hass='[[hass]]' state-obj='[[stateObj]]' control-element='[[controlElement]]' in-dialog='[[inDialog]]'></dynamic-with-extra>
        </template>
      </div>
      <template is='dom-if' if='[[showSlider]]' restamp>
        <div class='horizontal layout flex-auto end-justified second-line'>
          <ha-themed-slider
            id='slider'
            max=[[max]]
            min=[[min]]
            theme='[[stateObj.attributes.slider_theme]]'
            is-on='[[isOn(stateObj, nameOn)]]'
            value='{{sliderValue}}'
            disable-off-when-min='{{disableOffWhenMin}}'
            on-change='sliderChanged'
            on-click='stopPropagation'>
          </ha-themed-slider>
          <template is='dom-if' if='[[!breakSlider]]'>
            <dynamic-with-extra hass='[[hass]]' state-obj='[[stateObj]]' control-element='[[controlElement]]' in-dialog='[[inDialog]]'></dynamic-with-extra>
          </template>
        </div>
      </template>
    </div>
    `}static get properties(){return{domain:String,serviceMin:String,serviceMax:String,valueName:String,setValueName:String,nameOn:{type:String,value:"on"},min:{type:Number,value:0},max:{type:Number,value:255},sliderValue:{type:Number,value:0},disableOffWhenMin:Boolean,mode:String,stretchSlider:{type:Boolean,value:!1},breakSlider:{type:Boolean,value:!1},hideSlider:{type:Boolean,value:!1},lineTooLong:{type:Boolean,value:!1},minLineBreak:Number,maxLineBreak:Number,showSlider:{type:Number,computed:"_showSlider(inDialog, stateObj, hideSlider)"}}}ready(){super.ready(),this._onIronResize=this._onIronResize.bind(this)}connectedCallback(){super.connectedCallback(),this._isConnected=!0,window.addEventListener("resize",this._onIronResize),this._waitForLayout()}disconnectedCallback(){window.removeEventListener("resize",this._onIronResize),this._isConnected=!1,super.disconnectedCallback()}static get observers(){return["stateObjChanged(stateObj, nameOn, valueName)"]}_waitForLayout(){this._isConnected&&(this._setMode(),this._frameId||(this.readyToCompute=!1,this._frameId=window.requestAnimationFrame(()=>{this._frameId=null,this.readyToCompute=!0,this._onIronResize()})))}_setMode(){const t={hideSlider:"hide-slider"===this.mode&&this.lineTooLong,breakSlider:("break-slider"===this.mode||"hide-slider"===this.mode)&&this.lineTooLong};this.showSlider||(t.breakSlider=!0),this.setProperties(t)}_onIronResize(){if(!this.readyToCompute)return;if("no-slider"===this.mode)return void this.setProperties({hideSlider:!0,breakSlider:!0});const t=this.breakSlider,e=this.hideSlider;this.setProperties({lineTooLong:!1,hideSlider:!1,breakSlider:!1});const{container:i}=this.$,s=i.clientWidth;if(0!==s){if(s<=this.minLineBreak)this.lineTooLong=!0;else if(s>=this.maxLineBreak)this.lineTooLong=!1;else{if(e&&"hide-slider"===this.mode)return void this._waitForLayout();const a=i.clientHeight,n=this.root.querySelector(".state-info").clientHeight;this.lineTooLong=a>1.5*n,this.lineTooLong?this.minLineBreak=s:t||(this.maxLineBreak=s)}this._setMode()}}_computeWrapClass(t,e,i,s){return s?"":"single-line"===t?"nowrap":e&&i?"stretch wrap":"wrap"}_showSlider(t,e,i){return!t&&!i}sliderChanged(t){const e=parseInt(t.target.value,10),i={entity_id:this.stateObj.entity_id};if(Number.isNaN(e))return;let s=this.root.querySelector("#slider");t.target!==s?({target:s}=t):t.path?[s]=t.path:t.composedPath&&([s]=t.composedPath()),0===e||e<=s.min&&!this.disableOffWhenMin?this.hass.callService(this.domain,this.serviceMin,i):(i[this.setValueName||this.valueName]=e,this.hass.callService(this.domain,this.serviceMax,i))}stateObjChanged(t,e,i){const s={sliderValue:this.isOn(t,e)?t.attributes[i]:0};t&&Object.assign(s,{minLineBreak:0,maxLineBreak:999,hideSlider:!1,breakSlider:!1,lineTooLong:!1,mode:t.attributes.state_card_mode,stretchSlider:!!t.attributes.stretch_slider}),this.setProperties(s),t&&this._waitForLayout()}isOn(t,e){return t&&(!e||t.state===e)}stopPropagation(t){t.stopPropagation()}}),customElements.define("state-card-without-slider",class extends g{static get template(){return d`
    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style>
      #container {
        position: relative;
      }
    </style>

    <div id='container' class='horizontal layout justified'>
      <state-info
          hass='[[hass]]'
          class='state-info'
          state-obj='[[stateObj]]'
          in-dialog='[[showLastChanged(stateObj, inDialog, extra)]]'
          secondary-line$='[[hasExtra(extra)]]'>
        <template is='dom-repeat' items='[[extra]]'>
          <div>[[item]]</div>
        </template>
      </state-info>
      <dynamic-with-extra
          hass='[[hass]]'
          state-obj='[[stateObj]]'
          control-element='[[controlElement]]'
          in-dialog='[[inDialog]]'>
      </dynamic-with-extra>
    </div>
    `}});const y=["configurator"],_={light:1,cover:4,climate:1},w={toggle:"ha-entity-toggle",display:"",cover:"ha-cover-controls"};customElements.define("state-card-custom-ui",class extends Polymer.Element{static get properties(){return{hass:Object,inDialog:{type:Boolean,value:!1},stateObj:Object}}static get observers(){return["inputChanged(hass, inDialog, stateObj)"]}connectedCallback(){super.connectedCallback();const t=this.parentNode.parentNode;"DIV"===t.tagName&&(t.classList.contains("state")||t.classList.contains("child-card"))&&(this._container=t,t.style.setProperty("background-color","var(--paper-card-background-color, inherit)"),t.updateStyles||(t.updateStyles=(e=>{Object.keys(e).forEach(i=>{t.style.setProperty(i,e[i])})}))),this._isAttached=!0,this.inputChanged(this.hass,this.inDialog,this.stateObj)}disconnectedCallback(){this._isAttached=!1,this._container&&(this._container.updateStyles({display:"",margin:"",padding:""}),s(this._container,this.hass.themes||{default_theme:"default",themes:{}},"default"),this._container=null),super.disconnectedCallback()}badgeMode(t,e,i){const s=[];if("group"===i)e.attributes.entity_id.forEach(i=>{const a=t.states[i];a?e.attributes.badges_list&&!e.attributes.badges_list.includes(a.entity_id)||s.push(window.customUI.maybeChangeObject(this,a,!1,!1)):console.warn(`Unknown ID ${i} in group ${e.entity_id}`)});else if(s.push(e),this._container){this._container.style.display="inline-block";const t={display:"inline-block"};this._container.classList.contains("state")&&(t.margin="var(--ha-badges-card-margin, 0)"),this.updateStyles(t)}o(this,"HA-BADGES-CARD",{hass:t,states:s}),this._container&&this._container.updateStyles({width:"var(--ha-badges-card-width, initial)","text-align":"var(--ha-badges-card-text-align, initial)"}),this.lastChild.style.fontSize="85%",this.style.setProperty("--ha-state-label-badge-margin-bottom","0")}cleanBadgeStyle(){this._container&&this._container.updateStyles({display:"",width:"","text-align":""}),this.updateStyles({display:"",margin:""})}applyThemes(t,e){let i=this,a="default";this._container&&(i=this._container),e.attributes.theme&&(a=e.attributes.theme),s(i,t.themes||{default_theme:"default",themes:{}},a)}maybeHideEntity(t){return t?(this._container&&this._container.updateStyles({margin:"",padding:""}),!1):(this.lastChild&&this.removeChild(this.lastChild),this._container&&this._container.updateStyles({margin:"0",padding:"0"}),!0)}sliderEligible_(t,e,i){return!i&&_[t]&&_[t]&e.attributes.supported_features&&e.attributes.state_card_mode&&"no-slider"!==e.attributes.state_card_mode}inputChanged(t,e,i){if(!i||!t||!this._isAttached)return;const s=n(i),a=window.customUI.maybeChangeObject(this,i,e,!0);this.maybeHideEntity(a)||(this.applyThemes(t,a),e||"badges"!==a.attributes.state_card_mode?this.regularMode_(t,e,a,s):this.badgeMode(t,a,s))}regularMode_(t,e,i,s){this.cleanBadgeStyle();const a={hass:t,stateObj:i,inDialog:e},c=function(t,e){if("unavailable"===e.state)return"display";const i=n(e);return l.includes(i)?i:function(t,e){const i=n(e);return"group"===i?"on"===e.state||"off"===e.state:"climate"===i?r(e,4096):function(t,e){const i=t.services[e];return!!i&&("lock"===e?"lock"in i:"cover"===e?"open_cover"in i:"turn_on"in i)}(t,i)}(t,e)&&"hidden"!==e.attributes.control?"toggle":"display"}(t,i);let d;const u=i.attributes.state_card_custom_ui_secondary;"light"===s&&this.sliderEligible_(s,i,e)?(Object.assign(a,{controlElement:"ha-entity-toggle",serviceMin:"turn_off",serviceMax:"turn_on",valueName:"brightness",domain:s}),d="state-card-with-slider"):"cover"===s&&this.sliderEligible_(s,i,e)?(Object.assign(a,{controlElement:"ha-cover-controls",max:100,serviceMin:"close_cover",serviceMax:"set_cover_position",setValueName:"position",valueName:"current_position",nameOn:"open",domain:s}),d="state-card-with-slider"):"climate"===s&&this.sliderEligible_(s,i,e)?(Object.assign(a,{controlElement:"ha-climate-state",min:i.attributes.min_temp||-100,max:i.attributes.max_temp||200,serviceMin:"set_temperature",serviceMax:"set_temperature",valueName:"temperature",nameOn:"",domain:s}),d="state-card-with-slider"):void 0!==w[c]?(a.controlElement=w[c],d="state-card-without-slider"):i.attributes.show_last_changed&&!y.includes(c)&&(a.inDialog=!0),"unavailable"===i.state&&(a.controlElement=""),void 0!==i.attributes.control_element&&(a.controlElement=i.attributes.control_element),o(this,(u||d||`STATE-CARD-${c}`).toUpperCase(),a)}})},function(t,e){window.JSCompiler_renameProperty=function(t){return t}}]);
//# sourceMappingURL=scripts.js.map</script>