Merge pull request #322 from dermotduffy/card-mod

Add `card-mod` support

README.md

@@ -1202,6 +1202,37 @@ elements:
 
 <a name="card-updates"></a>
 
+### Using `card-mod` to style the card
+
+This card allows the use of
+[card-mod](https://github.com/thomasloven/lovelace-card-mod) to style arbitrary
+card contents. `card-mod` can be complex to use and relies on the underlying
+internal DOM structure to style elements -- as such, while its use is possible
+it's not officially supported and no attempt is made to preserve backwards
+compatability of the internal DOM between any versions. It'll look good, but you're on your own!
+
+<details>
+  <summary>Expand: Use card-mod to style a Picture elements label</summary>
+
+This example changes the color and removes the padding around a [Picture
+Elements state
+label](https://www.home-assistant.io/lovelace/picture-elements/#state-label).
+
+```yaml
+[...]
+card_mod:
+  style:
+    frigate-card-elements $:
+      hui-state-label-element $: |
+        div {
+          padding: 0px !important;
+          color: blue;
+        }
+```
+</details>
+
+<a name="card-updates"></a>
+
 ## Card Refreshes
 
 Four sets of flags govern when the card will automatically refresh in the

src/card.ts

@@ -130,11 +130,15 @@ export class FrigateCard extends LitElement {
   @property({ attribute: false })
   protected _hass?: HomeAssistant & ExtendedHomeAssistant;
 
+  // The main base configuration object. For most usecases use getConfig() to
+  // get the correct configuration (which will return overrides as appropriate).
+  // This variable must be called `_config` or `config` to be compatible with
+  // card-mod.
   @state()
-  public _baseConfig!: FrigateCardConfig;
+  protected _config!: FrigateCardConfig;
 
   @state()
-  public _overriddenConfig?: FrigateCardConfig;
+  protected _overriddenConfig?: FrigateCardConfig;
 
   @property({ attribute: false })
   protected _view?: View;
@@ -231,8 +235,8 @@ export class FrigateCard extends LitElement {
     };
 
     const overriddenConfig = getOverriddenConfig(
-      this._baseConfig,
-      this._baseConfig.overrides,
+      this._config,
+      this._config.overrides,
       this._conditionState,
     ) as FrigateCardConfig;
 
@@ -598,7 +602,7 @@ export class FrigateCard extends LitElement {
       getLovelace().setEditMode(true);
     }
 
-    this._baseConfig = config;
+    this._config = config;
     this._cameras = undefined;
     this._view = undefined;
 
@@ -610,7 +614,7 @@ export class FrigateCard extends LitElement {
    * @returns A FrigateCardConfig.
    */
   protected _getConfig(): FrigateCardConfig {
-    return this._overriddenConfig || this._baseConfig;
+    return this._overriddenConfig || this._config;
   }
 
   protected _changeView(args?: { view?: View; resetMessage?: boolean }): void {
@@ -1229,15 +1233,15 @@ export class FrigateCard extends LitElement {
         // Note: Subtle difference in condition below vs the other views in order
         // to always render the live view for live.preload mode.
 
-        // Note: <frigate-card-live> uses the baseConfig rather than the
-        // overriden config, as it does it's own overriding as part of the
-        // camera carousel.
+        // Note: <frigate-card-live> uses the underlying _config rather than the
+        // overriden config (via getConfig), as it does it's own overriding as
+        // part of the camera carousel.
         this._getConfig().live.preload || (!this._message && this._view.is('live'))
           ? html`
               <frigate-card-live
                 .hass=${this._hass}
                 .view=${this._view}
-                .liveConfig=${this._baseConfig.live}
+                .liveConfig=${this._config.live}
                 .conditionState=${this._conditionState}
                 .liveOverrides=${getOverridesByKey(this._getConfig().overrides, 'live')}
                 .cameras=${this._cameras}

src/types.ts

@@ -759,6 +759,9 @@ export const frigateCardConfigSchema = z.object({
   // Configuration overrides.
   overrides: overridesSchema,
 
+  // Support for card_mod (https://github.com/thomasloven/lovelace-card-mod).
+  card_mod: z.unknown(),
+
   // Stock lovelace card config.
   type: z.string(),
   test_gui: z.boolean().optional(),