@arcgis/map-components 4.34.0-next.16 → 4.34.0-next.161

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

@@ -0,0 +1,173 @@
+import { default as Color } from '@arcgis/core/Color.js';
+import { JsxNode } from '@arcgis/lumina';
+import { nil } from '@arcgis/toolkit/type';
+export interface Descriptor {
+    shape: ShapeDescriptor;
+    fill?: FillDescriptor | null;
+    stroke?: StrokeDescriptor | null;
+    font?: FontDescriptor | null;
+    offset?: [number, number] | null;
+}
+export type ShapeDescriptor = CircleDescriptor | EllipseDescriptor | ImageDescriptor | PathDescriptor | RectDescriptor | TextDescriptor;
+export interface PathDescriptor {
+    type: "path";
+    path: CommandObject[] | string;
+}
+export interface CircleDescriptor {
+    type: "circle";
+    cx: number;
+    cy: number;
+    r: number;
+}
+export interface EllipseDescriptor {
+    type: "ellipse";
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+}
+export interface RectDescriptor {
+    type: "rect";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface ImageDescriptor {
+    type: "image";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    src: string;
+}
+export interface TextDescriptor {
+    type: "text";
+    text: string;
+    x: number;
+    y: number;
+    align: string;
+    alignBaseline?: string;
+    decoration: string;
+    rotated: boolean;
+    kerning: boolean;
+}
+export interface CommandObject {
+    command: string;
+    values: number[];
+}
+export type FillDescriptor = Color | GradientDescriptor | [number, number, number, number] | [number, number, number];
+export type GradientDescriptor = LinearDescriptor | PatternDescriptor;
+export interface LinearDescriptor {
+    type: "linear";
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    colors: {
+        color: Color | number[];
+        offset: number;
+        opacity?: number;
+    }[];
+}
+export interface PatternDescriptor {
+    type: "pattern";
+    src: string;
+    width: number;
+    height: number;
+    x?: number | null;
+    y?: number | null;
+}
+export interface StrokeDescriptor {
+    color?: Color | string | [number, number, number, number] | [number, number, number] | null;
+    style?: string | null;
+    width?: number | null;
+    cap?: string | null;
+    join?: number | string | null;
+    dashArray?: string | null;
+    dashoffset?: string | null;
+}
+interface FontDescriptor {
+    size: number;
+    style: string;
+    decoration: string;
+    weight: string;
+    family: string;
+    variant?: string | null;
+}
+export interface FillAttributes {
+    fill: string;
+    pattern: {
+        id: string;
+        x: nil | number;
+        y: nil | number;
+        width: number;
+        height: number;
+        image: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            href: string;
+        };
+    };
+    linearGradient: {
+        id: string;
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+        stops: {
+            offset: number;
+            color: string;
+        }[];
+    };
+}
+export interface StrokeAttributes {
+    color: string;
+    width: number;
+    cap: string;
+    join: string;
+    dashArray: nil | string;
+    dashOffset: nil | string;
+}
+export interface TextAttributes {
+    align: string;
+    dominantBaseline?: string;
+    decoration: string;
+    kerning: string;
+    rotate: string;
+    font: {
+        style: string;
+        variant: string;
+        weight: string;
+        size: string;
+        family: string;
+    };
+}
+interface RenderOptions {
+    node?: HTMLElement | null;
+    scale?: boolean | null;
+    opacity?: number | null;
+    rotations?: (number | null)[];
+    useRotationSize?: boolean | null;
+    cssEffectFilter?: string | null;
+    ignoreStrokeWidth?: boolean | null;
+    masking?: Descriptor[][] | null;
+    ariaLabel?: nil | string;
+    clipBloomEffect?: boolean | null;
+}
+export interface BBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare function renderDef(attrs: FillAttributes): JsxNode | null;
+export declare function generateFillAttributes(fill: FillDescriptor | nil): FillAttributes;
+export declare function generateStrokeAttributes(stroke: nil | StrokeDescriptor): StrokeAttributes;
+export declare function getDashArray(stroke: StrokeDescriptor | null): number[];
+export declare function renderShape(shape: ShapeDescriptor, fill: string, stroke: StrokeAttributes, textAttrs: nil | TextAttributes, ariaLabel?: nil | string): JsxNode | null;
+export declare function generateTextAttributes(text: nil | TextDescriptor, font: FontDescriptor | nil): TextAttributes;
+export declare function renderSVG(swatch: Descriptor[][], width: number, height: number, options?: RenderOptions): JsxNode;
+export {};

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

@@ -0,0 +1,6 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+import { nil } from '@arcgis/toolkit/type';
+import { ArcgisLegend } from '../customElement.js';
+export declare function getTitle(messages: ArcgisLegend["messages"], titleInfo: __esri.ClusterTitle | __esri.DotDensityTitle | __esri.RampTitle | __esri.RendererTitle | __esri.StretchMultibandTitle | nil | string, isRamp: boolean): string | undefined;
+export declare function isRendererTitle(_titleInfo: unknown, isRamp: boolean): _titleInfo is __esri.RendererTitle;
+export declare function getLegendElementTitle(legendElement: __esri.LegendElement, messages: ArcgisLegend["messages"]): nil | string;

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

@@ -0,0 +1,33 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+import { ArcgisLegend } from '../customElement.js';
+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, messages: ArcgisLegend["messages"], opacity: number, rampAlignment?: "horizontal" | "vertical"): {
+    sizeRampElement: __esri.SizeRampElement;
+    colorRampElement: __esri.ColorRampElement;
+};
+export declare function getUnivariateColorSizeRampElements(legendElement: __esri.UnivariateColorSizeRampElement, messages: ArcgisLegend["messages"], 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,10 @@
+/// <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;
+export declare function getPreviewAriaLabelIntl(messages: ArcgisLegend["messages"], previewAriaLabel?: __esri.SymbolTableElementInfo["previewAriaLabel"]): string;
+export declare function setAriaLabel(preview: HTMLElement | nil, ariaLabel: nil | string): void;

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';
+
+/** @private */
+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 f } from "../../chunks/runtime.js";
+import { css as v, html as n } from "lit";
+import { LitElement as $, safeClassMap as l, safeStyleMap as b } from "@arcgis/lumina";
+import { classes as L } from "@arcgis/toolkit/dom";
+import { c as u } from "../../chunks/svgUtils.js";
+import { c as R } 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.161 */
+const w = v`: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:var(--calcite-font-line-height-fixed-xl)}`, t = {
+  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"
+}, x = 25, S = 25, C = 100;
+class E extends $ {
+  constructor() {
+    super(...arguments), this.legendElement = null, this.opacity = 1;
+  }
+  static {
+    this.properties = { cssEffectFilter: 1, legendElement: 0, opacity: 9, messages: 0 };
+  }
+  static {
+    this.styles = w;
+  }
+  render() {
+    const e = this.legendElement.infos.slice().reverse();
+    return n`<div class=${l(L(t.layerRow, t.colorRampContainer))}>${this._renderRampLabel(e[0])}<div class=${l(t.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, a = S, s = o > 2 && !d ? x * o : C, p = s + 20, r = 10, m = [
+      [
+        {
+          shape: {
+            type: "path",
+            path: `M0 ${a / 2} L${r} 0 L${r} ${a} Z`
+          },
+          fill: e[0].color,
+          stroke: { width: 0 }
+        },
+        {
+          shape: {
+            type: "rect",
+            x: r,
+            y: 0,
+            width: s,
+            height: a
+          },
+          fill: {
+            type: "linear",
+            x1: r,
+            y1: 0,
+            x2: s + 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${s + r} 0 L${p} ${a / 2} L${s + r} ${a} Z`
+          },
+          fill: e[e.length - 1].color,
+          stroke: { width: 0 }
+        }
+      ]
+    ], g = this.legendElement.type === "opacity-ramp" ? this.messages.previewOpacityRampAriaLabel : this.messages.previewColorRampAriaLabel, h = u(m, p, a, { ariaLabel: g }), y = {
+      filter: this.cssEffectFilter,
+      opacity: i == null ? void 0 : `${i}`
+    };
+    return n`<div style=${b(y)}>${h}</div>`;
+  }
+  _renderMiddleStopRampLabel(e) {
+    const i = e.length % 2 !== 0 ? e[e.length / 2 | 0] : null;
+    return i ? n`<div class=${l(t.intervalSeparatorsContainer)}><div class=${l(t.intervalSeparator)}>|</div>${this._renderRampLabel(i)}</div>` : null;
+  }
+  _renderRampLabel(e) {
+    return n`<div class=${l(t.rampLabel)}>${R(e, this.legendElement.type, this.messages)}</div>`;
+  }
+}
+f("arcgis-legend-card-color-ramp", E);
+export {
+  E 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';
+
+/** @private */
+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,132 @@
+import { c as E } from "../../chunks/runtime.js";
+import { css as k, html as s } from "lit";
+import b from "@arcgis/core/Color.js";
+import { LitElement as L, safeClassMap as l, safeStyleMap as u, nothing as _ } from "@arcgis/lumina";
+import { classes as n } from "@arcgis/toolkit/dom";
+import { H as w } from "../../chunks/heading.js";
+import { g as $ } from "../../chunks/globalCss.js";
+import { b as C, s as f, i as z, a as v, g as x } 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.161 */
+const F = 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)}.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 S(p) {
+  return p ? p.r * 0.299 + p.g * 0.587 + p.b * 0.114 >= 127 : void 0;
+}
+class R extends L {
+  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 = F;
+  }
+  _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 b([i.r, i.g, i.b, i.a * this.layer.opacity]) : new b([255, 255, 255, 0]), g = r && c.color ? new b([c.color.r, c.color.g, c.color.b, c.color.a * this.layer.opacity]) : new b([255, 255, 255, 0]), h = S(e.symbol.color) ?? !0, m = h ? "black" : "white", y = h ? "rgba(255, 255, 255, .6)" : "rgba(0, 0, 0, .6)";
+    return {
+      background: d ? o.toCss(!0) : "none",
+      color: m,
+      textShadow: `-1px -1px 0 ${y},
+                  1px -1px 0 ${y},
+                  -1px 1px 0 ${y},
+                  1px 1px 0 ${y}`,
+      border: r ? `1px solid ${g.toCss(!0)}` : "none",
+      filter: this.cssEffectFilter ?? ""
+    };
+  }
+  render() {
+    const e = this._renderLegendElement(), t = C(this.legendElement, this.messages), i = this.stacked ? s`<div class=${l(a.carouselTitleContainer)}>${w({ class: n(a.carouselTitle, $.heading), level: this.headingLevel, children: this.activeLayerInfo.title })}${t ? s`<p class=${l(a.layerCaption)}>${t}</p>` : null}</div>` : t ? w({ class: n(a.sectionTitle, $.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": {
+        const { preview: e } = this.legendElement;
+        return f(e, this.messages.previewPieChartAriaLabel), s`<div class=${l(a.pieChartRampPreview)}>${e}</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 = z(i, t), r = v(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
+        }, { preview: g } = e, h = "previewAriaLabel" in e ? e.previewAriaLabel : null, m = "label" in e ? v(this.messages, e.label, !1) : null;
+        return f(g, x(this.messages, h || m)), s`<div class=${l(n(a.layerRow, { [a.symbolRow]: this.stacked }))}><div class=${l(n(o))}>${g}</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=${u(this._getBackgroundStyles(e))}>${r}</div></div>`;
+    }
+    return null;
+  }
+  _renderImage(e, t, i) {
+    const { previewAriaLabel: d, src: c, opacity: r } = e, o = v(this.messages, e.label, !1), g = {
+      [a.imageryLayerStretchedImage]: i,
+      [a.symbol]: !i
+    }, h = {
+      opacity: `${r ?? t.opacity}`
+    }, m = x(this.messages, d || o);
+    return s`<img alt=${m ?? _} .ariaLabel=${m} class=${l(n(g))} height=${e.height ?? void 0 ?? _} src=${c ?? _} style=${u(h)} width=${e.width ?? void 0 ?? _}>`;
+  }
+}
+E("arcgis-legend-card-element", R);
+export {
+  R 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';
+
+/** @private */
+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 I } from "../../chunks/runtime.js";
+import { css as P, html as X } from "lit";
+import { LitElement as j, safeStyleMap as z, safeClassMap as g } from "@arcgis/lumina";
+import { s as Y, g as k, p 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.161 */
+const A = P`.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"
+}, M = "#ddd";
+function N(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 r = "style" in e ? e.style : void 0;
+  return r === "circle" || r === "diamond" || r === "cross";
+}
+function O(e) {
+  if (e) {
+    if (e.type.includes("3d")) {
+      if (!("symbolLayers" in e) || !e.symbolLayers?.length)
+        return;
+      const r = e.symbolLayers.at(-1), t = r && "resource" in r ? r.resource?.primitive : void 0;
+      return t === "triangle" || t === "cone" || t === "tetrahedron";
+    }
+    return "style" in e && e.style === "triangle";
+  }
+}
+class B extends j {
+  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 = A;
+  }
+  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: r, hasIndicators: t, opacity: i } = this, l = r.infos, v = l.at(0), p = l.at(-1);
+    if (!v || !p)
+      return null;
+    const { label: f, ...S } = v, { label: u, ..._ } = p;
+    let n = S.preview, s = _.preview;
+    if (!n || !s)
+      return null;
+    n = n.cloneNode(!0), n.style.display = "flex", Y(n, k(this.messages, f)), s = s.cloneNode(!0), s.style.display = "flex", Y(s, k(this.messages, u));
+    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)}>${n}</div>${this._renderSizeRampLines(r)}<div class=${g(d.preview)} style=${z(o)}>${s}</div></div><div class=${g(d.label)}>${t ? u : f}</div></div>`;
+  }
+  _renderSizeRampLines(r) {
+    const t = r.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, n = C(f + u), s = C(S + _), o = p ? n : n + 50, m = p ? n / 2 + 50 : n, h = O(v), y = N(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 = M, a.stroke(), X`<div style=${z(p ? {
+      display: "flex",
+      marginTop: `-${h ? 0 : y ? n / 2 : 0}px`,
+      marginBottom: `-${h ? s : y ? s / 2 : 0}px`
+    } : {
+      display: "flex",
+      marginRight: `-${h ? 0 : y ? n / 2 : 0}px`,
+      marginLeft: `-${h ? 0 : y ? s / 2 : 0}px`
+    })}>${c}</div>`;
+  }
+}
+I("arcgis-legend-card-size-ramp", B);
+export {
+  B 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';
+
+/** @private */
+export declare class LegendCardUnivariateAboveAndBelowRamp extends LitElement {
+    cssEffectFilter?: string;
+    legendElement: __esri.UnivariateColorSizeRampElement;
+    /** @default 1 */
+    opacity: number;
+    messages: ArcgisLegend["messages"];
+}