/*!
 *
 * carbon-angular v0.0.7 | pagination.component.js
 *
 * Copyright 2014, 2019 IBM
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0

 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


import { PaginationModel } from "./pagination.module";
import { Component, Input, Output, EventEmitter } from "@angular/core";
import { I18n } from "./../i18n/i18n.module";
import { ExperimentalService } from "./../experimental.module";
import { merge } from "./../utils/object";
/**
 * Use pagination when you have multiple pages of data to handle.
 *
 * [See demo](../../?path=/story/pagination--basic)
 *
 * ```html
 * <ibm-pagination [model]="model" (selectPage)="selectPage($event)"></ibm-pagination>
 * ```
 *
 * In your `selectPage()` method set the `model.currentPage` to selected page, _after_
 * you load the page.
 *
 * ```typescript
 * selectPage(page) {
 * 	// ... your code to load the page goes here
 *
 * 	this.model.currentPage = page;
 *
 * 	// ... anything you want to do after page selection changes goes here
 * }
 * ```
 *
 * <example-url>../../iframe.html?id=pagination--basic</example-url>
 */
var Pagination = /** @class */ (function () {
    function Pagination(i18n, experimental) {
        this.i18n = i18n;
        this.experimental = experimental;
        /**
         * Set to `true` for a loading pagination component.
         */
        this.skeleton = false;
        /**
         * Set to `true` to disable the backward/forward buttons.
         */
        this.disabled = false;
        /**
         * Set to `true` to disable the select box that changes the page.
         */
        this.pageInputDisabled = false;
        /**
         * Set to `true` if the total number of items is unknown.
         */
        this.pagesUnknown = false;
        this.pageSelectThreshold = 1000;
        /**
         * Options for items per page select
         *
         * A default array of options will be defined: [10, 20, 30, 40, 50]
         */
        this.itemsPerPageOptions = [10, 20, 30, 40, 50];
        /**
         * Emits the new page number.
         *
         * You should tie into this and update `model.currentPage` once the fresh
         * data is finally loaded.
         */
        this.selectPage = new EventEmitter();
        this.itemsPerPageSelectId = "pagination-select-items-per-page-" + Pagination.paginationCounter;
        this.currentPageSelectId = "pagination-select-current-page-" + Pagination.paginationCounter;
        this.itemsPerPageText = this.i18n.getOverridable("PAGINATION.ITEMS_PER_PAGE");
        this.optionsListText = this.i18n.getOverridable("PAGINATION.OPEN_LIST_OF_OPTIONS");
        this.backwardText = this.i18n.getOverridable("PAGINATION.BACKWARD");
        this.forwardText = this.i18n.getOverridable("PAGINATION.FORWARD");
        this.totalItemsText = this.i18n.getOverridable("PAGINATION.TOTAL_ITEMS");
        this.totalItemsUnknownText = this.i18n.getOverridable("PAGINATION.TOTAL_ITEMS_UNKNOWN");
        this.totalPagesText = this.i18n.getOverridable("PAGINATION.TOTAL_PAGES");
        this.pageText = this.i18n.getOverridable("PAGINATION.PAGE");
        this.ofLastPagesText = this.i18n.getOverridable("PAGINATION.OF_LAST_PAGES");
        this._pageOptions = [];
        Pagination.paginationCounter++;
    }
    Object.defineProperty(Pagination.prototype, "translations", {
        /**
         * Expects an object that contains some or all of:
         * ```
         * {
         *		"ITEMS_PER_PAGE": "Items per page:",
         *		"OPEN_LIST_OF_OPTIONS": "Open list of options",
         *		"BACKWARD": "Backward",
         *		"FORWARD": "Forward",
         *		"TOTAL_ITEMS": "{{start}}-{{end}} of {{total}} items",
         *		"TOTAL_PAGES": "{{current}} of {{last}} pages",
         *		"OF_LAST_PAGES": "of {{last}} pages"
         * }
         * ```
         */
        set: function (value) {
            var valueWithDefaults = merge(this.i18n.getMultiple("PAGINATION"), value);
            this.itemsPerPageText.override(valueWithDefaults.ITEMS_PER_PAGE);
            this.optionsListText.override(valueWithDefaults.OPEN_LIST_OF_OPTIONS);
            this.backwardText.override(valueWithDefaults.BACKWARD);
            this.forwardText.override(valueWithDefaults.FORWARD);
            this.totalItemsText.override(valueWithDefaults.TOTAL_ITEMS);
            this.totalItemsUnknownText.override(valueWithDefaults.TOTAL_ITEMS_UNKNOWN);
            this.totalPagesText.override(valueWithDefaults.TOTAL_PAGES);
            this.pageText.override(valueWithDefaults.PAGE);
            this.ofLastPagesText.override(valueWithDefaults.OF_LAST_PAGES);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Pagination.prototype, "itemsPerPage", {
        get: function () {
            return this.model.pageLength;
        },
        set: function (value) {
            this.model.pageLength = Number(value);
            this.currentPage = 1; // reset page
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Pagination.prototype, "currentPage", {
        get: function () {
            return this.model.currentPage;
        },
        set: function (value) {
            value = Number(value);
            // emits the value to allow the user to update current page
            // in the model once the page is loaded
            this.selectPage.emit(value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Pagination.prototype, "lastPage", {
        /**
         * The last page number to display in the pagination view.
         */
        get: function () {
            var last = Math.ceil(this.model.totalDataLength / this.model.pageLength);
            return last > 0 ? last : 1;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Pagination.prototype, "startItemIndex", {
        get: function () {
            return this.endItemIndex > 0 ? (this.currentPage - 1) * this.model.pageLength + 1 : 0;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Pagination.prototype, "endItemIndex", {
        get: function () {
            var projectedEndItemIndex = this.currentPage * this.model.pageLength;
            return projectedEndItemIndex < this.model.totalDataLength ? projectedEndItemIndex : this.model.totalDataLength;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Pagination.prototype, "previousPage", {
        /**
         * The previous page number to navigate to, from the current page.
         */
        get: function () {
            return this.currentPage <= 1 ? 1 : this.currentPage - 1;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Pagination.prototype, "nextPage", {
        /**
         * The next page number to navigate to, from the current page.
         */
        get: function () {
            var lastPage = this.lastPage;
            return this.currentPage >= lastPage ? lastPage : this.currentPage + 1;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Pagination.prototype, "isExperimental", {
        get: function () {
            return this.experimental.isExperimental;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Pagination.prototype, "pageOptions", {
        get: function () {
            if (this._pageOptions.length !== this.model.totalDataLength) {
                this._pageOptions = Array(Math.ceil(this.model.totalDataLength / this.itemsPerPage));
            }
            return this._pageOptions;
        },
        enumerable: true,
        configurable: true
    });
    Pagination.paginationCounter = 0;
    Pagination.decorators = [
        { type: Component, args: [{
                    selector: "ibm-pagination",
                    template: "\n\t<div\n\t\tclass=\"bx--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__left\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__left\">\n\t\t\t<label class=\"bx--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t{{itemsPerPageText.subject | async}}\n\t\t\t</label>\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--select__item-count': isExperimental\n\t\t\t\t\t}\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t\t<option\n\t\t\t\t\t\t\tclass=\"bx--select-option\"\n\t\t\t\t\t\t\t*ngFor=\"let option of itemsPerPageOptions\"\n\t\t\t\t\t\t\t[value]=\"option\">\n\t\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tinnerClass=\"bx--select__arrow\"\n\t\t\t\t\t\t[ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t\t</ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<span *ngIf=\"!pagesUnknown\" class=\"bx--pagination__text\">\n\t\t\t\t<span *ngIf=\"!isExperimental\">|&nbsp;</span>\n\t\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: model.totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"bx--pagination__text\">\n\t\t\t\t<span *ngIf=\"!isExperimental\">|&nbsp;</span>\n\t\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- right skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__right\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__right\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--pagination--inline': !isExperimental\n\t\t\t}\">\n\n\t\t\t<div *ngIf=\"!pageInputDisabled\" class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select__page-number' : isExperimental\n\t\t\t\t}\">\n\t\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"bx--label bx--visually-hidden\">{{itemsPerPageText.subject | async}}</label>\n\t\t\t\t\t<input\n\t\t\t\t\t\t*ngIf=\"pageOptions.length > pageSelectThreshold\"\n\t\t\t\t\t\tstyle=\"padding-right: 1rem; margin-right: 1rem;\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t\t[max]=\"pageOptions.length\"\n\t\t\t\t\t\tclass=\"bx--select-input\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t*ngIf=\"pageOptions.length <= pageSelectThreshold\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\tclass=\"bx--select-input\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t\t<option *ngFor=\"let page of pageOptions; let i = index;\" class=\"bx--select-option\" [value]=\"i + 1\">{{i + 1}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t\t*ngIf=\"pageOptions.length <= 1000\"\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tinnerClass=\"bx--select__arrow\"\n\t\t\t\t\t\t[ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t\t</ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<span *ngIf=\"!pageInputDisabled && !pagesUnknown\" class=\"bx--pagination__text\">\n\t\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pageInputDisabled && pagesUnknown\" class=\"bx--pagination__text\">\n\t\t\t\t{{pageText.subject | async}} {{currentPage}}\n\t\t\t</span>\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--backward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage <= 1 || disabled\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"backwardText.subject | async\"\n\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t[disabled]=\"(currentPage <= 1 || disabled ? true : null)\">\n\t\t\t\t<ibm-icon-caret-left16></ibm-icon-caret-left16>\n\t\t\t</button>\n\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--forward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage >= lastPage || disabled\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"forwardText.subject | async\"\n\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t[disabled]=\"(currentPage >= lastPage || disabled ? true : null)\">\n\t\t\t\t<ibm-icon-caret-right16></ibm-icon-caret-right16>\n\t\t\t</button>\n\t\t</div>\n\t</div>\n\t"
                },] },
    ];
    /** @nocollapse */
    Pagination.ctorParameters = function () { return [
        { type: I18n },
        { type: ExperimentalService }
    ]; };
    Pagination.propDecorators = {
        skeleton: [{ type: Input }],
        model: [{ type: Input }],
        disabled: [{ type: Input }],
        pageInputDisabled: [{ type: Input }],
        pagesUnknown: [{ type: Input }],
        pageSelectThreshold: [{ type: Input }],
        translations: [{ type: Input }],
        itemsPerPageOptions: [{ type: Input }],
        selectPage: [{ type: Output }]
    };
    return Pagination;
}());
export { Pagination };
//# sourceMappingURL=pagination.component.js.map