iobroker.lovelace
Version:
With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI
278 lines (242 loc) • 12.7 kB
JavaScript
/*! For license information please see chunk.d228c1f41d58ca5079d7.js.LICENSE.txt */
(self.webpackChunkhome_assistant_frontend=self.webpackChunkhome_assistant_frontend||[]).push([[7951],{44285:(e,t,a)=>{"use strict";a(43437);var i=a(9672),o=a(50856),r=a(42687);(0,i.k)({_template:o.d`
<style>
:host {
display: inline-block;
overflow: hidden;
position: relative;
}
#baseURIAnchor {
display: none;
}
#sizedImgDiv {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
display: none;
}
#img {
display: block;
width: var(--iron-image-width, auto);
height: var(--iron-image-height, auto);
}
:host([sizing]) #sizedImgDiv {
display: block;
}
:host([sizing]) #img {
display: none;
}
#placeholder {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: inherit;
opacity: 1;
--iron-image-placeholder;
}
#placeholder.faded-out {
transition: opacity 0.5s linear;
opacity: 0;
}
</style>
<a id="baseURIAnchor" href="#"></a>
<div id="sizedImgDiv" role="img" hidden$="[[_computeImgDivHidden(sizing)]]" aria-hidden$="[[_computeImgDivARIAHidden(alt)]]" aria-label$="[[_computeImgDivARIALabel(alt, src)]]"></div>
<img id="img" alt$="[[alt]]" hidden$="[[_computeImgHidden(sizing)]]" crossorigin$="[[crossorigin]]" on-load="_imgOnLoad" on-error="_imgOnError">
<div id="placeholder" hidden$="[[_computePlaceholderHidden(preload, fade, loading, loaded)]]" class$="[[_computePlaceholderClassName(preload, fade, loading, loaded)]]"></div>
`,is:"iron-image",properties:{src:{type:String,value:""},alt:{type:String,value:null},crossorigin:{type:String,value:null},preventLoad:{type:Boolean,value:!1},sizing:{type:String,value:null,reflectToAttribute:!0},position:{type:String,value:"center"},preload:{type:Boolean,value:!1},placeholder:{type:String,value:null,observer:"_placeholderChanged"},fade:{type:Boolean,value:!1},loaded:{notify:!0,readOnly:!0,type:Boolean,value:!1},loading:{notify:!0,readOnly:!0,type:Boolean,value:!1},error:{notify:!0,readOnly:!0,type:Boolean,value:!1},width:{observer:"_widthChanged",type:Number,value:null},height:{observer:"_heightChanged",type:Number,value:null}},observers:["_transformChanged(sizing, position)","_loadStateObserver(src, preventLoad)"],created:function(){this._resolvedSrc=""},_imgOnLoad:function(){this.$.img.src===this._resolveSrc(this.src)&&(this._setLoading(!1),this._setLoaded(!0),this._setError(!1))},_imgOnError:function(){this.$.img.src===this._resolveSrc(this.src)&&(this.$.img.removeAttribute("src"),this.$.sizedImgDiv.style.backgroundImage="",this._setLoading(!1),this._setLoaded(!1),this._setError(!0))},_computePlaceholderHidden:function(){return!this.preload||!this.fade&&!this.loading&&this.loaded},_computePlaceholderClassName:function(){return this.preload&&this.fade&&!this.loading&&this.loaded?"faded-out":""},_computeImgDivHidden:function(){return!this.sizing},_computeImgDivARIAHidden:function(){return""===this.alt?"true":void 0},_computeImgDivARIALabel:function(){return null!==this.alt?this.alt:""===this.src?"":this._resolveSrc(this.src).replace(/[?|#].*/g,"").split("/").pop()},_computeImgHidden:function(){return!!this.sizing},_widthChanged:function(){this.style.width=isNaN(this.width)?this.width:this.width+"px"},_heightChanged:function(){this.style.height=isNaN(this.height)?this.height:this.height+"px"},_loadStateObserver:function(e,t){var a=this._resolveSrc(e);a!==this._resolvedSrc&&(this._resolvedSrc="",this.$.img.removeAttribute("src"),this.$.sizedImgDiv.style.backgroundImage="",""===e||t?(this._setLoading(!1),this._setLoaded(!1),this._setError(!1)):(this._resolvedSrc=a,this.$.img.src=this._resolvedSrc,this.$.sizedImgDiv.style.backgroundImage='url("'+this._resolvedSrc+'")',this._setLoading(!0),this._setLoaded(!1),this._setError(!1)))},_placeholderChanged:function(){this.$.placeholder.style.backgroundImage=this.placeholder?'url("'+this.placeholder+'")':""},_transformChanged:function(){var e=this.$.sizedImgDiv.style,t=this.$.placeholder.style;e.backgroundSize=t.backgroundSize=this.sizing,e.backgroundPosition=t.backgroundPosition=this.sizing?this.position:"",e.backgroundRepeat=t.backgroundRepeat=this.sizing?"no-repeat":""},_resolveSrc:function(e){var t=(0,r.Kk)(e,this.$.baseURIAnchor.href);return t.length>=2&&"/"===t[0]&&"/"!==t[1]&&(t=(location.origin||location.protocol+"//"+location.host)+t),t}})},41041:(e,t,a)=>{"use strict";a.r(t);a(43437),a(65660),a(44285),a(54242);var i=a(50856);const o=i.d`
<dom-module id="paper-material-styles">
<template>
<style>
html {
--paper-material: {
display: block;
position: relative;
};
--paper-material-elevation-1: {
--shadow-elevation-2dp;
};
--paper-material-elevation-2: {
--shadow-elevation-4dp;
};
--paper-material-elevation-3: {
--shadow-elevation-6dp;
};
--paper-material-elevation-4: {
--shadow-elevation-8dp;
};
--paper-material-elevation-5: {
--shadow-elevation-16dp;
};
}
.paper-material {
--paper-material;
}
.paper-material[elevation="1"] {
--paper-material-elevation-1;
}
.paper-material[elevation="2"] {
--paper-material-elevation-2;
}
.paper-material[elevation="3"] {
--paper-material-elevation-3;
}
.paper-material[elevation="4"] {
--paper-material-elevation-4;
}
.paper-material[elevation="5"] {
--paper-material-elevation-5;
}
/* Duplicate the styles because of https://github.com/webcomponents/shadycss/issues/193 */
:host {
--paper-material: {
display: block;
position: relative;
};
--paper-material-elevation-1: {
--shadow-elevation-2dp;
};
--paper-material-elevation-2: {
--shadow-elevation-4dp;
};
--paper-material-elevation-3: {
--shadow-elevation-6dp;
};
--paper-material-elevation-4: {
--shadow-elevation-8dp;
};
--paper-material-elevation-5: {
--shadow-elevation-16dp;
};
}
:host(.paper-material) {
--paper-material;
}
:host(.paper-material[elevation="1"]) {
--paper-material-elevation-1;
}
:host(.paper-material[elevation="2"]) {
--paper-material-elevation-2;
}
:host(.paper-material[elevation="3"]) {
--paper-material-elevation-3;
}
:host(.paper-material[elevation="4"]) {
--paper-material-elevation-4;
}
:host(.paper-material[elevation="5"]) {
--paper-material-elevation-5;
}
</style>
</template>
</dom-module>`;o.setAttribute("style","display: none;"),document.head.appendChild(o.content);a(1656);(0,a(9672).k)({_template:i.d`
<style include="paper-material-styles">
:host {
display: inline-block;
position: relative;
box-sizing: border-box;
background-color: var(--paper-card-background-color, var(--primary-background-color));
border-radius: 2px;
--paper-font-common-base;
--paper-card;
}
/* IE 10 support for HTML5 hidden attr */
:host([hidden]), [hidden] {
display: none !important;
}
.header {
position: relative;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
overflow: hidden;
--paper-card-header;
}
.header iron-image {
display: block;
width: 100%;
--iron-image-width: 100%;
pointer-events: none;
--paper-card-header-image;
}
.header .title-text {
padding: 16px;
font-size: 24px;
font-weight: 400;
color: var(--paper-card-header-color, #000);
--paper-card-header-text;
}
.header .title-text.over-image {
position: absolute;
bottom: 0px;
--paper-card-header-image-text;
}
:host ::slotted(.card-content) {
padding: 16px;
position:relative;
--paper-card-content;
}
:host ::slotted(.card-actions) {
border-top: 1px solid #e8e8e8;
padding: 5px 16px;
position:relative;
--paper-card-actions;
}
:host([elevation="1"]) {
--paper-material-elevation-1;
}
:host([elevation="2"]) {
--paper-material-elevation-2;
}
:host([elevation="3"]) {
--paper-material-elevation-3;
}
:host([elevation="4"]) {
--paper-material-elevation-4;
}
:host([elevation="5"]) {
--paper-material-elevation-5;
}
</style>
<div class="header">
<iron-image hidden\$="[[!image]]" aria-hidden\$="[[_isHidden(image)]]" src="[[image]]" alt="[[alt]]" placeholder="[[placeholderImage]]" preload="[[preloadImage]]" fade="[[fadeImage]]"></iron-image>
<div hidden\$="[[!heading]]" class\$="title-text [[_computeHeadingClass(image)]]">[[heading]]</div>
</div>
<slot></slot>
`,is:"paper-card",properties:{heading:{type:String,value:"",observer:"_headingChanged"},image:{type:String,value:""},alt:{type:String},preloadImage:{type:Boolean,value:!1},fadeImage:{type:Boolean,value:!1},placeholderImage:{type:String,value:null},elevation:{type:Number,value:1,reflectToAttribute:!0},animatedShadow:{type:Boolean,value:!1},animated:{type:Boolean,reflectToAttribute:!0,readOnly:!0,computed:"_computeAnimated(animatedShadow)"}},_isHidden:function(e){return e?"false":"true"},_headingChanged:function(e){var t=this.getAttribute("heading"),a=this.getAttribute("aria-label");"string"==typeof a&&a!==t||this.setAttribute("aria-label",e)},_computeHeadingClass:function(e){return e?" over-image":""},_computeAnimated:function(e){return e}});var r=a(28426),l=a(66386),p=a(1265);a(3426);class n extends((0,p.Z)(r.H3)){static get template(){return i.d`
<style include="ha-style">
paper-card {
position: fixed;
padding: 8px 0;
bottom: 16px;
right: 16px;
}
.card-content {
color: var(--primary-text-color);
}
.card-actions {
text-align: right;
border-top: 0;
margin-right: -4px;
}
:host(.small) paper-card {
bottom: 0;
left: 0;
right: 0;
}
</style>
<paper-card elevation="4">
<div class="card-content">[[localize('ui.auth_store.ask')]]</div>
<div class="card-actions">
<mwc-button on-click="_done"
>[[localize('ui.auth_store.decline')]]</mwc-button
>
<mwc-button raised on-click="_save"
>[[localize('ui.auth_store.confirm')]]</mwc-button
>
</div>
</paper-card>
`}static get properties(){return{hass:Object}}ready(){super.ready(),this.classList.toggle("small",window.innerWidth<600)}_save(){(0,l.ed)(),this._done()}_done(){const e=this.shadowRoot.querySelector("paper-card");e.style.transition="bottom .25s",e.style.bottom=`-${e.offsetHeight+8}px`,setTimeout((()=>this.parentNode.removeChild(this)),300)}}customElements.define("ha-store-auth-card",n)},1265:(e,t,a)=>{"use strict";a.d(t,{Z:()=>i});const i=(0,a(76389).o)((e=>class extends e{static get properties(){return{hass:Object,localize:{type:Function,computed:"__computeLocalize(hass.localize)"}}}__computeLocalize(e){return e}}))},3426:(e,t,a)=>{"use strict";a(21384);var i=a(11654);const o=document.createElement("template");o.setAttribute("style","display: none;"),o.innerHTML=`<dom-module id="ha-style">\n <template>\n <style>\n ${i.Qx.cssText}\n </style>\n </template>\n</dom-module>`,document.head.appendChild(o.content)}}]);
//# sourceMappingURL=chunk.d228c1f41d58ca5079d7.js.map