use of home component in a calcite-action-bar

[LefterisKoumis]

I'm using ArcGIS JS API 4.32 and currently converting the app's widgets into components.

The app includes a calcite-action-bar on the left side, and I've been successfully integrating components like the LayerList, Legend, and others.

Most conversions have been straightforward, except for the Home component.

Integrating the Home component into the action bar has been challenging, as it interacts directly with the map view, making it less adaptable to the component-based structure.

This is the current setup. 

 <calcite-shell-panel id="primary-shell-panel" slot="panel-start">

            <calcite-action-bar slot="action-bar" expand-disabled id="action-bar-left">
                <calcite-action-group>
                    <calcite-action data-action-id="home" id="home" text="Home" icon="home"></calcite-action>
                    <calcite-action data-action-id="previous" id="previous" text="Previous Extent" icon="arrow-left">
                    </calcite-action>
                    <calcite-action data-action-id="next" id="next" text="Next Extent" icon="arrow-right">
                    </calcite-action>
                </calcite-action-group>
                <calcite-action-group>

 How can I use the home component in the action bar?

<arcgis-map item-id="45b3b2fb35e94ab09381d0caa0da5946">
  <arcgis-home position="top-left"></arcgis-home>
</arcgis-map>

@AnneFitz  @JoelBennett 

[fdeters · Accepted solution]

@LefterisKoumis This was one of my concerns when adopting web components, too. Thankfully, the Home component follows the same pattern that many of the web components follow:

You can set the "reference-element" property on the Home component to point to the "id" of the <arcgis-map> component. This will let you place the Home component wherever you want in the DOM, while still linking it to the view inside the Map component.

<calcite-shell>
  <calcite-shell-panel slot="panel-start">
    <calcite-action-bar slot="action-bar">
      <calcite-action-group>
        <!--  Use <arcgis-home> with reference-element pointing to <arcgis-map>   -->
        <arcgis-home reference-element="my-map"></arcgis-home>
      </calcite-action-group>
    </calcite-action-bar>
  </calcite-shell-panel>
  
  <arcgis-map id="my-map" item-id="45b3b2fb35e94ab09381d0caa0da5946"></arcgis-map>
</calcite-shell>

See this codepen for a complete example: https://codepen.io/fdeters/pen/Pwqewwa. The styling doesn't quite work how I would expect it to out of the box, but some CSS could probably get it to work right.

[ReneRubalcava · Accepted solution]

You can add an arcgis-home { margin: 10px; } and it will place it correctly in the action bar. It's still has a button width/height that is different on hover, but aligns right.