feat: ng 19

.eslintrc.json

@@ -212,7 +212,6 @@
                         "types": "prefer-import"
                     }
                 ],
-                "@typescript-eslint/type-annotation-spacing": "error",
                 "@typescript-eslint/unified-signatures": "error",
                 "arrow-body-style": "error",
                 "arrow-parens": ["off", "always"],

.github/actions/nodejs/action.yml

@@ -5,7 +5,7 @@ inputs:
     node-version:
         description: Node.js version
         required: false
-        default: 20.x
+        default: 22.x
     frozen-lockfile:
         description: Install dependencies from lock file
         required: false
@@ -23,18 +23,27 @@ runs:
           shell: bash
           run: npm install -g corepack
 
-        - name: Enable Corepack for Yarn 4.5.1
+        - name: Enable Corepack for Yarn 4.5.3
           shell: bash
           run: |
-              corepack enable yarn && yarn
+              corepack enable yarn
 
-        - name: Install Yarn 4.5.1 (if not available)
+        - name: Run Yarn
           shell: bash
           run: |
-              if ! yarn --version | grep -q "4.5.1"; then
-                npm install -g [email protected]
+              yarn
+
+        - name: Install Yarn 4.5.3 (if not available)
+          shell: bash
+          run: |
+              if ! yarn --version | grep -q "4.5.3"; then
+                npm install -g [email protected]
               fi
 
+        - name: Print Node.js version
+          shell: bash
+          run: node --version
+
         - name: Get yarn cache directory path
           id: yarn-cache-dir-path
           run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

.github/workflows/create-release.yml

@@ -23,6 +23,7 @@ jobs:
         strategy:
             matrix:
                 agent: [1, 2, 3, 4, 5]
+                node-version: [22.x]
         steps:
             - uses: actions/[email protected]
             - uses: ./.github/actions/nodejs

.github/workflows/on-pull-request.yml

@@ -22,6 +22,7 @@ jobs:
         strategy:
             matrix:
                 agent: [1, 2, 3, 4, 5, 6, 7, 8]
+                node-version: [22.x]
         steps:
             - uses: actions/[email protected]
             - uses: ./.github/actions/nodejs

.nvmrc

@@ -1 +1 @@
-v20.14.0
+v22.12.0

apps/docs/.eslintrc.json

@@ -10,7 +10,6 @@
                 "../../.eslintrc-overrides.json"
             ],
             "rules": {
-                "@angular-eslint/no-host-metadata-property": "off",
                 "@angular-eslint/directive-selector": [
                     "error",
                     {
@@ -28,7 +27,8 @@
                     }
                 ],
                 "jsdoc/require-jsdoc": "off",
-                "grouped-accessor-pairs": "off"
+                "grouped-accessor-pairs": "off",
+                "@angular-eslint/prefer-standalone": "off"
             },
             "plugins": ["@angular-eslint/eslint-plugin", "@typescript-eslint"]
         },

apps/docs/src/app.component.ts

@@ -4,7 +4,6 @@ import { RouterOutlet } from '@angular/router';
 @Component({
     selector: 'app-root',
     template: `<router-outlet></router-outlet>`,
-    imports: [RouterOutlet],
-    standalone: true
+    imports: [RouterOutlet]
 })
 export class AppComponent {}

apps/docs/src/styles.scss

@@ -1,7 +1,7 @@
 @use '@angular/cdk';
-@import 'fundamental-styles/dist/info-label';
-@import 'fundamental-styles/dist/form-layout-grid';
-@import '@angular/cdk/overlay-prebuilt';
+@import 'fundamental-styles/dist/info-label.css';
+@import 'fundamental-styles/dist/form-layout-grid.css';
+@import '@angular/cdk/overlay-prebuilt.css';
 
 @include cdk.a11y-visually-hidden();
 

libs/btp/.eslintrc.json

@@ -22,7 +22,7 @@
                         "style": "kebab-case"
                     }
                 ],
-                "@angular-eslint/no-host-metadata-property": "off"
+                "@angular-eslint/prefer-standalone": "off"
             }
         },
         {

libs/btp/navigation-menu/src/lib/navigation-menu-item.component.ts

@@ -28,7 +28,6 @@ import { fromEvent, Observable } from 'rxjs';
         }
         <ng-content></ng-content>
     `,
-    standalone: true,
     imports: [IconComponent],
     hostDirectives: [IndirectFocusableItemDirective],
     providers: [

libs/btp/navigation-menu/src/lib/navigation-menu-popover.component.ts

@@ -17,8 +17,7 @@ import { NavigationMenuPopoverControlDirective } from './navigation-menu-popover
     `,
     styleUrls: ['./navigation-menu-popover.component.scss'],
     imports: [PopoverComponent, PopoverControlComponent, PopoverBodyComponent, NgTemplateOutlet],
-    encapsulation: ViewEncapsulation.None,
-    standalone: true
+    encapsulation: ViewEncapsulation.None
 })
 export class NavigationMenuPopoverComponent {
     /** @hidden */

libs/btp/navigation/components/navigation-end/navigation-content-end.component.ts

@@ -18,7 +18,6 @@ import { NavigationListComponent } from '../navigation-list/navigation-list.comp
 @Component({
     selector: 'fdb-navigation-content-end',
     template: `<ul fdb-navigation-list [listItems]="allListItems$()"></ul>`,
-    standalone: true,
     imports: [NavigationListComponent, NgTemplateOutlet],
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,

libs/btp/navigation/components/navigation-item/navigation-list-item.component.ts

@@ -58,7 +58,6 @@ export class NavigationListItemMarkerDirective implements HasElementRef {
 
 @Component({
     selector: 'fdb-navigation-list-item',
-    standalone: true,
     imports: [
         CommonModule,
         NgTemplateOutlet,

libs/btp/navigation/components/navigation-link/navigation-link.component.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @angular-eslint/no-host-metadata-property */
 import { DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
 import { NgTemplateOutlet } from '@angular/common';
 import {
@@ -38,7 +37,6 @@ export class NavigationLinkRefDirective {
     selector: 'a[fdb-navigation-link]',
     imports: [IconComponent, NgTemplateOutlet],
     hostDirectives: [RouterLinkActive],
-    standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
     providers: [

libs/btp/navigation/components/navigation-list/navigation-list.component.ts

@@ -27,7 +27,6 @@ import { NavigationService } from '../../services/navigation.service';
 @Component({
     // eslint-disable-next-line @angular-eslint/component-selector
     selector: 'ul[fdb-navigation-list]',
-    standalone: true,
     imports: [NgTemplateOutlet],
     templateUrl: './navigation-list.component.html',
     encapsulation: ViewEncapsulation.None,

libs/btp/navigation/components/navigation-more-button/navigation-more-button.component.ts

@@ -30,7 +30,6 @@ export interface NavigationMoreButtonRefContext {
 @Component({
     // eslint-disable-next-line @angular-eslint/component-selector
     selector: 'li[fdb-navigation-more-button]',
-    standalone: true,
     imports: [
         NavigationLinkComponent,
         NavigationListComponent,

libs/btp/navigation/components/navigation-start/navigation-content-start.component.ts

@@ -32,11 +32,9 @@ const FD_NAVIGATION_OVERFLOW_ITEM_CLASS = 'fd-navigation__container--hidden-over
 @Component({
     selector: 'fdb-navigation-content-start',
     templateUrl: './navigation-content-start.component.html',
-    standalone: true,
     imports: [PortalModule, NgTemplateOutlet, NavigationListComponent, NavigationMoreButtonComponent],
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
     host: {
         class: 'fd-navigation__container fd-navigation__container--top',
         '[style.flex-grow]': '1'

libs/btp/navigation/components/navigation/navigation.component.scss

@@ -1,4 +1,4 @@
-@import 'fundamental-styles/dist/navigation';
+@import 'fundamental-styles/dist/navigation.css';
 
 $block: fd-navigation;
 

libs/btp/navigation/components/navigation/navigation.component.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @angular-eslint/no-input-rename,@angular-eslint/no-host-metadata-property */
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
 import { NgTemplateOutlet } from '@angular/common';
@@ -49,7 +48,6 @@ interface GroupedDataSourceItems {
     selector: 'fdb-navigation',
     templateUrl: './navigation.component.html',
     styleUrls: ['./navigation.component.scss'],
-    standalone: true,
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [

libs/btp/search-field/src/search-field.component.ts

@@ -25,7 +25,6 @@ import { of, tap } from 'rxjs';
     selector: 'fdb-search-field',
     templateUrl: './search-field.component.html',
     styleUrls: ['../../../../node_modules/fundamental-styles/dist/search-field.css'],
-    standalone: true,
     hostDirectives: [CvaDirective],
     providers: [CvaControl],
     imports: [IconComponent, FormsModule, FdTranslatePipe, ButtonComponent, NestedButtonDirective],

libs/btp/splitter/splitter-pagination/splitter-pagination.component.ts

@@ -12,7 +12,6 @@ import { SplitterComponent } from '../splitter.component';
         class: 'fd-splitter__pagination',
         '[attr.role]': '"radiogroup"'
     },
-    standalone: true,
     imports: [ButtonComponent, FdTranslatePipe]
 })
 export class SplitterPaginationComponent {

libs/btp/splitter/splitter-pane-container/splitter-pane-container.component.ts

@@ -79,7 +79,6 @@ export function transformPaneTypeInput(paneType: PaneTypeInput): Nullable<PaneTy
             useExisting: SplitterPaneContainerComponent
         }
     ],
-    standalone: true,
     imports: [NgTemplateOutlet, SplitterPaginationComponent, PortalModule, SplitterResizerComponent, NoDefaultPanePipe]
 })
 export class SplitterPaneContainerComponent

libs/btp/splitter/splitter-resizer/splitter-resizer.component.ts

@@ -39,7 +39,6 @@ import {
         '[class.is-active]': '_start != null || _isInFocus',
         '[tabindex]': '0'
     },
-    standalone: true,
     imports: [ButtonComponent, IconComponent, NestedButtonDirective]
 })
 export class SplitterResizerComponent implements OnDestroy {

libs/btp/splitter/splitter.component.scss

@@ -1 +1 @@
-@import 'fundamental-styles/dist/splitter';
+@import 'fundamental-styles/dist/splitter.css';

libs/btp/tool-header/src/components/tool-header-product-switch.component.ts

@@ -57,8 +57,7 @@ import { FdTranslatePipe } from '@fundamental-ngx/i18n';
             provide: FD_PRODUCT_SWITCH_COMPONENT,
             useExisting: ToolHeaderProductSwitchComponent
         }
-    ],
-    standalone: true
+    ]
 })
 export class ToolHeaderProductSwitchComponent extends BasePopoverClass {
     /** Placement of a popover. */

libs/btp/tool-header/src/components/tool-header/tool-header.component.scss

@@ -1,4 +1,4 @@
-@import 'fundamental-styles/dist/tool-header';
+@import 'fundamental-styles/dist/tool-header.css';
 
 .fd-overflow-layout__items
     > .fd-overflow-layout__item:not(.fd-overflow-layout__item--last)

libs/btp/tool-header/src/components/tool-header/tool-header.component.ts

@@ -68,7 +68,6 @@ import { ToolHeaderComponentClass } from '../../tool-header-component.class';
     selector: 'fdb-tool-header',
     templateUrl: './tool-header.component.html',
     styleUrls: ['./tool-header.component.scss'],
-    standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
     host: {

libs/btp/tool-layout/src/tool-layout.component.scss

@@ -1,4 +1,4 @@
-@import 'fundamental-styles/dist/tool-layout';
+@import 'fundamental-styles/dist/tool-layout.css';
 
 .fd-tool-layout__header-container {
     width: 100%;

libs/cdk/.eslintrc.json

@@ -10,7 +10,6 @@
                 "../../.eslintrc-overrides.json"
             ],
             "rules": {
-                "@angular-eslint/no-host-metadata-property": "off",
                 "@angular-eslint/directive-selector": [
                     "error",
                     {
@@ -26,7 +25,8 @@
                         "prefix": "fdk",
                         "style": "kebab-case"
                     }
-                ]
+                ],
+                "@angular-eslint/prefer-standalone": "off"
             },
             "plugins": ["@angular-eslint/eslint-plugin", "@typescript-eslint"]
         },

libs/cdk/utils/components/dynamic-portal/dynamic-portal.component.ts

@@ -33,7 +33,6 @@ import { BehaviorSubject, filter, map, tap } from 'rxjs';
  */
 @Component({
     selector: 'fdk-dynamic-portal',
-    standalone: true,
     imports: [PortalModule],
     template: ` <ng-template cdkPortalOutlet></ng-template>`
 })

libs/cdk/utils/drag-and-drop/dnd-item/dnd-item.directive.ts

@@ -19,7 +19,8 @@ import { DND_ITEM } from '../tokens';
 
 @Directive({
     selector: '[fdkDndItem], [fd-dnd-item]',
-    providers: [DragDrop, { provide: DND_ITEM, useExisting: forwardRef(() => DndItemDirective) }]
+    providers: [DragDrop, { provide: DND_ITEM, useExisting: forwardRef(() => DndItemDirective) }],
+    standalone: false
 })
 export class DndItemDirective<T = any> implements DndItem, AfterContentInit, OnDestroy {
     /** Item reference. Used for cases when `[items]` array of dnd list is different than `dndItems` content children. */

libs/cdk/utils/drag-and-drop/dnd-keyboard-group/dnd-keyboard-group.directive.ts

@@ -9,7 +9,10 @@ import { RtlService } from '../../services/rtl.service';
  * This directive is used to provide drag & drop with keyboard support.
  * It should be used together with directive fdDndKeyboardItem.
  */
-@Directive({ selector: '[fdkDndKeyboardGroup], [fdDndKeyboardGroup]' })
+@Directive({
+    selector: '[fdkDndKeyboardGroup], [fdDndKeyboardGroup]',
+    standalone: false
+})
 export class DndKeyboardGroupDirective {
     /** Group of items */
     @Input()

libs/cdk/utils/drag-and-drop/dnd-keyboard-item/dnd-keyboard-item.directive.ts

@@ -41,7 +41,10 @@ import { DndKeyboardGroupDirective } from '../dnd-keyboard-group/dnd-keyboard-gr
  *      ];
  *   }
  */
-@Directive({ selector: '[fdkDndKeyboardItem], [fdDndKeyboardItem]' })
+@Directive({
+    selector: '[fdkDndKeyboardItem], [fdDndKeyboardItem]',
+    standalone: false
+})
 export class DndKeyboardItemDirective implements OnInit, OnDestroy {
     /** item index in group(column) */
     @Input()

libs/cdk/utils/drag-and-drop/dnd-list/dnd-list.directive.ts

@@ -35,7 +35,8 @@ export type DragoverPredicate<T> = (
 
 @Directive({
     selector: '[fdkDndList], [fd-dnd-list]',
-    providers: [{ provide: DND_LIST, useExisting: forwardRef(() => DndListDirective) }]
+    providers: [{ provide: DND_LIST, useExisting: forwardRef(() => DndListDirective) }],
+    standalone: false
 })
 export class DndListDirective<T> implements AfterContentInit, OnDestroy {
     /**

libs/cdk/utils/functions/element-size.spec.ts

@@ -6,7 +6,6 @@ const ELEMENT_DIMENSIONS = { width: 100, margin: 2, padding: 5 };
 
 @Component({
     template: '',
-    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
     host: {
         '[style.display]': '"block"',
         '[style.box-sizing]': '"border-box"',

libs/cdk/utils/functions/intersection-observable.spec.ts

@@ -42,7 +42,6 @@ class MockIntersectionObserver implements IntersectionObserver {
 
 @Component({
     template: '',
-    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
     host: {
         '[style.display]': 'elementDisplay',
         '[style.box-sizing]': '"border-box"',

libs/cdk/utils/functions/resize-observable.spec.ts

@@ -35,7 +35,6 @@ class MockResizeObserver implements ResizeObserver {
 
 @Component({
     template: '',
-    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
     host: {
         '[style.display]': '"block"',
         '[style.box-sizing]': '"border-box"',

libs/cdk/utils/typecheck.ts

@@ -3,7 +3,7 @@ import { Observable } from 'rxjs';
 /**
  * Helper function check whether passed data is a JS object (including function).
  */
-// eslint-disable-next-line @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 export function isJsObject(obj: any): obj is object | Function {
     return obj !== null && (typeof obj === 'function' || typeof obj === 'object');
 }
@@ -51,7 +51,7 @@ export function isFunction(obj: any): boolean {
 }
 
 /** @hidden */
-// eslint-disable-next-line @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 export function isType(obj: any): obj is Function {
     return isFunction(obj);
 }