// #region Imports
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { IntlController } from '../../../../Intl/IntlController';
import { Appearanceable } from '../../../Behaviors/Appearanceable';
import { Disableable } from '../../../Behaviors/Disableable';
import { Variantable } from '../../../Behaviors/Variantable';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { CustomElement } from '../../Abstracts/CustomElement';
import { ButtonElement } from '../../Buttons/Button/ButtonElement';
import { SelectElement } from '../../Inputs/Select/SelectElement';
import { TextElement } from '../Text/TextElement';
import { PaginatorElementIntl } from './PaginatorElementIntl';
import { paginatorElementTemplate } from './PaginatorElementTemplate';
import { paginatorElementJoyStyle } from './Themes/PaginatorElement.Joy';
import { paginatorElementMemphisStyle } from './Themes/PaginatorElement.Memphis';
import { paginatorElementCosmopolitanStyle } from './Themes/PaginatorElement.Cosmopolitan';
import { Themeable } from '../../../Behaviors/Themeable';
// #endregion
/**
 * Paginator - A component that provides pagination controls for navigating through large datasets.
 *
 * @description The Paginator component is designed to allow users to navigate through paginated content. It typically includes controls like "Next", "Previous", and page numbers, enabling users to move between different pages of a dataset without needing to load everything at once.
 *
 * @name Paginator
 * @element mosaik-paginator
 * @category UI Components
 *
 * @slot previous - The slot for the "Previous" button in the paginator.
 * @slot next - The slot for the "Next" button in the paginator.
 * @slot pages - The slot for the page number buttons.
 *
 * @cssprop {unknown} --paginator-font-family - The font-family property for the paginator text.
 * @cssprop {unknown} --paginator-font-size - The font-size property for the paginator text.
 * @cssprop {unknown} --paginator-font-line-height - The line-height property for the paginator text.
 * @cssprop {unknown} --paginator-font-weight - The font-weight property for the paginator text.
 * @cssprop {unknown} --paginator-font-letter-spacing - The letter-spacing property for the paginator text.
 * @cssprop {unknown} --paginator-font-text-decoration - The text-decoration property for the paginator text.
 * @cssprop {unknown} --paginator-font-text-transform - The text-transform property for the paginator text.
 * @cssprop {unknown} --paginator-background-color - The background-color property for the paginator.
 * @cssprop {unknown} --paginator-border-color - The border-color property for the paginator.
 * @cssprop {unknown} --paginator-foreground-color - The foreground-color property for the paginator.
 * @cssprop {unknown} --paginator-border-width - The border-width property for the paginator.
 * @cssprop {unknown} --paginator-border-radius - The border-radius property for the paginator.
 * @cssprop {unknown} --paginator-border-style - The border-style property for the paginator.
 * @cssprop {unknown} --paginator-shadow - The shadow property for the paginator.
 * @cssprop {unknown} --paginator-gap - The gap property between paginator elements.
 *
 * @dependency {ButtonElement} - The Button element used for pagination controls.
 * @dependency {TextElement} - The Text element used for displaying page numbers.
 * @dependency {SelectElement} - The Select element used for selecting page sizes.
 *
 * @fires paginated - Called when the pagination changes.
 *
 * @example
 * ```html
 * <mosaik-paginator></mosaik-paginator>
 * ```
 *
 * @public
 */
let PaginatorElement = class PaginatorElement extends Themeable(Disableable(Variantable(Appearanceable(CustomElement)))) {
    // #region Fields
    _intl;
    _total;
    _size;
    _sizes;
    _showSizes;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._intl = new IntlController(this, {
            factory: () => new PaginatorElementIntl()
        });
        this._total = 0;
        this._size = 20;
        this._sizes = [20, 50, 100];
        this._showSizes = false;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `{@link is}` property.
     * The `{@link is}` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-paginator';
    }
    /**
     * Gets or sets the `total` property.
     *
     * @public
     * @attr
     */
    get total() {
        return this._total;
    }
    set total(value) {
        if (this._total !== value) {
            this._total = value;
            this.requestUpdate('total');
        }
    }
    /**
     * Gets or sets the `size` property.
     *
     * @public
     * @attr
     */
    get size() { return this._size; }
    set size(value) {
        if (this._size !== value) {
            this._size = value;
            this.requestUpdate('size');
        }
    }
    /**
     * Gets or sets the `sizes` property.
     *
     * @public
     * @attr
     */
    get sizes() {
        return this._sizes;
    }
    set sizes(value) {
        if (this._sizes !== value) {
            this._sizes = value;
            this.requestUpdate('sizes');
        }
    }
    /**
     * Gets or sets the `showSizes` property.
     *
     * @public
     * @attr
     */
    get showSizes() {
        return this._showSizes;
    }
    set showSizes(value) {
        if (this._showSizes !== value) {
            this._showSizes = value;
            this.requestUpdate('showSizes');
        }
    }
    /**
     * Returns the `intl` property.
     *
     * @public
     * @readonly
     */
    get intl() {
        return this._intl.intl;
    }
    // #endregion
    // #region Methods
    /**
     * Calculates the page buttons for pagination.
     *
     * @internal
     * @template
     * @param total - Total number of items.
     * @param size - Number of items per page.
     * @returns An array of page numbers.
     */
    calculatePages(total, size) {
        if (total <= 0 || size <= 0) {
            return [];
        }
        const totalPages = Math.ceil(total / size); // Calculate the total number of pages
        const pages = [];
        for (let i = 1; i <= totalPages; i++) {
            pages.push(i); // Add each page number to the array
        }
        return pages;
    }
};
__decorate([
    Attribute({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], PaginatorElement.prototype, "total", null);
__decorate([
    Attribute({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], PaginatorElement.prototype, "size", null);
__decorate([
    Attribute({ type: (Array) }),
    __metadata("design:type", Array),
    __metadata("design:paramtypes", [Array])
], PaginatorElement.prototype, "sizes", null);
__decorate([
    Attribute({ type: Boolean, useDefault: true }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], PaginatorElement.prototype, "showSizes", null);
PaginatorElement = __decorate([
    Component({
        selector: 'mosaik-paginator',
        template: paginatorElementTemplate,
        themes: {
            joy: paginatorElementJoyStyle,
            memphis: paginatorElementMemphisStyle,
            cosmopolitan: paginatorElementCosmopolitanStyle
        },
        imports: [
            ButtonElement,
            TextElement,
            SelectElement
        ]
    }),
    __metadata("design:paramtypes", [])
], PaginatorElement);
export { PaginatorElement };
//# sourceMappingURL=PaginatorElement.js.map