flowbite-angular 1.3.0 → 20.0.2

package/fesm2022/flowbite-angular-dropdown.mjs

@@ -1,528 +1,341 @@
-import { mergeTheme, CHEVRON_DOWN_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, viewChild, contentChildren } from '@angular/core';
+import { InjectionToken, inject, input, computed, Directive } from '@angular/core';
+import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import * as i1 from 'ng-primitives/menu';
+import { NgpMenu, NgpMenuItem } from 'ng-primitives/menu';
 import { twMerge } from 'tailwind-merge';
-import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
-import { IconRegistry, IconComponent } from 'flowbite-angular/icon';
-import { DomSanitizer } from '@angular/platform-browser';
+import * as i2 from 'ng-primitives/interactions';
+import { NgpFocus } from 'ng-primitives/interactions';
 
-/**
- * `InjectionToken` used to import `DropdownDividerTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_DROPDOWN_DIVIDER_THEME_TOKEN)
- * ```
- */
-const FLOWBITE_DROPDOWN_DIVIDER_THEME_TOKEN = new InjectionToken('FLOWBITE_DROPDOWN_DIVIDER_THEME_TOKEN');
-class DropdownDividerThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_DROPDOWN_DIVIDER_THEME_TOKEN);
-    }
-    getClasses(properties) {
-        const theme = mergeTheme(this.baseTheme, properties.customStyle);
-        const output = {
-            rootClass: twMerge(theme.root.base),
-        };
-        return output;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownDividerThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownDividerThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownDividerThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE');
-const dropdownDividerDefaultValueProvider = makeEnvironmentProviders([
-    {
-        provide: FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
+const flowbiteDropdownTheme = createTheme({
+    host: {
+        base: 'fixed z-10 w-max divide-y rounded-lg border shadow-sm',
+        transition: '',
+        color: {
+            default: {
+                light: 'divide-gray-200 border-gray-200 bg-white',
+                dark: 'dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800',
+            },
+            info: {
+                light: 'divide-blue-200 border-blue-200 bg-white',
+                dark: 'dark:divide-blue-700 dark:border-blue-700 dark:bg-gray-800',
+            },
+            failure: {
+                light: 'divide-red-200 border-red-200 bg-white',
+                dark: 'dark:divide-red-700 dark:border-red-700 dark:bg-gray-800',
+            },
+            success: {
+                light: 'divide-green-200 border-green-200 bg-white',
+                dark: 'dark:divide-green-700 dark:border-green-700 dark:bg-gray-800',
+            },
+            warning: {
+                light: 'divide-yellow-200 border-yellow-200 bg-white',
+                dark: 'dark:divide-yellow-700 dark:border-yellow-700 dark:bg-gray-800',
+            },
+            primary: {
+                light: 'divide-primary-200 border-primary-200 bg-white',
+                dark: 'dark:divide-primary-700 dark:border-primary-700 dark:bg-gray-800',
+            },
+        },
     },
-]);
-/**
- * @see https://flowbite.com/docs/components/dropdowns/
- */
-class DropdownDividerComponent extends BaseComponent {
-    constructor() {
-        super(...arguments);
-        /**
-         * Service injected used to generate class
-         */
-        this.themeService = inject(DropdownDividerThemeService);
-        /**
-         * The parent `DropdownComponent`
-         */
-        this.dropdownComponent = inject(DropdownComponent);
-        //#region properties
-        /**
-         * Set the custom style for this dropdown divider
-         */
-        this.customStyle = model(inject(FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            customStyle: this.customStyle(),
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownDividerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: DropdownDividerComponent, isStandalone: true, selector: "flowbite-dropdown-divider", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownDividerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: true,
-                    selector: 'flowbite-dropdown-divider',
-                    template: ``,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
+});
 
+const defaultFlowbiteDropdownConfig = {
+    baseTheme: flowbiteDropdownTheme,
+    color: 'default',
+    customTheme: {},
+};
+const FlowbiteDropdownConfigToken = new InjectionToken('FlowbiteDropdownConfigToken');
 /**
- * `InjectionToken` used to import `DropdownHeaderTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_DROPDOWN_HEADER_THEME_TOKEN)
- * ```
+ * Provide the default Dropdown configuration
+ * @param config The Dropdown configuration
+ * @returns The provider
  */
-const FLOWBITE_DROPDOWN_HEADER_THEME_TOKEN = new InjectionToken('FLOWBITE_DROPDOWN_HEADER_THEME_TOKEN');
-class DropdownHeaderThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_DROPDOWN_HEADER_THEME_TOKEN);
-    }
-    getClasses(properties) {
-        const theme = mergeTheme(this.baseTheme, properties.customStyle);
-        const output = {
-            rootClass: twMerge(theme.root.base),
-            root: twMerge(theme.content.base),
-        };
-        return output;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownHeaderThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownHeaderThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownHeaderThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE');
-const dropdownHeaderDefaultValueProvider = makeEnvironmentProviders([
+const provideFlowbiteDropdownConfig = (config) => [
     {
-        provide: FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
+        provide: FlowbiteDropdownConfigToken,
+        useValue: { ...defaultFlowbiteDropdownConfig, ...config },
     },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/dropdowns/
+ * Inject the Dropdown configuration
+ * @see {@link defaultFlowbiteDropdownConfig}
+ * @returns The configuration
  */
-class DropdownHeaderComponent extends BaseComponent {
+const injectFlowbiteDropdownConfig = () => inject(FlowbiteDropdownConfigToken, { optional: true }) ?? defaultFlowbiteDropdownConfig;
+
+const FlowbiteDropdownStateToken = createStateToken('Flowbite Dropdown');
+const provideFlowbiteDropdownState = createStateProvider(FlowbiteDropdownStateToken);
+const injectFlowbiteDropdownState = createStateInjector(FlowbiteDropdownStateToken);
+const flowbiteDropdownState = createState(FlowbiteDropdownStateToken);
+
+class Dropdown {
     constructor() {
-        super(...arguments);
+        this.config = injectFlowbiteDropdownConfig();
         /**
-         * Service injected used to generate class
+         * @see {@link injectFlowbiteDropdownConfig}
          */
-        this.themeService = inject(DropdownHeaderThemeService);
+        this.color = input(this.config.color);
         /**
-         * The parent `DropdownComponent`
+         * @see {@link injectFlowbiteDropdownConfig}
          */
-        this.dropdownComponent = inject(DropdownComponent);
-        //#region properties
+        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())),
+                },
+            };
+        });
         /**
-         * Set the custom style for this dropdown header
+         * @internal
          */
-        this.customStyle = model(inject(FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            customStyle: this.customStyle(),
-        });
+        this.state = flowbiteDropdownState(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: DropdownHeaderComponent, isStandalone: true, selector: "flowbite-dropdown-header", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `
-    <div [class]="contentClasses().root">
-      <ng-content />
-    </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Dropdown, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: Dropdown, isStandalone: true, selector: "\n    div[flowbiteDropdown]\n  ", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteDropdownState()], exportAs: ["flowbiteDropdown"], hostDirectives: [{ directive: i1.NgpMenu }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownHeaderComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Dropdown, decorators: [{
+            type: Directive,
             args: [{
                     standalone: true,
-                    selector: 'flowbite-dropdown-header',
-                    template: `
-    <div [class]="contentClasses().root">
-      <ng-content />
-    </div>
+                    selector: `
+    div[flowbiteDropdown]
   `,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'flowbiteDropdown',
+                    hostDirectives: [
+                        {
+                            directive: NgpMenu,
+                            inputs: [],
+                            outputs: [],
+                        },
+                    ],
+                    providers: [provideFlowbiteDropdownState()],
+                    host: {
+                        '[class]': `theme().host.root`,
+                    },
                 }]
         }] });
 
+const flowbiteDropdownItemTheme = createTheme({
+    host: {
+        base: 'flex cursor-pointer items-center justify-between px-4 py-2 font-medium',
+        transition: '',
+        color: {
+            default: {
+                light: 'data-hover:bg-gray-100',
+                dark: 'dark:data-hover:bg-gray-700 dark:data-hover:text-white',
+            },
+            info: {
+                light: 'data-hover:bg-blue-100',
+                dark: 'dark:data-hover:bg-blue-700 dark:data-hover:text-white',
+            },
+            failure: {
+                light: 'data-hover:bg-red-100',
+                dark: 'dark:data-hover:bg-red-700 dark:data-hover:text-white',
+            },
+            success: {
+                light: 'data-hover:bg-green-100',
+                dark: 'dark:data-hover:bg-green-700 dark:data-hover:text-white',
+            },
+            warning: {
+                light: 'data-hover:bg-yellow-100',
+                dark: 'dark:data-hover:bg-yellow-700 dark:data-hover:text-white',
+            },
+            primary: {
+                light: 'data-hover:bg-primary-100',
+                dark: 'dark:data-hover:bg-primary-700 dark:data-hover:text-white',
+            },
+        },
+    },
+});
+
+const defaultFlowbiteDropdownItemConfig = {
+    baseTheme: flowbiteDropdownItemTheme,
+    customTheme: {},
+};
+const FlowbiteDropdownItemConfigToken = new InjectionToken('FlowbiteDropdownItemConfigToken');
 /**
- * `InjectionToken` used to import `DropdownItemTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_DROPDOWN_ITEM_THEME_TOKEN)
- * ```
+ * Provide the default Dropdown Item configuration
+ * @param config The Dropdown Item configuration
+ * @returns The provider
  */
-const FLOWBITE_DROPDOWN_ITEM_THEME_TOKEN = new InjectionToken('FLOWBITE_DROPDOWN_ITEM_THEME_TOKEN');
-class DropdownItemThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_DROPDOWN_ITEM_THEME_TOKEN);
-    }
-    getClasses(properties) {
-        const theme = mergeTheme(this.baseTheme, properties.customStyle);
-        const output = {
-            rootClass: twMerge(theme.root.base),
-        };
-        return output;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownItemThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownItemThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownItemThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE');
-const dropdownItemDefaultValueProvider = makeEnvironmentProviders([
+const provideFlowbiteDropdownItemConfig = (config) => [
     {
-        provide: FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
+        provide: FlowbiteDropdownItemConfigToken,
+        useValue: { ...defaultFlowbiteDropdownItemConfig, ...config },
     },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/dropdowns/
+ * Inject the Dropdown Item configuration
+ * @see {@link defaultFlowbiteDropdownItemConfig}
+ * @returns The configuration
  */
-class DropdownItemComponent extends BaseComponent {
+const injectFlowbiteDropdownItemConfig = () => inject(FlowbiteDropdownItemConfigToken, { optional: true }) ?? defaultFlowbiteDropdownItemConfig;
+
+const FlowbiteDropdownItemStateToken = createStateToken('Flowbite Dropdown Item');
+const provideFlowbiteDropdownItemState = createStateProvider(FlowbiteDropdownItemStateToken);
+const injectFlowbiteDropdownItemState = createStateInjector(FlowbiteDropdownItemStateToken);
+const flowbiteDropdownItemState = createState(FlowbiteDropdownItemStateToken);
+
+class DropdownItem {
     constructor() {
-        super(...arguments);
-        /**
-         * Service injected used to generate class
-         */
-        this.themeService = inject(DropdownItemThemeService);
+        this.config = injectFlowbiteDropdownItemConfig();
+        this.dropdownState = injectFlowbiteDropdownState();
         /**
-         * The parent `DropdownComponent`
+         * @see {@link injectFlowbiteDropdownItemConfig}
          */
-        this.dropdownComponent = inject(DropdownComponent);
-        //#region properties
+        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.dropdownState().color())),
+                },
+            };
+        });
         /**
-         * Set the custom style for this dropdown item
+         * @internal
          */
-        this.customStyle = model(inject(FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            customStyle: this.customStyle(),
-        });
+        this.state = flowbiteDropdownItemState(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: DropdownItemComponent, isStandalone: true, selector: "flowbite-dropdown-item", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: DropdownItem, isStandalone: true, selector: "\n    li[flowbiteDropdownItem]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteDropdownItemState()], exportAs: ["flowbiteDropdownItem"], hostDirectives: [{ directive: i1.NgpMenuItem }, { directive: i2.NgpFocus }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownItemComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DropdownItem, decorators: [{
+            type: Directive,
             args: [{
                     standalone: true,
-                    selector: 'flowbite-dropdown-item',
-                    template: `<ng-content />`,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: `
+    li[flowbiteDropdownItem]
+  `,
+                    exportAs: 'flowbiteDropdownItem',
+                    hostDirectives: [
+                        {
+                            directive: NgpMenuItem,
+                            inputs: [],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpFocus,
+                            inputs: [],
+                            outputs: [],
+                        },
+                    ],
+                    providers: [provideFlowbiteDropdownItemState()],
+                    host: {
+                        '[class]': `theme().host.root`,
+                    },
                 }]
         }] });
 
+const flowbiteDropdownContentTheme = createTheme({
+    host: {
+        base: 'py-2 text-sm',
+        transition: '',
+        color: {
+            default: {
+                light: 'text-gray-700',
+                dark: 'dark:text-gray-200',
+            },
+            info: {
+                light: 'text-gray-700',
+                dark: 'dark:text-gray-200',
+            },
+            failure: {
+                light: 'text-gray-700',
+                dark: 'dark:text-gray-200',
+            },
+            success: {
+                light: 'text-gray-700',
+                dark: 'dark:text-gray-200',
+            },
+            warning: {
+                light: 'text-gray-700',
+                dark: 'dark:text-gray-200',
+            },
+            primary: {
+                light: 'text-gray-700',
+                dark: 'dark:text-gray-200',
+            },
+        },
+    },
+});
+
+const defaultFlowbiteDropdownContentConfig = {
+    baseTheme: flowbiteDropdownContentTheme,
+    customTheme: {},
+};
+const FlowbiteDropdownContentConfigToken = new InjectionToken('FlowbiteDropdownContentConfigToken');
 /**
- * `InjectionToken` used to import `DropdownTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_DROPDOWN_THEME_TOKEN)
- * ```
+ * Provide the default DropdownContent configuration
+ * @param config The DropdownContent configuration
+ * @returns The provider
  */
-const FLOWBITE_DROPDOWN_THEME_TOKEN = new InjectionToken('FLOWBITE_DROPDOWN_THEME_TOKEN');
-class DropdownThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_DROPDOWN_THEME_TOKEN);
-    }
-    getClasses(properties) {
-        const theme = mergeTheme(this.baseTheme, properties.customStyle);
-        const output = {
-            rootClass: twMerge(theme.root.base),
-            dropdownClass: twMerge(theme.dropdown.base),
-            spanClass: twMerge(theme.span.base),
-            containerClass: twMerge(theme.container.base, theme.container.isOpen[properties.isOpen], theme.container.placement[properties.placement]),
-            contentClass: twMerge(theme.content.base),
-            subContentClass: twMerge(theme.subContent.base),
-        };
-        return output;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE');
-const FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE');
-const FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE');
-const FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE');
-const dropdownDefaultValueProvider = makeEnvironmentProviders([
+const provideFlowbiteDropdownContentConfig = (config) => [
     {
-        provide: FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE,
-        useValue: 'Dropdown',
+        provide: FlowbiteDropdownContentConfigToken,
+        useValue: { ...defaultFlowbiteDropdownContentConfig, ...config },
     },
-    {
-        provide: FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE,
-        useValue: false,
-    },
-    {
-        provide: FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE,
-        useValue: 'bottom-center',
-    },
-    {
-        provide: FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
-    },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/dropdowns/
+ * Inject the DropdownContent configuration
+ * @see {@link defaultFlowbiteDropdownContentConfig}
+ * @returns The configuration
  */
-class DropdownComponent extends BaseComponent {
+const injectFlowbiteDropdownContentConfig = () => inject(FlowbiteDropdownContentConfigToken, { optional: true }) ??
+    defaultFlowbiteDropdownContentConfig;
+
+const FlowbiteDropdownContentStateToken = createStateToken('Flowbite DropdownContent');
+const provideFlowbiteDropdownContentState = createStateProvider(FlowbiteDropdownContentStateToken);
+const injectFlowbiteDropdownContentState = createStateInjector(FlowbiteDropdownContentStateToken);
+const flowbiteDropdownContentState = createState(FlowbiteDropdownContentStateToken);
+
+class DropdownContent {
     constructor() {
-        super(...arguments);
-        this.dropdown = viewChild.required('dropdown');
-        this.button = viewChild.required('button');
-        /**
-         * Service injected used to generate class
-         */
-        this.themeService = inject(DropdownThemeService);
-        /**
-         * `IconRegistry` service
-         */
-        this.iconRegistry = inject(IconRegistry);
-        /**
-         * `DomSanitizer` service
-         */
-        this.domSanitizer = inject(DomSanitizer);
-        /**
-         * List of `DropdownItemComponent`
-         */
-        this.dropdownItemChildren = contentChildren(DropdownItemComponent);
-        /**
-         * List of `DropdownHeaderComponent`
-         */
-        this.dropdownHeaderChildren = contentChildren(DropdownHeaderComponent);
-        /**
-         * List of `DropdownDividerComponent`
-         */
-        this.dropdownDividerChildren = contentChildren(DropdownDividerComponent);
-        //#region properties
-        /**
-         * Set the dropdown label
-         *
-         * @default Dropdown
-         */
-        this.label = model(inject(FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE));
-        /**
-         * Set if the dropdown is open
-         *
-         * @default false
-         */
-        this.isOpen = model(inject(FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE));
+        this.config = injectFlowbiteDropdownContentConfig();
+        this.dropdownState = injectFlowbiteDropdownState();
         /**
-         * Set the dropdown position
-         *
-         * @default bottom-center
+         * @see {@link injectFlowbiteDropdownContentConfig}
          */
-        this.position = model(inject(FLOWBITE_DROPDOWN_POSITION_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.dropdownState().color())),
+                },
+            };
+        });
         /**
-         * Set the custom style for this dropdown
+         * @internal
          */
-        this.customStyle = model(inject(FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            label: this.label(),
-            isOpen: booleanToFlowbiteBoolean(this.isOpen()),
-            placement: this.position(),
-            customStyle: this.customStyle(),
-        });
-    }
-    init() {
-        this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'chevron-down', this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_DOWN_SVG_ICON));
-    }
-    //#endregion
-    /**
-     * Toggle dropdown isOpen
-     */
-    toggle() {
-        this.isOpen.set(!this.isOpen());
+        this.state = flowbiteDropdownContentState(this);
     }
-    // Onclick outside the dropdown, close it
-    clickout(event) {
-        if (!this.dropdown().nativeElement.contains(event.target) &&
-            this.isOpen() &&
-            !this.button().nativeElement.contains(event.target)) {
-            this.isOpen.set(false);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.4", type: DropdownComponent, isStandalone: true, selector: "flowbite-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { label: "labelChange", isOpen: "isOpenChange", position: "positionChange", customStyle: "customStyleChange" }, host: { listeners: { "document:click": "clickout($event)" } }, queries: [{ propertyName: "dropdownItemChildren", predicate: DropdownItemComponent, isSignal: true }, { propertyName: "dropdownHeaderChildren", predicate: DropdownHeaderComponent, isSignal: true }, { propertyName: "dropdownDividerChildren", predicate: DropdownDividerComponent, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "button", first: true, predicate: ["button"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <button
-      type="button"
-      [class]="contentClasses().dropdownClass"
-      (click)="toggle()"
-      #button>
-      <span [class]="contentClasses().spanClass">
-        {{ label() }}
-        <flowbite-icon
-          svgIcon="flowbite-angular:chevron-down"
-          class="ml-2 h-4 w-4" />
-      </span>
-    </button>
-    <div
-      [class]="contentClasses().containerClass"
-      #dropdown
-      [style.display]="isOpen() ? 'block' : 'none'"
-      [style.minWidth.px]="button.clientWidth">
-      <div [class]="contentClasses().contentClass">
-        <ul [class]="contentClasses().subContentClass">
-          <ng-content />
-        </ul>
-      </div>
-    </div>
-  `, 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: DropdownContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: DropdownContent, isStandalone: true, selector: "\n    ul[flowbiteDropdownContent]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteDropdownContentState()], exportAs: ["flowbiteDropdownContent"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DropdownContent, decorators: [{
+            type: Directive,
             args: [{
                     standalone: true,
-                    imports: [IconComponent],
-                    selector: 'flowbite-dropdown',
-                    template: `
-    <button
-      type="button"
-      [class]="contentClasses().dropdownClass"
-      (click)="toggle()"
-      #button>
-      <span [class]="contentClasses().spanClass">
-        {{ label() }}
-        <flowbite-icon
-          svgIcon="flowbite-angular:chevron-down"
-          class="ml-2 h-4 w-4" />
-      </span>
-    </button>
-    <div
-      [class]="contentClasses().containerClass"
-      #dropdown
-      [style.display]="isOpen() ? 'block' : 'none'"
-      [style.minWidth.px]="button.clientWidth">
-      <div [class]="contentClasses().contentClass">
-        <ul [class]="contentClasses().subContentClass">
-          <ng-content />
-        </ul>
-      </div>
-    </div>
+                    selector: `
+    ul[flowbiteDropdownContent]
   `,
-                    host: {
-                        '(document:click)': 'clickout($event)',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'flowbiteDropdownContent',
+                    hostDirectives: [],
+                    providers: [provideFlowbiteDropdownContentState()],
+                    host: { '[class]': `theme().host.root` },
                 }]
         }] });
 
-/**
- * Default theme for `DropdownComponent`
- */
-const dropdownTheme = createTheme({
-    root: {
-        base: 'relative inline w-fit',
-    },
-    dropdown: {
-        base: 'text-white bg-blue-700 border border-transparent hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 disabled:hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 dark:disabled:hover:bg-blue-600 group flex h-min items-center justify-center p-0.5 text-center font-medium focus:z-10 rounded-lg',
-    },
-    span: {
-        base: 'flex items-center rounded-md text-sm px-4 py-2',
-    },
-    container: {
-        base: 'z-10 bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 min-w-fit absolute',
-        isOpen: {
-            enabled: 'block',
-            disabled: 'hidden',
-        },
-        placement: {
-            'top-center': 'bottom-full mb-2.5 left-1/2 -translate-x-1/2',
-            'bottom-center': 'top-full mt-2.5 left-1/2 -translate-x-1/2',
-            'left-center': 'left-full ml-2.5 top-1/2 -translate-y-1/2',
-            'right-center': 'right-full mr-2.5 top-1/2 -translate-y-1/2',
-        },
-    },
-    content: {
-        base: 'py-1 text-sm text-gray-700 dark:text-gray-200 shadow-md',
-    },
-    subContent: {
-        base: 'py-1',
-    },
-});
-
-/**
- * Default theme value for `DropdownItemComponent`
- */
-const dropdownItemTheme = {
-    root: {
-        base: 'flex items-center justify-start py-2 px-4 text-sm text-gray-700 cursor-pointer hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white',
-    },
-};
-
-/**
- * Default theme for `DropdownDividerComponent`
- */
-const dropdownDividerTheme = createTheme({
-    root: {
-        base: 'block my-1 h-px bg-gray-100 dark:bg-gray-600',
-    },
-});
-
-/**
- * Default theme for `DropdownHeaderComponent`
- */
-const dropdownHeaderTheme = createTheme({
-    root: {
-        base: '',
-    },
-    content: {
-        base: 'block py-2 px-4 text-sm text-gray-700 dark:text-gray-200',
-    },
-});
+/* Dropdown */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DropdownComponent, DropdownDividerComponent, DropdownDividerThemeService, DropdownHeaderComponent, DropdownHeaderThemeService, DropdownItemComponent, DropdownItemThemeService, DropdownThemeService, FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_DROPDOWN_DIVIDER_THEME_TOKEN, FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_DROPDOWN_HEADER_THEME_TOKEN, FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE, FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_DROPDOWN_ITEM_THEME_TOKEN, FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE, FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE, FLOWBITE_DROPDOWN_THEME_TOKEN, dropdownDefaultValueProvider, dropdownDividerDefaultValueProvider, dropdownDividerTheme, dropdownHeaderDefaultValueProvider, dropdownHeaderTheme, dropdownItemDefaultValueProvider, dropdownItemTheme, dropdownTheme };
+export { Dropdown, DropdownContent, DropdownItem, FlowbiteDropdownConfigToken, FlowbiteDropdownContentConfigToken, FlowbiteDropdownContentStateToken, FlowbiteDropdownItemConfigToken, FlowbiteDropdownItemStateToken, FlowbiteDropdownStateToken, defaultFlowbiteDropdownConfig, defaultFlowbiteDropdownContentConfig, defaultFlowbiteDropdownItemConfig, flowbiteDropdownContentState, flowbiteDropdownContentTheme, flowbiteDropdownItemState, flowbiteDropdownItemTheme, flowbiteDropdownState, flowbiteDropdownTheme, injectFlowbiteDropdownConfig, injectFlowbiteDropdownContentConfig, injectFlowbiteDropdownContentState, injectFlowbiteDropdownItemConfig, injectFlowbiteDropdownItemState, injectFlowbiteDropdownState, provideFlowbiteDropdownConfig, provideFlowbiteDropdownContentConfig, provideFlowbiteDropdownContentState, provideFlowbiteDropdownItemConfig, provideFlowbiteDropdownItemState, provideFlowbiteDropdownState };
 //# sourceMappingURL=flowbite-angular-dropdown.mjs.map