flowbite-angular 1.3.0 → 20.0.1

package/fesm2022/flowbite-angular-alert.mjs

@@ -1,283 +1,351 @@
-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 { trigger, transition, style, animate } from '@angular/animations';
-import { NgTemplateOutlet } from '@angular/common';
-import { DomSanitizer } from '@angular/platform-browser';
+import * as i1 from 'ng-primitives/button';
+import { NgpButton } from 'ng-primitives/button';
+import * as i2 from 'ng-primitives/interactions';
+import { NgpFocus } from 'ng-primitives/interactions';
 
+const flowbiteAlertTheme = createTheme({
+    host: {
+        base: 'mb-4 rounded-lg p-4',
+        transition: '',
+        color: {
+            default: {
+                light: 'border-gray-200 bg-gray-50',
+                dark: 'dark:border-gray-700 dark:bg-gray-950',
+            },
+            info: {
+                light: 'border-blue-200 bg-blue-50',
+                dark: 'dark:border-blue-700 dark:bg-blue-950',
+            },
+            failure: {
+                light: 'border-red-200 bg-red-50',
+                dark: 'dark:border-red-700 dark:bg-red-950',
+            },
+            success: {
+                light: 'border-green-200 bg-green-50',
+                dark: 'dark:border-green-700 dark:bg-green-950',
+            },
+            warning: {
+                light: 'border-yellow-200 bg-yellow-50',
+                dark: 'dark:border-yellow-700 dark:bg-yellow-950',
+            },
+            primary: {
+                light: 'bg-primary-50 border-primary-200',
+                dark: 'dark:bg-primary-950 dark:border-primary-700',
+            },
+        },
+        border: {
+            on: 'border',
+            off: 'border-0',
+        },
+        accent: {
+            on: 'border-t-4',
+            off: '',
+        },
+    },
+});
+
+const defaultFlowbiteAlertConfig = {
+    baseTheme: flowbiteAlertTheme,
+    color: 'default',
+    border: false,
+    accent: false,
+    customTheme: {},
+};
+const FlowbiteAlertConfigToken = new InjectionToken('FlowbiteAlertConfigToken');
 /**
- * `InjectionToken` used to import `AlertTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_ALERT_THEME_TOKEN)
- * ```
+ * Provide the default Alert configuration
+ * @param config The Alert configuration
+ * @returns The provider
  */
-const FLOWBITE_ALERT_THEME_TOKEN = new InjectionToken('FLOWBITE_ALERT_THEME_TOKEN');
-class AlertThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_ALERT_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.hasBorderAccent[properties.hasBorderAccent]),
-            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: AlertThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AlertThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AlertThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_ALERT_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ALERT_COLOR_DEFAULT_VALUE');
-const FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE');
-const FLOWBITE_ALERT_HAS_BORDER_ACCENT_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ALERT_HAS_BORDER_ACCENT_DEFAULT_VALUE');
-const FLOWBITE_ALERT_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ALERT_CUSTOM_STYLE_DEFAULT_VALUE');
-const FLOWBITE_ALERT_ICON_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ALERT_ICON_DEFAULT_VALUE');
-const FLOWBITE_ALERT_ADDITIONAL_CONTENT_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ALERT_ADDITIONAL_CONTENT_DEFAULT_VALUE');
-const FLOWBITE_ALERT_IS_DISMISSABLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ALERT_IS_DISMISSABLE_DEFAULT_VALUE');
-const FLOWBITE_ALERT_ON_DISMISS_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ALERT_ON_DISMISS_DEFAULT_VALUE');
-const alertDefaultValueProvider = makeEnvironmentProviders([
-    {
-        provide: FLOWBITE_ALERT_COLOR_DEFAULT_VALUE,
-        useValue: 'primary',
-    },
+const provideFlowbiteAlertConfig = (config) => [
     {
-        provide: FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE,
-        useValue: false,
+        provide: FlowbiteAlertConfigToken,
+        useValue: { ...defaultFlowbiteAlertConfig, ...config },
     },
-    {
-        provide: FLOWBITE_ALERT_HAS_BORDER_ACCENT_DEFAULT_VALUE,
-        useValue: false,
-    },
-    {
-        provide: FLOWBITE_ALERT_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
-    },
-    {
-        provide: FLOWBITE_ALERT_ICON_DEFAULT_VALUE,
-        useValue: null,
-    },
-    {
-        provide: FLOWBITE_ALERT_ADDITIONAL_CONTENT_DEFAULT_VALUE,
-        useValue: null,
-    },
-    {
-        provide: FLOWBITE_ALERT_IS_DISMISSABLE_DEFAULT_VALUE,
-        useValue: false,
-    },
-    {
-        provide: FLOWBITE_ALERT_ON_DISMISS_DEFAULT_VALUE,
-        useValue: undefined,
-    },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/alerts/
+ * Inject the Alert configuration
+ * @see {@link defaultFlowbiteAlertConfig}
+ * @returns The configuration
  */
-class AlertComponent extends BaseComponent {
+const injectFlowbiteAlertConfig = () => inject(FlowbiteAlertConfigToken, { optional: true }) ?? defaultFlowbiteAlertConfig;
+
+const FlowbiteAlertStateToken = createStateToken('Flowbite Alert');
+const provideFlowbiteAlertState = createStateProvider(FlowbiteAlertStateToken);
+const injectFlowbiteAlertState = createStateInjector(FlowbiteAlertStateToken);
+const flowbiteAlertState = createState(FlowbiteAlertStateToken);
+
+class Alert {
     constructor() {
-        super(...arguments);
-        /**
-         * Service injected used to generate class
-         */
-        this.themeService = inject(AlertThemeService);
-        /**
-         * `IcoRegistry` service
-         */
-        this.iconRegistry = inject(IconRegistry);
-        /**
-         * `DomSanitizer` service
-         */
-        this.domSanitizer = inject(DomSanitizer);
-        //#region properties
-        /**
-         * Set the indicator color
-         *
-         * @default primary
-         */
-        this.color = model(inject(FLOWBITE_ALERT_COLOR_DEFAULT_VALUE));
+        this.config = injectFlowbiteAlertConfig();
         /**
-         * Set if the alert has border
-         *
-         * @default false
+         * @see {@link injectFlowbiteAlertConfig}
          */
-        this.hasBorder = model(inject(FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE));
+        this.color = input(this.config.color);
         /**
-         * Set if the alert has border accent
-         *
-         * @default false
+         * @see {@link injectFlowbiteAlertConfig}
          */
-        this.hasBorderAccent = model(inject(FLOWBITE_ALERT_HAS_BORDER_ACCENT_DEFAULT_VALUE));
+        this.border = input(this.config.border, { transform: booleanAttribute });
         /**
-         * Set the custom style for this alert
+         * @see {@link injectFlowbiteAlertConfig}
          */
-        this.customStyle = model(inject(FLOWBITE_ALERT_CUSTOM_STYLE_DEFAULT_VALUE));
+        this.accent = input(this.config.accent, { transform: booleanAttribute });
         /**
-         * Set the custom icon
-         *
-         * @default null
+         * @see {@link injectFlowbiteAlertConfig}
          */
-        this.icon = model(inject(FLOWBITE_ALERT_ICON_DEFAULT_VALUE));
-        /**
-         * Set the additional content
-         *
-         * @default null
-         */
-        this.additionalContent = model(inject(FLOWBITE_ALERT_ADDITIONAL_CONTENT_DEFAULT_VALUE));
-        /**
-         * Set if the alert is dismissable
-         *
-         * @default false
-         */
-        this.isDismissable = model(inject(FLOWBITE_ALERT_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.state.color()), mergedTheme.host.border[this.state.border() ? 'on' : 'off'], mergedTheme.host.accent[this.state.accent() ? 'on' : 'off']),
+                },
+            };
+        });
         /**
-         * Set the function called when the alert is dismissed
-         *
-         * @default undefined
+         * @internal
          */
-        this.onDismiss = model(inject(FLOWBITE_ALERT_ON_DISMISS_DEFAULT_VALUE));
-    }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            color: this.color(),
-            hasBorder: booleanToFlowbiteBoolean(this.hasBorder()),
-            hasBorderAccent: booleanToFlowbiteBoolean(this.hasBorderAccent()),
-            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();
+        this.state = flowbiteAlertState(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: AlertComponent, isStandalone: true, selector: "flowbite-alert", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, hasBorder: { classPropertyName: "hasBorder", publicName: "hasBorder", isSignal: true, isRequired: false, transformFunction: null }, hasBorderAccent: { classPropertyName: "hasBorderAccent", publicName: "hasBorderAccent", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, additionalContent: { classPropertyName: "additionalContent", publicName: "additionalContent", 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", hasBorderAccent: "hasBorderAccentChange", customStyle: "customStyleChange", icon: "iconChange", additionalContent: "additionalContentChange", isDismissable: "isDismissableChange", onDismiss: "onDismissChange" }, host: { properties: { "attr.role": "alert", "@onDestroyAnimation": "" } }, usesInheritance: true, ngImport: i0, template: `
-    <div class="flex items-center">
-      <ng-container [ngTemplateOutlet]="icon()"></ng-container>
-      <div>
-        <ng-content />
-      </div>
-      @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-5 w-5" />
-        </button>
-      }
-    </div>
-    <ng-container [ngTemplateOutlet]="additionalContent()"></ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }], animations: [
-            trigger('onDestroyAnimation', [
-                transition(':enter', [style({ opacity: 0 }), animate('300ms', style({ opacity: 1 }))]),
-                transition(':leave', [animate('300ms', style({ opacity: 0 }))]),
-            ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: Alert, isStandalone: true, selector: "\n    div[flowbiteAlert]\n  ", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteAlertState()], exportAs: ["flowbiteAlert"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AlertComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Alert, decorators: [{
+            type: Directive,
             args: [{
                     standalone: true,
-                    imports: [NgTemplateOutlet, IconComponent],
-                    selector: 'flowbite-alert',
-                    template: `
-    <div class="flex items-center">
-      <ng-container [ngTemplateOutlet]="icon()"></ng-container>
-      <div>
-        <ng-content />
-      </div>
-      @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-5 w-5" />
-        </button>
-      }
-    </div>
-    <ng-container [ngTemplateOutlet]="additionalContent()"></ng-container>
+                    selector: `
+    div[flowbiteAlert]
   `,
+                    exportAs: 'flowbiteAlert',
+                    hostDirectives: [],
+                    providers: [provideFlowbiteAlertState()],
                     host: {
-                        '[attr.role]': 'alert',
-                        '[@onDestroyAnimation]': '',
+                        '[class]': `theme().host.root`,
                     },
-                    animations: [
-                        trigger('onDestroyAnimation', [
-                            transition(':enter', [style({ opacity: 0 }), animate('300ms', style({ opacity: 1 }))]),
-                            transition(':leave', [animate('300ms', style({ opacity: 0 }))]),
-                        ]),
-                    ],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
-/**
- * Default theme for `AlertComponent`
- */
-const alertTheme = createTheme({
-    root: {
-        base: 'flex flex-col gap-2 p-4 text-sm rounded-lg',
+const flowbiteAlertButtonTheme = createTheme({
+    host: {
+        base: 'flex rounded-lg p-1 first:mr-2 data-hover:cursor-pointer',
+        transition: '',
         color: {
-            primary: 'text-primary-800 dark:text-primary-400 bg-primary-50 dark:bg-gray-800 border-primary-300 dark:border-primary-800',
-            dark: 'text-gray-800 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-600',
-            blue: 'text-blue-800 dark:text-blue-400 bg-blue-50 dark:bg-gray-800 border-blue-300 dark:border-blue-800',
-            red: 'text-red-800 dark:text-red-400 bg-red-100 dark:bg-gray-800 border-red-300 dark:border-red-800',
-            green: 'text-green-800 dark:text-green-400 bg-green-100 dark:bg-gray-800 border-green-300 dark:border-green-800',
-            yellow: 'text-yellow-800 dark:text-yellow-300 bg-yellow-100 dark:bg-gray-800 border-yellow-300 dark:border-yellow-800',
-        },
-        hasBorder: {
-            enabled: 'border',
-            disabled: 'border-0',
-        },
-        hasBorderAccent: {
-            enabled: 'border-t-4',
-            disabled: '',
+            default: {
+                light: 'data-hover:bg-gray-300',
+                dark: 'dark:data-hover:bg-gray-600',
+            },
+            info: {
+                light: 'data-hover:bg-blue-300',
+                dark: 'dark:data-hover:bg-blue-700',
+            },
+            failure: {
+                light: 'data-hover:bg-red-300',
+                dark: 'dark:data-hover:bg-red-700',
+            },
+            success: {
+                light: 'data-hover:bg-green-300',
+                dark: 'dark:data-hover:bg-green-600',
+            },
+            warning: {
+                light: 'data-hover:bg-yellow-300',
+                dark: 'dark:data-hover:bg-yellow-600',
+            },
+            primary: {
+                light: 'data-hover:bg-primary-300',
+                dark: 'dark:data-hover:bg-primary-700',
+            },
         },
     },
-    closeButton: {
-        base: '-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 rounded-lg p-1.5 focus:ring-2',
+});
+
+const defaultFlowbiteAlertButtonConfig = {
+    baseTheme: flowbiteAlertButtonTheme,
+    customTheme: {},
+};
+const FlowbiteAlertButtonConfigToken = new InjectionToken('FlowbiteAlertButtonConfigToken');
+/**
+ * Provide the default AlertButton configuration
+ * @param config The AlertButton configuration
+ * @returns The provider
+ */
+const provideFlowbiteAlertButtonConfig = (config) => [
+    {
+        provide: FlowbiteAlertButtonConfigToken,
+        useValue: { ...defaultFlowbiteAlertButtonConfig, ...config },
+    },
+];
+/**
+ * Inject the AlertButton configuration
+ * @see {@link defaultFlowbiteAlertButtonConfig}
+ * @returns The configuration
+ */
+const injectFlowbiteAlertButtonConfig = () => inject(FlowbiteAlertButtonConfigToken, { optional: true }) ?? defaultFlowbiteAlertButtonConfig;
+
+const FlowbiteAlertButtonStateToken = createStateToken('Flowbite AlertButton');
+const provideFlowbiteAlertButtonState = createStateProvider(FlowbiteAlertButtonStateToken);
+const injectFlowbiteAlertButtonState = createStateInjector(FlowbiteAlertButtonStateToken);
+const flowbiteAlertButtonState = createState(FlowbiteAlertButtonStateToken);
+
+class AlertButton {
+    constructor() {
+        this.config = injectFlowbiteAlertButtonConfig();
+        this.alertState = injectFlowbiteAlertState();
+        /**
+         * @see {@link injectFlowbiteAlertButtonConfig}
+         */
+        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.alertState().color())),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbiteAlertButtonState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AlertButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: AlertButton, isStandalone: true, selector: "\n    button[flowbiteAlertButton],\n    a[flowbiteAlertButton]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteAlertButtonState()], exportAs: ["flowbiteAlertButton"], hostDirectives: [{ directive: i1.NgpButton, inputs: ["disabled", "disabled"] }, { directive: i2.NgpFocus }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AlertButton, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: `
+    button[flowbiteAlertButton],
+    a[flowbiteAlertButton]
+  `,
+                    exportAs: 'flowbiteAlertButton',
+                    hostDirectives: [
+                        {
+                            directive: NgpButton,
+                            inputs: ['disabled:disabled'],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpFocus,
+                            inputs: [],
+                            outputs: [],
+                        },
+                    ],
+                    providers: [provideFlowbiteAlertButtonState()],
+                    host: { '[class]': `theme().host.root` },
+                }]
+        }] });
+
+const flowbiteAlertContentTheme = createTheme({
+    host: {
+        base: 'flex items-center justify-between text-sm font-normal',
+        transition: '',
         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',
+            default: {
+                light: 'text-gray-800',
+                dark: 'dark:text-gray-300',
+            },
+            info: {
+                light: 'text-blue-800',
+                dark: 'dark:text-blue-300',
+            },
+            failure: {
+                light: 'text-red-800',
+                dark: 'dark:text-red-300',
+            },
+            success: {
+                light: 'text-green-800',
+                dark: 'dark:text-green-300',
+            },
+            warning: {
+                light: 'text-yellow-800',
+                dark: 'dark:text-yellow-300',
+            },
+            primary: {
+                light: 'text-primary-800',
+                dark: 'dark:text-primary-300',
+            },
         },
     },
 });
 
+const defaultFlowbiteAlertContentConfig = {
+    baseTheme: flowbiteAlertContentTheme,
+    customTheme: {},
+};
+const FlowbiteAlertContentConfigToken = new InjectionToken('FlowbiteAlertContentConfigToken');
+/**
+ * Provide the default AlertContent configuration
+ * @param config The AlertContent configuration
+ * @returns The provider
+ */
+const provideFlowbiteAlertContentConfig = (config) => [
+    {
+        provide: FlowbiteAlertContentConfigToken,
+        useValue: { ...defaultFlowbiteAlertContentConfig, ...config },
+    },
+];
+/**
+ * Inject the AlertContent configuration
+ * @see {@link defaultFlowbiteAlertContentConfig}
+ * @returns The configuration
+ */
+const injectFlowbiteAlertContentConfig = () => inject(FlowbiteAlertContentConfigToken, { optional: true }) ?? defaultFlowbiteAlertContentConfig;
+
+const FlowbiteAlertContentStateToken = createStateToken('Flowbite AlertContent');
+const provideFlowbiteAlertContentState = createStateProvider(FlowbiteAlertContentStateToken);
+const injectFlowbiteAlertContentState = createStateInjector(FlowbiteAlertContentStateToken);
+const flowbiteAlertContentState = createState(FlowbiteAlertContentStateToken);
+
+class AlertContent {
+    constructor() {
+        this.config = injectFlowbiteAlertContentConfig();
+        this.alertState = injectFlowbiteAlertState();
+        /**
+         * @see {@link injectFlowbiteAlertContentConfig}
+         */
+        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.alertState().color())),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbiteAlertContentState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AlertContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: AlertContent, isStandalone: true, selector: "\n    div[flowbiteAlertContent]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteAlertContentState()], exportAs: ["flowbiteAlertContent"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AlertContent, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: `
+    div[flowbiteAlertContent]
+  `,
+                    exportAs: 'flowbiteAlertContent',
+                    hostDirectives: [],
+                    providers: [provideFlowbiteAlertContentState()],
+                    host: { '[class]': `theme().host.root` },
+                }]
+        }] });
+
+/* Alert */
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, AlertThemeService, FLOWBITE_ALERT_ADDITIONAL_CONTENT_DEFAULT_VALUE, FLOWBITE_ALERT_COLOR_DEFAULT_VALUE, FLOWBITE_ALERT_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_ALERT_HAS_BORDER_ACCENT_DEFAULT_VALUE, FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE, FLOWBITE_ALERT_ICON_DEFAULT_VALUE, FLOWBITE_ALERT_IS_DISMISSABLE_DEFAULT_VALUE, FLOWBITE_ALERT_ON_DISMISS_DEFAULT_VALUE, FLOWBITE_ALERT_THEME_TOKEN, alertDefaultValueProvider, alertTheme };
+export { Alert, AlertButton, AlertContent, FlowbiteAlertButtonConfigToken, FlowbiteAlertButtonStateToken, FlowbiteAlertConfigToken, FlowbiteAlertContentConfigToken, FlowbiteAlertContentStateToken, FlowbiteAlertStateToken, defaultFlowbiteAlertButtonConfig, defaultFlowbiteAlertConfig, defaultFlowbiteAlertContentConfig, flowbiteAlertButtonState, flowbiteAlertButtonTheme, flowbiteAlertContentState, flowbiteAlertContentTheme, flowbiteAlertState, flowbiteAlertTheme, injectFlowbiteAlertButtonConfig, injectFlowbiteAlertButtonState, injectFlowbiteAlertConfig, injectFlowbiteAlertContentConfig, injectFlowbiteAlertContentState, injectFlowbiteAlertState, provideFlowbiteAlertButtonConfig, provideFlowbiteAlertButtonState, provideFlowbiteAlertConfig, provideFlowbiteAlertContentConfig, provideFlowbiteAlertContentState, provideFlowbiteAlertState };
 //# sourceMappingURL=flowbite-angular-alert.mjs.map