move delete dialog and adjust z

src/components.d.ts

@@ -5,11 +5,11 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { AppLayout, ButtonType, DistanceUnit, EditType, EDrawMode, IBasemapConfig, IConsentResponse, IExportInfos, IFeatureServiceEnabledStatus, IInventoryItem, ILayerAndTableIds, ILayerExpression, IMapChange, IMapInfo, IReportingOptions, ISearchConfiguration, ISelectionSet, ISketchGraphicsChange, ISolutionSpatialReferenceInfo, ISortingInfo, ISpatialRefRepresentation, ITemplateInfo, IValueChange, theme } from "./utils/interfaces";
+import { AppLayout, ButtonType, DistanceUnit, EditType, EDrawMode, IBasemapConfig, IConsentResponse, IDeleteIds, IExportInfos, IFeatureServiceEnabledStatus, IInventoryItem, ILayerAndTableIds, ILayerExpression, IMapChange, IMapInfo, IReportingOptions, ISearchConfiguration, ISelectionSet, ISketchGraphicsChange, ISolutionSpatialReferenceInfo, ISortingInfo, ISpatialRefRepresentation, ITemplateInfo, IValueChange, theme } from "./utils/interfaces";
 import { IReportingOptions as IReportingOptions1 } from "./components";
 import { ILayerItemsHash } from "./components/layer-list/layer-list";
 import { UserSession } from "@esri/solution-common";
-export { AppLayout, ButtonType, DistanceUnit, EditType, EDrawMode, IBasemapConfig, IConsentResponse, IExportInfos, IFeatureServiceEnabledStatus, IInventoryItem, ILayerAndTableIds, ILayerExpression, IMapChange, IMapInfo, IReportingOptions, ISearchConfiguration, ISelectionSet, ISketchGraphicsChange, ISolutionSpatialReferenceInfo, ISortingInfo, ISpatialRefRepresentation, ITemplateInfo, IValueChange, theme } from "./utils/interfaces";
+export { AppLayout, ButtonType, DistanceUnit, EditType, EDrawMode, IBasemapConfig, IConsentResponse, IDeleteIds, IExportInfos, IFeatureServiceEnabledStatus, IInventoryItem, ILayerAndTableIds, ILayerExpression, IMapChange, IMapInfo, IReportingOptions, ISearchConfiguration, ISelectionSet, ISketchGraphicsChange, ISolutionSpatialReferenceInfo, ISortingInfo, ISpatialRefRepresentation, ITemplateInfo, IValueChange, theme } from "./utils/interfaces";
 export { IReportingOptions as IReportingOptions1 } from "./components";
 export { ILayerItemsHash } from "./components/layer-list/layer-list";
 export { UserSession } from "@esri/solution-common";
@@ -2351,6 +2351,7 @@ declare global {
     interface HTMLLayerTableElementEventMap {
         "featureSelectionChange": number[];
         "toggleFilter": void;
+        "showDelete": IDeleteIds;
     }
     interface HTMLLayerTableElement extends Components.LayerTable, HTMLStencilElement {
         addEventListener<K extends keyof HTMLLayerTableElementEventMap>(type: K, listener: (this: HTMLLayerTableElement, ev: LayerTableCustomEvent<HTMLLayerTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3727,6 +3728,10 @@ declare namespace LocalJSX {
           * Emitted on demand when a layer is selected
          */
         "onFeatureSelectionChange"?: (event: LayerTableCustomEvent<number[]>) => void;
+        /**
+          * Emitted on demand when when the delete dialog should be shown
+         */
+        "onShowDelete"?: (event: LayerTableCustomEvent<IDeleteIds>) => void;
         /**
           * Emitted on demand when filter action is clicked
          */

src/components/crowdsource-manager/crowdsource-manager.css

@@ -222,4 +222,8 @@
 
 .z-index-0 {
   z-index: 0 !important;
+}
+
+.z-index-1 {
+  z-index: 1 !important;
 }

src/components/crowdsource-manager/crowdsource-manager.tsx

@@ -242,6 +242,11 @@ export class CrowdsourceManager {
   //
   //--------------------------------------------------------------------------
 
+  /**
+   * boolean: When true the delete dialog will be shown
+   */
+  @State() _deleteDialogOpen = false;
+
   /**
    * boolean: when true the users can have the option to create features
    */
@@ -346,6 +351,11 @@ export class CrowdsourceManager {
    */
   protected _defaultLevelHonored = false;
 
+  /**
+   * number[]: the ids to be deleted
+   */
+  protected _deleteIds: number[];
+
   /**
    * HTMLLayerTableElement: The layer table element
    */
@@ -517,6 +527,17 @@ export class CrowdsourceManager {
     });
   }
 
+  /**
+   * Get the feature ids and open the delete dialog
+   */
+  @Listen("showDelete", { target: "window" })
+  async showDelete(
+    evt: CustomEvent
+  ): Promise<void> {
+    this._deleteIds = evt.detail.ids;
+    this._deleteDialogOpen = true;
+  }
+
   /**
    * Get the layer ids from the map
    */
@@ -562,6 +583,7 @@ export class CrowdsourceManager {
         </calcite-shell>
         {/* create a filter modal from manager to keep a comman modal for both layer-table and map-card and maintain state while switchig from one component to other*/}
         {this._filterModal()}
+        {this._deleteModal()}
       </Host>
     );
   }
@@ -829,7 +851,7 @@ export class CrowdsourceManager {
     const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen, hideTable);
     const borderRight = !this._isPortraitMobile && this._isMobile ? "border-right" : "";
     return (
-      <div class={`${mapSizeClass} overflow-hidden ${borderRight}`}>
+      <div class={`${mapSizeClass} overflow-hidden z-index-1 ${borderRight}`}>
         {this._getMapNode(panelOpen)}
         {this._getPopupExpandNode()}
       </div>
@@ -904,7 +926,7 @@ export class CrowdsourceManager {
    * @protected
    */
   protected _getPopupExpandNode(): VNode {
-    const popupNodeClass = this._isMobile ? "height-full" : "height-full position-relative z-index-0";
+    const popupNodeClass = this._isMobile ? "height-full" : "height-full position-relative";
     const headerClass = this._isPortraitMobile && this._showInformationHeader ? "display-none height-0" : "";
     const headerTheme = this.popupHeaderColor ? "" : !this._isPortraitMobile ? "calcite-mode-dark" : "calcite-mode-light";
     const containerClass = this._isPortraitMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isPortraitMobile ? "display-none height-0" : "";
@@ -1128,6 +1150,23 @@ export class CrowdsourceManager {
     )
   }
 
+  /**
+   * Show delete dialog
+   *
+   * @returns node that will support delete or keep of the features
+   * @protected
+   */
+  protected _deleteModal(): VNode {
+    return (<delete-dialog
+      id={"deleteDialogId"}
+      ids={this._deleteIds}
+      layer={this._layer}
+      locale={this.locale}
+      onDeleteDialogClose={() => this._deleteDialogOpen = false}
+      open={this._deleteDialogOpen}
+    />);
+  }
+
   /**
    * Show filter component in modal
    *

src/components/crowdsource-manager/readme.md

@@ -72,6 +72,7 @@
 - [layer-table](../layer-table)
 - calcite-action
 - calcite-tooltip
+- [delete-dialog](../delete-dialog)
 - calcite-modal
 - instant-apps-filter-list
 
@@ -89,6 +90,7 @@ graph TD;
   crowdsource-manager --> layer-table
   crowdsource-manager --> calcite-action
   crowdsource-manager --> calcite-tooltip
+  crowdsource-manager --> delete-dialog
   crowdsource-manager --> calcite-modal
   crowdsource-manager --> instant-apps-filter-list
   calcite-panel --> calcite-action
@@ -204,7 +206,6 @@ graph TD;
   layer-table --> calcite-panel
   layer-table --> calcite-input
   layer-table --> calcite-loader
-  layer-table --> delete-dialog
   layer-table --> calcite-action-bar
   layer-table --> map-layer-picker
   layer-table --> calcite-dropdown
@@ -214,7 +215,6 @@ graph TD;
   layer-table --> calcite-button
   layer-table --> instant-apps-social-share
   layer-table --> calcite-tooltip
-  layer-table --> delete-button
   layer-table --> calcite-modal
   layer-table --> instant-apps-filter-list
   instant-apps-filter-list --> calcite-panel

src/components/delete-button/readme.md

@@ -31,7 +31,6 @@
 
  - [crowdsource-manager](../crowdsource-manager)
  - [info-card](../info-card)
- - [layer-table](../layer-table)
 
 ### Depends on
 
@@ -58,7 +57,6 @@ graph TD;
   calcite-scrim --> calcite-loader
   crowdsource-manager --> delete-button
   info-card --> delete-button
-  layer-table --> delete-button
   style delete-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/delete-dialog/readme.md

@@ -27,8 +27,8 @@
 
 ### Used by
 
+ - [crowdsource-manager](../crowdsource-manager)
  - [delete-button](../delete-button)
- - [layer-table](../layer-table)
 
 ### Depends on
 
@@ -45,8 +45,8 @@ graph TD;
   calcite-scrim --> calcite-loader
   calcite-button --> calcite-loader
   calcite-button --> calcite-icon
+  crowdsource-manager --> delete-dialog
   delete-button --> delete-dialog
-  layer-table --> delete-dialog
   style delete-dialog fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/layer-table/layer-table.tsx

@@ -21,7 +21,7 @@ import { getLocaleComponentStrings } from "../../utils/locale";
 import { getFeatureLayerView, getLayerOrTable, goToSelection } from "../../utils/mapViewUtils";
 import { queryAllIds, queryAllOidsWithQueryFeatures, queryFeaturesByGlobalID } from "../../utils/queryUtils";
 import * as downloadUtils from "../../utils/downloadUtils";
-import { AppLayout, EditType, IColumnsInfo, IExportInfos, ILayerDef, IMapClick, IMapInfo, IToolInfo, IToolSizeInfo, TooltipPlacement } from "../../utils/interfaces";
+import { AppLayout, EditType, IColumnsInfo, IDeleteIds, IExportInfos, ILayerDef, IMapClick, IMapInfo, IToolInfo, IToolSizeInfo, TooltipPlacement } from "../../utils/interfaces";
 import "@esri/instant-apps-components/dist/components/instant-apps-social-share";
 import { LayerExpression } from "@esri/instant-apps-components";
 
@@ -200,11 +200,6 @@ export class LayerTable {
    */
   @State() _selectAllActive = false;
 
-  /**
-   * boolean: When true the delete dialog will be shown
-   */
-  @State() _deleteDialogOpen = false;
-
   /**
    * boolean: When true the show/hide fields list is forced open
    */
@@ -686,6 +681,11 @@ export class LayerTable {
    */
   @Event() toggleFilter: EventEmitter<void>;
 
+  /**
+   * Emitted on demand when when the delete dialog should be shown
+   */
+  @Event() showDelete: EventEmitter<IDeleteIds>;
+
   /**
    * Scroll and zoom to the selected feature from the Features widget.
    *
@@ -872,15 +872,6 @@ export class LayerTable {
           }
         </calcite-shell>
         {this.createFilterModal && this._filterModal()}
-        <delete-dialog
-          id={"deleteDialogId"}
-          ids={this._getIds()}
-          layer={this._layer}
-          locale={this.locale}
-          onDeleteDialogClose={() => this._deleteDialogOpen = false}
-          open={this._deleteDialogOpen}
-          ref={(el) => this._deleteDialog = el}
-        />
       </Host>
     );
   }
@@ -1676,7 +1667,9 @@ export class LayerTable {
    *
    */
   protected _showDelete(): void {
-    this._deleteDialogOpen = true;
+    this.showDelete.emit({
+      ids: this._getIds()
+    })
   }
 
   /**
@@ -1800,24 +1793,14 @@ export class LayerTable {
     const _disabled = this._layer === undefined ? true : disabled;
     return (
       <div class="display-flex" id={this._getId(icon)}>
-        {icon === "trash" ? (
-          <delete-button
-            buttonType="action"
-            class="display-flex"
-            disabled={_disabled}
-            icon={icon}
-            id="solutions-delete"
-            ids={this._getIds()}
-            layer={this._layer}
-            locale={this.locale}
-          />
-        ) : (
+        {(
           <calcite-action
             appearance="solid"
+            compact={true}
             disabled={_disabled}
             id={icon}
             onClick={func}
-            text={label}
+            text=""
           >
             <calcite-button
               appearance="transparent"
@@ -1921,7 +1904,7 @@ export class LayerTable {
         } else {
           // https://github.com/Esri/solutions-components/issues/365
           this.selectedIds = ids.reverse();
-          this._tempSelectedIds = [...this.selectedIds];  
+          this._tempSelectedIds = [...this.selectedIds];
         }
       } else if (this._ctrlIsPressed) {
         this.selectedIds = ids.reverse();

src/components/layer-table/readme.md

@@ -35,10 +35,11 @@
 
 ## Events
 
-| Event                    | Description                                     | Type                    |
-| ------------------------ | ----------------------------------------------- | ----------------------- |
-| `featureSelectionChange` | Emitted on demand when a layer is selected      | `CustomEvent<number[]>` |
-| `toggleFilter`           | Emitted on demand when filter action is clicked | `CustomEvent<void>`     |
+| Event                    | Description                                                   | Type                      |
+| ------------------------ | ------------------------------------------------------------- | ------------------------- |
+| `featureSelectionChange` | Emitted on demand when a layer is selected                    | `CustomEvent<number[]>`   |
+| `showDelete`             | Emitted on demand when when the delete dialog should be shown | `CustomEvent<IDeleteIds>` |
+| `toggleFilter`           | Emitted on demand when filter action is clicked               | `CustomEvent<void>`       |
 
 
 ## Methods
@@ -102,7 +103,6 @@ Type: `Promise<void>`
 - calcite-panel
 - calcite-input
 - calcite-loader
-- [delete-dialog](../delete-dialog)
 - calcite-action-bar
 - [map-layer-picker](../map-layer-picker)
 - calcite-dropdown
@@ -112,7 +112,6 @@ Type: `Promise<void>`
 - calcite-button
 - instant-apps-social-share
 - calcite-tooltip
-- [delete-button](../delete-button)
 - calcite-modal
 - instant-apps-filter-list
 
@@ -123,7 +122,6 @@ graph TD;
   layer-table --> calcite-panel
   layer-table --> calcite-input
   layer-table --> calcite-loader
-  layer-table --> delete-dialog
   layer-table --> calcite-action-bar
   layer-table --> map-layer-picker
   layer-table --> calcite-dropdown
@@ -133,7 +131,6 @@ graph TD;
   layer-table --> calcite-button
   layer-table --> instant-apps-social-share
   layer-table --> calcite-tooltip
-  layer-table --> delete-button
   layer-table --> calcite-modal
   layer-table --> instant-apps-filter-list
   calcite-panel --> calcite-action
@@ -148,12 +145,6 @@ graph TD;
   calcite-scrim --> calcite-loader
   calcite-input --> calcite-progress
   calcite-input --> calcite-icon
-  delete-dialog --> calcite-modal
-  delete-dialog --> calcite-button
-  calcite-modal --> calcite-scrim
-  calcite-modal --> calcite-icon
-  calcite-button --> calcite-loader
-  calcite-button --> calcite-icon
   calcite-action-bar --> calcite-action-group
   calcite-action-group --> calcite-action-menu
   calcite-action-group --> calcite-action
@@ -177,15 +168,15 @@ graph TD;
   calcite-combobox --> calcite-icon
   calcite-combobox-item --> calcite-icon
   calcite-chip --> calcite-icon
+  calcite-button --> calcite-loader
+  calcite-button --> calcite-icon
   calcite-dropdown-item --> calcite-icon
   instant-apps-social-share --> calcite-popover
   instant-apps-social-share --> calcite-button
   instant-apps-social-share --> calcite-icon
   instant-apps-social-share --> calcite-action
-  delete-button --> calcite-button
-  delete-button --> calcite-action
-  delete-button --> calcite-tooltip
-  delete-button --> delete-dialog
+  calcite-modal --> calcite-scrim
+  calcite-modal --> calcite-icon
   instant-apps-filter-list --> calcite-panel
   instant-apps-filter-list --> calcite-loader
   instant-apps-filter-list --> calcite-checkbox

src/utils/interfaces.ts

@@ -116,6 +116,10 @@ export interface ICsvOptions {
   addColumnTitle: boolean;
 }
 
+export interface IDeleteIds {
+  ids: number[];
+}
+
 export interface IPdfOptions {
   enabled: boolean;
   enabledSizeValues: ValidSize[];