73 lines
1.8 KiB
HTML
73 lines
1.8 KiB
HTML
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
|
|
|
|
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
|
|
|
|
<link rel="import" href="../components/entity/state-info.html">
|
|
<link rel="import" href="../util/hass-mixins.html">
|
|
<link rel="import" href="../util/hass-util.html">
|
|
|
|
<dom-module id="state-card-display">
|
|
<template>
|
|
<style>
|
|
|
|
:host {
|
|
@apply(--layout-horizontal);
|
|
@apply(--layout-justified);
|
|
@apply(--layout-baseline);
|
|
}
|
|
|
|
state-info {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
.state {
|
|
@apply --paper-font-body1;
|
|
color: var(--primary-text-color);
|
|
margin-left: 16px;
|
|
text-align: right;
|
|
max-width: 40%;
|
|
flex: 0 0 auto;
|
|
}
|
|
.state.has-unit_of_measurement {
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|
|
|
|
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
|
<div class$='[[computeClassNames(stateObj)]]'>[[computeStateDisplay(localize, stateObj, language)]]</div>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<script>
|
|
/*
|
|
* @appliesMixin window.hassMixins.LocalizeMixin
|
|
*/
|
|
class StateCardDisplay extends window.hassMixins.LocalizeMixin(Polymer.Element) {
|
|
static get is() { return 'state-card-display'; }
|
|
|
|
static get properties() {
|
|
return {
|
|
hass: Object,
|
|
stateObj: Object,
|
|
inDialog: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
};
|
|
}
|
|
|
|
computeStateDisplay(localize, stateObj, language) {
|
|
return window.hassUtil.computeStateDisplay(localize, stateObj, language);
|
|
}
|
|
|
|
computeClassNames(stateObj) {
|
|
const classes = [
|
|
'state',
|
|
window.hassUtil.attributeClassNames(stateObj, ['unit_of_measurement']),
|
|
];
|
|
return classes.join(' ');
|
|
}
|
|
}
|
|
customElements.define(StateCardDisplay.is, StateCardDisplay);
|
|
</script>
|