iobroker.lovelace
Version:
With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI
562 lines (506 loc) • 15.6 kB
JavaScript
/*! 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 ;
}
.invisible {
visibility: hidden ;
}
.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