Added value-box to shared components

src/app/shared-components/shared-components.module.ts

@@ -4,6 +4,8 @@ import { SwitchComponent } from './switch/switch.component';
 import { UiButtonComponent } from './ui-button/ui-button.component';
 import { FullSpellcardComponent } from './full-spellcard/full-spellcard.component';
 import { IconButtonComponent } from './icon-button/icon-button.component';
+import { ValueBoxComponent } from './value-box/value-box.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -11,13 +13,16 @@ import { IconButtonComponent } from './icon-button/icon-button.component';
     UiButtonComponent,
     FullSpellcardComponent,
     IconButtonComponent,
+    ValueBoxComponent,
   ],
-  imports: [CommonModule],
+  imports: [CommonModule, FormsModule],
   exports: [
     SwitchComponent,
     UiButtonComponent,
     FullSpellcardComponent,
     IconButtonComponent,
+    ValueBoxComponent,
+    FormsModule,
   ],
 })
 export class SharedComponentsModule {}

src/app/shared-components/value-box/value-box.component.html

@@ -0,0 +1,14 @@
+<div class="container">
+  @if(isInput){
+  <input
+    [(ngModel)]="value"
+    (ngModelChange)="onChange($event)"
+    (blur)="onTouched()"
+    id="input"
+    type="number"
+  />
+  } @else {
+  <div class="value" id="input">{{ value }}</div>
+  }
+  <label for="input">{{ label }}</label>
+</div>

src/app/shared-components/value-box/value-box.component.scss

@@ -0,0 +1,29 @@
+.container {
+    max-width: 5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+input,
+.value {
+    width: 3.25rem;
+    height: 2.375rem;
+    font-size: 1.5rem;
+    text-align: center;
+    border-radius: 10px;
+    border: none;
+    box-shadow: var(--shadow);
+    background-color: white;
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+}
+
+label {
+    text-align: center;
+}

src/app/shared-components/value-box/value-box.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ValueBoxComponent } from './value-box.component';
+
+describe('ValueBoxComponent', () => {
+  let component: ValueBoxComponent;
+  let fixture: ComponentFixture<ValueBoxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ValueBoxComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ValueBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared-components/value-box/value-box.component.ts

@@ -0,0 +1,35 @@
+import { Component, forwardRef, Input } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'value-box',
+  templateUrl: './value-box.component.html',
+  styleUrl: './value-box.component.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ValueBoxComponent),
+      multi: true,
+    },
+  ],
+})
+export class ValueBoxComponent {
+  public value: any;
+  @Input() label!: string;
+  @Input() isInput: boolean = false;
+
+  onChange: any = () => {};
+  onTouched: any = () => {};
+
+  writeValue(value: any): void {
+    this.value = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+}