flowbite-angular 1.3.0 → 20.0.1

package/fesm2022/flowbite-angular-navbar.mjs

@@ -1,746 +1,742 @@
-import { mergeTheme, BARS_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, contentChild, untracked } from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive } from '@angular/core';
+import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
 import { twMerge } from 'tailwind-merge';
-import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import { IconRegistry, IconComponent } from 'flowbite-angular/icon';
-import { DomSanitizer } from '@angular/platform-browser';
-import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link';
-import { FlowbiteRouterLinkActiveDirective } from 'flowbite-angular/router-link-active';
+import * as i1 from 'flowbite-angular/button';
+import { BaseButton, injectFlowbiteBaseButtonState } from 'flowbite-angular/button';
+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';
+import { bars } from 'flowbite-angular/icon/outline/general';
+import { provideIcons } from '@ng-icons/core';
 
-/**
- * `InjectionToken` used to import `NavbarBrandTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_NAVBAR_BRAND_THEME_TOKEN)
- * ```
- */
-const FLOWBITE_NAVBAR_BRAND_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_BRAND_THEME_TOKEN');
-class NavbarBrandThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_NAVBAR_BRAND_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: NavbarBrandThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarBrandThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarBrandThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE');
-const navbarBrandDefaultThemeProvider = makeEnvironmentProviders([
-    {
-        provide: FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
+const flowbiteNavbarTheme = createTheme({
+    host: {
+        base: '',
+        transition: '',
+        fixed: {
+            on: 'fixed start-0 top-0 z-20 w-full border-b',
+            off: '',
+        },
+        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',
+            },
+        },
     },
-]);
-/**
- * @see https://flowbite.com/docs/components/navbar/
- */
-class NavbarBrandComponent extends BaseComponent {
-    constructor() {
-        super(...arguments);
-        /**
-         * Service injected used to generate class
-         */
-        this.themeService = inject(NavbarBrandThemeService);
-        /**
-         * The parent `NavbarComponent`
-         */
-        this.navbarComponent = inject(NavbarComponent);
-        //#region properties
-        /**
-         * Set the custom style for this navbar brand
-         */
-        this.customStyle = model(inject(FLOWBITE_NAVBAR_BRAND_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: NavbarBrandComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: NavbarBrandComponent, isStandalone: true, selector: "flowbite-navbar-brand", 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: NavbarBrandComponent, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: true,
-                    selector: 'flowbite-navbar-brand',
-                    template: `<ng-content />`,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
+    container: {
+        base: 'mx-auto flex max-w-screen flex-wrap items-center justify-between p-4',
+        transition: '',
+    },
+});
 
+const defaultFlowbiteNavbarConfig = {
+    baseTheme: flowbiteNavbarTheme,
+    fixed: false,
+    open: false,
+    color: 'default',
+    customTheme: {},
+};
+const FlowbiteNavbarConfigToken = new InjectionToken('FlowbiteNavbarConfigToken');
 /**
- * `InjectionToken` used to import `NavbarContentTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN)
- * ```
+ * Provide the default Navbar configuration
+ * @param config The Navbar configuration
+ * @returns The provider
  */
-const FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN');
-class NavbarContentThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN);
-    }
-    getClasses(properties) {
-        const theme = mergeTheme(this.baseTheme, properties.customStyle);
-        const output = {
-            rootClass: twMerge(theme.root.base),
-            navbarContentListClass: twMerge(theme.list.base),
-        };
-        return output;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarContentThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarContentThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarContentThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE');
-const navbarContentDefaultValueProvider = makeEnvironmentProviders([
+const provideFlowbiteNavbarConfig = (config) => [
     {
-        provide: FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
+        provide: FlowbiteNavbarConfigToken,
+        useValue: { ...defaultFlowbiteNavbarConfig, ...config },
     },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/navbar/
+ * Inject the Navbar configuration
+ * @see {@link defaultFlowbiteNavbarConfig}
+ * @returns The configuration
  */
-class NavbarContentComponent extends BaseComponent {
+const injectFlowbiteNavbarConfig = () => inject(FlowbiteNavbarConfigToken, { optional: true }) ?? defaultFlowbiteNavbarConfig;
+
+const FlowbiteNavbarStateToken = createStateToken('Flowbite Navbar');
+const provideFlowbiteNavbarState = createStateProvider(FlowbiteNavbarStateToken);
+const injectFlowbiteNavbarState = createStateInjector(FlowbiteNavbarStateToken);
+const flowbiteNavbarState = createState(FlowbiteNavbarStateToken);
+
+class Navbar {
     constructor() {
-        super(...arguments);
+        this.config = injectFlowbiteNavbarConfig();
         /**
-         * Service injected used to generate class
+         * @see {@link injectFlowbiteNavbarConfig}
          */
-        this.themeService = inject(NavbarContentThemeService);
+        this.fixed = input(this.config.fixed, { transform: booleanAttribute });
         /**
-         * The parent `NavbarComponent`
+         * @see {@link injectFlowbiteNavbarConfig}
          */
-        this.navbarComponent = model(inject(NavbarComponent));
-        //#region properties
+        this.open = input(this.config.open, { transform: booleanAttribute });
         /**
-         * Set the navbar content color
-         *
-         * @default `NavbarComponent`'s color
+         * @see {@link injectFlowbiteNavbarConfig}
          */
-        this.color = model(this.navbarComponent().color());
+        this.color = input(this.config.color);
         /**
-         * Set the custom style for this navbar content
+         * @see {@link injectFlowbiteNavbarConfig}
          */
-        this.customStyle = model(inject(FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            customStyle: this.customStyle(),
+        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.fixed[this.state.fixed() ? 'on' : 'off'], colorToTheme(mergedTheme.host.color, this.state.color())),
+                },
+                container: {
+                    root: twMerge(mergedTheme.container.base, mergedTheme.container.transition),
+                },
+            };
         });
+        /**
+         * @internal
+         */
+        this.state = flowbiteNavbarState(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: NavbarContentComponent, isStandalone: true, selector: "flowbite-navbar-content", inputs: { navbarComponent: { classPropertyName: "navbarComponent", publicName: "navbarComponent", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navbarComponent: "navbarComponentChange", color: "colorChange", customStyle: "customStyleChange" }, host: { properties: { "@isOpenAnimation": "navbarComponent().isOpen()" } }, usesInheritance: true, ngImport: i0, template: `
-    <div [class]="contentClasses().navbarContentListClass">
+    /**
+     * @internal
+     */
+    toggle(newState) {
+        newState ??= !this.state.open();
+        this.state.open.set(newState);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Navbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: Navbar, isStandalone: true, selector: "\n    nav[flowbiteNavbar]\n  ", inputs: { fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, 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: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteNavbarState({ inherit: true })], exportAs: ["flowbiteNavbar"], ngImport: i0, template: `
+    <div [class]="theme().container.root">
       <ng-content />
     </div>
-  `, isInline: true, animations: [
-            trigger('isOpenAnimation', [
-                state('true', style({ height: '*' })),
-                state('false', style({ height: '0px' })),
-                transition('true <=> false', animate('300ms')),
-            ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Navbar, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    selector: 'flowbite-navbar-content',
+                    selector: `
+    nav[flowbiteNavbar]
+  `,
+                    exportAs: 'flowbiteNavbar',
+                    hostDirectives: [],
+                    imports: [],
+                    providers: [provideFlowbiteNavbarState({ inherit: true })],
+                    host: { '[class]': `theme().host.root` },
                     template: `
-    <div [class]="contentClasses().navbarContentListClass">
+    <div [class]="theme().container.root">
       <ng-content />
     </div>
   `,
-                    host: {
-                        '[@isOpenAnimation]': 'navbarComponent().isOpen()',
-                    },
-                    animations: [
-                        trigger('isOpenAnimation', [
-                            state('true', style({ height: '*' })),
-                            state('false', style({ height: '0px' })),
-                            transition('true <=> false', animate('300ms')),
-                        ]),
-                    ],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
+const flowbiteNavbarItemTheme = createTheme({
+    host: {
+        base: 'm-0 block cursor-pointer 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: {
+            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 defaultFlowbiteNavbarItemConfig = {
+    baseTheme: flowbiteNavbarItemTheme,
+    customTheme: {},
+};
+const FlowbiteNavbarItemConfigToken = new InjectionToken('FlowbiteNavbarItemConfigToken');
 /**
- * `InjectionToken` used to import `NavbarToggleTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN)
- * ```
+ * Provide the default NavbarItem configuration
+ * @param config The NavbarItem configuration
+ * @returns The provider
  */
-const FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN');
-class NavbarToggleThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_NAVBAR_TOGGLE_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: NavbarToggleThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarToggleThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarToggleThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE');
-const navbarToggleDefaultValueProvider = makeEnvironmentProviders([
+const provideFlowbiteNavbarItemConfig = (config) => [
     {
-        provide: FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
+        provide: FlowbiteNavbarItemConfigToken,
+        useValue: { ...defaultFlowbiteNavbarItemConfig, ...config },
     },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/navbar/
+ * Inject the NavbarItem configuration
+ * @see {@link defaultFlowbiteNavbarItemConfig}
+ * @returns The configuration
  */
-class NavbarToggleComponent extends BaseComponent {
+const injectFlowbiteNavbarItemConfig = () => inject(FlowbiteNavbarItemConfigToken, { optional: true }) ?? defaultFlowbiteNavbarItemConfig;
+
+const FlowbiteNavbarItemStateToken = createStateToken('Flowbite NavbarItem');
+const provideFlowbiteNavbarItemState = createStateProvider(FlowbiteNavbarItemStateToken);
+const injectFlowbiteNavbarItemState = createStateInjector(FlowbiteNavbarItemStateToken);
+const flowbiteNavbarItemState = createState(FlowbiteNavbarItemStateToken);
+
+class NavbarItem {
     constructor() {
-        super(...arguments);
-        /**
-         * Service injected used to generate class
-         */
-        this.themeService = inject(NavbarToggleThemeService);
-        /**
-         * The parent `NavbarComponent`
-         */
-        this.navbarComponent = model(inject(NavbarComponent));
-        /**
-         * `IconRegistry` service
-         */
-        this.iconRegistry = inject(IconRegistry);
-        /**
-         * `DomSanitizer` service
-         */
-        this.domSanitizer = inject(DomSanitizer);
-        //#region properties
-        /**
-         * Set the custom style for this navbar toggle
-         */
-        this.customStyle = model(inject(FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            customStyle: this.customStyle(),
+        this.config = injectFlowbiteNavbarItemConfig();
+        this.navbarState = injectFlowbiteNavbarState();
+        /**
+         * @see {@link injectFlowbiteNavbarItemConfig}
+         */
+        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.navbarState().color())),
+                },
+            };
         });
+        this.state = flowbiteNavbarItemState(this);
     }
-    init() {
-        this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'bars', this.domSanitizer.bypassSecurityTrustHtml(BARS_SVG_ICON));
-    }
-    //#endregion
     /**
-     * Toggle navbar visibility (open close on mobile device)
+     * @internal
      */
     onClick() {
-        const isCollapsed = this.navbarComponent().isOpen();
-        this.navbarComponent().isOpen.set(!isCollapsed);
+        this.toggleNavbar();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: NavbarToggleComponent, isStandalone: true, selector: "flowbite-navbar-toggle", inputs: { navbarComponent: { classPropertyName: "navbarComponent", publicName: "navbarComponent", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navbarComponent: "navbarComponentChange", customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `
-    <flowbite-icon
-      svgIcon="flowbite-angular:bars"
-      class="w-5 h-5" />
-  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /**
+     * @internal
+     */
+    toggleNavbar() {
+        this.navbarState().toggle();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavbarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: NavbarItem, isStandalone: true, selector: "\n    a[flowbiteNavbarItem],\n    button[flowbiteNavbarItem]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteNavbarItemState()], exportAs: ["flowbiteNavbarItem"], hostDirectives: [{ directive: i1.BaseButton, inputs: ["color", "color"] }, { 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: NavbarToggleComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavbarItem, decorators: [{
+            type: Directive,
             args: [{
                     standalone: true,
-                    selector: 'flowbite-navbar-toggle',
-                    imports: [IconComponent],
-                    template: `
-    <flowbite-icon
-      svgIcon="flowbite-angular:bars"
-      class="w-5 h-5" />
+                    selector: `
+    a[flowbiteNavbarItem],
+    button[flowbiteNavbarItem]
   `,
+                    exportAs: 'flowbiteNavbarItem',
+                    hostDirectives: [
+                        {
+                            directive: BaseButton,
+                            inputs: ['color'],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpButton,
+                            inputs: ['disabled:disabled'],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpFocus,
+                            inputs: ['ngpFocusDisabled:focusDisabled'],
+                            outputs: ['ngpFocus'],
+                        },
+                    ],
+                    providers: [provideFlowbiteNavbarItemState()],
                     host: {
+                        '[class]': `theme().host.root`,
                         '(click)': 'onClick()',
                     },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
-/**
- * `InjectionToken` used to import `NavbarTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_NAVBAR_THEME_TOKEN)
- * ```
- */
-const FLOWBITE_NAVBAR_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_THEME_TOKEN');
-class NavbarThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_NAVBAR_THEME_TOKEN);
-    }
-    getClasses(properties) {
-        const theme = mergeTheme(this.baseTheme, properties.customStyle);
-        const output = {
-            rootClass: twMerge(theme.root.base, theme.root.color['gray'], theme.root.isRounded[properties.isRounded], theme.root.hasBorder[properties.hasBorder], theme.root.isFixed[properties.isFixed]),
-        };
-        return output;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE');
-const FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE');
-const FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE');
-const FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE');
-const FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE');
-const FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE');
-const navbarDefaultValueProvider = makeEnvironmentProviders([
-    {
-        provide: FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE,
-        useValue: 'primary',
-    },
-    {
-        provide: FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE,
-        useValue: false,
-    },
-    {
-        provide: FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE,
-        useValue: false,
-    },
-    {
-        provide: FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE,
-        useValue: false,
+const flowbiteNavbarContentTheme = createTheme({
+    host: {
+        base: 'w-full overflow-hidden max-md:order-last md:flex md:w-auto',
+        transition: '',
+        fixed: {
+            on: '',
+            off: '',
+        },
+        open: {
+            on: '',
+            off: 'hidden',
+        },
     },
-    {
-        provide: FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE,
-        useValue: false,
+    container: {
+        base: 'mt-4 flex flex-col rounded-lg border p-4 font-medium md:mt-0 md:flex-row md:space-x-4 md:border-0 md:p-0',
+        transition: '',
+        color: {
+            default: {
+                light: 'bg-gray-200 md:bg-inherit',
+                dark: 'dark:bg-gray-800 dark:md:bg-inherit',
+            },
+            info: {
+                light: 'bg-gray-200 md:bg-inherit',
+                dark: 'dark:bg-gray-800 dark:md:bg-inherit',
+            },
+            failure: {
+                light: 'bg-gray-200 md:bg-inherit',
+                dark: 'dark:bg-gray-800 dark:md:bg-inherit',
+            },
+            success: {
+                light: 'bg-gray-200 md:bg-inherit',
+                dark: 'dark:bg-gray-800 dark:md:bg-inherit',
+            },
+            warning: {
+                light: 'bg-gray-200 md:bg-inherit',
+                dark: 'dark:bg-gray-800 dark:md:bg-inherit',
+            },
+            primary: {
+                light: 'bg-gray-200 md:bg-inherit',
+                dark: 'dark:bg-gray-800 dark:md:bg-inherit',
+            },
+        },
     },
+});
+
+const defaultFlowbiteNavbarContentConfig = {
+    baseTheme: flowbiteNavbarContentTheme,
+    customTheme: {},
+};
+const FlowbiteNavbarContentConfigToken = new InjectionToken('FlowbiteNavbarContentConfigToken');
+/**
+ * Provide the default NavbarContent configuration
+ * @param config The NavbarContent configuration
+ * @returns The provider
+ */
+const provideFlowbiteNavbarContentConfig = (config) => [
     {
-        provide: FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
+        provide: FlowbiteNavbarContentConfigToken,
+        useValue: { ...defaultFlowbiteNavbarContentConfig, ...config },
     },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/navbar/
+ * Inject the NavbarContent configuration
+ * @see {@link defaultFlowbiteNavbarContentConfig}
+ * @returns The configuration
  */
-class NavbarComponent extends BaseComponent {
+const injectFlowbiteNavbarContentConfig = () => inject(FlowbiteNavbarContentConfigToken, { optional: true }) ??
+    defaultFlowbiteNavbarContentConfig;
+
+const FlowbiteNavbarContentStateToken = createStateToken('Flowbite NavbarContent');
+const provideFlowbiteNavbarContentState = createStateProvider(FlowbiteNavbarContentStateToken);
+const injectFlowbiteNavbarContentState = createStateInjector(FlowbiteNavbarContentStateToken);
+const flowbiteNavbarContentState = createState(FlowbiteNavbarContentStateToken);
+
+class NavbarContent {
     constructor() {
-        super(...arguments);
-        /**
-         * Service injecteed used to generate class
-         */
-        this.themeService = inject(NavbarThemeService);
-        /**
-         * The child `NavbarBrandComponent`
-         */
-        this.navbarBrandChild = contentChild(NavbarBrandComponent);
-        /**
-         * The child `NavbarToggleComponent`
-         */
-        this.navbarToggleChild = contentChild(NavbarToggleComponent);
-        /**
-         * The child `NavbarContentComponent`
-         */
-        this.navbarContentChild = contentChild.required(NavbarContentComponent);
-        //#region properties
-        /**
-         * Set the navbar color
-         *
-         * @default primary
-         */
-        this.color = model(inject(FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE));
-        /**
-         * Set if the navbar is open
-         *
-         * @default false
-         */
-        this.isOpen = model(inject(FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE));
-        /**
-         * Set if the navbar is rounded
-         *
-         * @default false
-         */
-        this.isRounded = model(inject(FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE));
-        /**
-         * Set if the navbar has border
-         *
-         * @default false
-         */
-        this.hasBorder = model(inject(FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE));
-        /**
-         * Set if the navbar is fixed
-         *
-         * @default false
-         */
-        this.isFixed = model(inject(FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE));
+        this.config = injectFlowbiteNavbarContentConfig();
+        this.navbarState = injectFlowbiteNavbarState();
+        /**
+         * @see {@link injectFlowbiteNavbarContentConfig}
+         */
+        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.navbarState().open() ? 'on' : 'off']),
+                },
+                container: {
+                    root: twMerge(mergedTheme.container.base, mergedTheme.container.transition, colorToTheme(mergedTheme.container.color, this.navbarState().color())),
+                },
+            };
+        });
         /**
-         * Set the custom style for this navbar
+         * @internal
          */
-        this.customStyle = model(inject(FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE));
+        this.state = flowbiteNavbarContentState(this);
     }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            hasBorder: booleanToFlowbiteBoolean(this.isRounded()),
-            isRounded: booleanToFlowbiteBoolean(this.hasBorder()),
-            isFixed: booleanToFlowbiteBoolean(this.isFixed()),
-            customStyle: this.customStyle(),
-        });
-    }
-    //#endregion
-    /**
-     * Toggle visibility of the navbar
-     *
-     * @param isOpen When provide force the isOpen value
-     */
-    toggleVisibility(isOpen) {
-        if (isOpen === undefined) {
-            isOpen = untracked(() => !this.isOpen());
-        }
-        this.isOpen.set(isOpen);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.4", type: NavbarComponent, isStandalone: true, selector: "flowbite-navbar", inputs: { color: { classPropertyName: "color", publicName: "color", 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 }, hasBorder: { classPropertyName: "hasBorder", publicName: "hasBorder", isSignal: true, isRequired: false, transformFunction: null }, isFixed: { classPropertyName: "isFixed", publicName: "isFixed", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", isOpen: "isOpenChange", isRounded: "isRoundedChange", hasBorder: "hasBorderChange", isFixed: "isFixedChange", customStyle: "customStyleChange" }, queries: [{ propertyName: "navbarBrandChild", first: true, predicate: NavbarBrandComponent, descendants: true, isSignal: true }, { propertyName: "navbarToggleChild", first: true, predicate: NavbarToggleComponent, descendants: true, isSignal: true }, { propertyName: "navbarContentChild", first: true, predicate: NavbarContentComponent, 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: NavbarContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: NavbarContent, isStandalone: true, selector: "\n    div[flowbiteNavbarContent]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteNavbarContentState()], exportAs: ["flowbiteNavbarContent"], ngImport: i0, template: `
+    <ul [class]="theme().container.root">
+      <ng-content />
+    </ul>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavbarContent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    selector: 'flowbite-navbar',
-                    template: `<ng-content />`,
+                    selector: `
+    div[flowbiteNavbarContent]
+  `,
+                    exportAs: 'flowbiteNavbarContent',
+                    hostDirectives: [],
+                    imports: [],
+                    providers: [provideFlowbiteNavbarContentState()],
+                    host: { '[class]': `theme().host.root` },
+                    template: `
+    <ul [class]="theme().container.root">
+      <ng-content />
+    </ul>
+  `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
-const navbarTheme = createTheme({
-    root: {
-        base: 'flex flex-wrap items-center justify-between p-4',
+const flowbiteNavbarToggleTheme = createTheme({
+    host: {
+        base: 'inline-flex cursor-pointer items-center justify-center rounded-lg p-2 text-sm md: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: {
-            primary: 'bg-primary-200 dark:bg-primary-800 border-primary-200 dark:border-primary-700',
-            gray: 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700',
-        },
-        isRounded: {
-            enabled: 'rounded',
-            disabled: '',
-        },
-        hasBorder: {
-            enabled: 'border',
-            disabled: '',
-        },
-        isFixed: {
-            enabled: 'fixed w-full border-b',
-            disabled: '',
+            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: {},
     },
 });
 
+const defaultFlowbiteNavbarToggleConfig = {
+    baseTheme: flowbiteNavbarToggleTheme,
+    customTheme: {},
+};
+const FlowbiteNavbarToggleConfigToken = new InjectionToken('FlowbiteNavbarToggleConfigToken');
 /**
- * Default theme for `NavbarBrandComponent`
+ * Provide the default NavbarToggle configuration
+ * @param config The NavbarToggle configuration
+ * @returns The provider
  */
-const navbarBrandTheme = createTheme({
-    root: {
-        base: 'cursor-pointer flex items-center space-x-3 rtl:space-x-reverse',
+const provideFlowbiteNavbarToggleConfig = (config) => [
+    {
+        provide: FlowbiteNavbarToggleConfigToken,
+        useValue: { ...defaultFlowbiteNavbarToggleConfig, ...config },
     },
-});
-
+];
 /**
- * Default theme for `NavbarContentComponent`
+ * Inject the NavbarToggle configuration
+ * @see {@link defaultFlowbiteNavbarToggleConfig}
+ * @returns The configuration
  */
-const navbarContentTheme = createTheme({
-    root: {
-        base: 'w-full md:!h-fit md:w-auto order-last md:order-none overflow-hidden',
-    },
-    list: {
-        base: 'font-medium flex flex-col p-4 md:p-0 mt-4 items-center border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-900 md:dark:bg-gray-800 dark:border-gray-700',
-    },
-});
+const injectFlowbiteNavbarToggleConfig = () => inject(FlowbiteNavbarToggleConfigToken, { optional: true }) ?? defaultFlowbiteNavbarToggleConfig;
 
-/**
- * `InjectionToken` used to import `NavbarItemTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_NAVBAR_ITEM_THEME_TOKEN)
- * ```
- */
-const FLOWBITE_NAVBAR_ITEM_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_ITEM_THEME_TOKEN');
-class NavbarItemThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_NAVBAR_ITEM_THEME_TOKEN);
-    }
-    getClasses(properties) {
-        const theme = mergeTheme(this.baseTheme, properties.customStyle);
-        const output = {
-            rootClass: twMerge(theme.root.base, theme.root.color[properties.color]),
-        };
-        return output;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarItemThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarItemThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarItemThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
+const FlowbiteNavbarToggleStateToken = createStateToken('Flowbite NavbarToggle');
+const provideFlowbiteNavbarToggleState = createStateProvider(FlowbiteNavbarToggleStateToken);
+const injectFlowbiteNavbarToggleState = createStateInjector(FlowbiteNavbarToggleStateToken);
+const flowbiteNavbarToggleState = createState(FlowbiteNavbarToggleStateToken);
 
-const FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE');
-const navbarItemDefaultValueProvider = makeEnvironmentProviders([
-    {
-        provide: FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
-    },
-]);
-/**
- * @see https://flowbite.com/docs/components/navbar/
- */
-class NavbarItemComponent extends BaseComponent {
+class NavbarToggle {
     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(NavbarItemThemeService);
-        /**
-         * The parent `NavbarContentComponent`
-         */
-        this.navbarContentComponent = inject(NavbarContentComponent);
-        //#region properties
-        /**
-         * Set the navbar item color
-         *
-         * @default `NavbarContentComponent`'s color
-         */
-        this.color = model(this.navbarContentComponent.color());
-        /**
-         * Set the custom style for this navbar item
-         */
-        this.customStyle = model(inject(FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            color: this.color(),
-            customStyle: this.customStyle(),
+        this.config = injectFlowbiteNavbarToggleConfig();
+        this.navbarState = injectFlowbiteNavbarState();
+        /**
+         * @see {@link injectFlowbiteNavbarToggleConfig}
+         */
+        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.navbarState().color())),
+                },
+            };
         });
+        this.state = flowbiteNavbarToggleState(this);
     }
-    //#endregion
     /**
-     * Toggle the nnavbar visibility (auto close when on mobile device)
+     * @internal
      */
     onClick() {
-        this.navbarContentComponent.navbarComponent().toggleVisibility(false);
+        this.toggleNavbar();
+    }
+    /**
+     * @internal
+     */
+    toggleNavbar() {
+        this.navbarState().toggle();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: NavbarItemComponent, isStandalone: true, selector: "flowbite-navbar-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" }, host: { listeners: { "click": "onClick()" } }, 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: NavbarToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: NavbarToggle, isStandalone: true, selector: "\n    button[flowbiteNavbarToggle]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteNavbarToggleState(), provideIcons({ bars })], exportAs: ["flowbiteNavbarToggle"], hostDirectives: [{ directive: i1.BaseButton }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarItemComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavbarToggle, decorators: [{
+            type: Directive,
             args: [{
                     standalone: true,
-                    selector: 'flowbite-navbar-item',
-                    template: `<ng-content />`,
+                    selector: `
+    button[flowbiteNavbarToggle]
+  `,
+                    exportAs: 'flowbiteNavbarToggle',
+                    hostDirectives: [
+                        {
+                            directive: BaseButton,
+                            inputs: [],
+                            outputs: [],
+                        },
+                    ],
+                    providers: [provideFlowbiteNavbarToggleState(), provideIcons({ bars })],
                     host: {
+                        '[class]': `theme().host.root`,
                         '(click)': 'onClick()',
                     },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
-/**
- * Default theme for `NavbarItemComponent`
- */
-const navbarItemTheme = createTheme({
-    root: {
-        base: 'cursor-pointer block py-2 px-3 rounded text-sm text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 md:hover:bg-transparent md:border-0 md:p-0 md:dark:hover:bg-transparent',
-        color: {
-            primary: 'md:hover:text-primary-700 md:dark:hover:text-primary-500 aria-current:text-primary-500 dark:aria-current:text-primary-300',
-            gray: 'md:hover:text-gray-700 md:dark:hover:text-gray-500 aria-current:text-gray-500 dark:aria-current:text-gray-300',
-        },
+const flowbiteNavbarBrandTheme = createTheme({
+    host: {
+        base: 'flex cursor-pointer items-center space-x-3',
+        transition: '',
     },
 });
 
+const defaultFlowbiteNavbarBrandConfig = {
+    baseTheme: flowbiteNavbarBrandTheme,
+    customTheme: {},
+};
+const FlowbiteNavbarBrandConfigToken = new InjectionToken('FlowbiteNavbarBrandConfigToken');
 /**
- * Default theme for `NavbarToggleComponent`
+ * Provide the default NavbarBrand configuration
+ * @param config The NavbarBrand configuration
+ * @returns The provider
  */
-const navbarToggleTheme = createTheme({
-    root: {
-        base: 'cursor-pointer inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600',
+const provideFlowbiteNavbarBrandConfig = (config) => [
+    {
+        provide: FlowbiteNavbarBrandConfigToken,
+        useValue: { ...defaultFlowbiteNavbarBrandConfig, ...config },
     },
-});
-
+];
 /**
- * `InjectionToken` used to import `NavbarIconButtonTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN)
- * ```
+ * Inject the NavbarBrand configuration
+ * @see {@link defaultFlowbiteNavbarBrandConfig}
+ * @returns The configuration
  */
-const FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN');
-class NavbarIconButtonThemeService {
+const injectFlowbiteNavbarBrandConfig = () => inject(FlowbiteNavbarBrandConfigToken, { optional: true }) ?? defaultFlowbiteNavbarBrandConfig;
+
+const FlowbiteNavbarBrandStateToken = createStateToken('Flowbite NavbarBrand');
+const provideFlowbiteNavbarBrandState = createStateProvider(FlowbiteNavbarBrandStateToken);
+const injectFlowbiteNavbarBrandState = createStateInjector(FlowbiteNavbarBrandStateToken);
+const flowbiteNavbarBrandState = createState(FlowbiteNavbarBrandStateToken);
+
+class NavbarBrand {
     constructor() {
-        this.baseTheme = inject(FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN);
-    }
-    getClasses(properties) {
-        const theme = mergeTheme(this.baseTheme, properties.customStyle);
-        const output = {
-            rootClass: twMerge(theme.root.base, theme.root.color[properties.color]),
-        };
-        return output;
+        this.config = injectFlowbiteNavbarBrandConfig();
+        /**
+         * @see {@link injectFlowbiteNavbarBrandConfig}
+         */
+        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 = flowbiteNavbarBrandState(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarIconButtonThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarIconButtonThemeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavbarBrand, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: NavbarBrand, isStandalone: true, selector: "\n    a[flowbiteNavbarBrand]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root", "attr.type": "button" } }, providers: [provideFlowbiteNavbarBrandState()], exportAs: ["flowbiteNavbarBrand"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarIconButtonThemeService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavbarBrand, decorators: [{
+            type: Directive,
             args: [{
-                    providedIn: 'root',
+                    standalone: true,
+                    selector: `
+    a[flowbiteNavbarBrand]
+  `,
+                    exportAs: 'flowbiteNavbarBrand',
+                    hostDirectives: [],
+                    providers: [provideFlowbiteNavbarBrandState()],
+                    host: {
+                        '[class]': `theme().host.root`,
+                        '[attr.type]': 'button',
+                    },
                 }]
         }] });
 
-const FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE');
-const navbarIconButtonDefaultValueProvider = makeEnvironmentProviders([
+const flowbiteNavbarIconItemTheme = createTheme({
+    host: {
+        base: 'hidden cursor-pointer items-center justify-center rounded-lg p-2 text-sm sm:inline-flex',
+        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-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 defaultFlowbiteNavbarIconItemConfig = {
+    baseTheme: flowbiteNavbarIconItemTheme,
+    customTheme: {},
+};
+const FlowbiteNavbarIconItemConfigToken = new InjectionToken('FlowbiteNavbarIconItemConfigToken');
+/**
+ * Provide the default NavbarIconItem configuration
+ * @param config The NavbarIconItem configuration
+ * @returns The provider
+ */
+const provideFlowbiteNavbarIconItemConfig = (config) => [
     {
-        provide: FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
+        provide: FlowbiteNavbarIconItemConfigToken,
+        useValue: { ...defaultFlowbiteNavbarIconItemConfig, ...config },
     },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/navbar/
+ * Inject the NavbarIconItem configuration
+ * @see {@link defaultFlowbiteNavbarIconItemConfig}
+ * @returns The configuration
  */
-class NavbarIconButtonComponent extends BaseComponent {
+const injectFlowbiteNavbarIconItemConfig = () => inject(FlowbiteNavbarIconItemConfigToken, { optional: true }) ??
+    defaultFlowbiteNavbarIconItemConfig;
+
+const FlowbiteNavbarIconItemStateToken = createStateToken('Flowbite NavbarIconItem');
+const provideFlowbiteNavbarIconItemState = createStateProvider(FlowbiteNavbarIconItemStateToken);
+const injectFlowbiteNavbarIconItemState = createStateInjector(FlowbiteNavbarIconItemStateToken);
+const flowbiteNavbarIconItemState = createState(FlowbiteNavbarIconItemStateToken);
+
+class NavbarIconItem {
     constructor() {
-        super(...arguments);
-        /**
-         * Service injected used to generate class
-         */
-        this.themeService = inject(NavbarIconButtonThemeService);
-        /**
-         * The optional parent `NavbarComponent`
-         */
-        this.navbarComponent = inject(NavbarComponent, { optional: true });
-        /**
-         * The optional parent `NavbarContentComponent`
-         */
-        this.navbarContentComponent = inject(NavbarContentComponent, { optional: true });
-        //#region properties
-        /**
-         * Set the navbar icon button color
-         *
-         * @default `NavbarContentComponent`'s color
-         * @default `NavbarComponent`'s color
-         */
-        this.color = model(this.navbarContentComponent?.color() || this.navbarComponent.color());
+        this.baseButtonState = injectFlowbiteBaseButtonState();
+        this.navbarState = injectFlowbiteNavbarState();
+        this.config = injectFlowbiteNavbarIconItemConfig();
+        /**
+         * @see {@link injectFlowbiteNavbarIconItemConfig}
+         */
+        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.navbarState().color())),
+                },
+            };
+        });
         /**
-         * Set the custom style for this navbar icon button
+         * @internal
          */
-        this.customStyle = model(inject(FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            color: this.color(),
-            customStyle: this.customStyle(),
-        });
+        this.state = flowbiteNavbarIconItemState(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarIconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: NavbarIconButtonComponent, isStandalone: true, selector: "flowbite-navbar-icon-button", 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: `<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: NavbarIconItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: NavbarIconItem, isStandalone: true, selector: "\n    button[flowbiteNavbarIconItem],\n    a[flowbiteNavbarIconItem],\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteNavbarIconItemState()], exportAs: ["flowbiteNavbarIconItem"], hostDirectives: [{ directive: i1.BaseButton, inputs: ["color", "color"] }, { 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: NavbarIconButtonComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavbarIconItem, decorators: [{
+            type: Directive,
             args: [{
                     standalone: true,
-                    selector: 'flowbite-navbar-icon-button',
-                    template: `<ng-content />`,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: `
+    button[flowbiteNavbarIconItem],
+    a[flowbiteNavbarIconItem],
+  `,
+                    exportAs: 'flowbiteNavbarIconItem',
+                    hostDirectives: [
+                        {
+                            directive: BaseButton,
+                            inputs: ['color:color'],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpButton,
+                            inputs: ['disabled:disabled'],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpFocus,
+                            inputs: ['ngpFocusDisabled:focusDisabled'],
+                            outputs: ['ngpFocus'],
+                        },
+                    ],
+                    providers: [provideFlowbiteNavbarIconItemState()],
+                    host: { '[class]': `theme().host.root` },
                 }]
         }] });
 
-/**
- * Default theme for `NavbarIconButtonComponent`
- */
-const navbarIconButtonTheme = createTheme({
-    root: {
-        base: 'cursor-pointer rounded-lg p-2.5 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700',
-        color: {
-            primary: 'text-primary-500 dark:text-primary-300',
-            gray: 'text-gray-500 dark:text-gray-400',
-            blue: 'text-blue-500 dark:text-blue-300',
-            red: 'text-red-500 dark:text-red-300',
-            green: 'text-green-500 dark:text-green-300',
-            yellow: 'text-yellow-500 dark:text-yellow-300',
-        },
-    },
-});
+/* Navbar */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_NAVBAR_BRAND_THEME_TOKEN, FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE, FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN, FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE, FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN, FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE, FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE, FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE, FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_NAVBAR_ITEM_THEME_TOKEN, FLOWBITE_NAVBAR_THEME_TOKEN, FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN, NavbarBrandComponent, NavbarBrandThemeService, NavbarComponent, NavbarContentComponent, NavbarContentThemeService, NavbarIconButtonComponent, NavbarIconButtonThemeService, NavbarItemComponent, NavbarItemThemeService, NavbarThemeService, NavbarToggleComponent, NavbarToggleThemeService, navbarBrandDefaultThemeProvider, navbarBrandTheme, navbarContentDefaultValueProvider, navbarContentTheme, navbarDefaultValueProvider, navbarIconButtonDefaultValueProvider, navbarIconButtonTheme, navbarItemDefaultValueProvider, navbarItemTheme, navbarTheme, navbarToggleDefaultValueProvider, navbarToggleTheme };
+export { FlowbiteNavbarBrandConfigToken, FlowbiteNavbarBrandStateToken, FlowbiteNavbarConfigToken, FlowbiteNavbarContentConfigToken, FlowbiteNavbarContentStateToken, FlowbiteNavbarIconItemConfigToken, FlowbiteNavbarIconItemStateToken, FlowbiteNavbarItemConfigToken, FlowbiteNavbarItemStateToken, FlowbiteNavbarStateToken, FlowbiteNavbarToggleConfigToken, FlowbiteNavbarToggleStateToken, Navbar, NavbarBrand, NavbarContent, NavbarIconItem, NavbarItem, NavbarToggle, defaultFlowbiteNavbarBrandConfig, defaultFlowbiteNavbarConfig, defaultFlowbiteNavbarContentConfig, defaultFlowbiteNavbarIconItemConfig, defaultFlowbiteNavbarItemConfig, defaultFlowbiteNavbarToggleConfig, flowbiteNavbarBrandState, flowbiteNavbarBrandTheme, flowbiteNavbarContentState, flowbiteNavbarContentTheme, flowbiteNavbarIconItemState, flowbiteNavbarIconItemTheme, flowbiteNavbarItemState, flowbiteNavbarItemTheme, flowbiteNavbarState, flowbiteNavbarTheme, flowbiteNavbarToggleState, flowbiteNavbarToggleTheme, injectFlowbiteNavbarBrandConfig, injectFlowbiteNavbarBrandState, injectFlowbiteNavbarConfig, injectFlowbiteNavbarContentConfig, injectFlowbiteNavbarContentState, injectFlowbiteNavbarIconItemConfig, injectFlowbiteNavbarIconItemState, injectFlowbiteNavbarItemConfig, injectFlowbiteNavbarItemState, injectFlowbiteNavbarState, injectFlowbiteNavbarToggleConfig, injectFlowbiteNavbarToggleState, provideFlowbiteNavbarBrandConfig, provideFlowbiteNavbarBrandState, provideFlowbiteNavbarConfig, provideFlowbiteNavbarContentConfig, provideFlowbiteNavbarContentState, provideFlowbiteNavbarIconItemConfig, provideFlowbiteNavbarIconItemState, provideFlowbiteNavbarItemConfig, provideFlowbiteNavbarItemState, provideFlowbiteNavbarState, provideFlowbiteNavbarToggleConfig, provideFlowbiteNavbarToggleState };
 //# sourceMappingURL=flowbite-angular-navbar.mjs.map