Merge branch 'master' into m-t-N

Author: Akshat55

package-lock.json

@@ -94,6 +94,7 @@
     "@storybook/theming": "7.0.18",
     "@types/jasmine": "3.8.0",
     "@types/node": "12.20.55",
+	"@types/resize-observer-browser": "^0.1.7",
     "babel-loader": "8.0.5",
     "chai": "4.2.0",
     "codelyzer": "6.0.0",

package.json

@@ -728,7 +728,9 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 		this.showClearButton = !!searchString;
 		this.view.filterBy(searchString);
 		if (searchString !== "") {
-			this.openDropdown();
+			if (!this.open) {
+				this.openDropdown();
+			}
 		} else {
 			this.selectedValue = "";
 			if (this.type === "multi" &&

src/combobox/combobox.component.ts

@@ -289,11 +289,9 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 	 * Helper method to close the dialogRef.
 	 */
 	close(meta: CloseMeta = { reason: CloseReasons.interaction }) {
-		setTimeout(() => {
-			if (this.dialogRef) {
-				this.dialogRef.instance.doClose(meta);
-			}
-		});
+		if (this.dialogRef) {
+			this.dialogRef.instance.doClose(meta);
+		}
 	}
 
 	/**

src/dialog/dialog.directive.ts

@@ -121,7 +121,7 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	/**
 	 * The list items belonging to the `DropdownList`.
 	 */
-	@Input() set items (value: Array<ListItem> | Observable<Array<ListItem>>) {
+	@Input() set items(value: Array<ListItem> | Observable<Array<ListItem>>) {
 		if (isObservable(value)) {
 			if (this._itemsSubscription) {
 				this._itemsSubscription.unsubscribe();
@@ -283,6 +283,11 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	filterBy(query = "") {
 		if (query) {
 			this.displayItems = this.getListItems().filter(item => item.content.toLowerCase().includes(query.toLowerCase()));
+			// Reset index if items were found
+			// Prevent selecting index in list that are undefined.
+			if (this.displayItems) {
+				this.index = 0;
+			}
 		} else {
 			this.displayItems = this.getListItems();
 		}
@@ -328,23 +333,26 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	 * Returns the `HTMLElement` for the item that is subsequent to the selected item.
 	 */
 	getNextElement(): HTMLElement {
-		if (this.index < this.displayItems.length - 1) {
-			this.index++;
-		}
-		let item = this.displayItems[this.index];
-		if (item.disabled) {
-			return this.getNextElement();
+		// Only return native elements if they are rendered
+		const elemList = this.listElementList ? this.listElementList.toArray() : [];
+		if (!elemList.length) {
+			return null;
 		}
 
-		let elemList = this.listElementList ? this.listElementList.toArray() : [];
-
-		// TODO: update to optional chaining after upgrading typescript
-		// to v3.7+
-		if (elemList[this.index] && elemList[this.index].nativeElement) {
-			return elemList[this.index].nativeElement;
-		} else {
-			return null;
+		/**
+		 * Start checking from next index
+		 * Continue looping through the list until a non disabeled element is found or
+		 * end of list is reached
+		 */
+		for (let i = this.index + 1; i < elemList.length; i++) {
+			// If the values in the list are not disabled
+			if (!this.displayItems[i].disabled) {
+				this.index = i;
+				return elemList[i].nativeElement;
+			}
 		}
+
+		return elemList[this.index].nativeElement;
 	}
 
 	/**
@@ -368,23 +376,26 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	 * Returns the `HTMLElement` for the item that precedes the selected item.
 	 */
 	getPrevElement(): HTMLElement {
-		if (this.index > 0) {
-			this.index--;
-		}
-		let item = this.displayItems[this.index];
-		if (item.disabled) {
-			return this.getPrevElement();
+		// Only return native elements if they are rendered
+		const elemList = this.listElementList ? this.listElementList.toArray() : [];
+		if (!elemList.length) {
+			return null;
 		}
 
-		let elemList = this.listElementList ? this.listElementList.toArray() : [];
-
-		// TODO: update to optional chaining after upgrading typescript
-		// to v3.7+
-		if (elemList[this.index] && elemList[this.index].nativeElement) {
-			return elemList[this.index].nativeElement;
-		} else {
-			return null;
+		/**
+		 * Start checking from next index
+		 * Continue looping through the list until a non disabeled element is found or
+		 * end of list is reached
+		 */
+		for (let i = this.index - 1; i < this.index && i >= 0; i--) {
+			// If the values in the list are not disabled
+			if (!this.displayItems[i].disabled) {
+				this.index = i;
+				return elemList[i].nativeElement;
+			}
 		}
+
+		return elemList[this.index].nativeElement;
 	}
 
 	/**
@@ -502,7 +513,7 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 			event.preventDefault();
 			if (event.key === "ArrowDown") {
 				if (this.hasNextElement()) {
-					this.getNextElement().scrollIntoView({block: "end"});
+					this.getNextElement().scrollIntoView({ block: "end" });
 				} else {
 					this.blurIntent.emit("bottom");
 				}
@@ -524,7 +535,7 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	 */
 	doClick(event, item) {
 		event.preventDefault();
-		if (!item.disabled) {
+		if (item && !item.disabled) {
 			this.list.nativeElement.focus();
 			if (this.type === "single") {
 				item.selected = true;

src/dropdown/list/dropdown-list.component.ts

@@ -174,7 +174,8 @@ export class FileUploader implements ControlValueAccessor {
 	}
 
 	/**
-	 * Specifies the property to be used as the return value to `ngModel`
+	 * Specifies the property to be used as the return value to `ngModel` and reactive forms.
+	 * Updates `this.files`.
 	 */
 	get value(): Set<FileItem> {
 		return this.files;
@@ -243,35 +244,37 @@ export class FileUploader implements ControlValueAccessor {
 		event.stopPropagation();
 		event.preventDefault();
 
-		const transferredFiles = Array.from(event.dataTransfer.files);
+		const transferredFiles: Array<File> = Array.from(event.dataTransfer.files);
+		const newFiles = new Set<FileItem>(this.files);
 
 		transferredFiles.filter(({ name, type }) => {
 			// Get the file extension and add a "." to the beginning.
 			const fileExtension = name.split(".").pop().replace(/^/, ".");
 			// Check if the accept array contains the mime type or extension of the file.
 			return this.accept.includes(type) || this.accept.includes(fileExtension) || !this.accept.length;
 		}).forEach(file => {
-			if (!this.files.size || this.multiple) {
+			if (!newFiles.size || this.multiple) {
 				const fileItem = this.createFileItem(file);
-				this.files.add(fileItem);
+				newFiles.add(fileItem);
 			}
 		});
 
-		this.filesChange.emit(this.files);
-		this.value = this.files;
+		this.value = newFiles;
+		this.filesChange.emit(newFiles);
 		this.dragOver = false;
 	}
 
 	removeFile(fileItem) {
-		let shouldEmit = true;
-		if (this.files) {
-			shouldEmit = this.files.has(fileItem);
-			this.files.delete(fileItem);
+		// Deleting an item from this.files removes the <ibm-file> component,
+		// which triggers its ngOnDestroy(), which fires the (remove) event again.
+		// So, (remove) may double-fire and we need to handle it here.
+		if (this.files && this.files.has(fileItem)) {
+			const newFiles = new Set<FileItem>(this.files);
+			newFiles.delete(fileItem);
+			this.filesChange.emit(newFiles);
+			this.value = newFiles;
 		}
 		this.fileInput.nativeElement.value = "";
-		if (shouldEmit) {
-			this.filesChange.emit(this.files);
-		}
 	}
 
 	public isTemplate(value) {

src/file-uploader/file-uploader.component.ts

@@ -16,7 +16,8 @@ import { ButtonModule } from "carbon-components-angular/button";
 		ToggleModule,
 		RadioModule,
 		InputModule,
-		ButtonModule
+		ButtonModule,
+		InputModule
 	],
 	imports: [
 		CommonModule,

src/forms/forms.module.ts

@@ -23,7 +23,9 @@ export {
 	InputModule,
 	Label,
 	TextArea,
-	TextInput
+	TextInput,
+	TextInputLabelComponent,
+	TextareaLabelComponent
 } from "carbon-components-angular/input";
 export {
 	ButtonModule,

src/forms/index.ts

@@ -2,3 +2,5 @@ export * from "./input.directive";
 export * from "./input.module";
 export * from "./label.component";
 export * from "./text-area.directive";
+export * from "./text-input-label.component";
+export * from "./textarea-label.component";

src/input/index.ts

@@ -7,16 +7,22 @@ import { CommonModule } from "@angular/common";
 import { Label } from "./label.component";
 import { TextInput } from "./input.directive";
 import { TextArea } from "./text-area.directive";
+import { TextareaLabelComponent } from "./textarea-label.component";
+import { TextInputLabelComponent } from "./text-input-label.component";
 import { IconModule } from "carbon-components-angular/icon";
 
 @NgModule({
 	declarations: [
 		Label,
 		TextInput,
-		TextArea
+		TextArea,
+		TextareaLabelComponent,
+		TextInputLabelComponent
 	],
 	exports: [
 		Label,
+		TextareaLabelComponent,
+		TextInputLabelComponent,
 		TextInput,
 		TextArea
 	],