[Enhancement] Modify date component to contain calendar icon

[NillerW]

• [x] I have written a good issue

Describe the enhancement

The Kirby input-field of type date should support an icon.

This will enable the to-be-implemented functionality of selecting date by clicking on the icon.

Describe the solution you'd like

The input-field should allow an icon inside the date input.

• [x] Icon should be placed to the right-most side, such that it aligns with the rest of form-field affix implementations.
• [x] Icon should by default be a calendar icon
• [ ] It should be possible to change the default icon Moved out of scope
• [x] Icon should be clickable to allow the browsers built-in date picker (#3235)
• [ ] Must work with inputmask plugin
  • We suggest to remove the inputmask directive from the type=date input. There are quite a few bugs around inputmask and a more robust solution could be to remove the native calendar icon and overlay a kirby calendar icon

Tasks (refinement 6/12 2023)

• [x] Decision: Utilize affix vs. new, but similar solution
• [ ] Prevent use of prefix with type="date" - or handle it properly
• [ ] Position custom icon on top of browser's icon
  • [x] Handle padding: If type="date" then use only initial/default padding (do not add width of slotted element to padding)
  • [x] Use pointer-events: none
  • [x] Use default background color to cover browser's icon - other theme colors than default is out of scope
• [x] Handle interaction states (hover and focus) for default theme color
• [ ] May need further refinement: Decide what to do with inputmask

Are there any additional context?

This is to enable the creation of a date range component.

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Refinement

• [x] Request that the issue is UX refined; do not proceed until this is done.
• [x] Request that the issue is tech refined; do not proceed until this is done.

Implementation

The contributor who wants to implement this issue should:

• [ ] Make sure you have read: "Before you get coding".
• [ ] Signal to others you are working on the issue by assigning yourself.
• [ ] Create a branch from the develop branch following our branch naming convention.
• [ ] Publish a WIP implementation to Github as a draft PR and ask for feedback.
• [ ] Make sure you have implemented tests following the guidelines in: "The good: Test".
• [ ] Update the cookbook with examples and showcases.

Review

Once the issue has been implemented and is ready for review:

• [ ] Do a self-review.
• [ ] Create a pull-request. If you created a draft PR during implementation you can just mark that as "ready for review".

---

(fix the date mask issue for dateInput - not allowing affix)

[jkaltoft]

Just-before-Christmas status

Screenshots and screen recordings

• Firefox Nightly v122
• Firefox v120
• Google Chrome Canary v122
• Google Chrome v120
• Microsoft Edge Dev v121 (language set to danish on OS level)
• Safari iOS 17.0 iPhone 15 Pro
• Safari Technology Preview v17.4
• Safari v17.1.2

Firefox Nightly v122

https://github.com/kirbydesign/designsystem/assets/150451/f4fed1dc-9b0f-4987-ad7e-814ddddbd8b3

Firefox v120

https://github.com/kirbydesign/designsystem/assets/150451/0a0593b1-290f-409f-a513-1e318eb18076

Google Chrome Canary v122

https://github.com/kirbydesign/designsystem/assets/150451/146b1f20-7385-43da-a9ec-b74041240291

Google Chrome v120

https://github.com/kirbydesign/designsystem/assets/150451/315fa526-5179-482d-92f2-ab1c920e6ec2

Microsoft Edge Dev v121

Language set to danish on OS level

https://github.com/kirbydesign/designsystem/assets/150451/95af7205-c328-45a1-9f02-d10d717b142b

Safari iOS 17.0 iPhone 15 Pro (Simulator)

https://github.com/kirbydesign/designsystem/assets/150451/45234fb8-4fff-4189-b9a0-714e25e490a9





Safari Technology Preview v17.4

https://github.com/kirbydesign/designsystem/assets/150451/28dd1047-e41c-48a5-8c7b-36a6bea640d9

Safari v17.1.2

https://github.com/kirbydesign/designsystem/assets/150451/21b8ee65-6355-4d8d-afd1-3e185e6ef3bb

[jkaltoft]

@jakobe @NillerW

Regarding the requirement "It should be possible to change the default icon".

What is the use case for changing the icon for the date picker to something other than the calendar icon? I talked to @RasmusKjeldgaard and @henrikvoetmand about this and we couldn't figure out why this should be possible.

I may be missing some context. Can you elaborate on this?

[NillerW]

I don't recall if there was a specific use-case - I believe there wasn't and currently isn't.

It was more to have the freedom to change it, should the need arise. I am all for, "then let's use the same icon everywhere", but that's hardly ever the case.

I could see scenarios where a calendar icon could be filled with another icon, like birth, death, payday etc. simply for user experience.

It's up to @henrikvoetmand

Obviously it could be added later, but might be way easier and cheaper to just do it now while you're at it.