From bb0bf3edb4f82e71a608def41eb5a351197ec3db Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Thu, 22 May 2025 09:16:02 +0300
Subject: [PATCH 01/22] Update dependencies

---
 package-lock.json | 1754 +++++++++++++++++++++++++--------------------
 package.json      |   32 +-
 2 files changed, 984 insertions(+), 802 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5e4c46a..54e64dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,38 +8,38 @@
       "name": "angular-template",
       "version": "0.0.0",
       "dependencies": {
-        "@angular/animations": "^19.2.10",
-        "@angular/common": "^19.2.10",
-        "@angular/compiler": "^19.2.10",
-        "@angular/core": "^19.2.10",
-        "@angular/forms": "^19.2.10",
-        "@angular/platform-browser": "^19.2.10",
-        "@angular/platform-browser-dynamic": "^19.2.10",
-        "@angular/router": "^19.2.10",
-        "rxjs": "~7.8.0",
+        "@angular/animations": "^19.2.12",
+        "@angular/common": "^19.2.12",
+        "@angular/compiler": "^19.2.12",
+        "@angular/core": "^19.2.12",
+        "@angular/forms": "^19.2.12",
+        "@angular/platform-browser": "^19.2.12",
+        "@angular/platform-browser-dynamic": "^19.2.12",
+        "@angular/router": "^19.2.12",
+        "rxjs": "^7.8.2",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
       },
       "devDependencies": {
-        "@angular-devkit/build-angular": "^19.2.12",
+        "@angular-devkit/build-angular": "^19.2.13",
         "@angular-eslint/builder": "19.4.0",
         "@angular-eslint/eslint-plugin": "19.4.0",
         "@angular-eslint/eslint-plugin-template": "19.4.0",
         "@angular-eslint/schematics": "19.4.0",
         "@angular-eslint/template-parser": "19.4.0",
-        "@angular/cli": "^19.2.12",
-        "@angular/compiler-cli": "^19.2.10",
-        "@types/jasmine": "~4.3.0",
+        "@angular/cli": "^19.2.13",
+        "@angular/compiler-cli": "^19.2.12",
+        "@types/jasmine": "^5.1.8",
         "@typescript-eslint/eslint-plugin": "8.32.1",
         "@typescript-eslint/parser": "8.32.1",
-        "eslint": "^8.51.0",
-        "jasmine-core": "~4.6.0",
+        "eslint": "^9.27.0",
+        "jasmine-core": "^5.7.1",
         "karma": "~6.4.0",
         "karma-chrome-launcher": "~3.2.0",
         "karma-coverage": "~2.2.0",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.1.0",
-        "prettier": "^3.3.3",
+        "prettier": "^3.5.3",
         "typescript": "~5.8.3"
       }
     },
@@ -58,13 +58,13 @@
       }
     },
     "node_modules/@angular-devkit/architect": {
-      "version": "0.1902.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1902.12.tgz",
-      "integrity": "sha512-LfUc7k84YL290hAxsG+FvjQpXugQXyw5aDzrQQB4iTYhBgaABu2aaNOU4eu3JH+F8NeXd2EBF/YMr2LDSkYlMw==",
+      "version": "0.1902.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1902.13.tgz",
+      "integrity": "sha512-ZMj+PjK22Ph2U8usG6L7LqEfvWlbaOvmiWXSrEt9YiC9QJt6rsumCkOgUIsmHQtucm/lK+9CMtyYdwH2fYycjg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@angular-devkit/core": "19.2.12",
+        "@angular-devkit/core": "19.2.13",
         "rxjs": "7.8.1"
       },
       "engines": {
@@ -74,9 +74,9 @@
       }
     },
     "node_modules/@angular-devkit/architect/node_modules/@angular-devkit/core": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.12.tgz",
-      "integrity": "sha512-v5pdfZHZ8MTZozfpkhKoPFBpXQW+2GFbTfdyis8FBtevJWCbIsCR3xhodgI4jwzkSEAraN4oVtWvSytdNyBC6A==",
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
+      "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -166,18 +166,28 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/@angular-devkit/architect/node_modules/rxjs": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@angular-devkit/build-angular": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-19.2.12.tgz",
-      "integrity": "sha512-gPx3Vi7QFzHkSV388en6VqSqasojitJKuKmgTMPOV5keLtpOylPv3rjnr8oO9rYbYmLsT/WTUsP7bYiZhrr19Q==",
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-19.2.13.tgz",
+      "integrity": "sha512-MrNpwrCq6COszhxyD/u2LE0yygTEjIAlaKaIvvDi9nurzUoKRc1vIJWeB2VkGgmUEjj6OTEeM/6zbo02s88EzA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "2.3.0",
-        "@angular-devkit/architect": "0.1902.12",
-        "@angular-devkit/build-webpack": "0.1902.12",
-        "@angular-devkit/core": "19.2.12",
-        "@angular/build": "19.2.12",
+        "@angular-devkit/architect": "0.1902.13",
+        "@angular-devkit/build-webpack": "0.1902.13",
+        "@angular-devkit/core": "19.2.13",
+        "@angular/build": "19.2.13",
         "@babel/core": "7.26.10",
         "@babel/generator": "7.26.10",
         "@babel/helper-annotate-as-pure": "7.25.9",
@@ -188,7 +198,7 @@
         "@babel/preset-env": "7.26.9",
         "@babel/runtime": "7.26.10",
         "@discoveryjs/json-ext": "0.6.3",
-        "@ngtools/webpack": "19.2.12",
+        "@ngtools/webpack": "19.2.13",
         "@vitejs/plugin-basic-ssl": "1.2.0",
         "ansi-colors": "4.1.3",
         "autoprefixer": "10.4.20",
@@ -242,7 +252,7 @@
         "@angular/localize": "^19.0.0 || ^19.2.0-next.0",
         "@angular/platform-server": "^19.0.0 || ^19.2.0-next.0",
         "@angular/service-worker": "^19.0.0 || ^19.2.0-next.0",
-        "@angular/ssr": "^19.2.12",
+        "@angular/ssr": "^19.2.13",
         "@web/test-runner": "^0.20.0",
         "browser-sync": "^3.0.2",
         "jest": "^29.5.0",
@@ -293,9 +303,9 @@
       }
     },
     "node_modules/@angular-devkit/build-angular/node_modules/@angular-devkit/core": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.12.tgz",
-      "integrity": "sha512-v5pdfZHZ8MTZozfpkhKoPFBpXQW+2GFbTfdyis8FBtevJWCbIsCR3xhodgI4jwzkSEAraN4oVtWvSytdNyBC6A==",
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
+      "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -479,6 +489,16 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/@angular-devkit/build-angular/node_modules/rxjs": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@angular-devkit/build-angular/node_modules/semver": {
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -493,13 +513,13 @@
       }
     },
     "node_modules/@angular-devkit/build-webpack": {
-      "version": "0.1902.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1902.12.tgz",
-      "integrity": "sha512-JNwvzaN2RVbG1IClFPXhNpysVwf55nWmVsNN5iQHRXkD3kpqnaOfhUBtlhBBjLf/i6cwKEne2TI8zciaEYr+iw==",
+      "version": "0.1902.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1902.13.tgz",
+      "integrity": "sha512-upb+cKWkuXwmKyppSwZf3ryHWPm4aS6sJkQu0TWh4RoMRp1WCYVxUfgZ28fTMqcBF3eoFy2XPjdOfkJDRb6Hrg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@angular-devkit/architect": "0.1902.12",
+        "@angular-devkit/architect": "0.1902.13",
         "rxjs": "7.8.1"
       },
       "engines": {
@@ -512,14 +532,24 @@
         "webpack-dev-server": "^5.0.2"
       }
     },
+    "node_modules/@angular-devkit/build-webpack/node_modules/rxjs": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@angular-devkit/schematics": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-19.2.12.tgz",
-      "integrity": "sha512-vK5NI/asi1snWFkw02DpmC8tLq6u5ZbUwwXxgALKuVwGl3g1VLzrHrkoSCrcsOO9Nu6GQOPbxax2lR/DICmytg==",
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-19.2.13.tgz",
+      "integrity": "sha512-NhSPz3lI9njEo8eMUlZVGtlXl12UcNZv5lWTBZY/FGWUu6P5ciD/9iJINbc1jiaDH5E/DLEicUNuai0Q91X4Nw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@angular-devkit/core": "19.2.12",
+        "@angular-devkit/core": "19.2.13",
         "jsonc-parser": "3.3.1",
         "magic-string": "0.30.17",
         "ora": "5.4.1",
@@ -532,9 +562,9 @@
       }
     },
     "node_modules/@angular-devkit/schematics/node_modules/@angular-devkit/core": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.12.tgz",
-      "integrity": "sha512-v5pdfZHZ8MTZozfpkhKoPFBpXQW+2GFbTfdyis8FBtevJWCbIsCR3xhodgI4jwzkSEAraN4oVtWvSytdNyBC6A==",
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
+      "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -624,6 +654,16 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/@angular-devkit/schematics/node_modules/rxjs": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@angular-eslint/builder": {
       "version": "19.4.0",
       "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-19.4.0.tgz",
@@ -732,6 +772,16 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/@angular-eslint/builder/node_modules/rxjs": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@angular-eslint/bundled-angular-compiler": {
       "version": "19.4.0",
       "resolved": "https://registry.npmjs.org/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-19.4.0.tgz",
@@ -923,6 +973,16 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/@angular-eslint/schematics/node_modules/rxjs": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@angular-eslint/schematics/node_modules/semver": {
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -969,9 +1029,9 @@
       }
     },
     "node_modules/@angular/animations": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-19.2.10.tgz",
-      "integrity": "sha512-LlH6mt0D8+MI0LV8QNx9/rqLLv0WCfYPS/5iXSGpIyfsflLoO5dRGhtS4pdQbu5gqmnLdf9i7r4ldRJjf7wb+g==",
+      "version": "19.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-19.2.12.tgz",
+      "integrity": "sha512-PEONFwzhUzeAMFW2ehfL+uGnkeVsikoEOJ3RJVdHWH7W8GUgdN2ubogw6umu939/MqL1MsItImXQcBA7aWfzSg==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -980,19 +1040,19 @@
         "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "19.2.10",
-        "@angular/core": "19.2.10"
+        "@angular/common": "19.2.12",
+        "@angular/core": "19.2.12"
       }
     },
     "node_modules/@angular/build": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@angular/build/-/build-19.2.12.tgz",
-      "integrity": "sha512-G28ux1T5QDlWporwupWbcodBN3rcyHfK2Dh5M3UC5hj0GstpfEHcpBHxawZzIxhqPKy//tdVLlzORUgvAwnqbA==",
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@angular/build/-/build-19.2.13.tgz",
+      "integrity": "sha512-ABcwhAB9DpsvXY7joRFSKiQCHJmCokVJK1Liuz0/AI9Xlp7spqaWqJcC1DVWO0645tUk4HhYmUh5a68REK1Q1A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "2.3.0",
-        "@angular-devkit/architect": "0.1902.12",
+        "@angular-devkit/architect": "0.1902.13",
         "@babel/core": "7.26.10",
         "@babel/helper-annotate-as-pure": "7.25.9",
         "@babel/helper-split-export-declaration": "7.24.7",
@@ -1032,7 +1092,7 @@
         "@angular/localize": "^19.0.0 || ^19.2.0-next.0",
         "@angular/platform-server": "^19.0.0 || ^19.2.0-next.0",
         "@angular/service-worker": "^19.0.0 || ^19.2.0-next.0",
-        "@angular/ssr": "^19.2.12",
+        "@angular/ssr": "^19.2.13",
         "karma": "^6.4.0",
         "less": "^4.2.0",
         "ng-packagr": "^19.0.0 || ^19.2.0-next.0",
@@ -1250,18 +1310,18 @@
       }
     },
     "node_modules/@angular/cli": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.2.12.tgz",
-      "integrity": "sha512-cZkHpM16uh3VouHG1XdWSk0ZWisQRxMVADk5IJlM9jMcPqnFyJwD/UXCS+XTaW3POpNDwsmbh2UB9Xabdgo7rw==",
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.2.13.tgz",
+      "integrity": "sha512-dDRCS73/lrItWx9j4SmwHR56GiZsW8ObNi2q9l/1ny813CG9K43STYFG/wJvGS7ZF3y5hvjIiJOwBx2YIouOIw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@angular-devkit/architect": "0.1902.12",
-        "@angular-devkit/core": "19.2.12",
-        "@angular-devkit/schematics": "19.2.12",
+        "@angular-devkit/architect": "0.1902.13",
+        "@angular-devkit/core": "19.2.13",
+        "@angular-devkit/schematics": "19.2.13",
         "@inquirer/prompts": "7.3.2",
         "@listr2/prompt-adapter-inquirer": "2.0.18",
-        "@schematics/angular": "19.2.12",
+        "@schematics/angular": "19.2.13",
         "@yarnpkg/lockfile": "1.1.0",
         "ini": "5.0.0",
         "jsonc-parser": "3.3.1",
@@ -1284,9 +1344,9 @@
       }
     },
     "node_modules/@angular/cli/node_modules/@angular-devkit/core": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.12.tgz",
-      "integrity": "sha512-v5pdfZHZ8MTZozfpkhKoPFBpXQW+2GFbTfdyis8FBtevJWCbIsCR3xhodgI4jwzkSEAraN4oVtWvSytdNyBC6A==",
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
+      "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1376,6 +1436,16 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/@angular/cli/node_modules/rxjs": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@angular/cli/node_modules/semver": {
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -1390,9 +1460,9 @@
       }
     },
     "node_modules/@angular/common": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-19.2.10.tgz",
-      "integrity": "sha512-1Aq0pT0MXEYHUXFB0nFkiErW7OUCLxF2XkZv///hxWEBX3nc4Zl+p9yrVRvnTJoLuOVU5TYOPjiyKzAGbUIxVw==",
+      "version": "19.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-19.2.12.tgz",
+      "integrity": "sha512-oE2KLvU+YUyq2pUPS8nBWxkPGj29JzslaFcS9vQgvuKZgBTIwAgKm8QHBsitiZ0V+kX8Agwnl5YSdxdtuV2gQQ==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -1401,14 +1471,14 @@
         "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
       },
       "peerDependencies": {
-        "@angular/core": "19.2.10",
+        "@angular/core": "19.2.12",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
     "node_modules/@angular/compiler": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-19.2.10.tgz",
-      "integrity": "sha512-XI4VVaTHIsvDu25b/hOqFBIub4RoEVqVrBYo1rKRF9NI+mxg2Wy30qyJ7rYGbF7qUPomC54pen0qQgw359YhMA==",
+      "version": "19.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-19.2.12.tgz",
+      "integrity": "sha512-OXfnkrtPQ1n64zWv3I0Zhk4U+Xtsbc7Utc15vqc+9sYewFjH0Fdb7bsNZ31+unpn+icWlYELtGINh+ld/rqKQQ==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -1418,9 +1488,9 @@
       }
     },
     "node_modules/@angular/compiler-cli": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-19.2.10.tgz",
-      "integrity": "sha512-g+Zg87IbQSmoIVw4fnqBcz3csTaSWDNTabt4JAlNdcoIw88+WsyZVjxPBFFvezsDEd6eFvNdqVJdAUyLhieDYA==",
+      "version": "19.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-19.2.12.tgz",
+      "integrity": "sha512-w8XMBF9ifuQoL5+1dLTdiTGKHV5mwXVrQyfQufmlBUYkmMU0qVcx7OoabHkwols0LGhYY/vcoxWgM5eyUSF41A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1442,7 +1512,7 @@
         "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
       },
       "peerDependencies": {
-        "@angular/compiler": "19.2.10",
+        "@angular/compiler": "19.2.12",
         "typescript": ">=5.5 <5.9"
       }
     },
@@ -1477,9 +1547,9 @@
       }
     },
     "node_modules/@angular/core": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-19.2.10.tgz",
-      "integrity": "sha512-9SQj5zz9VL4nD2dnqaS8nHxYWWQTPavacwG/e5I1wlctrUIGAvvl9uApxXanqlNVoezA0isUVzZGjaiQuu0hBQ==",
+      "version": "19.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-19.2.12.tgz",
+      "integrity": "sha512-NO/EfB1er3627Y9vxEw+VjR59g3fKigAX03DMHF4nyIsjxFZVtzKYztx7hfpCQ4f4kgqKz6WKi3ueUyyyziFqQ==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -1493,9 +1563,9 @@
       }
     },
     "node_modules/@angular/forms": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-19.2.10.tgz",
-      "integrity": "sha512-IUO+kvW1hIMuWAf98YNRLu+L0Kwq4Bd66ga5veJZ0aqnwA95m3HtcGhB9kygKyF/evQYO+X8GC/Hn1knPjkk1w==",
+      "version": "19.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-19.2.12.tgz",
+      "integrity": "sha512-hHJ+YoofahQvGlKvKxgj2vdGwP/D6RYoDtD/MLj41ZIIok4dmk9Rlty1pa3/FfluFK+tHX+CEYqfB+oShtPeaQ==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -1504,16 +1574,16 @@
         "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "19.2.10",
-        "@angular/core": "19.2.10",
-        "@angular/platform-browser": "19.2.10",
+        "@angular/common": "19.2.12",
+        "@angular/core": "19.2.12",
+        "@angular/platform-browser": "19.2.12",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
     "node_modules/@angular/platform-browser": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.2.10.tgz",
-      "integrity": "sha512-MYX4av0UvCmtUyCo6vW2RjOT2nbZsChhNjKr70DrWcCRMhYYv4cB4PMr6PnyGKJb7QZSSdzbqbbGtvvaB/quqw==",
+      "version": "19.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.2.12.tgz",
+      "integrity": "sha512-R1LF7zvO2CxcJGn8tvpZQPH773iLDMVEGMZc2pRsQoehqgRmos2qjdML4DgVFF1Ismu9TxEtBfIzOiHCSOg2Zg==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -1522,9 +1592,9 @@
         "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
       },
       "peerDependencies": {
-        "@angular/animations": "19.2.10",
-        "@angular/common": "19.2.10",
-        "@angular/core": "19.2.10"
+        "@angular/animations": "19.2.12",
+        "@angular/common": "19.2.12",
+        "@angular/core": "19.2.12"
       },
       "peerDependenciesMeta": {
         "@angular/animations": {
@@ -1533,9 +1603,9 @@
       }
     },
     "node_modules/@angular/platform-browser-dynamic": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-19.2.10.tgz",
-      "integrity": "sha512-ETyTBTL/Kt17BjTDGXoUJVfjx1ZI0ryg3gvEvvtiMfBcmT/ohiIstYfaoF1QSPVMtbiTRLbCtdE439e4B7YoaQ==",
+      "version": "19.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-19.2.12.tgz",
+      "integrity": "sha512-nU7ASPG6RKtu8sBIY76VEFJ210ZCZ7lD9ANNKDe0Cjo1fI2WrZ9YpcOi4RlGZ4Zq/paF1yg37fIw+hPLZGzZMQ==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -1544,16 +1614,16 @@
         "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "19.2.10",
-        "@angular/compiler": "19.2.10",
-        "@angular/core": "19.2.10",
-        "@angular/platform-browser": "19.2.10"
+        "@angular/common": "19.2.12",
+        "@angular/compiler": "19.2.12",
+        "@angular/core": "19.2.12",
+        "@angular/platform-browser": "19.2.12"
       }
     },
     "node_modules/@angular/router": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-19.2.10.tgz",
-      "integrity": "sha512-bmt3ws3L4pYTlI8FW5L1ShyOeUQobXA7wy6TbcIToEonZk+i8uj3xlTD9Ymnjkb9wbNXrD1qoNSpP86c7C1rWQ==",
+      "version": "19.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-19.2.12.tgz",
+      "integrity": "sha512-T2VM8QjKukLnPVyWe4EavSIsBmt91wGVTP7AK8rpWNdMXhVjn8m4iPJGT2Ne0Bqh4kTmISOPZPDEA6A6Q78NvQ==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -1562,9 +1632,9 @@
         "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "19.2.10",
-        "@angular/core": "19.2.10",
-        "@angular/platform-browser": "19.2.10",
+        "@angular/common": "19.2.12",
+        "@angular/core": "19.2.12",
+        "@angular/platform-browser": "19.2.12",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
@@ -3718,16 +3788,55 @@
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
+    "node_modules/@eslint/config-array": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.20.0.tgz",
+      "integrity": "sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.6",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.2.2.tgz",
+      "integrity": "sha512-+GPzk8PlG0sPpzdU5ZvIRMPidzAnZDl/s9L+y13iodqvb8leL53bTannOrQ/Im7UkpsmFU5Ily5U60LWixnmLg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.14.0.tgz",
+      "integrity": "sha512-qIbV0/JZr7iSDjqAc60IqbLdsj9GDt16xQtWD+B78d/HAlvysGdZZ6rpJHGAc2T0FQx1X6thsSPdnoiGKdNtdg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/@eslint/eslintrc": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
-      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
+      "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.6.0",
-        "globals": "^13.19.0",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
         "js-yaml": "^4.1.0",
@@ -3735,7 +3844,7 @@
         "strip-json-comments": "^3.1.1"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
@@ -3746,6 +3855,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -3757,79 +3867,99 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
-    },
     "node_modules/@eslint/eslintrc/node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
       "dev": true,
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
     "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/@eslint/eslintrc/node_modules/type-fest": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+    "node_modules/@eslint/js": {
+      "version": "9.27.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.27.0.tgz",
+      "integrity": "sha512-G5JD9Tu5HJEu4z2Uo4aHY2sLV64B7CDMXxFzqzjl3NKd6RVzSXNoE80jk7Y0lJkTTkjiIhBAqmlYwjuBY3tvpA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://eslint.org/donate"
       }
     },
-    "node_modules/@eslint/js": {
-      "version": "8.57.1",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
-      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
+      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
       "dev": true,
+      "license": "Apache-2.0",
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@humanwhocodes/config-array": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
-      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
-      "deprecated": "Use @eslint/config-array instead",
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.1.tgz",
+      "integrity": "sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.3",
-        "debug": "^4.3.1",
-        "minimatch": "^3.0.5"
+        "@eslint/core": "^0.14.0",
+        "levn": "^0.4.1"
       },
       "engines": {
-        "node": ">=10.10.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
+      "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
+      "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
       }
     },
     "node_modules/@humanwhocodes/module-importer": {
@@ -3845,12 +3975,19 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
-    "node_modules/@humanwhocodes/object-schema": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
-      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
-      "deprecated": "Use @eslint/object-schema instead",
-      "dev": true
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
     },
     "node_modules/@inquirer/checkbox": {
       "version": "4.1.6",
@@ -4958,9 +5095,9 @@
       }
     },
     "node_modules/@ngtools/webpack": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-19.2.12.tgz",
-      "integrity": "sha512-MTxkM+jZPQP55q0BWx/1w2kaN9mSFC14V9+p4sfNm/OXk7fibtxz5lXH/2sDGFWJi36s4gppKqfHBhp9OTdHCQ==",
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-19.2.13.tgz",
+      "integrity": "sha512-9dYfLsqWFTn1YVUiWydSp2bboaSW+byeZRFx8qeR7lsOkDGbm/idG68IXFHybHtZ3ptJ5fEeuw89RL47SQ61oA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -5821,9 +5958,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.40.2.tgz",
-      "integrity": "sha512-5W6vNYkhgfh7URiXTO1E9a0cy4fSgfE4+Hl5agb/U1sa0kjOLMLC1wObxwKxecE17j0URxuTrYZZME4/VH57Hg==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.41.0.tgz",
+      "integrity": "sha512-ieQljaZKuJpmWvd8gW87ZmSFwid6AxMDk5bhONJ57U8zT77zpZ/TPKkU9HpnnFrM4zsgr4kiGuzbIbZTGi7u9A==",
       "cpu": [
         "riscv64"
       ],
@@ -5920,14 +6057,14 @@
       ]
     },
     "node_modules/@schematics/angular": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-19.2.12.tgz",
-      "integrity": "sha512-6S6tclFctLrjMvhpi8eVvswIpXqlybRpZLCTWyVeWIC6PHYLEyFmFoOhuhcSmOdtnwudvzOt6xWnWEVb3qXZbQ==",
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-19.2.13.tgz",
+      "integrity": "sha512-SOpK4AwH0isXo7Y2SkgXLyGLMw4GxWPAun6sCLiprmop4KlqKGGALn4xIW0yjq0s5GS0Vx0FFjz8bBfPkgnawA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@angular-devkit/core": "19.2.12",
-        "@angular-devkit/schematics": "19.2.12",
+        "@angular-devkit/core": "19.2.13",
+        "@angular-devkit/schematics": "19.2.13",
         "jsonc-parser": "3.3.1"
       },
       "engines": {
@@ -5937,9 +6074,9 @@
       }
     },
     "node_modules/@schematics/angular/node_modules/@angular-devkit/core": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.12.tgz",
-      "integrity": "sha512-v5pdfZHZ8MTZozfpkhKoPFBpXQW+2GFbTfdyis8FBtevJWCbIsCR3xhodgI4jwzkSEAraN4oVtWvSytdNyBC6A==",
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
+      "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6029,6 +6166,16 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/@schematics/angular/node_modules/rxjs": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@sigstore/bundle": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@sigstore/bundle/-/bundle-3.1.0.tgz",
@@ -6265,9 +6412,9 @@
       "license": "MIT"
     },
     "node_modules/@types/express": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
-      "integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
+      "version": "4.17.22",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.22.tgz",
+      "integrity": "sha512-eZUmSnhRX9YRSkplpz0N+k6NljUUn5l3EWZIKZvYzhvMphEuNiyyy1viH/ejgt66JWgALwC/gtSUAeQKtSwW/w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6321,10 +6468,11 @@
       }
     },
     "node_modules/@types/jasmine": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-4.3.6.tgz",
-      "integrity": "sha512-3N0FpQTeiWjm+Oo1WUYWguUS7E6JLceiGTriFrG8k5PU7zRLJCzLcWURU3wjMbZGS//a2/LgjsnO3QxIlwxt9g==",
-      "dev": true
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-5.1.8.tgz",
+      "integrity": "sha512-u7/CnvRdh6AaaIzYjCgUuVbREFgulhX05Qtf6ZtW+aOcjCKKVvKgpkPYJBFTZSHtFBYimzU4zP0V2vrEsq9Wcg==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
@@ -6359,9 +6507,9 @@
       }
     },
     "node_modules/@types/qs": {
-      "version": "6.9.18",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.18.tgz",
-      "integrity": "sha512-kK7dgTYDyGqS+e2Q4aK9X3D7q234CIZ1Bv0q/7Z5IwRDoADNU81xXJK/YVyLbLTZCoIwUoDoffFeF+p/eIklAA==",
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
+      "integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -6661,12 +6809,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@ungap/structured-clone": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-      "dev": true
-    },
     "node_modules/@vitejs/plugin-basic-ssl": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.2.0.tgz",
@@ -6910,6 +7052,7 @@
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
       "dev": true,
+      "license": "MIT",
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
@@ -7072,6 +7215,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
     "node_modules/aria-query": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -8185,26 +8335,6 @@
         }
       }
     },
-    "node_modules/cosmiconfig/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
-      "license": "Python-2.0"
-    },
-    "node_modules/cosmiconfig/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -8480,18 +8610,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/doctrine": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-      "dev": true,
-      "dependencies": {
-        "esutils": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/dom-serialize": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
@@ -8872,59 +8990,64 @@
       "dev": true
     },
     "node_modules/eslint": {
-      "version": "8.57.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
-      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
-      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
+      "version": "9.27.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.27.0.tgz",
+      "integrity": "sha512-ixRawFQuMB9DZ7fjU3iGGganFDp3+45bPOdaRurcFHSXO1e/sYwUX/FtQZpLZJR6SjMoJH8hR2pPEAfDyCoU2Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.57.1",
-        "@humanwhocodes/config-array": "^0.13.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.20.0",
+        "@eslint/config-helpers": "^0.2.1",
+        "@eslint/core": "^0.14.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.27.0",
+        "@eslint/plugin-kit": "^0.3.1",
+        "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
-        "@nodelib/fs.walk": "^1.2.8",
-        "@ungap/structured-clone": "^1.2.0",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "@types/json-schema": "^7.0.15",
         "ajv": "^6.12.4",
         "chalk": "^4.0.0",
-        "cross-spawn": "^7.0.2",
+        "cross-spawn": "^7.0.6",
         "debug": "^4.3.2",
-        "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.2",
-        "eslint-visitor-keys": "^3.4.3",
-        "espree": "^9.6.1",
-        "esquery": "^1.4.2",
+        "eslint-scope": "^8.3.0",
+        "eslint-visitor-keys": "^4.2.0",
+        "espree": "^10.3.0",
+        "esquery": "^1.5.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
-        "file-entry-cache": "^6.0.1",
+        "file-entry-cache": "^8.0.0",
         "find-up": "^5.0.0",
         "glob-parent": "^6.0.2",
-        "globals": "^13.19.0",
-        "graphemer": "^1.4.0",
         "ignore": "^5.2.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
-        "is-path-inside": "^3.0.3",
-        "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.4.1",
         "lodash.merge": "^4.6.2",
         "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
-        "optionator": "^0.9.3",
-        "strip-ansi": "^6.0.1",
-        "text-table": "^0.2.0"
+        "optionator": "^0.9.3"
       },
       "bin": {
         "eslint": "bin/eslint.js"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
-        "url": "https://opencollective.com/eslint"
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
       }
     },
     "node_modules/eslint-scope": {
@@ -8977,12 +9100,6 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/eslint/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
-    },
     "node_modules/eslint/node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -8996,16 +9113,30 @@
       }
     },
     "node_modules/eslint/node_modules/eslint-scope": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
-      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.3.0.tgz",
+      "integrity": "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^5.2.0"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
@@ -9039,33 +9170,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/eslint/node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
-      "dev": true,
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
     "node_modules/eslint/node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -9117,18 +9221,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint/node_modules/type-fest": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/eslint/node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -9142,17 +9234,31 @@
       }
     },
     "node_modules/espree": {
-      "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
-      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
+      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "acorn": "^8.9.0",
+        "acorn": "^8.14.0",
         "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^3.4.1"
+        "eslint-visitor-keys": "^4.2.0"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree/node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
@@ -9441,15 +9547,16 @@
       }
     },
     "node_modules/file-entry-cache": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
-      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "flat-cache": "^3.0.4"
+        "flat-cache": "^4.0.0"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": ">=16.0.0"
       }
     },
     "node_modules/fill-range": {
@@ -9564,17 +9671,17 @@
       }
     },
     "node_modules/flat-cache": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
-      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "flatted": "^3.2.9",
-        "keyv": "^4.5.3",
-        "rimraf": "^3.0.2"
+        "keyv": "^4.5.4"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": ">=16"
       }
     },
     "node_modules/flatted": {
@@ -10224,6 +10331,7 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
       "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 4"
       }
@@ -10504,15 +10612,6 @@
         "node": ">=0.12.0"
       }
     },
-    "node_modules/is-path-inside": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-plain-obj": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
@@ -10707,10 +10806,11 @@
       }
     },
     "node_modules/jasmine-core": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.6.1.tgz",
-      "integrity": "sha512-VYz/BjjmC3klLJlLwA4Kw8ytk0zDSmbbDLNs794VnWmkcCB7I9aAL/D48VNQtmITyPvea2C3jdUMfc3kAoy0PQ==",
-      "dev": true
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.7.1.tgz",
+      "integrity": "sha512-QnurrtpKsPoixxG2R3d1xP0St/2kcX5oTZyDyQJMY+Vzi/HUlu1kGm+2V8Tz+9lV991leB1l0xcsyz40s9xOOw==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/jest-worker": {
       "version": "27.5.1",
@@ -10759,6 +10859,19 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "dev": true
     },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/jsbn": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
@@ -10783,7 +10896,8 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
@@ -10931,6 +11045,13 @@
         "karma-jasmine": "^5.0.0"
       }
     },
+    "node_modules/karma-jasmine/node_modules/jasmine-core": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.6.1.tgz",
+      "integrity": "sha512-VYz/BjjmC3klLJlLwA4Kw8ytk0zDSmbbDLNs794VnWmkcCB7I9aAL/D48VNQtmITyPvea2C3jdUMfc3kAoy0PQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/karma-source-map-support": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/karma-source-map-support/-/karma-source-map-support-1.4.0.tgz",
@@ -11001,6 +11122,7 @@
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
       "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "json-buffer": "3.0.1"
       }
@@ -11674,9 +11796,9 @@
       }
     },
     "node_modules/memfs": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.17.1.tgz",
-      "integrity": "sha512-thuTRd7F4m4dReCIy7vv4eNYnU6XI/tHMLSMMHLiortw/Y0QxqKtinG523U2aerzwYWGi606oBP4oMPy4+edag==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.17.2.tgz",
+      "integrity": "sha512-NgYhCOWgovOXSzvYgUW0LQ7Qy72rWQMGGFJDoWg4G30RHd3z77VbYdtJ4fembJXBy8pMIUA31XNAupobOQlwdg==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -12028,9 +12150,9 @@
       "dev": true
     },
     "node_modules/msgpackr": {
-      "version": "1.11.2",
-      "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.11.2.tgz",
-      "integrity": "sha512-F9UngXRlPyWCDEASDpTf6c9uNhGPTqnTeLVt7bN+bU1eajoR/8V9ys2BRaV5C/e5ihE6sJ9uPIKaYt6bFuO32g==",
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.11.4.tgz",
+      "integrity": "sha512-uaff7RG9VIC4jacFW9xzL3jc0iM32DNHe4jYVycBcjUePT/Klnfj7pqtWJt9khvDFizmjN2TlYniYmSS2LIaZg==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -13102,10 +13224,11 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
+      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -13601,9 +13724,10 @@
       }
     },
     "node_modules/rxjs": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "license": "Apache-2.0",
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -14705,12 +14829,6 @@
         }
       }
     },
-    "node_modules/text-table": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-      "dev": true
-    },
     "node_modules/thingies": {
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/thingies/-/thingies-1.21.0.tgz",
@@ -14811,9 +14929,9 @@
       }
     },
     "node_modules/tree-dump": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.0.2.tgz",
-      "integrity": "sha512-dpev9ABuLWdEubk+cIaI9cHwRNNDjkBBLXTwI4UCUFdQ5xXKqNXoK4FEciw/vxf+NQ7Cb7sGUyeUtORvHIdRXQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.0.3.tgz",
+      "integrity": "sha512-il+Cv80yVHFBwokQSfd4bldvr1Md951DpgAGfmhydt04L+YzHgubm2tQ7zueWDcGENKHq0ZvGFR/hjvNXilHEg==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -15241,9 +15359,9 @@
       }
     },
     "node_modules/vite/node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.2.tgz",
-      "integrity": "sha512-JkdNEq+DFxZfUwxvB58tHMHBHVgX23ew41g1OQinthJ+ryhdRk67O31S7sYw8u2lTjHUPFxwar07BBt1KHp/hg==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.41.0.tgz",
+      "integrity": "sha512-KxN+zCjOYHGwCl4UCtSfZ6jrq/qi88JDUtiEFk8LELEHq2Egfc/FgW+jItZiOLRuQfb/3xJSgFuNPC9jzggX+A==",
       "cpu": [
         "arm"
       ],
@@ -15256,9 +15374,9 @@
       "peer": true
     },
     "node_modules/vite/node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.40.2.tgz",
-      "integrity": "sha512-13unNoZ8NzUmnndhPTkWPWbX3vtHodYmy+I9kuLxN+F+l+x3LdVF7UCu8TWVMt1POHLh6oDHhnOA04n8oJZhBw==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.41.0.tgz",
+      "integrity": "sha512-yDvqx3lWlcugozax3DItKJI5j05B0d4Kvnjx+5mwiUpWramVvmAByYigMplaoAQ3pvdprGCTCE03eduqE/8mPQ==",
       "cpu": [
         "arm64"
       ],
@@ -15271,9 +15389,9 @@
       "peer": true
     },
     "node_modules/vite/node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.40.2.tgz",
-      "integrity": "sha512-Gzf1Hn2Aoe8VZzevHostPX23U7N5+4D36WJNHK88NZHCJr7aVMG4fadqkIf72eqVPGjGc0HJHNuUaUcxiR+N/w==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.41.0.tgz",
+      "integrity": "sha512-2KOU574vD3gzcPSjxO0eyR5iWlnxxtmW1F5CkNOHmMlueKNCQkxR6+ekgWyVnz6zaZihpUNkGxjsYrkTJKhkaw==",
       "cpu": [
         "arm64"
       ],
@@ -15286,9 +15404,9 @@
       "peer": true
     },
     "node_modules/vite/node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.40.2.tgz",
-      "integrity": "sha512-47N4hxa01a4x6XnJoskMKTS8XZ0CZMd8YTbINbi+w03A2w4j1RTlnGHOz/P0+Bg1LaVL6ufZyNprSg+fW5nYQQ==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.41.0.tgz",
+      "integrity": "sha512-gE5ACNSxHcEZyP2BA9TuTakfZvULEW4YAOtxl/A/YDbIir/wPKukde0BNPlnBiP88ecaN4BJI2TtAd+HKuZPQQ==",
       "cpu": [
         "x64"
       ],
@@ -15301,9 +15419,9 @@
       "peer": true
     },
     "node_modules/vite/node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.40.2.tgz",
-      "integrity": "sha512-8t6aL4MD+rXSHHZUR1z19+9OFJ2rl1wGKvckN47XFRVO+QL/dUSpKA2SLRo4vMg7ELA8pzGpC+W9OEd1Z/ZqoQ==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.41.0.tgz",
+      "integrity": "sha512-GSxU6r5HnWij7FoSo7cZg3l5GPg4HFLkzsFFh0N/b16q5buW1NAWuCJ+HMtIdUEi6XF0qH+hN0TEd78laRp7Dg==",
       "cpu": [
         "arm64"
       ],
@@ -15316,9 +15434,9 @@
       "peer": true
     },
     "node_modules/vite/node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.40.2.tgz",
-      "integrity": "sha512-C+AyHBzfpsOEYRFjztcYUFsH4S7UsE9cDtHCtma5BK8+ydOZYgMmWg1d/4KBytQspJCld8ZIujFMAdKG1xyr4Q==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.41.0.tgz",
+      "integrity": "sha512-KGiGKGDg8qLRyOWmk6IeiHJzsN/OYxO6nSbT0Vj4MwjS2XQy/5emsmtoqLAabqrohbgLWJ5GV3s/ljdrIr8Qjg==",
       "cpu": [
         "x64"
       ],
@@ -15331,9 +15449,9 @@
       "peer": true
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.40.2.tgz",
-      "integrity": "sha512-de6TFZYIvJwRNjmW3+gaXiZ2DaWL5D5yGmSYzkdzjBDS3W+B9JQ48oZEsmMvemqjtAFzE16DIBLqd6IQQRuG9Q==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.41.0.tgz",
+      "integrity": "sha512-46OzWeqEVQyX3N2/QdiU/CMXYDH/lSHpgfBkuhl3igpZiaB3ZIfSjKuOnybFVBQzjsLwkus2mjaESy8H41SzvA==",
       "cpu": [
         "arm"
       ],
@@ -15346,9 +15464,9 @@
       "peer": true
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.40.2.tgz",
-      "integrity": "sha512-urjaEZubdIkacKc930hUDOfQPysezKla/O9qV+O89enqsqUmQm8Xj8O/vh0gHg4LYfv7Y7UsE3QjzLQzDYN1qg==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.41.0.tgz",
+      "integrity": "sha512-lfgW3KtQP4YauqdPpcUZHPcqQXmTmH4nYU0cplNeW583CMkAGjtImw4PKli09NFi2iQgChk4e9erkwlfYem6Lg==",
       "cpu": [
         "arm"
       ],
@@ -15361,9 +15479,9 @@
       "peer": true
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.40.2.tgz",
-      "integrity": "sha512-KlE8IC0HFOC33taNt1zR8qNlBYHj31qGT1UqWqtvR/+NuCVhfufAq9fxO8BMFC22Wu0rxOwGVWxtCMvZVLmhQg==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.41.0.tgz",
+      "integrity": "sha512-nn8mEyzMbdEJzT7cwxgObuwviMx6kPRxzYiOl6o/o+ChQq23gfdlZcUNnt89lPhhz3BYsZ72rp0rxNqBSfqlqw==",
       "cpu": [
         "arm64"
       ],
@@ -15376,9 +15494,9 @@
       "peer": true
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.40.2.tgz",
-      "integrity": "sha512-j8CgxvfM0kbnhu4XgjnCWJQyyBOeBI1Zq91Z850aUddUmPeQvuAy6OiMdPS46gNFgy8gN1xkYyLgwLYZG3rBOg==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.41.0.tgz",
+      "integrity": "sha512-l+QK99je2zUKGd31Gh+45c4pGDAqZSuWQiuRFCdHYC2CSiO47qUWsCcenrI6p22hvHZrDje9QjwSMAFL3iwXwQ==",
       "cpu": [
         "arm64"
       ],
@@ -15391,9 +15509,9 @@
       "peer": true
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.40.2.tgz",
-      "integrity": "sha512-Ybc/1qUampKuRF4tQXc7G7QY9YRyeVSykfK36Y5Qc5dmrIxwFhrOzqaVTNoZygqZ1ZieSWTibfFhQ5qK8jpWxw==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.41.0.tgz",
+      "integrity": "sha512-WbnJaxPv1gPIm6S8O/Wg+wfE/OzGSXlBMbOe4ie+zMyykMOeqmgD1BhPxZQuDqwUN+0T/xOFtL2RUWBspnZj3w==",
       "cpu": [
         "loong64"
       ],
@@ -15406,9 +15524,9 @@
       "peer": true
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.40.2.tgz",
-      "integrity": "sha512-3FCIrnrt03CCsZqSYAOW/k9n625pjpuMzVfeI+ZBUSDT3MVIFDSPfSUgIl9FqUftxcUXInvFah79hE1c9abD+Q==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.41.0.tgz",
+      "integrity": "sha512-eRDWR5t67/b2g8Q/S8XPi0YdbKcCs4WQ8vklNnUYLaSWF+Cbv2axZsp4jni6/j7eKvMLYCYdcsv8dcU+a6QNFg==",
       "cpu": [
         "ppc64"
       ],
@@ -15421,9 +15539,9 @@
       "peer": true
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.40.2.tgz",
-      "integrity": "sha512-QNU7BFHEvHMp2ESSY3SozIkBPaPBDTsfVNGx3Xhv+TdvWXFGOSH2NJvhD1zKAT6AyuuErJgbdvaJhYVhVqrWTg==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.41.0.tgz",
+      "integrity": "sha512-TWrZb6GF5jsEKG7T1IHwlLMDRy2f3DPqYldmIhnA2DVqvvhY2Ai184vZGgahRrg8k9UBWoSlHv+suRfTN7Ua4A==",
       "cpu": [
         "riscv64"
       ],
@@ -15436,9 +15554,9 @@
       "peer": true
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.40.2.tgz",
-      "integrity": "sha512-B7LKIz+0+p348JoAL4X/YxGx9zOx3sR+o6Hj15Y3aaApNfAshK8+mWZEf759DXfRLeL2vg5LYJBB7DdcleYCoQ==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.41.0.tgz",
+      "integrity": "sha512-/L3pW48SxrWAlVsKCN0dGLB2bi8Nv8pr5S5ocSM+S0XCn5RCVCXqi8GVtHFsOBBCSeR+u9brV2zno5+mg3S4Aw==",
       "cpu": [
         "s390x"
       ],
@@ -15451,9 +15569,9 @@
       "peer": true
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.40.2.tgz",
-      "integrity": "sha512-lG7Xa+BmBNwpjmVUbmyKxdQJ3Q6whHjMjzQplOs5Z+Gj7mxPtWakGHqzMqNER68G67kmCX9qX57aRsW5V0VOng==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.41.0.tgz",
+      "integrity": "sha512-XMLeKjyH8NsEDCRptf6LO8lJk23o9wvB+dJwcXMaH6ZQbbkHu2dbGIUindbMtRN6ux1xKi16iXWu6q9mu7gDhQ==",
       "cpu": [
         "x64"
       ],
@@ -15466,9 +15584,9 @@
       "peer": true
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.40.2.tgz",
-      "integrity": "sha512-tD46wKHd+KJvsmije4bUskNuvWKFcTOIM9tZ/RrmIvcXnbi0YK/cKS9FzFtAm7Oxi2EhV5N2OpfFB348vSQRXA==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.41.0.tgz",
+      "integrity": "sha512-m/P7LycHZTvSQeXhFmgmdqEiTqSV80zn6xHaQ1JSqwCtD1YGtwEK515Qmy9DcB2HK4dOUVypQxvhVSy06cJPEg==",
       "cpu": [
         "x64"
       ],
@@ -15481,9 +15599,9 @@
       "peer": true
     },
     "node_modules/vite/node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.40.2.tgz",
-      "integrity": "sha512-Bjv/HG8RRWLNkXwQQemdsWw4Mg+IJ29LK+bJPW2SCzPKOUaMmPEppQlu/Fqk1d7+DX3V7JbFdbkh/NMmurT6Pg==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.41.0.tgz",
+      "integrity": "sha512-4yodtcOrFHpbomJGVEqZ8fzD4kfBeCbpsUy5Pqk4RluXOdsWdjLnjhiKy2w3qzcASWd04fp52Xz7JKarVJ5BTg==",
       "cpu": [
         "arm64"
       ],
@@ -15496,9 +15614,9 @@
       "peer": true
     },
     "node_modules/vite/node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.40.2.tgz",
-      "integrity": "sha512-dt1llVSGEsGKvzeIO76HToiYPNPYPkmjhMHhP00T9S4rDern8P2ZWvWAQUEJ+R1UdMWJ/42i/QqJ2WV765GZcA==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.41.0.tgz",
+      "integrity": "sha512-tmazCrAsKzdkXssEc65zIE1oC6xPHwfy9d5Ta25SRCDOZS+I6RypVVShWALNuU9bxIfGA0aqrmzlzoM5wO5SPQ==",
       "cpu": [
         "ia32"
       ],
@@ -15511,9 +15629,9 @@
       "peer": true
     },
     "node_modules/vite/node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.40.2.tgz",
-      "integrity": "sha512-bwspbWB04XJpeElvsp+DCylKfF4trJDa2Y9Go8O6A7YLX2LIKGcNK/CYImJN6ZP4DcuOHB4Utl3iCbnR62DudA==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.41.0.tgz",
+      "integrity": "sha512-h1J+Yzjo/X+0EAvR2kIXJDuTuyT7drc+t2ALY0nIcGPbTatNOf0VWdhEA2Z4AAjv6X1NJV7SYo5oCTYRJhSlVA==",
       "cpu": [
         "x64"
       ],
@@ -15556,9 +15674,9 @@
       }
     },
     "node_modules/vite/node_modules/rollup": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.2.tgz",
-      "integrity": "sha512-tfUOg6DTP4rhQ3VjOO6B4wyrJnGOX85requAXvqYTHsOgb2TFJdZ3aWpT8W2kPoypSGP7dZUyzxJ9ee4buM5Fg==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.41.0.tgz",
+      "integrity": "sha512-HqMFpUbWlf/tvcxBFNKnJyzc7Lk+XO3FGc3pbNBLqEbOz0gPLRgcrlS3UF4MfUrVlstOaP/q0kM6GVvi+LrLRg==",
       "dev": true,
       "license": "MIT",
       "peer": true,
@@ -15573,26 +15691,26 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.40.2",
-        "@rollup/rollup-android-arm64": "4.40.2",
-        "@rollup/rollup-darwin-arm64": "4.40.2",
-        "@rollup/rollup-darwin-x64": "4.40.2",
-        "@rollup/rollup-freebsd-arm64": "4.40.2",
-        "@rollup/rollup-freebsd-x64": "4.40.2",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.40.2",
-        "@rollup/rollup-linux-arm-musleabihf": "4.40.2",
-        "@rollup/rollup-linux-arm64-gnu": "4.40.2",
-        "@rollup/rollup-linux-arm64-musl": "4.40.2",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.40.2",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.40.2",
-        "@rollup/rollup-linux-riscv64-gnu": "4.40.2",
-        "@rollup/rollup-linux-riscv64-musl": "4.40.2",
-        "@rollup/rollup-linux-s390x-gnu": "4.40.2",
-        "@rollup/rollup-linux-x64-gnu": "4.40.2",
-        "@rollup/rollup-linux-x64-musl": "4.40.2",
-        "@rollup/rollup-win32-arm64-msvc": "4.40.2",
-        "@rollup/rollup-win32-ia32-msvc": "4.40.2",
-        "@rollup/rollup-win32-x64-msvc": "4.40.2",
+        "@rollup/rollup-android-arm-eabi": "4.41.0",
+        "@rollup/rollup-android-arm64": "4.41.0",
+        "@rollup/rollup-darwin-arm64": "4.41.0",
+        "@rollup/rollup-darwin-x64": "4.41.0",
+        "@rollup/rollup-freebsd-arm64": "4.41.0",
+        "@rollup/rollup-freebsd-x64": "4.41.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.41.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.41.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.41.0",
+        "@rollup/rollup-linux-arm64-musl": "4.41.0",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.41.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.41.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.41.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.41.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.41.0",
+        "@rollup/rollup-linux-x64-gnu": "4.41.0",
+        "@rollup/rollup-linux-x64-musl": "4.41.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.41.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.41.0",
+        "@rollup/rollup-win32-x64-msvc": "4.41.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -16053,19 +16171,19 @@
       }
     },
     "@angular-devkit/architect": {
-      "version": "0.1902.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1902.12.tgz",
-      "integrity": "sha512-LfUc7k84YL290hAxsG+FvjQpXugQXyw5aDzrQQB4iTYhBgaABu2aaNOU4eu3JH+F8NeXd2EBF/YMr2LDSkYlMw==",
+      "version": "0.1902.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1902.13.tgz",
+      "integrity": "sha512-ZMj+PjK22Ph2U8usG6L7LqEfvWlbaOvmiWXSrEt9YiC9QJt6rsumCkOgUIsmHQtucm/lK+9CMtyYdwH2fYycjg==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "19.2.12",
+        "@angular-devkit/core": "19.2.13",
         "rxjs": "7.8.1"
       },
       "dependencies": {
         "@angular-devkit/core": {
-          "version": "19.2.12",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.12.tgz",
-          "integrity": "sha512-v5pdfZHZ8MTZozfpkhKoPFBpXQW+2GFbTfdyis8FBtevJWCbIsCR3xhodgI4jwzkSEAraN4oVtWvSytdNyBC6A==",
+          "version": "19.2.13",
+          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
+          "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
           "dev": true,
           "requires": {
             "ajv": "8.17.1",
@@ -16109,20 +16227,29 @@
           "dev": true,
           "optional": true,
           "peer": true
+        },
+        "rxjs": {
+          "version": "7.8.1",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+          "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+          "dev": true,
+          "requires": {
+            "tslib": "^2.1.0"
+          }
         }
       }
     },
     "@angular-devkit/build-angular": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-19.2.12.tgz",
-      "integrity": "sha512-gPx3Vi7QFzHkSV388en6VqSqasojitJKuKmgTMPOV5keLtpOylPv3rjnr8oO9rYbYmLsT/WTUsP7bYiZhrr19Q==",
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-19.2.13.tgz",
+      "integrity": "sha512-MrNpwrCq6COszhxyD/u2LE0yygTEjIAlaKaIvvDi9nurzUoKRc1vIJWeB2VkGgmUEjj6OTEeM/6zbo02s88EzA==",
       "dev": true,
       "requires": {
         "@ampproject/remapping": "2.3.0",
-        "@angular-devkit/architect": "0.1902.12",
-        "@angular-devkit/build-webpack": "0.1902.12",
-        "@angular-devkit/core": "19.2.12",
-        "@angular/build": "19.2.12",
+        "@angular-devkit/architect": "0.1902.13",
+        "@angular-devkit/build-webpack": "0.1902.13",
+        "@angular-devkit/core": "19.2.13",
+        "@angular/build": "19.2.13",
         "@babel/core": "7.26.10",
         "@babel/generator": "7.26.10",
         "@babel/helper-annotate-as-pure": "7.25.9",
@@ -16133,7 +16260,7 @@
         "@babel/preset-env": "7.26.9",
         "@babel/runtime": "7.26.10",
         "@discoveryjs/json-ext": "0.6.3",
-        "@ngtools/webpack": "19.2.12",
+        "@ngtools/webpack": "19.2.13",
         "@vitejs/plugin-basic-ssl": "1.2.0",
         "ansi-colors": "4.1.3",
         "autoprefixer": "10.4.20",
@@ -16177,9 +16304,9 @@
       },
       "dependencies": {
         "@angular-devkit/core": {
-          "version": "19.2.12",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.12.tgz",
-          "integrity": "sha512-v5pdfZHZ8MTZozfpkhKoPFBpXQW+2GFbTfdyis8FBtevJWCbIsCR3xhodgI4jwzkSEAraN4oVtWvSytdNyBC6A==",
+          "version": "19.2.13",
+          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
+          "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
           "dev": true,
           "requires": {
             "ajv": "8.17.1",
@@ -16285,6 +16412,15 @@
           "optional": true,
           "peer": true
         },
+        "rxjs": {
+          "version": "7.8.1",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+          "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+          "dev": true,
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        },
         "semver": {
           "version": "7.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -16294,22 +16430,33 @@
       }
     },
     "@angular-devkit/build-webpack": {
-      "version": "0.1902.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1902.12.tgz",
-      "integrity": "sha512-JNwvzaN2RVbG1IClFPXhNpysVwf55nWmVsNN5iQHRXkD3kpqnaOfhUBtlhBBjLf/i6cwKEne2TI8zciaEYr+iw==",
+      "version": "0.1902.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1902.13.tgz",
+      "integrity": "sha512-upb+cKWkuXwmKyppSwZf3ryHWPm4aS6sJkQu0TWh4RoMRp1WCYVxUfgZ28fTMqcBF3eoFy2XPjdOfkJDRb6Hrg==",
       "dev": true,
       "requires": {
-        "@angular-devkit/architect": "0.1902.12",
+        "@angular-devkit/architect": "0.1902.13",
         "rxjs": "7.8.1"
+      },
+      "dependencies": {
+        "rxjs": {
+          "version": "7.8.1",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+          "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+          "dev": true,
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@angular-devkit/schematics": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-19.2.12.tgz",
-      "integrity": "sha512-vK5NI/asi1snWFkw02DpmC8tLq6u5ZbUwwXxgALKuVwGl3g1VLzrHrkoSCrcsOO9Nu6GQOPbxax2lR/DICmytg==",
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-19.2.13.tgz",
+      "integrity": "sha512-NhSPz3lI9njEo8eMUlZVGtlXl12UcNZv5lWTBZY/FGWUu6P5ciD/9iJINbc1jiaDH5E/DLEicUNuai0Q91X4Nw==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "19.2.12",
+        "@angular-devkit/core": "19.2.13",
         "jsonc-parser": "3.3.1",
         "magic-string": "0.30.17",
         "ora": "5.4.1",
@@ -16317,9 +16464,9 @@
       },
       "dependencies": {
         "@angular-devkit/core": {
-          "version": "19.2.12",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.12.tgz",
-          "integrity": "sha512-v5pdfZHZ8MTZozfpkhKoPFBpXQW+2GFbTfdyis8FBtevJWCbIsCR3xhodgI4jwzkSEAraN4oVtWvSytdNyBC6A==",
+          "version": "19.2.13",
+          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
+          "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
           "dev": true,
           "requires": {
             "ajv": "8.17.1",
@@ -16363,6 +16510,15 @@
           "dev": true,
           "optional": true,
           "peer": true
+        },
+        "rxjs": {
+          "version": "7.8.1",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+          "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+          "dev": true,
+          "requires": {
+            "tslib": "^2.1.0"
+          }
         }
       }
     },
@@ -16423,6 +16579,15 @@
           "dev": true,
           "optional": true,
           "peer": true
+        },
+        "rxjs": {
+          "version": "7.8.1",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+          "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+          "dev": true,
+          "requires": {
+            "tslib": "^2.1.0"
+          }
         }
       }
     },
@@ -16545,6 +16710,15 @@
           "optional": true,
           "peer": true
         },
+        "rxjs": {
+          "version": "7.8.1",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+          "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+          "dev": true,
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        },
         "semver": {
           "version": "7.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -16576,21 +16750,21 @@
       }
     },
     "@angular/animations": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-19.2.10.tgz",
-      "integrity": "sha512-LlH6mt0D8+MI0LV8QNx9/rqLLv0WCfYPS/5iXSGpIyfsflLoO5dRGhtS4pdQbu5gqmnLdf9i7r4ldRJjf7wb+g==",
+      "version": "19.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-19.2.12.tgz",
+      "integrity": "sha512-PEONFwzhUzeAMFW2ehfL+uGnkeVsikoEOJ3RJVdHWH7W8GUgdN2ubogw6umu939/MqL1MsItImXQcBA7aWfzSg==",
       "requires": {
         "tslib": "^2.3.0"
       }
     },
     "@angular/build": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@angular/build/-/build-19.2.12.tgz",
-      "integrity": "sha512-G28ux1T5QDlWporwupWbcodBN3rcyHfK2Dh5M3UC5hj0GstpfEHcpBHxawZzIxhqPKy//tdVLlzORUgvAwnqbA==",
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@angular/build/-/build-19.2.13.tgz",
+      "integrity": "sha512-ABcwhAB9DpsvXY7joRFSKiQCHJmCokVJK1Liuz0/AI9Xlp7spqaWqJcC1DVWO0645tUk4HhYmUh5a68REK1Q1A==",
       "dev": true,
       "requires": {
         "@ampproject/remapping": "2.3.0",
-        "@angular-devkit/architect": "0.1902.12",
+        "@angular-devkit/architect": "0.1902.13",
         "@babel/core": "7.26.10",
         "@babel/helper-annotate-as-pure": "7.25.9",
         "@babel/helper-split-export-declaration": "7.24.7",
@@ -16704,17 +16878,17 @@
       }
     },
     "@angular/cli": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.2.12.tgz",
-      "integrity": "sha512-cZkHpM16uh3VouHG1XdWSk0ZWisQRxMVADk5IJlM9jMcPqnFyJwD/UXCS+XTaW3POpNDwsmbh2UB9Xabdgo7rw==",
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.2.13.tgz",
+      "integrity": "sha512-dDRCS73/lrItWx9j4SmwHR56GiZsW8ObNi2q9l/1ny813CG9K43STYFG/wJvGS7ZF3y5hvjIiJOwBx2YIouOIw==",
       "dev": true,
       "requires": {
-        "@angular-devkit/architect": "0.1902.12",
-        "@angular-devkit/core": "19.2.12",
-        "@angular-devkit/schematics": "19.2.12",
+        "@angular-devkit/architect": "0.1902.13",
+        "@angular-devkit/core": "19.2.13",
+        "@angular-devkit/schematics": "19.2.13",
         "@inquirer/prompts": "7.3.2",
         "@listr2/prompt-adapter-inquirer": "2.0.18",
-        "@schematics/angular": "19.2.12",
+        "@schematics/angular": "19.2.13",
         "@yarnpkg/lockfile": "1.1.0",
         "ini": "5.0.0",
         "jsonc-parser": "3.3.1",
@@ -16729,9 +16903,9 @@
       },
       "dependencies": {
         "@angular-devkit/core": {
-          "version": "19.2.12",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.12.tgz",
-          "integrity": "sha512-v5pdfZHZ8MTZozfpkhKoPFBpXQW+2GFbTfdyis8FBtevJWCbIsCR3xhodgI4jwzkSEAraN4oVtWvSytdNyBC6A==",
+          "version": "19.2.13",
+          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
+          "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
           "dev": true,
           "requires": {
             "ajv": "8.17.1",
@@ -16776,6 +16950,15 @@
           "optional": true,
           "peer": true
         },
+        "rxjs": {
+          "version": "7.8.1",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+          "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+          "dev": true,
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        },
         "semver": {
           "version": "7.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -16785,25 +16968,25 @@
       }
     },
     "@angular/common": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-19.2.10.tgz",
-      "integrity": "sha512-1Aq0pT0MXEYHUXFB0nFkiErW7OUCLxF2XkZv///hxWEBX3nc4Zl+p9yrVRvnTJoLuOVU5TYOPjiyKzAGbUIxVw==",
+      "version": "19.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-19.2.12.tgz",
+      "integrity": "sha512-oE2KLvU+YUyq2pUPS8nBWxkPGj29JzslaFcS9vQgvuKZgBTIwAgKm8QHBsitiZ0V+kX8Agwnl5YSdxdtuV2gQQ==",
       "requires": {
         "tslib": "^2.3.0"
       }
     },
     "@angular/compiler": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-19.2.10.tgz",
-      "integrity": "sha512-XI4VVaTHIsvDu25b/hOqFBIub4RoEVqVrBYo1rKRF9NI+mxg2Wy30qyJ7rYGbF7qUPomC54pen0qQgw359YhMA==",
+      "version": "19.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-19.2.12.tgz",
+      "integrity": "sha512-OXfnkrtPQ1n64zWv3I0Zhk4U+Xtsbc7Utc15vqc+9sYewFjH0Fdb7bsNZ31+unpn+icWlYELtGINh+ld/rqKQQ==",
       "requires": {
         "tslib": "^2.3.0"
       }
     },
     "@angular/compiler-cli": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-19.2.10.tgz",
-      "integrity": "sha512-g+Zg87IbQSmoIVw4fnqBcz3csTaSWDNTabt4JAlNdcoIw88+WsyZVjxPBFFvezsDEd6eFvNdqVJdAUyLhieDYA==",
+      "version": "19.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-19.2.12.tgz",
+      "integrity": "sha512-w8XMBF9ifuQoL5+1dLTdiTGKHV5mwXVrQyfQufmlBUYkmMU0qVcx7OoabHkwols0LGhYY/vcoxWgM5eyUSF41A==",
       "dev": true,
       "requires": {
         "@babel/core": "7.26.9",
@@ -16834,41 +17017,41 @@
       }
     },
     "@angular/core": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-19.2.10.tgz",
-      "integrity": "sha512-9SQj5zz9VL4nD2dnqaS8nHxYWWQTPavacwG/e5I1wlctrUIGAvvl9uApxXanqlNVoezA0isUVzZGjaiQuu0hBQ==",
+      "version": "19.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-19.2.12.tgz",
+      "integrity": "sha512-NO/EfB1er3627Y9vxEw+VjR59g3fKigAX03DMHF4nyIsjxFZVtzKYztx7hfpCQ4f4kgqKz6WKi3ueUyyyziFqQ==",
       "requires": {
         "tslib": "^2.3.0"
       }
     },
     "@angular/forms": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-19.2.10.tgz",
-      "integrity": "sha512-IUO+kvW1hIMuWAf98YNRLu+L0Kwq4Bd66ga5veJZ0aqnwA95m3HtcGhB9kygKyF/evQYO+X8GC/Hn1knPjkk1w==",
+      "version": "19.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-19.2.12.tgz",
+      "integrity": "sha512-hHJ+YoofahQvGlKvKxgj2vdGwP/D6RYoDtD/MLj41ZIIok4dmk9Rlty1pa3/FfluFK+tHX+CEYqfB+oShtPeaQ==",
       "requires": {
         "tslib": "^2.3.0"
       }
     },
     "@angular/platform-browser": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.2.10.tgz",
-      "integrity": "sha512-MYX4av0UvCmtUyCo6vW2RjOT2nbZsChhNjKr70DrWcCRMhYYv4cB4PMr6PnyGKJb7QZSSdzbqbbGtvvaB/quqw==",
+      "version": "19.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.2.12.tgz",
+      "integrity": "sha512-R1LF7zvO2CxcJGn8tvpZQPH773iLDMVEGMZc2pRsQoehqgRmos2qjdML4DgVFF1Ismu9TxEtBfIzOiHCSOg2Zg==",
       "requires": {
         "tslib": "^2.3.0"
       }
     },
     "@angular/platform-browser-dynamic": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-19.2.10.tgz",
-      "integrity": "sha512-ETyTBTL/Kt17BjTDGXoUJVfjx1ZI0ryg3gvEvvtiMfBcmT/ohiIstYfaoF1QSPVMtbiTRLbCtdE439e4B7YoaQ==",
+      "version": "19.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-19.2.12.tgz",
+      "integrity": "sha512-nU7ASPG6RKtu8sBIY76VEFJ210ZCZ7lD9ANNKDe0Cjo1fI2WrZ9YpcOi4RlGZ4Zq/paF1yg37fIw+hPLZGzZMQ==",
       "requires": {
         "tslib": "^2.3.0"
       }
     },
     "@angular/router": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-19.2.10.tgz",
-      "integrity": "sha512-bmt3ws3L4pYTlI8FW5L1ShyOeUQobXA7wy6TbcIToEonZk+i8uj3xlTD9Ymnjkb9wbNXrD1qoNSpP86c7C1rWQ==",
+      "version": "19.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-19.2.12.tgz",
+      "integrity": "sha512-T2VM8QjKukLnPVyWe4EavSIsBmt91wGVTP7AK8rpWNdMXhVjn8m4iPJGT2Ne0Bqh4kTmISOPZPDEA6A6Q78NvQ==",
       "requires": {
         "tslib": "^2.3.0"
       }
@@ -18162,16 +18345,42 @@
       "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
       "dev": true
     },
+    "@eslint/config-array": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.20.0.tgz",
+      "integrity": "sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ==",
+      "dev": true,
+      "requires": {
+        "@eslint/object-schema": "^2.1.6",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      }
+    },
+    "@eslint/config-helpers": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.2.2.tgz",
+      "integrity": "sha512-+GPzk8PlG0sPpzdU5ZvIRMPidzAnZDl/s9L+y13iodqvb8leL53bTannOrQ/Im7UkpsmFU5Ily5U60LWixnmLg==",
+      "dev": true
+    },
+    "@eslint/core": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.14.0.tgz",
+      "integrity": "sha512-qIbV0/JZr7iSDjqAc60IqbLdsj9GDt16xQtWD+B78d/HAlvysGdZZ6rpJHGAc2T0FQx1X6thsSPdnoiGKdNtdg==",
+      "dev": true,
+      "requires": {
+        "@types/json-schema": "^7.0.15"
+      }
+    },
     "@eslint/eslintrc": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
-      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
+      "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
       "dev": true,
       "requires": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.6.0",
-        "globals": "^13.19.0",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
         "js-yaml": "^4.1.0",
@@ -18191,59 +18400,64 @@
             "uri-js": "^4.2.2"
           }
         },
-        "argparse": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-          "dev": true
-        },
         "globals": {
-          "version": "13.24.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-          "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
-          "dev": true,
-          "requires": {
-            "type-fest": "^0.20.2"
-          }
-        },
-        "js-yaml": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-          "dev": true,
-          "requires": {
-            "argparse": "^2.0.1"
-          }
+          "version": "14.0.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+          "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+          "dev": true
         },
         "json-schema-traverse": {
           "version": "0.4.1",
           "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
           "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
           "dev": true
-        },
-        "type-fest": {
-          "version": "0.20.2",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-          "dev": true
         }
       }
     },
     "@eslint/js": {
-      "version": "8.57.1",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
-      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+      "version": "9.27.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.27.0.tgz",
+      "integrity": "sha512-G5JD9Tu5HJEu4z2Uo4aHY2sLV64B7CDMXxFzqzjl3NKd6RVzSXNoE80jk7Y0lJkTTkjiIhBAqmlYwjuBY3tvpA==",
+      "dev": true
+    },
+    "@eslint/object-schema": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
+      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
       "dev": true
     },
-    "@humanwhocodes/config-array": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
-      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
+    "@eslint/plugin-kit": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.1.tgz",
+      "integrity": "sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==",
       "dev": true,
       "requires": {
-        "@humanwhocodes/object-schema": "^2.0.3",
-        "debug": "^4.3.1",
-        "minimatch": "^3.0.5"
+        "@eslint/core": "^0.14.0",
+        "levn": "^0.4.1"
+      }
+    },
+    "@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true
+    },
+    "@humanfs/node": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
+      "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
+      "dev": true,
+      "requires": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.3.0"
+      },
+      "dependencies": {
+        "@humanwhocodes/retry": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
+          "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
+          "dev": true
+        }
       }
     },
     "@humanwhocodes/module-importer": {
@@ -18252,10 +18466,10 @@
       "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
       "dev": true
     },
-    "@humanwhocodes/object-schema": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
-      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+    "@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
       "dev": true
     },
     "@inquirer/checkbox": {
@@ -18845,9 +19059,9 @@
       "optional": true
     },
     "@ngtools/webpack": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-19.2.12.tgz",
-      "integrity": "sha512-MTxkM+jZPQP55q0BWx/1w2kaN9mSFC14V9+p4sfNm/OXk7fibtxz5lXH/2sDGFWJi36s4gppKqfHBhp9OTdHCQ==",
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-19.2.13.tgz",
+      "integrity": "sha512-9dYfLsqWFTn1YVUiWydSp2bboaSW+byeZRFx8qeR7lsOkDGbm/idG68IXFHybHtZ3ptJ5fEeuw89RL47SQ61oA==",
       "dev": true,
       "requires": {}
     },
@@ -19312,9 +19526,9 @@
       "optional": true
     },
     "@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.40.2.tgz",
-      "integrity": "sha512-5W6vNYkhgfh7URiXTO1E9a0cy4fSgfE4+Hl5agb/U1sa0kjOLMLC1wObxwKxecE17j0URxuTrYZZME4/VH57Hg==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.41.0.tgz",
+      "integrity": "sha512-ieQljaZKuJpmWvd8gW87ZmSFwid6AxMDk5bhONJ57U8zT77zpZ/TPKkU9HpnnFrM4zsgr4kiGuzbIbZTGi7u9A==",
       "dev": true,
       "optional": true,
       "peer": true
@@ -19362,20 +19576,20 @@
       "optional": true
     },
     "@schematics/angular": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-19.2.12.tgz",
-      "integrity": "sha512-6S6tclFctLrjMvhpi8eVvswIpXqlybRpZLCTWyVeWIC6PHYLEyFmFoOhuhcSmOdtnwudvzOt6xWnWEVb3qXZbQ==",
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-19.2.13.tgz",
+      "integrity": "sha512-SOpK4AwH0isXo7Y2SkgXLyGLMw4GxWPAun6sCLiprmop4KlqKGGALn4xIW0yjq0s5GS0Vx0FFjz8bBfPkgnawA==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "19.2.12",
-        "@angular-devkit/schematics": "19.2.12",
+        "@angular-devkit/core": "19.2.13",
+        "@angular-devkit/schematics": "19.2.13",
         "jsonc-parser": "3.3.1"
       },
       "dependencies": {
         "@angular-devkit/core": {
-          "version": "19.2.12",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.12.tgz",
-          "integrity": "sha512-v5pdfZHZ8MTZozfpkhKoPFBpXQW+2GFbTfdyis8FBtevJWCbIsCR3xhodgI4jwzkSEAraN4oVtWvSytdNyBC6A==",
+          "version": "19.2.13",
+          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
+          "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
           "dev": true,
           "requires": {
             "ajv": "8.17.1",
@@ -19419,6 +19633,15 @@
           "dev": true,
           "optional": true,
           "peer": true
+        },
+        "rxjs": {
+          "version": "7.8.1",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+          "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+          "dev": true,
+          "requires": {
+            "tslib": "^2.1.0"
+          }
         }
       }
     },
@@ -19606,9 +19829,9 @@
       "dev": true
     },
     "@types/express": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
-      "integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
+      "version": "4.17.22",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.22.tgz",
+      "integrity": "sha512-eZUmSnhRX9YRSkplpz0N+k6NljUUn5l3EWZIKZvYzhvMphEuNiyyy1viH/ejgt66JWgALwC/gtSUAeQKtSwW/w==",
       "dev": true,
       "requires": {
         "@types/body-parser": "*",
@@ -19659,9 +19882,9 @@
       }
     },
     "@types/jasmine": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-4.3.6.tgz",
-      "integrity": "sha512-3N0FpQTeiWjm+Oo1WUYWguUS7E6JLceiGTriFrG8k5PU7zRLJCzLcWURU3wjMbZGS//a2/LgjsnO3QxIlwxt9g==",
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-5.1.8.tgz",
+      "integrity": "sha512-u7/CnvRdh6AaaIzYjCgUuVbREFgulhX05Qtf6ZtW+aOcjCKKVvKgpkPYJBFTZSHtFBYimzU4zP0V2vrEsq9Wcg==",
       "dev": true
     },
     "@types/json-schema": {
@@ -19695,9 +19918,9 @@
       }
     },
     "@types/qs": {
-      "version": "6.9.18",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.18.tgz",
-      "integrity": "sha512-kK7dgTYDyGqS+e2Q4aK9X3D7q234CIZ1Bv0q/7Z5IwRDoADNU81xXJK/YVyLbLTZCoIwUoDoffFeF+p/eIklAA==",
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
+      "integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==",
       "dev": true
     },
     "@types/range-parser": {
@@ -19892,12 +20115,6 @@
         }
       }
     },
-    "@ungap/structured-clone": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-      "dev": true
-    },
     "@vitejs/plugin-basic-ssl": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.2.0.tgz",
@@ -20211,6 +20428,12 @@
         "picomatch": "^2.0.4"
       }
     },
+    "argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
     "aria-query": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -20966,23 +21189,6 @@
         "import-fresh": "^3.3.0",
         "js-yaml": "^4.1.0",
         "parse-json": "^5.2.0"
-      },
-      "dependencies": {
-        "argparse": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-          "dev": true
-        },
-        "js-yaml": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-          "dev": true,
-          "requires": {
-            "argparse": "^2.0.1"
-          }
-        }
       }
     },
     "cross-spawn": {
@@ -21157,15 +21363,6 @@
         "@leichtgewicht/ip-codec": "^2.0.1"
       }
     },
-    "doctrine": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-      "dev": true,
-      "requires": {
-        "esutils": "^2.0.2"
-      }
-    },
     "dom-serialize": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
@@ -21441,49 +21638,46 @@
       "dev": true
     },
     "eslint": {
-      "version": "8.57.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
-      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
+      "version": "9.27.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.27.0.tgz",
+      "integrity": "sha512-ixRawFQuMB9DZ7fjU3iGGganFDp3+45bPOdaRurcFHSXO1e/sYwUX/FtQZpLZJR6SjMoJH8hR2pPEAfDyCoU2Q==",
       "dev": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.57.1",
-        "@humanwhocodes/config-array": "^0.13.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.20.0",
+        "@eslint/config-helpers": "^0.2.1",
+        "@eslint/core": "^0.14.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.27.0",
+        "@eslint/plugin-kit": "^0.3.1",
+        "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
-        "@nodelib/fs.walk": "^1.2.8",
-        "@ungap/structured-clone": "^1.2.0",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "@types/json-schema": "^7.0.15",
         "ajv": "^6.12.4",
         "chalk": "^4.0.0",
-        "cross-spawn": "^7.0.2",
+        "cross-spawn": "^7.0.6",
         "debug": "^4.3.2",
-        "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.2",
-        "eslint-visitor-keys": "^3.4.3",
-        "espree": "^9.6.1",
-        "esquery": "^1.4.2",
+        "eslint-scope": "^8.3.0",
+        "eslint-visitor-keys": "^4.2.0",
+        "espree": "^10.3.0",
+        "esquery": "^1.5.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
-        "file-entry-cache": "^6.0.1",
+        "file-entry-cache": "^8.0.0",
         "find-up": "^5.0.0",
         "glob-parent": "^6.0.2",
-        "globals": "^13.19.0",
-        "graphemer": "^1.4.0",
         "ignore": "^5.2.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
-        "is-path-inside": "^3.0.3",
-        "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.4.1",
         "lodash.merge": "^4.6.2",
         "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
-        "optionator": "^0.9.3",
-        "strip-ansi": "^6.0.1",
-        "text-table": "^0.2.0"
+        "optionator": "^0.9.3"
       },
       "dependencies": {
         "ajv": {
@@ -21498,12 +21692,6 @@
             "uri-js": "^4.2.2"
           }
         },
-        "argparse": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-          "dev": true
-        },
         "escape-string-regexp": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -21511,15 +21699,21 @@
           "dev": true
         },
         "eslint-scope": {
-          "version": "7.2.2",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
-          "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+          "version": "8.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.3.0.tgz",
+          "integrity": "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==",
           "dev": true,
           "requires": {
             "esrecurse": "^4.3.0",
             "estraverse": "^5.2.0"
           }
         },
+        "eslint-visitor-keys": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+          "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+          "dev": true
+        },
         "find-up": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -21539,24 +21733,6 @@
             "is-glob": "^4.0.3"
           }
         },
-        "globals": {
-          "version": "13.24.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-          "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
-          "dev": true,
-          "requires": {
-            "type-fest": "^0.20.2"
-          }
-        },
-        "js-yaml": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-          "dev": true,
-          "requires": {
-            "argparse": "^2.0.1"
-          }
-        },
         "json-schema-traverse": {
           "version": "0.4.1",
           "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -21590,12 +21766,6 @@
             "p-limit": "^3.0.2"
           }
         },
-        "type-fest": {
-          "version": "0.20.2",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-          "dev": true
-        },
         "yocto-queue": {
           "version": "0.1.0",
           "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -21629,14 +21799,22 @@
       "dev": true
     },
     "espree": {
-      "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
-      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
+      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
       "dev": true,
       "requires": {
-        "acorn": "^8.9.0",
+        "acorn": "^8.14.0",
         "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^3.4.1"
+        "eslint-visitor-keys": "^4.2.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+          "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+          "dev": true
+        }
       }
     },
     "esquery": {
@@ -21855,12 +22033,12 @@
       }
     },
     "file-entry-cache": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
-      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
       "dev": true,
       "requires": {
-        "flat-cache": "^3.0.4"
+        "flat-cache": "^4.0.0"
       }
     },
     "fill-range": {
@@ -21948,14 +22126,13 @@
       "dev": true
     },
     "flat-cache": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
-      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
       "dev": true,
       "requires": {
         "flatted": "^3.2.9",
-        "keyv": "^4.5.3",
-        "rimraf": "^3.0.2"
+        "keyv": "^4.5.4"
       }
     },
     "flatted": {
@@ -22589,12 +22766,6 @@
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true
     },
-    "is-path-inside": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-      "dev": true
-    },
     "is-plain-obj": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
@@ -22730,9 +22901,9 @@
       }
     },
     "jasmine-core": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.6.1.tgz",
-      "integrity": "sha512-VYz/BjjmC3klLJlLwA4Kw8ytk0zDSmbbDLNs794VnWmkcCB7I9aAL/D48VNQtmITyPvea2C3jdUMfc3kAoy0PQ==",
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.7.1.tgz",
+      "integrity": "sha512-QnurrtpKsPoixxG2R3d1xP0St/2kcX5oTZyDyQJMY+Vzi/HUlu1kGm+2V8Tz+9lV991leB1l0xcsyz40s9xOOw==",
       "dev": true
     },
     "jest-worker": {
@@ -22769,6 +22940,15 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "dev": true
     },
+    "js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "requires": {
+        "argparse": "^2.0.1"
+      }
+    },
     "jsbn": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
@@ -22940,6 +23120,14 @@
       "dev": true,
       "requires": {
         "jasmine-core": "^4.1.0"
+      },
+      "dependencies": {
+        "jasmine-core": {
+          "version": "4.6.1",
+          "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.6.1.tgz",
+          "integrity": "sha512-VYz/BjjmC3klLJlLwA4Kw8ytk0zDSmbbDLNs794VnWmkcCB7I9aAL/D48VNQtmITyPvea2C3jdUMfc3kAoy0PQ==",
+          "dev": true
+        }
       }
     },
     "karma-jasmine-html-reporter": {
@@ -23399,9 +23587,9 @@
       "dev": true
     },
     "memfs": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.17.1.tgz",
-      "integrity": "sha512-thuTRd7F4m4dReCIy7vv4eNYnU6XI/tHMLSMMHLiortw/Y0QxqKtinG523U2aerzwYWGi606oBP4oMPy4+edag==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.17.2.tgz",
+      "integrity": "sha512-NgYhCOWgovOXSzvYgUW0LQ7Qy72rWQMGGFJDoWg4G30RHd3z77VbYdtJ4fembJXBy8pMIUA31XNAupobOQlwdg==",
       "dev": true,
       "requires": {
         "@jsonjoy.com/json-pack": "^1.0.3",
@@ -23644,9 +23832,9 @@
       "dev": true
     },
     "msgpackr": {
-      "version": "1.11.2",
-      "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.11.2.tgz",
-      "integrity": "sha512-F9UngXRlPyWCDEASDpTf6c9uNhGPTqnTeLVt7bN+bU1eajoR/8V9ys2BRaV5C/e5ihE6sJ9uPIKaYt6bFuO32g==",
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.11.4.tgz",
+      "integrity": "sha512-uaff7RG9VIC4jacFW9xzL3jc0iM32DNHe4jYVycBcjUePT/Klnfj7pqtWJt9khvDFizmjN2TlYniYmSS2LIaZg==",
       "dev": true,
       "optional": true,
       "requires": {
@@ -24354,9 +24542,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
+      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
       "dev": true
     },
     "proc-log": {
@@ -24701,9 +24889,9 @@
       }
     },
     "rxjs": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "requires": {
         "tslib": "^2.1.0"
       }
@@ -25460,12 +25648,6 @@
         "terser": "^5.31.1"
       }
     },
-    "text-table": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-      "dev": true
-    },
     "thingies": {
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/thingies/-/thingies-1.21.0.tgz",
@@ -25529,9 +25711,9 @@
       "dev": true
     },
     "tree-dump": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.0.2.tgz",
-      "integrity": "sha512-dpev9ABuLWdEubk+cIaI9cHwRNNDjkBBLXTwI4UCUFdQ5xXKqNXoK4FEciw/vxf+NQ7Cb7sGUyeUtORvHIdRXQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.0.3.tgz",
+      "integrity": "sha512-il+Cv80yVHFBwokQSfd4bldvr1Md951DpgAGfmhydt04L+YzHgubm2tQ7zueWDcGENKHq0ZvGFR/hjvNXilHEg==",
       "dev": true,
       "requires": {}
     },
@@ -25761,153 +25943,153 @@
       },
       "dependencies": {
         "@rollup/rollup-android-arm-eabi": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.2.tgz",
-          "integrity": "sha512-JkdNEq+DFxZfUwxvB58tHMHBHVgX23ew41g1OQinthJ+ryhdRk67O31S7sYw8u2lTjHUPFxwar07BBt1KHp/hg==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.41.0.tgz",
+          "integrity": "sha512-KxN+zCjOYHGwCl4UCtSfZ6jrq/qi88JDUtiEFk8LELEHq2Egfc/FgW+jItZiOLRuQfb/3xJSgFuNPC9jzggX+A==",
           "dev": true,
           "optional": true,
           "peer": true
         },
         "@rollup/rollup-android-arm64": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.40.2.tgz",
-          "integrity": "sha512-13unNoZ8NzUmnndhPTkWPWbX3vtHodYmy+I9kuLxN+F+l+x3LdVF7UCu8TWVMt1POHLh6oDHhnOA04n8oJZhBw==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.41.0.tgz",
+          "integrity": "sha512-yDvqx3lWlcugozax3DItKJI5j05B0d4Kvnjx+5mwiUpWramVvmAByYigMplaoAQ3pvdprGCTCE03eduqE/8mPQ==",
           "dev": true,
           "optional": true,
           "peer": true
         },
         "@rollup/rollup-darwin-arm64": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.40.2.tgz",
-          "integrity": "sha512-Gzf1Hn2Aoe8VZzevHostPX23U7N5+4D36WJNHK88NZHCJr7aVMG4fadqkIf72eqVPGjGc0HJHNuUaUcxiR+N/w==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.41.0.tgz",
+          "integrity": "sha512-2KOU574vD3gzcPSjxO0eyR5iWlnxxtmW1F5CkNOHmMlueKNCQkxR6+ekgWyVnz6zaZihpUNkGxjsYrkTJKhkaw==",
           "dev": true,
           "optional": true,
           "peer": true
         },
         "@rollup/rollup-darwin-x64": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.40.2.tgz",
-          "integrity": "sha512-47N4hxa01a4x6XnJoskMKTS8XZ0CZMd8YTbINbi+w03A2w4j1RTlnGHOz/P0+Bg1LaVL6ufZyNprSg+fW5nYQQ==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.41.0.tgz",
+          "integrity": "sha512-gE5ACNSxHcEZyP2BA9TuTakfZvULEW4YAOtxl/A/YDbIir/wPKukde0BNPlnBiP88ecaN4BJI2TtAd+HKuZPQQ==",
           "dev": true,
           "optional": true,
           "peer": true
         },
         "@rollup/rollup-freebsd-arm64": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.40.2.tgz",
-          "integrity": "sha512-8t6aL4MD+rXSHHZUR1z19+9OFJ2rl1wGKvckN47XFRVO+QL/dUSpKA2SLRo4vMg7ELA8pzGpC+W9OEd1Z/ZqoQ==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.41.0.tgz",
+          "integrity": "sha512-GSxU6r5HnWij7FoSo7cZg3l5GPg4HFLkzsFFh0N/b16q5buW1NAWuCJ+HMtIdUEi6XF0qH+hN0TEd78laRp7Dg==",
           "dev": true,
           "optional": true,
           "peer": true
         },
         "@rollup/rollup-freebsd-x64": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.40.2.tgz",
-          "integrity": "sha512-C+AyHBzfpsOEYRFjztcYUFsH4S7UsE9cDtHCtma5BK8+ydOZYgMmWg1d/4KBytQspJCld8ZIujFMAdKG1xyr4Q==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.41.0.tgz",
+          "integrity": "sha512-KGiGKGDg8qLRyOWmk6IeiHJzsN/OYxO6nSbT0Vj4MwjS2XQy/5emsmtoqLAabqrohbgLWJ5GV3s/ljdrIr8Qjg==",
           "dev": true,
           "optional": true,
           "peer": true
         },
         "@rollup/rollup-linux-arm-gnueabihf": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.40.2.tgz",
-          "integrity": "sha512-de6TFZYIvJwRNjmW3+gaXiZ2DaWL5D5yGmSYzkdzjBDS3W+B9JQ48oZEsmMvemqjtAFzE16DIBLqd6IQQRuG9Q==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.41.0.tgz",
+          "integrity": "sha512-46OzWeqEVQyX3N2/QdiU/CMXYDH/lSHpgfBkuhl3igpZiaB3ZIfSjKuOnybFVBQzjsLwkus2mjaESy8H41SzvA==",
           "dev": true,
           "optional": true,
           "peer": true
         },
         "@rollup/rollup-linux-arm-musleabihf": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.40.2.tgz",
-          "integrity": "sha512-urjaEZubdIkacKc930hUDOfQPysezKla/O9qV+O89enqsqUmQm8Xj8O/vh0gHg4LYfv7Y7UsE3QjzLQzDYN1qg==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.41.0.tgz",
+          "integrity": "sha512-lfgW3KtQP4YauqdPpcUZHPcqQXmTmH4nYU0cplNeW583CMkAGjtImw4PKli09NFi2iQgChk4e9erkwlfYem6Lg==",
           "dev": true,
           "optional": true,
           "peer": true
         },
         "@rollup/rollup-linux-arm64-gnu": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.40.2.tgz",
-          "integrity": "sha512-KlE8IC0HFOC33taNt1zR8qNlBYHj31qGT1UqWqtvR/+NuCVhfufAq9fxO8BMFC22Wu0rxOwGVWxtCMvZVLmhQg==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.41.0.tgz",
+          "integrity": "sha512-nn8mEyzMbdEJzT7cwxgObuwviMx6kPRxzYiOl6o/o+ChQq23gfdlZcUNnt89lPhhz3BYsZ72rp0rxNqBSfqlqw==",
           "dev": true,
           "optional": true,
           "peer": true
         },
         "@rollup/rollup-linux-arm64-musl": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.40.2.tgz",
-          "integrity": "sha512-j8CgxvfM0kbnhu4XgjnCWJQyyBOeBI1Zq91Z850aUddUmPeQvuAy6OiMdPS46gNFgy8gN1xkYyLgwLYZG3rBOg==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.41.0.tgz",
+          "integrity": "sha512-l+QK99je2zUKGd31Gh+45c4pGDAqZSuWQiuRFCdHYC2CSiO47qUWsCcenrI6p22hvHZrDje9QjwSMAFL3iwXwQ==",
           "dev": true,
           "optional": true,
           "peer": true
         },
         "@rollup/rollup-linux-loongarch64-gnu": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.40.2.tgz",
-          "integrity": "sha512-Ybc/1qUampKuRF4tQXc7G7QY9YRyeVSykfK36Y5Qc5dmrIxwFhrOzqaVTNoZygqZ1ZieSWTibfFhQ5qK8jpWxw==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.41.0.tgz",
+          "integrity": "sha512-WbnJaxPv1gPIm6S8O/Wg+wfE/OzGSXlBMbOe4ie+zMyykMOeqmgD1BhPxZQuDqwUN+0T/xOFtL2RUWBspnZj3w==",
           "dev": true,
           "optional": true,
           "peer": true
         },
         "@rollup/rollup-linux-powerpc64le-gnu": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.40.2.tgz",
-          "integrity": "sha512-3FCIrnrt03CCsZqSYAOW/k9n625pjpuMzVfeI+ZBUSDT3MVIFDSPfSUgIl9FqUftxcUXInvFah79hE1c9abD+Q==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.41.0.tgz",
+          "integrity": "sha512-eRDWR5t67/b2g8Q/S8XPi0YdbKcCs4WQ8vklNnUYLaSWF+Cbv2axZsp4jni6/j7eKvMLYCYdcsv8dcU+a6QNFg==",
           "dev": true,
           "optional": true,
           "peer": true
         },
         "@rollup/rollup-linux-riscv64-gnu": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.40.2.tgz",
-          "integrity": "sha512-QNU7BFHEvHMp2ESSY3SozIkBPaPBDTsfVNGx3Xhv+TdvWXFGOSH2NJvhD1zKAT6AyuuErJgbdvaJhYVhVqrWTg==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.41.0.tgz",
+          "integrity": "sha512-TWrZb6GF5jsEKG7T1IHwlLMDRy2f3DPqYldmIhnA2DVqvvhY2Ai184vZGgahRrg8k9UBWoSlHv+suRfTN7Ua4A==",
           "dev": true,
           "optional": true,
           "peer": true
         },
         "@rollup/rollup-linux-s390x-gnu": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.40.2.tgz",
-          "integrity": "sha512-B7LKIz+0+p348JoAL4X/YxGx9zOx3sR+o6Hj15Y3aaApNfAshK8+mWZEf759DXfRLeL2vg5LYJBB7DdcleYCoQ==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.41.0.tgz",
+          "integrity": "sha512-/L3pW48SxrWAlVsKCN0dGLB2bi8Nv8pr5S5ocSM+S0XCn5RCVCXqi8GVtHFsOBBCSeR+u9brV2zno5+mg3S4Aw==",
           "dev": true,
           "optional": true,
           "peer": true
         },
         "@rollup/rollup-linux-x64-gnu": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.40.2.tgz",
-          "integrity": "sha512-lG7Xa+BmBNwpjmVUbmyKxdQJ3Q6whHjMjzQplOs5Z+Gj7mxPtWakGHqzMqNER68G67kmCX9qX57aRsW5V0VOng==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.41.0.tgz",
+          "integrity": "sha512-XMLeKjyH8NsEDCRptf6LO8lJk23o9wvB+dJwcXMaH6ZQbbkHu2dbGIUindbMtRN6ux1xKi16iXWu6q9mu7gDhQ==",
           "dev": true,
           "optional": true,
           "peer": true
         },
         "@rollup/rollup-linux-x64-musl": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.40.2.tgz",
-          "integrity": "sha512-tD46wKHd+KJvsmije4bUskNuvWKFcTOIM9tZ/RrmIvcXnbi0YK/cKS9FzFtAm7Oxi2EhV5N2OpfFB348vSQRXA==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.41.0.tgz",
+          "integrity": "sha512-m/P7LycHZTvSQeXhFmgmdqEiTqSV80zn6xHaQ1JSqwCtD1YGtwEK515Qmy9DcB2HK4dOUVypQxvhVSy06cJPEg==",
           "dev": true,
           "optional": true,
           "peer": true
         },
         "@rollup/rollup-win32-arm64-msvc": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.40.2.tgz",
-          "integrity": "sha512-Bjv/HG8RRWLNkXwQQemdsWw4Mg+IJ29LK+bJPW2SCzPKOUaMmPEppQlu/Fqk1d7+DX3V7JbFdbkh/NMmurT6Pg==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.41.0.tgz",
+          "integrity": "sha512-4yodtcOrFHpbomJGVEqZ8fzD4kfBeCbpsUy5Pqk4RluXOdsWdjLnjhiKy2w3qzcASWd04fp52Xz7JKarVJ5BTg==",
           "dev": true,
           "optional": true,
           "peer": true
         },
         "@rollup/rollup-win32-ia32-msvc": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.40.2.tgz",
-          "integrity": "sha512-dt1llVSGEsGKvzeIO76HToiYPNPYPkmjhMHhP00T9S4rDern8P2ZWvWAQUEJ+R1UdMWJ/42i/QqJ2WV765GZcA==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.41.0.tgz",
+          "integrity": "sha512-tmazCrAsKzdkXssEc65zIE1oC6xPHwfy9d5Ta25SRCDOZS+I6RypVVShWALNuU9bxIfGA0aqrmzlzoM5wO5SPQ==",
           "dev": true,
           "optional": true,
           "peer": true
         },
         "@rollup/rollup-win32-x64-msvc": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.40.2.tgz",
-          "integrity": "sha512-bwspbWB04XJpeElvsp+DCylKfF4trJDa2Y9Go8O6A7YLX2LIKGcNK/CYImJN6ZP4DcuOHB4Utl3iCbnR62DudA==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.41.0.tgz",
+          "integrity": "sha512-h1J+Yzjo/X+0EAvR2kIXJDuTuyT7drc+t2ALY0nIcGPbTatNOf0VWdhEA2Z4AAjv6X1NJV7SYo5oCTYRJhSlVA==",
           "dev": true,
           "optional": true,
           "peer": true
@@ -25928,32 +26110,32 @@
           "peer": true
         },
         "rollup": {
-          "version": "4.40.2",
-          "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.2.tgz",
-          "integrity": "sha512-tfUOg6DTP4rhQ3VjOO6B4wyrJnGOX85requAXvqYTHsOgb2TFJdZ3aWpT8W2kPoypSGP7dZUyzxJ9ee4buM5Fg==",
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.41.0.tgz",
+          "integrity": "sha512-HqMFpUbWlf/tvcxBFNKnJyzc7Lk+XO3FGc3pbNBLqEbOz0gPLRgcrlS3UF4MfUrVlstOaP/q0kM6GVvi+LrLRg==",
           "dev": true,
           "peer": true,
           "requires": {
-            "@rollup/rollup-android-arm-eabi": "4.40.2",
-            "@rollup/rollup-android-arm64": "4.40.2",
-            "@rollup/rollup-darwin-arm64": "4.40.2",
-            "@rollup/rollup-darwin-x64": "4.40.2",
-            "@rollup/rollup-freebsd-arm64": "4.40.2",
-            "@rollup/rollup-freebsd-x64": "4.40.2",
-            "@rollup/rollup-linux-arm-gnueabihf": "4.40.2",
-            "@rollup/rollup-linux-arm-musleabihf": "4.40.2",
-            "@rollup/rollup-linux-arm64-gnu": "4.40.2",
-            "@rollup/rollup-linux-arm64-musl": "4.40.2",
-            "@rollup/rollup-linux-loongarch64-gnu": "4.40.2",
-            "@rollup/rollup-linux-powerpc64le-gnu": "4.40.2",
-            "@rollup/rollup-linux-riscv64-gnu": "4.40.2",
-            "@rollup/rollup-linux-riscv64-musl": "4.40.2",
-            "@rollup/rollup-linux-s390x-gnu": "4.40.2",
-            "@rollup/rollup-linux-x64-gnu": "4.40.2",
-            "@rollup/rollup-linux-x64-musl": "4.40.2",
-            "@rollup/rollup-win32-arm64-msvc": "4.40.2",
-            "@rollup/rollup-win32-ia32-msvc": "4.40.2",
-            "@rollup/rollup-win32-x64-msvc": "4.40.2",
+            "@rollup/rollup-android-arm-eabi": "4.41.0",
+            "@rollup/rollup-android-arm64": "4.41.0",
+            "@rollup/rollup-darwin-arm64": "4.41.0",
+            "@rollup/rollup-darwin-x64": "4.41.0",
+            "@rollup/rollup-freebsd-arm64": "4.41.0",
+            "@rollup/rollup-freebsd-x64": "4.41.0",
+            "@rollup/rollup-linux-arm-gnueabihf": "4.41.0",
+            "@rollup/rollup-linux-arm-musleabihf": "4.41.0",
+            "@rollup/rollup-linux-arm64-gnu": "4.41.0",
+            "@rollup/rollup-linux-arm64-musl": "4.41.0",
+            "@rollup/rollup-linux-loongarch64-gnu": "4.41.0",
+            "@rollup/rollup-linux-powerpc64le-gnu": "4.41.0",
+            "@rollup/rollup-linux-riscv64-gnu": "4.41.0",
+            "@rollup/rollup-linux-riscv64-musl": "4.41.0",
+            "@rollup/rollup-linux-s390x-gnu": "4.41.0",
+            "@rollup/rollup-linux-x64-gnu": "4.41.0",
+            "@rollup/rollup-linux-x64-musl": "4.41.0",
+            "@rollup/rollup-win32-arm64-msvc": "4.41.0",
+            "@rollup/rollup-win32-ia32-msvc": "4.41.0",
+            "@rollup/rollup-win32-x64-msvc": "4.41.0",
             "@types/estree": "1.0.7",
             "fsevents": "~2.3.2"
           }
diff --git a/package.json b/package.json
index 6584917..487a614 100644
--- a/package.json
+++ b/package.json
@@ -11,38 +11,38 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.2.10",
-    "@angular/common": "^19.2.10",
-    "@angular/compiler": "^19.2.10",
-    "@angular/core": "^19.2.10",
-    "@angular/forms": "^19.2.10",
-    "@angular/platform-browser": "^19.2.10",
-    "@angular/platform-browser-dynamic": "^19.2.10",
-    "@angular/router": "^19.2.10",
-    "rxjs": "~7.8.0",
+    "@angular/animations": "^19.2.12",
+    "@angular/common": "^19.2.12",
+    "@angular/compiler": "^19.2.12",
+    "@angular/core": "^19.2.12",
+    "@angular/forms": "^19.2.12",
+    "@angular/platform-browser": "^19.2.12",
+    "@angular/platform-browser-dynamic": "^19.2.12",
+    "@angular/router": "^19.2.12",
+    "rxjs": "^7.8.2",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.12",
+    "@angular-devkit/build-angular": "^19.2.13",
     "@angular-eslint/builder": "19.4.0",
     "@angular-eslint/eslint-plugin": "19.4.0",
     "@angular-eslint/eslint-plugin-template": "19.4.0",
     "@angular-eslint/schematics": "19.4.0",
     "@angular-eslint/template-parser": "19.4.0",
-    "@angular/cli": "^19.2.12",
-    "@angular/compiler-cli": "^19.2.10",
-    "@types/jasmine": "~4.3.0",
+    "@angular/cli": "^19.2.13",
+    "@angular/compiler-cli": "^19.2.12",
+    "@types/jasmine": "^5.1.8",
     "@typescript-eslint/eslint-plugin": "8.32.1",
     "@typescript-eslint/parser": "8.32.1",
-    "eslint": "^8.51.0",
-    "jasmine-core": "~4.6.0",
+    "eslint": "^9.27.0",
+    "jasmine-core": "^5.7.1",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.5.3",
     "typescript": "~5.8.3"
   }
 }

From 09005f3415595285b0874cbe662c0e383e7eff36 Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Thu, 22 May 2025 09:59:15 +0300
Subject: [PATCH 02/22] Add routing

---
 src/app/app-routes.ts                         |  14 +-
 src/app/app.component.html                    | 488 +-----------------
 src/app/app.component.spec.ts                 |  21 +-
 src/app/app.component.ts                      |   8 +-
 .../guest-book-page.component.html            |   1 +
 .../guest-book-page.component.scss            |   0
 .../guest-book-page.component.spec.ts         |  23 +
 .../guest-book-page.component.ts              |  11 +
 src/app/guest-book/guest-book.routes.ts       |   9 +
 .../posts-page/posts-page.component.html      |   1 +
 .../posts-page/posts-page.component.scss      |   0
 .../posts-page/posts-page.component.spec.ts   |  23 +
 .../posts/posts-page/posts-page.component.ts  |  11 +
 src/app/posts/posts.routes.ts                 |   9 +
 .../site-header/site-header.component.html    |  20 +
 .../site-header/site-header.component.scss    |   0
 .../site-header/site-header.component.spec.ts |  23 +
 src/app/site-header/site-header.component.ts  |  10 +
 18 files changed, 163 insertions(+), 509 deletions(-)
 create mode 100644 src/app/guest-book/guest-book-page/guest-book-page.component.html
 create mode 100644 src/app/guest-book/guest-book-page/guest-book-page.component.scss
 create mode 100644 src/app/guest-book/guest-book-page/guest-book-page.component.spec.ts
 create mode 100644 src/app/guest-book/guest-book-page/guest-book-page.component.ts
 create mode 100644 src/app/guest-book/guest-book.routes.ts
 create mode 100644 src/app/posts/posts-page/posts-page.component.html
 create mode 100644 src/app/posts/posts-page/posts-page.component.scss
 create mode 100644 src/app/posts/posts-page/posts-page.component.spec.ts
 create mode 100644 src/app/posts/posts-page/posts-page.component.ts
 create mode 100644 src/app/posts/posts.routes.ts
 create mode 100644 src/app/site-header/site-header.component.html
 create mode 100644 src/app/site-header/site-header.component.scss
 create mode 100644 src/app/site-header/site-header.component.spec.ts
 create mode 100644 src/app/site-header/site-header.component.ts

diff --git a/src/app/app-routes.ts b/src/app/app-routes.ts
index a1cf04d..50937f5 100644
--- a/src/app/app-routes.ts
+++ b/src/app/app-routes.ts
@@ -1,3 +1,15 @@
 import { Routes } from '@angular/router';
 
-export const appRoutes: Routes = [];
+export const appRoutes: Routes = [
+  { path: '', redirectTo: '/posts', pathMatch: 'full' },
+  {
+    path: 'posts',
+    loadChildren: () =>
+      import('./posts/posts.routes').then((mod) => mod.routes),
+  },
+  {
+    path: 'guest-book',
+    loadChildren: () =>
+      import('./guest-book/guest-book.routes').then((mod) => mod.routes),
+  },
+];
diff --git a/src/app/app.component.html b/src/app/app.component.html
index f28834e..f6aa5ba 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,488 +1,2 @@
-<style>
-  :host {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 14px;
-  color: #333;
-  box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-margin: 8px 0;
-}
-
-p {
-margin: 0;
-}
-
-.spacer {
-flex: 1;
-}
-
-.toolbar {
-position: absolute;
-top: 0;
-left: 0;
-right: 0;
-height: 60px;
-display: flex;
-align-items: center;
-background-color: #1976d2;
-color: white;
-font-weight: 600;
-}
-
-.toolbar img {
-margin: 0 16px;
-}
-
-.toolbar #twitter-logo {
-height: 40px;
-margin: 0 8px;
-}
-
-.toolbar #youtube-logo {
-height: 40px;
-margin: 0 16px;
-}
-
-.toolbar #twitter-logo:hover,
-.toolbar #youtube-logo:hover {
-opacity: 0.8;
-}
-
-.content {
-display: flex;
-margin: 82px auto 32px;
-padding: 0 16px;
-max-width: 960px;
-flex-direction: column;
-align-items: center;
-}
-
-svg.material-icons {
-height: 24px;
-width: auto;
-}
-
-svg.material-icons:not(:last-child) {
-margin-right: 8px;
-}
-
-.card svg.material-icons path {
-fill: #888;
-}
-
-.card-container {
-display: flex;
-flex-wrap: wrap;
-justify-content: center;
-margin-top: 16px;
-}
-
-.card {
-all: unset;
-border-radius: 4px;
-border: 1px solid #eee;
-background-color: #fafafa;
-height: 40px;
-width: 200px;
-margin: 0 8px 16px;
-padding: 16px;
-display: flex;
-flex-direction: row;
-justify-content: center;
-align-items: center;
-transition: all 0.2s ease-in-out;
-line-height: 24px;
-}
-
-.card-container .card:not(:last-child) {
-margin-right: 0;
-}
-
-.card.card-small {
-height: 16px;
-width: 168px;
-}
-
-.card-container .card:not(.highlight-card) {
-cursor: pointer;
-}
-
-.card-container .card:not(.highlight-card):hover {
-transform: translateY(-3px);
-box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
-}
-
-.card-container .card:not(.highlight-card):hover .material-icons path {
-fill: rgb(105, 103, 103);
-}
-
-.card.highlight-card {
-background-color: #1976d2;
-color: white;
-font-weight: 600;
-border: none;
-width: auto;
-min-width: 30%;
-position: relative;
-}
-
-.card.card.highlight-card span {
-margin-left: 60px;
-}
-
-svg#rocket {
-width: 80px;
-position: absolute;
-left: -10px;
-top: -24px;
-}
-
-svg#rocket-smoke {
-height: calc(100vh - 95px);
-position: absolute;
-top: 10px;
-right: 180px;
-z-index: -10;
-}
-
-a,
-a:visited,
-a:hover {
-color: #1976d2;
-text-decoration: none;
-}
-
-a:hover {
-color: #125699;
-}
-
-.terminal {
-position: relative;
-width: 80%;
-max-width: 600px;
-border-radius: 6px;
-padding-top: 45px;
-margin-top: 8px;
-overflow: hidden;
-background-color: rgb(15, 15, 16);
-}
-
-.terminal::before {
-content: "\2022 \2022 \2022";
-position: absolute;
-top: 0;
-left: 0;
-height: 4px;
-background: rgb(58, 58, 58);
-color: #c2c3c4;
-width: 100%;
-font-size: 2rem;
-line-height: 0;
-padding: 14px 0;
-text-indent: 4px;
-}
-
-.terminal pre {
-font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
-color: white;
-padding: 0 1rem 1rem;
-margin: 0;
-}
-
-.circle-link {
-height: 40px;
-width: 40px;
-border-radius: 40px;
-margin: 8px;
-background-color: white;
-border: 1px solid #eeeeee;
-display: flex;
-justify-content: center;
-align-items: center;
-cursor: pointer;
-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-transition: 1s ease-out;
-}
-
-.circle-link:hover {
-transform: translateY(-0.25rem);
-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-}
-
-footer {
-margin-top: 8px;
-display: flex;
-align-items: center;
-line-height: 20px;
-}
-
-footer a {
-display: flex;
-align-items: center;
-}
-
-.github-star-badge {
-color: #24292e;
-display: flex;
-align-items: center;
-font-size: 12px;
-padding: 3px 10px;
-border: 1px solid rgba(27,31,35,.2);
-border-radius: 3px;
-background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
-margin-left: 4px;
-font-weight: 600;
-}
-
-.github-star-badge:hover {
-background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
-border-color: rgba(27,31,35,.35);
-background-position: -.5em;
-}
-
-.github-star-badge .material-icons {
-height: 16px;
-width: 16px;
-margin-right: 4px;
-}
-
-svg#clouds {
-position: fixed;
-bottom: -160px;
-left: -230px;
-z-index: -10;
-width: 1920px;
-}
-
-/* Responsive Styles */
-@media screen and (max-width: 767px) {
-.card-container > *:not(.circle-link) ,
-.terminal {
-width: 100%;
-}
-
-.card:not(.highlight-card) {
-height: 16px;
-margin: 8px 0;
-}
-
-.card.highlight-card span {
-margin-left: 72px;
-}
-
-svg#rocket-smoke {
-right: 120px;
-transform: rotate(-5deg);
-}
-}
-
-@media screen and (max-width: 575px) {
-svg#rocket-smoke {
-display: none;
-visibility: hidden;
-}
-}
-</style>
-
-<!-- Toolbar -->
-<div class="toolbar" role="banner">
-  <img
-    width="40"
-    alt="Angular Logo"
-    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
-  />
-  <span>Welcome</span>
-    <div class="spacer"></div>
-    <a aria-label="Angular on X" target="_blank" rel="noopener" href="https://twitter.com/angular" title="X">
-      <svg id="twitter-logo" xmlns="http://www.w3.org/2000/svg" height="24" width="24" data-name="Logo" viewBox="0 0 512 512" fill="#fff">
-        <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/>
-      </svg>
-    </a>
-    <a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
-      <svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
-        <path d="M0 0h24v24H0V0z" fill="none"/>
-        <path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
-      </svg>
-    </a>
-</div>
-
-<div class="content" role="main">
-
-  <!-- Highlight Card -->
-  <div class="card highlight-card card-small">
-
-    <svg id="rocket" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
-      <title>Rocket Ship</title>
-      <g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
-        <circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
-        <g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
-          <path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
-          <path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
-        </g>
-      </g>
-    </svg>
-
-    <span>{{ title }} app is running!</span>
-
-    <svg id="rocket-smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
-      <title>Rocket Ship Smoke</title>
-      <path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
-    </svg>
-
-  </div>
-
-  <!-- Resources -->
-  <h2>Resources</h2>
-  <p>Here are some links to help you get started:</p>
-
-  <div class="card-container">
-    <a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
-      <span>Learn Angular</span>
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>    </a>
-
-    <a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
-      <span>CLI Documentation</span>
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
-    </a>
-
-    <a class="card" target="_blank" rel="noopener" href="https://material.angular.io">
-      <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px" width="21.813" height="23.453" viewBox="0 0 179.2 192.7"><path fill="#ffa726" d="M89.4 0 0 32l13.5 118.4 75.9 42.3 76-42.3L179.2 32 89.4 0z"/><path fill="#fb8c00" d="M89.4 0v192.7l76-42.3L179.2 32 89.4 0z"/><path fill="#ffe0b2" d="m102.9 146.3-63.3-30.5 36.3-22.4 63.7 30.6-36.7 22.3z"/><path fill="#fff3e0" d="M102.9 122.8 39.6 92.2l36.3-22.3 63.7 30.6-36.7 22.3z"/><path fill="#fff" d="M102.9 99.3 39.6 68.7l36.3-22.4 63.7 30.6-36.7 22.4z"/></svg>
-      <span>Angular Material</span>
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
-    </a>
-
-    <a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
-      <span>Angular Blog</span>
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
-    </a>
-
-    <a class="card" target="_blank" rel="noopener" href="https://angular.io/devtools/">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M14.73,13.31C15.52,12.24,16,10.93,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5C3,13.09,5.91,16,9.5,16 c1.43,0,2.74-0.48,3.81-1.27L19.59,21L21,19.59L14.73,13.31z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5 S11.99,14,9.5,14z"/><polygon points="10.29,8.44 9.5,6 8.71,8.44 6.25,8.44 8.26,10.03 7.49,12.5 9.5,10.97 11.51,12.5 10.74,10.03 12.75,8.44"/></g></g></svg>
-      <span>Angular DevTools</span>
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
-    </a>
-
-  </div>
-
-  <!-- Next Steps -->
-  <h2>Next Steps</h2>
-  <p>What do you want to do next with your app?</p>
-
-  <input type="hidden" #selection>
-
-  <div class="card-container">
-    <button class="card card-small" (click)="selection.value = 'component'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-      <span>New Component</span>
-    </button>
-
-    <button class="card card-small" (click)="selection.value = 'material'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-      <span>Angular Material</span>
-    </button>
-
-    <button class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-      <span>Add PWA Support</span>
-    </button>
-
-    <button class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-      <span>Add Dependency</span>
-    </button>
-
-    <button class="card card-small" (click)="selection.value = 'test'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-      <span>Run and Watch Tests</span>
-    </button>
-
-    <button class="card card-small" (click)="selection.value = 'build'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-      <span>Build for Production</span>
-    </button>
-  </div>
-
-  <!-- Terminal -->
-  <div class="terminal">
-@switch (selection.value) {
-      @default {
-<pre>ng generate component xyz</pre>
-}
-      @case ('material') {
-<pre>ng add &#64;angular/material</pre>
-}
-      @case ('pwa') {
-<pre>ng add &#64;angular/pwa</pre>
-}
-      @case ('dependency') {
-<pre>ng add _____</pre>
-}
-      @case ('test') {
-<pre>ng test</pre>
-}
-      @case ('build') {
-<pre>ng build</pre>
-}
-  }
-</div>
-
-  <!-- Links -->
-  <div class="card-container">
-    <a class="circle-link" title="Find a Local Meetup" href="https://www.meetup.com/find/?keywords=angular" target="_blank" rel="noopener">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24.607" height="23.447" viewBox="0 0 24.607 23.447">
-        <title>Meetup Logo</title>
-        <path id="logo--mSwarm" d="M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z" transform="translate(0 0.123)" fill="#f64060"/>
-      </svg>
-    </a>
-
-    <a class="circle-link" title="Join the Conversation on Discord" href="https://discord.gg/angular" target="_blank" rel="noopener">
-      <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 245 240">
-        <title>Discord Logo</title>
-        <path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/>
-        <path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/>
-      </svg>
-    </a>
-  </div>
-
-  <!-- Footer -->
-  <footer>
-      Love Angular?&nbsp;
-      <a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
-        <div class="github-star-badge">
-            <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
-          Star
-        </div>
-      </a>
-      <a href="https://github.com/angular/angular" target="_blank" rel="noopener">
-        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
-      </a>
-  </footer>
-
-  <svg id="clouds" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
-    <title>Gray Clouds Background</title>
-    <path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
-  </svg>
-
-</div>
-
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-
+<app-site-header></app-site-header>
 <router-outlet></router-outlet>
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index a59d261..3e3e735 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -3,26 +3,15 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(() => TestBed.configureTestingModule({
-    imports: [RouterTestingModule, AppComponent]
-}));
+  beforeEach(() =>
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule, AppComponent],
+    }),
+  );
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
-  it(`should have as title 'angular-template'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('angular-template');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('angular-template app is running!');
-  });
 });
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index c53dbc9..b2dba55 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,13 +1,11 @@
-
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { SiteHeaderComponent } from './site-header/site-header.component';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, SiteHeaderComponent],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent {
-  title = 'angular-template';
-}
+export class AppComponent {}
diff --git a/src/app/guest-book/guest-book-page/guest-book-page.component.html b/src/app/guest-book/guest-book-page/guest-book-page.component.html
new file mode 100644
index 0000000..77720f2
--- /dev/null
+++ b/src/app/guest-book/guest-book-page/guest-book-page.component.html
@@ -0,0 +1 @@
+<p>guest-book-page works!</p>
diff --git a/src/app/guest-book/guest-book-page/guest-book-page.component.scss b/src/app/guest-book/guest-book-page/guest-book-page.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/guest-book/guest-book-page/guest-book-page.component.spec.ts b/src/app/guest-book/guest-book-page/guest-book-page.component.spec.ts
new file mode 100644
index 0000000..512a521
--- /dev/null
+++ b/src/app/guest-book/guest-book-page/guest-book-page.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GuestBookPageComponent } from './guest-book-page.component';
+
+describe('GuestBookPageComponent', () => {
+  let component: GuestBookPageComponent;
+  let fixture: ComponentFixture<GuestBookPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GuestBookPageComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GuestBookPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/guest-book/guest-book-page/guest-book-page.component.ts b/src/app/guest-book/guest-book-page/guest-book-page.component.ts
new file mode 100644
index 0000000..fffd60b
--- /dev/null
+++ b/src/app/guest-book/guest-book-page/guest-book-page.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-guest-book-page',
+  imports: [],
+  templateUrl: './guest-book-page.component.html',
+  styleUrl: './guest-book-page.component.scss'
+})
+export class GuestBookPageComponent {
+
+}
diff --git a/src/app/guest-book/guest-book.routes.ts b/src/app/guest-book/guest-book.routes.ts
new file mode 100644
index 0000000..88031ae
--- /dev/null
+++ b/src/app/guest-book/guest-book.routes.ts
@@ -0,0 +1,9 @@
+import { Routes } from '@angular/router';
+import { GuestBookPageComponent } from './guest-book-page/guest-book-page.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: GuestBookPageComponent,
+  },
+];
diff --git a/src/app/posts/posts-page/posts-page.component.html b/src/app/posts/posts-page/posts-page.component.html
new file mode 100644
index 0000000..9b9838c
--- /dev/null
+++ b/src/app/posts/posts-page/posts-page.component.html
@@ -0,0 +1 @@
+<p>posts-page works!</p>
diff --git a/src/app/posts/posts-page/posts-page.component.scss b/src/app/posts/posts-page/posts-page.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/posts/posts-page/posts-page.component.spec.ts b/src/app/posts/posts-page/posts-page.component.spec.ts
new file mode 100644
index 0000000..16d023d
--- /dev/null
+++ b/src/app/posts/posts-page/posts-page.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostsPageComponent } from './posts-page.component';
+
+describe('PostsPageComponent', () => {
+  let component: PostsPageComponent;
+  let fixture: ComponentFixture<PostsPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PostsPageComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PostsPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/posts/posts-page/posts-page.component.ts b/src/app/posts/posts-page/posts-page.component.ts
new file mode 100644
index 0000000..1a8dfe0
--- /dev/null
+++ b/src/app/posts/posts-page/posts-page.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-posts-page',
+  imports: [],
+  templateUrl: './posts-page.component.html',
+  styleUrl: './posts-page.component.scss'
+})
+export class PostsPageComponent {
+
+}
diff --git a/src/app/posts/posts.routes.ts b/src/app/posts/posts.routes.ts
new file mode 100644
index 0000000..aee0309
--- /dev/null
+++ b/src/app/posts/posts.routes.ts
@@ -0,0 +1,9 @@
+import { Routes } from '@angular/router';
+import { PostsPageComponent } from './posts-page/posts-page.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: PostsPageComponent,
+  },
+];
diff --git a/src/app/site-header/site-header.component.html b/src/app/site-header/site-header.component.html
new file mode 100644
index 0000000..7f9e3f4
--- /dev/null
+++ b/src/app/site-header/site-header.component.html
@@ -0,0 +1,20 @@
+<nav>
+  <ul>
+    <li>
+      <a
+        routerLink="/posts"
+        routerLinkActive="active"
+        ariaCurrentWhenActive="page"
+        >Blog Posts</a
+      >
+    </li>
+    <li>
+      <a
+        routerLink="/guest-book"
+        routerLinkActive="active"
+        ariaCurrentWhenActive="page"
+        >Guest Book</a
+      >
+    </li>
+  </ul>
+</nav>
diff --git a/src/app/site-header/site-header.component.scss b/src/app/site-header/site-header.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/site-header/site-header.component.spec.ts b/src/app/site-header/site-header.component.spec.ts
new file mode 100644
index 0000000..162d5ea
--- /dev/null
+++ b/src/app/site-header/site-header.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SiteHeaderComponent } from './site-header.component';
+
+describe('SiteHeaderComponent', () => {
+  let component: SiteHeaderComponent;
+  let fixture: ComponentFixture<SiteHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SiteHeaderComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SiteHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/site-header/site-header.component.ts b/src/app/site-header/site-header.component.ts
new file mode 100644
index 0000000..984f503
--- /dev/null
+++ b/src/app/site-header/site-header.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-site-header',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './site-header.component.html',
+  styleUrl: './site-header.component.scss',
+})
+export class SiteHeaderComponent {}

From 3dd11051e48c76d17c61aa1bda0ffbd9208d7745 Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Thu, 22 May 2025 10:36:06 +0300
Subject: [PATCH 03/22] Setup posts loading

---
 .../posts-list/posts-list.component.html      |  8 +++++++
 .../posts-list/posts-list.component.scss      |  0
 .../posts-list/posts-list.component.spec.ts   | 23 +++++++++++++++++++
 .../posts/posts-list/posts-list.component.ts  | 12 ++++++++++
 .../posts-page/posts-page.component.html      |  2 +-
 .../posts/posts-page/posts-page.component.ts  | 10 +++++---
 src/app/posts/posts.model.ts                  |  6 +++++
 src/app/posts/posts.service.spec.ts           | 16 +++++++++++++
 src/app/posts/posts.service.ts                | 23 +++++++++++++++++++
 src/main.ts                                   |  6 ++---
 10 files changed, 99 insertions(+), 7 deletions(-)
 create mode 100644 src/app/posts/posts-list/posts-list.component.html
 create mode 100644 src/app/posts/posts-list/posts-list.component.scss
 create mode 100644 src/app/posts/posts-list/posts-list.component.spec.ts
 create mode 100644 src/app/posts/posts-list/posts-list.component.ts
 create mode 100644 src/app/posts/posts.model.ts
 create mode 100644 src/app/posts/posts.service.spec.ts
 create mode 100644 src/app/posts/posts.service.ts

diff --git a/src/app/posts/posts-list/posts-list.component.html b/src/app/posts/posts-list/posts-list.component.html
new file mode 100644
index 0000000..9e88e54
--- /dev/null
+++ b/src/app/posts/posts-list/posts-list.component.html
@@ -0,0 +1,8 @@
+@for (post of posts(); track post.id) {
+  <div>
+    <p>{{ post.id }}</p>
+    <p>{{ post.userId }}</p>
+    <p>{{ post.title }}</p>
+    <p>{{ post.body }}</p>
+  </div>
+}
diff --git a/src/app/posts/posts-list/posts-list.component.scss b/src/app/posts/posts-list/posts-list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/posts/posts-list/posts-list.component.spec.ts b/src/app/posts/posts-list/posts-list.component.spec.ts
new file mode 100644
index 0000000..00dd16e
--- /dev/null
+++ b/src/app/posts/posts-list/posts-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostsListComponent } from './posts-list.component';
+
+describe('PostsListComponent', () => {
+  let component: PostsListComponent;
+  let fixture: ComponentFixture<PostsListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PostsListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PostsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/posts/posts-list/posts-list.component.ts b/src/app/posts/posts-list/posts-list.component.ts
new file mode 100644
index 0000000..7619423
--- /dev/null
+++ b/src/app/posts/posts-list/posts-list.component.ts
@@ -0,0 +1,12 @@
+import { Component, input } from '@angular/core';
+import { Post } from '../posts.model';
+
+@Component({
+  selector: 'app-posts-list',
+  imports: [],
+  templateUrl: './posts-list.component.html',
+  styleUrl: './posts-list.component.scss',
+})
+export class PostsListComponent {
+  posts = input<Post[]>([]);
+}
diff --git a/src/app/posts/posts-page/posts-page.component.html b/src/app/posts/posts-page/posts-page.component.html
index 9b9838c..e7602ac 100644
--- a/src/app/posts/posts-page/posts-page.component.html
+++ b/src/app/posts/posts-page/posts-page.component.html
@@ -1 +1 @@
-<p>posts-page works!</p>
+<app-posts-list [posts]="posts()" />
diff --git a/src/app/posts/posts-page/posts-page.component.ts b/src/app/posts/posts-page/posts-page.component.ts
index 1a8dfe0..174671f 100644
--- a/src/app/posts/posts-page/posts-page.component.ts
+++ b/src/app/posts/posts-page/posts-page.component.ts
@@ -1,11 +1,15 @@
-import { Component } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
+import { PostsListComponent } from '../posts-list/posts-list.component';
+import { PostsService } from '../posts.service';
 
 @Component({
   selector: 'app-posts-page',
-  imports: [],
+  imports: [PostsListComponent],
   templateUrl: './posts-page.component.html',
-  styleUrl: './posts-page.component.scss'
+  styleUrl: './posts-page.component.scss',
 })
 export class PostsPageComponent {
+  private service = inject(PostsService);
 
+  readonly posts = this.service.posts;
 }
diff --git a/src/app/posts/posts.model.ts b/src/app/posts/posts.model.ts
new file mode 100644
index 0000000..9f4fe20
--- /dev/null
+++ b/src/app/posts/posts.model.ts
@@ -0,0 +1,6 @@
+export interface Post {
+  id: number;
+  userId: number;
+  title: string;
+  body: string;
+}
diff --git a/src/app/posts/posts.service.spec.ts b/src/app/posts/posts.service.spec.ts
new file mode 100644
index 0000000..4fc9b5d
--- /dev/null
+++ b/src/app/posts/posts.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PostsService } from './posts.service';
+
+describe('PostsService', () => {
+  let service: PostsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PostsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/posts/posts.service.ts b/src/app/posts/posts.service.ts
new file mode 100644
index 0000000..6dd3f22
--- /dev/null
+++ b/src/app/posts/posts.service.ts
@@ -0,0 +1,23 @@
+import { inject, Injectable } from '@angular/core';
+import { Post } from './posts.model';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { HttpClient } from '@angular/common/http';
+import { delay } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PostsService {
+  private readonly postsUrl = 'https://jsonplaceholder.typicode.com/posts';
+
+  private readonly http = inject(HttpClient);
+
+  constructor() {}
+
+  // TODO: Error handling
+  getPosts() {
+    return this.http.get<Post[]>(this.postsUrl).pipe(delay(2000)); // TODO: Remove delay
+  }
+
+  posts = toSignal(this.getPosts(), { initialValue: [] });
+}
diff --git a/src/main.ts b/src/main.ts
index 75a3f6a..b5bf82d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,8 +2,8 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { provideRouter } from '@angular/router';
 import { appRoutes } from './app/app-routes';
 import { AppComponent } from './app/app.component';
+import { provideHttpClient } from '@angular/common/http';
 
 bootstrapApplication(AppComponent, {
-    providers: [provideRouter(appRoutes)]
-})
-  .catch(err => console.error(err));
+  providers: [provideRouter(appRoutes), provideHttpClient()],
+}).catch((err) => console.error(err));

From 68870aac0947b3f1e152b0246f2c4f011dcbb754 Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Thu, 22 May 2025 11:53:57 +0300
Subject: [PATCH 04/22] Add Store

---
 .eslintrc.json                                |   10 +-
 package-lock.json                             | 1619 +++++------------
 package.json                                  |    8 +-
 src/app/app-routes.ts                         |   10 +
 .../posts-list/posts-list.component.html      |   18 +-
 .../posts/posts-list/posts-list.component.ts  |    1 +
 .../posts-page/posts-page.component.html      |    6 +-
 .../posts/posts-page/posts-page.component.ts  |   23 +-
 src/app/posts/posts.service.ts                |   18 +-
 src/app/posts/state/posts.actions.ts          |   17 +
 src/app/posts/state/posts.effects.ts          |   27 +
 src/app/posts/state/posts.reducer.ts          |   43 +
 src/app/posts/state/posts.selectors.ts        |   20 +
 src/main.ts                                   |   12 +-
 14 files changed, 616 insertions(+), 1216 deletions(-)
 create mode 100644 src/app/posts/state/posts.actions.ts
 create mode 100644 src/app/posts/state/posts.effects.ts
 create mode 100644 src/app/posts/state/posts.reducer.ts
 create mode 100644 src/app/posts/state/posts.selectors.ts

diff --git a/.eslintrc.json b/.eslintrc.json
index db226e9..4e94f06 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -42,6 +42,14 @@
         "plugin:@angular-eslint/template/accessibility"
       ],
       "rules": {}
+    },
+    {
+      "files": [
+        "*.ts"
+      ],
+      "extends": [
+        "plugin:@ngrx/all"
+      ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 54e64dd..82fece7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,12 +16,17 @@
         "@angular/platform-browser": "^19.2.12",
         "@angular/platform-browser-dynamic": "^19.2.12",
         "@angular/router": "^19.2.12",
+        "@ngrx/effects": "^19.2.0",
+        "@ngrx/entity": "^19.2.0",
+        "@ngrx/store": "^19.2.0",
+        "@ngrx/store-devtools": "^19.2.0",
         "rxjs": "^7.8.2",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
       },
       "devDependencies": {
         "@angular-devkit/build-angular": "^19.2.13",
+        "@angular-devkit/core": "^19.2.13",
         "@angular-eslint/builder": "19.4.0",
         "@angular-eslint/eslint-plugin": "19.4.0",
         "@angular-eslint/eslint-plugin-template": "19.4.0",
@@ -29,6 +34,7 @@
         "@angular-eslint/template-parser": "19.4.0",
         "@angular/cli": "^19.2.13",
         "@angular/compiler-cli": "^19.2.12",
+        "@ngrx/eslint-plugin": "^19.2.0",
         "@types/jasmine": "^5.1.8",
         "@typescript-eslint/eslint-plugin": "8.32.1",
         "@typescript-eslint/parser": "8.32.1",
@@ -73,99 +79,6 @@
         "yarn": ">= 1.13.0"
       }
     },
-    "node_modules/@angular-devkit/architect/node_modules/@angular-devkit/core": {
-      "version": "19.2.13",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
-      "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "8.17.1",
-        "ajv-formats": "3.0.1",
-        "jsonc-parser": "3.3.1",
-        "picomatch": "4.0.2",
-        "rxjs": "7.8.1",
-        "source-map": "0.7.4"
-      },
-      "engines": {
-        "node": "^18.19.1 || ^20.11.1 || >=22.0.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
-      },
-      "peerDependencies": {
-        "chokidar": "^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "chokidar": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@angular-devkit/architect/node_modules/ajv-formats": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
-      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "ajv": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@angular-devkit/architect/node_modules/chokidar": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@angular-devkit/architect/node_modules/picomatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/@angular-devkit/architect/node_modules/readdirp": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 14.18.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/@angular-devkit/architect/node_modules/rxjs": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -302,34 +215,6 @@
         }
       }
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/@angular-devkit/core": {
-      "version": "19.2.13",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
-      "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "8.17.1",
-        "ajv-formats": "3.0.1",
-        "jsonc-parser": "3.3.1",
-        "picomatch": "4.0.2",
-        "rxjs": "7.8.1",
-        "source-map": "0.7.4"
-      },
-      "engines": {
-        "node": "^18.19.1 || ^20.11.1 || >=22.0.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
-      },
-      "peerDependencies": {
-        "chokidar": "^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "chokidar": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@angular-devkit/build-angular/node_modules/@babel/core": {
       "version": "7.26.10",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.10.tgz",
@@ -371,42 +256,6 @@
         "semver": "bin/semver.js"
       }
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/ajv-formats": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
-      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "ajv": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/chokidar": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/@angular-devkit/build-angular/node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -473,22 +322,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/readdirp": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 14.18.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/@angular-devkit/build-angular/node_modules/rxjs": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -542,26 +375,7 @@
         "tslib": "^2.1.0"
       }
     },
-    "node_modules/@angular-devkit/schematics": {
-      "version": "19.2.13",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-19.2.13.tgz",
-      "integrity": "sha512-NhSPz3lI9njEo8eMUlZVGtlXl12UcNZv5lWTBZY/FGWUu6P5ciD/9iJINbc1jiaDH5E/DLEicUNuai0Q91X4Nw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@angular-devkit/core": "19.2.13",
-        "jsonc-parser": "3.3.1",
-        "magic-string": "0.30.17",
-        "ora": "5.4.1",
-        "rxjs": "7.8.1"
-      },
-      "engines": {
-        "node": "^18.19.1 || ^20.11.1 || >=22.0.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
-      }
-    },
-    "node_modules/@angular-devkit/schematics/node_modules/@angular-devkit/core": {
+    "node_modules/@angular-devkit/core": {
       "version": "19.2.13",
       "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
       "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
@@ -589,7 +403,7 @@
         }
       }
     },
-    "node_modules/@angular-devkit/schematics/node_modules/ajv-formats": {
+    "node_modules/@angular-devkit/core/node_modules/ajv-formats": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
       "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
@@ -607,25 +421,7 @@
         }
       }
     },
-    "node_modules/@angular-devkit/schematics/node_modules/chokidar": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@angular-devkit/schematics/node_modules/picomatch": {
+    "node_modules/@angular-devkit/core/node_modules/picomatch": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
@@ -638,141 +434,36 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/@angular-devkit/schematics/node_modules/readdirp": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 14.18.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@angular-devkit/schematics/node_modules/rxjs": {
+    "node_modules/@angular-devkit/core/node_modules/rxjs": {
       "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@angular-eslint/builder": {
-      "version": "19.4.0",
-      "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-19.4.0.tgz",
-      "integrity": "sha512-+mI/YwXiT+IPRNuTNrQqOm97iqbPM5Zc4fxR3p9N1xj1dxLyXJrtGXbbWJPK6i74ON7KdpkY3WLhMKnhWM4RzQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@angular-devkit/architect": ">= 0.1900.0 < 0.2000.0",
-        "@angular-devkit/core": ">= 19.0.0 < 20.0.0"
-      },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": "*"
-      }
-    },
-    "node_modules/@angular-eslint/builder/node_modules/@angular-devkit/core": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.12.tgz",
-      "integrity": "sha512-v5pdfZHZ8MTZozfpkhKoPFBpXQW+2GFbTfdyis8FBtevJWCbIsCR3xhodgI4jwzkSEAraN4oVtWvSytdNyBC6A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "8.17.1",
-        "ajv-formats": "3.0.1",
-        "jsonc-parser": "3.3.1",
-        "picomatch": "4.0.2",
-        "rxjs": "7.8.1",
-        "source-map": "0.7.4"
-      },
-      "engines": {
-        "node": "^18.19.1 || ^20.11.1 || >=22.0.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
-      },
-      "peerDependencies": {
-        "chokidar": "^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "chokidar": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@angular-eslint/builder/node_modules/ajv-formats": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
-      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "ajv": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@angular-eslint/builder/node_modules/chokidar": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@angular-eslint/builder/node_modules/picomatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
       }
     },
-    "node_modules/@angular-eslint/builder/node_modules/readdirp": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+    "node_modules/@angular-devkit/schematics": {
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-19.2.13.tgz",
+      "integrity": "sha512-NhSPz3lI9njEo8eMUlZVGtlXl12UcNZv5lWTBZY/FGWUu6P5ciD/9iJINbc1jiaDH5E/DLEicUNuai0Q91X4Nw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 14.18.0"
+      "dependencies": {
+        "@angular-devkit/core": "19.2.13",
+        "jsonc-parser": "3.3.1",
+        "magic-string": "0.30.17",
+        "ora": "5.4.1",
+        "rxjs": "7.8.1"
       },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
+      "engines": {
+        "node": "^18.19.1 || ^20.11.1 || >=22.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
       }
     },
-    "node_modules/@angular-eslint/builder/node_modules/rxjs": {
+    "node_modules/@angular-devkit/schematics/node_modules/rxjs": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
       "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
@@ -782,6 +473,21 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@angular-eslint/builder": {
+      "version": "19.4.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-19.4.0.tgz",
+      "integrity": "sha512-+mI/YwXiT+IPRNuTNrQqOm97iqbPM5Zc4fxR3p9N1xj1dxLyXJrtGXbbWJPK6i74ON7KdpkY3WLhMKnhWM4RzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-devkit/architect": ">= 0.1900.0 < 0.2000.0",
+        "@angular-devkit/core": ">= 19.0.0 < 20.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": "*"
+      }
+    },
     "node_modules/@angular-eslint/bundled-angular-compiler": {
       "version": "19.4.0",
       "resolved": "https://registry.npmjs.org/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-19.4.0.tgz",
@@ -870,70 +576,6 @@
         "strip-json-comments": "3.1.1"
       }
     },
-    "node_modules/@angular-eslint/schematics/node_modules/@angular-devkit/core": {
-      "version": "19.2.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.12.tgz",
-      "integrity": "sha512-v5pdfZHZ8MTZozfpkhKoPFBpXQW+2GFbTfdyis8FBtevJWCbIsCR3xhodgI4jwzkSEAraN4oVtWvSytdNyBC6A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "8.17.1",
-        "ajv-formats": "3.0.1",
-        "jsonc-parser": "3.3.1",
-        "picomatch": "4.0.2",
-        "rxjs": "7.8.1",
-        "source-map": "0.7.4"
-      },
-      "engines": {
-        "node": "^18.19.1 || ^20.11.1 || >=22.0.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
-      },
-      "peerDependencies": {
-        "chokidar": "^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "chokidar": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@angular-eslint/schematics/node_modules/ajv-formats": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
-      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "ajv": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@angular-eslint/schematics/node_modules/chokidar": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/@angular-eslint/schematics/node_modules/ignore": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.4.tgz",
@@ -944,45 +586,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/@angular-eslint/schematics/node_modules/picomatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/@angular-eslint/schematics/node_modules/readdirp": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 14.18.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@angular-eslint/schematics/node_modules/rxjs": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
     "node_modules/@angular-eslint/schematics/node_modules/semver": {
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -1299,151 +902,48 @@
           "optional": true
         },
         "terser": {
-          "optional": true
-        },
-        "tsx": {
-          "optional": true
-        },
-        "yaml": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@angular/cli": {
-      "version": "19.2.13",
-      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.2.13.tgz",
-      "integrity": "sha512-dDRCS73/lrItWx9j4SmwHR56GiZsW8ObNi2q9l/1ny813CG9K43STYFG/wJvGS7ZF3y5hvjIiJOwBx2YIouOIw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@angular-devkit/architect": "0.1902.13",
-        "@angular-devkit/core": "19.2.13",
-        "@angular-devkit/schematics": "19.2.13",
-        "@inquirer/prompts": "7.3.2",
-        "@listr2/prompt-adapter-inquirer": "2.0.18",
-        "@schematics/angular": "19.2.13",
-        "@yarnpkg/lockfile": "1.1.0",
-        "ini": "5.0.0",
-        "jsonc-parser": "3.3.1",
-        "listr2": "8.2.5",
-        "npm-package-arg": "12.0.2",
-        "npm-pick-manifest": "10.0.0",
-        "pacote": "20.0.0",
-        "resolve": "1.22.10",
-        "semver": "7.7.1",
-        "symbol-observable": "4.0.0",
-        "yargs": "17.7.2"
-      },
-      "bin": {
-        "ng": "bin/ng.js"
-      },
-      "engines": {
-        "node": "^18.19.1 || ^20.11.1 || >=22.0.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
-      }
-    },
-    "node_modules/@angular/cli/node_modules/@angular-devkit/core": {
-      "version": "19.2.13",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
-      "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "8.17.1",
-        "ajv-formats": "3.0.1",
-        "jsonc-parser": "3.3.1",
-        "picomatch": "4.0.2",
-        "rxjs": "7.8.1",
-        "source-map": "0.7.4"
-      },
-      "engines": {
-        "node": "^18.19.1 || ^20.11.1 || >=22.0.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
-      },
-      "peerDependencies": {
-        "chokidar": "^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "chokidar": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@angular/cli/node_modules/ajv-formats": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
-      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "ajv": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@angular/cli/node_modules/chokidar": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@angular/cli/node_modules/picomatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@angular/cli/node_modules/readdirp": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+    "node_modules/@angular/cli": {
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.2.13.tgz",
+      "integrity": "sha512-dDRCS73/lrItWx9j4SmwHR56GiZsW8ObNi2q9l/1ny813CG9K43STYFG/wJvGS7ZF3y5hvjIiJOwBx2YIouOIw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 14.18.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@angular/cli/node_modules/rxjs": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-      "dev": true,
-      "license": "Apache-2.0",
       "dependencies": {
-        "tslib": "^2.1.0"
+        "@angular-devkit/architect": "0.1902.13",
+        "@angular-devkit/core": "19.2.13",
+        "@angular-devkit/schematics": "19.2.13",
+        "@inquirer/prompts": "7.3.2",
+        "@listr2/prompt-adapter-inquirer": "2.0.18",
+        "@schematics/angular": "19.2.13",
+        "@yarnpkg/lockfile": "1.1.0",
+        "ini": "5.0.0",
+        "jsonc-parser": "3.3.1",
+        "listr2": "8.2.5",
+        "npm-package-arg": "12.0.2",
+        "npm-pick-manifest": "10.0.0",
+        "pacote": "20.0.0",
+        "resolve": "1.22.10",
+        "semver": "7.7.1",
+        "symbol-observable": "4.0.0",
+        "yargs": "17.7.2"
+      },
+      "bin": {
+        "ng": "bin/ng.js"
+      },
+      "engines": {
+        "node": "^18.19.1 || ^20.11.1 || >=22.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
       }
     },
     "node_modules/@angular/cli/node_modules/semver": {
@@ -1516,36 +1016,6 @@
         "typescript": ">=5.5 <5.9"
       }
     },
-    "node_modules/@angular/compiler-cli/node_modules/chokidar": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@angular/compiler-cli/node_modules/readdirp": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 14.18.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/@angular/core": {
       "version": "19.2.12",
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-19.2.12.tgz",
@@ -5094,6 +4564,78 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@ngrx/effects": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-19.2.0.tgz",
+      "integrity": "sha512-DIoFdEdSehAMHUNTWIdl94HjhSh1ZRx0Rgtgp1TjHHyjLiS+vbMmDgPjrCkBv5lT/pEaKbHKnYxjY3CQiW2Hsg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "^19.0.0",
+        "@ngrx/store": "19.2.0",
+        "rxjs": "^6.5.3 || ^7.5.0"
+      }
+    },
+    "node_modules/@ngrx/entity": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/entity/-/entity-19.2.0.tgz",
+      "integrity": "sha512-JxKFBk0LAHrmCGLQFQeT8mZhwTZPKzq0m0gqCtXgmtzHj9B/ln3yluTtBWgOEf07dDAkEX/q42Sr+kO+5kctvg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "^19.0.0",
+        "@ngrx/store": "19.2.0",
+        "rxjs": "^6.5.3 || ^7.5.0"
+      }
+    },
+    "node_modules/@ngrx/eslint-plugin": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/eslint-plugin/-/eslint-plugin-19.2.0.tgz",
+      "integrity": "sha512-dOHjJCAsv8aI53EwFKh33wCgrx8W58Y3cvlt/+pu8WCIjVkRwZKXZH05ufEPdqp6+xKp0NZuP7fe/F82vaNF4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.3.5",
+        "strip-json-comments": "3.1.1"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/utils": "^8.0.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": "*",
+        "typescript-eslint": "^8.0.0"
+      }
+    },
+    "node_modules/@ngrx/store": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-19.2.0.tgz",
+      "integrity": "sha512-k2n/jLJZ75Z5rd5vPa2mXPYG/On2rFLiNdrccs9Dw2r+oJosORMlN5TbdsGHhVDFfjzbY9a7JbHUE3YOa69gqw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "^19.0.0",
+        "rxjs": "^6.5.3 || ^7.5.0"
+      }
+    },
+    "node_modules/@ngrx/store-devtools": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/store-devtools/-/store-devtools-19.2.0.tgz",
+      "integrity": "sha512-AKlXHsuSRJgYYxmrXZ8WWnDxqgKMG0+HP+IIDmk5h5Z5RIkOLHk6ZGKbakhIiFlL8d16N+GcJ76rqUajaHT+0w==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "^19.0.0",
+        "@ngrx/store": "19.2.0",
+        "rxjs": "^6.5.3 || ^7.5.0"
+      }
+    },
     "node_modules/@ngtools/webpack": {
       "version": "19.2.13",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-19.2.13.tgz",
@@ -6073,109 +5615,6 @@
         "yarn": ">= 1.13.0"
       }
     },
-    "node_modules/@schematics/angular/node_modules/@angular-devkit/core": {
-      "version": "19.2.13",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
-      "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "8.17.1",
-        "ajv-formats": "3.0.1",
-        "jsonc-parser": "3.3.1",
-        "picomatch": "4.0.2",
-        "rxjs": "7.8.1",
-        "source-map": "0.7.4"
-      },
-      "engines": {
-        "node": "^18.19.1 || ^20.11.1 || >=22.0.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
-      },
-      "peerDependencies": {
-        "chokidar": "^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "chokidar": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@schematics/angular/node_modules/ajv-formats": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
-      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "ajv": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@schematics/angular/node_modules/chokidar": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@schematics/angular/node_modules/picomatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/@schematics/angular/node_modules/readdirp": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 14.18.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@schematics/angular/node_modules/rxjs": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
     "node_modules/@sigstore/bundle": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@sigstore/bundle/-/bundle-3.1.0.tgz",
@@ -7207,6 +6646,7 @@
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -7433,6 +6873,7 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       },
@@ -7837,28 +7278,19 @@
       "license": "MIT"
     },
     "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
+        "readdirp": "^4.0.1"
       },
       "engines": {
-        "node": ">= 8.10.0"
+        "node": ">= 14.16.0"
       },
       "funding": {
         "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
       }
     },
     "node_modules/chownr": {
@@ -10493,6 +9925,7 @@
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -11061,6 +10494,31 @@
         "source-map-support": "^0.5.5"
       }
     },
+    "node_modules/karma/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/karma/node_modules/cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -11072,6 +10530,19 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/karma/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/karma/node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -13400,15 +12871,17 @@
       }
     },
     "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
       "dev": true,
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=8.10.0"
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
       }
     },
     "node_modules/reflect-metadata": {
@@ -13820,36 +13293,6 @@
         }
       }
     },
-    "node_modules/sass/node_modules/chokidar": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/sass/node_modules/readdirp": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 14.18.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/sax": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
@@ -15045,6 +14488,30 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typescript-eslint": {
+      "version": "8.32.1",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.32.1.tgz",
+      "integrity": "sha512-D7el+eaDHAmXvrZBy1zpzSNIRqnCOrkwTgZxTu3MUqRWk8k0q9m9Ho4+vPf7iHtgUfrK/o8IZaEApsxPlHTFCg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.32.1",
+        "@typescript-eslint/parser": "8.32.1",
+        "@typescript-eslint/utils": "8.32.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
     "node_modules/ua-parser-js": {
       "version": "0.7.39",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.39.tgz",
@@ -15897,6 +15364,31 @@
         }
       }
     },
+    "node_modules/webpack-dev-server/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/webpack-dev-server/node_modules/http-proxy-middleware": {
       "version": "2.0.9",
       "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.9.tgz",
@@ -15922,6 +15414,19 @@
         }
       }
     },
+    "node_modules/webpack-dev-server/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/webpack-merge": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-6.0.1.tgz",
@@ -16180,54 +15685,6 @@
         "rxjs": "7.8.1"
       },
       "dependencies": {
-        "@angular-devkit/core": {
-          "version": "19.2.13",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
-          "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
-          "dev": true,
-          "requires": {
-            "ajv": "8.17.1",
-            "ajv-formats": "3.0.1",
-            "jsonc-parser": "3.3.1",
-            "picomatch": "4.0.2",
-            "rxjs": "7.8.1",
-            "source-map": "0.7.4"
-          }
-        },
-        "ajv-formats": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
-          "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
-          "dev": true,
-          "requires": {
-            "ajv": "^8.0.0"
-          }
-        },
-        "chokidar": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-          "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-          "dev": true,
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "readdirp": "^4.0.1"
-          }
-        },
-        "picomatch": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-          "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-          "dev": true
-        },
-        "readdirp": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-          "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-          "dev": true,
-          "optional": true,
-          "peer": true
-        },
         "rxjs": {
           "version": "7.8.1",
           "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -16303,20 +15760,6 @@
         "webpack-subresource-integrity": "5.1.0"
       },
       "dependencies": {
-        "@angular-devkit/core": {
-          "version": "19.2.13",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
-          "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
-          "dev": true,
-          "requires": {
-            "ajv": "8.17.1",
-            "ajv-formats": "3.0.1",
-            "jsonc-parser": "3.3.1",
-            "picomatch": "4.0.2",
-            "rxjs": "7.8.1",
-            "source-map": "0.7.4"
-          }
-        },
         "@babel/core": {
           "version": "7.26.10",
           "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.10.tgz",
@@ -16348,26 +15791,6 @@
             }
           }
         },
-        "ajv-formats": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
-          "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
-          "dev": true,
-          "requires": {
-            "ajv": "^8.0.0"
-          }
-        },
-        "chokidar": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-          "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-          "dev": true,
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "readdirp": "^4.0.1"
-          }
-        },
         "convert-source-map": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -16404,14 +15827,6 @@
             "source-map-js": "^1.2.1"
           }
         },
-        "readdirp": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-          "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-          "dev": true,
-          "optional": true,
-          "peer": true
-        },
         "rxjs": {
           "version": "7.8.1",
           "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -16450,120 +15865,27 @@
         }
       }
     },
-    "@angular-devkit/schematics": {
+    "@angular-devkit/core": {
       "version": "19.2.13",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-19.2.13.tgz",
-      "integrity": "sha512-NhSPz3lI9njEo8eMUlZVGtlXl12UcNZv5lWTBZY/FGWUu6P5ciD/9iJINbc1jiaDH5E/DLEicUNuai0Q91X4Nw==",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
+      "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "19.2.13",
+        "ajv": "8.17.1",
+        "ajv-formats": "3.0.1",
         "jsonc-parser": "3.3.1",
-        "magic-string": "0.30.17",
-        "ora": "5.4.1",
-        "rxjs": "7.8.1"
-      },
-      "dependencies": {
-        "@angular-devkit/core": {
-          "version": "19.2.13",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
-          "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
-          "dev": true,
-          "requires": {
-            "ajv": "8.17.1",
-            "ajv-formats": "3.0.1",
-            "jsonc-parser": "3.3.1",
-            "picomatch": "4.0.2",
-            "rxjs": "7.8.1",
-            "source-map": "0.7.4"
-          }
-        },
-        "ajv-formats": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
-          "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
-          "dev": true,
-          "requires": {
-            "ajv": "^8.0.0"
-          }
-        },
-        "chokidar": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-          "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-          "dev": true,
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "readdirp": "^4.0.1"
-          }
-        },
-        "picomatch": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-          "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-          "dev": true
-        },
-        "readdirp": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-          "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-          "dev": true,
-          "optional": true,
-          "peer": true
-        },
-        "rxjs": {
-          "version": "7.8.1",
-          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-          "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-          "dev": true,
-          "requires": {
-            "tslib": "^2.1.0"
-          }
-        }
-      }
-    },
-    "@angular-eslint/builder": {
-      "version": "19.4.0",
-      "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-19.4.0.tgz",
-      "integrity": "sha512-+mI/YwXiT+IPRNuTNrQqOm97iqbPM5Zc4fxR3p9N1xj1dxLyXJrtGXbbWJPK6i74ON7KdpkY3WLhMKnhWM4RzQ==",
-      "dev": true,
-      "requires": {
-        "@angular-devkit/architect": ">= 0.1900.0 < 0.2000.0",
-        "@angular-devkit/core": ">= 19.0.0 < 20.0.0"
+        "picomatch": "4.0.2",
+        "rxjs": "7.8.1",
+        "source-map": "0.7.4"
       },
       "dependencies": {
-        "@angular-devkit/core": {
-          "version": "19.2.12",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.12.tgz",
-          "integrity": "sha512-v5pdfZHZ8MTZozfpkhKoPFBpXQW+2GFbTfdyis8FBtevJWCbIsCR3xhodgI4jwzkSEAraN4oVtWvSytdNyBC6A==",
-          "dev": true,
-          "requires": {
-            "ajv": "8.17.1",
-            "ajv-formats": "3.0.1",
-            "jsonc-parser": "3.3.1",
-            "picomatch": "4.0.2",
-            "rxjs": "7.8.1",
-            "source-map": "0.7.4"
-          }
-        },
         "ajv-formats": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
           "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
-          "dev": true,
-          "requires": {
-            "ajv": "^8.0.0"
-          }
-        },
-        "chokidar": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-          "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-          "dev": true,
-          "optional": true,
-          "peer": true,
+          "dev": true,
           "requires": {
-            "readdirp": "^4.0.1"
+            "ajv": "^8.0.0"
           }
         },
         "picomatch": {
@@ -16572,14 +15894,30 @@
           "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
           "dev": true
         },
-        "readdirp": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-          "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+        "rxjs": {
+          "version": "7.8.1",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+          "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
           "dev": true,
-          "optional": true,
-          "peer": true
-        },
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
+      }
+    },
+    "@angular-devkit/schematics": {
+      "version": "19.2.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-19.2.13.tgz",
+      "integrity": "sha512-NhSPz3lI9njEo8eMUlZVGtlXl12UcNZv5lWTBZY/FGWUu6P5ciD/9iJINbc1jiaDH5E/DLEicUNuai0Q91X4Nw==",
+      "dev": true,
+      "requires": {
+        "@angular-devkit/core": "19.2.13",
+        "jsonc-parser": "3.3.1",
+        "magic-string": "0.30.17",
+        "ora": "5.4.1",
+        "rxjs": "7.8.1"
+      },
+      "dependencies": {
         "rxjs": {
           "version": "7.8.1",
           "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -16591,6 +15929,16 @@
         }
       }
     },
+    "@angular-eslint/builder": {
+      "version": "19.4.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-19.4.0.tgz",
+      "integrity": "sha512-+mI/YwXiT+IPRNuTNrQqOm97iqbPM5Zc4fxR3p9N1xj1dxLyXJrtGXbbWJPK6i74ON7KdpkY3WLhMKnhWM4RzQ==",
+      "dev": true,
+      "requires": {
+        "@angular-devkit/architect": ">= 0.1900.0 < 0.2000.0",
+        "@angular-devkit/core": ">= 19.0.0 < 20.0.0"
+      }
+    },
     "@angular-eslint/bundled-angular-compiler": {
       "version": "19.4.0",
       "resolved": "https://registry.npmjs.org/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-19.4.0.tgz",
@@ -16656,69 +16004,12 @@
         "strip-json-comments": "3.1.1"
       },
       "dependencies": {
-        "@angular-devkit/core": {
-          "version": "19.2.12",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.12.tgz",
-          "integrity": "sha512-v5pdfZHZ8MTZozfpkhKoPFBpXQW+2GFbTfdyis8FBtevJWCbIsCR3xhodgI4jwzkSEAraN4oVtWvSytdNyBC6A==",
-          "dev": true,
-          "requires": {
-            "ajv": "8.17.1",
-            "ajv-formats": "3.0.1",
-            "jsonc-parser": "3.3.1",
-            "picomatch": "4.0.2",
-            "rxjs": "7.8.1",
-            "source-map": "0.7.4"
-          }
-        },
-        "ajv-formats": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
-          "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
-          "dev": true,
-          "requires": {
-            "ajv": "^8.0.0"
-          }
-        },
-        "chokidar": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-          "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-          "dev": true,
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "readdirp": "^4.0.1"
-          }
-        },
         "ignore": {
           "version": "7.0.4",
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.4.tgz",
           "integrity": "sha512-gJzzk+PQNznz8ysRrC0aOkBNVRBDtE1n53IqyqEf3PXrYwomFs5q4pGMizBMJF+ykh03insJ27hB8gSrD2Hn8A==",
           "dev": true
         },
-        "picomatch": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-          "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-          "dev": true
-        },
-        "readdirp": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-          "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-          "dev": true,
-          "optional": true,
-          "peer": true
-        },
-        "rxjs": {
-          "version": "7.8.1",
-          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-          "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-          "dev": true,
-          "requires": {
-            "tslib": "^2.1.0"
-          }
-        },
         "semver": {
           "version": "7.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -16902,63 +16193,6 @@
         "yargs": "17.7.2"
       },
       "dependencies": {
-        "@angular-devkit/core": {
-          "version": "19.2.13",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
-          "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
-          "dev": true,
-          "requires": {
-            "ajv": "8.17.1",
-            "ajv-formats": "3.0.1",
-            "jsonc-parser": "3.3.1",
-            "picomatch": "4.0.2",
-            "rxjs": "7.8.1",
-            "source-map": "0.7.4"
-          }
-        },
-        "ajv-formats": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
-          "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
-          "dev": true,
-          "requires": {
-            "ajv": "^8.0.0"
-          }
-        },
-        "chokidar": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-          "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-          "dev": true,
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "readdirp": "^4.0.1"
-          }
-        },
-        "picomatch": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-          "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-          "dev": true
-        },
-        "readdirp": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-          "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-          "dev": true,
-          "optional": true,
-          "peer": true
-        },
-        "rxjs": {
-          "version": "7.8.1",
-          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-          "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-          "dev": true,
-          "requires": {
-            "tslib": "^2.1.0"
-          }
-        },
         "semver": {
           "version": "7.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -16997,23 +16231,6 @@
         "semver": "^7.0.0",
         "tslib": "^2.3.0",
         "yargs": "^17.2.1"
-      },
-      "dependencies": {
-        "chokidar": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-          "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-          "dev": true,
-          "requires": {
-            "readdirp": "^4.0.1"
-          }
-        },
-        "readdirp": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-          "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-          "dev": true
-        }
       }
     },
     "@angular/core": {
@@ -19058,6 +18275,48 @@
       "dev": true,
       "optional": true
     },
+    "@ngrx/effects": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-19.2.0.tgz",
+      "integrity": "sha512-DIoFdEdSehAMHUNTWIdl94HjhSh1ZRx0Rgtgp1TjHHyjLiS+vbMmDgPjrCkBv5lT/pEaKbHKnYxjY3CQiW2Hsg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "@ngrx/entity": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/entity/-/entity-19.2.0.tgz",
+      "integrity": "sha512-JxKFBk0LAHrmCGLQFQeT8mZhwTZPKzq0m0gqCtXgmtzHj9B/ln3yluTtBWgOEf07dDAkEX/q42Sr+kO+5kctvg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "@ngrx/eslint-plugin": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/eslint-plugin/-/eslint-plugin-19.2.0.tgz",
+      "integrity": "sha512-dOHjJCAsv8aI53EwFKh33wCgrx8W58Y3cvlt/+pu8WCIjVkRwZKXZH05ufEPdqp6+xKp0NZuP7fe/F82vaNF4g==",
+      "dev": true,
+      "requires": {
+        "semver": "^7.3.5",
+        "strip-json-comments": "3.1.1"
+      }
+    },
+    "@ngrx/store": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-19.2.0.tgz",
+      "integrity": "sha512-k2n/jLJZ75Z5rd5vPa2mXPYG/On2rFLiNdrccs9Dw2r+oJosORMlN5TbdsGHhVDFfjzbY9a7JbHUE3YOa69gqw==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "@ngrx/store-devtools": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/store-devtools/-/store-devtools-19.2.0.tgz",
+      "integrity": "sha512-AKlXHsuSRJgYYxmrXZ8WWnDxqgKMG0+HP+IIDmk5h5Z5RIkOLHk6ZGKbakhIiFlL8d16N+GcJ76rqUajaHT+0w==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@ngtools/webpack": {
       "version": "19.2.13",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-19.2.13.tgz",
@@ -19584,65 +18843,6 @@
         "@angular-devkit/core": "19.2.13",
         "@angular-devkit/schematics": "19.2.13",
         "jsonc-parser": "3.3.1"
-      },
-      "dependencies": {
-        "@angular-devkit/core": {
-          "version": "19.2.13",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.2.13.tgz",
-          "integrity": "sha512-iq73hE5Uvms1w3uMUSk4i4NDXDMQ863VAifX8LOTadhG6U0xISjNJ11763egVCxQmaKmg7zbG4rda88wHJATzA==",
-          "dev": true,
-          "requires": {
-            "ajv": "8.17.1",
-            "ajv-formats": "3.0.1",
-            "jsonc-parser": "3.3.1",
-            "picomatch": "4.0.2",
-            "rxjs": "7.8.1",
-            "source-map": "0.7.4"
-          }
-        },
-        "ajv-formats": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
-          "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
-          "dev": true,
-          "requires": {
-            "ajv": "^8.0.0"
-          }
-        },
-        "chokidar": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-          "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-          "dev": true,
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "readdirp": "^4.0.1"
-          }
-        },
-        "picomatch": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-          "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-          "dev": true
-        },
-        "readdirp": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-          "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-          "dev": true,
-          "optional": true,
-          "peer": true
-        },
-        "rxjs": {
-          "version": "7.8.1",
-          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-          "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-          "dev": true,
-          "requires": {
-            "tslib": "^2.1.0"
-          }
-        }
       }
     },
     "@sigstore/bundle": {
@@ -20835,19 +20035,12 @@
       "dev": true
     },
     "chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
       "dev": true,
       "requires": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "fsevents": "~2.3.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
+        "readdirp": "^4.0.1"
       }
     },
     "chownr": {
@@ -23044,6 +22237,22 @@
         "yargs": "^16.1.1"
       },
       "dependencies": {
+        "chokidar": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+          "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+          "dev": true,
+          "requires": {
+            "anymatch": "~3.1.2",
+            "braces": "~3.0.2",
+            "fsevents": "~2.3.2",
+            "glob-parent": "~5.1.2",
+            "is-binary-path": "~2.1.0",
+            "is-glob": "~4.0.1",
+            "normalize-path": "~3.0.0",
+            "readdirp": "~3.6.0"
+          }
+        },
         "cliui": {
           "version": "7.0.4",
           "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -23055,6 +22264,15 @@
             "wrap-ansi": "^7.0.0"
           }
         },
+        "readdirp": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+          "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+          "dev": true,
+          "requires": {
+            "picomatch": "^2.2.1"
+          }
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -24660,13 +23878,10 @@
       }
     },
     "readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "requires": {
-        "picomatch": "^2.2.1"
-      }
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true
     },
     "reflect-metadata": {
       "version": "0.2.2",
@@ -24918,23 +24133,6 @@
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
         "source-map-js": ">=0.6.2 <2.0.0"
-      },
-      "dependencies": {
-        "chokidar": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-          "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-          "dev": true,
-          "requires": {
-            "readdirp": "^4.0.1"
-          }
-        },
-        "readdirp": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-          "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-          "dev": true
-        }
       }
     },
     "sass-loader": {
@@ -25783,6 +24981,18 @@
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true
     },
+    "typescript-eslint": {
+      "version": "8.32.1",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.32.1.tgz",
+      "integrity": "sha512-D7el+eaDHAmXvrZBy1zpzSNIRqnCOrkwTgZxTu3MUqRWk8k0q9m9Ho4+vPf7iHtgUfrK/o8IZaEApsxPlHTFCg==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@typescript-eslint/eslint-plugin": "8.32.1",
+        "@typescript-eslint/parser": "8.32.1",
+        "@typescript-eslint/utils": "8.32.1"
+      }
+    },
     "ua-parser-js": {
       "version": "0.7.39",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.39.tgz",
@@ -26263,6 +25473,22 @@
         "ws": "^8.18.0"
       },
       "dependencies": {
+        "chokidar": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+          "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+          "dev": true,
+          "requires": {
+            "anymatch": "~3.1.2",
+            "braces": "~3.0.2",
+            "fsevents": "~2.3.2",
+            "glob-parent": "~5.1.2",
+            "is-binary-path": "~2.1.0",
+            "is-glob": "~4.0.1",
+            "normalize-path": "~3.0.0",
+            "readdirp": "~3.6.0"
+          }
+        },
         "http-proxy-middleware": {
           "version": "2.0.9",
           "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.9.tgz",
@@ -26275,6 +25501,15 @@
             "is-plain-obj": "^3.0.0",
             "micromatch": "^4.0.2"
           }
+        },
+        "readdirp": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+          "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+          "dev": true,
+          "requires": {
+            "picomatch": "^2.2.1"
+          }
         }
       }
     },
diff --git a/package.json b/package.json
index 487a614..c81a6dd 100644
--- a/package.json
+++ b/package.json
@@ -19,12 +19,17 @@
     "@angular/platform-browser": "^19.2.12",
     "@angular/platform-browser-dynamic": "^19.2.12",
     "@angular/router": "^19.2.12",
+    "@ngrx/effects": "^19.2.0",
+    "@ngrx/entity": "^19.2.0",
+    "@ngrx/store": "^19.2.0",
+    "@ngrx/store-devtools": "^19.2.0",
     "rxjs": "^7.8.2",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^19.2.13",
+    "@angular-devkit/core": "^19.2.13",
     "@angular-eslint/builder": "19.4.0",
     "@angular-eslint/eslint-plugin": "19.4.0",
     "@angular-eslint/eslint-plugin-template": "19.4.0",
@@ -32,6 +37,7 @@
     "@angular-eslint/template-parser": "19.4.0",
     "@angular/cli": "^19.2.13",
     "@angular/compiler-cli": "^19.2.12",
+    "@ngrx/eslint-plugin": "^19.2.0",
     "@types/jasmine": "^5.1.8",
     "@typescript-eslint/eslint-plugin": "8.32.1",
     "@typescript-eslint/parser": "8.32.1",
@@ -45,4 +51,4 @@
     "prettier": "^3.5.3",
     "typescript": "~5.8.3"
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/app-routes.ts b/src/app/app-routes.ts
index 50937f5..4f387b8 100644
--- a/src/app/app-routes.ts
+++ b/src/app/app-routes.ts
@@ -1,4 +1,9 @@
 import { Routes } from '@angular/router';
+import { provideEffects } from '@ngrx/effects';
+import { provideState } from '@ngrx/store';
+import { PostsService } from './posts/posts.service';
+import { PostsEffects } from './posts/state/posts.effects';
+import { postsFeature } from './posts/state/posts.reducer';
 
 export const appRoutes: Routes = [
   { path: '', redirectTo: '/posts', pathMatch: 'full' },
@@ -6,6 +11,11 @@ export const appRoutes: Routes = [
     path: 'posts',
     loadChildren: () =>
       import('./posts/posts.routes').then((mod) => mod.routes),
+    providers: [
+      PostsService,
+      provideState(postsFeature),
+      provideEffects(PostsEffects),
+    ],
   },
   {
     path: 'guest-book',
diff --git a/src/app/posts/posts-list/posts-list.component.html b/src/app/posts/posts-list/posts-list.component.html
index 9e88e54..d007319 100644
--- a/src/app/posts/posts-list/posts-list.component.html
+++ b/src/app/posts/posts-list/posts-list.component.html
@@ -1,8 +1,12 @@
-@for (post of posts(); track post.id) {
-  <div>
-    <p>{{ post.id }}</p>
-    <p>{{ post.userId }}</p>
-    <p>{{ post.title }}</p>
-    <p>{{ post.body }}</p>
-  </div>
+@if (errorMessage()) {
+  <p>Error: {{ errorMessage() }}</p>
+} @else {
+  @for (post of posts(); track post.id) {
+    <div>
+      <p>{{ post.id }}</p>
+      <p>{{ post.userId }}</p>
+      <p>{{ post.title }}</p>
+      <p>{{ post.body }}</p>
+    </div>
+  }
 }
diff --git a/src/app/posts/posts-list/posts-list.component.ts b/src/app/posts/posts-list/posts-list.component.ts
index 7619423..726024c 100644
--- a/src/app/posts/posts-list/posts-list.component.ts
+++ b/src/app/posts/posts-list/posts-list.component.ts
@@ -9,4 +9,5 @@ import { Post } from '../posts.model';
 })
 export class PostsListComponent {
   posts = input<Post[]>([]);
+  errorMessage = input<string>('');
 }
diff --git a/src/app/posts/posts-page/posts-page.component.html b/src/app/posts/posts-page/posts-page.component.html
index e7602ac..9414b8f 100644
--- a/src/app/posts/posts-page/posts-page.component.html
+++ b/src/app/posts/posts-page/posts-page.component.html
@@ -1 +1,5 @@
-<app-posts-list [posts]="posts()" />
+@if (loading()) {
+  <p>Loading...</p>
+} @else {
+  <app-posts-list [posts]="posts()" [errorMessage]="errorMessage()" />
+}
diff --git a/src/app/posts/posts-page/posts-page.component.ts b/src/app/posts/posts-page/posts-page.component.ts
index 174671f..241b324 100644
--- a/src/app/posts/posts-page/posts-page.component.ts
+++ b/src/app/posts/posts-page/posts-page.component.ts
@@ -1,6 +1,13 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { PostsListComponent } from '../posts-list/posts-list.component';
-import { PostsService } from '../posts.service';
+import { Store } from '@ngrx/store';
+import { PostsState } from '../state/posts.reducer';
+import { PostsPageActions } from '../state/posts.actions';
+import {
+  selectPosts,
+  selectPostsErrorMessage,
+  selectPostsLoading,
+} from '../state/posts.selectors';
 
 @Component({
   selector: 'app-posts-page',
@@ -8,8 +15,14 @@ import { PostsService } from '../posts.service';
   templateUrl: './posts-page.component.html',
   styleUrl: './posts-page.component.scss',
 })
-export class PostsPageComponent {
-  private service = inject(PostsService);
+export class PostsPageComponent implements OnInit {
+  private store = inject(Store<PostsState>);
 
-  readonly posts = this.service.posts;
+  posts = this.store.selectSignal(selectPosts);
+  loading = this.store.selectSignal(selectPostsLoading);
+  errorMessage = this.store.selectSignal(selectPostsErrorMessage);
+
+  ngOnInit(): void {
+    this.store.dispatch(PostsPageActions.pageOpened());
+  }
 }
diff --git a/src/app/posts/posts.service.ts b/src/app/posts/posts.service.ts
index 6dd3f22..8c4ce05 100644
--- a/src/app/posts/posts.service.ts
+++ b/src/app/posts/posts.service.ts
@@ -1,23 +1,25 @@
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
+import { catchError, delay, throwError } from 'rxjs';
 import { Post } from './posts.model';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { HttpClient } from '@angular/common/http';
-import { delay } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
 })
 export class PostsService {
-  private readonly postsUrl = 'https://jsonplaceholder.typicode.com/posts';
+  private postsUrl = 'https://jsonplaceholder.typicode.com/posts';
 
-  private readonly http = inject(HttpClient);
+  private http = inject(HttpClient);
 
   constructor() {}
 
-  // TODO: Error handling
   getPosts() {
-    return this.http.get<Post[]>(this.postsUrl).pipe(delay(2000)); // TODO: Remove delay
+    return this.http
+      .get<Post[]>(this.postsUrl)
+      .pipe(delay(2000), catchError(this.handleError)); // TODO: Remove delay
   }
 
-  posts = toSignal(this.getPosts(), { initialValue: [] });
+  private handleError({ status }: HttpErrorResponse) {
+    return throwError(() => `${status}: An error occured.`);
+  }
 }
diff --git a/src/app/posts/state/posts.actions.ts b/src/app/posts/state/posts.actions.ts
new file mode 100644
index 0000000..7f2d897
--- /dev/null
+++ b/src/app/posts/state/posts.actions.ts
@@ -0,0 +1,17 @@
+import { createActionGroup, emptyProps, props } from '@ngrx/store';
+import { Post } from '../posts.model';
+
+export const PostsPageActions = createActionGroup({
+  source: 'Posts Page',
+  events: {
+    'Page Opened': emptyProps(),
+  },
+});
+
+export const PostsApiActions = createActionGroup({
+  source: 'Posts API',
+  events: {
+    'Posts Loaded Success': props<{ posts: Post[] }>(),
+    'Posts Loaded Fail': props<{ message: string }>(),
+  },
+});
diff --git a/src/app/posts/state/posts.effects.ts b/src/app/posts/state/posts.effects.ts
new file mode 100644
index 0000000..08a1d06
--- /dev/null
+++ b/src/app/posts/state/posts.effects.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { PostsService } from '../posts.service';
+import { PostsApiActions, PostsPageActions } from './posts.actions';
+import { catchError, exhaustMap, map, of } from 'rxjs';
+
+@Injectable()
+export class PostsEffects {
+  loadPosts$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(PostsPageActions.pageOpened),
+      exhaustMap(() =>
+        this.postsService.getPosts().pipe(
+          map((posts) => PostsApiActions.postsLoadedSuccess({ posts })),
+          catchError((error) =>
+            of(PostsApiActions.postsLoadedFail({ message: error })),
+          ),
+        ),
+      ),
+    ),
+  );
+
+  constructor(
+    private actions$: Actions,
+    private postsService: PostsService,
+  ) {}
+}
diff --git a/src/app/posts/state/posts.reducer.ts b/src/app/posts/state/posts.reducer.ts
new file mode 100644
index 0000000..11f3906
--- /dev/null
+++ b/src/app/posts/state/posts.reducer.ts
@@ -0,0 +1,43 @@
+import { createEntityAdapter, EntityState } from '@ngrx/entity';
+import { Post } from '../posts.model';
+import { createFeature, createReducer, on } from '@ngrx/store';
+import { PostsApiActions, PostsPageActions } from './posts.actions';
+
+export interface PostsState extends EntityState<Post> {
+  loading: boolean;
+  errorMessage: string;
+}
+
+const adapter = createEntityAdapter<Post>({});
+
+const initialState: PostsState = adapter.getInitialState({
+  loading: false,
+  errorMessage: '',
+});
+
+export const postsFeature = createFeature({
+  name: 'posts',
+  reducer: createReducer(
+    initialState,
+    on(PostsPageActions.pageOpened, (state) => ({
+      ...state,
+      loading: true,
+      errorMessage: '',
+    })),
+    on(PostsApiActions.postsLoadedSuccess, (state, { posts }) =>
+      adapter.addMany(posts, {
+        ...state,
+        loading: false,
+      }),
+    ),
+    on(PostsApiActions.postsLoadedFail, (state, { message }) => ({
+      ...state,
+      loading: false,
+      errorMessage: message,
+    })),
+  ),
+});
+
+const { selectAll } = adapter.getSelectors();
+
+export const selectPosts = selectAll;
diff --git a/src/app/posts/state/posts.selectors.ts b/src/app/posts/state/posts.selectors.ts
new file mode 100644
index 0000000..be27d93
--- /dev/null
+++ b/src/app/posts/state/posts.selectors.ts
@@ -0,0 +1,20 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import * as reducer from './posts.reducer';
+
+export const selectPostsState =
+  createFeatureSelector<reducer.PostsState>('posts');
+
+export const selectPosts = createSelector(
+  selectPostsState,
+  reducer.selectPosts,
+);
+
+export const selectPostsLoading = createSelector(
+  selectPostsState,
+  (state) => state.loading,
+);
+
+export const selectPostsErrorMessage = createSelector(
+  selectPostsState,
+  (state) => state.errorMessage,
+);
diff --git a/src/main.ts b/src/main.ts
index b5bf82d..863cb65 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,7 +3,17 @@ import { provideRouter } from '@angular/router';
 import { appRoutes } from './app/app-routes';
 import { AppComponent } from './app/app.component';
 import { provideHttpClient } from '@angular/common/http';
+import { provideStore } from '@ngrx/store';
+import { provideEffects } from '@ngrx/effects';
+import { provideStoreDevtools } from '@ngrx/store-devtools';
+import { isDevMode } from '@angular/core';
 
 bootstrapApplication(AppComponent, {
-  providers: [provideRouter(appRoutes), provideHttpClient()],
+  providers: [
+    provideHttpClient(),
+    provideStore(),
+    provideRouter(appRoutes),
+    provideEffects(),
+    provideStoreDevtools({ maxAge: 25, logOnly: !isDevMode() }),
+  ],
 }).catch((err) => console.error(err));

From 1f91348cae9c195583d35aec9eec7c19b8d9e44c Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Thu, 22 May 2025 14:00:34 +0300
Subject: [PATCH 05/22] Add Angular Material

---
 angular.json                                  |  2 +
 package-lock.json                             | 57 +++++++++++++++++--
 package.json                                  |  2 +
 src/app/app.component.html                    | 20 ++++++-
 src/app/app.component.scss                    |  3 +
 src/app/app.component.ts                      | 23 ++++++--
 .../posts-list/posts-list.component.html      | 20 +++++--
 .../posts-list/posts-list.component.scss      |  3 +
 .../posts/posts-list/posts-list.component.ts  |  5 +-
 src/app/posts/posts.service.ts                |  2 +-
 .../site-header/site-header.component.html    | 20 -------
 .../site-header/site-header.component.scss    |  0
 .../site-header/site-header.component.spec.ts | 23 --------
 src/app/site-header/site-header.component.ts  | 10 ----
 src/index.html                                |  4 +-
 src/styles.scss                               | 12 +++-
 16 files changed, 132 insertions(+), 74 deletions(-)
 delete mode 100644 src/app/site-header/site-header.component.html
 delete mode 100644 src/app/site-header/site-header.component.scss
 delete mode 100644 src/app/site-header/site-header.component.spec.ts
 delete mode 100644 src/app/site-header/site-header.component.ts

diff --git a/angular.json b/angular.json
index b5db2fb..08bed92 100644
--- a/angular.json
+++ b/angular.json
@@ -31,6 +31,7 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.scss"
             ],
             "scripts": [],
@@ -93,6 +94,7 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.scss"
             ],
             "scripts": []
diff --git a/package-lock.json b/package-lock.json
index 82fece7..e31878f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,10 +9,12 @@
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "^19.2.12",
+        "@angular/cdk": "^19.2.17",
         "@angular/common": "^19.2.12",
         "@angular/compiler": "^19.2.12",
         "@angular/core": "^19.2.12",
         "@angular/forms": "^19.2.12",
+        "@angular/material": "^19.2.17",
         "@angular/platform-browser": "^19.2.12",
         "@angular/platform-browser-dynamic": "^19.2.12",
         "@angular/router": "^19.2.12",
@@ -912,6 +914,21 @@
         }
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "19.2.17",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.2.17.tgz",
+      "integrity": "sha512-3jG33S+5+kqymCRwQlcSEWlY5rYwkKxe0onln+NXxT0/kteR02vWvv1+Li4/QqSr5JvsGHEhAFsZaR9QtOzbdA==",
+      "license": "MIT",
+      "dependencies": {
+        "parse5": "^7.1.2",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^19.0.0 || ^20.0.0",
+        "@angular/core": "^19.0.0 || ^20.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/cli": {
       "version": "19.2.13",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.2.13.tgz",
@@ -1050,6 +1067,23 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "19.2.17",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-19.2.17.tgz",
+      "integrity": "sha512-IyA+KP+uUj3r9loqGJrj7qAiEBckj7EVIdV0jlYwqWIUyKWeJ3R88GmLPMH2BgtBU3R/WkS2blXDI0yvRhKfww==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "19.2.17",
+        "@angular/common": "^19.0.0 || ^20.0.0",
+        "@angular/core": "^19.0.0 || ^20.0.0",
+        "@angular/forms": "^19.0.0 || ^20.0.0",
+        "@angular/platform-browser": "^19.0.0 || ^20.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "19.2.12",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.2.12.tgz",
@@ -12354,7 +12388,6 @@
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
       "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^6.0.0"
@@ -12395,7 +12428,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.0.tgz",
       "integrity": "sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -16168,6 +16200,15 @@
         }
       }
     },
+    "@angular/cdk": {
+      "version": "19.2.17",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.2.17.tgz",
+      "integrity": "sha512-3jG33S+5+kqymCRwQlcSEWlY5rYwkKxe0onln+NXxT0/kteR02vWvv1+Li4/QqSr5JvsGHEhAFsZaR9QtOzbdA==",
+      "requires": {
+        "parse5": "^7.1.2",
+        "tslib": "^2.3.0"
+      }
+    },
     "@angular/cli": {
       "version": "19.2.13",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.2.13.tgz",
@@ -16249,6 +16290,14 @@
         "tslib": "^2.3.0"
       }
     },
+    "@angular/material": {
+      "version": "19.2.17",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-19.2.17.tgz",
+      "integrity": "sha512-IyA+KP+uUj3r9loqGJrj7qAiEBckj7EVIdV0jlYwqWIUyKWeJ3R88GmLPMH2BgtBU3R/WkS2blXDI0yvRhKfww==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "19.2.12",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.2.12.tgz",
@@ -23549,7 +23598,6 @@
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
       "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
-      "dev": true,
       "requires": {
         "entities": "^6.0.0"
       },
@@ -23557,8 +23605,7 @@
         "entities": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.0.tgz",
-          "integrity": "sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw==",
-          "dev": true
+          "integrity": "sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw=="
         }
       }
     },
diff --git a/package.json b/package.json
index c81a6dd..b6abff6 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^19.2.12",
+    "@angular/cdk": "^19.2.17",
     "@angular/common": "^19.2.12",
     "@angular/compiler": "^19.2.12",
     "@angular/core": "^19.2.12",
     "@angular/forms": "^19.2.12",
+    "@angular/material": "^19.2.17",
     "@angular/platform-browser": "^19.2.12",
     "@angular/platform-browser-dynamic": "^19.2.12",
     "@angular/router": "^19.2.12",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index f6aa5ba..ea99b07 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,2 +1,18 @@
-<app-site-header></app-site-header>
-<router-outlet></router-outlet>
+<nav mat-tab-nav-bar [tabPanel]="tabPanel">
+  @for (route of routes; track route.url) {
+    <a
+      [routerLink]="route.url"
+      routerLinkActive
+      #rla="routerLinkActive"
+      mat-tab-link
+      [active]="rla.isActive"
+    >
+      {{ route.title }}
+    </a>
+  }
+</nav>
+<mat-tab-nav-panel #tabPanel>
+  <main class="main">
+    <router-outlet />
+  </main>
+</mat-tab-nav-panel>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29..25a9afa 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,3 @@
+.main {
+  padding: 16px;
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index b2dba55..321d922 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,11 +1,26 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import { SiteHeaderComponent } from './site-header/site-header.component';
+import { MatTabLink, MatTabNav, MatTabNavPanel } from '@angular/material/tabs';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, SiteHeaderComponent],
+  imports: [
+    RouterOutlet,
+    RouterLink,
+    RouterLinkActive,
+    MatTabNav,
+    MatTabNavPanel,
+    MatTabLink,
+  ],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent {}
+export class AppComponent {
+  readonly routes = [
+    {
+      url: '/posts',
+      title: 'Posts',
+    },
+    { url: '/guest-book', title: 'Guest Book' },
+  ];
+}
diff --git a/src/app/posts/posts-list/posts-list.component.html b/src/app/posts/posts-list/posts-list.component.html
index d007319..43fe8b1 100644
--- a/src/app/posts/posts-list/posts-list.component.html
+++ b/src/app/posts/posts-list/posts-list.component.html
@@ -2,11 +2,19 @@
   <p>Error: {{ errorMessage() }}</p>
 } @else {
   @for (post of posts(); track post.id) {
-    <div>
-      <p>{{ post.id }}</p>
-      <p>{{ post.userId }}</p>
-      <p>{{ post.title }}</p>
-      <p>{{ post.body }}</p>
-    </div>
+    <mat-card class="post">
+      <mat-card-header>
+        <mat-card-title>
+          {{ post.title }}
+        </mat-card-title>
+        <mat-card-subtitle> {{ post.userId }} TODO: Author </mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content>
+        <p>{{ post.body }}</p>
+      </mat-card-content>
+      <mat-card-actions>
+        <a mat-button routerLink="/posts/1">Learn More</a>
+      </mat-card-actions>
+    </mat-card>
   }
 }
diff --git a/src/app/posts/posts-list/posts-list.component.scss b/src/app/posts/posts-list/posts-list.component.scss
index e69de29..9a42079 100644
--- a/src/app/posts/posts-list/posts-list.component.scss
+++ b/src/app/posts/posts-list/posts-list.component.scss
@@ -0,0 +1,3 @@
+.post:not(:first-child) {
+  margin-top: 16px;
+}
diff --git a/src/app/posts/posts-list/posts-list.component.ts b/src/app/posts/posts-list/posts-list.component.ts
index 726024c..df6715c 100644
--- a/src/app/posts/posts-list/posts-list.component.ts
+++ b/src/app/posts/posts-list/posts-list.component.ts
@@ -1,9 +1,12 @@
 import { Component, input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { RouterLink } from '@angular/router';
 import { Post } from '../posts.model';
 
 @Component({
   selector: 'app-posts-list',
-  imports: [],
+  imports: [MatCardModule, MatButtonModule, RouterLink],
   templateUrl: './posts-list.component.html',
   styleUrl: './posts-list.component.scss',
 })
diff --git a/src/app/posts/posts.service.ts b/src/app/posts/posts.service.ts
index 8c4ce05..43f50c2 100644
--- a/src/app/posts/posts.service.ts
+++ b/src/app/posts/posts.service.ts
@@ -16,7 +16,7 @@ export class PostsService {
   getPosts() {
     return this.http
       .get<Post[]>(this.postsUrl)
-      .pipe(delay(2000), catchError(this.handleError)); // TODO: Remove delay
+      .pipe(catchError(this.handleError));
   }
 
   private handleError({ status }: HttpErrorResponse) {
diff --git a/src/app/site-header/site-header.component.html b/src/app/site-header/site-header.component.html
deleted file mode 100644
index 7f9e3f4..0000000
--- a/src/app/site-header/site-header.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<nav>
-  <ul>
-    <li>
-      <a
-        routerLink="/posts"
-        routerLinkActive="active"
-        ariaCurrentWhenActive="page"
-        >Blog Posts</a
-      >
-    </li>
-    <li>
-      <a
-        routerLink="/guest-book"
-        routerLinkActive="active"
-        ariaCurrentWhenActive="page"
-        >Guest Book</a
-      >
-    </li>
-  </ul>
-</nav>
diff --git a/src/app/site-header/site-header.component.scss b/src/app/site-header/site-header.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/site-header/site-header.component.spec.ts b/src/app/site-header/site-header.component.spec.ts
deleted file mode 100644
index 162d5ea..0000000
--- a/src/app/site-header/site-header.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SiteHeaderComponent } from './site-header.component';
-
-describe('SiteHeaderComponent', () => {
-  let component: SiteHeaderComponent;
-  let fixture: ComponentFixture<SiteHeaderComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SiteHeaderComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(SiteHeaderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/site-header/site-header.component.ts b/src/app/site-header/site-header.component.ts
deleted file mode 100644
index 984f503..0000000
--- a/src/app/site-header/site-header.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-
-@Component({
-  selector: 'app-site-header',
-  imports: [RouterLink, RouterLinkActive],
-  templateUrl: './site-header.component.html',
-  styleUrl: './site-header.component.scss',
-})
-export class SiteHeaderComponent {}
diff --git a/src/index.html b/src/index.html
index 98d504c..962c936 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,8 +6,10 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>
diff --git a/src/styles.scss b/src/styles.scss
index 90d4ee0..6fd1929 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1 +1,11 @@
-/* You can add global styles to this file, and also import other style files */
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: roboto, "helvetica neue", sans-serif;
+  background: var(--mat-sys-surface);
+  color: var(--mat-sys-on-surface);
+}

From 0cd97c5ff0cd7365239002f8da2db824c9e4a860 Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Thu, 22 May 2025 16:14:40 +0300
Subject: [PATCH 06/22] Add user loading

---
 src/app/app-routes.ts                         |  5 ++-
 .../post-details/post-details.component.html  | 21 +++++++++
 .../post-details/post-details.component.scss  |  0
 .../post-details.component.spec.ts            | 23 ++++++++++
 .../post-details/post-details.component.ts    | 19 ++++++++
 .../posts-list/posts-list.component.html      | 21 +++------
 .../posts-list/posts-list.component.scss      |  6 ++-
 .../posts/posts-list/posts-list.component.ts  |  8 ++--
 .../posts-page/posts-page.component.html      |  6 ++-
 .../posts/posts-page/posts-page.component.ts  | 10 ++++-
 src/app/posts/posts.service.ts                |  5 +--
 src/app/posts/state/posts.reducer.ts          |  2 +-
 src/app/posts/state/posts.selectors.ts        |  5 ++-
 src/app/users/state/users.actions.ts          | 10 +++++
 src/app/users/state/users.effects.ts          | 28 ++++++++++++
 src/app/users/state/users.reducer.ts          | 45 +++++++++++++++++++
 src/app/users/state/users.selectors.ts        | 26 +++++++++++
 src/app/users/user.model.ts                   |  3 ++
 src/app/users/users.service.spec.ts           | 16 +++++++
 src/app/users/users.service.ts                | 25 +++++++++++
 src/index.html                                | 30 ++++++++-----
 21 files changed, 269 insertions(+), 45 deletions(-)
 create mode 100644 src/app/posts/post-details/post-details.component.html
 create mode 100644 src/app/posts/post-details/post-details.component.scss
 create mode 100644 src/app/posts/post-details/post-details.component.spec.ts
 create mode 100644 src/app/posts/post-details/post-details.component.ts
 create mode 100644 src/app/users/state/users.actions.ts
 create mode 100644 src/app/users/state/users.effects.ts
 create mode 100644 src/app/users/state/users.reducer.ts
 create mode 100644 src/app/users/state/users.selectors.ts
 create mode 100644 src/app/users/user.model.ts
 create mode 100644 src/app/users/users.service.spec.ts
 create mode 100644 src/app/users/users.service.ts

diff --git a/src/app/app-routes.ts b/src/app/app-routes.ts
index 4f387b8..d8caee6 100644
--- a/src/app/app-routes.ts
+++ b/src/app/app-routes.ts
@@ -4,6 +4,8 @@ import { provideState } from '@ngrx/store';
 import { PostsService } from './posts/posts.service';
 import { PostsEffects } from './posts/state/posts.effects';
 import { postsFeature } from './posts/state/posts.reducer';
+import { UsersEffects } from './users/state/users.effects';
+import { usersFeature } from './users/state/users.reducer';
 
 export const appRoutes: Routes = [
   { path: '', redirectTo: '/posts', pathMatch: 'full' },
@@ -14,7 +16,8 @@ export const appRoutes: Routes = [
     providers: [
       PostsService,
       provideState(postsFeature),
-      provideEffects(PostsEffects),
+      provideState(usersFeature),
+      provideEffects(PostsEffects, UsersEffects),
     ],
   },
   {
diff --git a/src/app/posts/post-details/post-details.component.html b/src/app/posts/post-details/post-details.component.html
new file mode 100644
index 0000000..a91ad95
--- /dev/null
+++ b/src/app/posts/post-details/post-details.component.html
@@ -0,0 +1,21 @@
+<mat-card class="post">
+  <mat-card-header>
+    <mat-card-title>
+      {{ post().title }}
+    </mat-card-title>
+    <mat-card-subtitle>
+      {{ user()?.name ?? "..." }}
+    </mat-card-subtitle>
+  </mat-card-header>
+  <mat-card-content>
+    <p>{{ post().body }}</p>
+  </mat-card-content>
+  @if (showActions()) {
+    <mat-card-actions>
+      <a mat-button [routerLink]="post().id.toString()">
+        <mat-icon>comment</mat-icon>
+        Comments</a
+      >
+    </mat-card-actions>
+  }
+</mat-card>
diff --git a/src/app/posts/post-details/post-details.component.scss b/src/app/posts/post-details/post-details.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/posts/post-details/post-details.component.spec.ts b/src/app/posts/post-details/post-details.component.spec.ts
new file mode 100644
index 0000000..da8d790
--- /dev/null
+++ b/src/app/posts/post-details/post-details.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostDetailsComponent } from './post-details.component';
+
+describe('PostDetailsComponent', () => {
+  let component: PostDetailsComponent;
+  let fixture: ComponentFixture<PostDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PostDetailsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PostDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/posts/post-details/post-details.component.ts b/src/app/posts/post-details/post-details.component.ts
new file mode 100644
index 0000000..34a792c
--- /dev/null
+++ b/src/app/posts/post-details/post-details.component.ts
@@ -0,0 +1,19 @@
+import { Component, input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIcon } from '@angular/material/icon';
+import { RouterLink } from '@angular/router';
+import { User } from 'src/app/users/user.model';
+import { Post } from '../posts.model';
+
+@Component({
+  selector: 'app-post-details',
+  imports: [MatCardModule, MatButtonModule, RouterLink, MatIcon],
+  templateUrl: './post-details.component.html',
+  styleUrl: './post-details.component.scss',
+})
+export class PostDetailsComponent {
+  post = input.required<Post>();
+  user = input<User>();
+  showActions = input<boolean>(true);
+}
diff --git a/src/app/posts/posts-list/posts-list.component.html b/src/app/posts/posts-list/posts-list.component.html
index 43fe8b1..6059737 100644
--- a/src/app/posts/posts-list/posts-list.component.html
+++ b/src/app/posts/posts-list/posts-list.component.html
@@ -1,20 +1,9 @@
 @if (errorMessage()) {
   <p>Error: {{ errorMessage() }}</p>
 } @else {
-  @for (post of posts(); track post.id) {
-    <mat-card class="post">
-      <mat-card-header>
-        <mat-card-title>
-          {{ post.title }}
-        </mat-card-title>
-        <mat-card-subtitle> {{ post.userId }} TODO: Author </mat-card-subtitle>
-      </mat-card-header>
-      <mat-card-content>
-        <p>{{ post.body }}</p>
-      </mat-card-content>
-      <mat-card-actions>
-        <a mat-button routerLink="/posts/1">Learn More</a>
-      </mat-card-actions>
-    </mat-card>
-  }
+  <div class="posts">
+    @for (post of posts(); track post.id) {
+      <app-post-details [post]="post" [user]="users()[post.userId]" />
+    }
+  </div>
 }
diff --git a/src/app/posts/posts-list/posts-list.component.scss b/src/app/posts/posts-list/posts-list.component.scss
index 9a42079..a38905f 100644
--- a/src/app/posts/posts-list/posts-list.component.scss
+++ b/src/app/posts/posts-list/posts-list.component.scss
@@ -1,3 +1,5 @@
-.post:not(:first-child) {
-  margin-top: 16px;
+.posts {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
diff --git a/src/app/posts/posts-list/posts-list.component.ts b/src/app/posts/posts-list/posts-list.component.ts
index df6715c..d3e0074 100644
--- a/src/app/posts/posts-list/posts-list.component.ts
+++ b/src/app/posts/posts-list/posts-list.component.ts
@@ -1,16 +1,16 @@
 import { Component, input } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
-import { RouterLink } from '@angular/router';
+import { User } from 'src/app/users/user.model';
+import { PostDetailsComponent } from '../post-details/post-details.component';
 import { Post } from '../posts.model';
 
 @Component({
   selector: 'app-posts-list',
-  imports: [MatCardModule, MatButtonModule, RouterLink],
+  imports: [PostDetailsComponent],
   templateUrl: './posts-list.component.html',
   styleUrl: './posts-list.component.scss',
 })
 export class PostsListComponent {
   posts = input<Post[]>([]);
+  users = input<Record<string, User | undefined>>({});
   errorMessage = input<string>('');
 }
diff --git a/src/app/posts/posts-page/posts-page.component.html b/src/app/posts/posts-page/posts-page.component.html
index 9414b8f..a3b17b9 100644
--- a/src/app/posts/posts-page/posts-page.component.html
+++ b/src/app/posts/posts-page/posts-page.component.html
@@ -1,5 +1,9 @@
 @if (loading()) {
   <p>Loading...</p>
 } @else {
-  <app-posts-list [posts]="posts()" [errorMessage]="errorMessage()" />
+  <app-posts-list
+    [posts]="posts()"
+    [users]="users()"
+    [errorMessage]="errorMessage()"
+  />
 }
diff --git a/src/app/posts/posts-page/posts-page.component.ts b/src/app/posts/posts-page/posts-page.component.ts
index 241b324..5455376 100644
--- a/src/app/posts/posts-page/posts-page.component.ts
+++ b/src/app/posts/posts-page/posts-page.component.ts
@@ -1,8 +1,12 @@
 import { Component, inject, OnInit } from '@angular/core';
-import { PostsListComponent } from '../posts-list/posts-list.component';
 import { Store } from '@ngrx/store';
-import { PostsState } from '../state/posts.reducer';
+import {
+  selectUsers,
+  selectUsersDictionary,
+} from 'src/app/users/state/users.selectors';
+import { PostsListComponent } from '../posts-list/posts-list.component';
 import { PostsPageActions } from '../state/posts.actions';
+import { PostsState } from '../state/posts.reducer';
 import {
   selectPosts,
   selectPostsErrorMessage,
@@ -19,6 +23,8 @@ export class PostsPageComponent implements OnInit {
   private store = inject(Store<PostsState>);
 
   posts = this.store.selectSignal(selectPosts);
+  users = this.store.selectSignal(selectUsersDictionary);
+  users2 = this.store.selectSignal(selectUsers);
   loading = this.store.selectSignal(selectPostsLoading);
   errorMessage = this.store.selectSignal(selectPostsErrorMessage);
 
diff --git a/src/app/posts/posts.service.ts b/src/app/posts/posts.service.ts
index 43f50c2..fdfada2 100644
--- a/src/app/posts/posts.service.ts
+++ b/src/app/posts/posts.service.ts
@@ -1,6 +1,6 @@
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
-import { catchError, delay, throwError } from 'rxjs';
+import { catchError, throwError } from 'rxjs';
 import { Post } from './posts.model';
 
 @Injectable({
@@ -8,11 +8,8 @@ import { Post } from './posts.model';
 })
 export class PostsService {
   private postsUrl = 'https://jsonplaceholder.typicode.com/posts';
-
   private http = inject(HttpClient);
 
-  constructor() {}
-
   getPosts() {
     return this.http
       .get<Post[]>(this.postsUrl)
diff --git a/src/app/posts/state/posts.reducer.ts b/src/app/posts/state/posts.reducer.ts
index 11f3906..55beafe 100644
--- a/src/app/posts/state/posts.reducer.ts
+++ b/src/app/posts/state/posts.reducer.ts
@@ -1,6 +1,6 @@
 import { createEntityAdapter, EntityState } from '@ngrx/entity';
-import { Post } from '../posts.model';
 import { createFeature, createReducer, on } from '@ngrx/store';
+import { Post } from '../posts.model';
 import { PostsApiActions, PostsPageActions } from './posts.actions';
 
 export interface PostsState extends EntityState<Post> {
diff --git a/src/app/posts/state/posts.selectors.ts b/src/app/posts/state/posts.selectors.ts
index be27d93..62bb04f 100644
--- a/src/app/posts/state/posts.selectors.ts
+++ b/src/app/posts/state/posts.selectors.ts
@@ -1,8 +1,9 @@
 import { createFeatureSelector, createSelector } from '@ngrx/store';
 import * as reducer from './posts.reducer';
 
-export const selectPostsState =
-  createFeatureSelector<reducer.PostsState>('posts');
+const selectPostsState = createFeatureSelector<reducer.PostsState>(
+  reducer.postsFeature.name,
+);
 
 export const selectPosts = createSelector(
   selectPostsState,
diff --git a/src/app/users/state/users.actions.ts b/src/app/users/state/users.actions.ts
new file mode 100644
index 0000000..209cb80
--- /dev/null
+++ b/src/app/users/state/users.actions.ts
@@ -0,0 +1,10 @@
+import { createActionGroup, props } from '@ngrx/store';
+import { User } from '../user.model';
+
+export const UsersApiActions = createActionGroup({
+  source: 'Users API',
+  events: {
+    'Users Loaded Success': props<{ users: User[] }>(),
+    'Users Loaded Fail': props<{ message: string }>(),
+  },
+});
diff --git a/src/app/users/state/users.effects.ts b/src/app/users/state/users.effects.ts
new file mode 100644
index 0000000..e5d425d
--- /dev/null
+++ b/src/app/users/state/users.effects.ts
@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { catchError, exhaustMap, map, of } from 'rxjs';
+import { PostsPageActions } from 'src/app/posts/state/posts.actions';
+import { UsersService } from '../users.service';
+import { UsersApiActions } from './users.actions';
+
+@Injectable()
+export class UsersEffects {
+  loadPosts$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(PostsPageActions.pageOpened),
+      exhaustMap(() =>
+        this.usersService.getUsers().pipe(
+          map((users) => UsersApiActions.usersLoadedSuccess({ users })),
+          catchError((error) =>
+            of(UsersApiActions.usersLoadedFail({ message: error })),
+          ),
+        ),
+      ),
+    ),
+  );
+
+  constructor(
+    private actions$: Actions,
+    private usersService: UsersService,
+  ) {}
+}
diff --git a/src/app/users/state/users.reducer.ts b/src/app/users/state/users.reducer.ts
new file mode 100644
index 0000000..99358dd
--- /dev/null
+++ b/src/app/users/state/users.reducer.ts
@@ -0,0 +1,45 @@
+import { createEntityAdapter, EntityState } from '@ngrx/entity';
+import { createFeature, createReducer, on } from '@ngrx/store';
+import { PostsPageActions } from 'src/app/posts/state/posts.actions';
+import { User } from '../user.model';
+import { UsersApiActions } from './users.actions';
+
+export interface UsersState extends EntityState<User> {
+  loading: boolean;
+  errorMessage: string;
+}
+
+const adapter = createEntityAdapter<User>({});
+
+const initialState: UsersState = adapter.getInitialState({
+  loading: false,
+  errorMessage: '',
+});
+
+export const usersFeature = createFeature({
+  name: 'users',
+  reducer: createReducer(
+    initialState,
+    on(PostsPageActions.pageOpened, (state) => ({
+      ...state,
+      loading: true,
+      errorMessage: '',
+    })),
+    on(UsersApiActions.usersLoadedSuccess, (state, { users }) =>
+      adapter.addMany(users, {
+        ...state,
+        loading: false,
+      }),
+    ),
+    on(UsersApiActions.usersLoadedFail, (state, { message }) => ({
+      ...state,
+      loading: false,
+      errorMessage: message,
+    })),
+  ),
+});
+
+const { selectAll, selectEntities } = adapter.getSelectors();
+
+export const selectUsers = selectAll;
+export const selectUsersDictionary = selectEntities;
diff --git a/src/app/users/state/users.selectors.ts b/src/app/users/state/users.selectors.ts
new file mode 100644
index 0000000..c8590af
--- /dev/null
+++ b/src/app/users/state/users.selectors.ts
@@ -0,0 +1,26 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import * as reducer from './users.reducer';
+
+const selectUsersState = createFeatureSelector<reducer.UsersState>(
+  reducer.usersFeature.name,
+);
+
+export const selectUsers = createSelector(
+  selectUsersState,
+  reducer.selectUsers,
+);
+
+export const selectUsersDictionary = createSelector(
+  selectUsersState,
+  reducer.selectUsersDictionary,
+);
+
+export const selectUsersLoading = createSelector(
+  selectUsersState,
+  (state) => state.loading,
+);
+
+export const selectUsersErrorMessage = createSelector(
+  selectUsersState,
+  (state) => state.errorMessage,
+);
diff --git a/src/app/users/user.model.ts b/src/app/users/user.model.ts
new file mode 100644
index 0000000..c664619
--- /dev/null
+++ b/src/app/users/user.model.ts
@@ -0,0 +1,3 @@
+export interface User {
+  name: string;
+}
diff --git a/src/app/users/users.service.spec.ts b/src/app/users/users.service.spec.ts
new file mode 100644
index 0000000..f81244a
--- /dev/null
+++ b/src/app/users/users.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UsersService } from './users.service';
+
+describe('UsersService', () => {
+  let service: UsersService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UsersService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/users/users.service.ts b/src/app/users/users.service.ts
new file mode 100644
index 0000000..2aceb17
--- /dev/null
+++ b/src/app/users/users.service.ts
@@ -0,0 +1,25 @@
+import { HttpClient } from '@angular/common/http';
+import { HttpErrorResponse } from '@angular/common/module.d-CnjH8Dlt';
+import { inject, Injectable } from '@angular/core';
+import { catchError, throwError } from 'rxjs';
+import { User } from './user.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UsersService {
+  private usersUrl = 'https://jsonplaceholder.typicode.com/users';
+  constructor() {}
+  private http = inject(HttpClient);
+
+  getUsers() {
+    return this.http
+      .get<User[]>(this.usersUrl)
+      .pipe(catchError(this.handleError));
+  }
+
+  private handleError({ status }: HttpErrorResponse) {
+    // TODO: unify error handling
+    return throwError(() => `${status}: An error occured.`);
+  }
+}
diff --git a/src/index.html b/src/index.html
index 962c936..c6ef901 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,15 +1,21 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>AngularTemplate</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-</head>
-<body class="mat-typography">
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Angular Training - Dmitrijs Savkins</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="mat-typography">
+    <app-root></app-root>
+  </body>
 </html>

From db22478d36512d900a7bfb6c3e20babb4502533e Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Thu, 22 May 2025 17:15:23 +0300
Subject: [PATCH 07/22] Add post details page

---
 package-lock.json                             | 25 +++++++++++++++
 package.json                                  |  1 +
 .../posts/post-page/post-page.component.html  |  3 ++
 .../posts/post-page/post-page.component.scss  |  0
 .../post-page/post-page.component.spec.ts     | 23 +++++++++++++
 .../posts/post-page/post-page.component.ts    | 32 +++++++++++++++++++
 .../posts/posts-page/posts-page.component.ts  |  8 ++---
 src/app/posts/posts.routes.ts                 |  5 +++
 src/app/posts/state/posts.actions.ts          |  7 ++++
 src/app/posts/state/posts.effects.ts          | 16 ++++++++--
 src/app/posts/state/posts.reducer.ts          | 10 ++++--
 src/app/posts/state/posts.selectors.ts        | 17 ++++++++++
 src/app/router.selectors.ts                   |  3 ++
 src/app/users/state/users.effects.ts          | 15 +++++++--
 src/app/users/state/users.reducer.ts          | 13 +++++---
 src/app/users/state/users.selectors.ts        | 12 +++++--
 src/main.ts                                   | 16 ++++++----
 17 files changed, 179 insertions(+), 27 deletions(-)
 create mode 100644 src/app/posts/post-page/post-page.component.html
 create mode 100644 src/app/posts/post-page/post-page.component.scss
 create mode 100644 src/app/posts/post-page/post-page.component.spec.ts
 create mode 100644 src/app/posts/post-page/post-page.component.ts
 create mode 100644 src/app/router.selectors.ts

diff --git a/package-lock.json b/package-lock.json
index e31878f..9751d15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@angular/router": "^19.2.12",
         "@ngrx/effects": "^19.2.0",
         "@ngrx/entity": "^19.2.0",
+        "@ngrx/router-store": "^19.2.0",
         "@ngrx/store": "^19.2.0",
         "@ngrx/store-devtools": "^19.2.0",
         "rxjs": "^7.8.2",
@@ -4643,6 +4644,22 @@
         "typescript-eslint": "^8.0.0"
       }
     },
+    "node_modules/@ngrx/router-store": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-19.2.0.tgz",
+      "integrity": "sha512-emR6Y+NIcFxFt1QsyDdMIVhkuGEzawGZM5yOo8A6kUZljzf88S/7tHXQRKLz1Vy2fpDRZDO6r/0eagW0JDMfLA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^19.0.0",
+        "@angular/core": "^19.0.0",
+        "@angular/router": "^19.0.0",
+        "@ngrx/store": "19.2.0",
+        "rxjs": "^6.5.3 || ^7.5.0"
+      }
+    },
     "node_modules/@ngrx/store": {
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-19.2.0.tgz",
@@ -18350,6 +18367,14 @@
         "strip-json-comments": "3.1.1"
       }
     },
+    "@ngrx/router-store": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-19.2.0.tgz",
+      "integrity": "sha512-emR6Y+NIcFxFt1QsyDdMIVhkuGEzawGZM5yOo8A6kUZljzf88S/7tHXQRKLz1Vy2fpDRZDO6r/0eagW0JDMfLA==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@ngrx/store": {
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-19.2.0.tgz",
diff --git a/package.json b/package.json
index b6abff6..75e7871 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@angular/router": "^19.2.12",
     "@ngrx/effects": "^19.2.0",
     "@ngrx/entity": "^19.2.0",
+    "@ngrx/router-store": "^19.2.0",
     "@ngrx/store": "^19.2.0",
     "@ngrx/store-devtools": "^19.2.0",
     "rxjs": "^7.8.2",
diff --git a/src/app/posts/post-page/post-page.component.html b/src/app/posts/post-page/post-page.component.html
new file mode 100644
index 0000000..01fc99f
--- /dev/null
+++ b/src/app/posts/post-page/post-page.component.html
@@ -0,0 +1,3 @@
+@if (post()) {
+  <app-post-details [post]="post()!" [user]="user()" [showActions]="false" />
+}
diff --git a/src/app/posts/post-page/post-page.component.scss b/src/app/posts/post-page/post-page.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/posts/post-page/post-page.component.spec.ts b/src/app/posts/post-page/post-page.component.spec.ts
new file mode 100644
index 0000000..6bb5a12
--- /dev/null
+++ b/src/app/posts/post-page/post-page.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostPageComponent } from './post-page.component';
+
+describe('PostPageComponent', () => {
+  let component: PostPageComponent;
+  let fixture: ComponentFixture<PostPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PostPageComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PostPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/posts/post-page/post-page.component.ts b/src/app/posts/post-page/post-page.component.ts
new file mode 100644
index 0000000..fd39c6f
--- /dev/null
+++ b/src/app/posts/post-page/post-page.component.ts
@@ -0,0 +1,32 @@
+import { Component, computed, inject, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { selectUsersEntities } from 'src/app/users/state/users.selectors';
+import { PostDetailsComponent } from '../post-details/post-details.component';
+import { PostPageActions } from '../state/posts.actions';
+import { PostsState } from '../state/posts.reducer';
+import { selectPostById } from '../state/posts.selectors';
+
+@Component({
+  selector: 'app-post-page',
+  imports: [PostDetailsComponent],
+  templateUrl: './post-page.component.html',
+  styleUrl: './post-page.component.scss',
+})
+export class PostPageComponent implements OnInit {
+  private store = inject(Store<PostsState>);
+
+  post = this.store.selectSignal(selectPostById);
+
+  private users = this.store.selectSignal(selectUsersEntities);
+  user = computed(() => {
+    if (!this.post()) {
+      return undefined;
+    }
+
+    return this.users()[this.post()!.userId];
+  });
+
+  ngOnInit(): void {
+    this.store.dispatch(PostPageActions.pageOpened());
+  }
+}
diff --git a/src/app/posts/posts-page/posts-page.component.ts b/src/app/posts/posts-page/posts-page.component.ts
index 5455376..d38b202 100644
--- a/src/app/posts/posts-page/posts-page.component.ts
+++ b/src/app/posts/posts-page/posts-page.component.ts
@@ -1,9 +1,6 @@
 import { Component, inject, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
-import {
-  selectUsers,
-  selectUsersDictionary,
-} from 'src/app/users/state/users.selectors';
+import { selectUsersEntities } from 'src/app/users/state/users.selectors';
 import { PostsListComponent } from '../posts-list/posts-list.component';
 import { PostsPageActions } from '../state/posts.actions';
 import { PostsState } from '../state/posts.reducer';
@@ -23,8 +20,7 @@ export class PostsPageComponent implements OnInit {
   private store = inject(Store<PostsState>);
 
   posts = this.store.selectSignal(selectPosts);
-  users = this.store.selectSignal(selectUsersDictionary);
-  users2 = this.store.selectSignal(selectUsers);
+  users = this.store.selectSignal(selectUsersEntities);
   loading = this.store.selectSignal(selectPostsLoading);
   errorMessage = this.store.selectSignal(selectPostsErrorMessage);
 
diff --git a/src/app/posts/posts.routes.ts b/src/app/posts/posts.routes.ts
index aee0309..49a75b8 100644
--- a/src/app/posts/posts.routes.ts
+++ b/src/app/posts/posts.routes.ts
@@ -1,4 +1,5 @@
 import { Routes } from '@angular/router';
+import { PostPageComponent } from './post-page/post-page.component';
 import { PostsPageComponent } from './posts-page/posts-page.component';
 
 export const routes: Routes = [
@@ -6,4 +7,8 @@ export const routes: Routes = [
     path: '',
     component: PostsPageComponent,
   },
+  {
+    path: ':id',
+    component: PostPageComponent,
+  },
 ];
diff --git a/src/app/posts/state/posts.actions.ts b/src/app/posts/state/posts.actions.ts
index 7f2d897..5d8b516 100644
--- a/src/app/posts/state/posts.actions.ts
+++ b/src/app/posts/state/posts.actions.ts
@@ -8,6 +8,13 @@ export const PostsPageActions = createActionGroup({
   },
 });
 
+export const PostPageActions = createActionGroup({
+  source: 'Post Page',
+  events: {
+    'Page Opened': emptyProps(),
+  },
+});
+
 export const PostsApiActions = createActionGroup({
   source: 'Posts API',
   events: {
diff --git a/src/app/posts/state/posts.effects.ts b/src/app/posts/state/posts.effects.ts
index 08a1d06..1b91983 100644
--- a/src/app/posts/state/posts.effects.ts
+++ b/src/app/posts/state/posts.effects.ts
@@ -1,14 +1,23 @@
 import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { Store } from '@ngrx/store';
+import { catchError, exhaustMap, filter, map, of, withLatestFrom } from 'rxjs';
 import { PostsService } from '../posts.service';
-import { PostsApiActions, PostsPageActions } from './posts.actions';
-import { catchError, exhaustMap, map, of } from 'rxjs';
+import {
+  PostPageActions,
+  PostsApiActions,
+  PostsPageActions,
+} from './posts.actions';
+import { PostsState } from './posts.reducer';
+import { selectPostsLoaded } from './posts.selectors';
 
 @Injectable()
 export class PostsEffects {
   loadPosts$ = createEffect(() =>
     this.actions$.pipe(
-      ofType(PostsPageActions.pageOpened),
+      ofType(PostsPageActions.pageOpened, PostPageActions.pageOpened),
+      withLatestFrom(this.store.select(selectPostsLoaded)),
+      filter((_, loaded) => !loaded),
       exhaustMap(() =>
         this.postsService.getPosts().pipe(
           map((posts) => PostsApiActions.postsLoadedSuccess({ posts })),
@@ -22,6 +31,7 @@ export class PostsEffects {
 
   constructor(
     private actions$: Actions,
+    private store: Store<PostsState>,
     private postsService: PostsService,
   ) {}
 }
diff --git a/src/app/posts/state/posts.reducer.ts b/src/app/posts/state/posts.reducer.ts
index 55beafe..7d5ee1f 100644
--- a/src/app/posts/state/posts.reducer.ts
+++ b/src/app/posts/state/posts.reducer.ts
@@ -5,6 +5,7 @@ import { PostsApiActions, PostsPageActions } from './posts.actions';
 
 export interface PostsState extends EntityState<Post> {
   loading: boolean;
+  loaded: boolean;
   errorMessage: string;
 }
 
@@ -12,6 +13,7 @@ const adapter = createEntityAdapter<Post>({});
 
 const initialState: PostsState = adapter.getInitialState({
   loading: false,
+  loaded: false,
   errorMessage: '',
 });
 
@@ -19,15 +21,16 @@ export const postsFeature = createFeature({
   name: 'posts',
   reducer: createReducer(
     initialState,
-    on(PostsPageActions.pageOpened, (state) => ({
+    on(PostsPageActions.pageOpened, PostsPageActions.pageOpened, (state) => ({
       ...state,
-      loading: true,
+      loading: !state.loaded,
       errorMessage: '',
     })),
     on(PostsApiActions.postsLoadedSuccess, (state, { posts }) =>
       adapter.addMany(posts, {
         ...state,
         loading: false,
+        loaded: true,
       }),
     ),
     on(PostsApiActions.postsLoadedFail, (state, { message }) => ({
@@ -38,6 +41,7 @@ export const postsFeature = createFeature({
   ),
 });
 
-const { selectAll } = adapter.getSelectors();
+const { selectAll, selectEntities } = adapter.getSelectors();
 
 export const selectPosts = selectAll;
+export const selectPostsEntities = selectEntities;
diff --git a/src/app/posts/state/posts.selectors.ts b/src/app/posts/state/posts.selectors.ts
index 62bb04f..0f81a30 100644
--- a/src/app/posts/state/posts.selectors.ts
+++ b/src/app/posts/state/posts.selectors.ts
@@ -1,4 +1,5 @@
 import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { selectRouteParam } from 'src/app/router.selectors';
 import * as reducer from './posts.reducer';
 
 const selectPostsState = createFeatureSelector<reducer.PostsState>(
@@ -10,11 +11,27 @@ export const selectPosts = createSelector(
   reducer.selectPosts,
 );
 
+export const selectPostsEntities = createSelector(
+  selectPostsState,
+  reducer.selectPostsEntities,
+);
+
+export const selectPostById = createSelector(
+  selectPostsEntities,
+  selectRouteParam('id'),
+  (entities, id) => (id ? entities[id] : undefined),
+);
+
 export const selectPostsLoading = createSelector(
   selectPostsState,
   (state) => state.loading,
 );
 
+export const selectPostsLoaded = createSelector(
+  selectPostsState,
+  (state) => state.loaded,
+);
+
 export const selectPostsErrorMessage = createSelector(
   selectPostsState,
   (state) => state.errorMessage,
diff --git a/src/app/router.selectors.ts b/src/app/router.selectors.ts
new file mode 100644
index 0000000..da0ee42
--- /dev/null
+++ b/src/app/router.selectors.ts
@@ -0,0 +1,3 @@
+import { getRouterSelectors } from '@ngrx/router-store';
+
+export const { selectRouteParam } = getRouterSelectors();
diff --git a/src/app/users/state/users.effects.ts b/src/app/users/state/users.effects.ts
index e5d425d..908d271 100644
--- a/src/app/users/state/users.effects.ts
+++ b/src/app/users/state/users.effects.ts
@@ -1,15 +1,23 @@
 import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
-import { catchError, exhaustMap, map, of } from 'rxjs';
-import { PostsPageActions } from 'src/app/posts/state/posts.actions';
+import { Store } from '@ngrx/store';
+import { catchError, exhaustMap, filter, map, of, withLatestFrom } from 'rxjs';
+import {
+  PostPageActions,
+  PostsPageActions,
+} from 'src/app/posts/state/posts.actions';
 import { UsersService } from '../users.service';
 import { UsersApiActions } from './users.actions';
+import { UsersState } from './users.reducer';
+import { selectUsersLoaded } from './users.selectors';
 
 @Injectable()
 export class UsersEffects {
   loadPosts$ = createEffect(() =>
     this.actions$.pipe(
-      ofType(PostsPageActions.pageOpened),
+      ofType(PostsPageActions.pageOpened, PostPageActions.pageOpened),
+      withLatestFrom(this.store.select(selectUsersLoaded)),
+      filter((_, loaded) => !loaded),
       exhaustMap(() =>
         this.usersService.getUsers().pipe(
           map((users) => UsersApiActions.usersLoadedSuccess({ users })),
@@ -23,6 +31,7 @@ export class UsersEffects {
 
   constructor(
     private actions$: Actions,
+    private store: Store<UsersState>,
     private usersService: UsersService,
   ) {}
 }
diff --git a/src/app/users/state/users.reducer.ts b/src/app/users/state/users.reducer.ts
index 99358dd..c14005c 100644
--- a/src/app/users/state/users.reducer.ts
+++ b/src/app/users/state/users.reducer.ts
@@ -1,11 +1,15 @@
 import { createEntityAdapter, EntityState } from '@ngrx/entity';
 import { createFeature, createReducer, on } from '@ngrx/store';
-import { PostsPageActions } from 'src/app/posts/state/posts.actions';
+import {
+  PostPageActions,
+  PostsPageActions,
+} from 'src/app/posts/state/posts.actions';
 import { User } from '../user.model';
 import { UsersApiActions } from './users.actions';
 
 export interface UsersState extends EntityState<User> {
   loading: boolean;
+  loaded: boolean;
   errorMessage: string;
 }
 
@@ -13,6 +17,7 @@ const adapter = createEntityAdapter<User>({});
 
 const initialState: UsersState = adapter.getInitialState({
   loading: false,
+  loaded: false,
   errorMessage: '',
 });
 
@@ -20,9 +25,9 @@ export const usersFeature = createFeature({
   name: 'users',
   reducer: createReducer(
     initialState,
-    on(PostsPageActions.pageOpened, (state) => ({
+    on(PostsPageActions.pageOpened, PostPageActions.pageOpened, (state) => ({
       ...state,
-      loading: true,
+      loading: !state.loaded,
       errorMessage: '',
     })),
     on(UsersApiActions.usersLoadedSuccess, (state, { users }) =>
@@ -42,4 +47,4 @@ export const usersFeature = createFeature({
 const { selectAll, selectEntities } = adapter.getSelectors();
 
 export const selectUsers = selectAll;
-export const selectUsersDictionary = selectEntities;
+export const selectUsersEntities = selectEntities;
diff --git a/src/app/users/state/users.selectors.ts b/src/app/users/state/users.selectors.ts
index c8590af..d8a3eea 100644
--- a/src/app/users/state/users.selectors.ts
+++ b/src/app/users/state/users.selectors.ts
@@ -10,9 +10,12 @@ export const selectUsers = createSelector(
   reducer.selectUsers,
 );
 
-export const selectUsersDictionary = createSelector(
+export const selectUserById = (id: number) =>
+  createSelector(selectUsersEntities, (entities) => entities[id]);
+
+export const selectUsersEntities = createSelector(
   selectUsersState,
-  reducer.selectUsersDictionary,
+  reducer.selectUsersEntities,
 );
 
 export const selectUsersLoading = createSelector(
@@ -20,6 +23,11 @@ export const selectUsersLoading = createSelector(
   (state) => state.loading,
 );
 
+export const selectUsersLoaded = createSelector(
+  selectUsersState,
+  (state) => state.loaded,
+);
+
 export const selectUsersErrorMessage = createSelector(
   selectUsersState,
   (state) => state.errorMessage,
diff --git a/src/main.ts b/src/main.ts
index 863cb65..d7b476c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,18 +1,22 @@
+import { provideHttpClient } from '@angular/common/http';
+import { isDevMode } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { provideRouter } from '@angular/router';
-import { appRoutes } from './app/app-routes';
-import { AppComponent } from './app/app.component';
-import { provideHttpClient } from '@angular/common/http';
-import { provideStore } from '@ngrx/store';
 import { provideEffects } from '@ngrx/effects';
+import { provideRouterStore, routerReducer } from '@ngrx/router-store';
+import { provideStore } from '@ngrx/store';
 import { provideStoreDevtools } from '@ngrx/store-devtools';
-import { isDevMode } from '@angular/core';
+import { appRoutes } from './app/app-routes';
+import { AppComponent } from './app/app.component';
 
 bootstrapApplication(AppComponent, {
   providers: [
     provideHttpClient(),
-    provideStore(),
     provideRouter(appRoutes),
+    provideStore({
+      router: routerReducer,
+    }),
+    provideRouterStore(),
     provideEffects(),
     provideStoreDevtools({ maxAge: 25, logOnly: !isDevMode() }),
   ],

From 9c9b0dd8feb722cd6d865f5aba4d9cb0ae43a451 Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Thu, 22 May 2025 19:40:20 +0300
Subject: [PATCH 08/22] Fix ESLint

---
 .eslintrc.json                                | 55 -----------------
 eslint.config.mjs                             | 61 +++++++++++++++++++
 package-lock.json                             | 23 +++++++
 package.json                                  |  3 +
 .../posts/post-page/post-page.component.ts    |  3 +-
 .../posts/posts-page/posts-page.component.ts  |  3 +-
 src/app/posts/state/posts.effects.ts          | 16 ++---
 src/app/posts/state/posts.reducer.ts          | 27 +++++---
 src/app/users/state/users.effects.ts          | 16 ++---
 src/app/users/state/users.reducer.ts          | 27 +++++---
 10 files changed, 139 insertions(+), 95 deletions(-)
 delete mode 100644 .eslintrc.json
 create mode 100644 eslint.config.mjs

diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 4e94f06..0000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,55 +0,0 @@
-{
-  "root": true,
-  "ignorePatterns": [
-    "projects/**/*"
-  ],
-  "overrides": [
-    {
-      "files": [
-        "*.ts"
-      ],
-      "extends": [
-        "eslint:recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:@angular-eslint/recommended",
-        "plugin:@angular-eslint/template/process-inline-templates"
-      ],
-      "rules": {
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": "app",
-            "style": "camelCase"
-          }
-        ],
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "app",
-            "style": "kebab-case"
-          }
-        ]
-      }
-    },
-    {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@angular-eslint/template/recommended",
-        "plugin:@angular-eslint/template/accessibility"
-      ],
-      "rules": {}
-    },
-    {
-      "files": [
-        "*.ts"
-      ],
-      "extends": [
-        "plugin:@ngrx/all"
-      ]
-    }
-  ]
-}
\ No newline at end of file
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..87cf8da
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,61 @@
+import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
+import { defineConfig, globalIgnores } from "eslint/config";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default defineConfig([
+  globalIgnores(["projects/**/*", ".angular"]),
+  {
+    files: ["**/*.ts"],
+
+    extends: compat.extends(
+      "eslint:recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:@angular-eslint/recommended",
+      "plugin:@angular-eslint/template/process-inline-templates",
+    ),
+
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "app",
+          style: "camelCase",
+        },
+      ],
+
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "app",
+          style: "kebab-case",
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+
+    extends: compat.extends(
+      "plugin:@angular-eslint/template/recommended",
+      "plugin:@angular-eslint/template/accessibility",
+    ),
+
+    rules: {},
+  },
+  {
+    files: ["**/*.ts"],
+    extends: compat.extends("plugin:@ngrx/all"),
+  },
+]);
diff --git a/package-lock.json b/package-lock.json
index 9751d15..ab54af8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@angular/router": "^19.2.12",
         "@ngrx/effects": "^19.2.0",
         "@ngrx/entity": "^19.2.0",
+        "@ngrx/operators": "^19.2.0",
         "@ngrx/router-store": "^19.2.0",
         "@ngrx/store": "^19.2.0",
         "@ngrx/store-devtools": "^19.2.0",
@@ -37,6 +38,8 @@
         "@angular-eslint/template-parser": "19.4.0",
         "@angular/cli": "^19.2.13",
         "@angular/compiler-cli": "^19.2.12",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "^9.27.0",
         "@ngrx/eslint-plugin": "^19.2.0",
         "@types/jasmine": "^5.1.8",
         "@typescript-eslint/eslint-plugin": "8.32.1",
@@ -4644,6 +4647,18 @@
         "typescript-eslint": "^8.0.0"
       }
     },
+    "node_modules/@ngrx/operators": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/operators/-/operators-19.2.0.tgz",
+      "integrity": "sha512-kv3hFlpWbZxfyILvQAJT2JNbsRGauUIj67U6zOUd8psD7qoJdtdUAZmr/LUgu/6/tweYDUj1mcQJfvaudik0ZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@ngrx/router-store": {
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-19.2.0.tgz",
@@ -18367,6 +18382,14 @@
         "strip-json-comments": "3.1.1"
       }
     },
+    "@ngrx/operators": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/operators/-/operators-19.2.0.tgz",
+      "integrity": "sha512-kv3hFlpWbZxfyILvQAJT2JNbsRGauUIj67U6zOUd8psD7qoJdtdUAZmr/LUgu/6/tweYDUj1mcQJfvaudik0ZQ==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "@ngrx/router-store": {
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-19.2.0.tgz",
diff --git a/package.json b/package.json
index 75e7871..cadafea 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@angular/router": "^19.2.12",
     "@ngrx/effects": "^19.2.0",
     "@ngrx/entity": "^19.2.0",
+    "@ngrx/operators": "^19.2.0",
     "@ngrx/router-store": "^19.2.0",
     "@ngrx/store": "^19.2.0",
     "@ngrx/store-devtools": "^19.2.0",
@@ -40,6 +41,8 @@
     "@angular-eslint/template-parser": "19.4.0",
     "@angular/cli": "^19.2.13",
     "@angular/compiler-cli": "^19.2.12",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.27.0",
     "@ngrx/eslint-plugin": "^19.2.0",
     "@types/jasmine": "^5.1.8",
     "@typescript-eslint/eslint-plugin": "8.32.1",
diff --git a/src/app/posts/post-page/post-page.component.ts b/src/app/posts/post-page/post-page.component.ts
index fd39c6f..bc6975d 100644
--- a/src/app/posts/post-page/post-page.component.ts
+++ b/src/app/posts/post-page/post-page.component.ts
@@ -3,7 +3,6 @@ import { Store } from '@ngrx/store';
 import { selectUsersEntities } from 'src/app/users/state/users.selectors';
 import { PostDetailsComponent } from '../post-details/post-details.component';
 import { PostPageActions } from '../state/posts.actions';
-import { PostsState } from '../state/posts.reducer';
 import { selectPostById } from '../state/posts.selectors';
 
 @Component({
@@ -13,7 +12,7 @@ import { selectPostById } from '../state/posts.selectors';
   styleUrl: './post-page.component.scss',
 })
 export class PostPageComponent implements OnInit {
-  private store = inject(Store<PostsState>);
+  private store = inject(Store);
 
   post = this.store.selectSignal(selectPostById);
 
diff --git a/src/app/posts/posts-page/posts-page.component.ts b/src/app/posts/posts-page/posts-page.component.ts
index d38b202..4103b7b 100644
--- a/src/app/posts/posts-page/posts-page.component.ts
+++ b/src/app/posts/posts-page/posts-page.component.ts
@@ -3,7 +3,6 @@ import { Store } from '@ngrx/store';
 import { selectUsersEntities } from 'src/app/users/state/users.selectors';
 import { PostsListComponent } from '../posts-list/posts-list.component';
 import { PostsPageActions } from '../state/posts.actions';
-import { PostsState } from '../state/posts.reducer';
 import {
   selectPosts,
   selectPostsErrorMessage,
@@ -17,7 +16,7 @@ import {
   styleUrl: './posts-page.component.scss',
 })
 export class PostsPageComponent implements OnInit {
-  private store = inject(Store<PostsState>);
+  private store = inject(Store);
 
   posts = this.store.selectSignal(selectPosts);
   users = this.store.selectSignal(selectUsersEntities);
diff --git a/src/app/posts/state/posts.effects.ts b/src/app/posts/state/posts.effects.ts
index 1b91983..dcca79f 100644
--- a/src/app/posts/state/posts.effects.ts
+++ b/src/app/posts/state/posts.effects.ts
@@ -1,22 +1,22 @@
 import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { concatLatestFrom } from '@ngrx/operators';
 import { Store } from '@ngrx/store';
-import { catchError, exhaustMap, filter, map, of, withLatestFrom } from 'rxjs';
+import { catchError, exhaustMap, filter, map, of } from 'rxjs';
 import { PostsService } from '../posts.service';
 import {
   PostPageActions,
   PostsApiActions,
   PostsPageActions,
 } from './posts.actions';
-import { PostsState } from './posts.reducer';
 import { selectPostsLoaded } from './posts.selectors';
 
 @Injectable()
 export class PostsEffects {
-  loadPosts$ = createEffect(() =>
-    this.actions$.pipe(
+  loadPosts$ = createEffect(() => {
+    return this.actions$.pipe(
       ofType(PostsPageActions.pageOpened, PostPageActions.pageOpened),
-      withLatestFrom(this.store.select(selectPostsLoaded)),
+      concatLatestFrom(() => this.store.select(selectPostsLoaded)),
       filter((_, loaded) => !loaded),
       exhaustMap(() =>
         this.postsService.getPosts().pipe(
@@ -26,12 +26,12 @@ export class PostsEffects {
           ),
         ),
       ),
-    ),
-  );
+    );
+  });
 
   constructor(
     private actions$: Actions,
-    private store: Store<PostsState>,
+    private store: Store,
     private postsService: PostsService,
   ) {}
 }
diff --git a/src/app/posts/state/posts.reducer.ts b/src/app/posts/state/posts.reducer.ts
index 7d5ee1f..40efcd8 100644
--- a/src/app/posts/state/posts.reducer.ts
+++ b/src/app/posts/state/posts.reducer.ts
@@ -21,11 +21,15 @@ export const postsFeature = createFeature({
   name: 'posts',
   reducer: createReducer(
     initialState,
-    on(PostsPageActions.pageOpened, PostsPageActions.pageOpened, (state) => ({
-      ...state,
-      loading: !state.loaded,
-      errorMessage: '',
-    })),
+    on(
+      PostsPageActions.pageOpened,
+      PostsPageActions.pageOpened,
+      (state): PostsState => ({
+        ...state,
+        loading: !state.loaded,
+        errorMessage: '',
+      }),
+    ),
     on(PostsApiActions.postsLoadedSuccess, (state, { posts }) =>
       adapter.addMany(posts, {
         ...state,
@@ -33,11 +37,14 @@ export const postsFeature = createFeature({
         loaded: true,
       }),
     ),
-    on(PostsApiActions.postsLoadedFail, (state, { message }) => ({
-      ...state,
-      loading: false,
-      errorMessage: message,
-    })),
+    on(
+      PostsApiActions.postsLoadedFail,
+      (state, { message }): PostsState => ({
+        ...state,
+        loading: false,
+        errorMessage: message,
+      }),
+    ),
   ),
 });
 
diff --git a/src/app/users/state/users.effects.ts b/src/app/users/state/users.effects.ts
index 908d271..174b791 100644
--- a/src/app/users/state/users.effects.ts
+++ b/src/app/users/state/users.effects.ts
@@ -1,22 +1,22 @@
 import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { concatLatestFrom } from '@ngrx/operators';
 import { Store } from '@ngrx/store';
-import { catchError, exhaustMap, filter, map, of, withLatestFrom } from 'rxjs';
+import { catchError, exhaustMap, filter, map, of } from 'rxjs';
 import {
   PostPageActions,
   PostsPageActions,
 } from 'src/app/posts/state/posts.actions';
 import { UsersService } from '../users.service';
 import { UsersApiActions } from './users.actions';
-import { UsersState } from './users.reducer';
 import { selectUsersLoaded } from './users.selectors';
 
 @Injectable()
 export class UsersEffects {
-  loadPosts$ = createEffect(() =>
-    this.actions$.pipe(
+  loadPosts$ = createEffect(() => {
+    return this.actions$.pipe(
       ofType(PostsPageActions.pageOpened, PostPageActions.pageOpened),
-      withLatestFrom(this.store.select(selectUsersLoaded)),
+      concatLatestFrom(() => this.store.select(selectUsersLoaded)),
       filter((_, loaded) => !loaded),
       exhaustMap(() =>
         this.usersService.getUsers().pipe(
@@ -26,12 +26,12 @@ export class UsersEffects {
           ),
         ),
       ),
-    ),
-  );
+    );
+  });
 
   constructor(
     private actions$: Actions,
-    private store: Store<UsersState>,
+    private store: Store,
     private usersService: UsersService,
   ) {}
 }
diff --git a/src/app/users/state/users.reducer.ts b/src/app/users/state/users.reducer.ts
index c14005c..29ab9fe 100644
--- a/src/app/users/state/users.reducer.ts
+++ b/src/app/users/state/users.reducer.ts
@@ -25,22 +25,29 @@ export const usersFeature = createFeature({
   name: 'users',
   reducer: createReducer(
     initialState,
-    on(PostsPageActions.pageOpened, PostPageActions.pageOpened, (state) => ({
-      ...state,
-      loading: !state.loaded,
-      errorMessage: '',
-    })),
+    on(
+      PostsPageActions.pageOpened,
+      PostPageActions.pageOpened,
+      (state): UsersState => ({
+        ...state,
+        loading: !state.loaded,
+        errorMessage: '',
+      }),
+    ),
     on(UsersApiActions.usersLoadedSuccess, (state, { users }) =>
       adapter.addMany(users, {
         ...state,
         loading: false,
       }),
     ),
-    on(UsersApiActions.usersLoadedFail, (state, { message }) => ({
-      ...state,
-      loading: false,
-      errorMessage: message,
-    })),
+    on(
+      UsersApiActions.usersLoadedFail,
+      (state, { message }): UsersState => ({
+        ...state,
+        loading: false,
+        errorMessage: message,
+      }),
+    ),
   ),
 });
 

From 9d3a9dd660a1923b96b0f3390665c328b2aa12ec Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Thu, 22 May 2025 19:58:04 +0300
Subject: [PATCH 09/22] Enable OnPush change detection

---
 src/app/posts/post-details/post-details.component.ts | 3 ++-
 src/app/posts/posts-list/posts-list.component.ts     | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/posts/post-details/post-details.component.ts b/src/app/posts/post-details/post-details.component.ts
index 34a792c..d000bf9 100644
--- a/src/app/posts/post-details/post-details.component.ts
+++ b/src/app/posts/post-details/post-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIcon } from '@angular/material/icon';
@@ -11,6 +11,7 @@ import { Post } from '../posts.model';
   imports: [MatCardModule, MatButtonModule, RouterLink, MatIcon],
   templateUrl: './post-details.component.html',
   styleUrl: './post-details.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PostDetailsComponent {
   post = input.required<Post>();
diff --git a/src/app/posts/posts-list/posts-list.component.ts b/src/app/posts/posts-list/posts-list.component.ts
index d3e0074..498790f 100644
--- a/src/app/posts/posts-list/posts-list.component.ts
+++ b/src/app/posts/posts-list/posts-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { User } from 'src/app/users/user.model';
 import { PostDetailsComponent } from '../post-details/post-details.component';
 import { Post } from '../posts.model';
@@ -8,6 +8,7 @@ import { Post } from '../posts.model';
   imports: [PostDetailsComponent],
   templateUrl: './posts-list.component.html',
   styleUrl: './posts-list.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PostsListComponent {
   posts = input<Post[]>([]);

From 3b2e87659021e96cb0a75915ef7c8d729adff4d0 Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Fri, 23 May 2025 16:21:01 +0300
Subject: [PATCH 10/22] Add post comments

---
 .../post-comments.component.html              | 16 ++++++++++
 .../post-comments.component.scss              |  0
 .../post-comments.component.spec.ts           | 23 ++++++++++++++
 .../post-comments/post-comments.component.ts  | 31 +++++++++++++++++++
 .../post-details/post-details.component.html  |  2 +-
 .../posts/post-page/post-page.component.html  |  5 ++-
 .../posts/post-page/post-page.component.scss  |  5 +++
 .../posts/post-page/post-page.component.ts    | 16 +++++++++-
 src/app/posts/posts.model.ts                  |  8 +++++
 src/app/posts/posts.service.ts                | 12 ++++++-
 tsconfig.json                                 |  6 ++--
 11 files changed, 116 insertions(+), 8 deletions(-)
 create mode 100644 src/app/posts/post-comments/post-comments.component.html
 create mode 100644 src/app/posts/post-comments/post-comments.component.scss
 create mode 100644 src/app/posts/post-comments/post-comments.component.spec.ts
 create mode 100644 src/app/posts/post-comments/post-comments.component.ts

diff --git a/src/app/posts/post-comments/post-comments.component.html b/src/app/posts/post-comments/post-comments.component.html
new file mode 100644
index 0000000..d0c2162
--- /dev/null
+++ b/src/app/posts/post-comments/post-comments.component.html
@@ -0,0 +1,16 @@
+@if (comments().length > 0) {
+  <mat-card appearance="outlined">
+    <mat-card-content>
+      <mat-list>
+        @for (comment of comments(); track comment.id) {
+          <mat-list-item>
+            <mat-icon matListItemIcon>comment</mat-icon>
+            <span matListItemTitle>{{ comment.name }}</span>
+            <span matListItemLine>{{ comment.email }}</span>
+            <span matListItemLine>{{ comment.body }} </span>
+          </mat-list-item>
+        }
+      </mat-list>
+    </mat-card-content>
+  </mat-card>
+}
diff --git a/src/app/posts/post-comments/post-comments.component.scss b/src/app/posts/post-comments/post-comments.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/posts/post-comments/post-comments.component.spec.ts b/src/app/posts/post-comments/post-comments.component.spec.ts
new file mode 100644
index 0000000..2eed1ea
--- /dev/null
+++ b/src/app/posts/post-comments/post-comments.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostCommentsComponent } from './post-comments.component';
+
+describe('PostCommentsComponent', () => {
+  let component: PostCommentsComponent;
+  let fixture: ComponentFixture<PostCommentsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PostCommentsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PostCommentsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/posts/post-comments/post-comments.component.ts b/src/app/posts/post-comments/post-comments.component.ts
new file mode 100644
index 0000000..ae5de46
--- /dev/null
+++ b/src/app/posts/post-comments/post-comments.component.ts
@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { MatCard, MatCardContent } from '@angular/material/card';
+import { MatIcon } from '@angular/material/icon';
+import {
+  MatList,
+  MatListItem,
+  MatListItemIcon,
+  MatListItemLine,
+  MatListItemTitle,
+} from '@angular/material/list';
+import { PostComment } from '../posts.model';
+
+@Component({
+  selector: 'app-post-comments',
+  imports: [
+    MatList,
+    MatListItem,
+    MatListItemTitle,
+    MatListItemLine,
+    MatIcon,
+    MatListItemIcon,
+    MatCard,
+    MatCardContent,
+  ],
+  templateUrl: './post-comments.component.html',
+  styleUrl: './post-comments.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PostCommentsComponent {
+  comments = input<PostComment[]>([]);
+}
diff --git a/src/app/posts/post-details/post-details.component.html b/src/app/posts/post-details/post-details.component.html
index a91ad95..62d0a62 100644
--- a/src/app/posts/post-details/post-details.component.html
+++ b/src/app/posts/post-details/post-details.component.html
@@ -1,4 +1,4 @@
-<mat-card class="post">
+<mat-card appearance="outlined" class="post">
   <mat-card-header>
     <mat-card-title>
       {{ post().title }}
diff --git a/src/app/posts/post-page/post-page.component.html b/src/app/posts/post-page/post-page.component.html
index 01fc99f..ceae91d 100644
--- a/src/app/posts/post-page/post-page.component.html
+++ b/src/app/posts/post-page/post-page.component.html
@@ -1,3 +1,6 @@
 @if (post()) {
-  <app-post-details [post]="post()!" [user]="user()" [showActions]="false" />
+  <div class="post-page">
+    <app-post-details [post]="post()!" [user]="user()" [showActions]="false" />
+    <app-post-comments [comments]="(postComments$() | async) ?? []" />
+  </div>
 }
diff --git a/src/app/posts/post-page/post-page.component.scss b/src/app/posts/post-page/post-page.component.scss
index e69de29..35d07dd 100644
--- a/src/app/posts/post-page/post-page.component.scss
+++ b/src/app/posts/post-page/post-page.component.scss
@@ -0,0 +1,5 @@
+.post-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
diff --git a/src/app/posts/post-page/post-page.component.ts b/src/app/posts/post-page/post-page.component.ts
index bc6975d..6b778db 100644
--- a/src/app/posts/post-page/post-page.component.ts
+++ b/src/app/posts/post-page/post-page.component.ts
@@ -1,18 +1,23 @@
+import { AsyncPipe } from '@angular/common';
 import { Component, computed, inject, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
+import { of } from 'rxjs';
 import { selectUsersEntities } from 'src/app/users/state/users.selectors';
+import { PostCommentsComponent } from '../post-comments/post-comments.component';
 import { PostDetailsComponent } from '../post-details/post-details.component';
+import { PostsService } from '../posts.service';
 import { PostPageActions } from '../state/posts.actions';
 import { selectPostById } from '../state/posts.selectors';
 
 @Component({
   selector: 'app-post-page',
-  imports: [PostDetailsComponent],
+  imports: [PostDetailsComponent, PostCommentsComponent, AsyncPipe],
   templateUrl: './post-page.component.html',
   styleUrl: './post-page.component.scss',
 })
 export class PostPageComponent implements OnInit {
   private store = inject(Store);
+  private postsService = inject(PostsService);
 
   post = this.store.selectSignal(selectPostById);
 
@@ -25,6 +30,15 @@ export class PostPageComponent implements OnInit {
     return this.users()[this.post()!.userId];
   });
 
+  // TODO: there should be a better way
+  postComments$ = computed(() => {
+    if (!this.post()) {
+      return of([]);
+    }
+
+    return this.postsService.getComments(this.post()!.id);
+  });
+
   ngOnInit(): void {
     this.store.dispatch(PostPageActions.pageOpened());
   }
diff --git a/src/app/posts/posts.model.ts b/src/app/posts/posts.model.ts
index 9f4fe20..e789b55 100644
--- a/src/app/posts/posts.model.ts
+++ b/src/app/posts/posts.model.ts
@@ -4,3 +4,11 @@ export interface Post {
   title: string;
   body: string;
 }
+
+export interface PostComment {
+  id: number;
+  postId: number;
+  name: string;
+  email: string;
+  body: string;
+}
diff --git a/src/app/posts/posts.service.ts b/src/app/posts/posts.service.ts
index fdfada2..b7578b3 100644
--- a/src/app/posts/posts.service.ts
+++ b/src/app/posts/posts.service.ts
@@ -1,7 +1,7 @@
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 import { catchError, throwError } from 'rxjs';
-import { Post } from './posts.model';
+import { Post, PostComment } from './posts.model';
 
 @Injectable({
   providedIn: 'root',
@@ -16,6 +16,16 @@ export class PostsService {
       .pipe(catchError(this.handleError));
   }
 
+  getComments(postId: number) {
+    return this.http
+      .get<PostComment[]>(this.getCommentsUrl(postId))
+      .pipe(catchError(this.handleError));
+  }
+
+  private getCommentsUrl(postId: number) {
+    return `${this.postsUrl}/${postId}/comments`;
+  }
+
   private handleError({ status }: HttpErrorResponse) {
     return throwError(() => `${status}: An error occured.`);
   }
diff --git a/tsconfig.json b/tsconfig.json
index 4ec7ddc..ff544aa 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,10 +19,8 @@
     "target": "ES2022",
     "module": "ES2022",
     "useDefineForClassFields": false,
-    "lib": [
-      "ES2022",
-      "dom"
-    ]
+    "lib": ["ES2022", "dom"],
+    "typeRoots": ["node_modules/@angular/material"]
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

From 1b2759b9edc6a2515317d086038fcf30d8cb3b0c Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Mon, 26 May 2025 08:23:56 +0300
Subject: [PATCH 11/22] Adjust navigation

---
 src/app/app.component.html                    | 47 ++++++++++++-------
 src/app/app.component.scss                    | 22 +++++++++
 src/app/app.component.ts                      | 19 ++++++--
 .../posts/post-page/post-page.component.html  |  4 ++
 .../posts/post-page/post-page.component.scss  |  4 ++
 .../posts/post-page/post-page.component.ts    | 12 ++++-
 6 files changed, 84 insertions(+), 24 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index ea99b07..d47bbd3 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,18 +1,29 @@
-<nav mat-tab-nav-bar [tabPanel]="tabPanel">
-  @for (route of routes; track route.url) {
-    <a
-      [routerLink]="route.url"
-      routerLinkActive
-      #rla="routerLinkActive"
-      mat-tab-link
-      [active]="rla.isActive"
-    >
-      {{ route.title }}
-    </a>
-  }
-</nav>
-<mat-tab-nav-panel #tabPanel>
-  <main class="main">
-    <router-outlet />
-  </main>
-</mat-tab-nav-panel>
+<mat-sidenav-container>
+  <mat-sidenav
+    class="sidenav"
+    mode="side"
+    opened
+    [fixedInViewport]="true"
+    [fixedTopGap]="8"
+  >
+    <div class="links">
+      @for (route of routes; track route.url) {
+        <a
+          mat-button
+          [class.mat-flat-button]="rla.isActive"
+          [routerLink]="route.url"
+          routerLinkActive="active"
+          #rla="routerLinkActive"
+        >
+          <mat-icon>{{ route.icon }}</mat-icon>
+          {{ route.title }}
+        </a>
+      }
+    </div>
+  </mat-sidenav>
+  <mat-sidenav-content>
+    <main class="main">
+      <router-outlet />
+    </main>
+  </mat-sidenav-content>
+</mat-sidenav-container>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 25a9afa..e4fbd5d 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,3 +1,25 @@
 .main {
   padding: 16px;
 }
+
+.sidenav {
+  width: 200px;
+  padding: 8px;
+  padding: 8px 0 8px 8px;
+
+  .links {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    a {
+      display: flex;
+      justify-content: flex-start;
+
+      &.active {
+        background-color: var(--mat-sys-primary);
+        color: var(--mat-sys-surface);
+      }
+    }
+  }
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 321d922..6711b35 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,11 @@
 import { Component } from '@angular/core';
-import { MatTabLink, MatTabNav, MatTabNavPanel } from '@angular/material/tabs';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import {
+  MatSidenav,
+  MatSidenavContainer,
+  MatSidenavContent,
+} from '@angular/material/sidenav';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 
 @Component({
@@ -8,9 +14,11 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
     RouterOutlet,
     RouterLink,
     RouterLinkActive,
-    MatTabNav,
-    MatTabNavPanel,
-    MatTabLink,
+    MatButtonModule,
+    MatSidenavContainer,
+    MatSidenav,
+    MatSidenavContent,
+    MatIcon,
   ],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
@@ -20,7 +28,8 @@ export class AppComponent {
     {
       url: '/posts',
       title: 'Posts',
+      icon: 'forum',
     },
-    { url: '/guest-book', title: 'Guest Book' },
+    { url: '/guest-book', title: 'Guest Book', icon: 'book' },
   ];
 }
diff --git a/src/app/posts/post-page/post-page.component.html b/src/app/posts/post-page/post-page.component.html
index ceae91d..5f9cca4 100644
--- a/src/app/posts/post-page/post-page.component.html
+++ b/src/app/posts/post-page/post-page.component.html
@@ -1,5 +1,9 @@
 @if (post()) {
   <div class="post-page">
+    <a class="posts-link" mat-button routerLink="/posts">
+      <mat-icon>arrow_back</mat-icon>
+      Posts
+    </a>
     <app-post-details [post]="post()!" [user]="user()" [showActions]="false" />
     <app-post-comments [comments]="(postComments$() | async) ?? []" />
   </div>
diff --git a/src/app/posts/post-page/post-page.component.scss b/src/app/posts/post-page/post-page.component.scss
index 35d07dd..6152f75 100644
--- a/src/app/posts/post-page/post-page.component.scss
+++ b/src/app/posts/post-page/post-page.component.scss
@@ -2,4 +2,8 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
+
+  .posts-link {
+    max-width: fit-content;
+  }
 }
diff --git a/src/app/posts/post-page/post-page.component.ts b/src/app/posts/post-page/post-page.component.ts
index 6b778db..f182133 100644
--- a/src/app/posts/post-page/post-page.component.ts
+++ b/src/app/posts/post-page/post-page.component.ts
@@ -1,5 +1,8 @@
 import { AsyncPipe } from '@angular/common';
 import { Component, computed, inject, OnInit } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { RouterLink } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { of } from 'rxjs';
 import { selectUsersEntities } from 'src/app/users/state/users.selectors';
@@ -11,7 +14,14 @@ import { selectPostById } from '../state/posts.selectors';
 
 @Component({
   selector: 'app-post-page',
-  imports: [PostDetailsComponent, PostCommentsComponent, AsyncPipe],
+  imports: [
+    PostDetailsComponent,
+    PostCommentsComponent,
+    AsyncPipe,
+    RouterLink,
+    MatButtonModule,
+    MatIcon,
+  ],
   templateUrl: './post-page.component.html',
   styleUrl: './post-page.component.scss',
 })

From 8b3dda8f1be08d8234a180c18131261a812e4b71 Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Mon, 26 May 2025 09:26:47 +0300
Subject: [PATCH 12/22] Add guest book form

---
 src/app/app.component.scss                    |  2 +-
 .../guest-book-form.component.html            | 38 +++++++++++++
 .../guest-book-form.component.scss            | 11 ++++
 .../guest-book-form.component.spec.ts         | 23 ++++++++
 .../guest-book-form.component.ts              | 54 +++++++++++++++++++
 .../guest-book-page.component.html            |  2 +-
 .../guest-book-page.component.ts              | 10 ++--
 src/app/guest-book/guest-book.model.ts        |  9 ++++
 src/main.ts                                   |  5 ++
 9 files changed, 149 insertions(+), 5 deletions(-)
 create mode 100644 src/app/guest-book/guest-book-form/guest-book-form.component.html
 create mode 100644 src/app/guest-book/guest-book-form/guest-book-form.component.scss
 create mode 100644 src/app/guest-book/guest-book-form/guest-book-form.component.spec.ts
 create mode 100644 src/app/guest-book/guest-book-form/guest-book-form.component.ts
 create mode 100644 src/app/guest-book/guest-book.model.ts

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e4fbd5d..f019340 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -3,7 +3,7 @@
 }
 
 .sidenav {
-  width: 200px;
+  width: 300px;
   padding: 8px;
   padding: 8px 0 8px 8px;
 
diff --git a/src/app/guest-book/guest-book-form/guest-book-form.component.html b/src/app/guest-book/guest-book-form/guest-book-form.component.html
new file mode 100644
index 0000000..d6a8cae
--- /dev/null
+++ b/src/app/guest-book/guest-book-form/guest-book-form.component.html
@@ -0,0 +1,38 @@
+<form [formGroup]="form" (ngSubmit)="onSubmit()">
+  <div class="group" formGroupName="author">
+    <mat-form-field>
+      <mat-label>Name</mat-label>
+      <input formControlName="name" matInput />
+      @if (name.hasError("required")) {
+        <mat-error>Name is <strong>required</strong></mat-error>
+      }
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>Email</mat-label>
+      <input formControlName="email" matInput />
+      @if (email.hasError("email") && !email.hasError("required")) {
+        <mat-error>Please enter a valid email address</mat-error>
+      }
+      @if (email.hasError("required")) {
+        <mat-error>Email is <strong>required</strong></mat-error>
+      }
+    </mat-form-field>
+  </div>
+  <div class="group">
+    <mat-form-field>
+      <mat-label>Message</mat-label>
+      <textarea formControlName="message" rows="5" matInput></textarea>
+      @if (message.hasError("minlength") && !message.hasError("required")) {
+        <mat-error>Please enter at least 20 characters</mat-error>
+      }
+      @if (message.hasError("required")) {
+        <mat-error>Message is <strong>required</strong></mat-error>
+      }
+    </mat-form-field>
+  </div>
+  <div class="group">
+    <button mat-flat-button type="submit" [disabled]="form.invalid">
+      Save
+    </button>
+  </div>
+</form>
diff --git a/src/app/guest-book/guest-book-form/guest-book-form.component.scss b/src/app/guest-book/guest-book-form/guest-book-form.component.scss
new file mode 100644
index 0000000..d885603
--- /dev/null
+++ b/src/app/guest-book/guest-book-form/guest-book-form.component.scss
@@ -0,0 +1,11 @@
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+}
diff --git a/src/app/guest-book/guest-book-form/guest-book-form.component.spec.ts b/src/app/guest-book/guest-book-form/guest-book-form.component.spec.ts
new file mode 100644
index 0000000..05c5a37
--- /dev/null
+++ b/src/app/guest-book/guest-book-form/guest-book-form.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GuestBookFormComponent } from './guest-book-form.component';
+
+describe('GuestBookFormComponent', () => {
+  let component: GuestBookFormComponent;
+  let fixture: ComponentFixture<GuestBookFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GuestBookFormComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GuestBookFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/guest-book/guest-book-form/guest-book-form.component.ts b/src/app/guest-book/guest-book-form/guest-book-form.component.ts
new file mode 100644
index 0000000..596f144
--- /dev/null
+++ b/src/app/guest-book/guest-book-form/guest-book-form.component.ts
@@ -0,0 +1,54 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  output,
+} from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatButton } from '@angular/material/button';
+import { MatError, MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { GuestBookEntry } from '../guest-book.model';
+
+@Component({
+  selector: 'app-guest-book-form',
+  imports: [
+    ReactiveFormsModule,
+    MatFormField,
+    MatLabel,
+    MatInput,
+    MatButton,
+    MatError,
+  ],
+  templateUrl: './guest-book-form.component.html',
+  styleUrl: './guest-book-form.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GuestBookFormComponent {
+  formSubmitted = output<GuestBookEntry>();
+
+  private fb = inject(FormBuilder);
+  form = this.fb.nonNullable.group({
+    author: this.fb.nonNullable.group({
+      name: ['', Validators.required],
+      email: ['', [Validators.required, Validators.email]],
+    }),
+    message: ['', [Validators.required, Validators.minLength(20)]],
+  });
+
+  public get name() {
+    return this.form.controls.author.controls.name;
+  }
+
+  public get email() {
+    return this.form.controls.author.controls.email;
+  }
+
+  public get message() {
+    return this.form.controls.message;
+  }
+
+  onSubmit() {
+    this.formSubmitted.emit(this.form.getRawValue());
+  }
+}
diff --git a/src/app/guest-book/guest-book-page/guest-book-page.component.html b/src/app/guest-book/guest-book-page/guest-book-page.component.html
index 77720f2..465b616 100644
--- a/src/app/guest-book/guest-book-page/guest-book-page.component.html
+++ b/src/app/guest-book/guest-book-page/guest-book-page.component.html
@@ -1 +1 @@
-<p>guest-book-page works!</p>
+<app-guest-book-form (formSubmitted)="onSubmit($event)" />
diff --git a/src/app/guest-book/guest-book-page/guest-book-page.component.ts b/src/app/guest-book/guest-book-page/guest-book-page.component.ts
index fffd60b..2d5962b 100644
--- a/src/app/guest-book/guest-book-page/guest-book-page.component.ts
+++ b/src/app/guest-book/guest-book-page/guest-book-page.component.ts
@@ -1,11 +1,15 @@
 import { Component } from '@angular/core';
+import { GuestBookFormComponent } from '../guest-book-form/guest-book-form.component';
+import { GuestBookEntry } from '../guest-book.model';
 
 @Component({
   selector: 'app-guest-book-page',
-  imports: [],
+  imports: [GuestBookFormComponent],
   templateUrl: './guest-book-page.component.html',
-  styleUrl: './guest-book-page.component.scss'
+  styleUrl: './guest-book-page.component.scss',
 })
 export class GuestBookPageComponent {
-
+  onSubmit(guestBookEntry: GuestBookEntry) {
+    console.log(guestBookEntry);
+  }
 }
diff --git a/src/app/guest-book/guest-book.model.ts b/src/app/guest-book/guest-book.model.ts
new file mode 100644
index 0000000..351a479
--- /dev/null
+++ b/src/app/guest-book/guest-book.model.ts
@@ -0,0 +1,9 @@
+export interface GuestBookEntry {
+  author: GuestBookAuthor;
+  message: string;
+}
+
+export interface GuestBookAuthor {
+  name: string;
+  email: string;
+}
diff --git a/src/main.ts b/src/main.ts
index d7b476c..1e9211f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
 import { provideHttpClient } from '@angular/common/http';
 import { isDevMode } from '@angular/core';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { provideRouter } from '@angular/router';
 import { provideEffects } from '@ngrx/effects';
@@ -19,5 +20,9 @@ bootstrapApplication(AppComponent, {
     provideRouterStore(),
     provideEffects(),
     provideStoreDevtools({ maxAge: 25, logOnly: !isDevMode() }),
+    {
+      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+      useValue: { appearance: 'outline' },
+    },
   ],
 }).catch((err) => console.error(err));

From ac15ea118fb1946739c2d636a8e321e0890685be Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Mon, 26 May 2025 12:12:34 +0300
Subject: [PATCH 13/22] Add guest book list

---
 src/app/app-routes.ts                         |   8 ++
 src/app/app.component.scss                    |   1 +
 .../guest-book-form.component.html            |  82 +++++++------
 .../guest-book-form.component.scss            |  17 +--
 .../guest-book-form.component.ts              |  13 ++
 .../guest-book-list.component.html            |   9 ++
 .../guest-book-list.component.scss            |   0
 .../guest-book-list.component.spec.ts         |  23 ++++
 .../guest-book-list.component.ts              |  15 +++
 .../guest-book-page.component.html            |   5 +-
 .../guest-book-page.component.scss            |   5 +
 .../guest-book-page.component.ts              |  25 +++-
 src/app/guest-book/guest-book.model.ts        |   1 +
 src/app/guest-book/guest-book.service.spec.ts |  16 +++
 src/app/guest-book/guest-book.service.ts      | 113 ++++++++++++++++++
 .../guest-book/state/guest-book.actions.ts    |  20 ++++
 .../guest-book/state/guest-book.effects.ts    |  54 +++++++++
 .../guest-book/state/guest-book.reducer.ts    |  78 ++++++++++++
 .../guest-book/state/guest-book.selectors.ts  |  31 +++++
 19 files changed, 466 insertions(+), 50 deletions(-)
 create mode 100644 src/app/guest-book/guest-book-list/guest-book-list.component.html
 create mode 100644 src/app/guest-book/guest-book-list/guest-book-list.component.scss
 create mode 100644 src/app/guest-book/guest-book-list/guest-book-list.component.spec.ts
 create mode 100644 src/app/guest-book/guest-book-list/guest-book-list.component.ts
 create mode 100644 src/app/guest-book/guest-book.service.spec.ts
 create mode 100644 src/app/guest-book/guest-book.service.ts
 create mode 100644 src/app/guest-book/state/guest-book.actions.ts
 create mode 100644 src/app/guest-book/state/guest-book.effects.ts
 create mode 100644 src/app/guest-book/state/guest-book.reducer.ts
 create mode 100644 src/app/guest-book/state/guest-book.selectors.ts

diff --git a/src/app/app-routes.ts b/src/app/app-routes.ts
index d8caee6..666d0b9 100644
--- a/src/app/app-routes.ts
+++ b/src/app/app-routes.ts
@@ -1,6 +1,9 @@
 import { Routes } from '@angular/router';
 import { provideEffects } from '@ngrx/effects';
 import { provideState } from '@ngrx/store';
+import { GuestBookService } from './guest-book/guest-book.service';
+import { GuestBookEffects } from './guest-book/state/guest-book.effects';
+import { guestBookFeature } from './guest-book/state/guest-book.reducer';
 import { PostsService } from './posts/posts.service';
 import { PostsEffects } from './posts/state/posts.effects';
 import { postsFeature } from './posts/state/posts.reducer';
@@ -24,5 +27,10 @@ export const appRoutes: Routes = [
     path: 'guest-book',
     loadChildren: () =>
       import('./guest-book/guest-book.routes').then((mod) => mod.routes),
+    providers: [
+      GuestBookService,
+      provideState(guestBookFeature),
+      provideEffects(GuestBookEffects),
+    ],
   },
 ];
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index f019340..cf8500a 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,5 +1,6 @@
 .main {
   padding: 16px;
+  margin-right: 300px;
 }
 
 .sidenav {
diff --git a/src/app/guest-book/guest-book-form/guest-book-form.component.html b/src/app/guest-book/guest-book-form/guest-book-form.component.html
index d6a8cae..0bab8ba 100644
--- a/src/app/guest-book/guest-book-form/guest-book-form.component.html
+++ b/src/app/guest-book/guest-book-form/guest-book-form.component.html
@@ -1,38 +1,44 @@
-<form [formGroup]="form" (ngSubmit)="onSubmit()">
-  <div class="group" formGroupName="author">
-    <mat-form-field>
-      <mat-label>Name</mat-label>
-      <input formControlName="name" matInput />
-      @if (name.hasError("required")) {
-        <mat-error>Name is <strong>required</strong></mat-error>
-      }
-    </mat-form-field>
-    <mat-form-field>
-      <mat-label>Email</mat-label>
-      <input formControlName="email" matInput />
-      @if (email.hasError("email") && !email.hasError("required")) {
-        <mat-error>Please enter a valid email address</mat-error>
-      }
-      @if (email.hasError("required")) {
-        <mat-error>Email is <strong>required</strong></mat-error>
-      }
-    </mat-form-field>
-  </div>
-  <div class="group">
-    <mat-form-field>
-      <mat-label>Message</mat-label>
-      <textarea formControlName="message" rows="5" matInput></textarea>
-      @if (message.hasError("minlength") && !message.hasError("required")) {
-        <mat-error>Please enter at least 20 characters</mat-error>
-      }
-      @if (message.hasError("required")) {
-        <mat-error>Message is <strong>required</strong></mat-error>
-      }
-    </mat-form-field>
-  </div>
-  <div class="group">
-    <button mat-flat-button type="submit" [disabled]="form.invalid">
-      Save
-    </button>
-  </div>
-</form>
+<mat-card appearance="outlined" class="form-card">
+  <form [formGroup]="form" (ngSubmit)="onSubmit()">
+    <div class="group" formGroupName="author">
+      <mat-form-field>
+        <mat-label>Name</mat-label>
+        <input formControlName="name" matInput />
+        @if (name.hasError("required")) {
+          <mat-error>Name is <strong>required</strong></mat-error>
+        }
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Email</mat-label>
+        <input formControlName="email" matInput />
+        @if (email.hasError("email") && !email.hasError("required")) {
+          <mat-error>Please enter a valid email address</mat-error>
+        }
+        @if (email.hasError("required")) {
+          <mat-error>Email is <strong>required</strong></mat-error>
+        }
+      </mat-form-field>
+    </div>
+    <div class="group">
+      <mat-form-field>
+        <mat-label>Message</mat-label>
+        <textarea formControlName="message" rows="5" matInput></textarea>
+        @if (message.hasError("minlength") && !message.hasError("required")) {
+          <mat-error>Please enter at least 20 characters</mat-error>
+        }
+        @if (message.hasError("required")) {
+          <mat-error>Message is <strong>required</strong></mat-error>
+        }
+      </mat-form-field>
+    </div>
+    <div class="group">
+      <button
+        mat-flat-button
+        type="submit"
+        [disabled]="form.invalid || saving()"
+      >
+        Save
+      </button>
+    </div>
+  </form>
+</mat-card>
diff --git a/src/app/guest-book/guest-book-form/guest-book-form.component.scss b/src/app/guest-book/guest-book-form/guest-book-form.component.scss
index d885603..7f80aaa 100644
--- a/src/app/guest-book/guest-book-form/guest-book-form.component.scss
+++ b/src/app/guest-book/guest-book-form/guest-book-form.component.scss
@@ -1,11 +1,14 @@
-form {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-
-  .group {
+.form-card {
+  padding: 16px;
+  form {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 16px;
+
+    .group {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
   }
 }
diff --git a/src/app/guest-book/guest-book-form/guest-book-form.component.ts b/src/app/guest-book/guest-book-form/guest-book-form.component.ts
index 596f144..d2a1e05 100644
--- a/src/app/guest-book/guest-book-form/guest-book-form.component.ts
+++ b/src/app/guest-book/guest-book-form/guest-book-form.component.ts
@@ -2,10 +2,12 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  input,
   output,
 } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
+import { MatCard } from '@angular/material/card';
 import { MatError, MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { GuestBookEntry } from '../guest-book.model';
@@ -19,12 +21,14 @@ import { GuestBookEntry } from '../guest-book.model';
     MatInput,
     MatButton,
     MatError,
+    MatCard,
   ],
   templateUrl: './guest-book-form.component.html',
   styleUrl: './guest-book-form.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class GuestBookFormComponent {
+  saving = input(false);
   formSubmitted = output<GuestBookEntry>();
 
   private fb = inject(FormBuilder);
@@ -49,6 +53,15 @@ export class GuestBookFormComponent {
   }
 
   onSubmit() {
+    if (!this.form.valid) {
+      return;
+    }
+
     this.formSubmitted.emit(this.form.getRawValue());
+
+    this.form.reset();
+    this.name.setErrors(null);
+    this.email.setErrors(null);
+    this.message.setErrors(null);
   }
 }
diff --git a/src/app/guest-book/guest-book-list/guest-book-list.component.html b/src/app/guest-book/guest-book-list/guest-book-list.component.html
new file mode 100644
index 0000000..9e80e2e
--- /dev/null
+++ b/src/app/guest-book/guest-book-list/guest-book-list.component.html
@@ -0,0 +1,9 @@
+<mat-card appearance="outlined">
+  <mat-list>
+    @for (entry of entries(); track entry.id) {
+      <mat-list-item>
+        {{ entry.author.name }}: {{ entry.message }}
+      </mat-list-item>
+    }
+  </mat-list>
+</mat-card>
diff --git a/src/app/guest-book/guest-book-list/guest-book-list.component.scss b/src/app/guest-book/guest-book-list/guest-book-list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/guest-book/guest-book-list/guest-book-list.component.spec.ts b/src/app/guest-book/guest-book-list/guest-book-list.component.spec.ts
new file mode 100644
index 0000000..1d4e3b6
--- /dev/null
+++ b/src/app/guest-book/guest-book-list/guest-book-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GuestBookListComponent } from './guest-book-list.component';
+
+describe('GuestBookListComponent', () => {
+  let component: GuestBookListComponent;
+  let fixture: ComponentFixture<GuestBookListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GuestBookListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GuestBookListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/guest-book/guest-book-list/guest-book-list.component.ts b/src/app/guest-book/guest-book-list/guest-book-list.component.ts
new file mode 100644
index 0000000..7396473
--- /dev/null
+++ b/src/app/guest-book/guest-book-list/guest-book-list.component.ts
@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { MatCard } from '@angular/material/card';
+import { MatList, MatListItem } from '@angular/material/list';
+import { GuestBookEntry } from '../guest-book.model';
+
+@Component({
+  selector: 'app-guest-book-list',
+  imports: [MatList, MatListItem, MatCard],
+  templateUrl: './guest-book-list.component.html',
+  styleUrl: './guest-book-list.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GuestBookListComponent {
+  entries = input<GuestBookEntry[]>([]);
+}
diff --git a/src/app/guest-book/guest-book-page/guest-book-page.component.html b/src/app/guest-book/guest-book-page/guest-book-page.component.html
index 465b616..a3c6f7e 100644
--- a/src/app/guest-book/guest-book-page/guest-book-page.component.html
+++ b/src/app/guest-book/guest-book-page/guest-book-page.component.html
@@ -1 +1,4 @@
-<app-guest-book-form (formSubmitted)="onSubmit($event)" />
+<div class="page">
+  <app-guest-book-form [saving]="saving()" (formSubmitted)="onSubmit($event)" />
+  <app-guest-book-list [entries]="entries()" />
+</div>
diff --git a/src/app/guest-book/guest-book-page/guest-book-page.component.scss b/src/app/guest-book/guest-book-page/guest-book-page.component.scss
index e69de29..df6c65e 100644
--- a/src/app/guest-book/guest-book-page/guest-book-page.component.scss
+++ b/src/app/guest-book/guest-book-page/guest-book-page.component.scss
@@ -0,0 +1,5 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
diff --git a/src/app/guest-book/guest-book-page/guest-book-page.component.ts b/src/app/guest-book/guest-book-page/guest-book-page.component.ts
index 2d5962b..3757fdd 100644
--- a/src/app/guest-book/guest-book-page/guest-book-page.component.ts
+++ b/src/app/guest-book/guest-book-page/guest-book-page.component.ts
@@ -1,15 +1,32 @@
-import { Component } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
 import { GuestBookFormComponent } from '../guest-book-form/guest-book-form.component';
+import { GuestBookListComponent } from '../guest-book-list/guest-book-list.component';
 import { GuestBookEntry } from '../guest-book.model';
+import { GuestBookPageActions } from '../state/guest-book.actions';
+import {
+  selectGuestBookEntries,
+  selectGuestBookEntrySaving,
+} from '../state/guest-book.selectors';
 
 @Component({
   selector: 'app-guest-book-page',
-  imports: [GuestBookFormComponent],
+  imports: [GuestBookFormComponent, GuestBookListComponent],
   templateUrl: './guest-book-page.component.html',
   styleUrl: './guest-book-page.component.scss',
 })
-export class GuestBookPageComponent {
+export class GuestBookPageComponent implements OnInit {
+  private store = inject(Store);
+  entries = this.store.selectSignal(selectGuestBookEntries);
+  saving = this.store.selectSignal(selectGuestBookEntrySaving);
+
+  ngOnInit(): void {
+    this.store.dispatch(GuestBookPageActions.pageOpened());
+  }
+
   onSubmit(guestBookEntry: GuestBookEntry) {
-    console.log(guestBookEntry);
+    this.store.dispatch(
+      GuestBookPageActions.entrySaved({ entry: guestBookEntry }),
+    );
   }
 }
diff --git a/src/app/guest-book/guest-book.model.ts b/src/app/guest-book/guest-book.model.ts
index 351a479..ba7875e 100644
--- a/src/app/guest-book/guest-book.model.ts
+++ b/src/app/guest-book/guest-book.model.ts
@@ -1,4 +1,5 @@
 export interface GuestBookEntry {
+  id?: number;
   author: GuestBookAuthor;
   message: string;
 }
diff --git a/src/app/guest-book/guest-book.service.spec.ts b/src/app/guest-book/guest-book.service.spec.ts
new file mode 100644
index 0000000..3236d2c
--- /dev/null
+++ b/src/app/guest-book/guest-book.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GuestBookService } from './guest-book.service';
+
+describe('GuestBookService', () => {
+  let service: GuestBookService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(GuestBookService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/guest-book/guest-book.service.ts b/src/app/guest-book/guest-book.service.ts
new file mode 100644
index 0000000..548e1db
--- /dev/null
+++ b/src/app/guest-book/guest-book.service.ts
@@ -0,0 +1,113 @@
+import { Injectable } from '@angular/core';
+import { delay, Observable, of } from 'rxjs';
+import { GuestBookEntry } from './guest-book.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GuestBookService {
+  private entries: GuestBookEntry[] = [
+    {
+      id: 1,
+      author: {
+        name: 'Emma Wilson',
+        email: 'emma.wilson@example.com',
+      },
+      message:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    },
+    {
+      id: 2,
+      author: {
+        name: 'Liam Martinez',
+        email: 'liam.martinez@example.com',
+      },
+      message:
+        'Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
+    },
+    {
+      id: 3,
+      author: {
+        name: 'Olivia Davis',
+        email: 'olivia.davis@example.com',
+      },
+      message:
+        'Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.',
+    },
+    {
+      id: 4,
+      author: {
+        name: 'Noah Hernandez',
+        email: 'noah.hernandez@example.com',
+      },
+      message:
+        'Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta.',
+    },
+    {
+      id: 5,
+      author: {
+        name: 'Ava Thompson',
+        email: 'ava.thompson@example.com',
+      },
+      message:
+        'Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.',
+    },
+    {
+      id: 6,
+      author: {
+        name: 'William Clark',
+        email: 'william.clark@example.com',
+      },
+      message:
+        'Donec sollicitudin molestie malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla porttitor accumsan tincidunt.',
+    },
+    {
+      id: 7,
+      author: {
+        name: 'Sophia Lewis',
+        email: 'sophia.lewis@example.com',
+      },
+      message: 'Nulla quis lorem ut libero malesuada feugiat.',
+    },
+    {
+      id: 8,
+      author: {
+        name: 'Benjamin Robinson',
+        email: 'benjamin.robinson@example.com',
+      },
+      message:
+        'Quisque velit nisi, pretium ut lacinia in, elementum id enim. Proin eget tortor risus.',
+    },
+    {
+      id: 9,
+      author: {
+        name: 'Isabella Walker',
+        email: 'isabella.walker@example.com',
+      },
+      message: 'Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.',
+    },
+    {
+      id: 10,
+      author: {
+        name: 'James Hall',
+        email: 'james.hall@example.com',
+      },
+      message:
+        'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.',
+    },
+  ];
+
+  getEntries(): Observable<GuestBookEntry[]> {
+    return of(this.entries).pipe(delay(500));
+  }
+
+  save(entry: GuestBookEntry): Observable<GuestBookEntry> {
+    const toSave: GuestBookEntry = {
+      ...entry,
+      id: Math.max(...this.entries.map((x) => x.id ?? 0)) + 1,
+    };
+
+    this.entries = [...this.entries, toSave];
+    return of(toSave).pipe(delay(500));
+  }
+}
diff --git a/src/app/guest-book/state/guest-book.actions.ts b/src/app/guest-book/state/guest-book.actions.ts
new file mode 100644
index 0000000..0ed6beb
--- /dev/null
+++ b/src/app/guest-book/state/guest-book.actions.ts
@@ -0,0 +1,20 @@
+import { createActionGroup, emptyProps, props } from '@ngrx/store';
+import { GuestBookEntry } from '../guest-book.model';
+
+export const GuestBookPageActions = createActionGroup({
+  source: 'Guest Book Page',
+  events: {
+    'Page Opened': emptyProps(),
+    'Entry Saved': props<{ entry: GuestBookEntry }>(),
+  },
+});
+
+export const GuestBookApiActions = createActionGroup({
+  source: 'Guest Book API',
+  events: {
+    'Entries Loaded Success': props<{ entries: GuestBookEntry[] }>(),
+    'Entries Loaded Fail': props<{ message: string }>(),
+    'Entry Saved Success': props<{ entry: GuestBookEntry }>(),
+    'Entry Saved Fail': props<{ message: string }>(),
+  },
+});
diff --git a/src/app/guest-book/state/guest-book.effects.ts b/src/app/guest-book/state/guest-book.effects.ts
new file mode 100644
index 0000000..9581652
--- /dev/null
+++ b/src/app/guest-book/state/guest-book.effects.ts
@@ -0,0 +1,54 @@
+import { Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { concatLatestFrom } from '@ngrx/operators';
+import { Store } from '@ngrx/store';
+import { catchError, exhaustMap, filter, map, of, switchMap } from 'rxjs';
+import { GuestBookService } from '../guest-book.service';
+import {
+  GuestBookApiActions,
+  GuestBookPageActions,
+} from './guest-book.actions';
+import { selectGuestBookEntriesLoaded } from './guest-book.selectors';
+
+@Injectable()
+export class GuestBookEffects {
+  loadEntries$ = createEffect(() => {
+    return this.actions$.pipe(
+      ofType(GuestBookPageActions.pageOpened),
+      concatLatestFrom(() => this.store.select(selectGuestBookEntriesLoaded)),
+      filter((_, loaded) => !loaded),
+      exhaustMap(() =>
+        this.guestBookService.getEntries().pipe(
+          map((entries) =>
+            GuestBookApiActions.entriesLoadedSuccess({ entries }),
+          ),
+          catchError((error) =>
+            of(GuestBookApiActions.entriesLoadedFail({ message: error })),
+          ),
+        ),
+      ),
+    );
+  });
+
+  saveEntry$ = createEffect(() => {
+    return this.actions$.pipe(
+      ofType(GuestBookPageActions.entrySaved),
+      switchMap(({ entry }) =>
+        this.guestBookService.save(entry).pipe(
+          map((savedEntry) =>
+            GuestBookApiActions.entrySavedSuccess({ entry: savedEntry }),
+          ),
+          catchError((error) =>
+            of(GuestBookApiActions.entrySavedFail({ message: error })),
+          ),
+        ),
+      ),
+    );
+  });
+
+  constructor(
+    private actions$: Actions,
+    private store: Store,
+    private guestBookService: GuestBookService,
+  ) {}
+}
diff --git a/src/app/guest-book/state/guest-book.reducer.ts b/src/app/guest-book/state/guest-book.reducer.ts
new file mode 100644
index 0000000..f88246a
--- /dev/null
+++ b/src/app/guest-book/state/guest-book.reducer.ts
@@ -0,0 +1,78 @@
+import { createEntityAdapter, EntityState } from '@ngrx/entity';
+import { createFeature, createReducer, on } from '@ngrx/store';
+import { GuestBookEntry } from '../guest-book.model';
+import {
+  GuestBookApiActions,
+  GuestBookPageActions,
+} from './guest-book.actions';
+
+export interface GuestBookState extends EntityState<GuestBookEntry> {
+  loading: boolean;
+  loaded: boolean;
+  saving: boolean;
+  errorMessage: string;
+}
+
+const adapter = createEntityAdapter<GuestBookEntry>({});
+
+const initialState: GuestBookState = adapter.getInitialState({
+  loading: false,
+  loaded: false,
+  saving: false,
+  errorMessage: '',
+});
+
+export const guestBookFeature = createFeature({
+  name: 'guestBook',
+  reducer: createReducer(
+    initialState,
+    on(
+      GuestBookPageActions.pageOpened,
+      GuestBookPageActions.pageOpened,
+      (state): GuestBookState => ({
+        ...state,
+        loading: !state.loaded,
+        errorMessage: '',
+      }),
+    ),
+    on(
+      GuestBookPageActions.entrySaved,
+      (state): GuestBookState => ({
+        ...state,
+        saving: true,
+      }),
+    ),
+    on(
+      GuestBookApiActions.entriesLoadedSuccess,
+      (state, { entries }): GuestBookState =>
+        adapter.addMany(entries, {
+          ...state,
+          loading: false,
+          loaded: true,
+        }),
+    ),
+    on(
+      GuestBookApiActions.entriesLoadedFail,
+      (state, { message }): GuestBookState => ({
+        ...state,
+        loading: false,
+        errorMessage: message,
+      }),
+    ),
+    on(
+      GuestBookApiActions.entrySavedSuccess,
+      (state, { entry }): GuestBookState => {
+        console.log(state, entry);
+        return adapter.addOne(entry, {
+          ...state,
+          saving: false,
+        });
+      },
+    ),
+    // TODO: save error handling
+  ),
+});
+
+const { selectAll } = adapter.getSelectors();
+
+export const selectGuestBookEntries = selectAll;
diff --git a/src/app/guest-book/state/guest-book.selectors.ts b/src/app/guest-book/state/guest-book.selectors.ts
new file mode 100644
index 0000000..b9b2d5e
--- /dev/null
+++ b/src/app/guest-book/state/guest-book.selectors.ts
@@ -0,0 +1,31 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import * as reducer from './guest-book.reducer';
+
+const selectGuestBookState = createFeatureSelector<reducer.GuestBookState>(
+  reducer.guestBookFeature.name,
+);
+
+export const selectGuestBookEntries = createSelector(
+  selectGuestBookState,
+  reducer.selectGuestBookEntries,
+);
+
+export const selectGuestBookEntriesLoading = createSelector(
+  selectGuestBookState,
+  (state) => state.loading,
+);
+
+export const selectGuestBookEntriesLoaded = createSelector(
+  selectGuestBookState,
+  (state) => state.loaded,
+);
+
+export const selectGuestBookEntriesErrorMessage = createSelector(
+  selectGuestBookState,
+  (state) => state.errorMessage,
+);
+
+export const selectGuestBookEntrySaving = createSelector(
+  selectGuestBookState,
+  (state) => state.saving,
+);

From f2aaa813bcd5205b2ae56caa8b2fbc8037707361 Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Mon, 26 May 2025 14:33:30 +0300
Subject: [PATCH 14/22] Redesign guest book list

---
 .../guest-book-list.component.html            | 16 +++++++++----
 .../guest-book-list.component.scss            | 23 +++++++++++++++++++
 .../guest-book-list.component.ts              |  5 ++--
 .../guest-book-page.component.html            |  4 +++-
 .../guest-book-page.component.ts              |  2 ++
 5 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/app/guest-book/guest-book-list/guest-book-list.component.html b/src/app/guest-book/guest-book-list/guest-book-list.component.html
index 9e80e2e..696796d 100644
--- a/src/app/guest-book/guest-book-list/guest-book-list.component.html
+++ b/src/app/guest-book/guest-book-list/guest-book-list.component.html
@@ -1,9 +1,15 @@
 <mat-card appearance="outlined">
-  <mat-list>
+  <ul class="list">
     @for (entry of entries(); track entry.id) {
-      <mat-list-item>
-        {{ entry.author.name }}: {{ entry.message }}
-      </mat-list-item>
+      <li class="entry">
+        <button mat-icon-button>
+          <mat-icon class="icon">person</mat-icon>
+        </button>
+        <div class="content">
+          <span class="author">{{ entry.author.name }}</span>
+          <span>{{ entry.message }}</span>
+        </div>
+      </li>
     }
-  </mat-list>
+  </ul>
 </mat-card>
diff --git a/src/app/guest-book/guest-book-list/guest-book-list.component.scss b/src/app/guest-book/guest-book-list/guest-book-list.component.scss
index e69de29..14204dd 100644
--- a/src/app/guest-book/guest-book-list/guest-book-list.component.scss
+++ b/src/app/guest-book/guest-book-list/guest-book-list.component.scss
@@ -0,0 +1,23 @@
+.list {
+  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin: 0;
+  padding: 16px;
+
+  .entry {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+
+    .content {
+      display: flex;
+      flex-direction: column;
+
+      .author {
+        font-size: 14px;
+      }
+    }
+  }
+}
diff --git a/src/app/guest-book/guest-book-list/guest-book-list.component.ts b/src/app/guest-book/guest-book-list/guest-book-list.component.ts
index 7396473..577fb29 100644
--- a/src/app/guest-book/guest-book-list/guest-book-list.component.ts
+++ b/src/app/guest-book/guest-book-list/guest-book-list.component.ts
@@ -1,11 +1,12 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
 import { MatCard } from '@angular/material/card';
-import { MatList, MatListItem } from '@angular/material/list';
+import { MatIcon } from '@angular/material/icon';
 import { GuestBookEntry } from '../guest-book.model';
 
 @Component({
   selector: 'app-guest-book-list',
-  imports: [MatList, MatListItem, MatCard],
+  imports: [MatCard, MatIcon, MatIconButton],
   templateUrl: './guest-book-list.component.html',
   styleUrl: './guest-book-list.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/app/guest-book/guest-book-page/guest-book-page.component.html b/src/app/guest-book/guest-book-page/guest-book-page.component.html
index a3c6f7e..c5400d7 100644
--- a/src/app/guest-book/guest-book-page/guest-book-page.component.html
+++ b/src/app/guest-book/guest-book-page/guest-book-page.component.html
@@ -1,4 +1,6 @@
 <div class="page">
   <app-guest-book-form [saving]="saving()" (formSubmitted)="onSubmit($event)" />
-  <app-guest-book-list [entries]="entries()" />
+  @if (!loading()) {
+    <app-guest-book-list [entries]="entries()" />
+  }
 </div>
diff --git a/src/app/guest-book/guest-book-page/guest-book-page.component.ts b/src/app/guest-book/guest-book-page/guest-book-page.component.ts
index 3757fdd..752135a 100644
--- a/src/app/guest-book/guest-book-page/guest-book-page.component.ts
+++ b/src/app/guest-book/guest-book-page/guest-book-page.component.ts
@@ -6,6 +6,7 @@ import { GuestBookEntry } from '../guest-book.model';
 import { GuestBookPageActions } from '../state/guest-book.actions';
 import {
   selectGuestBookEntries,
+  selectGuestBookEntriesLoading,
   selectGuestBookEntrySaving,
 } from '../state/guest-book.selectors';
 
@@ -18,6 +19,7 @@ import {
 export class GuestBookPageComponent implements OnInit {
   private store = inject(Store);
   entries = this.store.selectSignal(selectGuestBookEntries);
+  loading = this.store.selectSignal(selectGuestBookEntriesLoading);
   saving = this.store.selectSignal(selectGuestBookEntrySaving);
 
   ngOnInit(): void {

From 631ac7f1032a2f50896245a1aa537d451b360eb4 Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Mon, 26 May 2025 16:33:48 +0300
Subject: [PATCH 15/22] Add guest book author dialog

---
 .../guest-book-author-dialog.component.html   | 16 +++++
 .../guest-book-author-dialog.component.scss   | 27 ++++++++
 .../guest-book-author-dialog.component.ts     | 25 ++++++++
 .../guest-book-list.component.html            |  2 +-
 .../guest-book-list.component.ts              | 14 +++-
 .../guest-book-page.component.html            |  5 +-
 .../guest-book-page.component.ts              | 25 +++++++-
 src/app/guest-book/guest-book.service.ts      | 64 +++++++++----------
 .../guest-book/state/guest-book.reducer.ts    |  8 +--
 .../posts/post-page/post-page.component.html  |  2 +-
 .../posts/post-page/post-page.component.ts    | 18 +++---
 src/app/users/users.service.ts                | 27 +++++++-
 12 files changed, 178 insertions(+), 55 deletions(-)
 create mode 100644 src/app/guest-book/guest-book-author-dialog/guest-book-author-dialog.component.html
 create mode 100644 src/app/guest-book/guest-book-author-dialog/guest-book-author-dialog.component.scss
 create mode 100644 src/app/guest-book/guest-book-author-dialog/guest-book-author-dialog.component.ts

diff --git a/src/app/guest-book/guest-book-author-dialog/guest-book-author-dialog.component.html b/src/app/guest-book/guest-book-author-dialog/guest-book-author-dialog.component.html
new file mode 100644
index 0000000..0f2ef14
--- /dev/null
+++ b/src/app/guest-book/guest-book-author-dialog/guest-book-author-dialog.component.html
@@ -0,0 +1,16 @@
+<div mat-dialog-title class="author">
+  <img [src]="data.avatarUrl" alt="Avatar" />
+  <div class="contacts">
+    <h2 mat-dialog-title>{{ data.author.name }}</h2>
+    <span class="email">{{ data.author.email }}</span>
+  </div>
+</div>
+<mat-dialog-content>
+  <h3>Messages</h3>
+  @for (entry of data.entries; track entry.id) {
+    <p>{{ entry.message }}</p>
+  }
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button mat-dialog-close>Close</button>
+</mat-dialog-actions>
diff --git a/src/app/guest-book/guest-book-author-dialog/guest-book-author-dialog.component.scss b/src/app/guest-book/guest-book-author-dialog/guest-book-author-dialog.component.scss
new file mode 100644
index 0000000..5fffdc5
--- /dev/null
+++ b/src/app/guest-book/guest-book-author-dialog/guest-book-author-dialog.component.scss
@@ -0,0 +1,27 @@
+.author {
+  display: flex;
+  align-items: end;
+
+  img {
+    border-radius: 50%;
+    width: 64px;
+    height: 64px;
+  }
+
+  .contacts {
+    margin-left: 16px;
+    display: flex;
+    flex-direction: column;
+
+    h2 {
+      padding: 0;
+      margin: 0;
+      line-height: normal;
+      font-size: 20px;
+    }
+
+    .email {
+      font-size: 14px;
+    }
+  }
+}
diff --git a/src/app/guest-book/guest-book-author-dialog/guest-book-author-dialog.component.ts b/src/app/guest-book/guest-book-author-dialog/guest-book-author-dialog.component.ts
new file mode 100644
index 0000000..b194990
--- /dev/null
+++ b/src/app/guest-book/guest-book-author-dialog/guest-book-author-dialog.component.ts
@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { GuestBookAuthor, GuestBookEntry } from '../guest-book.model';
+
+export interface GuestBookAuthorDialogData {
+  author: GuestBookAuthor;
+  avatarUrl: string;
+  entries: GuestBookEntry[];
+}
+
+@Component({
+  selector: 'app-guest-book-author-dialog',
+  imports: [MatDialogModule, MatButtonModule, MatDialogTitle],
+  templateUrl: './guest-book-author-dialog.component.html',
+  styleUrl: './guest-book-author-dialog.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GuestBookAuthorDialogComponent {
+  readonly data = inject<GuestBookAuthorDialogData>(MAT_DIALOG_DATA);
+}
diff --git a/src/app/guest-book/guest-book-list/guest-book-list.component.html b/src/app/guest-book/guest-book-list/guest-book-list.component.html
index 696796d..0949835 100644
--- a/src/app/guest-book/guest-book-list/guest-book-list.component.html
+++ b/src/app/guest-book/guest-book-list/guest-book-list.component.html
@@ -2,7 +2,7 @@
   <ul class="list">
     @for (entry of entries(); track entry.id) {
       <li class="entry">
-        <button mat-icon-button>
+        <button mat-icon-button (click)="onClick(entry.author)">
           <mat-icon class="icon">person</mat-icon>
         </button>
         <div class="content">
diff --git a/src/app/guest-book/guest-book-list/guest-book-list.component.ts b/src/app/guest-book/guest-book-list/guest-book-list.component.ts
index 577fb29..d8db4df 100644
--- a/src/app/guest-book/guest-book-list/guest-book-list.component.ts
+++ b/src/app/guest-book/guest-book-list/guest-book-list.component.ts
@@ -1,8 +1,13 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from '@angular/core';
 import { MatIconButton } from '@angular/material/button';
 import { MatCard } from '@angular/material/card';
 import { MatIcon } from '@angular/material/icon';
-import { GuestBookEntry } from '../guest-book.model';
+import { GuestBookAuthor, GuestBookEntry } from '../guest-book.model';
 
 @Component({
   selector: 'app-guest-book-list',
@@ -13,4 +18,9 @@ import { GuestBookEntry } from '../guest-book.model';
 })
 export class GuestBookListComponent {
   entries = input<GuestBookEntry[]>([]);
+  authorClicked = output<GuestBookAuthor>();
+
+  onClick(author: GuestBookAuthor) {
+    this.authorClicked.emit(author);
+  }
 }
diff --git a/src/app/guest-book/guest-book-page/guest-book-page.component.html b/src/app/guest-book/guest-book-page/guest-book-page.component.html
index c5400d7..0863b23 100644
--- a/src/app/guest-book/guest-book-page/guest-book-page.component.html
+++ b/src/app/guest-book/guest-book-page/guest-book-page.component.html
@@ -1,6 +1,9 @@
 <div class="page">
   <app-guest-book-form [saving]="saving()" (formSubmitted)="onSubmit($event)" />
   @if (!loading()) {
-    <app-guest-book-list [entries]="entries()" />
+    <app-guest-book-list
+      [entries]="entries()"
+      (authorClicked)="onAuthorClick($event)"
+    />
   }
 </div>
diff --git a/src/app/guest-book/guest-book-page/guest-book-page.component.ts b/src/app/guest-book/guest-book-page/guest-book-page.component.ts
index 752135a..ef1fbcc 100644
--- a/src/app/guest-book/guest-book-page/guest-book-page.component.ts
+++ b/src/app/guest-book/guest-book-page/guest-book-page.component.ts
@@ -1,8 +1,14 @@
 import { Component, inject, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
+import { UsersService } from 'src/app/users/users.service';
+import {
+  GuestBookAuthorDialogComponent,
+  GuestBookAuthorDialogData,
+} from '../guest-book-author-dialog/guest-book-author-dialog.component';
 import { GuestBookFormComponent } from '../guest-book-form/guest-book-form.component';
 import { GuestBookListComponent } from '../guest-book-list/guest-book-list.component';
-import { GuestBookEntry } from '../guest-book.model';
+import { GuestBookAuthor, GuestBookEntry } from '../guest-book.model';
 import { GuestBookPageActions } from '../state/guest-book.actions';
 import {
   selectGuestBookEntries,
@@ -18,6 +24,9 @@ import {
 })
 export class GuestBookPageComponent implements OnInit {
   private store = inject(Store);
+  private usersService = inject(UsersService);
+  private dialog = inject(MatDialog);
+
   entries = this.store.selectSignal(selectGuestBookEntries);
   loading = this.store.selectSignal(selectGuestBookEntriesLoading);
   saving = this.store.selectSignal(selectGuestBookEntrySaving);
@@ -31,4 +40,18 @@ export class GuestBookPageComponent implements OnInit {
       GuestBookPageActions.entrySaved({ entry: guestBookEntry }),
     );
   }
+
+  onAuthorClick(guestBookAuthor: GuestBookAuthor) {
+    this.usersService.getAvatarUrl(guestBookAuthor.email).subscribe((url) => {
+      this.dialog.open(GuestBookAuthorDialogComponent, {
+        data: {
+          author: guestBookAuthor,
+          avatarUrl: url,
+          entries: this.entries().filter(
+            (x) => x.author.email == guestBookAuthor.email,
+          ),
+        } as GuestBookAuthorDialogData,
+      });
+    });
+  }
 }
diff --git a/src/app/guest-book/guest-book.service.ts b/src/app/guest-book/guest-book.service.ts
index 548e1db..a40d7a3 100644
--- a/src/app/guest-book/guest-book.service.ts
+++ b/src/app/guest-book/guest-book.service.ts
@@ -10,90 +10,90 @@ export class GuestBookService {
     {
       id: 1,
       author: {
-        name: 'Emma Wilson',
-        email: 'emma.wilson@example.com',
+        name: 'Ava Thompson',
+        email: 'ava.thompson@example.com',
       },
       message:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        'Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.',
     },
     {
       id: 2,
       author: {
-        name: 'Liam Martinez',
-        email: 'liam.martinez@example.com',
+        name: 'William Clark',
+        email: 'william.clark@example.com',
       },
       message:
-        'Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
+        'Quisque velit nisi, pretium ut lacinia in, elementum id enim. Proin eget tortor risus.',
     },
     {
       id: 3,
       author: {
-        name: 'Olivia Davis',
-        email: 'olivia.davis@example.com',
+        name: 'Dmitrijs Savkins',
+        email: 'dhmitry@gmail.com',
       },
       message:
-        'Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.',
+        'Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
     },
     {
       id: 4,
       author: {
-        name: 'Noah Hernandez',
-        email: 'noah.hernandez@example.com',
+        name: 'William Clark',
+        email: 'william.clark@example.com',
       },
-      message:
-        'Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta.',
+      message: 'Nulla quis lorem ut libero malesuada feugiat.',
     },
     {
       id: 5,
       author: {
-        name: 'Ava Thompson',
-        email: 'ava.thompson@example.com',
+        name: 'James Hall',
+        email: 'james.hall@example.com',
       },
       message:
-        'Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.',
+        'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.',
     },
     {
       id: 6,
       author: {
-        name: 'William Clark',
-        email: 'william.clark@example.com',
+        name: 'Isabella Walker',
+        email: 'isabella.walker@example.com',
       },
-      message:
-        'Donec sollicitudin molestie malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla porttitor accumsan tincidunt.',
+      message: 'Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.',
     },
     {
       id: 7,
       author: {
-        name: 'Sophia Lewis',
-        email: 'sophia.lewis@example.com',
+        name: 'Dmitrijs Savkins',
+        email: 'dhmitry@gmail.com',
       },
-      message: 'Nulla quis lorem ut libero malesuada feugiat.',
+      message:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
     },
     {
       id: 8,
       author: {
-        name: 'Benjamin Robinson',
-        email: 'benjamin.robinson@example.com',
+        name: 'Dmitrijs Savkins',
+        email: 'dhmitry@gmail.com',
       },
       message:
-        'Quisque velit nisi, pretium ut lacinia in, elementum id enim. Proin eget tortor risus.',
+        'Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.',
     },
     {
       id: 9,
       author: {
-        name: 'Isabella Walker',
-        email: 'isabella.walker@example.com',
+        name: 'Dmitrijs Savkins',
+        email: 'dhmitry@gmail.com',
       },
-      message: 'Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.',
+      message:
+        'Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta.',
     },
     {
       id: 10,
       author: {
-        name: 'James Hall',
-        email: 'james.hall@example.com',
+        name: 'Ava Thompson',
+        email: 'ava.thompson@example.com',
       },
       message:
-        'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.',
+        'Donec sollicitudin molestie malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla porttitor accumsan tincidunt.',
     },
   ];
 
diff --git a/src/app/guest-book/state/guest-book.reducer.ts b/src/app/guest-book/state/guest-book.reducer.ts
index f88246a..90e3983 100644
--- a/src/app/guest-book/state/guest-book.reducer.ts
+++ b/src/app/guest-book/state/guest-book.reducer.ts
@@ -61,13 +61,11 @@ export const guestBookFeature = createFeature({
     ),
     on(
       GuestBookApiActions.entrySavedSuccess,
-      (state, { entry }): GuestBookState => {
-        console.log(state, entry);
-        return adapter.addOne(entry, {
+      (state, { entry }): GuestBookState =>
+        adapter.addOne(entry, {
           ...state,
           saving: false,
-        });
-      },
+        }),
     ),
     // TODO: save error handling
   ),
diff --git a/src/app/posts/post-page/post-page.component.html b/src/app/posts/post-page/post-page.component.html
index 5f9cca4..f05cd03 100644
--- a/src/app/posts/post-page/post-page.component.html
+++ b/src/app/posts/post-page/post-page.component.html
@@ -5,6 +5,6 @@
       Posts
     </a>
     <app-post-details [post]="post()!" [user]="user()" [showActions]="false" />
-    <app-post-comments [comments]="(postComments$() | async) ?? []" />
+    <app-post-comments [comments]="postComments()" />
   </div>
 }
diff --git a/src/app/posts/post-page/post-page.component.ts b/src/app/posts/post-page/post-page.component.ts
index f182133..ccf5e42 100644
--- a/src/app/posts/post-page/post-page.component.ts
+++ b/src/app/posts/post-page/post-page.component.ts
@@ -1,10 +1,10 @@
-import { AsyncPipe } from '@angular/common';
 import { Component, computed, inject, OnInit } from '@angular/core';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { RouterLink } from '@angular/router';
 import { Store } from '@ngrx/store';
-import { of } from 'rxjs';
+import { filter, map, switchMap } from 'rxjs';
 import { selectUsersEntities } from 'src/app/users/state/users.selectors';
 import { PostCommentsComponent } from '../post-comments/post-comments.component';
 import { PostDetailsComponent } from '../post-details/post-details.component';
@@ -17,7 +17,6 @@ import { selectPostById } from '../state/posts.selectors';
   imports: [
     PostDetailsComponent,
     PostCommentsComponent,
-    AsyncPipe,
     RouterLink,
     MatButtonModule,
     MatIcon,
@@ -40,14 +39,13 @@ export class PostPageComponent implements OnInit {
     return this.users()[this.post()!.userId];
   });
 
-  // TODO: there should be a better way
-  postComments$ = computed(() => {
-    if (!this.post()) {
-      return of([]);
-    }
+  private postComments$ = toObservable(this.post).pipe(
+    filter((p) => Boolean(p)),
+    map((p) => p!.id),
+    switchMap((id) => this.postsService.getComments(id)),
+  );
 
-    return this.postsService.getComments(this.post()!.id);
-  });
+  postComments = toSignal(this.postComments$, { initialValue: [] });
 
   ngOnInit(): void {
     this.store.dispatch(PostPageActions.pageOpened());
diff --git a/src/app/users/users.service.ts b/src/app/users/users.service.ts
index 2aceb17..07473a4 100644
--- a/src/app/users/users.service.ts
+++ b/src/app/users/users.service.ts
@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { HttpErrorResponse } from '@angular/common/module.d-CnjH8Dlt';
 import { inject, Injectable } from '@angular/core';
-import { catchError, throwError } from 'rxjs';
+import { catchError, from, map, Observable, throwError } from 'rxjs';
 import { User } from './user.model';
 
 @Injectable({
@@ -12,12 +12,35 @@ export class UsersService {
   constructor() {}
   private http = inject(HttpClient);
 
-  getUsers() {
+  getUsers(): Observable<User[]> {
     return this.http
       .get<User[]>(this.usersUrl)
       .pipe(catchError(this.handleError));
   }
 
+  getAvatarUrl(email: string): Observable<string> {
+    return from(this.getGravatarHash(email)).pipe(
+      map((hash) => {
+        return `https://0.gravatar.com/avatar/${hash}?size=256&d=wavatar`;
+      }),
+    );
+  }
+
+  private async getGravatarHash(email: string): Promise<string> {
+    const cleanEmail = email.trim().toLowerCase();
+
+    const encoder = new TextEncoder();
+    const data = encoder.encode(cleanEmail);
+
+    const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    const hashHex = hashArray
+      .map((b) => b.toString(16).padStart(2, '0'))
+      .join('');
+
+    return hashHex;
+  }
+
   private handleError({ status }: HttpErrorResponse) {
     // TODO: unify error handling
     return throwError(() => `${status}: An error occured.`);

From df2ddf7d4771ea562d915c1ea77a9056323786e9 Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Tue, 27 May 2025 10:27:51 +0300
Subject: [PATCH 16/22] Add service tests

---
 src/app/guest-book/guest-book.service.spec.ts | 16 ---
 src/app/posts/posts.service.spec.ts           | 97 ++++++++++++++++++-
 src/app/users/users.service.spec.ts           | 57 ++++++++++-
 src/app/users/users.service.ts                |  4 +-
 tsconfig.json                                 |  7 +-
 5 files changed, 152 insertions(+), 29 deletions(-)
 delete mode 100644 src/app/guest-book/guest-book.service.spec.ts

diff --git a/src/app/guest-book/guest-book.service.spec.ts b/src/app/guest-book/guest-book.service.spec.ts
deleted file mode 100644
index 3236d2c..0000000
--- a/src/app/guest-book/guest-book.service.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { GuestBookService } from './guest-book.service';
-
-describe('GuestBookService', () => {
-  let service: GuestBookService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(GuestBookService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
diff --git a/src/app/posts/posts.service.spec.ts b/src/app/posts/posts.service.spec.ts
index 4fc9b5d..f3138fc 100644
--- a/src/app/posts/posts.service.spec.ts
+++ b/src/app/posts/posts.service.spec.ts
@@ -1,16 +1,107 @@
 import { TestBed } from '@angular/core/testing';
 
+import { provideHttpClient } from '@angular/common/http';
+import {
+  HttpTestingController,
+  provideHttpClientTesting,
+} from '@angular/common/http/testing';
+import { firstValueFrom } from 'rxjs';
+import { Post, PostComment } from './posts.model';
 import { PostsService } from './posts.service';
 
 describe('PostsService', () => {
+  let http: HttpTestingController;
   let service: PostsService;
 
+  let DEFAULT_POSTS: Post[];
+  let DEFAULT_COMMENTS: PostComment[];
+
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      providers: [
+        PostsService,
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
+    });
+
+    http = TestBed.inject(HttpTestingController);
     service = TestBed.inject(PostsService);
+
+    DEFAULT_POSTS = [
+      {
+        id: 1,
+        userId: 1,
+        body: 'Body 1',
+        title: 'Title 1',
+      },
+      {
+        id: 2,
+        userId: 2,
+        body: 'Body 2',
+        title: 'Title 2',
+      },
+      {
+        id: 3,
+        userId: 3,
+        body: 'Body 3',
+        title: 'Title 3',
+      },
+    ];
+
+    DEFAULT_COMMENTS = [
+      {
+        id: 1,
+        postId: 1,
+        name: 'Name 1',
+        email: 'email1@example.com',
+        body: 'Comment 1',
+      },
+      {
+        id: 2,
+        postId: 1,
+        name: 'Name 2',
+        email: 'email2@example.com',
+        body: 'Comment 2',
+      },
+      {
+        id: 3,
+        postId: 1,
+        name: 'Name 3',
+        email: 'email3@example.com',
+        body: 'Comment 3',
+      },
+    ];
+  });
+
+  afterEach(() => {
+    TestBed.inject(HttpTestingController).verify();
   });
 
-  it('should be created', () => {
-    expect(service).toBeTruthy();
+  it('should return posts array from getPosts', async () => {
+    const posts$ = service.getPosts();
+    const postsPromise = firstValueFrom(posts$);
+
+    const req = http.expectOne({
+      url: 'https://jsonplaceholder.typicode.com/posts',
+      method: 'GET',
+    });
+    req.flush(DEFAULT_POSTS);
+
+    expect(await postsPromise).toEqual(DEFAULT_POSTS);
+  });
+
+  it('should return comments array for the provided post ID from getComments', async () => {
+    const postId = 1;
+    const comments$ = service.getComments(postId);
+    const commentsPromise = firstValueFrom(comments$);
+
+    const req = http.expectOne({
+      url: 'https://jsonplaceholder.typicode.com/posts/1/comments',
+      method: 'GET',
+    });
+    req.flush(DEFAULT_COMMENTS);
+
+    expect(await commentsPromise).toEqual(DEFAULT_COMMENTS);
   });
 });
diff --git a/src/app/users/users.service.spec.ts b/src/app/users/users.service.spec.ts
index f81244a..15f6be1 100644
--- a/src/app/users/users.service.spec.ts
+++ b/src/app/users/users.service.spec.ts
@@ -1,16 +1,65 @@
+import { provideHttpClient } from '@angular/common/http';
+import {
+  HttpTestingController,
+  provideHttpClientTesting,
+} from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
-
+import { firstValueFrom } from 'rxjs';
+import { User } from './user.model';
 import { UsersService } from './users.service';
 
 describe('UsersService', () => {
+  let http: HttpTestingController;
   let service: UsersService;
 
+  let DEFAULT_USERS: User[];
+
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      providers: [
+        UsersService,
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
+    });
+
+    http = TestBed.inject(HttpTestingController);
     service = TestBed.inject(UsersService);
+
+    DEFAULT_USERS = [
+      {
+        name: 'Test User 1',
+      },
+      {
+        name: 'Test User 2',
+      },
+    ];
+  });
+
+  afterEach(() => {
+    TestBed.inject(HttpTestingController).verify();
   });
 
-  it('should be created', () => {
-    expect(service).toBeTruthy();
+  it('should return users array from getUsers', async () => {
+    const users$ = service.getUsers();
+    const usersPromise = firstValueFrom(users$);
+
+    const req = http.expectOne({
+      url: 'https://jsonplaceholder.typicode.com/users',
+      method: 'GET',
+    });
+    req.flush(DEFAULT_USERS);
+
+    expect(await usersPromise).toEqual(DEFAULT_USERS);
+  });
+
+  it('should return expected URL from getAvatarUrl', async () => {
+    const email = 'user@example.com';
+
+    const avatarUrl$ = service.getAvatarUrl(email);
+
+    expect(await firstValueFrom(avatarUrl$)).toBe(
+      'https://0.gravatar.com/avatar/b4c9a289323b21a01c3e940f150eb9b8c542587f1abfd8f0e1cc1ffc5e475514?size=256&d=wavatar',
+    );
   });
 });
diff --git a/src/app/users/users.service.ts b/src/app/users/users.service.ts
index 07473a4..db153b8 100644
--- a/src/app/users/users.service.ts
+++ b/src/app/users/users.service.ts
@@ -1,5 +1,4 @@
-import { HttpClient } from '@angular/common/http';
-import { HttpErrorResponse } from '@angular/common/module.d-CnjH8Dlt';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 import { catchError, from, map, Observable, throwError } from 'rxjs';
 import { User } from './user.model';
@@ -9,7 +8,6 @@ import { User } from './user.model';
 })
 export class UsersService {
   private usersUrl = 'https://jsonplaceholder.typicode.com/users';
-  constructor() {}
   private http = inject(HttpClient);
 
   getUsers(): Observable<User[]> {
diff --git a/tsconfig.json b/tsconfig.json
index ff544aa..738841a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,14 +13,15 @@
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
+    "skipLibCheck": true,
+    "isolatedModules": true,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
     "module": "ES2022",
     "useDefineForClassFields": false,
-    "lib": ["ES2022", "dom"],
-    "typeRoots": ["node_modules/@angular/material"]
+    "lib": ["ES2022", "dom"]
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

From 2d93029613c967bdff4aa711b7fd6f51ed1e39a4 Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Tue, 27 May 2025 13:52:08 +0300
Subject: [PATCH 17/22] Add component unit tests

---
 src/app/app.component.spec.ts                 |  17 --
 .../guest-book-form.component.spec.ts         |  78 ++++++++-
 .../guest-book-list.component.spec.ts         |  22 ++-
 .../guest-book-page.component.spec.ts         | 150 +++++++++++++++++-
 .../post-comments.component.spec.ts           |  23 ---
 .../post-details.component.spec.ts            |  23 ---
 .../post-page/post-page.component.spec.ts     | 102 +++++++++++-
 .../posts-list/posts-list.component.spec.ts   |  23 ---
 .../posts-page/posts-page.component.spec.ts   |  21 ++-
 src/app/users/user.model.ts                   |   1 +
 src/app/users/users.service.spec.ts           |   2 +
 11 files changed, 338 insertions(+), 124 deletions(-)
 delete mode 100644 src/app/app.component.spec.ts
 delete mode 100644 src/app/posts/post-comments/post-comments.component.spec.ts
 delete mode 100644 src/app/posts/post-details/post-details.component.spec.ts
 delete mode 100644 src/app/posts/posts-list/posts-list.component.spec.ts

diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
deleted file mode 100644
index 3e3e735..0000000
--- a/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(() =>
-    TestBed.configureTestingModule({
-      imports: [RouterTestingModule, AppComponent],
-    }),
-  );
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-});
diff --git a/src/app/guest-book/guest-book-form/guest-book-form.component.spec.ts b/src/app/guest-book/guest-book-form/guest-book-form.component.spec.ts
index 05c5a37..eb028c9 100644
--- a/src/app/guest-book/guest-book-form/guest-book-form.component.spec.ts
+++ b/src/app/guest-book/guest-book-form/guest-book-form.component.spec.ts
@@ -1,23 +1,85 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { GuestBookEntry } from '../guest-book.model';
 import { GuestBookFormComponent } from './guest-book-form.component';
 
 describe('GuestBookFormComponent', () => {
   let component: GuestBookFormComponent;
   let fixture: ComponentFixture<GuestBookFormComponent>;
 
+  let DEFAULT_ENTRY: GuestBookEntry;
+
   beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [GuestBookFormComponent]
-    })
-    .compileComponents();
+    TestBed.configureTestingModule({
+      imports: [GuestBookFormComponent],
+    });
 
     fixture = TestBed.createComponent(GuestBookFormComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+
+    DEFAULT_ENTRY = {
+      author: {
+        name: 'Author Name',
+        email: 'test@example.com',
+      },
+      message: 'a'.repeat(20),
+    };
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  describe('onSubmit', () => {
+    it('should not emit when form is invalid', () => {
+      spyOn(component.formSubmitted, 'emit');
+
+      component.onSubmit();
+
+      expect(component.formSubmitted.emit).not.toHaveBeenCalled();
+    });
+
+    it('should emit the formSubmitted output with the expected entry', () => {
+      component.form.setValue(DEFAULT_ENTRY);
+      spyOn(component.formSubmitted, 'emit');
+
+      component.onSubmit();
+
+      expect(component.formSubmitted.emit).toHaveBeenCalledWith(DEFAULT_ENTRY);
+    });
+
+    it('should reset form value and errors', () => {
+      component.form.setValue(DEFAULT_ENTRY);
+      spyOn(component.formSubmitted, 'emit');
+
+      component.onSubmit();
+
+      expect(component.form.getRawValue()).toEqual({
+        author: {
+          name: '',
+          email: '',
+        },
+        message: '',
+      });
+      expect(component.name.errors).toBeNull();
+      expect(component.email.errors).toBeNull();
+      expect(component.message.errors).toBeNull();
+    });
+  });
+
+  describe('validation', () => {
+    it('should validate required fields', () => {
+      const requiredError = { required: true };
+      expect(component.name.errors).toEqual(requiredError);
+      expect(component.email.errors).toEqual(requiredError);
+      expect(component.message.errors).toEqual(requiredError);
+    });
+
+    it('should validate email', () => {
+      component.email.setValue('Invalid Email Format');
+      expect(component.email.errors).toEqual({ email: true });
+    });
+
+    it('should validate message to be at least 20 characters', () => {
+      component.message.setValue('a'.repeat(19));
+      expect(component.message.errors).toEqual({
+        minlength: { requiredLength: 20, actualLength: 19 },
+      });
+    });
   });
 });
diff --git a/src/app/guest-book/guest-book-list/guest-book-list.component.spec.ts b/src/app/guest-book/guest-book-list/guest-book-list.component.spec.ts
index 1d4e3b6..208d73f 100644
--- a/src/app/guest-book/guest-book-list/guest-book-list.component.spec.ts
+++ b/src/app/guest-book/guest-book-list/guest-book-list.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { GuestBookAuthor } from '../guest-book.model';
 import { GuestBookListComponent } from './guest-book-list.component';
 
 describe('GuestBookListComponent', () => {
@@ -7,17 +7,23 @@ describe('GuestBookListComponent', () => {
   let fixture: ComponentFixture<GuestBookListComponent>;
 
   beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [GuestBookListComponent]
-    })
-    .compileComponents();
+    TestBed.configureTestingModule({
+      imports: [GuestBookListComponent],
+    });
 
     fixture = TestBed.createComponent(GuestBookListComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('should emit authorClicked with the provided author on click', () => {
+    const author: GuestBookAuthor = {
+      name: 'Test User',
+      email: 'test@example.com',
+    };
+    spyOn(component.authorClicked, 'emit');
+
+    component.onClick(author);
+
+    expect(component.authorClicked.emit).toHaveBeenCalledWith(author);
   });
 });
diff --git a/src/app/guest-book/guest-book-page/guest-book-page.component.spec.ts b/src/app/guest-book/guest-book-page/guest-book-page.component.spec.ts
index 512a521..13069b9 100644
--- a/src/app/guest-book/guest-book-page/guest-book-page.component.spec.ts
+++ b/src/app/guest-book/guest-book-page/guest-book-page.component.spec.ts
@@ -1,23 +1,157 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { MatDialog } from '@angular/material/dialog';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { of } from 'rxjs';
+import { UsersService } from 'src/app/users/users.service';
+import { GuestBookAuthorDialogComponent } from '../guest-book-author-dialog/guest-book-author-dialog.component';
+import { GuestBookAuthor, GuestBookEntry } from '../guest-book.model';
+import { GuestBookPageActions } from '../state/guest-book.actions';
+import {
+  selectGuestBookEntries,
+  selectGuestBookEntriesLoading,
+  selectGuestBookEntrySaving,
+} from '../state/guest-book.selectors';
 import { GuestBookPageComponent } from './guest-book-page.component';
 
 describe('GuestBookPageComponent', () => {
+  let mockUsersService: jasmine.SpyObj<UsersService>;
+  let mockDialog: jasmine.SpyObj<MatDialog>;
+  let dispatchSpy: jasmine.Spy;
+
+  let store: MockStore;
   let component: GuestBookPageComponent;
   let fixture: ComponentFixture<GuestBookPageComponent>;
 
+  const USER_ENTRIES = [
+    {
+      id: 1,
+      author: {
+        name: 'User 1',
+        email: 'user1@example.com',
+      },
+      message: 'Message 1',
+    },
+    {
+      id: 3,
+      author: {
+        name: 'User 1',
+        email: 'user1@example.com',
+      },
+      message: 'Message 3',
+    },
+    {
+      id: 4,
+      author: {
+        name: 'User 1',
+        email: 'user1@example.com',
+      },
+      message: 'Message 4',
+    },
+  ];
+
   beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [GuestBookPageComponent]
-    })
-    .compileComponents();
+    mockUsersService = jasmine.createSpyObj(['getAvatarUrl']);
+    mockDialog = jasmine.createSpyObj(['open']);
+
+    TestBed.configureTestingModule({
+      imports: [GuestBookPageComponent],
+      providers: [
+        provideMockStore({
+          selectors: [
+            {
+              selector: selectGuestBookEntries,
+              value: [
+                {
+                  id: 2,
+                  author: {
+                    name: 'User 2',
+                    email: 'user2@example.com',
+                  },
+                  message: 'Message 2',
+                },
+                ...USER_ENTRIES,
+                {
+                  id: 5,
+                  author: {
+                    name: 'User 2',
+                    email: 'user2@example.com',
+                  },
+                  message: 'Message 5',
+                },
+              ] as GuestBookEntry[],
+            },
+            {
+              selector: selectGuestBookEntrySaving,
+              value: false,
+            },
+            {
+              selector: selectGuestBookEntriesLoading,
+              value: false,
+            },
+          ],
+        }),
+        {
+          provide: UsersService,
+          useValue: mockUsersService,
+        },
+        {
+          provide: MatDialog,
+          useValue: mockDialog,
+        },
+      ],
+    });
 
     fixture = TestBed.createComponent(GuestBookPageComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    store = TestBed.inject(MockStore);
+    dispatchSpy = spyOn(store, 'dispatch');
+  });
+
+  it('should dispatch page opened action on init', () => {
+    component.ngOnInit();
+
+    expect(dispatchSpy).toHaveBeenCalledOnceWith(
+      GuestBookPageActions.pageOpened(),
+    );
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('should dispatch entry saved action on submit', () => {
+    const guestBookEntry: GuestBookEntry = {
+      author: {
+        name: 'Author Name',
+        email: 'test@example.com',
+      },
+      message: 'Test message',
+    };
+
+    component.onSubmit(guestBookEntry);
+
+    expect(dispatchSpy).toHaveBeenCalledOnceWith(
+      GuestBookPageActions.entrySaved({ entry: guestBookEntry }),
+    );
+  });
+
+  it('should open dialog with expected data on author click', () => {
+    const author: GuestBookAuthor = {
+      name: 'User 1',
+      email: 'user1@example.com',
+    };
+
+    const avatarUrl = 'http://example.com';
+    mockUsersService.getAvatarUrl.and.returnValue(of(avatarUrl));
+
+    component.onAuthorClick(author);
+    fixture.detectChanges();
+
+    expect(mockDialog.open).toHaveBeenCalledOnceWith(
+      GuestBookAuthorDialogComponent,
+      {
+        data: {
+          author,
+          avatarUrl,
+          entries: USER_ENTRIES,
+        },
+      },
+    );
   });
 });
diff --git a/src/app/posts/post-comments/post-comments.component.spec.ts b/src/app/posts/post-comments/post-comments.component.spec.ts
deleted file mode 100644
index 2eed1ea..0000000
--- a/src/app/posts/post-comments/post-comments.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PostCommentsComponent } from './post-comments.component';
-
-describe('PostCommentsComponent', () => {
-  let component: PostCommentsComponent;
-  let fixture: ComponentFixture<PostCommentsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PostCommentsComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PostCommentsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/posts/post-details/post-details.component.spec.ts b/src/app/posts/post-details/post-details.component.spec.ts
deleted file mode 100644
index da8d790..0000000
--- a/src/app/posts/post-details/post-details.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PostDetailsComponent } from './post-details.component';
-
-describe('PostDetailsComponent', () => {
-  let component: PostDetailsComponent;
-  let fixture: ComponentFixture<PostDetailsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PostDetailsComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PostDetailsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/posts/post-page/post-page.component.spec.ts b/src/app/posts/post-page/post-page.component.spec.ts
index 6bb5a12..8cd67c3 100644
--- a/src/app/posts/post-page/post-page.component.spec.ts
+++ b/src/app/posts/post-page/post-page.component.spec.ts
@@ -1,23 +1,113 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { ActivatedRoute } from '@angular/router';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { of } from 'rxjs';
+import { selectUsersEntities } from 'src/app/users/state/users.selectors';
+import { User } from 'src/app/users/user.model';
+import { Post, PostComment } from '../posts.model';
+import { PostsService } from '../posts.service';
+import { PostPageActions } from '../state/posts.actions';
+import { selectPostById } from '../state/posts.selectors';
 import { PostPageComponent } from './post-page.component';
 
 describe('PostPageComponent', () => {
+  let mockPostsService: jasmine.SpyObj<PostsService>;
+  let store: MockStore;
   let component: PostPageComponent;
   let fixture: ComponentFixture<PostPageComponent>;
 
+  const user: User = {
+    id: 1,
+    name: 'Test User',
+  };
+
   beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PostPageComponent]
-    })
-    .compileComponents();
+    mockPostsService = jasmine.createSpyObj(['getComments']);
+
+    TestBed.configureTestingModule({
+      imports: [PostPageComponent],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            params: of({ id: 1 }),
+          },
+        },
+        provideMockStore({
+          selectors: [
+            {
+              selector: selectPostById,
+              value: {
+                id: 1,
+                userId: user.id,
+                title: 'Post Title',
+                body: 'Post Body',
+              } as Post,
+            },
+            {
+              selector: selectUsersEntities,
+              value: {
+                [user.id]: user,
+              },
+            },
+          ],
+        }),
+        {
+          provide: PostsService,
+          useValue: mockPostsService,
+        },
+      ],
+    });
 
     fixture = TestBed.createComponent(PostPageComponent);
     component = fixture.componentInstance;
+    store = TestBed.inject(MockStore);
+  });
+
+  it('should dispatch page opened action on init', () => {
+    const dispatchSpy = spyOn(store, 'dispatch');
+    component.ngOnInit();
+
+    expect(dispatchSpy).toHaveBeenCalledOnceWith(PostPageActions.pageOpened());
+  });
+
+  it('should return user by current post user id', () => {
+    expect(component.user()).toBe(user);
+  });
+
+  it('should return undefined user if post is undefined', () => {
+    store.overrideSelector(selectPostById, undefined);
+    expect(component.user()).toBeUndefined();
+  });
+
+  it('should return empty comments when post is undefined', () => {
+    store.overrideSelector(selectPostById, undefined);
     fixture.detectChanges();
+    expect(component.postComments()).toEqual([]);
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('should return post comments by id', () => {
+    const comments: PostComment[] = [
+      {
+        id: 1,
+        postId: 1,
+        name: 'Name 1',
+        email: 'email1@example.com',
+        body: 'Body 1',
+      },
+      {
+        id: 2,
+        postId: 1,
+        name: 'Name 2',
+        email: 'email2@example.com',
+        body: 'Body 2',
+      },
+    ];
+
+    mockPostsService.getComments.and.returnValue(of(comments));
+    fixture.detectChanges();
+
+    expect(component.postComments()).toEqual(comments);
   });
 });
diff --git a/src/app/posts/posts-list/posts-list.component.spec.ts b/src/app/posts/posts-list/posts-list.component.spec.ts
deleted file mode 100644
index 00dd16e..0000000
--- a/src/app/posts/posts-list/posts-list.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PostsListComponent } from './posts-list.component';
-
-describe('PostsListComponent', () => {
-  let component: PostsListComponent;
-  let fixture: ComponentFixture<PostsListComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PostsListComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PostsListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/posts/posts-page/posts-page.component.spec.ts b/src/app/posts/posts-page/posts-page.component.spec.ts
index 16d023d..eabba1d 100644
--- a/src/app/posts/posts-page/posts-page.component.spec.ts
+++ b/src/app/posts/posts-page/posts-page.component.spec.ts
@@ -1,23 +1,28 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { PostsPageActions } from '../state/posts.actions';
 import { PostsPageComponent } from './posts-page.component';
 
 describe('PostsPageComponent', () => {
+  let store: MockStore;
   let component: PostsPageComponent;
   let fixture: ComponentFixture<PostsPageComponent>;
 
   beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PostsPageComponent]
-    })
-    .compileComponents();
+    TestBed.configureTestingModule({
+      imports: [PostsPageComponent],
+      providers: [provideMockStore()],
+    });
 
     fixture = TestBed.createComponent(PostsPageComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    store = TestBed.inject(MockStore);
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('should dispatch page opened action on init', () => {
+    const dispatchSpy = spyOn(store, 'dispatch');
+    component.ngOnInit();
+
+    expect(dispatchSpy).toHaveBeenCalledOnceWith(PostsPageActions.pageOpened());
   });
 });
diff --git a/src/app/users/user.model.ts b/src/app/users/user.model.ts
index c664619..4a77c78 100644
--- a/src/app/users/user.model.ts
+++ b/src/app/users/user.model.ts
@@ -1,3 +1,4 @@
 export interface User {
+  id: number;
   name: string;
 }
diff --git a/src/app/users/users.service.spec.ts b/src/app/users/users.service.spec.ts
index 15f6be1..6c26c04 100644
--- a/src/app/users/users.service.spec.ts
+++ b/src/app/users/users.service.spec.ts
@@ -28,9 +28,11 @@ describe('UsersService', () => {
 
     DEFAULT_USERS = [
       {
+        id: 1,
         name: 'Test User 1',
       },
       {
+        id: 2,
         name: 'Test User 2',
       },
     ];

From a6f247b1a486b1e0919b62c2a670c8404a7645f5 Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Tue, 27 May 2025 15:44:59 +0300
Subject: [PATCH 18/22] Add guest book state unit tests

---
 .../state/guest-book.effects.spec.ts          | 171 ++++++++++++++++++
 .../guest-book/state/guest-book.effects.ts    |   2 +-
 .../state/guest-book.reducer.spec.ts          | 158 ++++++++++++++++
 .../guest-book/state/guest-book.reducer.ts    |   1 -
 .../state/guest-book.selectors.spec.ts        | 105 +++++++++++
 5 files changed, 435 insertions(+), 2 deletions(-)
 create mode 100644 src/app/guest-book/state/guest-book.effects.spec.ts
 create mode 100644 src/app/guest-book/state/guest-book.reducer.spec.ts
 create mode 100644 src/app/guest-book/state/guest-book.selectors.spec.ts

diff --git a/src/app/guest-book/state/guest-book.effects.spec.ts b/src/app/guest-book/state/guest-book.effects.spec.ts
new file mode 100644
index 0000000..c162d6c
--- /dev/null
+++ b/src/app/guest-book/state/guest-book.effects.spec.ts
@@ -0,0 +1,171 @@
+import { TestBed } from '@angular/core/testing';
+import { Actions } from '@ngrx/effects';
+import { provideMockActions } from '@ngrx/effects/testing';
+import { Action } from '@ngrx/store';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { Observable } from 'rxjs';
+import { TestScheduler } from 'rxjs/testing';
+import { GuestBookEntry } from '../guest-book.model';
+import { GuestBookService } from '../guest-book.service';
+import {
+  GuestBookApiActions,
+  GuestBookPageActions,
+} from './guest-book.actions';
+import { GuestBookEffects } from './guest-book.effects';
+import { selectGuestBookEntriesLoaded } from './guest-book.selectors';
+
+describe('GuestBookEffects', () => {
+  let actions$ = new Observable<Action>();
+  let store: MockStore;
+  let mockGuestBookService: jasmine.SpyObj<GuestBookService>;
+  let testScheduler: TestScheduler;
+  let effects: GuestBookEffects;
+
+  beforeEach(() => {
+    mockGuestBookService = jasmine.createSpyObj(['getEntries', 'save']);
+    testScheduler = new TestScheduler((actual, expected) => {
+      expect(actual).toEqual(expected);
+    });
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideMockActions(() => actions$),
+        provideMockStore({
+          selectors: [
+            {
+              selector: selectGuestBookEntriesLoaded,
+              value: false,
+            },
+          ],
+        }),
+        GuestBookEffects,
+        {
+          provide: GuestBookService,
+          useValue: mockGuestBookService,
+        },
+      ],
+    });
+
+    actions$ = TestBed.inject(Actions);
+    effects = TestBed.inject(GuestBookEffects);
+    store = TestBed.inject(MockStore);
+  });
+
+  describe('loadEntries$', () => {
+    it('should return loaded success on pageOpened', () => {
+      const entries: GuestBookEntry[] = [
+        {
+          id: 1,
+          author: {
+            name: 'Author 1',
+            email: 'author1@example.com',
+          },
+          message: 'Message 1',
+        },
+        {
+          id: 2,
+          author: {
+            name: 'Author 2',
+            email: 'author2@example.com',
+          },
+          message: 'Message 2',
+        },
+      ];
+
+      testScheduler.run(({ cold, hot, expectObservable }) => {
+        actions$ = hot('-a', {
+          a: GuestBookPageActions.pageOpened(),
+        });
+        mockGuestBookService.getEntries.and.returnValue(
+          cold('--b|', { b: entries }),
+        );
+
+        expectObservable(effects.loadEntries$).toBe('---c', {
+          c: GuestBookApiActions.entriesLoadedSuccess({ entries }),
+        });
+      });
+    });
+
+    it('should return loaded fail when service fails', () => {
+      const error = 'test error';
+      testScheduler.run(({ hot, cold, expectObservable }) => {
+        actions$ = hot('-a', { a: GuestBookPageActions.pageOpened() });
+        mockGuestBookService.getEntries.and.returnValue(
+          cold('--#', undefined, error),
+        );
+
+        expectObservable(effects.loadEntries$).toBe('---c', {
+          c: GuestBookApiActions.entriesLoadedFail({
+            message: error,
+          }),
+        });
+      });
+    });
+
+    it('should not load entries when they were already loaded', () => {
+      store.overrideSelector(selectGuestBookEntriesLoaded, true);
+      testScheduler.run(({ hot, expectObservable }) => {
+        actions$ = hot('-a--', {
+          a: GuestBookPageActions.pageOpened(),
+        });
+
+        expectObservable(effects.loadEntries$).toBe('----');
+      });
+    });
+  });
+
+  describe('saveEntry$', () => {
+    it('should return saved success on entry saved', () => {
+      const entry: GuestBookEntry = {
+        author: {
+          name: 'Author 1',
+          email: 'author1@example.com',
+        },
+        message: 'Message 1',
+      };
+
+      const savedEntry: GuestBookEntry = {
+        ...entry,
+        id: 1,
+      };
+
+      testScheduler.run(({ cold, hot, expectObservable }) => {
+        actions$ = hot('-a', {
+          a: GuestBookPageActions.entrySaved({ entry }),
+        });
+        mockGuestBookService.save.and.returnValue(
+          cold('--b|', { b: savedEntry }),
+        );
+
+        expectObservable(effects.saveEntry$).toBe('---c', {
+          c: GuestBookApiActions.entrySavedSuccess({ entry: savedEntry }),
+        });
+      });
+    });
+
+    it('should return saved fail when service fails', () => {
+      const entry: GuestBookEntry = {
+        author: {
+          name: 'Author 1',
+          email: 'author1@example.com',
+        },
+        message: 'Message 1',
+      };
+
+      const error = 'test error';
+
+      testScheduler.run(({ hot, cold, expectObservable }) => {
+        actions$ = hot('-a', { a: GuestBookPageActions.entrySaved({ entry }) });
+        mockGuestBookService.save.and.returnValue(
+          cold('--#', undefined, error),
+        );
+
+        expectObservable(effects.saveEntry$).toBe('---c', {
+          c: GuestBookApiActions.entrySavedFail({
+            message: error,
+          }),
+        });
+      });
+    });
+  });
+});
diff --git a/src/app/guest-book/state/guest-book.effects.ts b/src/app/guest-book/state/guest-book.effects.ts
index 9581652..362c939 100644
--- a/src/app/guest-book/state/guest-book.effects.ts
+++ b/src/app/guest-book/state/guest-book.effects.ts
@@ -16,7 +16,7 @@ export class GuestBookEffects {
     return this.actions$.pipe(
       ofType(GuestBookPageActions.pageOpened),
       concatLatestFrom(() => this.store.select(selectGuestBookEntriesLoaded)),
-      filter((_, loaded) => !loaded),
+      filter(([, loaded]) => !loaded),
       exhaustMap(() =>
         this.guestBookService.getEntries().pipe(
           map((entries) =>
diff --git a/src/app/guest-book/state/guest-book.reducer.spec.ts b/src/app/guest-book/state/guest-book.reducer.spec.ts
new file mode 100644
index 0000000..914ef38
--- /dev/null
+++ b/src/app/guest-book/state/guest-book.reducer.spec.ts
@@ -0,0 +1,158 @@
+import { GuestBookEntry } from '../guest-book.model';
+import {
+  GuestBookApiActions,
+  GuestBookPageActions,
+} from './guest-book.actions';
+import { guestBookFeature, GuestBookState } from './guest-book.reducer';
+
+describe('Guest Book Reducer', () => {
+  const DEFAULT_STATE: GuestBookState = {
+    ids: [],
+    entities: {},
+    loading: false,
+    loaded: false,
+    saving: false,
+    errorMessage: '',
+  };
+
+  const DEFAULT_ENTRY: GuestBookEntry = {
+    id: 1,
+    author: {
+      name: 'Name 1',
+      email: 'author1@example.com',
+    },
+    message: 'Message 1',
+  };
+
+  describe('GuestBookPageActions.pageOpened action', () => {
+    it('should set loading to true when not loaded', () => {
+      const action = GuestBookPageActions.pageOpened();
+      const initialState: GuestBookState = {
+        ...DEFAULT_STATE,
+      };
+      const expectedState: GuestBookState = {
+        ...DEFAULT_STATE,
+        loading: true,
+      };
+
+      const result = guestBookFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+
+    it('should set loading to false when loaded', () => {
+      const action = GuestBookPageActions.pageOpened();
+      const initialState: GuestBookState = {
+        ...DEFAULT_STATE,
+        loaded: true,
+      };
+      const expectedState: GuestBookState = {
+        ...initialState,
+        loading: false,
+      };
+
+      const result = guestBookFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+
+    it('should reset the error message', () => {
+      const action = GuestBookPageActions.pageOpened();
+      const initialState: GuestBookState = {
+        ...DEFAULT_STATE,
+        errorMessage: 'Error Message',
+        loaded: true,
+      };
+
+      const result = guestBookFeature.reducer(initialState, action);
+
+      expect(result.errorMessage).toEqual('');
+    });
+  });
+
+  describe('GuestBookPageActions.entrySaved', () => {
+    it('should set saving to true', () => {
+      const action = GuestBookPageActions.entrySaved({ entry: DEFAULT_ENTRY });
+      const initialState: GuestBookState = {
+        ...DEFAULT_STATE,
+        saving: false,
+      };
+      const expectedState: GuestBookState = {
+        ...DEFAULT_STATE,
+        saving: true,
+      };
+
+      const result = guestBookFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+  });
+
+  describe('GuestBookApiActions.entriesLoadedSuccess', () => {
+    it('should set entities, loading to false and loaded to true', () => {
+      const action = GuestBookApiActions.entriesLoadedSuccess({
+        entries: [DEFAULT_ENTRY],
+      });
+      const initialState: GuestBookState = {
+        ...DEFAULT_STATE,
+        loading: true,
+        loaded: false,
+      };
+      const expectedState: GuestBookState = {
+        ...DEFAULT_STATE,
+        ids: [1],
+        entities: {
+          1: DEFAULT_ENTRY,
+        },
+        loading: false,
+        loaded: true,
+      };
+
+      const result = guestBookFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+  });
+
+  describe('GuestBookApiActions.entriesLoadedFail', () => {
+    it('should set error message and loading to false', () => {
+      const error = 'Error Message';
+      const action = GuestBookApiActions.entriesLoadedFail({ message: error });
+      const initialState: GuestBookState = {
+        ...DEFAULT_STATE,
+        loading: true,
+      };
+      const expectedState: GuestBookState = {
+        ...DEFAULT_STATE,
+        loading: false,
+        errorMessage: error,
+      };
+
+      const result = guestBookFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+  });
+
+  describe('GuestBookApiActions.entrySavedSuccess', () => {
+    it('should add entry and set saving to false', () => {
+      const action = GuestBookApiActions.entrySavedSuccess({
+        entry: DEFAULT_ENTRY,
+      });
+      const initialState: GuestBookState = {
+        ...DEFAULT_STATE,
+        saving: true,
+      };
+      const expectedState: GuestBookState = {
+        ...DEFAULT_STATE,
+        ids: [1],
+        entities: { 1: DEFAULT_ENTRY },
+        saving: false,
+      };
+
+      const result = guestBookFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+  });
+});
diff --git a/src/app/guest-book/state/guest-book.reducer.ts b/src/app/guest-book/state/guest-book.reducer.ts
index 90e3983..c6095c3 100644
--- a/src/app/guest-book/state/guest-book.reducer.ts
+++ b/src/app/guest-book/state/guest-book.reducer.ts
@@ -27,7 +27,6 @@ export const guestBookFeature = createFeature({
   reducer: createReducer(
     initialState,
     on(
-      GuestBookPageActions.pageOpened,
       GuestBookPageActions.pageOpened,
       (state): GuestBookState => ({
         ...state,
diff --git a/src/app/guest-book/state/guest-book.selectors.spec.ts b/src/app/guest-book/state/guest-book.selectors.spec.ts
new file mode 100644
index 0000000..971bbba
--- /dev/null
+++ b/src/app/guest-book/state/guest-book.selectors.spec.ts
@@ -0,0 +1,105 @@
+import { GuestBookState } from './guest-book.reducer';
+import {
+  selectGuestBookEntries,
+  selectGuestBookEntriesErrorMessage,
+  selectGuestBookEntriesLoaded,
+  selectGuestBookEntriesLoading,
+  selectGuestBookEntrySaving,
+} from './guest-book.selectors';
+
+describe('Guest Book Selectors', () => {
+  const entries = [
+    {
+      id: 1,
+      author: {
+        name: 'Name 1',
+        email: 'Email 1',
+      },
+      message: 'Message 1',
+    },
+    {
+      id: 2,
+      author: {
+        name: 'Name 2',
+        email: 'Email 2',
+      },
+      message: 'Message 2',
+    },
+  ];
+
+  const initialState: GuestBookState = {
+    entities: {
+      1: entries[0],
+      2: entries[1],
+    },
+    ids: [1, 2],
+    loading: false,
+    loaded: false,
+    saving: false,
+    errorMessage: 'Error Message',
+  };
+
+  it('should select entries', () => {
+    const result = selectGuestBookEntries.projector(initialState);
+    expect(result).toEqual(entries);
+  });
+
+  it('should select entries loading', () => {
+    const state1 = {
+      ...initialState,
+      loading: true,
+    };
+
+    const state2 = {
+      ...initialState,
+      loading: false,
+    };
+
+    const result1 = selectGuestBookEntriesLoading.projector(state1);
+    const result2 = selectGuestBookEntriesLoading.projector(state2);
+
+    expect(result1).toBeTrue();
+    expect(result2).toBeFalse();
+  });
+
+  it('should select entries loaded', () => {
+    const state1 = {
+      ...initialState,
+      loaded: true,
+    };
+
+    const state2 = {
+      ...initialState,
+      loaded: false,
+    };
+
+    const result1 = selectGuestBookEntriesLoaded.projector(state1);
+    const result2 = selectGuestBookEntriesLoaded.projector(state2);
+
+    expect(result1).toBeTrue();
+    expect(result2).toBeFalse();
+  });
+
+  it('should select entries error message', () => {
+    const result = selectGuestBookEntriesErrorMessage.projector(initialState);
+    expect(result).toEqual('Error Message');
+  });
+
+  it('should select entry saving', () => {
+    const state1 = {
+      ...initialState,
+      saving: true,
+    };
+
+    const state2 = {
+      ...initialState,
+      saving: false,
+    };
+
+    const result1 = selectGuestBookEntrySaving.projector(state1);
+    const result2 = selectGuestBookEntrySaving.projector(state2);
+
+    expect(result1).toBeTrue();
+    expect(result2).toBeFalse();
+  });
+});

From 1184eaa4bb486948f45a8f53e7e3449414f34194 Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Tue, 27 May 2025 16:10:50 +0300
Subject: [PATCH 19/22] Add users state unit tests

---
 src/app/users/state/users.effects.spec.ts   | 104 +++++++++++++
 src/app/users/state/users.effects.ts        |   4 +-
 src/app/users/state/users.reducer.spec.ts   | 160 ++++++++++++++++++++
 src/app/users/state/users.reducer.ts        |   1 +
 src/app/users/state/users.selectors.spec.ts |  78 ++++++++++
 src/app/users/state/users.selectors.ts      |   3 -
 6 files changed, 345 insertions(+), 5 deletions(-)
 create mode 100644 src/app/users/state/users.effects.spec.ts
 create mode 100644 src/app/users/state/users.reducer.spec.ts
 create mode 100644 src/app/users/state/users.selectors.spec.ts

diff --git a/src/app/users/state/users.effects.spec.ts b/src/app/users/state/users.effects.spec.ts
new file mode 100644
index 0000000..8bfabc3
--- /dev/null
+++ b/src/app/users/state/users.effects.spec.ts
@@ -0,0 +1,104 @@
+import { TestBed } from '@angular/core/testing';
+import { Actions } from '@ngrx/effects';
+import { provideMockActions } from '@ngrx/effects/testing';
+import { Action } from '@ngrx/store';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { Observable } from 'rxjs';
+import { TestScheduler } from 'rxjs/testing';
+import { PostsPageActions } from 'src/app/posts/state/posts.actions';
+import { User } from '../user.model';
+import { UsersService } from '../users.service';
+import { UsersApiActions } from './users.actions';
+import { UsersEffects } from './users.effects';
+import { selectUsersLoaded } from './users.selectors';
+
+describe('UsersEffects', () => {
+  let store: MockStore;
+  let mockUsersService: jasmine.SpyObj<UsersService>;
+  let testScheduler: TestScheduler;
+  let actions$ = new Observable<Action>();
+  let effects: UsersEffects;
+
+  beforeEach(() => {
+    mockUsersService = jasmine.createSpyObj(['getUsers']);
+    testScheduler = new TestScheduler((actual, expected) => {
+      expect(actual).toEqual(expected);
+    });
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideMockActions(() => actions$),
+        provideMockStore({
+          selectors: [
+            {
+              selector: selectUsersLoaded,
+              value: false,
+            },
+          ],
+        }),
+        UsersEffects,
+        {
+          provide: UsersService,
+          useValue: mockUsersService,
+        },
+      ],
+    });
+
+    actions$ = TestBed.inject(Actions);
+    effects = TestBed.inject(UsersEffects);
+    store = TestBed.inject(MockStore);
+  });
+
+  describe('loadUsers$', () => {
+    it('should return loaded success on pageOpened', () => {
+      const users: User[] = [
+        {
+          id: 1,
+          name: 'User 1',
+        },
+        {
+          id: 2,
+          name: 'User 2',
+        },
+      ];
+
+      testScheduler.run(({ cold, hot, expectObservable }) => {
+        actions$ = hot('-a', {
+          a: PostsPageActions.pageOpened(),
+        });
+        mockUsersService.getUsers.and.returnValue(cold('--b|', { b: users }));
+
+        expectObservable(effects.loadUsers$).toBe('---c', {
+          c: UsersApiActions.usersLoadedSuccess({ users }),
+        });
+      });
+    });
+
+    it('should return loaded fail when service fails', () => {
+      const error = 'test error';
+      testScheduler.run(({ hot, cold, expectObservable }) => {
+        actions$ = hot('-a', { a: PostsPageActions.pageOpened() });
+        mockUsersService.getUsers.and.returnValue(
+          cold('--#', undefined, error),
+        );
+
+        expectObservable(effects.loadUsers$).toBe('---c', {
+          c: UsersApiActions.usersLoadedFail({
+            message: error,
+          }),
+        });
+      });
+    });
+
+    it('should not load entries when they were already loaded', () => {
+      store.overrideSelector(selectUsersLoaded, true);
+      testScheduler.run(({ hot, expectObservable }) => {
+        actions$ = hot('-a--', {
+          a: PostsPageActions.pageOpened(),
+        });
+
+        expectObservable(effects.loadUsers$).toBe('----');
+      });
+    });
+  });
+});
diff --git a/src/app/users/state/users.effects.ts b/src/app/users/state/users.effects.ts
index 174b791..28063b4 100644
--- a/src/app/users/state/users.effects.ts
+++ b/src/app/users/state/users.effects.ts
@@ -13,11 +13,11 @@ import { selectUsersLoaded } from './users.selectors';
 
 @Injectable()
 export class UsersEffects {
-  loadPosts$ = createEffect(() => {
+  loadUsers$ = createEffect(() => {
     return this.actions$.pipe(
       ofType(PostsPageActions.pageOpened, PostPageActions.pageOpened),
       concatLatestFrom(() => this.store.select(selectUsersLoaded)),
-      filter((_, loaded) => !loaded),
+      filter(([, loaded]) => !loaded),
       exhaustMap(() =>
         this.usersService.getUsers().pipe(
           map((users) => UsersApiActions.usersLoadedSuccess({ users })),
diff --git a/src/app/users/state/users.reducer.spec.ts b/src/app/users/state/users.reducer.spec.ts
new file mode 100644
index 0000000..d8d56be
--- /dev/null
+++ b/src/app/users/state/users.reducer.spec.ts
@@ -0,0 +1,160 @@
+import {
+  PostPageActions,
+  PostsPageActions,
+} from 'src/app/posts/state/posts.actions';
+import { User } from '../user.model';
+import { UsersApiActions } from './users.actions';
+import { usersFeature, UsersState } from './users.reducer';
+
+describe('Users Reducer', () => {
+  const DEFAULT_STATE: UsersState = {
+    ids: [],
+    entities: {},
+    loading: false,
+    loaded: false,
+    errorMessage: '',
+  };
+
+  const DEFAULT_USER: User = {
+    id: 1,
+    name: 'User 1',
+  };
+
+  describe('PostsPageAction.pageOpened action', () => {
+    it('should set loading to true when not loaded', () => {
+      const action = PostsPageActions.pageOpened();
+      const initialState: UsersState = {
+        ...DEFAULT_STATE,
+      };
+      const expectedState: UsersState = {
+        ...DEFAULT_STATE,
+        loading: true,
+      };
+
+      const result = usersFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+
+    it('should set loading to false when loaded', () => {
+      const action = PostsPageActions.pageOpened();
+      const initialState: UsersState = {
+        ...DEFAULT_STATE,
+        loaded: true,
+      };
+      const expectedState: UsersState = {
+        ...initialState,
+        loading: false,
+      };
+
+      const result = usersFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+
+    it('should reset the error message', () => {
+      const action = PostsPageActions.pageOpened();
+      const initialState: UsersState = {
+        ...DEFAULT_STATE,
+        errorMessage: 'Error Message',
+        loaded: true,
+      };
+
+      const result = usersFeature.reducer(initialState, action);
+
+      expect(result.errorMessage).toEqual('');
+    });
+  });
+
+  describe('PostPageAction.pageOpened action', () => {
+    it('should set loading to true when not loaded', () => {
+      const action = PostPageActions.pageOpened();
+      const initialState: UsersState = {
+        ...DEFAULT_STATE,
+      };
+      const expectedState: UsersState = {
+        ...DEFAULT_STATE,
+        loading: true,
+      };
+
+      const result = usersFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+
+    it('should set loading to false when loaded', () => {
+      const action = PostPageActions.pageOpened();
+      const initialState: UsersState = {
+        ...DEFAULT_STATE,
+        loaded: true,
+      };
+      const expectedState: UsersState = {
+        ...initialState,
+        loading: false,
+      };
+
+      const result = usersFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+
+    it('should reset the error message', () => {
+      const action = PostPageActions.pageOpened();
+      const initialState: UsersState = {
+        ...DEFAULT_STATE,
+        errorMessage: 'Error Message',
+        loaded: true,
+      };
+
+      const result = usersFeature.reducer(initialState, action);
+
+      expect(result.errorMessage).toEqual('');
+    });
+  });
+
+  describe('UsersApiActions.entriesLoadedSuccess', () => {
+    it('should set entities, loading to false and loaded to true', () => {
+      const action = UsersApiActions.usersLoadedSuccess({
+        users: [DEFAULT_USER],
+      });
+      const initialState: UsersState = {
+        ...DEFAULT_STATE,
+        loading: true,
+        loaded: false,
+      };
+      const expectedState: UsersState = {
+        ...DEFAULT_STATE,
+        ids: [1],
+        entities: {
+          1: DEFAULT_USER,
+        },
+        loading: false,
+        loaded: true,
+      };
+
+      const result = usersFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+  });
+
+  describe('UsersApiActions.entriesLoadedFail', () => {
+    it('should set error message and loading to false', () => {
+      const error = 'Error Message';
+      const action = UsersApiActions.usersLoadedFail({ message: error });
+      const initialState: UsersState = {
+        ...DEFAULT_STATE,
+        loading: true,
+      };
+      const expectedState: UsersState = {
+        ...DEFAULT_STATE,
+        loading: false,
+        errorMessage: error,
+      };
+
+      const result = usersFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+  });
+});
diff --git a/src/app/users/state/users.reducer.ts b/src/app/users/state/users.reducer.ts
index 29ab9fe..c722682 100644
--- a/src/app/users/state/users.reducer.ts
+++ b/src/app/users/state/users.reducer.ts
@@ -38,6 +38,7 @@ export const usersFeature = createFeature({
       adapter.addMany(users, {
         ...state,
         loading: false,
+        loaded: true,
       }),
     ),
     on(
diff --git a/src/app/users/state/users.selectors.spec.ts b/src/app/users/state/users.selectors.spec.ts
new file mode 100644
index 0000000..a2970c0
--- /dev/null
+++ b/src/app/users/state/users.selectors.spec.ts
@@ -0,0 +1,78 @@
+import { User } from '../user.model';
+import { UsersState } from './users.reducer';
+import {
+  selectUsers,
+  selectUsersEntities,
+  selectUsersErrorMessage,
+  selectUsersLoaded,
+  selectUsersLoading,
+} from './users.selectors';
+
+describe('Users Selectors', () => {
+  const users: User[] = [
+    { id: 1, name: 'User 1' },
+    { id: 2, name: 'User 2' },
+  ];
+
+  const initialState: UsersState = {
+    ids: [1, 2],
+    entities: { 1: users[0], 2: users[1] },
+    loading: false,
+    loaded: false,
+    errorMessage: 'Error Message',
+  };
+
+  it('should select users', () => {
+    const result = selectUsers.projector(initialState);
+    expect(result).toEqual(users);
+  });
+
+  it('should select users entities', () => {
+    const result = selectUsersEntities.projector(initialState);
+    expect(result).toEqual({
+      1: users[0],
+      2: users[1],
+    });
+  });
+
+  it('should select users loading', () => {
+    const state1 = {
+      ...initialState,
+      loading: true,
+    };
+
+    const state2 = {
+      ...initialState,
+      loading: false,
+    };
+
+    const result1 = selectUsersLoading.projector(state1);
+    const result2 = selectUsersLoading.projector(state2);
+
+    expect(result1).toBeTrue();
+    expect(result2).toBeFalse();
+  });
+
+  it('should select users loaded', () => {
+    const state1 = {
+      ...initialState,
+      loaded: true,
+    };
+
+    const state2 = {
+      ...initialState,
+      loaded: false,
+    };
+
+    const result1 = selectUsersLoaded.projector(state1);
+    const result2 = selectUsersLoaded.projector(state2);
+
+    expect(result1).toBeTrue();
+    expect(result2).toBeFalse();
+  });
+
+  it('should select users error message', () => {
+    const result = selectUsersErrorMessage.projector(initialState);
+    expect(result).toEqual('Error Message');
+  });
+});
diff --git a/src/app/users/state/users.selectors.ts b/src/app/users/state/users.selectors.ts
index d8a3eea..1872c68 100644
--- a/src/app/users/state/users.selectors.ts
+++ b/src/app/users/state/users.selectors.ts
@@ -10,9 +10,6 @@ export const selectUsers = createSelector(
   reducer.selectUsers,
 );
 
-export const selectUserById = (id: number) =>
-  createSelector(selectUsersEntities, (entities) => entities[id]);
-
 export const selectUsersEntities = createSelector(
   selectUsersState,
   reducer.selectUsersEntities,

From bab656cb6d78fe2160b1c1280adfb0301c1707da Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Wed, 28 May 2025 09:55:49 +0300
Subject: [PATCH 20/22] Add posts state unit tests

---
 src/app/posts/state/posts.effects.spec.ts   | 168 ++++++++++++++++++++
 src/app/posts/state/posts.effects.ts        |   2 +-
 src/app/posts/state/posts.reducer.spec.ts   | 162 +++++++++++++++++++
 src/app/posts/state/posts.reducer.ts        |   8 +-
 src/app/posts/state/posts.selectors.spec.ts | 101 ++++++++++++
 5 files changed, 438 insertions(+), 3 deletions(-)
 create mode 100644 src/app/posts/state/posts.effects.spec.ts
 create mode 100644 src/app/posts/state/posts.reducer.spec.ts
 create mode 100644 src/app/posts/state/posts.selectors.spec.ts

diff --git a/src/app/posts/state/posts.effects.spec.ts b/src/app/posts/state/posts.effects.spec.ts
new file mode 100644
index 0000000..7447dbf
--- /dev/null
+++ b/src/app/posts/state/posts.effects.spec.ts
@@ -0,0 +1,168 @@
+import { TestBed } from '@angular/core/testing';
+import { Actions } from '@ngrx/effects';
+import { provideMockActions } from '@ngrx/effects/testing';
+import { Action } from '@ngrx/store';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { Observable } from 'rxjs';
+import { TestScheduler } from 'rxjs/testing';
+import { Post } from '../posts.model';
+import { PostsService } from '../posts.service';
+import {
+  PostPageActions,
+  PostsApiActions,
+  PostsPageActions,
+} from './posts.actions';
+import { PostsEffects } from './posts.effects';
+import { selectPostsLoaded } from './posts.selectors';
+
+describe('PostsEffects', () => {
+  let store: MockStore;
+  let mockPostsService: jasmine.SpyObj<PostsService>;
+  let testScheduler: TestScheduler;
+  let actions$ = new Observable<Action>();
+  let effects: PostsEffects;
+
+  beforeEach(() => {
+    mockPostsService = jasmine.createSpyObj(['getPosts']);
+    testScheduler = new TestScheduler((actual, expected) => {
+      expect(actual).toEqual(expected);
+    });
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideMockActions(() => actions$),
+        provideMockStore({
+          selectors: [
+            {
+              selector: selectPostsLoaded,
+              value: false,
+            },
+          ],
+        }),
+        PostsEffects,
+        {
+          provide: PostsService,
+          useValue: mockPostsService,
+        },
+      ],
+    });
+
+    actions$ = TestBed.inject(Actions);
+    effects = TestBed.inject(PostsEffects);
+    store = TestBed.inject(MockStore);
+  });
+
+  describe('loadPosts$ on PostsPageActions.pageOpened', () => {
+    it('should return loaded success', () => {
+      const posts: Post[] = [
+        {
+          id: 1,
+          userId: 1,
+          title: 'Title 1',
+          body: 'Body 1',
+        },
+        {
+          id: 2,
+          userId: 2,
+          title: 'Title 2',
+          body: 'Body 2',
+        },
+      ];
+
+      testScheduler.run(({ cold, hot, expectObservable }) => {
+        actions$ = hot('-a', {
+          a: PostsPageActions.pageOpened(),
+        });
+        mockPostsService.getPosts.and.returnValue(cold('--b|', { b: posts }));
+
+        expectObservable(effects.loadPosts$).toBe('---c', {
+          c: PostsApiActions.postsLoadedSuccess({ posts }),
+        });
+      });
+    });
+
+    it('should return loaded fail when service fails', () => {
+      const error = 'test error';
+      testScheduler.run(({ hot, cold, expectObservable }) => {
+        actions$ = hot('-a', { a: PostsPageActions.pageOpened() });
+        mockPostsService.getPosts.and.returnValue(
+          cold('--#', undefined, error),
+        );
+
+        expectObservable(effects.loadPosts$).toBe('---c', {
+          c: PostsApiActions.postsLoadedFail({
+            message: error,
+          }),
+        });
+      });
+    });
+
+    it('should not load entries when they were already loaded', () => {
+      store.overrideSelector(selectPostsLoaded, true);
+      testScheduler.run(({ hot, expectObservable }) => {
+        actions$ = hot('-a--', {
+          a: PostsPageActions.pageOpened(),
+        });
+
+        expectObservable(effects.loadPosts$).toBe('----');
+      });
+    });
+  });
+
+  describe('loadPosts$ on PostPageActions.pageOpened', () => {
+    it('should return loaded success', () => {
+      const posts: Post[] = [
+        {
+          id: 1,
+          userId: 1,
+          title: 'Title 1',
+          body: 'Body 1',
+        },
+        {
+          id: 2,
+          userId: 2,
+          title: 'Title 2',
+          body: 'Body 2',
+        },
+      ];
+
+      testScheduler.run(({ cold, hot, expectObservable }) => {
+        actions$ = hot('-a', {
+          a: PostPageActions.pageOpened(),
+        });
+        mockPostsService.getPosts.and.returnValue(cold('--b|', { b: posts }));
+
+        expectObservable(effects.loadPosts$).toBe('---c', {
+          c: PostsApiActions.postsLoadedSuccess({ posts }),
+        });
+      });
+    });
+
+    it('should return loaded fail when service fails', () => {
+      const error = 'test error';
+      testScheduler.run(({ hot, cold, expectObservable }) => {
+        actions$ = hot('-a', { a: PostPageActions.pageOpened() });
+        mockPostsService.getPosts.and.returnValue(
+          cold('--#', undefined, error),
+        );
+
+        expectObservable(effects.loadPosts$).toBe('---c', {
+          c: PostsApiActions.postsLoadedFail({
+            message: error,
+          }),
+        });
+      });
+    });
+
+    it('should not load entries when they were already loaded', () => {
+      store.overrideSelector(selectPostsLoaded, true);
+      testScheduler.run(({ hot, expectObservable }) => {
+        actions$ = hot('-a--', {
+          a: PostPageActions.pageOpened(),
+        });
+
+        expectObservable(effects.loadPosts$).toBe('----');
+      });
+    });
+  });
+});
diff --git a/src/app/posts/state/posts.effects.ts b/src/app/posts/state/posts.effects.ts
index dcca79f..8e3e870 100644
--- a/src/app/posts/state/posts.effects.ts
+++ b/src/app/posts/state/posts.effects.ts
@@ -17,7 +17,7 @@ export class PostsEffects {
     return this.actions$.pipe(
       ofType(PostsPageActions.pageOpened, PostPageActions.pageOpened),
       concatLatestFrom(() => this.store.select(selectPostsLoaded)),
-      filter((_, loaded) => !loaded),
+      filter(([, loaded]) => !loaded),
       exhaustMap(() =>
         this.postsService.getPosts().pipe(
           map((posts) => PostsApiActions.postsLoadedSuccess({ posts })),
diff --git a/src/app/posts/state/posts.reducer.spec.ts b/src/app/posts/state/posts.reducer.spec.ts
new file mode 100644
index 0000000..b261023
--- /dev/null
+++ b/src/app/posts/state/posts.reducer.spec.ts
@@ -0,0 +1,162 @@
+import { Post } from '../posts.model';
+import {
+  PostPageActions,
+  PostsApiActions,
+  PostsPageActions,
+} from './posts.actions';
+import { postsFeature, PostsState } from './posts.reducer';
+
+describe('Posts Reducer', () => {
+  const DEFAULT_STATE: PostsState = {
+    ids: [],
+    entities: {},
+    loading: false,
+    loaded: false,
+    errorMessage: '',
+  };
+
+  const DEFAULT_POST: Post = {
+    id: 1,
+    userId: 1,
+    title: 'Title 1',
+    body: 'Body 1',
+  };
+
+  describe('PostsPageActions.pageOpened action', () => {
+    it('should set loading to true when not loaded', () => {
+      const action = PostsPageActions.pageOpened();
+      const initialState: PostsState = {
+        ...DEFAULT_STATE,
+      };
+      const expectedState: PostsState = {
+        ...DEFAULT_STATE,
+        loading: true,
+      };
+
+      const result = postsFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+
+    it('should set loading to false when loaded', () => {
+      const action = PostsPageActions.pageOpened();
+      const initialState: PostsState = {
+        ...DEFAULT_STATE,
+        loaded: true,
+      };
+      const expectedState: PostsState = {
+        ...initialState,
+        loading: false,
+      };
+
+      const result = postsFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+
+    it('should reset the error message', () => {
+      const action = PostsPageActions.pageOpened();
+      const initialState: PostsState = {
+        ...DEFAULT_STATE,
+        errorMessage: 'Error Message',
+        loaded: true,
+      };
+
+      const result = postsFeature.reducer(initialState, action);
+
+      expect(result.errorMessage).toEqual('');
+    });
+  });
+
+  describe('PostPageActions.pageOpened action', () => {
+    it('should set loading to true when not loaded', () => {
+      const action = PostPageActions.pageOpened();
+      const initialState: PostsState = {
+        ...DEFAULT_STATE,
+      };
+      const expectedState: PostsState = {
+        ...DEFAULT_STATE,
+        loading: true,
+      };
+
+      const result = postsFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+
+    it('should set loading to false when loaded', () => {
+      const action = PostPageActions.pageOpened();
+      const initialState: PostsState = {
+        ...DEFAULT_STATE,
+        loaded: true,
+      };
+      const expectedState: PostsState = {
+        ...initialState,
+        loading: false,
+      };
+
+      const result = postsFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+
+    it('should reset the error message', () => {
+      const action = PostPageActions.pageOpened();
+      const initialState: PostsState = {
+        ...DEFAULT_STATE,
+        errorMessage: 'Error Message',
+        loaded: true,
+      };
+
+      const result = postsFeature.reducer(initialState, action);
+
+      expect(result.errorMessage).toEqual('');
+    });
+  });
+
+  describe('PostsApiActions.postsLoadedSuccess', () => {
+    it('should set entities, loading to false and loaded to true', () => {
+      const action = PostsApiActions.postsLoadedSuccess({
+        posts: [DEFAULT_POST],
+      });
+      const initialState: PostsState = {
+        ...DEFAULT_STATE,
+        loading: true,
+        loaded: false,
+      };
+      const expectedState: PostsState = {
+        ...DEFAULT_STATE,
+        ids: [1],
+        entities: {
+          1: DEFAULT_POST,
+        },
+        loading: false,
+        loaded: true,
+      };
+
+      const result = postsFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+  });
+
+  describe('PostsApiActions.postsLoadedFail', () => {
+    it('should set error message and loading to false', () => {
+      const error = 'Error Message';
+      const action = PostsApiActions.postsLoadedFail({ message: error });
+      const initialState: PostsState = {
+        ...DEFAULT_STATE,
+        loading: true,
+      };
+      const expectedState: PostsState = {
+        ...DEFAULT_STATE,
+        loading: false,
+        errorMessage: error,
+      };
+
+      const result = postsFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+  });
+});
diff --git a/src/app/posts/state/posts.reducer.ts b/src/app/posts/state/posts.reducer.ts
index 40efcd8..88a6ec8 100644
--- a/src/app/posts/state/posts.reducer.ts
+++ b/src/app/posts/state/posts.reducer.ts
@@ -1,7 +1,11 @@
 import { createEntityAdapter, EntityState } from '@ngrx/entity';
 import { createFeature, createReducer, on } from '@ngrx/store';
 import { Post } from '../posts.model';
-import { PostsApiActions, PostsPageActions } from './posts.actions';
+import {
+  PostPageActions,
+  PostsApiActions,
+  PostsPageActions,
+} from './posts.actions';
 
 export interface PostsState extends EntityState<Post> {
   loading: boolean;
@@ -23,7 +27,7 @@ export const postsFeature = createFeature({
     initialState,
     on(
       PostsPageActions.pageOpened,
-      PostsPageActions.pageOpened,
+      PostPageActions.pageOpened,
       (state): PostsState => ({
         ...state,
         loading: !state.loaded,
diff --git a/src/app/posts/state/posts.selectors.spec.ts b/src/app/posts/state/posts.selectors.spec.ts
new file mode 100644
index 0000000..e133be4
--- /dev/null
+++ b/src/app/posts/state/posts.selectors.spec.ts
@@ -0,0 +1,101 @@
+import { Post } from '../posts.model';
+import { PostsState } from './posts.reducer';
+import {
+  selectPostById,
+  selectPosts,
+  selectPostsEntities,
+  selectPostsErrorMessage,
+  selectPostsLoaded,
+  selectPostsLoading,
+} from './posts.selectors';
+
+describe('Posts Selectors', () => {
+  const posts: Post[] = [
+    {
+      id: 1,
+      userId: 1,
+      title: 'Title 1',
+      body: 'Body 1',
+    },
+    {
+      id: 2,
+      userId: 2,
+      title: 'Title 2',
+      body: 'Body 2',
+    },
+  ];
+
+  const entities = {
+    1: posts[0],
+    2: posts[1],
+  };
+
+  const initialState: PostsState = {
+    ids: [1, 2],
+    entities,
+    loading: false,
+    loaded: false,
+    errorMessage: 'Error Message',
+  };
+
+  it('should select posts', () => {
+    const result = selectPosts.projector(initialState);
+    expect(result).toEqual(posts);
+  });
+
+  it('should select posts entities', () => {
+    const result = selectPostsEntities.projector(initialState);
+    expect(result).toEqual(entities);
+  });
+
+  it('should select post by id when route contains param', () => {
+    const result = selectPostById.projector(entities, '1');
+    expect(result).toEqual(posts[0]);
+  });
+
+  it('should return undefined when selecting post by id without route param', () => {
+    const result = selectPostById.projector(entities, undefined);
+    expect(result).toBeUndefined();
+  });
+
+  it('should select posts loading', () => {
+    const state1 = {
+      ...initialState,
+      loading: true,
+    };
+
+    const state2 = {
+      ...initialState,
+      loading: false,
+    };
+
+    const result1 = selectPostsLoading.projector(state1);
+    const result2 = selectPostsLoading.projector(state2);
+
+    expect(result1).toBeTrue();
+    expect(result2).toBeFalse();
+  });
+
+  it('should select posts loaded', () => {
+    const state1 = {
+      ...initialState,
+      loaded: true,
+    };
+
+    const state2 = {
+      ...initialState,
+      loaded: false,
+    };
+
+    const result1 = selectPostsLoaded.projector(state1);
+    const result2 = selectPostsLoaded.projector(state2);
+
+    expect(result1).toBeTrue();
+    expect(result2).toBeFalse();
+  });
+
+  it('should select posts error message', () => {
+    const result = selectPostsErrorMessage.projector(initialState);
+    expect(result).toEqual('Error Message');
+  });
+});

From 3554e5c3b139999b580213d8e1b3bb6abc520dcc Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Wed, 28 May 2025 14:02:25 +0300
Subject: [PATCH 21/22] Adjust error handling

---
 .../state/guest-book.reducer.spec.ts          | 29 ++++++++++++++++---
 .../guest-book/state/guest-book.reducer.ts    | 20 +++++++++----
 .../state/guest-book.selectors.spec.ts        |  3 +-
 .../guest-book/state/guest-book.selectors.ts  |  2 +-
 .../posts/post-page/post-page.component.html  | 11 +++++--
 .../post-page/post-page.component.spec.ts     | 21 ++++++++++++--
 .../posts/post-page/post-page.component.ts    | 15 ++++++++--
 .../posts-list/posts-list.component.html      | 14 ++++-----
 .../posts/posts-list/posts-list.component.ts  |  1 -
 .../posts-page/posts-page.component.html      |  8 ++---
 src/app/posts/posts.service.ts                | 15 ++++------
 src/app/users/users.service.ts                | 14 +++------
 src/app/utils/http.ts                         |  6 ++++
 13 files changed, 106 insertions(+), 53 deletions(-)
 create mode 100644 src/app/utils/http.ts

diff --git a/src/app/guest-book/state/guest-book.reducer.spec.ts b/src/app/guest-book/state/guest-book.reducer.spec.ts
index 914ef38..adffe6a 100644
--- a/src/app/guest-book/state/guest-book.reducer.spec.ts
+++ b/src/app/guest-book/state/guest-book.reducer.spec.ts
@@ -12,7 +12,8 @@ describe('Guest Book Reducer', () => {
     loading: false,
     loaded: false,
     saving: false,
-    errorMessage: '',
+    loadErrorMessage: '',
+    saveErrorMessage: '',
   };
 
   const DEFAULT_ENTRY: GuestBookEntry = {
@@ -60,13 +61,13 @@ describe('Guest Book Reducer', () => {
       const action = GuestBookPageActions.pageOpened();
       const initialState: GuestBookState = {
         ...DEFAULT_STATE,
-        errorMessage: 'Error Message',
+        loadErrorMessage: 'Error Message',
         loaded: true,
       };
 
       const result = guestBookFeature.reducer(initialState, action);
 
-      expect(result.errorMessage).toEqual('');
+      expect(result.loadErrorMessage).toEqual('');
     });
   });
 
@@ -125,7 +126,7 @@ describe('Guest Book Reducer', () => {
       const expectedState: GuestBookState = {
         ...DEFAULT_STATE,
         loading: false,
-        errorMessage: error,
+        loadErrorMessage: error,
       };
 
       const result = guestBookFeature.reducer(initialState, action);
@@ -155,4 +156,24 @@ describe('Guest Book Reducer', () => {
       expect(result).toEqual(expectedState);
     });
   });
+
+  describe('GuestBookApiActions.entrySavedFail', () => {
+    it('should set error message and loading to false', () => {
+      const error = 'Error Message';
+      const action = GuestBookApiActions.entrySavedFail({ message: error });
+      const initialState: GuestBookState = {
+        ...DEFAULT_STATE,
+        loading: true,
+      };
+      const expectedState: GuestBookState = {
+        ...DEFAULT_STATE,
+        loading: false,
+        saveErrorMessage: error,
+      };
+
+      const result = guestBookFeature.reducer(initialState, action);
+
+      expect(result).toEqual(expectedState);
+    });
+  });
 });
diff --git a/src/app/guest-book/state/guest-book.reducer.ts b/src/app/guest-book/state/guest-book.reducer.ts
index c6095c3..d736a68 100644
--- a/src/app/guest-book/state/guest-book.reducer.ts
+++ b/src/app/guest-book/state/guest-book.reducer.ts
@@ -9,8 +9,9 @@ import {
 export interface GuestBookState extends EntityState<GuestBookEntry> {
   loading: boolean;
   loaded: boolean;
+  loadErrorMessage: string;
   saving: boolean;
-  errorMessage: string;
+  saveErrorMessage: string;
 }
 
 const adapter = createEntityAdapter<GuestBookEntry>({});
@@ -18,8 +19,9 @@ const adapter = createEntityAdapter<GuestBookEntry>({});
 const initialState: GuestBookState = adapter.getInitialState({
   loading: false,
   loaded: false,
+  loadErrorMessage: '',
   saving: false,
-  errorMessage: '',
+  saveErrorMessage: '',
 });
 
 export const guestBookFeature = createFeature({
@@ -31,7 +33,7 @@ export const guestBookFeature = createFeature({
       (state): GuestBookState => ({
         ...state,
         loading: !state.loaded,
-        errorMessage: '',
+        loadErrorMessage: '',
       }),
     ),
     on(
@@ -39,6 +41,7 @@ export const guestBookFeature = createFeature({
       (state): GuestBookState => ({
         ...state,
         saving: true,
+        saveErrorMessage: '',
       }),
     ),
     on(
@@ -55,7 +58,7 @@ export const guestBookFeature = createFeature({
       (state, { message }): GuestBookState => ({
         ...state,
         loading: false,
-        errorMessage: message,
+        loadErrorMessage: message,
       }),
     ),
     on(
@@ -66,7 +69,14 @@ export const guestBookFeature = createFeature({
           saving: false,
         }),
     ),
-    // TODO: save error handling
+    on(
+      GuestBookApiActions.entrySavedFail,
+      (state, { message }): GuestBookState => ({
+        ...state,
+        loading: false,
+        saveErrorMessage: message,
+      }),
+    ),
   ),
 });
 
diff --git a/src/app/guest-book/state/guest-book.selectors.spec.ts b/src/app/guest-book/state/guest-book.selectors.spec.ts
index 971bbba..d6ff8c2 100644
--- a/src/app/guest-book/state/guest-book.selectors.spec.ts
+++ b/src/app/guest-book/state/guest-book.selectors.spec.ts
@@ -36,7 +36,8 @@ describe('Guest Book Selectors', () => {
     loading: false,
     loaded: false,
     saving: false,
-    errorMessage: 'Error Message',
+    loadErrorMessage: 'Error Message',
+    saveErrorMessage: '',
   };
 
   it('should select entries', () => {
diff --git a/src/app/guest-book/state/guest-book.selectors.ts b/src/app/guest-book/state/guest-book.selectors.ts
index b9b2d5e..f563831 100644
--- a/src/app/guest-book/state/guest-book.selectors.ts
+++ b/src/app/guest-book/state/guest-book.selectors.ts
@@ -22,7 +22,7 @@ export const selectGuestBookEntriesLoaded = createSelector(
 
 export const selectGuestBookEntriesErrorMessage = createSelector(
   selectGuestBookState,
-  (state) => state.errorMessage,
+  (state) => state.loadErrorMessage,
 );
 
 export const selectGuestBookEntrySaving = createSelector(
diff --git a/src/app/posts/post-page/post-page.component.html b/src/app/posts/post-page/post-page.component.html
index f05cd03..3eccddf 100644
--- a/src/app/posts/post-page/post-page.component.html
+++ b/src/app/posts/post-page/post-page.component.html
@@ -1,10 +1,17 @@
-@if (post()) {
+@if (postsErrorMessage()) {
+  <p>Error {{ postsErrorMessage() }}</p>
+} @else if (post()) {
   <div class="post-page">
     <a class="posts-link" mat-button routerLink="/posts">
       <mat-icon>arrow_back</mat-icon>
       Posts
     </a>
     <app-post-details [post]="post()!" [user]="user()" [showActions]="false" />
-    <app-post-comments [comments]="postComments()" />
+
+    @if (commentsErrorMessage()) {
+      <p>Error {{ commentsErrorMessage() }}</p>
+    } @else {
+      <app-post-comments [comments]="postComments()" />
+    }
   </div>
 }
diff --git a/src/app/posts/post-page/post-page.component.spec.ts b/src/app/posts/post-page/post-page.component.spec.ts
index 8cd67c3..a6fad72 100644
--- a/src/app/posts/post-page/post-page.component.spec.ts
+++ b/src/app/posts/post-page/post-page.component.spec.ts
@@ -2,13 +2,16 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ActivatedRoute } from '@angular/router';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
-import { of } from 'rxjs';
+import { of, throwError } from 'rxjs';
 import { selectUsersEntities } from 'src/app/users/state/users.selectors';
 import { User } from 'src/app/users/user.model';
 import { Post, PostComment } from '../posts.model';
 import { PostsService } from '../posts.service';
 import { PostPageActions } from '../state/posts.actions';
-import { selectPostById } from '../state/posts.selectors';
+import {
+  selectPostById,
+  selectPostsErrorMessage,
+} from '../state/posts.selectors';
 import { PostPageComponent } from './post-page.component';
 
 describe('PostPageComponent', () => {
@@ -45,6 +48,10 @@ describe('PostPageComponent', () => {
                 body: 'Post Body',
               } as Post,
             },
+            {
+              selector: selectPostsErrorMessage,
+              value: '',
+            },
             {
               selector: selectUsersEntities,
               value: {
@@ -110,4 +117,14 @@ describe('PostPageComponent', () => {
 
     expect(component.postComments()).toEqual(comments);
   });
+
+  it('should return empty array and set error message on posts comments error', () => {
+    const error = 'test error';
+    mockPostsService.getComments.and.returnValue(throwError(() => error));
+
+    fixture.detectChanges();
+
+    expect(component.postComments()).toEqual([]);
+    expect(component.commentsErrorMessage()).toEqual(error);
+  });
 });
diff --git a/src/app/posts/post-page/post-page.component.ts b/src/app/posts/post-page/post-page.component.ts
index ccf5e42..fd985a9 100644
--- a/src/app/posts/post-page/post-page.component.ts
+++ b/src/app/posts/post-page/post-page.component.ts
@@ -1,16 +1,19 @@
-import { Component, computed, inject, OnInit } from '@angular/core';
+import { Component, computed, inject, OnInit, signal } from '@angular/core';
 import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { RouterLink } from '@angular/router';
 import { Store } from '@ngrx/store';
-import { filter, map, switchMap } from 'rxjs';
+import { catchError, filter, map, of, switchMap } from 'rxjs';
 import { selectUsersEntities } from 'src/app/users/state/users.selectors';
 import { PostCommentsComponent } from '../post-comments/post-comments.component';
 import { PostDetailsComponent } from '../post-details/post-details.component';
 import { PostsService } from '../posts.service';
 import { PostPageActions } from '../state/posts.actions';
-import { selectPostById } from '../state/posts.selectors';
+import {
+  selectPostById,
+  selectPostsErrorMessage,
+} from '../state/posts.selectors';
 
 @Component({
   selector: 'app-post-page',
@@ -29,6 +32,8 @@ export class PostPageComponent implements OnInit {
   private postsService = inject(PostsService);
 
   post = this.store.selectSignal(selectPostById);
+  postsErrorMessage = this.store.selectSignal(selectPostsErrorMessage);
+  commentsErrorMessage = signal('');
 
   private users = this.store.selectSignal(selectUsersEntities);
   user = computed(() => {
@@ -43,6 +48,10 @@ export class PostPageComponent implements OnInit {
     filter((p) => Boolean(p)),
     map((p) => p!.id),
     switchMap((id) => this.postsService.getComments(id)),
+    catchError((error) => {
+      this.commentsErrorMessage.set(error);
+      return of([]);
+    }),
   );
 
   postComments = toSignal(this.postComments$, { initialValue: [] });
diff --git a/src/app/posts/posts-list/posts-list.component.html b/src/app/posts/posts-list/posts-list.component.html
index 6059737..043211b 100644
--- a/src/app/posts/posts-list/posts-list.component.html
+++ b/src/app/posts/posts-list/posts-list.component.html
@@ -1,9 +1,5 @@
-@if (errorMessage()) {
-  <p>Error: {{ errorMessage() }}</p>
-} @else {
-  <div class="posts">
-    @for (post of posts(); track post.id) {
-      <app-post-details [post]="post" [user]="users()[post.userId]" />
-    }
-  </div>
-}
+<div class="posts">
+  @for (post of posts(); track post.id) {
+    <app-post-details [post]="post" [user]="users()[post.userId]" />
+  }
+</div>
diff --git a/src/app/posts/posts-list/posts-list.component.ts b/src/app/posts/posts-list/posts-list.component.ts
index 498790f..690a9e7 100644
--- a/src/app/posts/posts-list/posts-list.component.ts
+++ b/src/app/posts/posts-list/posts-list.component.ts
@@ -13,5 +13,4 @@ import { Post } from '../posts.model';
 export class PostsListComponent {
   posts = input<Post[]>([]);
   users = input<Record<string, User | undefined>>({});
-  errorMessage = input<string>('');
 }
diff --git a/src/app/posts/posts-page/posts-page.component.html b/src/app/posts/posts-page/posts-page.component.html
index a3b17b9..f4a3ec8 100644
--- a/src/app/posts/posts-page/posts-page.component.html
+++ b/src/app/posts/posts-page/posts-page.component.html
@@ -1,9 +1,7 @@
 @if (loading()) {
   <p>Loading...</p>
+} @else if (errorMessage()) {
+  <p>Error {{ errorMessage() }}</p>
 } @else {
-  <app-posts-list
-    [posts]="posts()"
-    [users]="users()"
-    [errorMessage]="errorMessage()"
-  />
+  <app-posts-list [posts]="posts()" [users]="users()" />
 }
diff --git a/src/app/posts/posts.service.ts b/src/app/posts/posts.service.ts
index b7578b3..229878c 100644
--- a/src/app/posts/posts.service.ts
+++ b/src/app/posts/posts.service.ts
@@ -1,6 +1,7 @@
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
-import { catchError, throwError } from 'rxjs';
+import { catchError } from 'rxjs';
+import { handleError } from '../utils/http';
 import { Post, PostComment } from './posts.model';
 
 @Injectable({
@@ -11,22 +12,16 @@ export class PostsService {
   private http = inject(HttpClient);
 
   getPosts() {
-    return this.http
-      .get<Post[]>(this.postsUrl)
-      .pipe(catchError(this.handleError));
+    return this.http.get<Post[]>(this.postsUrl).pipe(catchError(handleError));
   }
 
   getComments(postId: number) {
     return this.http
       .get<PostComment[]>(this.getCommentsUrl(postId))
-      .pipe(catchError(this.handleError));
+      .pipe(catchError(handleError));
   }
 
   private getCommentsUrl(postId: number) {
     return `${this.postsUrl}/${postId}/comments`;
   }
-
-  private handleError({ status }: HttpErrorResponse) {
-    return throwError(() => `${status}: An error occured.`);
-  }
 }
diff --git a/src/app/users/users.service.ts b/src/app/users/users.service.ts
index db153b8..7f4a342 100644
--- a/src/app/users/users.service.ts
+++ b/src/app/users/users.service.ts
@@ -1,6 +1,7 @@
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
-import { catchError, from, map, Observable, throwError } from 'rxjs';
+import { catchError, from, map, Observable } from 'rxjs';
+import { handleError } from '../utils/http';
 import { User } from './user.model';
 
 @Injectable({
@@ -11,9 +12,7 @@ export class UsersService {
   private http = inject(HttpClient);
 
   getUsers(): Observable<User[]> {
-    return this.http
-      .get<User[]>(this.usersUrl)
-      .pipe(catchError(this.handleError));
+    return this.http.get<User[]>(this.usersUrl).pipe(catchError(handleError));
   }
 
   getAvatarUrl(email: string): Observable<string> {
@@ -38,9 +37,4 @@ export class UsersService {
 
     return hashHex;
   }
-
-  private handleError({ status }: HttpErrorResponse) {
-    // TODO: unify error handling
-    return throwError(() => `${status}: An error occured.`);
-  }
 }
diff --git a/src/app/utils/http.ts b/src/app/utils/http.ts
new file mode 100644
index 0000000..82a5739
--- /dev/null
+++ b/src/app/utils/http.ts
@@ -0,0 +1,6 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { throwError } from 'rxjs';
+
+export function handleError({ status }: HttpErrorResponse) {
+  return throwError(() => `${status}: An error occured.`);
+}

From 6de9fc067370dfc8a84b9ebf0fb6e85d1e607ddd Mon Sep 17 00:00:00 2001
From: Dmitrijs Savkins <dmitrijs.savkins@ctco.lv>
Date: Thu, 29 May 2025 10:42:53 +0300
Subject: [PATCH 22/22] Add not found pages

---
 src/app/app-routes.ts                         |  5 ++++
 .../page-not-found.component.html             |  1 +
 .../page-not-found.component.scss             |  0
 .../page-not-found.component.ts               | 10 ++++++++
 .../posts/post-page/post-page.component.html  | 25 +++++++++++--------
 .../post-page/post-page.component.spec.ts     |  6 ++++-
 .../posts/post-page/post-page.component.ts    |  2 ++
 7 files changed, 38 insertions(+), 11 deletions(-)
 create mode 100644 src/app/page-not-found/page-not-found.component.html
 create mode 100644 src/app/page-not-found/page-not-found.component.scss
 create mode 100644 src/app/page-not-found/page-not-found.component.ts

diff --git a/src/app/app-routes.ts b/src/app/app-routes.ts
index 666d0b9..ba27816 100644
--- a/src/app/app-routes.ts
+++ b/src/app/app-routes.ts
@@ -4,6 +4,7 @@ import { provideState } from '@ngrx/store';
 import { GuestBookService } from './guest-book/guest-book.service';
 import { GuestBookEffects } from './guest-book/state/guest-book.effects';
 import { guestBookFeature } from './guest-book/state/guest-book.reducer';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { PostsService } from './posts/posts.service';
 import { PostsEffects } from './posts/state/posts.effects';
 import { postsFeature } from './posts/state/posts.reducer';
@@ -33,4 +34,8 @@ export const appRoutes: Routes = [
       provideEffects(GuestBookEffects),
     ],
   },
+  {
+    path: '**',
+    component: PageNotFoundComponent,
+  },
 ];
diff --git a/src/app/page-not-found/page-not-found.component.html b/src/app/page-not-found/page-not-found.component.html
new file mode 100644
index 0000000..a8ec4b4
--- /dev/null
+++ b/src/app/page-not-found/page-not-found.component.html
@@ -0,0 +1 @@
+<p>Page not found.</p>
diff --git a/src/app/page-not-found/page-not-found.component.scss b/src/app/page-not-found/page-not-found.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/page-not-found/page-not-found.component.ts b/src/app/page-not-found/page-not-found.component.ts
new file mode 100644
index 0000000..fd8b12b
--- /dev/null
+++ b/src/app/page-not-found/page-not-found.component.ts
@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-not-found',
+  imports: [],
+  templateUrl: './page-not-found.component.html',
+  styleUrl: './page-not-found.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PageNotFoundComponent {}
diff --git a/src/app/posts/post-page/post-page.component.html b/src/app/posts/post-page/post-page.component.html
index 3eccddf..8b31859 100644
--- a/src/app/posts/post-page/post-page.component.html
+++ b/src/app/posts/post-page/post-page.component.html
@@ -1,11 +1,14 @@
-@if (postsErrorMessage()) {
-  <p>Error {{ postsErrorMessage() }}</p>
-} @else if (post()) {
-  <div class="post-page">
-    <a class="posts-link" mat-button routerLink="/posts">
-      <mat-icon>arrow_back</mat-icon>
-      Posts
-    </a>
+<div class="post-page">
+  <a class="posts-link" mat-button routerLink="/posts">
+    <mat-icon>arrow_back</mat-icon>
+    Posts
+  </a>
+
+  @if (postsLoading()) {
+    <p>Loading...</p>
+  } @else if (postsErrorMessage()) {
+    <p>Error {{ postsErrorMessage() }}</p>
+  } @else if (post()) {
     <app-post-details [post]="post()!" [user]="user()" [showActions]="false" />
 
     @if (commentsErrorMessage()) {
@@ -13,5 +16,7 @@
     } @else {
       <app-post-comments [comments]="postComments()" />
     }
-  </div>
-}
+  } @else {
+    <p>Post not found.</p>
+  }
+</div>
diff --git a/src/app/posts/post-page/post-page.component.spec.ts b/src/app/posts/post-page/post-page.component.spec.ts
index a6fad72..cd1eeb8 100644
--- a/src/app/posts/post-page/post-page.component.spec.ts
+++ b/src/app/posts/post-page/post-page.component.spec.ts
@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ActivatedRoute } from '@angular/router';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { of, throwError } from 'rxjs';
@@ -11,6 +10,7 @@ import { PostPageActions } from '../state/posts.actions';
 import {
   selectPostById,
   selectPostsErrorMessage,
+  selectPostsLoading,
 } from '../state/posts.selectors';
 import { PostPageComponent } from './post-page.component';
 
@@ -48,6 +48,10 @@ describe('PostPageComponent', () => {
                 body: 'Post Body',
               } as Post,
             },
+            {
+              selector: selectPostsLoading,
+              value: false,
+            },
             {
               selector: selectPostsErrorMessage,
               value: '',
diff --git a/src/app/posts/post-page/post-page.component.ts b/src/app/posts/post-page/post-page.component.ts
index fd985a9..634e165 100644
--- a/src/app/posts/post-page/post-page.component.ts
+++ b/src/app/posts/post-page/post-page.component.ts
@@ -13,6 +13,7 @@ import { PostPageActions } from '../state/posts.actions';
 import {
   selectPostById,
   selectPostsErrorMessage,
+  selectPostsLoading,
 } from '../state/posts.selectors';
 
 @Component({
@@ -32,6 +33,7 @@ export class PostPageComponent implements OnInit {
   private postsService = inject(PostsService);
 
   post = this.store.selectSignal(selectPostById);
+  postsLoading = this.store.selectSignal(selectPostsLoading);
   postsErrorMessage = this.store.selectSignal(selectPostsErrorMessage);
   commentsErrorMessage = signal('');