@arcgis/map-components/dist/components/arcgis-basemap-layer-list/customElement.d.ts

ArcGIS Map Components

/// <reference path="../../index.d.ts" />
import type ListItem from "@arcgis/core/widgets/LayerList/ListItem.js";
import type Collection from "@arcgis/core/core/Collection.js";
import type CatalogLayerList from "@arcgis/core/widgets/CatalogLayerList.js";
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { ArcgisReferenceElement, IconName } from "../types.js";
import type { LayerListViewModelTriggerActionEvent } from "@arcgis/core/widgets/LayerList/LayerListViewModel.js";
import type { MapViewOrSceneView } from "@arcgis/core/views/MapViewOrSceneView.js";
import type { FilterPredicate, ListItemModifier, VisibilityAppearance } from "@arcgis/core/widgets/LayerList/types.js";
import type { CatalogLayerListProperties } from "@arcgis/core/widgets/CatalogLayerList.js";
import type { HeadingLevel } from "@arcgis/core/widgets/support/types.js";
import type { Icon } from "@esri/calcite-components/components/calcite-icon";
import type { BasemapLayerListState } from "@arcgis/core/widgets/BasemapLayerList/types.js";

/**
 * The Basemap Layer List component provides a way to display a list of [Basemap](https://developers.arcgis.com/javascript/latest/references/core/Basemap/) layers and switch on/off their visibility. [Base layers](https://developers.arcgis.com/javascript/latest/references/core/Basemap/#baseLayers) and [reference layers](https://developers.arcgis.com/javascript/latest/references/core/Basemap/#referenceLayers) are divided into separate sections. When editing is enabled, layers can be reordered by dragging and dropping between the lists and the title can be edited.
 *
 * @since 4.28
 */
export abstract class ArcgisBasemapLayerList extends LitElement {
  /**
   * 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/components/arcgis-basemap-layer-list/#destroy) method when you are done to
   * prevent memory leaks.
   *
   * @default false
   */
  accessor autoDestroyDisabled: boolean;
  /**
   * Specifies a function to handle filtering base layer [list items](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItem/).
   *
   * @since 4.32
   * @example
   * ```js
   * basemapLayerListElement.baseFilterPredicate = (item) => item.title.toLowerCase().includes("streets");
   * ```
   */
  accessor baseFilterPredicate: FilterPredicate | null | undefined;
  /**
   * The value of the filter input text string if [showFilter](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-basemap-layer-list/#showFilter) is true.
   *
   * @default ""
   * @since 4.29
   * @see [showFilter](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-basemap-layer-list/#showFilter)
   * @example
   * ```js
   * reactiveUtils.watch(
   *   () => basemapLayerListElement.baseFilterText,
   *   (baseFilterText) => console.log(baseFilterText)
   * );
   * ```
   */
  accessor baseFilterText: string;
  /** A collection of ListItems representing the baseLayers. */
  get baseItems(): Collection<ListItem>;
  /**
   * Specifies a function that accesses each [ListItem](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItem/) representing a base layer.
   * Each list item's modifiable properties can be updated within. Actions can be added to list items
   * using the [ListItem#actionsSections](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItem/#actionsSections)
   * property of the ListItem.
   *
   * @example
   * ```js
   * basemapLayerListElement.baseListItemCreatedFunction = (event) => {
   *   const baseListItem = event.item;
   *   if(baseListItem.title === "World Imagery_01"){
   *     // clean up title
   *     baseListItem.title = "World Imagery";
   *     // open the baseList item
   *     baseListItem.open = true;
   *   }
   * }
   * ```
   */
  accessor baseListItemCreatedFunction: ListItemModifier | null | undefined;
  /** The current basemap's title. */
  accessor basemapTitle: string | null | undefined;
  /**
   * The CatalogLayerList that displays a catalog layer's dynamic group layer.
   *
   * @see [arcgis-catalog-layer-list](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-catalog-layer-list/)
   * @see [catalogOptions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-basemap-layer-list/#catalogOptions)
   */
  get catalogLayerList(): CatalogLayerList | null | undefined;
  /**
   * [CatalogLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/CatalogLayer/) specific properties.
   * Catalog layers will display their [dynamicGroupLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/CatalogLayer/#dynamicGroupLayer) as an expandable [catalogLayerList](https://developers.arcgis.com/javascript/latest/references/core/widgets/BasemapLayerList/#catalogLayerList) in the BasemapLayerList widget.
   * 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/references/core/widgets/BasemapLayerList/#catalogLayerList).
   *
   * @since 4.30
   * @see [catalogLayerList](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-basemap-layer-list/#catalogLayerList)
   * @example
   * ```js
   * basemapLayerListElement.catalogOptions = {
   *   listItemCreatedFunction: (event) => {
   *     const { item } = event;
   *     item.actionsSections = [
   *       [
   *         {
   *           title: "Add layer to map",
   *           icon: "add-layer",
   *           id: "add-layer"
   *         }
   *       ]
   *     ];
   *   },
   *   selectionMode: "single",
   *   visibleElements: {
   *     filter: true
   *     temporaryLayerIndicators: true
   *   }
   * };
   * ```
   */
  accessor catalogOptions: CatalogLayerListProperties | null | undefined;
  /**
   * Indicates whether a component is closed. When `true`, the component will be hidden.
   *
   * @default false
   * @since 4.33
   */
  accessor closed: boolean;
  /**
   * 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/components/arcgis-basemap-layer-list/#showCollapseButton)
   * @example
   * ```js
   * basemapLayerListElement.collapsed = true;
   * ```
   */
  accessor collapsed: boolean;
  /**
   * Indicates whether [list items](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItem/) may be reordered within the list by dragging and dropping.
   * MapImageLayer [sublayers](https://developers.arcgis.com/javascript/latest/references/core/layers/MapImageLayer/#sublayers) can be reordered only within their parent MapImageLayer and can not be dragged out as a separate layer.
   *
   * @default false
   * @since 4.29
   * @example
   * ```js
   * basemapLayerListElement.dragEnabled = true;
   * ```
   */
  accessor dragEnabled: boolean;
  /**
   * Indicates whether the form to edit the basemap's title is currently visible.
   * Any edits made will only be shown locally and will not be saved.
   *
   * @default false
   * @since 4.29
   * @see [showEditTitleButton](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-basemap-layer-list/#showEditTitleButton)
   * @example
   * ```js
   * basemapLayerListElement.editingTitle = true;
   * ```
   */
  accessor editingTitle: boolean;
  /**
   * Placeholder text used in the filter input if [showFilter](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-basemap-layer-list/#showFilter) is true.
   *
   * @default ""
   * @since 4.29
   * @see [showFilter](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-basemap-layer-list/#showFilter)
   * @example
   * ```js
   * basemapLayerListElement.filterPlaceholder = "Filter layers";
   * ```
   */
  accessor filterPlaceholder: string;
  /**
   * Indicates the heading level to use for the component's title (i.e. "Navigation").
   * By default, the basemap's title is rendered
   * as a level 2 heading (e.g. `<h2>Navigation</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.20
   * @see [Heading Elements](https://developer.mozilla.org/docs/Web/HTML/Element/Heading_Elements)
   * @example
   * ```js
   * // the component title will render as an <h3>
   * basemapLayerListElement.headingLevel = 3;
   * ```
   */
  accessor headingLevel: HeadingLevel;
  /**
   * Indicates whether the base layers will be displayed.
   *
   * @default false
   * @since 5.0
   */
  accessor hideBaseLayers: boolean;
  /**
   * Indicates whether the basemap layer list displays a heading. The heading text is the title of the basemap. The heading level can be set with the [BasemapLayerList#headingLevel](https://developers.arcgis.com/javascript/latest/references/core/widgets/BasemapLayerList/#headingLevel).
   *
   * @default false
   * @since 5.0
   */
  accessor hideHeading: boolean;
  /**
   * Indicates whether to the reference layers will be displayed.
   *
   * @default false
   * @since 5.0
   */
  accessor hideReferenceLayers: boolean;
  /**
   * Indicates whether the status indicators will be displayed.
   *
   * @default false
   * @since 5.0
   */
  accessor hideStatusIndicators: boolean;
  /**
   * Icon which represents the component.
   * Typically used when the component is controlled by another component (e.g. by the Expand component).
   *
   * @default "layers"
   * @since 4.27
   * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
   */
  get icon(): Icon["icon"];
  set icon(value: IconName);
  /** The component's default label. */
  accessor label: string;
  /**
   * The minimum number of list items required to display the [showFilter](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-basemap-layer-list/#showFilter) input box.
   *
   * @default 10
   * @since 4.29
   * @see [showFilter](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-basemap-layer-list/#showFilter)
   * @example
   * ```js
   * basemapLayerListElement.showFilter = true;
   * basemapLayerListElement.minFilterItems = 5;
   * ```
   */
  accessor minFilterItems: number;
  /**
   * 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.
   *
   * @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)
   */
  accessor referenceElement: ArcgisReferenceElement | string | undefined;
  /**
   * Specifies a function to handle filtering reference layer [list items](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItem/).
   *
   * @since 4.32
   * @example
   * ```js
   * layerList.referenceFilterPredicate = (item) => item.title.toLowerCase().includes("streets");
   * ```
   */
  accessor referenceFilterPredicate: FilterPredicate | null | undefined;
  /**
   * The value of the filter input text string if [showFilter](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-basemap-layer-list/#showFilter) is true.
   *
   * @default ""
   * @since 4.29
   * @see [showFilter](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-basemap-layer-list/#showFilter)
   * @example
   * ```js
   * reactiveUtils.watch(
   *   () => basemapLayerListElement.referenceFilterText,
   *   (referenceFilterText) => console.log(referenceFilterText)
   * );
   * ```
   */
  accessor referenceFilterText: string;
  /** A collection of ListItems representing the referenceLayers. */
  get referenceItems(): Collection<ListItem>;
  /**
   * Specifies a function that accesses each [ListItem](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItem/) representing a reference layer.
   * Each list item's modifiable properties can be updated within. Actions can be added to list items
   * using the [ListItem#actionsSections](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItem/#actionsSections).
   *
   * @example
   * ```js
   * basemapLayerListElement.referenceListItemCreatedFunction = (event) => {
   *   referenceListItem = event.item;
   *   if(referenceListItem.title === "World Imagery_01_reference_layer"){
   *     // clean up title
   *     referenceListItem.title = "Reference layer";
   *     // open the baseList item
   *     referenceListItem.open = true;
   *   }
   * }
   * ```
   */
  accessor referenceListItemCreatedFunction: ListItemModifier | null | undefined;
  /**
   * A collection of selected [ListItem](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItem/)s representing basemap layers
   * selected by the user.
   *
   * @see [selectionMode](https://developers.arcgis.com/javascript/latest/references/core/widgets/BasemapLayerList/#selectionMode)
   */
  accessor selectedItems: Collection<ListItem>;
  /**
   * Specifies the selection mode.
   * Selected items are available in the [selectedItems](https://developers.arcgis.com/javascript/latest/references/core/widgets/BasemapLayerList/#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/references/core/widgets/BasemapLayerList/#selectedItems)
   * @example
   * ```js
   * basemapLayerListElement.selectionMode = "multiple";
   * ```
   */
  accessor selectionMode: "multiple" | "single" | "none" | "single-persist";
  /**
   * Indicates whether to display a close button in the header.
   *
   * @default false
   * @since 5.0
   */
  accessor showCloseButton: boolean;
  /**
   * Indicates whether to display a collapse button in the header.
   *
   * @default false
   * @since 5.0
   */
  accessor showCollapseButton: boolean;
  /**
   * Indicates whether to display a button in the header to edit the basemap title.
   *
   * @default false
   * @since 5.0
   */
  accessor showEditTitleButton: boolean;
  /**
   * Indicates whether to display layers with load errors.
   *
   * @default false
   * @since 5.0
   */
  accessor showErrors: boolean;
  /**
   * Indicates whether to display a filter input box when then number of list items is equal to or greater than the value set in [BasemapLayerList#minFilterItems](https://developers.arcgis.com/javascript/latest/references/core/widgets/BasemapLayerList/#minFilterItems), allowing users to filter layers by their title.
   *
   * @default false
   * @since 5.0
   */
  accessor showFilter: boolean;
  /**
   * Indicates whether temporary layer indicators will be displayed for layers with [Layer#persistenceEnabled](https://developers.arcgis.com/javascript/latest/references/core/layers/Layer/#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
   */
  accessor showTemporaryLayerIndicators: boolean;
  /**
   * The current state of the component.
   *
   * @default "disabled"
   */
  get state(): BasemapLayerListState;
  /**
   * 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 arcgis-basemap-layer-list component will be associated with a map or scene component rather than using the `view` property.
   */
  accessor view: MapViewOrSceneView | null | undefined;
  /**
   * 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/references/core/widgets/basemap-layer-list/visibilityAppearance-default.avif) |
   * | 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/references/core/widgets/basemap-layer-list/visibilityAppearance-checkbox.avif) |
   *
   * @default "default"
   * @since 4.29
   * @example
   * ```js
   * basemapLayerListElement.visibilityAppearance = "checkbox";
   * ```
   */
  accessor visibilityAppearance: VisibilityAppearance;
  /** Permanently destroy the component. */
  destroy(): Promise<void>;
  "@setterTypes": {
    icon?: IconName;
  };
  /**
   * Emitted when the component's close button is clicked.
   *
   * @since 4.33
   */
  readonly arcgisClose: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "state"; }>;
  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
  readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Emitted when an action is triggered on the component. */
  readonly arcgisTriggerAction: import("@arcgis/lumina").TargetedEvent<this, LayerListViewModelTriggerActionEvent>;
  readonly "@eventTypes": {
    arcgisClose: ArcgisBasemapLayerList["arcgisClose"]["detail"];
    arcgisPropertyChange: ArcgisBasemapLayerList["arcgisPropertyChange"]["detail"];
    arcgisReady: ArcgisBasemapLayerList["arcgisReady"]["detail"];
    arcgisTriggerAction: ArcgisBasemapLayerList["arcgisTriggerAction"]["detail"];
  };
}