@gravionlabs/helix-core 22.0.0

package/fesm2022/gravionlabs-helix-core-paginator.mjs

@@ -0,0 +1,670 @@
+export * from '@gravionlabs/helix-core/types/paginator';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, inject, input, numberAttribute, booleanAttribute, model, output, contentChild, contentChildren, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i4 from '@gravionlabs/helix-core/api';
+import { HelixTemplate, SharedModule } from '@gravionlabs/helix-core/api';
+import { BaseComponent, PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
+import * as i1 from '@gravionlabs/helix-core/bind';
+import { Bind } from '@gravionlabs/helix-core/bind';
+import { Select } from '@gravionlabs/helix-core/select';
+import { AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleLeftIcon, AngleRightIcon } from '@gravionlabs/helix-core/icons';
+import { InputNumber } from '@gravionlabs/helix-core/inputnumber';
+import { Ripple } from '@gravionlabs/helix-core/ripple';
+import { BaseStyle } from '@gravionlabs/helix-core/base';
+
+const style = /*css*/ `
+    .h-paginator {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+        background: dt('paginator.background');
+        color: dt('paginator.color');
+        padding: dt('paginator.padding');
+        border-radius: dt('paginator.border.radius');
+        gap: dt('paginator.gap');
+    }
+
+    .h-paginator-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: dt('paginator.gap');
+    }
+
+    .h-paginator-content-start {
+        margin-inline-end: auto;
+    }
+
+    .h-paginator-content-end {
+        margin-inline-start: auto;
+    }
+
+    .h-paginator-page,
+    .h-paginator-next,
+    .h-paginator-last,
+    .h-paginator-first,
+    .h-paginator-prev {
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        user-select: none;
+        overflow: hidden;
+        position: relative;
+        background: dt('paginator.nav.button.background');
+        border: 0 none;
+        color: dt('paginator.nav.button.color');
+        min-width: dt('paginator.nav.button.width');
+        height: dt('paginator.nav.button.height');
+        transition:
+            background dt('paginator.transition.duration'),
+            color dt('paginator.transition.duration'),
+            outline-color dt('paginator.transition.duration'),
+            box-shadow dt('paginator.transition.duration');
+        border-radius: dt('paginator.nav.button.border.radius');
+        padding: 0;
+        margin: 0;
+    }
+
+    .h-paginator-page:focus-visible,
+    .h-paginator-next:focus-visible,
+    .h-paginator-last:focus-visible,
+    .h-paginator-first:focus-visible,
+    .h-paginator-prev:focus-visible {
+        box-shadow: dt('paginator.nav.button.focus.ring.shadow');
+        outline: dt('paginator.nav.button.focus.ring.width') dt('paginator.nav.button.focus.ring.style') dt('paginator.nav.button.focus.ring.color');
+        outline-offset: dt('paginator.nav.button.focus.ring.offset');
+    }
+
+    .h-paginator-page:not(.h-disabled):not(.h-paginator-page-selected):hover,
+    .h-paginator-first:not(.h-disabled):hover,
+    .h-paginator-prev:not(.h-disabled):hover,
+    .h-paginator-next:not(.h-disabled):hover,
+    .h-paginator-last:not(.h-disabled):hover {
+        background: dt('paginator.nav.button.hover.background');
+        color: dt('paginator.nav.button.hover.color');
+    }
+
+    .h-paginator-page.h-paginator-page-selected {
+        background: dt('paginator.nav.button.selected.background');
+        color: dt('paginator.nav.button.selected.color');
+    }
+
+    .h-paginator-current {
+        color: dt('paginator.current.page.report.color');
+    }
+
+    .h-paginator-pages {
+        display: flex;
+        align-items: center;
+        gap: dt('paginator.gap');
+    }
+
+    .h-paginator-jtp-input .h-inputtext {
+        max-width: dt('paginator.jump.to.page.input.max.width');
+    }
+
+    .h-paginator-first:dir(rtl),
+    .h-paginator-prev:dir(rtl),
+    .h-paginator-next:dir(rtl),
+    .h-paginator-last:dir(rtl) {
+        transform: rotate(180deg);
+    }
+`;
+
+const classes = {
+    paginator: ({ instance }) => ['h-paginator h-component'],
+    content: 'h-paginator-content',
+    contentStart: 'h-paginator-content-start',
+    contentEnd: 'h-paginator-content-end',
+    first: ({ instance }) => [
+        'h-paginator-first',
+        {
+            'h-disabled': instance.isFirstPage() || instance.empty()
+        }
+    ],
+    firstIcon: 'h-paginator-first-icon',
+    prev: ({ instance }) => [
+        'h-paginator-prev',
+        {
+            'h-disabled': instance.isFirstPage() || instance.empty()
+        }
+    ],
+    prevIcon: 'h-paginator-prev-icon',
+    next: ({ instance }) => [
+        'h-paginator-next',
+        {
+            'h-disabled': instance.isLastPage() || instance.empty()
+        }
+    ],
+    nextIcon: 'h-paginator-next-icon',
+    last: ({ instance }) => [
+        'h-paginator-last',
+        {
+            'h-disabled': instance.isLastPage() || instance.empty()
+        }
+    ],
+    lastIcon: 'h-paginator-last-icon',
+    pages: 'h-paginator-pages',
+    page: ({ instance, pageLink }) => [
+        'h-paginator-page',
+        {
+            'h-paginator-page-selected': pageLink - 1 == instance.getPage()
+        }
+    ],
+    current: 'h-paginator-current',
+    pcRowPerPageDropdown: 'h-paginator-rpp-dropdown',
+    pcJumpToPageDropdown: 'h-paginator-jtp-dropdown',
+    pcJumpToPageInput: 'h-paginator-jtp-input'
+};
+class PaginatorStyle extends BaseStyle {
+    name = 'paginator';
+    style = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PaginatorStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PaginatorStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PaginatorStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Paginator is a generic component to display content in paged format.
+ *
+ * [Live Demo](https://www.primeng.org/paginator)
+ *
+ * @module paginatorstyle
+ *
+ */
+var PaginatorClasses;
+(function (PaginatorClasses) {
+    /**
+     * Class name of the paginator element
+     */
+    PaginatorClasses["paginator"] = "h-paginator";
+    /**
+     * Class name of the content start element
+     */
+    PaginatorClasses["contentStart"] = "h-paginator-content-start";
+    /**
+     * Class name of the content end element
+     */
+    PaginatorClasses["contentEnd"] = "h-paginator-content-end";
+    /**
+     * Class name of the first element
+     */
+    PaginatorClasses["first"] = "h-paginator-first";
+    /**
+     * Class name of the first icon element
+     */
+    PaginatorClasses["firstIcon"] = "h-paginator-first-icon";
+    /**
+     * Class name of the prev element
+     */
+    PaginatorClasses["prev"] = "h-paginator-prev";
+    /**
+     * Class name of the prev icon element
+     */
+    PaginatorClasses["prevIcon"] = "h-paginator-prev-icon";
+    /**
+     * Class name of the next element
+     */
+    PaginatorClasses["next"] = "h-paginator-next";
+    /**
+     * Class name of the next icon element
+     */
+    PaginatorClasses["nextIcon"] = "h-paginator-next-icon";
+    /**
+     * Class name of the last element
+     */
+    PaginatorClasses["last"] = "h-paginator-last";
+    /**
+     * Class name of the last icon element
+     */
+    PaginatorClasses["lastIcon"] = "h-paginator-last-icon";
+    /**
+     * Class name of the pages element
+     */
+    PaginatorClasses["pages"] = "h-paginator-pages";
+    /**
+     * Class name of the page element
+     */
+    PaginatorClasses["page"] = "h-paginator-page";
+    /**
+     * Class name of the current element
+     */
+    PaginatorClasses["current"] = "h-paginator-current";
+    /**
+     * Class name of the row per page dropdown element
+     */
+    PaginatorClasses["pcRowPerPageDropdown"] = "h-paginator-rpp-dropdown";
+    /**
+     * Class name of the jump to page dropdown element
+     */
+    PaginatorClasses["pcJumpToPageDropdown"] = "h-paginator-jtp-dropdown";
+    /**
+     * Class name of the jump to page input element
+     */
+    PaginatorClasses["pcJumpToPageInput"] = "h-paginator-jtp-input";
+})(PaginatorClasses || (PaginatorClasses = {}));
+
+const PAGINATOR_INSTANCE = new InjectionToken('PAGINATOR_INSTANCE');
+/**
+ * Paginator is a generic component to display content in paged format.
+ * @group Components
+ */
+class Paginator extends BaseComponent {
+    componentName = 'Paginator';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pcPaginator = inject(PAGINATOR_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    /**
+     * Number of page links to display.
+     * @group Props
+     */
+    pageLinkSize = input(5, { ...(ngDevMode ? { debugName: "pageLinkSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
+     * @group Props
+     */
+    styleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to show it even there is only one page.
+     * @group Props
+     */
+    alwaysShow = input(true, { ...(ngDevMode ? { debugName: "alwaysShow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Target element to attach the dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
+     * @deprecated since v20.0.0. Use `appendTo` instead.
+     * @group Props
+     */
+    dropdownAppendTo = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dropdownAppendTo" }] : /* istanbul ignore next */ []));
+    /**
+     * Template instance to inject into the left side of the paginator.
+     * @param {PaginatorTemplateContext} context - Paginator template context.
+     * @see {@link PaginatorTemplateContext}
+     * @group Props
+     */
+    templateLeft = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "templateLeft" }] : /* istanbul ignore next */ []));
+    /**
+     * Template instance to inject into the right side of the paginator.
+     * @param {PaginatorTemplateContext} context - Paginator template context.
+     * @see {@link PaginatorTemplateContext}
+     * @group Props
+     */
+    templateRight = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "templateRight" }] : /* istanbul ignore next */ []));
+    /**
+     * Dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
+     * @group Props
+     */
+    dropdownScrollHeight = input('200px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropdownScrollHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
+     * @group Props
+     */
+    currentPageReportTemplate = input('{currentPage} of {totalPages}', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentPageReportTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to display current page report.
+     * @group Props
+     */
+    showCurrentPageReport = input(undefined, { ...(ngDevMode ? { debugName: "showCurrentPageReport" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When enabled, icons are displayed on paginator to go first and last page.
+     * @group Props
+     */
+    showFirstLastIcon = input(true, { ...(ngDevMode ? { debugName: "showFirstLastIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Number of total records.
+     * @group Props
+     */
+    totalRecords = input(0, { ...(ngDevMode ? { debugName: "totalRecords" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Data count to display per page.
+     * @group Props
+     */
+    rows = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /**
+     * Array of integer/object values to display inside rows per page dropdown. A object that have 'showAll' key can be added to it to show all data. Exp; [10,20,30,{showAll:'All'}]
+     * @group Props
+     */
+    rowsPerPageOptions = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rowsPerPageOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to display a dropdown to navigate to any page.
+     * @group Props
+     */
+    showJumpToPageDropdown = input(undefined, { ...(ngDevMode ? { debugName: "showJumpToPageDropdown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to display a input to navigate to any page.
+     * @group Props
+     */
+    showJumpToPageInput = input(undefined, { ...(ngDevMode ? { debugName: "showJumpToPageInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Template instance to inject into the jump to page dropdown item inside in the paginator.
+     * @param {PaginatorDropdownItemTemplateContext} context - dropdown item context.
+     * @see {@link PaginatorDropdownItemTemplateContext}
+     * @group Props
+     */
+    jumpToPageItemTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "jumpToPageItemTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to show page links.
+     * @group Props
+     */
+    showPageLinks = input(true, { ...(ngDevMode ? { debugName: "showPageLinks" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Locale to be used in formatting.
+     * @group Props
+     */
+    locale = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * Template instance to inject into the rows per page dropdown item inside in the paginator.
+     * @param {PaginatorDropdownItemTemplateContext} context - dropdown item context.
+     * @see {@link PaginatorDropdownItemTemplateContext}
+     * @group Props
+     */
+    dropdownItemTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dropdownItemTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Zero-relative number of the first row to be displayed.
+     * @group Props
+     */
+    first = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "first" }] : /* istanbul ignore next */ []));
+    /**
+     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
+     * @defaultValue 'self'
+     * @group Props
+     */
+    appendTo = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
+    /**
+     * Callback to invoke when page changes, the event object contains information about the new state.
+     * @param {PaginatorState} event - Paginator state.
+     * @group Emits
+     */
+    onPageChange = output();
+    /**
+     * Template for the dropdown icon.
+     * @group Templates
+     */
+    dropdownIconTemplate = contentChild('dropdownicon', { ...(ngDevMode ? { debugName: "dropdownIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Template for the first page link icon.
+     * @group Templates
+     */
+    firstPageLinkIconTemplate = contentChild('firstpagelinkicon', { ...(ngDevMode ? { debugName: "firstPageLinkIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Template for the previous page link icon.
+     * @group Templates
+     */
+    previousPageLinkIconTemplate = contentChild('previouspagelinkicon', { ...(ngDevMode ? { debugName: "previousPageLinkIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Template for the last page link icon.
+     * @group Templates
+     */
+    lastPageLinkIconTemplate = contentChild('lastpagelinkicon', { ...(ngDevMode ? { debugName: "lastPageLinkIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Template for the next page link icon.
+     * @group Templates
+     */
+    nextPageLinkIconTemplate = contentChild('nextpagelinkicon', { ...(ngDevMode ? { debugName: "nextPageLinkIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    templates = contentChildren(HelixTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    _dropdownIconTemplate;
+    _firstPageLinkIconTemplate;
+    _previousPageLinkIconTemplate;
+    _lastPageLinkIconTemplate;
+    _nextPageLinkIconTemplate;
+    pageLinks;
+    pageItems;
+    rowsPerPageItems;
+    paginatorState;
+    _page = 0;
+    _componentStyle = inject(PaginatorStyle);
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []));
+    get display() {
+        return this.alwaysShow() || (this.pageLinks && this.pageLinks.length > 1) ? null : 'none';
+    }
+    constructor() {
+        super();
+    }
+    onInit() {
+        this.updatePaginatorState();
+    }
+    onAfterContentInit() {
+        this.templates().forEach((item) => {
+            switch (item.getType()) {
+                case 'dropdownicon':
+                    this._dropdownIconTemplate = item.template;
+                    break;
+                case 'firstpagelinkicon':
+                    this._firstPageLinkIconTemplate = item.template;
+                    break;
+                case 'previouspagelinkicon':
+                    this._previousPageLinkIconTemplate = item.template;
+                    break;
+                case 'lastpagelinkicon':
+                    this._lastPageLinkIconTemplate = item.template;
+                    break;
+                case 'nextpagelinkicon':
+                    this._nextPageLinkIconTemplate = item.template;
+                    break;
+            }
+        });
+    }
+    getAriaLabel(labelType) {
+        return this.config.translation.aria ? this.config.translation.aria[labelType] : undefined;
+    }
+    getPageAriaLabel(value) {
+        return this.config.translation.aria ? this.config.translation.aria.pageLabel?.replace(/{page}/g, `${value}`) : undefined;
+    }
+    getLocalization(digit) {
+        const numerals = [...new Intl.NumberFormat(this.locale(), { useGrouping: false }).format(9876543210)].reverse();
+        const index = new Map(numerals.map((d, i) => [i, d]));
+        if (digit > 9) {
+            const numbers = String(digit).split('');
+            return numbers.map((number) => index.get(Number(number))).join('');
+        }
+        else {
+            return index.get(digit);
+        }
+    }
+    onChanges(simpleChange) {
+        if (simpleChange.totalRecords) {
+            this.updatePageLinks();
+            this.updatePaginatorState();
+            this.updateFirst();
+            this.updateRowsPerPageOptions();
+        }
+        if (simpleChange.first) {
+            this.updatePageLinks();
+            this.updatePaginatorState();
+        }
+        if (simpleChange.rows) {
+            this.updatePageLinks();
+            this.updatePaginatorState();
+        }
+        if (simpleChange.rowsPerPageOptions) {
+            this.updateRowsPerPageOptions();
+        }
+        if (simpleChange.pageLinkSize) {
+            this.updatePageLinks();
+        }
+    }
+    updateRowsPerPageOptions() {
+        const rowsPerPageOptions = this.rowsPerPageOptions();
+        if (rowsPerPageOptions) {
+            this.rowsPerPageItems = [];
+            let showAllItem = null;
+            for (let opt of rowsPerPageOptions) {
+                if (typeof opt == 'object' && opt['showAll']) {
+                    showAllItem = { label: opt['showAll'], value: this.totalRecords() };
+                }
+                else {
+                    this.rowsPerPageItems.push({ label: String(this.getLocalization(opt)), value: opt });
+                }
+            }
+            if (showAllItem) {
+                this.rowsPerPageItems.push(showAllItem);
+            }
+        }
+    }
+    isFirstPage() {
+        return this.getPage() === 0;
+    }
+    isLastPage() {
+        return this.getPage() === this.getPageCount() - 1;
+    }
+    getPageCount() {
+        return Math.ceil(this.totalRecords() / this.rows());
+    }
+    calculatePageLinkBoundaries() {
+        let numberOfPages = this.getPageCount(), visiblePages = Math.min(this.pageLinkSize(), numberOfPages);
+        //calculate range, keep current in middle if necessary
+        let start = Math.max(0, Math.ceil(this.getPage() - visiblePages / 2)), end = Math.min(numberOfPages - 1, start + visiblePages - 1);
+        //check when approaching to last page
+        var delta = this.pageLinkSize() - (end - start + 1);
+        start = Math.max(0, start - delta);
+        return [start, end];
+    }
+    updatePageLinks() {
+        this.pageLinks = [];
+        let boundaries = this.calculatePageLinkBoundaries(), start = boundaries[0], end = boundaries[1];
+        for (let i = start; i <= end; i++) {
+            this.pageLinks.push(i + 1);
+        }
+        if (this.showJumpToPageDropdown()) {
+            this.pageItems = [];
+            for (let i = 0; i < this.getPageCount(); i++) {
+                this.pageItems.push({ label: String(i + 1), value: i });
+            }
+        }
+    }
+    changePage(p) {
+        var pc = this.getPageCount();
+        if (p >= 0 && p < pc) {
+            this.first.set(this.rows() * p);
+            var state = {
+                page: p,
+                first: this.first(),
+                rows: this.rows(),
+                pageCount: pc
+            };
+            this.updatePageLinks();
+            this.onPageChange.emit(state);
+            this.updatePaginatorState();
+        }
+    }
+    updateFirst() {
+        const page = this.getPage();
+        const totalRecords = this.totalRecords();
+        if (page > 0 && totalRecords && this.first() >= totalRecords) {
+            Promise.resolve(null).then(() => this.changePage(page - 1));
+        }
+    }
+    getPage() {
+        return Math.floor(this.first() / this.rows());
+    }
+    changePageToFirst(event) {
+        if (!this.isFirstPage()) {
+            this.changePage(0);
+        }
+        event.preventDefault();
+    }
+    changePageToPrev(event) {
+        this.changePage(this.getPage() - 1);
+        event.preventDefault();
+    }
+    changePageToNext(event) {
+        this.changePage(this.getPage() + 1);
+        event.preventDefault();
+    }
+    changePageToLast(event) {
+        if (!this.isLastPage()) {
+            this.changePage(this.getPageCount() - 1);
+        }
+        event.preventDefault();
+    }
+    onPageLinkClick(event, page) {
+        this.changePage(page);
+        event.preventDefault();
+    }
+    onRppChange(event) {
+        this.changePage(this.getPage());
+    }
+    onPageDropdownChange(event) {
+        this.changePage(event.value);
+    }
+    updatePaginatorState() {
+        this.paginatorState = {
+            page: this.getPage(),
+            pageCount: this.getPageCount(),
+            rows: this.rows(),
+            first: this.first(),
+            totalRecords: this.totalRecords()
+        };
+    }
+    empty() {
+        return this.getPageCount() === 0;
+    }
+    currentPage() {
+        return this.getPageCount() > 0 ? this.getPage() + 1 : 0;
+    }
+    get currentPageReport() {
+        return this.currentPageReportTemplate()
+            .replace('{currentPage}', String(this.currentPage()))
+            .replace('{totalPages}', String(this.getPageCount()))
+            .replace('{first}', String(this.totalRecords() > 0 ? this.first() + 1 : 0))
+            .replace('{last}', String(Math.min(this.first() + this.rows(), this.totalRecords())))
+            .replace('{rows}', String(this.rows()))
+            .replace('{totalRecords}', String(this.totalRecords()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Paginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Paginator, isStandalone: true, selector: "h-paginator", inputs: { pageLinkSize: { classPropertyName: "pageLinkSize", publicName: "pageLinkSize", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, alwaysShow: { classPropertyName: "alwaysShow", publicName: "alwaysShow", isSignal: true, isRequired: false, transformFunction: null }, dropdownAppendTo: { classPropertyName: "dropdownAppendTo", publicName: "dropdownAppendTo", isSignal: true, isRequired: false, transformFunction: null }, templateLeft: { classPropertyName: "templateLeft", publicName: "templateLeft", isSignal: true, isRequired: false, transformFunction: null }, templateRight: { classPropertyName: "templateRight", publicName: "templateRight", isSignal: true, isRequired: false, transformFunction: null }, dropdownScrollHeight: { classPropertyName: "dropdownScrollHeight", publicName: "dropdownScrollHeight", isSignal: true, isRequired: false, transformFunction: null }, currentPageReportTemplate: { classPropertyName: "currentPageReportTemplate", publicName: "currentPageReportTemplate", isSignal: true, isRequired: false, transformFunction: null }, showCurrentPageReport: { classPropertyName: "showCurrentPageReport", publicName: "showCurrentPageReport", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastIcon: { classPropertyName: "showFirstLastIcon", publicName: "showFirstLastIcon", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, showJumpToPageDropdown: { classPropertyName: "showJumpToPageDropdown", publicName: "showJumpToPageDropdown", isSignal: true, isRequired: false, transformFunction: null }, showJumpToPageInput: { classPropertyName: "showJumpToPageInput", publicName: "showJumpToPageInput", isSignal: true, isRequired: false, transformFunction: null }, jumpToPageItemTemplate: { classPropertyName: "jumpToPageItemTemplate", publicName: "jumpToPageItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, showPageLinks: { classPropertyName: "showPageLinks", publicName: "showPageLinks", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dropdownItemTemplate: { classPropertyName: "dropdownItemTemplate", publicName: "dropdownItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rows: "rowsChange", first: "firstChange", onPageChange: "onPageChange" }, host: { properties: { "class": "cn(cx('paginator'), styleClass())", "style.display": "display" } }, providers: [PaginatorStyle, { provide: PAGINATOR_INSTANCE, useExisting: Paginator }, { provide: PARENT_INSTANCE, useExisting: Paginator }], queries: [{ propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"], isSignal: true }, { propertyName: "firstPageLinkIconTemplate", first: true, predicate: ["firstpagelinkicon"], isSignal: true }, { propertyName: "previousPageLinkIconTemplate", first: true, predicate: ["previouspagelinkicon"], isSignal: true }, { propertyName: "lastPageLinkIconTemplate", first: true, predicate: ["lastpagelinkicon"], isSignal: true }, { propertyName: "nextPageLinkIconTemplate", first: true, predicate: ["nextpagelinkicon"], isSignal: true }, { propertyName: "templates", predicate: HelixTemplate, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "@if (templateLeft()) {\n  <div [hBind]=\"ptm('contentStart')\" [class]=\"cx('contentStart')\">\n    <ng-container *ngTemplateOutlet=\"templateLeft(); context: { $implicit: paginatorState }\"></ng-container>\n  </div>\n}\n@if (showCurrentPageReport()) {\n  <span [hBind]=\"ptm('current')\" [class]=\"cx('current')\">{{ currentPageReport }}</span>\n}\n@if (showFirstLastIcon()) {\n  <button [hBind]=\"ptm('first')\" type=\"button\" (click)=\"changePageToFirst($event)\" hRipple [class]=\"cx('first')\" [attr.aria-label]=\"getAriaLabel('firstPageLabel')\">\n    @if (!firstPageLinkIconTemplate() && !_firstPageLinkIconTemplate) {\n      <svg [hBind]=\"ptm('firstIcon')\" data-h-icon=\"angle-double-left\" [class]=\"cx('firstIcon')\" />\n    }\n    @if (firstPageLinkIconTemplate() || _firstPageLinkIconTemplate) {\n      <span [class]=\"cx('firstIcon')\">\n        <ng-template *ngTemplateOutlet=\"firstPageLinkIconTemplate() || _firstPageLinkIconTemplate\"></ng-template>\n      </span>\n    }\n  </button>\n}\n<button [hBind]=\"ptm('prev')\" type=\"button\" [disabled]=\"isFirstPage() || empty()\" (click)=\"changePageToPrev($event)\" hRipple [class]=\"cx('prev')\" [attr.aria-label]=\"getAriaLabel('prevPageLabel')\">\n  @if (!previousPageLinkIconTemplate() && !_previousPageLinkIconTemplate) {\n    <svg [hBind]=\"ptm('prevIcon')\" data-h-icon=\"angle-left\" [class]=\"cx('prevIcon')\" />\n  }\n  @if (previousPageLinkIconTemplate() || _previousPageLinkIconTemplate) {\n    <span [class]=\"cx('prevIcon')\">\n      <ng-template *ngTemplateOutlet=\"previousPageLinkIconTemplate() || _previousPageLinkIconTemplate\"></ng-template>\n    </span>\n  }\n</button>\n@if (showPageLinks()) {\n  <span [hBind]=\"ptm('pages')\" [class]=\"cx('pages')\">\n    @for (pageLink of pageLinks; track pageLink) {\n      <button\n        [hBind]=\"ptm('page')\"\n        type=\"button\"\n        [class]=\"cx('page', { pageLink })\"\n        [attr.aria-label]=\"getPageAriaLabel(pageLink)\"\n        [attr.aria-current]=\"pageLink - 1 == getPage() ? 'page' : undefined\"\n        (click)=\"onPageLinkClick($event, pageLink - 1)\"\n        hRipple\n        >\n        {{ getLocalization(pageLink) }}\n      </button>\n    }\n  </span>\n}\n@if (showJumpToPageDropdown()) {\n  <h-select\n    [options]=\"pageItems\"\n    [ngModel]=\"getPage()\"\n    [disabled]=\"empty()\"\n    [attr.aria-label]=\"getAriaLabel('jumpToPageDropdownLabel')\"\n    [styleClass]=\"cx('pcJumpToPageDropdown')\"\n    (onChange)=\"onPageDropdownChange($event)\"\n    [appendTo]=\"dropdownAppendTo() || $appendTo()\"\n    [scrollHeight]=\"dropdownScrollHeight()\"\n    [pt]=\"ptm('pcJumpToPageDropdown')\"\n    [unstyled]=\"unstyled()\"\n    >\n    <ng-template hTemplate=\"selectedItem\">{{ currentPageReport }}</ng-template>\n    @if (jumpToPageItemTemplate()) {\n      <ng-template let-item hTemplate=\"item\">\n        <ng-container *ngTemplateOutlet=\"jumpToPageItemTemplate(); context: { $implicit: item }\"></ng-container>\n      </ng-template>\n    }\n    @if (dropdownIconTemplate() || _dropdownIconTemplate) {\n      <ng-template hTemplate=\"dropdownicon\">\n        <ng-container *ngTemplateOutlet=\"dropdownIconTemplate() || _dropdownIconTemplate\"></ng-container>\n      </ng-template>\n    }\n  </h-select>\n}\n<button [hBind]=\"ptm('next')\" type=\"button\" [disabled]=\"isLastPage() || empty()\" (click)=\"changePageToNext($event)\" hRipple [class]=\"cx('next')\" [attr.aria-label]=\"getAriaLabel('nextPageLabel')\">\n  @if (!nextPageLinkIconTemplate() && !_nextPageLinkIconTemplate) {\n    <svg [hBind]=\"ptm('nextIcon')\" data-h-icon=\"angle-right\" [class]=\"cx('nextIcon')\" />\n  }\n  @if (nextPageLinkIconTemplate() || _nextPageLinkIconTemplate) {\n    <span [class]=\"cx('nextIcon')\">\n      <ng-template *ngTemplateOutlet=\"nextPageLinkIconTemplate() || _nextPageLinkIconTemplate\"></ng-template>\n    </span>\n  }\n</button>\n@if (showFirstLastIcon()) {\n  <button [hBind]=\"ptm('last')\" type=\"button\" [disabled]=\"isLastPage() || empty()\" (click)=\"changePageToLast($event)\" hRipple [class]=\"cx('last')\" [attr.aria-label]=\"getAriaLabel('lastPageLabel')\">\n    @if (!lastPageLinkIconTemplate() && !_lastPageLinkIconTemplate) {\n      <svg [hBind]=\"ptm('lastIcon')\" data-h-icon=\"angle-double-right\" [class]=\"cx('lastIcon')\" />\n    }\n    @if (lastPageLinkIconTemplate() || _lastPageLinkIconTemplate) {\n      <span [class]=\"cx('lastIcon')\">\n        <ng-template *ngTemplateOutlet=\"lastPageLinkIconTemplate() || _lastPageLinkIconTemplate\"></ng-template>\n      </span>\n    }\n  </button>\n}\n@if (showJumpToPageInput()) {\n  <h-inputnumber [pt]=\"ptm('pcJumpToPageInput')\" [ngModel]=\"currentPage()\" [class]=\"cx('pcJumpToPageInput')\" [disabled]=\"empty()\" (ngModelChange)=\"changePage($event - 1)\" [unstyled]=\"unstyled()\"></h-inputnumber>\n}\n@if (rowsPerPageOptions()) {\n  <h-select\n    [options]=\"rowsPerPageItems\"\n    [(ngModel)]=\"rows\"\n    [styleClass]=\"cx('pcRowPerPageDropdown')\"\n    [disabled]=\"empty()\"\n    (onChange)=\"onRppChange($event)\"\n    [appendTo]=\"dropdownAppendTo() || $appendTo()\"\n    [scrollHeight]=\"dropdownScrollHeight()\"\n    [ariaLabel]=\"getAriaLabel('rowsPerPageLabel')\"\n    [pt]=\"ptm('pcRowPerPageDropdown')\"\n    [unstyled]=\"unstyled()\"\n    >\n    @if (dropdownItemTemplate()) {\n      <ng-template let-item hTemplate=\"item\">\n        <ng-container *ngTemplateOutlet=\"dropdownItemTemplate(); context: { $implicit: item }\"></ng-container>\n      </ng-template>\n    }\n    @if (dropdownIconTemplate() || _dropdownIconTemplate) {\n      <ng-template hTemplate=\"dropdownicon\">\n        <ng-container *ngTemplateOutlet=\"dropdownIconTemplate() || _dropdownIconTemplate\"></ng-container>\n      </ng-template>\n    }\n  </h-select>\n}\n@if (templateRight()) {\n  <div [hBind]=\"ptm('contentEnd')\" [class]=\"cx('contentEnd')\">\n    <ng-container *ngTemplateOutlet=\"templateRight(); context: { $implicit: paginatorState }\"></ng-container>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Select, selector: "h-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["idChange", "placeholderChange", "onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: InputNumber, selector: "h-inputNumber, h-inputnumber, h-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: Ripple, selector: "[hRipple]" }, { kind: "component", type: AngleDoubleLeftIcon, selector: "[data-h-icon=\"angle-double-left\"]" }, { kind: "component", type: AngleDoubleRightIcon, selector: "[data-h-icon=\"angle-double-right\"]" }, { kind: "component", type: AngleLeftIcon, selector: "[data-h-icon=\"angle-left\"]" }, { kind: "component", type: AngleRightIcon, selector: "[data-h-icon=\"angle-right\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i4.HelixTemplate, selector: "[hTemplate]", inputs: ["type", "hTemplate"] }, { kind: "directive", type: Bind, selector: "[hBind]", inputs: ["hBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Paginator, decorators: [{
+            type: Component,
+            args: [{ selector: 'h-paginator', standalone: true, imports: [CommonModule, Select, InputNumber, FormsModule, Ripple, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleLeftIcon, AngleRightIcon, SharedModule, Bind], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [PaginatorStyle, { provide: PAGINATOR_INSTANCE, useExisting: Paginator }, { provide: PARENT_INSTANCE, useExisting: Paginator }], host: {
+                        '[class]': "cn(cx('paginator'), styleClass())",
+                        '[style.display]': 'display'
+                    }, hostDirectives: [Bind], template: "@if (templateLeft()) {\n  <div [hBind]=\"ptm('contentStart')\" [class]=\"cx('contentStart')\">\n    <ng-container *ngTemplateOutlet=\"templateLeft(); context: { $implicit: paginatorState }\"></ng-container>\n  </div>\n}\n@if (showCurrentPageReport()) {\n  <span [hBind]=\"ptm('current')\" [class]=\"cx('current')\">{{ currentPageReport }}</span>\n}\n@if (showFirstLastIcon()) {\n  <button [hBind]=\"ptm('first')\" type=\"button\" (click)=\"changePageToFirst($event)\" hRipple [class]=\"cx('first')\" [attr.aria-label]=\"getAriaLabel('firstPageLabel')\">\n    @if (!firstPageLinkIconTemplate() && !_firstPageLinkIconTemplate) {\n      <svg [hBind]=\"ptm('firstIcon')\" data-h-icon=\"angle-double-left\" [class]=\"cx('firstIcon')\" />\n    }\n    @if (firstPageLinkIconTemplate() || _firstPageLinkIconTemplate) {\n      <span [class]=\"cx('firstIcon')\">\n        <ng-template *ngTemplateOutlet=\"firstPageLinkIconTemplate() || _firstPageLinkIconTemplate\"></ng-template>\n      </span>\n    }\n  </button>\n}\n<button [hBind]=\"ptm('prev')\" type=\"button\" [disabled]=\"isFirstPage() || empty()\" (click)=\"changePageToPrev($event)\" hRipple [class]=\"cx('prev')\" [attr.aria-label]=\"getAriaLabel('prevPageLabel')\">\n  @if (!previousPageLinkIconTemplate() && !_previousPageLinkIconTemplate) {\n    <svg [hBind]=\"ptm('prevIcon')\" data-h-icon=\"angle-left\" [class]=\"cx('prevIcon')\" />\n  }\n  @if (previousPageLinkIconTemplate() || _previousPageLinkIconTemplate) {\n    <span [class]=\"cx('prevIcon')\">\n      <ng-template *ngTemplateOutlet=\"previousPageLinkIconTemplate() || _previousPageLinkIconTemplate\"></ng-template>\n    </span>\n  }\n</button>\n@if (showPageLinks()) {\n  <span [hBind]=\"ptm('pages')\" [class]=\"cx('pages')\">\n    @for (pageLink of pageLinks; track pageLink) {\n      <button\n        [hBind]=\"ptm('page')\"\n        type=\"button\"\n        [class]=\"cx('page', { pageLink })\"\n        [attr.aria-label]=\"getPageAriaLabel(pageLink)\"\n        [attr.aria-current]=\"pageLink - 1 == getPage() ? 'page' : undefined\"\n        (click)=\"onPageLinkClick($event, pageLink - 1)\"\n        hRipple\n        >\n        {{ getLocalization(pageLink) }}\n      </button>\n    }\n  </span>\n}\n@if (showJumpToPageDropdown()) {\n  <h-select\n    [options]=\"pageItems\"\n    [ngModel]=\"getPage()\"\n    [disabled]=\"empty()\"\n    [attr.aria-label]=\"getAriaLabel('jumpToPageDropdownLabel')\"\n    [styleClass]=\"cx('pcJumpToPageDropdown')\"\n    (onChange)=\"onPageDropdownChange($event)\"\n    [appendTo]=\"dropdownAppendTo() || $appendTo()\"\n    [scrollHeight]=\"dropdownScrollHeight()\"\n    [pt]=\"ptm('pcJumpToPageDropdown')\"\n    [unstyled]=\"unstyled()\"\n    >\n    <ng-template hTemplate=\"selectedItem\">{{ currentPageReport }}</ng-template>\n    @if (jumpToPageItemTemplate()) {\n      <ng-template let-item hTemplate=\"item\">\n        <ng-container *ngTemplateOutlet=\"jumpToPageItemTemplate(); context: { $implicit: item }\"></ng-container>\n      </ng-template>\n    }\n    @if (dropdownIconTemplate() || _dropdownIconTemplate) {\n      <ng-template hTemplate=\"dropdownicon\">\n        <ng-container *ngTemplateOutlet=\"dropdownIconTemplate() || _dropdownIconTemplate\"></ng-container>\n      </ng-template>\n    }\n  </h-select>\n}\n<button [hBind]=\"ptm('next')\" type=\"button\" [disabled]=\"isLastPage() || empty()\" (click)=\"changePageToNext($event)\" hRipple [class]=\"cx('next')\" [attr.aria-label]=\"getAriaLabel('nextPageLabel')\">\n  @if (!nextPageLinkIconTemplate() && !_nextPageLinkIconTemplate) {\n    <svg [hBind]=\"ptm('nextIcon')\" data-h-icon=\"angle-right\" [class]=\"cx('nextIcon')\" />\n  }\n  @if (nextPageLinkIconTemplate() || _nextPageLinkIconTemplate) {\n    <span [class]=\"cx('nextIcon')\">\n      <ng-template *ngTemplateOutlet=\"nextPageLinkIconTemplate() || _nextPageLinkIconTemplate\"></ng-template>\n    </span>\n  }\n</button>\n@if (showFirstLastIcon()) {\n  <button [hBind]=\"ptm('last')\" type=\"button\" [disabled]=\"isLastPage() || empty()\" (click)=\"changePageToLast($event)\" hRipple [class]=\"cx('last')\" [attr.aria-label]=\"getAriaLabel('lastPageLabel')\">\n    @if (!lastPageLinkIconTemplate() && !_lastPageLinkIconTemplate) {\n      <svg [hBind]=\"ptm('lastIcon')\" data-h-icon=\"angle-double-right\" [class]=\"cx('lastIcon')\" />\n    }\n    @if (lastPageLinkIconTemplate() || _lastPageLinkIconTemplate) {\n      <span [class]=\"cx('lastIcon')\">\n        <ng-template *ngTemplateOutlet=\"lastPageLinkIconTemplate() || _lastPageLinkIconTemplate\"></ng-template>\n      </span>\n    }\n  </button>\n}\n@if (showJumpToPageInput()) {\n  <h-inputnumber [pt]=\"ptm('pcJumpToPageInput')\" [ngModel]=\"currentPage()\" [class]=\"cx('pcJumpToPageInput')\" [disabled]=\"empty()\" (ngModelChange)=\"changePage($event - 1)\" [unstyled]=\"unstyled()\"></h-inputnumber>\n}\n@if (rowsPerPageOptions()) {\n  <h-select\n    [options]=\"rowsPerPageItems\"\n    [(ngModel)]=\"rows\"\n    [styleClass]=\"cx('pcRowPerPageDropdown')\"\n    [disabled]=\"empty()\"\n    (onChange)=\"onRppChange($event)\"\n    [appendTo]=\"dropdownAppendTo() || $appendTo()\"\n    [scrollHeight]=\"dropdownScrollHeight()\"\n    [ariaLabel]=\"getAriaLabel('rowsPerPageLabel')\"\n    [pt]=\"ptm('pcRowPerPageDropdown')\"\n    [unstyled]=\"unstyled()\"\n    >\n    @if (dropdownItemTemplate()) {\n      <ng-template let-item hTemplate=\"item\">\n        <ng-container *ngTemplateOutlet=\"dropdownItemTemplate(); context: { $implicit: item }\"></ng-container>\n      </ng-template>\n    }\n    @if (dropdownIconTemplate() || _dropdownIconTemplate) {\n      <ng-template hTemplate=\"dropdownicon\">\n        <ng-container *ngTemplateOutlet=\"dropdownIconTemplate() || _dropdownIconTemplate\"></ng-container>\n      </ng-template>\n    }\n  </h-select>\n}\n@if (templateRight()) {\n  <div [hBind]=\"ptm('contentEnd')\" [class]=\"cx('contentEnd')\">\n    <ng-container *ngTemplateOutlet=\"templateRight(); context: { $implicit: paginatorState }\"></ng-container>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { pageLinkSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLinkSize", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], alwaysShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysShow", required: false }] }], dropdownAppendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownAppendTo", required: false }] }], templateLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateLeft", required: false }] }], templateRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateRight", required: false }] }], dropdownScrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownScrollHeight", required: false }] }], currentPageReportTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageReportTemplate", required: false }] }], showCurrentPageReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentPageReport", required: false }] }], showFirstLastIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastIcon", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], showJumpToPageDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "showJumpToPageDropdown", required: false }] }], showJumpToPageInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showJumpToPageInput", required: false }] }], jumpToPageItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "jumpToPageItemTemplate", required: false }] }], showPageLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageLinks", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dropdownItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownItemTemplate", required: false }] }], first: [{ type: i0.Input, args: [{ isSignal: true, alias: "first", required: false }] }, { type: i0.Output, args: ["firstChange"] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], onPageChange: [{ type: i0.Output, args: ["onPageChange"] }], dropdownIconTemplate: [{ type: i0.ContentChild, args: ['dropdownicon', { ...{ descendants: false }, isSignal: true }] }], firstPageLinkIconTemplate: [{ type: i0.ContentChild, args: ['firstpagelinkicon', { ...{ descendants: false }, isSignal: true }] }], previousPageLinkIconTemplate: [{ type: i0.ContentChild, args: ['previouspagelinkicon', { ...{ descendants: false }, isSignal: true }] }], lastPageLinkIconTemplate: [{ type: i0.ContentChild, args: ['lastpagelinkicon', { ...{ descendants: false }, isSignal: true }] }], nextPageLinkIconTemplate: [{ type: i0.ContentChild, args: ['nextpagelinkicon', { ...{ descendants: false }, isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }] }] } });
+class PaginatorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: PaginatorModule, imports: [Paginator, SharedModule], exports: [Paginator, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PaginatorModule, imports: [Paginator, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PaginatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [Paginator, SharedModule],
+                    exports: [Paginator, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Paginator, PaginatorClasses, PaginatorModule, PaginatorStyle };
+//# sourceMappingURL=gravionlabs-helix-core-paginator.mjs.map