@arcgis/map-components 5.2.0-next.75 → 5.2.0-next.77

package/dist/components/arcgis-legend-classic-view/customElement.js

@@ -1,11 +1,28 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as n } from "../../chunks/runtime.js";
-import { css as c, html as a } from "lit";
-import { LitElement as d, safeClassMap as o } from "@arcgis/lumina";
+import { c as m } from "../../chunks/runtime.js";
+import { css as y, html as a } from "lit";
+import { LitElement as p, safeClassMap as d } from "@arcgis/lumina";
 import { classes as g } from "@arcgis/toolkit/dom";
-import { H as m } from "../../chunks/heading.js";
-const h = c`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}:host{display:block}.layers{display:flex;flex-direction:column;gap:var(--arcgis-internal-legend-layer-gap)}.layers>.layer{position:relative}.layers>.layer:not(:last-child):after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--arcgis-internal-legend-layer-gap) / -2);border-bottom:1px solid var(--calcite-color-border-2)}.layers>.layer:last-child{padding-bottom:var(--arcgis-internal-legend-layer-gap)}.layer>.esri-widget__heading{margin:var(--arcgis-internal-legend-heading-margin)}.no-legend{padding:var(--calcite-spacing-sm) var(--calcite-spacing-md)}.layer{padding:var(--arcgis-internal-legend-layer-padding);word-wrap:break-word}.layer-elements{margin-left:var(--calcite-spacing-sm);display:flex;flex-direction:column;gap:var(--arcgis-internal-legend-layer-element-gap);overflow:auto}.layer-children{display:flex;flex-direction:column;gap:var(--arcgis-internal-legend-layer-gap)}.layer-children>.layer{position:relative}.layer-children>.layer:not(:last-child):after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--arcgis-internal-legend-layer-gap) / -2);border-bottom:1px solid var(--calcite-color-border-2)}.layer-child{margin-left:var(--calcite-spacing-sm);padding:0}:dir(rtl) .layer-elements,:dir(rtl) .layer-child{margin-right:var(--calcite-spacing-sm);margin-left:0;overflow:auto}`;
-class y extends d {
+import { H as f } from "../../chunks/heading.js";
+import { g as v } from "../../chunks/titleUtils.js";
+const u = y`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}:host{display:block;padding:var(--arcgis-internal-padding)}.layers{display:flex;flex-direction:column;gap:var(--arcgis-internal-legend-layer-gap)}.layers>.layer{position:relative}.layers>.layer:not(:last-child):after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--arcgis-internal-legend-layer-gap) / -2);border-bottom:1px solid var(--calcite-color-border-2)}.layer>.esri-widget__heading{margin:var(--arcgis-internal-legend-heading-margin);font-size:var(--calcite-font-size-md);font-weight:var(--calcite-font-weight-semibold)}.layer{word-wrap:break-word}.layer-elements{display:flex;flex-direction:column;gap:var(--arcgis-internal-legend-layer-element-gap);overflow:auto}.layer-children{display:flex;flex-direction:column;gap:var(--arcgis-internal-legend-layer-gap)}.layer-children>.layer{margin-inline-start:var(--arcgis-internal-legend-layer-padding);position:relative}.layer-children>.layer:not(:last-child):after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--arcgis-internal-legend-layer-gap) / -2);border-bottom:1px solid var(--calcite-color-border-2)}.layer-children.layer-children-compact>.layer.layer-child-inline-title{margin-inline-start:0}.layer-children.layer-children-compact>.layer:not(:last-child):after{content:none}.layer-children.layer-children-compact{gap:var(--calcite-space-2xs)}.layer-child{padding:0}.layer-child-title{font-weight:var(--calcite-font-weight-medium)}`;
+function w(r) {
+  return "type" in r && !!r.type;
+}
+function h(r, e) {
+  const t = r.legendElements?.filter(Boolean);
+  if (!r.parent || !r.title || t?.length !== 1)
+    return;
+  const [i] = t;
+  if (i.type !== "symbol-table" || i.infos.length !== 1)
+    return;
+  const [l] = i.infos;
+  if (!l || w(l))
+    return;
+  const n = "preview" in l && !!l.preview || "src" in l && !!l.src, s = "label" in l ? v(e, l.label, !1) : "";
+  return n && !s ? r.title ?? void 0 : void 0;
+}
+class _ extends p {
   constructor() {
     super(...arguments), this.headingLevel = 3, this.type = "classic";
   }
@@ -13,34 +30,40 @@ class y extends d {
     this.properties = { activeLayerInfos: 0, headingLevel: 9, type: 32, messages: 0 };
   }
   static {
-    this.styles = h;
+    this.styles = u;
   }
   render() {
-    const r = this.activeLayerInfos?.toArray().map((l) => this._renderLegendForLayer(l)).filter(Boolean);
-    return r?.length ? a`<section class="layers">${r}</section>` : a`<div class="no-legend">${this.messages.noLegend}</div>`;
+    const t = this.activeLayerInfos?.toArray().map((i) => this._renderLegendForLayer(i)).filter(Boolean);
+    return t?.length ? a`<section class="layers">${t}</section>` : a`<div class="no-legend">${this.messages.noLegend}</div>`;
   }
   _renderLegendForLayer(e) {
     if (!e.ready)
       return null;
-    const r = e.title ? m({
+    const t = h(e, this.messages), i = e.title && !t ? f({
       level: this.headingLevel,
+      class: e.parent ? "layer-child-title" : void 0,
       children: e.title
     }) : null;
     if (e.children.length) {
-      const l = e.children.toArray().map((i) => this._renderLegendForLayer(i));
-      return a`<section class="layer">${r}<div class="layer-children">${l}</div></section>`;
+      const l = e.children.toArray(), n = l.length > 0 && l.every((o) => !!h(o, this.messages)), s = l.map((o) => this._renderLegendForLayer(o)), c = g("layer-children", {
+        "layer-children-compact": n
+      });
+      return a`<section class="layer">${i}<div class=${d(c)}>${s}</div></section>`;
     }
-    return this._renderLegendElementsForLayer(e, r);
+    return this._renderLegendElementsForLayer(e, i, t);
   }
-  _renderLegendElementsForLayer(e, r) {
+  _renderLegendElementsForLayer(e, t, i) {
     const l = e.legendElements?.filter(Boolean);
     if (!l?.length)
       return null;
-    const i = l.map((s) => a`<arcgis-legend-classic-element .cssEffectFilter=${e.cssEffectFilter ?? void 0} .layer=${e.layer} .legendElement=${s} .messages=${this.messages}></arcgis-legend-classic-element>`), t = { "layer-child": !!e.parent };
-    return a`<section class=${o(g("layer", t))}>${r}<div class="layer-elements">${i}</div></section>`;
+    const n = l.map((c) => a`<arcgis-legend-classic-element .cssEffectFilter=${e.cssEffectFilter ?? void 0} .inlineLayerTitle=${i} .layer=${e.layer} .legendElement=${c} .messages=${this.messages}></arcgis-legend-classic-element>`), s = {
+      "layer-child": !!e.parent,
+      "layer-child-inline-title": !!i
+    };
+    return a`<section class=${d(g("layer", s))}>${t}<div class="layer-elements">${n}</div></section>`;
   }
 }
-n("arcgis-legend-classic-view", y);
+m("arcgis-legend-classic-view", _);
 export {
-  y as LegendClassicView
+  _ as LegendClassicView
 };

package/dist/components/arcgis-legend-relationship-ramp/customElement.js

@@ -2,11 +2,11 @@
 import { c as F } from "../../chunks/runtime.js";
 import { css as P, html as b, svg as X } from "lit";
 import { getBoundingBox as j, computeBBox as I, getTransformMatrix as A } from "@arcgis/core/applications/Components/svgUtils.js";
-import { LitElement as U, safeStyleMap as h, safeClassMap as c, nothing as r } from "@arcgis/lumina";
+import { LitElement as U, safeStyleMap as h, safeClassMap as c, nothing as l } from "@arcgis/lumina";
 import { useDirection as N } from "@arcgis/lumina/controllers";
 import { classes as p } from "@arcgis/toolkit/dom";
 import { g as T, a as G, b as J, c as K } from "../../chunks/svgUtils.js";
-const O = P`.diamond-container{display:flex;font-size:var(--calcite-font-size-sm)}.diamond-left-column{align-self:center;padding-right:5px;max-width:85px;text-align:right}.diamond-right-column{align-self:center;padding-left:5px;max-width:85px;text-align:left}.diamond-middle-column{display:flex;flex-direction:column;text-align:center}.diamond-middle-column-label{align-self:center;max-width:85px}.diamond-middle-column-ramp{width:85px;height:85px}.square-table{display:table;font-size:var(--calcite-font-size-sm)}.square-table-row{display:table-row}.square-table-cell{display:table-cell}.square-table-label{max-width:95px}.square-table-label-left-bottom{vertical-align:bottom;text-align:left}.square-table-label-right-bottom{vertical-align:bottom;text-align:right}.square-table-label-left-top{vertical-align:top;text-align:left}.square-table-label-right-top{vertical-align:top;text-align:right}`, Q = "http://www.w3.org/2000/svg";
+const O = P`.diamond-container{display:flex;font-size:var(--calcite-font-size-sm)}.diamond-left-column{align-self:center;padding-inline-end:5px;max-width:85px;text-align:right}.diamond-right-column{align-self:center;padding-inline-start:5px;max-width:85px;text-align:left}.diamond-middle-column{display:flex;flex-direction:column;text-align:center}.diamond-middle-column-label{align-self:center;max-width:85px}.diamond-middle-column-ramp{width:85px;height:85px}.square-table{display:table;font-size:var(--calcite-font-size-sm)}.square-table-row{display:table-row}.square-table-cell{display:table-cell}.square-table-label{max-width:95px}.square-table-label-left-bottom{vertical-align:bottom;text-align:left}.square-table-label-right-bottom{vertical-align:bottom;text-align:right}.square-table-label-left-top{vertical-align:top;text-align:left}.square-table-label-right-top{vertical-align:top;text-align:right}`, Q = "http://www.w3.org/2000/svg";
 class V extends U {
   constructor() {
     super(...arguments), this._direction = N(), this.legendElement = null;
@@ -17,12 +17,12 @@ class V extends U {
   static {
     this.styles = O;
   }
-  _getLineMarkers(n, l) {
+  _getLineMarkers(n, r) {
     const e = "arrowStart", s = "arrowEnd", i = n === "left", t = {
       markerStart: null,
       markerEnd: null
     };
-    switch (l) {
+    switch (r) {
       case "HL":
         i ? t.markerStart = `url(#${s})` : t.markerEnd = `url(#${e})`;
         break;
@@ -39,11 +39,11 @@ class V extends U {
     return t;
   }
   render() {
-    const n = this.legendElement, { focus: l, labels: e } = n, s = !!l, i = this._renderRamp(n), t = { justifyContent: "center" }, a = this._direction === "rtl";
+    const n = this.legendElement, { focus: r, labels: e } = n, s = !!r, i = this._renderRamp(n), t = { justifyContent: "center" }, a = this._direction === "rtl";
     return s ? b`<div class="diamond-container" style=${h(t)}><div class="diamond-left-column">${a ? e.right : e.left}</div><div class="diamond-middle-column"><div class="diamond-middle-column-label">${e.top}</div>${i}<div class="diamond-middle-column-label">${e.bottom}</div></div><div class="diamond-right-column">${a ? e.left : e.right}</div></div>` : b`<div class="square-table"><div class="square-table-row"><div class=${c(p("square-table-cell", "square-table-label", "square-table-label-right-bottom"))}>${a ? e.top : e.left}</div><div class="square-table-cell"></div><div class=${c(p("square-table-cell", "square-table-label", "square-table-label-left-bottom"))}>${a ? e.left : e.top}</div></div><div class="square-table-row"><div class="square-table-cell"></div>${i}<div class="square-table-cell"></div></div><div class="square-table-row"><div class=${c(p("square-table-cell", "square-table-label", "square-table-label-right-top"))}>${a ? e.right : e.bottom}</div><div class="square-table-cell"></div><div class=${c(p("square-table-cell", "square-table-label", "square-table-label-left-top"))}>${a ? e.bottom : e.right}</div></div></div>`;
   }
   _renderRamp(n) {
-    const { focus: l, numClasses: e, colors: s, rotation: i } = n, t = this.opacity, a = this.messages.previewRelationshipRampAriaLabel, o = 60, m = !!l, d = Math.sqrt(o ** 2 + o ** 2) + (m ? 0 : 5), v = [], $ = [], k = [], u = o / e;
+    const { focus: r, numClasses: e, colors: s, rotation: i } = n, t = this.opacity, a = this.messages.previewRelationshipRampAriaLabel, o = 60, m = !!r, d = Math.sqrt(o ** 2 + o ** 2) + (m ? 0 : 5), v = [], $ = [], k = [], u = o / e;
     for (let f = 0; f < e; f++) {
       const H = f * u;
       for (let g = 0; g < e; g++) {
@@ -62,11 +62,11 @@ class V extends U {
     const x = 15, q = 15, w = 10;
     let y;
     m || (y = "margin: -15px -15px -18px -15px");
-    const S = this._getLineMarkers("left", l), E = this._getLineMarkers("right", l), L = I(k), D = A(L, d, d, 0, !1, i, !1), B = A(L, d, d, 0, !1, m ? -45 : null, !1), C = {
+    const S = this._getLineMarkers("left", r), E = this._getLineMarkers("right", r), L = I(k), D = A(L, d, d, 0, !1, i, !1), B = A(L, d, d, 0, !1, m ? -45 : null, !1), C = {
       filter: this.cssEffectFilter,
       opacity: t == null ? "" : `${t}`
     };
-    return b`<div class=${c(m ? "diamond-middle-column-ramp" : "square-table-cell")} style=${h(C)}><svg .ariaLabel=${a} height=${d ?? r} role=img style=${h(y)} width=${d ?? r} xmlns=${Q}>${X`<defs><marker .id=${"arrowStart"} markerHeight=10 markerUnits=strokeWidth markerWidth=10 orient=auto refX=5 refY=5><polyline fill=none points="0,0 5,5 0,10" stroke=#555555 stroke-width=1 /></marker><marker .id=${"arrowEnd"} markerHeight=10 markerUnits=strokeWidth markerWidth=10 orient=auto refX=0 refY=5><polyline fill=none points="5,0 0,5 5,10" stroke=#555555 stroke-width=1 /></marker>${v}</defs><g transform=${D ?? r}>${$}</g><g transform=${B ?? r}><line fill=none marker-end=${S.markerEnd ?? void 0 ?? r} marker-start=${S.markerStart ?? void 0 ?? r} stroke=#555555 stroke-width=1 x1=${-10} x2=${-10} y1=${o - x} y2=${x} /><line fill=none marker-end=${E.markerEnd ?? void 0 ?? r} marker-start=${E.markerStart ?? void 0 ?? r} stroke=#555555 stroke-width=1 x1=${q} x2=${o - q} y1=${o + w} y2=${o + w} /></g>`}</svg></div>`;
+    return b`<div class=${c(m ? "diamond-middle-column-ramp" : "square-table-cell")} style=${h(C)}><svg .ariaLabel=${a} height=${d ?? l} role=img style=${h(y)} width=${d ?? l} xmlns=${Q}>${X`<defs><marker .id=${"arrowStart"} markerHeight=10 markerUnits=strokeWidth markerWidth=10 orient=auto refX=5 refY=5><polyline fill=none points="0,0 5,5 0,10" stroke=#555555 stroke-width=1 /></marker><marker .id=${"arrowEnd"} markerHeight=10 markerUnits=strokeWidth markerWidth=10 orient=auto refX=0 refY=5><polyline fill=none points="5,0 0,5 5,10" stroke=#555555 stroke-width=1 /></marker>${v}</defs><g transform=${D ?? l}>${$}</g><g transform=${B ?? l}><line fill=none marker-end=${S.markerEnd ?? void 0 ?? l} marker-start=${S.markerStart ?? void 0 ?? l} stroke=#555555 stroke-width=1 x1=${-10} x2=${-10} y1=${o - x} y2=${x} /><line fill=none marker-end=${E.markerEnd ?? void 0 ?? l} marker-start=${E.markerStart ?? void 0 ?? l} stroke=#555555 stroke-width=1 x1=${q} x2=${o - q} y1=${o + w} y2=${o + w} /></g>`}</svg></div>`;
   }
 }
 F("arcgis-legend-relationship-ramp", V);

package/dist/components/arcgis-legend-spike-ramp/customElement.js

@@ -1,11 +1,11 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as W } from "../../chunks/runtime.js";
-import { css as X, html as g } from "lit";
+import { css as X, html as v } from "lit";
 import { LitElement as Y, safeStyleMap as b } from "@arcgis/lumina";
 import { s as A, g as z, p as k } from "../../chunks/utils2.js";
-const C = X`.spike-ramp-container{display:flex;flex-direction:row;gap:var(--calcite-spacing-sm-plus);margin-left:var(--calcite-spacing-sm)}.spike-ramp-preview-container{display:flex;position:relative;gap:var(--calcite-spacing-sm-plus);border-bottom:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);padding:0 var(--calcite-spacing-xl)}.spike-ramp-preview{display:flex;gap:var(--calcite-spacing-sm-plus);align-items:end}.spike-ramp-symbol-preview{display:flex}.spike-ramp-lines{display:flex;position:absolute;bottom:0}.spike-ramp-labels-container{display:flex;position:relative;top:-5px;flex:1;min-width:120px}.spike-ramp-label{position:relative;padding:0 var(--calcite-spacing-sm);line-height:1em;word-break:break-all;font-size:var(--calcite-font-size-sm)}.spike-ramp-label:before{display:block;position:absolute;top:.25em;right:100%;border-width:3px 4px 3px 0;border-style:solid;border-color:transparent var(--calcite-color-text-1) transparent transparent;width:0;height:0;content:""}`, I = "#ddd", e = window.devicePixelRatio;
+const C = X`.spike-ramp-container{display:flex;flex-direction:row;gap:var(--calcite-space-sm-plus)}.spike-ramp-preview-container{display:flex;position:relative;gap:var(--calcite-space-sm-plus);border-bottom:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);padding-inline-end:var(--calcite-space-xl)}.spike-ramp-preview{display:flex;gap:var(--calcite-space-sm-plus);align-items:end}.spike-ramp-symbol-preview{display:flex}.spike-ramp-lines{display:flex;position:absolute;bottom:0}.spike-ramp-labels-container{display:flex;position:relative;top:-5px;flex:1;min-width:120px}.spike-ramp-label{position:relative;padding:0 var(--calcite-space-sm);line-height:1em;word-break:break-all;font-size:var(--calcite-font-size-sm)}.spike-ramp-label:before{display:block;position:absolute;top:.25em;right:100%;border-width:3px 4px 3px 0;border-style:solid;border-color:transparent var(--calcite-color-text-1) transparent transparent;width:0;height:0;content:""}`, I = "#ddd", e = window.devicePixelRatio;
 function u(m) {
-  return m.infos.filter((r, l) => l % 2 === 0);
+  return m.infos.filter((r, o) => o % 2 === 0);
 }
 function w(m) {
   return !!(m && typeof m == "object");
@@ -21,35 +21,35 @@ class j extends Y {
     this.styles = C;
   }
   render() {
-    return this.legendElement.infos.length !== 5 ? null : g`<div class="spike-ramp-container"><div class="spike-ramp-preview-container">${this._renderSpikeRampLines()}${this._renderSpikeRampPreview()}</div>${this._renderSpikeRampLabels()}</div>`;
+    return this.legendElement.infos.length !== 5 ? null : v`<div class="spike-ramp-container"><div class="spike-ramp-preview-container">${this._renderSpikeRampLines()}${this._renderSpikeRampPreview()}</div>${this._renderSpikeRampLabels()}</div>`;
   }
   _renderSpikeRampPreview() {
-    const r = this.legendElement, [l, o, d] = u(r).map(({ preview: p, label: a }) => {
+    const r = this.legendElement, [o, l, d] = u(r).map(({ preview: p, label: a }) => {
       if (!p)
         return null;
       const i = p.cloneNode(!0);
       return i.classList.add("spike-ramp-symbol-preview"), A(i, z(this.messages, a)), i;
     });
-    return !l || !o || !d ? null : g`<div class="spike-ramp-preview"><div>${d}</div><div>${o}</div><div>${l}</div></div>`;
+    return !o || !l || !d ? null : v`<div class="spike-ramp-preview"><div>${d}</div><div>${l}</div><div>${o}</div></div>`;
   }
   _renderSpikeRampLines() {
-    const r = this.legendElement, [{ width: l, height: o }, { width: d }, { width: p, height: a }] = u(r).map(({ size: v }) => w(v) ? { width: k(v.width), height: k(v.height) } : { width: 0, height: 0 }), i = 10, c = 8, n = l + d + p + i * 3, h = o, s = document.createElement("canvas");
+    const r = this.legendElement, [{ width: o, height: l }, { width: d }, { width: p, height: a }] = u(r).map(({ size: g }) => w(g) ? { width: k(g.width), height: k(g.height) } : { width: 0, height: 0 }), i = 10, c = 8, n = o + d + p + i * 3, h = l, s = document.createElement("canvas");
     s.width = (n + i) * e, s.height = h * e, s.style.width = `${s.width / e}px`, s.style.height = `${s.height / e}px`;
     const t = s.getContext("2d");
     t.beginPath();
-    const f = n - (l / 2 + i), x = 0, y = n + c, $ = 0;
+    const f = n - (o / 2 + i), x = 0, y = n + c, $ = 0;
     t.moveTo(f * e, x * e), t.lineTo(y * e, $ * e);
-    const R = (n - c) / 2, E = (o - a) / 2, S = n + c, L = (o - a) / 2;
+    const R = (n - c) / 2, E = (l - a) / 2, S = n + c, L = (l - a) / 2;
     t.moveTo(R * e, E * e), t.lineTo(S * e, L * e);
     const P = p / 2, _ = h - a, H = n + c, T = h - a;
-    return t.moveTo(P * e, _ * e), t.lineTo(H * e, T * e), t.strokeStyle = I, t.lineWidth = 0.5 * e, t.stroke(), g`<div class="spike-ramp-lines">${s}</div>`;
+    return t.moveTo(P * e, _ * e), t.lineTo(H * e, T * e), t.strokeStyle = I, t.lineWidth = 0.5 * e, t.stroke(), v`<div class="spike-ramp-lines">${s}</div>`;
   }
   _renderSpikeRampLabels() {
-    const r = this.legendElement, [{ label: l, height: o }, { label: d }, { label: p, height: a }] = u(r).map(({ label: s, size: t }) => ({
+    const r = this.legendElement, [{ label: o, height: l }, { label: d }, { label: p, height: a }] = u(r).map(({ label: s, size: t }) => ({
       label: s,
       height: w(t) ? k(t.height) : 0
-    })), i = o - a, c = { position: "absolute", top: "0" }, n = { position: "absolute", top: `${i / 2}px` }, h = { position: "absolute", top: `${i}px` };
-    return g`<div class="spike-ramp-labels-container"><div class="spike-ramp-label" style=${b(c)}>${l}</div><div class="spike-ramp-label" style=${b(n)}>${d}</div><div class="spike-ramp-label" style=${b(h)}>${p}</div></div>`;
+    })), i = l - a, c = { position: "absolute", top: "0" }, n = { position: "absolute", top: `${i / 2}px` }, h = { position: "absolute", top: `${i}px` };
+    return v`<div class="spike-ramp-labels-container"><div class="spike-ramp-label" style=${b(c)}>${o}</div><div class="spike-ramp-label" style=${b(n)}>${d}</div><div class="spike-ramp-label" style=${b(h)}>${p}</div></div>`;
   }
 }
 W("arcgis-legend-spike-ramp", j);

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

@@ -959,6 +959,7 @@ export abstract class ArcgisScene extends LitElement {
    *
    * @param hitTarget
    * @param options
+   * @see [Sample - Hit test by screen rectangle in 3D](https://developers.arcgis.com/javascript/latest/sample-code/scene-hittest-screen-rectangle/)
    */
   hitTest(hitTarget: MouseEvent | ScreenPoint | ScreenRect, options?: HitTestOptions3D): Promise<SceneViewHitTestResult>;
   /**

package/dist/components/arcgis-table-list-next/customElement.d.ts

@@ -4,19 +4,23 @@ import type Layer from "@arcgis/core/layers/Layer.js";
 import type LinkChartView from "@arcgis/core/views/LinkChartView.js";
 import type MapView from "@arcgis/core/views/MapView.js";
 import type SceneView from "@arcgis/core/views/SceneView.js";
-import type TableListViewModel from "@arcgis/core/widgets/TableList/TableListViewModel.js";
-import type TableListListItem from "@arcgis/core/widgets/TableList/ListItem.js";
+import type TableItemCollection from "@arcgis/core/layers/list/TableItemCollection.js";
+import type TableItem from "@arcgis/core/layers/list/TableItem.js";
 import type WebMap from "@arcgis/core/WebMap.js";
 import type WebScene from "@arcgis/core/WebScene.js";
 import type Sublayer from "@arcgis/core/layers/support/Sublayer.js";
-import type { TableListViewModelEvents } from "@arcgis/core/widgets/TableList/TableListViewModel.js";
+import type { TableItemCollectionEvents, TableItemModifier } from "@arcgis/core/layers/list/TableItemCollection.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisReferenceElement, HeadingLevel, IconName } from "../types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
-import type { ListItemModifier } from "@arcgis/core/widgets/TableList/types.js";
 import type { List as List } from "@esri/calcite-components/components/calcite-list";
 import type { ReadonlyCollection } from "@arcgis/core/core/Collection.js";
 
+export type TableListOptions = Partial<Pick<ArcgisTableListNext, "collapsed" | "dragEnabled" | "filterPlaceholder" | "filterText" | "headingLevel" | "hideStatusIndicators" | "icon" | "label" | "minFilterItems" | "selectionMode" | "showErrors" | "showFilter" | "showTemporaryTableIndicators">>
+  & {
+  listItemCreatedFunction?: TableItemCollection["listItemCreatedFunction"];
+};
+
 /**
  * The Table List (next) component provides a way to display a list of tables associated with a map or table collection.
  * It is the direct component migration of the TableList widget and is provided early for testing and feedback.
@@ -108,7 +112,7 @@ export abstract class ArcgisTableListNext extends LitElement {
   /** @internal */
   accessor listItemCanReceiveFunction: CanSortFunction | undefined;
   /** Specifies a function that accesses each list item as it is created. */
-  accessor listItemCreatedFunction: ListItemModifier | null | undefined;
+  accessor listItemCreatedFunction: TableItemModifier | null | undefined;
   /**
    * Specifies whether to ignore the [listMode](https://developers.arcgis.com/javascript/latest/references/core/layers/Layer/#listMode) property to display all layers. A common use case for `listModeDisabled` is when you want to use the component to manage and configure a layer's `listMode` value.
    *
@@ -172,7 +176,7 @@ export abstract class ArcgisTableListNext extends LitElement {
    */
   accessor referenceElement: ArcgisReferenceElement | string | undefined;
   /** A collection of selected table list items. */
-  accessor selectedItems: Collection<TableListListItem>;
+  accessor selectedItems: Collection<TableItem>;
   /**
    * Specifies the selection mode.
    *
@@ -216,9 +220,9 @@ export abstract class ArcgisTableListNext extends LitElement {
    */
   accessor showTemporaryTableIndicators: boolean;
   /** The current state of the component. */
-  get state(): TableListViewModel["state"];
+  get state(): TableItemCollection["state"];
   /** The collection of table ListItems displayed within the component. */
-  get tableItems(): Collection<TableListListItem>;
+  get tableItems(): Collection<TableItem>;
   /** A collection of tables to display in the component. */
   accessor tables: ReadonlyCollection<Layer | Sublayer> | null | undefined;
   /**
@@ -241,7 +245,7 @@ export abstract class ArcgisTableListNext extends LitElement {
   /** Emits when table items state changes. */
   readonly arcgisTableItemsChanged: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emitted when an action is triggered on the component. */
-  readonly arcgisTriggerAction: import("@arcgis/lumina").TargetedEvent<this, TableListViewModelEvents["trigger-action"]>;
+  readonly arcgisTriggerAction: import("@arcgis/lumina").TargetedEvent<this, TableItemCollectionEvents["trigger-action"]>;
   readonly "@eventTypes": {
     arcgisClose: ArcgisTableListNext["arcgisClose"]["detail"];
     arcgisFilterChange: ArcgisTableListNext["arcgisFilterChange"]["detail"];
@@ -257,10 +261,10 @@ export abstract class ArcgisTableListNext extends LitElement {
 export type CanSortFunction = (event: CanSortEvent) => boolean;
 
 /** @param item */
-export type FilterPredicate = (item: TableListListItem) => boolean;
+export type FilterPredicate = (item: TableItem) => boolean;
 
 export interface CanSortEvent {
-  selected: null | undefined | TableListListItem;
-  from: null | undefined | TableListListItem;
-  to: null | undefined | TableListListItem;
+  selected: null | undefined | TableItem;
+  from: null | undefined | TableItem;
+  to: null | undefined | TableItem;
 }

package/dist/components/arcgis-table-list-next/customElement.js

@@ -1,11 +1,11 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as C } from "../../chunks/runtime.js";
-import { repeat as M } from "lit/directives/repeat.js";
+import { repeat as $ } from "lit/directives/repeat.js";
 import { keyed as _ } from "lit/directives/keyed.js";
-import $ from "@arcgis/core/core/Collection.js";
+import M from "@arcgis/core/core/Collection.js";
 import { watch as I, on as v } from "@arcgis/core/core/reactiveUtils.js";
-import L from "@arcgis/core/widgets/TableList/TableListViewModel.js";
-import { LitElement as E, createEvent as c, safeClassMap as w, nothing as F } from "@arcgis/lumina";
+import L from "@arcgis/core/layers/list/TableItemCollection.js";
+import { LitElement as E, createEvent as c, safeClassMap as b, nothing as F } from "@arcgis/lumina";
 import { usePropertyChange as T } from "@arcgis/lumina/controllers";
 import { reEmitEvent as D } from "@arcgis/lumina/controllers/accessor";
 import { classes as P } from "@arcgis/toolkit/dom";
@@ -20,7 +20,7 @@ import { A as G } from "../../chunks/layer-list-item.js";
 import { s as O, a as q } from "../../chunks/layer-list-next.js";
 import { c as H } from "../../chunks/css.js";
 import { m as V } from "../../chunks/useViewModel.js";
-const b = H, y = "nested", j = V(L);
+const w = H, y = "nested", j = V(L);
 class z extends E {
   constructor() {
     super(...arguments), this._lastDragDetail = null, this._rootGroupUid = `table-${N()}`, this._rootListRef = U(), this._selectedDragItemLayerUid = null, this.messages = x(), this.viewModel = j(this), this._canMove = ({ dragEl: e, fromEl: t, toEl: i }, s) => {
@@ -35,7 +35,7 @@ class z extends E {
       this._selectedDragItemLayerUid = e;
     }, this._onTriggerAction = (e, t) => {
       this.triggerAction(e, t);
-    }, this.autoDestroyDisabled = !1, this.closed = !1, this.collapsed = !1, this.dragEnabled = !1, this.filterPlaceholder = "", this.filterText = "", this.headingLevel = 2, this.icon = "table", this.listItemCreatedFunction = this.viewModel.listItemCreatedFunction, this.listModeDisabled = this.viewModel.listModeDisabled, this.map = this.viewModel.map, this.minDragEnabledItems = B, this.minFilterItems = R, this.selectedItems = new $(), this.selectionMode = "none", this.tables = this.viewModel.tables, this.showCloseButton = !1, this.showCollapseButton = !1, this.showErrors = !1, this.hideNoFilterResultsNotice = !1, this.hideNoItemsNotice = !1, this.showFilter = !1, this.showHeading = !1, this.hideStatusIndicators = !1, this.showTemporaryTableIndicators = !1, this.arcgisClose = c(), this.arcgisPropertyChange = T()("state"), this.arcgisReady = c(), this.arcgisFilterChange = c(), this.arcgisSelectedItemsChange = c(), this.arcgisTableItemsChanged = c(), this.arcgisTriggerAction = D(() => this.viewModel, "trigger-action");
+    }, this.autoDestroyDisabled = !1, this.closed = !1, this.collapsed = !1, this.dragEnabled = !1, this.filterPlaceholder = "", this.filterText = "", this.headingLevel = 2, this.icon = "table", this.listItemCreatedFunction = this.viewModel.listItemCreatedFunction, this.listModeDisabled = this.viewModel.listModeDisabled, this.map = this.viewModel.map, this.minDragEnabledItems = B, this.minFilterItems = R, this.selectedItems = new M(), this.selectionMode = "none", this.tables = this.viewModel.tables, this.showCloseButton = !1, this.showCollapseButton = !1, this.showErrors = !1, this.hideNoFilterResultsNotice = !1, this.hideNoItemsNotice = !1, this.showFilter = !1, this.showHeading = !1, this.hideStatusIndicators = !1, this.showTemporaryTableIndicators = !1, this.arcgisClose = c(), this.arcgisPropertyChange = T()("state"), this.arcgisReady = c(), this.arcgisFilterChange = c(), this.arcgisSelectedItemsChange = c(), this.arcgisTableItemsChanged = c(), this.arcgisTriggerAction = D(() => this.viewModel, "trigger-action");
   }
   static {
     this.properties = { _visibleItems: 16, _openedPanelItems: 16, _dragEnabled: 16, _filterEnabled: 16, view: 0, autoDestroyDisabled: 5, closed: 5, referenceElement: 1, collapsed: 7, dragEnabled: 5, filterPlaceholder: 1, filterPredicate: 0, filterText: 1, headingLevel: 9, icon: 1, label: 1, listItemCanGiveFunction: 0, listItemCanReceiveFunction: 0, listItemCreatedFunction: 0, listModeDisabled: 5, map: 0, minDragEnabledItems: 9, minFilterItems: 9, selectedItems: 0, selectionMode: 1, state: 32, tableItems: 32, tables: 0, showCloseButton: 5, showCollapseButton: 5, showErrors: 5, hideNoFilterResultsNotice: 5, hideNoItemsNotice: 5, showFilter: 5, showHeading: 5, hideStatusIndicators: 5, showTemporaryTableIndicators: 5, messageOverrides: 0 };
@@ -147,16 +147,16 @@ class z extends E {
       [u.hidden]: e === "loading",
       [u.disabled]: e === "disabled"
     };
-    return o`<div class=${w(P(u.widget, u.panel, t))}>${this._renderItems()}</div>`;
+    return o`<div class=${b(P(u.widget, u.panel, t))}>${this._renderItems()}</div>`;
   }
   _renderNoItemsMessage() {
     return o`<div slot=message>${this.messages.noItemsToDisplay}</div>`;
   }
   _renderNoItems() {
-    return this.hideNoItemsNotice ? null : o`<div class=${w(b.itemMessage)}><calcite-notice icon=information kind=info open width=full>${this._renderNoItemsMessage()}</calcite-notice></div>`;
+    return this.hideNoItemsNotice ? null : o`<div class=${b(w.itemMessage)}><calcite-notice icon=information kind=info open width=full>${this._renderNoItemsMessage()}</calcite-notice></div>`;
   }
   _renderPanelFlowItems() {
-    return M(this._openedPanelItems.toArray(), (e) => e.uid, (e, t) => {
+    return $(this._openedPanelItems.toArray(), (e) => e.uid, (e, t) => {
       const { panel: i, title: s } = e, l = () => this._handlePanelFlowItemBack(i);
       return o`<calcite-flow-item .description=${s} .heading=${i.title} .headingLevel=${this.headingLevel} .selected=${t === this._openedPanelItems.length - 1} @calciteFlowItemBack=${(a) => {
         a.preventDefault(), l();
@@ -167,13 +167,13 @@ class z extends E {
     const { collapsed: e, _visibleItems: t, _filterEnabled: i, _rootGroupUid: s, showCloseButton: l, showCollapseButton: a, showHeading: h, _dragEnabled: d, selectionMode: n, filterText: m, filterPlaceholder: f, messages: g } = this, p = [
       o`<calcite-flow-item .closable=${l} .closed=${this.closed} .collapsed=${e} .collapsible=${a} .heading=${h ? this.label ?? g.componentLabel : void 0} .headingLevel=${this.headingLevel} .selected=${!this._openedPanelItems.length} @calciteFlowItemClose=${() => this._handleFlowItemClose()}>${t?.length ? o`<calcite-list .canPull=${(r) => this._canMove(r, "pull")} .canPut=${(r) => this._canMove(r, "put")} data-layer-type=${s ?? F} .displayMode=${y} .dragEnabled=${d} .filterEnabled=${i} .filterPlaceholder=${f} .filterProps=${S} .filterText=${i ? m : ""} .group=${s} .label=${this.label ?? g.componentLabel} selection-appearance=border .selectionMode=${n} @calciteListChange=${this._handleCalciteListChange} @calciteListDragEnd=${(r) => this._handleCalciteListDragEnd(r.detail)} @calciteListFilter=${(r) => {
         this.filterText = r.currentTarget?.filterText ?? "", this.arcgisFilterChange.emit();
-      }} @calciteListOrderChange=${(r) => this._onCalciteListOrderChange(r.detail)} ${A(this._rootListRef)}>${t.toArray().map((r) => this._renderItem(r))}${i && !this.hideNoFilterResultsNotice ? o`<div class=${w(b.filterNoResults)} slot=filter-no-results><calcite-notice kind=info open width=full>${this._renderNoItemsMessage()}</calcite-notice></div>` : null}</calcite-list>` : this._renderNoItems()}</calcite-flow-item>`,
+      }} @calciteListOrderChange=${(r) => this._onCalciteListOrderChange(r.detail)} ${A(this._rootListRef)}>${t.toArray().map((r) => this._renderItem(r))}${i && !this.hideNoFilterResultsNotice ? o`<div class=${b(w.filterNoResults)} slot=filter-no-results><calcite-notice kind=info open width=full>${this._renderNoItemsMessage()}</calcite-notice></div>` : null}</calcite-list>` : this._renderNoItems()}</calcite-flow-item>`,
       this._renderPanelFlowItems()
     ];
     return this.closed ? null : _("root-flow", o`<calcite-flow>${p}</calcite-flow>`);
   }
   _renderItem(e) {
-    return _(e.uid, G({ canMove: this._canMove, css: b, displayMode: y, dragEnabled: this.dragEnabled, hideStatusIndicators: this.hideStatusIndicators, item: e, itemType: "table", listModeDisabled: this.viewModel.listModeDisabled, messages: this.messages, rootGroupUid: this._rootGroupUid, selectedDragItemLayerUid: this._selectedDragItemLayerUid, selectedItems: this.selectedItems, selectionMode: this.selectionMode, showErrors: this.showErrors, showFilter: this.showFilter, showTemporaryTableIndicators: this.showTemporaryTableIndicators, handleAction: (t, i) => this._onTriggerAction(t, i), handlePanelOpen: this._onPanelOpen, handleSelectedDragItemLayerUidChange: this._onSelectedDragItemLayerUidChange, view: this.view }));
+    return _(e.uid, G({ canMove: this._canMove, css: w, displayMode: y, dragEnabled: this.dragEnabled, hideStatusIndicators: this.hideStatusIndicators, item: e, itemType: "table", listModeDisabled: this.viewModel.listModeDisabled, messages: this.messages, rootGroupUid: this._rootGroupUid, selectedDragItemLayerUid: this._selectedDragItemLayerUid, selectedItems: this.selectedItems, selectionMode: this.selectionMode, showErrors: this.showErrors, showFilter: this.showFilter, showTemporaryTableIndicators: this.showTemporaryTableIndicators, handleAction: (t, i) => this._onTriggerAction(t, i), handlePanelOpen: this._onPanelOpen, handleSelectedDragItemLayerUidChange: this._onSelectedDragItemLayerUidChange, view: this.view }));
   }
 }
 C("arcgis-table-list-next", z);

package/dist/components/arcgis-utility-network-aggregated-geometry-result-item/customElement.d.ts

@@ -0,0 +1,105 @@
+/// <reference path="../../index.d.ts" />
+import type Color from "@arcgis/core/Color.js";
+import type Graphic from "@arcgis/core/Graphic.js";
+import type GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js";
+import type TraceResult from "@arcgis/core/rest/networks/support/TraceResult.js";
+import type MapView from "@arcgis/core/views/MapView.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+/**
+ * * Trace result item for displaying [aggregated geometry](https://developers.arcgis.com/javascript/latest/references/core/rest/networks/support/TraceResult/#aggregatedGeometry) results from a trace.
+ *
+ * @internal
+ * @since 5.2
+ * @see [Result types](https://doc.esri.com/en/arcgis-pro/latest/help/data/utility-network/configure-a-trace.html#DA5)
+ */
+export abstract class ArcgisUtilityNetworkAggregatedGeometryResultItem extends LitElement {
+  /** @internal */
+  protected _messages: {
+      headings: { setColor: string; };
+      labels: {
+          aggregatedGeometryGraphicsColor: string;
+          showGraphicsToggle: string;
+      };
+      showGraphics: string;
+  } & T9nMeta<{
+      headings: { setColor: string; };
+      labels: {
+          aggregatedGeometryGraphicsColor: string;
+          showGraphicsToggle: string;
+      };
+      showGraphics: string;
+  }>;
+  /**
+   * 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-utility-network-aggregated-geometry-result-item/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * The size of the aggregated geometry graphics to render, in points.
+   *
+   * @default 12
+   */
+  accessor defaultSelectionSize: number;
+  /** The graphics which represent the aggregated geometry results from the trace. */
+  get geometryGraphics(): Graphic[];
+  /**
+   * The color used for the aggregated geometry graphics.
+   * Default value is #FFFF00.
+   */
+  accessor graphicsColor: Color;
+  /**
+   * The layer used to render the graphics which represent the aggregated geometry result.
+   * If this property is not specified, a new layer will be created on the map.
+   */
+  accessor graphicsLayer: GraphicsLayer | undefined;
+  /** The heading of the result item. */
+  accessor heading: string | undefined;
+  /**
+   * Whether or not the aggregated geometry graphics are hidden on the map.
+   *
+   * @default false
+   */
+  accessor hideGraphics: boolean;
+  /**
+   * The trace result containing the aggregated geometry result to render graphics for.
+   *
+   * @required
+   */
+  accessor traceResult: TraceResult | undefined;
+  /**
+   * 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-utility-network-aggregated-geometry-result-item component will be associated with a map or scene component rather than using the `view` property.
+   *
+   * @required
+   */
+  accessor view: MapView | undefined;
+  /**
+   * Removes the [layer](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-aggregated-geometry-result-item/#graphicsLayer)
+   * containing the aggregated geometry graphics from the map.
+   */
+  clearResult(): void;
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "defaultSelectionSize" | "geometryGraphics" | "hideGraphics" | "graphicsColor"; }>;
+  /**
+   * Fires when the component finishes processing the aggrgegated geometry results.
+   *
+   * If the component has a valid trace result with aggregated geometry results, this fires
+   * when the aggregated geometry graphics have been added to the map.
+   *
+   * If the component does not have a valid map or trace result, this fires when the
+   * component has finished loading.
+   */
+  readonly arcgisResultReady: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    arcgisPropertyChange: ArcgisUtilityNetworkAggregatedGeometryResultItem["arcgisPropertyChange"]["detail"];
+    arcgisResultReady: ArcgisUtilityNetworkAggregatedGeometryResultItem["arcgisResultReady"]["detail"];
+  };
+}

package/dist/components/arcgis-utility-network-aggregated-geometry-result-item/customElement.js

@@ -0,0 +1,125 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as p } from "../../chunks/runtime.js";
+import l from "@arcgis/core/Color.js";
+import m from "@arcgis/core/Graphic.js";
+import d from "@arcgis/core/layers/GraphicsLayer.js";
+import n from "@arcgis/core/symbols/SimpleFillSymbol.js";
+import y from "@arcgis/core/symbols/SimpleLineSymbol.js";
+import u from "@arcgis/core/symbols/SimpleMarkerSymbol.js";
+import { LitElement as f, createEvent as w, nothing as v } from "@arcgis/lumina";
+import { usePropertyChange as G, bypassReadOnly as b } from "@arcgis/lumina/controllers";
+import { log as s, composeMissingPropertyMessage as o } from "@arcgis/toolkit/log";
+import { css as R, html as g } from "lit";
+import { createRef as L, ref as C } from "lit/directives/ref.js";
+import { u as S } from "../../chunks/useT9n.js";
+import { a as h, i as $ } from "../../chunks/layer-utils.js";
+const k = R`.aggregated-geometry-container{display:flex;justify-content:space-between;margin:0 var(--calcite-space-md) var(--calcite-space-md)}.geometry-heading{margin:var(--calcite-space-md);font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size);color:var(--calcite-color-text-1)}`;
+class z extends f {
+  constructor() {
+    super(...arguments), this._messages = S({ blocking: !0 }), this.#t = "arcgis-utility-network-aggregated-geometry-result-item-graphics", this.#e = L(), this.defaultSelectionSize = 12, this.geometryGraphics = [], this.hideGraphics = !1, this.graphicsColor = new l([255, 255, 0, 0.6]), this.autoDestroyDisabled = !1, this.arcgisPropertyChange = G()("defaultSelectionSize", "geometryGraphics", "hideGraphics", "graphicsColor"), this.arcgisResultReady = w();
+  }
+  static {
+    this.properties = { defaultSelectionSize: 9, heading: 1, traceResult: 0, geometryGraphics: 32, hideGraphics: 5, graphicsColor: 0, graphicsLayer: 0, view: 0, autoDestroyDisabled: 5 };
+  }
+  static {
+    this.styles = k;
+  }
+  #t;
+  #e;
+  clearResult() {
+    this.view?.map && this.graphicsLayer && this.view.map.remove(this.graphicsLayer);
+  }
+  async destroy() {
+    this.clearResult(), await this.manager.destroy();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.view && this.graphicsLayer && (h(this.view, this.graphicsLayer), this.arcgisResultReady.emit());
+  }
+  load() {
+    if (!this.traceResult?.aggregatedGeometry || !this.view?.map) {
+      this.arcgisResultReady.emit();
+      return;
+    }
+    this.graphicsLayer || this.#a(this.view);
+  }
+  willUpdate(e) {
+    if (e.has("hideGraphics") && this.#s(), e.has("graphicsColor") && this.#h(), e.has("traceResult") && (this.graphicsLayer?.removeAll(), this.traceResult?.aggregatedGeometry && this.view && (this.#i(this.traceResult.aggregatedGeometry), this.arcgisResultReady.emit())), e.has("view")) {
+      const t = e.get("view");
+      t?.map && this.graphicsLayer && (t.map.remove(this.graphicsLayer), this.traceResult?.aggregatedGeometry && this.view && (h(this.view, this.graphicsLayer), this.#i(this.traceResult.aggregatedGeometry), this.arcgisResultReady.emit()));
+    }
+  }
+  loaded() {
+    this.traceResult ? this.traceResult.aggregatedGeometry || s("error", this, o("The property `traceResult` was provided, but `traceResult.aggregatedGeometry` is null. Cannot draw aggregated geometry.")) : s("error", this, o("traceResult")), this.view ? this.view.map || s("error", this, o("The property `view` was provided, but `view.map` is null. Cannot draw aggregated geometry.")) : s("error", this, o("view"));
+  }
+  #i(e) {
+    const { line: t, multipoint: i, polygon: r } = e;
+    b(() => {
+      this.geometryGraphics = [t, i, r].filter((a) => a != null).map((a) => this.#o(a));
+    }), this.graphicsLayer?.addMany(this.geometryGraphics);
+  }
+  #a(e) {
+    const t = this.#t, i = e.map?.findLayerById(t);
+    if (i && $(i)) {
+      this.graphicsLayer = i;
+      return;
+    }
+    this.graphicsLayer = new d({
+      id: t,
+      listMode: "hide",
+      title: t
+    }), h(e, this.graphicsLayer);
+  }
+  #s() {
+    this.hideGraphics ? (this.graphicsLayer?.removeAll(), this.#e.value?.open && (this.#e.value.open = !1)) : this.graphicsLayer?.addMany(this.geometryGraphics);
+  }
+  #o(e) {
+    return new m({
+      geometry: e,
+      symbol: this.#r(e)
+    });
+  }
+  #r(e) {
+    const { defaultSelectionSize: t, graphicsColor: i } = this;
+    switch (e.type) {
+      case "multipoint":
+        return new u({
+          color: i,
+          size: t,
+          outline: {
+            color: i,
+            width: 0
+          }
+        });
+      case "polygon":
+        return new n({
+          color: i,
+          outline: {
+            color: i,
+            width: t
+          }
+        });
+      case "polyline":
+        return new y({
+          color: i,
+          width: t
+        });
+    }
+  }
+  #h() {
+    this.graphicsLayer?.graphics.forEach((e) => {
+      const t = e.geometry;
+      e.symbol = this.#r(t);
+    });
+  }
+  render() {
+    const { graphicsColor: e, heading: t, hideGraphics: i, _messages: r } = this;
+    return g`${t && g`<div class="geometry-heading">${t}</div>` || ""}<div class="aggregated-geometry-container"><calcite-switch .checked=${!i} .label=${r.labels.showGraphicsToggle} label-text-end=${r.showGraphics ?? v} @calciteSwitchChange=${() => this.hideGraphics = !this.hideGraphics}></calcite-switch><calcite-swatch .color=${e.toCss()} .disabled=${i} id=geometry-color-swatch .label=${r.labels.aggregatedGeometryGraphicsColor}></calcite-swatch><calcite-popover closable .heading=${r.headings.setColor} .label=${r.headings.setColor} reference-element=geometry-color-swatch ${C(this.#e)}><calcite-color-picker alpha-channel channels-disabled clearable .disabled=${i} hex-disabled saved-disabled .value=${e.toCss()} @calciteColorPickerChange=${(a) => {
+      const c = a.target.value;
+      c && (this.graphicsColor = new l(c));
+    }}></calcite-color-picker></calcite-popover></div>`;
+  }
+}
+p("arcgis-utility-network-aggregated-geometry-result-item", z);
+export {
+  z as ArcgisUtilityNetworkAggregatedGeometryResultItem
+};