@arcgis/map-components 4.34.0-next.120 → 4.34.0-next.121

package/dist/components/arcgis-legend/support/univariateUtils.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+export declare function getUnivariateColorRampMargin(sizeRampElement: __esri.SizeRampElement, style?: "card" | "classic"): number;
+export declare function getUnivariateColorRampPreview(colorRampElement: __esri.ColorRampElement, options: {
+    width?: number | null;
+    height?: number | null;
+    rampAlignment: "horizontal" | "vertical";
+    opacity: number;
+    type: "above" | "below" | "full";
+    cssEffectFilter?: string;
+    ariaLabel?: string | null;
+}): HTMLElement | null;
+export declare function getUnivariateSizeRampSize(sizeRampElement: __esri.SizeRampElement, type: "above" | "below" | "full", isAboveAndBelow: boolean, rampAlignment?: "horizontal" | "vertical"): number;
+export declare function getUnivariateColorRampSize(sizeRampElement: __esri.SizeRampElement, type: "above" | "below" | "full", isAboveAndBelow: boolean, rampAlignment?: "horizontal" | "vertical"): number;
+export declare function getUnivariateAboveAndBelowRampElements(legendElement: __esri.UnivariateColorSizeRampElement, opacity: number, rampAlignment?: "horizontal" | "vertical"): {
+    sizeRampElement: __esri.SizeRampElement;
+    colorRampElement: __esri.ColorRampElement;
+};
+export declare function getUnivariateColorSizeRampElements(legendElement: __esri.UnivariateColorSizeRampElement, rampAlignment?: "horizontal" | "vertical"): {
+    sizeRampElement: __esri.SizeRampElement;
+    colorRampElement: __esri.ColorRampElement;
+};
+export declare const univariateColorRampContainerStyles: {
+    marginLeft: string;
+};
+export declare const univariateColorRampStyles: {
+    display: string;
+    verticalAlign: string;
+};
+export declare const univariateRampContainerStyles: {
+    display: string;
+    alignItems: string;
+};

package/dist/components/arcgis-legend/support/utils.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+import { nil } from '@arcgis/toolkit/type';
+import { ArcgisLegend } from '../customElement.js';
+export declare function getRampStopLabel(stop: __esri.ColorRampStop | __esri.HeatmapRampStop, type: string, messages: ArcgisLegend["messages"]): string | null;
+export declare function isImageryStretchedLegend(layer: __esri.Layer, legendType: nil | string): boolean;
+export declare function pt2px(pt: number): number;
+export declare function px2pt(px: nil | number): number;
+export declare function toPt(value: number | string): number;

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

@@ -0,0 +1,13 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+/// <reference path="../../index.d.ts" />
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { ArcgisLegend } from '../arcgis-legend/customElement.js';
+
+/** [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-legend-card-color-ramp/) */
+export declare class ArcgisLegendCardColorRamp extends LitElement {
+    cssEffectFilter?: string;
+    legendElement: __esri.ColorRampElement | __esri.HeatmapRampElement | __esri.OpacityRampElement | __esri.StretchRampElement;
+    /** @default 1 */
+    opacity: number;
+    messages: ArcgisLegend["messages"];
+}

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

@@ -0,0 +1,91 @@
+import { c as y } from "../../chunks/runtime.js";
+import { css as f, html as l } from "lit";
+import { LitElement as v, safeClassMap as s, safeStyleMap as $ } from "@arcgis/lumina";
+import { classes as u } from "@arcgis/toolkit/dom";
+import { c as b } from "../../chunks/svgUtils.js";
+import { g as L } from "../../chunks/utils2.js";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/4.34/esri/copyright.txt for details.
+v4.34.0-next.121 */
+const R = f`:host{display:flex}.arcgis-legend--card__layer-row{display:flex;flex:1}.arcgis-legend--card__color-ramp-container{justify-content:center}.arcgis-legend--card__symbol-container{display:flex;flex-direction:column}.arcgis-legend--card__interval-separators-container{text-align:center}.arcgis-legend--card__interval-separator{font-size:.5em}.arcgis-legend--card__ramp-label{margin:0 .5em;white-space:nowrap;height:25px;line-height:25px}`, a = {
+  layerRow: "arcgis-legend--card__layer-row",
+  colorRampContainer: "arcgis-legend--card__color-ramp-container",
+  symbolContainer: "arcgis-legend--card__symbol-container",
+  intervalSeparatorsContainer: "arcgis-legend--card__interval-separators-container",
+  intervalSeparator: "arcgis-legend--card__interval-separator",
+  rampLabel: "arcgis-legend--card__ramp-label"
+}, w = 25, x = 25, S = 100;
+class C extends v {
+  constructor() {
+    super(...arguments), this.legendElement = null, this.opacity = 1;
+  }
+  static {
+    this.properties = { cssEffectFilter: 1, legendElement: 0, opacity: 9, messages: 0 };
+  }
+  static {
+    this.styles = R;
+  }
+  render() {
+    const e = this.legendElement.infos.slice().reverse();
+    return l`<div class=${s(u(a.layerRow, a.colorRampContainer))}>${this._renderRampLabel(e[0])}<div class=${s(a.symbolContainer)}>${this._renderPreview(e)}${this._renderMiddleStopRampLabel(e)}</div>${this._renderRampLabel(e.at(-1))}</div>`;
+  }
+  _renderPreview(e) {
+    const { opacity: i } = this, d = this.legendElement.type === "heatmap-ramp", o = e.length - 1, t = x, n = o > 2 && !d ? w * o : S, p = n + 20, r = 10, m = [
+      [
+        {
+          shape: {
+            type: "path",
+            path: `M0 ${t / 2} L${r} 0 L${r} ${t} Z`
+          },
+          fill: e[0].color,
+          stroke: { width: 0 }
+        },
+        {
+          shape: {
+            type: "rect",
+            x: r,
+            y: 0,
+            width: n,
+            height: t
+          },
+          fill: {
+            type: "linear",
+            x1: r,
+            y1: 0,
+            x2: n + r,
+            y2: 0,
+            colors: e.map((c, _) => ({
+              color: c.color,
+              // Adjust the stop offsets so that we have stops at fixed/equal interval.
+              offset: d && "ratio" in c ? c.ratio : _ / o
+            }))
+          },
+          stroke: { width: 0 }
+        },
+        {
+          shape: {
+            type: "path",
+            path: `M${n + r} 0 L${p} ${t / 2} L${n + r} ${t} Z`
+          },
+          fill: e[e.length - 1].color,
+          stroke: { width: 0 }
+        }
+      ]
+    ], g = b(m, p, t), h = {
+      filter: this.cssEffectFilter,
+      opacity: i == null ? void 0 : `${i}`
+    };
+    return l`<div style=${$(h)}>${g}</div>`;
+  }
+  _renderMiddleStopRampLabel(e) {
+    const i = e.length % 2 !== 0 ? e[e.length / 2 | 0] : null;
+    return i ? l`<div class=${s(a.intervalSeparatorsContainer)}><div class=${s(a.intervalSeparator)}>|</div>${this._renderRampLabel(i)}</div>` : null;
+  }
+  _renderRampLabel(e) {
+    return l`<div class=${s(a.rampLabel)}>${L(e, this.legendElement.type, this.messages)}</div>`;
+  }
+}
+y("arcgis-legend-card-color-ramp", C);
+export {
+  C as ArcgisLegendCardColorRamp
+};

package/dist/components/arcgis-legend-card-color-ramp/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

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

@@ -0,0 +1 @@
+export * from "./customElement.js";

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

@@ -0,0 +1,18 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+/// <reference path="../../index.d.ts" />
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { HeadingLevel } from '../../support/heading';
+import { ArcgisLegend } from '../arcgis-legend/customElement.js';
+
+/** [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-legend-card-element/) */
+export declare class ArcgisLegendCardElement extends LitElement {
+    cssEffectFilter?: string;
+    /** @default false */
+    stacked: boolean;
+    activeLayerInfo: __esri.ActiveLayerInfo;
+    /** @default 3 */
+    headingLevel: HeadingLevel;
+    layer: __esri.Layer;
+    legendElement: __esri.LegendElement;
+    messages: ArcgisLegend["messages"];
+}

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

@@ -0,0 +1,131 @@
+import { c as w } from "../../chunks/runtime.js";
+import { css as x, html as s } from "lit";
+import p from "@arcgis/core/Color.js";
+import { LitElement as E, safeClassMap as l, safeStyleMap as b, nothing as y } from "@arcgis/lumina";
+import { classes as n } from "@arcgis/toolkit/dom";
+import { H as v } from "../../chunks/heading.js";
+import { g as u } from "../../chunks/globalCss.js";
+import { a as k, g as f } from "../../chunks/titleUtils.js";
+import { i as C } from "../../chunks/utils2.js";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/4.34/esri/copyright.txt for details.
+v4.34.0-next.121 */
+const L = x`.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)}.arcgis-legend--card__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)}.arcgis-legend--card__carousel-title-container{margin-bottom:var(--calcite-spacing-sm)}.arcgis-legend--card__carousel-title{margin:0}.arcgis-legend--card__section-title{font-weight:var(--calcite-font-weight-normal)}.arcgis-legend--card__layer-caption{padding:var(--calcite-spacing-xs) 0;margin:0;font-weight:var(--calcite-font-weight-normal)}.arcgis-legend--card__imagery-layer-image--stretched{display:block;margin-bottom:-2px}.arcgis-legend--card__image-label{padding-right:var(--calcite-spacing-xs);padding-left:var(--calcite-spacing-xs)}.arcgis-legend--card__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}.arcgis-legend--card__layer-row{display:flex;align-items:center}.arcgis-legend--card__symbol{display:block;margin:auto}.arcgis-legend--card__pie-chart-ramp-preview{display:flex;justify-content:center}.arcgis-legend--card__relationship-container{display:flex;flex-direction:column}.arcgis-legend--card__relationship-container .arcgis-legend--card__layer-row{padding-bottom:.5em}.arcgis-legend--card__relationship-container .arcgis-legend--card__layer-row:last-child{padding-bottom:0}.arcgis-legend--card__container{display:flex;gap:var(--calcite-spacing-sm);flex-wrap:wrap}.arcgis-legend--card__background-styles-container{display:flex;flex-wrap:wrap}:host([stacked]) .arcgis-legend--card__container{display:table}:host([stacked]) .arcgis-legend--card__symbol-row{display:table-row;width:100%}:host([stacked]) .arcgis-legend--card__label-cell{display:table-cell;vertical-align:middle;padding:var(--calcite-spacing-xxs)}:host([stacked]) .arcgis-legend--card__symbol-cell{display:table-cell;vertical-align:middle;text-align:center;padding:var(--calcite-spacing-xxs)}:host([stacked]) .arcgis-legend--card__symbol-cell div{display:flex;align-items:center;justify-content:center}`, a = {
+  carouselTitleContainer: "arcgis-legend--card__carousel-title-container",
+  carouselTitle: "arcgis-legend--card__carousel-title",
+  sectionTitle: "arcgis-legend--card__section-title",
+  imageryLayerStretchedImage: "arcgis-legend--card__imagery-layer-image--stretched",
+  imageLabel: "arcgis-legend--card__image-label",
+  layerCaption: "arcgis-legend--card__layer-caption",
+  labelElement: "arcgis-legend--card__label-element",
+  layerRow: "arcgis-legend--card__layer-row",
+  labelCell: "arcgis-legend--card__label-cell",
+  section: "arcgis-legend--card__section",
+  symbol: "arcgis-legend--card__symbol",
+  symbolRow: "arcgis-legend--card__symbol-row",
+  symbolCell: "arcgis-legend--card__symbol-cell",
+  pieChartRampPreview: "arcgis-legend--card__pie-chart-ramp-preview",
+  relationshipContainer: "arcgis-legend--card__relationship-container",
+  backgroundStylesContainer: "arcgis-legend--card__background-styles-container",
+  container: "arcgis-legend--card__container"
+};
+function z(g) {
+  return g ? g.r * 0.299 + g.g * 0.587 + g.b * 0.114 >= 127 : void 0;
+}
+class F extends E {
+  constructor() {
+    super(...arguments), this.stacked = !1, this.headingLevel = 3;
+  }
+  static {
+    this.properties = { cssEffectFilter: 1, stacked: 7, activeLayerInfo: 0, headingLevel: 9, layer: 0, legendElement: 0, messages: 0 };
+  }
+  static {
+    this.styles = L;
+  }
+  _getBackgroundStyles(e) {
+    const t = e.symbol, i = t.color, d = !!i?.a, c = "outline" in t ? t.outline : null, r = !!c?.color?.a, o = d && i ? new p([i.r, i.g, i.b, i.a * this.layer.opacity]) : new p([255, 255, 255, 0]), _ = r && c.color ? new p([c.color.r, c.color.g, c.color.b, c.color.a * this.layer.opacity]) : new p([255, 255, 255, 0]), m = z(e.symbol.color) ?? !0, $ = m ? "black" : "white", h = m ? "rgba(255, 255, 255, .6)" : "rgba(0, 0, 0, .6)";
+    return {
+      background: d ? o.toCss(!0) : "none",
+      color: $,
+      textShadow: `-1px -1px 0 ${h},
+                  1px -1px 0 ${h},
+                  -1px 1px 0 ${h},
+                  1px 1px 0 ${h}`,
+      border: r ? `1px solid ${_.toCss(!0)}` : "none",
+      filter: this.cssEffectFilter ?? ""
+    };
+  }
+  render() {
+    const e = this._renderLegendElement(), t = k(this.legendElement, this.messages), i = this.stacked ? s`<div class=${l(a.carouselTitleContainer)}>${v({ class: n(a.carouselTitle, u.heading), level: this.headingLevel, children: this.activeLayerInfo.title })}${t ? s`<p class=${l(a.layerCaption)}>${t}</p>` : null}</div>` : t ? v({ class: n(a.sectionTitle, u.heading), level: this.headingLevel, children: t }) : null;
+    return s`<section class=${l(a.section)} role=tabpanel tabindex=0>${i}${e}</section>`;
+  }
+  _renderLegendElement() {
+    switch (this.legendElement.type) {
+      case "symbol-table":
+        return this._renderSymbolTable(this.legendElement);
+      case "size-ramp":
+        return s`<arcgis-legend-card-size-ramp .hasIndicators=${this.stacked} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-card-size-ramp>`;
+      case "color-ramp":
+      case "opacity-ramp":
+      case "heatmap-ramp":
+      case "stretch-ramp":
+        return s`<arcgis-legend-card-color-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-card-color-ramp>`;
+      case "relationship-ramp":
+        return 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":
+        return s`<div class=${l(a.pieChartRampPreview)}>${this.legendElement.preview}</div>`;
+      case "univariate-above-and-below-ramp":
+        return s`<arcgis-legend-card-univariate-above-and-below-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-card-univariate-above-and-below-ramp>`;
+      case "univariate-color-size-ramp":
+        return s`<arcgis-legend-card-univariate-color-size-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-card-univariate-color-size-ramp>`;
+      default:
+        return null;
+    }
+  }
+  _renderSymbolTable(e) {
+    const t = e.infos.map((r) => this._renderElementInfo(r, e.legendType)).filter(Boolean);
+    if (!t.length)
+      return null;
+    const i = e.infos.some((r) => "symbol" in r && r.symbol?.type.includes("simple-fill")), c = this.activeLayerInfo.legendElements.some(({ type: r }) => r === "relationship-ramp") ? a.relationshipContainer : i ? a.backgroundStylesContainer : a.container;
+    return s`<div class=${l(c)}>${t}</div>`;
+  }
+  _renderElementInfo(e, t) {
+    const { layer: i } = this, d = "label" in e ? e.label : null;
+    if ("type" in e && e.type)
+      return s`<arcgis-legend-card-element .activeLayerInfo=${this.activeLayerInfo} .cssEffectFilter=${this.cssEffectFilter} .stacked=${this.stacked} .headingLevel=${this.headingLevel} .layer=${i} .legendElement=${e} .messages=${this.messages}></arcgis-legend-card-element>`;
+    if (!("preview" in e && e.preview) && !("src" in e && e.src))
+      return null;
+    const c = C(i, t), r = f(this.messages, d, !1) || "";
+    if ("src" in e && e.src) {
+      const o = {
+        [a.symbolCell]: this.stacked
+      };
+      return s`<div class=${l(n(a.layerRow, { [a.symbolRow]: this.stacked }))}><div class=${l(n(o))}>${this._renderImage(e, i, c)}</div><div class=${l(n(a.imageLabel, { [a.labelCell]: this.stacked }))}>${r}</div></div>`;
+    }
+    if ("symbol" in e && e.preview) {
+      if (!e.symbol?.type.includes("simple-fill")) {
+        if (!e.label)
+          return s`<div>${e.preview}</div>`;
+        const o = {
+          [a.symbolCell]: this.stacked
+        };
+        return s`<div class=${l(n(a.layerRow, { [a.symbolRow]: this.stacked }))}><div class=${l(n(o))}>${e.preview}</div><div class=${l(n(a.imageLabel, { [a.labelCell]: this.stacked }))}>${r}</div></div>`;
+      }
+      return s`<div class=${l(a.layerRow)}><div class=${l(a.labelElement)} style=${b(this._getBackgroundStyles(e))}>${r}</div></div>`;
+    }
+    return null;
+  }
+  _renderImage(e, t, i) {
+    const { label: d, src: c, opacity: r } = e, o = {
+      [a.imageryLayerStretchedImage]: i,
+      [a.symbol]: !i
+    }, _ = {
+      opacity: `${r ?? t.opacity}`
+    }, m = f(this.messages, d, !1);
+    return s`<img alt=${m ?? y} .ariaLabel=${m} class=${l(n(o))} height=${e.height ?? void 0 ?? y} src=${c ?? y} style=${b(_)} width=${e.width ?? void 0 ?? y}>`;
+  }
+}
+w("arcgis-legend-card-element", F);
+export {
+  F as ArcgisLegendCardElement
+};

package/dist/components/arcgis-legend-card-element/index.d.ts

@@ -0,0 +1,7 @@
+import "../arcgis-legend-card-size-ramp/index.js";
+import "../arcgis-legend-card-color-ramp/index.js";
+import "../arcgis-legend-relationship-ramp/index.js";
+import "../arcgis-legend-card-univariate-above-and-below-ramp/index.js";
+import "../arcgis-legend-card-univariate-color-size-ramp/index.js";
+import ".//index.js";
+export * from "./customElement.js";

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

@@ -0,0 +1,7 @@
+import "../arcgis-legend-card-size-ramp/index.js";
+import "../arcgis-legend-card-color-ramp/index.js";
+import "../arcgis-legend-relationship-ramp/index.js";
+import "../arcgis-legend-card-univariate-above-and-below-ramp/index.js";
+import "../arcgis-legend-card-univariate-color-size-ramp/index.js";
+import ".//index.js";
+export * from "./customElement.js";

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

@@ -0,0 +1,14 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+/// <reference path="../../index.d.ts" />
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { ArcgisLegend } from '../arcgis-legend/customElement.js';
+
+/** [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-legend-card-size-ramp/) */
+export declare class LegendCardSizeRamp extends LitElement {
+    /** @default false */
+    hasIndicators: boolean;
+    legendElement: __esri.SizeRampElement;
+    /** @default 1 */
+    opacity: number;
+    messages: ArcgisLegend["messages"];
+}

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

@@ -0,0 +1,97 @@
+import { c as k } from "../../chunks/runtime.js";
+import { css as C, html as X } from "lit";
+import { LitElement as I, safeStyleMap as z, safeClassMap as g } from "@arcgis/lumina";
+import { p as Y } from "../../chunks/utils2.js";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/4.34/esri/copyright.txt for details.
+v4.34.0-next.121 */
+const P = C`.arcgis-legend--card__size-ramp--container{display:flex;align-items:center;justify-content:center}.arcgis-legend--card__size-ramp--vertical-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.arcgis-legend--card__size-ramp--label{margin:0 .5em;white-space:nowrap}.arcgis-legend--card__size-ramp--vertical-ramp{display:flex;flex-direction:column;align-items:center}.arcgis-legend--card__size-ramp--ramp{display:flex;flex-direction:row-reverse;align-items:center}.arcgis-legend--card__size-ramp--preview{display:flex}`, d = {
+  container: "arcgis-legend--card__size-ramp--container",
+  verticalContainer: "arcgis-legend--card__size-ramp--vertical-container",
+  label: "arcgis-legend--card__size-ramp--label",
+  ramp: "arcgis-legend--card__size-ramp--ramp",
+  verticalRamp: "arcgis-legend--card__size-ramp--vertical-ramp",
+  preview: "arcgis-legend--card__size-ramp--preview"
+}, j = "#ddd";
+function M(e) {
+  if (!e)
+    return;
+  if (e.type.includes("3d")) {
+    if (!("symbolLayers" in e) || !e.symbolLayers?.length)
+      return;
+    const t = e.symbolLayers.at(-1), i = t && "resource" in t ? t.resource?.primitive : void 0;
+    return i === "circle" || i === "cross" || i === "kite" || i === "sphere" || i === "cube" || i === "diamond";
+  }
+  const n = "style" in e ? e.style : void 0;
+  return n === "circle" || n === "diamond" || n === "cross";
+}
+function N(e) {
+  if (e) {
+    if (e.type.includes("3d")) {
+      if (!("symbolLayers" in e) || !e.symbolLayers?.length)
+        return;
+      const n = e.symbolLayers.at(-1), t = n && "resource" in n ? n.resource?.primitive : void 0;
+      return t === "triangle" || t === "cone" || t === "tetrahedron";
+    }
+    return "style" in e && e.style === "triangle";
+  }
+}
+class O extends I {
+  constructor() {
+    super(...arguments), this.hasIndicators = !1, this.legendElement = null, this.opacity = 1;
+  }
+  static {
+    this.properties = { hasIndicators: 5, legendElement: 0, opacity: 9, messages: 0 };
+  }
+  static {
+    this.styles = P;
+  }
+  render() {
+    if (this.legendElement.theme === "spike")
+      return X`<div style=${z({ display: "flex", flex: "1", justifyContent: "center" })}><arcgis-legend-spike-ramp .legendElement=${this.legendElement} .messages=${this.messages}></arcgis-legend-spike-ramp></div>`;
+    const { legendElement: n, hasIndicators: t, opacity: i } = this, l = n.infos, v = l.at(0), p = l.at(-1);
+    if (!v || !p)
+      return null;
+    const { label: f, ...S } = v, { label: u, ..._ } = p;
+    let r = S.preview, s = _.preview;
+    if (!r || !s)
+      return null;
+    r = r.cloneNode(!0), r.style.display = "flex", s = s.cloneNode(!0), s.style.display = "flex";
+    const o = { opacity: `${i ?? ""}` };
+    return X`<div class=${g(t ? d.verticalContainer : d.container)}><div class=${g(d.label)}>${t ? f : u}</div><div class=${g(t ? d.verticalRamp : d.ramp)}><div class=${g(d.preview)} style=${z(o)}>${r}</div>${this._renderSizeRampLines(n)}<div class=${g(d.preview)} style=${z(o)}>${s}</div></div><div class=${g(d.label)}>${t ? u : f}</div></div>`;
+  }
+  _renderSizeRampLines(n) {
+    const t = n.infos, i = t.at(0), l = t.at(-1);
+    if (!i || !l)
+      return null;
+    const v = i.symbol, p = this.hasIndicators, f = i.size && typeof i.size == "number" ? i.size : 0, S = l.size && typeof l.size == "number" ? l.size : 0, u = i.outlineSize || 0, _ = l.outlineSize || 0, r = Y(f + u), s = Y(S + _), o = p ? r : r + 50, m = p ? r / 2 + 50 : r, y = N(v), h = M(v), c = document.createElement("canvas");
+    c.width = o, c.height = m, c.style.width = `${c.width}px`, c.style.height = `${c.height}px`;
+    const a = c.getContext("2d");
+    if (p) {
+      a.beginPath();
+      const $ = 0, x = 0, b = o / 2 - s / 2, w = m;
+      a.moveTo($, x), a.lineTo(b, w);
+      const L = o, T = 0, E = o / 2 + s / 2, R = m;
+      a.moveTo(L, T), a.lineTo(E, R);
+    } else {
+      a.beginPath();
+      const $ = 0, x = m / 2 - s / 2, b = o, w = 0;
+      a.moveTo($, x), a.lineTo(b, w);
+      const L = 0, T = m / 2 + s / 2, E = o, R = m;
+      a.moveTo(L, T), a.lineTo(E, R);
+    }
+    return a.strokeStyle = j, a.stroke(), X`<div style=${z(p ? {
+      display: "flex",
+      marginTop: `-${y ? 0 : h ? r / 2 : 0}px`,
+      marginBottom: `-${y ? s : h ? s / 2 : 0}px`
+    } : {
+      display: "flex",
+      marginRight: `-${y ? 0 : h ? r / 2 : 0}px`,
+      marginLeft: `-${y ? 0 : h ? s / 2 : 0}px`
+    })}>${c}</div>`;
+  }
+}
+k("arcgis-legend-card-size-ramp", O);
+export {
+  O as LegendCardSizeRamp
+};

package/dist/components/arcgis-legend-card-size-ramp/index.d.ts

@@ -0,0 +1,2 @@
+import "../arcgis-legend-spike-ramp/index.js";
+export * from "./customElement.js";

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

@@ -0,0 +1,2 @@
+import "../arcgis-legend-spike-ramp/index.js";
+export * from "./customElement.js";

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

@@ -0,0 +1,13 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+/// <reference path="../../index.d.ts" />
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { ArcgisLegend } from '../arcgis-legend/customElement.js';
+
+/** [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-legend-card-univariate-above-and-below-ramp/) */
+export declare class LegendCardUnivariateAboveAndBelowRamp extends LitElement {
+    cssEffectFilter?: string;
+    legendElement: __esri.UnivariateColorSizeRampElement;
+    /** @default 1 */
+    opacity: number;
+    messages: ArcgisLegend["messages"];
+}

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

@@ -0,0 +1,64 @@
+import { c as C } from "../../chunks/runtime.js";
+import { css as E, html as r } from "lit";
+import { LitElement as L, safeClassMap as a, safeStyleMap as o } from "@arcgis/lumina";
+import { c as S } from "../../chunks/utils.js";
+import { f as k, h as B, b, c as f, a as U } from "../../chunks/univariateUtils.js";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/4.34/esri/copyright.txt for details.
+v4.34.0-next.121 */
+const F = E`.arcgis-legend--card__layer-row{display:flex;align-items:center}.arcgis-legend--card__symbol{display:block;margin:auto}.arcgis-legend--card__symbol-container{position:relative}.arcgis-legend__ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.arcgis-legend__layer-cell{padding:var(--calcite-spacing-xxs) 0;min-width:100px;vertical-align:middle;word-break:break-word}.arcgis-legend__layer-cell--info{padding-right:var(--calcite-spacing-sm);padding-left:var(--calcite-spacing-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.arcgis-univariate-above-and-below-ramp__color--card{position:relative}.arcgis-univariate-above-and-below-ramp__color--card:before{content:"";border-left:var(--calcite-border-width-sm) solid var(--calcite-color-background);border-right:var(--calcite-border-width-sm) solid var(--calcite-color-background);width:100%;height:15px;display:block;position:absolute;top:var(--calcite-border-width-sm)}.arcgis-univariate-above-and-below-ramp__symbol{display:flex;align-items:center;justify-content:center}`, i = {
+  layerRow: "arcgis-legend--card__layer-row",
+  symbol: "arcgis-legend--card__symbol",
+  symbolContainer: "arcgis-legend--card__symbol-container",
+  rampLabelsContainer: "arcgis-legend__ramp-labels",
+  layerInfo: "arcgis-legend__layer-cell arcgis-legend__layer-cell--info",
+  univariateAboveAndBelowColorRamp: "arcgis-univariate-above-and-below-ramp__color--card"
+};
+class M extends L {
+  constructor() {
+    super(...arguments), this.legendElement = null, this.opacity = 1;
+  }
+  static {
+    this.properties = { cssEffectFilter: 1, legendElement: 0, opacity: 9, messages: 0 };
+  }
+  static {
+    this.styles = F;
+  }
+  render() {
+    const { legendElement: y, opacity: t } = this, { sizeRampElement: e, colorRampElement: n } = k(y, t, "horizontal");
+    if (!e)
+      return null;
+    const w = B(e, "full", !0, "horizontal"), h = b(e, "above", !0, "horizontal"), _ = b(e, "below", !0, "horizontal"), c = 12, d = this.messages?.previewColorRampAriaLabel, m = f(n, {
+      width: h,
+      height: c,
+      rampAlignment: "horizontal",
+      opacity: t,
+      type: "above",
+      cssEffectFilter: this.cssEffectFilter,
+      ariaLabel: d
+    }), u = f(n, {
+      width: _,
+      height: c,
+      rampAlignment: "horizontal",
+      opacity: t,
+      type: "below",
+      cssEffectFilter: this.cssEffectFilter,
+      ariaLabel: d
+    }), p = U(e, "card"), g = e.infos.map((l) => l.label), R = g.length - 1, x = g.map((l, v) => v === 0 || v === R ? r`<div>${l}</div>` : null), $ = { display: "flex", flexDirection: "column" }, z = { display: "flex", flexDirection: "row" }, s = {
+      marginTop: "3px",
+      display: "flex"
+    };
+    S(this.el) ? s.marginRight = `${p}px` : s.marginLeft = `${p}px`;
+    const A = {
+      width: `${w}px`,
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between"
+    };
+    return r`<div class=${a(i.layerRow)} style=${o($)}><div class=${a(i.symbolContainer)} style=${o(z)}>${e.infos.map((l) => r`<div class=${a(i.symbol)}>${l.preview}</div>`)}</div>${m ? r`<div class=${a(i.univariateAboveAndBelowColorRamp)} style=${o(s)}><div>${m}</div><div>${u}</div></div>` : null}<div class=${a(i.layerInfo)}><div class=${a(i.rampLabelsContainer)} style=${o(A)}>${x}</div></div></div>`;
+  }
+}
+C("arcgis-legend-card-univariate-above-and-below-ramp", M);
+export {
+  M as LegendCardUnivariateAboveAndBelowRamp
+};

package/dist/components/arcgis-legend-card-univariate-above-and-below-ramp/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

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

@@ -0,0 +1 @@
+export * from "./customElement.js";

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

@@ -0,0 +1,13 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+/// <reference path="../../index.d.ts" />
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { ArcgisLegend } from '../arcgis-legend/customElement.js';
+
+/** [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-legend-card-univariate-color-size-ramp/) */
+export declare class LegendCardUnivariateColorSizeRamp extends LitElement {
+    cssEffectFilter?: string;
+    legendElement: __esri.UnivariateColorSizeRampElement;
+    /** @default 1 */
+    opacity: number;
+    messages: ArcgisLegend["messages"];
+}

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

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

package/dist/components/arcgis-legend-card-univariate-color-size-ramp/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

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

@@ -0,0 +1 @@
+export * from "./customElement.js";