flowbite-angular 1.0.0 → 1.1.1

package/fesm2022/flowbite-angular-scroll-top.mjs

@@ -1,6 +1,6 @@
 import { mergeTheme, CHEVRON_UP_SVG_ICON, createTheme } from 'flowbite-angular/utils';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, model, Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import { InjectionToken, inject, Injectable, makeEnvironmentProviders, model, Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
 import { twMerge } from 'tailwind-merge';
 import { BaseComponent } from 'flowbite-angular';
 import { IconRegistry, IconComponent } from 'flowbite-angular/icon';
@@ -36,6 +36,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+const FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE');
+const FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE');
+const FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE');
+const scrollTopDefaultValueProvider = makeEnvironmentProviders([
+    {
+        provide: FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE,
+        useValue: 'primary',
+    },
+    {
+        provide: FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE,
+        useValue: 'bottom-right',
+    },
+    {
+        provide: FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE,
+        useValue: {},
+    },
+]);
 /**
  * Provide a way to go at the top of the page via a button
  */
@@ -60,17 +77,17 @@ class ScrollTopComponent extends BaseComponent {
          *
          * @default primary
          */
-        this.color = model('primary');
+        this.color = model(inject(FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE));
         /**
          * Set the scroll top position
          *
          * @default bottom-right
          */
-        this.position = model('bottom-right');
+        this.position = model(inject(FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE));
         /**
          * Set the custom style for this scroll top
          */
-        this.customStyle = model({});
+        this.customStyle = model(inject(FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE));
     }
     //#endregion
     //#region BaseComponent implemenation
@@ -146,5 +163,5 @@ const scrollTopTheme = createTheme({
  * Generated bundle index. Do not edit.
  */
 
-export { FLOWBITE_SCROLL_TOP_THEME_TOKEN, ScrollTopComponent, ScrollTopThemeService, scrollTopTheme };
+export { FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE, FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE, FLOWBITE_SCROLL_TOP_THEME_TOKEN, ScrollTopComponent, ScrollTopThemeService, scrollTopDefaultValueProvider, scrollTopTheme };
 //# sourceMappingURL=flowbite-angular-scroll-top.mjs.map

package/fesm2022/flowbite-angular-scroll-top.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"flowbite-angular-scroll-top.mjs","sources":["../../../../libs/flowbite-angular/scroll-top/scroll-top.theme.service.ts","../../../../libs/flowbite-angular/scroll-top/scroll-top.component.ts","../../../../libs/flowbite-angular/scroll-top/scroll-top.theme.ts","../../../../libs/flowbite-angular/scroll-top/flowbite-angular-scroll-top.ts"],"sourcesContent":["import type { ScrollTopClass, ScrollTopProperties, ScrollTopTheme } from './scroll-top.theme';\n\nimport type { FlowbiteThemeService } from 'flowbite-angular';\nimport { mergeTheme } from 'flowbite-angular/utils';\n\nimport { inject, Injectable, InjectionToken } from '@angular/core';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * `InjectionToken` used to import `ScrollTopTheme` value\n *\n * @example\n * ```\n * var theme = inject(FLOWBITE_SCROLL_TOP_THEME_TOKEN)\n * ```\n */\nexport const FLOWBITE_SCROLL_TOP_THEME_TOKEN = new InjectionToken<ScrollTopTheme>(\n  'FLOWBITE_SCROLL_TOP_THEME_TOKEN'\n);\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class ScrollTopThemeService implements FlowbiteThemeService<ScrollTopProperties> {\n  private readonly baseTheme = inject(FLOWBITE_SCROLL_TOP_THEME_TOKEN);\n\n  public getClasses(properties: ScrollTopProperties): ScrollTopClass {\n    const theme: ScrollTopTheme = mergeTheme(this.baseTheme, properties.customStyle);\n\n    const output: ScrollTopClass = {\n      rootClass: twMerge(\n        theme.root.base,\n        theme.root.color[properties.color],\n        theme.root.position[properties.position]\n      ),\n    };\n\n    return output;\n  }\n}\n","import type {\n  ScrollTopClass,\n  ScrollTopColors,\n  ScrollTopPositions,\n  ScrollTopTheme,\n} from './scroll-top.theme';\nimport { ScrollTopThemeService } from './scroll-top.theme.service';\n\nimport type { DeepPartial } from 'flowbite-angular';\nimport { BaseComponent } from 'flowbite-angular';\nimport { IconComponent, IconRegistry } from 'flowbite-angular/icon';\nimport { CHEVRON_UP_SVG_ICON } from 'flowbite-angular/utils';\n\nimport type { OnInit } from '@angular/core';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  inject,\n  model,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\n\n/**\n * Provide a way to go at the top of the page via a button\n */\n@Component({\n  selector: 'flowbite-scroll-top',\n  standalone: true,\n  imports: [IconComponent],\n  template: `<flowbite-icon\n    svgIcon=\"flowbite-angular:chevron-up\"\n    class=\"w-5 h-5\" />`,\n  host: {\n    '(click)': 'onClick()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScrollTopComponent extends BaseComponent<ScrollTopClass> implements OnInit {\n  /**\n   * Service injected used to generate class\n   */\n  public readonly themeService = inject(ScrollTopThemeService);\n  /**\n   * `IconRegistry` service\n   */\n  public readonly iconRegistry = inject(IconRegistry);\n  /**\n   * `DomSanitizer` service\n   */\n  public readonly domSanitizer = inject(DomSanitizer);\n\n  //#region properties\n  /**\n   * Set the scroll top color\n   *\n   * @default primary\n   */\n  public color = model<keyof ScrollTopColors>('primary');\n  /**\n   * Set the scroll top position\n   *\n   * @default bottom-right\n   */\n  public position = model<keyof ScrollTopPositions>('bottom-right');\n  /**\n   * Set the custom style for this scroll top\n   */\n  public customStyle = model<DeepPartial<ScrollTopTheme>>({});\n  //#endregion\n\n  //#region BaseComponent implemenation\n  public override fetchClass(): ScrollTopClass {\n    return this.themeService.getClasses({\n      color: this.color(),\n      position: this.position(),\n      customStyle: this.customStyle(),\n    });\n  }\n\n  public override init(): void {\n    this.iconRegistry.addRawSvgIconInNamepsace(\n      'flowbite-angular',\n      'chevron-up',\n      this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_UP_SVG_ICON)\n    );\n  }\n  //#endregion\n\n  /**\n   * Navigate to the top of the page\n   */\n  public onClick(): void {\n    window.scrollTo(window.scrollX, 0);\n  }\n}\n","import type {\n  DeepPartial,\n  FlowbiteClass,\n  FlowbiteColors,\n  FlowbitePositions,\n} from 'flowbite-angular';\nimport { createTheme } from 'flowbite-angular/utils';\n\n//#region region Component theme option\n/**\n * Available colors for `ScrollTopComponent`\n */\nexport interface ScrollTopColors\n  extends Pick<\n    FlowbiteColors,\n    'primary' | 'dark' | 'blue' | 'gray' | 'green' | 'lime' | 'purple' | 'red'\n  > {\n  [key: string]: string;\n}\n\n/**\n * Available positions for `ScrollTopComponent`\n */\nexport interface ScrollTopPositions extends Omit<FlowbitePositions, 'center'> {\n  [key: string]: string;\n}\n//#endregion\n\n/**\n * Required properties for the class generation for `ScrollTopComponent`\n */\nexport interface ScrollTopProperties {\n  color: keyof ScrollTopColors;\n  position: keyof ScrollTopPositions;\n  customStyle: DeepPartial<ScrollTopTheme>;\n}\n\n/**\n * Theme definition for `ScrollTopComponent`\n */\nexport interface ScrollTopTheme {\n  root: {\n    base: string;\n    color: ScrollTopColors;\n    position: ScrollTopPositions;\n  };\n}\n\n/**\n * Default theme for `ScrollTopComponent`\n */\nexport const scrollTopTheme: ScrollTopTheme = createTheme({\n  root: {\n    base: 'cursor-pointer fixed flex flex-row place-items-center p-2 rounded-lg',\n    color: {\n      primary: 'bg-primary-100',\n      dark: 'bg-gray-100 dark:bg-gray-800 dark:text-white',\n      blue: 'bg-blue-100',\n      gray: 'bg-gray-100',\n      green: 'bg-green-100',\n      lime: 'bg-lime-100',\n      purple: 'bg-purple-100',\n      red: 'bg-red-100',\n    },\n    position: {\n      'bottom-center': 'bottom-3 left-1/2 right-1/2',\n      'bottom-left': 'bottom-3 left-3',\n      'bottom-right': 'bottom-3 right-3',\n      'center-left': 'left-3 top-1/2 bottom-1/2',\n      'center-right': 'right-3 top-1/2 bottom-1/2',\n      'top-center': 'top-3 left-1/2 right-1/2',\n      'top-left': 'top-3 left-3',\n      'top-right': 'top-3 right-3',\n    },\n  },\n});\n\n/**\n * Generated class definition for `ScrollTopComponent`\n */\nexport type ScrollTopClass = FlowbiteClass;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"flowbite-angular-scroll-top.mjs","sources":["../../../../libs/flowbite-angular/scroll-top/scroll-top.theme.service.ts","../../../../libs/flowbite-angular/scroll-top/scroll-top.component.ts","../../../../libs/flowbite-angular/scroll-top/scroll-top.theme.ts","../../../../libs/flowbite-angular/scroll-top/flowbite-angular-scroll-top.ts"],"sourcesContent":["import type { ScrollTopClass, ScrollTopProperties, ScrollTopTheme } from './scroll-top.theme';\n\nimport type { FlowbiteThemeService } from 'flowbite-angular';\nimport { mergeTheme } from 'flowbite-angular/utils';\n\nimport { inject, Injectable, InjectionToken } from '@angular/core';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * `InjectionToken` used to import `ScrollTopTheme` value\n *\n * @example\n * ```\n * var theme = inject(FLOWBITE_SCROLL_TOP_THEME_TOKEN)\n * ```\n */\nexport const FLOWBITE_SCROLL_TOP_THEME_TOKEN = new InjectionToken<ScrollTopTheme>(\n  'FLOWBITE_SCROLL_TOP_THEME_TOKEN'\n);\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class ScrollTopThemeService implements FlowbiteThemeService<ScrollTopProperties> {\n  private readonly baseTheme = inject(FLOWBITE_SCROLL_TOP_THEME_TOKEN);\n\n  public getClasses(properties: ScrollTopProperties): ScrollTopClass {\n    const theme: ScrollTopTheme = mergeTheme(this.baseTheme, properties.customStyle);\n\n    const output: ScrollTopClass = {\n      rootClass: twMerge(\n        theme.root.base,\n        theme.root.color[properties.color],\n        theme.root.position[properties.position]\n      ),\n    };\n\n    return output;\n  }\n}\n","import type {\n  ScrollTopClass,\n  ScrollTopColors,\n  ScrollTopPositions,\n  ScrollTopTheme,\n} from './scroll-top.theme';\nimport { ScrollTopThemeService } from './scroll-top.theme.service';\n\nimport type { DeepPartial } from 'flowbite-angular';\nimport { BaseComponent } from 'flowbite-angular';\nimport { IconComponent, IconRegistry } from 'flowbite-angular/icon';\nimport { CHEVRON_UP_SVG_ICON } from 'flowbite-angular/utils';\n\nimport type { OnInit } from '@angular/core';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  inject,\n  InjectionToken,\n  makeEnvironmentProviders,\n  model,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\n\nexport const FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE = new InjectionToken<keyof ScrollTopColors>(\n  'FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE'\n);\n\nexport const FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE = new InjectionToken<\n  keyof ScrollTopPositions\n>('FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE');\n\nexport const FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<\n  DeepPartial<ScrollTopTheme>\n>('FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE');\n\nexport const scrollTopDefaultValueProvider = makeEnvironmentProviders([\n  {\n    provide: FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE,\n    useValue: 'primary',\n  },\n  {\n    provide: FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE,\n    useValue: 'bottom-right',\n  },\n  {\n    provide: FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE,\n    useValue: {},\n  },\n]);\n\n/**\n * Provide a way to go at the top of the page via a button\n */\n@Component({\n  selector: 'flowbite-scroll-top',\n  standalone: true,\n  imports: [IconComponent],\n  template: `<flowbite-icon\n    svgIcon=\"flowbite-angular:chevron-up\"\n    class=\"w-5 h-5\" />`,\n  host: {\n    '(click)': 'onClick()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScrollTopComponent extends BaseComponent<ScrollTopClass> implements OnInit {\n  /**\n   * Service injected used to generate class\n   */\n  public readonly themeService = inject(ScrollTopThemeService);\n  /**\n   * `IconRegistry` service\n   */\n  public readonly iconRegistry = inject(IconRegistry);\n  /**\n   * `DomSanitizer` service\n   */\n  public readonly domSanitizer = inject(DomSanitizer);\n\n  //#region properties\n  /**\n   * Set the scroll top color\n   *\n   * @default primary\n   */\n  public color = model(inject(FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE));\n  /**\n   * Set the scroll top position\n   *\n   * @default bottom-right\n   */\n  public position = model(inject(FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE));\n  /**\n   * Set the custom style for this scroll top\n   */\n  public customStyle = model(inject(FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE));\n  //#endregion\n\n  //#region BaseComponent implemenation\n  public override fetchClass(): ScrollTopClass {\n    return this.themeService.getClasses({\n      color: this.color(),\n      position: this.position(),\n      customStyle: this.customStyle(),\n    });\n  }\n\n  public override init(): void {\n    this.iconRegistry.addRawSvgIconInNamepsace(\n      'flowbite-angular',\n      'chevron-up',\n      this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_UP_SVG_ICON)\n    );\n  }\n  //#endregion\n\n  /**\n   * Navigate to the top of the page\n   */\n  public onClick(): void {\n    window.scrollTo(window.scrollX, 0);\n  }\n}\n","import type {\n  DeepPartial,\n  FlowbiteClass,\n  FlowbiteColors,\n  FlowbitePositions,\n} from 'flowbite-angular';\nimport { createTheme } from 'flowbite-angular/utils';\n\n//#region region Component theme option\n/**\n * Available colors for `ScrollTopComponent`\n */\nexport interface ScrollTopColors\n  extends Pick<\n    FlowbiteColors,\n    'primary' | 'dark' | 'blue' | 'gray' | 'green' | 'lime' | 'purple' | 'red'\n  > {\n  [key: string]: string;\n}\n\n/**\n * Available positions for `ScrollTopComponent`\n */\nexport interface ScrollTopPositions extends Omit<FlowbitePositions, 'center'> {\n  [key: string]: string;\n}\n//#endregion\n\n/**\n * Required properties for the class generation for `ScrollTopComponent`\n */\nexport interface ScrollTopProperties {\n  color: keyof ScrollTopColors;\n  position: keyof ScrollTopPositions;\n  customStyle: DeepPartial<ScrollTopTheme>;\n}\n\n/**\n * Theme definition for `ScrollTopComponent`\n */\nexport interface ScrollTopTheme {\n  root: {\n    base: string;\n    color: ScrollTopColors;\n    position: ScrollTopPositions;\n  };\n}\n\n/**\n * Default theme for `ScrollTopComponent`\n */\nexport const scrollTopTheme: ScrollTopTheme = createTheme({\n  root: {\n    base: 'cursor-pointer fixed flex flex-row place-items-center p-2 rounded-lg',\n    color: {\n      primary: 'bg-primary-100',\n      dark: 'bg-gray-100 dark:bg-gray-800 dark:text-white',\n      blue: 'bg-blue-100',\n      gray: 'bg-gray-100',\n      green: 'bg-green-100',\n      lime: 'bg-lime-100',\n      purple: 'bg-purple-100',\n      red: 'bg-red-100',\n    },\n    position: {\n      'bottom-center': 'bottom-3 left-1/2 right-1/2',\n      'bottom-left': 'bottom-3 left-3',\n      'bottom-right': 'bottom-3 right-3',\n      'center-left': 'left-3 top-1/2 bottom-1/2',\n      'center-right': 'right-3 top-1/2 bottom-1/2',\n      'top-center': 'top-3 left-1/2 right-1/2',\n      'top-left': 'top-3 left-3',\n      'top-right': 'top-3 right-3',\n    },\n  },\n});\n\n/**\n * Generated class definition for `ScrollTopComponent`\n */\nexport type ScrollTopClass = FlowbiteClass;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/flowbite-angular-sidebar.mjs

@@ -1,13 +1,12 @@
 import { mergeTheme, CHEVRON_DOWN_SVG_ICON, createTheme, BARS_SVG_ICON } from 'flowbite-angular/utils';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, model, Component, ViewEncapsulation, ChangeDetectionStrategy, contentChildren, untracked, contentChild } from '@angular/core';
+import { InjectionToken, inject, Injectable, makeEnvironmentProviders, 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';
 import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link';
 import { FlowbiteRouterLinkActiveDirective } from 'flowbite-angular/router-link-active';
 import { SanitizeHtmlPipe } from 'flowbite-angular/sanitize-html';
-import { NgIf, NgClass } from '@angular/common';
 import { IconRegistry, IconComponent } from 'flowbite-angular/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -73,6 +72,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+const FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE');
+const FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE');
+const FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE');
+const sidebarItemDefaultValueProvider = makeEnvironmentProviders([
+    {
+        provide: FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE,
+        useValue: undefined,
+    },
+    {
+        provide: FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE,
+        useValue: undefined,
+    },
+    {
+        provide: FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
+        useValue: {},
+    },
+]);
 /**
  * @see https://flowbite.com/docs/components/sidebar/
  */
@@ -107,7 +123,7 @@ class SidebarItemComponent extends BaseComponent {
          *
          * @default undefined
          */
-        this.icon = model(undefined);
+        this.icon = model(inject(FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE));
         /**
          * Set the sidebar item color
          *
@@ -120,11 +136,11 @@ class SidebarItemComponent extends BaseComponent {
          *
          * @default undefined
          */
-        this.label = model(undefined);
+        this.label = model(inject(FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE));
         /**
          * Set the custom style for this sidebar item
          */
-        this.customStyle = model({});
+        this.customStyle = model(inject(FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE));
     }
     //#endregion
     //#region BaseComponent implementation
@@ -136,11 +152,6 @@ class SidebarItemComponent extends BaseComponent {
             customStyle: this.customStyle(),
         });
     }
-    verify() {
-        if (this.sidebarMenuComponent === undefined && this.sidebarItemGroupComponent === undefined) {
-            throw new Error('No SidebarMenuComponent/SidebarItemGroupComponent available');
-        }
-    }
     //#endregion
     /**
      * Toggle sidebar menu visibility
@@ -150,36 +161,44 @@ class SidebarItemComponent extends BaseComponent {
         (this.sidebarMenuComponent || this.sidebarItemGroupComponent?.sidebarMenuComponent)?.sidebarComponent.toggleVisibility(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", type: SidebarItemComponent, isStandalone: true, selector: "flowbite-sidebar-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { icon: "iconChange", color: "colorChange", label: "labelChange", customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `
-    <span
-      class="flex-shrink-0"
-      [innerHTML]="icon()! | sanitizeHtml"
-      *ngIf="icon()"></span>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: SidebarItemComponent, isStandalone: true, selector: "flowbite-sidebar-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { icon: "iconChange", color: "colorChange", label: "labelChange", customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `
+    @if (icon()) {
+      <span
+        class="flex-shrink-0"
+        [innerHTML]="icon()! | sanitizeHtml"></span>
+    }
+
     <span
-      [ngClass]="contentClasses().sidebarIconClass"
+      [class]="contentClasses().sidebarIconClass"
       [class.ml-3]="icon()">
       <ng-content />
     </span>
-    <flowbite-badge *ngIf="label()">{{ label() }}</flowbite-badge>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: BadgeComponent, selector: "flowbite-badge", inputs: ["color", "size", "isIconOnly", "isPill", "customStyle"], outputs: ["colorChange", "sizeChange", "isIconOnlyChange", "isPillChange", "customStyleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    @if (label()) {
+      <flowbite-badge>{{ label() }}</flowbite-badge>
+    }
+  `, isInline: true, dependencies: [{ kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: BadgeComponent, selector: "flowbite-badge", inputs: ["color", "size", "isIconOnly", "isPill", "customStyle"], outputs: ["colorChange", "sizeChange", "isIconOnlyChange", "isPillChange", "customStyleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarItemComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    imports: [NgIf, NgClass, SanitizeHtmlPipe, BadgeComponent],
+                    imports: [SanitizeHtmlPipe, BadgeComponent],
                     selector: 'flowbite-sidebar-item',
                     template: `
+    @if (icon()) {
+      <span
+        class="flex-shrink-0"
+        [innerHTML]="icon()! | sanitizeHtml"></span>
+    }
+
     <span
-      class="flex-shrink-0"
-      [innerHTML]="icon()! | sanitizeHtml"
-      *ngIf="icon()"></span>
-    <span
-      [ngClass]="contentClasses().sidebarIconClass"
+      [class]="contentClasses().sidebarIconClass"
       [class.ml-3]="icon()">
       <ng-content />
     </span>
-    <flowbite-badge *ngIf="label()">{{ label() }}</flowbite-badge>
+    @if (label()) {
+      <flowbite-badge>{{ label() }}</flowbite-badge>
+    }
   `,
                     host: {
                         '(click)': 'onClick()',
@@ -189,6 +208,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+const FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE');
+const sidebarItemGroupDefaultValueProvider = makeEnvironmentProviders([
+    {
+        provide: FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE,
+        useValue: {},
+    },
+]);
 /**
  * @see https://flowbite.com/docs/components/sidebar/
  */
@@ -236,7 +262,7 @@ class SidebarItemGroupComponent extends BaseComponent {
         /**
          * Set the custom style for this sidebar item group
          */
-        this.customStyle = model({});
+        this.customStyle = model(inject(FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE));
     }
     //#endregion
     //#region BaseComponent implementation
@@ -246,11 +272,6 @@ class SidebarItemGroupComponent extends BaseComponent {
             customStyle: this.customStyle(),
         });
     }
-    verify() {
-        if (this.sidebarItemChildren().length === 0) {
-            throw new Error('No SidebarItemComponent available');
-        }
-    }
     init() {
         this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'chevron-down', this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_DOWN_SVG_ICON));
     }
@@ -267,7 +288,7 @@ class SidebarItemGroupComponent extends BaseComponent {
         this.isOpen.set(isOpen);
     }
     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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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)="toggleVisibility()">
@@ -277,14 +298,16 @@ class SidebarItemGroupComponent extends BaseComponent {
         class="h-6 w-6 shrink-0 duration-200"
         [class.rotate-180]="!isOpen()" />
     </span>
-    <ng-content *ngIf="isOpen()" />
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    @if (isOpen()) {
+      <ng-content />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SidebarItemGroupComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    imports: [NgClass, NgIf, IconComponent],
+                    imports: [IconComponent],
                     selector: 'flowbite-sidebar-item-group',
                     template: `
     <span
@@ -296,7 +319,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
         class="h-6 w-6 shrink-0 duration-200"
         [class.rotate-180]="!isOpen()" />
     </span>
-    <ng-content *ngIf="isOpen()" />
+    @if (isOpen()) {
+      <ng-content />
+    }
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -333,6 +358,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+const FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE');
+const sidebarMenuDefaultValueProvider = makeEnvironmentProviders([
+    {
+        provide: FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE,
+        useValue: {},
+    },
+]);
 /**
  * @see https://flowbite.com/docs/components/sidebar/
  */
@@ -365,7 +397,7 @@ class SidebarMenuComponent extends BaseComponent {
         /**
          * Set the custom style for this sidebar menu
          */
-        this.customStyle = model({});
+        this.customStyle = model(inject(FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE));
     }
     //#endregion
     fetchClass() {
@@ -376,11 +408,6 @@ class SidebarMenuComponent extends BaseComponent {
             customStyle: this.customStyle(),
         });
     }
-    verify() {
-        if (this.sidebarItemChildren().length === 0 && this.sidebarItemGroupChildren().length === 0) {
-            throw new Error('No SidebarItemComponent/SidebarItemGroupComponent available');
-        }
-    }
     /**
      * Toggle visibility of ll children to false
      */
@@ -394,7 +421,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
             type: Component,
             args: [{
                     standalone: true,
-                    imports: [],
                     selector: 'flowbite-sidebar-menu',
                     template: '<ng-content />',
                     encapsulation: ViewEncapsulation.None,
@@ -432,6 +458,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+const FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE');
+const sidebarPageContentDefaultValueProvider = makeEnvironmentProviders([
+    {
+        provide: FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE,
+        useValue: {},
+    },
+]);
 /**
  * @see https://flowbite.com/docs/components/sidebar/
  */
@@ -450,7 +483,7 @@ class SidebarPageContentComponent extends BaseComponent {
         /**
          * Set the custom style for this sidebar page content
          */
-        this.customStyle = model({});
+        this.customStyle = model(inject(FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE));
     }
     //endregion
     //region BaseComponent implementation
@@ -468,7 +501,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
             type: Component,
             args: [{
                     standalone: true,
-                    imports: [],
                     selector: 'flowbite-sidebar-page-content',
                     template: `<ng-content />`,
                     encapsulation: ViewEncapsulation.None,
@@ -506,6 +538,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+const FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE');
+const FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE');
+const FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE');
+const FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE');
+const FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE');
+const sidebarDefaultValueProvider = makeEnvironmentProviders([
+    {
+        provide: FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE,
+        useValue: 'primary',
+    },
+    {
+        provide: FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE,
+        useValue: 'push',
+    },
+    {
+        provide: FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE,
+        useValue: false,
+    },
+    {
+        provide: FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE,
+        useValue: false,
+    },
+    {
+        provide: FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE,
+        useValue: {},
+    },
+]);
 /**
  * @see https://flowbite.com/docs/components/sidebar/
  */
@@ -519,40 +578,40 @@ class SidebarComponent extends BaseComponent {
         /**
          * The child `SidebarMenuComponent`
          */
-        this.sidebarMenuChild = contentChild(SidebarMenuComponent);
+        this.sidebarMenuChild = contentChild.required(SidebarMenuComponent);
         /**
          * The child `SidebarPageContentComponent`
          */
-        this.sidebarPageContentChild = contentChild(SidebarPageContentComponent);
+        this.sidebarPageContentChild = contentChild.required(SidebarPageContentComponent);
         //#region properties
         /**
          * Set the sidebar color
          *
          * @default primary
          */
-        this.color = model('primary');
+        this.color = model(inject(FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE));
         /**
          * Set the sidebar display mode
          *
          * @default push
          */
-        this.displayMode = model('push');
+        this.displayMode = model(inject(FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE));
         /**
          * Set is the sidebar is open
          *
          * @default false
          */
-        this.isOpen = model(false);
+        this.isOpen = model(inject(FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE));
         /**
          * Set is the sidebar is rounded
          *
          * @default false
          */
-        this.isRounded = model(false);
+        this.isRounded = model(inject(FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE));
         /**
          * Set the custom style for this sidebar
          */
-        this.customStyle = model({});
+        this.customStyle = model(inject(FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE));
     }
     //#endregion
     //#region BaseComponent implementation
@@ -563,14 +622,6 @@ class SidebarComponent extends BaseComponent {
             customStyle: this.customStyle(),
         });
     }
-    verify() {
-        if (this.sidebarMenuChild() === undefined) {
-            throw new Error('No SidebarMenuComponent available');
-        }
-        if (this.sidebarPageContentChild() === undefined) {
-            throw new Error('No SidebarPageContentComponent available');
-        }
-    }
     //#endregion
     /**
      * Toggle sidebar visibility
@@ -590,7 +641,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
             type: Component,
             args: [{
                     standalone: true,
-                    imports: [NgClass],
                     selector: 'flowbite-sidebar',
                     template: `<ng-content />`,
                     encapsulation: ViewEncapsulation.None,
@@ -678,6 +728,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+const FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE');
+const FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE');
+const FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE');
+const sidebarToggleDefaultValueProvider = makeEnvironmentProviders([
+    {
+        provide: FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE,
+        useValue: 'primary',
+    },
+    {
+        provide: FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE,
+        useValue: 'sm',
+    },
+    {
+        provide: FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE,
+        useValue: {},
+    },
+]);
 /**
  * @see https://flowbite.com/docs/components/sidebar/
  */
@@ -708,17 +775,17 @@ class SidebarToggleComponent extends BaseComponent {
          *
          * @default primary
          */
-        this.color = model('primary');
+        this.color = model(inject(FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE));
         /**
          * Set the sidebar toggle size
          *
          * @default sm
          */
-        this.size = model('sm');
+        this.size = model(inject(FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE));
         /**
          * Set the custom style for this sidebar toggle
          */
-        this.customStyle = model({});
+        this.customStyle = model(inject(FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE));
     }
     //#endregion
     //#region BaseComponent implementation
@@ -822,5 +889,5 @@ const sidebarMenuTheme = createTheme({
  * Generated bundle index. Do not edit.
  */
 
-export { FLOWBITE_SIDEBAR_ITEM_GROUP_THEME_TOKEN, FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN, FLOWBITE_SIDEBAR_MENU_THEME_TOKEN, FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN, FLOWBITE_SIDEBAR_THEME_TOKEN, FLOWBITE_SIDEBAR_TOGGLE_THEME_TOKEN, SidebarComponent, SidebarItemComponent, SidebarItemGroupComponent, SidebarItemGroupThemeService, SidebarItemThemeService, SidebarMenuComponent, SidebarMenuThemeService, SidebarPageContentComponent, SidebarPageContentThemeService, SidebarThemeService, SidebarToggleComponent, SidebarToggleThemeService, sidebarItemGroupTheme, sidebarItemTheme, sidebarMenuTheme, sidebarPageContentTheme, sidebarTheme, sidebarToggleTheme };
+export { FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE, FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE, FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE, FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_ITEM_GROUP_THEME_TOKEN, FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE, FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE, FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN, FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_MENU_THEME_TOKEN, FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN, FLOWBITE_SIDEBAR_THEME_TOKEN, FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE, FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_TOGGLE_THEME_TOKEN, SidebarComponent, SidebarItemComponent, SidebarItemGroupComponent, SidebarItemGroupThemeService, SidebarItemThemeService, SidebarMenuComponent, SidebarMenuThemeService, SidebarPageContentComponent, SidebarPageContentThemeService, SidebarThemeService, SidebarToggleComponent, SidebarToggleThemeService, sidebarDefaultValueProvider, sidebarItemDefaultValueProvider, sidebarItemGroupDefaultValueProvider, sidebarItemGroupTheme, sidebarItemTheme, sidebarMenuDefaultValueProvider, sidebarMenuTheme, sidebarPageContentDefaultValueProvider, sidebarPageContentTheme, sidebarTheme, sidebarToggleDefaultValueProvider, sidebarToggleTheme };
 //# sourceMappingURL=flowbite-angular-sidebar.mjs.map