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

package/dist/components/arcgis-multi-feature-form/customElement.d.ts

@@ -1,18 +1,16 @@
 /// <reference path="../../index.d.ts" />
-import type Graphic from "@arcgis/core/Graphic";
-import type MapView from "@arcgis/core/views/MapView";
-import type SceneView from "@arcgis/core/views/SceneView";
+import type Graphic from "@arcgis/core/Graphic.js";
+import type MapView from "@arcgis/core/views/MapView.js";
+import type SceneView from "@arcgis/core/views/SceneView.js";
 import type Collection from "@arcgis/core/core/Collection.js";
-import type Graphic2 from "@arcgis/core/Graphic.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisReferenceElement } from "../types.js";
-import type { ValueChangeEvent } from "@arcgis/core/widgets/BatchAttributeForm/types";
+import type { ValueChangeEvent, BatchAttributeFormState } from "@arcgis/core/widgets/BatchAttributeForm/types.js";
 import type { Icon } from "@esri/calcite-components/components/calcite-icon";
-import type { SubmitEvent } from "@arcgis/core/widgets/FeatureForm/FeatureFormViewModel";
-import type { UIPosition } from "@arcgis/core/views/ui/types";
+import type { SubmitEvent } from "@arcgis/core/widgets/FeatureForm/FeatureFormViewModel.js";
+import type { UIPosition } from "@arcgis/core/views/ui/types.js";
 import type { EditType } from "@arcgis/core/widgets/support/forms/types.js";
 import type { HeadingLevel } from "@arcgis/core/widgets/support/types.js";
-import type { BatchAttributeFormState } from "@arcgis/core/widgets/BatchAttributeForm/types.js";
 
 /**
  * The Multi Feature Form component provides a Feature Form which works with
@@ -36,7 +34,7 @@ export abstract class ArcgisMultiFeatureForm extends LitElement {
   /** @default false */
   accessor disabled: boolean;
   accessor editType: EditType;
-  accessor features: Collection<Graphic2>;
+  accessor features: Collection<Graphic>;
   accessor groupDisplay: "all" | "sequential";
   /** @default false */
   accessor hasTooManyComplexFeatures: boolean;
@@ -94,7 +92,7 @@ export abstract class ArcgisMultiFeatureForm extends LitElement {
   readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "status" | "valid" | "updating" | "submitHasBeenAttempted" | "activeFeatureIndex"; }>;
   /** 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 [submit()](#submit) method is called. */
+  /** Fires when the [submit()](https://developers.arcgis.com/javascript/latest/references/core/widgets/BatchAttributeForm/#submit) method is called. */
   readonly arcgisSubmit: import("@arcgis/lumina").TargetedEvent<this, SubmitEvent>;
   /** Fires when a field value is updated. */
   readonly arcgisValueChange: import("@arcgis/lumina").TargetedEvent<this, ValueChangeEvent>;

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

@@ -1,5 +1,5 @@
 /// <reference path="../../index.d.ts" />
-import type SceneView from "@arcgis/core/views/SceneView";
+import type SceneView from "@arcgis/core/views/SceneView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisReferenceElement } from "../types.js";
 import type { NavigationToggleState } from "./types.js";

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

@@ -1,19 +1,19 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as d } from "../../chunks/runtime.js";
-import { when as c } from "@arcgis/core/core/reactiveUtils.js";
-import { LitElement as g, createEvent as h, safeClassMap as p, nothing as r } from "@arcgis/lumina";
+import { when as s } from "@arcgis/core/core/reactiveUtils.js";
+import { LitElement as g, createEvent as h, nothing as r, safeClassMap as p } from "@arcgis/lumina";
 import { usePropertyChange as u } from "@arcgis/lumina/controllers";
 import { css as v, html as m } from "lit";
 import { u as f } from "../../chunks/useT9n.js";
 import { u as b } from "../../chunks/useView.js";
 import { g as y } from "../../chunks/globalCss.js";
-const M = v`.arcgis-button{--calcite-icon-color: var(--calcite-color-text-3);--calcite-button-background-color: var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);line-height:var(--calcite-font-line-height-relative-tight);display:flex;flex-flow:column;cursor:pointer;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);:hover{--calcite-icon-color: var(--calcite-color-text-1);--calcite-button-background-color: var(--calcite-color-transparent-hover)}}:host{display:flex;inline-size:fit-content;block-size:fit-content}.root{--calcite-internal-action-bar-padding: 0;--calcite-internal-action-bar-gap: 0;--calcite-action-corner-radius: 0}`, e = {
+const M = v`.arcgis-button{--calcite-icon-color: var(--calcite-color-text-3);--calcite-button-background-color: var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);line-height:var(--calcite-font-line-height-relative-tight);calcite-button{--calcite-offset-invert-focus: 1}display:flex;flex-flow:column;cursor:pointer;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);:hover{--calcite-icon-color: var(--calcite-color-text-1);--calcite-button-background-color: var(--calcite-color-transparent-hover)}}:host{display:flex;inline-size:fit-content;block-size:fit-content}.root{--calcite-internal-action-bar-padding: 0;--calcite-internal-action-bar-gap: 0;--calcite-action-corner-radius: 0}`, i = {
   pan: "move",
   rotate: "rotate"
 };
 class $ extends g {
   constructor() {
-    super(...arguments), this._messages = f(), this._state = "disabled", this.autoDestroyDisabled = !1, this.view = b(this), this.icon = e.pan, this.layout = "vertical", this.navigationMode = "pan", this.visualScale = "m", this.arcgisPropertyChange = u()("layout", "state"), this.arcgisReady = h();
+    super(...arguments), this._messages = f(), this._state = "disabled", this.autoDestroyDisabled = !1, this.view = b(this), this.icon = i.pan, this.layout = "vertical", this.navigationMode = "pan", this.visualScale = "m", this.arcgisPropertyChange = u()("layout", "state"), this.arcgisReady = h();
   }
   static {
     this.properties = { _state: 16, autoDestroyDisabled: 5, view: 0, icon: 1, label: 1, layout: 3, messageOverrides: 0, navigationMode: 3, referenceElement: 1, state: 35, visualScale: 1 };
@@ -32,8 +32,8 @@ class $ extends g {
   }
   load() {
     this.manager.onLifecycle(() => [
-      c(() => this.view?.navigation?.actionMap, () => this._updateNavigationActionMap()),
-      c(() => {
+      s(() => this.view?.navigation?.actionMap, () => this._updateNavigationActionMap()),
+      s(() => {
         const { view: t } = this;
         return t?.ready && t?.type === "3d" ? "ready" : "disabled";
       }, (t) => {
@@ -58,8 +58,8 @@ class $ extends g {
     t.dragPrimary = a ? "pan" : "rotate", t.dragSecondary = a ? "rotate" : "pan";
   }
   render() {
-    const { _messages: t, navigationMode: a, state: l } = this, o = t.pan ?? "", n = t.rotate ?? "", i = l === "disabled", s = a === "pan";
-    return m`<calcite-action-bar class=${p({ root: !0, [y.disabled]: i })} expand-disabled .layout=${this.layout}><calcite-action .active=${s} .disabled=${i} .icon=${e.pan} @click=${this._onPanClick} .scale=${this.visualScale} .text=${o} title=${o ?? r}></calcite-action><calcite-action .active=${!s} .disabled=${i} .icon=${e.rotate} @click=${this._onRotateClick} .scale=${this.visualScale} .text=${n} title=${n ?? r}></calcite-action></calcite-action-bar>`;
+    const { _messages: t, navigationMode: a, state: l } = this, o = t.pan ?? "", n = t.rotate ?? "", e = l === "disabled", c = a === "pan";
+    return m`<calcite-action-bar class=${p({ root: !0, [y.disabled]: e })} expand-disabled .layout=${this.layout}><calcite-action .active=${c} .disabled=${e} .icon=${i.pan} @click=${this._onPanClick} .scale=${this.visualScale} .text=${o} title=${o ?? r}></calcite-action><calcite-action .active=${!c} .disabled=${e} .icon=${i.rotate} @click=${this._onRotateClick} .scale=${this.visualScale} .text=${n} title=${n ?? r}></calcite-action></calcite-action-bar>`;
   }
 }
 d("arcgis-navigation-toggle", $);

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

@@ -3,6 +3,7 @@ import type OrientedImageryLayer from "@arcgis/core/layers/OrientedImageryLayer.
 import type Point from "@arcgis/core/geometry/Point.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisReferenceElement, IconName } from "../types.js";
+import type { AbortOptions } from "../../utils/async-utils.js";
 import type { MapViewOrSceneView } from "@arcgis/core/views/MapViewOrSceneView.js";
 import type { Icon } from "@esri/calcite-components/components/calcite-icon";
 
@@ -55,6 +56,20 @@ export abstract class ArcgisOrientedImageryViewer extends LitElement {
    * @default false
    */
   accessor galleryOpened: boolean;
+  /**
+   * Indicates whether to display the header of the widget.
+   *
+   * @default false
+   * @since 5.1
+   */
+  accessor hideHeader: boolean;
+  /**
+   * Indicates whether to display the action bar of the widget.
+   *
+   * @default false
+   * @since 5.1
+   */
+  accessor hideMenu: boolean;
   /**
    * Icon which represents the component.
    * Typically used when the component is controlled by another component (e.g. by the Expand component).
@@ -115,6 +130,13 @@ export abstract class ArcgisOrientedImageryViewer extends LitElement {
    * The layer contains the feature data and oriented imagery properties required by the viewer to load the image and generate the associated graphics.
    */
   accessor layer: OrientedImageryLayer | null | undefined;
+  /**
+   * Layer Id of layer in the associated map. You can set `layer`, `layerId` or `orientedImageryLayerItemId`,
+   * but not more than one.
+   *
+   * @since 5.1
+   */
+  accessor layerId: string | undefined;
   /**
    * Indicates if the map-image location tool is available in the component.
    * When `true`, the user can select a point on the map and the corresponding location in pixel space will be displayed in the image, and vice versa.
@@ -132,6 +154,14 @@ export abstract class ArcgisOrientedImageryViewer extends LitElement {
    */
   accessor navigationToolActive: boolean;
   accessor orientedImageryLayerItemId: string | undefined;
+  /**
+   * When true, loading an image via directional or sequential navigation caches all neighboring images associated with that image.
+   * Navigating to adjacent images then uses the cached assets, reducing load times and improving viewer performance.
+   *
+   * @default false
+   * @since 5.0
+   */
+  accessor preloadMedia: boolean;
   /**
    * 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.
    *
@@ -153,6 +183,14 @@ export abstract class ArcgisOrientedImageryViewer extends LitElement {
   accessor view: MapViewOrSceneView | null | undefined;
   /** Permanently destroy the component. */
   destroy(): Promise<void>;
+  /**
+   * Loads the best available image for a given map point and displays it in the viewer. The method takes a `Point` object as an argument, which represents the location on the map for which the best image should be loaded. The viewer will analyze the available images for that location and select the one that best matches the given location.
+   *
+   * @param mapPoint - The [point](https://developers.arcgis.com/javascript/latest/references/core/geometry/Point/) object representing the location on the map for which to load the best image.
+   * @param options - Optional parameters for aborting the image loading process. This can be used to cancel the operation if it takes too long or if the user navigates away from the location before the image is loaded.
+   * @since 5.1
+   */
+  loadBestImage(mapPoint: Point, options?: AbortOptions): Promise<void>;
   "@setterTypes": {
     icon?: IconName;
   };

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

@@ -1,30 +1,36 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as r } from "../../chunks/runtime.js";
 import { usePropertyChange as t } from "@arcgis/lumina/controllers";
-import o from "@arcgis/core/layers/OrientedImageryLayer.js";
-import a from "@arcgis/core/widgets/OrientedImageryViewer.js";
+import a from "@arcgis/core/layers/OrientedImageryLayer.js";
+import o from "@arcgis/core/widgets/OrientedImageryViewer.js";
 import { LitElement as n, createEvent as s } from "@arcgis/lumina";
 import { m as d } from "../../chunks/useWidget.js";
 import { css as l } from "lit";
-import { s as c } from "../../chunks/esri-main.js";
-const g = l`.esri-imagery-viewer{width:100%;height:100%}.esri-oriented-imagery-viewer{--esri-oriented-imagery-viewer-action-icon-size: 8px;--esri-oriented-imagery-viewer-min-width: 288px;--esri-oriented-imagery-viewer-min-height: 348px;--calcite-dialog-size-x: 210px;--calcite-dialog-min-size-y: 90px;--calcite-icon-size: var(--esri-oriented-imagery-viewer-action-icon-size);box-sizing:border-box;z-index:1;width:100%;min-width:var(--esri-oriented-imagery-viewer-min-width);height:100%;min-height:var(--esri-oriented-imagery-viewer-min-height);flex-direction:column;align-items:flex-start;display:flex;overflow:hidden}.esri-oriented-imagery-viewer:has(.esri-widget .esri-oriented-imagery-viewer__image-overlays-no-result){--esri-oriented-imagery-viewer-min-height: 420px}.esri-oriented-imagery-viewer__body{flex-direction:column;flex:1 0 auto;order:1;align-self:stretch;height:100%;display:flex}.esri-oriented-imagery-viewer__body-current-coverage{--calcite-icon-color: var(--calcite-color-status-danger)}.esri-oriented-imagery-viewer__body-additional-camera-locations{--calcite-icon-color: var(--calcite-color-brand)}.esri-oriented-imagery-viewer__body-additional-coverage{--calcite-icon-color: var(--calcite-color-status-info)}.esri-oriented-imagery-viewer__body-footprint{--calcite-icon-color: var(--calcite-color-status-success)}.esri-oriented-imagery-viewer__carousel{z-index:1;border:1px solid var(--calcite-color-border-2);align-items:center;width:98%;height:140px;margin:auto 1% 0;position:absolute;bottom:0;box-shadow:0 0 1px #0000004d}.esri-oriented-imagery-viewer__carousel-container{height:auto;display:inline-block;overflow:auto hidden}.esri-oriented-imagery-viewer__carousel header{--calcite-font-weight-medium: $font-weight--light;--calcite-font-size-0: $font-size--tiny}.esri-oriented-imagery-viewer__carousel-item{width:100px;height:70px}.esri-oriented-imagery-viewer__carousel-item-wrapper{box-sizing:border-box;justify-content:center;align-items:center;width:106px;height:78px;margin:auto 10px;display:flex;box-shadow:0 1px 2px #0000004d}.esri-oriented-imagery-viewer__carousel-item-wrapper--selected{box-sizing:border-box;border:2px solid var(--calcite-color-brand);justify-content:center;align-items:center;width:106px;height:78px;margin:auto 10px;display:flex;box-shadow:0 1px 2px #0000004d}.esri-oriented-imagery-viewer__carousel-content{display:flex}.esri-oriented-imagery-viewer__close{background:var(--calcite-color-foreground-1);flex-direction:row;flex-grow:0;order:7;justify-content:center;align-items:center;width:48px;height:59px;display:flex}.esri-oriented-imagery-viewer__image-enhancement-wrapper{z-index:1;border:1px solid var(--calcite-color-border-2);align-items:center;width:98%;height:140px;margin:auto 1% 0;position:absolute;bottom:0;box-shadow:0 0 1px #0000004d}.esri-oriented-imagery-viewer__image-enhancement-tools{display:flex}.esri-oriented-imagery-viewer__image-enhancement-tool-container{width:50%;margin-block:2px;padding-inline:.75rem}.esri-oriented-imagery-viewer__image-overlays{z-index:1;margin:auto;border:1px solid var(--calcite-color-border-2);align-items:center;width:100%;position:absolute;bottom:0;overflow-y:auto;box-shadow:0 0 1px #0000004d}.esri-oriented-imagery-viewer__image-overlays-layer-list,.esri-oriented-imagery-viewer__image-overlays-switch{padding:0 var(--calcite-spacing-md)}.esri-oriented-imagery-viewer__image-overlays-container{height:auto;display:flex}.esri-oriented-imagery-viewer__image-overlays-no-result{z-index:1;border:1px solid var(--calcite-color-border-2);align-items:center;width:98%;height:auto;margin:auto 1% 0;position:absolute;bottom:0;overflow-y:auto;box-shadow:0 0 1px #0000004d}.esri-oriented-imagery-viewer__image-overlays-no-result-layer-list,.esri-oriented-imagery-viewer__image-overlays-no-result-switch{padding:0 var(--calcite-spacing-md)}.esri-oriented-imagery-viewer__image-overlays-increased-height{z-index:1;border:1px solid var(--calcite-color-border-2);align-items:center;width:98%;height:200px;margin:auto 1% 0;position:absolute;bottom:0;overflow-y:auto;box-shadow:0 0 1px #0000004d}.esri-oriented-imagery-viewer__image-overlays-increased-height-layer-list,.esri-oriented-imagery-viewer__image-overlays-increased-height-switch{padding:0 var(--calcite-spacing-md)}.esri-oriented-imagery-viewer__measurement-results{width:auto;height:fit-content}.esri-oriented-imagery-viewer__measurements-table{margin-block-start:var(--calcite-spacing-sm)}.esri-oriented-imagery-viewer__measurements-bar{flex-wrap:nowrap;display:flex}.esri-oriented-imagery-viewer__measurements-button{display:flex}.esri-oriented-imagery-viewer__measurement-display{text-align:center;margin-block-end:var(--calcite-spacing-xxs)}.esri-oriented-imagery-viewer__viewer{cursor:url(data:text/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s6.38-6.73%204.64-8.24-3.47%201.01-3.47%201.01%203.61-5.72%201.41-6.49c-2.2-0.769-3.33%204.36-3.33%204.36s0.873-5.76-1.06-5.76-1.58%205.39-1.58%205.39-0.574-4.59-2.18-4.12c-1.61%200.468-0.572%205.51-0.572%205.51s-1.58-4.89-2.93-3.79c-1.35%201.11%200.258%205.25%200.572%206.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A);flex-grow:1;width:100%;margin:0;display:flex}.esri-oriented-imagery-viewer__viewer--hidden{display:none}.esri-oriented-imagery-viewer__viewer-container{border-top:1px solid var(--calcite-color-border-3);background:var(--calcite-color-foreground-1);border-radius:0 0 3px 3px;flex:1 0 auto;order:1;align-self:stretch;width:100%;height:100%;display:flex}.esri-oriented-imagery-viewer__alert{inset-block-end:var(--calcite-spacing-md);inset-inline:var(--calcite-spacing-md);position:absolute}@keyframes rotateOrientedImageryNavigationTool{0%{transform:rotate(var(--oi-navigation-tool-rotation-from, 0deg))}to{transform:rotate(var(--oi-navigation-tool-rotation-to, 0deg))}}.esri-oriented-imagery-viewer__message-box{text-align:center;word-break:break-word;justify-content:center;align-items:center;width:100%;height:100%;padding:0 25%;font-size:var(--calcite-font-size-sm);display:flex;position:relative}.esri-oriented-imagery-viewer__navigation{transform:rotate(var(--oi-navigation-tool-rotation-to, 0deg))}.esri-oriented-imagery-viewer__navigation-animate{animation:.7s linear forwards rotateOrientedImageryNavigationTool}.esri-oriented-imagery-viewer__navigation-feature{fill:var(--calcite-color-brand);stroke:var(--calcite-color-foreground-1);stroke-width:1px}.esri-oriented-imagery-viewer__navigation-feature.selected{fill:var(--calcite-color-status-danger)}.esri-oriented-imagery-viewer__navigation-feature-path{pointer-events:none}.esri-oriented-imagery-viewer__navigation-feature-path-stop-offset-0{stop-color:var(--calcite-color-status-danger);stop-opacity:.4}.esri-oriented-imagery-viewer__navigation-feature-path-stop-offset-1{stop-color:var(--calcite-color-status-danger);stop-opacity:.2}.esri-oriented-imagery-viewer__navigation-pointer{fill:var(--calcite-color-foreground-1);fill-rule:evenodd;stroke:#0000;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-width:0}.esri-oriented-imagery-viewer__navigation-pointer-north{fill:var(--calcite-color-status-danger)}.esri-oriented-imagery-viewer__navigation-wrapper{z-index:1;position:absolute;bottom:0;right:0;overflow:hidden}.esri-oriented-imagery-viewer__navigation-wrapper--zoomed{transform-origin:100% 100%;transform:scale(1.5)}.esri-oriented-imagery-viewer__navigation-wrapper-boundary{fill:var(--calcite-color-foreground-1);fill-opacity:.25;stroke:var(--calcite-color-border-2)}.esri-oriented-imagery-viewer__navigation-sector{fill:none}.esri-oriented-imagery-viewer__navigation-sector-separator{stroke:var(--calcite-color-border-2);stroke-width:1px}.esri-oriented-imagery-viewer__navigation-sector-cross{stroke:var(--calcite-color-status-danger);stroke-width:1px}.esri-oriented-imagery-viewer__navigation-sector-enabled{fill:var(--calcite-color-foreground-1);stroke:var(--calcite-color-border-2);stroke-width:1px}.esri-oriented-imagery-viewer__navigation-sector-disabled{fill:var(--calcite-color-foreground-3);stroke:var(--calcite-color-border-2);stroke-width:1px}.esri-oriented-imagery-viewer__navigation-sector-outer{fill:var(--calcite-color-foreground-1);fill-opacity:.4;stroke:none}.esri-oriented-imagery-viewer__pro .esri-oriented-imagery-viewer{width:100%;max-width:unset;height:100%;max-height:unset;position:static}.esri-oriented-imagery-viewer__sketch-tools{justify-content:center;align-items:center;width:100%;display:flex;position:absolute;bottom:0}.esri-oriented-imagery-viewer__navigation-ui{box-sizing:border-box;inset-block-end:var(--calcite-spacing-md);inset-inline:var(--calcite-spacing-md);transform-style:preserve-3d;z-index:var(--calcite-z-index-overlay);pointer-events:none;flex-direction:column;align-items:center;display:flex;position:absolute;overflow:hidden}.esri-oriented-imagery-viewer__navigation-ui__direction{--esri-oriented-imagery-viewer__navigation-ui-direction-color: wheat;--calcite-icon-color: var(--esri-oriented-imagery-viewer__navigation-ui-direction-color);cursor:not-allowed;width:160px;height:160px;position:absolute}.esri-oriented-imagery-viewer__navigation-ui__direction:not([disabled]){cursor:pointer;pointer-events:auto}.esri-oriented-imagery-viewer__navigation-ui__direction:not([disabled]):hover{--calcite-icon-color: var(--calcite-color-brand);background-color:rgba(var(--calcite-color-brand),var(--calcite-opacity-half));border-radius:50%}.esri-oriented-imagery-viewer__navigation-ui__direction-pad{box-sizing:border-box;transform:perspective(400px) rotateX(60deg) var(--rotate-transform);filter:drop-shadow(0 2px 1px #00000080);width:330px;height:330px}.esri-oriented-imagery-viewer__navigation-ui__direction--top{transform-style:preserve-3d;top:0;left:50%;transform:translate(-50%)}.esri-oriented-imagery-viewer__navigation-ui__direction--bottom{transform-style:preserve-3d;bottom:0;left:50%;transform:translate(-50%)}.esri-oriented-imagery-viewer__navigation-ui__direction--left{transform-style:preserve-3d;top:50%;left:0;transform:translateY(-50%)}.esri-oriented-imagery-viewer__navigation-ui__direction--right{transform-style:preserve-3d;top:50%;right:0;transform:translateY(-50%)}.esri-panoramic-viewer{z-index:1;position:relative;width:100%;height:100%}`, m = d(a);
-class v extends n {
+import { s as g } from "../../chunks/esri-main.js";
+import { u as c } from "../../chunks/useLayerById.js";
+const m = l`.esri-imagery-viewer{width:100%;height:100%}.esri-oriented-imagery-viewer{--esri-oriented-imagery-viewer-action-icon-size: 8px;--esri-oriented-imagery-viewer-min-width: 288px;--esri-oriented-imagery-viewer-min-height: 348px;--calcite-dialog-size-x: 210px;--calcite-dialog-min-size-y: 90px;--calcite-icon-size: var(--esri-oriented-imagery-viewer-action-icon-size);box-sizing:border-box;z-index:1;width:100%;min-width:var(--esri-oriented-imagery-viewer-min-width);height:100%;min-height:var(--esri-oriented-imagery-viewer-min-height);flex-direction:column;align-items:flex-start;display:flex;overflow:hidden}.esri-oriented-imagery-viewer:has(.esri-widget .esri-oriented-imagery-viewer__image-overlays-no-result){--esri-oriented-imagery-viewer-min-height: 420px}.esri-oriented-imagery-viewer__body{flex-direction:column;flex:1 0 auto;order:1;align-self:stretch;height:100%;display:flex}.esri-oriented-imagery-viewer__body-current-coverage{--calcite-icon-color: var(--calcite-color-status-danger)}.esri-oriented-imagery-viewer__body-additional-camera-locations{--calcite-icon-color: var(--calcite-color-brand)}.esri-oriented-imagery-viewer__body-additional-coverage{--calcite-icon-color: var(--calcite-color-status-info)}.esri-oriented-imagery-viewer__body-footprint{--calcite-icon-color: var(--calcite-color-status-success)}.esri-oriented-imagery-viewer__carousel{z-index:1;border:1px solid var(--calcite-color-border-2);align-items:center;width:98%;height:140px;margin:auto 1% 0;position:absolute;bottom:0;box-shadow:0 0 1px #0000004d}.esri-oriented-imagery-viewer__carousel-container{height:auto;display:inline-block;overflow:auto hidden}.esri-oriented-imagery-viewer__carousel header{--calcite-font-weight-medium: $font-weight--light;--calcite-font-size-0: $font-size--tiny}.esri-oriented-imagery-viewer__carousel-item{width:100px;height:70px}.esri-oriented-imagery-viewer__carousel-item-wrapper{box-sizing:border-box;justify-content:center;align-items:center;width:106px;height:78px;margin:auto 10px;display:flex;box-shadow:0 1px 2px #0000004d}.esri-oriented-imagery-viewer__carousel-item-wrapper--selected{box-sizing:border-box;border:2px solid var(--calcite-color-brand);justify-content:center;align-items:center;width:106px;height:78px;margin:auto 10px;display:flex;box-shadow:0 1px 2px #0000004d}.esri-oriented-imagery-viewer__carousel-content{display:flex}.esri-oriented-imagery-viewer__close{background:var(--calcite-color-foreground-1);flex-direction:row;flex-grow:0;order:7;justify-content:center;align-items:center;width:48px;height:59px;display:flex}.esri-oriented-imagery-viewer__image-enhancement-wrapper{z-index:1;border:1px solid var(--calcite-color-border-2);align-items:center;width:98%;height:140px;margin:auto 1% 0;position:absolute;bottom:0;box-shadow:0 0 1px #0000004d}.esri-oriented-imagery-viewer__image-enhancement-tools{display:flex}.esri-oriented-imagery-viewer__image-enhancement-tool-container{width:50%;margin-block:2px;padding-inline:.75rem}.esri-oriented-imagery-viewer__image-overlays{z-index:1;margin:auto;border:1px solid var(--calcite-color-border-2);align-items:center;width:100%;position:absolute;bottom:0;overflow-y:auto;box-shadow:0 0 1px #0000004d}.esri-oriented-imagery-viewer__image-overlays-layer-list,.esri-oriented-imagery-viewer__image-overlays-switch{padding:0 var(--calcite-spacing-md)}.esri-oriented-imagery-viewer__image-overlays-container{height:auto;display:flex}.esri-oriented-imagery-viewer__image-overlays-no-result{z-index:1;border:1px solid var(--calcite-color-border-2);align-items:center;width:98%;height:auto;margin:auto 1% 0;position:absolute;bottom:0;overflow-y:auto;box-shadow:0 0 1px #0000004d}.esri-oriented-imagery-viewer__image-overlays-no-result-layer-list,.esri-oriented-imagery-viewer__image-overlays-no-result-switch{padding:0 var(--calcite-spacing-md)}.esri-oriented-imagery-viewer__image-overlays-increased-height{z-index:1;border:1px solid var(--calcite-color-border-2);align-items:center;width:98%;height:200px;margin:auto 1% 0;position:absolute;bottom:0;overflow-y:auto;box-shadow:0 0 1px #0000004d}.esri-oriented-imagery-viewer__image-overlays-increased-height-layer-list,.esri-oriented-imagery-viewer__image-overlays-increased-height-switch{padding:0 var(--calcite-spacing-md)}.esri-oriented-imagery-viewer__measurement-results{width:auto;height:fit-content}.esri-oriented-imagery-viewer__measurements-table{margin-block-start:var(--calcite-spacing-sm)}.esri-oriented-imagery-viewer__measurements-bar{flex-wrap:nowrap;display:flex}.esri-oriented-imagery-viewer__measurements-button{display:flex}.esri-oriented-imagery-viewer__measurement-display{text-align:center;margin-block-end:var(--calcite-spacing-xxs)}.esri-oriented-imagery-viewer__viewer{cursor:url(data:text/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s6.38-6.73%204.64-8.24-3.47%201.01-3.47%201.01%203.61-5.72%201.41-6.49c-2.2-0.769-3.33%204.36-3.33%204.36s0.873-5.76-1.06-5.76-1.58%205.39-1.58%205.39-0.574-4.59-2.18-4.12c-1.61%200.468-0.572%205.51-0.572%205.51s-1.58-4.89-2.93-3.79c-1.35%201.11%200.258%205.25%200.572%206.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A);flex-grow:1;width:100%;margin:0;display:flex}.esri-oriented-imagery-viewer__viewer--hidden{display:none}.esri-oriented-imagery-viewer__viewer-container{border-top:1px solid var(--calcite-color-border-3);background:var(--calcite-color-foreground-1);border-radius:0 0 3px 3px;flex:1 0 auto;order:1;align-self:stretch;width:100%;height:100%;display:flex}.esri-oriented-imagery-viewer__alert{inset-block-end:var(--calcite-spacing-md);inset-inline:var(--calcite-spacing-md);position:absolute}@keyframes rotateOrientedImageryNavigationTool{0%{transform:rotate(var(--oi-navigation-tool-rotation-from, 0deg))}to{transform:rotate(var(--oi-navigation-tool-rotation-to, 0deg))}}.esri-oriented-imagery-viewer__message-box{text-align:center;word-break:break-word;justify-content:center;align-items:center;width:100%;height:100%;padding:0 25%;font-size:var(--calcite-font-size-sm);display:flex;position:relative}.esri-oriented-imagery-viewer__navigation{transform:rotate(var(--oi-navigation-tool-rotation-to, 0deg))}.esri-oriented-imagery-viewer__navigation-animate{animation:.7s linear forwards rotateOrientedImageryNavigationTool}.esri-oriented-imagery-viewer__navigation-feature{fill:var(--calcite-color-brand);stroke:var(--calcite-color-foreground-1);stroke-width:1px}.esri-oriented-imagery-viewer__navigation-feature.selected{fill:var(--calcite-color-status-danger)}.esri-oriented-imagery-viewer__navigation-feature-path{pointer-events:none}.esri-oriented-imagery-viewer__navigation-feature-path-stop-offset-0{stop-color:var(--calcite-color-status-danger);stop-opacity:.4}.esri-oriented-imagery-viewer__navigation-feature-path-stop-offset-1{stop-color:var(--calcite-color-status-danger);stop-opacity:.2}.esri-oriented-imagery-viewer__navigation-pointer{fill:var(--calcite-color-foreground-1);fill-rule:evenodd;stroke:#0000;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-width:0}.esri-oriented-imagery-viewer__navigation-pointer-north{fill:var(--calcite-color-status-danger)}.esri-oriented-imagery-viewer__navigation-wrapper{z-index:1;position:absolute;bottom:0;right:0;overflow:hidden}.esri-oriented-imagery-viewer__navigation-wrapper--zoomed{transform-origin:100% 100%;transform:scale(1.5)}.esri-oriented-imagery-viewer__navigation-wrapper-boundary{fill:var(--calcite-color-foreground-1);fill-opacity:.25;stroke:var(--calcite-color-border-2)}.esri-oriented-imagery-viewer__navigation-sector{fill:none}.esri-oriented-imagery-viewer__navigation-sector-separator{stroke:var(--calcite-color-border-2);stroke-width:1px}.esri-oriented-imagery-viewer__navigation-sector-cross{stroke:var(--calcite-color-status-danger);stroke-width:1px}.esri-oriented-imagery-viewer__navigation-sector-enabled{fill:var(--calcite-color-foreground-1);stroke:var(--calcite-color-border-2);stroke-width:1px}.esri-oriented-imagery-viewer__navigation-sector-disabled{fill:var(--calcite-color-foreground-3);stroke:var(--calcite-color-border-2);stroke-width:1px}.esri-oriented-imagery-viewer__navigation-sector-outer{fill:var(--calcite-color-foreground-1);fill-opacity:.4;stroke:none}.esri-oriented-imagery-viewer__pro .esri-oriented-imagery-viewer{width:100%;max-width:unset;height:100%;max-height:unset;position:static}.esri-oriented-imagery-viewer__sketch-tools{justify-content:center;align-items:center;width:100%;display:flex;position:absolute;bottom:0}.esri-oriented-imagery-viewer__navigation-ui{box-sizing:border-box;inset-block-end:var(--calcite-spacing-md);inset-inline:var(--calcite-spacing-md);transform-style:preserve-3d;z-index:var(--calcite-z-index-overlay);pointer-events:none;flex-direction:column;align-items:center;display:flex;position:absolute;overflow:hidden}.esri-oriented-imagery-viewer__navigation-ui__direction{--esri-oriented-imagery-viewer__navigation-ui-direction-color: wheat;--calcite-icon-color: var(--esri-oriented-imagery-viewer__navigation-ui-direction-color);cursor:not-allowed;width:160px;height:160px;position:absolute}.esri-oriented-imagery-viewer__navigation-ui__direction:not([disabled]){cursor:pointer;pointer-events:auto}.esri-oriented-imagery-viewer__navigation-ui__direction:not([disabled]):hover{--calcite-icon-color: var(--calcite-color-brand);background-color:rgba(var(--calcite-color-brand),var(--calcite-opacity-half));border-radius:50%}.esri-oriented-imagery-viewer__navigation-ui__direction-pad{box-sizing:border-box;transform:perspective(400px) rotateX(60deg) var(--rotate-transform);filter:drop-shadow(0 2px 1px #00000080);width:330px;height:330px}.esri-oriented-imagery-viewer__navigation-ui__direction--top{transform-style:preserve-3d;top:0;left:50%;transform:translate(-50%)}.esri-oriented-imagery-viewer__navigation-ui__direction--bottom{transform-style:preserve-3d;bottom:0;left:50%;transform:translate(-50%)}.esri-oriented-imagery-viewer__navigation-ui__direction--left{transform-style:preserve-3d;top:50%;left:0;transform:translateY(-50%)}.esri-oriented-imagery-viewer__navigation-ui__direction--right{transform-style:preserve-3d;top:50%;right:0;transform:translateY(-50%)}.esri-panoramic-viewer{z-index:1;position:relative;width:100%;height:100%}`, v = d(o);
+class h extends n {
   constructor() {
-    super(...arguments), this.widget = m(this), this._hasOrientedImageryLayerToAdd = !1, this.viewModel = this.widget.viewModel, this.view = this.widget.view, this.autoDestroyDisabled = !1, this.currentCoverageVisible = this.widget.currentCoverageVisible, this.dataCaptureEnabled = this.widget.dataCaptureEnabled, 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.imageOverlaysOpened = this.widget.imageOverlaysOpened, 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.referencePoint = this.widget.referencePoint, this.arcgisPropertyChange = t()("imageGalleryEnabled", "layer"), this.arcgisReady = s();
+    super(...arguments), this.widget = v(this), this._hasOrientedImageryLayerToAdd = !1, this.viewModel = this.widget.viewModel, this.view = this.widget.view, this.autoDestroyDisabled = !1, this.currentCoverageVisible = this.widget.currentCoverageVisible, this.dataCaptureEnabled = this.widget.dataCaptureEnabled, this.disabled = this.widget.disabled, this.galleryOpened = this.widget.galleryOpened, this.hideHeader = this.widget.visibleElements.header, this.hideMenu = this.widget.visibleElements.menu, this.icon = this.widget.icon, this.imageEnhancementToolActive = this.widget.imageEnhancementToolActive, this.imageGalleryEnabled = this.widget.imageGalleryEnabled, this.imageOverlaysOpened = this.widget.imageOverlaysOpened, this.isAdditionalCoverageVisible = this.widget.isAdditionalCoverageVisible, this.isAdditionalPointSourcesVisible = this.widget.isAdditionalPointSourcesVisible, this.label = this.widget.label, this.layer = this.widget.layer, this.layerId = c(this, (e) => {
+      e && (this.layer = e);
+    }), this.mapImageConversionToolState = this.widget.mapImageConversionToolState, this.navigationToolActive = this.widget.navigationToolActive, this.preloadMedia = this.widget.preloadMedia, this.referencePoint = this.widget.referencePoint, this.arcgisPropertyChange = t()("imageGalleryEnabled", "layer"), this.arcgisReady = s();
   }
   static {
-    this.properties = { view: 0, autoDestroyDisabled: 5, currentCoverageVisible: 5, dataCaptureEnabled: 5, disabled: 5, galleryOpened: 5, icon: 1, imageEnhancementToolActive: 5, imageGalleryEnabled: 36, imageOverlaysOpened: 5, isAdditionalCoverageVisible: 5, isAdditionalPointSourcesVisible: 5, label: 1, layer: 0, mapImageConversionToolState: 5, navigationToolActive: 5, orientedImageryLayerItemId: 1, referenceElement: 1, referencePoint: 32 };
+    this.properties = { view: 0, autoDestroyDisabled: 5, currentCoverageVisible: 5, dataCaptureEnabled: 5, disabled: 5, galleryOpened: 5, hideHeader: 5, hideMenu: 5, icon: 1, imageEnhancementToolActive: 5, imageGalleryEnabled: 36, imageOverlaysOpened: 5, isAdditionalCoverageVisible: 5, isAdditionalPointSourcesVisible: 5, label: 1, layer: 0, layerId: 1, mapImageConversionToolState: 5, navigationToolActive: 5, orientedImageryLayerItemId: 1, preloadMedia: 5, referenceElement: 1, referencePoint: 32 };
   }
   static {
-    this.styles = [c, g];
+    this.styles = [g, m];
   }
   async destroy() {
     await this.manager.destroy();
   }
+  async loadBestImage(e, i) {
+    return await this.widget.loadBestImage(e, i);
+  }
   willUpdate(e) {
     if (e.has("orientedImageryLayerItemId")) {
       const i = this.orientedImageryLayerItemId;
-      i && this.widget && (this.layer = new o({ portalItem: { id: i } }), this.widget.view ? this.widget.view.map?.add(this.layer) : this._hasOrientedImageryLayerToAdd = !0);
+      i && this.widget && (this.layer = new a({ portalItem: { id: i } }), this.widget.view ? this.widget.view.map?.add(this.layer) : this._hasOrientedImageryLayerToAdd = !0);
     }
   }
   loaded() {
@@ -37,7 +43,7 @@ class v extends n {
     e && (this.widget.view?.map?.add(e), this._hasOrientedImageryLayerToAdd = !1);
   }
 }
-r("arcgis-oriented-imagery-viewer", v);
+r("arcgis-oriented-imagery-viewer", h);
 export {
-  v as ArcgisOrientedImageryViewer
+  h as ArcgisOrientedImageryViewer
 };

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

@@ -0,0 +1,41 @@
+/// <reference path="../../index.d.ts" />
+import type NonPanoramicMedia from "./support/NonPanoramicMedia.js";
+import type Graphic from "@arcgis/core/Graphic.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { NonPanoramicMediaProperties } from "./support/NonPanoramicMedia.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+/** @internal */
+export abstract class ArcgisOrientedImageryViewerImageViewer extends LitElement {
+  /** @internal */
+  protected _messages: Partial<{ title: string; }> & T9nMeta<{ title: string; }>;
+  /** @default false */
+  accessor hideHeader: boolean;
+  /** @default false */
+  accessor hideLoader: boolean;
+  /** @default false */
+  accessor hideZoomControls: boolean;
+  get media(): NonPanoramicMediaProperties | undefined;
+  set media(value: NonPanoramicMedia | NonPanoramicMediaProperties | undefined);
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { title?: string | undefined; };
+  /** @default 0 */
+  accessor rotation: number;
+  /** @param graphic */
+  addGraphic(graphic: Graphic): void;
+  /** @param graphics */
+  addGraphics(graphics: Graphic[]): void;
+  clearGraphics(): void;
+  mediaOnLoad(): Promise<NonPanoramicMedia | undefined>;
+  /** @param graphic */
+  removeGraphic(graphic: Graphic): void;
+  /** @param graphics */
+  removeGraphics(graphics: Graphic[]): void;
+  "@setterTypes": {
+    media?: NonPanoramicMedia | NonPanoramicMediaProperties | undefined;
+  };
+}

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

@@ -0,0 +1,299 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { c as p } from "../../chunks/runtime.js";
+import { css as g, html as _ } from "lit";
+import { LitElement as y } from "@arcgis/lumina";
+import { t as m } from "../../chunks/async-utils.js";
+import { property as c, subclass as f } from "@arcgis/core/core/accessorSupport/decorators.js";
+import * as u from "@arcgis/toolkit/log";
+import w from "@arcgis/core/core/Accessor.js";
+import "@arcgis/core/views/MapView.js";
+import v from "@arcgis/core/geometry/SpatialReference.js";
+import { watch as d } from "@arcgis/core/core/reactiveUtils.js";
+import { rotateDimensions as L, registerPanConstraint as C } from "@arcgis/core/applications/Components/OrientedImageryViewer/ImageViewer/utils.js";
+import R from "@arcgis/core/layers/support/TileInfo.js";
+import { u as M } from "../../chunks/useT9n.js";
+import "@arcgis/core/Graphic.js";
+import G from "@arcgis/core/layers/GraphicsLayer.js";
+import { GenericController as b } from "@arcgis/lumina/controllers";
+import { createRef as P, ref as I } from "lit/directives/ref.js";
+const x = g`:host{height:100%;--arcgis-view-color-focus: none}`;
+var z = Object.defineProperty, O = Object.getOwnPropertyDescriptor, h = (r, e, i, t) => {
+  for (var a = t > 1 ? void 0 : t ? O(e, i) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (a = (t ? o(e, i, a) : o(a)) || a);
+  return t && a && z(e, i, a), a;
+};
+let n = class extends w {
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  constructor(r) {
+    super(r), this.autoLoad = !1;
+  }
+  static isNonPanoramicMedia(r) {
+    return !!r && typeof r == "object" && "declaredClass" in r && typeof r.declaredClass == "string" && r.declaredClass === "components.oriented-imagery-viewer.support.NonPanoramicMedia";
+  }
+  destroy() {
+    this._cache?.destroy(), this._cache = void 0;
+  }
+  get layer() {
+    return this._cache;
+  }
+  get size() {
+    if (!this._cache || this._cache.destroyed || this._cache.loadError || !this._cache.serviceRasterInfo)
+      return;
+    const { serviceRasterInfo: r } = this._cache;
+    return [r.width, r.height];
+  }
+  //---------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //---------------------------------------------------------------------------
+  async load(r) {
+    if (this._cache && !this._cache.destroyed)
+      return await this._cache.load(r), { layer: this._cache, size: this.size };
+    const { url: e, customParameters: i } = this;
+    let t = this.datasetFormat;
+    if (!e)
+      throw new Error("URL is required to load NonPanoramicMedia.");
+    if (!t) {
+      const o = await import("../../chunks/urlUtils.js");
+      if (m(r), t = o.guessExtensionFromURI(e), !t) {
+        try {
+          t = await o.getDatasetFormat(e);
+        } catch {
+          u.log("warn", this, "Failed to determine dataset format from URL or response headers."), t = "UNKNOWN FORMAT";
+        }
+        m(r);
+      }
+    }
+    this.datasetFormat = t;
+    const a = (await import("@arcgis/core/layers/ImageryTileLayer.js")).default;
+    m(r);
+    const s = new a({
+      url: e,
+      // @ts-ignore - datasetFormat is not part of the official ImageryTileLayer properties, but is used in the custom ioConfig for loading the image and is necessary to pass along the format information.
+      ioConfig: {
+        skipExtensions: ["aux.xml", "jgw"],
+        skipMapInfo: !0,
+        datasetFormat: t
+      },
+      customParameters: i ?? void 0
+    });
+    return await s.load(r), m(r), this._cache = s, { layer: this._cache, size: this.size };
+  }
+};
+h([
+  c()
+], n.prototype, "_cache", 2);
+h([
+  c()
+], n.prototype, "autoLoad", 2);
+h([
+  c()
+], n.prototype, "customParameters", 2);
+h([
+  c()
+], n.prototype, "datasetFormat", 2);
+h([
+  c()
+], n.prototype, "url", 2);
+h([
+  c()
+], n.prototype, "layer", 1);
+h([
+  c()
+], n.prototype, "size", 1);
+n = h([
+  f("components.oriented-imagery-viewer.support.NonPanoramicMedia")
+], n);
+function A(r, e, i, t, a) {
+  const { width: s, height: o } = L(r, e, a);
+  return Math.max(s / i, o / t);
+}
+const F = 96, E = 39.37, l = E * F;
+function N(r) {
+  const e = l * 0.25, i = l * r, t = [];
+  let a = i;
+  for (; a > e; )
+    t.push(a), a *= 0.5;
+  t.push(e);
+  const { lods: s } = R.create({
+    scales: t
+  });
+  return {
+    minScale: i,
+    lods: s
+  };
+}
+class H extends b {
+  get graphics() {
+    return this._graphicsLayer?.graphics;
+  }
+  _ensureGraphicsLayer() {
+    (!this._graphicsLayer || this._graphicsLayer.destroyed) && (this._graphicsLayer = new G({
+      title: "Overlays",
+      listMode: "hide",
+      visible: !0,
+      blendMode: "source-atop"
+    }));
+  }
+  hostLoaded() {
+    this._ensureGraphicsLayer(), this.component.manager.onLifecycle(() => [
+      d(
+        () => this.component?.map,
+        (e, i) => {
+          i?.layers.remove(this._graphicsLayer), e && e?.layers.add(this._graphicsLayer);
+        },
+        { initial: !0, sync: !0 }
+      ),
+      d(
+        () => this.component?.map?.allLayers.length,
+        (e) => {
+          e && this.component?.map?.layers.reorder(this._graphicsLayer, e - 1);
+        },
+        { initial: !0, sync: !0 }
+      )
+    ]);
+  }
+  /**
+   * Adds a graphic to the graphics layer.
+   */
+  addGraphic(e) {
+    this._graphicsLayer.add(e);
+  }
+  /**
+   * Adds graphics to the graphics layer.
+   */
+  addGraphics(e) {
+    this._graphicsLayer.addMany(e);
+  }
+  /**
+   * Removes a graphic from the graphics layer.
+   */
+  removeGraphic(e) {
+    this._graphicsLayer?.destroyed || this._graphicsLayer.remove(e);
+  }
+  /**
+   * Removes graphics from the graphics layer.
+   */
+  removeGraphics(e) {
+    this._graphicsLayer?.destroyed || this._graphicsLayer.removeMany(e);
+  }
+  /**
+   * Removes all graphics from the graphics layer.
+   */
+  clearGraphics() {
+    this._graphicsLayer?.destroyed || this._graphicsLayer.removeAll();
+  }
+  /**
+   * Destroys the graphics layer.
+   */
+  destroy() {
+    this._graphicsLayer?.destroy();
+  }
+}
+class S extends y {
+  constructor() {
+    super(...arguments), this._messages = M(), this._graphicsController = new H(this), this._imageChanged = !1, this._internalMap = P(), this._loading = !1, this.hideHeader = !1, this.hideLoader = !1, this.hideZoomControls = !1, this.messageOverrides = this._messages._overrides, this.rotation = 0;
+  }
+  static {
+    this.properties = { _imageChanged: 16, _internalMap: 16, _image: 16, _loading: 16, _media: 16, hideHeader: 5, hideLoader: 5, hideZoomControls: 5, messageOverrides: 0, media: 0, rotation: 9 };
+  }
+  static {
+    this.styles = [x];
+  }
+  get imageRenderer() {
+    return this._internalMap?.value?.view;
+  }
+  get map() {
+    return this.imageRenderer?.map;
+  }
+  get media() {
+    return this._media;
+  }
+  set media(e) {
+    if (!e) {
+      this._mediaAbortController?.abort(), this._media = void 0, this._clearImage();
+      return;
+    }
+    this._media = e instanceof n ? e : new n(e);
+  }
+  addGraphic(e) {
+    this._graphicsController.addGraphic(e);
+  }
+  addGraphics(e) {
+    this._graphicsController.addGraphics(e);
+  }
+  clearGraphics() {
+    this._graphicsController.clearGraphics();
+  }
+  async mediaOnLoad() {
+    return this._mediaPromise && await this._mediaPromise, this._media;
+  }
+  removeGraphic(e) {
+    this._graphicsController.removeGraphic(e);
+  }
+  removeGraphics(e) {
+    this._graphicsController.removeGraphics(e);
+  }
+  loaded() {
+    this.manager.onLifecycle(() => [
+      this._createResizeConstraint(),
+      this._createRotationHandler(),
+      this._createPanConstraint(),
+      d(() => this._media, (e) => {
+        this._mediaAbortController?.abort(), e && (this._mediaAbortController = new AbortController(), this._mediaPromise = this._loadMediaInternal(e, this._mediaAbortController));
+      }, {
+        initial: !0,
+        sync: !0
+      })
+    ]);
+  }
+  _createPanConstraint() {
+    return d(() => ({ image: this._image, imageRenderer: this.imageRenderer }), ({ image: e, imageRenderer: i }) => {
+      !e || !i?.ready || C(i, e);
+    }, { sync: !0, initial: !0 });
+  }
+  _createResizeConstraint() {
+    return d(() => {
+      if (!this.imageRenderer?.ready || !this._image)
+        return;
+      const { width: e, height: i } = this._image.serviceRasterInfo, { width: t, height: a, rotation: s } = this.imageRenderer;
+      return A(e, i, t, a, s);
+    }, (e) => {
+      if (!e || !this.imageRenderer)
+        return;
+      const { constraints: i, scale: t } = this.imageRenderer, a = i.minScale, { lods: s, minScale: o } = N(e);
+      i.set({
+        minScale: o,
+        lods: s
+      }), this.imageRenderer.scale = this._imageChanged || Math.abs(t - a) <= 1e-6 ? o : t, this._imageChanged = !1;
+    }, { sync: !0, initial: !0 });
+  }
+  _createRotationHandler() {
+    return d(() => this.rotation, (e) => {
+      this.imageRenderer && (this.imageRenderer.constraints.rotationEnabled = !0, this.imageRenderer.rotation = e, this.imageRenderer.constraints.rotationEnabled = !1);
+    }, { sync: !0, initial: !0 });
+  }
+  _clearImage() {
+    this._image?.destroy(), this._image = void 0;
+  }
+  async _loadMediaInternal(e, i) {
+    if (this._loading = !0, this._clearImage(), !e)
+      throw new Error("No media provided");
+    const { layer: t } = await e.load(i).finally(() => {
+      this._loading = !1;
+    });
+    m(i), this._imageChanged = !0, this._image = t, this.imageRenderer?.map?.layers.add(this._image);
+  }
+  render() {
+    return _`<calcite-panel .loading=${this.hideLoader ? void 0 : this._loading} .heading=${this.hideHeader ? void 0 : this._messages.title}><arcgis-map hide-attribution .spatialReference=${v.WebMercator} ${I(this._internalMap)}><arcgis-zoom .hidden=${this.hideZoomControls} slot=top-left></arcgis-zoom></arcgis-map></calcite-panel>`;
+  }
+}
+p("arcgis-oriented-imagery-viewer-image-viewer", S);
+export {
+  S as ArcgisOrientedImageryViewerImageViewer
+};

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

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

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

@@ -0,0 +1,4 @@
+import "@esri/calcite-components/components/calcite-panel";
+import "../arcgis-map/index.js";
+import "../arcgis-zoom/index.js";
+export * from "./customElement.js";

package/dist/components/arcgis-oriented-imagery-viewer-image-viewer/support/NonPanoramicMedia.d.ts

@@ -0,0 +1,25 @@
+import type ImageryTileLayer from "@arcgis/core/layers/ImageryTileLayer.js";
+import type Accessor from "@arcgis/core/core/Accessor.js";
+import type { AbortOptions } from "@arcgis/core/core/promiseUtils.js";
+
+export interface NonPanoramicMediaProperties extends Partial<Pick<NonPanoramicMedia, "autoLoad" | "customParameters" | "datasetFormat" | "url">> {}
+
+/** @internal */
+export default class NonPanoramicMedia extends Accessor {
+  /** @param value */
+  static isNonPanoramicMedia(value: unknown): value is NonPanoramicMedia;
+  constructor(properties: NonPanoramicMediaProperties);
+  /** @default false */
+  accessor autoLoad: boolean;
+  accessor customParameters: Record<string, string> | undefined;
+  accessor datasetFormat: string | undefined;
+  get layer(): ImageryTileLayer | undefined;
+  get size(): [number, number] | undefined;
+  accessor url: string | undefined;
+  destroy(): void;
+  /** @param options */
+  load(options?: AbortOptions): Promise<{
+      layer: ImageryTileLayer;
+      size: [number, number] | undefined;
+  }>;
+}