flowbite-angular 1.0.0-beta.1 → 1.1.0

package/fesm2022/flowbite-angular-dark-theme-toggle.mjs

@@ -1,10 +1,10 @@
 import { mergeTheme, SUN_SVG_ICON, MOON_SVG_ICON, createTheme } from 'flowbite-angular/utils';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, model, afterNextRender, 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';
-import { NgIf, NgClass } from '@angular/common';
+import { FlowbiteThemeDirective } from 'flowbite-angular/theme';
 import { DomSanitizer } from '@angular/platform-browser';
 
 /**
@@ -37,6 +37,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+const FLOWBITE_DARK_THEME_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DARK_THEME_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE');
+const darkThemeToggleDefaultValueProvider = makeEnvironmentProviders([
+    {
+        provide: FLOWBITE_DARK_THEME_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE,
+        useValue: {},
+    },
+]);
 /**
  * Use to toggle light/dark mode accross the site
  */
@@ -55,11 +62,15 @@ class DarkThemeToggleComponent extends BaseComponent {
          * `DomSanitizer` service
          */
         this.domSanitizer = inject(DomSanitizer);
+        /**
+         * `FlowbiteThemeDirective` directive
+         */
+        this.themeDirective = inject(FlowbiteThemeDirective);
         //#region properties
         /**
          * Set the custom style for this dark-theme-toggle
          */
-        this.customStyle = model({});
+        this.customStyle = model(inject(FLOWBITE_DARK_THEME_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE));
     }
     //#endregion
     //#region BaseComponent implementation
@@ -69,9 +80,6 @@ class DarkThemeToggleComponent extends BaseComponent {
         });
     }
     init() {
-        afterNextRender(() => {
-            this.toggleTheme(this.getTheme());
-        }, { injector: this.injector });
         this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'sun', this.domSanitizer.bypassSecurityTrustHtml(SUN_SVG_ICON));
         this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'moon', this.domSanitizer.bypassSecurityTrustHtml(MOON_SVG_ICON));
     }
@@ -80,40 +88,7 @@ class DarkThemeToggleComponent extends BaseComponent {
      * Toggle between dark and light mode
      */
     onClick() {
-        this.toggleTheme();
-    }
-    /**
-     * Get theme from the `localStorage`
-     * @returns The current theme saved in the `localStorage` with the key `color-theme`
-     */
-    getTheme() {
-        return localStorage.getItem('color-theme') === 'dark' ? 'dark' : 'light';
-    }
-    /**
-     * Toggle the theme saced in the `localStorage`
-     *
-     * @param theme If provided, force the theme instead of toggling it between light and dark mode
-     */
-    toggleTheme(theme) {
-        if (!theme) {
-            const tmpTheme = this.getTheme();
-            if (tmpTheme === 'dark')
-                theme = 'light';
-            else
-                theme = 'dark';
-        }
-        this.setTheme(theme);
-    }
-    /**
-     * Set the theme inside the page
-     *
-     * @param theme Theme to apply
-     */
-    setTheme(theme) {
-        localStorage.setItem('color-theme', theme);
-        theme === 'dark'
-            ? document.documentElement.classList.add('dark')
-            : document.documentElement.classList.remove('dark');
+        this.themeDirective.toggleTheme();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DarkThemeToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", type: DarkThemeToggleComponent, isStandalone: true, selector: "flowbite-dark-theme-toggle", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `
@@ -129,7 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
             type: Component,
             args: [{
                     standalone: true,
-                    imports: [NgIf, NgClass, IconComponent],
+                    imports: [IconComponent],
                     selector: 'flowbite-dark-theme-toggle',
                     template: `
     <flowbite-icon
@@ -160,5 +135,5 @@ const darkThemeToggleTheme = createTheme({
  * Generated bundle index. Do not edit.
  */
 
-export { DarkThemeToggleComponent, DarkThemeToggleThemeService, FLOWBITE_DARK_THEME_TOGGLE_THEME_TOKEN, darkThemeToggleTheme };
+export { DarkThemeToggleComponent, DarkThemeToggleThemeService, FLOWBITE_DARK_THEME_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_DARK_THEME_TOGGLE_THEME_TOKEN, darkThemeToggleDefaultValueProvider, darkThemeToggleTheme };
 //# sourceMappingURL=flowbite-angular-dark-theme-toggle.mjs.map

package/fesm2022/flowbite-angular-dark-theme-toggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"flowbite-angular-dark-theme-toggle.mjs","sources":["../../../../libs/flowbite-angular/dark-theme-toggle/dark-theme-toggle.theme.service.ts","../../../../libs/flowbite-angular/dark-theme-toggle/dark-theme-toggle.component.ts","../../../../libs/flowbite-angular/dark-theme-toggle/dark-theme-toggle.theme.ts","../../../../libs/flowbite-angular/dark-theme-toggle/flowbite-angular-dark-theme-toggle.ts"],"sourcesContent":["import type {\n  DarkThemeToggleClass,\n  DarkThemeToggleProperties,\n  DarkThemeToggleTheme,\n} from './dark-theme-toggle.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 `DarkThemeToggleTheme` value\n *\n * @example\n * ```\n * var theme = inject(FLOWBITE_DARK_THEME_TOGGLE_THEME_TOKEN)\n * ```\n */\nexport const FLOWBITE_DARK_THEME_TOGGLE_THEME_TOKEN = new InjectionToken<DarkThemeToggleTheme>(\n  'FLOWBITE_DARK_THEME_TOGGLE_THEME_TOKEN'\n);\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DarkThemeToggleThemeService\n  implements FlowbiteThemeService<DarkThemeToggleProperties>\n{\n  private readonly baseTheme = inject(FLOWBITE_DARK_THEME_TOGGLE_THEME_TOKEN);\n\n  public getClasses(properties: DarkThemeToggleProperties): DarkThemeToggleClass {\n    const theme: DarkThemeToggleTheme = mergeTheme(this.baseTheme, properties.customStyle);\n\n    const output: DarkThemeToggleClass = {\n      rootClass: twMerge(theme.root.base),\n    };\n\n    return output;\n  }\n}\n","import type { DarkThemeToggleClass, DarkThemeToggleTheme } from './dark-theme-toggle.theme';\nimport { DarkThemeToggleThemeService } from './dark-theme-toggle.theme.service';\n\nimport type { DeepPartial, FlowbiteTheme } from 'flowbite-angular';\nimport { BaseComponent } from 'flowbite-angular';\nimport { IconComponent, IconRegistry } from 'flowbite-angular/icon';\nimport { MOON_SVG_ICON, SUN_SVG_ICON } from 'flowbite-angular/utils';\n\nimport { NgClass, NgIf } from '@angular/common';\nimport {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  inject,\n  model,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\n\n/**\n * Use to toggle light/dark mode accross the site\n */\n@Component({\n  standalone: true,\n  imports: [NgIf, NgClass, IconComponent],\n  selector: 'flowbite-dark-theme-toggle',\n  template: `\n    <flowbite-icon\n      svgIcon=\"flowbite-angular:moon\"\n      class=\"h-5 w-5 block dark:hidden\" />\n    <flowbite-icon\n      svgIcon=\"flowbite-angular:sun\"\n      class=\"h-5 w-5 hidden dark:block\" />\n  `,\n  host: {\n    '(click)': 'onClick()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DarkThemeToggleComponent extends BaseComponent<DarkThemeToggleClass> {\n  /**\n   * Service injected used to generate class\n   */\n  public readonly themeService = inject(DarkThemeToggleThemeService);\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 custom style for this dark-theme-toggle\n   */\n  public customStyle = model<DeepPartial<DarkThemeToggleTheme>>({});\n  //#endregion\n\n  //#region BaseComponent implementation\n  public override fetchClass(): DarkThemeToggleClass {\n    return this.themeService.getClasses({\n      customStyle: this.customStyle(),\n    });\n  }\n\n  public override init(): void {\n    afterNextRender(\n      () => {\n        this.toggleTheme(this.getTheme());\n      },\n      { injector: this.injector }\n    );\n\n    this.iconRegistry.addRawSvgIconInNamepsace(\n      'flowbite-angular',\n      'sun',\n      this.domSanitizer.bypassSecurityTrustHtml(SUN_SVG_ICON)\n    );\n    this.iconRegistry.addRawSvgIconInNamepsace(\n      'flowbite-angular',\n      'moon',\n      this.domSanitizer.bypassSecurityTrustHtml(MOON_SVG_ICON)\n    );\n  }\n  //#endregion\n\n  /**\n   * Toggle between dark and light mode\n   */\n  public onClick() {\n    this.toggleTheme();\n  }\n\n  /**\n   * Get theme from the `localStorage`\n   * @returns The current theme saved in the `localStorage` with the key `color-theme`\n   */\n  private getTheme(): FlowbiteTheme {\n    return localStorage.getItem('color-theme') === 'dark' ? 'dark' : 'light';\n  }\n\n  /**\n   * Toggle the theme saced in the `localStorage`\n   *\n   * @param theme If provided, force the theme instead of toggling it between light and dark mode\n   */\n  private toggleTheme(theme?: FlowbiteTheme): void {\n    if (!theme) {\n      const tmpTheme = this.getTheme();\n\n      if (tmpTheme === 'dark') theme = 'light';\n      else theme = 'dark';\n    }\n\n    this.setTheme(theme);\n  }\n\n  /**\n   * Set the theme inside the page\n   *\n   * @param theme Theme to apply\n   */\n  private setTheme(theme: FlowbiteTheme): void {\n    localStorage.setItem('color-theme', theme);\n\n    theme === 'dark'\n      ? document.documentElement.classList.add('dark')\n      : document.documentElement.classList.remove('dark');\n  }\n}\n","import type { DeepPartial, FlowbiteClass } from 'flowbite-angular';\nimport { createTheme } from 'flowbite-angular/utils';\n\n/**\n * Required properties for the class generation of `DarkThemeToggleComponent`\n */\nexport interface DarkThemeToggleProperties {\n  customStyle: DeepPartial<DarkThemeToggleTheme>;\n}\n\n/**\n * Theme definition for `DarkThemeToggleComponent`\n */\nexport interface DarkThemeToggleTheme {\n  root: {\n    base: string;\n  };\n}\n\n/**\n * Default theme for `DarkThemeToggleComponent`\n */\nexport const darkThemeToggleTheme: DarkThemeToggleTheme = createTheme({\n  root: {\n    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',\n  },\n});\n\n/**\n * Generated class definition for `DarkThemeToggleComponent`\n */\nexport type DarkThemeToggleClass = 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-dark-theme-toggle.mjs","sources":["../../../../libs/flowbite-angular/dark-theme-toggle/dark-theme-toggle.theme.service.ts","../../../../libs/flowbite-angular/dark-theme-toggle/dark-theme-toggle.component.ts","../../../../libs/flowbite-angular/dark-theme-toggle/dark-theme-toggle.theme.ts","../../../../libs/flowbite-angular/dark-theme-toggle/flowbite-angular-dark-theme-toggle.ts"],"sourcesContent":["import type {\n  DarkThemeToggleClass,\n  DarkThemeToggleProperties,\n  DarkThemeToggleTheme,\n} from './dark-theme-toggle.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 `DarkThemeToggleTheme` value\n *\n * @example\n * ```\n * var theme = inject(FLOWBITE_DARK_THEME_TOGGLE_THEME_TOKEN)\n * ```\n */\nexport const FLOWBITE_DARK_THEME_TOGGLE_THEME_TOKEN = new InjectionToken<DarkThemeToggleTheme>(\n  'FLOWBITE_DARK_THEME_TOGGLE_THEME_TOKEN'\n);\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DarkThemeToggleThemeService\n  implements FlowbiteThemeService<DarkThemeToggleProperties>\n{\n  private readonly baseTheme = inject(FLOWBITE_DARK_THEME_TOGGLE_THEME_TOKEN);\n\n  public getClasses(properties: DarkThemeToggleProperties): DarkThemeToggleClass {\n    const theme: DarkThemeToggleTheme = mergeTheme(this.baseTheme, properties.customStyle);\n\n    const output: DarkThemeToggleClass = {\n      rootClass: twMerge(theme.root.base),\n    };\n\n    return output;\n  }\n}\n","import type { DarkThemeToggleClass, DarkThemeToggleTheme } from './dark-theme-toggle.theme';\nimport { DarkThemeToggleThemeService } from './dark-theme-toggle.theme.service';\n\nimport type { DeepPartial } from 'flowbite-angular';\nimport { BaseComponent } from 'flowbite-angular';\nimport { IconComponent, IconRegistry } from 'flowbite-angular/icon';\nimport { FlowbiteThemeDirective } from 'flowbite-angular/theme';\nimport { MOON_SVG_ICON, SUN_SVG_ICON } from 'flowbite-angular/utils';\n\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_DARK_THEME_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<\n  DeepPartial<DarkThemeToggleTheme>\n>('FLOWBITE_DARK_THEME_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE');\n\nexport const darkThemeToggleDefaultValueProvider = makeEnvironmentProviders([\n  {\n    provide: FLOWBITE_DARK_THEME_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE,\n    useValue: {},\n  },\n]);\n\n/**\n * Use to toggle light/dark mode accross the site\n */\n@Component({\n  standalone: true,\n  imports: [IconComponent],\n  selector: 'flowbite-dark-theme-toggle',\n  template: `\n    <flowbite-icon\n      svgIcon=\"flowbite-angular:moon\"\n      class=\"h-5 w-5 block dark:hidden\" />\n    <flowbite-icon\n      svgIcon=\"flowbite-angular:sun\"\n      class=\"h-5 w-5 hidden dark:block\" />\n  `,\n  host: {\n    '(click)': 'onClick()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DarkThemeToggleComponent extends BaseComponent<DarkThemeToggleClass> {\n  /**\n   * Service injected used to generate class\n   */\n  public readonly themeService = inject(DarkThemeToggleThemeService);\n  /**\n   * `IconRegistry` service\n   */\n  public readonly iconRegistry = inject(IconRegistry);\n  /**\n   * `DomSanitizer` service\n   */\n  public readonly domSanitizer = inject(DomSanitizer);\n  /**\n   * `FlowbiteThemeDirective` directive\n   */\n  public readonly themeDirective = inject(FlowbiteThemeDirective);\n\n  //#region properties\n  /**\n   * Set the custom style for this dark-theme-toggle\n   */\n  public customStyle = model(inject(FLOWBITE_DARK_THEME_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE));\n  //#endregion\n\n  //#region BaseComponent implementation\n  public override fetchClass(): DarkThemeToggleClass {\n    return this.themeService.getClasses({\n      customStyle: this.customStyle(),\n    });\n  }\n\n  public override init(): void {\n    this.iconRegistry.addRawSvgIconInNamepsace(\n      'flowbite-angular',\n      'sun',\n      this.domSanitizer.bypassSecurityTrustHtml(SUN_SVG_ICON)\n    );\n    this.iconRegistry.addRawSvgIconInNamepsace(\n      'flowbite-angular',\n      'moon',\n      this.domSanitizer.bypassSecurityTrustHtml(MOON_SVG_ICON)\n    );\n  }\n  //#endregion\n\n  /**\n   * Toggle between dark and light mode\n   */\n  public onClick() {\n    this.themeDirective.toggleTheme();\n  }\n}\n","import type { DeepPartial, FlowbiteClass } from 'flowbite-angular';\nimport { createTheme } from 'flowbite-angular/utils';\n\n/**\n * Required properties for the class generation of `DarkThemeToggleComponent`\n */\nexport interface DarkThemeToggleProperties {\n  customStyle: DeepPartial<DarkThemeToggleTheme>;\n}\n\n/**\n * Theme definition for `DarkThemeToggleComponent`\n */\nexport interface DarkThemeToggleTheme {\n  root: {\n    base: string;\n  };\n}\n\n/**\n * Default theme for `DarkThemeToggleComponent`\n */\nexport const darkThemeToggleTheme: DarkThemeToggleTheme = createTheme({\n  root: {\n    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',\n  },\n});\n\n/**\n * Generated class definition for `DarkThemeToggleComponent`\n */\nexport type DarkThemeToggleClass = 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-dropdown.mjs

@@ -1,12 +1,10 @@
 import { mergeTheme, CHEVRON_DOWN_SVG_ICON, createTheme } from 'flowbite-angular/utils';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, model, Component, ViewEncapsulation, ChangeDetectionStrategy, contentChildren, ViewChild } from '@angular/core';
+import { InjectionToken, inject, Injectable, makeEnvironmentProviders, model, Component, ViewEncapsulation, ChangeDetectionStrategy, viewChild, contentChildren } from '@angular/core';
 import { twMerge } from 'tailwind-merge';
 import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
-import { NgClass } from '@angular/common';
 import { IconRegistry, IconComponent } from 'flowbite-angular/icon';
 import { DomSanitizer } from '@angular/platform-browser';
-import { computePosition, offset, flip, shift, autoUpdate } from '@floating-ui/dom';
 
 /**
  * `InjectionToken` used to import `DropdownDividerTheme` value
@@ -38,6 +36,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+const FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE');
+const dropdownDividerDefaultValueProvider = makeEnvironmentProviders([
+    {
+        provide: FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE,
+        useValue: {},
+    },
+]);
 /**
  * @see https://flowbite.com/docs/components/dropdowns/
  */
@@ -56,7 +61,7 @@ class DropdownDividerComponent extends BaseComponent {
         /**
          * Set the custom style for this dropdown divider
          */
-        this.customStyle = model({});
+        this.customStyle = model(inject(FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE));
     }
     //#endregion
     //#region BaseComponent implementation
@@ -72,7 +77,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
             type: Component,
             args: [{
                     standalone: true,
-                    imports: [NgClass],
                     selector: 'flowbite-dropdown-divider',
                     template: ``,
                     encapsulation: ViewEncapsulation.None,
@@ -111,6 +115,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+const FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE');
+const dropdownHeaderDefaultValueProvider = makeEnvironmentProviders([
+    {
+        provide: FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE,
+        useValue: {},
+    },
+]);
 /**
  * @see https://flowbite.com/docs/components/dropdowns/
  */
@@ -129,7 +140,7 @@ class DropdownHeaderComponent extends BaseComponent {
         /**
          * Set the custom style for this dropdown header
          */
-        this.customStyle = model({});
+        this.customStyle = model(inject(FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE));
     }
     //#endregion
     //#region BaseComponent implementation
@@ -140,23 +151,20 @@ class DropdownHeaderComponent extends BaseComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DropdownHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", type: DropdownHeaderComponent, isStandalone: true, selector: "flowbite-dropdown-header", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `
-    <div [ngClass]="contentClasses().root">
+    <div [class]="contentClasses().root">
       <ng-content />
     </div>
-    <div class="my-1 h-px bg-gray-100 dark:bg-gray-600"></div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], 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: "18.0.0", ngImport: i0, type: DropdownHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    imports: [NgClass],
                     selector: 'flowbite-dropdown-header',
                     template: `
-    <div [ngClass]="contentClasses().root">
+    <div [class]="contentClasses().root">
       <ng-content />
     </div>
-    <div class="my-1 h-px bg-gray-100 dark:bg-gray-600"></div>
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -193,6 +201,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+const FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE');
+const dropdownItemDefaultValueProvider = makeEnvironmentProviders([
+    {
+        provide: FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
+        useValue: {},
+    },
+]);
 /**
  * @see https://flowbite.com/docs/components/dropdowns/
  */
@@ -211,7 +226,7 @@ class DropdownItemComponent extends BaseComponent {
         /**
          * Set the custom style for this dropdown item
          */
-        this.customStyle = model({});
+        this.customStyle = model(inject(FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE));
     }
     //#endregion
     //#region BaseComponent implementation
@@ -227,7 +242,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
             type: Component,
             args: [{
                     standalone: true,
-                    imports: [NgClass],
                     selector: 'flowbite-dropdown-item',
                     template: `<ng-content />`,
                     encapsulation: ViewEncapsulation.None,
@@ -270,12 +284,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
+const FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE');
+const FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE');
+const FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE');
+const FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE');
+const dropdownDefaultValueProvider = makeEnvironmentProviders([
+    {
+        provide: FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE,
+        useValue: 'Dropdown',
+    },
+    {
+        provide: FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE,
+        useValue: false,
+    },
+    {
+        provide: FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE,
+        useValue: 'bottom-center',
+    },
+    {
+        provide: FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE,
+        useValue: {},
+    },
+]);
 /**
  * @see https://flowbite.com/docs/components/dropdowns/
  */
 class DropdownComponent extends BaseComponent {
     constructor() {
         super(...arguments);
+        this.dropdown = viewChild.required('dropdown');
+        this.button = viewChild.required('button');
         /**
          * Service injected used to generate class
          */
@@ -306,27 +344,23 @@ class DropdownComponent extends BaseComponent {
          *
          * @default Dropdown
          */
-        this.label = model('Dropdown');
+        this.label = model(inject(FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE));
         /**
          * Set if the dropdown is open
          *
          * @default false
          */
-        this.isOpen = model(false);
+        this.isOpen = model(inject(FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE));
         /**
          * Set the dropdown position
          *
          * @default bottom-center
          */
-        this.position = model('bottom-center');
+        this.position = model(inject(FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE));
         /**
          * Set the custom style for this dropdown
          */
-        this.customStyle = model({});
-        //#endregion
-        this.x = 0;
-        this.y = 0;
-        this.width = 0;
+        this.customStyle = model(inject(FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE));
     }
     //#endregion
     //#region BaseComponent implementation
@@ -341,64 +375,29 @@ class DropdownComponent extends BaseComponent {
     init() {
         this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'chevron-down', this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_DOWN_SVG_ICON));
     }
-    verify() {
-        if (this.dropdownItemChildren().length === 0) {
-            throw new Error('No DropdownItemComponent available');
-        }
-    }
+    //#endregion
     /**
      * Toggle dropdown isOpen
      */
     toggle() {
         this.isOpen.set(!this.isOpen());
     }
-    calculatePosition() {
-        computePosition(this.button.nativeElement, this.dropdown.nativeElement, {
-            placement: this.convertPosition(this.position()),
-            middleware: [offset(8), flip(), shift()],
-        }).then(({ x, y }) => {
-            this.dropdown.nativeElement.style.left = x + 'px';
-            this.dropdown.nativeElement.style.top = y + 'px';
-            this.width = this.button.nativeElement.offsetWidth;
-        });
-    }
-    ngAfterViewInit() {
-        // todo : Fix ERROR ReferenceError: ResizeObserver is not defined
-        // Append when runing command 'pnpm lib:build'
-        autoUpdate(this.button.nativeElement, this.dropdown.nativeElement, () => {
-            if (!this.isOpen())
-                return;
-            this.calculatePosition();
-        });
-    }
     // Onclick outside the dropdown, close it
     clickout(event) {
-        if (!this.dropdown.nativeElement.contains(event.target) &&
+        if (!this.dropdown().nativeElement.contains(event.target) &&
             this.isOpen() &&
-            !this.button.nativeElement.contains(event.target)) {
+            !this.button().nativeElement.contains(event.target)) {
             this.isOpen.set(false);
         }
     }
-    convertPosition(pos) {
-        switch (pos) {
-            case 'top-center':
-                return 'top';
-            case 'bottom-center':
-                return 'bottom';
-            case 'left-center':
-                return 'left';
-            case 'right-center':
-                return 'right';
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.0", type: DropdownComponent, isStandalone: true, selector: "flowbite-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { label: "labelChange", isOpen: "isOpenChange", position: "positionChange", customStyle: "customStyleChange" }, host: { listeners: { "document:click": "clickout($event)" } }, queries: [{ propertyName: "dropdownItemChildren", predicate: DropdownItemComponent, isSignal: true }, { propertyName: "dropdownHeaderChildren", predicate: DropdownHeaderComponent, isSignal: true }, { propertyName: "dropdownDividerChildren", predicate: DropdownDividerComponent, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "button", first: true, predicate: ["button"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.0", type: DropdownComponent, isStandalone: true, selector: "flowbite-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { label: "labelChange", isOpen: "isOpenChange", position: "positionChange", customStyle: "customStyleChange" }, host: { listeners: { "document:click": "clickout($event)" } }, queries: [{ propertyName: "dropdownItemChildren", predicate: DropdownItemComponent, isSignal: true }, { propertyName: "dropdownHeaderChildren", predicate: DropdownHeaderComponent, isSignal: true }, { propertyName: "dropdownDividerChildren", predicate: DropdownDividerComponent, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "button", first: true, predicate: ["button"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <button
       type="button"
-      [ngClass]="contentClasses().dropdownClass"
+      [class]="contentClasses().dropdownClass"
       (click)="toggle()"
       #button>
-      <span [ngClass]="contentClasses().spanClass">
+      <span [class]="contentClasses().spanClass">
         {{ label() }}
         <flowbite-icon
           svgIcon="flowbite-angular:chevron-down"
@@ -406,30 +405,31 @@ class DropdownComponent extends BaseComponent {
       </span>
     </button>
     <div
-      [ngClass]="contentClasses().containerClass"
+      [class]="contentClasses().containerClass"
       #dropdown
-      [style.display]="isOpen() ? 'block' : 'none'">
-      <div [ngClass]="contentClasses().contentClass">
-        <ul [ngClass]="contentClasses().subContentClass">
+      [style.display]="isOpen() ? 'block' : 'none'"
+      [style.minWidth.px]="button.clientWidth">
+      <div [class]="contentClasses().contentClass">
+        <ul [class]="contentClasses().subContentClass">
           <ng-content />
         </ul>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, 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: DropdownComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    imports: [NgClass, IconComponent],
+                    imports: [IconComponent],
                     selector: 'flowbite-dropdown',
                     template: `
     <button
       type="button"
-      [ngClass]="contentClasses().dropdownClass"
+      [class]="contentClasses().dropdownClass"
       (click)="toggle()"
       #button>
-      <span [ngClass]="contentClasses().spanClass">
+      <span [class]="contentClasses().spanClass">
         {{ label() }}
         <flowbite-icon
           svgIcon="flowbite-angular:chevron-down"
@@ -437,11 +437,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
       </span>
     </button>
     <div
-      [ngClass]="contentClasses().containerClass"
+      [class]="contentClasses().containerClass"
       #dropdown
-      [style.display]="isOpen() ? 'block' : 'none'">
-      <div [ngClass]="contentClasses().contentClass">
-        <ul [ngClass]="contentClasses().subContentClass">
+      [style.display]="isOpen() ? 'block' : 'none'"
+      [style.minWidth.px]="button.clientWidth">
+      <div [class]="contentClasses().contentClass">
+        <ul [class]="contentClasses().subContentClass">
           <ng-content />
         </ul>
       </div>
@@ -453,20 +454,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { dropdown: [{
-                type: ViewChild,
-                args: ['dropdown']
-            }], button: [{
-                type: ViewChild,
-                args: ['button']
-            }] } });
+        }] });
 
 /**
  * Default theme for `DropdownComponent`
  */
 const dropdownTheme = createTheme({
     root: {
-        base: '',
+        base: 'relative inline w-fit',
     },
     dropdown: {
         base: 'text-white bg-blue-700 border border-transparent hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 disabled:hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 dark:disabled:hover:bg-blue-600 group flex h-min items-center justify-center p-0.5 text-center font-medium focus:z-10 rounded-lg',
@@ -481,10 +476,10 @@ const dropdownTheme = createTheme({
             disabled: 'hidden',
         },
         placement: {
-            'top-center': '',
-            'bottom-center': '',
-            'left-center': '',
-            'right-center': '',
+            'top-center': 'bottom-full mb-2.5 left-1/2 -translate-x-1/2',
+            'bottom-center': 'top-full mt-2.5 left-1/2 -translate-x-1/2',
+            'left-center': 'left-full ml-2.5 top-1/2 -translate-y-1/2',
+            'right-center': 'right-full mr-2.5 top-1/2 -translate-y-1/2',
         },
     },
     content: {
@@ -529,5 +524,5 @@ const dropdownHeaderTheme = createTheme({
  * Generated bundle index. Do not edit.
  */
 
-export { DropdownComponent, DropdownDividerComponent, DropdownDividerThemeService, DropdownHeaderComponent, DropdownHeaderThemeService, DropdownItemComponent, DropdownItemThemeService, DropdownThemeService, FLOWBITE_DROPDOWN_DIVIDER_THEME_TOKEN, FLOWBITE_DROPDOWN_HEADER_THEME_TOKEN, FLOWBITE_DROPDOWN_ITEM_THEME_TOKEN, FLOWBITE_DROPDOWN_THEME_TOKEN, dropdownDividerTheme, dropdownHeaderTheme, dropdownItemTheme, dropdownTheme };
+export { DropdownComponent, DropdownDividerComponent, DropdownDividerThemeService, DropdownHeaderComponent, DropdownHeaderThemeService, DropdownItemComponent, DropdownItemThemeService, DropdownThemeService, FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_DROPDOWN_DIVIDER_THEME_TOKEN, FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_DROPDOWN_HEADER_THEME_TOKEN, FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE, FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_DROPDOWN_ITEM_THEME_TOKEN, FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE, FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE, FLOWBITE_DROPDOWN_THEME_TOKEN, dropdownDefaultValueProvider, dropdownDividerDefaultValueProvider, dropdownDividerTheme, dropdownHeaderDefaultValueProvider, dropdownHeaderTheme, dropdownItemDefaultValueProvider, dropdownItemTheme, dropdownTheme };
 //# sourceMappingURL=flowbite-angular-dropdown.mjs.map