Merge branch 'master' of https://github.com/carbon-design-system/carbon-components-angular into master-to-next

Author: Akshat55

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

@@ -120,5 +120,26 @@ describe("FileUploader", () => {
 
 		expect(element.nativeElement.querySelector(".cds--file__state-container .cds--file--invalid")).toBeTruthy();
 	});
+
+	it("should correctly update this.files when onFilesAdded is called", () => {
+		fixture = TestBed.createComponent(FileUploader);
+		wrapper = fixture.componentInstance;
+		fixture.detectChanges();
+
+		const fileAlreadyAdded = new File([""], "test-filename-added", {type: "text/html"});
+		const currentFiles = new Set().add(wrapper.createFileItem(fileAlreadyAdded));
+		wrapper.files = currentFiles;
+		fixture.detectChanges();
+		expect(wrapper.value).toBe(currentFiles);
+
+		const dataTransfer = new DataTransfer();
+		const fileToAdd = new File(["test file"], "test-filename", {type: "text/html"});
+		dataTransfer.items.add(fileToAdd);
+		wrapper.fileInput.nativeElement.files = dataTransfer.files;
+		fixture.detectChanges();
+		wrapper.onFilesAdded();
+		const filesArray: FileItem[] = Array.from(wrapper.files);
+		expect(!!filesArray.find((fileItem: FileItem) => fileItem.file.name === fileToAdd.name)).toBe(true);
+	});
 });
 

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

@@ -6,7 +6,7 @@ import {
 	EventEmitter,
 	TemplateRef
 } from "@angular/core";
-import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 
 import { I18n } from "carbon-components-angular/i18n";
 import { FileItem } from "./file-item.interface";
@@ -89,7 +89,7 @@ const noop = () => { };
 		}
 	]
 })
-export class FileUploader {
+export class FileUploader implements ControlValueAccessor {
 	/**
 	 * Counter used to create unique ids for file-uploader components
 	 */
@@ -214,16 +214,17 @@ export class FileUploader {
 	}
 
 	onFilesAdded() {
+		const newFiles = new Set<FileItem>(this.files);
 		if (!this.multiple) {
-			this.files.clear();
+			newFiles.clear();
 		}
 		for (let file of this.fileList) {
 			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);
 	}
 
 	onDragOver(event) {
@@ -289,4 +290,15 @@ export class FileUploader {
 	registerOnChange(fn: any) {
 		this.onChangeCallback = fn;
 	}
+
+	/**
+	 * `ControlValueAccessor` method to programmatically disable the checkbox.
+	 *
+	 * ex: `this.formGroup.get("myFileUploader").disable();`
+	 *
+	 * @param isDisabled `true` to disable the file uploader
+	 */
+	setDisabledState(isDisabled: boolean) {
+		this.disabled = isDisabled;
+	}
 }

src/file-uploader/stories/uploader-reactive-form.component.ts

@@ -37,10 +37,28 @@ import {
 				Upload
 			</button>
 		</form>
+		<form [formGroup]="disabledFormGroup" (ngSubmit)="onUpload()">
+			<ibm-file-uploader
+				[title]="title"
+				[description]="description"
+				[buttonText]="buttonText"
+				[buttonType]="buttonType"
+				[accept]="accept"
+				[multiple]="multiple"
+				[skeleton]="skeleton"
+				[size]="size"
+				formControlName="files">
+			</ibm-file-uploader>
+			<div [id]="notificationId" style="width: 300px; margin-top: 20px"></div>
+			<button ibmButton *ngIf="disabledFormGroup.get('files').value && disabledFormGroup.get('files').value.size > 0" type="submit">
+				Upload
+			</button>
+		</form>
 	`
 })
 export class ReactiveFormsStory implements OnInit {
 	public formGroup: FormGroup;
+	public disabledFormGroup: FormGroup;
 
 	@Input() title;
 	@Input() description;
@@ -61,6 +79,10 @@ export class ReactiveFormsStory implements OnInit {
 		this.formGroup = this.formBuilder.group({
 			files: new FormControl(new Set<any>(), [Validators.required])
 		});
+		this.disabledFormGroup = this.formBuilder.group({
+			files: new FormControl(new Set<any>(), [Validators.required])
+		});
+		this.disabledFormGroup.disable();
 	}
 
 	onUpload() {

src/input/label.component.ts

@@ -162,12 +162,19 @@ export class Label implements AfterContentInit, AfterViewInit {
 			// Prioritize setting id to `input` & `textarea` over div
 			const inputElement = this.wrapper.nativeElement.querySelector("input,textarea");
 			if (inputElement) {
+				// avoid overriding ids already set by the user reuse it instead
+				if (inputElement.id) {
+					this.labelInputID = inputElement.id;
+				}
 				inputElement.setAttribute("id", this.labelInputID);
 				return;
 			}
 
 			const divElement = this.wrapper.nativeElement.querySelector("div");
 			if (divElement) {
+				if (divElement.id) {
+					this.labelInputID = divElement.id;
+				}
 				divElement.setAttribute("id", this.labelInputID);
 			}
 		}

src/tiles/clickable-tile.component.ts

@@ -24,6 +24,7 @@ import { Router } from "@angular/router";
 	<a
 		ibmLink
 		class="cds--tile cds--tile--clickable"
+		[ngClass]="{'cds--tile--light': theme === 'light'}"
 		tabindex="0"
 		(click)="navigate($event)"
 		[href]="href"
@@ -33,6 +34,8 @@ import { Router } from "@angular/router";
 	</a>`
 })
 export class ClickableTile {
+	@Input() theme: "light" | "dark" = "dark";
+
 	/**
 	 * Sets the `href` attribute on the `ibm-clickable-tile` element.
 	 */

src/tiles/expandable-tile.component.ts

@@ -17,7 +17,10 @@ export interface ExpandableTileTranslations {
 	template: `
 		<button
 			class="cds--tile cds--tile--expandable"
-			[ngClass]="{'cds--tile--is-expanded' : expanded}"
+			[ngClass]="{
+				'cds--tile--is-expanded' : expanded,
+				'cds--tile--light': theme === 'light'
+			}"
 			[ngStyle]="{'max-height': expandedHeight + 'px'}"
 			type="button"
 			(click)="onClick()">
@@ -39,6 +42,8 @@ export interface ExpandableTileTranslations {
 	`
 })
 export class ExpandableTile implements AfterContentInit {
+	@Input() theme: "light" | "dark" = "dark";
+
 	@Input() expanded = false;
 	/**
 	 * Expects an object that contains some or all of:

src/tiles/selection-tile.component.ts

@@ -7,7 +7,6 @@ import {
 	HostListener,
 	AfterViewInit
 } from "@angular/core";
-import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { I18n } from "carbon-components-angular/i18n";
 
 @Component({
@@ -17,7 +16,10 @@ import { I18n } from "carbon-components-angular/i18n";
 			class="cds--tile cds--tile--selectable"
 			tabindex="0"
 			[for]="id"
-			[ngClass]="{'cds--tile--is-selected' : selected}"
+			[ngClass]="{
+				'cds--tile--is-selected' : selected,
+				'cds--tile--light': theme === 'light'
+			}"
 			[attr.aria-label]="i18n.get('TILES.TILE') | async">
 			<input
 				#input
@@ -42,10 +44,14 @@ import { I18n } from "carbon-components-angular/i18n";
 })
 export class SelectionTile implements AfterViewInit {
 	static tileCount = 0;
+
+	@Input() theme: "light" | "dark" = "dark";
+
 	/**
 	 * The unique id for the input.
 	 */
 	@Input() id = `tile-${SelectionTile.tileCount}`;
+
 	/**
 	 * Updating the state of the input to match the state of the parameter passed in.
 	 * Set to `true` if this tile should be selected.