@esri/solutions-components 5.1.0-next.158 → 5.1.0-next.159

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

@@ -1,23 +1,27 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as v } from "../../chunks/runtime.js";
-import { e as I, g as T, c as E } from "../../chunks/mapViewUtils.js";
-import { b as x } from "../../chunks/queryUtils.js";
-import { d as F } from "../../chunks/downloadUtils.js";
+import { c as E } from "../../chunks/runtime.js";
+import { e as I, g as T, c as v } from "../../chunks/mapViewUtils.js";
+import { b as F } from "../../chunks/queryUtils.js";
+import { d as x } from "../../chunks/downloadUtils.js";
 import { b as g } from "../../chunks/interfaces.js";
 import { defineCustomElements as S } from "@arcgis/instant-apps-components/loader";
 import { u as O } from "../../chunks/useT9n.js";
-import { css as C, html as o, nothing as u } from "lit";
+import { css as C, html as c, nothing as u } from "lit";
 import { createRef as y, ref as b } from "lit-html/directives/ref.js";
-import { LitElement as A, createEvent as c, noShadowRoot as H, safeClassMap as m } from "@arcgis/lumina";
+import { LitElement as A, createEvent as o, noShadowRoot as H, safeClassMap as m } from "@arcgis/lumina";
 import { f as L } from "../../chunks/helpers.js";
 import $ from "@arcgis/core/widgets/FeatureTable.js";
 import * as p from "@arcgis/core/core/reactiveUtils.js";
 import D from "@arcgis/core/rest/support/RelationshipQuery.js";
 import w from "@arcgis/core/widgets/FeatureTable/support/TableTemplate.js";
 const M = C`@layer{:host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.width-full{width:100%}.display-flex{display:flex}.display-none{display:none}.table-border{border:1px solid var(--calcite-color-border-2)}.border-end{border-inline-end:1px solid var(--calcite-color-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51-px{height:51px}.height-50-px{height:50px}.bottom-left{position:absolute;left:0;bottom:0;padding-left:5px}html[dir=rtl] .bottom-left{position:absolute;right:0;bottom:0;padding-right:5px}.height-19{height:19px}.background{background-color:var(--calcite-color-surface-1)}.text-color{color:var(--calcite-color-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-color-status-danger)}.esri-feature-table vaadin-grid{border:none!important}vaadin-grid-cell-content{font-size:14px!important;color:var(--calcite-color-text-3)!important}.absolute-right{position:absolute;right:0;left:unset}html[dir=rtl] .absolute-right{left:0;right:unset}.disabled{cursor:default!important;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.actions-end{height:50px!important;display:inline-flex}.border-top{border-top:1px solid var(--calcite-color-border-2)}.modal{--calcite-dialog-content-space: 0}.esri-feature-table__table-container{height:100%}.search-container{background-color:var(--calcite-color-surface-2)!important}.search{--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)}.label-override{white-space:nowrap}.padding-start-1-4{padding-inline-start:.5rem}.panel-header-override{--calcite-panel-header-content-space: 0px}.danger-label-color{color:var(--calcite-color-status-danger)}.danger-icon-color{--calcite-icon-color: var(--calcite-color-status-danger)}.width-51{width:51px}.height-51{height:51px}calcite-action-bar{--calcite-internal-action-bar-gap: 0px;--calcite-internal-action-bar-padding: 0px}}`;
-class R extends A {
+class k extends A {
   constructor() {
-    super(), this.defaultGlobalId = [], this.defaultLayerId = "", this.defaultOid = [], this.enableAutoRefresh = !1, this.enableColumnReorder = !0, this.enableCSV = !1, this.enableInlineEdit = !1, this.enableShare = !1, this.enableTableAutosave = !0, this.featureSelectionMode = "multiple", this.selectedRelatedIds = [], this.honorMapFieldSettings = !1, this.isMobile = !1, this.mapHidden = !1, this.showOnlyUpdatableLayers = !1, this.selectedIds = [], this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.showNewestFirst = !1, this.zoomAndScrollToSelected = !1, this.pasteEnabled = !1, this.showCopyPasteActions = !1, this.layerIds = [], this._allIds = [], this._configLayerOrderDefined = !1, this._csvExporting = !1, this._fetchingData = !1, this._hideTable = !1, this._filterActive = !1, this._selectAllActive = !1, this._showHideOpen = !1, this._showOnlySelected = !1, this._toolInfos = [], this._translations = O({ name: "layer-table", blocking: !0 }), this._fullTextSearchInfo = [], this._searchPlaceHolder = "", this._size = 0, this._queryingData = !1, this._editEnabled = !1, this._enabledLayerIds = [], this._defaultGlobalIdHonored = !1, this._defaultOidHonored = !1, this._deleteEnabled = !1, this._floorExpression = "", this._floorField = "", this._floorLevel = "", this._loaded = !1, this._shareNode = y(), this._toolbar = y(), this._searchExpression = "", this._skipEditCheck = !1, this._tempSelectedIds = [], this._outOFExtentOids = [], this._shouldUpdateTableOnExtentChange = !0, this._creatingFeature = !1, this._searchNode = y(), this._layerEditsHandles = [], this._pastedFeaturesIds = [], this._shouldSelectCreatedFeatures = !1, this.columnReorder = c(), this.featureSelectionChange = c(), this.toggleFilter = c(), this.showDelete = c(), this.relatedRecordToggled = c(), this.editMultipleFeatures = c(), this.copyFeatures = c(), this.pasteFeatures = c(), this.featuresAdded = c(), this.initCreateComponent = c(), this.requestLayerSelectionChange = c(), this.listenOn(window, "beforeMapInfoChange", this.beforeMapInfoChange, { capture: !0 }), this.listenOn(window, "editorInitialized", this.editorInitialized), this.listenOn(window, "closeEdit", this.closeEdit), this.listenOn(window, "selectionChanged", this.selectionChanged), this.listenOn(window, "beforeLayerSelectionChange", this.beforeLayerSelectionChange), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "editsComplete", this.editsComplete), this.listenOn(window, "facilityChanged", this.facilityChanged), this.listenOn(window, "levelChanged", this.levelChanged), this.listenOn(window, "siteChanged", this.siteChanged), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "clearSelection", this.clearSelection), this.listenOn(window, "mapChanged", this.mapChanged), this.listenOn(window, "featuresSelected", this.featuresSelected), this.listenOn(window, "createWorkFlowStarted", this.createWorkFlowStarted), this.listenOn(window, "backFromCreateWorkFlow", this.backFromCreateWorkFlow), this.listenOn(window, "pasteFeatures", this._pasteFeatures), this.listenOn(window, "featuresPasted", this._featuresPasted), S(window);
+    super(), this.defaultGlobalId = [], this.defaultLayerId = "", this.defaultOid = [], this.enableAutoRefresh = !1, this.enableColumnReorder = !0, this.enableCSV = !1, this.enableInlineEdit = !1, this.enableShare = !1, this.enableTableAutosave = !0, this.featureSelectionMode = "multiple", this.selectedRelatedIds = [], this.honorMapFieldSettings = !1, this.isMobile = !1, this.mapHidden = !1, this.showOnlyUpdatableLayers = !1, this.selectedIds = [], this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.showNewestFirst = !1, this.zoomAndScrollToSelected = !1, this.pasteEnabled = !1, this.showCopyPasteActions = !1, this.layerIds = [], this._allIds = [], this._configLayerOrderDefined = !1, this._csvExporting = !1, this._fetchingData = !1, this._hideTable = !1, this._filterActive = !1, this._selectAllActive = !1, this._showHideOpen = !1, this._showOnlySelected = !1, this._toolInfos = [], this._translations = O({ name: "layer-table", blocking: !0 }), this._fullTextSearchInfo = [], this._searchPlaceHolder = "", this._size = 0, this._queryingData = !1, this._editEnabled = !1, this._enabledLayerIds = [], this._defaultGlobalIdHonored = !1, this._defaultOidHonored = !1, this._deleteEnabled = !1, this._floorExpression = "", this._floorField = "", this._floorLevel = "", this._loaded = !1, this._shareNode = y(), this._toolbar = y(), this._searchExpression = "", this._skipEditCheck = !1, this._tempSelectedIds = [], this._outOFExtentOids = [], this._shouldUpdateTableOnExtentChange = !0, this._creatingFeature = !1, this._searchNode = y(), this._layerEditsHandles = [], this._pastedFeaturesIds = [], this._shouldSelectCreatedFeatures = !1, this.columnReorder = o(), this.featureSelectionChange = o(), this.toggleFilter = o(), this.showDelete = o(), this.relatedRecordToggled = o(), this.editMultipleFeatures = o(), this.copyFeatures = o(), this.pasteFeatures = o(), this.featuresAdded = o(), this.initCreateComponent = o(), this.requestLayerSelectionChange = o(), this.beforeFeatureSelectionChange = o(), this.continueEditing = o(), this.createFeatureEditorInitialized = (e) => {
+      this._createFeatureEditor = e.detail;
+    }, this.createFeatureEditorClosed = () => {
+      this._createFeatureEditor = void 0;
+    }, this.listenOn(window, "beforeMapInfoChange", this.beforeMapInfoChange, { capture: !0 }), this.listenOn(window, "editorInitialized", this.editorInitialized), this.listenOn(window, "createFeatureEditorInitialized", this.createFeatureEditorInitialized), this.listenOn(window, "createFeatureEditorClosed", this.createFeatureEditorClosed), this.listenOn(window, "closeEdit", this.closeEdit), this.listenOn(window, "selectionChanged", this.selectionChanged), this.listenOn(window, "beforeLayerSelectionChange", this.beforeLayerSelectionChange), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "editsComplete", this.editsComplete), this.listenOn(window, "facilityChanged", this.facilityChanged), this.listenOn(window, "levelChanged", this.levelChanged), this.listenOn(window, "siteChanged", this.siteChanged), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "clearSelection", this.clearSelection), this.listenOn(window, "mapChanged", this.mapChanged), this.listenOn(window, "featuresSelected", this.featuresSelected), this.listenOn(window, "createWorkFlowStarted", this.createWorkFlowStarted), this.listenOn(window, "backFromCreateWorkFlow", this.backFromCreateWorkFlow), this.listenOn(window, "pasteFeatures", this._pasteFeatures), this.listenOn(window, "featuresPasted", this._featuresPasted), S(window);
   }
   static {
     this.properties = { appLayout: 1, defaultGlobalId: 0, defaultLayerId: 1, defaultOid: 0, enableAutoRefresh: 5, enableColumnReorder: 5, enableCSV: 5, enableInlineEdit: 5, enableShare: 5, enableTableAutosave: 5, featureSelectionMode: 1, selectedRelatedIds: 0, honorMapFieldSettings: 5, isMobile: 5, mapHidden: 5, mapInfo: 0, mapView: 0, showOnlyUpdatableLayers: 5, selectedIds: 0, shareIncludeEmbed: 5, shareIncludeSocial: 5, showNewestFirst: 5, zoomAndScrollToSelected: 5, zoomToScale: 9, pasteEnabled: 5, showCopyPasteActions: 5, layerIds: 0, _allIds: 16, _configLayerOrderDefined: 16, _csvExporting: 16, _fetchingData: 16, _hideTable: 16, _filterActive: 16, _layer: 16, _selectAllActive: 16, _showHideOpen: 16, _showOnlySelected: 16, _toolInfos: 16, _translations: 16, _fullTextSearchInfo: 16, _searchPlaceHolder: 16, _size: 16, _queryingData: 16 };
@@ -126,7 +130,7 @@ class R extends A {
   async beforeMapInfoChange(e) {
     const t = e.detail.ref, i = e.detail.mapInfo;
     if (this._hasPendingEdits()) {
-      e.preventDefault();
+      e.preventDefault(), this._skipEditCheck = !1;
       const a = await this._validateActiveEdits([], this.selectedIds);
       await t.setMapByID(a ? i.id : e.detail.currentId, !a);
     }
@@ -150,7 +154,9 @@ class R extends A {
   async beforeLayerSelectionChange(e) {
     if (this._hasPendingEdits()) {
       e.preventDefault();
-      const i = e.detail.ref, s = await this._validateActiveEdits([], this.selectedIds);
+      const i = e.detail.ref;
+      this._skipEditCheck = !1;
+      const s = await this._validateActiveEdits([], this.selectedIds);
       return e.detail.selectedIds ? await i.setLayerByIds(s ? e.detail.newIds : e.detail.currentIds, !0) : await i.setLayerById(s ? e.detail.newId : e.detail.currentId, !0);
     }
   }
@@ -202,9 +208,9 @@ class R extends A {
   }
   render() {
     const e = this._fetchingData || this._hideTable ? "display-none" : "height-full", t = this._fetchingData ? "" : "display-none", i = this._queryingData ? "" : "display-none", s = this._size.toString(), a = this.selectedIds.length.toString(), l = this.isMobile ? "height-full" : "height-full-adjusted", h = this._canShowFullTextSearch();
-    return this._validateActiveActions(), o`<div><calcite-scrim class=${m(i)} .loading=${this._queryingData}></calcite-scrim><calcite-shell><div class=${`width-full ${l}`}><calcite-panel class="height-full width-full panel-header-override">${this._getMapLayerPicker("header-actions-start")}${!this.isMobile && o`${this._getTableControlRow("header-content")}${this._getActionsEnd("header-actions-end")}` || ""}${h && o`<div class="search-container border-bottom"><calcite-input class=search clearable icon=search @calciteInputChange=${(r) => {
+    return this._validateActiveActions(), c`<div><calcite-scrim class=${m(i)} .loading=${this._queryingData}></calcite-scrim><calcite-shell><div class=${`width-full ${l}`}><calcite-panel class="height-full width-full panel-header-override">${this._getMapLayerPicker("header-actions-start")}${!this.isMobile && c`${this._getTableControlRow("header-content")}${this._getActionsEnd("header-actions-end")}` || ""}${h && c`<div class="search-container border-bottom"><calcite-input class=search clearable icon=search @calciteInputChange=${(r) => {
       this._searchTextChanged(r);
-    }} .placeholder=${this._searchPlaceHolder} title=${this._searchPlaceHolder ?? u} type=search ${b(this._searchNode)}></calcite-input></div>` || ""}<calcite-loader class=${m(t)} .label=${this._translations.fetchingData} scale=l></calcite-loader><div class=${m(e)} ${b(this.onTableNodeCreate)}></div></calcite-panel></div>${this.isMobile ? void 0 : o`<div class="bottom-left text-color height-19" id=solutions-selected-count-div>${(this._translations.recordsTotal?.replace("{{total-number-of-records}}", s) + " | " + this._translations.recordsSelected.replace("{{selected-number-of-records}}", a)).replace("{{total}}", s).replace("{{selected}}", a)}</div>`}</calcite-shell></div>`;
+    }} .placeholder=${this._searchPlaceHolder} title=${this._searchPlaceHolder ?? u} type=search ${b(this._searchNode)}></calcite-input></div>` || ""}<calcite-loader class=${m(t)} .label=${this._translations.fetchingData} scale=l></calcite-loader><div class=${m(e)} ${b(this.onTableNodeCreate)}></div></calcite-panel></div>${this.isMobile ? void 0 : c`<div class="bottom-left text-color height-19" id=solutions-selected-count-div>${(this._translations.recordsTotal?.replace("{{total-number-of-records}}", s) + " | " + this._translations.recordsSelected.replace("{{selected-number-of-records}}", a)).replace("{{total}}", s).replace("{{selected}}", a)}</div>`}</calcite-shell></div>`;
   }
   updated() {
     this._table && this.updateRelatedAttachmentColumns();
@@ -268,7 +274,7 @@ class R extends A {
   }
   _getMapLayerPicker(e) {
     const t = this.isMobile ? "display-none" : "";
-    return o`<div class=${`border-end ${t}`} id=solutions-map-layer-picker-container slot=${e ?? u}><map-layer-picker appearance=transparent .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} display=inline-flex .enabledLayerIds=${this._enabledLayerIds} height=50 .isMobile=${this.isMobile} .mapView=${this.mapView} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} placeholder-icon=layers scale=l .selectedIds=${this._layer ? [this._layer?.id] : []} show-single-layer-as-label show-tables type=dropdown></map-layer-picker></div>`;
+    return c`<div class=${`border-end ${t}`} id=solutions-map-layer-picker-container slot=${e ?? u}><map-layer-picker appearance=transparent .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} display=inline-flex .enabledLayerIds=${this._enabledLayerIds} height=50 .isMobile=${this.isMobile} .mapView=${this.mapView} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} placeholder-icon=layers scale=l .selectedIds=${this._layer ? [this._layer?.id] : []} show-single-layer-as-label show-tables type=dropdown></map-layer-picker></div>`;
   }
   _getLayerOption(e) {
     let t;
@@ -277,13 +283,13 @@ class R extends A {
   _getActionsEnd(e) {
     const t = this._relatedFeatureTable ? this._relatedFeatureTable.layer : this._layer, i = this._relatedFeatureTable || this._table;
     let s = this._getLayerOption(t?.id || "");
-    return o`<div class="display-flex" slot=${e ?? u}><field-selection .configExtraFields=${s?.extraFields} .layer=${t} .mapView=${this.mapView} .table=${i} .tableRef=${this.el}></field-selection>${this.enableShare && !this.isMobile ? this._getShare("share") : void 0}</div>`;
+    return c`<div class="display-flex" slot=${e ?? u}><field-selection .configExtraFields=${s?.extraFields} .layer=${t} .mapView=${this.mapView} .table=${i} .tableRef=${this.el}></field-selection>${this.enableShare && !this.isMobile ? this._getShare("share") : void 0}</div>`;
   }
   _getTableControlRow(e) {
-    return o`<div class=${"height-51-px width-full display-flex"} slot=${e ?? u} ${b(this._toolbar)}>${this._getActionBar()}</div>`;
+    return c`<div class=${"height-51-px width-full display-flex"} slot=${e ?? u} ${b(this._toolbar)}>${this._getActionBar()}</div>`;
   }
   _getActionBar() {
-    return o`<calcite-action-bar class=width-full expand-disabled id=${this._getId("bar") ?? u} layout=horizontal><calcite-action-group>${this.isMobile ? void 0 : this._getActions()}</calcite-action-group></calcite-action-bar>`;
+    return c`<calcite-action-bar class=width-full expand-disabled id=${this._getId("bar") ?? u} layout=horizontal><calcite-action-group>${this.isMobile ? void 0 : this._getActions()}</calcite-action-group></calcite-action-bar>`;
   }
   _getActions() {
     return this._toolInfos?.reduce((e, t) => (t && e.push(t.isDanger ? this._getDangerAction(t.icon, t.label, t.func, t.disabled) : this._getAction(t.active, t.icon, t.indicator, t.label, t.func, t.disabled, !!t.loading, t.toolTip)), e), []);
@@ -435,7 +441,7 @@ class R extends A {
           if (this._shouldSelectCreatedFeatures) {
             await this._selectFeatures(n, i), i === f && this.featuresAdded.emit(n);
             return;
-          } else i === f && n.length > 0 ? (this._searchExpression && (await this._refresh(), this._clearSelection(), await this._searchFullText()), await this._refresh(), this.initCreateComponent.emit()) : i === f && d.length > 0 && this._searchExpression && (await this._selectFeatures(d, i), await this._refresh());
+          } else i === f && n.length > 0 ? (this._searchExpression && (await this._refresh(!1, !0), this._clearSelection(), await this._searchFullText()), await this._refresh(!1, !0), this.initCreateComponent.emit()) : i === f && d.length > 0 && this._searchExpression && (await this._selectFeatures(d, i), await this._refresh());
         });
         a && this._layerEditsHandles.push(a);
       }
@@ -472,7 +478,7 @@ class R extends A {
   }
   _getAction(e, t, i, s, a, l, h, r) {
     const n = this._layer === void 0 ? !0 : l;
-    return o`<calcite-action .active=${e} .disabled=${n} .icon=${t} .id=${`layer-table-${t}`} .indicator=${i} .label=${s} .loading=${h} @click=${a} text text-enabled><div class="display-flex"><span class="label-override padding-start-1-4">${s}</span></div></calcite-action>${this._getToolTip("auto", `layer-table-${t}`, r)}`;
+    return c`<calcite-action .active=${e} .disabled=${n} .icon=${t} .id=${`layer-table-${t}`} .indicator=${i} .label=${s} .loading=${h} @click=${a} text text-enabled><div class="display-flex"><span class="label-override padding-start-1-4">${s}</span></div></calcite-action>${this._getToolTip("auto", `layer-table-${t}`, r)}`;
   }
   _showDelete() {
     this.showDelete.emit({
@@ -480,7 +486,7 @@ class R extends A {
     });
   }
   _getShare(e) {
-    return o`<div id=${this._getId(e) ?? u}><instant-apps-social-share class="height-51 width-51 display-flex" .embed=${this.shareIncludeEmbed} flip-rtl popover-button-icon-scale=s scale=m share-button-color=neutral share-button-type=action .socialMedia=${this.shareIncludeSocial} .view=${this.mapView} ${b(this._shareNode)}></instant-apps-social-share>${this._getToolTip("bottom", e, this._translations.share)}</div>`;
+    return c`<div id=${this._getId(e) ?? u}><instant-apps-social-share class="height-51 width-51 display-flex" .embed=${this.shareIncludeEmbed} flip-rtl popover-button-icon-scale=s scale=m share-button-color=neutral share-button-type=action .socialMedia=${this.shareIncludeSocial} .view=${this.mapView} ${b(this._shareNode)}></instant-apps-social-share>${this._getToolTip("bottom", e, this._translations.share)}</div>`;
   }
   _updateShareUrl() {
     const e = this._shareNode.value?.shareUrl;
@@ -490,14 +496,14 @@ class R extends A {
     this.mapInfo?.id ? t.searchParams.set("webmap", this.mapInfo.id) : t.searchParams.delete("webmap"), this._layer?.id ? t.searchParams.set("layer", this._layer.id) : t.searchParams.delete("layer"), this.selectedIds?.length > 0 ? t.searchParams.set("oid", this.selectedIds.reverse().join(",")) : t.searchParams.delete("oid"), this.appLayout && t.searchParams.set("applayout", this.appLayout), this.selectedRelatedIds?.length > 0 && this._relatedFeatureTable?.layer?.id && (t.searchParams.set("oid", this.selectedRelatedIds.join(",")), t.searchParams.set("layer", this._relatedFeatureTable?.layer?.id.toString())), this._shareNode.value && (this._shareNode.value.autoUpdateShareUrl = !1, this._shareNode.value.shareUrl = t.href);
   }
   _getToolTip(e, t, i) {
-    return o`<calcite-tooltip .placement=${e} .referenceElement=${t}><span>${i}</span></calcite-tooltip>`;
+    return c`<calcite-tooltip .placement=${e} .referenceElement=${t}><span>${i}</span></calcite-tooltip>`;
   }
   _getId(e) {
     return `solutions-action-${e}`;
   }
   _getDangerAction(e, t, i, s) {
     const a = this._layer === void 0 ? !0 : s;
-    return o`<calcite-action class="delete-red" .disabled=${a} .id=${`layer-table-${e}`} .label=${t} @click=${i} text text-enabled><calcite-icon aria-hidden=true class="danger-icon-color" .icon=${e} scale=s></calcite-icon><span class="label-override padding-start-1-4 danger-label-color">${t}</span></calcite-action>${this._getToolTip("bottom", `layer-table-${e}`, t)}`;
+    return c`<calcite-action class="delete-red" .disabled=${a} .id=${`layer-table-${e}`} .label=${t} @click=${i} text text-enabled><calcite-icon aria-hidden=true class="danger-icon-color" .icon=${e} scale=s></calcite-icon><span class="label-override padding-start-1-4 danger-label-color">${t}</span></calcite-action>${this._getToolTip("bottom", `layer-table-${e}`, t)}`;
   }
   _getIds() {
     let e = this._relatedFeatureTable ?? this._table;
@@ -587,15 +593,17 @@ class R extends A {
   }
   async _validateActiveEdits(e, t) {
     let i = !0;
-    if (this._editor && !this._skipEditCheck) {
+    if ((this._editor || this._createFeatureEditor) && !this._skipEditCheck) {
       if (this._hasPendingEdits()) {
+        this.beforeFeatureSelectionChange.emit();
         let a = !1;
         try {
-          this._editor.activeWorkflow && await this._editor.activeWorkflow.cancel({ force: !1 });
+          this._editor?.activeWorkflow && await this._editor.activeWorkflow.cancel({ force: !1 }), this._createFeatureEditor?.activeWorkflow && await this._createFeatureEditor.activeWorkflow.cancel({ force: !1 });
         } catch (l) {
           a = l?.name === "workflow:cancel-denied";
         }
         if (a) {
+          this.continueEditing.emit();
           const l = this._relatedFeatureTable && this._relatedFeatureTable.highlightIds.length > 0 ? this._relatedFeatureTable : this._table;
           i = !1, this._skipEditCheck = !0, e.length > 0 ? l?.highlightIds.removeMany(e) : t.length > 0 && l?.highlightIds.addMany(t);
         }
@@ -605,7 +613,8 @@ class R extends A {
     return this._shouldUpdateTableOnExtentChange = i, i;
   }
   _hasPendingEdits() {
-    return this._editor?.activeWorkflow?.activeWorkflow?.hasPendingEdits;
+    const e = this._editor?.activeWorkflow?.activeWorkflow?.hasPendingEdits, t = this._createFeatureEditor?.activeWorkflow?.hasPendingEdits;
+    return e || t;
   }
   _finishOnChange() {
     this._showOnlySelected && !this._relatedFeatureTable && (this._table && this._getSelectedIds().length > 0 ? this._table.filterBySelectionEnabled = !0 : this._toggleShowSelected());
@@ -693,7 +702,7 @@ class R extends A {
   }
   async _handleDefaults() {
     if (!this._defaultOidHonored && this.defaultOid?.length > 0 && this.defaultOid[0] > -1 && this._table && (await this._selectDefaultFeature(this.defaultOid), this._defaultOidHonored = !0, this.defaultOid = [], this._showOnlySelected = !1, this._toggleShowSelected()), !this._defaultGlobalIdHonored && this.defaultGlobalId && this.defaultGlobalId?.length > 0 && this._table && this._layer) {
-      const e = await x(this.defaultGlobalId, this._layer), t = e?.length > 0 ? e.map((i) => Number(i.getObjectId())) : void 0;
+      const e = await F(this.defaultGlobalId, this._layer), t = e?.length > 0 ? e.map((i) => Number(i.getObjectId())) : void 0;
       t && await this._selectDefaultFeature(t), this._defaultGlobalIdHonored = !0, this.defaultGlobalId = [], this._showOnlySelected = !1, this._toggleShowSelected();
     }
   }
@@ -822,7 +831,7 @@ class R extends A {
       }
       return l;
     }, []);
-    this._updateToolInfoLoading("export", !0), this._csvExporting = !0, this.mapView?.map && await F(
+    this._updateToolInfoLoading("export", !0), this._csvExporting = !0, this.mapView?.map && await x(
       this.mapView.map,
       t,
       !1,
@@ -887,7 +896,7 @@ class R extends A {
       this._fetchingData = !0, await this._clearSearchText();
       const i = this.mapView && await T(this.mapView, t);
       i && await i.when(async () => {
-        this._selectedLayerView = !i.isTable && this.mapView ? await E(this.mapView, i.id) : null, this._table && this._table?.viewModel?.attachmentsViewOptions?.objectId && this._table.viewModel.hideAttachmentsView(), this._shouldUpdateTableOnExtentChange = !0, this._layer = i, await this._initToolInfos(), this._getFullTextSearchInfo();
+        this._selectedLayerView = !i.isTable && this.mapView ? await v(this.mapView, i.id) : null, this._table && this._table?.viewModel?.attachmentsViewOptions?.objectId && this._table.viewModel.hideAttachmentsView(), this._shouldUpdateTableOnExtentChange = !0, this._layer = i, await this._initToolInfos(), this._getFullTextSearchInfo();
       });
     }
     this._creatingFeature = !1, this._fetchingData = !1;
@@ -943,7 +952,7 @@ class R extends A {
     }));
   }
 }
-v("layer-table", R);
+E("layer-table", k);
 export {
-  R as LayerTable
+  k as LayerTable
 };

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

@@ -4,24 +4,24 @@ import { b as m } from "../../chunks/interfaces.js";
 import { joinAppProxies as y } from "templates-common-library/functionality/proxy";
 import { c as _, e as g } from "../../chunks/mapViewUtils.js";
 import { u as v } from "../../chunks/useT9n.js";
-import { css as I, nothing as c, html as o } from "lit";
-import { createRef as d, ref as h } from "lit-html/directives/ref.js";
-import { LitElement as $, createEvent as n, noShadowRoot as L, safeClassMap as f } from "@arcgis/lumina";
+import { css as I, nothing as c, html as l } from "lit";
+import { createRef as p, ref as d } from "lit-html/directives/ref.js";
+import { LitElement as $, createEvent as r, noShadowRoot as L, safeClassMap as f } from "@arcgis/lumina";
 import { defineCustomElements as w } from "@arcgis/instant-apps-components/loader";
 import { f as M } from "../../chunks/helpers.js";
 import S from "@arcgis/core/config.js";
 import "@arcgis/core/views/MapView.js";
-import C from "@arcgis/core/WebMap.js";
-const T = I`@layer{:host{display:block;--calcite-label-margin-bottom: 0;--calcite-block-padding: 0}.map-height{height:calc(100% - 53px)}.height-full{height:100%}.height-49-px{height:49px}.box-shadow{box-shadow:none!important}.visibility-hidden-1{visibility:hidden;height:1px}.hidden{visibility:hidden!important}.display-flex{display:flex}.display-none{display:none}.display-block{display:block}.absolute-right{position:absolute;right:0;left:unset}.esri-ui-inner-container.esri-ui-corner-container{direction:ltr}html[dir=rtl] .absolute-right{left:0;right:unset}.panel-header-override{--calcite-panel-header-content-space: 0px;--calcite-internal-panel-action-spacing: 0px !important}@media only screen and (max-width:1024px){.esri-zoom{display:none!important}}calcite-action-bar{--calcite-internal-action-bar-gap: 0px;--calcite-internal-action-bar-padding: 0px}}`;
+import T from "@arcgis/core/WebMap.js";
+const C = I`@layer{:host{display:block;--calcite-label-margin-bottom: 0;--calcite-block-padding: 0}.map-height{height:calc(100% - 53px)}.height-full{height:100%}.height-49-px{height:49px}.box-shadow{box-shadow:none!important}.visibility-hidden-1{visibility:hidden;height:1px}.hidden{visibility:hidden!important}.display-flex{display:flex}.display-none{display:none}.display-block{display:block}.absolute-right{position:absolute;right:0;left:unset}.esri-ui-inner-container.esri-ui-corner-container{direction:ltr}html[dir=rtl] .absolute-right{left:0;right:unset}.panel-header-override{--calcite-panel-header-content-space: 0px;--calcite-internal-panel-action-spacing: 0px !important}@media only screen and (max-width:1024px){.esri-zoom{display:none!important}}calcite-action-bar{--calcite-internal-action-bar-gap: 0px;--calcite-internal-action-bar-padding: 0px}}`;
 class W extends $ {
   constructor() {
-    super(), this.defaultWebmapId = "", this.defaultLayerId = "", this.enableHome = !1, this.enableLegend = !1, this.enableLayerList = !0, this.enableFloorFilter = !1, this.enableFullscreen = !1, this.enableShare = !1, this.enableMapLayerPicker = !1, this.enableMapPicker = !1, this.enableSingleExpand = !1, this.enableSearch = !1, this.enableBasemap = !1, this.featureSelectionMode = "multiple", this.hide = !1, this.zoomToolsSize = "m", this.mapInfos = [], this.mapWidgetsIndex = 0, this.mapWidgetsPosition = "top-leading", this.mobileMapWidgetsPosition = "top-right", this.mapWidgetsSize = "m", this.stackTools = !1, this.mapToolsOrder = [], this.mobileToolsOrder = [], this.isMapLayout = !1, this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.selectedFeaturesIds = [], this.showOnlyUpdatableLayers = !1, this.isMobile = !1, this.enableSelectionTool = !1, this.visibilityIcon = "eyeball", this.pasteEnabled = !1, this.mapComponentId = "arcgis-map", this.showCopyPasteActions = !1, this._configLayerOrderDefined = !1, this._translations = v({ name: "map-card", blocking: !0 }), this._toolInfos = [], this._filterActive = !1, this._layerIds = [], this._enabledLayerIds = [], this._defaultWebmapHonored = !1, this._loadedId = "", this._mapDiv = d(), this._mapComponent = d(), this._mapPicker = d(), this._mapTools = d(), this._mobMapTools = d(), this._mapLayerPicker = d(), this._selectedWebMapId = "", this._isValidWebMap = !0, this.mapChanged = n(), this.beforeMapChanged = n(), this.toggleFilter = n(), this.clearSelection = n(), this.copyFeatures = n(), this.pasteFeatures = n(), this.editMultipleFeatures = n(), this.featuresCopied = n(), this.listenOn(window, "mapInfoChange", this.mapInfoChange), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "idsFound", this._idsFound), this.enableSingleExpand = !0, this.stackTools = !0, w(window);
+    super(), this.defaultWebmapId = "", this.defaultLayerId = "", this.enableHome = !1, this.enableLegend = !1, this.enableLayerList = !0, this.enableFloorFilter = !1, this.enableFullscreen = !1, this.enableShare = !1, this.enableMapLayerPicker = !1, this.enableMapPicker = !1, this.enableSingleExpand = !1, this.enableSearch = !1, this.enableBasemap = !1, this.featureSelectionMode = "multiple", this.hide = !1, this.zoomToolsSize = "m", this.mapInfos = [], this.mapWidgetsIndex = 0, this.mapWidgetsPosition = "top-leading", this.mobileMapWidgetsPosition = "top-right", this.mapWidgetsSize = "m", this.stackTools = !1, this.mapToolsOrder = [], this.mobileToolsOrder = [], this.isMapLayout = !1, this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.selectedFeaturesIds = [], this.showOnlyUpdatableLayers = !1, this.isMobile = !1, this.enableSelectionTool = !1, this.visibilityIcon = "eyeball", this.pasteEnabled = !1, this.mapComponentId = "arcgis-map", this.showCopyPasteActions = !1, this._configLayerOrderDefined = !1, this._translations = v({ name: "map-card", blocking: !0 }), this._toolInfos = [], this._filterActive = !1, this._layerIds = [], this._enabledLayerIds = [], this._defaultWebmapHonored = !1, this._loadedId = "", this._mapDiv = p(), this._mapComponent = p(), this._mapPicker = p(), this._mapTools = p(), this._mobMapTools = p(), this._mapLayerPicker = p(), this._selectedWebMapId = "", this._isValidWebMap = !0, this.mapChanged = r(), this.beforeMapChanged = r(), this.toggleFilter = r(), this.clearSelection = r(), this.copyFeatures = r(), this.pasteFeatures = r(), this.editMultipleFeatures = r(), this.featuresCopied = r(), this.listenOn(window, "mapInfoChange", this.mapInfoChange), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "idsFound", this._idsFound), this.enableSingleExpand = !0, this.stackTools = !0, w(window);
   }
   static {
     this.properties = { appLayout: 1, appProxies: 1, defaultWebmapId: 1, defaultLayerId: 1, enableHome: 5, enableLegend: 5, enableLayerList: 5, enableFloorFilter: 5, enableFullscreen: 5, enableShare: 5, enableMapLayerPicker: 5, enableMapPicker: 5, enableSingleExpand: 5, enableSearch: 5, enableBasemap: 5, featureSelectionMode: 1, basemapConfig: 0, hide: 5, zoomToolsSize: 1, mapInfos: 0, mapWidgetsIndex: 9, mapWidgetsPosition: 1, mobileMapWidgetsPosition: 1, mapWidgetsSize: 1, mapView: 0, stackTools: 5, theme: 1, mapToolsOrder: 0, mobileToolsOrder: 0, isMapLayout: 5, shareIncludeEmbed: 5, shareIncludeSocial: 5, selectedFeaturesIds: 0, selectedLayer: 0, zoomToScale: 9, showOnlyUpdatableLayers: 5, isMobile: 5, mapInfo: 0, enableSelectionTool: 5, visibilityIcon: 1, pasteEnabled: 5, mapComponentId: 1, showCopyPasteActions: 5, _configLayerOrderDefined: 16, _translations: 16, _searchConfiguration: 16, _webMapInfo: 16, _toolInfos: 16, _filterActive: 16, _mapDivHeight: 16, _mapDivWidth: 16, _layerIds: 16 };
   }
   static {
-    this.styles = T;
+    this.styles = C;
   }
   static {
     this.shadowRootOptions = L;
@@ -73,8 +73,8 @@ class W extends $ {
     }));
   }
   render() {
-    const e = this.hide ? "visibility-hidden-1" : "", i = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light", a = "height-full", t = this.isMapLayout ? "" : "display-none", s = this._isValidWebMap ? "" : "hidden", r = this.isMobile ? "" : "hidden", l = this.enableMapPicker && this.mapInfos.length > 1, p = this.enableMapLayerPicker && this._layerIds.length > 1;
-    return this._handleMapVisibility(), this._validateActiveActions(), o`<calcite-panel class="height-full width-full panel-header-override">${this._getMapLayerPicker()}${this._getHeaderActions()}<div slot=header-actions-end>${this.enableShare && this.isMapLayout ? this._getShare("share") : void 0}</div><calcite-progress class=${f(t)} value=0></calcite-progress><div class=${`${e} ${a}`}><div class="height-full" ${h(this._mapDiv)}><arcgis-map id=${this.mapComponentId ?? c} class="height-full" ${h(this._mapComponent)}></arcgis-map></div></div>${o`<map-tools style=${`visibility: ${s}`} .basemapConfig=${this.basemapConfig} class=${`box-shadow ${i} ${s}`} .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} .enableBasemap=${this.enableBasemap} .enableFloorFilter=${this.enableFloorFilter} .enableFullscreen=${this.enableFullscreen} .enableHome=${this.enableHome} .enableLegend=${this.enableLegend} .enableLayerList=${this.enableLayerList} .enableSearch=${this.enableSearch} .enableSingleExpand=${this.enableSingleExpand} .enableSelectionTool=${this.enableSelectionTool} .isMobile=${this.isMobile} .parentComponentHeight=${this._mapDivHeight} .parentComponentWidth=${this._mapDivWidth} .zoomToolsSize=${this.zoomToolsSize} layout=horizontal .mapView=${this.mapView} .mapWidgetsSize=${this.mapWidgetsSize} .position=${this.mapWidgetsPosition} .selectedFeaturesIds=${this.selectedFeaturesIds} .selectedLayer=${this.selectedLayer} .searchConfiguration=${this._searchConfiguration} .stackTools=${this.stackTools} .toolOrder=${this.mapToolsOrder} .visibilityIcon=${this.visibilityIcon} ${h(this._mapTools)}></map-tools><map-tools style=${`visibility: ${r}`} class=${`box-shadow ${i} ${r}`} .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} .enabledLayerIds=${this._enabledLayerIds} .enableMapLayerPicker=${p} .enableMapPicker=${l} .isMobile=${this.isMobile} .zoomToolsSize=${this.zoomToolsSize} layout=vertical .mapInfos=${this.mapInfos} .mapView=${this.mapView} .mapWidgetsSize=${this.mapWidgetsSize} .parentComponentHeight=${this._mapDivHeight} .position=${this.mobileMapWidgetsPosition} .selectedLayer=${this.selectedLayer} .selectedWebMapId=${this._selectedWebMapId} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} .stackTools=${this.stackTools} .toolOrder=${this.mobileToolsOrder} ${h(this._mobMapTools)}></map-tools>`}</calcite-panel>`;
+    const e = this.hide ? "visibility-hidden-1" : "", i = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light", a = "height-full", t = this.isMapLayout ? "" : "display-none", s = this._isValidWebMap ? "" : "hidden", h = this.isMobile ? "" : "hidden", o = this.enableMapPicker && this.mapInfos.length > 1, n = this.enableMapLayerPicker && this._layerIds.length > 1;
+    return this._handleMapVisibility(), this._validateActiveActions(), l`<calcite-panel class="height-full width-full panel-header-override">${this._getMapLayerPicker()}${this._getHeaderActions()}<div slot=header-actions-end>${this.enableShare && this.isMapLayout ? this._getShare("share") : void 0}</div><calcite-progress class=${f(t)} value=0></calcite-progress><div class=${`${e} ${a}`}><div class="height-full" ${d(this._mapDiv)}><arcgis-map id=${this.mapComponentId ?? c} class="height-full" ${d(this._mapComponent)}></arcgis-map></div></div>${l`<map-tools style=${`visibility: ${s}`} .basemapConfig=${this.basemapConfig} class=${`box-shadow ${i} ${s}`} .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} .enableBasemap=${this.enableBasemap} .enableFloorFilter=${this.enableFloorFilter} .enableFullscreen=${this.enableFullscreen} .enableHome=${this.enableHome} .enableLegend=${this.enableLegend} .enableLayerList=${this.enableLayerList} .enableSearch=${this.enableSearch} .enableSingleExpand=${this.enableSingleExpand} .enableSelectionTool=${this.enableSelectionTool} .isMobile=${this.isMobile} .parentComponentHeight=${this._mapDivHeight} .parentComponentWidth=${this._mapDivWidth} .zoomToolsSize=${this.zoomToolsSize} layout=horizontal .mapView=${this.mapView} .mapWidgetsSize=${this.mapWidgetsSize} .position=${this.mapWidgetsPosition} .selectedFeaturesIds=${this.selectedFeaturesIds} .selectedLayer=${this.selectedLayer} .searchConfiguration=${this._searchConfiguration} .stackTools=${this.stackTools} .toolOrder=${this.mapToolsOrder} .visibilityIcon=${this.visibilityIcon} ${d(this._mapTools)}></map-tools><map-tools style=${`visibility: ${h}`} class=${`box-shadow ${i} ${h}`} .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} .enabledLayerIds=${this._enabledLayerIds} .enableMapLayerPicker=${n} .enableMapPicker=${o} .isMobile=${this.isMobile} .zoomToolsSize=${this.zoomToolsSize} layout=vertical .mapInfos=${this.mapInfos} .mapView=${this.mapView} .mapWidgetsSize=${this.mapWidgetsSize} .parentComponentHeight=${this._mapDivHeight} .position=${this.mobileMapWidgetsPosition} .selectedLayer=${this.selectedLayer} .selectedWebMapId=${this._selectedWebMapId} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} .stackTools=${this.stackTools} .toolOrder=${this.mobileToolsOrder} ${d(this._mobMapTools)}></map-tools>`}</calcite-panel>`;
   }
   updated() {
     this._mapDivHeight = this._mapDiv.value?.offsetHeight ?? 0, document.onclick = (e) => this._handleDocumentClick(e);
@@ -83,30 +83,36 @@ class W extends $ {
     this._mapDiv.value && this._mapSizeObserver?.observe(this._mapDiv.value), this._updateShareUrl();
   }
   async _loadMap(e) {
-    const i = !this._defaultWebmapHonored && this.defaultWebmapId, a = this.mapInfos?.filter((l) => l.id === this.defaultWebmapId), t = JSON.stringify(e) !== JSON.stringify(this._webMapInfo);
+    const i = !this._defaultWebmapHonored && this.defaultWebmapId, a = this.mapInfos?.filter((o) => o.id === this.defaultWebmapId), t = JSON.stringify(e) !== JSON.stringify(this._webMapInfo);
     this._webMapInfo = i && a ? a[0] : !e?.id && this.mapInfos.length > 0 ? this.mapInfos[0] : e;
-    const s = this._webMapInfo.id, r = i && e?.id === this.defaultWebmapId;
-    if (this._loadedId !== s && !i || r) {
-      const l = new C({
+    const s = this._webMapInfo.id, h = i && e?.id === this.defaultWebmapId;
+    if (this._loadedId !== s && !i || h) {
+      const o = new T({
         portalItem: { id: s }
       });
       try {
-        if (l && await l.load(), this.appProxies && l && await y(l, S, this.appProxies), this._mapComponent.value || await this.updateComplete, !this._mapComponent.value)
+        if (o && await o.load(), this.appProxies && o && await y(o, S, this.appProxies), this._mapComponent.value || await this.updateComplete, !this._mapComponent.value)
           throw new Error("Map component is not available.");
-        this._mapComponent.value.map = l, this._mapComponent.value.resizeAlign = "center", await this._mapComponent.value.viewOnReady(), this.mapView = this._mapComponent.value.view, this._loadedId = s, this._searchConfiguration = this._webMapInfo.searchConfiguration, this.beforeMapChanged.emit(), this.mapView && await this.mapView.when(() => {
-          this.mapView && (this._mapDivWidth = this._mapDiv.value && this._mapDiv.value.offsetWidth, this._mapTools.value && this.mapView.ui.add(this._mapTools.value, { position: this.mapWidgetsPosition, index: this.mapWidgetsIndex }), this._mobMapTools.value && this.mapView.ui.add(this._mobMapTools.value, { position: this.mobileMapWidgetsPosition, index: this.mapWidgetsIndex }), this._defaultWebmapHonored = r ? !0 : this._defaultWebmapHonored, this._isValidWebMap = !0, this.mapChanged.emit({
-            id: s,
-            mapView: this.mapView,
-            isValid: !0
-          }), this.isMobile || document.getElementsByClassName("esri-zoom")[0]?.classList.remove("display-none"));
+        this._mapComponent.value.map = o, this._mapComponent.value.resizeAlign = "center", await this._mapComponent.value.viewOnReady(), this.mapView = this._mapComponent.value.view, this._loadedId = s, this._searchConfiguration = this._webMapInfo.searchConfiguration, this.beforeMapChanged.emit(), this.mapView && await this.mapView.when(async () => {
+          if (this.mapView) {
+            this._mapDivWidth = this._mapDiv.value && this._mapDiv.value.offsetWidth, this._mapTools.value && this.mapView.ui.add(this._mapTools.value, { position: this.mapWidgetsPosition, index: this.mapWidgetsIndex }), this._mobMapTools.value && this.mapView.ui.add(this._mobMapTools.value, { position: this.mobileMapWidgetsPosition, index: this.mapWidgetsIndex }), this._defaultWebmapHonored = h ? !0 : this._defaultWebmapHonored, this._isValidWebMap = !0, this.mapChanged.emit({
+              id: s,
+              mapView: this.mapView,
+              isValid: !0
+            }), this.isMobile || document.getElementsByClassName("esri-zoom")[0]?.classList.remove("display-none");
+            const n = o.initialViewProperties?.viewpoint?.clone();
+            n && await this.mapView.goTo(n);
+          }
         });
-      } catch (p) {
-        console.error(p), this._loadedId = s, this._isValidWebMap = !1, this.mapChanged.emit({
-          id: s,
-          mapView: void 0,
-          isValid: !1
-        }), document.getElementsByClassName("esri-zoom")[0]?.classList.add("display-none");
-        return;
+      } catch (n) {
+        if (n.name !== "view:goto-interrupted") {
+          console.error(n), this._loadedId = s, this._isValidWebMap = !1, this.mapChanged.emit({
+            id: s,
+            mapView: void 0,
+            isValid: !1
+          }), document.getElementsByClassName("esri-zoom")[0]?.classList.add("display-none");
+          return;
+        }
       }
     } else i ? (this._defaultWebmapHonored = !0, this._mapPicker.value && this._mapPicker.value.setMapByID(s)) : t && this.mapView && (this._searchConfiguration = this._webMapInfo.searchConfiguration, this.beforeMapChanged.emit(), this.mapChanged.emit({
       id: s,
@@ -117,13 +123,13 @@ class W extends $ {
   }
   _getMapLayerPicker() {
     const e = this.isMapLayout ? "header-actions-start" : "", i = this.mapInfos?.length > 1 ? "" : "display-none", a = this.isMapLayout ? "height-0" : "width-full", t = "display-flex", s = this.isMapLayout ? "" : "display-none";
-    return o`${!this.isMobile && o`<div slot=${e ?? c}><map-picker class=${`${i} ${a}`} id=map-picker .isMapLayout=${this.isMapLayout} .mapInfos=${this.mapInfos} .selectedWebMapId=${this._selectedWebMapId} ${h(this._mapPicker)}></map-picker></div>` || ""}<div slot=header-actions-start class=${`mapView-header display-flex ${s}`} id=solutions-map-layer-picker-container><div class=${`border-end ${t}`}>${this.mapView && o`<map-layer-picker appearance=transparent .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} display=inline-flex .enabledLayerIds=${this._enabledLayerIds} height=50 .isMobile=${this.isMobile} .mapView=${this.mapView} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} placeholder-icon=layers scale=l .selectedIds=${this.selectedLayer ? [this.selectedLayer.id] : []} show-single-layer-as-label show-tables show-tables-disabled type=dropdown ${h(this._mapLayerPicker)}></map-layer-picker>` || ""}</div></div>`;
+    return l`${!this.isMobile && l`<div slot=${e ?? c}><map-picker class=${`${i} ${a}`} id=map-picker .isMapLayout=${this.isMapLayout} .mapInfos=${this.mapInfos} .selectedWebMapId=${this._selectedWebMapId} ${d(this._mapPicker)}></map-picker></div>` || ""}<div slot=header-actions-start class=${`mapView-header display-flex ${s}`} id=solutions-map-layer-picker-container><div class=${`border-end ${t}`}>${this.mapView && l`<map-layer-picker appearance=transparent .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} display=inline-flex .enabledLayerIds=${this._enabledLayerIds} height=50 .isMobile=${this.isMobile} .mapView=${this.mapView} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} placeholder-icon=layers scale=l .selectedIds=${this.selectedLayer ? [this.selectedLayer.id] : []} show-single-layer-as-label show-tables show-tables-disabled type=dropdown ${d(this._mapLayerPicker)}></map-layer-picker>` || ""}</div></div>`;
   }
   _getHeaderActions() {
-    return o`<div slot=header-content><calcite-action-bar class=${f("display-flex")} expand-disabled expanded id=${this._getId("bar") ?? c} layout=horizontal><calcite-action-group>${this.isMapLayout ? this._getTools() : void 0}</calcite-action-group></calcite-action-bar></div>`;
+    return l`<div slot=header-content><calcite-action-bar class=${f("display-flex")} expand-disabled expanded id=${this._getId("bar") ?? c} layout=horizontal><calcite-action-group>${this.isMapLayout ? this._getTools() : void 0}</calcite-action-group></calcite-action-bar></div>`;
   }
   _getShare(e) {
-    return o`<div class="share-action" id=${this._getId(e) ?? c}>${this.mapView && o`<instant-apps-social-share class="instant-app-share" .embed=${this.shareIncludeEmbed} flip-rtl popover-button-icon-scale=s scale=m share-button-color=neutral share-button-type=action .socialMedia=${this.shareIncludeSocial} .view=${this.mapView} ${h((i) => {
+    return l`<div class="share-action" id=${this._getId(e) ?? c}>${this.mapView && l`<instant-apps-social-share class="instant-app-share" .embed=${this.shareIncludeEmbed} flip-rtl popover-button-icon-scale=s scale=m share-button-color=neutral share-button-type=action .socialMedia=${this.shareIncludeSocial} .view=${this.mapView} ${d((i) => {
       i && (this._shareNode = i, this._updateShareUrl());
     })}></instant-apps-social-share>` || ""}${this._getToolTip("bottom", `map-${e}`, this._translations?.share)}</div>`;
   }
@@ -232,11 +238,11 @@ class W extends $ {
     return this._toolInfos?.reduce((e, i) => (i && e.push(this._getAction(i.active, i.icon, i.indicator, i.label, i.func, i.disabled, i.loading, i.toolTip)), e), []);
   }
   _getToolTip(e, i, a) {
-    return o`<calcite-tooltip .placement=${e} .referenceElement=${i}><span>${a}</span></calcite-tooltip>`;
+    return l`<calcite-tooltip .placement=${e} .referenceElement=${i}><span>${a}</span></calcite-tooltip>`;
   }
-  _getAction(e, i, a, t, s, r, l, p) {
-    const u = this.selectedLayer === void 0 ? !0 : r;
-    return o`<calcite-action .active=${e} .disabled=${u} .icon=${i} .id=${`map-${i}`} .indicator=${a} .label=${t} .loading=${l} @click=${s} .text=${t} text-enabled></calcite-action>${this._getToolTip("auto", `map-${i}`, p)}`;
+  _getAction(e, i, a, t, s, h, o, n) {
+    const u = this.selectedLayer === void 0 ? !0 : h;
+    return l`<calcite-action .active=${e} .disabled=${u} .icon=${i} .id=${`map-${i}`} .indicator=${a} .label=${t} .loading=${o} @click=${s} .text=${t} text-enabled></calcite-action>${this._getToolTip("auto", `map-${i}`, n)}`;
   }
   _getId(e) {
     return `solutions-action-${e}`;

package/dist/components/map-tools/customElement.js

@@ -1,13 +1,13 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as T } from "../../chunks/runtime.js";
 import { u as v } from "../../chunks/useT9n.js";
-import { css as W, html as h, nothing as _ } from "lit";
-import { createRef as a, ref as r } from "lit-html/directives/ref.js";
-import { LitElement as L, createEvent as S, safeClassMap as n } from "@arcgis/lumina";
+import { css as W, html as a, nothing as _ } from "lit";
+import { createRef as n, ref as r } from "lit-html/directives/ref.js";
+import { LitElement as L, createEvent as S, safeClassMap as h } from "@arcgis/lumina";
 const $ = W`:host{display:block}.display-none{display:none}.display-flex{display:flex}.margin-top-1-2{margin-top:.5rem}.margin-left-1-2{margin-left:.5rem}.margin-right-1-2{margin-right:.5rem}.square-32{width:32px;height:32px}.square-40{width:40px;height:40px}.square-48{width:48px;height:48px}.height-fit-content{height:fit-content!important}.height-0{height:0!important}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.box-shadow{box-shadow:0 1px 2px #0000004d}.margin-bottom-1-2{margin-bottom:.5rem}.danger-icon-color{--calcite-icon-color: var(--calcite-color-status-danger)}.map-actions{--calcite-action-background-color: var(--calcite-color-foreground-1);--calcite-action-background-color-hover: var(--calcite-color-foreground-3);--calcite-color-transparent-press: var(--calcite-color-foreground-2)}`;
 class x extends L {
   constructor() {
-    super(), this.enabledLayerIds = [], this.enableLegend = !1, this.enableLayerList = !1, this.enableFloorFilter = !1, this.enableFullscreen = !1, this.enableSearch = !1, this.enableBasemap = !1, this.enableHome = !1, this.enableSingleExpand = !1, this.zoomToolsSize = "m", this.layout = "vertical", this.mapWidgetsSize = "m", this.enableMapPicker = !1, this.enableMapLayerPicker = !1, this.position = "top-leading", this.stackTools = !0, this.enableSelectionTool = !1, this.toolOrder = ["home", "legend", "search", "fullscreen", "floorfilter", "layers-list", "selectiontool", "map-picker", "map-layer-picker"], this.selectionTools = ["rectangle-select", "lasso-select", "clear-selection"], this.mapInfos = [], this.defaultLayerId = "", this.isMobile = !1, this.selectedFeaturesIds = [], this.selectedWebMapId = "", this.showOnlyUpdatableLayers = !1, this.visibilityIcon = "eyeball", this.configLayerOrderDefined = !1, this._hasFloorInfo = !1, this._translations = v({ name: "map-tools", blocking: !0 }), this._showTools = !0, this._showBasemapWidget = !1, this._showFloorFilter = !1, this._showLegendWidget = !1, this._showSearchWidget = !1, this._showLayersListWidget = !1, this._rectangleSelectionToolActive = !1, this._lassoSelectionToolActive = !1, this._showEllipsisTools = !0, this._ellipsisTools = [], this._isValidWebMap = !0, this._showSelectionTools = !1, this._basemapElement = a(), this._floorFilterElement = a(), this._fullscreenElement = a(), this._layerListWidgetElement = a(), this._legendElement = a(), this._searchElement = a(), this._widgets = [], this._selectionToolElement = a(), this._mapTools = [], this._mapTool = a(), this.clearSelection = S(), this.listenOn(window, "mapChanged", this.mapChanged), this.listenOn(window, "layerSelectionChange", this._layerSelectionChange);
+    super(), this.enabledLayerIds = [], this.enableLegend = !1, this.enableLayerList = !1, this.enableFloorFilter = !1, this.enableFullscreen = !1, this.enableSearch = !1, this.enableBasemap = !1, this.enableHome = !1, this.enableSingleExpand = !1, this.zoomToolsSize = "m", this.layout = "vertical", this.mapWidgetsSize = "m", this.enableMapPicker = !1, this.enableMapLayerPicker = !1, this.position = "top-leading", this.stackTools = !0, this.enableSelectionTool = !1, this.toolOrder = ["home", "legend", "search", "fullscreen", "floorfilter", "layers-list", "selectiontool", "map-picker", "map-layer-picker"], this.selectionTools = ["rectangle-select", "lasso-select", "clear-selection"], this.mapInfos = [], this.defaultLayerId = "", this.isMobile = !1, this.selectedFeaturesIds = [], this.selectedWebMapId = "", this.showOnlyUpdatableLayers = !1, this.visibilityIcon = "eyeball", this.configLayerOrderDefined = !1, this._hasFloorInfo = !1, this._translations = v({ name: "map-tools", blocking: !0 }), this._showTools = !0, this._showBasemapWidget = !1, this._showFloorFilter = !1, this._showLegendWidget = !1, this._showSearchWidget = !1, this._showLayersListWidget = !1, this._rectangleSelectionToolActive = !1, this._lassoSelectionToolActive = !1, this._showEllipsisTools = !0, this._ellipsisTools = [], this._isValidWebMap = !0, this._showSelectionTools = !1, this._basemapElement = n(), this._floorFilterElement = n(), this._fullscreenElement = n(), this._layerListWidgetElement = n(), this._legendElement = n(), this._searchElement = n(), this._widgets = [], this._selectionToolElement = n(), this._mapTools = [], this._mapTool = n(), this.clearSelection = S(), this.listenOn(window, "mapChanged", this.mapChanged), this.listenOn(window, "layerSelectionChange", this._layerSelectionChange);
   }
   static {
     this.properties = { basemapConfig: 0, enabledLayerIds: 0, enableLegend: 5, enableLayerList: 5, enableFloorFilter: 5, enableFullscreen: 5, enableSearch: 5, enableBasemap: 5, enableHome: 5, enableSingleExpand: 5, zoomToolsSize: 1, layout: 1, mapView: 0, mapWidgetsSize: 1, enableMapPicker: 5, enableMapLayerPicker: 5, position: 1, searchConfiguration: 0, stackTools: 5, enableSelectionTool: 5, toolOrder: 0, selectionTools: 0, selectedLayer: 0, mapInfos: 0, defaultLayerId: 1, isMobile: 5, parentComponentHeight: 9, parentComponentWidth: 9, selectedFeaturesIds: 0, selectedWebMapId: 1, showOnlyUpdatableLayers: 5, mapInfo: 0, visibilityIcon: 1, configLayerOrderDefined: 5, _hasFloorInfo: 16, _translations: 16, _showTools: 16, _showBasemapWidget: 16, _showFloorFilter: 16, _showLegendWidget: 16, _showSearchWidget: 16, _showLayersListWidget: 16, _rectangleSelectionToolActive: 16, _lassoSelectionToolActive: 16, _showEllipsisTools: 16, _ellipsisTools: 16, _isValidWebMap: 16, _showSelectionTools: 16 };
@@ -20,7 +20,7 @@ class x extends L {
   }
   async mapViewWatchHandler() {
     await this.mapView?.when(() => {
-      this.enableHome && this._initHome(), this.parentComponentWidth && this._updateTools(this.parentComponentWidth);
+      this.parentComponentWidth && this._updateTools(this.parentComponentWidth);
     });
   }
   async parentComponentWidthWatchHandler(t) {
@@ -74,12 +74,9 @@ class x extends L {
   render() {
     this._setZoomToolsSize();
     const t = this.layout === "horizontal" ? "display-flex" : "", e = this._getToggleIcon(), s = !this._showTools && !this._showSelectionTools ? "display-none" : t, i = this._showEllipsisTools ? "" : "display-none", l = this._showSearchWidget ? "" : "display-none", o = this._showBasemapWidget ? "" : "display-none", c = this._showLegendWidget ? "" : "display-none", p = this._showFloorFilter ? "" : "display-none", d = this._showLayersListWidget ? "" : "display-none", g = this._showTools ? this._translations.collapse : this._translations.expand, f = !this.enableBasemap && !this.enableFullscreen && !this.enableLegend && !this.enableLayerList && !this.enableSearch && !this.enableMapPicker && !this.enableMapLayerPicker ? "display-none" : "", w = document.dir === "rtl" ? "margin-right-1-2" : "margin-left-1-2", u = this.enableSingleExpand ? this.layout === "horizontal" ? w : "margin-top-1-2" : "", y = this._ellipsisTools.length > 0 && this._showTools ? "" : "display-none", m = this.stackTools && this._ellipsisTools.length === 0 ? "box-shadow" : "", b = this._showSelectionTools ? this.selectionTools : this._mapTools;
-    return h`<div class=${`${f} ${t} height-0`}>${this.enableSingleExpand ? h`<div class=${n(m)}>${this._getActionGroup(e, !1, g || "", () => this._toggleTools())}</div>` : void 0}<div class=${`${u} ${m} ${s}`}>${this._getMapWidgets(b)}</div><div><div class=${n(y)}>${this._getActionGroup("ellipsis", !1, "", () => this._toggleEllipsisTools())}<div class=${n(i)}>${this._getMapWidgets(this._ellipsisTools)}</div></div></div></div><map-basemap-gallery .basemapConfig=${this.basemapConfig} class=${n(o)} .mapView=${this.mapView} ${r(this._basemapElement)}></map-basemap-gallery><map-search class=${n(l)} .mapView=${this.mapView} result-graphic-enabled .searchConfiguration=${this.searchConfiguration} ${r(this._searchElement)}></map-search><map-legend class=${n(c)} .mapView=${this.mapView} ${r(this._legendElement)}></map-legend><layer-list-widget class=${n(d)} .mapView=${this.mapView} .visibilityIcon=${this.visibilityIcon} ${r(this._layerListWidgetElement)}></layer-list-widget><map-floor-filter class=${n(p)} .enabled=${this.enableFloorFilter} .mapView=${this.mapView} ${r(this._floorFilterElement)}></map-floor-filter><selection-tool .mapView=${this.mapView} @drawingComplete=${() => {
+    return a`<div class=${`${f} ${t} height-0`}>${this.enableSingleExpand ? a`<div class=${h(m)}>${this._getActionGroup(e, !1, g || "", () => this._toggleTools())}</div>` : void 0}<div class=${`${u} ${m} ${s}`}>${this._getMapWidgets(b)}</div><div><div class=${h(y)}>${this._getActionGroup("ellipsis", !1, "", () => this._toggleEllipsisTools())}<div class=${h(i)}>${this._getMapWidgets(this._ellipsisTools)}</div></div></div></div><map-basemap-gallery .basemapConfig=${this.basemapConfig} class=${h(o)} .mapView=${this.mapView} ${r(this._basemapElement)}></map-basemap-gallery><map-search class=${h(l)} .mapView=${this.mapView} result-graphic-enabled .searchConfiguration=${this.searchConfiguration} ${r(this._searchElement)}></map-search><map-legend class=${h(c)} .mapView=${this.mapView} ${r(this._legendElement)}></map-legend><layer-list-widget class=${h(d)} .mapView=${this.mapView} .visibilityIcon=${this.visibilityIcon} ${r(this._layerListWidgetElement)}></layer-list-widget><map-floor-filter class=${h(p)} .enabled=${this.enableFloorFilter} .mapView=${this.mapView} ${r(this._floorFilterElement)}></map-floor-filter><selection-tool .mapView=${this.mapView} @drawingComplete=${() => {
       this._rectangleSelectionToolActive = !1, this._lassoSelectionToolActive = !1;
-    }} .selectedLayerId=${this.selectedLayer?.id} ${r(this._selectionToolElement)}></selection-tool>${this.enableMapPicker && h`<map-picker class=mapPickerClass .height=${(this.parentComponentHeight ?? 0) - 25} id=map-picker .mapInfos=${this.mapInfos} reference-element=map .selectedWebMapId=${this.selectedWebMapId} show-map-list-in-popover></map-picker>` || ""}${this.enableMapLayerPicker && this.selectedLayer && h`<map-layer-picker appearance=transparent .configLayerOrderDefined=${this.configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} .enabledLayerIds=${this.enabledLayerIds} .height=${(this.parentComponentHeight ?? 0) - 25} .isMobile=${this.isMobile} .mapView=${this.mapView} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} reference-element=layers scale=s .selectedIds=${this.selectedLayer ? [this.selectedLayer.id] : []} show-layers-list-in-popover show-tables type=dropdown></map-layer-picker>` || ""}`;
-  }
-  _initHome() {
-    this.enableHome && (this._homeComponent = document.createElement("arcgis-home"), this._homeComponent.view = this.mapView, this._homeComponent.viewpoint = this.mapView?.viewpoint?.clone());
+    }} .selectedLayerId=${this.selectedLayer?.id} ${r(this._selectionToolElement)}></selection-tool>${this.enableMapPicker && a`<map-picker class=mapPickerClass .height=${(this.parentComponentHeight ?? 0) - 25} id=map-picker .mapInfos=${this.mapInfos} reference-element=map .selectedWebMapId=${this.selectedWebMapId} show-map-list-in-popover></map-picker>` || ""}${this.enableMapLayerPicker && this.selectedLayer && a`<map-layer-picker appearance=transparent .configLayerOrderDefined=${this.configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} .enabledLayerIds=${this.enabledLayerIds} .height=${(this.parentComponentHeight ?? 0) - 25} .isMobile=${this.isMobile} .mapView=${this.mapView} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} reference-element=layers scale=s .selectedIds=${this.selectedLayer ? [this.selectedLayer.id] : []} show-layers-list-in-popover show-tables type=dropdown></map-layer-picker>` || ""}`;
   }
   _setZoomToolsSize() {
     const e = document.getElementById("arcgis-map")?.shadowRoot;
@@ -148,9 +145,7 @@ class x extends L {
             this._getActionGroup("erase", !1, this._translations.clearSelection, () => this.clearSelection.emit())
           ) : void 0;
         case "home":
-          return this.enableHome ? this._getActionGroup("home", !1, this._translations.defaultMapView, () => {
-            this._homeComponent?.go();
-          }) : void 0;
+          return this.enableHome && this.mapView ? this._getHomeComponent() : void 0;
         case "map-picker":
           return this.enableMapPicker ? this._getActionGroup(e, !1, "", () => {
           }, !this._isValidWebMap) : void 0;
@@ -163,11 +158,15 @@ class x extends L {
     });
   }
   _getFullScreenComponent() {
-    return h`<map-fullscreen .mapView=${this.mapView}></map-fullscreen>`;
+    return a`<map-fullscreen .mapView=${this.mapView}></map-fullscreen>`;
+  }
+  _getHomeComponent() {
+    const t = (this.mapView?.map).initialViewProperties?.viewpoint?.clone();
+    return a`<arcgis-home .view=${this.mapView} .viewpoint=${t}></arcgis-home>`;
   }
   _getActionGroup(t, e, s, i, l, o) {
     const c = this.mapWidgetsSize === "s" ? "square-32" : this.mapWidgetsSize === "m" ? "square-40" : "square-48", p = this.stackTools ? "" : "margin-bottom-1-2", d = this.stackTools ? "" : "box-shadow";
-    return h`<div class="height-fit-content"><calcite-action alignment=center .indicator=${o} class=${`map-actions ${c} ${p} border-bottom ${d} ${l ? "danger-icon-color" : ""}`} .disabled=${e} .icon=${t} id=${t ?? _} @click=${i} scale=m .text=${s} ${r(this._mapTool)}><calcite-icon aria-hidden=true icon=chevron-up scale=s slot=icon></calcite-icon></calcite-action>${!this.isMobile && s && h`<calcite-tooltip .placement=${this.layout === "vertical" ? "auto" : "bottom"} reference-element=${t ?? _}><span>${s}</span></calcite-tooltip>` || ""}</div>`;
+    return a`<div class="height-fit-content"><calcite-action alignment=center .indicator=${o} class=${`map-actions ${c} ${p} border-bottom ${d} ${l ? "danger-icon-color" : ""}`} .disabled=${e} .icon=${t} id=${t ?? _} @click=${i} scale=m .text=${s} ${r(this._mapTool)}><calcite-icon aria-hidden=true icon=chevron-up scale=s slot=icon></calcite-icon></calcite-action>${!this.isMobile && s && a`<calcite-tooltip .placement=${this.layout === "vertical" ? "auto" : "bottom"} reference-element=${t ?? _}><span>${s}</span></calcite-tooltip>` || ""}</div>`;
   }
   _getWidget(t, e, s) {
     if (this._widgets.indexOf(t) < 0 && this.mapView && e) {

package/dist/components/map-tools/index.js

@@ -7,6 +7,7 @@ import "../selection-tool/index.js";
 import "../map-picker/index.js";
 import "../map-layer-picker/index.js";
 import "../map-fullscreen/index.js";
+import "@arcgis/map-components/components/arcgis-home";
 import "@esri/calcite-components/components/calcite-action";
 import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-tooltip";

package/dist/components/solution-details-panel/customElement.js

@@ -111,7 +111,7 @@ class G extends I {
       context: L,
       subscribe: !0,
       callback: (e) => this.isMobile = e
-    }), this._overviewAccordionItemElement = d(), this._privilegePopoverRef = d(), this._privileges = [], this._regexFsUrl = "https?:\\/\\/.+FeatureServer\\b", this._regexID = "\\b[0-9A-F]{32}\\b", this._releaseNotesAccordionItemElement = d(), this._relatedResourcesAccordionItemElement = d(), this._screenshotsAccordionItemElement = d(), this._screenshotsDialogRef = d(), this._screenshotsElement = d(), this._termsOfUseAccordionItemElement = d(), this._userOptions = [], this._youMayAlsoLikeAccordionItemElement = d(), this._youMayAlsoLikeElement = d(), this._signInParamValue = null, this._deploymentStartTime = null, this._cancellationStartTime = null, this._deployToCancelDuration = 0, this.templatesFetched = f(), this.itemPropertiesFetched = f(), this.sortTypeChanged = f(), this.tokenRefreshed = f(), this._handleDeployCancelled = () => {
+    }), this._overviewAccordionItemElement = d(), this._privilegePopoverRef = d(), this._privileges = [], this._regexFsUrl = "https?:\\/\\/.+FeatureServer\\b", this._regexID = "\\b[0-9A-F]{32}\\b", this._releaseNotesAccordionItemElement = d(), this._relatedResourcesAccordionItemElement = d(), this._screenshotsAccordionItemElement = d(), this._screenshotsDialogRef = d(), this._screenshotsElement = d(), this._screenshotsCardGroupElement = d(), this._termsOfUseAccordionItemElement = d(), this._userOptions = [], this._youMayAlsoLikeAccordionItemElement = d(), this._youMayAlsoLikeElement = d(), this._signInParamValue = null, this._deploymentStartTime = null, this._cancellationStartTime = null, this._deployToCancelDuration = 0, this.templatesFetched = f(), this.itemPropertiesFetched = f(), this.sortTypeChanged = f(), this.tokenRefreshed = f(), this._handleDeployCancelled = () => {
       this._deployFlow.handleDeployCancelled();
     }, this._deployProgressStart = (e) => {
       this._deployFlow.deployProgressStart(e);
@@ -148,7 +148,9 @@ class G extends I {
   loaded() {
     this._signInParamValue === null && this._configContextConsumer.value?.authentication?.SignInParam && (this._signInParamValue = this._configContextConsumer.value.authentication.SignInParam), this._resizeObserver = new ResizeObserver(async () => {
       this._onResize();
-    }), this._screenshotsElement.value && this._resizeObserver.observe(this._screenshotsElement.value);
+    });
+    const e = this._screenshotsCardGroupElement.value ?? this._screenshotsElement.value;
+    e && this._resizeObserver.observe(e);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._resizeObserver?.disconnect();
@@ -254,7 +256,7 @@ class G extends I {
   }
   _getScreenshots() {
     const e = this._itemProperties?.preview.filter((s) => s.format === "image") || [], t = this._configContextConsumer.value, i = this._itemFetched ? "" : "display-none", a = this._itemFetched ? "display-none" : "";
-    return l`<calcite-loader class=${p(a)} label></calcite-loader><calcite-card-group class=${`card-group ${i}`} .label=${this._translations.solutionOverview}>${e.reduce((s, o) => {
+    return l`<calcite-loader class=${p(a)} label></calcite-loader><calcite-card-group class=${`card-group ${i}`} .label=${this._translations.solutionOverview} ${h(this._screenshotsCardGroupElement)}>${e.reduce((s, o) => {
       const r = $(this.card?.id || "", o.name, t.authentication);
       let c;
       return t.agoBasedEnterpriseSolutionsGroupId && t.isEnterprise && (c = $(this.card?.id || "", o.name, void 0, t.agolPortalUrl)), this.card?.id ? s.push(l`<calcite-card class=${`${this.isMobile ? "is-mobile" : "cursor-pointer not-mobile"}`} .label=${o.alt} @click=${() => this._openScreenshotGallery(o)} @keydown=${(n) => B(n, () => this._openScreenshotGallery(o))}><div class="card-image-wrap" slot=thumbnail><img alt=${o.alt ?? u} class="thumbnail card-image" slot=thumbnail src=${(c || r) ?? u}>${!this.isMobile && l`<div class="hover-text">${this._translations.openInGallery}</div>` || ""}</div></calcite-card>`) : s.push(""), s;

package/dist/components/solutions-deploy-app/customElement.js

@@ -24,7 +24,7 @@ import "../solutions-deployed-shell/customElement.js";
 import "../solutions-resources-shell/customElement.js";
 import "../solution-details-panel/customElement.js";
 import "../solution-deployed-card-panel/customElement.js";
-const R = S`.back-color-override{background-color:var(--calcite-color-surface-3);--calcite-tab-border-color: var(--calcite-color-surface-4)}:host{--panel-edge-adjustment: 2vw;--assistant-panel-min-width: 420px;--assistant-panel-width: max(var(--assistant-panel-min-width), calc((96vw - 1440px) / 2 + var(--panel-edge-adjustment) - 15px))}.display-none{display:none!important}.height-100{height:100%}calcite-tab-nav{padding-bottom:6px;padding-top:6px}calcite-tab{--calcite-color-focus: transparent}calcite-tab>*{--calcite-color-focus: initial}calcite-tabs{--calcite-tab-border-color: var(--calcite-color-border-2);flex:1;min-height:0}.tab-space-0{--calcite-tab-content-space-y: var(--calcite-spacing-none)}.tab-space-md{--calcite-tab-content-space-y: var(--calcite-spacing-md)}solutions-searchsort-toolbar,solutions-deploy-app-nav,solution-details-panel,solutions-deployed-shell,solutions-all-shell,solutions-resources-shell,calcite-tab-nav,solution-deployed-card-panel,.resources-menu-container{width:1440px;display:block;max-width:96vw;padding-right:var(--calcite-spacing-none);padding-left:var(--calcite-spacing-none);margin-left:auto;margin-right:auto;box-sizing:border-box}.resources-menu-container{background-color:var(--calcite-color-foreground-1)}.resources-menu-toolbar{height:65px;display:flex;align-items:center}.resources-menu-toolbar calcite-menu-item{transition:border-color .2s ease}.resources-menu-toolbar calcite-menu-item[active]{border-bottom-color:var(--calcite-color-brand)}.border{height:var(--calcite-spacing-px);border-bottom-color:var(--calcite-color-border-2);border-bottom-style:solid;border-bottom-width:var(--calcite-border-width-sm);box-sizing:border-box}.overflow-auto{overflow:auto}solution-details-panel{scroll-margin-top:3rem}.main-content{container-type:inline-size;display:flex;flex-direction:column;height:100%;overflow:hidden}.main-content.assistant-open{margin-inline-end:var(--assistant-panel-width)}.assistant-open solutions-searchsort-toolbar,.assistant-open solution-details-panel,.assistant-open solutions-deployed-shell,.assistant-open solutions-all-shell,.assistant-open solutions-resources-shell,.assistant-open calcite-tab-nav,.assistant-open solution-deployed-card-panel,.assistant-open .resources-menu-container{margin-inline-start:max(var(--panel-edge-adjustment),calc((96vw - 1440px) / 2 + var(--panel-edge-adjustment)));margin-inline-end:0;width:auto;max-width:1440px}.builder-panel{position:fixed;top:65px;inset-inline-start:max(var(--panel-edge-adjustment),calc((96vw - 1440px) / 2 + var(--panel-edge-adjustment)));inset-inline-end:var(--assistant-panel-width);bottom:0;z-index:400;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:auto}.builder-panel.display-none{display:flex!important;transform:translate(100%);pointer-events:none}.builder-panel:dir(rtl).display-none{transform:translate(-100%)}@supports (-webkit-touch-callout: none){.builder-panel.display-none{display:none!important;transform:none}.builder-panel:dir(rtl).display-none{transform:none}}.builder-panel.display-none:has(~.assistant-panel.display-none){display:none!important;transition:none}.assistant-panel{position:fixed;top:65px;inset-inline-end:0;bottom:0;width:var(--assistant-panel-width);min-width:var(--assistant-panel-min-width);z-index:400;display:flex;flex-direction:column}@media(max-width:800px){.builder-panel{display:none!important}.assistant-panel{width:100%;box-shadow:none}.main-content.assistant-open{margin-inline-end:0}}.assistant-fab{position:fixed;bottom:var(--calcite-spacing-xxl);inset-inline-end:var(--calcite-spacing-xxl);z-index:500}calcite-tooltip{--calcite-tooltip-max-size-x: 16rem}.assistant-fab-popover{--calcite-popover-max-size-x: 16rem}.assistant-fab-popover__content{display:block;padding-block:var(--calcite-spacing-sm);padding-inline:var(--calcite-spacing-md);font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-medium);word-wrap:break-word;word-break:break-word}`, N = {
+const R = S`.back-color-override{background-color:var(--calcite-color-surface-3);--calcite-tab-border-color: var(--calcite-color-surface-4)}:host{--panel-edge-adjustment: 2vw;--assistant-panel-min-width: 420px;--assistant-panel-width: max(var(--assistant-panel-min-width), calc((96vw - 1440px) / 2 + var(--panel-edge-adjustment) - 15px))}.display-none{display:none!important}.height-100{height:100%}calcite-tab-nav{padding-bottom:6px;padding-top:6px}calcite-tab{--calcite-color-focus: transparent}calcite-tab>*{--calcite-color-focus: initial}calcite-tabs{--calcite-tab-border-color: var(--calcite-color-border-2);flex:1;min-height:0}.tab-space-0{--calcite-tab-content-space-y: var(--calcite-spacing-none)}.tab-space-md{--calcite-tab-content-space-y: var(--calcite-spacing-md)}solutions-searchsort-toolbar,solutions-deploy-app-nav,solution-details-panel,solutions-deployed-shell,solutions-all-shell,solutions-resources-shell,calcite-tab-nav,solution-deployed-card-panel,.resources-menu-container{width:1440px;display:block;max-width:96vw;padding-right:var(--calcite-spacing-none);padding-left:var(--calcite-spacing-none);margin-left:auto;margin-right:auto;box-sizing:border-box}.resources-menu-container{background-color:var(--calcite-color-foreground-1)}.resources-menu-toolbar{height:65px;display:flex;align-items:center}.resources-menu-toolbar calcite-menu-item{transition:border-color .2s ease}.resources-menu-toolbar calcite-menu-item[active]{border-bottom-color:var(--calcite-color-brand)}.border{height:var(--calcite-spacing-px);border-bottom-color:var(--calcite-color-border-2);border-bottom-style:solid;border-bottom-width:var(--calcite-border-width-sm);box-sizing:border-box}.overflow-auto{overflow:auto}solution-details-panel{scroll-margin-top:3rem}.main-content{container-type:inline-size;display:flex;flex-direction:column;height:100%;overflow:hidden}.main-content.assistant-open{margin-inline-end:var(--assistant-panel-width)}.assistant-open solutions-searchsort-toolbar,.assistant-open solution-details-panel,.assistant-open solutions-deployed-shell,.assistant-open solutions-all-shell,.assistant-open solutions-resources-shell,.assistant-open calcite-tab-nav,.assistant-open solution-deployed-card-panel,.assistant-open .resources-menu-container{margin-inline-start:max(var(--panel-edge-adjustment),calc((96vw - 1440px) / 2 + var(--panel-edge-adjustment)));margin-inline-end:0;width:auto;max-width:1440px}.assistant-open solutions-searchsort-toolbar{overflow:hidden;scrollbar-gutter:stable}.builder-panel{position:fixed;top:65px;inset-inline-start:max(var(--panel-edge-adjustment),calc((96vw - 1440px) / 2 + var(--panel-edge-adjustment)));inset-inline-end:var(--assistant-panel-width);bottom:0;z-index:400;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:auto}.builder-panel.display-none{display:flex!important;transform:translate(100%);pointer-events:none}.builder-panel:dir(rtl).display-none{transform:translate(-100%)}@supports (-webkit-touch-callout: none){.builder-panel.display-none{display:none!important;transform:none}.builder-panel:dir(rtl).display-none{transform:none}}.builder-panel.display-none:has(~.assistant-panel.display-none){display:none!important;transition:none}.assistant-panel{position:fixed;top:65px;inset-inline-end:0;bottom:0;width:var(--assistant-panel-width);min-width:var(--assistant-panel-min-width);z-index:400;display:flex;flex-direction:column}@media(max-width:800px){.builder-panel{display:none!important}.assistant-panel{width:100%;box-shadow:none}.main-content.assistant-open{margin-inline-end:0}}.assistant-fab{position:fixed;bottom:var(--calcite-spacing-xxl);inset-inline-end:var(--calcite-spacing-xxl);z-index:500}calcite-tooltip{--calcite-tooltip-max-size-x: 16rem}.assistant-fab-popover{--calcite-popover-max-size-x: 16rem}.assistant-fab-popover__content{display:block;padding-block:var(--calcite-spacing-sm);padding-inline:var(--calcite-spacing-md);font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-medium);word-wrap:break-word;word-break:break-word}`, N = {
   solution: {
     title: "Bus Stop ADA Compliance Inspections",
     description: "Bus Stop ADA Compliance Inspections can be used to perform routine inspections of bus stops for ADA compliance and monitor inspection progress.",
@@ -810,7 +810,7 @@ class V extends w {
   render() {
     const e = this._isLoaded ? "display-none" : "", t = this._isLoaded ? "" : "display-none";
     return d`<calcite-shell><solutions-deploy-app-nav .appConfig=${this.appConfig} .assistantOpen=${this._isAssistantOpen} .initTab=${this.initTab} @authInit=${this._handleAuthInit} slot=header ${a(this._deployAppNav)}></solutions-deploy-app-nav><div class=${`main-content${this._isAssistantOpen ? " assistant-open" : ""}`} ${a(this._mainContentRef)}>${this._isSearchToolbarShowing() && d`<div class="border"></div>` || ""}${this._activeTab !== "resources" && d`<solutions-searchsort-toolbar ${a(async (i) => {
-      i && (await this._deployAppNav.value?.componentOnReady(), this._searchSortToolbar = i);
+      i && (await this._deployAppNav.value?.componentOnReady(), this._searchSortToolbar = i, i.scope = this._activeTab);
     })}></solutions-searchsort-toolbar>` || ""}${this._activeTab === "resources" && d`<div class="border"></div><div class="resources-menu-container"><calcite-menu .label=${this._translations.resourcesNavigationMenuLabel} class="resources-menu-toolbar"><calcite-menu-item .active=${this._activeResourcesMenuItem === "getStarted" || void 0} .label=${this._translations.resourcesGetStarted} .text=${this._translations.resourcesGetStarted} @click=${() => this._handleResourcesMenuClick("getStarted")}></calcite-menu-item><calcite-menu-item .active=${this._activeResourcesMenuItem === "documentation" || void 0} .label=${this._translations.resourcesDocumentation} .text=${this._translations.resourcesDocumentation} @click=${() => this._handleResourcesMenuClick("documentation")}></calcite-menu-item><calcite-menu-item .active=${this._activeResourcesMenuItem === "support" || void 0} .label=${this._translations.resourcesSupport} .text=${this._translations.resourcesSupport} @click=${() => this._handleResourcesMenuClick("support")}></calcite-menu-item></calcite-menu></div>` || ""}<calcite-loader class=${_(e)} id=solutions-loader .label=${this._translations.fetchingAllSolutions}></calcite-loader>${this._renderGlobalAlerts()}<calcite-tabs class=${_(t)} scale=l><calcite-tab-nav class="display-none" @calciteTabChange=${this._handleCalciteTabChanged} slot=title-group><calcite-tab-title ${a(this._allTabTitle)}>${this._translations.allSolutions}</calcite-tab-title><calcite-tab-title ${a(this._mySolutionsTabTitle)}>${this._translations.mySolutions}</calcite-tab-title><calcite-tab-title ${a(this._resourcesTabTitle)}>${this._translations.solutionResources}</calcite-tab-title><calcite-tab-title class="display-none" ${a(this._detailsTabTitle)}></calcite-tab-title><calcite-tab-title class="display-none" ${a(this._deployedCardTabTitle)}></calcite-tab-title></calcite-tab-nav><calcite-tab class="back-color-override tab-space-0" selected ${a(this._allTab)}><solutions-all-shell class="height-100" ${a(this._allShell)}></solutions-all-shell></calcite-tab><calcite-tab class="back-color-override tab-space-0" ${a(this._mySolutionsTab)}><solutions-deployed-shell class="height-100" ${a(this._mySolutionsShell)}></solutions-deployed-shell></calcite-tab><calcite-tab class="back-color-override tab-space-0" ${a(this._resourcesTab)}><solutions-resources-shell class="height-100" ${a(this._resourcesShell)}></solutions-resources-shell></calcite-tab><calcite-tab class="back-color-override" ${a(this._detailsTab)}><solution-details-panel class="height-100" .readOnlyNotice=${this._readOnlyNotice} ${a(this._detailsShell)}></solution-details-panel></calcite-tab><calcite-tab class="back-color-override tab-space-0" ${a(this._deployedCardTab)}><solution-deployed-card-panel class="shell-container height-100" .readOnlyNotice=${this._readOnlyNotice} ${a(this._deployedCardPanel)}></solution-deployed-card-panel></calcite-tab></calcite-tabs></div>${!this._configContextProvider.value?.isEnterprise && d`<div class=${`builder-panel${this._builderVisible && !this._isViewportMobile ? "" : " display-none"}`}><solution-builder-assistant class="height-100" .readOnlyNotice=${this._readOnlyNotice} ${a(this._solutionBuilderPanel)}></solution-builder-assistant></div><div class=${`assistant-panel${this._isAssistantOpen && !this._isViewportMobile ? "" : " display-none"}`}><arcgis-solutions-assistant class="height-100" .builderVisible=${this._builderVisible} .hasActiveBuilderDesign=${this._hasActiveBuilderDesign}></arcgis-solutions-assistant></div><calcite-fab aria-label=${this._translations.assistantFabTooltip ?? C} class=${`assistant-fab${this._isAssistantOpen || this._isViewportMobile ? " display-none" : ""}`} icon=effects id=assistant-fab-button @click=${() => {
       this._openAssistant(), this._fabTooltipDismissed = !0, this._showFabTooltip = !1;
     }} scale=l></calcite-fab>${!this._fabTooltipDismissed && d`<calcite-popover closable class=${`assistant-fab-popover${this._isAssistantOpen || this._isViewportMobile ? " display-none" : ""}`} .label=${this._translations.assistantFabTooltip} overlay-positioning=fixed @calcitePopoverClose=${() => {

package/dist/components/solutions-searchsort-toolbar/customElement.js

@@ -140,7 +140,7 @@ class f extends S {
       sortType: "suggested"
     }));
     const e = this._getCurrentScopeSetting();
-    return n`<calcite-dropdown width=m><calcite-button appearance=transparent class="header-button-padding" icon-start=sort-descending kind=neutral .label=${e?.sortType ? this._getString(e.sortType) : this._translations.chooseSortType} slot=trigger>${this._isMobile ? "" : e?.sortType ? this._getString(e.sortType) : ""}</calcite-button><calcite-dropdown-group group-title=${this._translations.chooseSortType ?? c}>${t.map((s) => this._getDropdownItem(s.displayValue, s.sortType))}</calcite-dropdown-group></calcite-dropdown>`;
+    return n`<calcite-dropdown placement=bottom-end width=m><calcite-button appearance=transparent class="header-button-padding" icon-start=sort-descending kind=neutral .label=${e?.sortType ? this._getString(e.sortType) : this._translations.chooseSortType} slot=trigger>${this._isMobile ? "" : e?.sortType ? this._getString(e.sortType) : ""}</calcite-button><calcite-dropdown-group group-title=${this._translations.chooseSortType ?? c}>${t.map((s) => this._getDropdownItem(s.displayValue, s.sortType))}</calcite-dropdown-group></calcite-dropdown>`;
   }
   _getDropdownItem(t, e) {
     const s = this._getCurrentScopeSetting();