Merge branch 'master' into ng15

Author: Akshat55

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

@@ -67,10 +67,10 @@ 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"
 				[ngClass]="{
 					'bx--list-box__menu-item--active': item.selected,
-					'bx--list-box__menu-item--highlighted': highlightedItem === getItemId(i),
-					disabled: item.disabled
+					'bx--list-box__menu-item--highlighted': highlightedItem === getItemId(i)
 				}">
 				<div
 					#listItem
@@ -277,7 +277,6 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 		this.updateIndex();
 		this.setupFocusObservable();
 		setTimeout(() => {
-			if (this.getSelected() !== []) { return; }
 			this.doEmitSelect();
 		});
 	}

src/grid/grid.directive.ts

@@ -1,4 +1,9 @@
-import { Directive, HostBinding, Input, OnInit } from "@angular/core";
+import { 
+	Directive,
+	HostBinding,
+	Input,
+	OnChanges
+} from "@angular/core";
 
 /**
  * [See demo](../../?path=/story/components-grid--basic)
@@ -37,7 +42,7 @@ export class RowDirective {
 @Directive({
 	selector: "[ibmCol]"
 })
-export class ColumnDirective implements OnInit {
+export class ColumnDirective implements OnChanges {
 	@Input() class = "";
 
 	@Input() columnNumbers = {};
@@ -51,12 +56,14 @@ export class ColumnDirective implements OnInit {
 		return this._columnClasses.join(" ");
 	}
 
-	set(classes: string) {
+	set columnClasses(classes: string) {
 		this._columnClasses = classes.split(" ");
 	}
 
-	ngOnInit() {
+	ngOnChanges() {
 		try {
+			// Reset classes so we don't apply classes for the same breakpoint multiple times
+			this._columnClasses = [];
 			const columnKeys = Object.keys(this.columnNumbers);
 			if (columnKeys.length <= 0) {
 				this._columnClasses.push("bx--col");
@@ -78,7 +85,7 @@ export class ColumnDirective implements OnInit {
 		}
 
 		if (this.class) {
-			this._columnClasses.push(this.class);
+			this._columnClasses = [...new Set([...this._columnClasses, ...this.class.split(" ")])];
 		}
 	}
 }

src/timepicker-select/timepicker-select.component.ts

@@ -22,6 +22,7 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 			<select
 				#select
 				[attr.id]="id"
+				[attr.aria-label]="ariaLabel"
 				[disabled]="disabled"
 				(change)="onChange($event)"
 				class="bx--select-input">
@@ -44,6 +45,8 @@ export class TimePickerSelect extends Select {
 
 	@Input() id = `timepicker-select-${TimePickerSelect.selectCount++}`;
 
+	@Input() ariaLabel: string;
+
 	/**
 	 * Set to true for a loading select.
 	 */

src/timepicker/timepicker.component.spec.ts

@@ -11,6 +11,7 @@ import { TimePicker } from "./timepicker.component";
 		(valueChange)="onChange()"
 		[(value)]="value"
 		label="test"
+		size="lg"
 		disabled="false">
 	</ibm-timepicker>`
 })
@@ -50,6 +51,12 @@ describe("TimePicker", () => {
 		expect(element.getAttribute("theme")).toEqual("dark");
 	});
 
+	it("should set size to large", () => {
+		fixture = TestBed.createComponent(TimePickerTest);
+		element = fixture.debugElement.query(By.css("ibm-timepicker")).nativeElement;
+		expect(element.getAttribute("size")).toEqual("lg");
+	});
+
 	it("should set disabled to false", () => {
 		fixture = TestBed.createComponent(TimePickerTest);
 		element = fixture.debugElement.query(By.css("ibm-timepicker")).nativeElement;

src/timepicker/timepicker.component.ts

@@ -17,13 +17,24 @@ import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
 @Component({
 	selector: "ibm-timepicker",
 	template: `
-		<label *ngIf="!skeleton && label" [for]="id" class="bx--label">
+		<label
+			*ngIf="!skeleton && label"
+			[for]="id"
+			[ngClass]="{
+				'bx--label': true,
+				'bx--visually-hidden': hideLabel
+		}">
 			<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
 			<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
 		</label>
 		<div
 			class="bx--time-picker"
-			[ngClass]="{'bx--time-picker--invalid' : invalid}">
+			[ngClass]="{
+				'bx--time-picker--invalid' : invalid,
+				'bx--time-picker--sm': size === 'sm',
+				'bx--time-picker--md': size === 'md',
+				'bx--time-picker--lg': size === 'lg'
+			}">
 			<div class="bx--time-picker__input">
 				<input
 					[ngClass]="{
@@ -36,7 +47,7 @@ import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
 					[pattern]="pattern"
 					[attr.id]="id"
 					[disabled]="disabled"
-					maxlength="5"
+					[attr.maxlength]="maxLength"
 					(change)="onChange($event)"
 					type="text"
 					class="bx--time-picker__input-field bx--text-input">
@@ -65,11 +76,13 @@ export class TimePicker implements ControlValueAccessor {
 	@Input() invalid = false;
 	@Input() invalidText: string | TemplateRef<any>;
 	@Input() label: string | TemplateRef<any>;
+	@Input() hideLabel = false;
 	@Input() placeholder = "hh:mm";
 	@Input() pattern = "(1[012]|[0-9]):[0-5][0-9]";
 	@Input() id = `timepicker-${TimePicker.timePickerCount++}`;
 	@Input() disabled = false;
 	@Input() value: string;
+	@Input() maxLength = 5;
 
 	/**
 	 * Set to true for a loading select.
@@ -81,6 +94,11 @@ export class TimePicker implements ControlValueAccessor {
 	 */
 	@Input() theme: "light" | "dark" = "dark";
 
+	/**
+	 * `sm`, `md` (default), or `lg` select size
+	 */
+	@Input() size: "sm" | "md" | "lg" = "md";
+
 	@Output() valueChange: EventEmitter<string> = new EventEmitter();
 
 	/**

src/timepicker/timepicker.stories.ts

@@ -32,12 +32,21 @@ storiesOf("Components|Time Picker", module)
 			(valueChange)="timePickerChange($event)"
 			[value]="value"
 			[disabled]="disableTime"
+			[size]="size"
 			label="Select a time">
-			<ibm-timepicker-select [theme]="theme" (valueChange)="timePickerSelectChange($event)" [disabled]="disabledSelect" display="inline">
+			<ibm-timepicker-select
+				[theme]="theme"
+				(valueChange)="timePickerSelectChange($event)"
+				[disabled]="disabledSelect"
+				ariaLabel="Open list of options">
 				<option selected value="AM">AM</option>
 				<option value="PM">PM</option>
 			</ibm-timepicker-select>
-			<ibm-timepicker-select [theme]="theme" (valueChange)="timePickerSelectChange($event)" [disabled]="disabledSelect" display="inline">
+			<ibm-timepicker-select
+				[theme]="theme"
+				(valueChange)="timePickerSelectChange($event)"
+				[disabled]="disabledSelect"
+				ariaLabel="Open list of options">
 				<option selected value="Time Zone 1">Time Zone 1</option>
 				<option value="Time Zone 2">Time Zone 2</option>
 			</ibm-timepicker-select>
@@ -51,6 +60,7 @@ storiesOf("Components|Time Picker", module)
 			disableTime: boolean("disabled time", false),
 			disabledSelect: boolean("disabled selects", false),
 			theme: select("Theme", ["dark", "light"], "dark"),
+			size: select("Size", ["sm", "md", "lg"], "md"),
 			invalid: boolean("Show form validation", false),
 			invalidText: text("Form validation text", "A valid value is required")
 		}
@@ -66,17 +76,17 @@ storiesOf("Components|Time Picker", module)
 				[theme]="theme"
 				(valueChange)="timePickerSelectChange($event)"
 				[disabled]="disabledSelect"
-				display="inline"
-				[(ngModel)]="period">
+				[(ngModel)]="period"
+				ariaLabel="Open list of options">
 				<option selected value="AM">AM</option>
 				<option value="PM">PM</option>
 			</ibm-timepicker-select>
 			<ibm-timepicker-select
 				[theme]="theme"
 				(valueChange)="timePickerSelectChange($event)"
 				[disabled]="disabledSelect"
-				display="inline"
-				[(ngModel)]="timeZone">
+				[(ngModel)]="timeZone"
+				ariaLabel="Open list of options">
 				<option selected value="Time Zone 1">Time Zone 1</option>
 				<option value="Time Zone 2">Time Zone 2</option>
 			</ibm-timepicker-select>