Merge branch 'master' into loading-inactive

Author: zvonimirfras

.storybook/config.js

@@ -27,8 +27,8 @@ addDecorator(
 );
 
 // load global styles
-require("!style-loader!css-loader!sass-loader!./preview.scss");
-require("!style-loader!css-loader!sass-loader!./preview-experimental.scss");
+require("!style-loader!css-loader!postcss-loader!sass-loader!./preview.scss");
+require("!style-loader!css-loader!postcss-loader!sass-loader!./preview-experimental.scss");
 
 require("../src/index.stories");
 // automatically import all files ending in *.stories.ts

src/content-switcher/content-switcher-option.directive.ts

@@ -11,6 +11,9 @@ import {
 	selector: "[ibmContentOption]"
 })
 export class ContentSwitcherOption {
+	/**
+	 * Used to activate the option. Only one option may be `active` at a time
+	 */
 	@Input() set active (value: boolean) {
 		this._active = value;
 		this.selectedClass = value;
@@ -22,8 +25,16 @@ export class ContentSwitcherOption {
 		return this._active;
 	}
 
+	/**
+	 * Internal name for the option.
+	 * Should be something that identifies the option to the application.
+	 * Accessible from the `ContentSwitcher` `selected` emitter
+	 */
 	@Input() name = "option";
 
+	/**
+	 * Emits when the option is selected.
+	 */
 	@Output() selected = new EventEmitter();
 
 	@HostBinding("class") switcherClass = "bx--content-switcher-btn";

src/content-switcher/content-switcher.component.ts

@@ -13,8 +13,16 @@ import { ContentSwitcherOption } from "./content-switcher-option.directive";
 import { isFocusInLastItem, isFocusInFirstItem } from "./../common/tab.service";
 
 /**
+ * The content switcher can be used for toggling between distinct options.
+ * Similar to tabs, but without an associated content panel
  *
- *
+ * ```html
+ * <ibm-content-switcher (selected)="selected($event)">
+ *		<button ibmContentOption>First section</button>
+ *		<button ibmContentOption>Second section</button>
+ *		<button ibmContentOption>Third section</button>
+ *	</ibm-content-switcher>
+ *	```
  */
 @Component({
 	selector: "ibm-content-switcher",
@@ -28,16 +36,27 @@ import { isFocusInLastItem, isFocusInFirstItem } from "./../common/tab.service";
 	`
 })
 export class ContentSwitcher implements AfterViewInit {
+	/**
+	 * aria-label for the content switcher. Should be set to something descriptive
+	 */
 	@Input() label = "content switcher";
 
+	/**
+	 * Emits the activated `ContentSwitcherOption`
+	 */
 	@Output() selected = new EventEmitter();
 
 	@ContentChildren(ContentSwitcherOption) options: QueryList<ContentSwitcherOption>;
 
 	constructor(protected elementRef: ElementRef) {}
 
 	ngAfterViewInit() {
-		this.options.first.active = true;
+		const firstActive = this.options.find(option => option.active);
+		// delay setting active until the DOM has settled
+		if (!firstActive) {
+			setTimeout(() => this.options.first.active = true);
+		}
+		// subscribe to each item, emit when one is selected, and reset the active states
 		this.options.forEach(option => {
 			option.selected.subscribe(_ => {
 				const active = option;
@@ -53,7 +72,7 @@ export class ContentSwitcher implements AfterViewInit {
 
 	@HostListener("keydown", ["$event"])
 	hostkeys(event: KeyboardEvent) {
-		const buttonList = Array.from<any>(this.elementRef.nativeElement.querySelectorAll(".bx--content-switcher-btn"));
+		const buttonList = Array.from<any>(this.elementRef.nativeElement.querySelectorAll("[ibmContentOption]"));
 
 		switch (event.key) {
 			case "Right": // IE specific value

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

@@ -212,6 +212,7 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 		this.index = this._items.findIndex(item => item.selected);
 		this.setupFocusObservable();
 		setTimeout(() => {
+			if (!this.getSelected()) { return; }
 			if (this.type === "single") {
 				this.select.emit({ item: this._items.find(item => item.selected) });
 			} else {

src/pagination/pagination.component.ts

@@ -23,7 +23,7 @@ import { ExperimentalService } from "./../experimental.module";
  *
  * ```typescript
  * selectPage(page) {
- * 	// ... your code to laod the page goes here
+ * 	// ... your code to load the page goes here
  *
  * 	this.model.currentPage = page;
  *
@@ -279,7 +279,6 @@ export class Pagination {
 	 * `PaginationModel` with the information about pages you're controlling.
 	 *
 	 * @type {Model}
-	 * @memberof Pagination
 	 */
 	@Input() model: PaginationModel;
 
@@ -327,32 +326,28 @@ export class Pagination {
 	 *
 	 * You should tie into this and update `model.currentPage` once the fresh
 	 * data is finally loaded.
-	 *
-	 * @memberof Pagination
 	 */
 	@Output() selectPage = new EventEmitter<number>();
 
 	get itemsPerPage() {
 		return this.model.pageLength;
 	}
 	set itemsPerPage(value) {
-		this.model.pageLength = value;
+		this.model.pageLength = Number(value);
 		this.currentPage = 1; // reset page
 	}
 
 	get currentPage() {
 		return this.model.currentPage;
 	}
 	set currentPage(value) {
+		value = Number(value);
 		// emits the value to allow the user to update current page
 		// in the model once the page is loaded
 		this.selectPage.emit(value);
 	}
 	/**
 	 * The last page number to display in the pagination view.
-	 *
-	 * @returns {number}
-	 * @memberof Pagination
 	 */
 	get lastPage(): number {
 		const last = Math.ceil(this.model.totalDataLength / this.model.pageLength);
@@ -371,19 +366,13 @@ export class Pagination {
 
 	/**
 	 * The previous page number to navigate to, from the current page.
-	 *
-	 * @returns {number}
-	 * @memberof Pagination
 	 */
 	get previousPage(): number {
 		return this.currentPage <= 1 ? 1 : this.currentPage - 1;
 	}
 
 	/**
 	 * The next page number to navigate to, from the current page.
-	 *
-	 * @returns {number}
-	 * @memberof Pagination
 	 */
 	get nextPage(): number {
 		const lastPage = this.lastPage;
@@ -412,12 +401,7 @@ export class Pagination {
 	/**
 	 * Generates a list of numbers. (Python function)
 	 * Used to display the correct pagination controls.
-	 *
-	 * @param {number} stop
-	 * @param {number} [start=0]
-	 * @param {number} [step=1]
 	 * @returns {array}
-	 * @memberof Pagination
 	 */
 	range(stop: number, start = 0, step = 1) {
 		return range(stop, start, step);