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

package/fesm2022/flowbite-angular-sidebar.mjs

@@ -1,6 +1,6 @@
 import { mergeTheme, CHEVRON_DOWN_SVG_ICON, createTheme, BARS_SVG_ICON } from 'flowbite-angular/utils';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, model, Component, ViewEncapsulation, ChangeDetectionStrategy, contentChildren, untracked, contentChild } from '@angular/core';
+import { InjectionToken, inject, Injectable, model, Component, ViewEncapsulation, ChangeDetectionStrategy, contentChildren, untracked, contentChild } from '@angular/core';
 import { twMerge } from 'tailwind-merge';
 import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
 import { BadgeComponent } from 'flowbite-angular/badge';
@@ -11,6 +11,14 @@ import { NgIf, NgClass } from '@angular/common';
 import { IconRegistry, IconComponent } from 'flowbite-angular/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 
+/**
+ * `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() {
@@ -24,8 +32,24 @@ class SidebarItemGroupThemeService {
         };
         return output;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarItemGroupThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarItemGroupThemeService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarItemGroupThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
+/**
+ * `InjectionToken` used to import `SidebarItemTheme` value
+ *
+ * @example
+ * ```
+ * var theme = inject(FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN)
+ * ```
+ */
 const FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN');
 class SidebarItemThemeService {
     constructor() {
@@ -39,24 +63,67 @@ class SidebarItemThemeService {
         };
         return output;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarItemThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarItemThemeService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarItemThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
+/**
+ * @see https://flowbite.com/docs/components/sidebar/
+ */
 class SidebarItemComponent 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(SidebarItemThemeService);
-        this.sidebarItemGroupComponent = inject(SidebarItemGroupComponent, {
-            optional: true,
-        });
-        this.sidebarMenuComponent = inject(SidebarMenuComponent);
+        /**
+         * The optional parent `SidebarItemGroupComponent`
+         */
+        this.sidebarItemGroupComponent = inject(SidebarItemGroupComponent, { optional: true });
+        /**
+         * The optional parent `SidebarMenuComponent`
+         */
+        this.sidebarMenuComponent = inject(SidebarMenuComponent, { optional: true });
         //#region properties
+        /**
+         * Set the sidebar item icon
+         *
+         * @default undefined
+         */
         this.icon = model(undefined);
+        /**
+         * Set the sidebar item color
+         *
+         * @default `SidebarItemGroupComponent`'s color
+         * @default `SidebarMenuComponent`'s color
+         */
         this.color = model((this.sidebarItemGroupComponent ?? this.sidebarMenuComponent).color());
+        /**
+         * Set the sidebar item label
+         *
+         * @default undefined
+         */
         this.label = model(undefined);
+        /**
+         * Set the custom style for this sidebar item
+         */
         this.customStyle = model({});
     }
     //#endregion
@@ -75,6 +142,9 @@ class SidebarItemComponent extends BaseComponent {
         }
     }
     //#endregion
+    /**
+     * Toggle sidebar menu visibility
+     */
     onClick() {
         (this.sidebarMenuComponent || this.sidebarItemGroupComponent?.sidebarMenuComponent)?.closeAll();
         (this.sidebarMenuComponent || this.sidebarItemGroupComponent?.sidebarMenuComponent)?.sidebarComponent.toggleVisibility(false);
@@ -109,18 +179,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+/**
+ * @see https://flowbite.com/docs/components/sidebar/
+ */
 class SidebarItemGroupComponent extends BaseComponent {
     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();
+        /**
+         * Set the custom style for this sidebar item group
+         */
         this.customStyle = model({});
     }
     //#endregion
@@ -140,9 +245,11 @@ class SidebarItemGroupComponent extends BaseComponent {
         this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'chevron-down', this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_DOWN_SVG_ICON));
     }
     //#endregion
-    onSpanClick() {
-        this.toggleVisibility();
-    }
+    /**
+     * Toggle isOpen value
+     *
+     * @param isOpen If provided force isOpen value
+     */
     toggleVisibility(isOpen) {
         if (isOpen === undefined) {
             isOpen = untracked(() => !this.isOpen());
@@ -151,7 +258,7 @@ class SidebarItemGroupComponent extends BaseComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarItemGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.0", 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)="onSpanClick()">
+    <span [class]="contentClasses().spanClass" (click)="toggleVisibility()">
       <h4>{{ title() }}</h4>
       <flowbite-icon
         svgIcon="flowbite-angular:chevron-down"
@@ -168,7 +275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                     imports: [NgClass, NgIf, IconComponent],
                     selector: 'flowbite-sidebar-item-group',
                     template: `
-    <span [class]="contentClasses().spanClass" (click)="onSpanClick()">
+    <span [class]="contentClasses().spanClass" (click)="toggleVisibility()">
       <h4>{{ title() }}</h4>
       <flowbite-icon
         svgIcon="flowbite-angular:chevron-down"
@@ -182,6 +289,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+/**
+ * `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() {
@@ -194,17 +309,48 @@ class SidebarMenuThemeService {
         };
         return output;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarMenuThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarMenuThemeService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarMenuThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
+/**
+ * @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({});
     }
     //#endregion
@@ -221,6 +367,9 @@ class SidebarMenuComponent extends BaseComponent {
             throw new Error('No SidebarItemComponent/SidebarItemGroupComponent available');
         }
     }
+    /**
+     * Toggle visibility of ll children to false
+     */
     closeAll() {
         this.sidebarItemGroupChildren().forEach((x) => x.toggleVisibility(false));
     }
@@ -239,6 +388,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+/**
+ * `InjectionToken` used to import `SidebarPageContentTheme` value
+ *
+ * @example
+ * ```
+ * var theme = inject(FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN)
+ * ```
+ */
 const FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN = new InjectionToken('FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN');
 class SidebarPageContentThemeService {
     constructor() {
@@ -251,14 +408,34 @@ class SidebarPageContentThemeService {
         };
         return output;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarPageContentThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarPageContentThemeService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarPageContentThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
+/**
+ * @see https://flowbite.com/docs/components/sidebar/
+ */
 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({});
     }
     //endregion
@@ -285,6 +462,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+/**
+ * `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() {
@@ -297,7 +482,15 @@ class SidebarThemeService {
         };
         return output;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarThemeService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
 /**
  * @see https://flowbite.com/docs/components/sidebar/
@@ -305,14 +498,46 @@ class SidebarThemeService {
 class SidebarComponent extends BaseComponent {
     constructor() {
         super(...arguments);
+        /**
+         * Service injected used to generate class
+         */
         this.themeService = inject(SidebarThemeService);
+        /**
+         * The child `SidebarMenuComponent`
+         */
         this.sidebarMenuChild = contentChild(SidebarMenuComponent);
+        /**
+         * The child `SidebarPageContentComponent`
+         */
         this.sidebarPageContentChild = contentChild(SidebarPageContentComponent);
         //#region properties
+        /**
+         * Set the sidebar color
+         *
+         * @default primary
+         */
         this.color = model('primary');
+        /**
+         * Set the sidebar display mode
+         *
+         * @default push
+         */
         this.displayMode = model('push');
+        /**
+         * Set is the sidebar is open
+         *
+         * @default false
+         */
         this.isOpen = model(false);
+        /**
+         * Set is the sidebar is rounded
+         *
+         * @default false
+         */
         this.isRounded = model(false);
+        /**
+         * Set the custom style for this sidebar
+         */
         this.customStyle = model({});
     }
     //#endregion
@@ -333,6 +558,11 @@ class SidebarComponent extends BaseComponent {
         }
     }
     //#endregion
+    /**
+     * Toggle sidebar visibility
+     *
+     * @param isOpen If provided force isOpen value
+     */
     toggleVisibility(isOpen) {
         if (isOpen === undefined) {
             isOpen = untracked(() => !this.isOpen());
@@ -364,6 +594,9 @@ const sidebarTheme = createTheme({
     },
 });
 
+/**
+ * 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',
@@ -381,6 +614,9 @@ const sidebarItemTheme = createTheme({
     },
 });
 
+/**
+ * Default theme for `SidebarItemGroupComponent`
+ */
 const sidebarItemGroupTheme = createTheme({
     root: {
         base: 'flex flex-col py-2 font-semibold cursor-pointer',
@@ -398,6 +634,14 @@ const sidebarItemGroupTheme = createTheme({
     },
 });
 
+/**
+ * `InjectionToken` used to import `SidebarToggleTheme` value
+ *
+ * @example
+ * ```
+ * var theme = inject(FLOWBITE_SIDEBAR_TOGGLE_THEME_TOKEN)
+ * ```
+ */
 const FLOWBITE_SIDEBAR_TOGGLE_THEME_TOKEN = new InjectionToken('FLOWBITE_TOGGLE_SIDEBAR_THEME_TOKEN');
 class SidebarToggleThemeService {
     constructor() {
@@ -410,18 +654,56 @@ class SidebarToggleThemeService {
         };
         return output;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarToggleThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarToggleThemeService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarToggleThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
+/**
+ * @see https://flowbite.com/docs/components/sidebar/
+ */
 class SidebarToggleComponent extends BaseComponent {
     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('primary');
+        /**
+         * Set the sidebar toggle size
+         *
+         * @default sm
+         */
         this.size = model('sm');
+        /**
+         * Set the custom style for this sidebar toggle
+         */
         this.customStyle = model({});
     }
     //#endregion
@@ -437,6 +719,9 @@ class SidebarToggleComponent extends BaseComponent {
         this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'tabs', this.domSanitizer.bypassSecurityTrustHtml(BARS_SVG_ICON));
     }
     //#endregion
+    /**
+     * Toggle sidebar visibility
+     */
     onClick() {
         const isOpen = this.sidebarComponent().isOpen();
         this.sidebarComponent().isOpen.set(!isOpen);
@@ -459,6 +744,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+/**
+ * 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',
@@ -476,6 +764,9 @@ const sidebarToggleTheme = createTheme({
     },
 });
 
+/**
+ * Default theme for `SidebarPageContentComponent`
+ */
 const sidebarPageContentTheme = createTheme({
     root: {
         base: 'flex flex-1',
@@ -487,6 +778,9 @@ const sidebarPageContentTheme = createTheme({
     },
 });
 
+/**
+ * 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',