@magicx-eng/ai-autocomplete-angular 0.28.4 → 0.29.1

package/fesm2020/magicx-eng-ai-autocomplete-angular.mjs

@@ -1,4 +1,4 @@
-import { WEEKDAY_LABELS as WEEKDAY_LABELS$1, cellIso as cellIso$1, monthLabel as monthLabel$1, cellDay as cellDay$1, isoDate as isoDate$1, dateCellMarks as dateCellMarks$1, visibleDateRange as visibleDateRange$1, productInitial, attachProductRowWheel, optionsGridTemplateColumns, optionLabel as optionLabel$1, optionImageSrc as optionImageSrc$1, formatOptionCount as formatOptionCount$1, sanitizeOptionIconSvg as sanitizeOptionIconSvg$1, planOptionsGrid, sameOptionRows, isOptionsGridMobileViewport, needsOptionsGridMeasurement, measureOptionsGrid, optionEnterDelayMs, SCROLL_ARROW_LABEL, buildAttributionUrl, containScroll, attachScrollArrow, isCalendarFormat, getFooterHint, AIAutocomplete, dateSelectionFor, identifiedParamLabel, renderEditableContent, getCursorOffset, extractPlainText, plainTextLength, setCursorOffset, ModeController, buildSubmitResult as buildSubmitResult$1, withSkippedParams as withSkippedParams$1, formatDate as formatDate$1, parseDate as parseDate$1, parseLooseDate as parseLooseDate$1, DATE_RANGE_META_END as DATE_RANGE_META_END$1, DATE_RANGE_META_START as DATE_RANGE_META_START$1, formatDateRange as formatDateRange$1, parseLooseDateRange as parseLooseDateRange$1, selectedRangeFor as selectedRangeFor$1, DEFAULT_OPTION_COUNT_UNIT as DEFAULT_OPTION_COUNT_UNIT$1, optionCountLabel as optionCountLabel$1, optionHasImage as optionHasImage$1, PRODUCT_PATH_PREFIX as PRODUCT_PATH_PREFIX$1, productFromMatchedItem as productFromMatchedItem$1, productsFromCustomFields as productsFromCustomFields$1 } from '@magicx-eng/ai-autocomplete-vanilla';
+import { WEEKDAY_LABELS as WEEKDAY_LABELS$1, cellIso as cellIso$1, monthLabel as monthLabel$1, cellDay as cellDay$1, isoDate as isoDate$1, dateCellMarks as dateCellMarks$1, visibleDateRange as visibleDateRange$1, productInitial, attachProductRowWheel, optionsGridTemplateColumns, optionLabel as optionLabel$1, optionImageSrc as optionImageSrc$1, formatOptionCount as formatOptionCount$1, sanitizeOptionIconSvg as sanitizeOptionIconSvg$1, planOptionsGrid, sameOptionRows, isOptionsGridMobileViewport, needsOptionsGridMeasurement, measureOptionsGrid, optionEnterDelayMs, SCROLL_ARROW_LABEL, buildAttributionUrl, containScroll, attachScrollArrow, isCalendarFormat, getFooterHint, AIAutocomplete, dateSelectionFor, identifiedParamLabel, renderEditableContent, chipIdFromTap, keepCaretOnChip, getCursorOffset, extractPlainText, plainTextLength, setCursorOffset, ModeController, buildSubmitResult as buildSubmitResult$1, withSkippedParams as withSkippedParams$1, formatDate as formatDate$1, parseDate as parseDate$1, parseLooseDate as parseLooseDate$1, DATE_RANGE_META_END as DATE_RANGE_META_END$1, DATE_RANGE_META_START as DATE_RANGE_META_START$1, formatDateRange as formatDateRange$1, parseLooseDateRange as parseLooseDateRange$1, selectedRangeFor as selectedRangeFor$1, DEFAULT_OPTION_COUNT_UNIT as DEFAULT_OPTION_COUNT_UNIT$1, optionCountLabel as optionCountLabel$1, optionHasImage as optionHasImage$1, PRODUCT_PATH_PREFIX as PRODUCT_PATH_PREFIX$1, productFromMatchedItem as productFromMatchedItem$1, productsFromCustomFields as productsFromCustomFields$1 } from '@magicx-eng/ai-autocomplete-vanilla';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -1355,6 +1355,15 @@ class AIAutocompleteController {
             return;
         this.core.reset();
     }
+    /**
+     * Records a submit in telemetry. Enter is recorded by the SDK; call this
+     * from a submit button you render, so each submit is counted once.
+     */
+    recordSubmit(result) {
+        if (this.isDestroyed)
+            return;
+        this.core.recordSubmit(result);
+    }
     /** Pick a dropdown option (or replace the re-edited param if in re-edit mode). */
     selectOption(option) {
         if (this.isDestroyed)
@@ -1729,6 +1738,23 @@ class AIAutocompleteEditorHostDirective {
         }
     }
     // === Host event handlers ===
+    /**
+     * A tap on a chip opens *that* chip. Touch browsers place the caret where
+     * they see fit (iOS snaps it to a word boundary, and the focusing tap often
+     * parks it at the end of the text — inside the last chip when the input ends
+     * with one), so the selectionchange path can miss the tapped chip or open
+     * the wrong one. The click target is the element actually hit and overrides
+     * it; `keepCaretOnChip` then pulls a stray caret onto the tapped chip so the
+     * next selectionchange doesn't close or redirect what the tap opened.
+     */
+    onClick(event) {
+        const el = this.el.nativeElement;
+        const id = chipIdFromTap(el, event.target);
+        if (!id)
+            return;
+        this.controller.startEditingParam(id);
+        keepCaretOnChip(el, id);
+    }
     onCompositionStart() {
         this.composing = true;
     }
@@ -1876,7 +1902,7 @@ class AIAutocompleteEditorHostDirective {
     }
 }
 AIAutocompleteEditorHostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteEditorHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-AIAutocompleteEditorHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AIAutocompleteEditorHostDirective, isStandalone: true, selector: "[aiaEditorHost]", inputs: { controller: ["aiaEditorHost", "controller"], autoFocus: "autoFocus", showChipIcons: "showChipIcons", showChipImages: "showChipImages" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "spellcheck": "true", "enterkeyhint": "send", "tabindex": "0" }, listeners: { "input": "onInput()", "keydown": "onKeyDown($event)", "compositionstart": "onCompositionStart()", "compositionend": "onCompositionEnd()", "paste": "onPaste($event)", "focus": "onFocus()", "blur": "onBlur()" } }, usesOnChanges: true, ngImport: i0 });
+AIAutocompleteEditorHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AIAutocompleteEditorHostDirective, isStandalone: true, selector: "[aiaEditorHost]", inputs: { controller: ["aiaEditorHost", "controller"], autoFocus: "autoFocus", showChipIcons: "showChipIcons", showChipImages: "showChipImages" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "spellcheck": "true", "enterkeyhint": "send", "tabindex": "0" }, listeners: { "input": "onInput()", "keydown": "onKeyDown($event)", "compositionstart": "onCompositionStart()", "compositionend": "onCompositionEnd()", "paste": "onPaste($event)", "click": "onClick($event)", "focus": "onFocus()", "blur": "onBlur()" } }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteEditorHostDirective, decorators: [{
             type: Directive,
             args: [{
@@ -1894,6 +1920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         "(compositionstart)": "onCompositionStart()",
                         "(compositionend)": "onCompositionEnd()",
                         "(paste)": "onPaste($event)",
+                        "(click)": "onClick($event)",
                         "(focus)": "onFocus()",
                         "(blur)": "onBlur()",
                     },
@@ -2047,6 +2074,7 @@ class AIAutocompleteComponent {
         this.controller = new AIAutocompleteController({
             apiConfig: this.apiConfig,
             additionalContext: this.additionalContext,
+            visitorId: this.visitorId,
             optionOverrides: this.optionOverrides,
             maskCompletedText: this.maskCompletedText,
             columns: this.columns,
@@ -2131,6 +2159,7 @@ class AIAutocompleteComponent {
         // Reactive options
         if (changes["apiConfig"] ||
             changes["additionalContext"] ||
+            changes["visitorId"] ||
             changes["optionOverrides"] ||
             changes["dropdownTrigger"] ||
             changes["optionsPosition"] ||
@@ -2141,6 +2170,7 @@ class AIAutocompleteComponent {
             this.controller.update({
                 apiConfig: this.apiConfig,
                 additionalContext: this.additionalContext,
+                visitorId: this.visitorId,
                 optionOverrides: this.optionOverrides,
                 dropdownTrigger: this.dropdownTrigger,
                 optionsPosition: this.optionsPosition,
@@ -2273,18 +2303,23 @@ class AIAutocompleteComponent {
      * the React component uses — so the emitted query reflects whatever's in
      * the DOM right now, not a possibly-stale state snapshot.
      */
-    handleSubmit(_result) {
+    // `fromButton`: the SDK records an Enter submit itself before it calls back
+    // here; a click on our own button never passes through it.
+    handleSubmit(_result, fromButton = false) {
         const editor = this.editorRef?.nativeElement;
         if (!editor)
             return;
         const text = extractPlainText(editor);
         const state = this.controller.getState();
         const params = this.completedParams ?? state.completedParams;
-        this.submitted.emit(buildSubmitResult$1(text, params, state.skippedParams, {
+        const result = buildSubmitResult$1(text, params, state.skippedParams, {
             identifiedParams: state.identifiedParams,
             isReady: state.isReady,
             customFields: state.customFields,
-        }));
+        });
+        if (fromButton)
+            this.controller.recordSubmit(result);
+        this.submitted.emit(result);
         if (this.resetOnSubmit)
             this.controller.reset();
     }
@@ -2301,7 +2336,7 @@ class AIAutocompleteComponent {
             completed_params: [],
             identified_params: [],
             is_ready: state.isReady,
-        });
+        }, true);
     }
     measurePillWrap() {
         const container = this.pillContainerRef?.nativeElement;
@@ -2328,7 +2363,7 @@ class AIAutocompleteComponent {
     }
 }
 AIAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AIAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AIAutocompleteComponent, isStandalone: true, selector: "ai-autocomplete", inputs: { apiConfig: "apiConfig", additionalContext: "additionalContext", optionOverrides: "optionOverrides", maskCompletedText: "maskCompletedText", columns: "columns", pillPlacement: "pillPlacement", mode: "mode", optionsPosition: "optionsPosition", animations: "animations", dropdownTrigger: "dropdownTrigger", closeDropdownOnBlur: "closeDropdownOnBlur", showNonTappableOptions: "showNonTappableOptions", showSkipButton: "showSkipButton", showOptionIcons: "showOptionIcons", showOptionImages: "showOptionImages", showOptionCounts: "showOptionCounts", productsLayout: "productsLayout", productImageFallback: "productImageFallback", showChipIcons: "showChipIcons", showChipImages: "showChipImages", autoFocus: "autoFocus", value: "value", completedParams: "completedParams", showProducts: "showProducts", products: "products", submitButton: "submitButton", resetOnSubmit: "resetOnSubmit" }, outputs: { submitted: "submitted", resultChange: "resultChange", errored: "errored", valueChange: "valueChange", completedParamsChange: "completedParamsChange", focused: "focused", blurred: "blurred", productSelect: "productSelect" }, providers: [
+AIAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AIAutocompleteComponent, isStandalone: true, selector: "ai-autocomplete", inputs: { apiConfig: "apiConfig", additionalContext: "additionalContext", visitorId: "visitorId", optionOverrides: "optionOverrides", maskCompletedText: "maskCompletedText", columns: "columns", pillPlacement: "pillPlacement", mode: "mode", optionsPosition: "optionsPosition", animations: "animations", dropdownTrigger: "dropdownTrigger", closeDropdownOnBlur: "closeDropdownOnBlur", showNonTappableOptions: "showNonTappableOptions", showSkipButton: "showSkipButton", showOptionIcons: "showOptionIcons", showOptionImages: "showOptionImages", showOptionCounts: "showOptionCounts", productsLayout: "productsLayout", productImageFallback: "productImageFallback", showChipIcons: "showChipIcons", showChipImages: "showChipImages", autoFocus: "autoFocus", value: "value", completedParams: "completedParams", showProducts: "showProducts", products: "products", submitButton: "submitButton", resetOnSubmit: "resetOnSubmit" }, outputs: { submitted: "submitted", resultChange: "resultChange", errored: "errored", valueChange: "valueChange", completedParamsChange: "completedParamsChange", focused: "focused", blurred: "blurred", productSelect: "productSelect" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -2356,6 +2391,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], additionalContext: [{
                 type: Input
+            }], visitorId: [{
+                type: Input
             }], optionOverrides: [{
                 type: Input
             }], maskCompletedText: [{