@arcgis/map-components 4.34.0-next.13 → 4.34.0-next.130

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

@@ -1,26 +1,24 @@
-import { c as t } from "../../chunks/runtime.js";
-import { usePropertyChange as a } from "@arcgis/lumina/controllers";
-import s from "@arcgis/core/layers/OrientedImageryLayer.js";
-import r from "@arcgis/core/widgets/OrientedImageryViewer.js";
-import { LitElement as o, createEvent as d, noShadowRoot as n } from "@arcgis/lumina";
-import { m as l } from "../../chunks/useWidget.js";
-import { css as g } from "@lit/reactive-element/css-tag.js";
+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 { 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";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.13 */
-const h = g`@layer{arcgis-oriented-imagery-viewer{display:block}}`, m = l(r);
-class y extends o {
+v4.34.0-next.130 */
+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-ui-icon-color: var(--calcite-color-status-danger)}.esri-oriented-imagery-viewer__body-additional-camera-locations{--calcite-ui-icon-color: var(--calcite-color-brand)}.esri-oriented-imagery-viewer__body-additional-coverage{--calcite-ui-icon-color: var(--calcite-color-status-info)}.esri-oriented-imagery-viewer__body-footprint{--calcite-ui-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 {
   constructor() {
-    super(...arguments), this.widget = m(this), this._hasOrientedImageryLayerToAdd = !1, this.viewModel = this.widget.viewModel, 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.position = "bottom-left", this.referencePoint = this.widget.referencePoint, this.arcgisPropertyChange = a()("imageGalleryEnabled", "layer"), this.arcgisReady = d();
+    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();
   }
   static {
-    this.properties = { autoDestroyDisabled: 5, currentCoverageVisible: 5, dataCaptureEnabled: 5, disabled: 5, galleryOpened: 5, icon: 1, imageEnhancementToolActive: 5, imageGalleryEnabled: 4, imageOverlaysOpened: 5, isAdditionalCoverageVisible: 5, isAdditionalPointSourcesVisible: 5, label: 1, layer: 0, mapImageConversionToolState: 5, navigationToolActive: 5, orientedImageryLayerItemId: 1, position: 1, referenceElement: 1, referencePoint: 0 };
+    this.properties = { view: 0, autoDestroyDisabled: 5, currentCoverageVisible: 5, dataCaptureEnabled: 5, disabled: 5, galleryOpened: 5, icon: 1, imageEnhancementToolActive: 5, imageGalleryEnabled: 4, imageOverlaysOpened: 5, isAdditionalCoverageVisible: 5, isAdditionalPointSourcesVisible: 5, label: 1, layer: 0, mapImageConversionToolState: 5, navigationToolActive: 5, orientedImageryLayerItemId: 1, position: 1, referenceElement: 1, referencePoint: 0 };
   }
   static {
-    this.shadowRootOptions = n;
-  }
-  static {
-    this.styles = h;
+    this.styles = [c, g];
   }
   async destroy() {
     await this.manager.destroy();
@@ -28,7 +26,7 @@ class y extends o {
   willUpdate(e) {
     if (e.has("orientedImageryLayerItemId")) {
       const i = this.orientedImageryLayerItemId;
-      i && this.widget && (this.layer = new s({ portalItem: { id: i } }), this.widget.view ? this.widget.view.map?.add(this.layer) : this._hasOrientedImageryLayerToAdd = !0);
+      i && this.widget && (this.layer = new o({ portalItem: { id: i } }), this.widget.view ? this.widget.view.map?.add(this.layer) : this._hasOrientedImageryLayerToAdd = !0);
     }
   }
   loaded() {
@@ -41,7 +39,7 @@ class y extends o {
     e && (this.widget.view?.map?.add(e), this._hasOrientedImageryLayerToAdd = !1);
   }
 }
-t("arcgis-oriented-imagery-viewer", y);
+r("arcgis-oriented-imagery-viewer", v);
 export {
-  y as ArcgisOrientedImageryViewer
+  v as ArcgisOrientedImageryViewer
 };

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

@@ -1,18 +1,19 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
-/// <reference types="../../index.d.ts" />
+/// <reference path="../../index.d.ts" />
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { ArcgisReferenceElement, WidgetOrMapComponent } from '../../utils/component-utils';
-import { PropertyValues } from 'lit';
-import { ToElement, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 
 /**
- * The placement component is used to position content relative to the map. This component may be **temporary** until we offer a more robust solution.
+ * The placement component is used to position content relative to the map.
  *
  * [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-placement/)
+ *
+ * @since 4.29
+ * @deprecated since version 4.34, use the component's [`slot`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/slot) attribute instead.
  */
 export declare class ArcgisPlacement extends LitElement {
-    /** @default "bottom-left" */
-    position: __esri.UIPosition;
+    position?: __esri.UIPosition;
     referenceElement?: ArcgisReferenceElement | string;
-    /** Emitted when the component associated with a map or scene view is is ready to be interacted with. */
+    view?: __esri.LinkChartView | __esri.MapView | __esri.SceneView;
     readonly arcgisReady: TargetedEvent<this, void>;
 }

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

@@ -1,26 +1,23 @@
 import { c as s } from "../../chunks/runtime.js";
-import { g as i, r, d as n, a as o } from "../../chunks/component-utils.js";
-import { LitElement as l, createEvent as a, noShadowRoot as c } from "@arcgis/lumina";
-import { css as h } from "@lit/reactive-element/css-tag.js";
+import { css as i, html as r } from "lit";
+import { LitElement as n, createEvent as o } from "@arcgis/lumina";
+import { g as l, d as a, a as c } from "../../chunks/component-utils.js";
+import { u as h } from "../../chunks/useView.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.13 */
-const d = h`@layer{arcgis-placement{display:flex;pointer-events:auto;box-shadow:none}.arcgis-placement__container{display:block}}`;
-class m extends l {
+v4.34.0-next.130 */
+const d = i`:host{pointer-events:auto}`;
+class m extends n {
   constructor() {
     super(), this._observer = void 0, this._moveChildren = () => {
-      if (i(this).parentElement !== this.el)
+      const e = l(this);
+      if (e && e.parentElement !== this.el)
         for (let t = this.el.firstElementChild; t !== null; t = this.el.firstElementChild)
-          i(this).append(t);
-    }, this.position = "bottom-left", this.arcgisReady = a();
-    const e = this;
-    e.el.childElem = document.createElement("div"), e.el.childElem.classList.add("arcgis-placement__container"), this.listen("arcgisReady", this._startObserving, { once: !0 });
+          e.append(t);
+    }, this.view = h(this), this.arcgisReady = o(), this.listen("arcgisReady", this._startObserving, { once: !0 });
   }
   static {
-    this.properties = { position: 1, referenceElement: 1 };
-  }
-  static {
-    this.shadowRootOptions = c;
+    this.properties = { position: 1, referenceElement: 1, view: 0 };
   }
   static {
     this.styles = d;
@@ -28,22 +25,18 @@ class m extends l {
   connectedCallback() {
     super.connectedCallback(), this.el.view && this._startObserving();
   }
-  willUpdate(e) {
-    e.has("referenceElement") && r(this, this.referenceElement);
-    const t = i(this);
-    e.has("position") && t && this.position !== void 0 && this.el.view?.ui?.move(t, this.position);
-  }
   loaded() {
-    n(this), o(this);
+    a(this), c(this);
   }
   disconnectedCallback() {
-    super.disconnectedCallback();
-    const e = i(this);
-    e && this.el.view?.ui?.remove(e), this._observer?.disconnect();
+    super.disconnectedCallback(), this._observer?.disconnect();
   }
   _startObserving() {
     this._moveChildren(), this._observer = new MutationObserver(this._moveChildren), this._observer.observe(this.el, { childList: !0 });
   }
+  render() {
+    return r`<slot></slot>`;
+  }
 }
 s("arcgis-placement", m);
 export {

package/dist/components/arcgis-popup/css.d.ts

@@ -0,0 +1,31 @@
+export declare const css: {
+    readonly base: "arcgis-popup";
+    readonly baseHidden: "arcgis-popup--hidden";
+    readonly main: "arcgis-popup__main-container";
+    readonly shadow: "arcgis-popup--shadow";
+    readonly isDocked: "arcgis-popup--is-docked";
+    readonly isDockedTopLeft: "arcgis-popup--is-docked-top-left";
+    readonly isDockedTopCenter: "arcgis-popup--is-docked-top-center";
+    readonly isDockedTopRight: "arcgis-popup--is-docked-top-right";
+    readonly isDockedBottomLeft: "arcgis-popup--is-docked-bottom-left";
+    readonly isDockedBottomCenter: "arcgis-popup--is-docked-bottom-center";
+    readonly isDockedBottomRight: "arcgis-popup--is-docked-bottom-right";
+    readonly isXlWidthBreakpoint: "arcgis-popup--is-xl-width-breakpoint";
+    readonly isLgWidthBreakpoint: "arcgis-popup--is-lg-width-breakpoint";
+    readonly isMdWidthBreakpoint: "arcgis-popup--is-md-width-breakpoint";
+    readonly isSmWidthBreakpoint: "arcgis-popup--is-sm-width-breakpoint";
+    readonly isXsWidthBreakpoint: "arcgis-popup--is-xs-width-breakpoint";
+    readonly isXlHeightBreakpoint: "arcgis-popup--is-xl-height-breakpoint";
+    readonly isLgHeightBreakpoint: "arcgis-popup--is-lg-height-breakpoint";
+    readonly isMdHeightBreakpoint: "arcgis-popup--is-md-height-breakpoint";
+    readonly isSmHeightBreakpoint: "arcgis-popup--is-sm-height-breakpoint";
+    readonly isXsHeightBreakpoint: "arcgis-popup--is-xs-height-breakpoint";
+    readonly alignTopCenter: "arcgis-popup--aligned-top-center";
+    readonly alignBottomCenter: "arcgis-popup--aligned-bottom-center";
+    readonly alignTopLeft: "arcgis-popup--aligned-top-left";
+    readonly alignBottomLeft: "arcgis-popup--aligned-bottom-left";
+    readonly alignTopRight: "arcgis-popup--aligned-top-right";
+    readonly alignBottomRight: "arcgis-popup--aligned-bottom-right";
+    readonly pointer: "arcgis-popup__pointer";
+    readonly pointerDirection: "arcgis-popup__pointer-direction";
+};

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

@@ -0,0 +1,200 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+/// <reference path="../../index.d.ts" />
+import { default as FeaturesViewModel } from '@arcgis/core/widgets/Features/FeaturesViewModel.js';
+import { ArcgisReferenceElement } from '../../utils/component-utils';
+import { HeadingLevel } from '../../support/heading';
+import { Use } from '@arcgis/lumina/controllers';
+import { Alignment, DockOptions, PopupPositionResult, PopupPositionStyle, FetchFeaturesOptions } from './interfaces';
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { nil } from '@arcgis/toolkit/type';
+import { ArcgisFeature } from '../arcgis-feature/customElement.js';
+import { default as ActionButton } from '@arcgis/core/support/actions/ActionButton.js';
+declare const useFeaturesViewModel: (component: LitElement & Pick<FeaturesViewModel, never> & import('../../controllers/useViewModel').ViewModelControllerUses<FeaturesViewModel>) => FeaturesViewModel;
+
+/**
+ * <a name="overview"></a>
+ *
+ * ## Overview
+ * The Popup widget allows users to view content from feature attributes. Popups enhance web applications
+ * by providing users with a simple way to interact with and view attributes in a layer.
+ * They play an important role in relaying information to the user, which improves the storytelling capabilities of the application.
+ *
+ * <a name="loading-the-popup"></a>
+ *
+ * ## Loading the Popup
+ * At [version 4.27](../release-notes#popup-performance-improvements), the view's default popup is loaded on demand when [`popupEnabled`](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#popupEnabled) is set to `true` (which is the default), when the [`openPopup()`](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#openPopup) method is called,
+ * or when some widgets need the popup, such as [Search](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html). Please see the read more section below for details on how to manually load the popup or take
+ * advantage of the API lazy loading.
+ *
+ * >>> esri-read-more
+ *
+ * The Popup class can be loaded when the [View](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html) is instantiated, however, this does not take advantage of the performance improvements of lazily loading the popup.
+ * ```js
+ * // Create a new MapView
+ * const view = new MapView({
+ * // set the popup property to a new instance of Popup
+ *   popup: new Popup(...)
+ * });
+ * ```
+ * To utilize the performance improvements and the API automatically lazy loading the popup:
+ * - Set options/properties on the view's popup:
+ *   ```js
+ *   const view = MapView({
+ *     popup: {
+ *       dockEnabled: true,
+ *       dockOptions: {
+ *         position: true,
+ *         ...
+ *       }
+ *     }
+ *   });
+ *   ```
+ * - Use [`popupEnabled`](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#popupEnabled) to prevent the popup appearing when the user clicks the view.
+ *   ```js
+ *   // The popup doesn't show for features on selection, but will on Search results and when `openPopup()` is called.
+ *   view.popupEnabled = false;
+ *   ```
+ * - Use [`openPopup()`](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#openPopup) instead of [`open()`](#open) and [`closePopup()`](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#closePopup) instead of [`close()`](#close).
+ *   ```js
+ *   // A deprecation warning is prompted if the popup isn't created
+ *   // and calls view.openPopup() or view.closePopup() respectively under the hood.
+ *   view.popup.open(...);
+ *   view.popup.close(...);
+ *
+ *   // Opens or closes the popup on the View.
+ *   view.openPopup(...);
+ *   view.closePopup(...);
+ *   ```
+ * - Use [reactiveUtils](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html) to watch properties on the popup and its view model instead of the [`watch()`](#watch) method.
+ *   ```js
+ *   // This will throw an error that watch() is not a method
+ *   // since the popup hasn't been created yet.
+ *   view.popup.watch("selectedFeature", ...)
+ *
+ *   // Call reactiveUtils.watch() on popup properties with optional chaining.
+ *   reactiveUtils.watch(() => view.popup?.selectedFeature, ...);
+ *   ```
+ * - Use the [`reactiveUtils.when()`](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html#when) method to check when the popup instance is created. Once its created, then it's properties or methods can be accessed and called.
+ *   ```js
+ *   // This will throw an error that actions is not a property.
+ *   view.popup.actions.push(...);
+ *
+ *   // Wait for the popup to load before accessing properties.
+ *   reactiveUtils.when(() => view.popup?.actions, ()=>{
+ *     view.popup.actions.push(...);
+ *   });
+ *   ```
+ *
+ * >>>
+ *
+ * <a name="popup-ui"></a>
+ *
+ * ## Popup UI
+ * All [Views](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html) contain a default popup.
+ * This popup can display generic content, which is set in its [title](#title)
+ * and [content](#content) properties.
+ * When  content is set directly on the Popup instance it is not tied to a specific feature or layer.
+ *
+ * [![popup-basic-example](../assets/img/apiref/widgets/popup/popup-basic.png)](../sample-code/sandbox/?sample=intro-popup)
+ *
+ * In the image above, the text "Marriage in New York County Census Tract 8" is the popup's `title`. The remaining text is
+ * its `content`. A dock button ![popup-dock-btn](../assets/img/apiref/widgets/popup/popup-dock.png) may also be available in the
+ * top right corner of the popup. This allows the user to dock the popup to one of the sides or corners of the view.
+ * The options for docking may be set in the [dockOptions](#dockOptions) property.
+ *
+ * Popups can also contain [actions](#actions) that act like buttons,
+ * which execute a function defined by the developer when clicked.
+ * By default, every popup has a "Zoom to" action ![popupTemplate-zoom-action](../assets/img/apiref/widgets/popup/popuptemplate-zoom-action.png)
+ * that allows users to zoom to the selected feature. See the [actions](#actions)
+ * property for information about adding custom actions to a popup.
+ *
+ * The Popup widget is tied to the [View](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html), whether it's docked or anchored to the selected feature.
+ * If wanting to utilize the Popup functionality outside of the View, the [Features](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Features.html) widget can be used to display the same content
+ * in its own container that's not tied to the View.
+ *
+ * <a name="popup-and-popuptemplate"></a>
+ *
+ * ## Popup and PopupTemplate
+ * [PopupTemplate](https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html) is closely related to Popup, but is more specific to [layers](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-Layer.html)
+ * and [graphics](https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html). It allows you to define custom titles and content templates based on the source of the
+ * [selected feature](#selectedFeature). When a layer or a graphic has a defined
+ * PopupTemplate, the popup will display the content
+ * defined in the PopupTemplate when the feature is clicked. The content may contain field values from the attributes of the [selected feature](#selectedFeature).
+ *
+ * Custom PopupTemplates may also be assigned directly to a popup by setting [graphics](https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html) on the
+ * [features](#features) property. For more information about Popup
+ * and how it relates to [PopupTemplate](https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html) see the samples listed below.
+ *
+ * [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-popup/)
+ *
+ * @since 4.0
+ * @see module :esri/PopupTemplate
+ * @see module :esri/views/SceneView#popup
+ * @see module :esri/views/View2D#popup
+ * @see [Sample - Intro to popups](../sample-code/intro-popup/index.html)
+ * @see [Sample - to PopupTemplate](../sample-code/intro-popuptemplate/index.html)
+ * @see [Sample - Dock positions with popup](../sample-code/popup-docking-position/index.html)
+ * @see [Sample - Popup actions](../sample-code/popup-actions/index.html)
+ * @see [Sample - Custom popup actions per feature](../sample-code/popup-custom-action/index.html)
+ * @see [Sample - Popup with edit action](../sample-code/popup-editaction/index.html)
+ * @see [Sample - Popup with DOM node](../sample-code/popup-domnode/index.html)
+ * @see [Guide - Esri Icon Font](../guide/esri-icon-font/index.html)
+ * @see module :esri/widgets/Popup/PopupViewModel
+ */
+export declare class ArcgisPopup extends LitElement {
+    referenceElement?: ArcgisReferenceElement | string;
+    actions: __esri.Collection<ActionButton | __esri.ActionToggle>;
+    readonly active: boolean;
+    alignment: Alignment;
+    autoCloseEnabled: boolean;
+    defaultPopupTemplateEnabled: boolean;
+    content: string | HTMLElement | nullish | __esri.Widget;
+    readonly collapsed: boolean;
+    get currentDockPosition(): nil | PopupPositionResult;
+    get dockOptions(): DockOptions;
+    set dockOptions(dockOptions: DockOptions);
+    dockEnabled: boolean;
+    readonly featureCount: number;
+    featureMenuOpen: boolean;
+    features: __esri.Graphic[];
+    goToOverride: nullish | __esri.GoToOverride;
+    readonly state: "ready" | "disabled";
+    headingLevel: HeadingLevel;
+    highlightDisabled: boolean;
+    initialDisplayMode: "list" | "feature";
+    location: nullish | __esri.Point;
+    promises: Promise<__esri.Graphic[]>[];
+    readonly selectedFeature: nullish | __esri.Graphic;
+    get selectedDrillInFeature(): __esri.Graphic | nil;
+    selectedFeatureIndex: number;
+    get selectedFeatureComponent(): HTMLArcgisFeatureElement | null;
+    heading: string | nullish;
+    hideActionBar: boolean;
+    hideCloseButton: boolean;
+    hideCollapseButton: boolean;
+    hideFeatureMenuHeading: boolean;
+    hideFeatureNavigation: boolean;
+    hideFeatureListLayerTitle: boolean;
+    hideHeading: boolean;
+    hideSpinner: boolean;
+    autoDestroyDisabled: boolean;
+    messageOverrides?: typeof this.messages._overrides;
+    label?: string;
+    visible: boolean;
+    clear(): Promise<void>;
+    destroy(): Promise<void>;
+    fetchFeatures(screenPoint: __esri.ScreenPoint, options?: FetchFeaturesOptions): Promise<__esri.FetchPopupFeaturesResult>;
+    next(): Promise<FeaturesViewModel>;
+    open(options?: __esri.FeaturesViewModelOpenOptions): Promise<void>;
+    previous(): Promise<FeaturesViewModel>;
+    setFocus(): Promise<void>;
+    triggerAction(action: __esri.ActionButton | __esri.ActionToggle): Promise<void>;
+    readonly arcgisPropertyChange: TargetedEvent<this, {
+        name: "state" | "active" | "collapsed" | "featureCount" | "featureMenuOpen" | "features" | "promises" | "selectedDrillInFeature" | "selectedFeature" | "selectedFeatureComponent" | "selectedFeatureIndex" | "visible" | "currentAlignment" | "dockEnabled";
+    }>;
+    readonly arcgisReady: TargetedEvent<this, void>;
+    readonly arcgisClose: TargetedEvent<this, void>;
+    readonly arcgisTriggerAction: TargetedEvent<this, __esri.PopupTriggerActionEvent>;
+    private messages;
+}
+export {};