@esri/solutions-components 1.2.0-next.98 → 5.0.0

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

@@ -1,172 +1,209 @@
-/// <reference types="@arcgis/core/interfaces.d.ts" />
 /// <reference path="../../index.d.ts" />
-import { IBasemapConfig, IMapInfo, ISearchConfiguration, VisibilityIconType } from '../../utils/interfaces';
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type { IBasemapConfig, IMapInfo, ISearchConfiguration, VisibilityIconType } from "../../utils/interfaces.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
 
-export declare class MapTools extends LitElement {
-    /** IBasemapConfig: List of any basemaps to filter out from the basemap widget */
-    basemapConfig: IBasemapConfig | undefined;
-    /**
-     * string[]: Optional list of enabled layer ids
-     *  If empty all layers will be available
-     */
-    enabledLayerIds: string[];
-    /**
-     * boolean: when true the legend widget will be available
-     *
-     * @default false
-     */
-    enableLegend: boolean;
-    /**
-     * boolean: when true the layer list widget will be available
-     *
-     * @default false
-     */
-    enableLayerList: boolean;
-    /**
-     * boolean: when true the floor filter widget will be available
-     *
-     * @default false
-     */
-    enableFloorFilter: boolean;
-    /**
-     * boolean: when true the fullscreen widget will be available
-     *
-     * @default false
-     */
-    enableFullscreen: boolean;
-    /**
-     * boolean: when true the search widget will be available
-     *
-     * @default false
-     */
-    enableSearch: boolean;
-    /**
-     * boolean: when true the basemap widget will be available
-     *
-     * @default false
-     */
-    enableBasemap: boolean;
-    /**
-     * boolean: when true the home widget will be available
-     *
-     * @default false
-     */
-    enableHome: 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;
-    /**
-     * 's' | 'm' | 'l': Used for Zoom tools
-     *
-     * @default 'm'
-     */
-    zoomToolsSize: 'l' | 'm' | 's';
-    /**
-     * 'horizontal' | 'vertical': used to control the orientation of the tools
-     *
-     * @default 'vertical'
-     */
-    layout: 'horizontal' | 'vertical';
-    /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-    mapView: __esri.MapView | undefined;
-    /**
-     * 's' | 'm' | 'l': Used for optional map tool widget
-     *
-     * @default 'm'
-     */
-    mapWidgetsSize: 'l' | 'm' | 's';
-    /**
-     * boolean: when true the map picker will be available
-     *
-     * @default false
-     */
-    enableMapPicker: boolean;
-    /**
-     * boolean: when true the map layer picker will be available
-     *
-     * @default false
-     */
-    enableMapLayerPicker: boolean;
-    /**
-     * __esri.UIPosition: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-UI.html#UIPosition
-     * The position details for the tools
-     *
-     * @default 'top-leading'
-     */
-    position: __esri.UIPosition;
-    /** ISearchConfiguration: Configuration details for the Search widget */
-    searchConfiguration: ISearchConfiguration | 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 true
-     */
-    stackTools: boolean;
-    /**
-     * boolean: when true the selection tools will be available
-     *
-     * @default false
-     */
-    enableSelectionTool: boolean;
-    /**
-     * Tools to show and its order
-     * Valid tools: 'home', 'legend', 'search', 'fullscreen', 'basemap', 'floorfilter', 'selectiontool', 'layers-list', 'map-picker', 'map-layer-picker'
-     */
-    toolOrder: string[];
-    /** string[]: Selection tools to show */
-    selectionTools: string[];
-    /** __esri.FeatureLayer: Selected feature layer */
-    selectedLayer: __esri.FeatureLayer | undefined;
-    /** IMapInfo[]: array of map infos (name and id) */
-    mapInfos: IMapInfo[];
-    /**
-     * string: when provided this layer ID will be used when the app loads
-     *
-     * @default ''
-     */
-    defaultLayerId: string;
-    /**
-     * When true the component will render an optimized view for mobile devices
-     *
-     * @default false
-     */
-    isMobile: boolean;
-    /** component height */
-    parentComponentHeight: number | undefined;
-    /** Parent component width */
-    parentComponentWidth: number | undefined;
-    /** number[]: A list of ids that are currently selected */
-    selectedFeaturesIds: (number | string)[];
-    /**
-     * string: selected web map
-     *
-     * @default ''
-     */
-    selectedWebMapId: string;
-    /**
-     * boolean: When true only editable layers that support the update capability will be available
-     *
-     * @default false
-     */
-    showOnlyUpdatableLayers: boolean;
-    /** IMapInfo: key configuration details about the current map */
-    mapInfo: IMapInfo | undefined;
-    /**
-     * VisibilityIconType: visibility icon for the layer list widget
-     *
-     * @default 'eyeball'
-     */
-    visibilityIcon: VisibilityIconType;
-    /** Emitted on demand when clear selection button is clicked */
-    readonly clearSelection: TargetedEvent<this, void>;
-    "@eventTypes": {
-        "clearSelection": MapTools["clearSelection"]["detail"];
-    };
-}
+export abstract class MapTools extends LitElement {
+  /**
+   * Contains the translations for this component.
+   * All UI strings should be defined here.
+   *
+   * @internal
+   */
+  protected _translations: {
+      legend: string;
+      search: string;
+      expand: string;
+      basemap: string;
+      layers: string;
+      collapse: string;
+      enterFullscreen: string;
+      exitFullscreen: string;
+      floorFilter: string;
+      selectionTools: string;
+      selectByRectangle: string;
+      selectByLasso: string;
+      clearSelection: string;
+      defaultMapView: string;
+  } & T9nMeta<{
+      legend: string;
+      search: string;
+      expand: string;
+      basemap: string;
+      layers: string;
+      collapse: string;
+      enterFullscreen: string;
+      exitFullscreen: string;
+      floorFilter: string;
+      selectionTools: string;
+      selectByRectangle: string;
+      selectByLasso: string;
+      clearSelection: string;
+      defaultMapView: string;
+  }>;
+  /** IBasemapConfig: List of any basemaps to filter out from the basemap widget */
+  accessor basemapConfig: IBasemapConfig | undefined;
+  /**
+   * string: when provided this layer ID will be used when the app loads
+   *
+   * @default ''
+   */
+  accessor defaultLayerId: string;
+  /**
+   * boolean: when true the basemap widget will be available
+   *
+   * @default false
+   */
+  accessor enableBasemap: boolean;
+  /**
+   * string[]: Optional list of enabled layer ids
+   *  If empty all layers will be available
+   */
+  accessor enabledLayerIds: string[];
+  /**
+   * boolean: when true the floor filter widget will be available
+   *
+   * @default false
+   */
+  accessor enableFloorFilter: boolean;
+  /**
+   * boolean: when true the fullscreen widget will be available
+   *
+   * @default false
+   */
+  accessor enableFullscreen: boolean;
+  /**
+   * boolean: when true the home widget will be available
+   *
+   * @default false
+   */
+  accessor enableHome: boolean;
+  /**
+   * boolean: when true the layer list widget will be available
+   *
+   * @default false
+   */
+  accessor enableLayerList: boolean;
+  /**
+   * boolean: when true the legend widget will be available
+   *
+   * @default false
+   */
+  accessor enableLegend: boolean;
+  /**
+   * boolean: when true the map layer picker will be available
+   *
+   * @default false
+   */
+  accessor enableMapLayerPicker: boolean;
+  /**
+   * boolean: when true the map picker will be available
+   *
+   * @default false
+   */
+  accessor enableMapPicker: boolean;
+  /**
+   * boolean: when true the search widget will be available
+   *
+   * @default false
+   */
+  accessor enableSearch: boolean;
+  /**
+   * boolean: when true the selection tools will be available
+   *
+   * @default false
+   */
+  accessor enableSelectionTool: 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
+   */
+  accessor enableSingleExpand: boolean;
+  /**
+   * When true the component will render an optimized view for mobile devices
+   *
+   * @default false
+   */
+  accessor isMobile: boolean;
+  /**
+   * 'horizontal' | 'vertical': used to control the orientation of the tools
+   *
+   * @default 'vertical'
+   */
+  accessor layout: "horizontal" | "vertical";
+  /** IMapInfo: key configuration details about the current map */
+  accessor mapInfo: IMapInfo | undefined;
+  /** IMapInfo[]: array of map infos (name and id) */
+  accessor mapInfos: IMapInfo[];
+  /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+  accessor mapView: __esri.MapView | undefined;
+  /**
+   * 's' | 'm' | 'l': Used for optional map tool widget
+   *
+   * @default 'm'
+   */
+  accessor mapWidgetsSize: "l" | "m" | "s";
+  /** component height */
+  accessor parentComponentHeight: number | undefined;
+  /** Parent component width */
+  accessor parentComponentWidth: number | undefined;
+  /**
+   * __esri.UIPosition: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-UI.html#UIPosition
+   * The position details for the tools
+   *
+   * @default 'top-leading'
+   */
+  accessor position: __esri.UIPosition;
+  /** ISearchConfiguration: Configuration details for the Search widget */
+  accessor searchConfiguration: ISearchConfiguration | undefined;
+  /** number[]: A list of ids that are currently selected */
+  accessor selectedFeaturesIds: (number | string)[];
+  /** __esri.FeatureLayer: Selected feature layer */
+  accessor selectedLayer: __esri.FeatureLayer | undefined;
+  /**
+   * string: selected web map
+   *
+   * @default ''
+   */
+  accessor selectedWebMapId: string;
+  /** string[]: Selection tools to show */
+  accessor selectionTools: string[];
+  /**
+   * boolean: When true only editable layers that support the update capability will be available
+   *
+   * @default false
+   */
+  accessor showOnlyUpdatableLayers: boolean;
+  /**
+   * 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 true
+   */
+  accessor stackTools: boolean;
+  /**
+   * Tools to show and its order
+   * Valid tools: 'home', 'legend', 'search', 'fullscreen', 'basemap', 'floorfilter', 'selectiontool', 'layers-list', 'map-picker', 'map-layer-picker'
+   */
+  accessor toolOrder: string[];
+  /**
+   * VisibilityIconType: visibility icon for the layer list widget
+   *
+   * @default 'eyeball'
+   */
+  accessor visibilityIcon: VisibilityIconType;
+  /**
+   * 's' | 'm' | 'l': Used for Zoom tools
+   *
+   * @default 'm'
+   */
+  accessor zoomToolsSize: "l" | "m" | "s";
+  /** Emitted on demand when clear selection button is clicked */
+  readonly clearSelection: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    clearSelection: MapTools["clearSelection"]["detail"];
+  };
+}

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

@@ -1,29 +1,13 @@
-import { c as v } from "../../chunks/runtime.js";
+/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
+import { c as W } from "../../chunks/runtime.js";
 import { u as L } from "../../chunks/useT9n.js";
 import { css as S, html as r, nothing as f } from "lit";
 import { createRef as n, ref as h } from "lit-html/directives/ref.js";
 import { LitElement as F, createEvent as $, safeClassMap as a } from "@arcgis/lumina";
 import E from "@arcgis/core/widgets/Expand";
 import C from "@arcgis/core/widgets/Home";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.97 */
-const x = S`/** @license
- * Copyright 2025 Esri
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */: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}.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)}`;
-class I extends F {
+const x = S`: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}.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)}`;
+class M extends F {
   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._hasFloorInfo = !1, this._translations = L({ name: "map-tools", blocking: !0 }), this._showTools = !0, this._showBasemapWidget = !1, this._showFloorFilter = !1, this._showFullscreen = !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 = $(), this.listenOn(window, "mapChanged", this.mapChanged), this.listenOn(window, "layerSelectionChange", this._layerSelectionChange);
   }
@@ -95,8 +79,8 @@ class I extends F {
   }
   render() {
     this._setZoomToolsSize();
-    const s = this.layout === "horizontal" ? "display-flex" : "", e = this._getToggleIcon(), t = !this._showTools && !this._showSelectionTools ? "display-none" : s, l = this._showEllipsisTools ? "" : "display-none", o = this._showSearchWidget ? "" : "display-none", i = this._showBasemapWidget ? "" : "display-none", c = this._showLegendWidget ? "" : "display-none", d = this._showFloorFilter ? "" : "display-none", p = this._showFullscreen ? "" : "display-none", m = this._showLayersListWidget ? "" : "display-none", w = this._showTools ? this._translations.collapse : this._translations.expand, u = !this.enableBasemap && !this.enableFullscreen && !this.enableLegend && !this.enableLayerList && !this.enableSearch && !this.enableMapPicker && !this.enableMapLayerPicker ? "display-none" : "", y = document.dir === "rtl" ? "margin-right-1-2" : "margin-left-1-2", b = this.enableSingleExpand ? this.layout === "horizontal" ? y : "margin-top-1-2" : "", T = this._ellipsisTools.length > 0 && this._showTools ? "" : "display-none", _ = this.stackTools && this._ellipsisTools.length === 0 ? "box-shadow" : "", W = this._showSelectionTools ? this.selectionTools : this._mapTools;
-    return r`<div class=${`${u} ${s}`}>${this.enableSingleExpand ? r`<div class=${a(_)}>${this._getActionGroup(e, !1, w || "", () => this._toggleTools())}</div>` : void 0}<div class=${`${b} ${_} ${t}`}>${this._getMapWidgets(W)}</div><div><div class=${a(T)}>${this._getActionGroup("ellipsis", !1, "", () => this._toggleEllipsisTools())}<div class=${a(l)}>${this._getMapWidgets(this._ellipsisTools)}</div></div></div></div><map-basemap-gallery .basemapConfig=${this.basemapConfig} class=${a(i)} .mapView=${this.mapView} ${h(this._basemapElement)}></map-basemap-gallery><map-search class=${a(o)} .mapView=${this.mapView} result-graphic-enabled .searchConfiguration=${this.searchConfiguration} ${h(this._searchElement)}></map-search><map-legend class=${a(c)} .mapView=${this.mapView} ${h(this._legendElement)}></map-legend><map-fullscreen class=${a(p)} .mapView=${this.mapView} @fullscreenStateChange=${(g) => this._fullscreenStateChange(g.detail)} ${h(this._fullscreenElement)}></map-fullscreen><layer-list-widget class=${a(m)} .mapView=${this.mapView} @fullscreenStateChange=${(g) => this._fullscreenStateChange(g.detail)} .visibilityIcon=${this.visibilityIcon} ${h(this._layerListWidgetElement)}></layer-list-widget><map-floor-filter class=${a(d)} .enabled=${this.enableFloorFilter} .mapView=${this.mapView} ${h(this._floorFilterElement)}></map-floor-filter><selection-tool .mapView=${this.mapView} @drawingComplete=${() => {
+    const s = this.layout === "horizontal" ? "display-flex" : "", e = this._getToggleIcon(), t = !this._showTools && !this._showSelectionTools ? "display-none" : s, o = this._showEllipsisTools ? "" : "display-none", l = this._showSearchWidget ? "" : "display-none", i = this._showBasemapWidget ? "" : "display-none", c = this._showLegendWidget ? "" : "display-none", d = this._showFloorFilter ? "" : "display-none", p = this._showFullscreen ? "" : "display-none", m = this._showLayersListWidget ? "" : "display-none", w = this._showTools ? this._translations.collapse : this._translations.expand, u = !this.enableBasemap && !this.enableFullscreen && !this.enableLegend && !this.enableLayerList && !this.enableSearch && !this.enableMapPicker && !this.enableMapLayerPicker ? "display-none" : "", y = document.dir === "rtl" ? "margin-right-1-2" : "margin-left-1-2", b = this.enableSingleExpand ? this.layout === "horizontal" ? y : "margin-top-1-2" : "", T = this._ellipsisTools.length > 0 && this._showTools ? "" : "display-none", _ = this.stackTools && this._ellipsisTools.length === 0 ? "box-shadow" : "", v = this._showSelectionTools ? this.selectionTools : this._mapTools;
+    return r`<div class=${`${u} ${s}`}>${this.enableSingleExpand ? r`<div class=${a(_)}>${this._getActionGroup(e, !1, w || "", () => this._toggleTools())}</div>` : void 0}<div class=${`${b} ${_} ${t}`}>${this._getMapWidgets(v)}</div><div><div class=${a(T)}>${this._getActionGroup("ellipsis", !1, "", () => this._toggleEllipsisTools())}<div class=${a(o)}>${this._getMapWidgets(this._ellipsisTools)}</div></div></div></div><map-basemap-gallery .basemapConfig=${this.basemapConfig} class=${a(i)} .mapView=${this.mapView} ${h(this._basemapElement)}></map-basemap-gallery><map-search class=${a(l)} .mapView=${this.mapView} result-graphic-enabled .searchConfiguration=${this.searchConfiguration} ${h(this._searchElement)}></map-search><map-legend class=${a(c)} .mapView=${this.mapView} ${h(this._legendElement)}></map-legend><map-fullscreen class=${a(p)} .mapView=${this.mapView} @fullscreenStateChange=${(g) => this._fullscreenStateChange(g.detail)} ${h(this._fullscreenElement)}></map-fullscreen><layer-list-widget class=${a(m)} .mapView=${this.mapView} @fullscreenStateChange=${(g) => this._fullscreenStateChange(g.detail)} .visibilityIcon=${this.visibilityIcon} ${h(this._layerListWidgetElement)}></layer-list-widget><map-floor-filter class=${a(d)} .enabled=${this.enableFloorFilter} .mapView=${this.mapView} ${h(this._floorFilterElement)}></map-floor-filter><selection-tool .mapView=${this.mapView} @drawingComplete=${() => {
       this._rectangleSelectionToolActive = !1, this._lassoSelectionToolActive = !1;
     }} .selectedLayerId=${this.selectedLayer?.id} ${h(this._selectionToolElement)}></selection-tool>${this.enableMapPicker && r`<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 && r`<map-layer-picker appearance=transparent .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>` || ""}`;
   }
@@ -112,9 +96,9 @@ class I extends F {
       s.style.width = t, s.style.height = t, e.style.width = t, e.style.height = t;
     }
     if (this.layout === "horizontal") {
-      const t = document.dir || "ltr", l = t === "ltr" ? "esri-ui-top-left" : "esri-ui-top-right", o = t === "ltr" ? 0 : this.parentComponentWidth + 50;
+      const t = document.dir || "ltr", o = t === "ltr" ? "esri-ui-top-left" : "esri-ui-top-right", l = t === "ltr" ? 0 : this.parentComponentWidth - 62;
       let i = t === "ltr" ? this._showTools ? "ltr" : "rtl" : this._showTools ? "rtl" : "ltr";
-      document.getElementsByClassName(l)[0]?.firstElementChild?.tagName === "MAP-TOOLS" && !this._showTools && (i = t), document.getElementsByClassName("esri-zoom")[0]?.setAttribute("style", `position: absolute; top: 50px; left: ${o}px`), this._showSelectionTools || document.getElementsByClassName(l)[0]?.setAttribute("style", `flex-direction: row; gap: 5px; align-items: flex-start; direction: ${i} !important; z-index: 1;`);
+      document.getElementsByClassName(o)[0]?.firstElementChild?.tagName === "MAP-TOOLS" && !this._showTools && (i = t), document.getElementsByClassName("esri-zoom")[0]?.setAttribute("style", `position: absolute; top: 50px; left: ${l}px`), this._showSelectionTools || document.getElementsByClassName(o)[0]?.setAttribute("style", `flex-direction: row; gap: 5px; align-items: flex-start; direction: ${i} !important; z-index: 1;`);
     }
   }
   _getToggleIcon() {
@@ -126,11 +110,14 @@ class I extends F {
     this._hasFloorInfo = this.mapView?.map?.floorInfo;
     const t = e.indexOf("floorfilter");
     t > -1 && !this._hasFloorInfo && e.splice(t, 1);
-    const o = Math.ceil(s / 40) - 1;
-    o && o !== e.length - 1 ? (this._mapTools = e.slice(0, o), this._ellipsisTools = e.slice(o, e.length)) : (this._mapTools = e, this._ellipsisTools = []);
+    const o = 40;
+    let l = 110;
+    this.isMobile && (this.enableMapPicker || this.enableMapLayerPicker) && (l = 160);
+    const i = Math.ceil((s - l) / o) - 1;
+    i && i !== e.length - 1 ? (this._mapTools = e.slice(0, i), this._ellipsisTools = e.slice(i, e.length)) : (this._mapTools = e, this._ellipsisTools = []);
   }
   _getMapWidgets(s) {
-    const e = this._showFullscreen ? "full-screen-exit" : "full-screen", t = this._showFullscreen ? this._translations.exitFullscreen : this._translations.enterFullscreen, l = this._isValidWebMap ? "map" : "exclamation-mark-triangle", o = this.selectedLayer === void 0 ? "exclamation-mark-triangle" : "layers";
+    const e = this._showFullscreen ? "full-screen-exit" : "full-screen", t = this._showFullscreen ? this._translations.exitFullscreen : this._translations.enterFullscreen, o = this._isValidWebMap ? "map" : "exclamation-mark-triangle", l = this.selectedLayer === void 0 ? "exclamation-mark-triangle" : "layers";
     return s.map((i) => {
       switch (i) {
         case "legend":
@@ -168,10 +155,10 @@ class I extends F {
         case "home":
           return this.enableHome ? this._getActionGroup("home", !1, this._translations.defaultMapView, () => this._homeWidget?.go()) : void 0;
         case "map-picker":
-          return this.enableMapPicker ? this._getActionGroup(l, !1, "", () => {
+          return this.enableMapPicker ? this._getActionGroup(o, !1, "", () => {
           }, !this._isValidWebMap) : void 0;
         case "map-layer-picker":
-          return this.enableMapLayerPicker && this._isValidWebMap ? this._getActionGroup(o, !1, "", () => {
+          return this.enableMapLayerPicker && this._isValidWebMap ? this._getActionGroup(l, !1, "", () => {
           }, this.selectedLayer === void 0) : void 0;
         default:
           return "";
@@ -181,19 +168,19 @@ class I extends F {
   _fullscreenStateChange(s) {
     s === "ready" && this._showFullscreen ? this._showFullscreen = !1 : s === "active" && !this._showFullscreen && (this._showFullscreen = !0);
   }
-  _getActionGroup(s, e, t, l, o, i) {
+  _getActionGroup(s, e, t, o, l, i) {
     const c = this.mapWidgetsSize === "s" ? "square-32" : this.mapWidgetsSize === "m" ? "square-40" : "square-48", d = this.stackTools ? "" : "margin-bottom-1-2", p = this.stackTools ? "" : "box-shadow";
-    return r`<div><calcite-action alignment=center appearance=solid .indicator=${i} class=${`map-actions ${c} ${d} border-bottom ${p} ${o ? "danger-icon-color" : ""}`} .disabled=${e} .icon=${s} id=${s ?? f} @click=${l} scale=s text ${h(this._mapTool)}><calcite-icon icon=chevron-up scale=s slot=icon></calcite-icon></calcite-action>${!this.isMobile && t && r`<calcite-tooltip .placement=${this.layout === "vertical" ? "auto" : "bottom"} reference-element=${s ?? f}><span>${t}</span></calcite-tooltip>` || ""}</div>`;
+    return r`<div><calcite-action alignment=center appearance=solid .indicator=${i} class=${`map-actions ${c} ${d} border-bottom ${p} ${l ? "danger-icon-color" : ""}`} .disabled=${e} .icon=${s} id=${s ?? f} @click=${o} scale=s text ${h(this._mapTool)}><calcite-icon icon=chevron-up scale=s slot=icon></calcite-icon></calcite-action>${!this.isMobile && t && r`<calcite-tooltip .placement=${this.layout === "vertical" ? "auto" : "bottom"} reference-element=${s ?? f}><span>${t}</span></calcite-tooltip>` || ""}</div>`;
   }
   _getWidget(s, e, t) {
     if (this._widgets.indexOf(s) < 0 && this.mapView && e) {
-      const l = this.toolOrder.indexOf(s), o = new E({
+      const o = this.toolOrder.indexOf(s), l = new E({
         view: this.mapView,
         content: e
       }), i = this.enableHome ? 2 : 1;
-      this.mapView.ui.add(t ? o : e, {
+      this.mapView.ui.add(t ? l : e, {
         position: this.position,
-        index: l > -1 ? l + i : 1
+        index: o > -1 ? o + i : 1
       }), this._widgets.push(s);
     }
   }
@@ -228,7 +215,7 @@ class I extends F {
     this._showEllipsisTools = !this._showEllipsisTools;
   }
 }
-v("map-tools", I);
+W("map-tools", M);
 export {
-  I as MapTools
+  M as MapTools
 };

package/dist/components/map-tools/index.d.ts

@@ -1,13 +1 @@
-import "../map-basemap-gallery/index.js";
-import "../map-search/index.js";
-import "../map-legend/index.js";
-import "../map-fullscreen/index.js";
-import "../layer-list-widget/index.js";
-import "../map-floor-filter/index.js";
-import "../selection-tool/index.js";
-import "../map-picker/index.js";
-import "../map-layer-picker/index.js";
-import "@esri/calcite-components/components/calcite-action";
-import "@esri/calcite-components/components/calcite-icon";
-import "@esri/calcite-components/components/calcite-tooltip";
 export * from "./customElement.js";

package/dist/components/pci-calculator/customElement.d.ts

@@ -1,5 +1,4 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
-export declare class PciCalculator extends LitElement {
-}
+export abstract class PciCalculator extends LitElement {}

package/dist/components/pci-calculator/customElement.js

@@ -1,26 +1,10 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
 import { c as s } from "../../chunks/runtime.js";
-import { css as c, html as i } from "lit";
-import { c as d } from "../../chunks/pciUtils.js";
+import { css as d, html as l } from "lit";
+import { b as c } from "../../chunks/pciUtils.js";
 import { createRef as o, ref as n } from "lit-html/directives/ref.js";
 import { LitElement as u, safeClassMap as a } from "@arcgis/lumina";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.97 */
-const r = c`/** @license
- * Copyright 2025 Esri
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */:host{display:block;--calcite-label-margin-bottom: 0}.label-display{display:block;padding-bottom:1rem}.display-flex{display:flex}.display-grid{display:grid}.display-none{display:none}.padding-top-1{padding-top:1rem}.main-input{width:300px;padding-inline-end:1rem}.float-end{float:inline-end}.position-relative{position:relative}.position-right{position:absolute;right:0}`;
+const r = d`:host{display:block;--calcite-label-margin-bottom: 0}.label-display{display:block;padding-bottom:1rem}.display-flex{display:flex}.display-grid{display:grid}.display-none{display:none}.padding-top-1{padding-top:1rem}.main-input{width:300px;padding-inline-end:1rem}.float-end{float:inline-end}.position-relative{position:relative}.position-right{position:absolute;right:0}`;
 class p extends u {
   constructor() {
     super(...arguments), this.showAddDeduct = !1, this._deductValuesElement = o();
@@ -32,24 +16,24 @@ class p extends u {
     this.styles = r;
   }
   render() {
-    const t = this.showAddDeduct ? "display-none" : "display-grid", e = this.showAddDeduct ? "position-relative" : "display-none";
-    return i`<div class=${a(t)}><div class="label-display"><calcite-label class="label-display">\r\n              Enter comma delimited deduct values${this._getDeductValuesInput()}</calcite-label></div><div>${this._getCalculateButton()}</div></div><div class=${a(e)}><div class="position-right"><calcite-action appearance=transparent class="float-end" icon=x @click=${() => this._toggleShowAddDeduct()} scale=s text></calcite-action></div><deduct-calculator class="display-grid padding-top-1" @deductValueComplete=${this._addDeductValue}></deduct-calculator></div>`;
+    const e = this.showAddDeduct ? "display-none" : "display-grid", t = this.showAddDeduct ? "position-relative" : "display-none";
+    return l`<div class=${a(e)}><div class="label-display"><calcite-label class="label-display">\r\n              Enter comma delimited deduct values${this._getDeductValuesInput()}</calcite-label></div><div>${this._getCalculateButton()}</div></div><div class=${a(t)}><div class="position-right"><calcite-action appearance=transparent class="float-end" icon=x @click=${() => this._toggleShowAddDeduct()} scale=s text></calcite-action></div><deduct-calculator class="display-grid padding-top-1" @deductValueComplete=${this._addDeductValue}></deduct-calculator></div>`;
   }
   _getDeductValuesInput() {
-    return i`<div class="display-flex"><calcite-input class="main-input" ${n(this._deductValuesElement)}></calcite-input><calcite-action appearance=transparent icon=plus-circle @click=${() => this._toggleShowAddDeduct()} scale=s text></calcite-action></div>`;
+    return l`<div class="display-flex"><calcite-input class="main-input" ${n(this._deductValuesElement)}></calcite-input><calcite-action appearance=transparent icon=plus-circle @click=${() => this._toggleShowAddDeduct()} scale=s text></calcite-action></div>`;
   }
   _getCalculateButton() {
-    return this._deductValuesElement.value ? i`<calcite-button @click=${() => this._calculatePCI(this._deductValuesElement?.value?.value || "")}>\r\n        Calculate PCI</calcite-button>` : void 0;
+    return this._deductValuesElement.value ? l`<calcite-button @click=${() => this._calculatePCI(this._deductValuesElement?.value?.value || "")}>\r\n        Calculate PCI</calcite-button>` : void 0;
   }
   _toggleShowAddDeduct() {
     this.showAddDeduct = !this.showAddDeduct;
   }
-  _addDeductValue(t) {
-    this._toggleShowAddDeduct(), this._deductValuesElement.value && (this._deductValuesElement.value.value += Math.abs(Number.parseFloat(this._deductValuesElement.value.value)) > 0 ? `,${t.detail}` : t.detail);
+  _addDeductValue(e) {
+    this._toggleShowAddDeduct(), this._deductValuesElement.value && (this._deductValuesElement.value.value += Math.abs(Number.parseFloat(this._deductValuesElement.value.value)) > 0 ? `,${e.detail}` : e.detail);
   }
-  _calculatePCI(t) {
-    const e = d(t, !0), l = e <= 10 ? "Failed" : e <= 25 ? "Serious" : e <= 40 ? "Very Poor" : e <= 55 ? "Poor" : e <= 70 ? "Fair" : e <= 85 ? "Satisfactory" : "Good";
-    console.log(`PCI: ${e}`), console.log(`Rating: ${l}`), alert("See debug console for results");
+  _calculatePCI(e) {
+    const t = c(e, !0), i = t <= 10 ? "Failed" : t <= 25 ? "Serious" : t <= 40 ? "Very Poor" : t <= 55 ? "Poor" : t <= 70 ? "Fair" : t <= 85 ? "Satisfactory" : "Good";
+    console.log(`PCI: ${t}`), console.log(`Rating: ${i}`), alert("See debug console for results");
   }
 }
 s("pci-calculator", p);

package/dist/components/pci-calculator/index.d.ts

@@ -1,6 +1 @@
-import "@esri/calcite-components/components/calcite-label";
-import "@esri/calcite-components/components/calcite-action";
-import "../deduct-calculator/index.js";
-import "@esri/calcite-components/components/calcite-input";
-import "@esri/calcite-components/components/calcite-button";
 export * from "./customElement.js";