Switch to standalone components

Author: Socolin

frontend/src/.browserslistrc

@@ -2,8 +2,6 @@
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries
 # For IE 9-11 support, please uncomment the last line of the file and adjust as needed
-> 0.5%
-last 2 versions
-Firefox ESR
+defaults
 not dead
-# IE 9-11
+> 0.2%

frontend/src/app/_app.theme.scss

@@ -1,12 +1,13 @@
+@use "sass:map";
 @use '@angular/material' as mat;
 
 @mixin global-theme($theme) {
     // Extract whichever individual palettes you need from the theme.
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
+    $primary: map.get($theme, primary);
+    $accent: map.get($theme, accent);
+    $warn: map.get($theme, warn);
+    $background: map.get($theme, background);
+    $foreground: map.get($theme, foreground);
 
     a {
         color: mat.m2-get-color-from-palette($primary, 500);

frontend/src/app/action/action.module.ts

@@ -14,8 +14,20 @@ import {Observable} from 'rxjs';
 import {ActiveStatsModifier, AutocompleteValue, MiscService} from '../shared';
 
 import {ItemTemplate} from '../item-template';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogClose } from '@angular/material/dialog';
 import {Effect} from '../effect';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { MatFormField, MatPrefix, MatSuffix } from '@angular/material/form-field';
+import { MatSelect } from '@angular/material/select';
+import { FormsModule } from '@angular/forms';
+import { MatOption } from '@angular/material/autocomplete';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { AutocompleteInputComponent } from '../shared/autocomplete-input.component';
+import { MatInput } from '@angular/material/input';
+import { StatModifierEditorComponent } from '../effect/stats-modifier-editor.component';
+import { ActiveEffectEditorComponent } from '../effect/active-effect-editor.component';
+import { MatCardActions } from '@angular/material/card';
+import { MatButton } from '@angular/material/button';
 
 export interface NhbkActionEditorDialogData {
     action?: NhbkAction
@@ -24,7 +36,7 @@ export interface NhbkActionEditorDialogData {
 @Component({
     styleUrls: ['./nhbk-action-editor-dialog.component.scss'],
     templateUrl: './nhbk-action-editor-dialog.component.html',
-    standalone: false
+    imports: [MatDialogTitle, CdkScrollable, MatDialogContent, MatFormField, MatSelect, FormsModule, MatOption, MatCheckbox, AutocompleteInputComponent, MatInput, MatPrefix, MatSuffix, StatModifierEditorComponent, ActiveEffectEditorComponent, MatCardActions, MatButton, MatDialogClose]
 })
 export class NhbkActionEditorDialogComponent {
     action: NhbkAction = NhbkActionFactory.createFromType(NhbkActionType.addEv, {ev: 1});

frontend/src/app/action/nhbk-action-editor-dialog.component.ts

@@ -10,12 +10,13 @@ import {EffectService} from '../effect';
 import {Effect} from '../effect';
 import {duration2text} from '../date/util';
 import {ActiveStatsModifier} from '../shared';
+import { ModifierPipe } from '../shared/modifier.pipe';
 
 @Component({
     selector: 'nhbk-action',
     styleUrls: ['./nhbk-action.component.scss'],
     templateUrl: './nhbk-action.component.html',
-    standalone: false
+    imports: [ModifierPipe]
 })
 export class NhbkActionComponent implements OnInit, OnChanges {
     @Input() action: NhbkAction;

frontend/src/app/action/nhbk-action.component.ts

@@ -1,12 +1,14 @@
 import {Component, OnInit} from '@angular/core';
 
 import {ThemeService} from './theme.service';
+import { RouterOutlet } from '@angular/router';
+import { QuickCommandComponent } from './quick-command/quick-command.component';
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
-    standalone: false
+    imports: [RouterOutlet, QuickCommandComponent]
 })
 export class AppComponent implements OnInit {
     public initialized = false;

frontend/src/app/app.component.ts

@@ -13,19 +13,19 @@ export const routes: Routes = [
     },
     {
         path: 'gm',
-        loadChildren: () => import('./home-gm/home-gm.module').then(m => m.GmHomeModule)
+        loadChildren: () => import('./home-gm/home-gm.routes').then(m => m.routes)
     },
     {
         path: 'database',
-        loadChildren: () => import('./home-database/home-database.module').then(m => m.DatabaseHomeModule)
+        loadChildren: () => import('./home-database/home-database.routes').then(m => m.routes)
     },
     {
         path: 'player',
-        loadChildren: () => import('./home-player/home-player.module').then(m => m.PlayerHomeModule)
+        loadChildren: () => import('./home-player/home-player.routes').then(m => m.routes)
     },
     {
         path: 'map',
-        loadChildren: () => import('./map/map.module').then(m => m.MapModule)
+        loadChildren: () => import('./map/map.routes').then(m => m.routes)
     },
     {
         path: 'login/:redirect',

frontend/src/app/app.module.ts

@@ -1,12 +1,13 @@
+@use "sass:map";
 @use '@angular/material' as mat;
 
 @mixin character-theme($theme) {
     // Extract whichever individual palettes you need from the theme.
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
+    $primary: map.get($theme, primary);
+    $accent: map.get($theme, accent);
+    $warn: map.get($theme, warn);
+    $background: map.get($theme, background);
+    $foreground: map.get($theme, foreground);
 
     .stat-details {
         .stat-detail-reason {
@@ -57,14 +58,14 @@
 
                 span {
                     &.game-icon-hearts {
-                        @if (map_get($theme, is-dark)) {
+                        @if (map.get($theme, is-dark)) {
                             color: #a01219;
                         } @else {
                             color: #ff0d26;
                         }
                     }
                     &.game-icon-abstract-061 {
-                        @if (map_get($theme, is-dark)) {
+                        @if (map.get($theme, is-dark)) {
                             color: #400a71;
                         } @else {
                             color: blueviolet;

frontend/src/app/app.routes.ts

@@ -1,11 +1,19 @@
 import {Component, ViewChild} from '@angular/core';
 import {ItemTemplate, ItemTemplateService} from '../item-template';
 import {ItemData} from '../item';
-import {MatDialogRef} from '@angular/material/dialog';
-import {MatStep} from '@angular/material/stepper';
+import { MatDialogRef, MatDialogClose } from '@angular/material/dialog';
+import { MatStep, MatStepper, MatStepLabel } from '@angular/material/stepper';
 import {forkJoin} from 'rxjs';
 import {IconDescription} from '../shared/icon.model';
 import {Guid} from '../api/shared/util';
+import { MatToolbar } from '@angular/material/toolbar';
+import { MatIconButton, MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatFormField } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { MatActionList, MatListItem } from '@angular/material/list';
+import { IconComponent } from '../shared/icon.component';
+import { FormsModule } from '@angular/forms';
 
 export interface AddItemDialogResult {
     itemTemplateId: Guid;
@@ -16,7 +24,7 @@ export interface AddItemDialogResult {
     selector: 'app-add-item-dialog',
     templateUrl: './add-item-dialog.component.html',
     styleUrls: ['../shared/full-screen-dialog.scss', './add-item-dialog.component.scss'],
-    standalone: false
+    imports: [MatToolbar, MatIconButton, MatDialogClose, MatIcon, MatStepper, MatStep, MatStepLabel, MatFormField, MatInput, MatActionList, MatListItem, IconComponent, FormsModule, MatButton]
 })
 export class AddItemDialogComponent {
     @ViewChild('searchStep', {static: true})