import * as tslib_1 from "tslib";
import * as React from 'react';
import { ExampleCard, ComponentPage, PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base';
import { DialogBasicExample } from './examples/Dialog.Basic.Example';
import { DialogLargeHeaderExample } from './examples/Dialog.LargeHeader.Example';
import { DialogBlockingExample } from './examples/Dialog.Blocking.Example';
import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
import { DialogStatus } from './Dialog.checklist';
var DialogBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dialog/examples/Dialog.Basic.Example.tsx');
var DialogLargeHeaderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dialog/examples/Dialog.LargeHeader.Example.tsx');
var DialogBlockingExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dialog/examples/Dialog.Blocking.Example.tsx');
var DialogPage = /** @class */ (function (_super) {
    tslib_1.__extends(DialogPage, _super);
    function DialogPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    DialogPage.prototype.render = function () {
        return (React.createElement(ComponentPage, { title: "Dialog", componentName: "DialogExample", componentUrl: "https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Dialog", exampleCards: React.createElement("div", null,
                React.createElement(ExampleCard, { title: "Default Dialog", code: DialogBasicExampleCode },
                    React.createElement(DialogBasicExample, null)),
                React.createElement(ExampleCard, { title: "Dialog with large header and ChoiceGroup", code: DialogLargeHeaderExampleCode },
                    React.createElement("p", null, "Use this Dialog sparingly, when calling extra attention to the content. It can be used in situations where you want to teach the user something or notify them of an important change."),
                    React.createElement(DialogLargeHeaderExample, null)),
                React.createElement(ExampleCard, { title: "Blocking Dialog", code: DialogBlockingExampleCode },
                    React.createElement("p", null, "A blocking Dialog disables all other actions and commands on the page behind it. They should be used very sparingly, only when it is critical that the user makes a choice or provides information before they can proceed. Blocking Dialogs are generally used for irreversible or potentially destructive tasks."),
                    React.createElement(DialogBlockingExample, null))), propertiesTables: React.createElement(PropertiesTableSet, { sources: [require('!raw-loader!office-ui-fabric-react/src/components/Dialog/Dialog.types.ts')] }), overview: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Dialog/docs/DialogOverview.md')), bestPractices: React.createElement("div", null), dos: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Dialog/docs/DialogDos.md')), donts: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Dialog/docs/DialogDonts.md')), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus, tslib_1.__assign({}, DialogStatus)) }));
    };
    return DialogPage;
}(React.Component));
export { DialogPage };
//# sourceMappingURL=DialogPage.js.map