@ng-formworks/core 15.2.7

package/karma.conf.js

@@ -0,0 +1,46 @@
+// 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: {
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ajsf-core'),
+      reporters: [
+        {
+          type: 'html',
+        },
+        {
+          type: 'lcov',
+        },
+        {
+          type: 'text-summary',
+        },
+      ],
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    singleRun: false,
+    browsers: ['Chrome', 'ChromeHeadlessCI'],
+    customLaunchers: {
+      ChromeHeadlessCI: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox'],
+      },
+    },
+  });
+};

package/ng-package.json

@@ -0,0 +1,11 @@
+{
+    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../dist/@ng-formworks/core",
+    "lib": {
+        "entryFile": "src/public_api.ts"
+    },
+    "allowedNonPeerDependencies": [
+        "lodash-es",
+        "ajv"
+    ]
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+    "name": "@ng-formworks/core",
+    "version": "15.2.7",
+    "description": "Angular ng-formworks - JSON Schema Form builder core",
+    "author": "https://github.com/zahmo/ng-formworks/graphs/contributors",
+    "keywords": [
+        "Angular",
+        "ng",
+        "Angular15",
+        "Angular 15",
+        "Angular16",
+        "Angular 16",
+        "Angular17",
+        "Angular 17",
+        "ng15",
+        "ng16",
+        "ng17",
+        "JSON Schema",
+        "form",
+        "forms",
+        "form builder",
+        "form themes",
+        "form generator",
+        "ajsf",
+        "ng-formworks",
+        "ng formworks",
+        "formworks",
+        "angular json schema form"
+    ],
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/zahmo/ng-formworks"
+    },
+    "bugs": {
+        "url": "https://github.com/zahmo/ng-formworks/issues"
+    },
+    "private": false,
+    "dependencies": {
+        "lodash-es": "~4.17.21",
+        "ajv": "^8.12.0",
+        "tslib": "^2.0.0"
+    },
+    "peerDependencies": {
+        "@angular/common": ">=15.0.0",
+        "@angular/core": ">=15.0.0",
+        "@angular/forms": ">=15.0.0",
+        "@angular/platform-browser": ">=15.0.0",
+        "rxjs": "^7.0.0"
+    },
+    "devDependencies": {
+        "@types/lodash-es": "^4.17.6"
+    }
+}

package/src/lib/framework-library/framework-library.service.ts

@@ -0,0 +1,195 @@
+import { HttpClient } from '@angular/common/http';
+import { Inject, Injectable } from '@angular/core';
+import { Observable, Subject, lastValueFrom } from 'rxjs';
+import { hasOwn } from '../shared/utility.functions';
+import { WidgetLibraryService } from '../widget-library/widget-library.service';
+import { Framework } from './framework';
+
+// Possible future frameworks:
+// - Foundation 6:
+//   http://justindavis.co/2017/06/15/using-foundation-6-in-angular-4/
+//   https://github.com/zurb/foundation-sites
+// - Semantic UI:
+//   https://github.com/edcarroll/ng2-semantic-ui
+//   https://github.com/vladotesanovic/ngSemantic
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FrameworkLibraryService {
+  activeFramework: Framework = null;
+  stylesheets: (HTMLStyleElement|HTMLLinkElement)[];
+  scripts: HTMLScriptElement[];
+  loadExternalAssets = false;
+  defaultFramework: string;
+  frameworkLibrary: { [name: string]: Framework } = {};
+
+  activeFrameworkName$: Observable<string>;
+  private activeFrameworkNameSubject: Subject<string>;
+  private activeFrameworkName:string;
+
+  constructor(
+    @Inject(Framework) private frameworks: any[],
+    @Inject(WidgetLibraryService) private widgetLibrary: WidgetLibraryService,
+    private http: HttpClient,
+  ) {
+    this.frameworks.forEach(framework =>
+      this.frameworkLibrary[framework.name] = framework
+    );
+    this.defaultFramework = this.frameworks[0].name;
+    //this.setFramework(this.defaultFramework);
+    
+    this.activeFrameworkName=this.defaultFramework;
+    this.activeFrameworkNameSubject = new Subject<string>();
+    this.activeFrameworkName$ = this.activeFrameworkNameSubject.asObservable();
+    this.setFramework(this.defaultFramework);
+  }
+
+  public setLoadExternalAssets(loadExternalAssets = true): void {
+    this.loadExternalAssets = !!loadExternalAssets;
+  }
+
+  public setFramework(
+    framework: string|Framework = this.defaultFramework,
+    loadExternalAssets = this.loadExternalAssets
+  ): boolean {
+    this.activeFramework =
+      typeof framework === 'string' && this.hasFramework(framework) ?
+        this.frameworkLibrary[framework] :
+      typeof framework === 'object' && hasOwn(framework, 'framework') ?
+        framework :
+        this.frameworkLibrary[this.defaultFramework];
+    if(this.activeFramework.name !=this.activeFrameworkName){
+      this.activeFrameworkName=this.activeFramework.name;
+      this.activeFrameworkNameSubject.next(this.activeFrameworkName);
+    }
+    return this.registerFrameworkWidgets(this.activeFramework);
+  }
+
+  registerFrameworkWidgets(framework: Framework): boolean {
+    return hasOwn(framework, 'widgets') ?
+      this.widgetLibrary.registerFrameworkWidgets(framework.widgets) :
+      this.widgetLibrary.unRegisterFrameworkWidgets();
+  }
+
+  public hasFramework(type: string): boolean {
+    return hasOwn(this.frameworkLibrary, type);
+  }
+
+  public getFramework(): any {
+    if (!this.activeFramework) { this.setFramework('default', true); }
+    return this.activeFramework.framework;
+  }
+
+  public getFrameworkList():{name:string,text:string}[] {
+    return this.frameworks.map(fw=>{
+      return {name:fw.name,text:fw.text};
+    })
+    
+  }
+
+  public getFrameworkWidgets(): any {
+    return this.activeFramework.widgets || {};
+  }
+
+  
+
+  public getFrameworkStylesheets(load: boolean = this.loadExternalAssets): string[] {
+    return (load && this.activeFramework.stylesheets) || [];
+  }
+
+  public getFrameworkScripts(load: boolean = this.loadExternalAssets): string[] {
+    return (load && this.activeFramework.scripts) || [];
+  }
+
+  //applies to CssFramework classes
+  public getFrameworkConfig(existingFramework?:any): any {
+    let actFramework:Framework& { [key: string]: any; }=existingFramework||this.activeFramework;
+    return actFramework.config;
+  }
+
+  //this will load the list of assets to be loaded at runtime in case the dependent framework
+  //scripts and styles are include locally with the parent app
+  public getFrameworkAssetConfig(existingFramework?:any,useAssetRelPath=true):Promise<{stylesheets:string[],scripts:string[]}>{
+    let actFramework:Framework& { [key: string]: any; }=existingFramework||this.activeFramework;
+    //TODO move this into config
+    const assetConfigPath = `assets/${actFramework.name}/cssframework`
+    const assetConfigURL = `${assetConfigPath}/assets.json`;
+    let subs=this.http
+      .get(assetConfigURL, { responseType: 'text' })
+      //.subscribe(assetConfig => {
+      //  assetConfig
+      //})
+      
+      return lastValueFrom(subs).then(assetCfgText=>{
+        let assetCfg=JSON.parse(assetCfgText);
+        if(useAssetRelPath){
+          assetCfg.stylesheets=assetCfg.stylesheets.map(styleLink=>{
+            //ignore relative path if url starts with known protocol or //
+            let nonRelPrefixes=["/","//","http:","https:"];//"//" list for completeness 
+            let isNonRel=false;
+            nonRelPrefixes.forEach(prefix=>{
+              isNonRel=isNonRel||styleLink.indexOf(prefix)==0;
+            })
+            if(isNonRel){
+              return styleLink;
+            }
+            return `${assetConfigPath}/${styleLink}`;
+          })
+          assetCfg.scripts=assetCfg.scripts.map(scriptLink=>{
+            return `${assetConfigPath}/${scriptLink}`;
+          })
+        }   
+        return assetCfg
+      });
+  }
+
+  //applies to CssFramework classes
+  public getFrameworkThemes():{name:string,text:string}[] {
+    let cssfwConfig=this.getFrameworkConfig();
+    let themes;
+    if(cssfwConfig){
+      themes=cssfwConfig?.widgetstyles?.__themes__||[]
+    }
+    return themes
+  }
+
+  //applies to CssFramework classes
+  public requestThemeChange(name:string,validateThemeExists:boolean=false,existingFramework?:any){
+    let actFramework:Framework& { [key: string]: any; }=existingFramework||this.activeFramework;
+    if(actFramework.requestThemeChange){
+      if(validateThemeExists){  
+        let themes=this.getFrameworkThemes();
+        let foundThemes=themes.filter(thm=>{return thm.name==name});
+        if(!foundThemes|| foundThemes.length==0){
+          return false;
+        }
+      }
+      actFramework.requestThemeChange(name);
+      return true;
+    }
+  }
+  //applies to CssFramework classes
+  public getActiveTheme(existingFramework?:any):{name:string,text:string}{
+    let actFramework:Framework& { [key: string]: any; }=existingFramework||this.activeFramework;
+    if(actFramework.getActiveTheme){
+      return actFramework.getActiveTheme();
+    }
+  }
+
+  //applies to CssFramework classes
+  public registerTheme(newTheme:{name:string,text:string},existingFramework?:any):boolean{
+    let actFramework:Framework& { [key: string]: any; }=existingFramework||this.activeFramework;
+    if(actFramework.registerTheme){
+      return actFramework.registerTheme(newTheme);
+    }
+  }
+
+    //applies to CssFramework classes
+    public unregisterTheme(name:string,existingFramework?:any):boolean{
+      let actFramework:Framework& { [key: string]: any; }=existingFramework||this.activeFramework;
+      if(actFramework.registerTheme){
+        return actFramework.unregisterTheme(name);
+      }
+    }
+}

package/src/lib/framework-library/framework.ts

@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class Framework {
+  name: string;
+  text:string;
+  framework: any;
+  widgets?: { [key: string]: any } = {};
+  stylesheets?: string[] = [];
+  scripts?: string[] = [];
+}

package/src/lib/framework-library/no-framework.component.html

@@ -0,0 +1,2 @@
+<select-widget-widget [dataIndex]="dataIndex" [layoutIndex]="layoutIndex" [layoutNode]="layoutNode">
+</select-widget-widget>

package/src/lib/framework-library/no-framework.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'no-framework',
+  templateUrl: './no-framework.component.html',
+})
+export class NoFrameworkComponent {
+  @Input() layoutNode: any;
+  @Input() layoutIndex: number[];
+  @Input() dataIndex: number[];
+}

package/src/lib/framework-library/no-framework.module.ts

@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { Framework } from './framework';
+import { NgModule } from '@angular/core';
+import { NoFramework } from './no.framework';
+import { NoFrameworkComponent } from './no-framework.component';
+import { WidgetLibraryModule } from '../widget-library/widget-library.module';
+
+// No framework - plain HTML controls (styles from form layout only)
+
+@NgModule({
+    imports: [CommonModule, WidgetLibraryModule],
+    declarations: [NoFrameworkComponent],
+    exports: [NoFrameworkComponent],
+    providers: [
+        { provide: Framework, useClass: NoFramework, multi: true }
+    ]
+})
+export class NoFrameworkModule { }

package/src/lib/framework-library/no.framework.ts

@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+import { Framework } from './framework';
+import { NoFrameworkComponent } from './no-framework.component';
+// No framework - plain HTML controls (styles from form layout only)
+
+@Injectable()
+export class NoFramework extends Framework {
+  name = 'no-framework';
+  text ='None (plain HTML)';
+  framework = NoFrameworkComponent;
+}

package/src/lib/json-schema-form.component.html

@@ -0,0 +1,7 @@
+<form [autocomplete]="jsf?.formOptions?.autocomplete ? 'on' : 'off'" class="json-schema-form" (ngSubmit)="submitForm()">
+  <root-widget [layout]="jsf?.layout"></root-widget>
+</form>
+<div *ngIf="debug || jsf?.formOptions?.debug">
+  Debug output:
+  <pre>{{debugOutput}}</pre>
+</div>