From b2a3acea0d0f66028c9ce5fad02d4ecc64abf70c Mon Sep 17 00:00:00 2001
From: Israel Lavi <il0695@att.com>
Date: Tue, 7 Aug 2018 10:54:17 +0300
Subject: Initial commit.

Adding files needed for Linux Foundation.

Change-Id: I9f2b4851a5ae01f83800c7f8bab8608a2221c730
Issue-ID: SDC-1608
Signed-off-by: Israel Lavi <il0695@att.com>
---
 .../checkbox/checkbox.component.html.ts            |  4 +-
 .../checkbox/checkbox.component.spec.ts            |  1 -
 .../form-elements/checkbox/checkbox.component.ts   |  3 +-
 .../form-elements/dropdown/dropdown-models.ts      | 14 +++---
 .../dropdown/dropdown.component.html.ts            |  2 +-
 .../form-elements/dropdown/dropdown.component.ts   | 20 +++++---
 src/angular/form-elements/form-elements.module.ts  |  7 ++-
 .../form-elements/input/input.component.html.ts    | 19 --------
 src/angular/form-elements/input/input.component.ts | 54 ----------------------
 .../radios/radio-buttons-group.component.html.ts   |  6 +--
 .../radios/radio-buttons-group.component.ts        |  8 ++--
 .../text-elements/base-text-element.component.ts   | 46 ++++++++++++++++++
 .../text-elements/input/input.component.html.ts    | 19 ++++++++
 .../text-elements/input/input.component.ts         | 18 ++++++++
 .../textarea/textarea.component.html.ts            | 18 ++++++++
 .../text-elements/textarea/textarea.component.ts   | 14 ++++++
 .../validation/validatable.component.ts            |  8 ++--
 .../validation/validation-group.component.html.ts  |  2 +-
 .../validation/validation-group.component.ts       | 12 +----
 .../validation/validation.component.html.ts        |  4 +-
 .../validation/validation.component.ts             |  9 ++--
 .../form-elements/validation/validation.module.ts  |  1 -
 .../validators/base.validator.component.html.ts    |  4 +-
 .../validators/base.validator.component.ts         |  8 +---
 .../validators/custom.validator.component.ts       |  2 +-
 .../validators/regex.validator.component.ts        |  2 +-
 .../validators/required.validator.component.ts     |  2 +-
 27 files changed, 173 insertions(+), 134 deletions(-)
 delete mode 100644 src/angular/form-elements/input/input.component.html.ts
 delete mode 100644 src/angular/form-elements/input/input.component.ts
 create mode 100644 src/angular/form-elements/text-elements/base-text-element.component.ts
 create mode 100644 src/angular/form-elements/text-elements/input/input.component.html.ts
 create mode 100644 src/angular/form-elements/text-elements/input/input.component.ts
 create mode 100644 src/angular/form-elements/text-elements/textarea/textarea.component.html.ts
 create mode 100644 src/angular/form-elements/text-elements/textarea/textarea.component.ts

(limited to 'src/angular/form-elements')

diff --git a/src/angular/form-elements/checkbox/checkbox.component.html.ts b/src/angular/form-elements/checkbox/checkbox.component.html.ts
index f4031db..3fdd53f 100644
--- a/src/angular/form-elements/checkbox/checkbox.component.html.ts
+++ b/src/angular/form-elements/checkbox/checkbox.component.html.ts
@@ -1,7 +1,7 @@
-export default `
+export const template = `
 <div class="sdc-checkbox">
     <label SdcRippleClickAnimation [rippleClickDisabled]="disabled">
-        <input type="checkbox" class="sdc-checkbox__input" [ngModel]="checked" (ngModelChange)="toggleState($event)" [disabled]="disabled">
+        <input type="checkbox" class="sdc-checkbox__input" [ngModel]="checked" (ngModelChange)="toggleState($event)" [disabled]="disabled" [attr.data-tests-id]="testId">
         <span class="sdc-checkbox__label">{{ label }}</span>
     </label>
 </div>
diff --git a/src/angular/form-elements/checkbox/checkbox.component.spec.ts b/src/angular/form-elements/checkbox/checkbox.component.spec.ts
index 36f478e..8fc63e2 100644
--- a/src/angular/form-elements/checkbox/checkbox.component.spec.ts
+++ b/src/angular/form-elements/checkbox/checkbox.component.spec.ts
@@ -3,7 +3,6 @@ import { CheckboxComponent } from "./checkbox.component";
 import { AnimationDirectivesModule } from "../../animations/animation-directives.module";
 import { FormsModule } from "@angular/forms";
 
-
 describe("Checbox Tests", ()=>{
     let component: CheckboxComponent;
     beforeEach(async(() => {
diff --git a/src/angular/form-elements/checkbox/checkbox.component.ts b/src/angular/form-elements/checkbox/checkbox.component.ts
index ec05eac..2b50e6d 100644
--- a/src/angular/form-elements/checkbox/checkbox.component.ts
+++ b/src/angular/form-elements/checkbox/checkbox.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
-import template from "./checkbox.component.html";
+import { template } from "./checkbox.component.html";
 
 @Component({
     selector: 'sdc-checkbox',
@@ -10,6 +10,7 @@ export class CheckboxComponent {
     @Input() label:string;
     @Input() checked:boolean;
     @Input() disabled:boolean;
+    @Input() testId: string;
     @Output() checkedChange:EventEmitter<any> = new EventEmitter<any>();
 
     public toggleState(newState:boolean) {
diff --git a/src/angular/form-elements/dropdown/dropdown-models.ts b/src/angular/form-elements/dropdown/dropdown-models.ts
index fa8dc23..a718c07 100644
--- a/src/angular/form-elements/dropdown/dropdown-models.ts
+++ b/src/angular/form-elements/dropdown/dropdown-models.ts
@@ -1,14 +1,14 @@
 export enum DropDownTypes {
-    Regular,
-    Headless,
-    Auto
+    Regular = "Regular",
+    Headless = "Headless",
+    Auto = "Auto"
 }
 
 export enum DropDownOptionType {
-    Simple, // default
-    Header,
-    Disable,
-    HorizontalLine
+    Simple = "Simple", // default
+    Header = "Header",
+    Disable = "Disable",
+    HorizontalLine = "HorizontalLine"
 }
 
 export interface IDropDownOption {
diff --git a/src/angular/form-elements/dropdown/dropdown.component.html.ts b/src/angular/form-elements/dropdown/dropdown.component.html.ts
index a4247a4..36ce17c 100644
--- a/src/angular/form-elements/dropdown/dropdown.component.html.ts
+++ b/src/angular/form-elements/dropdown/dropdown.component.html.ts
@@ -1,4 +1,4 @@
-export default `
+export const template = `
 <div class="sdc-dropdown" #dropDownWrapper
     [ngClass]="{
     'headless': type === cIDropDownTypes.Headless,
diff --git a/src/angular/form-elements/dropdown/dropdown.component.ts b/src/angular/form-elements/dropdown/dropdown.component.ts
index a23072f..33f54ac 100644
--- a/src/angular/form-elements/dropdown/dropdown.component.ts
+++ b/src/angular/form-elements/dropdown/dropdown.component.ts
@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, Output, forwardRef, OnChanges, SimpleChanges, OnInit, ElementRef, ViewChild, AfterViewInit, HostListener, Renderer } from '@angular/core';
 import { IDropDownOption, DropDownOptionType, DropDownTypes } from "./dropdown-models";
 import { ValidatableComponent } from './../validation/validatable.component';
-import template from './dropdown.component.html';
+import { template } from './dropdown.component.html';
 
 @Component({
     selector: 'sdc-dropdown',
@@ -24,7 +24,7 @@ export class DropDownComponent extends ValidatableComponent implements OnChanges
         this.onClickDocument(e);
     }
 
-    private bottomVisible = true;
+    public bottomVisible = true;
     private myRenderer: Renderer;
 
     // Drop-down show/hide flag. default is false (closed)
@@ -57,7 +57,9 @@ export class DropDownComponent extends ValidatableComponent implements OnChanges
     ngOnInit(): void {
         if (this.options) {
             this.allOptions = this.options;
-            if (this.options.find(option => option.type === DropDownOptionType.Header)) {
+            // To support ES5
+            if (this.options.filter(option => option.type === DropDownOptionType.Header).length>0) {
+            // if (this.options.find(option => option.type === DropDownOptionType.Header)) {
                 this.isGroupDesign = true;
             }
         }
@@ -114,14 +116,20 @@ export class DropDownComponent extends ValidatableComponent implements OnChanges
     }
 
     private isSelectable = (value: string): boolean => {
-        const option: IDropDownOption = this.options.find(o => o.value === value);
+        // Support ES5
+        // const option: IDropDownOption = this.options.find(o => o.value === value);
+        const option: IDropDownOption = this.options.filter(o => o.value === value)[0];
         if (!option) { return false; }
         if (!option.type) { return true; }
-        return !this.unselectableOptions.find(optionType => optionType === option.type);
+        // Support ES5
+        // return !this.unselectableOptions.find(optionType => optionType === option.type);
+        return !this.unselectableOptions.filter(optionType => optionType === option.type)[0];
     }
 
     private setSelected = (value: string): void => {
-        this.selectedOption = this.options.find(o => o.value === value);
+        // Support ES5
+        // this.selectedOption = this.options.find(o => o.value === value);
+        this.selectedOption = this.options.filter(o => o.value === value)[0];
         if (this.type === DropDownTypes.Auto) { this.filterValue = value; }
         this.show = false;
         this.changeEmitter.next(this.selectedOption);
diff --git a/src/angular/form-elements/form-elements.module.ts b/src/angular/form-elements/form-elements.module.ts
index 744f8b8..d290eda 100644
--- a/src/angular/form-elements/form-elements.module.ts
+++ b/src/angular/form-elements/form-elements.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { InputComponent } from "./input/input.component";
+import { InputComponent } from "./text-elements/input/input.component";
 import { DropDownComponent } from "./dropdown/dropdown.component";
 import { CommonModule } from "@angular/common";
 import { CheckboxComponent } from "./checkbox/checkbox.component";
@@ -9,6 +9,7 @@ import { AnimationDirectivesModule } from '../animations/animation-directives.mo
 import { DropDownTriggerDirective } from "./dropdown/dropdown-trigger.directive";
 import {SvgIconModule} from "../svg-icon/svg-icon.module";
 import { ValidationModule } from './validation/validation.module';
+import {TextareaComponent} from "./text-elements/textarea/textarea.component";
 
 @NgModule({
     imports: [
@@ -24,6 +25,7 @@ import { ValidationModule } from './validation/validation.module';
         CheckboxComponent,
         RadioGroupComponent,
         DropDownTriggerDirective,
+        TextareaComponent
     ],
     exports: [
         DropDownComponent,
@@ -31,7 +33,8 @@ import { ValidationModule } from './validation/validation.module';
         InputComponent,
         CheckboxComponent,
         RadioGroupComponent,
-        ValidationModule
+        ValidationModule,
+        TextareaComponent
     ]
 })
 export class FormElementsModule {
diff --git a/src/angular/form-elements/input/input.component.html.ts b/src/angular/form-elements/input/input.component.html.ts
deleted file mode 100644
index f8a4609..0000000
--- a/src/angular/form-elements/input/input.component.html.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export default `
-<div class="sdc-input ">
-    <label class="sdc-input__label" *ngIf="label" [ngClass]="{'required':required}">{{label}}</label>
-    <input
-        class="sdc-input__input {{classNames}}"
-        [ngClass]="{'error': !valid, 'disabled':disabled}"
-        [attr.name]="name ? name : null"
-        [placeholder]="placeHolder"
-        [(ngModel)]="value"
-        [maxlength]="maxLength"
-        [minlength]="minLength"
-        [type]="type"
-        [formControl]="control"
-        [attr.disabled]="disabled ? 'disabled' : null"
-        (input)="onKeyPress($event.target.value)"
-        [attr.data-tests-id]="testId"
-    />
-</div>
-`;
diff --git a/src/angular/form-elements/input/input.component.ts b/src/angular/form-elements/input/input.component.ts
deleted file mode 100644
index af0e9f4..0000000
--- a/src/angular/form-elements/input/input.component.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormControl } from "@angular/forms";
-import { ValidationComponent } from '../validation/validation.component';
-import { ValidatableComponent } from './../validation/validatable.component';
-import 'rxjs/add/operator/debounceTime';
-import template from "./input.component.html";
-
-@Component({
-    selector: 'sdc-input',
-    template: template,
-})
-export class InputComponent extends ValidatableComponent implements OnInit {
-
-    @Output('valueChange') public baseEmitter: EventEmitter<any> = new EventEmitter<any>();
-    @Input() public label: string;
-    @Input() public value: any;
-    @Input() public name: string;
-    @Input() public classNames: string;
-    @Input() public disabled: boolean;
-    @Input() public type: string;
-    @Input() public placeHolder: string;
-    @Input() public required: boolean;
-    @Input() public minLength: number;
-    @Input() public maxLength: number;
-    @Input() public debounceTime: number;
-    @Input() public testId: string;
-
-    protected control: FormControl;
-
-    constructor() {
-        super();
-        this.control = new FormControl('', []);
-        this.debounceTime = 0;
-        this.placeHolder = '';
-        this.type = 'text';
-    }
-
-    ngOnInit() {
-        this.control.valueChanges.
-        debounceTime(this.debounceTime)
-            .subscribe((newValue: any) => {
-                this.baseEmitter.emit(this.value);
-            });
-    }
-
-    public getValue(): any {
-        return this.value;
-    }
-
-    onKeyPress(value: string) {
-        this.valueChanged(this.value);
-    }
-
-}
diff --git a/src/angular/form-elements/radios/radio-buttons-group.component.html.ts b/src/angular/form-elements/radios/radio-buttons-group.component.html.ts
index 28a27af..a0026f2 100644
--- a/src/angular/form-elements/radios/radio-buttons-group.component.html.ts
+++ b/src/angular/form-elements/radios/radio-buttons-group.component.html.ts
@@ -1,7 +1,7 @@
-export default `
+export const template = `
 <label class='sdc-radio-group__legend'>{{legend}}</label>
 <div class='sdc-radio-group__radios {{direction}}'>
-    <template *ngFor="let item of options.items">
+    <div *ngFor="let item of options.items">
         <div class="sdc-radio">
             <label class="sdc-radio__animation-wrapper" SdcRippleClickAnimation [rippleClickDisabled]="disabled">
                 <input class="sdc-radio__input"
@@ -15,6 +15,6 @@ export default `
                 <span class="sdc-radio__label">{{ item.label }}</span>
             </label>
         </div>
-    </template>
+    </div>
 </div>
 `;
diff --git a/src/angular/form-elements/radios/radio-buttons-group.component.ts b/src/angular/form-elements/radios/radio-buttons-group.component.ts
index 800d8b0..9fa6b7d 100644
--- a/src/angular/form-elements/radios/radio-buttons-group.component.ts
+++ b/src/angular/form-elements/radios/radio-buttons-group.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, Output, ViewEncapsulation, EventEmitter, HostBinding } from "@angular/core";
 import { Direction, IOptionGroup, IRadioButtonModel } from "./radio-button.model";
-import template from './radio-buttons-group.component.html';
+import { template } from './radio-buttons-group.component.html';
 
 @Component({
     selector: 'sdc-radio-group',
@@ -43,9 +43,11 @@ export class RadioGroupComponent {
     }
 
     private isOptionExists(value) {
-        const exist = this.options.items.find((item: IRadioButtonModel) => {
+        // Support ES5
+        // const exist = this.options.items.find((item: IRadioButtonModel) => {
+        const exist = this.options.items.filter((item: IRadioButtonModel) => {
             return item.value === value;
-        });
+        })[0];
         return exist !== undefined;
     }
 
diff --git a/src/angular/form-elements/text-elements/base-text-element.component.ts b/src/angular/form-elements/text-elements/base-text-element.component.ts
new file mode 100644
index 0000000..a87238f
--- /dev/null
+++ b/src/angular/form-elements/text-elements/base-text-element.component.ts
@@ -0,0 +1,46 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormControl } from "@angular/forms";
+import { ValidatableComponent } from "../validation/validatable.component";
+import 'rxjs/add/operator/debounceTime';
+
+export class BaseTextElementComponent extends ValidatableComponent implements OnInit {
+
+    @Output('valueChange') public baseEmitter: EventEmitter<any> = new EventEmitter<any>();
+    @Input() public label: string;
+    @Input() public value: any;
+    @Input() public name: string;
+    @Input() public classNames: string;
+    @Input() public disabled: boolean;
+    @Input() public placeHolder: string;
+    @Input() public required: boolean;
+    @Input() public minLength: number;
+    @Input() public maxLength: number;
+    @Input() public debounceTime: number;
+    @Input() public testId: string;
+
+    public control: FormControl;
+
+    constructor() {
+        super();
+        this.control = new FormControl('', []);
+        this.debounceTime = 0;
+        this.placeHolder = '';
+    }
+
+    ngOnInit() {
+        this.control.valueChanges.
+            debounceTime(this.debounceTime)
+            .subscribe((newValue: any) => {
+                this.baseEmitter.emit(this.value);
+            });
+    }
+
+    public getValue(): any {
+        return this.value;
+    }
+
+    onKeyPress(value: string) {
+        this.valueChanged(this.value);
+    }
+
+}
diff --git a/src/angular/form-elements/text-elements/input/input.component.html.ts b/src/angular/form-elements/text-elements/input/input.component.html.ts
new file mode 100644
index 0000000..bb5d788
--- /dev/null
+++ b/src/angular/form-elements/text-elements/input/input.component.html.ts
@@ -0,0 +1,19 @@
+export const template = `
+<div class="sdc-input ">
+    <label class="sdc-input__label" *ngIf="label" [ngClass]="{'required':required}">{{label}}</label>
+    <input
+        class="sdc-input__input {{classNames}}"
+        [ngClass]="{'error': (!valid && dirty), 'disabled':disabled}"
+        [attr.name]="name ? name : null"
+        [placeholder]="placeHolder"
+        [(ngModel)]="value"
+        [maxlength]="maxLength"
+        [minlength]="minLength"
+        [type]="type"
+        [formControl]="control"
+        [attr.disabled]="disabled ? 'disabled' : null"
+        (input)="onKeyPress($event.target.value)"
+        [attr.data-tests-id]="testId"
+    />
+</div>
+`;
diff --git a/src/angular/form-elements/text-elements/input/input.component.ts b/src/angular/form-elements/text-elements/input/input.component.ts
new file mode 100644
index 0000000..48b177b
--- /dev/null
+++ b/src/angular/form-elements/text-elements/input/input.component.ts
@@ -0,0 +1,18 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { template } from "./input.component.html";
+import { BaseTextElementComponent } from "../base-text-element.component";
+import 'rxjs/add/operator/debounceTime';
+
+@Component({
+    selector: 'sdc-input',
+    template: template,
+})
+export class InputComponent extends BaseTextElementComponent {
+    @Input() public type: string;
+
+    constructor() {
+        super();
+        this.type = 'text';
+    }
+
+}
diff --git a/src/angular/form-elements/text-elements/textarea/textarea.component.html.ts b/src/angular/form-elements/text-elements/textarea/textarea.component.html.ts
new file mode 100644
index 0000000..7e976b2
--- /dev/null
+++ b/src/angular/form-elements/text-elements/textarea/textarea.component.html.ts
@@ -0,0 +1,18 @@
+export const template = `
+<div class="sdc-textarea">
+    <label class="sdc-textarea__label" *ngIf="label" [ngClass]="{'required':required}">{{label}}</label>
+    <textarea
+        class="sdc-textarea__textarea {{classNames}}"
+        [ngClass]="{'error': (!valid && dirty), 'disabled':disabled}"
+        [attr.name]="name ? name : null"
+        [placeholder]="placeHolder"
+        [(ngModel)]="value"
+        [maxlength]="maxLength"
+        [minlength]="minLength"
+        [formControl]="control"
+        [attr.disabled]="disabled ? 'disabled' : null"
+        (input)="onKeyPress($event.target.value)"
+        [attr.data-tests-id]="testId">
+    </textarea>
+</div>
+`;
diff --git a/src/angular/form-elements/text-elements/textarea/textarea.component.ts b/src/angular/form-elements/text-elements/textarea/textarea.component.ts
new file mode 100644
index 0000000..e8f0700
--- /dev/null
+++ b/src/angular/form-elements/text-elements/textarea/textarea.component.ts
@@ -0,0 +1,14 @@
+import { Component } from "@angular/core";
+import { template } from './textarea.component.html';
+import { BaseTextElementComponent } from "../base-text-element.component";
+
+@Component({
+    selector: 'sdc-textarea',
+    template: template,
+})
+
+export class TextareaComponent extends BaseTextElementComponent {
+    constructor() {
+        super();
+    }
+}
diff --git a/src/angular/form-elements/validation/validatable.component.ts b/src/angular/form-elements/validation/validatable.component.ts
index 4817dea..3201e0b 100644
--- a/src/angular/form-elements/validation/validatable.component.ts
+++ b/src/angular/form-elements/validation/validatable.component.ts
@@ -1,24 +1,24 @@
-import { Input, Component } from "@angular/core";
-import { ValidationComponent } from './validation.component';
 import { Subject } from 'rxjs/Subject';
 import { IValidatableComponent } from './validatable.interface';
 
 export abstract class ValidatableComponent implements IValidatableComponent {
 
     // Each ValidatableComponent should handle the style in case of error, according to this boolean
-    public valid = true;
-
+    public valid: boolean;
+    public dirty: boolean;
     // Each ValidatableComponent will notify when the value is changed.
     public notifier: Subject<string>;
 
     constructor() {
         this.notifier = new Subject();
+        this.dirty = false;
     }
 
     public abstract getValue(): any;
 
     // Each ValidatableComponent should call the valueChanged on value changed function.
     protected valueChanged = (value: any): void => {
+        this.dirty = true;
         this.notifier.next(value);
     }
 
diff --git a/src/angular/form-elements/validation/validation-group.component.html.ts b/src/angular/form-elements/validation/validation-group.component.html.ts
index dff591e..4e5e362 100644
--- a/src/angular/form-elements/validation/validation-group.component.html.ts
+++ b/src/angular/form-elements/validation/validation-group.component.html.ts
@@ -1,3 +1,3 @@
-export default `
+export const template = `
 <ng-content></ng-content>
 `;
diff --git a/src/angular/form-elements/validation/validation-group.component.ts b/src/angular/form-elements/validation/validation-group.component.ts
index 59ecf4c..4231bbf 100644
--- a/src/angular/form-elements/validation/validation-group.component.ts
+++ b/src/angular/form-elements/validation/validation-group.component.ts
@@ -1,15 +1,7 @@
 import { Input, Component, ContentChildren, EventEmitter, Output, QueryList, SimpleChanges, HostBinding, AfterContentInit } from "@angular/core";
-import { AbstractControl, FormControl } from "@angular/forms";
-import { Subscribable } from "rxjs/Observable";
-import { AnonymousSubscription } from "rxjs/Subscription";
-import { IValidator } from './validators/validator.interface';
 import { ValidatorComponent } from './validators/base.validator.component';
-import { RegexValidatorComponent } from './validators/regex.validator.component';
-import { RequiredValidatorComponent } from './validators/required.validator.component';
-import { ValidatableComponent } from './validatable.component';
 import { ValidationComponent } from './validation.component';
-import { CustomValidatorComponent } from './validators/custom.validator.component';
-import template from "./validation.component.html";
+import { template } from "./validation-group.component.html";
 
 @Component({
     selector: 'sdc-validation-group',
@@ -37,7 +29,7 @@ export class ValidationGroupComponent implements AfterContentInit {
         let validationResult = true;
         // Iterate over all validationComponent inside the group and return boolean result true in case all validations passed.
         this.validationsComponents.forEach((validationComponent) => {
-            if (validationComponent.validate()) {
+            if (!validationComponent.validate()) {
                 validationResult = false;
             }
         });
diff --git a/src/angular/form-elements/validation/validation.component.html.ts b/src/angular/form-elements/validation/validation.component.html.ts
index 0f11a23..438cec1 100644
--- a/src/angular/form-elements/validation/validation.component.html.ts
+++ b/src/angular/form-elements/validation/validation.component.html.ts
@@ -1,3 +1,3 @@
-export default `
-<ng-content *ngIf="!disabled"></ng-content>
+export const template = `
+<ng-content *ngIf="!disabled && (validateElement && validateElement.dirty)"></ng-content>
 `;
diff --git a/src/angular/form-elements/validation/validation.component.ts b/src/angular/form-elements/validation/validation.component.ts
index 4abdd12..289aeda 100644
--- a/src/angular/form-elements/validation/validation.component.ts
+++ b/src/angular/form-elements/validation/validation.component.ts
@@ -1,14 +1,10 @@
 import { Input, Component, ContentChildren, EventEmitter, Output, QueryList, SimpleChanges, HostBinding, AfterContentInit } from "@angular/core";
-import { AbstractControl, FormControl } from "@angular/forms";
-import { Subscribable } from "rxjs/Observable";
-import { AnonymousSubscription } from "rxjs/Subscription";
-import { IValidator } from './validators/validator.interface';
 import { ValidatorComponent } from './validators/base.validator.component';
 import { RegexValidatorComponent } from './validators/regex.validator.component';
 import { RequiredValidatorComponent } from './validators/required.validator.component';
 import { ValidatableComponent } from './validatable.component';
 import { CustomValidatorComponent } from './validators/custom.validator.component';
-import template from "./validation.component.html";
+import { template } from "./validation.component.html";
 
 @Component({
     selector: 'sdc-validation',
@@ -47,6 +43,9 @@ export class ValidationComponent implements AfterContentInit {
             },
             (error) => console.log('Validation subscribe error')
         );
+        // init validateElement.valid.
+        const value = this.validateElement.getValue();
+        this.validateElement.notifier.next(value);
     }
 
     public validate = (): boolean => {
diff --git a/src/angular/form-elements/validation/validation.module.ts b/src/angular/form-elements/validation/validation.module.ts
index 4213f76..a6aa41e 100644
--- a/src/angular/form-elements/validation/validation.module.ts
+++ b/src/angular/form-elements/validation/validation.module.ts
@@ -3,7 +3,6 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { CommonModule } from "@angular/common";
 import { SvgIconModule } from './../../svg-icon/svg-icon.module';
 import { ValidationComponent } from './validation.component';
-import { ValidatorComponent } from './validators/base.validator.component';
 import { RequiredValidatorComponent } from './validators/required.validator.component';
 import { RegexValidatorComponent } from './validators/regex.validator.component';
 import { CustomValidatorComponent } from './validators/custom.validator.component';
diff --git a/src/angular/form-elements/validation/validators/base.validator.component.html.ts b/src/angular/form-elements/validation/validators/base.validator.component.html.ts
index aba8eed..d96ee3b 100644
--- a/src/angular/form-elements/validation/validators/base.validator.component.html.ts
+++ b/src/angular/form-elements/validation/validators/base.validator.component.html.ts
@@ -1,6 +1,6 @@
-export default `
+export const template = `
 <svg-icon-label
-    *ngIf="!isValid"
+    *ngIf="!isValid && !disabled"
     name="alert-triangle"
     mode="error"
     size="small"
diff --git a/src/angular/form-elements/validation/validators/base.validator.component.ts b/src/angular/form-elements/validation/validators/base.validator.component.ts
index 3d751af..8fd0361 100644
--- a/src/angular/form-elements/validation/validators/base.validator.component.ts
+++ b/src/angular/form-elements/validation/validators/base.validator.component.ts
@@ -1,18 +1,12 @@
 import { Input, Component, ContentChildren, EventEmitter, Output, QueryList, SimpleChanges, HostBinding } from "@angular/core";
-import { IValidator } from './validator.interface';
-import template from "./base.validator.component.html";
 
-@Component({
-    selector: 'sdc-validator',
-    template: template
-})
 export abstract class ValidatorComponent {
 
     @Input() public message: any;
     @Input() public disabled: boolean;
     @HostBinding('class') classes;
 
-    protected isValid: boolean;
+    public isValid: boolean;
 
     constructor() {
         this.disabled = false;
diff --git a/src/angular/form-elements/validation/validators/custom.validator.component.ts b/src/angular/form-elements/validation/validators/custom.validator.component.ts
index eb09636..0ec0e68 100644
--- a/src/angular/form-elements/validation/validators/custom.validator.component.ts
+++ b/src/angular/form-elements/validation/validators/custom.validator.component.ts
@@ -1,7 +1,7 @@
 import { Input, Component } from "@angular/core";
 import { ValidatorComponent } from "./base.validator.component";
 import { IValidator } from './validator.interface';
-import template from "./base.validator.component.html";
+import { template } from "./base.validator.component.html";
 
 @Component({
     selector: 'sdc-custom-validator',
diff --git a/src/angular/form-elements/validation/validators/regex.validator.component.ts b/src/angular/form-elements/validation/validators/regex.validator.component.ts
index 5929016..5a213a9 100644
--- a/src/angular/form-elements/validation/validators/regex.validator.component.ts
+++ b/src/angular/form-elements/validation/validators/regex.validator.component.ts
@@ -1,7 +1,7 @@
 import { Input, Component } from "@angular/core";
 import { ValidatorComponent } from "./base.validator.component";
 import { IValidator } from './validator.interface';
-import template from "./base.validator.component.html";
+import { template } from "./base.validator.component.html";
 
 @Component({
     selector: 'sdc-regex-validator',
diff --git a/src/angular/form-elements/validation/validators/required.validator.component.ts b/src/angular/form-elements/validation/validators/required.validator.component.ts
index 7eee932..fc550ca 100644
--- a/src/angular/form-elements/validation/validators/required.validator.component.ts
+++ b/src/angular/form-elements/validation/validators/required.validator.component.ts
@@ -1,7 +1,7 @@
 import { Input, Component } from "@angular/core";
 import { ValidatorComponent } from "./base.validator.component";
 import { IValidator } from './validator.interface';
-import template from "./base.validator.component.html";
+import { template } from "./base.validator.component.html";
 
 @Component({
     selector: 'sdc-required-validator',
-- 
cgit