@arcgis/map-components 5.2.0-next.12 → 5.2.0-next.120

package/dist/components/arcgis-legend-card-element/customElement.js

@@ -1,15 +1,16 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as E } from "../../chunks/runtime.js";
-import { css as k, html as i } from "lit";
+import { css as k, html as t } from "lit";
 import y from "@arcgis/core/Color.js";
 import { LitElement as L, safeClassMap as c, safeStyleMap as u, nothing as b } from "@arcgis/lumina";
 import { classes as r } from "@arcgis/toolkit/dom";
-import { H as f } from "../../chunks/heading.js";
-import { g as w } from "../../chunks/globalCss.js";
-import { b as _, s as $, i as z, c as v, g as x } from "../../chunks/utils2.js";
-const C = k`.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)}.section{word-break:break-word;word-wrap:break-word;padding:var(--calcite-spacing-sm) var(--calcite-spacing-md);min-width:250px;max-width:500px;height:100%;height:-moz-available;height:-webkit-fill-available;height:fill-available;overflow:auto;font-size:var(--calcite-font-size-sm)}.carousel-title-container{margin-bottom:var(--calcite-spacing-sm)}.carousel-title{margin:0}.section-title{font-weight:var(--calcite-font-weight-normal)}.layer-caption{padding:var(--calcite-spacing-xs) 0;margin:0;font-weight:var(--calcite-font-weight-normal)}.imagery-layer-stretched-image{display:block;margin-bottom:-2px}.image-label{padding-right:var(--calcite-spacing-xs);padding-left:var(--calcite-spacing-xs)}.label-element{margin:.1em;padding:.5em 1em;min-width:2em;min-height:1em;text-align:center;display:flex;align-items:center;justify-content:center;flex:1}.layer-row{display:flex;align-items:center}.symbol{display:block;margin:auto}.pie-chart-ramp-preview{display:flex;justify-content:center}.relationship-container{display:flex;flex-direction:column}.relationship-container .layer-row{padding-bottom:.5em}.relationship-container .layer-row:last-child{padding-bottom:0}.container{display:flex;gap:var(--calcite-spacing-sm);flex-wrap:wrap}.background-styles-container{display:flex;flex-wrap:wrap}:host([stacked]) .container{display:table}:host([stacked]) .symbol-row{display:table-row;width:100%}:host([stacked]) .label-cell{display:table-cell;vertical-align:middle;padding:var(--calcite-spacing-xxs)}:host([stacked]) .symbol-cell{display:table-cell;vertical-align:middle;text-align:center;padding:var(--calcite-spacing-xxs)}:host([stacked]) .symbol-cell div{display:flex;align-items:center;justify-content:center}`;
-function F(p) {
-  return p ? p.r * 0.299 + p.g * 0.587 + p.b * 0.114 >= 127 : void 0;
+import { H as w } from "../../chunks/heading.js";
+import { g as f } from "../../chunks/globalCss.js";
+import { a as _, g as v } from "../../chunks/titleUtils.js";
+import { s as $, i as C, g as x } from "../../chunks/utils3.js";
+const z = k`.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)}.section{word-break:break-word;word-wrap:break-word;padding:var(--calcite-space-sm) var(--calcite-space-md);min-width:250px;max-width:500px;overflow:auto;font-size:var(--calcite-font-size-sm)}.carousel-title-container{margin-bottom:var(--calcite-space-sm)}.carousel-title{margin:0}.section-title{font-weight:var(--calcite-font-weight-regular)}.layer-caption{padding:var(--calcite-space-2xs) 0;margin:0;font-weight:var(--calcite-font-weight-regular)}.imagery-layer-stretched-image{display:block;margin-bottom:-2px}.image-label{padding-inline-start:var(--calcite-space-xs)}.label-element{margin:.1em;padding:.5em 1em;min-width:2em;min-height:1em;text-align:center;display:flex;align-items:center;justify-content:center;flex:1}.layer-row{display:flex;align-items:center}.symbol{display:block;margin:auto}.pie-chart-ramp-preview{display:flex;justify-content:center}.relationship-container{display:flex;flex-direction:column}.relationship-container .layer-row{padding-bottom:.5em}.relationship-container .layer-row:last-child{padding-bottom:0}.container{display:flex;gap:var(--calcite-space-sm);flex-wrap:wrap}.background-styles-container{display:flex;flex-wrap:wrap}:host([stacked]) .container{display:table}:host([stacked]) .symbol-row{display:table-row;width:100%}:host([stacked]) .symbol-row:not(:last-child) .label-cell,:host([stacked]) .symbol-row:not(:last-child) .symbol-cell{padding-bottom:var(--calcite-space-xs)}:host([stacked]) .label-cell{display:table-cell;vertical-align:middle}:host([stacked]) .symbol-cell{display:table-cell;vertical-align:middle;text-align:center}:host([stacked]) .symbol-cell div{display:flex;align-items:center;justify-content:center}`;
+function F(m) {
+  return m ? m.r * 0.299 + m.g * 0.587 + m.b * 0.114 >= 127 : void 0;
 }
 class S extends L {
   constructor() {
@@ -19,91 +20,91 @@ class S extends L {
     this.properties = { cssEffectFilter: 1, stacked: 7, activeLayerInfo: 0, headingLevel: 9, layer: 0, legendElement: 0, messages: 0 };
   }
   static {
-    this.styles = C;
+    this.styles = z;
   }
   _getBackgroundStyles(e) {
-    const a = e.symbol, s = a.color, n = !!s?.a, l = "outline" in a ? a.outline : null, t = !!l?.color?.a, o = n && s ? new y([s.r, s.g, s.b, s.a * this.layer.opacity]) : new y([255, 255, 255, 0]), d = t && l.color ? new y([l.color.r, l.color.g, l.color.b, l.color.a * this.layer.opacity]) : new y([255, 255, 255, 0]), g = F(e.symbol.color) ?? !0, h = g ? "black" : "white", m = g ? "rgba(255, 255, 255, .6)" : "rgba(0, 0, 0, .6)";
+    const a = e.symbol, s = a.color, n = !!s?.a, l = "outline" in a ? a.outline : null, i = !!l?.color?.a, o = n && s ? new y([s.r, s.g, s.b, s.a * this.layer.opacity]) : new y([255, 255, 255, 0]), d = i && l.color ? new y([l.color.r, l.color.g, l.color.b, l.color.a * this.layer.opacity]) : new y([255, 255, 255, 0]), g = F(e.symbol.color) ?? !0, h = g ? "black" : "white", p = g ? "rgba(255, 255, 255, .6)" : "rgba(0, 0, 0, .6)";
     return {
       background: n ? o.toCss(!0) : "none",
       color: h,
-      textShadow: `-1px -1px 0 ${m},
-                  1px -1px 0 ${m},
-                  -1px 1px 0 ${m},
-                  1px 1px 0 ${m}`,
-      border: t ? `1px solid ${d.toCss(!0)}` : "none",
+      textShadow: `-1px -1px 0 ${p},
+                  1px -1px 0 ${p},
+                  -1px 1px 0 ${p},
+                  1px 1px 0 ${p}`,
+      border: i ? `1px solid ${d.toCss(!0)}` : "none",
       filter: this.cssEffectFilter ?? ""
     };
   }
   render() {
-    const e = this._renderLegendElement(), a = _(this.legendElement, this.messages), s = this.stacked ? i`<div class="carousel-title-container">${f({ class: r("carousel-title", w.heading), level: this.headingLevel, children: this.activeLayerInfo.title })}${a ? i`<p class="layer-caption">${a}</p>` : null}</div>` : a ? f({ class: r("section-title", w.heading), level: this.headingLevel, children: a }) : null;
-    return i`<section class="section" role=tabpanel tabindex=0>${s}${e}</section>`;
+    const e = this._renderLegendElement(), a = _(this.legendElement, this.messages), s = this.stacked ? t`<div class="carousel-title-container">${w({ class: r("carousel-title", f.heading), level: this.headingLevel, children: this.activeLayerInfo.title })}${a ? t`<p class="layer-caption">${a}</p>` : null}</div>` : a ? w({ class: r("section-title", f.heading), level: this.headingLevel, children: a }) : null;
+    return t`<section class="section" role=tabpanel tabindex=0>${s}${e}</section>`;
   }
   _renderLegendElement() {
     switch (this.legendElement.type) {
       case "symbol-table":
         return this._renderSymbolTable(this.legendElement);
       case "size-ramp":
-        return i`<arcgis-legend-card-size-ramp .hasIndicators=${this.stacked} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-card-size-ramp>`;
+        return t`<arcgis-legend-card-size-ramp .hasIndicators=${this.stacked} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-card-size-ramp>`;
       case "color-ramp":
       case "opacity-ramp":
       case "heatmap-ramp":
       case "stretch-ramp":
-        return i`<arcgis-legend-card-color-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-card-color-ramp>`;
+        return t`<arcgis-legend-card-color-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-card-color-ramp>`;
       case "relationship-ramp":
-        return i`<arcgis-legend-relationship-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .opacity=${this.layer.opacity} .messages=${this.messages}></arcgis-legend-relationship-ramp>`;
+        return t`<arcgis-legend-relationship-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .opacity=${this.layer.opacity} .messages=${this.messages}></arcgis-legend-relationship-ramp>`;
       case "pie-chart-ramp": {
         const { preview: e } = this.legendElement;
-        return $(e, this.messages.previewPieChartAriaLabel), i`<div class="pie-chart-ramp-preview">${e}</div>`;
+        return $(e, this.messages.previewPieChartAriaLabel), t`<div class="pie-chart-ramp-preview">${e}</div>`;
       }
       case "univariate-above-and-below-ramp":
-        return i`<arcgis-legend-card-univariate-above-and-below-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-card-univariate-above-and-below-ramp>`;
+        return t`<arcgis-legend-card-univariate-above-and-below-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-card-univariate-above-and-below-ramp>`;
       case "univariate-color-size-ramp":
-        return i`<arcgis-legend-card-univariate-color-size-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-card-univariate-color-size-ramp>`;
+        return t`<arcgis-legend-card-univariate-color-size-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-card-univariate-color-size-ramp>`;
       default:
         return null;
     }
   }
   _renderSymbolTable(e) {
-    const a = e.infos.map((t) => this._renderElementInfo(t, e.legendType)).filter(Boolean);
+    const a = e.infos.map((i) => this._renderElementInfo(i, e.legendType)).filter(Boolean);
     if (!a.length)
       return null;
-    const s = e.infos.some((t) => "symbol" in t && t.symbol?.type.includes("simple-fill")), l = this.activeLayerInfo.legendElements.some(({ type: t }) => t === "relationship-ramp") ? "relationship-container" : s ? "background-styles-container" : "container";
-    return i`<div class=${c(l)}>${a}</div>`;
+    const s = e.infos.some((i) => "symbol" in i && i.symbol?.type.includes("simple-fill")), l = this.activeLayerInfo.legendElements.some(({ type: i }) => i === "relationship-ramp") ? "relationship-container" : s ? "background-styles-container" : "container";
+    return t`<div class=${c(l)}>${a}</div>`;
   }
   _renderElementInfo(e, a) {
     const { layer: s } = this, n = "label" in e ? e.label : null;
     if ("type" in e && e.type)
-      return i`<arcgis-legend-card-element .activeLayerInfo=${this.activeLayerInfo} .cssEffectFilter=${this.cssEffectFilter} .stacked=${this.stacked} .headingLevel=${this.headingLevel} .layer=${s} .legendElement=${e} .messages=${this.messages}></arcgis-legend-card-element>`;
+      return t`<arcgis-legend-card-element .activeLayerInfo=${this.activeLayerInfo} .cssEffectFilter=${this.cssEffectFilter} .stacked=${this.stacked} .headingLevel=${this.headingLevel} .layer=${s} .legendElement=${e} .messages=${this.messages}></arcgis-legend-card-element>`;
     if (!("preview" in e && e.preview) && !("src" in e && e.src))
       return null;
-    const l = z(s, a), t = v(this.messages, n, !1) || "";
+    const l = C(s, a), i = v(this.messages, n, !1) || "";
     if ("src" in e && e.src) {
       const o = {
         "symbol-cell": this.stacked
       };
-      return i`<div class=${c(r("layer-row", { "symbol-row": this.stacked }))}><div class=${c(r(o))}>${this._renderImage(e, s, l)}</div><div class=${c(r("image-label", { "label-cell": this.stacked }))}>${t}</div></div>`;
+      return t`<div class=${c(r("layer-row", { "symbol-row": this.stacked }))}><div class=${c(r(o))}>${this._renderImage(e, s, l)}</div><div class=${c(r("image-label", { "label-cell": this.stacked }))}>${i}</div></div>`;
     }
     if ("symbol" in e && e.preview) {
       if (!e.symbol?.type.includes("simple-fill")) {
         if (!e.label)
-          return i`<div>${e.preview}</div>`;
+          return t`<div>${e.preview}</div>`;
         const o = {
           "symbol-cell": this.stacked
         }, { preview: d } = e, g = "previewAriaLabel" in e ? e.previewAriaLabel : null, h = "label" in e ? v(this.messages, e.label, !1) : null;
-        return $(d, x(this.messages, g || h)), i`<div class=${c(r("layer-row", { "symbol-row": this.stacked }))}><div class=${c(r(o))}>${d}</div><div class=${c(r("image-label", { "label-cell": this.stacked }))}>${t}</div></div>`;
+        return $(d, x(this.messages, g || h)), t`<div class=${c(r("layer-row", { "symbol-row": this.stacked }))}><div class=${c(r(o))}>${d}</div><div class=${c(r("image-label", { "label-cell": this.stacked }))}>${i}</div></div>`;
       }
-      return i`<div class="layer-row"><div class="label-element" style=${u(this._getBackgroundStyles(e))}>${t}</div></div>`;
+      return t`<div class="layer-row"><div class="label-element" style=${u(this._getBackgroundStyles(e))}>${i}</div></div>`;
     }
     return null;
   }
   _renderImage(e, a, s) {
-    const { previewAriaLabel: n, src: l, opacity: t } = e, o = v(this.messages, e.label, !1), d = {
+    const { previewAriaLabel: n, src: l, opacity: i } = e, o = v(this.messages, e.label, !1), d = {
       "imagery-layer-stretched-image": s,
       symbol: !s
     }, g = {
-      opacity: `${t ?? a.opacity}`
+      opacity: `${i ?? a.opacity}`
     }, h = x(this.messages, n || o);
-    return i`<img alt=${h ?? b} .ariaLabel=${h} class=${c(r(d))} height=${e.height ?? void 0 ?? b} src=${l ?? b} style=${u(g)} width=${e.width ?? void 0 ?? b}>`;
+    return t`<img alt=${h ?? b} .ariaLabel=${h} class=${c(r(d))} height=${e.height ?? void 0 ?? b} src=${l ?? b} style=${u(g)} width=${e.width ?? void 0 ?? b}>`;
   }
 }
 E("arcgis-legend-card-element", S);

package/dist/components/arcgis-legend-card-size-ramp/customElement.js

@@ -2,7 +2,7 @@
 import { c as C } from "../../chunks/runtime.js";
 import { css as P, html as X } from "lit";
 import { LitElement as j, safeStyleMap as v, safeClassMap as Y } from "@arcgis/lumina";
-import { s as k, g as I, p as R } from "../../chunks/utils2.js";
+import { s as k, g as I, p as R } from "../../chunks/utils3.js";
 const A = P`.size-ramp-container{display:flex;align-items:center;justify-content:center}.size-ramp-vertical-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.size-ramp-label{margin:0 .5em;white-space:nowrap}.size-ramp-vertical-ramp{display:flex;flex-direction:column;align-items:center}.size-ramp-ramp{display:flex;flex-direction:row-reverse;align-items:center}.size-ramp-preview{display:flex}`, M = "#ddd";
 function N(e) {
   if (!e)

package/dist/components/arcgis-legend-card-univariate-above-and-below-ramp/customElement.js

@@ -1,10 +1,10 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as E } from "../../chunks/runtime.js";
-import { css as A, html as t } from "lit";
+import { css as A, html as i } from "lit";
 import { LitElement as L, safeStyleMap as a } from "@arcgis/lumina";
 import { useDirection as S } from "@arcgis/lumina/controllers";
-import { g as k, a as C, b as v, c as f, d as U } from "../../chunks/univariateUtils.js";
-const F = A`.layer-row{display:flex;align-items:center}.symbol{display:block;margin:auto}.symbol-container{position:relative}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.layer-cell{padding:var(--calcite-spacing-xxs) 0;min-width:100px;vertical-align:middle;word-break:break-word}.layer-cell-info{padding-right:var(--calcite-spacing-sm);padding-left:var(--calcite-spacing-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.univariate-color-ramp-card{position:relative}.univariate-color-ramp-card:before{content:"";border-left:var(--calcite-border-width-sm) solid var(--calcite-color-background);border-right:var(--calcite-border-width-sm) solid var(--calcite-color-background);width:100%;height:15px;display:block;position:absolute;top:var(--calcite-border-width-sm)}.univariate-above-below-symbol{display:flex;align-items:center;justify-content:center}`;
+import { g as C, a as U, b as v, c as f, d as k } from "../../chunks/univariateUtils.js";
+const F = A`.layer-row{display:flex;align-items:center}.symbol{display:block;margin:auto}.symbol-container{position:relative}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.layer-cell{padding:var(--calcite-space-2xs) 0;min-width:100px;vertical-align:middle;word-break:break-word}.layer-cell-info{padding-right:var(--calcite-space-sm);padding-left:var(--calcite-space-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.univariate-color-ramp-card{position:relative}.univariate-color-ramp-card:before{content:"";border-left:var(--calcite-border-width-sm) solid var(--calcite-color-surface-1);border-right:var(--calcite-border-width-sm) solid var(--calcite-color-surface-1);width:100%;height:15px;display:block;position:absolute;top:var(--calcite-border-width-sm)}.univariate-above-below-symbol{display:flex;align-items:center;justify-content:center}`;
 class B extends L {
   constructor() {
     super(...arguments), this._direction = S(), this.legendElement = null, this.opacity = 1;
@@ -16,11 +16,11 @@ class B extends L {
     this.styles = F;
   }
   render() {
-    const { legendElement: b, opacity: l } = this, { sizeRampElement: e, colorRampElement: r } = k(b, this.messages, l, "horizontal");
+    const { legendElement: b, opacity: l } = this, { sizeRampElement: e, colorRampElement: r } = C(b, this.messages, l, "horizontal");
     if (!e)
       return null;
-    const g = C(e, "full", !0, "horizontal"), h = v(e, "above", !0, "horizontal"), y = v(e, "below", !0, "horizontal"), s = 12, n = this.messages?.previewColorRampAriaLabel, c = f(r, {
-      width: h,
+    const h = U(e, "full", !0, "horizontal"), y = v(e, "above", !0, "horizontal"), g = v(e, "below", !0, "horizontal"), s = 12, n = this.messages?.previewColorRampAriaLabel, c = f(r, {
+      width: y,
       height: s,
       rampAlignment: "horizontal",
       opacity: l,
@@ -28,25 +28,25 @@ class B extends L {
       cssEffectFilter: this.cssEffectFilter,
       ariaLabel: n
     }), w = f(r, {
-      width: y,
+      width: g,
       height: s,
       rampAlignment: "horizontal",
       opacity: l,
       type: "below",
       cssEffectFilter: this.cssEffectFilter,
       ariaLabel: n
-    }), d = U(e, "card"), m = e.infos.map((i) => i.label), u = m.length - 1, x = m.map((i, p) => p === 0 || p === u ? t`<div>${i}</div>` : null), R = { display: "flex", flexDirection: "column" }, z = { display: "flex", flexDirection: "row" }, o = {
+    }), m = k(e, "card"), d = e.infos.map((t) => t.label), u = d.length - 1, x = d.map((t, p) => p === 0 || p === u ? i`<div>${t}</div>` : null), R = { display: "flex", flexDirection: "column" }, z = { display: "flex", flexDirection: "row" }, o = {
       marginTop: "3px",
       display: "flex"
     };
-    this._direction === "rtl" ? o.marginRight = `${d}px` : o.marginLeft = `${d}px`;
+    this._direction === "rtl" ? o.marginRight = `${m}px` : o.marginLeft = `${m}px`;
     const $ = {
-      width: `${g}px`,
+      width: `${h}px`,
       display: "flex",
       flexDirection: "row",
       justifyContent: "space-between"
     };
-    return t`<div class="layer-row" style=${a(R)}><div class="symbol-container" style=${a(z)}>${e.infos.map((i) => t`<div class="symbol">${i.preview}</div>`)}</div>${c ? t`<div class="univariate-color-ramp-card" style=${a(o)}><div>${c}</div><div>${w}</div></div>` : null}<div class="layer-cell layer-cell-info"><div class="ramp-labels" style=${a($)}>${x}</div></div></div>`;
+    return i`<div class="layer-row" style=${a(R)}><div class="symbol-container" style=${a(z)}>${e.infos.map((t) => i`<div class="symbol">${t.preview}</div>`)}</div>${c ? i`<div class="univariate-color-ramp-card" style=${a(o)}><div>${c}</div><div>${w}</div></div>` : null}<div class="layer-cell layer-cell-info"><div class="ramp-labels" style=${a($)}>${x}</div></div></div>`;
   }
 }
 E("arcgis-legend-card-univariate-above-and-below-ramp", B);

package/dist/components/arcgis-legend-card-univariate-color-size-ramp/customElement.js

@@ -4,8 +4,8 @@ import { css as w, html as l } from "lit";
 import { LitElement as u, safeStyleMap as i } from "@arcgis/lumina";
 import { useDirection as x } from "@arcgis/lumina/controllers";
 import { e as R, a as z, b as $, c as E, d as S } from "../../chunks/univariateUtils.js";
-const C = w`.layer-row,.symbol{display:flex;align-items:center}.symbol-container{position:relative}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.layer-cell{padding:var(--calcite-spacing-xxs) 0;min-width:100px;vertical-align:middle;word-break:break-word}.layer-cell-info{padding-right:var(--calcite-spacing-sm);padding-left:var(--calcite-spacing-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.univariate-color-ramp-card{position:relative}.univariate-color-ramp-card:before{content:"";border-left:var(--calcite-border-width-sm) solid var(--calcite-color-background);border-right:var(--calcite-border-width-sm) solid var(--calcite-color-background);width:100%;height:15px;display:block;position:absolute;top:var(--calcite-border-width-sm)}.univariate-above-below-symbol{display:flex;align-items:center;justify-content:center}`;
-class k extends u {
+const C = w`.layer-row,.symbol{display:flex;align-items:center}.symbol-container{position:relative}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.layer-cell{padding:var(--calcite-space-2xs) 0;min-width:100px;vertical-align:middle;word-break:break-word}.layer-cell-info{padding-right:var(--calcite-space-sm);padding-left:var(--calcite-space-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.univariate-color-ramp-card{position:relative}.univariate-color-ramp-card:before{content:"";border-left:var(--calcite-border-width-sm) solid var(--calcite-color-surface-1);border-right:var(--calcite-border-width-sm) solid var(--calcite-color-surface-1);width:100%;height:15px;display:block;position:absolute;top:var(--calcite-border-width-sm)}.univariate-above-below-symbol{display:flex;align-items:center;justify-content:center}`;
+class L extends u {
   constructor() {
     super(...arguments), this._direction = x(), this.legendElement = null, this.opacity = 1;
   }
@@ -19,18 +19,18 @@ class k extends u {
     const { legendElement: s, opacity: n } = this, { sizeRampElement: e, colorRampElement: c } = R(s, this.messages, "horizontal");
     if (!e)
       return null;
-    const m = z(e, "full", !1, "horizontal"), d = $(e, "full", !1, "horizontal"), p = E(c, {
-      width: d,
+    const m = z(e, "full", !1, "horizontal"), p = $(e, "full", !1, "horizontal"), d = E(c, {
+      width: p,
       height: 12,
       rampAlignment: "horizontal",
       opacity: n,
       type: "full",
       cssEffectFilter: this.cssEffectFilter,
       ariaLabel: this.messages?.previewColorRampAriaLabel
-    }), r = S(e, "card"), f = e.infos.length - 1, v = e.infos.map((a, o) => o === 0 || o === f ? l`<div>${a.label}</div>` : null), g = {
+    }), r = S(e, "card"), f = e.infos.length - 1, v = e.infos.map((a, o) => o === 0 || o === f ? l`<div>${a.label}</div>` : null), y = {
       display: "flex",
       flexDirection: "column"
-    }, y = {
+    }, g = {
       display: "flex",
       flexDirection: "row"
     }, t = {
@@ -44,10 +44,10 @@ class k extends u {
       flexDirection: "row",
       justifyContent: "space-between"
     };
-    return l`<div class="layer-row" style=${i(g)}><div class="symbol-container" style=${i(y)}>${e.infos.map((a) => l`<div class="symbol">${a.preview}</div>`)}</div><div class="univariate-color-ramp-card" style=${i(t)}><div>${p}</div></div><div class="layer-cell layer-cell-info"><div class="ramp-labels" style=${i(h)}>${v}</div></div></div>`;
+    return l`<div class="layer-row" style=${i(y)}><div class="symbol-container" style=${i(g)}>${e.infos.map((a) => l`<div class="symbol">${a.preview}</div>`)}</div><div class="univariate-color-ramp-card" style=${i(t)}><div>${d}</div></div><div class="layer-cell layer-cell-info"><div class="ramp-labels" style=${i(h)}>${v}</div></div></div>`;
   }
 }
-b("arcgis-legend-card-univariate-color-size-ramp", k);
+b("arcgis-legend-card-univariate-color-size-ramp", L);
 export {
-  k as LegendCardUnivariateColorSizeRamp
+  L as LegendCardUnivariateColorSizeRamp
 };

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

@@ -1,13 +1,13 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as l } from "../../chunks/runtime.js";
-import { css as a, html as i } from "lit";
+import { css as a, html as s } from "lit";
 import { watch as c } from "@arcgis/core/core/reactiveUtils.js";
 import { substitute as o } from "@arcgis/core/intl.js";
 import { LitElement as d } from "@arcgis/lumina";
 import { classes as h } from "@arcgis/toolkit/dom";
 import { H as g } from "../../chunks/heading.js";
 import { g as m } from "../../chunks/globalCss.js";
-const f = a`.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:flex;flex-direction:row;position:relative;transition:max-width .25s ease-in-out;overflow-x:auto}calcite-carousel-item[selected]{flex:1;overflow:auto}.message{padding:.5em 1em}.service-caption-text{margin:0}.service-content{display:flex;flex:1}.service-content>arcgis-legend-card-element:not(:first-child){border-left:1px solid var(--calcite-color-border-2)}.service{border-left:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);min-width:fit-content;display:flex;flex-direction:column;flex:1}.service-caption-container{border-bottom:1px solid var(--calcite-color-border-2);padding:var(--calcite-spacing-md)}`, u = 768;
+const f = a`.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:flex;flex-direction:row;position:relative;transition:max-width .25s ease-in-out;overflow-x:auto}calcite-carousel{height:fit-content;max-height:100%}calcite-carousel-item{max-height:100%;min-height:0}calcite-carousel-item[selected]{flex:1;overflow:auto}.message{padding:.5em 1em}.service-caption-text{margin:0}.service-content{display:flex;flex:1}.service-content>arcgis-legend-card-element:not(:first-child){border-left:1px solid var(--calcite-color-border-2)}.service{border-left:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);display:flex;flex-direction:column;flex:1}.service-caption-container{border-bottom:1px solid var(--calcite-color-border-2);padding:var(--calcite-space-md)}`, u = 768;
 class v extends d {
   constructor() {
     super(...arguments), this.stacked = !1, this.headingLevel = 3, this.layout = "auto", this.type = "card";
@@ -26,23 +26,23 @@ class v extends d {
     ]);
   }
   render() {
-    return (this.stacked ? this._renderCarousel() : this._renderLayers()) || i`<div class="message">${this.messages.noLegend}</div>`;
+    return (this.stacked ? this._renderCarousel() : this._renderLayers()) || s`<div class="message">${this.messages.noLegend}</div>`;
   }
   _renderTitle(e) {
-    return i`<div class="service-caption-container">${g({ class: h("service-caption-text", m.heading), level: this.headingLevel, children: e })}</div>`;
+    return s`<div class="service-caption-container">${g({ class: h("service-caption-text", m.heading), level: this.headingLevel, children: e })}</div>`;
   }
   _renderCarousel() {
     const e = [], t = this.activeLayerInfos;
     if (t)
-      for (const s of t)
-        this._renderSections(s, e);
-    return e?.length ? i`<calcite-carousel .paginationDisabled=${e.length < 2} .label=${this.messages.carousel ?? ""}>${e.map((s, r) => i`<calcite-carousel-item .label=${o(this.messages?.pagination?.pageText ?? "", {
+      for (const i of t)
+        this._renderSections(i, e);
+    return e?.length ? s`<calcite-carousel .paginationDisabled=${e.length < 2} .label=${this.messages.carousel ?? ""}>${e.map((i, r) => s`<calcite-carousel-item .label=${o(this.messages?.pagination?.pageText ?? "", {
       index: r + 1,
       total: e.length
-    })}>${s}</calcite-carousel-item>`)}</calcite-carousel>` : null;
+    })}>${i}</calcite-carousel-item>`)}</calcite-carousel>` : null;
   }
   _renderLayers() {
-    const t = this.activeLayerInfos?.toArray()?.map((s) => this._renderLegendForLayer(s)).filter(Boolean);
+    const t = this.activeLayerInfos?.toArray()?.map((i) => this._renderLegendForLayer(i)).filter(Boolean);
     return t?.length ? t : null;
   }
   _renderLegendForLayer(e) {
@@ -50,7 +50,7 @@ class v extends d {
       return null;
     if (e.children.length) {
       const t = e.children.toArray().map(this._renderLegendForLayer, this);
-      return i`<section class="service">${this._renderTitle(e.title)}<div class="service-content">${t}</div></section>`;
+      return s`<section class="service">${this._renderTitle(e.title)}<div class="service-content">${t}</div></section>`;
     }
     return this._renderLegendElementsForLayer(e);
   }
@@ -58,8 +58,8 @@ class v extends d {
     const t = e.legendElements?.filter(Boolean);
     if (!t?.length)
       return null;
-    const s = t.map((r) => i`<arcgis-legend-card-element .activeLayerInfo=${e} .cssEffectFilter=${e.cssEffectFilter ?? void 0} .stacked=${this.stacked} .headingLevel=${this.headingLevel} .layer=${e.layer} .legendElement=${r} .messages=${this.messages}></arcgis-legend-card-element>`);
-    return i`<section class="service">${this._renderTitle(e.title)}<div class="service-content">${s}</div></section>`;
+    const i = t.map((r) => s`<arcgis-legend-card-element .activeLayerInfo=${e} .cssEffectFilter=${e.cssEffectFilter ?? void 0} .stacked=${this.stacked} .headingLevel=${this.headingLevel} .layer=${e.layer} .legendElement=${r} .messages=${this.messages}></arcgis-legend-card-element>`);
+    return s`<section class="service">${this._renderTitle(e.title)}<div class="service-content">${i}</div></section>`;
   }
   _renderSections(e, t) {
     if (!e.ready)
@@ -67,10 +67,10 @@ class v extends d {
     if (e.children.length)
       for (const r of e.children)
         this._renderSections(r, t);
-    const s = e.legendElements;
-    if (s?.length)
-      for (const r of s) {
-        const n = i`<arcgis-legend-card-element .activeLayerInfo=${e} .cssEffectFilter=${e.cssEffectFilter ?? void 0} .stacked=${this.stacked} .headingLevel=${this.headingLevel} .layer=${e.layer} .legendElement=${r} .messages=${this.messages}></arcgis-legend-card-element>`;
+    const i = e.legendElements;
+    if (i?.length)
+      for (const r of i) {
+        const n = s`<arcgis-legend-card-element .activeLayerInfo=${e} .cssEffectFilter=${e.cssEffectFilter ?? void 0} .stacked=${this.stacked} .headingLevel=${this.headingLevel} .layer=${e.layer} .legendElement=${r} .messages=${this.messages}></arcgis-legend-card-element>`;
         n && t.push(n);
       }
   }

package/dist/components/arcgis-legend-classic-color-ramp/customElement.js

@@ -1,10 +1,10 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as r } from "../../chunks/runtime.js";
-import { css as i, html as l } from "lit";
-import { LitElement as s, safeStyleMap as c, safeClassMap as p } from "@arcgis/lumina";
-import { s as o, a as n } from "../../chunks/utils2.js";
-const m = i`.layer-row{display:flex}.layer-cell{padding:var(--calcite-spacing-xxs) 0;vertical-align:middle;word-break:break-word}.layer-cell-symbols{text-align:center}.layer-cell-info{padding-right:var(--calcite-spacing-sm);padding-left:var(--calcite-spacing-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.ramps{margin-left:var(--calcite-spacing-sm)}:dir(rtl) .ramps{margin-right:var(--calcite-spacing-sm);margin-left:auto}.color-ramp{width:24px}.opacity-ramp{background-image:url(data:image/avif;base64,AAAAHGZ0eXBhdmlmAAAAAG1pZjFhdmlmbWlhZgAAANZtZXRhAAAAAAAAACFoZGxyAAAAAAAAAABwaWN0AAAAAAAAAAAAAAAAAAAAAA5waXRtAAAAAAABAAAAImlsb2MAAAAAREAAAQABAAAAAAD6AAEAAAAAAAAAHgAAACNpaW5mAAAAAAABAAAAFWluZmUCAAAAAAEAAGF2MDEAAAAAVmlwcnAAAAA4aXBjbwAAAAxhdjFDgQAMAAAAABRpc3BlAAAAAAAAAAgAAAAIAAAAEHBpeGkAAAAAAwgICAAAABZpcG1hAAAAAAAAAAEAAQOBAgMAAAAmbWRhdBIACggYCL/kgIaDQjIQGAAAAEBAA1LuL7oS8L0QEA==)}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.ramp-label{position:relative;padding:0 var(--calcite-spacing-sm);line-height:var(--calcite-font-size-sm);white-space:nowrap;font-size:var(--calcite-font-size-sm)}.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:""}.ramp-label:first-child{margin-top:calc(var(--calcite-font-size-sm) / 3 * -1)}.ramp-label:last-child{bottom:calc(var(--calcite-font-size-sm) * .25 * -1)}.layer-caption{display:table-caption;padding:var(--calcite-spacing-sm) 0}:dir(rtl) .ramp-label:before{right:auto;left:100%;border-width:3px 0 3px 4px;border-color:transparent transparent transparent var(--calcite-color-text-1)}`;
-class d extends s {
+import { css as s, html as l } from "lit";
+import { LitElement as i, safeStyleMap as c, safeClassMap as o } from "@arcgis/lumina";
+import { s as p, a as n } from "../../chunks/utils3.js";
+const m = s`.layer-row{display:flex}.layer-cell{padding:var(--calcite-space-2xs) 0;vertical-align:middle;word-break:break-word}.layer-cell-symbols{text-align:center}.layer-cell-info{padding-right:var(--calcite-space-sm);padding-left:var(--calcite-space-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.color-ramp{width:24px}.opacity-ramp{background-image:url(data:image/avif;base64,AAAAHGZ0eXBhdmlmAAAAAG1pZjFhdmlmbWlhZgAAANZtZXRhAAAAAAAAACFoZGxyAAAAAAAAAABwaWN0AAAAAAAAAAAAAAAAAAAAAA5waXRtAAAAAAABAAAAImlsb2MAAAAAREAAAQABAAAAAAD6AAEAAAAAAAAAHgAAACNpaW5mAAAAAAABAAAAFWluZmUCAAAAAAEAAGF2MDEAAAAAVmlwcnAAAAA4aXBjbwAAAAxhdjFDgQAMAAAAABRpc3BlAAAAAAAAAAgAAAAIAAAAEHBpeGkAAAAAAwgICAAAABZpcG1hAAAAAAAAAAEAAQOBAgMAAAAmbWRhdBIACggYCL/kgIaDQjIQGAAAAEBAA1LuL7oS8L0QEA==)}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.ramp-label{position:relative;padding:0 var(--calcite-space-sm);line-height:var(--calcite-font-size-sm);white-space:nowrap;font-size:var(--calcite-font-size-sm)}.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:""}.ramp-label:first-child{margin-top:calc(var(--calcite-font-size-sm) / 3 * -1)}.ramp-label:last-child{bottom:calc(var(--calcite-font-size-sm) * .25 * -1)}.layer-caption{display:table-caption;padding:var(--calcite-space-sm) 0}:dir(rtl) .ramp-label:before{right:auto;left:100%;border-width:3px 0 3px 4px;border-color:transparent transparent transparent var(--calcite-color-text-1)}`;
+class d extends i {
   constructor() {
     super(...arguments), this.legendElement = null, this.opacity = 1;
   }
@@ -18,20 +18,20 @@ class d extends s {
     const e = this.legendElement.preview;
     if (!e)
       return null;
-    const a = this.legendElement.type === "opacity-ramp", A = a ? "opacity-ramp" : "";
-    e.className = `color-ramp ${A}`, this.opacity != null && (e.style.opacity = this.opacity.toString());
-    const t = a ? this.messages.previewOpacityRampAriaLabel : this.messages.previewColorRampAriaLabel;
-    return o(e, t), e;
+    const A = this.legendElement.type === "opacity-ramp", a = A ? "opacity-ramp" : "";
+    e.className = `color-ramp ${a}`, this.opacity != null && (e.style.opacity = this.opacity.toString());
+    const t = A ? this.messages.previewOpacityRampAriaLabel : this.messages.previewColorRampAriaLabel;
+    return p(e, t), e;
   }
   render() {
-    const { legendElement: e, _preview: a } = this;
-    if (!a)
+    const { legendElement: e, _preview: A } = this;
+    if (!A)
       return null;
-    const A = { height: a.style.height };
-    return l`<div class="layer-row"><div class="layer-cell layer-cell-symbols"><div class="ramps">${a}</div></div><div class="layer-cell layer-cell-info"><div class="ramp-labels" style=${c(A)}>${e.infos.map((t) => this._renderRampLabel(t, e.type))}</div></div></div>`;
+    const a = { height: A.style.height };
+    return l`<div class="layer-row"><div class="layer-cell layer-cell-symbols"><div class="ramps">${A}</div></div><div class="layer-cell layer-cell-info"><div class="ramp-labels" style=${c(a)}>${e.infos.map((t) => this._renderRampLabel(t, e.type))}</div></div></div>`;
   }
-  _renderRampLabel(e, a) {
-    return l`<div class=${p(e.label ? "ramp-label" : void 0)}>${n(e, a, this.messages)}</div>`;
+  _renderRampLabel(e, A) {
+    return l`<div class=${o(e.label ? "ramp-label" : void 0)}>${n(e, A, this.messages)}</div>`;
   }
 }
 r("arcgis-legend-classic-color-ramp", d);

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

@@ -1,20 +1,24 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as v } from "../../chunks/runtime.js";
-import { css as $, html as s } from "lit";
-import { LitElement as u, safeClassMap as n, nothing as c, safeStyleMap as w } from "@arcgis/lumina";
-import { classes as g } from "@arcgis/toolkit/dom";
-import { b as E, s as p, i as f, c as d, g as y } from "../../chunks/utils2.js";
-const L = $`:host{contain:content}.layer-table{display:table;width:100%}.layer-caption{display:table-caption;padding:var(--calcite-spacing-sm) 0;word-break:break-word}.layer-body{margin-left:var(--calcite-spacing-sm)}:dir(rtl) .layer-body{margin-right:var(--calcite-spacing-sm);margin-left:0;overflow:auto}.layer-row{display:table-row}.layer-cell{padding:var(--calcite-spacing-xxs) 0;vertical-align:middle;word-break:break-word;display:table-cell}.layer-cell-info{padding-right:var(--calcite-spacing-sm);padding-left:var(--calcite-spacing-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.imagery-layer-stretched-image{display:block;margin-bottom:-2px}.imagery-layer-info-stretched{padding:0 2px;vertical-align:top}.layer-cell-symbols{text-align:center}.symbol{display:flex;justify-content:center}`;
-class x extends u {
+import { c as u } from "../../chunks/runtime.js";
+import { css as w, html as s } from "lit";
+import { LitElement as $, safeClassMap as m, nothing as o, safeStyleMap as f } from "@arcgis/lumina";
+import { classes as y } from "@arcgis/toolkit/dom";
+import { a as E, g as p } from "../../chunks/titleUtils.js";
+import { s as h, i as L, g as b } from "../../chunks/utils3.js";
+const x = w`:host{contain:content}.layer-body:has(>arcgis-legend-classic-element){display:flex;flex-direction:column;gap:calc(var(--arcgis-internal-legend-layer-gap) / 2)}.layer-body arcgis-legend-classic-element{margin-inline-start:var(--arcgis-internal-legend-layer-padding)}.layer-table{display:table;width:100%}.layer-caption{display:table-caption;word-break:break-word;color:var(--calcite-color-text-1);font-size:var(--calcite-font-size-sm);font-weight:var(--calcite-font-weight-regular);padding-bottom:var(--calcite-space-sm)}.layer-row{display:table-row}.layer-body:has(>.layer-row+.layer-row)>.layer-row .layer-cell{padding-block:var(--calcite-space-2xs)}.layer-cell{vertical-align:middle;word-break:break-word;display:table-cell}.layer-cell-info{padding-inline-start:var(--calcite-space-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.imagery-layer-stretched-image{display:block;margin-bottom:-2px}.imagery-layer-info-stretched{padding:0 2px;vertical-align:top}.layer-cell-symbols{text-align:center}.symbol{display:flex;justify-content:center}@supports (grid-template-columns: subgrid){:host([align-symbols]){contain:none}:host([align-symbols]),:host([align-symbols]) :is(.layer-table,.layer-body,.layer-row){display:grid;grid-template-columns:subgrid;grid-column:1 / -1;column-gap:0;min-inline-size:0}:host([align-symbols]) .layer-row{align-items:center}:host([align-symbols]) .layer-caption{display:block;grid-column:1 / -1}:host([align-symbols]) .layer-cell{display:block;min-inline-size:0}:host([align-symbols]) .layer-cell-info{overflow-wrap:anywhere}:host([align-symbols]) .symbol{margin-inline:auto}:host([align-symbols]) div.symbol{inline-size:max-content}}`;
+class z extends $ {
+  constructor() {
+    super(...arguments), this.alignSymbols = !1;
+  }
   static {
-    this.properties = { cssEffectFilter: 1, layer: 0, legendElement: 0, messages: 0 };
+    this.properties = { cssEffectFilter: 1, layer: 0, inlineLayerTitle: 1, alignSymbols: 7, legendElement: 0, messages: 0 };
   }
   static {
-    this.styles = L;
+    this.styles = x;
   }
   render() {
-    const e = this._renderLegendElement(), a = E(this.legendElement, this.messages), i = a ? s`<div class="layer-caption">${a}</div>` : null;
-    return s`<section class="layer-table">${i}${e}</section>`;
+    const e = this._renderLegendElement(), l = E(this.legendElement, this.messages), a = l ? s`<div class="layer-caption">${l}</div>` : null;
+    return s`<section class="layer-table">${a}${e}</section>`;
   }
   _renderLegendElement() {
     switch (this.legendElement.type) {
@@ -31,7 +35,7 @@ class x extends u {
         return s`<arcgis-legend-relationship-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .opacity=${this.layer.opacity} .messages=${this.messages}></arcgis-legend-relationship-ramp>`;
       case "pie-chart-ramp": {
         const { preview: e } = this.legendElement;
-        return p(e, this.messages.previewPieChartAriaLabel), s`<div>${e}</div>`;
+        return h(e, this.messages.previewPieChartAriaLabel), s`<div>${e}</div>`;
       }
       case "univariate-above-and-below-ramp":
         return s`<arcgis-legend-classic-univariate-above-and-below-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-classic-univariate-above-and-below-ramp>`;
@@ -42,41 +46,44 @@ class x extends u {
     }
   }
   _renderSymbolTable(e) {
-    const a = e.infos.map((i) => this._renderElementInfo(i, e.legendType)).filter(Boolean);
+    const l = this.inlineLayerTitle && e.infos.length === 1 ? this.inlineLayerTitle : void 0, a = e.infos.map((i) => this._renderElementInfo(i, e.legendType, l)).filter(Boolean);
     return a.length ? s`<div class="layer-body">${a}</div>` : null;
   }
-  _renderElementInfo(e, a) {
-    const { layer: i } = this, l = "label" in e ? e.label : null;
+  _renderElementInfo(e, l, a) {
+    const { layer: i } = this, t = "label" in e ? e.label : null;
     if ("type" in e && e.type)
       return e ? s`<arcgis-legend-classic-element .cssEffectFilter=${this.cssEffectFilter} .layer=${i} .legendElement=${e} .messages=${this.messages}></arcgis-legend-classic-element>` : null;
     if (!("preview" in e && e.preview) && !("src" in e && e.src))
       return null;
-    const r = f(i, a), t = {
+    const r = L(i, l), g = {
       "imagery-layer-info-stretched": r
-    };
-    return s`<div class="layer-row"><div class=${n(g("layer-cell", "layer-cell-symbols", {
+    }, d = {
       "imagery-layer-info-stretched": r
-    }))}>${this._renderPreview(e, r)}</div><div class=${n(g("layer-cell", "layer-cell-info", t))}>${d(this.messages, l, !1) || ""}</div></div>`;
+    }, c = p(this.messages, t, !1) || "", n = !c && a ? a : "", v = {
+      "layer-cell-inline-title": !!n,
+      ...g
+    };
+    return s`<div class="layer-row"><div class=${m(y("layer-cell", "layer-cell-symbols", d))}>${this._renderPreview(e, r)}</div><div class=${m(y("layer-cell", "layer-cell-info", v))}>${c || n}</div></div>`;
   }
-  _renderPreview(e, a) {
-    const { layer: i } = this;
+  _renderPreview(e, l) {
+    const { layer: a } = this;
     if ("preview" in e && e.preview) {
-      const { preview: l } = e, r = "previewAriaLabel" in e ? e.previewAriaLabel : null, t = "label" in e ? d(this.messages, e.label, !1) : null;
-      return p(l, y(this.messages, r || t)), s`<div class="symbol">${l}</div>`;
+      const { preview: i } = e, t = "previewAriaLabel" in e ? e.previewAriaLabel : null, r = "label" in e ? p(this.messages, e.label, !1) : null;
+      return h(i, b(this.messages, t || r)), s`<div class="symbol">${i}</div>`;
     }
-    return "src" in e && e.src ? this._renderImage(e, i, a) : null;
+    return "src" in e && e.src ? this._renderImage(e, a, l) : null;
   }
-  _renderImage(e, a, i) {
-    const { previewAriaLabel: l, src: r, opacity: t } = e, o = d(this.messages, e.label, !1), h = {
-      "imagery-layer-stretched-image": i,
-      symbol: !i
-    }, b = {
-      opacity: `${t ?? a.opacity}`
-    }, m = y(this.messages, l || o);
-    return s`<img alt=${m ?? c} .ariaLabel=${m} class=${n(g(h))} height=${e.height ?? void 0 ?? c} src=${r ?? c} style=${w(b)} width=${e.width ?? void 0 ?? c}>`;
+  _renderImage(e, l, a) {
+    const { previewAriaLabel: i, src: t, opacity: r } = e, g = p(this.messages, e.label, !1), d = {
+      "imagery-layer-stretched-image": a,
+      symbol: !a
+    }, c = {
+      opacity: `${r ?? l.opacity}`
+    }, n = b(this.messages, i || g);
+    return s`<img alt=${n ?? o} .ariaLabel=${n} class=${m(y(d))} height=${e.height ?? void 0 ?? o} src=${t ?? o} style=${f(c)} width=${e.width ?? void 0 ?? o}>`;
   }
 }
-v("arcgis-legend-classic-element", x);
+u("arcgis-legend-classic-element", z);
 export {
-  x as ArcgisLegendClassicElement
+  z as ArcgisLegendClassicElement
 };

package/dist/components/arcgis-legend-classic-size-ramp/customElement.js

@@ -3,8 +3,9 @@ import { c as t } from "../../chunks/runtime.js";
 import { css as n, html as i } from "lit";
 import { LitElement as m, safeClassMap as r } from "@arcgis/lumina";
 import { classes as l } from "@arcgis/toolkit/dom";
-import { c, s as o, g as p } from "../../chunks/utils2.js";
-const d = n`.size-ramp-container{margin-left:var(--calcite-spacing-sm);display:table}:dir(rtl) .size-ramp-container{margin-right:var(--calcite-spacing-sm);margin-left:0;overflow:auto}.size-ramp-row{display:table-row}.size-ramp-cell{padding:var(--calcite-spacing-xxs) 0;min-width:100px;vertical-align:middle;word-break:break-word;display:table-cell}.size-ramp-label{padding-right:var(--calcite-spacing-sm);padding-left:var(--calcite-spacing-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.size-ramp-symbol-container{min-width:10px;text-align:center}.size-ramp-symbol{display:flex;justify-content:center}`;
+import { g as o } from "../../chunks/titleUtils.js";
+import { s as c, g as p } from "../../chunks/utils3.js";
+const d = n`.size-ramp-container{display:table}.size-ramp-row{display:table-row}.size-ramp-row:not(:last-child) .size-ramp-cell,.size-ramp-row:not(:last-child) .size-ramp-label{padding-bottom:var(--calcite-space-xs)}.size-ramp-cell{min-width:100px;vertical-align:middle;word-break:break-word;display:table-cell}.size-ramp-label{padding-inline-start:var(--calcite-space-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.size-ramp-symbol-container{min-width:10px;text-align:center}.size-ramp-symbol{display:flex;justify-content:center}`;
 class g extends m {
   constructor() {
     super(...arguments), this.legendElement = null;
@@ -23,8 +24,8 @@ class g extends m {
     const { preview: s } = e;
     if (!s)
       return null;
-    const a = c(this.messages, e.label, !1);
-    return o(s, p(this.messages, a)), i`<div class="size-ramp-row"><div class=${r(l("size-ramp-cell", "size-ramp-symbol-container"))}><div class="size-ramp-symbol">${s}</div></div><div class=${r(l("size-ramp-cell", "size-ramp-label"))}>${a}</div></div>`;
+    const a = o(this.messages, e.label, !1);
+    return c(s, p(this.messages, a)), i`<div class="size-ramp-row"><div class=${r(l("size-ramp-cell", "size-ramp-symbol-container"))}><div class="size-ramp-symbol">${s}</div></div><div class=${r(l("size-ramp-cell", "size-ramp-label"))}>${a}</div></div>`;
   }
 }
 t("arcgis-legend-classic-size-ramp", g);