@arcgis/map-components
Version:
ArcGIS Map Components
182 lines (181 loc) • 8.34 kB
TypeScript
/// <reference path="../../index.d.ts" />
import type SwipeViewModel from "@arcgis/core/widgets/Swipe/SwipeViewModel.js";
import type MapView from "@arcgis/core/views/MapView.js";
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { ArcgisReferenceElement } from "../types.js";
import type { T9nMeta } from "@arcgis/lumina/controllers";
import type { Direction, State } from "@arcgis/core/widgets/Swipe/types.js";
/**
* The Swipe component provides a tool to show a portion of a layer or layers
* on top of a map. Layers can be swiped vertically or horizontally to easily
* compare two layers or see what is underneath a layer.
*
* To use the Swipe component, set the `startLayers` and `endLayers`
* properties to determine what will be compared on either side of the component. If one of these properties
* is not set, then the Swipe component will overlay the existing map.
*
* **Known limitations**
*
* - This component is not currently supported within a Scene component.
*
* @since 4.31
* @see [Sample - Swipe component](https://developers.arcgis.com/javascript/latest/sample-code/swipe/)
* @see [Sample - Swipe component with scroll](https://developers.arcgis.com/javascript/latest/sample-code/swipe-scroll/)
*/
export abstract class ArcgisSwipe 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-swipe/#destroy) method when you are done to
* prevent memory leaks.
*
* @default false
*/
accessor autoDestroyDisabled: boolean;
/**
* The direction the Swipe component moves across the view.
* If `"horizontal"`, the component will move left and right and
* if `"vertical"`, the component will move up and down.
*
* @default "horizontal"
*/
accessor direction: Direction;
/**
* When true, the component is visually withdrawn and cannot receive user interaction.
*
* @default false
*/
accessor disabled: boolean;
/**
* A collection of layers that will show on the right or bottom side of the Swipe component.
*
* @see [trailingLayers](https://developers.arcgis.com/javascript/latest/references/core/widgets/Swipe/SwipeViewModel/#trailingLayers)
* @since 5.0
*/
accessor endLayers: SwipeViewModel["trailingLayers"];
/**
* When `true`, the divider between the leading and trailing layers will be hidden.
*
* @default false
*/
accessor hideDivider: boolean;
/**
* When `true`, the handle from which you drag the component will be hidden.
*
* @default false
*/
accessor hideHandle: boolean;
/**
* Icon which represents the component.
* Typically used when the component is controlled by another component (e.g. by the Expand component).
*
* @default "compare"
* @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
*/
accessor icon: string | undefined;
/**
* The component's default label.
*
* @default "Swipe"
*/
accessor label: string | undefined;
/**
* A collection of layers that will show on the left or top side of the Swipe component.
*
* @deprecated since 5.0, use [startLayers](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-swipe/#startLayers) instead.
* @see [leadingLayers](https://developers.arcgis.com/javascript/latest/references/core/widgets/Swipe/SwipeViewModel/#leadingLayers)
*/
accessor leadingLayers: SwipeViewModel["leadingLayers"];
/**
* Replace localized message strings with your own strings.
*
* _**Note**: Individual message keys may change between releases._
*/
accessor messageOverrides: {
componentLabel?: string | undefined;
dragLabel?: string | undefined;
};
/** @internal */
protected messages: Partial<{
componentLabel: string;
dragLabel: string;
}> & T9nMeta<{
componentLabel: string;
dragLabel: string;
}>;
/**
* The position of the Swipe component. This determines what percentage
* of the view will be taken up by the [startLayers](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-swipe/#startLayers).
*
* @default 25
* @since 5.0
*/
accessor position: 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;
/**
* A collection of layers that will show on the left or top side of the Swipe component.
*
* @see [leadingLayers](https://developers.arcgis.com/javascript/latest/references/core/widgets/Swipe/SwipeViewModel/#leadingLayers)
* @since 5.0
*/
accessor startLayers: SwipeViewModel["leadingLayers"];
/**
* The current state of the component.
*
* @default "disabled"
*/
get state(): State;
/**
* The position of the Swipe component. This determines what percentage
* of the view will be taken up by the [startLayers](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-swipe/#startLayers).
*
* @deprecated since 5.0, use [position](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-swipe/#position) instead.
* @default 25
*/
accessor swipePosition: number;
/**
* A collection of layers that will show on the right or bottom side of the Swipe component.
*
* @deprecated since 5.0, use [endLayers](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-swipe/#endLayers) instead.
* @see [trailingLayers](https://developers.arcgis.com/javascript/latest/references/core/widgets/Swipe/SwipeViewModel/#trailingLayers)
*/
accessor trailingLayers: SwipeViewModel["trailingLayers"];
/**
* 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-swipe component will be associated with a map or scene component rather than using the `view` property.
*/
accessor view: MapView | null | undefined;
/** Permanently destroy the component. */
destroy(): Promise<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>;
/**
* Fires when the swipe position changes and the drag handle is released on the component.
*
* **Note:** To constantly listen to changes while dragging, use the `arcgisSwipeInput` event instead.
*
* @since 4.34
*/
readonly arcgisSwipeChange: import("@arcgis/lumina").TargetedEvent<this, void>;
/**
* Fires when the swipe position is updated.
* This event is fired continuously while dragging the handle.
*
* @since 4.34
*/
readonly arcgisSwipeInput: import("@arcgis/lumina").TargetedEvent<this, void>;
readonly "@eventTypes": {
arcgisPropertyChange: ArcgisSwipe["arcgisPropertyChange"]["detail"];
arcgisReady: ArcgisSwipe["arcgisReady"]["detail"];
arcgisSwipeChange: ArcgisSwipe["arcgisSwipeChange"]["detail"];
arcgisSwipeInput: ArcgisSwipe["arcgisSwipeInput"]["detail"];
};
}