Merge branch 'master' into master

Author: silk-bahamut

src/combobox/combobox.component.ts

@@ -546,8 +546,8 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 						this.elementRef.nativeElement.querySelector("input").focus();
 						this.view.filterBy("");
 						this.selected.emit(event.item);
+						this.closeDropdown();
 					}
-					this.closeDropdown();
 				}
 			});
 			// update the rest of combobox with any pre-selected items
@@ -691,8 +691,14 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 		});
 		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)
+		/**
+		 * @todo - In next major version update to the following:
+		 * const selected = this.type === "multi" ? this.view.getSelected() : undefined;
+		 *
+		 * Previously it returned an empty array even for type === 'single'
+		 * Also resolve #ref-1245723
+		 */
+		// On type=multi we just emit getSelected() (just in case there's any disabled but selected items)
 		const selected = this.view.getSelected();
 
 		// in case there are disabled items they should be mapped according to itemValueKey

src/combobox/stories/app-mock-query-search.component.ts

@@ -6,23 +6,43 @@ import { Component } from "@angular/core";
 		<cds-combo-box
 			appendInline="true"
 			[items]="filterItems"
-			(search)="onSearch($event)">
+			(search)="onSearch($event)"
+			(selected)="selected($event)">
 			<cds-dropdown-list></cds-dropdown-list>
 		</cds-combo-box>
 	`
 })
 export class MockQueryCombobox {
 	filterItems: any = [];
+	currentlySelected: any;
 
 	onSearch() {
 		// Call API or search through items list
 		setTimeout(() => {
-			this.filterItems = [
+			const array = [
 				{ content: `Random ${Math.random()}` },
 				{ content: `Random ${Math.random()}` },
 				{ content: `Random ${Math.random()}` },
 				{ content: `Random ${Math.random()}` }
 			];
+
+			// Include current selected in the list to avoid auto clear
+			if (this.currentlySelected) {
+				array.push(this.currentlySelected);
+			}
+			this.filterItems = array;
 		}, 1000);
 	}
+
+	selected(event: any) {
+		/**
+		 * #ref-1245723
+		 * Update this on major release
+		 */
+		if (Array.isArray(event) && !event.length) {
+			this.currentlySelected = undefined;
+		} else {
+			this.currentlySelected = event;
+		}
+	}
 }

src/context-menu/context-menu-item.component.ts

@@ -117,6 +117,9 @@ export class ContextMenuItemComponent implements OnInit, AfterContentInit, OnDes
 	@HostListener("click", ["$event"])
 	handleClick(event: MouseEvent & KeyboardEvent) {
 		event.stopPropagation();
+		if (this.disabled) {
+			return;
+		}
 		if (this.hasChildren) {
 			this.openSubMenu();
 			this.childContextMenu.focusMenu();

src/datepicker/datepicker.component.ts

@@ -510,9 +510,11 @@ export class DatePicker implements
 
 					const calendarContainer = this.flatpickrInstance.calendarContainer;
 					const dayElement = calendarContainer && calendarContainer.querySelector(".flatpickr-day[tabindex]");
+					const selectedDateElem = calendarContainer && calendarContainer.querySelector(".selected");
+					const todayDateElem = calendarContainer && calendarContainer.querySelector(".today");
 
 					if (dayElement) {
-						dayElement.focus();
+						(todayDateElem || selectedDateElem || dayElement).focus();
 
 						// If the user manually inputs a value into the date field and presses arrow down,
 						// datepicker input onchange will be triggered when focus is removed from it and
@@ -591,6 +593,7 @@ export class DatePicker implements
 
 		// add day classes and special case the "today" element based on `this.value`
 		Array.from(dayContainer).forEach(element => {
+			element.setAttribute("role", "button");
 			element.classList.add("cds--date-picker__day");
 			if (!this.value) {
 				return;
@@ -606,7 +609,7 @@ export class DatePicker implements
 	protected updateAttributes() {
 		const calendarContainer = document.querySelectorAll(".flatpickr-calendar");
 		Array.from(calendarContainer).forEach(calendar => {
-			calendar.setAttribute("role", "region");
+			calendar.setAttribute("role", "application");
 			calendar.setAttribute("aria-label", this.ariaLabel);
 		});
 	}

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

@@ -73,8 +73,10 @@ const noop = () => { };
 					<ng-container *ngFor="let fileItem of files">
 						<cds-file
 							[fileItem]="fileItem"
-							(remove)="removeFile(fileItem)"
-							[size]="fileItemSize">
+							[nameTpl]="fileNameTpl"
+							[actionsTpl]="fileActionsTpl"
+							[size]="fileItemSize"
+							(remove)="removeFile(fileItem)">
 						</cds-file>
 					</ng-container>
 				</div>
@@ -164,6 +166,14 @@ export class FileUploader implements ControlValueAccessor {
 	 * Set to `true` to disable upload button
 	 */
 	@Input() disabled = false;
+	/**
+	 * Custom template used to render the file name of uploaded files
+	 */
+	@Input() fileNameTpl: TemplateRef<unknown>;
+	/**
+	 * Custom template used to render the file actions of uploaded files
+	 */
+	@Input() fileActionsTpl: TemplateRef<unknown>;
 
 	@Output() filesChange = new EventEmitter<any>();
 

src/file-uploader/file-uploader.stories.ts

@@ -1,14 +1,17 @@
 /* tslint:disable variable-name */
 
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { moduleMetadata, Meta } from "@storybook/angular";
-import { FileUploaderModule, FileUploader } from "./";
-import { NotificationModule } from "../notification";
+import { Meta, moduleMetadata } from "@storybook/angular";
 import { ButtonModule } from "../button";
+import { IconModule } from "../icon";
+import { NotificationModule } from "../notification";
+import { FileUploader, FileUploaderModule } from "./";
 import {
+	CustomFileIconsModule,
+	DragAndDropStory,
 	FileUploaderStory,
+	FileUploaderWithCustomFileStory,
 	NgModelFileUploaderStory,
-	DragAndDropStory,
 	ReactiveFormsStory
 } from "./stories";
 
@@ -18,16 +21,19 @@ export default {
 		moduleMetadata({
 			declarations: [
 				FileUploaderStory,
+				FileUploaderWithCustomFileStory,
 				NgModelFileUploaderStory,
 				DragAndDropStory,
 				ReactiveFormsStory
 			],
 			imports: [
+				ButtonModule,
+				CustomFileIconsModule,
 				FileUploaderModule,
 				FormsModule,
-				ReactiveFormsModule,
+				IconModule,
 				NotificationModule,
-				ButtonModule
+				ReactiveFormsModule
 			]
 		})
 	],
@@ -81,6 +87,37 @@ const Template = (args) => ({
 });
 export const Basic = Template.bind({});
 
+const CustomFile = (args) => ({
+	props: args,
+	template: `
+		<!--
+		app-* components are for demo purposes only.
+		You can create your own implementation by using the component source found at:
+		https://github.com/IBM/carbon-components-angular/tree/master/src/file-uploader/stories/uploader-custom-file.component.ts
+		-->
+		<app-file-uploader-with-custom-file
+			[title]="title"
+			[description]="description"
+			[buttonText]="buttonText"
+			[buttonType]="buttonType"
+			[accept]="accept"
+			[multiple]="multiple"
+			[size]="size"
+			[fileItemSize]="fileItemSize"
+			[disabled]="disabled">
+		</app-file-uploader-with-custom-file>
+	`
+});
+export const UploaderWithCustomFile = CustomFile.bind({});
+UploaderWithCustomFile.argTypes = {
+	size: {
+		control: false
+	},
+	buttonType: {
+		control: false
+	}
+};
+
 const DragAndDropTemplate = (args) => ({
 	props: args,
 	template: `

src/file-uploader/file.component.ts

@@ -1,10 +1,11 @@
 import {
 	Component,
-	Input,
-	Output,
 	EventEmitter,
 	HostBinding,
-	OnDestroy
+	Input,
+	OnDestroy,
+	Output,
+	TemplateRef
 } from "@angular/core";
 
 import { I18n } from "carbon-components-angular/i18n";
@@ -13,43 +14,65 @@ import { FileItem } from "./file-item.interface";
 @Component({
 	selector: "cds-file, ibm-file",
 	template: `
-		<p class="cds--file-filename" [title]="fileItem.file.name">{{fileItem.file.name}}</p>
-		<span
-			*ngIf="fileItem.state === 'edit'"
-			class="cds--file__state-container">
+		<p class="cds--file-filename" [title]="fileItem.file.name">
+			<ng-template
+				*ngIf="isTemplate(nameTpl); else defaultName"
+				[ngTemplateOutlet]="nameTpl"
+				[ngTemplateOutletContext]="{ $implicit: fileItem }">
+			</ng-template>
+			<ng-template #defaultName>{{ fileItem.file.name }}</ng-template>
+		</p>
+		<span *ngIf="fileItem.state === 'edit'" class="cds--file__state-container">
 			<svg
 				*ngIf="isInvalidText"
 				cdsIcon="warning--filled"
 				class="cds--file--invalid"
 				size="16">
 			</svg>
-			<button
-				type="button"
-				class="cds--file-close"
-				[attr.aria-label]="translations.REMOVE_BUTTON"
-				tabindex="0"
-				(click)="remove.emit()"
-				(keyup.enter)="remove.emit()"
-				(keyup.space)="remove.emit()">
-				<svg cdsIcon="close" size="16"></svg>
-			</button>
+			<ng-template
+				*ngIf="isTemplate(actionsTpl); else defaultActions"
+				[ngTemplateOutlet]="actionsTpl"
+				[ngTemplateOutletContext]="{ $implicit: fileItem }">
+			</ng-template>
+			<ng-template #defaultActions>
+				<button
+					type="button"
+					cdsButton="ghost"
+					iconOnly="true"
+					[size]="size"
+					[attr.aria-label]="translations.REMOVE_BUTTON"
+					(click)="remove.emit()"
+					(keyup.enter)="remove.emit()"
+					(keyup.space)="remove.emit()">
+					<svg cdsIcon="trash-can" size="16"></svg>
+				</button>
+			</ng-template>
 		</span>
 		<span *ngIf="fileItem.state === 'upload'">
 			<div class="cds--inline-loading__animation">
 				<cds-loading size="sm"></cds-loading>
 			</div>
 		</span>
-		<span *ngIf="fileItem.state === 'complete'" class="cds--file__state-container">
+		<span
+			*ngIf="fileItem.state === 'complete'"
+			class="cds--file__state-container">
 			<svg
 				cdsIcon="checkmark--filled"
 				size="16"
 				class="cds--file-complete"
 				[ariaLabel]="translations.CHECKMARK">
 			</svg>
 		</span>
-		<div class="cds--form-requirement" role="alert" *ngIf="fileItem.invalid">
-			<div class="cds--form-requirement__title">{{fileItem.invalidTitle}}</div>
-			<p class="cds--form-requirement__supplement">{{fileItem.invalidText}}</p>
+		<div
+			class="cds--form-requirement"
+			role="alert"
+			*ngIf="fileItem.invalid">
+			<div class="cds--form-requirement__title">
+				{{ fileItem.invalidTitle }}
+			</div>
+			<p class="cds--form-requirement__supplement">
+				{{ fileItem.invalidText }}
+			</p>
 		</div>
 	`
 })
@@ -65,6 +88,16 @@ export class FileComponent implements OnDestroy {
 
 	@Input() size: "sm" | "md" | "lg" = "lg";
 
+	/**
+	 * A custom template for the file name
+	 */
+	@Input() nameTpl: TemplateRef<unknown>;
+
+	/**
+	 * A custom template for the available file actions
+	 */
+	@Input() actionsTpl: TemplateRef<unknown>;
+
 	@Output() remove = new EventEmitter();
 
 	@HostBinding("class.cds--file__selected-file") selectedFile = true;
@@ -84,8 +117,13 @@ export class FileComponent implements OnDestroy {
 	@HostBinding("class.cds--file__selected-file--lg") get fileSizeLarge() {
 		return this.size === "lg";
 	}
+
 	constructor(protected i18n: I18n) {}
 
+	public isTemplate(value: unknown): boolean {
+		return value instanceof TemplateRef;
+	}
+
 	ngOnDestroy() {
 		this.remove.emit();
 	}