flowbite-angular 1.3.0 → 20.0.2

package/fesm2022/flowbite-angular-badge.mjs

@@ -1,282 +1,376 @@
-import { mergeTheme, CLOSE_SVG_ICON, createTheme } from 'flowbite-angular/utils';
+import { createTheme, mergeDeep, colorToTheme } from 'flowbite-angular';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, makeEnvironmentProviders, model, Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, computed, Directive } from '@angular/core';
+import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
 import { twMerge } from 'tailwind-merge';
-import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
-import { IconRegistry, IconComponent } from 'flowbite-angular/icon';
-import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link';
-import { DomSanitizer } from '@angular/platform-browser';
+import * as i2 from 'ng-primitives/button';
+import { NgpButton } from 'ng-primitives/button';
+import * as i3 from 'ng-primitives/interactions';
+import { NgpFocus } from 'ng-primitives/interactions';
 
+const flowbiteBadgeTheme = createTheme({
+    host: {
+        base: 'inline-flex items-center justify-center font-medium',
+        transition: '',
+        border: {
+            on: 'border',
+            off: 'border-0',
+        },
+        color: {
+            default: {
+                light: 'border-gray-300 bg-gray-100 text-gray-800',
+                dark: 'dark:border-gray-900 dark:bg-gray-800 dark:text-gray-100',
+            },
+            info: {
+                light: 'border-blue-300 bg-blue-100 text-blue-800',
+                dark: 'dark:border-blue-900 dark:bg-blue-800 dark:text-blue-100',
+            },
+            failure: {
+                light: 'border-red-300 bg-red-100 text-red-800',
+                dark: 'dark:border-red-900 dark:bg-red-800 dark:text-red-100',
+            },
+            success: {
+                light: 'border-green-300 bg-green-100 text-green-800',
+                dark: 'dark:border-green-900 dark:bg-green-800 dark:text-green-100',
+            },
+            warning: {
+                light: 'border-yellow-300 bg-yellow-100 text-yellow-800',
+                dark: 'dark:border-yellow-900 dark:bg-yellow-800 dark:text-yellow-100',
+            },
+            primary: {
+                light: 'bg-primary-100 text-primary-800 border-primary-300',
+                dark: 'dark:text-primary-100 dark:bg-primary-800 dark:border-primary-900',
+            },
+        },
+        pill: {
+            on: 'rounded-full',
+            off: 'rounded',
+        },
+        size: {
+            xs: 'p-1 text-xs',
+            sm: 'p-1.5 text-sm',
+        },
+    },
+});
+
+const defaultFlowbiteBadgeConfig = {
+    baseTheme: flowbiteBadgeTheme,
+    color: 'default',
+    border: false,
+    pill: false,
+    size: 'sm',
+    customTheme: {},
+};
+const FlowbiteBadgeConfigToken = new InjectionToken('FlowbiteBadgeConfigToken');
 /**
- * `InjectionToken` used to import `BadgeTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_BADGE_THEME_TOKEN)
- * ```
+ * Provide the default Badge configuration
+ * @param config The Badge configuration
+ * @returns The provider
  */
-const FLOWBITE_BADGE_THEME_TOKEN = new InjectionToken('FLOWBITE_BADGE_THEME_TOKEN');
-class BadgeThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_BADGE_THEME_TOKEN);
-    }
-    getClasses(properties) {
-        const theme = mergeTheme(this.baseTheme, properties.customStyle);
-        const output = {
-            rootClass: twMerge(theme.root.base, theme.root.color[properties.color], theme.root.hasBorder[properties.hasBorder], theme.root.size[properties.size], theme.root.isPill[properties.isPill == 'enabled' || properties.isIconOnly == 'enabled'
-                ? 'enabled'
-                : properties.isPill], theme.root.isIconOnly[properties.isIconOnly], theme.root.link[properties.link ? 'enabled' : 'disabled']),
-            closeButtonClass: twMerge(theme.closeButton.base, theme.closeButton.color[properties.color]),
-        };
-        return output;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BadgeThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BadgeThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BadgeThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_BADGE_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BADGE_COLOR_DEFAULT_VALUE');
-const FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE');
-const FLOWBITE_BADGE_SIZE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BADGE_SIZE_DEFAULT_VALUE');
-const FLOWBITE_BADGE_IS_ICON_ONLY_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BADGE_IS_ICON_ONLY_DEFAULT_VALUE');
-const FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE');
-const FLOWBITE_BADGE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BADGE_CUSTOM_STYLE_DEFAULT_VALUE');
-const FLOWBITE_BADGE_IS_DISMISSABLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BADGE_IS_DISMISSABLE_DEFAULT_VALUE');
-const FLOWBITE_BADGE_ON_DISMISS_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BADGE_ON_DISMISS_DEFAULT_VALUE');
-const badgeDefaultValueProvider = makeEnvironmentProviders([
-    {
-        provide: FLOWBITE_BADGE_COLOR_DEFAULT_VALUE,
-        useValue: 'primary',
-    },
-    {
-        provide: FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE,
-        useValue: false,
-    },
-    {
-        provide: FLOWBITE_BADGE_SIZE_DEFAULT_VALUE,
-        useValue: 'xs',
-    },
-    {
-        provide: FLOWBITE_BADGE_IS_ICON_ONLY_DEFAULT_VALUE,
-        useValue: false,
-    },
-    {
-        provide: FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE,
-        useValue: false,
-    },
+const provideFlowbiteBadgeConfig = (config) => [
     {
-        provide: FLOWBITE_BADGE_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
+        provide: FlowbiteBadgeConfigToken,
+        useValue: { ...defaultFlowbiteBadgeConfig, ...config },
     },
-    {
-        provide: FLOWBITE_BADGE_IS_DISMISSABLE_DEFAULT_VALUE,
-        useValue: false,
-    },
-    {
-        provide: FLOWBITE_BADGE_ON_DISMISS_DEFAULT_VALUE,
-        useValue: undefined,
-    },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/badge/
+ * Inject the Badge configuration
+ * @see {@link defaultFlowbiteBadgeConfig}
+ * @returns The configuration
  */
-class BadgeComponent extends BaseComponent {
+const injectFlowbiteBadgeConfig = () => inject(FlowbiteBadgeConfigToken, { optional: true }) ?? defaultFlowbiteBadgeConfig;
+
+const FlowbiteBadgeStateToken = createStateToken('Flowbite Badge');
+const provideFlowbiteBadgeState = createStateProvider(FlowbiteBadgeStateToken);
+const injectFlowbiteBadgeState = createStateInjector(FlowbiteBadgeStateToken);
+const flowbiteBadgeState = createState(FlowbiteBadgeStateToken);
+
+class Badge {
     constructor() {
-        super(...arguments);
-        /**
-         * Optional `FlowbiteRouterLinkDirective` injected
-         */
-        this.flowbiteRouterLink = inject(FlowbiteRouterLinkDirective, { optional: true });
-        /**
-         * Service injected used to generate class
-         */
-        this.themeService = inject(BadgeThemeService);
-        /**
-         * `IcoRegistry` service
-         */
-        this.iconRegistry = inject(IconRegistry);
-        /**
-         * `DomSanitizer` service
-         */
-        this.domSanitizer = inject(DomSanitizer);
-        //#region properties
+        this.config = injectFlowbiteBadgeConfig();
         /**
-         * Set the badge color
-         *
-         * @default primary
+         * @see {@link injectFlowbiteBadgeConfig}
          */
-        this.color = model(inject(FLOWBITE_BADGE_COLOR_DEFAULT_VALUE));
+        this.color = input(this.config.color);
         /**
-         * Set if the badge has border
-         *
-         * @default false
+         * @see {@link injectFlowbiteBadgeConfig}
          */
-        this.hasBorder = model(inject(FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE));
+        this.border = input(this.config.border, { transform: booleanAttribute });
         /**
-         * Set the badge size
-         *
-         * @default xs
+         * @see {@link injectFlowbiteBadgeConfig}
          */
-        this.size = model(inject(FLOWBITE_BADGE_SIZE_DEFAULT_VALUE));
+        this.pill = input(this.config.pill, { transform: booleanAttribute });
         /**
-         * Set if the badge is icon only
-         *
-         * @default false
+         * @see {@link injectFlowbiteBadgeConfig}
          */
-        this.isIconOnly = model(inject(FLOWBITE_BADGE_IS_ICON_ONLY_DEFAULT_VALUE));
+        this.size = input(this.config.size);
         /**
-         * Set if the badge is pill
-         *
-         * @default false
+         * @see {@link injectFlowbiteBadgeConfig}
          */
-        this.isPill = model(inject(FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE));
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, mergedTheme.host.transition, colorToTheme(mergedTheme.host.color, this.state.color()), mergedTheme.host.border[this.state.border() ? 'on' : 'off'], mergedTheme.host.pill[this.state.pill() ? 'on' : 'off'], mergedTheme.host.size[this.state.size()]),
+                },
+            };
+        });
         /**
-         * Set the custom style for this badge
+         * @internal
          */
-        this.customStyle = model(inject(FLOWBITE_BADGE_CUSTOM_STYLE_DEFAULT_VALUE));
+        this.state = flowbiteBadgeState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: Badge, isStandalone: true, selector: "\n    span[flowbiteBadge]\n  ", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, pill: { classPropertyName: "pill", publicName: "pill", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteBadgeState()], exportAs: ["flowbiteBadge"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Badge, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: `
+    span[flowbiteBadge]
+  `,
+                    exportAs: 'flowbiteBadge',
+                    hostDirectives: [],
+                    providers: [provideFlowbiteBadgeState()],
+                    host: {
+                        '[class]': `theme().host.root`,
+                    },
+                }]
+        }] });
+
+const flowbiteBadgeLinkTheme = createTheme({
+    host: {
+        base: 'data-hover:cursor-pointer',
+        transition: '',
+        color: {
+            default: {
+                light: 'data-hover:bg-gray-200',
+                dark: 'dark:data-hover:bg-gray-700',
+            },
+            info: {
+                light: 'data-hover:bg-blue-200',
+                dark: 'dark:data-hover:bg-blue-900',
+            },
+            failure: {
+                light: 'data-hover:bg-red-200',
+                dark: 'dark:data-hover:bg-red-900',
+            },
+            success: {
+                light: 'data-hover:bg-green-200',
+                dark: 'dark:data-hover:bg-green-900',
+            },
+            warning: {
+                light: 'data-hover:bg-yellow-200',
+                dark: 'dark:data-hover:bg-yellow-900',
+            },
+            primary: {
+                light: 'data-hover:bg-primary-200',
+                dark: 'dark:data-hover:bg-primary-900',
+            },
+        },
+    },
+});
+
+const defaultFlowbiteBadgeLinkConfig = {
+    baseTheme: flowbiteBadgeLinkTheme,
+    customTheme: {},
+};
+const FlowbiteBadgeLinkConfigToken = new InjectionToken('FlowbiteBadgeLinkConfigToken');
+/**
+ * Provide the default BadgeLink configuration
+ * @param config The BadgeLink configuration
+ * @returns The provider
+ */
+const provideFlowbiteBadgeLinkConfig = (config) => [
+    {
+        provide: FlowbiteBadgeLinkConfigToken,
+        useValue: { ...defaultFlowbiteBadgeLinkConfig, ...config },
+    },
+];
+/**
+ * Inject the BadgeLink configuration
+ * @see {@link defaultFlowbiteBadgeLinkConfig}
+ * @returns The configuration
+ */
+const injectFlowbiteBadgeLinkConfig = () => inject(FlowbiteBadgeLinkConfigToken, { optional: true }) ?? defaultFlowbiteBadgeLinkConfig;
+
+const FlowbiteBadgeLinkStateToken = createStateToken('Flowbite BadgeLink');
+const provideFlowbiteBadgeLinkState = createStateProvider(FlowbiteBadgeLinkStateToken);
+const injectFlowbiteBadgeLinkState = createStateInjector(FlowbiteBadgeLinkStateToken);
+const flowbiteBadgeLinkState = createState(FlowbiteBadgeLinkStateToken);
+
+class BadgeLink {
+    constructor() {
+        this.config = injectFlowbiteBadgeLinkConfig();
+        this.badgeState = injectFlowbiteBadgeState();
         /**
-         * Set if the badge is dismissable
-         *
-         * @default false
+         * @see {@link injectFlowbiteBadgeLinkConfig}
          */
-        this.isDismissable = model(inject(FLOWBITE_BADGE_IS_DISMISSABLE_DEFAULT_VALUE));
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, mergedTheme.host.transition, colorToTheme(mergedTheme.host.color, this.badgeState().color())),
+                },
+            };
+        });
         /**
-         * Set the function called when the badge is dismissed
-         *
-         * @default undefined
+         * @internal
          */
-        this.onDismiss = model(inject(FLOWBITE_BADGE_ON_DISMISS_DEFAULT_VALUE));
-    }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            color: this.color(),
-            hasBorder: booleanToFlowbiteBoolean(this.hasBorder()),
-            size: this.size(),
-            isIconOnly: booleanToFlowbiteBoolean(this.isIconOnly()),
-            isPill: booleanToFlowbiteBoolean(this.isPill()),
-            link: this.flowbiteRouterLink?.routerLink.urlTree ?? null,
-            customStyle: this.customStyle(),
-        });
-    }
-    init() {
-        this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'close', this.domSanitizer.bypassSecurityTrustHtml(CLOSE_SVG_ICON));
-    }
-    //#endregion
-    /**
-     * Call the onDismiss function if it's not undefined
-     */
-    onDismissClick() {
-        const func = this.onDismiss();
-        if (func)
-            func();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: BadgeComponent, isStandalone: true, selector: "flowbite-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, hasBorder: { classPropertyName: "hasBorder", publicName: "hasBorder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isIconOnly: { classPropertyName: "isIconOnly", publicName: "isIconOnly", isSignal: true, isRequired: false, transformFunction: null }, isPill: { classPropertyName: "isPill", publicName: "isPill", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, isDismissable: { classPropertyName: "isDismissable", publicName: "isDismissable", isSignal: true, isRequired: false, transformFunction: null }, onDismiss: { classPropertyName: "onDismiss", publicName: "onDismiss", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", hasBorder: "hasBorderChange", size: "sizeChange", isIconOnly: "isIconOnlyChange", isPill: "isPillChange", customStyle: "customStyleChange", isDismissable: "isDismissableChange", onDismiss: "onDismissChange" }, usesInheritance: true, ngImport: i0, template: `
-    <ng-content />
-    @if (isDismissable()) {
-      <button
-        type="button"
-        [class]="contentClasses()!.closeButtonClass"
-        aria-label="Close"
-        (click)="onDismissClick()">
-        <span class="sr-only">Close</span>
-        <flowbite-icon
-          svgIcon="flowbite-angular:close"
-          class="h-3 w-3" />
-      </button>
+        this.state = flowbiteBadgeLinkState(this);
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BadgeLink, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: BadgeLink, isStandalone: true, selector: "\n    button[flowbiteBadgeLink],\n    a[flowbiteBadgeLink]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteBadgeLinkState()], exportAs: ["flowbiteBadgeLink"], hostDirectives: [{ directive: Badge, inputs: ["color", "color", "border", "border", "pill", "pill", "size", "size", "customTheme", "badgeCustomTheme"] }, { directive: i2.NgpButton, inputs: ["disabled", "disabled"] }, { directive: i3.NgpFocus }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BadgeComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BadgeLink, decorators: [{
+            type: Directive,
             args: [{
                     standalone: true,
-                    imports: [IconComponent],
-                    selector: 'flowbite-badge',
-                    template: `
-    <ng-content />
-    @if (isDismissable()) {
-      <button
-        type="button"
-        [class]="contentClasses()!.closeButtonClass"
-        aria-label="Close"
-        (click)="onDismissClick()">
-        <span class="sr-only">Close</span>
-        <flowbite-icon
-          svgIcon="flowbite-angular:close"
-          class="h-3 w-3" />
-      </button>
-    }
+                    selector: `
+    button[flowbiteBadgeLink],
+    a[flowbiteBadgeLink]
   `,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'flowbiteBadgeLink',
+                    hostDirectives: [
+                        {
+                            directive: Badge,
+                            inputs: ['color', 'border', 'pill', 'size', 'customTheme:badgeCustomTheme'],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpButton,
+                            inputs: ['disabled:disabled'],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpFocus,
+                            inputs: [],
+                            outputs: [],
+                        },
+                    ],
+                    providers: [provideFlowbiteBadgeLinkState()],
+                    host: { '[class]': `theme().host.root` },
                 }]
         }] });
 
-/**
- * Default theme for `BadgeComponent`
- */
-const badgeTheme = createTheme({
-    root: {
-        base: 'flex h-fit items-center gap-1 font-semibold',
-        color: {
-            primary: 'bg-primary-100 dark:bg-primary-700 text-primary-800 dark:text-primary-300 group-hover:bg-primary-200 dark:group-hover:bg-primary-600 border-primary-300 dark:border-primary-800',
-            dark: 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300 group-hover:bg-gray-200 dark:group-hover:bg-gray-600 border-gray-300 dark:border-gray-600',
-            blue: 'bg-blue-100 dark:bg-blue-200 text-blue-800 dark:text-blue-800 group-hover:bg-blue-200 dark:group-hover:bg-blue-300 border-blue-300 dark:border-blue-800',
-            red: 'bg-red-100 dark:bg-red-200 text-red-800 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300 border-red-300 dark:border-red-800',
-            green: 'bg-green-100 dark:bg-green-200 text-green-800 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300 border-green-300 dark:border-green-800',
-            yellow: 'bg-yellow-100 dark:bg-yellow-200 text-yellow-800 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300 border-yellow-300 dark:border-yellow-800',
-            indigo: 'bg-indigo-100 dark:bg-indigo-200 text-indigo-800 dark:text-indigo-900 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-300 border-indigo-300 dark:border-indigo-800',
-            purple: 'bg-purple-100 dark:bg-purple-200 text-purple-800 dark:text-purple-900 group-hover:bg-purple-200 dark:group-hover:bg-purple-300 border-purple-300 dark:border-purple-800',
-            pink: 'bg-pink-100 dark:bg-pink-200 text-pink-800 dark:text-pink-900 group-hover:bg-pink-200 dark:group-hover:bg-pink-300 border-pink-300 dark:border-pink-800',
-        },
-        hasBorder: {
-            enabled: 'border',
-            disabled: 'border-0',
-        },
-        size: {
-            xs: 'text-xs p-1',
-            sm: 'text-sm p-1.5',
-        },
-        isPill: {
-            enabled: 'rounded-full',
-            disabled: 'rounded',
-        },
-        link: {
-            enabled: 'group cursor-pointer',
-            disabled: '',
-        },
-        isIconOnly: {
-            enabled: '',
-            disabled: 'px-2 py-0.5',
-        },
-    },
-    closeButton: {
-        base: 'ms-1 inline-flex items-center rounded-sm p-1 focus:ring-2',
+const flowbiteBadgeButtonTheme = createTheme({
+    host: {
+        base: 'flex rounded-lg p-1 first:mr-2 last:ml-2 data-hover:cursor-pointer',
         color: {
-            primary: 'text-primary-500 dark:text-primary-600 hover:bg-primary-200 dark:hover:bg-primary-300',
-            dark: 'text-gray-500 dark:text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-300',
-            blue: 'text-blue-500 dark:text-blue-600 hover:bg-blue-200 dark:hover:bg-blue-300',
-            red: 'text-red-500 dark:text-red-600 hover:bg-red-200 dark:hover:bg-red-300',
-            green: 'text-green-500 dark:text-green-600 hover:bg-green-200 dark:hover:bg-green-300',
-            yellow: 'text-yellow-500 dark:text-yellow-600 hover:bg-yellow-200 dark:hover:bg-yellow-300',
-            indigo: 'text-indigo-500 dark:text-indigo-600 hover:bg-indigo-200 dark:hover:bg-indigo-300',
-            purple: 'text-purple-500 dark:text-purple-600 hover:bg-purple-200 dark:hover:bg-purple-300',
-            pink: 'text-pink-500 dark:text-pink-600 hover:bg-pink-200 dark:hover:bg-pink-300',
+            default: {
+                light: 'data-hover:bg-gray-300',
+                dark: 'dark:data-hover:bg-gray-700',
+            },
+            info: {
+                light: 'data-hover:bg-blue-300',
+                dark: 'dark:data-hover:bg-blue-400',
+            },
+            failure: {
+                light: 'data-hover:bg-red-300',
+                dark: 'dark:data-hover:bg-red-400',
+            },
+            success: {
+                light: 'data-hover:bg-green-300',
+                dark: 'dark:data-hover:bg-green-400',
+            },
+            warning: {
+                light: 'data-hover:bg-yellow-300',
+                dark: 'dark:data-hover:bg-yellow-400',
+            },
+            primary: {
+                light: 'data-hover:bg-primary-300',
+                dark: 'dark:data-hover:bg-primary-400',
+            },
         },
     },
 });
 
+const defaultFlowbiteBadgeButtonConfig = {
+    baseTheme: flowbiteBadgeButtonTheme,
+    customTheme: {},
+};
+const FlowbiteBadgeButtonConfigToken = new InjectionToken('FlowbiteBadgeButtonConfigToken');
+/**
+ * Provide the default BadgeButton configuration
+ * @param config The BadgeButton configuration
+ * @returns The provider
+ */
+const provideFlowbiteBadgeButtonConfig = (config) => [
+    {
+        provide: FlowbiteBadgeButtonConfigToken,
+        useValue: { ...defaultFlowbiteBadgeButtonConfig, ...config },
+    },
+];
+/**
+ * Inject the BadgeButton configuration
+ * @see {@link defaultFlowbiteBadgeButtonConfig}
+ * @returns The configuration
+ */
+const injectFlowbiteBadgeButtonConfig = () => inject(FlowbiteBadgeButtonConfigToken, { optional: true }) ?? defaultFlowbiteBadgeButtonConfig;
+
+const FlowbiteBadgeButtonStateToken = createStateToken('Flowbite BadgeButton');
+const provideFlowbiteBadgeButtonState = createStateProvider(FlowbiteBadgeButtonStateToken);
+const injectFlowbiteBadgeButtonState = createStateInjector(FlowbiteBadgeButtonStateToken);
+const flowbiteBadgeButtonState = createState(FlowbiteBadgeButtonStateToken);
+
+class BadgeButton {
+    constructor() {
+        this.config = injectFlowbiteBadgeButtonConfig();
+        this.badgeState = injectFlowbiteBadgeState();
+        /**
+         * @see {@link injectFlowbiteBadgeButtonConfig}
+         */
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, colorToTheme(mergedTheme.host.color, this.badgeState().color())),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbiteBadgeButtonState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BadgeButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: BadgeButton, isStandalone: true, selector: "\n    button[flowbiteBadgeButton],\n    a[flowbiteBadgeButton]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteBadgeButtonState()], exportAs: ["flowbiteBadgeButton"], hostDirectives: [{ directive: i2.NgpButton, inputs: ["disabled", "disabled"] }, { directive: i3.NgpFocus }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BadgeButton, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: `
+    button[flowbiteBadgeButton],
+    a[flowbiteBadgeButton]
+  `,
+                    exportAs: 'flowbiteBadgeButton',
+                    hostDirectives: [
+                        {
+                            directive: NgpButton,
+                            inputs: ['disabled:disabled'],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpFocus,
+                            inputs: [],
+                            outputs: [],
+                        },
+                    ],
+                    providers: [provideFlowbiteBadgeButtonState()],
+                    host: { '[class]': `theme().host.root` },
+                }]
+        }] });
+
+/* Badge */
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, BadgeThemeService, FLOWBITE_BADGE_COLOR_DEFAULT_VALUE, FLOWBITE_BADGE_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_BADGE_IS_ICON_ONLY_DEFAULT_VALUE, FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE, FLOWBITE_BADGE_SIZE_DEFAULT_VALUE, FLOWBITE_BADGE_THEME_TOKEN, badgeDefaultValueProvider, badgeTheme };
+export { Badge, BadgeButton, BadgeLink, FlowbiteBadgeButtonConfigToken, FlowbiteBadgeButtonStateToken, FlowbiteBadgeConfigToken, FlowbiteBadgeLinkConfigToken, FlowbiteBadgeLinkStateToken, FlowbiteBadgeStateToken, defaultFlowbiteBadgeButtonConfig, defaultFlowbiteBadgeConfig, defaultFlowbiteBadgeLinkConfig, flowbiteBadgeButtonState, flowbiteBadgeButtonTheme, flowbiteBadgeLinkState, flowbiteBadgeLinkTheme, flowbiteBadgeState, flowbiteBadgeTheme, injectFlowbiteBadgeButtonConfig, injectFlowbiteBadgeButtonState, injectFlowbiteBadgeConfig, injectFlowbiteBadgeLinkConfig, injectFlowbiteBadgeLinkState, injectFlowbiteBadgeState, provideFlowbiteBadgeButtonConfig, provideFlowbiteBadgeButtonState, provideFlowbiteBadgeConfig, provideFlowbiteBadgeLinkConfig, provideFlowbiteBadgeLinkState, provideFlowbiteBadgeState };
 //# sourceMappingURL=flowbite-angular-badge.mjs.map