Merge pull request #1078 from formio/8x-upgrade

Angular 18 upgrade
formio · Jun 18, 2024 · f4532c1 · f4532c1
2 parents 9aedcf7 + 4519fc8
commit f4532c1
Show file tree

Hide file tree

Showing 17 changed files with 3,876 additions and 3,814 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formio/angular",
-  "version": "7.5.0-rc.1",
+  "version": "8.0.0-rc.3",
   "scripts": {
     "ng": "ng",
     "build": "ng build angular-formio",
@@ -10,7 +10,7 @@
     "docs:build": "compodoc -p tsconfig.json -n angular-formio -d docs --hideGenerator",
     "docs:serve": "npm run docs:build -- -s",
     "docs:watch": "npm run docs:build -- -s -w",
-    "publish": "npm run build:prod && npm publish ./dist/angular-formio --tag=rc",
+    "publish": "npm run build:prod && npm publish ./dist/angular-formio --tag=8x",
     "publish:latest": "npm run build:prod && npm publish ./dist/angular-formio",
     "test": "ng test",
     "lint": "ng lint",
@@ -35,40 +35,41 @@
     "node": ">=6.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.9",
-    "@angular/animations": "^17.0.8",
-    "@angular/cli": "^17.0.9",
-    "@angular/common": "^17.0.8",
-    "@angular/compiler": "^17.0.8",
-    "@angular/compiler-cli": "^17.0.8",
-    "@angular/core": "^17.0.8",
-    "@angular/forms": "^17.0.8",
-    "@angular/platform-browser": "^17.0.8",
-    "@angular/platform-browser-dynamic": "^17.0.8",
-    "@angular/router": "^17.0.8",
-    "@compodoc/compodoc": "^1.1.23",
-    "@formio/js": "^5.0.0-rc.38",
+    "@angular-devkit/build-angular": "^18.0.3",
+    "@angular/animations": "^18.0.2",
+    "@angular/cli": "^18.0.3",
+    "@angular/common": "^18.0.2",
+    "@angular/compiler": "^18.0.2",
+    "@angular/compiler-cli": "^18.0.2",
+    "@angular/core": "^18.0.2",
+    "@angular/forms": "^18.0.2",
+    "@angular/platform-browser": "^18.0.2",
+    "@angular/platform-browser-dynamic": "^18.0.2",
+    "@angular/router": "^18.0.2",
+    "@compodoc/compodoc": "^1.1.25",
+    "@formio/deprecated-types": "^0.1.0",
+    "@formio/js": "^5.0.0-rc.59",
     "@types/jasmine": "^5.1.4",
     "@types/jasminewd2": "^2.0.13",
-    "@types/node": "^20.10.8",
-    "bootstrap": "5.3.2",
+    "@types/node": "^20.14.2",
+    "bootstrap": "5.3.3",
     "codelyzer": "^6.0.2",
-    "jasmine-core": "^5.0.0",
+    "jasmine-core": "^5.1.2",
     "jasmine-spec-reporter": "^7.0.0",
-    "karma": "^6.4.0",
+    "karma": "^6.4.3",
     "karma-chrome-launcher": "^3.1.1",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "ng-packagr": "^17.0.3",
+    "ng-packagr": "^18.0.0",
     "ngx-bootstrap": "^12.0.0",
     "protractor": "~7.0.0",
-    "replace-in-file": "^7.1.0",
+    "replace-in-file": "^7.2.0",
     "rxjs": "^7.8.1",
     "ts-node": "^10.9.2",
-    "tslib": "^2.5.3",
+    "tslib": "^2.6.3",
     "tslint": "~6.1.0",
-    "typescript": "~5.2.0",
-    "zone.js": "^0.14.3"
+    "typescript": "~5.4.5",
+    "zone.js": "^0.14.7"
   }
 }
diff --git a/projects/angular-formio/embed/src/app.service.ts b/projects/angular-formio/embed/src/app.service.ts
@@ -1,6 +1,6 @@
 import { Inject, Injectable, InjectionToken, EventEmitter } from '@angular/core';
 export const FormioAppConfig = new InjectionToken('formio-config');
-import { Formio } from '@formio/js/sdk';
+import { FormioCore as Formio } from '@formio/js';
 @Injectable()
 export class FormioAppService {
     baseUrl;

diff --git a/projects/angular-formio/embed/src/builder.component.ts b/projects/angular-formio/embed/src/builder.component.ts
@@ -1,5 +1,5 @@
-import { Component, ElementRef, Input, ViewChild, OnChanges, Output, EventEmitter, AfterViewInit } from '@angular/core';
-import { Formio } from '@formio/js/sdk';
+import { Component, ElementRef, Input, ViewChild, Output, EventEmitter, AfterViewInit } from '@angular/core';
+import { FormioCore as Formio } from '@formio/js';
 
 @Component({
     selector: 'formio-builder',

diff --git a/projects/angular-formio/embed/src/formio.component.ts b/projects/angular-formio/embed/src/formio.component.ts
@@ -1,5 +1,5 @@
 import { Component, ViewChild, ElementRef, Input, Output, EventEmitter, OnChanges, AfterViewInit } from '@angular/core';
-import { Formio } from '@formio/js/sdk';
+import { FormioCore as Formio } from '@formio/js';
 
 @Component({
     selector: 'formio',

diff --git a/projects/angular-formio/embed/src/index.ts b/projects/angular-formio/embed/src/index.ts
@@ -1,4 +1,4 @@
-import { Formio } from '@formio/js/sdk';
+import { FormioCore as Formio } from '@formio/js';
 export { FormioComponent } from './formio.component';
 export { FormioBuilder } from './builder.component';
 export { FormioEmbedModule } from './embed.module';

diff --git a/projects/angular-formio/grid/src/grid.component.ts b/projects/angular-formio/grid/src/grid.component.ts
@@ -14,7 +14,7 @@ import {
 } from '@angular/core';
 import {FormioAlerts} from '@formio/angular';
 import {each} from 'lodash';
-import {Formio} from '@formio/js/sdk';
+import {FormioCore as Formio} from '@formio/js';
 import {GridHeaderComponent} from './GridHeaderComponent';
 import {GridBodyComponent} from './GridBodyComponent';
 import {GridFooterComponent} from './GridFooterComponent';

diff --git a/projects/angular-formio/grid/src/submission/SubmissionGridHeader.component.ts b/projects/angular-formio/grid/src/submission/SubmissionGridHeader.component.ts
@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
-import {Utils, Components, ExtendedComponentSchema} from '@formio/js';
+import {Utils, Components} from '@formio/js';
+import {ExtendedComponentSchema} from '@formio/deprecated-types';
 import {GridHeaderComponent} from '../GridHeaderComponent';
 import {FormioPromiseService} from '@formio/angular';
 import {ComponentInstance, FormioForm} from '@formio/angular';
@@ -37,7 +38,7 @@ export class SubmissionGridHeaderComponent extends GridHeaderComponent {
       label: column.label,
       key: column.path,
       sort: sort,
-      component: component ? Components.create(component, null, null, true) as ComponentInstance : undefined,
+      component: component ? Components.create(component, null, null) as ComponentInstance : undefined,
       renderCell: column ? column.renderCell : undefined
     };
   }
@@ -47,7 +48,7 @@ export class SubmissionGridHeaderComponent extends GridHeaderComponent {
       label: component.label,
       key: path,
       sort: sort,
-      component: component ? Components.create(component, null, null, true) as ComponentInstance : undefined,
+      component: component ? Components.create(component, null, null) as ComponentInstance : undefined,
     };
   }
   // Set headers from components in case if columns are not provided

diff --git a/projects/angular-formio/package.json b/projects/angular-formio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formio/angular",
-  "version": "7.5.0-rc.1",
+  "version": "8.0.0-rc.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/formio/angular-formio"
@@ -25,10 +25,10 @@
     "node": ">=6.0.0"
   },
   "peerDependencies": {
-    "@angular/core": "^16.0.0 || ^17.0.0",
-    "@angular/common": "^16.0.0 || ^17.0.0",
-    "@angular/elements": "^16.0.0 || ^17.0.0",
-    "@formio/js": "^5.0.0-rc.38",
+    "@angular/core": "^16.0.0 || ^17.0.0 || ^18.0.0",
+    "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0",
+    "@angular/elements": "^16.0.0 || ^17.0.0 || ^18.0.0",
+    "@formio/js": "^5.0.0-rc.54",
     "zone.js": "~0.13.0 || ~0.14.0",
     "lodash": "^4.17.20",
     "ngx-bootstrap": "^10.0.0 || ^11.0.0 || ^12.0.0",

diff --git a/projects/angular-formio/resource/src/resource.service.ts b/projects/angular-formio/resource/src/resource.service.ts
@@ -85,8 +85,10 @@ export class FormioResourceService {
   }
 
   init(route: ActivatedRoute) {
-    const resourceId = route.snapshot.params['id'];
-    if (resourceId && (resourceId === this.resourceId)) {
+    const snapshot = route.snapshot;
+    const reset = snapshot.queryParams?.hasOwnProperty('reset') ? snapshot.queryParams.reset : false;
+    const resourceId = snapshot.params['id'];
+    if (resourceId && (resourceId === this.resourceId) && !reset) {
       return this.ready;
     }
 

diff --git a/projects/angular-formio/src/components/formioreport/formioreport.component.html b/projects/angular-formio/src/components/formioreport/formioreport.component.html
@@ -1,6 +1,6 @@
 <div role="form" [attr.aria-label]="label">
-  <div *ngIf="isLoading && !hideLoading" style="position:relative;height:200px">
-    <formio-loader [isLoading]="isLoading"></formio-loader>
+  <div *ngIf="isReportLoading && !hideLoading" style="position:relative;height:200px">
+    <formio-loader [isLoading]="isReportLoading"></formio-loader>
   </div>
   <formio-alerts *ngIf="this.options.alertsPosition === AlertsPosition.top || this.options.alertsPosition === AlertsPosition.both" (focusComponent)="focusOnComponet($event)" [alerts]="alerts"></formio-alerts>
   <div #report></div>

diff --git a/projects/angular-formio/src/components/formioreport/formioreport.component.ts b/projects/angular-formio/src/components/formioreport/formioreport.component.ts
@@ -17,14 +17,16 @@ export class FormioReportComponent extends FormioComponent implements OnInit, On
   @Output() fetchDataError = new EventEmitter<any>();
   @ViewChild('report', { static: true }) declare formioElement?: ElementRef<any>;
 
+  public isReportLoading: boolean;
+
   setFormFromSrc() {
     this.service.loadSubmission({ params: { live: 1 } }).subscribe(
       (report: FormioReport) => {
         this.report = report;
         if (report && report.data) {
           this.ngZone.runOutsideAngular(() => {
             this.setForm({ components: [], report });
-            this.isLoading = false;
+            this.isReportLoading = false;
           });
         }
       },
@@ -42,7 +44,7 @@ export class FormioReportComponent extends FormioComponent implements OnInit, On
     if (changes.report && changes.report.currentValue) {
       this.ngZone.runOutsideAngular(() => {
         this.setForm({ report: changes.report.currentValue, components: [] });
-        this.isLoading = false;
+        this.isReportLoading = false;
       });
     }
   }

diff --git a/projects/angular-formio/src/core.ts b/projects/angular-formio/src/core.ts
@@ -14,12 +14,6 @@ export * from './components/loader/formio.loader.component';
 export * from './components/alerts/formio.alerts';
 export * from './components/alerts/formio.alerts.component';
 export { FormioModule } from './formio.module';
-export {
-  Formio,
-  Utils as FormioUtils,
-  Templates,
-  Components,
-  ComponentSchema,
-  ExtendedComponentSchema,
-  ElementInfo
-} from '@formio/js';
+export { ComponentSchema, ExtendedComponentSchema, ElementInfo } from '@formio/deprecated-types';
+export { Utils as FormioUtils } from '@formio/js';
+export { Formio } from '@formio/js';
diff --git a/projects/angular-formio/src/formio.common.ts b/projects/angular-formio/src/formio.common.ts
@@ -1,6 +1,5 @@
-import { ExtendedComponentSchema, ValidateOptions } from '@formio/js';
+import { ExtendedComponentSchema, ValidateOptions } from '@formio/deprecated-types';
 import { AlertsPosition } from './types/alerts-position';
-export { ConditionalOptions, ValidateOptions } from '@formio/js/sdk';
 
 export interface ComponentOptions<T = any, V extends ValidateOptions = ValidateOptions> extends ExtendedComponentSchema<T> {
   validate?: V;

diff --git a/projects/angular-formio/src/formio.config.ts b/projects/angular-formio/src/formio.config.ts
@@ -4,6 +4,7 @@ import { Formio } from '@formio/js';
 
 @Injectable()
 export class FormioAppConfig {
+  [x: string]: any;
   appUrl = '';
   apiUrl = '';
   icons?: string;

diff --git a/projects/angular-formio/src/formio.service.ts b/projects/angular-formio/src/formio.service.ts
@@ -1,6 +1,6 @@
 import { Observable, Observer } from 'rxjs';
 import { FormioForm } from './formio.common';
-import { Formio } from '@formio/js/sdk';
+import { FormioCore as Formio } from '@formio/js';
 
 export class FormioService {
   public formio: any;

diff --git a/tsconfig.json b/tsconfig.json
@@ -11,6 +11,7 @@
     "importHelpers": true,
     "target": "es2020",
     "module": "es2020",
+    "skipLibCheck": true,
     "lib": [
       "es2018",
       "dom"