SohoPopupMenu: Missing a way to do multiselectable sections

[tmcconechy]

Describe the bug When working in EP its possible to do this...

    <button id="partially-checkable-menu-2" class="btn-menu">
      <svg class="icon" focusable="false" aria-hidden="true" role="presenation">
        <use href="#icon-checkbox"></use>
      </svg>
      <span>Another Partially Selectable Example</span>
    </button>
    <ul class="popupmenu">
      <li class="separator multi-selectable-section"></li>
      <li class="heading">Type</li>
      <li class="is-multiselectable is-checked"><a href="#">Table</a></li>
      <li class="is-multiselectable is-checked"><a href="#">View</a></li>
      <li class="is-multiselectable"><a href="#">Materialized View</a></li>
      <li class="separator single-selectable-section"></li>
      <li class="heading">Items with Existing Metadata</li>
      <li class="is-selectable is-checked"><a href="#">Show only These Items</a></li>
      <li class="is-selectable"><a href="#">Hide These Items</a></li>
      <li class="is-selectable"><a href="#">Show All Items</a></li>
      <li class="separator"></li>
      <li><a href="#">Reset Filter</a></li>
    </ul>

And have a multiselect followed by a single select at the same level. But this does not work in NG because its missing

<li soho-popupmenu-separator multipleSelectableSection="true"></li>

To Reproduce Steps to reproduce the behavior:

1. Edit src/app/popupmenu/popupmenu.demo.html
2. Change it to

    <ul soho-popupmenu id="action-popupmenu">
      <li soho-popupmenu-separator multipleSelectableSection="true"></li>
      <li soho-popupmenu-heading>Type</li>
      <li soho-popupmenu-item [isChecked]="options.autoScale"><a>Table</a></li>
      <li soho-popupmenu-item [isChecked]="options.showAxis"><a>View</a></li>
      <li soho-popupmenu-item [isChecked]="options.autoRefresh"><a>Materialized View</a></li>
      <li soho-popupmenu-separator singleSelectableSection="true"></li>
      <li soho-popupmenu-heading>Items with Existing Metadata</li>
      <li soho-popupmenu-item isChecked="true" isSelectable="true"><a href="#">Show only These Items</a></li>
      <li soho-popupmenu-item isSelectable="true"><a href="#">Hide These Items</a></li>
      <li soho-popupmenu-item isSelectable="true"><a href="#">Show All Items</a></li>
      <li class="separator"></li>
      <li><a href="#">Reset Filter</a></li>
    </ul>

3. Run http://localhost:4200/ids-enterprise-ng-demo/popupmenu
4. See error

Expected behavior Need to add a multipleSelectableSection that works similar to singleSelectableSection

Additional context See working EP example https://github.com/infor-design/enterprise/pull/5437 Made this instead of https://github.com/infor-design/enterprise/issues/5432

[tmcconechy]

A workaround is to use a mix and use the non NG code for the multi sections but unsure if anything would be missing.

    <ul soho-popupmenu id="action-popupmenu">
      <li class="separator multi-selectable-section"></li>
      <li class="heading">Type</li>
      <li class="is-multiselectable is-checked"><a href="#">Table</a></li>
      <li class="is-multiselectable is-checked"><a href="#">View</a></li>
      <li class="is-multiselectable"><a href="#">Materialized View</a></li>
      <li soho-popupmenu-separator singleSelectableSection="true"></li>
      <li soho-popupmenu-heading>Items with Existing Metadata</li>
      <li soho-popupmenu-item isChecked="true" isSelectable="true"><a href="#">Show only These Items</a></li>
      <li soho-popupmenu-item isSelectable="true"><a href="#">Hide These Items</a></li>
      <li soho-popupmenu-item isSelectable="true"><a href="#">Show All Items</a></li>
      <li class="separator"></li>
      <li soho-popupmenu-heading>Other</li>
      <li><a href="#">Reset Filter</a></li>
    </ul>

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[github-actions[bot]]

This issue was closed because it has been inactive for 14 days since being marked as stale.