material-design (ng-select not converted)

package.json

@@ -27,13 +27,13 @@
   },
   "private": false,
   "dependencies": {
+    "@angular/animations": "6.1.9",
+    "@angular/cdk": "6.4.7",
     "@angular/common": "^6.0.3",
     "@angular/compiler": "^6.0.3",
     "@angular/core": "^6.0.3",
     "@angular/forms": "^6.0.3",
     "@angular/http": "^6.0.3",
-    "@angular/animations": "6.1.9",
-    "@angular/cdk": "6.4.7",
     "@angular/material": "6.4.7",
     "@angular/platform-browser": "^6.0.3",
     "@angular/platform-browser-dynamic": "^6.0.3",
@@ -52,6 +52,7 @@
     "moment": "2.22.2",
     "multimatch": "2.1.0",
     "ngx-custom-validators": "6.1.0",
+    "ngx-mat-select-search": "^1.4.1",
     "ngx-password-toggle": "1.0.3",
     "rxjs": "^6.0.0",
     "svg.filter.js": "2.0.2",

projects/ngx-forms/src/lib/components/checkbox/ngx-checkbox.component.html

@@ -1,32 +1,46 @@
-<div class="form-group" [class.has-error]="(inputField?.touched || form?.submitted) && inputField?.errors" [ngClass]="containerClass">
+<div class="form-group" [class.has-error]="(inputField?.touched || form?.submitted) && inputField?.errors"
+     [ngClass]="containerClass">
 
   <div class="custom-control custom-checkbox">
-    <input [checked]="checked" #inputField="ngModel" class="custom-control-input" [ngClass]="inputClass" [readonly]="readonly" [disabled]="disabled" type="checkbox" [id]="inputId" [name]="name" [(ngModel)]="_ngModel" (change)="emitChange()" [required]="!!_validators?.required" [attr.aria-labelledby]="!label && placeholder ? 'ngx-aria-label-' + inputId : null" [attr.aria-invalid]="!!((inputField?.touched || form?.submitted) && inputField?.errors)" [attr.aria-describedby]="!!((inputField?.touched || form?.submitted) && inputField?.errors) ? 'ngx-error-' + inputId : ( hint ? 'ngx-hint-' + inputId : null )">
+    <mat-checkbox [checked]="checked" #inputField="ngModel" [ngClass]="inputClass" [labelPosition]="labelPosition"
+                  [attr.readonly]="readonly" [disabled]="disabled" [id]="inputId" [name]="name"
+                  [(ngModel)]="_ngModel" (change)="emitChange()" [required]="!!_validators?.required"
+                  [attr.aria-labelledby]="!label && placeholder ? 'ngx-aria-label-' + inputId : null"
+                  [attr.aria-invalid]="!!((inputField?.touched || form?.submitted) && inputField?.errors)"
+                  [attr.aria-describedby]="!!((inputField?.touched || form?.submitted) && inputField?.errors) ? 'ngx-error-' + inputId : ( hint ? 'ngx-hint-' + inputId : null )">
+
+      <ng-template [ngIf]="label && showLabel">
+        <span [ngClass]="labelClass"> {{ label }}
+          <ng-template [ngIf]="!!_validators?.required"><sup class="text-danger">*</sup></ng-template>
+        </span>
+      </ng-template>
+
+    </mat-checkbox>
 
-    <ng-template [ngIf]="label && showLabel">
-      <label [ngClass]="labelClass" class="custom-control-label" [for]="inputId"> {{ label }}
-        <ng-template [ngIf]="!!_validators?.required"><sup class="text-danger">*</sup></ng-template>
-      </label>
-    </ng-template>
   </div>
 
+  <mat-error>
+    <ng-template [ngIf]="(inputField?.touched || form?.submitted) && inputField?.errors" [ngIfElse]="hintTemplate">
+      <ng-template ngFor [ngForOf]="_validators | keyvalue" let-item>
+        <ng-template [ngIf]="inputField?.errors[item?.key]">
+          <div [id]="'ngx-error-' + inputId" class="invalid-feedback" [ngClass]="errorClass">
+            {{_validators[item?.key] | message: name: label}}
+          </div>
+        </ng-template>
+      </ng-template>
+    </ng-template>
+  </mat-error>
 
-  <ng-template [ngIf]="(inputField?.touched || form?.submitted) && inputField?.errors" [ngIfElse]="hintTemplate">
-    <ng-template ngFor [ngForOf]="_validators | keyvalue" let-item>
-      <ng-template [ngIf]="inputField?.errors[item?.key]">
-        <div [id]="'ngx-error-' + inputId" class="invalid-feedback" [ngClass]="errorClass">
-          {{_validators[item?.key] | message: name: label}}
+  <mat-hint>
+    <ng-template #hintTemplate>
+      <ng-template [ngIf]="hint">
+        <div [id]="'ngx-hint-' + inputId" class="feedback" [ngClass]="hintClass">
+          {{ hint }}
         </div>
       </ng-template>
     </ng-template>
-  </ng-template>
-  <ng-template #hintTemplate>
-    <ng-template [ngIf]="hint">
-      <div [id]="'ngx-hint-' + inputId" class="feedback" [ngClass]="hintClass">
-        {{ hint }}
-      </div>
-    </ng-template>
-  </ng-template>
+  </mat-hint>
+
 </div>
 
 

projects/ngx-forms/src/lib/components/checkbox/ngx-checkbox.component.ts

@@ -28,6 +28,7 @@ import {FormInputBase} from '../common/base.class';
 
 export class NgxCheckboxComponent extends FormInputBase {
   @Input() type = 'checkbox';
+  @Input() labelPosition = 'after';
 
   constructor(public injector: Injector) {
     super(injector);

projects/ngx-forms/src/lib/components/date/ngx-date.component.html

@@ -1,38 +1,47 @@
-<div class="form-group" [class.has-error]="(inputField?.touched || form?.submitted) && inputField?.errors" [ngClass]="containerClass" [class.prefix-left]="!!prefixLeft || !!prefixLeftIcon" [class.prefix-right]="!!prefixRight || !!prefixRightIcon">
+<mat-form-field class="form-group" [class.has-error]="(inputField?.touched || form?.submitted) && inputField?.errors"
+     [ngClass]="containerClass" [class.prefix-left]="!!prefixLeft || !!prefixLeftIcon"
+     [class.prefix-right]="!!prefixRight || !!prefixRightIcon">
 
   <ng-template [ngIf]="prefixLeftIcon">
-    <span class="input-prefix">
+    <span class="input-prefix" matPrefix>
       <span class="icon icon-{{prefixLeftIcon}}"></span>
     </span>
   </ng-template>
   <ng-template [ngIf]="prefixRightIcon">
-    <span class="input-prefix">
+    <span class="input-prefix" matSuffix>
       <span class="icon icon-{{prefixRightIcon}}"></span>
     </span>
   </ng-template>
 
   <ng-template [ngIf]="prefixLeft">
-    <span class="input-prefix">
+    <span class="input-prefix" matPrefix>
       {{prefixLeft}}
     </span>
   </ng-template>
   <ng-template [ngIf]="prefixRight">
-    <span class="input-prefix">
+    <span class="input-prefix" matSuffix>
       {{prefixRight}}
     </span>
   </ng-template>
 
-
+<mat-label>
   <ng-template [ngIf]="label && showLabel">
     <label [ngClass]="labelClass" [for]="inputId"> {{ label }}
-      <ng-template [ngIf]="!!_validators?.required"><sup class="text-danger">*</sup></ng-template>
+      <ng-template [ngIf]="!!_validators?.required"></ng-template>
     </label>
   </ng-template>
+</mat-label>
 
 
-  <input #inputField="ngModel" [mode]="mode" ngxFlatpickr class="form-control" [readonly]="readonly" [disabled]="disabled" type="text" [id]="inputId" [name]="name" [placeholder]="placeholder + (!!_validators?.required && placeholder ? ' *' : '')" [(ngModel)]="_ngModel" (onChange)="emitChange()" [required]="!!_validators?.required" [minDate]="minDate" [maxDate]="maxDate" [attr.aria-labelledby]="!label && placeholder ? 'ngx-aria-label-' + inputId : null" [attr.aria-invalid]="!!((inputField?.touched || form?.submitted) && inputField?.errors)" [attr.aria-describedby]="!!((inputField?.touched || form?.submitted) && inputField?.errors) ? 'ngx-error-' + inputId : ( hint ? 'ngx-hint-' + inputId : null )">
-
+  <input matInput #inputField="ngModel" [mode]="mode" ngxFlatpickr [readonly]="readonly"
+         [disabled]="disabled" type="text" [id]="inputId" [name]="name"
+         [placeholder]="placeholder + (!!_validators?.required && placeholder ? ' *' : '')" [(ngModel)]="_ngModel"
+         (onChange)="emitChange()" [required]="!!_validators?.required" [minDate]="minDate" [maxDate]="maxDate"
+         [attr.aria-labelledby]="!label && placeholder ? 'ngx-aria-label-' + inputId : null"
+         [attr.aria-invalid]="!!((inputField?.touched || form?.submitted) && inputField?.errors)"
+         [attr.aria-describedby]="!!((inputField?.touched || form?.submitted) && inputField?.errors) ? 'ngx-error-' + inputId : ( hint ? 'ngx-hint-' + inputId : null )">
 
+<mat-error>
   <ng-template [ngIf]="(inputField?.touched || form?.submitted) && inputField?.errors" [ngIfElse]="hintTemplate">
     <ng-template ngFor [ngForOf]="_validators | keyvalue" let-item>
       <ng-template [ngIf]="inputField?.errors[item?.key]">
@@ -42,14 +51,19 @@
       </ng-template>
     </ng-template>
   </ng-template>
-  <ng-template #hintTemplate>
-    <ng-template [ngIf]="hint">
-      <div [id]="'ngx-hint-' + inputId" class="feedback" [ngClass]="hintClass">
-        {{ hint }}
-      </div>
+</mat-error>
+
+  <mat-hint>
+    <ng-template #hintTemplate>
+      <ng-template [ngIf]="hint">
+        <div [id]="'ngx-hint-' + inputId" class="feedback" [ngClass]="hintClass">
+          {{ hint }}
+        </div>
+      </ng-template>
     </ng-template>
-  </ng-template>
-</div>
+  </mat-hint>
+
+</mat-form-field>
 
 
 <ng-template [ngIf]="!label && placeholder">

projects/ngx-forms/src/lib/components/input/ngx-input.component.html

@@ -1,53 +1,69 @@
-<div class="form-group" [class.has-error]="(inputField?.touched || form?.submitted) && inputField?.errors" [ngClass]="containerClass" [class.prefix-left]="!!prefixLeft || !!prefixLeftIcon" [class.prefix-right]="!!prefixRight || !!prefixRightIcon">
+<mat-form-field class="form-group" [class.has-error]="(inputField?.touched || form?.submitted) && inputField?.errors"
+                [ngClass]="containerClass" [class.prefix-left]="!!prefixLeft || !!prefixLeftIcon"
+                [class.prefix-right]="!!prefixRight || !!prefixRightIcon">
 
   <ng-template [ngIf]="prefixLeftIcon">
-    <span class="input-prefix">
+    <span class="input-prefix" matPrefix>
       <span class="icon icon-{{prefixLeftIcon}}"></span>
     </span>
   </ng-template>
   <ng-template [ngIf]="prefixRightIcon">
-    <span class="input-prefix">
+    <span class="input-prefix" matSuffix>
       <span class="icon icon-{{prefixRightIcon}}"></span>
     </span>
   </ng-template>
 
   <ng-template [ngIf]="prefixLeft">
-    <span class="input-prefix">
+    <span class="input-prefix" matPrefix>
       {{prefixLeft}}
     </span>
   </ng-template>
   <ng-template [ngIf]="prefixRight">
-    <span class="input-prefix">
+    <span class="input-prefix" matSuffix>
       {{prefixRight}}
     </span>
   </ng-template>
 
+  <mat-label>
+    <ng-template [ngIf]="label && showLabel">
+      <label [ngClass]="labelClass" [for]="inputId"> {{ label }}
+        <ng-template [ngIf]="!!_validators?.required"></ng-template>
+      </label>
+    </ng-template>
+  </mat-label>
 
-  <ng-template [ngIf]="label && showLabel">
-    <label [ngClass]="labelClass" [for]="inputId"> {{ label }}
-      <ng-template [ngIf]="!!_validators?.required"><sup class="text-danger">*</sup></ng-template>
-    </label>
-  </ng-template>
 
-  <input #inputField="ngModel" class="form-control" [ngClass]="inputClass" [readonly]="readonly" [disabled]="disabled" [type]="type" [id]="inputId" [name]="name" [placeholder]="placeholder + (!!_validators?.required && placeholder ? ' *' : '')" [(ngModel)]="_ngModel" (input)="emitChange()" [required]="!!_validators?.required" [attr.aria-labelledby]="!label && placeholder ? 'ngx-aria-label-' + inputId : null" [attr.aria-invalid]="!!((inputField?.touched || form?.submitted) && inputField?.errors)" [attr.aria-describedby]="!!((inputField?.touched || form?.submitted) && inputField?.errors) ? 'ngx-error-' + inputId : ( hint ? 'ngx-hint-' + inputId : null )">
+  <input matInput #inputField="ngModel" [ngClass]="inputClass" [readonly]="readonly" [disabled]="disabled"
+         [type]="type" [id]="inputId" [name]="name"
+         [placeholder]="placeholder + (!!_validators?.required && placeholder ? ' *' : '')" [(ngModel)]="_ngModel"
+         (input)="emitChange()" [required]="!!_validators?.required"
+         [attr.aria-labelledby]="!label && placeholder ? 'ngx-aria-label-' + inputId : null"
+         [attr.aria-invalid]="!!((inputField?.touched || form?.submitted) && inputField?.errors)"
+         [attr.aria-describedby]="!!((inputField?.touched || form?.submitted) && inputField?.errors) ? 'ngx-error-' + inputId : ( hint ? 'ngx-hint-' + inputId : null )">
 
-  <ng-template [ngIf]="(inputField?.touched || form?.submitted) && inputField?.errors" [ngIfElse]="hintTemplate">
-    <ng-template ngFor [ngForOf]="_validators | keyvalue" let-item>
-      <ng-template [ngIf]="inputField?.errors[item?.key]">
-        <div [id]="'ngx-error-' + inputId" class="invalid-feedback" [ngClass]="errorClass">
-          {{_validators[item?.key] | message: name: label}}
-        </div>
+  <mat-error>
+    <ng-template [ngIf]="(inputField?.touched || form?.submitted) && inputField?.errors" [ngIfElse]="hintTemplate">
+      <ng-template ngFor [ngForOf]="_validators | keyvalue" let-item>
+        <ng-template [ngIf]="inputField?.errors[item?.key]">
+          <div [id]="'ngx-error-' + inputId" class="invalid-feedback" [ngClass]="errorClass">
+            {{_validators[item?.key] | message: name: label}}
+          </div>
+        </ng-template>
       </ng-template>
     </ng-template>
-  </ng-template>
-  <ng-template #hintTemplate>
-    <ng-template [ngIf]="hint">
-      <div [id]="'ngx-hint-' + inputId" class="feedback" [ngClass]="hintClass">
-        {{ hint }}
-      </div>
+  </mat-error>
+
+  <mat-hint>
+    <ng-template #hintTemplate>
+      <ng-template [ngIf]="hint">
+        <div [id]="'ngx-hint-' + inputId" class="feedback" [ngClass]="hintClass">
+          {{ hint }}
+        </div>
+      </ng-template>
     </ng-template>
-  </ng-template>
-</div>
+  </mat-hint>
+
+</mat-form-field>
 
 <ng-template [ngIf]="!label && placeholder">
   <div [attr.aria-hidden]="true" style="display: none" [id]="'ngx-aria-label-' + inputId">{{ placeholder }}</div>

projects/ngx-forms/src/lib/components/password/ngx-password.component.html

@@ -1,55 +1,69 @@
-<div class="form-group" [class.has-error]="(inputField?.touched || form?.submitted) && inputField?.errors" [ngClass]="containerClass" [class.prefix-left]="!!prefixLeft || !!prefixLeftIcon" [class.prefix-right]="!!prefixRight || !!prefixRightIcon">
+<mat-form-field class="form-group" [class.has-error]="(inputField?.touched || form?.submitted) && inputField?.errors"
+                [ngClass]="containerClass" [class.prefix-left]="!!prefixLeft || !!prefixLeftIcon"
+                [class.prefix-right]="!!prefixRight || !!prefixRightIcon">
 
   <ng-template [ngIf]="prefixLeftIcon">
-    <span class="input-prefix">
+    <span class="input-prefix" matPrefix>
       <span class="icon icon-{{prefixLeftIcon}}"></span>
     </span>
   </ng-template>
   <ng-template [ngIf]="prefixRightIcon">
-    <span class="input-prefix">
+    <span class="input-prefix" matSuffix>
       <span class="icon icon-{{prefixRightIcon}}"></span>
     </span>
   </ng-template>
 
   <ng-template [ngIf]="prefixLeft">
-    <span class="input-prefix">
+    <span class="input-prefix" matPrefix>
       {{prefixLeft}}
     </span>
   </ng-template>
   <ng-template [ngIf]="prefixRight">
-    <span class="input-prefix">
+    <span class="input-prefix" matSuffix>
       {{prefixRight}}
     </span>
   </ng-template>
 
-
-  <ng-template [ngIf]="label && showLabel">
-    <label [ngClass]="labelClass" [for]="inputId"> {{ label }}
-      <ng-template [ngIf]="!!_validators?.required"><sup class="text-danger">*</sup></ng-template>
-    </label>
-  </ng-template>
+  <mat-label>
+    <ng-template [ngIf]="label && showLabel">
+      <label [ngClass]="labelClass" [for]="inputId"> {{ label }}
+        <ng-template [ngIf]="!!_validators?.required"></ng-template>
+      </label>
+    </ng-template>
+  </mat-label>
 
 
-  <input passwordToggle #inputField="ngModel" class="form-control" [readonly]="readonly" [disabled]="disabled" type="password" [id]="inputId" [name]="name" [placeholder]="placeholder + (!!_validators?.required && placeholder ? ' *' : '')" [(ngModel)]="_ngModel" (input)="emitChange()" [required]="!!_validators?.required" [attr.aria-labelledby]="!label && placeholder ? 'ngx-aria-label-' + inputId : null" [attr.aria-invalid]="!!((inputField?.touched || form?.submitted) && inputField?.errors)" [attr.aria-describedby]="!!((inputField?.touched || form?.submitted) && inputField?.errors) ? 'ngx-error-' + inputId : ( hint ? 'ngx-hint-' + inputId : null )">
+  <input matInput passwordToggle #inputField="ngModel" class="form-control" [readonly]="readonly" [disabled]="disabled"
+         type="password" [id]="inputId" [name]="name"
+         [placeholder]="placeholder + (!!_validators?.required && placeholder ? ' *' : '')" [(ngModel)]="_ngModel"
+         (input)="emitChange()" [required]="!!_validators?.required"
+         [attr.aria-labelledby]="!label && placeholder ? 'ngx-aria-label-' + inputId : null"
+         [attr.aria-invalid]="!!((inputField?.touched || form?.submitted) && inputField?.errors)"
+         [attr.aria-describedby]="!!((inputField?.touched || form?.submitted) && inputField?.errors) ? 'ngx-error-' + inputId : ( hint ? 'ngx-hint-' + inputId : null )">
 
+  <mat-error>
+    <ng-template [ngIf]="(inputField?.touched || form?.submitted) && inputField?.errors" [ngIfElse]="hintTemplate">
+      <ng-template ngFor [ngForOf]="_validators | keyvalue" let-item>
+        <ng-template [ngIf]="inputField?.errors[item?.key]">
+          <div [id]="'ngx-error-' + inputId" class="invalid-feedback" [ngClass]="errorClass">
+            {{_validators[item?.key] | message: name: label}}
+          </div>
+        </ng-template>
+      </ng-template>
+    </ng-template>
+  </mat-error>
 
-  <ng-template [ngIf]="(inputField?.touched || form?.submitted) && inputField?.errors" [ngIfElse]="hintTemplate">
-    <ng-template ngFor [ngForOf]="_validators | keyvalue" let-item>
-      <ng-template [ngIf]="inputField?.errors[item?.key]">
-        <div [id]="'ngx-error-' + inputId" class="invalid-feedback" [ngClass]="errorClass">
-          {{_validators[item?.key] | message: name: label}}
+  <mat-hint>
+    <ng-template #hintTemplate>
+      <ng-template [ngIf]="hint">
+        <div [id]="'ngx-hint-' + inputId" class="feedback" [ngClass]="hintClass">
+          {{ hint }}
         </div>
       </ng-template>
     </ng-template>
-  </ng-template>
-  <ng-template #hintTemplate>
-    <ng-template [ngIf]="hint">
-      <div [id]="'ngx-hint-' + inputId" class="feedback" [ngClass]="hintClass">
-        {{ hint }}
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
+  </mat-hint>
+
+</mat-form-field>
 
 
 <ng-template [ngIf]="!label && placeholder">