UNPKG

iobroker.lovelace

Version:

With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI

562 lines (506 loc) 15.6 kB
/*! For license information please see chunk.a6d4f55047d12cea9a23.js.LICENSE.txt */ (self.webpackChunkhome_assistant_frontend=self.webpackChunkhome_assistant_frontend||[]).push([[1838],{21157:(e,t,i)=>{"use strict";i(65233);const l=i(50856).d` /* Most common used flex styles*/ <dom-module id="iron-flex"> <template> <style> .layout.horizontal, .layout.vertical { display: -ms-flexbox; display: -webkit-flex; display: flex; } .layout.inline { display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; } .layout.horizontal { -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; } .layout.vertical { -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .layout.wrap { -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .layout.no-wrap { -ms-flex-wrap: nowrap; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } .layout.center, .layout.center-center { -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .layout.center-justified, .layout.center-center { -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .flex { -ms-flex: 1 1 0.000000001px; -webkit-flex: 1; flex: 1; -webkit-flex-basis: 0.000000001px; flex-basis: 0.000000001px; } .flex-auto { -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; } .flex-none { -ms-flex: none; -webkit-flex: none; flex: none; } </style> </template> </dom-module> /* Basic flexbox reverse styles */ <dom-module id="iron-flex-reverse"> <template> <style> .layout.horizontal-reverse, .layout.vertical-reverse { display: -ms-flexbox; display: -webkit-flex; display: flex; } .layout.horizontal-reverse { -ms-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } .layout.vertical-reverse { -ms-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } .layout.wrap-reverse { -ms-flex-wrap: wrap-reverse; -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } </style> </template> </dom-module> /* Flexbox alignment */ <dom-module id="iron-flex-alignment"> <template> <style> /** * Alignment in cross axis. */ .layout.start { -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .layout.center, .layout.center-center { -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .layout.end { -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .layout.baseline { -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; } /** * Alignment in main axis. */ .layout.start-justified { -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .layout.center-justified, .layout.center-center { -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .layout.end-justified { -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .layout.around-justified { -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; } .layout.justified { -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } /** * Self alignment. */ .self-start { -ms-align-self: flex-start; -webkit-align-self: flex-start; align-self: flex-start; } .self-center { -ms-align-self: center; -webkit-align-self: center; align-self: center; } .self-end { -ms-align-self: flex-end; -webkit-align-self: flex-end; align-self: flex-end; } .self-stretch { -ms-align-self: stretch; -webkit-align-self: stretch; align-self: stretch; } .self-baseline { -ms-align-self: baseline; -webkit-align-self: baseline; align-self: baseline; } /** * multi-line alignment in main axis. */ .layout.start-aligned { -ms-flex-line-pack: start; /* IE10 */ -ms-align-content: flex-start; -webkit-align-content: flex-start; align-content: flex-start; } .layout.end-aligned { -ms-flex-line-pack: end; /* IE10 */ -ms-align-content: flex-end; -webkit-align-content: flex-end; align-content: flex-end; } .layout.center-aligned { -ms-flex-line-pack: center; /* IE10 */ -ms-align-content: center; -webkit-align-content: center; align-content: center; } .layout.between-aligned { -ms-flex-line-pack: justify; /* IE10 */ -ms-align-content: space-between; -webkit-align-content: space-between; align-content: space-between; } .layout.around-aligned { -ms-flex-line-pack: distribute; /* IE10 */ -ms-align-content: space-around; -webkit-align-content: space-around; align-content: space-around; } </style> </template> </dom-module> /* Non-flexbox positioning helper styles */ <dom-module id="iron-flex-factors"> <template> <style> .flex, .flex-1 { -ms-flex: 1 1 0.000000001px; -webkit-flex: 1; flex: 1; -webkit-flex-basis: 0.000000001px; flex-basis: 0.000000001px; } .flex-2 { -ms-flex: 2; -webkit-flex: 2; flex: 2; } .flex-3 { -ms-flex: 3; -webkit-flex: 3; flex: 3; } .flex-4 { -ms-flex: 4; -webkit-flex: 4; flex: 4; } .flex-5 { -ms-flex: 5; -webkit-flex: 5; flex: 5; } .flex-6 { -ms-flex: 6; -webkit-flex: 6; flex: 6; } .flex-7 { -ms-flex: 7; -webkit-flex: 7; flex: 7; } .flex-8 { -ms-flex: 8; -webkit-flex: 8; flex: 8; } .flex-9 { -ms-flex: 9; -webkit-flex: 9; flex: 9; } .flex-10 { -ms-flex: 10; -webkit-flex: 10; flex: 10; } .flex-11 { -ms-flex: 11; -webkit-flex: 11; flex: 11; } .flex-12 { -ms-flex: 12; -webkit-flex: 12; flex: 12; } </style> </template> </dom-module> <dom-module id="iron-positioning"> <template> <style> .block { display: block; } [hidden] { display: none !important; } .invisible { visibility: hidden !important; } .relative { position: relative; } .fit { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } body.fullbleed { margin: 0; height: 100vh; } .scroll { -webkit-overflow-scrolling: touch; overflow: auto; } /* fixed position */ .fixed-bottom, .fixed-left, .fixed-right, .fixed-top { position: fixed; } .fixed-top { top: 0; left: 0; right: 0; } .fixed-right { top: 0; right: 0; bottom: 0; } .fixed-bottom { right: 0; bottom: 0; left: 0; } .fixed-left { top: 0; bottom: 0; left: 0; } </style> </template> </dom-module> `;l.setAttribute("style","display: none;"),document.head.appendChild(l.content)},75717:(e,t,i)=>{"use strict";i.d(t,{hI:()=>l,Ry:()=>n});const l="number",n=(e,t,i,l)=>{e.callService("alarm_control_panel",`alarm_${i}`,{entity_id:t,code:l})}},81838:(e,t,i)=>{"use strict";i.r(t);i(53918),i(21157),i(30879);var l=i(50856),n=i(28426),a=i(47181),o=i(75717),s=i(1265);class d extends((0,s.Z)(n.H3)){static get template(){return l.d` <style include="iron-flex"></style> <style> paper-input { margin: auto; max-width: 200px; } .pad { display: flex; justify-content: center; margin-bottom: 24px; } .pad div { display: flex; flex-direction: column; } .pad mwc-button { padding: 8px; width: 80px; } .actions mwc-button { flex: 1 0 50%; margin: 0 4px 16px; max-width: 200px; } mwc-button.disarm { color: var(--error-color); } </style> <template is="dom-if" if="[[_codeFormat]]"> <paper-input label="[[localize('ui.card.alarm_control_panel.code')]]" value="{{_enteredCode}}" type="password" inputmode="[[_inputMode]]" disabled="[[!_inputEnabled]]" ></paper-input> <template is="dom-if" if="[[_isNumber(_codeFormat)]]"> <div class="pad"> <div> <mwc-button on-click="_digitClicked" disabled="[[!_inputEnabled]]" data-digit="1" outlined >1</mwc-button > <mwc-button on-click="_digitClicked" disabled="[[!_inputEnabled]]" data-digit="4" outlined >4</mwc-button > <mwc-button on-click="_digitClicked" disabled="[[!_inputEnabled]]" data-digit="7" outlined >7</mwc-button > </div> <div> <mwc-button on-click="_digitClicked" disabled="[[!_inputEnabled]]" data-digit="2" outlined >2</mwc-button > <mwc-button on-click="_digitClicked" disabled="[[!_inputEnabled]]" data-digit="5" outlined >5</mwc-button > <mwc-button on-click="_digitClicked" disabled="[[!_inputEnabled]]" data-digit="8" outlined >8</mwc-button > <mwc-button on-click="_digitClicked" disabled="[[!_inputEnabled]]" data-digit="0" outlined >0</mwc-button > </div> <div> <mwc-button on-click="_digitClicked" disabled="[[!_inputEnabled]]" data-digit="3" outlined >3</mwc-button > <mwc-button on-click="_digitClicked" disabled="[[!_inputEnabled]]" data-digit="6" outlined >6</mwc-button > <mwc-button on-click="_digitClicked" disabled="[[!_inputEnabled]]" data-digit="9" outlined >9</mwc-button > <mwc-button on-click="_clearEnteredCode" disabled="[[!_inputEnabled]]" outlined > [[localize('ui.card.alarm_control_panel.clear_code')]] </mwc-button> </div> </div> </template> </template> <div class="layout horizontal center-justified actions"> <template is="dom-if" if="[[_disarmVisible]]"> <mwc-button outlined class="disarm" on-click="_callService" data-service="alarm_disarm" disabled="[[!_codeValid]]" > [[localize('ui.card.alarm_control_panel.disarm')]] </mwc-button> </template> <template is="dom-if" if="[[_armVisible]]"> <mwc-button outlined on-click="_callService" data-service="alarm_arm_home" disabled="[[!_codeValid]]" > [[localize('ui.card.alarm_control_panel.arm_home')]] </mwc-button> <mwc-button outlined on-click="_callService" data-service="alarm_arm_away" disabled="[[!_codeValid]]" > [[localize('ui.card.alarm_control_panel.arm_away')]] </mwc-button> </template> </div> `}static get properties(){return{hass:Object,stateObj:{type:Object,observer:"_stateObjChanged"},_enteredCode:{type:String,value:""},_codeFormat:{type:String,value:""},_codeValid:{type:Boolean,computed:"_validateCode(_enteredCode, _codeFormat, _armVisible, _codeArmRequired)"},_disarmVisible:{type:Boolean,value:!1},_armVisible:{type:Boolean,value:!1},_inputEnabled:{type:Boolean,value:!1},_inputMode:{type:String,computed:"_getInputMode(_codeFormat)"}}}constructor(){super(),this._armedStates=["armed_home","armed_away","armed_night","armed_custom_bypass"]}_stateObjChanged(e,t){if(e){const t=e.state,i={_codeFormat:e.attributes.code_format,_armVisible:"disarmed"===t,_codeArmRequired:e.attributes.code_arm_required,_disarmVisible:this._armedStates.includes(t)||"pending"===t||"triggered"===t||"arming"===t};i._inputEnabled=i._disarmVisible||i._armVisible,this.setProperties(i)}t&&setTimeout((()=>{(0,a.B)(this,"iron-resize")}),500)}_getInputMode(e){return this._isNumber(e)?"numeric":"text"}_isNumber(e){return e===o.hI}_validateCode(e,t,i,l){return!t||e.length>0||i&&!l}_digitClicked(e){this._enteredCode+=e.target.getAttribute("data-digit")}_clearEnteredCode(){this._enteredCode=""}_callService(e){const t=e.target.getAttribute("data-service"),i={entity_id:this.stateObj.entity_id,code:this._enteredCode};this.hass.callService("alarm_control_panel",t,i).then((()=>{this._enteredCode=""}))}}customElements.define("more-info-alarm_control_panel",d)}}]); //# sourceMappingURL=chunk.a6d4f55047d12cea9a23.js.map