feat: upgrade to angular 15

.github/workflows/main.yml

@@ -10,14 +10,14 @@ jobs:
     # Machine environment:
     # https://help.github.com/en/articles/software-in-virtual-environments-for-github-actions#ubuntu-1804-lts
     # We specify the Node.js version manually below, and use versioned Chrome from Puppeteer.
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-20.04
 
     steps:
-      - uses: actions/checkout@v1
-      - name: Use Node.js 16.10.0
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - name: Use Node.js 18.10.0
+        uses: actions/setup-node@v3
         with:
-          node-version: 16.10.0
+          node-version: 18.10.0
       - name: Install dependencies
         run: yarn --frozen-lockfile --non-interactive --no-progress
       - name: Lint Demo
@@ -30,25 +30,25 @@ jobs:
         run: yarn lib:test:ci
       - name: Build Lib
         run: yarn lib:build:prod
-      - name: Cypress run
-        uses: cypress-io/github-action@v4
-        with:
-          browser: chrome
-          start: yarn demo:start --port 4765
-          wait-on: http://localhost:4765/
       - name: Copy built README & LICENCE into dist
         run: cp README.md LICENSE dist/ngx-sub-form
       - name: Build Demo
-        if: contains('refs/heads/master', github.ref)
         run: yarn run demo:build:prod --progress=false --base-href "https://cloudnc.github.io/ngx-sub-form/"
+      - name: Cypress run
+        uses: cypress-io/github-action@v5
+        with:
+          browser: chrome
+          start: yarn start-e2e-file-server
+          wait-on: http://localhost:4765/
+          wait-on-timeout: 500
       - name: Deploy
         if: contains('refs/heads/master', github.ref)
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./dist/ngx-sub-form-demo
       - name: Release
-        if: contains('refs/heads/master refs/heads/next', github.ref)
+        if: contains('refs/heads/master refs/heads/next refs/heads/feat-upgrade-angular-15', github.ref)
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.nvmrc

@@ -1 +1 @@
-v16.10.0
+v18.10.0

.releaserc

@@ -1,6 +1,11 @@
 {
   "pkgRoot": "dist/ngx-sub-form",
   "branches": [
-    "master"
+    "master",
+    {
+      "name": "feat-upgrade-angular-15",
+      "channel": "feat-upgrade-angular-15",
+      "prerelease": true
+    }
   ]
 }

README.md

@@ -49,6 +49,7 @@ npm i ngx-sub-form
 | `13.x`               | `5.2.0` (non breaking but new API available as well) |
 | `14.x`               | `6.0.0` (Angular 14 upgrade only)                    |
 | `14.x`               | `7.0.0` (deprecated API is now removed)              |
+| `15.x`               | `8.0.0`                                              |
 
 # API
 

angular.json

@@ -136,5 +136,13 @@
   },
   "cli": {
     "schematicCollections": ["@angular-eslint/schematics"]
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
   }
 }

cypress/e2e/app.cy.ts

@@ -2,7 +2,7 @@ import { extractErrors, FormElement, hardcodedElementsToTestList } from '../../c
 import { DOM, getFormList, getFormValue } from '../../cypress/helpers/dom.helper';
 import { DroidType } from '../../src/app/interfaces/droid.interface';
 import { ListingType, VehicleListing } from '../../src/app/interfaces/listing.interface';
-import { Spaceship, Speeder, VehicleType } from '../../src/app/interfaces/vehicle.interface';
+import { Spaceship, VehicleType } from '../../src/app/interfaces/vehicle.interface';
 import { hardCodedListings } from '../../src/app/services/listings.data';
 
 context(`EJawa demo`, () => {
@@ -314,21 +314,21 @@ context(`EJawa demo`, () => {
     DOM.list.elements.cy.eq(0).click();
 
     DOM.form.cy.within(() => {
-      cy.get(`mat-card`).within(() => {
+      cy.get(`[data-card-form]`).within(() => {
         cy.get(`input`).should('be.enabled');
-        cy.get(`mat-select`).should('not.have.class', 'mat-select-disabled');
-        cy.get(`mat-slide-toggle`).should('not.have.class', 'mat-disabled');
+        cy.get(`mat-select`).should('not.have.class', 'mat-mdc-select-disabled');
+        cy.get(`mat-slide-toggle .mdc-switch`).should('not.have.class', 'mdc-switch--disabled');
         cy.get(`button`).should('be.enabled');
       });
     });
 
     DOM.readonlyToggle.click();
 
     DOM.form.cy.within(() => {
-      cy.get(`mat-card`).within(() => {
+      cy.get(`[data-card-form]`).within(() => {
         cy.get(`input`).should('be.disabled');
-        cy.get(`mat-select`).should('have.class', 'mat-select-disabled');
-        cy.get(`mat-slide-toggle`).should('have.class', 'mat-disabled');
+        cy.get(`mat-select`).should('have.class', 'mat-mdc-select-disabled');
+        cy.get(`mat-slide-toggle .mdc-switch`).should('have.class', 'mdc-switch--disabled');
         cy.get(`button`).should('be.disabled');
       });
     });

cypress/helpers/dom.helper.ts

@@ -11,10 +11,10 @@ const getTextFromInput = (element: HTMLElement, tag: string): string =>
   Cypress.$(element).find(`*[data-${tag}]`).val() + '';
 
 const getSelectedOptionFromSelect = (element: HTMLElement, tag: string): string =>
-  Cypress.$(element).find(`*[data-${tag}] .mat-select-value-text`).text().trim();
+  Cypress.$(element).find(`*[data-${tag}] .mat-mdc-select-min-line`).text().trim();
 
 const getToggleValue = (element: HTMLElement, tag: string): boolean =>
-  Cypress.$(element).find(`*[data-${tag}]`).hasClass('mat-checked');
+  Cypress.$(element).find(`*[data-${tag}]`).hasClass('mat-mdc-slide-toggle-checked');
 
 const getCrewMembers = (element: HTMLElement): { firstName: string; lastName: string }[] =>
   Cypress.$(element)
@@ -74,7 +74,7 @@ export const DOM = {
           selectListingTypeByType: (type: ListingType) => {
             DOM.form.elements.selectListingType.click();
 
-            return cy.get(`*[data-select-listing-type-option]`).within(() => cy.contains(type).click());
+            return cy.contains(`*[data-select-listing-type-option]`, type).click();
           },
           get droidForm() {
             return {
@@ -87,7 +87,7 @@ export const DOM = {
               selectDroidTypeByType: (type: DroidType) => {
                 DOM.form.elements.droidForm.selectDroidType.click();
 
-                return cy.get(`*[data-select-droid-type-option]`).within(() => cy.contains(type).click());
+                return cy.contains(`*[data-select-droid-type-option]`, type).click();
               },
             };
           },
@@ -102,7 +102,7 @@ export const DOM = {
               selectVehicleTypeByType: (type: VehicleType) => {
                 DOM.form.elements.vehicleForm.selectVehicleType.click();
 
-                return cy.get(`*[data-select-vehicle-type-option]`).within(() => cy.contains(type).click());
+                return cy.contains(`*[data-select-vehicle-type-option]`, type).click();
               },
               get addCrewMemberButton() {
                 return cy.get(`*[data-btn-add-crew-member]`);

package.json

@@ -32,71 +32,73 @@
     "commit": "git add . && git-cz",
     "readme:build": "embedme README.md && yarn run prettier README.md --write",
     "readme:check": "yarn readme:build && ! git status | grep README.md || (echo 'You must commit build and commit changes to README.md!' && exit 1)",
-    "lint": "ng lint"
+    "lint": "ng lint",
+    "------------------------ CI ------------------------": "",
+    "start-e2e-file-server": "cp -r dist/ngx-sub-form-demo dist/ngx-sub-form-demo-e2e && sed -i 's/base href=\"https:\\/\\/cloudnc.github.io\\/ngx-sub-form\\/\"/base href=\"\\/\"/' dist/ngx-sub-form-demo-e2e/index.html && npx http-server --port 4765 ./dist/ngx-sub-form-demo-e2e"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "14.2.2",
-    "@angular/cdk": "14.0.6",
-    "@angular/common": "14.2.2",
-    "@angular/compiler": "14.2.2",
-    "@angular/core": "14.2.2",
-    "@angular/forms": "14.2.2",
-    "@angular/material": "14.0.6",
-    "@angular/platform-browser": "14.2.2",
-    "@angular/platform-browser-dynamic": "14.2.2",
-    "@angular/router": "14.2.2",
-    "@types/uuid": "8.3.4",
-    "commitizen": "4.2.4",
+    "@angular/animations": "15.0.3",
+    "@angular/cdk": "15.0.2",
+    "@angular/common": "15.0.3",
+    "@angular/compiler": "15.0.3",
+    "@angular/core": "15.0.3",
+    "@angular/forms": "15.0.3",
+    "@angular/material": "15.0.2",
+    "@angular/platform-browser": "15.0.3",
+    "@angular/platform-browser-dynamic": "15.0.3",
+    "@angular/router": "15.0.3",
+    "@types/uuid": "9.0.0",
+    "commitizen": "4.2.6",
     "core-js": "3.23.1",
     "fast-deep-equal": "3.1.3",
     "lodash-es": "4.17.21",
     "ngx-observable-lifecycle": "2.2.1",
-    "rxjs": "7.5.5",
-    "tslib": "2.4.0",
-    "uuid": "8.3.2",
+    "rxjs": "7.6.0",
+    "tslib": "2.4.1",
+    "uuid": "9.0.0",
     "zone.js": "0.11.6"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "14.2.3",
-    "@angular-eslint/builder": "14.1.1",
-    "@angular-eslint/eslint-plugin": "14.1.1",
-    "@angular-eslint/eslint-plugin-template": "14.1.1",
-    "@angular-eslint/schematics": "14.1.1",
-    "@angular-eslint/template-parser": "14.1.1",
-    "@angular/cli": "14.2.3",
-    "@angular/compiler-cli": "14.2.2",
-    "@angular/language-service": "14.2.2",
-    "@types/jasmine": "4.0.3",
+    "@angular-devkit/build-angular": "15.0.2",
+    "@angular-eslint/builder": "15.1.0",
+    "@angular-eslint/eslint-plugin": "15.1.0",
+    "@angular-eslint/eslint-plugin-template": "15.1.0",
+    "@angular-eslint/schematics": "15.1.0",
+    "@angular-eslint/template-parser": "15.1.0",
+    "@angular/cli": "15.0.2",
+    "@angular/compiler-cli": "15.0.2",
+    "@angular/language-service": "15.0.2",
+    "@types/jasmine": "4.3.1",
     "@types/jasminewd2": "2.0.10",
-    "@types/lodash": "4.14.182",
+    "@types/lodash": "4.14.191",
     "@types/lodash-es": "4.17.6",
-    "@types/node": "17.0.40",
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
-    "@typescript-eslint/parser": "^5.36.2",
-    "cypress": "10.1.0",
+    "@types/node": "18.11.11",
+    "@typescript-eslint/eslint-plugin": "5.45.1",
+    "@typescript-eslint/parser": "5.45.1",
+    "cypress": "12.0.2",
     "cz-conventional-changelog": "3.3.0",
-    "embedme": "1.22.0",
-    "eslint": "^8.23.0",
+    "embedme": "1.22.1",
+    "eslint": "8.29.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsdoc": "39.3.3",
+    "eslint-plugin-jsdoc": "39.6.4",
     "eslint-plugin-prefer-arrow": "1.2.3",
     "http-server-spa": "1.3.0",
-    "jasmine-core": "4.2.0",
+    "jasmine-core": "4.5.0",
     "jasmine-spec-reporter": "7.0.0",
-    "karma": "6.4.0",
+    "karma": "6.4.1",
     "karma-chrome-launcher": "3.1.1",
     "karma-coverage-istanbul-reporter": "3.0.3",
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.0.0",
-    "ng-packagr": "14.0.4",
+    "ng-packagr": "15.0.1",
     "prettier": "2.7.1",
-    "semantic-release": "19.0.3",
-    "ts-node": "10.8.1",
+    "semantic-release": "19.0.5",
+    "ts-node": "10.9.1",
     "tsconfig-paths-webpack-plugin": "3.5.2",
     "tsdef": "0.0.14",
-    "typescript": "4.7.4"
+    "typescript": "4.8.4"
   },
   "repository": {
     "type": "git",

projects/ngx-sub-form/package.json

@@ -7,11 +7,11 @@
   },
   "peerDependencies": {
     "fast-deep-equal": "^3.1.3",
-    "@angular/common": "^14.0.0",
-    "@angular/core": "^14.0.0",
-    "@angular/forms": "^14.0.0",
+    "@angular/common": "^15.0.0",
+    "@angular/core": "^15.0.0",
+    "@angular/forms": "^15.0.0",
     "ngx-observable-lifecycle": "^2.2.1",
-    "rxjs": "^7.5.5",
+    "rxjs": "^7.6.0",
     "tsdef": "0.0.14"
   },
   "keywords": [

projects/ngx-sub-form/src/lib/create-form.ts

@@ -37,28 +37,34 @@ import {
 } from './ngx-sub-form.types';
 import { isNullOrUndefined } from './shared/ngx-sub-form-utils';
 
-const optionsHaveInstructionsToCreateArrays = <ControlInterface, FormInterface>(
+const optionsHaveInstructionsToCreateArrays = <ControlInterface, FormInterface extends {}>(
   options: NgxFormOptions<ControlInterface, FormInterface> & Partial<NgxSubFormArrayOptions<FormInterface>>,
 ): options is NgxSubFormOptions<ControlInterface, FormInterface> & NgxSubFormArrayOptions<FormInterface> =>
   !!options.createFormArrayControl;
 
 // @todo find a better name
-const isRoot = <ControlInterface, FormInterface>(
+const isRoot = <ControlInterface, FormInterface extends {}>(
   options: any,
 ): options is NgxRootFormOptions<ControlInterface, FormInterface> => {
   const opt = options as NgxRootFormOptions<ControlInterface, FormInterface>;
   return opt.formType === FormType.ROOT;
 };
 
-export function createForm<ControlInterface, FormInterface = ControlInterface>(
+export function createForm<
+  ControlInterface,
+  FormInterface extends {} = ControlInterface extends {} ? ControlInterface : never,
+>(
   componentInstance: ControlValueAccessorComponentInstance,
   options: NgxRootFormOptions<ControlInterface, FormInterface>,
 ): NgxRootForm<ControlInterface, FormInterface>;
-export function createForm<ControlInterface, FormInterface = ControlInterface>(
+export function createForm<
+  ControlInterface,
+  FormInterface extends {} = ControlInterface extends {} ? ControlInterface : never,
+>(
   componentInstance: ControlValueAccessorComponentInstance,
   options: NgxSubFormOptions<ControlInterface, FormInterface>,
 ): NgxSubForm<ControlInterface, FormInterface>;
-export function createForm<ControlInterface, FormInterface>(
+export function createForm<ControlInterface, FormInterface extends {}>(
   componentInstance: ControlValueAccessorComponentInstance,
   options: NgxFormOptions<ControlInterface, FormInterface>,
 ): NgxSubForm<ControlInterface, FormInterface> {

projects/ngx-sub-form/src/lib/helpers.ts

@@ -5,6 +5,7 @@ import {
   UntypedFormGroup,
   ValidationErrors,
 } from '@angular/forms';
+import { cloneDeep } from 'lodash-es';
 import { ReplaySubject } from 'rxjs';
 import { Nilable } from 'tsdef';
 import {
@@ -20,7 +21,6 @@ import {
   OneOfControlsTypes,
   TypedFormGroup,
 } from './shared/ngx-sub-form-utils';
-import { cloneDeep } from 'lodash-es';
 
 /** @internal */
 export const patchClassInstance = (componentInstance: any, obj: Object) => {
@@ -63,7 +63,7 @@ export const getControlValueAccessorBindings = <ControlInterface>(
   };
 };
 
-export const getFormGroupErrors = <ControlInterface, FormInterface>(
+export const getFormGroupErrors = <ControlInterface, FormInterface extends {}>(
   formGroup: TypedFormGroup<FormInterface>,
 ): NewFormErrors<FormInterface> => {
   const formErrors: NewFormErrors<ControlInterface> = Object.entries<OneOfControlsTypes>(formGroup.controls).reduce<
@@ -114,7 +114,7 @@ interface FormArrayWrapper<FormInterface> {
   control: UntypedFormArray;
 }
 
-export function createFormDataFromOptions<ControlInterface, FormInterface>(
+export function createFormDataFromOptions<ControlInterface, FormInterface extends {}>(
   options: NgxSubFormOptions<ControlInterface, FormInterface>,
 ) {
   const formGroup: TypedFormGroup<FormInterface> = new UntypedFormGroup(