merge from ecomp a88f0072 - Modern UI

Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>

6 files changed, 133 insertions, 61 deletions

diff --git a/vid-webpack-master/src/app/shared/directives/clickOutside/clickOutside.directive.spec.ts b/vid-webpack-master/src/app/shared/directives/clickOutside/clickOutside.directive.spec.ts
new file mode 100644
index 000000000..8edfb8733
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/directives/clickOutside/clickOutside.directive.spec.ts
@@ -0,0 +1,52 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Component, DebugElement} from "@angular/core";
+import {By} from "@angular/platform-browser";
+import {ClickOutsideDirective} from "./clickOutside.directive";
+
+@Component({
+  template:
+      `<div id="innerDiv" [clickOutside] [classElements]="['outsideDivShouldNotTrigger']"></div>
+       <div class="outsideDivShouldTrigger"></div>
+       <div class="outsideDivShouldNotTrigger"></div>`
+})
+class TestHoverFocusComponent {
+}
+
+
+describe('Click outside Directive', () => {
+  let component: TestHoverFocusComponent;
+  let fixture: ComponentFixture<TestHoverFocusComponent>;
+  let directiveInstance : ClickOutsideDirective;
+  let outsideDivShouldNotTrigger: DebugElement;
+  let outsideDivShouldTrigger: DebugElement;
+  let innerDiv: DebugElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestHoverFocusComponent, ClickOutsideDirective]
+    });
+    fixture = TestBed.createComponent(TestHoverFocusComponent);
+    component = fixture.componentInstance;
+    outsideDivShouldNotTrigger = fixture.debugElement.query(By.css('.outsideDivShouldNotTrigger'));
+    outsideDivShouldTrigger = fixture.debugElement.query(By.css('.outsideDivShouldTrigger'));
+    innerDiv = fixture.debugElement.query(By.css('#innerDiv'));
+    directiveInstance = innerDiv.injector.get(ClickOutsideDirective);
+  });
+
+  test('directive should be defined', () => {
+    expect(directiveInstance).toBeDefined();
+  });
+
+  test(`should have list of class's`, () => {
+    fixture.detectChanges();
+    expect(directiveInstance.classElements).toEqual(['outsideDivShouldNotTrigger']);
+  });
+
+  test('should not trigger output on click outside', () => {
+    fixture.detectChanges();
+    spyOn(directiveInstance.clickOutsideTrigger, 'next');
+    outsideDivShouldNotTrigger.nativeElement.click();
+    expect(directiveInstance.clickOutsideTrigger.next).toHaveBeenCalledTimes(0);
+  });
+
+});
diff --git a/vid-webpack-master/src/app/shared/directives/clickOutside/clickOutside.directive.ts b/vid-webpack-master/src/app/shared/directives/clickOutside/clickOutside.directive.ts
new file mode 100644
index 000000000..1a43a3e68
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/directives/clickOutside/clickOutside.directive.ts
@@ -0,0 +1,41 @@
+import {Directive, EventEmitter, HostListener, Input, Output} from "@angular/core";
+import * as _ from 'lodash';
+/**********************************************************************
+  Click outside directive
+  can get one list of class's or id's (Not together)
+  if all elements are not the target then clickOutside is trigger
+ *******************************************************************/
+@Directive({
+  selector : '[clickOutside]'
+})
+export class ClickOutsideDirective {
+  @Input() clickOutside : string;
+  @Input() classElements : string[] = [];
+  @Input() idElements : string[] = [];
+  @Output() public clickOutsideTrigger: EventEmitter<any> = new EventEmitter();
+
+  @HostListener('document:click', ['$event.target']) public onClick(targetElement) {
+    if(!_.isNil(this.classElements)){this.hostListener(targetElement, this.classElements, 'getElementsByClassName');}
+    if(!_.isNil(this.idElements)){this.hostListener(targetElement, this.idElements, 'getElementById');}
+  }
+
+
+/********************************************************************************
+ hostListener - iterate over all elements and check if the element is the target.
+ @param targetElement - the target element
+ @param elements - elements to check
+ @param documentMethod - method to find the element in dom
+ ********************************************************************************/
+hostListener(targetElement, elements, documentMethod): void{
+  let result = true;
+for(let i = 0 ; i < elements.length; i++){
+  const classElements = document[documentMethod](elements[i]);
+  for (let j = 0 ; j < classElements.length; j++){
+    const clickedInside = document[documentMethod](elements[i])[j].contains(targetElement);
+    if(clickedInside) return;
+    result = result && clickedInside;
+  }
+}
+if (!result) {this.clickOutsideTrigger.emit(null); }
+}
+}
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
index 846ff70f2..ec5bfd8f3 100644
--- 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
@@ -1,19 +1,18 @@
-import {TestBed, ComponentFixture} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {Component, DebugElement} from "@angular/core";
 import {By} from "@angular/platform-browser";
-import { InputPreventionPatternDirective } from './inputPreventionPattern.directive';
+import {InputPreventionPatternDirective} from './inputPreventionPattern.directive';
 
 @Component({
-  template: `<input 
+  template: `<input
     patternInput
-    pattern="^[a-zA-Z0-9_]*$">`
+    pattern="^[a-zA-Z0-9._-]*$">`
 })
 class TestHoverFocusComponent {
 }
 
 
 describe('InputPrevention Pattern Directive', () => {
-
   let component: TestHoverFocusComponent;
   let fixture: ComponentFixture<TestHoverFocusComponent>;
   let directiveInstance : InputPreventionPatternDirective;
@@ -29,37 +28,54 @@ describe('InputPrevention Pattern Directive', () => {
     directiveInstance = inputEl.injector.get(InputPreventionPatternDirective);
   });
 
-  it('directive should be defined', () => {
+  test('directive should be defined', () => {
     expect(directiveInstance).toBeDefined();
   });
 
-  it('pattern exists', () => {
-    expect(inputEl.nativeElement.pattern).toEqual('^[a-zA-Z0-9_]*$');
+  test('pattern exists', () => {
+    expect(inputEl.nativeElement.pattern).toEqual('^[a-zA-Z0-9._-]*$');
   });
 
-  it('kepress legal input', () => {
+  test('kepress legal input', () => {
     fixture.detectChanges();
     inputEl.nativeElement.value = "legalInput";
     expect(new RegExp(inputEl.nativeElement.pattern).test(inputEl.nativeElement.value)).toBeTruthy();
   });
 
-  it('kepress illegal input', () => {
+  test('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' };
+
+  test('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);
+  });
+
+
+  test('kepress event legal(-) input should return event', () => {
+    const event = <any>{ key: '-'};
     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 = "-";
+  test('kepress event legal (.) input should return event', () => {
+    const event = <any>{ key: '.'};
+    inputEl.nativeElement.value = "legalInput";
+    let result = directiveInstance.onKeypress(event);
+    expect(result).toBe(event);
+  });
+
+
+  test('kepress event illegal input should prevent default', () => {
+    const event = <any>{key: '$', preventDefault : function () {} };
+    jest.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
index dada09bef..d00c52502 100644
--- a/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts
+++ b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts
@@ -1,18 +1,10 @@
-import {Directive, ElementRef} from '@angular/core';
+import {Directive, ElementRef, HostBinding, HostListener} from '@angular/core';
 
 @Directive({
-  selector: '[patternInput]',
-  host: {
-    '(keypress)': 'onKeypress($event)'
-  }
+  selector: '[patternInput]'
 })
 export class InputPreventionPatternDirective{
-  inputElement : ElementRef;
-  constructor(el: ElementRef) {
-    this.inputElement = el;
-  }
-
-  onKeypress(event: KeyboardEvent) {
+  @HostListener('keypress', ['$event']) onKeypress(event: KeyboardEvent) {
     const pattern = new RegExp(this.inputElement.nativeElement.pattern);
     if(pattern){
       if(!pattern.test(event['key'])){
@@ -21,4 +13,9 @@ export class InputPreventionPatternDirective{
     }
     return event;
   }
+
+  inputElement : ElementRef;
+  constructor(el: ElementRef) {
+    this.inputElement = el;
+  }
 }
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
deleted file mode 100644
index e69de29bb..000000000
--- a/vid-webpack-master/src/app/shared/directives/svg/svg.directive.html
+++ /dev/null
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
deleted file mode 100644
index e4dc55a56..000000000
--- a/vid-webpack-master/src/app/shared/directives/svg/svg.directive.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-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)
-      }
-
-    }
-  }
-}