@slickgrid-universal/pagination-component 2.5.0 → 2.6.1

package/dist/commonjs/index.js

@@ -1,18 +1,18 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./slick-pagination.component"), exports);
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./slick-pagination.component"), exports);
 //# sourceMappingURL=index.js.map

package/dist/commonjs/slick-pagination.component.js

@@ -1,295 +1,295 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SlickPaginationComponent = void 0;
-const common_1 = require("@slickgrid-universal/common");
-const binding_1 = require("@slickgrid-universal/binding");
-class SlickPaginationComponent {
-    constructor(paginationService, pubSubService, sharedService, translaterService) {
-        var _a, _b, _c, _d, _e;
-        this.paginationService = paginationService;
-        this.pubSubService = pubSubService;
-        this.sharedService = sharedService;
-        this.translaterService = translaterService;
-        this._enableTranslate = false;
-        this._subscriptions = [];
-        this.firstButtonClasses = '';
-        this.lastButtonClasses = '';
-        this.prevButtonClasses = '';
-        this.nextButtonClasses = '';
-        // text translations (handled by i18n or by custom locale)
-        this.textItemsPerPage = 'items per page';
-        this.textItems = 'items';
-        this.textOf = 'of';
-        this.textPage = 'Page';
-        this._bindingHelper = new binding_1.BindingHelper();
-        this._bindingHelper.querySelectorPrefix = `.${this.gridUid} `;
-        this.currentPagination = this.paginationService.getFullPagination();
-        this._enableTranslate = (_b = (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.enableTranslate) !== null && _b !== void 0 ? _b : false;
-        if (this._enableTranslate && (!this.translaterService || !this.translaterService.translate)) {
-            throw new Error('[Slickgrid-Universal] requires a Translate Service to be installed and configured when the grid option "enableTranslate" is enabled.');
-        }
-        this.translatePaginationTexts();
-        if (this._enableTranslate && ((_c = this.pubSubService) === null || _c === void 0 ? void 0 : _c.subscribe)) {
-            const translateEventName = (_e = (_d = this.translaterService) === null || _d === void 0 ? void 0 : _d.eventName) !== null && _e !== void 0 ? _e : 'onLanguageChange';
-            this._subscriptions.push(this.pubSubService.subscribe(translateEventName, () => this.translatePaginationTexts()));
-        }
-        // Anytime the pagination is initialized or has changes,
-        // we'll copy the data into a local object so that we can add binding to this local object
-        this._subscriptions.push(this.pubSubService.subscribe('onPaginationRefreshed', paginationChanges => {
-            for (const key of Object.keys(paginationChanges)) {
-                this.currentPagination[key] = paginationChanges[key];
-            }
-            this.updatePageButtonsUsability();
-            const pageFromToElm = document.querySelector(`.${this.gridUid} span.page-info-from-to`);
-            if (pageFromToElm === null || pageFromToElm === void 0 ? void 0 : pageFromToElm.style) {
-                pageFromToElm.style.display = (this.currentPagination.totalItems === 0) ? 'none' : '';
-            }
-        }));
-    }
-    get availablePageSizes() {
-        return this.paginationService.availablePageSizes || [];
-    }
-    get dataFrom() {
-        return this.paginationService.dataFrom;
-    }
-    get dataTo() {
-        return this.paginationService.dataTo;
-    }
-    get itemsPerPage() {
-        return this.paginationService.itemsPerPage;
-    }
-    set itemsPerPage(count) {
-        this.paginationService.changeItemPerPage(count);
-    }
-    get pageCount() {
-        return this.paginationService.pageCount;
-    }
-    get pageNumber() {
-        return this.paginationService.pageNumber;
-    }
-    set pageNumber(_page) {
-        // the setter has to be declared but we won't use it, instead we will use the "changeToCurrentPage()" to only update the value after ENTER keydown event
-    }
-    get grid() {
-        return this.sharedService.slickGrid;
-    }
-    get gridOptions() {
-        return this.sharedService.gridOptions;
-    }
-    get gridUid() {
-        var _a, _b;
-        return (_b = (_a = this.grid) === null || _a === void 0 ? void 0 : _a.getUID()) !== null && _b !== void 0 ? _b : '';
-    }
-    get locales() {
-        var _a, _b;
-        // get locales provided by user in main file or else use default English locales via the Constants
-        return (_b = (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.locales) !== null && _b !== void 0 ? _b : common_1.Constants.locales;
-    }
-    get totalItems() {
-        return this.paginationService.totalItems;
-    }
-    get isLeftPaginationDisabled() {
-        return this.pageNumber === 1 || this.totalItems === 0;
-    }
-    get isRightPaginationDisabled() {
-        return this.pageNumber === this.pageCount || this.totalItems === 0;
-    }
-    dispose() {
-        // also dispose of all Subscriptions
-        this.pubSubService.unsubscribeAll(this._subscriptions);
-        this._bindingHelper.dispose();
-        this._paginationElement.remove();
-    }
-    renderPagination(gridParentContainerElm) {
-        const paginationElm = this.createPaginationContainer();
-        const divNavContainerElm = (0, common_1.createDomElement)('div', { className: 'slick-pagination-nav' });
-        const leftNavigationElm = this.createPageNavigation('Page navigation', [
-            { liClass: 'page-item seek-first', aClass: 'page-link icon-seek-first', ariaLabel: 'First Page' },
-            { liClass: 'page-item seek-prev', aClass: 'page-link icon-seek-prev', ariaLabel: 'Previous Page' },
-        ]);
-        const pageNumberSectionElm = this.createPageNumberSection();
-        const rightNavigationElm = this.createPageNavigation('Page navigation', [
-            { liClass: 'page-item seek-next', aClass: 'page-link icon-seek-next', ariaLabel: 'Next Page' },
-            { liClass: 'page-item seek-end', aClass: 'page-link icon-seek-end', ariaLabel: 'Last Page' },
-        ]);
-        paginationElm.appendChild(divNavContainerElm);
-        divNavContainerElm.appendChild(leftNavigationElm);
-        divNavContainerElm.appendChild(pageNumberSectionElm);
-        divNavContainerElm.appendChild(rightNavigationElm);
-        const paginationSettingsElm = this.createPaginationSettingsSection();
-        paginationElm.appendChild(divNavContainerElm);
-        paginationElm.appendChild(paginationSettingsElm);
-        this._paginationElement.appendChild(paginationElm);
-        if ((gridParentContainerElm === null || gridParentContainerElm === void 0 ? void 0 : gridParentContainerElm.appendChild) && this._paginationElement) {
-            gridParentContainerElm.appendChild(this._paginationElement);
-        }
-        this.renderPageSizes();
-        this.addBindings();
-        this.addEventListeners();
-        this.updatePageButtonsUsability();
-    }
-    /** Render and fill the Page Sizes <select> element */
-    renderPageSizes() {
-        const selectElm = document.querySelector(`.${this.gridUid} .items-per-page`);
-        if (selectElm && Array.isArray(this.availablePageSizes)) {
-            for (const option of this.availablePageSizes) {
-                selectElm.appendChild((0, common_1.createDomElement)('option', { value: `${option}`, text: `${option}` }));
-            }
-        }
-    }
-    /** Add some DOM Element bindings */
-    addBindings() {
-        this._bindingHelper.addElementBinding(this, 'firstButtonClasses', 'li.page-item.seek-first', 'className');
-        this._bindingHelper.addElementBinding(this, 'prevButtonClasses', 'li.page-item.seek-prev', 'className');
-        this._bindingHelper.addElementBinding(this, 'lastButtonClasses', 'li.page-item.seek-end', 'className');
-        this._bindingHelper.addElementBinding(this, 'nextButtonClasses', 'li.page-item.seek-next', 'className');
-        this._bindingHelper.addElementBinding(this.currentPagination, 'dataFrom', 'span.item-from', 'textContent');
-        this._bindingHelper.addElementBinding(this.currentPagination, 'dataTo', 'span.item-to', 'textContent');
-        this._bindingHelper.addElementBinding(this.currentPagination, 'totalItems', 'span.total-items', 'textContent');
-        this._bindingHelper.addElementBinding(this.currentPagination, 'pageCount', 'span.page-count', 'textContent');
-        this._bindingHelper.addElementBinding(this.currentPagination, 'pageNumber', 'input.page-number', 'value', 'change', this.changeToCurrentPage.bind(this));
-        this._bindingHelper.addElementBinding(this.currentPagination, 'pageSize', 'select.items-per-page', 'value');
-        // locale text changes
-        this._bindingHelper.addElementBinding(this, 'textItems', 'span.text-items', 'textContent');
-        this._bindingHelper.addElementBinding(this, 'textItemsPerPage', 'span.text-item-per-page', 'textContent');
-        this._bindingHelper.addElementBinding(this, 'textOf', 'span.text-of', 'textContent');
-        this._bindingHelper.addElementBinding(this, 'textPage', 'span.text-page', 'textContent');
-    }
-    /** Add some DOM Element event listeners */
-    addEventListeners() {
-        this._bindingHelper.bindEventHandler('.icon-seek-first', 'click', this.changeToFirstPage.bind(this));
-        this._bindingHelper.bindEventHandler('.icon-seek-end', 'click', this.changeToLastPage.bind(this));
-        this._bindingHelper.bindEventHandler('.icon-seek-next', 'click', this.changeToNextPage.bind(this));
-        this._bindingHelper.bindEventHandler('.icon-seek-prev', 'click', this.changeToPreviousPage.bind(this));
-        this._bindingHelper.bindEventHandler('select.items-per-page', 'change', (event) => { var _a, _b; return this.itemsPerPage = +((_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 0); });
-    }
-    changeToFirstPage(event) {
-        if (!this.isLeftPaginationDisabled) {
-            this.paginationService.goToFirstPage(event);
-        }
-    }
-    changeToLastPage(event) {
-        if (!this.isRightPaginationDisabled) {
-            this.paginationService.goToLastPage(event);
-        }
-    }
-    changeToNextPage(event) {
-        if (!this.isRightPaginationDisabled) {
-            this.paginationService.goToNextPage(event);
-        }
-    }
-    changeToPreviousPage(event) {
-        if (!this.isLeftPaginationDisabled) {
-            this.paginationService.goToPreviousPage(event);
-        }
-    }
-    changeToCurrentPage(pageNumber) {
-        this.paginationService.goToPageNumber(+pageNumber);
-    }
-    /** Translate all the texts shown in the UI, use ngx-translate service when available or custom locales when service is null */
-    translatePaginationTexts() {
-        var _a;
-        if (this._enableTranslate && ((_a = this.translaterService) === null || _a === void 0 ? void 0 : _a.translate)) {
-            const translationPrefix = (0, common_1.getTranslationPrefix)(this.gridOptions);
-            this.textItemsPerPage = this.translaterService.translate(`${translationPrefix}ITEMS_PER_PAGE`);
-            this.textItems = this.translaterService.translate(`${translationPrefix}ITEMS`);
-            this.textOf = this.translaterService.translate(`${translationPrefix}OF`);
-            this.textPage = this.translaterService.translate(`${translationPrefix}PAGE`);
-        }
-        else if (this.locales) {
-            this.textItemsPerPage = this.locales.TEXT_ITEMS_PER_PAGE || 'TEXT_ITEMS_PER_PAGE';
-            this.textItems = this.locales.TEXT_ITEMS || 'TEXT_ITEMS';
-            this.textOf = this.locales.TEXT_OF || 'TEXT_OF';
-            this.textPage = this.locales.TEXT_PAGE || 'TEXT_PAGE';
-        }
-    }
-    // --
-    // protected functions
-    // --------------------
-    /** Create the Pagination Container */
-    createPaginationContainer() {
-        const paginationContainerElm = (0, common_1.createDomElement)('div', {
-            id: 'pager', className: `slick-pagination-container ${this.gridUid} pager`,
-            style: { width: '100%' },
-        });
-        const paginationElm = (0, common_1.createDomElement)('div', { className: 'slick-pagination' });
-        paginationContainerElm.appendChild(paginationElm);
-        this._paginationElement = paginationContainerElm; // keep internal ref
-        return paginationElm;
-    }
-    createPageNavigation(navAriaLabel, liElements) {
-        const navElm = (0, common_1.createDomElement)('nav', { ariaLabel: navAriaLabel });
-        const ulElm = (0, common_1.createDomElement)('ul', { className: 'pagination' });
-        for (const li of liElements) {
-            const liElm = (0, common_1.createDomElement)('li', { className: li.liClass });
-            const aElm = (0, common_1.createDomElement)('a', { className: li.aClass });
-            aElm.setAttribute('aria-label', li.ariaLabel);
-            liElm.appendChild(aElm);
-            ulElm.appendChild(liElm);
-        }
-        navElm.appendChild(ulElm);
-        return navElm;
-    }
-    createPageNumberSection() {
-        const divElm = (0, common_1.createDomElement)('div', { className: 'slick-page-number' });
-        const spanTextPageElm = (0, common_1.createDomElement)('span', { className: 'text-page', textContent: 'Page' });
-        const input = (0, common_1.createDomElement)('input', {
-            type: 'text', className: 'form-control page-number',
-            value: '1', size: 1,
-            dataset: { test: 'page-number-input' },
-        });
-        input.setAttribute('aria-label', 'Page Number');
-        const spanTextOfElm = (0, common_1.createDomElement)('span', { className: 'text-of', textContent: 'of' });
-        const spanPageCountElm = (0, common_1.createDomElement)('span', { className: 'page-count', dataset: { test: 'page-count' } });
-        divElm.appendChild(spanTextPageElm);
-        divElm.appendChild(document.createTextNode(' '));
-        divElm.appendChild(input);
-        divElm.appendChild(document.createTextNode(' '));
-        divElm.appendChild(spanTextOfElm);
-        divElm.appendChild(document.createTextNode(' '));
-        divElm.appendChild(spanPageCountElm);
-        return divElm;
-    }
-    createPaginationSettingsSection() {
-        const spanContainerElm = (0, common_1.createDomElement)('span', { className: 'slick-pagination-settings' });
-        const selectElm = (0, common_1.createDomElement)('select', { id: 'items-per-page-label', className: 'items-per-page' });
-        selectElm.setAttribute('aria-label', 'Items per Page Select');
-        const spanItemPerPageElm = (0, common_1.createDomElement)('span', { className: 'text-item-per-page', textContent: 'items per page' });
-        const spanPaginationCount = (0, common_1.createDomElement)('span', { className: 'slick-pagination-count' });
-        const spanInfoFromToElm = (0, common_1.createDomElement)('span', { className: 'page-info-from-to' });
-        const spanItemFromElm = (0, common_1.createDomElement)('span', { className: 'item-from', dataset: { test: 'item-from' } });
-        spanItemFromElm.setAttribute('aria-label', 'Page Item From');
-        const spanItemToElm = (0, common_1.createDomElement)('span', { className: 'item-to', dataset: { test: 'item-to' } });
-        spanItemToElm.setAttribute('aria-label', 'Page Item To');
-        const spanOfElm = (0, common_1.createDomElement)('span', { className: 'text-of', textContent: 'of' });
-        const spanInfoTotalElm = (0, common_1.createDomElement)('span', { className: 'page-info-total-items' });
-        const spanTotalItem = (0, common_1.createDomElement)('span', { className: 'total-items', dataset: { test: 'total-items' } });
-        const spanTextItemsElm = (0, common_1.createDomElement)('span', { className: 'text-items', textContent: 'items' });
-        spanContainerElm.appendChild(selectElm);
-        spanContainerElm.appendChild(document.createTextNode(' '));
-        spanContainerElm.appendChild(spanItemPerPageElm);
-        spanContainerElm.appendChild(document.createTextNode(', '));
-        spanInfoFromToElm.appendChild(spanItemFromElm);
-        spanInfoFromToElm.appendChild(document.createTextNode('-'));
-        spanInfoFromToElm.appendChild(spanItemToElm);
-        spanInfoFromToElm.appendChild(document.createTextNode(' '));
-        spanInfoFromToElm.appendChild(spanOfElm);
-        spanInfoFromToElm.appendChild(document.createTextNode(' '));
-        spanPaginationCount.appendChild(spanInfoFromToElm);
-        spanContainerElm.appendChild(spanPaginationCount);
-        spanInfoTotalElm.appendChild(spanTotalItem);
-        spanInfoTotalElm.appendChild(document.createTextNode(' '));
-        spanInfoTotalElm.appendChild(spanTextItemsElm);
-        spanInfoTotalElm.appendChild(document.createTextNode(' '));
-        spanPaginationCount.appendChild(spanInfoTotalElm);
-        return spanContainerElm;
-    }
-    updatePageButtonsUsability() {
-        this.firstButtonClasses = this.isLeftPaginationDisabled ? 'page-item seek-first disabled' : 'page-item seek-first';
-        this.prevButtonClasses = this.isLeftPaginationDisabled ? 'page-item seek-prev disabled' : 'page-item seek-prev';
-        this.lastButtonClasses = this.isRightPaginationDisabled ? 'page-item seek-end disabled' : 'page-item seek-end';
-        this.nextButtonClasses = this.isRightPaginationDisabled ? 'page-item seek-next disabled' : 'page-item seek-next';
-    }
-}
-exports.SlickPaginationComponent = SlickPaginationComponent;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SlickPaginationComponent = void 0;
+const common_1 = require("@slickgrid-universal/common");
+const binding_1 = require("@slickgrid-universal/binding");
+class SlickPaginationComponent {
+    constructor(paginationService, pubSubService, sharedService, translaterService) {
+        var _a, _b, _c, _d, _e;
+        this.paginationService = paginationService;
+        this.pubSubService = pubSubService;
+        this.sharedService = sharedService;
+        this.translaterService = translaterService;
+        this._enableTranslate = false;
+        this._subscriptions = [];
+        this.firstButtonClasses = '';
+        this.lastButtonClasses = '';
+        this.prevButtonClasses = '';
+        this.nextButtonClasses = '';
+        // text translations (handled by i18n or by custom locale)
+        this.textItemsPerPage = 'items per page';
+        this.textItems = 'items';
+        this.textOf = 'of';
+        this.textPage = 'Page';
+        this._bindingHelper = new binding_1.BindingHelper();
+        this._bindingHelper.querySelectorPrefix = `.${this.gridUid} `;
+        this.currentPagination = this.paginationService.getFullPagination();
+        this._enableTranslate = (_b = (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.enableTranslate) !== null && _b !== void 0 ? _b : false;
+        if (this._enableTranslate && (!this.translaterService || !this.translaterService.translate)) {
+            throw new Error('[Slickgrid-Universal] requires a Translate Service to be installed and configured when the grid option "enableTranslate" is enabled.');
+        }
+        this.translatePaginationTexts();
+        if (this._enableTranslate && ((_c = this.pubSubService) === null || _c === void 0 ? void 0 : _c.subscribe)) {
+            const translateEventName = (_e = (_d = this.translaterService) === null || _d === void 0 ? void 0 : _d.eventName) !== null && _e !== void 0 ? _e : 'onLanguageChange';
+            this._subscriptions.push(this.pubSubService.subscribe(translateEventName, () => this.translatePaginationTexts()));
+        }
+        // Anytime the pagination is initialized or has changes,
+        // we'll copy the data into a local object so that we can add binding to this local object
+        this._subscriptions.push(this.pubSubService.subscribe('onPaginationRefreshed', paginationChanges => {
+            for (const key of Object.keys(paginationChanges)) {
+                this.currentPagination[key] = paginationChanges[key];
+            }
+            this.updatePageButtonsUsability();
+            const pageFromToElm = document.querySelector(`.${this.gridUid} span.page-info-from-to`);
+            if (pageFromToElm === null || pageFromToElm === void 0 ? void 0 : pageFromToElm.style) {
+                pageFromToElm.style.display = (this.currentPagination.totalItems === 0) ? 'none' : '';
+            }
+        }));
+    }
+    get availablePageSizes() {
+        return this.paginationService.availablePageSizes || [];
+    }
+    get dataFrom() {
+        return this.paginationService.dataFrom;
+    }
+    get dataTo() {
+        return this.paginationService.dataTo;
+    }
+    get itemsPerPage() {
+        return this.paginationService.itemsPerPage;
+    }
+    set itemsPerPage(count) {
+        this.paginationService.changeItemPerPage(count);
+    }
+    get pageCount() {
+        return this.paginationService.pageCount;
+    }
+    get pageNumber() {
+        return this.paginationService.pageNumber;
+    }
+    set pageNumber(_page) {
+        // the setter has to be declared but we won't use it, instead we will use the "changeToCurrentPage()" to only update the value after ENTER keydown event
+    }
+    get grid() {
+        return this.sharedService.slickGrid;
+    }
+    get gridOptions() {
+        return this.sharedService.gridOptions;
+    }
+    get gridUid() {
+        var _a, _b;
+        return (_b = (_a = this.grid) === null || _a === void 0 ? void 0 : _a.getUID()) !== null && _b !== void 0 ? _b : '';
+    }
+    get locales() {
+        var _a, _b;
+        // get locales provided by user in main file or else use default English locales via the Constants
+        return (_b = (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.locales) !== null && _b !== void 0 ? _b : common_1.Constants.locales;
+    }
+    get totalItems() {
+        return this.paginationService.totalItems;
+    }
+    get isLeftPaginationDisabled() {
+        return this.pageNumber === 1 || this.totalItems === 0;
+    }
+    get isRightPaginationDisabled() {
+        return this.pageNumber === this.pageCount || this.totalItems === 0;
+    }
+    dispose() {
+        // also dispose of all Subscriptions
+        this.pubSubService.unsubscribeAll(this._subscriptions);
+        this._bindingHelper.dispose();
+        this._paginationElement.remove();
+    }
+    renderPagination(gridParentContainerElm) {
+        const paginationElm = this.createPaginationContainer();
+        const divNavContainerElm = (0, common_1.createDomElement)('div', { className: 'slick-pagination-nav' });
+        const leftNavigationElm = this.createPageNavigation('Page navigation', [
+            { liClass: 'page-item seek-first', aClass: 'page-link icon-seek-first', ariaLabel: 'First Page' },
+            { liClass: 'page-item seek-prev', aClass: 'page-link icon-seek-prev', ariaLabel: 'Previous Page' },
+        ]);
+        const pageNumberSectionElm = this.createPageNumberSection();
+        const rightNavigationElm = this.createPageNavigation('Page navigation', [
+            { liClass: 'page-item seek-next', aClass: 'page-link icon-seek-next', ariaLabel: 'Next Page' },
+            { liClass: 'page-item seek-end', aClass: 'page-link icon-seek-end', ariaLabel: 'Last Page' },
+        ]);
+        paginationElm.appendChild(divNavContainerElm);
+        divNavContainerElm.appendChild(leftNavigationElm);
+        divNavContainerElm.appendChild(pageNumberSectionElm);
+        divNavContainerElm.appendChild(rightNavigationElm);
+        const paginationSettingsElm = this.createPaginationSettingsSection();
+        paginationElm.appendChild(divNavContainerElm);
+        paginationElm.appendChild(paginationSettingsElm);
+        this._paginationElement.appendChild(paginationElm);
+        if ((gridParentContainerElm === null || gridParentContainerElm === void 0 ? void 0 : gridParentContainerElm.appendChild) && this._paginationElement) {
+            gridParentContainerElm.appendChild(this._paginationElement);
+        }
+        this.renderPageSizes();
+        this.addBindings();
+        this.addEventListeners();
+        this.updatePageButtonsUsability();
+    }
+    /** Render and fill the Page Sizes <select> element */
+    renderPageSizes() {
+        const selectElm = document.querySelector(`.${this.gridUid} .items-per-page`);
+        if (selectElm && Array.isArray(this.availablePageSizes)) {
+            for (const option of this.availablePageSizes) {
+                selectElm.appendChild((0, common_1.createDomElement)('option', { value: `${option}`, text: `${option}` }));
+            }
+        }
+    }
+    /** Add some DOM Element bindings */
+    addBindings() {
+        this._bindingHelper.addElementBinding(this, 'firstButtonClasses', 'li.page-item.seek-first', 'className');
+        this._bindingHelper.addElementBinding(this, 'prevButtonClasses', 'li.page-item.seek-prev', 'className');
+        this._bindingHelper.addElementBinding(this, 'lastButtonClasses', 'li.page-item.seek-end', 'className');
+        this._bindingHelper.addElementBinding(this, 'nextButtonClasses', 'li.page-item.seek-next', 'className');
+        this._bindingHelper.addElementBinding(this.currentPagination, 'dataFrom', 'span.item-from', 'textContent');
+        this._bindingHelper.addElementBinding(this.currentPagination, 'dataTo', 'span.item-to', 'textContent');
+        this._bindingHelper.addElementBinding(this.currentPagination, 'totalItems', 'span.total-items', 'textContent');
+        this._bindingHelper.addElementBinding(this.currentPagination, 'pageCount', 'span.page-count', 'textContent');
+        this._bindingHelper.addElementBinding(this.currentPagination, 'pageNumber', 'input.page-number', 'value', 'change', this.changeToCurrentPage.bind(this));
+        this._bindingHelper.addElementBinding(this.currentPagination, 'pageSize', 'select.items-per-page', 'value');
+        // locale text changes
+        this._bindingHelper.addElementBinding(this, 'textItems', 'span.text-items', 'textContent');
+        this._bindingHelper.addElementBinding(this, 'textItemsPerPage', 'span.text-item-per-page', 'textContent');
+        this._bindingHelper.addElementBinding(this, 'textOf', 'span.text-of', 'textContent');
+        this._bindingHelper.addElementBinding(this, 'textPage', 'span.text-page', 'textContent');
+    }
+    /** Add some DOM Element event listeners */
+    addEventListeners() {
+        this._bindingHelper.bindEventHandler('.icon-seek-first', 'click', this.changeToFirstPage.bind(this));
+        this._bindingHelper.bindEventHandler('.icon-seek-end', 'click', this.changeToLastPage.bind(this));
+        this._bindingHelper.bindEventHandler('.icon-seek-next', 'click', this.changeToNextPage.bind(this));
+        this._bindingHelper.bindEventHandler('.icon-seek-prev', 'click', this.changeToPreviousPage.bind(this));
+        this._bindingHelper.bindEventHandler('select.items-per-page', 'change', (event) => { var _a, _b; return this.itemsPerPage = +((_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 0); });
+    }
+    changeToFirstPage(event) {
+        if (!this.isLeftPaginationDisabled) {
+            this.paginationService.goToFirstPage(event);
+        }
+    }
+    changeToLastPage(event) {
+        if (!this.isRightPaginationDisabled) {
+            this.paginationService.goToLastPage(event);
+        }
+    }
+    changeToNextPage(event) {
+        if (!this.isRightPaginationDisabled) {
+            this.paginationService.goToNextPage(event);
+        }
+    }
+    changeToPreviousPage(event) {
+        if (!this.isLeftPaginationDisabled) {
+            this.paginationService.goToPreviousPage(event);
+        }
+    }
+    changeToCurrentPage(pageNumber) {
+        this.paginationService.goToPageNumber(+pageNumber);
+    }
+    /** Translate all the texts shown in the UI, use ngx-translate service when available or custom locales when service is null */
+    translatePaginationTexts() {
+        var _a;
+        if (this._enableTranslate && ((_a = this.translaterService) === null || _a === void 0 ? void 0 : _a.translate)) {
+            const translationPrefix = (0, common_1.getTranslationPrefix)(this.gridOptions);
+            this.textItemsPerPage = this.translaterService.translate(`${translationPrefix}ITEMS_PER_PAGE`);
+            this.textItems = this.translaterService.translate(`${translationPrefix}ITEMS`);
+            this.textOf = this.translaterService.translate(`${translationPrefix}OF`);
+            this.textPage = this.translaterService.translate(`${translationPrefix}PAGE`);
+        }
+        else if (this.locales) {
+            this.textItemsPerPage = this.locales.TEXT_ITEMS_PER_PAGE || 'TEXT_ITEMS_PER_PAGE';
+            this.textItems = this.locales.TEXT_ITEMS || 'TEXT_ITEMS';
+            this.textOf = this.locales.TEXT_OF || 'TEXT_OF';
+            this.textPage = this.locales.TEXT_PAGE || 'TEXT_PAGE';
+        }
+    }
+    // --
+    // protected functions
+    // --------------------
+    /** Create the Pagination Container */
+    createPaginationContainer() {
+        const paginationContainerElm = (0, common_1.createDomElement)('div', {
+            id: 'pager', className: `slick-pagination-container ${this.gridUid} pager`,
+            style: { width: '100%' },
+        });
+        const paginationElm = (0, common_1.createDomElement)('div', { className: 'slick-pagination' });
+        paginationContainerElm.appendChild(paginationElm);
+        this._paginationElement = paginationContainerElm; // keep internal ref
+        return paginationElm;
+    }
+    createPageNavigation(navAriaLabel, liElements) {
+        const navElm = (0, common_1.createDomElement)('nav', { ariaLabel: navAriaLabel });
+        const ulElm = (0, common_1.createDomElement)('ul', { className: 'pagination' });
+        for (const li of liElements) {
+            const liElm = (0, common_1.createDomElement)('li', { className: li.liClass });
+            const aElm = (0, common_1.createDomElement)('a', { className: li.aClass });
+            aElm.setAttribute('aria-label', li.ariaLabel);
+            liElm.appendChild(aElm);
+            ulElm.appendChild(liElm);
+        }
+        navElm.appendChild(ulElm);
+        return navElm;
+    }
+    createPageNumberSection() {
+        const divElm = (0, common_1.createDomElement)('div', { className: 'slick-page-number' });
+        const spanTextPageElm = (0, common_1.createDomElement)('span', { className: 'text-page', textContent: 'Page' });
+        const input = (0, common_1.createDomElement)('input', {
+            type: 'text', className: 'form-control page-number',
+            value: '1', size: 1,
+            dataset: { test: 'page-number-input' },
+        });
+        input.setAttribute('aria-label', 'Page Number');
+        const spanTextOfElm = (0, common_1.createDomElement)('span', { className: 'text-of', textContent: 'of' });
+        const spanPageCountElm = (0, common_1.createDomElement)('span', { className: 'page-count', dataset: { test: 'page-count' } });
+        divElm.appendChild(spanTextPageElm);
+        divElm.appendChild(document.createTextNode(' '));
+        divElm.appendChild(input);
+        divElm.appendChild(document.createTextNode(' '));
+        divElm.appendChild(spanTextOfElm);
+        divElm.appendChild(document.createTextNode(' '));
+        divElm.appendChild(spanPageCountElm);
+        return divElm;
+    }
+    createPaginationSettingsSection() {
+        const spanContainerElm = (0, common_1.createDomElement)('span', { className: 'slick-pagination-settings' });
+        const selectElm = (0, common_1.createDomElement)('select', { id: 'items-per-page-label', className: 'items-per-page' });
+        selectElm.setAttribute('aria-label', 'Items per Page Select');
+        const spanItemPerPageElm = (0, common_1.createDomElement)('span', { className: 'text-item-per-page', textContent: 'items per page' });
+        const spanPaginationCount = (0, common_1.createDomElement)('span', { className: 'slick-pagination-count' });
+        const spanInfoFromToElm = (0, common_1.createDomElement)('span', { className: 'page-info-from-to' });
+        const spanItemFromElm = (0, common_1.createDomElement)('span', { className: 'item-from', dataset: { test: 'item-from' } });
+        spanItemFromElm.setAttribute('aria-label', 'Page Item From');
+        const spanItemToElm = (0, common_1.createDomElement)('span', { className: 'item-to', dataset: { test: 'item-to' } });
+        spanItemToElm.setAttribute('aria-label', 'Page Item To');
+        const spanOfElm = (0, common_1.createDomElement)('span', { className: 'text-of', textContent: 'of' });
+        const spanInfoTotalElm = (0, common_1.createDomElement)('span', { className: 'page-info-total-items' });
+        const spanTotalItem = (0, common_1.createDomElement)('span', { className: 'total-items', dataset: { test: 'total-items' } });
+        const spanTextItemsElm = (0, common_1.createDomElement)('span', { className: 'text-items', textContent: 'items' });
+        spanContainerElm.appendChild(selectElm);
+        spanContainerElm.appendChild(document.createTextNode(' '));
+        spanContainerElm.appendChild(spanItemPerPageElm);
+        spanContainerElm.appendChild(document.createTextNode(', '));
+        spanInfoFromToElm.appendChild(spanItemFromElm);
+        spanInfoFromToElm.appendChild(document.createTextNode('-'));
+        spanInfoFromToElm.appendChild(spanItemToElm);
+        spanInfoFromToElm.appendChild(document.createTextNode(' '));
+        spanInfoFromToElm.appendChild(spanOfElm);
+        spanInfoFromToElm.appendChild(document.createTextNode(' '));
+        spanPaginationCount.appendChild(spanInfoFromToElm);
+        spanContainerElm.appendChild(spanPaginationCount);
+        spanInfoTotalElm.appendChild(spanTotalItem);
+        spanInfoTotalElm.appendChild(document.createTextNode(' '));
+        spanInfoTotalElm.appendChild(spanTextItemsElm);
+        spanInfoTotalElm.appendChild(document.createTextNode(' '));
+        spanPaginationCount.appendChild(spanInfoTotalElm);
+        return spanContainerElm;
+    }
+    updatePageButtonsUsability() {
+        this.firstButtonClasses = this.isLeftPaginationDisabled ? 'page-item seek-first disabled' : 'page-item seek-first';
+        this.prevButtonClasses = this.isLeftPaginationDisabled ? 'page-item seek-prev disabled' : 'page-item seek-prev';
+        this.lastButtonClasses = this.isRightPaginationDisabled ? 'page-item seek-end disabled' : 'page-item seek-end';
+        this.nextButtonClasses = this.isRightPaginationDisabled ? 'page-item seek-next disabled' : 'page-item seek-next';
+    }
+}
+exports.SlickPaginationComponent = SlickPaginationComponent;
 //# sourceMappingURL=slick-pagination.component.js.map