diff --git a/apps/docs/docs/components/pagination/_custom.component.html b/apps/docs/docs/components/pagination/_custom.component.html index 122e24f4..c072c096 100644 --- a/apps/docs/docs/components/pagination/_custom.component.html +++ b/apps/docs/docs/components/pagination/_custom.component.html @@ -6,12 +6,4 @@ [ariaLabel]="'Custom pagination'" [customStyle]="{ navigation: { base: 'flex gap-2' }, - }" - [buttonCustomStyle]="{ - root: { - base: 'flex justify-center items-center h-8 min-w-8 bg-neutral-400 dark:bg-neutral-700 text-black dark:text-white hover:bg-neutral-300 hover:dark:bg-neutral-600 rounded-full text-sm', - active: { - enabled: 'bg-blue-400 dark:bg-blue-700 hover:bg-blue-300 hover:dark:bg-blue-600', - }, - }, }" /> diff --git a/apps/docs/docs/components/pagination/ng-doc.page.ts b/apps/docs/docs/components/pagination/ng-doc.page.ts index 8ce7debb..c5f84115 100644 --- a/apps/docs/docs/components/pagination/ng-doc.page.ts +++ b/apps/docs/docs/components/pagination/ng-doc.page.ts @@ -6,6 +6,11 @@ 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', diff --git a/apps/docs/docs/getting-started/quickstart/ng-doc.page.ts b/apps/docs/docs/getting-started/quickstart/ng-doc.page.ts index 600ae44c..0d5fc9a6 100644 --- a/apps/docs/docs/getting-started/quickstart/ng-doc.page.ts +++ b/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', diff --git a/apps/docs/docs/getting-started/versioning/index.md b/apps/docs/docs/getting-started/versioning/index.md index 37c571c0..0d9ceb35 100644 --- a/apps/docs/docs/getting-started/versioning/index.md +++ b/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 | diff --git a/apps/docs/docs/getting-started/versioning/ng-doc.page.ts b/apps/docs/docs/getting-started/versioning/ng-doc.page.ts index 161c026c..5bbf3680 100644 --- a/apps/docs/docs/getting-started/versioning/ng-doc.page.ts +++ b/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', diff --git a/libs/flowbite-angular/core/flowbite.theme.init.ts b/libs/flowbite-angular/core/flowbite.theme.init.ts index c8f6cae4..f68c5585 100644 --- a/libs/flowbite-angular/core/flowbite.theme.init.ts +++ b/libs/flowbite-angular/core/flowbite.theme.init.ts @@ -119,11 +119,7 @@ import { NavbarToggleThemeService, } from 'flowbite-angular/navbar'; import { - FLOWBITE_PAGINATION_BUTTON_THEME_TOKEN, FLOWBITE_PAGINATION_THEME_TOKEN, - paginationButtonDefaultValueProvider, - paginationButtonTheme, - PaginationButtonThemeService, paginationDefaultValueProvider, paginationTheme, PaginationThemeService, @@ -277,10 +273,6 @@ export function initFlowbite(): EnvironmentProviders { provide: PaginationThemeService, useClass: PaginationThemeService, }, - { - provide: PaginationButtonThemeService, - useClass: PaginationButtonThemeService, - }, { provide: ScrollTopThemeService, useClass: ScrollTopThemeService, @@ -413,10 +405,6 @@ export function initFlowbite(): EnvironmentProviders { provide: FLOWBITE_PAGINATION_THEME_TOKEN, useValue: paginationTheme, }, - { - provide: FLOWBITE_PAGINATION_BUTTON_THEME_TOKEN, - useValue: paginationButtonTheme, - }, { provide: FLOWBITE_SCROLL_TOP_THEME_TOKEN, useValue: scrollTopTheme, @@ -474,7 +462,6 @@ export function initFlowbite(): EnvironmentProviders { navbarContentDefaultValueProvider, navbarBrandDefaultThemeProvider, paginationDefaultValueProvider, - paginationButtonDefaultValueProvider, scrollTopDefaultValueProvider, sidebarDefaultValueProvider, sidebarToggleDefaultValueProvider, diff --git a/libs/flowbite-angular/pagination/index.ts b/libs/flowbite-angular/pagination/index.ts index 4597b3ef..30b36ad2 100644 --- a/libs/flowbite-angular/pagination/index.ts +++ b/libs/flowbite-angular/pagination/index.ts @@ -17,18 +17,3 @@ 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'; diff --git a/libs/flowbite-angular/pagination/pagination-button.directive.ts b/libs/flowbite-angular/pagination/pagination-button.directive.ts deleted file mode 100644 index 45f4806f..00000000 --- a/libs/flowbite-angular/pagination/pagination-button.directive.ts +++ /dev/null @@ -1,62 +0,0 @@ -import type { PaginationButtonClass, PaginationButtonTheme } from './pagination-button.theme'; -import { PaginationButtonThemeService } from './pagination-button.theme.service'; -import type { PaginationSizes } from './pagination.theme'; - -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 ->('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 { - /** - * Service injected used to generate class - */ - public readonly themeService = inject(PaginationButtonThemeService); - - /** - * Whether the page is currently active - */ - public readonly active = input(false); - /** - * Size of the component - * - * @default md - */ - public readonly size = input.required(); - /** - * Set the custom style for this button - */ - public customStyle = model(inject(FLOWBITE_PAGINATION_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE)); - - //#region BaseComponent implementation - public override fetchClass(): PaginationButtonClass { - return this.themeService.getClasses({ - active: booleanToFlowbiteBoolean(this.active()), - size: this.size(), - customStyle: this.customStyle(), - }); - } - //#endregion -} diff --git a/libs/flowbite-angular/pagination/pagination-button.theme.service.ts b/libs/flowbite-angular/pagination/pagination-button.theme.service.ts deleted file mode 100644 index 872f8f24..00000000 --- a/libs/flowbite-angular/pagination/pagination-button.theme.service.ts +++ /dev/null @@ -1,46 +0,0 @@ -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( - 'FLOWBITE_PAGINATION_BUTTON_THEME_TOKEN' -); - -@Injectable({ - providedIn: 'root', -}) -export class PaginationButtonThemeService - implements FlowbiteThemeService -{ - 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], - theme.root.size[properties.size] - ), - }; - - return output; - } -} diff --git a/libs/flowbite-angular/pagination/pagination-button.theme.ts b/libs/flowbite-angular/pagination/pagination-button.theme.ts deleted file mode 100644 index f9730d89..00000000 --- a/libs/flowbite-angular/pagination/pagination-button.theme.ts +++ /dev/null @@ -1,47 +0,0 @@ -import type { PaginationSizes } from './pagination.theme'; - -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; - size: keyof PaginationSizes; - customStyle: DeepPartial; -} - -/** - * Theme definition for `PaginationButtonDirective` - */ -export interface PaginationButtonTheme { - root: { - base: string; - active: FlowbiteBoolean; - size: PaginationSizes; - }; -} - -/** - * 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: - 'border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white', - disabled: '', - }, - size: { - sm: 'px-3 h-8 text-sm', - md: 'px-4 h-10 text-base', - }, - }, -}); - -/** - * Generated class definition for `PaginationButtonDirective` - */ -export type PaginationButtonClass = FlowbiteClass; diff --git a/libs/flowbite-angular/pagination/pagination.component.ts b/libs/flowbite-angular/pagination/pagination.component.ts index 1bfbd933..0b971f40 100644 --- a/libs/flowbite-angular/pagination/pagination.component.ts +++ b/libs/flowbite-angular/pagination/pagination.component.ts @@ -1,7 +1,3 @@ -import { - FLOWBITE_PAGINATION_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE, - PaginationButtonDirective, -} from './pagination-button.directive'; import type { PaginationClass, PaginationNavigation, @@ -12,6 +8,8 @@ import { PaginationThemeService } from './pagination.theme.service'; import type { DeepPartial } from 'flowbite-angular'; import { BaseComponent } from 'flowbite-angular'; +import type { ButtonTheme } from 'flowbite-angular/button'; +import { ButtonComponent, type ButtonProperties } from 'flowbite-angular/button'; import { IconComponent, IconRegistry } from 'flowbite-angular/icon'; import { CHEVRON_DOUBLE_RIGHT_SVG_ICON, CHEVRON_RIGHT_SVG_ICON } from 'flowbite-angular/utils'; @@ -66,6 +64,10 @@ export const FLOWBITE_PAGINATION_SIZE_DEFAULT_VALUE = new InjectionToken +>('FLOWBITE_PAGINATION_BUTTON_PROPERTIES_DEFAULT_VALUE'); + export const paginationDefaultValueProvider = makeEnvironmentProviders([ { provide: FLOWBITE_PAGINATION_CUSTOM_STYLE_DEFAULT_VALUE, @@ -103,28 +105,47 @@ export const paginationDefaultValueProvider = makeEnvironmentProviders([ provide: FLOWBITE_PAGINATION_SIZE_DEFAULT_VALUE, useValue: 'md', }, + { + provide: FLOWBITE_PAGINATION_BUTTON_PROPERTIES_DEFAULT_VALUE, + useValue: { + color: 'primary', + fill: 'outline', + customStyle: { + root: { + base: { + default: + 'cursor-pointer !leading-tight !inline-flex !items-center !py-1.5 !ms-0 !place-content-center !rounded-none first:!rounded-l-lg last:!rounded-r-lg data-[active=false]:!text-inherit data-[active=false]:!border-inherit data-[active=false]:hover:!bg-gray-100 data-[active=false]:dark:hover:!bg-gray-700 data-[active=true]:!bg-opacity-75', + }, + size: { + sm: 'text-sm px-3 h-8', + md: 'text-base px-4 h-10', + }, + }, + } as DeepPartial, + } as DeepPartial, + }, ]); @Component({ selector: 'flowbite-pagination', standalone: true, - imports: [PaginationButtonDirective, IconComponent, NgTemplateOutlet], - template: ``, + + } + + `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) @@ -330,15 +304,13 @@ export class PaginationComponent extends BaseComponent { * * @default icon */ - readonly navigation = input( - inject(FLOWBITE_PAGINATION_NAVIGATION_DEFAULT_VALUE) - ); + readonly navigation = input(inject(FLOWBITE_PAGINATION_NAVIGATION_DEFAULT_VALUE)); /** * Value of the component's size * * @default md */ - readonly size = input(inject(FLOWBITE_PAGINATION_SIZE_DEFAULT_VALUE)); + readonly size = input(inject(FLOWBITE_PAGINATION_SIZE_DEFAULT_VALUE)); /** * Value of the next icon * @@ -357,6 +329,33 @@ export class PaginationComponent extends BaseComponent { * @default Pagination navigation */ readonly ariaLabel = input('Pagination navigation'); + /** + * Set the custom style for this pagination + */ + public customStyle = model(inject(FLOWBITE_PAGINATION_CUSTOM_STYLE_DEFAULT_VALUE)); + /** + * Set the properties of all buttons in navigation + * + * @default { + color: 'primary', + fill: 'outline', + customStyle: { + root: { + base: { + default: + 'cursor-pointer !leading-tight !inline-flex !items-center !py-1.5 !ms-0 !place-content-center !rounded-none first:!rounded-l-lg last:!rounded-r-lg data-[active=false]:!text-inherit data-[active=false]:!border-inherit data-[active=false]:hover:!bg-gray-100 data-[active=false]:dark:hover:!bg-gray-700 data-[active=true]:!bg-opacity-75', + }, + size: { + sm: 'text-sm px-3 h-8', + md: 'text-base px-4 h-10', + }, + }, + }, + } + */ + public readonly buttonProperties = model( + inject(FLOWBITE_PAGINATION_BUTTON_PROPERTIES_DEFAULT_VALUE) + ); /** * Value of the first visible page @@ -414,15 +413,6 @@ export class PaginationComponent extends BaseComponent { return Math.min(this.tabs(), this.maxPages()); }); - /** - * Set the custom style for this pagination - */ - public customStyle = model(inject(FLOWBITE_PAGINATION_CUSTOM_STYLE_DEFAULT_VALUE)); - /** - * Set the custom style for this pagination's button - */ - public buttonCustomStyle = model(inject(FLOWBITE_PAGINATION_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE)); - //#region BaseComponent implementation public override fetchClass(): PaginationClass { return this.themeService.getClasses({ diff --git a/libs/flowbite-angular/pagination/pagination.theme.ts b/libs/flowbite-angular/pagination/pagination.theme.ts index 6eb9c3d3..03a0e799 100644 --- a/libs/flowbite-angular/pagination/pagination.theme.ts +++ b/libs/flowbite-angular/pagination/pagination.theme.ts @@ -49,7 +49,7 @@ export const paginationTheme: PaginationTheme = createTheme({ base: '', }, navigation: { - base: 'inline-flex -space-x-px', + base: 'group inline-flex -space-x-px border-gray-300 dark:border-gray-700', size: { sm: 'text-sm', md: 'text-base',