New Angular UI from 1806
Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666
Issue-ID: VID-208
Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>
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 0000000..846ff70
--- /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 0000000..dada09b
--- /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 0000000..e69de29
--- /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 0000000..e4dc55a
--- /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)
+ }
+
+ }
+ }
+}