feat(pagination): add new pagination component (#106)

## PR Checklist

Please check if your PR fulfills the following requirements:

<!--- [ ] Tests for the changes have been added (for bug
fixes/features)-->

- [x] Docs have been added/updated (for bug fixes/features)

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [ ] Bugfix
- [x] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no API changes)
- [ ] Build related changes
- [ ] CI-related changes
- [x] Documentation content changes
- [ ] Other... Please describe:

## Issue Number

<!-- Bugs and features must be linked to an issue. -->

Issue Number: N/A

## Does this PR introduce a breaking change?

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

- [ ] Yes
- [x] No

## Other information

Remaining works to do:
- [x] fix icons in first/last and prev/next button
- [x] possibility to use custom icons, like in accordion
(#95)
- [ ] ~~possibility to customize buttons' label + internalization~~
- [x] implement different size variables
- [x] remove duplications from
`libs/flowbite-angular/core/flowbite.theme.init.ts`
- [x] remove unused pageChange output
- [x] create InjectionTokens for properties (tabs, pageSize, etc..)
- [x] use a cleaner way to customize `PaginationButtonDirective` (big
thanks @MGREMY )
- [x] requested changes

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

## Release Notes: Flowbite Angular Pagination Component

- **New Features**
- Introduced multiple Pagination components with various configurations,
including default, custom, and text navigation modes.
- Added support for customizable pagination styles and attributes such
as current page, total items, and page size.
- Expanded the available SVG icons for navigation.

- **Documentation**
- Updated documentation with comprehensive examples for different
pagination styles and configurations.
- Added compatibility information for library versions with Angular and
TailwindCSS.

- **Improvements**
  - Enhanced theming capabilities for pagination components.
  - Improved error handling for page navigation controls.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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"
+  }
+}