@ng-formworks/material 15.2.7

package/README.md

@@ -0,0 +1,133 @@
+# @ng-formworks/material
+
+This module is a dependency of the [ng-formworks project][npm_core_ver] and is meant to work as a framework installation module for using Angular Material Design in the forms.
+
+## Getting started
+
+If you are unfamiliar with with the ng-formworks project, it is highly recommended to 
+first have a look at the [@ng-formworks pages][npm_core_ver] for examples, demos, options and documentation.
+
+```shell
+npm install @ng-formworks/core@latest @ng-formworks/cssframework@latest @ng-formworks/material@latest
+```
+
+With YARN, run the following:
+
+```shell
+yarn add @ng-formworks/core@latest @ng-formworks/cssframework@latest @ng-formworks/material@latest
+```
+
+include the themes scss in your applications sass file(typically "styles.scss" under "src" folder -see angular docs for more details) 
+```scss
+@import "node_modules/@ng-formworks/material/assets/material-design-themes.scss";
+```
+
+Then import `MaterialDesignFrameworkModule` in your main application module if you want to use `material-angular` UI, like this:
+
+```javascript
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { MaterialDesignFrameworkModule } from '@ng-formworks/material';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [ AppComponent ],
+  imports: [
+    MaterialDesignFrameworkModule
+  ],
+  providers: [],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+```
+
+For basic use, after loading JsonSchemaFormModule as described above, to display a form in your Angular component, simply add the following to your component's template:
+
+```html
+<json-schema-form
+  loadExternalAssets="true"
+  [schema]="yourJsonSchema"
+  framework="material-design"
+  [theme]="yourTheme"
+  (onSubmit)="yourOnSubmitFn($event)">
+</json-schema-form>
+```
+
+Where `schema` is a valid JSON schema object, and `onSubmit` calls a function to process the submitted JSON form data. If you don't already have your own schemas, you can find a bunch of samples to test with in the `demo/assets/example-schemas` folder, as described above.
+
+`framework` is for the template you want to use, the default value is `no-framwork`. The possible values are:
+
+
+* `material-design` for  Material Design.
+* `bootstrap-3` for Bootstrap 3 (if installed).
+* `bootstrap-4` for Bootstrap 4 (if installed).
+* `bootstrap-5` for Bootstrap 5.(if installed).
+* `daisyui` for DaisyUi (if installed).
+* `no-framework` for (plain HTML).
+
+`theme` is for the framework theme you want to use. 
+The possible values for this framework are:
+
+* `material_default` for the default theme.
+* `indigo-pink` for the indigo & pink theme.
+* `purple-green` for the purple & green theme.
+* `deeppurple-amber` for the deep purple & amber theme.
+* `pink-bluegrey` for the pink & blue-grey theme.
+
+the list of available themes can also be gotten using the 
+FrameworkLibraryService(found in '@ng-formworks/core'): 
+ ```typescript
+ getFrameworkThemes()
+ ``` 
+ method
+
+## Custom theming
+
+Custom theming can be achieved in the following way:
+
+Adding a new theme:
+the first step will be to create the entire theme (see the specific frameworks underlying documentation for how this can be done), then add the theme as
+a css class
+
+```sass
+.material_custom {
+    @include mat.core-color($custom-pink-theme);
+    @include mat.all-component-colors($custom-pink-theme);
+    @include mat.button-color($custom-pink-theme);
+}
+
+```
+after making the css available, the theme will need to be registered using the  
+FrameworkLibraryService(found in '@ng-formworks/core'):
+for example 
+
+```typescript
+  constructor(
+    .
+    private frameworkLibrary: FrameworkLibraryService,
+    .
+    .
+  ) { 
+
+    frameworkLibrary.registerTheme({name:'material_custom',text:'Material custom theme'})
+
+  }
+
+```
+
+## Code scaffolding
+
+Run `ng generate component component-name --project @ng-formworks/material` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project @ng-formworks/material`.
+> Note: Don't forget to add `--project @ng-formworks/material` or else it will be added to the default project in your `angular.json` file.
+
+## Build
+
+Run `ng build @ng-formworks/material` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test @ng-formworks/material` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+[npm_core_ver]:https://www.npmjs.com/package/@ng-formworks/core

package/assets/material-design-themes.scss

@@ -0,0 +1,71 @@
+/* see https://material.angular.io/guide/theming */
+
+@use '@angular/material' as mat;
+@include mat.core();
+$indigo-primary: mat.define-palette(mat.$indigo-palette, 500);
+$green-accent: mat.define-palette(mat.$green-palette, A200, A100, A400);
+$red-warn: mat.define-palette(mat.$red-palette);
+$pink-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$deep-purple-primary: mat.define-palette(mat.$deep-purple-palette, 500);
+$amber-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
+$pink-primary: mat.define-palette(mat.$pink-palette, 500);
+$bluegrey-accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);
+$typography:mat.define-typography-config();
+$density:0;
+
+/*Palettes (primary, accent, warn)-indigo, pink, red */
+
+$indigo-pink-primary: $indigo-primary;
+$indigo-pink-accent: $pink-accent;
+$indigo-pink-warn: $red-warn;
+$indigo-pink-theme: mat.define-light-theme(( color: ( primary: $indigo-pink-primary, accent: $indigo-pink-accent, warn:$indigo-pink-warn), typography: $typography, density: $density));
+.indigo-pink {
+    @include mat.core-theme($indigo-pink-theme);
+    @include mat.all-component-themes($indigo-pink-theme);
+    @include mat.button-color($indigo-pink-theme);
+}
+
+
+/*Palettes (primary, accent, warn)-purple, green, red */
+
+$purple-green-primary: $indigo-primary;
+$purple-green-accent: $green-accent;
+$purple-green-warn: $red-warn;
+$purple-green-theme: mat.define-dark-theme(( color: ( primary: $purple-green-primary, accent: $purple-green-accent, warn:$purple-green-warn)));
+.purple-green {
+    @include mat.core-color($purple-green-theme);
+    @include mat.all-component-colors($purple-green-theme);
+    @include mat.button-color($purple-green-theme);
+}
+
+
+/*Palettes (primary, accent, warn)-deep-purple, amber, red */
+
+$deeppurple-amber-primary: $deep-purple-primary;
+$deeppurple-amber-accent: $amber-accent;
+$deeppurple-amber-warn: $red-warn;
+$deeppurple-amber-theme: mat.define-light-theme(( color: ( primary: $deeppurple-amber-primary, accent: $deeppurple-amber-accent, warn:$deeppurple-amber-warn)));
+.deeppurple-amber {
+    @include mat.core-color($deeppurple-amber-theme);
+    @include mat.all-component-colors($deeppurple-amber-theme);
+    @include mat.button-color($deeppurple-amber-theme);
+}
+
+
+/*Palettes (primary, accent, warn)-pink, blue-grey, red */
+
+$pink-bluegrey-primary: $pink-primary;
+$pink-bluegrey-accent: $bluegrey-accent;
+$pink-bluegrey-warn: $red-warn;
+$pink-bluegrey-theme: mat.define-dark-theme(( color: ( primary: $pink-bluegrey-primary, accent: $pink-bluegrey-accent, warn:$pink-bluegrey-warn)));
+.pink-bluegrey {
+    @include mat.core-color($pink-bluegrey-theme);
+    @include mat.all-component-colors($pink-bluegrey-theme);
+    @include mat.button-color($pink-bluegrey-theme);
+}
+
+.material_default {
+    @include mat.core-color($indigo-pink-theme);
+    @include mat.all-component-colors($indigo-pink-theme);
+    @include mat.button-color($indigo-pink-theme);
+}

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-material'),
+      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,13 @@
+{
+    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../dist/@ng-formworks/material",
+    "lib": {
+        "entryFile": "src/public_api.ts"
+    },
+    "assets": ["./assets"],
+    "allowedNonPeerDependencies": [
+        "lodash-es",
+        "@ng-formworks/core",
+        "@ng-formworks/cssframework"
+    ]
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+    "name": "@ng-formworks/material",
+    "version": "15.2.7",
+    "description": "Angular ng-formworks - JSON Schema Form builder using Angular Material UI",
+    "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",
+        "material",
+        "angular material",
+        "material design",
+        "ajsf",
+        "ng-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",
+        "@ng-formworks/core": "~15.2.7",
+        "@ng-formworks/cssframework": "~15.2.7",
+        "tslib": "^2.0.0"
+    },
+    "peerDependencies": {
+        "@angular/material": ">=15.0.0",
+        "@angular/cdk": ">=15.0.0"
+    }
+}

package/src/lib/flexlayout-replacement-styles.scss

@@ -0,0 +1,95 @@
+/* style sheet created to help replace angular flex-layout package
+which is out of maintenance
+see-https://github.com/angular/flex-layout
+adapted from 
+https://github.com/angular/flex-layout/issues/1433
+https://github.com/angular/flex-layout/issues/1433#issue-1508899434
+*/
+
+[fxLayout] {
+    box-sizing: border-box;
+    display: flex;
+}
+
+[fxLayout="row wrap"] {
+    flex-flow: row wrap;
+}
+
+[fxLayout="row"] {
+    flex-direction: row;
+}
+
+[fxLayout="column"] {
+    flex-direction: column;
+}
+
+[fxLayoutAlign="center center"] {
+    display: flex;
+    place-content: center;
+    align-items: center;
+}
+
+[fxLayoutAlign="start center"] {
+    display: flex;
+    place-content: center flex-start;
+    align-items: center;
+}
+
+[fxLayoutAlign="start start"] {
+    display: flex;
+    place-content: flex-start flex-start;
+    align-items: center;
+}
+
+[fxLayoutAlign="end center"] {
+    display: flex;
+    place-content: center flex-end;
+    align-items: center;
+}
+
+[fxFlex] {
+    box-sizing: border-box;
+    display: flex;
+    flex: 1 1 100%;
+}
+
+[fxFlex="none"] {
+    flex: none;
+}
+
+@media only screen and (min-width: 960px) {
+    [fxFlex-gt-sm="50"] {
+        flex: 1 1 50% !important;
+        box-sizing: border-box;
+        max-width: 50% !important;
+    }
+    [fxFlex-gt-sm="33"] {
+        flex: 1 1 33% !important;
+        box-sizing: border-box;
+        max-width: 33% !important;
+    }
+}
+
+[fxFlex="33"] {
+    flex: 1 1 33%;
+    box-sizing: border-box;
+    max-width: 33%;
+}
+
+[fxFlex="67"] {
+    flex: 1 1 67%;
+    box-sizing: border-box;
+    max-width: 67%;
+}
+
+@mixin flex {
+    @for $i from 0 through 20 {
+        [fxFlex="#{$i*5}"] {
+            flex: 1 1 $i*5%;
+            box-sizing: border-box;
+            max-width: $i*5%;
+        }
+    }
+}
+
+@include flex;

package/src/lib/material-design-cssframework.ts

@@ -0,0 +1,20 @@
+
+export const cssFrameworkCfgMaterialDesign:any={
+    "name": "material-design",
+    "text":"Material Design",
+    "scripts": [],
+    "stylesheets": [
+        '//fonts.googleapis.com/icon?family=Material+Icons',
+        '//fonts.googleapis.com/css?family=Roboto:300,400,500,700',
+    ],
+    "widgetstyles": {
+        "__themes__": [
+            {"name":"material_default","text":"Default Theme"},
+            {"name":"indigo-pink","text":"Indigo & Pink"},
+            {"name":"purple-green","text":"Purple & Green"},
+            {"name":"deeppurple-amber","text":"Deep Purple & Amber"},
+            {"name":"pink-bluegrey","text":"Pink & Blue-Grey"}
+        ]
+    }
+}
+

package/src/lib/material-design-framework.component.html

@@ -0,0 +1,13 @@
+<div [class]="theme">
+    <div class="mat-app-background">
+
+        <div [class.array-item]="widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref'" [orderable]="isOrderable" [dataIndex]="dataIndex" [layoutIndex]="layoutIndex" [layoutNode]="widgetLayoutNode">
+            <svg *ngIf="showRemoveButton" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24" class="close-button" (click)="removeItem()">
+      <path
+        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
+    </svg>
+            <select-widget-widget [dataIndex]="dataIndex" [layoutIndex]="layoutIndex" [layoutNode]="widgetLayoutNode"></select-widget-widget>
+        </div>
+        <div class="spacer" *ngIf="widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref'"></div>
+    </div>
+</div>

package/src/lib/material-design-framework.component.scss

@@ -0,0 +1,58 @@
+.array-item {
+    border-radius: 2px;
+    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+    padding: 6px;
+    position: relative;
+    transition: all 280ms cubic-bezier(.4, 0, .2, 1);
+}
+
+.close-button {
+    cursor: pointer;
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    fill: rgba(0, 0, 0, .4);
+    visibility: hidden;
+    z-index: 500;
+}
+
+.close-button:hover {
+    fill: rgba(0, 0, 0, .8);
+}
+
+.array-item:hover>.close-button {
+    visibility: visible;
+}
+
+.spacer {
+    margin: 6px 0;
+}
+
+[draggable=true]:hover {
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
+    cursor: move;
+    z-index: 10;
+}
+
+[draggable=true].drag-target-top {
+    box-shadow: 0 -2px 0 #000;
+    position: relative;
+    z-index: 20;
+}
+
+[draggable=true].drag-target-bottom {
+    box-shadow: 0 2px 0 #000;
+    position: relative;
+    z-index: 20;
+}
+
+
+/*
+.purple-green {
+    @import './material-design-themes.scss';
+}
+*/
+
+@import './material-design-themes.scss';
+@import './flexlayout-replacement-styles.scss';
+@import './tailwind-output.scss';

package/src/lib/material-design-framework.component.spec.ts

@@ -0,0 +1,39 @@
+import { CommonModule } from '@angular/common';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import {
+    JsonSchemaFormModule,
+    JsonSchemaFormService,
+    WidgetLibraryModule
+} from '@ng-formworks/core';
+import { MaterialDesignFrameworkComponent } from './material-design-framework.component';
+
+describe('FwBootstrap4Component', () => {
+  let component: MaterialDesignFrameworkComponent;
+  let fixture: ComponentFixture<MaterialDesignFrameworkComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        JsonSchemaFormModule,
+        CommonModule,
+        WidgetLibraryModule,
+      ],
+      declarations: [MaterialDesignFrameworkComponent],
+      providers: [JsonSchemaFormService]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MaterialDesignFrameworkComponent);
+    component = fixture.componentInstance;
+    component.layoutNode = { options: {} };
+    component.layoutIndex = [];
+    component.dataIndex = [];
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/material-design-framework.component.ts

@@ -0,0 +1,143 @@
+import { ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { FrameworkLibraryService, JsonSchemaFormService, isDefined } from '@ng-formworks/core';
+import { CssframeworkService } from '@ng-formworks/cssframework';
+import cloneDeep from 'lodash/cloneDeep';
+import { Subscription } from 'rxjs';
+import { cssFrameworkCfgMaterialDesign } from './material-design-cssframework';
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'material-design-framework',
+  templateUrl: './material-design-framework.component.html',
+  styleUrls: ['./material-design-framework.component.scss'],
+  //changeDetection:ChangeDetectionStrategy.OnPush
+})
+export class MaterialDesignFrameworkComponent implements OnInit, OnChanges ,OnDestroy {
+  frameworkInitialized = false;
+  inputType: string;
+  options: any; // Options used in this framework
+  widgetLayoutNode: any; // layoutNode passed to child widget
+  widgetOptions: any; // Options passed to child widget
+  formControl: any = null;
+  parentArray: any = null;
+  isOrderable = false;
+  dynamicTitle: string = null;
+  @Input() layoutNode: any;
+  @Input() layoutIndex: number[];
+  @Input() dataIndex: number[];
+
+  theme:string="material-default-theme";
+  frameworkThemeSubs:Subscription;
+  constructor(
+    private changeDetector: ChangeDetectorRef,
+    private jsf: JsonSchemaFormService,
+    public jsfFLService:FrameworkLibraryService,
+    public cssFWService:CssframeworkService
+  ) {
+    let activeFramework:any=this.jsfFLService.activeFramework;
+    let fwcfg=activeFramework.config||{};
+    let defaultTheme=cssFrameworkCfgMaterialDesign.widgetstyles?.__themes__[0];
+    let defaultThemeName=cssFWService.activeRequestedTheme||defaultTheme.name;
+    this.theme=this.options?.theme|| defaultThemeName;
+    this.frameworkThemeSubs= cssFWService.frameworkTheme$.subscribe(newTheme=>{
+        this.theme=newTheme;
+    })
+
+
+  }
+  ngOnDestroy(): void {
+    this.frameworkThemeSubs.unsubscribe();
+    this.frameworkThemeSubs=null;
+  }
+
+  get showRemoveButton(): boolean {
+    if (!this.layoutNode || !this.widgetOptions.removable ||
+      this.widgetOptions.readonly || this.layoutNode.type === '$ref'
+    ) {
+      return false;
+    }
+    if (this.layoutNode.recursiveReference) {
+      return true;
+    }
+    if (!this.layoutNode.arrayItem || !this.parentArray) {
+      return false;
+    }
+    // If array length <= minItems, don't allow removing any items
+    return this.parentArray.items.length - 1 <= this.parentArray.options.minItems ? false :
+      // For removable list items, allow removing any item
+      this.layoutNode.arrayItemType === 'list' ? true :
+        // For removable tuple items, only allow removing last item in list
+        this.layoutIndex[this.layoutIndex.length - 1] === this.parentArray.items.length - 2;
+  }
+
+  ngOnInit() {
+    this.initializeFramework();
+  }
+
+  ngOnChanges() {
+    if (!this.frameworkInitialized) {
+      this.initializeFramework();
+    }
+    if (this.dynamicTitle) {
+      this.updateTitle();
+    }
+  }
+
+  initializeFramework() {
+    if (this.layoutNode) {
+      this.options = cloneDeep(this.layoutNode.options || {});
+      this.widgetLayoutNode = {
+        ...this.layoutNode,
+        options: cloneDeep(this.layoutNode.options || {})
+      };
+      this.widgetOptions = this.widgetLayoutNode.options;
+      this.formControl = this.jsf.getFormControl(this);
+
+      if (
+        isDefined(this.widgetOptions.minimum) &&
+        isDefined(this.widgetOptions.maximum) &&
+        this.widgetOptions.multipleOf >= 1
+      ) {
+        this.layoutNode.type = 'range';
+      }
+
+      if (
+        !['$ref', 'advancedfieldset', 'authfieldset', 'button', 'card',
+          'checkbox', 'expansion-panel', 'help', 'message', 'msg', 'section',
+          'submit', 'tabarray', 'tabs'].includes(this.layoutNode.type) &&
+        /{{.+?}}/.test(this.widgetOptions.title || '')
+      ) {
+        this.dynamicTitle = this.widgetOptions.title;
+        this.updateTitle();
+      }
+
+      if (this.layoutNode.arrayItem && this.layoutNode.type !== '$ref') {
+        this.parentArray = this.jsf.getParentNode(this);
+        if (this.parentArray) {
+          this.isOrderable =
+            this.parentArray.type.slice(0, 3) !== 'tab' &&
+            this.layoutNode.arrayItemType === 'list' &&
+            !this.widgetOptions.readonly &&
+            this.parentArray.options.orderable;
+        }
+      }
+
+      this.frameworkInitialized = true;
+    } else {
+      this.options = {};
+    }
+  }
+
+  updateTitle() {
+    this.widgetLayoutNode.options.title = this.jsf.parseText(
+      this.dynamicTitle,
+      this.jsf.getFormControlValue(this),
+      this.jsf.getFormControlGroup(this).value,
+      this.dataIndex[this.dataIndex.length - 1]
+    );
+  }
+
+  removeItem() {
+    this.jsf.removeItem(this);
+  }
+}