- ${hasChildren
- ? html`
-
-
`
- : null}
- ${boxes.map((box, i) => {
- const { entity, extraSpacers } = box;
- const formattedState = formatState(box.state, this.config.round);
- const isNotPassthrough = box.config.type !== 'passthrough';
- const name = box.config.name || entity.attributes.friendly_name || '';
- const icon = box.config.icon || stateIcon(entity as HassEntity);
- const maxLabelH = box.size + spacerH - 1;
+ return html`
+
+ ${hasChildren
+ ? html`
+
+
`
+ : null}
+ ${boxes.map((box, i) => {
+ const { entity, extraSpacers } = box;
+ const formattedState = formatState(box.state, props.config.round);
+ const isNotPassthrough = box.config.type !== 'passthrough';
+ const name = box.config.name || entity.attributes.friendly_name || '';
+ const icon = box.config.icon || stateIcon(entity as HassEntity);
+ const maxLabelH = box.size + spacerH - 1;
- // reduce label size if it doesn't fit
- const labelStyle: Record
= { lineHeight: MIN_LABEL_HEIGHT + 'px' };
- const nameStyle: Record = {};
- if (maxLabelH < MIN_LABEL_HEIGHT) {
- const fontSize = maxLabelH / MIN_LABEL_HEIGHT;
- // labelStyle.maxHeight = maxLabelH + 'px';
- labelStyle.fontSize = `${fontSize}em`;
- labelStyle.lineHeight = `${fontSize}em`;
- }
- const numLines = name.split('\n').filter(v => v).length;
- if (numLines > 1) {
- nameStyle.whiteSpace = 'pre';
- if (labelStyle.fontSize) {
- nameStyle.fontSize = `${1 / numLines + 0.1}rem`;
- nameStyle.lineHeight = `${1 / numLines + 0.1}rem`;
- } else if (maxLabelH < MIN_LABEL_HEIGHT * numLines) {
- nameStyle.fontSize = `${(maxLabelH / MIN_LABEL_HEIGHT / numLines) * 1.1}em`;
- nameStyle.lineHeight = `${(maxLabelH / MIN_LABEL_HEIGHT / numLines) * 1.1}em`;
- }
+ // reduce label size if it doesn't fit
+ const labelStyle: Record = { lineHeight: MIN_LABEL_HEIGHT + 'px' };
+ const nameStyle: Record = {};
+ if (maxLabelH < MIN_LABEL_HEIGHT) {
+ const fontSize = maxLabelH / MIN_LABEL_HEIGHT;
+ // labelStyle.maxHeight = maxLabelH + 'px';
+ labelStyle.fontSize = `${fontSize}em`;
+ labelStyle.lineHeight = `${fontSize}em`;
+ }
+ const numLines = name.split('\n').filter(v => v).length;
+ if (numLines > 1) {
+ nameStyle.whiteSpace = 'pre';
+ if (labelStyle.fontSize) {
+ nameStyle.fontSize = `${1 / numLines + 0.1}rem`;
+ nameStyle.lineHeight = `${1 / numLines + 0.1}rem`;
+ } else if (maxLabelH < MIN_LABEL_HEIGHT * numLines) {
+ nameStyle.fontSize = `${(maxLabelH / MIN_LABEL_HEIGHT / numLines) * 1.1}em`;
+ nameStyle.lineHeight = `${(maxLabelH / MIN_LABEL_HEIGHT / numLines) * 1.1}em`;
}
+ }
- return html`
- ${i > 0 ? html`` : null}
- ${extraSpacers
- ? html``
- : null}
-
-
this.onTap(box)}
- @dblclick=${() => this.onDoubleTap(box)}
- @mouseenter=${() => this.onMouseEnter(box)}
- @mouseleave=${this.onMouseLeave}
- title=${formattedState + box.unit_of_measurement + ' ' + name}
- class=${this.highlightedEntities.includes(box.config) ? 'hl' : ''}
- >
- ${show_icons && isNotPassthrough
- ? html``
- : null}
-
-
- ${show_states && isNotPassthrough
- ? html`${formattedState}${show_units
- ? html`${box.unit_of_measurement}`
- : null}`
- : null}
- ${show_names && isNotPassthrough
- ? html` ${name}`
- : null}
-
+ return html`
+ ${i > 0 ? html`
` : null}
+ ${extraSpacers
+ ? html`
`
+ : null}
+
+
props.onTap(box)}
+ @dblclick=${() => props.onDoubleTap(box)}
+ @mouseenter=${() => props.onMouseEnter(box)}
+ @mouseleave=${props.onMouseLeave}
+ title=${formattedState + box.unit_of_measurement + ' ' + name}
+ class=${props.highlightedEntities.includes(box.config) ? 'hl' : ''}
+ >
+ ${show_icons && isNotPassthrough
+ ? html``
+ : null}
+
+
+ ${show_states && isNotPassthrough
+ ? html`${formattedState}${show_units
+ ? html`${box.unit_of_measurement}`
+ : null}`
+ : null}
+ ${show_names && isNotPassthrough
+ ? html` ${name}`
+ : null}
- ${extraSpacers
- ? html`
`
- : null}
- `;
- })}
-
- `;
- }
+
+ ${extraSpacers
+ ? html``
+ : null}
+ `;
+ })}
+
+ `;
}
-
-export default Section;