Option to change checkbox behaviour in tree with selectionMode="ancestors"

[moosetraveller]

Description

At the moment, when using a tree with selectionMode="anchestors", I cannot add action buttons to a calcite-tree-item and, since everything is within a label, it's a pain to format the item.

Ways to solve this:

• separate the checkbox from the rest of the item
• having a selectionMode="none" so developers can add their own checkboxes (suggested here: Enhancement: [calcite-tree] add selection-mode "none" #3121)
• add a slot for action buttons which are aligned to the right

Workarounds

Use Event.stopPropagation() in action button's click event handler to stop event propagation. (not yet tested)

Acceptance Criteria

see description

Relevant Info

Which Component

Tree

Example Use Case

I would like to provide actions to the user (for example: zoom to layers extent, show metadata in a dialog and so on). In my workflow, a user selects data for a geoprocessing service and would like to have a peek on the data or read the metadata before continuing.

[moosetraveller]

Workaround

Here is a workaround to use buttons inside the tree:

<calcite-tree selection-mode="ancestors" lines>
    <calcite-tree-item *ngFor="let ds of datasets;">
        {{ds.label}}
        <calcite-tree slot="children">
            <div *ngFor="let data of ds.data;" style="display: flex;">
                <calcite-tree-item [attr.value]="data.id" style="flex-grow: 5; margin-left: 0.25rem;">
                    {{data.label}}
                </calcite-tree-item>
                <!-- "focus border" of the buttons will be wrong -->
                <calcite-button (click)="zoomTo(data.id)" style="margin-left: 0.25rem;" color="neutral" 
                                 icon-start="layer-zoom-to" appearance="transparent"></calcite-button> 
                <calcite-button (click)="showInfo(data.id)" style="margin-left: 0.25rem;" color="neutral" 
                                 icon-start="information" appearance="transparent"></calcite-button>
            </div>
        </calcite-tree>
    </calcite-tree-item>
</calcite-tree>

// _tree is a reference to the tree element instance (HTMLCalciteTreeElement)
_tree.addEventListener('calciteTreeSelect', (event: any) => {

  let selection = event.detail.selected.map((selection: HTMLCalciteTreeItemElement) => {
    return selection.getAttribute("value");
  })
  .filter((value: string) => {
    return value != null;
  });

  // do something with selection

});

Note: I am using Angular.

[macandcheese]

@asangma seems like a good place for the "list item slot paradigm" with slots for content-end.

[moosetraveller]

Related #3127

[jcfranco]

This depends on #2884.