Merge branch 'master' into fix-file-uploader-valueChanges

Akshat55 · web-flow · commit b50f0c7fdcd9 · 2023-04-28T14:27:37.000-04:00
diff --git a/src/dialog/dialog.directive.ts b/src/dialog/dialog.directive.ts
@@ -286,11 +286,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);
+		}
 	}
 
 	/**
diff --git a/src/dropdown/list/dropdown-list.component.ts b/src/dropdown/list/dropdown-list.component.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();
@@ -286,6 +286,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();
 		}
@@ -331,23 +336,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;
 	}
 
 	/**
@@ -371,23 +379,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;
 	}
 
 	/**
@@ -497,12 +508,12 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	doKeyDown(event: KeyboardEvent, item: ListItem) {
 		// "Spacebar", "Down", and "Up" are IE specific values
 		if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
-				if (this.listElementList.some(option => option.nativeElement === event.target)) {
-					event.preventDefault();
-				}
-				if (event.key === "Enter") {
-					this.doClick(event, item);
-				}
+			if (this.listElementList.some(option => option.nativeElement === event.target)) {
+				event.preventDefault();
+			}
+			if (event.key === "Enter") {
+				this.doClick(event, item);
+			}
 		} else if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Down" || event.key === "Up") {
 			event.preventDefault();
 			if (event.key === "ArrowDown" || event.key === "Down") {
@@ -539,7 +550,7 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 			event.preventDefault();
 			if (event.key === "ArrowDown" || event.key === "Down") {
 				if (this.hasNextElement()) {
-					this.getNextElement().scrollIntoView({block: "end"});
+					this.getNextElement().scrollIntoView({ block: "end" });
 				} else {
 					this.blurIntent.emit("bottom");
 				}
@@ -561,7 +572,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;
diff --git a/src/tiles/selection-tile.component.ts b/src/tiles/selection-tile.component.ts
@@ -7,32 +7,30 @@ import {
 	HostListener,
 	AfterViewInit
 } from "@angular/core";
-import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { I18n } from "carbon-components-angular/i18n";
 
 @Component({
 	selector: "ibm-selection-tile",
 	template: `
+		<input
+			#input
+			[tabindex]="disabled ? null : 0"
+			class="bx--tile-input"
+			[id]="id"
+			[disabled]="disabled"
+			[type]="(multiple ? 'checkbox': 'radio')"
+			[value]="value"
+			[name]="name"
+			(change)="onChange($event)"/>
 		<label
 			class="bx--tile bx--tile--selectable"
-			tabindex="disabled ? null : 0"
 			[for]="id"
 			[ngClass]="{
 				'bx--tile--is-selected' : selected,
 				'bx--tile--light': theme === 'light',
 				'bx--tile--disabled' : disabled
 			}"
 			[attr.aria-label]="i18n.get('TILES.TILE') | async">
-			<input
-				#input
-				tabindex="-1"
-				class="bx--tile-input"
-				[id]="id"
-				[disabled]="disabled"
-				[type]="(multiple ? 'checkbox': 'radio')"
-				[value]="value"
-				[name]="name"
-				(change)="onChange($event)"/>
 			<div class="bx--tile__checkmark">
 				<svg width="16" height="16" viewBox="0 0 16 16">
 					<path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
diff --git a/src/tiles/tile-group.component.ts b/src/tiles/tile-group.component.ts
@@ -7,7 +7,8 @@ import {
 	HostBinding,
 	ContentChildren,
 	QueryList,
-	OnDestroy
+	OnDestroy,
+	TemplateRef
 } from "@angular/core";
 import { SelectionTile } from "./selection-tile.component";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
@@ -17,7 +18,14 @@ import { takeUntil } from "rxjs/operators";
 
 @Component({
 	selector: "ibm-tile-group",
-	template: `<ng-content select="ibm-selection-tile"></ng-content>`,
+	template: `
+		<fieldset>
+			<legend *ngIf="legend" class="bx--label">
+				<ng-template *ngIf="isTemplate(legend); else legendLabel;" [ngTemplateOutlet]="legend"></ng-template>
+				<ng-template #legendLabel>{{legend}}</ng-template>
+			</legend>
+			<ng-content select="ibm-selection-tile"></ng-content>
+		</fieldset>`,
 	providers: [
 		{
 			provide: NG_VALUE_ACCESSOR,
@@ -37,6 +45,8 @@ export class TileGroup implements AfterContentInit, OnDestroy {
 	 */
 	@Input() multiple = false;
 
+	@Input() legend: string | TemplateRef<any>;
+
 	/**
 	 * Emits an event when the tile selection changes.
 	 *
@@ -124,4 +134,8 @@ export class TileGroup implements AfterContentInit, OnDestroy {
 	registerOnTouched(fn: any) {
 		this.onTouched = fn;
 	}
+
+	public isTemplate(value) {
+		return value instanceof TemplateRef;
+	}
 }
diff --git a/src/tiles/tiles.stories.ts b/src/tiles/tiles.stories.ts
@@ -136,7 +136,7 @@ storiesOf("Components|Tiles", module)
 				Edit on Carbon UI Builder
 			</a>
 			<br><br>
-			<ibm-tile-group (selected)="selected($event)" [multiple]="false">
+			<ibm-tile-group (selected)="selected($event)" [multiple]="false" legend="Radio tile group">
 				<ibm-selection-tile value="tile1" [disabled]="disabled" [selected]="true" [theme]="theme">Selectable Tile</ibm-selection-tile>
 				<ibm-selection-tile value="tile2" [disabled]="disabled" [theme]="theme">Selectable Tile</ibm-selection-tile>
 				<ibm-selection-tile value="tile3" [disabled]="disabled" [theme]="theme">Selectable Tile</ibm-selection-tile>
@@ -174,7 +174,7 @@ storiesOf("Components|Tiles", module)
 				Edit on Carbon UI Builder
 			</a>
 			<br><br>
-			<ibm-tile-group (selected)="selected($event)" [multiple]="true">
+			<ibm-tile-group (selected)="selected($event)" [multiple]="true" legend="Multi-select tile group">
 				<ibm-selection-tile value="tile1" [selected]="true" [theme]="theme" [disabled]="disabled">Selectable Tile</ibm-selection-tile>
 				<ibm-selection-tile value="tile2" [theme]="theme" [disabled]="disabled">Selectable Tile</ibm-selection-tile>
 				<ibm-selection-tile value="tile3" [theme]="theme" [disabled]="disabled">Selectable Tile</ibm-selection-tile>
