New Angular UI from 1806

Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666
Issue-ID: VID-208
Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>

4 files changed, 124 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts
new file mode 100644
index 000000000..846ff70f2
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts
@@ -0,0 +1,66 @@
+import {TestBed, ComponentFixture} from '@angular/core/testing';
+import {Component, DebugElement} from "@angular/core";
+import {By} from "@angular/platform-browser";
+import { InputPreventionPatternDirective } from './inputPreventionPattern.directive';
+
+@Component({
+  template: `<input 
+    patternInput
+    pattern="^[a-zA-Z0-9_]*$">`
+})
+class TestHoverFocusComponent {
+}
+
+
+describe('InputPrevention Pattern Directive', () => {
+
+  let component: TestHoverFocusComponent;
+  let fixture: ComponentFixture<TestHoverFocusComponent>;
+  let directiveInstance : InputPreventionPatternDirective;
+  let inputEl: DebugElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestHoverFocusComponent, InputPreventionPatternDirective]
+    });
+    fixture = TestBed.createComponent(TestHoverFocusComponent);
+    component = fixture.componentInstance;
+    inputEl = fixture.debugElement.query(By.css('input'));
+    directiveInstance = inputEl.injector.get(InputPreventionPatternDirective);
+  });
+
+  it('directive should be defined', () => {
+    expect(directiveInstance).toBeDefined();
+  });
+
+  it('pattern exists', () => {
+    expect(inputEl.nativeElement.pattern).toEqual('^[a-zA-Z0-9_]*$');
+  });
+
+  it('kepress legal input', () => {
+    fixture.detectChanges();
+    inputEl.nativeElement.value = "legalInput";
+    expect(new RegExp(inputEl.nativeElement.pattern).test(inputEl.nativeElement.value)).toBeTruthy();
+  });
+
+  it('kepress illegal input', () => {
+    inputEl.triggerEventHandler('kepress', " ");
+    fixture.detectChanges();
+    expect(inputEl.nativeElement.value).toBe('');
+  });
+
+  it('kepress event legal input should return event', () => {
+    const event = <any>{ key: 'A' };
+    inputEl.nativeElement.value = "legalInput";
+    let result = directiveInstance.onKeypress(event);
+    expect(result).toBe(event);
+  });
+
+  it('kepress event illegal input should prevent default', () => {
+    const event = <any>{key: '-', preventDefault : function () {} };
+    spyOn(event, 'preventDefault');
+    inputEl.nativeElement.value = "-";
+    let result = directiveInstance.onKeypress(event);
+    expect(event.preventDefault).toHaveBeenCalled();
+  });
+});
diff --git a/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts
new file mode 100644
index 000000000..dada09bef
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts
@@ -0,0 +1,24 @@
+import {Directive, ElementRef} from '@angular/core';
+
+@Directive({
+  selector: '[patternInput]',
+  host: {
+    '(keypress)': 'onKeypress($event)'
+  }
+})
+export class InputPreventionPatternDirective{
+  inputElement : ElementRef;
+  constructor(el: ElementRef) {
+    this.inputElement = el;
+  }
+
+  onKeypress(event: KeyboardEvent) {
+    const pattern = new RegExp(this.inputElement.nativeElement.pattern);
+    if(pattern){
+      if(!pattern.test(event['key'])){
+        event.preventDefault();
+      }
+    }
+    return event;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/directives/svg/svg.directive.html b/vid-webpack-master/src/app/shared/directives/svg/svg.directive.html
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/directives/svg/svg.directive.html
diff --git a/vid-webpack-master/src/app/shared/directives/svg/svg.directive.ts b/vid-webpack-master/src/app/shared/directives/svg/svg.directive.ts
new file mode 100644
index 000000000..e4dc55a56
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/directives/svg/svg.directive.ts
@@ -0,0 +1,34 @@
+import { AfterContentChecked, AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
+import { isNullOrUndefined } from 'util';
+
+
+/*
+          Temporary
+  Changing svg color and size.
+  color changing according to fill attribute
+  size according to viewBox
+*/
+@Directive({
+  selector: '[svg-directive]'
+})
+export class SvgDirective implements AfterContentChecked {
+  @Input('fill') fill: string = "black";
+  @Input('widthViewBox') widthViewBox: string = null;
+  @Input('heightViewBox') heightViewBox: string = null;
+
+  constructor(private elRef: ElementRef) {}
+  ngAfterContentChecked(): void {
+    if(this.elRef !== undefined && this.elRef.nativeElement.children !== undefined && this.elRef.nativeElement.children[0] !== undefined){
+      this.elRef.nativeElement.children[0].children[1].children[0].style.fill = this.fill;
+      if(this.elRef.nativeElement.children[0].children[1].children.length > 1){
+        this.elRef.nativeElement.children[0].children[1].children[1].style.fill = this.fill;
+        this.elRef.nativeElement.children[0].children[1].children[2].children[0].style.fill = this.fill;
+      }
+
+      if(this.widthViewBox && this.heightViewBox){
+        this.elRef.nativeElement.firstChild.setAttribute('viewBox', "1 1 " + this.widthViewBox + " " + this.heightViewBox)
+      }
+
+    }
+  }
+}