'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-d337cd8a.js');
const helpers = require('./helpers-fc4016d2.js');

const paginationNextPrevious = `<svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.08748 0L0.912476 1.175L4.72914 5L0.912476 8.825L2.08748 10L7.08748 5L2.08748 0Z" fill="currentColor"/>
</svg>
`;

const paginationFirstLast = `<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.1709 8.825L7.34589 5L11.1709 1.175L9.99589 0L4.99589 5L9.99589 10L11.1709 8.825ZM0.829224 0H2.49589V10H0.829224V0Z" fill="currentColour"/>
</svg>`;

const icPaginationCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{box-sizing:border-box;width:100%;display:flex;justify-content:center}nav{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}ic-button{cursor:pointer}ic-button.next-previous{--icon-width:var(--ic-space-xs);--icon-height:calc(var(--ic-space-xs) + var(--ic-space-xxxs));padding:0 var(--ic-space-xxs) 0 var(--ic-space-xxxs)}ic-button.first-last{--icon-width:calc(var(--ic-space-sm) + var(--ic-space-xxxs));--icon-height:calc(var(--ic-space-xs) + var(--ic-space-xxxs))}ic-button.first-last::part(button),ic-button.next-previous::part(button){color:var(--ic-pagination-chevron)}:host(.ic-pagination-monochrome) ic-button.first-last::part(button),:host(.ic-pagination-monochrome) ic-button.next-previous::part(button){color:var(--ic-pagination-chevron-monochrome)}ic-button.ic-button-disabled.first-last::part(button),ic-button.ic-button-disabled.next-previous::part(button),:host(.ic-pagination-monochrome) ic-button.ic-button-disabled.first-last::part(button),:host(.ic-pagination-monochrome) ic-button.ic-button-disabled.next-previous::part(button){color:var(--ic-pagination-chevron-disabled)}.disabled{color:var(--ic-color-text-disabled-mid);pointer-events:none;cursor:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.hide-current-page{display:none}.sr-only{position:absolute;left:-9999px}.sr-only:dir(rtl){right:-9999px}";
const IcPaginationStyle0 = icPaginationCss;

const Pagination = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.icPageChange = index.createEvent(this, "icPageChange", 7);
        this.endEllipsis = false;
        this.endItems = [];
        this.midItems = [];
        this.startEllipsis = false;
        this.startItems = [];
        /**
         * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
         */
        this.adjacentPageCount = 1;
        /**
         * The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
         */
        this.boundaryPageCount = 1;
        /**
         * The default page to display.
         */
        this.defaultPage = 1;
        /**
         * If `true`, the pagination will not allow interaction.
         */
        this.disabled = false;
        /**
         * If `true`, the current page of the simple pagination will not be displayed.
         */
        this.hideCurrentPage = false;
        /**
         * If `true`, the first and last page buttons will not be displayed.
         */
        this.hideFirstAndLastPageButton = false;
        /**
         * The label for the pagination item (applicable when simple pagination is being used).
         */
        this.label = "Page";
        /**
         * If `true`, the pagination will display as black in the light theme, and white in dark theme.
         */
        this.monochrome = false;
        /**
         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        /**
         * The type of pagination to be used.
         */
        this.type = "simple";
        /**
         * The current page displayed by the pagination.
         */
        this.currentPage = this.defaultPage;
        this.handleClickFirst = () => {
            this.currentPage = 1;
            this.icPageChange.emit({ value: this.currentPage });
        };
        this.handleClickPrevious = () => {
            this.currentPage--;
            this.icPageChange.emit({ value: this.currentPage });
        };
        this.handleClickNext = () => {
            this.currentPage++;
            this.icPageChange.emit({ value: this.currentPage });
        };
        this.handleClickLast = () => {
            this.currentPage = this.pages;
            this.icPageChange.emit({ value: this.currentPage });
        };
        // button rendering abstracted from component render methods for clarity
        this.firstButton = () => {
            return (index.h("ic-button", { id: "first-page-button", "aria-label": "Go to first page", theme: this.theme, onClick: this.handleClickFirst, class: "page-button first-last", disabled: this.currentPage === 1 || this.disabled, variant: "icon-tertiary", monochrome: this.theme == "light" || this.theme == "dark", innerHTML: paginationFirstLast }));
        };
        this.previousButton = () => {
            return (index.h("ic-button", { id: "previous-page-button", "aria-label": "Go to previous page", theme: this.theme, onClick: this.handleClickPrevious, class: "page-button next-previous flip", disabled: this.currentPage === 1 || this.disabled, variant: "icon-tertiary", monochrome: this.theme == "light" || this.theme == "dark", innerHTML: paginationNextPrevious }));
        };
        this.nextButton = () => {
            return (index.h("ic-button", { id: "next-page-button", "aria-label": "Go to next page", theme: this.theme, onClick: this.handleClickNext, class: "page-button next-previous", disabled: this.currentPage === this.pages || this.disabled, variant: "icon-tertiary", monochrome: this.theme == "light" || this.theme == "dark", innerHTML: paginationNextPrevious }));
        };
        this.lastButton = () => {
            return (index.h("ic-button", { id: "last-page-button", "aria-label": "Go to last page", theme: this.theme, onClick: this.handleClickLast, class: "page-button first-last flip", disabled: this.currentPage === this.pages || this.disabled, variant: "icon-tertiary", monochrome: this.theme == "light" || this.theme == "dark", innerHTML: paginationFirstLast }));
        };
        this.renderStartEllipsis = () => {
            return (index.h("ic-pagination-item", { theme: this.theme, monochrome: this.monochrome, type: "ellipsis", id: "start-ellipsis", disabled: this.disabled }));
        };
        this.renderEndEllipsis = () => {
            return (index.h("ic-pagination-item", { theme: this.theme, monochrome: this.monochrome, type: "ellipsis", id: "end-ellipsis", disabled: this.disabled }));
        };
        this.renderStartItems = () => {
            return this.startItems.map((page) => {
                return (index.h("ic-pagination-item", { theme: this.theme, monochrome: this.monochrome, selected: page === this.currentPage, id: `pagination-item-${page}`, type: "page", page: page, disabled: this.disabled }));
            });
        };
        this.renderEndItems = () => {
            return this.endItems.map((page) => {
                return (index.h("ic-pagination-item", { theme: this.theme, monochrome: this.monochrome, selected: page === this.currentPage, id: `pagination-item-${page}`, type: "page", page: page, disabled: this.disabled }));
            });
        };
        this.renderMiddleItems = () => {
            return this.midItems.map((page) => {
                return (index.h("ic-pagination-item", { theme: this.theme, monochrome: this.monochrome, selected: page === this.currentPage, id: `pagination-item-${page}`, type: "page", page: page, disabled: this.disabled }));
            });
        };
    }
    watchAdjacentPageCountHandler() {
        if (this.adjacentPageCount > 2) {
            this.adjacentPageCount = 2;
        }
    }
    watchBoundaryPageCountHandler() {
        if (this.boundaryPageCount > 2) {
            this.boundaryPageCount = 2;
        }
    }
    watchDisabledHandler() {
        helpers.removeDisabledFalse(this.disabled, this.el);
    }
    watchNumberPagesHandler() {
        this.watchPageChangeHandler();
    }
    watchTypeHandler() {
        this.watchPageChangeHandler();
    }
    watchPageChangeHandler() {
        if (this.type === "simple") {
            return;
        }
        this.startEllipsis = false;
        this.endEllipsis = false;
        this.startItems = [];
        this.endItems = [];
        this.midItems = [];
        const startItems = [];
        let startItemCount = 0;
        const endItems = [];
        let endStart = this.pages;
        const midItems = [];
        let midStart;
        let midEnd;
        let startEllipsis = false;
        let endEllipsis = false;
        if (this.pages <=
            this.boundaryPageCount * 2 + this.adjacentPageCount * 2 + 3) {
            this.startEllipsis = false;
            this.endEllipsis = false;
            for (let i = 1; i <= this.pages; i++) {
                startItems.push(i);
            }
            this.startItems = startItems;
            return;
        }
        startItemCount = this.boundaryPageCount === 0 ? 1 : this.boundaryPageCount;
        endStart =
            this.boundaryPageCount === 0
                ? this.pages
                : this.pages - this.boundaryPageCount + 1;
        if (this.currentPage <=
            this.adjacentPageCount + this.boundaryPageCount + 2) {
            startEllipsis = false;
            endEllipsis = true;
            let numItems = 2 * this.adjacentPageCount + 1;
            if (this.boundaryPageCount === 0) {
                numItems--;
            }
            midStart = startItemCount + 1;
            midEnd = midStart + numItems;
        }
        else {
            startEllipsis = true;
            if (this.currentPage >
                this.pages - (this.adjacentPageCount + this.boundaryPageCount + 2)) {
                let numItems = 2 * this.adjacentPageCount + 1;
                if (this.boundaryPageCount === 0) {
                    numItems--;
                }
                midEnd =
                    this.boundaryPageCount === 0
                        ? this.pages - 1
                        : this.pages - this.boundaryPageCount;
                midStart = midEnd - numItems;
            }
            else {
                endEllipsis = true;
                midStart = this.currentPage - this.adjacentPageCount;
                midEnd = this.currentPage + this.adjacentPageCount;
            }
        }
        //create array of start items
        if (this.boundaryPageCount > 0 ||
            (this.boundaryPageCount === 0 && startEllipsis === false)) {
            for (let i = 1; i <= startItemCount; i++) {
                startItems.push(i);
            }
        }
        //create array of end items
        if (this.boundaryPageCount > 0 ||
            (this.boundaryPageCount === 0 && endEllipsis === false)) {
            for (let i = endStart; i <= this.pages; i++) {
                endItems.push(i);
            }
        }
        //create array of mid items
        for (let i = midStart; i <= midEnd; i++) {
            midItems.push(i);
        }
        this.startEllipsis = startEllipsis;
        this.endEllipsis = endEllipsis;
        this.startItems = startItems;
        this.endItems = endItems;
        this.midItems = midItems;
    }
    componentWillLoad() {
        this.watchPageChangeHandler();
        this.watchBoundaryPageCountHandler();
        this.watchAdjacentPageCountHandler();
        helpers.removeDisabledFalse(this.disabled, this.el);
    }
    componentDidLoad() {
        helpers.onComponentRequiredPropUndefined([{ prop: this.pages, propName: "pages" }], "Pagination");
    }
    paginationItemClickHandler(ev) {
        const page = ev.detail.page;
        this.currentPage = page;
        this.icPageChange.emit({ value: this.currentPage });
    }
    /**
     * Sets the currently displayed page.
     * @param {number} page The page number to set as the current page
     */
    async setCurrentPage(page) {
        if (typeof page === "number" && page > 0 && page <= this.pages) {
            this.currentPage = page;
        }
        else {
            console.error("Current page must be a number greater than zero but less than or equal to the total number of pages");
        }
    }
    render() {
        const { type, currentPage, hideCurrentPage, disabled, hideFirstAndLastPageButton, label, theme, monochrome, } = this;
        return (index.h(index.Host, { key: '9f9c0ceb1629ebff96c677d7b4ad9995bbe480cd', class: {
                [`ic-theme-${theme}`]: theme !== "inherit",
                ["ic-pagination-monochrome"]: !!monochrome,
            } }, type === "simple" && (index.h("nav", { key: '4d24ed30438c6755a1717454ee83e2a1b58d93c5', class: {
                ["disabled"]: !!disabled,
            }, role: "navigation", "aria-label": "Pagination Navigation" }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), index.h("ic-pagination-item", { key: '784f99d1fa32d4f48c6de793707825333e45651a', theme: this.theme, monochrome: this.monochrome, type: "simple-current", page: currentPage, label: label, class: { ["hide-current-page"]: !!hideCurrentPage }, disabled: disabled }), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (index.h("nav", { key: 'ce6061fcee8e202cb895e2919525b64c6a1c1114', class: {
                ["disabled"]: !!disabled,
            }, role: "navigation", "aria-label": "Pagination Navigation" }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), this.renderStartItems(), this.startEllipsis && this.renderStartEllipsis(), this.renderMiddleItems(), this.endEllipsis && this.renderEndEllipsis(), this.renderEndItems(), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (index.h("span", { key: '4980f1fd9ebd31a5b8835876479e12a8a0f5d54d', class: "sr-only", "aria-live": "polite" }, "Page ", this.currentPage))));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "adjacentPageCount": ["watchAdjacentPageCountHandler"],
        "boundaryPageCount": ["watchBoundaryPageCountHandler"],
        "disabled": ["watchDisabledHandler"],
        "pages": ["watchNumberPagesHandler"],
        "type": ["watchTypeHandler"],
        "currentPage": ["watchPageChangeHandler"]
    }; }
};
Pagination.style = IcPaginationStyle0;

exports.ic_pagination = Pagination;

//# sourceMappingURL=ic-pagination.cjs.entry.js.map