feat(design)!: add tree renderMode

[damienwebdev]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/graycoreio/daffodil/blob/develop/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Previously, "hidden" child nodes were entirely removed from the document.

Fixes: N/A

What is the new behavior?

This introduces a new Input on DaffTreeComponent called "renderMode" that accepts "not-in-dom" or "in-dom", with "in-dom" being the default.

• "in-dom" - The nodes are now retained in the document, but are hidden via css.
• "not-in-dom" - The nodes removed from the document. (The old behavior.)

Does this PR introduce a breaking change?

[x] Yes
[ ] No

BREAKING CHANGE: Previously, the now-named renderMode "not-in-dom" was the default. This is no longer the case. If one was rendering immensely large trees and you now notice a significant slow-down, you can change the renderMode like:

<ul daff-tree ... renderMode="not-in-dom">
 ...
</ul>

Which will restore the original behavior.

Other information

[xelaint]

Not all <li> have the hidden class set. Seems like it's only not working for level-1 <li>s

[damienwebdev]

@xelaint

Not all <li> have the hidden class set. Seems like it's only not working for level-1 <li>s

That's by intent.

The idea is that for a tree like:

We currently render:

<li level="1">@daffodil/analytics</li>
<li level="1">analytics-provider-data-layer</li>
<li level="1">@daffodil/auth</li>
<li level="1">@daffodil/authorize.net</li>

We now render:

<li level="1">@daffodil/analytics</li>
<li level="2" class="hidden">Overview</li>
<li level="2" class="hidden">Configuration</li>
<li level="1">analytics-provider-data-layer</li>
<li level="1">@daffodil/auth</li>
<li level="1">@daffodil/authorize.net</li>

The hidden elements remain rendered in the DOM, they just aren't visible.

The "level-1"'s are essentially always visible because they're the "top" level that needs to be interactable to open the tree.