@arcgis/map-components 5.0.0-next.12 → 5.0.0-next.120

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

@@ -1,48 +1,81 @@
-import { c as a } from "../../chunks/runtime.js";
-import { css as r, html as i } from "lit";
-import { usePropertyChange as l } from "@arcgis/lumina/controllers";
-import { reEmitEvent as n } from "@arcgis/lumina/controllers/accessor";
-import { classes as h } from "@arcgis/toolkit/dom";
-import g from "@arcgis/core/widgets/Home/HomeViewModel.js";
-import { LitElement as d, createEvent as m, safeClassMap as v, nothing as u } from "@arcgis/lumina";
-import { u as p } from "../../chunks/useT9n.js";
-import { m as w } from "../../chunks/useViewModel.js";
+import { c as r } from "../../chunks/runtime.js";
+import { css as n, html as a } from "lit";
+import { usePropertyChange as c } from "@arcgis/lumina/controllers";
+import { classes as l } from "@arcgis/toolkit/dom";
+import { LitElement as h, createEvent as o, safeClassMap as g, nothing as v } from "@arcgis/lumina";
+import { u as d } from "../../chunks/useT9n.js";
+import { watch as u } from "@arcgis/core/core/reactiveUtils.js";
+import { u as m } from "../../chunks/useView.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.12 */
-const b = r`.arcgis-button{--calcite-ui-icon-color: var(--calcite-color-text-3);--calcite-button-background-color: var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);line-height:var(--calcite-font-line-height-relative-tight);display:flex;flex-flow:column;cursor:pointer;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);:hover{--calcite-ui-icon-color: var(--calcite-color-text-1);--calcite-button-background-color: var(--calcite-color-transparent-hover)}calcite-button{width:var(--calcite-spacing-xxxl);height:var(--calcite-spacing-xxxl)}}:host{width:var(--calcite-spacing-xxxl);height:var(--calcite-spacing-xxxl)}`, f = "home", s = {
-  base: f,
+v5.0.0-next.120 */
+const w = n`.arcgis-button{--calcite-icon-color: var(--calcite-color-text-3);--calcite-button-background-color: var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);line-height:var(--calcite-font-line-height-relative-tight);display:flex;flex-flow:column;cursor:pointer;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);:hover{--calcite-icon-color: var(--calcite-color-text-1);--calcite-button-background-color: var(--calcite-color-transparent-hover)}}:host{width:fit-content;height:fit-content}`, p = "home", s = {
+  base: p,
   button: "arcgis-button"
-}, x = w(g);
-class M extends d {
+};
+class f extends h {
   constructor() {
-    super(...arguments), this.messages = p(), this.viewModel = x(this), this.view = this.viewModel.view, this.autoDestroyDisabled = !1, this.goToOverride = this.viewModel.goToOverride, this.icon = "home", this.state = this.viewModel.state, this.viewpoint = this.viewModel.viewpoint, this.arcgisGo = n(() => this.viewModel, "go"), this.arcgisPropertyChange = l()("state"), this.arcgisReady = m();
+    super(...arguments), this.messages = d(), this.#i = null, this.#t = null, this.view = m(this), this.autoDestroyDisabled = !1, this.icon = "home", this.visualScale = "m", this.arcgisGo = o(), this.arcgisPropertyChange = c()("state", "viewpoint"), this.arcgisReady = o();
   }
   static {
-    this.properties = { view: 0, autoDestroyDisabled: 5, goToOverride: 0, icon: 1, label: 1, messageOverrides: 0, position: 3, referenceElement: 1, state: 3, viewpoint: 0 };
+    this.properties = { view: 0, autoDestroyDisabled: 5, goToOverride: 0, icon: 0, label: 1, messageOverrides: 0, referenceElement: 1, visualScale: 1, state: 35, viewpoint: 0 };
   }
   static {
-    this.styles = b;
+    this.styles = w;
+  }
+  #i;
+  #e;
+  #t;
+  get state() {
+    return this.view?.ready ? this.#t ? "going-home" : "ready" : "disabled";
+  }
+  get viewpoint() {
+    return this.#i || this.#e;
+  }
+  set viewpoint(t) {
+    this.#i = t;
   }
   async cancelGo() {
-    this.viewModel.cancelGo();
+    this.#t?.abort(), this.#t = null;
   }
   async destroy() {
     await this.manager.destroy();
   }
   async go() {
-    this.viewModel.go();
+    if (!this.view?.ready)
+      throw new Error("View is not ready. Cannot go to viewpoint.");
+    if (!this.viewpoint)
+      throw new Error("Cannot go to an undefined viewpoint.");
+    this.cancelGo(), this.arcgisGo.emit();
+    const t = new AbortController();
+    this.#t = t;
+    try {
+      await this.view?.when(), await this._callGoTo({ target: this.viewpoint, options: { signal: t.signal } });
+    } catch {
+    }
+    this.#t = null;
+  }
+  async loaded() {
+    this.manager.onLifecycle(() => [
+      u(() => this.view?.viewpoint, (t) => {
+        this.#e || !t || (this.#e = t.clone(), this.#i || this.arcgisPropertyChange.emit({ name: "viewpoint" }));
+      })
+    ]);
+  }
+  _callGoTo(t) {
+    if (!this.view)
+      throw new Error("`view` is not defined. Cannot go to viewpoint.");
+    return this.goToOverride ? this.goToOverride(this.view, t) : this.view.goTo(t.target, t.options);
   }
   _go() {
-    const { viewModel: e } = this;
-    e.state === "going-home" ? e.cancelGo() : e.go();
+    this.state === "going-home" ? this.cancelGo() : this.go();
   }
   render() {
-    const { messages: e, icon: c } = this, t = this.viewModel?.state, o = t === "going-home";
-    return i`<div class=${v(h(s.base, s.button))}><calcite-button .disabled=${t === "disabled"} .iconStart=${o ? void 0 : c ?? void 0} kind=neutral .label=${e.componentLabel} @click=${this._go} .scale=${o ? "s" : "m"} title=${(t === "going-home" ? e.cancel : e.title) ?? u}>${o ? i`<calcite-loader inline label></calcite-loader>` : null}</calcite-button></div>`;
+    const { messages: t, icon: e } = this, i = this.state === "going-home";
+    return a`<div class=${g(l(s.base, s.button))}><calcite-button .disabled=${this.state === "disabled"} .iconStart=${i ? void 0 : e ?? void 0} kind=neutral .label=${t.componentLabel} @click=${this._go} .scale=${this.visualScale} .loading=${i} title=${(i ? t.cancel : t.title) ?? v}></calcite-button></div>`;
   }
 }
-a("arcgis-home", M);
+r("arcgis-home", f);
 export {
-  M as ArcgisHome
+  f as ArcgisHome
 };

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

@@ -1,3 +1,2 @@
 import "@esri/calcite-components/components/calcite-button";
-import "@esri/calcite-components/components/calcite-loader";
 export * from "./customElement.js";

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

@@ -1,3 +1,2 @@
 import "@esri/calcite-components/components/calcite-button";
-import "@esri/calcite-components/components/calcite-loader";
 export * from "./customElement.js";

package/dist/components/arcgis-labeled-switch/customElement.d.ts

@@ -1,5 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { IconName } from '../../utils/action-utils';
 
 /**
  * Labeled switch component shows a label, a switch, and optionally an icon with a tooltip for hints.
@@ -25,7 +26,7 @@ export declare class LabeledSwitch extends LitElement {
     /** Hint shown when user hovers over the hint icon. */
     hint?: string;
     /** Icon to show for the hint. Common values are "warning" and "information" */
-    hintIcon?: string;
+    hintIcon?: IconName;
     /**
      * Controls the presentation of the hint icon. Uses a yellow color if set to warning.
      *
@@ -36,4 +37,7 @@ export declare class LabeledSwitch extends LitElement {
     destroy(): Promise<void>;
     /** Emitted when the switch is toggled. Event detail is the new checked state. */
     readonly arcgisCheckedChanged: TargetedEvent<this, boolean>;
+    "@eventTypes": {
+        "arcgisCheckedChanged": LabeledSwitch["arcgisCheckedChanged"]["detail"];
+    };
 }

package/dist/components/arcgis-labeled-switch/customElement.js

@@ -5,7 +5,7 @@ import { keyed as b } from "lit/directives/keyed.js";
 import { LitElement as g, createEvent as m, safeClassMap as c } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.12 */
+v5.0.0-next.120 */
 const f = p`.label{--calcite-label-margin-bottom: 0}.label-content{display:flex;flex:1;gap:var(--calcite-spacing-sm);align-items:center;text-wrap:balance}.label-content>div{flex-grow:1}.icon{margin-top:-1px;&.info{color:var(--calcite-color-status-info)}&.warning{color:var(--calcite-color-status-warning)}}.tooltip{text-wrap:wrap}`, e = {
   label: "label",
   labelContent: "label-content",
@@ -18,7 +18,7 @@ class w extends g {
     super(...arguments), this.checked = !1, this.disabled = !1, this.hintKind = "info", this.arcgisCheckedChanged = m();
   }
   static {
-    this.properties = { _icon: 16, checked: 7, disabled: 7, label: 1, hint: 1, hintIcon: 1, hintKind: 1 };
+    this.properties = { _icon: 16, checked: 7, disabled: 7, label: 1, hint: 1, hintIcon: 0, hintKind: 1 };
   }
   static {
     this.styles = f;

package/dist/components/arcgis-layer-list/customElement.d.ts

@@ -4,15 +4,15 @@ import { Use } from '@arcgis/lumina/controllers';
 import { default as LayerList } from '@arcgis/core/widgets/LayerList.js';
 import { PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { ArcgisReferenceElement } from '../../utils/component-utils';
+import { IconName } from '../../utils/action-utils';
 
-declare const useLayerListWidget: (component: LitElement & Pick<LayerList, "label" | "viewModel" | "icon" | "headingLevel" | "collapsed" | "dragEnabled" | "filterPlaceholder" | "filterPredicate" | "filterText" | "selectionMode" | "catalogOptions" | "minFilterItems" | "selectedItems" | "visibilityAppearance" | "listItemCreatedFunction" | "knowledgeGraphOptions" | "minDragEnabledItems"> & {
+declare const useLayerListWidget: (component: LitElement & Pick<LayerList, "label" | "headingLevel" | "viewModel" | "icon" | "collapsed" | "catalogOptions" | "dragEnabled" | "filterPlaceholder" | "minFilterItems" | "selectedItems" | "selectionMode" | "visibilityAppearance" | "filterText" | "filterPredicate" | "listItemCreatedFunction" | "knowledgeGraphOptions" | "minDragEnabledItems" | "operationalItems"> & {
     state?: unknown;
-    viewModel?: __esri.LayerListViewModel | undefined;
+    viewModel?: import('@arcgis/core/widgets/LayerList/LayerListViewModel').default | 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;
@@ -42,11 +42,9 @@ export declare class ArcgisLayerList extends LitElement {
     readonly arcgisClose: TargetedEvent<this>;
     /**
      * 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 ArcgisLayerList component will be associated with a map or scene component rather than using the `view` property.
-     *
-     * @default null
+     *   > **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 Layer List component will be associated with a map or scene component rather than using the `view` property.
      */
-    view?: __esri.MapView | __esri.SceneView | nullish;
+    view?: import('@arcgis/core/views/MapViewOrSceneView').MapViewOrSceneView | null | undefined;
     /**
      * 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
@@ -61,110 +59,256 @@ export declare class ArcgisLayerList extends LitElement {
     get catalogLayerList(): __esri.CatalogLayerList | nullish;
     /**
      * [CatalogLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-CatalogLayer.html) specific properties.
+     * Catalog layers will display their [CatalogLayer#dynamicGroupLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-CatalogLayer.html#dynamicGroupLayer) as an expandable [catalogLayerList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#catalogLayerList) in the LayerList component.
+     * This list item will only be displayed when catalog layers with dynamic group layers are loaded in the map.
+     * These are the properties that are used to configure the [catalogLayerList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#catalogLayerList).
      *
-     * @default null
+     * @since 4.30
+     * @see [catalogLayerList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#catalogLayerList)
+     * @example
+     * const layerList = new LayerList({
+     *   catalogOptions: {
+     *     listItemCreatedFunction: (event) => {
+     *       const { item } = event;
+     *       item.actionsSections = [
+     *         [
+     *           {
+     *             title: "Add layer to map",
+     *             icon: "add-layer",
+     *             id: "add-layer"
+     *           }
+     *         ]
+     *       ];
+     *     },
+     *     selectionMode: "single",
+     *     visibleElements: {
+     *       filter: true
+     *     }
+     *   },
+     *   view,
+     * });
      */
-    catalogOptions: nullish | __esri.LayerListCatalogOptions;
+    catalogOptions: import('@arcgis/core/widgets/CatalogLayerList').CatalogLayerListProperties | null | undefined;
     /**
      * Indicates whether a component is closed. When `true`, the component will be hidden.
      *
-     * @since 4.33
      * @default false
+     * @since 4.33
      */
     closed: boolean;
     /**
-     * Indicates whether the widget is collapsed.
+     * Indicates whether the component is collapsed.
+     * When collapsed, only the collapse button and heading are displayed.
      *
      * @default false
+     * @since 4.29
+     * @see [showCollapseButton](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-layer-list/#showCollapseButton)
+     * @example layerList.collapsed = true;
      */
     collapsed: boolean;
     /**
      * Indicates whether [list items](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList-ListItem.html) may be reordered within the list by dragging and dropping.
+     * MapImageLayer [MapImageLayer#sublayers](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-MapImageLayer.html#sublayers) can be reordered only within their parent MapImageLayer and can not be dragged out as a separate layer.
+     * Drag won't be enabled until the number of list items is equal to or greater than than the value set set in [minDragEnabledItems](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#minDragEnabledItems).
      *
      * @default false
+     * @since 4.29
+     * @see [minDragEnabledItems](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#minDragEnabledItems)
+     * @example layerList.dragEnabled = true;
      */
     dragEnabled: boolean;
     /**
      * Placeholder text used in the filter input if [visibleElements.filter](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#visibleElements) is true.
      *
      * @default ""
+     * @since 4.29
+     * @see [showFilter](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-layer-list/#showFilter)
+     * @example layerList.filterPlaceholder = "Filter layers";
      */
     filterPlaceholder: string;
     /**
      * Specifies a function to handle filtering [list items](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList-ListItem.html).
      *
-     * @default null
+     * @since 4.32
+     * @example layerList.filterPredicate = (item) => item.title.toLowerCase().includes("streets");
      */
-    filterPredicate: nullish | __esri.LayerListFilterPredicate;
+    filterPredicate: import('@arcgis/core/widgets/LayerList/types').FilterPredicate | null | undefined;
     /**
      * The value of the filter input if [visibleElements.filter](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#visibleElements) is true.
      *
      * @default ""
+     * @since 4.29
+     * @see [showFilter](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-layer-list/#showFilter)
+     * @example
+     * reactiveUtils.watch(
+     *   () => layerList.filterText,
+     *   (filterText) => console.log(filterText)
+     * );
      */
     filterText: string;
     /**
-     * Indicates the heading level to use for the heading of the widget.
+     * Indicates the heading level to use for the heading of the component.
+     * By default, the heading is rendered as a level 2 heading (e.g., `<h2>Layer List</h2>`).
+     * Depending on the component's placement in your app, you may need to adjust this heading for proper semantics.
+     * This is important for meeting accessibility standards.
      *
      * @default 2
+     * @since 4.29
+     * @see [showHeading](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-layer-list/#showHeading)
+     * @example layerList.headingLevel = 3;
+     */
+    headingLevel: import('@arcgis/core/widgets/support/types').HeadingLevel;
+    /**
+     * Indicates whether to display the [LayerList#catalogLayerList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#catalogLayerList).
+     *
+     * @default false
+     * @since 5.0
      */
-    headingLevel: number;
-    /** @default false */
     hideCatalogLayerList: boolean;
-    /** @default false */
+    /**
+     * Indicates whether the layer list should be shown within its built-in [flow component](https://developers.arcgis.com/calcite-design-system/components/flow/) or if the flow component should be excluded. The layer list will be displayed within its original flow component if set to `true`. The flow component will be omitted from the layer list if set to `false`. To place the layer list into an existing Calcite flow component, set this property to `false`.
+     *
+     * @default false
+     * @since 5.0
+     */
     hideFlow: boolean;
-    /** @default false */
+    /**
+     * Indicates whether the status indicators will be displayed.
+     *
+     * @default false
+     * @since 5.0
+     */
     hideStatusIndicators: boolean;
     /**
      * Icon which represents the component.
      * Typically used when the component is controlled by another component (e.g. by the Expand component).
      *
-     * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
      * @default "layers"
+     * @since 4.27
+     * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
      */
-    icon: string;
+    get icon(): typeof this.widget.icon;
+    set icon(value: IconName);
     /**
      * [KnowledgeGraphLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-KnowledgeGraphLayer.html) specific properties.
+     * Knowledge graph layers will display [KnowledgeGraphLayer#tables](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-KnowledgeGraphLayer.html#tables)
+     * as an expandable [tableList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#tableList) in the LayerList component.
+     * This tables list item will only be displayed when knowledge graph layers with tables are loaded in the map.
+     * These are the properties that are used to configure the [tableList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#tableList).
      *
-     * @default null
+     * @since 4.30
+     * @see [tableList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#tableList)
+     * @example
+     * layerList.knowledgeGraphOptions = {
+     *   filterPlaceholder: "Filter tables",
+     *   listItemCreatedFunction: (event) => {
+     *     const { item } = event;
+     *     item.actionsSections = [
+     *       [
+     *         {
+     *           icon: "table",
+     *           id: "open-table",
+     *           title: "Show table"
+     *         },
+     *         {
+     *           icon: "information",
+     *           id: "information",
+     *           title: "Show information"
+     *         }
+     *       ]
+     *     ];
+     *   },
+     *   minFilterItems: 1,
+     *   visibleElements: {
+     *     errors: true,
+     *     filter: true,
+     *     statusIndicators: true
+     *   }
+     * }
      */
-    knowledgeGraphOptions: nullish | __esri.LayerListKnowledgeGraphOptions;
+    knowledgeGraphOptions: import('@arcgis/core/widgets/TableList').TableListProperties | null | undefined;
     /**
      * The widget's default label.
      *
-     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#label)
+     * @since 4.7
      */
     label: string;
     /**
      * A function that executes each time a [ListItem](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList-ListItem.html) is created.
+     * Use this function to add actions and panels to list items, and to override
+     * the default settings of a list item. Actions can be added to list items
+     * using the [ListItem#actionsSections](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList-ListItem.html#actionsSections)
+     * property of the ListItem.
+     *
+     * @since 4.4
+     * @see [Sample - LayerList component with actions](https://developers.arcgis.com/javascript/latest/sample-code/widgets-layerlist-actions/)
+     * @example
+     * const layerListComponent = document.createElement("arcgis-layer-list");
+     *   // executes for each ListItem in the LayerList
+     * layerListComponent.listItemCreatedFunction = async function (event) {
+     *
+     *     // The event object contains properties of the
+     *     // layer in the LayerList component.
+     *
+     *     let item = event.item;
      *
-     * @default null
+     *     // Wait for the layer to load and the item title to become available
+     *     await item.layer.when();
+     *
+     *     if (item.title === "US Demographics") {
+     *       // open the list item in the LayerList component
+     *       item.open = true;
+     *       // change the title to something more descriptive
+     *       item.title = "Population by county";
+     *       // set an action for zooming to the full extent of the layer
+     *       item.actionsSections = [[{
+     *         title: "Go to full extent",
+     *         className: "esri-icon-zoom-out-fixed",
+     *         id: "full-extent"
+     *       }]];
+     *     }
+     *   };
      */
-    listItemCreatedFunction: nullish | __esri.LayerListListItemCreatedHandler;
+    listItemCreatedFunction: import('@arcgis/core/widgets/LayerList/types').ListItemModifier | null | undefined;
     /**
      * The minimum number of list items required to enable drag and drop reordering with [dragEnabled](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#dragEnabled).
      *
      * @default 2
+     * @since 4.29
+     * @see [dragEnabled](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#dragEnabled)
+     * @example
+     * layerList.dragEnabled = true;
+     * layerList.minDragEnabledItems = 5;
      */
     minDragEnabledItems: number;
     /**
-     * The minimum number of list items required to display the visibleElements.filter input box.
+     * The minimum number of list items required to display the [visibleElements.filter](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList-LayerListVisibleElements.html) input box.
      *
      * @default 10
+     * @since 4.29
+     * @see [showFilter](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-layer-list/#showFilter)
+     * @example
+     * layerList.showFilter = true;
+     * layerList.minFilterItems = 5;
      */
     minFilterItems: number;
     /**
      * A collection of [Layer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-Layer.html)s that are opened
      * in a [catalogLayerList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#catalogLayerList) or [tableList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#tableList) flow item.
-     *
-     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#openedLayers)
+     * This property is useful for backing out of the catalog layer list or table list
+     * programmatically to the parent layer list.
      *
      * @default []
+     * @since 4.31
+     * @see [catalogLayerList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#catalogLayerList)
+     * @see [tableList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#tableList)
+     * @example
+     * // back out of the catalog layer list to the main layer list
+     * layerList.openedLayers.pop();
      */
-    readonly openedLayers: __esri.Collection<__esri.Layer>;
+    readonly openedLayers: import('@arcgis/core/core/Collection').default<import('@arcgis/core/widgets/LayerList.js').FlowLayer>;
     /** A collection of ListItems representing operational layers. */
     get operationalItems(): __esri.Collection<__esri.ListItem>;
-    /** @deprecated since 4.34, use [`slot`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/slot) instead. */
-    position?: __esri.UIPosition;
     /**
      * 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.
      *
@@ -175,43 +319,95 @@ export declare class ArcgisLayerList extends LitElement {
      * A collection of selected [ListItem](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList-ListItem.html)s representing operational layers
      * selected by the user.
      *
-     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#selectedItems)
+     * @see [selectionMode](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#selectionMode)
      */
-    selectedItems: __esri.Collection<__esri.ListItem>;
+    selectedItems: import('@arcgis/core/core/Collection').default<import('@arcgis/core/widgets/LayerList/ListItem').default>;
     /**
      * Specifies the selection mode.
+     * Selected items are available in the [selectedItems](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#selectedItems) property.
+     *
+     * | Value | Description |
+     * | ----- | ----------- |
+     * | multiple | Allows any number of items to be selected at once. This is useful when you want to apply an operation to multiple items at the same time. |
+     * | none | Disables selection. Use this when you want to prevent selecting items. |
+     * | single | Allows only one item to be selected at a time. If another item is selected, the previous selection is cleared. This is useful when you want to ensure that a maximum of one item is selected at a time. |
+     * | single-persist | Allows only one item to be selected at a time and prevents de-selection. Once an item is selected, it remains selected until another item is selected. This is useful when you want to ensure that there is always exactly one selected item. |
      *
      * @default "none"
+     * @since 4.29
+     * @see [selectedItems](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#selectedItems)
+     * @example layerList.selectionMode = "multiple";
+     */
+    selectionMode: "none" | "multiple" | "single" | "single-persist";
+    /**
+     * Indicates whether to display a close button in the header.
+     *
+     * @default false
+     * @since 5.0
      */
-    selectionMode: "multiple" | "single" | "none" | "single-persist";
-    /** @default false */
     showCloseButton: boolean;
-    /** @default false */
+    /**
+     * Indicates whether to display a collapse button in the header.
+     *
+     * @default false
+     * @since 5.0
+     */
     showCollapseButton: boolean;
-    /** @default false */
+    /**
+     * Indicates whether to display layers with load errors.
+     *
+     * @default false
+     * @since 5.0
+     */
     showErrors: boolean;
-    /** @default false */
+    /**
+     * Indicates whether to display a filter input box when then number of list items is equal to or greater than the value set in [LayerList#minFilterItems](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#minFilterItems), allowing users to filter layers by their title.
+     *
+     * @default false
+     * @since 5.0
+     */
     showFilter: boolean;
-    /** @default false */
+    /**
+     * Indicates whether to display the layer list heading. The heading text is "Layer List". The heading level can be set with the [LayerList#headingLevel](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#headingLevel).
+     *
+     * @default false
+     * @since 5.0
+     */
     showHeading: boolean;
-    /** @default false */
+    /**
+     * Indicates whether temporary layer indicators will be displayed for layers with [Layer#persistenceEnabled](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-Layer.html#persistenceEnabled) set to `false`. A [temporary icon](https://developers.arcgis.com/calcite-design-system/icons/?icon=temporary&library=Calcite%20UI&query=temporary) will be displayed on the near side of the layer title.
+     *
+     * @default false
+     * @since 5.0
+     */
     showTemporaryLayerIndicators: boolean;
     /**
      * The current state of the component.
      *
      * @default "disabled"
      */
-    readonly state: "ready" | "loading" | "disabled";
+    readonly state: import('@arcgis/core/widgets/LayerList/types').State;
     /** The TableList that displays the tables associated with a KnowledgeGraphLayer. */
     get tableList(): __esri.TableList | nullish;
     /**
      * Determines the icons used to indicate visibility.
      *
+     * | Value | Description | Example |
+     * | ----- | ----------- | ------- |
+     * | default | Displays view icons on the far side. Icons are hidden except on hover or if they have keyboard focus. See [view-visible](https://developers.arcgis.com/calcite-design-system/icons/?icon=view-visible&library=Calcite%20UI&query=view) and [view-hide](https://developers.arcgis.com/calcite-design-system/icons/?icon=view-hide&library=Calcite%20UI&query=view) calcite icons. | ![visibilityAppearance-default](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/layer-list/visibilityAppearance-default.png) |
+     * | checkbox | Displays checkbox icons on the near side. See [check-square-f](https://developers.arcgis.com/calcite-design-system/icons/?icon=check-square-f&library=Calcite%20UI&query=check) and [square](https://developers.arcgis.com/calcite-design-system/icons/?icon=square&library=Calcite%20UI&query=square) calcite icons. | ![visibilityAppearance-checkbox](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/layer-list/visibilityAppearance-checkbox.png) |
+     *
      * @default "default"
+     * @since 4.29
+     * @example layerList.visibilityAppearance = "checkbox";
      */
-    visibilityAppearance: "default" | "checkbox";
+    visibilityAppearance: import('@arcgis/core/widgets/LayerList/types').VisibilityAppearance;
     /** Permanently destroy the component. */
     destroy(): Promise<void>;
+    /**
+     * @param action
+     * @param item
+     */
     triggerAction(action: __esri.ActionButton | __esri.ActionToggle, item: __esri.ListItem): Promise<void>;
     /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
     readonly arcgisPropertyChange: TargetedEvent<this, {
@@ -220,6 +416,16 @@ export declare class ArcgisLayerList extends LitElement {
     /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
     readonly arcgisReady: TargetedEvent<this, void>;
     /** Emitted when an action is triggered on the component. */
-    readonly arcgisTriggerAction: TargetedEvent<this, __esri.LayerListTriggerActionEvent>;
+    readonly arcgisTriggerAction: TargetedEvent<this, import('@arcgis/core/widgets/LayerList/LayerListViewModel').LayerListViewModelTriggerActionEvent>;
+    private widget: LayerList;
+    readonly _setterTypes: {
+        icon?: IconName;
+    };
+    "@eventTypes": {
+        "arcgisClose": ArcgisLayerList["arcgisClose"]["detail"];
+        "arcgisPropertyChange": ArcgisLayerList["arcgisPropertyChange"]["detail"];
+        "arcgisReady": ArcgisLayerList["arcgisReady"]["detail"];
+        "arcgisTriggerAction": ArcgisLayerList["arcgisTriggerAction"]["detail"];
+    };
 }
 export {};

package/dist/components/arcgis-layer-list/customElement.js

@@ -8,14 +8,14 @@ import { s as d } from "../../chunks/layer-list.js";
 import { c as n } from "../../chunks/createCloseEvent.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.12 */
+v5.0.0-next.120 */
 const g = h(r);
 class c extends o {
   constructor() {
     super(...arguments), this.widget = g(this), this.viewModel = this.widget.viewModel, this.arcgisClose = n(this), this.view = this.widget.view, this.autoDestroyDisabled = !1, this.catalogOptions = this.widget.catalogOptions, this.closed = !1, this.collapsed = this.widget.collapsed, this.dragEnabled = this.widget.dragEnabled, this.filterPlaceholder = this.widget.filterPlaceholder, this.filterPredicate = this.widget.filterPredicate, this.filterText = this.widget.filterText, this.headingLevel = this.widget.headingLevel, this.hideCatalogLayerList = this.widget.visibleElements.catalogLayerList, this.hideFlow = this.widget.visibleElements.flow, this.hideStatusIndicators = this.widget.visibleElements.statusIndicators, this.icon = this.widget.icon, this.knowledgeGraphOptions = this.widget.knowledgeGraphOptions, this.label = this.widget.label, this.listItemCreatedFunction = this.widget.listItemCreatedFunction, this.minDragEnabledItems = this.widget.minDragEnabledItems, this.minFilterItems = this.widget.minFilterItems, this.openedLayers = this.widget.openedLayers, this.selectedItems = this.widget.selectedItems, this.selectionMode = this.widget.selectionMode, this.showCloseButton = this.widget.visibleElements.closeButton, this.showCollapseButton = this.widget.visibleElements.collapseButton, this.showErrors = this.widget.visibleElements.errors, this.showFilter = this.widget.visibleElements.filter, this.showHeading = this.widget.visibleElements.heading, this.showTemporaryLayerIndicators = this.widget.visibleElements.temporaryLayerIndicators, this.state = this.viewModel.state, this.visibilityAppearance = this.widget.visibilityAppearance, this.arcgisPropertyChange = s()("state"), this.arcgisReady = l(), this.arcgisTriggerAction = a(() => this.widget, "trigger-action");
   }
   static {
-    this.properties = { view: 0, autoDestroyDisabled: 5, catalogLayerList: 32, catalogOptions: 0, closed: 5, collapsed: 7, dragEnabled: 5, filterPlaceholder: 1, filterPredicate: 0, filterText: 1, headingLevel: 9, hideCatalogLayerList: 5, hideFlow: 5, hideStatusIndicators: 5, icon: 1, knowledgeGraphOptions: 0, label: 1, listItemCreatedFunction: 0, minDragEnabledItems: 9, minFilterItems: 9, openedLayers: 0, operationalItems: 32, position: 1, referenceElement: 1, selectedItems: 0, selectionMode: 1, showCloseButton: 5, showCollapseButton: 5, showErrors: 5, showFilter: 5, showHeading: 5, showTemporaryLayerIndicators: 5, state: 3, tableList: 32, visibilityAppearance: 1 };
+    this.properties = { view: 0, autoDestroyDisabled: 5, catalogLayerList: 32, catalogOptions: 0, closed: 5, collapsed: 7, dragEnabled: 5, filterPlaceholder: 1, filterPredicate: 0, filterText: 1, headingLevel: 9, hideCatalogLayerList: 5, hideFlow: 5, hideStatusIndicators: 5, icon: 0, knowledgeGraphOptions: 0, label: 1, listItemCreatedFunction: 0, minDragEnabledItems: 9, minFilterItems: 9, openedLayers: 32, operationalItems: 32, referenceElement: 1, selectedItems: 0, selectionMode: 1, showCloseButton: 5, showCollapseButton: 5, showErrors: 5, showFilter: 5, showHeading: 5, showTemporaryLayerIndicators: 5, state: 35, tableList: 32, visibilityAppearance: 1 };
   }
   static {
     this.styles = d;