import { __extends } from "tslib";
import * as React from 'react';
import { Pagination } from '@fluentui/react-experiments/lib/Pagination';
var PaginationButtonsCustomizationRoundExample = /** @class */ (function (_super) {
    __extends(PaginationButtonsCustomizationRoundExample, _super);
    function PaginationButtonsCustomizationRoundExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onPageChange = function (index) {
            _this.setState({
                selectedPageIndex: index,
            });
        };
        _this.state = { selectedPageIndex: 0 };
        return _this;
    }
    PaginationButtonsCustomizationRoundExample.prototype.render = function () {
        return (React.createElement(Pagination, { selectedPageIndex: this.state.selectedPageIndex, pageCount: 27, itemsPerPage: 10, totalItemCount: 268, format: 'buttons', previousPageAriaLabel: 'previous page', nextPageAriaLabel: 'next page', firstPageAriaLabel: 'first page', lastPageAriaLabel: 'last page', pageAriaLabel: 'page', selectedAriaLabel: 'selected', onPageChange: this._onPageChange, styles: {
                previousNextPage: {
                    color: '#0078d4',
                },
                pageNumber: {
                    width: '32px',
                    height: '32px',
                    textAlign: 'center',
                    selectors: {
                        ':hover': {
                            borderRadius: '16px',
                        },
                        '&[aria-selected=true]': {
                            backgroundColor: '#0078d4',
                            fontWeight: 'bold',
                            borderRadius: '16px',
                            color: 'white',
                        },
                        '&:hover[aria-selected=true]': {
                            backgroundColor: '#0078d4',
                            color: 'white',
                        },
                    },
                },
            } }));
    };
    return PaginationButtonsCustomizationRoundExample;
}(React.Component));
export { PaginationButtonsCustomizationRoundExample };
//# sourceMappingURL=Pagination.Buttons.Customization.Round.Example.js.map