import { __extends } from "tslib";
import * as React from 'react';
import { LayoutGroup } from '@uifabric/experiments/lib/LayoutGroup';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import { Label } from 'office-ui-fabric-react/lib/Label';
var LayoutGroupBasicExample = /** @class */ (function (_super) {
    __extends(LayoutGroupBasicExample, _super);
    function LayoutGroupBasicExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    LayoutGroupBasicExample.prototype.render = function () {
        return (React.createElement("div", null,
            React.createElement("h3", null, "Layout Group"),
            React.createElement(LayoutGroup, { layoutGap: 20, direction: "vertical" },
                React.createElement("h2", null, "A List of Inputs"),
                React.createElement(Dropdown, { placeholder: "Select an Option", label: "Basic uncontrolled example:", ariaLabel: "Basic dropdown example", options: [
                        { key: 'A', text: 'Option a' },
                        { key: 'B', text: 'Option b' },
                        { key: 'C', text: 'Option c' },
                        { key: 'D', text: 'Option d' },
                        { key: 'E', text: 'Option e' },
                        { key: 'F', text: 'Option f' },
                        { key: 'G', text: 'Option g' },
                        { key: 'H', text: 'Option h' },
                        { key: 'I', text: 'Option i' },
                        { key: 'J', text: 'Option j' },
                    ] }),
                React.createElement(LayoutGroup, { layoutGap: 20, direction: "horizontal", justify: "fill" },
                    React.createElement(TextField, { label: "TextField with a placeholder", placeholder: "Now I am a Placeholder", ariaLabel: "Please enter text here" }),
                    React.createElement(TextField, { label: "TextField with an icon", iconProps: { iconName: 'Calendar' } })),
                React.createElement(LayoutGroup, { layoutGap: 20, direction: "horizontal", justify: "fill" },
                    React.createElement(ChoiceGroup, { defaultSelectedKey: "B", options: [
                            {
                                key: 'A',
                                text: 'Option A',
                            },
                            {
                                key: 'B',
                                text: 'Option B',
                            },
                            {
                                key: 'C',
                                text: 'Option C',
                                disabled: true,
                            },
                            {
                                key: 'D',
                                text: 'Option D',
                                disabled: true,
                            },
                        ], label: "Pick one", required: true }),
                    React.createElement(LayoutGroup, { layoutGap: 10 },
                        React.createElement(Label, null, "Pick a few"),
                        React.createElement(Checkbox, { label: "Checkbox A" }),
                        React.createElement(Checkbox, { label: "Checkbox A" }),
                        React.createElement(Checkbox, { label: "Checkbox A" }),
                        React.createElement(Checkbox, { label: "Checkbox A" }),
                        React.createElement(Checkbox, { label: "Checkbox A" }))),
                React.createElement(PrimaryButton, null, "Submit"))));
    };
    return LayoutGroupBasicExample;
}(React.Component));
export { LayoutGroupBasicExample };
//# sourceMappingURL=LayoutGroup.Basic.Example.js.map