flowbite-angular 1.3.0 → 20.0.2

package/fesm2022/flowbite-angular-sidebar.mjs

@@ -1,893 +1,517 @@
-import { mergeTheme, CHEVRON_DOWN_SVG_ICON, createTheme, BARS_SVG_ICON } 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, untracked, contentChild } from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, computed, Directive, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
 import { twMerge } from 'tailwind-merge';
-import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
-import { BadgeComponent } from 'flowbite-angular/badge';
-import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link';
-import { FlowbiteRouterLinkActiveDirective } from 'flowbite-angular/router-link-active';
-import { SanitizeHtmlPipe } from 'flowbite-angular/sanitize-html';
-import { IconRegistry, IconComponent } from 'flowbite-angular/icon';
-import { DomSanitizer } from '@angular/platform-browser';
+import * as i1 from 'flowbite-angular/button';
+import { BaseButton } from 'flowbite-angular/button';
+import { barsFromLeft } from 'flowbite-angular/icon/outline/general';
+import { provideIcons } from '@ng-icons/core';
+import * as i2 from 'ng-primitives/button';
+import { NgpButton } from 'ng-primitives/button';
+import * as i3 from 'ng-primitives/interactions';
+import { NgpFocus } from 'ng-primitives/interactions';
 
-/**
- * `InjectionToken` used to import `SidebarItemGroupTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_SIDEBAR_ITEM_GROUP_THEME_TOKEN)
- * ```
- */
-const FLOWBITE_SIDEBAR_ITEM_GROUP_THEME_TOKEN = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_GROUP_THEME_TOKEN');
-class SidebarItemGroupThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_SIDEBAR_ITEM_GROUP_THEME_TOKEN);
-    }
-    getClasses(properties) {
-        const theme = mergeTheme(this.baseTheme, properties.customStyle);
-        const output = {
-            rootClass: twMerge(theme.root.base),
-            spanClass: twMerge(theme.spanText.base, theme.spanText.color[properties.color]),
-        };
-        return output;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarItemGroupThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarItemGroupThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarItemGroupThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
+const flowbiteSidebarTheme = createTheme({
+    host: {
+        base: 'fixed inset-0 top-0 left-0 z-40 h-screen lg:w-64',
+        transition: '',
+        open: {
+            on: 'w-full backdrop-blur-sm',
+            off: 'w-0',
+        },
+    },
+});
 
+const defaultFlowbiteSidebarConfig = {
+    baseTheme: flowbiteSidebarTheme,
+    open: false,
+    color: 'default',
+    customTheme: {},
+};
+const FlowbiteSidebarConfigToken = new InjectionToken('FlowbiteSidebarConfigToken');
 /**
- * `InjectionToken` used to import `SidebarItemTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN)
- * ```
+ * Provide the default Sidebar configuration
+ * @param config The Sidebar configuration
+ * @returns The provider
  */
-const FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN');
-class SidebarItemThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN);
-    }
-    getClasses(properties) {
-        const theme = mergeTheme(this.baseTheme, properties.customStyle);
-        const output = {
-            rootClass: twMerge(theme.root.base, theme.root.color[properties.color]),
-            sidebarIconClass: twMerge(theme.icon.base),
-        };
-        return output;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarItemThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarItemThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarItemThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE');
-const FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE');
-const FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE');
-const sidebarItemDefaultValueProvider = makeEnvironmentProviders([
+const provideFlowbiteSidebarConfig = (config) => [
     {
-        provide: FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE,
-        useValue: undefined,
+        provide: FlowbiteSidebarConfigToken,
+        useValue: { ...defaultFlowbiteSidebarConfig, ...config },
     },
-    {
-        provide: FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE,
-        useValue: undefined,
-    },
-    {
-        provide: FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
-    },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/sidebar/
+ * Inject the Sidebar configuration
+ * @see {@link defaultFlowbiteSidebarConfig}
+ * @returns The configuration
  */
-class SidebarItemComponent extends BaseComponent {
+const injectFlowbiteSidebarConfig = () => inject(FlowbiteSidebarConfigToken, { optional: true }) ?? defaultFlowbiteSidebarConfig;
+
+const FlowbiteSidebarStateToken = createStateToken('Flowbite Sidebar');
+const provideFlowbiteSidebarState = createStateProvider(FlowbiteSidebarStateToken);
+const injectFlowbiteSidebarState = createStateInjector(FlowbiteSidebarStateToken);
+const flowbiteSidebarState = createState(FlowbiteSidebarStateToken);
+
+class Sidebar {
     constructor() {
-        super(...arguments);
-        /**
-         * Optional `FlowbiteRouterLinkDirective` injected
-         */
-        this.flowbiteRouterLink = inject(FlowbiteRouterLinkDirective, { optional: true });
-        /**
-         * Optional `FlowbiteRouterLinkActiveDirective` injected
-         */
-        this.flowbiteRouterLinkActive = inject(FlowbiteRouterLinkActiveDirective, {
-            optional: true,
-        });
-        /**
-         * Service injected used to generate class
-         */
-        this.themeService = inject(SidebarItemThemeService);
-        /**
-         * The optional parent `SidebarItemGroupComponent`
-         */
-        this.sidebarItemGroupComponent = inject(SidebarItemGroupComponent, { optional: true });
+        this.config = injectFlowbiteSidebarConfig();
         /**
-         * The optional parent `SidebarMenuComponent`
+         * @see {@link injectFlowbiteSidebarConfig}
          */
-        this.sidebarMenuComponent = inject(SidebarMenuComponent, { optional: true });
-        //#region properties
+        this.open = input(this.config.open, { transform: booleanAttribute });
         /**
-         * Set the sidebar item icon
-         *
-         * @default undefined
+         * @see {@link injectFlowbiteSidebarConfig}
          */
-        this.icon = model(inject(FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE));
+        this.color = input(this.config.color);
         /**
-         * Set the sidebar item color
-         *
-         * @default `SidebarItemGroupComponent`'s color
-         * @default `SidebarMenuComponent`'s color
+         * @see {@link injectFlowbiteSidebarConfig}
          */
-        this.color = model((this.sidebarItemGroupComponent ?? this.sidebarMenuComponent).color());
-        /**
-         * Set the sidebar item label
-         *
-         * @default undefined
-         */
-        this.label = model(inject(FLOWBITE_SIDEBAR_ITEM_LABEL_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, mergedTheme.host.open[this.state.open() ? 'on' : 'off']),
+                },
+            };
+        });
         /**
-         * Set the custom style for this sidebar item
+         * @internal
          */
-        this.customStyle = model(inject(FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            icon: this.icon(),
-            color: this.color(),
-            label: this.label(),
-            customStyle: this.customStyle(),
-        });
+        this.state = flowbiteSidebarState(this);
     }
-    //#endregion
     /**
-     * Toggle sidebar menu visibility
+     * @internal
      */
     onClick() {
-        (this.sidebarMenuComponent || this.sidebarItemGroupComponent?.sidebarMenuComponent)?.closeAll();
-        (this.sidebarMenuComponent || this.sidebarItemGroupComponent?.sidebarMenuComponent)?.sidebarComponent.toggleVisibility(false);
+        this.toggle();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: SidebarItemComponent, isStandalone: true, selector: "flowbite-sidebar-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { icon: "iconChange", color: "colorChange", label: "labelChange", customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `
-    @if (icon()) {
-      <span
-        class="flex-shrink-0"
-        [innerHTML]="icon()! | sanitizeHtml"></span>
-    }
-
-    <span
-      [class]="contentClasses().sidebarIconClass"
-      [class.ml-3]="icon()">
-      <ng-content />
-    </span>
-    @if (label()) {
-      <flowbite-badge>{{ label() }}</flowbite-badge>
+    /**
+     * @internal
+     */
+    toggle(newState) {
+        newState ??= !this.state.open();
+        this.state.open.set(newState);
     }
-  `, isInline: true, dependencies: [{ kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: BadgeComponent, selector: "flowbite-badge", inputs: ["color", "hasBorder", "size", "isIconOnly", "isPill", "customStyle", "isDismissable", "onDismiss"], outputs: ["colorChange", "hasBorderChange", "sizeChange", "isIconOnlyChange", "isPillChange", "customStyleChange", "isDismissableChange", "onDismissChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: Sidebar, isStandalone: true, selector: "\n    aside[flowbiteSidebar]\n  ", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteSidebarState({ inherit: true })], exportAs: ["flowbiteSidebar"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarItemComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Sidebar, decorators: [{
+            type: Directive,
             args: [{
                     standalone: true,
-                    imports: [SanitizeHtmlPipe, BadgeComponent],
-                    selector: 'flowbite-sidebar-item',
-                    template: `
-    @if (icon()) {
-      <span
-        class="flex-shrink-0"
-        [innerHTML]="icon()! | sanitizeHtml"></span>
-    }
-
-    <span
-      [class]="contentClasses().sidebarIconClass"
-      [class.ml-3]="icon()">
-      <ng-content />
-    </span>
-    @if (label()) {
-      <flowbite-badge>{{ label() }}</flowbite-badge>
-    }
+                    selector: `
+    aside[flowbiteSidebar]
   `,
+                    exportAs: 'flowbiteSidebar',
+                    hostDirectives: [],
+                    providers: [provideFlowbiteSidebarState({ inherit: true })],
                     host: {
+                        '[class]': `theme().host.root`,
                         '(click)': 'onClick()',
                     },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
-const FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE');
-const sidebarItemGroupDefaultValueProvider = makeEnvironmentProviders([
+const flowbiteSidebarContentTheme = createTheme({
+    host: {
+        base: 'h-full overflow-y-auto border-r px-3 py-4 lg:translate-x-0 lg:border-0',
+        transition: '',
+        open: {
+            on: 'w-64 translate-x-0',
+            off: '-translate-x-full',
+        },
+        color: {
+            default: {
+                light: 'border-gray-200 bg-gray-100',
+                dark: 'dark:border-gray-800 dark:bg-gray-900',
+            },
+            info: {
+                light: 'border-blue-200 bg-gray-100',
+                dark: 'dark:border-blue-800 dark:bg-gray-900',
+            },
+            failure: {
+                light: 'border-red-200 bg-gray-100',
+                dark: 'dark:border-red-800 dark:bg-gray-900',
+            },
+            success: {
+                light: 'border-green-200 bg-gray-100',
+                dark: 'dark:border-green-800 dark:bg-gray-900',
+            },
+            warning: {
+                light: 'border-yellow-200 bg-gray-100',
+                dark: 'dark:border-yellow-800 dark:bg-gray-900',
+            },
+            primary: {
+                light: 'border-primary-200 bg-gray-100',
+                dark: 'dark:border-primary-800 dark:bg-gray-900',
+            },
+        },
+    },
+    container: {
+        base: 'space-y-2 font-medium',
+    },
+});
+
+const defaultFlowbiteSidebarContentConfig = {
+    baseTheme: flowbiteSidebarContentTheme,
+    customTheme: {},
+};
+const FlowbiteSidebarContentConfigToken = new InjectionToken('FlowbiteSidebarContentConfigToken');
+/**
+ * Provide the default SidebarContent configuration
+ * @param config The SidebarContent configuration
+ * @returns The provider
+ */
+const provideFlowbiteSidebarContentConfig = (config) => [
     {
-        provide: FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
+        provide: FlowbiteSidebarContentConfigToken,
+        useValue: { ...defaultFlowbiteSidebarContentConfig, ...config },
     },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/sidebar/
+ * Inject the SidebarContent configuration
+ * @see {@link defaultFlowbiteSidebarContentConfig}
+ * @returns The configuration
  */
-class SidebarItemGroupComponent extends BaseComponent {
+const injectFlowbiteSidebarContentConfig = () => inject(FlowbiteSidebarContentConfigToken, { optional: true }) ??
+    defaultFlowbiteSidebarContentConfig;
+
+const FlowbiteSidebarContentStateToken = createStateToken('Flowbite SidebarContent');
+const provideFlowbiteSidebarContentState = createStateProvider(FlowbiteSidebarContentStateToken);
+const injectFlowbiteSidebarContentState = createStateInjector(FlowbiteSidebarContentStateToken);
+const flowbiteSidebarContentState = createState(FlowbiteSidebarContentStateToken);
+
+class SidebarContent {
     constructor() {
-        super(...arguments);
-        /**
-         * Service injecteed used to generate class
-         */
-        this.themeService = inject(SidebarItemGroupThemeService);
-        /**
-         * `IconRegistry` service
-         */
-        this.iconRegistry = inject(IconRegistry);
-        /**
-         * `DomSanitizer` service
-         */
-        this.domSanitizer = inject(DomSanitizer);
-        /**
-         * The parent `SidebarMenuComponent`
-         */
-        this.sidebarMenuComponent = inject(SidebarMenuComponent);
-        /**
-         * List of `SidebarItemComponent`
-         */
-        this.sidebarItemChildren = contentChildren(SidebarItemComponent);
-        //#region properties
-        /**
-         * Set if the sidebar item group is open
-         *
-         * @default One of children is active
-         * @default false
-         */
-        this.isOpen = model(this.sidebarItemChildren().some((x) => x.flowbiteRouterLinkActive?.isActive() ?? false));
-        /**
-         * Set the sidebar item group color
-         *
-         * @default `SidebarMenuComponent`'s color
-         */
-        this.color = model(this.sidebarMenuComponent.color());
-        /**
-         * Set the sidebar item group title
-         */
-        this.title = model.required();
+        this.config = injectFlowbiteSidebarContentConfig();
+        this.sidebarState = injectFlowbiteSidebarState();
+        /**
+         * @see {@link injectFlowbiteSidebarContentConfig}
+         */
+        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, mergedTheme.host.open[this.sidebarState().open() ? 'on' : 'off'], colorToTheme(mergedTheme.host.color, this.sidebarState().color())),
+                },
+                container: {
+                    root: twMerge(mergedTheme.container.base),
+                },
+            };
+        });
         /**
-         * Set the custom style for this sidebar item group
+         * @internal
          */
-        this.customStyle = model(inject(FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            color: this.color(),
-            customStyle: this.customStyle(),
-        });
-    }
-    init() {
-        this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'chevron-down', this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_DOWN_SVG_ICON));
+        this.state = flowbiteSidebarContentState(this);
     }
-    //#endregion
     /**
-     * Toggle isOpen value
-     *
-     * @param isOpen If provided force isOpen value
+     * @internal
      */
-    toggleVisibility(isOpen) {
-        if (isOpen === undefined) {
-            isOpen = untracked(() => !this.isOpen());
-        }
-        this.isOpen.set(isOpen);
+    onClick($event) {
+        $event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarItemGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: SidebarItemGroupComponent, isStandalone: true, selector: "flowbite-sidebar-item-group", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", color: "colorChange", title: "titleChange", customStyle: "customStyleChange" }, queries: [{ propertyName: "sidebarItemChildren", predicate: SidebarItemComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <span
-      [class]="contentClasses().spanClass"
-      (click)="toggleVisibility()">
-      <h4>{{ title() }}</h4>
-      <flowbite-icon
-        svgIcon="flowbite-angular:chevron-down"
-        class="h-6 w-6 shrink-0 duration-200"
-        [class.rotate-180]="!isOpen()" />
-    </span>
-    @if (isOpen()) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SidebarContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SidebarContent, isStandalone: true, selector: "\n    div[flowbiteSidebarContent]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteSidebarContentState()], exportAs: ["flowbiteSidebarContent"], ngImport: i0, template: `
+    <ul [class]="theme().container.root">
       <ng-content />
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    </ul>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarItemGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SidebarContent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    imports: [IconComponent],
-                    selector: 'flowbite-sidebar-item-group',
+                    selector: `
+    div[flowbiteSidebarContent]
+  `,
+                    exportAs: 'flowbiteSidebarContent',
+                    hostDirectives: [],
+                    imports: [],
+                    providers: [provideFlowbiteSidebarContentState()],
+                    host: {
+                        '[class]': `theme().host.root`,
+                        '(click)': 'onClick($event)',
+                    },
                     template: `
-    <span
-      [class]="contentClasses().spanClass"
-      (click)="toggleVisibility()">
-      <h4>{{ title() }}</h4>
-      <flowbite-icon
-        svgIcon="flowbite-angular:chevron-down"
-        class="h-6 w-6 shrink-0 duration-200"
-        [class.rotate-180]="!isOpen()" />
-    </span>
-    @if (isOpen()) {
+    <ul [class]="theme().container.root">
       <ng-content />
-    }
+    </ul>
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
-/**
- * `InjectionToken` used to import `SidebarMenuTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_SIDEBAR_MENU_THEME_TOKEN)
- * ```
- */
-const FLOWBITE_SIDEBAR_MENU_THEME_TOKEN = new InjectionToken('FLOWBITE_SIDEBAR_MENU_THEME_TOKEN');
-class SidebarMenuThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_SIDEBAR_MENU_THEME_TOKEN);
-    }
-    getClasses(properties) {
-        const theme = mergeTheme(this.baseTheme, properties.customStyle);
-        const output = {
-            rootClass: twMerge(theme.root.base, theme.root.isOpen[properties.isOpen], properties.isOpen === 'enabled' && theme.root.displayMode[properties.displayMode], theme.root.color[properties.color]),
-        };
-        return output;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarMenuThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarMenuThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarMenuThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE');
-const sidebarMenuDefaultValueProvider = makeEnvironmentProviders([
-    {
-        provide: FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
+const flowbiteSidebarToggleTheme = createTheme({
+    host: {
+        base: 'inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-lg p-2 text-sm lg:hidden',
+        transition: '',
+        focus: 'data-focus:ring-0 data-focus:outline-none data-focus-visible:ring-2 data-focus-visible:outline-none',
+        disabled: 'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        size: {},
+        pill: {},
+        color: {
+            default: {
+                light: 'text-gray-900',
+                dark: 'dark:text-gray-100',
+            },
+            info: {
+                light: 'text-blue-900',
+                dark: 'dark:text-blue-100',
+            },
+            failure: {
+                light: 'text-red-900',
+                dark: 'dark:text-red-100',
+            },
+            success: {
+                light: 'text-green-900',
+                dark: 'dark:text-green-100',
+            },
+            warning: {
+                light: 'text-yellow-900',
+                dark: 'dark:text-yellow-100',
+            },
+            primary: {
+                light: 'text-primary-900',
+                dark: 'dark:text-primary-100',
+            },
+        },
+        colorOutline: {},
     },
-]);
-/**
- * @see https://flowbite.com/docs/components/sidebar/
- */
-class SidebarMenuComponent extends BaseComponent {
-    constructor() {
-        super(...arguments);
-        /**
-         * Service injected used to generate class
-         */
-        this.themeService = inject(SidebarMenuThemeService);
-        /**
-         * The parent `SidebarComponent`
-         */
-        this.sidebarComponent = inject(SidebarComponent);
-        /**
-         * List of `SidebarItemGroupComponent`
-         */
-        this.sidebarItemGroupChildren = contentChildren(SidebarItemGroupComponent);
-        /**
-         * List of `SidebarItemComponent`
-         */
-        this.sidebarItemChildren = contentChildren(SidebarItemComponent);
-        //#region properties
-        /**
-         * Set the sidebar menu color
-         *
-         * @default `SidebarComponent`'s color
-         */
-        this.color = model(this.sidebarComponent.color());
-        /**
-         * Set the custom style for this sidebar menu
-         */
-        this.customStyle = model(inject(FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //#endregion
-    fetchClass() {
-        return this.themeService.getClasses({
-            isOpen: booleanToFlowbiteBoolean(this.sidebarComponent.isOpen()),
-            color: this.color(),
-            displayMode: this.sidebarComponent.displayMode(),
-            customStyle: this.customStyle(),
-        });
-    }
-    /**
-     * Toggle visibility of ll children to false
-     */
-    closeAll() {
-        this.sidebarItemGroupChildren().forEach((x) => x.toggleVisibility(false));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.4", type: SidebarMenuComponent, isStandalone: true, selector: "flowbite-sidebar-menu", 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" }, queries: [{ propertyName: "sidebarItemGroupChildren", predicate: SidebarItemGroupComponent, isSignal: true }, { propertyName: "sidebarItemChildren", predicate: SidebarItemComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarMenuComponent, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: true,
-                    selector: 'flowbite-sidebar-menu',
-                    template: '<ng-content />',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
+});
 
+const defaultFlowbiteSidebarToggleConfig = {
+    baseTheme: flowbiteSidebarToggleTheme,
+    customTheme: {},
+};
+const FlowbiteSidebarToggleConfigToken = new InjectionToken('FlowbiteSidebarToggleConfigToken');
 /**
- * `InjectionToken` used to import `SidebarPageContentTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN)
- * ```
+ * Provide the default SidebarToggle configuration
+ * @param config The SidebarToggle configuration
+ * @returns The provider
  */
-const FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN = new InjectionToken('FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN');
-class SidebarPageContentThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN);
-    }
-    getClasses(properties) {
-        const theme = mergeTheme(this.baseTheme, properties.customStyle);
-        const output = {
-            rootClass: twMerge(theme.root.base, properties.isOpen === 'enabled' && theme.root.displayMode[properties.displayMode]),
-        };
-        return output;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarPageContentThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarPageContentThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarPageContentThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE');
-const sidebarPageContentDefaultValueProvider = makeEnvironmentProviders([
+const provideFlowbiteSidebarToggleConfig = (config) => [
     {
-        provide: FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
+        provide: FlowbiteSidebarToggleConfigToken,
+        useValue: { ...defaultFlowbiteSidebarToggleConfig, ...config },
     },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/sidebar/
+ * Inject the SidebarToggle configuration
+ * @see {@link defaultFlowbiteSidebarToggleConfig}
+ * @returns The configuration
  */
-class SidebarPageContentComponent extends BaseComponent {
-    constructor() {
-        super(...arguments);
-        /**
-         * Service injected used to generate class
-         */
-        this.themeService = inject(SidebarPageContentThemeService);
-        /**
-         * The parent `SidebarComponent`
-         */
-        this.sidebarComponent = inject(SidebarComponent);
-        //#region properties
-        /**
-         * Set the custom style for this sidebar page content
-         */
-        this.customStyle = model(inject(FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //endregion
-    //region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            isOpen: booleanToFlowbiteBoolean(this.sidebarComponent.isOpen()),
-            displayMode: this.sidebarComponent.displayMode(),
-            customStyle: this.customStyle(),
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarPageContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: SidebarPageContentComponent, isStandalone: true, selector: "flowbite-sidebar-page-content", 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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarPageContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: true,
-                    selector: 'flowbite-sidebar-page-content',
-                    template: `<ng-content />`,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
+const injectFlowbiteSidebarToggleConfig = () => inject(FlowbiteSidebarToggleConfigToken, { optional: true }) ??
+    defaultFlowbiteSidebarToggleConfig;
 
-/**
- * `InjectionToken` used to import `SidebarTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_SIDEBAR_THEME_TOKEN)
- * ```
- */
-const FLOWBITE_SIDEBAR_THEME_TOKEN = new InjectionToken('FLOWBITE_SIDEBAR_THEME_TOKEN');
-class SidebarThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_SIDEBAR_THEME_TOKEN);
-    }
-    getClasses(properties) {
-        const theme = mergeTheme(this.baseTheme, properties.customStyle);
-        const output = {
-            rootClass: twMerge(theme.root.base, theme.root.isRounded[properties.isRounded]),
-        };
-        return output;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
+const FlowbiteSidebarToggleStateToken = createStateToken('Flowbite SidebarToggle');
+const provideFlowbiteSidebarToggleState = createStateProvider(FlowbiteSidebarToggleStateToken);
+const injectFlowbiteSidebarToggleState = createStateInjector(FlowbiteSidebarToggleStateToken);
+const flowbiteSidebarToggleState = createState(FlowbiteSidebarToggleStateToken);
 
-const FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE');
-const FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE');
-const FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE');
-const FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE');
-const FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE');
-const sidebarDefaultValueProvider = makeEnvironmentProviders([
-    {
-        provide: FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE,
-        useValue: 'primary',
-    },
-    {
-        provide: FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE,
-        useValue: 'push',
-    },
-    {
-        provide: FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE,
-        useValue: false,
-    },
-    {
-        provide: FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE,
-        useValue: false,
-    },
-    {
-        provide: FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
-    },
-]);
-/**
- * @see https://flowbite.com/docs/components/sidebar/
- */
-class SidebarComponent extends BaseComponent {
+class SidebarToggle {
     constructor() {
-        super(...arguments);
-        /**
-         * Service injected used to generate class
-         */
-        this.themeService = inject(SidebarThemeService);
-        /**
-         * The child `SidebarMenuComponent`
-         */
-        this.sidebarMenuChild = contentChild.required(SidebarMenuComponent);
-        /**
-         * The child `SidebarPageContentComponent`
-         */
-        this.sidebarPageContentChild = contentChild.required(SidebarPageContentComponent);
-        //#region properties
-        /**
-         * Set the sidebar color
-         *
-         * @default primary
-         */
-        this.color = model(inject(FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE));
-        /**
-         * Set the sidebar display mode
-         *
-         * @default push
-         */
-        this.displayMode = model(inject(FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE));
-        /**
-         * Set is the sidebar is open
-         *
-         * @default false
-         */
-        this.isOpen = model(inject(FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE));
-        /**
-         * Set is the sidebar is rounded
-         *
-         * @default false
-         */
-        this.isRounded = model(inject(FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE));
+        this.config = injectFlowbiteSidebarToggleConfig();
+        this.sidebarState = injectFlowbiteSidebarState();
+        /**
+         * @see {@link injectFlowbiteSidebarToggleConfig}
+         */
+        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, mergedTheme.host.focus, mergedTheme.host.disabled, colorToTheme(mergedTheme.host.color, this.sidebarState().color())),
+                },
+            };
+        });
         /**
-         * Set the custom style for this sidebar
+         * @internal
          */
-        this.customStyle = model(inject(FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE));
+        this.state = flowbiteSidebarToggleState(this);
     }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            displayMode: this.displayMode(),
-            isRounded: booleanToFlowbiteBoolean(this.isRounded()),
-            customStyle: this.customStyle(),
-        });
+    /**
+     * @internal
+     */
+    onClick() {
+        this.toggleSidebar();
     }
-    //#endregion
     /**
-     * Toggle sidebar visibility
-     *
-     * @param isOpen If provided force isOpen value
+     * @internal
      */
-    toggleVisibility(isOpen) {
-        if (isOpen === undefined) {
-            isOpen = untracked(() => !this.isOpen());
-        }
-        this.isOpen.set(isOpen);
+    toggleSidebar() {
+        this.sidebarState().toggle();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.4", type: SidebarComponent, isStandalone: true, selector: "flowbite-sidebar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isRounded: { classPropertyName: "isRounded", publicName: "isRounded", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", displayMode: "displayModeChange", isOpen: "isOpenChange", isRounded: "isRoundedChange", customStyle: "customStyleChange" }, queries: [{ propertyName: "sidebarMenuChild", first: true, predicate: SidebarMenuComponent, descendants: true, isSignal: true }, { propertyName: "sidebarPageContentChild", first: true, predicate: SidebarPageContentComponent, descendants: true, 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: SidebarToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: SidebarToggle, isStandalone: true, selector: "\n    button[flowbiteSidebarToggle]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteSidebarToggleState(), provideIcons({ barsFromLeft })], exportAs: ["flowbiteSidebarToggle"], hostDirectives: [{ directive: i1.BaseButton }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SidebarToggle, decorators: [{
+            type: Directive,
             args: [{
                     standalone: true,
-                    selector: 'flowbite-sidebar',
-                    template: `<ng-content />`,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: `
+    button[flowbiteSidebarToggle]
+  `,
+                    exportAs: 'flowbiteSidebarToggle',
+                    hostDirectives: [
+                        {
+                            directive: BaseButton,
+                            inputs: [],
+                            outputs: [],
+                        },
+                    ],
+                    providers: [provideFlowbiteSidebarToggleState(), provideIcons({ barsFromLeft })],
+                    host: {
+                        '[class]': `theme().host.root`,
+                        '(click)': 'onClick()',
+                    },
                 }]
         }] });
 
-const sidebarTheme = createTheme({
-    root: {
-        base: 'flex flex-row min-h-full',
-        isRounded: {
-            enabled: 'rounded',
-            disabled: '',
-        },
-    },
-});
-
-/**
- * Default theme for `SidebarItemComponent`
- */
-const sidebarItemTheme = createTheme({
-    root: {
-        base: 'group flex cursor-pointer items-center rounded-lg p-2 text-base font-normal text-gray-900 dark:text-white',
-        color: {
-            primary: 'aria-current:text-primary-500 dark:aria-current:text-primary-300 hover:bg-primary-200/35 dark:hover:bg-primary-700/35',
-            dark: 'aria-current:text-gray-500 dark:aria-current:text-gray-300 hover:bg-gray-200/35 dark:hover:bg-gray-700/35',
-            blue: 'aria-current:text-blue-500 dark:aria-current:text-blue-300 hover:bg-blue-200/35 dark:hover:bg-blue-700/35',
-            red: 'aria-current:text-red-500 dark:aria-current:text-red-300 hover:bg-red-200/35 dark:hover:bg-red-700/35',
-            green: 'aria-current:text-green-500 dark:aria-current:text-green-300 hover:bg-green-200/35 dark:hover:bg-green-700/35',
-            yellow: 'aria-current:text-yellow-500 dark:aria-current:text-yellow-300 hover:bg-yellow-200/35 dark:hover:bg-yellow-700/35',
-        },
-    },
-    icon: {
-        base: 'flex-1 whitespace-nowrap',
-    },
-});
-
-/**
- * Default theme for `SidebarItemGroupComponent`
- */
-const sidebarItemGroupTheme = createTheme({
-    root: {
-        base: 'flex flex-col py-2 font-semibold cursor-pointer',
-    },
-    spanText: {
-        base: 'flex flex-row justify-between m-2',
+const flowbiteSidebarItemTheme = createTheme({
+    host: {
+        base: 'm-0 flex cursor-pointer flex-row rounded-sm px-3 py-2',
+        transition: '',
+        focus: 'data-focus:ring-0 data-focus:outline-none data-focus-visible:ring-2 data-focus-visible:outline-none',
+        disabled: 'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        size: {},
+        pill: {},
         color: {
-            primary: 'text-primary-600',
-            dark: 'text-gray-600',
-            blue: 'text-blue-600',
-            red: 'text-red-600',
-            green: 'text-green-600',
-            yellow: 'text-yellow-600',
+            default: {
+                light: 'text-gray-800 data-hover:text-gray-900',
+                dark: 'dark:text-white dark:data-hover:text-gray-100',
+            },
+            info: {
+                light: 'text-gray-800 data-hover:text-blue-900',
+                dark: 'dark:text-white dark:data-hover:text-blue-100',
+            },
+            failure: {
+                light: 'text-gray-800 data-hover:text-red-900',
+                dark: 'dark:text-white dark:data-hover:text-red-100',
+            },
+            success: {
+                light: 'text-gray-800 data-hover:text-green-900',
+                dark: 'dark:text-white dark:data-hover:text-green-100',
+            },
+            warning: {
+                light: 'text-gray-800 data-hover:text-yellow-900',
+                dark: 'dark:text-white dark:data-hover:text-yellow-100',
+            },
+            primary: {
+                light: 'data-hover:text-primary-900 text-gray-800',
+                dark: 'dark:data-hover:text-primary-100 dark:text-white',
+            },
         },
+        colorOutline: {},
     },
 });
 
+const defaultFlowbiteSidebarItemConfig = {
+    baseTheme: flowbiteSidebarItemTheme,
+    customTheme: {},
+};
+const FlowbiteSidebarItemConfigToken = new InjectionToken('FlowbiteSidebarItemConfigToken');
 /**
- * `InjectionToken` used to import `SidebarToggleTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_SIDEBAR_TOGGLE_THEME_TOKEN)
- * ```
+ * Provide the default SidebarItem configuration
+ * @param config The SidebarItem configuration
+ * @returns The provider
  */
-const FLOWBITE_SIDEBAR_TOGGLE_THEME_TOKEN = new InjectionToken('FLOWBITE_TOGGLE_SIDEBAR_THEME_TOKEN');
-class SidebarToggleThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_SIDEBAR_TOGGLE_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.size[properties.color]),
-        };
-        return output;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarToggleThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarToggleThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarToggleThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE');
-const FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE');
-const FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE');
-const sidebarToggleDefaultValueProvider = makeEnvironmentProviders([
+const provideFlowbiteSidebarItemConfig = (config) => [
     {
-        provide: FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE,
-        useValue: 'primary',
+        provide: FlowbiteSidebarItemConfigToken,
+        useValue: { ...defaultFlowbiteSidebarItemConfig, ...config },
     },
-    {
-        provide: FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE,
-        useValue: 'sm',
-    },
-    {
-        provide: FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
-    },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/sidebar/
+ * Inject the SidebarItem configuration
+ * @see {@link defaultFlowbiteSidebarItemConfig}
+ * @returns The configuration
  */
-class SidebarToggleComponent extends BaseComponent {
+const injectFlowbiteSidebarItemConfig = () => inject(FlowbiteSidebarItemConfigToken, { optional: true }) ?? defaultFlowbiteSidebarItemConfig;
+
+const FlowbiteSidebarItemStateToken = createStateToken('Flowbite SidebarItem');
+const provideFlowbiteSidebarItemState = createStateProvider(FlowbiteSidebarItemStateToken);
+const injectFlowbiteSidebarItemState = createStateInjector(FlowbiteSidebarItemStateToken);
+const flowbiteSidebarItemState = createState(FlowbiteSidebarItemStateToken);
+
+class SidebarItem {
     constructor() {
-        super(...arguments);
-        /**
-         * Service injected used to generate class
-         */
-        this.themeService = inject(SidebarToggleThemeService);
-        /**
-         * `IconRegistry` service
-         */
-        this.iconRegistry = inject(IconRegistry);
-        /**
-         * `DomSanitizer` service
-         */
-        this.domSanitizer = inject(DomSanitizer);
-        /**
-         * The `SidebarComponent` to use
-         *
-         * @default The injected `SidebarComponent`
-         */
-        this.sidebarComponent = model(inject(SidebarComponent));
-        //#region properties
-        /**
-         * Set the sidebar toggle color
-         *
-         * @default primary
-         */
-        this.color = model(inject(FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE));
-        /**
-         * Set the sidebar toggle size
-         *
-         * @default sm
-         */
-        this.size = model(inject(FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE));
+        this.config = injectFlowbiteSidebarItemConfig();
+        this.sidebarState = injectFlowbiteSidebarState();
+        /**
+         * @see {@link injectFlowbiteSidebarItemConfig}
+         */
+        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, mergedTheme.host.focus, mergedTheme.host.disabled, colorToTheme(mergedTheme.host.color, this.sidebarState().color())),
+                },
+            };
+        });
         /**
-         * Set the custom style for this sidebar toggle
+         * @internal
          */
-        this.customStyle = model(inject(FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            color: this.color(),
-            size: this.size(),
-            customStyle: this.customStyle(),
-        });
-    }
-    init() {
-        this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'tabs', this.domSanitizer.bypassSecurityTrustHtml(BARS_SVG_ICON));
+        this.state = flowbiteSidebarItemState(this);
     }
-    //#endregion
     /**
-     * Toggle sidebar visibility
+     * @internal
      */
     onClick() {
-        const isOpen = this.sidebarComponent().isOpen();
-        this.sidebarComponent().isOpen.set(!isOpen);
+        this.toggleSidebar();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: SidebarToggleComponent, isStandalone: true, selector: "flowbite-sidebar-toggle", inputs: { sidebarComponent: { classPropertyName: "sidebarComponent", publicName: "sidebarComponent", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sidebarComponent: "sidebarComponentChange", color: "colorChange", size: "sizeChange", customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `<flowbite-icon svgIcon="flowbite-angular:bars" />`, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /**
+     * @internal
+     */
+    toggleSidebar() {
+        this.sidebarState().toggle();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SidebarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: SidebarItem, isStandalone: true, selector: "\n    a[flowbiteSidebarItem],\n    button[flowbiteSidebarItem]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteSidebarItemState()], exportAs: ["flowbiteSidebarItem"], hostDirectives: [{ directive: i1.BaseButton }, { directive: i2.NgpButton, inputs: ["disabled", "disabled"] }, { directive: i3.NgpFocus, inputs: ["ngpFocusDisabled", "focusDisabled"], outputs: ["ngpFocus", "ngpFocus"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarToggleComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SidebarItem, decorators: [{
+            type: Directive,
             args: [{
                     standalone: true,
-                    imports: [IconComponent],
-                    selector: 'flowbite-sidebar-toggle',
-                    template: `<flowbite-icon svgIcon="flowbite-angular:bars" />`,
+                    selector: `
+    a[flowbiteSidebarItem],
+    button[flowbiteSidebarItem]
+  `,
+                    exportAs: 'flowbiteSidebarItem',
+                    hostDirectives: [
+                        {
+                            directive: BaseButton,
+                            inputs: [],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpButton,
+                            inputs: ['disabled:disabled'],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpFocus,
+                            inputs: ['ngpFocusDisabled:focusDisabled'],
+                            outputs: ['ngpFocus'],
+                        },
+                    ],
+                    providers: [provideFlowbiteSidebarItemState()],
                     host: {
+                        '[class]': `theme().host.root`,
                         '(click)': 'onClick()',
                     },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
-/**
- * Default theme for `SidebarToggleComponent`
- */
-const sidebarToggleTheme = createTheme({
-    root: {
-        base: 'cursor-pointer inline-flex items-center p-2 justify-center rounded-lg focus:outline-none focus:ring-2',
-        color: {
-            primary: 'text-primary-500 dark:text-primary-400 hover:bg-primary-100 dark:hover:bg-gray-700 focus:ring-primary-200 dark:focus:ring-primary-600',
-            dark: 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-gray-200 dark:focus:ring-gray-600',
-            blue: 'text-blue-500 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 focus:ring-blue-200 dark:focus:ring-blue-600',
-            red: 'text-red-500 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-700 focus:ring-red-200 dark:focus:ring-red-600',
-            green: 'text-green-500 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-700 focus:ring-green-200 dark:focus:ring-green-600',
-            yellow: 'text-yellow-500 dark:text-yellow-400 hover:bg-yellow-100 dark:hover:bg-yellow-700 focus:ring-yellow-200 dark:focus:ring-yellow-600',
-        },
-        size: {
-            sm: 'text-sm',
-        },
-    },
-});
-
-/**
- * Default theme for `SidebarPageContentComponent`
- */
-const sidebarPageContentTheme = createTheme({
-    root: {
-        base: 'flex flex-1',
-        displayMode: {
-            push: '',
-            over: '',
-            backdrop: 'sticky left-0 right-0 z-30 bg-gray-500 bg-opacity-50 blur-md',
-        },
-    },
-});
-
-/**
- * Default theme for `SidebarMenuComponent`
- */
-const sidebarMenuTheme = createTheme({
-    root: {
-        base: 'flex-col min-h-full overflow-y-auto shrink-0 pr-1 border-r bg-white dark:bg-gray-800',
-        displayMode: {
-            push: '',
-            over: 'sticky top-0 z-50',
-            backdrop: 'sticky top-0 z-50',
-        },
-        isOpen: {
-            enabled: 'flex',
-            disabled: 'hidden',
-        },
-        color: {
-            primary: 'border-primary-200 dark:border-primary-700',
-            dark: 'border-gray-200 dark:border-gray-800',
-            blue: 'border-blue-200 dark:border-blue-700',
-            red: 'border-red-200 dark:border-red-700',
-            green: 'border-green-200 dark:border-green-700',
-            yellow: 'border-yellow-200 dark:border-yellow-700',
-        },
-    },
-});
+/* Sidebar */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE, FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE, FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE, FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_ITEM_GROUP_THEME_TOKEN, FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE, FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE, FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN, FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_MENU_THEME_TOKEN, FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN, FLOWBITE_SIDEBAR_THEME_TOKEN, FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE, FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_TOGGLE_THEME_TOKEN, SidebarComponent, SidebarItemComponent, SidebarItemGroupComponent, SidebarItemGroupThemeService, SidebarItemThemeService, SidebarMenuComponent, SidebarMenuThemeService, SidebarPageContentComponent, SidebarPageContentThemeService, SidebarThemeService, SidebarToggleComponent, SidebarToggleThemeService, sidebarDefaultValueProvider, sidebarItemDefaultValueProvider, sidebarItemGroupDefaultValueProvider, sidebarItemGroupTheme, sidebarItemTheme, sidebarMenuDefaultValueProvider, sidebarMenuTheme, sidebarPageContentDefaultValueProvider, sidebarPageContentTheme, sidebarTheme, sidebarToggleDefaultValueProvider, sidebarToggleTheme };
+export { FlowbiteSidebarConfigToken, FlowbiteSidebarContentConfigToken, FlowbiteSidebarContentStateToken, FlowbiteSidebarItemConfigToken, FlowbiteSidebarItemStateToken, FlowbiteSidebarStateToken, FlowbiteSidebarToggleConfigToken, FlowbiteSidebarToggleStateToken, Sidebar, SidebarContent, SidebarItem, SidebarToggle, defaultFlowbiteSidebarConfig, defaultFlowbiteSidebarContentConfig, defaultFlowbiteSidebarItemConfig, defaultFlowbiteSidebarToggleConfig, flowbiteSidebarContentState, flowbiteSidebarContentTheme, flowbiteSidebarItemState, flowbiteSidebarItemTheme, flowbiteSidebarState, flowbiteSidebarTheme, flowbiteSidebarToggleState, flowbiteSidebarToggleTheme, injectFlowbiteSidebarConfig, injectFlowbiteSidebarContentConfig, injectFlowbiteSidebarContentState, injectFlowbiteSidebarItemConfig, injectFlowbiteSidebarItemState, injectFlowbiteSidebarState, injectFlowbiteSidebarToggleConfig, injectFlowbiteSidebarToggleState, provideFlowbiteSidebarConfig, provideFlowbiteSidebarContentConfig, provideFlowbiteSidebarContentState, provideFlowbiteSidebarItemConfig, provideFlowbiteSidebarItemState, provideFlowbiteSidebarState, provideFlowbiteSidebarToggleConfig, provideFlowbiteSidebarToggleState };
 //# sourceMappingURL=flowbite-angular-sidebar.mjs.map