@ng-formworks/material 15.2.7

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

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

@@ -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-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

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

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

@@ -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-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

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

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

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

@@ -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-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);
+  }
+}