import { __extends } from "tslib";
import * as React from 'react';
import { ExampleCard, ComponentPage, PropertiesTableSet } from '@uifabric/example-app-base';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { PaginationButtonsBasicExample } from './Pagination.Buttons.Basic.Example';
import { PaginationButtonsCustomizationExample } from './Pagination.Buttons.Customization.Example';
import { PaginationButtonsCustomizationRoundExample } from './Pagination.Buttons.Customization.Round.Example';
import { PaginationComboBoxExample } from './Pagination.ComboBox.Example';
var PaginationButtonsBasicExampleCode = require('!raw-loader!@fluentui/examples/src/experiments/Pagination/Pagination.Buttons.Basic.Example.tsx');
var PaginationButtonsCustomizationExampleCode = require('!raw-loader!@fluentui/examples/src/experiments/Pagination/Pagination.Buttons.Customization.Example.tsx');
var PaginationButtonsCustomizationRoundExampleCode = require('!raw-loader!@fluentui/examples/src/experiments/Pagination/Pagination.Buttons.Customization.Round.Example.tsx');
var PaginationComboBoxExampleCode = require('!raw-loader!@fluentui/examples/src/experiments/Pagination/Pagination.ComboBox.Example.tsx');
var PaginationPage = /** @class */ (function (_super) {
    __extends(PaginationPage, _super);
    function PaginationPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    PaginationPage.prototype.render = function () {
        return (React.createElement(ComponentPage, { title: "Pagination", componentName: "PaginationExample", exampleCards: React.createElement("div", null,
                React.createElement(ExampleCard, { title: "Pagination with combo box", code: PaginationComboBoxExampleCode },
                    React.createElement(PaginationComboBoxExample, null)),
                React.createElement(ExampleCard, { title: "Pagination with buttons", code: PaginationButtonsBasicExampleCode },
                    React.createElement(PaginationButtonsBasicExample, null)),
                React.createElement(ExampleCard, { title: "Pagination with buttons without the visible item label", code: PaginationButtonsCustomizationExampleCode },
                    React.createElement(PaginationButtonsCustomizationExample, null)),
                React.createElement(ExampleCard, { title: "Pagination with buttons and round background", code: PaginationButtonsCustomizationRoundExampleCode },
                    React.createElement(PaginationButtonsCustomizationRoundExample, null))), propertiesTables: React.createElement(PropertiesTableSet, { sources: [
                    require('!raw-loader!@uifabric/experiments/src/components/Pagination/Pagination.types.ts'),
                ] }), overview: React.createElement("div", null,
                React.createElement("p", null, "Pagination control"),
                React.createElement("p", null, "This control provides a customizable pagination component that can be used to achieve specific design requirement.There are two design options: with a list of buttons, with combobox"),
                React.createElement("p", null,
                    "For cases when your application supports theming, Pagination component is equipped with everything you need to just load the custom theme to the application, and as long as the color palette you provide has an override for the",
                    ' ',
                    React.createElement(Link, { href: "https://developer.microsoft.com/en-us/fluentui#/styles/colors" },
                        React.createElement("code", null, "Fabric colors")),
                    ' ',
                    "used in Pagination, everything should be ok. If no theming is supported, then follow the example showing the use of the ",
                    React.createElement("code", null, "styles"),
                    " prop.")), isHeaderVisible: this.props.isHeaderVisible }));
    };
    return PaginationPage;
}(React.Component));
export { PaginationPage };
//# sourceMappingURL=PaginationPage.js.map