@arcgis/map-components 4.31.0-next.98 → 4.32.0-next.2

package/dist/components/arcgis-navigation-toggle/customElement.d.ts

@@ -0,0 +1,58 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+import { ArcgisReferenceElement } from '../../utils/component-utils';
+import { Use } from '@arcgis/components-controllers';
+import { Nil } from '@arcgis/components-utils';
+import { PublicLitElement as LitElement } from '@arcgis/lumina';
+
+declare const useNavigationToggleWidget: (component: import('@arcgis/components-controllers').StencilLifecycles & {
+    manager: import('@arcgis/components-controllers').ControllerManager<never>;
+    el: HTMLElement;
+    autoDestroyDisabled?: boolean | undefined;
+    destroy?: (() => Promise<void>) | undefined;
+} & Pick<__esri.NavigationToggle, "label" | "viewModel" | "icon" | "layout"> & {
+    reactiveUtils?: __esri.reactiveUtils | undefined;
+    state?: unknown;
+    viewModel?: __esri.NavigationToggleViewModel | undefined;
+    icon: string | Nil;
+    label: string | Nil;
+    referenceElement: string | Nil | ArcgisReferenceElement;
+    position: __esri.UIPosition;
+    arcgisReady: import('@arcgis/components-controllers').EventEmitter;
+    arcgisPropertyChange: import('@arcgis/components-controllers').EventEmitter<{
+        name: string;
+    }> | undefined;
+    el: HTMLElement & {
+        childElem?: (HTMLElement & {
+            ownedBy?: HTMLElement | undefined;
+        }) | undefined;
+        view?: __esri.MapView | Nil | __esri.SceneView;
+    };
+    autoDestroyDisabled: boolean;
+    destroy: () => Promise<void>;
+}, options?: {
+    editConstructorProperties(props: __esri.NavigationToggleProperties): __esri.NavigationToggleProperties | Promise<__esri.NavigationToggleProperties>;
+} | undefined) => __esri.NavigationToggle;
+export declare class ArcgisNavigationToggle extends LitElement implements Use<typeof useNavigationToggleWidget> {
+    /**
+     * 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 temporary hide it. If this
+     * is set, make sure to call the \`destroy\` method when you are done to prevent
+     * memory leaks.
+     */
+    autoDestroyDisabled: boolean;
+    icon: string;
+    label: string;
+    layout: "horizontal" | "vertical";
+    position: __esri.UIPosition;
+    referenceElement: ArcgisReferenceElement | Nil | string;
+    readonly state: "ready" | "disabled";
+    /** Permanently destroy the component */
+    destroy(): Promise<void>;
+    toggle(): Promise<void>;
+    readonly arcgisPropertyChange: CustomEvent<{
+        name: "state" | "layout";
+    }>;
+    readonly arcgisReady: CustomEvent<undefined>;
+}
+export {};

package/dist/components/arcgis-navigation-toggle/customElement.js

@@ -0,0 +1,35 @@
+import { c as t } from "../../chunks/runtime.js";
+import { t as e } from "../../chunks/index.js";
+import { usePropertyChange as i } from "@arcgis/components-controllers";
+import { m as o } from "../../chunks/useWidget.js";
+import { LitElement as s, createEvent as a, noShadowRoot as r } from "@arcgis/lumina";
+/*!
+ * All material copyright Esri, All Rights Reserved, unless otherwise specified.
+ * See https://js.arcgis.com/4.32/esri/copyright.txt for details.
+ * v4.32.0-next.2
+*/
+const g = o(e);
+class l extends s {
+  constructor() {
+    super(...arguments), this.widget = g(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.icon = this.widget.icon, this.label = this.widget.label, this.layout = this.widget.layout, this.position = "bottom-left", this.state = this.viewModel.state, this.arcgisPropertyChange = i()("layout", "state"), this.arcgisReady = a();
+  }
+  static {
+    this.properties = { autoDestroyDisabled: 5, icon: 1, label: 1, layout: 3, position: 1, referenceElement: 1, state: 3 };
+  }
+  static {
+    this.shadowRootOptions = r;
+  }
+  // #endregion
+  // #region Public Methods
+  /** Permanently destroy the component */
+  async destroy() {
+    await this.manager.destroy();
+  }
+  async toggle() {
+    this.widget?.toggle();
+  }
+}
+t("arcgis-navigation-toggle", l);
+export {
+  l as ArcgisNavigationToggle
+};

package/dist/components/arcgis-navigation-toggle/index.d.ts

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

package/dist/components/arcgis-navigation-toggle/index.js

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

package/dist/components/arcgis-oriented-imagery-viewer/customElement.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+import { Use } from '@arcgis/components-controllers';
+import { Nil } from '@arcgis/components-utils';
+import { default as OrientedImageryViewer } from '@arcgis/core/widgets/OrientedImageryViewer';
+import { PublicLitElement as LitElement } from '@arcgis/lumina';
+import { ArcgisReferenceElement } from '../../utils/component-utils';
+import { PropertyValues } from 'lit';
+
+export type OrientedImageryViewerWidget = InstanceType<typeof OrientedImageryViewer>;
+declare const useOrientedImageryViewerWidget: (component: import('@arcgis/components-controllers').StencilLifecycles & {
+    manager: import('@arcgis/components-controllers').ControllerManager<never>;
+    el: HTMLElement;
+    autoDestroyDisabled?: boolean | undefined;
+    destroy?: (() => Promise<void>) | undefined;
+} & Pick<OrientedImageryViewer, "label" | "viewModel" | "icon" | "disabled" | "layer" | "currentCoverageVisible" | "galleryOpened" | "imageEnhancementToolActive" | "isAdditionalCoverageVisible" | "isAdditionalPointSourcesVisible" | "mapImageConversionToolState" | "navigationToolActive"> & {
+    reactiveUtils?: __esri.reactiveUtils | undefined;
+    state?: unknown;
+    viewModel?: __esri.OrientedImageryViewerViewModel | undefined;
+    icon: string | Nil;
+    label: string | Nil;
+    referenceElement: string | Nil | ArcgisReferenceElement;
+    position: __esri.UIPosition;
+    arcgisReady: import('@arcgis/components-controllers').EventEmitter;
+    arcgisPropertyChange: import('@arcgis/components-controllers').EventEmitter<{
+        name: string;
+    }> | undefined;
+    el: HTMLElement & {
+        childElem?: (HTMLElement & {
+            ownedBy?: HTMLElement | undefined;
+        }) | undefined;
+        view?: __esri.MapView | Nil | __esri.SceneView;
+    };
+    autoDestroyDisabled: boolean;
+    destroy: () => Promise<void>;
+}, options?: {
+    editConstructorProperties(props: __esri.OrientedImageryViewerProperties): __esri.OrientedImageryViewerProperties | Promise<__esri.OrientedImageryViewerProperties>;
+} | undefined) => OrientedImageryViewer;
+export declare class ArcgisOrientedImageryViewer extends LitElement implements Use<typeof useOrientedImageryViewerWidget> {
+    /**
+     * 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 temporary hide it. If this
+     * is set, make sure to call the \`destroy\` method when you are done to prevent
+     * memory leaks.
+     */
+    autoDestroyDisabled: boolean;
+    currentCoverageVisible: boolean;
+    disabled: boolean;
+    galleryOpened: boolean;
+    icon: string;
+    imageEnhancementToolActive: boolean;
+    readonly imageGalleryEnabled: boolean;
+    isAdditionalCoverageVisible: boolean;
+    isAdditionalPointSourcesVisible: boolean;
+    label: string;
+    layer: __esri.OrientedImageryLayer;
+    mapImageConversionToolState: boolean;
+    navigationToolActive: boolean;
+    orientedImageryLayerItemId?: string;
+    position: __esri.UIPosition;
+    referenceElement: ArcgisReferenceElement | Nil | string;
+    readonly referencePoint: __esri.Point;
+    /** Permanently destroy the component */
+    destroy(): Promise<void>;
+    readonly arcgisPropertyChange: CustomEvent<{
+        name: "layer" | "imageGalleryEnabled";
+    }>;
+    readonly arcgisReady: CustomEvent<undefined>;
+}
+export {};

package/dist/components/arcgis-oriented-imagery-viewer/customElement.js

@@ -0,0 +1,51 @@
+import { c as a } from "../../chunks/runtime.js";
+import { usePropertyChange as s } from "@arcgis/components-controllers";
+import { r, s as o } from "../../chunks/index.js";
+import { m as d } from "../../chunks/useWidget.js";
+import { LitElement as n, createEvent as l, noShadowRoot as h } from "@arcgis/lumina";
+/*!
+ * All material copyright Esri, All Rights Reserved, unless otherwise specified.
+ * See https://js.arcgis.com/4.32/esri/copyright.txt for details.
+ * v4.32.0-next.2
+*/
+const g = d(o);
+class m extends n {
+  constructor() {
+    super(...arguments), this.widget = g(this), this._hasOrientedImageryLayerToAdd = !1, this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.currentCoverageVisible = this.widget.currentCoverageVisible, this.disabled = this.widget.disabled, this.galleryOpened = this.widget.galleryOpened, this.icon = this.widget.icon, this.imageEnhancementToolActive = this.widget.imageEnhancementToolActive, this.imageGalleryEnabled = this.widget.imageGalleryEnabled, this.isAdditionalCoverageVisible = this.widget.isAdditionalCoverageVisible, this.isAdditionalPointSourcesVisible = this.widget.isAdditionalPointSourcesVisible, this.label = this.widget.label, this.layer = this.widget.layer, this.mapImageConversionToolState = this.widget.mapImageConversionToolState, this.navigationToolActive = this.widget.navigationToolActive, this.position = "bottom-left", this.referencePoint = this.widget.referencePoint, this.arcgisPropertyChange = s()("imageGalleryEnabled", "layer"), this.arcgisReady = l();
+  }
+  static {
+    this.properties = { autoDestroyDisabled: 5, currentCoverageVisible: 5, disabled: 5, galleryOpened: 5, icon: 1, imageEnhancementToolActive: 5, imageGalleryEnabled: 4, isAdditionalCoverageVisible: 5, isAdditionalPointSourcesVisible: 5, label: 1, layer: 0, mapImageConversionToolState: 5, navigationToolActive: 5, orientedImageryLayerItemId: 1, position: 1, referenceElement: 1, referencePoint: 0 };
+  }
+  static {
+    this.shadowRootOptions = h;
+  }
+  // #endregion
+  // #region Public Methods
+  /** Permanently destroy the component */
+  async destroy() {
+    await this.manager.destroy();
+  }
+  // #endregion
+  // #region Lifecycle
+  willUpdate(i) {
+    if (i.has("orientedImageryLayerItemId")) {
+      const e = this.orientedImageryLayerItemId;
+      e && this.widget && r({
+        portalItem: {
+          id: e
+        }
+      }).then((t) => {
+        this.layer = t, this.widget.view ? this.widget.view.map.add(this.layer) : this._hasOrientedImageryLayerToAdd = !0;
+      }).catch(console.error);
+    }
+  }
+  loaded() {
+    this._hasOrientedImageryLayerToAdd && (this.widget.view ? (this.widget.view?.map.add(this.layer), this._hasOrientedImageryLayerToAdd = !1) : this.el.addEventListener("arcgisReady", () => {
+      this.widget.view.map.add(this.layer), this._hasOrientedImageryLayerToAdd = !1;
+    }, { once: !0 }));
+  }
+}
+a("arcgis-oriented-imagery-viewer", m);
+export {
+  m as ArcgisOrientedImageryViewer
+};

package/dist/components/arcgis-oriented-imagery-viewer/index.d.ts

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

package/dist/components/arcgis-oriented-imagery-viewer/index.js

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

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

@@ -0,0 +1,11 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+import { ArcgisReferenceElement, WidgetOrMapComponent } from '../../utils/component-utils';
+import { Nil } from '@arcgis/components-utils';
+import { PropertyValues } from 'lit';
+import { ToElement, PublicLitElement as LitElement } from '@arcgis/lumina';
+
+export declare class ArcgisPlacement extends LitElement implements WidgetOrMapComponent {
+    position: __esri.UIPosition;
+    referenceElement: ArcgisReferenceElement | Nil | string;
+    readonly arcgisReady: CustomEvent<undefined>;
+}

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

@@ -0,0 +1,58 @@
+import { c as t } from "../../chunks/runtime.js";
+import { r as i, d as s, a as l } from "../../chunks/component-utils.js";
+import { LitElement as r, createEvent as o, noShadowRoot as n } from "@arcgis/lumina";
+import { css as c } from "@lit/reactive-element/css-tag.js";
+/*!
+ * All material copyright Esri, All Rights Reserved, unless otherwise specified.
+ * See https://js.arcgis.com/4.32/esri/copyright.txt for details.
+ * v4.32.0-next.2
+*/
+const h = c`arcgis-placement{display:flex;pointer-events:auto;box-shadow:none}.arcgis-placement__container{display:flex}`;
+class a extends r {
+  // #endregion
+  // #region Lifecycle
+  constructor() {
+    super(), this._observer = void 0, this.position = "bottom-left", this.arcgisReady = o(), this._moveChildren = () => {
+      if (this.el.childElem.parentElement !== this.el)
+        for (let e = this.el.firstElementChild; e !== null; e = this.el.firstElementChild)
+          this.el.childElem.append(e);
+    }, this.el.childElem = document.createElement("div"), this.el.childElem.classList.add("arcgis-placement__container"), this.listen("arcgisReady", this._startObserving, { once: !0 });
+  }
+  static {
+    this.properties = { position: 1, referenceElement: 1 };
+  }
+  static {
+    this.shadowRootOptions = n;
+  }
+  static {
+    this.styles = h;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.el.view && this._startObserving();
+  }
+  willUpdate(e) {
+    e.has("referenceElement") && i(this, this.referenceElement), e.has("position") && this.el.childElem && this.position !== void 0 && this.el.view?.ui.move(this.el.childElem, this.position);
+  }
+  loaded() {
+    s(this), l(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.el.childElem && this.el.view?.ui?.remove(this.el.childElem), this._observer?.disconnect();
+  }
+  // #endregion
+  // #region Private Methods
+  /**
+   * We only call this method once the view property is set. Because when that
+   * happens, the childElem contains is already attached to it's final
+   * destination. This is important as we don't want to call _moveChildren()
+   * prematurely (triggering needless disconnect & connect for them, and maybe
+   * even destroy()).
+   */
+  _startObserving() {
+    this._moveChildren(), this._observer = new MutationObserver(this._moveChildren), this._observer.observe(this.el, { childList: !0 });
+  }
+}
+t("arcgis-placement", a);
+export {
+  a as ArcgisPlacement
+};

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

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

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

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

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

@@ -0,0 +1,69 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+import { ArcgisReferenceElement } from '../../utils/component-utils';
+import { Use } from '@arcgis/components-controllers';
+import { Nil } from '@arcgis/components-utils';
+import { PublicLitElement as LitElement } from '@arcgis/lumina';
+
+declare const usePrintWidget: (component: import('@arcgis/components-controllers').StencilLifecycles & {
+    manager: import('@arcgis/components-controllers').ControllerManager<never>;
+    el: HTMLElement;
+    autoDestroyDisabled?: boolean | undefined;
+    destroy?: (() => Promise<void>) | undefined;
+} & Pick<__esri.Print, "label" | "viewModel" | "icon" | "headingLevel" | "portal" | "allowedFormats" | "allowedLayouts" | "exportedLinks" | "extraParameters" | "printServiceUrl" | "showPrintAreaEnabled" | "templateCustomTextElements" | "templateOptions"> & {
+    reactiveUtils?: __esri.reactiveUtils | undefined;
+    state?: unknown;
+    viewModel?: __esri.PrintViewModel | undefined;
+    icon: string | Nil;
+    label: string | Nil;
+    referenceElement: string | Nil | ArcgisReferenceElement;
+    position: __esri.UIPosition;
+    arcgisReady: import('@arcgis/components-controllers').EventEmitter;
+    arcgisPropertyChange: import('@arcgis/components-controllers').EventEmitter<{
+        name: string;
+    }> | undefined;
+    el: HTMLElement & {
+        childElem?: (HTMLElement & {
+            ownedBy?: HTMLElement | undefined;
+        }) | undefined;
+        view?: __esri.MapView | Nil | __esri.SceneView;
+    };
+    autoDestroyDisabled: boolean;
+    destroy: () => Promise<void>;
+}, options?: {
+    editConstructorProperties(props: __esri.PrintProperties): __esri.PrintProperties | Promise<__esri.PrintProperties>;
+} | undefined) => __esri.Print;
+export declare class ArcgisPrint extends LitElement implements Use<typeof usePrintWidget> {
+    allowedFormats: string | string[];
+    allowedLayouts: string | string[];
+    /**
+     * 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 temporary hide it. If this
+     * is set, make sure to call the \`destroy\` method when you are done to prevent
+     * memory leaks.
+     */
+    autoDestroyDisabled: boolean;
+    exportedLinks: __esri.Collection<__esri.FileLink>;
+    extraParameters: any;
+    headingLevel: number;
+    icon: string;
+    includeDefaultTemplatesDisabled: boolean;
+    label: string;
+    portal: __esri.Portal;
+    position: __esri.UIPosition;
+    printServiceUrl: string;
+    referenceElement: ArcgisReferenceElement | Nil | string;
+    showPrintAreaEnabled: boolean;
+    readonly state: "ready" | "disabled" | "error" | "initializing";
+    templateCustomTextElements: any[];
+    templateOptions: __esri.TemplateOptions;
+    /** Permanently destroy the component */
+    destroy(): Promise<void>;
+    readonly arcgisComplete: CustomEvent<__esri.PrintCompleteEvent>;
+    readonly arcgisPropertyChange: CustomEvent<{
+        name: "state";
+    }>;
+    readonly arcgisReady: CustomEvent<undefined>;
+    readonly arcgisSubmit: CustomEvent<__esri.PrintSubmitEvent>;
+}
+export {};

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

@@ -0,0 +1,33 @@
+import { c as i } from "../../chunks/runtime.js";
+import { q as s } from "../../chunks/index.js";
+import { usePropertyChange as r } from "@arcgis/components-controllers";
+import { m as o } from "../../chunks/useWidget.js";
+import { LitElement as a, createEvent as l, noShadowRoot as n } from "@arcgis/lumina";
+import { reEmitEvent as e } from "@arcgis/components-controllers/accessor";
+/*!
+ * All material copyright Esri, All Rights Reserved, unless otherwise specified.
+ * See https://js.arcgis.com/4.32/esri/copyright.txt for details.
+ * v4.32.0-next.2
+*/
+const h = o(s);
+class d extends a {
+  constructor() {
+    super(...arguments), this.widget = h(this), this.viewModel = this.widget.viewModel, this.allowedFormats = this.widget.allowedFormats, this.allowedLayouts = this.widget.allowedLayouts, this.autoDestroyDisabled = !1, this.exportedLinks = this.widget.exportedLinks, this.extraParameters = this.widget.extraParameters, this.headingLevel = this.widget.headingLevel, this.icon = this.widget.icon, this.includeDefaultTemplatesDisabled = this.widget.includeDefaultTemplates, this.label = this.widget.label, this.portal = this.widget.portal, this.position = "bottom-left", this.printServiceUrl = this.widget.printServiceUrl, this.showPrintAreaEnabled = this.widget.showPrintAreaEnabled, this.state = this.viewModel.state, this.templateCustomTextElements = this.widget.templateCustomTextElements, this.templateOptions = this.widget.templateOptions, this.arcgisComplete = e(() => this.widget, "complete"), this.arcgisPropertyChange = r()("state"), this.arcgisReady = l(), this.arcgisSubmit = e(() => this.widget, "submit");
+  }
+  static {
+    this.properties = { allowedFormats: [1, { converter: (t) => typeof t == "string" && t !== "all" ? t.split(",") : t }], allowedLayouts: [1, { converter: (t) => typeof t == "string" && t !== "all" ? t.split(",") : t }], autoDestroyDisabled: 5, exportedLinks: 0, extraParameters: 0, headingLevel: 9, icon: 1, includeDefaultTemplatesDisabled: 5, label: 1, portal: 0, position: 1, printServiceUrl: 1, referenceElement: 1, showPrintAreaEnabled: 7, state: 3, templateCustomTextElements: 0, templateOptions: 0 };
+  }
+  static {
+    this.shadowRootOptions = n;
+  }
+  // #endregion
+  // #region Public Methods
+  /** Permanently destroy the component */
+  async destroy() {
+    await this.manager.destroy();
+  }
+}
+i("arcgis-print", d);
+export {
+  d as ArcgisPrint
+};

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

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

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

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

package/dist/components/arcgis-scale-bar/customElement.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+import { ArcgisReferenceElement } from '../../utils/component-utils';
+import { Nil } from '@arcgis/components-utils';
+import { Use } from '@arcgis/components-controllers';
+import { MeasurementSystem } from '../types';
+import { JsxNode, PublicLitElement as LitElement } from '@arcgis/lumina';
+
+type ScaleBarStyle = "line" | "ruler";
+type ScaleBarUnit = MeasurementSystem | "dual";
+declare const useScaleBarViewModel: (component: import('@arcgis/components-controllers').StencilLifecycles & {
+    manager: import('@arcgis/components-controllers').ControllerManager<never>;
+    el: HTMLElement;
+    autoDestroyDisabled?: boolean | undefined;
+    destroy?: (() => Promise<void>) | undefined;
+} & Pick<__esri.ScaleBarViewModel, never> & {
+    reactiveUtils?: __esri.reactiveUtils | undefined;
+    state?: "ready" | "disabled" | undefined;
+    icon: string | Nil;
+    label: string | Nil;
+    referenceElement: string | Nil | ArcgisReferenceElement;
+    arcgisReady: import('@arcgis/components-controllers').EventEmitter;
+    position: __esri.UIPosition;
+    arcgisPropertyChange: import('@arcgis/components-controllers').EventEmitter<{
+        name: string;
+    }> | undefined;
+    el: HTMLElement & {
+        childElem?: (HTMLElement & {
+            ownedBy?: HTMLElement | undefined;
+        }) | undefined;
+        view?: __esri.MapView | __esri.SceneView | undefined;
+    };
+    autoDestroyDisabled: boolean;
+    destroy: () => Promise<void>;
+}, options?: {
+    editConstructorProperties(props: unknown): unknown;
+} | undefined) => __esri.ScaleBarViewModel;
+export declare class ArcgisScaleBar extends LitElement implements Use<typeof useScaleBarViewModel> {
+    /**
+     * 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
+     * temporary hide it. If this is set, make sure to call the
+     * \`destroy\` method when you are done to prevent memory leaks.
+     */
+    autoDestroyDisabled: boolean;
+    /**
+     * The style for the scale bar.
+     * When `unit` is set to `dual`, the style will always be `line`.
+     */
+    barStyle: ScaleBarStyle;
+    /** Icon displayed in the widget's button. */
+    icon: Nil | string;
+    /** The widget's default label. */
+    label: Nil | string;
+    messageOverrides?: typeof this.messages._overrides;
+    position: __esri.UIPosition;
+    referenceElement: ArcgisReferenceElement | Nil | string;
+    /**
+     * Units to use for the scale bar.
+     * When using `dual`, the scale bar displays both metric and imperial units.
+     * When metric, distances will be shown in either kilometers, meters, centimeters, or millimeters depending on the scale. Similarly, imperial
+     * units will be shown in either miles, feet, or inches.
+     */
+    get unit(): ScaleBarUnit | undefined;
+    set unit(value: ScaleBarUnit | undefined);
+    /** Permanently destroy the component */
+    destroy(): Promise<void>;
+    readonly arcgisReady: CustomEvent<undefined>;
+}
+export {};

package/dist/components/arcgis-scale-bar/customElement.js

@@ -0,0 +1,130 @@
+import { c as w } from "../../chunks/runtime.js";
+import { ref as g } from "lit-html/directives/ref.js";
+import { html as u } from "lit-html";
+import { g as f } from "../../chunks/globalCss.js";
+import { u as y, m as S } from "../../chunks/useViewModel.js";
+import { classes as d } from "@arcgis/components-utils";
+import { load as v } from "@arcgis/components-controllers";
+import { a9 as B, i as L, aa as M, ab as U } from "../../chunks/index.js";
+import { LitElement as D, createEvent as R, noShadowRoot as x, safeClassMap as a, safeStyleMap as $ } from "@arcgis/lumina";
+/*!
+ * All material copyright Esri, All Rights Reserved, unless otherwise specified.
+ * See https://js.arcgis.com/4.32/esri/copyright.txt for details.
+ * v4.32.0-next.2
+*/
+const r = "esri-scale-bar", t = {
+  base: r,
+  labelContainer: `${r}__label-container`,
+  rulerLabelContainer: `${r}__label-container--ruler`,
+  lineLabelContainer: `${r}__label-container--line`,
+  topLabelContainer: `${r}__label-container--top`,
+  bottomLabelContainer: `${r}__label-container--bottom`,
+  label: `${r}__label`,
+  line: `${r}__line`,
+  topLine: `${r}__line--top`,
+  bottomLine: `${r}__line--bottom`,
+  ruler: `${r}__ruler`,
+  rulerBlock: `${r}__ruler-block`,
+  barContainer: `${r}__bar-container`,
+  rulerBarContainer: `${r}__bar-container--ruler`,
+  lineBarContainer: `${r}__bar-container--line`
+};
+function C(_ = 0, e = 0) {
+  return { x: _, y: e };
+}
+const k = S(U);
+class O extends D {
+  constructor() {
+    super(...arguments), this.intlUtils = v(B), this.messages = y(), this.reactiveUtils = v(L), this._scaleComputedFrom = C(), this.unitUtils = v(M), this.viewModel = k(this), this.autoDestroyDisabled = !1, this.barStyle = "line", this.icon = "actual-size", this.position = "top-left", this.arcgisReady = R();
+  }
+  static {
+    this.properties = { autoDestroyDisabled: 5, barStyle: 1, icon: 3, label: 1, messageOverrides: 0, position: 3, referenceElement: 1, unit: 1 };
+  }
+  static {
+    this.shadowRootOptions = x;
+  }
+  /**
+   * Units to use for the scale bar.
+   * When using `dual`, the scale bar displays both metric and imperial units.
+   * When metric, distances will be shown in either kilometers, meters, centimeters, or millimeters depending on the scale. Similarly, imperial
+   * units will be shown in either miles, feet, or inches.
+   */
+  get unit() {
+    return this._unit ?? this._defaultUnit;
+  }
+  set unit(e) {
+    this._unit = e;
+  }
+  // #endregion
+  // #region Public Methods
+  /** Permanently destroy the component */
+  async destroy() {
+    await this.manager.destroy();
+  }
+  // #endregion
+  // #region Lifecycle
+  updated() {
+    this._handleRootCreateOrUpdate();
+  }
+  loaded() {
+    this._defaultUnit = this.unitUtils.getDefaultUnitForView(this.viewModel.view), this.manager.onLifecycle(() => this.reactiveUtils.watch(() => {
+      const e = this.viewModel.view;
+      return [e?.stationary, e?.center, e?.scale, e?.zoom];
+    }, ([e]) => {
+      e && this.requestUpdate();
+    }));
+  }
+  // #endregion
+  // #region Private Methods
+  _handleRootCreateOrUpdate() {
+    if (!this.viewModel)
+      return;
+    const e = this._scaleComputedFrom, s = this.el.getBoundingClientRect(), l = s.left + window.pageXOffset, o = s.top + window.pageYOffset, i = C(l, o);
+    (i.x !== e.x || i.y !== e.y) && (this._scaleComputedFrom = i);
+  }
+  _formatDistance(e, s) {
+    return this.intlUtils.formatNumber(e, {
+      style: "unit",
+      unit: s,
+      unitDisplay: "short"
+    });
+  }
+  // #endregion
+  // #region Rendering
+  render() {
+    const e = this.viewModel.state === "disabled", s = {
+      [f.disabled]: e
+    };
+    let l, o;
+    if (!e) {
+      const { unit: i, barStyle: c } = this, p = i === "imperial" || i === "dual", b = i === "metric" || i === "dual", m = 100, h = i === "dual" ? "line" : c;
+      if (p) {
+        const n = this.viewModel.getScaleBarProperties(m, "imperial");
+        n && (o = h === "ruler" ? this._renderRuler(n) : this._renderLine(n, "bottom"));
+      }
+      if (b) {
+        const n = this.viewModel.getScaleBarProperties(m, "metric");
+        n && (l = h === "ruler" ? this._renderRuler(n) : this._renderLine(n, "top"));
+      }
+    }
+    return u`<div class=${a(d(t.base, f.widget, s))} ${g((i) => i ? this._handleRootCreateOrUpdate() : void 0)}>${l}${o}</div>`;
+  }
+  _renderRuler(e) {
+    const { length: s, unit: l, value: o } = e, i = Math.round(s), c = this._formatDistance(o, l);
+    return u`<div class=${a(d(t.barContainer, t.rulerBarContainer))}><div class=${a(t.ruler)} style=${$({ width: `${i}px` })}><div class=${a(t.rulerBlock)}></div><div class=${a(t.rulerBlock)}></div><div class=${a(t.rulerBlock)}></div><div class=${a(t.rulerBlock)}></div></div><div class=${a(d(t.labelContainer, t.rulerLabelContainer))}><div class=${a(t.label)}>0</div><div class=${a(t.label)}>${c}</div></div></div>`;
+  }
+  _renderLine(e, s) {
+    const { length: l, unit: o, value: i } = e, c = Math.round(l), p = this._formatDistance(i, o), b = {
+      [t.topLabelContainer]: s === "top",
+      [t.bottomLabelContainer]: s === "bottom"
+    }, m = u`<div class=${a(d(t.labelContainer, t.lineLabelContainer, b))}><div class=${a(t.label)}>${p}</div></div>`, h = {
+      [t.topLine]: s === "top",
+      [t.bottomLine]: s === "bottom"
+    }, n = u`<div class=${a(d(t.line, h))} style=${$({ width: `${c}px` })}></div>`;
+    return u`<div class=${a(d(t.barContainer, t.lineBarContainer))}>${[n, m]}</div>`;
+  }
+}
+w("arcgis-scale-bar", O);
+export {
+  O as ArcgisScaleBar
+};

package/dist/components/arcgis-scale-bar/index.d.ts

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

package/dist/components/arcgis-scale-bar/index.js

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