@ng-formworks/material 17.2.7 → 17.4.0

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

@@ -1,216 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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);
-  }
-}