From 25ce975b3b26953349bf63f7a18959135ab6d6f4 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Fri, 17 Dec 2021 20:46:52 -0800
Subject: [PATCH] Add style support.

---
 src/components/menu.ts    | 31 ++++++++++++++++++-------------
 src/components/submenu.ts | 10 +++++++++-
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/components/menu.ts b/src/components/menu.ts
index 7a3a7c08..d3398512 100644
--- a/src/components/menu.ts
+++ b/src/components/menu.ts
@@ -64,7 +64,10 @@ export class FrigateCardMenu extends LitElement {
    * @param ev The action event.
    * @param button The button configuration.
    */
-  protected _actionHandler(ev: CustomEvent<{action: string, config?: Actions}>, config?: Actions): void {
+  protected _actionHandler(
+    ev: CustomEvent<{ action: string; config?: Actions }>,
+    config?: Actions,
+  ): void {
     if (!ev) {
       return;
     }
@@ -145,10 +148,18 @@ export class FrigateCardMenu extends LitElement {
    * @returns A rendered template or void.
    */
   protected _renderButton(button: MenuButton): TemplateResult | void {
+    if (button.type == 'custom:frigate-card-menu-submenu') {
+      return html` <frigate-card-submenu
+        .submenu=${button}
+        @action=${this._actionHandler.bind(this)}
+      >
+      </frigate-card-submenu>`;
+    }
+
     let state: HassEntity | null = null;
     let title = button.title;
     let icon = button.icon;
-    let style = ('style' in button ? button.style : {}) || {};
+    let style = button.style || {};
 
     if (icon == FRIGATE_BUTTON_MENU_ICON) {
       icon =
@@ -180,15 +191,6 @@ export class FrigateCardMenu extends LitElement {
       button: true,
     };
 
-    if (button.type == 'custom:frigate-card-menu-submenu') {
-      return html`
-        <frigate-card-submenu
-          .submenu=${button}
-          @action=${this._actionHandler.bind(this)}
-        >
-        </frigate-card-submenu>`;
-    }
-
     // TODO: Upon a safe distance from the release of HA 2021.11 these
     // attributes can be removed from the <ha-icon-button>.
     // - icon (replaced with the embedded <ha-icon>)
@@ -219,7 +221,10 @@ export class FrigateCardMenu extends LitElement {
     }
     const mode = this._menuConfig.mode;
 
-    if (mode == 'none' || !evaluateCondition(this._menuConfig.conditions, this.conditionState)) {
+    if (
+      mode == 'none' ||
+      !evaluateCondition(this._menuConfig.conditions, this.conditionState)
+    ) {
       return;
     }
 
@@ -252,7 +257,7 @@ export class FrigateCardMenu extends LitElement {
   /**
    * Get styles.
    */
-   static get styles(): CSSResultGroup {
+  static get styles(): CSSResultGroup {
     return unsafeCSS(menuStyle);
   }
 }
diff --git a/src/components/submenu.ts b/src/components/submenu.ts
index 2a46c063..58293024 100644
--- a/src/components/submenu.ts
+++ b/src/components/submenu.ts
@@ -6,6 +6,7 @@ import { MenuSubmenu } from '../types.js';
 
 import submenuStyle from '../scss/submenu.scss';
 import { hasAction } from 'custom-card-helpers';
+import { styleMap } from 'lit/directives/style-map';
 
 @customElement('frigate-card-submenu')
 export class FrigateCardSubmenu extends LitElement {
@@ -19,6 +20,7 @@ export class FrigateCardSubmenu extends LitElement {
     return html`
       <ha-button-menu corner="BOTTOM_LEFT">
         <ha-icon-button
+          style="${styleMap(this.submenu.style || {})}"
           class="button"
           slot="trigger"
           .label=${this.submenu.title || ''}
@@ -32,6 +34,7 @@ export class FrigateCardSubmenu extends LitElement {
         ${this.submenu.items.map(
           (item) => html`
             <mwc-list-item
+              style="${styleMap(item.style || {})}"
               graphic="icon"
               aria-label="${item.title || ''}"
               @action=${(ev) => {
@@ -45,7 +48,12 @@ export class FrigateCardSubmenu extends LitElement {
             >
               ${item.title || ''}
               ${item.icon
-                ? html` <ha-icon slot="graphic" icon="${item.icon}"> </ha-icon>`
+                ? html` <ha-icon
+                    style="${styleMap(item.style || {})}"
+                    slot="graphic"
+                    icon="${item.icon}"
+                  >
+                  </ha-icon>`
                 : ``}
             </mwc-list-item>
           `,