Adds error to shopinglist card editor if integration is not loaded (#4523)

* Adds error to shopinglist card edito if integration is not loaded

* localization

* Update src/translations/en.json

Co-Authored-By: Paulus Schoutsen <paulus@home-assistant.io>

Co-authored-by: Paulus Schoutsen <paulus@home-assistant.io>

src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts

@@ -1,5 +1,7 @@
 import {
   html,
+  CSSResult,
+  css,
   LitElement,
   TemplateResult,
   customElement,
@@ -14,6 +16,7 @@ import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { ShoppingListCardConfig } from "../../cards/types";
 
+import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import "../../components/hui-theme-select-editor";
 
 const cardConfigStruct = struct({
@@ -49,6 +52,15 @@ export class HuiShoppingListEditor extends LitElement
 
     return html`
       <div class="card-config">
+        ${!isComponentLoaded(this.hass, "shopping_list")
+          ? html`
+              <div class="error">
+                ${this.hass.localize(
+                  "ui.panel.lovelace.editor.card.shopping-list.integration_not_loaded"
+                )}
+              </div>
+            `
+          : ""}
         <paper-input
           .label="${this.hass.localize(
             "ui.panel.lovelace.editor.card.generic.title"
@@ -90,6 +102,14 @@ export class HuiShoppingListEditor extends LitElement
     }
     fireEvent(this, "config-changed", { config: this._config });
   }
+
+  static get styles(): CSSResult {
+    return css`
+      .error {
+        color: var(--google-red-500);
+      }
+    `;
+  }
 }
 
 declare global {

src/translations/en.json

@@ -1809,7 +1809,8 @@
               "graph_type": "Graph Type"
             },
             "shopping-list": {
-              "name": "Shopping List"
+              "name": "Shopping List",
+              "integration_not_loaded": "This card requires the `shopping_list` integration to be set up."
             },
             "thermostat": {
               "name": "Thermostat"