feat(angular): upgrading to v19 (#2350)

BREAKING CHANGE: Upgrade covalent to Angular 19

* feat(angular): upgrading to ng 19
* build(knapsack): adding back files from main
* docs(angular): updating documentation for 19 upgrade
* docs(): update RELEASE.md

README.md

@@ -46,6 +46,8 @@ Certain covalent version are meant for certain angular versions, and here is the
 |   6.X    |       15.X        |
 |   7.X    |       16.X        |
 |   8.X    |       17.X        |
+|   9.X    |       18.X        |
+|   10.X   |       19.X        |
 
 ## Browser Support
 

apps/docs-app/.eslintrc.json

@@ -8,12 +8,16 @@
         "plugin:@nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
-      "rules": {}
+      "rules": {
+        "@angular-eslint/prefer-standalone": "off"
+      }
     },
     {
       "files": ["*.html"],
       "extends": ["plugin:@nx/angular-template"],
-      "rules": {}
+      "rules": {
+        "@angular-eslint/prefer-standalone": "off"
+      }
     }
   ]
 }

apps/docs-app/project.json

@@ -124,7 +124,7 @@
       }
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
+      "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/apps/docs-app"],
       "options": {
         "jestConfig": "apps/docs-app/jest.config.js",

apps/docs-app/src/app/app.component.ts

@@ -7,6 +7,7 @@ import { getSelectedLanguage } from './utilities/translate';
 import { getDirection } from './utilities/direction';
 
 @Component({
+  standalone: false,
   selector: 'docs-covalent',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],

apps/docs-app/src/app/components/content-container/content-container.component.ts

@@ -3,6 +3,7 @@ import { Component, OnDestroy } from '@angular/core';
 import { Observable, Subject, map, takeUntil } from 'rxjs';
 
 @Component({
+  standalone: false,
   selector: 'app-content-container',
   templateUrl: './content-container.component.html',
   styleUrls: ['./content-container.component.scss'],

apps/docs-app/src/app/components/home/home.component.ts

@@ -13,6 +13,7 @@ interface IRouteConfig {
 }
 
 @Component({
+  standalone: false,
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],

apps/docs-app/src/app/components/shared/component-details/component-details-wrapper/content-details.component.ts

@@ -2,6 +2,7 @@ import { ActivatedRoute } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'app-content-details',
   templateUrl: './content-details.component.html',
   styleUrls: ['./content-details.component.scss'],

apps/docs-app/src/app/components/shared/component-details/component-hero/component-hero.component.ts

@@ -7,6 +7,7 @@ import {
 import { ActivatedRoute } from '@angular/router';
 
 @Component({
+  standalone: false,
   selector: 'td-component-hero',
   templateUrl: './component-hero.component.html',
   styleUrls: ['./component-hero.component.scss'],
@@ -16,6 +17,7 @@ export class ComponentHeroComponent {
 }
 
 @Component({
+  standalone: false,
   selector: 'td-component-hero-dynamic',
   template: '',
 })

apps/docs-app/src/app/components/shared/component-overview/component-overview.component.ts

@@ -8,6 +8,7 @@ import { ICombinedRouteGroup } from '../../../utilities/route-group';
 
 const ANGULAR_DOCS_URL = 'https://material.angular.io/';
 @Component({
+  standalone: false,
   selector: 'component-overview',
   styleUrls: ['./component-overview.component.scss'],
   templateUrl: './component-overview.component.html',

apps/docs-app/src/app/components/shared/demo-tools/demo.component.ts

@@ -4,6 +4,7 @@ import { forkJoin, Observable, Subject, Subscriber } from 'rxjs';
 import { catchError, map, takeUntil } from 'rxjs/operators';
 
 @Component({
+  standalone: false,
   selector: 'demo-component',
   styleUrls: ['./demo.component.scss'],
   templateUrl: './demo.component.html',

apps/docs-app/src/app/components/shared/sidenav-content/component-overview.component.ts

@@ -8,6 +8,7 @@ import { ICombinedRouteGroup } from '../../../utilities/route-group';
 
 const ANGULAR_DOCS_URL = 'https://material.angular.io/';
 @Component({
+  standalone: false,
   selector: 'component-overview',
   styleUrls: ['./component-overview.component.scss'],
   templateUrl: './component-overview.component.html',

apps/docs-app/src/app/components/shared/sidenav-content/sidenav-content.component.ts

@@ -5,6 +5,7 @@ import { IsActiveMatchOptions, Router } from '@angular/router';
 import { ICombinedRouteGroup } from '../../../utilities/route-group';
 
 @Component({
+  standalone: false,
   selector: 'app-sidenav-content',
   templateUrl: './sidenav-content.component.html',
   styleUrls: ['./sidenav-content.component.scss'],

apps/docs-app/src/app/components/toolbar/toolbar.component.ts

@@ -13,6 +13,7 @@ import { getDirection, setDirection } from '../../utilities/direction';
 import { GitHubService } from '../../services/github.service';
 
 @Component({
+  standalone: false,
   selector: 'td-toolbar',
   templateUrl: '././toolbar.component.html',
 })

apps/docs-app/src/app/content/components/component-demos/breadcrumbs/breadcrumbs.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'breadcrumbs-demo',
   styleUrls: ['./breadcrumbs.component.scss'],
   templateUrl: './breadcrumbs.component.html',

apps/docs-app/src/app/content/components/component-demos/breadcrumbs/demos/breadcrumbs-demo-basic/breadcrumbs-demo-basic.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'breadcrumbs-demo-basic',
   styleUrls: ['./breadcrumbs-demo-basic.component.scss'],
   templateUrl: './breadcrumbs-demo-basic.component.html',

apps/docs-app/src/app/content/components/component-demos/breadcrumbs/demos/breadcrumbs-demo-custom-separator/breadcrumbs-demo-custom-separator.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'breadcrumbs-demo-custom-separator',
   styleUrls: ['./breadcrumbs-demo-custom-separator.component.scss'],
   templateUrl: './breadcrumbs-demo-custom-separator.component.html',

apps/docs-app/src/app/content/components/component-demos/breadcrumbs/demos/breadcrumbs-demo-resize/breadcrumbs-demo-resize.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'breadcrumbs-demo-resize',
   styleUrls: ['./breadcrumbs-demo-resize.component.scss'],
   templateUrl: './breadcrumbs-demo-resize.component.html',

apps/docs-app/src/app/content/components/component-demos/breadcrumbs/demos/breadcrumbs-demo.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'breadcrumbs-demo',
   styleUrls: ['./breadcrumbs-demo.component.scss'],
   templateUrl: './breadcrumbs-demo.component.html',

apps/docs-app/src/app/content/components/component-demos/code-editor/demos/code-editor-demo-basic/code-editor-demo-basic.component.ts

@@ -65,6 +65,7 @@ const html = `<div layout="row" layout-align="start center" class="pad-xs pad-bo
 `;
 
 @Component({
+  standalone: false,
   selector: 'code-editor-demo-basic',
   styleUrls: ['./code-editor-demo-basic.component.scss'],
   templateUrl: './code-editor-demo-basic.component.html',

apps/docs-app/src/app/content/components/component-demos/code-editor/demos/code-editor-demo-monaco/code-editor-demo-monaco.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { editor } from 'monaco-editor';
 
 @Component({
+  standalone: false,
   selector: 'code-editor-demo-monaco',
   styleUrls: ['./code-editor-demo-monaco.component.scss'],
   templateUrl: './code-editor-demo-monaco.component.html',

apps/docs-app/src/app/content/components/component-demos/code-editor/demos/code-editor-demo.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'code-editor-demo',
   styleUrls: ['./code-editor-demo.component.scss'],
   templateUrl: './code-editor-demo.component.html',

apps/docs-app/src/app/content/components/component-demos/dialogs/demos/dialogs-demo-basic/dialogs-demo-basic.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { TdDialogService } from '@covalent/core/dialogs';
 
 @Component({
+  standalone: false,
   selector: 'dialogs-demo-basic',
   styleUrls: ['./dialogs-demo-basic.component.scss'],
   templateUrl: './dialogs-demo-basic.component.html',

apps/docs-app/src/app/content/components/component-demos/dialogs/demos/dialogs-demo-draggable-resizable-window/dialogs-demo-draggable-resizable-window.component.ts

@@ -16,6 +16,7 @@ import {
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
+  standalone: false,
   selector: 'draggable-resizable-window-dialog',
   template: `
     <td-window-dialog
@@ -37,6 +38,7 @@ export class DraggableResizableWindowDialogComponent {
 }
 
 @Component({
+  standalone: false,
   selector: 'dialogs-demo-draggable-resizable-window',
   styleUrls: ['./dialogs-demo-draggable-resizable-window.component.scss'],
   templateUrl: './dialogs-demo-draggable-resizable-window.component.html',

apps/docs-app/src/app/content/components/component-demos/dialogs/demos/dialogs-demo-draggable-resizable/dialogs-demo-draggable-resizable.component.ts

@@ -10,6 +10,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
+  standalone: false,
   selector: 'draggable-resizable-dialog',
   template: `
     <h2>Draggable resizable dialog</h2>
@@ -23,6 +24,7 @@ import { takeUntil } from 'rxjs/operators';
 export class DraggableResizableDialogComponent {}
 
 @Component({
+  standalone: false,
   selector: 'dialogs-demo-draggable-resizable',
   styleUrls: ['./dialogs-demo-draggable-resizable.component.scss'],
   templateUrl: './dialogs-demo-draggable-resizable.component.html',

apps/docs-app/src/app/content/components/component-demos/dialogs/demos/dialogs-demo-draggable/dialogs-demo-draggable.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { TdDialogService } from '@covalent/core/dialogs';
 
 @Component({
+  standalone: false,
   selector: 'draggable-dialog',
   template: `
     <h2>Draggable dialog</h2>
@@ -14,6 +15,7 @@ import { TdDialogService } from '@covalent/core/dialogs';
 export class DraggableDialogComponent {}
 
 @Component({
+  standalone: false,
   selector: 'dialogs-demo-draggable',
   styleUrls: ['./dialogs-demo-draggable.component.scss'],
   templateUrl: './dialogs-demo-draggable.component.html',

apps/docs-app/src/app/content/components/component-demos/dialogs/demos/dialogs-demo.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'dialogs-demo',
   styleUrls: ['./dialogs-demo.component.scss'],
   templateUrl: './dialogs-demo.component.html',

apps/docs-app/src/app/content/components/component-demos/dynamic-forms/demos/dynamic-forms-demo-array/dynamic-forms-demo-array.component.ts

@@ -6,6 +6,7 @@ import {
 } from '@covalent/dynamic-forms';
 
 @Component({
+  standalone: false,
   selector: 'dynamic-forms-demo-array',
   styleUrls: ['./dynamic-forms-demo-array.component.scss'],
   templateUrl: './dynamic-forms-demo-array.component.html',

apps/docs-app/src/app/content/components/component-demos/dynamic-forms/demos/dynamic-forms-demo-boolean/dynamic-forms-demo-boolean.component.ts

@@ -6,6 +6,7 @@ import {
 } from '@covalent/dynamic-forms';
 
 @Component({
+  standalone: false,
   selector: 'dynamic-forms-demo-boolean',
   styleUrls: ['./dynamic-forms-demo-boolean.component.scss'],
   templateUrl: './dynamic-forms-demo-boolean.component.html',

apps/docs-app/src/app/content/components/component-demos/dynamic-forms/demos/dynamic-forms-demo-custom-elements/dynamic-forms-demo-custom-elements.component.ts

@@ -3,6 +3,7 @@ import { AbstractControl, UntypedFormControl } from '@angular/forms';
 import { ITdDynamicElementConfig } from '@covalent/dynamic-forms';
 
 @Component({
+  standalone: false,
   selector: 'td-dynamic-input-test',
   template: `
     <td-code-editor
@@ -30,6 +31,7 @@ export class TdTestDynamicComponent {
 }
 
 @Component({
+  standalone: false,
   selector: 'dynamic-forms-demo-custom-elements',
   styleUrls: ['./dynamic-forms-demo-custom-elements.component.scss'],
   templateUrl: './dynamic-forms-demo-custom-elements.component.html',

apps/docs-app/src/app/content/components/component-demos/dynamic-forms/demos/dynamic-forms-demo-custom-validation/dynamic-forms-demo-custom-validation.component.ts

@@ -8,6 +8,7 @@ import {
 } from '@covalent/dynamic-forms';
 
 @Component({
+  standalone: false,
   selector: 'dynamic-forms-demo-custom-validation',
   styleUrls: ['./dynamic-forms-demo-custom-validation.component.scss'],
   templateUrl: './dynamic-forms-demo-custom-validation.component.html',

apps/docs-app/src/app/content/components/component-demos/dynamic-forms/demos/dynamic-forms-demo-date/dynamic-forms-demo-date.component.ts

@@ -5,6 +5,7 @@ import {
 } from '@covalent/dynamic-forms';
 
 @Component({
+  standalone: false,
   selector: 'dynamic-forms-demo-date',
   styleUrls: ['./dynamic-forms-demo-date.component.scss'],
   templateUrl: './dynamic-forms-demo-date.component.html',

apps/docs-app/src/app/content/components/component-demos/dynamic-forms/demos/dynamic-forms-demo-file-input/dynamic-forms-demo-file-input.component.ts

@@ -5,6 +5,7 @@ import {
 } from '@covalent/dynamic-forms';
 
 @Component({
+  standalone: false,
   selector: 'dynamic-forms-demo-file-input',
   styleUrls: ['./dynamic-forms-demo-file-input.component.scss'],
   templateUrl: './dynamic-forms-demo-file-input.component.html',

apps/docs-app/src/app/content/components/component-demos/dynamic-forms/demos/dynamic-forms-demo-number/dynamic-forms-demo-number.component.ts

@@ -6,6 +6,7 @@ import {
 } from '@covalent/dynamic-forms';
 
 @Component({
+  standalone: false,
   selector: 'dynamic-forms-demo-number',
   styleUrls: ['./dynamic-forms-demo-number.component.scss'],
   templateUrl: './dynamic-forms-demo-number.component.html',

apps/docs-app/src/app/content/components/component-demos/dynamic-forms/demos/dynamic-forms-demo-text/dynamic-forms-demo-text.component.ts

@@ -6,6 +6,7 @@ import {
 } from '@covalent/dynamic-forms';
 
 @Component({
+  standalone: false,
   selector: 'dynamic-forms-demo-text',
   styleUrls: ['./dynamic-forms-demo-text.component.scss'],
   templateUrl: './dynamic-forms-demo-text.component.html',

apps/docs-app/src/app/content/components/component-demos/dynamic-forms/demos/dynamic-forms-demo.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'dynamic-forms-demo',
   styleUrls: ['./dynamic-forms-demo.component.scss'],
   templateUrl: './dynamic-forms-demo.component.html',

apps/docs-app/src/app/content/components/component-demos/dynamic-forms/dynamic-forms.component.ts

@@ -7,6 +7,7 @@ import {
 } from '@covalent/dynamic-forms';
 
 @Component({
+  standalone: false,
   selector: 'dynamic-forms-demo',
   styleUrls: ['./dynamic-forms.component.scss'],
   templateUrl: './dynamic-forms.component.html',

apps/docs-app/src/app/content/components/component-demos/dynamic-menu/demos/dynamic-menu-demo-basic/dynamic-menu-demo-basic.component.ts

@@ -7,6 +7,7 @@ import {
 } from '@covalent/core/dynamic-menu';
 
 @Component({
+  standalone: false,
   selector: 'dynamic-menu-demo-basic',
   styleUrls: ['./dynamic-menu-demo-basic.component.scss'],
   templateUrl: './dynamic-menu-demo-basic.component.html',

apps/docs-app/src/app/content/components/component-demos/dynamic-menu/demos/dynamic-menu-demo.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'dynamic-menu-demo',
   styleUrls: ['./dynamic-menu-demo.component.scss'],
   templateUrl: './dynamic-menu-demo.component.html',

apps/docs-app/src/app/content/components/component-demos/file-input/demos/file-input-demo-basic/file-input-demo-basic.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'file-input-demo-basic',
   styleUrls: ['./file-input-demo-basic.component.scss'],
   templateUrl: './file-input-demo-basic.component.html',

apps/docs-app/src/app/content/components/component-demos/file-input/demos/file-input-demo.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'file-input-demo',
   styleUrls: ['./file-input-demo.component.scss'],
   templateUrl: './file-input-demo.component.html',

apps/docs-app/src/app/content/components/component-demos/file-input/file-input.component.ts

@@ -1,6 +1,7 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
+  standalone: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'file-input-demo',
   styleUrls: ['./file-input.component.scss'],

apps/docs-app/src/app/content/components/component-demos/flavored-markdown/demos/flavored-markdown-demo-basic/flavored-markdown-demo-basic.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'flavored-markdown-demo-basic',
   styleUrls: ['./flavored-markdown-demo-basic.component.scss'],
   templateUrl: './flavored-markdown-demo-basic.component.html',

apps/docs-app/src/app/content/components/component-demos/flavored-markdown/demos/flavored-markdown-demo-buttons/flavored-markdown-demo-buttons.component.ts

@@ -3,6 +3,7 @@ import { ITdFlavoredMarkdownButtonClickEvent } from '@covalent/flavored-markdown
 import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
+  standalone: false,
   selector: 'flavored-markdown-demo-buttons',
   styleUrls: ['./flavored-markdown-demo-buttons.component.scss'],
   templateUrl: './flavored-markdown-demo-buttons.component.html',