@esri/solutions-components 0.7.25 → 0.7.27

package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.css

@@ -44,27 +44,6 @@
   border: 1px solid var(--calcite-color-border-3);
 }
 
-.map-container {
-  position: absolute;
-  width: calc(100% - 390px);
-  left: 390px;
-}
-
-.side-panel {
-  padding: 2px;
-  width: 390px;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 60;
-}
-
 .error-msg{
   padding: 10px;
 }
-
-.collapsed-side-panel {
-  top: calc(100% - 55px);
-  height: 54px;
-}

package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js

@@ -58,9 +58,7 @@ export class CrowdsourceReporter {
      * Called each time the mapView prop is changed.
      */
     async isMobileWatchHandler() {
-        if (this.isMobile) {
-            this._sidePanelCollapsed = false;
-        }
+        this._sidePanelCollapsed = false;
     }
     /**
      * Called each time the mapView prop is changed.
@@ -72,16 +70,6 @@ export class CrowdsourceReporter {
     }
     //--------------------------------------------------------------------------
     //
-    //  Methods (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Events (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
     //  Functions (lifecycle)
     //
     //--------------------------------------------------------------------------
@@ -123,13 +111,8 @@ export class CrowdsourceReporter {
                     break;
             }
         });
-        let sidePanelClass = "side-panel";
-        //in case of mobile handle for collapsed styles of the panel
-        if (this.isMobile && this._sidePanelCollapsed) {
-            sidePanelClass += " collapsed-side-panel";
-        }
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h("calcite-panel", { class: sidePanelClass + " width-full " + themeClass }, this.mapView
+        return (h("calcite-panel", { class: "width-full " + themeClass }, this.mapView
             ? h("calcite-flow", null, (renderLists === null || renderLists === void 0 ? void 0 : renderLists.length) > 0 && renderLists)
             : h("calcite-loader", { scale: "m" })));
     }
@@ -139,7 +122,10 @@ export class CrowdsourceReporter {
      * @protected
      */
     getLayerListFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this._hasValidLayers && h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), this._hasValidLayers && h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports && h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this) }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this._hasValidLayers &&
+            h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), this._hasValidLayers &&
+            h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
+            h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this) }))));
     }
     /**
      * When layer list is loaded, we will receive the list of layers, if its  means we don't have any valid layer to be listed
@@ -174,6 +160,7 @@ export class CrowdsourceReporter {
      */
     toggleSidePanel() {
         this._sidePanelCollapsed = !this._sidePanelCollapsed;
+        this.togglePanel.emit(this._sidePanelCollapsed);
     }
     /**
      * When feature is selected from list store that and show feature details
@@ -190,7 +177,8 @@ export class CrowdsourceReporter {
      * @protected
      */
     getFeatureListFlowItem(layerId, layerName) {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", highlightOnMap: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 100, selectedLayerId: layerId }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports &&
+            h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", highlightOnMap: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, selectedLayerId: layerId }))));
     }
     /**
      * Returns the calcite-flow item for feature details
@@ -631,6 +619,24 @@ export class CrowdsourceReporter {
             "_hasValidLayers": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "togglePanel",
+                "name": "togglePanel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when toggle panel button is clicked in reporter"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

package/dist/collection/components/feature-list/feature-list.js

@@ -36,6 +36,18 @@ export class FeatureList {
     }
     //--------------------------------------------------------------------------
     //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Watch for selectedLayerId change and update layer instance and features list for new layerId
+     */
+    async selectedLayerWatchHandler() {
+        this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+        await this.initializeFeatureItems();
+    }
+    //--------------------------------------------------------------------------
+    //
     //  Functions (lifecycle)
     //
     //--------------------------------------------------------------------------
@@ -47,23 +59,22 @@ export class FeatureList {
         await this._getTranslations();
         this._isLoading = true;
         this._popupUtils = new PopupUtils();
-        this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+        if (this.mapView && this.selectedLayerId) {
+            this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+        }
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
      */
     async componentDidLoad() {
-        if (this._selectedLayer) {
-            this._featureItems = await this.queryPage(0);
-            this._featuresCount = await this._selectedLayer.queryFeatureCount();
-            this._isLoading = false;
-        }
+        await this.initializeFeatureItems();
     }
     /**
      * Renders the component.
      */
     render() {
-        return (h("calcite-panel", { "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { scale: "m" }), this._featureItems.length === 0 && !this._isLoading && h("calcite-notice", { class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { "selection-appearance": "border", "selection-mode": "single" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+        return (h("calcite-panel", { "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
+            h("calcite-notice", { class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { "selection-appearance": "border", "selection-mode": "single" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
             h("div", { class: "width-full", slot: "footer" }, h("calcite-pagination", { class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
@@ -71,6 +82,17 @@ export class FeatureList {
     //  Functions (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Initialize the features list using the selected layer
+     */
+    async initializeFeatureItems() {
+        if (this._selectedLayer) {
+            this._isLoading = true;
+            this._featureItems = await this.queryPage(0);
+            this._featuresCount = await this._selectedLayer.queryFeatureCount();
+            this._isLoading = false;
+        }
+    }
     /**
      * On page change get the next updated feature list
      * @param event page change event
@@ -115,14 +137,19 @@ export class FeatureList {
      */
     async queryPage(page) {
         const featureLayer = this._selectedLayer;
+        const objectIdField = featureLayer.objectIdField;
         const query = {
             start: page,
             num: this.pageSize,
             outFields: ["*"],
-            orderByFields: [featureLayer.objectIdField + " DESC"],
             returnGeometry: true,
-            where: featureLayer.definitionExpression
+            where: featureLayer.definitionExpression,
+            outSpatialReference: this.mapView.spatialReference.toJSON()
         };
+        //sort only when objectId field is found
+        if (objectIdField) {
+            query.orderByFields = [objectIdField.toString() + " DESC"];
+        }
         const featureSet = await featureLayer.queryFeatures(query);
         return await this.createFeatureItem(featureSet);
     }
@@ -135,7 +162,7 @@ export class FeatureList {
     async createFeatureItem(featureSet) {
         const currentFeatures = featureSet === null || featureSet === void 0 ? void 0 : featureSet.features;
         const items = currentFeatures.map(async (feature) => {
-            const popupTitle = await this._popupUtils.getPopupTitle(feature);
+            const popupTitle = await this._popupUtils.getPopupTitle(feature, this.mapView.map);
             return this.getFeatureItem(feature, popupTitle);
         });
         return Promise.all(items);
@@ -300,4 +327,10 @@ export class FeatureList {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selectedLayerId",
+                "methodName": "selectedLayerWatchHandler"
+            }];
+    }
 }

package/dist/collection/components/info-card/info-card.js

@@ -176,7 +176,7 @@ export class InfoCard {
         if (this.graphics.length > 0) {
             this._layer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
             this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
-            this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0]);
+            this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0], this.mapView.map);
             this._features.open({
                 features: this.graphics
             });

package/dist/collection/components/layer-list/layer-list.js

@@ -56,7 +56,8 @@ export class LayerList {
      * Renders the component.
      */
     render() {
-        return (h(Fragment, null, this._isLoading && h("calcite-loader", { scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay && h("calcite-notice", { class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
+        return (h(Fragment, null, this._isLoading && h("calcite-loader", { scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
+            h("calcite-notice", { class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
             h("calcite-list", null, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------

package/dist/collection/components/layer-table/layer-table.js

@@ -1109,7 +1109,7 @@ export class LayerTable {
      */
     _filterModal() {
         var _a, _b, _c;
-        return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: true, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
+        return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Reset the filter active prop
@@ -1210,6 +1210,8 @@ export class LayerTable {
         var _a, _b;
         const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
         this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
+        this._filterList.layerExpressions = this._layerExpressions;
+        this._filterActive = false;
     }
     /**
      * Select all rows that are not currently selectd

package/dist/collection/demos/crowdsource-reporter.html

@@ -27,10 +27,10 @@
         top: 0px;
         right: 0px;
         bottom: 0px;
-        left: 390px;
+        left: 361px;
       }
       #viewDiv[dir="rtl"] {
-        right: 390px;
+        right: 361px;
         left: 0px;
       }
       .over-map {
@@ -43,7 +43,6 @@
       }
       .column {
         width: 360px;
-        padding: 1rem;
         border: 1px solid var(--calcite-color-border-2);
         height: -webkit-fill-available;
         height: 100%;
@@ -51,6 +50,29 @@
       .column[dir="rtl"] {
         float: right;
       }
+
+      @media screen and (max-width: 600px) {
+        #viewDiv {
+          left: 0;
+          height: 50%;
+          width: 100%;
+        }
+
+        .column {
+          height: 50%;
+          top: 50%;
+          width: calc(100% - 2px);
+        }
+
+        .map-with-panel-collapsed {
+          height: calc(100% - 100px) !important;
+        }
+
+        .column-collapsed {
+          top: calc(100% - 100px);
+          height: 100px;
+        }
+      }
     </style>
 
     <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css"/>
@@ -69,52 +91,44 @@
         esriConfig
       ) => {
         const demo = document.getElementById("demo");
-
-        // let headerSet = false;
-        // let custom = [];
-        // let portal;
-        // //Support id and portal URL parameter
-        // var vars = window.location.search.substring(1).split("&");
-        // vars.forEach((param) => {
-        //   let vals = param.split("=");
-        //   const v = vals[1];
-        //   switch (vals[0]) {
-        //     case "id":
-        //       custom = [{
-        //         id: v,
-        //         name: "Map from URL"
-        //       }];
-        //       break;
-        //     case "portal":
-        //       portal = v;
-        //     default:
-        //       break;
-        //   }
-        // });
-
-        // if (portal) {
-        //   esriConfig.portalUrl = portal;
-        // }
-
-        // demo.mapInfos = [{
-        //   //id: "f8c4d99deb3c483cac296cc261e18a25", //blank no layers
-        //   //id: "a7e880f7afbb471991d43c8c4f1438ac" // Se mapping
-        //   //id: "c720e337ff814fe4a83bc244c46f8e43" //15 Layers
-        //   //id: "f5186c798b9e40dab1078658ddbc28cf" // 30K features
-        //   //id: "dda88d905a6748a5ab46bea5be795f33" // screening layers
-        //   id: "b5bdcb1e5d684dd3b21a2d44b8e4f928" //Popup content
-        // }];
-        // //if id is passed in the url parameter use that mapInfos
-        // if (custom?.length > 0) {
-        //   demo.mapInfos = custom;
-        // }
-
-        //esriConfig.portalUrl = "https://solutions.mapsdevext.arcgis.com";
-        var webMap = new WebMap({
-          portalItem: {
-            id: "b5bdcb1e5d684dd3b21a2d44b8e4f928"
+        let custom = null;
+        let portal;
+        //Support webmap and portal URL parameter
+        var vars = window.location.search.substring(1).split("&");
+        vars.forEach((param) => {
+          let vals = param.split("=");
+          const v = vals[1];
+          switch (vals[0]) {
+            case "webmap":
+              custom = {
+                id: v
+              };
+              break;
+            case "portal":
+              portal = v;
+            default:
+              break;
           }
         });
+        //update the portalUrl if found in urlParams
+        //esriConfig.portalUrl = "https://solutions.mapsdevext.arcgis.com";
+        if (portal) {
+          esriConfig.portalUrl = portal;
+        }
+
+        let portalItem = {
+          //id: "b5bdcb1e5d684dd3b21a2d44b8e4f928"
+          //id: "f8c4d99deb3c483cac296cc261e18a25", //blank no layers
+          //id: "a7e880f7afbb471991d43c8c4f1438ac" // Se mapping
+          //id: "c720e337ff814fe4a83bc244c46f8e43" //15 Layers
+          //id: "f5186c798b9e40dab1078658ddbc28cf" // 30K features
+          //id: "dda88d905a6748a5ab46bea5be795f33" // screening layers
+          id: "b5bdcb1e5d684dd3b21a2d44b8e4f928" //Popup content
+          //id: "d399ec39959a4aac8617ae4f05dd6785" //Arcade
+        }
+        const webMap = new WebMap({
+          portalItem: custom ?? portalItem
+        });
 
         demo.mapView = new MapView({
           container: "viewDiv",
@@ -122,24 +136,44 @@
         });
 
         demo.mapView.when(() => {
-        //   const legend = new Legend({
-        //     view: demo.mapView
-        //   });
-        //   demo.mapView.ui.add(legend, "top-left");
+          // const legend = new Legend({
+          //   view: demo.mapView
+          // });
+          // demo.mapView.ui.add(legend, "top-left");
         });
-
-        // demo.enableHome = true;
-        // demo.enableSearch = true;
-        // demo.enableZoom = true;
         demo.reportsHeader = "Reports";
         demo.reportButtonText = "Report an incident";
         demo.enableNewReports = true;
-        //Select reporting layers -
-        //demo.layers = ['SE_field_mapping_9688', 'SE_field_mapping_5784', 'SE_field_mapping_1853'];
-        //demo.layers = ['Three_Layers_nested_4042', 'SE_sort_2889', 'SE_sort_756']; //screening layers
         demo.theme = "light";
         demo.reportSubmittedMessage = "Thank you";
+        //Select reporting layers -
+        //demo.layers = ['SE_field_mapping_9688', 'SE_field_mapping_5784', 'SE_field_mapping_1853']; //Se mapping
+        //demo.layers = ['Three_Layers_nested_4042', 'SE_sort_2889', 'SE_sort_756']; //screening layers
+
+        //Update isMobile property of the reporter component
+        const mediaQueryList = window.matchMedia("screen and (max-width: 600px)");
+        demo.isMobile = mediaQueryList.matches;
+        //on change update the prop for is mobile
+        mediaQueryList.onchange = (e) => {
+          demo.isMobile = e.matches;
+          togglePanel({detail:false})
+        }
+        //listen to togglePanel event
+        demo.addEventListener('togglePanel', togglePanel);
       });
+
+      function togglePanel(evt){
+        const state = evt.detail;
+        const viewDiv = document.getElementById("viewDiv");
+        const demo = document.getElementById("demo");
+        if(state){
+          demo.classList.add("column-collapsed");
+          viewDiv.classList.add("map-with-panel-collapsed");
+        } else{
+          demo.classList.remove("column-collapsed");
+          viewDiv.classList.remove("map-with-panel-collapsed");
+        }
+      }
     </script>
   </head>
 

package/dist/collection/demos/feature-list.html

@@ -7,24 +7,51 @@
     />
     <title>Feature list</title>
     <!--
-    | Copyright 2022 Esri
-    |
-    | Licensed under the Apache License, Version 2.0 (the "License");
-    | you may not use this file except in compliance with the License.
-    | You may obtain a copy of the License at
-    |
-    |    http://www.apache.org/licenses/LICENSE-2.0
-    |
-    | Unless required by applicable law or agreed to in writing, software
-    | distributed under the License is distributed on an "AS IS" BASIS,
-    | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    | See the License for the specific language governing permissions and
-    | limitations under the License.
-    -->
+      | Copyright 2022 Esri
+      |
+      | Licensed under the Apache License, Version 2.0 (the "License");
+      | you may not use this file except in compliance with the License.
+      | You may obtain a copy of the License at
+      |
+      |    http://www.apache.org/licenses/LICENSE-2.0
+      |
+      | Unless required by applicable law or agreed to in writing, software
+      | distributed under the License is distributed on an "AS IS" BASIS,
+      | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      | See the License for the specific language governing permissions and
+      | limitations under the License.
+      -->
     <style>
+      #viewDiv {
+        padding: 0;
+        margin: 0;
+        height: 100%;
+        width: calc(50% - 2px);
+      }
+
+      .over-map {
+        position: absolute;
+        top: 0;
+        right: 0px;
+        background-color: var(--calcite-color-foreground-1);
+      }
+
+      .column {
+        width: 50%;
+        height: 100%;
+        border: 1px solid var(--calcite-color-border-2);
+      }
+
+      .column[dir="rtl"] {
+        float: left;
+      }
+
+      .full-height {
+        height: 100%;
+      }
     </style>
 
-    <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css"/>
+    <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css" />
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
     <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.0.0/calcite.css" />
@@ -33,11 +60,32 @@
     <script type="module" src="../solutions-components.esm.js"></script>
 
     <script>
+      require(["esri/WebMap", "esri/views/MapView"], (
+        WebMap,
+        MapView
+      ) => {
+        var webMap = new WebMap({
+          portalItem: {
+            id: "7377412d3bd7400cbd5b355404285682"
+          }
+        });
+        var view = new MapView({
+          container: "viewDiv",
+          map: webMap
+        });
+
+        view.when(function () {
+          const demo = document.getElementById("demo");
+          demo.mapView = view;
+          demo.selectedLayerId = 'BirdObservationTryItLive_2797'
+          demo.pageSize = 30;
+        })
+      });
     </script>
   </head>
 
-  <!-- <body class="calcite-mode-dark"> -->
   <body>
-    <feature-list/>
+    <div id="viewDiv"></div>
+    <feature-list id="demo" class="over-map column full-height"></feature-list>
   </body>
 </html>

package/dist/collection/demos/layer-list.html

@@ -22,9 +22,32 @@
     | limitations under the License.
     -->
     <style>
+      #viewDiv {
+        padding: 0;
+        margin: 0;
+        height: 100%;
+        width: calc(50% - 2px);
+      }
+      .over-map {
+        position: absolute;
+        top:0;
+        right: 0px;
+        background-color: var(--calcite-color-foreground-1);
+      }
+      .column {
+        width: 50%;
+        height: 100%;
+        border: 1px solid var(--calcite-color-border-2);
+      }
+      .column[dir="rtl"] {
+        float: left;
+      }
+      .full-height {
+        height: 100%;
+      }
     </style>
 
-    <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css"/>
+    <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css" />
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
     <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.0.0/calcite.css" />
@@ -33,11 +56,28 @@
     <script type="module" src="../solutions-components.esm.js"></script>
 
     <script>
+      require(["esri/WebMap", "esri/views/MapView"], (
+        WebMap,
+        MapView
+      ) => {
+        var webMap = new WebMap({
+          portalItem: {
+            id: "b5bdcb1e5d684dd3b21a2d44b8e4f928"
+          }
+        });
+
+        const demo = document.getElementById("demo");
+        demo.mapView = new MapView({
+          container: "viewDiv",
+          map: webMap
+        });
+      });
     </script>
   </head>
 
-  <!-- <body class="calcite-mode-dark"> -->
   <body>
-    <layer-list/>
+    <div id="viewDiv"></div>
+    <layer-list id="demo" class="over-map column full-height">
+    </layer-list>
   </body>
 </html>

package/dist/collection/utils/interfaces.ts

@@ -546,5 +546,5 @@ export interface ILayerAndTableIds {
 
 export interface IPopupUtils {
   arcade: typeof import("esri/arcade");
-  getPopupTitle(graphic: __esri.Graphic): Promise<string>;
+  getPopupTitle(graphic: __esri.Graphic, map: __esri.Map): Promise<string>;
 }