@arcgis/map-components 5.0.0-next.17 → 5.0.0-next.171

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

@@ -1,20 +1,11 @@
-import { c as C } from "../../chunks/runtime.js";
-import { css as E, html as r } from "lit";
-import { LitElement as L, safeClassMap as a, safeStyleMap as t } from "@arcgis/lumina";
+/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
+import { c as E } from "../../chunks/runtime.js";
+import { css as A, html as t } from "lit";
+import { LitElement as L, safeStyleMap as a } from "@arcgis/lumina";
 import { useDirection as S } from "@arcgis/lumina/controllers";
-import { f as k, h as B, b, c as f, a as U } from "../../chunks/univariateUtils.js";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.17 */
-const F = E`.arcgis-legend--card__layer-row{display:flex;align-items:center}.arcgis-legend--card__symbol{display:block;margin:auto}.arcgis-legend--card__symbol-container{position:relative}.arcgis-legend__ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.arcgis-legend__layer-cell{padding:var(--calcite-spacing-xxs) 0;min-width:100px;vertical-align:middle;word-break:break-word}.arcgis-legend__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)}.arcgis-univariate-above-and-below-ramp__color--card{position:relative}.arcgis-univariate-above-and-below-ramp__color--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)}.arcgis-univariate-above-and-below-ramp__symbol{display:flex;align-items:center;justify-content:center}`, i = {
-  layerRow: "arcgis-legend--card__layer-row",
-  symbol: "arcgis-legend--card__symbol",
-  symbolContainer: "arcgis-legend--card__symbol-container",
-  rampLabelsContainer: "arcgis-legend__ramp-labels",
-  layerInfo: "arcgis-legend__layer-cell arcgis-legend__layer-cell--info",
-  univariateAboveAndBelowColorRamp: "arcgis-univariate-above-and-below-ramp__color--card"
-};
-class D extends L {
+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}`;
+class B extends L {
   constructor() {
     super(...arguments), this._direction = S(), this.legendElement = null, this.opacity = 1;
   }
@@ -25,40 +16,40 @@ class D extends L {
     this.styles = F;
   }
   render() {
-    const { legendElement: y, opacity: o } = this, { sizeRampElement: e, colorRampElement: n } = k(y, this.messages, o, "horizontal");
+    const { legendElement: b, opacity: l } = this, { sizeRampElement: e, colorRampElement: r } = k(b, this.messages, l, "horizontal");
     if (!e)
       return null;
-    const w = B(e, "full", !0, "horizontal"), h = b(e, "above", !0, "horizontal"), _ = b(e, "below", !0, "horizontal"), c = 12, d = this.messages?.previewColorRampAriaLabel, m = f(n, {
+    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,
-      height: c,
+      height: s,
       rampAlignment: "horizontal",
-      opacity: o,
+      opacity: l,
       type: "above",
       cssEffectFilter: this.cssEffectFilter,
-      ariaLabel: d
-    }), u = f(n, {
-      width: _,
-      height: c,
+      ariaLabel: n
+    }), w = f(r, {
+      width: y,
+      height: s,
       rampAlignment: "horizontal",
-      opacity: o,
+      opacity: l,
       type: "below",
       cssEffectFilter: this.cssEffectFilter,
-      ariaLabel: d
-    }), p = U(e, "card"), g = e.infos.map((l) => l.label), R = g.length - 1, x = g.map((l, v) => v === 0 || v === R ? r`<div>${l}</div>` : null), $ = { display: "flex", flexDirection: "column" }, z = { display: "flex", flexDirection: "row" }, s = {
+      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 = {
       marginTop: "3px",
       display: "flex"
     };
-    this._direction === "rtl" ? s.marginRight = `${p}px` : s.marginLeft = `${p}px`;
-    const A = {
-      width: `${w}px`,
+    this._direction === "rtl" ? o.marginRight = `${d}px` : o.marginLeft = `${d}px`;
+    const $ = {
+      width: `${g}px`,
       display: "flex",
       flexDirection: "row",
       justifyContent: "space-between"
     };
-    return r`<div class=${a(i.layerRow)} style=${t($)}><div class=${a(i.symbolContainer)} style=${t(z)}>${e.infos.map((l) => r`<div class=${a(i.symbol)}>${l.preview}</div>`)}</div>${m ? r`<div class=${a(i.univariateAboveAndBelowColorRamp)} style=${t(s)}><div>${m}</div><div>${u}</div></div>` : null}<div class=${a(i.layerInfo)}><div class=${a(i.rampLabelsContainer)} style=${t(A)}>${x}</div></div></div>`;
+    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>`;
   }
 }
-C("arcgis-legend-card-univariate-above-and-below-ramp", D);
+E("arcgis-legend-card-univariate-above-and-below-ramp", B);
 export {
-  D as LegendCardUnivariateAboveAndBelowRamp
+  B as LegendCardUnivariateAboveAndBelowRamp
 };

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

@@ -1,62 +1,53 @@
-import { c as _ } from "../../chunks/runtime.js";
-import { css as u, html as o } from "lit";
-import { LitElement as x, safeClassMap as a, safeStyleMap as l } from "@arcgis/lumina";
-import { useDirection as R } from "@arcgis/lumina/controllers";
-import { g as $, h as C, b as z, c as E, a as S } from "../../chunks/univariateUtils.js";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.17 */
-const L = u`.arcgis-legend--card__layer-row,.arcgis-legend--card__symbol{display:flex;align-items:center}.arcgis-legend--card__symbol-container{position:relative}.arcgis-legend__ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.arcgis-legend__layer-cell{padding:var(--calcite-spacing-xxs) 0;min-width:100px;vertical-align:middle;word-break:break-word}.arcgis-legend__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)}.arcgis-univariate-above-and-below-ramp__color--card{position:relative}.arcgis-univariate-above-and-below-ramp__color--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)}.arcgis-univariate-above-and-below-ramp__symbol{display:flex;align-items:center;justify-content:center}`, i = {
-  layerRow: "arcgis-legend--card__layer-row",
-  symbol: "arcgis-legend--card__symbol",
-  symbolContainer: "arcgis-legend--card__symbol-container",
-  rampLabelsContainer: "arcgis-legend__ramp-labels",
-  layerInfo: "arcgis-legend__layer-cell arcgis-legend__layer-cell--info",
-  univariateAboveAndBelowColorRamp: "arcgis-univariate-above-and-below-ramp__color--card"
-};
-class k extends x {
+/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
+import { c as b } from "../../chunks/runtime.js";
+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 {
   constructor() {
-    super(...arguments), this._direction = R(), this.legendElement = null, this.opacity = 1;
+    super(...arguments), this._direction = x(), this.legendElement = null, this.opacity = 1;
   }
   static {
     this.properties = { cssEffectFilter: 1, legendElement: 0, opacity: 9, messages: 0 };
   }
   static {
-    this.styles = L;
+    this.styles = C;
   }
   render() {
-    const { legendElement: c, opacity: d } = this, { sizeRampElement: e, colorRampElement: m } = $(c, this.messages, "horizontal");
+    const { legendElement: s, opacity: n } = this, { sizeRampElement: e, colorRampElement: c } = R(s, this.messages, "horizontal");
     if (!e)
       return null;
-    const p = C(e, "full", !1, "horizontal"), g = z(e, "full", !1, "horizontal"), v = E(m, {
-      width: g,
+    const m = z(e, "full", !1, "horizontal"), d = $(e, "full", !1, "horizontal"), p = E(c, {
+      width: d,
       height: 12,
       rampAlignment: "horizontal",
-      opacity: d,
+      opacity: n,
       type: "full",
       cssEffectFilter: this.cssEffectFilter,
       ariaLabel: this.messages?.previewColorRampAriaLabel
-    }), s = S(e, "card"), f = e.infos.length - 1, y = e.infos.map((t, n) => n === 0 || n === f ? o`<div>${t.label}</div>` : null), b = {
+    }), 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 = {
       display: "flex",
       flexDirection: "column"
-    }, h = {
+    }, y = {
       display: "flex",
       flexDirection: "row"
-    }, r = {
+    }, t = {
       marginTop: "3px",
       display: "flex"
     };
-    this._direction === "rtl" ? r.marginRight = `${s}px` : r.marginLeft = `${s}px`;
-    const w = {
-      width: `${p}px`,
+    this._direction === "rtl" ? t.marginRight = `${r}px` : t.marginLeft = `${r}px`;
+    const h = {
+      width: `${m}px`,
       display: "flex",
       flexDirection: "row",
       justifyContent: "space-between"
     };
-    return o`<div class=${a(i.layerRow)} style=${l(b)}><div class=${a(i.symbolContainer)} style=${l(h)}>${e.infos.map((t) => o`<div class=${a(i.symbol)}>${t.preview}</div>`)}</div><div class=${a(i.univariateAboveAndBelowColorRamp)} style=${l(r)}><div>${v}</div></div><div class=${a(i.layerInfo)}><div class=${a(i.rampLabelsContainer)} style=${l(w)}>${y}</div></div></div>`;
+    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>`;
   }
 }
-_("arcgis-legend-card-univariate-color-size-ramp", k);
+b("arcgis-legend-card-univariate-color-size-ramp", k);
 export {
   k as LegendCardUnivariateColorSizeRamp
 };

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

@@ -1,22 +1,14 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
 import { c as l } from "../../chunks/runtime.js";
-import { css as d, html as i } from "lit";
-import { watch as o } from "@arcgis/core/core/reactiveUtils.js";
-import { substitute as g } from "@arcgis/core/intl.js";
-import { LitElement as h, safeClassMap as a } from "@arcgis/lumina";
-import { classes as m } from "@arcgis/toolkit/dom";
-import { H as f } from "../../chunks/heading.js";
-import { g as _ } from "../../chunks/globalCss.js";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.17 */
-const v = d`.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}.arcgis-legend--card__message{padding:.5em 1em}.arcgis-legend--card__service-caption-text{margin:0}.arcgis-legend--card__service-content{display:flex;flex:1}.arcgis-legend--card__service-content>arcgis-legend-card-element:not(:first-child){border-left:1px solid var(--calcite-color-border-2)}.arcgis-legend--card__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}.arcgis-legend--card__service-caption-container{border-bottom:1px solid var(--calcite-color-border-2);padding:var(--calcite-spacing-md)}`, n = {
-  message: "arcgis-legend--card__message",
-  serviceCaptionText: "arcgis-legend--card__service-caption-text",
-  serviceContent: "arcgis-legend--card__service-content",
-  service: "arcgis-legend--card__service",
-  serviceCaptionContainer: "arcgis-legend--card__service-caption-container"
-}, u = 768;
-class p extends h {
+import { css as a, html as i } 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;
+class v extends d {
   constructor() {
     super(...arguments), this.stacked = !1, this.headingLevel = 3, this.layout = "auto", this.type = "card";
   }
@@ -24,27 +16,27 @@ class p extends h {
     this.properties = { stacked: 16, activeLayerInfos: 0, headingLevel: 9, messages: 0, view: 0, layout: 1, type: 32 };
   }
   static {
-    this.styles = v;
+    this.styles = f;
   }
   loaded() {
     this.manager.onLifecycle(() => [
-      o(() => [this.layout, this.view.width], () => {
+      c(() => [this.layout, this.view.width], () => {
         this.stacked = this.layout === "stack" || (!this.layout || this.layout === "auto") && this.view.width <= u;
       }, { initial: !0 })
     ]);
   }
   render() {
-    return (this.stacked ? this._renderCarousel() : this._renderLayers()) || i`<div class=${a(n.message)}>${this.messages.noLegend}</div>`;
+    return (this.stacked ? this._renderCarousel() : this._renderLayers()) || i`<div class="message">${this.messages.noLegend}</div>`;
   }
   _renderTitle(e) {
-    return i`<div class=${a(n.serviceCaptionContainer)}>${f({ class: m(n.serviceCaptionText, _.heading), level: this.headingLevel, children: e })}</div>`;
+    return i`<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 .label=${this.messages.carousel ?? ""}>${e.map((s, r) => i`<calcite-carousel-item .label=${g(this.messages?.pagination?.pageText ?? "", {
+    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 ?? "", {
       index: r + 1,
       total: e.length
     })}>${s}</calcite-carousel-item>`)}</calcite-carousel>` : null;
@@ -58,7 +50,7 @@ class p extends h {
       return null;
     if (e.children.length) {
       const t = e.children.toArray().map(this._renderLegendForLayer, this);
-      return i`<section class=${a(n.service)}>${this._renderTitle(e.title)}<div class=${a(n.serviceContent)}>${t}</div></section>`;
+      return i`<section class="service">${this._renderTitle(e.title)}<div class="service-content">${t}</div></section>`;
     }
     return this._renderLegendElementsForLayer(e);
   }
@@ -67,7 +59,7 @@ class p extends h {
     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=${a(n.service)}>${this._renderTitle(e.title)}<div class=${a(n.serviceContent)}>${s}</div></section>`;
+    return i`<section class="service">${this._renderTitle(e.title)}<div class="service-content">${s}</div></section>`;
   }
   _renderSections(e, t) {
     if (!e.ready)
@@ -78,12 +70,12 @@ class p extends h {
     const s = e.legendElements;
     if (s?.length)
       for (const r of s) {
-        const c = 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>`;
-        c && t.push(c);
+        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>`;
+        n && t.push(n);
       }
   }
 }
-l("arcgis-legend-card-view", p);
+l("arcgis-legend-card-view", v);
 export {
-  p as LegendCardView
+  v as LegendCardView
 };

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

@@ -1,21 +1,10 @@
-import { c } from "../../chunks/runtime.js";
-import { css as n, html as s } from "lit";
-import { LitElement as p, safeClassMap as i, safeStyleMap as g } from "@arcgis/lumina";
-import { s as o, c as m } from "../../chunks/utils2.js";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.17 */
-const d = n`.arcgis-legend__layer-row{display:flex}.arcgis-legend__layer-cell{padding:var(--calcite-spacing-xxs) 0;min-width:100px;vertical-align:middle;word-break:break-word}.arcgis-legend__layer-cell--symbols{min-width:10px;text-align:center}.arcgis-legend__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)}.arcgis-legend__ramps{margin-left:var(--calcite-spacing-sm)}:dir(rtl) .arcgis-legend__ramps{margin-right:var(--calcite-spacing-sm);margin-left:auto}.arcgis-legend__color-ramp{width:24px}.arcgis-legend__opacity-ramp{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExODcxRkM3N0RBQzA4QkVDRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEOTY4RkNFNjM1MzYxMUU0ODlDMUFFQ0M2REU5QzFCNCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEOTY4RkNFNTM1MzYxMUU0ODlDMUFFQ0M2REU5QzFCNCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MDExNzQwNzIwNjgxMTg3MUZDNzdEQUMwOEJFQ0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MDExNzQwNzIwNjgxMTg3MUZDNzdEQUMwOEJFQ0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6SLS5VAAAAKElEQVR42mI8c+YMAwwYGxvD2UwMOADpEoz///+Hc86ePUsLOwACDABC1ghwV8TLOQAAAABJRU5ErkJggg==)}.arcgis-legend__ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.arcgis-legend__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)}.arcgis-legend__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:""}.arcgis-legend__ramp-label:first-child{margin-top:calc(var(--calcite-font-size-sm) / 3 * -1)}.arcgis-legend__ramp-label:last-child{bottom:calc(var(--calcite-font-size-sm) * .25 * -1)}.arcgis-legend-layer-caption{display:table-caption;padding:var(--calcite-spacing-sm) 0}:dir(rtl) .arcgis-legend__ramp-label:before{right:auto;left:100%;border-width:3px 0 3px 4px;border-color:transparent transparent transparent var(--calcite-color-text-1)}`, l = {
-  layerRow: "arcgis-legend__layer-row",
-  layerInfo: "arcgis-legend__layer-cell arcgis-legend__layer-cell--info",
-  symbolContainer: "arcgis-legend__layer-cell arcgis-legend__layer-cell--symbols",
-  rampContainer: "arcgis-legend__ramps",
-  colorRamp: "arcgis-legend__color-ramp",
-  opacityRamp: "arcgis-legend__opacity-ramp",
-  rampLabelsContainer: "arcgis-legend__ramp-labels",
-  rampLabel: "arcgis-legend__ramp-label"
-};
-class b extends p {
+/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
+import { c as r } from "../../chunks/runtime.js";
+import { css as s, html as t } from "lit";
+import { LitElement as c, safeStyleMap as p, safeClassMap as n } from "@arcgis/lumina";
+import { s as o, a as m } from "../../chunks/utils.js";
+const d = s`.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/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExODcxRkM3N0RBQzA4QkVDRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEOTY4RkNFNjM1MzYxMUU0ODlDMUFFQ0M2REU5QzFCNCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEOTY4RkNFNTM1MzYxMUU0ODlDMUFFQ0M2REU5QzFCNCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MDExNzQwNzIwNjgxMTg3MUZDNzdEQUMwOEJFQ0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MDExNzQwNzIwNjgxMTg3MUZDNzdEQUMwOEJFQ0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6SLS5VAAAAKElEQVR42mI8c+YMAwwYGxvD2UwMOADpEoz///+Hc86ePUsLOwACDABC1ghwV8TLOQAAAABJRU5ErkJggg==)}.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 g extends c {
   constructor() {
     super(...arguments), this.legendElement = null, this.opacity = 1;
   }
@@ -29,23 +18,23 @@ class b extends p {
     const e = this.legendElement.preview;
     if (!e)
       return null;
-    const a = this.legendElement.type === "opacity-ramp", r = a ? l.opacityRamp : "";
-    e.className = `${l.colorRamp} ${r}`, 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", l = a ? "opacity-ramp" : "";
+    e.className = `color-ramp ${l}`, this.opacity != null && (e.style.opacity = this.opacity.toString());
+    const i = a ? this.messages.previewOpacityRampAriaLabel : this.messages.previewColorRampAriaLabel;
+    return o(e, i), e;
   }
   render() {
     const { legendElement: e, _preview: a } = this;
     if (!a)
       return null;
-    const r = { height: a.style.height };
-    return s`<div class=${i(l.layerRow)}><div class=${i(l.symbolContainer)}><div class=${i(l.rampContainer)}>${a}</div></div><div class=${i(l.layerInfo)}><div class=${i(l.rampLabelsContainer)} style=${g(r)}>${e.infos.map((t) => this._renderRampLabel(t, e.type))}</div></div></div>`;
+    const l = { height: a.style.height };
+    return t`<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=${p(l)}>${e.infos.map((i) => this._renderRampLabel(i, e.type))}</div></div></div>`;
   }
   _renderRampLabel(e, a) {
-    return s`<div class=${i(e.label ? l.rampLabel : void 0)}>${m(e, a, this.messages)}</div>`;
+    return t`<div class=${n(e.label ? "ramp-label" : void 0)}>${m(e, a, this.messages)}</div>`;
   }
 }
-c("arcgis-legend-classic-color-ramp", b);
+r("arcgis-legend-classic-color-ramp", g);
 export {
-  b as ArcgisLegendClassicColorRamp
+  g as ArcgisLegendClassicColorRamp
 };

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

@@ -1,24 +1,11 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
 import { c as v } from "../../chunks/runtime.js";
-import { css as $, html as a } from "lit";
-import { LitElement as w, safeClassMap as t, nothing as g, safeStyleMap as f } from "@arcgis/lumina";
-import { classes as d } from "@arcgis/toolkit/dom";
-import { b as u, s as p, i as E, a as m, g as h } from "../../chunks/utils2.js";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.17 */
-const L = $`.arcgis-legend__layer-table{display:flex;flex-flow:column;margin-bottom:var(--calcite-spacing-md);width:100%}.arcgis-legend__layer-table--size-ramp{display:table}.arcgis-legend__layer-table--size-ramp .arcgis-legend__layer-cell{display:table-cell}.arcgis-legend__layer-caption{display:table-caption;padding:var(--calcite-spacing-sm) 0;word-break:break-word}.arcgis-legend__layer-body{margin-left:var(--calcite-spacing-sm)}:dir(rtl) .arcgis-legend__layer-body{margin-right:var(--calcite-spacing-sm);margin-left:0;overflow:auto}.arcgis-legend__layer-row{display:flex}.arcgis-legend__layer-table--size-ramp .arcgis-legend__layer-row{display:table-row}.arcgis-legend__layer-cell{padding:var(--calcite-spacing-xxs) 0;min-width:100px;vertical-align:middle;word-break:break-word;display:flex;align-items:center}.arcgis-legend__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)}.arcgis-legend__imagery-layer-image--stretched{display:block;margin-bottom:-2px}.arcgis-legend__imagery-layer-info--stretched{padding:0 2px;vertical-align:top}.arcgis-legend__layer-cell--symbols{min-width:10px;text-align:center}.arcgis-legend__symbol{display:flex;justify-content:center}`, s = {
-  layerTable: "arcgis-legend__layer-table",
-  layerTableSizeRamp: "arcgis-legend__layer-table--size-ramp",
-  layerCaption: "arcgis-legend__layer-caption",
-  layerBody: "arcgis-legend__layer-body",
-  layerRow: "arcgis-legend__layer-row",
-  layerInfo: "arcgis-legend__layer-cell arcgis-legend__layer-cell--info",
-  imageryLayerStretchedImage: "arcgis-legend__imagery-layer-image--stretched",
-  imageryLayerInfoStretched: "arcgis-legend__imagery-layer-info--stretched",
-  symbolContainer: "arcgis-legend__layer-cell arcgis-legend__layer-cell--symbols",
-  symbol: "arcgis-legend__symbol"
-};
-class x extends w {
+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/utils.js";
+const L = $`.layer-table{display:table;margin-bottom:var(--calcite-spacing-md);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 {
   static {
     this.properties = { cssEffectFilter: 1, layer: 0, legendElement: 0, messages: 0 };
   }
@@ -26,69 +13,67 @@ class x extends w {
     this.styles = L;
   }
   render() {
-    const e = this._renderLegendElement(), r = u(this.legendElement, this.messages), l = r ? a`<div class=${t(s.layerCaption)}>${r}</div>` : null, i = {
-      [s.layerTableSizeRamp]: this.legendElement.type === "size-ramp"
-    };
-    return a`<section class=${t(d(s.layerTable, i))}>${l}${e}</section>`;
+    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>`;
   }
   _renderLegendElement() {
     switch (this.legendElement.type) {
       case "symbol-table":
         return this._renderSymbolTable(this.legendElement);
       case "size-ramp":
-        return a`<arcgis-legend-classic-size-ramp .legendElement=${this.legendElement} .messages=${this.messages}></arcgis-legend-classic-size-ramp>`;
+        return s`<arcgis-legend-classic-size-ramp .legendElement=${this.legendElement} .messages=${this.messages}></arcgis-legend-classic-size-ramp>`;
       case "color-ramp":
       case "opacity-ramp":
       case "heatmap-ramp":
       case "stretch-ramp":
-        return a`<arcgis-legend-classic-color-ramp .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-classic-color-ramp>`;
+        return s`<arcgis-legend-classic-color-ramp .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-classic-color-ramp>`;
       case "relationship-ramp":
-        return a`<arcgis-legend-relationship-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .opacity=${this.layer.opacity} .messages=${this.messages}></arcgis-legend-relationship-ramp>`;
+        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), a`<div>${e}</div>`;
+        return p(e, this.messages.previewPieChartAriaLabel), s`<div>${e}</div>`;
       }
       case "univariate-above-and-below-ramp":
-        return a`<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>`;
+        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>`;
       case "univariate-color-size-ramp":
-        return a`<arcgis-legend-classic-univariate-color-size-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-classic-univariate-color-size-ramp>`;
+        return s`<arcgis-legend-classic-univariate-color-size-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-classic-univariate-color-size-ramp>`;
       default:
         return null;
     }
   }
   _renderSymbolTable(e) {
-    const r = e.infos.map((l) => this._renderElementInfo(l, e.legendType)).filter(Boolean);
-    return r.length ? a`<div class=${t(s.layerBody)}>${r}</div>` : null;
+    const a = e.infos.map((i) => this._renderElementInfo(i, e.legendType)).filter(Boolean);
+    return a.length ? s`<div class="layer-body">${a}</div>` : null;
   }
-  _renderElementInfo(e, r) {
-    const { layer: l } = this, i = "label" in e ? e.label : null;
+  _renderElementInfo(e, a) {
+    const { layer: i } = this, l = "label" in e ? e.label : null;
     if ("type" in e && e.type)
-      return e ? a`<arcgis-legend-classic-element .cssEffectFilter=${this.cssEffectFilter} .layer=${l} .legendElement=${e} .messages=${this.messages}></arcgis-legend-classic-element>` : null;
+      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 c = E(l, r), n = {
-      [s.imageryLayerInfoStretched]: c
-    }, o = {
-      [s.imageryLayerInfoStretched]: c
+    const r = f(i, a), t = {
+      "imagery-layer-info-stretched": r
     };
-    return a`<div class=${t(s.layerRow)}><div class=${t(d(s.symbolContainer, o))}>${this._renderPreview(e, c)}</div><div class=${t(d(s.layerInfo, n))}>${m(this.messages, i, !1) || ""}</div></div>`;
+    return s`<div class="layer-row"><div class=${n(g("layer-cell", "layer-cell-symbols", {
+      "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>`;
   }
-  _renderPreview(e, r) {
-    const { layer: l } = this;
+  _renderPreview(e, a) {
+    const { layer: i } = this;
     if ("preview" in e && e.preview) {
-      const { preview: i } = e, c = "previewAriaLabel" in e ? e.previewAriaLabel : null, n = "label" in e ? m(this.messages, e.label, !1) : null;
-      return p(i, h(this.messages, c || n)), a`<div class=${t(s.symbol)}>${i}</div>`;
+      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>`;
     }
-    return "src" in e && e.src ? this._renderImage(e, l, r) : null;
+    return "src" in e && e.src ? this._renderImage(e, i, a) : null;
   }
-  _renderImage(e, r, l) {
-    const { previewAriaLabel: i, src: c, opacity: n } = e, o = m(this.messages, e.label, !1), b = {
-      [s.imageryLayerStretchedImage]: l,
-      [s.symbol]: !l
-    }, _ = {
-      opacity: `${n ?? r.opacity}`
-    }, y = h(this.messages, i || o);
-    return a`<img alt=${y ?? g} .ariaLabel=${y} class=${t(d(b))} height=${e.height ?? void 0 ?? g} src=${c ?? g} style=${f(_)} width=${e.width ?? void 0 ?? g}>`;
+  _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}>`;
   }
 }
 v("arcgis-legend-classic-element", x);

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

@@ -1,20 +1,11 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
 import { c as t } from "../../chunks/runtime.js";
-import { css as c, html as l } from "lit";
-import { LitElement as m, safeClassMap as i } from "@arcgis/lumina";
-import { classes as n } from "@arcgis/toolkit/dom";
-import { a as g, s as o, g as d } from "../../chunks/utils2.js";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.17 */
-const p = c`.arcgis-legend__size-ramp--container{margin-left:var(--calcite-spacing-sm);display:table}:dir(rtl) .arcgis-legend__size-ramp--container{margin-right:var(--calcite-spacing-sm);margin-left:0;overflow:auto}.arcgis-legend__size-ramp--row{display:table-row}.arcgis-legend__size-ramp--cell{padding:var(--calcite-spacing-xxs) 0;min-width:100px;vertical-align:middle;word-break:break-word;display:table-cell}.arcgis-legend__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)}.arcgis-legend__size-ramp--symbol-container{min-width:10px;text-align:center}.arcgis-legend__size-ramp--symbol{display:flex;justify-content:center}`, e = {
-  container: "arcgis-legend__size-ramp--container",
-  row: "arcgis-legend__size-ramp--row",
-  cell: "arcgis-legend__size-ramp--cell",
-  label: "arcgis-legend__size-ramp--label",
-  symbol: "arcgis-legend__size-ramp--symbol",
-  symbolContainer: "arcgis-legend__size-ramp--symbol-container"
-};
-class _ extends m {
+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/utils.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}`;
+class g extends m {
   constructor() {
     super(...arguments), this.legendElement = null;
   }
@@ -22,21 +13,21 @@ class _ extends m {
     this.properties = { legendElement: 0, messages: 0 };
   }
   static {
-    this.styles = p;
+    this.styles = d;
   }
   render() {
-    const s = this.legendElement.infos.map((a) => this._renderRow(a)).filter(Boolean);
-    return s.length ? this.legendElement.theme === "spike" ? l`<arcgis-legend-spike-ramp .legendElement=${this.legendElement} .messages=${this.messages}></arcgis-legend-spike-ramp>` : l`<div class=${i(e.container)}>${s}</div>` : null;
+    const e = this.legendElement.infos.map((s) => this._renderRow(s)).filter(Boolean);
+    return e.length ? this.legendElement.theme === "spike" ? i`<arcgis-legend-spike-ramp .legendElement=${this.legendElement} .messages=${this.messages}></arcgis-legend-spike-ramp>` : i`<div class="size-ramp-container">${e}</div>` : null;
   }
-  _renderRow(s) {
-    const { preview: a } = s;
-    if (!a)
+  _renderRow(e) {
+    const { preview: s } = e;
+    if (!s)
       return null;
-    const r = g(this.messages, s.label, !1);
-    return o(a, d(this.messages, r)), l`<div class=${i(e.row)}><div class=${i(n(e.cell, e.symbolContainer))}><div class=${i(e.symbol)}>${a}</div></div><div class=${i(n(e.cell, e.label))}>${r}</div></div>`;
+    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>`;
   }
 }
-t("arcgis-legend-classic-size-ramp", _);
+t("arcgis-legend-classic-size-ramp", g);
 export {
-  _ as ArcgisLegendClassicSizeRamp
+  g as ArcgisLegendClassicSizeRamp
 };