define(["require", "exports", "tslib", "react", "@fluentui/react-experiments/lib/LayoutGroup", "@fluentui/react/lib/Button", "@fluentui/react/lib/Dropdown", "@fluentui/react/lib/TextField", "@fluentui/react/lib/ChoiceGroup", "@fluentui/react/lib/Checkbox", "@fluentui/react/lib/Label"], function (require, exports, tslib_1, React, LayoutGroup_1, Button_1, Dropdown_1, TextField_1, ChoiceGroup_1, Checkbox_1, Label_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.LayoutGroupBasicExample = void 0;
    var LayoutGroupBasicExample = /** @class */ (function (_super) {
        tslib_1.__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_1.LayoutGroup, { layoutGap: 20, direction: "vertical" },
                    React.createElement("h2", null, "A List of Inputs"),
                    React.createElement(Dropdown_1.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_1.LayoutGroup, { layoutGap: 20, direction: "horizontal", justify: "fill" },
                        React.createElement(TextField_1.TextField, { label: "TextField with a placeholder", placeholder: "Now I am a Placeholder", ariaLabel: "Please enter text here" }),
                        React.createElement(TextField_1.TextField, { label: "TextField with an icon", iconProps: { iconName: 'Calendar' } })),
                    React.createElement(LayoutGroup_1.LayoutGroup, { layoutGap: 20, direction: "horizontal", justify: "fill" },
                        React.createElement(ChoiceGroup_1.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_1.LayoutGroup, { layoutGap: 10 },
                            React.createElement(Label_1.Label, null, "Pick a few"),
                            React.createElement(Checkbox_1.Checkbox, { label: "Checkbox A" }),
                            React.createElement(Checkbox_1.Checkbox, { label: "Checkbox A" }),
                            React.createElement(Checkbox_1.Checkbox, { label: "Checkbox A" }),
                            React.createElement(Checkbox_1.Checkbox, { label: "Checkbox A" }),
                            React.createElement(Checkbox_1.Checkbox, { label: "Checkbox A" }))),
                    React.createElement(Button_1.PrimaryButton, null, "Submit"))));
        };
        return LayoutGroupBasicExample;
    }(React.Component));
    exports.LayoutGroupBasicExample = LayoutGroupBasicExample;
});
//# sourceMappingURL=LayoutGroup.Basic.Example.js.map