@arcgis/map-components 4.34.0-next.126 → 4.34.0-next.128

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

@@ -21,7 +21,7 @@ declare const useFeatureTemplatesWidget: (component: LitElement & Pick<FeatureTe
         childElem?: HTMLElement & {
             ownedBy?: HTMLElement;
         };
-        view?: __esri.LinkChartView | __esri.MapView | __esri.SceneView;
+        view?: __esri.LinkChartView | __esri.MapView | __esri.SceneView | nullish;
     };
     autoDestroyDisabled: boolean;
     destroy: () => Promise<void>;

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

@@ -7,7 +7,7 @@ import { m as s } from "../../chunks/useWidget.js";
 import { css as n } from "lit";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.126 */
+v4.34.0-next.128 */
 const l = 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{--esri-widget-padding-x: 15px;--esri-widget-padding-y: var(--calcite-spacing-md);--esri-widget-padding: var(--esri-widget-padding-y) var(--esri-widget-padding-x);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:1.3em}.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__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:#303030}.esri-menu__list-item:active{background-color:#000}.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:#2493f2}.esri-widget__table{border-collapse:collapse;color:var(--calcite-color-text-1);border:none;width:100%;line-height:1.3em}.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-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%}`, d = s(r);
 class c extends o {
   constructor() {

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

@@ -6,17 +6,18 @@ 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 { Action } 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';
+import { default as ActionToggle } from '@arcgis/core/support/actions/ActionToggle.js';
 
 declare const useFeaturesViewModel: (component: LitElement & Pick<FeaturesViewModel, never> & import('../../controllers/useViewModel').ViewModelControllerUses<FeaturesViewModel>) => FeaturesViewModel;
 /**
  * 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 [ArcgisMap](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/) or [ArcgisScene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/).
+ * 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),
  * however unlike Popup, the Features component can be placed outside of the map or scene component.
- * For example, when features are selected in the [ArcgisMap](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/),
+ * 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
  * 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
@@ -28,25 +29,27 @@ declare const useFeaturesViewModel: (component: LitElement & Pick<FeaturesViewMo
  * feature reduction PopupTemplates for [binning](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-FeatureReductionBinning.html#popupTemplate) and [clustering](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-FeatureReductionCluster.html#popupTemplate).
  *
  * The Features component should be used if needing to use the Popup functionality outside of the map or scene component. If wanting to show a single feature's content without
- * actions, related records, clustering configuration, etc., then use the [ArcgisFeature](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-feature/) component.
+ * actions, related records, clustering configuration, etc., then use the [arcgis-feature](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-feature/) component.
  *
  * [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/)
+ * @since 4.28
  */
 export declare class ArcgisFeatures extends LitElement {
+    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.
      * Each action may be executed by clicking the icon or image symbolizing them.
      * By default, every component has a `Zoom To` action styled with a magnifying glass icon.
      * When this icon is clicked, the map zooms in four LODs and centers on the selected feature.
-     * This default action can be removed by setting [`includeDefaultActions`](#includedefaultactions) to `false`, or by setting the [overwriteActions](https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html#overwriteActions) property to `true` in the [PopupTemplate](https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html).
+     * This default action can be removed by setting [`includeDefaultActions`](#includeDefaultActions) to `false`, or by setting the [overwriteActions](https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html#overwriteActions) property to `true` in the [PopupTemplate](https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html).
      * The order of each action is the order in which they appear in the actions [Collection](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Collection.html).
-     * The [`arcgisTriggerAction`](#arcgistriggeraction) event fires each time an action is clicked.
+     * The [`arcgisTriggerAction`](#arcgisTriggerAction) event fires each time an action is clicked.
      * Actions are defined with the properties listed in the [ActionButton](https://developers.arcgis.com/javascript/latest/api-reference/esri-support-actions-ActionButton.html) or [ActionToggle](https://developers.arcgis.com/javascript/latest/api-reference/esri-support-actions-ActionToggle.html) class.
      *
-     * @see [arcgisTriggerAction](#arcgistriggeraction)
+     * @see [arcgisTriggerAction](#arcgisTriggerAction)
      * @example
      * ```js
      * // Defines an action button to zoom out from the selected feature
@@ -63,7 +66,7 @@ export declare class ArcgisFeatures extends LitElement {
      * featuresComponent.actions.push(zoomOutAction);
      * ```
      */
-    actions: Collection<__esri.ActionButton | __esri.ActionToggle>;
+    actions: Collection<ActionButton | ActionToggle>;
     /**
      * 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.
      *
@@ -82,7 +85,7 @@ export declare class ArcgisFeatures extends LitElement {
     autoDestroyDisabled: boolean;
     /**
      * Indicates whether the component displays its content. If `true`, only the header displays.
-     * This property is only honored if [`showCollapsed`](#showcollapsed) is `true`.
+     * This property is only honored if [`showCollapsed`](#showCollapsed) is `true`.
      *
      * @default false
      */
@@ -102,10 +105,25 @@ export declare class ArcgisFeatures extends LitElement {
      * ```
      */
     content: string | HTMLElement | nullish | __esri.Widget;
+    /**
+     * 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)
+     *
+     * @default false
+     */
+    defaultPopupTemplateEnabled: boolean;
+    /**
+     * The number of selected [features](#features) available to the popup.
+     *
+     * @default 0
+     */
+    readonly featureCount: number;
     /**
      * This property enables multiple features in the component to display in a list rather than displaying the first selected feature.
      * 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".
+     * This value will only be honored if [`initialDisplayMode`](#initialDisplayMode) is set to "feature".
      *
      * @default false
      */
@@ -129,7 +147,7 @@ export declare class ArcgisFeatures extends LitElement {
      * [PopupTemplate](https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html).
      *
      * When more than one graphic exists in this array, the current content of the
-     * component is set based on the value of the [selected feature](#selectedfeature).
+     * component is set based on the value of the [selected feature](#selectedFeature).
      *
      * This value is `null` if no features are associated with the component.
      *
@@ -178,7 +196,7 @@ export declare class ArcgisFeatures extends LitElement {
      *
      * @autocast { typedCollection: true }
      */
-    headerActions: Collection<Action>;
+    headerActions: Collection<ActionButton | ActionToggle>;
     /**
      * The title of the Features component. This can be set to any string value no
      * matter the features that are selected. If the [selected feature](#selectedFeature)
@@ -195,8 +213,8 @@ export declare class ArcgisFeatures extends LitElement {
      */
     heading: string | nullish;
     /**
-     * Indicates the heading level to use for the [title](#title) of the component.
-     * By default, the title is rendered
+     * Indicates the heading level to use for the [heading](#heading) of the component.
+     * By default, the heading is rendered
      * as a level 2 heading (e.g. `<h2>Popup title</h2>`). 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.
@@ -320,6 +338,12 @@ export declare class ArcgisFeatures extends LitElement {
      * are pushed into the [features](#features) array.
      */
     promises: Promise<__esri.Graphic[]>[];
+    /**
+     * A reference to the [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html) or [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html).
+     *
+     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Features-FeaturesViewModel.html#view)
+     */
+    view?: __esri.MapView | __esri.SceneView | nullish;
     /**
      * 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.
@@ -331,7 +355,7 @@ export declare class ArcgisFeatures extends LitElement {
      */
     readonly selectedFeature: nullish | __esri.Graphic;
     /**
-     * Returns a reference to the current [ArcgisFeature](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-feature/) component.
+     * 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.
      */
     get selectedFeatureComponent(): HTMLArcgisFeatureElement | null;
@@ -366,31 +390,36 @@ export declare class ArcgisFeatures extends LitElement {
      * then the property will fallback to the `system` time zone.
      *
      * **Possible Values**
-     *
-     * Value | Description |
-     * ----- | ----------- |
-     * 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).
+     * - `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).
      */
     timeZone: string;
     /**
-     * A reference to the [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html) or [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html).
-     * The Features component requires a `view` to be set if:
-     * - The [features](#features) have a popupTemplate containing Arcade expressions in [ExpressionInfo](https://developers.arcgis.com/javascript/latest/api-reference/esri-popup-ExpressionInfo.html) or [ExpressionContent](https://developers.arcgis.com/javascript/latest/api-reference/esri-popup-content-ExpressionContent.html) that may use [geometry functions](https://developers.arcgis.com/arcade/function-reference/geometry_functions/) or reference the `$map` profile variable (i.e. access data from layers within a map). Alternatively, set the [`map`](#map) property.
-     * - Content is displayed from the popup template of an [aggregate feature](https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html#isAggregate) (i.e. a [cluster](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-FeatureReductionCluster.html) or [bin](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-FeatureReductionBinning.html)).
-     * - Values from `date` and `timestamp-offset` fields should respect the view's [time zone](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html#timeZone).
-     * Alternatively, set the [`timeZone`](#timeZone) property.
-     * - Using the [fetchFeatures](#fetchFeatures) method or the `fetchFeatures` option in the [`open`](#open) method.
-     * - Using the `Zoom to` default action. If the `view` is not specified, set the [includeDefaultActions](#includeDefaultActions) property to `false` to remove this default action.
+     * Highlight the selected feature using one of the [HighlightOptions](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-support-HighlightOptions.html) defined in the view's
+     * [highlights](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html#highlights) collection.
+     *
+     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Features-FeaturesViewModel.html#highlightEnabled)
+     *
+     * @default true
+     */
+    highlightDisabled: boolean;
+    /**
+     * 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
+     *
+     * @name visible
+     * @instance
+     * @type {boolean}
+     * @default false
      */
-    view?: __esri.MapView | __esri.SceneView;
+    visible: boolean;
     /**
      * Removes [promises](#promises), [features](#features), [content](#content), and
      * [heading](#heading) from the Features component.
      */
     clear(): Promise<void>;
-    /** This is a convenience method to closes the component. */
+    /** A convenience method to close the component. */
     close(): Promise<void>;
     /** Permanently destroy the component. */
     destroy(): Promise<void>;
@@ -483,20 +512,21 @@ export declare class ArcgisFeatures extends LitElement {
     /** Use this method to give focus to the Component if the component is able to be focused. */
     setFocus(): Promise<void>;
     /**
-     * Triggers the [`arcgisTriggerAction`](#arcgistriggeraction) event and executes the action
+     * Triggers the [`arcgisTriggerAction`](#arcgisTriggerAction) event and executes the action
      * at the specified index in the [actions](#actions) array.
      */
     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" | "selectedFeature" | "selectedFeatureIndex";
+        name: "state" | "active" | "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>;
+    /** Emitted when the component's close button is clicked. */
+    readonly arcgisClose: TargetedEvent<this, void>;
     /**
      * Fires after the user clicks on an action in the Features component.
      * This event may be used to define a custom function to execute when particular actions are clicked.
-     * See the example below for details of how this works.
      *
      * @see [actions](#actions)
      * @see [PopupTemplate.actions](https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html#actions)

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

@@ -1,58 +1,58 @@
-import { c as L } from "../../chunks/runtime.js";
-import { css as E, html as n } from "lit";
-import { keyed as $ } from "lit/directives/keyed.js";
+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 V } from "../../chunks/useT9n.js";
-import { classes as y } from "@arcgis/toolkit/dom";
-import { usePropertyChange as P } from "@arcgis/lumina/controllers";
+import { u as P } 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";
-import { LitElement as S, createEvent as A, renderElement as z, safeClassMap as c, nothing as d } from "@arcgis/lumina";
-import { substitute as g, formatNumber as b } from "@arcgis/core/intl.js";
+import { LitElement as S, createEvent as y, renderElement as z, safeClassMap as c, nothing as p } from "@arcgis/lumina";
+import { substitute as g, formatNumber as F } from "@arcgis/core/intl.js";
 import { watch as f } from "@arcgis/core/core/reactiveUtils.js";
 import { t as Z, z as G, b as j } from "../../chunks/action-utils.js";
-import { stripHTML as C } from "@arcgis/core/applications/Components/stringUtils.js";
+import { stripHTML as A } from "@arcgis/core/applications/Components/stringUtils.js";
 import I from "@arcgis/core/core/Collection.js";
 import { g as K } from "../../chunks/feature-utils.js";
 import { renderingSanitizer as T } from "@arcgis/core/applications/Components/sanitizerUtils.js";
-import { createRef as F, ref as w } from "lit-html/directives/ref.js";
+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/4.34/esri/copyright.txt for details.
-v4.34.0-next.126 */
-const u = "arcgis-features", o = {
+v4.34.0-next.128 */
+const d = "arcgis-features", o = {
   // Features
-  base: u,
-  container: `${u}__container`,
-  contentContainer: `${u}__content-container`,
-  contentFeature: `${u}__content-feature`,
-  flowItemCollapsed: `${u}__flow-item--collapsed`,
-  header: `${u}__header`,
-  footer: `${u}__footer`,
-  featureMenuObserver: `${u}__feature-menu-observer`,
-  actionExit: `${u}__action--exit`,
-  loader: `${u}__loader`,
-  paginationText: `${u}__pagination-text`,
-  paginationActionBar: `${u}__pagination-action-bar`,
-  paginationMenuButton: `${u}__pagination-menu-button`,
-  paginationPrevious: `${u}__pagination-previous`
-}, U = E`:host{display:flex;overflow:hidden;flex:1 1 auto}.arcgis-features{--calcite-color-background: var(--calcite-color-background);display:flex;overflow:hidden;flex:1 1 auto;flex-direction:column}.arcgis-features img{image-orientation:from-image}.arcgis-features__flow-item--collapsed{--calcite-flow-item-header-border-block-end: none}.arcgis-features__container{display:flex;flex:1 1 auto;background-color:var(--calcite-color-background)}.arcgis-features__container calcite-list{width:100%}.arcgis-features__container:not(:empty){padding:var(--calcite-spacing-md)}.arcgis-features .arcgis-feature,.arcgis-features .arcgis-feature-relationship,.arcgis-features .arcgis-feature-utility-network-associations{background-color:transparent}.arcgis-features__heading{word-break:break-word;word-wrap:break-word}.arcgis-features__header,.arcgis-features__footer{display:flex;align-items:center;justify-content:flex-end;background-color:var(--calcite-color-foreground-1)}.arcgis-features__footer{flex:1}.arcgis-features__pagination-text{padding-inline:var(--calcite-spacing-sm);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size-sm)}.arcgis-features__loader{align-self:center;padding-inline:var(--calcite-spacing-lg)}.arcgis-features__pagination-action-bar{flex:1}.arcgis-features__pagination-menu-button{border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.arcgis-features__icon{display:inline-block;flex:0 0 var(--calcite-spacing-lg);width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.arcgis-features__action-image{flex:0 0 var(--calcite-spacing-lg);background-position:50% 50%;background-repeat:no-repeat;background-size:contain;width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.arcgis-features__header{border-block-end:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.arcgis-features__content-feature{--calcite-flow-item-footer-padding: 0}.arcgis-features__feature-menu-observer{position:relative;bottom:var(--calcite-spacing-xxl);z-index:2;text-align:center}.arcgis-features__action--exit{transform:scaleX(-1)}`;
-function W(p) {
-  switch (p?.type) {
+  base: d,
+  container: `${d}__container`,
+  contentContainer: `${d}__content-container`,
+  contentFeature: `${d}__content-feature`,
+  flowItemCollapsed: `${d}__flow-item--collapsed`,
+  header: `${d}__header`,
+  footer: `${d}__footer`,
+  featureMenuObserver: `${d}__feature-menu-observer`,
+  actionExit: `${d}__action--exit`,
+  loader: `${d}__loader`,
+  paginationText: `${d}__pagination-text`,
+  paginationActionBar: `${d}__pagination-action-bar`,
+  paginationMenuButton: `${d}__pagination-menu-button`,
+  paginationPrevious: `${d}__pagination-previous`
+}, U = L`:host{display:flex;overflow:hidden;flex:1 1 auto}.arcgis-features{--calcite-color-background: var(--calcite-color-foreground-1);display:flex;overflow:hidden;flex:1 1 auto;flex-direction:column}.arcgis-features img{image-orientation:from-image}.arcgis-features__flow-item--collapsed{--calcite-flow-item-header-border-block-end: none}.arcgis-features__container{display:flex;flex:1 1 auto;background-color:var(--calcite-color-foreground-1)}.arcgis-features__container calcite-list{width:100%}.arcgis-features__container:not(:empty){padding:var(--calcite-spacing-md)}.arcgis-features .arcgis-feature,.arcgis-features .arcgis-feature-relationship,.arcgis-features .arcgis-feature-utility-network-associations{background-color:transparent}.arcgis-features__heading{word-break:break-word;word-wrap:break-word}.arcgis-features__header,.arcgis-features__footer{display:flex;align-items:center;justify-content:flex-end;background-color:var(--calcite-color-foreground-1)}.arcgis-features__footer{flex:1}.arcgis-features__pagination-text{padding-inline:var(--calcite-spacing-sm);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size-sm)}.arcgis-features__loader{align-self:center;padding-inline:var(--calcite-spacing-lg)}.arcgis-features__pagination-action-bar{flex:1}.arcgis-features__pagination-menu-button{border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.arcgis-features__icon{display:inline-block;flex:0 0 var(--calcite-spacing-lg);width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.arcgis-features__action-image{flex:0 0 var(--calcite-spacing-lg);background-position:50% 50%;background-repeat:no-repeat;background-size:contain;width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.arcgis-features__header{border-block-end:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.arcgis-features__content-feature{--calcite-flow-item-footer-padding: 0}.arcgis-features__feature-menu-observer{position:relative;bottom:var(--calcite-spacing-xxl);z-index:2;text-align:center}.arcgis-features__action--exit{transform:scaleX(-1)}`;
+function W(h) {
+  switch (h?.type) {
     case "point":
-      return p;
+      return h;
     case "extent":
-      return p.center;
+      return h.center;
     case "polygon":
-      return p.centroid;
+      return h.centroid;
     case "multipoint":
     case "polyline":
-      return p.extent?.center;
+      return h.extent?.center;
     default:
       return null;
   }
 }
-const m = G.clone();
-function X(p) {
-  return p?.declaredClass.startsWith("esri.layers.") ?? !1;
+const $ = G.clone();
+function X(h) {
+  return h?.declaredClass.startsWith("esri.layers.") ?? !1;
 }
 const q = H(R);
 class J extends S {
@@ -61,13 +61,13 @@ class J extends S {
       e?.isIntersecting && this.viewModel.featurePage != null && this.viewModel.featurePage++;
     }, this._featureMenuIntersectionObserver = new IntersectionObserver(this._featureMenuIntersectionObserverCallback, {
       root: window.document
-    }), this._featureMenuIntersectionObserverNode = null, this._rootFlowItemNode = F(), this._featureMenuViewportNode = F(), this._actionBarMenuNode = F(), this._flowContainerNode = F(), this.messages = V(), this.viewModel = q(this), this._selectedFeatureComponent = F(), this._cancelOpenRelatedFeature = () => {
+    }), this._featureMenuIntersectionObserverNode = null, this._rootFlowItemNode = M(), this._featureMenuViewportNode = M(), this._actionBarMenuNode = M(), this._flowContainerNode = M(), this.messages = P(), this._selectedFeatureComponent = M(), this._cancelOpenRelatedFeature = () => {
       const { _openRelatedFeatureAbortController: e } = this;
       e && e.abort(), this._openRelatedFeatureAbortController = null;
-    }, this._openRelatedFeatureAbortController = null, this.flowItems = new I(), this.actions = this.viewModel.actions, this.active = this.viewModel.active, this.autoDestroyDisabled = !1, this.collapsed = !1, this.content = this.viewModel.content, 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.showCollapseButton = !1, this.hideFeatureMenuHeading = !1, this.hideFeatureNavigation = !1, this.hideFeatureListLayerTitle = !1, this.hideFlow = !1, this.hideHeading = !1, this.hideSpinner = !1, this.includeDefaultActions = 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.spatialReference = this.viewModel.spatialReference, this.state = this.viewModel.state, this.timeZone = this.viewModel.timeZone, this.updateLocationEnabled = this.viewModel.updateLocationEnabled, this.arcgisPropertyChange = P()("selectedFeature", "selectedFeatureIndex", "state"), this.arcgisReady = A(), this.arcgisTriggerAction = A();
+    }, 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.showCollapseButton = !1, this.hideFeatureMenuHeading = !1, this.hideFeatureNavigation = !1, this.hideFeatureListLayerTitle = !1, this.hideFlow = !1, this.hideHeading = !1, this.hideSpinner = !1, this.includeDefaultActions = this.viewModel.includeDefaultActions, this.initialDisplayMode = this.viewModel.initialDisplayMode, this.location = this.viewModel.location, this.map = this.viewModel.map, this.promises = this.viewModel.promises, this.view = this.viewModel.view, this.responsiveActionsEnabled = !1, this.selectedFeature = this.viewModel.selectedFeature, this.selectedFeatureIndex = this.viewModel.selectedFeatureIndex, this.spatialReference = this.viewModel.spatialReference, this.state = this.viewModel.state, this.timeZone = this.viewModel.timeZone, this.updateLocationEnabled = this.viewModel.updateLocationEnabled, this.highlightDisabled = this.viewModel.highlightEnabled, 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, actions: 0, active: 0, autoDestroyDisabled: 5, collapsed: 5, content: 1, featureMenuOpen: 5, featureMenuTitle: 1, featureNavigationTop: 5, features: 0, featuresPerPage: 9, featureViewModelAbilities: 0, goToOverride: 0, headerActions: 0, heading: 1, headingLevel: 9, hideActionBar: 5, hideCloseButton: 5, showCollapseButton: 5, hideFeatureMenuHeading: 5, hideFeatureNavigation: 5, hideFeatureListLayerTitle: 5, hideFlow: 5, hideHeading: 5, hideSpinner: 5, icon: 1, includeDefaultActions: 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, spatialReference: 0, state: 3, timeZone: 1, updateLocationEnabled: 5, view: [64, { noAccessor: !0 }] };
+    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, headingLevel: 9, hideActionBar: 5, hideCloseButton: 5, showCollapseButton: 5, hideFeatureMenuHeading: 5, hideFeatureNavigation: 5, hideFeatureListLayerTitle: 5, hideFlow: 5, hideHeading: 5, hideSpinner: 5, icon: 1, includeDefaultActions: 5, initialDisplayMode: 1, label: 1, location: 0, map: 0, messageOverrides: 0, position: 1, referenceElement: 1, promises: 0, view: 0, responsiveActionsEnabled: 5, selectedDrillInFeature: 32, selectedFeature: 0, selectedFeatureComponent: 32, selectedFeatureIndex: 9, spatialReference: 0, state: 3, timeZone: 1, updateLocationEnabled: 5, highlightDisabled: 5, visible: 5 };
   }
   static {
     this.styles = U;
@@ -75,7 +75,7 @@ class J extends S {
   get _hideActionText() {
     if (!this.responsiveActionsEnabled)
       return !1;
-    const e = this.el.view?.widthBreakpoint;
+    const e = this.viewModel.view?.widthBreakpoint;
     return e === "xsmall" || e === "small" || e === "medium";
   }
   get _featureNavigationVisible() {
@@ -125,7 +125,7 @@ class J extends S {
   loaded() {
     this.manager.onLifecycle(() => [
       f(() => this.viewModel?.selectedFeatureIndex, (e, t) => this._selectedFeatureIndexUpdated(e, t)),
-      f(() => this.viewModel?.view, (e, t) => this._viewChange(e, t)),
+      f(() => this.viewModel?.view, () => this._viewChange()),
       f(() => this._spinnerEl?.screenLocation, () => this._closeOpenActionMenu()),
       f(() => this.selectedFeatureComponent?.viewModel, () => this._removeFlowItems()),
       f(() => this.viewModel?.featureViewModels, () => this._featureMenuViewportScrollTop()),
@@ -144,6 +144,9 @@ class J extends S {
       ], () => void this._createSpinner(), { initial: !0 })
     ]);
   }
+  _handleClose() {
+    this.close(), this.arcgisClose.emit();
+  }
   _groupResultsByLayer() {
     const { featureViewModels: e } = this.viewModel, t = /* @__PURE__ */ new Map();
     return e.forEach((i) => {
@@ -166,10 +169,7 @@ class J extends S {
       return;
     this._removeFlowItems(), await this.viewModel.zoomTo({ target: a });
     const s = W(a);
-    await this.open({
-      features: [i],
-      location: s ?? void 0
-    }), await this.setFocus(), this._openRelatedFeatureAbortController === t && (this._openRelatedFeatureAbortController = null);
+    s != null && (this.location = s), this.features = [i], this.visible = !0, await this.setFocus(), this._openRelatedFeatureAbortController === t && (this._openRelatedFeatureAbortController = null);
   }
   _handlePaginationMenuButton() {
     this._updateFeatureMenu();
@@ -229,8 +229,8 @@ class J extends S {
   _triggerAction(e) {
     this.triggerAction(e), this.arcgisTriggerAction.emit({ action: e });
   }
-  _viewChange(e, t) {
-    e && t && this.viewModel.clear();
+  _viewChange() {
+    this.viewModel.clear(), this.viewModel.visible = !1;
   }
   _closeOpenActionMenu() {
     const { _actionBarMenuNode: e } = this;
@@ -257,7 +257,7 @@ class J extends S {
   }
   _getHeading() {
     const { hideHeading: e } = this, { title: t, selectedFeatureViewModel: i } = this.viewModel;
-    return i ? i?.state === "error" ? this.messages?.errorMessage ?? "" : i?.title || "" : !e && t ? t : "";
+    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();
@@ -284,20 +284,20 @@ class J extends S {
   _renderFeaturePaginationText() {
     const { messages: e, viewModel: t } = this, { featureCount: i, selectedFeatureIndex: a } = t;
     return n`<div class=${c(o.paginationText)}>${g(e.pageText ?? "", {
-      index: b(a + 1),
-      total: b(i)
+      index: F(a + 1),
+      total: F(i)
     })}</div>`;
   }
   _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 ?? "", {
-      index: b(a + 1),
-      total: b(i)
-    })} text-enabled title=${e.selectFeature ?? d}></calcite-action>`;
+      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 ?? "" ?? d}></calcite-action><calcite-action appearance=solid icon=chevron-right icon-flip-rtl .label=${t ?? ""} @click=${this._nextFeature} scale=s .text=${t ?? ""} title=${t ?? "" ?? d}></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 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>`;
   }
   _renderFeatureMenuItem(e) {
     const { initialDisplayMode: t } = this, { selectedFeatureViewModel: i, featureViewModels: a } = this.viewModel, s = e === i, r = a.indexOf(e);
@@ -306,45 +306,45 @@ class J extends S {
   _renderFeatureMenu() {
     const { messages: e, viewModel: t } = this, i = this._groupResultsByLayer(), a = this.initialDisplayMode === "list" ? "none" : "single";
     return t.featureViewModels.length ? n`<calcite-list display-mode=flat .label=${e?.featuresList ?? ""} selection-appearance=icon .selectionMode=${a}>${Array.from(i.keys(), (s) => {
-      const r = i.get(s)?.map((h) => this._renderFeatureMenuItem(h)), l = s ? s.title ?? this.messages.untitled : null;
-      return !this.hideFeatureListLayerTitle && l !== null ? $(s?.uid || "map-graphics", n`<calcite-list-item-group .heading=${l}>${r}</calcite-list-item-group>`) : r;
+      const r = i.get(s)?.map((u) => this._renderFeatureMenuItem(u)), l = s ? s.title ?? this.messages.untitled : null;
+      return !this.hideFeatureListLayerTitle && l !== null ? C(s ?? "map-graphics", n`<calcite-list-item-group .heading=${l}>${r}</calcite-list-item-group>`) : r;
     })}</calcite-list>` : null;
   }
-  _renderHeaderAction(e, t) {
-    const i = e.title || "";
-    return e.visible ? $(`header-action-${t}`, n`<calcite-action .active=${e.type === "toggle" ? e.value : !1} appearance=solid data-action-id=${e.id ?? d} data-action-uid=${e.uid ?? d} .disabled=${e.disabled} .icon=${e.icon ?? void 0} .indicator=${e.active} .loading=${e.active} @click=${() => this._triggerAction(e)} slot=header-actions-end .text=${i} title=${i ?? d}></calcite-action>`) : null;
+  _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;
   }
   _renderHeaderActions() {
-    return this.headerActions.map((e, t) => this._renderHeaderAction(e, t)).toArray();
+    return this.headerActions.map((e) => this._renderHeaderAction(e)).toArray();
   }
   _renderContentFeature() {
-    const { headingLevel: e, hideCloseButton: t, _isCollapsed: i, _collapseEnabled: a, featureNavigationTop: s, flowItems: r, initialDisplayMode: l, selectedFeature: h, featureMenuOpen: v } = this, { active: _ } = this.viewModel, M = this._getHeading();
-    if (l === "list" && !h)
+    const { headingLevel: e, hideCloseButton: t, _isCollapsed: i, _collapseEnabled: a, featureNavigationTop: s, flowItems: r, initialDisplayMode: l, selectedFeature: u, featureMenuOpen: v } = this, { active: _ } = this.viewModel, m = this._getHeading();
+    if (l === "list" && !u)
       return null;
-    const x = r.length === 0 && (l === "list" ? !!h : !v);
-    return n`<calcite-flow-item class=${c(y({
+    const b = r.length === 0 && (l === "list" ? !!u : !v);
+    return n`<calcite-flow-item class=${c(x({
       [o.contentFeature]: !0,
       [o.flowItemCollapsed]: i
-    }))} .closable=${!t} .closed=${!_} .collapsed=${i} .collapseDirection=${s ? "down" : "up"} .collapsible=${a} .headingLevel=${e} .selected=${x} @calciteFlowItemBack=${this._handleFeatureBack} .loading=${!!this._openRelatedFeatureAbortController} @calciteFlowItemClose=${this.close} @calciteFlowItemToggle=${this._handleCollapseToggle} .heading=${C(M)} ${w(this._rootFlowItemNode)}>${this._renderHeaderActions()}${this._renderActionBar()}<div class=${c(y(o.container, o.contentContainer))}>${this._renderContent()}</div>${this._renderFooter()}</calcite-flow-item>`;
+    }))} .closable=${!t} .closed=${!_} .collapsed=${i} .collapseDirection=${s ? "down" : "up"} .collapsible=${a} .headingLevel=${e} .selected=${b} @calciteFlowItemBack=${this._handleFeatureBack} .loading=${!!this._openRelatedFeatureAbortController} @calciteFlowItemClose=${this.close} @calciteFlowItemToggle=${this._handleCollapseToggle} .heading=${A(m)} ${w(this._rootFlowItemNode)}>${this._renderHeaderActions()}${this._renderActionBar()}<div class=${c(x(o.container, o.contentContainer))}>${this._renderContent()}</div>${this._renderFooter()}</calcite-flow-item>`;
   }
   _renderFeatureMenuContainer() {
-    const { viewModel: e, hideCloseButton: t, featureMenuTitle: i, messages: a, initialDisplayMode: s, featureMenuOpen: r, selectedFeature: l, _collapseEnabled: h, _isCollapsed: v, featureNavigationTop: _, headingLevel: M } = this, { active: x, featureViewModels: k, pendingPromisesCount: B } = e, O = i ?? a.selectFeature;
+    const { viewModel: e, hideCloseButton: t, featureMenuTitle: i, messages: a, initialDisplayMode: s, featureMenuOpen: r, selectedFeature: l, _collapseEnabled: u, _isCollapsed: v, featureNavigationTop: _, headingLevel: m } = this, { active: b, featureViewModels: k, pendingPromisesCount: B } = e, O = i ?? a.selectFeature;
     if (s === "feature" && !r)
       return null;
-    const N = s === "list" ? !l : r;
-    return n`<calcite-flow-item class=${c(y({
+    const D = s === "list" ? !l : r;
+    return n`<calcite-flow-item class=${c(x({
       [o.flowItemCollapsed]: v
-    }))} .closable=${s === "list" && !t} .closed=${!x} .collapsed=${s === "list" && v} .collapseDirection=${_ ? "down" : "up"} .collapsible=${s === "list" && h} .description=${this.hideFeatureMenuHeading ? void 0 : g(a.total ?? "", {
+    }))} .closable=${s === "list" && !t} .closed=${!b} .collapsed=${s === "list" && v} .collapseDirection=${_ ? "down" : "up"} .collapsible=${s === "list" && u} .description=${this.hideFeatureMenuHeading ? void 0 : g(a.total ?? "", {
       total: k.length
-    })} .heading=${this.hideFeatureMenuHeading ? void 0 : O} .headingLevel=${M} .loading=${e.waitingForContents} .selected=${N} @calciteFlowItemBack=${(D) => {
-      D.preventDefault(), this._handleFeatureMenuBack();
-    }} @calciteFlowItemClose=${this.close} @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>`;
+    })} .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>`;
   }
   _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", h = i.returnToInitialFeature ?? "", v = i?.selectFeature, _ = this._getActionTitle(m);
-    return n`<calcite-flow-item .closable=${!a} .closed=${!s} .description=${C(this._getDrillInFlowItemDescription(e) ?? "")} .heading=${C(e.heading ?? "")} .selected=${t} @calciteFlowItemBack=${(M) => {
-      M.preventDefault(), this._handleDrillInBackClick();
-    }} .loading=${!!this._openRelatedFeatureAbortController} @calciteFlowItemClose=${this.close}><calcite-action appearance=transparent class=${c(o.actionExit)} icon=move-up @click=${this._removeFlowItems} slot=header-actions-start .text=${h ?? ""} title=${h ?? "" ?? d}></calcite-action>${r ? n`<calcite-action appearance=transparent icon=zoom-to-object @click=${() => this._openRelatedFeature(e)} slot=header-actions-end .text=${v ?? ""} title=${v ?? d}></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 data-action-id=${m.id ?? d} data-action-uid=${m.uid ?? d} .disabled=${m.disabled} .icon=${m.icon ?? void 0} .loading=${m.active} scale=s text-enabled .text=${_} title=${_ ?? d} @click=${() => j(this.viewModel, e)}></calcite-action></calcite-action-group></calcite-action-bar>` : null}<div class=${c(o.container)}>${e}</div></calcite-flow-item>`;
+    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.close}><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>`;
   }
   _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()];
@@ -356,15 +356,15 @@ 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 data-action-id=${e.id ?? d} data-action-uid=${e.uid ?? d} .disabled=${e.disabled} .icon=${e.icon ?? void 0} .loading=${e.active} scale=s .textEnabled=${!this._hideActionText} .text=${t ?? ""} title=${t ?? d} @click=${() => this._triggerAction(e)}></calcite-action>`;
+      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>`;
     });
   }
   _renderContent() {
     const { content: e, selectedFeatureViewModel: t } = this.viewModel;
-    return t ? $(t, n`<arcgis-feature .flowItems=${this.flowItems} .graphic=${t.graphic} .map=${this.map} show-relationship-content hide-heading .spatialReference=${this.spatialReference} .timeZone=${this.timeZone} .view=${this.view} .headingLevel=${this.headingLevel + 1} ${w(this._selectedFeatureComponent)}></arcgis-feature>`) : typeof e == "string" ? $(e, n`<div .innerHTML=${T.sanitize(e) ?? ""}></div>`) : e ?? null;
+    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;
   }
 }
-L("arcgis-features", J);
+E("arcgis-features", J);
 export {
   J as ArcgisFeatures
 };