- {{error}}
+@if ((errors$ | async); as errors) {
+ @if (showMessages) {
+
+ @for (error of errors; track error) {
+
+ {{error}}
-
-
close
-
+ }
+
close
-
-
+ }
+}
diff --git a/src/app/shared/messages/messages.component.ts b/src/app/shared/messages/messages.component.ts
index caa443b..42a27ce 100644
--- a/src/app/shared/messages/messages.component.ts
+++ b/src/app/shared/messages/messages.component.ts
@@ -4,9 +4,10 @@ import {tap} from 'rxjs/operators';
import {MessagesService} from './messages.service';
@Component({
- selector: 'messages',
- templateUrl: './messages.component.html',
- styleUrls: ['./messages.component.css']
+ selector: 'messages',
+ templateUrl: './messages.component.html',
+ styleUrls: ['./messages.component.css'],
+ standalone: false
})
export class MessagesComponent implements OnInit {
diff --git a/src/app/shared/pipes/safe-url.pipe.ts b/src/app/shared/pipes/safe-url.pipe.ts
index d419af7..cb2fa9a 100644
--- a/src/app/shared/pipes/safe-url.pipe.ts
+++ b/src/app/shared/pipes/safe-url.pipe.ts
@@ -2,7 +2,8 @@ import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer} from "@angular/platform-browser";
@Pipe({
- name: 'safeUrl'
+ name: 'safeUrl',
+ standalone: false
})
export class SafeUrlPipe implements PipeTransform {
diff --git a/src/main.ts b/src/main.ts
index f1344be..dac57ef 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, provideZoneChangeDetection } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
@@ -10,5 +10,5 @@ if (environment.production) {
enableProdMode();
}
-platformBrowserDynamic().bootstrapModule(AppModule)
+platformBrowserDynamic().bootstrapModule(AppModule, { applicationProviders: [provideZoneChangeDetection()], })
.catch(err => console.log(err));
diff --git a/src/polyfills.ts b/src/polyfills.ts
index 286ab2a..962a175 100644
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -34,9 +34,6 @@
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js'; // Run `npm install --save classlist.js`.
-
/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';
@@ -46,18 +43,10 @@
-/**
- * Required to support Web Animations `@angular/platform-browser/animations`.
- * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
- **/
-// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
-
-
-
/***************************************************************************************************
* Zone JS is required by Angular itself.
*/
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
diff --git a/src/styles.scss b/src/styles.scss
index 969c01b..750b82e 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,11 +1,19 @@
-/* You can add global styles to this file, and also import other style files */
-@import "~@angular/material/theming";
+@use '@angular/material' as mat;
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+
+@include mat.elevation-classes();
+@include mat.app-background();
+
+$dark-primary-text: rgba(black, 0.87);
+
+$light-primary-text: white;
-// Include non-theme styles for core.
-@include mat-core();
$mat-primary: (
50: #e3f2fd,
@@ -23,20 +31,20 @@ $mat-primary: (
A400: #2979ff,
A700: #2962ff,
contrast: (
- 50: $dark-primary-text,
- 100: $dark-primary-text,
- 200: $dark-primary-text,
- 300: $dark-primary-text,
- 400: $dark-primary-text,
- 500: $light-primary-text,
- 600: $light-primary-text,
- 700: $light-primary-text,
- 800: $light-primary-text,
- 900: $light-primary-text,
- A100: $dark-primary-text,
- A200: $light-primary-text,
- A400: $light-primary-text,
- A700: $light-primary-text,
+ 50: rgba(black, 0.87),
+ 100: rgba(black, 0.87),
+ 200: rgba(black, 0.87),
+ 300: rgba(black, 0.87),
+ 400: rgba(black, 0.87),
+ 500: white,
+ 600: white,
+ 700: white,
+ 800: white,
+ 900: white,
+ A100: rgba(black, 0.87),
+ A200: white,
+ A400: white,
+ A700: white,
)
);
@@ -56,29 +64,42 @@ $mat-accent: (
A400: #f50057,
A700: #c51162,
contrast: (
- 50: $dark-primary-text,
- 100: $dark-primary-text,
- 200: $dark-primary-text,
- 300: $dark-primary-text,
- 400: $dark-primary-text,
- 500: $light-primary-text,
- 600: $light-primary-text,
- 700: $light-primary-text,
- 800: $light-primary-text,
- 900: $light-primary-text,
- A100: $dark-primary-text,
- A200: $light-primary-text,
- A400: $light-primary-text,
- A700: $light-primary-text,
+ 50: rgba(black, 0.87),
+ 100: rgba(black, 0.87),
+ 200: rgba(black, 0.87),
+ 300: rgba(black, 0.87),
+ 400: rgba(black, 0.87),
+ 500: white,
+ 600: white,
+ 700: white,
+ 800: white,
+ 900: white,
+ A100: rgba(black, 0.87),
+ A200: white,
+ A400: white,
+ A700: white,
)
);
+$primary: mat.m2-define-palette($mat-primary, 500);
+
+$accent: mat.m2-define-palette($mat-accent, A200, A100, A400);
+
+$theme: mat.m2-define-light-theme((
+ color: (
+ primary: $primary,
+ accent: $accent,
+ ),
+ typography: mat.m2-define-typography-config(),
+ density: 0,
+));
-// Define a theme.
-$primary: mat-palette($mat-primary);
-$accent: mat-palette($mat-accent, A200, A100, A400);
+@include mat.all-component-themes($theme);
-$theme: mat-light-theme($primary, $accent);
+.mat-elevation-z7 {
+ box-shadow: 0 4px 5px -2px #0003, 0 7px 10px 1px #00000024, 0 2px 16px 1px #0000001f !important;
+}
-// Include all theme styles for the components.
-@include angular-material-theme($theme);
+.mat-elevation-z10 {
+ box-shadow: 0 6px 6px -3px #0003, 0 10px 14px 1px #00000024, 0 4px 18px 3px #0000001f !important;
+}
diff --git a/src/test.ts b/src/test.ts
index cd612ee..ed7e259 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -14,7 +14,6 @@ import {
// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare const __karma__: any;
-declare const require: any;
// Prevent Karma from running prematurely.
__karma__.loaded = function () {};
@@ -22,11 +21,9 @@ __karma__.loaded = function () {};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
- platformBrowserDynamicTesting()
+ platformBrowserDynamicTesting(), {
+ teardown: { destroyAfterEach: false }
+}
);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
// Finally, start Karma to run the tests.
__karma__.start();
diff --git a/tsconfig.json b/tsconfig.json
index 39d3ef8..3ffb70d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,20 +2,16 @@
"compileOnSave": false,
"compilerOptions": {
"module": "esnext",
+ "esModuleInterop": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
- "moduleResolution": "node",
- "emitDecoratorMetadata": true,
+ "moduleResolution": "bundler",
"experimentalDecorators": true,
- "target": "es2015",
+ "target": "ES2022",
"typeRoots": [
"node_modules/@types"
],
- "lib": [
- "es2017",
- "dom",
- "ES2017.object"
- ]
+ "useDefineForClassFields": false
}
}
diff --git a/tslint.json b/tslint.json
index d0556ec..3441ecc 100644
--- a/tslint.json
+++ b/tslint.json
@@ -11,6 +11,9 @@
"check-space"
],
"curly": true,
+ "deprecation": {
+ "severity": "warning"
+ },
"eofline": true,
"forin": true,
"import-blacklist": [
@@ -69,7 +72,6 @@
"no-trailing-whitespace": true,
"no-unnecessary-initializer": true,
"no-unused-expression": true,
- "no-use-before-declare": true,
"no-var-keyword": true,
"object-literal-sort-keys": false,
"one-line": [