Merged PR 710005: Make AdaptiveCard support PeoplePicker

Make AdaptiveCard support PeoplePicker

dist/Components/Basic/FlexBox.js

@@ -5,23 +5,16 @@ export class FlexBox extends React.Component {
         super(props);
         this.renderChildren = () => {
             if (this.props.children) {
-                return React.Children.map(this.props.children, (child, index) => {
+                return React.Children.map(this.props.children, (child) => {
                     if (child) {
                         if (typeof child !== 'string' && typeof child !== 'number') {
-                            if (this.props.width === 'auto') {
-                                return React.cloneElement(child, {
-                                    containerWidth: this.props.containerWidth,
-                                    containerHeight: this.props.containerHeight
-                                });
-                            }
-                            else {
-                                return React.cloneElement(child, {
-                                    containerWidth: this.state.width,
-                                    containerHeight: this.state.height
-                                });
-                            }
+                            return React.cloneElement(child, {
+                                containerWidth: this.containerWidth,
+                                containerHeight: this.containerHeight
+                            });
                         }
                     }
+                    return undefined;
                 });
             }
             return undefined;
@@ -69,6 +62,22 @@ export class FlexBox extends React.Component {
                 this.props.style,
             ], onLayout: this.onLayoutChange, onPress: this.props.onPress }, this.renderChildren()));
     }
+    get containerWidth() {
+        if (this.props.width === 'auto') {
+            return this.props.containerWidth;
+        }
+        else {
+            return this.state.width;
+        }
+    }
+    get containerHeight() {
+        if (this.props.width === 'auto') {
+            return this.props.containerHeight;
+        }
+        else {
+            return this.state.height;
+        }
+    }
     get flex() {
         if (this.props.flex) {
             return {
@@ -81,6 +90,7 @@ export class FlexBox extends React.Component {
         return {
             flexDirection: this.props.flexDirection,
             alignItems: this.props.wrap === 'wrap' ? 'flex-start' : this.props.alignItems,
+            alignContent: this.props.alignContent,
             justifyContent: this.props.justifyContent,
             height: this.props.height,
             flexWrap: this.props.wrap,

dist/Components/Basic/ImageBlock.js

@@ -24,7 +24,7 @@ export class ImageBlock extends React.Component {
         this.fetchImageSize = () => {
             ImageUtils.fetchSize(this.props.url, this.onImageSize, this.onImageSizeError);
         };
-        this.onLayoutChange = (width, height) => {
+        this.onLayoutChange = () => {
             this.fetchImageSize();
         };
         this.onImageSizeUpdate = (event) => {

dist/Components/Basic/TextBlock.js

@@ -6,7 +6,7 @@ export class TextBlock extends React.PureComponent {
         super(props);
     }
     render() {
-        return (React.createElement(FlexBox, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, flexDirection: 'row', relativeWidth: false, width: this.props.width, vSpacing: this.props.spacing, alignSelf: 'stretch', alignItems: 'stretch', alignContent: 'stretch', justifyContent: this.props.horizontalAlign, style: [
+        return (React.createElement(FlexBox, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, flexDirection: 'row', relativeWidth: false, width: this.props.width, vSpacing: this.props.vSpacing, hSpacing: this.props.hSpacing, alignSelf: 'stretch', alignItems: 'stretch', alignContent: 'stretch', justifyContent: 'center', onPress: this.props.onPress, style: [
                 {
                     backgroundColor: this.props.backgroundColor
                 },
@@ -19,10 +19,11 @@ export class TextBlock extends React.PureComponent {
                         fontSize: this.props.fontSize,
                         fontWeight: this.props.fontWeight,
                         textAlign: this.props.textAlign,
+                        flex: 1,
                         flexWrap: this.props.wrap,
                         backgroundColor: this.props.backgroundColor,
                     },
                     this.props.textStyle,
-                ], numberOfLines: this.props.numberOfLines }, this.props.children)));
+                ], numberOfLines: this.props.numberOfLines, onPress: this.props.onPress }, this.props.children)));
     }
 }

dist/Components/Containers/Column.js

@@ -5,6 +5,21 @@ export class Column extends React.Component {
         super(props);
     }
     render() {
-        return (React.createElement(FlexBox, { flexDirection: 'column', relativeWidth: true, alignSelf: 'stretch', alignContent: 'flex-start', alignItems: 'stretch', justifyContent: 'flex-start', width: this.props.width, vIndex: this.props.vIndex, hIndex: this.props.hIndex, style: this.props.style, vSpacing: this.props.spacing, onPress: this.props.onPress }, this.props.children));
+        return (React.createElement(FlexBox, { flexDirection: 'column', relativeWidth: true, alignSelf: 'stretch', alignContent: 'flex-start', alignItems: 'flex-start', justifyContent: 'flex-start', width: this.props.width, vIndex: this.props.vIndex, hIndex: this.props.hIndex, style: this.props.style, vSpacing: this.props.spacing, onPress: this.props.onPress }, this.renderChildren()));
+    }
+    renderChildren() {
+        if (this.props.children) {
+            return React.Children.map(this.props.children, (child) => {
+                if (child) {
+                    if (typeof child !== 'string' && typeof child !== 'number') {
+                        return React.cloneElement(child, {
+                            flex: 0
+                        });
+                    }
+                }
+                return child;
+            });
+        }
+        return undefined;
     }
 }

dist/Components/Containers/ModalBox.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Modal, View } from 'react-native';
+export class ModalBox extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (React.createElement(Modal, { visible: this.props.show, animationType: 'fade', transparent: true },
+            React.createElement(View, { style: [
+                    {
+                        flex: 1,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)'
+                    }
+                ] },
+                React.createElement(View, { style: [
+                        {
+                            backgroundColor: 'white',
+                            height: '45%',
+                            width: '85%',
+                            borderRadius: 10,
+                            borderWidth: 1,
+                            padding: 10,
+                        }
+                    ] }, this.props.children))));
+    }
+}

dist/Components/Inputs/Button.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { View } from 'react-native';
 import { FlexBox } from '../Basic/FlexBox';
 import { TextBlock } from '../Basic/TextBlock';
 export class Button extends React.Component {
@@ -6,34 +7,37 @@ export class Button extends React.Component {
         super(props);
     }
     render() {
-        return (React.createElement(FlexBox, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, flexDirection: 'row', relativeWidth: false, flex: 1, alignSelf: 'stretch', alignItems: 'center', alignContent: 'center', justifyContent: 'center', width: 'stretch', hSpacing: 10, style: [
+        return (React.createElement(FlexBox, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, flexDirection: 'row', relativeWidth: false, flex: 1, alignSelf: 'stretch', alignItems: 'stretch', alignContent: 'stretch', justifyContent: 'center', width: 'stretch', hSpacing: 10, style: [
                 {
                     paddingVertical: 10,
                     paddingHorizontal: 10,
-                    borderRadius: 4,
-                    backgroundColor: '#277BDF',
+                    borderRadius: this.props.borderRadius,
+                    backgroundColor: this.props.backgroundColor,
+                    borderColor: this.props.borderColor,
+                    borderWidth: this.props.borderWidth,
                 },
                 this.spacing,
                 this.props.boxStyle
             ], onPress: this.props.onPress },
-            React.createElement(TextBlock, { vIndex: 0, hIndex: 0, width: 'stretch', horizontalAlign: 'center', textStyle: [
-                    {
-                        textAlign: 'center',
-                        color: 'white',
-                    },
-                    this.props.textStyle,
-                ], numberOfLines: 1 }, this.props.title)));
+            React.createElement(View, { pointerEvents: 'none', flex: 1 },
+                React.createElement(TextBlock, { vIndex: 0, hIndex: 0, width: 'stretch', horizontalAlign: 'center', textStyle: [
+                        {
+                            textAlign: this.props.textAlign,
+                            color: this.props.color,
+                        },
+                        this.props.textStyle,
+                    ], numberOfLines: 1 }, this.props.title))));
     }
     get spacing() {
         let result = {
             marginTop: 0,
             marginLeft: 0,
         };
-        if (this.props.vIndex > 0 && this.props.vSpace) {
-            result.marginTop = this.props.vSpace;
+        if (this.props.vIndex > 0 && this.props.vSpacing) {
+            result.marginTop = this.props.vSpacing;
         }
-        if (this.props.hIndex > 0 && this.props.hSpace) {
-            result.marginLeft = this.props.hSpace;
+        if (this.props.hIndex > 0 && this.props.hSpacing) {
+            result.marginLeft = this.props.hSpacing;
         }
         return result;
     }

dist/Components/Inputs/DateInput.js

@@ -7,39 +7,32 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import * as React from 'react';
-import { DatePickerAndroid, DatePickerIOS, Platform, Text, TouchableOpacity, View } from 'react-native';
+import { DatePickerAndroid, DatePickerIOS, Platform, } from 'react-native';
 import { TimeUtils } from '../../Utils/TimeUtils';
-import { FlexBox } from '../Basic/FlexBox';
+import { Column } from '../Containers/Column';
+import { Row } from '../Containers/Row';
+import { Button } from './Button';
 export class DateInput extends React.Component {
     constructor(props) {
         super(props);
         this.renderBtn = () => {
-            if (!this.state.showDatePicker) {
-                return (React.createElement(TouchableOpacity, { style: { flex: 1 }, onPress: this.showDatePicker },
-                    React.createElement(View, { style: {
-                            flex: 1,
-                            borderColor: 'gray',
-                            borderWidth: 1,
-                            borderRadius: 4,
-                            paddingHorizontal: 10,
-                            paddingVertical: 6,
-                            marginVertical: 6,
-                            height: 38,
-                        } },
-                        React.createElement(Text, null, this.props.value))));
-            }
-            return undefined;
+            return (React.createElement(Row, { vIndex: 0, hIndex: 0 },
+                React.createElement(Button, { vIndex: 0, hIndex: 0, title: this.props.value, onPress: this.showDatePicker, borderColor: '#777777', borderWidth: 1, borderRadius: 4 })));
         };
         this.renderInlineDatePicker = () => {
             if (Platform.OS === 'ios') {
                 if (this.state.showDatePicker) {
                     let date = TimeUtils.extractDate(this.props.value);
-                    return (React.createElement(DatePickerIOS, { date: date, mode: 'date', onDateChange: this.onDateChange, style: { flex: 1 } }));
+                    return (React.createElement(Row, { vIndex: 0, hIndex: 0 },
+                        React.createElement(DatePickerIOS, { date: date, mode: 'date', onDateChange: this.onDateChange, style: { flex: 1 } })));
                 }
             }
             return undefined;
         };
         this.onPickerClose = () => {
+            if (this.props.onBlur) {
+                this.props.onBlur();
+            }
             if (this.props.validateInput) {
                 if (this.props.validateInput(this.props.value)) {
                     console.log('DateInput: valid');
@@ -50,14 +43,10 @@ export class DateInput extends React.Component {
             }
         };
         this.onDateChange = (date) => {
-            this.setState({
-                showDatePicker: false,
-            }, () => {
-                if (this.props.onValueChange) {
-                    let timeString = TimeUtils.getDateString(date);
-                    this.props.onValueChange(timeString);
-                }
-            });
+            if (this.props.onValueChange) {
+                let timeString = TimeUtils.getDateString(date);
+                this.props.onValueChange(timeString);
+            }
         };
         this.showDatePickerAndroid = this.showDatePickerAndroid.bind(this);
         this.showDatePicker = this.showDatePicker.bind(this);
@@ -66,7 +55,7 @@ export class DateInput extends React.Component {
         };
     }
     render() {
-        return (React.createElement(FlexBox, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, relativeWidth: false, flexDirection: 'row', alignSelf: 'stretch', alignContent: 'flex-start', alignItems: 'stretch', justifyContent: 'space-between', width: 'stretch' },
+        return (React.createElement(Column, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, width: 'stretch' },
             this.renderBtn(),
             this.renderInlineDatePicker()));
     }
@@ -85,7 +74,7 @@ export class DateInput extends React.Component {
                     if (action === DatePickerAndroid.dismissedAction) {
                         this.setState({
                             showDatePicker: false
-                        });
+                        }, this.onPickerClose);
                     }
                 }
                 catch ({ code, message }) {
@@ -96,6 +85,9 @@ export class DateInput extends React.Component {
     }
     showDatePicker() {
         return __awaiter(this, void 0, void 0, function* () {
+            if (this.props.onFocus) {
+                this.props.onFocus();
+            }
             if (this.state.showDatePicker) {
                 this.setState({
                     showDatePicker: false

dist/Components/Inputs/InputBox.js

@@ -19,6 +19,6 @@ export class InputBox extends React.Component {
                         height: 38,
                     },
                     this.props.style
-                ], multiline: this.props.multiline, keyboardType: this.props.keyboardType, blurOnSubmit: true, placeholder: this.props.placeholder, value: this.props.value, returnKeyType: this.props.returnKeyType, underlineColorAndroid: 'transparent', importantForAccessibility: 'no-hide-descendants', onChangeText: this.props.onValueChange, onBlur: this.props.onBlur })));
+                ], multiline: this.props.multiline, keyboardType: this.props.keyboardType, blurOnSubmit: true, placeholder: this.props.placeholder, value: this.props.value, returnKeyType: this.props.returnKeyType, underlineColorAndroid: 'transparent', importantForAccessibility: 'no-hide-descendants', onChangeText: this.props.onValueChange, onFocus: this.props.onFocus, onBlur: this.props.onBlur })));
     }
 }

dist/Components/Inputs/LinkButton.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { TextBlock } from '../Basic/TextBlock';
+export class LinkButton extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (React.createElement(TextBlock, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, width: 'stretch', fontSize: 16, fontWeight: 'normal', color: '#277BDF', backgroundColor: 'transparent', textAlign: this.props.textAlign, wrap: this.props.wrap, vSpacing: this.props.vSpacing, numberOfLines: this.props.numberOfLines, onPress: this.props.onPress }, this.props.title));
+    }
+}

dist/Components/Inputs/NumberInput.js

@@ -25,8 +25,13 @@ export class NumberInput extends React.Component {
                 this.props.onBlur();
             }
         };
+        this.onFocus = () => {
+            if (this.props.onFocus) {
+                this.props.onFocus();
+            }
+        };
     }
     render() {
-        return (React.createElement(InputBox, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, multiline: false, keyboardType: Platform.OS === 'ios' ? 'numbers-and-punctuation' : 'numeric', placeholder: this.props.placeholder, value: this.props.value, returnKeyType: 'done', onValueChange: this.onChangeText, onBlur: this.onBlur }));
+        return (React.createElement(InputBox, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, multiline: false, keyboardType: Platform.OS === 'ios' ? 'numbers-and-punctuation' : 'numeric', placeholder: this.props.placeholder, value: this.props.value, returnKeyType: 'done', onValueChange: this.onChangeText, onBlur: this.onBlur, onFocus: this.onFocus }));
     }
 }

dist/Components/Inputs/TimeInput.js

@@ -7,41 +7,32 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import * as React from 'react';
-import { DatePickerIOS, Platform, Text, TimePickerAndroid, TouchableOpacity, View } from 'react-native';
+import { DatePickerIOS, Platform, TimePickerAndroid, } from 'react-native';
 import { TimeUtils } from '../../Utils/TimeUtils';
-import { FlexBox } from '../Basic/FlexBox';
+import { Column } from '../Containers/Column';
+import { Row } from '../Containers/Row';
+import { Button } from './Button';
 export class TimeInput extends React.Component {
     constructor(props) {
         super(props);
         this.renderBtn = () => {
-            if (!this.state.showTimePicker) {
-                return (React.createElement(TouchableOpacity, { style: { flex: 1 }, onPress: this.showDatePicker },
-                    React.createElement(View, { style: [
-                            {
-                                flex: 1,
-                                borderColor: 'gray',
-                                borderWidth: 1,
-                                borderRadius: 4,
-                                paddingHorizontal: 10,
-                                paddingVertical: 6,
-                                marginVertical: 6,
-                                height: 38,
-                            }
-                        ] },
-                        React.createElement(Text, null, this.props.value))));
-            }
-            return undefined;
+            return (React.createElement(Row, { vIndex: 0, hIndex: 0 },
+                React.createElement(Button, { vIndex: 0, hIndex: 0, title: this.props.value, onPress: this.showTimePicker, borderColor: '#777777', borderWidth: 1, borderRadius: 4 })));
         };
-        this.showTimePickerIOS = () => {
+        this.renderInlineTimePickerIOS = () => {
             if (Platform.OS === 'ios') {
                 if (this.state.showTimePicker) {
                     let time = TimeUtils.extractTime(this.props.value);
-                    return (React.createElement(DatePickerIOS, { date: time, mode: 'time', onDateChange: this.onTimeChangeIOS, style: { flex: 1 } }));
+                    return (React.createElement(Row, { vIndex: 0, hIndex: 0 },
+                        React.createElement(DatePickerIOS, { date: time, mode: 'time', onDateChange: this.onTimeChangeIOS, style: { flex: 1 } })));
                 }
             }
             return undefined;
         };
         this.onPickerClose = () => {
+            if (this.props.onBlur) {
+                this.props.onBlur();
+            }
             if (this.props.validateInput) {
                 if (this.props.validateInput(this.props.value)) {
                     console.log('TimeInput: valid');
@@ -55,25 +46,21 @@ export class TimeInput extends React.Component {
             this.onTimeChange(date.getHours(), date.getMinutes());
         };
         this.onTimeChange = (hour, minute) => {
-            this.setState({
-                showTimePicker: false,
-            }, () => {
-                if (this.props.onValueChange) {
-                    let timeString = TimeUtils.composeTimeString(hour, minute);
-                    this.props.onValueChange(timeString);
-                }
-            });
+            if (this.props.onValueChange) {
+                let timeString = TimeUtils.composeTimeString(hour, minute);
+                this.props.onValueChange(timeString);
+            }
         };
         this.showTimePickerAndroid = this.showTimePickerAndroid.bind(this);
-        this.showDatePicker = this.showDatePicker.bind(this);
+        this.showTimePicker = this.showTimePicker.bind(this);
         this.state = {
             showTimePicker: false,
         };
     }
     render() {
-        return (React.createElement(FlexBox, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, relativeWidth: false, flexDirection: 'row', alignSelf: 'stretch', alignContent: 'flex-start', alignItems: 'stretch', justifyContent: 'space-between', width: 'stretch' },
+        return (React.createElement(Column, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, width: 'stretch' },
             this.renderBtn(),
-            this.showTimePickerIOS()));
+            this.renderInlineTimePickerIOS()));
     }
     showTimePickerAndroid() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -91,7 +78,7 @@ export class TimeInput extends React.Component {
                     if (action === TimePickerAndroid.dismissedAction) {
                         this.setState({
                             showTimePicker: false
-                        });
+                        }, this.onPickerClose);
                     }
                 }
                 catch ({ code, message }) {
@@ -100,8 +87,11 @@ export class TimeInput extends React.Component {
             }
         });
     }
-    showDatePicker() {
+    showTimePicker() {
         return __awaiter(this, void 0, void 0, function* () {
+            if (this.props.onFocus) {
+                this.props.onFocus();
+            }
             if (this.state.showTimePicker) {
                 this.setState({
                     showTimePicker: false

dist/Contexts/ActionContext.js

@@ -1,4 +1,4 @@
-import { ActionType } from '../Schema/Base/ActionElement';
+import { HostContext } from './HostContext';
 export class ActionContext {
     constructor() {
         this.hooks = {};
@@ -15,15 +15,6 @@ export class ActionContext {
     static clearGlobalInstance() {
         ActionContext.sharedInstance = undefined;
     }
-    registerOpenUrlHandler(handler) {
-        this.onOpenUrl = handler;
-    }
-    registerShowCardHandler(handler) {
-        this.onShowCard = handler;
-    }
-    registerSubmitHandler(handler) {
-        this.onSubmit = handler;
-    }
     registerHook(hook) {
         if (hook) {
             if (this.hooks[hook.actionType] === undefined) {
@@ -40,14 +31,16 @@ export class ActionContext {
         }
         return [];
     }
-    getActionEventHandler(target) {
+    getActionEventHandler(target, onFinish, onError) {
         return ((...externalHooks) => {
             let action = target.action;
             if (action) {
-                let callback = this.selectCallback(action);
+                let callback = HostContext.getInstance().getHandler(action.type);
                 let args = {
                     action: action,
                     formValidate: false,
+                    onFinishCallback: onFinish,
+                    onErrorCallback: onError,
                 };
                 let hookFuncs = this.getExecuteFuncs(action.type, externalHooks);
                 args = hookFuncs.reduce((prev, current) => {
@@ -59,21 +52,6 @@ export class ActionContext {
             }
         });
     }
-    selectCallback(action) {
-        let callback;
-        switch (action.type) {
-            case ActionType.OpenUrl:
-                callback = this.onOpenUrl;
-                break;
-            case ActionType.ShowCard:
-                callback = this.onShowCard;
-                break;
-            case ActionType.Submit:
-                callback = this.onSubmit;
-                break;
-        }
-        return callback;
-    }
     getExecuteFuncs(actionType, externalHooks) {
         let hookFuncs = [];
         if (this.hooks) {

dist/Contexts/FormContext.js

@@ -54,6 +54,17 @@ export class FormContext {
         }
         return {};
     }
+    getCallbackParamData(params) {
+        if (params) {
+            return Object.keys(params).reduce((prev, current) => {
+                let formIndex = params[current];
+                console.log(formIndex);
+                prev[current] = this.getFieldValue(formIndex);
+                return prev;
+            }, {});
+        }
+        return {};
+    }
     validateField(id) {
         let field = this.getField(id);
         if (field) {

dist/Contexts/HostContext.js

@@ -0,0 +1,52 @@
+import { ActionType } from '../Schema/Abstract/ActionElement';
+export class HostContext {
+    constructor() { }
+    static getInstance() {
+        if (HostContext.sharedInstance === undefined) {
+            HostContext.sharedInstance = new HostContext();
+        }
+        return HostContext.sharedInstance;
+    }
+    registerFocusHandler(handler) {
+        this.onFocus = handler;
+    }
+    registerBlurHandler(handler) {
+        this.onBlur = handler;
+    }
+    registerOpenUrlHandler(handler) {
+        this.onOpenUrl = handler;
+    }
+    registerShowCardHandler(handler) {
+        this.onShowCard = handler;
+    }
+    registerSubmitHandler(handler) {
+        this.onSubmit = handler;
+    }
+    registerCallbackHandler(handler) {
+        this.onCallback = handler;
+    }
+    getHandler(type) {
+        let callback;
+        switch (type) {
+            case ActionType.OpenUrl:
+                callback = this.onOpenUrl;
+                break;
+            case ActionType.Callback:
+                callback = this.onCallback;
+                break;
+            case ActionType.ShowCard:
+                callback = this.onShowCard;
+                break;
+            case ActionType.Submit:
+                callback = this.onSubmit;
+                break;
+            case 'focus':
+                callback = this.onFocus;
+                break;
+            case 'blur':
+                callback = this.onBlur;
+                break;
+        }
+        return callback;
+    }
+}

dist/HostConfig/Types.js

@@ -25,6 +25,7 @@ export class SpacingConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class SeparatorConfig {
@@ -46,6 +47,7 @@ export class SeparatorConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class FontSizeConfig {
@@ -73,6 +75,7 @@ export class FontSizeConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class FontWeightConfig {
@@ -96,6 +99,7 @@ export class FontWeightConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class ColorConfig {
@@ -117,6 +121,7 @@ export class ColorConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class ColorSetConfig {
@@ -148,6 +153,7 @@ export class ColorSetConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class ThemeConfig {
@@ -169,6 +175,7 @@ export class ThemeConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class ContainerConfig {
@@ -190,6 +197,7 @@ export class ContainerConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class ImageSizeConfig {
@@ -213,6 +221,7 @@ export class ImageSizeConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class ShowCardActionConfig {
@@ -236,6 +245,7 @@ export class ShowCardActionConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class ActionConfig {
@@ -271,6 +281,7 @@ export class ActionConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class CardConfig {
@@ -290,6 +301,7 @@ export class CardConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class ImageSetConfig {
@@ -311,6 +323,7 @@ export class ImageSetConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class FactValueConfig {
@@ -322,6 +335,7 @@ export class FactValueConfig {
             this.weight = json['weight'];
             this.wrap = json['wrap'];
         }
+        return this;
     }
     combine(...args) {
         if (args) {
@@ -338,6 +352,7 @@ export class FactValueConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class FactTitleConfig {
@@ -367,6 +382,7 @@ export class FactTitleConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class FactSetConfig {
@@ -390,6 +406,7 @@ export class FactSetConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class MediaConfig {
@@ -411,6 +428,7 @@ export class MediaConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class HostConfig {
@@ -456,5 +474,6 @@ export class HostConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }

dist/Schema/Abstract/AbstractElement.js

@@ -21,7 +21,7 @@ export var CardElementType;
 })(CardElementType || (CardElementType = {}));
 export class AbstractElement {
     constructor(json, parent) {
-        let validation = JsonUtils.isValidateJson(json, this.getRequiredProperties());
+        let validation = JsonUtils.isValidateJson(json, this.requiredProperties);
         if (!validation.isValid) {
             ConsoleUtils.error('AbstractElement', validation.message);
         }
@@ -48,4 +48,7 @@ export class AbstractElement {
     get descendsAndSelf() {
         return [this, ...this.descends];
     }
+    get requiredProperties() {
+        return ['type'];
+    }
 }

dist/Schema/Abstract/ActionElement.js

@@ -4,6 +4,7 @@ export var ActionType;
     ActionType["OpenUrl"] = "Action.OpenUrl";
     ActionType["Submit"] = "Action.Submit";
     ActionType["ShowCard"] = "Action.ShowCard";
+    ActionType["Callback"] = "Action.Callback";
 })(ActionType || (ActionType = {}));
 export class ActionElement extends AbstractElement {
     constructor(json, parent) {

dist/Schema/Abstract/ContentElement.js

@@ -14,12 +14,12 @@ export var ContentElementType;
     ContentElementType["TimeInput"] = "Input.Time";
     ContentElementType["ToggleInput"] = "Input.Toggle";
     ContentElementType["ChoiceSetInput"] = "Input.ChoiceSet";
+    ContentElementType["PeoplePicker"] = "Input.PeoplePicker";
     ContentElementType["AdaptiveCard"] = "AdaptiveCard";
 })(ContentElementType || (ContentElementType = {}));
 export class ContentElement extends AbstractElement {
     constructor(json, parent) {
         super(json, parent);
-        this.separator = false;
         if (this.isValid) {
             this.id = json.id;
             this.spacing = json.spacing;

dist/Schema/Abstract/InputElement.js

@@ -7,10 +7,12 @@ export var InputElementType;
     InputElementType["TimeInput"] = "Input.Time";
     InputElementType["ToggleInput"] = "Input.Toggle";
     InputElementType["ChoiceSetInput"] = "Input.ChoiceSet";
+    InputElementType["PeoplePicker"] = "Input.PeoplePicker";
 })(InputElementType || (InputElementType = {}));
 export class InputElement extends ContentElement {
     constructor(json, parent) {
         super(json, parent);
+        this.children = [];
         if (this.isValid) {
             this.id = json.id;
             this.value = json.value;

dist/Schema/Abstract/ScopeElement.js

@@ -11,7 +11,7 @@ export var FormElementType;
     FormElementType["Image"] = "Image";
     FormElementType["AdaptiveCard"] = "AdaptiveCard";
 })(FormElementType || (FormElementType = {}));
-export class FormElement extends ContentElement {
+export class ScopeElement extends ContentElement {
     constructor(json, parent) {
         super(json, parent);
         if (this.isValid) {
@@ -42,8 +42,9 @@ export class FormElement extends ContentElement {
             }
             return this.backgroundImage.url;
         }
+        return undefined;
     }
-    validateForm(value) {
+    validateScope() {
         return FormContext.getInstance().validateFields(this.inputFields);
     }
 }

dist/Schema/Abstract/ValueElement.js

@@ -12,7 +12,7 @@ export class ValueElement extends AbstractElement {
             this.value = json.value;
         }
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['title', 'value'];
     }
 }

dist/Schema/Actions/OpenUrlAction.js

@@ -1,4 +1,4 @@
-import { ActionElement } from '../Base/ActionElement';
+import { ActionElement } from '../Abstract/ActionElement';
 export class OpenUrlActionElement extends ActionElement {
     constructor(json, parent) {
         super(json, parent);
@@ -10,7 +10,7 @@ export class OpenUrlActionElement extends ActionElement {
     get scope() {
         return this.ancestorsAndSelf.find(element => element.parent === undefined);
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'title', 'url'];
     }
 }

dist/Schema/Actions/ShowCardAction.js

@@ -1,4 +1,4 @@
-import { ActionElement } from '../Base/ActionElement';
+import { ActionElement } from '../Abstract/ActionElement';
 import { CardElement } from '../Cards/Card';
 export class ShowCardActionElement extends ActionElement {
     constructor(json, parent) {
@@ -19,7 +19,7 @@ export class ShowCardActionElement extends ActionElement {
         }
         return [];
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'title', 'card'];
     }
 }

dist/Schema/Actions/SubmitAction.js

@@ -1,4 +1,4 @@
-import { ActionElement } from '../Base/ActionElement';
+import { ActionElement } from '../Abstract/ActionElement';
 export class SubmitActionElement extends ActionElement {
     constructor(json, parent) {
         super(json, parent);
@@ -10,7 +10,7 @@ export class SubmitActionElement extends ActionElement {
     get scope() {
         return this.ancestorsAndSelf.find(element => element.parent === undefined);
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'title'];
     }
 }

dist/Schema/CardElements/Image.js

@@ -1,5 +1,5 @@
-import { FormElement } from '../Base/FormElement';
-export class ImageElement extends FormElement {
+import { ScopeElement } from '../Abstract/ScopeElement';
+export class ImageElement extends ScopeElement {
     constructor(json, parent) {
         super(json, parent);
         this.children = [];
@@ -11,7 +11,7 @@ export class ImageElement extends FormElement {
             this.style = json.style;
         }
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'url'];
     }
 }

dist/Schema/CardElements/TextBlock.js

@@ -1,4 +1,4 @@
-import { ContentElement } from '../Base/ContentElement';
+import { ContentElement } from '../Abstract/ContentElement';
 export class TextBlockElement extends ContentElement {
     constructor(json, parent) {
         super(json, parent);
@@ -14,7 +14,7 @@ export class TextBlockElement extends ContentElement {
             this.wrap = json.wrap || false;
         }
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'text'];
     }
 }

dist/Schema/Cards/Card.js

@@ -1,7 +1,7 @@
-import { FormElement } from '../Base/FormElement';
+import { ScopeElement } from '../Abstract/ScopeElement';
 import { ActionFactory } from '../Factories/ActionFactory';
 import { ContentElementFactory } from '../Factories/ContentElementFactory';
-export class CardElement extends FormElement {
+export class CardElement extends ScopeElement {
     constructor(json, parent) {
         super(json, parent);
         if (this.isValid) {
@@ -27,7 +27,7 @@ export class CardElement extends FormElement {
     getBackgroundImageUrl() {
         return this.backgroundImage;
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'version'];
     }
 }

dist/Schema/Containers/Column.js

@@ -1,6 +1,6 @@
-import { FormElement } from '../Base/FormElement';
+import { ScopeElement } from '../Abstract/ScopeElement';
 import { ContentElementFactory } from '../Factories/ContentElementFactory';
-export class ColumnElement extends FormElement {
+export class ColumnElement extends ScopeElement {
     constructor(json, parent) {
         super(json, parent);
         if (this.isValid) {
@@ -25,7 +25,7 @@ export class ColumnElement extends FormElement {
         }
         return [];
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'items'];
     }
 }

dist/Schema/Containers/ColumnSet.js

@@ -1,6 +1,6 @@
-import { FormElement } from '../Base/FormElement';
+import { ScopeElement } from '../Abstract/ScopeElement';
 import { ColumnElement } from './Column';
-export class ColumnSetElement extends FormElement {
+export class ColumnSetElement extends ScopeElement {
     constructor(json, parent) {
         super(json, parent);
         if (this.isValid) {
@@ -21,7 +21,7 @@ export class ColumnSetElement extends FormElement {
         }
         return [];
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type'];
     }
 }

dist/Schema/Containers/Container.js

@@ -1,6 +1,6 @@
-import { FormElement } from '../Base/FormElement';
+import { ScopeElement } from '../Abstract/ScopeElement';
 import { ContentElementFactory } from '../Factories/ContentElementFactory';
-export class ContainerElement extends FormElement {
+export class ContainerElement extends ScopeElement {
     constructor(json, parent) {
         super(json, parent);
         this.items = [];
@@ -15,7 +15,7 @@ export class ContainerElement extends FormElement {
         }
         return [];
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'items'];
     }
 }

dist/Schema/Containers/Fact.js

@@ -1,4 +1,4 @@
-import { ValueElement } from '../Base/ValueElement';
+import { ValueElement } from '../Abstract/ValueElement';
 export class FactElement extends ValueElement {
     constructor(json, parent) {
         super(json, parent);

dist/Schema/Containers/FactSet.js

@@ -1,4 +1,4 @@
-import { ContentElement } from '../Base/ContentElement';
+import { ContentElement } from '../Abstract/ContentElement';
 import { FactElement } from './Fact';
 export class FactSetElement extends ContentElement {
     constructor(json, parent) {
@@ -22,7 +22,7 @@ export class FactSetElement extends ContentElement {
         }
         return [];
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'facts'];
     }
 }

dist/Schema/Containers/ImageSet.js

@@ -1,4 +1,4 @@
-import { ContentElement } from '../Base/ContentElement';
+import { ContentElement } from '../Abstract/ContentElement';
 import { ImageElement } from '../CardElements/Image';
 export class ImageSetElement extends ContentElement {
     constructor(json, parent) {
@@ -23,7 +23,7 @@ export class ImageSetElement extends ContentElement {
         }
         return [];
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'images'];
     }
 }

dist/Schema/Factories/ActionFactory.js

@@ -1,7 +1,7 @@
+import { ActionType } from '../Abstract/ActionElement';
 import { OpenUrlActionElement } from '../Actions/OpenUrlAction';
 import { ShowCardActionElement } from '../Actions/ShowCardAction';
 import { SubmitActionElement } from '../Actions/SubmitAction';
-import { ActionType } from '../Base/ActionElement';
 export class ActionFactory {
     static create(json, parent) {
         if (!json) {

dist/Schema/Factories/ContentElementFactory.js

@@ -1,6 +1,9 @@
-import { ContentElementType } from '../Base/ContentElement';
+import { ContentElementType } from '../Abstract/ContentElement';
+import { InputElementType } from '../Abstract/InputElement';
+import { FormElementType } from '../Abstract/ScopeElement';
 import { ImageElement } from '../CardElements/Image';
 import { TextBlockElement } from '../CardElements/TextBlock';
+import { CardElement } from '../Cards/Card';
 import { ColumnElement } from '../Containers/Column';
 import { ColumnSetElement } from '../Containers/ColumnSet';
 import { ContainerElement } from '../Containers/Container';
@@ -8,6 +11,7 @@ import { FactSetElement } from '../Containers/FactSet';
 import { ImageSetElement } from '../Containers/ImageSet';
 import { DateInputElement } from '../Inputs/DateInput';
 import { NumberInputElement } from '../Inputs/NumberInput';
+import { PeoplePickerElement } from '../Inputs/PeoplePicker';
 import { TextInputElement } from '../Inputs/TextInput';
 import { TimeInputElement } from '../Inputs/TimeInput';
 export class ContentElementFactory {
@@ -23,13 +27,13 @@ export class ContentElementFactory {
             case ContentElementType.TextBlock:
                 cardElement = new TextBlockElement(json, parent);
                 break;
-            case ContentElementType.Column:
+            case FormElementType.Column:
                 cardElement = new ColumnElement(json, parent);
                 break;
-            case ContentElementType.ColumnSet:
+            case FormElementType.ColumnSet:
                 cardElement = new ColumnSetElement(json, parent);
                 break;
-            case ContentElementType.Container:
+            case FormElementType.Container:
                 cardElement = new ContainerElement(json, parent);
                 break;
             case ContentElementType.FactSet:
@@ -38,18 +42,24 @@ export class ContentElementFactory {
             case ContentElementType.ImageSet:
                 cardElement = new ImageSetElement(json, parent);
                 break;
-            case ContentElementType.TextInput:
+            case InputElementType.TextInput:
                 cardElement = new TextInputElement(json, parent);
                 break;
-            case ContentElementType.DateInput:
+            case InputElementType.DateInput:
                 cardElement = new DateInputElement(json, parent);
                 break;
-            case ContentElementType.TimeInput:
+            case InputElementType.TimeInput:
                 cardElement = new TimeInputElement(json, parent);
                 break;
-            case ContentElementType.NumberInput:
+            case InputElementType.NumberInput:
                 cardElement = new NumberInputElement(json, parent);
                 break;
+            case InputElementType.PeoplePicker:
+                cardElement = new PeoplePickerElement(json, parent);
+                break;
+            case ContentElementType.AdaptiveCard:
+                cardElement = new CardElement(json, parent);
+                break;
             default:
                 cardElement = null;
                 break;

dist/Schema/Inputs/ChoiceInput.js

@@ -1,4 +1,4 @@
-import { ValueElement } from '../Base/ValueElement';
+import { ValueElement } from '../Abstract/ValueElement';
 export class ChoiceInputElement extends ValueElement {
     constructor(json, parent) {
         super(json, parent);

dist/Schema/Inputs/ChoiceInputSet.js

@@ -1,4 +1,4 @@
-import { InputElement } from '../Base/InputElement';
+import { InputElement } from '../Abstract/InputElement';
 import { ChoiceInputElement } from './ChoiceInput';
 export class ChoiceInputSetElement extends InputElement {
     constructor(json, parent) {
@@ -27,7 +27,7 @@ export class ChoiceInputSetElement extends InputElement {
     validate(input) {
         return true;
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'id', 'choices'];
     }
 }

dist/Schema/Inputs/DateInput.js

@@ -1,6 +1,6 @@
 import { NumberUtils } from '../../Utils/NumberUtils';
 import { TimeUtils } from '../../Utils/TimeUtils';
-import { InputElement } from '../Base/InputElement';
+import { InputElement } from '../Abstract/InputElement';
 export class DateInputElement extends InputElement {
     constructor(json, parent) {
         super(json, parent);
@@ -20,7 +20,7 @@ export class DateInputElement extends InputElement {
         }
         return true;
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'id'];
     }
 }

dist/Schema/Inputs/NumberInput.js

@@ -1,5 +1,5 @@
 import { NumberUtils } from '../../Utils/NumberUtils';
-import { InputElement } from '../Base/InputElement';
+import { InputElement } from '../Abstract/InputElement';
 export class NumberInputElement extends InputElement {
     constructor(json, parent) {
         super(json, parent);
@@ -18,7 +18,7 @@ export class NumberInputElement extends InputElement {
         }
         return true;
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'id'];
     }
 }

dist/Schema/Inputs/PeoplePicker.js

@@ -0,0 +1,29 @@
+import { InputElement } from '../Abstract/InputElement';
+import { CallbackAction } from '../Internal/CallbackAction';
+export class PeoplePickerElement extends InputElement {
+    constructor(json, parent) {
+        super(json, parent);
+        if (this.isValid) {
+            this.callback = new CallbackAction(json.callback, this);
+            this.placeholder = json.placeholder;
+        }
+    }
+    get action() {
+        return this.callback;
+    }
+    get inputFields() {
+        return ['selected_people'];
+    }
+    getBackgroundImageUrl() {
+        return undefined;
+    }
+    validate(input) {
+        return true;
+    }
+    validateScope() {
+        return true;
+    }
+    get requiredProperties() {
+        return ['type'];
+    }
+}

dist/Schema/Inputs/TextInput.js

@@ -1,4 +1,4 @@
-import { InputElement } from '../Base/InputElement';
+import { InputElement } from '../Abstract/InputElement';
 export class TextInputElement extends InputElement {
     constructor(json, parent) {
         super(json, parent);
@@ -18,7 +18,7 @@ export class TextInputElement extends InputElement {
         }
         return true;
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'id'];
     }
 }

dist/Schema/Inputs/TimeInput.js

@@ -1,6 +1,6 @@
 import { NumberUtils } from '../../Utils/NumberUtils';
 import { TimeUtils } from '../../Utils/TimeUtils';
-import { InputElement } from '../Base/InputElement';
+import { InputElement } from '../Abstract/InputElement';
 export class TimeInputElement extends InputElement {
     constructor(json, parent) {
         super(json, parent);
@@ -20,7 +20,7 @@ export class TimeInputElement extends InputElement {
         }
         return true;
     }
-    getRequiredProperties() {
-        return ['id'];
+    get requiredProperties() {
+        return ['type', 'id'];
     }
 }

dist/Schema/Inputs/ToggleInput.js

@@ -1,4 +1,4 @@
-import { InputElement } from '../Base/InputElement';
+import { InputElement } from '../Abstract/InputElement';
 export class ToggleInputElement extends InputElement {
     constructor(json, parent) {
         super(json, parent);
@@ -12,7 +12,7 @@ export class ToggleInputElement extends InputElement {
     validate(input) {
         return true;
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'id', 'title'];
     }
 }

dist/Schema/Internal/CallbackAction.js

@@ -0,0 +1,20 @@
+import { ActionElement } from '../Abstract/ActionElement';
+export class CallbackAction extends ActionElement {
+    constructor(json, parent) {
+        super(json, parent);
+        this.children = [];
+        if (this.isValid) {
+            this.url = json.url;
+            this.parameters = json.parameters;
+        }
+    }
+    get scope() {
+        if (this.parent) {
+            return this.parent;
+        }
+        return undefined;
+    }
+    get requiredProperties() {
+        return ['type', 'url'];
+    }
+}

dist/Services/NetworkService.js

@@ -0,0 +1,71 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+export class NetworkService {
+    static get(url, parameters) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let finalUrl = NetworkService.buildParameterizedUrl(url, parameters);
+            if (finalUrl && finalUrl.length > 0) {
+                return fetch(finalUrl, {
+                    method: 'GET',
+                    headers: {
+                        Accept: 'application/json',
+                        'Content-Type': 'application/json',
+                    },
+                });
+            }
+            else {
+                throw new Error('url is empty');
+            }
+        });
+    }
+    static post(url, parameters) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (url && url.length > 0) {
+                return fetch(url, {
+                    method: 'POST',
+                    headers: {
+                        Accept: 'application/json',
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(parameters),
+                });
+            }
+            else {
+                throw new Error('url is empty');
+            }
+        });
+    }
+    static buildParameterizedUrl(url, parameters) {
+        let finalUrl = url;
+        if (finalUrl && finalUrl.length > 0) {
+            if (!finalUrl.includes('?')) {
+                finalUrl += '?';
+            }
+            return Object.keys(parameters).reduce((prev, current) => {
+                let separator;
+                if (prev !== undefined && prev.length > 0 && prev[prev.length - 1] === '?') {
+                    separator = '';
+                }
+                else {
+                    separator = '&';
+                }
+                if (current !== undefined && current.length > 0) {
+                    let value = parameters[current];
+                    if (value !== undefined) {
+                        return `${prev}${separator}${current}=${value}`;
+                    }
+                }
+                return prev;
+            }, finalUrl);
+        }
+        else {
+            return undefined;
+        }
+    }
+}

dist/Styles/StyleManager.js

@@ -79,7 +79,6 @@ export class StyleManager {
             fontSize: 14,
             fontWeight: '400',
             textAlign: 'center',
-            inboxTextAlign: 'center',
             wrap: 'nowrap',
             spacing: 0,
         };
@@ -92,7 +91,6 @@ export class StyleManager {
             result.fontWeight = StyleTransformer.transformFontWeight(element.weight, this.hostConfig);
             result.spacing = StyleTransformer.transformSpacing(element.spacing, this.hostConfig);
             result.textAlign = StyleTransformer.transformTextAlign(element.horizontalAlignment);
-            result.inboxTextAlign = StyleTransformer.transformInboxTextAlign(element.horizontalAlignment);
             result.wrap = element.wrap ? 'wrap' : 'nowrap';
         }
         return result;

dist/Styles/StyleTransformer.js

@@ -160,21 +160,7 @@ export class StyleTransformer {
             case 'right':
                 return 'right';
             default:
-                return 'center';
-        }
-    }
-    static transformInboxTextAlign(align) {
-        switch (align) {
-            case 'center':
-                return 'center';
-            case 'left':
-                return 'flex-start';
-            case 'right':
-                return 'flex-end';
-            case 'stretch':
-                return 'space-between';
-            default:
-                return 'flex-start';
+                return 'left';
         }
     }
     static transformColor(color, subtle, theme, hostConfig) {

dist/Utils/ImageUtils.js

@@ -27,7 +27,6 @@ export class ImageUtils {
                 width: 0,
                 height: 0,
             });
-            console.log(`ImageUtils width: ${result.width} height: ${result.height}`);
             onSuccess(result.width, result.height);
         });
     }

dist/Utils/JsonUtils.js

@@ -20,6 +20,10 @@ export class JsonUtils {
                 isValid: isValid,
             };
         }
+        return {
+            isValid: true,
+            message: ''
+        };
     }
     static isValidValue(value) {
         return !(value === undefined ||

dist/Views/Actions/OpenUrlAction.js

@@ -23,6 +23,6 @@ export class OpenUrlActionView extends React.Component {
             return null;
         }
         const hostStyle = StyleManager.getInstance().getActionStyle();
-        return (React.createElement(Button, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, vSpace: hostStyle.marginTop, hSpace: hostStyle.marginLeft, title: this.props.element.title, onPress: this.onPress }));
+        return (React.createElement(Button, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, vSpacing: hostStyle.marginTop, hSpacing: hostStyle.marginLeft, title: this.props.element.title, onPress: this.onPress, color: 'white', backgroundColor: '#277BDF', borderColor: '#277BDF', borderRadius: 4, textAlign: 'center' }));
     }
 }

dist/Views/Actions/ShowCardAction.js

@@ -23,6 +23,6 @@ export class ShowCardActionView extends React.Component {
             return null;
         }
         const hostStyle = StyleManager.getInstance().getActionStyle();
-        return (React.createElement(Button, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, vSpace: hostStyle.marginTop, hSpace: hostStyle.marginLeft, title: this.props.element.title, onPress: this.onPress }));
+        return (React.createElement(Button, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, vSpacing: hostStyle.marginTop, hSpacing: hostStyle.marginLeft, title: this.props.element.title, onPress: this.onPress, color: 'white', backgroundColor: '#277BDF', borderColor: '#277BDF', borderRadius: 4, textAlign: 'center' }));
     }
 }

dist/Views/Actions/SubmitAction.js

@@ -23,6 +23,6 @@ export class SubmitActionView extends React.Component {
             return null;
         }
         const hostStyle = StyleManager.getInstance().getActionStyle();
-        return (React.createElement(Button, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, vSpace: hostStyle.marginTop, hSpace: hostStyle.marginLeft, title: this.props.element.title, onPress: this.onPress }));
+        return (React.createElement(Button, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, vSpacing: hostStyle.marginTop, hSpacing: hostStyle.marginLeft, title: this.props.element.title, onPress: this.onPress, color: 'white', backgroundColor: '#277BDF', borderColor: '#277BDF', borderRadius: 4, textAlign: 'center' }));
     }
 }

dist/Views/CardElements/TextBlock.js

@@ -14,6 +14,6 @@ export class TextBlockView extends React.Component {
         if (!element || !element.isValid) {
             return null;
         }
-        return (React.createElement(TextBlock, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, width: 'stretch', fontSize: this.style.fontSize, fontWeight: this.style.fontWeight, color: this.style.color, backgroundColor: 'transparent', textAlign: this.style.textAlign, wrap: this.style.wrap, horizontalAlign: this.style.inboxTextAlign, spacing: this.style.spacing, numberOfLines: element.maxLines }, element.text));
+        return (React.createElement(TextBlock, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, width: 'stretch', fontSize: this.style.fontSize, fontWeight: this.style.fontWeight, color: this.style.color, backgroundColor: 'transparent', textAlign: this.style.textAlign, wrap: this.style.wrap, vSpacing: this.style.spacing, numberOfLines: element.maxLines }, element.text));
     }
 }

dist/Views/Cards/AdaptiveCard.js

@@ -4,7 +4,7 @@ import { ImageBackground } from '../../Components/Basic/ImageBackground';
 import { Column } from '../../Components/Containers/Column';
 import { Row } from '../../Components/Containers/Row';
 import { ActionContext } from '../../Contexts/ActionContext';
-import { ActionType } from '../../Schema/Base/ActionElement';
+import { ActionType } from '../../Schema/Abstract/ActionElement';
 import { StyleManager } from '../../Styles/StyleManager';
 import { ActionFactory } from '../Factories/ActionFactory';
 import { ContentFactory } from '../Factories/ContentFactory';
@@ -29,11 +29,7 @@ export class AdaptiveCardView extends React.Component {
         };
         this.state = {};
         this.actionContext = ActionContext.createInstance();
-        this.actionContext.registerHook({
-            func: this.showSubCard,
-            name: 'showSubCard',
-            actionType: ActionType.ShowCard
-        });
+        this.actionContext.registerHook({ func: this.showSubCard, name: 'showSubCard', actionType: ActionType.ShowCard });
         this.showCardStyle = StyleManager.getInstance().getShowCardStyle();
     }
     render() {

dist/Views/Containers/ColumnSet.js

@@ -8,12 +8,10 @@ export class ColumnSetView extends React.Component {
         super(props);
         this.renderColumns = () => {
             const { element } = this.props;
-            if (!element || !element.isValid) {
+            if (!element || !element.isValid || !element.columns || element.columns.length === 0) {
                 return undefined;
             }
-            if (element.columns) {
-                return element.columns.map((column, index) => (React.createElement(ColumnView, { key: index, vIndex: 0, hIndex: index, element: column, theme: this.props.theme })));
-            }
+            return element.columns.map((column, index) => (React.createElement(ColumnView, { key: index, vIndex: 0, hIndex: index, element: column, theme: this.props.theme })));
         };
     }
     render() {

dist/Views/Containers/FactSet.js

@@ -1,19 +1,16 @@
 import * as React from 'react';
 import { Column } from '../../Components/Containers/Column';
 import { StyleManager } from '../../Styles/StyleManager';
-import { ElementUtils } from '../../Utils/ElementUtils';
 import { FactView } from './Fact';
 export class FactSetView extends React.Component {
     constructor(props) {
         super(props);
         this.renderFacts = () => {
             const { element } = this.props;
-            if (!element || !ElementUtils.isValue(element.type)) {
+            if (!element || !element.isValid || !element.facts || element.facts.length === 0) {
                 return undefined;
             }
-            if (element.facts) {
-                return element.facts.map((fact, index) => (React.createElement(FactView, { key: index, vIndex: 0, hIndex: index, element: fact, theme: this.props.theme })));
-            }
+            return element.facts.map((fact, index) => (React.createElement(FactView, { key: index, vIndex: 0, hIndex: index, element: fact, theme: this.props.theme })));
         };
     }
     render() {

dist/Views/Factories/ActionFactory.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ActionType } from '../../Schema/Base/ActionElement';
+import { ActionType } from '../../Schema/Abstract/ActionElement';
 import { OpenUrlActionView } from '../Actions/OpenUrlAction';
 import { ShowCardActionView } from '../Actions/ShowCardAction';
 import { SubmitActionView } from '../Actions/SubmitAction';

dist/Views/Factories/ContentFactory.js

@@ -1,16 +1,18 @@
 import * as React from 'react';
 import { ImageBackground } from '../../Components/Basic/ImageBackground';
 import { SeparateLine } from '../../Components/Basic/SeparateLine';
-import { ContentElementType } from '../../Schema/Base/ContentElement';
+import { ContentElementType } from '../../Schema/Abstract/ContentElement';
 import { StyleManager } from '../../Styles/StyleManager';
 import { ImageView } from '../CardElements/Image';
 import { TextBlockView } from '../CardElements/TextBlock';
+import { AdaptiveCardView } from '../Cards/AdaptiveCard';
 import { ColumnSetView } from '../Containers/ColumnSet';
 import { ContainerView } from '../Containers/Container';
 import { FactSetView } from '../Containers/FactSet';
 import { ImageSetView } from '../Containers/ImageSet';
 import { DateInputView } from '../Inputs/DateInput';
 import { NumberInputView } from '../Inputs/NumberInput';
+import { PeoplePickerView } from '../Inputs/PeoplePicker';
 import { TextInputView } from '../Inputs/TextInput';
 import { TimeInputView } from '../Inputs/TimeInput';
 export class ContentFactory {
@@ -47,6 +49,8 @@ export class ContentFactory {
                     return (React.createElement(DateInputView, { key: 'DateInputView' + index, element: element, vIndex: index, hIndex: 0, theme: theme }));
                 case ContentElementType.TimeInput:
                     return (React.createElement(TimeInputView, { key: 'TimeInputView' + index, element: element, vIndex: index, hIndex: 0, theme: theme }));
+                case ContentElementType.PeoplePicker:
+                    return (React.createElement(PeoplePickerView, { key: 'PeoplePickerView' + index, element: element, vIndex: index, hIndex: 0, theme: theme }));
                 case ContentElementType.Container:
                     return (React.createElement(ContainerView, { key: 'ContainerView' + index, element: element, vIndex: index, hIndex: 0, theme: theme }));
                 case ContentElementType.ColumnSet:
@@ -59,6 +63,8 @@ export class ContentFactory {
                     return (React.createElement(ImageSetView, { key: 'ImageSetView' + index, element: element, vIndex: index, hIndex: 0, theme: theme }));
                 case ContentElementType.FactSet:
                     return (React.createElement(FactSetView, { key: 'FactSetView' + index, element: element, vIndex: index, hIndex: 0, theme: theme }));
+                case ContentElementType.AdaptiveCard:
+                    return (React.createElement(AdaptiveCardView, { key: 'AdaptiveCardView' + index, element: element, vIndex: index, hIndex: 0, theme: theme }));
                 default:
                     return null;
             }

dist/Views/Inputs/DateInput.js

@@ -2,10 +2,25 @@ import * as React from 'react';
 import { Row } from '../../Components/Containers/Row';
 import { DateInput } from '../../Components/Inputs/DateInput';
 import { FormContext } from '../../Contexts/FormContext';
+import { HostContext } from '../../Contexts/HostContext';
 import { StyleManager } from '../../Styles/StyleManager';
 export class DateInputView extends React.Component {
     constructor(props) {
         super(props);
+        this.onBlur = () => {
+            console.log('DateInputView onBlur');
+            let callback = HostContext.getInstance().getHandler('blur');
+            if (callback) {
+                callback();
+            }
+        };
+        this.onFocus = () => {
+            console.log('DateInputView onFocus');
+            let callback = HostContext.getInstance().getHandler('focus');
+            if (callback) {
+                callback();
+            }
+        };
         this.onValueChange = (value) => {
             this.setState({
                 value: value
@@ -25,7 +40,7 @@ export class DateInputView extends React.Component {
             return null;
         }
         return (React.createElement(Row, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, spacing: StyleManager.getInstance().getSpacing(element.spacing) },
-            React.createElement(DateInput, { vIndex: 0, hIndex: 0, value: this.state.value, onValueChange: this.onValueChange, validateInput: element.validate })));
+            React.createElement(DateInput, { vIndex: 0, hIndex: 0, value: this.state.value, onValueChange: this.onValueChange, onFocus: this.onFocus, onBlur: this.onBlur, validateInput: element.validate })));
     }
     updateStore() {
         FormContext.getInstance().updateField(this.props.element.id, this.state.value, this.props.element.validate(this.state.value));

dist/Views/Inputs/NumberInput.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Row } from '../../Components/Containers/Row';
 import { NumberInput } from '../../Components/Inputs/NumberInput';
 import { FormContext } from '../../Contexts/FormContext';
+import { HostContext } from '../../Contexts/HostContext';
 import { StyleManager } from '../../Styles/StyleManager';
 import { NumberUtils } from '../../Utils/NumberUtils';
 export class NumberInputView extends React.Component {
@@ -9,6 +10,17 @@ export class NumberInputView extends React.Component {
         super(props);
         this.onBlur = () => {
             console.log('NumberInputView onBlur');
+            let callback = HostContext.getInstance().getHandler('blur');
+            if (callback) {
+                callback();
+            }
+        };
+        this.onFocus = () => {
+            console.log('NumberInputView onFocus');
+            let callback = HostContext.getInstance().getHandler('focus');
+            if (callback) {
+                callback();
+            }
         };
         this.onValueChange = (value) => {
             this.setState({
@@ -35,7 +47,7 @@ export class NumberInputView extends React.Component {
             return null;
         }
         return (React.createElement(Row, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, spacing: StyleManager.getInstance().getSpacing(element.spacing) },
-            React.createElement(NumberInput, { vIndex: 0, hIndex: 0, placeholder: element.placeholder, value: this.state.value, onValueChange: this.onValueChange, onBlur: this.onBlur, validateInput: element.validate })));
+            React.createElement(NumberInput, { vIndex: 0, hIndex: 0, placeholder: element.placeholder, value: this.state.value, onValueChange: this.onValueChange, onBlur: this.onBlur, onFocus: this.onFocus, validateInput: element.validate })));
     }
     updateStore() {
         FormContext.getInstance().updateField(this.props.element.id, this.state.value, this.props.element.validate(this.state.value));

dist/Views/Inputs/PeoplePicker.js

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { TextBlock } from '../../Components/Basic/TextBlock';
+import { Column } from '../../Components/Containers/Column';
+import { ModalBox } from '../../Components/Containers/ModalBox';
+import { Row } from '../../Components/Containers/Row';
+import { Button } from '../../Components/Inputs/Button';
+import { InputBox } from '../../Components/Inputs/InputBox';
+import { LinkButton } from '../../Components/Inputs/LinkButton';
+import { ActionContext } from '../../Contexts/ActionContext';
+import { FormContext } from '../../Contexts/FormContext';
+import { HostContext } from '../../Contexts/HostContext';
+import { ContentElementFactory } from '../../Schema/Factories/ContentElementFactory';
+import { ContentFactory } from '../Factories/ContentFactory';
+export class PeoplePickerView extends React.Component {
+    constructor(props) {
+        super(props);
+        this.closeModal = () => {
+            console.log('Show Modal');
+            this.onBlur();
+            this.setState({
+                showModal: false,
+            });
+        };
+        this.showModal = () => {
+            console.log('Show Modal');
+            this.onFocus();
+            this.setState({
+                showModal: true,
+            });
+        };
+        this.onValueChange = (value) => {
+            this.setState({
+                value: value
+            }, () => this.showAutoSuggestion(value));
+        };
+        this.onBlur = () => {
+            console.log('PeoplePickerView onBlur');
+            let callback = HostContext.getInstance().getHandler('blur');
+            if (callback) {
+                callback();
+            }
+        };
+        this.onFocus = () => {
+            console.log('PeoplePickerView onBlur');
+            let callback = HostContext.getInstance().getHandler('focus');
+            if (callback) {
+                callback();
+            }
+        };
+        this.showAutoSuggestion = (input) => {
+            const { element } = this.props;
+            FormContext.getInstance().updateField('contact_name', this.state.value, this.props.element.validate(this.state.value));
+            if (element && element.isValid) {
+                let callback = ActionContext.getGlobalInstance().getActionEventHandler(element.action, this.onSuggestionReceived, this.onSuggestionError);
+                if (callback) {
+                    callback();
+                }
+            }
+        };
+        this.onSuggestionReceived = (json) => {
+            if (json) {
+                this.setState({
+                    autoSuggestion: ContentElementFactory.create(json, this.props.element)
+                });
+            }
+        };
+        this.onSuggestionError = (error) => {
+            console.log(error);
+        };
+        const { element } = this.props;
+        if (element && element.isValid) {
+            this.state = {
+                value: element.value,
+                showModal: false,
+                autoSuggestion: undefined,
+            };
+            this.updateStore();
+        }
+    }
+    render() {
+        const { element } = this.props;
+        if (!element || !element.isValid) {
+            return null;
+        }
+        return (React.createElement(Row, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, spacing: 0, width: 'stretch' },
+            React.createElement(Column, { vIndex: 0, hIndex: 1, width: 'stretch', spacing: 5 },
+                React.createElement(Button, { vIndex: 0, hIndex: 0, vSpacing: 0, hSpacing: 0, title: this.state.value || element.placeholder, onPress: this.showModal, color: '#333333', backgroundColor: 'white', borderColor: '#777777', borderRadius: 4, borderWidth: 1, textAlign: 'left' })),
+            this.renderModal()));
+    }
+    renderModal() {
+        return (React.createElement(ModalBox, { show: this.state.showModal },
+            React.createElement(Column, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, spacing: 0, width: 'stretch' },
+                this.renderModalHeader(),
+                this.renderInputBox(),
+                this.renderAutoSuggestion())));
+    }
+    renderModalHeader() {
+        return (React.createElement(Row, { vIndex: 0, hIndex: 0, spacing: 0 },
+            React.createElement(LinkButton, { vIndex: 0, hIndex: 0, title: 'CANCEL', textAlign: 'left', wrap: 'wrap', numberOfLines: 1, onPress: this.closeModal }),
+            React.createElement(TextBlock, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, width: 'stretch', fontSize: 16, fontWeight: 'bold', color: '#333333', backgroundColor: 'transparent', textAlign: 'center', wrap: 'wrap', vSpacing: 0, numberOfLines: 1 }, 'People Picker'),
+            React.createElement(LinkButton, { vIndex: 0, hIndex: 0, title: 'SAVE', textAlign: 'right', wrap: 'wrap', numberOfLines: 1, onPress: this.closeModal })));
+    }
+    renderInputBox() {
+        const { element } = this.props;
+        if (!element || !element.isValid) {
+            return null;
+        }
+        return (React.createElement(Row, { vIndex: 0, hIndex: 0, spacing: 0 },
+            React.createElement(InputBox, { vIndex: 0, hIndex: 0, placeholder: element.placeholder, value: this.state.value, onValueChange: this.onValueChange, onBlur: this.onBlur })));
+    }
+    renderAutoSuggestion() {
+        if (this.state.autoSuggestion) {
+            return (React.createElement(Row, { vIndex: 1, hIndex: 0, spacing: 0 }, ContentFactory.createView(this.state.autoSuggestion, 0, this.props.theme)));
+        }
+        return undefined;
+    }
+    updateStore() {
+        FormContext.getInstance().updateField(this.props.element.id, this.state.value, this.props.element.validate(this.state.value));
+    }
+}

dist/Views/Inputs/TextInput.js

@@ -2,12 +2,24 @@ import * as React from 'react';
 import { Row } from '../../Components/Containers/Row';
 import { InputBox } from '../../Components/Inputs/InputBox';
 import { FormContext } from '../../Contexts/FormContext';
+import { HostContext } from '../../Contexts/HostContext';
 import { StyleManager } from '../../Styles/StyleManager';
 export class TextInputView extends React.Component {
     constructor(props) {
         super(props);
         this.onBlur = () => {
             console.log('TextInputView onBlur');
+            let callback = HostContext.getInstance().getHandler('blur');
+            if (callback) {
+                callback();
+            }
+        };
+        this.onFocus = () => {
+            console.log('TextInputView onFocus');
+            let callback = HostContext.getInstance().getHandler('focus');
+            if (callback) {
+                callback();
+            }
         };
         this.onValueChange = (value) => {
             this.setState({
@@ -28,7 +40,7 @@ export class TextInputView extends React.Component {
             return null;
         }
         return (React.createElement(Row, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, spacing: StyleManager.getInstance().getSpacing(element.spacing) },
-            React.createElement(InputBox, { vIndex: 0, hIndex: 0, placeholder: element.placeholder, value: this.state.value, onValueChange: this.onValueChange, onBlur: this.onBlur })));
+            React.createElement(InputBox, { vIndex: 0, hIndex: 0, placeholder: element.placeholder, value: this.state.value, onValueChange: this.onValueChange, onFocus: this.onFocus, onBlur: this.onBlur })));
     }
     updateStore() {
         FormContext.getInstance().updateField(this.props.element.id, this.state.value, this.props.element.validate(this.state.value));

dist/Views/Inputs/TimeInput.js

@@ -2,10 +2,25 @@ import * as React from 'react';
 import { Row } from '../../Components/Containers/Row';
 import { TimeInput } from '../../Components/Inputs/TimeInput';
 import { FormContext } from '../../Contexts/FormContext';
+import { HostContext } from '../../Contexts/HostContext';
 import { StyleManager } from '../../Styles/StyleManager';
 export class TimeInputView extends React.Component {
     constructor(props) {
         super(props);
+        this.onBlur = () => {
+            console.log('TimeInputView onBlur');
+            let callback = HostContext.getInstance().getHandler('blur');
+            if (callback) {
+                callback();
+            }
+        };
+        this.onFocus = () => {
+            console.log('TimeInputView onFocus');
+            let callback = HostContext.getInstance().getHandler('focus');
+            if (callback) {
+                callback();
+            }
+        };
         this.onValueChange = (value) => {
             this.setState({
                 value: value
@@ -25,7 +40,7 @@ export class TimeInputView extends React.Component {
             return null;
         }
         return (React.createElement(Row, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, spacing: StyleManager.getInstance().getSpacing(element.spacing) },
-            React.createElement(TimeInput, { vIndex: 0, hIndex: 0, value: this.state.value, onValueChange: this.onValueChange, validateInput: element.validate })));
+            React.createElement(TimeInput, { vIndex: 0, hIndex: 0, value: this.state.value, onValueChange: this.onValueChange, onFocus: this.onFocus, onBlur: this.onBlur, validateInput: element.validate })));
     }
     updateStore() {
         FormContext.getInstance().updateField(this.props.element.id, this.state.value, this.props.element.validate(this.state.value));

dist/Views/Root.js

@@ -2,7 +2,8 @@ import React from 'react';
 import { Linking, View, } from 'react-native';
 import { ActionContext } from '../Contexts/ActionContext';
 import { FormContext } from '../Contexts/FormContext';
-import { ActionType } from '../Schema/Base/ActionElement';
+import { HostContext } from '../Contexts/HostContext';
+import { ActionType } from '../Schema/Abstract/ActionElement';
 import { CardElement } from '../Schema/Cards/Card';
 import { AdaptiveCardView } from './Cards/AdaptiveCard';
 export class CardRootView extends React.PureComponent {
@@ -10,11 +11,33 @@ export class CardRootView extends React.PureComponent {
         super(props);
         this.onOpenUrl = (args) => {
             if (args) {
-                Linking.canOpenURL(args.action.url).then((supported) => {
-                    if (supported) {
-                        Linking.openURL(args.action.url);
-                    }
-                });
+                if (this.props.onOpenUrl) {
+                    this.props.onOpenUrl(args.action.url);
+                }
+                else {
+                    Linking.canOpenURL(args.action.url).then((supported) => {
+                        if (supported) {
+                            Linking.openURL(args.action.url);
+                        }
+                    });
+                }
+            }
+        };
+        this.onCallback = (args) => {
+            if (args) {
+                console.log('Form validate: ' + args.formValidate);
+                console.log(args.formData);
+                if (args.formValidate && this.props.onCallback) {
+                    this.props.onCallback(args.action.url, args.formData).then((data) => {
+                        if (args.onFinishCallback) {
+                            args.onFinishCallback(data);
+                        }
+                    }).catch((error) => {
+                        if (args.onErrorCallback) {
+                            args.onErrorCallback(error);
+                        }
+                    });
+                }
             }
         };
         this.onSubmit = (args) => {
@@ -26,9 +49,15 @@ export class CardRootView extends React.PureComponent {
                 }
             }
         };
-        this.formValidation = (args) => {
+        this.validateForm = (args) => {
             if (args) {
-                args.formValidate = args.action.scope.validateForm();
+                args.formValidate = args.action.scope.validateScope();
+            }
+            return args;
+        };
+        this.validateCallbackParams = (args) => {
+            if (args) {
+                args.formValidate = args.action.scope.validateScope();
             }
             return args;
         };
@@ -38,14 +67,42 @@ export class CardRootView extends React.PureComponent {
             }
             return args;
         };
+        this.populateCallbackParamData = (args) => {
+            if (args && args.formValidate) {
+                args.formData = FormContext.getInstance().getCallbackParamData(args.action.parameters);
+            }
+            return args;
+        };
         this.state = {
             rootCard: new CardElement(this.props.adaptiveCard, undefined),
         };
+        let hostContext = HostContext.getInstance();
+        hostContext.registerOpenUrlHandler(this.onOpenUrl);
+        hostContext.registerSubmitHandler(this.onSubmit);
+        hostContext.registerCallbackHandler(this.onCallback);
+        hostContext.registerFocusHandler(this.props.onFocus);
+        hostContext.registerBlurHandler(this.props.onBlur);
         let actionContext = ActionContext.getGlobalInstance();
-        actionContext.registerOpenUrlHandler(this.onOpenUrl);
-        actionContext.registerSubmitHandler(this.onSubmit);
-        actionContext.registerHook({ func: this.formValidation, name: 'formValidation', actionType: ActionType.Submit });
-        actionContext.registerHook({ func: this.populateFormData, name: 'populateFormData', actionType: ActionType.Submit });
+        actionContext.registerHook({
+            func: this.validateForm,
+            name: 'validateForm',
+            actionType: ActionType.Submit
+        });
+        actionContext.registerHook({
+            func: this.validateCallbackParams,
+            name: 'validateCallbackParams',
+            actionType: ActionType.Callback
+        });
+        actionContext.registerHook({
+            func: this.populateFormData,
+            name: 'populateFormData',
+            actionType: ActionType.Submit
+        });
+        actionContext.registerHook({
+            func: this.populateCallbackParamData,
+            name: 'populateCallbackParamData',
+            actionType: ActionType.Callback
+        });
     }
     componentWillReceiveProps(nextProps) {
     }

example/AdaptiveCards/Components/Basic/FlexBox.js

@@ -5,23 +5,16 @@ export class FlexBox extends React.Component {
         super(props);
         this.renderChildren = () => {
             if (this.props.children) {
-                return React.Children.map(this.props.children, (child, index) => {
+                return React.Children.map(this.props.children, (child) => {
                     if (child) {
                         if (typeof child !== 'string' && typeof child !== 'number') {
-                            if (this.props.width === 'auto') {
-                                return React.cloneElement(child, {
-                                    containerWidth: this.props.containerWidth,
-                                    containerHeight: this.props.containerHeight
-                                });
-                            }
-                            else {
-                                return React.cloneElement(child, {
-                                    containerWidth: this.state.width,
-                                    containerHeight: this.state.height
-                                });
-                            }
+                            return React.cloneElement(child, {
+                                containerWidth: this.containerWidth,
+                                containerHeight: this.containerHeight
+                            });
                         }
                     }
+                    return undefined;
                 });
             }
             return undefined;
@@ -69,6 +62,22 @@ export class FlexBox extends React.Component {
                 this.props.style,
             ], onLayout: this.onLayoutChange, onPress: this.props.onPress }, this.renderChildren()));
     }
+    get containerWidth() {
+        if (this.props.width === 'auto') {
+            return this.props.containerWidth;
+        }
+        else {
+            return this.state.width;
+        }
+    }
+    get containerHeight() {
+        if (this.props.width === 'auto') {
+            return this.props.containerHeight;
+        }
+        else {
+            return this.state.height;
+        }
+    }
     get flex() {
         if (this.props.flex) {
             return {
@@ -81,6 +90,7 @@ export class FlexBox extends React.Component {
         return {
             flexDirection: this.props.flexDirection,
             alignItems: this.props.wrap === 'wrap' ? 'flex-start' : this.props.alignItems,
+            alignContent: this.props.alignContent,
             justifyContent: this.props.justifyContent,
             height: this.props.height,
             flexWrap: this.props.wrap,

example/AdaptiveCards/Components/Basic/ImageBlock.js

@@ -24,7 +24,7 @@ export class ImageBlock extends React.Component {
         this.fetchImageSize = () => {
             ImageUtils.fetchSize(this.props.url, this.onImageSize, this.onImageSizeError);
         };
-        this.onLayoutChange = (width, height) => {
+        this.onLayoutChange = () => {
             this.fetchImageSize();
         };
         this.onImageSizeUpdate = (event) => {

example/AdaptiveCards/Components/Basic/TextBlock.js

@@ -6,7 +6,7 @@ export class TextBlock extends React.PureComponent {
         super(props);
     }
     render() {
-        return (React.createElement(FlexBox, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, flexDirection: 'row', relativeWidth: false, width: this.props.width, vSpacing: this.props.spacing, alignSelf: 'stretch', alignItems: 'stretch', alignContent: 'stretch', justifyContent: this.props.horizontalAlign, style: [
+        return (React.createElement(FlexBox, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, flexDirection: 'row', relativeWidth: false, width: this.props.width, vSpacing: this.props.vSpacing, hSpacing: this.props.hSpacing, alignSelf: 'stretch', alignItems: 'stretch', alignContent: 'stretch', justifyContent: 'center', onPress: this.props.onPress, style: [
                 {
                     backgroundColor: this.props.backgroundColor
                 },
@@ -19,10 +19,11 @@ export class TextBlock extends React.PureComponent {
                         fontSize: this.props.fontSize,
                         fontWeight: this.props.fontWeight,
                         textAlign: this.props.textAlign,
+                        flex: 1,
                         flexWrap: this.props.wrap,
                         backgroundColor: this.props.backgroundColor,
                     },
                     this.props.textStyle,
-                ], numberOfLines: this.props.numberOfLines }, this.props.children)));
+                ], numberOfLines: this.props.numberOfLines, onPress: this.props.onPress }, this.props.children)));
     }
 }

example/AdaptiveCards/Components/Containers/Column.js

@@ -5,6 +5,21 @@ export class Column extends React.Component {
         super(props);
     }
     render() {
-        return (React.createElement(FlexBox, { flexDirection: 'column', relativeWidth: true, alignSelf: 'stretch', alignContent: 'flex-start', alignItems: 'stretch', justifyContent: 'flex-start', width: this.props.width, vIndex: this.props.vIndex, hIndex: this.props.hIndex, style: this.props.style, vSpacing: this.props.spacing, onPress: this.props.onPress }, this.props.children));
+        return (React.createElement(FlexBox, { flexDirection: 'column', relativeWidth: true, alignSelf: 'stretch', alignContent: 'flex-start', alignItems: 'flex-start', justifyContent: 'flex-start', width: this.props.width, vIndex: this.props.vIndex, hIndex: this.props.hIndex, style: this.props.style, vSpacing: this.props.spacing, onPress: this.props.onPress }, this.renderChildren()));
+    }
+    renderChildren() {
+        if (this.props.children) {
+            return React.Children.map(this.props.children, (child) => {
+                if (child) {
+                    if (typeof child !== 'string' && typeof child !== 'number') {
+                        return React.cloneElement(child, {
+                            flex: 0
+                        });
+                    }
+                }
+                return child;
+            });
+        }
+        return undefined;
     }
 }

example/AdaptiveCards/Components/Containers/ModalBox.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Modal, View } from 'react-native';
+export class ModalBox extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (React.createElement(Modal, { visible: this.props.show, animationType: 'fade', transparent: true },
+            React.createElement(View, { style: [
+                    {
+                        flex: 1,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)'
+                    }
+                ] },
+                React.createElement(View, { style: [
+                        {
+                            backgroundColor: 'white',
+                            height: '45%',
+                            width: '85%',
+                            borderRadius: 10,
+                            borderWidth: 1,
+                            padding: 10,
+                        }
+                    ] }, this.props.children))));
+    }
+}

example/AdaptiveCards/Components/Inputs/Button.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { View } from 'react-native';
 import { FlexBox } from '../Basic/FlexBox';
 import { TextBlock } from '../Basic/TextBlock';
 export class Button extends React.Component {
@@ -6,34 +7,37 @@ export class Button extends React.Component {
         super(props);
     }
     render() {
-        return (React.createElement(FlexBox, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, flexDirection: 'row', relativeWidth: false, flex: 1, alignSelf: 'stretch', alignItems: 'center', alignContent: 'center', justifyContent: 'center', width: 'stretch', hSpacing: 10, style: [
+        return (React.createElement(FlexBox, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, flexDirection: 'row', relativeWidth: false, flex: 1, alignSelf: 'stretch', alignItems: 'stretch', alignContent: 'stretch', justifyContent: 'center', width: 'stretch', hSpacing: 10, style: [
                 {
                     paddingVertical: 10,
                     paddingHorizontal: 10,
-                    borderRadius: 4,
-                    backgroundColor: '#277BDF',
+                    borderRadius: this.props.borderRadius,
+                    backgroundColor: this.props.backgroundColor,
+                    borderColor: this.props.borderColor,
+                    borderWidth: this.props.borderWidth,
                 },
                 this.spacing,
                 this.props.boxStyle
             ], onPress: this.props.onPress },
-            React.createElement(TextBlock, { vIndex: 0, hIndex: 0, width: 'stretch', horizontalAlign: 'center', textStyle: [
-                    {
-                        textAlign: 'center',
-                        color: 'white',
-                    },
-                    this.props.textStyle,
-                ], numberOfLines: 1 }, this.props.title)));
+            React.createElement(View, { pointerEvents: 'none', flex: 1 },
+                React.createElement(TextBlock, { vIndex: 0, hIndex: 0, width: 'stretch', horizontalAlign: 'center', textStyle: [
+                        {
+                            textAlign: this.props.textAlign,
+                            color: this.props.color,
+                        },
+                        this.props.textStyle,
+                    ], numberOfLines: 1 }, this.props.title))));
     }
     get spacing() {
         let result = {
             marginTop: 0,
             marginLeft: 0,
         };
-        if (this.props.vIndex > 0 && this.props.vSpace) {
-            result.marginTop = this.props.vSpace;
+        if (this.props.vIndex > 0 && this.props.vSpacing) {
+            result.marginTop = this.props.vSpacing;
         }
-        if (this.props.hIndex > 0 && this.props.hSpace) {
-            result.marginLeft = this.props.hSpace;
+        if (this.props.hIndex > 0 && this.props.hSpacing) {
+            result.marginLeft = this.props.hSpacing;
         }
         return result;
     }

example/AdaptiveCards/Components/Inputs/DateInput.js

@@ -7,39 +7,32 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import * as React from 'react';
-import { DatePickerAndroid, DatePickerIOS, Platform, Text, TouchableOpacity, View } from 'react-native';
+import { DatePickerAndroid, DatePickerIOS, Platform, } from 'react-native';
 import { TimeUtils } from '../../Utils/TimeUtils';
-import { FlexBox } from '../Basic/FlexBox';
+import { Column } from '../Containers/Column';
+import { Row } from '../Containers/Row';
+import { Button } from './Button';
 export class DateInput extends React.Component {
     constructor(props) {
         super(props);
         this.renderBtn = () => {
-            if (!this.state.showDatePicker) {
-                return (React.createElement(TouchableOpacity, { style: { flex: 1 }, onPress: this.showDatePicker },
-                    React.createElement(View, { style: {
-                            flex: 1,
-                            borderColor: 'gray',
-                            borderWidth: 1,
-                            borderRadius: 4,
-                            paddingHorizontal: 10,
-                            paddingVertical: 6,
-                            marginVertical: 6,
-                            height: 38,
-                        } },
-                        React.createElement(Text, null, this.props.value))));
-            }
-            return undefined;
+            return (React.createElement(Row, { vIndex: 0, hIndex: 0 },
+                React.createElement(Button, { vIndex: 0, hIndex: 0, title: this.props.value, onPress: this.showDatePicker, borderColor: '#777777', borderWidth: 1, borderRadius: 4 })));
         };
         this.renderInlineDatePicker = () => {
             if (Platform.OS === 'ios') {
                 if (this.state.showDatePicker) {
                     let date = TimeUtils.extractDate(this.props.value);
-                    return (React.createElement(DatePickerIOS, { date: date, mode: 'date', onDateChange: this.onDateChange, style: { flex: 1 } }));
+                    return (React.createElement(Row, { vIndex: 0, hIndex: 0 },
+                        React.createElement(DatePickerIOS, { date: date, mode: 'date', onDateChange: this.onDateChange, style: { flex: 1 } })));
                 }
             }
             return undefined;
         };
         this.onPickerClose = () => {
+            if (this.props.onBlur) {
+                this.props.onBlur();
+            }
             if (this.props.validateInput) {
                 if (this.props.validateInput(this.props.value)) {
                     console.log('DateInput: valid');
@@ -50,14 +43,10 @@ export class DateInput extends React.Component {
             }
         };
         this.onDateChange = (date) => {
-            this.setState({
-                showDatePicker: false,
-            }, () => {
-                if (this.props.onValueChange) {
-                    let timeString = TimeUtils.getDateString(date);
-                    this.props.onValueChange(timeString);
-                }
-            });
+            if (this.props.onValueChange) {
+                let timeString = TimeUtils.getDateString(date);
+                this.props.onValueChange(timeString);
+            }
         };
         this.showDatePickerAndroid = this.showDatePickerAndroid.bind(this);
         this.showDatePicker = this.showDatePicker.bind(this);
@@ -66,7 +55,7 @@ export class DateInput extends React.Component {
         };
     }
     render() {
-        return (React.createElement(FlexBox, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, relativeWidth: false, flexDirection: 'row', alignSelf: 'stretch', alignContent: 'flex-start', alignItems: 'stretch', justifyContent: 'space-between', width: 'stretch' },
+        return (React.createElement(Column, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, width: 'stretch' },
             this.renderBtn(),
             this.renderInlineDatePicker()));
     }
@@ -85,7 +74,7 @@ export class DateInput extends React.Component {
                     if (action === DatePickerAndroid.dismissedAction) {
                         this.setState({
                             showDatePicker: false
-                        });
+                        }, this.onPickerClose);
                     }
                 }
                 catch ({ code, message }) {
@@ -96,6 +85,9 @@ export class DateInput extends React.Component {
     }
     showDatePicker() {
         return __awaiter(this, void 0, void 0, function* () {
+            if (this.props.onFocus) {
+                this.props.onFocus();
+            }
             if (this.state.showDatePicker) {
                 this.setState({
                     showDatePicker: false

example/AdaptiveCards/Components/Inputs/InputBox.js

@@ -19,6 +19,6 @@ export class InputBox extends React.Component {
                         height: 38,
                     },
                     this.props.style
-                ], multiline: this.props.multiline, keyboardType: this.props.keyboardType, blurOnSubmit: true, placeholder: this.props.placeholder, value: this.props.value, returnKeyType: this.props.returnKeyType, underlineColorAndroid: 'transparent', importantForAccessibility: 'no-hide-descendants', onChangeText: this.props.onValueChange, onBlur: this.props.onBlur })));
+                ], multiline: this.props.multiline, keyboardType: this.props.keyboardType, blurOnSubmit: true, placeholder: this.props.placeholder, value: this.props.value, returnKeyType: this.props.returnKeyType, underlineColorAndroid: 'transparent', importantForAccessibility: 'no-hide-descendants', onChangeText: this.props.onValueChange, onFocus: this.props.onFocus, onBlur: this.props.onBlur })));
     }
 }

example/AdaptiveCards/Components/Inputs/LinkButton.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { TextBlock } from '../Basic/TextBlock';
+export class LinkButton extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (React.createElement(TextBlock, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, width: 'stretch', fontSize: 16, fontWeight: 'normal', color: '#277BDF', backgroundColor: 'transparent', textAlign: this.props.textAlign, wrap: this.props.wrap, vSpacing: this.props.vSpacing, numberOfLines: this.props.numberOfLines, onPress: this.props.onPress }, this.props.title));
+    }
+}

example/AdaptiveCards/Components/Inputs/NumberInput.js

@@ -25,8 +25,13 @@ export class NumberInput extends React.Component {
                 this.props.onBlur();
             }
         };
+        this.onFocus = () => {
+            if (this.props.onFocus) {
+                this.props.onFocus();
+            }
+        };
     }
     render() {
-        return (React.createElement(InputBox, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, multiline: false, keyboardType: Platform.OS === 'ios' ? 'numbers-and-punctuation' : 'numeric', placeholder: this.props.placeholder, value: this.props.value, returnKeyType: 'done', onValueChange: this.onChangeText, onBlur: this.onBlur }));
+        return (React.createElement(InputBox, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, multiline: false, keyboardType: Platform.OS === 'ios' ? 'numbers-and-punctuation' : 'numeric', placeholder: this.props.placeholder, value: this.props.value, returnKeyType: 'done', onValueChange: this.onChangeText, onBlur: this.onBlur, onFocus: this.onFocus }));
     }
 }

example/AdaptiveCards/Components/Inputs/TimeInput.js

@@ -7,41 +7,32 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import * as React from 'react';
-import { DatePickerIOS, Platform, Text, TimePickerAndroid, TouchableOpacity, View } from 'react-native';
+import { DatePickerIOS, Platform, TimePickerAndroid, } from 'react-native';
 import { TimeUtils } from '../../Utils/TimeUtils';
-import { FlexBox } from '../Basic/FlexBox';
+import { Column } from '../Containers/Column';
+import { Row } from '../Containers/Row';
+import { Button } from './Button';
 export class TimeInput extends React.Component {
     constructor(props) {
         super(props);
         this.renderBtn = () => {
-            if (!this.state.showTimePicker) {
-                return (React.createElement(TouchableOpacity, { style: { flex: 1 }, onPress: this.showDatePicker },
-                    React.createElement(View, { style: [
-                            {
-                                flex: 1,
-                                borderColor: 'gray',
-                                borderWidth: 1,
-                                borderRadius: 4,
-                                paddingHorizontal: 10,
-                                paddingVertical: 6,
-                                marginVertical: 6,
-                                height: 38,
-                            }
-                        ] },
-                        React.createElement(Text, null, this.props.value))));
-            }
-            return undefined;
+            return (React.createElement(Row, { vIndex: 0, hIndex: 0 },
+                React.createElement(Button, { vIndex: 0, hIndex: 0, title: this.props.value, onPress: this.showTimePicker, borderColor: '#777777', borderWidth: 1, borderRadius: 4 })));
         };
-        this.showTimePickerIOS = () => {
+        this.renderInlineTimePickerIOS = () => {
             if (Platform.OS === 'ios') {
                 if (this.state.showTimePicker) {
                     let time = TimeUtils.extractTime(this.props.value);
-                    return (React.createElement(DatePickerIOS, { date: time, mode: 'time', onDateChange: this.onTimeChangeIOS, style: { flex: 1 } }));
+                    return (React.createElement(Row, { vIndex: 0, hIndex: 0 },
+                        React.createElement(DatePickerIOS, { date: time, mode: 'time', onDateChange: this.onTimeChangeIOS, style: { flex: 1 } })));
                 }
             }
             return undefined;
         };
         this.onPickerClose = () => {
+            if (this.props.onBlur) {
+                this.props.onBlur();
+            }
             if (this.props.validateInput) {
                 if (this.props.validateInput(this.props.value)) {
                     console.log('TimeInput: valid');
@@ -55,25 +46,21 @@ export class TimeInput extends React.Component {
             this.onTimeChange(date.getHours(), date.getMinutes());
         };
         this.onTimeChange = (hour, minute) => {
-            this.setState({
-                showTimePicker: false,
-            }, () => {
-                if (this.props.onValueChange) {
-                    let timeString = TimeUtils.composeTimeString(hour, minute);
-                    this.props.onValueChange(timeString);
-                }
-            });
+            if (this.props.onValueChange) {
+                let timeString = TimeUtils.composeTimeString(hour, minute);
+                this.props.onValueChange(timeString);
+            }
         };
         this.showTimePickerAndroid = this.showTimePickerAndroid.bind(this);
-        this.showDatePicker = this.showDatePicker.bind(this);
+        this.showTimePicker = this.showTimePicker.bind(this);
         this.state = {
             showTimePicker: false,
         };
     }
     render() {
-        return (React.createElement(FlexBox, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, relativeWidth: false, flexDirection: 'row', alignSelf: 'stretch', alignContent: 'flex-start', alignItems: 'stretch', justifyContent: 'space-between', width: 'stretch' },
+        return (React.createElement(Column, { vIndex: this.props.vIndex, hIndex: this.props.hIndex, width: 'stretch' },
             this.renderBtn(),
-            this.showTimePickerIOS()));
+            this.renderInlineTimePickerIOS()));
     }
     showTimePickerAndroid() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -91,7 +78,7 @@ export class TimeInput extends React.Component {
                     if (action === TimePickerAndroid.dismissedAction) {
                         this.setState({
                             showTimePicker: false
-                        });
+                        }, this.onPickerClose);
                     }
                 }
                 catch ({ code, message }) {
@@ -100,8 +87,11 @@ export class TimeInput extends React.Component {
             }
         });
     }
-    showDatePicker() {
+    showTimePicker() {
         return __awaiter(this, void 0, void 0, function* () {
+            if (this.props.onFocus) {
+                this.props.onFocus();
+            }
             if (this.state.showTimePicker) {
                 this.setState({
                     showTimePicker: false

example/AdaptiveCards/Contexts/ActionContext.js

@@ -1,4 +1,4 @@
-import { ActionType } from '../Schema/Base/ActionElement';
+import { HostContext } from './HostContext';
 export class ActionContext {
     constructor() {
         this.hooks = {};
@@ -15,15 +15,6 @@ export class ActionContext {
     static clearGlobalInstance() {
         ActionContext.sharedInstance = undefined;
     }
-    registerOpenUrlHandler(handler) {
-        this.onOpenUrl = handler;
-    }
-    registerShowCardHandler(handler) {
-        this.onShowCard = handler;
-    }
-    registerSubmitHandler(handler) {
-        this.onSubmit = handler;
-    }
     registerHook(hook) {
         if (hook) {
             if (this.hooks[hook.actionType] === undefined) {
@@ -40,14 +31,16 @@ export class ActionContext {
         }
         return [];
     }
-    getActionEventHandler(target) {
+    getActionEventHandler(target, onFinish, onError) {
         return ((...externalHooks) => {
             let action = target.action;
             if (action) {
-                let callback = this.selectCallback(action);
+                let callback = HostContext.getInstance().getHandler(action.type);
                 let args = {
                     action: action,
                     formValidate: false,
+                    onFinishCallback: onFinish,
+                    onErrorCallback: onError,
                 };
                 let hookFuncs = this.getExecuteFuncs(action.type, externalHooks);
                 args = hookFuncs.reduce((prev, current) => {
@@ -59,21 +52,6 @@ export class ActionContext {
             }
         });
     }
-    selectCallback(action) {
-        let callback;
-        switch (action.type) {
-            case ActionType.OpenUrl:
-                callback = this.onOpenUrl;
-                break;
-            case ActionType.ShowCard:
-                callback = this.onShowCard;
-                break;
-            case ActionType.Submit:
-                callback = this.onSubmit;
-                break;
-        }
-        return callback;
-    }
     getExecuteFuncs(actionType, externalHooks) {
         let hookFuncs = [];
         if (this.hooks) {

example/AdaptiveCards/Contexts/FormContext.js

@@ -54,6 +54,17 @@ export class FormContext {
         }
         return {};
     }
+    getCallbackParamData(params) {
+        if (params) {
+            return Object.keys(params).reduce((prev, current) => {
+                let formIndex = params[current];
+                console.log(formIndex);
+                prev[current] = this.getFieldValue(formIndex);
+                return prev;
+            }, {});
+        }
+        return {};
+    }
     validateField(id) {
         let field = this.getField(id);
         if (field) {

example/AdaptiveCards/Contexts/HostContext.js

@@ -0,0 +1,52 @@
+import { ActionType } from '../Schema/Abstract/ActionElement';
+export class HostContext {
+    constructor() { }
+    static getInstance() {
+        if (HostContext.sharedInstance === undefined) {
+            HostContext.sharedInstance = new HostContext();
+        }
+        return HostContext.sharedInstance;
+    }
+    registerFocusHandler(handler) {
+        this.onFocus = handler;
+    }
+    registerBlurHandler(handler) {
+        this.onBlur = handler;
+    }
+    registerOpenUrlHandler(handler) {
+        this.onOpenUrl = handler;
+    }
+    registerShowCardHandler(handler) {
+        this.onShowCard = handler;
+    }
+    registerSubmitHandler(handler) {
+        this.onSubmit = handler;
+    }
+    registerCallbackHandler(handler) {
+        this.onCallback = handler;
+    }
+    getHandler(type) {
+        let callback;
+        switch (type) {
+            case ActionType.OpenUrl:
+                callback = this.onOpenUrl;
+                break;
+            case ActionType.Callback:
+                callback = this.onCallback;
+                break;
+            case ActionType.ShowCard:
+                callback = this.onShowCard;
+                break;
+            case ActionType.Submit:
+                callback = this.onSubmit;
+                break;
+            case 'focus':
+                callback = this.onFocus;
+                break;
+            case 'blur':
+                callback = this.onBlur;
+                break;
+        }
+        return callback;
+    }
+}

example/AdaptiveCards/HostConfig/Types.js

@@ -25,6 +25,7 @@ export class SpacingConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class SeparatorConfig {
@@ -46,6 +47,7 @@ export class SeparatorConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class FontSizeConfig {
@@ -73,6 +75,7 @@ export class FontSizeConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class FontWeightConfig {
@@ -96,6 +99,7 @@ export class FontWeightConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class ColorConfig {
@@ -117,6 +121,7 @@ export class ColorConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class ColorSetConfig {
@@ -148,6 +153,7 @@ export class ColorSetConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class ThemeConfig {
@@ -169,6 +175,7 @@ export class ThemeConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class ContainerConfig {
@@ -190,6 +197,7 @@ export class ContainerConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class ImageSizeConfig {
@@ -213,6 +221,7 @@ export class ImageSizeConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class ShowCardActionConfig {
@@ -236,6 +245,7 @@ export class ShowCardActionConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class ActionConfig {
@@ -271,6 +281,7 @@ export class ActionConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class CardConfig {
@@ -290,6 +301,7 @@ export class CardConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class ImageSetConfig {
@@ -311,6 +323,7 @@ export class ImageSetConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class FactValueConfig {
@@ -322,6 +335,7 @@ export class FactValueConfig {
             this.weight = json['weight'];
             this.wrap = json['wrap'];
         }
+        return this;
     }
     combine(...args) {
         if (args) {
@@ -338,6 +352,7 @@ export class FactValueConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class FactTitleConfig {
@@ -367,6 +382,7 @@ export class FactTitleConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class FactSetConfig {
@@ -390,6 +406,7 @@ export class FactSetConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class MediaConfig {
@@ -411,6 +428,7 @@ export class MediaConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }
 export class HostConfig {
@@ -456,5 +474,6 @@ export class HostConfig {
                 return prev;
             }, this);
         }
+        return this;
     }
 }

example/AdaptiveCards/Schema/Abstract/AbstractElement.js

@@ -21,7 +21,7 @@ export var CardElementType;
 })(CardElementType || (CardElementType = {}));
 export class AbstractElement {
     constructor(json, parent) {
-        let validation = JsonUtils.isValidateJson(json, this.getRequiredProperties());
+        let validation = JsonUtils.isValidateJson(json, this.requiredProperties);
         if (!validation.isValid) {
             ConsoleUtils.error('AbstractElement', validation.message);
         }
@@ -48,4 +48,7 @@ export class AbstractElement {
     get descendsAndSelf() {
         return [this, ...this.descends];
     }
+    get requiredProperties() {
+        return ['type'];
+    }
 }

example/AdaptiveCards/Schema/Abstract/ActionElement.js

@@ -4,6 +4,7 @@ export var ActionType;
     ActionType["OpenUrl"] = "Action.OpenUrl";
     ActionType["Submit"] = "Action.Submit";
     ActionType["ShowCard"] = "Action.ShowCard";
+    ActionType["Callback"] = "Action.Callback";
 })(ActionType || (ActionType = {}));
 export class ActionElement extends AbstractElement {
     constructor(json, parent) {

example/AdaptiveCards/Schema/Abstract/ContentElement.js

@@ -14,12 +14,12 @@ export var ContentElementType;
     ContentElementType["TimeInput"] = "Input.Time";
     ContentElementType["ToggleInput"] = "Input.Toggle";
     ContentElementType["ChoiceSetInput"] = "Input.ChoiceSet";
+    ContentElementType["PeoplePicker"] = "Input.PeoplePicker";
     ContentElementType["AdaptiveCard"] = "AdaptiveCard";
 })(ContentElementType || (ContentElementType = {}));
 export class ContentElement extends AbstractElement {
     constructor(json, parent) {
         super(json, parent);
-        this.separator = false;
         if (this.isValid) {
             this.id = json.id;
             this.spacing = json.spacing;

example/AdaptiveCards/Schema/Abstract/InputElement.js

@@ -7,10 +7,12 @@ export var InputElementType;
     InputElementType["TimeInput"] = "Input.Time";
     InputElementType["ToggleInput"] = "Input.Toggle";
     InputElementType["ChoiceSetInput"] = "Input.ChoiceSet";
+    InputElementType["PeoplePicker"] = "Input.PeoplePicker";
 })(InputElementType || (InputElementType = {}));
 export class InputElement extends ContentElement {
     constructor(json, parent) {
         super(json, parent);
+        this.children = [];
         if (this.isValid) {
             this.id = json.id;
             this.value = json.value;

example/AdaptiveCards/Schema/Abstract/ScopeElement.js

@@ -11,7 +11,7 @@ export var FormElementType;
     FormElementType["Image"] = "Image";
     FormElementType["AdaptiveCard"] = "AdaptiveCard";
 })(FormElementType || (FormElementType = {}));
-export class FormElement extends ContentElement {
+export class ScopeElement extends ContentElement {
     constructor(json, parent) {
         super(json, parent);
         if (this.isValid) {
@@ -42,8 +42,9 @@ export class FormElement extends ContentElement {
             }
             return this.backgroundImage.url;
         }
+        return undefined;
     }
-    validateForm(value) {
+    validateScope() {
         return FormContext.getInstance().validateFields(this.inputFields);
     }
 }

example/AdaptiveCards/Schema/Abstract/ValueElement.js

@@ -12,7 +12,7 @@ export class ValueElement extends AbstractElement {
             this.value = json.value;
         }
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['title', 'value'];
     }
 }

example/AdaptiveCards/Schema/Actions/OpenUrlAction.js

@@ -1,4 +1,4 @@
-import { ActionElement } from '../Base/ActionElement';
+import { ActionElement } from '../Abstract/ActionElement';
 export class OpenUrlActionElement extends ActionElement {
     constructor(json, parent) {
         super(json, parent);
@@ -10,7 +10,7 @@ export class OpenUrlActionElement extends ActionElement {
     get scope() {
         return this.ancestorsAndSelf.find(element => element.parent === undefined);
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'title', 'url'];
     }
 }

example/AdaptiveCards/Schema/Actions/ShowCardAction.js

@@ -1,4 +1,4 @@
-import { ActionElement } from '../Base/ActionElement';
+import { ActionElement } from '../Abstract/ActionElement';
 import { CardElement } from '../Cards/Card';
 export class ShowCardActionElement extends ActionElement {
     constructor(json, parent) {
@@ -19,7 +19,7 @@ export class ShowCardActionElement extends ActionElement {
         }
         return [];
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'title', 'card'];
     }
 }

example/AdaptiveCards/Schema/Actions/SubmitAction.js

@@ -1,4 +1,4 @@
-import { ActionElement } from '../Base/ActionElement';
+import { ActionElement } from '../Abstract/ActionElement';
 export class SubmitActionElement extends ActionElement {
     constructor(json, parent) {
         super(json, parent);
@@ -10,7 +10,7 @@ export class SubmitActionElement extends ActionElement {
     get scope() {
         return this.ancestorsAndSelf.find(element => element.parent === undefined);
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'title'];
     }
 }

example/AdaptiveCards/Schema/CardElements/Image.js

@@ -1,5 +1,5 @@
-import { FormElement } from '../Base/FormElement';
-export class ImageElement extends FormElement {
+import { ScopeElement } from '../Abstract/ScopeElement';
+export class ImageElement extends ScopeElement {
     constructor(json, parent) {
         super(json, parent);
         this.children = [];
@@ -11,7 +11,7 @@ export class ImageElement extends FormElement {
             this.style = json.style;
         }
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'url'];
     }
 }

example/AdaptiveCards/Schema/CardElements/TextBlock.js

@@ -1,4 +1,4 @@
-import { ContentElement } from '../Base/ContentElement';
+import { ContentElement } from '../Abstract/ContentElement';
 export class TextBlockElement extends ContentElement {
     constructor(json, parent) {
         super(json, parent);
@@ -14,7 +14,7 @@ export class TextBlockElement extends ContentElement {
             this.wrap = json.wrap || false;
         }
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'text'];
     }
 }

example/AdaptiveCards/Schema/Cards/Card.js

@@ -1,7 +1,7 @@
-import { FormElement } from '../Base/FormElement';
+import { ScopeElement } from '../Abstract/ScopeElement';
 import { ActionFactory } from '../Factories/ActionFactory';
 import { ContentElementFactory } from '../Factories/ContentElementFactory';
-export class CardElement extends FormElement {
+export class CardElement extends ScopeElement {
     constructor(json, parent) {
         super(json, parent);
         if (this.isValid) {
@@ -27,7 +27,7 @@ export class CardElement extends FormElement {
     getBackgroundImageUrl() {
         return this.backgroundImage;
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'version'];
     }
 }

example/AdaptiveCards/Schema/Containers/Column.js

@@ -1,6 +1,6 @@
-import { FormElement } from '../Base/FormElement';
+import { ScopeElement } from '../Abstract/ScopeElement';
 import { ContentElementFactory } from '../Factories/ContentElementFactory';
-export class ColumnElement extends FormElement {
+export class ColumnElement extends ScopeElement {
     constructor(json, parent) {
         super(json, parent);
         if (this.isValid) {
@@ -25,7 +25,7 @@ export class ColumnElement extends FormElement {
         }
         return [];
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'items'];
     }
 }

example/AdaptiveCards/Schema/Containers/ColumnSet.js

@@ -1,6 +1,6 @@
-import { FormElement } from '../Base/FormElement';
+import { ScopeElement } from '../Abstract/ScopeElement';
 import { ColumnElement } from './Column';
-export class ColumnSetElement extends FormElement {
+export class ColumnSetElement extends ScopeElement {
     constructor(json, parent) {
         super(json, parent);
         if (this.isValid) {
@@ -21,7 +21,7 @@ export class ColumnSetElement extends FormElement {
         }
         return [];
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type'];
     }
 }

example/AdaptiveCards/Schema/Containers/Container.js

@@ -1,6 +1,6 @@
-import { FormElement } from '../Base/FormElement';
+import { ScopeElement } from '../Abstract/ScopeElement';
 import { ContentElementFactory } from '../Factories/ContentElementFactory';
-export class ContainerElement extends FormElement {
+export class ContainerElement extends ScopeElement {
     constructor(json, parent) {
         super(json, parent);
         this.items = [];
@@ -15,7 +15,7 @@ export class ContainerElement extends FormElement {
         }
         return [];
     }
-    getRequiredProperties() {
+    get requiredProperties() {
         return ['type', 'items'];
     }
 }