flowbite-angular 20.1.2 → 21.0.0

package/fesm2022/flowbite-angular-pagination.mjs

@@ -129,21 +129,19 @@ class PaginationButton {
         /**
          * @see {@link injectFlowbitePaginationFirstConfig}
          */
-        this.color = input(this.config.color);
+        this.color = input(this.config.color, ...(ngDevMode ? [{ debugName: "color" }] : []));
         /**
          * @see {@link injectFlowbitePaginationFirstConfig}
          */
-        this.size = input(this.config.size);
+        this.size = input(this.config.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
         /**
          * @see {@link injectFlowbitePaginationFirstConfig}
          */
-        this.outline = input(this.config.outline, {
-            transform: booleanAttribute,
-        });
+        this.outline = input(this.config.outline, { ...(ngDevMode ? { debugName: "outline" } : {}), transform: booleanAttribute });
         /**
          * @see {@link injectFlowbitePaginationButtonConfig}
          */
-        this.customTheme = input(this.config.customTheme);
+        this.customTheme = input(this.config.customTheme, ...(ngDevMode ? [{ debugName: "customTheme" }] : []));
         this.theme = computed(() => {
             const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
             return {
@@ -151,21 +149,21 @@ class PaginationButton {
                     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())),
                 },
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "theme" }] : []));
         /**
          * @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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PaginationButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PaginationButton, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    selector: `
-    button[flowbitePaginationButton]
+                    selector: `
+    button[flowbitePaginationButton]
   `,
                     exportAs: 'flowbitePaginationButton',
                     hostDirectives: [
@@ -187,7 +185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], customTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTheme", required: false }] }] } });
 
 const flowbitePaginationFirstTheme = createTheme({
     host: {
@@ -269,21 +267,19 @@ class PaginationFirst {
         /**
          * @see {@link injectFlowbitePaginationFirstConfig}
          */
-        this.color = input(this.config.color);
+        this.color = input(this.config.color, ...(ngDevMode ? [{ debugName: "color" }] : []));
         /**
          * @see {@link injectFlowbitePaginationFirstConfig}
          */
-        this.size = input(this.config.size);
+        this.size = input(this.config.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
         /**
          * @see {@link injectFlowbitePaginationFirstConfig}
          */
-        this.outline = input(this.config.outline, {
-            transform: booleanAttribute,
-        });
+        this.outline = input(this.config.outline, { ...(ngDevMode ? { debugName: "outline" } : {}), transform: booleanAttribute });
         /**
          * @see {@link injectFlowbitePaginationFirstConfig}
          */
-        this.customTheme = input(this.config.customTheme);
+        this.customTheme = input(this.config.customTheme, ...(ngDevMode ? [{ debugName: "customTheme" }] : []));
         this.theme = computed(() => {
             const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
             return {
@@ -291,25 +287,25 @@ class PaginationFirst {
                     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())),
                 },
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "theme" }] : []));
         /**
          * @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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PaginationFirst, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PaginationFirst, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    selector: `
-    button[flowbitePaginationFirst]
+                    selector: `
+    button[flowbitePaginationFirst]
   `,
                     exportAs: 'flowbitePaginationFirst',
                     hostDirectives: [
@@ -335,7 +331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], customTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTheme", required: false }] }] } });
 
 const flowbitePaginationLastTheme = createTheme({
     host: {
@@ -417,21 +413,19 @@ class PaginationLast {
         /**
          * @see {@link injectFlowbitePaginationLastConfig}
          */
-        this.color = input(this.config.color);
+        this.color = input(this.config.color, ...(ngDevMode ? [{ debugName: "color" }] : []));
         /**
          * @see {@link injectFlowbitePaginationLastConfig}
          */
-        this.size = input(this.config.size);
+        this.size = input(this.config.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
         /**
          * @see {@link injectFlowbitePaginationLastConfig}
          */
-        this.outline = input(this.config.outline, {
-            transform: booleanAttribute,
-        });
+        this.outline = input(this.config.outline, { ...(ngDevMode ? { debugName: "outline" } : {}), transform: booleanAttribute });
         /**
          * @see {@link injectFlowbitePaginationLastConfig}
          */
-        this.customTheme = input(this.config.customTheme);
+        this.customTheme = input(this.config.customTheme, ...(ngDevMode ? [{ debugName: "customTheme" }] : []));
         this.theme = computed(() => {
             const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
             return {
@@ -439,25 +433,25 @@ class PaginationLast {
                     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())),
                 },
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "theme" }] : []));
         /**
          * @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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PaginationLast, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PaginationLast, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    selector: `
-    button[flowbitePaginationLast]
+                    selector: `
+    button[flowbitePaginationLast]
   `,
                     exportAs: 'flowbitePaginationLast',
                     hostDirectives: [
@@ -483,7 +477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], customTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTheme", required: false }] }] } });
 
 const flowbitePaginationNextTheme = createTheme({
     host: {
@@ -565,24 +559,22 @@ class PaginationNext {
         /**
          * @see {@link injectFlowbitePaginationNextConfig}
          */
-        this.color = input(this.config.color);
+        this.color = input(this.config.color, ...(ngDevMode ? [{ debugName: "color" }] : []));
         /**
          * @see {@link injectFlowbitePaginationNextConfig}
          */
-        this.size = input(this.config.size);
+        this.size = input(this.config.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
         /**
          * @see {@link injectFlowbitePaginationNextConfig}
          */
-        this.outline = input(this.config.outline, {
-            transform: booleanAttribute,
-        });
+        this.outline = input(this.config.outline, { ...(ngDevMode ? { debugName: "outline" } : {}), transform: booleanAttribute });
         /**
          * @see {@link injectFlowbitePaginationFirstConfig}
          */
         /**
          * @see {@link injectFlowbitePaginationNextConfig}
          */
-        this.customTheme = input(this.config.customTheme);
+        this.customTheme = input(this.config.customTheme, ...(ngDevMode ? [{ debugName: "customTheme" }] : []));
         this.theme = computed(() => {
             const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
             return {
@@ -590,25 +582,25 @@ class PaginationNext {
                     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())),
                 },
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "theme" }] : []));
         /**
          * @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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PaginationNext, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PaginationNext, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    selector: `
-    button[flowbitePaginationNext]
+                    selector: `
+    button[flowbitePaginationNext]
   `,
                     exportAs: 'flowbitePaginationNext',
                     hostDirectives: [
@@ -634,7 +626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], customTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTheme", required: false }] }] } });
 
 const flowbitePaginationPreviousTheme = createTheme({
     host: {
@@ -716,21 +708,19 @@ class PaginationPrevious {
         /**
          * @see {@link injectFlowbitePaginationPreviousConfig}
          */
-        this.color = input(this.config.color);
+        this.color = input(this.config.color, ...(ngDevMode ? [{ debugName: "color" }] : []));
         /**
          * @see {@link injectFlowbitePaginationPreviousConfig}
          */
-        this.size = input(this.config.size);
+        this.size = input(this.config.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
         /**
          * @see {@link injectFlowbitePaginationPreviousConfig}
          */
-        this.outline = input(this.config.outline, {
-            transform: booleanAttribute,
-        });
+        this.outline = input(this.config.outline, { ...(ngDevMode ? { debugName: "outline" } : {}), transform: booleanAttribute });
         /**
          * @see {@link injectFlowbitePaginationPreviousConfig}
          */
-        this.customTheme = input(this.config.customTheme);
+        this.customTheme = input(this.config.customTheme, ...(ngDevMode ? [{ debugName: "customTheme" }] : []));
         this.theme = computed(() => {
             const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
             return {
@@ -738,25 +728,25 @@ class PaginationPrevious {
                     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())),
                 },
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "theme" }] : []));
         /**
          * @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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PaginationPrevious, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PaginationPrevious, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    selector: `
-    button[flowbitePaginationPrevious]
+                    selector: `
+    button[flowbitePaginationPrevious]
   `,
                     exportAs: 'flowbitePaginationPrevious',
                     hostDirectives: [
@@ -782,7 +772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], customTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTheme", required: false }] }] } });
 
 const FlowbitePaginationStateToken = createStateToken('Flowbite Pagination');
 const provideFlowbitePaginationState = createStateProvider(FlowbitePaginationStateToken);
@@ -798,7 +788,7 @@ class Pagination {
          */
         this.visiblePagesCount = computed(() => {
             return Math.min(this.state.tabs(), this.paginationState().pageCount());
-        });
+        }, ...(ngDevMode ? [{ debugName: "visiblePagesCount" }] : []));
         /**
          * Value of the first visible page
          */
@@ -811,30 +801,30 @@ class Pagination {
                 return this.paginationState().pageCount() - this.visiblePagesCount() + 1;
             }
             return this.paginationState().page() - Math.floor(this.tabs() / 2);
-        });
+        }, ...(ngDevMode ? [{ debugName: "firstPageToShow" }] : []));
         /**
          * 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));
+        }, ...(ngDevMode ? [{ debugName: "visiblePages" }] : []));
+        this.pages = computed(() => Array.from({ length: this.paginationState().pageCount() }).map((_, i) => i + 1), ...(ngDevMode ? [{ debugName: "pages" }] : []));
         /**
          * @see {@link injectFlowbitePaginationConfig}
          */
-        this.tabs = input(this.config.tabs);
+        this.tabs = input(this.config.tabs, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
         /**
          * @see {@link injectFlowbitePaginationConfig}
          */
-        this.color = input(this.config.color);
+        this.color = input(this.config.color, ...(ngDevMode ? [{ debugName: "color" }] : []));
         /**
          * @see {@link injectFlowbitePaginationConfig}
          */
-        this.size = input(this.config.size);
+        this.size = input(this.config.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
         /**
          * @see {@link injectFlowbitePaginationConfig}
          */
-        this.customTheme = input(this.config.customTheme);
+        this.customTheme = input(this.config.customTheme, ...(ngDevMode ? [{ debugName: "customTheme" }] : []));
         this.theme = computed(() => {
             const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
             return {
@@ -845,72 +835,72 @@ class Pagination {
                     root: twMerge(mergedTheme.container.base, mergedTheme.container.transition),
                 },
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "theme" }] : []));
         /**
          * @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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Pagination, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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>
+        ], 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Pagination, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    selector: `
-    nav[flowbitePagination]
+                    selector: `
+    nav[flowbitePagination]
   `,
                     exportAs: 'flowbitePagination',
                     hostDirectives: [
@@ -930,59 +920,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         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>
+                    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,
                 }]
-        }] });
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], customTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTheme", required: false }] }] } });
 
 /* Pagination */