Feat/model backed ui (#1145)

This is an initial PR for a new model-driven UI where extensions can provide definitions of the components & how they're laid out using Containers.
#1140, #1141, #1142, #1143 and #1144 are all tracking additional work needed to improve the initial implementation and fix some issues with the implementation.

Features:
- Supports defining a FlexContainer that maps to a flexbox-based layout.
- Supports creating a card component, which is a key-value pair based control that will lay out simple information to a user. Eventually this will have an optional set of actions associated with it.
- Has a sample project which shows how to use the API and was used for verification

src/sql/parts/modelComponents/flexContainer.component.ts

@@ -0,0 +1,86 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import 'vs/css!./flexContainer';
+
+import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
+	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList,
+} from '@angular/core';
+
+import { IComponent, IComponentDescriptor, IModelStore } from 'sql/parts/modelComponents/interfaces';
+import { FlexLayout, FlexItemLayout } from 'sqlops';
+
+import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
+import { ContainerBase } from 'sql/parts/modelComponents/componentBase';
+import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentWrapper.component';
+
+class FlexItem {
+	constructor(public descriptor: IComponentDescriptor, public config: FlexItemLayout) {}
+}
+
+@Component({
+	template: `
+		<div *ngIf="items" class="flexContainer" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent">
+			<div *ngFor="let item of items" [style.flex]="getItemFlex(item)" [style.order]="getItemOrder(item)" >
+				<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
+				</model-component-wrapper>
+			</div>
+		</div>
+	`
+})
+export default class FlexContainer extends ContainerBase<FlexItemLayout> implements IComponent, OnDestroy {
+	@Input() descriptor: IComponentDescriptor;
+	@Input() modelStore: IModelStore;
+	private _flexFlow: string;
+	private _justifyContent: string;
+
+	@ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList<ModelComponentWrapper>;
+
+	constructor(@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
+		super(changeRef);
+		this._flexFlow = '';	// default
+		this._justifyContent = '';	// default
+	}
+
+	ngOnInit(): void {
+		this.baseInit();
+	}
+
+	ngOnDestroy(): void {
+		this.baseDestroy();
+	}
+
+
+	/// IComponent implementation
+
+	public layout(): void {
+		if (this._componentWrappers) {
+			this._componentWrappers.forEach(wrapper => {
+				wrapper.layout();
+			});
+		}
+	}
+
+	public setLayout (layout: FlexLayout): void {
+		this._flexFlow = layout.flexFlow ? layout.flexFlow : '';
+		this._justifyContent= layout.justifyContent ? layout.justifyContent : '';
+		this.layout();
+	}
+
+	// CSS-bound properties
+	public get flexFlow(): string {
+		return this._flexFlow;
+	}
+
+	public get justifyContent(): string {
+		return this._justifyContent;
+	}
+
+	private getItemFlex(item: FlexItem): string {
+		return item.config ? item.config.flex : '';
+	}
+	private getItemOrder(item: FlexItem): number {
+		return item.config ? item.config.order : 0;
+	}
+}