Input-field component (#1513)

* added input component, renamed materialModule to legacyMaterialModule * added status chips and other things - TODO * native input option * added error case and reactive form module example * tweaks and disable state * updated input-field-component, added case for highlight * added tests for input field * added note about icon library
OurPlanscape · May 17, 2024 · 01a9c8a · 01a9c8a
1 parent b18b505
commit 01a9c8a
Show file tree

Hide file tree

Showing 55 changed files with 1,022 additions and 92 deletions.
diff --git a/src/interface/src/app/account/account.module.ts b/src/interface/src/app/account/account.module.ts
@@ -10,7 +10,7 @@ import { DetailsComponent } from './details/details.component';
 import { EditUserFieldComponent } from './edit-user-field/edit-user-field.component';
 import { FeaturesModule } from '../features/features.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MaterialModule } from '../material/material.module';
+import { LegacyMaterialModule } from '../material/legacy-material.module';
 import { MenuComponent } from './menu/menu.component';
 import { SharedModule } from '@shared';
 
@@ -29,7 +29,7 @@ import { SharedModule } from '@shared';
     CommonModule,
     FeaturesModule,
     FormsModule,
-    MaterialModule,
+    LegacyMaterialModule,
     ReactiveFormsModule,
     SharedModule,
   ],

diff --git a/src/interface/src/app/account/delete-account-dialog/delete-account-dialog.component.spec.ts b/src/interface/src/app/account/delete-account-dialog/delete-account-dialog.component.spec.ts
@@ -10,7 +10,7 @@ import {
 } from '@angular/material/legacy-dialog';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
-import { MaterialModule } from 'src/app/material/material.module';
+import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { AuthService } from '@services';
 
 import { DeleteAccountDialogComponent } from './delete-account-dialog.component';
@@ -51,7 +51,7 @@ describe('DeleteAccountDialogComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         FormsModule,
-        MaterialModule,
+        LegacyMaterialModule,
         ReactiveFormsModule,
         NoopAnimationsModule,
       ],

diff --git a/src/interface/src/app/account/delete-account/delete-account.component.spec.ts b/src/interface/src/app/account/delete-account/delete-account.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DeleteAccountComponent } from './delete-account.component';
-import { MaterialModule } from '../../material/material.module';
+import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MockProvider } from 'ng-mocks';
 import { AuthService } from '@services';
@@ -14,7 +14,7 @@ describe('DeleteAccountComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [DeleteAccountComponent],
-      imports: [MaterialModule, MatDialogModule],
+      imports: [LegacyMaterialModule, MatDialogModule],
       providers: [MockProvider(AuthService), MockProvider(Router)],
     }).compileComponents();
 

diff --git a/src/interface/src/app/account/edit-user-field/edit-user-field.component.spec.ts b/src/interface/src/app/account/edit-user-field/edit-user-field.component.spec.ts
@@ -8,7 +8,7 @@ import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatLegacyButtonHarness as MatButtonHarness } from '@angular/material/legacy-button/testing';
 import { of } from 'rxjs';
-import { MaterialModule } from '../../material/material.module';
+import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('EditFieldComponent', () => {
@@ -20,7 +20,11 @@ describe('EditFieldComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [EditUserFieldComponent],
       providers: [MockProvider(AuthService)],
-      imports: [ReactiveFormsModule, MaterialModule, NoopAnimationsModule],
+      imports: [
+        ReactiveFormsModule,
+        LegacyMaterialModule,
+        NoopAnimationsModule,
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(EditUserFieldComponent);

diff --git a/src/interface/src/app/app.module.ts b/src/interface/src/app/app.module.ts
@@ -24,7 +24,8 @@ import { HomeComponent } from './home/home.component';
 import { JwtInterceptor, WINDOW_PROVIDERS } from '@services';
 import { MapModule } from './map/map.module';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MaterialModule } from './material/material.module';
+
+import { LegacyMaterialModule } from './material/legacy-material.module';
 
 import { NgxMaskModule } from 'ngx-mask';
 import { PlanTableComponent } from './home/plan-table/plan-table.component';
@@ -58,7 +59,7 @@ import { DeleteDialogComponent } from './standalone/delete-dialog/delete-dialog.
       headerName: 'X-CSRFTOKEN',
     }),
     LayoutModule,
-    MaterialModule,
+    LegacyMaterialModule,
     NgxGoogleAnalyticsModule.forRoot(environment.google_analytics_id),
     NgxGoogleAnalyticsRouterModule,
     RouterModule,

diff --git a/src/interface/src/app/home/plan-table/plan-table.component.spec.ts b/src/interface/src/app/home/plan-table/plan-table.component.spec.ts
@@ -7,7 +7,7 @@ import { FeaturesModule } from '../../features/features.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MOCK_PLAN } from '@services/mocks';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MaterialModule } from 'src/app/material/material.module';
+import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { MockComponent } from 'ng-mocks';
 import { Plan } from '@types';
 import { PlanTableComponent } from './plan-table.component';
@@ -43,7 +43,7 @@ describe('PlanTableComponent', () => {
       imports: [
         BrowserAnimationsModule,
         FormsModule,
-        MaterialModule,
+        LegacyMaterialModule,
         ReactiveFormsModule,
         FeaturesModule,
       ],

diff --git a/src/interface/src/app/home/planning-areas/planning-areas.component.spec.ts b/src/interface/src/app/home/planning-areas/planning-areas.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PlanningAreasComponent } from './planning-areas.component';
-import { MaterialModule } from '../../material/material.module';
+import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
 describe('PlanningAreasComponent', () => {
@@ -11,7 +11,7 @@ describe('PlanningAreasComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [PlanningAreasComponent],
-      imports: [MaterialModule],
+      imports: [LegacyMaterialModule],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
 

diff --git a/src/interface/src/app/home/share-plan-dialog/share-plan-dialog.component.spec.ts b/src/interface/src/app/home/share-plan-dialog/share-plan-dialog.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SharePlanDialogComponent } from './share-plan-dialog.component';
 import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
-import { MaterialModule } from '../../material/material.module';
+import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { MockComponents, MockProvider } from 'ng-mocks';
 import {
   MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
@@ -32,7 +32,7 @@ describe('SharePlanDialogComponent', () => {
         SharePlanDialogComponent,
         MockComponents(ChipInputComponent, SectionLoaderComponent),
       ],
-      imports: [MaterialModule, MatSnackBarModule, NoopAnimationsModule],
+      imports: [LegacyMaterialModule, MatSnackBarModule, NoopAnimationsModule],
       providers: [
         MockProvider(PlanStateService, {
           getPlan: () => NEVER,

diff --git a/src/interface/src/app/map/invalid-link-dialog/invalid-link-dialog.component.spec.ts b/src/interface/src/app/map/invalid-link-dialog/invalid-link-dialog.component.spec.ts
@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { InvalidLinkDialogComponent } from './invalid-link-dialog.component';
 import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
-import { MaterialModule } from '../../material/material.module';
+import { LegacyMaterialModule } from '../../material/legacy-material.module';
 
 describe('InvalidLinkDialogComponent', () => {
   let component: InvalidLinkDialogComponent;
@@ -11,7 +11,7 @@ describe('InvalidLinkDialogComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [InvalidLinkDialogComponent],
-      imports: [MaterialModule],
+      imports: [LegacyMaterialModule],
       providers: [
         {
           provide: MatDialogRef,

diff --git a/src/interface/src/app/map/map-control-panel/condition-tree/condition-tree.component.spec.ts b/src/interface/src/app/map/map-control-panel/condition-tree/condition-tree.component.spec.ts
@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
-import { MaterialModule } from 'src/app/material/material.module';
+import { LegacyMaterialModule } from '../../../material/legacy-material.module';
 import { LayerInfoCardComponent } from './../../layer-info-card/layer-info-card.component';
 import { ConditionTreeComponent } from './condition-tree.component';
 import { defaultMapConfig } from '../../map.helper';
@@ -13,7 +13,7 @@ describe('ConditionTreeComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FormsModule, MaterialModule, NoopAnimationsModule],
+      imports: [FormsModule, LegacyMaterialModule, NoopAnimationsModule],
       declarations: [ConditionTreeComponent, LayerInfoCardComponent],
     }).compileComponents();
 

diff --git a/src/interface/src/app/map/map-control-panel/map-control-panel.component.spec.ts b/src/interface/src/app/map/map-control-panel/map-control-panel.component.spec.ts
@@ -7,7 +7,7 @@ import { MatLegacyCheckboxHarness as MatCheckboxHarness } from '@angular/materia
 import { MatLegacyRadioGroupHarness as MatRadioGroupHarness } from '@angular/material/legacy-radio/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
-import { MaterialModule } from 'src/app/material/material.module';
+import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { BaseLayerType, NONE_BOUNDARY_CONFIG } from '@types';
 import { LayerInfoCardComponent } from '../layer-info-card/layer-info-card.component';
 import { ConditionTreeComponent } from './condition-tree/condition-tree.component';
@@ -25,7 +25,7 @@ describe('MapControlPanelComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         FormsModule,
-        MaterialModule,
+        LegacyMaterialModule,
         NoopAnimationsModule,
         FeaturesModule,
       ],

diff --git a/src/interface/src/app/map/map.component.spec.ts b/src/interface/src/app/map/map.component.spec.ts
@@ -23,7 +23,7 @@ import 'leaflet.vectorgrid';
 import { BehaviorSubject, of } from 'rxjs';
 import * as shp from 'shpjs';
 
-import { MaterialModule } from '../material/material.module';
+import { LegacyMaterialModule } from '../material/legacy-material.module';
 import {
   AuthService,
   MapService,
@@ -154,7 +154,7 @@ describe('MapComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         FormsModule,
-        MaterialModule,
+        LegacyMaterialModule,
         BrowserAnimationsModule,
         HttpClientTestingModule,
         FeaturesModule,

diff --git a/src/interface/src/app/map/map.module.ts b/src/interface/src/app/map/map.module.ts
@@ -8,8 +8,8 @@ import { PlanCreateDialogComponent } from './plan-create-dialog/plan-create-dial
 import { ProjectCardComponent } from './project-card/project-card.component';
 import { SignInDialogComponent } from './sign-in-dialog/sign-in-dialog.component';
 import { SharedModule } from '@shared';
-import { MaterialModule } from '../material/material.module';
 import { StringifyMapConfigPipe } from './stringify-map-config.pipe';
+import { LegacyMaterialModule } from '../material/legacy-material.module';
 import { RegionDropdownComponent } from './region-dropdown/region-dropdown.component';
 import { MapConfigSummaryComponent } from './map-config-summary/map-config-summary.component';
 import { ConditionTreeComponent } from './map-control-panel/condition-tree/condition-tree.component';
@@ -37,7 +37,7 @@ import { InvalidLinkDialogComponent } from './invalid-link-dialog/invalid-link-d
   imports: [
     CommonModule,
     SharedModule,
-    MaterialModule,
+    LegacyMaterialModule,
     FormsModule,
     ReactiveFormsModule,
     FeaturesModule,

diff --git a/src/interface/src/app/map/outside-region-dialog/outside-region-dialog.component.spec.ts b/src/interface/src/app/map/outside-region-dialog/outside-region-dialog.component.spec.ts
@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { OutsideRegionDialogComponent } from './outside-region-dialog.component';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MaterialModule } from '../../material/material.module';
+import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { DialogModule } from '@angular/cdk/dialog';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
@@ -15,7 +15,7 @@ describe('OutsideRegionDialogComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         ReactiveFormsModule,
-        MaterialModule,
+        LegacyMaterialModule,
         DialogModule,
         NoopAnimationsModule,
       ],

diff --git a/src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.spec.ts b/src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.spec.ts
@@ -18,7 +18,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { PlanService, SessionService } from '@services';
 import { BehaviorSubject, of } from 'rxjs';
-import { MaterialModule } from '../../material/material.module';
+import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { DialogModule } from '@angular/cdk/dialog';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Region } from '@types';
@@ -54,7 +54,7 @@ describe('PlanCreateDialogComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         ReactiveFormsModule,
-        MaterialModule,
+        LegacyMaterialModule,
         DialogModule,
         NoopAnimationsModule,
       ],

diff --git a/src/interface/src/app/map/project-card/project-card.component.spec.ts b/src/interface/src/app/map/project-card/project-card.component.spec.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MaterialModule } from 'src/app/material/material.module';
+import { LegacyMaterialModule } from '../../material/legacy-material.module';
 
 import { ProjectCardComponent } from './project-card.component';
 
@@ -10,7 +10,7 @@ describe('ProjectCardComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CommonModule, MaterialModule],
+      imports: [CommonModule, LegacyMaterialModule],
       declarations: [ProjectCardComponent],
     }).compileComponents();
 

diff --git a/src/interface/src/app/map/region-dropdown/region-dropdown.component.spec.ts b/src/interface/src/app/map/region-dropdown/region-dropdown.component.spec.ts
@@ -8,7 +8,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { BehaviorSubject } from 'rxjs';
 import { AuthService, SessionService } from '@services';
 import { Region, User } from '@types';
-import { MaterialModule } from '../../material/material.module';
+import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { FeaturesModule } from '../../features/features.module';
 
 describe('RegionDropdownComponent', () => {
@@ -26,7 +26,7 @@ describe('RegionDropdownComponent', () => {
       setRegion: () => {},
     };
     await TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule, MaterialModule, FeaturesModule],
+      imports: [HttpClientTestingModule, LegacyMaterialModule, FeaturesModule],
       declarations: [RegionDropdownComponent],
       providers: [
         { provide: AuthService, useValue: mockAuthService },

diff --git a/...rface/src/app/material/material.module.ts → ...rc/app/material/legacy-material.module.ts b/...rface/src/app/material/material.module.ts → ...rc/app/material/legacy-material.module.ts
@@ -60,4 +60,4 @@ import { MatTreeModule } from '@angular/material/tree';
     MatTreeModule,
   ],
 })
-export class MaterialModule {}
+export class LegacyMaterialModule {}
diff --git a/...rface/src/app/plan/create-scenarios/constraints-panel/constraints-panel.component.spec.ts b/...rface/src/app/plan/create-scenarios/constraints-panel/constraints-panel.component.spec.ts
@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MaterialModule } from 'src/app/material/material.module';
+import { LegacyMaterialModule } from '../../../material/legacy-material.module';
 import { ConstraintsPanelComponent } from './constraints-panel.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { FeaturesModule } from '../../../features/features.module';
@@ -20,7 +20,7 @@ describe('ConstraintsPanelComponent', () => {
       imports: [
         FormsModule,
         ReactiveFormsModule,
-        MaterialModule,
+        LegacyMaterialModule,
         NoopAnimationsModule,
         MatButtonToggleModule,
         FeaturesModule,

diff --git a/...app/plan/create-scenarios/identify-project-areas/identify-project-areas.component.spec.ts b/...app/plan/create-scenarios/identify-project-areas/identify-project-areas.component.spec.ts
@@ -3,7 +3,7 @@ import { MatLegacyRadioGroupHarness as MatRadioGroupHarness } from '@angular/mat
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MaterialModule } from 'src/app/material/material.module';
+import { LegacyMaterialModule } from '../../../material/legacy-material.module';
 import { MatLegacyButtonHarness as MatButtonHarness } from '@angular/material/legacy-button/testing';
 import {
   FormBuilder,
@@ -28,7 +28,7 @@ describe('IdentifyProjectAreasComponent', () => {
       imports: [
         FormsModule,
         ReactiveFormsModule,
-        MaterialModule,
+        LegacyMaterialModule,
         NoopAnimationsModule,
         SharedModule,
       ],

diff --git a/src/interface/src/app/plan/create-scenarios/set-priorities/set-priorities.component.spec.ts b/src/interface/src/app/plan/create-scenarios/set-priorities/set-priorities.component.spec.ts
@@ -5,7 +5,7 @@ import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatLegacyRadioGroupHarness as MatRadioGroupHarness } from '@angular/material/legacy-radio/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { BehaviorSubject, of } from 'rxjs';
-import { MaterialModule } from 'src/app/material/material.module';
+import { LegacyMaterialModule } from '../../../material/legacy-material.module';
 import { SharedModule } from '@shared';
 import {
   ColormapConfig,
@@ -97,7 +97,7 @@ describe('SetPrioritiesComponent', () => {
       imports: [
         BrowserAnimationsModule,
         FormsModule,
-        MaterialModule,
+        LegacyMaterialModule,
         ReactiveFormsModule,
         SharedModule,
       ],

diff --git a/src/interface/src/app/plan/create-scenarios/tooltips/scenario-tooltip.component.spec.ts b/src/interface/src/app/plan/create-scenarios/tooltips/scenario-tooltip.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ScenarioTooltipComponent } from './scenario-tooltip.component';
-import { MaterialModule } from '../../../material/material.module';
+import { LegacyMaterialModule } from '../../../material/legacy-material.module';
 
 describe('TooltipsComponent', () => {
   let component: ScenarioTooltipComponent;
@@ -10,7 +10,7 @@ describe('TooltipsComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ScenarioTooltipComponent],
-      imports: [MaterialModule],
+      imports: [LegacyMaterialModule],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ScenarioTooltipComponent);