angular: improvements to date-select

[Galen Charlton]

This bug aggregates various improvements to the Angular date-select component:

    Styling
    -------
    - the widget is now narrower
    - the widget now enables form validation styles; in particular,
      entry of an incorrectly-formatted date is now highlighted
    - the calendar drop-down is now allowed to overflow the containing
      element when expanded, making it easier to embed the date
      selector in other controls
    - the calendar button (and any material icons button that's part of
      an input group) now has the same default font size as main text,
      making the overall date-select look cleaner

    API
    ---
    - add a reset() method
    - hitting enter in the text box can now triggers emitting date
      change events
    - a new onCleared event is emitted if the suer hits enter on an
      empty input
    - onChangeAsYmd() now pads month and day to two digits apiece,
      making the result conform to ISO 8601 and thus more easily
      plugged into queries.
    - adds the following methods to retrieve the current date; these
      are meant to be used via local template references in parent
      templates:

      currentAsYmd()
      currentAsIso()
      currentAsDate()

This is part of a project to prepare for converting some acquisitions interfaces to Angular. Work on this bug was sponsored by MassLNC, Georgia Public Library Service, Indiana State Library, CW MARS, and King County Library System.

[Galen Charlton (gmc)]

Patch(es) for this are available as part of the following branch:

working/collab/gmcharlt/angular-widget-improvements-2019-06
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/collab/gmcharlt/angular-widget-improvements-2019-06

[Jane Sandberg (sandbergja)]

Thanks for this patch, Galen. These are good changes. The container="body" change helped with overflow issues in cases like this:

<ngb-accordion>
  <ngb-panel title="1">
    <ng-template ngbPanelContent>
      <eg-date-select></eg-date-select>
    </ng-template>
  </ngb-panel>
</ngb-accordion>

However, it also seems to have introduced an issue when eg-date-select is embedded in a modal (such as the fmeditor). For example, see Administration > Server Administration > Hard Due Date Changes > New Hard Due Date. Somehow, we need to have the popup attach nearby the input in the DOM in cases like these.

[Galen Charlton (gmc)]

Thanks for the catch, Jane!

It looks like the underlying z-index issue is fixed in ng-bootstrap commit https://github.com/ng-bootstrap/ng-bootstrap/commit/00ee594f81079d56e3e7c47420a004625a4fd668, which is first available in ng-boostrap release 4.1.2.

Updating package.json to use ^4.1.2 for ng-bootstrap did not seem to immediately blow anything up and fixed the issue with embedding the date-picker in the modal. Consequently, I'm inclined to pull further on the string of updating ng-bootstrap, which I was planning to do anyway, rather than trying to play with managing the z-index in eg-date-select.

[Galen Charlton (gmc)]

See bug 1831907

[Galen Charlton (gmc)]

A rebased version of this in available in user/gmcharlt/angular-widget-improvements-2019-07-rebase, which also includes the patch for 1831907. With that, the z-index issue appears to be fixed.

[Bill Erickson (berick)]

Tried a few more tests, still works. Thanks, Galen. Merged to master.