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 -->

Author: MGREMY

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;