@arcgis/map-components 5.1.0-next.7 → 5.1.0-next.70

package/dist/components/arcgis-layer-list-new/layer-list-item/customElement.js

@@ -0,0 +1,139 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { html as c } from "lit";
+import { keyed as W } from "lit/directives/keyed.js";
+import { isLayerFromCatalog as he } from "@arcgis/core/layers/catalog/catalogUtils.js";
+import { safeClassMap as d, safeStyleMap as Ie, nothing as r, renderElement as Ae } from "@arcgis/lumina";
+import { classes as P } from "@arcgis/toolkit/dom";
+import { createRef as X, ref as Y } from "lit/directives/ref.js";
+import { g as Ce, c as ie } from "../../../chunks/action-utils.js";
+import { g as Te, i as Z, l as Se, a as Me, c as xe, b as Le, d as Ee } from "../../../chunks/layer-list-utils.js";
+import { s as ke } from "../../../chunks/component-utils.js";
+function D(i) {
+  return i && "visibilityMode" in i ? i.visibilityMode : null;
+}
+function ee(i, e) {
+  if (!("visible" in i))
+    return;
+  D(e) === "exclusive" && i.visible || (i.visible = !i.visible);
+}
+function we(i, e) {
+  i.panel.open = !i.panel.open, i.panel.open && e();
+}
+function Pe(i, e, n, u) {
+  i && n === e.layer?.uid && (ke(i), u?.(null));
+}
+function De(i, e, n) {
+  n.type === "toggle" && (n.value = !n.value), i(n, e);
+}
+function Fe(i) {
+  return i.actionsSections.map((e) => e.filter((n) => n.visible));
+}
+function le(i, e) {
+  const { icon: n } = e;
+  if (n)
+    return null;
+  const u = "image" in e ? e.image : void 0;
+  return u ? c`<span aria-hidden=true class=${d(P(i.itemActionIcon, { [i.itemActionImage]: !!u }))} style=${Ie(Ce(u))}></span>` : null;
+}
+function te(i, e, n) {
+  const { item: u, css: l, handleAction: y } = i, { active: A, disabled: f, title: g, type: C, indicator: v } = e, T = ie(e);
+  return c`<calcite-action .active=${C === "toggle" ? e.value : !1} data-action-id=${e.id ?? r} .disabled=${f} .icon=${T} .indicator=${v} .loading=${A} @click=${() => De(y, u, e)} scale=s slot=${(n ? void 0 : "actions-end") ?? r} .text=${g ?? ""} .textEnabled=${n} title=${g ?? void 0 ?? r}>${le(l, e)}</calcite-action>`;
+}
+function Oe(i) {
+  const { item: e, parent: n, hideStatusIndicators: u, css: l, visibilityAppearance: y, hideCatalogLayerList: A, dragEnabled: f = !1, rootGroupUid: g, listModeDisabled: C = !1, selectionMode: v, displayMode: T, layerTablesEnabled: S, showErrors: ne, parentTitles: F, selectedItems: ae, activeItem: ce, handleCatalogOpen: oe, handleTablesOpen: se, selectedDragItemLayerUid: re, handleSelectedDragItemLayerUidChange: de, handlePanelOpen: ue, messages: a, setCurrentActiveItem: O, clearActiveItem: R } = i, b = X(), M = X(), p = e.title || ("untitledTable" in a ? a.untitledTable : a.untitledLayer ?? "");
+  let V = null;
+  u || (V = Ae(c`<arcgis-layer-list-item-indicator .item=${e} .parent=${n} slot=content-end></arcgis-layer-list-item-indicator>`));
+  let G = null;
+  {
+    const { layer: t } = e, o = t && "persistenceEnabled" in t && (he(t) || !t.persistenceEnabled);
+    (i.showTemporaryLayerIndicators || i.showTemporaryTableIndicators) && o && (G = c`<calcite-icon class=${d(l.itemTemporaryIcon)} icon=temporary scale=s slot=content-start title=${a.temporary ?? r}></calcite-icon>`);
+  }
+  let H = null;
+  if ("visible" in e && "visibleToggle" in l && y) {
+    const t = D(n);
+    if (t !== "inherited") {
+      const o = Te({
+        visible: e.visible,
+        exclusive: t === "exclusive",
+        visibilityAppearance: y
+      }), s = y === "checkbox", m = a.layerVisibility;
+      H = c`<calcite-action class=${d(l.visibleToggle)} .icon=${s ? o : void 0} @click=${() => ee(e, n)} .slot=${s ? "actions-start" : "actions-end"} .text=${m ?? ""} title=${m ?? r}>${s ? null : c`<calcite-icon class=${d(P({
+        [l.visibleIcon]: t !== "exclusive" && e.visible
+      }))} .icon=${o} scale=s></calcite-icon>`}</calcite-action>`;
+    }
+  }
+  let U = null;
+  {
+    const t = e.panel;
+    t?.open && !t.disabled && !t.flowEnabled && (U = c`<div class=${d(l.itemContentBottom)} slot=content-bottom><arcgis-layer-list-item-panel .item=${e} .view=${i.view}></arcgis-layer-list-item-panel></div>`);
+  }
+  let q = null;
+  {
+    const t = e.panel;
+    if (t?.visible) {
+      const { open: o, title: s, disabled: m } = t, w = { icon: t.icon, image: t.image, indicator: !1 }, I = ie(w);
+      q = c`<calcite-action .active=${o} .disabled=${m} .icon=${I} @click=${() => we(e, ue)} slot=actions-end .text=${s ?? ""} title=${s ?? void 0 ?? r}>${le(l, t)}</calcite-action>`;
+    }
+  }
+  let B = null;
+  {
+    const t = e.layer, o = t?.type === "catalog-footprint", s = t?.type === "sublayer" && Z(t, "footprints");
+    "itemCatalogIcon" in l && (o || s) && (B = c`<calcite-icon class=${d(l.itemCatalogIcon)} icon=footprint scale=s slot=content-start></calcite-icon>`);
+  }
+  let N = null;
+  {
+    const t = e.layer, o = t?.type === "catalog-dynamic-group", s = t?.type === "sublayer" && Z(t, "layers-in-view");
+    "itemCatalogIcon" in l && (o || s) && (N = c`<calcite-icon class=${d(l.itemCatalogIcon)} icon=catalog-dataset scale=s slot=content-start></calcite-icon>`);
+  }
+  let _ = null;
+  if ("visible" in e) {
+    const t = e.layer;
+    !A && t?.type === "catalog-dynamic-group" && (_ = c`<calcite-action .disabled=${!t.visible} icon=chevron-right icon-flip-rtl @click=${() => oe?.(e)} scale=s slot=actions-end .text=${p ?? ""}></calcite-action>`);
+  }
+  let j = null, x = !1;
+  {
+    const t = e.layer;
+    if (S && t)
+      switch (t.type) {
+        case "knowledge-graph":
+          x = S.includes(t.type) && "tables" in t && !!t.tables?.length;
+          break;
+        case "map-image":
+        case "tile":
+          x = S.includes(t.type) && "subtables" in t && !!t.subtables?.length;
+          break;
+      }
+    "itemTableIcon" in l && "visible" in e && "tables" in a && x && (j = W(`${e.uid}-tables`, c`<calcite-list-item class=${d(l.item)} data-layer-id=${t?.id ?? r} drag-disabled .label=${a.tables} title=${a.tables ?? r} @calciteListItemSelect=${() => se?.(e)} .value=${e}><calcite-icon class=${d(l.itemTableIcon)} icon=table scale=s slot=content-start></calcite-icon><calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon></calcite-list-item>`));
+  }
+  let z = null;
+  if ("children" in e) {
+    const t = [...F ?? [], e.title], { children: o, layer: s } = e, m = s?.type !== "catalog-dynamic-group" && Se(e), w = C ? !1 : Me(s), I = s?.type === "group", ye = !w && !m && f && I, ve = f && "childrenSortable" in e && e.childrenSortable && xe(e), fe = m ? o?.filter(($) => !$.hidden && (ne || !$.error)).toArray().map(($) => Oe({ ...i, item: $, parent: e, parentTitles: t })) : null;
+    (m || ye) && (z = c`<calcite-list .canPull=${($) => i.canMove ? i.canMove($, "pull") : !1} .canPut=${($) => i.canMove ? i.canMove($, "put") : !1} data-item=${e.uid ?? r} data-layer-type=${g ?? r} .displayMode=${T} .dragEnabled=${ve} .group=${I ? g : `${g}-${s?.uid}`} .label=${e.title} selection-appearance=highlight .selectionMode=${v}>${fe}${j}</calcite-list>`);
+  }
+  let L = null;
+  e.error ? L = c`<div class=${d(l.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s width=full><div slot=message>${"tableError" in a ? a.tableError : a.layerError}</div></calcite-notice></div>` : "incompatible" in e && e.incompatible && "layerIncompatible" in a && (L = c`<div class=${d(l.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s tabindex=0 width=full ${Y(M)}><div slot=message>${a.layerIncompatible}</div></calcite-notice></div>`);
+  const J = Fe(e), E = e.actionsSections.reduce((t, o) => t + o.length, 0), K = Le(J), me = J.toArray().map((t) => c`<calcite-action-group>${t.toArray().map((o) => te(i, o, !0))}</calcite-action-group>`), $e = (t) => {
+    e.actionsOpen = t.currentTarget.open;
+  };
+  let Q = null;
+  E > 1 && (Q = c`<calcite-action-menu appearance=transparent .label=${a.menu ?? ""} .open=${e.actionsOpen} overlay-positioning=fixed placement=bottom-end slot=actions-end @calciteActionMenuOpen=${$e}><calcite-action icon=ellipsis scale=s slot=trigger .text=${a.options ?? ""} title=${a.options ?? r}></calcite-action>${me}</calcite-action-menu>`);
+  let k = null;
+  E === 1 && K ? k = te(i, K, !1) : E > 1 && (k = Q);
+  const be = "visibleAtCurrentTimeExtent" in e && "layerInvisibleAtTime" in a && !e.visibleAtCurrentTimeExtent ? `${p} (${a.layerInvisibleAtTime})` : "visibleAtCurrentScale" in e && "layerInvisibleAtScale" in a && !e.visibleAtCurrentScale ? `${p} (${a.layerInvisibleAtScale})` : p, ge = "parent" in e && e.parent?.layer?.type === "catalog", h = e.layer, pe = "visibleAtCurrentScale" in e && !e.visibleAtCurrentScale || "visibleAtCurrentTimeExtent" in e && !e.visibleAtCurrentTimeExtent;
+  return queueMicrotask(() => {
+    Pe(b.value ?? null, e, re, de), M.value && (i.handleTooltipReferenceChange?.(h?.uid, M.value), queueMicrotask(() => i.handleTooltipReferenceChange?.(h?.uid, null))), e.panel && (e.panel.container = b.value);
+  }), W(e.uid, c`<calcite-list-item class=${d(P(l.item, "itemActive" in l && { [l.itemActive]: ce?.uid === e.uid }))} data-item=${e.uid ?? r} data-layer-id=${h?.id ?? r} .dragDisabled=${!("sortable" in e && e.sortable) || ge} id=${h?.uid ?? r} .label=${p} .metadata=${{ parentTitles: F ?? [], _title: p }} .expanded=${"open" in e && e.open} .selected=${v !== "none" ? ae.includes(e) : !1} title=${be ?? r} .unavailable=${pe} .value=${e} @focusin=${() => {
+    O?.(e), b.value?.classList.add(l.itemActive);
+  }} @focusout=${() => {
+    R?.(), b.value?.classList.remove(l.itemActive);
+  }} @mouseover=${() => {
+    O?.(e), b.value?.classList.add(l.itemActive);
+  }} @mouseleave=${() => {
+    R?.(), b.value?.classList.remove(l.itemActive);
+  }} @calciteListItemSelect=${(t) => "visible" in e && Ee(t.currentTarget, i.operationalItems) === e && v === "none" && D(n) !== "inherited" && ee(e, n)} @calciteListItemToggle=${(t) => {
+    "open" in e && (t.stopPropagation(), e.open = t.target.expanded);
+  }} ${Y(b)}>${B}${N}${V}${H}${_}${G}${z}${L}${U}${q}${k}</calcite-list-item>`);
+}
+export {
+  Oe as ArcgisLayerListItem
+};

package/dist/components/{arcgis-layer-list-item → arcgis-layer-list-new/layer-list-item}/index.js

@@ -1,9 +1,10 @@
-import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-action";
-import "@esri/calcite-components/components/calcite-action-menu";
-import "@esri/calcite-components/components/calcite-action-group";
-import "@esri/calcite-components/components/calcite-list";
+import "../../arcgis-layer-list-item-indicator/index.js";
+import "@esri/calcite-components/components/calcite-icon";
+import "../../arcgis-layer-list-item-panel/index.js";
 import "@esri/calcite-components/components/calcite-list-item";
+import "@esri/calcite-components/components/calcite-list";
 import "@esri/calcite-components/components/calcite-notice";
-import ".//index.js";
+import "@esri/calcite-components/components/calcite-action-group";
+import "@esri/calcite-components/components/calcite-action-menu";
 export * from "./customElement.js";

package/dist/components/arcgis-legend/customElement.d.ts

@@ -1,17 +1,16 @@
 /// <reference path="../../index.d.ts" />
+import type ActiveLayerInfo from "@arcgis/core/widgets/Legend/support/ActiveLayerInfo.js";
+import type Collection from "@arcgis/core/core/Collection.js";
 import type LinkChartView from "@arcgis/core/views/LinkChartView.js";
-import type Collection2 from "@arcgis/core/core/Collection.js";
-import type ActiveLayerInfo2 from "@arcgis/core/widgets/Legend/support/ActiveLayerInfo.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { HeadingLevel } from "../../support/heading.js";
-import type { ArcgisReferenceElement } from "../../utils/component-utils.js";
+import type { ArcgisReferenceElement, HeadingLevel } from "../types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 import type { MapViewOrSceneView } from "@arcgis/core/views/MapViewOrSceneView.js";
 import type { LayerInfo } from "@arcgis/core/widgets/types.js";
 import type { LegendViewModelState } from "@arcgis/core/widgets/Legend/LegendViewModel.js";
 
 /**
- * The Legend component displays the symbols and labels used to represent layers in a [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/) or [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/).
+ * The Legend component displays the symbols and labels used to represent layers in an [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/) or [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/).
  * Only layers and sublayers visible in the view are shown, unless [ignoreLayerVisibility](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-legend/#ignoreLayerVisibility) is set to `true`.
  *
  * The legend automatically updates when:
@@ -23,62 +22,62 @@ import type { LegendViewModelState } from "@arcgis/core/widgets/Legend/LegendVie
  * ## Known Limitations
  *
  * * Currently, the legend component does not support the following layer types:
- * [ElevationLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-ElevationLayer.html),
- * [GraphicsLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GraphicsLayer.html),
- * [IntegratedMeshLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-IntegratedMeshLayer.html),
- * [KMLLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-KMLLayer.html),
- * [MapNotesLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-MapNotesLayer.html),
- * [OpenStreetMapLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-OpenStreetMapLayer.html),
- * [VectorTileLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-VectorTileLayer.html),
- * [VideoLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-VideoLayer.html), and
- * [WebTileLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-WebTileLayer.html).
- * * [Symbol3D](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-Symbol3D.html) with more than one
- * [symbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-Symbol3DLayer.html) are not supported.
- * * [DictionaryRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-DictionaryRenderer.html) is not supported.
- * * [TrackInfo](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-TrackInfo.html) is not supported.
- * * CIM Symbol [primitiveOverride](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-CIMSymbol.html#PrimitiveOverride) is not supported.
- * * RasterStretchRenderer [dynamicRangeAdjustment](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-RasterStretchRenderer.html#dynamicRangeAdjustment) is not supported.
+ * [ElevationLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/ElevationLayer/),
+ * [GraphicsLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GraphicsLayer/),
+ * [IntegratedMeshLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/IntegratedMeshLayer/),
+ * [KMLLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/KMLLayer/),
+ * [MapNotesLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/MapNotesLayer/),
+ * [OpenStreetMapLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/OpenStreetMapLayer/),
+ * [VectorTileLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/VectorTileLayer/),
+ * [VideoLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/VideoLayer/), and
+ * [WebTileLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/WebTileLayer/).
+ * * [Symbol3D](https://developers.arcgis.com/javascript/latest/references/core/symbols/Symbol3D/) with more than one
+ * [symbol](https://developers.arcgis.com/javascript/latest/references/core/symbols/Symbol3DLayer/) are not supported.
+ * * [DictionaryRenderer](https://developers.arcgis.com/javascript/latest/references/core/renderers/DictionaryRenderer/) is not supported.
+ * * [TrackInfo](https://developers.arcgis.com/javascript/latest/references/core/layers/support/TrackInfo/) is not supported.
+ * * CIM Symbol [primitiveOverride](https://developers.arcgis.com/javascript/latest/references/core/symbols/CIMSymbol/#PrimitiveOverride) is not supported.
+ * * RasterStretchRenderer [dynamicRangeAdjustment](https://developers.arcgis.com/javascript/latest/references/core/renderers/RasterStretchRenderer/#dynamicRangeAdjustment) is not supported.
  *
  * ## Various examples of legends based on renderer type.
  *
  * ### Unique values
  *
- * [![Unique values](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/legend/legend-unique-values.png)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-location-types/)
+ * [![Unique values](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/legend/legend-unique-values.avif)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-location-types/)
  *
  * ### Continuous color
  *
- * [![Continuous color](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/legend/legend-color-vv.png)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-vv-color/)
+ * [![Continuous color](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/legend/legend-color-vv.avif)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-vv-color/)
  *
  * ### Classed color
  *
- * [![Classed color](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/legend/legend-class-breaks.png)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-classbreaks/)
+ * [![Classed color](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/legend/legend-class-breaks.avif)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-classbreaks/)
  *
  * ### Continuous size
  *
- * [![Continuous size](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/legend/legend-size.png)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-sm-size/)
+ * [![Continuous size](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/legend/legend-size.avif)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-sm-size/)
  *
  * ### Size - above and below
  *
- * [![Size - above and below](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/legend/legend-size-themes.png)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-sm-size-themes/)
+ * [![Size - above and below](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/legend/legend-size-themes.avif)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-sm-size-themes/)
  *
  * ### Dot density
  *
- * [![Dot density](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/legend/legend-dot-density.png)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-dot-density/)
+ * [![Dot density](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/legend/legend-dot-density.avif)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-dot-density/)
  *
  * ### Predominance
  *
- * [![Predominance](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/legend/legend-predominance.png)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-arcade/)
+ * [![Predominance](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/legend/legend-predominance.avif)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-arcade/)
  *
  * ### Relationship
  *
- * [![Relationship](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/legend/legend-relationship.png)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-sm-relationship/)
+ * [![Relationship](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/legend/legend-relationship.avif)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-sm-relationship/)
  *
  *
  * ## Legend labels
  *
- * Legend text is directly controlled through the [layer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-Layer.html) and [renderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-Renderer.html) properties. For example, `layer.title` is directly used by the legend to present a layer's symbology to the end user. To override this text, you can directly update `layer.title`.
+ * Legend text is directly controlled through the [layer](https://developers.arcgis.com/javascript/latest/references/core/layers/Layer/) and [renderer](https://developers.arcgis.com/javascript/latest/references/core/renderers/Renderer/) properties. For example, `layer.title` is directly used by the legend to present a layer's symbology to the end user. To override this text, you can directly update `layer.title`.
  *
- * Furthermore, you can control date and number formatting in Legend by using the [FieldConfiguration](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-FieldConfiguration.html) formatting options on the layer. As an alternative to this, you can override Legend text via the renderer's properties. For example, the renderer may have a [legendOptions](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html#legendOptions) property (or a label property in the case of visual variable stops or UniqueValueInfos) that can be used to override default legend text describing the renderer element in question. The [Update legend text sample](https://developers.arcgis.com/javascript/latest/sample-code/legend-update/) provides an example of overriding legend text via the renderer.
+ * Furthermore, you can control date and number formatting in Legend by using the [FieldConfiguration](https://developers.arcgis.com/javascript/latest/references/core/layers/support/FieldConfiguration/) formatting options on the layer. As an alternative to this, you can override Legend text via the renderer's properties. For example, the renderer may have a [legendOptions](https://developers.arcgis.com/javascript/latest/references/core/renderers/ClassBreaksRenderer/#legendOptions) property (or a label property in the case of visual variable stops or UniqueValueInfos) that can be used to override default legend text describing the renderer element in question. The [Update legend text sample](https://developers.arcgis.com/javascript/latest/sample-code/legend-update/) provides an example of overriding legend text via the renderer.
  *
  * Note that when you override legend text, all formatting and localization that would otherwise be dynamically applied to labels will no longer apply.
  *
@@ -90,11 +89,11 @@ import type { LegendViewModelState } from "@arcgis/core/widgets/Legend/LegendVie
  */
 export abstract class ArcgisLegend extends LitElement {
   /**
-   * Collection of [ActiveLayerInfo](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend-support-ActiveLayerInfo.html) objects used by the legend view to
+   * Collection of [ActiveLayerInfo](https://developers.arcgis.com/javascript/latest/references/core/widgets/Legend/support/ActiveLayerInfo/) objects used by the legend view to
    * display data in the legend. The legend component watches this property to hide or display the layer's legend when
-   * an [ActiveLayerInfo](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend-support-ActiveLayerInfo.html) is removed from or added to this collection.
+   * an [ActiveLayerInfo](https://developers.arcgis.com/javascript/latest/references/core/widgets/Legend/support/ActiveLayerInfo/) is removed from or added to this collection.
    */
-  accessor activeLayerInfos: Collection2<ActiveLayerInfo2>;
+  accessor activeLayerInfos: Collection<ActiveLayerInfo>;
   /**
    * If true, the component will not be destroyed automatically when it is
    * disconnected from the document. This is useful when you want to move the
@@ -106,12 +105,12 @@ export abstract class ArcgisLegend extends LitElement {
    */
   accessor autoDestroyDisabled: boolean;
   /**
-   * Indicates whether to show the [Basemap](https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html) layers in the Legend. If you set this property to
+   * Indicates whether to show the [Basemap](https://developers.arcgis.com/javascript/latest/references/core/Basemap/) layers in the Legend. If you set this property to
    * `true` and specify [layerInfos](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-legend/#layerInfos) that include the basemap layers, the basemap will be displayed in the legend.
    *
    * > **Known limitation:**
    * >
-   * > [VectorTileLayers](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-VectorTileLayer.html) in the basemap are not currently supported in the legend.
+   * > [VectorTileLayers](https://developers.arcgis.com/javascript/latest/references/core/layers/VectorTileLayer/) in the basemap are not currently supported in the legend.
    * > This includes most Esri basemaps such as "Streets", "Topographic", "Navigation", and others that use vector tiles.
    *
    * @default false
@@ -131,7 +130,7 @@ export abstract class ArcgisLegend extends LitElement {
    * Indicates the layout of the legend when the [legendStyle](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-legend/#legendStyle) is set to the string value of `"card"`.
    * The layout determines how the legend's content is arranged.
    *
-   * [![card-style-layout](https://developers.arcgis.com/javascript/latest/assets/img/components/legend/card-style-layout.png)](https://developers.arcgis.com/javascript/latest/sample-code/legend-card/)
+   * [![card-style-layout](https://developers.arcgis.com/javascript/latest/assets/references/components/legend/card-style-layout.avif)](https://developers.arcgis.com/javascript/latest/sample-code/legend-card/)
    *
    * @since 4.34
    * @example
@@ -200,11 +199,11 @@ export abstract class ArcgisLegend extends LitElement {
    * Determines whether to respect the properties of the layers in the map that control the legend's visibility (`minScale`, `maxScale`, `legendEnabled`).
    * By default, a layer's legend elements **will not render** in the legend given the following conditions:
    *
-   * - The layer's [legendEnabled](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#legendEnabled) property
+   * - The layer's [legendEnabled](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/#legendEnabled) property
    * is set to `false`.
    * - If the view's scale is outside the visibility range
-   * defined by the layer's [minScale](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#minScale) and
-   * [maxScale](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#maxScale) properties.
+   * defined by the layer's [minScale](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/#minScale) and
+   * [maxScale](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/#maxScale) properties.
    *
    * When the `ignoreLayerVisibility` property of the legend is set to `true`, the legend elements for each
    * layer in the map will always display, thus disregarding the `minScale`, `maxScale`,
@@ -258,7 +257,7 @@ export abstract class ArcgisLegend extends LitElement {
    * You can either specify a string or an object to indicate the style. The known string values are the same values listed in
    * the table within the `type` property.
    *
-   * [![legend-style](https://developers.arcgis.com/javascript/latest/assets/img/components/legend/legend-style.png)](https://developers.arcgis.com/javascript/latest/sample-code/legend-card/)
+   * [![legend-style](https://developers.arcgis.com/javascript/latest/assets/references/components/legend/legend-style.avif)](https://developers.arcgis.com/javascript/latest/sample-code/legend-card/)
    *
    * @default "classic"
    * @see [cardStyleLayout](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-legend/#cardStyleLayout)
@@ -415,12 +414,12 @@ export abstract class ArcgisLegend extends LitElement {
   accessor referenceElement: ArcgisReferenceElement | string | undefined;
   /**
    * If a layer uses a unique value render, only features that satisfy the layer's
-   * [definition](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#definitionExpression)
+   * [definition](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/#definitionExpression)
    * will be displayed in the legend when set to true.
    *
    * @default false
    * @since 4.30
-   * @see [definitionExpression](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#definitionExpression)
+   * @see [definitionExpression](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/#definitionExpression)
    * @example
    * Only display features that satisfy the layer's definitionExpression.
    *
@@ -443,7 +442,7 @@ export abstract class ArcgisLegend extends LitElement {
    * The view associated with the component. 
    *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-legend component will be associated with a map or scene component rather than using the `view` property.
    */
-  accessor view: MapViewOrSceneView | LinkChartView | null | undefined;
+  accessor view: LinkChartView | MapViewOrSceneView | null | undefined;
   /** Permanently destroy the component. */
   destroy(): Promise<void>;
   /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */

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

@@ -4,7 +4,7 @@ import { css as y, html as s } from "lit";
 import { LitElement as v, safeClassMap as $, safeStyleMap as u } from "@arcgis/lumina";
 import { classes as L } from "@arcgis/toolkit/dom";
 import { r as b } from "../../chunks/svgUtils.js";
-import { a as x } from "../../chunks/utils.js";
+import { a as x } from "../../chunks/utils2.js";
 const w = y`:host{display:flex}.layer-row{display:flex;flex:1}.color-ramp-container{justify-content:center}.symbol-container{display:flex;flex-direction:column}.interval-separators-container{text-align:center}.interval-separator{font-size:.5em}.ramp-label{margin:0 .5em;white-space:nowrap;height:25px;line-height:var(--calcite-font-line-height-fixed-xl)}`, R = 25, E = 25, _ = 100;
 class S extends v {
   constructor() {

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

@@ -6,7 +6,7 @@ import { LitElement as L, safeClassMap as c, safeStyleMap as u, nothing as b } f
 import { classes as r } from "@arcgis/toolkit/dom";
 import { H as f } from "../../chunks/heading.js";
 import { g as w } from "../../chunks/globalCss.js";
-import { b as _, s as $, i as z, c as v, g as x } from "../../chunks/utils.js";
+import { b as _, s as $, i as z, c as v, g as x } from "../../chunks/utils2.js";
 const C = k`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}.section{word-break:break-word;word-wrap:break-word;padding:var(--calcite-spacing-sm) var(--calcite-spacing-md);min-width:250px;max-width:500px;height:100%;height:-moz-available;height:-webkit-fill-available;height:fill-available;overflow:auto;font-size:var(--calcite-font-size-sm)}.carousel-title-container{margin-bottom:var(--calcite-spacing-sm)}.carousel-title{margin:0}.section-title{font-weight:var(--calcite-font-weight-normal)}.layer-caption{padding:var(--calcite-spacing-xs) 0;margin:0;font-weight:var(--calcite-font-weight-normal)}.imagery-layer-stretched-image{display:block;margin-bottom:-2px}.image-label{padding-right:var(--calcite-spacing-xs);padding-left:var(--calcite-spacing-xs)}.label-element{margin:.1em;padding:.5em 1em;min-width:2em;min-height:1em;text-align:center;display:flex;align-items:center;justify-content:center;flex:1}.layer-row{display:flex;align-items:center}.symbol{display:block;margin:auto}.pie-chart-ramp-preview{display:flex;justify-content:center}.relationship-container{display:flex;flex-direction:column}.relationship-container .layer-row{padding-bottom:.5em}.relationship-container .layer-row:last-child{padding-bottom:0}.container{display:flex;gap:var(--calcite-spacing-sm);flex-wrap:wrap}.background-styles-container{display:flex;flex-wrap:wrap}:host([stacked]) .container{display:table}:host([stacked]) .symbol-row{display:table-row;width:100%}:host([stacked]) .label-cell{display:table-cell;vertical-align:middle;padding:var(--calcite-spacing-xxs)}:host([stacked]) .symbol-cell{display:table-cell;vertical-align:middle;text-align:center;padding:var(--calcite-spacing-xxs)}:host([stacked]) .symbol-cell div{display:flex;align-items:center;justify-content:center}`;
 function F(p) {
   return p ? p.r * 0.299 + p.g * 0.587 + p.b * 0.114 >= 127 : void 0;

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

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

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

@@ -1,10 +1,10 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/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 {
+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 {
   constructor() {
     super(...arguments), this.legendElement = null, this.opacity = 1;
   }
@@ -12,29 +12,29 @@ class g extends c {
     this.properties = { _preview: 16, legendElement: 0, opacity: 9, messages: 0 };
   }
   static {
-    this.styles = d;
+    this.styles = m;
   }
   get _preview() {
     const e = this.legendElement.preview;
     if (!e)
       return null;
-    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;
+    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;
   }
   render() {
     const { legendElement: e, _preview: a } = this;
     if (!a)
       return null;
-    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>`;
+    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 t`<div class=${n(e.label ? "ramp-label" : void 0)}>${m(e, a, this.messages)}</div>`;
+    return l`<div class=${p(e.label ? "ramp-label" : void 0)}>${n(e, a, this.messages)}</div>`;
   }
 }
-r("arcgis-legend-classic-color-ramp", g);
+r("arcgis-legend-classic-color-ramp", d);
 export {
-  g as ArcgisLegendClassicColorRamp
+  d as ArcgisLegendClassicColorRamp
 };

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

@@ -1,10 +1,10 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as v } from "../../chunks/runtime.js";
 import { css as $, html as s } from "lit";
-import { LitElement as u, safeClassMap as c, nothing as n, safeStyleMap as w } from "@arcgis/lumina";
-import { classes as d } from "@arcgis/toolkit/dom";
-import { b as f, s as p, i as E, c as g, g as y } from "../../chunks/utils.js";
-const L = $`.layer-table{display:flex;flex-flow:column;margin-bottom:var(--calcite-spacing-md);width:100%}.layer-table-size-ramp{display:table}.layer-table-size-ramp .layer-cell{display:table-cell}.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:flex}.layer-table-size-ramp .layer-row{display:table-row}.layer-cell{padding:var(--calcite-spacing-xxs) 0;vertical-align:middle;word-break:break-word;display:flex;align-items: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)}.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}`;
+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 = $`.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 };
@@ -13,10 +13,8 @@ class x extends u {
     this.styles = L;
   }
   render() {
-    const e = this._renderLegendElement(), a = f(this.legendElement, this.messages), l = a ? s`<div class="layer-caption">${a}</div>` : null, i = {
-      "layer-table-size-ramp": this.legendElement.type === "size-ramp"
-    };
-    return s`<section class=${c(d("layer-table", 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) {
@@ -44,38 +42,38 @@ class x extends u {
     }
   }
   _renderSymbolTable(e) {
-    const a = e.infos.map((l) => this._renderElementInfo(l, e.legendType)).filter(Boolean);
+    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, a) {
-    const { layer: l } = this, i = "label" in e ? e.label : null;
+    const { layer: i } = this, l = "label" in e ? e.label : null;
     if ("type" in e && e.type)
-      return e ? s`<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 r = E(l, a), t = {
+    const r = f(i, a), t = {
       "imagery-layer-info-stretched": r
     };
-    return s`<div class="layer-row"><div class=${c(d("layer-cell", "layer-cell-symbols", {
+    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=${c(d("layer-cell", "layer-cell-info", t))}>${g(this.messages, i, !1) || ""}</div></div>`;
+    }))}>${this._renderPreview(e, r)}</div><div class=${n(g("layer-cell", "layer-cell-info", t))}>${d(this.messages, l, !1) || ""}</div></div>`;
   }
   _renderPreview(e, a) {
-    const { layer: l } = this;
+    const { layer: i } = this;
     if ("preview" in e && e.preview) {
-      const { preview: i } = e, r = "previewAriaLabel" in e ? e.previewAriaLabel : null, t = "label" in e ? g(this.messages, e.label, !1) : null;
-      return p(i, y(this.messages, r || t)), s`<div class="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, a) : null;
+    return "src" in e && e.src ? this._renderImage(e, i, a) : null;
   }
-  _renderImage(e, a, l) {
-    const { previewAriaLabel: i, src: r, opacity: t } = e, m = g(this.messages, e.label, !1), h = {
-      "imagery-layer-stretched-image": l,
-      symbol: !l
+  _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}`
-    }, o = y(this.messages, i || m);
-    return s`<img alt=${o ?? n} .ariaLabel=${o} class=${c(d(h))} height=${e.height ?? void 0 ?? n} src=${r ?? n} style=${w(b)} width=${e.width ?? void 0 ?? n}>`;
+    }, 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

@@ -3,7 +3,7 @@ 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/utils.js";
+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}`;
 class g extends m {
   constructor() {

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

@@ -2,7 +2,7 @@
 import { c as W } from "../../chunks/runtime.js";
 import { css as X, html as g } from "lit";
 import { LitElement as Y, safeStyleMap as b } from "@arcgis/lumina";
-import { s as A, g as z, p as k } from "../../chunks/utils.js";
+import { s as A, g as z, p as k } from "../../chunks/utils2.js";
 const C = X`.spike-ramp-container{display:flex;flex-direction:row;gap:var(--calcite-spacing-sm-plus);margin-left:var(--calcite-spacing-sm)}.spike-ramp-preview-container{display:flex;position:relative;gap:var(--calcite-spacing-sm-plus);border-bottom:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);padding:0 var(--calcite-spacing-xl)}.spike-ramp-preview{display:flex;gap:var(--calcite-spacing-sm-plus);align-items:end}.spike-ramp-symbol-preview{display:flex}.spike-ramp-lines{display:flex;position:absolute;bottom:0}.spike-ramp-labels-container{display:flex;position:relative;top:-5px;flex:1;min-width:120px}.spike-ramp-label{position:relative;padding:0 var(--calcite-spacing-sm);line-height:1em;word-break:break-all;font-size:var(--calcite-font-size-sm)}.spike-ramp-label:before{display:block;position:absolute;top:.25em;right:100%;border-width:3px 4px 3px 0;border-style:solid;border-color:transparent var(--calcite-color-text-1) transparent transparent;width:0;height:0;content:""}`, I = "#ddd", e = window.devicePixelRatio;
 function u(m) {
   return m.infos.filter((r, l) => l % 2 === 0);