Improve form handling

[akc42]

I want to switch more to using the native form handling with native elements embedded but with unique styling. I think I can do this with existing <app-form> element appropriately modified. Slotted content will be the child elements, but I am hoping I can still these using the ::slotted selector

• review existing date elements to see how, when editable it should be integrated within the form
• review area needs for date element
• review documentation on validation and make a plan (as comments to this issue) as how to use it
• define styling I want to use for this
• review ::slotted selector and the sort of styling that can be done with that to see if that is an appropriate way to style form content
• change <app-form> to achieve the above

[akc42]

i am looking at the <calendar-input> element that I built. it uses a <date-format> element to display the date, with a "picker" icon just to the right of it. This is surrounded by a --accent-color box to make it look like an input together with pop up calendar.

In addition, it has a validate() function to validate the date (which is valid unless the date value is 0) and fires a value changed event (and has a value property).

So all in all - I think its not necessary to change much to just make it an acceptable element for form to include in its check of elements.

NOTE: there is an input type = date, but it doesn't support time (as far as I can see) I may need to review aria needs

[akc42]

As for styling
Forms will be white (not currently but that has to change).
inputs go through transitions

• initial a very light grep background
  -gets focus for the first time - white background
  -looses focus is invalid - adds a exclamation mark - with white background.
  -has focus and character received and is valid - gets a light blue background if exclamation mark is removed
• has focus and character received and now invalid - white background - exclamation mark remains if was previously there. but is not added if it wasn't there.
  radio buttons
• generally be styled as accent color concentric circles.
• if none have been selected on submission they should all turn red (but unselected) and change as soon as the first one is selected
• check box square-ish with rounded corners but a clear check mark.

-range input

If form is submitted, all invalid inputs are marked (note specifically radio buttons which can only be marked invalid of never selected and required)

NOTE: I am now of the opinion having viewed how others style these things that we need a custom element for each one, styled specifically for football-mobile.

I need to think about namespaces for these custom elements

[akc42]

I want a styled set of elements for the various input types.

[akc42]

The form stuff gets in the way. Basically it can't handler elements embedded in shadow routes. Since I have (from another project) code which knows how to find the stuff, I will continue to use that.