Let's create a custom date picker component in Angular!
Here are all prerequisites:
Functionality wise:
Needs to support both picking a single date, as well as being able to select a date range, like this  <gsd-datepicker [rangeMode]="true"></gsd-datepicker>
In single date mode, the calendar will close after selecting a date. In date range mode, the calendar stays open until the user confirms the date range with the save button
It should support min and max dates - so a user should not be able to select anything before the min date, and nothing past the max date  <gsd-datepicker [minDate]="minDate" [maxDate]="maxDate"></gsd-datepicker>
It should also work if only minDate or maxDate is used
There should be a reset button which resets the selection back to the previous one
There should be a save button as well
It needs to support ReactiveForms, NgModel as well as work standalone


Coding wise:
Don't use the old *ngIf="showCalendar" syntax, instead use the new @if(showCalendar) {}
Don't use the old @Input() rangeMode: boolean = false, instead use the newer public rangeMode = input<boolean>(false), and keep in mind this turns it into a signal.
Same goes for @Output, use public xxx = output() instead..
Make sure to set scope properly on everything, so public/protected/private.
The selector of the component should be "gsd-datepicker"
The name of the component should be DatepickerComponent

UX / UI wise:
In the input field, dates should be formatted as dd-mm-yyyy
Within the input field there should be a calendar on the left
Within the input field there should be a downward facing chevron on the right.
When the input field is clicked, the datepicker should open below. The chevron icon should change to a upward facing chevron.
When the datepicker is closed, the chevron should face down again.

Regarding the actual datepicker:
There needs to be a left sidebar which contains preset time range buttons in a vertical list: Today, Yesterday, Last week, Last 7 days, This month, Last 30 days, Custom Range
Custom range gets automatically selected when a user starts creating their own custom range in the calendar. Or if they click custom range, it should clear the selection

On the right is the calendar view:
It should display < {Month} {Year} > . Clicking on {Month} or {Year} should show a dropdown, which when clicked, allows the user to select the month / year from a list.
The navigation arrows should only be enabled if the previous/next month is available (based on minDate and maxDate)
The values in the Month and Year dropdown should also be dynamic and based on minDate / maxDate

It should use a Standard 7-column layout (Mo, Tu, We, Th, Fr, Sa, Su) with 6 rows.
Dates that are either not in this month or in the weekend should be light gray text color, otherwise black.
The current day should be a blue text color
Both selected dates should be prominently highlighted 
Additionally a light blue selection should cover the selected period. This effect should show on hover, so while hovering over dates it should be visible what the date range is

In the footer of the modal are three buttons:
Aligned to the left is a Reset button
Aligned to the right is a Cancel and a Save button