chore(demo): update code for correct work

.gitignore

@@ -45,3 +45,5 @@ cypress/videos*
 cypress/screenshots
 cypress/videos
 cypress/reports
+
+.angular

.prettierignore

@@ -2,3 +2,4 @@
 
 /dist
 /coverage
+.angular

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
-    "workbench.colorCustomizations": {
-        "activityBar.background": "#093517",
-        "titleBar.activeBackground": "#0C4A20",
-        "titleBar.activeForeground": "#F3FDF6"
-    }
-}
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#093517",
+    "titleBar.activeBackground": "#0C4A20",
+    "titleBar.activeForeground": "#F3FDF6"
+  }
+}

README.md

@@ -4,7 +4,7 @@
 [![npm version](https://badge.fury.io/js/ngx-dynamic-form-builder.svg)](https://badge.fury.io/js/ngx-dynamic-form-builder)
 [![monthly downloads](https://badgen.net/npm/dm/ngx-dynamic-form-builder)](https://www.npmjs.com/package/ngx-dynamic-form-builder)
 
-[FormBuilder](https://angular.io/api/forms/FormBuilder) + [class-transformer-global-storage](https://github.com/petrzjunior/class-transformer) + [class-validator-multi-lang](https://github.com/endykaufman/class-validator-multi-lang) = dynamic form group builder for [Angular12+](https://angular.io)
+[FormBuilder](https://angular.io/api/forms/FormBuilder) + [class-transformer-global-storage](https://github.com/petrzjunior/class-transformer) + [class-validator-multi-lang](https://github.com/endykaufman/class-validator-multi-lang) = dynamic form group builder for [Angular](https://angular.io)
 
 ## Installation
 

apps/debug/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

apps/debug/karma.conf.js

@@ -0,0 +1,41 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma'),
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true, // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../coverage/debug'),
+      subdir: '.',
+      reporters: [{ type: 'html' }, { type: 'text-summary' }],
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true,
+  });
+};

apps/debug/project.json

@@ -85,15 +85,12 @@
     "lint": {
       "executor": "@nrwl/linter:eslint",
       "options": {
-        "lintFilePatterns": [
-          "apps/debug/src/**/*.ts",
-          "apps/debug/src/**/*.html"
-        ]
+        "lintFilePatterns": ["apps/debug/**/*.ts", "apps/debug/**/*.html"]
       }
     },
     "test": {
       "executor": "@nrwl/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/apps/debug"],
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
         "jestConfig": "apps/debug/jest.config.ts",
         "passWithNoTests": true

apps/debug/src/assets/i18n/en.json

@@ -1,3 +1,3 @@
 {
-  "must include word \"dep\" (async validate)": "must include word \"dep\" (async validate)"
-}
+    "must include word \"dep\" (async validate)": "must include word \"dep\" (async validate)"
+}

apps/debug/src/assets/i18n/en.po

@@ -5,8 +5,6 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2022-02-09T14:15:40.891Z\n"
-"PO-Revision-Date: 2022-02-09T14:15:40.891Z\n"
 
 msgid "must include word \"dep\" (async validate)"
 msgstr "must include word \"dep\" (async validate)"

apps/debug/src/assets/i18n/ru.json

@@ -1,3 +1,3 @@
 {
-  "must include word \"dep\" (async validate)": ""
-}
+    "must include word \"dep\" (async validate)": ""
+}

apps/debug/src/assets/i18n/ru.po

@@ -6,8 +6,6 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && "
 "n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2)\n"
-"POT-Creation-Date: 2022-08-05T08:35:45.296Z\n"
-"PO-Revision-Date: 2022-08-05T08:35:45.296Z\n"
 
 msgid "must include word \"dep\" (async validate)"
 msgstr ""

apps/debug/src/assets/i18n/template.pot

@@ -5,8 +5,6 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2022-02-09T14:15:40.891Z\n"
-"PO-Revision-Date: 2022-02-09T14:15:40.891Z\n"
 
 msgid "must include word \"dep\" (async validate)"
 msgstr "must include word \"dep\" (async validate)"

apps/debug/tsconfig.app.json

@@ -2,11 +2,9 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": ["node"],
-    "target": "ES2022",
-    "useDefineForClassFields": false
+    "types": []
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
   "include": ["src/**/*.d.ts"],
-  "exclude": ["**/*.test.ts", "**/*.spec.ts", "jest.config.ts"]
+  "exclude": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts"]
 }

apps/debug/tsconfig.json

@@ -14,15 +14,17 @@
     }
   ],
   "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "target": "es2020"
+    "noFallthroughCasesInSwitch": true
   },
   "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true

apps/debug/tsconfig.spec.json

@@ -6,5 +6,5 @@
     "types": ["jest", "node"]
   },
   "files": ["src/test-setup.ts"],
-  "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts", "jest.config.ts"]
+  "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
 }

apps/demo/project.json

@@ -11,7 +11,14 @@
       "options": {
         "allowedCommonJsDependencies": [
           "class-validator-multi-lang",
-          "validator"
+          "validator",
+          "lodash.set",
+          "lodash.mergewith",
+          "lodash.clonedeep",
+          "lodash.get",
+          "@ngneat/transloco-keys-manager/marker",
+          "@ngneat/transloco",
+          "moment"
         ],
         "outputPath": "dist/apps/demo",
         "index": "apps/demo/src/index.html",

apps/demo/src/app/app.component.spec.ts

@@ -1,38 +1,27 @@
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 describe('AppComponent', () => {
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        declarations: [AppComponent],
-      }).compileComponents();
-    })
-  );
-  it(
-    'should create the app',
-    waitForAsync(() => {
-      const fixture = TestBed.createComponent(AppComponent);
-      const app = fixture.debugElement.componentInstance;
-      expect(app).toBeTruthy();
-    })
-  );
-  it(
-    `should have as title 'app'`,
-    waitForAsync(() => {
-      const fixture = TestBed.createComponent(AppComponent);
-      const app = fixture.debugElement.componentInstance;
-      expect(app.title).toEqual('app');
-    })
-  );
-  it(
-    'should render title in a h1 tag',
-    waitForAsync(() => {
-      const fixture = TestBed.createComponent(AppComponent);
-      fixture.detectChanges();
-      const compiled = fixture.debugElement.nativeElement;
-      expect(compiled.querySelector('h1').textContent).toContain(
-        'Welcome to app!'
-      );
-    })
-  );
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [AppComponent],
+    }).compileComponents();
+  }));
+  it('should create the app', waitForAsync(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+  it(`should have as title 'app'`, waitForAsync(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app');
+  }));
+  it('should render title in a h1 tag', waitForAsync(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain(
+      'Welcome to app!'
+    );
+  }));
 });

apps/demo/src/app/app.module.ts

@@ -40,7 +40,6 @@ import { TranslocoRootModule } from './transloco/transloco-root.module';
     RouterModule.forRoot(AppRoutes, {
       preloadingStrategy: PreloadAllModules,
       initialNavigation: 'enabledBlocking',
-      relativeLinkResolution: 'legacy',
     }),
     ServiceWorkerModule.register('ngsw-worker.js', {
       enabled: environment.production,

apps/demo/src/app/others/docs-example/docs-example.component.html

@@ -6,22 +6,22 @@
     <button
       mat-button
       (click)="switchActive('code')"
-      matTooltip="{{ view?.code?.tooltip }}"
+      matTooltip="{{ view.code.tooltip }}"
     >
       <mat-icon>code</mat-icon>
     </button>
     <button
       mat-button
       (click)="switchActive('debug')"
-      matTooltip="{{ view?.debug?.tooltip }}"
+      matTooltip="{{ view.debug.tooltip }}"
     >
       <mat-icon>bug_report</mat-icon>
     </button>
     <button
       *ngIf="launch"
       mat-button
       (click)="openLocation()"
-      matTooltip="{{ launch?.tooltip }}"
+      matTooltip="{{ launch.tooltip }}"
     >
       <mat-icon>launch</mat-icon>
     </button>
@@ -31,13 +31,13 @@
   <div class="ngx-docs-example-source" *ngIf="view?.code?.active === true">
     <mat-tab-group>
       <mat-tab label="HTML" *ngIf="html">
-        <div [innerHTML]="html | language: 'html' | markdown"></div>
+        <div [innerHTML]="html | language : 'html' | markdown"></div>
       </mat-tab>
       <mat-tab label="TS" *ngIf="ts">
-        <div [innerHTML]="ts | language: 'js' | markdown"></div>
+        <div [innerHTML]="ts | language : 'js' | markdown"></div>
       </mat-tab>
       <mat-tab label="CSS" *ngIf="css">
-        <div [innerHTML]="css | language: 'css' | markdown"></div>
+        <div [innerHTML]="css | language : 'css' | markdown"></div>
       </mat-tab>
     </mat-tab-group>
   </div>

apps/demo/src/app/others/docs-example/docs-example.scss

@@ -28,7 +28,7 @@
     }
   }
   > .ngx-docs-example-source {
-    .mat-tab-body {
+    .mat-mdc-tab-body {
       display: block;
       width: 100%;
       padding: 0;

apps/demo/src/app/others/message-box/message-box.component.scss

@@ -1,10 +1,10 @@
 .message-box {
   &.info-modal {
-    .mat-dialog-title {
+    .mat-mdc-dialog-title {
     }
   }
   &.error-modal {
-    .mat-dialog-title {
+    .mat-mdc-dialog-title {
       color: red;
     }
   }

apps/demo/src/app/others/navbar/navbar.component.html

@@ -71,7 +71,7 @@
       *ngIf="!item.redirectTo"
       [routerLink]="[item.name]"
       mat-button
-      [class.active]="router?.isActive(item.url, true)"
+      [class.active]="router.isActive(item.url, true)"
     >
       <ng-container
         *ngTemplateOutlet="
@@ -99,7 +99,7 @@
       *ngIf="!item.redirectTo"
       [routerLink]="[item.name]"
       mat-icon-button
-      [class.active]="router?.isActive(item.url, true)"
+      [class.active]="router.isActive(item.url, true)"
     >
       <ng-container
         *ngTemplateOutlet="
@@ -128,7 +128,7 @@
     *ngIf="!item.redirectTo"
     [routerLink]="[item.name]"
     mat-menu-item
-    [class.active]="router?.isActive(item.url, true)"
+    [class.active]="router.isActive(item.url, true)"
   >
     <ng-container
       *ngTemplateOutlet="menuItemContent; context: { item: item }"

apps/demo/src/app/others/source-tabs/source-tabs.component.html

@@ -15,7 +15,7 @@
     <mat-tab-group>
       <mat-tab [label]="file.name" *ngFor="let file of files">
         <div
-          [innerHTML]="file.content | language: file.language | markdown"
+          [innerHTML]="file.content | language : file.language | markdown"
         ></div>
       </mat-tab>
     </mat-tab-group>

apps/demo/src/app/pages/project-page/project-page.component.html

@@ -7,8 +7,8 @@
   <ngx-docs-example
     title="FormArray and Steps: project panel"
     *ngIf="activatedStep$ | async as activatedStep"
-    [html]="sources[activatedStep]?.html"
-    [ts]="sources[activatedStep]?.ts"
+    [html]="sources[activatedStep].html"
+    [ts]="sources[activatedStep].ts"
     fxFlex.gt-sm="50"
     #doc
   >