@esri/solutions-components 1.0.0-next.20250501.2 → 1.0.0-next.20250506.1

package/dist/components/map-card/customElement.d.ts

@@ -12,85 +12,165 @@ export declare class MapCard extends LitElement {
     appLayout: AppLayout | undefined;
     /** Array of objects containing proxy information for premium platform services. */
     appProxies: any;
-    /** string: Item ID of the web map that should be selected by default when the app loads */
+    /**
+     * string: Item ID of the web map that should be selected by default when the app loads
+     *
+     * @default ''
+     */
     defaultWebmapId: string;
-    /** string: when provided this layer ID will be used when the app loads */
+    /**
+     * string: when provided this layer ID will be used when the app loads
+     *
+     * @default ''
+     */
     defaultLayerId: string;
-    /** boolean: when true the home widget will be available */
+    /**
+     * boolean: when true the home widget will be available
+     *
+     * @default false
+     */
     enableHome: boolean;
-    /** boolean: when true the legend widget will be available */
+    /**
+     * boolean: when true the legend widget will be available
+     *
+     * @default false
+     */
     enableLegend: boolean;
-    /** boolean: when true the floor filter widget will be available */
+    /**
+     * boolean: when true the floor filter widget will be available
+     *
+     * @default false
+     */
     enableFloorFilter: boolean;
-    /** boolean: when true the fullscreen widget will be available */
+    /**
+     * boolean: when true the fullscreen widget will be available
+     *
+     * @default false
+     */
     enableFullscreen: boolean;
-    /** boolean: when true the share widget will be available */
+    /**
+     * boolean: when true the share widget will be available
+     *
+     * @default false
+     */
     enableShare: boolean;
     /**
      * boolean: when true map tools will be displayed within a single expand/collapse widget
      * when false widgets will be loaded individually into expand widgets
+     *
+     * @default false
      */
     enableSingleExpand: boolean;
-    /** boolean: when true the search widget will be available */
+    /**
+     * boolean: when true the search widget will be available
+     *
+     * @default false
+     */
     enableSearch: boolean;
-    /** boolean: when true the basemap widget will be available */
+    /**
+     * boolean: when true the basemap widget will be available
+     *
+     * @default false
+     */
     enableBasemap: boolean;
     /** IBasemapConfig: List of any basemaps to filter out from the basemap widget */
     basemapConfig: IBasemapConfig | undefined;
-    /** boolean: When true the map display will be hidden */
+    /**
+     * boolean: When true the map display will be hidden
+     *
+     * @default false
+     */
     hide: boolean;
     /**
      * number: The placement index of the home and zoom components. This index shows where to place the component relative to other components.
      * For example a value of 0 would place it topmost when position is top-*, leftmost for bottom-left and right most for bottom-right.
+     *
+     * @default 3
      */
     homeZoomIndex: number;
     /**
      * __esri.UIPosition: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-UI.html#UIPosition
      * The position details for the Home and Zoom tools
+     *
+     * @default 'top-left'
      */
     homeZoomPosition: __esri.UIPosition;
-    /** "s" | "m" | "l": Used for Zoom and Home tools */
+    /**
+     * "s" | "m" | "l": Used for Zoom and Home tools
+     *
+     * @default 'm'
+     */
     homeZoomToolsSize: 'l' | 'm' | 's';
     /** IMapInfo[]: array of map infos (name and id) */
     mapInfos: IMapInfo[];
     /**
      * number: The placement index of the map widgets (legend, basemap, fullscreen etc). This index shows where to place the component relative to other components.
      * For example a value of 0 would place it topmost when position is top-*, leftmost for bottom-left and right most for bottom-right.
+     *
+     * @default 0
      */
     mapWidgetsIndex: number;
     /**
      * __esri.UIPosition: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-UI.html#UIPosition
      * The position details for the Home and Zoom tools
+     *
+     * @default 'top-right'
      */
     mapWidgetsPosition: __esri.UIPosition;
-    /** "s" | "m" | "l": Used for optional map tool widget */
+    /**
+     * "s" | "m" | "l": Used for optional map tool widget
+     *
+     * @default 'm'
+     */
     mapWidgetsSize: 'l' | 'm' | 's';
     /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
     mapView: __esri.MapView | undefined;
     /**
      * boolean: When true the map widget tools will have no margin between them.
      * When false the map widget tools will have a margin between them.
+     *
+     * @default false
      */
     stackTools: boolean;
     /** theme: "light" | "dark" theme to be used */
     theme: theme | undefined;
     /** Valid tools: "legend", "search", "fullscreen", "basemap", "floorfilter" */
     toolOrder: string[];
-    /** boolean: When true map will shown is full screen */
+    /**
+     * boolean: When true map will shown is full screen
+     *
+     * @default false
+     */
     isMapLayout: boolean;
-    /** boolean: When true the share options will include embed option */
+    /**
+     * boolean: When true the share options will include embed option
+     *
+     * @default false
+     */
     shareIncludeEmbed: boolean;
-    /** boolean: When true the share options will include social media sharing */
+    /**
+     * boolean: When true the share options will include social media sharing
+     *
+     * @default false
+     */
     shareIncludeSocial: boolean;
     /** number[]: A list of ids that are currently selected */
-    selectedFeaturesIds: number[];
+    selectedFeaturesIds: (number | string)[];
     /** __esri.FeatureLayer: Selected layer */
     selectedLayer: __esri.FeatureLayer | undefined;
     /** number: default scale to zoom to when zooming to a single point feature */
     zoomToScale: number | undefined;
-    /** boolean: When true only editable layers that support the update capability will be available */
+    /**
+     * boolean: When true only editable layers that support the update capability will be available
+     *
+     * @default false
+     */
     onlyShowUpdatableLayers: boolean;
-    /** When true the component will render an optimized view for mobile devices */
+    /**
+     * When true the component will render an optimized view for mobile devices
+     *
+     * @default false
+     */
     isMobile: boolean;
     /** IMapInfo: key configuration details about the current map */
     mapInfo: IMapInfo | undefined;

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

@@ -10,7 +10,7 @@ import { css as L } from "@lit/reactive-element/css-tag.js";
 import { defineCustomElements as $ } from "@arcgis/instant-apps-components/loader";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250501.2 */
+v1.0.0-next.20250506.1 */
 const v = L`@layer{/** @license
  * Copyright 2025 Esri
  *
@@ -27,11 +27,6 @@ const v = L`@layer{/** @license
  * limitations under the License.
  */: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}.display-flex{display:flex}.display-none{display:none}.display-block{display:block}.absolute-right{position:absolute;right:0;left:unset}html[dir=rtl] .absolute-right{left:0;right:unset}}`;
 class S extends w {
-  //--------------------------------------------------------------------------
-  //
-  //  Overrides (internal)
-  //
-  //--------------------------------------------------------------------------
   constructor() {
     super(), this.defaultWebmapId = "", this.defaultLayerId = "", this.enableHome = !1, this.enableLegend = !1, this.enableFloorFilter = !1, this.enableFullscreen = !1, this.enableShare = !1, this.enableSingleExpand = !1, this.enableSearch = !1, this.enableBasemap = !1, this.hide = !1, this.homeZoomIndex = 3, this.homeZoomPosition = "top-left", this.homeZoomToolsSize = "m", this.mapInfos = [], this.mapWidgetsIndex = 0, this.mapWidgetsPosition = "top-right", this.mapWidgetsSize = "m", this.stackTools = !1, this.toolOrder = [], this.isMapLayout = !1, this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.selectedFeaturesIds = [], this.onlyShowUpdatableLayers = !1, this.isMobile = !1, this._translations = _({ name: "map-card", blocking: !0 }), this._toolInfos = [], this._defaultWebmapHonored = !1, this._loadedId = "", this._mapDiv = n(), this._mapPicker = n(), this._mapTools = n(), this._mapListExpanded = !1, this._filterActive = !1, this._definitionExpression = "", this._mapLayerPicker = n(), this._toolbar = n(), this.mapChanged = d(), this.beforeMapChanged = d(), this.toggleFilter = d(), this.clearSelection = d(), this.listenOn(window, "mapInfoChange", this.mapInfoChange), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.enableSingleExpand = !0, this.stackTools = !0, $(window);
   }
@@ -44,96 +39,59 @@ class S extends w {
   static {
     this.shadowRootOptions = I;
   }
-  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
   willUpdate(e) {
     e.has("appLayout") && this.appLayoutWatchHandler(), e.has("enableHome") && this.enableHomeWatchHandler(), e.has("mapView") && this.mapViewWatchHandler(), e.has("selectedLayer") && this.selectedLayerWatchHandler(), e.has("selectedFeaturesIds") && this.selectedFeaturesIdsWatchHandler();
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Watch handlers
-  //
-  //--------------------------------------------------------------------------
-  /** Update the url params when the appLayout changes */
   appLayoutWatchHandler() {
     this._updateShareUrl();
   }
-  /** Add/remove home widget */
   enableHomeWatchHandler() {
     this.mapView && this._initHome();
   }
-  /** watch for changes in map view and get the first layer */
   async mapViewWatchHandler() {
     this.mapView && this._updateShareUrl();
   }
-  /** watch for changes in layer view and verify if it has editing enabled */
   async selectedLayerWatchHandler() {
     await this.selectedLayer?.when(async () => {
       this._definitionExpression = this.selectedLayer?.definitionExpression || "";
     });
   }
-  /** watch for features ids changes */
   async selectedFeaturesIdsWatchHandler() {
     this._updateShareUrl(), this._validateEnabledActions();
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Methods (public)
-  //
-  //--------------------------------------------------------------------------
-  /** Reset the filter */
   async resetFilter() {
     this._filterActive = !1, this._updateShareUrl();
   }
-  /** updates the filter */
   async updateFilterState(e) {
     this._filterActive = e, this._updateShareUrl();
   }
-  /** updates the layer in map layer picker */
   async updateLayer() {
     this._mapLayerPicker.value && this._mapLayerPicker.value.updateLayer();
   }
-  /** Listen for changes to map info and load the appropriate map */
   async mapInfoChange(e) {
     await this._loadMap(e.detail);
   }
-  /** Listen for change when mapview doesn't contain any layer */
   noLayersFound() {
     this.selectedLayer = void 0, this.selectedFeaturesIds = [];
   }
-  /** Handles layer selection change to show new table */
   layerSelectionChange() {
     setTimeout(() => {
       this._initToolInfos();
     }, 50);
   }
-  /** Called once just after the component is first connected to the DOM. */
   async load() {
     await this._initModules(), this._initToolInfos();
   }
-  /** Renders the component. */
   render() {
     const e = this.isMapLayout ? "display-flex height-49-px" : "", i = this.hide ? "visibility-hidden-1" : "", s = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light", t = this.mapInfos?.length > 1 || this.isMapLayout ? "map-height" : "height-full", a = this.isMapLayout ? "" : "display-none";
     return this._validateActiveActions(), l`<div class=${`${e} width-full`} ${h(this._toolbar)}>${this._getActionBar()}<div slot=header-actions-end class="display-flex absolute-right">${this.enableShare && !this.isMobile && this.isMapLayout ? this._getShare("share") : void 0}</div></div><calcite-progress class=${p(a)} value=0></calcite-progress><div class=${`${t} ${i}`} ${h(this._mapDiv)}></div>${l`<map-tools .basemapConfig=${this.basemapConfig} class=${`box-shadow ${s}`} .enableBasemap=${this.enableBasemap} .enableFloorFilter=${this.enableFloorFilter} .enableFullscreen=${this.enableFullscreen} .enableHome=${this.enableHome} .enableLegend=${this.enableLegend} .enableSearch=${this.enableSearch} .enableSingleExpand=${this.enableSingleExpand} .homeZoomToolsSize=${this.homeZoomToolsSize} .mapView=${this.mapView} .mapWidgetsSize=${this.mapWidgetsSize} .position=${this.mapWidgetsPosition} .searchConfiguration=${this._searchConfiguration} .stackTools=${this.stackTools} .toolOrder=${this.toolOrder} ${h(this._mapTools)}></map-tools>`}`;
   }
-  /** Called each time after the component is loaded */
   updated() {
     document.onclick = (e) => this._handleDocumentClick(e);
   }
-  /** Called once after the component is loaded */
   loaded() {
     this._updateShareUrl();
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (protected)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Load esri javascript api modules
-   *
-   * @returns Promise resolving when function is done
-   * @protected
-   */
   async _initModules() {
     const [e, i, s, t] = await u([
       "esri/WebMap",
@@ -143,11 +101,6 @@ class S extends w {
     ]);
     this.WebMap = e, this.MapView = i, this.Home = s, this.esriConfig = t;
   }
-  /**
-   * Load the webmap for the provided webMapInfo
-   *
-   * @param webMapInfo the webmap id and name to load
-   */
   async _loadMap(e) {
     const i = !this._defaultWebmapHonored && this.defaultWebmapId, s = this.mapInfos?.filter((o) => o.id === this.defaultWebmapId), t = JSON.stringify(e) !== JSON.stringify(this._webMapInfo);
     this._webMapInfo = i && s ? s[0] : !e?.id && this.mapInfos.length > 0 ? this.mapInfos[0] : e;
@@ -172,28 +125,15 @@ class S extends w {
     }));
     this._updateShareUrl();
   }
-  /**
-   * Gets a row of controls that can be used for various interactions with the table
-   *
-   * @returns The dom node that contains the controls
-   * @protected
-   */
   _getActionBar() {
     const e = this.mapInfos?.length > 1 ? "" : "display-none", i = this.isMapLayout ? "display-flex" : "display-block", s = this.isMobile ? "border-top" : "", t = this.isMapLayout ? "" : "display-none";
     return l`<calcite-action-bar class=${p(i)} expand-disabled expanded id=${this._getId("bar") ?? c} layout=horizontal><map-picker class=${p(e)} id=map-picker .isMapLayout=${this.isMapLayout} .mapInfos=${this.mapInfos} ${h(this._mapPicker)}></map-picker><div class=${`mapView-header display-flex ${t}`} id=solutions-map-layer-picker-container><div class=${`border-end ${i} ${s}`}>${this.mapView && l`<map-layer-picker appearance=transparent .defaultLayerId=${this.defaultLayerId} display=inline-flex height=50 .isMobile=${this.isMobile} .mapView=${this.mapView} @lyShowUpdatableLayers=${this.onlyShowUpdatableLayers} 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>${!this.isMobile && this.isMapLayout ? this._getActions() : void 0}</calcite-action-bar>`;
   }
-  /**
-   * Get an action and tooltip for share
-   *
-   * @param icon string the name of the icon to display, will also be used in its id
-   * @returns VNode The node representing the DOM element that will contain the action
-   */
   _getShare(e) {
     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} ${h((i) => {
       i && (this._shareNode = i, this._updateShareUrl());
     })}></instant-apps-social-share>` || ""}${this._getToolTip("bottom", e, this._translations?.share)}</div>`;
   }
-  /** Called each time the values that are used for custom url params change */
   _updateShareUrl() {
     const e = this._shareNode?.shareUrl;
     if (!e)
@@ -201,13 +141,6 @@ class S extends w {
     const i = new URL(e);
     this._loadedId ? i.searchParams.set("webmap", this._loadedId) : i.searchParams.delete("webmap"), this.selectedLayer?.id ? i.searchParams.set("layer", this.selectedLayer.id) : i.searchParams.delete("layer"), this.selectedFeaturesIds?.length > 0 ? i.searchParams.set("oid", this.selectedFeaturesIds.join(",")) : i.searchParams.delete("oid"), this.appLayout && i.searchParams.set("applayout", this.appLayout), this._shareNode && (this._shareNode.shareUrl = i.href);
   }
-  /**
-   * Get the full list of toolInfos.
-   * Order is important. They should be listed in the order they should display in the UI from
-   * Left to Right for the action bar and Top to Bottom for the dropdown.
-   *
-   * @protected
-   */
   _initToolInfos() {
     const e = this.selectedFeaturesIds?.length > 0;
     this.selectedFeaturesIds?.length > 1;
@@ -242,33 +175,18 @@ class S extends w {
       disabled: !e
     }), this._toolInfos = i;
   }
-  /**
-   * Update actions active prop based on a stored value
-   *
-   * @protected
-   */
   _validateActiveActions() {
     const e = ["filter"];
     this._toolInfos?.forEach((i) => {
       i && e.indexOf(i.icon) > -1 && i.icon === "filter" && (i.indicator = this._filterActive);
     });
   }
-  /**
-   * Update actions enabled prop based on number of selected indexes
-   *
-   * @protected
-   */
   _validateEnabledActions() {
     const e = this.selectedFeaturesIds?.length > 0, i = this.selectedFeaturesIds?.length > 1 && this.selectedLayer?.capabilities?.operations?.supportsUpdate, s = ["zoom-to-object", "pencil", "erase"];
     this._toolInfos?.forEach((t) => {
       t && s.indexOf(t.icon) > -1 && (t.disabled = t.icon === "pencil" ? !i : !e);
     });
   }
-  /**
-   * Add/remove the home widget base on enableHome prop
-   *
-   * @protected
-   */
   _initHome() {
     if (this.enableHome) {
       if (this._homeWidget = this.Home && new this.Home({
@@ -280,80 +198,32 @@ class S extends w {
       }
     } else this._homeWidget && this.mapView && this.mapView.ui.remove(this._homeWidget);
   }
-  /** Close show/hide dropdown when the user clicks outside of it */
   _handleDocumentClick(e) {
     e.target.tagName !== "MAP-PICKER" && (this._mapListExpanded = !1, this._mapPicker.value && this._mapPicker.value.close());
   }
-  /**
-   * Zoom to all selected features
-   *
-   * @returns a promise that will resolve when the operation is complete
-   */
   async _zoom() {
     if (this.selectedLayer && this.mapView) {
       const e = await g(this.mapView, this.selectedLayer.id);
       e && await y(this.selectedFeaturesIds, e, this.mapView, !0, void 0, this.zoomToScale);
     }
   }
-  /**
-   * toggle the filter
-   *
-   * @protected
-   */
   async _toggleFilter() {
     this.toggleFilter.emit();
   }
-  /**
-   * Return true when we have at least 1 layer expression for the current layer
-   *
-   * @returns boolean
-   */
   _hasFilterExpressions() {
     let e = [];
     return this.mapInfo?.filterConfig?.layerExpressions && this.selectedLayer?.id && (e = this.mapInfo.filterConfig.layerExpressions.filter((i) => i.id === this.selectedLayer?.id)), e.length > 0;
   }
-  /**
-   * Get the actions that are used for various interactions with the table
-   *
-   * @returns VNode[] the action nodes
-   */
   _getActions() {
     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)), e), []);
   }
-  /**
-   * Get a tooltip
-   *
-   * @param placement string where the tooltip should display
-   * @param referenceElement string the element the tooltip will be associated with
-   * @param text string the text to display in the tooltip
-   * @returns VNode The tooltip node
-   */
   _getToolTip(e, i, s) {
     return document.getElementById(i) ? l`<calcite-tooltip .placement=${e} .referenceElement=${"map-" + i}><span>${s}</span></calcite-tooltip>` : void 0;
   }
-  /**
-   * Get an action and tooltip
-   *
-   * @param active boolean if true the icon is in use
-   * @param icon string the name of the icon to display, will also be used as the id
-   * @param indicator if true the icon will shown using indicator
-   * @param label string the text to display and label the action
-   * @param func any the function to execute
-   * @param disabled boolean when true the user will not be able to interact with the action
-   * @param loading if true loading indicator will shown
-   * @param slot slot for the action
-   * @returns VNode The node representing the DOM element that will contain the action
-   */
   _getAction(e, i, s, t, a, r, o) {
     const m = this.selectedLayer === void 0 ? !0 : r;
     return l`<calcite-action .active=${e} appearance=solid .disabled=${m} .icon=${i} .id=${"map-" + i} .indicator=${s} .label=${t} .loading=${o} @click=${a} .text=${t} text-enabled></calcite-action>`;
   }
-  /**
-   * Get an id with a prefix to the user supplied value
-   *
-   * @param id the unique value for the id
-   * @returns the new id with the prefix value
-   */
   _getId(e) {
     return `solutions-action-${e}`;
   }

package/dist/components/map-draw-tools/customElement.d.ts

@@ -5,16 +5,26 @@ import { PropertyValues } from 'lit';
 import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
 
 export declare class MapDrawTools extends LitElement {
-    /** boolean: sketch is used by multiple components...need a way to know who should respond... */
+    /**
+     * boolean: sketch is used by multiple components...need a way to know who should respond...
+     *
+     * @default false
+     */
     active: boolean;
     /**
      * utils/interfaces: Controls how the draw tools are rendered
      *
      * SKETCH mode supports snapping
      * REFINE mode supports undo/redo
+     *
+     * @default 'SKETCH'
      */
     drawMode: EDrawMode;
-    /** boolean: when true you will be able to make additional modifications to the sketched geometry */
+    /**
+     * boolean: when true you will be able to make additional modifications to the sketched geometry
+     *
+     * @default true
+     */
     editGraphicsEnabled: boolean;
     /** esri/Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html */
     graphics: __esri.Graphic[];
@@ -26,9 +36,17 @@ export declare class MapDrawTools extends LitElement {
     polylineSymbol: __esri.SimpleLineSymbol | undefined;
     /** esri/symbols/SimpleFillSymbol: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html */
     polygonSymbol: __esri.SimpleFillSymbol | undefined;
-    /** boolean: when eanbled the user can redo the previous operation */
+    /**
+     * boolean: when eanbled the user can redo the previous operation
+     *
+     * @default false
+     */
     redoEnabled: boolean;
-    /** boolean: when eanbled the user can undo the previous operation */
+    /**
+     * boolean: when eanbled the user can undo the previous operation
+     *
+     * @default false
+     */
     undoEnabled: boolean;
     /**
      * Clears the user drawn graphics