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.

ashley-hunter

Thank you! Great work! Just noticed a few small things, apart from that looks really good!

ashley-hunter · 2025-02-07T21:08:00Z

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

+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(


There appears to be a border and a box shadow in our implementation which differs from the shadcn implementation:

Good catch! I checked the shadcn/ui styles and it looks like the calendar only receives border styles when used in line. I override the border styles for the date-picker calendar, thus only the styles from the popover content are applied.

ashley-hunter · 2025-02-07T21:09:50Z

apps/app/src/app/pages/(components)/components/(date-picker)/date-picker.page.ts

+				nxCode="npx nx g @spartan-ng/cli:ui date-picker"
+				ngCode="ng g @spartan-ng/cli:ui date-picker"


I don't think the CLI ui generator has been updated to support this component.

Yes totally forgot about that! I added it to the generator and updated the primitive dependencies as well

* add calendarClass input to calendar component

ashley-hunter

Looks good to me, thanks!

JoshuaMorley · 2025-02-12T12:01:29Z

Awesome work! I just tried to use the library and noticed this was missing. Great to see it so close to making it in 🥇

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

ashley-hunter requested changes Feb 7, 2025

View reviewed changes

marcjulian added 6 commits February 10, 2025 09:25

feat(date-picker): remove extra border from calendar in date-picker

9af1637

* add calendarClass input to calendar component

feat(date-picker): add date-picker component to ui generator

ab6a287

docs(date-picker): change cli installation name

2b0571f

Merge branch 'main' into feat/date-picker

30b383d

fix(date-picker): lint issues

fab0536

docs(date-picker): link to used components

eb98928

marcjulian requested a review from ashley-hunter February 10, 2025 08:45

ashley-hunter approved these changes Feb 10, 2025

View reviewed changes

goetzrobin merged commit 9512b11 into spartan-ng:main Feb 12, 2025
6 checks passed

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

ashley-hunter left a comment

ashley-hunter Feb 7, 2025

marcjulian Feb 10, 2025

ashley-hunter Feb 7, 2025

marcjulian Feb 10, 2025

ashley-hunter left a comment

JoshuaMorley commented Feb 12, 2025

		nxCode="npx nx g @spartan-ng/cli:ui date-picker"
		ngCode="ng g @spartan-ng/cli:ui date-picker"

feat: date-picker #570

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

ashley-hunter left a comment

Choose a reason for hiding this comment

ashley-hunter Feb 7, 2025

Choose a reason for hiding this comment

marcjulian Feb 10, 2025

Choose a reason for hiding this comment

ashley-hunter Feb 7, 2025

Choose a reason for hiding this comment

marcjulian Feb 10, 2025

Choose a reason for hiding this comment

ashley-hunter left a comment

Choose a reason for hiding this comment

JoshuaMorley commented Feb 12, 2025