ng-primitives 0.120.4 → 0.121.0

package/fesm2022/ng-primitives-pagination.mjs

@@ -1,365 +1,357 @@
 import * as i0 from '@angular/core';
-import { input, numberAttribute, booleanAttribute, computed, HostListener, Directive, output } from '@angular/core';
+import { signal, computed, input, numberAttribute, booleanAttribute, Directive, output } from '@angular/core';
 import { ngpButton } from 'ng-primitives/button';
-import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import { injectElementRef } from 'ng-primitives/internal';
+import { createPrimitive, controlledState, attrBinding, dataBinding, deprecatedSetter, listener } from 'ng-primitives/state';
 
-/**
- * The state token  for the Pagination primitive.
- */
-const NgpPaginationStateToken = createStateToken('Pagination');
-/**
- * Provides the Pagination state.
- */
-const providePaginationState = createStateProvider(NgpPaginationStateToken);
-/**
- * Injects the Pagination state.
- */
-const injectPaginationState = createStateInjector(NgpPaginationStateToken);
-/**
- * The Pagination state registration function.
- */
-const paginationState = createState(NgpPaginationStateToken);
+const [NgpPaginationStateToken, ngpPagination, injectPaginationState, providePaginationState,] = createPrimitive('NgpPagination', ({ page: _page = signal(undefined), defaultPage: _defaultPage = signal(1), pageCount: _pageCount = signal(0), disabled: _disabled = signal(false), onPageChange, }) => {
+    const elementRef = injectElementRef();
+    const [page, setPage, pageChange] = controlledState({
+        value: _page,
+        defaultValue: _defaultPage,
+        onChange: onPageChange,
+    });
+    const firstPage = computed(() => page() === 1, ...(ngDevMode ? [{ debugName: "firstPage" }] : /* istanbul ignore next */ []));
+    const lastPage = computed(() => page() === _pageCount(), ...(ngDevMode ? [{ debugName: "lastPage" }] : /* istanbul ignore next */ []));
+    // Host bindings
+    attrBinding(elementRef, 'role', 'navigation');
+    dataBinding(elementRef, 'data-page', () => page().toString());
+    dataBinding(elementRef, 'data-page-count', () => _pageCount().toString());
+    dataBinding(elementRef, 'data-first-page', () => (firstPage() ? '' : null));
+    dataBinding(elementRef, 'data-last-page', () => (lastPage() ? '' : null));
+    dataBinding(elementRef, 'data-disabled', () => (_disabled() ? '' : null));
+    function goToPage(page) {
+        // check if the page is within the bounds of the pagination
+        if (page < 1 || page > _pageCount()) {
+            return;
+        }
+        setPage(page);
+    }
+    return {
+        page: deprecatedSetter(page, 'setPage', setPage),
+        pageCount: _pageCount,
+        pageChange,
+        disabled: _disabled,
+        firstPage,
+        lastPage,
+        goToPage,
+    };
+});
+
+const [NgpPaginationButtonStateToken, ngpPaginationButton, injectPaginationButtonState, providePaginationButtonState,] = createPrimitive('NgpPaginationButton', ({ page = signal(-1), disabled: _disabled = signal(false), }) => {
+    const elementRef = injectElementRef();
+    const paginationState = injectPaginationState();
+    const selected = computed(() => page() === paginationState().page(), ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    const disabled = computed(() => _disabled() || paginationState().disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    // Setup interactions
+    ngpButton({ disabled: disabled });
+    // Host binding
+    attrBinding(elementRef, 'tabindex', () => (disabled() ? -1 : 0));
+    attrBinding(elementRef, 'aria-current', selected);
+    dataBinding(elementRef, 'data-page', () => page().toString());
+    dataBinding(elementRef, 'data-selected', () => (selected() ? '' : null));
+    // Listeners
+    listener(elementRef, 'click', goToPage);
+    listener(elementRef, 'keydown.space', handleOnEnter);
+    listener(elementRef, 'keydown.enter', handleOnEnter);
+    function goToPage() {
+        if (disabled()) {
+            return;
+        }
+        paginationState().goToPage(page());
+    }
+    function handleOnEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        goToPage();
+    }
+    return {
+        page,
+        disabled,
+        goToPage,
+    };
+});
 
 /**
  * The `NgpPaginationButton` directive is used to create a pagination button.
  */
 class NgpPaginationButton {
     constructor() {
-        /**
-         * Access the pagination state.
-         */
-        this.paginationState = injectPaginationState();
         /**
          * Define the page this button represents.
          */
-        this.page = input.required(...(ngDevMode ? [{ debugName: "page", alias: 'ngpPaginationButtonPage',
-                transform: numberAttribute }] : [{
-                alias: 'ngpPaginationButtonPage',
-                transform: numberAttribute,
-            }]));
+        this.page = input.required({ ...(ngDevMode ? { debugName: "page" } : /* istanbul ignore next */ {}), alias: 'ngpPaginationButtonPage',
+            transform: numberAttribute });
         /**
          * Whether the button is disabled.
          */
-        this.buttonDisabled = input(false, ...(ngDevMode ? [{ debugName: "buttonDisabled", alias: 'ngpPaginationButtonDisabled',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpPaginationButtonDisabled',
-                transform: booleanAttribute,
-            }]));
-        /**
-         * Whether the button is disabled.
-         */
-        this.disabled = computed(() => this.buttonDisabled() || this.paginationState().disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        /**
-         * Whether this page is the currently selected page.
-         */
-        this.selected = computed(() => this.page() === this.paginationState().page(), ...(ngDevMode ? [{ debugName: "selected" }] : []));
-        ngpButton({ disabled: this.disabled });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'ngpPaginationButtonDisabled',
+            transform: booleanAttribute });
+        this.state = ngpPaginationButton({
+            page: this.page,
+            disabled: this.disabled,
+        });
     }
     /**
      * Go to the page this button represents.
      */
     goToPage() {
-        if (this.disabled()) {
-            return;
-        }
-        this.paginationState().goToPage(this.page());
-    }
-    /**
-     * A click event may not be fired if this is on an anchor tag and the href is empty.
-     * This is a workaround to ensure the click event is fired.
-     */
-    onEnter(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.goToPage();
+        return this.state.goToPage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpPaginationButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpPaginationButton, isStandalone: true, selector: "[ngpPaginationButton]", inputs: { page: { classPropertyName: "page", publicName: "ngpPaginationButtonPage", isSignal: true, isRequired: true, transformFunction: null }, buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "ngpPaginationButtonDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "goToPage()", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)" }, properties: { "tabindex": "disabled() ? -1 : 0", "attr.data-page": "page()", "attr.data-selected": "selected() ? \"\" : null", "attr.aria-current": "selected()" } }, exportAs: ["ngpPaginationButton"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPaginationButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpPaginationButton, isStandalone: true, selector: "[ngpPaginationButton]", inputs: { page: { classPropertyName: "page", publicName: "ngpPaginationButtonPage", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpPaginationButtonDisabled", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ngpPaginationButton"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpPaginationButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPaginationButton, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpPaginationButton]',
                     exportAs: 'ngpPaginationButton',
-                    host: {
-                        '[tabindex]': 'disabled() ? -1 : 0',
-                        '[attr.data-page]': 'page()',
-                        '[attr.data-selected]': 'selected() ? "" : null',
-                        '[attr.aria-current]': 'selected()',
-                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationButtonPage", required: true }] }], buttonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationButtonDisabled", required: false }] }], goToPage: [{
-                type: HostListener,
-                args: ['click']
-            }], onEnter: [{
-                type: HostListener,
-                args: ['keydown.enter', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.space', ['$event']]
-            }] } });
+        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationButtonPage", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationButtonDisabled", required: false }] }] } });
+
+const [NgpPaginationFirstStateToken, ngpPaginationFirst, injectPaginationFirstState, providePaginationFirstState,] = createPrimitive('NgpPaginationFirst', ({ disabled: _disabled = signal(false) }) => {
+    const elementRef = injectElementRef();
+    const paginationState = injectPaginationState();
+    const disabled = computed(() => _disabled() || paginationState().disabled() || paginationState().firstPage(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    // Setup interactions
+    ngpButton({ disabled: disabled });
+    // Host binding
+    attrBinding(elementRef, 'tabindex', () => (disabled() ? -1 : 0));
+    dataBinding(elementRef, 'data-first-page', () => (paginationState().firstPage() ? '' : null));
+    // Listener
+    listener(elementRef, 'click', goToFirstPage);
+    listener(elementRef, 'keydown.enter', handleOnEnter);
+    listener(elementRef, 'keydown.space', handleOnEnter);
+    function goToFirstPage() {
+        if (disabled()) {
+            return;
+        }
+        paginationState().goToPage(1);
+    }
+    function handleOnEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        goToFirstPage();
+    }
+    return {
+        disabled,
+        goToFirstPage,
+    };
+});
 
 /**
  * The `NgpPaginationFirst` directive is used to create a pagination button that navigates to the first page.
  */
 class NgpPaginationFirst {
     constructor() {
-        /**
-         * Access the pagination state.
-         */
-        this.paginationState = injectPaginationState();
         /**
          * Whether the button is disabled.
          */
-        this.buttonDisabled = input(false, ...(ngDevMode ? [{ debugName: "buttonDisabled", alias: 'ngpPaginationFirstDisabled',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpPaginationFirstDisabled',
-                transform: booleanAttribute,
-            }]));
-        this.disabled = computed(() => this.buttonDisabled() ||
-            this.paginationState().disabled() ||
-            this.paginationState().firstPage(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        ngpButton({ disabled: this.disabled });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'ngpPaginationFirstDisabled',
+            transform: booleanAttribute });
+        this.state = ngpPaginationFirst({
+            disabled: this.disabled,
+        });
     }
     /**
      * Go to the first page.
      */
     goToFirstPage() {
-        if (this.disabled()) {
-            return;
-        }
-        this.paginationState().goToPage(1);
-    }
-    /**
-     * A click event may not be fired if this is on an anchor tag and the href is empty.
-     * This is a workaround to ensure the click event is fired.
-     */
-    onEnter(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.goToFirstPage();
+        return this.state.goToFirstPage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpPaginationFirst, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpPaginationFirst, isStandalone: true, selector: "[ngpPaginationFirst]", inputs: { buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "ngpPaginationFirstDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "goToFirstPage()", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)" }, properties: { "tabindex": "disabled() ? -1 : 0", "attr.data-first-page": "paginationState().firstPage() ? \"\" : null" } }, exportAs: ["ngpPaginationFirst"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPaginationFirst, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpPaginationFirst, isStandalone: true, selector: "[ngpPaginationFirst]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpPaginationFirstDisabled", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ngpPaginationFirst"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpPaginationFirst, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPaginationFirst, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpPaginationFirst]',
                     exportAs: 'ngpPaginationFirst',
-                    host: {
-                        '[tabindex]': 'disabled() ? -1 : 0',
-                        '[attr.data-first-page]': 'paginationState().firstPage() ? "" : null',
-                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { buttonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationFirstDisabled", required: false }] }], goToFirstPage: [{
-                type: HostListener,
-                args: ['click']
-            }], onEnter: [{
-                type: HostListener,
-                args: ['keydown.enter', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.space', ['$event']]
-            }] } });
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationFirstDisabled", required: false }] }] } });
+
+const [NgpPaginationLastStateToken, ngpPaginationLast, injectPaginationLastState, providePaginationLastState,] = createPrimitive('NgpPaginationLast', ({ disabled: _disabled = signal(false) }) => {
+    const elementRef = injectElementRef();
+    const paginationState = injectPaginationState();
+    const disabled = computed(() => _disabled() || paginationState().disabled() || paginationState().lastPage(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    // Setup interactions
+    ngpButton({ disabled: disabled });
+    // Host binding
+    attrBinding(elementRef, 'tabindex', () => (disabled() ? -1 : 0));
+    dataBinding(elementRef, 'data-last-page', () => (paginationState().lastPage() ? '' : null));
+    // Listener
+    listener(elementRef, 'click', goToLastPage);
+    listener(elementRef, 'keydown.enter', handleOnEnter);
+    listener(elementRef, 'keydown.space', handleOnEnter);
+    function goToLastPage() {
+        if (disabled()) {
+            return;
+        }
+        paginationState().goToPage(paginationState().pageCount());
+    }
+    function handleOnEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        goToLastPage();
+    }
+    return {
+        disabled,
+        goToLastPage,
+    };
+});
 
 /**
  * The `NgpPaginationLast` directive is used to create a pagination button that navigates to the last page.
  */
 class NgpPaginationLast {
     constructor() {
-        /**
-         * Access the pagination state.
-         */
-        this.paginationState = injectPaginationState();
         /**
          * Whether the button is disabled.
          */
-        this.buttonDisabled = input(false, ...(ngDevMode ? [{ debugName: "buttonDisabled", alias: 'ngpPaginationLastDisabled',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpPaginationLastDisabled',
-                transform: booleanAttribute,
-            }]));
-        this.disabled = computed(() => this.buttonDisabled() ||
-            this.paginationState().disabled() ||
-            this.paginationState().lastPage(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        ngpButton({ disabled: this.disabled });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'ngpPaginationLastDisabled',
+            transform: booleanAttribute });
+        this.state = ngpPaginationLast({
+            disabled: this.disabled,
+        });
     }
     /**
      * Go to the last page.
      */
     goToLastPage() {
-        if (this.disabled()) {
-            return;
-        }
-        this.paginationState().goToPage(this.paginationState().pageCount());
-    }
-    /**
-     * A click event may not be fired if this is on an anchor tag and the href is empty.
-     * This is a workaround to ensure the click event is fired.
-     */
-    onEnter(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.goToLastPage();
+        this.state.goToLastPage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpPaginationLast, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpPaginationLast, isStandalone: true, selector: "[ngpPaginationLast]", inputs: { buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "ngpPaginationLastDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "goToLastPage()", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)" }, properties: { "tabindex": "disabled() ? -1 : 0", "attr.data-last-page": "paginationState().lastPage() ? \"\" : null" } }, exportAs: ["ngpPaginationLast"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPaginationLast, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpPaginationLast, isStandalone: true, selector: "[ngpPaginationLast]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpPaginationLastDisabled", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ngpPaginationLast"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpPaginationLast, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPaginationLast, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpPaginationLast]',
                     exportAs: 'ngpPaginationLast',
-                    host: {
-                        '[tabindex]': 'disabled() ? -1 : 0',
-                        '[attr.data-last-page]': 'paginationState().lastPage() ? "" : null',
-                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { buttonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationLastDisabled", required: false }] }], goToLastPage: [{
-                type: HostListener,
-                args: ['click']
-            }], onEnter: [{
-                type: HostListener,
-                args: ['keydown.enter', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.space', ['$event']]
-            }] } });
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationLastDisabled", required: false }] }] } });
+
+const [NgpPaginationNextStateToken, ngpPaginationNext, injectPaginationNextState, providePaginationNextState,] = createPrimitive('NgpPaginationNext', ({ disabled: _disabled = signal(false) }) => {
+    const elementRef = injectElementRef();
+    const paginationState = injectPaginationState();
+    const disabled = computed(() => _disabled() || paginationState().disabled() || paginationState().lastPage(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    // Setup interactions
+    ngpButton({ disabled: disabled });
+    // Host binding
+    attrBinding(elementRef, 'tabindex', () => (disabled() ? -1 : 0));
+    dataBinding(elementRef, 'data-last-page', () => (paginationState().lastPage() ? '' : null));
+    // Listener
+    listener(elementRef, 'click', goToNextPage);
+    listener(elementRef, 'keydown.enter', handleOnEnter);
+    listener(elementRef, 'keydown.space', handleOnEnter);
+    function goToNextPage() {
+        if (disabled()) {
+            return;
+        }
+        paginationState().goToPage(paginationState().page() + 1);
+    }
+    function handleOnEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        goToNextPage();
+    }
+    return {
+        disabled,
+        goToNextPage,
+    };
+});
 
 /**
  * The `NgpPaginationNext` directive is used to create a pagination button that navigates to the next page.
  */
 class NgpPaginationNext {
     constructor() {
-        /**
-         * Access the pagination state.
-         */
-        this.paginationState = injectPaginationState();
-        /**
-         * Whether the button is disabled.
-         */
-        this.buttonDisabled = input(false, ...(ngDevMode ? [{ debugName: "buttonDisabled", alias: 'ngpPaginationNextDisabled',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpPaginationNextDisabled',
-                transform: booleanAttribute,
-            }]));
         /**
          * Whether the button is disabled.
          */
-        this.disabled = computed(() => this.buttonDisabled() ||
-            this.paginationState().disabled() ||
-            this.paginationState().lastPage(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        ngpButton({ disabled: this.disabled });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'ngpPaginationNextDisabled',
+            transform: booleanAttribute });
+        this.state = ngpPaginationNext({
+            disabled: this.disabled,
+        });
     }
     /**
      * Go to the next page.
      */
     goToNextPage() {
-        if (this.disabled()) {
-            return;
-        }
-        this.paginationState().goToPage(this.paginationState().page() + 1);
+        return this.state.goToNextPage();
     }
-    /**
-     * A click event may not be fired if this is on an anchor tag and the href is empty.
-     * This is a workaround to ensure the click event is fired.
-     */
-    onEnter(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.goToNextPage();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpPaginationNext, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpPaginationNext, isStandalone: true, selector: "[ngpPaginationNext]", inputs: { buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "ngpPaginationNextDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "goToNextPage()", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)" }, properties: { "tabindex": "disabled() ? -1 : 0", "attr.data-last-page": "paginationState().lastPage() ? \"\" : null" } }, exportAs: ["ngpPaginationNext"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPaginationNext, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpPaginationNext, isStandalone: true, selector: "[ngpPaginationNext]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpPaginationNextDisabled", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ngpPaginationNext"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpPaginationNext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPaginationNext, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpPaginationNext]',
                     exportAs: 'ngpPaginationNext',
-                    host: {
-                        '[tabindex]': 'disabled() ? -1 : 0',
-                        '[attr.data-last-page]': 'paginationState().lastPage() ? "" : null',
-                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { buttonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationNextDisabled", required: false }] }], goToNextPage: [{
-                type: HostListener,
-                args: ['click']
-            }], onEnter: [{
-                type: HostListener,
-                args: ['keydown.enter', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.space', ['$event']]
-            }] } });
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationNextDisabled", required: false }] }] } });
+
+const [NgpPaginationPreviousStateToken, ngpPaginationPrevious, injectPaginationPreviousState, providePaginationPreviousState,] = createPrimitive('NgpPaginationPrevious', ({ disabled: _disabled = signal(false) }) => {
+    const elementRef = injectElementRef();
+    const paginationState = injectPaginationState();
+    const disabled = computed(() => _disabled() || paginationState().disabled() || paginationState().firstPage(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    // Setup interactions
+    ngpButton({ disabled: disabled });
+    // Host binding
+    attrBinding(elementRef, 'tabindex', () => (disabled() ? -1 : 0));
+    dataBinding(elementRef, 'data-first-page', () => (paginationState().firstPage() ? '' : null));
+    // Listener
+    listener(elementRef, 'click', goToPreviousPage);
+    listener(elementRef, 'keydown.enter', handleOnEnter);
+    listener(elementRef, 'keydown.space', handleOnEnter);
+    function goToPreviousPage() {
+        if (disabled()) {
+            return;
+        }
+        paginationState().goToPage(paginationState().page() - 1);
+    }
+    function handleOnEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        goToPreviousPage();
+    }
+    return {
+        disabled,
+        goToPreviousPage,
+    };
+});
 
 /**
  * The `NgpPaginationPrevious` directive is used to create a pagination button that navigates to the previous page.
  */
 class NgpPaginationPrevious {
     constructor() {
-        /**
-         * Access the pagination state.
-         */
-        this.paginationState = injectPaginationState();
         /**
          * Whether the button is disabled.
          */
-        this.buttonDisabled = input(false, ...(ngDevMode ? [{ debugName: "buttonDisabled", alias: 'ngpPaginationPreviousDisabled',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpPaginationPreviousDisabled',
-                transform: booleanAttribute,
-            }]));
-        /**
-         * Whether the button is disabled.
-         */
-        this.disabled = computed(() => this.buttonDisabled() ||
-            this.paginationState().disabled() ||
-            this.paginationState().firstPage(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        ngpButton({ disabled: this.disabled });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'ngpPaginationPreviousDisabled',
+            transform: booleanAttribute });
+        this.state = ngpPaginationPrevious({
+            disabled: this.disabled,
+        });
     }
     /**
      * Go to the previous page.
      */
     goToPreviousPage() {
-        if (this.disabled()) {
-            return;
-        }
-        this.paginationState().goToPage(this.paginationState().page() - 1);
-    }
-    /**
-     * A click event may not be fired if this is on an anchor tag and the href is empty.
-     * This is a workaround to ensure the click event is fired.
-     */
-    onEnter(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.goToPreviousPage();
+        return this.state.goToPreviousPage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpPaginationPrevious, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpPaginationPrevious, isStandalone: true, selector: "[ngpPaginationPrevious]", inputs: { buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "ngpPaginationPreviousDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "goToPreviousPage()", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)" }, properties: { "tabindex": "disabled() ? -1 : 0", "attr.data-first-page": "paginationState().firstPage() ? \"\" : null" } }, exportAs: ["ngpPaginationPrevious"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPaginationPrevious, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpPaginationPrevious, isStandalone: true, selector: "[ngpPaginationPrevious]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpPaginationPreviousDisabled", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ngpPaginationPrevious"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpPaginationPrevious, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPaginationPrevious, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpPaginationPrevious]',
                     exportAs: 'ngpPaginationPrevious',
-                    host: {
-                        '[tabindex]': 'disabled() ? -1 : 0',
-                        '[attr.data-first-page]': 'paginationState().firstPage() ? "" : null',
-                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { buttonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationPreviousDisabled", required: false }] }], goToPreviousPage: [{
-                type: HostListener,
-                args: ['click']
-            }], onEnter: [{
-                type: HostListener,
-                args: ['keydown.enter', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.space', ['$event']]
-            }] } });
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationPreviousDisabled", required: false }] }] } });
 
 /**
  * The `NgpPagination` directive is used to create a pagination control.
@@ -367,13 +359,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
 class NgpPagination {
     constructor() {
         /**
-         * The currently selected page.
+         * The currently selected page. Leave unset for uncontrolled usage, where the
+         * internal state is seeded from `defaultPage`.
+         */
+        this.page = input(undefined, { ...(ngDevMode ? { debugName: "page" } : /* istanbul ignore next */ {}), alias: 'ngpPaginationPage',
+            transform: numberAttribute });
+        /**
+         * The default page for uncontrolled usage.
+         * @default 1
          */
-        this.page = input(1, ...(ngDevMode ? [{ debugName: "page", alias: 'ngpPaginationPage',
-                transform: numberAttribute }] : [{
-                alias: 'ngpPaginationPage',
-                transform: numberAttribute,
-            }]));
+        this.defaultPage = input(1, { ...(ngDevMode ? { debugName: "defaultPage" } : /* istanbul ignore next */ {}), alias: 'ngpPaginationDefaultPage',
+            transform: numberAttribute });
         /**
          * The event that is fired when the page changes.
          */
@@ -383,70 +379,47 @@ class NgpPagination {
         /**
          * The total number of pages.
          */
-        this.pageCount = input(0, ...(ngDevMode ? [{ debugName: "pageCount", alias: 'ngpPaginationPageCount',
-                transform: numberAttribute }] : [{
-                alias: 'ngpPaginationPageCount',
-                transform: numberAttribute,
-            }]));
+        this.pageCount = input(0, { ...(ngDevMode ? { debugName: "pageCount" } : /* istanbul ignore next */ {}), alias: 'ngpPaginationPageCount',
+            transform: numberAttribute });
         /**
          * Whether the pagination is disabled.
          */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpPaginationDisabled',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpPaginationDisabled',
-                transform: booleanAttribute,
-            }]));
-        /**
-         * Determine if we are on the first page.
-         * @internal
-         */
-        this.firstPage = computed(() => this.state.page() === 1, ...(ngDevMode ? [{ debugName: "firstPage" }] : []));
-        /**
-         * Determine if we are on the last page.
-         * @internal
-         */
-        this.lastPage = computed(() => this.state.page() === this.state.pageCount(), ...(ngDevMode ? [{ debugName: "lastPage" }] : []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'ngpPaginationDisabled',
+            transform: booleanAttribute });
         /**
          * The control state for the pagination.
          * @internal
          */
-        this.state = paginationState(this);
+        this.state = ngpPagination({
+            page: this.page,
+            defaultPage: this.defaultPage,
+            pageCount: this.pageCount,
+            disabled: this.disabled,
+            onPageChange: (value) => this.pageChange.emit(value),
+        });
     }
     /**
      * Go to the specified page.
      * @param page The page to go to.
      */
     goToPage(page) {
-        // check if the page is within the bounds of the pagination
-        if (page < 1 || page > this.state.pageCount()) {
-            return;
-        }
-        this.state.page.set(page);
-        this.pageChange.emit(page);
+        return this.state.goToPage(page);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpPagination, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpPagination, isStandalone: true, selector: "[ngpPagination]", inputs: { page: { classPropertyName: "page", publicName: "ngpPaginationPage", isSignal: true, isRequired: false, transformFunction: null }, pageCount: { classPropertyName: "pageCount", publicName: "ngpPaginationPageCount", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpPaginationDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "ngpPaginationPageChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.data-page": "state.page()", "attr.data-page-count": "state.pageCount()", "attr.data-first-page": "firstPage() ? \"\" : null", "attr.data-last-page": "lastPage() ? \"\" : null", "attr.data-disabled": "state.disabled() ? \"\" : null" } }, providers: [providePaginationState()], exportAs: ["ngpPagination"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPagination, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpPagination, isStandalone: true, selector: "[ngpPagination]", inputs: { page: { classPropertyName: "page", publicName: "ngpPaginationPage", isSignal: true, isRequired: false, transformFunction: null }, defaultPage: { classPropertyName: "defaultPage", publicName: "ngpPaginationDefaultPage", isSignal: true, isRequired: false, transformFunction: null }, pageCount: { classPropertyName: "pageCount", publicName: "ngpPaginationPageCount", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpPaginationDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "ngpPaginationPageChange" }, providers: [providePaginationState()], exportAs: ["ngpPagination"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpPagination, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPagination, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpPagination]',
                     exportAs: 'ngpPagination',
                     providers: [providePaginationState()],
-                    host: {
-                        role: 'navigation',
-                        '[attr.data-page]': 'state.page()',
-                        '[attr.data-page-count]': 'state.pageCount()',
-                        '[attr.data-first-page]': 'firstPage() ? "" : null',
-                        '[attr.data-last-page]': 'lastPage() ? "" : null',
-                        '[attr.data-disabled]': 'state.disabled() ? "" : null',
-                    },
                 }]
-        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationPage", required: false }] }], pageChange: [{ type: i0.Output, args: ["ngpPaginationPageChange"] }], pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationPageCount", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationDisabled", required: false }] }] } });
+        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationPage", required: false }] }], defaultPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationDefaultPage", required: false }] }], pageChange: [{ type: i0.Output, args: ["ngpPaginationPageChange"] }], pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationPageCount", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPaginationDisabled", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgpPagination, NgpPaginationButton, NgpPaginationFirst, NgpPaginationLast, NgpPaginationNext, NgpPaginationPrevious, injectPaginationState, providePaginationState };
+export { NgpPagination, NgpPaginationButton, NgpPaginationButtonStateToken, NgpPaginationFirst, NgpPaginationFirstStateToken, NgpPaginationLast, NgpPaginationLastStateToken, NgpPaginationNext, NgpPaginationNextStateToken, NgpPaginationPrevious, NgpPaginationPreviousStateToken, NgpPaginationStateToken, injectPaginationButtonState, injectPaginationFirstState, injectPaginationLastState, injectPaginationNextState, injectPaginationPreviousState, injectPaginationState, ngpPagination, ngpPaginationButton, ngpPaginationFirst, ngpPaginationLast, ngpPaginationNext, ngpPaginationPrevious, providePaginationButtonState, providePaginationFirstState, providePaginationLastState, providePaginationNextState, providePaginationPreviousState, providePaginationState };
 //# sourceMappingURL=ng-primitives-pagination.mjs.map