@esri/solutions-components 0.10.33 → 0.10.35

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

@@ -232,8 +232,8 @@ export class InfoCard {
         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: 'a46a4081790c4e67a7e62d7602cf7d3203688d43' }, h("calcite-shell", { key: '688be9c8641692e2843536024752172416e88213', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: '0d99da4c0046325af848deaa5b6cb67ed524de96', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: 'e075742e911624b76b56404ccde68bff8f0363aa', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '17423712d3a1a2d38ee890ca4dba3ab55ff9ff5f', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            h("div", { key: 'f9738f91381d1f1e011951c74b53c733a563f37d', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: 'bdb409117bc78ce70cb015521506086c6a8fc9c1', 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, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: 'b1927881890a62576bfb794ac8d7ceec3178ae50', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '5b8024aca83b9a12e55e83025353b718fbabc56a' }, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '5b2410d9f2a2038f8903fb312ec00174d7b227f7', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '3e1ba697bd0c22e59b5555375aa192e05900d4a3' }, h("calcite-button", { key: 'd0308cab8f7b570eb64ba6639b753e34e471f0e4', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: 'ff51bfc1fe19c2cff4e9ef37c619e0c69dd7c707', placement: "top", "reference-element": "solutions-back" }, h("span", { key: 'dc1e698ca37f5988c2b822d6d7e00eacfc4fe4ba' }, this._translations.back))), h("calcite-action", { key: 'e442df4bcc0012851b8102a2590a58697cb1dc49', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: 'cb4729f055978f1d4c1c63d3e875fec3e4161602', class: "pagination-count" }, this._count)), h("div", { key: 'e6eac05de054f614dc8b6bf3de2ae289dd6d527f' }, h("calcite-button", { key: 'e253248af7d5e21880ccb3e82bbbe95082ff916a', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '7a2340dc1403c1a95c0a926c9fda19876a513708', placement: "top", "reference-element": "solutions-next" }, h("span", { key: '3b69deac115afe2dc8cf9fb9d9eaed8d93abb22c' }, this._translations.next))))), h("edit-card", { key: 'e43be40ba13bec51123fbcd3f30062f4bc3e8550', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: this._features?.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: 'ccbd2ecf9f1f719912ec3020d29559a6d8727e3f', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: '4f17aeceb63548d1eef560d3ef178f630f8dfe47', slot: "title" }, this._translations.editDisabled), h("div", { key: '9c720479ed61012787d7f6be966e31e3fa136d54', slot: "message" }, this._translations.enableEditing)))));
+        return (h(Host, { key: 'e200fd8d903d1c3295247a45f352ae62394501d5' }, h("calcite-shell", { key: '0b467ed0b480944660ef2194b302070d56cb70e4', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: 'cf6172f533f67274b04ac61af75f44ffe62cbc9e', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: '06f3e0c61e14fe73c0fadd58c3cf2c7c03efff6d', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '0f964afa075abbd27db827f90d189b9bc2a7c9d4', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { key: 'd518934d172425ecb46e6b28ea683427d8982382', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '4d4f3583b6448e33e3d3ad1aba8c9178f71d75b8', 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, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: '5358ba4079f1906d23b6df5b1facb84eec9692d3', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '8466cfb97ce12e46a06ed665afe974377911e101' }, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '61c551cc2b0c0a2981daa9bf67c7e13318508ca6', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '379dc6697743caedf8fdbea16423b83e9e823a5b' }, h("calcite-button", { key: '616a52367d2f56db0104ce279951a81fcf60a376', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: 'f7f83e145c25591de025650fd358ca6200c4b6c5', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '8afbde57b91ee8597de237db87efda7eabc10d69' }, this._translations.back))), h("calcite-action", { key: '23344d4abac515d089b8770d63181a989971aa33', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: 'a4c784c5a2c7dfeb9442a58f86961a3242f55055', class: "pagination-count" }, this._count)), h("div", { key: '75e33452a93e9a77f30505957e87b8758ab8d2dd' }, h("calcite-button", { key: '0283a96c401e1929588e28d6ec014eb28b93d1f1', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '658a26b1bca471b96799cb81ee941f0556619dc9', placement: "top", "reference-element": "solutions-next" }, h("span", { key: '9892d4ee61a1b5656711bb0a188282d9b46bd3f9' }, this._translations.next))))), h("edit-card", { key: '541268c24631ab526bf1b65313d39f3ca606cb6d', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: this._features?.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: '1cdff00f5d7e72b5db220750d290593a1baf68c4', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: 'bb250c5906f0e998a794b5c02c22f9643fab16a9', slot: "title" }, this._translations.editDisabled), h("div", { key: 'd330d1ce74473fc76630d2607ab3ca2584aabbd7', slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -135,7 +135,7 @@ export class JsonEditor {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '2932135e373b0e5cf5bc5347c7b7960a60e81df1' }, h("div", { key: '98579089177f92e2a3600dd64d738e4ec8ff8ae2', id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, h("div", { key: '971de116ef81850ecc2fcbff9d9f30e36c5928cf', class: "editor-controls" }, h("div", { key: '75e505043095753dc414dad671c6eec4e27a47c1', class: "editor-buttons" }, h("calcite-icon", { key: 'af8645c74758aff0f310089a5c97a504a52a2026', id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), h("calcite-button", { key: '6d736a2f3aa9c3e0efd5c1919253fc02e3dec0a2', id: `${this.instanceid}-undo`, color: "blue", appearance: "solid", title: this._translations.undo, onClick: () => this._undo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '20fdf41124e256f139c7be3bd6f0e42823706cec', icon: "undo", scale: "s" })), h("calcite-button", { key: '7ca8a3bf590e33d6596af51e0b1f25019e9f806a', id: `${this.instanceid}-redo`, color: "blue", appearance: "solid", title: this._translations.redo, onClick: () => this._redo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '3e248322dd1381da5ec609e92953d8ea94ebad29', icon: "redo", scale: "s" })), h("calcite-button", { key: '2e147af3b73714e40347f432d3d440d0e9bd2ae9', id: `${this.instanceid}-diff`, color: "blue", appearance: "solid", title: this._translations.diff, onClick: () => this._toggleEditor(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'dc3fea2e4743511af20347412c6093163f0b674c', icon: "compare", scale: "s" })), h("calcite-button", { key: 'f983c7535f4a36a693b186a716ad6750e33f679a', id: `${this.instanceid}-search`, appearance: "outline", color: "blue", title: this._translations.search, onClick: () => this._search(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '315076f61831b8294e0c9b2c2e5fb174d9163bce', icon: "search", scale: "s" })), h("calcite-button", { key: 'a9223c5ad5eeed5a932ce106d3f3db90008933b9', id: `${this.instanceid}-reset`, color: "blue", appearance: "solid", disabled: true, title: this._translations.cancelEdits, onClick: () => this._reset(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '0cd3c9c634da8fe710890b533bc046c536af0bb2', icon: "reset", scale: "s" })))), h("div", { key: '73fc19136eb3aa3148c859ba617cd9904ee92f98', class: "edit-parent" }, h("div", { key: '57435dbeeef39ddaeb97256512acca6360e1a7ec', id: `${this.instanceid}-container`, class: "json-edit-container" }), h("div", { key: '152e58aeb94ae22d6d11e4332496cb2e637ebbca', id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
+        return (h(Host, { key: '0c7531c8c816eb9be80d357b19b568ccdb22c407' }, h("div", { key: '866f82b68c2a750edfc80d801e4ea95a3f655100', id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, h("div", { key: '5b9f15641f6a26daeb3847d8ef75c76b8be44fc5', class: "editor-controls" }, h("div", { key: 'd1e91eaa242ccd23d5dc1386b6a58d2fafeb4083', class: "editor-buttons" }, h("calcite-icon", { key: 'd9364f7dfdbc22a414b4711c8a22e145b533998e', id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), h("calcite-button", { key: '29750fc7cedf1f9caf556df3ff84dc45d6b922b9', id: `${this.instanceid}-undo`, color: "blue", appearance: "solid", title: this._translations.undo, onClick: () => this._undo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'c95008b3fccb8bc33f01eb1bd204c84141850981', icon: "undo", scale: "s" })), h("calcite-button", { key: '49ac9ee70c58954f6dee34524f4c7ab6fa0d7a49', id: `${this.instanceid}-redo`, color: "blue", appearance: "solid", title: this._translations.redo, onClick: () => this._redo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '2170c36d0fd236c989222991353324d50afa8ac0', icon: "redo", scale: "s" })), h("calcite-button", { key: 'c6e1a0f84fac6fb02d2590cc7b32aefffbc06d25', id: `${this.instanceid}-diff`, color: "blue", appearance: "solid", title: this._translations.diff, onClick: () => this._toggleEditor(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '88443cfd2a8888447acc75588ecff7938ade5273', icon: "compare", scale: "s" })), h("calcite-button", { key: '42dcd8f63600d4ddb77eaedd529321999cf537b3', id: `${this.instanceid}-search`, appearance: "outline", color: "blue", title: this._translations.search, onClick: () => this._search(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '31e8ced3f14f1475c62133fbd7730e34b2bc4028', icon: "search", scale: "s" })), h("calcite-button", { key: '769b268d7476f3fe1a8623e9432cfae56602db0c', id: `${this.instanceid}-reset`, color: "blue", appearance: "solid", disabled: true, title: this._translations.cancelEdits, onClick: () => this._reset(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '4a8ead1dbf8fefe8b4106a0f6f9c42fb5b875cd2', icon: "reset", scale: "s" })))), h("div", { key: '98f29030a0fa0ecbce0d165840a30edd655ba249', class: "edit-parent" }, h("div", { key: '1441e32a184bc24f2a0a25fcb855c41b40bd0cec', id: `${this.instanceid}-container`, class: "json-edit-container" }), h("div", { key: 'f0cf0a3bd11d3f8102c4cc8695ac1743bac36bbb', id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -91,22 +91,20 @@ export class LayerList {
      */
     async componentWillLoad() {
         await this._getTranslations();
-        this._isLoading = true;
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
      */
     async componentDidLoad() {
         await this.setLayers();
-        this._isLoading = false;
     }
     /**
      * Renders the component.
      */
     render() {
-        return (h(Fragment, { key: '96f61a2b92d352cdc341961c54b9fdfb06bab6fc' }, this._isLoading && h("calcite-loader", { key: '948c5a101fe19294dbc99a5d015c4f08c3db7f24', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
-            h("calcite-notice", { key: '23a73833e78b0c0009453ecfbf9bc000f2f7ff33', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: 'da338486c22d7d70499713e22d45bd343c752e38', slot: "title" }, this._translations.error), h("div", { key: '751c99a20af04f7253a518181d02a353e7f1b6b8', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            h("calcite-list", { key: '09c24ccb0ce715bc0606302af41571b5594e64b5', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
+        return (h(Fragment, { key: 'f8e0c21d4ff87d663a1e0f00f1d9ef1123091db9' }, this._isLoading && h("calcite-loader", { key: '42058be6b41126e58d33895bc237b174e55a16ed', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
+            h("calcite-notice", { key: '89d9073a156f07379699cc5b67bf9ba54654cc68', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: '730b8dcca79bd45a7a6eecb5030626d1dcd01238', slot: "title" }, this._translations.error), h("div", { key: '656e8276ffab75734909348f49f11492de1d5a8b', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
+            h("calcite-list", { key: '1d2206d3163b6c5ed8511e32ab296f0025889824', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
@@ -120,7 +118,9 @@ export class LayerList {
      */
     async setLayers() {
         if (this.mapView) {
+            this._isLoading = true;
             await this.initLayerHash();
+            this._isLoading = false;
         }
     }
     /**

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

@@ -148,4 +148,10 @@ html[dir="rtl"] .share-action {
   --calcite-color-border-input: var(--calcite-color-border-3);
   width: 60%;
   padding: 10px;
+}
+
+.delete-red {
+  --calcite-icon-color: var(--calcite-color-status-danger);
+  --calcite-color-text-1: var(--calcite-color-status-danger);
+  --calcite-color-text-3: var(--calcite-color-status-danger);
 }

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

@@ -27,6 +27,7 @@ import * as downloadUtils from "../../utils/downloadUtils";
 import "@esri/instant-apps-components/dist/components/instant-apps-social-share";
 export class LayerTable {
     constructor() {
+        this.appLayout = undefined;
         this.defaultGlobalId = undefined;
         this.defaultLayerId = undefined;
         this.defaultOid = undefined;
@@ -55,6 +56,7 @@ export class LayerTable {
         this._filterOpen = false;
         this._layer = undefined;
         this._selectAllActive = false;
+        this._deleteDialogOpen = false;
         this._showHideOpen = false;
         this._showOnlySelected = false;
         this._toolInfos = undefined;
@@ -235,6 +237,12 @@ export class LayerTable {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Update the url params when the appLayout changes
+     */
+    appLayoutWatchHandler() {
+        this._updateShareUrl();
+    }
     /**
      * Handle url defaults when defaultOid is set
      */
@@ -521,11 +529,12 @@ export class LayerTable {
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         const showSearch = this._canShowFullTextSearch();
         this._validateActiveActions();
-        return (h(Host, { key: '46394d7e108068600980efd766fbf5d91243f3c9' }, h("calcite-shell", { key: 'd831121a56070552139386033b02ddc2531c29e9' }, this._getTableControlRow("header"), h("div", { key: '591e0b0bba19f1dbe99049a470b5d3c04253a2c2', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'd70244a3c989a5bea8bbbaf33c4ebe9c04fc4515', class: "height-full width-full" }, showSearch &&
-            h("div", { key: 'fd14c6dab7898e27bd61bbc03878c898d26f042a', class: "search-container" }, h("calcite-input", { key: '9675cc22233456446be8a6b9fc24842fbb3f88e2', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), h("calcite-loader", { key: '74447458a0ac4cee6934e7101a5fee2c180d1330', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '6c2a5ff4a69690fde002005eb9c55047c25ad63d', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '04fccaaa9862ed315d99ad74f7e1135dd5656613' }, h("calcite-shell", { key: 'e332d781be1499857a5e17e37ad2e058bba453b1' }, this._getTableControlRow("header"), h("div", { key: '6337e494f879c250494c5f5859daec627fdd0700', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'd0d437997906fd15f97765cb89c3917f66b20c37', class: "height-full width-full" }, showSearch &&
+            h("div", { key: '596a2d54fd707941d9e2ec167598313d9ee9b295', class: "search-container" }, h("calcite-input", { key: '31cd1ffb09bc2c6c9c1f9daf39f3e9549cbceeb2', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), h("calcite-loader", { key: 'b4ba3d32fb346134672e08d55428bd38ac43f40d', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '4fbac73935be7a1163643543e6d77a200534e5e3', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
-            .replace("{{selected}}", selected))) : undefined), this.createFilterModal && this._filterModal()));
+            .replace("{{selected}}", selected))) : undefined), this.createFilterModal && this._filterModal(), h("delete-dialog", { key: '3b0dba8bc391d777f4687ad6f4e905aeb1eb580b', id: "deleteDialogId", ids: this._getIds(), layer: this._layer, onDeleteDialogClose: () => this._deleteDialogOpen = false, open: this._deleteDialogOpen, ref: (el) => this._deleteDialog = el })));
     }
+    _deleteDialog;
     /**
      * Called once after the component is loaded
      */
@@ -828,7 +837,7 @@ export class LayerTable {
                     icon: "trash",
                     indicator: undefined,
                     label: this._translations.delete,
-                    func: () => undefined,
+                    func: () => this._showDelete(),
                     disabled: !featuresSelected,
                     isDanger: true,
                     isOverflow: false
@@ -1068,7 +1077,7 @@ export class LayerTable {
     _getDropdown(id) {
         const dropdownItems = this._getDropdownItems();
         return dropdownItems.length > 0 ? (h("calcite-dropdown", { closeOnSelectDisabled: true, disabled: this._layer === undefined, id: "solutions-more", onCalciteDropdownBeforeClose: () => this._forceShowHide(), ref: (el) => this._moreDropdown = el }, h("calcite-action", { appearance: "solid", id: id, label: "", onClick: () => this._closeShowHide(), slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, dropdownItems.map(item => {
-            return (h("calcite-dropdown-group", { class: item.disabled ? "disabled" : "", selectionMode: "none" }, h("calcite-dropdown-item", { disabled: item.loading, iconStart: item.isSublist && this._showHideOpen ? "chevron-down" : item.loading ? "" : item.icon, id: `layer-table-${item.icon}`, onClick: item.func }, item.loading ? (h("div", { class: "display-flex" }, h("calcite-loader", { inline: true, label: item.label, scale: "m" }), item.label)) : item.label)));
+            return (h("calcite-dropdown-group", { class: `${item.disabled ? "disabled" : ""} ${item.icon === "trash" ? "delete-red" : ""}`, selectionMode: "none" }, h("calcite-dropdown-item", { disabled: item.loading, iconStart: item.isSublist && this._showHideOpen ? "chevron-down" : item.loading ? "" : item.icon, id: `layer-table-${item.icon}`, onClick: item.func }, item.loading ? (h("div", { class: "display-flex" }, h("calcite-loader", { inline: true, label: item.label, scale: "m" }), item.label)) : item.label)));
         })), this._showHideOpen ? this._getFieldlist() : undefined)) : undefined;
     }
     /**
@@ -1093,6 +1102,15 @@ export class LayerTable {
         const _disabled = this._layer === undefined ? true : disabled;
         return (h("div", { class: "display-flex", id: this._getId(icon), slot: slot }, h("calcite-action", { active: active, appearance: "solid", disabled: _disabled, icon: icon, id: `layer-table-${icon}`, indicator: indicator, label: label, loading: loading, onClick: func, text: label, textEnabled: true }), this._getToolTip("bottom", icon, label)));
     }
+    /**
+     * Show the delete dialog
+     *
+     * @param
+     *
+     */
+    _showDelete() {
+        this._deleteDialogOpen = true;
+    }
     /**
      * Get an action and tooltip for share
      *
@@ -1131,6 +1149,7 @@ export class LayerTable {
         else {
             urlObj.searchParams.delete("oid");
         }
+        urlObj.searchParams.set("applayout", this.appLayout);
         this._shareNode.shareUrl = urlObj.href;
     }
     /**
@@ -1168,7 +1187,7 @@ export class LayerTable {
      */
     _getDangerAction(icon, label, func, disabled) {
         const _disabled = this._layer === undefined ? true : disabled;
-        return (h("div", { class: "display-flex", id: this._getId(icon) }, icon === "trash" ? (h("delete-button", { buttonType: "action", class: "display-flex", disabled: _disabled, icon: icon, ids: this._getIds(), layer: this._layer })) : (h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: label }, h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label))), this._getToolTip("bottom", icon, label)));
+        return (h("div", { class: "display-flex", id: this._getId(icon) }, icon === "trash" ? (h("delete-button", { buttonType: "action", class: "display-flex", disabled: _disabled, icon: icon, id: "solutions-delete", ids: this._getIds(), layer: this._layer })) : (h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: label }, h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label))), this._getToolTip("bottom", icon, label)));
     }
     /**
      * Return all currently selected IDs from the table
@@ -1176,7 +1195,7 @@ export class LayerTable {
      * @param number[] the selected ids
      */
     _getIds() {
-        return this._table.highlightIds.toArray();
+        return this._table?.highlightIds?.toArray();
     }
     /**
      * Store a reference to the table node after it's first created
@@ -1887,6 +1906,29 @@ export class LayerTable {
     }
     static get properties() {
         return {
+            "appLayout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AppLayout",
+                    "resolved": "\"mapView\" | \"splitView\" | \"tableView\"",
+                    "references": {
+                        "AppLayout": {
+                            "location": "import",
+                            "path": "../../utils/interfaces",
+                            "id": "src/utils/interfaces.ts::AppLayout"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "AppLayout: the current app layout"
+                },
+                "attribute": "app-layout",
+                "reflect": false
+            },
             "defaultGlobalId": {
                 "type": "unknown",
                 "mutable": false,
@@ -2243,6 +2285,7 @@ export class LayerTable {
             "_filterOpen": {},
             "_layer": {},
             "_selectAllActive": {},
+            "_deleteDialogOpen": {},
             "_showHideOpen": {},
             "_showOnlySelected": {},
             "_toolInfos": {},
@@ -2360,6 +2403,9 @@ export class LayerTable {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "appLayout",
+                "methodName": "appLayoutWatchHandler"
+            }, {
                 "propName": "defaultOid",
                 "methodName": "defaultOidWatchHandler"
             }, {

package/dist/collection/components/layout-manager/layout-manager.js

@@ -76,7 +76,7 @@ export class LayoutManager {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '1381320aa1041faf8f3b878891d604d37bc9ba75' }, h("div", { key: 'd7d36debd225ecb188238bb6a19c265729244800', class: "display-flex" }, h("div", { key: '176a1db9d59dedc3714cc594aae8c9715ab34680', class: "display-flex action-center" }, h("calcite-icon", { key: '9a05af6302133624f7dc65769dac2d613ba66853', class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), h("calcite-popover", { key: '4e3484d7403ad3ac2f2a30bac0b1e9b050e20840', closable: true, label: "", referenceElement: "app-information-icon" }, h("span", { key: '0a8d3607ebcb24b6ba0c7d7757cddf5f79faee49', class: "tooltip-message" }, this._translations.appInfo))), h("div", { key: '27ec5b7cadacbf763eabad8933bdec5b37b56c5c', class: "header-text" }, this._translations.layout), this._getAction("grid-background", ELayoutMode.GRID, this._translations.grid), this._getAction("vertical-background", ELayoutMode.VERTICAL, this._translations.vertical), this._getAction("horizontal-background", ELayoutMode.HORIZONTAL, this._translations.horizontal))));
+        return (h(Host, { key: '030b3a829da8eceb1ed2588ec9d0cf56e6c3b801' }, h("div", { key: 'c883b792dae7fd3118d50ca19529ad215812636a', class: "display-flex" }, h("div", { key: '24a8dacb438879ad29ad216d904c0c12229937c8', class: "display-flex action-center" }, h("calcite-icon", { key: 'd8ab7b953f906c807a5a3b8f6a38736e5da7308e', class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), h("calcite-popover", { key: 'f43e72d3edbb29dadd4d7bf16e0f2028f16fa515', closable: true, label: "", referenceElement: "app-information-icon" }, h("span", { key: '0059d393750540cbcfe0051a9440447c261ec99f', class: "tooltip-message" }, this._translations.appInfo))), h("div", { key: 'ea6e944271a0538cc6c8558c08c9940f9a84a6bf', class: "header-text" }, this._translations.layout), this._getAction("grid-background", ELayoutMode.GRID, this._translations.grid), this._getAction("vertical-background", ELayoutMode.VERTICAL, this._translations.vertical), this._getAction("horizontal-background", ELayoutMode.HORIZONTAL, this._translations.horizontal))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/list-flow-item/list-flow-item.js

@@ -62,7 +62,7 @@ export class ListFlowItem {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: 'eb0234045e0e914fd94b0afd15e9a41d57a9735f' }, h("slot", { key: 'bd2660cb4a2e04aa04445c8e446577bf4de27a4a' })));
+        return (h(Host, { key: 'e241883e9516ea61cd50c0f6b023bbc51870b4a1' }, h("slot", { key: 'ec5f8579ecdbee858ec2ec200e3183aacb19c9ba' })));
     }
     static get is() { return "list-flow-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/location-flow-item/location-flow-item.js

@@ -62,7 +62,7 @@ export class LocationFlowItem {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '243b7931b8af88376378b299e8b1ed947069cf97' }, h("slot", { key: '605d9a18fbd685a3477e97b2c7fd840fc6980118' })));
+        return (h(Host, { key: '65473b5e82ede7018cc249c583e09be2981172ed' }, h("slot", { key: '0d637e47de593df9cd1e716538742996d9de682e' })));
     }
     static get is() { return "location-flow-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,6 +23,7 @@ import { loadModules } from "../../utils/loadModules";
 import { joinAppProxies } from "templates-common-library-esm/functionality/proxy";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { getFeatureLayerView, goToSelection } from "../../utils/mapViewUtils";
+import "@esri/instant-apps-components/dist/components/instant-apps-social-share";
 // TODO navigation and accessability isn't right for the map list
 //   tab does not go into the list when it's open
 //   focus is not set when it opens
@@ -31,6 +32,7 @@ import { getFeatureLayerView, goToSelection } from "../../utils/mapViewUtils";
 // TODO map list should close if the user clicks something else...hope this will be easy when I figure out how to set focus when it opens
 export class MapCard {
     constructor() {
+        this.appLayout = undefined;
         this.appProxies = undefined;
         this.defaultWebmapId = "";
         this.defaultLayerId = undefined;
@@ -38,6 +40,7 @@ export class MapCard {
         this.enableLegend = undefined;
         this.enableFloorFilter = undefined;
         this.enableFullscreen = undefined;
+        this.enableShare = false;
         this.enableSingleExpand = true;
         this.enableSearch = undefined;
         this.enableBasemap = undefined;
@@ -55,6 +58,8 @@ export class MapCard {
         this.theme = undefined;
         this.toolOrder = undefined;
         this.isMapLayout = undefined;
+        this.shareIncludeEmbed = undefined;
+        this.shareIncludeSocial = undefined;
         this.selectedFeaturesIds = undefined;
         this.selectedLayer = undefined;
         this.zoomToScale = undefined;
@@ -143,6 +148,10 @@ export class MapCard {
      * ResizeObserver: The observer that watches for toolbar size changes
      */
     _resizeObserver;
+    /**
+     * HTMLInstantAppsSocialShareElement: Element to support app sharing to social media
+     */
+    _shareNode;
     /**
      * HTMLCalciteDropdownElement: Dropdown the will support show/hide of table columns
      */
@@ -172,12 +181,36 @@ export class MapCard {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Update the url params when the appLayout changes
+     */
+    appLayoutWatchHandler() {
+        this._updateShareUrl();
+    }
     /**
      * Add/remove home widget
      */
     enableHomeWatchHandler() {
         this._initHome();
     }
+    /**
+     * Update the toolbar when the share button is enabled/disabled
+     */
+    enableShareWatchHandler() {
+        // this should be caught by component did render and is when I test locally
+        // however have had reported case where it is not somehow on devext so adding explicit check here
+        if (this._toolbar) {
+            this._updateToolbar();
+        }
+    }
+    /**
+     * watch for changes in map view and get the first layer
+     */
+    async mapViewWatchHandler() {
+        if (this.mapView) {
+            this._updateShareUrl();
+        }
+    }
     /**
      * watch for changes in layer view and verify if it has editing enabled
      */
@@ -190,6 +223,7 @@ export class MapCard {
      * watch for features ids changes
      */
     async selectedFeaturesIdsWatchHandler() {
+        this._updateShareUrl();
         this._validateEnabledActions();
     }
     /**
@@ -218,12 +252,14 @@ export class MapCard {
      */
     async resetFilter() {
         this._filterActive = false;
+        this._updateShareUrl();
     }
     /**
      * updates the filter
      */
     async updateFilterState() {
         this._filterActive = this._definitionExpression !== this.selectedLayer.definitionExpression;
+        this._updateShareUrl();
     }
     /**
      * updates the layer in map layer picker
@@ -299,7 +335,7 @@ export class MapCard {
         const mapHeightClass = this.mapInfos?.length > 1 || this.isMapLayout ? "map-height" : "height-full";
         const progressClass = this.isMapLayout ? "" : "display-none";
         this._validateActiveActions();
-        return (h(Host, { key: '94d7399ed75c0e90487d6153a0d28ab6f722ae93' }, h("div", { key: 'e194d8800dd7a865e101d779d032d164f3e5562d', class: `${mapContainerClass} width-full`, ref: (el) => this._toolbar = el }, this._getActionBar(), !this.isMobile && this.isMapLayout && this._getDropdown("more-table-options")), h("calcite-progress", { key: '0abdbf4e8ba5861866aba7791dfdb91a7a5f4daa', class: progressClass, value: 0 }), h("div", { key: '83aa012aeef6ae64e49007d542fd949e7d4602f4', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { key: '229cc18b36885cad12d44c13e1fe37a97403b9d8', basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
+        return (h(Host, { key: 'd4e5ff9c4aa08a4effe19a54a1a48463cb8b3774' }, h("div", { key: '51ee35d267d5ef081a4c160de3e03b1790d328c8', class: `${mapContainerClass} width-full`, ref: (el) => this._toolbar = el }, this._getActionBar(), !this.isMobile && this.isMapLayout && this._getDropdown("more-table-options"), this.enableShare && !this.isMobile && this.isMapLayout ? this._getShare("share") : undefined), h("calcite-progress", { key: '70a5c232aae8a9ff6740fd326e6ba6fe61936541', class: progressClass, value: 0 }), h("div", { key: 'c399acc019d7f0a16dbb644eee4cfdd1e6e83c7c', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { key: 'c6a88ccfa140fe9b0d059f74b9254af6ef0997ce', basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
     }
     /**
      * Called each time after the component is loaded
@@ -318,6 +354,7 @@ export class MapCard {
             this._resizeObserver.observe(this._toolbar);
             this._observerSet = true;
         }
+        this._updateShareUrl();
     }
     //--------------------------------------------------------------------------
     //
@@ -396,6 +433,7 @@ export class MapCard {
                 mapView: this.mapView
             });
         }
+        this._updateShareUrl();
     }
     /**
      * Add/Remove tools from the action bar and dropdown based on available size
@@ -414,7 +452,7 @@ export class MapCard {
                     prev += cur.width;
                     return prev;
                 }, 0);
-                const skipControls = ["solutions-more", "solutions-map-layer-picker-container", "map-picker"];
+                const skipControls = ["solutions-more", "solutions-map-layer-picker-container", "map-picker", "solutions-action-share"];
                 if (controlsWidth > toolbarWidth) {
                     if (this._toolbarSizeInfos.length > 0) {
                         const controlsThatFit = [...this._toolbarSizeInfos].reverse().reduce((prev, cur) => {
@@ -540,6 +578,50 @@ export class MapCard {
             return (h("calcite-dropdown-group", { class: item.disabled ? "disabled" : "", selectionMode: "none" }, h("calcite-dropdown-item", { disabled: item.loading, iconStart: item.icon, id: "solutions-subset-list", onClick: item.func }, item.loading ? (h("div", { class: "display-flex" }, h("calcite-loader", { inline: true, label: item.label, scale: "m" }), item.label)) : item.label)));
         })))) : undefined;
     }
+    /**
+     * Get an action and tooltip for share
+     *
+     * @param icon string the name of the icon to display, will also be used in its id
+     *
+     * @returns VNode The node representing the DOM element that will contain the action
+     */
+    _getShare(icon) {
+        return (h("div", { class: "share-action", id: this._getId(icon) }, h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "instant-app-share", embed: this.shareIncludeEmbed, popoverButtonIconScale: "s", ref: el => {
+                this._shareNode = el;
+                this._updateShareUrl();
+            }, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", socialMedia: this.shareIncludeSocial, view: this.mapView }), this._getToolTip("bottom", icon, this._translations.share)));
+    }
+    /**
+     * Called each time the values that are used for custom url params change
+     */
+    _updateShareUrl() {
+        const url = this._shareNode?.shareUrl;
+        if (!url) {
+            return;
+        }
+        const urlObj = new URL(url);
+        //set the additional search params
+        if (this._loadedId) {
+            urlObj.searchParams.set("webmap", this._loadedId);
+        }
+        else {
+            urlObj.searchParams.delete("webmap");
+        }
+        if (this.selectedLayer?.id) {
+            urlObj.searchParams.set("layer", this.selectedLayer.id);
+        }
+        else {
+            urlObj.searchParams.delete("layer");
+        }
+        if (this.selectedFeaturesIds?.length > 0) {
+            urlObj.searchParams.set("oid", this.selectedFeaturesIds.join(","));
+        }
+        else {
+            urlObj.searchParams.delete("oid");
+        }
+        urlObj.searchParams.set("applayout", this.appLayout);
+        this._shareNode.shareUrl = urlObj.href;
+    }
     /**
      * Open show/hide dropdown
      * @protected
@@ -827,6 +909,29 @@ export class MapCard {
     }
     static get properties() {
         return {
+            "appLayout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AppLayout",
+                    "resolved": "\"mapView\" | \"splitView\" | \"tableView\"",
+                    "references": {
+                        "AppLayout": {
+                            "location": "import",
+                            "path": "../../utils/interfaces",
+                            "id": "src/utils/interfaces.ts::AppLayout"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "AppLayout: the current app layout"
+                },
+                "attribute": "app-layout",
+                "reflect": false
+            },
             "appProxies": {
                 "type": "any",
                 "mutable": false,
@@ -947,6 +1052,24 @@ export class MapCard {
                 "attribute": "enable-fullscreen",
                 "reflect": false
             },
+            "enableShare": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: when true the share widget will be available"
+                },
+                "attribute": "enable-share",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "enableSingleExpand": {
                 "type": "boolean",
                 "mutable": false,
@@ -1270,6 +1393,40 @@ export class MapCard {
                 "attribute": "is-map-layout",
                 "reflect": false
             },
+            "shareIncludeEmbed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When true the share options will include embed option"
+                },
+                "attribute": "share-include-embed",
+                "reflect": false
+            },
+            "shareIncludeSocial": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When true the share options will include social media sharing"
+                },
+                "attribute": "share-include-social",
+                "reflect": false
+            },
             "selectedFeaturesIds": {
                 "type": "unknown",
                 "mutable": false,
@@ -1516,8 +1673,17 @@ export class MapCard {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "appLayout",
+                "methodName": "appLayoutWatchHandler"
+            }, {
                 "propName": "enableHome",
                 "methodName": "enableHomeWatchHandler"
+            }, {
+                "propName": "enableShare",
+                "methodName": "enableShareWatchHandler"
+            }, {
+                "propName": "mapView",
+                "methodName": "mapViewWatchHandler"
             }, {
                 "propName": "selectedLayer",
                 "methodName": "selectedLayerWatchHandler"

package/dist/collection/components/map-draw-tools/map-draw-tools.js

@@ -183,7 +183,7 @@ export class MapDrawTools {
             "border" : "border esri-widget esri-sketch__panel";
         const undoRedoClass = this.drawMode === EDrawMode.SKETCH ?
             "display-none" : "esri-widget esri-sketch__panel border-left esri-sketch__section";
-        return (h(Host, { key: '5f82fce6481912c103d709b5fefa3a890d291943' }, h("div", { key: '464d32d718167c5e7e2636fa0184622477fc5464', class: containerClass }, h("div", { key: '52a11f9d1b8f1692e67a7e706de3741e43c40591', ref: (el) => { this._sketchElement = el; } }), h("div", { key: '3a529e4e358ec4890513d7fcbbceadabb9e66a18', class: undoRedoClass }, h("calcite-action", { key: '98b684a186a03fe8868bde1978d59c7618a7635a', disabled: !this.undoEnabled, icon: "undo", onClick: () => this._undo(), scale: "s", text: this._translations.undo }), h("calcite-action", { key: 'b1d769fd984ecf7cf9e868029cc7a5aba5a39dc7', disabled: !this.redoEnabled, icon: "redo", onClick: () => this._redo(), scale: "s", text: this._translations.redo })))));
+        return (h(Host, { key: 'c6717ea80242f622168f49efeaf2cebf497ca09e' }, h("div", { key: '2dd805c704381cb411d69b757072371d91fb243d', class: containerClass }, h("div", { key: '28b81cb37f3e11f66656195fc10b4c170f8d8fe9', ref: (el) => { this._sketchElement = el; } }), h("div", { key: 'a6de7ee6dbf4f02eb355c032c7bd9bf4ec4426e9', class: undoRedoClass }, h("calcite-action", { key: '2efeab5db057e1657c3639a39ae4d4150d331776', disabled: !this.undoEnabled, icon: "undo", onClick: () => this._undo(), scale: "s", text: this._translations.undo }), h("calcite-action", { key: '770693e30a6cfb58f593bb471342ea34556fc8d4', disabled: !this.redoEnabled, icon: "redo", onClick: () => this._redo(), scale: "s", text: this._translations.redo })))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/map-fullscreen/map-fullscreen.js

@@ -95,7 +95,7 @@ export class MapFullscreen {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '9fc5dfeffc8601763b27e001311ec317934ebcae' }, h("div", { key: '65f2ab96d7283a9a10a113be0cdef6a95de1ee1b', class: "fullscreen-widget", ref: (el) => { this._fullscreenElement = el; } })));
+        return (h(Host, { key: '350ebb01c52631c9441b6554f5b8e26f8ca1418e' }, h("div", { key: 'b09344b721da2cc18b74fb21f8017446ba5baa03', class: "fullscreen-widget", ref: (el) => { this._fullscreenElement = el; } })));
     }
     /**
      * StencilJS: Called just after the component updates.

package/dist/collection/components/map-layer-picker/map-layer-picker.js

@@ -160,7 +160,7 @@ export class MapLayerPicker {
         const id = "map-layer-picker";
         let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
         style = { ...style, "display": this.display };
-        return (h(Host, { key: 'e858ff58778eb1a40b40609f44705d9580ddd489' }, h("div", { key: '729c3ba4d508d02f79a2dd4856aef5c5662720d7', class: "map-layer-picker-container", style: style }, h("div", { key: '9055f9db9bc811797002ecb86da34e17b9cf77be', class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
+        return (h(Host, { key: 'a876ec719aede5ec43af1b40f09e4c9e6b693f34' }, h("div", { key: '78e720facdf3c124208ff8dbde18a056234e63ac', class: "map-layer-picker-container", style: style }, h("div", { key: '6bb47ccb7c28565b140d79b6af6399a235e3ccf9', class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
             !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
                 this.type === "combobox" ? this._getCombobox(id) :
                     this.type === "select" ? this._getSelect(id) : this._getDropdown(id)))));

package/dist/collection/components/map-legend/map-legend.js

@@ -86,7 +86,7 @@ export class MapLegend {
      * StencilJS: Renders the component.
      */
     render() {
-        return (h(Host, { key: 'f520dd3737b8b883d8e27eb9a63da25f6d5b9375' }, h("div", { key: '6775e1c58ecd4fe63d50358fe2cd4f050cb1d709', ref: (el) => { this._legendElement = el; } })));
+        return (h(Host, { key: '2c5cfbfd4048347ace5ff3cf17d411e85454be7a' }, h("div", { key: '3927ef8af3a4a93fbd558480a96f982ca5b477a2', ref: (el) => { this._legendElement = el; } })));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.