"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var ComboBox_Basic_Example_1 = require("./examples/ComboBox.Basic.Example");
var ComboBox_CustomStyled_Example_1 = require("./examples/ComboBox.CustomStyled.Example");
var ComponentStatus_1 = require("../../demo/ComponentStatus/ComponentStatus");
var ComboBox_checklist_1 = require("./ComboBox.checklist");
var ComboBoxBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.Basic.Example.tsx');
var ComboBoxCustomStyledExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.CustomStyled.Example.tsx');
var ComboBoxPage = /** @class */ (function (_super) {
    tslib_1.__extends(ComboBoxPage, _super);
    function ComboBoxPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ComboBoxPage.prototype.render = function () {
        return (React.createElement(example_app_base_1.ComponentPage, { title: 'ComboBox', componentName: 'ComboBoxExample', exampleCards: React.createElement("div", null,
                React.createElement(example_app_base_1.ExampleCard, { title: 'ComboBox', code: ComboBoxBasicExampleCode },
                    React.createElement(ComboBox_Basic_Example_1.ComboBoxBasicExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'ComboBoxCustomStyled', code: ComboBoxCustomStyledExampleCode },
                    React.createElement(ComboBox_CustomStyled_Example_1.ComboBoxCustomStyledExample, null))), allowNativeProps: true, propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts')
                ] }), overview: React.createElement("div", null,
                React.createElement("p", null, "A ComboBox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input (unless allowFreeform and autoComplete are both false). They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed if autoComplete and/or allowFreeform are true, the user can select a new value by typing.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Use a ComboBox when there are multiple choices that can be collapsed under one title. Or if the list of items is long or when space is constrained."),
                    React.createElement("li", null, "ComboBoxs contain shortened statements or words."),
                    React.createElement("li", null, "Use a ComboBox when the selected option is more important than the alternatives (in contrast to radio buttons where all the choices are visible putting more emphasis on the other options)."))), donts: React.createElement("div", null), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, ComboBox_checklist_1.ComboBoxStatus)) }));
    };
    return ComboBoxPage;
}(React.Component));
exports.ComboBoxPage = ComboBoxPage;
//# sourceMappingURL=ComboBoxPage.js.map