@arcgis/map-components 5.2.0-next.14 → 5.2.0-next.140

package/dist/components/arcgis-elevation-profile-legend-item/customElement.js

@@ -1,9 +1,9 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as d } from "../../chunks/runtime.js";
 import { css as h, html as s } from "lit";
 import { substitute as p } from "@arcgis/core/intl.js";
 import { LitElement as g, createEvent as u, safeClassMap as b, safeStyleMap as f, nothing as n } from "@arcgis/lumina";
-const v = h`:host{--internal-block-spacing: var(--calcite-spacing-sm-plus);--internal-inline-spacing: var(--calcite-spacing-md);--internal-collapse-toggle-size: 32px;--internal-color-indicator-width: 3px;--internal-opacity-disabled: .4}.container{position:relative;background:var(--calcite-color-foreground-2)}.disabled{filter:grayscale(1);opacity:var(--internal-opacity-disabled)}.color-indicator{position:absolute;inset-inline-start:0;top:0;width:var(--internal-color-indicator-width);height:100%}.header{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.content{display:block;padding:var(--internal-block-spacing) var(--internal-inline-spacing);padding-top:0}.collapse-toggle{flex-shrink:0;width:var(--internal-collapse-toggle-size);height:var(--internal-collapse-toggle-size)}.label{--calcite-label-margin-bottom: 0;flex-grow:1;flex-shrink:1;padding-inline-start:var(--internal-inline-spacing);min-width:0}`;
+const v = h`:host{--internal-block-spacing: var(--calcite-spacing-sm-plus);--internal-inline-spacing: var(--calcite-spacing-md);--internal-collapse-toggle-size: 32px;--internal-color-indicator-width: 3px;--internal-opacity-disabled: .4}.container{position:relative;background:var(--calcite-color-foreground-2)}.disabled{filter:grayscale(1);opacity:var(--internal-opacity-disabled)}.color-indicator{position:absolute;inset-inline-start:0;top:0;width:var(--internal-color-indicator-width);height:100%}.header{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.content{display:block;padding:var(--internal-block-spacing) var(--internal-inline-spacing);padding-top:0}.collapse-toggle{flex-shrink:0;width:var(--internal-collapse-toggle-size);height:var(--internal-collapse-toggle-size)}.label{--calcite-label-margin-bottom: 0;flex-grow:1;flex-shrink:1;padding-inline-start:var(--internal-inline-spacing);min-width:0;overflow-wrap:anywhere}`;
 class m extends g {
   constructor() {
     super(...arguments), this.expanded = !1, this.featureSelected = !1, this.hideCheckbox = !1, this.arcgisExpandedToggle = u();

package/dist/components/arcgis-elevation-profile-settings/customElement.js

@@ -1,23 +1,23 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as l } from "../../chunks/runtime.js";
 import { ref as c } from "lit/directives/ref.js";
-import { css as r, html as i } from "lit";
-import { LitElement as h, createEvent as p, nothing as a } from "@arcgis/lumina";
+import { css as r, html as n } from "lit";
+import { LitElement as h, createEvent as d, nothing as a } from "@arcgis/lumina";
 import { V as o } from "../../chunks/visible-element.js";
-const d = r`:host{--arcgis-unit-select-inline-size: 180px}calcite-popover[calcite-hydrated-hidden]{inset-block-start:-999999px;inset-inline-start:-999999px}.popover-content{display:flex;flex-direction:column;gap:var(--calcite-spacing-md);padding:var(--calcite-spacing-md);max-width:300px}.uniform-chart-scaling-label{--calcite-label-margin-bottom: 0}.uniform-chart-scaling-checkbox-wrapper{width:var(--arcgis-unit-select-inline-size);flex-shrink:0}.slot-content{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm)}.slot-content ::slotted(*){max-inline-size:100%}`;
-class g extends h {
+const g = r`:host{--arcgis-unit-select-inline-size: 180px}calcite-popover[calcite-hydrated-hidden]{inset-block-start:-999999px;inset-inline-start:-999999px}.popover-content{display:flex;flex-direction:column;gap:var(--calcite-spacing-md);padding:var(--calcite-spacing-md);max-width:300px}.uniform-chart-scaling-label{--calcite-label-margin-bottom: 0}.uniform-chart-scaling-checkbox-wrapper{width:var(--arcgis-unit-select-inline-size);flex-shrink:0}.slot-content{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm)}.slot-content ::slotted(*){max-inline-size:100%}`;
+class p extends h {
   constructor() {
-    super(...arguments), this._onUniformChartScalingChange = (e) => {
-      this.arcgisElevationProfileSettingsUniformChartScalingChange.emit(e.currentTarget.checked);
-    }, this._onActionRef = (e) => {
-      this._actionElement = e ?? void 0;
-    }, this._popoverIsOpen = !1, this.hideDistanceDisplayUnitSelect = !1, this.hideElevationDisplayUnitSelect = !1, this.hideUniformChartScalingToggle = !1, this.hasCustomStartContent = !1, this.hasCustomEndContent = !1, this.arcgisElevationProfileSettingsUniformChartScalingChange = p();
+    super(...arguments), this._onUniformChartScalingChange = (t) => {
+      this.arcgisElevationProfileSettingsUniformChartScalingChange.emit(t.currentTarget.checked);
+    }, this._onActionRef = (t) => {
+      this._actionElement = t ?? void 0;
+    }, this._popoverIsOpen = !1, this.hideDistanceDisplayUnitSelect = !1, this.hideElevationDisplayUnitSelect = !1, this.hideResetUnitsButton = !1, this.hideUniformChartScalingToggle = !1, this.hasCustomStartContent = !1, this.hasCustomEndContent = !1, this.arcgisElevationProfileSettingsUniformChartScalingChange = d();
   }
   static {
-    this.properties = { _popoverIsOpen: 16, _actionElement: 16, viewModel: 0, hideDistanceDisplayUnitSelect: 5, hideElevationDisplayUnitSelect: 5, hideUniformChartScalingToggle: 5, hasCustomStartContent: 5, hasCustomEndContent: 5, messages: 0, uniformChartScaling: 5, unitOptionsDistance: 0, unitOptionsElevation: 0 };
+    this.properties = { _popoverIsOpen: 16, _actionElement: 16, viewModel: 0, hideDistanceDisplayUnitSelect: 5, hideElevationDisplayUnitSelect: 5, hideResetUnitsButton: 5, hideUniformChartScalingToggle: 5, hasCustomStartContent: 5, hasCustomEndContent: 5, messages: 0, uniformChartScaling: 5, unitOptionsDistance: 0, unitOptionsElevation: 0, messageOverrides: 0 };
   }
   static {
-    this.styles = d;
+    this.styles = g;
   }
   async destroy() {
     await this.manager.destroy();
@@ -29,36 +29,34 @@ class g extends h {
     this._popoverIsOpen = !0;
   }
   render() {
-    const { messages: e } = this;
-    if (!e || !this.hasCustomStartContent && !this.hasCustomEndContent && this.hideDistanceDisplayUnitSelect && this.hideElevationDisplayUnitSelect && this.hideUniformChartScalingToggle)
+    const { messages: t } = this;
+    if (!t || !this.hasCustomStartContent && !this.hasCustomEndContent && this.hideDistanceDisplayUnitSelect && this.hideElevationDisplayUnitSelect && this.hideUniformChartScalingToggle)
       return;
-    const t = (this._popoverIsOpen ? e.hideSettings : e.showSettings) ?? "";
-    return i`<calcite-action icon=gear .text=${t} title=${t ?? a} ${c(this._onActionRef)}></calcite-action>${this._actionElement ? i`<calcite-popover auto-close .label=${t} placement=bottom-end .referenceElement=${this._actionElement} @calcitePopoverOpen=${this._onPopoverOpen} @calcitePopoverClose=${this._onPopoverClose}><div class="popover-content">${this._renderCustomContent("settings-start", this.hasCustomStartContent)}${this._renderUnitSelector()}${this._renderUniformChartScalingToggle()}${this._renderCustomContent("settings-end", this.hasCustomEndContent)}</div></calcite-popover>` : void 0}`;
+    const e = (this._popoverIsOpen ? t.hideSettings : t.showSettings) ?? "";
+    return n`<calcite-action icon=gear .text=${e} title=${e ?? a} ${c(this._onActionRef)}></calcite-action>${this._actionElement ? n`<calcite-popover auto-close .label=${e} placement=bottom-end .referenceElement=${this._actionElement} @calcitePopoverOpen=${this._onPopoverOpen} @calcitePopoverClose=${this._onPopoverClose}><div class="popover-content">${this._renderCustomContent("settings-start", this.hasCustomStartContent)}${this._renderUnitSelector()}${this._renderUniformChartScalingToggle()}${this._renderCustomContent("settings-end", this.hasCustomEndContent)}</div></calcite-popover>` : void 0}`;
   }
   _renderUnitSelector() {
-    const { viewModel: e, messages: t } = this;
-    if (!e || this.hideDistanceDisplayUnitSelect && this.hideElevationDisplayUnitSelect)
-      return;
-    const n = "inline-space-between";
-    return i`${o({ hidden: this.hideDistanceDisplayUnitSelect, children: i`<arcgis-unit-select .options=${this.unitOptionsDistance} .selectLabel=${t.unitDistanceSelectLabel} .value=${e.distanceUnit} .layout=${n} @arcgisUnitSelectChange=${(s) => {
-      e.distanceUnit = s.detail;
-    }}></arcgis-unit-select>` })}${o({ hidden: this.hideElevationDisplayUnitSelect, children: i`<arcgis-unit-select .options=${this.unitOptionsElevation} .selectLabel=${t.unitElevationSelectLabel} .value=${e.elevationUnit} .layout=${n} @arcgisUnitSelectChange=${(s) => {
-      e.elevationUnit = s.detail;
-    }}></arcgis-unit-select>` })}`;
+    const { hideResetUnitsButton: t, viewModel: e, messages: i } = this;
+    if (!(!e || this.hideDistanceDisplayUnitSelect && this.hideElevationDisplayUnitSelect))
+      return n`${o({ hidden: this.hideDistanceDisplayUnitSelect, children: n`<arcgis-unit-select .options=${this.unitOptionsDistance} .selectLabel=${i.unitDistanceSelectLabel} .value=${e.distanceUnit} .canReset=${!t && e.canResetDistanceUnit} .resetLabel=${i.reset} @arcgisInternalUnitReset=${() => e.resetUnit("distance")} .messageOverrides=${this.messageOverrides} @arcgisUnitSelectChange=${(s) => {
+        e.distanceUnit = s.detail;
+      }}></arcgis-unit-select>` })}${o({ hidden: this.hideElevationDisplayUnitSelect, children: n`<arcgis-unit-select .options=${this.unitOptionsElevation} .selectLabel=${i.unitElevationSelectLabel} .value=${e.elevationUnit} .canReset=${!t && e.canResetElevationUnit} .resetLabel=${i.reset} @arcgisInternalUnitReset=${() => e.resetUnit("elevation")} .messageOverrides=${this.messageOverrides} @arcgisUnitSelectChange=${(s) => {
+        e.elevationUnit = s.detail;
+      }}></arcgis-unit-select>` })}`;
   }
   _renderUniformChartScalingToggle() {
-    const { messages: e, hideUniformChartScalingToggle: t, uniformChartScaling: n } = this;
-    if (t)
+    const { messages: t, hideUniformChartScalingToggle: e, uniformChartScaling: i } = this;
+    if (e)
       return;
-    const s = e?.[n ? "uniformChartScalingDisable" : "uniformChartScalingEnable"] ?? "";
-    return i`<calcite-label class="uniform-chart-scaling-label" layout=inline-space-between>${e?.uniformChartScalingLabel}<div class="uniform-chart-scaling-checkbox-wrapper"><calcite-checkbox .checked=${n} title=${s ?? a} @calciteCheckboxChange=${this._onUniformChartScalingChange}></calcite-checkbox></div></calcite-label>`;
+    const s = t?.[i ? "uniformChartScalingDisable" : "uniformChartScalingEnable"] ?? "";
+    return n`<calcite-label class="uniform-chart-scaling-label" layout=inline-space-between>${t?.uniformChartScalingLabel}<div class="uniform-chart-scaling-checkbox-wrapper"><calcite-checkbox .checked=${i} title=${s ?? a} @calciteCheckboxChange=${this._onUniformChartScalingChange}></calcite-checkbox></div></calcite-label>`;
   }
-  _renderCustomContent(e, t) {
-    if (t)
-      return i`<div class="slot-content"><slot name=${e ?? a}></slot></div>`;
+  _renderCustomContent(t, e) {
+    if (e)
+      return n`<div class="slot-content"><slot name=${t ?? a}></slot></div>`;
   }
 }
-l("arcgis-elevation-profile-settings", g);
+l("arcgis-elevation-profile-settings", p);
 export {
-  g as ArcgisElevationProfileSettings
+  p as ArcgisElevationProfileSettings
 };

package/dist/components/arcgis-elevation-profile-statistics/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as l } from "../../chunks/runtime.js";
 import { css as o, html as r } from "lit";
 import c from "@arcgis/core/applications/Components/QuantityFormatter.js";

package/dist/components/arcgis-expand/customElement.d.ts

@@ -39,6 +39,15 @@ export abstract class ArcgisExpand extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-expand auto-destroy-disabled></arcgis-expand>
+   * ```
+   *
+   * ```js
+   * expandElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   accessor autoDestroyDisabled: boolean;
   /**
@@ -161,6 +170,15 @@ export abstract class ArcgisExpand extends LitElement {
       expand: string;
       collapse: string;
   }>;
+  /**
+   * When true, disables the modal behavior of the [Calcite Sheet](https://developers.arcgis.com/calcite-design-system/components/sheet/) when the Expand component is in "drawer" [mode](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-expand/#mode).
+   * This property is in beta and its behavior will change at 6.0.
+   *
+   * @default false
+   * @beta
+   * @since 5.2
+   */
+  accessor modalDisabled: boolean;
   /**
    * The mode in which the component displays. These modes are listed below:
    *
@@ -198,8 +216,8 @@ export abstract class ArcgisExpand extends LitElement {
    */
   accessor topLayerDisabled: boolean;
   /**
-   * The view associated with the component. 
-   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-expand component will be associated with a map or scene component rather than using the `view` property.
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-expand component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: LinkChartView | MapView | SceneView | null | undefined;
   /**
@@ -220,7 +238,7 @@ export abstract class ArcgisExpand extends LitElement {
   };
   /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
   readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "expanded"; }>;
-  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     arcgisPropertyChange: ArcgisExpand["arcgisPropertyChange"]["detail"];

package/dist/components/arcgis-expand/customElement.js

@@ -1,34 +1,34 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as b } from "../../chunks/runtime.js";
-import { css as y, html as r } from "lit";
-import { on as _, when as d, watch as w } from "@arcgis/core/core/reactiveUtils.js";
+import { css as y, html as l } from "lit";
+import { on as _, when as p, watch as w } from "@arcgis/core/core/reactiveUtils.js";
 import { g as $ } from "../../chunks/globalCss.js";
-import { u as E } from "../../chunks/useT9n.js";
+import { u as D } from "../../chunks/useT9n.js";
 import { createRef as g, ref as h } from "lit/directives/ref.js";
 import C from "@arcgis/core/core/Accessor.js";
-import { property as p, subclass as D } from "@arcgis/core/core/accessorSupport/decorators.js";
-import { usePropertyChange as T } from "@arcgis/lumina/controllers";
-import { m as I } from "../../chunks/useViewModel.js";
-import { LitElement as k, createEvent as H, safeClassMap as u, nothing as M } from "@arcgis/lumina";
+import { property as d, subclass as E } from "@arcgis/core/core/accessorSupport/decorators.js";
+import { usePropertyChange as k } from "@arcgis/lumina/controllers";
+import { m as T } from "../../chunks/useViewModel.js";
+import { LitElement as I, createEvent as H, safeClassMap as u, nothing as M } from "@arcgis/lumina";
 import { classes as m } from "@arcgis/toolkit/dom";
 var P = Object.defineProperty, O = Object.getOwnPropertyDescriptor, c = (i, e, t, a) => {
-  for (var s = a > 1 ? void 0 : a ? O(e, t) : e, n = i.length - 1, l; n >= 0; n--)
-    (l = i[n]) && (s = (a ? l(e, t, s) : l(s)) || s);
-  return a && s && P(e, t, s), s;
+  for (var n = a > 1 ? void 0 : a ? O(e, t) : e, s = i.length - 1, o; s >= 0; s--)
+    (o = i[s]) && (n = (a ? o(e, t, n) : o(n)) || n);
+  return a && n && P(e, t, n), n;
 };
 const v = new EventTarget();
-function L(i, e, t) {
+function S(i, e, t) {
   let a = !1;
-  const s = w(
+  const n = w(
     i,
-    (n, l) => {
-      a || e(n, l);
+    (s, o) => {
+      a || e(s, o);
     },
     t
   );
   return {
     remove() {
-      s.remove();
+      n.remove();
     },
     pause() {
       a = !0;
@@ -38,7 +38,7 @@ function L(i, e, t) {
     }
   };
 }
-let o = class extends C {
+let r = class extends C {
   //#region Lifecycle
   constructor(i) {
     super(i), this._viewpointHandle = null, this.addHandles(
@@ -65,7 +65,7 @@ let o = class extends C {
     return this.view?.ready ? "ready" : "disabled";
   }
   set view(i) {
-    this._get("view") !== i && (this._set("view", i), i && d(
+    this._get("view") !== i && (this._set("view", i), i && p(
       () => i.ready,
       () => {
         this.view === i && this._watchViewpoint();
@@ -76,7 +76,7 @@ let o = class extends C {
   //#endregion
   //#region Private Methods
   _viewpointHandleChange(i) {
-    this._viewpointHandle && (i ? d(
+    this._viewpointHandle && (i ? p(
       () => this.view?.stationary,
       () => this._viewpointHandle?.resume(),
       { once: !0, initial: !0 }
@@ -88,7 +88,7 @@ let o = class extends C {
     const { autoCollapse: e, view: t } = this;
     if (!t || !e)
       return;
-    const a = L(
+    const a = S(
       () => t.type === "3d" ? t.camera : t.viewpoint,
       () => this._collapse()
     );
@@ -100,37 +100,37 @@ let o = class extends C {
   //#endregion
 };
 c([
-  p({ value: !1 })
-], o.prototype, "autoCollapse", 1);
+  d({ value: !1 })
+], r.prototype, "autoCollapse", 1);
 c([
-  p({ value: !1 })
-], o.prototype, "expanded", 1);
+  d({ value: !1 })
+], r.prototype, "expanded", 1);
 c([
-  p()
-], o.prototype, "group", 2);
+  d()
+], r.prototype, "group", 2);
 c([
-  p({ readOnly: !0 })
-], o.prototype, "state", 1);
+  d({ readOnly: !0 })
+], r.prototype, "state", 1);
 c([
-  p({ value: null })
-], o.prototype, "view", 1);
-o = c([
-  D("map-components.expand.ExpandViewModel")
-], o);
-const S = y`:host{display:flex;pointer-events:auto;--arcgis-internal-expand-icon-number-spacing-left: none;--arcgis-internal-expand-icon-number-spacing-right: none}arcgis-expand>.content-expanded{background-color:var(--calcite-color-background)}.root{--esri-widget-panel-max-height: 95svh;--calcite-sheet-max-height: var(--esri-widget-panel-max-height);--calcite-sheet-height: auto}.action{cursor:pointer;text-align:center;color:var(--calcite-color-text-2);justify-content:center;align-items:center;margin:0;padding:0;font-size:var(--calcite-font-size);transition:background-color .125s ease-in-out;display:flex;flex-direction:column;overflow:hidden}.toggle{position:relative}.popover-content{flex-direction:column;display:flex;max-height:var(--arcgis-internal-expand-max-height, 95svh);::slotted(*){max-height:var(--arcgis-internal-expand-max-height, 95svh);overflow-y:auto}::slotted(arcgis-sketch){--arcgis-internal-sketch-gap: var(--calcite-spacing-none)}::slotted(:is(arcgis-area-measurement-2d,arcgis-area-measurement-3d,arcgis-basemap-gallery,arcgis-basemap-layer-list,arcgis-bookmarks,arcgis-building-explorer,arcgis-catalog-layer-list,arcgis-directions,arcgis-direct-line-measurement-3d,arcgis-distance-measurement-2d,arcgis-editor,arcgis-feature-form,arcgis-features,arcgis-layer-list,arcgis-layer-list-next,arcgis-legend,arcgis-line-of-sight,arcgis-print,arcgis-shadow-cast,arcgis-slice,arcgis-table-list,arcgis-utility-network-trace,arcgis-grid-controls)){width:var(--arcgis-internal-panel-width);min-width:var(--calcite-spacing-xxxl);min-height:var(--calcite-spacing-xxxl);transition:max-height .25s ease-in-out}}.popover-content .esri-widget--panel{width:300px}.panel{max-height:var(--esri-widget-panel-max-height)}.panel-content{::slotted(*){width:100%}::slotted(:is(arcgis-area-measurement-2d,arcgis-area-measurement-3d,arcgis-basemap-gallery,arcgis-basemap-layer-list,arcgis-bookmarks,arcgis-building-explorer,arcgis-catalog-layer-list,arcgis-directions,arcgis-direct-line-measurement-3d,arcgis-distance-measurement-2d,arcgis-editor,arcgis-feature-form,arcgis-features,arcgis-layer-list,arcgis-layer-list-next,arcgis-legend,arcgis-line-of-sight,arcgis-print,arcgis-shadow-cast,arcgis-slice,arcgis-table-list,arcgis-utility-network-trace,arcgis-grid-controls)){overflow-y:auto}}.panel-content .esri-widget{width:auto}.panel-content .esri-widget--panel{flex:auto}.arcgis-map-container-ui__element .popover-content .esri-widget,.arcgis-map-container-ui__element .popover-content .esri-widget.esri-component,.arcgis-map-container-ui__element .panel-content .esri-widget,.arcgis-map-container-ui__element .panel-content .esri-widget.esri-component,.popover-content .esri-widget,.popover-content .esri-widget.esri-component,.panel-content .esri-widget,.panel-content .esri-widget.esri-component{box-sizing:border-box;box-shadow:none;margin-bottom:0}.panel-content,.content-container{background-color:var(--calcite-color-foreground-1);flex-direction:column;flex:auto;justify-content:stretch;display:flex}.sheet .panel-content,.sheet .content-container{overflow:hidden}.panel-icon-number{align-self:center}.icon{display:flex}calcite-button:not(:hover) .icon:not(calcite-icon){color:var(--calcite-color-text-3)}.icon-flip{transform:var(--arcgis-internal-collapse-icon-flip)}.icon-number{transform-origin:50%;color:var(--calcite-color-text-inverse);pointer-events:none;background-color:var(--calcite-color-text-3);border-radius:var(--calcite-spacing-xl);justify-content:center;align-items:center;height:var(--calcite-spacing-lg);padding:.125em .333em;font-size:var(--calcite-font-size-sm);line-height:1em;display:flex;position:absolute;top:-6px;left:var(--arcgis-internal-expand-icon-number-spacing-left);right:var(--arcgis-internal-expand-icon-number-spacing-right)}`, f = "chevrons-left", x = "chevrons-right", V = I(o);
-class z extends k {
+  d({ value: null })
+], r.prototype, "view", 1);
+r = c([
+  E("map-components.expand.ExpandViewModel")
+], r);
+const L = y`:host{display:flex;pointer-events:auto;--arcgis-internal-expand-icon-number-spacing-left: none;--arcgis-internal-expand-icon-number-spacing-right: none;--arcgis-internal-expand-action-background-color: var( --calcite-action-background-color, var(--calcite-color-foreground-1) );--arcgis-internal-expand-action-background-color-hover: var( --calcite-action-background-color-hover, var(--calcite-color-foreground-2) );--arcgis-internal-expand-action-background-color-press: var( --calcite-action-background-color-press, var(--calcite-color-foreground-3) )}arcgis-expand>.content-expanded{background-color:var(--calcite-color-background)}.root{--esri-widget-panel-max-height: 95svh;--calcite-sheet-max-height: var(--esri-widget-panel-max-height);--calcite-sheet-height: auto;--calcite-action-corner-radius: 0}.action{--calcite-action-background-color: var(--arcgis-internal-expand-action-background-color);--calcite-action-background-color-hover: var(--arcgis-internal-expand-action-background-color-hover);--calcite-action-background-color-press: var(--arcgis-internal-expand-action-background-color-press);cursor:pointer;text-align:center;color:var(--calcite-color-text-2);justify-content:center;align-items:center;margin:0;padding:0;font-size:var(--calcite-font-size);transition:background-color .125s ease-in-out;display:flex;flex-direction:column;overflow:hidden}.toggle{position:relative}.popover-content{flex-direction:column;display:flex;max-height:var(--arcgis-internal-expand-max-height, 95svh);::slotted(*){max-height:var(--arcgis-internal-expand-max-height, 95svh);overflow-y:auto}::slotted(arcgis-sketch){--arcgis-internal-sketch-gap: var(--calcite-spacing-none)}::slotted(:is(arcgis-area-measurement-2d,arcgis-area-measurement-3d,arcgis-basemap-gallery,arcgis-basemap-layer-list,arcgis-basemap-layer-list-next,arcgis-bookmarks,arcgis-building-explorer,arcgis-catalog-layer-list,arcgis-catalog-layer-list-next,arcgis-directions,arcgis-direct-line-measurement-3d,arcgis-distance-measurement-2d,arcgis-editor,arcgis-feature-form,arcgis-features,arcgis-layer-list,arcgis-layer-list-next,arcgis-legend,arcgis-line-of-sight,arcgis-print,arcgis-shadow-cast,arcgis-slice,arcgis-table-list,arcgis-table-list-next,arcgis-utility-network-trace,arcgis-grid-controls)){width:var(--arcgis-internal-panel-width);min-width:var(--calcite-spacing-xxxl);min-height:var(--calcite-spacing-xxxl);transition:max-height .25s ease-in-out}::slotted(arcgis-exploratory-analysis){width:var(--arcgis-internal-exploratory-analysis-width, fit-content);min-height:var(--calcite-spacing-xxxl);transition:max-height .25s ease-in-out}}.popover-content .esri-widget--panel{width:300px}.panel{max-height:var(--esri-widget-panel-max-height)}.panel-content{::slotted(*){width:100%}::slotted(:is(arcgis-area-measurement-2d,arcgis-area-measurement-3d,arcgis-basemap-gallery,arcgis-basemap-layer-list,arcgis-basemap-layer-list-next,arcgis-bookmarks,arcgis-building-explorer,arcgis-catalog-layer-list,arcgis-catalog-layer-list-next,arcgis-directions,arcgis-direct-line-measurement-3d,arcgis-distance-measurement-2d,arcgis-editor,arcgis-feature-form,arcgis-features,arcgis-layer-list,arcgis-layer-list-next,arcgis-legend,arcgis-line-of-sight,arcgis-print,arcgis-shadow-cast,arcgis-slice,arcgis-table-list,arcgis-table-list-next,arcgis-utility-network-trace,arcgis-grid-controls)){overflow-y:auto}}.panel-content .esri-widget{width:auto}.panel-content .esri-widget--panel{flex:auto}.arcgis-map-container-ui__element .popover-content .esri-widget,.arcgis-map-container-ui__element .popover-content .esri-widget.esri-component,.arcgis-map-container-ui__element .panel-content .esri-widget,.arcgis-map-container-ui__element .panel-content .esri-widget.esri-component,.popover-content .esri-widget,.popover-content .esri-widget.esri-component,.panel-content .esri-widget,.panel-content .esri-widget.esri-component{box-sizing:border-box;box-shadow:none;margin-bottom:0}.panel-content,.content-container{background-color:var(--calcite-color-foreground-1);flex-direction:column;flex:auto;justify-content:stretch;display:flex}.sheet .panel-content,.sheet .content-container{overflow:hidden}.panel-icon-number{align-self:center}.icon{display:flex}calcite-button:not(:hover) .icon:not(calcite-icon){color:var(--calcite-color-text-3)}.icon-flip{transform:var(--arcgis-internal-collapse-icon-flip)}.icon-number{transform-origin:50%;color:var(--calcite-color-text-inverse);pointer-events:none;background-color:var(--calcite-color-text-3);border-radius:var(--calcite-spacing-xl);justify-content:center;align-items:center;height:var(--calcite-spacing-lg);padding:.125em .333em;font-size:var(--calcite-font-size-sm);line-height:1em;display:flex;position:absolute;top:-6px;left:var(--arcgis-internal-expand-icon-number-spacing-left);right:var(--arcgis-internal-expand-icon-number-spacing-right)}`, f = "chevrons-left", x = "chevrons-right", V = T(r);
+class z extends I {
   constructor() {
-    super(...arguments), this.popoverEl = g(), this.messages = E({}), this.viewModel = V(this), this.toggleActionEl = g(), this.view = this.viewModel.view, this.state = this.viewModel.state, this.autoDestroyDisabled = !1, this.autoCollapse = this.viewModel.autoCollapse, this.closeOnEscDisabled = !1, this.content = "", this.expanded = this.viewModel.expanded, this.expandTooltip = "", this.collapseTooltip = "", this.focusTrapDisabled = !1, this.group = this.viewModel.group, this.iconNumber = 0, this.mode = "auto", this.topLayerDisabled = !1, this.visualScale = "m", this.arcgisPropertyChange = T()("expanded"), this.arcgisReady = H();
+    super(...arguments), this.popoverEl = g(), this.messages = D({}), this.viewModel = V(this), this.toggleActionEl = g(), this.view = this.viewModel.view, this.state = this.viewModel.state, this.autoDestroyDisabled = !1, this.autoCollapse = this.viewModel.autoCollapse, this.closeOnEscDisabled = !1, this.content = "", this.expanded = this.viewModel.expanded, this.expandTooltip = "", this.collapseTooltip = "", this.focusTrapDisabled = !1, this.group = this.viewModel.group, this.iconNumber = 0, this.mode = "auto", this.topLayerDisabled = !1, this.modalDisabled = !1, this.visualScale = "m", this.arcgisPropertyChange = k()("expanded"), this.arcgisReady = H();
   }
   static {
-    this.properties = { expandTitle: 16, _displaySheet: 16, view: 0, state: 32, icon: 1, label: 1, autoDestroyDisabled: 5, referenceElement: 1, autoCollapse: 5, closeOnEscDisabled: 5, content: 1, expanded: 7, expandIcon: 3, expandTooltip: 1, collapseIcon: 3, collapseTooltip: 1, focusTrapDisabled: 5, group: 1, iconNumber: 9, mode: 1, placement: 1, messageOverrides: 0, topLayerDisabled: 5, visualScale: 1 };
+    this.properties = { _slottedIcon: 16, expandTitle: 16, _displaySheet: 16, view: 0, state: 32, icon: 1, label: 1, autoDestroyDisabled: 5, referenceElement: 1, autoCollapse: 5, closeOnEscDisabled: 5, content: 1, expanded: 7, expandIcon: 3, expandTooltip: 1, collapseIcon: 3, collapseTooltip: 1, focusTrapDisabled: 5, group: 1, iconNumber: 9, mode: 1, placement: 1, messageOverrides: 0, topLayerDisabled: 5, modalDisabled: 5, visualScale: 1 };
   }
   static {
-    this.styles = S;
+    this.styles = L;
   }
   get expandTitle() {
-    const { expanded: e, messages: t, collapseTooltip: a, expandTooltip: s } = this;
-    return (e ? a || t.collapse : s || t.expand) ?? "";
+    const { expanded: e, messages: t, collapseTooltip: a, expandTooltip: n } = this;
+    return (e ? a || t.collapse : n || t.expand) ?? "";
   }
   get _displaySheet() {
     switch (this.mode) {
@@ -145,6 +145,8 @@ class z extends k {
   get expandIcon() {
     if (this._expandIcon)
       return this._expandIcon;
+    if (this._slottedIcon)
+      return this._slottedIcon;
     let e = null;
     return this.content instanceof HTMLElement && ("widget" in this.content && this.content.widget?.icon ? e = this.content.widget.icon : "icon" in this.content ? e = this.content.icon : e = this.content.getAttribute("icon")), e ?? f;
   }
@@ -206,23 +208,27 @@ class z extends k {
   _handleKeyDown(e) {
     this.expanded && e.key === "Escape" && this._isCloseOnEscapeDisabled(e) && e.preventDefault();
   }
+  _handleSlotChange({ currentTarget: e }) {
+    const t = e.assignedElements().find((a) => "icon" in a);
+    this._slottedIcon = t?.icon;
+  }
   render() {
-    const { _displaySheet: e, toggleActionEl: t, expanded: a, label: s, topLayerDisabled: n } = this;
-    return r`<div class=${u(m("root", $.widget))}>${this._renderToggle()}${e ? r`<calcite-sheet class="sheet" height=l .label=${s ?? ""} .topLayerDisabled=${n} @keydown=${this._handleKeyDown} .open=${a} position=block-end @calciteSheetClose=${this.collapse}><calcite-panel class="panel" closable .closed=${!a} .heading=${s} @keydown=${this._handleKeyDown} @calcitePanelClose=${this.collapse}><div class="panel-content">${this._renderContent()}</div></calcite-panel></calcite-sheet>` : t.value ? r`<calcite-popover .focusTrapDisabled=${this.focusTrapDisabled} .label=${s ?? ""} @keydown=${this._handleKeyDown} trigger-disabled .open=${a} overlay-positioning=fixed .placement=${this.getPopoverPlacement()} .referenceElement=${t.value} .topLayerDisabled=${n} @calcitePopoverClose=${this._handlePopoverClose} ${h(this.popoverEl)}><div class="popover-content">${this._renderContent()}</div></calcite-popover>` : null}</div>`;
+    const { _displaySheet: e, toggleActionEl: t, expanded: a, label: n, modalDisabled: s, topLayerDisabled: o } = this;
+    return l`<div class=${u(m("root", $.widget))}>${this._renderToggle()}${e ? l`<calcite-sheet class="sheet" .focusTrapDisabled=${this.focusTrapDisabled} height=l .label=${n ?? ""} .modalDisabled=${s} .topLayerDisabled=${o} @keydown=${this._handleKeyDown} .open=${a} position=block-end @calciteSheetClose=${this.collapse}><calcite-panel class="panel" closable .closed=${!a} .heading=${n} @keydown=${this._handleKeyDown} @calcitePanelClose=${this.collapse}><div class="panel-content">${this._renderContent()}</div></calcite-panel></calcite-sheet>` : t.value ? l`<calcite-popover .focusTrapDisabled=${this.focusTrapDisabled} .label=${n ?? ""} @keydown=${this._handleKeyDown} trigger-disabled .open=${a} overlay-positioning=fixed .placement=${this.getPopoverPlacement()} .referenceElement=${t.value} .topLayerDisabled=${o} @calcitePopoverClose=${this._handlePopoverClose} ${h(this.popoverEl)}><div class="popover-content">${this._renderContent()}</div></calcite-popover>` : null}</div>`;
   }
   _renderBadgeNumber() {
     const { expanded: e, iconNumber: t } = this;
-    return t && !e ? r`<span class="icon-number">${t}</span>` : null;
+    return t && !e ? l`<span class="icon-number">${t}</span>` : null;
   }
   _renderToggleButton() {
-    const { expanded: e, expandTitle: t, expandIcon: a, collapseIcon: s } = this, n = e ? s : a;
-    return r`<calcite-action class=${u(m("action", "icon", { "icon-flip": n === f || n === x }))} @click=${this.toggle} .text=${t} title=${t ?? M} .icon=${n} .scale=${this.visualScale} appearance=solid ${h(this.toggleActionEl)}></calcite-action>`;
+    const { expanded: e, expandTitle: t, expandIcon: a, collapseIcon: n } = this, s = e ? n : a;
+    return l`<calcite-action class=${u(m("action", "icon", { "icon-flip": s === f || s === x }))} @click=${this.toggle} .text=${t} title=${t ?? M} .icon=${s} .scale=${this.visualScale} ${h(this.toggleActionEl)}></calcite-action>`;
   }
   _renderToggle() {
-    return r`<div class="toggle">${this._renderToggleButton()}${this._renderBadgeNumber()}</div>`;
+    return l`<div class="toggle">${this._renderToggleButton()}${this._renderBadgeNumber()}</div>`;
   }
   _renderContent() {
-    return r`<div class="content-container"><slot></slot></div>`;
+    return l`<div class="content-container"><slot @slotchange=${this._handleSlotChange}></slot></div>`;
   }
 }
 b("arcgis-expand", z);

package/dist/components/arcgis-exploratory-analysis/customElement.d.ts

@@ -0,0 +1,229 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { ArcgisAreaMeasurement2d } from "../arcgis-area-measurement-2d/customElement.js";
+import type { ArcgisAreaMeasurement3d } from "../arcgis-area-measurement-3d/customElement.js";
+import type { ArcgisDirectLineMeasurement3d } from "../arcgis-direct-line-measurement-3d/customElement.js";
+import type { ArcgisDistanceMeasurement2d } from "../arcgis-distance-measurement-2d/customElement.js";
+import type { ArcgisElevationProfile } from "../arcgis-elevation-profile/customElement.js";
+import type { ArcgisVolumeMeasurement } from "../arcgis-volume-measurement/customElement.js";
+import type { IconName } from "../types.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+/**
+ * The Exploratory Analysis component provides a container for measurement and analysis components and displays one active analysis at a time.
+ * Add one or more supported components as child elements.
+ *
+ * Supported components include:
+ *
+ * - [arcgis-area-measurement-2d](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-area-measurement-2d/)
+ * - [arcgis-area-measurement-3d](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-area-measurement-3d/)
+ * - [arcgis-direct-line-measurement-3d](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-direct-line-measurement-3d/)
+ * - [arcgis-distance-measurement-2d](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-distance-measurement-2d/)
+ * - [arcgis-elevation-profile](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-elevation-profile/)
+ * - [arcgis-volume-measurement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-volume-measurement/)
+ *
+ * When multiple measurement components are provided, their `icon` and `label` properties are used to create a toolbar for switching between them.
+ *
+ * @beta
+ * @since 5.2
+ * @example
+ * ```html
+ * <arcgis-map basemap="topo">
+ *   <arcgis-exploratory-analysis slot="top-right" show-close-button>
+ *     <arcgis-distance-measurement-2d></arcgis-distance-measurement-2d>
+ *     <arcgis-area-measurement-2d></arcgis-area-measurement-2d>
+ *   </arcgis-exploratory-analysis>
+ * </arcgis-map>
+ * ```
+ * @see [Sample: Exploratory Analysis component](https://developers.arcgis.com/javascript/latest/sample-code/exploratory-analysis/)
+ */
+export abstract class ArcgisExploratoryAnalysis extends LitElement {
+  /** @internal */
+  protected _messages: {
+      clear: string;
+      componentLabel: string;
+      toolbarLabel: string;
+      measure: string;
+      newMeasurement: string;
+      newProfile: string;
+  } & T9nMeta<{
+      clear: string;
+      componentLabel: string;
+      toolbarLabel: string;
+      measure: string;
+      newMeasurement: string;
+      newProfile: string;
+  }>;
+  /**
+   * The active child component. Set using the child component's tag name (i.e. `arcgis-distance-measurement-2d`).
+   * When set, this will display the specified analysis tool as the active component.
+   *
+   * @example
+   * ```html
+   * <arcgis-exploratory-analysis active-analysis="arcgis-distance-measurement-2d">
+   *   <arcgis-distance-measurement-2d></arcgis-distance-measurement-2d>
+   *   <arcgis-area-measurement-2d></arcgis-area-measurement-2d>
+   * </arcgis-exploratory-analysis>
+   * ```
+   */
+  get activeAnalysis(): MeasurementElement | undefined;
+  set activeAnalysis(value: MeasurementElement | MeasurementElementName | null | undefined);
+  /**
+   * If true, the component will not be destroyed automatically when it is
+   * disconnected from the document. This is useful when you want to move the
+   * component to a different place on the page, or temporarily hide it. If this
+   * is set, make sure to call the [destroy()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-exploratory-analysis/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   * @example
+   * ```html
+   * <arcgis-exploratory-analysis auto-destroy-disabled></arcgis-exploratory-analysis>
+   * ```
+   *
+   * ```js
+   * exploratoryAnalysisElement.autoDestroyDisabled = true;
+   * ```
+   * 
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * Specifies whether selecting an analysis tool from the action bar waits for the user to start a new analysis via the button.
+   * By default, a new analysis is started once you click on the icon in the toolbar.
+   *
+   * @default false
+   * @example
+   * ```html
+   * <!-- user will have to click "New Measurement" to start measuring -->
+   * <arcgis-exploratory-analysis auto-start-disabled="true">
+   *   <arcgis-direct-line-measurement-3d></arcgis-direct-line-measurement-3d>
+   *   <arcgis-area-measurement-3d></arcgis-area-measurement-3d>
+   * </arcgis-exploratory-analysis>
+   * ```
+   */
+  accessor autoStartDisabled: boolean;
+  /**
+   * Indicates whether a component is closed. When `true`, the component will be hidden.
+   *
+   * @default false
+   * @example
+   * ```html
+   * <arcgis-exploratory-analysis closed></arcgis-exploratory-analysis>
+   * ```
+   *
+   * ```js
+   * exploratoryAnalysisElement.closed = true;
+   * ```
+   * 
+   */
+  accessor closed: boolean;
+  /**
+   * Icon which represents the component.
+   * Typically used when the component is controlled by another component (e.g. by the Expand component).
+   *
+   * @default "measure"
+   * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
+   */
+  accessor icon: IconName;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: {
+      clear?: string | undefined;
+      componentLabel?: string | undefined;
+      toolbarLabel?: string | undefined;
+      measure?: string | undefined;
+      newMeasurement?: string | undefined;
+      newProfile?: string | undefined;
+  };
+  /**
+   * Specifies whether analysis results are preserved when the active analysis component changes.
+   * By default, the current analysis is cleared before another analysis component becomes active.
+   *
+   * @default false
+   * @example
+   * ```html
+   * <arcgis-exploratory-analysis preserve-analysis-on-change>
+   *   <arcgis-direct-line-measurement-3d></arcgis-direct-line-measurement-3d>
+   *   <arcgis-area-measurement-3d></arcgis-area-measurement-3d>
+   * </arcgis-exploratory-analysis>
+   * ```
+   */
+  accessor preserveAnalysisOnChange: boolean;
+  /**
+   * This property provides the ability to show or hide the close button. When the close button is shown, the `ESC` key can be used to close the component via keyboard when the focus is within the component.
+   *
+   * @default false
+   * @example
+   * ```html
+   * <arcgis-exploratory-analysis show-close-button></arcgis-exploratory-analysis>
+   * ```
+   *
+   * ```js
+   * exploratoryAnalysisElement.showCloseButton = true;
+   * ```
+   * 
+   */
+  accessor showCloseButton: boolean;
+  /**
+   * This property provides the ability to show or hide the collapse button.
+   *
+   * @default false
+   * @example
+   * ```html
+   * <arcgis-exploratory-analysis show-collapse-button></arcgis-exploratory-analysis>
+   * ```
+   *
+   * ```js
+   * exploratoryAnalysisElement.showCollapseButton = true;
+   * ```
+   * 
+   */
+  accessor showCollapseButton: boolean;
+  /**
+   * This property provides the ability to show or hide the heading.
+   *
+   * @default false
+   * @example
+   * ```html
+   * <arcgis-exploratory-analysis show-heading></arcgis-exploratory-analysis>
+   * ```
+   *
+   * ```js
+   * exploratoryAnalysisElement.showHeading = true;
+   * ```
+   * 
+   */
+  accessor showHeading: boolean;
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
+  "@setterTypes": {
+    activeAnalysis?: MeasurementElement | MeasurementElementName | null | undefined;
+  };
+  /** Emitted when the component's close button is clicked. */
+  readonly arcgisClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "activeAnalysis"; }>;
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
+  readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    arcgisClose: ArcgisExploratoryAnalysis["arcgisClose"]["detail"];
+    arcgisPropertyChange: ArcgisExploratoryAnalysis["arcgisPropertyChange"]["detail"];
+    arcgisReady: ArcgisExploratoryAnalysis["arcgisReady"]["detail"];
+  };
+}
+
+export type MeasurementElement = ArcgisAreaMeasurement2d | ArcgisAreaMeasurement3d | ArcgisDirectLineMeasurement3d | ArcgisDistanceMeasurement2d | ArcgisElevationProfile | ArcgisVolumeMeasurement;
+
+export type MeasurementElementName = (typeof measurementElementNames)[number];
+
+export const measurementElementNames: readonly [
+    "arcgis-area-measurement-2d",
+    "arcgis-area-measurement-3d",
+    "arcgis-direct-line-measurement-3d",
+    "arcgis-distance-measurement-2d",
+    "arcgis-elevation-profile",
+    "arcgis-volume-measurement"
+];