diff --git a/src/panels/lovelace/cards/hui-column-card.js b/src/panels/lovelace/cards/hui-column-card.js new file mode 100644 index 0000000000..24fce097c6 --- /dev/null +++ b/src/panels/lovelace/cards/hui-column-card.js @@ -0,0 +1,48 @@ +import createCardElement from '../common/create-card-element.js'; +import createErrorConfig from '../common/create-error-card-config.js'; + +class HuiColumnCard extends HTMLElement { + constructor() { + super(); + this._elements = []; + } + + getCardSize() { + return 7; + } + + set config(config) { + this._elements = []; + const root = this; + + while (root.lastChild) { + root.removeChild(root.lastChild); + } + + if (config && config.cards && Array.isArray(config.cards)) { + const elements = []; + config.cards.forEach(card => { + const element = createCardElement(card); + element.style.setProperty('margin', '4px'); + elements.push(element); + root.appendChild(element); + }); + elements[0].style.marginTop = '0'; + elements[(elements.length - 1)].style.marginBottom = '0'; + this._elements = elements; + + } else { + const error = 'Card config incorrect.'; + const element = createCardElement(createErrorConfig(error, config)); + root.appendChild(element); + } + } + + set hass(hass) { + this._elements.forEach(element => { + element.hass = hass; + }); + } +} + +customElements.define('hui-column-card', HuiColumnCard); diff --git a/src/panels/lovelace/common/create-card-element.js b/src/panels/lovelace/common/create-card-element.js index e5501046a6..85346f2cf5 100644 --- a/src/panels/lovelace/common/create-card-element.js +++ b/src/panels/lovelace/common/create-card-element.js @@ -1,6 +1,7 @@ import fireEvent from '../../../common/dom/fire_event.js'; import '../cards/hui-camera-preview-card.js'; +import '../cards/hui-column-card.js'; import '../cards/hui-entities-card.js'; import '../cards/hui-entity-filter-card.js'; import '../cards/hui-glance-card'; @@ -19,6 +20,7 @@ import createErrorCardConfig from './create-error-card-config.js'; const CARD_TYPES = [ 'camera-preview', + 'column', 'entities', 'entity-filter', 'entity-picture',