flowbite-angular 1.0.0-alpha.4 → 1.0.0-alpha.6

package/fesm2022/flowbite-angular-navbar.mjs

@@ -1,6 +1,6 @@
 import { mergeTheme, BARS_SVG_ICON, createTheme } from 'flowbite-angular/utils';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, model, Component, ViewEncapsulation, ChangeDetectionStrategy, contentChild, untracked } from '@angular/core';
+import { InjectionToken, inject, Injectable, model, Component, ViewEncapsulation, ChangeDetectionStrategy, contentChild, untracked } from '@angular/core';
 import { twMerge } from 'tailwind-merge';
 import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
 import { NgClass, CommonModule } from '@angular/common';
@@ -9,6 +9,14 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link';
 import { FlowbiteRouterLinkActiveDirective } from 'flowbite-angular/router-link-active';
 
+/**
+ * `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() {
@@ -21,14 +29,34 @@ class NavbarBrandThemeService {
         };
         return output;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NavbarBrandThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NavbarBrandThemeService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NavbarBrandThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
+/**
+ * @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({});
     }
     //#endregion
@@ -53,6 +81,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+/**
+ * `InjectionToken` used to import `NavbarContentTheme` value
+ *
+ * @example
+ * ```
+ * var theme = inject(FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN)
+ * ```
+ */
 const FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN');
 class NavbarContentThemeService {
     constructor() {
@@ -66,14 +102,36 @@ class NavbarContentThemeService {
         };
         return output;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NavbarContentThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NavbarContentThemeService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NavbarContentThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
+/**
+ * @see https://flowbite.com/docs/components/navbar/
+ */
 class NavbarContentComponent extends BaseComponent {
     constructor() {
         super(...arguments);
+        /**
+         * Service injected used to generate class
+         */
         this.themeService = inject(NavbarContentThemeService);
+        /**
+         * The parent `NavbarComponent`
+         */
         this.navbarComponent = model(inject(NavbarComponent));
         //#region properties
+        /**
+         * Set the navbar content color
+         *
+         * @default `NavbarComponent`'s color
+         */
         this.color = model(this.navbarComponent().color());
         this.customStyle = model({});
     }
@@ -108,6 +166,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+/**
+ * `InjectionToken` used to import `NavbarToggleTheme` value
+ *
+ * @example
+ * ```
+ * var theme = inject(FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN)
+ * ```
+ */
 const FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN');
 class NavbarToggleThemeService {
     constructor() {
@@ -120,16 +186,42 @@ class NavbarToggleThemeService {
         };
         return output;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NavbarToggleThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NavbarToggleThemeService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NavbarToggleThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
+/**
+ * @see https://flowbite.com/docs/components/navbar/
+ */
 class NavbarToggleComponent extends BaseComponent {
     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({});
     }
     //#endregion
@@ -143,6 +235,9 @@ class NavbarToggleComponent extends BaseComponent {
         this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'bars', this.domSanitizer.bypassSecurityTrustHtml(BARS_SVG_ICON));
     }
     //#endregion
+    /**
+     * Toggle navbar visibility (open close on mobile device)
+     */
     onClick() {
         const isCollapsed = this.navbarComponent().isOpen();
         this.navbarComponent().isOpen.set(!isCollapsed);
@@ -165,6 +260,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+/**
+ * `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() {
@@ -177,7 +280,15 @@ class NavbarThemeService {
         };
         return output;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NavbarThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NavbarThemeService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NavbarThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
 /**
  * @see https://flowbite.com/docs/components/navbar/
@@ -185,16 +296,56 @@ class NavbarThemeService {
 class NavbarComponent extends BaseComponent {
     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(NavbarContentComponent);
         //#region properties
+        /**
+         * Set the navbar color
+         *
+         * @default primary
+         */
         this.color = model('primary');
+        /**
+         * Set if the navbar is open
+         *
+         * @default false
+         */
         this.isOpen = model(false);
+        /**
+         * Set if the navbar is rounded
+         *
+         * @default false
+         */
         this.isRounded = model(false);
+        /**
+         * Set if the navbar has border
+         *
+         * @default false
+         */
         this.hasBorder = model(false);
+        /**
+         * Set if the navbar is fixed
+         *
+         * @default false
+         */
         this.isFixed = model(false);
+        /**
+         * Set the custom style for this navbar
+         */
         this.customStyle = model({});
     }
     //#endregion
@@ -213,6 +364,11 @@ class NavbarComponent extends BaseComponent {
         }
     }
     //#endregion
+    /**
+     * Toggle visibility of the navbar
+     *
+     * @param isOpen When provide force the isOpen value
+     */
     toggleVisibility(isOpen) {
         if (isOpen === undefined) {
             isOpen = untracked(() => !this.isOpen());
@@ -256,12 +412,18 @@ const navbarTheme = createTheme({
     },
 });
 
+/**
+ * Default theme for `NavbarBrandComponent`
+ */
 const navbarBrandTheme = createTheme({
     root: {
         base: 'cursor-pointer flex items-center space-x-3 rtl:space-x-reverse',
     },
 });
 
+/**
+ * Default theme for `NavbarContentComponent`
+ */
 const navbarContentTheme = createTheme({
     root: {
         base: 'w-full md:block md:w-auto order-last md:order-none',
@@ -275,6 +437,14 @@ const navbarContentTheme = createTheme({
     },
 });
 
+/**
+ * `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() {
@@ -287,19 +457,50 @@ class NavbarItemThemeService {
         };
         return output;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NavbarItemThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NavbarItemThemeService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NavbarItemThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
+/**
+ * @see https://flowbite.com/docs/components/navbar/
+ */
 class NavbarItemComponent extends BaseComponent {
     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({});
     }
     //#endregion
@@ -311,6 +512,9 @@ class NavbarItemComponent extends BaseComponent {
         });
     }
     //#endregion
+    /**
+     * Toggle the nnavbar visibility (auto close when on mobile device)
+     */
     onClick() {
         this.navbarContentComponent.navbarComponent().toggleVisibility(false);
     }
@@ -332,6 +536,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+/**
+ * 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',
@@ -342,13 +549,24 @@ const navbarItemTheme = createTheme({
     },
 });
 
-const navbarToogleTheme = createTheme({
+/**
+ * Default theme for `NavbarToggleComponent`
+ */
+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 FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN');
+/**
+ * `InjectionToken` used to import `NavbarIconButtonTheme` value
+ *
+ * @example
+ * ```
+ * var theme = inject(FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN)
+ * ```
+ */
+const FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN');
 class NavbarIconButtonThemeService {
     constructor() {
         this.baseTheme = inject(FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN);
@@ -360,16 +578,45 @@ class NavbarIconButtonThemeService {
         };
         return output;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NavbarIconButtonThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NavbarIconButtonThemeService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NavbarIconButtonThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
+/**
+ * @see https://flowbite.com/docs/components/navbar/
+ */
 class NavbarIconButtonComponent extends BaseComponent {
     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());
+        /**
+         * Set the custom style for this navbar icon button
+         */
         this.customStyle = model({});
     }
     //#endregion
@@ -400,6 +647,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+/**
+ * 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',
@@ -418,5 +668,5 @@ const navbarIconButtonTheme = createTheme({
  * Generated bundle index. Do not edit.
  */
 
-export { FLOWBITE_NAVBAR_BRAND_THEME_TOKEN, FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN, FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN, FLOWBITE_NAVBAR_ITEM_THEME_TOKEN, FLOWBITE_NAVBAR_THEME_TOKEN, FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN, NavbarBrandComponent, NavbarBrandThemeService, NavbarComponent, NavbarContentComponent, NavbarContentThemeService, NavbarIconButtonComponent, NavbarIconButtonThemeService, NavbarItemComponent, NavbarItemThemeService, NavbarThemeService, NavbarToggleComponent, NavbarToggleThemeService, navbarBrandTheme, navbarContentTheme, navbarIconButtonTheme, navbarItemTheme, navbarTheme, navbarToogleTheme };
+export { FLOWBITE_NAVBAR_BRAND_THEME_TOKEN, FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN, FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN, FLOWBITE_NAVBAR_ITEM_THEME_TOKEN, FLOWBITE_NAVBAR_THEME_TOKEN, FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN, NavbarBrandComponent, NavbarBrandThemeService, NavbarComponent, NavbarContentComponent, NavbarContentThemeService, NavbarIconButtonComponent, NavbarIconButtonThemeService, NavbarItemComponent, NavbarItemThemeService, NavbarThemeService, NavbarToggleComponent, NavbarToggleThemeService, navbarBrandTheme, navbarContentTheme, navbarIconButtonTheme, navbarItemTheme, navbarTheme, navbarToggleTheme };
 //# sourceMappingURL=flowbite-angular-navbar.mjs.map