diff --git a/src/client/components/FlagInput.ts b/src/client/components/FlagInput.ts
index e4334d27f..27e31bab7 100644
--- a/src/client/components/FlagInput.ts
+++ b/src/client/components/FlagInput.ts
@@ -1,230 +1,231 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import Countries from "../data/countries.json";
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import Countries from '../data/countries.json';
-const flagKey: string = "flag";
+const flagKey: string = 'flag';
-@customElement("flag-input")
+@customElement('flag-input')
export class FlagInput extends LitElement {
- @state() private flag: string = "";
- @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;
- }
+ static styles = css`
+ .hidden {
+ display: none;
+ }
- .flag-container {
- display: flex;
- }
+ .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;
- }
+ .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;
- }
+ .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-modal {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ position: absolute;
+ top: 60px;
+ left: 0;
+ width: 560px;
+ height: 500px;
+ max-height: 50vh;
+ 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-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;
- }
+ .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 {
+ opacity: 0.7;
+ width: calc(100% / 4 - 15px);
+ text-align: center;
+ color: white;
+ cursor: pointer;
+ border: none;
+ background: none;
+ }
- .dropdown-item:hover {
- opacity: 1;
- }
+ .dropdown-item:hover {
+ opacity: 1;
+ }
- .country-flag {
- width: 100%;
- height: auto;
- }
+ .country-flag {
+ width: 100%;
+ height: auto;
+ }
- @media (max-width: 768px) {
- .flag-modal {
- left: 0px;
- width: calc(100% - 16px);
- height: 50vh;
- }
+ @media (max-width: 768px) {
+ .flag-modal {
+ left: 0px;
+ width: calc(100% - 16px);
+ height: 50vh;
+ }
- .dropdown-item {
- width: calc(100% / 3 - 15px);
- }
- }
- `;
+ .dropdown-item {
+ width: calc(100% / 3 - 15px);
+ }
+ }
+ `;
- private handleSearch(e: Event) {
- this.search = String((e.target as HTMLInputElement).value);
- }
+ 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 setFlag(flag: string) {
+ this.flag = flag;
+ this.showModal = false;
+ this.storeFlag(flag);
+ }
- public getCurrentFlag(): string {
- return this.flag;
- }
+ public getCurrentFlag(): string {
+ return this.flag;
+ }
- private getStoredFlag(): string {
- const storedFlag = localStorage.getItem(flagKey);
- if (storedFlag) {
- return storedFlag;
- }
- return "";
- }
+ private getStoredFlag(): string {
+ const storedFlag = localStorage.getItem(flagKey);
+ if (storedFlag) {
+ return storedFlag;
+ }
+ return '';
+ }
- private storeFlag(flag: string) {
- if (flag) {
- localStorage.setItem(flagKey, flag);
- } else if (flag === "") {
- localStorage.removeItem(flagKey);
- }
- }
+ private storeFlag(flag: string) {
+ if (flag) {
+ localStorage.setItem(flagKey, flag);
+ } else if (flag === '') {
+ localStorage.removeItem(flagKey);
+ }
+ }
- private dispatchFlagEvent() {
- this.dispatchEvent(
- new CustomEvent("flag-change", {
- detail: { flag: this.flag },
- bubbles: true,
- composed: true,
- })
- );
- }
+ 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();
- }
+ connectedCallback() {
+ super.connectedCallback();
+ this.flag = this.getStoredFlag();
+ this.dispatchFlagEvent();
+ }
- render() {
- return html`
-
- ${this.flag === ""
- ? html`
`
- : html`
(this.showModal = true)}
- />`}
- ${this.showModal
- ? html`
-
-
-
-
-
- ${Countries.filter(
- (country) =>
- country.name
- .toLowerCase()
- .includes(
- this.search.toLowerCase()
- ) ||
- country.code
- .toLowerCase()
- .includes(
- this.search.toLowerCase()
- )
- ).map(
- (country) => html`
-
- `
- )}
-
-
- `
- : ""}
-
+ ${this.flag === ''
+ ? html`
`
+ : html`
(this.showModal = true)}
+ />`}
+ ${this.showModal
+ ? html`
+
+
+
+
+
+ ${Countries.filter(
+ (country) =>
+ country.name
+ .toLowerCase()
+ .includes(
+ this.search.toLowerCase()
+ ) ||
+ country.code
+ .toLowerCase()
+ .includes(
+ this.search.toLowerCase()
+ )
+ ).map(
+ (country) => html`
+
+ `
+ )}
+
+
+ `
+ : ''}
+