added radio button model view component (#1439)

* added radio button model view component

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

@@ -78,6 +78,11 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
 		super.setProperties(properties);
 		this._input.checked = this.checked;
 		this._input.label = this.label;
+		if (this.enabled) {
+			this._input.enable();
+		} else {
+			this._input.disable();
+		}
 	}
 
 	// CSS-bound properties
@@ -87,11 +92,7 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
 	}
 
 	public set value(newValue: boolean) {
-		this.setPropertyFromUI<sqlops.CheckBoxProperties, boolean>(this.setInputBoxProperties, newValue);
-	}
-
-	private setInputBoxProperties(properties: sqlops.CheckBoxProperties, value: boolean): void {
-		properties.checked = value;
+		this.setPropertyFromUI<sqlops.CheckBoxProperties, boolean>((properties, value) => { properties.checked = value; }, newValue);
 	}
 
 	private get label(): string {
@@ -99,10 +100,6 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
 	}
 
 	private set label(newValue: string) {
-		this.setPropertyFromUI<sqlops.CheckBoxProperties, string>(this.setValueProperties, newValue);
-	}
-
-	private setValueProperties(properties: sqlops.CheckBoxProperties, label: string): void {
-		properties.label = label;
+		this.setPropertyFromUI<sqlops.CheckBoxProperties, string>((properties, label) => { properties.label = label; }, newValue);
 	}
 }

src/sql/parts/modelComponents/componentBase.ts

@@ -94,7 +94,15 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 	public get enabled(): boolean {
 		let properties = this.getProperties();
 		let enabled = properties['enabled'];
-		return enabled !== undefined ? <boolean>enabled : true;
+		if (enabled === undefined) {
+			enabled = true;
+			properties['enabled'] = enabled;
+			this.fireEvent({
+				eventType: ComponentEventType.PropertiesChanged,
+				args: this.getProperties()
+			});
+		}
+		return <boolean>enabled;
 	}
 
 	public get valid(): boolean {

src/sql/parts/modelComponents/components.contribution.ts

@@ -10,6 +10,7 @@ import InputBoxComponent from './inputbox.component';
 import DropDownComponent from './dropdown.component';
 import ButtonComponent from './button.component';
 import CheckBoxComponent from './checkbox.component';
+import RadioButtonComponent from './radioButton.component';
 import { registerComponentType } from 'sql/platform/dashboard/common/modelComponentRegistry';
 import { ModelComponentTypes } from 'sql/workbench/api/common/sqlExtHostTypes';
 
@@ -34,3 +35,6 @@ registerComponentType(BUTTON_COMPONENT, ModelComponentTypes.Button, ButtonCompon
 
 export const CHECKBOX_COMPONENT = 'checkbox-component';
 registerComponentType(CHECKBOX_COMPONENT, ModelComponentTypes.CheckBox, CheckBoxComponent);
+
+export const RADIOBUTTON_COMPONENT = 'radiobutton-component';
+registerComponentType(RADIOBUTTON_COMPONENT, ModelComponentTypes.RadioButton, RadioButtonComponent);

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

@@ -87,6 +87,7 @@ export default class DropDownComponent extends ComponentBase implements ICompone
 		if (this.value) {
 			this._dropdown.value = this.value;
 		}
+		this._dropdown.enabled = this.enabled;
 	}
 
 	// CSS-bound properties

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

@@ -22,7 +22,7 @@ class FlexItem {
 @Component({
 	template: `
 		<div *ngIf="items" class="flexContainer" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent"
-				[style.alignItems]="alignItems" [style.alignContent]="alignContent">
+				[style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height">
 			<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>
@@ -37,6 +37,7 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 	private _justifyContent: string;
 	private _alignItems: string;
 	private _alignContent: string;
+	private _height: string;
 
 	@ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList<ModelComponentWrapper>;
 
@@ -70,6 +71,7 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 		this._justifyContent= layout.justifyContent ? layout.justifyContent : '';
 		this._alignItems= layout.alignItems ? layout.alignItems : '';
 		this._alignContent= layout.alignContent ? layout.alignContent : '';
+		this._height= layout.height ? layout.height + 'px' : '';
 		this.layout();
 	}
 
@@ -86,6 +88,10 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 		return this._alignItems;
 	}
 
+	public get height(): string {
+		return this._height;
+	}
+
 	public get alignContent(): string {
 		return this._alignContent;
 	}

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

@@ -0,0 +1,119 @@
+/*---------------------------------------------------------------------------------------------
+ *  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!./radioButton';
+import {
+	Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
+	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList, AfterViewInit
+} from '@angular/core';
+
+import * as sqlops from 'sqlops';
+import Event, { Emitter } from 'vs/base/common/event';
+
+import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
+import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
+import { RadioButton } from 'sql/base/browser/ui/radioButton/radioButton';
+import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
+
+@Component({
+	selector: 'radioButton',
+	template: `
+		<div #input class="modelview-radiobutton-container">
+
+		</div>
+	`
+})
+export default class RadioButtonComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
+	@Input() descriptor: IComponentDescriptor;
+	@Input() modelStore: IModelStore;
+	private _input: RadioButton;
+
+	@ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef;
+	constructor(
+		@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
+		super(changeRef);
+	}
+
+	ngOnInit(): void {
+		this.baseInit();
+
+	}
+
+	ngAfterViewInit(): void {
+		if (this._inputContainer) {
+			this._input = new RadioButton(this._inputContainer.nativeElement, {
+				label: this.label
+			});
+
+			this._register(this._input);
+			this._register(this._input.onClicked(e => {
+				this._onEventEmitter.fire({
+					eventType: ComponentEventType.onDidClick,
+					args: e
+				});
+			}));
+		}
+	}
+
+	ngOnDestroy(): void {
+		this.baseDestroy();
+	}
+
+	/// IComponent implementation
+
+	public layout(): void {
+		this._changeRef.detectChanges();
+	}
+
+	public setLayout(layout: any): void {
+		// TODO allow configuring the look and feel
+		this.layout();
+	}
+
+	public setProperties(properties: { [key: string]: any; }): void {
+		super.setProperties(properties);
+		this._input.name = this.name;
+		this._input.value = this.value;
+		this._input.label = this.label;
+		this._input.enabled = this.enabled;
+
+		this._input.checked = this.checked;
+	}
+
+	// CSS-bound properties
+
+	public get checked(): boolean {
+		return this.getPropertyOrDefault<sqlops.RadioButtonProperties, boolean>((props) => props.checked, false);
+	}
+
+	public set value(newValue: string) {
+		this.setPropertyFromUI<sqlops.RadioButtonProperties, string>((properties, value) => { properties.checked = value; }, newValue);
+	}
+
+	public get value(): string {
+		return this.getPropertyOrDefault<sqlops.RadioButtonProperties, string>((props) => props.value, '');
+	}
+
+	public getLabel(): string {
+		return this.label;
+	}
+
+	public get label(): string {
+		return this.getPropertyOrDefault<sqlops.RadioButtonProperties, string>((props) => props.label, '');
+	}
+
+	public set label(newValue: string) {
+		this.setPropertyFromUI<sqlops.RadioButtonProperties, string>((properties, label) => { properties.label = label; }, newValue);
+	}
+
+	public get name(): string {
+		return this.getPropertyOrDefault<sqlops.RadioButtonProperties, string>((props) => props.name, '');
+	}
+
+	public set name(newValue: string) {
+		this.setPropertyFromUI<sqlops.RadioButtonProperties, string>((properties, label) => { properties.name = label; }, newValue);
+	}
+}

src/sql/parts/modelComponents/radioButton.css

@@ -0,0 +1,11 @@
+.modelview-radiobutton-container {
+	align-items: flex-start;
+}
+
+.modelview-radiobutton-item {
+	align-self: flex-start ;
+}
+
+.modelview-radiobutton-title {
+
+}