feat: date picker polishing

[marcjulian]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our
  guidelines: https://github.com/spartan-ng/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?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

Which package are you modifying?

Primitives

• accordion
• alert
• alert-dialog
• aspect-ratio
• avatar
• badge
• breadcrumb
• button
• calendar
• card
• carousel
• checkbox
• collapsible
• combobox
• command
• context-menu
• data-table
• date-picker
• dialog
• dropdown-menu
• form-field
• hover-card
• icon
• input
• input-otp
• label
• menubar
• navigation-menu
• pagination
• popover
• progress
• radio-group
• scroll-area
• select
• separator
• sheet
• skeleton
• slider
• sonner
• spinner
• switch
• table
• tabs
• textarea
• toggle
• toggle-group
• tooltip
• typography

Others

• trpc
• nx
• repo
• cli

What is the current behavior?

What is the new behavior?

Components

• add buttonId input to connect a label to the button
• removed text-muted-foreground from the placeholder text, following shadcn/ui styles
• use chevron down icon for multi picker too and use same styles for multi picker button

Docs

• add label to all examples and connect them to the date-picker button
• remove additional preview styles from examples
• update form example layouts with label
• add new date and time picker example using <input type="time" /> (datepicker: Extend DatePicker to Support Time-Only Selection in Spartan-NG #707)
• add label to examples and remove unused FormsModule

Does this PR introduce a breaking change?

• Yes
• No

Changing the multi picker icon to chevron down to have the same styles as the normal date-picker.

Other information

[MerlinMoos]

Hey @marcjulian im not sure why we are ignoring the null value in the writeValue method, we should write also null, because the writeValue is also called, when you update a value via formcontrol. What do you think?

[marcjulian]

@MerlinMoos do you mean this part?

spartan/libs/helm/date-picker/src/lib/hlm-date-picker.ts

Lines 136 to 142 in 20c315e

	/** CONROL VALUE ACCESSOR */
	writeValue(value: T | null): void {
	// optional FormControl is initialized with null value
	if (value === null) return;
	this.date.set(this.transformDate()(value));
	}

The current type for the date is either T | undefined, I didn't add null to the type. But I guess we should handle the value null, rather than just skipping the write value.

spartan/libs/helm/date-picker/src/lib/hlm-date-picker.ts

Line 94 in 20c315e

public readonly date = model<T>();

Should we update the date to or should we set the date to undefined when writeValue is called with null value? What are your thoughts?

public readonly date = model<T | null>();

One more thing, should the null value be part of the transformDate function as well? (date: T | null) => T | null, too allow the user to also handle null values during transform?

[MerlinMoos]

Hey, I made the changes in my pr for the date range picker, we just should merge your polishing and I resolved the writeValue issue and the Model as a binding, this is rasing to many change events