feat(pagination): move button design to its own directive

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

@@ -119,7 +119,12 @@ import {
   NavbarToggleThemeService,
 } from 'flowbite-angular/navbar';
 import {
+  FLOWBITE_PAGINATION_BUTTON_THEME_TOKEN,
   FLOWBITE_PAGINATION_THEME_TOKEN,
+  paginationButtonDefaultValueProvider,
+  paginationButtonTheme,
+  PaginationButtonThemeService,
+  paginationDefaultValueProvider,
   paginationTheme,
   PaginationThemeService,
 } from 'flowbite-angular/pagination';
@@ -248,10 +253,6 @@ export function initFlowbite(): EnvironmentProviders {
       provide: NavbarBrandThemeService,
       useClass: NavbarBrandThemeService,
     },
-    {
-      provide: PaginationThemeService,
-      useClass: PaginationThemeService,
-    },
     {
       provide: NavbarContentThemeService,
       useClass: NavbarContentThemeService,
@@ -272,6 +273,14 @@ export function initFlowbite(): EnvironmentProviders {
       provide: NavbarThemeService,
       useClass: NavbarThemeService,
     },
+    {
+      provide: PaginationThemeService,
+      useClass: PaginationThemeService,
+    },
+    {
+      provide: PaginationButtonThemeService,
+      useClass: PaginationButtonThemeService,
+    },
     {
       provide: ScrollTopThemeService,
       useClass: ScrollTopThemeService,
@@ -384,10 +393,6 @@ export function initFlowbite(): EnvironmentProviders {
       provide: FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN,
       useValue: navbarContentTheme,
     },
-    {
-      provide: FLOWBITE_PAGINATION_THEME_TOKEN,
-      useValue: paginationTheme,
-    },
     {
       provide: FLOWBITE_NAVBAR_ITEM_THEME_TOKEN,
       useValue: navbarItemTheme,
@@ -404,6 +409,14 @@ export function initFlowbite(): EnvironmentProviders {
       provide: FLOWBITE_NAVBAR_THEME_TOKEN,
       useValue: navbarTheme,
     },
+    {
+      provide: FLOWBITE_PAGINATION_THEME_TOKEN,
+      useValue: paginationTheme,
+    },
+    {
+      provide: FLOWBITE_PAGINATION_BUTTON_THEME_TOKEN,
+      useValue: paginationButtonTheme,
+    },
     {
       provide: FLOWBITE_SCROLL_TOP_THEME_TOKEN,
       useValue: scrollTopTheme,
@@ -460,6 +473,8 @@ export function initFlowbite(): EnvironmentProviders {
     navbarIconButtonDefaultValueProvider,
     navbarContentDefaultValueProvider,
     navbarBrandDefaultThemeProvider,
+    paginationDefaultValueProvider,
+    paginationButtonDefaultValueProvider,
     scrollTopDefaultValueProvider,
     sidebarDefaultValueProvider,
     sidebarToggleDefaultValueProvider,

libs/flowbite-angular/pagination/index.ts

@@ -1,7 +1,26 @@
-export { PaginationComponent } from './pagination.component';
+export {
+  PaginationComponent,
+  paginationDefaultValueProvider,
+  FLOWBITE_PAGINATION_CUSTOM_STYLE_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';
+
+export {
+  paginationButtonDefaultValueProvider,
+  FLOWBITE_PAGINATION_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE,
+} from './pagination-button.directive';
+export type {
+  PaginationButtonProperties,
+  PaginationButtonClass,
+  PaginationButtonTheme,
+} from './pagination-button.theme';
+export { paginationButtonTheme } from './pagination-button.theme';
+export {
+  PaginationButtonThemeService,
+  FLOWBITE_PAGINATION_BUTTON_THEME_TOKEN,
+} from './pagination-button.theme.service';

libs/flowbite-angular/pagination/pagination-button.directive.ts

@@ -0,0 +1,44 @@
+import type { PaginationButtonClass, PaginationButtonTheme } from './pagination-button.theme';
+import { PaginationButtonThemeService } from './pagination-button.theme.service';
+
+import type { DeepPartial } from 'flowbite-angular';
+import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
+
+import {
+  Directive,
+  inject,
+  InjectionToken,
+  input,
+  makeEnvironmentProviders,
+  model,
+} from '@angular/core';
+
+export const FLOWBITE_PAGINATION_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<PaginationButtonTheme>
+>('FLOWBITE_PAGINATION_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const paginationButtonDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_PAGINATION_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
+@Directive({
+  standalone: true,
+  selector: 'button[flowbitePaginationButton]',
+})
+export class PaginationButtonDirective extends BaseComponent<PaginationButtonClass> {
+  public readonly themeService = inject(PaginationButtonThemeService);
+
+  public readonly active = input(false);
+
+  public customStyle = model(inject(FLOWBITE_PAGINATION_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE));
+
+  public override fetchClass(): PaginationButtonClass {
+    return this.themeService.getClasses({
+      active: booleanToFlowbiteBoolean(this.active()),
+      customStyle: this.customStyle(),
+    });
+  }
+}

libs/flowbite-angular/pagination/pagination-button.theme.service.ts

@@ -0,0 +1,42 @@
+import type {
+  PaginationButtonClass,
+  PaginationButtonProperties,
+  PaginationButtonTheme,
+} from './pagination-button.theme';
+
+import type { FlowbiteThemeService } from 'flowbite-angular';
+import { mergeTheme } from 'flowbite-angular/utils';
+
+import { inject, Injectable, InjectionToken } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * `InjectionToken` used to import `PaginationButtonTheme` value
+ *
+ * @example
+ * ```
+ * var theme = inject(FLOWBITE_PAGINATION_BUTTON_THEME_TOKEN)
+ * ```
+ */
+export const FLOWBITE_PAGINATION_BUTTON_THEME_TOKEN = new InjectionToken<PaginationButtonTheme>(
+  'FLOWBITE_PAGINATION_BUTTON_THEME_TOKEN'
+);
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PaginationButtonThemeService
+  implements FlowbiteThemeService<PaginationButtonProperties>
+{
+  public readonly baseTheme = inject(FLOWBITE_PAGINATION_BUTTON_THEME_TOKEN);
+
+  public getClasses(properties: PaginationButtonProperties): PaginationButtonClass {
+    const theme: PaginationButtonTheme = mergeTheme(this.baseTheme, properties.customStyle);
+
+    const output: PaginationButtonClass = {
+      rootClass: twMerge(theme.root.base, theme.root.active[properties.active]),
+    };
+
+    return output;
+  }
+}

libs/flowbite-angular/pagination/pagination-button.theme.ts

@@ -0,0 +1,38 @@
+import type { DeepPartial, FlowbiteBoolean, FlowbiteClass } from 'flowbite-angular';
+import { createTheme } from 'flowbite-angular/utils';
+
+/**
+ * Required properties for the class generation of `PaginationButtonDirective`
+ */
+export interface PaginationButtonProperties {
+  active: keyof FlowbiteBoolean;
+  customStyle: DeepPartial<PaginationButtonTheme>;
+}
+
+/**
+ * Theme definition for `PaginationButtonDirective`
+ */
+export interface PaginationButtonTheme {
+  root: {
+    base: string;
+    active: FlowbiteBoolean;
+  };
+}
+
+/**
+ * Default theme value for `PaginationButtonDirective`
+ */
+export const paginationButtonTheme: PaginationButtonTheme = createTheme({
+  root: {
+    base: 'flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white first:rounded-l-lg last:rounded-r-lg',
+    active: {
+      enabled: 'bg-red-500 dark:bg-red-700',
+      disabled: '',
+    },
+  },
+});
+
+/**
+ * Generated class definition for `PaginationButtonDirective`
+ */
+export type PaginationButtonClass = FlowbiteClass;