Minor improvements; autocomplete adapter service (blackbaud#1474)

skyux-spa-visual-tests/src/app/autocomplete/autocomplete-visual.component.html

@@ -1,4 +1,4 @@
-<div id="screenshot-autocomplete">
+<div id="screenshot-autocomplete" style="padding:40px;height:500px;">
   <label for="favorite-color">Favorite color</label>
   <sky-autocomplete
     [data]="data">

skyux-spa-visual-tests/src/app/autocomplete/autocomplete.visual-spec.ts

@@ -7,7 +7,7 @@ import {
 import { SkyVisualTest } from '../../../config/utils/visual-test-commands';
 
 describe('Autocomplete', () => {
-  it('should match previous alert screenshot', () => {
+  it('should match previous autocomplete screenshot', () => {
     return SkyVisualTest
       .setupTest('autocomplete')
       .then(() => {
@@ -29,7 +29,7 @@ describe('Autocomplete', () => {
       });
   });
 
-  it('should match previous alert screenshot on small screens', () => {
+  it('should match previous autocomplete screenshot on small screens', () => {
     return SkyVisualTest
       .setupTest('autocomplete', 480)
       .then(() => {

skyuxconfig.json

@@ -1,5 +1,6 @@
 {
   "name": "skyux2",
   "mode": "easy",
-  "compileMode": "aot"
+  "compileMode": "aot",
+  "cssPath": "src/scss/sky.scss"
 }

src/locales/resources_en_US.json

@@ -624,11 +624,11 @@
     "message": "Open Help"
   },
   "modal_footer_cancel_button": {
-    "_description": "Default lable text for modal cancel button",
+    "_description": "Default label text for modal cancel button",
     "message": "Cancel"
   },
   "modal_footer_primary_button": {
-    "_description": "Default lable text for modal primary button",
+    "_description": "Default label text for modal primary button",
     "message": "Save"
   },
   "month_short_april": {

src/modules/autocomplete/autocomplete-adapter.service.ts

@@ -0,0 +1,43 @@
+import {
+  ElementRef,
+  Injectable,
+  Renderer2,
+  RendererFactory2
+} from '@angular/core';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/fromEvent';
+
+import {
+  SkyWindowRefService
+} from '../window';
+
+@Injectable()
+export class SkyAutocompleteAdapterService {
+  private renderer: Renderer2;
+
+  constructor(
+    private rendererFactory: RendererFactory2,
+    private windowRef: SkyWindowRefService
+  ) {
+    this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
+  }
+
+  public watchDropdownWidth(elementRef: ElementRef): void {
+    Observable
+      .fromEvent(this.windowRef.getWindow(), 'resize')
+      .subscribe(() => {
+        this.setDropdownWidth(elementRef);
+      });
+
+    this.windowRef.getWindow().setTimeout(() => {
+      this.setDropdownWidth(elementRef);
+    });
+  }
+
+  private setDropdownWidth(elementRef: ElementRef): void {
+    const dropdownContainer = elementRef.nativeElement.querySelector('.sky-popover-container');
+    const width = elementRef.nativeElement.getBoundingClientRect().width;
+    this.renderer.setStyle(dropdownContainer, 'width', `${width}px`);
+  }
+}

src/modules/autocomplete/autocomplete-input.directive.ts

@@ -50,8 +50,8 @@ export class SkyAutocompleteInputDirective
 
   public set value(value: any) {
     this._value = value;
-    this.textValue = value[this.displayWith];
-    this.onChange(value);
+    this.textValue = this.value[this.displayWith];
+    this.onChange(this.value);
     this.onTouched();
   }
 

src/modules/autocomplete/autocomplete.component.spec.ts

@@ -349,6 +349,7 @@ describe('Autocomplete component', () => {
     it('should handle missing skyAutocomplete directive', fakeAsync(() => {
       fixture.detectChanges();
       component.autocomplete['inputDirective'] = undefined;
+      tick();
 
       try {
         autocomplete.ngAfterContentInit();
@@ -358,24 +359,29 @@ describe('Autocomplete component', () => {
     }));
 
     it('should set the width of the dropdown on window resize', fakeAsync(() => {
+      const adapterSpy = spyOn(autocomplete['adapter'], 'watchDropdownWidth').and.callThrough();
+      const rendererSpy = spyOn(autocomplete['adapter']['renderer'], 'setStyle').and.callThrough();
+
       fixture.detectChanges();
 
       const inputElement = getInputElement();
-      const spy = spyOn(autocomplete['renderer'], 'setStyle').and.callThrough();
-      const event = document.createEvent('CustomEvent');
-      event.initEvent('resize', false, false);
 
       inputElement.value = 'r';
       TestUtility.fireKeyboardEvent(inputElement, 'keyup');
-      window.dispatchEvent(event);
       tick();
+
+      const event = document.createEvent('CustomEvent');
+      event.initEvent('resize', false, false);
+      window.dispatchEvent(event);
       tick();
 
+      expect(adapterSpy).toHaveBeenCalledWith(autocomplete['elementRef']);
+
       const dropdownElement = document.querySelector('.sky-popover-container');
       const autocompleteElement = getAutocompleteElement();
       const formattedWidth = `${autocompleteElement.getBoundingClientRect().width}px`;
 
-      expect(spy).toHaveBeenCalledWith(dropdownElement, 'width', formattedWidth);
+      expect(rendererSpy).toHaveBeenCalledWith(dropdownElement, 'width', formattedWidth);
     }));
   });
 

src/modules/autocomplete/autocomplete.component.ts

@@ -10,7 +10,6 @@ import {
   OnDestroy,
   OnInit,
   Output,
-  Renderer2,
   TemplateRef,
   ViewChild
 } from '@angular/core';
@@ -25,24 +24,22 @@ import {
   SkyDropdownMessage
 } from '../dropdown';
 
-import {
-  SkyWindowRefService
-} from '../window';
-
 import {
   SkyAutocompleteInputTextChange,
   SkyAutocompleteSearchFunction,
   SkyAutocompleteSearchFunctionFilter,
   SkyAutocompleteSelectionChange
 } from './types';
 
+import { SkyAutocompleteAdapterService } from './autocomplete-adapter.service';
 import { SkyAutocompleteInputDirective } from './autocomplete-input.directive';
 import { skyAutocompleteDefaultSearchFunction } from './autocomplete-default-search-function';
 
 @Component({
   selector: 'sky-autocomplete',
   templateUrl: './autocomplete.component.html',
   styleUrls: ['./autocomplete.component.scss'],
+  providers: [SkyAutocompleteAdapterService],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SkyAutocompleteComponent
@@ -146,10 +143,9 @@ export class SkyAutocompleteComponent
   private _selectionChange = new EventEmitter<SkyAutocompleteSelectionChange>();
 
   constructor(
+    private adapter: SkyAutocompleteAdapterService,
     private changeDetector: ChangeDetectorRef,
-    private elementRef: ElementRef,
-    private renderer: Renderer2,
-    private windowRef: SkyWindowRefService
+    private elementRef: ElementRef
   ) { }
 
   public ngOnInit(): void {
@@ -175,13 +171,6 @@ export class SkyAutocompleteComponent
       .subscribe(() => {
         this.isMouseEnter = false;
       });
-
-    Observable
-      .fromEvent(this.windowRef.getWindow(), 'resize')
-      .takeUntil(this.destroy)
-      .subscribe(() => {
-        this.setDropdownWidth();
-      });
   }
 
   public ngAfterContentInit(): void {
@@ -210,7 +199,7 @@ export class SkyAutocompleteComponent
         }
       });
 
-    this.setDropdownWidth();
+    this.adapter.watchDropdownWidth(this.elementRef);
   }
 
   public ngOnDestroy(): void {
@@ -335,12 +324,4 @@ export class SkyAutocompleteComponent
   private hasSearchResults(): boolean {
     return (this.searchResults && this.searchResults.length > 0);
   }
-
-  private setDropdownWidth() {
-    const dropdownContainer = this.elementRef.nativeElement
-      .querySelector('.sky-popover-container');
-
-    const width = this.elementRef.nativeElement.getBoundingClientRect().width;
-    this.renderer.setStyle(dropdownContainer, 'width', `${width}px`);
-  }
 }

src/modules/dropdown/dropdown.component.ts

@@ -197,7 +197,6 @@ export class SkyDropdownComponent implements OnInit, AfterContentInit, OnDestroy
   public onPopoverClosed() {
     this.isOpen = false;
     this.isKeyboardActive = false;
-    this.menuComponent.reset();
   }
 
   public getPopoverTriggerType(): SkyPopoverTrigger {

src/modules/list-filters/list-filter-inline-item.component.ts

@@ -24,13 +24,13 @@ export class SkyListFilterInlineItemComponent implements OnInit {
   @Input()
   public defaultValue: any;
 
-  /* tslint:disable */
+  /* tslint:disable:no-input-rename */
   @Input('filter')
   public filterFunction: (item: ListItemModel, filter: any) => boolean;
 
   @Input('template')
   public templateInput: TemplateRef<any>;
-  /* tslint:enable */
+  /* tslint:enable:no-input-rename */
 
   public onChange: EventEmitter<any> = new EventEmitter<any>();
 

src/scss/_buttons.scss

@@ -1,5 +1,4 @@
-@import "mixins";
-@import "variables";
+@import 'mixins';
 
 .sky-btn {
   background-color: transparent;
@@ -115,7 +114,7 @@
   margin-right: $sky-margin-half;
   padding-bottom: $sky-padding-half;
   padding-top: $sky-padding-half;
-  
+
   &:hover, &:focus {
     text-decoration: none;
     color: $sky-text-color-default;
@@ -135,5 +134,5 @@
     color: $sky-text-color-deemphasized;
     box-shadow: none;
   }
-  
+
 }