flowbite-angular 1.3.0 → 20.0.2

package/fesm2022/flowbite-angular-pagination.mjs

@@ -0,0 +1,994 @@
+import { createTheme, mergeDeep, colorToTheme } from 'flowbite-angular';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, computed, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import { provideButtonState } from 'ng-primitives/button';
+import * as i2 from 'ng-primitives/interactions';
+import { NgpFocus } from 'ng-primitives/interactions';
+import * as i1 from 'ng-primitives/pagination';
+import { NgpPaginationButton, NgpPaginationFirst, NgpPaginationLast, NgpPaginationNext, NgpPaginationPrevious, injectPaginationState, NgpPagination } from 'ng-primitives/pagination';
+import { twMerge } from 'tailwind-merge';
+import { Icon } from 'flowbite-angular/icon';
+import { chevronDoubleLeft, chevronDoubleRight, chevronRight, chevronLeft } from 'flowbite-angular/icon/outline/arrows';
+import { provideIcons } from '@ng-icons/core';
+
+const flowbitePaginationTheme = createTheme({
+    host: {
+        base: '',
+        transition: '',
+    },
+    container: {
+        base: 'inline-flex -space-x-px text-sm',
+        transition: '',
+    },
+});
+
+const defaultFlowbitePaginationConfig = {
+    baseTheme: flowbitePaginationTheme,
+    tabs: 5,
+    color: 'default',
+    size: 'md',
+    customTheme: {},
+};
+const FlowbitePaginationConfigToken = new InjectionToken('FlowbitePaginationConfigToken');
+/**
+ * Provide the default Pagination configuration
+ * @param config The Pagination configuration
+ * @returns The provider
+ */
+const provideFlowbitePaginationConfig = (config) => [
+    {
+        provide: FlowbitePaginationConfigToken,
+        useValue: { ...defaultFlowbitePaginationConfig, ...config },
+    },
+];
+/**
+ * Inject the Pagination configuration
+ * @see {@link defaultFlowbitePaginationConfig}
+ * @returns The configuration
+ */
+const injectFlowbitePaginationConfig = () => inject(FlowbitePaginationConfigToken, { optional: true }) ?? defaultFlowbitePaginationConfig;
+
+const flowbitePaginationButtonTheme = createTheme({
+    host: {
+        base: 'inline-flex h-full cursor-pointer items-center justify-center border border-transparent text-center font-medium',
+        transition: '',
+        focus: 'data-focus:outline-none data-focus-visible:outline-2',
+        disabled: 'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        size: {
+            xs: 'min-w-8 px-2 py-2 text-xs',
+            sm: 'min-w-9 px-2.5 py-2.5 text-sm',
+            md: 'text-md min-w-10 px-3 py-2.5',
+            lg: 'min-w-11 px-3.5 py-3.5 text-lg',
+            xl: 'min-w-12 px-4 py-4 text-xl',
+        },
+        colorOutline: {
+            default: {
+                light: 'border-gray-700 text-gray-700 data-hover:bg-gray-700 data-hover:text-gray-100 data-selected:bg-gray-700 data-selected:text-gray-100',
+                dark: 'dark:border-gray-300 dark:text-gray-300 dark:data-hover:bg-gray-300 dark:data-hover:text-gray-700 dark:data-selected:bg-gray-300 dark:data-selected:text-gray-700',
+            },
+            info: {
+                light: 'border-blue-700 text-blue-700 data-hover:bg-blue-700 data-hover:text-gray-100 data-selected:bg-blue-700 data-selected:text-gray-100',
+                dark: 'dark:border-blue-700 dark:text-blue-600 dark:data-hover:bg-blue-700 dark:data-hover:text-gray-100 dark:data-selected:bg-blue-700 dark:data-selected:text-gray-100',
+            },
+            failure: {
+                light: 'border-red-700 text-red-700 data-hover:bg-red-700 data-hover:text-red-100 data-selected:bg-red-700 data-selected:text-red-100',
+                dark: 'dark:border-red-700 dark:text-red-600 dark:data-hover:bg-red-700 dark:data-hover:text-gray-100 dark:data-selected:bg-red-700 dark:data-selected:text-gray-100',
+            },
+            success: {
+                light: 'border-green-700 text-green-700 data-hover:bg-green-700 data-hover:text-green-100 data-selected:bg-green-700 data-selected:text-green-100',
+                dark: 'dark:border-green-700 dark:text-green-600 dark:data-hover:bg-green-700 dark:data-hover:text-gray-100 dark:data-selected:bg-green-700 dark:data-selected:text-gray-100',
+            },
+            warning: {
+                light: 'border-yellow-700 text-yellow-700 data-hover:bg-yellow-700 data-hover:text-yellow-100 data-selected:bg-yellow-700 data-selected:text-yellow-100',
+                dark: 'dark:border-yellow-700 dark:text-yellow-600 dark:data-hover:bg-yellow-700 dark:data-hover:text-gray-100 dark:data-selected:bg-yellow-700 dark:data-selected:text-gray-100',
+            },
+            primary: {
+                light: 'border-primary-700 text-primary-700 data-hover:bg-primary-700 data-hover:text-primary-100 data-selected:bg-primary-700 data-selected:text-primary-100',
+                dark: 'dark:border-primary-700 dark:text-primary-600 dark:data-hover:bg-primary-700 dark:data-selected:bg-primary-700 dark:data-hover:text-gray-100 dark:data-selected:text-gray-100',
+            },
+        },
+    },
+});
+
+const defaultFlowbitePaginationButtonConfig = {
+    baseTheme: flowbitePaginationButtonTheme,
+    color: 'default',
+    size: 'md',
+    outline: false,
+    customTheme: {},
+};
+const FlowbitePaginationButtonConfigToken = new InjectionToken('FlowbitePaginationButtonConfigToken');
+/**
+ * Provide the default PaginationButton configuration
+ * @param config The PaginationButton configuration
+ * @returns The provider
+ */
+const provideFlowbitePaginationButtonConfig = (config) => [
+    {
+        provide: FlowbitePaginationButtonConfigToken,
+        useValue: { ...defaultFlowbitePaginationButtonConfig, ...config },
+    },
+];
+/**
+ * Inject the PaginationButton configuration
+ * @see {@link defaultFlowbitePaginationButtonConfig}
+ * @returns The configuration
+ */
+const injectFlowbitePaginationButtonConfig = () => inject(FlowbitePaginationButtonConfigToken, { optional: true }) ??
+    defaultFlowbitePaginationButtonConfig;
+
+const FlowbitePaginationButtonStateToken = createStateToken('Flowbite PaginationButton');
+const provideFlowbitePaginationButtonState = createStateProvider(FlowbitePaginationButtonStateToken);
+const injectFlowbitePaginationButtonState = createStateInjector(FlowbitePaginationButtonStateToken);
+const flowbitePaginationButtonState = createState(FlowbitePaginationButtonStateToken);
+
+class PaginationButton {
+    constructor() {
+        this.config = injectFlowbitePaginationButtonConfig();
+        /**
+         * @see {@link injectFlowbitePaginationFirstConfig}
+         */
+        this.color = input(this.config.color);
+        /**
+         * @see {@link injectFlowbitePaginationFirstConfig}
+         */
+        this.size = input(this.config.size);
+        /**
+         * @see {@link injectFlowbitePaginationFirstConfig}
+         */
+        this.outline = input(this.config.outline, {
+            transform: booleanAttribute,
+        });
+        /**
+         * @see {@link injectFlowbitePaginationButtonConfig}
+         */
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, mergedTheme.host.transition, mergedTheme.host.focus, mergedTheme.host.disabled, mergedTheme.host.size[this.state.size()], colorToTheme(mergedTheme.host.colorOutline, this.state.color())),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbitePaginationButtonState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PaginationButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: PaginationButton, isStandalone: true, selector: "\n    button[flowbitePaginationButton]\n  ", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbitePaginationButtonState(), provideButtonState()], exportAs: ["flowbitePaginationButton"], hostDirectives: [{ directive: i1.NgpPaginationButton, inputs: ["ngpPaginationButtonDisabled", "disabled", "ngpPaginationButtonPage", "page"] }, { directive: i2.NgpFocus }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PaginationButton, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: `
+    button[flowbitePaginationButton]
+  `,
+                    exportAs: 'flowbitePaginationButton',
+                    hostDirectives: [
+                        {
+                            directive: NgpPaginationButton,
+                            inputs: [' ngpPaginationButtonDisabled:disabled', 'ngpPaginationButtonPage:page'],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpFocus,
+                            inputs: [],
+                            outputs: [],
+                        },
+                    ],
+                    imports: [],
+                    providers: [provideFlowbitePaginationButtonState(), provideButtonState()],
+                    host: { '[class]': `theme().host.root` },
+                    template: `<ng-content />`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+const flowbitePaginationFirstTheme = createTheme({
+    host: {
+        base: 'inline-flex h-full cursor-pointer items-center justify-center rounded-l-md border border-transparent text-center font-medium *:[flowbite-icon]:w-full *:[flowbite-icon]:stroke-3',
+        transition: '',
+        focus: 'data-focus:outline-none data-focus-visible:outline-2',
+        disabled: 'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        size: {
+            xs: 'w-8 px-2 py-2 text-xs',
+            sm: 'w-9 px-2.5 py-2.5 text-sm',
+            md: 'text-md w-10 px-3 py-2.5',
+            lg: 'w-11 px-3.5 py-3.5 text-lg',
+            xl: 'w-12 px-4 py-4 text-xl',
+        },
+        colorOutline: {
+            default: {
+                light: 'border-gray-700 text-gray-700 data-hover:bg-gray-700 data-hover:text-gray-100',
+                dark: 'dark:border-gray-300 dark:text-gray-300 dark:data-hover:bg-gray-300 dark:data-hover:text-gray-700',
+            },
+            info: {
+                light: 'border-blue-700 text-blue-700 data-hover:bg-blue-700 data-hover:text-gray-100',
+                dark: 'dark:border-blue-700 dark:text-blue-600 dark:data-hover:bg-blue-700 dark:data-hover:text-gray-100',
+            },
+            failure: {
+                light: 'border-red-700 text-red-700 data-hover:bg-red-700 data-hover:text-red-100',
+                dark: 'dark:border-red-700 dark:text-red-600 dark:data-hover:bg-red-700 dark:data-hover:text-gray-100',
+            },
+            success: {
+                light: 'border-green-700 text-green-700 data-hover:bg-green-700 data-hover:text-green-100',
+                dark: 'dark:border-green-700 dark:text-green-600 dark:data-hover:bg-green-700 dark:data-hover:text-gray-100',
+            },
+            warning: {
+                light: 'border-yellow-700 text-yellow-700 data-hover:bg-yellow-700 data-hover:text-yellow-100',
+                dark: 'dark:border-yellow-700 dark:text-yellow-600 dark:data-hover:bg-yellow-700 dark:data-hover:text-gray-100',
+            },
+            primary: {
+                light: 'border-primary-700 text-primary-700 data-hover:bg-primary-700 data-hover:text-primary-100',
+                dark: 'dark:border-primary-700 dark:text-primary-600 dark:data-hover:bg-primary-700 dark:data-hover:text-gray-100',
+            },
+        },
+    },
+});
+
+const defaultFlowbitePaginationFirstConfig = {
+    baseTheme: flowbitePaginationFirstTheme,
+    color: 'default',
+    size: 'md',
+    outline: false,
+    customTheme: {},
+};
+const FlowbitePaginationFirstConfigToken = new InjectionToken('FlowbitePaginationFirstConfigToken');
+/**
+ * Provide the default PaginationFirst configuration
+ * @param config The PaginationFirst configuration
+ * @returns The provider
+ */
+const provideFlowbitePaginationFirstConfig = (config) => [
+    {
+        provide: FlowbitePaginationFirstConfigToken,
+        useValue: { ...defaultFlowbitePaginationFirstConfig, ...config },
+    },
+];
+/**
+ * Inject the PaginationFirst configuration
+ * @see {@link defaultFlowbitePaginationFirstConfig}
+ * @returns The configuration
+ */
+const injectFlowbitePaginationFirstConfig = () => inject(FlowbitePaginationFirstConfigToken, { optional: true }) ??
+    defaultFlowbitePaginationFirstConfig;
+
+const FlowbitePaginationFirstStateToken = createStateToken('Flowbite PaginationFirst');
+const provideFlowbitePaginationFirstState = createStateProvider(FlowbitePaginationFirstStateToken);
+const injectFlowbitePaginationFirstState = createStateInjector(FlowbitePaginationFirstStateToken);
+const flowbitePaginationFirstState = createState(FlowbitePaginationFirstStateToken);
+
+class PaginationFirst {
+    constructor() {
+        this.config = injectFlowbitePaginationFirstConfig();
+        /**
+         * @see {@link injectFlowbitePaginationFirstConfig}
+         */
+        this.color = input(this.config.color);
+        /**
+         * @see {@link injectFlowbitePaginationFirstConfig}
+         */
+        this.size = input(this.config.size);
+        /**
+         * @see {@link injectFlowbitePaginationFirstConfig}
+         */
+        this.outline = input(this.config.outline, {
+            transform: booleanAttribute,
+        });
+        /**
+         * @see {@link injectFlowbitePaginationFirstConfig}
+         */
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, mergedTheme.host.transition, mergedTheme.host.focus, mergedTheme.host.disabled, mergedTheme.host.size[this.state.size()], colorToTheme(mergedTheme.host.colorOutline, this.state.color())),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbitePaginationFirstState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PaginationFirst, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: PaginationFirst, isStandalone: true, selector: "\n    button[flowbitePaginationFirst]\n  ", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [
+            provideFlowbitePaginationFirstState(),
+            provideButtonState(),
+            provideIcons({ chevronDoubleLeft }),
+        ], exportAs: ["flowbitePaginationFirst"], hostDirectives: [{ directive: i1.NgpPaginationFirst, inputs: ["ngpPaginationFirstDisabled", "disabled"] }, { directive: i2.NgpFocus }], ngImport: i0, template: `<flowbite-icon name="chevronDoubleLeft" />`, isInline: true, dependencies: [{ kind: "component", type: Icon, selector: "flowbite-icon", inputs: ["name", "svg", "color", "customTheme"], exportAs: ["flowbiteIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PaginationFirst, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: `
+    button[flowbitePaginationFirst]
+  `,
+                    exportAs: 'flowbitePaginationFirst',
+                    hostDirectives: [
+                        {
+                            directive: NgpPaginationFirst,
+                            inputs: ['ngpPaginationFirstDisabled:disabled'],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpFocus,
+                            inputs: [],
+                            outputs: [],
+                        },
+                    ],
+                    imports: [Icon],
+                    providers: [
+                        provideFlowbitePaginationFirstState(),
+                        provideButtonState(),
+                        provideIcons({ chevronDoubleLeft }),
+                    ],
+                    host: { '[class]': `theme().host.root` },
+                    template: `<flowbite-icon name="chevronDoubleLeft" />`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+const flowbitePaginationLastTheme = createTheme({
+    host: {
+        base: 'inline-flex h-full cursor-pointer items-center justify-center rounded-r-md border border-transparent text-center font-medium *:[flowbite-icon]:w-full *:[flowbite-icon]:stroke-3',
+        transition: '',
+        focus: 'data-focus:outline-none data-focus-visible:outline-2',
+        disabled: 'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        size: {
+            xs: 'w-8 px-2 py-2 text-xs',
+            sm: 'w-9 px-2.5 py-2.5 text-sm',
+            md: 'text-md w-10 px-3 py-2.5',
+            lg: 'w-11 px-3.5 py-3.5 text-lg',
+            xl: 'w-12 px-4 py-4 text-xl',
+        },
+        colorOutline: {
+            default: {
+                light: 'border-gray-700 text-gray-700 data-hover:bg-gray-700 data-hover:text-gray-100',
+                dark: 'dark:border-gray-300 dark:text-gray-300 dark:data-hover:bg-gray-300 dark:data-hover:text-gray-700',
+            },
+            info: {
+                light: 'border-blue-700 text-blue-700 data-hover:bg-blue-700 data-hover:text-gray-100',
+                dark: 'dark:border-blue-700 dark:text-blue-600 dark:data-hover:bg-blue-700 dark:data-hover:text-gray-100',
+            },
+            failure: {
+                light: 'border-red-700 text-red-700 data-hover:bg-red-700 data-hover:text-red-100',
+                dark: 'dark:border-red-700 dark:text-red-600 dark:data-hover:bg-red-700 dark:data-hover:text-gray-100',
+            },
+            success: {
+                light: 'border-green-700 text-green-700 data-hover:bg-green-700 data-hover:text-green-100',
+                dark: 'dark:border-green-700 dark:text-green-600 dark:data-hover:bg-green-700 dark:data-hover:text-gray-100',
+            },
+            warning: {
+                light: 'border-yellow-700 text-yellow-700 data-hover:bg-yellow-700 data-hover:text-yellow-100',
+                dark: 'dark:border-yellow-700 dark:text-yellow-600 dark:data-hover:bg-yellow-700 dark:data-hover:text-gray-100',
+            },
+            primary: {
+                light: 'border-primary-700 text-primary-700 data-hover:bg-primary-700 data-hover:text-primary-100',
+                dark: 'dark:border-primary-700 dark:text-primary-600 dark:data-hover:bg-primary-700 dark:data-hover:text-gray-100',
+            },
+        },
+    },
+});
+
+const defaultFlowbitePaginationLastConfig = {
+    baseTheme: flowbitePaginationLastTheme,
+    color: 'default',
+    size: 'md',
+    outline: false,
+    customTheme: {},
+};
+const FlowbitePaginationLastConfigToken = new InjectionToken('FlowbitePaginationLastConfigToken');
+/**
+ * Provide the default PaginationLast configuration
+ * @param config The PaginationLast configuration
+ * @returns The provider
+ */
+const provideFlowbitePaginationLastConfig = (config) => [
+    {
+        provide: FlowbitePaginationLastConfigToken,
+        useValue: { ...defaultFlowbitePaginationLastConfig, ...config },
+    },
+];
+/**
+ * Inject the PaginationLast configuration
+ * @see {@link defaultFlowbitePaginationLastConfig}
+ * @returns The configuration
+ */
+const injectFlowbitePaginationLastConfig = () => inject(FlowbitePaginationLastConfigToken, { optional: true }) ??
+    defaultFlowbitePaginationLastConfig;
+
+const FlowbitePaginationLastStateToken = createStateToken('Flowbite PaginationLast');
+const provideFlowbitePaginationLastState = createStateProvider(FlowbitePaginationLastStateToken);
+const injectFlowbitePaginationLastState = createStateInjector(FlowbitePaginationLastStateToken);
+const flowbitePaginationLastState = createState(FlowbitePaginationLastStateToken);
+
+class PaginationLast {
+    constructor() {
+        this.config = injectFlowbitePaginationLastConfig();
+        /**
+         * @see {@link injectFlowbitePaginationLastConfig}
+         */
+        this.color = input(this.config.color);
+        /**
+         * @see {@link injectFlowbitePaginationLastConfig}
+         */
+        this.size = input(this.config.size);
+        /**
+         * @see {@link injectFlowbitePaginationLastConfig}
+         */
+        this.outline = input(this.config.outline, {
+            transform: booleanAttribute,
+        });
+        /**
+         * @see {@link injectFlowbitePaginationLastConfig}
+         */
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, mergedTheme.host.transition, mergedTheme.host.focus, mergedTheme.host.disabled, mergedTheme.host.size[this.state.size()], colorToTheme(mergedTheme.host.colorOutline, this.state.color())),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbitePaginationLastState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PaginationLast, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: PaginationLast, isStandalone: true, selector: "\n    button[flowbitePaginationLast]\n  ", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [
+            provideFlowbitePaginationLastState(),
+            provideButtonState(),
+            provideIcons({ chevronDoubleRight }),
+        ], exportAs: ["flowbitePaginationLast"], hostDirectives: [{ directive: i1.NgpPaginationLast, inputs: ["ngpPaginationLastDisabled", "disabled"] }, { directive: i2.NgpFocus }], ngImport: i0, template: `<flowbite-icon name="chevronDoubleRight" />`, isInline: true, dependencies: [{ kind: "component", type: Icon, selector: "flowbite-icon", inputs: ["name", "svg", "color", "customTheme"], exportAs: ["flowbiteIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PaginationLast, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: `
+    button[flowbitePaginationLast]
+  `,
+                    exportAs: 'flowbitePaginationLast',
+                    hostDirectives: [
+                        {
+                            directive: NgpPaginationLast,
+                            inputs: ['ngpPaginationLastDisabled:disabled'],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpFocus,
+                            inputs: [],
+                            outputs: [],
+                        },
+                    ],
+                    imports: [Icon],
+                    providers: [
+                        provideFlowbitePaginationLastState(),
+                        provideButtonState(),
+                        provideIcons({ chevronDoubleRight }),
+                    ],
+                    host: { '[class]': `theme().host.root` },
+                    template: `<flowbite-icon name="chevronDoubleRight" />`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+const flowbitePaginationNextTheme = createTheme({
+    host: {
+        base: 'inline-flex h-full cursor-pointer items-center justify-center border border-transparent text-center font-medium *:[flowbite-icon]:w-full *:[flowbite-icon]:stroke-3',
+        transition: '',
+        focus: 'data-focus:outline-none data-focus-visible:outline-2',
+        disabled: 'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        size: {
+            xs: 'w-8 px-2 py-2 text-xs',
+            sm: 'w-9 px-2.5 py-2.5 text-sm',
+            md: 'text-md w-10 px-3 py-2.5',
+            lg: 'w-11 px-3.5 py-3.5 text-lg',
+            xl: 'w-12 px-4 py-4 text-xl',
+        },
+        colorOutline: {
+            default: {
+                light: 'border-gray-700 text-gray-700 data-hover:bg-gray-700 data-hover:text-gray-100',
+                dark: 'dark:border-gray-300 dark:text-gray-300 dark:data-hover:bg-gray-300 dark:data-hover:text-gray-700',
+            },
+            info: {
+                light: 'border-blue-700 text-blue-700 data-hover:bg-blue-700 data-hover:text-gray-100',
+                dark: 'dark:border-blue-700 dark:text-blue-600 dark:data-hover:bg-blue-700 dark:data-hover:text-gray-100',
+            },
+            failure: {
+                light: 'border-red-700 text-red-700 data-hover:bg-red-700 data-hover:text-red-100',
+                dark: 'dark:border-red-700 dark:text-red-600 dark:data-hover:bg-red-700 dark:data-hover:text-gray-100',
+            },
+            success: {
+                light: 'border-green-700 text-green-700 data-hover:bg-green-700 data-hover:text-green-100',
+                dark: 'dark:border-green-700 dark:text-green-600 dark:data-hover:bg-green-700 dark:data-hover:text-gray-100',
+            },
+            warning: {
+                light: 'border-yellow-700 text-yellow-700 data-hover:bg-yellow-700 data-hover:text-yellow-100',
+                dark: 'dark:border-yellow-700 dark:text-yellow-600 dark:data-hover:bg-yellow-700 dark:data-hover:text-gray-100',
+            },
+            primary: {
+                light: 'border-primary-700 text-primary-700 data-hover:bg-primary-700 data-hover:text-primary-100',
+                dark: 'dark:border-primary-700 dark:text-primary-600 dark:data-hover:bg-primary-700 dark:data-hover:text-gray-100',
+            },
+        },
+    },
+});
+
+const defaultFlowbitePaginationNextConfig = {
+    baseTheme: flowbitePaginationNextTheme,
+    color: 'default',
+    size: 'md',
+    outline: false,
+    customTheme: {},
+};
+const FlowbitePaginationNextConfigToken = new InjectionToken('FlowbitePaginationNextConfigToken');
+/**
+ * Provide the default PaginationNext configuration
+ * @param config The PaginationNext configuration
+ * @returns The provider
+ */
+const provideFlowbitePaginationNextConfig = (config) => [
+    {
+        provide: FlowbitePaginationNextConfigToken,
+        useValue: { ...defaultFlowbitePaginationNextConfig, ...config },
+    },
+];
+/**
+ * Inject the PaginationNext configuration
+ * @see {@link defaultFlowbitePaginationNextConfig}
+ * @returns The configuration
+ */
+const injectFlowbitePaginationNextConfig = () => inject(FlowbitePaginationNextConfigToken, { optional: true }) ??
+    defaultFlowbitePaginationNextConfig;
+
+const FlowbitePaginationNextStateToken = createStateToken('Flowbite PaginationNext');
+const provideFlowbitePaginationNextState = createStateProvider(FlowbitePaginationNextStateToken);
+const injectFlowbitePaginationNextState = createStateInjector(FlowbitePaginationNextStateToken);
+const flowbitePaginationNextState = createState(FlowbitePaginationNextStateToken);
+
+class PaginationNext {
+    constructor() {
+        this.config = injectFlowbitePaginationNextConfig();
+        /**
+         * @see {@link injectFlowbitePaginationNextConfig}
+         */
+        this.color = input(this.config.color);
+        /**
+         * @see {@link injectFlowbitePaginationNextConfig}
+         */
+        this.size = input(this.config.size);
+        /**
+         * @see {@link injectFlowbitePaginationNextConfig}
+         */
+        this.outline = input(this.config.outline, {
+            transform: booleanAttribute,
+        });
+        /**
+         * @see {@link injectFlowbitePaginationFirstConfig}
+         */
+        /**
+         * @see {@link injectFlowbitePaginationNextConfig}
+         */
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, mergedTheme.host.transition, mergedTheme.host.focus, mergedTheme.host.disabled, mergedTheme.host.size[this.state.size()], colorToTheme(mergedTheme.host.colorOutline, this.state.color())),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbitePaginationNextState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PaginationNext, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: PaginationNext, isStandalone: true, selector: "\n    button[flowbitePaginationNext]\n  ", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [
+            provideFlowbitePaginationNextState(),
+            provideButtonState(),
+            provideIcons({ chevronRight }),
+        ], exportAs: ["flowbitePaginationNext"], hostDirectives: [{ directive: i1.NgpPaginationNext, inputs: ["ngpPaginationNextDisabled", "disabled"] }, { directive: i2.NgpFocus }], ngImport: i0, template: `<flowbite-icon name="chevronRight" />`, isInline: true, dependencies: [{ kind: "component", type: Icon, selector: "flowbite-icon", inputs: ["name", "svg", "color", "customTheme"], exportAs: ["flowbiteIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PaginationNext, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: `
+    button[flowbitePaginationNext]
+  `,
+                    exportAs: 'flowbitePaginationNext',
+                    hostDirectives: [
+                        {
+                            directive: NgpPaginationNext,
+                            inputs: ['ngpPaginationNextDisabled:disabled'],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpFocus,
+                            inputs: [],
+                            outputs: [],
+                        },
+                    ],
+                    imports: [Icon],
+                    providers: [
+                        provideFlowbitePaginationNextState(),
+                        provideButtonState(),
+                        provideIcons({ chevronRight }),
+                    ],
+                    host: { '[class]': `theme().host.root` },
+                    template: `<flowbite-icon name="chevronRight" />`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+const flowbitePaginationPreviousTheme = createTheme({
+    host: {
+        base: 'inline-flex h-full cursor-pointer items-center justify-center border border-transparent text-center font-medium *:[flowbite-icon]:w-full *:[flowbite-icon]:stroke-3',
+        transition: '',
+        focus: 'data-focus:outline-none data-focus-visible:outline-2',
+        disabled: 'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        size: {
+            xs: 'w-8 px-2 py-2 text-xs',
+            sm: 'w-9 px-2.5 py-2.5 text-sm',
+            md: 'text-md w-10 px-3 py-2.5',
+            lg: 'w-11 px-3.5 py-3.5 text-lg',
+            xl: 'w-12 px-4 py-4 text-xl',
+        },
+        colorOutline: {
+            default: {
+                light: 'border-gray-700 text-gray-700 data-hover:bg-gray-700 data-hover:text-gray-100',
+                dark: 'dark:border-gray-300 dark:text-gray-300 dark:data-hover:bg-gray-300 dark:data-hover:text-gray-700',
+            },
+            info: {
+                light: 'border-blue-700 text-blue-700 data-hover:bg-blue-700 data-hover:text-gray-100',
+                dark: 'dark:border-blue-700 dark:text-blue-600 dark:data-hover:bg-blue-700 dark:data-hover:text-gray-100',
+            },
+            failure: {
+                light: 'border-red-700 text-red-700 data-hover:bg-red-700 data-hover:text-red-100',
+                dark: 'dark:border-red-700 dark:text-red-600 dark:data-hover:bg-red-700 dark:data-hover:text-gray-100',
+            },
+            success: {
+                light: 'border-green-700 text-green-700 data-hover:bg-green-700 data-hover:text-green-100',
+                dark: 'dark:border-green-700 dark:text-green-600 dark:data-hover:bg-green-700 dark:data-hover:text-gray-100',
+            },
+            warning: {
+                light: 'border-yellow-700 text-yellow-700 data-hover:bg-yellow-700 data-hover:text-yellow-100',
+                dark: 'dark:border-yellow-700 dark:text-yellow-600 dark:data-hover:bg-yellow-700 dark:data-hover:text-gray-100',
+            },
+            primary: {
+                light: 'border-primary-700 text-primary-700 data-hover:bg-primary-700 data-hover:text-primary-100',
+                dark: 'dark:border-primary-700 dark:text-primary-600 dark:data-hover:bg-primary-700 dark:data-hover:text-gray-100',
+            },
+        },
+    },
+});
+
+const defaultFlowbitePaginationPreviousConfig = {
+    baseTheme: flowbitePaginationPreviousTheme,
+    color: 'default',
+    size: 'md',
+    outline: false,
+    customTheme: {},
+};
+const FlowbitePaginationPreviousConfigToken = new InjectionToken('FlowbitePaginationPreviousConfigToken');
+/**
+ * Provide the default PaginationPrevious configuration
+ * @param config The PaginationPrevious configuration
+ * @returns The provider
+ */
+const provideFlowbitePaginationPreviousConfig = (config) => [
+    {
+        provide: FlowbitePaginationPreviousConfigToken,
+        useValue: { ...defaultFlowbitePaginationPreviousConfig, ...config },
+    },
+];
+/**
+ * Inject the PaginationPrevious configuration
+ * @see {@link defaultFlowbitePaginationPreviousConfig}
+ * @returns The configuration
+ */
+const injectFlowbitePaginationPreviousConfig = () => inject(FlowbitePaginationPreviousConfigToken, { optional: true }) ??
+    defaultFlowbitePaginationPreviousConfig;
+
+const FlowbitePaginationPreviousStateToken = createStateToken('Flowbite PaginationPrevious');
+const provideFlowbitePaginationPreviousState = createStateProvider(FlowbitePaginationPreviousStateToken);
+const injectFlowbitePaginationPreviousState = createStateInjector(FlowbitePaginationPreviousStateToken);
+const flowbitePaginationPreviousState = createState(FlowbitePaginationPreviousStateToken);
+
+class PaginationPrevious {
+    constructor() {
+        this.config = injectFlowbitePaginationPreviousConfig();
+        /**
+         * @see {@link injectFlowbitePaginationPreviousConfig}
+         */
+        this.color = input(this.config.color);
+        /**
+         * @see {@link injectFlowbitePaginationPreviousConfig}
+         */
+        this.size = input(this.config.size);
+        /**
+         * @see {@link injectFlowbitePaginationPreviousConfig}
+         */
+        this.outline = input(this.config.outline, {
+            transform: booleanAttribute,
+        });
+        /**
+         * @see {@link injectFlowbitePaginationPreviousConfig}
+         */
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, mergedTheme.host.transition, mergedTheme.host.focus, mergedTheme.host.disabled, mergedTheme.host.size[this.state.size()], colorToTheme(mergedTheme.host.colorOutline, this.state.color())),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbitePaginationPreviousState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PaginationPrevious, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: PaginationPrevious, isStandalone: true, selector: "\n    button[flowbitePaginationPrevious]\n  ", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [
+            provideFlowbitePaginationPreviousState(),
+            provideButtonState(),
+            provideIcons({ chevronLeft }),
+        ], exportAs: ["flowbitePaginationPrevious"], hostDirectives: [{ directive: i1.NgpPaginationPrevious, inputs: ["ngpPaginationPreviousDisabled", "disabled"] }, { directive: i2.NgpFocus }], ngImport: i0, template: `<flowbite-icon name="chevronLeft" />`, isInline: true, dependencies: [{ kind: "component", type: Icon, selector: "flowbite-icon", inputs: ["name", "svg", "color", "customTheme"], exportAs: ["flowbiteIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PaginationPrevious, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: `
+    button[flowbitePaginationPrevious]
+  `,
+                    exportAs: 'flowbitePaginationPrevious',
+                    hostDirectives: [
+                        {
+                            directive: NgpPaginationPrevious,
+                            inputs: ['ngpPaginationPreviousDisabled:disabled'],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpFocus,
+                            inputs: [],
+                            outputs: [],
+                        },
+                    ],
+                    imports: [Icon],
+                    providers: [
+                        provideFlowbitePaginationPreviousState(),
+                        provideButtonState(),
+                        provideIcons({ chevronLeft }),
+                    ],
+                    host: { '[class]': `theme().host.root` },
+                    template: `<flowbite-icon name="chevronLeft" />`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+const FlowbitePaginationStateToken = createStateToken('Flowbite Pagination');
+const provideFlowbitePaginationState = createStateProvider(FlowbitePaginationStateToken);
+const injectFlowbitePaginationState = createStateInjector(FlowbitePaginationStateToken);
+const flowbitePaginationState = createState(FlowbitePaginationStateToken);
+
+class Pagination {
+    constructor() {
+        this.paginationState = injectPaginationState();
+        this.config = injectFlowbitePaginationConfig();
+        /**
+         * Value of how many page tabs to display
+         */
+        this.visiblePagesCount = computed(() => {
+            return Math.min(this.state.tabs(), this.paginationState().pageCount());
+        });
+        /**
+         * Value of the first visible page
+         */
+        this.firstPageToShow = computed(() => {
+            if (this.paginationState().page() <= Math.floor(this.state.tabs() / 2)) {
+                return 1;
+            }
+            if (this.paginationState().page() >
+                this.paginationState().pageCount() - Math.ceil(this.state.tabs() / 2)) {
+                return this.paginationState().pageCount() - this.visiblePagesCount() + 1;
+            }
+            return this.paginationState().page() - Math.floor(this.tabs() / 2);
+        });
+        /**
+         * Array of the visible page tabs
+         */
+        this.visiblePages = computed(() => {
+            return Array.from({ length: this.visiblePagesCount() }, (_, i) => this.firstPageToShow() + i);
+        });
+        this.pages = computed(() => Array.from({ length: this.paginationState().pageCount() }).map((_, i) => i + 1));
+        /**
+         * @see {@link injectFlowbitePaginationConfig}
+         */
+        this.tabs = input(this.config.tabs);
+        /**
+         * @see {@link injectFlowbitePaginationConfig}
+         */
+        this.color = input(this.config.color);
+        /**
+         * @see {@link injectFlowbitePaginationConfig}
+         */
+        this.size = input(this.config.size);
+        /**
+         * @see {@link injectFlowbitePaginationConfig}
+         */
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, mergedTheme.host.transition),
+                },
+                container: {
+                    root: twMerge(mergedTheme.container.base, mergedTheme.container.transition),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbitePaginationState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Pagination, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: Pagination, isStandalone: true, selector: "\n    nav[flowbitePagination]\n  ", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [
+            provideFlowbitePaginationState(),
+            provideIcons({ chevronLeft, chevronDoubleLeft, chevronRight, chevronDoubleRight }),
+        ], exportAs: ["flowbitePagination"], hostDirectives: [{ directive: i1.NgpPagination, inputs: ["ngpPaginationPage", "page", "ngpPaginationPageCount", "pageCount", "ngpPaginationDisabled", "disabled"], outputs: ["ngpPaginationPageChange", "pageChange"] }], ngImport: i0, template: `
+    <ul [class]="theme().container.root">
+      <li>
+        <button
+          flowbitePaginationFirst
+          outline
+          [color]="state.color()"
+          [size]="state.size()"
+          aria-label="First Page"></button>
+      </li>
+      <li>
+        <button
+          flowbitePaginationPrevious
+          outline
+          [color]="state.color()"
+          [size]="state.size()"
+          aria-label="Previous Page"></button>
+      </li>
+      @for (page of visiblePages(); track $index) {
+        <li>
+          <button
+            flowbitePaginationButton
+            outline
+            [color]="state.color()"
+            [size]="state.size()"
+            [page]="page"
+            [attr.aria-label]="'Page' + page">
+            {{ page }}
+          </button>
+        </li>
+      }
+      <li>
+        <button
+          flowbitePaginationNext
+          outline
+          [color]="state.color()"
+          [size]="state.size()"
+          aria-label="Next Page"></button>
+      </li>
+      <li>
+        <button
+          flowbitePaginationLast
+          outline
+          [color]="state.color()"
+          [size]="state.size()"
+          aria-label="Last Page"></button>
+      </li>
+    </ul>
+  `, isInline: true, dependencies: [{ kind: "component", type: PaginationLast, selector: "\n    button[flowbitePaginationLast]\n  ", inputs: ["color", "size", "outline", "customTheme"], exportAs: ["flowbitePaginationLast"] }, { kind: "component", type: PaginationNext, selector: "\n    button[flowbitePaginationNext]\n  ", inputs: ["color", "size", "outline", "customTheme"], exportAs: ["flowbitePaginationNext"] }, { kind: "component", type: PaginationFirst, selector: "\n    button[flowbitePaginationFirst]\n  ", inputs: ["color", "size", "outline", "customTheme"], exportAs: ["flowbitePaginationFirst"] }, { kind: "component", type: PaginationButton, selector: "\n    button[flowbitePaginationButton]\n  ", inputs: ["color", "size", "outline", "customTheme"], exportAs: ["flowbitePaginationButton"] }, { kind: "component", type: PaginationPrevious, selector: "\n    button[flowbitePaginationPrevious]\n  ", inputs: ["color", "size", "outline", "customTheme"], exportAs: ["flowbitePaginationPrevious"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Pagination, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: `
+    nav[flowbitePagination]
+  `,
+                    exportAs: 'flowbitePagination',
+                    hostDirectives: [
+                        {
+                            directive: NgpPagination,
+                            inputs: [
+                                'ngpPaginationPage:page',
+                                'ngpPaginationPageCount:pageCount',
+                                'ngpPaginationDisabled:disabled',
+                            ],
+                            outputs: ['ngpPaginationPageChange:pageChange'],
+                        },
+                    ],
+                    imports: [PaginationLast, PaginationNext, PaginationFirst, PaginationButton, PaginationPrevious],
+                    providers: [
+                        provideFlowbitePaginationState(),
+                        provideIcons({ chevronLeft, chevronDoubleLeft, chevronRight, chevronDoubleRight }),
+                    ],
+                    host: { '[class]': `theme().host.root` },
+                    template: `
+    <ul [class]="theme().container.root">
+      <li>
+        <button
+          flowbitePaginationFirst
+          outline
+          [color]="state.color()"
+          [size]="state.size()"
+          aria-label="First Page"></button>
+      </li>
+      <li>
+        <button
+          flowbitePaginationPrevious
+          outline
+          [color]="state.color()"
+          [size]="state.size()"
+          aria-label="Previous Page"></button>
+      </li>
+      @for (page of visiblePages(); track $index) {
+        <li>
+          <button
+            flowbitePaginationButton
+            outline
+            [color]="state.color()"
+            [size]="state.size()"
+            [page]="page"
+            [attr.aria-label]="'Page' + page">
+            {{ page }}
+          </button>
+        </li>
+      }
+      <li>
+        <button
+          flowbitePaginationNext
+          outline
+          [color]="state.color()"
+          [size]="state.size()"
+          aria-label="Next Page"></button>
+      </li>
+      <li>
+        <button
+          flowbitePaginationLast
+          outline
+          [color]="state.color()"
+          [size]="state.size()"
+          aria-label="Last Page"></button>
+      </li>
+    </ul>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+/* Pagination */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FlowbitePaginationButtonConfigToken, FlowbitePaginationButtonStateToken, FlowbitePaginationConfigToken, FlowbitePaginationFirstConfigToken, FlowbitePaginationFirstStateToken, FlowbitePaginationLastConfigToken, FlowbitePaginationLastStateToken, FlowbitePaginationNextConfigToken, FlowbitePaginationNextStateToken, FlowbitePaginationPreviousConfigToken, FlowbitePaginationPreviousStateToken, FlowbitePaginationStateToken, Pagination, PaginationButton, PaginationFirst, PaginationLast, PaginationNext, PaginationPrevious, defaultFlowbitePaginationButtonConfig, defaultFlowbitePaginationConfig, defaultFlowbitePaginationFirstConfig, defaultFlowbitePaginationLastConfig, defaultFlowbitePaginationNextConfig, defaultFlowbitePaginationPreviousConfig, flowbitePaginationButtonState, flowbitePaginationButtonTheme, flowbitePaginationFirstState, flowbitePaginationFirstTheme, flowbitePaginationLastState, flowbitePaginationLastTheme, flowbitePaginationNextState, flowbitePaginationNextTheme, flowbitePaginationPreviousState, flowbitePaginationPreviousTheme, flowbitePaginationState, flowbitePaginationTheme, injectFlowbitePaginationButtonConfig, injectFlowbitePaginationButtonState, injectFlowbitePaginationConfig, injectFlowbitePaginationFirstConfig, injectFlowbitePaginationFirstState, injectFlowbitePaginationLastConfig, injectFlowbitePaginationLastState, injectFlowbitePaginationNextConfig, injectFlowbitePaginationNextState, injectFlowbitePaginationPreviousConfig, injectFlowbitePaginationPreviousState, injectFlowbitePaginationState, provideFlowbitePaginationButtonConfig, provideFlowbitePaginationButtonState, provideFlowbitePaginationConfig, provideFlowbitePaginationFirstConfig, provideFlowbitePaginationFirstState, provideFlowbitePaginationLastConfig, provideFlowbitePaginationLastState, provideFlowbitePaginationNextConfig, provideFlowbitePaginationNextState, provideFlowbitePaginationPreviousConfig, provideFlowbitePaginationPreviousState, provideFlowbitePaginationState };
+//# sourceMappingURL=flowbite-angular-pagination.mjs.map