feat: standalone components (#2702)

## Proposed change

After the update of Angular 19 with `standalone: true` as default,
update the `Components`, `Pipes`, and `Directives` in the repository.

## Related issues

<!--
Please make sure to follow the [contribution
guidelines](https://github.com/amadeus-digital/Otter/blob/main/CONTRIBUTING.md)
-->

*- No issue associated -*

<!-- * 🐛 Fix #issue -->
<!-- * 🐛 Fix resolves #issue -->
<!-- * 🚀 Feature #issue -->
<!-- * 🚀 Feature resolves #issue -->
<!-- *  Pull Request #issue -->

apps/chrome-devtools/src/app-components/app.component.ts

@@ -97,7 +97,6 @@ function getSelectedComponentInfo(getTranslations: typeof devkitGetTranslations,
   selector: 'app-root',
   templateUrl: './app.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     OtterComponentComponent,
     AppConnectionComponent,

apps/chrome-devtools/src/app-devtools/app.component.ts

@@ -27,7 +27,7 @@ import {
   NgbNavModule,
 } from '@ng-bootstrap/ng-bootstrap';
 import {
-  RulesetHistoryPresModule,
+  RulesetHistoryPresComponent,
 } from '@o3r/rules-engine';
 import {
   AppConnectionComponent,
@@ -78,11 +78,10 @@ import {
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     NgbNavModule,
     DebugPanelPresComponent,
-    RulesetHistoryPresModule,
+    RulesetHistoryPresComponent,
     ConfigPanelPresComponent,
     ComponentPanelPresComponent,
     AppConnectionComponent,

apps/chrome-devtools/src/app-devtools/component-panel/component-panel-pres.component.ts

@@ -47,7 +47,6 @@ import {
   templateUrl: './component-panel-pres.template.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  standalone: true,
   imports: [
     OtterComponentComponent,
     AsyncPipe

apps/chrome-devtools/src/app-devtools/config-panel/config-panel-pres.component.ts

@@ -40,7 +40,6 @@ import {
   templateUrl: './config-panel-pres.template.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  standalone: true,
   imports: [
     NgbAccordionModule,
     ConfigFormComponent,

apps/chrome-devtools/src/app-devtools/debug-panel/debug-panel-pres.component.ts

@@ -30,7 +30,6 @@ type PlaceholderMode = 'normal' | 'debug' | 'pending';
   templateUrl: './debug-panel-pres.template.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  standalone: true,
   imports: [
     ReactiveFormsModule,
     FormsModule,

apps/chrome-devtools/src/app-devtools/localization-panel/localization-panel-pres.component.ts

@@ -53,7 +53,6 @@ type LangTranslationsControl = FormGroup<Record<string, TranslationControl>>;
   templateUrl: './localization-panel-pres.template.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  standalone: true,
   imports: [
     NgbAccordionModule,
     DfTooltipModule,

apps/chrome-devtools/src/app-devtools/state-panel/state-panel.component.ts

@@ -101,7 +101,6 @@ const createStateForm = (name: string, color?: string | null) => new FormGroup<S
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  standalone: true,
   imports: [
     KeyValuePipe,
     JsonPipe,

apps/chrome-devtools/src/app-devtools/theming-panel/color.pipe.ts

@@ -12,8 +12,7 @@ import {
  * Convert the color to hexadecimal format
  */
 @Pipe({
-  name: 'hexColor',
-  standalone: true
+  name: 'hexColor'
 })
 export class HexColorPipe implements PipeTransform {
   public transform(variableValue: string) {
@@ -29,8 +28,7 @@ export class HexColorPipe implements PipeTransform {
  * Compute the best contrast for a color
  */
 @Pipe({
-  name: 'contrast',
-  standalone: true
+  name: 'contrast'
 })
 export class ContrastPipe implements PipeTransform {
   public transform(color: string) {
@@ -43,8 +41,7 @@ export class ContrastPipe implements PipeTransform {
  * Compute accessibility score for color contrast
  */
 @Pipe({
-  name: 'accessibilityContrastScore',
-  standalone: true
+  name: 'accessibilityContrastScore'
 })
 export class AccessibilityContrastScorePipe implements PipeTransform {
   public transform(color1: string, color2: string, textSize: 'small' | 'large') {

apps/chrome-devtools/src/app-devtools/theming-panel/is-ref.pipe.ts

@@ -10,8 +10,7 @@ import {
 } from './common';
 
 @Pipe({
-  name: 'isRef',
-  standalone: true
+  name: 'isRef'
 })
 export class IsRefPipe implements PipeTransform {
   public transform(variable: StylingVariable) {

apps/chrome-devtools/src/app-devtools/theming-panel/memoize.pipe.ts

@@ -3,7 +3,7 @@ import {
   type PipeTransform,
 } from '@angular/core';
 
-@Pipe({ name: 'memoize', standalone: true })
+@Pipe({ name: 'memoize' })
 export class MemoizePipe implements PipeTransform {
   public transform(fn: (...args: any[]) => any, ...pipeArgs: any[]): any {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument -- type of pipeArgs is `any[]`

apps/chrome-devtools/src/app-devtools/theming-panel/theming-panel-pres.component.ts

@@ -105,7 +105,6 @@ export interface VariableGroup {
   templateUrl: './theming-panel-pres.template.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  standalone: true,
   imports: [
     IsRefPipe,
     NgbAccordionModule,

apps/chrome-devtools/src/app-devtools/theming-panel/variable-label.pipe.ts

@@ -7,8 +7,7 @@ import type {
 } from '@o3r/styling';
 
 @Pipe({
-  name: 'variableLabel',
-  standalone: true
+  name: 'variableLabel'
 })
 export class VariableLabelPipe implements PipeTransform {
   public transform(variable: StylingVariable) {

apps/chrome-devtools/src/app-devtools/theming-panel/variable-name.pipe.ts

@@ -7,8 +7,7 @@ import {
 } from './common';
 
 @Pipe({
-  name: 'variableName',
-  standalone: true
+  name: 'variableName'
 })
 export class VariableNamePipe implements PipeTransform {
   public transform(text: string) {

apps/chrome-devtools/src/components/app-connection/app-connection.component.ts

@@ -18,7 +18,6 @@ import {
   selector: 'app-connection',
   templateUrl: './app-connection.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     AsyncPipe
   ]

apps/chrome-devtools/src/components/config-form/config-form.component.ts

@@ -32,7 +32,6 @@ type ControlsType = Record<string, 'boolean' | 'string' | 'number'>;
   selector: 'app-config-form',
   templateUrl: './config-form.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     FormsModule,
     ReactiveFormsModule,

apps/chrome-devtools/src/components/otter-component/otter-component.component.ts

@@ -22,7 +22,7 @@ import type {
 } from '@o3r/configuration';
 import {
   type RulesetExecutionDebug,
-  RulesetHistoryPresModule,
+  RulesetHistoryPresComponent,
 } from '@o3r/rules-engine';
 import {
   ConfigFormComponent,
@@ -33,8 +33,7 @@ const isRecordOfArray = (value?: object | null): value is Record<string, any[]>
 };
 
 @Pipe({
-  name: 'nbProp',
-  standalone: true
+  name: 'nbProp'
 })
 export class NbPropPipe implements PipeTransform {
   public transform(value: any[] | object | null | undefined, ignoredKeys: string[] = []) {
@@ -50,8 +49,7 @@ export class NbPropPipe implements PipeTransform {
 }
 
 @Pipe({
-  name: 'list',
-  standalone: true
+  name: 'list'
 })
 export class ListPipe implements PipeTransform {
   public transform(value: string[]) {
@@ -69,11 +67,10 @@ export class ListPipe implements PipeTransform {
   selector: 'app-otter-component',
   templateUrl: './otter-component.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     NgbNavModule,
     ConfigFormComponent,
-    RulesetHistoryPresModule,
+    RulesetHistoryPresComponent,
     NgbAccordionModule,
     NbPropPipe,
     ListPipe,

apps/showcase/src/app/sdk-intro/sdk-intro.component.ts

@@ -23,7 +23,6 @@ import {
 @O3rComponent({ componentType: 'Page' })
 @Component({
   selector: 'o3r-sdk-intro',
-  standalone: true,
   imports: [
     IN_PAGE_NAV_PRES_DIRECTIVES,
     AsyncPipe

apps/showcase/src/app/sdk-training/sdk-training.component.ts

@@ -8,7 +8,6 @@ import {
 
 @Component({
   selector: 'o3r-sdk-training',
-  standalone: true,
   imports: [
     TrainingComponent
   ],

apps/showcase/src/components/showcase/component-replacement/component-replacement-pres.spec.ts

@@ -36,8 +36,7 @@ let componentFixture: ComponentReplacementPresFixtureComponent;
       useExisting: forwardRef(() => MockC11nCVAStandaloneDirective),
       multi: true
     }
-  ],
-  standalone: true
+  ]
 })
 class MockC11nCVAStandaloneDirective {
   public writeValue = () => {};

apps/showcase/src/components/training/code-editor-control/code-editor-control.component.ts

@@ -37,7 +37,6 @@ import {
 
 @Component({
   selector: 'code-editor-control',
-  standalone: true,
   imports: [
     CodeEditorTerminalComponent,
     NgbNavModule,

apps/showcase/src/components/training/code-editor-terminal/code-editor-terminal.component.ts

@@ -20,7 +20,6 @@ import {
 @Component({
   selector: 'code-editor-terminal',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [],
   template: '<div #terminal class="h-100"></div>'
 })

apps/showcase/src/components/training/code-editor-view/code-editor-view.component.ts

@@ -117,7 +117,6 @@ export class MonacoFailedToLoadError extends Error {
 
 @Component({
   selector: 'code-editor-view',
-  standalone: true,
   imports: [
     AsyncPipe,
     CodeEditorControlComponent,

apps/showcase/src/components/training/save-code-dialog/save-code-dialog.component.ts

@@ -10,7 +10,6 @@ import {
 @Component({
   selector: 'code-editor-terminal',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [],
   templateUrl: './save-code-dialog.template.html'
 })

apps/showcase/src/components/training/training-step/training-step-pres.component.ts

@@ -17,7 +17,6 @@ import {
 
 @Component({
   selector: 'o3r-training-step-pres',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [AngularSplitModule, CodeEditorViewComponent, MarkdownModule],
   templateUrl: './training-step-pres.component.html',

apps/showcase/src/components/training/training.component.ts

@@ -97,7 +97,6 @@ const currentStepLocationRegExp = new RegExp(/#([0-9]+)$/);
 
 @Component({
   selector: 'o3r-training',
-  standalone: true,
   imports: [
     DynamicContentModule,
     FormsModule,

apps/showcase/src/components/utilities/date-picker-input-hebrew/date-picker-input-hebrew-pres.component.ts

@@ -36,8 +36,7 @@ import {
 } from './date-picker-input-hebrew-pres.context';
 
 @Pipe({
-  name: 'getDayNumerals',
-  standalone: true
+  name: 'getDayNumerals'
 })
 export class GetDayNumeralsPipe implements PipeTransform {
   public readonly i18n = inject(NgbDatepickerI18n);

apps/showcase/src/components/utilities/in-page-nav/in-page-nav-pres.component.ts

@@ -26,8 +26,7 @@ export interface InPageNavLink {
 }
 
 @Directive({
-  selector: 'h2[id]',
-  standalone: true
+  selector: 'h2[id]'
 })
 export class InPageNavLinkDirective implements InPageNavLink, AfterViewInit {
   /** HTML id of the h2 */

apps/showcase/src/components/utilities/otter-picker/otter-icon-path.pipe.ts

@@ -8,8 +8,7 @@ import {
 } from './otter-icons';
 
 @Pipe({
-  name: 'otterIconPath',
-  standalone: true
+  name: 'otterIconPath'
 })
 export class OtterIconPathPipe implements PipeTransform {
   private readonly BASE_URL = location.href.split('/#', 1)[0];

docs/components/INTRODUCTION.md

@@ -29,7 +29,6 @@ It will be used to extract metadata or for debugging purpose.
 })
 @Component({
   selector: 'o3r-component-name',
-  standalone: true,
   templateUrl: './component-name.template.html',
   styleUrls: ['./component-name.style.scss'],
   encapsulation: ViewEncapsulation.None,

packages/@o3r/analytics/schematics/analytics-to-component/index.spec.ts

@@ -31,7 +31,6 @@ import {Subscription} from 'rxjs';
 })
 @Component({
   selector: 'o3r-test-pres',
-  standalone: true,
   imports: [CommonModule],
   styleUrls: ['./test.style.scss'],
   templateUrl: './test.template.html',
@@ -60,7 +59,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'ng-test',
-  standalone: true,
   imports: [CommonModule],
   template: ''
 })

packages/@o3r/analytics/src/directives/track-events/track-click/track-click.directive.ts

@@ -31,8 +31,7 @@ import {
  * ```
  */
 @Directive({
-  selector: '[trackClick]',
-  standalone: false
+  selector: '[trackClick]'
 })
 export class TrackClickDirective extends BaseTrackEvents implements OnInit {
   /**

packages/@o3r/analytics/src/directives/track-events/track-click/track-click.spec.ts

@@ -14,24 +14,22 @@ import {
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing';
-import {
-  RouterTestingModule,
-} from '@angular/router/testing';
 import {
   UiEventPayload,
 } from '../../../contracts';
 import {
   EventTrackService,
 } from '../../../services/event-track';
 import {
-  TrackEventsModule,
-} from '../track-events.module';
+  TrackClickDirective,
+} from './track-click.directive';
 
 const dummyEventContext = { eventInfo: { eventName: '', pageId: '', timeStamp: '' } };
 
 @Component({
   template: '<button trackClick [trackEventContext]="eventModel">Click</button>',
-  standalone: false
+  imports: [TrackClickDirective],
+  providers: [EventTrackService]
 })
 class TestComponent {
   public eventModel = dummyEventContext;
@@ -46,14 +44,6 @@ describe('Track click directive:', () => {
   let buttonElement: DebugElement;
   let addEventSpy: jest.SpyInstance;
 
-  beforeEach(async () => {
-    return await TestBed.configureTestingModule({
-      imports: [TrackEventsModule, RouterTestingModule],
-      declarations: [TestComponent],
-      providers: [EventTrackService]
-    }).compileComponents();
-  });
-
   beforeEach(() => {
     fixture = TestBed.createComponent(TestComponent);
     buttonElement = fixture.debugElement.query(By.css('button'));

packages/@o3r/analytics/src/directives/track-events/track-events.directive.ts

@@ -33,8 +33,7 @@ import {
  * ```
  */
 @Directive({
-  selector: '[trackEvents]',
-  standalone: false
+  selector: '[trackEvents]'
 })
 export class TrackEventsDirective extends BaseTrackEvents implements OnChanges {
   /**