@arcgis/map-components 5.2.0-next.9 → 5.2.0-next.90

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

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

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

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

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

@@ -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);min-width:fit-content;display:flex;flex-direction:column;flex:1}.service-caption-container{border-bottom:1px solid var(--calcite-color-border-2);padding:var(--calcite-spacing-md)}`, u = 768;
+const f = a`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}:host{display:flex;flex-direction:row;position:relative;transition:max-width .25s ease-in-out;overflow-x:auto}calcite-carousel-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

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

@@ -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;color:var(--calcite-color-text-1);font-size:var(--calcite-font-size-sm);font-weight:var(--calcite-font-weight-regular);padding-bottom:var(--calcite-space-sm)}.layer-row{display:table-row}.layer-body:has(>.layer-row+.layer-row)>.layer-row .layer-cell{padding-block:var(--calcite-space-2xs)}.layer-cell{vertical-align:middle;word-break:break-word;display:table-cell}.layer-cell-info{padding-inline-start:var(--calcite-space-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

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

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

@@ -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);

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

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

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

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