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

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";

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

@@ -0,0 +1,23 @@
+/// <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';
+
+export type CardLayout = "auto" | "side-by-side" | "stack";
+/** [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-legend-card-view/) */
+export declare class LegendCardView extends LitElement {
+    activeLayerInfos?: __esri.Collection<__esri.ActiveLayerInfo>;
+    /** @default 3 */
+    headingLevel: HeadingLevel;
+    messages: ArcgisLegend["messages"];
+    view: __esri.MapView | __esri.SceneView;
+    /**
+     * The rendering layout.
+     *
+     * @default "auto"
+     */
+    layout: CardLayout;
+    /** The type of style. For Card this value is always `card`. */
+    readonly type: "card";
+}

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

@@ -0,0 +1,90 @@
+import { c as l } from "../../chunks/runtime.js";
+import { css as d, html as r } from "lit";
+import { repeat as o } from "lit/directives/repeat.js";
+import { watch as g } from "@arcgis/core/core/reactiveUtils.js";
+import { substitute as h } from "@arcgis/core/intl.js";
+import { LitElement as m, safeClassMap as a } from "@arcgis/lumina";
+import { classes as f } from "@arcgis/toolkit/dom";
+import { H as _ } from "../../chunks/heading.js";
+import { g as v } from "../../chunks/globalCss.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 u = d`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}:host{display:flex;flex-direction:row;position:relative;transition:max-width .25s ease-in-out;overflow-x:auto}calcite-carousel-item[selected]{flex:1;overflow:auto}.arcgis-legend--card__message{padding:.5em 1em}.arcgis-legend--card__service-caption-text{margin:0}.arcgis-legend--card__service-content{display:flex;flex:1}.arcgis-legend--card__service-content>arcgis-legend-card-element:not(:first-child){border-left:1px solid var(--calcite-color-border-2)}.arcgis-legend--card__service{border-left:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);min-width:fit-content;display:flex;flex-direction:column;flex:1}.arcgis-legend--card__service-caption-container{border-bottom:1px solid var(--calcite-color-border-2);padding:var(--calcite-spacing-md)}`, n = {
+  message: "arcgis-legend--card__message",
+  serviceCaptionText: "arcgis-legend--card__service-caption-text",
+  serviceContent: "arcgis-legend--card__service-content",
+  service: "arcgis-legend--card__service",
+  serviceCaptionContainer: "arcgis-legend--card__service-caption-container"
+}, p = 768;
+class $ extends m {
+  constructor() {
+    super(...arguments), this.stacked = !1, this.headingLevel = 3, this.layout = "auto", this.type = "card";
+  }
+  static {
+    this.properties = { stacked: 16, activeLayerInfos: 0, headingLevel: 9, messages: 0, view: 0, layout: 1, type: 32 };
+  }
+  static {
+    this.styles = u;
+  }
+  loaded() {
+    this.manager.onLifecycle(() => [
+      g(() => [this.layout, this.view.width], () => {
+        this.stacked = this.layout === "stack" || (!this.layout || this.layout === "auto") && this.view.width <= p;
+      }, { initial: !0 })
+    ]);
+  }
+  render() {
+    return (this.stacked ? this._renderCarousel() : this._renderLayers()) || r`<div class=${a(n.message)}>${this.messages.noLegend}</div>`;
+  }
+  _renderTitle(e) {
+    return r`<div class=${a(n.serviceCaptionContainer)}>${_({ class: f(n.serviceCaptionText, v.heading), level: this.headingLevel, children: e })}</div>`;
+  }
+  _renderCarousel() {
+    const e = [], t = this.activeLayerInfos;
+    if (t)
+      for (const s of t)
+        this._renderSections(s, e);
+    return e?.length ? r`<calcite-carousel .label=${this.messages.carousel ?? ""}>${e.map((s, i) => r`<calcite-carousel-item .label=${h(this.messages?.pagination?.pageText ?? "", {
+      index: i + 1,
+      total: e.length
+    })}>${s}</calcite-carousel-item>`)}</calcite-carousel>` : null;
+  }
+  _renderLayers() {
+    const t = this.activeLayerInfos?.toArray()?.map((s) => this._renderLegendForLayer(s)).filter(Boolean);
+    return t?.length ? t : null;
+  }
+  _renderLegendForLayer(e) {
+    if (!e.ready)
+      return null;
+    if (e.children.length) {
+      const t = e.children.toArray().map(this._renderLegendForLayer, this);
+      return r`<section class=${a(n.service)}>${this._renderTitle(e.title)}<div class=${a(n.serviceContent)}>${t}</div></section>`;
+    }
+    return this._renderLegendElementsForLayer(e);
+  }
+  _renderLegendElementsForLayer(e) {
+    const t = e.legendElements?.filter(Boolean);
+    if (!t?.length)
+      return null;
+    const s = o(t, (i) => `${e.layer.uid}-${i.type}`, (i) => r`<arcgis-legend-card-element .activeLayerInfo=${e} .cssEffectFilter=${e.cssEffectFilter ?? void 0} .stacked=${this.stacked} .headingLevel=${this.headingLevel} .layer=${e.layer} .legendElement=${i} .messages=${this.messages}></arcgis-legend-card-element>`);
+    return r`<section class=${a(n.service)}>${this._renderTitle(e.title)}<div class=${a(n.serviceContent)}>${s}</div></section>`;
+  }
+  _renderSections(e, t) {
+    if (!e.ready)
+      return;
+    if (e.children.length)
+      for (const i of e.children)
+        this._renderSections(i, t);
+    const s = e.legendElements;
+    if (s?.length)
+      for (const i of s) {
+        const c = r`<arcgis-legend-card-element .activeLayerInfo=${e} .cssEffectFilter=${e.cssEffectFilter ?? void 0} .stacked=${this.stacked} .headingLevel=${this.headingLevel} .layer=${e.layer} .legendElement=${i} .messages=${this.messages}></arcgis-legend-card-element>`;
+        c && t.push(c);
+      }
+  }
+}
+l("arcgis-legend-card-view", $);
+export {
+  $ as LegendCardView
+};

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

@@ -0,0 +1,4 @@
+import "@esri/calcite-components/components/calcite-carousel";
+import "@esri/calcite-components/components/calcite-carousel-item";
+import "../arcgis-legend-card-element/index.js";
+export * from "./customElement.js";

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

@@ -0,0 +1,4 @@
+import "@esri/calcite-components/components/calcite-carousel";
+import "@esri/calcite-components/components/calcite-carousel-item";
+import "../arcgis-legend-card-element/index.js";
+export * from "./customElement.js";

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

@@ -0,0 +1,12 @@
+/// <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-classic-color-ramp/) */
+export declare class ArcgisLegendClassicColorRamp extends LitElement {
+    legendElement: __esri.ColorRampElement | __esri.HeatmapRampElement | __esri.OpacityRampElement | __esri.StretchRampElement;
+    /** @default 1 */
+    opacity: number;
+    messages: ArcgisLegend["messages"];
+}

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

@@ -0,0 +1,49 @@
+import { c as n } from "../../chunks/runtime.js";
+import { css as c, html as r } from "lit";
+import { LitElement as g, safeClassMap as i, safeStyleMap as p } from "@arcgis/lumina";
+import { g as o } 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 m = c`.arcgis-legend__layer-row{display:flex}.arcgis-legend__layer-cell{padding:var(--calcite-spacing-xxs) 0;min-width:100px;vertical-align:middle;word-break:break-word}.arcgis-legend__layer-cell--symbols{min-width:10px;text-align:center}.arcgis-legend__layer-cell--info{padding-right:var(--calcite-spacing-sm);padding-left:var(--calcite-spacing-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.arcgis-legend__ramps{margin-left:var(--calcite-spacing-sm)}:dir(rtl) .arcgis-legend__ramps{margin-right:var(--calcite-spacing-sm);margin-left:auto}.arcgis-legend__color-ramp{width:24px}.arcgis-legend__opacity-ramp{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExODcxRkM3N0RBQzA4QkVDRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEOTY4RkNFNjM1MzYxMUU0ODlDMUFFQ0M2REU5QzFCNCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEOTY4RkNFNTM1MzYxMUU0ODlDMUFFQ0M2REU5QzFCNCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MDExNzQwNzIwNjgxMTg3MUZDNzdEQUMwOEJFQ0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MDExNzQwNzIwNjgxMTg3MUZDNzdEQUMwOEJFQ0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6SLS5VAAAAKElEQVR42mI8c+YMAwwYGxvD2UwMOADpEoz///+Hc86ePUsLOwACDABC1ghwV8TLOQAAAABJRU5ErkJggg==)}.arcgis-legend__ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.arcgis-legend__ramp-label{position:relative;padding:0 var(--calcite-spacing-sm);line-height:var(--calcite-font-size-sm);white-space:nowrap;font-size:var(--calcite-font-size-sm)}.arcgis-legend__ramp-label:before{display:block;position:absolute;top:.25em;right:100%;border-width:3px 4px 3px 0;border-style:solid;border-color:transparent rgba(0,1,0) transparent transparent;width:0;height:0;content:""}.arcgis-legend__ramp-label:first-child{margin-top:calc(var(--calcite-font-size-sm) / 3 * -1)}.arcgis-legend__ramp-label:last-child{bottom:calc(var(--calcite-font-size-sm) * .25 * -1)}.arcgis-legend-layer-caption{display:table-caption;padding:var(--calcite-spacing-sm) 0}:dir(rtl) .arcgis-legend__ramp-label:before{right:auto;left:100%;border-width:3px 0 3px 4px;border-color:transparent transparent transparent rgba(0,1,0)}`, a = {
+  layerRow: "arcgis-legend__layer-row",
+  layerInfo: "arcgis-legend__layer-cell arcgis-legend__layer-cell--info",
+  symbolContainer: "arcgis-legend__layer-cell arcgis-legend__layer-cell--symbols",
+  rampContainer: "arcgis-legend__ramps",
+  colorRamp: "arcgis-legend__color-ramp",
+  opacityRamp: "arcgis-legend__opacity-ramp",
+  rampLabelsContainer: "arcgis-legend__ramp-labels",
+  rampLabel: "arcgis-legend__ramp-label"
+};
+class d extends g {
+  constructor() {
+    super(...arguments), this.legendElement = null, this.opacity = 1;
+  }
+  static {
+    this.properties = { _preview: 16, legendElement: 0, opacity: 9, messages: 0 };
+  }
+  static {
+    this.styles = m;
+  }
+  get _preview() {
+    const e = this.legendElement.preview;
+    if (!e)
+      return null;
+    const l = this.legendElement.type === "opacity-ramp" ? a.opacityRamp : "";
+    return e.className = `${a.colorRamp} ${l}`, this.opacity != null && (e.style.opacity = this.opacity.toString()), e;
+  }
+  render() {
+    const { legendElement: e, _preview: l } = this;
+    if (!l)
+      return null;
+    const t = { height: l.style.height };
+    return r`<div class=${i(a.layerRow)}><div class=${i(a.symbolContainer)}><div class=${i(a.rampContainer)}>${l}</div></div><div class=${i(a.layerInfo)}><div class=${i(a.rampLabelsContainer)} style=${p(t)}>${e.infos.map((s) => this._renderRampLabel(s, e.type))}</div></div></div>`;
+  }
+  _renderRampLabel(e, l) {
+    return r`<div class=${i(e.label ? a.rampLabel : void 0)}>${o(e, l, this.messages)}</div>`;
+  }
+}
+n("arcgis-legend-classic-color-ramp", d);
+export {
+  d as ArcgisLegendClassicColorRamp
+};

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

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

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

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

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

@@ -0,0 +1,12 @@
+/// <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-classic-element/) */
+export declare class ArcgisLegendClassicElement extends LitElement {
+    cssEffectFilter?: string;
+    layer: __esri.Layer;
+    legendElement: __esri.LegendElement;
+    messages: ArcgisLegend["messages"];
+}

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

@@ -0,0 +1,92 @@
+import { c as h } from "../../chunks/runtime.js";
+import { css as _, html as a } from "lit";
+import { LitElement as b, safeClassMap as i, nothing as n, safeStyleMap as $ } from "@arcgis/lumina";
+import { classes as g } from "@arcgis/toolkit/dom";
+import { a as v, g as y } from "../../chunks/titleUtils.js";
+import { i as f } 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 u = _`.arcgis-legend__layer-table{display:flex;flex-flow:column;margin-bottom:var(--calcite-spacing-md);width:100%}.arcgis-legend__layer-table--size-ramp{display:table}.arcgis-legend__layer-table--size-ramp .arcgis-legend__layer-cell{display:table-cell}.arcgis-legend__layer-caption{display:table-caption;padding:var(--calcite-spacing-sm) 0;word-break:break-word}.arcgis-legend__layer-body{margin-left:var(--calcite-spacing-sm)}:dir(rtl) .arcgis-legend__layer-body{margin-right:var(--calcite-spacing-sm);margin-left:0;overflow:auto}.arcgis-legend__layer-row{display:flex}.arcgis-legend__layer-table--size-ramp .arcgis-legend__layer-row{display:table-row}.arcgis-legend__layer-cell{padding:var(--calcite-spacing-xxs) 0;min-width:100px;vertical-align:middle;word-break:break-word;display:flex;align-items:center}.arcgis-legend__layer-cell--info{padding-right:var(--calcite-spacing-sm);padding-left:var(--calcite-spacing-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.arcgis-legend__imagery-layer-image--stretched{display:block;margin-bottom:-2px}.arcgis-legend__imagery-layer-info--stretched{padding:0 2px;vertical-align:top}.arcgis-legend__layer-cell--symbols{min-width:10px;text-align:center}.arcgis-legend__symbol{display:flex;justify-content:center}`, s = {
+  layerTable: "arcgis-legend__layer-table",
+  layerTableSizeRamp: "arcgis-legend__layer-table--size-ramp",
+  layerCaption: "arcgis-legend__layer-caption",
+  layerBody: "arcgis-legend__layer-body",
+  layerRow: "arcgis-legend__layer-row",
+  layerInfo: "arcgis-legend__layer-cell arcgis-legend__layer-cell--info",
+  imageryLayerStretchedImage: "arcgis-legend__imagery-layer-image--stretched",
+  imageryLayerInfoStretched: "arcgis-legend__imagery-layer-info--stretched",
+  symbolContainer: "arcgis-legend__layer-cell arcgis-legend__layer-cell--symbols",
+  symbol: "arcgis-legend__symbol"
+};
+class w extends b {
+  static {
+    this.properties = { cssEffectFilter: 1, layer: 0, legendElement: 0, messages: 0 };
+  }
+  static {
+    this.styles = u;
+  }
+  render() {
+    const e = this._renderLegendElement(), r = v(this.legendElement, this.messages), l = r ? a`<div class=${i(s.layerCaption)}>${r}</div>` : null, t = {
+      [s.layerTableSizeRamp]: this.legendElement.type === "size-ramp"
+    };
+    return a`<section class=${i(g(s.layerTable, t))}>${l}${e}</section>`;
+  }
+  _renderLegendElement() {
+    switch (this.legendElement.type) {
+      case "symbol-table":
+        return this._renderSymbolTable(this.legendElement);
+      case "size-ramp":
+        return a`<arcgis-legend-classic-size-ramp .legendElement=${this.legendElement} .messages=${this.messages}></arcgis-legend-classic-size-ramp>`;
+      case "color-ramp":
+      case "opacity-ramp":
+      case "heatmap-ramp":
+      case "stretch-ramp":
+        return a`<arcgis-legend-classic-color-ramp .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-classic-color-ramp>`;
+      case "relationship-ramp":
+        return a`<arcgis-legend-relationship-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .opacity=${this.layer.opacity} .messages=${this.messages}></arcgis-legend-relationship-ramp>`;
+      case "pie-chart-ramp":
+        return a`<div>${this.legendElement.preview}</div>`;
+      case "univariate-above-and-below-ramp":
+        return a`<arcgis-legend-classic-univariate-above-and-below-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-classic-univariate-above-and-below-ramp>`;
+      case "univariate-color-size-ramp":
+        return a`<arcgis-legend-classic-univariate-color-size-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-classic-univariate-color-size-ramp>`;
+      default:
+        return null;
+    }
+  }
+  _renderSymbolTable(e) {
+    const r = e.infos.map((l) => this._renderElementInfo(l, e.legendType)).filter(Boolean);
+    return r.length ? a`<div class=${i(s.layerBody)}>${r}</div>` : null;
+  }
+  _renderElementInfo(e, r) {
+    const { layer: l } = this, t = "label" in e ? e.label : null;
+    if ("type" in e && e.type)
+      return e ? a`<arcgis-legend-classic-element .cssEffectFilter=${this.cssEffectFilter} .layer=${l} .legendElement=${e} .messages=${this.messages}></arcgis-legend-classic-element>` : null;
+    if (!("preview" in e && e.preview) && !("src" in e && e.src))
+      return null;
+    const c = f(l, r), d = {
+      [s.imageryLayerInfoStretched]: c
+    }, o = {
+      [s.imageryLayerInfoStretched]: c
+    };
+    return a`<div class=${i(s.layerRow)}><div class=${i(g(s.symbolContainer, o))}>${this._renderPreview(e, c)}</div><div class=${i(g(s.layerInfo, d))}>${y(this.messages, t, !1) || ""}</div></div>`;
+  }
+  _renderPreview(e, r) {
+    const { layer: l } = this;
+    return "preview" in e && e.preview ? a`<div class=${i(s.symbol)}>${e.preview}</div>` : "src" in e && e.src ? this._renderImage(e, l, r) : null;
+  }
+  _renderImage(e, r, l) {
+    const { label: t, src: c, opacity: d } = e, o = {
+      [s.imageryLayerStretchedImage]: l,
+      [s.symbol]: !l
+    }, p = {
+      opacity: `${d ?? r.opacity}`
+    }, m = y(this.messages, t, !1);
+    return a`<img alt=${m ?? n} .ariaLabel=${m} class=${i(g(o))} height=${e.height ?? void 0 ?? n} src=${c ?? n} style=${$(p)} width=${e.width ?? void 0 ?? n}>`;
+  }
+}
+h("arcgis-legend-classic-element", w);
+export {
+  w as ArcgisLegendClassicElement
+};

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

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

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

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

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

@@ -0,0 +1,10 @@
+/// <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-classic-size-ramp/) */
+export declare class ArcgisLegendClassicSizeRamp extends LitElement {
+    legendElement: __esri.SizeRampElement;
+    messages: ArcgisLegend["messages"];
+}