Merge branch 'master' into tabs

Author: zvonimirfras

package-lock.json

@@ -145,5 +145,9 @@
     "webpack-node-externals": "1.6.0",
     "whatwg-fetch": "2.0.3",
     "zone.js": "0.8.26"
+  },
+  "dependencies": {
+    "flatpickr": "4.5.2",
+    "ng2-flatpickr": "7.0.1"
   }
 }

package.json

@@ -37,7 +37,8 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 			tabindex="0"
 			type="button"
 			aria-label="close menu"
-			aria-haspopup="true">
+			aria-haspopup="true"
+			(click)="toggleDropdown()">
 			<div
 				*ngIf="type === 'multi' && pills.length > 0"
 				(click)="clearSelected()"
@@ -60,7 +61,6 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 			</div>
 			<input
 				[disabled]="disabled"
-				(click)="toggleDropdown()"
 				(keyup)="onSearch($event.target.value)"
 				[value]="selectedValue"
 				class="bx--text-input"
@@ -218,7 +218,7 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 	 */
 	ngOnChanges(changes) {
 		if (changes.items) {
-			this.view["updateList"](changes.items.currentValue);
+			this.view.items = changes.items.currentValue;
 			this.updateSelected();
 		}
 	}
@@ -248,15 +248,15 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 						this.selectedValue = "";
 						this.propagateChangeCallback(null);
 					}
-					// not gaurding these since the nativeElement has to be loaded
+					// not guarding these since the nativeElement has to be loaded
 					// for select to even fire
 					this.elementRef.nativeElement.querySelector("input").focus();
 					this.closeDropdown();
 				}
 				this.selected.emit(event);
-				this.view["filterBy"]("");
+				this.view.filterBy("");
 			});
-			this.view["updateList"](this.items);
+			this.view.items = this.items;
 			// update the rest of combobox with any pre-selected items
 			// setTimeout just defers the call to the next check cycle
 			setTimeout(() => {
@@ -286,12 +286,15 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 	hostkeys(ev: KeyboardEvent) {
 		if (ev.key === "Escape") {
 			this.closeDropdown();
-		} else if (ev.key === "ArrowDown" && !this.dropdownMenu.nativeElement.contains(ev.target)) {
+		} else if ((ev.key === "ArrowDown" || ev.key === "Down") // `"Down"` is IE specific value
+			&& (!this.dropdownMenu || !this.dropdownMenu.nativeElement.contains(ev.target))) {
 			ev.stopPropagation();
 			this.openDropdown();
 			setTimeout(() => this.view.getCurrentElement().focus(), 0);
-		} else if (ev.key === "ArrowUp" && this.dropdownMenu.nativeElement.contains(ev.target) && !this.view["hasPrevElement"]()) {
-			this.elementRef.nativeElement.querySelector(".combobox_input").focus();
+		} else if ((ev.key === "ArrowUp" || ev.key === "Up") // `"Up"` is IE specific value
+			&& this.dropdownMenu.nativeElement.contains(ev.target)
+			&& !this.view.hasPrevElement()) {
+			this.elementRef.nativeElement.querySelector(".bx--text-input").focus();
 		}
 	}
 
@@ -340,7 +343,7 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 			}
 			return item;
 		});
-		this.view["updateList"](this.items);
+		this.view.items = this.items;
 		this.updatePills();
 		// clearSelected can only fire on type=multi
 		// so we just emit getSelected() (just in case there's any disabled but selected items)
@@ -349,7 +352,6 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 
 	/**
 	 * Closes the dropdown and emits the close event.
-	 * @memberof ComboBox
 	 */
 	public closeDropdown() {
 		this.open = false;
@@ -358,15 +360,13 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 
 	/**
 	 * Opens the dropdown.
-	 * @memberof ComboBox
 	 */
 	public openDropdown() {
 		this.open = true;
 	}
 
 	/**
 	 * Toggles the dropdown.
-	 * @memberof ComboBox
 	 */
 	public toggleDropdown() {
 		if (this.open) {
@@ -381,7 +381,7 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 	 * @param {string} searchString
 	 */
 	public onSearch(searchString) {
-		this.view["filterBy"](searchString);
+		this.view.filterBy(searchString);
 		if (searchString !== "") {
 			this.openDropdown();
 		} else {
@@ -390,7 +390,7 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 		if (this.type === "single") {
 			// deselect if the input doesn't match the content
 			// of any given item
-			const matches = this.view.items.some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));
+			const matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));
 			if (!matches) {
 				const selected = this.view.getSelected();
 				if (selected) {
@@ -399,7 +399,7 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 					this.view.select.emit({ item: selected[0] });
 					this.propagateChangeCallback(null);
 				} else {
-					this.view["filterBy"]("");
+					this.view.filterBy("");
 				}
 			}
 		}
@@ -421,10 +421,10 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 	public onSubmit(ev) {
 		let index = 0;
 		if (ev.after) {
-			index = this.view.items.indexOf(ev.after) + 1;
+			index = this.view.getListItems().indexOf(ev.after) + 1;
 		}
 		this.submit.emit({
-			items: this.view.items,
+			items: this.view.getListItems(),
 			index,
 			value: {
 				content: ev.value,