@magicx-eng/ai-autocomplete-angular 0.28.0 → 0.28.2

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

@@ -1,8 +1,8 @@
-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, 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, 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';
-import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, inject, ChangeDetectorRef, HostListener, ElementRef, Renderer2, NgZone, Directive, PLATFORM_ID, forwardRef, NgModule } from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, inject, ChangeDetectorRef, HostListener, ElementRef, NgZone, Renderer2, Directive, PLATFORM_ID, forwardRef, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BehaviorSubject, combineLatest, map as map$1, distinctUntilChanged, shareReplay, Subject, takeUntil } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -466,10 +466,10 @@ class GridComponent {
     }
 }
 GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GridComponent, isStandalone: true, selector: "aia-grid", inputs: { min: "min", max: "max", gap: "gap", scroll: "scroll", maxHeight: "maxHeight", scrollResetKey: "scrollResetKey", cols: "cols", template: "template", group: "group" }, host: { classAttribute: "aia-grid-host" }, viewQueries: [{ propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #grid\n  class=\"aia-grid\"\n  [attr.data-scroll]=\"scroll ? '' : null\"\n  [attr.data-aia-group]=\"group ?? null\"\n  [style.--aia-grid-min]=\"min\"\n  [style.--aia-grid-max]=\"max\"\n  [style.--aia-grid-gap]=\"gap\"\n  [style.--aia-grid-max-height]=\"maxHeight\"\n  [style.grid-template-columns]=\"templateColumns\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".aia-grid-host{display:contents}.aia-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--aia-grid-min),100%),var(--aia-grid-max, 1fr)));gap:var(--aia-grid-gap, 0)}.aia-grid[data-scroll]{grid-auto-rows:min-content;align-content:start;justify-content:start;max-height:var(--aia-grid-max-height, 120px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--aia-scrollbar-thumb, rgba(0, 0, 0, .3)) transparent}.aia-grid[data-scroll]::-webkit-scrollbar{width:6px}.aia-grid[data-scroll]::-webkit-scrollbar-track{background:transparent}.aia-grid[data-scroll]::-webkit-scrollbar-thumb{background:var(--aia-scrollbar-thumb, rgba(0, 0, 0, .3));border-radius:3px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GridComponent, isStandalone: true, selector: "aia-grid", inputs: { min: "min", max: "max", gap: "gap", scroll: "scroll", maxHeight: "maxHeight", scrollResetKey: "scrollResetKey", cols: "cols", template: "template", group: "group" }, host: { classAttribute: "aia-grid-host" }, viewQueries: [{ propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #grid\n  class=\"aia-grid\"\n  [attr.data-scroll]=\"scroll ? '' : null\"\n  [attr.data-aia-group]=\"group ?? null\"\n  [style.--aia-grid-min]=\"min\"\n  [style.--aia-grid-max]=\"max\"\n  [style.--aia-grid-gap]=\"gap\"\n  [style.--aia-grid-max-height]=\"maxHeight\"\n  [style.grid-template-columns]=\"templateColumns\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".aia-grid-host{display:contents}.aia-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--aia-grid-min),100%),var(--aia-grid-max, 1fr)));gap:var(--aia-grid-gap, 0)}.aia-grid[data-scroll]{grid-auto-rows:min-content;align-content:start;justify-content:start;max-height:var(--aia-grid-max-height, 120px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.aia-grid[data-scroll]::-webkit-scrollbar{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
-            args: [{ selector: "aia-grid", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: "aia-grid-host" }, template: "<div\n  #grid\n  class=\"aia-grid\"\n  [attr.data-scroll]=\"scroll ? '' : null\"\n  [attr.data-aia-group]=\"group ?? null\"\n  [style.--aia-grid-min]=\"min\"\n  [style.--aia-grid-max]=\"max\"\n  [style.--aia-grid-gap]=\"gap\"\n  [style.--aia-grid-max-height]=\"maxHeight\"\n  [style.grid-template-columns]=\"templateColumns\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".aia-grid-host{display:contents}.aia-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--aia-grid-min),100%),var(--aia-grid-max, 1fr)));gap:var(--aia-grid-gap, 0)}.aia-grid[data-scroll]{grid-auto-rows:min-content;align-content:start;justify-content:start;max-height:var(--aia-grid-max-height, 120px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--aia-scrollbar-thumb, rgba(0, 0, 0, .3)) transparent}.aia-grid[data-scroll]::-webkit-scrollbar{width:6px}.aia-grid[data-scroll]::-webkit-scrollbar-track{background:transparent}.aia-grid[data-scroll]::-webkit-scrollbar-thumb{background:var(--aia-scrollbar-thumb, rgba(0, 0, 0, .3));border-radius:3px}\n"] }]
+            args: [{ selector: "aia-grid", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: "aia-grid-host" }, template: "<div\n  #grid\n  class=\"aia-grid\"\n  [attr.data-scroll]=\"scroll ? '' : null\"\n  [attr.data-aia-group]=\"group ?? null\"\n  [style.--aia-grid-min]=\"min\"\n  [style.--aia-grid-max]=\"max\"\n  [style.--aia-grid-gap]=\"gap\"\n  [style.--aia-grid-max-height]=\"maxHeight\"\n  [style.grid-template-columns]=\"templateColumns\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".aia-grid-host{display:contents}.aia-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--aia-grid-min),100%),var(--aia-grid-max, 1fr)));gap:var(--aia-grid-gap, 0)}.aia-grid[data-scroll]{grid-auto-rows:min-content;align-content:start;justify-content:start;max-height:var(--aia-grid-max-height, 120px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.aia-grid[data-scroll]::-webkit-scrollbar{display:none}\n"] }]
         }], propDecorators: { min: [{
                 type: Input
             }], max: [{
@@ -868,6 +868,8 @@ class AIAutocompleteDropdownComponent {
         /** Concrete resolved mode, or null when `mode` is unset (inherit from ancestor). */
         this.resolvedMode = null;
         this.cdr = inject(ChangeDetectorRef);
+        this.host = inject(ElementRef);
+        this.zone = inject(NgZone);
         /** Fallback skeleton-bar widths used when loading with zero cached options. */
         this.fallbackSkeletonBarWidths = [159, 119, 164];
         /** Accessible name of the "more below" scroll arrow. */
@@ -914,6 +916,12 @@ class AIAutocompleteDropdownComponent {
         this.showOptionCounts$.next(this.showOptionCounts);
         this.applyMode();
         this.initVm();
+        // Wheel/touch over the dropdown never scrolls the page behind it. On the
+        // host, so it survives the *ngIf root coming and going; outside the zone,
+        // so a wheel gesture doesn't run change detection on every event.
+        this.zone.runOutsideAngular(() => {
+            this.releaseScroll = containScroll(this.host.nativeElement);
+        });
     }
     ngOnChanges(changes) {
         if (changes["showPills"]) {
@@ -973,6 +981,7 @@ class AIAutocompleteDropdownComponent {
     }
     ngOnDestroy() {
         this.teardownModeListener();
+        this.releaseScroll?.();
         this.scrollArrowBinding?.controller.destroy();
         this.scrollArrowBinding = null;
     }