$'syncing commit from monoropo. PR: 244, Title: FIO-10191: Added support for standalone components'

brendanbond · brendanbond · commit d8bb4c6d3d2d · 2025-07-01T19:00:46.000Z
diff --git a/projects/angular-formio/auth/src/auth.component.ts b/projects/angular-formio/auth/src/auth.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
+import { RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
 @Component({
-  templateUrl: './auth.component.html',
-  standalone: false
+    templateUrl: './auth.component.html',
+    imports: [RouterLinkActive, RouterLink, RouterOutlet]
 })
 export class FormioAuthComponent {}
diff --git a/projects/angular-formio/auth/src/auth.module.ts b/projects/angular-formio/auth/src/auth.module.ts
@@ -11,17 +11,15 @@ import { FormioAuthRoutes } from './auth.routes';
 import { extendRouter } from '@formio/angular';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    FormioModule,
-    RouterModule
-  ],
-  declarations: [
-    FormioAuthComponent,
-    FormioAuthLoginComponent,
-    FormioAuthRegisterComponent,
-    FormioResetPassComponent
-  ]
+    imports: [
+        CommonModule,
+        FormioModule,
+        RouterModule,
+        FormioAuthComponent,
+        FormioAuthLoginComponent,
+        FormioAuthRegisterComponent,
+        FormioResetPassComponent
+    ]
 })
 export class FormioAuth {
   static forRoot(config?: FormioAuthRouteConfig): any {
diff --git a/projects/angular-formio/auth/src/login/login.component.ts b/projects/angular-formio/auth/src/login/login.component.ts
@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
 import { FormioAuthService } from '../auth.service';
+import { FormioComponent } from '@formio/angular';
 @Component({
-  templateUrl: './login.component.html',
-  standalone: false
+    templateUrl: './login.component.html',
+    imports: [FormioComponent]
 })
 export class FormioAuthLoginComponent {
   public renderOptions: any = {
diff --git a/projects/angular-formio/auth/src/register/register.component.ts b/projects/angular-formio/auth/src/register/register.component.ts
@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
 import { FormioAuthService } from '../auth.service';
+import { FormioComponent } from '@formio/angular';
 @Component({
-  templateUrl: './register.component.html',
-  standalone: false
+    templateUrl: './register.component.html',
+    imports: [FormioComponent]
 })
 export class FormioAuthRegisterComponent {
   public renderOptions: any = {
diff --git a/projects/angular-formio/auth/src/resetpass/resetpass.component.ts b/projects/angular-formio/auth/src/resetpass/resetpass.component.ts
@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
 import { FormioAuthService } from '../auth.service';
+import { FormioComponent } from '@formio/angular';
 @Component({
-  templateUrl: './resetpass.component.html',
-  standalone: false
+    templateUrl: './resetpass.component.html',
+    imports: [FormioComponent]
 })
 export class FormioResetPassComponent {
   constructor(public service: FormioAuthService) {}
diff --git a/projects/angular-formio/embed/src/builder.component.ts b/projects/angular-formio/embed/src/builder.component.ts
@@ -4,8 +4,7 @@ import WebformBuilder from '@formio/js/lib/cjs/WebformBuilder';
 
 @Component({
     selector: 'formio-builder',
-    template: '<div #formio></div>',
-    standalone: false
+    template: '<div #formio></div>'
 })
 export class FormioBuilder implements AfterViewInit, OnDestroy {
     @ViewChild('formio') element: ElementRef;
diff --git a/projects/angular-formio/embed/src/embed.module.ts b/projects/angular-formio/embed/src/embed.module.ts
@@ -6,9 +6,7 @@ import { FormioAppService } from "./app.service";
 
 @NgModule({
     imports: [
-        CommonModule
-    ],
-    declarations: [
+        CommonModule,
         FormioComponent,
         FormioBuilder
     ],
diff --git a/projects/angular-formio/embed/src/formio.component.ts b/projects/angular-formio/embed/src/formio.component.ts
@@ -4,8 +4,7 @@ import { Form as formType, Submission } from '@formio/core/types';
 
 @Component({
     selector: 'formio',
-    template: '<div #formio></div>',
-    standalone: false
+    template: '<div #formio></div>'
 })
 export class FormioComponent implements AfterViewInit {
     @Input() src?: string;
diff --git a/projects/angular-formio/grid/src/GridBodyComponent.ts b/projects/angular-formio/grid/src/GridBodyComponent.ts
@@ -4,10 +4,7 @@ import { GridHeaderComponent } from './GridHeaderComponent';
 import { GridService } from './grid.service';
 import {FormioPromiseService} from '@formio/angular';
 
-@Component({
-  template: '',
-  standalone: false
-})
+@Component({ template: '' })
 export class GridBodyComponent {
   @Input() header: GridHeaderComponent;
   @Input() actionAllowed: any;
diff --git a/projects/angular-formio/grid/src/GridFooterComponent.ts b/projects/angular-formio/grid/src/GridFooterComponent.ts
@@ -3,10 +3,7 @@ import { Input, Output, ViewChild, TemplateRef, EventEmitter, Component } from '
 import { GridHeaderComponent } from './GridHeaderComponent';
 import { GridBodyComponent } from './GridBodyComponent';
 
-@Component({
-  template: '',
-  standalone: false
-})
+@Component({ template: '' })
 export class GridFooterComponent {
   @Input() header: GridHeaderComponent;
   @Input() body: GridBodyComponent;
diff --git a/projects/angular-formio/grid/src/GridHeaderComponent.ts b/projects/angular-formio/grid/src/GridHeaderComponent.ts
@@ -2,10 +2,7 @@ import { Output, EventEmitter, ViewChild, TemplateRef, Input, Component } from '
 import {FormioPromiseService} from '@formio/angular';
 import {GridHeader} from './types/grid-header';
 
-@Component({
-  template: '',
-  standalone: false
-})
+@Component({ template: '' })
 export class GridHeaderComponent {
   @Input() actionAllowed: any;
   @Output() sort: EventEmitter<GridHeader>;
diff --git a/projects/angular-formio/grid/src/form/FormGridBody.component.ts b/projects/angular-formio/grid/src/form/FormGridBody.component.ts
@@ -2,11 +2,14 @@ import { Component, ElementRef, OnDestroy, ViewChild, ViewChildren } from '@angu
 import { GridBodyComponent } from '../GridBodyComponent';
 import { FormioPromiseService } from '@formio/angular';
 import { Tooltip } from 'bootstrap';
+import { NgIf, NgFor } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { TimeSince } from './time-since.pipe';
 @Component({
-  selector: 'form-grid-body',
-  styleUrls: ['./FormGridBody.component.scss'],
-  templateUrl: './FormGridBody.component.html',
-  standalone: false
+    selector: 'form-grid-body',
+    styleUrls: ['./FormGridBody.component.scss'],
+    templateUrl: './FormGridBody.component.html',
+    imports: [NgIf, NgFor, RouterLink, TimeSince]
 })
 export class FormGridBodyComponent extends GridBodyComponent implements OnDestroy {
   @ViewChildren('create') createBtns: ElementRef[];
diff --git a/projects/angular-formio/grid/src/form/FormGridFooter.component.ts b/projects/angular-formio/grid/src/form/FormGridFooter.component.ts
@@ -1,11 +1,14 @@
 import {Component, ViewEncapsulation, OnInit } from '@angular/core';
 import { GridFooterComponent } from '../GridFooterComponent';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { PaginationComponent } from 'ngx-bootstrap/pagination';
+import { FormsModule } from '@angular/forms';
 
 @Component({
-  templateUrl: './FormGridFooter.component.html',
-  styleUrls: ['../grid.footer.scss'],
-  encapsulation: ViewEncapsulation.None,
-  standalone: false
+    templateUrl: './FormGridFooter.component.html',
+    styleUrls: ['../grid.footer.scss'],
+    encapsulation: ViewEncapsulation.None,
+    imports: [NgIf, NgTemplateOutlet, PaginationComponent, FormsModule]
 })
 export class FormGridFooterComponent extends GridFooterComponent implements OnInit {
 
diff --git a/projects/angular-formio/grid/src/form/FormGridHeader.component.ts b/projects/angular-formio/grid/src/form/FormGridHeader.component.ts
@@ -1,11 +1,12 @@
 import {Component} from '@angular/core';
 import {GridHeaderComponent} from '../GridHeaderComponent';
 import {GridHeader, SortType} from '../types/grid-header';
+import { NgIf, NgClass } from '@angular/common';
 
 @Component({
-  selector: 'form-grid-header',
-  templateUrl: './FormGridHeader.component.html',
-  standalone: false
+    selector: 'form-grid-header',
+    templateUrl: './FormGridHeader.component.html',
+    imports: [NgIf, NgClass]
 })
 export class FormGridHeaderComponent extends GridHeaderComponent {
   public header: GridHeader;
diff --git a/projects/angular-formio/grid/src/form/time-since.pipe.ts b/projects/angular-formio/grid/src/form/time-since.pipe.ts
@@ -1,9 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-@Pipe({
-  name: 'timeSince',
-  standalone: false
-})
+@Pipe({ name: 'timeSince' })
 export class TimeSince implements PipeTransform {
   transform(date: Date): string {
     const elapsed = (new Date().getTime() - new Date(date).getTime()) / 1000;
diff --git a/projects/angular-formio/grid/src/grid.component.ts b/projects/angular-formio/grid/src/grid.component.ts
@@ -23,12 +23,15 @@ import SubmissionComponents from './submission/index';
 import {FormioPromiseService} from '@formio/angular';
 import {GridColumn} from './types/grid-column';
 import {GridHeader, SortType} from './types/grid-header';
+import { FormioAlertsComponent } from '@formio/angular';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { FormioLoaderComponent } from '@formio/angular';
 
 @Component({
-  selector: 'formio-grid',
-  styleUrls: ['./grid.component.scss'],
-  templateUrl: './grid.component.html',
-  standalone: false
+    selector: 'formio-grid',
+    styleUrls: ['./grid.component.scss'],
+    templateUrl: './grid.component.html',
+    imports: [FormioAlertsComponent, NgIf, NgTemplateOutlet, FormioLoaderComponent]
 })
 export class FormioGridComponent implements OnChanges, OnInit, AfterViewInit {
   @Input() footerPosition = GridFooterPositions.bottom;
diff --git a/projects/angular-formio/grid/src/grid.module.ts b/projects/angular-formio/grid/src/grid.module.ts
@@ -23,9 +23,7 @@ import { TimeSince } from './form/time-since.pipe'
         FormsModule,
         FormioModule,
         RouterModule,
-        PaginationModule.forRoot()
-    ],
-    declarations: [
+        PaginationModule.forRoot(),
         FormioGridComponent,
         FormGridHeaderComponent,
         FormGridBodyComponent,
diff --git a/projects/angular-formio/grid/src/submission/SubmissionGridBody.component.ts b/projects/angular-formio/grid/src/submission/SubmissionGridBody.component.ts
@@ -4,9 +4,10 @@ import { GridBodyComponent } from '../GridBodyComponent';
 import {FormioPromiseService} from '@formio/angular';
 import { GridHeader } from '../types/grid-header';
 import {FormioSubmission} from '@formio/angular';
+import { NgFor } from '@angular/common';
 @Component({
-  templateUrl: './SubmissionGridBody.component.html',
-  standalone: false
+    templateUrl: './SubmissionGridBody.component.html',
+    imports: [NgFor]
 })
 export class SubmissionGridBodyComponent extends GridBodyComponent {
   load(formio: FormioPromiseService, query?: any) {
diff --git a/projects/angular-formio/grid/src/submission/SubmissionGridFooter.component.ts b/projects/angular-formio/grid/src/submission/SubmissionGridFooter.component.ts
@@ -1,11 +1,14 @@
 import {Component, OnInit, ViewEncapsulation} from '@angular/core';
 import { GridFooterComponent } from '../GridFooterComponent';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { PaginationComponent } from 'ngx-bootstrap/pagination';
+import { FormsModule } from '@angular/forms';
 
 @Component({
-  templateUrl: './SubmissionGridFooter.component.html',
-  styleUrls: ['../grid.footer.scss'],
-  encapsulation: ViewEncapsulation.None,
-  standalone: false
+    templateUrl: './SubmissionGridFooter.component.html',
+    styleUrls: ['../grid.footer.scss'],
+    encapsulation: ViewEncapsulation.None,
+    imports: [NgIf, NgTemplateOutlet, PaginationComponent, FormsModule]
 })
 export class SubmissionGridFooterComponent extends GridFooterComponent implements OnInit {
 
diff --git a/projects/angular-formio/grid/src/submission/SubmissionGridHeader.component.ts b/projects/angular-formio/grid/src/submission/SubmissionGridHeader.component.ts
@@ -1,16 +1,18 @@
 import {Component} from '@angular/core';
 import {Utils, Components} from '@formio/js';
 import {Component as ComponentType} from '@formio/core';
+
 import {ExtendedComponentSchema} from '@formio/deprecated-types';
 import {GridHeaderComponent} from '../GridHeaderComponent';
 import {FormioPromiseService} from '@formio/angular';
 import {ComponentInstance, FormioForm} from '@formio/angular';
 import {GridColumn} from '../types/grid-column';
 import {GridHeader, SortType} from '../types/grid-header';
+import { NgFor, NgIf, NgClass } from '@angular/common';
 
 @Component({
-  templateUrl: './SubmissionGridHeader.component.html',
-  standalone: false
+    templateUrl: './SubmissionGridHeader.component.html',
+    imports: [NgFor, NgIf, NgClass]
 })
 export class SubmissionGridHeaderComponent extends GridHeaderComponent {
 
@@ -72,3 +74,4 @@ export class SubmissionGridHeaderComponent extends GridHeaderComponent {
     });
   }
 }
+
diff --git a/projects/angular-formio/manager/src/create/create.component.ts b/projects/angular-formio/manager/src/create/create.component.ts
@@ -1,9 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 import { FormManagerEditComponent } from '../edit/edit.component';
+import { NgIf } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FormioAlertsComponent } from '@formio/angular';
+import { FormBuilderComponent } from '@formio/angular';
 
 @Component({
-  templateUrl: '../edit/edit.component.html',
-  standalone: false
+    templateUrl: '../edit/edit.component.html',
+    imports: [NgIf, FormsModule, FormioAlertsComponent, FormBuilderComponent]
 })
 export class FormManagerCreateComponent extends FormManagerEditComponent implements OnInit {
   ngOnInit() {
diff --git a/projects/angular-formio/manager/src/delete/delete.component.ts b/projects/angular-formio/manager/src/delete/delete.component.ts
@@ -3,10 +3,11 @@ import { FormManagerService } from '../form-manager.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormioAlerts } from '@formio/angular';
 import { GridService } from '@formio/angular/grid';
+import { FormioAlertsComponent } from '@formio/angular';
 
 @Component({
-  templateUrl: './delete.component.html',
-  standalone: false
+    templateUrl: './delete.component.html',
+    imports: [FormioAlertsComponent]
 })
 export class FormManagerDeleteComponent {
   constructor(
diff --git a/projects/angular-formio/manager/src/edit/edit.component.ts b/projects/angular-formio/manager/src/edit/edit.component.ts
@@ -5,10 +5,13 @@ import { FormManagerConfig } from '../form-manager.config';
 import { FormioAlerts } from '@formio/angular';
 import { FormBuilderComponent } from '@formio/angular';
 import _ from 'lodash';
+import { NgIf } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FormioAlertsComponent } from '@formio/angular';
 
 @Component({
-  templateUrl: './edit.component.html',
-  standalone: false
+    templateUrl: './edit.component.html',
+    imports: [NgIf, FormsModule, FormioAlertsComponent, FormBuilderComponent]
 })
 export class FormManagerEditComponent implements AfterViewInit {
   @ViewChild(FormBuilderComponent, {static: false}) builder: FormBuilderComponent;
diff --git a/projects/angular-formio/manager/src/form-manager.module.ts b/projects/angular-formio/manager/src/form-manager.module.ts
@@ -21,28 +21,26 @@ import { PaginationModule } from 'ngx-bootstrap/pagination';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { extendRouter } from '@formio/angular';
 @NgModule({
-  imports: [
-    CommonModule,
-    FormioModule,
-    RouterModule,
-    FormsModule,
-    FormioGrid,
-    ModalModule.forRoot(),
-    PaginationModule.forRoot()
-  ],
-  declarations: [
-    FormManagerIndexComponent,
-    FormManagerCreateComponent,
-    FormManagerFormComponent,
-    FormManagerViewComponent,
-    FormManagerEditComponent,
-    FormManagerDeleteComponent,
-    SubmissionComponent,
-    SubmissionEditComponent,
-    SubmissionDeleteComponent,
-    SubmissionViewComponent,
-    SubmissionIndexComponent
-  ]
+    imports: [
+        CommonModule,
+        FormioModule,
+        RouterModule,
+        FormsModule,
+        FormioGrid,
+        ModalModule.forRoot(),
+        PaginationModule.forRoot(),
+        FormManagerIndexComponent,
+        FormManagerCreateComponent,
+        FormManagerFormComponent,
+        FormManagerViewComponent,
+        FormManagerEditComponent,
+        FormManagerDeleteComponent,
+        SubmissionComponent,
+        SubmissionEditComponent,
+        SubmissionDeleteComponent,
+        SubmissionViewComponent,
+        SubmissionIndexComponent
+    ]
 })
 export class FormManagerModule {
   static forChild(config?: FormManagerRouteConfig): any {
diff --git a/projects/angular-formio/manager/src/form/form.component.ts b/projects/angular-formio/manager/src/form/form.component.ts
diff --git a/projects/angular-formio/manager/src/index/index.component.ts b/projects/angular-formio/manager/src/index/index.component.ts
diff --git a/projects/angular-formio/manager/src/submission/delete/delete.component.ts b/projects/angular-formio/manager/src/submission/delete/delete.component.ts
diff --git a/projects/angular-formio/manager/src/submission/edit/edit.component.ts b/projects/angular-formio/manager/src/submission/edit/edit.component.ts
diff --git a/projects/angular-formio/manager/src/submission/index/index.component.ts b/projects/angular-formio/manager/src/submission/index/index.component.ts
