@arcgis/map-components 5.0.0-next.135 → 5.0.0-next.137

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

@@ -1,219 +1,204 @@
-/// <reference types="@arcgis/core/interfaces.d.ts" />
 /// <reference path="../../index.d.ts" />
-import { Use } from '@arcgis/lumina/controllers';
-import { default as FeatureForm } from '@arcgis/core/widgets/FeatureForm.js';
-import { PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { ArcgisReferenceElement } from '../../utils/component-utils';
-import { IconName } from '../../utils/action-utils';
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type Graphic from "@arcgis/core/Graphic.js";
+import type FormTemplate from "@arcgis/core/form/FormTemplate.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { ArcgisReferenceElement } from "../../utils/component-utils.js";
+import type { IconName } from "../../utils/action-utils.js";
+import type { EditType } from "@arcgis/core/widgets/support/forms/types.js";
+import type { HeadingLevel } from "@arcgis/core/widgets/support/types.js";
+import type { Icon } from "@esri/calcite-components/components/calcite-icon";
+import type { FeatureFormLayerUnion } from "@arcgis/core/widgets/FeatureForm/types.js";
+import type { FeatureFormViewModelState } from "@arcgis/core/widgets/FeatureForm/FeatureFormViewModel.js";
 
-declare const useFeatureFormWidget: (component: LitElement & Pick<FeatureForm, "label" | "headingLevel" | "layer" | "timeZone" | "viewModel" | "icon" | "feature" | "formTemplate" | "groupDisplay"> & {
-    state?: unknown;
-    viewModel?: import('@arcgis/core/widgets/FeatureForm/FeatureFormViewModel').default | undefined;
-    closed?: boolean;
-    icon: import('@arcgis/toolkit/type').nil | string;
-    label: import('@arcgis/toolkit/type').nil | string;
-    referenceElement?: ArcgisReferenceElement | string;
-    arcgisReady: import('@arcgis/lumina').EventEmitter;
-    arcgisPropertyChange: import('@arcgis/lumina').EventEmitter<{
-        name: string;
-    }> | undefined;
-    el: HTMLElement & {
-        childElem?: HTMLElement & {
-            ownedBy?: HTMLElement;
-        };
-        view?: __esri.LinkChartView | __esri.MapView | __esri.SceneView | nullish;
-    };
-    autoDestroyDisabled: boolean;
-    destroy: () => Promise<void>;
-}) => FeatureForm;
-/** [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-feature-form/) */
-export declare class ArcgisFeatureForm extends LitElement {
-    /**
-     * If true, the component will not be destroyed automatically when it is
-     * disconnected from the document. This is useful when you want to move the
-     * component to a different place on the page, or temporarily hide it. If this
-     * is set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-feature-form/#destroy) method when you are done to
-     * prevent memory leaks.
-     *
-     * @default false
-     */
-    autoDestroyDisabled: boolean;
-    /**
-     * The associated feature containing the editable attributes.
-     * A common way to access this is via the [MapView#hitTest()](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#hitTest)
-     * or [SceneView's](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html#hitTest) `hitTest()`
-     * method.
-     *
-     * @example
-     * // Check if a user clicked on an incident feature.
-     * view.on("click", function(event) {
-     *   view.hitTest(event).then(function(response) {
-     *     // Display the attributes of selected incident feature in the form
-     *     if (response.results[0].graphic && response.results[0].graphic.layer.id == "incidentsLayer") {
-     *        formVM.feature = result.results[0].graphic
-     *     }
-     *   });
-     * });
-     */
-    feature: import('@arcgis/core/Graphic').default | null | undefined;
-    /**
-     * The associated [template](https://developers.arcgis.com/javascript/latest/api-reference/esri-form-FormTemplate.html) used for the form.
-     *
-     * The [FormTemplate](https://developers.arcgis.com/javascript/latest/api-reference/esri-form-FormTemplate.html) is used to configure how the form should display and set any associated properties for the form, e.g. title, description, field elements, etc.
-     *
-     * @since 4.16
-     * @see [Sample - Update Feature Attributes](https://developers.arcgis.com/javascript/latest/sample-code/editing-groupedfeatureform/)
-     * @see [Sample - Advanced Attribute Editing](https://developers.arcgis.com/javascript/latest/sample-code/editing-featureform-fieldvisibility/)
-     * @example
-     * // Create the Form template and pass in elements
-     * const formTemplate = new FormTemplate({
-     *   title: "Inspector report",
-     *   description: "Enter all relevant information below",
-     *   elements: [groupElement] // Add the grouped elements to the template
-     * });
-     *
-     * // Add a new feature form with grouped fields
-     * const form = new FeatureForm({
-     *   container: "form",
-     *   groupDisplay: "sequential", // only display one group at a time
-     *   formTemplate: formTemplate // set it to template created above
-     * });
-     */
-    formTemplate: import('@arcgis/core/form/FormTemplate').default | null | undefined;
-    /**
-     * The edit type for the form, which determines the editing context and behavior.
-     *
-     * This property is used in two primary ways:
-     *
-     * 1. **Arcade Expressions Context**: When evaluating [Arcade expressions](https://developers.arcgis.com/javascript/latest/arcade/#form-calculation),
-     * the value of this property is assigned to the `$editContext.editType` variable.
-     *    This allows Arcade expressions to adapt their behavior based on the type of edit
-     *    being performed (e.g., "INSERT", "UPDATE", "DELETE", or "NA").
-     *
-     * 2. **Layer Editing Capabilities**: This property is also used to determine whether
-     *    the layer allows the specified type of edit. For example:
-     *    - If `editType` is set to `"INSERT"` but the layer has `supportsAdd: false`,
-     *      all inputs in the form will be read-only.
-     *    - If `editType` is set to `"UPDATE"` but the layer has `supportsUpdate: false`,
-     *      all inputs will also be read-only.
-     *
-     * This behavior applies regardless of whether a form template or Arcade expressions
-     * are present. For instance:
-     * - If a layer has `{ supportsAdd: true, supportsUpdate: false }` and no form template,
-     *   setting `editType` to `"INSERT"` will allow the user to modify all fields, while
-     *   setting it to `"UPDATE"` will make all fields read-only.
-     * - If a form template is present with field elements that include `editableExpression`
-     *   or `valueExpression`, the `editType` still determines whether the layer permits
-     *   editing in the given context.
-     *
-     * @default "NA"
-     * @since 4.33
-     * @see [Arcade Form Calculation - profile variables](https://developers.arcgis.com/arcade/profiles/form-calculation/#profile-variables)
-     */
-    editType: import('@arcgis/core/widgets/support/forms/types').EditType;
-    /**
-     * String indicating the
-     * [groupDisplay](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-FeatureForm.html#groupDisplay) and how they will be displayed to the end user. This only applies if using [grouped field elements](https://developers.arcgis.com/javascript/latest/api-reference/esri-form-elements-GroupElement.html) configured in the Editor's [layer infos](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Editor-types.html#LayerInfo).
-     *
-     * **Possible Values**
-     *
-     * Value | Description |
-     * ----- | ----------- |
-     * all | All groups will be expanded.
-     * sequential | A single group will be expanded at a time.
-     *
-     * @default "all"
-     * @since 4.10
-     * @see [Sample - Update Feature Attributes](https://developers.arcgis.com/javascript/latest/sample-code/editing-groupedfeatureform/)
-     */
-    groupDisplay: "all" | "sequential";
-    /**
-     * Indicates the heading level to use for the [FormTemplate#title](https://developers.arcgis.com/javascript/latest/api-reference/esri-form-FormTemplate.html#title) of the form.
-     * By default, the title is rendered as a level 2 heading (e.g. `<h2>Form title</h2>`).
-     * In addition, group element labels default to a level 3 heading (e.g. `<h3>Group element label</h3>`).
-     * Depending on the component's placement
-     * in your app, you may need to adjust this heading for proper semantics. This is
-     * important for meeting accessibility standards.
-     *
-     * @default 2
-     * @since 4.20
-     * @see [Heading Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)
-     * @example
-     * // form title will render as an <h3>
-     * // group element labels will render as an <h4>
-     * featureForm.headingLevel = 3;
-     */
-    headingLevel: import('@arcgis/core/widgets/support/types').HeadingLevel;
-    /**
-     * Icon displayed in the widget's button.
-     *
-     * @default "form-field"
-     * @since 4.27
-     * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
-     */
-    get icon(): typeof this.widget.icon;
-    set icon(value: IconName);
-    /**
-     * The widget's default label.
-     *
-     * @since 4.11
-     */
-    label: string;
-    /**
-     * Layer containing the editable feature attributes.
-     * If this layer is not specified, it is the same as the
-     * [graphic's layer](https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html#layer).
-     *
-     * @example
-     * const form = new FeatureForm({
-     *   container: "formDiv", // HTML div
-     *   layer: featureLayer // Feature layer
-     * });
-     */
-    layer: import('@arcgis/core/widgets/FeatureForm/types').FeatureFormLayerUnion | null | undefined;
-    /**
-     * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
-     *
-     * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
-     */
-    referenceElement?: ArcgisReferenceElement | string;
-    /**
-     * The current state of the component.
-     *
-     * @default "disabled"
-     */
-    readonly state: import('@arcgis/core/widgets/FeatureForm/FeatureFormViewModel').FeatureFormViewModelState;
-    /**
-     * The timezone displayed within the form. If `unknown`, it first checks if the  layer has a [FeatureLayer#preferredTimeZone](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#preferredTimeZone). If so, it displays this. If not, it will default to UTC.
-     *
-     * @since 4.28
-     */
-    timeZone: string;
-    /** Permanently destroy the component. */
-    destroy(): Promise<void>;
-    /** Returns all of the field values, regardless of update status. */
-    getValues(): Promise<any>;
-    /** Fires the submit event. */
-    submit(): 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";
-    }>;
-    /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
-    readonly arcgisReady: TargetedEvent<this, void>;
-    /** Fires when the [submit()](#submit) method is called. */
-    readonly arcgisSubmit: TargetedEvent<this, import('@arcgis/core/widgets/FeatureForm/FeatureFormViewModel').SubmitEvent>;
-    /** Fires when a field value is updated. */
-    readonly arcgisValueChange: TargetedEvent<this, import('@arcgis/core/widgets/FeatureForm/FeatureFormViewModel').ValueChangeEvent>;
-    private widget: FeatureForm;
-    readonly _setterTypes: {
-        icon?: IconName;
-    };
-    "@eventTypes": {
-        "arcgisPropertyChange": ArcgisFeatureForm["arcgisPropertyChange"]["detail"];
-        "arcgisReady": ArcgisFeatureForm["arcgisReady"]["detail"];
-        "arcgisSubmit": ArcgisFeatureForm["arcgisSubmit"]["detail"];
-        "arcgisValueChange": ArcgisFeatureForm["arcgisValueChange"]["detail"];
-    };
-}
-export {};
+export abstract class ArcgisFeatureForm extends LitElement {
+  /**
+   * If true, the component will not be destroyed automatically when it is
+   * disconnected from the document. This is useful when you want to move the
+   * component to a different place on the page, or temporarily hide it. If this
+   * is set, make sure to call the [destroy()](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-feature-form/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
+  accessor autoDestroyDisabled: boolean;
+  /** @default false */
+  accessor disabled: boolean;
+  /**
+   * The edit type for the form, which determines the editing context and behavior.
+   *
+   * This property is used in two primary ways:
+   *
+   * 1. **Arcade Expressions Context**: When evaluating [Arcade expressions](https://developers.arcgis.com/javascript/latest/arcade/#form-calculation),
+   * the value of this property is assigned to the `$editContext.editType` variable.
+   *    This allows Arcade expressions to adapt their behavior based on the type of edit
+   *    being performed (e.g., "INSERT", "UPDATE", "DELETE", or "NA").
+   *
+   * 2. **Layer Editing Capabilities**: This property is also used to determine whether
+   *    the layer allows the specified type of edit. For example:
+   *    - If `editType` is set to `"INSERT"` but the layer has `supportsAdd: false`,
+   *      all inputs in the form will be read-only.
+   *    - If `editType` is set to `"UPDATE"` but the layer has `supportsUpdate: false`,
+   *      all inputs will also be read-only.
+   *
+   * This behavior applies regardless of whether a form template or Arcade expressions
+   * are present. For instance:
+   * - If a layer has `{ supportsAdd: true, supportsUpdate: false }` and no form template,
+   *   setting `editType` to `"INSERT"` will allow the user to modify all fields, while
+   *   setting it to `"UPDATE"` will make all fields read-only.
+   * - If a form template is present with field elements that include `editableExpression`
+   *   or `valueExpression`, the `editType` still determines whether the layer permits
+   *   editing in the given context.
+   *
+   * @default "NA"
+   * @since 4.33
+   * @see [Arcade Form Calculation - profile variables](https://developers.arcgis.com/arcade/profiles/form-calculation/#profile-variables)
+   */
+  accessor editType: EditType;
+  /**
+   * The associated feature containing the editable attributes.
+   * A common way to access this is via the [MapView#hitTest()](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#hitTest)
+   * or [SceneView's](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html#hitTest) `hitTest()`
+   * method.
+   *
+   * @example
+   * // Check if a user clicked on an incident feature.
+   * view.on("click", function(event) {
+   *   view.hitTest(event).then(function(response) {
+   *     // Display the attributes of selected incident feature in the form
+   *     if (response.results[0].graphic && response.results[0].graphic.layer.id == "incidentsLayer") {
+   *        formVM.feature = result.results[0].graphic
+   *     }
+   *   });
+   * });
+   */
+  accessor feature: Graphic | null | undefined;
+  /**
+   * The associated [template](https://developers.arcgis.com/javascript/latest/api-reference/esri-form-FormTemplate.html) used for the form.
+   *
+   * The [FormTemplate](https://developers.arcgis.com/javascript/latest/api-reference/esri-form-FormTemplate.html) is used to configure how the form should display and set any associated properties for the form, e.g. title, description, field elements, etc.
+   *
+   * @since 4.16
+   * @see [Sample - Update Feature Attributes](https://developers.arcgis.com/javascript/latest/sample-code/editing-groupedfeatureform/)
+   * @see [Sample - Advanced Attribute Editing](https://developers.arcgis.com/javascript/latest/sample-code/editing-featureform-fieldvisibility/)
+   * @example
+   * // Create the Form template and pass in elements
+   * const formTemplate = new FormTemplate({
+   *   title: "Inspector report",
+   *   description: "Enter all relevant information below",
+   *   elements: [groupElement] // Add the grouped elements to the template
+   * });
+   *
+   * // Add a new feature form with grouped fields
+   * const form = new FeatureForm({
+   *   container: "form",
+   *   groupDisplay: "sequential", // only display one group at a time
+   *   formTemplate: formTemplate // set it to template created above
+   * });
+   */
+  accessor formTemplate: FormTemplate | null | undefined;
+  /**
+   * String indicating the
+   * [groupDisplay](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-FeatureForm.html#groupDisplay) and how they will be displayed to the end user. This only applies if using [grouped field elements](https://developers.arcgis.com/javascript/latest/api-reference/esri-form-elements-GroupElement.html) configured in the Editor's [layer infos](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Editor-types.html#LayerInfo).
+   *
+   * **Possible Values**
+   *
+   * Value | Description |
+   * ----- | ----------- |
+   * all | All groups will be expanded.
+   * sequential | A single group will be expanded at a time.
+   *
+   * @default "all"
+   * @since 4.10
+   * @see [Sample - Update Feature Attributes](https://developers.arcgis.com/javascript/latest/sample-code/editing-groupedfeatureform/)
+   */
+  accessor groupDisplay: "all" | "sequential";
+  /**
+   * Indicates the heading level to use for the [FormTemplate#title](https://developers.arcgis.com/javascript/latest/api-reference/esri-form-FormTemplate.html#title) of the form.
+   * By default, the title is rendered as a level 2 heading (e.g. `<h2>Form title</h2>`).
+   * In addition, group element labels default to a level 3 heading (e.g. `<h3>Group element label</h3>`).
+   * Depending on the component's placement
+   * in your app, you may need to adjust this heading for proper semantics. This is
+   * important for meeting accessibility standards.
+   *
+   * @default 2
+   * @since 4.20
+   * @see [Heading Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)
+   * @example
+   * // form title will render as an <h3>
+   * // group element labels will render as an <h4>
+   * featureForm.headingLevel = 3;
+   */
+  accessor headingLevel: HeadingLevel;
+  /** @default false */
+  accessor hideReadOnlyNotice: boolean;
+  /**
+   * Icon which represents the component.
+   * Typically used when the component is controlled by another component (e.g. by the Expand component).
+   *
+   * @default "form-field"
+   * @since 4.27
+   * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
+   */
+  get icon(): Icon["icon"];
+  set icon(value: IconName);
+  /**
+   * The component's default label.
+   *
+   * @since 4.11
+   */
+  accessor label: string;
+  /**
+   * Layer containing the editable feature attributes.
+   * If this layer is not specified, it is the same as the
+   * [graphic's layer](https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html#layer).
+   *
+   * @example
+   * const form = new FeatureForm({
+   *   container: "formDiv", // HTML div
+   *   layer: featureLayer // Feature layer
+   * });
+   */
+  accessor layer: FeatureFormLayerUnion | null | undefined;
+  /**
+   * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
+   *
+   * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
+   */
+  accessor referenceElement: ArcgisReferenceElement | string | undefined;
+  /**
+   * The current state of the component.
+   *
+   * @default "disabled"
+   */
+  get state(): FeatureFormViewModelState;
+  /**
+   * The timezone displayed within the form. If `unknown`, it first checks if the  layer has a [FeatureLayer#preferredTimeZone](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#preferredTimeZone). If so, it displays this. If not, it will default to UTC.
+   *
+   * @since 4.28
+   */
+  accessor timeZone: string;
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
+  /** Returns all of the field values, regardless of update status. */
+  getValues(): Promise<any>;
+  /** Fires the submit event. */
+  submit(): Promise<void>;
+  "@setterTypes": {
+    icon?: IconName;
+  };
+  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "state"; }>;
+  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the [submit()](#submit) method is called. */
+  readonly arcgisSubmit: import("@arcgis/lumina").TargetedEvent<this, __esri.FeatureFormSubmitEvent>;
+  /** Fires when a field value is updated. */
+  readonly arcgisValueChange: import("@arcgis/lumina").TargetedEvent<this, __esri.FeatureFormValueChangeEvent>;
+  readonly "@eventTypes": {
+    arcgisPropertyChange: ArcgisFeatureForm["arcgisPropertyChange"]["detail"];
+    arcgisReady: ArcgisFeatureForm["arcgisReady"]["detail"];
+    arcgisSubmit: ArcgisFeatureForm["arcgisSubmit"]["detail"];
+    arcgisValueChange: ArcgisFeatureForm["arcgisValueChange"]["detail"];
+  };
+}

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

@@ -7,14 +7,14 @@ import { m as n } from "../../chunks/useWidget.js";
 import { css as l } from "lit";
 /*! 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.135 */
+v5.0.0-next.137 */
 const s = l`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}.esri-widget{box-sizing:border-box;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-relative-tight)}.esri-widget *,.esri-widget :before,.esri-widget :after{box-sizing:inherit}.esri-widget.esri-widget--disabled>*{opacity:.4;pointer-events:none}.esri-widget.esri-widget--compact{--esri-widget-padding-y: 0;--esri-widget-padding-x: 0}.esri-widget__anchor{color:var(--calcite-color-text-2)}.esri-widget__anchor:hover{color:var(--calcite-color-text-3)}.esri-widget__anchor:hover,.esri-widget__anchor:focus{text-decoration:underline}.esri-widget__anchor--disabled{opacity:.4;pointer-events:none}.esri-widget__header{background-color:var(--calcite-color-foreground-1);flex:1 0 100%;justify-content:space-between;align-items:center;width:100%;min-height:48px;padding:12px 0 12px 15px;display:flex}.esri-widget__header .esri-widget__heading{width:calc(100% - 48px);text-align:initial;color:var(--calcite-color-text-1);align-items:center;margin:0;padding:0;display:flex}.esri-widget__header-button{appearance:none;cursor:pointer;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);border:none;flex:0 0 48px;justify-content:center;align-self:stretch;align-items:center;width:48px;padding:0;display:flex}.esri-widget__footer{background-color:var(--calcite-color-foreground-1);justify-content:center;align-items:center;width:100%;min-height:48px;display:flex}.esri-widget__footer-pagination{color:var(--calcite-color-text-2);justify-content:space-between;align-items:center;display:flex}.esri-widget__footer-pagination-previous-button,.esri-widget__footer-pagination-next-button{cursor:pointer;background-color:var(--calcite-color-foreground-1);border:0;margin:0 7px;padding:12px 15px;transition:background-color .125s ease-in-out}.esri-widget__footer-pagination-previous-button:hover,.esri-widget__footer-pagination-previous-button:focus,.esri-widget__footer-pagination-next-button:hover,.esri-widget__footer-pagination-next-button:focus{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1)}.esri-menu{visibility:hidden;z-index:1;background-clip:padding;background-color:var(--calcite-color-foreground-1);background-clip:padding-box;width:100%;max-height:0;margin:2px 0 0;padding:0;font-size:var(--calcite-font-size);line-height:var(--calcite-spacing-xl);position:absolute;top:100%;left:0;overflow:hidden;box-shadow:0 1px 2px #0000004d}.esri-menu .esri-menu__header{color:var(--calcite-color-text-inverse);background-color:var(--calcite-color-inverse);padding:6px 12px}.esri-menu__list{margin:0;padding:0;list-style:none}.esri-menu__list-item{cursor:pointer;border-top:1px solid #adadad4d;border-left:3px solid #0000;padding:.8em 1em}.esri-menu__list-item [class^=esri-icon-],.esri-menu__list-item [class*=" esri-icon-"]{padding-right:2.8px}.esri-menu__list-item:first-child{border-top:none}.esri-menu__list-item--focus,.esri-menu__list-item:hover,.esri-menu__list-item:focus{background-color:var(--calcite-color-foreground-1)}.esri-menu__list-item:active{background-color:var(--calcite-color-foreground-current)}.esri-menu__list-item--active,.esri-menu__list-item--active:hover,.esri-menu__list-item--active:focus{background-color:var(--calcite-color-foreground-1);border-left-color:var(--calcite-color-brand)}.esri-widget__table{border-collapse:collapse;color:var(--calcite-color-text-1);border:none;width:100%;line-height:var(--calcite-font-line-height-relative-tight)}.esri-widget__table tr:nth-child(odd){background-color:var(--calcite-color-transparent)}.esri-widget__table tr:nth-child(2n){background-color:var(--calcite-color-transparent-press)}.esri-widget__table tr a{color:var(--calcite-color-text-2)}.esri-widget__table tr a:hover,.esri-widget__table tr a:focus{color:var(--calcite-color-text-1)}.esri-widget__table tr td,.esri-widget__table tr th{vertical-align:top;word-break:break-word;padding:.5em .7em;font-size:var(--calcite-font-size-sm);font-weight:var(--calcite-font-weight-regular)}.esri-widget__table tr th{text-align:left;border-right:3px solid #0000000d;width:50%}.esri-widget__table tr td{width:50%}.esri-input{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1);border:1px solid #959595;font-size:var(--calcite-font-size)}.esri-input::-ms-clear{display:none}.esri-input::placeholder{opacity:1;color:var(--calcite-color-text-2)}.esri-input:placeholder-shown{text-overflow:ellipsis}.esri-input[type=text],.esri-input[type=password],.esri-input[type=number]{height:32px;padding:0 .5em}calcite-combobox.esri-input{border:none}.esri-widget__content--empty{text-align:center;color:var(--calcite-color-border-input);flex-flow:column wrap;align-items:center;padding:18px 22px;display:flex}.esri-widget__content--empty h1.esri-widget__heading,.esri-widget__content--empty h2.esri-widget__heading,.esri-widget__content--empty h3.esri-widget__heading,.esri-widget__content--empty h4.esri-widget__heading,.esri-widget__content--empty h5.esri-widget__heading{font-weight:var(--calcite-font-weight-regular)}.esri-widget__content-illustration--empty{width:128px;padding:1rem 0}.esri-widget__content-icon--empty{width:32px;padding:.5rem 0}.esri-select{appearance:none;cursor:pointer;color:var(--calcite-color-text-2);background:var(--calcite-color-foreground-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 32 32' width='32' height='32'%3E%3Cpath d='M8 11.207l-4-4V5.793l4 4 4-4v1.414z' fill='%23adadad' fillrule='nonzero'/%3E%3C/svg%3E") 100% no-repeat;border:1px solid #959595;border-radius:0;width:100%;height:32px;margin:0;padding:0 .5em;font-family:inherit;font-size:.85em;display:block}.esri-select[disabled]{cursor:auto}.esri-select::-ms-expand{display:none}.esri-disabled a,.esri-disabled [role=menu],.esri-disabled [role=checkbox],.esri-disabled [class^=esri-icon-],.esri-disabled [class*=" esri-icon-"]{color:var(--calcite-color-text-3)}.keynav-mode .esri-widget:focus,.keynav-mode .esri-widget :focus{z-index:1;outline-offset:2px;outline:2px solid #adadad}.esri-widget__loader-animation{border:.15em solid #adadad4d;border-top-color:var(--calcite-color-border-input);border-radius:100%;width:1em;height:1em;font-size:var(--calcite-font-size-md);animation:1.25s linear infinite esri-rotate;display:block;transform:translateZ(0)}:dir(rtl) .esri-widget__table th{text-align:right;border-left:3px solid #0000000d;border-right:none}:dir(rtl) .esri-select{background-position:0}:dir(rtl) .esri-menu__list-item{border-left:none;border-right:3px solid #0000}:dir(rtl) .esri-menu__list-item [class^=esri-icon-],:dir(rtl) .esri-menu__list-item [class*=" esri-icon-"]{padding-left:2px;padding-right:0}:dir(rtl) .esri-menu__list-item--active{border-right-color:var(--calcite-color-brand)}.esri-icon-font-fallback-text{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.esri-rotating{animation:1.25s linear infinite esri-rotate;transform:translateZ(0)}.esri-clearfix:before,.esri-clearfix:after{content:" ";display:table}.esri-clearfix:after{clear:both}.esri-interactive{cursor:pointer}.esri-hidden{display:none!important}.esri-invisible{visibility:hidden!important}.esri-offscreen{position:absolute;top:-999em;left:-999em}.esri-match-height{flex-direction:column;flex:auto;display:flex;overflow:hidden}.esri-feature-form{letter-spacing:0em;background:var(--calcite-color-background);padding:var(--arcgis-internal-padding)}.esri-feature-form__disabled-notice{margin-bottom:var(--calcite-spacing-xl)}.esri-feature-form .esri-feature-utility-network-associations,.esri-feature-form .esri-feature-form-utility-network-association-list{margin-block-end:var(--calcite-spacing-md)}.esri-feature-form .esri-feature-utility-network-associations .esri-feature-element-info__description{color:var(--calcite-color-text-2)}.esri-feature-form .esri-feature-utility-network-associations .esri-feature-element-info h5{font-size:inherit}.esri-feature-form__form{flex-direction:column;display:flex}.esri-feature-form__centered-button{align-self:center}.esri-feature-form__description-text{color:var(--calcite-color-text-2);font-size:var(--calcite-font-size-sm)}.esri-feature-form__list-observer{z-index:2;text-align:center;position:relative;bottom:var(--calcite-spacing-xxl)}.esri-feature-form__related-records_header{margin-bottom:var(--calcite-spacing-xs);display:flex}.esri-feature-form__related-records_header span{flex-grow:1}.esri-feature-form__related-records_label calcite-notice,.esri-feature-form__related-records_label .esri-feature-form__description-text{margin-bottom:var(--calcite-spacing-xs)}.esri-feature-form__related-records_list{min-height:40px;margin-bottom:var(--calcite-spacing-xs)}label.esri-feature-form__label{gap:.5em;margin-bottom:var(--calcite-spacing-md)}.esri-feature-form__label{opacity:1;flex-direction:column;justify-content:space-between;margin-bottom:var(--calcite-spacing-xs);transition:opacity .25s,margin .25s;display:flex;position:relative}.esri-feature-form__label:last-child{margin-bottom:0}.esri-feature-form__label-text-content{white-space:pre-wrap;word-break:break-word;word-wrap:break-word;align-items:center;display:flex}.esri-feature-form__form-header{margin-bottom:var(--calcite-spacing-md)}.esri-feature-form__form-header .esri-feature-form__description-text~.esri-widget__heading{margin-bottom:0}.esri-feature-form__input{width:100%}.esri-feature-form__input:focus{outline:2px solid var(--calcite-color-brand);outline-offset:-2px}textarea.esri-feature-form__input{resize:vertical}.esri-feature-form__input--disabled{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium)}.esri-feature-form__field-error-message{padding:7px 0;font-size:var(--calcite-font-size-sm)}.esri-feature-form__date-input-container{flex-direction:column;display:flex}.esri-feature-form__date-input-container .esri-feature-form__input{margin-bottom:3px}.esri-feature-form__date-input-container :last-child{margin-bottom:0}.esri-feature-form__input--radio-group{flex-direction:column;display:flex}.esri-feature-form__input--radio-label{align-items:center;display:flex}.esri-feature-form__input--switch{margin:7px 0}.esri-feature-form__group{margin:0 0 var(--calcite-spacing-md);background-color:inherit;margin-inline:-10px}.esri-feature-form__group--sequential{border-bottom:none;border-inline-start:3px solid #adadad4d}.esri-feature-form__group--active{border-inline-start-color:var(--calcite-color-status-info)}.esri-feature-form__text-element{color:var(--calcite-color-text-3);line-height:var(--calcite-font-line-height-relative-snug);font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-normal)}.esri-feature-form__text-element a{transition:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start inset-size,opacity,outline-color,transform var(--calcite-animation-timing) ease-in-out 0s,outline 0s,outline-offset 0s;background-color:var(--calcite-color-background);background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--calcite-color-brand-underline),var(--calcite-color-brand-underline));color:var(--calcite-color-text-link);background-position-x:0%,100%;background-position-y:min(1.5em,100%);background-repeat:no-repeat,no-repeat;background-size:0% 1px,100% 1px;border-style:none;padding:0;text-decoration:none;display:inline;position:relative}.esri-feature-form__text-element a:hover,.esri-feature-form__text-element a:focus{background-size:100% 1px,100% 1px}.esri-feature-form__text-element a:active{background-size:100% 2px,100% 2px}.esri-feature-form__text-element a.calcite--rtl{background-position:100% 100%,100% 100%}.esri-feature-form__text-element code{border:1px solid var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-3);white-space:normal;word-break:break-word;color:var(--calcite-color-text-2);font-family:var(--calcite-code-family);border-radius:var(--calcite-spacing-base);padding:.25em;font-size:85%}.esri-feature-form__text-element h1,.esri-feature-form__text-element h2,.esri-feature-form__text-element h3,.esri-feature-form__text-element h4,.esri-feature-form__text-element h5{color:var(--calcite-color-text-1);line-height:var(--calcite-font-line-height-relative-snug);font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-bold);margin-bottom:var(--calcite-spacing-xxs)}.esri-feature-form__text-element h5{font-weight:var(--calcite-font-weight-medium)}.esri-feature-form__text-element h6{color:var(--calcite-color-text-2);line-height:var(--calcite-font-line-height-relative-snug);font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);margin-bottom:var(--calcite-spacing-xxs)}.esri-feature-form__text-element p{color:var(--calcite-color-text-3);line-height:var(--calcite-font-line-height-relative-snug);font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-normal);margin-bottom:var(--calcite-spacing-xl)}.esri-feature-form__text-element strong{font-weight:var(--calcite-font-weight-bold)}:dir(rtl) .esri-feature-form__date-input-part:first-child .esri-feature-form__input{border-left:none;border-right:1px solid #adadad4d}.esri-feature-form-utility-network-association-layers{background-color:var(--calcite-color-background)}.esri-feature-form-utility-network-association-layers__header>*{margin-block-end:var(--calcite-spacing-md)}.esri-feature-form-utility-network-association-layers__header>:last-child{color:var(--calcite-color-text-3)}.esri-feature-form-utility-network-association-layers__heading-content{align-items:center;display:flex}.esri-feature-form-utility-network-association-layers__heading-content calcite-icon{margin-inline-end:var(--calcite-spacing-md)}.esri-feature-form-utility-network-association-layers__list-container{min-height:var(--calcite-spacing-xxxl);margin-bottom:var(--calcite-spacing-md)}.esri-feature-form-utility-network-association-layers__feature-observer{z-index:2;text-align:center;position:relative;bottom:20px}.esri-feature-form-utility-network-association-layers__filter-container{z-index:1;margin-bottom:var(--calcite-spacing-md);top:var(--calcite-spacing-md)}.esri-feature-form-utility-network-association-layers__filter-options-container{flex-direction:column;display:flex}.esri-feature-form-utility-network-association-layers__filter-options-header{flex-direction:row;align-items:baseline;display:flex}.esri-feature-form-utility-network-association-layers__filter-options-header span{flex-grow:1}.esri-feature-form-utility-network-association-layers__spatial-select-container{flex-direction:column;align-items:flex-end;gap:6px;display:flex}.esri-feature-form-utility-network-association-layers__spatial-select-toolbar{--calcite-action-group-border-color: transparent;border-width:var(--calcite-border-width-sm, 1px);border-radius:var(--calcite-corner-radius-round, 4px);border-style:solid;border-color:var(--calcite-color-border-3, var(--calcite-color-inverse));width:100%;min-height:min-content;overflow:hidden}.esri-feature-form-utility-network-association-layers__sticky-loading-container{z-index:2;pointer-events:none;justify-content:center;align-items:center;height:var(--calcite-spacing-xxxl);margin:0;padding:0;display:flex;position:sticky;bottom:10px}.esri-feature-form-utility-network-association-layers__loading-container{justify-content:center;width:100%;padding:var(--calcite-spacing-md) 0;display:flex}.esri-feature-form-utility-network-association-list{background-color:var(--calcite-color-foreground-1)}.esri-feature-form-utility-network-association-list__header>*{margin-block-end:var(--calcite-spacing-md)}.esri-feature-form-utility-network-association-list__header>:last-child{color:var(--calcite-color-text-3)}.esri-feature-form-utility-network-association-list__header calcite-block{margin-block-start:-18px;margin-inline:-15px}.esri-feature-form-utility-network-association-list__heading-content{align-items:center;display:flex}.esri-feature-form-utility-network-association-list__heading-content calcite-icon{margin-inline-end:var(--calcite-spacing-md)}.esri-feature-form-utility-network-association-list__list-container{flex-direction:column;min-height:var(--calcite-spacing-xxxl);display:flex}.esri-feature-form-utility-network-association-list__list-container calcite-fab{margin-block:var(--calcite-spacing-md);flex-direction:row;align-self:center;display:flex}.esri-feature-form-utility-network-association-settings{--calcite-block-padding: 0;background-color:var(--calcite-color-foreground-1);flex-direction:column;display:flex}.esri-feature-form-utility-network-association-settings calcite-block{border:1px solid var(--calcite-color-border-3);margin-block:0}.esri-feature-form-utility-network-association-settings calcite-block:first-of-type{border-radius:var(--calcite-spacing-sm) var(--calcite-spacing-sm) 0 0}.esri-feature-form-utility-network-association-settings calcite-block:last-of-type{border-top:none;border-radius:0 0 var(--calcite-spacing-sm) var(--calcite-spacing-sm);margin-block-end:var(--calcite-spacing-md)}.esri-feature-form-utility-network-association-settings calcite-block calcite-label{margin-inline:var(--calcite-spacing-md)}.esri-feature-form-utility-network-association-settings__info-container{flex-direction:column;display:flex}.esri-feature-form-utility-network-association-settings__info-container>*{margin-block-end:var(--calcite-spacing-md)}`, c = n(r);
 class d extends o {
   constructor() {
-    super(...arguments), this.widget = c(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.feature = this.widget.feature, this.formTemplate = this.widget.formTemplate, this.editType = this.viewModel.editType, this.groupDisplay = this.widget.groupDisplay, this.headingLevel = this.widget.headingLevel, this.icon = this.widget.icon, this.label = this.widget.label, this.layer = this.widget.layer, this.state = this.viewModel.state, this.timeZone = this.widget.timeZone, this.arcgisPropertyChange = t()("state"), this.arcgisReady = a(), this.arcgisSubmit = e(() => this.widget, "submit"), this.arcgisValueChange = e(() => this.widget, "value-change");
+    super(...arguments), this.widget = c(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.feature = this.widget.feature, this.formTemplate = this.widget.formTemplate, this.editType = this.viewModel.editType, this.groupDisplay = this.widget.groupDisplay, this.headingLevel = this.widget.headingLevel, this.icon = this.widget.icon, this.label = this.widget.label, this.layer = this.widget.layer, this.state = this.viewModel.state, this.timeZone = this.widget.timeZone, this.disabled = this.widget.disabled, this.hideReadOnlyNotice = this.widget.visibleElements.readOnlyNotice, this.arcgisPropertyChange = t()("state"), this.arcgisReady = a(), this.arcgisSubmit = e(() => this.widget, "submit"), this.arcgisValueChange = e(() => this.widget, "value-change");
   }
   static {
-    this.properties = { autoDestroyDisabled: 5, feature: 0, formTemplate: 0, editType: 1, groupDisplay: 1, headingLevel: 9, icon: 0, label: 1, layer: 0, referenceElement: 1, state: 32, timeZone: 1 };
+    this.properties = { autoDestroyDisabled: 5, feature: 0, formTemplate: 0, editType: 1, groupDisplay: 1, headingLevel: 9, icon: 1, label: 1, layer: 0, referenceElement: 1, state: 32, timeZone: 1, disabled: 5, hideReadOnlyNotice: 5 };
   }
   static {
     this.styles = s;

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

@@ -0,0 +1,51 @@
+/// <reference path="../../index.d.ts" />
+import type Graphic from "@arcgis/core/Graphic.js";
+import type FeatureLayer from "@arcgis/core/layers/FeatureLayer";
+import type SubtypeGroupLayer from "@arcgis/core/layers/SubtypeGroupLayer";
+import type SubtypeSublayer from "@arcgis/core/layers/support/SubtypeSublayer";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { GeometryUnion } from "@arcgis/core/geometry/types";
+import type { SymbolUnion } from "@arcgis/core/symbols/types";
+
+/**
+ * The Feature Image component generates a feature swatch representing a
+ * Feature.
+ * The component can be configured to only generate a swatch, when the element
+ * is within the visible scope of the page.
+ *
+ * @since 5.0
+ * @internal
+ */
+export abstract class ArcgisFeatureImage extends LitElement {
+  /** Specifies a symbol. In this mode, the swatch will simply be this symbols preview. */
+  accessor actualSymbol: SymbolUnion | undefined;
+  /** The graphic to generate the swatch for. */
+  accessor graphic: Graphic | {
+      geometry?: GeometryUnion;
+      attributes: Record<string, unknown>;
+      layer: FeatureLayer;
+  } | undefined;
+  /**
+   * The generated thumbnail height
+   *
+   * @default 16
+   */
+  accessor heightInPixels: number;
+  /** The layer to which the graphic belongs. This will be used to get the symbol for the feature (using the layer's renderer) */
+  accessor layer: FeatureLayer | SubtypeGroupLayer | SubtypeSublayer | undefined;
+  accessor minWidth: number | undefined;
+  /** Symbol to use, if the layer is a Table */
+  accessor tableSymbolIcon: SymbolUnion | undefined;
+  /**
+   * Specifies whether to use the shape of the feature. If set to false, then a simple symbol swatch will be used.
+   *
+   * @default false
+   */
+  accessor useTrueShape: boolean;
+  /**
+   * The generated thumbnail width
+   *
+   * @default 16
+   */
+  accessor widthInPixels: number;
+}