@magicx-eng/ai-autocomplete-angular 0.44.0 → 0.46.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/README.md +69 -1
  2. package/esm2020/lib/ai-autocomplete/ai-autocomplete.component.mjs +3 -3
  3. package/esm2020/lib/ai-autocomplete-dropdown/ai-autocomplete-dropdown.component.mjs +30 -5
  4. package/esm2020/lib/controller/ai-autocomplete.controller.mjs +30 -1
  5. package/esm2020/lib/internal/product-strip/product-strip.component.mjs +3 -3
  6. package/esm2020/lib/internal/suggestion-grid/suggestion-grid.component.mjs +5 -3
  7. package/esm2020/lib/internal/suggestion-item/suggestion-item.component.mjs +6 -4
  8. package/esm2020/lib/internal/time-wheel/time-wheel.component.mjs +147 -0
  9. package/esm2020/lib/shared/types.mjs +1 -1
  10. package/esm2020/public-api.mjs +7 -2
  11. package/fesm2015/magicx-eng-ai-autocomplete-angular.mjs +221 -17
  12. package/fesm2015/magicx-eng-ai-autocomplete-angular.mjs.map +1 -1
  13. package/fesm2020/magicx-eng-ai-autocomplete-angular.mjs +220 -16
  14. package/fesm2020/magicx-eng-ai-autocomplete-angular.mjs.map +1 -1
  15. package/lib/ai-autocomplete-dropdown/ai-autocomplete-dropdown.component.d.ts +10 -1
  16. package/lib/ai-autocomplete-dropdown/ai-autocomplete-dropdown.component.d.ts.map +1 -1
  17. package/lib/controller/ai-autocomplete.controller.d.ts +9 -0
  18. package/lib/controller/ai-autocomplete.controller.d.ts.map +1 -1
  19. package/lib/internal/suggestion-grid/suggestion-grid.component.d.ts +2 -1
  20. package/lib/internal/suggestion-grid/suggestion-grid.component.d.ts.map +1 -1
  21. package/lib/internal/suggestion-item/suggestion-item.component.d.ts +2 -1
  22. package/lib/internal/suggestion-item/suggestion-item.component.d.ts.map +1 -1
  23. package/lib/internal/time-wheel/time-wheel.component.d.ts +53 -0
  24. package/lib/internal/time-wheel/time-wheel.component.d.ts.map +1 -0
  25. package/lib/shared/types.d.ts +9 -3
  26. package/lib/shared/types.d.ts.map +1 -1
  27. package/package.json +2 -2
  28. package/public-api.d.ts +5 -2
  29. package/public-api.d.ts.map +1 -1
package/fesm2020/magicx-eng-ai-autocomplete-angular.mjs CHANGED
@@ -1,8 +1,8 @@
1
- import { WEEKDAY_LABELS as WEEKDAY_LABELS$1, cellIso as cellIso$1, monthLabel as monthLabel$1, cellDay as cellDay$1, isoDate as isoDate$1, dateCellMarks as dateCellMarks$1, visibleDateRange as visibleDateRange$1, SMART_SUGGESTION_SPARKLE_SVG, isSmartSuggestion, isTraditionalAutocompleteSuggestion, uiStringsFor, productInitial, productImageSources as productImageSources$1, productPhotoFill, attachProductRowWheel, optionsGridTemplateColumns, highlightParts, optionLabel as optionLabel$1, optionImageSources as optionImageSources$1, formatOptionCount as formatOptionCount$1, sanitizeOptionIconSvg as sanitizeOptionIconSvg$1, planOptionsGrid, optionsShowLeadingVisuals as optionsShowLeadingVisuals$1, sameOptionRows, isOptionsGridMobileViewport, needsOptionsGridMeasurement, measureOptionsGrid, optionEnterDelayMs, buildAttributionUrl, containScroll, attachScrollArrow, attachViewportFit, hasSkippablePill, isCalendarFormat, labelTraditionalAutocomplete, getFooterHint, AIAutocomplete, withoutTraditionalAutocomplete, dateSelectionFor, identifiedParamLabel, renderEditableContent, chipIdFromTap, keepCaretOnChip, getCursorOffset, extractPlainText, plainTextLength, setCursorOffset, ModeController, buildSubmitResult as buildSubmitResult$1, withSkippedParams as withSkippedParams$1, formatDate as formatDate$1, parseDate as parseDate$1, parseLooseDate as parseLooseDate$1, DATE_RANGE_META_END as DATE_RANGE_META_END$1, DATE_RANGE_META_START as DATE_RANGE_META_START$1, formatDateRange as formatDateRange$1, parseLooseDateRange as parseLooseDateRange$1, selectedRangeFor as selectedRangeFor$1, DEFAULT_OPTION_COUNT_UNIT as DEFAULT_OPTION_COUNT_UNIT$1, optionCountLabel as optionCountLabel$1, optionHasImage as optionHasImage$1, optionImageSrc as optionImageSrc$1, PRODUCT_PATH_PREFIX as PRODUCT_PATH_PREFIX$1, productFromMatchedItem as productFromMatchedItem$1, productsFromCustomFields as productsFromCustomFields$1 } from '@magicx-eng/ai-autocomplete-vanilla';
1
+ import { WEEKDAY_LABELS as WEEKDAY_LABELS$1, cellIso as cellIso$1, monthLabel as monthLabel$1, cellDay as cellDay$1, isoDate as isoDate$1, dateCellMarks as dateCellMarks$1, visibleDateRange as visibleDateRange$1, SMART_SUGGESTION_SPARKLE_SVG, isSmartSuggestion, isTraditionalAutocompleteSuggestion, uiStringsFor, productInitial, productImageSources as productImageSources$1, productPhotoFill, attachProductRowWheel, optionsGridTemplateColumns, highlightParts, optionLabel as optionLabel$1, optionImageSources as optionImageSources$1, formatOptionCount as formatOptionCount$1, sanitizeOptionIconSvg as sanitizeOptionIconSvg$1, planOptionsGrid, optionsShowLeadingVisuals as optionsShowLeadingVisuals$1, sameOptionRows, isOptionsGridMobileViewport, needsOptionsGridMeasurement, measureOptionsGrid, optionEnterDelayMs, TIME_WHEEL_COLUMNS, formatTime as formatTime$1, timeWheelRows, timeWheelIndex, TIME_WHEEL_ROW_HEIGHT, withTimeWheelIndex, timeWheelIndexFromScroll, buildAttributionUrl, containScroll, attachScrollArrow, attachViewportFit, hasSkippablePill, isCalendarFormat, labelTraditionalAutocomplete, getFooterHint, AIAutocomplete, withoutTraditionalAutocomplete, dateSelectionFor, identifiedParamLabel, renderEditableContent, chipIdFromTap, keepCaretOnChip, getCursorOffset, extractPlainText, plainTextLength, setCursorOffset, ModeController, buildSubmitResult as buildSubmitResult$1, withSkippedParams as withSkippedParams$1, formatDate as formatDate$1, parseDate as parseDate$1, parseLooseDate as parseLooseDate$1, DATE_RANGE_META_END as DATE_RANGE_META_END$1, DATE_RANGE_META_START as DATE_RANGE_META_START$1, formatDateRange as formatDateRange$1, parseLooseDateRange as parseLooseDateRange$1, selectedRangeFor as selectedRangeFor$1, parseTime as parseTime$1, TIME_META_KEY as TIME_META_KEY$1, DEFAULT_OPTION_COUNT_UNIT as DEFAULT_OPTION_COUNT_UNIT$1, optionCountLabel as optionCountLabel$1, optionHasImage as optionHasImage$1, optionImageSrc as optionImageSrc$1, PRODUCT_PATH_PREFIX as PRODUCT_PATH_PREFIX$1, productFromMatchedItem as productFromMatchedItem$1, productsFromCustomFields as productsFromCustomFields$1 } from '@magicx-eng/ai-autocomplete-vanilla';
2
2
  import * as i1 from '@angular/common';
3
3
  import { CommonModule, isPlatformBrowser } from '@angular/common';
4
4
  import * as i0 from '@angular/core';
5
- import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, inject, ChangeDetectorRef, ViewChild, HostListener, ElementRef, NgZone, Renderer2, Directive, PLATFORM_ID, forwardRef, NgModule } from '@angular/core';
5
+ import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, inject, ChangeDetectorRef, ViewChild, HostListener, ViewChildren, ElementRef, NgZone, Renderer2, Directive, PLATFORM_ID, forwardRef, NgModule } from '@angular/core';
6
6
  import { NG_VALUE_ACCESSOR } from '@angular/forms';
7
7
  import { BehaviorSubject, combineLatest, map as map$1, distinctUntilChanged, shareReplay, Subject, takeUntil } from 'rxjs';
8
8
  import { map } from 'rxjs/operators';
@@ -517,10 +517,10 @@ class ProductStripComponent {
517
517
  }
518
518
  }
519
519
  ProductStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProductStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
520
- 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", addToCart: "addToCart" }, 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 [attr.data-aia-product-has-cart]=\"hasCart(product) ? '' : null\"\n [style]=\"photoFillStyle(product)\"\n role=\"option\"\n [attr.aria-selected]=\"false\"\n [attr.href]=\"product.url ?? null\"\n [attr.tabindex]=\"focusable ? 0 : -1\"\n (click)=\"onClick($event, product)\"\n (keydown)=\"onKeyDown($event, product)\"\n (focus)=\"onCardFocus()\"\n (blur)=\"onCardBlur($event)\"\n >\n <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, $event)\"\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\n <!-- The add-to-cart button: a child of the card rather than of the\n aria-hidden media tile; the stylesheet lifts it over the tile's\n bottom right corner. A role=\"button\" span, not a <button>:\n interactive content inside an <a> is invalid HTML. Its press never\n reaches the card, so it never selects. Sold-out cards have none. -->\n <span\n *ngIf=\"hasCart(product)\"\n class=\"aia-product-cart\"\n data-aia-product-cart=\"\"\n role=\"button\"\n [attr.aria-label]=\"strings.addToCart + ': ' + product.title\"\n [attr.tabindex]=\"focusable ? 0 : -1\"\n [attr.data-aia-cart-state]=\"cartState(product)\"\n [attr.aria-busy]=\"cartState(product) === 'adding' ? 'true' : null\"\n (click)=\"onCartPress($event, product)\"\n (keydown)=\"onCartKeyDown($event, product)\"\n (focus)=\"onCardFocus()\"\n (blur)=\"onCardBlur($event)\"\n >\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path class=\"aia-product-cart-glyph\" d=\"M2 3h2.2l2.4 11.2a2 2 0 0 0 2 1.6h8.9a2 2 0 0 0 1.9-1.5L21 8H6\" />\n <path class=\"aia-product-cart-glyph\" d=\"M13.5 6.5v-4M11.5 4.5h4\" />\n <path class=\"aia-product-cart-check\" d=\"M5 12.5l4.5 4.5L19 7.5\" />\n <path class=\"aia-product-cart-spinner\" d=\"M12 4a8 8 0 1 0 8 8\" />\n <circle class=\"aia-product-cart-glyph\" cx=\"9\" cy=\"20\" r=\"1.3\" />\n <circle class=\"aia-product-cart-glyph\" cx=\"17.5\" cy=\"20\" r=\"1.3\" />\n </svg>\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-cart{position:absolute;top:calc(var(--aia-product-card-width, 116px) - 12px - var(--aia-product-cart-size, 28px) - (var(--aia-product-card-width, 116px) - 12px) * (1 - var(--aia-product-photo-fill-y, 1)) / 2);right:calc(12px + (var(--aia-product-card-width, 116px) - 12px) * (1 - var(--aia-product-photo-fill-x, 1)) / 2);display:flex;align-items:center;justify-content:center;width:var(--aia-product-cart-size, 28px);height:var(--aia-product-cart-size, 28px);border-radius:999px;background:var(--aia-product-cart-bg, rgba(255, 255, 255, .94));color:var(--aia-product-cart-color, #1f2328);box-shadow:0 0 0 1px #00000014,0 1px 3px #00000038;cursor:pointer;transition:transform .15s ease,opacity .15s ease}.aia-product-cart:hover{transform:scale(1.08)}.aia-product-cart:focus-visible{outline:2px solid var(--aia-product-focus-ring, var(--aia-option-color-selected, currentColor));outline-offset:2px}.aia-product-cart svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.aia-product-cart svg path{fill:none;stroke:currentColor}.aia-product-cart svg circle{fill:none;stroke:currentColor}.aia-product-cart-check{display:none}.aia-product-cart[data-aia-cart-state=adding]{cursor:progress}.aia-product-cart[data-aia-cart-state=added] .aia-product-cart-glyph{display:none}.aia-product-cart[data-aia-cart-state=added] .aia-product-cart-check{display:inline}.aia-product-cart-spinner,.aia-product-cart[data-aia-cart-state=adding] .aia-product-cart-glyph{display:none}.aia-product-cart[data-aia-cart-state=adding] .aia-product-cart-spinner{display:inline}.aia-product-cart[data-aia-cart-state=adding] svg{animation:magicx-aia-product-cart-spin .8s linear infinite}@keyframes magicx-aia-product-cart-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.aia-product-cart[data-aia-cart-state=adding] svg{animation-duration:2s}}.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}.aia-products[data-aia-products-layout=list] .aia-product-cart{top:50%;right:8px;transform:translateY(-50%)}.aia-products[data-aia-products-layout=list] .aia-product-cart:hover{transform:translateY(-50%) scale(1.08)}.aia-products[data-aia-products-layout=list] .aia-product[data-aia-product-has-cart]{padding-right:calc(var(--aia-product-cart-size, 28px) + 16px)}\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 });
520
+ 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", addToCart: "addToCart" }, 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 [attr.data-aia-product-has-cart]=\"hasCart(product) ? '' : null\"\n [style]=\"photoFillStyle(product)\"\n role=\"option\"\n [attr.aria-selected]=\"false\"\n [attr.href]=\"product.url ?? null\"\n [attr.tabindex]=\"focusable ? 0 : -1\"\n (click)=\"onClick($event, product)\"\n (keydown)=\"onKeyDown($event, product)\"\n (focus)=\"onCardFocus()\"\n (blur)=\"onCardBlur($event)\"\n >\n <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, $event)\"\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 }}<s *ngIf=\"product.compareAtPrice\" class=\"aia-product-compare-at\">{{ product.compareAtPrice }}</s></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\n <!-- The add-to-cart button: a child of the card rather than of the\n aria-hidden media tile; the stylesheet lifts it over the tile's\n bottom right corner. A role=\"button\" span, not a <button>:\n interactive content inside an <a> is invalid HTML. Its press never\n reaches the card, so it never selects. Sold-out cards have none. -->\n <span\n *ngIf=\"hasCart(product)\"\n class=\"aia-product-cart\"\n data-aia-product-cart=\"\"\n role=\"button\"\n [attr.aria-label]=\"strings.addToCart + ': ' + product.title\"\n [attr.tabindex]=\"focusable ? 0 : -1\"\n [attr.data-aia-cart-state]=\"cartState(product)\"\n [attr.aria-busy]=\"cartState(product) === 'adding' ? 'true' : null\"\n (click)=\"onCartPress($event, product)\"\n (keydown)=\"onCartKeyDown($event, product)\"\n (focus)=\"onCardFocus()\"\n (blur)=\"onCardBlur($event)\"\n >\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path class=\"aia-product-cart-glyph\" d=\"M2 3h2.2l2.4 11.2a2 2 0 0 0 2 1.6h8.9a2 2 0 0 0 1.9-1.5L21 8H6\" />\n <path class=\"aia-product-cart-glyph\" d=\"M13.5 6.5v-4M11.5 4.5h4\" />\n <path class=\"aia-product-cart-check\" d=\"M5 12.5l4.5 4.5L19 7.5\" />\n <path class=\"aia-product-cart-spinner\" d=\"M12 4a8 8 0 1 0 8 8\" />\n <circle class=\"aia-product-cart-glyph\" cx=\"9\" cy=\"20\" r=\"1.3\" />\n <circle class=\"aia-product-cart-glyph\" cx=\"17.5\" cy=\"20\" r=\"1.3\" />\n </svg>\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)) );display:flex;flex-wrap:wrap;align-items:baseline;column-gap:4px}.aia-product-compare-at{font-weight:400;color:var(--aia-product-compare-at-color, currentColor);opacity:var(--aia-product-compare-at-opacity, .6)}.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-cart{position:absolute;top:calc(var(--aia-product-card-width, 116px) - 12px - var(--aia-product-cart-size, 28px) - (var(--aia-product-card-width, 116px) - 12px) * (1 - var(--aia-product-photo-fill-y, 1)) / 2);right:calc(12px + (var(--aia-product-card-width, 116px) - 12px) * (1 - var(--aia-product-photo-fill-x, 1)) / 2);display:flex;align-items:center;justify-content:center;width:var(--aia-product-cart-size, 28px);height:var(--aia-product-cart-size, 28px);border-radius:999px;background:var(--aia-product-cart-bg, rgba(255, 255, 255, .94));color:var(--aia-product-cart-color, #1f2328);box-shadow:0 0 0 1px #00000014,0 1px 3px #00000038;cursor:pointer;transition:transform .15s ease,opacity .15s ease}.aia-product-cart:hover{transform:scale(1.08)}.aia-product-cart:focus-visible{outline:2px solid var(--aia-product-focus-ring, var(--aia-option-color-selected, currentColor));outline-offset:2px}.aia-product-cart svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.aia-product-cart svg path{fill:none;stroke:currentColor}.aia-product-cart svg circle{fill:none;stroke:currentColor}.aia-product-cart-check{display:none}.aia-product-cart[data-aia-cart-state=adding]{cursor:progress}.aia-product-cart[data-aia-cart-state=added] .aia-product-cart-glyph{display:none}.aia-product-cart[data-aia-cart-state=added] .aia-product-cart-check{display:inline}.aia-product-cart-spinner,.aia-product-cart[data-aia-cart-state=adding] .aia-product-cart-glyph{display:none}.aia-product-cart[data-aia-cart-state=adding] .aia-product-cart-spinner{display:inline}.aia-product-cart[data-aia-cart-state=adding] svg{animation:magicx-aia-product-cart-spin .8s linear infinite}@keyframes magicx-aia-product-cart-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.aia-product-cart[data-aia-cart-state=adding] svg{animation-duration:2s}}.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}.aia-products[data-aia-products-layout=list] .aia-product-cart{top:50%;right:8px;transform:translateY(-50%)}.aia-products[data-aia-products-layout=list] .aia-product-cart:hover{transform:translateY(-50%) scale(1.08)}.aia-products[data-aia-products-layout=list] .aia-product[data-aia-product-has-cart]{padding-right:calc(var(--aia-product-cart-size, 28px) + 16px)}\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 });
521
521
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProductStripComponent, decorators: [{
522
522
  type: Component,
523
- 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 [attr.data-aia-product-has-cart]=\"hasCart(product) ? '' : null\"\n [style]=\"photoFillStyle(product)\"\n role=\"option\"\n [attr.aria-selected]=\"false\"\n [attr.href]=\"product.url ?? null\"\n [attr.tabindex]=\"focusable ? 0 : -1\"\n (click)=\"onClick($event, product)\"\n (keydown)=\"onKeyDown($event, product)\"\n (focus)=\"onCardFocus()\"\n (blur)=\"onCardBlur($event)\"\n >\n <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, $event)\"\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\n <!-- The add-to-cart button: a child of the card rather than of the\n aria-hidden media tile; the stylesheet lifts it over the tile's\n bottom right corner. A role=\"button\" span, not a <button>:\n interactive content inside an <a> is invalid HTML. Its press never\n reaches the card, so it never selects. Sold-out cards have none. -->\n <span\n *ngIf=\"hasCart(product)\"\n class=\"aia-product-cart\"\n data-aia-product-cart=\"\"\n role=\"button\"\n [attr.aria-label]=\"strings.addToCart + ': ' + product.title\"\n [attr.tabindex]=\"focusable ? 0 : -1\"\n [attr.data-aia-cart-state]=\"cartState(product)\"\n [attr.aria-busy]=\"cartState(product) === 'adding' ? 'true' : null\"\n (click)=\"onCartPress($event, product)\"\n (keydown)=\"onCartKeyDown($event, product)\"\n (focus)=\"onCardFocus()\"\n (blur)=\"onCardBlur($event)\"\n >\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path class=\"aia-product-cart-glyph\" d=\"M2 3h2.2l2.4 11.2a2 2 0 0 0 2 1.6h8.9a2 2 0 0 0 1.9-1.5L21 8H6\" />\n <path class=\"aia-product-cart-glyph\" d=\"M13.5 6.5v-4M11.5 4.5h4\" />\n <path class=\"aia-product-cart-check\" d=\"M5 12.5l4.5 4.5L19 7.5\" />\n <path class=\"aia-product-cart-spinner\" d=\"M12 4a8 8 0 1 0 8 8\" />\n <circle class=\"aia-product-cart-glyph\" cx=\"9\" cy=\"20\" r=\"1.3\" />\n <circle class=\"aia-product-cart-glyph\" cx=\"17.5\" cy=\"20\" r=\"1.3\" />\n </svg>\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-cart{position:absolute;top:calc(var(--aia-product-card-width, 116px) - 12px - var(--aia-product-cart-size, 28px) - (var(--aia-product-card-width, 116px) - 12px) * (1 - var(--aia-product-photo-fill-y, 1)) / 2);right:calc(12px + (var(--aia-product-card-width, 116px) - 12px) * (1 - var(--aia-product-photo-fill-x, 1)) / 2);display:flex;align-items:center;justify-content:center;width:var(--aia-product-cart-size, 28px);height:var(--aia-product-cart-size, 28px);border-radius:999px;background:var(--aia-product-cart-bg, rgba(255, 255, 255, .94));color:var(--aia-product-cart-color, #1f2328);box-shadow:0 0 0 1px #00000014,0 1px 3px #00000038;cursor:pointer;transition:transform .15s ease,opacity .15s ease}.aia-product-cart:hover{transform:scale(1.08)}.aia-product-cart:focus-visible{outline:2px solid var(--aia-product-focus-ring, var(--aia-option-color-selected, currentColor));outline-offset:2px}.aia-product-cart svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.aia-product-cart svg path{fill:none;stroke:currentColor}.aia-product-cart svg circle{fill:none;stroke:currentColor}.aia-product-cart-check{display:none}.aia-product-cart[data-aia-cart-state=adding]{cursor:progress}.aia-product-cart[data-aia-cart-state=added] .aia-product-cart-glyph{display:none}.aia-product-cart[data-aia-cart-state=added] .aia-product-cart-check{display:inline}.aia-product-cart-spinner,.aia-product-cart[data-aia-cart-state=adding] .aia-product-cart-glyph{display:none}.aia-product-cart[data-aia-cart-state=adding] .aia-product-cart-spinner{display:inline}.aia-product-cart[data-aia-cart-state=adding] svg{animation:magicx-aia-product-cart-spin .8s linear infinite}@keyframes magicx-aia-product-cart-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.aia-product-cart[data-aia-cart-state=adding] svg{animation-duration:2s}}.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}.aia-products[data-aia-products-layout=list] .aia-product-cart{top:50%;right:8px;transform:translateY(-50%)}.aia-products[data-aia-products-layout=list] .aia-product-cart:hover{transform:translateY(-50%) scale(1.08)}.aia-products[data-aia-products-layout=list] .aia-product[data-aia-product-has-cart]{padding-right:calc(var(--aia-product-cart-size, 28px) + 16px)}\n"] }]
523
+ 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 [attr.data-aia-product-has-cart]=\"hasCart(product) ? '' : null\"\n [style]=\"photoFillStyle(product)\"\n role=\"option\"\n [attr.aria-selected]=\"false\"\n [attr.href]=\"product.url ?? null\"\n [attr.tabindex]=\"focusable ? 0 : -1\"\n (click)=\"onClick($event, product)\"\n (keydown)=\"onKeyDown($event, product)\"\n (focus)=\"onCardFocus()\"\n (blur)=\"onCardBlur($event)\"\n >\n <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, $event)\"\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 }}<s *ngIf=\"product.compareAtPrice\" class=\"aia-product-compare-at\">{{ product.compareAtPrice }}</s></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\n <!-- The add-to-cart button: a child of the card rather than of the\n aria-hidden media tile; the stylesheet lifts it over the tile's\n bottom right corner. A role=\"button\" span, not a <button>:\n interactive content inside an <a> is invalid HTML. Its press never\n reaches the card, so it never selects. Sold-out cards have none. -->\n <span\n *ngIf=\"hasCart(product)\"\n class=\"aia-product-cart\"\n data-aia-product-cart=\"\"\n role=\"button\"\n [attr.aria-label]=\"strings.addToCart + ': ' + product.title\"\n [attr.tabindex]=\"focusable ? 0 : -1\"\n [attr.data-aia-cart-state]=\"cartState(product)\"\n [attr.aria-busy]=\"cartState(product) === 'adding' ? 'true' : null\"\n (click)=\"onCartPress($event, product)\"\n (keydown)=\"onCartKeyDown($event, product)\"\n (focus)=\"onCardFocus()\"\n (blur)=\"onCardBlur($event)\"\n >\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path class=\"aia-product-cart-glyph\" d=\"M2 3h2.2l2.4 11.2a2 2 0 0 0 2 1.6h8.9a2 2 0 0 0 1.9-1.5L21 8H6\" />\n <path class=\"aia-product-cart-glyph\" d=\"M13.5 6.5v-4M11.5 4.5h4\" />\n <path class=\"aia-product-cart-check\" d=\"M5 12.5l4.5 4.5L19 7.5\" />\n <path class=\"aia-product-cart-spinner\" d=\"M12 4a8 8 0 1 0 8 8\" />\n <circle class=\"aia-product-cart-glyph\" cx=\"9\" cy=\"20\" r=\"1.3\" />\n <circle class=\"aia-product-cart-glyph\" cx=\"17.5\" cy=\"20\" r=\"1.3\" />\n </svg>\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)) );display:flex;flex-wrap:wrap;align-items:baseline;column-gap:4px}.aia-product-compare-at{font-weight:400;color:var(--aia-product-compare-at-color, currentColor);opacity:var(--aia-product-compare-at-opacity, .6)}.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-cart{position:absolute;top:calc(var(--aia-product-card-width, 116px) - 12px - var(--aia-product-cart-size, 28px) - (var(--aia-product-card-width, 116px) - 12px) * (1 - var(--aia-product-photo-fill-y, 1)) / 2);right:calc(12px + (var(--aia-product-card-width, 116px) - 12px) * (1 - var(--aia-product-photo-fill-x, 1)) / 2);display:flex;align-items:center;justify-content:center;width:var(--aia-product-cart-size, 28px);height:var(--aia-product-cart-size, 28px);border-radius:999px;background:var(--aia-product-cart-bg, rgba(255, 255, 255, .94));color:var(--aia-product-cart-color, #1f2328);box-shadow:0 0 0 1px #00000014,0 1px 3px #00000038;cursor:pointer;transition:transform .15s ease,opacity .15s ease}.aia-product-cart:hover{transform:scale(1.08)}.aia-product-cart:focus-visible{outline:2px solid var(--aia-product-focus-ring, var(--aia-option-color-selected, currentColor));outline-offset:2px}.aia-product-cart svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.aia-product-cart svg path{fill:none;stroke:currentColor}.aia-product-cart svg circle{fill:none;stroke:currentColor}.aia-product-cart-check{display:none}.aia-product-cart[data-aia-cart-state=adding]{cursor:progress}.aia-product-cart[data-aia-cart-state=added] .aia-product-cart-glyph{display:none}.aia-product-cart[data-aia-cart-state=added] .aia-product-cart-check{display:inline}.aia-product-cart-spinner,.aia-product-cart[data-aia-cart-state=adding] .aia-product-cart-glyph{display:none}.aia-product-cart[data-aia-cart-state=adding] .aia-product-cart-spinner{display:inline}.aia-product-cart[data-aia-cart-state=adding] svg{animation:magicx-aia-product-cart-spin .8s linear infinite}@keyframes magicx-aia-product-cart-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.aia-product-cart[data-aia-cart-state=adding] svg{animation-duration:2s}}.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}.aia-products[data-aia-products-layout=list] .aia-product-cart{top:50%;right:8px;transform:translateY(-50%)}.aia-products[data-aia-products-layout=list] .aia-product-cart:hover{transform:translateY(-50%) scale(1.08)}.aia-products[data-aia-products-layout=list] .aia-product[data-aia-product-has-cart]{padding-right:calc(var(--aia-product-cart-size, 28px) + 16px)}\n"] }]
524
524
  }], propDecorators: { products: [{
525
525
  type: Input
526
526
  }], listboxId: [{
@@ -748,7 +748,7 @@ class SuggestionItemComponent {
748
748
  clearTimeout(this.pressedTimer);
749
749
  }
750
750
  onSelect() {
751
- if (this.loading || !this.option.is_tappable || this.pressed)
751
+ if (this.loading || !this.option.is_tappable || (this.pressed && this.checked === undefined))
752
752
  return;
753
753
  this.pressed = true;
754
754
  this.cdr.markForCheck();
@@ -778,12 +778,14 @@ class SuggestionItemComponent {
778
778
  }
779
779
  }
780
780
  SuggestionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
781
- 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 });
781
+ SuggestionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SuggestionItemComponent, isStandalone: true, selector: "aia-suggestion-item", inputs: { option: "option", checked: "checked", 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]=\"checked === undefined ? isHighlighted : checked\"\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 <span *ngIf=\"checked !== undefined\" class=\"aia-checkbox\" aria-hidden=\"true\" [attr.data-checked]=\"checked\">{{ checked ? \"\u2713\" : \"\" }}</span>\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}}.aia-suggestion-content:has(.aia-checkbox){display:flex;align-items:center;gap:10px}.aia-checkbox{display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;width:18px;height:18px;border:1px solid var(--aia-border);border-radius:6px;background:var(--aia-surface);color:transparent;font-size:11px;line-height:1}.aia-checkbox[data-checked=true]{background:rgba(var(--aia-streak-rgb, 99, 102, 241),.16);border-color:rgba(var(--aia-streak-rgb, 99, 102, 241),.45);color:rgb(var(--aia-streak-rgb, 99, 102, 241))}.aia-suggestion-item:has(.aia-checkbox[data-checked=\"true\"]){background:var(--aia-option-bg, transparent)}\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 });
782
782
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionItemComponent, decorators: [{
783
783
  type: Component,
784
- 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"] }]
784
+ 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]=\"checked === undefined ? isHighlighted : checked\"\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 <span *ngIf=\"checked !== undefined\" class=\"aia-checkbox\" aria-hidden=\"true\" [attr.data-checked]=\"checked\">{{ checked ? \"\u2713\" : \"\" }}</span>\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}}.aia-suggestion-content:has(.aia-checkbox){display:flex;align-items:center;gap:10px}.aia-checkbox{display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;width:18px;height:18px;border:1px solid var(--aia-border);border-radius:6px;background:var(--aia-surface);color:transparent;font-size:11px;line-height:1}.aia-checkbox[data-checked=true]{background:rgba(var(--aia-streak-rgb, 99, 102, 241),.16);border-color:rgba(var(--aia-streak-rgb, 99, 102, 241),.45);color:rgb(var(--aia-streak-rgb, 99, 102, 241))}.aia-suggestion-item:has(.aia-checkbox[data-checked=\"true\"]){background:var(--aia-option-bg, transparent)}\n"] }]
785
785
  }], propDecorators: { option: [{
786
786
  type: Input
787
+ }], checked: [{
788
+ type: Input
787
789
  }], isHighlighted: [{
788
790
  type: Input
789
791
  }], id: [{
@@ -933,12 +935,14 @@ class SuggestionGridComponent {
933
935
  }
934
936
  }
935
937
  SuggestionGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
936
- SuggestionGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SuggestionGridComponent, isStandalone: true, selector: "aia-suggestion-grid", inputs: { options: "options", activeIndex: "activeIndex", listboxId: "listboxId", loading: "loading", groupKey: "groupKey", optionsPosition: "optionsPosition", showIcons: "showIcons", showImages: "showImages", showCounts: "showCounts" }, outputs: { select: "select", highlight: "highlight", unhighlight: "unhighlight" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "gridComp", first: true, predicate: GridComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- max=\"1fr\": columns share out the full width, so a lone column spans the\n whole options box instead of stopping at 250px. -->\n<aia-grid\n min=\"250px\"\n max=\"1fr\"\n gap=\"0\"\n [scroll]=\"true\"\n [scrollResetKey]=\"groupKey\"\n [template]=\"plan.template\"\n [maxHeight]=\"plan.maxHeight\"\n [group]=\"groupKey\"\n>\n <aia-suggestion-item\n *ngFor=\"let option of options; trackBy: trackByOptionText; let i = index\"\n [option]=\"option\"\n [isHighlighted]=\"i === activeIndex\"\n [id]=\"listboxId + '-option-' + i\"\n [loading]=\"loading\"\n [showIcon]=\"showIcons && leadingVisuals\"\n [showImage]=\"showImages && leadingVisuals\"\n [showCount]=\"showCounts\"\n [scrollHint]=\"isScrollHint(i)\"\n [enterDelayMs]=\"enterDelayMs(i)\"\n (select)=\"select.emit($event)\"\n (highlight)=\"highlight.emit(i)\"\n (unhighlight)=\"unhighlight.emit(i)\"\n ></aia-suggestion-item>\n</aia-grid>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: GridComponent, selector: "aia-grid", inputs: ["min", "max", "gap", "scroll", "maxHeight", "scrollResetKey", "cols", "template", "group"] }, { kind: "component", type: SuggestionItemComponent, selector: "aia-suggestion-item", inputs: ["option", "isHighlighted", "id", "loading", "showIcon", "showImage", "showCount", "scrollHint", "enterDelayMs"], outputs: ["select", "highlight", "unhighlight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
938
+ SuggestionGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SuggestionGridComponent, isStandalone: true, selector: "aia-suggestion-grid", inputs: { options: "options", picked: "picked", activeIndex: "activeIndex", listboxId: "listboxId", loading: "loading", groupKey: "groupKey", optionsPosition: "optionsPosition", showIcons: "showIcons", showImages: "showImages", showCounts: "showCounts" }, outputs: { select: "select", highlight: "highlight", unhighlight: "unhighlight" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "gridComp", first: true, predicate: GridComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- max=\"1fr\": columns share out the full width, so a lone column spans the\n whole options box instead of stopping at 250px. -->\n<aia-grid\n min=\"250px\"\n max=\"1fr\"\n gap=\"0\"\n [scroll]=\"true\"\n [scrollResetKey]=\"groupKey\"\n [template]=\"plan.template\"\n [maxHeight]=\"plan.maxHeight\"\n [group]=\"groupKey\"\n>\n <aia-suggestion-item\n *ngFor=\"let option of options; trackBy: trackByOptionText; let i = index\"\n [option]=\"option\"\n [isHighlighted]=\"i === activeIndex\"\n [checked]=\"picked ? picked.includes(option.text) : undefined\"\n [id]=\"listboxId + '-option-' + i\"\n [loading]=\"loading\"\n [showIcon]=\"showIcons && leadingVisuals\"\n [showImage]=\"showImages && leadingVisuals\"\n [showCount]=\"showCounts\"\n [scrollHint]=\"isScrollHint(i)\"\n [enterDelayMs]=\"enterDelayMs(i)\"\n (select)=\"select.emit($event)\"\n (highlight)=\"highlight.emit(i)\"\n (unhighlight)=\"unhighlight.emit(i)\"\n ></aia-suggestion-item>\n</aia-grid>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: GridComponent, selector: "aia-grid", inputs: ["min", "max", "gap", "scroll", "maxHeight", "scrollResetKey", "cols", "template", "group"] }, { kind: "component", type: SuggestionItemComponent, selector: "aia-suggestion-item", inputs: ["option", "checked", "isHighlighted", "id", "loading", "showIcon", "showImage", "showCount", "scrollHint", "enterDelayMs"], outputs: ["select", "highlight", "unhighlight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
937
939
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionGridComponent, decorators: [{
938
940
  type: Component,
939
- args: [{ selector: "aia-suggestion-grid", standalone: true, imports: [CommonModule, GridComponent, SuggestionItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- max=\"1fr\": columns share out the full width, so a lone column spans the\n whole options box instead of stopping at 250px. -->\n<aia-grid\n min=\"250px\"\n max=\"1fr\"\n gap=\"0\"\n [scroll]=\"true\"\n [scrollResetKey]=\"groupKey\"\n [template]=\"plan.template\"\n [maxHeight]=\"plan.maxHeight\"\n [group]=\"groupKey\"\n>\n <aia-suggestion-item\n *ngFor=\"let option of options; trackBy: trackByOptionText; let i = index\"\n [option]=\"option\"\n [isHighlighted]=\"i === activeIndex\"\n [id]=\"listboxId + '-option-' + i\"\n [loading]=\"loading\"\n [showIcon]=\"showIcons && leadingVisuals\"\n [showImage]=\"showImages && leadingVisuals\"\n [showCount]=\"showCounts\"\n [scrollHint]=\"isScrollHint(i)\"\n [enterDelayMs]=\"enterDelayMs(i)\"\n (select)=\"select.emit($event)\"\n (highlight)=\"highlight.emit(i)\"\n (unhighlight)=\"unhighlight.emit(i)\"\n ></aia-suggestion-item>\n</aia-grid>\n" }]
941
+ args: [{ selector: "aia-suggestion-grid", standalone: true, imports: [CommonModule, GridComponent, SuggestionItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- max=\"1fr\": columns share out the full width, so a lone column spans the\n whole options box instead of stopping at 250px. -->\n<aia-grid\n min=\"250px\"\n max=\"1fr\"\n gap=\"0\"\n [scroll]=\"true\"\n [scrollResetKey]=\"groupKey\"\n [template]=\"plan.template\"\n [maxHeight]=\"plan.maxHeight\"\n [group]=\"groupKey\"\n>\n <aia-suggestion-item\n *ngFor=\"let option of options; trackBy: trackByOptionText; let i = index\"\n [option]=\"option\"\n [isHighlighted]=\"i === activeIndex\"\n [checked]=\"picked ? picked.includes(option.text) : undefined\"\n [id]=\"listboxId + '-option-' + i\"\n [loading]=\"loading\"\n [showIcon]=\"showIcons && leadingVisuals\"\n [showImage]=\"showImages && leadingVisuals\"\n [showCount]=\"showCounts\"\n [scrollHint]=\"isScrollHint(i)\"\n [enterDelayMs]=\"enterDelayMs(i)\"\n (select)=\"select.emit($event)\"\n (highlight)=\"highlight.emit(i)\"\n (unhighlight)=\"unhighlight.emit(i)\"\n ></aia-suggestion-item>\n</aia-grid>\n" }]
940
942
  }], propDecorators: { options: [{
941
943
  type: Input
944
+ }], picked: [{
945
+ type: Input
942
946
  }], activeIndex: [{
943
947
  type: Input
944
948
  }], listboxId: [{
@@ -969,6 +973,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
969
973
  args: ["window:resize"]
970
974
  }] } });
971
975
 
976
+ /** How long a column's scroll must be still before the row it rests on counts. */
977
+ const SCROLL_SETTLE_MS = 120;
978
+ /**
979
+ * The dropdown's time body, rendered in place of the options grid when the
980
+ * active parameter is a time. Angular analogue of vanilla's `renderTimeWheel`
981
+ * and React's `<TimeWheel>`: three wheels — hour, minutes in fives, AM/PM —
982
+ * whose top rows read as the time, and a Done button.
983
+ *
984
+ * The wheels hold no time of their own. `view.minutes` is the time; turning a
985
+ * wheel emits the new time and the next render scrolls every wheel to it. That
986
+ * is what lets the keyboard (ArrowUp/ArrowDown in the input, handled by the
987
+ * core) and the pointer move the same time.
988
+ *
989
+ * @internal
990
+ */
991
+ class TimeWheelComponent {
992
+ constructor() {
993
+ /** The core's `timeView`: the time on the wheels' top rows. */
994
+ this.view = null;
995
+ /** Accessible name for the wheel ("Time"). */
996
+ this.label = "";
997
+ /** Text of the button that answers with the time ("Done"). */
998
+ this.doneLabel = "";
999
+ /**
1000
+ * False for the press window after an answer: the answered pill's wheel is
1001
+ * still on screen and must not take a second answer.
1002
+ */
1003
+ this.interactive = true;
1004
+ /** The user turned a wheel; the value is the whole new time. Commits nothing. */
1005
+ this.timeChange = new EventEmitter();
1006
+ /** Done — answer the pill with the time on the wheels. */
1007
+ this.commit = new EventEmitter();
1008
+ this.columns = TIME_WHEEL_COLUMNS;
1009
+ this.scroll = new Map();
1010
+ this.trackByColumn = (_, column) => column;
1011
+ this.trackByRow = (_, row) => row.label;
1012
+ }
1013
+ get valueLabel() {
1014
+ return this.view ? formatTime$1(this.view.minutes) : "";
1015
+ }
1016
+ rowsOf(column) {
1017
+ return timeWheelRows(column);
1018
+ }
1019
+ indexOf(column) {
1020
+ return this.view ? timeWheelIndex(column, this.view.minutes) : -1;
1021
+ }
1022
+ /** Scroll each wheel so its chosen row is on top. Idempotent, so cheap to run on every check. */
1023
+ ngAfterViewChecked() {
1024
+ if (!this.view || !this.wheelColumns)
1025
+ return;
1026
+ for (const ref of this.wheelColumns) {
1027
+ const el = ref.nativeElement;
1028
+ const column = el.getAttribute("data-aia-time-column");
1029
+ const state = this.scrollStateOf(column);
1030
+ // Never yank a wheel the user is still turning: their scroll settles
1031
+ // into a time of its own.
1032
+ if (state.settle)
1033
+ continue;
1034
+ const top = timeWheelIndex(column, this.view.minutes) * TIME_WHEEL_ROW_HEIGHT;
1035
+ if (Math.abs(el.scrollTop - top) < 1)
1036
+ continue;
1037
+ state.syncedTop = top;
1038
+ el.scrollTop = top;
1039
+ }
1040
+ }
1041
+ ngOnDestroy() {
1042
+ for (const state of this.scroll.values()) {
1043
+ if (state.settle)
1044
+ clearTimeout(state.settle);
1045
+ }
1046
+ }
1047
+ onClick(event) {
1048
+ if (!this.interactive || !this.view)
1049
+ return;
1050
+ const target = event.target instanceof Element ? event.target : null;
1051
+ if (target?.closest("[data-aia-time-done]")) {
1052
+ this.commit.emit();
1053
+ return;
1054
+ }
1055
+ const row = target?.closest("[data-aia-time-row]");
1056
+ const column = row?.getAttribute("data-aia-time-column");
1057
+ if (!row || !column)
1058
+ return;
1059
+ const index = Number(row.getAttribute("data-aia-index"));
1060
+ this.timeChange.emit(withTimeWheelIndex(column, this.view.minutes, index));
1061
+ }
1062
+ onScroll(column, event) {
1063
+ const el = event.target;
1064
+ const state = this.scrollStateOf(column);
1065
+ if (state.syncedTop != null && Math.abs(el.scrollTop - state.syncedTop) < 1) {
1066
+ state.syncedTop = null;
1067
+ return;
1068
+ }
1069
+ state.syncedTop = null;
1070
+ if (state.settle)
1071
+ clearTimeout(state.settle);
1072
+ state.settle = setTimeout(() => this.settle(column, el), SCROLL_SETTLE_MS);
1073
+ }
1074
+ /** Keeps the input focused, which the dropdown's visibility gate depends on. */
1075
+ preventBlur(event) {
1076
+ event.preventDefault();
1077
+ }
1078
+ settle(column, el) {
1079
+ this.scrollStateOf(column).settle = null;
1080
+ if (!this.interactive || !this.view)
1081
+ return;
1082
+ const index = timeWheelIndexFromScroll(column, el.scrollTop);
1083
+ if (index === timeWheelIndex(column, this.view.minutes))
1084
+ return;
1085
+ this.timeChange.emit(withTimeWheelIndex(column, this.view.minutes, index));
1086
+ }
1087
+ scrollStateOf(column) {
1088
+ let state = this.scroll.get(column);
1089
+ if (!state) {
1090
+ state = { syncedTop: null, settle: null };
1091
+ this.scroll.set(column, state);
1092
+ }
1093
+ return state;
1094
+ }
1095
+ }
1096
+ TimeWheelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimeWheelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1097
+ TimeWheelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimeWheelComponent, isStandalone: true, selector: "aia-time-wheel", inputs: { view: "view", label: "label", doneLabel: "doneLabel", interactive: "interactive" }, outputs: { timeChange: "timeChange", commit: "commit" }, viewQueries: [{ propertyName: "wheelColumns", predicate: ["wheelColumn"], descendants: true }], ngImport: i0, template: "<!-- One click listener for the whole wheel (see onClick): the wheel appears\n when a response lands, and content that appears mid-tap carrying its own\n listeners cancels the tap on iOS. -->\n<div\n class=\"magicx-aia-time-wheel\"\n data-aia-time-wheel=\"\"\n role=\"group\"\n [attr.aria-label]=\"label\"\n (mousedown)=\"preventBlur($event)\"\n (click)=\"onClick($event)\"\n>\n <!-- The wheels are a pointer surface; keyboard users move the time from the\n input. So the columns are hidden from AT and the time is announced\n from here instead. -->\n <span class=\"magicx-aia-time-wheel-value\" data-aia-time-value=\"\" aria-live=\"polite\">{{\n valueLabel\n }}</span>\n <div class=\"magicx-aia-time-wheel-columns\" aria-hidden=\"true\">\n <div class=\"magicx-aia-time-wheel-band\"></div>\n <ng-container *ngFor=\"let column of columns; trackBy: trackByColumn\">\n <span *ngIf=\"column === 'minute'\" class=\"magicx-aia-time-wheel-separator\">:</span>\n <div\n #wheelColumn\n class=\"magicx-aia-time-wheel-column\"\n [attr.data-aia-time-column]=\"column\"\n (scroll)=\"onScroll(column, $event)\"\n >\n <div\n *ngFor=\"let row of rowsOf(column); let i = index; trackBy: trackByRow\"\n class=\"magicx-aia-time-wheel-row\"\n [class.magicx-aia-time-wheel-row--selected]=\"i === indexOf(column)\"\n data-aia-time-row=\"\"\n [attr.data-aia-time-column]=\"column\"\n [attr.data-aia-index]=\"i\"\n >\n {{ row.label }}\n </div>\n </div>\n </ng-container>\n </div>\n <!-- Out of the tab order, as the calendar's buttons are: Tab is bound to the\n dropdown, and Enter in the input already commits a moved wheel. -->\n <button type=\"button\" tabindex=\"-1\" class=\"magicx-aia-time-wheel-done\" data-aia-time-done=\"\">\n {{ doneLabel }}\n </button>\n</div>\n", styles: [".magicx-aia-time-wheel{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 6px 4px}.magicx-aia-time-wheel-value{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.magicx-aia-time-wheel-columns{position:relative;display:flex;align-items:flex-start;justify-content:center;gap:2px;width:100%}.magicx-aia-time-wheel-band{position:absolute;top:0;right:0;left:0;height:30px;border-radius:8px;background:var(--aia-time-band-bg, rgba(var(--aia-streak-rgb, 255, 255, 255), .08));pointer-events:none}.magicx-aia-time-wheel-column{position:relative;flex:0 0 auto;width:44px;height:90px;padding-bottom:60px;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none;mask-image:linear-gradient(to bottom,#000 34%,transparent 100%)}.magicx-aia-time-wheel-column::-webkit-scrollbar{display:none}.magicx-aia-time-wheel-row{display:flex;align-items:center;justify-content:center;height:30px;scroll-snap-align:start;font-family:inherit;font-size:var(--aia-time-font-size, 15px);font-variant-numeric:tabular-nums;font-weight:450;line-height:20px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));cursor:pointer}.magicx-aia-time-wheel-row--selected{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));font-weight:500}.magicx-aia-time-wheel-separator{display:flex;align-items:center;height:30px;font-size:var(--aia-time-font-size, 15px);font-weight:500;line-height:20px;color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.magicx-aia-time-wheel-done{align-self:stretch;height:32px;padding:0 12px;border:none;border-radius:8px;background:var(--aia-time-done-bg, rgba(var(--aia-streak-rgb, 255, 255, 255), .1));font-family:inherit;font-size:13px;font-weight:500;line-height:20px;color:var( --aia-time-done-color, var(--aia-option-color-selected, var(--aia-color-text-default, #fff)) );cursor:pointer;transition:background-color .15s ease-out}.magicx-aia-time-wheel-done:hover{background:var(--aia-time-done-bg-hover, rgba(var(--aia-streak-rgb, 255, 255, 255), .16))}\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 });
1098
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimeWheelComponent, decorators: [{
1099
+ type: Component,
1100
+ args: [{ selector: "aia-time-wheel", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- One click listener for the whole wheel (see onClick): the wheel appears\n when a response lands, and content that appears mid-tap carrying its own\n listeners cancels the tap on iOS. -->\n<div\n class=\"magicx-aia-time-wheel\"\n data-aia-time-wheel=\"\"\n role=\"group\"\n [attr.aria-label]=\"label\"\n (mousedown)=\"preventBlur($event)\"\n (click)=\"onClick($event)\"\n>\n <!-- The wheels are a pointer surface; keyboard users move the time from the\n input. So the columns are hidden from AT and the time is announced\n from here instead. -->\n <span class=\"magicx-aia-time-wheel-value\" data-aia-time-value=\"\" aria-live=\"polite\">{{\n valueLabel\n }}</span>\n <div class=\"magicx-aia-time-wheel-columns\" aria-hidden=\"true\">\n <div class=\"magicx-aia-time-wheel-band\"></div>\n <ng-container *ngFor=\"let column of columns; trackBy: trackByColumn\">\n <span *ngIf=\"column === 'minute'\" class=\"magicx-aia-time-wheel-separator\">:</span>\n <div\n #wheelColumn\n class=\"magicx-aia-time-wheel-column\"\n [attr.data-aia-time-column]=\"column\"\n (scroll)=\"onScroll(column, $event)\"\n >\n <div\n *ngFor=\"let row of rowsOf(column); let i = index; trackBy: trackByRow\"\n class=\"magicx-aia-time-wheel-row\"\n [class.magicx-aia-time-wheel-row--selected]=\"i === indexOf(column)\"\n data-aia-time-row=\"\"\n [attr.data-aia-time-column]=\"column\"\n [attr.data-aia-index]=\"i\"\n >\n {{ row.label }}\n </div>\n </div>\n </ng-container>\n </div>\n <!-- Out of the tab order, as the calendar's buttons are: Tab is bound to the\n dropdown, and Enter in the input already commits a moved wheel. -->\n <button type=\"button\" tabindex=\"-1\" class=\"magicx-aia-time-wheel-done\" data-aia-time-done=\"\">\n {{ doneLabel }}\n </button>\n</div>\n", styles: [".magicx-aia-time-wheel{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 6px 4px}.magicx-aia-time-wheel-value{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.magicx-aia-time-wheel-columns{position:relative;display:flex;align-items:flex-start;justify-content:center;gap:2px;width:100%}.magicx-aia-time-wheel-band{position:absolute;top:0;right:0;left:0;height:30px;border-radius:8px;background:var(--aia-time-band-bg, rgba(var(--aia-streak-rgb, 255, 255, 255), .08));pointer-events:none}.magicx-aia-time-wheel-column{position:relative;flex:0 0 auto;width:44px;height:90px;padding-bottom:60px;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none;mask-image:linear-gradient(to bottom,#000 34%,transparent 100%)}.magicx-aia-time-wheel-column::-webkit-scrollbar{display:none}.magicx-aia-time-wheel-row{display:flex;align-items:center;justify-content:center;height:30px;scroll-snap-align:start;font-family:inherit;font-size:var(--aia-time-font-size, 15px);font-variant-numeric:tabular-nums;font-weight:450;line-height:20px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));cursor:pointer}.magicx-aia-time-wheel-row--selected{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));font-weight:500}.magicx-aia-time-wheel-separator{display:flex;align-items:center;height:30px;font-size:var(--aia-time-font-size, 15px);font-weight:500;line-height:20px;color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.magicx-aia-time-wheel-done{align-self:stretch;height:32px;padding:0 12px;border:none;border-radius:8px;background:var(--aia-time-done-bg, rgba(var(--aia-streak-rgb, 255, 255, 255), .1));font-family:inherit;font-size:13px;font-weight:500;line-height:20px;color:var( --aia-time-done-color, var(--aia-option-color-selected, var(--aia-color-text-default, #fff)) );cursor:pointer;transition:background-color .15s ease-out}.magicx-aia-time-wheel-done:hover{background:var(--aia-time-done-bg-hover, rgba(var(--aia-streak-rgb, 255, 255, 255), .16))}\n"] }]
1101
+ }], propDecorators: { view: [{
1102
+ type: Input
1103
+ }], label: [{
1104
+ type: Input
1105
+ }], doneLabel: [{
1106
+ type: Input
1107
+ }], interactive: [{
1108
+ type: Input
1109
+ }], timeChange: [{
1110
+ type: Output
1111
+ }], commit: [{
1112
+ type: Output
1113
+ }], wheelColumns: [{
1114
+ type: ViewChildren,
1115
+ args: ["wheelColumn"]
1116
+ }] } });
1117
+
972
1118
  /**
973
1119
  * Tier 2 dropdown component — the Angular equivalent of React's
974
1120
  * `<AIAutocompleteDropdown />`. Renders the pillbar, options grid, and
@@ -1130,6 +1276,11 @@ class AIAutocompleteDropdownComponent {
1130
1276
  * element is replaced and tearing down when there is no grid.
1131
1277
  */
1132
1278
  ngAfterViewChecked() {
1279
+ const done = this.host.nativeElement.querySelector("[data-aia-multi-done]");
1280
+ if (done?.disabled) {
1281
+ void done.offsetHeight;
1282
+ done.disabled = false;
1283
+ }
1133
1284
  this.syncViewportFit();
1134
1285
  const root = this.dropdownRootRef?.nativeElement;
1135
1286
  const button = this.scrollArrowRef?.nativeElement;
@@ -1258,11 +1409,20 @@ class AIAutocompleteDropdownComponent {
1258
1409
  const isDate = isCalendarFormat(dd.formatType ?? "options") && dd.dateView != null;
1259
1410
  const showsOptions = options.length > 0 && !isDate;
1260
1411
  const showsDateGrid = options.length > 0 && isDate && !dd.isLoading;
1261
- const showsFallbackSkeleton = dd.isLoading && !showsOptions && !showsDateGrid;
1412
+ // The time wheel is withheld while a request is in flight, for the
1413
+ // calendar's reasons above. Its pill has no options by design, so it
1414
+ // is the format — not the option count — that says it shows.
1415
+ const showsTimeWheel = dd.formatType === "time" && dd.timeView != null && !dd.isLoading;
1416
+ const showsFallbackSkeleton = dd.isLoading && !showsOptions && !showsDateGrid && !showsTimeWheel;
1262
1417
  // Either half is enough to keep the panel up: products render with no
1263
1418
  // suggestions, suggestions render with no products.
1264
1419
  const isVisible = dd.isOpen &&
1265
- (showsOptions || showsDateGrid || showsPills || dd.isLoading || dd.products.length > 0);
1420
+ (showsOptions ||
1421
+ showsDateGrid ||
1422
+ showsTimeWheel ||
1423
+ showsPills ||
1424
+ dd.isLoading ||
1425
+ dd.products.length > 0);
1266
1426
  // While closing, reuse the last visible content so the populated
1267
1427
  // dropdown fades out as one. Otherwise the pills/options vanish the
1268
1428
  // instant the state empties (e.g. skipping the last pill with →),
@@ -1295,6 +1455,9 @@ class AIAutocompleteDropdownComponent {
1295
1455
  selectedRange: dd.selectedDateRange ?? null,
1296
1456
  rangeStart: dd.dateRangeStart ?? null,
1297
1457
  },
1458
+ showsTimeWheel,
1459
+ timeView: dd.timeView ?? null,
1460
+ multiSelectView: dd.multiSelectView ?? null,
1298
1461
  showsFallbackSkeleton,
1299
1462
  products: dd.products,
1300
1463
  hasProductAddToCart: Boolean(dd.hasProductAddToCart),
@@ -1329,6 +1492,12 @@ class AIAutocompleteDropdownComponent {
1329
1492
  onNextMonth() {
1330
1493
  this.controller.showNextMonth();
1331
1494
  }
1495
+ onTimeChange(minutes) {
1496
+ this.controller.setTime(minutes);
1497
+ }
1498
+ onTimeCommit() {
1499
+ this.controller.commitTime();
1500
+ }
1332
1501
  onHighlight(index) {
1333
1502
  this.controller.setActiveDropdownIndex(index);
1334
1503
  }
@@ -1352,7 +1521,7 @@ class AIAutocompleteDropdownComponent {
1352
1521
  }
1353
1522
  }
1354
1523
  AIAutocompleteDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1355
- AIAutocompleteDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AIAutocompleteDropdownComponent, isStandalone: true, selector: "ai-autocomplete-dropdown", inputs: { controller: "controller", showPills: "showPills", showSkipButton: "showSkipButton", showOptionIcons: "showOptionIcons", showOptionImages: "showOptionImages", showOptionCounts: "showOptionCounts", productsLayout: "productsLayout", productImageFallback: "productImageFallback", className: "className", mode: "mode", language: "language" }, viewQueries: [{ propertyName: "dropdownRootRef", first: true, predicate: ["dropdownRoot"], descendants: true }, { propertyName: "scrollArrowRef", first: true, predicate: ["scrollArrow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"vm$ | async as vm\"\n #dropdownRoot\n [id]=\"controller.listboxId\"\n role=\"listbox\"\n data-aia-dropdown=\"\"\n [attr.data-aia-loading]=\"vm.isLoading ? '' : null\"\n [attr.data-aia-skeleton-exiting]=\"vm.skeletonExiting ? '' : null\"\n [attr.data-mode]=\"resolvedMode\"\n [attr.data-options-position]=\"vm.optionsPosition\"\n [attr.data-aia-has-products]=\"vm.products.length > 0 ? '' : null\"\n [class]=\"rootClass\"\n [class.magicx-aia-dropdown-visible]=\"vm.isVisible\"\n (mousedown)=\"preventBlur($event)\"\n>\n <aia-stack space=\"8px\">\n <aia-cluster\n *ngIf=\"vm.showsPills || vm.showsSkip\"\n class=\"magicx-aia-dropdown-pillbar\"\n data-aia-pillbar=\"\"\n [noWrap]=\"true\"\n >\n <!-- The scroll + right-edge fade live on this wrapper (not the bar) so\n the skip button stays outside the masked region \u2014 pinned and fully\n opaque while overflowing pills fade under it. Absent in a skip-only\n row (pills rendered elsewhere via pillPlacement inline/hidden). -->\n <span *ngIf=\"vm.showsPills\" class=\"magicx-aia-pill-scroll\" data-aia-pill-scroll=\"\">\n <aia-pill-list\n [pills]=\"vm.pills\"\n [activePillIndex]=\"0\"\n [activeSelected]=\"vm.isActivePillSelected\"\n [rounded]=\"true\"\n [loading]=\"vm.isLoading\"\n (selectPill)=\"onPillClick($event)\"\n ></aia-pill-list>\n </span>\n <button\n *ngIf=\"vm.showsSkip\"\n type=\"button\"\n tabindex=\"-1\"\n class=\"magicx-aia-skip\"\n data-aia-skip=\"\"\n [disabled]=\"vm.skipDisabled\"\n [attr.aria-label]=\"\n vm.activePillLabel ? vm.strings.skipLabel + ' ' + vm.activePillLabel : vm.strings.skipLabel\n \"\n (click)=\"onSkip()\"\n >\n {{ vm.strings.skip }}\n </button>\n </aia-cluster>\n\n <aia-suggestion-grid\n *ngIf=\"vm.showsOptions\"\n [options]=\"vm.options\"\n [activeIndex]=\"vm.activeIndex\"\n [listboxId]=\"controller.listboxId\"\n [loading]=\"vm.isLoading\"\n [groupKey]=\"vm.groupKey\"\n [optionsPosition]=\"vm.optionsPosition\"\n [showIcons]=\"vm.showOptionIcons\"\n [showImages]=\"vm.showOptionImages\"\n [showCounts]=\"vm.showOptionCounts\"\n (select)=\"onSelect($event)\"\n (highlight)=\"onHighlight($event)\"\n (unhighlight)=\"onUnhighlight($event)\"\n ></aia-suggestion-grid>\n\n <aia-date-grid\n *ngIf=\"vm.showsDateGrid\"\n [options]=\"vm.options\"\n [activeIndex]=\"vm.activeIndex\"\n [listboxId]=\"controller.listboxId\"\n [view]=\"vm.dateView\"\n [selection]=\"vm.dateSelection\"\n (select)=\"onSelect($event)\"\n (highlight)=\"onHighlight($event)\"\n (unhighlight)=\"onUnhighlight($event)\"\n (previousMonth)=\"onPreviousMonth()\"\n (nextMonth)=\"onNextMonth()\"\n ></aia-date-grid>\n\n <div\n *ngIf=\"vm.showsFallbackSkeleton\"\n class=\"magicx-aia-dropdown-skeleton-bars\"\n data-aia-skeleton-bars=\"\"\n >\n <span\n *ngFor=\"let w of fallbackSkeletonBarWidths; trackBy: trackByWidth\"\n class=\"magicx-aia-dropdown-skeleton-bar\"\n [style.width.px]=\"w\"\n ></span>\n </div>\n\n <!-- *ngIf, not just the section's own guard inside the component: the host\n element is an in-flow child of .aia-stack (display:flex; gap:8px), so\n an always-instantiated zero-height host would add a SECOND 8px gap\n between the grid and the footer \u2014 in every dropdown, products or not.\n The grid's --aia-grid-overlap-bottom is tuned for exactly one gap, so\n the footer would land 8px below the band it is meant to cover. -->\n <aia-product-strip\n *ngIf=\"vm.products.length > 0\"\n [products]=\"vm.products\"\n [listboxId]=\"controller.listboxId\"\n [focusable]=\"vm.isVisible\"\n [layout]=\"productsLayout\"\n [imageFallback]=\"productImageFallback\"\n [strings]=\"vm.strings\"\n [addToCart]=\"vm.hasProductAddToCart ? addProductToCart : null\"\n (select)=\"onProductSelect($event)\"\n (focusChange)=\"onProductFocusChange($event)\"\n ></aia-product-strip>\n\n <footer class=\"magicx-aia-footer\" data-aia-footer=\"\">\n <div class=\"magicx-aia-footer-row\">\n <span class=\"magicx-aia-footer-hint-group\">\n <kbd class=\"magicx-aia-footer-key\">{{ vm.footerKey }}</kbd>\n <span class=\"magicx-aia-footer-hint\">{{ vm.footerHint }}</span>\n </span>\n <a\n class=\"magicx-aia-footer-brand-link\"\n [href]=\"brandHref\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"magicx-aia-footer-brand\">AI</span>\n <span class=\"magicx-aia-footer-badge\">Autocomplete</span>\n </a>\n </div>\n </footer>\n </aia-stack>\n <!-- \"More below\" arrow \u2014 an overlay on the panel, not a section of the\n stack. Shown/positioned by the core's scroll-arrow controller (see\n syncScrollArrow); markup mirrors vanilla's createScrollArrowButton. -->\n <button\n #scrollArrow\n type=\"button\"\n tabindex=\"-1\"\n class=\"magicx-aia-scroll-arrow\"\n data-aia-scroll-arrow=\"\"\n [attr.aria-label]=\"scrollArrowLabel\"\n aria-hidden=\"true\"\n >\n <svg\n viewBox=\"0 0 16 16\"\n width=\"18\"\n height=\"18\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"M4 6.5 8 10.5l4-4\" />\n </svg>\n </button>\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){--aia-primitive-neutral-0: #000000;--aia-primitive-neutral-150: #1a1b1d;--aia-primitive-neutral-250: #323232;--aia-primitive-neutral-300: #333539;--aia-primitive-neutral-400: #4a4a4a;--aia-primitive-neutral-500: #505050;--aia-primitive-neutral-700: #b0b0b0;--aia-primitive-neutral-750: #bdbdbd;--aia-primitive-neutral-900: #e7e7e7;--aia-primitive-neutral-1000: #ffffff;--aia-primitive-blue-50: #eef2ff;--aia-primitive-neutral-750-a50: rgba(189, 189, 189, .51);--aia-primitive-neutral-750-a25: rgba(189, 189, 189, .25);--aia-primitive-neutral-750-a8: rgba(189, 189, 189, .083);--aia-primitive-neutral-750-a35: rgba(189, 189, 189, .35);--aia-primitive-neutral-750-a30: rgba(189, 189, 189, .3);--aia-primitive-neutral-750-a15: rgba(189, 189, 189, .15);--aia-primitive-neutral-750-a105: rgba(189, 189, 189, .105);--aia-primitive-neutral-700-a40: rgba(176, 176, 176, .4);--aia-primitive-neutral-900-a50: rgba(231, 231, 231, .5);--aia-primitive-neutral-400-a50: rgba(74, 74, 74, .5)}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-surface: var(--aia-primitive-neutral-1000);--aia-border: var(--aia-primitive-neutral-700);--aia-shadow: none;--aia-dropdown-border: var(--aia-primitive-neutral-900-a50);--aia-dropdown-shadow: none;--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-300);--aia-pill-font-size: 16px;--aia-smart-suggestion-accent: #b84549;--aia-smart-suggestion-glint: #f3c4c5;--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a105);--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);--aia-completed-pill-color: var(--aia-primitive-neutral-0);--aia-option-bg: var(--aia-primitive-blue-50);--aia-option-color: var(--aia-primitive-neutral-150);--aia-option-color-selected: var(--aia-primitive-neutral-0);--aia-option-font-size: 16px;--aia-written-text-color: var(--aia-primitive-neutral-0);--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: var(--aia-primitive-neutral-0);--aia-submit-color: var(--aia-primitive-neutral-1000);--aia-color-text-muted: #6b7280;--aia-skeleton-bg: var(--aia-primitive-neutral-750-a8);--aia-streak-rgb: 99, 102, 241;--aia-footer-hint-color: var(--aia-primitive-neutral-500);--aia-footer-brand-color: var(--aia-primitive-neutral-700);--aia-footer-badge-border: var(--aia-primitive-neutral-750-a50)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-surface: var(--aia-primitive-neutral-0);--aia-border: var(--aia-primitive-neutral-500);--aia-shadow: none;--aia-dropdown-border: var(--aia-primitive-neutral-400-a50);--aia-dropdown-shadow: none;--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-700);--aia-pill-font-size: 16px;--aia-smart-suggestion-accent: #e0787b;--aia-smart-suggestion-glint: #ffe1e1;--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a15);--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);--aia-completed-pill-color: var(--aia-primitive-neutral-1000);--aia-option-bg: var(--aia-primitive-neutral-250);--aia-option-color: var(--aia-primitive-neutral-900);--aia-option-color-selected: var(--aia-primitive-neutral-1000);--aia-option-font-size: 16px;--aia-written-text-color: var(--aia-primitive-neutral-1000);--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: var(--aia-primitive-neutral-1000);--aia-submit-color: var(--aia-primitive-neutral-0);--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: var(--aia-primitive-neutral-150);--aia-streak-rgb: 255, 255, 255;--aia-footer-hint-color: var(--aia-primitive-neutral-700);--aia-footer-brand-color: var(--aia-primitive-neutral-500);--aia-footer-badge-border: var(--aia-primitive-neutral-500)}[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] .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],[data-aia-dropdown][data-options-position=above]{--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}[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}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .aia-stack,[data-aia-dropdown][data-options-position=above] .aia-stack{flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer],[data-aia-dropdown][data-options-position=above] [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,[data-aia-dropdown][data-options-position=above] [data-aia-footer]:before{background:linear-gradient(to top,transparent,var(--aia-surface, #ffffff) var(--aia-footer-fade-lead, 20px))}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .magicx-aia-footer,[data-aia-dropdown][data-options-position=above] .magicx-aia-footer{flex-direction:column-reverse}@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", ".magicx-aia-dropdown{position:absolute;left:0;right:0;top:100%;max-width:544px;margin-top:6px;display:flex;flex-direction:column;box-sizing:border-box;padding:10px 8px 10px max(0px,calc(var(--aia-content-inset-left, 16px) - 10px));overflow:hidden;container-type:inline-size;z-index:10;opacity:0;pointer-events:none;transform-origin:50% 0;transform:scaleY(var(--aia-dropdown-reveal-scale, .02));transition:opacity .4s cubic-bezier(.4,0,.2,1),transform 0s .4s;background:var(--aia-surface, #ffffff);border:1px solid var(--aia-dropdown-border, rgba(231, 231, 231, .5));border-radius:9px;box-shadow:var(--aia-dropdown-shadow, none)}.magicx-aia-dropdown:has([data-aia-datepicker]){max-width:var(--aia-date-panel-width, 312px)}.magicx-aia-dropdown[data-aia-surface=glass]{background:transparent;border-color:transparent;box-shadow:#fff -3.2px -3.2px 3.2px -3.2px inset,#fff 6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) -6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) 6.4px -6.4px 1.6px -8px inset,#ffffff26 -1.6px 0 0 -1.6px inset,#ffffff26 0 -1.6px 0 -1.6px inset,#ffffff4d 0 1.6px inset,#ffffff4d 1.6px 0 inset,inset 0 0 30px 5px #0000000d;backdrop-filter:blur(30px)}.magicx-aia-dropdown-visible{opacity:1;pointer-events:auto;transform:scaleY(1);transition:opacity .1s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.22,1.28,.36,1)}.magicx-aia-scroll-arrow{position:absolute;left:50%;bottom:var(--aia-scroll-arrow-bottom, 8px);z-index:4;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 0 0 -16px;padding:0;border:0;border-radius:0;background:transparent;color:var( --aia-scroll-arrow-color, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)) );box-shadow:none;cursor:pointer;pointer-events:none;opacity:0;transition:opacity 1s cubic-bezier(.4,0,.2,1);animation:magicx-aia-scroll-arrow-bob 2.6s ease-in-out infinite}@keyframes magicx-aia-scroll-arrow-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.magicx-aia-scroll-arrow[data-aia-visible]{pointer-events:auto;opacity:1}.magicx-aia-scroll-arrow:disabled{cursor:default}.magicx-aia-scroll-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor}.magicx-aia-scroll-arrow svg path{fill:none;stroke:currentColor}.magicx-aia-scroll-arrow:hover{color:var( --aia-scroll-arrow-color-hover, var(--aia-option-color-selected, var(--aia-color-text-default, #fff)) )}@media (prefers-reduced-motion: reduce){.magicx-aia-scroll-arrow,.magicx-aia-dropdown{animation-duration:0s;animation-delay:0s;transition-duration:0s}}.magicx-aia-dropdown-pillbar{overflow:hidden}.magicx-aia-pill-scroll{display:inline-flex;align-items:center;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%)}.magicx-aia-pill-scroll::-webkit-scrollbar{display:none}.magicx-aia-skip{display:inline-flex;align-items:center;margin-inline-start:auto;flex-shrink:0;padding:5px 8px;border:none;border-radius:6px;background:transparent;font-family:inherit;font-size:var(--aia-skip-font-size, 10px);line-height:18px;color:var(--aia-skip-color, var(--aia-footer-hint-color, #505050));cursor:pointer;white-space:nowrap;transition:color .15s ease-out,background-color .15s ease-out}.magicx-aia-skip:hover{color:var(--aia-skip-color-hover, var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb)));background:var(--aia-skip-hover-bg, var(--aia-option-bg, transparent))}.magicx-aia-skip:disabled{pointer-events:none;cursor:default;opacity:.5}.magicx-aia-footer{display:flex;flex-direction:column;gap:8px;padding:var(--aia-footer-gap, 12px) 0 0 8px;position:relative;z-index:3;pointer-events:none}.magicx-aia-footer-row{display:flex;align-items:center;justify-content:space-between;min-height:var(--aia-footer-row-min-height, var(--aia-footer-row-height, 23px))}.magicx-aia-footer-hint-group{display:inline-flex;align-items:center;gap:5px}.magicx-aia-footer-hint-group,.magicx-aia-footer-brand-link{pointer-events:auto}.magicx-aia-footer-brand-link{display:inline-flex;align-items:center;gap:2px;text-decoration:none;cursor:pointer;transition:opacity .15s ease-out}.magicx-aia-footer-hint-group,.magicx-aia-footer-brand-link{background:var( --aia-footer-chip-bg, color-mix(in srgb, var(--aia-surface, #ffffff) 65%, transparent) );padding-inline:4px;border-radius:6px}.magicx-aia-footer-brand-link{background:var(--aia-footer-brand-pill-bg, var(--aia-surface, #ffffff));border-radius:999px;padding:2px 4px;gap:4px}.magicx-aia-footer-brand-link:hover{opacity:.7}.magicx-aia-footer-key{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:2px 6px;border:.5px solid var(--aia-footer-hint-color, #505050);border-radius:5px;font-family:inherit;font-size:11px;line-height:18px;color:var(--aia-footer-hint-color, #505050)}.magicx-aia-footer-hint{font-family:inherit;font-size:11px;line-height:18px;color:var(--aia-footer-hint-color, #505050)}.magicx-aia-footer-brand{font-family:inherit;font-size:10px;line-height:18px;color:var(--aia-footer-brand-color, #b0b0b0)}.magicx-aia-footer-badge{display:inline-flex;align-items:center;height:var(--aia-footer-row-height, 23px);padding:2.5px 5.5px;border:.5px solid var(--aia-footer-badge-border, rgba(189, 189, 189, .51));border-radius:999px;font-family:inherit;font-size:10px;line-height:18px;color:var(--aia-footer-brand-color, #b0b0b0)}@media (max-width: 768px){.magicx-aia-footer-hint-group{display:none}.magicx-aia-footer-row{justify-content:flex-end}}.magicx-aia-dropdown-skeleton-bars{display:flex;flex-direction:column;gap:20px;padding:7px 8px;animation:aiaSkeletonBarsIn .1s ease-out}[data-aia-skeleton-exiting] .magicx-aia-dropdown-skeleton-bars{animation:aiaSkeletonBarsOut .1s ease-in forwards}@keyframes aiaSkeletonBarsOut{to{opacity:0}}@keyframes aiaSkeletonBarsIn{0%{opacity:0}}.magicx-aia-dropdown-skeleton-bar{display:block;height:14px;border-radius:999px;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));opacity:.5;animation:aiaDropdownSkeletonPulse 1.4s ease-in-out infinite}.magicx-aia-dropdown-skeleton-bar:nth-child(2){animation-delay:.15s}.magicx-aia-dropdown-skeleton-bar:nth-child(3){animation-delay:.3s}@keyframes aiaDropdownSkeletonPulse{0%,to{opacity:.5}50%{opacity:.25}}\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"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: PillListComponent, selector: "aia-pill-list", inputs: ["pills", "activePillIndex", "rounded", "loading", "activeSelected"], outputs: ["selectPill"] }, { kind: "component", type: ProductStripComponent, selector: "aia-product-strip", inputs: ["products", "listboxId", "focusable", "layout", "imageFallback", "strings", "addToCart"], outputs: ["select", "focusChange"] }, { kind: "component", type: SuggestionGridComponent, selector: "aia-suggestion-grid", inputs: ["options", "activeIndex", "listboxId", "loading", "groupKey", "optionsPosition", "showIcons", "showImages", "showCounts"], outputs: ["select", "highlight", "unhighlight"] }, { kind: "component", type: DateGridComponent, selector: "aia-date-grid", inputs: ["options", "activeIndex", "listboxId", "view", "selection"], outputs: ["select", "highlight", "unhighlight", "previousMonth", "nextMonth"] }, { kind: "component", type: StackComponent, selector: "aia-stack", inputs: ["space", "align"] }, { kind: "component", type: ClusterComponent, selector: "aia-cluster", inputs: ["gap", "align", "justify", "noWrap", "inline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1524
+ AIAutocompleteDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AIAutocompleteDropdownComponent, isStandalone: true, selector: "ai-autocomplete-dropdown", inputs: { controller: "controller", showPills: "showPills", showSkipButton: "showSkipButton", showOptionIcons: "showOptionIcons", showOptionImages: "showOptionImages", showOptionCounts: "showOptionCounts", productsLayout: "productsLayout", productImageFallback: "productImageFallback", className: "className", mode: "mode", language: "language" }, viewQueries: [{ propertyName: "dropdownRootRef", first: true, predicate: ["dropdownRoot"], descendants: true }, { propertyName: "scrollArrowRef", first: true, predicate: ["scrollArrow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"vm$ | async as vm\"\n #dropdownRoot\n [id]=\"controller.listboxId\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"!!vm.multiSelectView\"\n data-aia-dropdown=\"\"\n [attr.data-aia-loading]=\"vm.isLoading ? '' : null\"\n [attr.data-aia-skeleton-exiting]=\"vm.skeletonExiting ? '' : null\"\n [attr.data-mode]=\"resolvedMode\"\n [attr.data-options-position]=\"vm.optionsPosition\"\n [attr.data-aia-has-products]=\"vm.products.length > 0 ? '' : null\"\n [class]=\"rootClass\"\n [class.magicx-aia-dropdown-visible]=\"vm.isVisible\"\n (mousedown)=\"preventBlur($event)\"\n>\n <aia-stack space=\"8px\">\n <aia-cluster\n *ngIf=\"vm.showsPills || vm.showsSkip\"\n class=\"magicx-aia-dropdown-pillbar\"\n data-aia-pillbar=\"\"\n [noWrap]=\"true\"\n >\n <!-- The scroll + right-edge fade live on this wrapper (not the bar) so\n the skip button stays outside the masked region \u2014 pinned and fully\n opaque while overflowing pills fade under it. Absent in a skip-only\n row (pills rendered elsewhere via pillPlacement inline/hidden). -->\n <span *ngIf=\"vm.showsPills\" class=\"magicx-aia-pill-scroll\" data-aia-pill-scroll=\"\">\n <aia-pill-list\n [pills]=\"vm.pills\"\n [activePillIndex]=\"0\"\n [activeSelected]=\"vm.isActivePillSelected\"\n [rounded]=\"true\"\n [loading]=\"vm.isLoading\"\n (selectPill)=\"onPillClick($event)\"\n ></aia-pill-list>\n </span>\n <button\n *ngIf=\"vm.showsSkip\"\n type=\"button\"\n tabindex=\"-1\"\n class=\"magicx-aia-skip\"\n data-aia-skip=\"\"\n [disabled]=\"vm.skipDisabled\"\n [attr.aria-label]=\"\n vm.activePillLabel ? vm.strings.skipLabel + ' ' + vm.activePillLabel : vm.strings.skipLabel\n \"\n (click)=\"onSkip()\"\n >\n {{ vm.strings.skip }}\n </button>\n </aia-cluster>\n\n <aia-suggestion-grid\n *ngIf=\"vm.showsOptions\"\n [options]=\"vm.options\"\n [activeIndex]=\"vm.activeIndex\"\n [listboxId]=\"controller.listboxId\"\n [loading]=\"vm.isLoading\"\n [groupKey]=\"vm.groupKey\"\n [optionsPosition]=\"vm.optionsPosition\"\n [showIcons]=\"vm.showOptionIcons\"\n [showImages]=\"vm.showOptionImages\"\n [showCounts]=\"vm.showOptionCounts\"\n [picked]=\"!vm.isLoading ? vm.multiSelectView?.picked : undefined\"\n (select)=\"onSelect($event)\"\n (highlight)=\"onHighlight($event)\"\n (unhighlight)=\"onUnhighlight($event)\"\n ></aia-suggestion-grid>\n\n <div *ngIf=\"vm.multiSelectView && !vm.isLoading\" (click)=\"!vm.skipDisabled && controller.commitMultiSelect()\">\n <button type=\"button\" tabindex=\"-1\" disabled data-aia-multi-done=\"\" class=\"magicx-aia-multi-done\">{{ vm.strings.done }}</button>\n </div>\n\n <aia-date-grid\n *ngIf=\"vm.showsDateGrid\"\n [options]=\"vm.options\"\n [activeIndex]=\"vm.activeIndex\"\n [listboxId]=\"controller.listboxId\"\n [view]=\"vm.dateView\"\n [selection]=\"vm.dateSelection\"\n (select)=\"onSelect($event)\"\n (highlight)=\"onHighlight($event)\"\n (unhighlight)=\"onUnhighlight($event)\"\n (previousMonth)=\"onPreviousMonth()\"\n (nextMonth)=\"onNextMonth()\"\n ></aia-date-grid>\n\n <aia-time-wheel\n *ngIf=\"vm.showsTimeWheel\"\n [view]=\"vm.timeView\"\n [label]=\"vm.strings.timeLabel\"\n [doneLabel]=\"vm.strings.done\"\n [interactive]=\"!vm.skipDisabled\"\n (timeChange)=\"onTimeChange($event)\"\n (commit)=\"onTimeCommit()\"\n ></aia-time-wheel>\n\n <div\n *ngIf=\"vm.showsFallbackSkeleton\"\n class=\"magicx-aia-dropdown-skeleton-bars\"\n data-aia-skeleton-bars=\"\"\n >\n <span\n *ngFor=\"let w of fallbackSkeletonBarWidths; trackBy: trackByWidth\"\n class=\"magicx-aia-dropdown-skeleton-bar\"\n [style.width.px]=\"w\"\n ></span>\n </div>\n\n <!-- *ngIf, not just the section's own guard inside the component: the host\n element is an in-flow child of .aia-stack (display:flex; gap:8px), so\n an always-instantiated zero-height host would add a SECOND 8px gap\n between the grid and the footer \u2014 in every dropdown, products or not.\n The grid's --aia-grid-overlap-bottom is tuned for exactly one gap, so\n the footer would land 8px below the band it is meant to cover. -->\n <aia-product-strip\n *ngIf=\"vm.products.length > 0\"\n [products]=\"vm.products\"\n [listboxId]=\"controller.listboxId\"\n [focusable]=\"vm.isVisible\"\n [layout]=\"productsLayout\"\n [imageFallback]=\"productImageFallback\"\n [strings]=\"vm.strings\"\n [addToCart]=\"vm.hasProductAddToCart ? addProductToCart : null\"\n (select)=\"onProductSelect($event)\"\n (focusChange)=\"onProductFocusChange($event)\"\n ></aia-product-strip>\n\n <footer class=\"magicx-aia-footer\" data-aia-footer=\"\">\n <div class=\"magicx-aia-footer-row\">\n <span class=\"magicx-aia-footer-hint-group\">\n <kbd class=\"magicx-aia-footer-key\">{{ vm.footerKey }}</kbd>\n <span class=\"magicx-aia-footer-hint\">{{ vm.footerHint }}</span>\n </span>\n <a\n class=\"magicx-aia-footer-brand-link\"\n [href]=\"brandHref\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"magicx-aia-footer-brand\">AI</span>\n <span class=\"magicx-aia-footer-badge\">Autocomplete</span>\n </a>\n </div>\n </footer>\n </aia-stack>\n <!-- \"More below\" arrow \u2014 an overlay on the panel, not a section of the\n stack. Shown/positioned by the core's scroll-arrow controller (see\n syncScrollArrow); markup mirrors vanilla's createScrollArrowButton. -->\n <button\n #scrollArrow\n type=\"button\"\n tabindex=\"-1\"\n class=\"magicx-aia-scroll-arrow\"\n data-aia-scroll-arrow=\"\"\n [attr.aria-label]=\"scrollArrowLabel\"\n aria-hidden=\"true\"\n >\n <svg\n viewBox=\"0 0 16 16\"\n width=\"18\"\n height=\"18\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"M4 6.5 8 10.5l4-4\" />\n </svg>\n </button>\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){--aia-primitive-neutral-0: #000000;--aia-primitive-neutral-150: #1a1b1d;--aia-primitive-neutral-250: #323232;--aia-primitive-neutral-300: #333539;--aia-primitive-neutral-400: #4a4a4a;--aia-primitive-neutral-500: #505050;--aia-primitive-neutral-700: #b0b0b0;--aia-primitive-neutral-750: #bdbdbd;--aia-primitive-neutral-900: #e7e7e7;--aia-primitive-neutral-1000: #ffffff;--aia-primitive-blue-50: #eef2ff;--aia-primitive-neutral-750-a50: rgba(189, 189, 189, .51);--aia-primitive-neutral-750-a25: rgba(189, 189, 189, .25);--aia-primitive-neutral-750-a8: rgba(189, 189, 189, .083);--aia-primitive-neutral-750-a35: rgba(189, 189, 189, .35);--aia-primitive-neutral-750-a30: rgba(189, 189, 189, .3);--aia-primitive-neutral-750-a15: rgba(189, 189, 189, .15);--aia-primitive-neutral-750-a105: rgba(189, 189, 189, .105);--aia-primitive-neutral-700-a40: rgba(176, 176, 176, .4);--aia-primitive-neutral-900-a50: rgba(231, 231, 231, .5);--aia-primitive-neutral-400-a50: rgba(74, 74, 74, .5)}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-surface: var(--aia-primitive-neutral-1000);--aia-border: var(--aia-primitive-neutral-700);--aia-shadow: none;--aia-dropdown-border: var(--aia-primitive-neutral-900-a50);--aia-dropdown-shadow: none;--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-300);--aia-pill-font-size: 16px;--aia-smart-suggestion-accent: #b84549;--aia-smart-suggestion-glint: #f3c4c5;--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a105);--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);--aia-completed-pill-color: var(--aia-primitive-neutral-0);--aia-option-bg: var(--aia-primitive-blue-50);--aia-option-color: var(--aia-primitive-neutral-150);--aia-option-color-selected: var(--aia-primitive-neutral-0);--aia-option-font-size: 16px;--aia-written-text-color: var(--aia-primitive-neutral-0);--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: var(--aia-primitive-neutral-0);--aia-submit-color: var(--aia-primitive-neutral-1000);--aia-color-text-muted: #6b7280;--aia-skeleton-bg: var(--aia-primitive-neutral-750-a8);--aia-streak-rgb: 99, 102, 241;--aia-footer-hint-color: var(--aia-primitive-neutral-500);--aia-footer-brand-color: var(--aia-primitive-neutral-700);--aia-footer-badge-border: var(--aia-primitive-neutral-750-a50)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-surface: var(--aia-primitive-neutral-0);--aia-border: var(--aia-primitive-neutral-500);--aia-shadow: none;--aia-dropdown-border: var(--aia-primitive-neutral-400-a50);--aia-dropdown-shadow: none;--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-700);--aia-pill-font-size: 16px;--aia-smart-suggestion-accent: #e0787b;--aia-smart-suggestion-glint: #ffe1e1;--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a15);--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);--aia-completed-pill-color: var(--aia-primitive-neutral-1000);--aia-option-bg: var(--aia-primitive-neutral-250);--aia-option-color: var(--aia-primitive-neutral-900);--aia-option-color-selected: var(--aia-primitive-neutral-1000);--aia-option-font-size: 16px;--aia-written-text-color: var(--aia-primitive-neutral-1000);--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: var(--aia-primitive-neutral-1000);--aia-submit-color: var(--aia-primitive-neutral-0);--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: var(--aia-primitive-neutral-150);--aia-streak-rgb: 255, 255, 255;--aia-footer-hint-color: var(--aia-primitive-neutral-700);--aia-footer-brand-color: var(--aia-primitive-neutral-500);--aia-footer-badge-border: var(--aia-primitive-neutral-500)}[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] .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],[data-aia-dropdown][data-options-position=above]{--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}[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}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .aia-stack,[data-aia-dropdown][data-options-position=above] .aia-stack{flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer],[data-aia-dropdown][data-options-position=above] [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,[data-aia-dropdown][data-options-position=above] [data-aia-footer]:before{background:linear-gradient(to top,transparent,var(--aia-surface, #ffffff) var(--aia-footer-fade-lead, 20px))}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .magicx-aia-footer,[data-aia-dropdown][data-options-position=above] .magicx-aia-footer{flex-direction:column-reverse}@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}[data-aia-dropdown][aria-multiselectable=true]{--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}\n", ".magicx-aia-dropdown{position:absolute;left:0;right:0;top:100%;max-width:544px;margin-top:6px;display:flex;flex-direction:column;box-sizing:border-box;padding:10px 8px 10px max(0px,calc(var(--aia-content-inset-left, 16px) - 10px));overflow:hidden;container-type:inline-size;z-index:10;opacity:0;pointer-events:none;transform-origin:50% 0;transform:scaleY(var(--aia-dropdown-reveal-scale, .02));transition:opacity .4s cubic-bezier(.4,0,.2,1),transform 0s .4s;background:var(--aia-surface, #ffffff);border:1px solid var(--aia-dropdown-border, rgba(231, 231, 231, .5));border-radius:9px;box-shadow:var(--aia-dropdown-shadow, none)}.magicx-aia-dropdown:has([data-aia-datepicker]){max-width:var(--aia-date-panel-width, 312px)}.magicx-aia-dropdown:has([data-aia-time-wheel]){max-width:var(--aia-time-panel-width, 240px)}.magicx-aia-dropdown[data-aia-surface=glass]{background:transparent;border-color:transparent;box-shadow:#fff -3.2px -3.2px 3.2px -3.2px inset,#fff 6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) -6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) 6.4px -6.4px 1.6px -8px inset,#ffffff26 -1.6px 0 0 -1.6px inset,#ffffff26 0 -1.6px 0 -1.6px inset,#ffffff4d 0 1.6px inset,#ffffff4d 1.6px 0 inset,inset 0 0 30px 5px #0000000d;backdrop-filter:blur(30px)}.magicx-aia-dropdown-visible{opacity:1;pointer-events:auto;transform:scaleY(1);transition:opacity .1s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.22,1.28,.36,1)}.magicx-aia-scroll-arrow{position:absolute;left:50%;bottom:var(--aia-scroll-arrow-bottom, 8px);z-index:4;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 0 0 -16px;padding:0;border:0;border-radius:0;background:transparent;color:var( --aia-scroll-arrow-color, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)) );box-shadow:none;cursor:pointer;pointer-events:none;opacity:0;transition:opacity 1s cubic-bezier(.4,0,.2,1);animation:magicx-aia-scroll-arrow-bob 2.6s ease-in-out infinite}@keyframes magicx-aia-scroll-arrow-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.magicx-aia-scroll-arrow[data-aia-visible]{pointer-events:auto;opacity:1}.magicx-aia-scroll-arrow:disabled{cursor:default}.magicx-aia-scroll-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor}.magicx-aia-scroll-arrow svg path{fill:none;stroke:currentColor}.magicx-aia-scroll-arrow:hover{color:var( --aia-scroll-arrow-color-hover, var(--aia-option-color-selected, var(--aia-color-text-default, #fff)) )}@media (prefers-reduced-motion: reduce){.magicx-aia-scroll-arrow,.magicx-aia-dropdown{animation-duration:0s;animation-delay:0s;transition-duration:0s}}.magicx-aia-dropdown-pillbar{overflow:hidden}.magicx-aia-pill-scroll{display:inline-flex;align-items:center;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%)}.magicx-aia-pill-scroll::-webkit-scrollbar{display:none}.magicx-aia-skip{display:inline-flex;align-items:center;margin-inline-start:auto;flex-shrink:0;padding:5px 8px;border:none;border-radius:6px;background:transparent;font-family:inherit;font-size:var(--aia-skip-font-size, 10px);line-height:18px;color:var(--aia-skip-color, var(--aia-footer-hint-color, #505050));cursor:pointer;white-space:nowrap;transition:color .15s ease-out,background-color .15s ease-out}.magicx-aia-skip:hover{color:var(--aia-skip-color-hover, var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb)));background:var(--aia-skip-hover-bg, var(--aia-option-bg, transparent))}.magicx-aia-skip:disabled{pointer-events:none;cursor:default;opacity:.5}.magicx-aia-footer{display:flex;flex-direction:column;gap:8px;padding:var(--aia-footer-gap, 12px) 0 0 8px;position:relative;z-index:3;pointer-events:none}.magicx-aia-footer-row{display:flex;align-items:center;justify-content:space-between;min-height:var(--aia-footer-row-min-height, var(--aia-footer-row-height, 23px))}.magicx-aia-footer-hint-group{display:inline-flex;align-items:center;gap:5px}.magicx-aia-footer-hint-group,.magicx-aia-footer-brand-link{pointer-events:auto}.magicx-aia-footer-brand-link{display:inline-flex;align-items:center;gap:2px;text-decoration:none;cursor:pointer;transition:opacity .15s ease-out}.magicx-aia-footer-hint-group,.magicx-aia-footer-brand-link{background:var( --aia-footer-chip-bg, color-mix(in srgb, var(--aia-surface, #ffffff) 65%, transparent) );padding-inline:4px;border-radius:6px}.magicx-aia-footer-brand-link{background:var(--aia-footer-brand-pill-bg, var(--aia-surface, #ffffff));border-radius:999px;padding:2px 4px;gap:4px}.magicx-aia-footer-brand-link:hover{opacity:.7}.magicx-aia-footer-key{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:2px 6px;border:.5px solid var(--aia-footer-hint-color, #505050);border-radius:5px;font-family:inherit;font-size:11px;line-height:18px;color:var(--aia-footer-hint-color, #505050)}.magicx-aia-footer-hint{font-family:inherit;font-size:11px;line-height:18px;color:var(--aia-footer-hint-color, #505050)}.magicx-aia-footer-brand{font-family:inherit;font-size:10px;line-height:18px;color:var(--aia-footer-brand-color, #b0b0b0)}.magicx-aia-footer-badge{display:inline-flex;align-items:center;height:var(--aia-footer-row-height, 23px);padding:2.5px 5.5px;border:.5px solid var(--aia-footer-badge-border, rgba(189, 189, 189, .51));border-radius:999px;font-family:inherit;font-size:10px;line-height:18px;color:var(--aia-footer-brand-color, #b0b0b0)}@media (max-width: 768px){.magicx-aia-footer-hint-group{display:none}.magicx-aia-footer-row{justify-content:flex-end}}.magicx-aia-dropdown-skeleton-bars{display:flex;flex-direction:column;gap:20px;padding:7px 8px;animation:aiaSkeletonBarsIn .1s ease-out}[data-aia-skeleton-exiting] .magicx-aia-dropdown-skeleton-bars{animation:aiaSkeletonBarsOut .1s ease-in forwards}@keyframes aiaSkeletonBarsOut{to{opacity:0}}@keyframes aiaSkeletonBarsIn{0%{opacity:0}}.magicx-aia-dropdown-skeleton-bar{display:block;height:14px;border-radius:999px;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));opacity:.5;animation:aiaDropdownSkeletonPulse 1.4s ease-in-out infinite}.magicx-aia-dropdown-skeleton-bar:nth-child(2){animation-delay:.15s}.magicx-aia-dropdown-skeleton-bar:nth-child(3){animation-delay:.3s}@keyframes aiaDropdownSkeletonPulse{0%,to{opacity:.5}50%{opacity:.25}}.magicx-aia-multi-done{display:block;width:auto;margin-left:auto;height:32px;padding:0 18px;border:none;border-radius:999px;background:var(--aia-option-bg, transparent);color:var(--aia-option-color);font-family:inherit;font-size:15px;font-weight:inherit;cursor:pointer}\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"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: PillListComponent, selector: "aia-pill-list", inputs: ["pills", "activePillIndex", "rounded", "loading", "activeSelected"], outputs: ["selectPill"] }, { kind: "component", type: ProductStripComponent, selector: "aia-product-strip", inputs: ["products", "listboxId", "focusable", "layout", "imageFallback", "strings", "addToCart"], outputs: ["select", "focusChange"] }, { kind: "component", type: SuggestionGridComponent, selector: "aia-suggestion-grid", inputs: ["options", "picked", "activeIndex", "listboxId", "loading", "groupKey", "optionsPosition", "showIcons", "showImages", "showCounts"], outputs: ["select", "highlight", "unhighlight"] }, { kind: "component", type: DateGridComponent, selector: "aia-date-grid", inputs: ["options", "activeIndex", "listboxId", "view", "selection"], outputs: ["select", "highlight", "unhighlight", "previousMonth", "nextMonth"] }, { kind: "component", type: TimeWheelComponent, selector: "aia-time-wheel", inputs: ["view", "label", "doneLabel", "interactive"], outputs: ["timeChange", "commit"] }, { kind: "component", type: StackComponent, selector: "aia-stack", inputs: ["space", "align"] }, { kind: "component", type: ClusterComponent, selector: "aia-cluster", inputs: ["gap", "align", "justify", "noWrap", "inline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1356
1525
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteDropdownComponent, decorators: [{
1357
1526
  type: Component,
1358
1527
  args: [{ selector: "ai-autocomplete-dropdown", standalone: true, imports: [
@@ -1361,9 +1530,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
1361
1530
  ProductStripComponent,
1362
1531
  SuggestionGridComponent,
1363
1532
  DateGridComponent,
1533
+ TimeWheelComponent,
1364
1534
  StackComponent,
1365
1535
  ClusterComponent,
1366
- ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n *ngIf=\"vm$ | async as vm\"\n #dropdownRoot\n [id]=\"controller.listboxId\"\n role=\"listbox\"\n data-aia-dropdown=\"\"\n [attr.data-aia-loading]=\"vm.isLoading ? '' : null\"\n [attr.data-aia-skeleton-exiting]=\"vm.skeletonExiting ? '' : null\"\n [attr.data-mode]=\"resolvedMode\"\n [attr.data-options-position]=\"vm.optionsPosition\"\n [attr.data-aia-has-products]=\"vm.products.length > 0 ? '' : null\"\n [class]=\"rootClass\"\n [class.magicx-aia-dropdown-visible]=\"vm.isVisible\"\n (mousedown)=\"preventBlur($event)\"\n>\n <aia-stack space=\"8px\">\n <aia-cluster\n *ngIf=\"vm.showsPills || vm.showsSkip\"\n class=\"magicx-aia-dropdown-pillbar\"\n data-aia-pillbar=\"\"\n [noWrap]=\"true\"\n >\n <!-- The scroll + right-edge fade live on this wrapper (not the bar) so\n the skip button stays outside the masked region \u2014 pinned and fully\n opaque while overflowing pills fade under it. Absent in a skip-only\n row (pills rendered elsewhere via pillPlacement inline/hidden). -->\n <span *ngIf=\"vm.showsPills\" class=\"magicx-aia-pill-scroll\" data-aia-pill-scroll=\"\">\n <aia-pill-list\n [pills]=\"vm.pills\"\n [activePillIndex]=\"0\"\n [activeSelected]=\"vm.isActivePillSelected\"\n [rounded]=\"true\"\n [loading]=\"vm.isLoading\"\n (selectPill)=\"onPillClick($event)\"\n ></aia-pill-list>\n </span>\n <button\n *ngIf=\"vm.showsSkip\"\n type=\"button\"\n tabindex=\"-1\"\n class=\"magicx-aia-skip\"\n data-aia-skip=\"\"\n [disabled]=\"vm.skipDisabled\"\n [attr.aria-label]=\"\n vm.activePillLabel ? vm.strings.skipLabel + ' ' + vm.activePillLabel : vm.strings.skipLabel\n \"\n (click)=\"onSkip()\"\n >\n {{ vm.strings.skip }}\n </button>\n </aia-cluster>\n\n <aia-suggestion-grid\n *ngIf=\"vm.showsOptions\"\n [options]=\"vm.options\"\n [activeIndex]=\"vm.activeIndex\"\n [listboxId]=\"controller.listboxId\"\n [loading]=\"vm.isLoading\"\n [groupKey]=\"vm.groupKey\"\n [optionsPosition]=\"vm.optionsPosition\"\n [showIcons]=\"vm.showOptionIcons\"\n [showImages]=\"vm.showOptionImages\"\n [showCounts]=\"vm.showOptionCounts\"\n (select)=\"onSelect($event)\"\n (highlight)=\"onHighlight($event)\"\n (unhighlight)=\"onUnhighlight($event)\"\n ></aia-suggestion-grid>\n\n <aia-date-grid\n *ngIf=\"vm.showsDateGrid\"\n [options]=\"vm.options\"\n [activeIndex]=\"vm.activeIndex\"\n [listboxId]=\"controller.listboxId\"\n [view]=\"vm.dateView\"\n [selection]=\"vm.dateSelection\"\n (select)=\"onSelect($event)\"\n (highlight)=\"onHighlight($event)\"\n (unhighlight)=\"onUnhighlight($event)\"\n (previousMonth)=\"onPreviousMonth()\"\n (nextMonth)=\"onNextMonth()\"\n ></aia-date-grid>\n\n <div\n *ngIf=\"vm.showsFallbackSkeleton\"\n class=\"magicx-aia-dropdown-skeleton-bars\"\n data-aia-skeleton-bars=\"\"\n >\n <span\n *ngFor=\"let w of fallbackSkeletonBarWidths; trackBy: trackByWidth\"\n class=\"magicx-aia-dropdown-skeleton-bar\"\n [style.width.px]=\"w\"\n ></span>\n </div>\n\n <!-- *ngIf, not just the section's own guard inside the component: the host\n element is an in-flow child of .aia-stack (display:flex; gap:8px), so\n an always-instantiated zero-height host would add a SECOND 8px gap\n between the grid and the footer \u2014 in every dropdown, products or not.\n The grid's --aia-grid-overlap-bottom is tuned for exactly one gap, so\n the footer would land 8px below the band it is meant to cover. -->\n <aia-product-strip\n *ngIf=\"vm.products.length > 0\"\n [products]=\"vm.products\"\n [listboxId]=\"controller.listboxId\"\n [focusable]=\"vm.isVisible\"\n [layout]=\"productsLayout\"\n [imageFallback]=\"productImageFallback\"\n [strings]=\"vm.strings\"\n [addToCart]=\"vm.hasProductAddToCart ? addProductToCart : null\"\n (select)=\"onProductSelect($event)\"\n (focusChange)=\"onProductFocusChange($event)\"\n ></aia-product-strip>\n\n <footer class=\"magicx-aia-footer\" data-aia-footer=\"\">\n <div class=\"magicx-aia-footer-row\">\n <span class=\"magicx-aia-footer-hint-group\">\n <kbd class=\"magicx-aia-footer-key\">{{ vm.footerKey }}</kbd>\n <span class=\"magicx-aia-footer-hint\">{{ vm.footerHint }}</span>\n </span>\n <a\n class=\"magicx-aia-footer-brand-link\"\n [href]=\"brandHref\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"magicx-aia-footer-brand\">AI</span>\n <span class=\"magicx-aia-footer-badge\">Autocomplete</span>\n </a>\n </div>\n </footer>\n </aia-stack>\n <!-- \"More below\" arrow \u2014 an overlay on the panel, not a section of the\n stack. Shown/positioned by the core's scroll-arrow controller (see\n syncScrollArrow); markup mirrors vanilla's createScrollArrowButton. -->\n <button\n #scrollArrow\n type=\"button\"\n tabindex=\"-1\"\n class=\"magicx-aia-scroll-arrow\"\n data-aia-scroll-arrow=\"\"\n [attr.aria-label]=\"scrollArrowLabel\"\n aria-hidden=\"true\"\n >\n <svg\n viewBox=\"0 0 16 16\"\n width=\"18\"\n height=\"18\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"M4 6.5 8 10.5l4-4\" />\n </svg>\n </button>\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){--aia-primitive-neutral-0: #000000;--aia-primitive-neutral-150: #1a1b1d;--aia-primitive-neutral-250: #323232;--aia-primitive-neutral-300: #333539;--aia-primitive-neutral-400: #4a4a4a;--aia-primitive-neutral-500: #505050;--aia-primitive-neutral-700: #b0b0b0;--aia-primitive-neutral-750: #bdbdbd;--aia-primitive-neutral-900: #e7e7e7;--aia-primitive-neutral-1000: #ffffff;--aia-primitive-blue-50: #eef2ff;--aia-primitive-neutral-750-a50: rgba(189, 189, 189, .51);--aia-primitive-neutral-750-a25: rgba(189, 189, 189, .25);--aia-primitive-neutral-750-a8: rgba(189, 189, 189, .083);--aia-primitive-neutral-750-a35: rgba(189, 189, 189, .35);--aia-primitive-neutral-750-a30: rgba(189, 189, 189, .3);--aia-primitive-neutral-750-a15: rgba(189, 189, 189, .15);--aia-primitive-neutral-750-a105: rgba(189, 189, 189, .105);--aia-primitive-neutral-700-a40: rgba(176, 176, 176, .4);--aia-primitive-neutral-900-a50: rgba(231, 231, 231, .5);--aia-primitive-neutral-400-a50: rgba(74, 74, 74, .5)}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-surface: var(--aia-primitive-neutral-1000);--aia-border: var(--aia-primitive-neutral-700);--aia-shadow: none;--aia-dropdown-border: var(--aia-primitive-neutral-900-a50);--aia-dropdown-shadow: none;--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-300);--aia-pill-font-size: 16px;--aia-smart-suggestion-accent: #b84549;--aia-smart-suggestion-glint: #f3c4c5;--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a105);--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);--aia-completed-pill-color: var(--aia-primitive-neutral-0);--aia-option-bg: var(--aia-primitive-blue-50);--aia-option-color: var(--aia-primitive-neutral-150);--aia-option-color-selected: var(--aia-primitive-neutral-0);--aia-option-font-size: 16px;--aia-written-text-color: var(--aia-primitive-neutral-0);--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: var(--aia-primitive-neutral-0);--aia-submit-color: var(--aia-primitive-neutral-1000);--aia-color-text-muted: #6b7280;--aia-skeleton-bg: var(--aia-primitive-neutral-750-a8);--aia-streak-rgb: 99, 102, 241;--aia-footer-hint-color: var(--aia-primitive-neutral-500);--aia-footer-brand-color: var(--aia-primitive-neutral-700);--aia-footer-badge-border: var(--aia-primitive-neutral-750-a50)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-surface: var(--aia-primitive-neutral-0);--aia-border: var(--aia-primitive-neutral-500);--aia-shadow: none;--aia-dropdown-border: var(--aia-primitive-neutral-400-a50);--aia-dropdown-shadow: none;--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-700);--aia-pill-font-size: 16px;--aia-smart-suggestion-accent: #e0787b;--aia-smart-suggestion-glint: #ffe1e1;--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a15);--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);--aia-completed-pill-color: var(--aia-primitive-neutral-1000);--aia-option-bg: var(--aia-primitive-neutral-250);--aia-option-color: var(--aia-primitive-neutral-900);--aia-option-color-selected: var(--aia-primitive-neutral-1000);--aia-option-font-size: 16px;--aia-written-text-color: var(--aia-primitive-neutral-1000);--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: var(--aia-primitive-neutral-1000);--aia-submit-color: var(--aia-primitive-neutral-0);--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: var(--aia-primitive-neutral-150);--aia-streak-rgb: 255, 255, 255;--aia-footer-hint-color: var(--aia-primitive-neutral-700);--aia-footer-brand-color: var(--aia-primitive-neutral-500);--aia-footer-badge-border: var(--aia-primitive-neutral-500)}[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] .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],[data-aia-dropdown][data-options-position=above]{--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}[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}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .aia-stack,[data-aia-dropdown][data-options-position=above] .aia-stack{flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer],[data-aia-dropdown][data-options-position=above] [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,[data-aia-dropdown][data-options-position=above] [data-aia-footer]:before{background:linear-gradient(to top,transparent,var(--aia-surface, #ffffff) var(--aia-footer-fade-lead, 20px))}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .magicx-aia-footer,[data-aia-dropdown][data-options-position=above] .magicx-aia-footer{flex-direction:column-reverse}@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", ".magicx-aia-dropdown{position:absolute;left:0;right:0;top:100%;max-width:544px;margin-top:6px;display:flex;flex-direction:column;box-sizing:border-box;padding:10px 8px 10px max(0px,calc(var(--aia-content-inset-left, 16px) - 10px));overflow:hidden;container-type:inline-size;z-index:10;opacity:0;pointer-events:none;transform-origin:50% 0;transform:scaleY(var(--aia-dropdown-reveal-scale, .02));transition:opacity .4s cubic-bezier(.4,0,.2,1),transform 0s .4s;background:var(--aia-surface, #ffffff);border:1px solid var(--aia-dropdown-border, rgba(231, 231, 231, .5));border-radius:9px;box-shadow:var(--aia-dropdown-shadow, none)}.magicx-aia-dropdown:has([data-aia-datepicker]){max-width:var(--aia-date-panel-width, 312px)}.magicx-aia-dropdown[data-aia-surface=glass]{background:transparent;border-color:transparent;box-shadow:#fff -3.2px -3.2px 3.2px -3.2px inset,#fff 6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) -6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) 6.4px -6.4px 1.6px -8px inset,#ffffff26 -1.6px 0 0 -1.6px inset,#ffffff26 0 -1.6px 0 -1.6px inset,#ffffff4d 0 1.6px inset,#ffffff4d 1.6px 0 inset,inset 0 0 30px 5px #0000000d;backdrop-filter:blur(30px)}.magicx-aia-dropdown-visible{opacity:1;pointer-events:auto;transform:scaleY(1);transition:opacity .1s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.22,1.28,.36,1)}.magicx-aia-scroll-arrow{position:absolute;left:50%;bottom:var(--aia-scroll-arrow-bottom, 8px);z-index:4;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 0 0 -16px;padding:0;border:0;border-radius:0;background:transparent;color:var( --aia-scroll-arrow-color, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)) );box-shadow:none;cursor:pointer;pointer-events:none;opacity:0;transition:opacity 1s cubic-bezier(.4,0,.2,1);animation:magicx-aia-scroll-arrow-bob 2.6s ease-in-out infinite}@keyframes magicx-aia-scroll-arrow-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.magicx-aia-scroll-arrow[data-aia-visible]{pointer-events:auto;opacity:1}.magicx-aia-scroll-arrow:disabled{cursor:default}.magicx-aia-scroll-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor}.magicx-aia-scroll-arrow svg path{fill:none;stroke:currentColor}.magicx-aia-scroll-arrow:hover{color:var( --aia-scroll-arrow-color-hover, var(--aia-option-color-selected, var(--aia-color-text-default, #fff)) )}@media (prefers-reduced-motion: reduce){.magicx-aia-scroll-arrow,.magicx-aia-dropdown{animation-duration:0s;animation-delay:0s;transition-duration:0s}}.magicx-aia-dropdown-pillbar{overflow:hidden}.magicx-aia-pill-scroll{display:inline-flex;align-items:center;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%)}.magicx-aia-pill-scroll::-webkit-scrollbar{display:none}.magicx-aia-skip{display:inline-flex;align-items:center;margin-inline-start:auto;flex-shrink:0;padding:5px 8px;border:none;border-radius:6px;background:transparent;font-family:inherit;font-size:var(--aia-skip-font-size, 10px);line-height:18px;color:var(--aia-skip-color, var(--aia-footer-hint-color, #505050));cursor:pointer;white-space:nowrap;transition:color .15s ease-out,background-color .15s ease-out}.magicx-aia-skip:hover{color:var(--aia-skip-color-hover, var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb)));background:var(--aia-skip-hover-bg, var(--aia-option-bg, transparent))}.magicx-aia-skip:disabled{pointer-events:none;cursor:default;opacity:.5}.magicx-aia-footer{display:flex;flex-direction:column;gap:8px;padding:var(--aia-footer-gap, 12px) 0 0 8px;position:relative;z-index:3;pointer-events:none}.magicx-aia-footer-row{display:flex;align-items:center;justify-content:space-between;min-height:var(--aia-footer-row-min-height, var(--aia-footer-row-height, 23px))}.magicx-aia-footer-hint-group{display:inline-flex;align-items:center;gap:5px}.magicx-aia-footer-hint-group,.magicx-aia-footer-brand-link{pointer-events:auto}.magicx-aia-footer-brand-link{display:inline-flex;align-items:center;gap:2px;text-decoration:none;cursor:pointer;transition:opacity .15s ease-out}.magicx-aia-footer-hint-group,.magicx-aia-footer-brand-link{background:var( --aia-footer-chip-bg, color-mix(in srgb, var(--aia-surface, #ffffff) 65%, transparent) );padding-inline:4px;border-radius:6px}.magicx-aia-footer-brand-link{background:var(--aia-footer-brand-pill-bg, var(--aia-surface, #ffffff));border-radius:999px;padding:2px 4px;gap:4px}.magicx-aia-footer-brand-link:hover{opacity:.7}.magicx-aia-footer-key{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:2px 6px;border:.5px solid var(--aia-footer-hint-color, #505050);border-radius:5px;font-family:inherit;font-size:11px;line-height:18px;color:var(--aia-footer-hint-color, #505050)}.magicx-aia-footer-hint{font-family:inherit;font-size:11px;line-height:18px;color:var(--aia-footer-hint-color, #505050)}.magicx-aia-footer-brand{font-family:inherit;font-size:10px;line-height:18px;color:var(--aia-footer-brand-color, #b0b0b0)}.magicx-aia-footer-badge{display:inline-flex;align-items:center;height:var(--aia-footer-row-height, 23px);padding:2.5px 5.5px;border:.5px solid var(--aia-footer-badge-border, rgba(189, 189, 189, .51));border-radius:999px;font-family:inherit;font-size:10px;line-height:18px;color:var(--aia-footer-brand-color, #b0b0b0)}@media (max-width: 768px){.magicx-aia-footer-hint-group{display:none}.magicx-aia-footer-row{justify-content:flex-end}}.magicx-aia-dropdown-skeleton-bars{display:flex;flex-direction:column;gap:20px;padding:7px 8px;animation:aiaSkeletonBarsIn .1s ease-out}[data-aia-skeleton-exiting] .magicx-aia-dropdown-skeleton-bars{animation:aiaSkeletonBarsOut .1s ease-in forwards}@keyframes aiaSkeletonBarsOut{to{opacity:0}}@keyframes aiaSkeletonBarsIn{0%{opacity:0}}.magicx-aia-dropdown-skeleton-bar{display:block;height:14px;border-radius:999px;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));opacity:.5;animation:aiaDropdownSkeletonPulse 1.4s ease-in-out infinite}.magicx-aia-dropdown-skeleton-bar:nth-child(2){animation-delay:.15s}.magicx-aia-dropdown-skeleton-bar:nth-child(3){animation-delay:.3s}@keyframes aiaDropdownSkeletonPulse{0%,to{opacity:.5}50%{opacity:.25}}\n"] }]
1536
+ ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n *ngIf=\"vm$ | async as vm\"\n #dropdownRoot\n [id]=\"controller.listboxId\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"!!vm.multiSelectView\"\n data-aia-dropdown=\"\"\n [attr.data-aia-loading]=\"vm.isLoading ? '' : null\"\n [attr.data-aia-skeleton-exiting]=\"vm.skeletonExiting ? '' : null\"\n [attr.data-mode]=\"resolvedMode\"\n [attr.data-options-position]=\"vm.optionsPosition\"\n [attr.data-aia-has-products]=\"vm.products.length > 0 ? '' : null\"\n [class]=\"rootClass\"\n [class.magicx-aia-dropdown-visible]=\"vm.isVisible\"\n (mousedown)=\"preventBlur($event)\"\n>\n <aia-stack space=\"8px\">\n <aia-cluster\n *ngIf=\"vm.showsPills || vm.showsSkip\"\n class=\"magicx-aia-dropdown-pillbar\"\n data-aia-pillbar=\"\"\n [noWrap]=\"true\"\n >\n <!-- The scroll + right-edge fade live on this wrapper (not the bar) so\n the skip button stays outside the masked region \u2014 pinned and fully\n opaque while overflowing pills fade under it. Absent in a skip-only\n row (pills rendered elsewhere via pillPlacement inline/hidden). -->\n <span *ngIf=\"vm.showsPills\" class=\"magicx-aia-pill-scroll\" data-aia-pill-scroll=\"\">\n <aia-pill-list\n [pills]=\"vm.pills\"\n [activePillIndex]=\"0\"\n [activeSelected]=\"vm.isActivePillSelected\"\n [rounded]=\"true\"\n [loading]=\"vm.isLoading\"\n (selectPill)=\"onPillClick($event)\"\n ></aia-pill-list>\n </span>\n <button\n *ngIf=\"vm.showsSkip\"\n type=\"button\"\n tabindex=\"-1\"\n class=\"magicx-aia-skip\"\n data-aia-skip=\"\"\n [disabled]=\"vm.skipDisabled\"\n [attr.aria-label]=\"\n vm.activePillLabel ? vm.strings.skipLabel + ' ' + vm.activePillLabel : vm.strings.skipLabel\n \"\n (click)=\"onSkip()\"\n >\n {{ vm.strings.skip }}\n </button>\n </aia-cluster>\n\n <aia-suggestion-grid\n *ngIf=\"vm.showsOptions\"\n [options]=\"vm.options\"\n [activeIndex]=\"vm.activeIndex\"\n [listboxId]=\"controller.listboxId\"\n [loading]=\"vm.isLoading\"\n [groupKey]=\"vm.groupKey\"\n [optionsPosition]=\"vm.optionsPosition\"\n [showIcons]=\"vm.showOptionIcons\"\n [showImages]=\"vm.showOptionImages\"\n [showCounts]=\"vm.showOptionCounts\"\n [picked]=\"!vm.isLoading ? vm.multiSelectView?.picked : undefined\"\n (select)=\"onSelect($event)\"\n (highlight)=\"onHighlight($event)\"\n (unhighlight)=\"onUnhighlight($event)\"\n ></aia-suggestion-grid>\n\n <div *ngIf=\"vm.multiSelectView && !vm.isLoading\" (click)=\"!vm.skipDisabled && controller.commitMultiSelect()\">\n <button type=\"button\" tabindex=\"-1\" disabled data-aia-multi-done=\"\" class=\"magicx-aia-multi-done\">{{ vm.strings.done }}</button>\n </div>\n\n <aia-date-grid\n *ngIf=\"vm.showsDateGrid\"\n [options]=\"vm.options\"\n [activeIndex]=\"vm.activeIndex\"\n [listboxId]=\"controller.listboxId\"\n [view]=\"vm.dateView\"\n [selection]=\"vm.dateSelection\"\n (select)=\"onSelect($event)\"\n (highlight)=\"onHighlight($event)\"\n (unhighlight)=\"onUnhighlight($event)\"\n (previousMonth)=\"onPreviousMonth()\"\n (nextMonth)=\"onNextMonth()\"\n ></aia-date-grid>\n\n <aia-time-wheel\n *ngIf=\"vm.showsTimeWheel\"\n [view]=\"vm.timeView\"\n [label]=\"vm.strings.timeLabel\"\n [doneLabel]=\"vm.strings.done\"\n [interactive]=\"!vm.skipDisabled\"\n (timeChange)=\"onTimeChange($event)\"\n (commit)=\"onTimeCommit()\"\n ></aia-time-wheel>\n\n <div\n *ngIf=\"vm.showsFallbackSkeleton\"\n class=\"magicx-aia-dropdown-skeleton-bars\"\n data-aia-skeleton-bars=\"\"\n >\n <span\n *ngFor=\"let w of fallbackSkeletonBarWidths; trackBy: trackByWidth\"\n class=\"magicx-aia-dropdown-skeleton-bar\"\n [style.width.px]=\"w\"\n ></span>\n </div>\n\n <!-- *ngIf, not just the section's own guard inside the component: the host\n element is an in-flow child of .aia-stack (display:flex; gap:8px), so\n an always-instantiated zero-height host would add a SECOND 8px gap\n between the grid and the footer \u2014 in every dropdown, products or not.\n The grid's --aia-grid-overlap-bottom is tuned for exactly one gap, so\n the footer would land 8px below the band it is meant to cover. -->\n <aia-product-strip\n *ngIf=\"vm.products.length > 0\"\n [products]=\"vm.products\"\n [listboxId]=\"controller.listboxId\"\n [focusable]=\"vm.isVisible\"\n [layout]=\"productsLayout\"\n [imageFallback]=\"productImageFallback\"\n [strings]=\"vm.strings\"\n [addToCart]=\"vm.hasProductAddToCart ? addProductToCart : null\"\n (select)=\"onProductSelect($event)\"\n (focusChange)=\"onProductFocusChange($event)\"\n ></aia-product-strip>\n\n <footer class=\"magicx-aia-footer\" data-aia-footer=\"\">\n <div class=\"magicx-aia-footer-row\">\n <span class=\"magicx-aia-footer-hint-group\">\n <kbd class=\"magicx-aia-footer-key\">{{ vm.footerKey }}</kbd>\n <span class=\"magicx-aia-footer-hint\">{{ vm.footerHint }}</span>\n </span>\n <a\n class=\"magicx-aia-footer-brand-link\"\n [href]=\"brandHref\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"magicx-aia-footer-brand\">AI</span>\n <span class=\"magicx-aia-footer-badge\">Autocomplete</span>\n </a>\n </div>\n </footer>\n </aia-stack>\n <!-- \"More below\" arrow \u2014 an overlay on the panel, not a section of the\n stack. Shown/positioned by the core's scroll-arrow controller (see\n syncScrollArrow); markup mirrors vanilla's createScrollArrowButton. -->\n <button\n #scrollArrow\n type=\"button\"\n tabindex=\"-1\"\n class=\"magicx-aia-scroll-arrow\"\n data-aia-scroll-arrow=\"\"\n [attr.aria-label]=\"scrollArrowLabel\"\n aria-hidden=\"true\"\n >\n <svg\n viewBox=\"0 0 16 16\"\n width=\"18\"\n height=\"18\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"M4 6.5 8 10.5l4-4\" />\n </svg>\n </button>\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){--aia-primitive-neutral-0: #000000;--aia-primitive-neutral-150: #1a1b1d;--aia-primitive-neutral-250: #323232;--aia-primitive-neutral-300: #333539;--aia-primitive-neutral-400: #4a4a4a;--aia-primitive-neutral-500: #505050;--aia-primitive-neutral-700: #b0b0b0;--aia-primitive-neutral-750: #bdbdbd;--aia-primitive-neutral-900: #e7e7e7;--aia-primitive-neutral-1000: #ffffff;--aia-primitive-blue-50: #eef2ff;--aia-primitive-neutral-750-a50: rgba(189, 189, 189, .51);--aia-primitive-neutral-750-a25: rgba(189, 189, 189, .25);--aia-primitive-neutral-750-a8: rgba(189, 189, 189, .083);--aia-primitive-neutral-750-a35: rgba(189, 189, 189, .35);--aia-primitive-neutral-750-a30: rgba(189, 189, 189, .3);--aia-primitive-neutral-750-a15: rgba(189, 189, 189, .15);--aia-primitive-neutral-750-a105: rgba(189, 189, 189, .105);--aia-primitive-neutral-700-a40: rgba(176, 176, 176, .4);--aia-primitive-neutral-900-a50: rgba(231, 231, 231, .5);--aia-primitive-neutral-400-a50: rgba(74, 74, 74, .5)}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-surface: var(--aia-primitive-neutral-1000);--aia-border: var(--aia-primitive-neutral-700);--aia-shadow: none;--aia-dropdown-border: var(--aia-primitive-neutral-900-a50);--aia-dropdown-shadow: none;--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-300);--aia-pill-font-size: 16px;--aia-smart-suggestion-accent: #b84549;--aia-smart-suggestion-glint: #f3c4c5;--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a105);--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);--aia-completed-pill-color: var(--aia-primitive-neutral-0);--aia-option-bg: var(--aia-primitive-blue-50);--aia-option-color: var(--aia-primitive-neutral-150);--aia-option-color-selected: var(--aia-primitive-neutral-0);--aia-option-font-size: 16px;--aia-written-text-color: var(--aia-primitive-neutral-0);--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: var(--aia-primitive-neutral-0);--aia-submit-color: var(--aia-primitive-neutral-1000);--aia-color-text-muted: #6b7280;--aia-skeleton-bg: var(--aia-primitive-neutral-750-a8);--aia-streak-rgb: 99, 102, 241;--aia-footer-hint-color: var(--aia-primitive-neutral-500);--aia-footer-brand-color: var(--aia-primitive-neutral-700);--aia-footer-badge-border: var(--aia-primitive-neutral-750-a50)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-surface: var(--aia-primitive-neutral-0);--aia-border: var(--aia-primitive-neutral-500);--aia-shadow: none;--aia-dropdown-border: var(--aia-primitive-neutral-400-a50);--aia-dropdown-shadow: none;--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-700);--aia-pill-font-size: 16px;--aia-smart-suggestion-accent: #e0787b;--aia-smart-suggestion-glint: #ffe1e1;--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a15);--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);--aia-completed-pill-color: var(--aia-primitive-neutral-1000);--aia-option-bg: var(--aia-primitive-neutral-250);--aia-option-color: var(--aia-primitive-neutral-900);--aia-option-color-selected: var(--aia-primitive-neutral-1000);--aia-option-font-size: 16px;--aia-written-text-color: var(--aia-primitive-neutral-1000);--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: var(--aia-primitive-neutral-1000);--aia-submit-color: var(--aia-primitive-neutral-0);--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: var(--aia-primitive-neutral-150);--aia-streak-rgb: 255, 255, 255;--aia-footer-hint-color: var(--aia-primitive-neutral-700);--aia-footer-brand-color: var(--aia-primitive-neutral-500);--aia-footer-badge-border: var(--aia-primitive-neutral-500)}[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] .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],[data-aia-dropdown][data-options-position=above]{--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}[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}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .aia-stack,[data-aia-dropdown][data-options-position=above] .aia-stack{flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer],[data-aia-dropdown][data-options-position=above] [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,[data-aia-dropdown][data-options-position=above] [data-aia-footer]:before{background:linear-gradient(to top,transparent,var(--aia-surface, #ffffff) var(--aia-footer-fade-lead, 20px))}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .magicx-aia-footer,[data-aia-dropdown][data-options-position=above] .magicx-aia-footer{flex-direction:column-reverse}@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}[data-aia-dropdown][aria-multiselectable=true]{--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}\n", ".magicx-aia-dropdown{position:absolute;left:0;right:0;top:100%;max-width:544px;margin-top:6px;display:flex;flex-direction:column;box-sizing:border-box;padding:10px 8px 10px max(0px,calc(var(--aia-content-inset-left, 16px) - 10px));overflow:hidden;container-type:inline-size;z-index:10;opacity:0;pointer-events:none;transform-origin:50% 0;transform:scaleY(var(--aia-dropdown-reveal-scale, .02));transition:opacity .4s cubic-bezier(.4,0,.2,1),transform 0s .4s;background:var(--aia-surface, #ffffff);border:1px solid var(--aia-dropdown-border, rgba(231, 231, 231, .5));border-radius:9px;box-shadow:var(--aia-dropdown-shadow, none)}.magicx-aia-dropdown:has([data-aia-datepicker]){max-width:var(--aia-date-panel-width, 312px)}.magicx-aia-dropdown:has([data-aia-time-wheel]){max-width:var(--aia-time-panel-width, 240px)}.magicx-aia-dropdown[data-aia-surface=glass]{background:transparent;border-color:transparent;box-shadow:#fff -3.2px -3.2px 3.2px -3.2px inset,#fff 6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) -6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) 6.4px -6.4px 1.6px -8px inset,#ffffff26 -1.6px 0 0 -1.6px inset,#ffffff26 0 -1.6px 0 -1.6px inset,#ffffff4d 0 1.6px inset,#ffffff4d 1.6px 0 inset,inset 0 0 30px 5px #0000000d;backdrop-filter:blur(30px)}.magicx-aia-dropdown-visible{opacity:1;pointer-events:auto;transform:scaleY(1);transition:opacity .1s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.22,1.28,.36,1)}.magicx-aia-scroll-arrow{position:absolute;left:50%;bottom:var(--aia-scroll-arrow-bottom, 8px);z-index:4;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 0 0 -16px;padding:0;border:0;border-radius:0;background:transparent;color:var( --aia-scroll-arrow-color, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)) );box-shadow:none;cursor:pointer;pointer-events:none;opacity:0;transition:opacity 1s cubic-bezier(.4,0,.2,1);animation:magicx-aia-scroll-arrow-bob 2.6s ease-in-out infinite}@keyframes magicx-aia-scroll-arrow-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.magicx-aia-scroll-arrow[data-aia-visible]{pointer-events:auto;opacity:1}.magicx-aia-scroll-arrow:disabled{cursor:default}.magicx-aia-scroll-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor}.magicx-aia-scroll-arrow svg path{fill:none;stroke:currentColor}.magicx-aia-scroll-arrow:hover{color:var( --aia-scroll-arrow-color-hover, var(--aia-option-color-selected, var(--aia-color-text-default, #fff)) )}@media (prefers-reduced-motion: reduce){.magicx-aia-scroll-arrow,.magicx-aia-dropdown{animation-duration:0s;animation-delay:0s;transition-duration:0s}}.magicx-aia-dropdown-pillbar{overflow:hidden}.magicx-aia-pill-scroll{display:inline-flex;align-items:center;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%)}.magicx-aia-pill-scroll::-webkit-scrollbar{display:none}.magicx-aia-skip{display:inline-flex;align-items:center;margin-inline-start:auto;flex-shrink:0;padding:5px 8px;border:none;border-radius:6px;background:transparent;font-family:inherit;font-size:var(--aia-skip-font-size, 10px);line-height:18px;color:var(--aia-skip-color, var(--aia-footer-hint-color, #505050));cursor:pointer;white-space:nowrap;transition:color .15s ease-out,background-color .15s ease-out}.magicx-aia-skip:hover{color:var(--aia-skip-color-hover, var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb)));background:var(--aia-skip-hover-bg, var(--aia-option-bg, transparent))}.magicx-aia-skip:disabled{pointer-events:none;cursor:default;opacity:.5}.magicx-aia-footer{display:flex;flex-direction:column;gap:8px;padding:var(--aia-footer-gap, 12px) 0 0 8px;position:relative;z-index:3;pointer-events:none}.magicx-aia-footer-row{display:flex;align-items:center;justify-content:space-between;min-height:var(--aia-footer-row-min-height, var(--aia-footer-row-height, 23px))}.magicx-aia-footer-hint-group{display:inline-flex;align-items:center;gap:5px}.magicx-aia-footer-hint-group,.magicx-aia-footer-brand-link{pointer-events:auto}.magicx-aia-footer-brand-link{display:inline-flex;align-items:center;gap:2px;text-decoration:none;cursor:pointer;transition:opacity .15s ease-out}.magicx-aia-footer-hint-group,.magicx-aia-footer-brand-link{background:var( --aia-footer-chip-bg, color-mix(in srgb, var(--aia-surface, #ffffff) 65%, transparent) );padding-inline:4px;border-radius:6px}.magicx-aia-footer-brand-link{background:var(--aia-footer-brand-pill-bg, var(--aia-surface, #ffffff));border-radius:999px;padding:2px 4px;gap:4px}.magicx-aia-footer-brand-link:hover{opacity:.7}.magicx-aia-footer-key{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:2px 6px;border:.5px solid var(--aia-footer-hint-color, #505050);border-radius:5px;font-family:inherit;font-size:11px;line-height:18px;color:var(--aia-footer-hint-color, #505050)}.magicx-aia-footer-hint{font-family:inherit;font-size:11px;line-height:18px;color:var(--aia-footer-hint-color, #505050)}.magicx-aia-footer-brand{font-family:inherit;font-size:10px;line-height:18px;color:var(--aia-footer-brand-color, #b0b0b0)}.magicx-aia-footer-badge{display:inline-flex;align-items:center;height:var(--aia-footer-row-height, 23px);padding:2.5px 5.5px;border:.5px solid var(--aia-footer-badge-border, rgba(189, 189, 189, .51));border-radius:999px;font-family:inherit;font-size:10px;line-height:18px;color:var(--aia-footer-brand-color, #b0b0b0)}@media (max-width: 768px){.magicx-aia-footer-hint-group{display:none}.magicx-aia-footer-row{justify-content:flex-end}}.magicx-aia-dropdown-skeleton-bars{display:flex;flex-direction:column;gap:20px;padding:7px 8px;animation:aiaSkeletonBarsIn .1s ease-out}[data-aia-skeleton-exiting] .magicx-aia-dropdown-skeleton-bars{animation:aiaSkeletonBarsOut .1s ease-in forwards}@keyframes aiaSkeletonBarsOut{to{opacity:0}}@keyframes aiaSkeletonBarsIn{0%{opacity:0}}.magicx-aia-dropdown-skeleton-bar{display:block;height:14px;border-radius:999px;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));opacity:.5;animation:aiaDropdownSkeletonPulse 1.4s ease-in-out infinite}.magicx-aia-dropdown-skeleton-bar:nth-child(2){animation-delay:.15s}.magicx-aia-dropdown-skeleton-bar:nth-child(3){animation-delay:.3s}@keyframes aiaDropdownSkeletonPulse{0%,to{opacity:.5}50%{opacity:.25}}.magicx-aia-multi-done{display:block;width:auto;margin-left:auto;height:32px;padding:0 18px;border:none;border-radius:999px;background:var(--aia-option-bg, transparent);color:var(--aia-option-color);font-family:inherit;font-size:15px;font-weight:inherit;cursor:pointer}\n"] }]
1367
1537
  }], propDecorators: { controller: [{
1368
1538
  type: Input
1369
1539
  }], showPills: [{
@@ -1740,6 +1910,31 @@ class AIAutocompleteController {
1740
1910
  return;
1741
1911
  this.core.showNextMonth();
1742
1912
  }
1913
+ /**
1914
+ * Turn the time wheel to `minutes` past midnight, snapped to its 5-minute
1915
+ * step. Commits nothing. No-op unless a time pill is active.
1916
+ */
1917
+ setTime(minutes) {
1918
+ if (this.isDestroyed)
1919
+ return;
1920
+ this.core.setTime(minutes);
1921
+ }
1922
+ /** Answer the active time pill with the time on the wheel. No-op unless a time pill is active. */
1923
+ toggleMultiSelectOption(option) {
1924
+ if (this.destroyed)
1925
+ return;
1926
+ this.core.toggleMultiSelectOption(option);
1927
+ }
1928
+ commitMultiSelect() {
1929
+ if (this.destroyed)
1930
+ return;
1931
+ this.core.commitMultiSelect();
1932
+ }
1933
+ commitTime() {
1934
+ if (this.isDestroyed)
1935
+ return;
1936
+ this.core.commitTime();
1937
+ }
1743
1938
  /**
1744
1939
  * Runs mapProducts synchronously on the shown items again without a request.
1745
1940
  * Keeps the same cards while updating their content.
@@ -1880,6 +2075,10 @@ function computeDropdown(s, optionsPosition, hasProductAddToCart) {
1880
2075
  selectedDateIso: dateSelection.selectedIso,
1881
2076
  selectedDateRange: dateSelection.selectedRange,
1882
2077
  dateRangeStart: dateSelection.rangeStart,
2078
+ // Time wheel. As for a calendar, `s.filteredOptions` is empty — the wheel
2079
+ // is drawn from `timeView`, not from the suggestion's options.
2080
+ timeView: s.timeView,
2081
+ multiSelectView: s.multiSelectView,
1883
2082
  optionsPosition,
1884
2083
  hasProductAddToCart,
1885
2084
  };
@@ -2661,7 +2860,7 @@ AIAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
2661
2860
  useExisting: forwardRef(() => AIAutocompleteComponent),
2662
2861
  multi: true,
2663
2862
  },
2664
- ], 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 });
2863
+ ], 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}[data-aia-dropdown][aria-multiselectable=true]{--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}\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 });
2665
2864
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteComponent, decorators: [{
2666
2865
  type: Component,
2667
2866
  args: [{ selector: "ai-autocomplete", standalone: true, imports: [
@@ -2677,7 +2876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
2677
2876
  useExisting: forwardRef(() => AIAutocompleteComponent),
2678
2877
  multi: true,
2679
2878
  },
2680
- ], 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"] }]
2879
+ ], 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}[data-aia-dropdown][aria-multiselectable=true]{--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}\n"] }]
2681
2880
  }], propDecorators: { apiConfig: [{
2682
2881
  type: Input
2683
2882
  }], additionalContext: [{
@@ -3101,6 +3300,11 @@ const formatDateRange = formatDateRange$1;
3101
3300
  const parseLooseDateRange = parseLooseDateRange$1;
3102
3301
  const selectedRangeFor = selectedRangeFor$1;
3103
3302
  const visibleDateRange = visibleDateRange$1;
3303
+ // Time helpers: the written form a committed time takes, reading it back, and
3304
+ // the metadata key the exact 24-hour time is recorded under.
3305
+ const formatTime = formatTime$1;
3306
+ const parseTime = parseTime$1;
3307
+ const TIME_META_KEY = TIME_META_KEY$1;
3104
3308
  // Option icons, for a custom dropdown that draws `icon_svg` itself.
3105
3309
  const optionLabel = optionLabel$1;
3106
3310
  const sanitizeOptionIconSvg = sanitizeOptionIconSvg$1;
@@ -3123,5 +3327,5 @@ const productsFromCustomFields = productsFromCustomFields$1;
3123
3327
  * Generated bundle index. Do not edit.
3124
3328
  */
3125
3329
 
3126
- export { AIAutocompleteComponent, AIAutocompleteController, AIAutocompleteDropdownComponent, AIAutocompleteInputDirective, AIAutocompleteModule, DATE_RANGE_META_END, DATE_RANGE_META_START, DEFAULT_OPTION_COUNT_UNIT, PRODUCT_PATH_PREFIX, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, dateCellMarks, formatDate, formatDateRange, formatOptionCount, isoDate, monthLabel, optionCountLabel, optionHasImage, optionImageSources, optionImageSrc, optionLabel, optionsShowLeadingVisuals, parseDate, parseLooseDate, parseLooseDateRange, productFromMatchedItem, productImageSources, productsFromCustomFields, sanitizeOptionIconSvg, selectedRangeFor, visibleDateRange, withSkippedParams };
3330
+ export { AIAutocompleteComponent, AIAutocompleteController, AIAutocompleteDropdownComponent, AIAutocompleteInputDirective, AIAutocompleteModule, DATE_RANGE_META_END, DATE_RANGE_META_START, DEFAULT_OPTION_COUNT_UNIT, PRODUCT_PATH_PREFIX, TIME_META_KEY, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, dateCellMarks, formatDate, formatDateRange, formatOptionCount, formatTime, isoDate, monthLabel, optionCountLabel, optionHasImage, optionImageSources, optionImageSrc, optionLabel, optionsShowLeadingVisuals, parseDate, parseLooseDate, parseLooseDateRange, parseTime, productFromMatchedItem, productImageSources, productsFromCustomFields, sanitizeOptionIconSvg, selectedRangeFor, visibleDateRange, withSkippedParams };
3127
3331
  //# sourceMappingURL=magicx-eng-ai-autocomplete-angular.mjs.map