@arcgis/map-components 5.0.0-next.14 → 5.0.0-next.141

package/dist/components/arcgis-presentation/PresentationViewModel.d.ts

@@ -0,0 +1,37 @@
+import type Accessor from "@arcgis/core/core/Accessor.js";
+import type Collection from "@arcgis/core/core/Collection.js";
+import type SceneView from "@arcgis/core/views/SceneView";
+import type Slide from "@arcgis/core/webscene/Slide";
+
+/** @internal */
+export type PresentationViewModelProperties = Partial<Pick<PresentationViewModel, "slideId" | "view">>;
+
+export default class PresentationViewModel extends Accessor {
+  constructor(properties?: PresentationViewModelProperties);
+  get firstSlideSelected(): boolean;
+  get hasOnlyOneSlide(): boolean;
+  /**
+   * Enable navigation with the keyboard
+   * by using the arrow keys or page up/page down keys
+   *
+   * @default false
+   */
+  accessor keyboardNavigationEnabled: boolean;
+  get lastSlideSelected(): boolean;
+  accessor slideId: string | undefined;
+  get slideIndex(): number;
+  get slideSelected(): boolean;
+  accessor view: SceneView | undefined;
+  get visibleSlides(): Collection<Slide>;
+  /**
+   * @param event
+   * @param direction
+   */
+  captureArrowKeysForNavigation(event: KeyboardEvent, direction: "ltr" | "rtl"): void;
+  destroy(): void;
+  /** @param slideId */
+  getSlideIndexBySlideId(slideId: string | undefined): number;
+  initialize(): void;
+  /** @param stepSize */
+  navigateInPresentation(stepSize: number): void;
+}

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

@@ -0,0 +1,67 @@
+/// <reference path="../../index.d.ts" />
+import type SceneView from "@arcgis/core/views/SceneView";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+/**
+ * The Presentation component allows to present slides of a web scene in a presentation mode
+ * and supports navigating between the slides of a web scene.
+ *
+ * @since 5.0
+ * @internal
+ */
+export abstract class ArcgisPresentation extends LitElement {
+  /** @internal */
+  protected _messages: Partial<{
+      componentLabel: string;
+      slides: string;
+      slideNavAriaText: string;
+      previous: string;
+      next: string;
+      restart: string;
+  }> & T9nMeta<{
+      componentLabel: string;
+      slides: string;
+      slideNavAriaText: string;
+      previous: string;
+      next: string;
+      restart: string;
+  }>;
+  /**
+   * If true, the component will not be destroyed automatically when it is
+   * disconnected from the document. This is useful when you want to move the
+   * component to a different place on the page, or temporarily hide it. If this
+   * is set, make sure to call the [destroy()](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-presentation/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * Enable navigation with the keyboard
+   * by using the arrow keys or page up/page down keys
+   *
+   * @default false
+   */
+  accessor keyboardNavigationEnabled: boolean;
+  /**
+   * specifies the size of the component
+   *
+   * @default "m"
+   */
+  accessor scale: "l" | "m" | "s";
+  /** The id of the slide applied to the view */
+  accessor slideId: string | undefined;
+  /**
+   * The view associated with the component. 
+   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the Presentation component will be associated with a map or scene component rather than using the `view` property.
+   */
+  accessor view: SceneView | undefined;
+  /** Permanently destroy the component */
+  destroy(): Promise<void>;
+  /** 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>;
+  readonly "@eventTypes": {
+    arcgisReady: ArcgisPresentation["arcgisReady"]["detail"];
+  };
+}

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

@@ -0,0 +1,175 @@
+import { c as v } from "../../chunks/runtime.js";
+import { css as g, html as c } from "lit";
+import { useDirection as u } from "@arcgis/lumina/controllers";
+import { LitElement as S, createEvent as m, nothing as h } from "@arcgis/lumina";
+import { u as b } from "../../chunks/useT9n.js";
+import { m as w } from "../../chunks/useViewModel.js";
+import { property as d, subclass as y } from "@arcgis/core/core/accessorSupport/decorators.js";
+import f from "@arcgis/core/core/Accessor.js";
+import p from "@arcgis/core/core/Collection.js";
+import { ignoreAbortErrors as x } from "@arcgis/core/core/promiseUtils.js";
+import { on as I, watch as _ } from "@arcgis/core/core/reactiveUtils.js";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/5.0/esri/copyright.txt for details.
+v5.0.0-next.141 */
+const E = g`:host{width:100%;height:100%;padding:var(--calcite-spacing-none);margin:var(--calcite-spacing-none);display:flex}p{padding:0;margin:0}.navigation{--internal-attribution-height: 16px;pointer-events:auto;display:flex;align-items:center;gap:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1);box-shadow:var(--arcgis-internal-box-shadow);align-self:flex-end;margin-block:auto calc(var(--calcite-spacing-fixed-xl) + var(--internal-attribution-height));margin-inline-start:var(--calcite-spacing-fixed-xl)}.slide-counter-text{display:flex;align-items:center;justify-content:center;gap:var(--calcite-spacing-base);min-width:64px}.slide-counter-text-element{box-sizing:border-box;max-width:28px;margin:0;padding:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums}`;
+var M = Object.defineProperty, A = Object.getOwnPropertyDescriptor, r = (e, t, i, l) => {
+  for (var n = l > 1 ? void 0 : l ? A(t, i) : t, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (n = (l ? a(t, i, n) : a(n)) || n);
+  return l && n && M(t, i, n), n;
+};
+let s = class extends f {
+  //#region Lifecycle
+  constructor(e) {
+    super(e), this.keyboardNavigationEnabled = !1, this._subscribeToSlideEvents = (t) => {
+      this._unSubscribeToSlideEvents(t), t.forEach((i) => {
+        const l = i.on("apply-slide-start", () => this._onApplySlideStart(i));
+        this.addHandles(l, i.id);
+      });
+    }, this._unSubscribeToSlideEvents = (t) => {
+      t.forEach((i) => {
+        this.hasHandles(i.id) && this.removeHandles(i.id);
+      });
+    };
+  }
+  initialize() {
+    this._startWatchVisibleSlides();
+  }
+  destroy() {
+    this._unSubscribeToSlideEvents(this.visibleSlides);
+  }
+  get visibleSlides() {
+    return this.view?.map?.presentation?.slides?.filter((e) => !e.hidden) ?? new p();
+  }
+  get lastSlideSelected() {
+    return this.getSlideIndexBySlideId(this.slideId) === this.visibleSlides.length - 1;
+  }
+  get firstSlideSelected() {
+    return this.getSlideIndexBySlideId(this.slideId) === 0;
+  }
+  get slideSelected() {
+    return this.getSlideIndexBySlideId(this.slideId) > -1;
+  }
+  get hasOnlyOneSlide() {
+    return this.visibleSlides.length === 1;
+  }
+  get slideIndex() {
+    return this.getSlideIndexBySlideId(this.slideId);
+  }
+  getSlideIndexBySlideId(e) {
+    let t = -1;
+    return e && (t = this.visibleSlides.findIndex((i) => i.id === e)), t;
+  }
+  navigateInPresentation(e) {
+    const t = this.slideIndex + e;
+    let i = this._getSlideBySlideIndex(t);
+    i ??= this._getSlideBySlideIndex(0), i && this._applySlide(i);
+  }
+  captureArrowKeysForNavigation(e, t) {
+    const i = ["ArrowLeft", "ArrowRight", "PageUp", "PageDown"];
+    if (document.activeElement?.nodeName.toLowerCase() === "arcgis-scene" || !i.includes(e.code))
+      return;
+    const n = t === "rtl" ? "ArrowRight" : "ArrowLeft", a = e.code === n || e.code === "PageUp" ? -1 : 1;
+    this.navigateInPresentation(a);
+  }
+  //#endregion
+  //#region Private Methods
+  _getSlideBySlideIndex(e) {
+    if (e != null && e >= 0 && e < this.visibleSlides.length)
+      return this.visibleSlides.getItemAt(e);
+  }
+  async _applySlide(e) {
+    this.view && await x(e.applyTo(this.view));
+  }
+  _startWatchVisibleSlides() {
+    this._subscribeToSlideEvents(this.visibleSlides), this.addHandles(
+      I(
+        () => this.visibleSlides,
+        "change",
+        (e) => {
+          this._subscribeToSlideEvents(new p(e.added)), this._unSubscribeToSlideEvents(new p(e.removed));
+        },
+        {
+          onListenerAdd: this._subscribeToSlideEvents,
+          onListenerRemove: this._unSubscribeToSlideEvents
+        }
+      )
+    );
+  }
+  _onApplySlideStart(e) {
+    this.slideId = e.id;
+  }
+  //#endregion
+};
+r([
+  d()
+], s.prototype, "view", 2);
+r([
+  d()
+], s.prototype, "slideId", 2);
+r([
+  d()
+], s.prototype, "keyboardNavigationEnabled", 2);
+r([
+  d()
+], s.prototype, "visibleSlides", 1);
+r([
+  d()
+], s.prototype, "lastSlideSelected", 1);
+r([
+  d()
+], s.prototype, "firstSlideSelected", 1);
+r([
+  d()
+], s.prototype, "slideSelected", 1);
+r([
+  d()
+], s.prototype, "hasOnlyOneSlide", 1);
+r([
+  d()
+], s.prototype, "getSlideIndexBySlideId", 1);
+s = r([
+  y("components.presentation.PresentationViewModel")
+], s);
+const $ = w(s);
+class P extends S {
+  constructor() {
+    super(...arguments), this._messages = b(), this.viewModel = $(this), this._direction = u(), this._captureArrowKeysForNavigation = (t) => {
+      this.viewModel.captureArrowKeysForNavigation(t, this._direction);
+    }, this.autoDestroyDisabled = !1, this.view = this.viewModel.view, this.scale = "m", this.keyboardNavigationEnabled = !1, this.arcgisReady = m();
+  }
+  static {
+    this.properties = { slideId: 1, autoDestroyDisabled: 5, view: 0, scale: 1, keyboardNavigationEnabled: 5 };
+  }
+  static {
+    this.styles = E;
+  }
+  get slideId() {
+    return this.viewModel.slideId;
+  }
+  set slideId(t) {
+    this.viewModel.slideId = t;
+  }
+  async destroy() {
+    await this.manager.destroy();
+  }
+  loaded() {
+    this.manager.onLifecycle(() => _(() => this.keyboardNavigationEnabled, (i) => {
+      document.removeEventListener("keydown", this._captureArrowKeysForNavigation), i && document.addEventListener("keydown", this._captureArrowKeysForNavigation);
+    }, { initial: !0 })), this.manager.onDisconnected(() => {
+      document.removeEventListener("keydown", this._captureArrowKeysForNavigation);
+    });
+  }
+  render() {
+    const t = this.viewModel.lastSlideSelected && !this.viewModel.hasOnlyOneSlide, i = this._direction === "rtl", l = i ? "chevron-right" : "chevron-left", n = i ? "chevron-left" : "chevron-right";
+    return this.viewModel.visibleSlides.length === 0 ? c`<div></div>` : c`<div class="navigation"><calcite-button appearance=transparent icon-start=${l} kind=neutral .scale=${this.scale} .disabled=${this.viewModel.firstSlideSelected || !this.viewModel.slideSelected} .label=${this._messages.previous} title=${this._messages.previous ?? h} @click=${() => this.viewModel.navigateInPresentation(-1)}></calcite-button><div class="slide-counter-text">${this._renderSlideCounter()}</div><calcite-button appearance=transparent icon-start=${t ? "reset" : n} kind=neutral .scale=${this.scale} .label=${t ? this._messages.restart : this._messages.next} title=${(t ? this._messages.restart : this._messages.next) ?? h} @click=${() => this.viewModel.navigateInPresentation(1)}></calcite-button></div>`;
+  }
+  _renderSlideCounter() {
+    const t = this.viewModel.slideIndex + 1, i = this._messages?.slideNavAriaText?.replace("${index}", t.toString()).replace("${numberOfSlides}", this.viewModel.visibleSlides.length.toString());
+    return this.viewModel.slideSelected ? c`<p role=banner aria-label=${i ?? h} aria-live=polite><div class="slide-counter-text-element" data-testId=arcgis-map-presentation-slideIndex>${t}</div><div class="slide-counter-text-element">/</div><p class="slide-counter-text-element" data-testId=arcgis-map-presentation-numberOfSlides>${this.viewModel.visibleSlides.length}</p></p>` : c`<p role=banner data-testId=arcgis-map-presentation-numberOfSlides>${this.viewModel.visibleSlides?.length} ${this._messages?.slides}</p>`;
+  }
+}
+v("arcgis-presentation", P);
+export {
+  P as ArcgisPresentation
+};

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

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