@magicx-eng/ai-autocomplete-angular 0.17.1 → 0.18.0

package/fesm2015/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, optionsGridTemplateColumns, optionLabel as optionLabel$1, sanitizeOptionIconSvg as sanitizeOptionIconSvg$1, planOptionsGrid, 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 } 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, optionsGridTemplateColumns, optionLabel as optionLabel$1, sanitizeOptionIconSvg as sanitizeOptionIconSvg$1, planOptionsGrid, 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, 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';
@@ -322,14 +322,14 @@ class ProductStripComponent {
          * re-render rather than reuse the previous card's bindings.
          */
         this.trackByProduct = (_, product) => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             return [
                 product.id,
                 product.title,
-                product.url,
-                (_a = product.imageUrl) !== null && _a !== void 0 ? _a : "",
-                (_b = product.price) !== null && _b !== void 0 ? _b : "",
-                (_c = product.vendor) !== null && _c !== void 0 ? _c : "",
+                (_a = product.url) !== null && _a !== void 0 ? _a : "",
+                (_b = product.imageUrl) !== null && _b !== void 0 ? _b : "",
+                (_c = product.price) !== null && _c !== void 0 ? _c : "",
+                (_d = product.vendor) !== null && _d !== void 0 ? _d : "",
             ].join("");
         };
     }
@@ -366,10 +366,10 @@ class ProductStripComponent {
     }
 }
 ProductStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProductStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProductStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ProductStripComponent, isStandalone: true, selector: "aia-product-strip", inputs: { products: "products", listboxId: "listboxId", focusable: "focusable" }, outputs: { select: "select", focusChange: "focusChange" }, ngImport: i0, template: "<!-- `group` is the one role a listbox accepts around a set of options, so the\n     strip stays inside the listbox without breaking its content model. -->\n<section\n  *ngIf=\"products.length > 0\"\n  class=\"aia-products\"\n  data-aia-products=\"\"\n  role=\"group\"\n  [attr.aria-labelledby]=\"labelId\"\n>\n  <div class=\"aia-products-label\" [id]=\"labelId\">Products</div>\n\n  <div class=\"aia-products-row\" data-aia-products-row=\"\">\n    <!-- A real <a href> rather than a <div>: it keeps the browser's own link\n         affordances \u2014 cmd/ctrl-click for a new tab, middle-click, right-click \u2192\n         \"copy link address\". role=\"option\" overrides how assistive tech\n         announces it, which is correct inside a listbox; the deliberate trade\n         is that AT no longer calls it a link. -->\n    <a\n      *ngFor=\"let product of products; let i = index; trackBy: trackByProduct\"\n      [id]=\"cardId(i)\"\n      class=\"aia-product\"\n      data-aia-product=\"\"\n      role=\"option\"\n      [attr.aria-selected]=\"false\"\n      [href]=\"product.url\"\n      [attr.tabindex]=\"focusable ? 0 : -1\"\n      (click)=\"onClick($event, product)\"\n      (keydown)=\"onKeyDown($event, product)\"\n      (focus)=\"onCardFocus()\"\n      (blur)=\"onCardBlur($event)\"\n    >\n      <!-- Catalogues without images are common enough that the placeholder is\n           a first-class state, not an error state. -->\n      <span\n        class=\"aia-product-media\"\n        [attr.data-aia-product-placeholder]=\"product.imageUrl ? null : ''\"\n      >\n        <!-- alt=\"\" on purpose: the title is already the card's accessible\n             name, and repeating it would have a screen reader read it twice. -->\n        <img\n          *ngIf=\"product.imageUrl\"\n          class=\"aia-product-image\"\n          [src]=\"product.imageUrl\"\n          alt=\"\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        />\n      </span>\n\n      <!-- Every field but the title is optional, so absent ones render no\n           element at all \u2014 the column gap can't leave a hole for a box that\n           isn't there. -->\n      <span class=\"aia-product-body\">\n        <span *ngIf=\"product.vendor\" class=\"aia-product-vendor\">{{ product.vendor }}</span>\n        <span class=\"aia-product-title\">{{ product.title }}</span>\n        <span *ngIf=\"product.price\" class=\"aia-product-price\">{{ product.price }}</span>\n      </span>\n    </a>\n  </div>\n</section>\n", styles: [".aia-products{display:flex;flex-direction:column;gap:6px;padding:0 8px;min-width:0}.aia-products-label{font-family:inherit;font-size:var(--aia-products-label-font-size, 11px);font-weight:500;line-height:18px;letter-spacing:.02em;color:var( --aia-products-label-color, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)) )}.aia-products-row{display:flex;gap:var(--aia-product-gap, 8px);min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none}.aia-products-row::-webkit-scrollbar{display:none}.aia-product{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;width:var(--aia-product-card-width, 116px);padding:6px;border-radius:10px;background:var(--aia-product-bg, transparent);color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));text-decoration:none;cursor:pointer;transition:background-color .15s ease}.aia-product:hover{background:var(--aia-product-bg-active, var(--aia-option-bg, transparent))}.aia-product:focus-visible{outline:2px solid var(--aia-product-focus-ring, var(--aia-option-color-selected, currentColor));outline-offset:-2px}.aia-product-media{display:block;position:relative;width:100%;aspect-ratio:1 / 1;border-radius:8px;overflow:hidden;background:var(--aia-product-media-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, .25)))}.aia-product-image{display:block;width:100%;height:100%;object-fit:cover}.aia-product-media[data-aia-product-placeholder]:after{content:\"\";position:absolute;inset:30%;border-radius:3px;border:1.5px solid var(--aia-product-placeholder-color, var(--aia-option-color, #c1c4cb));opacity:.35}.aia-product-body{display:flex;flex-direction:column;gap:2px;min-width:0}.aia-product-vendor{font-family:inherit;font-size:var(--aia-product-vendor-font-size, 10px);line-height:14px;color:var( --aia-product-vendor-color, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)) );opacity:.8;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.aia-product-title{font-family:inherit;font-size:var(--aia-product-title-font-size, 12px);font-weight:400;line-height:16px;color:var( --aia-product-title-color, var(--aia-option-color-selected, var(--aia-color-text-default, #fff)) );display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.aia-product-price{font-family:inherit;font-size:var(--aia-product-price-font-size, 11px);font-weight:500;line-height:15px;color:var( --aia-product-price-color, var(--aia-option-color-selected, var(--aia-color-text-default, #fff)) )}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+ProductStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ProductStripComponent, isStandalone: true, selector: "aia-product-strip", inputs: { products: "products", listboxId: "listboxId", focusable: "focusable" }, outputs: { select: "select", focusChange: "focusChange" }, ngImport: i0, template: "<!-- `group` is the one role a listbox accepts around a set of options, so the\n     strip stays inside the listbox without breaking its content model. -->\n<section\n  *ngIf=\"products.length > 0\"\n  class=\"aia-products\"\n  data-aia-products=\"\"\n  role=\"group\"\n  [attr.aria-labelledby]=\"labelId\"\n>\n  <div class=\"aia-products-label\" [id]=\"labelId\">Products</div>\n\n  <div class=\"aia-products-row\" data-aia-products-row=\"\">\n    <!-- A real <a href> rather than a <div>: it keeps the browser's own link\n         affordances \u2014 cmd/ctrl-click for a new tab, middle-click, right-click \u2192\n         \"copy link address\". role=\"option\" overrides how assistive tech\n         announces it, which is correct inside a listbox; the deliberate trade\n         is that AT no longer calls it a link. An attribute binding, so a\n         product without a url gets no href at all rather than \"null\". -->\n    <a\n      *ngFor=\"let product of products; let i = index; trackBy: trackByProduct\"\n      [id]=\"cardId(i)\"\n      class=\"aia-product\"\n      data-aia-product=\"\"\n      role=\"option\"\n      [attr.aria-selected]=\"false\"\n      [attr.href]=\"product.url ?? null\"\n      [attr.tabindex]=\"focusable ? 0 : -1\"\n      (click)=\"onClick($event, product)\"\n      (keydown)=\"onKeyDown($event, product)\"\n      (focus)=\"onCardFocus()\"\n      (blur)=\"onCardBlur($event)\"\n    >\n      <!-- Catalogues without images are common enough that the placeholder is\n           a first-class state, not an error state. -->\n      <span\n        class=\"aia-product-media\"\n        [attr.data-aia-product-placeholder]=\"product.imageUrl ? null : ''\"\n      >\n        <!-- alt=\"\" on purpose: the title is already the card's accessible\n             name, and repeating it would have a screen reader read it twice. -->\n        <img\n          *ngIf=\"product.imageUrl\"\n          class=\"aia-product-image\"\n          [src]=\"product.imageUrl\"\n          alt=\"\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        />\n      </span>\n\n      <!-- Every field but the title is optional, so absent ones render no\n           element at all \u2014 the column gap can't leave a hole for a box that\n           isn't there. -->\n      <span class=\"aia-product-body\">\n        <span *ngIf=\"product.vendor\" class=\"aia-product-vendor\">{{ product.vendor }}</span>\n        <span class=\"aia-product-title\">{{ product.title }}</span>\n        <span *ngIf=\"product.price\" class=\"aia-product-price\">{{ product.price }}</span>\n      </span>\n    </a>\n  </div>\n</section>\n", styles: [".aia-products{display:flex;flex-direction:column;gap:6px;padding:0 8px;min-width:0}.aia-products-label{font-family:inherit;font-size:var(--aia-products-label-font-size, 11px);font-weight:500;line-height:18px;letter-spacing:.02em;color:var( --aia-products-label-color, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)) )}.aia-products-row{display:flex;gap:var(--aia-product-gap, 8px);min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none}.aia-products-row::-webkit-scrollbar{display:none}.aia-product{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;width:var(--aia-product-card-width, 116px);padding:6px;border-radius:10px;background:var(--aia-product-bg, transparent);color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));text-decoration:none;cursor:pointer;transition:background-color .15s ease}.aia-product:hover{background:var(--aia-product-bg-active, var(--aia-option-bg, transparent))}.aia-product:focus-visible{outline:2px solid var(--aia-product-focus-ring, var(--aia-option-color-selected, currentColor));outline-offset:-2px}.aia-product-media{display:block;position:relative;width:100%;aspect-ratio:1 / 1;border-radius:8px;overflow:hidden;background:var(--aia-product-media-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, .25)))}.aia-product-image{display:block;width:100%;height:100%;object-fit:cover}.aia-product-media[data-aia-product-placeholder]:after{content:\"\";position:absolute;inset:30%;border-radius:3px;border:1.5px solid var(--aia-product-placeholder-color, var(--aia-option-color, #c1c4cb));opacity:.35}.aia-product-body{display:flex;flex-direction:column;gap:2px;min-width:0}.aia-product-vendor{font-family:inherit;font-size:var(--aia-product-vendor-font-size, 10px);line-height:14px;color:var( --aia-product-vendor-color, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)) );opacity:.8;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.aia-product-title{font-family:inherit;font-size:var(--aia-product-title-font-size, 12px);font-weight:400;line-height:16px;color:var( --aia-product-title-color, var(--aia-option-color-selected, var(--aia-color-text-default, #fff)) );display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.aia-product-price{font-family:inherit;font-size:var(--aia-product-price-font-size, 11px);font-weight:500;line-height:15px;color:var( --aia-product-price-color, var(--aia-option-color-selected, var(--aia-color-text-default, #fff)) )}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProductStripComponent, decorators: [{
             type: Component,
-            args: [{ selector: "aia-product-strip", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- `group` is the one role a listbox accepts around a set of options, so the\n     strip stays inside the listbox without breaking its content model. -->\n<section\n  *ngIf=\"products.length > 0\"\n  class=\"aia-products\"\n  data-aia-products=\"\"\n  role=\"group\"\n  [attr.aria-labelledby]=\"labelId\"\n>\n  <div class=\"aia-products-label\" [id]=\"labelId\">Products</div>\n\n  <div class=\"aia-products-row\" data-aia-products-row=\"\">\n    <!-- A real <a href> rather than a <div>: it keeps the browser's own link\n         affordances \u2014 cmd/ctrl-click for a new tab, middle-click, right-click \u2192\n         \"copy link address\". role=\"option\" overrides how assistive tech\n         announces it, which is correct inside a listbox; the deliberate trade\n         is that AT no longer calls it a link. -->\n    <a\n      *ngFor=\"let product of products; let i = index; trackBy: trackByProduct\"\n      [id]=\"cardId(i)\"\n      class=\"aia-product\"\n      data-aia-product=\"\"\n      role=\"option\"\n      [attr.aria-selected]=\"false\"\n      [href]=\"product.url\"\n      [attr.tabindex]=\"focusable ? 0 : -1\"\n      (click)=\"onClick($event, product)\"\n      (keydown)=\"onKeyDown($event, product)\"\n      (focus)=\"onCardFocus()\"\n      (blur)=\"onCardBlur($event)\"\n    >\n      <!-- Catalogues without images are common enough that the placeholder is\n           a first-class state, not an error state. -->\n      <span\n        class=\"aia-product-media\"\n        [attr.data-aia-product-placeholder]=\"product.imageUrl ? null : ''\"\n      >\n        <!-- alt=\"\" on purpose: the title is already the card's accessible\n             name, and repeating it would have a screen reader read it twice. -->\n        <img\n          *ngIf=\"product.imageUrl\"\n          class=\"aia-product-image\"\n          [src]=\"product.imageUrl\"\n          alt=\"\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        />\n      </span>\n\n      <!-- Every field but the title is optional, so absent ones render no\n           element at all \u2014 the column gap can't leave a hole for a box that\n           isn't there. -->\n      <span class=\"aia-product-body\">\n        <span *ngIf=\"product.vendor\" class=\"aia-product-vendor\">{{ product.vendor }}</span>\n        <span class=\"aia-product-title\">{{ product.title }}</span>\n        <span *ngIf=\"product.price\" class=\"aia-product-price\">{{ product.price }}</span>\n      </span>\n    </a>\n  </div>\n</section>\n", styles: [".aia-products{display:flex;flex-direction:column;gap:6px;padding:0 8px;min-width:0}.aia-products-label{font-family:inherit;font-size:var(--aia-products-label-font-size, 11px);font-weight:500;line-height:18px;letter-spacing:.02em;color:var( --aia-products-label-color, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)) )}.aia-products-row{display:flex;gap:var(--aia-product-gap, 8px);min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none}.aia-products-row::-webkit-scrollbar{display:none}.aia-product{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;width:var(--aia-product-card-width, 116px);padding:6px;border-radius:10px;background:var(--aia-product-bg, transparent);color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));text-decoration:none;cursor:pointer;transition:background-color .15s ease}.aia-product:hover{background:var(--aia-product-bg-active, var(--aia-option-bg, transparent))}.aia-product:focus-visible{outline:2px solid var(--aia-product-focus-ring, var(--aia-option-color-selected, currentColor));outline-offset:-2px}.aia-product-media{display:block;position:relative;width:100%;aspect-ratio:1 / 1;border-radius:8px;overflow:hidden;background:var(--aia-product-media-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, .25)))}.aia-product-image{display:block;width:100%;height:100%;object-fit:cover}.aia-product-media[data-aia-product-placeholder]:after{content:\"\";position:absolute;inset:30%;border-radius:3px;border:1.5px solid var(--aia-product-placeholder-color, var(--aia-option-color, #c1c4cb));opacity:.35}.aia-product-body{display:flex;flex-direction:column;gap:2px;min-width:0}.aia-product-vendor{font-family:inherit;font-size:var(--aia-product-vendor-font-size, 10px);line-height:14px;color:var( --aia-product-vendor-color, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)) );opacity:.8;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.aia-product-title{font-family:inherit;font-size:var(--aia-product-title-font-size, 12px);font-weight:400;line-height:16px;color:var( --aia-product-title-color, var(--aia-option-color-selected, var(--aia-color-text-default, #fff)) );display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.aia-product-price{font-family:inherit;font-size:var(--aia-product-price-font-size, 11px);font-weight:500;line-height:15px;color:var( --aia-product-price-color, var(--aia-option-color-selected, var(--aia-color-text-default, #fff)) )}\n"] }]
+            args: [{ selector: "aia-product-strip", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- `group` is the one role a listbox accepts around a set of options, so the\n     strip stays inside the listbox without breaking its content model. -->\n<section\n  *ngIf=\"products.length > 0\"\n  class=\"aia-products\"\n  data-aia-products=\"\"\n  role=\"group\"\n  [attr.aria-labelledby]=\"labelId\"\n>\n  <div class=\"aia-products-label\" [id]=\"labelId\">Products</div>\n\n  <div class=\"aia-products-row\" data-aia-products-row=\"\">\n    <!-- A real <a href> rather than a <div>: it keeps the browser's own link\n         affordances \u2014 cmd/ctrl-click for a new tab, middle-click, right-click \u2192\n         \"copy link address\". role=\"option\" overrides how assistive tech\n         announces it, which is correct inside a listbox; the deliberate trade\n         is that AT no longer calls it a link. An attribute binding, so a\n         product without a url gets no href at all rather than \"null\". -->\n    <a\n      *ngFor=\"let product of products; let i = index; trackBy: trackByProduct\"\n      [id]=\"cardId(i)\"\n      class=\"aia-product\"\n      data-aia-product=\"\"\n      role=\"option\"\n      [attr.aria-selected]=\"false\"\n      [attr.href]=\"product.url ?? null\"\n      [attr.tabindex]=\"focusable ? 0 : -1\"\n      (click)=\"onClick($event, product)\"\n      (keydown)=\"onKeyDown($event, product)\"\n      (focus)=\"onCardFocus()\"\n      (blur)=\"onCardBlur($event)\"\n    >\n      <!-- Catalogues without images are common enough that the placeholder is\n           a first-class state, not an error state. -->\n      <span\n        class=\"aia-product-media\"\n        [attr.data-aia-product-placeholder]=\"product.imageUrl ? null : ''\"\n      >\n        <!-- alt=\"\" on purpose: the title is already the card's accessible\n             name, and repeating it would have a screen reader read it twice. -->\n        <img\n          *ngIf=\"product.imageUrl\"\n          class=\"aia-product-image\"\n          [src]=\"product.imageUrl\"\n          alt=\"\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        />\n      </span>\n\n      <!-- Every field but the title is optional, so absent ones render no\n           element at all \u2014 the column gap can't leave a hole for a box that\n           isn't there. -->\n      <span class=\"aia-product-body\">\n        <span *ngIf=\"product.vendor\" class=\"aia-product-vendor\">{{ product.vendor }}</span>\n        <span class=\"aia-product-title\">{{ product.title }}</span>\n        <span *ngIf=\"product.price\" class=\"aia-product-price\">{{ product.price }}</span>\n      </span>\n    </a>\n  </div>\n</section>\n", styles: [".aia-products{display:flex;flex-direction:column;gap:6px;padding:0 8px;min-width:0}.aia-products-label{font-family:inherit;font-size:var(--aia-products-label-font-size, 11px);font-weight:500;line-height:18px;letter-spacing:.02em;color:var( --aia-products-label-color, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)) )}.aia-products-row{display:flex;gap:var(--aia-product-gap, 8px);min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none}.aia-products-row::-webkit-scrollbar{display:none}.aia-product{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;width:var(--aia-product-card-width, 116px);padding:6px;border-radius:10px;background:var(--aia-product-bg, transparent);color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));text-decoration:none;cursor:pointer;transition:background-color .15s ease}.aia-product:hover{background:var(--aia-product-bg-active, var(--aia-option-bg, transparent))}.aia-product:focus-visible{outline:2px solid var(--aia-product-focus-ring, var(--aia-option-color-selected, currentColor));outline-offset:-2px}.aia-product-media{display:block;position:relative;width:100%;aspect-ratio:1 / 1;border-radius:8px;overflow:hidden;background:var(--aia-product-media-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, .25)))}.aia-product-image{display:block;width:100%;height:100%;object-fit:cover}.aia-product-media[data-aia-product-placeholder]:after{content:\"\";position:absolute;inset:30%;border-radius:3px;border:1.5px solid var(--aia-product-placeholder-color, var(--aia-option-color, #c1c4cb));opacity:.35}.aia-product-body{display:flex;flex-direction:column;gap:2px;min-width:0}.aia-product-vendor{font-family:inherit;font-size:var(--aia-product-vendor-font-size, 10px);line-height:14px;color:var( --aia-product-vendor-color, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)) );opacity:.8;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.aia-product-title{font-family:inherit;font-size:var(--aia-product-title-font-size, 12px);font-weight:400;line-height:16px;color:var( --aia-product-title-color, var(--aia-option-color-selected, var(--aia-color-text-default, #fff)) );display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.aia-product-price{font-family:inherit;font-size:var(--aia-product-price-font-size, 11px);font-weight:500;line-height:15px;color:var( --aia-product-price-color, var(--aia-option-color-selected, var(--aia-color-text-default, #fff)) )}\n"] }]
         }], propDecorators: { products: [{
                 type: Input
             }], listboxId: [{
@@ -548,10 +548,10 @@ class SuggestionItemComponent {
     }
 }
 SuggestionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SuggestionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SuggestionItemComponent, isStandalone: true, selector: "aia-suggestion-item", inputs: { option: "option", isHighlighted: "isHighlighted", id: "id", loading: "loading", showIcon: "showIcon", scrollHint: "scrollHint", enterDelayMs: "enterDelayMs" }, outputs: { select: "select", highlight: "highlight" }, ngImport: i0, template: "<div\n  [id]=\"id\"\n  role=\"option\"\n  data-aia-option=\"\"\n  [attr.data-aia-loading]=\"loading ? '' : null\"\n  [attr.data-aia-icon]=\"iconHtml && option.icon ? option.icon : null\"\n  [attr.aria-selected]=\"isHighlighted\"\n  class=\"aia-suggestion-item\"\n  [style.--aia-option-enter-delay]=\"(enterDelay ?? 0) + 'ms'\"\n  [class.aia-suggestion-item-highlighted]=\"isHighlighted && !loading\"\n  [class.aia-suggestion-item-tappable]=\"option.is_tappable\"\n  [class.aia-suggestion-item-non-tappable]=\"!option.is_tappable\"\n  [class.aia-suggestion-item-pressed]=\"pressed\"\n  [class.aia-suggestion-item-scroll-hint]=\"scrollHint\"\n  [attr.tabindex]=\"loading || !option.is_tappable ? -1 : 0\"\n  (click)=\"onSelect()\"\n  (keydown)=\"onKeyDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  <span class=\"aia-suggestion-content\">\n    <span\n      *ngIf=\"iconHtml\"\n      class=\"aia-suggestion-icon\"\n      aria-hidden=\"true\"\n      [innerHTML]=\"iconHtml\"\n    ></span>\n    <span class=\"aia-suggestion-text\">{{ label }}</span>\n    <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n  </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:visible;display:flex;align-items:flex-start;font-family:inherit;font-size:var(--aia-option-font-size, 16px);font-weight:450;line-height:21px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));white-space:normal;word-break:break-word;border-radius:8px;padding:8px 10px;animation:aiaSuggestionFadeIn .15s ease-out both,aiaSuggestionRiseIn .28s cubic-bezier(.25,.46,.45,.94) both;animation-delay:var(--aia-option-enter-delay, 0ms)}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}@keyframes aiaSuggestionRiseIn{0%{transform:translateY(16px)}}@media (prefers-reduced-motion: reduce){.aia-suggestion-item{animation-duration:0s;animation-delay:0s}}.aia-suggestion-content{position:relative;z-index:2}.aia-suggestion-item-tappable{cursor:pointer}.aia-suggestion-item-tappable:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.aia-suggestion-item-non-tappable{cursor:default}.aia-suggestion-item-highlighted{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.aia-suggestion-tag{font-size:11px;margin-left:6px;opacity:.5}.aia-suggestion-item-pressed{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));animation:aiaPressCompress .17s ease forwards}[role=listbox]:has(.aia-suggestion-item-pressed) .aia-suggestion-item:not(.aia-suggestion-item-pressed){opacity:.35;transition:opacity 60ms ease}@keyframes aiaPressCompress{0%{transform:scale(1)}25%{transform:scale(.93)}60%{transform:scale(.93)}to{transform:scale(1)}}.aia-suggestion-item-scroll-hint .aia-suggestion-content{mask-image:linear-gradient(to bottom,rgb(0 0 0),rgb(0 0 0 / .6))}.aia-suggestion-item[data-aia-loading]{cursor:default;animation:aiaSuggestionSkeletonPulse 1.4s ease-in-out infinite}.aia-suggestion-item[data-aia-loading] .aia-suggestion-text{color:transparent;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}.aia-suggestion-icon{display:inline-flex;align-items:center;height:21px;margin-right:8px;vertical-align:top}.aia-suggestion-icon svg{display:block;width:1em;height:1em}.aia-suggestion-item[data-aia-loading] .aia-suggestion-icon{visibility:hidden}.aia-suggestion-content:has(.aia-suggestion-icon){padding-left:calc(1em + 8px);text-indent:calc(-1em - 8px)}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+SuggestionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SuggestionItemComponent, isStandalone: true, selector: "aia-suggestion-item", inputs: { option: "option", isHighlighted: "isHighlighted", id: "id", loading: "loading", showIcon: "showIcon", scrollHint: "scrollHint", enterDelayMs: "enterDelayMs" }, outputs: { select: "select", highlight: "highlight" }, ngImport: i0, template: "<div\n  [id]=\"id\"\n  role=\"option\"\n  data-aia-option=\"\"\n  [attr.data-aia-loading]=\"loading ? '' : null\"\n  [attr.data-aia-icon]=\"iconHtml && option.icon ? option.icon : null\"\n  [attr.aria-selected]=\"isHighlighted\"\n  class=\"aia-suggestion-item\"\n  [style.--aia-option-enter-delay]=\"(enterDelay ?? 0) + 'ms'\"\n  [class.aia-suggestion-item-highlighted]=\"isHighlighted && !loading\"\n  [class.aia-suggestion-item-tappable]=\"option.is_tappable\"\n  [class.aia-suggestion-item-non-tappable]=\"!option.is_tappable\"\n  [class.aia-suggestion-item-pressed]=\"pressed\"\n  [class.aia-suggestion-item-scroll-hint]=\"scrollHint\"\n  [attr.tabindex]=\"loading || !option.is_tappable ? -1 : 0\"\n  (click)=\"onSelect()\"\n  (keydown)=\"onKeyDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  <span class=\"aia-suggestion-content\">\n    <span\n      *ngIf=\"iconHtml\"\n      class=\"aia-suggestion-icon\"\n      aria-hidden=\"true\"\n      [innerHTML]=\"iconHtml\"\n    ></span>\n    <span class=\"aia-suggestion-text\">{{ label }}</span>\n    <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n  </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:visible;display:flex;align-items:flex-start;font-family:inherit;font-size:var(--aia-option-font-size, 16px);font-weight:450;line-height:21px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));white-space:normal;word-break:break-word;border-radius:8px;padding:8px 10px;animation:aiaSuggestionFadeIn .15s ease-out both,aiaSuggestionRiseIn .28s cubic-bezier(.25,.46,.45,.94) both;animation-delay:var(--aia-option-enter-delay, 0ms)}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}@keyframes aiaSuggestionRiseIn{0%{transform:translateY(16px)}}@media (prefers-reduced-motion: reduce){.aia-suggestion-item{animation-duration:0s;animation-delay:0s}}.aia-suggestion-content{position:relative;z-index:2}.aia-suggestion-item-tappable{cursor:pointer}.aia-suggestion-item-tappable:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.aia-suggestion-item-non-tappable{cursor:default}.aia-suggestion-item-highlighted{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.aia-suggestion-tag{font-size:11px;margin-left:6px;opacity:.5}.aia-suggestion-item-pressed{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));animation:aiaPressCompress .17s ease forwards}[role=listbox]:has(.aia-suggestion-item-pressed) .aia-suggestion-item:not(.aia-suggestion-item-pressed){opacity:.35;transition:opacity 60ms ease}@keyframes aiaPressCompress{0%{transform:scale(1)}25%{transform:scale(.93)}60%{transform:scale(.93)}to{transform:scale(1)}}.aia-suggestion-item-scroll-hint .aia-suggestion-content{mask-image:linear-gradient(to bottom,rgb(0 0 0),rgb(0 0 0 / .6))}.aia-suggestion-item[data-aia-loading]{cursor:default;animation:aiaSuggestionSkeletonPulse 1.4s ease-in-out infinite}.aia-suggestion-item[data-aia-loading] .aia-suggestion-text{color:transparent;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}.aia-suggestion-icon{display:inline-flex;align-items:center;height:21px;margin-right:8px;vertical-align:top;will-change:transform}.aia-suggestion-icon svg{display:block;width:1em;height:1em}.aia-suggestion-item[data-aia-loading] .aia-suggestion-icon{visibility:hidden}.aia-suggestion-content:has(.aia-suggestion-icon){padding-left:calc(1em + 8px);text-indent:calc(-1em - 8px)}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "aia-suggestion-item", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  [id]=\"id\"\n  role=\"option\"\n  data-aia-option=\"\"\n  [attr.data-aia-loading]=\"loading ? '' : null\"\n  [attr.data-aia-icon]=\"iconHtml && option.icon ? option.icon : null\"\n  [attr.aria-selected]=\"isHighlighted\"\n  class=\"aia-suggestion-item\"\n  [style.--aia-option-enter-delay]=\"(enterDelay ?? 0) + 'ms'\"\n  [class.aia-suggestion-item-highlighted]=\"isHighlighted && !loading\"\n  [class.aia-suggestion-item-tappable]=\"option.is_tappable\"\n  [class.aia-suggestion-item-non-tappable]=\"!option.is_tappable\"\n  [class.aia-suggestion-item-pressed]=\"pressed\"\n  [class.aia-suggestion-item-scroll-hint]=\"scrollHint\"\n  [attr.tabindex]=\"loading || !option.is_tappable ? -1 : 0\"\n  (click)=\"onSelect()\"\n  (keydown)=\"onKeyDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  <span class=\"aia-suggestion-content\">\n    <span\n      *ngIf=\"iconHtml\"\n      class=\"aia-suggestion-icon\"\n      aria-hidden=\"true\"\n      [innerHTML]=\"iconHtml\"\n    ></span>\n    <span class=\"aia-suggestion-text\">{{ label }}</span>\n    <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n  </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:visible;display:flex;align-items:flex-start;font-family:inherit;font-size:var(--aia-option-font-size, 16px);font-weight:450;line-height:21px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));white-space:normal;word-break:break-word;border-radius:8px;padding:8px 10px;animation:aiaSuggestionFadeIn .15s ease-out both,aiaSuggestionRiseIn .28s cubic-bezier(.25,.46,.45,.94) both;animation-delay:var(--aia-option-enter-delay, 0ms)}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}@keyframes aiaSuggestionRiseIn{0%{transform:translateY(16px)}}@media (prefers-reduced-motion: reduce){.aia-suggestion-item{animation-duration:0s;animation-delay:0s}}.aia-suggestion-content{position:relative;z-index:2}.aia-suggestion-item-tappable{cursor:pointer}.aia-suggestion-item-tappable:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.aia-suggestion-item-non-tappable{cursor:default}.aia-suggestion-item-highlighted{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.aia-suggestion-tag{font-size:11px;margin-left:6px;opacity:.5}.aia-suggestion-item-pressed{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));animation:aiaPressCompress .17s ease forwards}[role=listbox]:has(.aia-suggestion-item-pressed) .aia-suggestion-item:not(.aia-suggestion-item-pressed){opacity:.35;transition:opacity 60ms ease}@keyframes aiaPressCompress{0%{transform:scale(1)}25%{transform:scale(.93)}60%{transform:scale(.93)}to{transform:scale(1)}}.aia-suggestion-item-scroll-hint .aia-suggestion-content{mask-image:linear-gradient(to bottom,rgb(0 0 0),rgb(0 0 0 / .6))}.aia-suggestion-item[data-aia-loading]{cursor:default;animation:aiaSuggestionSkeletonPulse 1.4s ease-in-out infinite}.aia-suggestion-item[data-aia-loading] .aia-suggestion-text{color:transparent;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}.aia-suggestion-icon{display:inline-flex;align-items:center;height:21px;margin-right:8px;vertical-align:top}.aia-suggestion-icon svg{display:block;width:1em;height:1em}.aia-suggestion-item[data-aia-loading] .aia-suggestion-icon{visibility:hidden}.aia-suggestion-content:has(.aia-suggestion-icon){padding-left:calc(1em + 8px);text-indent:calc(-1em - 8px)}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}\n"] }]
+            args: [{ selector: "aia-suggestion-item", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  [id]=\"id\"\n  role=\"option\"\n  data-aia-option=\"\"\n  [attr.data-aia-loading]=\"loading ? '' : null\"\n  [attr.data-aia-icon]=\"iconHtml && option.icon ? option.icon : null\"\n  [attr.aria-selected]=\"isHighlighted\"\n  class=\"aia-suggestion-item\"\n  [style.--aia-option-enter-delay]=\"(enterDelay ?? 0) + 'ms'\"\n  [class.aia-suggestion-item-highlighted]=\"isHighlighted && !loading\"\n  [class.aia-suggestion-item-tappable]=\"option.is_tappable\"\n  [class.aia-suggestion-item-non-tappable]=\"!option.is_tappable\"\n  [class.aia-suggestion-item-pressed]=\"pressed\"\n  [class.aia-suggestion-item-scroll-hint]=\"scrollHint\"\n  [attr.tabindex]=\"loading || !option.is_tappable ? -1 : 0\"\n  (click)=\"onSelect()\"\n  (keydown)=\"onKeyDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  <span class=\"aia-suggestion-content\">\n    <span\n      *ngIf=\"iconHtml\"\n      class=\"aia-suggestion-icon\"\n      aria-hidden=\"true\"\n      [innerHTML]=\"iconHtml\"\n    ></span>\n    <span class=\"aia-suggestion-text\">{{ label }}</span>\n    <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n  </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:visible;display:flex;align-items:flex-start;font-family:inherit;font-size:var(--aia-option-font-size, 16px);font-weight:450;line-height:21px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));white-space:normal;word-break:break-word;border-radius:8px;padding:8px 10px;animation:aiaSuggestionFadeIn .15s ease-out both,aiaSuggestionRiseIn .28s cubic-bezier(.25,.46,.45,.94) both;animation-delay:var(--aia-option-enter-delay, 0ms)}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}@keyframes aiaSuggestionRiseIn{0%{transform:translateY(16px)}}@media (prefers-reduced-motion: reduce){.aia-suggestion-item{animation-duration:0s;animation-delay:0s}}.aia-suggestion-content{position:relative;z-index:2}.aia-suggestion-item-tappable{cursor:pointer}.aia-suggestion-item-tappable:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.aia-suggestion-item-non-tappable{cursor:default}.aia-suggestion-item-highlighted{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.aia-suggestion-tag{font-size:11px;margin-left:6px;opacity:.5}.aia-suggestion-item-pressed{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));animation:aiaPressCompress .17s ease forwards}[role=listbox]:has(.aia-suggestion-item-pressed) .aia-suggestion-item:not(.aia-suggestion-item-pressed){opacity:.35;transition:opacity 60ms ease}@keyframes aiaPressCompress{0%{transform:scale(1)}25%{transform:scale(.93)}60%{transform:scale(.93)}to{transform:scale(1)}}.aia-suggestion-item-scroll-hint .aia-suggestion-content{mask-image:linear-gradient(to bottom,rgb(0 0 0),rgb(0 0 0 / .6))}.aia-suggestion-item[data-aia-loading]{cursor:default;animation:aiaSuggestionSkeletonPulse 1.4s ease-in-out infinite}.aia-suggestion-item[data-aia-loading] .aia-suggestion-text{color:transparent;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}.aia-suggestion-icon{display:inline-flex;align-items:center;height:21px;margin-right:8px;vertical-align:top;will-change:transform}.aia-suggestion-icon svg{display:block;width:1em;height:1em}.aia-suggestion-item[data-aia-loading] .aia-suggestion-icon{visibility:hidden}.aia-suggestion-content:has(.aia-suggestion-icon){padding-left:calc(1em + 8px);text-indent:calc(-1em - 8px)}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}\n"] }]
         }], propDecorators: { option: [{
                 type: Input
             }], isHighlighted: [{
@@ -1127,6 +1127,7 @@ class AIAutocompleteController {
         this.newParamId$ = deriveField(this.rawState$, (s) => s.newParamId);
         this.suggestions$ = deriveField(this.rawState$, (s) => s.suggestions, arrEq);
         this.products$ = deriveField(this.rawState$, (s) => s.products, arrEq);
+        this.customFields$ = deriveField(this.rawState$, (s) => s.customFields);
         this.activeIndex$ = deriveField(this.rawState$, (s) => s.activeDropdownIndex);
         this.isLoading$ = deriveField(this.rawState$, computeUiLoading);
         this.isReady$ = deriveField(this.rawState$, (s) => s.isReady);
@@ -1388,6 +1389,7 @@ function computeState(s) {
         newParamId: s.newParamId,
         suggestions: s.suggestions,
         products: s.products,
+        customFields: s.customFields,
         activeIndex: s.activeDropdownIndex,
         isLoading: computeUiLoading(s),
         isReady: s.isReady,
@@ -1797,6 +1799,14 @@ class AIAutocompleteComponent {
         this.showChipIcons = true;
         /** Focus the editor on mount. Default: true. */
         this.autoFocus = true;
+        /**
+         * When true (default), the dropdown renders a horizontal row of product
+         * cards below the options grid whenever it has products to show: by default
+         * the items the `/suggest` response reports as matching the query, or the
+         * results of a custom `products` search. Set to false to render no strip
+         * and run no custom search.
+         */
+        this.showProducts = true;
         // === Outputs ===
         /** Called on Enter or submit-button click. */
         this.submitted = new EventEmitter();
@@ -1850,6 +1860,7 @@ class AIAutocompleteComponent {
             optionsPosition: this.optionsPosition,
             closeDropdownOnBlur: this.closeDropdownOnBlur,
             showNonTappableOptions: this.showNonTappableOptions,
+            showProducts: this.showProducts,
             source: "full-sdk",
             products: this.products,
             value: this.value,
@@ -1934,6 +1945,7 @@ class AIAutocompleteComponent {
             changes["optionsPosition"] ||
             changes["closeDropdownOnBlur"] ||
             changes["showNonTappableOptions"] ||
+            changes["showProducts"] ||
             changes["products"]) {
             this.controller.update({
                 apiConfig: this.apiConfig,
@@ -1943,6 +1955,7 @@ class AIAutocompleteComponent {
                 optionsPosition: this.optionsPosition,
                 closeDropdownOnBlur: this.closeDropdownOnBlur,
                 showNonTappableOptions: this.showNonTappableOptions,
+                showProducts: this.showProducts,
                 // Same reference on an unrelated change is a no-op in the core; only a
                 // genuinely swapped (or removed) integration clears the strip.
                 products: this.products,
@@ -2087,6 +2100,7 @@ class AIAutocompleteComponent {
         this.submitted.emit(buildSubmitResult$1(text, params, state.skippedParams, {
             identifiedParams: state.identifiedParams,
             isReady: state.isReady,
+            customFields: state.customFields,
         }));
         this.controller.reset();
     }
@@ -2131,14 +2145,14 @@ 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", showChipIcons: "showChipIcons", autoFocus: "autoFocus", value: "value", completedParams: "completedParams", products: "products", submitButton: "submitButton" }, 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", optionOverrides: "optionOverrides", maskCompletedText: "maskCompletedText", columns: "columns", pillPlacement: "pillPlacement", mode: "mode", optionsPosition: "optionsPosition", animations: "animations", dropdownTrigger: "dropdownTrigger", closeDropdownOnBlur: "closeDropdownOnBlur", showNonTappableOptions: "showNonTappableOptions", showSkipButton: "showSkipButton", showOptionIcons: "showOptionIcons", showChipIcons: "showChipIcons", autoFocus: "autoFocus", value: "value", completedParams: "completedParams", showProducts: "showProducts", products: "products", submitButton: "submitButton" }, 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
             useExisting: forwardRef(() => AIAutocompleteComponent),
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }, { propertyName: "pillContainerRef", first: true, predicate: ["pillContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #container\n  class=\"magicx-aia magicx-aia-container\"\n  [attr.data-pill-placement]=\"pillPlacement\"\n  [attr.data-options-position]=\"optionsPosition\"\n  [attr.data-animations]=\"animations ? 'on' : 'off'\"\n  [attr.data-mode]=\"resolvedMode\"\n>\n  <ai-autocomplete-dropdown\n    *ngIf=\"controller\"\n    [controller]=\"controller\"\n    [showPills]=\"showDropdownPills\"\n    [showSkipButton]=\"showSkipButton\"\n    [showOptionIcons]=\"showOptionIcons\"\n  ></ai-autocomplete-dropdown>\n\n  <div\n    class=\"magicx-aia-input-wrapper\"\n    (click)=\"onWrapperClick($event)\"\n    (keyup)=\"$event.stopPropagation()\"\n  >\n    <div class=\"magicx-aia-editor-area\" data-aia-editor=\"\">\n      <div\n        #editor\n        *ngIf=\"controller\"\n        [aiaEditorHost]=\"controller\"\n        [autoFocus]=\"autoFocus\"\n        [showChipIcons]=\"showChipIcons\"\n        class=\"magicx-aia-input\"\n        data-aia-input=\"\"\n      ></div>\n\n      <ng-container *ngIf=\"controller && showInlinePills\">\n        <span\n          #pillContainer\n          class=\"magicx-aia-pill-list-container\"\n          data-aia-pill-list-container=\"\"\n          *ngIf=\"\n            (controller.isLoading$ | async) ||\n              ((controller.suggestionPills$ | async)?.length ?? 0) > 0\n          \"\n        >\n          <aia-pill-list\n            [pills]=\"(controller.suggestionPills$ | async) ?? []\"\n            [activePillIndex]=\"0\"\n            [activeSelected]=\"(controller.isActivePillSelected$ | async) ?? false\"\n            [loading]=\"(controller.isLoading$ | async) ?? false\"\n            (selectPill)=\"onSelectPill($event)\"\n          ></aia-pill-list>\n        </span>\n      </ng-container>\n    </div>\n\n    <ng-container [ngSwitch]=\"submitButtonState\">\n      <aia-submit-button\n        *ngSwitchCase=\"'default'\"\n        [disabled]=\"\n          !(\n            controller &&\n            canSubmit({\n              segments: (controller.segments$ | async) ?? [],\n              completedParams: (controller.completedParams$ | async) ?? []\n            })\n          )\n        \"\n        (submit)=\"onSubmitButtonClick($event)\"\n      ></aia-submit-button>\n\n      <span\n        *ngSwitchCase=\"'custom'\"\n        data-aia-submit=\"\"\n        class=\"magicx-aia-submit-slot\"\n        (click)=\"onSubmitSlotClick($event)\"\n      >\n        <ng-container *ngTemplateOutlet=\"customSubmitTemplate\"></ng-container>\n      </span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":where(.magicx-aia,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-surface: #ffffff;--aia-border: #b0b0b0;--aia-dropdown-border: rgba(231, 231, 231, .5);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: #bdbdbd;--aia-pill-color: #333539;--aia-pill-font-size: 16px;--aia-completed-pill-bg: rgba(189, 189, 189, .105);--aia-completed-pill-bg-active: rgba(189, 189, 189, .35);--aia-completed-pill-color: #000000;--aia-option-bg: #eef2ff;--aia-option-color: #1a1b1d;--aia-option-color-selected: #000000;--aia-option-font-size: 16px;--aia-written-text-color: #000000;--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: #000000;--aia-submit-color: #ffffff;--aia-color-text-muted: #6b7280;--aia-skeleton-bg: rgba(189, 189, 189, .25);--aia-streak-rgb: 99, 102, 241;--aia-footer-hint-color: #505050;--aia-footer-brand-color: #b0b0b0;--aia-footer-badge-border: rgba(189, 189, 189, .51)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-surface: #000000;--aia-border: #505050;--aia-dropdown-border: rgba(72, 72, 72, .5);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: #bdbdbd;--aia-pill-color: #b0b0b0;--aia-pill-font-size: 16px;--aia-completed-pill-bg: rgba(189, 189, 189, .15);--aia-completed-pill-bg-active: rgba(189, 189, 189, .35);--aia-completed-pill-color: #ffffff;--aia-option-bg: #323232;--aia-option-color: #e7e7e7;--aia-option-color-selected: #ffffff;--aia-option-font-size: 16px;--aia-written-text-color: #ffffff;--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: #ffffff;--aia-submit-color: #000000;--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: #1a1b1d;--aia-streak-rgb: 255, 255, 255;--aia-footer-hint-color: #b0b0b0;--aia-footer-brand-color: #505050;--aia-footer-badge-border: #505050}[data-aia-dropdown]{--aia-footer-row-height: 23px;--aia-footer-band: calc(var(--aia-footer-gap, 8px) + var(--aia-footer-row-height, 23px));--aia-grid-scroll-bottom: var(--aia-footer-band);--aia-grid-overlap-bottom: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-lead: 20px;--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0}[data-aia-dropdown] [data-aia-pillbar] .aia-pill-list{padding-inline:10px}[data-aia-dropdown] [data-aia-pillbar] .aia-pill{justify-content:flex-start;border-inline-width:0;padding-inline:0}[data-aia-dropdown][data-aia-has-products]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: 0px;--aia-grid-overlap-top: 0px;--aia-footer-fade-lead: 0px}[data-aia-dropdown] .aia-grid[data-scroll]{padding-top:var(--aia-grid-scroll-top, 0);padding-bottom:var(--aia-grid-scroll-bottom, 0);margin-top:var(--aia-grid-overlap-top, 0);margin-bottom:var(--aia-grid-overlap-bottom, 0)}[data-aia-dropdown] [data-aia-footer]:before{content:\"\";position:absolute;inset:var(--aia-footer-fade-inset, -20px 0 0);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--aia-surface, #ffffff))}[data-aia-dropdown][data-aia-surface=glass]{--aia-footer-chip-bg: transparent}[data-aia-dropdown][data-aia-surface=glass] [data-aia-footer]:before{display:none}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: var(--aia-footer-band);--aia-grid-overlap-top: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-inset: 0 0 calc(-1 * var(--aia-footer-fade-lead));transform-origin:50% 100%;top:auto;bottom:100%;margin-top:0;margin-bottom:6px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .aia-stack{flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]{padding:0 0 var(--aia-footer-gap, 8px) 8px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before{background:linear-gradient(to top,transparent,var(--aia-surface, #ffffff))}:where(.magicx-aia[data-animations=\"off\"]) *,:where(.magicx-aia[data-animations=\"off\"]) *:before,:where(.magicx-aia[data-animations=\"off\"]) *:after{animation-duration:0s!important;transition-duration:0s!important}.magicx-aia-container{position:relative;font-family:var(--aia-font-family, inherit);container-type:inline-size}.magicx-aia-input-wrapper{padding:12px 16px;border:1px solid var(--aia-border, #b0b0b0);border-radius:20px;background:var(--aia-surface, #ffffff);box-shadow:var(--aia-shadow, none);overflow:hidden;display:flex;align-items:flex-start;gap:12px}.magicx-aia-editor-area{position:relative;flex:1;min-width:0;min-height:22px;line-height:var(--aia-editor-line-height, 1.9);font-family:inherit;font-size:var(--aia-written-text-font-size, 14px);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-height:var(--aia-editor-max-height, calc(var(--aia-editor-line-height, 1.9) * 5em));overflow-y:auto;scrollbar-width:none}.magicx-aia-editor-area::-webkit-scrollbar{display:none}.magicx-aia-input{display:inline;outline:none;background:transparent;color:var(--aia-written-text-color, var(--aia-color-text-default, #fff));caret-color:var( --aia-caret-color, var(--aia-written-text-color, var(--aia-color-text-default, #fff)) );font-weight:300;vertical-align:middle}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--completed]{display:inline;padding:3px 6px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:var(--aia-completed-pill-bg, rgba(189, 189, 189, .105));color:var(--aia-completed-pill-color, var(--aia-written-text-color, #fff));font-size:var(--aia-pill-font-size, 14px);font-weight:400;line-height:normal;white-space:normal;letter-spacing:var(--aia-completed-pill-tracking, -.02em);cursor:pointer;transition:background-color .15s ease}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--completed]:hover{background:var(--aia-completed-pill-bg-active, rgba(189, 189, 189, .35))}:where(.magicx-aia-input) span[class~=magicx-aia-segment-icon]{display:inline-block;width:1em;height:1em;margin-right:4px;vertical-align:-.125em;pointer-events:none;-webkit-user-select:none;user-select:none}:where(.magicx-aia-input) span[class~=magicx-aia-segment-icon] svg{display:block;width:100%;height:100%}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]{background:var(--aia-completed-pill-bg-active, rgba(189, 189, 189, .35));caret-color:transparent;cursor:text}.magicx-aia-input:has(strong[class~=\"magicx-aia-segment--editing\"]){caret-color:transparent}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::selection{background:transparent;color:inherit}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::-moz-selection{background:transparent;color:inherit}.magicx-aia-input[data-aia-empty=true][data-placeholder]:before{content:attr(data-placeholder);color:var(--aia-color-text-muted, #c1c4cb);opacity:.7;pointer-events:none;transition:opacity var(--aia-placeholder-fade, .12s) ease-out}.magicx-aia-input[data-aia-placeholder-leaving]:before{opacity:0}@media (prefers-reduced-motion: reduce){.magicx-aia-input[data-aia-empty=true][data-placeholder]:before{transition-duration:0s}}.magicx-aia-input[data-aia-empty=true]{display:inline-block;min-width:1px}.magicx-aia-pill-list-container{display:inline;margin-left:8px}.magicx-aia-pill-list-container:empty,.magicx-aia-pill-list-container[data-aia-pill-wrapped]{margin-left:0}.magicx-aia-submit-slot{display:contents}:where(.magicx-aia-input) strong[class~=magicx-aia-shimmer-sweep]{animation:aiaPillReveal .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes aiaPillReveal{0%{opacity:0}}@media (min-width: 769px){[data-aia-dropdown] [data-aia-footer]:before,[data-aia-dropdown][data-options-position=above] [data-aia-footer]:before,:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before{inset:0;background:var(--aia-surface, #ffffff)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: AIAutocompleteDropdownComponent, selector: "ai-autocomplete-dropdown", inputs: ["controller", "showPills", "showSkipButton", "showOptionIcons", "className", "mode"] }, { kind: "directive", type: AIAutocompleteEditorHostDirective, selector: "[aiaEditorHost]", inputs: ["aiaEditorHost", "autoFocus", "showChipIcons"] }, { kind: "component", type: PillListComponent, selector: "aia-pill-list", inputs: ["pills", "activePillIndex", "rounded", "loading", "activeSelected"], outputs: ["selectPill"] }, { kind: "component", type: SubmitButtonComponent, selector: "aia-submit-button", inputs: ["disabled"], outputs: ["submit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }, { propertyName: "pillContainerRef", first: true, predicate: ["pillContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #container\n  class=\"magicx-aia magicx-aia-container\"\n  [attr.data-pill-placement]=\"pillPlacement\"\n  [attr.data-options-position]=\"optionsPosition\"\n  [attr.data-animations]=\"animations ? 'on' : 'off'\"\n  [attr.data-mode]=\"resolvedMode\"\n>\n  <ai-autocomplete-dropdown\n    *ngIf=\"controller\"\n    [controller]=\"controller\"\n    [showPills]=\"showDropdownPills\"\n    [showSkipButton]=\"showSkipButton\"\n    [showOptionIcons]=\"showOptionIcons\"\n  ></ai-autocomplete-dropdown>\n\n  <div\n    class=\"magicx-aia-input-wrapper\"\n    (click)=\"onWrapperClick($event)\"\n    (keyup)=\"$event.stopPropagation()\"\n  >\n    <div class=\"magicx-aia-editor-area\" data-aia-editor=\"\">\n      <div\n        #editor\n        *ngIf=\"controller\"\n        [aiaEditorHost]=\"controller\"\n        [autoFocus]=\"autoFocus\"\n        [showChipIcons]=\"showChipIcons\"\n        class=\"magicx-aia-input\"\n        data-aia-input=\"\"\n      ></div>\n\n      <ng-container *ngIf=\"controller && showInlinePills\">\n        <span\n          #pillContainer\n          class=\"magicx-aia-pill-list-container\"\n          data-aia-pill-list-container=\"\"\n          *ngIf=\"\n            (controller.isLoading$ | async) ||\n              ((controller.suggestionPills$ | async)?.length ?? 0) > 0\n          \"\n        >\n          <aia-pill-list\n            [pills]=\"(controller.suggestionPills$ | async) ?? []\"\n            [activePillIndex]=\"0\"\n            [activeSelected]=\"(controller.isActivePillSelected$ | async) ?? false\"\n            [loading]=\"(controller.isLoading$ | async) ?? false\"\n            (selectPill)=\"onSelectPill($event)\"\n          ></aia-pill-list>\n        </span>\n      </ng-container>\n    </div>\n\n    <ng-container [ngSwitch]=\"submitButtonState\">\n      <aia-submit-button\n        *ngSwitchCase=\"'default'\"\n        [disabled]=\"\n          !(\n            controller &&\n            canSubmit({\n              segments: (controller.segments$ | async) ?? [],\n              completedParams: (controller.completedParams$ | async) ?? []\n            })\n          )\n        \"\n        (submit)=\"onSubmitButtonClick($event)\"\n      ></aia-submit-button>\n\n      <span\n        *ngSwitchCase=\"'custom'\"\n        data-aia-submit=\"\"\n        class=\"magicx-aia-submit-slot\"\n        (click)=\"onSubmitSlotClick($event)\"\n      >\n        <ng-container *ngTemplateOutlet=\"customSubmitTemplate\"></ng-container>\n      </span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":where(.magicx-aia,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-surface: #ffffff;--aia-border: #b0b0b0;--aia-dropdown-border: rgba(231, 231, 231, .5);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: #bdbdbd;--aia-pill-color: #333539;--aia-pill-font-size: 16px;--aia-completed-pill-bg: rgba(189, 189, 189, .105);--aia-completed-pill-bg-active: rgba(189, 189, 189, .35);--aia-completed-pill-color: #000000;--aia-option-bg: #eef2ff;--aia-option-color: #1a1b1d;--aia-option-color-selected: #000000;--aia-option-font-size: 16px;--aia-written-text-color: #000000;--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: #000000;--aia-submit-color: #ffffff;--aia-color-text-muted: #6b7280;--aia-skeleton-bg: rgba(189, 189, 189, .25);--aia-streak-rgb: 99, 102, 241;--aia-footer-hint-color: #505050;--aia-footer-brand-color: #b0b0b0;--aia-footer-badge-border: rgba(189, 189, 189, .51)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-surface: #000000;--aia-border: #505050;--aia-dropdown-border: rgba(72, 72, 72, .5);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: #bdbdbd;--aia-pill-color: #b0b0b0;--aia-pill-font-size: 16px;--aia-completed-pill-bg: rgba(189, 189, 189, .15);--aia-completed-pill-bg-active: rgba(189, 189, 189, .35);--aia-completed-pill-color: #ffffff;--aia-option-bg: #323232;--aia-option-color: #e7e7e7;--aia-option-color-selected: #ffffff;--aia-option-font-size: 16px;--aia-written-text-color: #ffffff;--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: #ffffff;--aia-submit-color: #000000;--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: #1a1b1d;--aia-streak-rgb: 255, 255, 255;--aia-footer-hint-color: #b0b0b0;--aia-footer-brand-color: #505050;--aia-footer-badge-border: #505050}[data-aia-dropdown]{--aia-footer-row-height: 23px;--aia-footer-band: calc(var(--aia-footer-gap, 8px) + var(--aia-footer-row-height, 23px));--aia-grid-scroll-bottom: var(--aia-footer-band);--aia-grid-overlap-bottom: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-lead: 20px;--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0}[data-aia-dropdown] [data-aia-pillbar] .aia-pill-list{padding-inline:10px}[data-aia-dropdown] [data-aia-pillbar] .aia-pill{justify-content:flex-start;border-inline-width:0;padding-inline:0}[data-aia-dropdown][data-aia-has-products]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: 0px;--aia-grid-overlap-top: 0px;--aia-footer-fade-lead: 0px}[data-aia-dropdown] .aia-grid[data-scroll]{padding-top:var(--aia-grid-scroll-top, 0);padding-bottom:var(--aia-grid-scroll-bottom, 0);margin-top:var(--aia-grid-overlap-top, 0);margin-bottom:var(--aia-grid-overlap-bottom, 0)}[data-aia-dropdown] [data-aia-footer]:before{content:\"\";position:absolute;inset:var(--aia-footer-fade-inset, -20px 0 0);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--aia-surface, #ffffff))}[data-aia-dropdown][data-aia-surface=glass]{--aia-footer-chip-bg: transparent}[data-aia-dropdown][data-aia-surface=glass] [data-aia-footer]:before{display:none}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: var(--aia-footer-band);--aia-grid-overlap-top: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-inset: 0 0 calc(-1 * var(--aia-footer-fade-lead));transform-origin:50% 100%;top:auto;bottom:100%;margin-top:0;margin-bottom:6px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .aia-stack{flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]{padding:0 0 var(--aia-footer-gap, 8px) 8px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before{background:linear-gradient(to top,transparent,var(--aia-surface, #ffffff))}:where(.magicx-aia[data-animations=\"off\"]) *,:where(.magicx-aia[data-animations=\"off\"]) *:before,:where(.magicx-aia[data-animations=\"off\"]) *:after{animation-duration:0s!important;transition-duration:0s!important}.magicx-aia-container{position:relative;font-family:var(--aia-font-family, inherit);container-type:inline-size}.magicx-aia-input-wrapper{padding:12px 16px;border:1px solid var(--aia-border, #b0b0b0);border-radius:20px;background:var(--aia-surface, #ffffff);box-shadow:var(--aia-shadow, none);overflow:hidden;display:flex;align-items:flex-start;gap:12px}.magicx-aia-editor-area{position:relative;flex:1;min-width:0;min-height:22px;line-height:var(--aia-editor-line-height, 1.9);font-family:inherit;font-size:var(--aia-written-text-font-size, 14px);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-height:var(--aia-editor-max-height, calc(var(--aia-editor-line-height, 1.9) * 5em));overflow-y:auto;scrollbar-width:none}.magicx-aia-editor-area::-webkit-scrollbar{display:none}.magicx-aia-input{display:inline;outline:none;background:transparent;color:var(--aia-written-text-color, var(--aia-color-text-default, #fff));caret-color:var( --aia-caret-color, var(--aia-written-text-color, var(--aia-color-text-default, #fff)) );font-weight:300;vertical-align:middle}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--completed]{display:inline;padding:3px 6px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:var(--aia-completed-pill-bg, rgba(189, 189, 189, .105));color:var(--aia-completed-pill-color, var(--aia-written-text-color, #fff));font-size:var(--aia-pill-font-size, 14px);font-weight:400;line-height:normal;white-space:normal;letter-spacing:var(--aia-completed-pill-tracking, -.02em);cursor:pointer;transition:background-color .15s ease}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--completed]:hover{background:var(--aia-completed-pill-bg-active, rgba(189, 189, 189, .35))}:where(.magicx-aia-input) span[class~=magicx-aia-segment-icon]{display:inline-block;width:1em;height:1em;margin-right:4px;vertical-align:-.125em;pointer-events:none;-webkit-user-select:none;user-select:none;will-change:transform}:where(.magicx-aia-input) span[class~=magicx-aia-segment-icon] svg{display:block;width:100%;height:100%}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]{background:var(--aia-completed-pill-bg-active, rgba(189, 189, 189, .35));caret-color:transparent;cursor:text}.magicx-aia-input:has(strong[class~=\"magicx-aia-segment--editing\"]){caret-color:transparent}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::selection{background:transparent;color:inherit}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::-moz-selection{background:transparent;color:inherit}.magicx-aia-input[data-aia-empty=true][data-placeholder]:before{content:attr(data-placeholder);color:var(--aia-color-text-muted, #c1c4cb);opacity:.7;pointer-events:none;transition:opacity var(--aia-placeholder-fade, .12s) ease-out}.magicx-aia-input[data-aia-placeholder-leaving]:before{opacity:0}@media (prefers-reduced-motion: reduce){.magicx-aia-input[data-aia-empty=true][data-placeholder]:before{transition-duration:0s}}.magicx-aia-input[data-aia-empty=true]{display:inline-block;min-width:1px}.magicx-aia-pill-list-container{display:inline;margin-left:8px}.magicx-aia-pill-list-container:empty,.magicx-aia-pill-list-container[data-aia-pill-wrapped]{margin-left:0}.magicx-aia-submit-slot{display:contents}:where(.magicx-aia-input) strong[class~=magicx-aia-shimmer-sweep]{animation:aiaPillReveal .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes aiaPillReveal{0%{opacity:0}}@media (min-width: 769px){[data-aia-dropdown] [data-aia-footer]:before,[data-aia-dropdown][data-options-position=above] [data-aia-footer]:before,:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before{inset:0;background:var(--aia-surface, #ffffff)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: AIAutocompleteDropdownComponent, selector: "ai-autocomplete-dropdown", inputs: ["controller", "showPills", "showSkipButton", "showOptionIcons", "className", "mode"] }, { kind: "directive", type: AIAutocompleteEditorHostDirective, selector: "[aiaEditorHost]", inputs: ["aiaEditorHost", "autoFocus", "showChipIcons"] }, { kind: "component", type: PillListComponent, selector: "aia-pill-list", inputs: ["pills", "activePillIndex", "rounded", "loading", "activeSelected"], outputs: ["selectPill"] }, { kind: "component", type: SubmitButtonComponent, selector: "aia-submit-button", inputs: ["disabled"], outputs: ["submit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: "ai-autocomplete", standalone: true, imports: [
@@ -2154,7 +2168,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             useExisting: forwardRef(() => AIAutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  #container\n  class=\"magicx-aia magicx-aia-container\"\n  [attr.data-pill-placement]=\"pillPlacement\"\n  [attr.data-options-position]=\"optionsPosition\"\n  [attr.data-animations]=\"animations ? 'on' : 'off'\"\n  [attr.data-mode]=\"resolvedMode\"\n>\n  <ai-autocomplete-dropdown\n    *ngIf=\"controller\"\n    [controller]=\"controller\"\n    [showPills]=\"showDropdownPills\"\n    [showSkipButton]=\"showSkipButton\"\n    [showOptionIcons]=\"showOptionIcons\"\n  ></ai-autocomplete-dropdown>\n\n  <div\n    class=\"magicx-aia-input-wrapper\"\n    (click)=\"onWrapperClick($event)\"\n    (keyup)=\"$event.stopPropagation()\"\n  >\n    <div class=\"magicx-aia-editor-area\" data-aia-editor=\"\">\n      <div\n        #editor\n        *ngIf=\"controller\"\n        [aiaEditorHost]=\"controller\"\n        [autoFocus]=\"autoFocus\"\n        [showChipIcons]=\"showChipIcons\"\n        class=\"magicx-aia-input\"\n        data-aia-input=\"\"\n      ></div>\n\n      <ng-container *ngIf=\"controller && showInlinePills\">\n        <span\n          #pillContainer\n          class=\"magicx-aia-pill-list-container\"\n          data-aia-pill-list-container=\"\"\n          *ngIf=\"\n            (controller.isLoading$ | async) ||\n              ((controller.suggestionPills$ | async)?.length ?? 0) > 0\n          \"\n        >\n          <aia-pill-list\n            [pills]=\"(controller.suggestionPills$ | async) ?? []\"\n            [activePillIndex]=\"0\"\n            [activeSelected]=\"(controller.isActivePillSelected$ | async) ?? false\"\n            [loading]=\"(controller.isLoading$ | async) ?? false\"\n            (selectPill)=\"onSelectPill($event)\"\n          ></aia-pill-list>\n        </span>\n      </ng-container>\n    </div>\n\n    <ng-container [ngSwitch]=\"submitButtonState\">\n      <aia-submit-button\n        *ngSwitchCase=\"'default'\"\n        [disabled]=\"\n          !(\n            controller &&\n            canSubmit({\n              segments: (controller.segments$ | async) ?? [],\n              completedParams: (controller.completedParams$ | async) ?? []\n            })\n          )\n        \"\n        (submit)=\"onSubmitButtonClick($event)\"\n      ></aia-submit-button>\n\n      <span\n        *ngSwitchCase=\"'custom'\"\n        data-aia-submit=\"\"\n        class=\"magicx-aia-submit-slot\"\n        (click)=\"onSubmitSlotClick($event)\"\n      >\n        <ng-container *ngTemplateOutlet=\"customSubmitTemplate\"></ng-container>\n      </span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":where(.magicx-aia,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-surface: #ffffff;--aia-border: #b0b0b0;--aia-dropdown-border: rgba(231, 231, 231, .5);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: #bdbdbd;--aia-pill-color: #333539;--aia-pill-font-size: 16px;--aia-completed-pill-bg: rgba(189, 189, 189, .105);--aia-completed-pill-bg-active: rgba(189, 189, 189, .35);--aia-completed-pill-color: #000000;--aia-option-bg: #eef2ff;--aia-option-color: #1a1b1d;--aia-option-color-selected: #000000;--aia-option-font-size: 16px;--aia-written-text-color: #000000;--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: #000000;--aia-submit-color: #ffffff;--aia-color-text-muted: #6b7280;--aia-skeleton-bg: rgba(189, 189, 189, .25);--aia-streak-rgb: 99, 102, 241;--aia-footer-hint-color: #505050;--aia-footer-brand-color: #b0b0b0;--aia-footer-badge-border: rgba(189, 189, 189, .51)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-surface: #000000;--aia-border: #505050;--aia-dropdown-border: rgba(72, 72, 72, .5);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: #bdbdbd;--aia-pill-color: #b0b0b0;--aia-pill-font-size: 16px;--aia-completed-pill-bg: rgba(189, 189, 189, .15);--aia-completed-pill-bg-active: rgba(189, 189, 189, .35);--aia-completed-pill-color: #ffffff;--aia-option-bg: #323232;--aia-option-color: #e7e7e7;--aia-option-color-selected: #ffffff;--aia-option-font-size: 16px;--aia-written-text-color: #ffffff;--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: #ffffff;--aia-submit-color: #000000;--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: #1a1b1d;--aia-streak-rgb: 255, 255, 255;--aia-footer-hint-color: #b0b0b0;--aia-footer-brand-color: #505050;--aia-footer-badge-border: #505050}[data-aia-dropdown]{--aia-footer-row-height: 23px;--aia-footer-band: calc(var(--aia-footer-gap, 8px) + var(--aia-footer-row-height, 23px));--aia-grid-scroll-bottom: var(--aia-footer-band);--aia-grid-overlap-bottom: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-lead: 20px;--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0}[data-aia-dropdown] [data-aia-pillbar] .aia-pill-list{padding-inline:10px}[data-aia-dropdown] [data-aia-pillbar] .aia-pill{justify-content:flex-start;border-inline-width:0;padding-inline:0}[data-aia-dropdown][data-aia-has-products]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: 0px;--aia-grid-overlap-top: 0px;--aia-footer-fade-lead: 0px}[data-aia-dropdown] .aia-grid[data-scroll]{padding-top:var(--aia-grid-scroll-top, 0);padding-bottom:var(--aia-grid-scroll-bottom, 0);margin-top:var(--aia-grid-overlap-top, 0);margin-bottom:var(--aia-grid-overlap-bottom, 0)}[data-aia-dropdown] [data-aia-footer]:before{content:\"\";position:absolute;inset:var(--aia-footer-fade-inset, -20px 0 0);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--aia-surface, #ffffff))}[data-aia-dropdown][data-aia-surface=glass]{--aia-footer-chip-bg: transparent}[data-aia-dropdown][data-aia-surface=glass] [data-aia-footer]:before{display:none}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: var(--aia-footer-band);--aia-grid-overlap-top: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-inset: 0 0 calc(-1 * var(--aia-footer-fade-lead));transform-origin:50% 100%;top:auto;bottom:100%;margin-top:0;margin-bottom:6px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .aia-stack{flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]{padding:0 0 var(--aia-footer-gap, 8px) 8px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before{background:linear-gradient(to top,transparent,var(--aia-surface, #ffffff))}:where(.magicx-aia[data-animations=\"off\"]) *,:where(.magicx-aia[data-animations=\"off\"]) *:before,:where(.magicx-aia[data-animations=\"off\"]) *:after{animation-duration:0s!important;transition-duration:0s!important}.magicx-aia-container{position:relative;font-family:var(--aia-font-family, inherit);container-type:inline-size}.magicx-aia-input-wrapper{padding:12px 16px;border:1px solid var(--aia-border, #b0b0b0);border-radius:20px;background:var(--aia-surface, #ffffff);box-shadow:var(--aia-shadow, none);overflow:hidden;display:flex;align-items:flex-start;gap:12px}.magicx-aia-editor-area{position:relative;flex:1;min-width:0;min-height:22px;line-height:var(--aia-editor-line-height, 1.9);font-family:inherit;font-size:var(--aia-written-text-font-size, 14px);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-height:var(--aia-editor-max-height, calc(var(--aia-editor-line-height, 1.9) * 5em));overflow-y:auto;scrollbar-width:none}.magicx-aia-editor-area::-webkit-scrollbar{display:none}.magicx-aia-input{display:inline;outline:none;background:transparent;color:var(--aia-written-text-color, var(--aia-color-text-default, #fff));caret-color:var( --aia-caret-color, var(--aia-written-text-color, var(--aia-color-text-default, #fff)) );font-weight:300;vertical-align:middle}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--completed]{display:inline;padding:3px 6px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:var(--aia-completed-pill-bg, rgba(189, 189, 189, .105));color:var(--aia-completed-pill-color, var(--aia-written-text-color, #fff));font-size:var(--aia-pill-font-size, 14px);font-weight:400;line-height:normal;white-space:normal;letter-spacing:var(--aia-completed-pill-tracking, -.02em);cursor:pointer;transition:background-color .15s ease}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--completed]:hover{background:var(--aia-completed-pill-bg-active, rgba(189, 189, 189, .35))}:where(.magicx-aia-input) span[class~=magicx-aia-segment-icon]{display:inline-block;width:1em;height:1em;margin-right:4px;vertical-align:-.125em;pointer-events:none;-webkit-user-select:none;user-select:none}:where(.magicx-aia-input) span[class~=magicx-aia-segment-icon] svg{display:block;width:100%;height:100%}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]{background:var(--aia-completed-pill-bg-active, rgba(189, 189, 189, .35));caret-color:transparent;cursor:text}.magicx-aia-input:has(strong[class~=\"magicx-aia-segment--editing\"]){caret-color:transparent}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::selection{background:transparent;color:inherit}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::-moz-selection{background:transparent;color:inherit}.magicx-aia-input[data-aia-empty=true][data-placeholder]:before{content:attr(data-placeholder);color:var(--aia-color-text-muted, #c1c4cb);opacity:.7;pointer-events:none;transition:opacity var(--aia-placeholder-fade, .12s) ease-out}.magicx-aia-input[data-aia-placeholder-leaving]:before{opacity:0}@media (prefers-reduced-motion: reduce){.magicx-aia-input[data-aia-empty=true][data-placeholder]:before{transition-duration:0s}}.magicx-aia-input[data-aia-empty=true]{display:inline-block;min-width:1px}.magicx-aia-pill-list-container{display:inline;margin-left:8px}.magicx-aia-pill-list-container:empty,.magicx-aia-pill-list-container[data-aia-pill-wrapped]{margin-left:0}.magicx-aia-submit-slot{display:contents}:where(.magicx-aia-input) strong[class~=magicx-aia-shimmer-sweep]{animation:aiaPillReveal .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes aiaPillReveal{0%{opacity:0}}@media (min-width: 769px){[data-aia-dropdown] [data-aia-footer]:before,[data-aia-dropdown][data-options-position=above] [data-aia-footer]:before,:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before{inset:0;background:var(--aia-surface, #ffffff)}}\n"] }]
+                    ], template: "<div\n  #container\n  class=\"magicx-aia magicx-aia-container\"\n  [attr.data-pill-placement]=\"pillPlacement\"\n  [attr.data-options-position]=\"optionsPosition\"\n  [attr.data-animations]=\"animations ? 'on' : 'off'\"\n  [attr.data-mode]=\"resolvedMode\"\n>\n  <ai-autocomplete-dropdown\n    *ngIf=\"controller\"\n    [controller]=\"controller\"\n    [showPills]=\"showDropdownPills\"\n    [showSkipButton]=\"showSkipButton\"\n    [showOptionIcons]=\"showOptionIcons\"\n  ></ai-autocomplete-dropdown>\n\n  <div\n    class=\"magicx-aia-input-wrapper\"\n    (click)=\"onWrapperClick($event)\"\n    (keyup)=\"$event.stopPropagation()\"\n  >\n    <div class=\"magicx-aia-editor-area\" data-aia-editor=\"\">\n      <div\n        #editor\n        *ngIf=\"controller\"\n        [aiaEditorHost]=\"controller\"\n        [autoFocus]=\"autoFocus\"\n        [showChipIcons]=\"showChipIcons\"\n        class=\"magicx-aia-input\"\n        data-aia-input=\"\"\n      ></div>\n\n      <ng-container *ngIf=\"controller && showInlinePills\">\n        <span\n          #pillContainer\n          class=\"magicx-aia-pill-list-container\"\n          data-aia-pill-list-container=\"\"\n          *ngIf=\"\n            (controller.isLoading$ | async) ||\n              ((controller.suggestionPills$ | async)?.length ?? 0) > 0\n          \"\n        >\n          <aia-pill-list\n            [pills]=\"(controller.suggestionPills$ | async) ?? []\"\n            [activePillIndex]=\"0\"\n            [activeSelected]=\"(controller.isActivePillSelected$ | async) ?? false\"\n            [loading]=\"(controller.isLoading$ | async) ?? false\"\n            (selectPill)=\"onSelectPill($event)\"\n          ></aia-pill-list>\n        </span>\n      </ng-container>\n    </div>\n\n    <ng-container [ngSwitch]=\"submitButtonState\">\n      <aia-submit-button\n        *ngSwitchCase=\"'default'\"\n        [disabled]=\"\n          !(\n            controller &&\n            canSubmit({\n              segments: (controller.segments$ | async) ?? [],\n              completedParams: (controller.completedParams$ | async) ?? []\n            })\n          )\n        \"\n        (submit)=\"onSubmitButtonClick($event)\"\n      ></aia-submit-button>\n\n      <span\n        *ngSwitchCase=\"'custom'\"\n        data-aia-submit=\"\"\n        class=\"magicx-aia-submit-slot\"\n        (click)=\"onSubmitSlotClick($event)\"\n      >\n        <ng-container *ngTemplateOutlet=\"customSubmitTemplate\"></ng-container>\n      </span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":where(.magicx-aia,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-surface: #ffffff;--aia-border: #b0b0b0;--aia-dropdown-border: rgba(231, 231, 231, .5);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: #bdbdbd;--aia-pill-color: #333539;--aia-pill-font-size: 16px;--aia-completed-pill-bg: rgba(189, 189, 189, .105);--aia-completed-pill-bg-active: rgba(189, 189, 189, .35);--aia-completed-pill-color: #000000;--aia-option-bg: #eef2ff;--aia-option-color: #1a1b1d;--aia-option-color-selected: #000000;--aia-option-font-size: 16px;--aia-written-text-color: #000000;--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: #000000;--aia-submit-color: #ffffff;--aia-color-text-muted: #6b7280;--aia-skeleton-bg: rgba(189, 189, 189, .25);--aia-streak-rgb: 99, 102, 241;--aia-footer-hint-color: #505050;--aia-footer-brand-color: #b0b0b0;--aia-footer-badge-border: rgba(189, 189, 189, .51)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-surface: #000000;--aia-border: #505050;--aia-dropdown-border: rgba(72, 72, 72, .5);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: #bdbdbd;--aia-pill-color: #b0b0b0;--aia-pill-font-size: 16px;--aia-completed-pill-bg: rgba(189, 189, 189, .15);--aia-completed-pill-bg-active: rgba(189, 189, 189, .35);--aia-completed-pill-color: #ffffff;--aia-option-bg: #323232;--aia-option-color: #e7e7e7;--aia-option-color-selected: #ffffff;--aia-option-font-size: 16px;--aia-written-text-color: #ffffff;--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: #ffffff;--aia-submit-color: #000000;--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: #1a1b1d;--aia-streak-rgb: 255, 255, 255;--aia-footer-hint-color: #b0b0b0;--aia-footer-brand-color: #505050;--aia-footer-badge-border: #505050}[data-aia-dropdown]{--aia-footer-row-height: 23px;--aia-footer-band: calc(var(--aia-footer-gap, 8px) + var(--aia-footer-row-height, 23px));--aia-grid-scroll-bottom: var(--aia-footer-band);--aia-grid-overlap-bottom: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-lead: 20px;--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0}[data-aia-dropdown] [data-aia-pillbar] .aia-pill-list{padding-inline:10px}[data-aia-dropdown] [data-aia-pillbar] .aia-pill{justify-content:flex-start;border-inline-width:0;padding-inline:0}[data-aia-dropdown][data-aia-has-products]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: 0px;--aia-grid-overlap-top: 0px;--aia-footer-fade-lead: 0px}[data-aia-dropdown] .aia-grid[data-scroll]{padding-top:var(--aia-grid-scroll-top, 0);padding-bottom:var(--aia-grid-scroll-bottom, 0);margin-top:var(--aia-grid-overlap-top, 0);margin-bottom:var(--aia-grid-overlap-bottom, 0)}[data-aia-dropdown] [data-aia-footer]:before{content:\"\";position:absolute;inset:var(--aia-footer-fade-inset, -20px 0 0);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--aia-surface, #ffffff))}[data-aia-dropdown][data-aia-surface=glass]{--aia-footer-chip-bg: transparent}[data-aia-dropdown][data-aia-surface=glass] [data-aia-footer]:before{display:none}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: var(--aia-footer-band);--aia-grid-overlap-top: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-inset: 0 0 calc(-1 * var(--aia-footer-fade-lead));transform-origin:50% 100%;top:auto;bottom:100%;margin-top:0;margin-bottom:6px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .aia-stack{flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]{padding:0 0 var(--aia-footer-gap, 8px) 8px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before{background:linear-gradient(to top,transparent,var(--aia-surface, #ffffff))}:where(.magicx-aia[data-animations=\"off\"]) *,:where(.magicx-aia[data-animations=\"off\"]) *:before,:where(.magicx-aia[data-animations=\"off\"]) *:after{animation-duration:0s!important;transition-duration:0s!important}.magicx-aia-container{position:relative;font-family:var(--aia-font-family, inherit);container-type:inline-size}.magicx-aia-input-wrapper{padding:12px 16px;border:1px solid var(--aia-border, #b0b0b0);border-radius:20px;background:var(--aia-surface, #ffffff);box-shadow:var(--aia-shadow, none);overflow:hidden;display:flex;align-items:flex-start;gap:12px}.magicx-aia-editor-area{position:relative;flex:1;min-width:0;min-height:22px;line-height:var(--aia-editor-line-height, 1.9);font-family:inherit;font-size:var(--aia-written-text-font-size, 14px);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-height:var(--aia-editor-max-height, calc(var(--aia-editor-line-height, 1.9) * 5em));overflow-y:auto;scrollbar-width:none}.magicx-aia-editor-area::-webkit-scrollbar{display:none}.magicx-aia-input{display:inline;outline:none;background:transparent;color:var(--aia-written-text-color, var(--aia-color-text-default, #fff));caret-color:var( --aia-caret-color, var(--aia-written-text-color, var(--aia-color-text-default, #fff)) );font-weight:300;vertical-align:middle}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--completed]{display:inline;padding:3px 6px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:var(--aia-completed-pill-bg, rgba(189, 189, 189, .105));color:var(--aia-completed-pill-color, var(--aia-written-text-color, #fff));font-size:var(--aia-pill-font-size, 14px);font-weight:400;line-height:normal;white-space:normal;letter-spacing:var(--aia-completed-pill-tracking, -.02em);cursor:pointer;transition:background-color .15s ease}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--completed]:hover{background:var(--aia-completed-pill-bg-active, rgba(189, 189, 189, .35))}:where(.magicx-aia-input) span[class~=magicx-aia-segment-icon]{display:inline-block;width:1em;height:1em;margin-right:4px;vertical-align:-.125em;pointer-events:none;-webkit-user-select:none;user-select:none;will-change:transform}:where(.magicx-aia-input) span[class~=magicx-aia-segment-icon] svg{display:block;width:100%;height:100%}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]{background:var(--aia-completed-pill-bg-active, rgba(189, 189, 189, .35));caret-color:transparent;cursor:text}.magicx-aia-input:has(strong[class~=\"magicx-aia-segment--editing\"]){caret-color:transparent}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::selection{background:transparent;color:inherit}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::-moz-selection{background:transparent;color:inherit}.magicx-aia-input[data-aia-empty=true][data-placeholder]:before{content:attr(data-placeholder);color:var(--aia-color-text-muted, #c1c4cb);opacity:.7;pointer-events:none;transition:opacity var(--aia-placeholder-fade, .12s) ease-out}.magicx-aia-input[data-aia-placeholder-leaving]:before{opacity:0}@media (prefers-reduced-motion: reduce){.magicx-aia-input[data-aia-empty=true][data-placeholder]:before{transition-duration:0s}}.magicx-aia-input[data-aia-empty=true]{display:inline-block;min-width:1px}.magicx-aia-pill-list-container{display:inline;margin-left:8px}.magicx-aia-pill-list-container:empty,.magicx-aia-pill-list-container[data-aia-pill-wrapped]{margin-left:0}.magicx-aia-submit-slot{display:contents}:where(.magicx-aia-input) strong[class~=magicx-aia-shimmer-sweep]{animation:aiaPillReveal .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes aiaPillReveal{0%{opacity:0}}@media (min-width: 769px){[data-aia-dropdown] [data-aia-footer]:before,[data-aia-dropdown][data-options-position=above] [data-aia-footer]:before,:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before{inset:0;background:var(--aia-surface, #ffffff)}}\n"] }]
         }], propDecorators: { apiConfig: [{
                 type: Input
             }], additionalContext: [{
@@ -2191,6 +2205,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], completedParams: [{
                 type: Input
+            }], showProducts: [{
+                type: Input
             }], products: [{
                 type: Input
             }], submitButton: [{
@@ -2558,10 +2574,14 @@ const visibleDateRange = visibleDateRange$1;
 // Option icons, for a custom dropdown that draws `icon_svg` itself.
 const optionLabel = optionLabel$1;
 const sanitizeOptionIconSvg = sanitizeOptionIconSvg$1;
+// Product strip helpers, for a custom strip fed from `customFields$`.
+const PRODUCT_PATH_PREFIX = PRODUCT_PATH_PREFIX$1;
+const productFromMatchedItem = productFromMatchedItem$1;
+const productsFromCustomFields = productsFromCustomFields$1;
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AIAutocompleteComponent, AIAutocompleteController, AIAutocompleteDropdownComponent, AIAutocompleteInputDirective, AIAutocompleteModule, DATE_RANGE_META_END, DATE_RANGE_META_START, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, dateCellMarks, formatDate, formatDateRange, isoDate, monthLabel, optionLabel, parseDate, parseLooseDate, parseLooseDateRange, sanitizeOptionIconSvg, selectedRangeFor, visibleDateRange, withSkippedParams };
+export { AIAutocompleteComponent, AIAutocompleteController, AIAutocompleteDropdownComponent, AIAutocompleteInputDirective, AIAutocompleteModule, DATE_RANGE_META_END, DATE_RANGE_META_START, PRODUCT_PATH_PREFIX, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, dateCellMarks, formatDate, formatDateRange, isoDate, monthLabel, optionLabel, parseDate, parseLooseDate, parseLooseDateRange, productFromMatchedItem, productsFromCustomFields, sanitizeOptionIconSvg, selectedRangeFor, visibleDateRange, withSkippedParams };
 //# sourceMappingURL=magicx-eng-ai-autocomplete-angular.mjs.map