@arcgis/map-components 5.2.0-next.12 → 5.2.0-next.121

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

@@ -1,27 +1,30 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as t } from "../../chunks/runtime.js";
-import { usePropertyChange as a } from "@arcgis/lumina/controllers";
-import o from "@arcgis/core/layers/OrientedImageryLayer.js";
+import { usePropertyChange as o } from "@arcgis/lumina/controllers";
+import a from "@arcgis/core/layers/OrientedImageryLayer.js";
 import n from "@arcgis/core/widgets/OrientedImageryViewer.js";
 import { LitElement as s, createEvent as d } from "@arcgis/lumina";
 import { log as l } from "@arcgis/toolkit/log";
-import { m as g } from "../../chunks/useWidget.js";
-import { css as c } from "lit";
+import { m as c } from "../../chunks/useWidget.js";
+import { css as g } from "lit";
 import { s as m } from "../../chunks/esri-main.js";
 import { u as v } from "../../chunks/useLayerById.js";
-const h = c`:host{--esri-oriented-imagery-viewer-min-width: var(--arcgis-oriented-imagery-viewer-min-width, 288px);--esri-oriented-imagery-viewer-min-height: var(--arcgis-oriented-imagery-viewer-min-height, 348px)}.esri-imagery-viewer{width:100%;height:100%}.esri-oriented-imagery-viewer{--esri-oriented-imagery-viewer-action-icon-size: 8px;--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__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-oriented-imagery-viewer--notice{margin-block:auto}.esri-panoramic-viewer{z-index:1;position:relative;width:100%;height:100%}`, y = g(n), w = "map-components:arcgis-oriented-imagery-viewer";
+const h = g`:host{--esri-oriented-imagery-viewer-min-width: var(--arcgis-oriented-imagery-viewer-min-width, 288px);--esri-oriented-imagery-viewer-min-height: var(--arcgis-oriented-imagery-viewer-min-height, 348px);inline-size:100%;block-size:100%}.esri-image-viewer{width:100%;height:100%}.esri-image-viewer__slider-container{--calcite-block-padding: 0;box-sizing:border-box;box-shadow:none;padding-inline:var(--calcite-spacing-md);background-color:#0000;border:none;width:100%;margin:0;overflow:hidden}.esri-image-viewer__slider-container calcite-slider{width:100%}.esri-oriented-imagery-viewer{--esri-oriented-imagery-viewer-action-icon-size: 8px;--calcite-dialog-size-x: 210px;--calcite-dialog-min-size-y: 90px;--calcite-font-weight-medium: $font-weight;--calcite-font-size-0: $font-size;--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__superimpose-tools{box-shadow:none;width:100%;height:auto;margin:0}.esri-oriented-imagery-viewer__superimpose-tools .esri-oriented-imagery-viewer__image-enhancement-tool-container{padding-block:var(--calcite-spacing-sm) var(--calcite-spacing-md);width:100%;margin-block:0}.esri-oriented-imagery-viewer__image-overlays{z-index:1;margin:auto 1% 0;border:1px solid var(--calcite-color-border-2);align-items:center;width:98%;height:140px;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}.esri-oriented-imagery-viewer-container-measurement{border-top:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);border-radius:0 0 var(--calcite-corner-radius-round) var(--calcite-corner-radius-round);background:var(--calcite-color-foreground-1);flex:1 0 auto;order:1;align-self:stretch;width:100%;height:50%;display:flex}@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__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--video{inset-block-end:calc(var(--calcite-spacing-xxxl) * 3)}.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--notice{margin-block:auto}.esri-oriented-imagery-viewer__navigation-ui{box-sizing:border-box;transform-style:preserve-3d;z-index:var(--calcite-z-index-overlay);aspect-ratio:1;pointer-events:none;flex-direction:column;align-items:center;width:50%;max-width:330px;display:flex;position:absolute;inset-block-end:0;inset-inline:50%;overflow:hidden;translate:-50%}.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);transform-origin:top;transform-style:preserve-3d;cursor:not-allowed;border:3px solid #bfc5cc;border-radius:50%;width:4.5em;height:4.5em;transition:border-color .15s;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);border-color:var(--calcite-color-brand)}.esri-oriented-imagery-viewer__navigation-ui__direction-pad{box-sizing:border-box;filter:drop-shadow(0 2px 1px #00000080);width:100%;height:100%;transform:perspective(400px) rotateX(60deg)}.esri-oriented-imagery-viewer__navigation-settings-ui [slot=content-bottom]{padding:.5rem;display:none}.esri-oriented-imagery-viewer__navigation-settings-ui [selected]>[slot=content-bottom]{display:block}.esri-panoramic-viewer{width:100%;height:100%;overflow-x:hidden}.esri-panoramic-viewer__slider-container{--calcite-block-padding: 0;box-sizing:border-box;box-shadow:none;padding-inline:var(--calcite-spacing-md);background-color:#0000;border:none;width:100%;margin:0;overflow:hidden}.esri-panoramic-viewer__slider-container calcite-slider{width:100%}`, w = c(n), y = "map-components:arcgis-oriented-imagery-viewer";
 class p extends s {
   constructor() {
-    super(...arguments), this.widget = y(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.mapLayerId = v(this, (e) => {
-      e && (e.type === "oriented-imagery" ? this.layer = e : l("warn", this, `${w} - layer with id ${this.mapLayerId} is not a valid Oriented Imagery Layer`));
-    }), this.mapImageConversionToolState = this.widget.mapImageConversionToolState, this.navigationToolActive = this.widget.navigationToolActive, this.preloadMedia = this.widget.preloadMedia, this.referencePoint = this.widget.referencePoint, this.arcgisPropertyChange = a()("imageGalleryEnabled", "layer"), this.arcgisReady = d();
+    super(...arguments), this.widget = w(this), this._hasOrientedImageryLayerToAdd = !1, this.viewModel = this.widget.viewModel, this.view = this.widget.view, this.autoDestroyDisabled = !1, this.actionBarPosition = this.widget.actionBarPosition, 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.mapLayerId = v(this, (e) => {
+      e && (e.type === "oriented-imagery" ? this.layer = e : l("warn", this, `${y} - layer with id ${this.mapLayerId} is not a valid Oriented Imagery Layer`));
+    }), this.mapImageConversionToolState = this.widget.mapImageConversionToolState, this.navigationToolActive = this.widget.navigationToolActive, this.preloadMedia = this.widget.preloadMedia, this.referencePoint = this.widget.referencePoint, this.arcgisPropertyChange = o()("imageGalleryEnabled", "layer"), this.arcgisReady = d();
   }
   static {
-    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, mapLayerId: 1, mapImageConversionToolState: 5, navigationToolActive: 5, orientedImageryLayerItemId: 1, preloadMedia: 5, referenceElement: 1, referencePoint: 32 };
+    this.properties = { view: 0, autoDestroyDisabled: 5, actionBarPosition: 1, 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, mapLayerId: 1, mapImageConversionToolState: 5, navigationToolActive: 5, orientedImageryLayerItemId: 1, preloadMedia: 5, referenceElement: 1, referencePoint: 32, selectedPoint: 32 };
   }
   static {
     this.styles = [m, h];
   }
+  get selectedPoint() {
+    return this.widget.selectedPoint;
+  }
   async destroy() {
     await this.manager.destroy();
   }
@@ -33,7 +36,7 @@ class p extends s {
       const i = this.orientedImageryLayerItemId;
       if (i && this.widget) {
         const r = { portalItem: { id: i } };
-        this.layer = new o(r), this.widget.view ? this.widget.view.map?.add(this.layer) : this._hasOrientedImageryLayerToAdd = !0;
+        this.layer = new a(r), this.widget.view ? this.widget.view.map?.add(this.layer) : this._hasOrientedImageryLayerToAdd = !0;
       }
     }
   }

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

@@ -0,0 +1,48 @@
+/// <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 { useT9n } from "../../controllers/useT9n.js";
+import type { ArcgisZoom } from "../arcgis-zoom/customElement.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+/** @internal */
+export abstract class ArcgisOrientedImageryViewerNonPanoramicViewer extends LitElement {
+  /** @internal */
+  protected _messages: Partial<{ title: string; }> & T9nMeta<{ title: string; }>;
+  /** @default false */
+  accessor hideHeader: boolean;
+  /** @default false */
+  accessor hideLoader: boolean;
+  /** @default false */
+  accessor hideVideoControls: 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: NonNullable<ArcgisZoom["messageOverrides"]> & NonPanoramicViewerMessageOverrides;
+  /** @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;
+  };
+}
+
+/** @internal */
+export type NonPanoramicViewerMessageOverrides = ReturnType<typeof useT9n<{ title: string; }>>["_overrides"];

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

@@ -0,0 +1,410 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as E } from "../../chunks/runtime.js";
+import { css as x, html as u } from "lit";
+import { LitElement as P } from "@arcgis/lumina";
+import { t as l } from "../../chunks/async-utils.js";
+import { property as h, subclass as C } from "@arcgis/core/core/accessorSupport/decorators.js";
+import * as M from "@arcgis/toolkit/log";
+import V from "@arcgis/core/core/Accessor.js";
+import w from "@arcgis/core/geometry/Extent.js";
+import b from "@arcgis/core/geometry/SpatialReference.js";
+import { watch as p } from "@arcgis/core/core/reactiveUtils.js";
+import { rotateDimensions as S, registerPanConstraint as F } from "@arcgis/core/applications/Components/OrientedImageryViewer/ImageViewer/utils.js";
+import H from "@arcgis/core/layers/support/TileInfo.js";
+import { u as L } from "../../chunks/useT9n.js";
+import { G as z } from "../../chunks/graphicsLayerController.js";
+import { createRef as I, ref as T } from "lit/directives/ref.js";
+const O = x`:host{height:100%;--arcgis-view-color-focus: none}`, R = {
+  xmin: -150,
+  ymin: 1,
+  xmax: 20,
+  ymax: 80,
+  spatialReference: {
+    wkid: 4326
+  }
+}, g = 1e-6;
+function G(i, e) {
+  if (!e)
+    return null;
+  const t = i.width / 2, a = i.height / 2, r = e.xmin + t, s = e.xmax - t, o = e.ymin + a, c = e.ymax - a;
+  return r >= s || o >= c ? null : new w({
+    xmin: r,
+    xmax: s,
+    ymin: o,
+    ymax: c,
+    spatialReference: i.spatialReference
+  });
+}
+var N = Object.defineProperty, A = Object.getOwnPropertyDescriptor, d = (i, e, t, a) => {
+  for (var r = a > 1 ? void 0 : a ? A(e, t) : e, s = i.length - 1, o; s >= 0; s--)
+    (o = i[s]) && (r = (a ? o(e, t, r) : o(r)) || r);
+  return a && r && N(e, t, r), r;
+};
+let n = class extends V {
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  constructor(i) {
+    super(i), this.autoplay = !1, this.loop = !1, this.type = "image", this.autoLoad = !1;
+  }
+  static isNonPanoramicMedia(i) {
+    return !!i && typeof i == "object" && "declaredClass" in i && typeof i.declaredClass == "string" && i.declaredClass === "components.oriented-imagery-viewer.support.NonPanoramicMedia";
+  }
+  destroy() {
+    this._cache?.destroy(), this._cache = void 0, this._videoElement = void 0;
+  }
+  get layer() {
+    return this._cache;
+  }
+  get videoElement() {
+    return this._videoElement;
+  }
+  get size() {
+    if (!this._cache || this._cache.destroyed || this._cache.loadError)
+      return;
+    const { type: i } = this._cache;
+    if (i === "imagery-tile") {
+      const { serviceRasterInfo: e } = this._cache;
+      return e ? [e.width, e.height] : void 0;
+    }
+    if (i === "media") {
+      const e = this._videoElement ?? this._getVideoElementFromLayer(this._cache);
+      return !e || e.videoWidth <= 0 || e.videoHeight <= 0 ? void 0 : [e.videoWidth, e.videoHeight];
+    }
+  }
+  //---------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //---------------------------------------------------------------------------
+  async load(i) {
+    return this.type === "video" ? await this._loadVideo(i) : await this._loadImage(i);
+  }
+  async _loadVideo(i) {
+    if (this._cache && !this._cache.destroyed && this._cache.type === "media")
+      return await this._cache.load(i), this._videoElement = this._getVideoElementFromLayer(this._cache) ?? this._videoElement, this._applyVideoPlaybackOptions(), { layer: this._cache, size: this.size };
+    const { title: e, url: t } = this;
+    if (!t)
+      throw new Error("URL is required to load NonPanoramicMedia.");
+    const a = (await import("@arcgis/core/geometry/Extent.js")).default, r = (await import("@arcgis/core/layers/support/ExtentAndRotationGeoreference.js")).default, s = (await import("@arcgis/core/layers/support/VideoElement.js")).default, o = (await import("@arcgis/core/layers/MediaLayer.js")).default;
+    l(i);
+    const c = new s({
+      video: t,
+      georeference: new r({
+        extent: new a(R)
+      })
+    });
+    await c.load(i), l(i), this._videoElement = c.content ?? void 0, this._applyVideoPlaybackOptions();
+    const m = new o({
+      source: c,
+      title: e
+    });
+    return await m.load(i), l(i), this._cache = m, { layer: this._cache, size: this.size };
+  }
+  _getVideoElementFromLayer(i) {
+    const e = i.source;
+    if (!e || !("content" in e))
+      return;
+    const { content: t } = e;
+    if (t instanceof HTMLVideoElement)
+      return t;
+  }
+  _applyVideoPlaybackOptions() {
+    const i = this._videoElement;
+    i && (i.autoplay = this.autoplay, i.loop = this.loop, this.autoplay || i.pause());
+  }
+  async _loadImage(i) {
+    if (this._cache && !this._cache.destroyed && this._cache.type === "imagery-tile")
+      return await this._cache.load(i), this._videoElement = void 0, { layer: this._cache, size: this.size };
+    const { url: e, customParameters: t } = this;
+    let a = this.datasetFormat;
+    if (!e)
+      throw new Error("URL is required to load NonPanoramicMedia.");
+    if (!a) {
+      const o = await import("../../chunks/urlUtils.js");
+      if (l(i), a = o.guessExtensionFromURI(e), !a) {
+        try {
+          a = await o.getDatasetFormat(e);
+        } catch {
+          M.log("warn", this, "Failed to determine dataset format from URL or response headers."), a = "UNKNOWN FORMAT";
+        }
+        l(i);
+      }
+    }
+    this.datasetFormat = a;
+    const r = (await import("@arcgis/core/layers/ImageryTileLayer.js")).default;
+    l(i);
+    const s = new r({
+      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: a
+      },
+      customParameters: t ?? void 0
+    });
+    return await s.load(i), l(i), this._videoElement = void 0, this._cache = s, { layer: this._cache, size: this.size };
+  }
+};
+d([
+  h()
+], n.prototype, "_cache", 2);
+d([
+  h()
+], n.prototype, "_videoElement", 2);
+d([
+  h()
+], n.prototype, "autoplay", 2);
+d([
+  h()
+], n.prototype, "loop", 2);
+d([
+  h()
+], n.prototype, "title", 2);
+d([
+  h()
+], n.prototype, "type", 2);
+d([
+  h()
+], n.prototype, "layer", 1);
+d([
+  h()
+], n.prototype, "videoElement", 1);
+d([
+  h()
+], n.prototype, "size", 1);
+d([
+  h()
+], n.prototype, "autoLoad", 2);
+d([
+  h()
+], n.prototype, "customParameters", 2);
+d([
+  h()
+], n.prototype, "datasetFormat", 2);
+d([
+  h()
+], n.prototype, "url", 2);
+n = d([
+  C("components.oriented-imagery-viewer.support.NonPanoramicMedia")
+], n);
+function W(i, e, t, a, r) {
+  const { width: s, height: o } = S(i, e, r);
+  return Math.max(s / t, o / a);
+}
+const $ = 96, U = 39.37, y = U * $;
+function v(i) {
+  const e = y * 0.25, t = y * i, a = [];
+  let r = t;
+  for (; r > e; )
+    a.push(r), r *= 0.5;
+  a.push(e);
+  const { lods: s } = H.create({
+    scales: a
+  });
+  return {
+    minScale: t,
+    lods: s
+  };
+}
+class j extends P {
+  constructor() {
+    super(...arguments), this._messages = L(), this.#t = new z(this), this._imageChanged = !1, this._internalMap = I(), this._loading = !1, this.hideHeader = !1, this.hideLoader = !1, this.hideZoomControls = !1, this.hideVideoControls = !1, this.rotation = 0;
+  }
+  static {
+    this.properties = { _imageChanged: 16, _internalMap: 16, _layer: 16, _videoTargetExtent: 16, _videoRef: 16, _loading: 16, _media: 16, hideHeader: 5, hideLoader: 5, hideZoomControls: 5, hideVideoControls: 5, messageOverrides: 0, media: 0, rotation: 9 };
+  }
+  static {
+    this.styles = [O];
+  }
+  #t;
+  #i;
+  #a;
+  #e;
+  #s;
+  #r;
+  get imageRenderer() {
+    return this._internalMap?.value?.view;
+  }
+  get map() {
+    return this.imageRenderer?.map;
+  }
+  get media() {
+    return this._media;
+  }
+  set media(e) {
+    if (!e) {
+      this.#i?.abort(), this._media = void 0, this._clearMedia();
+      return;
+    }
+    this._media = e instanceof n ? e : new n(e);
+  }
+  addGraphic(e) {
+    this.#t.addGraphic(e);
+  }
+  addGraphics(e) {
+    this.#t.addGraphics(e);
+  }
+  clearGraphics() {
+    this.#t.clearGraphics();
+  }
+  async mediaOnLoad() {
+    return this.#a && await this.#a, this._media;
+  }
+  removeGraphic(e) {
+    this.#t.removeGraphic(e);
+  }
+  removeGraphics(e) {
+    this.#t.removeGraphics(e);
+  }
+  loaded() {
+    this.manager.onLifecycle(() => [
+      this._createResizeConstraint(),
+      this._createRotationHandler(),
+      this._createPanConstraint(),
+      this._createVideoInteractionWatcher(),
+      {
+        remove: () => {
+          this._removeVideoPanHandles();
+        }
+      },
+      p(() => this._media, (e) => {
+        this.#i?.abort(), e && (this.#i = new AbortController(), this.#a = this._loadMediaInternal(e, this.#i), this.#a.catch(() => {
+        }));
+      }, {
+        initial: !0,
+        sync: !0
+      })
+    ]);
+  }
+  _createPanConstraint() {
+    return p(() => ({ layer: this._layer, imageRenderer: this.imageRenderer }), ({ layer: e, imageRenderer: t }) => {
+      this._media?.type !== "video" && (e?.type !== "imagery-tile" || !t?.ready || F(t, e));
+    }, { sync: !0, initial: !0 });
+  }
+  _createResizeConstraint() {
+    return p(() => {
+      if (!this.imageRenderer?.ready || !this._layer)
+        return;
+      if (this._layer.type === "imagery-tile") {
+        const { width: t, height: a } = this._layer.serviceRasterInfo, { width: r, height: s, rotation: o } = this.imageRenderer;
+        return W(t, a, r, s, o);
+      }
+      const e = this._videoTargetExtent;
+      if (!(!e || this.imageRenderer.width <= 0 || this.imageRenderer.height <= 0))
+        return Math.max(e.width / this.imageRenderer.width, e.height / this.imageRenderer.height);
+    }, (e) => {
+      if (!e || !this.imageRenderer)
+        return;
+      if (this._media?.type === "video") {
+        this._updateVideoScaleForResize(e);
+        return;
+      }
+      const { constraints: t, scale: a } = this.imageRenderer, r = t.minScale, { lods: s, minScale: o } = v(e);
+      t.set({
+        minScale: o,
+        lods: s
+      }), this.imageRenderer.scale = this._imageChanged || Math.abs(a - r) <= 1e-6 ? o : a, this._imageChanged = !1;
+    }, { sync: !0, initial: !0 });
+  }
+  _createVideoInteractionWatcher() {
+    return p(() => [this.imageRenderer?.interacting, this.imageRenderer?.navigating, this.imageRenderer?.scale], () => {
+      this._media?.type === "video" && this._updateVideoInteraction();
+    }, { initial: !0 });
+  }
+  _createRotationHandler() {
+    return p(() => this.rotation, (e) => {
+      this._media?.type !== "video" && this.imageRenderer && (this.imageRenderer.constraints.rotationEnabled = !0, this.imageRenderer.rotation = e, this.imageRenderer.constraints.rotationEnabled = !1);
+    }, { sync: !0, initial: !0 });
+  }
+  _clearMedia() {
+    this._removeVideoPanHandles(), this._restoreConstraints(), this.#e = void 0, this._videoTargetExtent = void 0, this._videoRef?.pause(), this._videoRef = void 0, this._layer && this.map?.layers.includes(this._layer) && this.map.layers.remove(this._layer), this._layer?.destroy(), this._layer = void 0;
+  }
+  async _loadMediaInternal(e, t) {
+    if (this._loading = !0, this._clearMedia(), !e)
+      throw new Error("No media provided");
+    const { layer: a } = await e.load(t).finally(() => {
+      this._loading = !1;
+    });
+    l(t), this._imageChanged = !0, this._layer = a, this.imageRenderer?.map?.layers.add(this._layer), e.type === "video" && await this._loadVideoMedia(e);
+  }
+  async _loadVideoMedia(e) {
+    const t = this.imageRenderer, a = new w(R), r = e.videoElement;
+    this._videoRef = r instanceof HTMLVideoElement ? r : void 0, t && (await t.when(), this._snapshotConstraints(), t.constraints.set({
+      rotationEnabled: !1
+    }), await t.goTo(a.clone(), { animate: !1 }), this._videoTargetExtent = t.extent?.clone(), this.#e = t.extent?.clone(), this._videoTargetExtent && t.width > 0 && t.height > 0 && this._updateVideoScaleForResize(Math.max(this._videoTargetExtent.width / t.width, this._videoTargetExtent.height / t.height))), this._updateVideoInteraction();
+  }
+  _snapshotConstraints() {
+    const e = this.imageRenderer?.constraints;
+    !e || this.#r || (this.#r = {
+      geometry: e.geometry?.clone() ?? null,
+      lods: e.lods,
+      maxScale: e.maxScale,
+      minScale: e.minScale,
+      rotationEnabled: e.rotationEnabled
+    });
+  }
+  _restoreConstraints() {
+    const e = this.imageRenderer?.constraints, t = this.#r;
+    !e || !t || (e.set({
+      geometry: t.geometry,
+      lods: t.lods,
+      maxScale: t.maxScale,
+      minScale: t.minScale,
+      rotationEnabled: t.rotationEnabled
+    }), this.#r = void 0);
+  }
+  _disablePan() {
+    const e = this.imageRenderer;
+    if (this._removeVideoPanHandles(), !e)
+      return;
+    const t = e.on("drag", (r) => r.stopPropagation()), a = e.on("key-down", (r) => {
+      r.key.startsWith("Arrow") && r.stopPropagation();
+    });
+    this.#s = [t, a];
+  }
+  _enablePan() {
+    this._removeVideoPanHandles();
+  }
+  _removeVideoPanHandles() {
+    this.#s?.forEach((e) => e.remove()), this.#s = void 0;
+  }
+  _updateVideoInteraction() {
+    const e = this.imageRenderer, t = e?.extent;
+    if (!e || !t || this._layer?.type !== "media")
+      return;
+    this.#e ??= t.clone();
+    const { minScale: a } = e.constraints;
+    if (!a)
+      return;
+    const r = e.scale < a - g, s = G(t, this._videoTargetExtent);
+    if (r && !!s) {
+      this._enablePan(), e.constraints.geometry = s;
+      return;
+    }
+    if (r) {
+      this._disablePan(), e.constraints.geometry = null;
+      return;
+    }
+    this.#e && !t.equals(this.#e) && (e.extent = this.#e.clone()), this._disablePan(), e.constraints.geometry = null;
+  }
+  _updateVideoScaleForResize(e) {
+    if (!this.imageRenderer)
+      return;
+    const { constraints: t, scale: a } = this.imageRenderer, r = t.minScale, s = r != null && Math.abs(a - r) <= g, { lods: o, minScale: c } = v(e);
+    t.set({ lods: o, minScale: c, rotationEnabled: !1 }), this.imageRenderer.scale = this._imageChanged || s ? c : a, this._imageChanged = !1, s && requestAnimationFrame(() => {
+      const { extent: m, scale: _, constraints: f } = this.imageRenderer ?? {};
+      m && _ && f?.minScale != null && Math.abs(_ - f.minScale) <= g && (this.#e = m.clone());
+    });
+  }
+  render() {
+    return u`<calcite-panel .loading=${this.hideLoader ? void 0 : this._loading} .heading=${this.hideHeader ? void 0 : this._messages.title}><arcgis-map hide-attribution .spatialReference=${b.WebMercator} ${T(this._internalMap)}><arcgis-zoom .hidden=${this.hideZoomControls} .messageOverrides=${this.messageOverrides} slot=top-left></arcgis-zoom></arcgis-map>${this.hideVideoControls || this._media?.type !== "video" || !this._videoRef ? void 0 : u`<arcgis-oriented-imagery-viewer-video-controls .videoRef=${this._videoRef}></arcgis-oriented-imagery-viewer-video-controls>`}</calcite-panel>`;
+  }
+}
+E("arcgis-oriented-imagery-viewer-non-panoramic-viewer", j);
+export {
+  j as ArcgisOrientedImageryViewerNonPanoramicViewer
+};

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

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

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

@@ -0,0 +1,5 @@
+import "@esri/calcite-components/components/calcite-panel";
+import "../arcgis-map/index.js";
+import "../arcgis-zoom/index.js";
+import "../arcgis-oriented-imagery-viewer-video-controls/index.js";
+export * from "./customElement.js";

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

@@ -0,0 +1,34 @@
+import type ImageryTileLayer from "@arcgis/core/layers/ImageryTileLayer.js";
+import type Accessor from "@arcgis/core/core/Accessor.js";
+import type MediaLayer from "@arcgis/core/layers/MediaLayer.js";
+import type { AbortOptions } from "@arcgis/core/core/promiseUtils.js";
+
+export interface NonPanoramicMediaProperties extends Partial<Pick<NonPanoramicMedia, "autoLoad" | "autoplay" | "customParameters" | "datasetFormat" | "loop" | "title" | "type" | "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;
+  /** @default false */
+  accessor autoplay: boolean;
+  accessor customParameters: Record<string, string> | undefined;
+  accessor datasetFormat: string | undefined;
+  get layer(): ImageryTileLayer | MediaLayer | undefined;
+  /** @default false */
+  accessor loop: boolean;
+  get size(): [number, number] | undefined;
+  accessor title: string | undefined;
+  /** @default "image" */
+  accessor type: "image" | "video";
+  accessor url: string | undefined;
+  get videoElement(): HTMLVideoElement | undefined;
+  destroy(): void;
+  /** @param options */
+  load(options?: AbortOptions): Promise<{
+      layer: ImageryTileLayer | MediaLayer;
+      size: [number, number] | undefined;
+  }>;
+}

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

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