@arcgis/common-components 5.2.0-next.102 → 5.2.0-next.104

package/dist/cdn/assets/field-pick-list/t9n/messages.en.json

@@ -1 +1 @@
-{"ok":"Replace","done":"Done","cancel":"Cancel","back":"Back","header":"Replace field","headerSelect":"Select fields","filter":"Search fields","info":"Info","edit":"Edit","delete":"Delete","displayName":"Display name","type":"Type","default":"Default","fieldName":"Field name","sort":"Sort","selectAll":"Select all","deselectAll":"Deselect all","noMatches":"No matches found."}
+{"ok":"Replace","done":"Done","cancel":"Cancel","back":"Back","header":"Replace field","headerSelect":"Select fields","filter":"Search fields","info":"Info","edit":"Edit","delete":"Delete","displayName":"Display name","type":"Type","default":"Default","fieldName":"Field name","sort":"Sort","selectAll":"Select all","deselectAll":"Deselect all","subFieldsSelected":"${count} selected","noMatches":"No matches found."}

package/dist/cdn/index.js

@@ -1,2 +1,2 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import{I as a,x as e}from"./KMEK46VM.js";var i=e(a,{"arcgis-ckeditor5":[()=>import("./DGU6DCZP.js"),"canResizeVertically,currentLanguage,customConfig,customExpressionCheck:,editorType,groupFieldsAndExpressions,intlExpressionsGroupHeading,intlFieldsGroupHeading,intlTextPlaceHolder,mentionFields:,readOnly,textData;getData,setFocus"],"arcgis-ckeditor5-popover":[()=>import("./NH4LEYDW.js"),"guid,intlCancel,intlLabel,intlOk,refElement:;reposition"],"arcgis-color-input":[()=>import("./56FZY46A.js"),"_messages:,clearable,color,compact,disabled,hideRecentColors,messageOverrides:,placement,popoverProps:,showTransparency,storageId;close,setFocus;isOpen"],"arcgis-coordinate-system-picker":[()=>import("./EWNQZP7X.js"),"_messages:,autoFilterToDefault,defaultWkid,filterEnabled,hideCategories:,value:;getSRDescription"],"arcgis-coordinate-system-picker-tree":[()=>import("./AD4MYZ4B.js"),"data:,value"],"arcgis-field-info":[()=>import("./VILUEVNS.js"),"_messages:,fieldName,hideAlias,hideNumericFormat,hideStatistics,layer:,view:;refresh"],"arcgis-field-pick-list":[()=>import("./7HJ55YSN.js"),"_messages:,customExpressionCheck:,expressionsGroupHeading,fields:,fieldsGroupHeading,filterNoResultsText,filterPlaceholderText,groupFieldsAndExpressions,heading,hideCancel,hideSort,layer:,listOnly,mapView:,multiple,okBtnText,popoverProps:,selectedFields:,showCancel,showDescription,showFieldInfo,showFieldName,showFieldTypeIcon,showFilterLength,showSelectionAll,showSort,sortBy,view:;reposition,setDisabled,setFocus"],"arcgis-histogram":[()=>import("./HL3WXOVS.js"),"_messages:,average,bins:,colorBlendingEnabled,colorStops:,dataLines:,icon,label,labelFormatter:,layout,max,messageOverrides:,min,standardDeviation,standardDeviationCount"],"arcgis-label-input":[()=>import("./2PEF5AVV.js"),"alignment,editing,labelFormatter:,readOnly,value;edit;getLabelBoundingClientRect"],"arcgis-picker-input":[()=>import("./MI3POVS3.js"),"disabled,heading,iconEnd,intlDone,label,popoverProps:;close,setFocus"],"arcgis-ramp-color":[()=>import("./QSAZAXZ3.js"),"layout,max,min,stops:"],"arcgis-ramp-color-break":[()=>import("./TXXMMPA6.js"),"layout,max,min,stops:"],"arcgis-ramp-opacity":[()=>import("./7RMMYGBW.js"),"fillColor,layout,max,min,stops:"],"arcgis-slider":[()=>import("./X3GTWZD5.js"),"activeValue:,allowValuesOverlap,autoDestroyDisabled,disabled,fillPlacement,fullRangeMax,fullRangeMin,keyboardLargeStep,labelFormatter:,layout,max,messageOverrides:,messages:,min,mirrored,popoverDisplay,popoverLabel,popoverPlacement,precision,rangeLabelsEditingEnabled,rangeLabelsPlacement,segmentsDraggingDisabled,showRangeLabels,steps,valueLabelsDisplay,valueLabelsEditingEnabled,valueLabelsPlacement,values;destroy"],"arcgis-slider-field":[()=>import("./BJHMVEBH.js"),"activeValue:,disabled,fieldType,fillPlacement,label,labelFormatter:,layout,max,messageOverrides:,messages:,min,mirrored,popoverLabel,rangeLabelsEditingEnabled,rangeLabelsPlacement,showRangeLabels,valueLabelsDisplay,valueLabelsEditingEnabled,valueLabelsPlacement,values,valuesAsDateOnly:,valuesAsFieldType:,valuesAsNumbers:,valuesAsTimeOnly:,valuesAsTimestampOffset:"],"arcgis-slider-histogram-range":[()=>import("./DJELJSO3.js"),"activeValue:,average,bins:,dataLines:,excludedBarColor:,fieldType,fillPlacement,includedBarColor:,label,labelFormatter:,layout,max,min,rangeLabelsEditingEnabled,rangeLabelsPlacement,showRangeLabels,standardDeviation,standardDeviationCount,valueLabelsDisplay,valueLabelsEditingEnabled,values;destroy,generateWhereClause,updateFromHistogramResult"],"arcgis-slider-input":[()=>import("./E6NBHGTX.js"),"disabled,flipLabels,label,max,min,scale,step,unitsLabel,value,withSteppers"],"arcgis-ticks":[()=>import("./ODCJ6CWI.js"),"interactive,interpolationExponent,labelFormatter:,labelPlacement,layout,max,min,mirrored,mode,showBaseline,showLabels,values"],"arcgis-toolbar":[()=>import("./5PTU24YF.js"),"barElement:,layout,relativePosition,scale,toolbarKind,tooltipAppearance"],"arcgis-toolbar-action":[()=>import("./Y42WUDYP.js"),"actionElement:,active,appearance,disabled,icon,iconFlipRtl,indicator,kind,labelText,loading,textEnabled,tooltipText;;measure,proxiedRender"],"arcgis-toolbar-group":[()=>import("./3RMCUQWC.js"),"preferEndSlot,priority;;measure,proxiedRender"],"arcgis-toolbar-item":[()=>import("./6PGCMA3Z.js"),"actionElement:,active,disabled,icon,iconFlipRtl,labelText,lastActivated:,loading,tooltipText;;measure,proxiedRender"],"arcgis-toolbar-more-button":[()=>import("./77PLMLQX.js"),"menuAppearance,overflowActionLabel,priority;;measure,proxiedRender"],"arcgis-toolbar-split-button":[()=>import("./RP5JQ3O2.js"),"menuAppearance,overflowActionLabel,priority;;measure,proxiedRender"],"arcgis-unique-values-list":[()=>import("./3NPK3XHQ.js"),"_messages:,fieldName,layer:,maxHeight,multiple,numberFormatOptions:,partialUniqueValues,selectedValues:,showFilterLength,sortBy,uniqueValues:,view:,visualizationSource;getUniqueValues,setFocus"],"arcgis-value-picker":[()=>import("./LSIDKRJW.js"),"autoDestroyDisabled,disabled,hideNextButton,hidePlayButton,hidePreviousButton,icon,label,layout,loop,messages:,playRate,state:;destroy;next,pause,play,previous"],"arcgis-value-picker-collection":[()=>import("./BEODRJOB.js"),"autoDestroyDisabled,canNext,canPlay,canPrevious,currentValue:,items:;destroy;reset,step"],"arcgis-value-picker-combobox":[()=>import("./ZLUCRCS4.js"),"autoDestroyDisabled,canNext,canPlay,canPrevious,currentValue:,disabled,items:,messages:;destroy;reset,step"],"arcgis-value-picker-label":[()=>import("./L5FYKALB.js"),"autoDestroyDisabled,canNext,canPlay,canPrevious,currentValue:,items:;destroy;reset,step"],"arcgis-value-picker-slider":[()=>import("./KCTVPWKZ.js"),"autoDestroyDisabled,canNext,canPlay,canPrevious,currentValue,disabled,labelFormatter:,labels:,layout,majorTicks:,max,min,minorTicks:,mirrored,steps:;destroy;reset,step"]});i({resourcesUrl:import.meta.url});var r=new CSSStyleSheet;r.replaceSync("@layer{:not([hydrated]):is(arcgis-ckeditor5,arcgis-ckeditor5-popover,arcgis-color-input,arcgis-coordinate-system-picker,arcgis-coordinate-system-picker-tree,arcgis-field-info,arcgis-field-pick-list,arcgis-histogram,arcgis-label-input,arcgis-picker-input,arcgis-ramp-color,arcgis-ramp-color-break,arcgis-ramp-opacity,arcgis-slider,arcgis-slider-field,arcgis-slider-histogram-range,arcgis-slider-input,arcgis-ticks,arcgis-toolbar,arcgis-toolbar-action,arcgis-toolbar-group,arcgis-toolbar-item,arcgis-toolbar-more-button,arcgis-toolbar-split-button,arcgis-unique-values-list,arcgis-value-picker,arcgis-value-picker-collection,arcgis-value-picker-combobox,arcgis-value-picker-label,arcgis-value-picker-slider){visibility:hidden}}");document.adoptedStyleSheets=[...document.adoptedStyleSheets,r];window.$arcgis||Object.defineProperty(window,"$arcgis",{configurable:!1,enumerable:!0,writable:!1,value:{}}),((a,r)=>{a.t=(c,...x)=>Promise.all(x.map(x=>x.then?x:(!a?.forceESM&&a?.import||(x=>import(x+".js").then(m=>m.default??m)))("@arcgis/core/"+x))).then(c);r.p=a.t(([m])=>{r.t=m.trackAccess;r.o=m.createObservable;r.c=m.createTrackingTarget;r.r=m.runTracked},"applications/Components/reactiveUtils")})($arcgis,a)
+import{O as a,y as e}from"./WJZHHIWO.js";var i=e(a,{"arcgis-ckeditor5":[()=>import("./BQCBHDME.js"),"canResizeVertically,currentLanguage,customConfig,customExpressionCheck:,editorType,groupFieldsAndExpressions,intlExpressionsGroupHeading,intlFieldsGroupHeading,intlTextPlaceHolder,mentionFields:,readOnly,textData;getData,setFocus"],"arcgis-ckeditor5-popover":[()=>import("./AY6QNI6M.js"),"guid,intlCancel,intlLabel,intlOk,refElement:;reposition"],"arcgis-color-input":[()=>import("./U4P7UKY3.js"),"_messages:,clearable,color,compact,disabled,hideRecentColors,messageOverrides:,placement,popoverProps:,showTransparency,storageId;close,setFocus;isOpen"],"arcgis-coordinate-system-picker":[()=>import("./ZQJCCG4K.js"),"_messages:,autoFilterToDefault,defaultWkid,filterEnabled,hideCategories:,value:;getSRDescription"],"arcgis-coordinate-system-picker-tree":[()=>import("./RYAF2CEQ.js"),"data:,value"],"arcgis-field-info":[()=>import("./4O3NDSCB.js"),"_messages:,fieldName,hideAlias,hideNumericFormat,hideStatistics,layer:,view:;refresh"],"arcgis-field-pick-list":[()=>import("./F55DGSXH.js"),"_messages:,customExpressionCheck:,expressionsGroupHeading,fields:,fieldsGroupHeading,filterNoResultsText,filterPlaceholderText,groupFieldsAndExpressions,heading,hideCancel,hideSort,layer:,listOnly,mapView:,multiple,okBtnText,popoverProps:,selectedFields:,showCancel,showDescription,showFieldInfo,showFieldName,showFieldTypeIcon,showFilterLength,showSelectionAll,showSort,sortBy,view:;reposition,setDisabled,setFocus"],"arcgis-histogram":[()=>import("./VL3L3YNC.js"),"_messages:,average,bins:,colorBlendingEnabled,colorStops:,dataLines:,icon,label,labelFormatter:,layout,max,messageOverrides:,min,standardDeviation,standardDeviationCount"],"arcgis-label-input":[()=>import("./76AEYDPR.js"),"alignment,editing,labelFormatter:,readOnly,value;edit;getLabelBoundingClientRect"],"arcgis-picker-input":[()=>import("./4DL4CQMD.js"),"disabled,heading,iconEnd,intlDone,label,popoverProps:;close,setFocus"],"arcgis-ramp-color":[()=>import("./LLKF5IUE.js"),"layout,max,min,stops:"],"arcgis-ramp-color-break":[()=>import("./7XSCHHGO.js"),"layout,max,min,stops:"],"arcgis-ramp-opacity":[()=>import("./7CY3QEZW.js"),"fillColor,layout,max,min,stops:"],"arcgis-slider":[()=>import("./SWYNNHSD.js"),"activeValue:,allowValuesOverlap,autoDestroyDisabled,disabled,fillPlacement,fullRangeMax,fullRangeMin,keyboardLargeStep,labelFormatter:,layout,max,messageOverrides:,messages:,min,mirrored,popoverDisplay,popoverLabel,popoverPlacement,precision,rangeLabelsEditingEnabled,rangeLabelsPlacement,segmentsDraggingDisabled,showRangeLabels,steps,valueLabelsDisplay,valueLabelsEditingEnabled,valueLabelsPlacement,values;destroy"],"arcgis-slider-field":[()=>import("./M7RV4JOU.js"),"activeValue:,disabled,fieldType,fillPlacement,label,labelFormatter:,layout,max,messageOverrides:,messages:,min,mirrored,popoverLabel,rangeLabelsEditingEnabled,rangeLabelsPlacement,showRangeLabels,valueLabelsDisplay,valueLabelsEditingEnabled,valueLabelsPlacement,values,valuesAsDateOnly:,valuesAsFieldType:,valuesAsNumbers:,valuesAsTimeOnly:,valuesAsTimestampOffset:"],"arcgis-slider-histogram-range":[()=>import("./FQRP2RUU.js"),"activeValue:,average,bins:,dataLines:,excludedBarColor:,fieldType,fillPlacement,includedBarColor:,label,labelFormatter:,layout,max,min,rangeLabelsEditingEnabled,rangeLabelsPlacement,showRangeLabels,standardDeviation,standardDeviationCount,valueLabelsDisplay,valueLabelsEditingEnabled,values;destroy,generateWhereClause,updateFromHistogramResult"],"arcgis-slider-input":[()=>import("./IXISGCNR.js"),"disabled,flipLabels,label,max,min,scale,step,unitsLabel,value,withSteppers"],"arcgis-ticks":[()=>import("./CEXP5DLE.js"),"interactive,interpolationExponent,labelFormatter:,labelPlacement,layout,max,min,mirrored,mode,showBaseline,showLabels,values"],"arcgis-toolbar":[()=>import("./NANUDTUO.js"),"barElement:,layout,relativePosition,scale,toolbarKind,tooltipAppearance"],"arcgis-toolbar-action":[()=>import("./EO2W4XX2.js"),"actionElement:,active,appearance,disabled,icon,iconFlipRtl,indicator,kind,labelText,loading,textEnabled,tooltipText;;measure,proxiedRender"],"arcgis-toolbar-group":[()=>import("./NUJU53OQ.js"),"preferEndSlot,priority;;measure,proxiedRender"],"arcgis-toolbar-item":[()=>import("./EESAFFL6.js"),"actionElement:,active,disabled,icon,iconFlipRtl,labelText,lastActivated:,loading,tooltipText;;measure,proxiedRender"],"arcgis-toolbar-more-button":[()=>import("./FQKMFVEL.js"),"menuAppearance,overflowActionLabel,priority;;measure,proxiedRender"],"arcgis-toolbar-split-button":[()=>import("./Q7X4435G.js"),"menuAppearance,overflowActionLabel,priority;;measure,proxiedRender"],"arcgis-unique-values-list":[()=>import("./JH47GD45.js"),"_messages:,fieldName,layer:,maxHeight,multiple,numberFormatOptions:,partialUniqueValues,selectedValues:,showFilterLength,sortBy,uniqueValues:,view:,visualizationSource;getUniqueValues,setFocus"],"arcgis-value-picker":[()=>import("./EQ7Q27AM.js"),"autoDestroyDisabled,disabled,hideNextButton,hidePlayButton,hidePreviousButton,icon,label,layout,loop,messages:,playRate,state:;destroy;next,pause,play,previous"],"arcgis-value-picker-collection":[()=>import("./7VETJO2V.js"),"autoDestroyDisabled,canNext,canPlay,canPrevious,currentValue:,items:;destroy;reset,step"],"arcgis-value-picker-combobox":[()=>import("./MYCSWWIQ.js"),"autoDestroyDisabled,canNext,canPlay,canPrevious,currentValue:,disabled,items:,messages:;destroy;reset,step"],"arcgis-value-picker-label":[()=>import("./FRL73WUI.js"),"autoDestroyDisabled,canNext,canPlay,canPrevious,currentValue:,items:;destroy;reset,step"],"arcgis-value-picker-slider":[()=>import("./3TIDAJES.js"),"autoDestroyDisabled,canNext,canPlay,canPrevious,currentValue,disabled,labelFormatter:,labels:,layout,majorTicks:,max,min,minorTicks:,mirrored,steps:;destroy;reset,step"]});i({resourcesUrl:import.meta.url});var r=new CSSStyleSheet;r.replaceSync("@layer{:not([hydrated]):is(arcgis-ckeditor5,arcgis-ckeditor5-popover,arcgis-color-input,arcgis-coordinate-system-picker,arcgis-coordinate-system-picker-tree,arcgis-field-info,arcgis-field-pick-list,arcgis-histogram,arcgis-label-input,arcgis-picker-input,arcgis-ramp-color,arcgis-ramp-color-break,arcgis-ramp-opacity,arcgis-slider,arcgis-slider-field,arcgis-slider-histogram-range,arcgis-slider-input,arcgis-ticks,arcgis-toolbar,arcgis-toolbar-action,arcgis-toolbar-group,arcgis-toolbar-item,arcgis-toolbar-more-button,arcgis-toolbar-split-button,arcgis-unique-values-list,arcgis-value-picker,arcgis-value-picker-collection,arcgis-value-picker-combobox,arcgis-value-picker-label,arcgis-value-picker-slider){visibility:hidden}}");document.adoptedStyleSheets=[...document.adoptedStyleSheets,r];window.$arcgis||Object.defineProperty(window,"$arcgis",{configurable:!1,enumerable:!0,writable:!1,value:{}}),((a,r)=>{a.t=(c,...x)=>Promise.all(x.map(x=>x.then?x:(!a?.forceESM&&a?.import||(x=>import(x+".js").then(m=>m.default??m)))("@arcgis/core/"+x))).then(c);r.p=a.t(([m])=>{r.t=m.trackAccess;r.o=m.createObservable;r.c=m.createTrackingTarget;r.r=m.runTracked},"applications/Components/reactiveUtils")})($arcgis,a)

package/dist/components/arcgis-field-pick-list/customElement.d.ts

@@ -35,6 +35,7 @@ export abstract class ArcgisFieldPickList extends LitElement {
       sort: string;
       selectAll: string;
       deselectAll: string;
+      subFieldsSelected: string;
       noMatches: string;
   } & T9nMeta<{
       ok: string;
@@ -54,6 +55,7 @@ export abstract class ArcgisFieldPickList extends LitElement {
       sort: string;
       selectAll: string;
       deselectAll: string;
+      subFieldsSelected: string;
       noMatches: string;
   }>;
   /** Custom function to distinguish expressions from fields. */
@@ -87,7 +89,7 @@ export abstract class ArcgisFieldPickList extends LitElement {
    */
   accessor hideCancel: boolean;
   /**
-   * If true, hides the sort menu button.
+   * If true, hides the top-level sort menu button. Sorting applies directly to any sub-fields.
    *
    * @default false
    */
@@ -95,7 +97,7 @@ export abstract class ArcgisFieldPickList extends LitElement {
   /** Layer instance. */
   accessor layer: FieldPickListLayer | undefined;
   /**
-   * If true, renders without a popover.
+   * If true, renders without a popover (when true, groups of sub-fields are not supported).
    *
    * @default false
    */
@@ -145,13 +147,14 @@ export abstract class ArcgisFieldPickList extends LitElement {
    */
   accessor showFieldTypeIcon: boolean;
   /**
-   * If true, displays the filter option based on the number of fields.
+   * The number of selectable fields at which to display the top-level filter option. Sub-fields are included.
    *
    * @default 10
    */
   accessor showFilterLength: number;
   /**
-   * If true, displays a 'Select All' button on top of the list. Valid only if multiple is set to true.
+   * If true, displays a 'Select All' button at the top level of the list. Selection applies directly to any sub-fields.
+   * Valid only if multiple is set to true.
    *
    * @default false
    */
@@ -162,7 +165,7 @@ export abstract class ArcgisFieldPickList extends LitElement {
    */
   accessor showSort: boolean;
   /**
-   * The initial sort order.
+   * The initial sort order. Sort order applies directly to any sub-fields.
    *
    * @default "default"
    */

package/dist/components/arcgis-field-pick-list/customElement.js

@@ -1,48 +1,83 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as w } from "../../chunks/runtime.js";
-import { keyed as u } from "lit/directives/keyed.js";
-import { LitElement as y, createEvent as a, renderElement as $, nothing as h, safeStyleMap as f, safeClassMap as v } from "@arcgis/lumina";
-import { createRef as r, ref as c } from "lit/directives/ref.js";
-import { html as l, css as C } from "lit";
-import { Task as S } from "@lit/task";
-import { log as g, composeMissingPropertyMessage as x } from "@arcgis/toolkit/log";
-import { F } from "../../chunks/internal-types.js";
-import { i as b } from "../../chunks/general.js";
-import { u as k } from "../../chunks/useT9n.js";
-const n = /* @__PURE__ */ new Map();
-n.set("oid", "key");
-n.set("guid", "key");
-n.set("global-id", "key");
-n.set("blob", "binary");
-n.set("integer", "integer");
-n.set("small-integer", "integer");
-n.set("big-integer", "integer");
-n.set("single", "number");
-n.set("double", "number");
-n.set("long", "number");
-n.set("number", "number");
-n.set("date", "date-time");
-n.set("date-only", "calendar");
-n.set("time-only", "clock");
-n.set("timestamp-offset", "time-zone");
-n.set("string", "string");
-const B = ({ fieldType: m }) => l`<calcite-icon scale=s .icon=${n.get(m)}></calcite-icon>`, L = C`.panel{min-height:250px}.content{max-height:50vh}.field-icons{display:flex;align-items:center;padding:0 var(--calcite-space-sm)}.selection-button-div{padding:var(--calcite-space-2xs) var(--calcite-space-sm-plus)}.no-match-text{padding:var(--calcite-space-md)}.footer{width:100%}.add-cancel-buttons{display:flex;align-content:space-between}`;
-class I extends y {
+import { c as b } from "../../chunks/runtime.js";
+import { keyed as v } from "lit/directives/keyed.js";
+import { repeat as y } from "lit/directives/repeat.js";
+import { LitElement as I, createEvent as h, renderElement as S, nothing as m, safeStyleMap as $, safeClassMap as L } from "@arcgis/lumina";
+import { createRef as p, ref as d } from "lit/directives/ref.js";
+import { html as o, css as x } from "lit";
+import { Task as T } from "@lit/task";
+import { log as w, composeMissingPropertyMessage as k } from "@arcgis/toolkit/log";
+import { F as C } from "../../chunks/internal-types.js";
+import { i as B } from "../../chunks/general.js";
+import { u as E } from "../../chunks/useT9n.js";
+const r = /* @__PURE__ */ new Map();
+r.set("oid", "key");
+r.set("guid", "key");
+r.set("global-id", "key");
+r.set("blob", "binary");
+r.set("integer", "integer");
+r.set("small-integer", "integer");
+r.set("big-integer", "integer");
+r.set("single", "number");
+r.set("double", "number");
+r.set("long", "number");
+r.set("number", "number");
+r.set("date", "date-time");
+r.set("date-only", "calendar");
+r.set("time-only", "clock");
+r.set("timestamp-offset", "time-zone");
+r.set("string", "string");
+const N = ({ fieldType: n }) => o`<calcite-icon scale=s .icon=${r.get(n)}></calcite-icon>`;
+function P(n) {
+  return !!n.length && "fields" in n[0];
+}
+function u(n) {
+  return !!n.length && "subFieldInfos" in n[0];
+}
+function _(n) {
+  return n.filter((e) => u(e.fields));
+}
+function D(n) {
+  return n.flatMap((e) => e.fields);
+}
+function O(n) {
+  return n.flatMap((e) => u(e.fields) ? [] : e.fields);
+}
+function f(n) {
+  return n.flatMap(
+    (e) => u(e.fields) ? e.fields.flatMap((t) => t.subFieldInfos) : e.fields
+  );
+}
+function A(n, e) {
+  return n.flatMap((t) => u(t.fields) ? t.fields.flatMap(
+    (i) => i.subFieldInfos.filter((s) => g(s, e, !0))
+  ) : t.fields.filter((i) => F(i, e)));
+}
+function F(n, e) {
+  return e ? "subFieldInfos" in n ? g(n, e) || n.subFieldInfos.some((t) => g(t, e, !0)) : g(n, e) : !0;
+}
+function g(n, e, t = !1) {
+  return [t ? n.name.split("/").pop() : n.name, n.alias, n.description].some(
+    (s) => s?.toLocaleLowerCase().includes(e.toLocaleLowerCase())
+  );
+}
+const M = x`.panel{min-height:250px}.list-wrapper{max-height:50vh;overflow:auto}.list-controls{display:grid;grid-template-columns:1fr auto}.field-icons{display:flex;align-items:center;padding:0 var(--calcite-space-sm)}.selection-button-div{padding:var(--calcite-space-2xs) var(--calcite-space-sm-plus)}.no-match-text{padding:var(--calcite-space-md)}.footer{width:100%}.add-cancel-buttons{display:flex;align-content:space-between}`;
+class H extends I {
   constructor() {
-    super(...arguments), this._messages = k({ blocking: !0 }), this.popoverNode = r(), this.listNode = r(), this.flowElement = r(), this.panelElement = r(), this.dropdownNode = r(), this.fieldInfoFlowItemEl = r(), this.allLists = [], this.filterText = "", this.panelCutOffHeight = 0, this.initialized = !1, this._propWatcherTask = new S(this, {
+    super(...arguments), this._messages = E({ blocking: !0 }), this.popoverNode = p(), this.listWrapper = p(), this.listNode = p(), this.flowElement = p(), this.panelElement = p(), this.dropdownNode = p(), this.fieldInfoFlowItemEl = p(), this.allLists = [], this.filterText = "", this.panelCutOffHeight = 0, this.initialized = !1, this._propWatcherTask = new T(this, {
       task: async ([e]) => {
-        if (!this.listOnly && !b(e?.refElement))
-          throw g("error", this, x("popoverProps")), new Error();
+        if (!this.listOnly && !B(e?.refElement))
+          throw w("error", this, k("popoverProps")), new Error();
         this._propWatcherTask.autoRun = !1;
       },
       args: () => [this.popoverProps]
-    }), this.fields = [], this.selectedFields = [], this.listOnly = !1, this.showFieldInfo = !1, this.showFieldTypeIcon = !1, this.showFieldName = !1, this.showDescription = !1, this.showSelectionAll = !1, this.showCancel = !0, this.hideCancel = !1, this.showSort = !0, this.hideSort = !1, this.showFilterLength = 10, this.multiple = !1, this.sortBy = "default", this.groupFieldsAndExpressions = !1, this.arcgisChange = a(), this.arcgisClose = a(), this.arcgisDeleteField = a(), this.arcgisEditField = a(), this.arcgisFieldPickListChange = a(), this.arcgisFieldPickListDismissed = a(), this.arcgisFieldPickListSortByChange = a(), this.arcgisSortByChange = a();
+    }), this.fields = [], this.selectedFields = [], this.listOnly = !1, this.showFieldInfo = !1, this.showFieldTypeIcon = !1, this.showFieldName = !1, this.showDescription = !1, this.showSelectionAll = !1, this.showCancel = !0, this.hideCancel = !1, this.showSort = !0, this.hideSort = !1, this.showFilterLength = 10, this.multiple = !1, this.sortBy = "default", this.groupFieldsAndExpressions = !1, this.arcgisChange = h(), this.arcgisClose = h(), this.arcgisDeleteField = h(), this.arcgisEditField = h(), this.arcgisFieldPickListChange = h(), this.arcgisFieldPickListDismissed = h(), this.arcgisFieldPickListSortByChange = h(), this.arcgisSortByChange = h();
   }
   static {
     this.properties = { lastSortBy: 16, filterFields: 16, mapView: 0, view: 0, layer: 0, fields: 0, selectedFields: 0, listOnly: 5, popoverProps: 0, showFieldInfo: 5, showFieldTypeIcon: 5, showFieldName: 5, showDescription: 5, showSelectionAll: 5, showCancel: 5, hideCancel: 5, showSort: 5, hideSort: 5, showFilterLength: 9, multiple: 5, heading: 1, okBtnText: 1, filterPlaceholderText: 1, filterNoResultsText: 1, sortBy: 1, groupFieldsAndExpressions: 5, fieldsGroupHeading: 1, expressionsGroupHeading: 1, customExpressionCheck: 0 };
   }
   static {
-    this.styles = L;
+    this.styles = M;
   }
   async reposition() {
     await this.popoverNode.value?.reposition();
@@ -56,7 +91,7 @@ class I extends y {
     }), 1);
   }
   load() {
-    !this.view && this.mapView && (this.view = this.mapView), !this.showCancel && !this.hideCancel && (this.hideCancel = !0), !this.showSort && !this.hideSort && (this.hideSort = !0), this.listOnly && this.showFieldInfo && (this.showFieldInfo = !1, g("info", this, "showFieldInfo is not supported if listOnly is true.")), !this.multiple && this.selectedFields.length > 1 && (this.selectedFields = [this.selectedFields[0]]), this.lastSortBy = this.sortBy ?? this.lastSortBy, this.updateGroupedLists(), this.initialized = !0;
+    !this.view && this.mapView && (this.view = this.mapView), !this.showCancel && !this.hideCancel && (this.hideCancel = !0), !this.showSort && !this.hideSort && (this.hideSort = !0), this.listOnly && this.showFieldInfo && (this.showFieldInfo = !1, w("info", this, "showFieldInfo is not supported if listOnly is true.")), !this.multiple && this.selectedFields.length > 1 && (this.selectedFields = [this.selectedFields[0]]), this.lastSortBy = this.sortBy ?? this.lastSortBy, this.updateGroupedLists(), this.initialized = !0;
   }
   willUpdate(e) {
     this.initialized && (e.has("fields") || e.has("sortBy") || e.has("lastSortBy") || e.has("customExpressionCheck")) && (e.has("sortBy") && (this.lastSortBy = this.sortBy ?? this.lastSortBy), this.updateGroupedLists());
@@ -81,21 +116,21 @@ class I extends y {
       const e = this.panelElement.value?.getBoundingClientRect();
       if (e && e.bottom > window.innerHeight) {
         this.panelCutOffHeight = e.height - (e.bottom - window.innerHeight) - 5;
-        const t = this.listNode.value?.getBoundingClientRect();
-        t && (this.listNode.value.style.maxHeight = `${t.height - (e.bottom - window.innerHeight) - 5}px`);
+        const t = this.listWrapper.value?.getBoundingClientRect();
+        t && (this.listWrapper.value.style.maxHeight = `${t.height - (e.bottom - window.innerHeight) - 5}px`);
       }
     }
   }
   getSortedList(e) {
     let t = [...e];
-    const s = t.filter((i) => i.type === "none");
-    return t = t.filter((i) => i.type !== "none"), this.lastSortBy === "display" ? t.sort((i, o) => i.alias.localeCompare(o.alias)) : this.lastSortBy === "field" ? t.sort((i, o) => i.name.localeCompare(o.name)) : this.lastSortBy === "type" && t.sort((i, o) => i.type.localeCompare(o.type)), t = t.concat(s), t;
+    const i = t.filter((s) => s.type === "none");
+    return t = t.filter((s) => s.type !== "none"), this.lastSortBy === "display" ? t.sort((s, l) => s.alias.localeCompare(l.alias)) : this.lastSortBy === "field" ? t.sort((s, l) => s.name.localeCompare(l.name)) : this.lastSortBy === "type" && t.sort((s, l) => s.type.localeCompare(l.type)), t = t.concat(i), t;
   }
   isExpression(e) {
-    return this.customExpressionCheck ? this.customExpressionCheck(e) : e.name.includes(F.expression);
+    return this.customExpressionCheck ? this.customExpressionCheck(e) : e.name.includes(C.expression);
   }
   canDeselectAll() {
-    const e = this.getAllFields();
+    const e = f(this.allLists);
     return this.filterFields?.length ? this.filterContainsAll() : this.selectedFields.length === e.length;
   }
   filterContainsAll() {
@@ -103,47 +138,75 @@ class I extends y {
   }
   showFieldInfoCheck(e) {
     const { layer: t } = this;
-    return this.showFieldInfo ? !(!t || this.isExpression(e) || e.name.includes(F.relationship) || e.type === "none") : !1;
+    return this.showFieldInfo ? !(!t || this.isExpression(e) || e.name.includes(C.relationship) || e.type === "none") : !1;
   }
   updateGroupedLists() {
-    if (!this.fields)
-      return;
-    if (this.allLists = [], this.usingCustomGroups())
-      for (const t of this.fields)
-        this.allLists.push({
-          title: t.title,
-          fields: [...this.getSortedList(t.fields)]
-        });
-    else
-      this.allLists = this.groupFieldsAndExpressions ? [
-        {
-          title: this.expressionsGroupHeading,
-          fields: [...this.getSortedList(this.fields)].filter((t) => this.isExpression(t))
-        },
-        {
-          title: this.fieldsGroupHeading,
-          fields: [...this.getSortedList(this.fields)].filter((t) => !this.isExpression(t))
-        }
-      ] : [
-        {
-          title: void 0,
-          fields: [...this.getSortedList(this.fields)]
+    if (this.fields)
+      if (this.allLists = [], P(this.fields))
+        for (const e of this.fields) {
+          if (this.listOnly && u(e.fields)) {
+            w("error", this, "subFieldInfos are not supported if listOnly is true.");
+            continue;
+          }
+          this.allLists.push({
+            title: e.title,
+            fields: this.getSortedGroupFields(e.fields)
+          });
         }
-      ];
+      else
+        this.allLists = this.groupFieldsAndExpressions ? [
+          {
+            title: this.expressionsGroupHeading,
+            fields: [...this.getSortedList(this.fields)].filter((e) => this.isExpression(e))
+          },
+          {
+            title: this.fieldsGroupHeading,
+            fields: [...this.getSortedList(this.fields)].filter((e) => !this.isExpression(e))
+          }
+        ] : [
+          {
+            title: void 0,
+            fields: this.getSortedList(this.fields)
+          }
+        ];
+  }
+  getSortedGroupFields(e) {
+    return u(e) ? this.getSortedList(e).map((t) => ({
+      ...t,
+      subFieldInfos: this.getSortedList(t.subFieldInfos).map((i) => ({
+        ...i,
+        // ensure uniqueness
+        name: `${t.name}/${i.name}`
+      }))
+    })) : this.getSortedList(e);
   }
   addFieldInfoFlowItem(e, t) {
-    const s = this.flowElement.value, i = $(l`<calcite-flow-item selected .heading=${e.alias ?? e.name} .description=${e.name} class="panel" style=${f(this.panelCutOffHeight > 0 ? `max-height: ${this.panelCutOffHeight}px` : "max-height: 50vh")} @calciteFlowItemBack=${(o) => {
-      o.currentTarget.remove(), this.fieldInfoFlowItemEl.value.selected = !1, this.panelElement.value.selected = !0, setTimeout(() => {
+    const i = this.flowElement.value, s = S(o`<calcite-flow-item selected .heading=${e.alias ?? e.name} .description=${e.name} class="panel" style=${$(this.panelCutOffHeight > 0 ? `max-height: ${this.panelCutOffHeight}px` : "max-height: 50vh")} @calciteFlowItemBack=${(l) => {
+      l.currentTarget.remove(), this.fieldInfoFlowItemEl.value.selected = !1, this.panelElement.value.selected = !0, setTimeout(() => {
         t.setFocus();
       }, 300);
-    }} ${c(this.fieldInfoFlowItemEl)}><arcgis-field-info lang=${this._messages._lang ?? h} .fieldName=${e.name} .layer=${this.layer} .view=${this.view} class="content"></arcgis-field-info></calcite-flow-item>`);
-    s.appendChild(i), this.panelElement.value.selected = !1, this.fieldInfoFlowItemEl?.value.setFocus();
+    }} ${d(this.fieldInfoFlowItemEl)}><arcgis-field-info lang=${this._messages._lang ?? m} .fieldName=${e.name} .layer=${this.layer} .view=${this.view} class="content"></arcgis-field-info></calcite-flow-item>`);
+    i.appendChild(s), this.panelElement.value.selected = !1, setTimeout(() => this.fieldInfoFlowItemEl?.value.setFocus(), 1);
   }
-  usingCustomGroups() {
-    return !!this.fields.length && "fields" in this.fields[0];
+  addSubFieldInfoFlowItem(e, t) {
+    const i = this.flowElement.value, s = e.subFieldInfos.filter((a) => g(a, this.filterText, !0)), l = S(o`<calcite-flow-item selected .heading=${e.alias ?? e.name} .description=${e.description ?? void 0} class="panel" style=${$(this.panelCutOffHeight > 0 ? `max-height: ${this.panelCutOffHeight}px` : "max-height: 50vh")} @calciteFlowItemBack=${(a) => {
+      a.currentTarget.remove(), this.fieldInfoFlowItemEl.value.selected = !1, this.panelElement.value.selected = !0, setTimeout(() => {
+        t.setFocus();
+      }, 300);
+    }} ${d(this.fieldInfoFlowItemEl)}><calcite-list .label=${e.alias ?? e.name} .selectionMode=${this.multiple ? "multiple" : "single"} @calciteListChange=${(a) => {
+      this.updateSelectedFieldsForList(a.currentTarget, e.subFieldInfos), this.arcgisChange.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListChange.emit({ selectedFields: this.selectedFields }), this.multiple || (this.arcgisClose.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListDismissed.emit({ selectedFields: this.selectedFields }));
+    }}>${s.map((a) => this.renderCalciteListItem(a, !1))}</calcite-list>${this.filterText && !s.length && this.filterNoResultsText?.length !== 0 ? o`<div class="no-match-text">${this.filterNoResultsText ?? this._messages.noMatches}</div>` : null}</calcite-flow-item>`);
+    i.appendChild(l), this.panelElement.value.selected = !1, setTimeout(() => this.fieldInfoFlowItemEl.value?.setFocus(), 1);
   }
-  getAllFields() {
-    return this.allLists.map((e) => e.fields).flat();
+  shouldRenderSelectionButton(e) {
+    return this.multiple && this.showSelectionAll && (!e || !this.filterText || !!this.filterFields?.length);
+  }
+  handleListSelectionChange(e) {
+    this.updateSelectedFieldsForList(this.listNode.value, e), this.arcgisChange.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListChange.emit({ selectedFields: this.selectedFields }), this.multiple || (this.arcgisClose.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListDismissed.emit({ selectedFields: this.selectedFields }));
+  }
+  updateSelectedFieldsForList(e, t) {
+    const i = new Set(t.map((c) => c.name)), s = e.selectedItems.map((c) => c.value), l = this.selectedFields.filter((c) => !i.has(c) || s.includes(c)), a = s.filter((c) => !this.selectedFields.includes(c));
+    this.selectedFields = this.multiple ? [.../* @__PURE__ */ new Set([...l, ...a])] : s, this.reorderSelectedFieldsByCurrentListOrder();
   }
   setSortBy(e) {
     this.lastSortBy = e, this.updateGroupedLists(), this.arcgisSortByChange.emit(this.lastSortBy), this.arcgisFieldPickListSortByChange.emit(this.lastSortBy), this.reorderSelectedFieldsByCurrentListOrder() && (this.arcgisChange.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListChange.emit({ selectedFields: this.selectedFields }));
@@ -151,12 +214,12 @@ class I extends y {
   reorderSelectedFieldsByCurrentListOrder() {
     if (!this.selectedFields.length)
       return !1;
-    const e = this.getAllFields().map((o) => o.name), t = new Set(this.selectedFields), s = e.filter((o) => t.has(o)), i = (
+    const e = f(this.allLists).map((l) => l.name), t = new Set(this.selectedFields), i = e.filter((l) => t.has(l)), s = (
       // adding/removing fields
-      s.length !== this.selectedFields.length || // reordering fields
-      s.some((o, p) => o !== this.selectedFields[p])
+      i.length !== this.selectedFields.length || // reordering fields
+      i.some((l, a) => l !== this.selectedFields[a])
     );
-    return i && (this.selectedFields = [...s]), i;
+    return s && (this.selectedFields = [...i]), s;
   }
   render() {
     return this._propWatcherTask.render({
@@ -164,56 +227,80 @@ class I extends y {
         if (this.listOnly)
           return this.renderList();
         const e = this.heading || (this.multiple ? this._messages.headerSelect : this._messages.header), t = this.popoverProps;
-        return this.el.classList.add("js-app-flyout"), u(`${t.autoClose}`, l`<calcite-popover .placement=${t.placement ?? "leading-start"} open pointer-disabled .referenceElement=${t.refElement} .offsetDistance=${t.offsetDistance ?? -Math.round(t.refElement.getBoundingClientRect().width)} .offsetSkidding=${t.offsetSkidding ?? 0} .overlayPositioning=${t.overlayPositioning} trigger-disabled .autoClose=${t.autoClose} .label=${this.heading ?? (this.multiple ? this._messages.headerSelect : this._messages.header) ?? ""} @calcitePopoverClose=${() => {
+        return this.el.classList.add("js-app-flyout"), v(`${t.autoClose}`, o`<calcite-popover .placement=${t.placement ?? "leading-start"} open pointer-disabled .referenceElement=${t.refElement} .offsetDistance=${t.offsetDistance ?? -Math.round(t.refElement.getBoundingClientRect().width)} .offsetSkidding=${t.offsetSkidding ?? 0} .overlayPositioning=${t.overlayPositioning} trigger-disabled .autoClose=${t.autoClose} .label=${this.heading ?? (this.multiple ? this._messages.headerSelect : this._messages.header) ?? ""} @calcitePopoverClose=${() => {
           this.arcgisClose.emit(), this.arcgisFieldPickListDismissed.emit();
-        }} ${c(this.popoverNode)}><calcite-flow style=${f({
+        }} ${d(this.popoverNode)}><calcite-flow style=${$({
           width: `${t.popoverWidth ?? t.refElement.getBoundingClientRect().width}px`,
           ...t.maxHeight && { maxHeight: t.maxHeight }
-        })} ${c(this.flowElement)}><calcite-flow-item class="panel" .heading=${e} closable @calciteFlowItemClose=${() => {
+        })} ${d(this.flowElement)}><calcite-flow-item class="panel" .heading=${e} closable @calciteFlowItemClose=${() => {
           this.arcgisClose.emit(), this.arcgisFieldPickListDismissed.emit();
-        }} ${c(this.panelElement)}><slot slot=content-top name=content-top></slot>${this.renderList()}<slot slot=content-bottom name=content-bottom></slot>${(this.multiple || !this.hideCancel) && l`<div slot=footer class="footer"><slot name=content-footer></slot>${this.multiple && !this.hideCancel ? l`<div class="add-cancel-buttons">${this.renderAddButton()}${this.renderCancelButton()}</div>` : l`${this.renderAddButton()}${this.renderCancelButton()}`}</div>` || ""}</calcite-flow-item></calcite-flow></calcite-popover>`);
+        }} ${d(this.panelElement)}><slot slot=content-top name=content-top></slot>${this.renderList()}<slot slot=content-bottom name=content-bottom></slot>${(this.multiple || !this.hideCancel) && o`<div slot=footer class="footer"><slot name=content-footer></slot>${this.multiple && !this.hideCancel ? o`<div class="add-cancel-buttons">${this.renderAddButton()}${this.renderCancelButton()}</div>` : o`${this.renderAddButton()}${this.renderCancelButton()}`}</div>` || ""}</calcite-flow-item></calcite-flow></calcite-popover>`);
       },
       error: () => ""
     });
   }
   renderList() {
-    const e = this.heading || (this.multiple ? this._messages.headerSelect : this._messages.header), t = this.getAllFields(), s = t.length >= this.showFilterLength;
-    return l`${t.length ? l`<calcite-list .label=${e} .selectionMode=${this.multiple ? "multiple" : "single"} class=${v(this.listOnly ? "" : "content")} .filterEnabled=${s} .filterPlaceholder=${this.filterPlaceholderText ?? this._messages.filter} @calciteListChange=${() => {
-      const i = this.listNode.value.selectedItems.map((d) => d.value), o = this.selectedFields.filter((d) => i.includes(d)), p = i.filter((d) => !this.selectedFields.includes(d));
-      this.selectedFields = [.../* @__PURE__ */ new Set([...o, ...p])], this.reorderSelectedFieldsByCurrentListOrder(), this.arcgisChange.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListChange.emit({ selectedFields: this.selectedFields }), this.multiple || (this.arcgisClose.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListDismissed.emit({ selectedFields: this.selectedFields }));
-    }} @calciteListFilter=${(i) => {
-      i.stopPropagation(), this.filterFields = this.listNode.value.filteredItems?.map((o) => o.value), this.filterText = this.listNode.value.filterText;
-    }} ${c(this.listNode)}>${this.renderSortButton()}<slot name=content-center></slot>${this.multiple && this.showSelectionAll && (!s || !this.filterText || this.filterFields?.length) ? this.renderSelectionButton() : null}${this.renderListItems()}</calcite-list>` : l`<slot name=no-fields></slot>`}${this.filterFields && !this.filterFields.length && this.listNode.value && this.filterNoResultsText?.length !== 0 ? l`<div class="no-match-text">${this.filterNoResultsText ?? this._messages.noMatches}</div>` : null}`;
-  }
-  renderSortButton() {
-    const e = this.getAllFields();
-    if (!(e.length >= this.showFilterLength && !this.hideSort))
+    const e = this.heading || (this.multiple ? this._messages.headerSelect : this._messages.header), t = O(this.allLists), i = _(this.allLists), s = f(this.allLists).length >= this.showFilterLength;
+    return t.length || i.length ? i.length ? this.renderSplitLists(t, i, s) : this.renderTopLevelOnlyFieldList(e, t, s) : o`<slot name=no-fields></slot>`;
+  }
+  renderSplitLists(e, t, i) {
+    const s = f(this.allLists), l = D(this.allLists).some((a) => F(a, this.filterText));
+    return o`${i ? o`<div class="list-controls"><calcite-filter .items=${s} .filterProps=${["name", "alias", "description"]} .placeholder=${this.filterPlaceholderText ?? this._messages.filter} @calciteFilterChange=${(a) => {
+      this.filterText = a.currentTarget.value, this.filterFields = this.filterText ? A(this.allLists, this.filterText).map((c) => c.name) : void 0;
+    }}></calcite-filter>${this.renderSortButton()}</div>` : null}<div class=${L(this.listOnly ? "" : "list-wrapper")} ${d(this.listWrapper)}>${this.shouldRenderSelectionButton(i) ? this.renderSelectionButton() : null}${this.renderSplitSubFieldLists(t)}${e.length ? this.renderSplitTopLevelFieldList(e, !0) : null}</div>${this.filterText && !l && this.filterNoResultsText?.length !== 0 ? o`<div class="no-match-text">${this.filterNoResultsText ?? this._messages.noMatches}</div>` : null}`;
+  }
+  renderSplitSubFieldLists(e) {
+    const t = e.map((i) => ({
+      ...i,
+      fields: i.fields.filter((s) => F(s, this.filterText))
+    })).filter((i) => !!i.fields.length);
+    return y(t, (i) => i.title, (i) => o`<calcite-list selection-mode=none .label=${i.title ?? this.heading ?? ""}><calcite-list-item-group .heading=${i.title}>${y(i.fields, (s) => s.name, (s) => o`<calcite-list-item .label=${s.alias || s.name} .description=${this.multiple ? this._messages.subFieldsSelected.replace("${count}", `${s.subFieldInfos.filter((l) => this.selectedFields.includes(l.name)).length}`) : void 0} .value=${s.name} @click=${(l) => this.addSubFieldInfoFlowItem(s, l.currentTarget)} @keydown=${(l) => {
+      l.key === "Enter" && this.addSubFieldInfoFlowItem(s, l.currentTarget);
+    }}><calcite-icon slot=actions-end icon=chevron-right flip-rtl scale=s></calcite-icon></calcite-list-item>`)}</calcite-list-item-group></calcite-list>`);
+  }
+  renderSplitTopLevelFieldList(e, t) {
+    return o`<calcite-list .label=${this.heading || (this.multiple ? this._messages.headerSelect : this._messages.header)} .selectionMode=${this.multiple ? "multiple" : "single"} @calciteListChange=${() => this.handleListSelectionChange(e)} ${d(this.listNode)}><slot name=content-center></slot>${this.renderGroupedListItems(t)}</calcite-list>`;
+  }
+  renderTopLevelOnlyFieldList(e, t, i) {
+    return o`<div class=${L(this.listOnly ? "" : "list-wrapper")} ${d(this.listWrapper)}><calcite-list .label=${e} .selectionMode=${this.multiple ? "multiple" : "single"} .filterEnabled=${i} .filterPlaceholder=${this.filterPlaceholderText ?? this._messages.filter} @calciteListChange=${() => this.handleListSelectionChange(t)} @calciteListFilter=${(s) => {
+      s.stopPropagation(), this.filterFields = this.listNode.value.filteredItems?.map((l) => l.value), this.filterText = this.listNode.value.filterText;
+    }} ${d(this.listNode)}>${this.renderSortButton("filter-actions-end")}${this.shouldRenderSelectionButton(i) ? this.renderSelectionButton() : null}<slot name=content-center></slot>${this.renderGroupedListItems(!1)}</calcite-list></div>`;
+  }
+  renderSortButton(e) {
+    const t = f(this.allLists);
+    if (!(t.length >= this.showFilterLength && !this.hideSort))
       return "";
-    const s = e.every((i) => !!i.type);
-    return l`<calcite-dropdown slot=filter-actions-end placement=bottom-end overlay-positioning=fixed .disabled=${this.filterFields ? this.filterFields.length < 4 : !1} @calciteDropdownOpen=${() => {
+    const s = t.every((l) => !!l.type);
+    return o`<calcite-dropdown slot=${e ?? m} placement=bottom-end overlay-positioning=fixed @calciteDropdownOpen=${() => {
       this.observer?.disconnect(), this.popoverNode.value && this.observer?.observe(this.popoverNode.value, { attributes: !0 });
-    }} @calciteDropdownClose=${() => this.observer?.disconnect()} ${c(this.dropdownNode)}><calcite-action slot=trigger .text=${this._messages.sort ?? ""} title=${this._messages.sort ?? h}><calcite-icon scale=s icon=sortDescending flip-rtl></calcite-icon></calcite-action><calcite-dropdown-group><calcite-dropdown-item .selected=${this.lastSortBy === "default"} @calciteDropdownItemSelect=${() => this.setSortBy("default")}>${this._messages.default}</calcite-dropdown-item><calcite-dropdown-item .selected=${this.lastSortBy === "display"} @calciteDropdownItemSelect=${() => this.setSortBy("display")}>${this._messages.displayName}</calcite-dropdown-item>${s && l`<calcite-dropdown-item .selected=${this.lastSortBy === "type"} @calciteDropdownItemSelect=${() => this.setSortBy("type")}>${this._messages.type}</calcite-dropdown-item>` || ""}<calcite-dropdown-item .selected=${this.lastSortBy === "field"} @calciteDropdownItemSelect=${() => this.setSortBy("field")}>${this._messages.fieldName}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`;
+    }} @calciteDropdownClose=${() => this.observer?.disconnect()} ${d(this.dropdownNode)}><calcite-action slot=trigger .text=${this._messages.sort ?? ""} title=${this._messages.sort ?? m}><calcite-icon scale=s icon=sortDescending flip-rtl></calcite-icon></calcite-action><calcite-dropdown-group><calcite-dropdown-item .selected=${this.lastSortBy === "default"} @calciteDropdownItemSelect=${() => this.setSortBy("default")}>${this._messages.default}</calcite-dropdown-item><calcite-dropdown-item .selected=${this.lastSortBy === "display"} @calciteDropdownItemSelect=${() => this.setSortBy("display")}>${this._messages.displayName}</calcite-dropdown-item>${s && o`<calcite-dropdown-item .selected=${this.lastSortBy === "type"} @calciteDropdownItemSelect=${() => this.setSortBy("type")}>${this._messages.type}</calcite-dropdown-item>` || ""}<calcite-dropdown-item .selected=${this.lastSortBy === "field"} @calciteDropdownItemSelect=${() => this.setSortBy("field")}>${this._messages.fieldName}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`;
   }
   renderSelectionButton() {
-    return l`<div class="selection-button-div"><calcite-button appearance=transparent scale=s width=full @click=${() => {
+    return o`<div class="selection-button-div"><calcite-button appearance=transparent scale=s width=full @click=${() => {
       if (this.canDeselectAll())
         this.selectedFields = this.filterFields?.length ? this.selectedFields.filter((e) => !this.filterFields?.includes(e)) : [];
       else if (this.filterFields?.length)
         this.selectedFields = [.../* @__PURE__ */ new Set([...this.selectedFields, ...this.filterFields])];
       else {
-        const t = this.getAllFields();
-        this.selectedFields = t.map((s) => s.name);
+        const t = f(this.allLists);
+        this.selectedFields = t.map((i) => i.name);
       }
       this.reorderSelectedFieldsByCurrentListOrder(), this.arcgisChange.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListChange.emit({ selectedFields: this.selectedFields });
     }}>${this.canDeselectAll() ? this._messages.deselectAll : this._messages.selectAll}</calcite-button></div>`;
   }
-  renderListItems() {
-    const e = this.allLists.filter((t) => !!t.fields.length);
-    return e.length === 1 && !e[0].title ? e[0].fields.map((t) => this.renderCalciteListItem(t)) : e.map((s) => l`<calcite-list-item-group .heading=${s.title}>${s.fields.map((i) => this.renderCalciteListItem(i))}</calcite-list-item-group>`);
+  renderGroupedListItems(e) {
+    const t = this.allLists.filter((i) => !!i.fields.length && !u(i.fields)).map((i) => ({
+      ...i,
+      fields: e ? i.fields.filter((s) => F(s, this.filterText)) : i.fields
+    })).filter((i) => !!i.fields.length);
+    return t.length === 1 && !t[0].title ? this.renderListItems(t[0].fields) : t.map((s) => o`<calcite-list-item-group .heading=${s.title}>${this.renderListItems(s.fields)}</calcite-list-item-group>`);
+  }
+  renderListItems(e) {
+    return e.map((t) => this.renderCalciteListItem(t));
   }
-  renderCalciteListItem(e) {
-    const t = this.showFieldInfoCheck(e), s = this.showFieldTypeIcon && !!e.type;
-    return u(e.name, l`<calcite-list-item .label=${e.alias || e.name} .description=${(() => {
+  renderCalciteListItem(e, t = !0) {
+    const i = t && this.showFieldInfoCheck(e), s = this.showFieldTypeIcon && !!e.type;
+    return v(e.name, o`<calcite-list-item .label=${e.alias || e.name} .description=${(() => {
       if (this.showFieldName && e.hideFieldName !== !0)
         return `{${e.name}}`;
       if (this.showDescription && e.hideDescription !== !0 && e.description)
@@ -221,40 +308,40 @@ class I extends y {
     })()} .value=${e.name} .selected=${!this.multiple && e.name === this.selectedFields[0] || this.multiple && this.selectedFields.includes(e.name)} .metadata=${{
       label: e.alias,
       fieldName: e.name
-    }}>${s && l`<div slot=actions-end class="field-icons">${B({ fieldType: e.type })}</div>` || ""}${this.renderInfoAction(e, t)}${this.renderEditAction(e)}${this.renderDeleteAction(e)}</calcite-list-item>`);
+    }}>${s && o`<div slot=actions-end class="field-icons">${N({ fieldType: e.type })}</div>` || ""}${this.renderInfoAction(e, i)}${this.renderEditAction(e)}${this.renderDeleteAction(e)}</calcite-list-item>`);
   }
   renderInfoAction(e, t) {
-    const { _messages: s } = this;
-    return t ? l`<calcite-action slot=actions-end .text=${s.info} title=${s.info ?? h} scale=s icon=information @click=${(i) => {
-      i.stopPropagation();
-      const o = i.currentTarget;
-      this.addFieldInfoFlowItem(e, o);
+    const { _messages: i } = this;
+    return t ? o`<calcite-action slot=actions-end .text=${i.info} title=${i.info ?? m} scale=s icon=information @click=${(s) => {
+      s.stopPropagation();
+      const l = s.currentTarget;
+      this.addFieldInfoFlowItem(e, l);
     }}></calcite-action>` : "";
   }
   renderEditAction(e) {
     const { _messages: t } = this;
-    return e.showEditAction ? l`<calcite-action slot=actions-end .text=${t.edit} title=${t.edit ?? h} scale=s icon=pencil @click=${(s) => {
-      s.stopPropagation(), this.arcgisEditField.emit({ fieldName: e.name });
+    return e.showEditAction ? o`<calcite-action slot=actions-end .text=${t.edit} title=${t.edit ?? m} scale=s icon=pencil @click=${(i) => {
+      i.stopPropagation(), this.arcgisEditField.emit({ fieldName: e.name });
     }}></calcite-action>` : "";
   }
   renderDeleteAction(e) {
     const { _messages: t } = this;
-    return e.showDeleteAction ? l`<calcite-action slot=actions-end .text=${t.delete} title=${t.delete ?? h} scale=s icon=trash @click=${(s) => {
-      s.stopPropagation(), this.arcgisDeleteField.emit({ fieldName: e.name });
+    return e.showDeleteAction ? o`<calcite-action slot=actions-end .text=${t.delete} title=${t.delete ?? m} scale=s icon=trash @click=${(i) => {
+      i.stopPropagation(), this.arcgisDeleteField.emit({ fieldName: e.name });
     }}></calcite-action>` : "";
   }
   renderAddButton() {
-    return this.multiple ? l`<calcite-button .appearance=${this.hideCancel ? "outline-fill" : "solid"} .width=${this.hideCancel ? "full" : "half"} @click=${() => {
+    return this.multiple ? o`<calcite-button .appearance=${this.hideCancel ? "outline-fill" : "solid"} .width=${this.hideCancel ? "full" : "half"} @click=${() => {
       this.arcgisClose.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListDismissed.emit({ selectedFields: this.selectedFields });
     }}>${this.okBtnText || (this.multiple ? this._messages.done : this._messages.ok)}</calcite-button>` : "";
   }
   renderCancelButton() {
-    return this.hideCancel ? "" : l`<calcite-button appearance=outline-fill .width=${this.multiple ? "half" : "full"} @click=${() => {
+    return this.hideCancel ? "" : o`<calcite-button appearance=outline-fill .width=${this.multiple ? "half" : "full"} @click=${() => {
       this.arcgisClose.emit(), this.arcgisFieldPickListDismissed.emit();
     }}>${this._messages.cancel}</calcite-button>`;
   }
 }
-w("arcgis-field-pick-list", I);
+b("arcgis-field-pick-list", H);
 export {
-  I as ArcgisFieldPickList
+  H as ArcgisFieldPickList
 };

package/dist/components/arcgis-field-pick-list/index.js

@@ -1,14 +1,15 @@
 import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-flow-item";
 import "../arcgis-field-info/index.js";
+import "@esri/calcite-components/components/calcite-list";
 import "@esri/calcite-components/components/calcite-popover";
 import "@esri/calcite-components/components/calcite-flow";
-import "@esri/calcite-components/components/calcite-list";
+import "@esri/calcite-components/components/calcite-filter";
+import "@esri/calcite-components/components/calcite-list-item-group";
+import "@esri/calcite-components/components/calcite-list-item";
 import "@esri/calcite-components/components/calcite-dropdown";
 import "@esri/calcite-components/components/calcite-action";
 import "@esri/calcite-components/components/calcite-dropdown-group";
 import "@esri/calcite-components/components/calcite-dropdown-item";
 import "@esri/calcite-components/components/calcite-button";
-import "@esri/calcite-components/components/calcite-list-item-group";
-import "@esri/calcite-components/components/calcite-list-item";
 export * from "./customElement.js";