feat(ui5-calendar): introduce Year Range Picker

[didip1000]

With this change we introduce the new picker component ui5-yearrange-picker which users can use to quickly navigate through a range of years.

Selecting the header or pressing shift + f4, in the in Year picker, will open the Year Range picker

Demo:

More examples:

[Left] Like in the Year picker, dates before the min-date will not be shown, and dates after the max-date will be disabled
[Right] Year Range picker with primary-calendar-type="Islamic" and secondary-calendar-type="Gregorian"

Fixes: #3200
Fixes: #11011
Fixes: #10867

[unazko]

1. There is a difference in the displayed years when in the year view compared to what it was before and in openui5 calendar. For example the years would now be from 2016 to 2035 whereas before it was from 2015 to 2034 when the current day is 15 of April 2025. That affects the year range view as well for example with the 15 of April we'll receive 1976 to 2135 in the year range view instead of 1935 to 2094.
2. The year range rectangles have smaller width than the same in openui5. Also if a secondary calendar type "Islamic" gets set then we'll have the same amount of displayed rectangles for the years and the year ranges. Then it's clearly visible that the year rectangles are wider than the year range rectangles.

[didip1000]

1. There is a difference in the displayed years when in the year view compared to what it was before and in openui5 calendar. For example the years would now be from 2016 to 2035 whereas before it was from 2015 to 2034 when the current day is 15 of April 2025. That affects the year range view as well for example with the 15 of April we'll receive 1976 to 2135 in the year range view instead of 1935 to 2094.

I changed the "focused date" to be the 10th grid date (in normal year view) instead of the 11th since it is more centered, and we discussed this with the designers that it would be preferable for the focus to be in the upper left of the "center". I believe the date change was caused by that. I will confirm with the designers again if this is correct.

For the year range view, the centered date is the 3rd one always.

2. The year range rectangles have smaller width than the same in openui5. Also if a secondary calendar type "Islamic" gets set then we'll have the same amount of displayed rectangles for the years and the year ranges. Then it's clearly visible that the year rectangles are wider than the year range rectangles.

the rectangles in openui5 aren't according to spec, they text reaches where the border is supposed to be, as for year picker vs year-range-picker, you're right, they seem to be ever so slightly thinner, I will check that.

[vladitasev]

Everything looks great! I didn't test much but from what I did, F4 on year picker does not trigger year range picker (as it says in the commit)

Already has an approval from Vladi :)

[didip1000]

Everything looks great! I didn't test much but from what I did, F4 on year picker does not trigger year range picker (as it says in the commit)

Corrected it to the following:

Selecting the header or pressing shift + f4, in the in Year picker, will open the Year Range picker

Also keep in mind that on mac it's fn + the other keys because the default behaviour of f4 is to search

[ui5-webcomponents-bot]

🎉 This PR is included in version v2.11.0-rc.4 🎉

The release is available on v2.11.0-rc.4

Your semantic-release bot 📦🚀