Merge

Author: zvonimirfras

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-angular",
-  "version": "0.1.0",
+  "version": "0.0.0",
   "description": "Next generation components",
   "main": "index.js",
   "scripts": {

scripts/deploy.sh

@@ -17,5 +17,9 @@ if [[ $TRAVIS_BRANCH == "master" ]]; then
 	mkdir pages
 	cp -R dist/docs/documentation/ pages/documentation
 	cp -R dist/docs/storybook/* pages
+	version=$(node -e 'const package = require("./dist/package.json"); console.log(package.version);')
+	mkdir pages/$version
+	cp -R dist/docs/documentation/ pages/$version/documentation
+	cp -R dist/docs/storybook/* pages/$version
 	echo "angular.carbondesignsystem.com" > pages/CNAME
 fi

src/dialog/tooltip/tooltip.stories.ts

@@ -9,7 +9,7 @@ storiesOf("Tooltip", module)
 	.addDecorator(
 		moduleMetadata({
 			imports: [
-				DialogModule,
+				DialogModule
 			]
 		})
 	)

src/dropdown/dropdown.component.ts

@@ -115,6 +115,10 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 * @memberof Dropdown
 	 */
 	@Input() scrollableContainer: string;
+	/**
+	 * Specifies the property to be used as the return value to `ngModel`
+	 */
+	@Input() value: string;
 	/**
 	 * Accessible label for the button that opens the dropdown list.
 	 * Defaults to the `DROPDOWN.OPEN` value from the i18n service.
@@ -221,15 +225,17 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 		this.view.size = this.size;
 		this.elementRef.nativeElement.classList.add(this.buildClass());
 		this.view.select.subscribe(event => {
-			if (this.type === "single") {
-				this.closeMenu();
-				this.dropdownButton.nativeElement.focus();
-			}
 			if (this.type === "multi") {
 				this.propagateChange(this.view.getSelected());
 			} else {
-				if (event.item.selected) {
-					this.propagateChange(event.item);
+				this.closeMenu();
+				this.dropdownButton.nativeElement.focus();
+				if (event.item && event.item.selected) {
+					if (this.value) {
+						this.propagateChange(event.item[this.value]);
+					} else {
+						this.propagateChange(event.item);
+					}
 				} else {
 					this.propagateChange(null);
 				}
@@ -266,12 +272,16 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 * @memberof Dropdown
 	 */
 	writeValue(value: any) {
-		if (value) {
-			if (this.type === "single") {
-				this.view.propagateSelected([value]);
+		if (this.type === "single") {
+			if (this.value) {
+				const newValue = Object.assign({}, this.view.items.find(item => item[this.value] === value));
+				newValue.selected = true;
+				this.view.propagateSelected([newValue]);
 			} else {
-				this.view.propagateSelected(value);
+				this.view.propagateSelected([value]);
 			}
+		} else {
+			this.view.propagateSelected(value);
 		}
 	}
 

src/dropdown/dropdown.stories.ts

@@ -1,12 +1,13 @@
 import { storiesOf, moduleMetadata } from "@storybook/angular";
 import { withNotes } from "@storybook/addon-notes";
 import { action } from "@storybook/addon-actions";
-import { withKnobs, boolean, object } from "@storybook/addon-knobs/angular";
+import { withKnobs, boolean, object, text } from "@storybook/addon-knobs/angular";
 
 import { DropdownModule } from "../";
 
 // needed to init ngx translate and load the translations
 import { BootstrapModule } from "../../.storybook/bootstrap.module";
+import { stringify } from "querystring";
 
 storiesOf("Dropdown", module)
 	.addDecorator(
@@ -62,4 +63,26 @@ storiesOf("Dropdown", module)
 			selected: action("Selected fired for multi-select dropdown"),
 			onClose: action("Multi-select dropdown closed")
 		}
-	})));
+	})))
+	.add("With ngModel", () => ({
+		template: `
+		<ibm-dropdown
+			placeholder="Select"
+			[disabled]="disabled"
+			[(ngModel)]="model"
+			value="content">
+			<ibm-dropdown-list [items]="items"></ibm-dropdown-list>
+		</ibm-dropdown>
+		<span>{{model | json}}</span>
+		`,
+		props: {
+			disabled: boolean("disabled", false),
+			items: [
+				{ content: "one" },
+				{ content: "two" },
+				{ content: "three" },
+				{ content: "four" }
+			],
+			model: null
+		}
+	}));

src/dropdown/list-item.interface.ts

@@ -44,4 +44,9 @@ export interface ListItem {
 	 * @memberof ListItem
 	 */
 	items?: ListItem[];
+
+	/**
+	 * Allows for any other custom properties to be included in the ListItem
+	 */
+	[x: string]: any;
 }

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

@@ -218,6 +218,13 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnChan
 		}, 0);
 		this.index = this.items.findIndex(item => item.selected);
 		this.setupFocusObservable();
+		setTimeout(() => {
+			if (this.type === "single") {
+				this.select.emit({ item: this.items.find(item => item.selected) });
+			} else {
+				this.select.emit(this.getSelected() || []);
+			}
+		});
 	}
 
 	/**

src/i18n/en.json

@@ -71,6 +71,9 @@
 			"RESET_SEARCH": "Reset search"
 		}
 	},
+	"LOADING": {
+		"TITLE": "Loading"
+	},
 	"MODAL": {
 		"CLOSE": "Close modal"
 	},

src/index.ts

@@ -14,6 +14,7 @@ export * from "./i18n/i18n.module";
 export * from "./icon/icon.module";
 export * from "./input/input.module";
 export * from "./list-group/list-group.module";
+export * from "./loading/loading.module";
 export * from "./modal/modal.module";
 export * from "./pagination/pagination.module";
 export * from "./pill-input/pill-input.module";

src/loading/loading.component.spec.ts

@@ -0,0 +1,23 @@
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { Loading } from "./loading.component";
+import { I18nModule } from "../i18n/i18n.module";
+
+describe("Loading", () => {
+	let component: Loading;
+	let fixture: ComponentFixture<Loading>;
+
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			declarations: [Loading],
+			imports: [I18nModule]
+		});
+
+		fixture = TestBed.createComponent(Loading);
+		component = fixture.componentInstance;
+	});
+
+	it("should work", () => {
+		expect(component instanceof Loading).toBe(true);
+	});
+});