@arcgis/map-components 5.1.0-next.11 → 5.1.0-next.112

package/dist/components/arcgis-slider-time/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-slider-time/index.js

@@ -0,0 +1,8 @@
+import "@esri/calcite-components/components/calcite-action-menu";
+import "@esri/calcite-components/components/calcite-action";
+import "@arcgis/common-components/components/arcgis-ticks";
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-button";
+import "@arcgis/common-components/components/arcgis-slider";
+import "@esri/calcite-components/components/calcite-icon";
+export * from "./customElement.js";

package/dist/components/arcgis-slider-time/types.d.ts

@@ -0,0 +1,147 @@
+import type TimeExtent from "@arcgis/core/time/TimeExtent.js";
+import type TimeInterval from "@arcgis/core/time/TimeInterval.js";
+import type { IconName } from "../types.js";
+
+/** Defines the layout options for the time slider component. */
+export type Layout = "auto" | "compact" | "wide";
+
+/** Defines the different modes of the time slider component. */
+export type Mode = "cumulative-from-end" | "cumulative-from-start" | "instant" | "time-window";
+
+/** Defines the different states of the time slider component. */
+export type State = "disabled" | "playing" | "ready";
+
+/** Stops are positioned at specific dates. */
+export interface StopsByDates {
+  dates: Date[];
+}
+
+/** Stops are positioned at regular intervals defined by a [time interval](https://developers.arcgis.com/javascript/latest/references/core/time/TimeInterval). */
+export interface StopsByInterval {
+  /** The interval at which stops will be created. */
+  interval: TimeInterval;
+  /** The time extent over which the stops will be distributed. */
+  timeExtent?: TimeExtent;
+}
+
+/**
+ * Stops are positioned at a specific number of evenly spaced locations along the time slider.
+ * The exact positions of the stops will be calculated based on the provided count and the time extent of the slider.
+ */
+export interface StopsByCount {
+  /** The number of stops to create along the time slider. */
+  count: number;
+  /** The time extent over which the stops will be distributed. */
+  timeExtent?: TimeExtent;
+}
+
+export type Stops = StopsByCount | StopsByDates | StopsByInterval;
+
+/**
+ * An action that can be performed by the user in the time slider component.
+ * Actions are displayed in a menu that appears when the user clicks the ellipsis button in the component.
+ */
+export interface Action {
+  /** Unique identifier of the action. */
+  id: string;
+  /**
+   * The name of the icon to display.
+   * The value of this property must match the icon name from
+   * [Calcite UI Icons](https://developers.arcgis.com/calcite-design-system/icons/).
+   */
+  icon: IconName;
+  /** The title of the action that will be displayed in the menu. */
+  title: string;
+}
+
+/**
+ * Time slider settings derived from a
+ * [timeSlider widget](https://developers.arcgis.com/javascript/latest/references/core/webdoc/Widgets/#timeSlider) in a
+ * [web map](https://developers.arcgis.com/javascript/latest/references/core/WebMap) or
+ * [web scene](https://developers.arcgis.com/javascript/latest/references/core/WebScene).
+ */
+export interface TimeSliderSettings {
+  /**
+   * The temporal extent of the entire slider.
+   *
+   * @see [arcgis-slider-time.fullTimeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-time/#fullTimeExtent)
+   */
+  fullTimeExtent?: TimeExtent | null;
+  /**
+   * When `true`, the arcgis-slider-time will play its animation in a loop.
+   *
+   * @see [arcgis-slider-time.loop](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-time/#loop)
+   */
+  loop: boolean;
+  /**
+   * The time slider mode.
+   *
+   * @see [arcgis-slider-time.mode](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-time/#mode)
+   */
+  mode?: Mode;
+  /**
+   * The time (in milliseconds) between animation steps.
+   *
+   * @see [arcgis-slider-time.playRate](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-time/#playRate)
+   */
+  playRate?: number;
+  /**
+   * Defines specific locations on the time slider where thumbs will snap to when manipulated.
+   *
+   * @see [arcgis-slider-time.stops](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-time/#stops)
+   */
+  stops?: Stops | null;
+  /**
+   * The current time extent of the time slider.
+   *
+   * @see [arcgis-slider-time.timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-time/#timeExtent)
+   */
+  timeExtent?: TimeExtent | null;
+}
+
+/** Event payload for the trigger-action event. */
+export interface TriggerActionEvent {
+  /** The action that was clicked. */
+  action: Action;
+}
+
+/** Describes the type of date label that is being formatted by the date label formatter function. */
+export type DateLabelType = "extent" | "max" | "min";
+
+/**
+ * A function that formats the date labels displayed on the time slider.
+ *
+ * @param value
+ * @param type
+ * @param element
+ * @param layout
+ */
+export type DateLabelFormatter = (value: Date | [Date | null | undefined, Date | null | undefined] | null | undefined, type: DateLabelType, element: HTMLElement, layout: Exclude<Layout, "auto">) => void;
+
+/**
+ * Given a tick value, this function returns the label to display for that tick.
+ *
+ * @param value
+ */
+export type TickLabelFormatter = (value: number) => string;
+
+/** This type defines how tick values are interpreted and positioned along the time slider component. */
+export type TickMode = "count" | "percent" | "position";
+
+/**
+ * Tick mark and label configuration for the time slider component.
+ * Each tick configuration includes a `mode` that determines how the tick values are calculated, and a `labelFormatFunction` that formats the tick labels.
+ */
+export interface TickConfig {
+  /** If `labelsVisible` is `true`, this function will be used to format the labels for the ticks based on their values. */
+  labelFormatFunction?: TickLabelFormatter;
+  /**
+   * If `true`, labels will be rendered for the ticks based on their values and the provided `labelFormatFunction`.
+   * If `false`, only tick marks will be rendered without labels.
+   */
+  labelsVisible?: boolean;
+  /** The mode or method of positioning ticks. */
+  mode: TickMode;
+  /** The value or values for the ticks. */
+  values: number[] | number;
+}

package/dist/components/arcgis-snapping-controls/customElement.d.ts

@@ -17,29 +17,77 @@ export abstract class ArcgisSnappingControls extends LitElement {
    * @default false
    */
   accessor autoDestroyDisabled: boolean;
-  /** @default false */
+  /**
+   * Controls display of the "Enable snapping" toggle.
+   *
+   * @default false
+   */
   accessor hideEnabledToggle: boolean;
-  /** @default false */
+  /**
+   * Controls display of the "Feature to feature" toggle. This controls feature snapping.
+   *
+   * @default false
+   */
   accessor hideFeatureEnabledToggle: boolean;
-  /** @default false */
+  /**
+   * Controls display of the [arcgis-grid-controls](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-grid-controls/).
+   *
+   * @default false
+   */
   accessor hideGridControls: boolean;
-  /** @default false */
+  /**
+   * Controls display of the buttons to change the color of the grid.
+   *
+   * @default false
+   */
   accessor hideGridControlsElementsColorSelection: boolean;
-  /** @default false */
+  /**
+   * Controls display of the toggle that modifies [dynamicScaling](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-grid-controls/#dynamicScaling).
+   *
+   * @default false
+   */
   accessor hideGridControlsElementsDynamicScaleToggle: boolean;
-  /** @default false */
+  /**
+   * Controls display of the line interval input. The input sets the interval between major grid lines.
+   *
+   * @default false
+   */
   accessor hideGridControlsElementsLineIntervalInput: boolean;
-  /** @default false */
+  /**
+   * Controls display of the numeric inputs that allow for setting grid spacing and rotation
+   *
+   * @default false
+   */
   accessor hideGridControlsElementsNumericInputs: boolean;
-  /** @default false */
+  /**
+   * Controls display of the out of scale warning. This warning is displayed when the grid is not shown because it would be too small at the current scale and dynamic scaling is disabled.
+   *
+   * @default false
+   */
   accessor hideGridControlsElementsOutOfScaleWarning: boolean;
-  /** @default false */
+  /**
+   * Controls display of the grid placement buttons. These buttons allow the user to start interactive configuration of the grid.
+   *
+   * @default false
+   */
   accessor hideGridControlsElementsPlacementButtons: boolean;
-  /** @default false */
+  /**
+   * Controls display of the "Rotate grid with map" toggle. This toggle controls whether the grid rotates with the map.
+   *
+   * @default false
+   */
   accessor hideGridControlsElementsRotateWithMapToggle: boolean;
-  /** @default false */
+  /**
+   * Controls display of the "Snapping layers" dropdown. The list displays the available layers to configure snapping.
+   *
+   * @default false
+   */
   accessor hideLayerList: boolean;
-  /** @default false */
+  /**
+   * Controls display of the “Geometry guides” toggle. This toggle controls the self-snapping configuration which handles showing right-angle and parallel line indicators while constructing or modifying geometries.
+   *
+   * @default false
+   */
   accessor hideSelfEnabledToggle: boolean;
   /**
    * Icon which represents the component.
@@ -63,10 +111,23 @@ export abstract class ArcgisSnappingControls extends LitElement {
    * @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;
-  /** @default false */
+  /**
+   * Controls display of the "Enable grid" toggle. This toggle controls whether the grid is displayed.
+   *
+   * @default false
+   */
   accessor showGridControlsElementsGridEnabledToggle: boolean;
-  /** @default false */
+  /**
+   * Controls display of the header
+   *
+   * @default false
+   */
   accessor showHeader: boolean;
+  /**
+   * The [SnappingOptions](https://developers.arcgis.com/javascript/latest/references/core/views/interactive/snapping/SnappingOptions/)
+   * that will be controlled by this component if the snapping toggle is enabled for display.
+   * If SnappingOptions are provided, grid display will be automatically enabled or disabled to match snapping state.
+   */
   accessor snappingOptions: SnappingOptions;
   /**
    * The current state of the component.

package/dist/components/arcgis-snapping-controls/customElement.js

@@ -4,11 +4,11 @@ import { usePropertyChange as i } from "@arcgis/lumina/controllers";
 import t from "@arcgis/core/widgets/support/SnappingControls.js";
 import { LitElement as r, createEvent as o } from "@arcgis/lumina";
 import { m as n } from "../../chunks/useWidget.js";
-import { css as a } from "lit";
-const s = a`.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{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__heading{word-break:break-word}.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}.esri-snapping-controls{flex-flow:column wrap;display:flex}.esri-snapping-controls__container{flex-direction:column;flex:auto;display:flex}.esri-snapping-controls__container :only-child{border-block-end:none}.esri-snapping-controls__panel{width:320px}.esri-snapping-controls__item{border:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);cursor:pointer;background-color:var(--calcite-color-foreground-1);border-radius:var(--calcite-corner-radius-sm);justify-content:space-between;margin:var(--calcite-spacing-xxs) 0;padding:var(--calcite-spacing-xxs);transition:border-color .125s ease-in-out;display:flex;box-shadow:0 var(--calcite-border-width-sm) var(--calcite-color-border-3)}.esri-snapping-controls__item-action-icon{flex:0 0 var(--calcite-spacing-md);width:var(--calcite-spacing-md);height:var(--calcite-spacing-md);margin-top:calc(var(--calcite-spacing-xxs) / 4);font-size:var(--calcite-font-size-md);display:inline-block}.esri-snapping-controls__action-toggle{opacity:1;cursor:pointer;border:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);flex-flow:row-reverse;justify-content:space-between;align-items:flex-start;width:100%;margin:0;padding:var(--calcite-spacing-sm) var(--calcite-spacing-md);font-size:var(--calcite-font-size--1);transition:opacity .25s ease-in-out .25s,background-color .25s ease-in-out;display:flex}.esri-snapping-controls__action-toggle .esri-snapping-controls__item-action-title{margin-left:0}.esri-snapping-controls__action-toggle .esri-snapping-controls__item-action-icon{background-color:var(--calcite-color-foreground-2);border-radius:var(--calcite-corner-radius-pill);flex:0 0 calc(var(--calcite-spacing-md) + var(--calcite-spacing-xs));width:var(--calcite-spacing-md);height:var(--calcite-spacing-md);padding:0;transition:background-color .125s ease-in-out;position:relative;overflow:hidden;box-shadow:0 0 0 var(--calcite-border-width-sm) var(--calcite-color-border-1)}.esri-snapping-controls__action-toggle .esri-snapping-controls__item-action-icon:before{content:"";background-color:var(--calcite-color-text-3);border-radius:100%;width:var(--calcite-spacing-xs);height:var(--calcite-spacing-xs);margin:calc(var(--calcite-spacing-xxs) / 2);transition:background-color .125s ease-in-out,left .125s ease-in-out;display:block;position:absolute;top:0;left:0;box-shadow:0 0 0 var(--calcite-border-width-sm) var(--calcite-color-foreground-1)}.esri-snapping-controls__action-toggle--on .esri-snapping-controls__item-action-icon{background-color:var(--calcite-color-brand);box-shadow:0 0 0 var(--calcite-border-width-sm) var(--calcite-color-brand)}.esri-snapping-controls__action-toggle--on .esri-snapping-controls__item-action-icon:before{background-color:var(--calcite-color-foreground-1);left:var(--calcite-spacing-xs)}.esri-snapping-controls__nested-container{flex-direction:column;gap:var(--calcite-spacing-sm);display:flex}.esri-snapping-controls__nested-container:not(:empty){padding-top:var(--calcite-spacing-sm);padding-inline-start:var(--calcite-list-item-spacing-indent)}`, l = n(t);
+import { css as l } from "lit";
+const s = l`.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{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__heading{word-break:break-word}.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}calcite-block>.esri-grid-controls{background:0 0;padding:0}.esri-grid-controls{-webkit-user-select:none;user-select:none;padding:var(--arcgis-internal-padding);flex-flow:column wrap;display:flex;calcite-label.esri-labeled-switch__label{margin-block-end:var(--calcite-spacing-sm, .5rem)}}.esri-grid-controls__switch--bordered{border-width:0 0 var(--calcite-spacing-px) 0;border-style:solid;border-color:var(--calcite-color-border-1)}.esri-grid-controls__container{gap:var(--calcite-spacing-sm);flex-direction:column;flex:auto;display:flex}.esri-grid-controls__tilegroup{column-gap:var(--calcite-spacing-sm);align-items:start;display:flex;flex-wrap:wrap}.esri-grid-controls__tile__content{row-gap:var(--calcite-spacing-md);padding:var(--calcite-spacing-md);color:var(--calcite-color-text-2);flex-direction:column;align-items:center;display:flex}.esri-grid-controls__tile__content calcite-label{margin-bottom:calc(0px - var(--calcite-label-margin-bottom, .75rem));font-weight:var(--calcite-font-weight-medium)}.esri-grid-controls__tile{position:relative}.esri-grid-controls__tile:focus-within{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.esri-grid-controls__tile--disabled{opacity:var(--calcite-opacity-disabled)}.esri-grid-controls__tile input[type=radio]{appearance:none;opacity:.001;border:var(--calcite-spacing-px) solid transparent;cursor:pointer;position:absolute;inset:0}.esri-grid-controls__tile input[type=radio]:checked+.esri-grid-controls__tile__content{border:var(--calcite-spacing-px) solid var(--calcite-color-brand)}.esri-grid-controls__tile input[type=radio]+.esri-grid-controls__tile__content{border:var(--calcite-spacing-px) solid transparent}.esri-grid-controls__numeric-inputs__container{gap:var(--calcite-spacing-sm);grid-auto-columns:1fr;grid-auto-flow:column;display:grid}.esri-grid-controls__inline-icon{margin-left:var(--calcite-spacing-xs);vertical-align:top;color:var(--calcite-color-status-warning)}.esri-labeled-switch__label{--calcite-label-margin-bottom: 0}.esri-labeled-switch__label-content{text-wrap:balance;flex:1;align-items:center;gap:7px;display:flex}.esri-labeled-switch__label-content>div{flex-grow:1}.esri-labeled-switch__icon{margin-top:-1px}.esri-labeled-switch__icon_info{color:var(--calcite-color-status-info)}.esri-labeled-switch__icon_warning{color:var(--calcite-color-status-warning)}.esri-labeled-switch__tooltip{text-wrap:wrap}.esri-sketch-tooltip-controls__block{border-block-end:none;margin:0}.esri-sketch-tooltip-controls__block-content{flex-direction:column;gap:6px;display:flex}.esri-sketch-tooltip-controls calcite-label:last-child{--calcite-label-margin-bottom: 0}.esri-snapping-controls__toggle-block{min-width:100%;margin:0}.esri-snapping-controls__layer-list-block{border-bottom:none;min-width:225px}.esri-snapping-controls__layer-list-block[open]{margin-block:0}.esri-snapping-controls__layer-list{overflow:auto}.esri-snapping-controls__layer-list__filter{margin-bottom:10px}.esri-snapping-controls__layer-list__button{margin-bottom:6px}.esri-snapping-controls__layer-list__item calcite-accordion-item calcite-icon,.esri-snapping-controls__layer-list__item calcite-action calcite-icon{margin-inline-start:0}.esri-snapping-controls__layer-list__item calcite-icon{color:var(--calcite-color-brand);margin-inline-start:var(--calcite-list-item-spacing-indent, 1em)}.esri-snapping-controls{flex-flow:column wrap;display:flex}.esri-snapping-controls__container{flex-direction:column;flex:auto;display:flex}.esri-snapping-controls__container :only-child{border-block-end:none}.esri-snapping-controls__panel{width:320px}.esri-snapping-controls__item{border:1px solid #adadad4d;cursor:pointer;background-color:var(--calcite-color-foreground-2);border-color:var(--calcite-color-border-1);border-radius:2px;justify-content:space-between;margin:3px 0;padding:3px;transition:border-color .125s ease-in-out;display:flex;box-shadow:0 1px #adadad4d}.esri-snapping-controls__item-action-icon{flex:0 0 16px;width:16px;height:16px;margin-top:.1em;font-size:var(--calcite-font-size-md);display:inline-block}.esri-snapping-controls__action-toggle{opacity:1;cursor:pointer;border:1px solid var(--calcite-color-border-1);flex-flow:row-reverse;justify-content:space-between;align-items:flex-start;width:100%;margin:0;padding:6px 15px;font-size:var(--calcite-font-size-sm);transition:opacity .25s ease-in-out .25s,background-color .25s ease-in-out;display:flex}.esri-snapping-controls__action-toggle .esri-snapping-controls__item-action-title{margin-left:0}.esri-snapping-controls__action-toggle .esri-snapping-controls__item-action-icon{background-color:var(--calcite-color-foreground-1);border-radius:16px;flex:0 0 28px;width:16px;height:16px;padding:0;transition:background-color .125s ease-in-out;position:relative;overflow:hidden;box-shadow:0 0 0 1px #adadad}.esri-snapping-controls__action-toggle .esri-snapping-controls__item-action-icon:before{content:"";background-color:var(--calcite-color-foreground-2);border-radius:100%;width:12px;height:12px;margin:2px;transition:background-color .125s ease-in-out,left .125s ease-in-out;display:block;position:absolute;top:0;left:0;box-shadow:0 0 0 1px #242424}.esri-snapping-controls__action-toggle--on .esri-snapping-controls__item-action-icon{background-color:var(--calcite-color-foreground-1);box-shadow:0 0 0 1px #adadad}.esri-snapping-controls__action-toggle--on .esri-snapping-controls__item-action-icon:before{background-color:var(--calcite-color-foreground-3);left:12px}.esri-snapping-controls__nested-container{flex-direction:column;gap:6px;display:flex}.esri-snapping-controls__nested-container:not(:empty){padding-top:6px;padding-inline-start:1em}`, a = n(t);
 class c extends r {
   constructor() {
-    super(...arguments), this.widget = l(this), this.viewModel = this.widget.viewModel, this.view = this.widget.view, this.autoDestroyDisabled = !1, this.hideEnabledToggle = this.widget.visibleElements.enabledToggle, this.hideFeatureEnabledToggle = this.widget.visibleElements.featureEnabledToggle, this.hideGridControls = this.widget.visibleElements.gridControls, this.hideGridControlsElementsColorSelection = this.widget.visibleElements.gridControlsElements.colorSelection, this.hideGridControlsElementsDynamicScaleToggle = this.widget.visibleElements.gridControlsElements.dynamicScaleToggle, this.hideGridControlsElementsLineIntervalInput = this.widget.visibleElements.gridControlsElements.lineIntervalInput, this.hideGridControlsElementsNumericInputs = this.widget.visibleElements.gridControlsElements.numericInputs, this.hideGridControlsElementsOutOfScaleWarning = this.widget.visibleElements.gridControlsElements.outOfScaleWarning, this.hideGridControlsElementsPlacementButtons = this.widget.visibleElements.gridControlsElements.placementButtons, this.hideGridControlsElementsRotateWithMapToggle = this.widget.visibleElements.gridControlsElements.rotateWithMapToggle, this.showHeader = this.widget.visibleElements.header, this.showGridControlsElementsGridEnabledToggle = this.widget.visibleElements.gridControlsElements.gridEnabledToggle, this.hideLayerList = this.widget.visibleElements.layerList, this.hideSelfEnabledToggle = this.widget.visibleElements.selfEnabledToggle, this.icon = this.widget.icon, this.label = this.widget.label, this.snappingOptions = this.widget.snappingOptions, this.state = this.viewModel.state, this.arcgisPropertyChange = i()("snappingOptions", "state"), this.arcgisReady = o();
+    super(...arguments), this.widget = a(this), this.viewModel = this.widget.viewModel, this.view = this.widget.view, this.autoDestroyDisabled = !1, this.hideEnabledToggle = this.widget.visibleElements.enabledToggle, this.hideFeatureEnabledToggle = this.widget.visibleElements.featureEnabledToggle, this.hideGridControls = this.widget.visibleElements.gridControls, this.hideGridControlsElementsColorSelection = this.widget.visibleElements.gridControlsElements.colorSelection, this.hideGridControlsElementsDynamicScaleToggle = this.widget.visibleElements.gridControlsElements.dynamicScaleToggle, this.hideGridControlsElementsLineIntervalInput = this.widget.visibleElements.gridControlsElements.lineIntervalInput, this.hideGridControlsElementsNumericInputs = this.widget.visibleElements.gridControlsElements.numericInputs, this.hideGridControlsElementsOutOfScaleWarning = this.widget.visibleElements.gridControlsElements.outOfScaleWarning, this.hideGridControlsElementsPlacementButtons = this.widget.visibleElements.gridControlsElements.placementButtons, this.hideGridControlsElementsRotateWithMapToggle = this.widget.visibleElements.gridControlsElements.rotateWithMapToggle, this.showHeader = this.widget.visibleElements.header, this.showGridControlsElementsGridEnabledToggle = this.widget.visibleElements.gridControlsElements.gridEnabledToggle, this.hideLayerList = this.widget.visibleElements.layerList, this.hideSelfEnabledToggle = this.widget.visibleElements.selfEnabledToggle, this.icon = this.widget.icon, this.label = this.widget.label, this.snappingOptions = this.widget.snappingOptions, this.state = this.viewModel.state, this.arcgisPropertyChange = i()("snappingOptions", "state"), this.arcgisReady = o();
   }
   static {
     this.properties = { view: 0, autoDestroyDisabled: 5, hideEnabledToggle: 5, hideFeatureEnabledToggle: 5, hideGridControls: 5, hideGridControlsElementsColorSelection: 5, hideGridControlsElementsDynamicScaleToggle: 5, hideGridControlsElementsLineIntervalInput: 5, hideGridControlsElementsNumericInputs: 5, hideGridControlsElementsOutOfScaleWarning: 5, hideGridControlsElementsPlacementButtons: 5, hideGridControlsElementsRotateWithMapToggle: 5, showHeader: 5, showGridControlsElementsGridEnabledToggle: 5, hideLayerList: 5, hideSelfEnabledToggle: 5, icon: 1, label: 1, referenceElement: 1, snappingOptions: 0, state: 35 };

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

@@ -1,22 +1,19 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as i } from "../../chunks/runtime.js";
-import { css as r, html as a } from "lit";
-import { LitElement as n, safeStyleMap as l } from "@arcgis/lumina";
-import { t as c } from "../../chunks/screenLocation.js";
-const p = r`:host{display:contents}.root{position:absolute}`;
-class m extends n {
+import { css as n, html as r } from "lit";
+import { LitElement as c, safeStyleMap as l } from "@arcgis/lumina";
+import { t as a } from "../../chunks/screenLocation.js";
+const p = n`:host{display:contents}.root{position:absolute}`;
+class m extends c {
   constructor() {
-    super(...arguments), this.autoDestroyDisabled = !1, this.trackLocation = !1, this.screenLocation = c(this);
+    super(...arguments), this.trackLocation = !1, this.screenLocation = a(this);
   }
   static {
-    this.properties = { autoDestroyDisabled: 5, trackLocation: 5, screenLocation: 32, label: 1, location: 0, view: 0 };
+    this.properties = { trackLocation: 5, screenLocation: 32, label: 1, location: 0, view: 0 };
   }
   static {
     this.styles = p;
   }
-  async destroy() {
-    await this.manager.destroy();
-  }
   _getPositionStyles() {
     const { screenLocation: t, view: s } = this;
     if (s == null || t == null)
@@ -29,7 +26,7 @@ class m extends n {
     };
   }
   render() {
-    return this.screenLocation ? a`<calcite-loader class="root" .label=${this.label ?? ""} inline style=${l(this._getPositionStyles())}></calcite-loader>` : null;
+    return this.screenLocation ? r`<calcite-loader class="root" .label=${this.label ?? ""} inline style=${l(this._getPositionStyles())}></calcite-loader>` : null;
   }
 }
 i("arcgis-spinner", m);

package/dist/components/arcgis-swipe/customElement.d.ts

@@ -1,7 +1,6 @@
 /// <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 Collection from "@arcgis/core/core/Collection.js";
-import type Layer from "@arcgis/core/layers/Layer.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisReferenceElement } from "../types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
@@ -55,7 +54,7 @@ export abstract class ArcgisSwipe extends LitElement {
    * @see [trailingLayers](https://developers.arcgis.com/javascript/latest/references/core/widgets/Swipe/SwipeViewModel/#trailingLayers)
    * @since 5.0
    */
-  accessor endLayers: Collection<Layer>;
+  accessor endLayers: SwipeViewModel["trailingLayers"];
   /**
    * When `true`, the divider between the leading and trailing layers will be hidden.
    *
@@ -85,10 +84,10 @@ export abstract class ArcgisSwipe extends LitElement {
   /**
    * A collection of layers that will show on the left or top side of the Swipe component.
    *
-   * @deprecated since 5.0, use [`startLayers`](#startLayers) instead.
+   * @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: Collection<Layer>;
+  accessor leadingLayers: SwipeViewModel["leadingLayers"];
   /**
    * Replace localized message strings with your own strings.
    *
@@ -108,7 +107,7 @@ export abstract class ArcgisSwipe extends LitElement {
   }>;
   /**
    * The position of the Swipe component. This determines what percentage
-   * of the view will be taken up by the [startLayers](#startLayers).
+   * 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
@@ -126,7 +125,7 @@ export abstract class ArcgisSwipe extends LitElement {
    * @see [leadingLayers](https://developers.arcgis.com/javascript/latest/references/core/widgets/Swipe/SwipeViewModel/#leadingLayers)
    * @since 5.0
    */
-  accessor startLayers: Collection<Layer>;
+  accessor startLayers: SwipeViewModel["leadingLayers"];
   /**
    * The current state of the component.
    *
@@ -135,19 +134,19 @@ export abstract class ArcgisSwipe extends LitElement {
   get state(): State;
   /**
    * The position of the Swipe component. This determines what percentage
-   * of the view will be taken up by the [startLayers](#startLayers).
+   * 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`](#position) instead.
+   * @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`](#endLayers) instead.
+   * @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: Collection<Layer>;
+  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.

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

@@ -3,21 +3,21 @@ import { c as x } from "../../chunks/runtime.js";
 import { css as _, html as d } from "lit";
 import { classes as g } from "@arcgis/toolkit/dom";
 import C from "@arcgis/core/widgets/Swipe/SwipeViewModel.js";
-import { LitElement as D, createEvent as v, safeClassMap as u, safeStyleMap as w, nothing as L } from "@arcgis/lumina";
-import { usePropertyChange as P } from "@arcgis/lumina/controllers";
-import { createRef as $, ref as M } from "lit/directives/ref.js";
+import { LitElement as L, createEvent as v, safeClassMap as u, safeStyleMap as w, nothing as D } from "@arcgis/lumina";
+import { usePropertyChange as M } from "@arcgis/lumina/controllers";
+import { createRef as P, ref as $ } from "lit/directives/ref.js";
 import { u as K } from "../../chunks/useT9n.js";
 import { m as A } from "../../chunks/useViewModel.js";
 import { g as m } from "../../chunks/globalCss.js";
 import { l as b } from "../../chunks/legacyIcon.js";
 const S = _`:host{position:absolute;margin:0;background:transparent!important;padding:0;width:100%;height:100%;overflow:hidden;user-select:none;--arcgis-internal-swipe-handle-color-background: var(--calcite-color-background);--arcgis-internal-swipe-divider-color-background: var(--calcite-color-background)}.root{width:100%;height:100%;overflow:hidden;user-select:none}.root,.arcgis-ui .root{pointer-events:none!important}.container{position:absolute;z-index:1;margin:0;outline:0;border:0;padding:0;overflow:hidden;pointer-events:auto;touch-action:none;outline-color:transparent}.horizontal .container{margin-left:calc(var(--calcite-spacing-xxxl) / 2 * -1);cursor:col-resize;height:100%}.vertical .container{margin-top:calc(var(--calcite-spacing-xxxl) / 2 * -1);cursor:row-resize;width:100%}.disabled .container{cursor:default;pointer-events:none}.divider{position:absolute;background-color:var(--arcgis-internal-swipe-divider-color-background)}.horizontal .divider{top:0;left:calc(var(--calcite-spacing-xxxl) / 2);margin-left:calc(var(--calcite-border-width-lg) * .5 * -1);border-right:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);border-left:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);width:var(--calcite-border-width-lg);height:100%}.vertical .divider{top:calc(var(--calcite-spacing-xxxl) / 2);left:0;margin-top:calc(var(--calcite-border-width-lg) * .5 * -1);border-top:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);border-bottom:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);width:100%;height:var(--calcite-border-width-lg)}.handle{display:flex;position:relative;align-items:center;justify-content:center;border:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);border-radius:var(--calcite-corner-radius-round);background-color:var(--arcgis-internal-swipe-handle-color-background);width:var(--calcite-spacing-xxxl);height:var(--calcite-spacing-xxxl);color:var(--calcite-color-text-3)}.handle-hidden{visibility:hidden}.vertical .handle{rotate:90deg}.handle-icon{position:relative;z-index:2}.handle-icon:before{content:"|||";color:inherit}.horizontal .handle{top:calc(50% - calc(var(--calcite-spacing-xxxl) / 2))}.vertical .handle{left:calc(50% - calc(var(--calcite-spacing-xxxl) / 2))}.container:focus .handle,.container:focus .divider{outline:inset 2px var(--calcite-color-focus, var(--calcite-color-focus, var(--calcite-color-brand)))}.container:focus .handle{outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}`, k = A(C);
-class z extends D {
+class z extends L {
   constructor() {
-    super(...arguments), this._container = null, this._containerRef = $(), this._swiping = !1, this._positionChanged = !1, this.messages = K({}), this._pointerOffset = 0, this.viewModel = k(this), this._onContainerPointerDown = (i) => {
-      i.preventDefault();
-      const { _container: e } = this;
-      e && document.activeElement !== this.el && e.focus(), this._swiping = !0, this._calculatePointerOffset(i);
-    }, this.view = this.viewModel.view, this.autoDestroyDisabled = !1, this.direction = this.viewModel.direction, this.disabled = !1, this.endLayers = this.viewModel.trailingLayers, this.hideDivider = !1, this.hideHandle = !1, this.icon = "compare", this.label = this.messages.componentLabel, this.position = this.viewModel.position, this.startLayers = this.viewModel.leadingLayers, this.state = this.viewModel.state, this.arcgisPropertyChange = P()("state"), this.arcgisReady = v(), this.arcgisSwipeChange = v(), this.arcgisSwipeInput = v();
+    super(...arguments), this._container = null, this._containerRef = P(), this._swiping = !1, this._positionChanged = !1, this.messages = K({}), this._pointerOffset = 0, this.viewModel = k(this), this._onContainerPointerDown = (e) => {
+      e.preventDefault();
+      const { _container: i } = this;
+      i && document.activeElement !== this.el && i.focus(), this._swiping = !0, this._calculatePointerOffset(e);
+    }, this.view = this.viewModel.view, this.autoDestroyDisabled = !1, this.direction = this.viewModel.direction, this.disabled = !1, this.hideDivider = !1, this.hideHandle = !1, this.icon = "compare", this.label = this.messages.componentLabel, this.position = this.viewModel.position, this.state = this.viewModel.state, this.arcgisPropertyChange = M()("state"), this.arcgisReady = v(), this.arcgisSwipeChange = v(), this.arcgisSwipeInput = v();
   }
   static {
     this.properties = { view: 0, autoDestroyDisabled: 5, direction: 3, disabled: 7, endLayers: 0, hideDivider: 7, hideHandle: 7, icon: 1, label: 1, leadingLayers: 0, messageOverrides: 0, position: 9, startLayers: 0, swipePosition: 9, referenceElement: 1, state: 32, trailingLayers: 0 };
@@ -25,23 +25,35 @@ class z extends D {
   static {
     this.styles = S;
   }
+  get endLayers() {
+    return this.viewModel.trailingLayers;
+  }
+  set endLayers(e) {
+    this.viewModel.trailingLayers = e;
+  }
   get leadingLayers() {
     return this.startLayers;
   }
-  set leadingLayers(i) {
-    this.startLayers = i;
+  set leadingLayers(e) {
+    this.startLayers = e;
+  }
+  get startLayers() {
+    return this.viewModel.leadingLayers;
+  }
+  set startLayers(e) {
+    this.viewModel.leadingLayers = e;
   }
   get swipePosition() {
     return this.position;
   }
-  set swipePosition(i) {
-    this.position = i;
+  set swipePosition(e) {
+    this.position = e;
   }
   get trailingLayers() {
     return this.endLayers;
   }
-  set trailingLayers(i) {
-    this.endLayers = i;
+  set trailingLayers(e) {
+    this.endLayers = e;
   }
   async destroy() {
     await this.manager.destroy();
@@ -49,50 +61,50 @@ class z extends D {
   loaded() {
     this.listenOn(document, "pointermove", this._onContainerPointerMove), this.listenOn(document, "pointerup", this._onContainerPointerUp);
   }
-  _calculatePointerOffset(i) {
-    const { direction: e } = this, t = this._containerRef.value, r = (e === "vertical" ? t.clientHeight : t.clientWidth) / 2, o = t.getBoundingClientRect(), n = i.clientX - o.left, c = i.clientY - o.top;
-    this._pointerOffset = e === "vertical" ? c - r : n - r;
+  _calculatePointerOffset(e) {
+    const { direction: i } = this, t = this._containerRef.value, r = (i === "vertical" ? t.clientHeight : t.clientWidth) / 2, o = t.getBoundingClientRect(), n = e.clientX - o.left, c = e.clientY - o.top;
+    this._pointerOffset = i === "vertical" ? c - r : n - r;
   }
-  _onContainerPointerUp(i) {
-    this._swiping && (i.preventDefault(), this._positionChanged && (this.arcgisSwipeChange.emit(), this._positionChanged = !1), this._swiping = !1);
+  _onContainerPointerUp(e) {
+    this._swiping && (e.preventDefault(), this._positionChanged && (this.arcgisSwipeChange.emit(), this._positionChanged = !1), this._swiping = !1);
   }
-  _onContainerPointerMove(i) {
+  _onContainerPointerMove(e) {
     if (!this._swiping)
       return;
-    i.preventDefault();
-    const { _pointerOffset: e, el: t, direction: r } = this, { clientX: o, clientY: n } = i, { top: c, left: s, width: a, height: l } = t.getBoundingClientRect(), f = r === "vertical" ? l : a, h = (r === "vertical" ? n - c - e : o - s - e) / f * 100;
+    e.preventDefault();
+    const { _pointerOffset: i, el: t, direction: r } = this, { clientX: o, clientY: n } = e, { top: c, left: s, width: a, height: l } = t.getBoundingClientRect(), f = r === "vertical" ? l : a, h = (r === "vertical" ? n - c - i : o - s - i) / f * 100;
     this.position !== h && (this.position = h, this._positionChanged = !0, this.arcgisSwipeInput.emit());
   }
-  _getKeyPosition(i) {
-    const { key: e } = i, { position: t } = this, { max: r, min: o, step: n, stepMultiplier: c, direction: s } = this.viewModel, a = n * c;
-    if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"].includes(e) && (i.preventDefault(), i.stopPropagation()), s === "vertical" ? e === "ArrowDown" || e === "ArrowRight" : e === "ArrowUp" || e === "ArrowRight") {
-      const p = i.shiftKey ? a : n;
+  _getKeyPosition(e) {
+    const { key: i } = e, { position: t } = this, { max: r, min: o, step: n, stepMultiplier: c, direction: s } = this.viewModel, a = n * c;
+    if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"].includes(i) && (e.preventDefault(), e.stopPropagation()), s === "vertical" ? i === "ArrowDown" || i === "ArrowRight" : i === "ArrowUp" || i === "ArrowRight") {
+      const p = e.shiftKey ? a : n;
       return t + p;
     }
-    if (s === "vertical" ? e === "ArrowUp" || e === "ArrowLeft" : e === "ArrowDown" || e === "ArrowLeft") {
-      const p = i.shiftKey ? a : n;
+    if (s === "vertical" ? i === "ArrowUp" || i === "ArrowLeft" : i === "ArrowDown" || i === "ArrowLeft") {
+      const p = e.shiftKey ? a : n;
       return t - p;
     }
-    return e === "Home" ? o : e === "End" ? r : (s === "vertical" ? e === "PageDown" : e === "PageUp") ? t + a : (s === "vertical" ? e === "PageUp" : e === "PageDown") ? t - a : null;
+    return i === "Home" ? o : i === "End" ? r : (s === "vertical" ? i === "PageDown" : i === "PageUp") ? t + a : (s === "vertical" ? i === "PageUp" : i === "PageDown") ? t - a : null;
   }
-  _onContainerKeyDown(i) {
-    const e = this._getKeyPosition(i);
-    typeof e == "number" && this.position !== e && (this.position = e, this.arcgisSwipeInput.emit(), this.arcgisSwipeChange.emit());
+  _onContainerKeyDown(e) {
+    const i = this._getKeyPosition(e);
+    typeof i == "number" && this.position !== i && (this.position = i, this.arcgisSwipeInput.emit(), this.arcgisSwipeChange.emit());
   }
   render() {
-    const { state: i, direction: e } = this.viewModel, t = i === "disabled" || this.disabled, r = {
+    const { state: e, direction: i } = this.viewModel, t = e === "disabled" || this.disabled, r = {
       [m.disabled]: t,
       disabled: t,
-      vertical: e === "vertical",
-      horizontal: e === "horizontal"
+      vertical: i === "vertical",
+      horizontal: i === "horizontal"
     };
-    return d`<div class=${u(g("root", m.widget, r))}>${i === "disabled" ? null : this._renderContainer()}</div>`;
+    return d`<div class=${u(g("root", m.widget, r))}>${e === "disabled" ? null : this._renderContainer()}</div>`;
   }
   _renderHandle() {
-    const { direction: i } = this.viewModel, { hideHandle: e } = this, t = {
-      [b.dragHorizontal]: i === "vertical",
-      [b.dragVertical]: i === "horizontal"
-    }, r = g("handle", !!e && "handle-hidden");
+    const { direction: e } = this.viewModel, { hideHandle: i } = this, t = {
+      [b.dragHorizontal]: e === "vertical",
+      [b.dragVertical]: e === "horizontal"
+    }, r = g("handle", !!i && "handle-hidden");
     return d`<div class=${u(r)} role=presentation><span aria-hidden=true class=${u(g("handle-icon", t))}></span></div>`;
   }
   _renderDivider() {
@@ -102,11 +114,11 @@ class z extends D {
     return [this._renderDivider(), this._renderHandle()];
   }
   _renderContainer() {
-    const { disabled: i, viewModel: e } = this, { max: t, min: r, direction: o, position: n } = e, c = this.label ?? this.messages.dragLabel ?? "", s = `${n}%`, a = {
+    const { disabled: e, viewModel: i } = this, { max: t, min: r, direction: o, position: n } = i, c = this.label ?? this.messages.dragLabel ?? "", s = `${n}%`, a = {
       top: o === "vertical" ? s : void 0,
       left: o === "vertical" ? void 0 : s
     }, l = this._renderContent();
-    return i ? d`<div class="container" role=presentation style=${w(a)}>${l}</div>` : d`<div @pointerdown=${this._onContainerPointerDown} .ariaLabel=${c} .ariaOrientation=${o} .ariaValueMax=${`${t}`} .ariaValueMin=${`${r}`} .ariaValueNow=${`${n}`} .ariaValueText=${s} class="container" @keydown=${this._onContainerKeyDown} role=slider style=${w(a)} tabindex=0 title=${c ?? L} touch-action=none ${M(this._containerRef)}>${l}</div>`;
+    return e ? d`<div class="container" role=presentation style=${w(a)}>${l}</div>` : d`<div @pointerdown=${this._onContainerPointerDown} .ariaLabel=${c} .ariaOrientation=${o} .ariaValueMax=${`${t}`} .ariaValueMin=${`${r}`} .ariaValueNow=${`${n}`} .ariaValueText=${s} class="container" @keydown=${this._onContainerKeyDown} role=slider style=${w(a)} tabindex=0 title=${c ?? D} touch-action=none ${$(this._containerRef)}>${l}</div>`;
   }
 }
 x("arcgis-swipe", z);