flowbite-angular 1.3.0 → 20.0.2

package/fesm2022/flowbite-angular-breadcrumb.mjs

@@ -1,249 +1,320 @@
-import { mergeTheme, CHEVRON_RIGHT_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, contentChildren } 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 } 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 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 flowbiteBreadcrumbTheme = createTheme({
+    host: {
+        base: 'inline-flex items-center gap-1 rounded-lg px-5 py-3',
+        transition: '',
+        solid: {
+            on: 'border',
+            off: 'border-none bg-transparent',
+        },
+        color: {
+            default: {
+                light: 'border-gray-300 bg-gray-100',
+                dark: 'dark:border-gray-900 dark:bg-gray-800',
+            },
+            info: {
+                light: 'border-blue-300 bg-blue-100',
+                dark: 'dark:border-blue-900 dark:bg-blue-800',
+            },
+            failure: {
+                light: 'border-red-300 bg-red-100',
+                dark: 'dark:border-red-900 dark:bg-red-800',
+            },
+            success: {
+                light: 'border-green-300 bg-green-100',
+                dark: 'dark:border-green-900 dark:bg-green-800',
+            },
+            warning: {
+                light: 'border-yellow-300 bg-yellow-100',
+                dark: 'dark:border-yellow-900 dark:bg-yellow-800',
+            },
+            primary: {
+                light: 'border-primary-300 bg-primary-100',
+                dark: 'dark:border-primary-900 dark:bg-primary-800',
+            },
+        },
+    },
+});
+
+const defaultFlowbiteBreadcrumbConfig = {
+    baseTheme: flowbiteBreadcrumbTheme,
+    color: 'default',
+    solid: false,
+    customTheme: {},
+};
+const FlowbiteBreadcrumbConfigToken = new InjectionToken('FlowbiteBreadcrumbConfigToken');
 /**
- * `InjectionToken` used to import `BreadcrumbItemTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_BREADCRUMB_ITEM_THEME_TOKEN)
- * ```
+ * Provide the default Breadcrumb configuration
+ * @param config The Breadcrumb configuration
+ * @returns The provider
  */
-const FLOWBITE_BREADCRUMB_ITEM_THEME_TOKEN = new InjectionToken('FLOWBITE_BREADCRUMB_ITEM_THEME_TOKEN');
-class BreadcrumbItemThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_BREADCRUMB_ITEM_THEME_TOKEN);
-    }
-    getClasses(properties) {
-        const theme = mergeTheme(this.baseTheme, properties.customStyle);
-        const output = {
-            rootClass: twMerge(theme.root.base, theme.root.color[properties.color]),
-            breadcrumbIconClass: twMerge(theme.icon.base),
-        };
-        return output;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BreadcrumbItemThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BreadcrumbItemThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BreadcrumbItemThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_BREADCRUMB_ITEM_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BREADCRUMB_ITEM_CUSTOM_STYLE_DEFAULT_VALUE');
-const breadcrumbItemDefaultValueProvider = makeEnvironmentProviders([
+const provideFlowbiteBreadcrumbConfig = (config) => [
     {
-        provide: FLOWBITE_BREADCRUMB_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
+        provide: FlowbiteBreadcrumbConfigToken,
+        useValue: { ...defaultFlowbiteBreadcrumbConfig, ...config },
     },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/breadcrumb/
+ * Inject the Breadcrumb configuration
+ * @see {@link defaultFlowbiteBreadcrumbConfig}
+ * @returns The configuration
  */
-class BreadcrumbItemComponent extends BaseComponent {
+const injectFlowbiteBreadcrumbConfig = () => inject(FlowbiteBreadcrumbConfigToken, { optional: true }) ?? defaultFlowbiteBreadcrumbConfig;
+
+const FlowbiteBreadcrumbStateToken = createStateToken('Flowbite Breadcrumb');
+const provideFlowbiteBreadcrumbState = createStateProvider(FlowbiteBreadcrumbStateToken);
+const injectFlowbiteBreadcrumbState = createStateInjector(FlowbiteBreadcrumbStateToken);
+const flowbiteBreadcrumbState = createState(FlowbiteBreadcrumbStateToken);
+
+class Breadcrumb {
     constructor() {
-        super(...arguments);
-        /**
-         * Service injected used to generate class
-         */
-        this.themeService = inject(BreadcrumbItemThemeService);
-        /**
-         * The parent `BreadcrumbComponent`
-         */
-        this.breadcrumbComponent = inject(BreadcrumbComponent);
+        this.config = injectFlowbiteBreadcrumbConfig();
         /**
-         * Optional `FlowbiteRouterLinkDirective` injected
+         * @see {@link injectFlowbiteBreadcrumbConfig}
          */
-        this.flowbiteRouterLink = inject(FlowbiteRouterLinkDirective, { optional: true });
+        this.color = input(this.config.color);
         /**
-         * `IconRegistry` service
+         * @see {@link injectFlowbiteBreadcrumbConfig}
          */
-        this.iconRegistry = inject(IconRegistry);
+        this.solid = input(this.config.solid, { transform: booleanAttribute });
         /**
-         * `DomSanitizer` service
+         * @see {@link injectFlowbiteBreadcrumbConfig}
          */
-        this.domSanitizer = inject(DomSanitizer);
-        //#region properties
-        /**
-         * Set the breadcrumb item color
-         *
-         * @default `BreadcrumbComponent`'s color
-         */
-        this.color = model(this.breadcrumbComponent.color());
+        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, this.state.solid() &&
+                        mergedTheme.host.solid[this.state.solid() ? 'on' : 'off'] &&
+                        colorToTheme(mergedTheme.host.color, this.state.color())),
+                },
+            };
+        });
         /**
-         * Set the custom style for this breadcrumb item
+         * @internal
          */
-        this.customStyle = model(inject(FLOWBITE_BREADCRUMB_ITEM_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            color: this.color(),
-            link: this.flowbiteRouterLink?.routerLink.urlTree ?? null,
-            customStyle: this.customStyle(),
-        });
+        this.state = flowbiteBreadcrumbState(this);
     }
-    init() {
-        this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'chevron-right', this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_RIGHT_SVG_ICON));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BreadcrumbItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: BreadcrumbItemComponent, isStandalone: true, selector: "flowbite-breadcrumb-item", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `
-    <flowbite-icon
-      [class]="contentClasses().breadcrumbIconClass"
-      svgIcon="flowbite-angular:chevron-right" />
-    <ng-content />
-  `, 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: Breadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: Breadcrumb, isStandalone: true, selector: "\n    nav[flowbiteBreadcrumb]\n  ", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, solid: { classPropertyName: "solid", publicName: "solid", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteBreadcrumbState()], exportAs: ["flowbiteBreadcrumb"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Breadcrumb, decorators: [{
+            type: Directive,
             args: [{
                     standalone: true,
-                    imports: [IconComponent],
-                    selector: 'flowbite-breadcrumb-item',
-                    template: `
-    <flowbite-icon
-      [class]="contentClasses().breadcrumbIconClass"
-      svgIcon="flowbite-angular:chevron-right" />
-    <ng-content />
+                    selector: `
+    nav[flowbiteBreadcrumb]
   `,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'flowbiteBreadcrumb',
+                    hostDirectives: [],
+                    providers: [provideFlowbiteBreadcrumbState()],
+                    host: {
+                        '[class]': `theme().host.root`,
+                    },
                 }]
         }] });
 
+const flowbiteBreadcrumbItemTheme = createTheme({
+    host: {
+        base: 'group flex items-center justify-between text-sm font-medium data-hover:cursor-pointer',
+        transition: '',
+        color: {
+            default: {
+                light: 'text-gray-700 data-hover:text-gray-900',
+                dark: 'dark:text-gray-100 dark:data-hover:text-white',
+            },
+            info: {
+                light: 'text-blue-700 data-hover:text-blue-900',
+                dark: 'dark:text-blue-100 dark:data-hover:text-blue-300',
+            },
+            failure: {
+                light: 'text-red-700 data-hover:text-red-900',
+                dark: 'dark:text-red-100 dark:data-hover:text-red-300',
+            },
+            success: {
+                light: 'text-green-700 data-hover:text-green-900',
+                dark: 'dark:text-green-100 dark:data-hover:text-green-300',
+            },
+            warning: {
+                light: 'text-yellow-700 data-hover:text-yellow-900',
+                dark: 'dark:text-yellow-100 dark:data-hover:text-yellow-300',
+            },
+            primary: {
+                light: 'data-hover:text-primary-900 text-primary-700',
+                dark: 'dark:text-primary-100 dark:data-hover:text-primary-300',
+            },
+        },
+    },
+});
+
+const defaultFlowbiteBreadcrumbItemConfig = {
+    baseTheme: flowbiteBreadcrumbItemTheme,
+    customTheme: {},
+};
+const FlowbiteBreadcrumbItemConfigToken = new InjectionToken('FlowbiteBreadcrumbConfigToken');
 /**
- * `InjectionToken` used to import `BreadcrumbTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_BREADCRUMB_THEME_TOKEN)
- * ```
+ * Provide the default Breadcrumb Item configuration
+ * @param config The Breadcrumb configuration
+ * @returns The provider
  */
-const FLOWBITE_BREADCRUMB_THEME_TOKEN = new InjectionToken('FLOWBITE_BREADCRUMB_THEME_TOKEN');
-class BreadcrumbThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_BREADCRUMB_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: BreadcrumbThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BreadcrumbThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BreadcrumbThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_BREADCRUMB_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BREADCRUMB_COLOR_DEFAULT_VALUE');
-const FLOWBITE_BREADCRUMB_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BREADCRUMB_CUSTOM_STYLE_DEFAULT_VALUE');
-const breadcrumbDefaultValueProvider = makeEnvironmentProviders([
+const provideFlowbiteBreadcrumbItemConfig = (config) => [
     {
-        provide: FLOWBITE_BREADCRUMB_COLOR_DEFAULT_VALUE,
-        useValue: 'primary',
+        provide: FlowbiteBreadcrumbItemConfigToken,
+        useValue: { ...defaultFlowbiteBreadcrumbItemConfig, ...config },
     },
-    {
-        provide: FLOWBITE_BREADCRUMB_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
-    },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/breadcrumb/
+ * Inject the Breadcrumb Item configuration
+ * @see {@link defaultFlowbiteBreadcrumbItemConfig}
+ * @returns The configuration
  */
-class BreadcrumbComponent extends BaseComponent {
+const injectFlowbiteBreadcrumbItemConfig = () => inject(FlowbiteBreadcrumbItemConfigToken, { optional: true }) ??
+    defaultFlowbiteBreadcrumbItemConfig;
+
+const FlowbiteBreadcrumbItemStateToken = createStateToken('Flowbite Breadcrumb Item');
+const provideFlowbiteBreadcrumbItemState = createStateProvider(FlowbiteBreadcrumbItemStateToken);
+const injectFlowbiteBreadcrumbItemState = createStateInjector(FlowbiteBreadcrumbItemStateToken);
+const flowbiteBreadcrumbItemState = createState(FlowbiteBreadcrumbItemStateToken);
+
+class BreadcrumbItem {
     constructor() {
-        super(...arguments);
-        /**
-         * Service injected used to generate class
-         */
-        this.themeService = inject(BreadcrumbThemeService);
-        /**
-         * List of `BreadcrumbItemComponent`
-         */
-        this.breadcrumbItemChildren = contentChildren(BreadcrumbItemComponent);
-        //#region properties
+        this.config = injectFlowbiteBreadcrumbItemConfig();
+        this.breadcrumbState = injectFlowbiteBreadcrumbState();
         /**
-         * Set the breacrumb color
-         *
-         * @default primary
+         * @see {@link injectFlowbiteBreadcrumbItemConfig}
          */
-        this.color = model(inject(FLOWBITE_BREADCRUMB_COLOR_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.breadcrumbState().color())),
+                },
+            };
+        });
         /**
-         * Set the custom style for this breadcrumb
+         * @internal
          */
-        this.customStyle = model(inject(FLOWBITE_BREADCRUMB_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            customStyle: this.customStyle(),
-        });
+        this.state = flowbiteBreadcrumbItemState(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BreadcrumbComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.4", type: BreadcrumbComponent, isStandalone: true, selector: "flowbite-breadcrumb", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", customStyle: "customStyleChange" }, host: { properties: { "attr.aria-label": "breadcrumb" } }, queries: [{ propertyName: "breadcrumbItemChildren", predicate: BreadcrumbItemComponent, isSignal: true }], 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: BreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: BreadcrumbItem, isStandalone: true, selector: "\n    li[flowbiteBreadcrumbItem]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteBreadcrumbItemState()], exportAs: ["flowbiteBreadcrumbItem"], hostDirectives: [{ directive: i1.NgpButton, inputs: ["disabled", "disabled"] }, { directive: i2.NgpFocus }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BreadcrumbComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BreadcrumbItem, decorators: [{
+            type: Directive,
             args: [{
                     standalone: true,
-                    selector: 'flowbite-breadcrumb',
-                    template: `<ng-content />`,
+                    selector: `
+    li[flowbiteBreadcrumbItem]
+  `,
+                    exportAs: 'flowbiteBreadcrumbItem',
+                    hostDirectives: [
+                        {
+                            directive: NgpButton,
+                            inputs: ['disabled:disabled'],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpFocus,
+                            inputs: [],
+                            outputs: [],
+                        },
+                    ],
+                    providers: [provideFlowbiteBreadcrumbItemState()],
                     host: {
-                        '[attr.aria-label]': 'breadcrumb',
+                        '[class]': `theme().host.root`,
                     },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
-/**
- * Default theme for `BreadcrumbComponent`
- */
-const breadcrumbTheme = createTheme({
-    root: {
-        base: 'flex items-center',
+const flowbiteBreadcrumbContentTheme = createTheme({
+    host: {
+        base: 'inline-flex items-center space-x-1 md:space-x-2',
+        transition: '',
     },
 });
 
+const defaultFlowbiteBreadcrumbContentConfig = {
+    baseTheme: flowbiteBreadcrumbContentTheme,
+    customTheme: {},
+};
+const FlowbiteBreadcrumbContentConfigToken = new InjectionToken('FlowbiteBreadcrumbContentConfigToken');
 /**
- * Default theme for `BreadcrumbItemComponent`
+ * Provide the default BreadcrumbContent configuration
+ * @param config The BreadcrumbContent configuration
+ * @returns The provider
  */
-const breadcrumbItemTheme = createTheme({
-    root: {
-        base: 'group flex items-center text-sm font-medium cursor-pointer',
-        color: {
-            primary: 'text-primary-700 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-500',
-            dark: 'text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white',
-            blue: 'text-blue-700 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-500',
-            red: 'text-red-700 dark:text-red-400 hover:text-red-900 dark:hover:text-red-500',
-            green: 'text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-500',
-            yellow: 'text-yellow-700 dark:text-yellow-400 hover:text-yellow-900 dark:hover:text-yellow-500',
-        },
-    },
-    icon: {
-        base: 'mx-1 h-6 w-6 md:mx-2 group-first:hidden',
+const provideFlowbiteBreadcrumbContentConfig = (config) => [
+    {
+        provide: FlowbiteBreadcrumbContentConfigToken,
+        useValue: { ...defaultFlowbiteBreadcrumbContentConfig, ...config },
     },
-});
+];
+/**
+ * Inject the BreadcrumbContent configuration
+ * @see {@link defaultFlowbiteBreadcrumbContentConfig}
+ * @returns The configuration
+ */
+const injectFlowbiteBreadcrumbContentConfig = () => inject(FlowbiteBreadcrumbContentConfigToken, { optional: true }) ??
+    defaultFlowbiteBreadcrumbContentConfig;
+
+const FlowbiteBreadcrumbContentStateToken = createStateToken('Flowbite BreadcrumbContent');
+const provideFlowbiteBreadcrumbContentState = createStateProvider(FlowbiteBreadcrumbContentStateToken);
+const injectFlowbiteBreadcrumbContentState = createStateInjector(FlowbiteBreadcrumbContentStateToken);
+const flowbiteBreadcrumbContentState = createState(FlowbiteBreadcrumbContentStateToken);
+
+class BreadcrumbContent {
+    constructor() {
+        this.config = injectFlowbiteBreadcrumbContentConfig();
+        /**
+         * @see {@link injectFlowbiteBreadcrumbContentConfig}
+         */
+        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),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbiteBreadcrumbContentState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BreadcrumbContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: BreadcrumbContent, isStandalone: true, selector: "\n    ol[flowbiteBreadcrumbContent]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteBreadcrumbContentState()], exportAs: ["flowbiteBreadcrumbContent"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BreadcrumbContent, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: `
+    ol[flowbiteBreadcrumbContent]
+  `,
+                    exportAs: 'flowbiteBreadcrumbContent',
+                    hostDirectives: [],
+                    providers: [provideFlowbiteBreadcrumbContentState()],
+                    host: { '[class]': `theme().host.root` },
+                }]
+        }] });
+
+/* Breadcrumb */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbItemThemeService, BreadcrumbThemeService, FLOWBITE_BREADCRUMB_COLOR_DEFAULT_VALUE, FLOWBITE_BREADCRUMB_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_BREADCRUMB_ITEM_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_BREADCRUMB_ITEM_THEME_TOKEN, FLOWBITE_BREADCRUMB_THEME_TOKEN, breadcrumbDefaultValueProvider, breadcrumbItemDefaultValueProvider, breadcrumbItemTheme, breadcrumbTheme };
+export { Breadcrumb, BreadcrumbContent, BreadcrumbItem, FlowbiteBreadcrumbConfigToken, FlowbiteBreadcrumbContentConfigToken, FlowbiteBreadcrumbContentStateToken, FlowbiteBreadcrumbItemConfigToken, FlowbiteBreadcrumbItemStateToken, FlowbiteBreadcrumbStateToken, defaultFlowbiteBreadcrumbConfig, defaultFlowbiteBreadcrumbContentConfig, defaultFlowbiteBreadcrumbItemConfig, flowbiteBreadcrumbContentState, flowbiteBreadcrumbContentTheme, flowbiteBreadcrumbItemState, flowbiteBreadcrumbItemTheme, flowbiteBreadcrumbState, flowbiteBreadcrumbTheme, injectFlowbiteBreadcrumbConfig, injectFlowbiteBreadcrumbContentConfig, injectFlowbiteBreadcrumbContentState, injectFlowbiteBreadcrumbItemConfig, injectFlowbiteBreadcrumbItemState, injectFlowbiteBreadcrumbState, provideFlowbiteBreadcrumbConfig, provideFlowbiteBreadcrumbContentConfig, provideFlowbiteBreadcrumbContentState, provideFlowbiteBreadcrumbItemConfig, provideFlowbiteBreadcrumbItemState, provideFlowbiteBreadcrumbState };
 //# sourceMappingURL=flowbite-angular-breadcrumb.mjs.map