feat: date-picker #570

marcjulian · 2025-01-26T14:32:10Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our
guidelines: https://github.com/goetzrobin/spartan/blob/main/CONTRIBUTING.md#-commit-message-guidelines
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

Which package are you modifying?

What is the current behavior?

Closes #112

What is the new behavior?

Does this PR introduce a breaking change?

Yes
No

Other information

Implements NG_VALUE_ACCESSOR for Forms/ReactiveForms integration

Implementing BrnFormFieldControl to support FormField results in duplicate injection of HlmDatePickerComponent

…ith a input function * add date picker story * add form/format examples

…ting * style ng-icon instead of svg

marcjulian · 2025-01-28T14:50:58Z

@goetzrobin @ashley-hunter do you have an idea how to support forms via NG_VALUE_ACCESSOR and BrnFormFieldControl for hlm-form-field without NG0200 Circular dependency in DI detected for HlmDatePickerComponent?

When I support both, they are added to the providers array

providers: [
		HLM_DATE_PICKER_VALUE_ACCESSOR,
		{
			provide: BrnFormFieldControl,
			useExisting: HlmDatePickerComponent,
		},
		provideIcons({ lucideCalendar }),
	],

But when I add formControlName to hlm-date-picker when BrnFormFieldControl is implemented the following error is thrown:

main.ts:7 ERROR RuntimeError: NG0200: Circular dependency in DI detected for HlmDatePickerComponent. Find more at https://angular.dev/errors/NG0200
    at throwCyclicDependencyError (chunk-VSQPQBST.js?v=bfac2799:2125:9)
    at getNodeInjectable (chunk-VSQPQBST.js?v=bfac2799:5072:7)
    at searchTokensOnInjector (chunk-VSQPQBST.js?v=bfac2799:5038:12)
    at lookupTokenUsingNodeInjector (chunk-VSQPQBST.js?v=bfac2799:4988:26)
    at getOrCreateInjectable (chunk-VSQPQBST.js?v=bfac2799:4929:19)
    at ɵɵdirectiveInject (chunk-VSQPQBST.js?v=bfac2799:8332:17)
    at ɵɵinject (chunk-VSQPQBST.js?v=bfac2799:2206:59)
    at factory (chunk-VSQPQBST.js?v=bfac2799:3549:23)
    at multiResolve (chunk-VSQPQBST.js?v=bfac2799:17909:17)
    at NodeInjectorFactory.multiProvidersFactoryResolver [as factory] (chunk-VSQPQBST.js?v=bfac2799:17887:10)

libs/ui/date-picker/helm/src/lib/hlm-date-picker.component.ts

ashley-hunter · 2025-01-28T17:26:35Z

@goetzrobin @ashley-hunter do you have an idea how to support forms via NG_VALUE_ACCESSOR and BrnFormFieldControl for hlm-form-field without NG0200 Circular dependency in DI detected for HlmDatePickerComponent?

When I support both, they are added to the providers array

providers: [
		HLM_DATE_PICKER_VALUE_ACCESSOR,
		{
			provide: BrnFormFieldControl,
			useExisting: HlmDatePickerComponent,
		},
		provideIcons({ lucideCalendar }),
	],

But when I add formControlName to hlm-date-picker when BrnFormFieldControl is implemented the following error is thrown:

main.ts:7 ERROR RuntimeError: NG0200: Circular dependency in DI detected for HlmDatePickerComponent. Find more at https://angular.dev/errors/NG0200
    at throwCyclicDependencyError (chunk-VSQPQBST.js?v=bfac2799:2125:9)
    at getNodeInjectable (chunk-VSQPQBST.js?v=bfac2799:5072:7)
    at searchTokensOnInjector (chunk-VSQPQBST.js?v=bfac2799:5038:12)
    at lookupTokenUsingNodeInjector (chunk-VSQPQBST.js?v=bfac2799:4988:26)
    at getOrCreateInjectable (chunk-VSQPQBST.js?v=bfac2799:4929:19)
    at ɵɵdirectiveInject (chunk-VSQPQBST.js?v=bfac2799:8332:17)
    at ɵɵinject (chunk-VSQPQBST.js?v=bfac2799:2206:59)
    at factory (chunk-VSQPQBST.js?v=bfac2799:3549:23)
    at multiResolve (chunk-VSQPQBST.js?v=bfac2799:17909:17)
    at NodeInjectorFactory.multiProvidersFactoryResolver [as factory] (chunk-VSQPQBST.js?v=bfac2799:17887:10)

@goetzrobin @ashley-hunter do you have an idea how to support forms via NG_VALUE_ACCESSOR and BrnFormFieldControl for hlm-form-field without NG0200 Circular dependency in DI detected for HlmDatePickerComponent?

When I support both, they are added to the providers array

providers: [
		HLM_DATE_PICKER_VALUE_ACCESSOR,
		{
			provide: BrnFormFieldControl,
			useExisting: HlmDatePickerComponent,
		},
		provideIcons({ lucideCalendar }),
	],

But when I add formControlName to hlm-date-picker when BrnFormFieldControl is implemented the following error is thrown:

main.ts:7 ERROR RuntimeError: NG0200: Circular dependency in DI detected for HlmDatePickerComponent. Find more at https://angular.dev/errors/NG0200
    at throwCyclicDependencyError (chunk-VSQPQBST.js?v=bfac2799:2125:9)
    at getNodeInjectable (chunk-VSQPQBST.js?v=bfac2799:5072:7)
    at searchTokensOnInjector (chunk-VSQPQBST.js?v=bfac2799:5038:12)
    at lookupTokenUsingNodeInjector (chunk-VSQPQBST.js?v=bfac2799:4988:26)
    at getOrCreateInjectable (chunk-VSQPQBST.js?v=bfac2799:4929:19)
    at ɵɵdirectiveInject (chunk-VSQPQBST.js?v=bfac2799:8332:17)
    at ɵɵinject (chunk-VSQPQBST.js?v=bfac2799:2206:59)
    at factory (chunk-VSQPQBST.js?v=bfac2799:3549:23)
    at multiResolve (chunk-VSQPQBST.js?v=bfac2799:17909:17)
    at NodeInjectorFactory.multiProvidersFactoryResolver [as factory] (chunk-VSQPQBST.js?v=bfac2799:17887:10)

Unfortunately a storm here has taken out my internet connection and I only have a very limited mobile connection. It could be a few days before my connection is restored, but I'll happily look into it as soon as I am able.

marcjulian · 2025-01-29T10:14:08Z

Unfortunately a storm here has taken out my internet connection and I only have a very limited mobile connection. It could be a few days before my connection is restored, but I'll happily look into it as soon as I am able.

No worries! Take care first!

libs/ui/date-picker/helm/src/lib/hlm-date-format.token.ts

MerlinMoos · 2025-01-30T10:58:58Z

Hey, just one question. Is there a option to provide a date range picker as well like in shadcn?

marcjulian · 2025-01-30T14:33:56Z

Date range is not yet supported by the calendar component. That need to be added first, before adding the option to the date picker component.

marcjulian · 2025-02-07T09:35:13Z

@goetzrobin @ashley-hunter date picker component is ready for review. It integrates with Forms/ReactiveForms.

One thing thats missing is additional support for FormField via BrnFormFieldControl, this can be added in a follow up PR. Not sure how to provide BrnFormFieldControl together with HLM_DATE_PICKER_VALUE_ACCESSOR. I guess will need to solve it once and can use it for other components too like combobox.

marcjulian added 3 commits January 26, 2025 15:19

feat(date-picker): add hlm-date-picker component

292a69d

feat(date-picker): support ng form with value accessor, format date w…

411fb6c

…ith a input function * add date picker story * add form/format examples

feat(date-picker): update dateFormat function type and default format…

e2a11ac

…ting * style ng-icon instead of svg

marcjulian changed the title ~~feat: wip date-pciker~~ feat: wip date-picker Jan 26, 2025

feat(date-picker): update peerDeps

29ed138

feat(date-picker): remove todo

72e3bf9

marcjulian commented Jan 28, 2025

View reviewed changes

libs/ui/date-picker/helm/src/lib/hlm-date-picker.component.ts Outdated Show resolved Hide resolved

feat(date-picker): define formatDate as global config

18735a7

marcjulian commented Jan 29, 2025

View reviewed changes

libs/ui/date-picker/helm/src/lib/hlm-date-format.token.ts Outdated Show resolved Hide resolved

marcjulian added 4 commits January 30, 2025 15:44

feat(date-picker): change defaultConfig to function and use generic

a2ee0ce

feat(date-picker): rename token file

ae66e71

feat(date-picker): handle null in writeValue from FormControl

438456e

feat(date-picker): add transformDate function to config and as input

ee57126

marcjulian changed the title ~~feat: wip date-picker~~ feat: date-picker Feb 4, 2025

marcjulian marked this pull request as ready for review February 4, 2025 11:17

docs(date-picker): add transformDate config to date-picker page

f1d0559

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: date-picker #570

feat: date-picker #570

marcjulian commented Jan 26, 2025

marcjulian commented Jan 28, 2025

ashley-hunter commented Jan 28, 2025

marcjulian commented Jan 29, 2025

MerlinMoos commented Jan 30, 2025

marcjulian commented Jan 30, 2025

marcjulian commented Feb 7, 2025

feat: date-picker #570

Are you sure you want to change the base?

feat: date-picker #570

Conversation

marcjulian commented Jan 26, 2025

PR Checklist

PR Type

Which package are you modifying?

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

marcjulian commented Jan 28, 2025

ashley-hunter commented Jan 28, 2025

marcjulian commented Jan 29, 2025

MerlinMoos commented Jan 30, 2025

marcjulian commented Jan 30, 2025

marcjulian commented Feb 7, 2025