Add support for x-input type='date'

[depeele]

This enables the use of <x-input type="date"> to activate the native date picker.

To align styling with xel, it includes two x-icon elements that are hidden unless the input type is date. These icons are over-layed on top of the native date controls and set to allow all pointer events to pass to the underlying native buttons:

• the date-picker icon is over-layed on top of the native picker button (-webkit-calendar-picker-indicator);
• the date-clear icon is over-layed on top of the native clear button (-webkit-clear-button) iff the input is empty and the component does not have the no-clear attribute;
• the native buttons are sized to fit beneath the icons and are hidden with opacity:0;
• the native field wrapper (-webkit-datetime-edit-fields-wrapper) is hidden if the input is empty and not-active/focused to allow the xel label to be presented as the placeholder;
• the native spin-controls are currently disabled;

[jarek-foksa]

In my opinion this should be implemented as a separate widget with API simllar to <x-colorselect>. This way we could make the widget much more customizable, for example:

• Opens a system date picker:

  <x-dateselect></x-dateselect>

• Opens a custom date picker in a popover (recommended on desktop):

  <x-dateselect>
    <x-popover>
      <x-datepicker></x-datepicker>
    </x-popover>
  </x-dateselect>

• Opens a custom date picker in a modal dialog (recommended on mobile):

  <x-dateselect>
    <dialog>
      <x-datepicker></x-datepicker>
    </dialog>
  </x-dateselect>

[depeele]

Makes sense.

Since the control does very little above and beyond x-input, it would be nice to inherit from x-input but I don't see any examples of inheritance in the current code base.

In the rest of the code in which I'm using xel, I use higher order components, but I don't see that pattern used here...

What would be the best way to inherit from x-input using the current code base?

[jarek-foksa]

<x-dateselect> should not inherit from <x-input> as it is going to have significantly different API (e.g. no "type", "spellcheck", "minlength" and "maxlength" attributes).

[depeele]

Ok. I've updated the pull to create a new <x-dateselect> component instead of altering <x-input>.

The new component is stand-alone, similar to <x-colorselect> but currently only provides access to the native date selector.

[jarek-foksa]

Thanks!

I have removed support for the "clear" button as it seemed inconsistent with other widgets (it also does not seem to be in macOS or Material HIG).

Also, I was unable to figure out how to change the text selection color of <input type="date">, so I removed any ::selection stylings for now.