From cf8b1be8006235ebc235488cf93851a1c95fb570 Mon Sep 17 00:00:00 2001 From: Yuriy Musienko Date: Wed, 14 Dec 2016 16:40:41 +0200 Subject: [PATCH] feat(dropdown): added config * feat(karma config for saucelabs testing) * revert changes * feat(dropdown): add config for dropdown component --- src/dropdown/dropdown.config.ts | 8 ++++++++ src/dropdown/dropdown.directive.ts | 7 ++++--- src/dropdown/dropdown.module.ts | 3 ++- src/dropdown/index.ts | 1 + src/spec/dropdown.directive.spec.ts | 30 ++++++++++++++++------------- 5 files changed, 32 insertions(+), 17 deletions(-) create mode 100644 src/dropdown/dropdown.config.ts diff --git a/src/dropdown/dropdown.config.ts b/src/dropdown/dropdown.config.ts new file mode 100644 index 0000000000..f048682fa4 --- /dev/null +++ b/src/dropdown/dropdown.config.ts @@ -0,0 +1,8 @@ +import { NONINPUT } from './dropdown.service'; +import { Injectable } from '@angular/core'; + +@Injectable() +export class DropdownConfig { + public autoClose: string = NONINPUT; + public keyboardNav: Boolean = false; +} diff --git a/src/dropdown/dropdown.directive.ts b/src/dropdown/dropdown.directive.ts index ed8f763e44..3c31f837fd 100644 --- a/src/dropdown/dropdown.directive.ts +++ b/src/dropdown/dropdown.directive.ts @@ -3,7 +3,8 @@ import { ChangeDetectorRef, Directive, ElementRef, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core'; -import { dropdownService, NONINPUT } from './dropdown.service'; +import { dropdownService } from './dropdown.service'; +import { DropdownConfig } from './dropdown.config'; @Directive({ selector: '[dropdown]', @@ -60,16 +61,16 @@ export class DropdownDirective implements OnInit, OnDestroy { protected _changeDetector:ChangeDetectorRef; - public constructor(el:ElementRef, ref:ChangeDetectorRef) { + public constructor(el:ElementRef, ref:ChangeDetectorRef, config: DropdownConfig) { // @Query('dropdownMenu', {descendants: false}) // dropdownMenuList:QueryList) { this.el = el; this._changeDetector = ref; + Object.assign(this, config); // todo: bind to route change event } public ngOnInit():void { - this.autoClose = this.autoClose || NONINPUT; if (this.isOpen) { // todo: watch for event get-isOpen? } diff --git a/src/dropdown/dropdown.module.ts b/src/dropdown/dropdown.module.ts index 7ac14b0887..40e994c503 100644 --- a/src/dropdown/dropdown.module.ts +++ b/src/dropdown/dropdown.module.ts @@ -3,6 +3,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { DropdownMenuDirective } from './dropdown-menu.directive'; import { DropdownToggleDirective } from './dropdown-toggle.directive'; import { DropdownDirective } from './dropdown.directive'; +import { DropdownConfig } from './dropdown.config'; @NgModule({ declarations: [DropdownDirective, DropdownMenuDirective, DropdownToggleDirective], @@ -10,6 +11,6 @@ import { DropdownDirective } from './dropdown.directive'; }) export class DropdownModule { public static forRoot(): ModuleWithProviders { - return {ngModule: DropdownModule, providers: []}; + return {ngModule: DropdownModule, providers: [DropdownConfig]}; } } diff --git a/src/dropdown/index.ts b/src/dropdown/index.ts index 38082e1dcf..fdeb242234 100644 --- a/src/dropdown/index.ts +++ b/src/dropdown/index.ts @@ -4,3 +4,4 @@ export { DropdownToggleDirective } from './dropdown-toggle.directive'; export { DropdownDirective } from './dropdown.directive'; export { DropdownService } from './dropdown.service' export { DropdownModule } from './dropdown.module'; +export { DropdownConfig } from './dropdown.config'; diff --git a/src/spec/dropdown.directive.spec.ts b/src/spec/dropdown.directive.spec.ts index 336291512a..1e572ab77f 100644 --- a/src/spec/dropdown.directive.spec.ts +++ b/src/spec/dropdown.directive.spec.ts @@ -3,6 +3,7 @@ import { Component } from '@angular/core'; import { TestBed } from '@angular/core/testing'; import { DropdownModule } from '../dropdown/dropdown.module'; +import { DropdownConfig } from '../dropdown/dropdown.config'; const defaultHtml = `
@@ -19,7 +20,7 @@ describe('Directive: Dropdown', () => { it('should be closed by default', () => { TestBed.configureTestingModule({ declarations: [TestDropdownComponent], - imports: [DropdownModule] + imports: [DropdownModule.forRoot()] }); TestBed.overrideComponent(TestDropdownComponent, {set: {template: defaultHtml}}); let fixture = TestBed.createComponent(TestDropdownComponent); @@ -40,7 +41,7 @@ describe('Directive: Dropdown', () => { `; TestBed.configureTestingModule({ declarations: [TestDropdownComponent], - imports: [DropdownModule] + imports: [DropdownModule.forRoot()] }); TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}}); let fixture = TestBed.createComponent(TestDropdownComponent); @@ -61,7 +62,7 @@ describe('Directive: Dropdown', () => { it('should toggle by click', () => { TestBed.configureTestingModule({ declarations: [TestDropdownComponent], - imports: [DropdownModule] + imports: [DropdownModule.forRoot()] }); TestBed.overrideComponent(TestDropdownComponent, {set: {template: defaultHtml}}); let fixture = TestBed.createComponent(TestDropdownComponent); @@ -88,7 +89,7 @@ describe('Directive: Dropdown', () => { `; TestBed.configureTestingModule({ declarations: [TestDropdownComponent], - imports: [DropdownModule] + imports: [DropdownModule.forRoot()] }); TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}}); let fixture = TestBed.createComponent(TestDropdownComponent); @@ -117,7 +118,7 @@ describe('Directive: Dropdown', () => { `; TestBed.configureTestingModule({ declarations: [TestDropdownComponent], - imports: [DropdownModule] + imports: [DropdownModule.forRoot()] }); TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}}); let fixture = TestBed.createComponent(TestDropdownComponent); @@ -147,7 +148,7 @@ describe('Directive: Dropdown', () => { `; TestBed.configureTestingModule({ declarations: [TestDropdownComponent], - imports: [DropdownModule] + imports: [DropdownModule.forRoot()] }); TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}}); let fixture = TestBed.createComponent(TestDropdownComponent); @@ -176,7 +177,7 @@ describe('Directive: Dropdown', () => { `; TestBed.configureTestingModule({ declarations: [TestDropdownComponent], - imports: [DropdownModule] + imports: [DropdownModule.forRoot()] }); TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}}); let fixture = TestBed.createComponent(TestDropdownComponent); @@ -206,7 +207,7 @@ describe('Directive: Dropdown', () => { `; TestBed.configureTestingModule({ declarations: [TestDropdownComponent], - imports: [DropdownModule] + imports: [DropdownModule.forRoot()] }); TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}}); let fixture = TestBed.createComponent(TestDropdownComponent); @@ -238,7 +239,7 @@ describe('Directive: Dropdown', () => { `; TestBed.configureTestingModule({ declarations: [TestDropdownComponent], - imports: [DropdownModule] + imports: [DropdownModule.forRoot()] }); TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}}); let fixture = TestBed.createComponent(TestDropdownComponent); @@ -266,7 +267,7 @@ describe('Directive: Dropdown', () => { `; TestBed.configureTestingModule({ declarations: [TestDropdownComponent], - imports: [DropdownModule] + imports: [DropdownModule.forRoot()] }); TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}}); let fixture = TestBed.createComponent(TestDropdownComponent); @@ -298,7 +299,7 @@ describe('Directive: Dropdown', () => { `; TestBed.configureTestingModule({ declarations: [TestDropdownComponent], - imports: [DropdownModule] + imports: [DropdownModule.forRoot()] }); TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}}); let fixture = TestBed.createComponent(TestDropdownComponent); @@ -319,7 +320,7 @@ describe('Directive: Dropdown', () => { `; TestBed.configureTestingModule({ declarations: [TestDropdownComponent], - imports: [DropdownModule] + imports: [DropdownModule.forRoot()] }); TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}}); let fixture = TestBed.createComponent(TestDropdownComponent); @@ -339,6 +340,9 @@ class TestDropdownComponent { public isOpen: Boolean = false; public isDisabled: Boolean = false; public addToggleClass: Boolean = false; - public autoClose: String = 'nonInput'; + public autoClose: string = 'nonInput'; public keyboardNav: Boolean = false; + public constructor(config: DropdownConfig) { + Object.assign(this, config); + } }