@arcgis/map-components 4.34.0-next.13 → 4.34.0-next.131

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

@@ -1,31 +1,74 @@
-import { c as e } from "../../chunks/runtime.js";
-import { usePropertyChange as t } from "@arcgis/lumina/controllers";
-import i from "@arcgis/core/widgets/Legend.js";
-import { LitElement as s, createEvent as r, noShadowRoot as a } from "@arcgis/lumina";
-import { m as o } from "../../chunks/useWidget.js";
-import { css as n } from "@lit/reactive-element/css-tag.js";
+import { c as l } from "../../chunks/runtime.js";
+import { css as d, html as r } from "lit";
+import { on as o, watch as s } from "@arcgis/core/core/reactiveUtils.js";
+import c from "@arcgis/core/widgets/Legend/LegendViewModel.js";
+import { LitElement as g, createEvent as h, safeClassMap as p } from "@arcgis/lumina";
+import { usePropertyChange as f } from "@arcgis/lumina/controllers";
+import { classes as _ } from "@arcgis/toolkit/dom";
+import { u as m } from "../../chunks/useHandles.js";
+import { u } from "../../chunks/useT9n.js";
+import { m as w } from "../../chunks/useViewModel.js";
+import { g as a } 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.13 */
-const l = n`@layer{arcgis-legend{display:block}}`, d = o(i);
-class h extends s {
+v4.34.0-next.131 */
+const v = 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)}.esri-widget{--esri-widget-padding-x: 15px;--esri-widget-padding-y: var(--calcite-spacing-md);--esri-widget-padding: var(--esri-widget-padding-y) var(--esri-widget-padding-x);box-sizing:border-box;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);line-height:1.3em}.esri-widget *,.esri-widget :before,.esri-widget :after{box-sizing:inherit}.esri-widget.esri-widget--disabled>*{opacity:.4;pointer-events:none}.esri-widget.esri-widget--compact{--esri-widget-padding-y: 0;--esri-widget-padding-x: 0}.esri-widget__anchor{color:var(--calcite-color-text-2)}.esri-widget__anchor:hover{color:var(--calcite-color-text-3)}.esri-widget__anchor:hover,.esri-widget__anchor:focus{text-decoration:underline}.esri-widget__anchor--disabled{opacity:.4;pointer-events:none}.esri-widget__header{background-color:var(--calcite-color-foreground-1);flex:1 0 100%;justify-content:space-between;align-items:center;width:100%;min-height:48px;padding:12px 0 12px 15px;display:flex}.esri-widget__header .esri-widget__heading{width:calc(100% - 48px);text-align:initial;color:var(--calcite-color-text-1);align-items:center;margin:0;padding:0;display:flex}.esri-widget__header-button{appearance:none;cursor:pointer;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);border:none;flex:0 0 48px;justify-content:center;align-self:stretch;align-items:center;width:48px;padding:0;display:flex}.esri-widget__footer{background-color:var(--calcite-color-foreground-1);justify-content:center;align-items:center;width:100%;min-height:48px;display:flex}.esri-widget__footer-pagination{color:var(--calcite-color-text-2);justify-content:space-between;align-items:center;display:flex}.esri-widget__footer-pagination-previous-button,.esri-widget__footer-pagination-next-button{cursor:pointer;background-color:var(--calcite-color-foreground-1);border:0;margin:0 7px;padding:12px 15px;transition:background-color .125s ease-in-out}.esri-widget__footer-pagination-previous-button:hover,.esri-widget__footer-pagination-previous-button:focus,.esri-widget__footer-pagination-next-button:hover,.esri-widget__footer-pagination-next-button:focus{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1)}.esri-menu{visibility:hidden;z-index:1;background-clip:padding;background-color:var(--calcite-color-foreground-1);background-clip:padding-box;width:100%;max-height:0;margin:2px 0 0;padding:0;font-size:var(--calcite-font-size);line-height:var(--calcite-spacing-xl);position:absolute;top:100%;left:0;overflow:hidden;box-shadow:0 1px 2px #0000004d}.esri-menu .esri-menu__header{color:var(--calcite-color-text-inverse);background-color:var(--calcite-color-inverse);padding:6px 12px}.esri-menu__list{margin:0;padding:0;list-style:none}.esri-menu__list-item{cursor:pointer;border-top:1px solid #adadad4d;border-left:3px solid #0000;padding:.8em 1em}.esri-menu__list-item [class^=esri-icon-],.esri-menu__list-item [class*=" esri-icon-"]{padding-right:2.8px}.esri-menu__list-item:first-child{border-top:none}.esri-menu__list-item--focus,.esri-menu__list-item:hover,.esri-menu__list-item:focus{background-color:#303030}.esri-menu__list-item:active{background-color:#000}.esri-menu__list-item--active,.esri-menu__list-item--active:hover,.esri-menu__list-item--active:focus{background-color:var(--calcite-color-foreground-1);border-left-color:#2493f2}.esri-widget__table{border-collapse:collapse;color:var(--calcite-color-text-1);border:none;width:100%;line-height:1.3em}.esri-widget__table tr:nth-child(odd){background-color:var(--calcite-color-transparent)}.esri-widget__table tr:nth-child(2n){background-color:var(--calcite-color-transparent-press)}.esri-widget__table tr a{color:var(--calcite-color-text-2)}.esri-widget__table tr a:hover,.esri-widget__table tr a:focus{color:var(--calcite-color-text-1)}.esri-widget__table tr td,.esri-widget__table tr th{vertical-align:top;word-break:break-word;padding:.5em .7em;font-size:var(--calcite-font-size-sm);font-weight:var(--calcite-font-weight-regular)}.esri-widget__table tr th{text-align:left;border-right:3px solid #0000000d;width:50%}.esri-widget__table tr td{width:50%}.esri-input{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1);border:1px solid #959595;font-size:var(--calcite-font-size)}.esri-input::-ms-clear{display:none}.esri-input::placeholder{opacity:1;color:var(--calcite-color-text-2)}.esri-input:placeholder-shown{text-overflow:ellipsis}.esri-input[type=text],.esri-input[type=password],.esri-input[type=number]{height:32px;padding:0 .5em}calcite-combobox.esri-input{border:none}.esri-widget__content--empty{text-align:center;color:var(--calcite-color-border-input);flex-flow:column wrap;align-items:center;padding:18px 22px;display:flex}.esri-widget__content--empty h1.esri-widget__heading,.esri-widget__content--empty h2.esri-widget__heading,.esri-widget__content--empty h3.esri-widget__heading,.esri-widget__content--empty h4.esri-widget__heading,.esri-widget__content--empty h5.esri-widget__heading{font-weight:var(--calcite-font-weight-regular)}.esri-widget__content-illustration--empty{width:128px;padding:1rem 0}.esri-widget__content-icon--empty{width:32px;padding:.5rem 0}.esri-select{appearance:none;cursor:pointer;color:var(--calcite-color-text-2);background:var(--calcite-color-foreground-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 32 32' width='32' height='32'%3E%3Cpath d='M8 11.207l-4-4V5.793l4 4 4-4v1.414z' fill='%23adadad' fillrule='nonzero'/%3E%3C/svg%3E") 100% no-repeat;border:1px solid #959595;border-radius:0;width:100%;height:32px;margin:0;padding:0 .5em;font-family:inherit;font-size:.85em;display:block}.esri-select[disabled]{cursor:auto}.esri-select::-ms-expand{display:none}.esri-disabled a,.esri-disabled [role=menu],.esri-disabled [role=checkbox],.esri-disabled [class^=esri-icon-],.esri-disabled [class*=" esri-icon-"]{color:var(--calcite-color-text-3)}.keynav-mode .esri-widget:focus,.keynav-mode .esri-widget :focus{z-index:1;outline-offset:2px;outline:2px solid #adadad}.esri-widget__loader-animation{border:.15em solid #adadad4d;border-top-color:var(--calcite-color-border-input);border-radius:100%;width:1em;height:1em;font-size:var(--calcite-font-size-md);animation:1.25s linear infinite esri-rotate;display:block;transform:translateZ(0)}:dir(rtl) .esri-widget__table th{text-align:right;border-left:3px solid #0000000d;border-right:none}:dir(rtl) .esri-select{background-position:0}:dir(rtl) .esri-menu__list-item{border-left:none;border-right:3px solid #0000}:dir(rtl) .esri-menu__list-item [class^=esri-icon-],:dir(rtl) .esri-menu__list-item [class*=" esri-icon-"]{padding-left:2px;padding-right:0}:dir(rtl) .esri-menu__list-item--active{border-right-color:var(--calcite-color-brand)}.esri-icon-font-fallback-text{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.esri-rotating{animation:1.25s linear infinite esri-rotate;transform:translateZ(0)}.esri-clearfix:before,.esri-clearfix:after{content:" ";display:table}.esri-clearfix:after{clear:both}.esri-interactive{cursor:pointer}.esri-hidden{display:none!important}.esri-invisible{visibility:hidden!important}.esri-offscreen{position:absolute;top:-999em;left:-999em}.esri-match-height{flex-direction:column;flex:auto;display:flex;overflow:hidden}:host{overflow:auto;width:var(--arcgis-legend-internal-width, 300px)}:host([card-style-layout="side-by-side"]){--arcgis-legend-internal-width: auto}`, y = w(c);
+class b extends g {
   constructor() {
-    super(...arguments), this.widget = d(this), this.viewModel = this.widget.viewModel, this.activeLayerInfos = this.widget.activeLayerInfos, this.autoDestroyDisabled = !1, this.basemapLegendVisible = this.widget.basemapLegendVisible, this.headingLevel = this.widget.headingLevel, this.hideLayersNotInCurrentView = this.widget.hideLayersNotInCurrentView, this.icon = this.widget.icon, this.label = this.widget.label, this.layerInfos = this.widget.layerInfos, this.legendStyle = this.widget.style, this.position = "bottom-left", this.respectLayerDefinitionExpression = this.widget.respectLayerDefinitionExpression, this.respectLayerVisibilityDisabled = this.widget.respectLayerVisibility, this.state = this.viewModel.state, this.arcgisPropertyChange = t()("state"), this.arcgisReady = r();
+    super(...arguments), this.messages = u({}), this.final = m("destroy"), this.viewModel = y(this), this._isCardStyle = !1, this.view = this.viewModel.view, this.icon = "legend", this.activeLayerInfos = this.viewModel.activeLayerInfos, this.basemapLegendVisible = this.viewModel.basemapLegendVisible, this.headingLevel = 3, this.hideLayersNotInCurrentView = this.viewModel.hideLayersNotInCurrentView, this.respectLayerDefinitionExpression = this.viewModel.respectLayerDefinitionExpression, this.layerInfos = this.viewModel.layerInfos, this.loading = this.viewModel.loading, this.legendStyle = "classic", this.autoDestroyDisabled = !1, this.label = this.messages?.componentLabel, this.state = this.viewModel.state, this.arcgisPropertyChange = f()("state"), this.arcgisReady = h();
   }
   static {
-    this.properties = { activeLayerInfos: 0, autoDestroyDisabled: 5, basemapLegendVisible: 5, headingLevel: 9, hideLayersNotInCurrentView: 5, icon: 1, label: 1, layerInfos: 0, legendStyle: 1, position: 1, referenceElement: 1, respectLayerDefinitionExpression: 5, respectLayerVisibilityDisabled: 5, state: 3 };
+    this.properties = { _isCardStyle: 16, view: 0, referenceElement: 1, position: 1, icon: 1, activeLayerInfos: 0, basemapLegendVisible: 5, headingLevel: 9, hideLayersNotInCurrentView: 5, respectLayerDefinitionExpression: 5, ignoreLayerVisibility: 5, respectLayerVisibilityDisabled: 5, layerInfos: 0, loading: 39, cardStyleLayout: 1, legendStyle: 1, autoDestroyDisabled: 5, messageOverrides: 0, label: 1, state: 3 };
   }
   static {
-    this.shadowRootOptions = a;
+    this.styles = v;
   }
-  static {
-    this.styles = l;
+  get ignoreLayerVisibility() {
+    return !this.viewModel.respectLayerVisibility;
+  }
+  set ignoreLayerVisibility(e) {
+    this.viewModel.respectLayerVisibility = !e;
+  }
+  get respectLayerVisibilityDisabled() {
+    return !this.viewModel.respectLayerVisibility;
+  }
+  set respectLayerVisibilityDisabled(e) {
+    this.viewModel.respectLayerVisibility = !e;
   }
   async destroy() {
     await this.manager.destroy();
   }
+  loaded() {
+    this.manager.onLifecycle(() => [
+      o(() => this.el.view, "resize", () => this.requestUpdate()),
+      o(() => this.activeLayerInfos, "change", () => this._refreshActiveLayerInfos(this.activeLayerInfos)),
+      s(() => [
+        this.cardStyleLayout,
+        this.legendStyle,
+        typeof this.legendStyle == "object" ? this.legendStyle.type : void 0,
+        typeof this.legendStyle == "object" ? this.legendStyle.layout : void 0
+      ], () => {
+        const e = this.legendStyle, i = typeof e == "object" ? e : { type: e };
+        this._isCardStyle = i.type === "card", this._isCardStyle ? this.cardStyleLayout = this.cardStyleLayout || i.layout || "auto" : this.removeAttribute("card-style-layout");
+      }, { initial: !0 })
+    ]);
+  }
+  _refreshActiveLayerInfos(e) {
+    e.forEach((i) => {
+      this.final.removeHandles(`version_${i.layer.uid}`), this._renderOnActiveLayerInfoChange(i);
+    }), this.requestUpdate();
+  }
+  render() {
+    return r`<div class=${p(_(a.widget, { [a.panel]: !this._isCardStyle }))}>${this._isCardStyle && this.view ? r`<arcgis-legend-card-view .activeLayerInfos=${this.activeLayerInfos} .headingLevel=${this.headingLevel} .messages=${this.messages} .layout=${this.cardStyleLayout} .view=${this.view}></arcgis-legend-card-view>` : r`<arcgis-legend-classic-view .activeLayerInfos=${this.activeLayerInfos} .headingLevel=${this.headingLevel} .messages=${this.messages}></arcgis-legend-classic-view>`}</div>`;
+  }
+  _renderOnActiveLayerInfoChange(e) {
+    const i = s(() => e.version, () => this.requestUpdate());
+    this.final.addHandles(i, `version_${e.layer.uid}`);
+    const n = o(() => e.children, "change", () => e.children.forEach((t) => this._renderOnActiveLayerInfoChange(t)));
+    this.final.addHandles(n, `version_${e.layer.uid}`), e.children.forEach((t) => this._renderOnActiveLayerInfoChange(t));
+  }
 }
-e("arcgis-legend", h);
+l("arcgis-legend", b);
 export {
-  h as ArcgisLegend
+  b as ArcgisLegend
 };

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

@@ -1 +1,3 @@
+import "../arcgis-legend-card-view/index.js";
+import "../arcgis-legend-classic-view/index.js";
 export * from "./customElement.js";

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

@@ -1 +1,3 @@
+import "../arcgis-legend-card-view/index.js";
+import "../arcgis-legend-classic-view/index.js";
 export * from "./customElement.js";

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

@@ -0,0 +1,7 @@
+export declare function nextPatternId(): number;
+export declare function resetPatternId(value?: number): void;
+export declare function nextLinearGradientId(): number;
+export declare function resetLinearGradientId(value?: number): void;
+export declare function nextBloomId(): number;
+export declare function resetBloomId(value?: number): void;
+export declare function resetSVGGlobalState(): void;

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,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';
+
+/** @private */
+export declare class ArcgisLegendCardColorRamp extends LitElement {
+    cssEffectFilter?: string;
+    legendElement: __esri.ColorRampElement | __esri.HeatmapRampElement | __esri.OpacityRampElement | __esri.StretchRampElement;
+    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 l } from "lit";
+import { LitElement as $, safeClassMap as n, 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.131 */
+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:25px}`, 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 l`<div class=${n(L(t.layerRow, t.colorRampContainer))}>${this._renderRampLabel(e[0])}<div class=${n(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 l`<div style=${b(y)}>${h}</div>`;
+  }
+  _renderMiddleStopRampLabel(e) {
+    const i = e.length % 2 !== 0 ? e[e.length / 2 | 0] : null;
+    return i ? l`<div class=${n(t.intervalSeparatorsContainer)}><div class=${n(t.intervalSeparator)}>|</div>${this._renderRampLabel(i)}</div>` : null;
+  }
+  _renderRampLabel(e) {
+    return l`<div class=${n(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,16 @@
+/// <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;
+    stacked: boolean;
+    activeLayerInfo: __esri.ActiveLayerInfo;
+    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.131 */
+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";