(REF) crmUi - Support onCrmUiSelect for using select2 as a picklist

[totten]

Overview

Add an Angular directive to enrich the behavior of crm-ui-select - firing an event immediately after selecting a value (on-crm-ui-select).

<input class="form-control pull-right crm-action-menu fa-code"
  crm-ui-select="{placeholder: ts('Tokens'), data: $ctrl.myTokenList, width: '12em', dropdownAutoWidth: true}"
  on-crm-ui-select="$ctrl.insertMyToken(selection)"
  />

It may help to consider an example use-case. The crmMailingToken widget presents a pick-list of available tokens:

After picking a token, it closes the list and executes some code based on the selected value (adding the selected token to the body of the text editor).

However, the crmMailingToken implementation is specific to CiviMail. This patch aims to support message-template-editing for dev/mail#83. The behavior of the widget should be similar, but other key details (like the list of available tokens - and the visual placement of the token widget) can differ.

Before

If you want to implement a select2 pick list, your options are:

• Use crm-mailing-token. But this only supports CiviMail tokens specifically.
• Copy/paste all of crm-mailing-token and then edit in several ways.
• Create a <select> widget with crm-ui-select, ng-model, and ng-change. However, this has problematic behavioral quirks, and it also requires defining a superfluous model-field in the scope (which then has to be reset periodically).

After

One may use the existing crm-ui-select directive and combine it with on-crm-ui-select, as in:

<input class="form-control pull-right crm-action-menu fa-code"
  crm-ui-select="{placeholder: ts('Tokens'), data: $ctrl.myTokenList, width: '12em', dropdownAutoWidth: true}"
  on-crm-ui-select="$ctrl.insertMyToken(selection)"
  />

Comments

For a live example, see the WIP extension msgtplui, e.g. https://github.com/totten/msgtplui/blob/34693479354966381c46f1921ed464ac5c9b94a4/ang/msgtplui/EditContent.html#L8-L14. (Note, though, that this may require other patches. This branch integrates tangential requirements.)

It may make sense at some point to phase-out crmMailingToken, but that is a different scope of work from enhancing crmUiSelect/onCrmUiSelect.

[civibot]

(Standard links)

• If this is your first pull-request for CiviCRM, please browse CONTRIBUTING.md for information about the development and testing processes.
• If you are reviewing this pull-request, you may wish to consult the test sites and the Review Standards (long template, short template).

[totten]

@colemanw This is something we discussed a couple weeks back.

[colemanw]

I'm good with this. Note that a lot of existing UIs could make use of this new directive and ditch the throwaway variable they were using for ng-model.
Api4 Explorer, SearchKit, and the Export UI all have pick lists for things like "add field", "add clause", etc.