Afform - Easier layout creation with predefined container styles and built-in title

[colemanw]

Overview

This makes layouts easier to make, by adding predefined "Panel Pane" and "Collapsible" styles which can be applied to any container element. It also makes container titles easier to work with, and fixes some issues with saving blocks.

Before

No predefined style for creating a dashboard dashlet or collapsible fieldset.

After

Any container can be given a title and styled as a panel pane and/or collapsible:

This gives a nice-looking dashboard:

[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).

[colemanw]

@eileenmcnaughton to avoid merge-conflicts I included the commit from #22963 in this PR, but we should merge that one first and I can rebase it out of this.

[eileenmcnaughton]

I had this loading when documenting here - https://lab.civicrm.org/documentation/docs/user-en/-/merge_requests/549/diffs - so it worked

One weird thing I noticed is how the label looks when the style is inline

With the pr

Without - note I didn't re-configure the afform - afform content below

<af-form ctrl="afform">
  <af-entity data="{source_contact_id: 'user_contact_id', activity_type_id: '2', status_id: '1'}" type="Activity" name="Activity1" label="Schedule call" actions="{create: true, update: true}" security="RBAC" />
  <fieldset af-fieldset="Activity1">
    <div class="af-markup" style="background-color: #e1e4f4; border: 1px outset #000000">
      
      
      <p><strong>Example of adding text content</strong></p>

    
    
    </div>
    <div class="af-container af-collapsible af-container-style-pane af-layout-cols" af-title="My container ttit" style="background-color: #f7d4d4; border: 1px groove #000000">
      <af-field name="assignee_contact_id" />
      <af-field name="target_contact_id" defn="{input_type: 'Select', input_attrs: {}}" />
      <af-field name="subject" defn="{input_attrs: {placeholder: 'kkkd'}}" />
    </div>
    <af-field name="details" />
  </fieldset>
  <button class="af-button btn btn-primary" crm-icon="fa-check" ng-click="afform.submit()">Submit</button>
</af-form>

Also - in greenwitch theme - I found it hard to tell which of the layout options is selected - the grey vs grey wasn't clear to me (that is probably pr-exisiting)

[colemanw]

Thanks @eileenmcnaughton I've rebased this PR now that #22963 is merged and also fixed the titles for inline/column layouts.

[eileenmcnaughton]

OK - that looks better!