From ae3b386feb59c68c76b5dc8f8ec872da7518a192 Mon Sep 17 00:00:00 2001
From: Kyle Kemp <kyle@seiyria.com>
Date: Thu, 5 Sep 2024 15:10:45 -0500
Subject: [PATCH] fix build

---
 .../input-stem/input-stem.component.html      | 25 ++++++++
 .../input-stem/input-stem.component.scss      |  0
 .../input-stem/input-stem.component.ts        | 59 +++++++++++++++++++
 3 files changed, 84 insertions(+)
 create mode 100644 src/app/shared/components/input-stem/input-stem.component.html
 create mode 100644 src/app/shared/components/input-stem/input-stem.component.scss
 create mode 100644 src/app/shared/components/input-stem/input-stem.component.ts

diff --git a/src/app/shared/components/input-stem/input-stem.component.html b/src/app/shared/components/input-stem/input-stem.component.html
new file mode 100644
index 0000000..90c4033
--- /dev/null
+++ b/src/app/shared/components/input-stem/input-stem.component.html
@@ -0,0 +1,25 @@
+<div class="relative">
+  <ng-select class="form-control" [items]="values()" [(ngModel)]="stem" placeholder="Select STEM..."
+    (change)="change.emit($event?.value)" [compareWith]="itemCompare" [searchFn]="search">
+
+    <ng-template ng-label-tmp let-item="item">
+      <div class="relative">
+        <div class="text-white">
+          {{ item.value }}
+        </div>
+      </div>
+    </ng-template>
+
+    <ng-template ng-option-tmp let-item="item">
+      <div class="relative">
+        <div class="text-white">
+          {{ item.value }}
+        </div>
+
+        <p class="text-white text-sm italic whitespace-break-spaces">{{ item.desc }}</p>
+      </div>
+    </ng-template>
+  </ng-select>
+
+  <app-input-floating-label>{{ label() }}</app-input-floating-label>
+</div>
\ No newline at end of file
diff --git a/src/app/shared/components/input-stem/input-stem.component.scss b/src/app/shared/components/input-stem/input-stem.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/components/input-stem/input-stem.component.ts b/src/app/shared/components/input-stem/input-stem.component.ts
new file mode 100644
index 0000000..457e192
--- /dev/null
+++ b/src/app/shared/components/input-stem/input-stem.component.ts
@@ -0,0 +1,59 @@
+import {
+  Component,
+  computed,
+  inject,
+  input,
+  model,
+  OnInit,
+  output,
+} from '@angular/core';
+import { sortBy } from 'lodash';
+import { ISTEM } from '../../../../interfaces';
+import { ModService } from '../../../services/mod.service';
+
+@Component({
+  selector: 'app-input-stem',
+  templateUrl: './input-stem.component.html',
+  styleUrl: './input-stem.component.scss',
+})
+export class InputStemComponent implements OnInit {
+  private modService = inject(ModService);
+
+  public stem = model<ISTEM | undefined>();
+  public defaultValue = input<string>();
+  public label = input<string>('STEM');
+  public change = output<string>();
+
+  public values = computed(() => {
+    const mod = this.modService.mod();
+
+    return [
+      ...sortBy(
+        mod.stems.map((q) => ({
+          value: q._gameId,
+          desc: q.all.desc,
+        })),
+        'value'
+      ),
+    ];
+  });
+
+  ngOnInit() {
+    const defaultItem = this.defaultValue();
+    if (defaultItem) {
+      const foundItem = this.values().find((i) => i.value === defaultItem);
+      this.stem.set(foundItem as unknown as ISTEM);
+    }
+  }
+
+  public itemCompare(
+    itemA: { value: string; desc: string },
+    itemB: { value: string; desc: string }
+  ): boolean {
+    return itemA.value === itemB.value;
+  }
+
+  public search(term: string, item: { value: string }) {
+    return item.value.toLowerCase().includes(term.toLowerCase());
+  }
+}