Merge branch 'master' into ng15

Author: Akshat55

src/combobox/combobox.stories.ts

@@ -1,6 +1,6 @@
 import { storiesOf, moduleMetadata } from "@storybook/angular";
 import { action } from "@storybook/addon-actions";
-import { withKnobs, text, boolean, number, select } from "@storybook/addon-knobs/angular";
+import { withKnobs, text, boolean, object, number, select } from "@storybook/addon-knobs/angular";
 
 import { ComboBoxModule } from "./combobox.module";
 import { ButtonModule } from "../button/button.module";
@@ -30,20 +30,12 @@ const getOptions = (override = {}) => {
 		warnText: text("Text for the warning", "This is a warning"),
 		label: text("Label", "ComboBox label"),
 		helperText: text("Helper text", "Optional helper text."),
-		items: [
-			{
-				content: "one"
-			},
-			{
-				content: "two"
-			},
-			{
-				content: "three"
-			},
-			{
-				content: "four"
-			}
-		],
+		items: object("items", [
+			{ content: "one" },
+			{ content: "two", selected: true },
+			{ content: "three", disabled: true },
+			{ content: "four", disabled: false }
+		]),
 		selected: action("selection changed"),
 		submit: action("submit"),
 		size: select("size", ["sm", "md", "xl"], "md"),
@@ -170,7 +162,7 @@ class ReactiveFormsCombobox implements OnInit {
 	@Input() helperText = "";
 	@Input() size = "md";
 	@Input() theme = "dark";
-	@Input() set items(newItems = []) {
+	@Input() set items(newItems) {
 		if (!isEqual(this._items, newItems)) {
 			this._items = newItems;
 		}

src/datepicker-input/datepicker-input.component.ts

@@ -67,8 +67,15 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 							class="bx--date-picker__icon bx--date-picker__icon--warn">
 						</svg>
 				</div>
+				<div
+					*ngIf="helperText && !invalid && !warn"
+					class="bx--form__helper-text"
+					[ngClass]="{'bx--form__helper-text--disabled': disabled}">
+					<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
+					<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
+				</div>
 				<div *ngIf="!warn && invalid" class="bx--form-requirement">
-					<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
+					<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
 					<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
 				</div>
 				<div *ngIf="!invalid && warn" class="bx--form-requirement">
@@ -127,6 +134,11 @@ export class DatePickerInput {
 	 */
 	@Input() warnText: string | TemplateRef<any>;
 
+	/**
+	 * Sets the optional helper text.
+	 */
+	@Input() helperText: string | TemplateRef<any>;
+
 	@Input() skeleton = false;
 
 	@Input() value = "";
@@ -136,7 +148,7 @@ export class DatePickerInput {
 	// @ts-ignore
 	@ViewChild("input", { static: false }) input: ElementRef;
 
-	constructor(protected elementRef: ElementRef) {}
+	constructor(protected elementRef: ElementRef) { }
 
 	onChange(event) {
 		this.value = event.target.value;
@@ -157,9 +169,9 @@ export class DatePickerInput {
 		this.onTouched = fn;
 	}
 
-	onTouched: () => any = () => {};
+	onTouched: () => any = () => { };
 
-	propagateChange = (_: any) => {};
+	propagateChange = (_: any) => { };
 
 	public isTemplate(value) {
 		return value instanceof TemplateRef;

src/datepicker/datepicker.component.ts

@@ -59,6 +59,7 @@ import { I18n } from "carbon-components-angular/i18n";
 					[warn]="warn"
 					[warnText]="warnText"
 					[skeleton]="skeleton"
+					[helperText]="helperText"
 					(valueChange)="onValueChange($event)"
 					(click)="openCalendar(input)">
 				</ibm-date-picker-input>
@@ -80,6 +81,7 @@ import { I18n } from "carbon-components-angular/i18n";
 					[warn]="rangeWarn"
 					[warnText]="rangeWarnText"
 					[skeleton]="skeleton"
+					[helperText]="rangeHelperText"
 					(valueChange)="onRangeValueChange($event)"
 					(click)="openCalendar(rangeInput)">
 				</ibm-date-picker-input>
@@ -130,8 +132,9 @@ export class DatePicker implements
 	 */
 	@Input() language = "en";
 
-	@Input() label: string  | TemplateRef<any>;
-
+	@Input() label: string | TemplateRef<any>;
+	@Input() helperText: string | TemplateRef<any>;
+	@Input() rangeHelperText: string | TemplateRef<any>;
 	@Input() rangeLabel: string;
 
 	@Input() placeholder = "mm/dd/yyyy";
@@ -220,7 +223,7 @@ export class DatePicker implements
 	get flatpickrOptions() {
 		const plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];
 		if (this.range) {
-			plugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: "left"}));
+			plugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: "left" }));
 		}
 		return Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {
 			mode: this.range ? "range" : "single",
@@ -407,9 +410,9 @@ export class DatePicker implements
 		this.onTouched = fn;
 	}
 
-	onTouched: () => any = () => {};
+	onTouched: () => any = () => { };
 
-	propagateChange = (_: any) => {};
+	propagateChange = (_: any) => { };
 
 	/**
 	 * Cleans up our flatpickr instance

src/datepicker/datepicker.stories.ts

@@ -194,7 +194,8 @@ storiesOf("Components|Date Picker", module)
 				[warn]="warn"
 				[warnText]="warnText"
 				[dateFormat]="dateFormat"
-				(valueChange)="valueChange($event)">
+				(valueChange)="valueChange($event)"
+				[helperText]="helperText">
 			</ibm-date-picker>
 			<p style="margin-top: 20px;">Without initial value</p>
 			<ibm-date-picker
@@ -209,7 +210,8 @@ storiesOf("Components|Date Picker", module)
 				[warn]="warn"
 				[warnText]="warnText"
 				[dateFormat]="dateFormat"
-				(valueChange)="valueChange($event)">
+				(valueChange)="valueChange($event)"
+				[helperText]="helperText">
 			</ibm-date-picker>
 		`,
 		props: {
@@ -222,6 +224,7 @@ storiesOf("Components|Date Picker", module)
 			invalidText: text("Form validation content", "Invalid date format"),
 			warn: boolean("Show the warning state", false),
 			warnText: text("Text for the warning", "This is a warning"),
+			helperText: text("Helper text", ""),
 			invalid: boolean("Show form validation", false),
 			disabled: boolean("Disabled", false),
 			dateFormat: text("Date format", "m/d/Y"),
@@ -249,7 +252,8 @@ storiesOf("Components|Date Picker", module)
 			[rangeInvalidText]="invalidText"
 			[dateFormat]="dateFormat"
 			[value]="value"
-			(valueChange)="valueChange($event)">
+			(valueChange)="valueChange($event)"
+			[helperText]="helperText">
 		</ibm-date-picker>
 		<p style="margin-top: 20px;">Without initial value</p>
 		<ibm-date-picker
@@ -268,7 +272,8 @@ storiesOf("Components|Date Picker", module)
 			[rangeWarn]="warn"
 			[rangeWarnText]="warnText"
 			[dateFormat]="dateFormat"
-			(valueChange)="valueChange($event)">
+			(valueChange)="valueChange($event)"
+			[helperText]="helperText">
 		</ibm-date-picker>
 		`,
 		props: {
@@ -281,6 +286,7 @@ storiesOf("Components|Date Picker", module)
 			invalidText: text("Form validation content", "Invalid date format"),
 			warn: boolean("Show the warning state", false),
 			warnText: text("Text for the warning", "This is a warning"),
+			helperText: text("Helper text", ""),
 			invalid: boolean("Show form validation", false),
 			disabled: boolean("Disabled", false),
 			dateFormat: text("Date format", "m/d/Y"),

src/dropdown/dropdown.stories.ts

@@ -62,8 +62,8 @@ const getProps = (overrides = {}) => Object.assign({}, {
 	items: object("items", [
 		{ content: "one" },
 		{ content: "two", selected: true },
-		{ content: "three" },
-		{ content: "four" }
+		{ content: "three", disabled: true },
+		{ content: "four", disabled: false }
 	]),
 	selected: action("Selected fired for dropdown"),
 	onClose: action("Dropdown closed"),
@@ -307,7 +307,7 @@ storiesOf("Components|Dropdown", module)
 			</app-reactive-forms>
 		`,
 		props: getProps({
-			items: [
+			items: object("items", [
 				{
 					content: "numerical value item 1",
 					oid: 1,
@@ -318,7 +318,7 @@ storiesOf("Components|Dropdown", module)
 					oid: 2,
 					selected: false
 				}
-			],
+			]),
 			selectionFeedback: select("Selection feedback", ["top", "fixed", "top-after-reopen"], "top-after-reopen"),
 			selected: action("Selected fired for multi-select dropdown"),
 			onClose: action("Multi-select dropdown closed")
@@ -343,12 +343,7 @@ storiesOf("Components|Dropdown", module)
 		</div>
 	`,
 		props: getProps({
-			items: of([
-				{ content: "one" },
-				{ content: "two", selected: true },
-				{ content: "three" },
-				{ content: "four" }
-			])
+			items: of({...getProps()}.items)
 		})
 	}))
 	.add("With Template", () => ({

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

@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By	} from "@angular/platform-browser";
 
 import { DropdownList } from "./dropdown-list.component";
@@ -11,7 +11,10 @@ import { I18nModule } from "../../i18n/index";
 	template: `<ibm-dropdown-list [items]="items" (select)="onSelect($event)"></ibm-dropdown-list>`
 })
 class DropdownListTest {
-	items = [{content: "one", selected: false}, {content: "two", selected: false}];
+	items = [
+		<ListItem>{content: "one", selected: false},
+		<ListItem>{content: "two", selected: false}
+	];
 	selected: ListItem;
 	onSelect(ev) {
 		this.selected = ev.item;
@@ -22,15 +25,18 @@ class DropdownListTest {
 	template: `<ibm-dropdown-list [items]="items" (select)="onSelect($event)" type="multi"></ibm-dropdown-list>`
 })
 class MultiTest {
-	items = [{content: "one", selected: false}, {content: "two", selected: false}];
+	items = [
+		<ListItem>{content: "one", selected: false},
+		<ListItem>{content: "two", selected: false}
+	];
 	selected: ListItem[];
 	onSelect(ev) {
 		this.selected = ev;
 	}
 }
 
 describe("Dropdown list", () => {
-	let fixture, wrapper;
+	let fixture: ComponentFixture<DropdownListTest>, wrapper: DropdownListTest;
 	beforeEach(() => {
 		TestBed.configureTestingModule({
 			declarations: [
@@ -51,8 +57,8 @@ describe("Dropdown list", () => {
 	});
 
 	it("should work", () => {
-		fixture = TestBed.createComponent(DropdownList);
-		expect(fixture.componentInstance instanceof DropdownList).toBe(true);
+		let fixture2 = TestBed.createComponent(DropdownList);
+		expect(fixture2.componentInstance instanceof DropdownList).toBe(true);
 	});
 
 	it("should select an item", () => {
@@ -62,10 +68,23 @@ describe("Dropdown list", () => {
 		});
 		expect(wrapper.selected.content).toBe("one");
 	});
+
+	it("should disable a list-item", () => {
+		wrapper.items = [
+			<ListItem>{content: "one", selected: false},
+			<ListItem>{content: "two", selected: false, disabled: false},
+			<ListItem>{content: "three", selected: false, disabled: true}
+		];
+		fixture.detectChanges();
+		const disabledEls = fixture.debugElement.queryAll(By.css(".bx--list-box__menu-item[disabled]"));
+		expect(disabledEls.length).toEqual(1);
+		const enabledEls = fixture.debugElement.queryAll(By.css(".bx--list-box__menu-item:not([disabled])"));
+		expect(enabledEls.length).toEqual(2);
+	});
 });
 
 describe("Dropdown multi list", () => {
-	let fixture, wrapper;
+	let fixture: ComponentFixture<MultiTest>, wrapper: MultiTest;
 	beforeEach(() => {
 		TestBed.configureTestingModule({
 			declarations: [
@@ -86,9 +105,9 @@ describe("Dropdown multi list", () => {
 	});
 
 	it("should work", () => {
-		fixture = TestBed.createComponent(DropdownList);
-		fixture.type = "multi";
-		expect(fixture.componentInstance instanceof DropdownList).toBe(true);
+		let fixture2 = TestBed.createComponent(DropdownList);
+		fixture2.componentInstance.type = "multi";
+		expect(fixture2.componentInstance instanceof DropdownList).toBe(true);
 	});
 
 	it("should multi select", () => {
@@ -104,4 +123,21 @@ describe("Dropdown multi list", () => {
 		expect(wrapper.selected[0].content).toBe("one");
 		expect(wrapper.selected[1].content).toBe("two");
 	});
+
+	it("should disable a list-item and its checkbox", () => {
+		wrapper.items = [
+			<ListItem>{content: "one", selected: false},
+			<ListItem>{content: "two", selected: false, disabled: false},
+			<ListItem>{content: "three", selected: false, disabled: true}
+		];
+		fixture.detectChanges();
+		const disabledEls = fixture.debugElement.queryAll(By.css(".bx--list-box__menu-item[disabled]"));
+		const disabledInputEls = fixture.debugElement.queryAll(By.css(".bx--checkbox[disabled]"));
+		expect(disabledEls.length).toEqual(1);
+		expect(disabledInputEls.length).toEqual(1);
+		const enabledEls = fixture.debugElement.queryAll(By.css(".bx--list-box__menu-item:not([disabled])"));
+		const enabledInputEls = fixture.debugElement.queryAll(By.css(".bx--checkbox:not([disabled])"));
+		expect(enabledEls.length).toEqual(2);
+		expect(enabledInputEls.length).toEqual(2);
+	});
 });

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

@@ -67,7 +67,7 @@ import { ScrollCustomEvent } from "./scroll-custom-event.interface";
 				[attr.aria-selected]="item.selected"
 				[id]="getItemId(i)"
 				[attr.title]=" showTitles ? item.content : null"
-				[attr.disabled]="item.disabled"
+				[attr.disabled]="item.disabled ? true : null"
 				[ngClass]="{
 					'bx--list-box__menu-item--active': item.selected,
 					'bx--list-box__menu-item--highlighted': highlightedItem === getItemId(i)

src/grid/grid.directive.ts

@@ -1,4 +1,4 @@
-import { 
+import {
 	Directive,
 	HostBinding,
 	Input,