[Feat][UI/UX] Enhance coordinate input fields UI experience

 - below components converted to standalone component
   - new journey
   - page header
   - world map

src/app/app.module.ts

@@ -3,7 +3,6 @@ import {BrowserModule} from '@angular/platform-browser';
 
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
-import {WorldMapComponent} from './component/world-map/world-map.component';
 import {NgbDateAdapter, NgbModule} from "@ng-bootstrap/ng-bootstrap";
 import {SideNavbarComponent} from './component/side-navbar/side-navbar.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@@ -14,7 +13,6 @@ import {DashboardComponent} from './page/dashboard/dashboard.component';
 import {SearchComponent} from './page/search/search.component';
 import {GalleryComponent} from './page/gallery/gallery.component';
 import {WorkspaceComponent} from './page/workspace/workspace.component';
-import {PageHeaderComponent} from './component/page-header/page-header.component';
 import {HttpClientModule} from "@angular/common/http";
 import {MarkerPopupComponent} from './component/marker-popup/marker-popup.component';
 import {LocationComponent} from './page/location/location.component';
@@ -25,7 +23,6 @@ import {MatTabsModule} from "@angular/material/tabs";
 import {LocationCardComponent} from "./component/location-card/location-card.component";
 import {CloudinaryModule} from "@cloudinary/ng";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {NewJourneyComponent} from "./page/journeys/new-journey/new-journey.component";
 import {UpdateJourneyDetailsComponent} from "./page/workspace/update-journey-details/update-journey-details.component";
 import {
   MatStep,
@@ -74,24 +71,23 @@ import {
 } from "./page/journeys/edit-journey/edit-journey-image-details/edit-journey-images-details.component";
 import {MatBadge} from "@angular/material/badge";
 import {
-    EditJourneyVideosDetailsComponent
+  EditJourneyVideosDetailsComponent
 } from "./page/journeys/edit-journey/edit-journey-video-details/edit-journey-videos-details.component";
+import {PageHeaderComponent} from "./component/page-header/page-header.component";
+import {WorldMapComponent} from "./component/world-map/world-map.component";
 
 @NgModule({
   declarations: [
     AppComponent,
-    WorldMapComponent,
     SideNavbarComponent,
     HomeComponent,
     SearchJourneyComponent,
-    NewJourneyComponent,
     ViewJourneyComponent,
     EditJourneyComponent,
     DashboardComponent,
     SearchComponent,
     GalleryComponent,
     WorkspaceComponent,
-    PageHeaderComponent,
     MarkerPopupComponent,
     LocationComponent,
     MediaViewerComponent,
@@ -101,58 +97,60 @@ import {
     EditJourneyGeoDetailsComponent,
     EditJourneyImagesDetailsComponent
   ],
-    imports: [
-        BrowserModule,
-        NgbModule,
-        AppRoutingModule,
-        BrowserAnimationsModule,
-        MatButtonModule,
-        MatIconModule,
-        HttpClientModule,
-        MediaGalleryComponent,
-        MatTabsModule,
-        LocationCardComponent,
-        CloudinaryModule,
-        FormsModule,
-        UpdateJourneyDetailsComponent,
-        MatStepper,
-        MatStep,
-        MatStepLabel,
-        MatStepContent,
-        ReactiveFormsModule,
-        MatPaginator,
-        MatHeaderCell,
-        MatColumnDef,
-        MatCell,
-        MatProgressSpinnerModule,
-        MatTable,
-        MatSort,
-        MatHeaderRow,
-        MatRow,
-        MatRowDef,
-        MatCellDef,
-        MatHeaderCellDef,
-        MatHeaderRowDef,
-        MatSortHeader,
-        MatRipple,
-        MatDatepickerInput,
-        MatHint,
-        MatSuffix,
-        MatDatepickerToggle,
-        MatDatepicker,
-        MatChipGrid,
-        MatChipRow,
-        MatChipInput,
-        MatFormField,
-        MatChipRemove,
-        MatChip,
-        MatChipOption,
-        MatStepperNext,
-        MatStepperIcon,
-        FeedbackMessageComponent,
-        MatBadge,
-        EditJourneyVideosDetailsComponent
-    ],
+  imports: [
+    BrowserModule,
+    NgbModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MatButtonModule,
+    MatIconModule,
+    HttpClientModule,
+    MediaGalleryComponent,
+    MatTabsModule,
+    LocationCardComponent,
+    CloudinaryModule,
+    FormsModule,
+    UpdateJourneyDetailsComponent,
+    MatStepper,
+    MatStep,
+    MatStepLabel,
+    MatStepContent,
+    ReactiveFormsModule,
+    MatPaginator,
+    MatHeaderCell,
+    MatColumnDef,
+    MatCell,
+    MatProgressSpinnerModule,
+    MatTable,
+    MatSort,
+    MatHeaderRow,
+    MatRow,
+    MatRowDef,
+    MatCellDef,
+    MatHeaderCellDef,
+    MatHeaderRowDef,
+    MatSortHeader,
+    MatRipple,
+    MatDatepickerInput,
+    MatHint,
+    MatSuffix,
+    MatDatepickerToggle,
+    MatDatepicker,
+    MatChipGrid,
+    MatChipRow,
+    MatChipInput,
+    MatFormField,
+    MatChipRemove,
+    MatChip,
+    MatChipOption,
+    MatStepperNext,
+    MatStepperIcon,
+    FeedbackMessageComponent,
+    MatBadge,
+    EditJourneyVideosDetailsComponent,
+    PageHeaderComponent,
+    WorldMapComponent
+  ],
   providers: [
     {
       provide: LIGHTBOX_CONFIG, useValue: {
@@ -162,9 +160,7 @@ import {
     },
     {provide: NgbDateAdapter, useClass: JourneyDateAdapter}
   ],
-  exports: [
-    PageHeaderComponent
-  ],
+  exports: [],
   bootstrap: [AppComponent]
 })
 export class AppModule {

src/app/component/page-header/page-header.component.ts

@@ -3,7 +3,8 @@ import {PageInfo} from "../../model/page-info";
 
 @Component({
   selector: 'app-page-header',
-  templateUrl: './page-header.component.html'
+  templateUrl: './page-header.component.html',
+  standalone: true
 })
 export class PageHeaderComponent {
 

src/app/component/world-map/world-map.component.ts

@@ -32,7 +32,8 @@ L.Marker.prototype.options.icon = iconDefault;
 @Component({
   selector: 'app-world-map',
   templateUrl: './world-map.component.html',
-  styleUrls: ['./world-map.component.scss']
+  styleUrls: ['./world-map.component.scss'],
+  standalone: true
 })
 export class WorldMapComponent implements AfterViewInit {
   private elementRef: ElementRef = inject(ElementRef);

src/app/page/journeys/new-journey/new-journey.component.ts

@@ -2,16 +2,34 @@ import {Component} from '@angular/core';
 import {NEW_JOURNEY_PAGE_INFO} from "../../../model/page-info";
 import {Journey} from "../../../model/core/journey.model";
 import {JourneyService} from "../../../service/journey/journey.service";
-import {NgForm} from "@angular/forms";
+import {FormsModule, NgForm} from "@angular/forms";
 import {Router} from "@angular/router";
 import {COMMA, ENTER, SPACE} from "@angular/cdk/keycodes";
-import {MatChipInputEvent} from "@angular/material/chips";
+import {MatChipGrid, MatChipInput, MatChipInputEvent, MatChipRow} from "@angular/material/chips";
 import {debounceTime, distinctUntilChanged, map, Observable, OperatorFunction} from "rxjs";
+import {NgbInputDatepicker, NgbTypeahead} from "@ng-bootstrap/ng-bootstrap";
+import {MatIcon} from "@angular/material/icon";
+import {NgIf} from "@angular/common";
+import {PageHeaderComponent} from "../../../component/page-header/page-header.component";
+import {WorldMapComponent} from "../../../component/world-map/world-map.component";
 
 @Component({
   selector: 'app-new-journey',
   templateUrl: './new-journey.component.html',
-  styleUrl: './new-journey.component.scss'
+  styleUrl: './new-journey.component.scss',
+  imports: [
+    FormsModule,
+    NgbTypeahead,
+    MatChipGrid,
+    MatChipRow,
+    MatIcon,
+    MatChipInput,
+    NgIf,
+    NgbInputDatepicker,
+    PageHeaderComponent,
+    WorldMapComponent
+  ],
+  standalone: true
 })
 export class NewJourneyComponent {
   protected readonly NEW_JOURNEY_PAGE_INFO = NEW_JOURNEY_PAGE_INFO;
@@ -57,7 +75,7 @@ export class NewJourneyComponent {
 
   continue() {
     if (this.journey.id) {
-      this.router.navigate(['/journey', this.journey.id, 'edit']);
+      this.router.navigate(['/journey', this.journey.id, 'edit']).then();
     }
   }