How to fix the visual order of components on a map using arcgis-map-components

Flookfinders

I am investigating the arcgis-map-components and I am trying to put a group of components in the bottom left of the map, but I am unable to change the order in which the components can be seen on the map.  This is my code snippet for the components:

    <arcgis-map>

      <arcgis-zoom position="bottom-left" layout="horizontal" />

      <arcgis-expand

        position="bottom-left"

        expandIcon="esri-icon-layers"

        expandTooltip="Layers"

        collapseIcon="chevrons-down"

        collapseTooltip="Layers"

        label="Layers"

        placement="top-leading"

        closeOnEsc

      >

        <arcgis-layer-list label="Current layers" show-heading />

      </arcgis-expand>

      <arcgis-expand

        position="bottom-left"

        expandIcon="measure"

        expandTooltip="Measure distance"

        collapseIcon="chevrons-down"

        collapseTooltip="Measure distance"

        label="Measure distance"

        placement="top-leading"

        closeOnEsc

      >

        <arcgis-distance-measurement-2d unit="meters" />

      </arcgis-expand>

      <arcgis-scale-bar position="bottom-left" bar-style="ruler" unit="metric" />

    </arcgis-map>

It does not matter which order I enter the components in my code they are displayed in the following order 

 

How can I get the components in the order in the code i.e. zoom, layer list, measure, scale bar?

ReneRubalcava

This is currently a known limitation with the "position" that we are looking to fix for next release. In later releases we will be adding slots to better manage this.

For now, you can use the arcgis-placement component and your own container styled how you like to accomplish this.

https://codepen.io/odoe/pen/yyLGdXa?editors=1000

<arcgis-map item-id="45725ba7d9fb47a0925398919b13d1fa">
  <arcgis-placement position="bottom-left">
    <div class="tool-container">
      <arcgis-zoom layout="horizontal"></arcgis-zoom>
      <arcgis-expand expand-icon="esri-icon-layers" expand-tooltip="Layers" collapse-icon="chevrons-down" collapse-tooltip="Layers" label="Layers" placement="top-leading" close-on-esc>
        <arcgis-layer-list label="Current layers" show-heading></arcgis-layer-list>
      </arcgis-expand>
      <arcgis-expand expand-icon="measure" expand-tooltip="Measure distance" collapse-icon="chevrons-down" collapse-tooltip="Measure distance" label="Measure distance" placement="top-leading" close-on-esc>
        <arcgis-distance-measurement-2d unit="meters"></arcgis-distance-measurement-2d>
      </arcgis-expand>
      <arcgis-scale-bar bar-style="ruler" unit="metric"></arcgis-scale-bar>
    </div>
  </arcgis-placement>
</arcgis-map>