From 50300e2c9780252c8ac7e1fb670c63b3326cc572 Mon Sep 17 00:00:00 2001
From: Craig Doremus <cdoremus@gmail.com>
Date: Tue, 16 Apr 2024 20:02:59 -0400
Subject: [PATCH] Fixed Lit vscode errors

---
 components/wc/LitAlertWC.ts   |  4 ++++
 components/wc/MyLitMessage.ts | 12 ++++++++----
 static/wc/wc.esm.js           | 13 +++++++++++--
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/components/wc/LitAlertWC.ts b/components/wc/LitAlertWC.ts
index e96b057..bfb456b 100644
--- a/components/wc/LitAlertWC.ts
+++ b/components/wc/LitAlertWC.ts
@@ -6,6 +6,10 @@
 import { css, html, LitElement } from "https://esm.sh/lit@3.1.0";
 
 export class CustomAlert extends LitElement {
+  // Needed for TypeScript since it does not recognize TS properties
+  //  as class-level variables
+  icon = "";
+  theme = "";
   static get styles() {
     return css`
       :host {
diff --git a/components/wc/MyLitMessage.ts b/components/wc/MyLitMessage.ts
index 2e7c76b..2f8bbc7 100644
--- a/components/wc/MyLitMessage.ts
+++ b/components/wc/MyLitMessage.ts
@@ -1,11 +1,13 @@
 import { css, html, LitElement } from "https://esm.sh/lit@3.1.0";
 
-// @ts-ignore LSP does not recognize LitElement syntax
 export class MyLitMessage extends LitElement {
+  // Needed for TypeScript since it does not recognize TS properties
+  //   as class-level variables
+  message = "";
   // Properties are the component attributes
-  static get properties(): { message: string } {
+  static get properties() {
     return {
-      message: "",
+      message: { type: String, state: false },
     };
   }
   static get styles() {
@@ -20,7 +22,9 @@ export class MyLitMessage extends LitElement {
 
   render() {
     return html`
-    <p>The message: <span class="message">${this.message}</span></p>
+    <p>The message:
+      <span class="message">${this.message}</span>
+    </p>
     `;
   }
 }
diff --git a/static/wc/wc.esm.js b/static/wc/wc.esm.js
index 9676b84..c1ccb75 100644
--- a/static/wc/wc.esm.js
+++ b/static/wc/wc.esm.js
@@ -607,10 +607,13 @@ l2?.({ LitElement: t });
 
 // components/wc/MyLitMessage.ts
 var MyLitMessage = class extends t {
+  // Needed for TypeScript since it does not recognize TS properties
+  //   as class-level variables
+  message = "";
   // Properties are the component attributes
   static get properties() {
     return {
-      message: ""
+      message: { type: String, state: false }
     };
   }
   static get styles() {
@@ -624,7 +627,9 @@ var MyLitMessage = class extends t {
   }
   render() {
     return X`
-    <p>The message: <span class="message">${this.message}</span></p>
+    <p>The message:
+      <span class="message">${this.message}</span>
+    </p>
     `;
   }
 };
@@ -674,6 +679,10 @@ customElements.define(
 
 // components/wc/LitAlertWC.ts
 var CustomAlert = class extends t {
+  // Needed for TypeScript since it does not recognize TS properties
+  //  as class-level variables
+  icon = "";
+  theme = "";
   static get styles() {
     return v`
       :host {