feat(pagination): add new pagination component

apps/docs/docs/components/pagination/_both.component.html

@@ -0,0 +1,3 @@
+<flowbite-pagination
+  [totalItems]="100"
+  [navigationMode]="'both'" />

apps/docs/docs/components/pagination/_both.component.ts

@@ -0,0 +1,10 @@
+import { PaginationComponent } from 'flowbite-angular/pagination';
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'flowbite-demo-pagination-both',
+  imports: [PaginationComponent],
+  templateUrl: './_both.component.html',
+})
+export class FlowbiteBothComponent {}

apps/docs/docs/components/pagination/_custom.component.html

@@ -0,0 +1,9 @@
+<flowbite-pagination
+  [currentPage]="20"
+  [totalItems]="100000"
+  [pageSize]="50"
+  [hasFirstLast]="false"
+  [ariaLabel]="'Custom pagination'"
+  [customStyle]="{
+    root: { base: 'flex gap-2' },
+  }" />

apps/docs/docs/components/pagination/_custom.component.ts

@@ -0,0 +1,10 @@
+import { PaginationComponent } from 'flowbite-angular/pagination';
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'flowbite-demo-pagination-custom',
+  imports: [PaginationComponent],
+  templateUrl: './_custom.component.html',
+})
+export class FlowbiteCustomComponent {}

apps/docs/docs/components/pagination/_default.component.html

@@ -0,0 +1 @@
+<flowbite-pagination [totalItems]="1000" />

apps/docs/docs/components/pagination/_default.component.ts

@@ -0,0 +1,10 @@
+import { PaginationComponent } from 'flowbite-angular/pagination';
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'flowbite-demo-pagination-default',
+  imports: [PaginationComponent],
+  templateUrl: './_default.component.html',
+})
+export class FlowbiteDefaultComponent {}

apps/docs/docs/components/pagination/_text.component.html

@@ -0,0 +1,3 @@
+<flowbite-pagination
+  [totalItems]="100"
+  [navigationMode]="'text'" />

apps/docs/docs/components/pagination/_text.component.ts

@@ -0,0 +1,10 @@
+import { PaginationComponent } from 'flowbite-angular/pagination';
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'flowbite-demo-pagination-text',
+  imports: [PaginationComponent],
+  templateUrl: './_text.component.html',
+})
+export class FlowbiteTextComponent {}

apps/docs/docs/components/pagination/index.md

@@ -0,0 +1,51 @@
+---
+keyword: PaginationPage
+---
+
+## Default pagination
+
+{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
+
+```angular-html file="./_default.component.html" group="default" name="html"
+
+```
+
+```angular-ts file="./_default.component.ts" group="default" name="typescript"
+
+```
+
+## Pagination with text
+
+{{ NgDocActions.demo('flowbiteTextComponent', {container: false}) }}
+
+```angular-html file="./_text.component.html" group="text" name="html"
+
+```
+
+```angular-ts file="./_text.component.ts"#L1 group="text" name="typescript"
+
+```
+
+## Pagination with text and icon
+
+{{ NgDocActions.demo('flowbiteBothComponent', {container: false}) }}
+
+```angular-html file="./_both.component.html" group="both" name="html"
+
+```
+
+```angular-ts file="./_both.component.ts"#L1 group="both" name="typescript"
+
+```
+
+## Customized pagination
+
+{{ NgDocActions.demo('flowbiteCustomComponent', {container: false}) }}
+
+```angular-html file="./_custom.component.html" group="custom" name="html"
+
+```
+
+```angular-ts file="./_custom.component.ts"#L1 group="custom" name="typescript"
+
+```

apps/docs/docs/components/pagination/ng-doc.page.ts

@@ -0,0 +1,27 @@
+import ComponentCategory from '../ng-doc.category';
+import { FlowbiteBothComponent } from './_both.component';
+import { FlowbiteCustomComponent } from './_custom.component';
+import { FlowbiteDefaultComponent } from './_default.component';
+import { FlowbiteTextComponent } from './_text.component';
+
+import type { NgDocPage } from '@ng-doc/core';
+
+/**
+ * Use the pagination component to show a list of buttons to navigate in your tables
+ *
+ * @status:info NEW
+ */
+const pagination: NgDocPage = {
+  title: 'Pagination',
+  mdFile: './index.md',
+  category: ComponentCategory,
+  order: 10,
+  demos: {
+    flowbiteDefaultComponent: FlowbiteDefaultComponent,
+    flowbiteTextComponent: FlowbiteTextComponent,
+    flowbiteBothComponent: FlowbiteBothComponent,
+    flowbiteCustomComponent: FlowbiteCustomComponent,
+  },
+};
+
+export default pagination;

apps/docs/docs/getting-started/quickstart/ng-doc.page.ts

@@ -5,7 +5,7 @@ import type { NgDocPage } from '@ng-doc/core';
 /**
  * Get started with flowbite-angular by including it into your project using NPM
  *
- * @status:alert UPDATES
+ * @status:success UPDATES
  */
 const Quickstart: NgDocPage = {
   title: 'Quickstart',

apps/docs/docs/getting-started/versioning/index.md

@@ -6,6 +6,8 @@ keyword: VersioningPage
 
 | Flowbite-angular version | Angular version | TailwindCSS version |
 | ------------------------ | --------------- | ------------------- |
+| 1.4.0                    | >=18.0.0        | ^3.0.0              |
+| 1.3.0                    | >=18.0.0        | ^3.0.0              |
 | 1.2.0                    | >=18.0.0        | ^3.0.0              |
 | 1.1.1                    | 18.0.0          | ^3.0.24             |
 | 1.0.0                    | 18.0.0          | ^3.0.24             |

apps/docs/docs/getting-started/versioning/ng-doc.page.ts

@@ -6,7 +6,7 @@ import type { NgDocPage } from '@ng-doc/core';
  * Here is a reference table that matches versions of flowbite-angular with its Angular version. It
  * also shows the TailwindCSS version used.
  *
- * @status:alert NEW
+ * @status:info NEW
  */
 const Versioning: NgDocPage = {
   title: 'Versioning',

apps/docs/docs/ng-doc.api.ts

@@ -32,6 +32,7 @@ const api: NgDocApi = {
         'libs/flowbite-angular/indicator/index.ts',
         'libs/flowbite-angular/modal/index.ts',
         'libs/flowbite-angular/navbar/index.ts',
+        'libs/flowbite-angular/pagination/index.ts',
         'libs/flowbite-angular/scroll-top/index.ts',
         'libs/flowbite-angular/sidebar/index.ts',
         'libs/flowbite-angular/theme/index.ts',

libs/flowbite-angular/core/flowbite.theme.init.ts

@@ -118,6 +118,12 @@ import {
   navbarToggleTheme,
   NavbarToggleThemeService,
 } from 'flowbite-angular/navbar';
+import {
+  FLOWBITE_PAGINATION_THEME_TOKEN,
+  paginationDefaultValueProvider,
+  paginationTheme,
+  PaginationThemeService,
+} from 'flowbite-angular/pagination';
 import {
   FLOWBITE_SCROLL_TOP_THEME_TOKEN,
   scrollTopDefaultValueProvider,
@@ -263,6 +269,10 @@ export function initFlowbite(): EnvironmentProviders {
       provide: NavbarThemeService,
       useClass: NavbarThemeService,
     },
+    {
+      provide: PaginationThemeService,
+      useClass: PaginationThemeService,
+    },
     {
       provide: ScrollTopThemeService,
       useClass: ScrollTopThemeService,
@@ -391,6 +401,10 @@ export function initFlowbite(): EnvironmentProviders {
       provide: FLOWBITE_NAVBAR_THEME_TOKEN,
       useValue: navbarTheme,
     },
+    {
+      provide: FLOWBITE_PAGINATION_THEME_TOKEN,
+      useValue: paginationTheme,
+    },
     {
       provide: FLOWBITE_SCROLL_TOP_THEME_TOKEN,
       useValue: scrollTopTheme,
@@ -447,6 +461,7 @@ export function initFlowbite(): EnvironmentProviders {
     navbarIconButtonDefaultValueProvider,
     navbarContentDefaultValueProvider,
     navbarBrandDefaultThemeProvider,
+    paginationDefaultValueProvider,
     scrollTopDefaultValueProvider,
     sidebarDefaultValueProvider,
     sidebarToggleDefaultValueProvider,

libs/flowbite-angular/pagination/README.md

@@ -0,0 +1,4 @@
+# flowbite-angular/pagination
+
+Secondary entry point of `flowbite-angular`. It can be used by importing from
+`flowbite-angular/pagination`.

libs/flowbite-angular/pagination/index.ts

@@ -0,0 +1,23 @@
+export {
+  PaginationComponent,
+  paginationDefaultValueProvider,
+  FLOWBITE_PAGINATION_CURRENT_PAGE_DEFAULT_VALUE,
+  FLOWBITE_PAGINATION_BUTTON_PROPERTIES_DEFAULT_VALUE,
+  FLOWBITE_PAGINATION_CUSTOM_STYLE_DEFAULT_VALUE,
+  FLOWBITE_PAGINATION_PREVIOUS_ICON_DEFAULT_VALUE,
+  FLOWBITE_PAGINATION_NEXT_ICON_DEFAULT_VALUE,
+  FLOWBITE_PAGINATION_FIRST_ICON_DEFAULT_VALUE,
+  FLOWBITE_PAGINATION_LAST_ICON_DEFAULT_VALUE,
+  FLOWBITE_PAGINATION_TABS_DEFAULT_VALUE,
+  FLOWBITE_PAGINATION_PAGE_SIZE_DEFAULT_VALUE,
+  FLOWBITE_PAGINATION_HAS_FIRST_LAST_DEFAULT_VALUE,
+  FLOWBITE_PAGINATION_HAS_PREV_NEXT_DEFAULT_VALUE,
+  FLOWBITE_PAGINATION_NAVIGATION_MODE_DEFAULT_VALUE,
+  FLOWBITE_PAGINATION_SIZE_DEFAULT_VALUE,
+} from './pagination.component';
+export type { PaginationProperties, PaginationClass, PaginationTheme } from './pagination.theme';
+export { paginationTheme } from './pagination.theme';
+export {
+  PaginationThemeService,
+  FLOWBITE_PAGINATION_THEME_TOKEN,
+} from './pagination.theme.service';

libs/flowbite-angular/pagination/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "./index.ts"
+  }
+}