@esri/solutions-components 0.11.17 → 0.11.19

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

@@ -24,6 +24,31 @@ import { PopupUtils } from "../../utils/popupUtils";
 import { getFeatureLayerView, getLayerOrTable, highlightFeatures } from "../../utils/mapViewUtils";
 import { getLocaleComponentStrings } from "../../utils/locale";
 export class FeatureList {
+    constructor() {
+        this.selectedLayerId = undefined;
+        this.mapView = undefined;
+        this.noFeaturesFoundMsg = undefined;
+        this.pageSize = 100;
+        this.highlightOnMap = false;
+        this.highlightOnHover = false;
+        this.locale = undefined;
+        this.sortingInfo = undefined;
+        this.whereClause = undefined;
+        this.textSize = "large";
+        this.showInitialLoading = true;
+        this.showErrorWhenNoFeatures = true;
+        this.showUserImageInList = false;
+        this.showFeatureSymbol = false;
+        this.applyLayerViewFilter = false;
+        this.reportingOptions = undefined;
+        this.showFullTitle = true;
+        this._featureItems = [];
+        this._featuresCount = 0;
+        this._isLoading = false;
+        this._searchPlaceHolder = '';
+        this._fullTextSearchInfo = undefined;
+        this._translations = undefined;
+    }
     //--------------------------------------------------------------------------
     //
     //  Host element access
@@ -32,109 +57,6 @@ export class FeatureList {
     el;
     //--------------------------------------------------------------------------
     //
-    //  Properties (public)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * string: Layer id of the feature layer to show the list
-     */
-    selectedLayerId;
-    /**
-     * esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
-     */
-    mapView;
-    /**
-     * string: Message to be displayed when features are not found
-     */
-    noFeaturesFoundMsg;
-    /**
-     * number: Number features to be fetched per page, by default 100 features will be fetched
-     */
-    pageSize = 100;
-    /**
-     * boolean: Highlight feature on map optional (default false) boolean to indicate if we should highlight and zoom to the extent of the feature geometry
-     */
-    highlightOnMap = false;
-    /**
-     * boolean: Highlight feature on map optional (default false) boolean to indicate if we should highlight when hover on Feature in list
-     */
-    highlightOnHover = false;
-    /**
-     * string: Locale to use for translation of stings in the UI
-     */
-    locale;
-    /**
-     * ISortingInfo: Sorting field and order using which features list will be sorted
-     */
-    sortingInfo;
-    /**
-     * string: where clause to filter the features list
-     */
-    whereClause;
-    /**
-     * string(small/large): Controls the font size of the title
-     */
-    textSize = "large";
-    /**
-     * boolean: Show initial loading indicator when creating list
-     */
-    showInitialLoading = true;
-    /**
-     * boolean: If true will show error msg when features are not present
-     */
-    showErrorWhenNoFeatures = true;
-    /**
-     * boolean: If true display's profile img on each feature item
-     */
-    showUserImageInList = false;
-    /**
-     * boolean: If true display's feature symbol on each feature item
-     */
-    showFeatureSymbol = false;
-    /**
-     * boolean: If true will consider the FeatureFilter applied on the layerview
-     */
-    applyLayerViewFilter = false;
-    /**
-     * IReportingOptions: Key options for reporting
-     */
-    reportingOptions;
-    /**
-     * boolean: When false popup title will shown in single line
-     */
-    showFullTitle = true;
-    //--------------------------------------------------------------------------
-    //
-    //  State (internal)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * calcite-list-item list of features with popup titles
-     */
-    _featureItems = [];
-    /**
-     * number: Total number of feature count
-     */
-    _featuresCount = 0;
-    /**
-     * boolean: Check if selected layer's features fetching process is completed
-     */
-    _isLoading = false;
-    /**
-     * string: Placeholder string to show fields included in full text search
-     */
-    _searchPlaceHolder = '';
-    /**
-     * any[]: Contains full text search info object
-     */
-    _fullTextSearchInfo;
-    /**
-     * Contains the translations for this component.
-     * All UI strings should be defined here.
-     */
-    _translations;
-    //--------------------------------------------------------------------------
-    //
     //  Properties (protected)
     //
     //--------------------------------------------------------------------------

package/dist/collection/components/floor-filter/floor-filter.js

@@ -21,6 +21,11 @@
 import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 export class FloorFilter {
+    constructor() {
+        this.enabled = undefined;
+        this.floorFilterWidget = undefined;
+        this.mapView = undefined;
+    }
     //--------------------------------------------------------------------------
     //
     //  Host element access
@@ -29,25 +34,6 @@ export class FloorFilter {
     el;
     //--------------------------------------------------------------------------
     //
-    //  Properties (public)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * boolean: when true the Floor Filter widget will be available
-     */
-    enabled;
-    /**
-     * esri/widgets/FloorFilter: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-FloorFilter.html
-     *
-     * FloorFilter instance
-     */
-    floorFilterWidget;
-    /**
-     * esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
-     */
-    mapView;
-    //--------------------------------------------------------------------------
-    //
     //  State (internal)
     //
     //--------------------------------------------------------------------------

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

@@ -23,6 +23,26 @@ import { getLocaleComponentStrings } from "../../utils/locale";
 import { loadModules } from "../../utils/loadModules";
 import { PopupUtils } from "../../utils/popupUtils";
 export class InfoCard {
+    constructor() {
+        this.enableEditGeometry = false;
+        this.graphics = undefined;
+        this.isLoading = false;
+        this.isMobile = undefined;
+        this.mapView = undefined;
+        this.allowEditing = true;
+        this.highlightEnabled = true;
+        this.locale = undefined;
+        this.paginationEnabled = true;
+        this.position = 'absolute';
+        this.showCloseBtn = false;
+        this._alertOpen = false;
+        this._count = "";
+        this._editRecordOpen = false;
+        this._mobileTitle = "";
+        this._showListView = false;
+        this._translations = undefined;
+        this._navigatedToRelatedFeature = undefined;
+    }
     //--------------------------------------------------------------------------
     //
     //  Host element access
@@ -31,83 +51,6 @@ export class InfoCard {
     el;
     //--------------------------------------------------------------------------
     //
-    //  Properties (public)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When true the geometry of the current feature will be editable
-     */
-    enableEditGeometry = false;
-    /**
-     * esri/Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html
-     */
-    graphics;
-    /**
-     * boolean: when true a loading indicator will be shown
-     */
-    isLoading = false;
-    /**
-     * When true the component will render an optimized view for mobile devices
-     */
-    isMobile;
-    /**
-     * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
-     */
-    mapView;
-    /**
-     * boolean: If true will show edit button
-     */
-    allowEditing = true;
-    /**
-     * boolean: If true will highlights the features on map using Features Widget
-     */
-    highlightEnabled = true;
-    /**
-     * string: Locale to use for translation of stings in the UI
-     */
-    locale;
-    /**
-     * boolean: If true will show the pagination for multiple features
-     */
-    paginationEnabled = true;
-    /**
-     * string: Set the position of the feature info
-     */
-    position = 'absolute';
-    //--------------------------------------------------------------------------
-    //
-    //  State (internal)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * boolean: When true a alert will be shown to indicate a problem or confirm the current action
-     */
-    _alertOpen = false;
-    /**
-     * string: Current index of total string
-     * This value is not displayed but will force a render if it changes
-     */
-    _count = "";
-    /**
-     * When true the add record modal will be displayed
-     */
-    _editRecordOpen = false;
-    /**
-     * When isMobile is true we will handle the display of the title so
-     * we can display beside a custom back button
-     */
-    _mobileTitle = "";
-    /**
-     * When true the features list view will be displayed
-     */
-    _showListView = false;
-    /**
-     * Contains the translations for this component.
-     * All UI strings should be defined here.
-     */
-    _translations;
-    //--------------------------------------------------------------------------
-    //
     //  Properties (protected)
     //
     //--------------------------------------------------------------------------
@@ -141,6 +84,10 @@ export class InfoCard {
      * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
      */
     reactiveUtils;
+    /**
+     * __esri.Graphic: Related feature selected from the features widget
+     */
+    _relatedFeature;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -150,6 +97,14 @@ export class InfoCard {
      * Watch for changes to the graphic and update the feature widget
      */
     async graphicsWatchHandler() {
+        // if user has been navigated to related record and graphics is changed then close the feature widget and then set graphics to avoid blank popup issue
+        // https://github.com/Esri/solutions-components/issues/1113
+        if (this._navigatedToRelatedFeature && this._features) {
+            this._features.clear();
+            this._features.close();
+            this._count = "";
+            this._navigatedToRelatedFeature = false;
+        }
         await this.setGraphics();
     }
     /**
@@ -240,6 +195,10 @@ export class InfoCard {
      * Emitted on demand when the popup is closed
      */
     popupClosed;
+    /**
+     * Emitted on demand when close button is clicked
+     */
+    clearSelection;
     /**
      * Emitted on demand when the selected index changes
      */
@@ -266,7 +225,10 @@ export class InfoCard {
      * Refresh the info-card graphics
      */
     async refreshGraphics(evt) {
-        this.graphics = [...evt.detail];
+        // if if user is not navigated to related feature then only update the graphics otherwise the related feature will shown instead of selected feature
+        if (!this._navigatedToRelatedFeature) {
+            this.graphics = [...evt.detail];
+        }
     }
     //--------------------------------------------------------------------------
     //
@@ -300,13 +262,16 @@ export class InfoCard {
         const featureNodeClass = this.isLoading || this._editRecordOpen ? "visibility-hidden" : "position-absolute";
         const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
         const editButtonClass = (!this.isLoading && this._editRecordOpen) || this._showListView ? "display-none" : "";
-        const nextBackDisabled = this._features?.features?.length < 2;
+        const nextBackDisabled = this._features?.features?.length < 2 || this._navigatedToRelatedFeature;
         const nextBackClass = this.isMobile ? "display-none" : "";
         const id = this._features?.selectedFeature?.getObjectId();
         const ids = parseInt(id?.toString(), 10) > -1 ? [id] : [];
         const deleteEnabled = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete;
-        return (h(Host, { key: '66070d48134f89d9cf132572fe1adf790b6d3ec6' }, h("calcite-shell", { key: 'b77248dce176df940d8b0c347154b73738a5576d', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: 'c1638ca8320a0ae12a9ccd1fd8841efde4236ba5', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: 'cf5ee3be5c0ea3be36205dcf7c0747461802a5f1', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '6fbfa6947fa0fdb1b14a03217da60f07ecff2e1b', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            h("div", { key: 'fdcb078c3b3f183b06dc3a48d27fee46e3a4fffa', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '7193bec80a40f353d24e5d327d99d94a2c5ff356', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, locale: this.locale, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: '228a9691edd916a5d644cb19db24898cdf7cab3b', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '5c696df370bcf230d3fc06523ec3cb9d96f2fe2b' }, this._translations.edit)), this.isMobile && deleteEnabled ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: 'e1b829a888913af6a9d777a2df0d65571ac3bec1', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '8746737a103266efe64a8f80c2359f9e170586d5' }, h("calcite-button", { key: 'ac6fc23dc2831608cc9c86fe384c0a927cd7d7ac', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: 'd4a1e2753c35e97064ca66d5c30deccd532fb158', placement: "top", "reference-element": "solutions-back" }, h("span", { key: 'caae32b5e32a0d89265293beccef157d227a7600' }, this._translations.back))), h("calcite-action", { key: 'a87f344a06896ad86886815254979793b057e4cd', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: '6e6f84ebedb2540edb485fa0789fe8ea67e7188f', class: "pagination-count" }, this._count)), h("div", { key: '6acf22348a508c921865bb4c7e531f9a826a8eed' }, h("calcite-button", { key: 'f1d763e1747cff7e0b6bec08ec4fade3d1582379', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: 'def93e3d1f19b4e6eb3e54c5fbd918fed118cc0c', placement: "top", "reference-element": "solutions-next" }, h("span", { key: 'cb9b90a5b3129861b7f58fd0271c6120893dfd53' }, this._translations.next))))), h("edit-card", { key: '524819a6dc64775b88b22aaf24445fd5ebdeae24', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: this._features?.selectedFeatureIndex, graphics: this.graphics, locale: this.locale, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: '394c3b416a5dc94381c8b93afd3308121fbebd81', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: 'f4868bf3b710d91ed7e3f1e34b846bd408febac0', slot: "title" }, this._translations.editDisabled), h("div", { key: '457b7d0c76bfac52340bec73f5d1d2abbd10f25a', slot: "message" }, this._translations.enableEditing)))));
+        // if user has navigated to the related feature then pass the related feature to the graphics
+        const graphics = this._relatedFeature ? [this._relatedFeature] : this.graphics;
+        const selectedFeatureIndex = this._navigatedToRelatedFeature ? 0 : this._features?.selectedFeatureIndex;
+        return (h(Host, { key: '9f75eb2e7aba944474e85c34b2abe23982629558' }, h("calcite-shell", { key: '748f9e50cd3aa7a52dd7910b171c0d7f54d09203', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: 'feced4d4a66df36958644436acaa53ddabdfc02a', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: '3bb912c80d610a21a5e283c6bd19ab0c63023c45', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '479dcbda08f837b32bd19ed7f40856f081e92a6e', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { key: 'dd78b02ba8506c391aada6c5233691ec9babcfbe', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: 'c5a807609c60151a433fa9c0055fbfdf20b2935f', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, locale: this.locale, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: 'a4cd4c77e982e23675ec9eaf08e2135de6c83b65', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '22533608996d1c87b9b04e339506ec01176379b0' }, this._translations.edit)), this.isMobile && deleteEnabled ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '183ff7da57a06de8f5419edf5973f18b41c46097', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '77e59229d1d516ccdc8f7c5be2f89a5ad9d5004b' }, h("calcite-button", { key: '4b6a6f1f85e9199e14d626ba66b6b319283d0c32', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: '7056c5cb3c790c804194f09f2586864a28dce5e1', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '923fc5425a9faced6952a1b9acff9b7d0f3da286' }, this._translations.back))), h("calcite-action", { key: 'a34bfb4ae71a91373fd476e7b704a6a2f8f23157', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: '101a0fa592af65b540123c835e9031a18671ad8b', class: "pagination-count" }, this._count)), h("div", { key: 'c4f88f464a3091dfc77578470de4f42d05b9f5c7' }, h("calcite-button", { key: 'e4e35e539f0c7e01a31e0047db545d4d334ef2d8', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '40244ecf5566fde448b311272d2ee00d70bc531a', placement: "top", "reference-element": "solutions-next" }, h("span", { key: 'db01e2a2b9da9a80f9a25caf49bf8beb872e6ad9' }, this._translations.next))))), h("edit-card", { key: 'cfa193b01b67f7709ea6a491caa0c647c536e9e3', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: selectedFeatureIndex, graphics: graphics, locale: this.locale, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: '709fd6d681d32a03fcf5fba959e81a0153676e26', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: 'bbdd9cc98fcda8ffba294a4322f08468072f6aef', slot: "title" }, this._translations.editDisabled), h("div", { key: 'd07e32e9cd54cc82ff005e7e696e13e1b8bdaa4e', slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -366,7 +331,7 @@ export class InfoCard {
                     container: this._featuresNodeId,
                     visibleElements: {
                         actionBar: false,
-                        closeButton: false,
+                        closeButton: this.showCloseBtn,
                         heading: !this.isMobile
                     }
                 });
@@ -382,11 +347,26 @@ export class InfoCard {
                         this.selectionChanged.emit({ selectedFeature: [this._features.selectedFeature], selectedFeatureIndex: this._features.selectedFeatureIndex });
                     }
                 });
+                this.reactiveUtils.watch(() => this._features.selectedDrillInFeature, (f) => {
+                    if (f) {
+                        this._relatedFeature = f;
+                        this._navigatedToRelatedFeature = true;
+                    }
+                    else {
+                        this._relatedFeature = null;
+                        this._navigatedToRelatedFeature = false;
+                    }
+                });
+                // get the info card node element and emit clear selection while clicking the close button
+                const infoCard = this.el.querySelector('#' + this._featuresNodeId);
+                infoCard.addEventListener('calciteFlowItemClose', () => {
+                    this.clearSelection.emit();
+                });
             }
             else {
                 this._features.view = this.mapView;
                 this._features.visibleElements.actionBar = false;
-                this._features.visibleElements.closeButton = false;
+                this._features.visibleElements.closeButton = this.showCloseBtn;
                 this._features.visibleElements.heading = !this.isMobile;
             }
         }) : Promise.resolve();
@@ -686,6 +666,26 @@ export class InfoCard {
                 "attribute": "position",
                 "reflect": false,
                 "defaultValue": "'absolute'"
+            },
+            "showCloseBtn": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: If true show close button on the feature info"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-close-btn",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -696,7 +696,8 @@ export class InfoCard {
             "_editRecordOpen": {},
             "_mobileTitle": {},
             "_showListView": {},
-            "_translations": {}
+            "_translations": {},
+            "_navigatedToRelatedFeature": {}
         };
     }
     static get events() {
@@ -715,6 +716,21 @@ export class InfoCard {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "clearSelection",
+                "name": "clearSelection",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when close button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }, {
                 "method": "selectionChanged",
                 "name": "selectionChanged",

package/dist/collection/components/json-editor/json-editor.js

@@ -55,6 +55,13 @@
 import { Host, h } from "@stencil/core";
 import { getLocaleComponentStrings } from "../../utils/locale";
 export class JsonEditor {
+    constructor() {
+        this.hasChanges = false;
+        this.hasErrors = false;
+        this.instanceid = "";
+        this.locale = undefined;
+        this.value = "";
+    }
     //--------------------------------------------------------------------------
     //
     //  Host element access
@@ -63,34 +70,6 @@ export class JsonEditor {
     el;
     //--------------------------------------------------------------------------
     //
-    //  Properties (public)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * Contains a public value to indicate if the model has any changes.
-     */
-    hasChanges = false;
-    /**
-     * Contains a public value to indicate if the model has any errors
-     * that would prevent saving it.
-     */
-    hasErrors = false;
-    /**
-     * Contains a unique identifier for when we have multiple instances of the editor.
-     * For example when we want to show an item's data as well as an item's properties.
-     */
-    instanceid = "";
-    /**
-     * string: Locale to use for translation of stings in the UI
-     */
-    locale;
-    /**
-     * Contains the public value for this component; it is not changed by the editor.
-     * When changed, the change overwrites the contents of the editor.
-     */
-    value = "";
-    //--------------------------------------------------------------------------
-    //
     //  Watch handlers
     //
     //--------------------------------------------------------------------------

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

@@ -23,6 +23,18 @@ import { getAllLayers, getFeatureLayerView, getMapLayerHash } from "../../utils/
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { formatNumber } from "../../utils/languageUtil";
 export class LayerList {
+    constructor() {
+        this.mapView = undefined;
+        this.layers = undefined;
+        this.locale = undefined;
+        this.showFeatureCount = true;
+        this.showNextIcon = false;
+        this.applyLayerViewFilter = false;
+        this._noLayersToDisplay = false;
+        this._mapLayerIds = [];
+        this._isLoading = false;
+        this._translations = undefined;
+    }
     //--------------------------------------------------------------------------
     //
     //  Host element access
@@ -31,56 +43,6 @@ export class LayerList {
     el;
     //--------------------------------------------------------------------------
     //
-    //  Properties (public)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
-     */
-    mapView;
-    /**
-     * string[]: If passed will show only these layers in the list if they are present in map and are editable
-     */
-    layers;
-    /**
-     * string: Locale to use for translation of stings in the UI
-     */
-    locale;
-    /**
-     * boolean: if true display's feature count for each layer
-     */
-    showFeatureCount = true;
-    /**
-     * boolean: If true display's arrow icon on each layer item
-     */
-    showNextIcon = false;
-    /**
-     * boolean: If true will consider the FeatureFilter applied on the layerview
-     */
-    applyLayerViewFilter = false;
-    //--------------------------------------------------------------------------
-    //
-    //  State (internal)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * boolean: When true will display message no layers found
-     */
-    _noLayersToDisplay = false;
-    /**
-     * string[]: list of layer ids from the map which will be listed
-     */
-    _mapLayerIds = [];
-    /**
-     * boolean: When true display the loading indicator
-     */
-    _isLoading = false;
-    /**
-     * Contains the translations for this component.
-     */
-    _translations;
-    //--------------------------------------------------------------------------
-    //
     //  Properties (protected)
     //
     //--------------------------------------------------------------------------