@arcgis/map-components 5.2.0-next.11 → 5.2.0-next.111

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 s } 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, var(--calcite-spacing-md) var(--calcite-spacing-lg))}.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{color:var(--calcite-color-text-1);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>.esri-widget__heading.layer-child-title{color:var(--calcite-color-text-1);font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size)}`;
+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, a = "label" in l ? v(e, l.label, !1) : "";
+  return n && !a ? 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 ? s`<section class="layers">${t}</section>` : s`<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)), a = l.map((o) => this._renderLegendForLayer(o)), c = g("layer-children", {
+        "layer-children-compact": n
+      });
+      return s`<section class="layer">${i}<div class=${d(c)}>${a}</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) => s`<arcgis-legend-classic-element .cssEffectFilter=${e.cssEffectFilter ?? void 0} .inlineLayerTitle=${i} .layer=${e.layer} .legendElement=${c} .messages=${this.messages}></arcgis-legend-classic-element>`), a = {
+      "layer-child": !!e.parent,
+      "layer-child-inline-title": !!i
+    };
+    return s`<section class=${d(g("layer", a))}>${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,34 +39,34 @@ 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++) {
-        const W = g * u, M = T(s[f][g]), Y = K(null), z = {
+        const W = g * u, M = T(s[f][g]), Y = G(null), z = {
           type: "rect",
           x: W,
           y: H,
           width: u,
           height: u
-        }, R = G(M);
+        }, R = J(M);
         R && v.push(R);
-        const _ = J(z, M.fill, Y, null);
+        const _ = K(z, M.fill, Y, null);
         _ && $.push(_), k.push(j(z));
       }
     }
     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;
+import { s as A, g as z, p as k } from "../../chunks/utils3.js";
+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-line-of-sight/customElement.d.ts

@@ -132,10 +132,19 @@ export abstract class ArcgisLineOfSight extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-line-of-sight auto-destroy-disabled></arcgis-line-of-sight>
+   * ```
+   *
+   * ```js
+   * lineOfSightElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   accessor autoDestroyDisabled: boolean;
   /**
-   * If true, the button that allows the user to continue placing more targets.
+   * If true, the button that allows the user to continue placing more targets will be hidden.
    *
    * @default false
    * @since 5.0
@@ -201,8 +210,8 @@ export abstract class ArcgisLineOfSight extends LitElement {
    */
   get state(): "created" | "creating" | "disabled" | "ready";
   /**
-   * 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-line-of-sight 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-line-of-sight component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: SceneView | undefined;
   /** Clear the current analysis results. After calling this method, the user can set a new observer and targets. */
@@ -214,13 +223,13 @@ export abstract class ArcgisLineOfSight extends LitElement {
   /** Start a new line of sight analysis. */
   start(): Promise<void>;
   /**
-   * Stop the current placing of line of sight analysis. Any lines added this far are kept  in the view.
+   * Stops the current placing of line of sight analysis. Any lines added so far are kept in the view.
    * Users can still interact with existing targets and the observer, but they cannot place new target points.
    */
   stop(): Promise<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: "analysis" | "state"; }>;
-  /** 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: ArcgisLineOfSight["arcgisPropertyChange"]["detail"];

package/dist/components/arcgis-line-of-sight/customElement.js

@@ -40,10 +40,10 @@ u([
 n = u([
   M("esri.components.LineOfSight.LineOfSightViewModel")
 ], n);
-const O = x(n);
-class B extends m {
+const O = n, B = x(O);
+class S extends m {
   constructor() {
-    super(...arguments), this.viewModel = O(this), this._messages = b({ blocking: !0 }), this.view = this.viewModel.view, this.analysis = this.viewModel.analysis, this.autoDestroyDisabled = !1, this.hideContinueButton = !1, this.hideDoneButton = !1, this.hideStartButton = !1, this.hideVisualization = this.viewModel.hideVisualization, this.icon = "line-of-sight", this.arcgisPropertyChange = _()("analysis", "state"), this.arcgisReady = w();
+    super(...arguments), this.viewModel = B(this), this._messages = b({ blocking: !0 }), this.view = this.viewModel.view, this.analysis = this.viewModel.analysis, this.autoDestroyDisabled = !1, this.hideContinueButton = !1, this.hideDoneButton = !1, this.hideStartButton = !1, this.hideVisualization = this.viewModel.hideVisualization, this.icon = "line-of-sight", this.arcgisPropertyChange = _()("analysis", "state"), this.arcgisReady = w();
   }
   static {
     this.properties = { view: 0, analysis: 0, autoDestroyDisabled: 5, hideContinueButton: 5, hideDoneButton: 5, hideStartButton: 5, hideVisualization: 5, icon: 3, label: 1, messageOverrides: 0, referenceElement: 1, state: 32, _supported: 16 };
@@ -94,7 +94,7 @@ class B extends m {
 function d({ className: t, onClick: e, primary: r, disabled: a, children: i }) {
   return o`<calcite-button .appearance=${r ? "solid" : "outline-fill"} class=${h(t)} .disabled=${a} @click=${e}>${i}</calcite-button>`;
 }
-f("arcgis-line-of-sight", B);
+f("arcgis-line-of-sight", S);
 export {
-  B as ArcgisLineOfSight
+  S as ArcgisLineOfSight
 };

package/dist/components/arcgis-link-chart/customElement.d.ts

@@ -34,18 +34,30 @@ import type { ViewPadding } from "@arcgis/core/views/ui/types.js";
 import type { ResizeAlign } from "@arcgis/core/views/2d/types.js";
 import type { SlotGroupRefs } from "../../support/slots.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** _Since 4.34_ Specifies the top padding for the layout. */
+  "--arcgis-layout-overlay-space-top": "*";
+  /** _Since 4.34_ Specifies the bottom padding for the layout. */
+  "--arcgis-layout-overlay-space-bottom": "*";
+  /** _Since 4.34_ Specifies the left padding for the layout. */
+  "--arcgis-layout-overlay-space-left": "*";
+  /** _Since 4.34_ Specifies the right padding for the layout. */
+  "--arcgis-layout-overlay-space-right": "*";
+  /** _Since 5.0_ Specifies the focus outline color for the view. */
+  "--arcgis-view-color-focus": "*";
+  /** _Since 5.1_ Specifies the background color for table rows. */
+  "--arcgis-table-row-background-color": "*";
+  /** _Since 5.1_ Specifies the background color for alternate table rows. */
+  "--arcgis-table-row-alt-background-color": "*";
+}
+}
+
 /**
  * Loads a [WebLinkChart](https://developers.arcgis.com/javascript/latest/references/core/WebLinkChart/) from an [ArcGIS Enterprise portal](https://doc.esri.com/en/arcgis-enterprise/latest/plan/what-is-portal-for-arcgis-.html) into a [LinkChartView](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/).
  *
  * Note: Sign in to access the data in this demo, U/P: `viewer01`/`I68VGU^nMurF`
  *
- * @cssproperty [--arcgis-layout-overlay-space-top] - _Since 4.34_ Specifies the top padding for the layout.
- * @cssproperty [--arcgis-layout-overlay-space-bottom] - _Since 4.34_ Specifies the bottom padding for the layout.
- * @cssproperty [--arcgis-layout-overlay-space-left] - _Since 4.34_ Specifies the left padding for the layout.
- * @cssproperty [--arcgis-layout-overlay-space-right] - _Since 4.34_ Specifies the right padding for the layout.
- * @cssproperty [--arcgis-view-color-focus] - _Since 5.0_ Specifies the focus outline color for the view.
- * @cssproperty [--arcgis-table-row-background-color] - _Since 5.1_ Specifies the background color for table rows.
- * @cssproperty [--arcgis-table-row-alt-background-color] - _Since 5.1_ Specifies the background color for alternate table rows.
  * @slot  - Default slot for adding components to the link chart. User is responsible for positioning the content via CSS.
  * @slot [top-left] - Slot for components positioned in the top-left corner.
  * @slot [top-right] - Slot for components positioned in the top-right corner.
@@ -107,13 +119,15 @@ export abstract class ArcgisLinkChart extends LitElement {
    */
   get attributionItems(): LinkChartView["attributionItems"];
   /**
-   * The light or dark mode used to display the attribution.
-   * By default, the mode is inherited from the [Calcite's mode](https://developers.arcgis.com/calcite-design-system/core-concepts/#modes).
-   * You can override the value to style the attribution alongside the map or scene content.
+   * The display mode used for the attribution. Defaults to null.
+   *
+   * Set this property to "auto" to automatically synchronize the attribution with the nearest [Calcite mode](https://developers.arcgis.com/calcite-design-system/core-concepts/#modes). If no Calcite mode is detected, the attribution defaults to light mode. **The "auto" mode was added in version 5.2.**
+   *
+   * Set this property to "light" or "dark" to explicitly use that mode without synchronization.
    *
    * @since 5.0
    */
-  accessor attributionMode: "dark" | "light" | null | undefined;
+  accessor attributionMode: AttributionMode;
   /**
    * 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
@@ -122,6 +136,15 @@ export abstract class ArcgisLinkChart extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-link-chart auto-destroy-disabled></arcgis-link-chart>
+   * ```
+   *
+   * ```js
+   * linkChartElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   accessor autoDestroyDisabled: boolean;
   /**
@@ -138,7 +161,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    *   }
    * });
    * @example
-   * let view = new MapView({
+   * let view = new LinkChartView({
    *   container: "viewDiv",
    *   map: map,
    *   background: { // autocasts new ColorBackground()
@@ -179,8 +202,8 @@ export abstract class ArcgisLinkChart extends LitElement {
    */
   get canZoomOut(): boolean;
   /**
-   * Represents the view's center point; when setting the center, you may pass a
-   * esri/geometry/Point instance or a string representing
+   * Represents the position of the view's center. The property can be set with
+   * a [Point](https://developers.arcgis.com/javascript/latest/references/core/geometry/Point/) or a string representing
    * a longitude/latitude pair (`"-100.4593, 36.9014"`).
    * Setting the center immediately changes the current view.
    * For animating the view, see this component's goTo() method.
@@ -237,8 +260,8 @@ export abstract class ArcgisLinkChart extends LitElement {
    */
   accessor constraints: MapViewConstraints;
   /**
-   * Indicates whether layer's displayFilter are honored when rendering layers in the view.
-   * If `false`, display filters are ignored and all features are rendered.
+   * Indicates whether a layer's displayFilter is honored when rendering layers in the view.
+   * If `true`, display filters are ignored and all features are rendered.
    *
    * @default false
    */
@@ -325,7 +348,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    * @example
    * // Override the default highlights collection
    *
-   * const view = new MapView({
+   * const view = new LinkChartView({
    *   map: map,
    *   container: "viewDiv",
    *
@@ -351,7 +374,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    */
   accessor highlights: Collection<HighlightOptions>;
   /**
-   * Indication whether the view is being interacted with (for example when panning or by an interactive tool).
+   * Indicates whether the view is being interacted with (for example when panning or by an interactive tool).
    *
    * @default false
    */
@@ -388,7 +411,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    */
   accessor map: WebLinkChart;
   /**
-   * Indication whether the view is being navigated (for example when panning).
+   * Indicates whether the view is being navigated (for example when panning).
    *
    * @default false
    */
@@ -399,7 +422,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    * @since 4.9
    * @example
    * // Disable the gamepad usage, single touch panning, panning momentum and mouse wheel zooming.
-   * const view = new MapView({
+   * const view = new LinkChartView({
    *   container: "viewDiv",
    *   map: new Map({
    *     basemap: "satellite"
@@ -421,8 +444,8 @@ export abstract class ArcgisLinkChart extends LitElement {
    */
   accessor navigation: Navigation;
   /**
-   * Use the padding property to make the [center](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#center),
-   * and [extent](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#extent), etc. work off a
+   * Use the padding property to make the [center](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/#center),
+   * and [extent](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/#extent), etc. work off a
    * subsection of the full view. This is particularly useful when layering UI
    * elements or semi-transparent content on top of portions of the view.
    *
@@ -434,6 +457,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    *
    * By default, the `popup` property is an empty object that allows you to set the popup options. A [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/) instance is automatically created and assigned to the view's [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popup) when the user clicks on the view and [popupEnabled](https://developers.arcgis.com/javascript/latest/references/core/views/PopupView/#popupEnabled) is `true`, when the [openPopup()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#openPopup) method is called, or when some widgets need the popup, such as [Search](https://developers.arcgis.com/javascript/latest/references/core/widgets/Search/). If [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popup) is `null`, the popup instance will not be created.
    *
+   * @deprecated since 5.2, use [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popupElement) instead. Set the [popupComponentEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popupComponentEnabled) property to `true` to enable the popup component.
    * @see [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popupElement)
    * @see [popupDisabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popupDisabled)
    * @see [openPopup()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#openPopup)
@@ -629,7 +653,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    */
   accessor spatialReference: SpatialReference;
   /**
-   * Indication whether the view is animating, being navigated with or resizing.
+   * Indicates whether the view is animating, being navigated with or resizing.
    *
    * @default false
    */
@@ -673,7 +697,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    * });
    *
    * // Create a mapview showing sales for the last week of March 2019 only.
-   * const view = new MapView({
+   * const view = new LinkChartView({
    *   map: map,
    *   container: "viewDiv",
    *   timeExtent: {
@@ -692,7 +716,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    * @see [wikipedia - List of tz database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
    * @example
    * // Date and time will be displayed in Pacific/Auckland (NZ) time zone
-   * const view = new MapView({
+   * const view = new LinkChartView({
    *   map: map,
    *   container: "viewDiv",
    *   timeZone: "Pacific/Auckland"
@@ -732,6 +756,8 @@ export abstract class ArcgisLinkChart extends LitElement {
   destroy(): Promise<void>;
   /**
    * Use this method to query for features at a given screen location. These features come from origins (layers and sublayers) configured with a [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/) and have its [FeatureLayer.popupEnabled](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/#popupEnabled) set. One example could be a custom side panel that displays feature-specific information based on an end user's click location. This method allows a developer to control how the input location is handled, and then subsequently, what to do with the results.
+   * > [!WARNING]
+   * > Using [ScreenRect](https://developers.arcgis.com/javascript/latest/references/core/core/types/#ScreenRect) as the hit target is considered **[beta](https://developers.arcgis.com/javascript/latest/faq/#what-does-the-beta-tag-mean)** functionality.
    *
    * @param hitTarget
    * @param options
@@ -804,7 +830,7 @@ export abstract class ArcgisLinkChart extends LitElement {
   /**
    * Gets the analysis view created for the given analysis object.
    *
-   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#whenAnalysisView)
+   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/#whenAnalysisView)
    *
    * @param analysis
    * @since 4.34
@@ -847,7 +873,7 @@ export abstract class ArcgisLinkChart extends LitElement {
   /**
    * Fires when the view for an analysis is created.
    *
-   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#event-analysis-view-create)
+   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/#event-analysis-view-create)
    *
    * @since 4.34
    */
@@ -855,7 +881,7 @@ export abstract class ArcgisLinkChart extends LitElement {
   /**
    * Fires when an error occurs during the creation of an analysis view after an analysis is added to the view.
    *
-   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#event-analysis-view-create-error)
+   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/#event-analysis-view-create-error)
    *
    * @since 4.34
    */
@@ -863,7 +889,7 @@ export abstract class ArcgisLinkChart extends LitElement {
   /**
    * Fires after an analysis view is destroyed.
    *
-   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#event-analysis-view-destroy)
+   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/#event-analysis-view-destroy)
    *
    * @since 4.34
    */
@@ -964,4 +990,6 @@ export abstract class ArcgisLinkChart extends LitElement {
     arcgisViewReadyError: ArcgisLinkChart["arcgisViewReadyError"]["detail"];
     arcgisViewVerticalTwoFingerDrag: ArcgisLinkChart["arcgisViewVerticalTwoFingerDrag"]["detail"];
   };
-}
+}
+
+export type AttributionMode = LinkChartView["attributionMode"] | "auto";