pict-section-picker 1.2.0 → 1.3.0

package/README.md

@@ -148,6 +148,31 @@ Meadow can't join in a single read, so this is **fetch-then-merge**: after each
 
 The same options ride through the form-input adapter (`PictForm.JoinEntity`, …) and the pict-section-recordset entity filters (set `JoinEntity` on the clause) — so an entity filter can show parent context for its options with no host code, layered on top of either the 1:1 (direct-FK / `InternalJoin`) or 1:many (junction / `ExternalJoin`) filter relationship.
 
+## Tag badge (EntityTag)
+
+Show a small code/number badge next to each option — the select2 `EntitySelector` "tag" parity. For entity pickers, `EntityTag` names the record field to badge; the picker renders it as a pill beside the label:
+
+```javascript
+tmpPicker.createEntityPicker('PayItemPicker',
+{
+    Entity: 'PayItem',
+    SearchFields: [ 'Name' ],
+    EntityTag: 'ItemCode',        // each option shows its ItemCode as a badge
+    DestinationAddress: '#PayItemPicker',
+    ValueAddress: 'AppData.Form.IDPayItem',
+});
+// options render as badge + label, e.g.  [201-1] Excavation
+```
+
+Static options can carry a `Tag` directly (`{ Value, Text, Tag }`). The badge rides on the dropdown options, the selected single value, and multi-select chips alike. It composes with JoinEntity — the join folds into the label, the tag stays a separate pill.
+
+| Option | Default | Purpose |
+|---|---|---|
+| `EntityTag` | — | (entity pickers) record field whose value becomes each option's `Tag` badge. |
+| `TagLast` | `false` | `false` → badge before the label; `true` → after. |
+
+Through the form-input adapter + the recordset entity filters these are `PictForm.EntityTag` / `PictForm.EntityTagLast`.
+
 ## Categories
 
 Give option rows an optional `Group` field and the list renders headered sections (preserving order; rows without a `Group` fall into a leading unlabeled section):

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pict-section-picker",
-	"version": "1.2.0",
+	"version": "1.3.0",
 	"description": "Pict-native themeable searchable select / combobox — single & multi select, server pagination, categorized groups and creatable entries, driven by a host-agnostic async DataProvider (with a built-in Meadow EntityProvider adapter). A jQuery/select2-free replacement.",
 	"main": "source/Pict-Section-Picker.js",
 	"types": "types/Pict-Section-Picker.d.ts",

package/source/form/Pict-Section-Picker-FormInput.js

@@ -125,6 +125,9 @@ class PictInputTypePicker extends libPictInputExtension
 			JoinEntityDisplayField: tmpPF.JoinEntityDisplayField,
 			JoinEntityFirst: tmpPF.JoinEntityFirst,
 			JoinSeparator: tmpPF.JoinSeparator,
+			// EntityTag badge: the record field whose value becomes a Tag pill, ordered by EntityTagLast.
+			EntityTag: tmpPF.EntityTag,
+			TagLast: tmpPF.EntityTagLast,
 			// Per-search contextual scope — the generic hook the host fills.
 			BaseFilter: () => this.getContextualSearchFilters(pInput),
 			OnChange: fOnChange,

package/source/providers/Pict-Provider-Picker.js

@@ -31,6 +31,16 @@ const _PickerCSS = /*css*/`
 .pps-chip-x { flex: 0 0 auto; display: inline-flex; align-items: center; cursor: pointer; font-size: 0.78rem; border-radius: 4px; padding: 0.1rem; opacity: 0.7; }
 .pps-chip-x:hover { opacity: 1; background: color-mix(in srgb, var(--theme-color-brand-primary, #156dd1) 22%, transparent); }
 
+/* EntityTag badge — a small code/number pill shown next to an option / chip / selected value (the
+   select2 EntitySelector "tag" parity). Ordering (before/after the label) is driven by the TagLast
+   option in the view's render state. */
+.pps-tag { flex: 0 0 auto; display: inline-flex; align-items: center; font-size: 0.74rem; font-weight: 600; line-height: 1.25;
+	padding: 0.05rem 0.4rem; border-radius: 5px; white-space: nowrap;
+	background: var(--theme-color-background-tertiary, #eceef2); color: var(--theme-color-text-secondary, #45596b); }
+.pps-valuebox { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
+.pps-valuebox .pps-value { min-width: 0; }
+.pps-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
 /* Transparent full-viewport backdrop: closes on outside click (no document listener). Only present
    while OPEN — otherwise a fixed full-viewport layer would swallow every click on the page. When open,
    the control is raised above it so its chips/× stay clickable; the dropdown sits above both. */
@@ -185,6 +195,9 @@ class PictProviderPicker extends libPictProvider
 	 *   - JoinEntityFirst {boolean} - put the joined value first in the compound (default `true`):
 	 *     `JoinName - baseText`; when `false`, `baseText - JoinName`.
 	 *   - JoinSeparator {string} - the compound separator (default `' - '`).
+	 *   - EntityTag {string} - optional record field whose value becomes a `Tag` badge on each option
+	 *     (e.g. a `LineItem`'s `ItemNumber`). The picker view renders it as a styled badge alongside the
+	 *     label (ordering via the picker's `TagLast` option). Composes with JoinEntity (tag is outermost).
 	 * @return {(pSearchTerm: string, pPage: number) => Promise<{results: Array<any>, hasMore: boolean}>}
 	 */
 	createEntityDataProvider(pConfig)
@@ -198,6 +211,7 @@ class PictProviderPicker extends libPictProvider
 		const tmpBaseFilterConfig = pConfig.BaseFilter || '';
 		const tmpMapRecord = (typeof pConfig.MapRecord === 'function') ? pConfig.MapRecord : false;
 		const tmpJoinConfig = this._resolveJoinConfig(pConfig);
+		const tmpEntityTagField = pConfig.EntityTag || false;
 
 		return (pSearchTerm, pPage) => new Promise((resolve, reject) =>
 		{
@@ -233,14 +247,9 @@ class PictProviderPicker extends libPictProvider
 					// searched row, before mapping — so the option Text can show the compound display.
 					this._decorateRecordsWithJoin(tmpList, tmpJoinConfig).then((pDecorated) =>
 					{
-						const tmpResults = pDecorated.map((pRecord) =>
-						{
-							if (tmpMapRecord) { return tmpMapRecord(pRecord); }
-							const tmpText = tmpJoinConfig
-								? this._composeJoinedText(pRecord[tmpTextField], pRecord.JoinName, tmpJoinConfig.First, tmpJoinConfig.Separator)
-								: pRecord[tmpTextField];
-							return { Value: pRecord[tmpValueField], Text: tmpText, Record: pRecord };
-						});
+						const tmpResults = pDecorated.map((pRecord) => tmpMapRecord
+							? tmpMapRecord(pRecord)
+							: this._composeOption(pRecord, tmpValueField, tmpTextField, tmpJoinConfig, tmpEntityTagField));
 						// hasMore: a full page came back, so there is (probably) another. Avoids a Count round-trip.
 						return resolve({ results: tmpResults, hasMore: (tmpList.length >= tmpPageSize) });
 					});
@@ -285,6 +294,25 @@ class PictProviderPicker extends libPictProvider
 		return pFirst ? `${pJoinText}${pSeparator}${tmpBase}` : `${tmpBase}${pSeparator}${pJoinText}`;
 	}
 
+	/**
+	 * Build the picker option `{ Value, Text, Record[, Tag] }` from a (possibly join-decorated) record:
+	 * the Text honors any JoinEntity compound, and a Tag badge is added from `pTagField` when set. Shared
+	 * by the DataProvider (per page row) and the ResolveValue (pre-bound value) so they stay consistent.
+	 *
+	 * @param {any} pRecord @param {string} pValueField @param {string} pTextField
+	 * @param {false | Record<string, any>} pJoinConfig @param {string|false} pTagField
+	 * @return {{Value:any, Text:any, Record:any, Tag?:any}}
+	 */
+	_composeOption(pRecord, pValueField, pTextField, pJoinConfig, pTagField)
+	{
+		const tmpText = pJoinConfig
+			? this._composeJoinedText(pRecord[pTextField], pRecord.JoinName, pJoinConfig.First, pJoinConfig.Separator)
+			: pRecord[pTextField];
+		const tmpOption = { Value: pRecord[pValueField], Text: tmpText, Record: pRecord };
+		if (pTagField) { tmpOption.Tag = pRecord[pTagField]; }
+		return tmpOption;
+	}
+
 	/**
 	 * Fetch-then-merge the join entity for a page of searched records. Collects the unique FK ids the
 	 * rows carry (`JoinConfig.FKColumn`), issues ONE `FBL~{PKColumn}~INN~<ids>` request against the join
@@ -344,6 +372,7 @@ class PictProviderPicker extends libPictProvider
 		const tmpTextField = pConfig.TextField || 'Name';
 		const tmpMapRecord = (typeof pConfig.MapRecord === 'function') ? pConfig.MapRecord : false;
 		const tmpJoinConfig = this._resolveJoinConfig(pConfig);
+		const tmpEntityTagField = pConfig.EntityTag || false;
 
 		return (pValue) => new Promise((resolve) =>
 		{
@@ -358,10 +387,7 @@ class PictProviderPicker extends libPictProvider
 					const fFinish = () =>
 					{
 						if (tmpMapRecord) { return resolve(tmpMapRecord(pRecord)); }
-						const tmpText = tmpJoinConfig
-							? this._composeJoinedText(pRecord[tmpTextField], pRecord.JoinName, tmpJoinConfig.First, tmpJoinConfig.Separator)
-							: pRecord[tmpTextField];
-						return resolve({ Value: pRecord[tmpValueField], Text: tmpText, Record: pRecord });
+						return resolve(this._composeOption(pRecord, tmpValueField, tmpTextField, tmpJoinConfig, tmpEntityTagField));
 					};
 					// JoinEntity: resolve the single joined record (cached getEntity) for the compound label.
 					const tmpFK = tmpJoinConfig ? pRecord[tmpJoinConfig.FKColumn] : null;

package/source/views/PictView-Picker.js

@@ -20,6 +20,10 @@ const _DEFAULT_CONFIGURATION =
 	Placeholder: 'Select…',
 	Searchable: true,
 	Options: [],
+	// EntityTag badge ordering: false → badge before the label (the select2 default), true → after.
+	// The per-option Tag value rides on each source row (`{Value, Text, Tag}`); the entity adapter
+	// stamps it from an `EntityTag` field name. With no Tag on a row, no badge renders.
+	TagLast: false,
 	// Async data source (Phase 2): DataProvider(searchTerm, page) => Promise<{ results:[{Value,Text}], hasMore }>.
 	// When a function, the widget searches + paginates through it instead of the static Options list.
 	DataProvider: false,
@@ -74,7 +78,7 @@ const _DEFAULT_CONFIGURATION =
 		{
 			Hash: 'Pict-Section-Picker-Single',
 			Template: /*html*/`
-	<span class="pps-value{~NE:Record.NoValue^ pps-placeholder~}">{~D:Record.DisplayText~}</span>
+	<span class="pps-valuebox">{~TS:Pict-Section-Picker-Tag:Record.TagBeforeSlot~}<span class="pps-value{~NE:Record.NoValue^ pps-placeholder~}">{~D:Record.DisplayText~}</span>{~TS:Pict-Section-Picker-Tag:Record.TagAfterSlot~}</span>
 `
 		},
 		{
@@ -95,7 +99,7 @@ const _DEFAULT_CONFIGURATION =
 			// chip never bubbles up to the control's open/close toggle.
 			Hash: 'Pict-Section-Picker-Chip',
 			Template: /*html*/`
-	<span class="pps-chip"><span class="pps-chip-text">{~D:Record.Text~}</span><span class="pps-chip-x" onclick="event.stopPropagation(); _Pict.views['{~D:Record.PickerHash~}'].removeChip('{~D:Record.ValueKey~}')">{~I:Close~}</span></span>
+	<span class="pps-chip">{~TS:Pict-Section-Picker-Tag:Record.TagBeforeSlot~}<span class="pps-chip-text">{~D:Record.Text~}</span>{~TS:Pict-Section-Picker-Tag:Record.TagAfterSlot~}<span class="pps-chip-x" onclick="event.stopPropagation(); _Pict.views['{~D:Record.PickerHash~}'].removeChip('{~D:Record.ValueKey~}')">{~I:Close~}</span></span>
 `
 		},
 		{
@@ -155,8 +159,16 @@ const _DEFAULT_CONFIGURATION =
 			Template: /*html*/`
 	<button type="button" class="pps-option{~NE:Record.Selected^ pps-selected~}{~NE:Record.Highlight^ pps-highlight~}" onclick="_Pict.views['{~D:Record.PickerHash~}'].select('{~D:Record.ValueKey~}')">
 		<span class="pps-option-check{~NE:Record.NotSelected^ pps-hidden~}">{~I:Check~}</span>
-		<span>{~D:Record.Text~}</span>
+		{~TS:Pict-Section-Picker-Tag:Record.TagBeforeSlot~}<span class="pps-option-label">{~D:Record.Text~}</span>{~TS:Pict-Section-Picker-Tag:Record.TagAfterSlot~}
 	</button>
+`
+		},
+		{
+			// EntityTag badge — a small code/number pill rendered before or after the label via the
+			// TagBeforeSlot / TagAfterSlot single-element-array slots on each option / chip / value record.
+			Hash: 'Pict-Section-Picker-Tag',
+			Template: /*html*/`
+		<span class="pps-tag">{~D:Record.Tag~}</span>
 `
 		},
 	],
@@ -249,7 +261,7 @@ class PictViewPicker extends libPictView
 				{
 					if (this._isMulti())
 					{
-						this._selectedRecords[String(pValue)] = { Value: pResolved.Value !== undefined ? pResolved.Value : pValue, Text: pResolved.Text };
+						this._selectedRecords[String(pValue)] = { Value: pResolved.Value !== undefined ? pResolved.Value : pValue, Text: pResolved.Text, Tag: pResolved.Tag };
 						this._renderValue();
 					}
 					else
@@ -365,7 +377,7 @@ class PictViewPicker extends libPictView
 			const tmpRow = this._sourceRows().find((pRow) => String(pRow.Value) === String(pVal));
 			if (tmpRow)
 			{
-				this._selectedRecords[String(pVal)] = { Value: tmpRow.Value, Text: tmpRow.Text };
+				this._selectedRecords[String(pVal)] = { Value: tmpRow.Value, Text: tmpRow.Text, Tag: tmpRow.Tag };
 				return;
 			}
 			if (this._isAsync() && typeof this.options.ResolveValue === 'function')
@@ -374,7 +386,7 @@ class PictViewPicker extends libPictView
 				{
 					if (pResolved && pResolved.Text)
 					{
-						this._selectedRecords[String(pVal)] = { Value: pResolved.Value !== undefined ? pResolved.Value : pVal, Text: pResolved.Text };
+						this._selectedRecords[String(pVal)] = { Value: pResolved.Value !== undefined ? pResolved.Value : pVal, Text: pResolved.Text, Tag: pResolved.Tag };
 						if (!this._isMulti()) { this._selectedText = pResolved.Text; }
 						this._renderValue();
 					}
@@ -383,13 +395,29 @@ class PictViewPicker extends libPictView
 		});
 	}
 
-	/** @return {Array<{Value:any, Text:string}>} The current option source rows (async results or static Options). */
+	/** @return {Array<{Value:any, Text:string, Tag?:any}>} The current option source rows (async results or static Options). */
 	_sourceRows()
 	{
 		if (this._isAsync()) { return this._loadedResults; }
 		return Array.isArray(this.options.Options) ? this.options.Options : [];
 	}
 
+	/**
+	 * Build the EntityTag before/after render slots for a record. Exactly one slot is populated (per the
+	 * TagLast option) and only when a tag value is present, so a tag-less row renders no badge.
+	 * @param {any} pTag @param {boolean} pTagLast
+	 * @return {{TagBeforeSlot:Array<any>, TagAfterSlot:Array<any>}}
+	 */
+	_tagSlots(pTag, pTagLast)
+	{
+		const tmpHasTag = (pTag !== undefined && pTag !== null && pTag !== '');
+		const tmpSlot = tmpHasTag ? [ { Tag: pTag } ] : [];
+		return {
+			TagBeforeSlot: (tmpHasTag && !pTagLast) ? tmpSlot : [],
+			TagAfterSlot: (tmpHasTag && pTagLast) ? tmpSlot : [],
+		};
+	}
+
 	/**
 	 * (Re)compute the picker's render state into AppData: the displayed value / chips + the
 	 * (search-filtered) option list with selected/highlight flags.
@@ -413,17 +441,18 @@ class PictViewPicker extends libPictView
 			.filter((pVal) => pVal !== undefined && pVal !== null && pVal !== '')
 			.map((pVal) => String(pVal)));
 
+		const tmpTagLast = !!this.options.TagLast;
 		tmpState.Options = tmpSource.map((pOption, pIndex) =>
 		{
 			const tmpIsSelected = tmpSelectedKeys.has(String(pOption.Value));
-			return {
+			return Object.assign({
 				PickerHash: this.options.PickerHash,
 				ValueKey: String(pOption.Value),
 				Text: pOption.Text,
 				Selected: tmpIsSelected,
 				NotSelected: !tmpIsSelected,
 				Highlight: (pIndex === this._highlight),
-			};
+			}, this._tagSlots(pOption.Tag, tmpTagLast));
 		});
 
 		// Cluster options into categories (preserving order), keyed by each source row's optional Group.
@@ -468,7 +497,9 @@ class PictViewPicker extends libPictView
 			const tmpChips = tmpValues.map((pVal) =>
 			{
 				const tmpRecord = this._lookupRecord(pVal);
-				return { PickerHash: this.options.PickerHash, ValueKey: String(pVal), Text: tmpRecord ? tmpRecord.Text : String(pVal) };
+				return Object.assign(
+					{ PickerHash: this.options.PickerHash, ValueKey: String(pVal), Text: tmpRecord ? tmpRecord.Text : String(pVal) },
+					this._tagSlots(tmpRecord ? tmpRecord.Tag : undefined, tmpTagLast));
 			});
 			tmpState.SingleSlot = [];
 			tmpState.MultiSlot = [ {
@@ -482,11 +513,11 @@ class PictViewPicker extends libPictView
 			const tmpValue = this.getValue();
 			const tmpHasValue = (tmpValue !== undefined && tmpValue !== null && tmpValue !== '');
 			const tmpSelected = this._lookupRecord(tmpValue);
-			tmpState.SingleSlot = [ {
+			tmpState.SingleSlot = [ Object.assign({
 				PickerHash: this.options.PickerHash,
 				DisplayText: tmpSelected ? tmpSelected.Text : (this._selectedText || (tmpHasValue ? String(tmpValue) : this.options.Placeholder)),
 				NoValue: !tmpHasValue,
-			} ];
+			}, this._tagSlots(tmpSelected ? tmpSelected.Tag : undefined, tmpTagLast)) ];
 			tmpState.MultiSlot = [];
 		}
 		return tmpState;
@@ -496,7 +527,7 @@ class PictViewPicker extends libPictView
 	 * Find the {Value,Text} record for a value: the stored selection record (authoritative for chips /
 	 * async), else a row in the current source (static Options or loaded results).
 	 * @param {any} pValue
-	 * @return {{Value:any, Text:string}|null}
+	 * @return {{Value:any, Text:string, Tag?:any}|null}
 	 */
 	_lookupRecord(pValue)
 	{
@@ -726,6 +757,7 @@ class PictViewPicker extends libPictView
 		if (!this._isMulti())
 		{
 			this._selectedText = tmpOption.Text;
+			this._selectedRecords[String(tmpOption.Value)] = { Value: tmpOption.Value, Text: tmpOption.Text, Tag: tmpOption.Tag };
 			this._setValue(tmpOption.Value);
 			this._search = '';
 			this._open = false;
@@ -749,7 +781,7 @@ class PictViewPicker extends libPictView
 		else
 		{
 			tmpValues.push(tmpOption.Value);
-			this._selectedRecords[String(pValueKey)] = { Value: tmpOption.Value, Text: tmpOption.Text };
+			this._selectedRecords[String(pValueKey)] = { Value: tmpOption.Value, Text: tmpOption.Text, Tag: tmpOption.Tag };
 		}
 		this._setValue(tmpValues);
 		this._renderValue();
@@ -789,7 +821,7 @@ class PictViewPicker extends libPictView
 			{
 				this.options.Options.unshift(pRecord);
 			}
-			this._selectedRecords[String(pRecord.Value)] = { Value: pRecord.Value, Text: pRecord.Text };
+			this._selectedRecords[String(pRecord.Value)] = { Value: pRecord.Value, Text: pRecord.Text, Tag: pRecord.Tag };
 
 			if (this._isMulti())
 			{

package/types/form/Pict-Section-Picker-FormInput.d.ts

@@ -33,6 +33,8 @@ declare class PictInputTypePicker extends PictInputTypePicker_base {
         JoinEntityDisplayField: any;
         JoinEntityFirst: any;
         JoinSeparator: any;
+        EntityTag: any;
+        TagLast: any;
         BaseFilter: () => string | string[];
         OnChange: any;
     };

package/types/form/Pict-Section-Picker-FormInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pict-Section-Picker-FormInput.d.ts","sourceRoot":"","sources":["../../source/form/Pict-Section-Picker-FormInput.js"],"names":[],"mappings":";;AAsEA;IAEC,2DAKC;IAGD,yCAAmE;IACnE,uCAA4D;IAC5D,gEAAsG;IACtG,8DAA2F;IAC3F,4DAAuG;IAEvG;;;;;;OAMG;IACH,mCAFW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAkB,MAAM,GAAC,KAAK,CAAC,MAAM,CAAC,CAWnE;IAED,4DAA4D;IAC5D;;;;;;;;;;;;;;;;;;;MA0BC;IAED,8FAA8F;IAC9F,wDAWC;IAED;;;;OAIG;IACH,wEAUC;IAED,2FAKC;IAED;;;;;;OAMG;IACH,0GAFY,OAAO,CAUlB;IAID,oIAMC;IAED,sIAYC;IAED,iFAMC;IAID,qEAAqE;IACrE,2EAD0D,OAAO,CAahE;IAED,gJAIC;IAED,kJAQC;IAED,wGAMC;CACD;;;;AAED;;;;;;;;;;;;;;GAcG;AACH,gDAVW,GAAG,aACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAOlB,OAAO,CAwBlB;AAjRD;;;;;;;GAOG;AACH,2DAJW,MAAM,iBACN,MAAM,GACL,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAoCrC;AAnDD,kCAAkC;AAClC,sCADW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAO5B"}
+{"version":3,"file":"Pict-Section-Picker-FormInput.d.ts","sourceRoot":"","sources":["../../source/form/Pict-Section-Picker-FormInput.js"],"names":[],"mappings":";;AAsEA;IAEC,2DAKC;IAGD,yCAAmE;IACnE,uCAA4D;IAC5D,gEAAsG;IACtG,8DAA2F;IAC3F,4DAAuG;IAEvG;;;;;;OAMG;IACH,mCAFW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAkB,MAAM,GAAC,KAAK,CAAC,MAAM,CAAC,CAWnE;IAED,4DAA4D;IAC5D;;;;;;;;;;;;;;;;;;;;;MA6BC;IAED,8FAA8F;IAC9F,wDAWC;IAED;;;;OAIG;IACH,wEAUC;IAED,2FAKC;IAED;;;;;;OAMG;IACH,0GAFY,OAAO,CAUlB;IAID,oIAMC;IAED,sIAYC;IAED,iFAMC;IAID,qEAAqE;IACrE,2EAD0D,OAAO,CAahE;IAED,gJAIC;IAED,kJAQC;IAED,wGAMC;CACD;;;;AAED;;;;;;;;;;;;;;GAcG;AACH,gDAVW,GAAG,aACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAOlB,OAAO,CAwBlB;AApRD;;;;;;;GAOG;AACH,2DAJW,MAAM,iBACN,MAAM,GACL,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAoCrC;AAnDD,kCAAkC;AAClC,sCADW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAO5B"}

package/types/providers/Pict-Provider-Picker.d.ts

@@ -62,6 +62,9 @@ declare class PictProviderPicker extends libPictProvider {
      *   - JoinEntityFirst {boolean} - put the joined value first in the compound (default `true`):
      *     `JoinName - baseText`; when `false`, `baseText - JoinName`.
      *   - JoinSeparator {string} - the compound separator (default `' - '`).
+     *   - EntityTag {string} - optional record field whose value becomes a `Tag` badge on each option
+     *     (e.g. a `LineItem`'s `ItemNumber`). The picker view renders it as a styled badge alongside the
+     *     label (ordering via the picker's `TagLast` option). Composes with JoinEntity (tag is outermost).
      * @return {(pSearchTerm: string, pPage: number) => Promise<{results: Array<any>, hasMore: boolean}>}
      */
     createEntityDataProvider(pConfig: Record<string, any>): (pSearchTerm: string, pPage: number) => Promise<{
@@ -92,6 +95,21 @@ declare class PictProviderPicker extends libPictProvider {
      * @return {any}
      */
     _composeJoinedText(pBaseText: any, pJoinText: any, pFirst: boolean, pSeparator: string): any;
+    /**
+     * Build the picker option `{ Value, Text, Record[, Tag] }` from a (possibly join-decorated) record:
+     * the Text honors any JoinEntity compound, and a Tag badge is added from `pTagField` when set. Shared
+     * by the DataProvider (per page row) and the ResolveValue (pre-bound value) so they stay consistent.
+     *
+     * @param {any} pRecord @param {string} pValueField @param {string} pTextField
+     * @param {false | Record<string, any>} pJoinConfig @param {string|false} pTagField
+     * @return {{Value:any, Text:any, Record:any, Tag?:any}}
+     */
+    _composeOption(pRecord: any, pValueField: string, pTextField: string, pJoinConfig: false | Record<string, any>, pTagField: string | false): {
+        Value: any;
+        Text: any;
+        Record: any;
+        Tag?: any;
+    };
     /**
      * Fetch-then-merge the join entity for a page of searched records. Collects the unique FK ids the
      * rows carry (`JoinConfig.FKColumn`), issues ONE `FBL~{PKColumn}~INN~<ids>` request against the join

package/types/providers/Pict-Provider-Picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pict-Provider-Picker.d.ts","sourceRoot":"","sources":["../../source/providers/Pict-Provider-Picker.js"],"names":[],"mappings":";AAmFA;;;GAGG;AACH;IAEC,2DASC;IAED;;;;;;;;;;;;;;OAcG;IACH,0BAZW,MAAM,WAEN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAQlB,GAAG,CAqBd;IAED;;;;;;;;;;;OAWG;IACH,iCAJW,KAAK,CAAC,MAAM,CAAC,SACb,MAAM,GACL,MAAM,CAWjB;IAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACH,kCAzBW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAuBlB,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAC,CAAC,CA6DnG;IAED;;;;;;;OAOG;IACH,4BAHW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAClB,KAAK,GAAG;QAAC,MAAM,EAAC,MAAM,CAAC;QAAC,QAAQ,EAAC,MAAM,CAAC;QAAC,QAAQ,EAAC,MAAM,CAAC;QAAC,YAAY,EAAC,MAAM,CAAC;QAAC,KAAK,EAAC,OAAO,CAAC;QAAC,SAAS,EAAC,MAAM,CAAA;KAAC,CAe1H;IAED;;;;;;OAMG;IACH,8BAHW,GAAG,aAAoB,GAAG,UAAoB,OAAO,cAAiB,MAAM,GAC3E,GAAG,CAOd;IAED;;;;;;;;;OASG;IACH,mCAHW,KAAK,CAAC,GAAG,CAAC,eAAmB,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACvD,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAmC9B;IAED;;;;;;OAMG;IACH,kCAHW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAClB,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAuCxC;IAED;;;;;;;;;OASG;IACH,gCAJW,MAAM,WACN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAClB,GAAG,CAQd;CACD;;;;;AAjUD,kCAAkC;AAClC,sCADW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAO5B"}
+{"version":3,"file":"Pict-Provider-Picker.d.ts","sourceRoot":"","sources":["../../source/providers/Pict-Provider-Picker.js"],"names":[],"mappings":";AA6FA;;;GAGG;AACH;IAEC,2DASC;IAED;;;;;;;;;;;;;;OAcG;IACH,0BAZW,MAAM,WAEN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAQlB,GAAG,CAqBd;IAED;;;;;;;;;;;OAWG;IACH,iCAJW,KAAK,CAAC,MAAM,CAAC,SACb,MAAM,GACL,MAAM,CAWjB;IAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgCG;IACH,kCA5BW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GA0BlB,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAC,CAAC,CAyDnG;IAED;;;;;;;OAOG;IACH,4BAHW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAClB,KAAK,GAAG;QAAC,MAAM,EAAC,MAAM,CAAC;QAAC,QAAQ,EAAC,MAAM,CAAC;QAAC,QAAQ,EAAC,MAAM,CAAC;QAAC,YAAY,EAAC,MAAM,CAAC;QAAC,KAAK,EAAC,OAAO,CAAC;QAAC,SAAS,EAAC,MAAM,CAAA;KAAC,CAe1H;IAED;;;;;;OAMG;IACH,8BAHW,GAAG,aAAoB,GAAG,UAAoB,OAAO,cAAiB,MAAM,GAC3E,GAAG,CAOd;IAED;;;;;;;;OAQG;IACH,wBAJW,GAAG,eAAkB,MAAM,cAAsB,MAAM,eACvD,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,aAAsB,MAAM,GAAC,KAAK,GAC5D;QAAC,KAAK,EAAC,GAAG,CAAC;QAAC,IAAI,EAAC,GAAG,CAAC;QAAC,MAAM,EAAC,GAAG,CAAC;QAAC,GAAG,CAAC,EAAC,GAAG,CAAA;KAAC,CAUtD;IAED;;;;;;;;;OASG;IACH,mCAHW,KAAK,CAAC,GAAG,CAAC,eAAmB,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACvD,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAmC9B;IAED;;;;;;OAMG;IACH,kCAHW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAClB,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAqCxC;IAED;;;;;;;;;OASG;IACH,gCAJW,MAAM,WACN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAClB,GAAG,CAQd;CACD;;;;;AAjVD,kCAAkC;AAClC,sCADW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAO5B"}

package/types/views/PictView-Picker.d.ts

@@ -48,11 +48,22 @@ declare class PictViewPicker extends libPictView {
      * @param {Array<any>} pValues
      */
     _seedSelectedRecords(pValues: Array<any>): void;
-    /** @return {Array<{Value:any, Text:string}>} The current option source rows (async results or static Options). */
+    /** @return {Array<{Value:any, Text:string, Tag?:any}>} The current option source rows (async results or static Options). */
     _sourceRows(): Array<{
         Value: any;
         Text: string;
+        Tag?: any;
     }>;
+    /**
+     * Build the EntityTag before/after render slots for a record. Exactly one slot is populated (per the
+     * TagLast option) and only when a tag value is present, so a tag-less row renders no badge.
+     * @param {any} pTag @param {boolean} pTagLast
+     * @return {{TagBeforeSlot:Array<any>, TagAfterSlot:Array<any>}}
+     */
+    _tagSlots(pTag: any, pTagLast: boolean): {
+        TagBeforeSlot: Array<any>;
+        TagAfterSlot: Array<any>;
+    };
     /**
      * (Re)compute the picker's render state into AppData: the displayed value / chips + the
      * (search-filtered) option list with selected/highlight flags.
@@ -62,11 +73,12 @@ declare class PictViewPicker extends libPictView {
      * Find the {Value,Text} record for a value: the stored selection record (authoritative for chips /
      * async), else a row in the current source (static Options or loaded results).
      * @param {any} pValue
-     * @return {{Value:any, Text:string}|null}
+     * @return {{Value:any, Text:string, Tag?:any}|null}
      */
     _lookupRecord(pValue: any): {
         Value: any;
         Text: string;
+        Tag?: any;
     } | null;
     /**
      * Load a page of results from the async DataProvider, accumulating (append) or replacing the list.

package/types/views/PictView-Picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PictView-Picker.d.ts","sourceRoot":"","sources":["../../source/views/PictView-Picker.js"],"names":[],"mappings":";AA6KA;IAEC,2DA0CC;IAlCA,sBAA2E;IAQ3E,eAAkB;IAClB,gBAAiB;IACjB,mBAAoB;IAEpB,sBAAwB;IACxB,cAAc;IACd,kBAAqB;IACrB,kBAAqB;IACrB,iBAAoB;IACpB,6BAAwB;IACxB,mBAAyB;IAGzB,eAAiB;IACjB,qBAA0B;IAc3B,6FAA6F;IAC7F,YADa,OAAO,CAInB;IAED,8EAA8E;IAC9E,YADa,OAAO,CAInB;IAED,4EAA4E;IAC5E,UADa,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAM/B;IAED,qGAAqG;IACrG,8BA+BC;IAED;;;OAGG;IACH,YAHY,GAAG,CAgBd;IAED;;;;OAIG;IACH,kBAFW,GAAG,QA6Bb;IAvBC,YAAoB;IAyBtB;;;;;;OAMG;IACH,iBAHW,GAAG,GACF,cAAc,CAqBzB;IAED;;;;OAIG;IACH,8BAFW,KAAK,CAAC,GAAG,CAAC,QA0BpB;IAED,kHAAkH;IAClH,eADa,KAAK,CAAC;QAAC,KAAK,EAAC,GAAG,CAAC;QAAC,IAAI,EAAC,MAAM,CAAA;KAAC,CAAC,CAK3C;IAED;;;OAGG;IACH,mCAgGC;IAED;;;;;OAKG;IACH,sBAHW,GAAG,GACF;QAAC,KAAK,EAAC,GAAG,CAAC;QAAC,IAAI,EAAC,MAAM,CAAA;KAAC,GAAC,IAAI,CAQxC;IAED;;;;OAIG;IACH,iBAHW,MAAM,WACN,OAAO,QA4BjB;IAWD,uCAAuC;IACvC,0BAIC;IAED,+EAA+E;IAC/E,gCAWC;IAED,kDAAkD;IAClD,aASC;IAED;;;;OAIG;IACH,qBAgCC;IAED,0DAA0D;IAC1D,iBAMC;IAED,0BAA0B;IAC1B,cAKC;IAED,6DAA6D;IAC7D,mBAIC;IAED,kFAAkF;IAClF,oBAKC;IAED;sGACkG;IAClG,qBAKC;IAED,2EAA2E;IAC3E,eADY,MAAM,QAejB;IAED,iGAAiG;IACjG,+BAgCC;IAED;;;;OAIG;IACH,kBAFW,MAAM,QA4ChB;IAED,sGAAsG;IACtG,sBADa,KAAK,CAAC;QAAC,KAAK,EAAC,GAAG,CAAC;QAAC,IAAI,EAAC,MAAM,CAAA;KAAC,CAAC,CAI3C;IAED;;;;OAIG;IACH,yBA6CC;IAED,oFAAoF;IACpF,iCAWC;CAWD;;;;;AA30BD,kCAAkC;AAClC,sCADW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAyK5B"}
+{"version":3,"file":"PictView-Picker.d.ts","sourceRoot":"","sources":["../../source/views/PictView-Picker.js"],"names":[],"mappings":";AAyLA;IAEC,2DA0CC;IAlCA,sBAA2E;IAQ3E,eAAkB;IAClB,gBAAiB;IACjB,mBAAoB;IAEpB,sBAAwB;IACxB,cAAc;IACd,kBAAqB;IACrB,kBAAqB;IACrB,iBAAoB;IACpB,6BAAwB;IACxB,mBAAyB;IAGzB,eAAiB;IACjB,qBAA0B;IAc3B,6FAA6F;IAC7F,YADa,OAAO,CAInB;IAED,8EAA8E;IAC9E,YADa,OAAO,CAInB;IAED,4EAA4E;IAC5E,UADa,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAM/B;IAED,qGAAqG;IACrG,8BA+BC;IAED;;;OAGG;IACH,YAHY,GAAG,CAgBd;IAED;;;;OAIG;IACH,kBAFW,GAAG,QA6Bb;IAvBC,YAAoB;IAyBtB;;;;;;OAMG;IACH,iBAHW,GAAG,GACF,cAAc,CAqBzB;IAED;;;;OAIG;IACH,8BAFW,KAAK,CAAC,GAAG,CAAC,QA0BpB;IAED,4HAA4H;IAC5H,eADa,KAAK,CAAC;QAAC,KAAK,EAAC,GAAG,CAAC;QAAC,IAAI,EAAC,MAAM,CAAC;QAAC,GAAG,CAAC,EAAC,GAAG,CAAA;KAAC,CAAC,CAKrD;IAED;;;;;OAKG;IACH,gBAHW,GAAG,YAAe,OAAO,GACxB;QAAC,aAAa,EAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAAC,YAAY,EAAC,KAAK,CAAC,GAAG,CAAC,CAAA;KAAC,CAU9D;IAED;;;OAGG;IACH,mCAmGC;IAED;;;;;OAKG;IACH,sBAHW,GAAG,GACF;QAAC,KAAK,EAAC,GAAG,CAAC;QAAC,IAAI,EAAC,MAAM,CAAC;QAAC,GAAG,CAAC,EAAC,GAAG,CAAA;KAAC,GAAC,IAAI,CAQlD;IAED;;;;OAIG;IACH,iBAHW,MAAM,WACN,OAAO,QA4BjB;IAWD,uCAAuC;IACvC,0BAIC;IAED,+EAA+E;IAC/E,gCAWC;IAED,kDAAkD;IAClD,aASC;IAED;;;;OAIG;IACH,qBAgCC;IAED,0DAA0D;IAC1D,iBAMC;IAED,0BAA0B;IAC1B,cAKC;IAED,6DAA6D;IAC7D,mBAIC;IAED,kFAAkF;IAClF,oBAKC;IAED;sGACkG;IAClG,qBAKC;IAED,2EAA2E;IAC3E,eADY,MAAM,QAejB;IAED,iGAAiG;IACjG,+BAgCC;IAED;;;;OAIG;IACH,kBAFW,MAAM,QA6ChB;IAED,sGAAsG;IACtG,sBADa,KAAK,CAAC;QAAC,KAAK,EAAC,GAAG,CAAC;QAAC,IAAI,EAAC,MAAM,CAAA;KAAC,CAAC,CAI3C;IAED;;;;OAIG;IACH,yBA6CC;IAED,oFAAoF;IACpF,iCAWC;CAWD;;;;;AA32BD,kCAAkC;AAClC,sCADW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAqL5B"}