Merge branch 'master' into confirmation-dialog

package.json

@@ -55,7 +55,7 @@
     "@angular/platform-browser": "4.3.6",
     "@angular/platform-browser-dynamic": "4.3.6",
     "@angular/router": "4.3.6",
-    "@blackbaud/skyux": "2.1.0",
+    "@blackbaud/skyux": "2.3.0",
     "@blackbaud/skyux-builder": "1.3.1",
     "@blackbaud/skyux-design-tokens": "0.0.8",
     "@blackbaud/stache": "2.0.1",

src/app/components/search/index.html

@@ -21,11 +21,11 @@
       isOptional="true"
       defaultValue="responsive"
     >
-      Specifies the expand mode for the search input. The valid options are <code>responsive</code>, <code>none</code>, and <code>fit</code>.
+      Specifies the expand mode for the search input. The valid options are <stache-code>responsive</stache-code>, <stache-code>none</stache-code>, and <stache-code>fit</stache-code>.
       <ul>
-            <li><code>responsive</code> The search input collapses into a button on mobile devices.</li>
-            <li><code>none</code> The search input does not collapse into a button on mobile devices.</li>
-            <li><code>fit</code> The search input fits the width of its container.</li>
+            <li><stache-code>responsive</stache-code> The search input collapses into a button on mobile devices.</li>
+            <li><stache-code>none</stache-code> The search input does not collapse into a button on mobile devices.</li>
+            <li><stache-code>fit</stache-code> The search input fits the width of its container.</li>
       </ul>
 
     </sky-demo-page-property>

src/modules/colorpicker/colorpicker-component.spec.ts

@@ -147,6 +147,13 @@ describe('Colorpicker Component', () => {
     verifyColorpicker(nativeElement, 'rgba(189,64,64,1)', '189, 64, 64');
   });
 
+  it('should handle undefined initial color', () => {
+    component.selectedOutputFormat = 'hex';
+    component.selectedColor = undefined;
+    openColorpicker(nativeElement, fixture);
+    verifyColorpicker(nativeElement, '#fff', '255, 255, 255');
+  });
+
   it('should output HEX', () => {
     component.selectedOutputFormat = 'hex';
     openColorpicker(nativeElement, fixture);

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

@@ -40,6 +40,9 @@ const SKY_COLORPICKER_VALIDATOR = {
   multi: true
 };
 // tslint:enable
+
+const SKY_COLORPICKER_DEFAULT_COLOR = '#FFFFFF';
+
 @Directive({
   selector: '[skyColorpickerInput]',
   providers: [
@@ -56,7 +59,13 @@ export class SkyColorpickerInputDirective
   public skyColorpickerInput: SkyColorpickerComponent;
 
   @Input()
-  public initialColor: string = '#FFFFFF';
+  public set initialColor(value: string) {
+    this._initialColor = value || SKY_COLORPICKER_DEFAULT_COLOR;
+  }
+
+  public get initialColor(): string {
+    return this._initialColor;
+  }
 
   @Input()
   public returnFormat: string = 'rgba';
@@ -68,6 +77,7 @@ export class SkyColorpickerInputDirective
   @Input()
   public alphaChannel: string = 'hex6';
 
+  private _initialColor = SKY_COLORPICKER_DEFAULT_COLOR;
   private created: boolean;
   private modelValue: SkyColorpickerOutput;
 
@@ -138,8 +148,10 @@ export class SkyColorpickerInputDirective
   public registerOnValidatorChange(fn: () => void): void { this._validatorChange = fn; }
 
   public writeValue(value: any) {
-    this.modelValue = this.formatter(value);
-    this.writeModelValue(this.modelValue);
+    if (value) {
+      this.modelValue = this.formatter(value);
+      this.writeModelValue(this.modelValue);
+    }
   }
   public validate(control: AbstractControl): { [key: string]: any } {
     let value = control.value;
@@ -150,41 +162,38 @@ export class SkyColorpickerInputDirective
   }
 
   private writeModelValue(model: SkyColorpickerOutput) {
-    if (model) {
-      let setElementValue: string;
-      setElementValue = model.rgbaText;
-      let output: string;
-      if (this.outputFormat === 'rgba') {
-        output = model.rgbaText;
-      }
-      if (this.outputFormat === 'hsla') {
-        output = model.hslaText;
-      }
-      if (this.outputFormat === 'cmyk') {
-        output = model.cmykText;
-      }
-      if (this.outputFormat === 'hex') {
-        output = model.hex;
-      }
-
-      this.skyColorpickerInput.setColorFromString(output);
-
-      this.renderer.setElementStyle(
-        this.element.nativeElement, 'background-color', setElementValue);
-      this.renderer.setElementStyle(this.element.nativeElement, 'color', setElementValue);
-      this.renderer.setElementProperty(this.element.nativeElement, 'value', output);
-      this.renderer.setElementClass(this.element.nativeElement, 'sky-colorpicker-input', true);
+    let setElementValue: string;
+    setElementValue = model.rgbaText;
+    let output: string;
+    if (this.outputFormat === 'rgba') {
+      output = model.rgbaText;
     }
+    if (this.outputFormat === 'hsla') {
+      output = model.hslaText;
+    }
+    if (this.outputFormat === 'cmyk') {
+      output = model.cmykText;
+    }
+    if (this.outputFormat === 'hex') {
+      output = model.hex;
+    }
+
+    this.skyColorpickerInput.setColorFromString(output);
+
+    this.renderer.setElementStyle(
+      this.element.nativeElement, 'background-color', setElementValue);
+    this.renderer.setElementStyle(this.element.nativeElement, 'color', setElementValue);
+    this.renderer.setElementProperty(this.element.nativeElement, 'value', output);
+    this.renderer.setElementClass(this.element.nativeElement, 'sky-colorpicker-input', true);
   }
 
-  private formatter(color: SkyColorpickerOutput) {
+  private formatter(color: any) {
     if (color && typeof color !== 'string') { return color; }
-    if (typeof color === 'string') {
-      let formatColor: SkyColorpickerOutput;
-      let hsva: SkyColorpickerHsva = this.service.stringToHsva(color, this.alphaChannel === 'hex8');
-      formatColor = this.service.skyColorpickerOut(hsva);
-      return formatColor;
-    }
+
+    let formatColor: SkyColorpickerOutput;
+    let hsva: SkyColorpickerHsva = this.service.stringToHsva(color, this.alphaChannel === 'hex8');
+    formatColor = this.service.skyColorpickerOut(hsva);
+    return formatColor;
   }
   /*istanbul ignore next */
   private _onChange = (_: any) => { };

src/modules/colorpicker/colorpicker.component.html

@@ -3,7 +3,7 @@
   <sky-dropdown>
     <sky-dropdown-menu>
 
-      <div class="sky-colorpicker-container">
+      <div class="sky-colorpicker-container" (click)="onContainerClick($event)">
 
         <div class="sky-colorpicker" #colorPicker>
           <div [skyColorpickerSlider] [style.background-color]="hueSliderColor" [xAxis]="1" [yAxis]="1" (newColorContrast)="saturationAndLightness=$event"

src/modules/colorpicker/colorpicker.component.ts

@@ -76,16 +76,14 @@ export class SkyColorpickerComponent implements OnInit {
     this.skyColorpickerAlphaId = 'sky-colorpicker-alpha-' + this.idIndex;
   }
 
-  @HostListener('click', ['$event'])
-  public onClick(event: any) {
-    let element: HTMLButtonElement = <HTMLButtonElement>event.target;
-    // keep the drop down open.
+  public onContainerClick(event: MouseEvent) {
+    const element: HTMLButtonElement = <HTMLButtonElement>event.target;
+    // Allow the click event to propagate to the dropdown handler for certain buttons.
+    // (This will allow the dropdown menu to close.)
     if (
-      element.classList.contains('sky-btn-colorpicker-close') ||
-      element.classList.contains('sky-btn-colorpicker-apply')
+      !element.classList.contains('sky-btn-colorpicker-close') &&
+      !element.classList.contains('sky-btn-colorpicker-apply')
     ) {
-      element.click();
-    } else {
       event.stopPropagation();
     }
   }
@@ -94,9 +92,9 @@ export class SkyColorpickerComponent implements OnInit {
   public keyboardInput(event: any) {
     /* Ignores in place for valid code that is only used in IE and Edge */
     /* istanbul ignore next */
-    let code: string = (event.code || event.key).toLowerCase();
+    const code: string = event.code || event.key;
     /* istanbul ignore else */
-    if (code.indexOf('esc') === 0) {
+    if (code && code.toLowerCase().indexOf('esc') === 0) {
       this.closeColorPicker.nativeElement.click();
     }
   }

src/modules/search/search.component.html

@@ -1,15 +1,14 @@
 <div class="sky-search-container">
-
   <div
     class="sky-search-button-container">
     <button
-        type="button"
-        [ngClass]="{'sky-search-btn-open-applied': clearButtonShown}"
-        [hidden]="!searchButtonShown"
-        class="sky-btn sky-btn-default sky-search-btn-open"
-        [attr.title]="'search_open' | skyResources"
-        (click)="toggleSearchInput(true)">
-        <i class="fa fa-search fa-lg"></i>
+      type="button"
+      [ngClass]="{'sky-search-btn-open-applied': clearButtonShown}"
+      [hidden]="!searchButtonShown"
+      class="sky-btn sky-btn-default sky-search-btn-open"
+      [attr.title]="'search_open' | skyResources"
+      (click)="toggleSearchInput(true)">
+      <i class="fa fa-search fa-lg"></i>
     </button>
   </div>
   <div
@@ -34,31 +33,30 @@
           [attr.aria-label]="'search_label' | skyResources"
           [attr.placeholder]="placeholderText" />
         <span
-        class="sky-input-group-btn sky-input-group-clear"
-        [hidden]="!clearButtonShown"
-        >
+          class="sky-input-group-btn sky-input-group-clear"
+          [hidden]="!clearButtonShown">
           <button
             tabindex="-1"
             aria-hidden="true"
             type="button"
-            class="sky-btn sky-btn-default sky-search-btn-clear"
+            class="sky-btn sky-btn-default sky-search-btn sky-search-btn-clear"
             (click)="clearSearchText()">
             <i class="fa fa-times"></i>
           </button>
         </span>
-        <span class="sky-input-group-btn">
+        <span
+          class="sky-input-group-btn">
           <button
             type="button"
-            class="sky-btn sky-btn-default sky-search-btn-apply"
+            class="sky-btn sky-btn-default sky-search-btn sky-search-btn-apply"
             (click)="applySearchText(searchText)"
             [attr.aria-label]="'search_label' | skyResources" >
             <i class="fa fa-search fa-lg"></i>
           </button>
         </span>
       </div>
     </div>
-    <div
-      class="sky-search-item-dismiss">
+    <div class="sky-search-item-dismiss">
       <button
         *ngIf="mobileSearchShown"
         type="button"