From b8a743e745485702b229b33c6d3932ec5b153737 Mon Sep 17 00:00:00 2001
From: NewHappyRabbit <31893343+NewHappyRabbit@users.noreply.github.com>
Date: Tue, 11 Feb 2025 21:23:37 +0200
Subject: [PATCH] Added a connectedCallback

---
 src/client/components/FlagInput.ts | 244 +++++++++++++++--------------
 1 file changed, 130 insertions(+), 114 deletions(-)

diff --git a/src/client/components/FlagInput.ts b/src/client/components/FlagInput.ts
index 3f7013e24..d54e36728 100644
--- a/src/client/components/FlagInput.ts
+++ b/src/client/components/FlagInput.ts
@@ -6,129 +6,145 @@ const flagKey: string = "flag";
 
 @customElement("flag-input")
 export class FlagInput extends LitElement {
-    @state() private flag: string = this.getStoredFlag();
-    @state() private search: string = "";
-    @state() private showModal: boolean = false;
+  @state() private flag: string = "";
+  @state() private search: string = "";
+  @state() private showModal: boolean = false;
 
-    static styles = css`
-        .hidden {
-            display: none;
-        }
-
-        .flag-container {
-            display: flex;
-        }
-
-        .no-selected-flag {
-            position: absolute;
-            left: 8px;
-            top: 8px;
-            height: 50px;
-            border-radius: 0.75rem;
-            border: none;
-            background: none;
-            font-size: 1rem;
-            cursor: pointer;
-        }
-
-        .selected-flag {
-            width: 48px;
-            cursor: pointer;
-            position: absolute;
-            left: 24px;
-            top: 14px;
-            border: 1px solid black;
-        }
-
-        .flag-modal {
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
-            position: absolute;
-            top: 60px;
-            left: 0;
-            width: 560px;
-            height: 500px;
-            background-color: rgb(35 35 35 / 0.8);
-            -webkit-backdrop-filter: blur(12px);
-            backdrop-filter: blur(12px);
-            padding: 10px;
-            border-radius: 8px;
-        }
-
-        .flag-search {
-            height: 2rem;
-            border-radius: 8px;
-            border: none;
-            text-align: center;
-            font-size: 1.3rem;
-        }
-
-        .flag-dropdown {
-            overflow-y: auto;
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            gap: 1rem;
-        }
-
-        .dropdown-item {
-            opacity: 0.7;
-            width: calc(100% / 4 - 15px);
-            text-align: center;
-            color: white;
-            cursor: pointer;
-            border: none;
-            background: none;
-        }
-
-        .dropdown-item:hover {
-            opacity: 1;
-        }
-
-        .country-flag {
-            width: 100%;
-            height: auto;
-        }
-
-        @media (max-width: 768px) {
-            .flag-modal {
-                left: 0px;
-                width: calc(100% - 16px);
-                height: 50vh;
-            }
-
-            .dropdown-item {
-                width: calc(100% / 3 - 15px);
-            }
-        }
-    `;
-
-    private handleSearch(e: Event) {
-        this.search = String((e.target as HTMLInputElement).value);
+  static styles = css`
+    .hidden {
+      display: none;
     }
 
-    private setFlag(flag: string) {
-        this.flag = flag;
-        this.showModal = false;
-        this.storeFlag(flag);
+    .flag-container {
+      display: flex;
     }
 
-    private getStoredFlag(): string {
-        const storedFlag = localStorage.getItem(flagKey);
-        if (storedFlag) {
-            return storedFlag;
-        }
-        return "";
+    .no-selected-flag {
+      position: absolute;
+      left: 8px;
+      top: 8px;
+      height: 50px;
+      border-radius: 0.75rem;
+      border: none;
+      background: none;
+      font-size: 1rem;
+      cursor: pointer;
     }
 
-    private storeFlag(flag: string) {
-        if (flag) {
-            localStorage.setItem(flagKey, flag);
-        }
+    .selected-flag {
+      width: 48px;
+      cursor: pointer;
+      position: absolute;
+      left: 24px;
+      top: 14px;
+      border: 1px solid black;
     }
 
-    render() {
+    .flag-modal {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      position: absolute;
+      top: 60px;
+      left: 0;
+      width: 560px;
+      height: 500px;
+      background-color: rgb(35 35 35 / 0.8);
+      -webkit-backdrop-filter: blur(12px);
+      backdrop-filter: blur(12px);
+      padding: 10px;
+      border-radius: 8px;
+    }
+
+    .flag-search {
+      height: 2rem;
+      border-radius: 8px;
+      border: none;
+      text-align: center;
+      font-size: 1.3rem;
+    }
+
+    .flag-dropdown {
+      overflow-y: auto;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 1rem;
+    }
+
+    .dropdown-item {
+      opacity: 0.7;
+      width: calc(100% / 4 - 15px);
+      text-align: center;
+      color: white;
+      cursor: pointer;
+      border: none;
+      background: none;
+    }
+
+    .dropdown-item:hover {
+      opacity: 1;
+    }
+
+    .country-flag {
+      width: 100%;
+      height: auto;
+    }
+
+    @media (max-width: 768px) {
+      .flag-modal {
+        left: 0px;
+        width: calc(100% - 16px);
+        height: 50vh;
+      }
+
+      .dropdown-item {
+        width: calc(100% / 3 - 15px);
+      }
+    }
+  `;
+
+  private handleSearch(e: Event) {
+    this.search = String((e.target as HTMLInputElement).value);
+  }
+
+  private setFlag(flag: string) {
+    this.flag = flag;
+    this.showModal = false;
+    this.storeFlag(flag);
+  }
+
+  private getStoredFlag(): string {
+    const storedFlag = localStorage.getItem(flagKey);
+    if (storedFlag) {
+      return storedFlag;
+    }
+    return "";
+  }
+
+  private storeFlag(flag: string) {
+    if (flag) {
+      localStorage.setItem(flagKey, flag);
+    }
+  }
+
+  private dispatchFlagEvent() {
+    this.dispatchEvent(
+      new CustomEvent("flag-change", {
+        detail: { flag: this.flag },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.flag = this.getStoredFlag();
+    this.dispatchFlagEvent();
+  }
+
+  render() {
         return html`
             <div class="flag-container">
                 ${this.flag === ""