feat: angular 22

.npmrc

@@ -1 +1,4 @@
 @shiftcode:registry=https://npm.pkg.github.com
+fund=false
+min-release-age=5
+min-release-age-exclude[]=@shiftcode/*

apps/styleguide/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shiftcode/styleguide",
-  "version": "15.3.1",
+  "version": "16.0.0-pr85.7",
   "private": true,
   "type": "module",
   "scripts": {

apps/styleguide/src/main.ts

@@ -2,7 +2,6 @@ import { provideHttpClient } from '@angular/common/http'
 import { DOCUMENT, inject, provideEnvironmentInitializer, provideZoneChangeDetection } from '@angular/core'
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { bootstrapApplication } from '@angular/platform-browser'
-import { provideAnimations } from '@angular/platform-browser/animations'
 import { NavigationEnd, provideRouter, Router } from '@angular/router'
 import { LogLevel } from '@shiftcode/logger'
 import { provideNavigationClassHandler, provideTestingFab } from '@shiftcode/ngx-components'
@@ -23,7 +22,6 @@ bootstrapApplication(AppComponent, {
   providers: [
     provideZoneChangeDetection(),
     provideHttpClient(),
-    provideAnimations(),
     provideRouter(ROUTES),
 
     provideLocalStorage({ prefix: 'sg.' }),

lerna.json

@@ -2,7 +2,7 @@
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useNx": false,
   "packages": ["libs/*", "apps/*"],
-  "version": "15.3.1",
+  "version": "16.0.0-pr85.7",
   "command": {
     "version": {
       "allowBranch": "*",

libs/components/eslint-suppressions.json

@@ -1,10 +1,25 @@
 {
+  "src/lib/rx/rx-if.directive.ts": {
+    "unused-imports/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/lib/rx/rx-let.directive.ts": {
+    "unused-imports/no-unused-vars": {
+      "count": 1
+    }
+  },
   "src/lib/tooltip/flexible-connected-position-strategy-2.ts": {
     "@typescript-eslint/no-unsafe-call": {
       "count": 9
     },
     "@typescript-eslint/no-unsafe-member-access": {
       "count": 17
     }
+  },
+  "src/lib/tooltip/tooltip.component.html": {
+    "@angular-eslint/template/prefer-class-binding": {
+      "count": 1
+    }
   }
 }

libs/components/eslint.config.js

@@ -20,6 +20,7 @@ export default defineScAngularConfig(
       '@angular-eslint/prefer-signals': 'error',
       '@angular-eslint/prefer-output-emitter-ref': 'error',
       '@angular-eslint/use-component-selector': 'error',
+      '@angular-eslint/prefer-service-decorator': 'error',
     },
   },
   {

libs/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shiftcode/ngx-components",
-  "version": "15.3.1",
+  "version": "16.0.0-pr85.7",
   "repository": "https://github.com/shiftcode/sc-ng-commons-public",
   "license": "MIT",
   "author": "shiftcode GmbH <[email protected]>",
@@ -10,14 +10,13 @@
     "tslib": "^2.5.0"
   },
   "peerDependencies": {
-    "@angular/animations": "^21.0.0",
-    "@angular/cdk": "^21.0.0",
-    "@angular/common": "^21.0.0",
-    "@angular/core": "^21.0.0",
-    "@angular/forms": "^21.0.0",
-    "@angular/router": "^21.0.0",
+    "@angular/cdk": "^22.2.0",
+    "@angular/common": "^22.2.0",
+    "@angular/core": "^22.2.0",
+    "@angular/forms": "^22.2.0",
+    "@angular/router": "^22.2.0",
     "@shiftcode/logger": "^5.0.0",
-    "@shiftcode/ngx-core": "^15.0.0 || ^15.3.0-pr87",
+    "@shiftcode/ngx-core": "^15.0.0 || ^16.0.0-pr85",
     "@shiftcode/utilities": "^5.0.0",
     "rxjs": "^6.5.3 || ^7.4.0"
   },

libs/components/src/lib/svg/svg-registry.service.ts

@@ -1,11 +1,11 @@
 import { HttpClient, HttpErrorResponse } from '@angular/common/http'
-import { DOCUMENT, inject, Injectable } from '@angular/core'
+import { DOCUMENT, inject, Service } from '@angular/core'
 import { firstValueFrom } from 'rxjs'
 
 /**
  * Service to load, cache and create svg elements
  */
-@Injectable({ providedIn: 'root' })
+@Service()
 export class SvgRegistry {
   private readonly cache = new Map<string, Promise<SVGElement>>()
   private readonly document = inject(DOCUMENT)

libs/components/src/lib/testing-fab/provide-testing-fab.spec.ts

@@ -35,7 +35,7 @@ function setup(testingFabProviders: EnvironmentProviders) {
       delete: vi.fn(),
       clear: vi.fn(),
       keys: vi.fn().mockReturnValue([]),
-    } as unknown as LocalStorage
+    }
   }
 
   TestBed.configureTestingModule({

libs/components/src/lib/testing-fab/testing-fab-widget.type.ts

@@ -1,9 +1,7 @@
 import { Type } from '@angular/core'
 
 export type TestingFabWidget =
-  | TestingFabSelectQueryParamWidget
-  | TestingFabToggleQueryParamWidget
-  | TestingFabCustomComponentWidget
+  TestingFabSelectQueryParamWidget | TestingFabToggleQueryParamWidget | TestingFabCustomComponentWidget
 
 interface TestingFabWidgetBase {
   type: 'select-query-param' | 'toggle-query-param' | 'custom-component'

libs/components/src/lib/tooltip/tooltip.component.html

@@ -1,13 +1,15 @@
 <div
+  #tooltip
   class="sc-tooltip"
   [ngClass]="tooltipClass"
   [class.sc-tooltip--above]="tooltipPosition === 'above'"
   [class.sc-tooltip--below]="tooltipPosition === 'below'"
   [class.sc-tooltip--before]="tooltipPosition === 'before'"
   [class.sc-tooltip--after]="tooltipPosition === 'after'"
-  [@state]="visibility"
-  (@state.start)="animationStart()"
-  (@state.done)="animationDone($event)"
+  [class.sc-tooltip--visible]="visibility === 'visible'"
+  [class.sc-tooltip--hidden]="visibility === 'hidden'"
+  (transitionstart)="transitionStart($event)"
+  (transitionend)="transitionDone($event)"
 >
   <div class="sc-tooltip__label" [innerHTML]="message"></div>
   <div

libs/components/src/lib/tooltip/tooltip.component.scss

@@ -10,10 +10,9 @@
   $default-padding: 4px 8px;
   $default-filter: drop-shadow(0 0 0 rgba(1, 1, 1, 0));
 
-  // otherwise we'll have flickering
-  pointer-events: none !important;
-
   .sc-tooltip {
+    opacity: 0;
+    scale: 0;
     position: relative;
     background: var(--sc-tooltip-background, #{$default-background});
     border-radius: var(--sc-tooltip-border-radius, #{$default-border-radius});
@@ -23,6 +22,27 @@
     --neg-notch-size: calc(var(--sc-tooltip-notch-size, #{$default-notch-size}) * -1);
     // the space from notch to the boundary of the tooltip
     --notch-spacer: calc(var(--sc-tooltip-notch-size, #{$default-notch-size}) * 0.5);
+
+    &.sc-tooltip--visible {
+      opacity: 1;
+      scale: 1;
+      transition:
+        opacity 250ms cubic-bezier(0, 0, 0.2, 1),
+        scale 125ms cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    &.sc-tooltip--hidden {
+      scale: 1;
+      transition: opacity 150ms cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      &.sc-tooltip--visible,
+      &.sc-tooltip--hidden {
+        // Keep completion events so the overlay can be detached.
+        transition-duration: 1ms;
+      }
+    }
   }
 
   .sc-tooltip {
@@ -136,3 +156,10 @@
     outline: solid 1px;
   }
 }
+
+::ng-deep {
+  .sc-tooltip-panel {
+    // otherwise we'll have flickering
+    pointer-events: none !important;
+  }
+}