Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit fab0fbb

Browse files
MGREMYMGREMY
committed
feat(navbar): provide injection token for default input value #80 
1 parent 4463716 commit fab0fbb

File tree

8 files changed

+179
-17
lines changed

8 files changed

+179
-17
lines changed

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,16 +99,22 @@ import {
9999
FLOWBITE_NAVBAR_ITEM_THEME_TOKEN,
100100
FLOWBITE_NAVBAR_THEME_TOKEN,
101101
FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN,
102+
navbarBrandDefaultThemeProvider,
102103
navbarBrandTheme,
103104
NavbarBrandThemeService,
105+
navbarContentDefaultValueProvider,
104106
navbarContentTheme,
105107
NavbarContentThemeService,
108+
navbarDefaultValueProvider,
109+
navbarIconButtonDefaultValueProvider,
106110
navbarIconButtonTheme,
107111
NavbarIconButtonThemeService,
112+
navbarItemDefaultValueProvider,
108113
navbarItemTheme,
109114
NavbarItemThemeService,
110115
navbarTheme,
111116
NavbarThemeService,
117+
navbarToggleDefaultValueProvider,
112118
navbarToggleTheme,
113119
NavbarToggleThemeService,
114120
} from 'flowbite-angular/navbar';
@@ -428,6 +434,12 @@ export function initFlowbite(): EnvironmentProviders {
428434
modalHeaderDefaultValueProvider,
429435
modalFooterDefaultValueProvider,
430436
modalBodyDefaultValueProvider,
437+
navbarDefaultValueProvider,
438+
navbarToggleDefaultValueProvider,
439+
navbarItemDefaultValueProvider,
440+
navbarIconButtonDefaultValueProvider,
441+
navbarContentDefaultValueProvider,
442+
navbarBrandDefaultThemeProvider,
431443
]);
432444

433445
return makeEnvironmentProviders([serviceProviders, themeProviders, defaultValueProvider]);

‎libs/flowbite-angular/navbar/index.ts‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,22 @@
1-
export { NavbarComponent } from './navbar.component';
1+
export {
2+
NavbarComponent,
3+
FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE,
4+
FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE,
5+
FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE,
6+
FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE,
7+
FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE,
8+
FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE,
9+
navbarDefaultValueProvider,
10+
} from './navbar.component';
211
export type { NavbarProperties, NavbarClass, NavbarColors, NavbarTheme } from './navbar.theme';
312
export { navbarTheme } from './navbar.theme';
413
export { FLOWBITE_NAVBAR_THEME_TOKEN, NavbarThemeService } from './navbar.theme.service';
514

6-
export { NavbarBrandComponent } from './navbar-brand.component';
15+
export {
16+
NavbarBrandComponent,
17+
FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE,
18+
navbarBrandDefaultThemeProvider,
19+
} from './navbar-brand.component';
720
export type {
821
NavbarBrandProperties,
922
NavbarBrandClass,
@@ -15,7 +28,11 @@ export {
1528
NavbarBrandThemeService,
1629
} from './navbar-brand.theme.service';
1730

18-
export { NavbarContentComponent } from './navbar-content.component';
31+
export {
32+
NavbarContentComponent,
33+
FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE,
34+
navbarContentDefaultValueProvider,
35+
} from './navbar-content.component';
1936
export type {
2037
NavbarContentProperties,
2138
NavbarContentClass,
@@ -27,15 +44,23 @@ export {
2744
NavbarContentThemeService,
2845
} from './navbar-content.theme.service';
2946

30-
export { NavbarItemComponent } from './navbar-item.component';
47+
export {
48+
NavbarItemComponent,
49+
FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
50+
navbarItemDefaultValueProvider,
51+
} from './navbar-item.component';
3152
export type { NabvarItemProperties, NavbarItemClass, NavbarItemTheme } from './navbar-item.theme';
3253
export { navbarItemTheme } from './navbar-item.theme';
3354
export {
3455
FLOWBITE_NAVBAR_ITEM_THEME_TOKEN,
3556
NavbarItemThemeService,
3657
} from './navbar-item.theme.service';
3758

38-
export { NavbarToggleComponent } from './navbar-toggle.component';
59+
export {
60+
NavbarToggleComponent,
61+
FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE,
62+
navbarToggleDefaultValueProvider,
63+
} from './navbar-toggle.component';
3964
export type {
4065
NavbarToggleTheme,
4166
NavbarToggleClass,
@@ -47,7 +72,11 @@ export {
4772
NavbarToggleThemeService,
4873
} from './navbar-toggle.theme.service';
4974

50-
export { NavbarIconButtonComponent } from './navbar-icon-button.component';
75+
export {
76+
NavbarIconButtonComponent,
77+
FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE,
78+
navbarIconButtonDefaultValueProvider,
79+
} from './navbar-icon-button.component';
5180
export type {
5281
NavbarIconButtonProperties,
5382
NavbarIconButtonClass,

‎libs/flowbite-angular/navbar/navbar-brand.component.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,23 @@ import {
1010
ChangeDetectionStrategy,
1111
Component,
1212
inject,
13+
InjectionToken,
14+
makeEnvironmentProviders,
1315
model,
1416
ViewEncapsulation,
1517
} from '@angular/core';
1618

19+
export const FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
20+
DeepPartial<NavbarBrandTheme>
21+
>('FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE');
22+
23+
export const navbarBrandDefaultThemeProvider = makeEnvironmentProviders([
24+
{
25+
provide: FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE,
26+
useValue: {},
27+
},
28+
]);
29+
1730
/**
1831
* @see https://flowbite.com/docs/components/navbar/
1932
*/
@@ -39,7 +52,7 @@ export class NavbarBrandComponent extends BaseComponent<NavbarBrandClass> {
3952
/**
4053
* Set the custom style for this navbar brand
4154
*/
42-
public customStyle = model<DeepPartial<NavbarBrandTheme>>({});
55+
public customStyle = model(inject(FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE));
4356
//#endregion
4457

4558
//#region BaseComponent implementation

‎libs/flowbite-angular/navbar/navbar-content.component.ts‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,23 @@ import {
1212
ChangeDetectionStrategy,
1313
Component,
1414
inject,
15+
InjectionToken,
16+
makeEnvironmentProviders,
1517
model,
1618
ViewEncapsulation,
1719
} from '@angular/core';
1820

21+
export const FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
22+
DeepPartial<NavbarContentTheme>
23+
>('FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE');
24+
25+
export const navbarContentDefaultValueProvider = makeEnvironmentProviders([
26+
{
27+
provide: FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE,
28+
useValue: {},
29+
},
30+
]);
31+
1932
/**
2033
* @see https://flowbite.com/docs/components/navbar/
2134
*/
@@ -48,7 +61,10 @@ export class NavbarContentComponent extends BaseComponent<NavbarContentClass> im
4861
* @default `NavbarComponent`'s color
4962
*/
5063
public color = model<keyof NavbarColors>(this.navbarComponent().color());
51-
public customStyle = model<DeepPartial<NavbarContentTheme>>({});
64+
/**
65+
* Set the custom style for this navbar content
66+
*/
67+
public customStyle = model(inject(FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE));
5268
//#endregion
5369

5470
//#region BaseComponent implementation

‎libs/flowbite-angular/navbar/navbar-icon-button.component.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,23 @@ import {
1111
ChangeDetectionStrategy,
1212
Component,
1313
inject,
14+
InjectionToken,
15+
makeEnvironmentProviders,
1416
model,
1517
ViewEncapsulation,
1618
} from '@angular/core';
1719

20+
export const FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
21+
DeepPartial<NavbarIconButtonTheme>
22+
>('FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE');
23+
24+
export const navbarIconButtonDefaultValueProvider = makeEnvironmentProviders([
25+
{
26+
provide: FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE,
27+
useValue: {},
28+
},
29+
]);
30+
1831
/**
1932
* @see https://flowbite.com/docs/components/navbar/
2033
*/
@@ -53,7 +66,7 @@ export class NavbarIconButtonComponent extends BaseComponent<NavbarIconButtonCla
5366
/**
5467
* Set the custom style for this navbar icon button
5568
*/
56-
public customStyle = model<DeepPartial<NavbarIconButtonTheme>>({});
69+
public customStyle = model(inject(FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE));
5770
//#endregion
5871

5972
//#region BaseComponent implementation

‎libs/flowbite-angular/navbar/navbar-item.component.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,23 @@ import {
1313
ChangeDetectionStrategy,
1414
Component,
1515
inject,
16+
InjectionToken,
17+
makeEnvironmentProviders,
1618
model,
1719
ViewEncapsulation,
1820
} from '@angular/core';
1921

22+
export const FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
23+
DeepPartial<NavbarItemTheme>
24+
>('FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE');
25+
26+
export const navbarItemDefaultValueProvider = makeEnvironmentProviders([
27+
{
28+
provide: FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
29+
useValue: {},
30+
},
31+
]);
32+
2033
/**
2134
* @see https://flowbite.com/docs/components/navbar/
2235
*/
@@ -61,7 +74,7 @@ export class NavbarItemComponent extends BaseComponent<NavbarItemClass> {
6174
/**
6275
* Set the custom style for this navbar item
6376
*/
64-
public customStyle = model<DeepPartial<NavbarItemTheme>>({});
77+
public customStyle = model(inject(FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE));
6578
//#endregion
6679

6780
//#region BaseComponent implementation

‎libs/flowbite-angular/navbar/navbar-toggle.component.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,24 @@ import {
1212
ChangeDetectionStrategy,
1313
Component,
1414
inject,
15+
InjectionToken,
16+
makeEnvironmentProviders,
1517
model,
1618
ViewEncapsulation,
1719
} from '@angular/core';
1820
import { DomSanitizer } from '@angular/platform-browser';
1921

22+
export const FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
23+
DeepPartial<NavbarToggleTheme>
24+
>('FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE');
25+
26+
export const navbarToggleDefaultValueProvider = makeEnvironmentProviders([
27+
{
28+
provide: FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE,
29+
useValue: {},
30+
},
31+
]);
32+
2033
/**
2134
* @see https://flowbite.com/docs/components/navbar/
2235
*/
@@ -57,7 +70,7 @@ export class NavbarToggleComponent extends BaseComponent<NavbarToggleClass> {
5770
/**
5871
* Set the custom style for this navbar toggle
5972
*/
60-
public customStyle = model<DeepPartial<NavbarToggleTheme>>({});
73+
public customStyle = model(inject(FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE));
6174
//#endregion
6275

6376
//#region BaseComponent implementation

‎libs/flowbite-angular/navbar/navbar.component.ts‎

Lines changed: 59 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,64 @@ import {
1313
Component,
1414
contentChild,
1515
inject,
16+
InjectionToken,
17+
makeEnvironmentProviders,
1618
model,
1719
untracked,
1820
ViewEncapsulation,
1921
} from '@angular/core';
2022

23+
export const FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE = new InjectionToken<keyof NavbarColors>(
24+
'FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE'
25+
);
26+
27+
export const FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE = new InjectionToken<boolean>(
28+
'FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE'
29+
);
30+
31+
export const FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE = new InjectionToken<boolean>(
32+
'FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE'
33+
);
34+
35+
export const FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE = new InjectionToken<boolean>(
36+
'FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE'
37+
);
38+
39+
export const FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE = new InjectionToken<boolean>(
40+
'FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE'
41+
);
42+
43+
export const FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
44+
DeepPartial<NavbarTheme>
45+
>('FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE');
46+
47+
export const navbarDefaultValueProvider = makeEnvironmentProviders([
48+
{
49+
provide: FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE,
50+
useValue: 'primary',
51+
},
52+
{
53+
provide: FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE,
54+
useValue: false,
55+
},
56+
{
57+
provide: FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE,
58+
useValue: false,
59+
},
60+
{
61+
provide: FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE,
62+
useValue: false,
63+
},
64+
{
65+
provide: FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE,
66+
useValue: false,
67+
},
68+
{
69+
provide: FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE,
70+
useValue: {},
71+
},
72+
]);
73+
2174
/**
2275
* @see https://flowbite.com/docs/components/navbar/
2376
*/
@@ -53,35 +106,35 @@ export class NavbarComponent extends BaseComponent<NavbarClass> {
53106
*
54107
* @default primary
55108
*/
56-
public color = model<keyof NavbarColors>('primary');
109+
public color = model(inject(FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE));
57110
/**
58111
* Set if the navbar is open
59112
*
60113
* @default false
61114
*/
62-
public isOpen = model<boolean>(false);
115+
public isOpen = model(inject(FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE));
63116
/**
64117
* Set if the navbar is rounded
65118
*
66119
* @default false
67120
*/
68-
public isRounded = model<boolean>(false);
121+
public isRounded = model(inject(FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE));
69122
/**
70123
* Set if the navbar has border
71124
*
72125
* @default false
73126
*/
74-
public hasBorder = model<boolean>(false);
127+
public hasBorder = model(inject(FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE));
75128
/**
76129
* Set if the navbar is fixed
77130
*
78131
* @default false
79132
*/
80-
public isFixed = model<boolean>(false);
133+
public isFixed = model(inject(FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE));
81134
/**
82135
* Set the custom style for this navbar
83136
*/
84-
public customStyle = model<DeepPartial<NavbarTheme>>({});
137+
public customStyle = model(inject(FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE));
85138
//#endregion
86139

87140
//#region BaseComponent implementation

0 commit comments

Comments
 (0)