@magicx-eng/ai-autocomplete-angular 0.40.1 → 0.41.0

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

@@ -331,6 +331,8 @@ class ProductStripComponent {
          * placeholder once none is left.
          */
         this.failedImages = new Map();
+        /** Per product id, the `src` that last finished loading; its tile drops the fill. */
+        this.loadedImages = new Map();
         this.select = new EventEmitter();
         /**
          * Focus moved into / out of the strip. The panel closes on blur by default
@@ -356,6 +358,14 @@ class ProductStripComponent {
         const failed = (_a = this.failedImages.get(product.id)) !== null && _a !== void 0 ? _a : [];
         return (_b = productImageSources$1(product.imageUrl).find((src) => !failed.includes(src))) !== null && _b !== void 0 ? _b : null;
     }
+    /** Whether the card's photo has loaded, so the placeholder fill steps aside. */
+    imageLoaded(product) {
+        const src = this.imageSource(product);
+        return src !== null && this.loadedImages.get(product.id) === src;
+    }
+    onImageLoad(product, src) {
+        this.loadedImages.set(product.id, src);
+    }
     onImageError(product) {
         var _a;
         const src = this.imageSource(product);
@@ -410,10 +420,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", layout: "layout", imageFallback: "imageFallback", strings: "strings" }, outputs: { select: "select", focusChange: "focusChange" }, viewQueries: [{ propertyName: "row", first: true, predicate: ["row"], descendants: true }], usesOnChanges: true, 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  [attr.data-aia-products-layout]=\"layout\"\n  role=\"group\"\n  [attr.aria-labelledby]=\"labelId\"\n>\n  <!-- data-aia-products-label: the scroll arrow centres itself on this row. -->\n  <div class=\"aia-products-label\" [id]=\"labelId\" data-aia-products-label=\"\">{{ strings.products }}</div>\n\n  <!-- #row: the component binds wheel-to-sideways scrolling on it. -->\n  <div #row 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      [attr.data-aia-product-sold-out]=\"product.available === false ? '' : null\"\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      <span\n        class=\"aia-product-media\"\n        aria-hidden=\"true\"\n        [attr.data-aia-product-placeholder]=\"!imageSource(product) && imageFallback === 'image' ? '' : null\"\n        [attr.data-aia-product-initial]=\"!imageSource(product) && imageFallback === 'initial' ? '' : 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=\"imageSource(product) as src\"\n          class=\"aia-product-image\"\n          [src]=\"src\"\n          (error)=\"onImageError(product)\"\n          alt=\"\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        />\n        <ng-container *ngIf=\"!imageSource(product) && imageFallback === 'initial'\">{{ initial(product.title) }}</ng-container>\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        <!-- In the text column rather than the aria-hidden media tile, so the\n             card's accessible name says it; the stylesheet lifts it over the\n             image. -->\n        <span *ngIf=\"product.available === false\" class=\"aia-product-badge\">{{ strings.soldOut }}</span>\n      </span>\n    </a>\n  </div>\n</section>\n", styles: [".aia-products{display:flex;flex-direction:column;gap:6px;padding:0 10px;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;margin-inline:-6px;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;position:relative}.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:contain}.aia-product-media:where([data-aia-product-initial]){display:flex;align-items:center;justify-content:center;color:var(--aia-product-title-color, var(--aia-option-color-selected, currentColor));font-size:24px;font-weight:600;line-height:1}.aia-product-media[data-aia-product-placeholder]:after{content:\"\";position:absolute;inset:22%;background:var( --aia-product-placeholder-image, url(\"data:image/svg+xml,%3Csvg viewBox='0 -0.5 32 32' fill-rule='evenodd' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='matrix(1,0,0,1,-384,-144)'%3E%3Cg transform='matrix(0.875,0,0,0.875,90.25,19.125)'%3E%3Cpath d='M340.924,147.74C341.224,146.789 342.107,146.143 343.104,146.143C347.705,146.143 360.491,146.143 364.985,146.143C365.965,146.143 366.836,146.768 367.15,147.697C368.119,150.386 370,155.73 370,157C370,159.208 368.208,161 366,161C363.792,161 362,159.208 362,157C362,159.208 360.208,161 358,161C355.792,161 354,159.208 354,157C354,159.208 352.208,161 350,161C347.792,161 346,159.208 346,157C346,159.208 344.208,161 342,161C340.53,161 339.244,160.205 338.549,159.022C338.057,158.185 337.944,157.179 338.236,156.254C338.787,154.507 340.172,150.121 340.924,147.74Z' fill='%2390e0ef'%3E%3C/path%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1.32454,48,-56.1457)'%3E%3Cpath d='M341.026,160.675C341.026,160.675 341.01,168.196 341.003,171.488C341.002,171.889 341.213,172.273 341.588,172.557C341.963,172.841 342.472,173 343.003,173C347.188,173 356.817,173 361,173C361.53,173 362.039,172.841 362.414,172.558C362.789,172.275 363,171.891 363,171.49C363,168.2 363,160.675 363,160.675' fill='%2390e0ef'%3E%3C/path%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,48,0)'%3E%3Cpath d='M355,168C355,166.895 354.105,166 353,166C352.356,166 351.644,166 351,166C349.895,166 349,166.895 349,168C349,170.069 349,173 349,173L355,173L355,168Z' fill='%2390e0ef'%3E%3C/path%3E%3C/g%3E%3Cg transform='matrix(1.11111,0,0,1.11111,-47.2678,-87.5361)'%3E%3Ccircle cx='411.5' cy='213.5' r='4.5' fill='%2390e0ef'%3E%3C/circle%3E%3C/g%3E%3Cpath d='M405.529,146C406.628,144.773 408.225,144 410,144C413.311,144 416,146.689 416,150C416,151.549 415.412,152.962 414.446,154.027C414.775,155.15 415,156.076 415,156.5C415,158.459 413.746,160.127 411.998,160.744L411.998,171C411.998,171.796 411.682,172.559 411.119,173.121C410.557,173.684 409.794,174 408.998,174L391.002,174C390.205,174 389.441,173.683 388.879,173.119C388.316,172.555 388,171.79 388.002,170.994L388.024,160.752C387.007,160.399 386.155,159.691 385.618,158.776L385.618,158.776C385.044,157.799 384.912,156.626 385.253,155.546L387.605,148.097C387.999,146.849 389.157,146 390.466,146L405.529,146ZM409.998,160.972C408.79,160.838 407.726,160.225 407,159.327C406.175,160.347 404.913,161 403.5,161C402.087,161 400.825,160.347 400,159.327C399.175,160.347 397.913,161 396.5,161C395.087,161 393.825,160.347 393,159.327C392.278,160.219 391.222,160.831 390.023,160.97L390.002,170.998C390.002,171.263 390.107,171.518 390.294,171.706C390.482,171.894 390.736,172 391.002,172L396,172L396,168C396,166.343 397.343,165 399,165L401,165C402.657,165 404,166.343 404,168L404,172L408.998,172C409.263,172 409.517,171.895 409.705,171.707C409.893,171.52 409.998,171.265 409.998,171L409.998,160.972ZM402,172L398,172L398,168C398,167.448 398.448,167 399,167C399,167 401,167 401,167C401.552,167 402,167.448 402,168L402,172ZM404.342,148L390.466,148C390.03,148 389.644,148.283 389.512,148.699L387.16,156.148C386.99,156.688 387.056,157.275 387.342,157.763C387.777,158.503 388.581,159 389.5,159C390.88,159 392,157.88 392,156.5C392,155.003 394,155.003 394,156.5C394,157.88 395.12,159 396.5,159C397.88,159 399,157.88 399,156.5C399,155.004 401,155.004 401,156.5C401,157.88 402.12,159 403.5,159C404.88,159 406,157.88 406,156.5C406,154.986 408,154.986 408,156.5C408,157.88 409.12,159 410.5,159C411.88,159 413,157.88 413,156.5C413,156.259 412.917,155.843 412.779,155.318C411.948,155.753 411.003,156 410,156C406.689,156 404,153.311 404,150C404,149.299 404.12,148.626 404.342,148ZM410,146C412.208,146 414,147.792 414,150C414,152.208 412.208,154 410,154C407.792,154 406,152.208 406,150C406,147.792 407.792,146 410,146ZM407.543,151.207L408.546,152.21C408.733,152.397 408.988,152.503 409.253,152.503C409.519,152.503 409.773,152.397 409.961,152.209L412.458,149.706C412.848,149.316 412.847,148.682 412.456,148.292C412.066,147.902 411.432,147.903 411.042,148.294L409.252,150.088C409.252,150.088 408.957,149.793 408.957,149.793C408.567,149.403 407.933,149.403 407.543,149.793C407.153,150.183 407.153,150.817 407.543,151.207Z' fill='%231990a7'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\") ) center / contain no-repeat}.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)) )}.aia-product-badge{position:absolute;top:var(--aia-product-badge-inset, 12px);left:var(--aia-product-badge-inset, 12px);padding:3px 6px;border-radius:4px;background:var(--aia-product-badge-bg, rgba(255, 255, 255, .94));color:var(--aia-product-badge-color, #1f2328);box-shadow:0 0 0 1px #00000014,0 1px 2px #0000002e;font-family:inherit;font-size:var(--aia-product-badge-font-size, 9px);font-weight:600;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;pointer-events:none}.aia-product[data-aia-product-sold-out] .aia-product-image{filter:grayscale(.55)}.aia-products[data-aia-products-layout=list] .aia-products-row{flex-direction:column;gap:var(--aia-product-list-gap, 2px);max-height:var(--aia-product-list-max-height, 320px);overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain}.aia-products[data-aia-products-layout=list] .aia-product{flex-direction:row;align-items:center;gap:10px;width:auto;padding:6px 8px}.aia-products[data-aia-products-layout=list] .aia-product-media{flex:0 0 auto;width:var(--aia-product-list-media-size, 44px);height:var(--aia-product-list-media-size, 44px)}.aia-products[data-aia-products-layout=list] .aia-product-body{flex:1 1 auto}.aia-products[data-aia-products-layout=list] .aia-product-badge{top:calc(50% + var(--aia-product-list-media-size, 44px) / 2);left:8px;width:var(--aia-product-list-media-size, 44px);transform:translateY(-100%);padding:2px 0;border-radius:0 0 8px 8px;background:var(--aia-product-badge-list-bg, rgba(17, 17, 17, .72));color:var(--aia-product-badge-list-color, #fff);box-shadow:none;font-size:var(--aia-product-badge-list-font-size, 7px);letter-spacing:.02em;text-align:center}\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", layout: "layout", imageFallback: "imageFallback", strings: "strings" }, outputs: { select: "select", focusChange: "focusChange" }, viewQueries: [{ propertyName: "row", first: true, predicate: ["row"], descendants: true }], usesOnChanges: true, 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  [attr.data-aia-products-layout]=\"layout\"\n  role=\"group\"\n  [attr.aria-labelledby]=\"labelId\"\n>\n  <!-- data-aia-products-label: the scroll arrow centres itself on this row. -->\n  <div class=\"aia-products-label\" [id]=\"labelId\" data-aia-products-label=\"\">{{ strings.products }}</div>\n\n  <!-- #row: the component binds wheel-to-sideways scrolling on it. -->\n  <div #row 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      [attr.data-aia-product-sold-out]=\"product.available === false ? '' : null\"\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      <span\n        class=\"aia-product-media\"\n        aria-hidden=\"true\"\n        [attr.data-aia-product-placeholder]=\"!imageSource(product) && imageFallback === 'image' ? '' : null\"\n        [attr.data-aia-product-initial]=\"!imageSource(product) && imageFallback === 'initial' ? '' : null\"\n        [attr.data-aia-image-loaded]=\"imageLoaded(product) ? '' : 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=\"imageSource(product) as src\"\n          class=\"aia-product-image\"\n          [src]=\"src\"\n          (load)=\"onImageLoad(product, src)\"\n          (error)=\"onImageError(product)\"\n          alt=\"\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        />\n        <ng-container *ngIf=\"!imageSource(product) && imageFallback === 'initial'\">{{ initial(product.title) }}</ng-container>\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        <!-- In the text column rather than the aria-hidden media tile, so the\n             card's accessible name says it; the stylesheet lifts it over the\n             image. -->\n        <span *ngIf=\"product.available === false\" class=\"aia-product-badge\">{{ strings.soldOut }}</span>\n      </span>\n    </a>\n  </div>\n</section>\n", styles: [".aia-products{display:flex;flex-direction:column;gap:6px;padding:0 10px;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;margin-inline:-6px;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;position:relative}.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-media[data-aia-image-loaded]{background:transparent}.aia-product-image{display:block;width:auto;max-width:100%;height:100%;margin:0 auto;border-radius:var(--aia-product-image-radius, 8px);object-fit:contain}.aia-product-media:where([data-aia-product-initial]){display:flex;align-items:center;justify-content:center;color:var(--aia-product-title-color, var(--aia-option-color-selected, currentColor));font-size:24px;font-weight:600;line-height:1}.aia-product-media[data-aia-product-placeholder]:after{content:\"\";position:absolute;inset:22%;background:var( --aia-product-placeholder-image, url(\"data:image/svg+xml,%3Csvg viewBox='0 -0.5 32 32' fill-rule='evenodd' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='matrix(1,0,0,1,-384,-144)'%3E%3Cg transform='matrix(0.875,0,0,0.875,90.25,19.125)'%3E%3Cpath d='M340.924,147.74C341.224,146.789 342.107,146.143 343.104,146.143C347.705,146.143 360.491,146.143 364.985,146.143C365.965,146.143 366.836,146.768 367.15,147.697C368.119,150.386 370,155.73 370,157C370,159.208 368.208,161 366,161C363.792,161 362,159.208 362,157C362,159.208 360.208,161 358,161C355.792,161 354,159.208 354,157C354,159.208 352.208,161 350,161C347.792,161 346,159.208 346,157C346,159.208 344.208,161 342,161C340.53,161 339.244,160.205 338.549,159.022C338.057,158.185 337.944,157.179 338.236,156.254C338.787,154.507 340.172,150.121 340.924,147.74Z' fill='%2390e0ef'%3E%3C/path%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1.32454,48,-56.1457)'%3E%3Cpath d='M341.026,160.675C341.026,160.675 341.01,168.196 341.003,171.488C341.002,171.889 341.213,172.273 341.588,172.557C341.963,172.841 342.472,173 343.003,173C347.188,173 356.817,173 361,173C361.53,173 362.039,172.841 362.414,172.558C362.789,172.275 363,171.891 363,171.49C363,168.2 363,160.675 363,160.675' fill='%2390e0ef'%3E%3C/path%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,48,0)'%3E%3Cpath d='M355,168C355,166.895 354.105,166 353,166C352.356,166 351.644,166 351,166C349.895,166 349,166.895 349,168C349,170.069 349,173 349,173L355,173L355,168Z' fill='%2390e0ef'%3E%3C/path%3E%3C/g%3E%3Cg transform='matrix(1.11111,0,0,1.11111,-47.2678,-87.5361)'%3E%3Ccircle cx='411.5' cy='213.5' r='4.5' fill='%2390e0ef'%3E%3C/circle%3E%3C/g%3E%3Cpath d='M405.529,146C406.628,144.773 408.225,144 410,144C413.311,144 416,146.689 416,150C416,151.549 415.412,152.962 414.446,154.027C414.775,155.15 415,156.076 415,156.5C415,158.459 413.746,160.127 411.998,160.744L411.998,171C411.998,171.796 411.682,172.559 411.119,173.121C410.557,173.684 409.794,174 408.998,174L391.002,174C390.205,174 389.441,173.683 388.879,173.119C388.316,172.555 388,171.79 388.002,170.994L388.024,160.752C387.007,160.399 386.155,159.691 385.618,158.776L385.618,158.776C385.044,157.799 384.912,156.626 385.253,155.546L387.605,148.097C387.999,146.849 389.157,146 390.466,146L405.529,146ZM409.998,160.972C408.79,160.838 407.726,160.225 407,159.327C406.175,160.347 404.913,161 403.5,161C402.087,161 400.825,160.347 400,159.327C399.175,160.347 397.913,161 396.5,161C395.087,161 393.825,160.347 393,159.327C392.278,160.219 391.222,160.831 390.023,160.97L390.002,170.998C390.002,171.263 390.107,171.518 390.294,171.706C390.482,171.894 390.736,172 391.002,172L396,172L396,168C396,166.343 397.343,165 399,165L401,165C402.657,165 404,166.343 404,168L404,172L408.998,172C409.263,172 409.517,171.895 409.705,171.707C409.893,171.52 409.998,171.265 409.998,171L409.998,160.972ZM402,172L398,172L398,168C398,167.448 398.448,167 399,167C399,167 401,167 401,167C401.552,167 402,167.448 402,168L402,172ZM404.342,148L390.466,148C390.03,148 389.644,148.283 389.512,148.699L387.16,156.148C386.99,156.688 387.056,157.275 387.342,157.763C387.777,158.503 388.581,159 389.5,159C390.88,159 392,157.88 392,156.5C392,155.003 394,155.003 394,156.5C394,157.88 395.12,159 396.5,159C397.88,159 399,157.88 399,156.5C399,155.004 401,155.004 401,156.5C401,157.88 402.12,159 403.5,159C404.88,159 406,157.88 406,156.5C406,154.986 408,154.986 408,156.5C408,157.88 409.12,159 410.5,159C411.88,159 413,157.88 413,156.5C413,156.259 412.917,155.843 412.779,155.318C411.948,155.753 411.003,156 410,156C406.689,156 404,153.311 404,150C404,149.299 404.12,148.626 404.342,148ZM410,146C412.208,146 414,147.792 414,150C414,152.208 412.208,154 410,154C407.792,154 406,152.208 406,150C406,147.792 407.792,146 410,146ZM407.543,151.207L408.546,152.21C408.733,152.397 408.988,152.503 409.253,152.503C409.519,152.503 409.773,152.397 409.961,152.209L412.458,149.706C412.848,149.316 412.847,148.682 412.456,148.292C412.066,147.902 411.432,147.903 411.042,148.294L409.252,150.088C409.252,150.088 408.957,149.793 408.957,149.793C408.567,149.403 407.933,149.403 407.543,149.793C407.153,150.183 407.153,150.817 407.543,151.207Z' fill='%231990a7'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\") ) center / contain no-repeat}.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)) )}.aia-product-badge{position:absolute;top:var(--aia-product-badge-inset, 12px);left:var(--aia-product-badge-inset, 12px);padding:3px 6px;border-radius:4px;background:var(--aia-product-badge-bg, rgba(255, 255, 255, .94));color:var(--aia-product-badge-color, #1f2328);box-shadow:0 0 0 1px #00000014,0 1px 2px #0000002e;font-family:inherit;font-size:var(--aia-product-badge-font-size, 9px);font-weight:600;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;pointer-events:none}.aia-product[data-aia-product-sold-out] .aia-product-image{filter:grayscale(.55)}.aia-products[data-aia-products-layout=list] .aia-products-row{flex-direction:column;gap:var(--aia-product-list-gap, 2px);max-height:var(--aia-product-list-max-height, 320px);overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain}.aia-products[data-aia-products-layout=list] .aia-product{flex-direction:row;align-items:center;gap:10px;width:auto;padding:6px 8px}.aia-products[data-aia-products-layout=list] .aia-product-media{flex:0 0 auto;width:var(--aia-product-list-media-size, 44px);height:var(--aia-product-list-media-size, 44px)}.aia-products[data-aia-products-layout=list] .aia-product-body{flex:1 1 auto}.aia-products[data-aia-products-layout=list] .aia-product-badge{top:calc(50% + var(--aia-product-list-media-size, 44px) / 2);left:8px;width:var(--aia-product-list-media-size, 44px);transform:translateY(-100%);padding:2px 0;border-radius:0 0 8px 8px;background:var(--aia-product-badge-list-bg, rgba(17, 17, 17, .72));color:var(--aia-product-badge-list-color, #fff);box-shadow:none;font-size:var(--aia-product-badge-list-font-size, 7px);letter-spacing:.02em;text-align:center}\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  [attr.data-aia-products-layout]=\"layout\"\n  role=\"group\"\n  [attr.aria-labelledby]=\"labelId\"\n>\n  <!-- data-aia-products-label: the scroll arrow centres itself on this row. -->\n  <div class=\"aia-products-label\" [id]=\"labelId\" data-aia-products-label=\"\">{{ strings.products }}</div>\n\n  <!-- #row: the component binds wheel-to-sideways scrolling on it. -->\n  <div #row 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      [attr.data-aia-product-sold-out]=\"product.available === false ? '' : null\"\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      <span\n        class=\"aia-product-media\"\n        aria-hidden=\"true\"\n        [attr.data-aia-product-placeholder]=\"!imageSource(product) && imageFallback === 'image' ? '' : null\"\n        [attr.data-aia-product-initial]=\"!imageSource(product) && imageFallback === 'initial' ? '' : 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=\"imageSource(product) as src\"\n          class=\"aia-product-image\"\n          [src]=\"src\"\n          (error)=\"onImageError(product)\"\n          alt=\"\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        />\n        <ng-container *ngIf=\"!imageSource(product) && imageFallback === 'initial'\">{{ initial(product.title) }}</ng-container>\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        <!-- In the text column rather than the aria-hidden media tile, so the\n             card's accessible name says it; the stylesheet lifts it over the\n             image. -->\n        <span *ngIf=\"product.available === false\" class=\"aia-product-badge\">{{ strings.soldOut }}</span>\n      </span>\n    </a>\n  </div>\n</section>\n", styles: [".aia-products{display:flex;flex-direction:column;gap:6px;padding:0 10px;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;margin-inline:-6px;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;position:relative}.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:contain}.aia-product-media:where([data-aia-product-initial]){display:flex;align-items:center;justify-content:center;color:var(--aia-product-title-color, var(--aia-option-color-selected, currentColor));font-size:24px;font-weight:600;line-height:1}.aia-product-media[data-aia-product-placeholder]:after{content:\"\";position:absolute;inset:22%;background:var( --aia-product-placeholder-image, url(\"data:image/svg+xml,%3Csvg viewBox='0 -0.5 32 32' fill-rule='evenodd' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='matrix(1,0,0,1,-384,-144)'%3E%3Cg transform='matrix(0.875,0,0,0.875,90.25,19.125)'%3E%3Cpath d='M340.924,147.74C341.224,146.789 342.107,146.143 343.104,146.143C347.705,146.143 360.491,146.143 364.985,146.143C365.965,146.143 366.836,146.768 367.15,147.697C368.119,150.386 370,155.73 370,157C370,159.208 368.208,161 366,161C363.792,161 362,159.208 362,157C362,159.208 360.208,161 358,161C355.792,161 354,159.208 354,157C354,159.208 352.208,161 350,161C347.792,161 346,159.208 346,157C346,159.208 344.208,161 342,161C340.53,161 339.244,160.205 338.549,159.022C338.057,158.185 337.944,157.179 338.236,156.254C338.787,154.507 340.172,150.121 340.924,147.74Z' fill='%2390e0ef'%3E%3C/path%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1.32454,48,-56.1457)'%3E%3Cpath d='M341.026,160.675C341.026,160.675 341.01,168.196 341.003,171.488C341.002,171.889 341.213,172.273 341.588,172.557C341.963,172.841 342.472,173 343.003,173C347.188,173 356.817,173 361,173C361.53,173 362.039,172.841 362.414,172.558C362.789,172.275 363,171.891 363,171.49C363,168.2 363,160.675 363,160.675' fill='%2390e0ef'%3E%3C/path%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,48,0)'%3E%3Cpath d='M355,168C355,166.895 354.105,166 353,166C352.356,166 351.644,166 351,166C349.895,166 349,166.895 349,168C349,170.069 349,173 349,173L355,173L355,168Z' fill='%2390e0ef'%3E%3C/path%3E%3C/g%3E%3Cg transform='matrix(1.11111,0,0,1.11111,-47.2678,-87.5361)'%3E%3Ccircle cx='411.5' cy='213.5' r='4.5' fill='%2390e0ef'%3E%3C/circle%3E%3C/g%3E%3Cpath d='M405.529,146C406.628,144.773 408.225,144 410,144C413.311,144 416,146.689 416,150C416,151.549 415.412,152.962 414.446,154.027C414.775,155.15 415,156.076 415,156.5C415,158.459 413.746,160.127 411.998,160.744L411.998,171C411.998,171.796 411.682,172.559 411.119,173.121C410.557,173.684 409.794,174 408.998,174L391.002,174C390.205,174 389.441,173.683 388.879,173.119C388.316,172.555 388,171.79 388.002,170.994L388.024,160.752C387.007,160.399 386.155,159.691 385.618,158.776L385.618,158.776C385.044,157.799 384.912,156.626 385.253,155.546L387.605,148.097C387.999,146.849 389.157,146 390.466,146L405.529,146ZM409.998,160.972C408.79,160.838 407.726,160.225 407,159.327C406.175,160.347 404.913,161 403.5,161C402.087,161 400.825,160.347 400,159.327C399.175,160.347 397.913,161 396.5,161C395.087,161 393.825,160.347 393,159.327C392.278,160.219 391.222,160.831 390.023,160.97L390.002,170.998C390.002,171.263 390.107,171.518 390.294,171.706C390.482,171.894 390.736,172 391.002,172L396,172L396,168C396,166.343 397.343,165 399,165L401,165C402.657,165 404,166.343 404,168L404,172L408.998,172C409.263,172 409.517,171.895 409.705,171.707C409.893,171.52 409.998,171.265 409.998,171L409.998,160.972ZM402,172L398,172L398,168C398,167.448 398.448,167 399,167C399,167 401,167 401,167C401.552,167 402,167.448 402,168L402,172ZM404.342,148L390.466,148C390.03,148 389.644,148.283 389.512,148.699L387.16,156.148C386.99,156.688 387.056,157.275 387.342,157.763C387.777,158.503 388.581,159 389.5,159C390.88,159 392,157.88 392,156.5C392,155.003 394,155.003 394,156.5C394,157.88 395.12,159 396.5,159C397.88,159 399,157.88 399,156.5C399,155.004 401,155.004 401,156.5C401,157.88 402.12,159 403.5,159C404.88,159 406,157.88 406,156.5C406,154.986 408,154.986 408,156.5C408,157.88 409.12,159 410.5,159C411.88,159 413,157.88 413,156.5C413,156.259 412.917,155.843 412.779,155.318C411.948,155.753 411.003,156 410,156C406.689,156 404,153.311 404,150C404,149.299 404.12,148.626 404.342,148ZM410,146C412.208,146 414,147.792 414,150C414,152.208 412.208,154 410,154C407.792,154 406,152.208 406,150C406,147.792 407.792,146 410,146ZM407.543,151.207L408.546,152.21C408.733,152.397 408.988,152.503 409.253,152.503C409.519,152.503 409.773,152.397 409.961,152.209L412.458,149.706C412.848,149.316 412.847,148.682 412.456,148.292C412.066,147.902 411.432,147.903 411.042,148.294L409.252,150.088C409.252,150.088 408.957,149.793 408.957,149.793C408.567,149.403 407.933,149.403 407.543,149.793C407.153,150.183 407.153,150.817 407.543,151.207Z' fill='%231990a7'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\") ) center / contain no-repeat}.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)) )}.aia-product-badge{position:absolute;top:var(--aia-product-badge-inset, 12px);left:var(--aia-product-badge-inset, 12px);padding:3px 6px;border-radius:4px;background:var(--aia-product-badge-bg, rgba(255, 255, 255, .94));color:var(--aia-product-badge-color, #1f2328);box-shadow:0 0 0 1px #00000014,0 1px 2px #0000002e;font-family:inherit;font-size:var(--aia-product-badge-font-size, 9px);font-weight:600;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;pointer-events:none}.aia-product[data-aia-product-sold-out] .aia-product-image{filter:grayscale(.55)}.aia-products[data-aia-products-layout=list] .aia-products-row{flex-direction:column;gap:var(--aia-product-list-gap, 2px);max-height:var(--aia-product-list-max-height, 320px);overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain}.aia-products[data-aia-products-layout=list] .aia-product{flex-direction:row;align-items:center;gap:10px;width:auto;padding:6px 8px}.aia-products[data-aia-products-layout=list] .aia-product-media{flex:0 0 auto;width:var(--aia-product-list-media-size, 44px);height:var(--aia-product-list-media-size, 44px)}.aia-products[data-aia-products-layout=list] .aia-product-body{flex:1 1 auto}.aia-products[data-aia-products-layout=list] .aia-product-badge{top:calc(50% + var(--aia-product-list-media-size, 44px) / 2);left:8px;width:var(--aia-product-list-media-size, 44px);transform:translateY(-100%);padding:2px 0;border-radius:0 0 8px 8px;background:var(--aia-product-badge-list-bg, rgba(17, 17, 17, .72));color:var(--aia-product-badge-list-color, #fff);box-shadow:none;font-size:var(--aia-product-badge-list-font-size, 7px);letter-spacing:.02em;text-align:center}\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  [attr.data-aia-products-layout]=\"layout\"\n  role=\"group\"\n  [attr.aria-labelledby]=\"labelId\"\n>\n  <!-- data-aia-products-label: the scroll arrow centres itself on this row. -->\n  <div class=\"aia-products-label\" [id]=\"labelId\" data-aia-products-label=\"\">{{ strings.products }}</div>\n\n  <!-- #row: the component binds wheel-to-sideways scrolling on it. -->\n  <div #row 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      [attr.data-aia-product-sold-out]=\"product.available === false ? '' : null\"\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      <span\n        class=\"aia-product-media\"\n        aria-hidden=\"true\"\n        [attr.data-aia-product-placeholder]=\"!imageSource(product) && imageFallback === 'image' ? '' : null\"\n        [attr.data-aia-product-initial]=\"!imageSource(product) && imageFallback === 'initial' ? '' : null\"\n        [attr.data-aia-image-loaded]=\"imageLoaded(product) ? '' : 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=\"imageSource(product) as src\"\n          class=\"aia-product-image\"\n          [src]=\"src\"\n          (load)=\"onImageLoad(product, src)\"\n          (error)=\"onImageError(product)\"\n          alt=\"\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        />\n        <ng-container *ngIf=\"!imageSource(product) && imageFallback === 'initial'\">{{ initial(product.title) }}</ng-container>\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        <!-- In the text column rather than the aria-hidden media tile, so the\n             card's accessible name says it; the stylesheet lifts it over the\n             image. -->\n        <span *ngIf=\"product.available === false\" class=\"aia-product-badge\">{{ strings.soldOut }}</span>\n      </span>\n    </a>\n  </div>\n</section>\n", styles: [".aia-products{display:flex;flex-direction:column;gap:6px;padding:0 10px;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;margin-inline:-6px;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;position:relative}.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-media[data-aia-image-loaded]{background:transparent}.aia-product-image{display:block;width:auto;max-width:100%;height:100%;margin:0 auto;border-radius:var(--aia-product-image-radius, 8px);object-fit:contain}.aia-product-media:where([data-aia-product-initial]){display:flex;align-items:center;justify-content:center;color:var(--aia-product-title-color, var(--aia-option-color-selected, currentColor));font-size:24px;font-weight:600;line-height:1}.aia-product-media[data-aia-product-placeholder]:after{content:\"\";position:absolute;inset:22%;background:var( --aia-product-placeholder-image, url(\"data:image/svg+xml,%3Csvg viewBox='0 -0.5 32 32' fill-rule='evenodd' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='matrix(1,0,0,1,-384,-144)'%3E%3Cg transform='matrix(0.875,0,0,0.875,90.25,19.125)'%3E%3Cpath d='M340.924,147.74C341.224,146.789 342.107,146.143 343.104,146.143C347.705,146.143 360.491,146.143 364.985,146.143C365.965,146.143 366.836,146.768 367.15,147.697C368.119,150.386 370,155.73 370,157C370,159.208 368.208,161 366,161C363.792,161 362,159.208 362,157C362,159.208 360.208,161 358,161C355.792,161 354,159.208 354,157C354,159.208 352.208,161 350,161C347.792,161 346,159.208 346,157C346,159.208 344.208,161 342,161C340.53,161 339.244,160.205 338.549,159.022C338.057,158.185 337.944,157.179 338.236,156.254C338.787,154.507 340.172,150.121 340.924,147.74Z' fill='%2390e0ef'%3E%3C/path%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1.32454,48,-56.1457)'%3E%3Cpath d='M341.026,160.675C341.026,160.675 341.01,168.196 341.003,171.488C341.002,171.889 341.213,172.273 341.588,172.557C341.963,172.841 342.472,173 343.003,173C347.188,173 356.817,173 361,173C361.53,173 362.039,172.841 362.414,172.558C362.789,172.275 363,171.891 363,171.49C363,168.2 363,160.675 363,160.675' fill='%2390e0ef'%3E%3C/path%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,48,0)'%3E%3Cpath d='M355,168C355,166.895 354.105,166 353,166C352.356,166 351.644,166 351,166C349.895,166 349,166.895 349,168C349,170.069 349,173 349,173L355,173L355,168Z' fill='%2390e0ef'%3E%3C/path%3E%3C/g%3E%3Cg transform='matrix(1.11111,0,0,1.11111,-47.2678,-87.5361)'%3E%3Ccircle cx='411.5' cy='213.5' r='4.5' fill='%2390e0ef'%3E%3C/circle%3E%3C/g%3E%3Cpath d='M405.529,146C406.628,144.773 408.225,144 410,144C413.311,144 416,146.689 416,150C416,151.549 415.412,152.962 414.446,154.027C414.775,155.15 415,156.076 415,156.5C415,158.459 413.746,160.127 411.998,160.744L411.998,171C411.998,171.796 411.682,172.559 411.119,173.121C410.557,173.684 409.794,174 408.998,174L391.002,174C390.205,174 389.441,173.683 388.879,173.119C388.316,172.555 388,171.79 388.002,170.994L388.024,160.752C387.007,160.399 386.155,159.691 385.618,158.776L385.618,158.776C385.044,157.799 384.912,156.626 385.253,155.546L387.605,148.097C387.999,146.849 389.157,146 390.466,146L405.529,146ZM409.998,160.972C408.79,160.838 407.726,160.225 407,159.327C406.175,160.347 404.913,161 403.5,161C402.087,161 400.825,160.347 400,159.327C399.175,160.347 397.913,161 396.5,161C395.087,161 393.825,160.347 393,159.327C392.278,160.219 391.222,160.831 390.023,160.97L390.002,170.998C390.002,171.263 390.107,171.518 390.294,171.706C390.482,171.894 390.736,172 391.002,172L396,172L396,168C396,166.343 397.343,165 399,165L401,165C402.657,165 404,166.343 404,168L404,172L408.998,172C409.263,172 409.517,171.895 409.705,171.707C409.893,171.52 409.998,171.265 409.998,171L409.998,160.972ZM402,172L398,172L398,168C398,167.448 398.448,167 399,167C399,167 401,167 401,167C401.552,167 402,167.448 402,168L402,172ZM404.342,148L390.466,148C390.03,148 389.644,148.283 389.512,148.699L387.16,156.148C386.99,156.688 387.056,157.275 387.342,157.763C387.777,158.503 388.581,159 389.5,159C390.88,159 392,157.88 392,156.5C392,155.003 394,155.003 394,156.5C394,157.88 395.12,159 396.5,159C397.88,159 399,157.88 399,156.5C399,155.004 401,155.004 401,156.5C401,157.88 402.12,159 403.5,159C404.88,159 406,157.88 406,156.5C406,154.986 408,154.986 408,156.5C408,157.88 409.12,159 410.5,159C411.88,159 413,157.88 413,156.5C413,156.259 412.917,155.843 412.779,155.318C411.948,155.753 411.003,156 410,156C406.689,156 404,153.311 404,150C404,149.299 404.12,148.626 404.342,148ZM410,146C412.208,146 414,147.792 414,150C414,152.208 412.208,154 410,154C407.792,154 406,152.208 406,150C406,147.792 407.792,146 410,146ZM407.543,151.207L408.546,152.21C408.733,152.397 408.988,152.503 409.253,152.503C409.519,152.503 409.773,152.397 409.961,152.209L412.458,149.706C412.848,149.316 412.847,148.682 412.456,148.292C412.066,147.902 411.432,147.903 411.042,148.294L409.252,150.088C409.252,150.088 408.957,149.793 408.957,149.793C408.567,149.403 407.933,149.403 407.543,149.793C407.153,150.183 407.153,150.817 407.543,151.207Z' fill='%231990a7'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\") ) center / contain no-repeat}.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)) )}.aia-product-badge{position:absolute;top:var(--aia-product-badge-inset, 12px);left:var(--aia-product-badge-inset, 12px);padding:3px 6px;border-radius:4px;background:var(--aia-product-badge-bg, rgba(255, 255, 255, .94));color:var(--aia-product-badge-color, #1f2328);box-shadow:0 0 0 1px #00000014,0 1px 2px #0000002e;font-family:inherit;font-size:var(--aia-product-badge-font-size, 9px);font-weight:600;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;pointer-events:none}.aia-product[data-aia-product-sold-out] .aia-product-image{filter:grayscale(.55)}.aia-products[data-aia-products-layout=list] .aia-products-row{flex-direction:column;gap:var(--aia-product-list-gap, 2px);max-height:var(--aia-product-list-max-height, 320px);overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain}.aia-products[data-aia-products-layout=list] .aia-product{flex-direction:row;align-items:center;gap:10px;width:auto;padding:6px 8px}.aia-products[data-aia-products-layout=list] .aia-product-media{flex:0 0 auto;width:var(--aia-product-list-media-size, 44px);height:var(--aia-product-list-media-size, 44px)}.aia-products[data-aia-products-layout=list] .aia-product-body{flex:1 1 auto}.aia-products[data-aia-products-layout=list] .aia-product-badge{top:calc(50% + var(--aia-product-list-media-size, 44px) / 2);left:8px;width:var(--aia-product-list-media-size, 44px);transform:translateY(-100%);padding:2px 0;border-radius:0 0 8px 8px;background:var(--aia-product-badge-list-bg, rgba(17, 17, 17, .72));color:var(--aia-product-badge-list-color, #fff);box-shadow:none;font-size:var(--aia-product-badge-list-font-size, 7px);letter-spacing:.02em;text-align:center}\n"] }]
         }], propDecorators: { products: [{
                 type: Input
             }], listboxId: [{
@@ -557,6 +567,8 @@ class SuggestionItemComponent {
          * placeholder fill once none is left.
          */
         this.failedSrcs = [];
+        /** The `src` that last finished loading; the tile drops its fill for it. */
+        this.loadedSrc = null;
     }
     /**
      * Start delay of this row's entrance animation (ms) — each row rises in a
@@ -594,6 +606,14 @@ class SuggestionItemComponent {
         const sources = this.imageSources;
         return sources.length > 0 && sources.every((src) => this.failedSrcs.includes(src));
     }
+    /** Whether the shown picture has loaded, so the placeholder fill steps aside. */
+    get imageLoaded() {
+        return !this.imageFailed && this.imageSrc !== null && this.loadedSrc === this.imageSrc;
+    }
+    onImageLoad(src) {
+        this.loadedSrc = src;
+        this.cdr.markForCheck();
+    }
     onImageError() {
         const src = this.imageSrc;
         if (src !== null && !this.failedSrcs.includes(src))
@@ -661,10 +681,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", showImage: "showImage", showCount: "showCount", scrollHint: "scrollHint", enterDelayMs: "enterDelayMs" }, outputs: { select: "select", highlight: "highlight", unhighlight: "unhighlight" }, 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.data-aia-image]=\"imageSrc ? '' : null\"\n  [attr.data-aia-item-count]=\"countLabel !== null ? option.item_count : 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  (mouseleave)=\"onMouseLeave()\"\n>\n  <span class=\"aia-suggestion-content\">\n    <!-- The tile keeps a placeholder fill under the picture, so a slow or\n         failed load leaves a neutral square rather than a gap. The picture is\n         decorative: the text is the option's accessible name. -->\n    <span *ngIf=\"imageSrc as src\" class=\"aia-suggestion-image\" aria-hidden=\"true\">\n      <img\n        [src]=\"src\"\n        alt=\"\"\n        loading=\"lazy\"\n        decoding=\"async\"\n        referrerpolicy=\"no-referrer\"\n        draggable=\"false\"\n        [hidden]=\"imageFailed\"\n        (error)=\"onImageError()\"\n      />\n    </span>\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\"\n      ><ng-container *ngFor=\"let part of parts; trackBy: trackByIndex\"\n        ><strong *ngIf=\"part.bold; else plain\" class=\"aia-suggestion-match\">{{ part.text }}</strong\n        ><ng-template #plain>{{ part.text }}</ng-template></ng-container\n      ><ng-container *ngIf=\"option.parameterLabel\"\n        >{{ \" \" }}<span class=\"aia-suggestion-parameter\">{{ option.parameterLabel }}</span></ng-container\n      ></span\n    >\n    <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n    <!-- Part of the row's accessible name, read after the option's text. -->\n    <span *ngIf=\"countLabel !== null\" class=\"aia-suggestion-count\">{{ countLabel }}</span>\n  </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:hidden;overflow:clip;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}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}@keyframes aiaSuggestionRiseIn{0%{transform:translateY(16px)}}@media (prefers-reduced-motion: reduce){.aia-suggestion-item,.aia-suggestion-content{animation-duration:0s;animation-delay:0s}}.aia-suggestion-content{position:relative;z-index:2;animation:aiaSuggestionRiseIn .28s cubic-bezier(.25,.46,.45,.94) both,aiaSuggestionFadeIn .15s ease-out both;animation-delay:var(--aia-option-enter-delay, 0ms)}.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))}[data-aia-fit] .aia-suggestion-item-scroll-hint .aia-suggestion-content{mask-image:none}.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;animation:aiaSkeletonBarIn .1s ease-out}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}.aia-suggestion-parameter{display:block;font-size:var(--aia-option-parameter-font-size, 12px);font-weight:400;line-height:16px;text-indent:0;color:var(--aia-option-parameter-color, inherit);opacity:var(--aia-option-parameter-opacity, .6)}.aia-suggestion-match{color:var(--aia-smart-suggestion-accent, #b84549);font-weight:600}.aia-suggestion-item[data-aia-loading] .aia-suggestion-parameter{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:not(:has(.aia-suggestion-count)):has(.aia-suggestion-icon){padding-left:calc(1em + 8px);text-indent:calc(-1em - 8px)}.aia-suggestion-content:has(.aia-suggestion-image),.aia-suggestion-content:has(.aia-suggestion-count){display:flex;flex:1 1 auto;align-items:flex-start;min-width:0}.aia-suggestion-content:has(.aia-suggestion-image) .aia-suggestion-text,.aia-suggestion-content:has(.aia-suggestion-count) .aia-suggestion-text{flex:1 1 auto;min-width:0}.aia-suggestion-item[data-aia-loading] .aia-suggestion-content .aia-suggestion-text{flex:0 1 auto}.aia-suggestion-content:has(.aia-suggestion-image){align-items:center;gap:var(--aia-option-image-gap, 12px)}.aia-suggestion-image{flex:0 0 auto;display:block;width:var(--aia-option-image-size, 40px);height:var(--aia-option-image-size, 40px);border-radius:var(--aia-option-image-radius, 12px);overflow:hidden;background:var(--aia-option-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, .083)))}.aia-suggestion-image img{display:block;width:100%;height:100%;object-fit:contain}.aia-suggestion-image img[hidden]{display:none}.aia-suggestion-count{flex:0 0 auto;margin-left:auto;padding-left:12px;font-size:var(--aia-option-count-font-size, 12px);font-weight:400;line-height:21px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--aia-option-count-color, inherit);opacity:var(--aia-option-count-opacity, .6)}.aia-suggestion-count:after{content:\" \" var(--aia-option-count-unit, \"items\")}.aia-suggestion-item[data-aia-item-count=\"1\"] .aia-suggestion-count:after{content:\" \" var(--aia-option-count-unit-one, var(--aia-option-count-unit, \"item\"))}.aia-suggestion-item[data-aia-loading] .aia-suggestion-image img{visibility:hidden}.aia-suggestion-item[data-aia-loading] .aia-suggestion-count{display:none}[data-aia-group]:has(.aia-suggestion-parameter){--aia-option-row-height: 53px}[data-aia-group]:has(.aia-suggestion-image){--aia-option-row-height: calc(var(--aia-option-image-size, 40px) + 16px)}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)){display:flex;flex:1 1 auto;align-items:center;gap:var(--aia-option-image-gap, 12px);min-width:0;min-height:var(--aia-option-image-size, 40px);padding-left:0;text-indent:0}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)) .aia-suggestion-icon{flex:0 0 auto;justify-content:center;width:var(--aia-option-image-size, 40px);height:var(--aia-option-image-size, 40px);margin-right:0}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)) .aia-suggestion-icon svg{width:var(--aia-option-tile-icon-size, 1.5em);height:var(--aia-option-tile-icon-size, 1.5em)}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading] .aia-suggestion-content,[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading] .aia-suggestion-text{animation:none}[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading]{animation:aiaSkeletonOut .1s ease-in forwards}@keyframes aiaSkeletonBarIn{0%{background-color:transparent;color:inherit}}@keyframes aiaSkeletonOut{to{opacity:0}}\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 });
+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", showImage: "showImage", showCount: "showCount", scrollHint: "scrollHint", enterDelayMs: "enterDelayMs" }, outputs: { select: "select", highlight: "highlight", unhighlight: "unhighlight" }, 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.data-aia-image]=\"imageSrc ? '' : null\"\n  [attr.data-aia-item-count]=\"countLabel !== null ? option.item_count : 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  (mouseleave)=\"onMouseLeave()\"\n>\n  <span class=\"aia-suggestion-content\">\n    <!-- The tile keeps a placeholder fill until the picture loads, so a slow\n         or failed load leaves a neutral square rather than a gap. The picture\n         is decorative: the text is the option's accessible name. -->\n    <span\n      *ngIf=\"imageSrc as src\"\n      class=\"aia-suggestion-image\"\n      aria-hidden=\"true\"\n      [attr.data-aia-image-loaded]=\"imageLoaded ? '' : null\"\n    >\n      <img\n        [src]=\"src\"\n        alt=\"\"\n        loading=\"lazy\"\n        decoding=\"async\"\n        referrerpolicy=\"no-referrer\"\n        draggable=\"false\"\n        [hidden]=\"imageFailed\"\n        (load)=\"onImageLoad(src)\"\n        (error)=\"onImageError()\"\n      />\n    </span>\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\"\n      ><ng-container *ngFor=\"let part of parts; trackBy: trackByIndex\"\n        ><strong *ngIf=\"part.bold; else plain\" class=\"aia-suggestion-match\">{{ part.text }}</strong\n        ><ng-template #plain>{{ part.text }}</ng-template></ng-container\n      ><ng-container *ngIf=\"option.parameterLabel\"\n        >{{ \" \" }}<span class=\"aia-suggestion-parameter\">{{ option.parameterLabel }}</span></ng-container\n      ></span\n    >\n    <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n    <!-- Part of the row's accessible name, read after the option's text. -->\n    <span *ngIf=\"countLabel !== null\" class=\"aia-suggestion-count\">{{ countLabel }}</span>\n  </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:hidden;overflow:clip;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}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}@keyframes aiaSuggestionRiseIn{0%{transform:translateY(16px)}}@media (prefers-reduced-motion: reduce){.aia-suggestion-item,.aia-suggestion-content{animation-duration:0s;animation-delay:0s}}.aia-suggestion-content{position:relative;z-index:2;animation:aiaSuggestionRiseIn .28s cubic-bezier(.25,.46,.45,.94) both,aiaSuggestionFadeIn .15s ease-out both;animation-delay:var(--aia-option-enter-delay, 0ms)}.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))}[data-aia-fit] .aia-suggestion-item-scroll-hint .aia-suggestion-content{mask-image:none}.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;animation:aiaSkeletonBarIn .1s ease-out}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}.aia-suggestion-parameter{display:block;font-size:var(--aia-option-parameter-font-size, 12px);font-weight:400;line-height:16px;text-indent:0;color:var(--aia-option-parameter-color, inherit);opacity:var(--aia-option-parameter-opacity, .6)}.aia-suggestion-match{color:var(--aia-smart-suggestion-accent, #b84549);font-weight:600}.aia-suggestion-item[data-aia-loading] .aia-suggestion-parameter{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:not(:has(.aia-suggestion-count)):has(.aia-suggestion-icon){padding-left:calc(1em + 8px);text-indent:calc(-1em - 8px)}.aia-suggestion-content:has(.aia-suggestion-image),.aia-suggestion-content:has(.aia-suggestion-count){display:flex;flex:1 1 auto;align-items:flex-start;min-width:0}.aia-suggestion-content:has(.aia-suggestion-image) .aia-suggestion-text,.aia-suggestion-content:has(.aia-suggestion-count) .aia-suggestion-text{flex:1 1 auto;min-width:0}.aia-suggestion-item[data-aia-loading] .aia-suggestion-content .aia-suggestion-text{flex:0 1 auto}.aia-suggestion-content:has(.aia-suggestion-image){align-items:center;gap:var(--aia-option-image-gap, 12px)}.aia-suggestion-image{flex:0 0 auto;display:block;width:var(--aia-option-image-size, 40px);height:var(--aia-option-image-size, 40px);border-radius:var(--aia-option-image-radius, 12px);overflow:hidden;background:var(--aia-option-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, .083)))}.aia-suggestion-image[data-aia-image-loaded]{background:transparent}.aia-suggestion-image img{display:block;width:auto;max-width:100%;height:100%;margin:0 auto;border-radius:var(--aia-option-picture-radius, 6px);object-fit:contain}.aia-suggestion-image img[hidden]{display:none}.aia-suggestion-count{flex:0 0 auto;margin-left:auto;padding-left:12px;font-size:var(--aia-option-count-font-size, 12px);font-weight:400;line-height:21px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--aia-option-count-color, inherit);opacity:var(--aia-option-count-opacity, .6)}.aia-suggestion-count:after{content:\" \" var(--aia-option-count-unit, \"items\")}.aia-suggestion-item[data-aia-item-count=\"1\"] .aia-suggestion-count:after{content:\" \" var(--aia-option-count-unit-one, var(--aia-option-count-unit, \"item\"))}.aia-suggestion-item[data-aia-loading] .aia-suggestion-image{background:var(--aia-option-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, .083)))}.aia-suggestion-item[data-aia-loading] .aia-suggestion-image img{visibility:hidden}.aia-suggestion-item[data-aia-loading] .aia-suggestion-count{display:none}[data-aia-group]:has(.aia-suggestion-parameter){--aia-option-row-height: 53px}[data-aia-group]:has(.aia-suggestion-image){--aia-option-row-height: calc(var(--aia-option-image-size, 40px) + 16px)}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)){display:flex;flex:1 1 auto;align-items:center;gap:var(--aia-option-image-gap, 12px);min-width:0;min-height:var(--aia-option-image-size, 40px);padding-left:0;text-indent:0}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)) .aia-suggestion-icon{flex:0 0 auto;justify-content:center;width:var(--aia-option-image-size, 40px);height:var(--aia-option-image-size, 40px);margin-right:0}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)) .aia-suggestion-icon svg{width:var(--aia-option-tile-icon-size, 1.5em);height:var(--aia-option-tile-icon-size, 1.5em)}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading] .aia-suggestion-content,[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading] .aia-suggestion-text{animation:none}[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading]{animation:aiaSkeletonOut .1s ease-in forwards}@keyframes aiaSkeletonBarIn{0%{background-color:transparent;color:inherit}}@keyframes aiaSkeletonOut{to{opacity:0}}\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: 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.data-aia-image]=\"imageSrc ? '' : null\"\n  [attr.data-aia-item-count]=\"countLabel !== null ? option.item_count : 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  (mouseleave)=\"onMouseLeave()\"\n>\n  <span class=\"aia-suggestion-content\">\n    <!-- The tile keeps a placeholder fill under the picture, so a slow or\n         failed load leaves a neutral square rather than a gap. The picture is\n         decorative: the text is the option's accessible name. -->\n    <span *ngIf=\"imageSrc as src\" class=\"aia-suggestion-image\" aria-hidden=\"true\">\n      <img\n        [src]=\"src\"\n        alt=\"\"\n        loading=\"lazy\"\n        decoding=\"async\"\n        referrerpolicy=\"no-referrer\"\n        draggable=\"false\"\n        [hidden]=\"imageFailed\"\n        (error)=\"onImageError()\"\n      />\n    </span>\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\"\n      ><ng-container *ngFor=\"let part of parts; trackBy: trackByIndex\"\n        ><strong *ngIf=\"part.bold; else plain\" class=\"aia-suggestion-match\">{{ part.text }}</strong\n        ><ng-template #plain>{{ part.text }}</ng-template></ng-container\n      ><ng-container *ngIf=\"option.parameterLabel\"\n        >{{ \" \" }}<span class=\"aia-suggestion-parameter\">{{ option.parameterLabel }}</span></ng-container\n      ></span\n    >\n    <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n    <!-- Part of the row's accessible name, read after the option's text. -->\n    <span *ngIf=\"countLabel !== null\" class=\"aia-suggestion-count\">{{ countLabel }}</span>\n  </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:hidden;overflow:clip;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}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}@keyframes aiaSuggestionRiseIn{0%{transform:translateY(16px)}}@media (prefers-reduced-motion: reduce){.aia-suggestion-item,.aia-suggestion-content{animation-duration:0s;animation-delay:0s}}.aia-suggestion-content{position:relative;z-index:2;animation:aiaSuggestionRiseIn .28s cubic-bezier(.25,.46,.45,.94) both,aiaSuggestionFadeIn .15s ease-out both;animation-delay:var(--aia-option-enter-delay, 0ms)}.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))}[data-aia-fit] .aia-suggestion-item-scroll-hint .aia-suggestion-content{mask-image:none}.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;animation:aiaSkeletonBarIn .1s ease-out}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}.aia-suggestion-parameter{display:block;font-size:var(--aia-option-parameter-font-size, 12px);font-weight:400;line-height:16px;text-indent:0;color:var(--aia-option-parameter-color, inherit);opacity:var(--aia-option-parameter-opacity, .6)}.aia-suggestion-match{color:var(--aia-smart-suggestion-accent, #b84549);font-weight:600}.aia-suggestion-item[data-aia-loading] .aia-suggestion-parameter{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:not(:has(.aia-suggestion-count)):has(.aia-suggestion-icon){padding-left:calc(1em + 8px);text-indent:calc(-1em - 8px)}.aia-suggestion-content:has(.aia-suggestion-image),.aia-suggestion-content:has(.aia-suggestion-count){display:flex;flex:1 1 auto;align-items:flex-start;min-width:0}.aia-suggestion-content:has(.aia-suggestion-image) .aia-suggestion-text,.aia-suggestion-content:has(.aia-suggestion-count) .aia-suggestion-text{flex:1 1 auto;min-width:0}.aia-suggestion-item[data-aia-loading] .aia-suggestion-content .aia-suggestion-text{flex:0 1 auto}.aia-suggestion-content:has(.aia-suggestion-image){align-items:center;gap:var(--aia-option-image-gap, 12px)}.aia-suggestion-image{flex:0 0 auto;display:block;width:var(--aia-option-image-size, 40px);height:var(--aia-option-image-size, 40px);border-radius:var(--aia-option-image-radius, 12px);overflow:hidden;background:var(--aia-option-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, .083)))}.aia-suggestion-image img{display:block;width:100%;height:100%;object-fit:contain}.aia-suggestion-image img[hidden]{display:none}.aia-suggestion-count{flex:0 0 auto;margin-left:auto;padding-left:12px;font-size:var(--aia-option-count-font-size, 12px);font-weight:400;line-height:21px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--aia-option-count-color, inherit);opacity:var(--aia-option-count-opacity, .6)}.aia-suggestion-count:after{content:\" \" var(--aia-option-count-unit, \"items\")}.aia-suggestion-item[data-aia-item-count=\"1\"] .aia-suggestion-count:after{content:\" \" var(--aia-option-count-unit-one, var(--aia-option-count-unit, \"item\"))}.aia-suggestion-item[data-aia-loading] .aia-suggestion-image img{visibility:hidden}.aia-suggestion-item[data-aia-loading] .aia-suggestion-count{display:none}[data-aia-group]:has(.aia-suggestion-parameter){--aia-option-row-height: 53px}[data-aia-group]:has(.aia-suggestion-image){--aia-option-row-height: calc(var(--aia-option-image-size, 40px) + 16px)}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)){display:flex;flex:1 1 auto;align-items:center;gap:var(--aia-option-image-gap, 12px);min-width:0;min-height:var(--aia-option-image-size, 40px);padding-left:0;text-indent:0}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)) .aia-suggestion-icon{flex:0 0 auto;justify-content:center;width:var(--aia-option-image-size, 40px);height:var(--aia-option-image-size, 40px);margin-right:0}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)) .aia-suggestion-icon svg{width:var(--aia-option-tile-icon-size, 1.5em);height:var(--aia-option-tile-icon-size, 1.5em)}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading] .aia-suggestion-content,[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading] .aia-suggestion-text{animation:none}[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading]{animation:aiaSkeletonOut .1s ease-in forwards}@keyframes aiaSkeletonBarIn{0%{background-color:transparent;color:inherit}}@keyframes aiaSkeletonOut{to{opacity:0}}\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.data-aia-image]=\"imageSrc ? '' : null\"\n  [attr.data-aia-item-count]=\"countLabel !== null ? option.item_count : 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  (mouseleave)=\"onMouseLeave()\"\n>\n  <span class=\"aia-suggestion-content\">\n    <!-- The tile keeps a placeholder fill until the picture loads, so a slow\n         or failed load leaves a neutral square rather than a gap. The picture\n         is decorative: the text is the option's accessible name. -->\n    <span\n      *ngIf=\"imageSrc as src\"\n      class=\"aia-suggestion-image\"\n      aria-hidden=\"true\"\n      [attr.data-aia-image-loaded]=\"imageLoaded ? '' : null\"\n    >\n      <img\n        [src]=\"src\"\n        alt=\"\"\n        loading=\"lazy\"\n        decoding=\"async\"\n        referrerpolicy=\"no-referrer\"\n        draggable=\"false\"\n        [hidden]=\"imageFailed\"\n        (load)=\"onImageLoad(src)\"\n        (error)=\"onImageError()\"\n      />\n    </span>\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\"\n      ><ng-container *ngFor=\"let part of parts; trackBy: trackByIndex\"\n        ><strong *ngIf=\"part.bold; else plain\" class=\"aia-suggestion-match\">{{ part.text }}</strong\n        ><ng-template #plain>{{ part.text }}</ng-template></ng-container\n      ><ng-container *ngIf=\"option.parameterLabel\"\n        >{{ \" \" }}<span class=\"aia-suggestion-parameter\">{{ option.parameterLabel }}</span></ng-container\n      ></span\n    >\n    <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n    <!-- Part of the row's accessible name, read after the option's text. -->\n    <span *ngIf=\"countLabel !== null\" class=\"aia-suggestion-count\">{{ countLabel }}</span>\n  </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:hidden;overflow:clip;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}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}@keyframes aiaSuggestionRiseIn{0%{transform:translateY(16px)}}@media (prefers-reduced-motion: reduce){.aia-suggestion-item,.aia-suggestion-content{animation-duration:0s;animation-delay:0s}}.aia-suggestion-content{position:relative;z-index:2;animation:aiaSuggestionRiseIn .28s cubic-bezier(.25,.46,.45,.94) both,aiaSuggestionFadeIn .15s ease-out both;animation-delay:var(--aia-option-enter-delay, 0ms)}.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))}[data-aia-fit] .aia-suggestion-item-scroll-hint .aia-suggestion-content{mask-image:none}.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;animation:aiaSkeletonBarIn .1s ease-out}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}.aia-suggestion-parameter{display:block;font-size:var(--aia-option-parameter-font-size, 12px);font-weight:400;line-height:16px;text-indent:0;color:var(--aia-option-parameter-color, inherit);opacity:var(--aia-option-parameter-opacity, .6)}.aia-suggestion-match{color:var(--aia-smart-suggestion-accent, #b84549);font-weight:600}.aia-suggestion-item[data-aia-loading] .aia-suggestion-parameter{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:not(:has(.aia-suggestion-count)):has(.aia-suggestion-icon){padding-left:calc(1em + 8px);text-indent:calc(-1em - 8px)}.aia-suggestion-content:has(.aia-suggestion-image),.aia-suggestion-content:has(.aia-suggestion-count){display:flex;flex:1 1 auto;align-items:flex-start;min-width:0}.aia-suggestion-content:has(.aia-suggestion-image) .aia-suggestion-text,.aia-suggestion-content:has(.aia-suggestion-count) .aia-suggestion-text{flex:1 1 auto;min-width:0}.aia-suggestion-item[data-aia-loading] .aia-suggestion-content .aia-suggestion-text{flex:0 1 auto}.aia-suggestion-content:has(.aia-suggestion-image){align-items:center;gap:var(--aia-option-image-gap, 12px)}.aia-suggestion-image{flex:0 0 auto;display:block;width:var(--aia-option-image-size, 40px);height:var(--aia-option-image-size, 40px);border-radius:var(--aia-option-image-radius, 12px);overflow:hidden;background:var(--aia-option-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, .083)))}.aia-suggestion-image[data-aia-image-loaded]{background:transparent}.aia-suggestion-image img{display:block;width:auto;max-width:100%;height:100%;margin:0 auto;border-radius:var(--aia-option-picture-radius, 6px);object-fit:contain}.aia-suggestion-image img[hidden]{display:none}.aia-suggestion-count{flex:0 0 auto;margin-left:auto;padding-left:12px;font-size:var(--aia-option-count-font-size, 12px);font-weight:400;line-height:21px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--aia-option-count-color, inherit);opacity:var(--aia-option-count-opacity, .6)}.aia-suggestion-count:after{content:\" \" var(--aia-option-count-unit, \"items\")}.aia-suggestion-item[data-aia-item-count=\"1\"] .aia-suggestion-count:after{content:\" \" var(--aia-option-count-unit-one, var(--aia-option-count-unit, \"item\"))}.aia-suggestion-item[data-aia-loading] .aia-suggestion-image{background:var(--aia-option-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, .083)))}.aia-suggestion-item[data-aia-loading] .aia-suggestion-image img{visibility:hidden}.aia-suggestion-item[data-aia-loading] .aia-suggestion-count{display:none}[data-aia-group]:has(.aia-suggestion-parameter){--aia-option-row-height: 53px}[data-aia-group]:has(.aia-suggestion-image){--aia-option-row-height: calc(var(--aia-option-image-size, 40px) + 16px)}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)){display:flex;flex:1 1 auto;align-items:center;gap:var(--aia-option-image-gap, 12px);min-width:0;min-height:var(--aia-option-image-size, 40px);padding-left:0;text-indent:0}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)) .aia-suggestion-icon{flex:0 0 auto;justify-content:center;width:var(--aia-option-image-size, 40px);height:var(--aia-option-image-size, 40px);margin-right:0}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)) .aia-suggestion-icon svg{width:var(--aia-option-tile-icon-size, 1.5em);height:var(--aia-option-tile-icon-size, 1.5em)}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading] .aia-suggestion-content,[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading] .aia-suggestion-text{animation:none}[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading]{animation:aiaSkeletonOut .1s ease-in forwards}@keyframes aiaSkeletonBarIn{0%{background-color:transparent;color:inherit}}@keyframes aiaSkeletonOut{to{opacity:0}}\n"] }]
         }], propDecorators: { option: [{
                 type: Input
             }], isHighlighted: [{
@@ -2519,7 +2539,7 @@ AIAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             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    [showOptionImages]=\"showOptionImages\"\n    [showOptionCounts]=\"showOptionCounts\"\n    [productsLayout]=\"productsLayout\"\n    [productImageFallback]=\"productImageFallback\"\n    [language]=\"language\"\n  ></ai-autocomplete-dropdown>\n\n  <div\n    class=\"magicx-aia-input-wrapper\"\n    data-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        [showChipImages]=\"showChipImages\"\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        [label]=\"submitLabel\"\n        (submit)=\"onSubmitButtonClick($event)\"\n      ></aia-submit-button>\n\n      <span\n        *ngSwitchCase=\"'custom'\"\n        data-aia-submit=\"\"\n        data-aia-submit-slot=\"\"\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){box-sizing:border-box}:where([data-aia-input-wrapper],[data-aia-input-wrapper] *,[data-aia-dropdown],[data-aia-dropdown] *):not(:where(svg,svg *,[data-aia-submit-slot],[data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html),:where([data-aia-input-wrapper],[data-aia-input-wrapper] *,[data-aia-dropdown],[data-aia-dropdown] *):not(:where(svg,svg *,[data-aia-submit-slot],[data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html):before,:where([data-aia-input-wrapper],[data-aia-input-wrapper] *,[data-aia-dropdown],[data-aia-dropdown] *):not(:where(svg,svg *,[data-aia-submit-slot],[data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html):after{all:revert;box-sizing:border-box}:where([data-aia-input-wrapper],[data-aia-dropdown]):not(html):not(html):not(html):not(html):not(html){line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-align:start;text-shadow:none;font-style:normal;font-variant:normal;white-space:normal;visibility:visible;cursor:auto}:where([data-aia-input-wrapper] svg,[data-aia-dropdown] svg):not(:where([data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html){display:revert;vertical-align:revert;position:revert;inset:revert;float:revert;margin:revert;padding:revert;border:revert;border-radius:revert;outline:revert;background:revert;box-shadow:revert;min-width:revert;max-width:revert;min-height:revert;max-height:revert;flex:revert;transition:revert;animation:revert;rotate:revert;scale:revert;translate:revert}:where([data-aia-input-wrapper] svg *,[data-aia-dropdown] svg *):not(:where([data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html){transition:revert;animation:revert}: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: none;--aia-pill-bg: #bdbdbd;--aia-pill-color: #333539;--aia-pill-font-size: 16px;--aia-smart-suggestion-accent: #b84549;--aia-smart-suggestion-glint: #f3c4c5;--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, .083);--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: none;--aia-pill-bg: #bdbdbd;--aia-pill-color: #b0b0b0;--aia-pill-font-size: 16px;--aia-smart-suggestion-accent: #e0787b;--aia-smart-suggestion-glint: #ffe1e1;--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, 12px) + 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;--aia-footer-row-min-height: 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) var(--aia-footer-fade-lead, 20px))}[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, 12px) 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) var(--aia-footer-fade-lead, 20px))}: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 12px max(10px,var(--aia-content-inset-left, 16px));border:1px solid var(--aia-border, #b0b0b0);border-radius:10px;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}.magicx-aia-input[contenteditable=true]{-webkit-user-modify:read-write}.magicx-aia-input[contenteditable=plaintext-only]{-webkit-user-modify:read-write-plaintext-only}: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) span[class~=magicx-aia-segment-image]{display:inline;padding-left:var(--aia-chip-image-size, 1.25em);margin-right:5px;border-radius:var(--aia-chip-image-radius, 4px);background:var(--aia-chip-image, none) center / contain no-repeat,var(--aia-chip-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, .083)));pointer-events:none;-webkit-user-select:none;user-select:none}: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-empty=true][data-placeholder][data-aia-composing]:before{content:none}.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)}}[data-aia-dropdown][data-aia-fit]{max-height:var(--aia-dropdown-fit-height, none);--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;--aia-footer-row-min-height: 0px}[data-aia-dropdown][data-aia-fit]>.aia-stack{flex:1 1 auto;min-height:0;margin-inline:-6px;padding-inline:6px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}[data-aia-dropdown][data-aia-fit]>.aia-stack::-webkit-scrollbar{display:none}[data-aia-dropdown][data-aia-fit]>.aia-stack>*{flex-shrink:0}[data-aia-dropdown][data-aia-fit] .aia-grid[data-scroll]{max-height:none;overflow:visible}\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", "showOptionImages", "showOptionCounts", "productsLayout", "productImageFallback", "className", "mode", "language"] }, { kind: "directive", type: AIAutocompleteEditorHostDirective, selector: "[aiaEditorHost]", inputs: ["aiaEditorHost", "autoFocus", "showChipIcons", "showChipImages"] }, { 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", "label"], 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    [showOptionImages]=\"showOptionImages\"\n    [showOptionCounts]=\"showOptionCounts\"\n    [productsLayout]=\"productsLayout\"\n    [productImageFallback]=\"productImageFallback\"\n    [language]=\"language\"\n  ></ai-autocomplete-dropdown>\n\n  <div\n    class=\"magicx-aia-input-wrapper\"\n    data-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        [showChipImages]=\"showChipImages\"\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        [label]=\"submitLabel\"\n        (submit)=\"onSubmitButtonClick($event)\"\n      ></aia-submit-button>\n\n      <span\n        *ngSwitchCase=\"'custom'\"\n        data-aia-submit=\"\"\n        data-aia-submit-slot=\"\"\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){box-sizing:border-box}:where([data-aia-input-wrapper],[data-aia-input-wrapper] *,[data-aia-dropdown],[data-aia-dropdown] *):not(:where(svg,svg *,[data-aia-submit-slot],[data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html),:where([data-aia-input-wrapper],[data-aia-input-wrapper] *,[data-aia-dropdown],[data-aia-dropdown] *):not(:where(svg,svg *,[data-aia-submit-slot],[data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html):before,:where([data-aia-input-wrapper],[data-aia-input-wrapper] *,[data-aia-dropdown],[data-aia-dropdown] *):not(:where(svg,svg *,[data-aia-submit-slot],[data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html):after{all:revert;box-sizing:border-box}:where([data-aia-input-wrapper],[data-aia-dropdown]):not(html):not(html):not(html):not(html):not(html){line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-align:start;text-shadow:none;font-style:normal;font-variant:normal;white-space:normal;visibility:visible;cursor:auto}:where([data-aia-input-wrapper] svg,[data-aia-dropdown] svg):not(:where([data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html){display:revert;vertical-align:revert;position:revert;inset:revert;float:revert;margin:revert;padding:revert;border:revert;border-radius:revert;outline:revert;background:revert;box-shadow:revert;min-width:revert;max-width:revert;min-height:revert;max-height:revert;flex:revert;transition:revert;animation:revert;rotate:revert;scale:revert;translate:revert}:where([data-aia-input-wrapper] svg *,[data-aia-dropdown] svg *):not(:where([data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html){transition:revert;animation:revert}: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: none;--aia-pill-bg: #bdbdbd;--aia-pill-color: #333539;--aia-pill-font-size: 16px;--aia-smart-suggestion-accent: #b84549;--aia-smart-suggestion-glint: #f3c4c5;--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, .083);--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: none;--aia-pill-bg: #bdbdbd;--aia-pill-color: #b0b0b0;--aia-pill-font-size: 16px;--aia-smart-suggestion-accent: #e0787b;--aia-smart-suggestion-glint: #ffe1e1;--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, 12px) + 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;--aia-footer-row-min-height: 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) var(--aia-footer-fade-lead, 20px))}[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, 12px) 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) var(--aia-footer-fade-lead, 20px))}: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 12px max(10px,var(--aia-content-inset-left, 16px));border:1px solid var(--aia-border, #b0b0b0);border-radius:var(--aia-input-radius, 10px);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:var(--aia-written-text-font-weight, 300);vertical-align:middle}.magicx-aia-input[contenteditable=true]{-webkit-user-modify:read-write}.magicx-aia-input[contenteditable=plaintext-only]{-webkit-user-modify:read-write-plaintext-only}: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) span[class~=magicx-aia-segment-image]{display:inline;padding-left:min(var(--aia-chip-image-size, 1.25em),var(--aia-chip-image-fit, var(--aia-chip-image-size, 1.25em)));margin-right:5px;border-radius:var(--aia-chip-image-radius, 4px);background:var(--aia-chip-image, none) center / contain no-repeat,var(--aia-chip-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, .083)));pointer-events:none;-webkit-user-select:none;user-select:none}:where(.magicx-aia-input) span[class~=magicx-aia-segment-image][data-aia-image-loaded]{background:var(--aia-chip-image, none) center / contain no-repeat}: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-empty=true][data-placeholder][data-aia-composing]:before{content:none}.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)}}[data-aia-dropdown][data-aia-fit]{max-height:var(--aia-dropdown-fit-height, none);--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;--aia-footer-row-min-height: 0px}[data-aia-dropdown][data-aia-fit]>.aia-stack{flex:1 1 auto;min-height:0;margin-inline:-6px;padding-inline:6px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}[data-aia-dropdown][data-aia-fit]>.aia-stack::-webkit-scrollbar{display:none}[data-aia-dropdown][data-aia-fit]>.aia-stack>*{flex-shrink:0}[data-aia-dropdown][data-aia-fit] .aia-grid[data-scroll]{max-height:none;overflow:visible}\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", "showOptionImages", "showOptionCounts", "productsLayout", "productImageFallback", "className", "mode", "language"] }, { kind: "directive", type: AIAutocompleteEditorHostDirective, selector: "[aiaEditorHost]", inputs: ["aiaEditorHost", "autoFocus", "showChipIcons", "showChipImages"] }, { 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", "label"], 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: [
@@ -2535,7 +2555,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    [showOptionImages]=\"showOptionImages\"\n    [showOptionCounts]=\"showOptionCounts\"\n    [productsLayout]=\"productsLayout\"\n    [productImageFallback]=\"productImageFallback\"\n    [language]=\"language\"\n  ></ai-autocomplete-dropdown>\n\n  <div\n    class=\"magicx-aia-input-wrapper\"\n    data-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        [showChipImages]=\"showChipImages\"\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        [label]=\"submitLabel\"\n        (submit)=\"onSubmitButtonClick($event)\"\n      ></aia-submit-button>\n\n      <span\n        *ngSwitchCase=\"'custom'\"\n        data-aia-submit=\"\"\n        data-aia-submit-slot=\"\"\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){box-sizing:border-box}:where([data-aia-input-wrapper],[data-aia-input-wrapper] *,[data-aia-dropdown],[data-aia-dropdown] *):not(:where(svg,svg *,[data-aia-submit-slot],[data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html),:where([data-aia-input-wrapper],[data-aia-input-wrapper] *,[data-aia-dropdown],[data-aia-dropdown] *):not(:where(svg,svg *,[data-aia-submit-slot],[data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html):before,:where([data-aia-input-wrapper],[data-aia-input-wrapper] *,[data-aia-dropdown],[data-aia-dropdown] *):not(:where(svg,svg *,[data-aia-submit-slot],[data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html):after{all:revert;box-sizing:border-box}:where([data-aia-input-wrapper],[data-aia-dropdown]):not(html):not(html):not(html):not(html):not(html){line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-align:start;text-shadow:none;font-style:normal;font-variant:normal;white-space:normal;visibility:visible;cursor:auto}:where([data-aia-input-wrapper] svg,[data-aia-dropdown] svg):not(:where([data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html){display:revert;vertical-align:revert;position:revert;inset:revert;float:revert;margin:revert;padding:revert;border:revert;border-radius:revert;outline:revert;background:revert;box-shadow:revert;min-width:revert;max-width:revert;min-height:revert;max-height:revert;flex:revert;transition:revert;animation:revert;rotate:revert;scale:revert;translate:revert}:where([data-aia-input-wrapper] svg *,[data-aia-dropdown] svg *):not(:where([data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html){transition:revert;animation:revert}: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: none;--aia-pill-bg: #bdbdbd;--aia-pill-color: #333539;--aia-pill-font-size: 16px;--aia-smart-suggestion-accent: #b84549;--aia-smart-suggestion-glint: #f3c4c5;--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, .083);--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: none;--aia-pill-bg: #bdbdbd;--aia-pill-color: #b0b0b0;--aia-pill-font-size: 16px;--aia-smart-suggestion-accent: #e0787b;--aia-smart-suggestion-glint: #ffe1e1;--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, 12px) + 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;--aia-footer-row-min-height: 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) var(--aia-footer-fade-lead, 20px))}[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, 12px) 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) var(--aia-footer-fade-lead, 20px))}: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 12px max(10px,var(--aia-content-inset-left, 16px));border:1px solid var(--aia-border, #b0b0b0);border-radius:10px;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}.magicx-aia-input[contenteditable=true]{-webkit-user-modify:read-write}.magicx-aia-input[contenteditable=plaintext-only]{-webkit-user-modify:read-write-plaintext-only}: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) span[class~=magicx-aia-segment-image]{display:inline;padding-left:var(--aia-chip-image-size, 1.25em);margin-right:5px;border-radius:var(--aia-chip-image-radius, 4px);background:var(--aia-chip-image, none) center / contain no-repeat,var(--aia-chip-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, .083)));pointer-events:none;-webkit-user-select:none;user-select:none}: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-empty=true][data-placeholder][data-aia-composing]:before{content:none}.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)}}[data-aia-dropdown][data-aia-fit]{max-height:var(--aia-dropdown-fit-height, none);--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;--aia-footer-row-min-height: 0px}[data-aia-dropdown][data-aia-fit]>.aia-stack{flex:1 1 auto;min-height:0;margin-inline:-6px;padding-inline:6px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}[data-aia-dropdown][data-aia-fit]>.aia-stack::-webkit-scrollbar{display:none}[data-aia-dropdown][data-aia-fit]>.aia-stack>*{flex-shrink:0}[data-aia-dropdown][data-aia-fit] .aia-grid[data-scroll]{max-height:none;overflow:visible}\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    [showOptionImages]=\"showOptionImages\"\n    [showOptionCounts]=\"showOptionCounts\"\n    [productsLayout]=\"productsLayout\"\n    [productImageFallback]=\"productImageFallback\"\n    [language]=\"language\"\n  ></ai-autocomplete-dropdown>\n\n  <div\n    class=\"magicx-aia-input-wrapper\"\n    data-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        [showChipImages]=\"showChipImages\"\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        [label]=\"submitLabel\"\n        (submit)=\"onSubmitButtonClick($event)\"\n      ></aia-submit-button>\n\n      <span\n        *ngSwitchCase=\"'custom'\"\n        data-aia-submit=\"\"\n        data-aia-submit-slot=\"\"\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){box-sizing:border-box}:where([data-aia-input-wrapper],[data-aia-input-wrapper] *,[data-aia-dropdown],[data-aia-dropdown] *):not(:where(svg,svg *,[data-aia-submit-slot],[data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html),:where([data-aia-input-wrapper],[data-aia-input-wrapper] *,[data-aia-dropdown],[data-aia-dropdown] *):not(:where(svg,svg *,[data-aia-submit-slot],[data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html):before,:where([data-aia-input-wrapper],[data-aia-input-wrapper] *,[data-aia-dropdown],[data-aia-dropdown] *):not(:where(svg,svg *,[data-aia-submit-slot],[data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html):after{all:revert;box-sizing:border-box}:where([data-aia-input-wrapper],[data-aia-dropdown]):not(html):not(html):not(html):not(html):not(html){line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-align:start;text-shadow:none;font-style:normal;font-variant:normal;white-space:normal;visibility:visible;cursor:auto}:where([data-aia-input-wrapper] svg,[data-aia-dropdown] svg):not(:where([data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html){display:revert;vertical-align:revert;position:revert;inset:revert;float:revert;margin:revert;padding:revert;border:revert;border-radius:revert;outline:revert;background:revert;box-shadow:revert;min-width:revert;max-width:revert;min-height:revert;max-height:revert;flex:revert;transition:revert;animation:revert;rotate:revert;scale:revert;translate:revert}:where([data-aia-input-wrapper] svg *,[data-aia-dropdown] svg *):not(:where([data-aia-submit-slot] *)):not(html):not(html):not(html):not(html):not(html){transition:revert;animation:revert}: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: none;--aia-pill-bg: #bdbdbd;--aia-pill-color: #333539;--aia-pill-font-size: 16px;--aia-smart-suggestion-accent: #b84549;--aia-smart-suggestion-glint: #f3c4c5;--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, .083);--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: none;--aia-pill-bg: #bdbdbd;--aia-pill-color: #b0b0b0;--aia-pill-font-size: 16px;--aia-smart-suggestion-accent: #e0787b;--aia-smart-suggestion-glint: #ffe1e1;--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, 12px) + 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;--aia-footer-row-min-height: 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) var(--aia-footer-fade-lead, 20px))}[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, 12px) 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) var(--aia-footer-fade-lead, 20px))}: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 12px max(10px,var(--aia-content-inset-left, 16px));border:1px solid var(--aia-border, #b0b0b0);border-radius:var(--aia-input-radius, 10px);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:var(--aia-written-text-font-weight, 300);vertical-align:middle}.magicx-aia-input[contenteditable=true]{-webkit-user-modify:read-write}.magicx-aia-input[contenteditable=plaintext-only]{-webkit-user-modify:read-write-plaintext-only}: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) span[class~=magicx-aia-segment-image]{display:inline;padding-left:min(var(--aia-chip-image-size, 1.25em),var(--aia-chip-image-fit, var(--aia-chip-image-size, 1.25em)));margin-right:5px;border-radius:var(--aia-chip-image-radius, 4px);background:var(--aia-chip-image, none) center / contain no-repeat,var(--aia-chip-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, .083)));pointer-events:none;-webkit-user-select:none;user-select:none}:where(.magicx-aia-input) span[class~=magicx-aia-segment-image][data-aia-image-loaded]{background:var(--aia-chip-image, none) center / contain no-repeat}: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-empty=true][data-placeholder][data-aia-composing]:before{content:none}.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)}}[data-aia-dropdown][data-aia-fit]{max-height:var(--aia-dropdown-fit-height, none);--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;--aia-footer-row-min-height: 0px}[data-aia-dropdown][data-aia-fit]>.aia-stack{flex:1 1 auto;min-height:0;margin-inline:-6px;padding-inline:6px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}[data-aia-dropdown][data-aia-fit]>.aia-stack::-webkit-scrollbar{display:none}[data-aia-dropdown][data-aia-fit]>.aia-stack>*{flex-shrink:0}[data-aia-dropdown][data-aia-fit] .aia-grid[data-scroll]{max-height:none;overflow:visible}\n"] }]
         }], propDecorators: { apiConfig: [{
                 type: Input
             }], additionalContext: [{