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

package/dist/components/arcgis-feature-templates-legacy/customElement.d.ts

@@ -0,0 +1,224 @@
+/// <reference path="../../index.d.ts" />
+import type TemplateItem from "@arcgis/core/widgets/FeatureTemplates/TemplateItem.js";
+import type SubtypeGroupLayer from "@arcgis/core/layers/SubtypeGroupLayer.js";
+import type TemplateItemGroup from "@arcgis/core/widgets/FeatureTemplates/TemplateItemGroup.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { ArcgisReferenceElement, IconName } from "../types.js";
+import type { SelectEvent, FeatureTemplatesViewModelState } from "@arcgis/core/widgets/FeatureTemplates/FeatureTemplatesViewModel.js";
+import type { MapViewOrSceneView } from "@arcgis/core/views/MapViewOrSceneView.js";
+import type { Filter, GroupByType } from "@arcgis/core/widgets/FeatureTemplates/types.js";
+import type { HeadingLevel } from "@arcgis/core/widgets/support/types.js";
+import type { Icon } from "@esri/calcite-components/components/calcite-icon";
+import type { LayerWithFeatureTemplatesUnion } from "@arcgis/core/layers/types.js";
+
+/**
+ * > [!WARNING]
+ * >
+ * > This is a **legacy component**. It relies on an underlying widget as part of our migration to native web components.
+ * >
+ * > A fully native replacement for this component is in development. Once it reaches feature parity, the legacy component will be deprecated and no longer maintained. At that point, development should use the native component.
+ *
+ * The FeatureTemplates component is part of an editing workflow. Its main purpose is to display [FeatureLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/) templates from one or more feature layers.
+ *
+ * @since 5.0
+ */
+export abstract class ArcgisFeatureTemplatesLegacy extends LitElement {
+  /**
+   * 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/components/arcgis-feature-templates-legacy/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * A function that can be defined to disable specific
+   * [template items](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTemplates/TemplateItem/)
+   * within the component. The function takes an object containing a
+   * [layer](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTemplates/TemplateItem/#layer)
+   * and [template](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTemplates/TemplateItem/#template). If the function returns `true`, the item is disabled.
+   */
+  accessor disabledItemFunction: DisabledItemFunction;
+  /**
+   * Indicates whether the list of available feature [template items](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTemplates/TemplateItem/) should scroll within its containing element.
+   *
+   * @default false
+   */
+  accessor enableListScroll: boolean;
+  /**
+   * A defined [function](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTemplates/types/#Filter) used to help filter
+   * [template items](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTemplates/TemplateItem/) within the component.
+   * A custom function can be used to aid when searching for templates. It takes a function which passes in
+   * an object containing a [name](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTemplates/TemplateItem/#label)
+   * property of the [template item](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTemplates/TemplateItem/).
+   *
+   * ![featureTemplatesFilterFunction](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/featureTemplatesFilterFunction.avif)
+   *
+   * @example
+   * // Filter and display templates only if their labels contain the word `Street`
+   * function myFilterFunction(filter) {
+   *   let containsName = filter.label.includes("Street");
+   *   return containsName;
+   * }
+   *
+   * // Create the FeatureTemplates widget
+   * templates = new FeatureTemplates({
+   *   container: "templatesDiv",
+   *   visibleElements: {
+   *     filter: false, // disable the default filter UI
+   *   },
+   *   layers: [featureLayer], // in this example, one layer is used
+   *   filterFunction: myFilterFunction
+   * });
+   */
+  accessor filterFunction: Filter | null | undefined;
+  /**
+   * Text used to filter items.
+   *
+   * @default ""
+   */
+  accessor filterText: string;
+  /**
+   * It is possible to group [template items](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTemplates/TemplateItem/). This can aid
+   * in managing various template items and how they display within the component. The values are discussed below.
+   *
+   * Type | Description | Example
+   * ----- | ----------- | -------
+   * layer | This is the *default* grouping. Groups template items by layers. | ![featureTemplatesGroupByLayer](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/groupByLayers.avif)
+   * geometry | Groups template items by geometry type. | ![FeatureTemplatesGroupByGeometry](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/groupByGeometry.avif)
+   * none | The component displays everything in one list with no grouping. | ![featureTemplatesGroupByLayer](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/groupByNone.avif)
+   * [GroupByFunction](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTemplates/types/#GroupByFunction) | Custom function that takes an object containing a [FeatureTemplate](https://developers.arcgis.com/javascript/latest/references/core/layers/support/FeatureTemplate/) and [FeatureLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/). | ![FeatureTemplatesGroupByCustomGroupFunction](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/groupCustomGroup.avif)
+   *
+   * @default "layer"
+   * @example
+   * // This example shows using a function to check if
+   * // the layer title contains the word 'military'. If so,
+   * // return a group of items called "All Military Templates"
+   * function customGroup(grouping) {
+   *   // Consolidate all military layers
+   *   if (grouping.layer.title.toLowerCase().indexOf("military") > -1) {
+   *     return "All Military Templates"
+   *   }
+   * // Otherwise, group by layer title
+   *   return grouping.layer.title;
+   * }
+   *
+   * // Create the FeatureTemplates widget
+   * templates = new FeatureTemplates({
+   *   container: "templatesDiv",
+   *   layers: layers,
+   *   groupBy: customGroup
+   * });
+   */
+  accessor groupBy: GroupByType | null | undefined;
+  /**
+   * Indicates the heading level to use for the labels of grouped feature templates.
+   * By default, the group label is rendered
+   * as a level 4 heading (e.g. `<h4>Group label</h4>`). Depending on the component's placement
+   * in your app, you may need to adjust this heading for proper semantics. This is
+   * important for meeting accessibility standards.
+   *
+   * @default 4
+   * @since 4.20
+   * @see [Heading Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)
+   * @example
+   * // Group label will render as an <h3>
+   * featureTemplates.headingLevel = 3;
+   */
+  accessor headingLevel: HeadingLevel;
+  /**
+   * Indicates whether the templates filter displays.
+   *
+   * @default false
+   * @since 5.0
+   */
+  accessor hideFilter: boolean;
+  /**
+   * Icon which represents the component.
+   * Typically used when the component is controlled by another component (e.g. by the Expand component).
+   *
+   * @default "list-rectangle"
+   * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
+   */
+  get icon(): Icon["icon"];
+  set icon(value: IconName);
+  get items(): Array<TemplateItem | TemplateItemGroup>;
+  /** The component's default label. */
+  accessor label: string;
+  /**
+   * An array of [FeatureLayers](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/)
+   * to display within the component. The order in which these layers are
+   * set in the array dictates how they display within the component.
+   *
+   * > [!WARNING]
+   * >
+   * > The component is designed to only display layers that are enabled for editing.
+   * > It will not display layers that are enabled to only edit attributes.
+   *
+   * @example
+   * // The layers to display within the widget
+   * let militaryUnits = new FeatureLayer({
+   *   url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/2"
+   * });
+   *
+   * let militaryHostile = new FeatureLayer({
+   *   url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/6"
+   * });
+   *
+   * let layers = [militaryUnits, militaryHostile];
+   *
+   * // Create FeatureTemplates widget
+   * templates = new FeatureTemplates({
+   *   container: "templatesDiv",
+   *   layers: layers
+   * });
+   */
+  accessor layers: Array<SubtypeGroupLayer | LayerWithFeatureTemplatesUnion>;
+  /**
+   * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
+   *
+   * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
+   */
+  accessor referenceElement: ArcgisReferenceElement | string | undefined;
+  get selectedItem(): TemplateItem | undefined;
+  /**
+   * Specifies the selection behavior of list items. The `"single"` selection mode keeps the clicked list item selected. Whereas, `"none"` does not preserve the selection after clicking the list item.
+   *
+   * @default "none"
+   */
+  accessor selectionMode: "single" | "none" | null | undefined;
+  /**
+   * The current state of the component.
+   *
+   * @default "disabled"
+   */
+  get state(): FeatureTemplatesViewModelState;
+  /** A reference to the MapView or SceneView. */
+  accessor view: MapViewOrSceneView | null | undefined;
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
+  /**
+   * Selects the template item to use.
+   *
+   * @param item - The template item to select.
+   */
+  select(item: null | undefined | TemplateItem): void;
+  "@setterTypes": {
+    icon?: IconName;
+  };
+  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "state"; }>;
+  /** 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 arcgisSelect: import("@arcgis/lumina").TargetedEvent<this, SelectEvent>;
+  readonly "@eventTypes": {
+    arcgisPropertyChange: ArcgisFeatureTemplatesLegacy["arcgisPropertyChange"]["detail"];
+    arcgisReady: ArcgisFeatureTemplatesLegacy["arcgisReady"]["detail"];
+    arcgisSelect: ArcgisFeatureTemplatesLegacy["arcgisSelect"]["detail"];
+  };
+}
+
+/** @param params */
+export type DisabledItemFunction = (params: Pick<TemplateItem, "layer" | "template">) => boolean;

package/dist/components/arcgis-feature-templates-legacy/customElement.js

@@ -0,0 +1,30 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { c as i } from "../../chunks/runtime.js";
+import { usePropertyChange as t } from "@arcgis/lumina/controllers";
+import { reEmitEvent as r } from "@arcgis/lumina/controllers/accessor";
+import o from "@arcgis/core/widgets/FeatureTemplates.js";
+import { LitElement as s, createEvent as a } from "@arcgis/lumina";
+import { m as l } from "../../chunks/useWidget.js";
+import { css as n } from "lit";
+const c = n`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}.esri-widget{box-sizing:border-box;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-relative-tight)}.esri-widget *,.esri-widget :before,.esri-widget :after{box-sizing:inherit}.esri-widget.esri-widget--disabled>*{opacity:.4;pointer-events:none}.esri-widget.esri-widget--compact{--esri-widget-padding-y: 0;--esri-widget-padding-x: 0}.esri-widget__anchor{color:var(--calcite-color-text-2)}.esri-widget__anchor:hover{color:var(--calcite-color-text-3)}.esri-widget__anchor:hover,.esri-widget__anchor:focus{text-decoration:underline}.esri-widget__anchor--disabled{opacity:.4;pointer-events:none}.esri-widget__header{background-color:var(--calcite-color-foreground-1);flex:1 0 100%;justify-content:space-between;align-items:center;width:100%;min-height:48px;padding:12px 0 12px 15px;display:flex}.esri-widget__heading{word-break:break-word}.esri-widget__header .esri-widget__heading{width:calc(100% - 48px);text-align:initial;color:var(--calcite-color-text-1);align-items:center;margin:0;padding:0;display:flex}.esri-widget__header-button{appearance:none;cursor:pointer;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);border:none;flex:0 0 48px;justify-content:center;align-self:stretch;align-items:center;width:48px;padding:0;display:flex}.esri-widget__footer{background-color:var(--calcite-color-foreground-1);justify-content:center;align-items:center;width:100%;min-height:48px;display:flex}.esri-widget__footer-pagination{color:var(--calcite-color-text-2);justify-content:space-between;align-items:center;display:flex}.esri-widget__footer-pagination-previous-button,.esri-widget__footer-pagination-next-button{cursor:pointer;background-color:var(--calcite-color-foreground-1);border:0;margin:0 7px;padding:12px 15px;transition:background-color .125s ease-in-out}.esri-widget__footer-pagination-previous-button:hover,.esri-widget__footer-pagination-previous-button:focus,.esri-widget__footer-pagination-next-button:hover,.esri-widget__footer-pagination-next-button:focus{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1)}.esri-menu{visibility:hidden;z-index:1;background-clip:padding;background-color:var(--calcite-color-foreground-1);background-clip:padding-box;width:100%;max-height:0;margin:2px 0 0;padding:0;font-size:var(--calcite-font-size);line-height:var(--calcite-spacing-xl);position:absolute;top:100%;left:0;overflow:hidden;box-shadow:0 1px 2px #0000004d}.esri-menu .esri-menu__header{color:var(--calcite-color-text-inverse);background-color:var(--calcite-color-inverse);padding:6px 12px}.esri-menu__list{margin:0;padding:0;list-style:none}.esri-menu__list-item{cursor:pointer;border-top:1px solid #adadad4d;border-left:3px solid #0000;padding:.8em 1em}.esri-menu__list-item [class^=esri-icon-],.esri-menu__list-item [class*=" esri-icon-"]{padding-right:2.8px}.esri-menu__list-item:first-child{border-top:none}.esri-menu__list-item--focus,.esri-menu__list-item:hover,.esri-menu__list-item:focus{background-color:var(--calcite-color-foreground-1)}.esri-menu__list-item:active{background-color:var(--calcite-color-foreground-current)}.esri-menu__list-item--active,.esri-menu__list-item--active:hover,.esri-menu__list-item--active:focus{background-color:var(--calcite-color-foreground-1);border-left-color:var(--calcite-color-brand)}.esri-widget__table{border-collapse:collapse;color:var(--calcite-color-text-1);border:none;width:100%;line-height:var(--calcite-font-line-height-relative-tight)}.esri-widget__table tr:nth-child(odd){background-color:var(--calcite-color-transparent)}.esri-widget__table tr:nth-child(2n){background-color:var(--calcite-color-transparent-press)}.esri-widget__table tr a{color:var(--calcite-color-text-2)}.esri-widget__table tr a:hover,.esri-widget__table tr a:focus{color:var(--calcite-color-text-1)}.esri-widget__table tr td,.esri-widget__table tr th{vertical-align:top;word-break:break-word;padding:.5em .7em;font-size:var(--calcite-font-size-sm);font-weight:var(--calcite-font-weight-regular)}.esri-widget__table tr th{text-align:left;border-right:3px solid #0000000d;width:50%}.esri-widget__table tr td{width:50%}.esri-input{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1);border:1px solid #959595;font-size:var(--calcite-font-size)}.esri-input::-ms-clear{display:none}.esri-input::placeholder{opacity:1;color:var(--calcite-color-text-2)}.esri-input:placeholder-shown{text-overflow:ellipsis}.esri-input[type=text],.esri-input[type=password],.esri-input[type=number]{height:32px;padding:0 .5em}calcite-combobox.esri-input{border:none}.esri-widget__content--empty{text-align:center;color:var(--calcite-color-border-input);flex-flow:column wrap;align-items:center;padding:18px 22px;display:flex}.esri-widget__content--empty h1.esri-widget__heading,.esri-widget__content--empty h2.esri-widget__heading,.esri-widget__content--empty h3.esri-widget__heading,.esri-widget__content--empty h4.esri-widget__heading,.esri-widget__content--empty h5.esri-widget__heading{font-weight:var(--calcite-font-weight-regular)}.esri-widget__content-illustration--empty{width:128px;padding:1rem 0}.esri-widget__content-icon--empty{width:32px;padding:.5rem 0}.esri-select{appearance:none;cursor:pointer;color:var(--calcite-color-text-2);background:var(--calcite-color-foreground-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 32 32' width='32' height='32'%3E%3Cpath d='M8 11.207l-4-4V5.793l4 4 4-4v1.414z' fill='%23adadad' fillrule='nonzero'/%3E%3C/svg%3E") 100% no-repeat;border:1px solid #959595;border-radius:0;width:100%;height:32px;margin:0;padding:0 .5em;font-family:inherit;font-size:.85em;display:block}.esri-select[disabled]{cursor:auto}.esri-select::-ms-expand{display:none}.esri-disabled a,.esri-disabled [role=menu],.esri-disabled [role=checkbox],.esri-disabled [class^=esri-icon-],.esri-disabled [class*=" esri-icon-"]{color:var(--calcite-color-text-3)}.keynav-mode .esri-widget:focus,.keynav-mode .esri-widget :focus{z-index:1;outline-offset:2px;outline:2px solid #adadad}.esri-widget__loader-animation{border:.15em solid #adadad4d;border-top-color:var(--calcite-color-border-input);border-radius:100%;width:1em;height:1em;font-size:var(--calcite-font-size-md);animation:1.25s linear infinite esri-rotate;display:block;transform:translateZ(0)}:dir(rtl) .esri-widget__table th{text-align:right;border-left:3px solid #0000000d;border-right:none}:dir(rtl) .esri-select{background-position:0}:dir(rtl) .esri-menu__list-item{border-left:none;border-right:3px solid #0000}:dir(rtl) .esri-menu__list-item [class^=esri-icon-],:dir(rtl) .esri-menu__list-item [class*=" esri-icon-"]{padding-left:2px;padding-right:0}:dir(rtl) .esri-menu__list-item--active{border-right-color:var(--calcite-color-brand)}.esri-icon-font-fallback-text{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.esri-rotating{animation:1.25s linear infinite esri-rotate;transform:translateZ(0)}.esri-clearfix:before,.esri-clearfix:after{content:" ";display:table}.esri-clearfix:after{clear:both}.esri-interactive{cursor:pointer}.esri-hidden{display:none!important}.esri-invisible{visibility:hidden!important}.esri-offscreen{position:absolute;top:-999em;left:-999em}.esri-match-height{flex-direction:column;flex:auto;display:flex;overflow:hidden}.esri-item-list{width:100%}.esri-item-list__filter-container--sticky{z-index:1;position:sticky;top:0}.esri-item-list__group{margin-top:12px}.esri-item-list__scroller{overflow-y:auto}.esri-item-list__scroller{z-index:0;position:relative}.esri-item-list__scroller--enabled{max-height:420px}.esri-item-list__group__header{color:var(--calcite-color-text-2);font-weight:var(--calcite-font-weight-medium)}.esri-item-list__list-item{cursor:pointer;min-height:32px}.esri-item-list__list-item[class^=esri-icon-],.esri-item-list__list-item[class*=" esri-icon-"]{padding-inline-end:2.8px}.esri-item-list__list-item--disabled{cursor:default}.esri-item-list__list-item-icon{justify-content:center;align-items:center;min-width:32px;height:32px;display:flex}.esri-item-list__list-item-icon span{line-height:0}.esri-thumbnail-preview{background-position:50%;width:22px;height:22px}.esri-item-list__no-matches-message{justify-content:center;align-items:center;height:96px;display:flex}.esri-feature-templates{background:var(--calcite-color-background);width:100%}.esri-feature-templates__list-item-icon{flex:0;justify-content:center;align-items:center;width:48px;min-width:48px;display:flex}.esri-feature-templates__list-item-icon>div{display:flex}.esri-ui .esri-feature-templates{width:300px}.esri-ui .esri-widget .esri-feature-templates{width:100%}.esri-feature-templates .esri-item-list__scroller--enabled{max-height:var(--arcgis-feature-templates-max-list-height, 420px)}`, d = l(o);
+class g extends s {
+  constructor() {
+    super(...arguments), this.widget = d(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.enableListScroll = this.widget.enableListScroll, this.filterFunction = this.widget.filterFunction, this.filterText = this.widget.filterText, this.groupBy = this.widget.groupBy, this.headingLevel = this.widget.headingLevel, this.hideFilter = this.widget.visibleElements.filter, this.disabledItemFunction = this.viewModel.disabledItemFunction, this.icon = this.widget.icon, this.label = this.widget.label, this.layers = this.widget.layers, this.selectionMode = this.widget.selectionMode, this.state = this.viewModel.state, this.items = this.viewModel.items, this.selectedItem = this.viewModel.selectedItem, this.view = this.viewModel.view, this.arcgisPropertyChange = t()("state"), this.arcgisReady = a(), this.arcgisSelect = r(() => this.widget, "select");
+  }
+  static {
+    this.properties = { autoDestroyDisabled: 5, enableListScroll: 5, filterFunction: 0, filterText: 1, groupBy: 1, headingLevel: 9, hideFilter: 5, disabledItemFunction: 0, icon: 1, label: 1, layers: 0, referenceElement: 1, selectionMode: 1, state: 32, items: 32, selectedItem: 32, view: 0 };
+  }
+  static {
+    this.styles = c;
+  }
+  async destroy() {
+    await this.manager.destroy();
+  }
+  select(e) {
+    this.widget.select(e);
+  }
+}
+i("arcgis-feature-templates-legacy", g);
+export {
+  g as ArcgisFeatureTemplatesLegacy
+};

package/dist/components/arcgis-feature-templates-legacy/index.d.ts

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

package/dist/components/arcgis-feature-templates-legacy/index.js

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

package/dist/components/arcgis-feature-title/customElement.d.ts

@@ -1,8 +1,8 @@
 /// <reference path="../../index.d.ts" />
 import type Graphic from "@arcgis/core/Graphic.js";
-import type FeatureLayer from "@arcgis/core/layers/FeatureLayer";
-import type SubtypeGroupLayer from "@arcgis/core/layers/SubtypeGroupLayer";
-import type SubtypeSublayer from "@arcgis/core/layers/support/SubtypeSublayer";
+import type FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";
+import type SubtypeGroupLayer from "@arcgis/core/layers/SubtypeGroupLayer.js";
+import type SubtypeSublayer from "@arcgis/core/layers/support/SubtypeSublayer.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 

package/dist/components/arcgis-feature-utility-network-association-list/customElement.js

@@ -1,124 +1,128 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as m } from "../../chunks/runtime.js";
-import { css as f, html as n } from "lit";
+import { c as f } from "../../chunks/runtime.js";
+import { css as g, html as n } from "lit";
 import { keyed as d } from "lit/directives/keyed.js";
 import { ArcgisUtilityNetworkAssociationList as y } from "../arcgis-utility-network-association-list/customElement.js";
-import { stripHTML as u } from "@arcgis/core/applications/Components/stringUtils.js";
-import { renderElement as p, safeClassMap as g } from "@arcgis/lumina";
+import { stripHTML as p } from "@arcgis/core/applications/Components/stringUtils.js";
 import { formatNumber as w, substitute as $ } from "@arcgis/core/intl.js";
-const b = f`:host{position:relative;flex:1 1 auto}.list-item--hidden{display:none}.feature-observer{bottom:var(--calcite-spacing-xxl);position:relative;text-align:center;z-index:2}.loading-container{display:flex;justify-content:center;padding:var(--calcite-spacing-md) 0;width:100%}.notice-container{margin-bottom:var(--calcite-spacing-xs)}`, _ = "nested";
+import { renderElement as h, safeClassMap as b } from "@arcgis/lumina";
+import { i as m } from "../../chunks/layer-utils.js";
+const F = g`:host{position:relative;flex:1 1 auto}.list-item--hidden{display:none}.feature-observer{bottom:var(--calcite-spacing-xxl);position:relative;text-align:center;z-index:2}.loading-container{display:flex;justify-content:center;padding:var(--calcite-spacing-md) 0;width:100%}.notice-container{margin-bottom:var(--calcite-spacing-xs)}`, _ = "nested";
 class A extends y {
   constructor() {
-    super(...arguments), this.autoDestroyDisabled = !1, this.displayCount = 3, this.flowType = "feature-utility-network-association-type";
+    super(...arguments), this.autoDestroyDisabled = !1, this.displayCount = 3, this.useFeatureNextFlowItem = !1, this.flowType = "feature-utility-network-association-type";
   }
   static {
-    this.properties = { autoDestroyDisabled: 5, description: 1, displayCount: 9, endIndex: 32, flowItems: 0, flowType: 1, heading: 1, map: 0, spatialReference: 0, timeZone: 1, view: 0 };
+    this.properties = { autoDestroyDisabled: 5, description: 1, displayCount: 9, endIndex: 32, flowItems: 0, useFeatureNextFlowItem: 5, flowType: 1, heading: 1, map: 0, referenceElement: 1, spatialReference: 0, timeZone: 1, view: 0 };
   }
   static {
-    this.styles = b;
+    this.styles = F;
   }
   get endIndex() {
-    const { currentFeaturePage: t, featuresPerPage: e, maxFeatureCount: s } = this;
-    return Math.min(t * e, s);
+    const { currentFeaturePage: e, featuresPerPage: t, maxFeatureCount: s } = this;
+    return Math.min(e * t, s);
   }
   async destroy() {
     await this.manager.destroy();
   }
-  _featureViewModelMatch(t, e) {
-    const s = t.graphic, i = s?.layer;
+  _featureViewModelMatch(e, t) {
+    const s = e.graphic, i = s?.layer;
     let o = null;
-    i?.type === "subtype-sublayer" && i.parent ? o = i.parent.globalIdField ?? null : i && "globalIdField" in i && (o = i.globalIdField);
-    const l = o ? s?.attributes[o] : null, r = e.graphic, a = r?.layer;
+    m(i) && i.parent ? o = i.parent.globalIdField ?? null : i && "globalIdField" in i && (o = i.globalIdField);
+    const l = o ? s?.getAttribute(o) : null, r = t.graphic, a = r?.layer;
     let c = null;
-    a?.type === "subtype-sublayer" && a.parent ? c = a.parent.globalIdField ?? null : a && "globalIdField" in a && (c = a.globalIdField);
-    const h = c ? r?.attributes[c] : null;
-    return l && h && l === h;
+    m(a) && a.parent ? c = a.parent.globalIdField ?? null : a && "globalIdField" in a && (c = a.globalIdField);
+    const u = c ? r?.getAttribute(c) : null;
+    return !!(l && u && l === u);
   }
-  _findFlowItem(t) {
-    return this.flowItems?.findIndex((e) => {
-      if (e.flowType !== "feature-association")
+  _findFlowItem(e) {
+    return this.flowItems?.findIndex((t) => {
+      if (t.flowType !== "feature-association")
         return !1;
-      const s = e.viewModel;
-      return this._featureViewModelMatch(s, t);
+      const s = t.viewModel;
+      return this._featureViewModelMatch(s, e);
     }) ?? -1;
   }
-  _formatPercentAlong(t) {
-    const { percentAlong: e } = t;
-    return e == null ? "" : w(e, {
+  _formatPercentAlong(e) {
+    const { percentAlong: t } = e;
+    return t == null ? "" : w(t, {
       style: "percent",
       maximumFractionDigits: 2
     });
   }
-  async _handleFeatureClick(t, e, s) {
+  async _handleFeatureClick(e, t, s) {
     const { flowItems: i } = this;
-    if (t) {
+    if (e) {
       i?.destroyAll();
       return;
     }
-    if (e < 0 || !i) {
+    if (t < 0 || !i) {
       await this._selectAssociation(s);
       return;
     }
-    for (; i.length > e + 1; )
+    for (; i.length > t + 1; )
       i.pop();
   }
-  _isConnectivityAssociation(t) {
-    const { associationType: e } = t;
-    return e === "connectivity" || e === "junction-junction-connectivity" || e === "junction-edge-from-connectivity" || e === "junction-edge-midspan-connectivity" || e === "junction-edge-to-connectivity";
+  _isConnectivityAssociation(e) {
+    const { associationType: t } = e;
+    return t === "connectivity" || t === "junction-junction-connectivity" || t === "junction-edge-from-connectivity" || t === "junction-edge-midspan-connectivity" || t === "junction-edge-to-connectivity";
   }
-  _isConnectivityMidspanAssociation(t) {
-    return t.associationType === "junction-edge-midspan-connectivity";
+  _isConnectivityMidspanAssociation(e) {
+    return e.associationType === "junction-edge-midspan-connectivity";
   }
-  _isParentFeature(t) {
-    const e = this.flowItems?.getItemAt(0);
-    if (!e)
+  _isParentFeature(e) {
+    const t = this.flowItems?.getItemAt(0);
+    if (!t)
       return !1;
-    const s = e.parentFeatureViewModel;
-    return this._featureViewModelMatch(s, t);
+    const s = t.parentFeatureViewModel;
+    return this._featureViewModelMatch(s, e);
   }
-  async _selectAssociation(t) {
-    const { flowItems: e } = this;
-    e && e.push(p(d(this.parentFeatureViewModel, n`<arcgis-feature .autoDestroyDisabled=${this.autoDestroyDisabled} .flowItems=${e} .flowType=${"feature-utility-network-associations"} .graphic=${t.graphic} .map=${this.map} show-utility-network-content .spatialReference=${this.spatialReference} .timeZone=${this.timeZone} .view=${this.view}></arcgis-feature>`)));
+  async _selectAssociation(e) {
+    const { flowItems: t } = this;
+    if (!t)
+      return;
+    const s = this.useFeatureNextFlowItem ? h(d(this.parentFeatureViewModel, n`<arcgis-feature-next .autoDestroyDisabled=${this.autoDestroyDisabled} .flowItems=${t} .flowType=${"feature-association"} .graphic=${e.graphic} .map=${this.map} .referenceElement=${this.referenceElement} show-utility-network-content .spatialReference=${this.spatialReference} .timeZone=${this.timeZone} .view=${this.view}></arcgis-feature-next>`)) : h(d(this.parentFeatureViewModel, n`<arcgis-feature .autoDestroyDisabled=${this.autoDestroyDisabled} .flowItems=${t} .flowType=${"feature-association"} .graphic=${e.graphic} .map=${this.map} .referenceElement=${this.referenceElement} show-utility-network-content .spatialReference=${this.spatialReference} .timeZone=${this.timeZone} .view=${this.view}></arcgis-feature>`));
+    t.push(s);
   }
-  _showAllAssociations(t) {
-    const { flowItems: e, description: s } = this;
-    if (!e || !t)
+  _showAllAssociations(e) {
+    const { flowItems: t, description: s } = this;
+    if (!t || !e)
       return;
     this.showAllEnabled = !0;
-    const i = t?.title ?? "";
-    e.push(p(n`<arcgis-feature-utility-network-association-list .autoDestroyDisabled=${this.autoDestroyDisabled} .associationViewModels=${this.associationViewModels} .description=${s} .flowItems=${e} .flowType=${this.flowType} .heading=${i} .messages=${this.messages} .parentFeatureViewModel=${this.parentFeatureViewModel} .selectedLayer=${t} .showAllEnabled=${this.showAllEnabled}></arcgis-feature-utility-network-association-list>`));
+    const i = e?.title ?? "";
+    t.push(h(n`<arcgis-feature-utility-network-association-list .autoDestroyDisabled=${this.autoDestroyDisabled} .associationViewModels=${this.associationViewModels} .description=${s} .flowItems=${t} .flowType=${this.flowType} .heading=${i} .messages=${this.messages} .parentFeatureViewModel=${this.parentFeatureViewModel} .referenceElement=${this.referenceElement} .selectedLayer=${e} .showAllEnabled=${this.showAllEnabled} .useFeatureNextFlowItem=${this.useFeatureNextFlowItem}></arcgis-feature-utility-network-association-list>`));
   }
   render() {
-    const { associationViewModels: t, state: e } = this, s = this.selectedLayer?.title ?? this.messages?.noTitle ?? "";
-    return n`<div class="root">${e === "loading" || e === "querying" ? this._renderLoading() : n`<calcite-list .displayMode=${_} .filterEnabled=${this.showAllEnabled && !!this.selectedLayer} .filterLabel=${this.messages?.associationFilterPlaceholder} .filterPlaceholder=${this.messages?.associationFilterPlaceholder} .label=${s}>${this.showAllEnabled && this.selectedLayer ? n`${this._renderFeatureCountWarning()}${this._renderAssociatedFeatureListPage()}${this._renderFeatureObserver()}` : Array.from(t.keys(), (i) => this._renderTypeList(i))}</calcite-list>`}</div>`;
+    const { associationViewModels: e, state: t } = this, s = this.selectedLayer?.title ?? this.messages?.noTitle ?? "";
+    return n`<div class="root">${t === "loading" || t === "querying" ? this._renderLoading() : n`<calcite-list .displayMode=${_} .filterEnabled=${this.showAllEnabled && !!this.selectedLayer} .filterLabel=${this.messages?.associationFilterPlaceholder} .filterPlaceholder=${this.messages?.associationFilterPlaceholder} .label=${s}>${this.showAllEnabled && this.selectedLayer ? n`${this._renderFeatureCountWarning()}${this._renderAssociatedFeatureListPage()}${this._renderFeatureObserver()}` : Array.from(e.keys(), (i) => this._renderTypeList(i))}</calcite-list>`}</div>`;
   }
-  _renderAssociatedFeature(t) {
-    const { featureViewModel: e, title: s } = t, i = this.state === "loading", o = this._findFlowItem(e), l = o < 0 && this._isParentFeature(e), r = l || o >= 0, a = `associated-feature-${t.association.globalId}`;
-    return n`<calcite-list-item class=${g(i ? "list-item--hidden" : "")} .description=${u(t.terminalName ?? "")} .label=${u(s)} @calciteListItemSelect=${async () => await this._handleFeatureClick(l, o, e)}>${this._isConnectivityAssociation(t.association) ? this._renderConnectivityIcon(t.association.associationType, a) : null}${this._isConnectivityMidspanAssociation(t.association) ? n`<calcite-chip .label=${this._formatPercentAlong(t.association)} scale=s slot=content-end>${this._formatPercentAlong(t.association)}</calcite-chip>` : null}${this._renderChevronIconNode(r)}</calcite-list-item>`;
+  _renderAssociatedFeature(e) {
+    const { featureViewModel: t, title: s } = e, i = this.state === "loading", o = this._findFlowItem(t), l = o < 0 && this._isParentFeature(t), r = l || o >= 0, a = `associated-feature-${e.association.globalId}`;
+    return n`<calcite-list-item class=${b(i ? "list-item--hidden" : "")} .description=${p(e.terminalName ?? "")} .label=${p(s)} @calciteListItemSelect=${async () => await this._handleFeatureClick(l, o, t)}>${this._isConnectivityAssociation(e.association) ? this._renderConnectivityIcon(e.association.associationType, a) : null}${this._isConnectivityMidspanAssociation(e.association) ? n`<calcite-chip .label=${this._formatPercentAlong(e.association)} scale=s slot=content-end>${this._formatPercentAlong(e.association)}</calcite-chip>` : null}${this._renderChevronIconNode(r)}</calcite-list-item>`;
   }
-  _renderAssociatedFeatureList(t) {
-    return t.toArray().map((e) => this._renderAssociatedFeature(e));
+  _renderAssociatedFeatureList(e) {
+    return e.toArray().map((t) => this._renderAssociatedFeature(t));
   }
   _renderAssociatedFeatureListPage() {
-    const t = this.associationViewModels.get(this.selectedLayer).slice(0, this.endIndex);
-    return [...this._renderTooltips(t), ...this._renderAssociatedFeatureList(t)];
+    const e = this.associationViewModels.get(this.selectedLayer).slice(0, this.endIndex);
+    return [...this._renderTooltips(e), ...this._renderAssociatedFeatureList(e)];
   }
-  _renderChevronIconNode(t) {
-    return n`<calcite-icon flip-rtl .icon=${t ? "move-up" : "chevron-right"} scale=s slot=content-end></calcite-icon>`;
+  _renderChevronIconNode(e) {
+    return n`<calcite-icon flip-rtl .icon=${e ? "move-up" : "chevron-right"} scale=s slot=content-end></calcite-icon>`;
   }
-  _renderItemTooltip(t) {
-    const { tooltipReferenceMap: e } = this, s = `associated-feature-${t.association.globalId}`;
-    return this._isConnectivityAssociation(t.association) ? n`<calcite-tooltip overlay-positioning=fixed .referenceElement=${e.get(s)}>${this.getConnectivityTooltip(t.association.associationType)}</calcite-tooltip>` : null;
+  _renderItemTooltip(e) {
+    const { tooltipReferenceMap: t } = this, s = `associated-feature-${e.association.globalId}`;
+    return this._isConnectivityAssociation(e.association) ? n`<calcite-tooltip overlay-positioning=fixed .referenceElement=${t.get(s)}>${this.getConnectivityTooltip(e.association.associationType)}</calcite-tooltip>` : null;
   }
-  _renderTypeList(t) {
-    const { messages: e } = this, { displayCount: s } = this, i = this.associationViewModels.get(t), o = i.slice(0, s), l = o.length < i.length, r = $(e?.numberRecords ?? "", { number: i.length.toString() }), a = e?.showAll ?? "";
-    return d("show-all", n`<calcite-list-item expanded .label=${t.title} .value=${t.id}><calcite-chip .label=${String(i.length)} scale=s slot=content-end>${i.length}</calcite-chip><calcite-list .group=${t.id} .label=${t.title ?? ""}>${[this._renderTooltips(o), this._renderAssociatedFeatureList(o)]}${l ? d("show-all-item", n`<calcite-list-item .description=${r} .label=${a} @calciteListItemSelect=${() => this._showAllAssociations(t)}><calcite-icon icon=list scale=s slot=content-end></calcite-icon></calcite-list-item>`) : null}</calcite-list></calcite-list-item>`);
+  _renderTypeList(e) {
+    const { messages: t } = this, { displayCount: s } = this, i = this.associationViewModels.get(e), o = i.slice(0, s), l = o.length < i.length, r = $(t?.numberRecords ?? "", { number: i.length.toString() }), a = t?.showAll ?? "";
+    return d("show-all", n`<calcite-list-item expanded .label=${e.title} .value=${e.id}><calcite-chip .label=${String(i.length)} scale=s slot=content-end>${i.length}</calcite-chip><calcite-list .group=${e.id} .label=${e.title ?? ""}>${[this._renderTooltips(o), this._renderAssociatedFeatureList(o)]}${l ? d("show-all-item", n`<calcite-list-item .description=${r} .label=${a} @calciteListItemSelect=${() => this._showAllAssociations(e)}><calcite-icon icon=list scale=s slot=content-end></calcite-icon></calcite-list-item>`) : null}</calcite-list></calcite-list-item>`);
   }
-  _renderTooltips(t) {
-    return t.toArray().map((e) => this._renderItemTooltip(e));
+  _renderTooltips(e) {
+    return e.toArray().map((t) => this._renderItemTooltip(t));
   }
 }
-m("arcgis-feature-utility-network-association-list", A);
+f("arcgis-feature-utility-network-association-list", A);
 export {
   A as ArcgisFeatureUtilityNetworkAssociationList
 };

package/dist/components/arcgis-feature-utility-network-association-list/index.js

@@ -1,3 +1,5 @@
+import "../arcgis-utility-network-association-list/index.js";
+import "../arcgis-feature-next/index.js";
 import "../arcgis-feature/index.js";
 import ".//index.js";
 import "@esri/calcite-components/components/calcite-list";