@obliczeniowo/elementary/fesm2022/obliczeniowo-elementary-pagination.mjs

Library made in Angular version 20

import * as i0 from '@angular/core';
import { model, input, effect, computed, Input, HostBinding, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as i1 from '@obliczeniowo/elementary/buttons';
import { ButtonsModule } from '@obliczeniowo/elementary/buttons';
import * as i2 from '@obliczeniowo/elementary/input';
import { InputModule } from '@obliczeniowo/elementary/input';
import * as i3 from '@obliczeniowo/elementary/icons';
import { IconsModule } from '@obliczeniowo/elementary/icons';
import * as i4 from '@obliczeniowo/elementary/text-pipes';
import { TextPipesModule } from '@obliczeniowo/elementary/text-pipes';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

class PaginationComponent {
    /** Current selected page starting from 1 to totalPages */
    page = model(1);
    /** page size */
    size = model(20);
    /** total records */
    total = model(0);
    /**
     * en: translation key value for text inside component
     *
     * @example
     *
     * <obl-pagination [translation]="{ 'Page': 'Strona' }></obl-pagination>"
     */
    translations = input({});
    options = model({
        itemsCount: 4,
        nextPrevious: true,
        lastFirst: true,
        pageInput: true,
        of: true,
        total: false,
    });
    disabled = false;
    small;
    characters = 2;
    constructor() {
        effect(() => {
            this.page();
            this.setChars();
        });
    }
    get totalPages() {
        return Math.ceil(this.total() / this.size());
    }
    setChars() {
        setTimeout(() => {
            const length = this.page().toString().length;
            this.characters = (length > 2 && length) || 2;
        });
    }
    pages = computed(() => {
        const { page } = this;
        const { itemsCount } = this.options();
        let start = Math.max(page() - itemsCount, 1);
        const end = Math.min(start + itemsCount * 2, this.totalPages);
        if (this.totalPages > end - start && end === this.totalPages) {
            start = Math.max(end - (itemsCount * 2 + 1), 1);
        }
        return new Array(end - start + 1).fill(0).map((_, index) => start + index);
    });
    movePage(id) {
        const { page, size, total } = this;
        if (page() !== id) {
            page.set(id);
        }
        this.onChange({
            page: page(),
            size: size(),
            total: total(),
        });
        this.setChars();
    }
    changePage(event) {
        let page = event.target.value;
        if (page < 1) {
            page = 1;
            event.target.value = 1;
        }
        else if (page > this.totalPages) {
            page = this.totalPages;
            event.target.value = this.totalPages;
        }
        this.movePage(+page);
    }
    onChange = (value) => { };
    onTouched = () => { };
    writeValue(value) {
        this.page.set(value.page);
        this.size.set(value.size);
        this.total.set(value.total);
        this.options.set(value.options || this.options());
    }
    registerOnChange(onChange) {
        this.onChange = onChange;
    }
    registerOnTouched(onTouched) {
        this.onTouched = onTouched;
    }
    setDisabledState(disabled) {
        this.disabled = disabled;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: PaginationComponent, isStandalone: false, selector: "obl-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, translations: { classPropertyName: "translations", publicName: "translations", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", size: "sizeChange", total: "totalChange", options: "optionsChange" }, host: { properties: { "class.disabled": "this.disabled", "attr.small": "this.small" } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                multi: true,
                useExisting: PaginationComponent,
            },
        ], ngImport: i0, template: "@if (options().total) {\n  <span [attr.small]=\"small\">\n    {{ 'Total' | oblTranslation : translations() }} {{ total() }}\n  </span>\n}\n\n@if (totalPages > 1) {\n  @if (options().lastFirst) {\n    <button\n      oblButton\n      [attr.small]=\"small\"\n      [disabled]=\"page() === 1\"\n      (click)=\"movePage(1)\"\n    >\n      <obl-icon name=\"left-more\"></obl-icon>\n    </button>\n  }\n  @if (options().nextPrevious) {\n    <button\n      oblButton\n      [attr.small]=\"small\"\n      [disabled]=\"page() === 1\"\n      (click)=\"movePage(page() - 1)\"\n    >\n      <obl-icon name=\"left\"></obl-icon>\n    </button>\n  }\n\n  @for (p of pages(); track $index) {\n    <button\n      [attr.small]=\"small\"\n      [class.selected]=\"p === page()\"\n      oblButton\n      (click)=\"movePage(p)\"\n    >\n      {{ p }}\n    </button>\n  }\n\n  @if (options().nextPrevious) {\n    <button\n      [attr.small]=\"small\"\n      oblButton\n      [disabled]=\"page() === totalPages\"\n      (click)=\"movePage(page() + 1)\"\n    >\n      <obl-icon name=\"right\"></obl-icon>\n    </button>\n  }\n\n  @if (options().lastFirst) {\n    <button\n      [attr.small]=\"small\"\n      oblButton\n      [disabled]=\"page() === totalPages\"\n      (click)=\"movePage(totalPages)\"\n    >\n      <obl-icon name=\"right-more\"></obl-icon>\n    </button>\n  }\n\n  @if (options().pageInput) {\n    <obl-input-wrapper\n      [small]=\"small\"\n      [label]=\"'Page' | oblTranslation : translations()\"\n    >\n      @if (options().of) {\n        <ng-container suffix>\n          <span>\n            {{ 'of' | oblTranslation : translations() }} {{ totalPages }}\n          </span>\n        </ng-container>\n      }\n      <input\n        oblInput\n        [class.of]=\"options().of\"\n        [style.width.ch]=\"characters\"\n        [value]=\"page()\"\n        [min]=\"1\"\n        [max]=\"totalPages\"\n        type=\"number\"\n        (change)=\"changePage($event)\"\n        #pageInput\n      />\n    </obl-input-wrapper>\n  }\n}\n", styles: [":host{display:flex;align-items:center}:host>span{margin:10px 10px 0}:host>span[small=true]{margin-top:8px;font-size:small}:host button{margin-top:5px}:host button:not([small=true]){height:40px}obl-input-wrapper span{text-wrap:nowrap;padding:0 5px 0 0}.of{text-align:right}input:not(.of){padding-right:5px}\n"], dependencies: [{ kind: "directive", type: i1.ButtonDirective, selector: "oblButton, [oblButton]", inputs: ["oblButton", "icon", "blockWhenLoading", "loading", "toggle", "selected", "link", "target"], exportAs: ["oblButton"] }, { kind: "directive", type: i2.InputDirective, selector: "input[oblInput]", inputs: ["outlined"], exportAs: ["oblInput"] }, { kind: "component", type: i2.InputWrapperComponent, selector: "obl-input-wrapper", inputs: ["label", "display", "cancellable", "step", "errors", "translations", "labelAnimation", "small"], outputs: ["loaded"] }, { kind: "component", type: i3.IconComponent, selector: "obl-icon", inputs: ["name", "width"] }, { kind: "pipe", type: i4.TranslationPipe, name: "oblTranslation" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PaginationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'obl-pagination', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            multi: true,
                            useExisting: PaginationComponent,
                        },
                    ], standalone: false, template: "@if (options().total) {\n  <span [attr.small]=\"small\">\n    {{ 'Total' | oblTranslation : translations() }} {{ total() }}\n  </span>\n}\n\n@if (totalPages > 1) {\n  @if (options().lastFirst) {\n    <button\n      oblButton\n      [attr.small]=\"small\"\n      [disabled]=\"page() === 1\"\n      (click)=\"movePage(1)\"\n    >\n      <obl-icon name=\"left-more\"></obl-icon>\n    </button>\n  }\n  @if (options().nextPrevious) {\n    <button\n      oblButton\n      [attr.small]=\"small\"\n      [disabled]=\"page() === 1\"\n      (click)=\"movePage(page() - 1)\"\n    >\n      <obl-icon name=\"left\"></obl-icon>\n    </button>\n  }\n\n  @for (p of pages(); track $index) {\n    <button\n      [attr.small]=\"small\"\n      [class.selected]=\"p === page()\"\n      oblButton\n      (click)=\"movePage(p)\"\n    >\n      {{ p }}\n    </button>\n  }\n\n  @if (options().nextPrevious) {\n    <button\n      [attr.small]=\"small\"\n      oblButton\n      [disabled]=\"page() === totalPages\"\n      (click)=\"movePage(page() + 1)\"\n    >\n      <obl-icon name=\"right\"></obl-icon>\n    </button>\n  }\n\n  @if (options().lastFirst) {\n    <button\n      [attr.small]=\"small\"\n      oblButton\n      [disabled]=\"page() === totalPages\"\n      (click)=\"movePage(totalPages)\"\n    >\n      <obl-icon name=\"right-more\"></obl-icon>\n    </button>\n  }\n\n  @if (options().pageInput) {\n    <obl-input-wrapper\n      [small]=\"small\"\n      [label]=\"'Page' | oblTranslation : translations()\"\n    >\n      @if (options().of) {\n        <ng-container suffix>\n          <span>\n            {{ 'of' | oblTranslation : translations() }} {{ totalPages }}\n          </span>\n        </ng-container>\n      }\n      <input\n        oblInput\n        [class.of]=\"options().of\"\n        [style.width.ch]=\"characters\"\n        [value]=\"page()\"\n        [min]=\"1\"\n        [max]=\"totalPages\"\n        type=\"number\"\n        (change)=\"changePage($event)\"\n        #pageInput\n      />\n    </obl-input-wrapper>\n  }\n}\n", styles: [":host{display:flex;align-items:center}:host>span{margin:10px 10px 0}:host>span[small=true]{margin-top:8px;font-size:small}:host button{margin-top:5px}:host button:not([small=true]){height:40px}obl-input-wrapper span{text-wrap:nowrap;padding:0 5px 0 0}.of{text-align:right}input:not(.of){padding-right:5px}\n"] }]
        }], ctorParameters: () => [], propDecorators: { disabled: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['class.disabled']
            }], small: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['attr.small']
            }] } });

class PaginationModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: PaginationModule, declarations: [PaginationComponent], imports: [CommonModule,
            ButtonsModule,
            InputModule,
            IconsModule,
            TextPipesModule], exports: [PaginationComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PaginationModule, imports: [CommonModule,
            ButtonsModule,
            InputModule,
            IconsModule,
            TextPipesModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PaginationModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        PaginationComponent
                    ],
                    imports: [
                        CommonModule,
                        ButtonsModule,
                        InputModule,
                        IconsModule,
                        TextPipesModule
                    ],
                    exports: [
                        PaginationComponent
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { PaginationComponent, PaginationModule };
//# sourceMappingURL=obliczeniowo-elementary-pagination.mjs.map