npm - @arcgis/map-components - Versions diffs - 4.34.0-next.99 → 5.0.0-next.1 - Mend

@arcgis/map-components 4.34.0-next.99 → 5.0.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1835) hide show

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

@@ -1,129 +1,341 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
 /// <reference path="../../index.d.ts" />
+import { default as LegendViewModel } from '@arcgis/core/widgets/Legend/LegendViewModel.js';
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { Use } from '@arcgis/lumina/controllers';
-import { default as Legend } from '@arcgis/core/widgets/Legend.js';
-import { PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { HeadingLevel } from '../../support/heading';
 import { ArcgisReferenceElement } from '../../utils/component-utils';
-declare const useLegendWidget: (component: LitElement & Pick<Legend, "icon" | "label" | "viewModel" | "headingLevel" | "activeLayerInfos" | "basemapLegendVisible" | "hideLayersNotInCurrentView" | "layerInfos" | "respectLayerDefinitionExpression"> & {
-    state?: unknown;
-    viewModel?: __esri.LegendViewModel | undefined;
-    closed?: boolean;
-    icon: import('@arcgis/toolkit/type').nil | string;
-    label: import('@arcgis/toolkit/type').nil | string;
-    referenceElement?: ArcgisReferenceElement | string;
-    position?: __esri.UIPosition;
-    arcgisReady: import('@arcgis/lumina').EventEmitter;
-    arcgisPropertyChange: import('@arcgis/lumina').EventEmitter<{
-        name: string;
-    }> | undefined;
-    el: HTMLElement & {
-        childElem?: HTMLElement & {
-            ownedBy?: HTMLElement;
-        };
-        view?: __esri.LinkChartView | __esri.MapView | __esri.SceneView;
-    };
-    autoDestroyDisabled: boolean;
-    destroy: () => Promise<void>;
-}) => Legend;
+declare const useLegendViewModel: (component: LitElement & Pick<LegendViewModel, never> & import('../../controllers/useViewModel').ViewModelControllerUses<LegendViewModel>) => LegendViewModel;
 /**
- * The Legend component describes the symbols used to represent layers in a map.
+ * The Legend component displays the symbols and labels used to represent layers in a [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/) or [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/).
+ * Only layers and sublayers visible in the view are shown, unless [ignoreLayerVisibility](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-legend/#ignoreLayerVisibility) is set to `true`.
+ *
+ * The legend automatically updates when:
+ *  - the visibility of a layer or sublayer changes
+ *  - a layer is added or removed from the map
+ *  - a layer's `renderer`, `opacity`, or `title` is changed
+ *  - the `legendEnabled` property is changed (set to `true` or `false` on the layer)
+ *
+ * ## Known Limitations
+ *
+ * * Currently, the legend component does not support the following layer types:
+ * [ElevationLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-ElevationLayer.html),
+ * [GraphicsLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GraphicsLayer.html),
+ * [IntegratedMeshLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-IntegratedMeshLayer.html),
+ * [KMLLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-KMLLayer.html),
+ * [MapNotesLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-MapNotesLayer.html),
+ * [OpenStreetMapLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-OpenStreetMapLayer.html),
+ * [VectorTileLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-VectorTileLayer.html),
+ * [VideoLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-VideoLayer.html), and
+ * [WebTileLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-WebTileLayer.html).
+ * * [Symbol3D](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-Symbol3D.html) with more than one
+ * [symbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-Symbol3DLayer.html) are not supported.
+ * * [DictionaryRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-DictionaryRenderer.html) is not supported.
+ * * [TrackInfo](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-TrackInfo.html) is not supported.
+ * * CIM Symbol [primitiveOverride](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-CIMSymbol.html#PrimitiveOverride) is not supported.
+ *
+ * ## Various examples of legends based on renderer type.
+ *
+ * ### Unique values
+ *
+ * [![Unique values](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/legend/legend-unique-values.png)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-location-types/)
+ *
+ * ### Continuous color
+ *
+ * [![Continuous color](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/legend/legend-color-vv.png)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-vv-color/)
+ *
+ * ### Classed color
+ *
+ * [![Classed color](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/legend/legend-class-breaks.png)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-classbreaks/)
+ *
+ * ### Continuous size
+ *
+ * [![Continuous size](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/legend/legend-size.png)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-sm-size/)
+ *
+ * ### Size - above and below
+ *
+ * [![Size - above and below](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/legend/legend-size-themes.png)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-sm-size-themes/)
+ *
+ * ### Dot density
+ *
+ * [![Dot density](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/legend/legend-dot-density.png)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-dot-density/)
+ *
+ * ### Predominance
+ *
+ * [![Predominance](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/legend/legend-predominance.png)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-arcade/)
+ *
+ * ### Relationship
+ *
+ * [![Relationship](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/legend/legend-relationship.png)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-sm-relationship/)
  *
  * [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-legend/)
+ *
+ * @see [Sample - Legend component](https://developers.arcgis.com/javascript/latest/sample-code/legend/)
+ * @see [Sample - Add a Legend to the LayerList](https://developers.arcgis.com/javascript/latest/sample-code/layerlist-legend/)
+ * @see [Sample - Legend component card style](https://developers.arcgis.com/javascript/latest/sample-code/legend-card/)
+ * @see [Sample - Update legend text](https://developers.arcgis.com/javascript/latest/sample-code/legend-update/)
+ * @since 4.28
  */
 export declare class ArcgisLegend extends LitElement {
     /**
-     * Collection of [ActiveLayerInfo](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend-support-ActiveLayerInfo.html) objects used by the legend view to
-     * display data in the legend.
+     * The view associated with the component.
+     *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the ArcgisLegend component will be associated with a map or scene component rather than using the `view` property.
+     */
+    view?: __esri.MapView | __esri.SceneView | nullish;
+    /**
+     * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
      *
-     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend.html#activeLayerInfos)
+     * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
      */
-    activeLayerInfos: __esri.Collection<__esri.ActiveLayerInfo>;
+    referenceElement?: ArcgisReferenceElement | string;
+    /** @deprecated since 4.34, use [`slot`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/slot) instead. */
+    position?: __esri.UIPosition;
     /**
-     * If true, the component will not be destroyed automatically when it is
-     * disconnected from the document. This is useful when you want to move the
-     * component to a different place on the page, or temporarily hide it. If this
-     * is set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-legend/#destroy) method when you are done to
-     * prevent memory leaks.
+     * Icon which represents the component.
+     * Typically used when the component is controlled by another component (e.g. by the Expand component).
      *
-     * @default false
+     * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
+     * @default "legend"
      */
-    autoDestroyDisabled: boolean;
+    icon?: string;
+    /**
+     * Collection of [ActiveLayerInfo](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend-support-ActiveLayerInfo.html) objects used by the legend view to
+     * display data in the legend. The legend component watches this property to hide or display the layer's legend when
+     * an [ActiveLayerInfo](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend-support-ActiveLayerInfo.html) is removed from or added to this collection.
+     *
+     * @autocast { "value": "Object[]", "typedCollection": true }
+     */
+    activeLayerInfos: __esri.Collection<__esri.ActiveLayerInfo>;
     /**
-     * Indicates whether to show the [Basemap](https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html) layers in the Legend.
+     * Indicates whether to show the [Basemap](https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html) layers in the Legend. If you set this property to
+     * `true` and specify [layerInfos](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-legend/#layerInfos) that include the basemap layers, the basemap will be displayed in the legend.
+     *
+     * @example
+     * Show basemap layers in the legend
      *
+     * ```js
+     * const mapElement = document.querySelector("arcgis-map");
+     * const basemapLayer = mapElement.map.basemap.baseLayers.getItemAt(0);
+     * const legend = document.querySelector("arcgis-legend");
+     * legend.layerInfos = [{ layer: basemapLayer }];
+     * legend.basemapLegendVisible = true;
+     * ```
      * @default false
      */
     basemapLegendVisible: boolean;
     /**
-     * Indicates the heading level to use for the legend title.
+     * Indicates the heading level to use for the legend title. By default, legend titles are rendered as level 3 headings (e.g. `<h3>Legend title</h3>`). Depending on the legend placement
+     * in your app, you may need to adjust this heading for proper semantics. This is important for meeting accessibility standards.
+     *
+     * @see [Heading Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)
+     * @example
+     * Legend title will render as an `<h2>`
      *
+     * ```html
+     * <arcgis-legend heading-level="2"></arcgis-legend>
+     * ```
+     *
+     * ```js
+     * document.querySelector("arcgis-legend").headingLevel = 2;
+     * ```
      * @default 3
      */
-    headingLevel: number;
+    headingLevel: HeadingLevel;
     /**
-     * When `true`, layers will only be shown in the legend if
-     * they are visible in the view's extent.
+     * When `true`, layers will only be shown in the legend if they are visible in the view's extent. When data from a layer
+     * is not visible in the view, the layer's legend information will be hidden. Only layers that implement the `createQuery()`
+     * and `queryFeatureCount()` methods are supported by `hideLayersNotInCurrentView`.
+     *
+     * To hide layers completely from the legend, you should set the `legendEnabled` property of the layer to `false`.
+     *
+     * @see [ignoreLayerVisibility](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-legend/#ignoreLayerVisibility)
+     * @example
+     * Layers not displayed in the current map extent will not be shown in the legend
+     *
+     * ```html
+     * <arcgis-legend hide-layers-not-in-current-view></arcgis-legend>
+     * ```
      *
+     * ```js
+     * document.querySelector("arcgis-legend").hideLayersNotInCurrentView = true;
+     * ```
      * @default false
      */
     hideLayersNotInCurrentView: boolean;
     /**
-     * Icon which represents the widget.
+     * If a layer uses a unique value render, only features that satisfy the layer's
+     * [definition](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#definitionExpression)
+     * will be displayed in the legend when set to true.
      *
-     * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
-     * @default "legend"
+     * @since 4.30
+     * @see [definitionExpression](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#definitionExpression)
+     * @example
+     * Only display features that satisfy the layer's definitionExpression.
+     *
+     * ```html
+     * <arcgis-legend respect-layer-definition-expression></arcgis-legend>
+     * ```
+     *
+     * ```js
+     * document.querySelector("arcgis-legend").respectLayerDefinitionExpression = true;
+     * ```
+     * @default false
      */
-    icon: string;
+    respectLayerDefinitionExpression: boolean;
     /**
-     * The widget's default label.
+     * Determines whether to respect the properties of the layers in the map that control the legend's visibility (`minScale`, `maxScale`, `legendEnabled`).
+     * By default, a layer's legend elements **will not render** in the legend given the following conditions:
+     *
+     * - The layer's [legendEnabled](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#legendEnabled) property
+     * is set to `false`.
+     * - If the view's scale is outside the visibility range
+     * defined by the layer's [minScale](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#minScale) and
+     * [maxScale](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#maxScale) properties.
      *
-     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend.html#label)
+     * When the `ignoreLayerVisibility` property of the legend is set to `true`, the legend elements for each
+     * layer in the map will always display, thus disregarding the `minScale`, `maxScale`,
+     * and `legendEnabled` properties for each layer in the map.
+     *
+     * @since 4.34
+     * @see [hideLayersNotInCurrentView](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-legend/#hideLayersNotInCurrentView)
+     * @example
+     * Always displays legend elements for the map's layers regardless of their minScale, maxScale, and legendEnabled properties.
+     *
+     * ```html
+     * <arcgis-legend ignore-layer-visibility></arcgis-legend>
+     * ```
+     *
+     * ```js
+     * document.querySelector("arcgis-legend").ignoreLayerVisibility = true;
+     * ```
+     * @default false
      */
-    label: string;
+    get ignoreLayerVisibility(): boolean;
+    set ignoreLayerVisibility(value: boolean);
     /**
-     * Specifies a subset of the layers to display in the legend.
+     * Determines whether to respect the properties of the layers in the map that control the legend's visibility (`minScale`, `maxScale`, `legendEnabled`).
+     * By default, a layer's legend elements **will not render** in the legend given the following conditions:
+     *
+     * - The layer's [legendEnabled](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#legendEnabled) property
+     * is set to `false`.
+     * - If the view's scale is outside the visibility range
+     * defined by the layer's [minScale](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#minScale) and
+     * [maxScale](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#maxScale) properties.
+     *
+     * When the `respectLayerVisibilityDisabled` property of the legend is set to `false`, the legend elements for each
+     * layer in the map will always display, thus disregarding the `minScale`, `maxScale`,
+     * and `legendEnabled` properties for each layer in the map.
      *
-     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend.html#layerInfos)
+     * @see [ignoreLayerVisibility](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-legend/#ignoreLayerVisibility)
+     * @example
+     * Always displays legend elements for the map's layers regardless of their minScale, maxScale, and legendEnabled properties.
+     *
+     * ```html
+     * <arcgis-legend respect-layer-visibility-disabled="false"></arcgis-legend>
+     * ```
+     *
+     * ```js
+     * document.querySelector("arcgis-legend").respectLayerVisibilityDisabled = true;
+     * ```
+     * @deprecated since 4.34 use [ignoreLayerVisibility](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-legend/#ignoreLayerVisibility) instead.
+     * @default false
      */
-    layerInfos: __esri.LegendLayerInfos[];
+    get respectLayerVisibilityDisabled(): boolean;
+    set respectLayerVisibilityDisabled(value: boolean);
     /**
-     * Indicates the style of the legend.
+     * Specifies a subset of the layers to display in the legend. This includes any basemap layers
+     * you want to be visible in the legend.  If this property is not set, all layers in the map will display in the legend, including
+     * basemap layers if [basemapLegendVisible](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-legend/#basemapLegendVisible) is `true`. Objects in this array are defined with the properties in the example below.
      *
-     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend.html#style)
+     * @example
+     * Only show a specific sublayer in the legend
      *
-     * @default "classic"
+     * ```js
+     * const subtypeGroupLayer = webmap.layers.getItemAt(0);
+     * const subtypeSubLayer = subtypeGroupLayer.sublayers.getItemAt(1);
+     * const subtypeSublayerId = parseInt(subtypeSubLayer.subtypeCode);
+     * document.querySelector("arcgis-legend").layerInfos = [
+     *   {
+     *     layer: subtypeGroupLayer,
+     *     sublayerIds: [subtypeSublayerId]
+     *   }
+     * ];
+     * });
+     * ```
      */
-    legendStyle: string | __esri.LegendStyle;
-    /** @deprecated since 4.34, use [`slot`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/slot) instead. */
-    position?: __esri.UIPosition;
+    layerInfos: __esri.LegendViewModelLayerInfo[];
     /**
-     * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
+     * Indicates whether the legend is currently loading.
      *
-     * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
+     * @since 4.34
+     * @default false
      */
-    referenceElement?: ArcgisReferenceElement | string;
+    readonly loading: boolean;
     /**
-     * If a layer uses a unique value render, only features that satisfy the layer's
-     * [definition expression](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#definitionExpression)
-     * will be displayed in the legend when set to true.
+     * Indicates the layout of the legend when the [legendStyle](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-legend/#legendStyle) is set to the string value of `"card"`.
+     * The layout determines how the legend's content is arranged.
      *
-     * @default false
+     * [![card-style-layout](https://developers.arcgis.com/javascript/latest/assets/img/components/legend/card-style-layout.png)](https://developers.arcgis.com/javascript/latest/sample-code/legend-card/)
+     *
+     * @since 4.34
+     * @example
+     * Renders the legend in the card style with a "stack" layout
+     *
+     * ```html
+     * <arcgis-legend legend-style="card" card-style-layout="stack"></arcgis-legend>
+     * ```
+     *
+     * ```js
+     * const legend = document.querySelector("arcgis-legend");
+     * legend.legendStyle = "card";
+     * legend.cardStyleLayout = "stack";
+     * ```
      */
-    respectLayerDefinitionExpression: boolean;
+    cardStyleLayout?: "auto" | "side-by-side" | "stack";
     /**
-     * Determines whether to respect the properties of the layers in the map that
-     * control the legend's visibility (`minScale`, `maxScale`, `legendEnabled`).
+     * Indicates the style of the legend. The style determines the legend's layout and behavior.
+     * You can either specify a string or an object to indicate the style. The known string values are the same values listed in
+     * the table within the `type` property.
+     *
+     * [![legend-style](https://developers.arcgis.com/javascript/latest/assets/img/components/legend/legend-style.png)](https://developers.arcgis.com/javascript/latest/sample-code/legend-card/)
      *
-     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend.html#respectLayerVisibility)
+     * @see [cardStyleLayout](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-legend/#cardStyleLayout)
+     * @example
+     * Renders the legend in the card style with a stack layout
+     *
+     * ```js
+     * document.querySelector("arcgis-legend").legendStyle = {
+     *   type: "card",
+     *   layout: "stack"
+     * };
+     * ```
+     * @default "classic"
+     */
+    legendStyle: "card" | "classic" | {
+        type: "card" | "classic";
+        layout?: "auto" | "side-by-side" | "stack";
+    };
+    /**
+     * If true, the component will not be destroyed automatically when it is
+     * disconnected from the document. This is useful when you want to move the
+     * component to a different place on the page, or temporarily hide it. If this
+     * is set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-legend/#destroy) method when you are done to
+     * prevent memory leaks.
      *
      * @default false
      */
-    respectLayerVisibilityDisabled: boolean;
+    autoDestroyDisabled: boolean;
+    /** Overwrite localized strings for this component */
+    messageOverrides?: typeof this.messages._overrides;
     /**
-     * The view model's state.
+     * The component's default label.
      *
-     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend-LegendViewModel.html#state)
+     * @default "Legend"
+     */
+    label?: string;
+    /**
+     * The current state of the component.
      *
      * @default "disabled"
      */
@@ -136,5 +348,6 @@ export declare class ArcgisLegend extends LitElement {
     }>;
     /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
     readonly arcgisReady: TargetedEvent<this, void>;
+    private messages;
 }
 export {};

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

@@ -1,28 +1,74 @@
-import { c as e } from "../../chunks/runtime.js";
-import { usePropertyChange as i } from "@arcgis/lumina/controllers";
-import r from "@arcgis/core/widgets/Legend.js";
-import { LitElement as t, createEvent as a } from "@arcgis/lumina";
-import { m as l } from "../../chunks/useWidget.js";
-import { css as o } from "lit";
+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 u } from "@arcgis/lumina/controllers";
+import { classes as f } from "@arcgis/toolkit/dom";
+import { u as _ } from "../../chunks/useHandles.js";
+import { u as m } from "../../chunks/useT9n.js";
+import { m as v } 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.99 */
-const d = o`.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-family:Avenir Next,Helvetica Neue,helvetica,arial,sans-serif;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{display:flex}.esri-legend{width:100%;overflow:hidden auto}.esri-legend__message{padding:.5em 1em}.esri-legend__service{padding:var(--esri-widget-padding);word-wrap:break-word;border-bottom:var(--calcite-border-width-sm) solid var(--calcite-color-border-2)}.esri-legend__service:last-child{border-bottom:none}.esri-legend__layer{margin-left:var(--calcite-spacing-sm);overflow:auto}.esri-legend__group-layer-child{margin-left:var(--calcite-spacing-sm);padding-left:0;padding-right:0}.esri-legend__layer-table{flex-flow:column;width:100%;margin-bottom:var(--calcite-spacing-md);display:flex}.esri-legend__layer-child-table{border-collapse:collapse;width:100%;margin-bottom:var(--calcite-spacing-md);display:table}.esri-legend__layer-body{margin-left:var(--calcite-spacing-sm)}.esri-legend__layer-row{display:flex}.esri-legend__layer-cell{vertical-align:middle;word-break:break-word;min-width:100px;padding:var(--calcite-spacing-xxs) 0}.esri-legend__layer-cell--symbols{text-align:center;min-width:10px}.esri-legend--card__color-ramp-container{justify-content:center}.esri-legend__layer-table--size-ramp{display:table}.esri-legend__layer-table--size-ramp .esri-legend__layer-row{display:table-row}.esri-legend__layer-table--size-ramp .esri-legend__layer-cell{display:table-cell}.esri-legend__size-ramp~.esri-legend__layer-cell--info{width:80%;max-width:80%}.esri-legend__layer-cell--info{word-break:normal;word-wrap:normal;max-width:250px;padding-left:var(--calcite-spacing-sm);padding-right:var(--calcite-spacing-sm);font-size:var(--calcite-spacing-md)}.esri-legend__imagery-layer-image--stretched{margin-bottom:-2px;display:block}.esri-legend__imagery-layer-cell--stretched{vertical-align:top;padding:0;line-height:1}.esri-legend__imagery-layer-info--stretched{vertical-align:top;padding:0 2px}.esri-legend__symbol{justify-content:center;display:flex}.esri-legend__layer-caption{word-break:break-word;padding:6px 0;display:table-caption}.esri-legend__ramp-labels{flex-flow:column;justify-content:space-between;display:flex}.esri-legend__ramps{margin-left:3px}.esri-legend__color-ramp{width:2var (--calcite-spacing-xxs)}.esri-legend__opacity-ramp{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExODcxRkM3N0RBQzA4QkVDRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEOTY4RkNFNjM1MzYxMUU0ODlDMUFFQ0M2REU5QzFCNCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEOTY4RkNFNTM1MzYxMUU0ODlDMUFFQ0M2REU5QzFCNCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MDExNzQwNzIwNjgxMTg3MUZDNzdEQUMwOEJFQ0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MDExNzQwNzIwNjgxMTg3MUZDNzdEQUMwOEJFQ0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6SLS5VAAAAKElEQVR42mI8c+YMAwwYGxvD2UwMOADpEoz///+Hc86ePUsLOwACDABC1ghwV8TLOQAAAABJRU5ErkJggg==)}.esri-legend__ramp-tick{border-top:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);width:var(--calcite-spacing-xxs);line-height:0;position:absolute;left:auto;right:var(--calcite-border-width-sm)}.esri-legend__ramp-label{white-space:nowrap;padding:0 var(--calcite-spacing-sm);font-size:var(--calcite-spacing-md);line-height:1em;position:relative}.esri-legend__ramp-label:before{content:"";border:3px solid var(--calcite-color-transparent);border-left-width:0;border-right:4px solid var(--calcite-color-inverse);width:0;height:0;display:block;position:absolute;top:.25em;right:100%}.esri-legend__ramp-label:first-child{margin-top:-var(--calcite-spacing-xxs)}.esri-legend__ramp-label:last-child{bottom:-3px}.esri-legend-layer-caption{padding:6px 0;display:table-caption}:dir(rtl) .esri-legend__ramp-label:before{border-width:3px 0 3px var(--calcite-spacing-xxs);border-color:var(--calcite-color-border-2) var(--calcite-color-border-2) var(--calcite-color-border-2) var(--calcite-color-border-2);left:100%;right:auto}:dir(rtl) .esri-legend__layer,:dir(rtl) .esri-legend__group-layer-child,:dir(rtl) .esri-legend__layer-body{margin-left:0;margin-right:var(--calcite-spacing-sm);overflow:auto}:dir(rtl) .esri-legend__ramps{margin-left:auto;margin-right:3px}.esri-legend--card{background:var(--calcite-color-foreground-1);transition:max-width .25s ease-in-out;display:flex;position:relative;overflow-x:auto}.esri-legend--card__section{white-space:pre-wrap;word-break:break-word;word-wrap:break-word;border-left:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);min-width:300px;padding:var(--calcite-spacing-md) 15px;font-size:var(--calcite-spacing-md);overflow:auto}.esri-legend--card__section:first-child{border-left:none}.esri-legend--card__message{padding:.5em 1em}.esri-legend--card__service-caption-container{border-bottom:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);height:45px;padding:var(--calcite-spacing-md) 15px;font-weight:600}.esri-legend--card__service-caption-text{margin:0;padding-bottom:20px;overflow:auto}.esri-legend--card__layer-caption{margin-bottom:var(--calcite-spacing-md);padding:6px 0;font-weight:400}.esri-legend--card__service-content{height:calc(100% - 45px);display:flex}.esri-legend--card__label-container{flex-wrap:wrap;display:flex}.esri-legend--card__relationship-label-container{flex-direction:column;display:flex}.esri-legend--card__relationship-label-container .esri-legend--card__layer-row{padding-bottom:.5em}.esri-legend--card__relationship-label-container .esri-legend--card__layer-row:last-child{padding-bottom:0}.esri-legend--card__relationship-section{border:none}.esri-legend--card__label-element{text-align:center;min-width:4em;min-height:2.7em;margin:.1em;padding:.5em 1em}.esri-legend--card__image-label{padding-left:var(--calcite-spacing-sm);padding-right:var(--calcite-spacing-sm)}.esri-legend--card__layer-row,.esri-legend--card__size-ramp-container{align-items:center;display:flex}.esri-legend--card__size-ramp-preview{display:flex}.esri-legend--card__ramp-label{white-space:nowrap;margin:0 .5em}.esri-legend--card__pie-chart-ramp-preview{justify-content:center;display:flex}.esri-legend--card__interval-separator{text-align:center;font-size:.5em}.esri-legend--card__imagery-layer-image--stretched{margin-bottom:-2px;display:block}.esri-legend--card__symbol-container{position:relative}.esri-legend--card__interval-separators-container{position:absolute;top:50px;left:50%;transform:translate(-50%,-50%)}.esri-legend--card__carousel-title{margin:0}.esri-legend--card__service{border-left:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);min-width:fit-content}.esri-legend--card__symbol{margin:auto;display:block}.esri-legend--stacked{flex-direction:column;min-width:300px;display:flex}.esri-legend--stacked .esri-legend--card__carousel{width:300px;max-height:420px}.esri-legend--stacked .esri-legend--card__carousel-item{max-height:388px}.esri-legend--stacked calcite-carousel-item[selected]{flex:1}.esri-legend--stacked .esri-legend--card__section{box-sizing:border-box;width:100%;min-width:unset;border:none;height:auto;overflow:auto}.esri-legend--stacked .esri-legend--card__size-ramp-row{flex-direction:column}.esri-legend--stacked .esri-legend--card__symbol-row{width:100%;margin:5px 0;display:table-row}.esri-legend--stacked .esri-legend--card__label-cell{vertical-align:middle;display:table-cell}.esri-legend--stacked .esri-legend--card__symbol-cell{vertical-align:middle;text-align:center;display:table-cell}.esri-legend--stacked .esri-legend--card__carousel-indicator-container{justify-content:center;width:300px;height:32px;display:flex;overflow:auto;box-shadow:0 -var(--calcite-border-width-sm) var(--calcite-color-border-2)}.esri-legend--stacked .esri-legend--card__carousel-indicator{cursor:pointer;justify-content:center;align-items:center;width:16px;height:auto;display:flex}.esri-legend--stacked .esri-legend--card__carousel-indicator:before{content:"";background-color:var(--calcite-color-border-2);border-radius:50%;width:10px;height:10px;transition:background-color .125s ease-in-out;display:block;box-shadow:0 0 0 var(--calcite-border-width-sm) var(--calcite-color-border-2)}.esri-legend--stacked .esri-legend--card__carousel-indicator:hover:before,.esri-legend--stacked .esri-legend--card__carousel-indicator--activated:before,.esri-legend--stacked .esri-legend--card__carousel-indicator--activated:hover:before{background-color:var(--calcite-color-border-2)}.esri-ui-corner .esri-legend--card{max-height:420px}:dir(rtl) .esri-view-width-greater-than-small .esri-legend--card__section{border-left:0;border-right:var(--calcite-border-width-sm) solid var(--calcite-color-border-2)}:dir(rtl) .esri-view-width-greater-than-small .esri-legend--card__section:first-child{border-right:none}.esri-relationship-ramp--diamond__container{font-size:var(--calcite-spacing-md);display:flex}.esri-relationship-ramp--diamond__left-column{text-align:right;align-self:center;max-width:85px;padding-right:5px}.esri-relationship-ramp--diamond__right-column{text-align:left;align-self:center;max-width:85px;padding-left:5px}.esri-relationship-ramp--diamond__middle-column{text-align:center;flex-direction:column;display:flex}.esri-relationship-ramp--diamond__middle-column--label{align-self:center;max-width:85px}.esri-relationship-ramp--diamond__middle-column--ramp{width:85px;height:85px}.esri-relationship-ramp--square__table{font-size:var(--calcite-spacing-md);display:table}.esri-relationship-ramp--square__table-row{display:table-row}.esri-relationship-ramp--square__table-cell{display:table-cell}.esri-relationship-ramp--square__table-label{max-width:95px}.esri-relationship-ramp--square__table-label--left-bottom{vertical-align:bottom;text-align:left}.esri-relationship-ramp--square__table-label--right-bottom{vertical-align:bottom;text-align:right}.esri-relationship-ramp--square__table-label--left-top{vertical-align:top;text-align:left}.esri-relationship-ramp--square__table-label--right-top{vertical-align:top;text-align:right}.esri-univariate-above-and-below-ramp__symbol{justify-content:center;align-items:center;display:flex}.esri-univariate-above-and-below-ramp__label{white-space:nowrap;margin-left:var(--calcite-spacing-sm);font-size:var(--calcite-spacing-md);line-height:1em;position:relative}.esri-univariate-above-and-below-ramp__label:before{content:"";border-style:solid;border-width:var(--calcite-border-width-sm) 0 0;width:1var (--calcite-spacing-xxs);height:0;display:block;position:absolute;top:.45em;left:-19px}.esri-univariate-above-and-below-ramp__label:first-child{top:-6px}.esri-univariate-above-and-below-ramp__label:last-child{bottom:-6px}.esri-univariate-above-and-below-ramp__color--card{position:relative}.esri-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)}:dir(rtl) .esri-univariate-above-and-below-ramp__label{margin-left:auto;margin-right:var(--calcite-spacing-sm)}:dir(rtl) .esri-univariate-above-and-below-ramp__label:before{left:auto;right:-19px}`, n = l(r);
-class s extends t {
+See https://js.arcgis.com/5.0/esri/copyright.txt for details.
+v5.0.0-next.1 */
+const w = 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:var(--calcite-font-line-height-relative-tight)}.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:var(--calcite-color-foreground-1)}.esri-menu__list-item:active{background-color:var(--calcite-color-foreground-current)}.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:var(--calcite-color-brand)}.esri-widget__table{border-collapse:collapse;color:var(--calcite-color-text-1);border:none;width:100%;line-height:var(--calcite-font-line-height-relative-tight)}.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 = v(c);
+class b extends g {
   constructor() {
-    super(...arguments), this.widget = n(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.respectLayerDefinitionExpression = this.widget.respectLayerDefinitionExpression, this.respectLayerVisibilityDisabled = this.widget.respectLayerVisibility, this.state = this.viewModel.state, this.arcgisPropertyChange = i()("state"), this.arcgisReady = a();
+    super(...arguments), this.messages = m({}), this.final = _("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 = u()("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.styles = d;
+    this.styles = w;
+  }
+  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.cardStyleLayout === "auto" && this.el.closest("arcgis-expand") && (this.cardStyleLayout = "stack"), this.setAttribute("card-style-layout", this.cardStyleLayout)) : 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(f(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", s);
+l("arcgis-legend", b);
 export {
-  s as ArcgisLegend
+  b as ArcgisLegend
 };

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

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

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