[do not merge] civi-tabset js component

[ufundo]

Overview

Attempt to add a WebComponent tab implementation that can be used in Smarty AND Angular, without any jQuery dependencies.

Comments

It's not working. I've mainly looked at the contact summary, manage events page, and the Campaign Dashboard as updated in #31944

Things that seem to work:

• tab navigation
• counts passed from Smarty
• counts loaded using slightly hacky total=count="'civi-tabset'" route
• lazy loaded tabs

Things that def don't work yet:

• counts from contact_summary afform tabs
• the "you haven't saved the info on this tab" warning
• ajax popups in ajax loaded pages
• icons from afGui tabs [ I don't understand where these are stored in the afform markup currently ]
• the afGui stuff from FormBuilder - Now you can make Tab Sets 🎉 #31944
• the tag picker is broken (I guess it requires some JS that targets the tab id in some way?)

Technical Details

The tab implementation was originally inspired by https://daverupert.com/2021/10/native-html-tabs/

The aim is to be as-close-as-possible to native HTML markup - ie like <details><summary> but for tabs. In practice this is complicated by more complex stuff we have around tabs like counts, and lazy loaded ajax content. (The latter was done with a second new component, "civi-snippet")

The idea behind using

in the markup is to degrades gracefully. If the JS doesn't load you will still get a basically navigable page (with collapsibles for each tab).

[civibot]

🤖 Thank you for contributing to CiviCRM! ❤️ We will need to test and review this PR. 👷

Introduction for new contributors...

• If this is your first PR, an admin will greenlight automated testing with the command ok to test or add to whitelist.
• A series of tests will automatically run. You can see the results at the bottom of this page (if there are any problems, it will include a link to see what went wrong).
• A demo site will be built where anyone can try out a version of CiviCRM that includes your changes.
• If this process needs to be repeated, an admin will issue the command test this please to rerun tests and build a new demo site.
• Before this PR can be merged, it needs to be reviewed. Please keep in mind that reviewers are volunteers, and their response time can vary from a few hours to a few weeks depending on their availability and their knowledge of this particular part of CiviCRM.
• A great way to speed up this process is to "trade reviews" with someone - find an open PR that you feel able to review, and leave a comment like "I'm reviewing this now, could you please review mine?" (include a link to yours). You don't have to wait for a response to get started (and you don't have to stop at one!) the more you review, the faster this process goes for everyone 😄
• To ensure that you are credited properly in the final release notes, please add yourself to contributor-key.yml
• For more information about contributing, see CONTRIBUTING.md.

Quick links for reviewers...

• ➡️ PR Demo site (can be rebuilt with the command test this please).
• 📖 Review standards
• 🗒️ Review template (brief or verbose)

➡️ Online demo of this PR 🔗

[ufundo]

Weird - I can't access CiviCampaign on the test site. The extension is enabled but not showing in Navigation and if I use direct link http://core-32038-7povl.test-1.civicrm.org:8003/civicrm/campaign?reset=1 I get access denied 🤔

[vingle]

I really like the direction of this - a non-JS fallback that's functional is lovely. Also to do, I think, I'm not getting keyboard controls on the events config tab I tried.

Sidenote, for some reason, I need to add display: flex; flex-direction: column; to civi-tabset.ui-tabs to get the border to show properly. Perhaps components like <civi-tabset> don't behave entirely the same as divs. But at least then it's relatively simple to add a css modifier like crm-horizontal-tabs to make side tabs.