@arcgis/map-components 5.0.0-next.1 → 5.0.0-next.100

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

@@ -6,6 +6,7 @@ import { nil } from '@arcgis/toolkit/type';
 import { Use } from '@arcgis/lumina/controllers';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { HeadingLevel } from '../../support/heading';
+import { IconName } from '../../utils/action-utils';
 import { default as Collection } from '@arcgis/core/core/Collection.js';
 import { ArcgisFeature } from '../arcgis-feature/customElement.js';
 import { default as ActionButton } from '@arcgis/core/support/actions/ActionButton.js';
@@ -15,10 +16,10 @@ declare const useFeaturesViewModel: (component: LitElement & Pick<FeaturesViewMo
 /**
  * The Features component allows users to view a feature's popupTemplate content such as attributes,
  * actions, related records, etc., without having to be tied to a [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/) or [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/) component.
- * This component looks and behaves similarly to the [Popup](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html),
+ * This component looks and behaves similarly to the [arcgis-popup](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-popup/) component,
  * however unlike Popup, the Features component can be placed outside of the map or scene component.
  * For example, when features are selected in the [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/),
- * the [Popup](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html) opens within the map whether it is docked
+ * the [arcgis-popup](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-popup/) opens within the map whether it is docked
  * or anchored to the selected feature.
  * With the Features component, the same information that Popup provides is shown in a separate container from the map, such as
  * a HTML div within a Calcite Design System
@@ -33,11 +34,11 @@ declare const useFeaturesViewModel: (component: LitElement & Pick<FeaturesViewMo
  *
  * [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-features/)
  *
- * @see module :esri/PopupTemplate
- * @see [Guide - Esri Icon Font](../esri-icon-font/)
+ * @see [PopupTemplate](https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html)
  * @since 4.28
  */
 export declare class ArcgisFeatures extends LitElement {
+    /** @since 4.34 */
     viewModel: FeaturesViewModel;
     /**
      * [Collection](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Collection.html) of [action](https://developers.arcgis.com/javascript/latest/api-reference/esri-support-actions-ActionButton.html) or [action toggle](https://developers.arcgis.com/javascript/latest/api-reference/esri-support-actions-ActionToggle.html) objects displayed in the action bar.
@@ -65,8 +66,26 @@ export declare class ArcgisFeatures extends LitElement {
      * // Adds the custom action to the Features component's actions collection.
      * featuresComponent.actions.push(zoomOutAction);
      * ```
+     * @see [@trigger-action](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Features-FeaturesViewModel.html#event-trigger-action)
+     * @see [Sample - Popup actions](https://developers.arcgis.com/javascript/latest/sample-code/popup-actions/)
+     * @example
+     * // Defines an action button to zoom out from the selected feature
+     * const zoomOutAction = {
+     *   type: "button",
+     *   // This text is displayed as a tooltip
+     *   title: "Zoom out",
+     *   // The ID by which to reference the action in the event handler
+     *   id: "zoom-out",
+     *   // Sets the icon used to style the action button
+     *   icon: "magnifying-glass-minus"
+     * };
+     * // Adds the custom action to the popup.
+     * view.popup.viewModel.actions.push(zoomOutAction);
+     *
+     * // Adds the custom action to the Features widget
+     * featuresWidget.viewModel.actions.push(zoomOutAction);
      */
-    actions: Collection<ActionButton | ActionToggle>;
+    actions: Collection<import('@arcgis/core/widgets/Popup/types').PopupAction>;
     /**
      * Indicates if the component is active when it is visible and is not [waiting](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Features-FeaturesViewModel.html#waitingForResult) for results.
      *
@@ -103,22 +122,39 @@ export declare class ArcgisFeatures extends LitElement {
      * // unless it is overridden by a PopupTemplate.
      * featuresComponent.content = "Click a feature on the map to view its attributes";
      * ```
+     * @see [Sample - Popup Docking](https://developers.arcgis.com/javascript/latest/sample-code/popup-docking-position/)
+     * @example
+     * // This sets generic instructions in the popup that will always be displayed
+     * // unless it is overridden by a PopupTemplate.
+     * // This can be set on the Features widget view model
+     * featuresWidget.viewModel.content = "Click a feature on the map to view its attributes";
+     *
+     * // Or set on the Popup widget view model.
+     * view.popup.viewModel.content = "Click a feature on the map to view its attributes";
      */
-    content: string | HTMLElement | nullish | __esri.Widget;
+    content: string | HTMLElement | import('@arcgis/core/widgets/Widget').default<any> | null | undefined;
     /**
      * Enables automatic creation of a popup template for layers that have popups enabled but no
-     * popupTemplate defined.
-     *
-     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Features-FeaturesViewModel.html#defaultPopupTemplateEnabled)
+     * popupTemplate defined. Automatic popup templates are supported for layers that
+     * support the `createPopupTemplate` method. (Supported for
+     * [FeatureLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html),
+     * [GeoJSONLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GeoJSONLayer.html),
+     * [OGCFeatureLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-OGCFeatureLayer.html),
+     * [SceneLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-SceneLayer.html),
+     * [CSVLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-CSVLayer.html),
+     * [PointCloudLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-PointCloudLayer.html),
+     * [StreamLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-StreamLayer.html), and
+     * [ImageryLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-ImageryLayer.html)).
      *
      * @default false
+     * @since 4.34
      */
     defaultPopupTemplateEnabled: boolean;
     /**
      * The number of selected [features](#features) available to the popup.
      *
-     * @since 4.34
      * @default 0
+     * @since 4.34
      */
     readonly featureCount: number;
     /**
@@ -126,18 +162,22 @@ export declare class ArcgisFeatures extends LitElement {
      * Setting this to `true` allows the user to scroll through the list of features.
      * This value will only be honored if [`initialDisplayMode`](#initialDisplayMode) is set to "feature".
      *
-     * @since 4.34
      * @default false
+     * @since 4.34
      */
     featureMenuOpen: boolean;
-    /** Sets the title to display on the component while viewing the feature menu. */
-    featureMenuTitle: string | nullish;
+    /**
+     * Sets the title to display on the component while viewing the feature menu.
+     *
+     * @since 4.34
+     */
+    featureMenuTitle: string | null | undefined;
     /**
      * Indicates whether the feature navigation arrows are displayed at the top of the component.
      * By default, the navigation arrows are displayed at the bottom of the component.
      *
-     * @since 4.34
      * @default false
+     * @since 4.34
      */
     featureNavigationTop: boolean;
     /**
@@ -170,16 +210,35 @@ export declare class ArcgisFeatures extends LitElement {
      * let graphics = [g1, g2, g3, g4, g5];
      * featuresComponent.features = graphics;
      * ```
+     * @example
+     * // When setting the features property, the graphics pushed to this property
+     * // must have a PopupTemplate set.
+     * let g1 = new Graphic();
+     * g1.popupTemplate = new PopupTemplate({
+     *   title: "Results title",
+     *   content: "Results: {ATTRIBUTE_NAME}"
+     * });
+     * // Create an array of graphics and set this to the features property. The content and title of
+     * // will be set depending on the PopupTemplate of the graphics.
+     * // Each graphic may share the same PopupTemplate or have a unique PopupTemplate.
+     * let graphics = [g1, g2, g3, g4, g5];
+     * // This value can be set on the popup  or Features view model.
+     * view.popup.viewModel.features = graphics;
+     * featuresWidget.viewModel.features = graphics;
      */
-    features: __esri.Graphic[];
+    features: import('@arcgis/core/Graphic').default[];
     /**
      * The number of features to fetch at one time.
      *
      * @default 20
      */
     featuresPerPage: number;
-    /** Defines the specific [abilities](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Feature-FeatureViewModel.html#Abilities) that can be used when querying and displaying content. */
-    featureViewModelAbilities: nullish | __esri.Abilities;
+    /**
+     * Defines the specific [abilities](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Feature-FeatureViewModel.html#Abilities) that can be used when querying and displaying content.
+     *
+     * @since 4.21
+     */
+    featureViewModelAbilities: import('@arcgis/core/widgets/Feature/types').Abilities | null | undefined;
     /**
      * This function provides the ability to override either the [arcgis-map.goTo](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/#goTo) or [arcgis-scene.goTo](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/#goTo) methods.
      *
@@ -192,8 +251,20 @@ export declare class ArcgisFeatures extends LitElement {
      *   return map.goTo(goToParams.target, goToParams.options);
      * };
      * ```
+     * @since 4.8
+     * @see [MapView#goTo()](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#goTo)
+     * @see [SceneView#goTo()](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html#goTo)
+     * @example
+     * // The following snippet uses Search but can be applied to any
+     * // widgets that support the goToOverride property.
+     * search.goToOverride = function(view, goToParams) {
+     *   goToParams.options = {
+     *     duration: updatedDuration
+     *   };
+     *   return view.goTo(goToParams.target, goToParams.options);
+     * };
      */
-    goToOverride: nullish | __esri.GoToOverride;
+    goToOverride: import('@arcgis/core/widgets/support/types').GoToOverride | null | undefined;
     /**
      * The actions that are displayed in the header of the component.
      *
@@ -207,14 +278,19 @@ export declare class ArcgisFeatures extends LitElement {
      * corresponding template is used here.
      *
      * @see [headingLevel](#headingLevel)
+     * @since 4.34
      * @example
      * ```js
      * // This title will display in the component unless a selected feature's
      * // PopupTemplate overrides it.
      * featuresComponent.title = "Population by zip codes in Southern California";
      * ```
+     * @example
+     * // This title will display in the popup unless a selected feature's
+     * // PopupTemplate overrides it.
+     * view.popup.viewModel.title = "Population by zip codes in Southern California";
      */
-    heading: string | nullish;
+    heading: string | null | undefined;
     /**
      * The title of the Features component.
      *
@@ -261,12 +337,13 @@ export declare class ArcgisFeatures extends LitElement {
      * Indicates whether to hide the group heading for a list of multiple features.
      *
      * @default false
+     * @since 4.34
      */
     hideFeatureListLayerTitle: boolean;
     /**
      * Determines whether the component should be shown within its built-in [flow component](https://developers.arcgis.com/calcite-design-system/components/flow/) or if the flow component should be excluded.
      * The component will be displayed within its original flow component if set to `false`.
-     * The flow component will be omitted from the widget if set to `true`.
+     * The flow component will be omitted from the component if set to `true`.
      * To place the component into an existing Calcite flow component, set this property to `false`.
      *
      * @default false
@@ -288,8 +365,8 @@ export declare class ArcgisFeatures extends LitElement {
      * Indicates whether to highlight the [selected feature](#selectedFeature) in the associated
      * [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/) or [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/) component.
      *
-     * @since 4.34
      * @default false
+     * @since 4.34
      */
     highlightDisabled: boolean;
     /**
@@ -298,12 +375,13 @@ export declare class ArcgisFeatures extends LitElement {
      *
      * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
      */
-    icon?: string;
+    icon?: IconName;
     /**
      * Indicates whether to include the default actions in the component.
      * In order to disable any default actions, it is necessary to set `includeDefaultActionsDisabled` to `true`.
      *
      * @default false
+     * @since 4.34
      */
     includeDefaultActionsDisabled: boolean;
     /**
@@ -311,7 +389,7 @@ export declare class ArcgisFeatures extends LitElement {
      *
      * @default "feature"
      */
-    initialDisplayMode: "list" | "feature";
+    initialDisplayMode: import('@arcgis/core/widgets/Popup/types').InitialDisplayOptions;
     /** The component's default label. */
     label?: string;
     /**
@@ -319,6 +397,7 @@ export declare class ArcgisFeatures extends LitElement {
      *
      * Alternatively, the [view](#view) property can be used to provide the map instance for this property.
      *
+     * @default null
      * @noautocast
      * @see [Type system](https://developers.arcgis.com/arcade/guide/types/#featuresetcollection)
      * @see [Arcade Profiles: Popup](https://developers.arcgis.com/arcade/profiles/popup/)
@@ -327,16 +406,17 @@ export declare class ArcgisFeatures extends LitElement {
      * // The building footprints represent the buildings that intersect a clicked parcel
      * let buildingFootprints = Intersects($feature, FeatureSetByName($map, "Building Footprints"));
      * ```
-     * @default null
      */
-    map: __esri.Map | nullish;
+    map: import('@arcgis/core/Map').default | null | undefined;
     /**
      * Replace localized message strings with your own strings.
      *
      * _**Note**: Individual message keys may change between releases._
+     *
+     * @since 4.34
      */
     messageOverrides?: typeof this.messages._overrides;
-    /** @deprecated since 4.34, use [`slot`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/slot) instead. */
+    /** @deprecated since 4.34, use [`slot`](https://developers.arcgis.com/javascript/latest/building-your-ui/#slots) instead. */
     position?: __esri.UIPosition;
     /**
      * 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.
@@ -350,7 +430,7 @@ export declare class ArcgisFeatures extends LitElement {
      * resolved they are removed from this array and the features they return
      * are pushed into the [features](#features) array.
      */
-    promises: Promise<__esri.Graphic[]>[];
+    promises: Promise<import('@arcgis/core/Graphic').default[]>[];
     /**
      * The feature that the component has drilled into.
      * This feature is either associated with the selected feature in a [relationship](https://developers.arcgis.com/javascript/latest/api-reference/esri-popup-content-RelationshipContent.html) or [utility network](https://developers.arcgis.com/javascript/latest/api-reference/esri-popup-content-UtilityNetworkAssociationsContent.html) element.
@@ -362,7 +442,7 @@ export declare class ArcgisFeatures extends LitElement {
      * The selected feature accessed by the Features component. The content displayed in the component is
      * determined based on the [PopupTemplate](https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html) assigned to this feature.
      */
-    readonly selectedFeature: nullish | __esri.Graphic;
+    readonly selectedFeature: import('@arcgis/core/Graphic').default | null;
     /**
      * Returns a reference to the current [arcgis-feature](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-feature/) component.
      * This is useful if needing to get a reference to the Feature component in order to make any changes to it.
@@ -387,18 +467,18 @@ export declare class ArcgisFeatures extends LitElement {
      *
      * Alternatively, the [view](#view) property can be used to provide the spatial reference instance for this property.
      *
+     * @default null
      * @autocast
      * @see [Type system](https://developers.arcgis.com/arcade/guide/types/#featuresetcollection)
      * @see [Arcade Profiles: Popup](https://developers.arcgis.com/arcade/profiles/popup/)
-     * @default null
      */
-    spatialReference: nullish | __esri.SpatialReference;
+    spatialReference: import('@arcgis/core/geometry/SpatialReference').default | null | undefined;
     /**
      * The current state of the component.
      *
      * @default "disabled"
      */
-    readonly state: "ready" | "disabled";
+    readonly state: import('@arcgis/core/widgets/Popup/types').State;
     /**
      * Dates and times displayed in the component will be displayed in this time zone. By default this time zone is
      * inherited from [arcgis-map.timeZone](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/#timeZone) if the [view](#view) property is set. When a MapView is not associated with the component
@@ -408,6 +488,8 @@ export declare class ArcgisFeatures extends LitElement {
      * - `system`: Dates and times will be displayed in the timezone of the device or browser.
      * - `unknown`: Dates and time are not adjusted for any timezone.
      * - `Specified IANA timezone`: Dates and times will be displayed in the specified IANA time zone. See [wikipedia - List of tz database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
+     *
+     * @since 4.30
      */
     timeZone: string;
     /**
@@ -422,12 +504,14 @@ export declare class ArcgisFeatures extends LitElement {
      *
      * @since 4.34
      */
-    view?: __esri.MapView | __esri.SceneView | nullish;
+    view?: import('@arcgis/core/views/MapViewOrSceneView').MapViewOrSceneView | null | undefined;
     /**
      * Indicates whether the popup is visible. This property is `true` when the popup is querying for results, even if it is not open in the view.
-     * Use the property to check if the popup is visible and is not
+     * Use the property to check if the component is visible.
      *
      * @default false
+     * @since 4.34
+     * @see [active](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Features-FeaturesViewModel.html#active)
      */
     visible: boolean;
     /**
@@ -454,6 +538,8 @@ export declare class ArcgisFeatures extends LitElement {
      * associated [PopupTemplate](https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html). This method allows a developer to
      * control how the input location is handled.
      *
+     * @param screenPoint
+     * @param options
      * @example
      * ```js
      * // Use reactiveUtils to watch the map's click event.
@@ -482,6 +568,7 @@ export declare class ArcgisFeatures extends LitElement {
      * Opens the Features component with content defined either explicitly with `content`
      * or driven from the [PopupTemplate](https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html) of input features.
      *
+     * @param options
      * @example
      * ```js
      * // Use reactiveUtils to watch the map component's click event.
@@ -533,16 +620,22 @@ export declare class ArcgisFeatures extends LitElement {
      * @see [selectedFeatureIndex](#selectedFeatureIndex)
      */
     previous(): Promise<FeaturesViewModel>;
-    /** Use this method to give focus to the Component if the component is able to be focused. */
+    /**
+     * Use this method to give focus to the Component if the component is able to be focused.
+     *
+     * @since 4.34
+     */
     setFocus(): Promise<void>;
     /**
      * Triggers the [`arcgisTriggerAction`](#arcgisTriggerAction) event and executes the action
      * at the specified index in the [actions](#actions) array.
+     *
+     * @param action
      */
     triggerAction(action: __esri.ActionButton | __esri.ActionToggle): Promise<void>;
     /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
     readonly arcgisPropertyChange: TargetedEvent<this, {
-        name: "state" | "active" | "collapsed" | "featureCount" | "visible" | "selectedFeature" | "featureMenuOpen" | "features" | "promises" | "selectedFeatureIndex" | "selectedDrillInFeature" | "selectedFeatureComponent";
+        name: "active" | "state" | "collapsed" | "featureCount" | "featureMenuOpen" | "features" | "promises" | "selectedDrillInFeature" | "selectedFeature" | "selectedFeatureComponent" | "selectedFeatureIndex" | "visible";
     }>;
     /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
     readonly arcgisReady: TargetedEvent<this, void>;
@@ -591,7 +684,7 @@ export declare class ArcgisFeatures extends LitElement {
      * });
      * ```
      */
-    readonly arcgisTriggerAction: TargetedEvent<this, __esri.FeaturesViewModelTriggerActionEvent>;
+    readonly arcgisTriggerAction: TargetedEvent<this, import('@arcgis/core/widgets/Popup/types').ActionEvent>;
     private messages;
 }
 export {};

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

@@ -1,8 +1,8 @@
 import { c as E } from "../../chunks/runtime.js";
 import { css as L, html as n } from "lit";
 import { keyed as C } from "lit/directives/keyed.js";
-import R from "@arcgis/core/widgets/Features/FeaturesViewModel.js";
-import { u as P } from "../../chunks/useT9n.js";
+import P from "@arcgis/core/widgets/Features/FeaturesViewModel.js";
+import { u as R } from "../../chunks/useT9n.js";
 import { classes as x } from "@arcgis/toolkit/dom";
 import { usePropertyChange as V } from "@arcgis/lumina/controllers";
 import { m as H } from "../../chunks/useViewModel.js";
@@ -17,7 +17,7 @@ import { renderingSanitizer as T } from "@arcgis/core/applications/Components/sa
 import { createRef as M, ref as w } from "lit-html/directives/ref.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.1 */
+v5.0.0-next.100 */
 const d = "arcgis-features", o = {
   // Features
   base: d,
@@ -54,20 +54,20 @@ const $ = G.clone();
 function X(h) {
   return h?.declaredClass.startsWith("esri.layers.") ?? !1;
 }
-const q = H(R);
+const q = H(P);
 class J extends S {
   constructor() {
     super(...arguments), this._featureMenuIntersectionObserverCallback = ([e]) => {
       e?.isIntersecting && this.viewModel.featurePage != null && this.viewModel.featurePage++;
     }, this._featureMenuIntersectionObserver = new IntersectionObserver(this._featureMenuIntersectionObserverCallback, {
       root: window.document
-    }), this._featureMenuIntersectionObserverNode = null, this._rootFlowItemNode = M(), this._featureMenuViewportNode = M(), this._actionBarMenuNode = M(), this._flowContainerNode = M(), this.messages = P(), this._selectedFeatureComponent = M(), this._cancelOpenRelatedFeature = () => {
+    }), this._featureMenuIntersectionObserverNode = null, this._rootFlowItemNode = M(), this._featureMenuViewportNode = M(), this._actionBarMenuNode = M(), this._flowContainerNode = M(), this.messages = R(), this._selectedFeatureComponent = M(), this._cancelOpenRelatedFeature = () => {
       const { _openRelatedFeatureAbortController: e } = this;
       e && e.abort(), this._openRelatedFeatureAbortController = null;
     }, this._openRelatedFeatureAbortController = null, this.flowItems = new I(), this.viewModel = q(this), this.actions = this.viewModel.actions, this.active = this.viewModel.active, this.autoDestroyDisabled = !1, this.collapsed = !1, this.content = this.viewModel.content, this.defaultPopupTemplateEnabled = this.viewModel.defaultPopupTemplateEnabled, this.featureCount = this.viewModel.featureCount, this.featureMenuOpen = this.viewModel.featureMenuOpen, this.featureMenuTitle = this.viewModel.featureMenuTitle, this.featureNavigationTop = !1, this.features = this.viewModel.features, this.featuresPerPage = this.viewModel.featuresPerPage, this.featureViewModelAbilities = this.viewModel.featureViewModelAbilities, this.goToOverride = this.viewModel.goToOverride, this.headerActions = new I(), this.heading = this.viewModel.title, this.headingLevel = 2, this.hideActionBar = !1, this.hideCloseButton = !1, this.hideFeatureMenuHeading = !1, this.hideFeatureNavigation = !1, this.hideFeatureListLayerTitle = !1, this.hideFlow = !1, this.hideHeading = !1, this.hideSpinner = !1, this.highlightDisabled = this.viewModel.highlightEnabled, this.includeDefaultActionsDisabled = this.viewModel.includeDefaultActions, this.initialDisplayMode = this.viewModel.initialDisplayMode, this.location = this.viewModel.location, this.map = this.viewModel.map, this.promises = this.viewModel.promises, this.responsiveActionsEnabled = !1, this.selectedFeature = this.viewModel.selectedFeature, this.selectedFeatureIndex = this.viewModel.selectedFeatureIndex, this.showCollapseButton = !1, this.spatialReference = this.viewModel.spatialReference, this.state = this.viewModel.state, this.timeZone = this.viewModel.timeZone, this.updateLocationEnabled = this.viewModel.updateLocationEnabled, this.view = this.viewModel.view, this.visible = this.viewModel.visible, this.arcgisPropertyChange = V()("active", "collapsed", "featureCount", "featureMenuOpen", "features", "promises", "selectedDrillInFeature", "selectedFeature", "selectedFeatureComponent", "selectedFeatureIndex", "state", "visible"), this.arcgisReady = y(), this.arcgisClose = y(), this.arcgisTriggerAction = y();
   }
   static {
-    this.properties = { _openRelatedFeatureAbortController: 16, flowItems: 16, _hideActionText: 16, _featureNavigationVisible: 16, _isCollapsed: 16, _collapseEnabled: 16, viewModel: 0, actions: 0, active: 0, autoDestroyDisabled: 5, collapsed: 5, content: 1, defaultPopupTemplateEnabled: 5, featureCount: 0, featureMenuOpen: 5, featureMenuTitle: 1, featureNavigationTop: 5, features: 0, featuresPerPage: 9, featureViewModelAbilities: 0, goToOverride: 0, headerActions: 0, heading: 1, featuresTitle: 1, headingLevel: 9, hideActionBar: 5, hideCloseButton: 5, hideFeatureMenuHeading: 5, hideFeatureNavigation: 5, hideFeatureListLayerTitle: 5, hideFlow: 5, hideHeading: 5, hideSpinner: 5, highlightDisabled: 5, icon: 1, includeDefaultActionsDisabled: 5, initialDisplayMode: 1, label: 1, location: 0, map: 0, messageOverrides: 0, position: 1, referenceElement: 1, promises: 0, responsiveActionsEnabled: 5, selectedDrillInFeature: 32, selectedFeature: 0, selectedFeatureComponent: 32, selectedFeatureIndex: 9, showCollapseButton: 5, spatialReference: 0, state: 3, timeZone: 1, updateLocationEnabled: 5, view: 0, visible: 5, closed: 5 };
+    this.properties = { _openRelatedFeatureAbortController: 16, flowItems: 16, _hideActionText: 16, _featureNavigationVisible: 16, _isCollapsed: 16, _collapseEnabled: 16, viewModel: 0, actions: 0, active: 0, autoDestroyDisabled: 5, collapsed: 5, content: 1, defaultPopupTemplateEnabled: 5, featureCount: 0, featureMenuOpen: 5, featureMenuTitle: 1, featureNavigationTop: 5, features: 0, featuresPerPage: 9, featureViewModelAbilities: 0, goToOverride: 0, headerActions: 0, heading: 1, featuresTitle: 1, headingLevel: 9, hideActionBar: 5, hideCloseButton: 5, hideFeatureMenuHeading: 5, hideFeatureNavigation: 5, hideFeatureListLayerTitle: 5, hideFlow: 5, hideHeading: 5, hideSpinner: 5, highlightDisabled: 5, icon: 0, includeDefaultActionsDisabled: 5, initialDisplayMode: 1, label: 1, location: 0, map: 0, messageOverrides: 0, position: 1, referenceElement: 1, promises: 0, responsiveActionsEnabled: 5, selectedDrillInFeature: 32, selectedFeature: 0, selectedFeatureComponent: 32, selectedFeatureIndex: 9, showCollapseButton: 5, spatialReference: 0, state: 3, timeZone: 1, updateLocationEnabled: 5, view: 0, visible: 5, closed: 5 };
   }
   static {
     this.styles = U;
@@ -132,7 +132,7 @@ class J extends S {
   }
   async triggerAction(e) {
     if (!e.disabled)
-      return e && e.type === "toggle" && (e.value = !e.value), await Z(e, this.viewModel);
+      return e?.type === "toggle" && (e.value = !e.value), await Z(e, this.viewModel);
   }
   loaded() {
     this.manager.onLifecycle(() => [
@@ -256,12 +256,10 @@ class J extends S {
       case "feature":
       case "feature-association":
       case "feature-utility-network-associations":
-        return "";
-      // flowItem.description ?? "";
+      case "feature-utility-network-association-type":
+        return e.description;
       case "feature-relationship":
         return e.allItemsDescription;
-      case "feature-utility-network-association-type":
-        return "";
     }
   }
   _handleDrillInBackClick() {
@@ -272,7 +270,7 @@ class J extends S {
     return i && !e ? i?.state === "error" ? this.messages?.errorMessage ?? "" : i?.title || "" : !e && t ? t : "";
   }
   async _destroySpinner(e) {
-    e?.manager?.component?.extraContent?.remove(this._spinnerEl), await this._spinnerEl?.destroy();
+    e?.manager?.component?.extraContent?.remove(this._spinnerEl);
   }
   async _createSpinner() {
     const e = this.referenceElement;
@@ -302,14 +300,14 @@ class J extends S {
   }
   _renderFeatureMenuButton() {
     const { messages: e, viewModel: t } = this, { featureCount: i, selectedFeatureIndex: a, pendingPromisesCount: s } = t;
-    return n`<calcite-action appearance=solid class=${c(o.paginationMenuButton)} icon=list .label=${e.selectFeature} .loading=${s > 0} @click=${this._handlePaginationMenuButton} scale=s .text=${g(e.pageText ?? "", {
+    return n`<calcite-action class=${c(o.paginationMenuButton)} icon=list .label=${e.selectFeature} .loading=${s > 0} @click=${this._handlePaginationMenuButton} .text=${g(e.pageText ?? "", {
       index: F(a + 1),
       total: F(i)
     })} text-enabled title=${e.selectFeature ?? p}></calcite-action>`;
   }
   _renderPagination() {
     const { previous: e, next: t } = this.messages;
-    return n`<calcite-action-bar class=${c(o.paginationActionBar)} expand-disabled layout=horizontal overflow-actions-disabled scale=s><calcite-action-group scale=s><calcite-action appearance=solid class=${c(o.paginationPrevious)} icon=chevron-left icon-flip-rtl .label=${e ?? ""} @click=${this._previousFeature} scale=s .text=${e ?? ""} title=${e ?? "" ?? p}></calcite-action><calcite-action appearance=solid icon=chevron-right icon-flip-rtl .label=${t ?? ""} @click=${this._nextFeature} scale=s .text=${t ?? ""} title=${t ?? "" ?? p}></calcite-action></calcite-action-group></calcite-action-bar>`;
+    return n`<calcite-action-bar class=${c(o.paginationActionBar)} expand-disabled layout=horizontal overflow-actions-disabled scale=s><calcite-action-group scale=s><calcite-action class=${c(o.paginationPrevious)} icon=chevron-left icon-flip-rtl .label=${e ?? ""} @click=${this._previousFeature} .text=${e ?? ""} title=${e ?? "" ?? p}></calcite-action><calcite-action icon=chevron-right icon-flip-rtl .label=${t ?? ""} @click=${this._nextFeature} .text=${t ?? ""} title=${t ?? "" ?? p}></calcite-action></calcite-action-group></calcite-action-bar>`;
   }
   _renderFeatureMenuItem(e) {
     const { initialDisplayMode: t } = this, { selectedFeatureViewModel: i, featureViewModels: a } = this.viewModel, s = e === i, r = a.indexOf(e);
@@ -324,7 +322,7 @@ class J extends S {
   }
   _renderHeaderAction(e) {
     const t = e.title || "";
-    return e.visible ? n`<calcite-action .active=${e.type === "toggle" ? e.value : !1} appearance=solid .disabled=${e.disabled} .icon=${e.icon ?? void 0} .indicator=${e.active} .loading=${e.active} @click=${() => this._triggerAction(e)} slot=header-actions-end .text=${t} title=${t ?? p}></calcite-action>` : null;
+    return e.visible ? n`<calcite-action .active=${e.type === "toggle" ? e.value : !1} .disabled=${e.disabled} .icon=${e.icon ?? void 0} .indicator=${e.active} .loading=${e.active} @click=${() => this._triggerAction(e)} slot=header-actions-end .text=${t} title=${t ?? p}></calcite-action>` : null;
   }
   _renderHeaderActions() {
     return this.headerActions.map((e) => this._renderHeaderAction(e)).toArray();
@@ -350,13 +348,13 @@ class J extends S {
       total: k.length
     })} .heading=${this.hideFeatureMenuHeading ? void 0 : O} .headingLevel=${m} .loading=${e.waitingForContents} .selected=${D} @calciteFlowItemBack=${(N) => {
       N.preventDefault(), this._handleFeatureMenuBack();
-    }} @calciteFlowItemClose=${this._handleClose} @calciteFlowItemToggle=${this._handleCollapseToggle} ${w(this._featureMenuViewportNode)}>${s === "list" ? this._renderHeaderActions() : null}${B > 0 ? n`<calcite-loader class=${c(o.loader)} inline .label=${a.loading ?? ""} slot=header-actions-end></calcite-loader>` : null}<div class=${c(o.container)}>${this._renderFeatureMenu()}</div><div class=${c(o.featureMenuObserver)} ${w(this._featureMenuIntersectionObserverCreated)}></div>${s === "feature" ? n`<calcite-button appearance=transparent @click=${this._handleFeatureMenuBack} slot=footer-actions width=full>${a.back}</calcite-button>` : null}</calcite-flow-item>`;
+    }} @calciteFlowItemClose=${this._handleClose} @calciteFlowItemToggle=${this._handleCollapseToggle} ${w(this._featureMenuViewportNode)}>${s === "list" ? this._renderHeaderActions() : null}${B > 0 ? n`<calcite-loader class=${c(o.loader)} inline .label=${a.loading ?? ""} slot=header-actions-end></calcite-loader>` : null}<div class=${c(o.container)}>${this._renderFeatureMenu()}</div><div class=${c(o.featureMenuObserver)} ${w(this._featureMenuIntersectionObserverCreated)}></div>${s === "feature" ? n`<calcite-button appearance=transparent @click=${this._handleFeatureMenuBack} slot=footer-start width=full>${a.back}</calcite-button>` : null}</calcite-flow-item>`;
   }
   _renderFlowItem(e, t) {
     const { messages: i, hideCloseButton: a, active: s } = this, r = "graphic" in e && "isFeatureFromTable" in e && !e.isFeatureFromTable, l = e.flowType === "feature-association", u = i.returnToInitialFeature ?? "", v = i?.selectFeature, _ = this._getActionTitle($);
     return n`<calcite-flow-item .closable=${!a} .closed=${!s} .description=${A(this._getDrillInFlowItemDescription(e) ?? "")} .heading=${this.hideHeading ? void 0 : A(e.heading ?? "")} .selected=${t} @calciteFlowItemBack=${(m) => {
       m.preventDefault(), this._handleDrillInBackClick();
-    }} .loading=${!!this._openRelatedFeatureAbortController} @calciteFlowItemClose=${this._handleClose}><calcite-action appearance=transparent class=${c(o.actionExit)} icon=move-up @click=${this._removeFlowItems} slot=header-actions-start .text=${u ?? ""} title=${u ?? "" ?? p}></calcite-action>${r ? n`<calcite-action appearance=transparent icon=zoom-to-object @click=${() => this._openRelatedFeature(e)} slot=header-actions-end .text=${v ?? ""} title=${v ?? p}></calcite-action>` : null}${l ? n`<calcite-action-bar expand-disabled expanded scale=s slot=action-bar><calcite-action-group overlay-positioning=fixed scale=s><calcite-action appearance=solid .disabled=${$.disabled} .icon=${$.icon ?? void 0} .loading=${$.active} scale=s text-enabled .text=${_} title=${_ ?? p} @click=${() => j(this.viewModel, e)}></calcite-action></calcite-action-group></calcite-action-bar>` : null}<div class=${c(o.container)}>${e}</div></calcite-flow-item>`;
+    }} .loading=${!!this._openRelatedFeatureAbortController} @calciteFlowItemClose=${this._handleClose}><calcite-action class=${c(o.actionExit)} icon=move-up @click=${this._removeFlowItems} slot=header-actions-start .text=${u ?? ""} title=${u ?? "" ?? p}></calcite-action>${r ? n`<calcite-action icon=zoom-to-object @click=${() => this._openRelatedFeature(e)} slot=header-actions-end .text=${v ?? ""} title=${v ?? p}></calcite-action>` : null}${l ? n`<calcite-action-bar expand-disabled expanded scale=s slot=action-bar><calcite-action-group overlay-positioning=fixed scale=s><calcite-action .disabled=${$.disabled} .icon=${$.icon ?? void 0} .loading=${$.active} scale=s text-enabled .text=${_} title=${_ ?? p} @click=${() => j(this.viewModel, e)}></calcite-action></calcite-action-group></calcite-action-bar>` : null}<div class=${c(o.container)}>${e}</div></calcite-flow-item>`;
   }
   _renderContentContainer() {
     const e = this.flowItems?.toArray(), t = e?.map((a, s) => this._renderFlowItem(a, this.initialDisplayMode === "list" || !this.featureMenuOpen && s === e.length - 1)), i = this.initialDisplayMode === "list" ? [this._renderFeatureMenuContainer(), this._renderContentFeature(), t] : [this._renderContentFeature(), t, this._renderFeatureMenuContainer()];
@@ -368,12 +366,12 @@ class J extends S {
   _renderActions() {
     return this.viewModel.allActions.toArray().map((e) => {
       const t = this._getActionTitle(e);
-      return n`<calcite-action .active=${e.type === "toggle" ? e.value : !1} appearance=solid .disabled=${e.disabled} .icon=${e.icon ?? void 0} .loading=${e.active} scale=s .textEnabled=${!this._hideActionText} .text=${t ?? ""} title=${t ?? p} @click=${() => this._triggerAction(e)}></calcite-action>`;
+      return n`<calcite-action .active=${e.type === "toggle" ? e.value : !1} .disabled=${e.disabled} .icon=${e.icon ?? void 0} .loading=${e.active} scale=s .textEnabled=${!this._hideActionText} .text=${t ?? ""} title=${t ?? p} .hidden=${!e.visible} @click=${() => this._triggerAction(e)}></calcite-action>`;
     });
   }
   _renderContent() {
     const { content: e, selectedFeatureViewModel: t } = this.viewModel;
-    return t ? C(t, n`<arcgis-feature .flowItems=${this.flowItems} .graphic=${t.graphic} .headingLevel=${this.headingLevel + 1} hide-heading .map=${this.map} .referenceElement=${this.referenceElement} show-relationship-content .spatialReference=${this.spatialReference} .timeZone=${this.timeZone} ${w(this._selectedFeatureComponent)}></arcgis-feature>`) : typeof e == "string" ? C(e, n`<div .innerHTML=${T.sanitize(e) ?? ""}></div>`) : e ?? null;
+    return t ? C(t, n`<arcgis-feature .defaultPopupTemplateEnabled=${this.defaultPopupTemplateEnabled} .flowItems=${this.flowItems} .location=${this.location} .graphic=${t.graphic} .headingLevel=${this.headingLevel + 1} hide-heading .map=${this.map} .referenceElement=${this.referenceElement} show-relationship-content show-utility-network-content .spatialReference=${this.spatialReference} .timeZone=${this.timeZone} ${w(this._selectedFeatureComponent)}></arcgis-feature>`) : typeof e == "string" ? C(e, n`<div .innerHTML=${T.sanitize(e) ?? ""}></div>`) : e ?? null;
   }
 }
 E("arcgis-features", J);