Add mod-card

README.md

@@ -18,7 +18,7 @@ Specifically, it looks for `style:` in any cards configuration, and applies the
 
 The basis of almost all lovelace cards is a `ha-card` element, so that's probably where you'd want to start.
 
-Note that some cards (`conditional`, `entity-filter`, `horizontal-stack` and `vertical-stack` as well as some custom cards, like `layout-card`, `auto-entities` and `state-switch` among others) do *not* have a `ha-card` element, and `card-mod` will thus **not** work for those. There is a workaround, though. See FAQ below.
+Note that some cards (`conditional`, `entity-filter`, `horizontal-stack` and `vertical-stack` as well as some custom cards, like `layout-card`, `auto-entities` and `state-switch` among others) do *not* have a `ha-card` element, and `card-mod` will thus **not** work for those. There is a workaround, though. See [mod-card below](#mod-card).
 
 ---
 
@@ -183,6 +183,28 @@ entity: alarm_control_panel.alarm
 
 ![advanced](https://user-images.githubusercontent.com/1299821/59151780-59732c80-8a39-11e9-9f19-34d3e0dbd8e9.png)
 
+## Mod-card
+There are some cards where card-mod just won't work.
+Those cards often are not really *cards* at all, but change how other cards work. Examples include: `conditional`, `entity-filter`, `horizontal-stack` and `vertical-stack` as well as some custom cards, like `layout-card`, `auto-entities` and `state-switch` among others.
+
+For those cases, a special `mod-card` is provided as a workaround:
+
+```yaml
+type: custom:mod-card
+style: |
+  ha-card {
+    border: 1px solid green;
+  }
+card:
+  type: vertical-stack
+  cards:
+    - type: light
+      entity: light.bed_light
+    - type: light
+      entity: light.kitchen_lights
+```
+![mod-card](https://user-images.githubusercontent.com/1299821/68621707-b71c1100-04d0-11ea-8473-965dbd77b762.png)
+
 # Bonus function - entities card tap\_action
 With card-mod installed, you will be able to use `tap_action` with rows in your entities cards:
 
@@ -220,6 +242,8 @@ entities:
             - light.bed_light
 ```
 
+
+
 # FAQ
 
 ### How do I convert my old card-modder configuration to card-mod?
@@ -245,36 +269,5 @@ For rows in an entities card, you replace `ha-card` with `:host` as described ab
 
 Note that some cards can't be modded with card-mod. See below.
 
-### Why won't this work for some cards?
-The cards this doesn't work for often are not really *cards* at all, but change how other cards work. Examples include: `conditional`, `entity-filter`, `horizontal-stack` and `vertical-stack` as well as some custom cards, like `layout-card`, `auto-entities` and `state-switch` among others.
-
-Common for all those are that they have no `ha-card` element. A workaround for this is to put the card you want inside an entities card and mod that. For built-in cards, this can be done by setting the type of an entities row to `custom:hui-<type>-card`:
-
-```yaml
-type: entities
-style: |
-  ha-card {
-    --ha-card-background: red;
-    box-shadow: none;
-    background: none;
-  }
-  .card-content {
-    padding: 0
-  }
-entities:
-  - type: custom:hui-horizontal-stack-card
-    cards:
-      - type: entities
-        entities:
-          - light.bed_light
-          - light.kitchen_lights
-          - light.ceiling_lights
-      - type: glance
-        entities:
-          - light.bed_light
-          - light.kitchen_lights
-          - light.ceiling_lights
-```
-
 ---
 <a href="https://www.buymeacoffee.com/uqD6KHCdJ" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/white_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>

src/main.js

@@ -1,4 +1,5 @@
-import "./card-mod.js";
+import "./card-mod";
-import "./ha-card.js";
+import "./ha-card";
-import "./hui-entities-card.js";
+import "./hui-entities-card";
-import "./hui-glance-card.js";
+import "./hui-glance-card";
+import "./mod-card"

src/mod-card.js

@@ -0,0 +1,39 @@
+import { LitElement, html, css} from "card-tools/src/lit-element";
+import "card-tools/src/card-maker";
+
+const NO_STYLE = `
+ha-card {
+  background: none;
+  box-shadow: none;
+}`;
+
+class ModCard extends LitElement {
+
+    setConfig(config) {
+        this._config = config;
+        if(!config.style === undefined)
+        {
+          this._config.style = NO_STYLE;
+        } else if (typeof(config.style) === "string") {
+          this._config.style = NO_STYLE + config.style;
+        } else if (config.style["."]) {
+          this._config.style["."] = NO_STYLE + config.style["."];
+        } else {
+          this._config.style["."] = NO_STYLE;
+        }
+
+    }
+
+    render() {
+        return html`
+          <ha-card modcard>
+          <card-maker
+            .config=${this._config.card}
+            .hass=${this.hass}
+          ></card-maker>
+          </ha-card>
+        `;
+    }
+}
+
+customElements.define("mod-card", ModCard);