@ng-formworks/material 15.2.7

package/src/lib/widgets/flex-layout-section.component.ts

@@ -0,0 +1,216 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { JsonSchemaFormService } from '@ng-formworks/core';
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'flex-layout-section-widget',
+  template: `
+    <div *ngIf="containerType === 'div'"
+      [class]="options?.htmlClass || ''"
+      [class.expandable]="options?.expandable && !expanded"
+      [class.expanded]="options?.expandable && expanded">
+      <label *ngIf="sectionTitle"
+        [class]="'legend ' + (options?.labelHtmlClass || '')"
+        [innerHTML]="sectionTitle"
+        (click)="toggleExpanded()"></label>
+      <flex-layout-root-widget *ngIf="expanded"
+        [layout]="layoutNode.items"
+        [dataIndex]="dataIndex"
+        [layoutIndex]="layoutIndex"
+        [isFlexItem]="getFlexAttribute('is-flex')"
+        [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
+        [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
+        [style.display]="getFlexAttribute('display')"
+        [style.flex-direction]="getFlexAttribute('flex-direction')"
+        [style.flex-wrap]="getFlexAttribute('flex-wrap')"
+        [style.justify-content]="getFlexAttribute('justify-content')"
+        [style.align-items]="getFlexAttribute('align-items')"
+        [style.align-content]="getFlexAttribute('align-content')"
+        [attr.fxLayout]="getFlexAttribute('layout')"
+        [attr.fxLayoutGap]="options?.fxLayoutGap"
+        [attr.fxLayoutAlign]="options?.fxLayoutAlign"
+        [attr.fxFlexFill]="options?.fxLayoutAlign"></flex-layout-root-widget>
+      <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+        [innerHTML]="options?.errorMessage"></mat-error>
+    </div>
+
+    <fieldset *ngIf="containerType === 'fieldset'"
+      [class]="options?.htmlClass || ''"
+      [class.expandable]="options?.expandable && !expanded"
+      [class.expanded]="options?.expandable && expanded"
+      [disabled]="options?.readonly">
+      <legend *ngIf="sectionTitle"
+        [class]="'legend ' + (options?.labelHtmlClass || '')"
+        [innerHTML]="sectionTitle"
+        (click)="toggleExpanded()"></legend>
+      <flex-layout-root-widget *ngIf="expanded"
+        [layout]="layoutNode.items"
+        [dataIndex]="dataIndex"
+        [layoutIndex]="layoutIndex"
+        [isFlexItem]="getFlexAttribute('is-flex')"
+        [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
+        [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
+        [style.display]="getFlexAttribute('display')"
+        [style.flex-direction]="getFlexAttribute('flex-direction')"
+        [style.flex-wrap]="getFlexAttribute('flex-wrap')"
+        [style.justify-content]="getFlexAttribute('justify-content')"
+        [style.align-items]="getFlexAttribute('align-items')"
+        [style.align-content]="getFlexAttribute('align-content')"
+        [attr.fxLayout]="getFlexAttribute('layout')"
+        [attr.fxLayoutGap]="options?.fxLayoutGap"
+        [attr.fxLayoutAlign]="options?.fxLayoutAlign"
+        [attr.attr.fxFlexFill]="options?.fxLayoutAlign"></flex-layout-root-widget>
+      <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+        [innerHTML]="options?.errorMessage"></mat-error>
+    </fieldset>
+
+    <mat-card appearance="outlined" *ngIf="containerType === 'card'"
+      [ngClass]="options?.htmlClass || ''"
+      [class.expandable]="options?.expandable && !expanded"
+      [class.expanded]="options?.expandable && expanded">
+      <mat-card-header *ngIf="sectionTitle">
+        <legend
+          [class]="'legend ' + (options?.labelHtmlClass || '')"
+          [innerHTML]="sectionTitle"
+          (click)="toggleExpanded()"></legend>
+      </mat-card-header>
+      <mat-card-content *ngIf="expanded">
+        <fieldset [disabled]="options?.readonly">
+          <flex-layout-root-widget *ngIf="expanded"
+            [layout]="layoutNode.items"
+            [dataIndex]="dataIndex"
+            [layoutIndex]="layoutIndex"
+            [isFlexItem]="getFlexAttribute('is-flex')"
+            [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
+            [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
+            [style.display]="getFlexAttribute('display')"
+            [style.flex-direction]="getFlexAttribute('flex-direction')"
+            [style.flex-wrap]="getFlexAttribute('flex-wrap')"
+            [style.justify-content]="getFlexAttribute('justify-content')"
+            [style.align-items]="getFlexAttribute('align-items')"
+            [style.align-content]="getFlexAttribute('align-content')"
+            [attr.fxLayout]="getFlexAttribute('layout')"
+            [attr.fxLayoutGap]="options?.fxLayoutGap"
+            [attr.fxLayoutAlign]="options?.fxLayoutAlign"
+            [attr.fxFlexFill]="options?.fxLayoutAlign"></flex-layout-root-widget>
+          </fieldset>
+      </mat-card-content>
+      <mat-card-footer>
+        <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+          [innerHTML]="options?.errorMessage"></mat-error>
+      </mat-card-footer>
+    </mat-card>
+
+    <mat-expansion-panel *ngIf="containerType === 'expansion-panel'"
+      [expanded]="expanded"
+      [hideToggle]="!options?.expandable">
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <legend *ngIf="sectionTitle"
+            [class]="options?.labelHtmlClass"
+            [innerHTML]="sectionTitle"
+            (click)="toggleExpanded()"></legend>
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <fieldset [disabled]="options?.readonly">
+        <flex-layout-root-widget *ngIf="expanded"
+          [layout]="layoutNode.items"
+          [dataIndex]="dataIndex"
+          [layoutIndex]="layoutIndex"
+          [isFlexItem]="getFlexAttribute('is-flex')"
+          [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
+          [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
+          [style.display]="getFlexAttribute('display')"
+          [style.flex-direction]="getFlexAttribute('flex-direction')"
+          [style.flex-wrap]="getFlexAttribute('flex-wrap')"
+          [style.justify-content]="getFlexAttribute('justify-content')"
+          [style.align-items]="getFlexAttribute('align-items')"
+          [style.align-content]="getFlexAttribute('align-content')"
+          [attr.fxLayout]="getFlexAttribute('layout')"
+          [attr.fxLayoutGap]="options?.fxLayoutGap"
+          [attr.fxLayoutAlign]="options?.fxLayoutAlign"
+          [attr.fxFlexFill]="options?.fxLayoutAlign"></flex-layout-root-widget>
+      </fieldset>
+      <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+        [innerHTML]="options?.errorMessage"></mat-error>
+    </mat-expansion-panel>`,
+  styles: [`
+    fieldset { border: 0; margin: 0; padding: 0; }
+    .legend { font-weight: bold; }
+    .expandable > .legend:before { content: '▶'; padding-right: .3em; }
+    .expanded > .legend:before { content: '▼'; padding-right: .2em; }
+  `],
+})
+export class FlexLayoutSectionComponent implements OnInit {
+  formControl: AbstractControl;
+  controlName: string;
+  controlValue: any;
+  controlDisabled = false;
+  boundControl = false;
+  options: any;
+  expanded = true;
+  containerType = 'div';
+  @Input() layoutNode: any;
+  @Input() layoutIndex: number[];
+  @Input() dataIndex: number[];
+
+  constructor(
+    private jsf: JsonSchemaFormService
+  ) { }
+
+  get sectionTitle() {
+    return this.options.notitle ? null : this.jsf.setItemTitle(this);
+  }
+
+  ngOnInit() {
+    this.jsf.initializeControl(this);
+    this.options = this.layoutNode.options || {};
+    this.expanded = typeof this.options.expanded === 'boolean' ?
+      this.options.expanded : !this.options.expandable;
+    switch (this.layoutNode.type) {
+      case 'section': case 'array': case 'fieldset': case 'advancedfieldset':
+      case 'authfieldset': case 'optionfieldset': case 'selectfieldset':
+        this.containerType = 'fieldset';
+        break;
+      case 'card':
+        this.containerType = 'card';
+        break;
+      case 'expansion-panel':
+        this.containerType = 'expansion-panel';
+        break;
+      default: // 'div', 'flex', 'tab', 'conditional', 'actions'
+        this.containerType = 'div';
+    }
+  }
+
+  toggleExpanded() {
+    if (this.options.expandable) { this.expanded = !this.expanded; }
+  }
+
+  // Set attributes for flexbox container
+  // (child attributes are set in flex-layout-root.component)
+  getFlexAttribute(attribute: string) {
+    const flexActive: boolean =
+      this.layoutNode.type === 'flex' ||
+      !!this.options.displayFlex ||
+      this.options.display === 'flex';
+    // if (attribute !== 'flex' && !flexActive) { return null; }
+    switch (attribute) {
+      case 'is-flex':
+        return flexActive;
+      case 'display':
+        return flexActive ? 'flex' : 'initial';
+      case 'flex-direction': case 'flex-wrap':
+        const index = ['flex-direction', 'flex-wrap'].indexOf(attribute);
+        return (this.options['flex-flow'] || '').split(/\s+/)[index] ||
+          this.options[attribute] || ['column', 'nowrap'][index];
+      case 'justify-content': case 'align-items': case 'align-content':
+        return this.options[attribute];
+      case 'layout':
+        return (this.options.fxLayout || 'row') +
+          this.options.fxLayoutWrap ? ' ' + this.options.fxLayoutWrap : '';
+
+    }
+  }
+}

package/src/lib/widgets/material-add-reference.component.ts

@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { JsonSchemaFormService } from '@ng-formworks/core';
+
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'material-add-reference-widget',
+  template: `
+    <section [class]="options?.htmlClass || ''" align="end">
+      <button mat-raised-button *ngIf="showAddButton"
+        [color]="options?.color || 'accent'"
+        [disabled]="options?.readonly"
+        (click)="addItem($event)">
+        <span *ngIf="options?.icon" [class]="options?.icon"></span>
+        <span *ngIf="options?.title" [innerHTML]="buttonText"></span>
+      </button>
+    </section>`,
+  changeDetection: ChangeDetectionStrategy.Default,
+})
+export class MaterialAddReferenceComponent implements OnInit {
+  options: any;
+  itemCount: number;
+  previousLayoutIndex: number[];
+  previousDataIndex: number[];
+  @Input() layoutNode: any;
+  @Input() layoutIndex: number[];
+  @Input() dataIndex: number[];
+
+  constructor(
+    private jsf: JsonSchemaFormService
+  ) { }
+
+  ngOnInit() {
+    this.options = this.layoutNode.options || {};
+  }
+
+  get showAddButton(): boolean {
+    return !this.layoutNode.arrayItem ||
+      this.layoutIndex[this.layoutIndex.length - 1] < this.options.maxItems;
+  }
+
+  addItem(event) {
+    event.preventDefault();
+    this.jsf.addItem(this);
+  }
+
+  get buttonText(): string {
+    const parent: any = {
+      dataIndex: this.dataIndex.slice(0, -1),
+      layoutIndex: this.layoutIndex.slice(0, -1),
+      layoutNode: this.jsf.getParentNode(this),
+    };
+    return parent.layoutNode.add ||
+      this.jsf.setArrayItemTitle(parent, this.layoutNode, this.itemCount);
+  }
+}

package/src/lib/widgets/material-button-group.component.ts

@@ -0,0 +1,68 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { JsonSchemaFormService, buildTitleMap } from '@ng-formworks/core';
+
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'material-button-group-widget',
+  template: `
+    <div>
+      <div *ngIf="options?.title">
+        <label
+          [attr.for]="'control' + layoutNode?._id"
+          [class]="options?.labelHtmlClass || ''"
+          [style.display]="options?.notitle ? 'none' : ''"
+          [innerHTML]="options?.title"></label>
+      </div>
+      <mat-button-toggle-group
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.required]="options?.required"
+        [disabled]="controlDisabled || options?.readonly"
+        [name]="controlName"
+        [value]="controlValue"
+        [vertical]="!!options.vertical">
+        <mat-button-toggle *ngFor="let radioItem of radiosList"
+          [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
+          [value]="radioItem?.value"
+          (click)="updateValue(radioItem?.value)">
+          <span [innerHTML]="radioItem?.name"></span>
+        </mat-button-toggle>
+      </mat-button-toggle-group>
+      <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+        [innerHTML]="options?.errorMessage"></mat-error>
+    </div>`,
+    styles: [` mat-error { font-size: 75%; } `],
+})
+export class MaterialButtonGroupComponent implements OnInit {
+  formControl: AbstractControl;
+  controlName: string;
+  controlValue: any;
+  controlDisabled = false;
+  boundControl = false;
+  options: any;
+  radiosList: any[] = [];
+  vertical = false;
+  @Input() layoutNode: any;
+  @Input() layoutIndex: number[];
+  @Input() dataIndex: number[];
+
+  constructor(
+    private jsf: JsonSchemaFormService
+  ) { }
+
+  ngOnInit() {
+    this.options = this.layoutNode.options || {};
+    this.radiosList = buildTitleMap(
+      this.options.titleMap || this.options.enumNames,
+      this.options.enum, true
+    );
+    this.jsf.initializeControl(this);
+  }
+
+  updateValue(value) {
+    this.options.showErrors = true;
+    this.jsf.updateValue(this, value);
+  }
+}

package/src/lib/widgets/material-button.component.ts

@@ -0,0 +1,66 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { JsonSchemaFormService, hasOwn } from '@ng-formworks/core';
+import { Subscription } from 'rxjs';
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'material-button-widget',
+  template: `
+    <div class="button-row" [class]="options?.htmlClass || ''">
+      <button mat-raised-button
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [color]="options?.color || 'primary'"
+        [disabled]="controlDisabled || options?.readonly"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [type]="layoutNode?.type"
+        [value]="controlValue"
+        (click)="updateValue($event)">
+        <mat-icon *ngIf="options?.icon" class="mat-24">{{options?.icon}}</mat-icon>
+        <span *ngIf="options?.title" [innerHTML]="options?.title"></span>
+      </button>
+    </div>`,
+    styles: [` button { margin-top: 10px; } `],
+})
+export class MaterialButtonComponent implements OnInit,OnDestroy {
+  formControl: AbstractControl;
+  controlName: string;
+  controlValue: any;
+  controlDisabled = false;
+  boundControl = false;
+  options: any;
+  @Input() layoutNode: any;
+  @Input() layoutIndex: number[];
+  @Input() dataIndex: number[];
+
+  isValidChangesSubs:Subscription;
+  constructor(
+    private jsf: JsonSchemaFormService
+  ) { }
+
+  ngOnDestroy(): void {
+    this.isValidChangesSubs?.unsubscribe();
+    this.isValidChangesSubs=null;
+  }
+
+  ngOnInit() {
+    this.options = this.layoutNode.options || {};
+    this.jsf.initializeControl(this);
+    if (hasOwn(this.options, 'disabled')) {
+      this.controlDisabled = this.options.disabled;
+    } else if (this.jsf.formOptions.disableInvalidSubmit) {
+      this.controlDisabled = !this.jsf.isValid;
+      this.jsf.isValidChanges.subscribe(isValid => this.controlDisabled = !isValid);
+    }
+  }
+
+  updateValue(event) {
+    if (typeof this.options.onClick === 'function') {
+      this.options.onClick(event);
+    } else {
+      this.jsf.updateValue(this, event.target.value);
+    }
+  }
+}

package/src/lib/widgets/material-checkbox.component.ts

@@ -0,0 +1,112 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { JsonSchemaFormService } from '@ng-formworks/core';
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'material-checkbox-widget',
+  template: `
+    <mat-checkbox *ngIf="boundControl && !showSlideToggle"
+      [formControl]="formControl"
+      align="left"
+      [color]="options?.color || 'primary'"
+      [id]="'control' + layoutNode?._id"
+      labelPosition="after"
+      [name]="controlName"
+      (blur)="options.showErrors = true">
+      <span *ngIf="options?.title"
+        class="checkbox-name"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></span>
+    </mat-checkbox>
+    <mat-checkbox *ngIf="!boundControl && !showSlideToggle"
+      align="left"
+      [color]="options?.color || 'primary'"
+      [disabled]="controlDisabled || options?.readonly"
+      [id]="'control' + layoutNode?._id"
+      labelPosition="after"
+      [name]="controlName"
+      [checked]="isChecked"
+      (blur)="options.showErrors = true"
+      (change)="updateValue($event)">
+      <span *ngIf="options?.title"
+        class="checkbox-name"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></span>
+    </mat-checkbox>
+    <mat-slide-toggle *ngIf="boundControl && showSlideToggle"
+      [formControl]="formControl"
+      align="left"
+      [color]="options?.color || 'primary'"
+      [id]="'control' + layoutNode?._id"
+      labelPosition="after"
+      [name]="controlName"
+      (blur)="options.showErrors = true">
+      <span *ngIf="options?.title"
+        class="checkbox-name"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></span>
+    </mat-slide-toggle>
+    <mat-slide-toggle *ngIf="!boundControl && showSlideToggle"
+      align="left"
+      [color]="options?.color || 'primary'"
+      [disabled]="controlDisabled || options?.readonly"
+      [id]="'control' + layoutNode?._id"
+      labelPosition="after"
+      [name]="controlName"
+      [checked]="isChecked"
+      (blur)="options.showErrors = true"
+      (change)="updateValue($event)">
+      <span *ngIf="options?.title"
+        class="checkbox-name"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></span>
+    </mat-slide-toggle>
+    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+      [innerHTML]="options?.errorMessage"></mat-error>`,
+  styles: [`
+    .checkbox-name { white-space: nowrap; }
+    mat-error { font-size: 75%; }
+  `],
+})
+export class MaterialCheckboxComponent implements OnInit {
+  formControl: AbstractControl;
+  controlName: string;
+  controlValue: any;
+  controlDisabled = false;
+  boundControl = false;
+  options: any;
+  trueValue: any = true;
+  falseValue: any = false;
+  showSlideToggle = false;
+  @Input() layoutNode: any;
+  @Input() layoutIndex: number[];
+  @Input() dataIndex: number[];
+
+  constructor(
+    private jsf: JsonSchemaFormService
+  ) { }
+
+  ngOnInit() {
+    this.options = this.layoutNode.options || {};
+    this.jsf.initializeControl(this, !this.options.readonly);
+    if (this.controlValue === null || this.controlValue === undefined) {
+      this.controlValue = false;
+      this.jsf.updateValue(this, this.falseValue);
+    }
+    if (this.layoutNode.type === 'slide-toggle' ||
+      this.layoutNode.format === 'slide-toggle'
+    ) {
+      this.showSlideToggle = true;
+    }
+  }
+
+  updateValue(event) {
+    this.options.showErrors = true;
+    this.jsf.updateValue(this, event.checked ? this.trueValue : this.falseValue);
+  }
+
+  get isChecked() {
+    return this.jsf.getFormControlValue(this) === this.trueValue;
+  }
+}

package/src/lib/widgets/material-checkboxes.component.ts

@@ -0,0 +1,108 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { JsonSchemaFormService, TitleMapItem, buildTitleMap } from '@ng-formworks/core';
+
+// TODO: Change this to use a Selection List instead?
+// https://material.angular.io/components/list/overview
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'material-checkboxes-widget',
+  template: `
+    <div>
+      <mat-checkbox type="checkbox"
+        [checked]="allChecked"
+        [color]="options?.color || 'primary'"
+        [disabled]="controlDisabled || options?.readonly"
+        [indeterminate]="someChecked"
+        [name]="options?.name"
+        (blur)="options.showErrors = true"
+        (change)="updateAllValues($event)">
+        <span class="checkbox-name" [innerHTML]="options?.name"></span>
+      </mat-checkbox>
+      <label *ngIf="options?.title"
+        class="title"
+        [class]="options?.labelHtmlClass || ''"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></label>
+      <ul class="checkbox-list" [class.horizontal-list]="horizontalList">
+        <li *ngFor="let checkboxItem of checkboxList"
+          [class]="options?.htmlClass || ''">
+          <mat-checkbox type="checkbox"
+            [(ngModel)]="checkboxItem.checked"
+            [color]="options?.color || 'primary'"
+            [disabled]="controlDisabled || options?.readonly"
+            [name]="checkboxItem?.name"
+            (blur)="options.showErrors = true"
+            (change)="updateValue()">
+            <span class="checkbox-name" [innerHTML]="checkboxItem?.name"></span>
+          </mat-checkbox>
+        </li>
+      </ul>
+      <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+        [innerHTML]="options?.errorMessage"></mat-error>
+    </div>`,
+  styles: [`
+    .title { font-weight: bold; }
+    .checkbox-list { list-style-type: none; }
+    .horizontal-list > li { display: inline-block; margin-right: 10px; zoom: 1; }
+    .checkbox-name { white-space: nowrap; }
+    mat-error { font-size: 75%; }
+  `],
+})
+export class MaterialCheckboxesComponent implements OnInit {
+  formControl: AbstractControl;
+  controlName: string;
+  controlValue: any;
+  controlDisabled = false;
+  boundControl = false;
+  options: any;
+  horizontalList = false;
+  formArray: AbstractControl;
+  checkboxList: TitleMapItem[] = [];
+  @Input() layoutNode: any;
+  @Input() layoutIndex: number[];
+  @Input() dataIndex: number[];
+
+  constructor(
+    private jsf: JsonSchemaFormService
+  ) { }
+
+  ngOnInit() {
+    this.options = this.layoutNode.options || {};
+    this.horizontalList = this.layoutNode.type === 'checkboxes-inline' ||
+      this.layoutNode.type === 'checkboxbuttons';
+    this.jsf.initializeControl(this);
+    this.checkboxList = buildTitleMap(
+      this.options.titleMap || this.options.enumNames, this.options.enum, true
+    );
+    if (this.boundControl) {
+      const formArray = this.jsf.getFormControl(this);
+      for (const checkboxItem of this.checkboxList) {
+        checkboxItem.checked = formArray.value.includes(checkboxItem.value);
+      }
+    }
+  }
+
+  get allChecked(): boolean {
+    return this.checkboxList.filter(t => t.checked).length === this.checkboxList.length;
+  }
+
+  get someChecked(): boolean {
+    const checkedItems = this.checkboxList.filter(t => t.checked).length;
+    return checkedItems > 0 && checkedItems < this.checkboxList.length;
+  }
+
+  updateValue() {
+    this.options.showErrors = true;
+    if (this.boundControl) {
+      this.jsf.updateArrayCheckboxList(this, this.checkboxList);
+    }
+  }
+
+  updateAllValues(event: any) {
+    this.options.showErrors = true;
+    this.checkboxList.forEach(t => t.checked = event.checked);
+    this.updateValue();
+  }
+}

package/src/lib/widgets/material-chip-list.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { JsonSchemaFormService } from '@ng-formworks/core';
+
+// TODO: Add this control
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'material-chip-list-widget',
+  template: ``,
+})
+export class MaterialChipListComponent implements OnInit {
+  formControl: AbstractControl;
+  controlName: string;
+  controlValue: any;
+  controlDisabled = false;
+  boundControl = false;
+  options: any;
+  @Input() layoutNode: any;
+  @Input() layoutIndex: number[];
+  @Input() dataIndex: number[];
+
+  constructor(
+    private jsf: JsonSchemaFormService
+  ) { }
+
+  ngOnInit() {
+    this.options = this.layoutNode.options || {};
+    this.jsf.initializeControl(this);
+  }
+
+  updateValue(event) {
+    this.jsf.updateValue(this, event.target.value);
+  }
+}