refactor: migrate to signal inputs using automated migration (#1270)

* refactor: migrate to signal inputs using automated migration

Migrates all compatible inputs to signal inputs.

Author: devversion

src/app/pages/component-sidenav/component-nav.html

@@ -1,5 +1,5 @@
 <div class="docs-component-viewer-nav">
-  @if ((params | async)?.section; as section) {
+  @if ((params() | async)?.section; as section) {
     <div class="docs-component-viewer-nav-content">
         <mat-nav-list>
           @for (component of docItems.getItems(section); track component) {

src/app/pages/component-sidenav/component-sidenav.ts

@@ -1,12 +1,13 @@
-import {Component,
-  Input,
+import {
+  Component,
   NgModule,
   NgZone,
   OnDestroy,
   OnInit,
   ViewChild,
   ViewEncapsulation,
-  forwardRef
+  forwardRef,
+  input
 } from '@angular/core';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {CdkAccordionModule} from '@angular/cdk/accordion';
@@ -142,7 +143,7 @@ export class ComponentSidenav implements OnInit, OnDestroy {
   ],
 })
 export class ComponentNav {
-  @Input() params: Observable<Params> | undefined;
+  readonly params = input<Observable<Params>>();
   currentItemId: string | undefined;
 
   constructor(public docItems: DocumentationItems) {}

src/app/shared/carousel/carousel.ts

@@ -6,11 +6,11 @@ import {
   ElementRef,
   HostBinding,
   Inject,
-  Input,
   Optional,
   QueryList,
   ViewChild,
   ViewEncapsulation,
+  input
 } from '@angular/core';
 import {FocusableOption, FocusKeyManager} from '@angular/cdk/a11y';
 import {LEFT_ARROW, RIGHT_ARROW, TAB} from '@angular/cdk/keycodes';
@@ -42,7 +42,7 @@ export class CarouselItem implements FocusableOption {
   imports: [MatButtonModule, MatIconModule],
 })
 export class Carousel implements AfterContentInit {
-  @Input('aria-label') ariaLabel: string | undefined;
+  readonly ariaLabel = input<string|undefined>(undefined, { alias: 'aria-label' });
   @ContentChildren(CarouselItem) items!: QueryList<CarouselItem>;
   @ViewChild('list') list!: ElementRef<HTMLElement>;
   @HostBinding('class.animations-disabled') readonly animationsDisabled: boolean;

src/app/shared/doc-viewer/doc-viewer.ts

@@ -15,6 +15,7 @@ import {
   Output,
   SecurityContext,
   ViewContainerRef,
+  input
 } from '@angular/core';
 import {Observable, Subscription} from 'rxjs';
 import {shareReplay, take, tap} from 'rxjs/operators';
@@ -46,7 +47,7 @@ export class DocViewer implements OnDestroy {
   private _portalHosts: DomPortalOutlet[] = [];
   private _documentFetchSubscription: Subscription | undefined;
 
-  @Input() name: string | undefined;
+  readonly name = input<string>();
 
   /** The URL of the document to display. */
   @Input()

src/app/shared/doc-viewer/header-link.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component} from '@angular/core';
 import {Router} from '@angular/router';
 import {MatIconModule} from '@angular/material/icon';
 
@@ -32,7 +32,7 @@ export class HeaderLink {
    * Id of the anchor element. Note that is uses "example" because we instantiate the
    * header link components through the ComponentPortal.
    */
-  @Input() example: string | undefined;
+  example: string = '';
 
   /** Base URL that is used to build an absolute fragment URL. */
   private _baseUrl: string;

src/app/shared/example-viewer/code-snippet.html

@@ -1,3 +1,3 @@
 <div class="docs-example-source-wrapper">
-  <pre class="docs-example-source"><doc-viewer #viewer [documentUrl]="source"></doc-viewer></pre>
+  <pre class="docs-example-source"><doc-viewer #viewer [documentUrl]="source()"></doc-viewer></pre>
 </div>

src/app/shared/example-viewer/code-snippet.ts

@@ -1,9 +1,9 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  Input,
   ViewChild,
-  forwardRef
+  forwardRef,
+  input
 } from '@angular/core';
 import {DocViewer} from '../doc-viewer/doc-viewer';
 
@@ -16,6 +16,6 @@ import {DocViewer} from '../doc-viewer/doc-viewer';
   imports: [forwardRef(() => DocViewer)]
 })
 export class CodeSnippet {
-  @Input() source: string | undefined;
+  readonly source = input<string>();
   @ViewChild('viewer') viewer!: DocViewer;
 }

src/app/shared/table-of-contents/table-of-contents.ts

@@ -3,11 +3,11 @@ import {
   Component,
   ElementRef,
   Inject,
-  Input,
   OnDestroy,
   OnInit,
   NgZone,
   ChangeDetectorRef,
+  input
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 import {ActivatedRoute, Router} from '@angular/router';
@@ -44,7 +44,7 @@ interface Link {
   standalone: true
 })
 export class TableOfContents implements OnInit, AfterViewInit, OnDestroy {
-  @Input() container: string | undefined;
+  readonly container = input<string>();
 
   _linkSections: LinkSection[] = [];
   _links: Link[] = [];
@@ -87,8 +87,9 @@ export class TableOfContents implements OnInit, AfterViewInit, OnDestroy {
     // to subscribe to its scroll event until next tick (when it does exist).
     this._ngZone.runOutsideAngular(() => {
       Promise.resolve().then(() => {
-        this._scrollContainer = this.container ?
-          this._document.querySelector(this.container) as HTMLElement :
+        const container = this.container();
+        this._scrollContainer = container ?
+          this._document.querySelector(container) as HTMLElement :
           window;
 
         if (this._scrollContainer) {