@magicx-eng/ai-autocomplete-angular 0.14.0 → 0.16.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 (22) hide show
  1. package/README.md +43 -10
  2. package/esm2020/lib/ai-autocomplete-dropdown/ai-autocomplete-dropdown.component.mjs +10 -6
  3. package/esm2020/lib/controller/ai-autocomplete.controller.mjs +13 -6
  4. package/esm2020/lib/internal/date-grid/date-grid.component.mjs +35 -11
  5. package/esm2020/lib/internal/suggestion-item/suggestion-item.component.mjs +5 -5
  6. package/esm2020/lib/shared/types.mjs +1 -1
  7. package/esm2020/public-api.mjs +12 -2
  8. package/fesm2015/magicx-eng-ai-autocomplete-angular.mjs +72 -27
  9. package/fesm2015/magicx-eng-ai-autocomplete-angular.mjs.map +1 -1
  10. package/fesm2020/magicx-eng-ai-autocomplete-angular.mjs +68 -23
  11. package/fesm2020/magicx-eng-ai-autocomplete-angular.mjs.map +1 -1
  12. package/lib/ai-autocomplete-dropdown/ai-autocomplete-dropdown.component.d.ts +3 -3
  13. package/lib/ai-autocomplete-dropdown/ai-autocomplete-dropdown.component.d.ts.map +1 -1
  14. package/lib/controller/ai-autocomplete.controller.d.ts.map +1 -1
  15. package/lib/internal/date-grid/date-grid.component.d.ts +16 -5
  16. package/lib/internal/date-grid/date-grid.component.d.ts.map +1 -1
  17. package/lib/internal/suggestion-item/suggestion-item.component.d.ts +1 -1
  18. package/lib/shared/types.d.ts +19 -8
  19. package/lib/shared/types.d.ts.map +1 -1
  20. package/package.json +2 -2
  21. package/public-api.d.ts +9 -2
  22. package/public-api.d.ts.map +1 -1
package/fesm2020/magicx-eng-ai-autocomplete-angular.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { WEEKDAY_LABELS as WEEKDAY_LABELS$1, cellIso as cellIso$1, monthLabel as monthLabel$1, cellDay as cellDay$1, isoDate as isoDate$1, optionsGridTemplateColumns, planOptionsGrid, isOptionsGridMobileViewport, needsOptionsGridMeasurement, measureOptionsGrid, optionEnterDelayMs, SCROLL_ARROW_LABEL, buildAttributionUrl, attachScrollArrow, getFooterHint, AIAutocomplete, identifiedParamLabel, selectedIsoFromText, getCursorOffset, extractPlainText, renderEditableContent, plainTextLength, setCursorOffset, ModeController, buildSubmitResult as buildSubmitResult$1, withSkippedParams as withSkippedParams$1, formatDate as formatDate$1, parseDate as parseDate$1, parseLooseDate as parseLooseDate$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, optionsGridTemplateColumns, planOptionsGrid, isOptionsGridMobileViewport, needsOptionsGridMeasurement, measureOptionsGrid, optionEnterDelayMs, SCROLL_ARROW_LABEL, buildAttributionUrl, attachScrollArrow, isCalendarFormat, getFooterHint, AIAutocomplete, dateSelectionFor, identifiedParamLabel, getCursorOffset, extractPlainText, renderEditableContent, plainTextLength, setCursorOffset, ModeController, buildSubmitResult as buildSubmitResult$1, withSkippedParams as withSkippedParams$1, formatDate as formatDate$1, parseDate as parseDate$1, parseLooseDate as parseLooseDate$1, DATE_RANGE_META_END as DATE_RANGE_META_END$1, DATE_RANGE_META_START as DATE_RANGE_META_START$1, formatDateRange as formatDateRange$1, parseLooseDateRange as parseLooseDateRange$1, selectedRangeFor as selectedRangeFor$1 } from '@magicx-eng/ai-autocomplete-vanilla';
2
2
  import * as i1 from '@angular/common';
3
3
  import { CommonModule, isPlatformBrowser } from '@angular/common';
4
4
  import * as i0 from '@angular/core';
@@ -29,14 +29,14 @@ class DateGridComponent {
29
29
  this.activeIndex = -1;
30
30
  this.listboxId = "";
31
31
  this.view = null;
32
- /** `YYYY-MM-DD` the param being re-edited already holds, or null. */
33
- this.selectedIso = null;
32
+ /** What the calendar paints as answered — see the core's `dateSelectionFor`. */
33
+ this.selection = { selectedIso: null, selectedRange: null, rangeStart: null };
34
34
  this.select = new EventEmitter();
35
35
  this.highlight = new EventEmitter();
36
36
  this.previousMonth = new EventEmitter();
37
37
  this.nextMonth = new EventEmitter();
38
38
  this.weekdays = WEEKDAY_LABELS$1;
39
- /** Index of the cell showing a 500ms press animation, or -1. */
39
+ /** Index of the cell showing a 170ms press animation, or -1. */
40
40
  this.pressedIndex = -1;
41
41
  // Padding cells have no date of their own, so they key off position.
42
42
  this.trackByCell = (index, option) => cellIso$1(option) ?? `pad-${index}`;
@@ -57,15 +57,39 @@ class DateGridComponent {
57
57
  return iso != null && iso < isoDate$1(new Date());
58
58
  }
59
59
  isSelected(option) {
60
- const iso = cellIso$1(option);
61
- return iso != null && this.selectedIso != null && iso === this.selectedIso;
60
+ return dateCellMarks$1(cellIso$1(option), {
61
+ selectedIso: this.selection.selectedIso,
62
+ range: this.paintedRange,
63
+ }).selected;
64
+ }
65
+ /** Between the two ends of the painted span — banded, not filled. */
66
+ isInRange(option) {
67
+ return dateCellMarks$1(cellIso$1(option), {
68
+ selectedIso: this.selection.selectedIso,
69
+ range: this.paintedRange,
70
+ }).inRange;
71
+ }
72
+ /**
73
+ * While a start is pending, the span runs to whatever cell is highlighted —
74
+ * the hover/arrow preview that tells the user the first tap registered.
75
+ *
76
+ * A getter rather than a cached field: `OnPush` re-runs the template's
77
+ * bindings whenever `options`, `activeIndex` or `selection` changes, and each
78
+ * of those changes this answer.
79
+ */
80
+ get paintedRange() {
81
+ return visibleDateRange$1({
82
+ pendingStart: this.selection.rangeStart,
83
+ highlightedIso: cellIso$1(this.options[this.activeIndex]),
84
+ selected: this.selection.selectedRange,
85
+ });
62
86
  }
63
87
  onSelect(option, index) {
64
88
  this.pressedIndex = index;
65
89
  this.select.emit(option);
66
90
  setTimeout(() => {
67
91
  this.pressedIndex = -1;
68
- }, 500);
92
+ }, 170);
69
93
  }
70
94
  onKeyDown(event, option, index) {
71
95
  if (event.key === "Enter" || event.key === " ") {
@@ -79,10 +103,10 @@ class DateGridComponent {
79
103
  }
80
104
  }
81
105
  DateGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
82
- DateGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateGridComponent, isStandalone: true, selector: "aia-date-grid", inputs: { options: "options", activeIndex: "activeIndex", listboxId: "listboxId", view: "view", selectedIso: "selectedIso" }, outputs: { select: "select", highlight: "highlight", previousMonth: "previousMonth", nextMonth: "nextMonth" }, ngImport: i0, template: "<div class=\"magicx-aia-datepicker\" data-aia-datepicker=\"\">\n <div class=\"magicx-aia-datepicker-header\">\n <!-- tabIndex -1 for the same reason the skip button is: Tab is already\n bound to walking the dropdown's options. -->\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"magicx-aia-datepicker-nav\"\n data-aia-date-prev=\"\"\n aria-label=\"Previous month\"\n (mousedown)=\"preventBlur($event)\"\n (click)=\"previousMonth.emit()\"\n >\n &lsaquo;\n </button>\n <span class=\"magicx-aia-datepicker-month\" data-aia-date-month=\"\" aria-live=\"polite\">\n {{ monthLabel }}\n </span>\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"magicx-aia-datepicker-nav\"\n data-aia-date-next=\"\"\n aria-label=\"Next month\"\n (mousedown)=\"preventBlur($event)\"\n (click)=\"nextMonth.emit()\"\n >\n &rsaquo;\n </button>\n </div>\n\n <!-- Decorative: each cell announces its own full date, so repeating the\n column letters to AT adds noise \u2014 and the duplicate T/S would be\n meaningless read aloud anyway. -->\n <div class=\"magicx-aia-datepicker-weekdays\" aria-hidden=\"true\">\n <span class=\"magicx-aia-datepicker-weekday\" *ngFor=\"let label of weekdays\">{{ label }}</span>\n </div>\n\n <div class=\"magicx-aia-datepicker-grid\" data-aia-date-grid=\"\">\n <ng-container *ngFor=\"let option of options; trackBy: trackByCell; let i = index\">\n <!-- Padding for the days before the 1st / after the last. Non-tappable,\n so arrow navigation skips it; hidden from AT so the month reads as\n its own days and nothing else. -->\n <div\n *ngIf=\"dayOf(option) === null; else dayCell\"\n [id]=\"listboxId + '-option-' + i\"\n role=\"option\"\n data-aia-option=\"\"\n data-aia-date-cell=\"\"\n aria-hidden=\"true\"\n [attr.aria-selected]=\"false\"\n tabindex=\"-1\"\n class=\"magicx-aia-date-cell magicx-aia-date-cell--blank\"\n ></div>\n\n <ng-template #dayCell>\n <!-- A day already gone by is de-emphasized, not disabled: it renders\n dimmed but stays every bit as pickable as the rest of the month. -->\n <div\n [id]=\"listboxId + '-option-' + i\"\n role=\"option\"\n data-aia-option=\"\"\n data-aia-date-cell=\"\"\n [attr.aria-selected]=\"i === activeIndex\"\n [attr.aria-label]=\"option.text\"\n tabindex=\"0\"\n class=\"magicx-aia-date-cell magicx-aia-date-cell--day\"\n [class.magicx-aia-date-cell--past]=\"isPast(option)\"\n [class.magicx-aia-date-cell--highlighted]=\"i === activeIndex\"\n [class.magicx-aia-date-cell--today]=\"isToday(option)\"\n [class.magicx-aia-date-cell--selected]=\"isSelected(option)\"\n [class.magicx-aia-date-cell--pressed]=\"i === pressedIndex\"\n (click)=\"onSelect(option, i)\"\n (keydown)=\"onKeyDown($event, option, i)\"\n (mouseenter)=\"highlight.emit(i)\"\n >\n <!-- The cell paints the day number; `option.text` is the full\n committed value (\"March 23 2026\") and is what AT announces,\n since that is what selecting it puts in the input. -->\n <span class=\"magicx-aia-date-cell-number\">{{ dayOf(option) }}</span>\n </div>\n </ng-template>\n </ng-container>\n </div>\n</div>\n", styles: [".magicx-aia-datepicker{display:flex;flex-direction:column;gap:4px;padding:4px 2px}.magicx-aia-datepicker-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 6px}.magicx-aia-datepicker-month{font-family:inherit;font-size:var(--aia-date-month-font-size, 14px);font-weight:500;line-height:20px;color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.magicx-aia-datepicker-nav{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:6px;background:transparent;font-family:inherit;font-size:16px;line-height:1;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));cursor:pointer;transition:color .15s ease-out,background-color .15s ease-out}.magicx-aia-datepicker-nav:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent)}.magicx-aia-datepicker-weekdays,.magicx-aia-datepicker-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.magicx-aia-datepicker-weekday{padding:2px 0;text-align:center;font-family:inherit;font-size:var(--aia-date-weekday-font-size, 11px);font-weight:500;line-height:16px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));opacity:.7}.magicx-aia-date-cell{display:flex;align-items:center;justify-content:center;min-width:0;height:var(--aia-date-row-height, 28px);font-family:inherit;font-size:var(--aia-date-cell-font-size, 13px);font-weight:450;line-height:20px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb))}.magicx-aia-date-cell-number{display:flex;align-items:center;justify-content:center;width:var(--aia-date-cell-size, 26px);height:var(--aia-date-cell-size, 26px);border-radius:6px}.magicx-aia-date-cell--day{cursor:pointer}.magicx-aia-date-cell--blank{cursor:default}.magicx-aia-date-cell--past{opacity:.35}.magicx-aia-date-cell--day:hover .magicx-aia-date-cell-number,.magicx-aia-date-cell--highlighted .magicx-aia-date-cell-number{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.magicx-aia-date-cell--today .magicx-aia-date-cell-number{box-shadow:inset 0 0 0 1px var(--aia-date-today-ring, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)))}.magicx-aia-date-cell--selected .magicx-aia-date-cell-number{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-date-selected-bg, rgba(var(--aia-streak-rgb, 255, 255, 255), .12));font-weight:500}.magicx-aia-date-cell--pressed .magicx-aia-date-cell-number{opacity:.8;background:rgba(var(--aia-streak-rgb, 255, 255, 255),.06)}\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 });
106
+ DateGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateGridComponent, isStandalone: true, selector: "aia-date-grid", inputs: { options: "options", activeIndex: "activeIndex", listboxId: "listboxId", view: "view", selection: "selection" }, outputs: { select: "select", highlight: "highlight", previousMonth: "previousMonth", nextMonth: "nextMonth" }, ngImport: i0, template: "<div class=\"magicx-aia-datepicker\" data-aia-datepicker=\"\">\n <div class=\"magicx-aia-datepicker-header\">\n <!-- tabIndex -1 for the same reason the skip button is: Tab is already\n bound to walking the dropdown's options. -->\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"magicx-aia-datepicker-nav\"\n data-aia-date-prev=\"\"\n aria-label=\"Previous month\"\n (mousedown)=\"preventBlur($event)\"\n (click)=\"previousMonth.emit()\"\n >\n &lsaquo;\n </button>\n <span class=\"magicx-aia-datepicker-month\" data-aia-date-month=\"\" aria-live=\"polite\">\n {{ monthLabel }}\n </span>\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"magicx-aia-datepicker-nav\"\n data-aia-date-next=\"\"\n aria-label=\"Next month\"\n (mousedown)=\"preventBlur($event)\"\n (click)=\"nextMonth.emit()\"\n >\n &rsaquo;\n </button>\n </div>\n\n <!-- Decorative: each cell announces its own full date, so repeating the\n column letters to AT adds noise \u2014 and the duplicate T/S would be\n meaningless read aloud anyway. -->\n <div class=\"magicx-aia-datepicker-weekdays\" aria-hidden=\"true\">\n <span class=\"magicx-aia-datepicker-weekday\" *ngFor=\"let label of weekdays\">{{ label }}</span>\n </div>\n\n <div class=\"magicx-aia-datepicker-grid\" data-aia-date-grid=\"\">\n <ng-container *ngFor=\"let option of options; trackBy: trackByCell; let i = index\">\n <!-- Padding for the days before the 1st / after the last. Non-tappable,\n so arrow navigation skips it; hidden from AT so the month reads as\n its own days and nothing else. -->\n <div\n *ngIf=\"dayOf(option) === null; else dayCell\"\n [id]=\"listboxId + '-option-' + i\"\n role=\"option\"\n data-aia-option=\"\"\n data-aia-date-cell=\"\"\n aria-hidden=\"true\"\n [attr.aria-selected]=\"false\"\n tabindex=\"-1\"\n class=\"magicx-aia-date-cell magicx-aia-date-cell--blank\"\n ></div>\n\n <ng-template #dayCell>\n <!-- A day already gone by is de-emphasized, not disabled: it renders\n dimmed but stays every bit as pickable as the rest of the month. -->\n <div\n [id]=\"listboxId + '-option-' + i\"\n role=\"option\"\n data-aia-option=\"\"\n data-aia-date-cell=\"\"\n [attr.aria-selected]=\"i === activeIndex\"\n [attr.aria-label]=\"option.text\"\n tabindex=\"0\"\n class=\"magicx-aia-date-cell magicx-aia-date-cell--day\"\n [class.magicx-aia-date-cell--past]=\"isPast(option)\"\n [class.magicx-aia-date-cell--highlighted]=\"i === activeIndex\"\n [class.magicx-aia-date-cell--today]=\"isToday(option)\"\n [class.magicx-aia-date-cell--in-range]=\"isInRange(option)\"\n [class.magicx-aia-date-cell--selected]=\"isSelected(option)\"\n [class.magicx-aia-date-cell--pressed]=\"i === pressedIndex\"\n (click)=\"onSelect(option, i)\"\n (keydown)=\"onKeyDown($event, option, i)\"\n (mouseenter)=\"highlight.emit(i)\"\n >\n <!-- The cell paints the day number; `option.text` is the full\n committed value (\"March 23 2026\") and is what AT announces,\n since that is what selecting it puts in the input. -->\n <span class=\"magicx-aia-date-cell-number\">{{ dayOf(option) }}</span>\n </div>\n </ng-template>\n </ng-container>\n </div>\n</div>\n", styles: [".magicx-aia-datepicker{display:flex;flex-direction:column;gap:4px;padding:4px 2px}.magicx-aia-datepicker-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 6px}.magicx-aia-datepicker-month{font-family:inherit;font-size:var(--aia-date-month-font-size, 14px);font-weight:500;line-height:20px;color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.magicx-aia-datepicker-nav{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:6px;background:transparent;font-family:inherit;font-size:16px;line-height:1;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));cursor:pointer;transition:color .15s ease-out,background-color .15s ease-out}.magicx-aia-datepicker-nav:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent)}.magicx-aia-datepicker-weekdays,.magicx-aia-datepicker-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.magicx-aia-datepicker-weekday{padding:2px 0;text-align:center;font-family:inherit;font-size:var(--aia-date-weekday-font-size, 11px);font-weight:500;line-height:16px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));opacity:.7}.magicx-aia-date-cell{display:flex;align-items:center;justify-content:center;min-width:0;height:var(--aia-date-row-height, 28px);font-family:inherit;font-size:var(--aia-date-cell-font-size, 13px);font-weight:450;line-height:20px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb))}.magicx-aia-date-cell-number{display:flex;align-items:center;justify-content:center;width:var(--aia-date-cell-size, 26px);height:var(--aia-date-cell-size, 26px);border-radius:6px}.magicx-aia-date-cell--day{cursor:pointer}.magicx-aia-date-cell--blank{cursor:default}.magicx-aia-date-cell--past{opacity:.35}.magicx-aia-date-cell--day:hover .magicx-aia-date-cell-number,.magicx-aia-date-cell--highlighted .magicx-aia-date-cell-number{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.magicx-aia-date-cell--today .magicx-aia-date-cell-number{box-shadow:inset 0 0 0 1px var(--aia-date-today-ring, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)))}.magicx-aia-date-cell--in-range{background:var(--aia-date-range-bg, rgba(var(--aia-streak-rgb, 255, 255, 255), .06))}.magicx-aia-date-cell--selected .magicx-aia-date-cell-number{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-date-selected-bg, rgba(var(--aia-streak-rgb, 255, 255, 255), .12));font-weight:500}.magicx-aia-date-cell--pressed .magicx-aia-date-cell-number{opacity:.8;background:rgba(var(--aia-streak-rgb, 255, 255, 255),.06)}\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 });
83
107
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateGridComponent, decorators: [{
84
108
  type: Component,
85
- args: [{ selector: "aia-date-grid", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"magicx-aia-datepicker\" data-aia-datepicker=\"\">\n <div class=\"magicx-aia-datepicker-header\">\n <!-- tabIndex -1 for the same reason the skip button is: Tab is already\n bound to walking the dropdown's options. -->\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"magicx-aia-datepicker-nav\"\n data-aia-date-prev=\"\"\n aria-label=\"Previous month\"\n (mousedown)=\"preventBlur($event)\"\n (click)=\"previousMonth.emit()\"\n >\n &lsaquo;\n </button>\n <span class=\"magicx-aia-datepicker-month\" data-aia-date-month=\"\" aria-live=\"polite\">\n {{ monthLabel }}\n </span>\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"magicx-aia-datepicker-nav\"\n data-aia-date-next=\"\"\n aria-label=\"Next month\"\n (mousedown)=\"preventBlur($event)\"\n (click)=\"nextMonth.emit()\"\n >\n &rsaquo;\n </button>\n </div>\n\n <!-- Decorative: each cell announces its own full date, so repeating the\n column letters to AT adds noise \u2014 and the duplicate T/S would be\n meaningless read aloud anyway. -->\n <div class=\"magicx-aia-datepicker-weekdays\" aria-hidden=\"true\">\n <span class=\"magicx-aia-datepicker-weekday\" *ngFor=\"let label of weekdays\">{{ label }}</span>\n </div>\n\n <div class=\"magicx-aia-datepicker-grid\" data-aia-date-grid=\"\">\n <ng-container *ngFor=\"let option of options; trackBy: trackByCell; let i = index\">\n <!-- Padding for the days before the 1st / after the last. Non-tappable,\n so arrow navigation skips it; hidden from AT so the month reads as\n its own days and nothing else. -->\n <div\n *ngIf=\"dayOf(option) === null; else dayCell\"\n [id]=\"listboxId + '-option-' + i\"\n role=\"option\"\n data-aia-option=\"\"\n data-aia-date-cell=\"\"\n aria-hidden=\"true\"\n [attr.aria-selected]=\"false\"\n tabindex=\"-1\"\n class=\"magicx-aia-date-cell magicx-aia-date-cell--blank\"\n ></div>\n\n <ng-template #dayCell>\n <!-- A day already gone by is de-emphasized, not disabled: it renders\n dimmed but stays every bit as pickable as the rest of the month. -->\n <div\n [id]=\"listboxId + '-option-' + i\"\n role=\"option\"\n data-aia-option=\"\"\n data-aia-date-cell=\"\"\n [attr.aria-selected]=\"i === activeIndex\"\n [attr.aria-label]=\"option.text\"\n tabindex=\"0\"\n class=\"magicx-aia-date-cell magicx-aia-date-cell--day\"\n [class.magicx-aia-date-cell--past]=\"isPast(option)\"\n [class.magicx-aia-date-cell--highlighted]=\"i === activeIndex\"\n [class.magicx-aia-date-cell--today]=\"isToday(option)\"\n [class.magicx-aia-date-cell--selected]=\"isSelected(option)\"\n [class.magicx-aia-date-cell--pressed]=\"i === pressedIndex\"\n (click)=\"onSelect(option, i)\"\n (keydown)=\"onKeyDown($event, option, i)\"\n (mouseenter)=\"highlight.emit(i)\"\n >\n <!-- The cell paints the day number; `option.text` is the full\n committed value (\"March 23 2026\") and is what AT announces,\n since that is what selecting it puts in the input. -->\n <span class=\"magicx-aia-date-cell-number\">{{ dayOf(option) }}</span>\n </div>\n </ng-template>\n </ng-container>\n </div>\n</div>\n", styles: [".magicx-aia-datepicker{display:flex;flex-direction:column;gap:4px;padding:4px 2px}.magicx-aia-datepicker-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 6px}.magicx-aia-datepicker-month{font-family:inherit;font-size:var(--aia-date-month-font-size, 14px);font-weight:500;line-height:20px;color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.magicx-aia-datepicker-nav{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:6px;background:transparent;font-family:inherit;font-size:16px;line-height:1;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));cursor:pointer;transition:color .15s ease-out,background-color .15s ease-out}.magicx-aia-datepicker-nav:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent)}.magicx-aia-datepicker-weekdays,.magicx-aia-datepicker-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.magicx-aia-datepicker-weekday{padding:2px 0;text-align:center;font-family:inherit;font-size:var(--aia-date-weekday-font-size, 11px);font-weight:500;line-height:16px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));opacity:.7}.magicx-aia-date-cell{display:flex;align-items:center;justify-content:center;min-width:0;height:var(--aia-date-row-height, 28px);font-family:inherit;font-size:var(--aia-date-cell-font-size, 13px);font-weight:450;line-height:20px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb))}.magicx-aia-date-cell-number{display:flex;align-items:center;justify-content:center;width:var(--aia-date-cell-size, 26px);height:var(--aia-date-cell-size, 26px);border-radius:6px}.magicx-aia-date-cell--day{cursor:pointer}.magicx-aia-date-cell--blank{cursor:default}.magicx-aia-date-cell--past{opacity:.35}.magicx-aia-date-cell--day:hover .magicx-aia-date-cell-number,.magicx-aia-date-cell--highlighted .magicx-aia-date-cell-number{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.magicx-aia-date-cell--today .magicx-aia-date-cell-number{box-shadow:inset 0 0 0 1px var(--aia-date-today-ring, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)))}.magicx-aia-date-cell--selected .magicx-aia-date-cell-number{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-date-selected-bg, rgba(var(--aia-streak-rgb, 255, 255, 255), .12));font-weight:500}.magicx-aia-date-cell--pressed .magicx-aia-date-cell-number{opacity:.8;background:rgba(var(--aia-streak-rgb, 255, 255, 255),.06)}\n"] }]
109
+ args: [{ selector: "aia-date-grid", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"magicx-aia-datepicker\" data-aia-datepicker=\"\">\n <div class=\"magicx-aia-datepicker-header\">\n <!-- tabIndex -1 for the same reason the skip button is: Tab is already\n bound to walking the dropdown's options. -->\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"magicx-aia-datepicker-nav\"\n data-aia-date-prev=\"\"\n aria-label=\"Previous month\"\n (mousedown)=\"preventBlur($event)\"\n (click)=\"previousMonth.emit()\"\n >\n &lsaquo;\n </button>\n <span class=\"magicx-aia-datepicker-month\" data-aia-date-month=\"\" aria-live=\"polite\">\n {{ monthLabel }}\n </span>\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"magicx-aia-datepicker-nav\"\n data-aia-date-next=\"\"\n aria-label=\"Next month\"\n (mousedown)=\"preventBlur($event)\"\n (click)=\"nextMonth.emit()\"\n >\n &rsaquo;\n </button>\n </div>\n\n <!-- Decorative: each cell announces its own full date, so repeating the\n column letters to AT adds noise \u2014 and the duplicate T/S would be\n meaningless read aloud anyway. -->\n <div class=\"magicx-aia-datepicker-weekdays\" aria-hidden=\"true\">\n <span class=\"magicx-aia-datepicker-weekday\" *ngFor=\"let label of weekdays\">{{ label }}</span>\n </div>\n\n <div class=\"magicx-aia-datepicker-grid\" data-aia-date-grid=\"\">\n <ng-container *ngFor=\"let option of options; trackBy: trackByCell; let i = index\">\n <!-- Padding for the days before the 1st / after the last. Non-tappable,\n so arrow navigation skips it; hidden from AT so the month reads as\n its own days and nothing else. -->\n <div\n *ngIf=\"dayOf(option) === null; else dayCell\"\n [id]=\"listboxId + '-option-' + i\"\n role=\"option\"\n data-aia-option=\"\"\n data-aia-date-cell=\"\"\n aria-hidden=\"true\"\n [attr.aria-selected]=\"false\"\n tabindex=\"-1\"\n class=\"magicx-aia-date-cell magicx-aia-date-cell--blank\"\n ></div>\n\n <ng-template #dayCell>\n <!-- A day already gone by is de-emphasized, not disabled: it renders\n dimmed but stays every bit as pickable as the rest of the month. -->\n <div\n [id]=\"listboxId + '-option-' + i\"\n role=\"option\"\n data-aia-option=\"\"\n data-aia-date-cell=\"\"\n [attr.aria-selected]=\"i === activeIndex\"\n [attr.aria-label]=\"option.text\"\n tabindex=\"0\"\n class=\"magicx-aia-date-cell magicx-aia-date-cell--day\"\n [class.magicx-aia-date-cell--past]=\"isPast(option)\"\n [class.magicx-aia-date-cell--highlighted]=\"i === activeIndex\"\n [class.magicx-aia-date-cell--today]=\"isToday(option)\"\n [class.magicx-aia-date-cell--in-range]=\"isInRange(option)\"\n [class.magicx-aia-date-cell--selected]=\"isSelected(option)\"\n [class.magicx-aia-date-cell--pressed]=\"i === pressedIndex\"\n (click)=\"onSelect(option, i)\"\n (keydown)=\"onKeyDown($event, option, i)\"\n (mouseenter)=\"highlight.emit(i)\"\n >\n <!-- The cell paints the day number; `option.text` is the full\n committed value (\"March 23 2026\") and is what AT announces,\n since that is what selecting it puts in the input. -->\n <span class=\"magicx-aia-date-cell-number\">{{ dayOf(option) }}</span>\n </div>\n </ng-template>\n </ng-container>\n </div>\n</div>\n", styles: [".magicx-aia-datepicker{display:flex;flex-direction:column;gap:4px;padding:4px 2px}.magicx-aia-datepicker-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 6px}.magicx-aia-datepicker-month{font-family:inherit;font-size:var(--aia-date-month-font-size, 14px);font-weight:500;line-height:20px;color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.magicx-aia-datepicker-nav{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:6px;background:transparent;font-family:inherit;font-size:16px;line-height:1;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));cursor:pointer;transition:color .15s ease-out,background-color .15s ease-out}.magicx-aia-datepicker-nav:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent)}.magicx-aia-datepicker-weekdays,.magicx-aia-datepicker-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.magicx-aia-datepicker-weekday{padding:2px 0;text-align:center;font-family:inherit;font-size:var(--aia-date-weekday-font-size, 11px);font-weight:500;line-height:16px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));opacity:.7}.magicx-aia-date-cell{display:flex;align-items:center;justify-content:center;min-width:0;height:var(--aia-date-row-height, 28px);font-family:inherit;font-size:var(--aia-date-cell-font-size, 13px);font-weight:450;line-height:20px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb))}.magicx-aia-date-cell-number{display:flex;align-items:center;justify-content:center;width:var(--aia-date-cell-size, 26px);height:var(--aia-date-cell-size, 26px);border-radius:6px}.magicx-aia-date-cell--day{cursor:pointer}.magicx-aia-date-cell--blank{cursor:default}.magicx-aia-date-cell--past{opacity:.35}.magicx-aia-date-cell--day:hover .magicx-aia-date-cell-number,.magicx-aia-date-cell--highlighted .magicx-aia-date-cell-number{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.magicx-aia-date-cell--today .magicx-aia-date-cell-number{box-shadow:inset 0 0 0 1px var(--aia-date-today-ring, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)))}.magicx-aia-date-cell--in-range{background:var(--aia-date-range-bg, rgba(var(--aia-streak-rgb, 255, 255, 255), .06))}.magicx-aia-date-cell--selected .magicx-aia-date-cell-number{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-date-selected-bg, rgba(var(--aia-streak-rgb, 255, 255, 255), .12));font-weight:500}.magicx-aia-date-cell--pressed .magicx-aia-date-cell-number{opacity:.8;background:rgba(var(--aia-streak-rgb, 255, 255, 255),.06)}\n"] }]
86
110
  }], propDecorators: { options: [{
87
111
  type: Input
88
112
  }], activeIndex: [{
@@ -91,7 +115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
91
115
  type: Input
92
116
  }], view: [{
93
117
  type: Input
94
- }], selectedIso: [{
118
+ }], selection: [{
95
119
  type: Input
96
120
  }], select: [{
97
121
  type: Output
@@ -427,7 +451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
427
451
  * `packages/react/src/components/SuggestionItem.tsx`. Handles:
428
452
  *
429
453
  * - Tappable vs non-tappable cursor + hover styling
430
- * - Pressed-state compress animation (500ms, single-flight)
454
+ * - Pressed-state compress animation (170ms, single-flight)
431
455
  * - Keyboard activation (Enter/Space)
432
456
  * - ARIA `role="option"` + `aria-selected` for the listbox pattern
433
457
  * - Loading skeleton when `loading=true`
@@ -476,7 +500,7 @@ class SuggestionItemComponent {
476
500
  this.pressedTimer = setTimeout(() => {
477
501
  this.pressed = false;
478
502
  this.cdr.markForCheck();
479
- }, 500);
503
+ }, 170);
480
504
  }
481
505
  onMouseEnter() {
482
506
  if (this.loading || !this.option.is_tappable)
@@ -493,10 +517,10 @@ class SuggestionItemComponent {
493
517
  }
494
518
  }
495
519
  SuggestionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
496
- 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", scrollHint: "scrollHint", enterDelayMs: "enterDelayMs" }, outputs: { select: "select", highlight: "highlight" }, ngImport: i0, template: "<div\n [id]=\"id\"\n role=\"option\"\n data-aia-option=\"\"\n [attr.data-aia-loading]=\"loading ? '' : null\"\n [attr.aria-selected]=\"isHighlighted\"\n class=\"aia-suggestion-item\"\n [style.--aia-option-enter-delay]=\"(enterDelay ?? 0) + 'ms'\"\n [class.aia-suggestion-item-highlighted]=\"isHighlighted && !loading\"\n [class.aia-suggestion-item-tappable]=\"option.is_tappable\"\n [class.aia-suggestion-item-non-tappable]=\"!option.is_tappable\"\n [class.aia-suggestion-item-pressed]=\"pressed\"\n [class.aia-suggestion-item-scroll-hint]=\"scrollHint\"\n [attr.tabindex]=\"loading || !option.is_tappable ? -1 : 0\"\n (click)=\"onSelect()\"\n (keydown)=\"onKeyDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n>\n <span class=\"aia-suggestion-content\">\n <span class=\"aia-suggestion-text\">\n <ng-container *ngIf=\"option.icon; else noIcon\"\n >{{ option.icon }} {{ option.text }}</ng-container\n >\n <ng-template #noIcon>{{ option.text }}</ng-template>\n </span>\n <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:visible;display:flex;align-items:flex-start;font-family:inherit;font-size:var(--aia-option-font-size, 16px);font-weight:450;line-height:21px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));white-space:normal;word-break:break-word;border-radius:8px;padding:8px 10px;animation:aiaSuggestionFadeIn .15s ease-out both,aiaSuggestionRiseIn .28s cubic-bezier(.25,.46,.45,.94) both;animation-delay:var(--aia-option-enter-delay, 0ms)}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}@keyframes aiaSuggestionRiseIn{0%{transform:translateY(16px)}}@media (prefers-reduced-motion: reduce){.aia-suggestion-item{animation-duration:0s;animation-delay:0s}}.aia-suggestion-content{position:relative;z-index:2}.aia-suggestion-item-tappable{cursor:pointer}.aia-suggestion-item-tappable:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.aia-suggestion-item-non-tappable{cursor:default}.aia-suggestion-item-highlighted{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.aia-suggestion-tag{font-size:11px;margin-left:6px;opacity:.5}.aia-suggestion-item-pressed{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));animation:aiaPressCompress .5s ease forwards}[role=listbox]:has(.aia-suggestion-item-pressed) .aia-suggestion-item:not(.aia-suggestion-item-pressed){opacity:.35;transition:opacity .15s ease}@keyframes aiaPressCompress{0%{transform:scale(1)}25%{transform:scale(.93)}60%{transform:scale(.93)}to{transform:scale(1)}}.aia-suggestion-item-scroll-hint .aia-suggestion-content{mask-image:linear-gradient(to bottom,rgb(0 0 0),rgb(0 0 0 / .6))}.aia-suggestion-item[data-aia-loading]{cursor:default;animation:aiaSuggestionSkeletonPulse 1.4s ease-in-out infinite}.aia-suggestion-item[data-aia-loading] .aia-suggestion-text{color:transparent;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
520
+ 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", scrollHint: "scrollHint", enterDelayMs: "enterDelayMs" }, outputs: { select: "select", highlight: "highlight" }, ngImport: i0, template: "<div\n [id]=\"id\"\n role=\"option\"\n data-aia-option=\"\"\n [attr.data-aia-loading]=\"loading ? '' : null\"\n [attr.aria-selected]=\"isHighlighted\"\n class=\"aia-suggestion-item\"\n [style.--aia-option-enter-delay]=\"(enterDelay ?? 0) + 'ms'\"\n [class.aia-suggestion-item-highlighted]=\"isHighlighted && !loading\"\n [class.aia-suggestion-item-tappable]=\"option.is_tappable\"\n [class.aia-suggestion-item-non-tappable]=\"!option.is_tappable\"\n [class.aia-suggestion-item-pressed]=\"pressed\"\n [class.aia-suggestion-item-scroll-hint]=\"scrollHint\"\n [attr.tabindex]=\"loading || !option.is_tappable ? -1 : 0\"\n (click)=\"onSelect()\"\n (keydown)=\"onKeyDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n>\n <span class=\"aia-suggestion-content\">\n <span class=\"aia-suggestion-text\">\n <ng-container *ngIf=\"option.icon; else noIcon\"\n >{{ option.icon }} {{ option.text }}</ng-container\n >\n <ng-template #noIcon>{{ option.text }}</ng-template>\n </span>\n <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:visible;display:flex;align-items:flex-start;font-family:inherit;font-size:var(--aia-option-font-size, 16px);font-weight:450;line-height:21px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));white-space:normal;word-break:break-word;border-radius:8px;padding:8px 10px;animation:aiaSuggestionFadeIn .15s ease-out both,aiaSuggestionRiseIn .28s cubic-bezier(.25,.46,.45,.94) both;animation-delay:var(--aia-option-enter-delay, 0ms)}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}@keyframes aiaSuggestionRiseIn{0%{transform:translateY(16px)}}@media (prefers-reduced-motion: reduce){.aia-suggestion-item{animation-duration:0s;animation-delay:0s}}.aia-suggestion-content{position:relative;z-index:2}.aia-suggestion-item-tappable{cursor:pointer}.aia-suggestion-item-tappable:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.aia-suggestion-item-non-tappable{cursor:default}.aia-suggestion-item-highlighted{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.aia-suggestion-tag{font-size:11px;margin-left:6px;opacity:.5}.aia-suggestion-item-pressed{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));animation:aiaPressCompress .17s ease forwards}[role=listbox]:has(.aia-suggestion-item-pressed) .aia-suggestion-item:not(.aia-suggestion-item-pressed){opacity:.35;transition:opacity 60ms ease}@keyframes aiaPressCompress{0%{transform:scale(1)}25%{transform:scale(.93)}60%{transform:scale(.93)}to{transform:scale(1)}}.aia-suggestion-item-scroll-hint .aia-suggestion-content{mask-image:linear-gradient(to bottom,rgb(0 0 0),rgb(0 0 0 / .6))}.aia-suggestion-item[data-aia-loading]{cursor:default;animation:aiaSuggestionSkeletonPulse 1.4s ease-in-out infinite}.aia-suggestion-item[data-aia-loading] .aia-suggestion-text{color:transparent;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
497
521
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionItemComponent, decorators: [{
498
522
  type: Component,
499
- 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.aria-selected]=\"isHighlighted\"\n class=\"aia-suggestion-item\"\n [style.--aia-option-enter-delay]=\"(enterDelay ?? 0) + 'ms'\"\n [class.aia-suggestion-item-highlighted]=\"isHighlighted && !loading\"\n [class.aia-suggestion-item-tappable]=\"option.is_tappable\"\n [class.aia-suggestion-item-non-tappable]=\"!option.is_tappable\"\n [class.aia-suggestion-item-pressed]=\"pressed\"\n [class.aia-suggestion-item-scroll-hint]=\"scrollHint\"\n [attr.tabindex]=\"loading || !option.is_tappable ? -1 : 0\"\n (click)=\"onSelect()\"\n (keydown)=\"onKeyDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n>\n <span class=\"aia-suggestion-content\">\n <span class=\"aia-suggestion-text\">\n <ng-container *ngIf=\"option.icon; else noIcon\"\n >{{ option.icon }} {{ option.text }}</ng-container\n >\n <ng-template #noIcon>{{ option.text }}</ng-template>\n </span>\n <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:visible;display:flex;align-items:flex-start;font-family:inherit;font-size:var(--aia-option-font-size, 16px);font-weight:450;line-height:21px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));white-space:normal;word-break:break-word;border-radius:8px;padding:8px 10px;animation:aiaSuggestionFadeIn .15s ease-out both,aiaSuggestionRiseIn .28s cubic-bezier(.25,.46,.45,.94) both;animation-delay:var(--aia-option-enter-delay, 0ms)}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}@keyframes aiaSuggestionRiseIn{0%{transform:translateY(16px)}}@media (prefers-reduced-motion: reduce){.aia-suggestion-item{animation-duration:0s;animation-delay:0s}}.aia-suggestion-content{position:relative;z-index:2}.aia-suggestion-item-tappable{cursor:pointer}.aia-suggestion-item-tappable:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.aia-suggestion-item-non-tappable{cursor:default}.aia-suggestion-item-highlighted{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.aia-suggestion-tag{font-size:11px;margin-left:6px;opacity:.5}.aia-suggestion-item-pressed{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));animation:aiaPressCompress .5s ease forwards}[role=listbox]:has(.aia-suggestion-item-pressed) .aia-suggestion-item:not(.aia-suggestion-item-pressed){opacity:.35;transition:opacity .15s ease}@keyframes aiaPressCompress{0%{transform:scale(1)}25%{transform:scale(.93)}60%{transform:scale(.93)}to{transform:scale(1)}}.aia-suggestion-item-scroll-hint .aia-suggestion-content{mask-image:linear-gradient(to bottom,rgb(0 0 0),rgb(0 0 0 / .6))}.aia-suggestion-item[data-aia-loading]{cursor:default;animation:aiaSuggestionSkeletonPulse 1.4s ease-in-out infinite}.aia-suggestion-item[data-aia-loading] .aia-suggestion-text{color:transparent;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}\n"] }]
523
+ 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.aria-selected]=\"isHighlighted\"\n class=\"aia-suggestion-item\"\n [style.--aia-option-enter-delay]=\"(enterDelay ?? 0) + 'ms'\"\n [class.aia-suggestion-item-highlighted]=\"isHighlighted && !loading\"\n [class.aia-suggestion-item-tappable]=\"option.is_tappable\"\n [class.aia-suggestion-item-non-tappable]=\"!option.is_tappable\"\n [class.aia-suggestion-item-pressed]=\"pressed\"\n [class.aia-suggestion-item-scroll-hint]=\"scrollHint\"\n [attr.tabindex]=\"loading || !option.is_tappable ? -1 : 0\"\n (click)=\"onSelect()\"\n (keydown)=\"onKeyDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n>\n <span class=\"aia-suggestion-content\">\n <span class=\"aia-suggestion-text\">\n <ng-container *ngIf=\"option.icon; else noIcon\"\n >{{ option.icon }} {{ option.text }}</ng-container\n >\n <ng-template #noIcon>{{ option.text }}</ng-template>\n </span>\n <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:visible;display:flex;align-items:flex-start;font-family:inherit;font-size:var(--aia-option-font-size, 16px);font-weight:450;line-height:21px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));white-space:normal;word-break:break-word;border-radius:8px;padding:8px 10px;animation:aiaSuggestionFadeIn .15s ease-out both,aiaSuggestionRiseIn .28s cubic-bezier(.25,.46,.45,.94) both;animation-delay:var(--aia-option-enter-delay, 0ms)}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}@keyframes aiaSuggestionRiseIn{0%{transform:translateY(16px)}}@media (prefers-reduced-motion: reduce){.aia-suggestion-item{animation-duration:0s;animation-delay:0s}}.aia-suggestion-content{position:relative;z-index:2}.aia-suggestion-item-tappable{cursor:pointer}.aia-suggestion-item-tappable:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.aia-suggestion-item-non-tappable{cursor:default}.aia-suggestion-item-highlighted{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.aia-suggestion-tag{font-size:11px;margin-left:6px;opacity:.5}.aia-suggestion-item-pressed{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));animation:aiaPressCompress .17s ease forwards}[role=listbox]:has(.aia-suggestion-item-pressed) .aia-suggestion-item:not(.aia-suggestion-item-pressed){opacity:.35;transition:opacity 60ms ease}@keyframes aiaPressCompress{0%{transform:scale(1)}25%{transform:scale(.93)}60%{transform:scale(.93)}to{transform:scale(1)}}.aia-suggestion-item-scroll-hint .aia-suggestion-content{mask-image:linear-gradient(to bottom,rgb(0 0 0),rgb(0 0 0 / .6))}.aia-suggestion-item[data-aia-loading]{cursor:default;animation:aiaSuggestionSkeletonPulse 1.4s ease-in-out infinite}.aia-suggestion-item[data-aia-loading] .aia-suggestion-text{color:transparent;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}\n"] }]
500
524
  }], propDecorators: { option: [{
501
525
  type: Input
502
526
  }], isHighlighted: [{
@@ -826,7 +850,7 @@ class AIAutocompleteDropdownComponent {
826
850
  // derive layer — so the two are the same list drawn two different
827
851
  // ways, and never both at once (two elements answering to the same
828
852
  // option id would break keyboard commit).
829
- const isDate = dd.formatType === "date" && dd.dateView != null;
853
+ const isDate = isCalendarFormat(dd.formatType ?? "options") && dd.dateView != null;
830
854
  const showsOptions = options.length > 0 && !isDate;
831
855
  const showsDateGrid = options.length > 0 && isDate;
832
856
  const showsFallbackSkeleton = dd.isLoading && !showsOptions && !showsDateGrid;
@@ -858,7 +882,11 @@ class AIAutocompleteDropdownComponent {
858
882
  showsOptions,
859
883
  showsDateGrid,
860
884
  dateView: dd.dateView ?? null,
861
- selectedDateIso: dd.selectedDateIso ?? null,
885
+ dateSelection: {
886
+ selectedIso: dd.selectedDateIso ?? null,
887
+ selectedRange: dd.selectedDateRange ?? null,
888
+ rangeStart: dd.dateRangeStart ?? null,
889
+ },
862
890
  showsFallbackSkeleton,
863
891
  products: dd.products,
864
892
  groupKey: activeSuggestion ? `${activeSuggestion.type} ${activeSuggestion.text}` : "",
@@ -905,7 +933,7 @@ class AIAutocompleteDropdownComponent {
905
933
  }
906
934
  }
907
935
  AIAutocompleteDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
908
- 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", className: "className", mode: "mode" }, 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-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]=\"vm.activePillLabel ? 'Skip ' + vm.activePillLabel : 'Skip'\"\n (click)=\"onSkip()\"\n >\n 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 (select)=\"onSelect($event)\"\n (highlight)=\"onHighlight($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 [selectedIso]=\"vm.selectedDateIso\"\n (select)=\"onSelect($event)\"\n (highlight)=\"onHighlight($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 (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=\"14\"\n height=\"14\"\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,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}: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-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: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .08);--aia-dropdown-border: var(--aia-primitive-neutral-900-a50);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-300);--aia-pill-font-size: 16px;--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-a25);--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: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .2), 0 8px 24px rgba(0, 0, 0, .25);--aia-dropdown-border: var(--aia-primitive-neutral-400-a50);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-700);--aia-pill-font-size: 16px;--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, 8px) + var(--aia-footer-row-height, 23px));--aia-grid-scroll-bottom: var(--aia-footer-band);--aia-grid-overlap-bottom: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-lead: 20px;--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0}[data-aia-dropdown] [data-aia-pillbar] .aia-pill-list{padding-inline:10px}[data-aia-dropdown] [data-aia-pillbar] .aia-pill{justify-content:flex-start;border-inline-width:0;padding-inline:0}[data-aia-dropdown] .aia-grid[data-scroll]{padding-top:var(--aia-grid-scroll-top, 0);padding-bottom:var(--aia-grid-scroll-bottom, 0);margin-top:var(--aia-grid-overlap-top, 0);margin-bottom:var(--aia-grid-overlap-bottom, 0)}[data-aia-dropdown] [data-aia-footer]:before{content:\"\";position:absolute;inset:var(--aia-footer-fade-inset, -20px 0 0);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--aia-surface, #ffffff))}[data-aia-dropdown][data-aia-surface=glass]{--aia-footer-chip-bg: transparent}[data-aia-dropdown][data-aia-surface=glass] [data-aia-footer]:before{display:none}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown],[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}: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, 8px) 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))}: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)}}\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;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:18px;box-shadow:var(--aia-dropdown-shadow, 0 8px 12px rgba(0, 0, 0, .05))}.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,#00000014 0 0 30px 2px;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:2;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 0 0 -16px;padding:0;border:1px solid var(--aia-scroll-arrow-border, var(--aia-dropdown-border, rgba(231, 231, 231, .5)));border-radius:50%;background:var(--aia-scroll-arrow-bg, var(--aia-surface, #ffffff));color:var( --aia-scroll-arrow-color, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)) );box-shadow:var(--aia-scroll-arrow-shadow, 0 2px 8px rgba(0, 0, 0, .12));cursor:pointer;pointer-events:none;transform:translateY(calc(100% + var(--aia-scroll-arrow-bottom, 8px) + 4px));transition:transform .18s cubic-bezier(.4,0,.2,1)}.magicx-aia-scroll-arrow[data-aia-visible]{pointer-events:auto;transform:translateY(0)}.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{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, 8px) 0 0 8px;position:relative;z-index:3;pointer-events:none}.magicx-aia-footer-row{display:flex;align-items:center;justify-content:space-between}.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}.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"], outputs: ["select", "focusChange"] }, { kind: "component", type: SuggestionGridComponent, selector: "aia-suggestion-grid", inputs: ["options", "activeIndex", "listboxId", "loading", "groupKey", "optionsPosition"], outputs: ["select", "highlight"] }, { kind: "component", type: DateGridComponent, selector: "aia-date-grid", inputs: ["options", "activeIndex", "listboxId", "view", "selectedIso"], outputs: ["select", "highlight", "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 });
936
+ 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", className: "className", mode: "mode" }, 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-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]=\"vm.activePillLabel ? 'Skip ' + vm.activePillLabel : 'Skip'\"\n (click)=\"onSkip()\"\n >\n 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 (select)=\"onSelect($event)\"\n (highlight)=\"onHighlight($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 (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 (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=\"14\"\n height=\"14\"\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,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}: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-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: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .08);--aia-dropdown-border: var(--aia-primitive-neutral-900-a50);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-300);--aia-pill-font-size: 16px;--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-a25);--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: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .2), 0 8px 24px rgba(0, 0, 0, .25);--aia-dropdown-border: var(--aia-primitive-neutral-400-a50);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-700);--aia-pill-font-size: 16px;--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, 8px) + var(--aia-footer-row-height, 23px));--aia-grid-scroll-bottom: var(--aia-footer-band);--aia-grid-overlap-bottom: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-lead: 20px;--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0}[data-aia-dropdown] [data-aia-pillbar] .aia-pill-list{padding-inline:10px}[data-aia-dropdown] [data-aia-pillbar] .aia-pill{justify-content:flex-start;border-inline-width:0;padding-inline:0}[data-aia-dropdown] .aia-grid[data-scroll]{padding-top:var(--aia-grid-scroll-top, 0);padding-bottom:var(--aia-grid-scroll-bottom, 0);margin-top:var(--aia-grid-overlap-top, 0);margin-bottom:var(--aia-grid-overlap-bottom, 0)}[data-aia-dropdown] [data-aia-footer]:before{content:\"\";position:absolute;inset:var(--aia-footer-fade-inset, -20px 0 0);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--aia-surface, #ffffff))}[data-aia-dropdown][data-aia-surface=glass]{--aia-footer-chip-bg: transparent}[data-aia-dropdown][data-aia-surface=glass] [data-aia-footer]:before{display:none}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown],[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}: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, 8px) 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))}: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)}}\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;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:18px;box-shadow:var(--aia-dropdown-shadow, 0 8px 12px rgba(0, 0, 0, .05))}.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,#00000014 0 0 30px 2px;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:2;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 0 0 -16px;padding:0;border:1px solid var(--aia-scroll-arrow-border, var(--aia-dropdown-border, rgba(231, 231, 231, .5)));border-radius:50%;background:var(--aia-scroll-arrow-bg, var(--aia-surface, #ffffff));color:var( --aia-scroll-arrow-color, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)) );box-shadow:var(--aia-scroll-arrow-shadow, 0 2px 8px rgba(0, 0, 0, .12));cursor:pointer;pointer-events:none;opacity:0;transform:translateY(calc(100% + var(--aia-scroll-arrow-bottom, 8px) + 4px));transition:transform .18s cubic-bezier(.4,0,.2,1)}.magicx-aia-scroll-arrow[data-aia-visible]{pointer-events:auto;opacity:1;transform:translateY(0)}.magicx-aia-scroll-arrow[data-aia-leaving]{pointer-events:none;opacity:0;transform:translateY(0) scale(.86);transition:opacity .24s cubic-bezier(.22,.61,.36,1),transform .24s cubic-bezier(.22,.61,.36,1)}.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-scroll-arrow[data-aia-leaving],.magicx-aia-dropdown{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, 8px) 0 0 8px;position:relative;z-index:3;pointer-events:none}.magicx-aia-footer-row{display:flex;align-items:center;justify-content:space-between}.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}.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"], outputs: ["select", "focusChange"] }, { kind: "component", type: SuggestionGridComponent, selector: "aia-suggestion-grid", inputs: ["options", "activeIndex", "listboxId", "loading", "groupKey", "optionsPosition"], outputs: ["select", "highlight"] }, { kind: "component", type: DateGridComponent, selector: "aia-date-grid", inputs: ["options", "activeIndex", "listboxId", "view", "selection"], outputs: ["select", "highlight", "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 });
909
937
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteDropdownComponent, decorators: [{
910
938
  type: Component,
911
939
  args: [{ selector: "ai-autocomplete-dropdown", standalone: true, imports: [
@@ -916,7 +944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
916
944
  DateGridComponent,
917
945
  StackComponent,
918
946
  ClusterComponent,
919
- ], 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-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]=\"vm.activePillLabel ? 'Skip ' + vm.activePillLabel : 'Skip'\"\n (click)=\"onSkip()\"\n >\n 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 (select)=\"onSelect($event)\"\n (highlight)=\"onHighlight($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 [selectedIso]=\"vm.selectedDateIso\"\n (select)=\"onSelect($event)\"\n (highlight)=\"onHighlight($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 (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=\"14\"\n height=\"14\"\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,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}: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-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: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .08);--aia-dropdown-border: var(--aia-primitive-neutral-900-a50);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-300);--aia-pill-font-size: 16px;--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-a25);--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: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .2), 0 8px 24px rgba(0, 0, 0, .25);--aia-dropdown-border: var(--aia-primitive-neutral-400-a50);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-700);--aia-pill-font-size: 16px;--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, 8px) + var(--aia-footer-row-height, 23px));--aia-grid-scroll-bottom: var(--aia-footer-band);--aia-grid-overlap-bottom: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-lead: 20px;--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0}[data-aia-dropdown] [data-aia-pillbar] .aia-pill-list{padding-inline:10px}[data-aia-dropdown] [data-aia-pillbar] .aia-pill{justify-content:flex-start;border-inline-width:0;padding-inline:0}[data-aia-dropdown] .aia-grid[data-scroll]{padding-top:var(--aia-grid-scroll-top, 0);padding-bottom:var(--aia-grid-scroll-bottom, 0);margin-top:var(--aia-grid-overlap-top, 0);margin-bottom:var(--aia-grid-overlap-bottom, 0)}[data-aia-dropdown] [data-aia-footer]:before{content:\"\";position:absolute;inset:var(--aia-footer-fade-inset, -20px 0 0);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--aia-surface, #ffffff))}[data-aia-dropdown][data-aia-surface=glass]{--aia-footer-chip-bg: transparent}[data-aia-dropdown][data-aia-surface=glass] [data-aia-footer]:before{display:none}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown],[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}: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, 8px) 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))}: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)}}\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;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:18px;box-shadow:var(--aia-dropdown-shadow, 0 8px 12px rgba(0, 0, 0, .05))}.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,#00000014 0 0 30px 2px;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:2;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 0 0 -16px;padding:0;border:1px solid var(--aia-scroll-arrow-border, var(--aia-dropdown-border, rgba(231, 231, 231, .5)));border-radius:50%;background:var(--aia-scroll-arrow-bg, var(--aia-surface, #ffffff));color:var( --aia-scroll-arrow-color, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)) );box-shadow:var(--aia-scroll-arrow-shadow, 0 2px 8px rgba(0, 0, 0, .12));cursor:pointer;pointer-events:none;transform:translateY(calc(100% + var(--aia-scroll-arrow-bottom, 8px) + 4px));transition:transform .18s cubic-bezier(.4,0,.2,1)}.magicx-aia-scroll-arrow[data-aia-visible]{pointer-events:auto;transform:translateY(0)}.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{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, 8px) 0 0 8px;position:relative;z-index:3;pointer-events:none}.magicx-aia-footer-row{display:flex;align-items:center;justify-content:space-between}.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}.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"] }]
947
+ ], 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-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]=\"vm.activePillLabel ? 'Skip ' + vm.activePillLabel : 'Skip'\"\n (click)=\"onSkip()\"\n >\n 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 (select)=\"onSelect($event)\"\n (highlight)=\"onHighlight($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 (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 (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=\"14\"\n height=\"14\"\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,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}: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-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: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .08);--aia-dropdown-border: var(--aia-primitive-neutral-900-a50);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-300);--aia-pill-font-size: 16px;--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-a25);--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: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .2), 0 8px 24px rgba(0, 0, 0, .25);--aia-dropdown-border: var(--aia-primitive-neutral-400-a50);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-700);--aia-pill-font-size: 16px;--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, 8px) + var(--aia-footer-row-height, 23px));--aia-grid-scroll-bottom: var(--aia-footer-band);--aia-grid-overlap-bottom: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-lead: 20px;--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0}[data-aia-dropdown] [data-aia-pillbar] .aia-pill-list{padding-inline:10px}[data-aia-dropdown] [data-aia-pillbar] .aia-pill{justify-content:flex-start;border-inline-width:0;padding-inline:0}[data-aia-dropdown] .aia-grid[data-scroll]{padding-top:var(--aia-grid-scroll-top, 0);padding-bottom:var(--aia-grid-scroll-bottom, 0);margin-top:var(--aia-grid-overlap-top, 0);margin-bottom:var(--aia-grid-overlap-bottom, 0)}[data-aia-dropdown] [data-aia-footer]:before{content:\"\";position:absolute;inset:var(--aia-footer-fade-inset, -20px 0 0);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--aia-surface, #ffffff))}[data-aia-dropdown][data-aia-surface=glass]{--aia-footer-chip-bg: transparent}[data-aia-dropdown][data-aia-surface=glass] [data-aia-footer]:before{display:none}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown],[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}: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, 8px) 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))}: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)}}\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;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:18px;box-shadow:var(--aia-dropdown-shadow, 0 8px 12px rgba(0, 0, 0, .05))}.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,#00000014 0 0 30px 2px;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:2;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 0 0 -16px;padding:0;border:1px solid var(--aia-scroll-arrow-border, var(--aia-dropdown-border, rgba(231, 231, 231, .5)));border-radius:50%;background:var(--aia-scroll-arrow-bg, var(--aia-surface, #ffffff));color:var( --aia-scroll-arrow-color, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)) );box-shadow:var(--aia-scroll-arrow-shadow, 0 2px 8px rgba(0, 0, 0, .12));cursor:pointer;pointer-events:none;opacity:0;transform:translateY(calc(100% + var(--aia-scroll-arrow-bottom, 8px) + 4px));transition:transform .18s cubic-bezier(.4,0,.2,1)}.magicx-aia-scroll-arrow[data-aia-visible]{pointer-events:auto;opacity:1;transform:translateY(0)}.magicx-aia-scroll-arrow[data-aia-leaving]{pointer-events:none;opacity:0;transform:translateY(0) scale(.86);transition:opacity .24s cubic-bezier(.22,.61,.36,1),transform .24s cubic-bezier(.22,.61,.36,1)}.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-scroll-arrow[data-aia-leaving],.magicx-aia-dropdown{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, 8px) 0 0 8px;position:relative;z-index:3;pointer-events:none}.magicx-aia-footer-row{display:flex;align-items:center;justify-content:space-between}.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}.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"] }]
920
948
  }], propDecorators: { controller: [{
921
949
  type: Input
922
950
  }], showPills: [{
@@ -1279,8 +1307,14 @@ function arrEq(a, b) {
1279
1307
  }
1280
1308
  return true;
1281
1309
  }
1310
+ /**
1311
+ * UI-visible loading: a suggest request outside re-edit and the post-select
1312
+ * press animation, or an `optionOverrides` entry still answering for the pill
1313
+ * on screen (which shows the skeleton in any mode — its pill has nothing else
1314
+ * to show yet).
1315
+ */
1282
1316
  function computeUiLoading(s) {
1283
- return s.isLoading && !s.editingParam && !s.inSelectionAnimation;
1317
+ return (s.isLoading && !s.editingParam && !s.inSelectionAnimation) || s.isSearchingOptions;
1284
1318
  }
1285
1319
  function computeState(s) {
1286
1320
  return {
@@ -1309,6 +1343,7 @@ function computeState(s) {
1309
1343
  function computeDropdown(s, optionsPosition) {
1310
1344
  const editingParam = s.editingParam;
1311
1345
  const editingIdentified = s.editingIdentified;
1346
+ const dateSelection = dateSelectionFor(s);
1312
1347
  const activeSuggestion = s.actionableSuggestions[0];
1313
1348
  const dropdownPill = editingParam
1314
1349
  ? {
@@ -1346,9 +1381,9 @@ function computeDropdown(s, optionsPosition) {
1346
1381
  // has to know which body to draw.
1347
1382
  formatType: s.activeFormatType,
1348
1383
  dateView: s.dateView,
1349
- selectedDateIso: editingIdentified
1350
- ? editingIdentified.iso
1351
- : selectedIsoFromText(editingParam?.text),
1384
+ selectedDateIso: dateSelection.selectedIso,
1385
+ selectedDateRange: dateSelection.selectedRange,
1386
+ dateRangeStart: dateSelection.rangeStart,
1352
1387
  optionsPosition,
1353
1388
  };
1354
1389
  }
@@ -2404,10 +2439,20 @@ const monthLabel = monthLabel$1;
2404
2439
  const parseDate = parseDate$1;
2405
2440
  const parseLooseDate = parseLooseDate$1;
2406
2441
  const WEEKDAY_LABELS = WEEKDAY_LABELS$1;
2442
+ // Range helpers, for a custom calendar that answers a span in two taps.
2443
+ // The two metadata keys are what a committed range records its ends under, so
2444
+ // a consumer reading them back never hardcodes the strings.
2445
+ const DATE_RANGE_META_END = DATE_RANGE_META_END$1;
2446
+ const DATE_RANGE_META_START = DATE_RANGE_META_START$1;
2447
+ const dateCellMarks = dateCellMarks$1;
2448
+ const formatDateRange = formatDateRange$1;
2449
+ const parseLooseDateRange = parseLooseDateRange$1;
2450
+ const selectedRangeFor = selectedRangeFor$1;
2451
+ const visibleDateRange = visibleDateRange$1;
2407
2452
 
2408
2453
  /**
2409
2454
  * Generated bundle index. Do not edit.
2410
2455
  */
2411
2456
 
2412
- export { AIAutocompleteComponent, AIAutocompleteController, AIAutocompleteDropdownComponent, AIAutocompleteInputDirective, AIAutocompleteModule, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, formatDate, isoDate, monthLabel, parseDate, parseLooseDate, withSkippedParams };
2457
+ export { AIAutocompleteComponent, AIAutocompleteController, AIAutocompleteDropdownComponent, AIAutocompleteInputDirective, AIAutocompleteModule, DATE_RANGE_META_END, DATE_RANGE_META_START, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, dateCellMarks, formatDate, formatDateRange, isoDate, monthLabel, parseDate, parseLooseDate, parseLooseDateRange, selectedRangeFor, visibleDateRange, withSkippedParams };
2413
2458
  //# sourceMappingURL=magicx-eng-ai-autocomplete-angular.mjs.map