V18.x.x

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,8 +7,24 @@ assignees: ''
 
 ---
 
+**Before logging an issue, make sure that you have updated ng-formworks to the latest patch level for the corresponding version of Angular that you are using, then test again to see if the issue persists**
+
 **Describe the bug**
-which template:
+which version of ng-formworks:
+
+* [ ] 15.x.x
+* [ ] 16.x.x
+* [ ] 17.x.x
+* [ ] 18.x.x
+
+which version of Angular:
+
+* [ ] 15
+* [ ] 16
+* [ ] 17
+* [ ] 18
+
+which framework:
 
 * [ ] MaterialDesignFrameworkModule — Material Design
 * [ ] Bootstrap3FrameworkModule — Bootstrap 3
@@ -25,6 +41,35 @@ Steps to reproduce the behavior:
 
 1. ...
 
+
+**Share the form input (if applicable)**
+1. Navigate to the appropriate demo page corresponding to the version
+of ng-formworks that you are using.
+
+    | ng-formworks | 
+    |--|
+    | [version 15.x.x][demo_ver_15] | 
+    | [version 16.x.x][demo_ver_16] |  
+    | [version 17.x.x][demo_ver_17] | 
+    | [version 18.x.x][demo_ver_18] | 
+
+2. From the Dropdowns section 'Selected Framework and Options',
+    - Select the Framework related to your issue
+    - then select the theme(if applicable)
+    - check/uncheck any other options(if applicable)
+
+3. If applicable change the Current example.
+
+4. Enter the Form (if part of the issue) into the 'Input JSON Schema and Form Layout' field,
+making sure that the JSON data is correctly closed. If all is correct there should be no 'SyntaxError' or similar messages displaying and the 'Generated Form' section
+should output a form.
+
+5. Populate the Generated Form (if applicable to the issue)
+
+6. Click the 'Share form URL' button, this should copy the URL of the form to your clipboard (you may have to give the browser permission depending on your OS/Browser).
+
+6. Paste the link in this message.
+
 **Expected behavior**
 A clear and concise description of what you expected to happen.
 
@@ -57,3 +102,9 @@ Add any other context about the problem here.
 
 **Possible Implementation**
 <!--- Not obligatory, but suggest an idea for implementing addition or change -->
+
+
+[demo_ver_15]:https://zahmo.github.io/ng-formworks/15
+[demo_ver_16]:https://zahmo.github.io/ng-formworks/16
+[demo_ver_17]:https://zahmo.github.io/ng-formworks/17
+[demo_ver_18]:https://zahmo.github.io/ng-formworks/18

.github/workflows/ci.yml

@@ -32,8 +32,11 @@ jobs:
     - name: Test libs
       run: |
         npm run test:core -- --code-coverage --no-watch --no-progress --browsers=ChromeHeadlessCI
+        npm run test:cssframework -- --code-coverage --no-watch --no-progress --browsers=ChromeHeadlessCI
         npm run test:bs3 -- --code-coverage --no-watch --no-progress --browsers=ChromeHeadlessCI
         npm run test:bs4 -- --code-coverage --no-watch --no-progress --browsers=ChromeHeadlessCI
+        npm run test:bs5 -- --code-coverage --no-watch --no-progress --browsers=ChromeHeadlessCI
+        npm run test:daisyui -- --code-coverage --no-watch --no-progress --browsers=ChromeHeadlessCI
         npm run test:material -- --code-coverage --no-watch --no-progress --browsers=ChromeHeadlessCI
     - name: Publish code coverage
       run: npm run publish:coverage

README.md

@@ -11,7 +11,7 @@ ng-formworks targets angular 15+ and also adds extra frameworks and theming supp
 <p  align="center">
 
 
-<a  href="https://angular.io/"><img  src="https://img.shields.io/badge/angular-15,_16,_17-red.svg?logo=Angular&logoColor=red&labelColor=white&style=plastic"  alt="Angular Versions"></a>
+<a  href="https://angular.io/"><img  src="https://img.shields.io/badge/angular-15,_16,_17,_18-red.svg?logo=Angular&logoColor=red&labelColor=white&style=plastic"  alt="Angular Versions"></a>
 <a  href="https://github.com/zahmo/ng-formworks/actions?query=workflow%3ACI+branch%3Amain"><img  src="https://github.com/zahmo/ng-formworks/workflows/CI/badge.svg"  alt="CI Status"></a> <a  href="https://www.npmjs.com/package/@ng-formworks/core"><img  src="https://img.shields.io/npm/dm/@ng-formworks/core.svg?style=plastic"  alt="npm number of downloads"></a><a  href="https://github.com/zahmo/ng-formworks/blob/master/LICENSE"><img  src="https://img.shields.io/github/license/zahmo/ng-formworks.svg?style=social"  alt="LICENSE IMT"></a><a  href="https://app.netlify.com/sites/ng-formworks/deploys"><img  src="https://api.netlify.com/api/v1/badges/6c5b5a1d-db7c-4d0e-8ac1-a4840d8812f0/deploy-status"  alt="Netlify Status"></a>
 
 
@@ -37,6 +37,7 @@ A [JSON Schema](http://json-schema.org) Form builder for Angular, similar to, an
 | 15.x.x |15.x.x|
 | 16.x.x |16.x.x|
 | 17.x.x |17.x.x|
+| 18.x.x |18.x.x|
 
 
 ## Packages

angular.json

@@ -11,12 +11,15 @@
             "schematics": {},
             "architect": {
                 "build": {
-                    "builder": "@angular-devkit/build-angular:browser",
+                    "builder": "@angular-devkit/build-angular:application",
                     "options": {
-                        "outputPath": "dist/demo",
+                        "outputPath": {
+                            "base": "dist/demo"
+                        },
                         "index": "demo/index.html",
-                        "main": "demo/main.ts",
-                        "polyfills": "demo/polyfills.ts",
+                        "polyfills": [
+                            "demo/polyfills.ts"
+                        ],
                         "tsConfig": "demo/tsconfig.app.json",
                         "assets": [
                             "demo/favicon.ico",
@@ -26,12 +29,11 @@
                             "demo/styles.scss"
                         ],
                         "scripts": [],
-                        "vendorChunk": true,
                         "extractLicenses": false,
-                        "buildOptimizer": false,
                         "sourceMap": true,
                         "optimization": false,
-                        "namedChunks": true
+                        "namedChunks": true,
+                        "browser": "demo/main.ts"
                     },
                     "configurations": {
                         "production": {
@@ -47,9 +49,7 @@
                             "outputHashing": "all",
                             "sourceMap": false,
                             "namedChunks": false,
-                            "extractLicenses": true,
-                            "vendorChunk": false,
-                            "buildOptimizer": true
+                            "extractLicenses": true
                         }
                     },
                     "defaultConfiguration": ""

demo/app/demo.component.html

@@ -1,10 +1,10 @@
 <div class="demo-page-header">
     <mat-toolbar class="mat-elevation-z4 mat-medium" color="primary">
-        <span class="wraptext">Angular JSON Schema Form — Demonstration Playground</span>
+        <span class="wraptext">ng-formworks — Demo & Playground</span>
         <span class="flex-spacer"></span>
 
         <button mat-raised-button color="primary" (click)="copyUrlToClipBoard($event)">
-            <span class="menu-label wraptext">Share form URL</span>
+            <span class="menu-label wraptext demo-sm-hide">Share form URL</span>
             <mat-icon>share</mat-icon> 
         </button>
 
@@ -61,7 +61,7 @@
         </mat-menu>
     </div>
 </div>
-<div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-sm="column" fxLayoutAlign.lt-sm="flex-start center">
+<div fxLayout="row" fxLayoutAlign="space-around start" fxLayout_lt-sm="column" fxLayoutAlign.lt-sm="flex-start center">
 
     <mat-card appearance="outlined" fxFlex="0 0 calc(50% - 12px)">
         <h4 class="default-cursor" (click)="toggleVisible('options')">

demo/app/demo.component.ts

@@ -28,15 +28,7 @@ import { Examples } from './example-schemas.model';
   styles:[
     `.flex-spacer {
       flex: 1 1 auto;
-    }`,
-    `
-    .wraptext{
-        display: inline-block; /* Ensures the span behaves like a block element in terms of wrapping */
-        word-wrap: break-word; /* For older browsers */
-        overflow-wrap: break-word; /* For modern browsers */
-        white-space: break-spaces
-    }
-    `
+    }`
   ]
 })
 export class DemoComponent implements OnInit,AfterViewInit {
@@ -380,7 +372,10 @@ b64ToUtf8(b64) {
         // parse as JavaScript instead to include functions
         const newFormObject: any = null;
         /* tslint:disable */
-        eval('newFormObject = ' + newFormString);
+        //commented out to use indirect eval
+        //see https://esbuild.github.io/link/direct-eval
+        //eval('newFormObject = ' + newFormString);
+        (0, eval)('newFormObject = ' + newFormString)
         /* tslint:enable */
         this.jsonFormObject = newFormObject;
         this.jsonFormValid = true;
@@ -419,13 +414,13 @@ b64ToUtf8(b64) {
     }
   }
 
-  appendUrlParameters(params) {
+appendUrlParameters(params) {
     // Get the current URL
     const currentUrl = new URL(window.location.href);
 
-    // Iterate over the params object and append each parameter
+    // Iterate over the params object and set each parameter
     for (const [key, value] of Object.entries<string>(params)) {
-        currentUrl.searchParams.append(key, value);
+        currentUrl.searchParams.set(key, value);
     }
 
     return currentUrl;

demo/app/demo.module.ts

@@ -1,4 +1,4 @@
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -31,28 +31,22 @@ import { routes } from './demo.routes';
 
 
 
-@NgModule({
-  declarations: [AceEditorDirective, DemoComponent, DemoRootComponent],
-  imports: [
-    BrowserModule, BrowserAnimationsModule, FormsModule,
-    HttpClientModule, MatButtonModule, MatCardModule, MatCheckboxModule,
-    MatIconModule, MatMenuModule, MatSelectModule, MatToolbarModule,
-    MatDialogModule,
-    MatSnackBarModule,
-    RouterModule.forRoot(routes, {}),
-    Bootstrap4FrameworkModule,
-    Bootstrap3FrameworkModule,
-    MaterialDesignFrameworkModule,
-    DaisyUIFrameworkModule,
-    Bootstrap5FrameworkModule,
-    CssFrameworkModule,
-    JsonSchemaFormModule
-  ],
-  providers:[{ provide: REMOVE_STYLES_ON_COMPONENT_DESTROY, useValue: true }
-    //uncomment to disable daisyui class name prefixing
-     ,{ provide: DUIOPTIONS, useValue: {classPrefix:environment.cssClassPrefix} }
-  ],
-  bootstrap: [DemoRootComponent]
-})
+@NgModule({ declarations: [AceEditorDirective, DemoComponent, DemoRootComponent],
+    bootstrap: [DemoRootComponent], imports: [BrowserModule, BrowserAnimationsModule, FormsModule,
+        MatButtonModule, MatCardModule, MatCheckboxModule,
+        MatIconModule, MatMenuModule, MatSelectModule, MatToolbarModule,
+        MatDialogModule,
+        MatSnackBarModule,
+        RouterModule.forRoot(routes, {}),
+        Bootstrap4FrameworkModule,
+        Bootstrap3FrameworkModule,
+        MaterialDesignFrameworkModule,
+        DaisyUIFrameworkModule,
+        Bootstrap5FrameworkModule,
+        CssFrameworkModule,
+        JsonSchemaFormModule], providers: [{ provide: REMOVE_STYLES_ON_COMPONENT_DESTROY, useValue: true }
+        //uncomment to disable daisyui class name prefixing
+        ,
+        { provide: DUIOPTIONS, useValue: { classPrefix: environment.cssClassPrefix } }, provideHttpClient(withInterceptorsFromDi())] })
 
 export class DemoModule { }

demo/environments/environment.prod.ts

@@ -1,3 +1,3 @@
 
-    export const environment ={"production":true,"version":"17.3.0","angularVersion":"17.3.12","materialVersion":"17.3.10","cssClassPrefix":true}
+    export const environment ={"production":true,"version":"18.0.0","angularVersion":"18.2.7","materialVersion":"18.2.7","cssClassPrefix":true}
 

demo/environments/environment.ts

@@ -1,3 +1,3 @@
 
-    export const environment ={"production":false,"version":"17.3.0","angularVersion":"17.3.12","materialVersion":"17.3.10","cssClassPrefix":true}
+    export const environment ={"production":false,"version":"18.0.0","angularVersion":"18.2.7","materialVersion":"18.2.7","cssClassPrefix":true}
 

demo/styles.scss

@@ -1,11 +1,9 @@
 // * { border: 1px solid red !important; }
 @use '@angular/material' as mat;
 @include mat.core();
-$demo-app-primary: mat.define-palette(mat.$blue-palette);
-$demo-app-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
-$demo-app-warn: mat.define-palette(mat.$red-palette);
-$demo-app-theme: mat.define-light-theme($demo-app-primary, $demo-app-accent, $demo-app-warn);
-@include mat.all-component-themes($demo-app-theme);
+//use M3 theming
+$demo-app-theme:mat.define-theme(( color: ( theme-type: light, primary: mat.$azure-palette, tertiary: mat.$blue-palette), density: ( scale: 0)));
+$demo-button-theme:mat.define-theme(( color: ( theme-type: light, primary: mat.$orange-palette, tertiary: mat.$yellow-palette), density: ( scale: 0)));
 $font-family: 'Roboto',
 'Noto',
 'Helvetica Neue',
@@ -31,10 +29,13 @@ body {
     height: 100%;
     margin: 0;
     padding: 0;
+    @include mat.all-component-themes($demo-app-theme);
+    @include mat.button-theme($demo-button-theme);
+    --mat-toolbar-container-background-color: #{mat.get-theme-color($demo-app-theme, primary, 80)};
 }
 
 .demo-page-header {
-    background-color: mat.get-color-from-palette($demo-app-primary, lighter);
+    background-color: mat.get-theme-color($demo-app-theme, surface);
     margin-bottom: 12px;
     .header-content {
         font-family: $font-family;
@@ -99,28 +100,29 @@ body {
 }
 
 
-/*
-// Define a dark theme
-$dark-theme: mat.define-dark-theme(( color: ( primary: mat.define-palette(mat.$pink-palette), accent: mat.define-palette(mat.$blue-grey-palette), ), // Only include `typography` and `density` in the default dark theme.
-typography: mat.define-typography-config(), density: 0, ));
-// Apply the dark theme by default
-.dark-theme {
-    @include mat.core-theme($dark-theme);
-    @include mat.button-theme($dark-theme);
-}
+/* Media query to hide text on smaller displays */
 
-// Define a light theme
-$light-theme: mat.define-light-theme(( color: ( primary: mat.define-palette(mat.$indigo-palette), accent: mat.define-palette(mat.$pink-palette), ), ));
-.light-theme {
-    @include mat.core-theme($light-theme);
-    @include mat.button-theme($light-theme);
+.wraptext {
+    display: inline-block;
+    /* Ensures the span behaves like a block element in terms of wrapping */
+    word-wrap: break-word;
+    /* For older browsers */
+    overflow-wrap: break-word;
+    /* For modern browsers */
+    white-space: break-spaces
+}
+
+@media (max-width: 600px) {
+    /* Adjust the width as needed */
+    .demo-sm-hide {
+        display: none;
+        /* Hide the text */
+    }
 }
-*/
 
 .demo-theme {
-    @include mat.core-theme($demo-app-theme);
-    //@include mat.all-component-themes($demo-app-theme);
-    @include mat.button-color($demo-app-theme);
+    @include mat.all-component-themes($demo-app-theme);
+    @include mat.button-theme($demo-button-theme);
 }
 
 @import '../projects/ng-formworks-material/src/lib/material-design-themes.scss';