chore(deps): update angular 21

.eslintrc.json

@@ -1,8 +1,7 @@
 {
     "root": true,
     "ignorePatterns": ["**/*"],
-    "plugins": ["@nx"],
-    "extends": ["@bynary/eslint-config/angular"],
+    "plugins": ["@nx", "@angular-eslint"],
     "overrides": [
         {
             "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

.gitignore

@@ -17,6 +17,8 @@ node_modules
 *.launch
 .settings/
 *.sublime-workspace
+.agent
+.history
 
 # IDE - VSCode
 .vscode/*
@@ -43,3 +45,5 @@ Thumbs.db
 
 .nx/cache
 .nx/workspace-data
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md

.nvmrc

@@ -1 +1 @@
-20
+24

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
-    "eslint.validate": [
-        "json"
-    ]
+    "eslint.validate": ["json"],
+    "snyk.advanced.autoSelectOrganization": true
 }

apps/demo/.eslintrc.json

@@ -1,15 +1,9 @@
 {
-    "extends": [
-        "../../.eslintrc.json"
-    ],
-    "ignorePatterns": [
-        "!**/*"
-    ],
+    "extends": ["../../.eslintrc.json"],
+    "ignorePatterns": ["!**/*"],
     "overrides": [
         {
-            "files": [
-                "*.ts"
-            ],
+            "files": ["*.ts"],
             "rules": {
                 "@angular-eslint/directive-selector": [
                     "error",
@@ -26,20 +20,14 @@
                         "prefix": "demo",
                         "style": "kebab-case"
                     }
-                ]
+                ],
+                "@angular-eslint/prefer-standalone": "off"
             },
-            "extends": [
-                "plugin:@nx/angular",
-                "plugin:@angular-eslint/template/process-inline-templates"
-            ]
+            "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"]
         },
         {
-            "files": [
-                "*.html"
-            ],
-            "extends": [
-                "plugin:@nx/angular-template"
-            ],
+            "files": ["*.html"],
+            "extends": ["plugin:@nx/angular-template"],
             "rules": {}
         }
     ]

apps/demo/project.json

@@ -72,7 +72,8 @@
                     "buildTarget": "demo:build:development"
                 }
             },
-            "defaultConfiguration": "development"
+            "defaultConfiguration": "development",
+            "continuous": true
         },
         "extract-i18n": {
             "executor": "@angular-devkit/build-angular:extract-i18n",
@@ -87,7 +88,8 @@
             "executor": "@nx/jest:jest",
             "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
             "options": {
-                "jestConfig": "apps/demo/jest.config.ts"
+                "jestConfig": "apps/demo/jest.config.ts",
+                "tsConfig": "apps/demo/tsconfig.spec.json"
             }
         },
         "serve-static": {

apps/demo/src/app/app.component.ts

@@ -7,7 +7,6 @@ import { ColorSchemeSwitchComponent } from './components/color-scheme-switch/col
 import { OldButtonComponent } from './components/old-button/old-button.component';
 
 @Component({
-    standalone: true,
     imports: [RouterModule, ButtonComponent, ColorSchemeSwitchComponent, OldButtonComponent],
     selector: 'demo-root',
     templateUrl: './app.component.html',

apps/demo/src/app/components/button/button.component.html

@@ -1,2 +1,4 @@
-<div class="c-button__loading-indicator" *ngIf="loading()"></div>
+@if (loading()) {
+<div class="c-button__loading-indicator"></div>
+}
 <ng-content></ng-content>

apps/demo/src/app/components/button/button.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
 import { bindAttribute, bindBooleanAttribute, useAttribute } from '@bynary/composables/attribute';
 import { bindModifier, bindModifierGroup, provideBaseClass } from '@bynary/composables/class';
@@ -11,8 +10,7 @@ export type ButtonColor = 'red' | 'green' | undefined;
  */
 @Component({
     selector: 'demo-button',
-    standalone: true,
-    imports: [CommonModule],
+    imports: [],
     templateUrl: './button.component.html',
     styleUrls: ['./button.component.scss'],
     encapsulation: ViewEncapsulation.None,

apps/demo/src/app/components/old-button/old-button.component.html

@@ -1,2 +1,4 @@
-<div class="c-button__loading-indicator" *ngIf="loading"></div>
+@if (loading) {
+<div class="c-button__loading-indicator"></div>
+}
 <ng-content></ng-content>

apps/demo/src/app/components/old-button/old-button.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { Attribute, Component, ElementRef, HostBinding, inject, Input, OnInit, Renderer2 } from '@angular/core';
 
 /**
@@ -8,8 +7,7 @@ import { Attribute, Component, ElementRef, HostBinding, inject, Input, OnInit, R
  */
 @Component({
     selector: 'demo-old-button',
-    standalone: true,
-    imports: [CommonModule],
+    imports: [],
     templateUrl: './old-button.component.html',
     styleUrls: ['../button/button.component.scss'],
     host: {

apps/demo/src/test-setup.ts

@@ -1,7 +1,9 @@
-import 'jest-preset-angular/setup-jest';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv();
 import MatchMediaMock from 'jest-matchmedia-mock';
 
-// @ts-ignore https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
 globalThis.ngJest = {
     testEnvironmentOptions: {
         errorOnUnknownElements: true,

apps/demo/tsconfig.app.json

@@ -2,17 +2,10 @@
     "extends": "./tsconfig.json",
     "compilerOptions": {
         "outDir": "../../dist/out-tsc",
-        "types": []
+        "types": [],
+        "moduleResolution": "bundler"
     },
-    "files": [
-        "src/main.ts"
-    ],
-    "include": [
-        "src/**/*.d.ts"
-    ],
-    "exclude": [
-        "jest.config.ts",
-        "src/**/*.test.ts",
-        "src/**/*.spec.ts"
-    ]
+    "files": ["src/main.ts"],
+    "include": ["src/**/*.d.ts"],
+    "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
 }

apps/demo/tsconfig.json

@@ -7,7 +7,10 @@
         "noImplicitOverride": true,
         "noPropertyAccessFromIndexSignature": true,
         "noImplicitReturns": true,
-        "noFallthroughCasesInSwitch": true
+        "noFallthroughCasesInSwitch": true,
+        "module": "preserve",
+        "moduleResolution": "bundler",
+        "lib": ["dom", "es2022"]
     },
     "files": [],
     "include": [],

apps/demo/tsconfig.spec.json

@@ -2,20 +2,12 @@
     "extends": "./tsconfig.json",
     "compilerOptions": {
         "outDir": "../../dist/out-tsc",
-        "module": "commonjs",
+        "module": "preserve",
         "target": "es2016",
-        "types": [
-            "jest",
-            "node"
-        ]
+        "types": ["jest", "node"],
+        "moduleResolution": "bundler",
+        "isolatedModules": true
     },
-    "files": [
-        "src/test-setup.ts"
-    ],
-    "include": [
-        "jest.config.ts",
-        "src/**/*.test.ts",
-        "src/**/*.spec.ts",
-        "src/**/*.d.ts"
-    ]
+    "files": ["src/test-setup.ts"],
+    "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"]
 }

jest.config.ts

@@ -1,5 +1,5 @@
-import { getJestProjects } from '@nx/jest';
+import { getJestProjectsAsync } from '@nx/jest';
 
-export default {
-    projects: getJestProjects()
-};
+export default async () => ({
+    projects: await getJestProjectsAsync()
+});

libs/composables/.eslintrc.json

@@ -21,7 +21,8 @@
                         "prefix": "bx",
                         "style": "kebab-case"
                     }
-                ]
+                ],
+                "@angular-eslint/prefer-standalone": "off"
             }
         },
         {

libs/composables/observer/src/directionality.composable.ts

@@ -1,6 +1,6 @@
 import { Directionality } from '@angular/cdk/bidi';
-import { DOCUMENT } from '@angular/common';
-import { DestroyRef, inject, signal } from '@angular/core';
+
+import { DestroyRef, inject, signal, DOCUMENT } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { bindAttribute } from '@bynary/composables/attribute';
 

libs/composables/package.json

@@ -28,10 +28,9 @@
         "nx"
     ],
     "peerDependencies": {
-        "@angular/cdk": ">=16.0.0 <19.0.0",
-        "@angular/common": ">=16.0.0 <19.0.0",
-        "@angular/core": ">=16.0.0 <19.0.0",
-        "@angular/platform-browser": ">=16.0.0 <19.0.0",
+        "@angular/cdk": "21.0.6",
+        "@angular/core": "21.0.9",
+        "@angular/platform-browser": "21.0.9",
         "@ngxs/store": ">=3.8.1",
         "rxjs": ">=7.0.0"
     },

libs/composables/project.json

@@ -10,23 +10,23 @@
             "executor": "@nx/angular:package",
             "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
             "options": {
-                "project": "libs/composables/ng-package.json"
+                "project": "libs/composables/ng-package.json",
+                "tsConfig": "libs/composables/tsconfig.lib.json"
             },
             "configurations": {
                 "production": {
                     "tsConfig": "libs/composables/tsconfig.lib.prod.json"
                 },
-                "development": {
-                    "tsConfig": "libs/composables/tsconfig.lib.json"
-                }
+                "development": {}
             },
             "defaultConfiguration": "production"
         },
         "test": {
             "executor": "@nx/jest:jest",
             "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
             "options": {
-                "jestConfig": "libs/composables/jest.config.ts"
+                "jestConfig": "libs/composables/jest.config.ts",
+                "tsConfig": "libs/composables/tsconfig.spec.json"
             }
         },
         "lint": {