YearCalendar: add possibility to unselect date (or reclick a selected date)

[tbee]

Feature proposal

It would be very helpful if a selected date can be programmatically unselected (cleared), or that reclicking an already selected date calls the addDateSelectedListener again.

Use case: selecting dates in YearCalendar by toggling them on and off.

If a date was clicked and added to the selection, you cannot easily unselect it. This is caused by the fact that the just selected date cannot be clicked it again. In order to unselect a date that was just selected, you first need to click another date, then click the first date off, and then you can click the other date back off.

Describe solution expectations

It is a bit weird that the YearCalendar holds a state (last selected date - because it gets highlighted), but that state is not accessible: you cannot set or unset it. As an API it would have sufficed to just provide the addDateSelectedListener and let the user decide if that date should be highlighted or not, by storing the last clicked date himself and set a class accordingly. (But I understand where the highlighting came from.)

IMHO there are two ways forward:

1. Accept that this state is part of the (now expected) API/behavior, by making it accessible. Either by a getter and setter, or a clear method. I expect the latter to be the easiest solution.

2. Step back from having state, which means clicking any date -lastly selected or not- should call the listener again. (And possibly not highlighting the last clicked date.)

Personally I would lean toward 2, because it makes (maintaining) the component simpler.

Additional information

No response

[tbee]

A patch for my current problem would be to just fire the DateSelected event again. But I can't seem to find where that is triggered in the javascript. I see keyboard handling, but am missing mouse click handling. Care to provide a hint?

[tbee]

I could not wait any longer for this issue to be fixed, and I was not able to provide a PR, so I wrote the same logic using pure Flow code. Works fine, but I cannot figure out how you make the parts work either 😁. I've defined parts on my calendar date td-tags, but an exportparts is needed to make them accessible from the outside. I cannot find any exportparts in the whole dom tree when your component is used; how in the world is a part-based CSS rule in my view level CSS picked up by your component, three shadowdoms down? Magic. I've worked around it by using style to set the background color of the td, so all is well, but I'm frikking curious.