Zoneless (#136)

* feat: changeDetection onPush and zoneless support

* feat: update angular schematics

Author: Sobyt483

angular.json

@@ -1,6 +1,13 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
+  "schematics": {
+    "@schematics/angular:component": {
+      "changeDetection": "OnPush",
+      "style": "scss",
+      "type": "Component"
+    }
+  },
   "newProjectRoot": "projects",
   "projects": {
     "lib": {

projects/wc/src/app/app.config.ts

@@ -1,12 +1,19 @@
 import { provideLuigiWebComponents } from './initializers/luigi-wc-initializer';
 import { provideHttpClient } from '@angular/common/http';
-import { ApplicationConfig } from '@angular/core';
+import {
+  ApplicationConfig,
+  provideZonelessChangeDetection,
+} from '@angular/core';
 import '@ui5/webcomponents-fiori/illustrations/NoData.js';
 import '@ui5/webcomponents-icons/dist/delete.js';
 import '@ui5/webcomponents-icons/dist/download-from-cloud.js';
 
 document.body.classList.add('ui5-content-density-compact');
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideHttpClient(), provideLuigiWebComponents()],
+  providers: [
+    provideZonelessChangeDetection(),
+    provideHttpClient(),
+    provideLuigiWebComponents(),
+  ],
 };

projects/wc/src/app/components/dynamic-select/dynamic-select.component.ts

@@ -1,4 +1,13 @@
-import { Component, DestroyRef, effect, inject, input, output, signal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  effect,
+  inject,
+  input,
+  output,
+  signal,
+} from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FieldDefinition } from '@platform-mesh/portal-ui-lib/models';
 import {
@@ -9,15 +18,16 @@ import { getValueByPath } from '@platform-mesh/portal-ui-lib/utils';
 import { OptionComponent, SelectComponent } from '@ui5/webcomponents-ngx';
 import { Observable, map } from 'rxjs';
 
-
 @Component({
   selector: 'dynamic-select',
   imports: [SelectComponent, OptionComponent],
   templateUrl: './dynamic-select.component.html',
   styleUrl: './dynamic-select.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DynamicSelectComponent {
-  dynamicValuesDefinition = input.required<NonNullable<FieldDefinition['dynamicValuesDefinition']>>();
+  dynamicValuesDefinition =
+    input.required<NonNullable<FieldDefinition['dynamicValuesDefinition']>>();
   context = input.required<ResourceNodeContext>();
 
   value = input<string>('');

projects/wc/src/app/components/generic-ui/list-view/create-resource-modal/create-resource-modal.component.ts

@@ -3,6 +3,7 @@ import { k8sNameValidator } from '../../../../validators/k8s-name-validator';
 import { DynamicSelectComponent } from '../../../dynamic-select/dynamic-select.component';
 import { ResourceFieldNames } from './create-resource-modal.enums';
 import {
+  ChangeDetectionStrategy,
   Component,
   OnInit,
   ViewEncapsulation,
@@ -55,6 +56,7 @@ import { set } from 'lodash';
   templateUrl: './create-resource-modal.component.html',
   styleUrl: './create-resource-modal.component.scss',
   encapsulation: ViewEncapsulation.ShadowDom,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CreateResourceModalComponent implements OnInit {
   fields = input<FieldDefinition[]>([]);

projects/wc/src/app/components/generic-ui/value-cell/boolean-value/boolean-value.component.ts

@@ -4,7 +4,12 @@ import {
   ICON_NAME_NEGATIVE,
   ICON_NAME_POSITIVE,
 } from './boolean-cell.constants';
-import { Component, computed, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
 import { IconComponent } from '@ui5/webcomponents-ngx';
 
 export type IconDesignType =
@@ -16,6 +21,7 @@ export type IconDesignType =
   imports: [IconComponent],
   templateUrl: './boolean-value.component.html',
   styleUrl: './boolean-value.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BooleanValueComponent {
   boolValue = input.required<boolean>();

projects/wc/src/app/components/generic-ui/value-cell/link-value/link-value.component.ts

@@ -1,11 +1,12 @@
-import { Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { LinkComponent } from '@ui5/webcomponents-ngx';
 
 @Component({
   selector: 'wc-link-value',
   imports: [LinkComponent],
   templateUrl: './link-value.component.html',
   styleUrl: './link-value.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LinkValueComponent {
   urlValue = input.required<string>();

projects/wc/src/app/components/generic-ui/value-cell/secret-value/secret-value.component.ts

@@ -1,11 +1,12 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 @Component({
   selector: 'wc-secret-value',
   imports: [],
   schemas: [],
   templateUrl: './secret-value.component.html',
   styleUrl: './secret-value.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SecretValueComponent {
   value = input.required<string>();

projects/wc/src/app/components/welcome/welcome.component.ts

@@ -1,5 +1,12 @@
 import { OrganizationManagementComponent } from '../organization-management/organization-management.component';
-import { Component, OnInit, inject, input, signal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+  inject,
+  input,
+  signal,
+} from '@angular/core';
 import { LuigiClient } from '@luigi-project/client/luigi-element';
 import { I18nService, LuigiCoreService } from '@openmfp/portal-ui-lib';
 import { ResourceNodeContext } from '@platform-mesh/portal-ui-lib/services';
@@ -45,6 +52,7 @@ interface Header {
       }
     `,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class WelcomeComponent implements OnInit {
   private i18nService = inject(I18nService);