@ng-formworks/material 17.2.7 → 17.3.0

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

@@ -1,89 +0,0 @@
-import { Component, Inject, Input, OnInit, Optional } from '@angular/core';
-import { AbstractControl } from '@angular/forms';
-import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import { JsonSchemaFormService } from '@ng-formworks/core';
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'material-datepicker-widget',
-  template: `
-    <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
-                    [class]="options?.htmlClass || ''"
-                    [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')"
-                    [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
-                    [style.width]="'100%'">
-      <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
-      <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
-        [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
-      <input matInput *ngIf="boundControl"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [id]="'control' + layoutNode?._id"
-        [max]="options?.maximum"
-        [matDatepicker]="picker"
-        [min]="options?.minimum"
-        [name]="controlName"
-        [placeholder]="options?.title"
-        [readonly]="options?.readonly"
-        [required]="options?.required"
-        [style.width]="'100%'"
-        (blur)="options.showErrors = true"
-        >
-      <input matInput *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [disabled]="controlDisabled || options?.readonly"
-        [id]="'control' + layoutNode?._id"
-        [max]="options?.maximum"
-        [matDatepicker]="picker"
-        [min]="options?.minimum"
-        [name]="controlName"
-        [placeholder]="options?.title"
-        [required]="options?.required"
-        [style.width]="'100%'"
-        [readonly]="options?.readonly"
-        (blur)="options.showErrors = true"
-        >
-      <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
-        [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
-      <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
-        align="end" [innerHTML]="options?.description"></mat-hint>
-      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-    </mat-form-field>
-    <mat-datepicker #picker ></mat-datepicker>
-    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
-      [innerHTML]="options?.errorMessage"></mat-error>`,
-  styles: [`
-    mat-error { font-size: 75%; margin-top: -1rem; margin-bottom: 0.5rem; }
-    ::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex
-      .mat-form-field-infix { width: initial; }
-  `],
-})
-export class MaterialDatepickerComponent implements OnInit {
-  formControl: AbstractControl;
-  controlName: string;
-  dateValue: any;
-  controlDisabled = false;
-  boundControl = false;
-  options: any;
-  autoCompleteList: string[] = [];
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) @Optional() public matFormFieldDefaultOptions,
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-    this.jsf.initializeControl(this, !this.options.readonly);
-    if (!this.options.notitle && !this.options.description && this.options.placeholder) {
-      this.options.description = this.options.placeholder;
-    }
-  }
-}

package/src/lib/widgets/material-file.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-file-widget',
-  template: ``,
-})
-export class MaterialFileComponent 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);
-  }
-}

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

@@ -1,97 +0,0 @@
-import { Component, Inject, Input, OnInit, Optional } from '@angular/core';
-import { AbstractControl } from '@angular/forms';
-import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import { JsonSchemaFormService } from '@ng-formworks/core';
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'material-input-widget',
-  template: `
-    <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
-      [class]="options?.htmlClass || ''"
-      [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')"
-      [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
-      [style.width]="'100%'">
-      <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
-      <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
-        [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
-      <input matInput *ngIf="boundControl"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
-        [attr.maxlength]="options?.maxLength"
-        [attr.minlength]="options?.minLength"
-        [attr.pattern]="options?.pattern"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        [id]="'control' + layoutNode?._id"
-        [name]="controlName"
-        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
-        [required]="options?.required"
-        [style.width]="'100%'"
-        [type]="layoutNode?.type"
-        (blur)="options.showErrors = true">
-      <input matInput *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
-        [attr.maxlength]="options?.maxLength"
-        [attr.minlength]="options?.minLength"
-        [attr.pattern]="options?.pattern"
-        [disabled]="controlDisabled"
-        [id]="'control' + layoutNode?._id"
-        [name]="controlName"
-        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        [required]="options?.required"
-        [style.width]="'100%'"
-        [type]="layoutNode?.type"
-        [value]="controlValue"
-        (input)="updateValue($event)"
-        (blur)="options.showErrors = true">
-      <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
-        [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
-      <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
-        align="end" [innerHTML]="options?.description"></mat-hint>
-      <mat-autocomplete *ngIf="options?.typeahead?.source">
-        <mat-option *ngFor="let word of options?.typeahead?.source"
-          [value]="word">{{word}}</mat-option>
-      </mat-autocomplete>
-    </mat-form-field>
-    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
-      [innerHTML]="options?.errorMessage"></mat-error>`,
-  styles: [`
-    mat-error { font-size: 75%; margin-top: -1rem; margin-bottom: 0.5rem; }
-    ::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex
-      .mat-form-field-infix { width: initial; }
-  `],
-})
-export class MaterialInputComponent implements OnInit {
-  formControl: AbstractControl;
-  controlName: string;
-  controlValue: string;
-  controlDisabled = false;
-  boundControl = false;
-  options: any;
-  autoCompleteList: string[] = [];
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-
-  constructor(
-    @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) @Optional() public matFormFieldDefaultOptions,
-    private jsf: JsonSchemaFormService
-  ) {
-  }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-    this.jsf.initializeControl(this);
-    if (!this.options.notitle && !this.options.description && this.options.placeholder) {
-      this.options.description = this.options.placeholder;
-    }
-  }
-
-  updateValue(event) {
-    this.jsf.updateValue(this, event.target.value);
-  }
-}

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

@@ -1,95 +0,0 @@
-import { Component, Inject, Input, OnInit, Optional } from '@angular/core';
-import { AbstractControl } from '@angular/forms';
-import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import { JsonSchemaFormService } from '@ng-formworks/core';
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'material-number-widget',
-  template: `
-    <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
-    [class]="options?.htmlClass || ''"
-    [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')"
-    [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
-    [style.width]="'100%'">
-    <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
-      <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
-        [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
-      <input matInput *ngIf="boundControl"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.max]="options?.maximum"
-        [attr.min]="options?.minimum"
-        [attr.step]="options?.multipleOf || options?.step || 'any'"
-        [id]="'control' + layoutNode?._id"
-        [name]="controlName"
-        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        [required]="options?.required"
-        [style.width]="'100%'"
-        [type]="'number'"
-        (blur)="options.showErrors = true">
-      <input matInput *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.max]="options?.maximum"
-        [attr.min]="options?.minimum"
-        [attr.step]="options?.multipleOf || options?.step || 'any'"
-        [disabled]="controlDisabled"
-        [id]="'control' + layoutNode?._id"
-        [name]="controlName"
-        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        [required]="options?.required"
-        [style.width]="'100%'"
-        [type]="'number'"
-        [value]="controlValue"
-        (input)="updateValue($event)"
-        (blur)="options.showErrors = true">
-      <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
-        [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
-      <mat-hint *ngIf="layoutNode?.type === 'range'" align="start"
-        [innerHTML]="controlValue"></mat-hint>
-      <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
-        align="end" [innerHTML]="options?.description"></mat-hint>
-    </mat-form-field>
-    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
-      [innerHTML]="options?.errorMessage"></mat-error>`,
-  styles: [`
-    mat-error { font-size: 75%; margin-top: -1rem; margin-bottom: 0.5rem; }
-    ::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex
-      .mat-form-field-infix { width: initial; }
-  `],
-})
-export class MaterialNumberComponent implements OnInit {
-  formControl: AbstractControl;
-  controlName: string;
-  controlValue: any;
-  controlDisabled = false;
-  boundControl = false;
-  options: any;
-  allowNegative = true;
-  allowDecimal = true;
-  allowExponents = false;
-  lastValidNumber = '';
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) @Optional() public matFormFieldDefaultOptions,
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-    this.jsf.initializeControl(this);
-    if (this.layoutNode.dataType === 'integer') { this.allowDecimal = false; }
-    if (!this.options.notitle && !this.options.description && this.options.placeholder) {
-      this.options.description = this.options.placeholder;
-    }
-  }
-
-  updateValue(event) {
-    this.jsf.updateValue(this, event.target.value);
-  }
-}

package/src/lib/widgets/material-one-of.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-one-of-widget',
-  template: ``,
-})
-export class MaterialOneOfComponent 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);
-  }
-}

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

@@ -1,91 +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-radios-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-radio-group *ngIf="boundControl"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.required]="options?.required"
-        [style.flex-direction]="flexDirection"
-        [name]="controlName"
-        (blur)="options.showErrors = true">
-        <mat-radio-button *ngFor="let radioItem of radiosList"
-          [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
-          [value]="radioItem?.value">
-          <span [innerHTML]="radioItem?.name"></span>
-        </mat-radio-button>
-      </mat-radio-group>
-      <mat-radio-group *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.required]="options?.required"
-        [style.flex-direction]="flexDirection"
-        [disabled]="controlDisabled || options?.readonly"
-        [name]="controlName"
-        [value]="controlValue">
-        <mat-radio-button *ngFor="let radioItem of radiosList"
-          [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
-          [value]="radioItem?.value"
-          (click)="updateValue(radioItem?.value)">
-          <span [innerHTML]="radioItem?.name"></span>
-        </mat-radio-button>
-      </mat-radio-group>
-      <mat-error *ngIf="options?.showErrors && options?.errorMessage"
-        [innerHTML]="options?.errorMessage"></mat-error>
-    </div>`,
-  styles: [`
-    /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version. */
-    mat-radio-group { display: inline-flex; }
-    /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version. */
-    mat-radio-button { margin: 2px; }
-    mat-error { font-size: 75%; }
-  `]
-})
-export class MaterialRadiosComponent implements OnInit {
-  formControl: AbstractControl;
-  controlName: string;
-  controlValue: any;
-  controlDisabled = false;
-  boundControl = false;
-  options: any;
-  flexDirection = 'column';
-  radiosList: any[] = [];
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-    if (this.layoutNode.type === 'radios-inline') {
-      this.flexDirection = 'row';
-    }
-    this.radiosList = buildTitleMap(
-      this.options.titleMap || this.options.enumNames,
-      this.options.enum, true
-    );
-    this.jsf.initializeControl(this, !this.options.readonly);
-  }
-
-  updateValue(value) {
-    this.options.showErrors = true;
-    this.jsf.updateValue(this, value);
-  }
-}

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

@@ -1,118 +0,0 @@
-import { Component, Inject, Input, OnInit, Optional } from '@angular/core';
-import { AbstractControl } from '@angular/forms';
-import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import { JsonSchemaFormService, buildTitleMap, isArray } from '@ng-formworks/core';
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'material-select-widget',
-  template: `
-    <mat-form-field
-      [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
-      [class]="options?.htmlClass || ''"
-      [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')"
-      [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
-      [style.width]="'100%'">
-      <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
-      <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
-        [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
-      <mat-select *ngIf="boundControl"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.name]="controlName"
-        [id]="'control' + layoutNode?._id"
-        [multiple]="options?.multiple"
-        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
-        [required]="options?.required"
-        [style.width]="'100%'"
-        (blur)="options.showErrors = true">
-        <ng-template ngFor let-selectItem [ngForOf]="selectList">
-          <mat-option *ngIf="!isArray(selectItem?.items)"
-            [value]="selectItem?.value">
-            <span [innerHTML]="selectItem?.name"></span>
-          </mat-option>
-          <mat-optgroup *ngIf="isArray(selectItem?.items)"
-            [label]="selectItem?.group">
-            <mat-option *ngFor="let subItem of selectItem.items"
-              [value]="subItem?.value">
-              <span [innerHTML]="subItem?.name"></span>
-            </mat-option>
-          </mat-optgroup>
-        </ng-template>
-      </mat-select>
-      <mat-select *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.name]="controlName"
-        [disabled]="controlDisabled || options?.readonly"
-        [id]="'control' + layoutNode?._id"
-        [multiple]="options?.multiple"
-        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
-        [required]="options?.required"
-        [style.width]="'100%'"
-        [value]="controlValue"
-        (blur)="options.showErrors = true"
-        (change)="updateValue($event)">
-        <ng-template ngFor let-selectItem [ngForOf]="selectList">
-          <mat-option *ngIf="!isArray(selectItem?.items)"
-            [attr.selected]="selectItem?.value === controlValue"
-            [value]="selectItem?.value">
-            <span [innerHTML]="selectItem?.name"></span>
-          </mat-option>
-          <mat-optgroup *ngIf="isArray(selectItem?.items)"
-            [label]="selectItem?.group">
-            <mat-option *ngFor="let subItem of selectItem.items"
-              [attr.selected]="subItem?.value === controlValue"
-              [value]="subItem?.value">
-              <span [innerHTML]="subItem?.name"></span>
-            </mat-option>
-          </mat-optgroup>
-        </ng-template>
-      </mat-select>
-      <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
-        [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
-      <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
-        align="end" [innerHTML]="options?.description"></mat-hint>
-    </mat-form-field>
-    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
-      [innerHTML]="options?.errorMessage"></mat-error>`,
-  styles: [`
-    mat-error { font-size: 75%; margin-top: -1rem; margin-bottom: 0.5rem; }
-    ::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex
-      .mat-form-field-infix { width: initial; }
-  `],
-})
-export class MaterialSelectComponent implements OnInit {
-  formControl: AbstractControl;
-  controlName: string;
-  controlValue: any;
-  controlDisabled = false;
-  boundControl = false;
-  options: any;
-  selectList: any[] = [];
-  isArray = isArray;
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) @Optional() public matFormFieldDefaultOptions,
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-    this.selectList = buildTitleMap(
-      this.options.titleMap || this.options.enumNames,
-      this.options.enum, !!this.options.required, !!this.options.flatList
-    );
-    this.jsf.initializeControl(this, !this.options.readonly);
-    if (!this.options.notitle && !this.options.description && this.options.placeholder) {
-      this.options.description = this.options.placeholder;
-    }
-  }
-
-  updateValue(event) {
-    this.options.showErrors = true;
-    this.jsf.updateValue(this, event.value);
-  }
-}

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

@@ -1,65 +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-slider-widget',
-  template: `
-    <mat-slider discrete *ngIf="boundControl"
-      
-      [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-      [id]="'control' + layoutNode?._id"
-      [max]="options?.maximum"
-      [min]="options?.minimum"
-      [step]="options?.multipleOf || options?.step || 'any'"
-      [style.width]="'100%'"
-      (blur)="options.showErrors = true">
-        <input matSliderThumb [formControl]="formControl" />
-      </mat-slider>
-    <mat-slider discrete *ngIf="!boundControl"
-      [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-      [disabled]="controlDisabled || options?.readonly"
-      [id]="'control' + layoutNode?._id"
-      [max]="options?.maximum"
-      [min]="options?.minimum"
-      [step]="options?.multipleOf || options?.step || 'any'"
-      [style.width]="'100%'"
-      (blur)="options.showErrors = true" #ngSlider>
-        <input matSliderThumb [value]="controlValue" 
-        (change)="updateValue({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})"
-        #ngSliderThumb="matSliderThumb" />
-    </mat-slider>
-    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
-      [innerHTML]="options?.errorMessage"></mat-error>`,
-    styles: [` mat-error { font-size: 75%; } `],
-})
-export class MaterialSliderComponent implements OnInit {
-  formControl: AbstractControl;
-  controlName: string;
-  controlValue: any;
-  controlDisabled = false;
-  boundControl = false;
-  options: any;
-  allowNegative = true;
-  allowDecimal = true;
-  allowExponents = false;
-  lastValidNumber = '';
-  @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);
-  }
-
-  updateValue(event) {
-    this.options.showErrors = true;
-    this.jsf.updateValue(this, event.value);
-  }
-}

package/src/lib/widgets/material-stepper.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-stepper-widget',
-  template: ``,
-})
-export class MaterialStepperComponent 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);
-  }
-}