From ce82e4a173158dc2f3edfaaf85173f7cb430fa5a Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sat, 5 Feb 2022 19:25:58 -0800
Subject: [PATCH 1/2] Add card-mod support.

---
 README.md    | 31 +++++++++++++++++++++++++++++++
 src/card.ts  | 24 ++++++++++++++----------
 src/types.ts |  3 +++
 3 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 0530a97e..58f5fff7 100644
--- a/README.md
+++ b/README.md
@@ -1202,6 +1202,37 @@ elements:
 
 <a name="card-updates"></a>
 
+### Using `card-mod` to style the card
+
+Frigate 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
diff --git a/src/card.ts b/src/card.ts
index dc77f99a..15709ce0 100644
--- a/src/card.ts
+++ b/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}
diff --git a/src/types.ts b/src/types.ts
index 15cc713c..c373f320 100644
--- a/src/types.ts
+++ b/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(),

From c835cfb36e26cf0beaed84350ee32dc19d5d5a36 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sat, 5 Feb 2022 19:27:41 -0800
Subject: [PATCH 2/2] Minor cleanup.

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 58f5fff7..48f2561d 100644
--- a/README.md
+++ b/README.md
@@ -1204,10 +1204,10 @@ elements:
 
 ### Using `card-mod` to style the card
 
-Frigate card allows the use of
+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
+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!