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

package/dist/components/arcgis-table-list-next/customElement.js

@@ -0,0 +1,181 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as C } from "../../chunks/runtime.js";
+import { repeat as $ } from "lit/directives/repeat.js";
+import { keyed as _ } from "lit/directives/keyed.js";
+import M from "@arcgis/core/core/Collection.js";
+import { watch as I, on as v } from "@arcgis/core/core/reactiveUtils.js";
+import L from "@arcgis/core/layers/list/TableItemCollection.js";
+import { LitElement as E, createEvent as c, safeClassMap as b, nothing as F } from "@arcgis/lumina";
+import { usePropertyChange as T } from "@arcgis/lumina/controllers";
+import { reEmitEvent as D } from "@arcgis/lumina-toolkit/reEmitEvent";
+import { classes as P } from "@arcgis/toolkit/dom";
+import { generateGuid as N } from "@arcgis/toolkit/string";
+import { createRef as U, ref as x } from "lit/directives/ref.js";
+import { html as o } from "lit";
+import { u as A } from "../../chunks/useT9n.js";
+import { g as u } from "../../chunks/globalCss.js";
+import { m as B, b as R, r as k, e as S } from "../../chunks/layer-list-utils.js";
+import { ArcgisLayerListItem as G } from "../arcgis-layer-list-next/layer-list-item/customElement.js";
+import { s as O, a as q } from "../../chunks/layer-list-next.js";
+import { c as H } from "../../chunks/css.js";
+import { m as V } from "../../chunks/useViewModel.js";
+const w = H, y = "nested", j = V(L);
+class z extends E {
+  constructor() {
+    super(...arguments), this._lastDragDetail = null, this._rootGroupUid = `table-${N()}`, this._rootListRef = U(), this._selectedDragItemLayerUid = null, this.messages = A(), this.viewModel = j(this), this._canMove = ({ dragEl: e, fromEl: t, toEl: i }, s) => {
+      const l = s === "pull" ? this.listItemCanGiveFunction : this.listItemCanReceiveFunction, a = this._getItem(e);
+      if (!a || !("sortable" in a) || !a.sortable)
+        return !1;
+      const h = this._getItem(t), d = this._getLayerType(t), n = this._getItem(i), m = this._getLayerType(i), f = !!d && !!m && d === m, g = { selected: a, from: h, to: n }, p = t?.group, r = i?.group;
+      return p && r && typeof l == "function" ? l(g) : f;
+    }, this._onPanelOpen = () => {
+      this.requestUpdate();
+    }, this._onSelectedDragItemLayerUidChange = (e) => {
+      this._selectedDragItemLayerUid = e;
+    }, this._onTriggerAction = (e, t) => {
+      this.triggerAction(e, t);
+    }, this.autoDestroyDisabled = !1, this.closed = !1, this.collapsed = !1, this.dragEnabled = !1, this.filterPlaceholder = "", this.filterText = "", this.headingLevel = 2, this.hideNoFilterResultsNotice = !1, this.hideNoItemsNotice = !1, this.hideStatusIndicators = !1, this.icon = "table", this.listItemCreatedFunction = this.viewModel.listItemCreatedFunction, this.listModeDisabled = this.viewModel.listModeDisabled, this.map = this.viewModel.map, this.minDragEnabledItems = B, this.minFilterItems = R, this.selectedItems = new M(), this.selectionMode = "none", this.showCloseButton = !1, this.showCollapseButton = !1, this.showErrors = !1, this.showFilter = !1, this.showHeading = !1, this.showTemporaryTableIndicators = !1, this.tables = this.viewModel.tables, this.arcgisClose = c(), this.arcgisFilterChange = c(), this.arcgisPropertyChange = T()("state"), this.arcgisReady = c(), this.arcgisSelectedItemsChange = c(), this.arcgisTableItemsChanged = c(), this.arcgisTriggerAction = D(() => this.viewModel, "trigger-action");
+  }
+  static {
+    this.properties = { _visibleItems: 16, _openedPanelItems: 16, _dragEnabled: 16, _filterEnabled: 16, autoDestroyDisabled: 5, closed: 5, collapsed: 7, dragEnabled: 5, filterPlaceholder: 1, filterPredicate: 0, filterText: 1, headingLevel: 9, hideNoFilterResultsNotice: 5, hideNoItemsNotice: 5, hideStatusIndicators: 5, icon: 1, label: 1, listItemCanGiveFunction: 0, listItemCanReceiveFunction: 0, listItemCreatedFunction: 0, listModeDisabled: 5, map: 0, messageOverrides: 0, minDragEnabledItems: 9, minFilterItems: 9, referenceElement: 1, selectedItems: 0, selectionMode: 1, showCloseButton: 5, showCollapseButton: 5, showErrors: 5, showFilter: 5, showHeading: 5, showTemporaryTableIndicators: 5, state: 32, tableItems: 32, tables: 0, view: 0 };
+  }
+  static {
+    this.styles = [O, q];
+  }
+  get _visibleItems() {
+    return this.tableItems?.filter((e) => !e.hidden && (this.showErrors || !e.error));
+  }
+  get _openedPanelItems() {
+    return this._visibleItems.filter(({ hidden: e, panel: t }) => !e && t?.open && !t.disabled && t.flowEnabled);
+  }
+  get _dragEnabled() {
+    return this.viewModel.totalItems >= this.minDragEnabledItems && this.dragEnabled;
+  }
+  get _filterEnabled() {
+    return this.viewModel.totalItems >= this.minFilterItems && this.showFilter;
+  }
+  get state() {
+    return this.viewModel.state;
+  }
+  get tableItems() {
+    return this.viewModel.tableItems;
+  }
+  async destroy() {
+    await this.manager.destroy();
+  }
+  willUpdate(e) {
+    e.has("map") && (this.viewModel.map = this.map), e.has("tables") && (this.viewModel.tables = this.tables), e.has("listItemCreatedFunction") && (this.viewModel.listItemCreatedFunction = this.listItemCreatedFunction);
+  }
+  loaded() {
+    this.manager.onLifecycle(() => [
+      I(() => this.view?.map, (e) => {
+        this.map || (this.viewModel.map = e);
+      }, { initial: !0 }),
+      v(() => this.viewModel.tableItems, "change", () => {
+        k(this.selectedItems), this.arcgisTableItemsChanged.emit(), this.requestUpdate();
+      }, { initial: !0 }),
+      v(() => this.selectedItems, "change", () => this.arcgisSelectedItemsChange.emit()),
+      I(() => [this.viewModel.state, this.viewModel.totalItems], () => this.requestUpdate(), { initial: !0 }),
+      I(() => [this.filterPredicate, this._rootListRef.value], () => this._setFilterPredicate())
+    ]);
+  }
+  triggerAction(e, t) {
+    return this.viewModel.triggerAction(e, t);
+  }
+  _getItem(e) {
+    if (e?.tagName.toLowerCase() === "calcite-list-item")
+      return e.value;
+    const t = e?.getAttribute("data-item");
+    return t ? this._findItemByUid(t) : null;
+  }
+  _findItemByUid(e) {
+    const t = this.tableItems?.toArray() ?? [];
+    for (; t.length; ) {
+      const i = t.shift();
+      if (i) {
+        if (i.uid === e)
+          return i;
+        t.push(...i.children?.toArray() ?? []);
+      }
+    }
+    return null;
+  }
+  _getLayerType(e) {
+    return e?.getAttribute("data-layer-type") ?? null;
+  }
+  _setFilterPredicate() {
+    const e = this._rootListRef.value;
+    e && (e.filterPredicate = this.filterPredicate ? (t) => {
+      const i = this._getItem(t);
+      return i ? this.filterPredicate(i) : !1;
+    } : void 0);
+  }
+  _handlePanelFlowItemBack(e) {
+    e.open = !1;
+  }
+  _sortTablesToIds(e, t) {
+    e?.sort((i, s) => {
+      const l = i.uid != null ? t.indexOf(i.uid) : -1, a = s.uid != null ? t.indexOf(s.uid) : -1;
+      return l > a ? -1 : l < a ? 1 : 0;
+    });
+  }
+  _handleCalciteListDragEnd(e) {
+    const { fromEl: t, dragEl: i, oldIndex: s } = e;
+    s == null || !t || !i || t.insertBefore(i, t.children[s]);
+  }
+  _onCalciteListOrderChange(e) {
+    const { _lastDragDetail: t } = this, { toEl: i, fromEl: s, dragEl: l, newIndex: a } = e, h = t?.newIndex === a && t?.dragEl === l && t?.toEl === i && t?.fromEl === s;
+    if (!s || !i || h)
+      return;
+    this._lastDragDetail = e, this._selectedDragItemLayerUid = l.value;
+    const d = Array.from(s.children).filter((n) => n?.matches("calcite-list-item")).map((n) => n.value.layer?.uid ?? "");
+    this._sortTablesToIds(this.viewModel.tables, d);
+  }
+  _handleCalciteListChange(e) {
+    const { selectionMode: t, selectedItems: i } = this;
+    if (t === "none")
+      return;
+    const s = e.target.selectedItems.map((l) => this._getItem(l)).filter(Boolean);
+    i.removeAll(), i.addMany(s);
+  }
+  _handleFlowItemClose() {
+    this.closed = !0, this.arcgisClose.emit(), this.autoDestroyDisabled || this.destroy();
+  }
+  render() {
+    const { state: e } = this, t = {
+      [u.hidden]: e === "loading",
+      [u.disabled]: e === "disabled"
+    };
+    return o`<div class=${b(P(u.widget, u.panel, t))}>${this._renderItems()}</div>`;
+  }
+  _renderNoItemsMessage() {
+    return o`<div slot=message>${this.messages.noItemsToDisplay}</div>`;
+  }
+  _renderNoItems() {
+    return this.hideNoItemsNotice ? null : o`<div class=${b(w.itemMessage)}><calcite-notice icon=information kind=info open width=full>${this._renderNoItemsMessage()}</calcite-notice></div>`;
+  }
+  _renderPanelFlowItems() {
+    return $(this._openedPanelItems.toArray(), (e) => e.uid, (e, t) => {
+      const { panel: i, title: s } = e, l = () => this._handlePanelFlowItemBack(i);
+      return o`<calcite-flow-item .description=${s} .heading=${i.title} .headingLevel=${this.headingLevel} .selected=${t === this._openedPanelItems.length - 1} @calciteFlowItemBack=${(a) => {
+        a.preventDefault(), l();
+      }}><arcgis-layer-list-item-panel .item=${e} .view=${this.view}></arcgis-layer-list-item-panel><calcite-button appearance=transparent @click=${l} slot=footer-actions width=full>${this.messages.back}</calcite-button></calcite-flow-item>`;
+    });
+  }
+  _renderItems() {
+    const { collapsed: e, _visibleItems: t, _filterEnabled: i, _rootGroupUid: s, showCloseButton: l, showCollapseButton: a, showHeading: h, _dragEnabled: d, selectionMode: n, filterText: m, filterPlaceholder: f, messages: g } = this, p = [
+      o`<calcite-flow-item .closable=${l} .closed=${this.closed} .collapsed=${e} .collapsible=${a} .heading=${h ? this.label ?? g.componentLabel : void 0} .headingLevel=${this.headingLevel} .selected=${!this._openedPanelItems.length} @calciteFlowItemClose=${() => this._handleFlowItemClose()}>${t?.length ? o`<calcite-list .canPull=${(r) => this._canMove(r, "pull")} .canPut=${(r) => this._canMove(r, "put")} data-layer-type=${s ?? F} .displayMode=${y} .dragEnabled=${d} .filterEnabled=${i} .filterPlaceholder=${f} .filterProps=${S} .filterText=${i ? m : ""} .group=${s} .label=${this.label ?? g.componentLabel} selection-appearance=border .selectionMode=${n} @calciteListChange=${this._handleCalciteListChange} @calciteListDragEnd=${(r) => this._handleCalciteListDragEnd(r.detail)} @calciteListFilter=${(r) => {
+        this.filterText = r.currentTarget?.filterText ?? "", this.arcgisFilterChange.emit();
+      }} @calciteListOrderChange=${(r) => this._onCalciteListOrderChange(r.detail)} ${x(this._rootListRef)}>${t.toArray().map((r) => this._renderItem(r))}${i && !this.hideNoFilterResultsNotice ? o`<div class=${b(w.filterNoResults)} slot=filter-no-results><calcite-notice kind=info open width=full>${this._renderNoItemsMessage()}</calcite-notice></div>` : null}</calcite-list>` : this._renderNoItems()}</calcite-flow-item>`,
+      this._renderPanelFlowItems()
+    ];
+    return this.closed ? null : _("root-flow", o`<calcite-flow>${p}</calcite-flow>`);
+  }
+  _renderItem(e) {
+    return _(e.uid, G({ canMove: this._canMove, css: w, displayMode: y, dragEnabled: this.dragEnabled, hideStatusIndicators: this.hideStatusIndicators, item: e, itemType: "table", listModeDisabled: this.viewModel.listModeDisabled, messages: this.messages, rootGroupUid: this._rootGroupUid, selectedDragItemLayerUid: this._selectedDragItemLayerUid, selectedItems: this.selectedItems, selectionMode: this.selectionMode, showErrors: this.showErrors, showFilter: this.showFilter, showTemporaryTableIndicators: this.showTemporaryTableIndicators, handleAction: (t, i) => this._onTriggerAction(t, i), handlePanelOpen: this._onPanelOpen, handleSelectedDragItemLayerUidChange: this._onSelectedDragItemLayerUidChange, view: this.view }));
+  }
+}
+C("arcgis-table-list-next", z);
+export {
+  z as ArcgisTableListNext
+};

package/dist/components/arcgis-table-list-next/index.d.ts

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

package/dist/components/arcgis-table-list-next/index.js

@@ -0,0 +1,7 @@
+import "@esri/calcite-components/components/calcite-notice";
+import "@esri/calcite-components/components/calcite-flow-item";
+import "../arcgis-layer-list-item-panel/index.js";
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-list";
+import "@esri/calcite-components/components/calcite-flow";
+export * from "./customElement.js";

package/dist/components/arcgis-table-list-next/types.d.ts

@@ -0,0 +1,104 @@
+import type Collection from "@arcgis/core/core/Collection.js";
+import type EsriError from "@arcgis/core/core/Error.js";
+import type Layer from "@arcgis/core/layers/Layer.js";
+import type SubtypeGroupLayer from "@arcgis/core/layers/SubtypeGroupLayer.js";
+import type Sublayer from "@arcgis/core/layers/support/Sublayer.js";
+import type SubtypeSublayer from "@arcgis/core/layers/support/SubtypeSublayer.js";
+import type { Action, Sections } from "../../utils/action-utils.js";
+import type { ArcgisTableListNext } from "./customElement.js";
+import type { SortableList as SortableList } from "@esri/calcite-components/components/calcite-sortable-list";
+
+/** Item state for a table displayed by Table List (next). */
+export type TableItem = {
+  actionsOpen: boolean;
+  actionsSections: Sections;
+  checkPublishStatusEnabled: boolean;
+  children: Collection<TableItem>;
+  clone: () => TableItem;
+  readonly error?: EsriError | null;
+  hidden: boolean;
+  /** Layer types represented by table items in Table List (next). */
+  layer: TableItemLayer;
+  listItemCreatedFunction: null | undefined | TableItemModifier;
+  listModeDisabled: boolean;
+  open: boolean;
+  panel: TableItemPanel;
+  parent: null | undefined | TableItem;
+  readonly publishing: boolean;
+  sortable: boolean;
+  title: string;
+  readonly uid: string;
+};
+
+/**
+ * A function for customizing a table item as it is created.
+ *
+ * @param event
+ */
+export type TableItemModifier = (event: TableItemModifierEvent) => void;
+
+/** The event object for the `arcgisTriggerAction` event in Table List (next). */
+export type TableListTriggerActionEvent = {
+  action: Action;
+  item: TableItem;
+};
+
+/** @internal */
+export type CanSortEvent = {
+  selected: null | undefined | TableItem;
+  from: null | undefined | TableItem;
+  to: null | undefined | TableItem;
+};
+
+/**
+ * @param event
+ * @internal
+ */
+export type CanSortFunction = (event: CanSortEvent) => boolean;
+
+/** @internal */
+export type DragDetail = Parameters<NonNullable<SortableList["canPull"]>>[0];
+
+/**
+ * A function that determines whether a table item matches a filter.
+ *
+ * @param item
+ */
+export type FilterPredicate = (item: TableItem) => boolean;
+
+/** @internal */
+export type SortableTables = Collection<{ uid?: string | null; }> | null | undefined;
+
+/** The properties used to configure the Table List (next). */
+export type TableListOptions = Partial<Pick<ArcgisTableListNext, "collapsed" | "dragEnabled" | "filterPlaceholder" | "filterText" | "headingLevel" | "hideStatusIndicators" | "icon" | "label" | "minFilterItems" | "selectionMode" | "showErrors" | "showFilter" | "showTemporaryTableIndicators">>
+  & {
+  listItemCreatedFunction?: TableItemModifier;
+};
+
+/** Panel state for a table item displayed by Table List (next). */
+export type TableItemPanel = {
+  /** The content associated with a table list item panel. The string `legend` displays a legend. */
+  content: null | undefined | TableItemPanelContents;
+  disabled: boolean;
+  flowEnabled: boolean;
+  icon: null | undefined | string;
+  image: null | undefined | string;
+  listItem: null | undefined | TableItem;
+  open: boolean;
+  title: string;
+  visible: boolean;
+};
+
+/** Layer types represented by table items in Table List (next). */
+export type TableItemLayer = Layer | Sublayer | SubtypeGroupLayer | SubtypeSublayer;
+
+/** Event object passed to a table item creation callback. */
+export type TableItemModifierEvent = {
+  item: TableItem;
+};
+
+/** Defines one or more content values for a table list item panel. */
+export type TableItemPanelContents = TableItemPanelContent | TableItemPanelContent[];
+
+/** The content associated with a table list item panel. The string `legend` displays a legend. */
+export type TableItemPanelContent = HTMLElement | string;

package/dist/components/arcgis-template-image/customElement.js

@@ -7,7 +7,6 @@ import { unsafeHTML as b } from "lit/directives/unsafe-html.js";
 import { LitElement as _, safeStyleMap as y } from "@arcgis/lumina";
 import * as l from "@arcgis/toolkit/log";
 import { isSharedTemplateMetadata as c, isStandardFeatureTemplate as v } from "@arcgis/core/applications/Components/templateUtils.js";
-import "@arcgis/core/editing/sharedTemplates/SharedTemplateMetadata.js";
 import { renderPreviewHTML as w } from "@arcgis/core/symbols/support/symbolUtils.js";
 import { isTable as I } from "@arcgis/core/applications/Components/layerUtils.js";
 const D = g`.esri-thumbnail-preview{width:22px;height:22px;background-position:50% 50%;background-repeat:no-repeat}.template-image-container{width:32px;height:32px;display:flex;align-items:center;justify-content:center}`;

package/dist/components/arcgis-time-bar/TimeBarViewModel.d.ts

@@ -0,0 +1,75 @@
+import type Accessor from "@arcgis/core/core/Accessor.js";
+import type TimeExtent from "@arcgis/core/time/TimeExtent.js";
+import type MapView from "@arcgis/core/views/MapView.js";
+import type SceneView from "@arcgis/core/views/SceneView.js";
+import type TimeInterval from "@arcgis/core/time/TimeInterval.js";
+import type WebMap from "@arcgis/core/WebMap.js";
+import type WebScene from "@arcgis/core/WebScene.js";
+import type { DateTimeFormatOptions } from "@arcgis/core/intl/date.js";
+import type { Format, Mode, State, Stops, TickFormat } from "./types.js";
+import type { TimeZone } from "@arcgis/core/time/types.js";
+
+export class TimeBarViewModel extends Accessor {
+  get canNext(): boolean;
+  get canPrevious(): boolean;
+  /** @default false */
+  accessor disabled: boolean;
+  get effectiveStops(): Date[] | undefined;
+  get effectiveStopsEpoch(): number[] | undefined;
+  /**
+   * Indicates whether the `fullTimeExtent` starts before the common era (BCE).
+   * This property is used to determine if era information should be included in the time slider's date labels.
+   */
+  get era(): DateTimeFormatOptions["era"];
+  /** @default "date" */
+  accessor format: Format;
+  accessor fullTimeExtent: TimeExtent | undefined;
+  /** Convenience property to determine if the component is interactive. */
+  get interactive(): boolean;
+  /** Determines if the current timeExtent is outside the bounds of the fullTimeExtent or otherwise invalid. */
+  get isOutOfRange(): boolean;
+  /** @default false */
+  accessor loadPersistedSettingsDisabled: boolean;
+  accessor locale: string | undefined;
+  /** @default false */
+  accessor loop: boolean;
+  /** @default "time-window" */
+  accessor mode: Mode;
+  accessor playRate: number;
+  /** @default false */
+  accessor reverseAnimation: boolean;
+  /** @default false */
+  accessor savePersistedSettingsDisabled: boolean;
+  get state(): State;
+  accessor stops: Stops | undefined;
+  accessor tickFormat: DateTimeFormatOptions | undefined;
+  get tickFormats(): TickFormat[];
+  get tickFormatter(): (value: number) => string;
+  accessor timeExtent: TimeExtent | undefined;
+  get timeZone(): TimeZone;
+  set timeZone(value: TimeZone | null | undefined);
+  accessor view: MapView | SceneView | undefined;
+  /** View's time zone, if available. */
+  get viewTimeZone(): TimeZone | undefined;
+  destroy(): void;
+  /** @param date */
+  formatDate(date: Date): string;
+  /** @param date */
+  formatDateTime(date: Date): string;
+  /**
+   * @param value
+   * @param formatOptions
+   */
+  formatNumber(value: number, formatOptions: Intl.NumberFormatOptions): string;
+  /** @param date */
+  formatTime(date: Date): string;
+  /** @param interval */
+  getTickValues(interval: TimeInterval): number[];
+  initialize(): Promise<void>;
+  next(): void;
+  play(): void;
+  previous(): void;
+  stop(): void;
+  /** @param document */
+  updateWebDocument(document: WebMap | WebScene): void;
+}