import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BdVwMG9u.js';
import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
import { B as BEM } from './bem-ByiN-QjD.js';
import { b as balBreakpoints } from './breakpoints.subject-C32mP6rF.js';
import { d as defaultConfig } from './config.default-RE8-gLMQ.js';
import { L as ListenToBreakpoints } from './breakpoints.decorator-Da-lbVYy.js';
import { L as ListenToConfig } from './config.decorator-3bfyZ-0Y.js';
import './helpers-BNj87EbG.js';
import './browser-B1u-Mq75.js';
import './config.utils-B7jugjyM.js';
import './device-TtMibDFL.js';
import './listener-CClDIhvK.js';
import './tokens.esm-C22U88Bg.js';
import './log-CwssmmaV.js';

const i18nControlLabel = {
    de: {
        left: 'Vorherige Seite',
        right: 'Nächste Seite',
    },
    en: {
        left: 'Previous Page',
        right: 'Next Page',
    },
    fr: {
        left: 'Page précédente',
        right: 'Page suivante',
    },
    it: {
        left: 'Pagina precedente',
        right: 'Pagina successiva',
    },
    nl: {
        left: 'Vorige pagina',
        right: 'Volgende pagina',
    },
    es: {
        left: 'Página anterior',
        right: 'Página siguiente',
    },
    pl: {
        left: 'Poprzednia strona',
        right: 'Następna strona',
    },
    pt: {
        left: 'Página anterior',
        right: 'Próxima página',
    },
    sv: {
        left: 'Föregående sida',
        right: 'Nästa sida',
    },
    fi: {
        left: 'Edellinen sivu',
        right: 'Seuraava sivu',
    },
};

function generatePaginationControl(value, totalPages, pageRange) {
    const paginationArray = [];
    if (value > totalPages || value < 0) {
        value = 1;
    }
    if (totalPages <= 0) {
        totalPages = 10;
    }
    if (pageRange < 0) {
        pageRange = 2;
    }
    const numberOfPages = 5 + pageRange * 2;
    if (totalPages <= numberOfPages) {
        for (let i = 1; i <= totalPages; i++) {
            paginationArray.push({
                type: 'page',
                label: i.toString(),
                active: i === value,
            });
        }
    }
    else {
        if (value <= numberOfPages - 2 - pageRange) {
            for (let i = 1; i <= numberOfPages - 2; i++) {
                paginationArray.push({
                    type: 'page',
                    label: i.toString(),
                    active: i === value,
                });
            }
            paginationArray.push({ type: 'dots', label: '...', active: false });
            paginationArray.push({
                type: 'page',
                label: totalPages.toString(),
                active: false,
            });
        }
        else if (value >= totalPages - 3) {
            paginationArray.push({
                type: 'page',
                label: '1',
                active: false,
            });
            paginationArray.push({ type: 'dots', label: '...', active: false });
            for (let i = totalPages - numberOfPages + 3; i <= totalPages; i++) {
                paginationArray.push({
                    type: 'page',
                    label: i.toString(),
                    active: i === value,
                });
            }
        }
        else {
            paginationArray.push({
                type: 'page',
                label: '1',
                active: false,
            });
            paginationArray.push({ type: 'dots', label: '...', active: false });
            const page = Number(value);
            for (let i = page - pageRange; i <= page + pageRange; i++) {
                paginationArray.push({
                    type: 'page',
                    label: i.toString(),
                    active: i === value,
                });
            }
            paginationArray.push({ type: 'dots', label: '...', active: false });
            paginationArray.push({
                type: 'page',
                label: totalPages.toString(),
                active: false,
            });
        }
    }
    return paginationArray;
}

const balPaginationCss = ":root{--bal-pagination-small-background:var(--bal-color-grey);--bal-pagination-small-radius:var(--bal-radius-normal);--bal-pagination-tabs-background:var(--bal-color-white);--bal-pagination-tabs-shadow:var(--bal-shadow-normal);--bal-pagination-tabs-radius:var(--bal-radius-large);--bal-pagination-dot-radius:var(--bal-radius-rounded);--bal-pagination-dot-background-active:var(--bal-color-primary);--bal-pagination-dot-background-inactive:var(--bal-color-white)}.bal-pagination{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block}.bal-pagination--is-sticky{position:-webkit-sticky;position:sticky;z-index:var(--bal-z-index-sticky)}.bal-pagination__nav{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;text-align:center}.bal-pagination__nav--align-start{-ms-flex-pack:start;justify-content:flex-start}.bal-pagination__nav--align-end{-ms-flex-pack:end;justify-content:flex-end}.bal-pagination__nav--context-small{padding-top:1rem}.bal-pagination__nav__pagination-previous{-ms-flex-order:1;order:1}.bal-pagination__nav__pagination-previous--context-small[disabled] button:hover{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.bal-pagination__nav__pagination-next{-ms-flex-order:3;order:3}.bal-pagination__nav__pagination-next--context-small[disabled] button:hover{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.bal-pagination__nav__pagination-list{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:4px;padding-left:8px;padding-right:8px;-ms-flex-order:2;order:2;width:unset;text-align:center}.bal-pagination__nav__pagination-list>span{font-weight:var(--bal-font-weight-bold)}@media screen and (min-width: 769px),print{.bal-pagination__nav__pagination-list{gap:8px}}@media screen and (min-width: 1024px){.bal-pagination__nav__pagination-list{gap:8px}}.bal-pagination__nav__pagination-list--context-small{gap:8px;max-width:88px;min-width:63px;min-height:1.25rem;margin:0 20px 0 !important;background:var(--bal-pagination-small-background);border-radius:var(--bal-pagination-small-radius)}.bal-pagination__nav__pagination-list--context-tabs{-ms-flex-positive:1;flex-grow:1;padding:8px;background:var(--bal-pagination-tabs-background);-webkit-box-shadow:var(--bal-pagination-tabs-shadow);box-shadow:var(--bal-pagination-tabs-shadow);border-radius:var(--bal-pagination-tabs-radius)}.bal-pagination__nav__pagination-list__dot{cursor:pointer;height:8px;width:8px;gap:30px;border-radius:var(--bal-pagination-dot-radius);display:block}.bal-pagination__nav__pagination-list__dot--active{background-color:var(--bal-pagination-dot-background-active)}.bal-pagination__nav__pagination-list__dot--inactive{background-color:var(--bal-pagination-dot-background-inactive)}.bal-pagination__nav__pagination-list__more{width:2rem}@media screen and (min-width: 769px),print{.bal-pagination__nav__pagination-list__more{width:2rem}}@media screen and (min-width: 1024px){.bal-pagination__nav__pagination-list__more{width:3rem}}.bal-pagination__nav__pagination-list__more>span{display:inline;font-family:var(--bal-text-line-height-title);font-weight:700}.bal-pagination__nav__pagination-list__more--disabled{color:var(--bal-color-text-grey)}.bal-pagination__nav__pagination-list__tab{-ms-flex:1;flex:1}.bal-pagination__nav__pagination-list.is-disabled li{pointer-events:none}.bal-pagination__nav__pagination-list button.is-disabled.is-text{background:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}";

const Pagination = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.balChangeEventEmitter = createEvent(this, "balChange");
        this._value = 1;
        this.isMobile = balBreakpoints.isMobile;
        this.language = defaultConfig.language;
        /**
         * Align the buttons to start, center or end
         */
        this.align = '';
        /**
         * Size of the buttons
         */
        this.size = '';
        /**
         * Defines the layout of the pagination
         */
        this.interface = '';
        /**
         * Disables component
         */
        this.disabled = false;
        /**
         * Current selected page
         */
        this.value = 1;
        /**
         * The total amount of pages
         */
        this.totalPages = 1;
        /**
         * Specify the max visible pages before and after the selected page
         */
        this.pageRange = 2;
        /**
         * If 'true, the pagination will be sticky to the top
         */
        this.sticky = false;
        /**
         * If sticky, the top position will be determined by this value
         */
        this.top = 0;
    }
    valueChanged(newValue) {
        this._value = newValue;
    }
    topValueChanged(newValue) {
        if (this.sticky) {
            this.el.style.top = `${newValue}px`;
        }
    }
    componentWillLoad() {
        this._value = this.value;
        this.topValueChanged(this.top);
    }
    breakpointListener(breakpoints) {
        this.isMobile = breakpoints.mobile;
    }
    /**
     * Go to the next page
     */
    async next() {
        if (this._value < this.totalPages) {
            this._value = this._value + 1;
            this.balChangeEventEmitter.emit(this._value);
        }
    }
    /**
     * Go to the previous page
     */
    async previous() {
        if (this._value !== 1) {
            this._value = this._value - 1;
            this.balChangeEventEmitter.emit(this._value);
        }
    }
    /**
     * @internal define config for the component
     */
    async configChanged(state) {
        this.language = state.language;
    }
    selectPage(pageNumber) {
        this._value = pageNumber;
        this.balChangeEventEmitter.emit(this._value);
    }
    getItems(pageRange = 2) {
        const controls = generatePaginationControl(this._value, this.totalPages, pageRange);
        return controls.map((control) => {
            if (control.type === 'page') {
                return this.renderPageElement(Number(control.label));
            }
            else {
                return this.renderEllipsisElement();
            }
        });
    }
    renderEllipsisElement() {
        const more = BEM.block('pagination').element('nav').element('pagination-list').element('more');
        return (h("li", { "aria-hidden": 'true' }, h("div", { class: Object.assign(Object.assign({}, more.class()), more.modifier('disabled').class(this.disabled)) }, h("span", null, "\u2026"))));
    }
    renderPageElement(pageNumber) {
        const isActive = this._value === pageNumber;
        const dot = BEM.block('pagination').element('nav').element('pagination-list').element('dot');
        if (this.interface === 'small') {
            return (h("li", null, h("span", { role: "button", "aria-current": isActive ? 'true' : undefined, class: Object.assign(Object.assign(Object.assign({}, dot.class()), dot.modifier('active').class(isActive)), dot.modifier('inactive').class(!isActive)), "aria-label": pageNumber, onClick: () => this.selectPage(pageNumber) })));
        }
        return (h("li", null, h("button", { class: {
                'button': true,
                'is-square': true,
                'is-primary': isActive,
                'is-text': !isActive,
                'is-disabled': this.disabled,
                'is-small': this.isMobile || this.size === 'small',
            }, "aria-current": isActive ? 'true' : undefined, onClick: () => this.selectPage(pageNumber), "data-testid": "bal-pagination-page-number" }, pageNumber)));
    }
    render() {
        const mobileItems = this.getItems(1);
        const tabletItems = this.getItems(this.pageRange);
        const block = BEM.block('pagination');
        const elNav = block.element('nav');
        const elPrevious = elNav.element('pagination-previous');
        const elNext = elNav.element('pagination-next');
        const elList = elNav.element('pagination-list');
        const isSmall = this.interface === 'small';
        const buttonColor = isSmall ? 'is-link' : 'is-text';
        const buttonSize = isSmall || this.size === 'small' || this.isMobile ? 'is-small' : '';
        const flat = isSmall;
        const leftControlTitle = i18nControlLabel[this.language].left;
        const rightControlTitle = i18nControlLabel[this.language].right;
        const hasBasicNavigationButtons = this.interface === '' || (isSmall && this.totalPages <= 5);
        const SmallWithText = () => (h("span", { key: '6851055924de8b04d1c2426851296fc43de9d5a8', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: '3c7b45ffc1b9844a54b05455444fc27f0947ed23' }, this._value), ' / ' + this.totalPages));
        const PaginationTablet = () => (h("ul", { key: 'ac07986c347c110d113f46ceff2cb77ced99c5da', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
        const PaginationMobile = () => (h("ul", { key: '9b83d79dd7bb63cfeb8d98ff940f2a91c9db72c8', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
        return (h(Host, { key: 'c9f4756500a4f05b3d4756c0c568d6e7d930292c', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: '463f770907d3b73651eb525c951870d53afb3147', class: Object.assign(Object.assign(Object.assign({}, elNav.class()), elNav.modifier(`context-${this.interface}`).class(this.interface !== '')), elNav.modifier(`align-${this.align}`).class(this.align !== '')), role: "navigation", "aria-label": "pagination" }, !this.disabled ? (h("button", { class: Object.assign(Object.assign({ 'button': true, 'is-square': true, 'is-disabled': this._value < 2, 'is-flat': flat, [buttonColor]: true, [buttonSize]: true }, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, h("bal-icon", { name: "nav-go-left", size: "small", disabled: this._value < 2 }))) : (''), !this.disabled ? (h("button", { class: Object.assign(Object.assign({ 'button': true, 'is-square': true, 'is-disabled': this._value === this.totalPages, 'is-flat': flat, [buttonColor]: true, [buttonSize]: true }, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, h("bal-icon", { name: "nav-go-right", size: "small", disabled: this._value === this.totalPages }))) : (''), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "value": ["valueChanged"],
        "top": ["topValueChanged"]
    }; }
};
__decorate([
    ListenToBreakpoints(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], Pagination.prototype, "breakpointListener", null);
__decorate([
    ListenToConfig(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", Promise)
], Pagination.prototype, "configChanged", null);
Pagination.style = balPaginationCss;

export { Pagination as bal_pagination };
