npm - @arcgis/map-components - Versions diffs - 5.2.0-next.75 → 5.2.0-next.77 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (119) hide show

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

@@ -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 z, 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-space-sm) var(--calcite-space-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-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() {
@@ -22,88 +23,88 @@ class S extends L {
     this.styles = C;
   }
   _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 = z(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-univariate-above-and-below-ramp/customElement.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -7,7 +7,7 @@ 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);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-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";

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

@@ -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/utils2.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 CHANGED Viewed

@@ -1,20 +1,21 @@
 /* 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 w } from "../../chunks/runtime.js";
+import { css as f, html as s } from "lit";
+import { LitElement as u, safeClassMap as m, nothing as o, safeStyleMap as $ } 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/utils2.js";
+const x = f`: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;font-size:var(--calcite-font-size);font-weight:var(--calcite-font-weight-medium);padding-bottom:var(--calcite-space-2xs)}.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-xs);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.layer-cell-inline-title{font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size)}.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 z extends u {
   static {
-    this.properties = { cssEffectFilter: 1, layer: 0, legendElement: 0, messages: 0 };
+    this.properties = { cssEffectFilter: 1, layer: 0, inlineLayerTitle: 1, 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(), i = E(this.legendElement, this.messages), a = i ? s`<div class="layer-caption">${i}</div>` : null;
+    return s`<section class="layer-table">${a}${e}</section>`;
   }
   _renderLegendElement() {
     switch (this.legendElement.type) {
@@ -31,7 +32,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 +43,44 @@ class x extends u {
     }
   }
   _renderSymbolTable(e) {
-    const a = e.infos.map((i) => this._renderElementInfo(i, e.legendType)).filter(Boolean);
+    const i = this.inlineLayerTitle && e.infos.length === 1 ? this.inlineLayerTitle : void 0, a = e.infos.map((l) => this._renderElementInfo(l, e.legendType, i)).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, i, a) {
+    const { layer: l } = 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;
+      return e ? s`<arcgis-legend-classic-element .cssEffectFilter=${this.cssEffectFilter} .layer=${l} .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(l, i), d = {
       "imagery-layer-info-stretched": r
-    };
-    return s`<div class="layer-row"><div class=${n(g("layer-cell", "layer-cell-symbols", {
+    }, g = {
       "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>`;
+    }, n = p(this.messages, t, !1) || "", c = !n && a ? a : "", v = {
+      "layer-cell-inline-title": !!c,
+      ...d
+    };
+    return s`<div class="layer-row"><div class=${m(y("layer-cell", "layer-cell-symbols", g))}>${this._renderPreview(e, r)}</div><div class=${m(y("layer-cell", "layer-cell-info", v))}>${n || c}</div></div>`;
   }
-  _renderPreview(e, a) {
-    const { layer: i } = this;
+  _renderPreview(e, i) {
+    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: l } = e, t = "previewAriaLabel" in e ? e.previewAriaLabel : null, r = "label" in e ? p(this.messages, e.label, !1) : null;
+      return h(l, b(this.messages, t || r)), s`<div class="symbol">${l}</div>`;
     }
-    return "src" in e && e.src ? this._renderImage(e, i, a) : null;
+    return "src" in e && e.src ? this._renderImage(e, a, i) : 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, i, a) {
+    const { previewAriaLabel: l, src: t, opacity: r } = e, d = p(this.messages, e.label, !1), g = {
+      "imagery-layer-stretched-image": a,
+      symbol: !a
+    }, n = {
+      opacity: `${r ?? i.opacity}`
+    }, c = b(this.messages, l || d);
+    return s`<img alt=${c ?? o} .ariaLabel=${c} class=${m(y(g))} height=${e.height ?? void 0 ?? o} src=${t ?? o} style=${$(n)} width=${e.width ?? void 0 ?? o}>`;
   }
 }
-v("arcgis-legend-classic-element", x);
+w("arcgis-legend-classic-element", z);
 export {
-  x as ArcgisLegendClassicElement
+  z as ArcgisLegendClassicElement
 };

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

@@ -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/utils2.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);

package/dist/components/arcgis-legend-classic-univariate-above-and-below-ramp/customElement.js CHANGED Viewed

@@ -2,8 +2,8 @@
 import { c as k } from "../../chunks/runtime.js";
 import { css as B, html as l } from "lit";
 import { LitElement as F, safeClassMap as b, safeStyleMap as e } from "@arcgis/lumina";
-import { g as P, b as g, c as f, d as U, u as j, f as h, h as o } from "../../chunks/univariateUtils.js";
-const H = B`.layer-body{margin-left:var(--calcite-spacing-sm);display:table}:dir(rtl) .layer-body{margin-right:var(--calcite-spacing-sm);margin-left:0;overflow:auto}.layer-row{display:table-row}.layer-cell{display:table-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)}.symbol{display:flex;justify-content:center}.ramps{margin-left:var(--calcite-spacing-md)}:dir(rtl) .ramps{margin-right:var(--calcite-spacing-md);margin-left:auto}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.ramp-label{position:relative;padding:0 var(--calcite-spacing-sm);line-height:1em;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)}: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)}.univariate-above-below-label{position:relative;margin-left:7px;line-height:1em;white-space:nowrap;font-size:var(--calcite-font-size-sm)}.univariate-above-below-label:before{display:block;position:absolute;top:.45em;left:-19px;border-width:1px 0 0;border-style:solid;width:14px;height:0;content:""}.univariate-above-below-label:first-child{top:calc(var(--calcite-font-size-sm) / 2.2 * -1)}.univariate-above-below-label:last-child{bottom:calc(var(--calcite-font-size-sm) / 2.2 * -1)}:dir(rtl) .univariate-above-below-label{margin-right:var(--calcite-spacing-sm);margin-left:auto}:dir(rtl) .univariate-above-below-label:before{right:-19px;left:auto}.univariate-above-below-symbol{display:flex;align-items:center;justify-content:center}`;
+import { g as P, b as f, c as h, d as U, u as j, f as g, h as o } from "../../chunks/univariateUtils.js";
+const H = B`.layer-body{display:table}.layer-row{display:table-row}.layer-cell{display:table-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)}.symbol{display:flex;justify-content:center}.ramps{margin-left:var(--calcite-space-md)}:dir(rtl) .ramps{margin-right:var(--calcite-space-md);margin-left:auto}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.ramp-label{position:relative;padding:0 var(--calcite-space-sm);line-height:1em;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)}: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)}.univariate-above-below-label{position:relative;margin-left:7px;line-height:1em;white-space:nowrap;font-size:var(--calcite-font-size-sm)}.univariate-above-below-label:before{display:block;position:absolute;top:.45em;left:-19px;border-width:1px 0 0;border-style:solid;width:14px;height:0;content:""}.univariate-above-below-label:first-child{top:calc(var(--calcite-font-size-sm) / 2.2 * -1)}.univariate-above-below-label:last-child{bottom:calc(var(--calcite-font-size-sm) / 2.2 * -1)}:dir(rtl) .univariate-above-below-label{margin-right:var(--calcite-space-sm);margin-left:auto}:dir(rtl) .univariate-above-below-label:before{right:-19px;left:auto}.univariate-above-below-symbol{display:flex;align-items:center;justify-content:center}`;
 class I extends F {
   constructor() {
     super(...arguments), this.legendElement = null, this.opacity = 1;
@@ -18,7 +18,7 @@ class I extends F {
     const { legendElement: y, opacity: n } = this, { sizeRampElement: i, colorRampElement: c } = P(y, this.messages, n);
     if (!i)
       return null;
-    const p = this.messages.previewColorRampAriaLabel, d = g(i, "above", !0), m = g(i, "below", !0), v = 12, r = f(c, {
+    const p = this.messages.previewColorRampAriaLabel, d = f(i, "above", !0), m = f(i, "below", !0), v = 12, s = h(c, {
       width: v,
       height: d,
       rampAlignment: "vertical",
@@ -26,7 +26,7 @@ class I extends F {
       type: "above",
       cssEffectFilter: this.cssEffectFilter,
       ariaLabel: p
-    }), w = f(c, {
+    }), w = h(c, {
       width: v,
       height: m,
       rampAlignment: "vertical",
@@ -34,8 +34,8 @@ class I extends F {
       type: "below",
       cssEffectFilter: this.cssEffectFilter,
       ariaLabel: p
-    }), u = U(i), s = i.infos.map((a) => a.label), x = s.map((a, t) => t === 0 ? l`<div class=${b(a ? r ? "univariate-above-below-label" : "ramp-label" : void 0)}>${a}</div>` : t === 2 ? l`<div></div>` : null), $ = s.length - 1, R = Math.floor(s.length / 2), L = s.map((a, t) => t === R || t === $ ? l`<div class=${b(a ? r ? "univariate-above-below-label" : "ramp-label" : void 0)}>${a}</div>` : null), E = { display: "table-cell", verticalAlign: "middle" }, z = { marginTop: `${u}px` }, A = { height: `${d}px` }, S = { height: `${m}px` };
-    return l`<div style=${e(j)}><div class="layer-body">${i.infos.map((a, t) => l`<div class="layer-row"><div class="symbol" style=${e(E)}>${a.preview}</div>${!r && t % 2 === 0 ? l`<div class="layer-cell layer-cell-info">${s[t]}</div>` : null}</div>`)}</div>${r ? l`<div style=${e(z)}><div style=${e(h)}><div style=${e(o)}><div class="ramps">${r}</div></div><div style=${e(o)}><div class="ramp-labels" style=${e(A)}>${x}</div></div></div><div style=${e(h)}><div style=${e(o)}><div class="ramps">${w}</div></div><div style=${e(o)}><div class="ramp-labels" style=${e(S)}>${L}</div></div></div></div>` : null}</div>`;
+    }), u = U(i), r = i.infos.map((a) => a.label), $ = r.map((a, t) => t === 0 ? l`<div class=${b(a ? s ? "univariate-above-below-label" : "ramp-label" : void 0)}>${a}</div>` : t === 2 ? l`<div></div>` : null), x = r.length - 1, R = Math.floor(r.length / 2), L = r.map((a, t) => t === R || t === x ? l`<div class=${b(a ? s ? "univariate-above-below-label" : "ramp-label" : void 0)}>${a}</div>` : null), E = { display: "table-cell", verticalAlign: "middle" }, z = { marginTop: `${u}px` }, A = { height: `${d}px` }, S = { height: `${m}px` };
+    return l`<div style=${e(j)}><div class="layer-body">${i.infos.map((a, t) => l`<div class="layer-row"><div class="symbol" style=${e(E)}>${a.preview}</div>${!s && t % 2 === 0 ? l`<div class="layer-cell layer-cell-info">${r[t]}</div>` : null}</div>`)}</div>${s ? l`<div style=${e(z)}><div style=${e(g)}><div style=${e(o)}><div class="ramps">${s}</div></div><div style=${e(o)}><div class="ramp-labels" style=${e(A)}>${$}</div></div></div><div style=${e(g)}><div style=${e(o)}><div class="ramps">${w}</div></div><div style=${e(o)}><div class="ramp-labels" style=${e(S)}>${L}</div></div></div></div>` : null}</div>`;
   }
 }
 k("arcgis-legend-classic-univariate-above-and-below-ramp", I);

package/dist/components/arcgis-legend-classic-univariate-color-size-ramp/customElement.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { css as w, html as i } from "lit";
 import { LitElement as x, safeClassMap as o, safeStyleMap as e } from "@arcgis/lumina";
 import { classes as R } from "@arcgis/toolkit/dom";
 import { e as z, d as $, b as C, c as E, u as S, f as L, h as n } from "../../chunks/univariateUtils.js";
-const U = w`.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,.symbol{display:flex;justify-content:center}.ramps{margin-left:var(--calcite-spacing-md)}:dir(rtl) .ramps{margin-right:var(--calcite-spacing-md);margin-left:auto}.size-ramp~.layer-cell-info{width:80%;max-width:80%}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.ramp-label{position:relative;padding:0 var(--calcite-spacing-sm);line-height:1em;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)}: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)}.univariate-label{position:relative;margin-left:7px;line-height:1em;white-space:nowrap;font-size:var(--calcite-font-size-sm)}.univariate-label:before{display:block;position:absolute;top:.45em;left:-19px;border-width:1px 0 0;border-style:solid;width:14px;height:0;content:""}.univariate-label:first-child{top:calc(var(--calcite-font-size-sm) / 2.2 * -1)}.univariate-label:last-child{bottom:calc(var(--calcite-font-size-sm) / 2.2 * -1)}:dir(rtl) .univariate-label{margin-right:var(--calcite-spacing-sm);margin-left:auto}:dir(rtl) .univariate-label:before{right:-19px;left:auto}.univariate-above-below-symbol{display:flex;align-items:center;justify-content:center}`;
+const U = w`.layer-row,.symbol{display:flex;justify-content:center}.ramps{margin-left:var(--calcite-space-md)}:dir(rtl) .ramps{margin-right:var(--calcite-space-md);margin-left:auto}.size-ramp~.layer-cell-info{width:80%;max-width:80%}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.ramp-label{position:relative;padding:0 var(--calcite-space-sm);line-height:1em;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)}: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)}.univariate-label{position:relative;margin-left:7px;line-height:1em;white-space:nowrap;font-size:var(--calcite-font-size-sm)}.univariate-label:before{display:block;position:absolute;top:.45em;left:-19px;border-width:1px 0 0;border-style:solid;width:14px;height:0;content:""}.univariate-label:first-child{top:calc(var(--calcite-font-size-sm) / 2.2 * -1)}.univariate-label:last-child{bottom:calc(var(--calcite-font-size-sm) / 2.2 * -1)}:dir(rtl) .univariate-label{margin-right:var(--calcite-space-sm);margin-left:auto}:dir(rtl) .univariate-label:before{right:-19px;left:auto}.univariate-above-below-symbol{display:flex;align-items:center;justify-content:center}`;
 class A extends x {
   constructor() {
     super(...arguments), this.legendElement = null, this.opacity = 1;
@@ -27,8 +27,8 @@ class A extends x {
       type: "full",
       cssEffectFilter: this.cssEffectFilter,
       ariaLabel: this.messages.previewColorRampAriaLabel
-    }), f = a.infos.length - 1, g = a.infos.map((t, s) => s === 0 || s === f ? i`<div class=${o(t.label ? l ? "univariate-label" : "ramp-label" : void 0)}>${t.label}</div>` : null), b = { display: "table-cell", verticalAlign: "middle" }, h = { marginTop: `${m}px` }, y = { height: `${r}px` };
-    return i`<div style=${e(S)}><div class="layer-body">${a.infos.map((t) => i`<div class=${o(R("layer-row", "size-ramp"))}><div class="symbol" style=${e(b)}>${t.preview}</div></div>`)}</div><div style=${e(h)}><div style=${e(L)}><div style=${e(n)}><div class="ramps">${v}</div></div><div style=${e(n)}><div class="ramp-labels" style=${e(y)}>${g}</div></div></div></div></div>`;
+    }), f = a.infos.length - 1, b = a.infos.map((t, s) => s === 0 || s === f ? i`<div class=${o(t.label ? l ? "univariate-label" : "ramp-label" : void 0)}>${t.label}</div>` : null), h = { display: "table-cell", verticalAlign: "middle" }, g = { marginTop: `${m}px` }, y = { height: `${r}px` };
+    return i`<div style=${e(S)}><div class="layer-body">${a.infos.map((t) => i`<div class=${o(R("layer-row", "size-ramp"))}><div class="symbol" style=${e(h)}>${t.preview}</div></div>`)}</div><div style=${e(g)}><div style=${e(L)}><div style=${e(n)}><div class="ramps">${v}</div></div><div style=${e(n)}><div class="ramp-labels" style=${e(y)}>${b}</div></div></div></div></div>`;
   }
 }
 u("arcgis-legend-classic-univariate-color-size-ramp", A);