@arcgis/map-components 5.2.0-next.112 → 5.2.0-next.114

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

@@ -3,7 +3,7 @@ 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-exploratory-analysis/customElement.d.ts

@@ -9,12 +9,31 @@ import type { ArcgisVolumeMeasurement } from "../arcgis-volume-measurement/custo
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 /**
- * The Exploratory Analysis component groups measurement components and displays one measurement at a time.
+ * 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.
  *
- * When multiple measurement components are provided, their `icon` and `label` properties are used to create a toolbar.
+ * 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>
+ * ```
  */
 export abstract class ArcgisExploratoryAnalysis extends LitElement {
   /** @internal */
@@ -33,9 +52,20 @@ export abstract class ArcgisExploratoryAnalysis extends LitElement {
       newMeasurement: string;
       newProfile: string;
   }>;
-  /** The slotted measurement component currently displayed. Set using the measurement component's tag name. */
-  get activeMeasurement(): MeasurementElement | undefined;
-  set activeMeasurement(value: MeasurementElement | MeasurementElementName | null | undefined);
+  /**
+   * 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
@@ -56,9 +86,18 @@ export abstract class ArcgisExploratoryAnalysis extends LitElement {
    */
   accessor autoDestroyDisabled: boolean;
   /**
-   * Specifies whether selecting a measurement tool from the action bar waits for the user to start a new measurement.
+   * 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;
   /**
@@ -137,12 +176,12 @@ export abstract class ArcgisExploratoryAnalysis extends LitElement {
   /** Permanently destroy the component. */
   destroy(): Promise<void>;
   "@setterTypes": {
-    activeMeasurement?: MeasurementElement | MeasurementElementName | null | undefined;
+    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: "activeMeasurement"; }>;
+  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": {

package/dist/components/arcgis-exploratory-analysis/customElement.js

@@ -1,41 +1,41 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as m } from "../../chunks/runtime.js";
 import { css as u, html as o } from "lit";
-import { watch as v } from "@arcgis/core/core/reactiveUtils.js";
-import { LitElement as g, createEvent as l, nothing as h } from "@arcgis/lumina";
-import { usePropertyChange as p } from "@arcgis/lumina/controllers";
-import { getSlotAssignedElements as f } from "@arcgis/toolkit/dom/slots";
-import { u as M } from "../../chunks/useT9n.js";
+import { watch as y } from "@arcgis/core/core/reactiveUtils.js";
+import { LitElement as v, createEvent as r, nothing as h } from "@arcgis/lumina";
+import { usePropertyChange as g } from "@arcgis/lumina/controllers";
+import { getSlotAssignedElements as p } from "@arcgis/toolkit/dom/slots";
+import { u as f } from "../../chunks/useT9n.js";
 import { r as d } from "../../chunks/maybe.js";
-const b = u`:host{min-width:var(--arcgis-internal-panel-width, 300px)}calcite-action-bar{width:100%}.selection-notice-container{padding:var(--calcite-spacing-md)}.selection-notice-list{margin-block:0;padding-inline-start:var(--calcite-spacing-lg)}.measurement-content{--arcgis-internal-padding: var(--calcite-space-md) var(--calcite-space-none);margin-block-end:var(--calcite-space-none)}.measurement-content,slot::slotted(*){width:100%}.footer{display:grid;grid-template-columns:1fr 2fr;gap:var(--calcite-spacing-md);width:100%}`, y = [
+const A = u`:host{min-width:var(--arcgis-internal-panel-width, 300px)}calcite-action-bar{width:100%}.selection-notice-container{padding:var(--calcite-spacing-md)}.selection-notice-list{margin-block:0;padding-inline-start:var(--calcite-spacing-lg)}.measurement-content{--arcgis-internal-padding: var(--calcite-space-md) var(--calcite-space-none);margin-block-end:var(--calcite-space-none)}.measurement-content,slot::slotted(*){width:100%}.footer{display:grid;grid-template-columns:1fr 2fr;gap:var(--calcite-spacing-md);width:100%}`, b = [
   "arcgis-area-measurement-2d",
   "arcgis-area-measurement-3d",
   "arcgis-direct-line-measurement-3d",
   "arcgis-distance-measurement-2d",
   "arcgis-elevation-profile",
   "arcgis-volume-measurement"
-], _ = y.join(",");
-class C extends g {
+], _ = b.join(",");
+class C extends v {
   constructor() {
-    super(), this._messages = M({ blocking: !0 }), this.#i = !1, this.#e = /* @__PURE__ */ new WeakMap(), this._activeMeasurementHasInput = !1, this._measurements = [], this.autoDestroyDisabled = !1, this.autoStartDisabled = !1, this.closed = !1, this.showCloseButton = !1, this.showCollapseButton = !1, this.showHeading = !1, this.arcgisClose = l(), this.arcgisPropertyChange = p()("activeMeasurement"), this.arcgisReady = l(), this.listen("arcgisPropertyChange", this.#l.bind(this)), this.listen("arcgisReady", this.#l.bind(this));
+    super(), this._messages = f({ blocking: !0 }), this.#i = !1, this.#t = /* @__PURE__ */ new WeakMap(), this._activeAnalysisHasInput = !1, this._measurements = [], this.autoDestroyDisabled = !1, this.autoStartDisabled = !1, this.closed = !1, this.showCloseButton = !1, this.showCollapseButton = !1, this.showHeading = !1, this.arcgisClose = r(), this.arcgisPropertyChange = g()("activeAnalysis"), this.arcgisReady = r(), this.listen("arcgisPropertyChange", this.#r.bind(this)), this.listen("arcgisReady", this.#r.bind(this));
   }
   static {
-    this.properties = { _activeMeasurementHasInput: 16, _activeMeasurementState: 16, _measurements: 16, activeMeasurement: 1, autoDestroyDisabled: 5, autoStartDisabled: 5, closed: 5, messageOverrides: 0, showCloseButton: 5, showCollapseButton: 5, showHeading: 5 };
+    this.properties = { _activeAnalysisHasInput: 16, _activeAnalysisState: 16, _measurements: 16, activeAnalysis: 1, autoDestroyDisabled: 5, autoStartDisabled: 5, closed: 5, messageOverrides: 0, showCloseButton: 5, showCollapseButton: 5, showHeading: 5 };
   }
   static {
-    this.styles = b;
+    this.styles = A;
   }
   #a;
   #i;
-  #e;
   #t;
+  #e;
   #n;
   #s;
-  get activeMeasurement() {
+  get activeAnalysis() {
     return this.#a;
   }
-  set activeMeasurement(t) {
-    this.#t = typeof t == "string" ? t : void 0, this.#r(typeof t == "string" ? this._measurements.find((s) => s.localName === t) : t ?? void 0);
+  set activeAnalysis(e) {
+    this.#e = typeof e == "string" ? e : void 0, this.#l(typeof e == "string" ? this._measurements.find((s) => s.localName === e) : e ?? void 0);
   }
   async destroy() {
     await this.manager.destroy();
@@ -46,13 +46,13 @@ class C extends g {
     }));
   }
   async #o() {
-    await this.activeMeasurement?.clear();
+    await this.activeAnalysis?.clear();
   }
   #m() {
     this.closed = !0, this.arcgisClose.emit(), this.autoDestroyDisabled || this.destroy();
   }
-  async #u({ target: t }) {
-    const s = Number(t.selectedActions.at(0)?.dataset.measurementIndex), i = this._measurements[s];
+  async #u({ target: e }) {
+    const s = Number(e.selectedActions.at(0)?.dataset.measurementIndex), i = this._measurements[s];
     if (i) {
       if (this.#h(i), this.autoStartDisabled)
         return;
@@ -60,62 +60,62 @@ class C extends g {
     } else
       await this.#o(), this.#h(void 0);
   }
-  #l() {
-    this._activeMeasurementState = this.activeMeasurement ? this.activeMeasurement.state ?? "disabled" : void 0, this.#c(), this.#d(), this.requestUpdate();
+  #r() {
+    this._activeAnalysisState = this.activeAnalysis ? this.activeAnalysis.state ?? "disabled" : void 0, this.#c(), this.#d(), this.requestUpdate();
   }
-  #v({ currentTarget: t }) {
-    const s = f(t, _), i = this._measurements.filter((e) => !s.includes(e));
-    for (const e of i) {
-      const n = this.#e.get(e);
-      e.hidden = n?.hidden ?? !1, e.hideStartButton = n?.hideStartButton ?? !1, "hideClearButton" in e && (e.hideClearButton = n?.hideClearButton ?? !1), "hideHeader" in e && (e.hideHeader = n?.hideHeader ?? !1), this.#e.delete(e);
+  #y({ currentTarget: e }) {
+    const s = p(e, _), i = this._measurements.filter((t) => !s.includes(t));
+    for (const t of i) {
+      const n = this.#t.get(t);
+      t.hidden = n?.hidden ?? !1, t.hideStartButton = n?.hideStartButton ?? !1, "hideClearButton" in t && (t.hideClearButton = n?.hideClearButton ?? !1), "hideHeader" in t && (t.hideHeader = n?.hideHeader ?? !1), this.#t.delete(t);
     }
-    for (const e of s)
-      this.#e.has(e) || (this.#e.set(e, {
-        hidden: e.hidden,
-        hideClearButton: "hideClearButton" in e ? e.hideClearButton : void 0,
-        hideStartButton: e.hideStartButton,
-        hideHeader: "hideHeader" in e ? e.hideHeader : void 0
-      }), e.componentOnReady().then(() => {
-        this.isConnected && e.isConnected && this._measurements.includes(e) && this.requestUpdate();
-      })), e.hideStartButton = !0, "hideClearButton" in e && (e.hideClearButton = !0), "hideHeader" in e && (e.hideHeader = !0);
+    for (const t of s)
+      this.#t.has(t) || (this.#t.set(t, {
+        hidden: t.hidden,
+        hideClearButton: "hideClearButton" in t ? t.hideClearButton : void 0,
+        hideStartButton: t.hideStartButton,
+        hideHeader: "hideHeader" in t ? t.hideHeader : void 0
+      }), t.componentOnReady().then(() => {
+        this.isConnected && t.isConnected && this._measurements.includes(t) && this.requestUpdate();
+      })), t.hideStartButton = !0, "hideClearButton" in t && (t.hideClearButton = !0), "hideHeader" in t && (t.hideHeader = !0);
     this._measurements = s;
-    let r;
-    this.#t && (r = s.find((e) => e.localName === this.#t));
+    let l;
+    this.#e && (l = s.find((t) => t.localName === this.#e));
     let c;
-    !this.#t && s.length === 1 && (c = s[0]);
+    !this.#e && s.length === 1 && (c = s[0]);
     let a;
-    this.#t ? a = r : this.#i && s.length > 1 ? a = void 0 : this.activeMeasurement && s.includes(this.activeMeasurement) ? a = this.activeMeasurement : a = c, this.#r(a), this.#i = !!c;
+    this.#e ? a = l : this.#i && s.length > 1 ? a = void 0 : this.activeAnalysis && s.includes(this.activeAnalysis) ? a = this.activeAnalysis : a = c, this.#l(a), this.#i = !!c;
   }
-  #h(t) {
-    this.#t = void 0, this.#i = !1, this.#r(t);
+  #h(e) {
+    this.#e = void 0, this.#i = !1, this.#l(e);
   }
-  #r(t) {
+  #l(e) {
     const s = this.#a;
-    this.#a = t, this.requestUpdate("activeMeasurement", s), this.#g();
+    this.#a = e, this.requestUpdate("activeAnalysis", s), this.#v();
   }
-  #g() {
-    this._activeMeasurementState = this.activeMeasurement ? this.activeMeasurement.state ?? "disabled" : void 0, this.#c(), this.#d();
+  #v() {
+    this._activeAnalysisState = this.activeAnalysis ? this.activeAnalysis.state ?? "disabled" : void 0, this.#c(), this.#d();
   }
   #d() {
-    for (const t of this._measurements)
-      t.hidden = t !== this.activeMeasurement || (this.#e.get(t)?.hidden ?? !1) || t === this.activeMeasurement && this._activeMeasurementState === "ready";
+    for (const e of this._measurements)
+      e.hidden = e !== this.activeAnalysis || (this.#t.get(e)?.hidden ?? !1) || e === this.activeAnalysis && this._activeAnalysisState === "ready";
   }
-  async #p() {
-    await this.activeMeasurement?.start();
+  async #g() {
+    await this.activeAnalysis?.start();
   }
   #c() {
-    const t = this.activeMeasurement?.analysis;
-    if (!(t === this.#n && (t == null || this.#s))) {
-      if (this.#s = d(this.#s), this.#n = t, !t) {
-        this._activeMeasurementHasInput = !1;
+    const e = this.activeAnalysis?.analysis;
+    if (!(e === this.#n && (e == null || this.#s))) {
+      if (this.#s = d(this.#s), this.#n = e, !e) {
+        this._activeAnalysisHasInput = !1;
         return;
       }
-      this.#s = v(() => t.valid, (s) => this._activeMeasurementHasInput = s, { initial: !0, sync: !0 });
+      this.#s = y(() => e.valid, (s) => this._activeAnalysisHasInput = s, { initial: !0, sync: !0 });
     }
   }
   render() {
-    const { showCloseButton: t, showCollapseButton: s, showHeading: i } = this, r = this._activeMeasurementState === "disabled", c = this._measurements.length > 1, a = this.activeMeasurement?.label || this._messages.componentLabel;
-    return o`<calcite-panel .closed=${this.closed} .heading=${i ? this._messages.componentLabel : void 0} .collapsible=${s} .closable=${t} @calcitePanelClose=${this.#m}><div .hidden=${!c}><calcite-action-bar expand-toggle-disabled layout=horizontal><calcite-action-group .label=${this._messages.toolbarLabel} @calciteActionGroupChange=${this.#u} selection-mode=single>${this._measurements.map((e, n) => o`<calcite-action .active=${e === this.activeMeasurement} data-measurement-index=${n ?? h} .icon=${e.icon} .label=${e.label} .text=${e.label ?? ""} title=${e.label ?? h}></calcite-action>`)}</calcite-action-group></calcite-action-bar></div><div class="measurement-container" .hidden=${!this.activeMeasurement || r}><calcite-block class="measurement-content" .expanded=${this.isConnected && !!this.activeMeasurement && !r} .heading=${a}><slot @slotchange=${this.#v}></slot></calcite-block></div>${this.activeMeasurement ? o`<div class="footer" slot=footer><calcite-button appearance=transparent .disabled=${!this._activeMeasurementHasInput} kind=danger @click=${this.#o} width=full>${this._messages.clear}</calcite-button><calcite-button .disabled=${this._activeMeasurementState !== "ready" && !this._activeMeasurementHasInput} @click=${this.#p} width=full>${this.activeMeasurement?.matches("arcgis-elevation-profile") ? this._messages.newProfile : this._messages.newMeasurement}</calcite-button></div>` : null}</calcite-panel>`;
+    const { showCloseButton: e, showCollapseButton: s, showHeading: i } = this, l = this._activeAnalysisState === "disabled", c = this._measurements.length > 1, a = this.activeAnalysis?.label || this._messages.componentLabel;
+    return o`<calcite-panel .closed=${this.closed} .heading=${i ? this._messages.componentLabel : void 0} .collapsible=${s} .closable=${e} @calcitePanelClose=${this.#m}><div .hidden=${!c}><calcite-action-bar expand-toggle-disabled layout=horizontal><calcite-action-group .label=${this._messages.toolbarLabel} @calciteActionGroupChange=${this.#u} selection-mode=single>${this._measurements.map((t, n) => o`<calcite-action .active=${t === this.activeAnalysis} data-measurement-index=${n ?? h} .icon=${t.icon} .label=${t.label} .text=${t.label ?? ""} title=${t.label ?? h}></calcite-action>`)}</calcite-action-group></calcite-action-bar></div><div class="measurement-container" .hidden=${!this.activeAnalysis || l}><calcite-block class="measurement-content" .expanded=${this.isConnected && !!this.activeAnalysis && !l} .heading=${a}><slot @slotchange=${this.#y}></slot></calcite-block></div>${this.activeAnalysis ? o`<div class="footer" slot=footer><calcite-button appearance=transparent .disabled=${!this._activeAnalysisHasInput} kind=danger @click=${this.#o} width=full>${this._messages.clear}</calcite-button><calcite-button .disabled=${this._activeAnalysisState !== "ready" && !this._activeAnalysisHasInput} @click=${this.#g} width=full>${this.activeAnalysis?.matches("arcgis-elevation-profile") ? this._messages.newProfile : this._messages.newMeasurement}</calcite-button></div>` : null}</calcite-panel>`;
   }
 }
 m("arcgis-exploratory-analysis", C);

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

@@ -257,20 +257,6 @@ export abstract class ArcgisFeature extends LitElement {
       noRelatedFeatures?: string | undefined;
       relationshipNotFound?: string | undefined;
       pageText?: string | undefined;
-      associationsAttachments?: string | undefined;
-      associationsConnectivity?: string | undefined;
-      associationsContainer?: string | undefined;
-      associationsContents?: string | undefined;
-      associationsJunctionEdgeFrom?: string | undefined;
-      associationsJunctionEdgeMidspan?: string | undefined;
-      associationsJunctionEdgeTo?: string | undefined;
-      associationsJunctionJunction?: string | undefined;
-      associationsList?: string | undefined;
-      associationsStructure?: string | undefined;
-      noAssociations?: string | undefined;
-      associationFilterPlaceholder?: string | undefined;
-      associationsLimitNoticeTitle?: string | undefined;
-      associationsLimitNoticeMessage?: string | undefined;
       openInApp?: string | undefined;
       view?: string | undefined;
       error?: string | undefined;
@@ -297,20 +283,6 @@ export abstract class ArcgisFeature extends LitElement {
       noRelatedFeatures: string;
       relationshipNotFound: string;
       pageText: string;
-      associationsAttachments: string;
-      associationsConnectivity: string;
-      associationsContainer: string;
-      associationsContents: string;
-      associationsJunctionEdgeFrom: string;
-      associationsJunctionEdgeMidspan: string;
-      associationsJunctionEdgeTo: string;
-      associationsJunctionJunction: string;
-      associationsList: string;
-      associationsStructure: string;
-      noAssociations: string;
-      associationFilterPlaceholder: string;
-      associationsLimitNoticeTitle: string;
-      associationsLimitNoticeMessage: string;
       openInApp: string;
       view: string;
       error: string;
@@ -335,20 +307,6 @@ export abstract class ArcgisFeature extends LitElement {
       noRelatedFeatures: string;
       relationshipNotFound: string;
       pageText: string;
-      associationsAttachments: string;
-      associationsConnectivity: string;
-      associationsContainer: string;
-      associationsContents: string;
-      associationsJunctionEdgeFrom: string;
-      associationsJunctionEdgeMidspan: string;
-      associationsJunctionEdgeTo: string;
-      associationsJunctionJunction: string;
-      associationsList: string;
-      associationsStructure: string;
-      noAssociations: string;
-      associationFilterPlaceholder: string;
-      associationsLimitNoticeTitle: string;
-      associationsLimitNoticeMessage: string;
       openInApp: string;
       view: string;
       error: string;

package/dist/components/arcgis-feature-content/customElement.js

@@ -6,7 +6,7 @@ import { LitElement as l } from "@arcgis/lumina";
 import { a as o, s as h } from "../../chunks/feature-utils.js";
 import { watch as d } from "@arcgis/core/core/reactiveUtils.js";
 import { renderingSanitizer as g } from "@arcgis/core/applications/Components/sanitizerUtils.js";
-const m = c`.loader-container{display:flex;align-items:center;justify-content:center;padding:0;height:150px}.root{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-relative-normal)}.root h1,.root h2,.root h3,.root h4,.root h5,.root h6{margin:var(--calcite-spacing-sm) 0;line-height:var(--calcite-font-line-height-relative-tight);letter-spacing:0;color:var(--calcite-color-text-1);font-weight:var(--calcite-font-weight-semibold)}.root h1{font-size:var(--calcite-font-size-xxl)}.root h2{font-size:var(--calcite-font-size-xl)}.root h3{font-size:var(--calcite-font-size-lg)}.root h4,.root h5,.root h6{font-size:var(--calcite-font-size)}.description{margin-bottom:var(--calcite-spacing-sm)}.root p{margin:0 0 var(--calcite-spacing-sm);font-size:var(--calcite-font-size)}.root p:last-child{margin-block-end:0}.root img{max-width:100%;max-height:100%;image-orientation:from-image}.root video{max-width:100%;max-height:100%}.root figure{margin:0;padding:0}.root figcaption{display:block;margin:var(--calcite-spacing-sm) 0 0;padding:0;font-size:var(--calcite-font-size-sm);font-style:italic}.root ul,.root ol{margin-block:var(--calcite-spacing-sm)}.root ul:first-child,.root ol:first-child{margin-block-start:0}.root a,.root a:hover,.root a:focus{color:var(--calcite-color-text-link)}`;
+const m = c`.loader-container{display:flex;align-items:center;justify-content:center;padding:0;height:150px}.root{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-relative-normal)}.root h1,.root h2,.root h3,.root h4,.root h5,.root h6{margin:var(--calcite-spacing-md) 0;line-height:var(--calcite-font-line-height-relative-tight);letter-spacing:0;color:var(--calcite-color-text-1);font-weight:var(--calcite-font-weight-semibold)}.root h1{font-size:var(--calcite-font-size-xxl)}.root h2{font-size:var(--calcite-font-size-xl)}.root h3{font-size:var(--calcite-font-size-lg)}.root h4,.root h5,.root h6{font-size:var(--calcite-font-size)}.description{margin-bottom:var(--calcite-spacing-md)}.root p{margin:0 0 var(--calcite-space-sm);font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-relative-normal)}.root p:last-child{margin-block-end:0}.root img{max-width:100%;max-height:100%;image-orientation:from-image}.root video{max-width:100%;max-height:100%}.root figure{margin:0;padding:0}.root figcaption{display:block;margin:var(--calcite-spacing-md) 0 0;padding:0;font-size:var(--calcite-font-size-sm);font-style:italic}.root ul,.root ol{margin-block:var(--calcite-spacing-md)}.root ul:first-child,.root ol:first-child{margin-block-start:0}.root a,.root a:hover,.root a:focus{color:var(--calcite-color-text-link)}`;
 class f extends l {
   static {
     this.properties = { _loadingPromise: 16, _created: 16, creator: 1, destroyer: 0, graphic: 0 };

package/dist/components/arcgis-feature-form-utility-network-association-list/customElement.js

@@ -0,0 +1,174 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as m } from "../../chunks/runtime.js";
+import { css as p, html as a } from "lit";
+import { keyed as r } from "lit/directives/keyed.js";
+import { ref as g } from "lit/directives/ref.js";
+import { stripHTML as l } from "@arcgis/core/applications/Components/stringUtils.js";
+import { formatNumber as f, substitute as y } from "@arcgis/core/intl.js";
+import { watch as d } from "@arcgis/core/core/reactiveUtils.js";
+import { ArcgisUtilityNetworkAssociationList as v } from "../arcgis-utility-network-association-list/customElement.js";
+import { e as $ } from "../../chunks/layer-utils.js";
+import { u as b } from "../../chunks/useT9n.js";
+import { H as F } from "../../chunks/heading.js";
+const _ = p`:host{background-color:var(--calcite-color-surface-2)}.feature-observer{position:relative;bottom:var(--calcite-space-2xl);z-index:2;text-align:center}.header{calcite-block{margin-block-start:calc(var(--calcite-size-3xs) * -1.5);margin-inline:calc(var(--calcite-size-xs) * -1)}}.header>*{margin-block-end:var(--calcite-size-3xs)}.header>:last-child{color:var(--calcite-color-text-3)}.heading-content{display:flex;align-items:center;calcite-icon{margin-inline-end:var(--calcite-size-3xs)}}.list-container{display:flex;flex-direction:column;min-height:var(--calcite-space-3xl);calcite-fab{align-self:center;margin-block:var(--calcite-space-md)}}`;
+function A(n) {
+  const { percentAlong: t } = n;
+  return t == null ? "" : f(t, {
+    style: "percent",
+    maximumFractionDigits: 2
+  });
+}
+async function L(n) {
+  const t = n.attributes, e = $(n) ? n.sourceLayer : void 0, i = n.origin, s = i && "layer" in i ? i.layer : e ?? n.layer;
+  if (!t || !s)
+    return "";
+  if ("getFeatureTitle" in s)
+    return await s.getFeatureTitle(n);
+  const c = "displayField" in s ? s.displayField : null;
+  let o = c != null ? t[c.toString()] : null;
+  return o != null && typeof o != "string" && (o = o.toString()), o || n.getObjectId()?.toString() || "";
+}
+function u(n) {
+  const { associationType: t } = n;
+  return t === "connectivity" || t === "junction-edge-from-connectivity" || t === "junction-edge-midspan-connectivity" || t === "junction-edge-to-connectivity" || t === "junction-junction-connectivity";
+}
+function T(n) {
+  return n.associationType === "junction-edge-midspan-connectivity";
+}
+class I extends v {
+  constructor() {
+    super(...arguments), this._messagesFeature = b({ blocking: !0 }), this.#e = 0, this.#t = !1, this._filteredItemCount = 0, this.addAssociation = () => {
+    }, this.headingLevel = 5, this.hideAssociationDetails = !1, this.selectAssociatedFeature = async () => {
+    }, this.selectAssociatedLayer = () => {
+    }, this.topLayerDisabled = !1;
+  }
+  static {
+    this.properties = { _featureTitle: 16, _filteredItemCount: 16, _featureInfosPage: 16, _featureInfos: 16, addAssociation: 0, associatedFeatureCount: 32, associationInput: 0, headingLevel: 9, hideAssociationDetails: 5, selectAssociatedFeature: 0, selectAssociatedLayer: 0, topLayerDisabled: 5 };
+  }
+  static {
+    this.styles = _;
+  }
+  #e;
+  #t;
+  get _featureInfosPage() {
+    return this._featureInfos.slice(0, this.endIndex);
+  }
+  get _featureInfos() {
+    const t = this.associationInput?.associatedFeatures;
+    return t ? t.toArray() : [];
+  }
+  get associatedFeatureCount() {
+    return this._featureInfos.length;
+  }
+  loaded() {
+    super.loaded(), this.manager.onLifecycle(() => [
+      d(() => [
+        this.associationInput,
+        this.associationInput?.associationFeature,
+        this.associationInput?.featureItem?.label
+      ], () => {
+        this.#c();
+      }, { initial: !0 }),
+      d(() => this.associationInput?.updating ?? !1, (t) => this.state = t ? "querying" : "ready", { initial: !0 })
+    ]);
+  }
+  #s(t) {
+    const e = t.activeAssociationType?.type;
+    if (!e)
+      return;
+    const { attachment: i, connectivity: s, container: c, content: o, structure: h } = this._messages.associationTypes;
+    switch (e) {
+      case "attachment":
+        return i;
+      case "connectivity":
+        return s;
+      case "container":
+        return c;
+      case "content":
+        return o;
+      case "structure":
+        return h;
+      default:
+        return;
+    }
+  }
+  #i(t) {
+    return `association-${t.association.globalId}`;
+  }
+  #a(t) {
+    this._filteredItemCount = t ? this.associatedFeatureCount : 0;
+  }
+  async #n(t) {
+    if (!this.#t) {
+      this.#t = !0;
+      try {
+        await this.selectAssociatedFeature({ feature: t.feature, association: t.association });
+      } finally {
+        this.#t = !1;
+      }
+    }
+  }
+  async #c() {
+    const { associationInput: t } = this, e = ++this.#e;
+    if (!t?.associationFeature || t.featureItem?.label) {
+      this._featureTitle = void 0;
+      return;
+    }
+    const i = await L(t.associationFeature);
+    e === this.#e && (this._featureTitle = i);
+  }
+  #o(t) {
+    const e = t.title || this._messagesCommon.untitled, i = this.#i(t), s = T(t.association), c = s ? A(t.association) : "";
+    return r(i, a`<calcite-list-item .description=${l(t.terminalName ?? "")} .label=${l(e)} @calciteListItemSelect=${() => this.#n(t)}>${u(t.association) ? this._renderConnectivityIcon(t.association.associationType, i) : null}${s ? a`<calcite-chip .label=${c} scale=s slot=content-end>${c}</calcite-chip>` : null}<calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon></calcite-list-item>`);
+  }
+  #r() {
+    const t = this._featureInfosPage, e = t.map((s) => this.#h(s)), i = t.map((s) => this.#o(s));
+    return [...e, ...i];
+  }
+  #l(t) {
+    const e = this.#s(t) ?? "", i = t.featureItem?.label || this._featureTitle || "";
+    return a`<calcite-block .description=${e} .heading=${i}></calcite-block>`;
+  }
+  #d(t, e) {
+    return a`${this.#u(t, e)}<div class="list-container">${this._renderFeatureCountWarning()}${r(`associated-features-list-${e.id}`, a`<calcite-list filter-enabled .filterLabel=${this._messages.associationFilterPlaceholder} .filterPlaceholder=${this._messages.associationFilterPlaceholder} .label=${this._messages.associatedFeatures} @calciteListFilter=${(i) => this._filteredItemCount = i.currentTarget?.filteredItems.length} ${g(this.#a)}>${this.#r()}${this._renderFeatureObserver()}</calcite-list>`)}</div>`;
+  }
+  #u(t, e) {
+    return a`<div class="header">${this.hideAssociationDetails ? null : this.#l(t)}${this.#g(e)}${this.#f(e)}</div>`;
+  }
+  #h(t) {
+    const { tooltipReferenceMap: e } = this, i = this.#i(t);
+    return u(t.association) ? r(`tooltip-${i}`, a`<calcite-tooltip overlay-positioning=fixed .referenceElement=${e.get(i)} .topLayerDisabled=${this.topLayerDisabled}>${this.getConnectivityTooltip(t.association.associationType)}</calcite-tooltip>`) : null;
+  }
+  #m(t, e) {
+    const { associatedFeatureInfos: i } = t, s = i.get(e)?.length ?? 0;
+    return r(`${e.id}-show-all`, a`<calcite-list-item expanded .label=${e.title ?? this._messagesCommon.untitled} .value=${e.id} @calciteListItemSelect=${() => this.selectAssociatedLayer({ layer: e })}><calcite-chip .label=${s.toString()} scale=s slot=content-end>${s}</calcite-chip><calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon></calcite-list-item>`);
+  }
+  #p(t) {
+    const { associatedFeatureInfos: e, associationFeature: i, editable: s } = t;
+    return i ? a`<div class="list-container"><calcite-list .label=${this._messages.associatedLayers}>${Array.from(e.keys(), (c) => this.#m(t, c))}</calcite-list>${s ? a`<calcite-fab appearance=outline-fill icon=plus kind=neutral .text=${this._messagesCommon.add} text-enabled @click=${() => this.addAssociation({
+      feature: i,
+      associationType: t.activeAssociationType,
+      utilityNetwork: t.utilityNetwork
+    })}></calcite-fab>` : void 0}</div>` : null;
+  }
+  #g(t) {
+    return t.title ? r("title", F({ level: this.headingLevel, children: a`<div class="heading-content"><calcite-icon icon=layer></calcite-icon>${t.title}</div>` })) : null;
+  }
+  #f(t) {
+    const e = y(this._messagesFeature?.numberRecords, {
+      number: this._filteredItemCount
+    });
+    return r(t.id, a`<div>${e}</div>`);
+  }
+  render() {
+    const { associationInput: t } = this;
+    if (!t)
+      return a`<div></div>`;
+    const { associatedLayer: e } = t;
+    return t.updating ? a`<div>${this._renderLoading()}</div>` : e ? a`<div>${this.#d(t, e)}</div>` : a`<div>${this.#p(t)}</div>`;
+  }
+}
+m("arcgis-feature-form-utility-network-association-list", I);
+export {
+  I as ArcgisFeatureFormUtilityNetworkAssociationList
+};

package/dist/components/arcgis-feature-form-utility-network-association-list/index.js

@@ -0,0 +1,9 @@
+import "../arcgis-utility-network-association-list/index.js";
+import "@esri/calcite-components/components/calcite-list-item";
+import "@esri/calcite-components/components/calcite-chip";
+import "@esri/calcite-components/components/calcite-icon";
+import "@esri/calcite-components/components/calcite-block";
+import "@esri/calcite-components/components/calcite-list";
+import "@esri/calcite-components/components/calcite-tooltip";
+import "@esri/calcite-components/components/calcite-fab";
+export * from "./customElement.js";

package/dist/components/arcgis-feature-form-utility-network-association-settings/customElement.js

@@ -77,10 +77,10 @@ class k extends y {
       case "junction-edge-from-connectivity":
       case "junction-edge-to-connectivity": {
         const i = t === "junction-edge-midspan-connectivity" ? t : "junction-edge-from-connectivity", n = [
-          this.#i("junction-edge-midspan-connectivity", i, e.associations.midspanEdge),
-          this.#i("junction-edge-from-connectivity", i, e.associations.endpointEdge)
+          this.#i("junction-edge-midspan-connectivity", i, e.midspanEdge),
+          this.#i("junction-edge-from-connectivity", i, e.endpointEdge)
         ];
-        return c`<div class="info-container">${l("additional-content", c`<calcite-label>${e.associations.connectTo}<calcite-combobox .label=${e.associations.edgeConnectionComboboxLabel} overlay-positioning=fixed selection-mode=single-persist .topLayerDisabled=${this.topLayerDisabled} @calciteComboboxChange=${({ currentTarget: o }) => {
+        return c`<div class="info-container">${l("additional-content", c`<calcite-label>${e.connectTo}<calcite-combobox .label=${e.edgeConnectionComboboxLabel} overlay-positioning=fixed selection-mode=single-persist .topLayerDisabled=${this.topLayerDisabled} @calciteComboboxChange=${({ currentTarget: o }) => {
           this.associationType = o.value;
         }}>${n}</calcite-combobox></calcite-label>`)}${i === "junction-edge-midspan-connectivity" ? this.#u() : this.#l()}</div>`;
       }
@@ -100,7 +100,7 @@ class k extends y {
     if (!n)
       return null;
     const a = n.getTerminalConfiguration(e)?.terminals.map((s) => this.#a(s.id, t.terminalId, s.name)) || [];
-    return c`<calcite-label>${i.associations.terminal}<calcite-combobox .label=${i.associations.terminalComboboxLabel} overlay-positioning=fixed selection-mode=single-persist .topLayerDisabled=${this.topLayerDisabled} @calciteComboboxChange=${({ currentTarget: s }) => {
+    return c`<calcite-label>${i.terminal}<calcite-combobox .label=${i.terminalComboboxLabel} overlay-positioning=fixed selection-mode=single-persist .topLayerDisabled=${this.topLayerDisabled} @calciteComboboxChange=${({ currentTarget: s }) => {
       t.terminalId = Number.parseInt(s.value, 10);
     }}>${a}</calcite-combobox></calcite-label>`;
   }
@@ -109,16 +109,16 @@ class k extends y {
     if (!t)
       return null;
     const i = t.isContentVisible ?? !1;
-    return c`<calcite-label layout=inline>${e.associations.visible}<calcite-switch .checked=${i} @calciteSwitchChange=${({ currentTarget: n }) => {
+    return c`<calcite-label layout=inline>${e.visible}<calcite-switch .checked=${i} @calciteSwitchChange=${({ currentTarget: n }) => {
       t.isContentVisible = n.checked;
     }}></calcite-switch></calcite-label>`;
   }
   #l() {
     const { _messages: e, associationType: t } = this, i = t === "junction-edge-to-connectivity";
-    return l("endpoint-edge", c`<calcite-label>${e.associations.edgeSide}<calcite-label layout=inline>${e.associations.fromSide}<calcite-switch .checked=${i} @calciteSwitchChange=${({ currentTarget: n }) => {
+    return l("endpoint-edge", c`<calcite-label>${e.edgeSide}<calcite-label layout=inline>${e.fromSide}<calcite-switch .checked=${i} @calciteSwitchChange=${({ currentTarget: n }) => {
       const a = n.checked ? "junction-edge-to-connectivity" : "junction-edge-from-connectivity";
       this.associationType = a;
-    }}></calcite-switch>${e.associations.toSide}</calcite-label></calcite-label>`);
+    }}></calcite-switch>${e.toSide}</calcite-label></calcite-label>`);
   }
   #d() {
     const { association: e, associationType: t, sourceFeature: i, targetFeature: n } = this;
@@ -139,7 +139,7 @@ class k extends y {
   }
   #u() {
     const { _messages: e, percentAlong: t } = this;
-    return l("midspan-edge", c`<calcite-label>${e.associations.midspanLocation}<calcite-input-number max=100 min=0 number-button-type=vertical suffix-text=% .value=${`${t}`} @calciteInputNumberInput=${({ currentTarget: i }) => {
+    return l("midspan-edge", c`<calcite-label>${e.midspanLocation}<calcite-input-number max=100 min=0 number-button-type=vertical suffix-text=% .value=${`${t}`} @calciteInputNumberInput=${({ currentTarget: i }) => {
       const n = Number.parseFloat(i.value);
       Number.isNaN(n) || (this.percentAlong = n);
     }}></calcite-input-number></calcite-label>`);
@@ -167,5 +167,5 @@ class k extends y {
 }
 h("arcgis-feature-form-utility-network-association-settings", k);
 export {
-  k as FeatureFormUtilityNetworkAssociationSettings
+  k as ArcgisFeatureFormUtilityNetworkAssociationSettings
 };