@arcgis/core/views/DOMContainer.d.ts

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

import type DefaultUI from "./ui/DefaultUI.js";
import type { DefaultUIProperties } from "./ui/DefaultUI.js";

export interface DOMContainerProperties extends Partial<Pick<DOMContainer, "aria" | "attributionMode">> {
  /**
   * The `id` or node representing the DOM element containing the view. This is typically set in the view's constructor.
   *
   * @example
   * // Sets container to the DOM id
   * let view = new MapView({
   *   container: "viewDiv"  // ID of the HTML element that holds the view
   * });
   * @example
   * // Sets container to the node
   * let viewNode = document.getElementById("viewDiv");
   * let view = new SceneView({
   *   container: viewNode
   * });
   */
  container?: HTMLDivElement | string | null;
  /**
   * Exposes the default widgets available in the view and allows you to toggle them on
   * and off. See [DefaultUI](https://developers.arcgis.com/javascript/latest/references/core/views/ui/DefaultUI/) for more details.
   *
   * @example
   * let toggle = new BasemapToggle({
   *   view: view,
   *   nextBasemap: "hybrid"
   * });
   * // Adds an instance of BasemapToggle widget to the
   * // top right of the view.
   * view.ui.add(toggle, "top-right");
   * @example
   * // Moves the zoom and BasemapToggle widgets to the
   * // bottom left of the view.
   * view.ui.move([ "zoom", toggle ], "bottom-left");
   * @example
   * // Removes all the widgets from the bottom left of the view
   * view.ui.empty("bottom-left");
   * @example
   * // Removes the compass widget from the view
   * view.ui.remove("compass");
   * @example
   * // Removes all default UI components, except Attribution.
   * // Passing an empty array will remove all components.
   * view.ui.components = [ "attribution" ];
   */
  ui?: DefaultUIProperties;
}

/**
 * DOMContainer is a mixin that adds properties and methods to View classes for managing and interacting with DOM containers.
 *
 * @since 4.0
 */
export abstract class DOMContainer {
  constructor(...args: any[]);
  /**
   * The ARIA attributes for the view container.
   *
   * @since 4.34
   * @see [Element: ariaDescribedByElements property](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDescribedByElements)
   * @see [Element: ariaLabelledByElements property](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLabelledByElements)
   * @see [ARIA: aria-description attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-description)
   * @see [ARIA: aria-label attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label)
   */
  accessor aria: DOMContainerAria;
  /**
   * The height of the attribution in pixels.
   * The value is practical to adjust the bottom padding of other UI elements.
   * The value changes when the attribution is expanded or collapsed.
   *
   * @since 5.0
   */
  get attributionHeight(): number;
  /**
   * The light or dark mode used to display the attribution.
   * By default, the mode is inherited from the [Calcite's mode](https://developers.arcgis.com/calcite-design-system/core-concepts/#modes).
   * You can override the value to style the attribution alongside the map or scene content.
   *
   * @since 5.0
   */
  accessor attributionMode: "dark" | "light" | null | undefined;
  /**
   * The `id` or node representing the DOM element containing the view. This is typically set in the view's constructor.
   *
   * @example
   * // Sets container to the DOM id
   * let view = new MapView({
   *   container: "viewDiv"  // ID of the HTML element that holds the view
   * });
   * @example
   * // Sets container to the node
   * let viewNode = document.getElementById("viewDiv");
   * let view = new SceneView({
   *   container: viewNode
   * });
   */
  get container(): HTMLDivElement | null | undefined;
  set container(value: HTMLDivElement | string | null | undefined);
  /**
   * Indicates if the browser focus is on the view.
   *
   * @since 4.7
   */
  get focused(): boolean;
  /**
   * The height of the view in pixels read from the view container element.
   *
   * The view container needs to have a height greater than 0 to be displayed.
   *
   * @default 0
   */
  get height(): number;
  /**
   * Indicates whether the view is being resized.
   *
   * @default false
   */
  get resizing(): boolean;
  /** An array containing the width and height of the view in pixels, e.g. `[width, height]`. */
  get size(): [
      number,
      number
  ];
  /**
   * Indicates if the view is visible on the page. When `true`, the view is not visible and it stops rendering and updating data.
   * Set to `true` when one of the following conditions are met:
   * * if the view does not have a [container](https://developers.arcgis.com/javascript/latest/references/core/views/DOMContainer/#container),
   * * if the view's [height](https://developers.arcgis.com/javascript/latest/references/core/views/DOMContainer/#height) or [width](https://developers.arcgis.com/javascript/latest/references/core/views/DOMContainer/#width) equal to 0,
   * * if the view container's css style `display` is set to `none` (`display:none`).
   *
   * When the view container's css style `visibility` is set to `hidden`, this property is set to `false`, and
   * the view is hidden but it stills renders and updates data.
   *
   * @default true
   */
  get suspended(): boolean;
  /**
   * Exposes the default widgets available in the view and allows you to toggle them on
   * and off. See [DefaultUI](https://developers.arcgis.com/javascript/latest/references/core/views/ui/DefaultUI/) for more details.
   *
   * @example
   * let toggle = new BasemapToggle({
   *   view: view,
   *   nextBasemap: "hybrid"
   * });
   * // Adds an instance of BasemapToggle widget to the
   * // top right of the view.
   * view.ui.add(toggle, "top-right");
   * @example
   * // Moves the zoom and BasemapToggle widgets to the
   * // bottom left of the view.
   * view.ui.move([ "zoom", toggle ], "bottom-left");
   * @example
   * // Removes all the widgets from the bottom left of the view
   * view.ui.empty("bottom-left");
   * @example
   * // Removes the compass widget from the view
   * view.ui.remove("compass");
   * @example
   * // Removes all default UI components, except Attribution.
   * // Passing an empty array will remove all components.
   * view.ui.components = [ "attribution" ];
   */
  get ui(): DefaultUI;
  set ui(value: DefaultUIProperties);
  /**
   * The width of the view in pixels read from the view container element.
   *
   * The view container needs to have a width greater than 0 to be displayed.
   *
   * @default 0
   */
  get width(): number;
  /**
   * Sets the focus on the view.
   *
   * @since 4.5
   */
  focus(): void;
}

/** The ARIA attributes for the view container. */
export interface DOMContainerAria {
  /** The array of HTML elements that describe the view container. */
  describedByElements?: HTMLElement[];
  /** The [`aria-description`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-description) of the view container. */
  description?: string;
  /** The [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) of the view container. */
  label?: string;
  /** The array of HTML elements that label the view container. */
  labelledByElements?: HTMLElement[];
}