feat(accordion): provide injection token for default input value #80

libs/flowbite-angular/accordion/accordion-content.component.ts

@@ -11,10 +11,23 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_ACCORDION_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<AccordionContentTheme>
+>('FLOWBITE_ACCORDION_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const accordionContentDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_ACCORDION_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/accordion/
  */
@@ -50,7 +63,7 @@ export class AccordionContentComponent extends BaseComponent<AccordionContentCla
   /**
    * Set the custom style for this accordion content
    */
-  public customStyle = model<DeepPartial<AccordionContentTheme>>({});
+  public customStyle = model(inject(FLOWBITE_ACCORDION_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation

libs/flowbite-angular/accordion/accordion-panel.component.ts

@@ -14,11 +14,32 @@ import {
   Component,
   contentChild,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   untracked,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_ACCORDION_PANEL_IS_OPEN_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_ACCORDION_IS_OPEN_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_ACCORDION_PANEL_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<AccordionPanelTheme>
+>('FLOWBITE_ACCORDION_PANEL_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const accordionPanelDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_ACCORDION_PANEL_IS_OPEN_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_ACCORDION_PANEL_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/accordion/
  */
@@ -60,11 +81,11 @@ export class AccordionPanelComponent extends BaseComponent<AccordionPanelClass>
    *
    * @default false
    */
-  public isOpen = model<boolean>(false);
+  public isOpen = model(inject(FLOWBITE_ACCORDION_PANEL_IS_OPEN_DEFAULT_VALUE));
   /**
    * Set the custom style for this accordion panel
    */
-  public customStyle = model<DeepPartial<AccordionPanelTheme>>({});
+  public customStyle = model(inject(FLOWBITE_ACCORDION_PANEL_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation

libs/flowbite-angular/accordion/accordion-title.component.ts

@@ -14,11 +14,24 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
+export const FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<AccordionTitleTheme>
+>('FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const accordionTitleDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/accordion/
  */
@@ -69,7 +82,7 @@ export class AccordionTitleComponent extends BaseComponent<AccordionTitleClass>
   /**
    * Set the custom style for this accordion title
    */
-  public customStyle = model<DeepPartial<AccordionTitleTheme>>({});
+  public customStyle = model(inject(FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation

libs/flowbite-angular/accordion/accordion.component.ts

@@ -11,10 +11,47 @@ import {
   Component,
   contentChildren,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_ACCORDION_IS_ALWAYS_OPEN_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_ACCORDION_IS_ALWAYS_OPEN'
+);
+
+export const FLOWBITE_ACCORDION_COLOR_DEFAULT_VALUE = new InjectionToken<keyof AccordionColors>(
+  'FLOWBITE_ACCORDION_COLOR_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_ACCORDION_IS_FLUSH_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_ACCORDION_IS_FLUSH_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_ACCORDION_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<AccordionTheme>
+>('FLOWBITEèACCORDION_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const accordionDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_ACCORDION_IS_ALWAYS_OPEN_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_ACCORDION_COLOR_DEFAULT_VALUE,
+    useValue: 'primary',
+  },
+  {
+    provide: FLOWBITE_ACCORDION_IS_FLUSH_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_ACCORDION_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/accordion/
  */
@@ -42,23 +79,25 @@ export class AccordionComponent extends BaseComponent<AccordionClass> {
    *
    * @default false
    */
-  public isAlwaysOpen = model<boolean>(false);
+  public isAlwaysOpen = model(inject(FLOWBITE_ACCORDION_IS_ALWAYS_OPEN_DEFAULT_VALUE));
   /**
    * Set the accordion color and every child default color
    *
    * @default primary
    */
-  public color = model<keyof AccordionColors>('primary');
+  public color = model(inject(FLOWBITE_ACCORDION_COLOR_DEFAULT_VALUE));
   /**
    * Set the accordion as flush or not
    *
    * @default false
    */
-  public isFlush = model<boolean>(false);
+  public isFlush = model(inject(FLOWBITE_ACCORDION_IS_FLUSH_DEFAULT_VALUE));
   /**
    * Set the custom style for this accordion
    */
-  public customStyle = model<DeepPartial<AccordionTheme>>({});
+  public customStyle = model<DeepPartial<AccordionTheme>>(
+    inject(FLOWBITE_ACCORDION_CUSTOM_STYLE_DEFAULT_VALUE)
+  );
   //#endregion
 
   //#region BaseComponent implementation

libs/flowbite-angular/accordion/index.ts

@@ -1,4 +1,11 @@
-export { AccordionComponent } from './accordion.component';
+export {
+  AccordionComponent,
+  FLOWBITE_ACCORDION_IS_ALWAYS_OPEN_DEFAULT_VALUE,
+  FLOWBITE_ACCORDION_COLOR_DEFAULT_VALUE,
+  FLOWBITE_ACCORDION_CUSTOM_STYLE_DEFAULT_VALUE,
+  FLOWBITE_ACCORDION_IS_FLUSH_DEFAULT_VALUE,
+  accordionDefaultValueProvider,
+} from './accordion.component';
 export type {
   AccordionProperties,
   AccordionClass,
@@ -8,7 +15,11 @@ export type {
 export { accordionTheme } from './accordion.theme';
 export { AccordionThemeService, FLOWBITE_ACCORDION_THEME_TOKEN } from './accordion.theme.service';
 
-export { AccordionContentComponent } from './accordion-content.component';
+export {
+  AccordionContentComponent,
+  FLOWBITE_ACCORDION_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE,
+  accordionContentDefaultValueProvider,
+} from './accordion-content.component';
 export type {
   AccordionContentProperties,
   AccordionContentClass,
@@ -20,7 +31,12 @@ export {
   FLOWBITE_ACCORDION_CONTENT_THEME_TOKEN,
 } from './accordion-content.theme.service';
 
-export { AccordionPanelComponent } from './accordion-panel.component';
+export {
+  AccordionPanelComponent,
+  FLOWBITE_ACCORDION_PANEL_CUSTOM_STYLE_DEFAULT_VALUE,
+  FLOWBITE_ACCORDION_PANEL_IS_OPEN_DEFAULT_VALUE,
+  accordionPanelDefaultValueProvider,
+} from './accordion-panel.component';
 export type {
   AccordionPanelProperties,
   AccordionPanelClass,
@@ -32,7 +48,11 @@ export {
   FLOWBITE_ACCORDION_PANEL_THEME_TOKEN,
 } from './accordion-panel.theme.service';
 
-export { AccordionTitleComponent } from './accordion-title.component';
+export {
+  AccordionTitleComponent,
+  FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE,
+  accordionTitleDefaultValueProvider,
+} from './accordion-title.component';
 export type {
   AccordionTitleProperties,
   AccordionTitleTheme,

libs/flowbite-angular/core/flowbite.theme.init.ts

@@ -1,10 +1,14 @@
 import {
+  accordionContentDefaultValueProvider,
   accordionContentTheme,
   AccordionContentThemeService,
+  accordionDefaultValueProvider,
+  accordionPanelDefaultValueProvider,
   accordionPanelTheme,
   AccordionPanelThemeService,
   accordionTheme,
   AccordionThemeService,
+  accordionTitleDefaultValueProvider,
   accordionTitleTheme,
   AccordionTitleThemeService,
   FLOWBITE_ACCORDION_CONTENT_THEME_TOKEN,
@@ -381,5 +385,12 @@ export function initFlowbite(): EnvironmentProviders {
     },
   ]);
 
-  return makeEnvironmentProviders([serviceProviders, themeProviders]);
+  const defaultValueProvider = makeEnvironmentProviders([
+    accordionDefaultValueProvider,
+    accordionPanelDefaultValueProvider,
+    accordionTitleDefaultValueProvider,
+    accordionContentDefaultValueProvider,
+  ]);
+
+  return makeEnvironmentProviders([serviceProviders, themeProviders, defaultValueProvider]);
 }

libs/flowbite-angular/modal/modal.component.ts

@@ -182,7 +182,6 @@ export class ModalComponent extends BaseComponent<ModalClass> implements OnDestr
   }
 
   onKeydownHandler(event: KeyboardEvent) {
-    console.log('hello');
     if (event.key === 'Escape') {
       this.close();
     }

libs/flowbite-angular/project.json

@@ -43,7 +43,6 @@
           "main",
           "next",
           "next-major",
-          "+([0-9])?(.{+([0-9]),x}).x",
           {
             "name": "beta",
             "prerelease": true

libs/flowbite-angular/sidebar/sidebar-toggle.component.ts

@@ -54,7 +54,7 @@ export class SidebarToggleComponent extends BaseComponent<SidebarToggleClass> im
    *
    * @default The injected `SidebarComponent`
    */
-  public readonly sidebarComponent = model<SidebarComponent>(inject(SidebarComponent));
+  public readonly sidebarComponent = model(inject(SidebarComponent));
 
   //#region properties
   /**