Angular 19 (#2422)

Update Angular to version 19 - keep non-standalone components

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clr-addons",
-  "version": "18.2.5",
+  "version": "19.0.0",
   "private": true,
   "scripts": {
     "build:ui:css": "sass --source-map --precision=8 ./src/clr-addons/themes/phs/phs-theme.scss ./dist/clr-addons/styles/clr-addons-phs.css",
@@ -35,33 +35,33 @@
     "ng": "ng"
   },
   "dependencies": {
-    "@angular/animations": "18.2.5",
-    "@angular/cdk": "18.2.5",
-    "@angular/common": "18.2.5",
-    "@angular/compiler": "18.2.5",
-    "@angular/core": "18.2.5",
-    "@angular/forms": "18.2.5",
-    "@angular/platform-browser": "18.2.5",
-    "@angular/platform-browser-dynamic": "18.2.5",
-    "@angular/router": "18.2.5",
+    "@angular/animations": "19.1.3",
+    "@angular/cdk": "19.1.1",
+    "@angular/common": "19.1.3",
+    "@angular/compiler": "19.1.3",
+    "@angular/core": "19.1.3",
+    "@angular/forms": "19.1.3",
+    "@angular/platform-browser": "19.1.3",
+    "@angular/platform-browser-dynamic": "19.1.3",
+    "@angular/router": "19.1.3",
     "@cds/core": "6.14.0",
-    "@clr/angular": "17.4.0",
+    "@clr/angular": "17.5.0",
     "@clr/icons": "13.0.2",
-    "@clr/ui": "17.4.0",
+    "@clr/ui": "17.5.0",
     "@webcomponents/custom-elements": "1.6.0",
     "@webcomponents/webcomponentsjs": "2.8.0",
     "core-js": "3.40.0",
     "rxjs": "7.8.1",
     "tslib": "2.8.1",
-    "zone.js": "0.14.10"
+    "zone.js": "0.15.0"
   },
   "devDependencies": {
     "@alasdair/karma-scss-preprocessor": "5.0.0-3",
-    "@angular-devkit/build-angular": "18.2.5",
-    "@angular-devkit/core": "18.2.5",
+    "@angular-devkit/build-angular": "19.1.4",
+    "@angular-devkit/core": "19.1.4",
     "@angular-eslint/builder": "19.0.2",
-    "@angular/cli": "18.2.5",
-    "@angular/compiler-cli": "18.2.5",
+    "@angular/cli": "19.1.4",
+    "@angular/compiler-cli": "19.1.3",
     "@types/jasmine": "5.1.5",
     "@types/jasmine-matchers": "0.2.35",
     "@types/jasminewd2": "2.0.13",
@@ -88,7 +88,7 @@
     "karma-mocha-reporter": "2.2.5",
     "karma-notify-reporter": "1.3.0",
     "lite-server": "2.6.1",
-    "ng-packagr": "18.2.1",
+    "ng-packagr": "19.1.0",
     "npm-run-all2": "7.0.2",
     "postcss": "8.5.1",
     "postcss-cli": "11.0.0",

src/clr-addons/abstract-form-component/label.spec.ts

@@ -5,17 +5,24 @@ import { By } from '@angular/platform-browser';
 import { ClrAddonsLabel } from './label';
 import { ControlIdService } from './control-id.service';
 
-@Component({ template: `<label></label>` })
+@Component({
+  template: `<label></label>`,
+  standalone: false,
+})
 class NoForTest {}
 
-@Component({ template: `<label [for]="forValue"></label>` })
+@Component({
+  template: `<label [for]="forValue"></label>`,
+  standalone: false,
+})
 class ExplicitForTest {
   forValue = 'hello';
 }
 
 @Component({
   template: `<div><label for="hello"></label></div>`,
   providers: [ControlIdService],
+  standalone: false,
 })
 class ContainerizedTest {
   @ViewChild(ClrAddonsLabel, { static: true }) label: ClrAddonsLabel;

src/clr-addons/abstract-form-component/label.ts

@@ -2,7 +2,10 @@ import { Directive, ElementRef, OnDestroy, OnInit, Optional, Renderer2 } from '@
 import { Subject, takeUntil } from 'rxjs';
 import { ControlIdService } from './control-id.service';
 
-@Directive({ selector: 'label' })
+@Directive({
+  selector: 'label',
+  standalone: false,
+})
 export class ClrAddonsLabel implements OnInit, OnDestroy {
   destroyed$ = new Subject<void>();
 

src/clr-addons/action-panel/action-panel-container-content.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -12,5 +12,6 @@ import { Component } from '@angular/core';
   host: {
     '[class.content-area]': 'true',
   },
+  standalone: false,
 })
 export class ClrActionPanelContainerContent {}

src/clr-addons/action-panel/action-panel-container-footer.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -12,5 +12,6 @@ import { Component } from '@angular/core';
   host: {
     '[class.content-area-footer]': 'true',
   },
+  standalone: false,
 })
 export class ClrActionPanelContainerFooter {}

src/clr-addons/action-panel/action-panel-container.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -19,5 +19,6 @@ import { Component } from '@angular/core';
     '[class.content-container]': 'true',
     '[class.action-panel-container]': 'true',
   },
+  standalone: false,
 })
 export class ClrActionPanelContainer {}

src/clr-addons/action-panel/action-panel.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -26,6 +26,7 @@ ClarityIcons.addIcons(timesIcon);
   host: {
     '[class.action-panel]': 'true',
   },
+  standalone: false,
 })
 export class ClrActionPanel {
   _open = false;

src/clr-addons/autocomplete-off/autocomplete-off.directive.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -11,5 +11,6 @@ import { Directive } from '@angular/core';
   host: {
     '[attr.autocomplete]': '"off"',
   },
+  standalone: false,
 })
 export class ClrAutocompleteOff {}

src/clr-addons/autocomplete-off/autocomplete-off.spec.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -22,6 +22,7 @@ import { ClrAddonsModule } from '../clr-addons.module';
       <input #hasAutoComplete autocomplete="name" clrInput type="text" />
     </clr-input-container>
   `,
+  standalone: false,
 })
 class TestComponent {
   @ViewChild('noAutoComplete') noAutocomplete: ElementRef;

src/clr-addons/back-button/back-button.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2023 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -13,6 +13,7 @@ ClarityIcons.addIcons(arrowIcon);
 @Component({
   selector: 'clr-back-button',
   templateUrl: './back-button.html',
+  standalone: false,
 })
 export class ClrBackButton {
   constructor(private location: Location) {}

src/clr-addons/brand-avatar/brand-avatar.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2023 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -45,6 +45,7 @@ ClarityIcons.addIcons(
 @Component({
   selector: 'clr-brand-avatar',
   templateUrl: './brand-avatar.html',
+  standalone: false,
 })
 export class ClrBrandAvatar {
   @HostBinding('class.clr-brand-avatar') avatar = true;

src/clr-addons/breadcrumb/breadcrumb.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -13,6 +13,7 @@ import { takeUntil } from 'rxjs/operators';
 @Component({
   selector: 'clr-breadcrumb',
   templateUrl: './breadcrumb.html',
+  standalone: false,
 })
 export class ClrBreadcrumb implements OnDestroy {
   /**

src/clr-addons/clr-control-warning/if-warning.directive.ts

@@ -2,6 +2,7 @@ import { AfterViewInit, Directive, ElementRef, Input, Renderer2, TemplateRef, Vi
 
 @Directive({
   selector: '[clrIfWarning]',
+  standalone: false,
 })
 export class ClrIfWarning implements AfterViewInit {
   private hostElement: Element;

src/clr-addons/collapse-expand-section/collapse-expand-section.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -31,6 +31,7 @@ ClarityIcons.addIcons(angleIcon);
       transition('false => true', animate('300ms ease-in')),
     ]),
   ],
+  standalone: false,
 })
 export class ClrCollapseExpandSection {
   @Input('clrIsCollapsed') isCollapsed = true;

src/clr-addons/content-panel/content-panel-container-content.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -12,5 +12,6 @@ import { Component } from '@angular/core';
   host: {
     '[class.content-area]': 'true',
   },
+  standalone: false,
 })
 export class ClrContentPanelContainerContent {}

src/clr-addons/content-panel/content-panel-container-footer.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -12,5 +12,6 @@ import { Component } from '@angular/core';
   host: {
     '[class.content-area-footer]': 'true',
   },
+  standalone: false,
 })
 export class ClrContentPanelContainerFooter {}

src/clr-addons/content-panel/content-panel-container.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -19,5 +19,6 @@ import { Component } from '@angular/core';
     '[class.content-container]': 'true',
     '[class.content-panel-container]': 'true',
   },
+  standalone: false,
 })
 export class ClrContentPanelContainer {}

src/clr-addons/content-panel/content-panel.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2023 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -26,6 +26,7 @@ ClarityIcons.addIcons(timesIcon);
   host: {
     '[class.content-panel]': 'true',
   },
+  standalone: false,
 })
 export class ClrContentPanel {
   _open = false;

src/clr-addons/data-list-validator/data-list-predefined-validator.directive.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -14,6 +14,7 @@ import { ClrDataListValidators } from './data-list.validator';
 @Directive({
   selector: '[clrDataListPredefined]',
   providers: [{ provide: NG_VALIDATORS, useExisting: ClrDataListPredefinedValidatorDirective, multi: true }],
+  standalone: false,
 })
 export class ClrDataListPredefinedValidatorDirective implements Validator {
   @Input() clrDataListPredefined: string[] = [];

src/clr-addons/datagrid/datagrid-state-persistence/column-hidden-state-persistence.directive.ts

@@ -8,6 +8,7 @@ import { takeUntil } from 'rxjs/operators';
 
 @Directive({
   selector: '[clrDgHideableColumn]',
+  standalone: false,
 })
 export class ColumnHiddenStatePersistenceDirective implements OnInit, OnDestroy {
   destroy$ = new Subject<void>();

src/clr-addons/datagrid/datagrid-state-persistence/column-hidden-state-persistence.spec.ts

@@ -43,6 +43,7 @@ const PERSISTENCE_KEY = 'ColumnHiddenStatePersistenceDirective';
       </clr-dg-column>
     </clr-datagrid>
   `,
+  standalone: false,
 })
 class TestComponent {
   @ViewChildren(ClrDatagridHideableColumn)

src/clr-addons/datagrid/datagrid-state-persistence/datagrid-field.directive.ts

@@ -2,6 +2,7 @@ import { Directive, Input } from '@angular/core';
 
 @Directive({
   selector: '[clrDgField],[clrDgFieldKey]',
+  standalone: false,
 })
 export class DatagridFieldDirective {
   @Input()

src/clr-addons/datagrid/datagrid-state-persistence/state-persistence-key.directive.ts

@@ -34,6 +34,7 @@ interface FilterValueWithMetadata {
 
 @Directive({
   selector: '[clrStatePersistenceKey]',
+  standalone: false,
 })
 export class StatePersistenceKeyDirective implements AfterContentInit, OnDestroy {
   /**

src/clr-addons/datagrid/datagrid-state-persistence/state-persistence-key.spec.ts

@@ -50,6 +50,7 @@ import { BehaviorSubject } from 'rxjs';
       </clr-dg-footer>
     </clr-datagrid>
   `,
+  standalone: false,
 })
 class TestComponent {
   @ViewChild(ClrDatagridPagination)

src/clr-addons/datagrid/date-filter/date-filter.component.spec.ts

@@ -23,6 +23,7 @@ const tomorrow = new Date(Date.now() + 24 * 1000 * 60 * 60);
       </clr-dg-row>
     </clr-datagrid>
   `,
+  standalone: false,
 })
 class TestComponent {
   dataList = [{ date: today }, { date: tomorrow }];
@@ -47,6 +48,7 @@ class TestComponent {
       </clr-datagrid>
     </body>
   `,
+  standalone: false,
 })
 class TestComponentPreselectedValues {
   dataList = [{ date: yesterday }, { date: today }, { date: tomorrow }];
@@ -77,6 +79,7 @@ class TestComponentPreselectedValues {
       </clr-datagrid>
     </body>
   `,
+  standalone: false,
 })
 class TestComponentPreselectedTimeValues {
   dataList = [{ date: yesterday }, { date: today }, { date: tomorrow }];