@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/fesm2015/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) => { var _a; return (_a = cellIso$1(option)) !== null && _a !== void 0 ? _a : `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
@@ -431,7 +455,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
431
455
  * `packages/react/src/components/SuggestionItem.tsx`. Handles:
432
456
  *
433
457
  * - Tappable vs non-tappable cursor + hover styling
434
- * - Pressed-state compress animation (500ms, single-flight)
458
+ * - Pressed-state compress animation (170ms, single-flight)
435
459
  * - Keyboard activation (Enter/Space)
436
460
  * - ARIA `role="option"` + `aria-selected` for the listbox pattern
437
461
  * - Loading skeleton when `loading=true`
@@ -480,7 +504,7 @@ class SuggestionItemComponent {
480
504
  this.pressedTimer = setTimeout(() => {
481
505
  this.pressed = false;
482
506
  this.cdr.markForCheck();
483
- }, 500);
507
+ }, 170);
484
508
  }
485
509
  onMouseEnter() {
486
510
  if (this.loading || !this.option.is_tappable)
@@ -497,10 +521,10 @@ class SuggestionItemComponent {
497
521
  }
498
522
  }
499
523
  SuggestionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
500
- 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 });
524
+ 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 });
501
525
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionItemComponent, decorators: [{
502
526
  type: Component,
503
- 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"] }]
527
+ 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"] }]
504
528
  }], propDecorators: { option: [{
505
529
  type: Input
506
530
  }], isHighlighted: [{
@@ -817,7 +841,7 @@ class AIAutocompleteDropdownComponent {
817
841
  this.showPills$,
818
842
  this.showSkipButton$,
819
843
  ]).pipe(map(([dd, showPills, showSkipButton]) => {
820
- var _a, _b, _c, _d, _e, _f;
844
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
821
845
  const activeSuggestion = dd.suggestions[0];
822
846
  const options = (_a = activeSuggestion === null || activeSuggestion === void 0 ? void 0 : activeSuggestion.options) !== null && _a !== void 0 ? _a : [];
823
847
  const showsPills = showPills && (dd.pills.length > 0 || dd.isLoading);
@@ -835,7 +859,7 @@ class AIAutocompleteDropdownComponent {
835
859
  // derive layer — so the two are the same list drawn two different
836
860
  // ways, and never both at once (two elements answering to the same
837
861
  // option id would break keyboard commit).
838
- const isDate = dd.formatType === "date" && dd.dateView != null;
862
+ const isDate = isCalendarFormat((_b = dd.formatType) !== null && _b !== void 0 ? _b : "options") && dd.dateView != null;
839
863
  const showsOptions = options.length > 0 && !isDate;
840
864
  const showsDateGrid = options.length > 0 && isDate;
841
865
  const showsFallbackSkeleton = dd.isLoading && !showsOptions && !showsDateGrid;
@@ -852,7 +876,7 @@ class AIAutocompleteDropdownComponent {
852
876
  if (!isVisible && this.lastVisibleContent) {
853
877
  return Object.assign(Object.assign({}, this.lastVisibleContent), { isVisible: false });
854
878
  }
855
- const optionHighlighted = dd.activeIndex >= 0 && Boolean((_b = options[dd.activeIndex]) === null || _b === void 0 ? void 0 : _b.is_tappable);
879
+ const optionHighlighted = dd.activeIndex >= 0 && Boolean((_c = options[dd.activeIndex]) === null || _c === void 0 ? void 0 : _c.is_tappable);
856
880
  const { key: footerKey, hint: footerHint } = getFooterHint(optionHighlighted, dd.isInputEmpty);
857
881
  const content = {
858
882
  pills: dd.pills,
@@ -863,11 +887,15 @@ class AIAutocompleteDropdownComponent {
863
887
  showsPills,
864
888
  showsSkip,
865
889
  skipDisabled: dd.isLoading || Boolean(dd.inSelectionAnimation),
866
- activePillLabel: (_d = (_c = dd.pills[0]) === null || _c === void 0 ? void 0 : _c.text) !== null && _d !== void 0 ? _d : "",
890
+ activePillLabel: (_e = (_d = dd.pills[0]) === null || _d === void 0 ? void 0 : _d.text) !== null && _e !== void 0 ? _e : "",
867
891
  showsOptions,
868
892
  showsDateGrid,
869
- dateView: (_e = dd.dateView) !== null && _e !== void 0 ? _e : null,
870
- selectedDateIso: (_f = dd.selectedDateIso) !== null && _f !== void 0 ? _f : null,
893
+ dateView: (_f = dd.dateView) !== null && _f !== void 0 ? _f : null,
894
+ dateSelection: {
895
+ selectedIso: (_g = dd.selectedDateIso) !== null && _g !== void 0 ? _g : null,
896
+ selectedRange: (_h = dd.selectedDateRange) !== null && _h !== void 0 ? _h : null,
897
+ rangeStart: (_j = dd.dateRangeStart) !== null && _j !== void 0 ? _j : null,
898
+ },
871
899
  showsFallbackSkeleton,
872
900
  products: dd.products,
873
901
  groupKey: activeSuggestion ? `${activeSuggestion.type} ${activeSuggestion.text}` : "",
@@ -914,7 +942,7 @@ class AIAutocompleteDropdownComponent {
914
942
  }
915
943
  }
916
944
  AIAutocompleteDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
917
- 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 });
945
+ 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 });
918
946
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteDropdownComponent, decorators: [{
919
947
  type: Component,
920
948
  args: [{ selector: "ai-autocomplete-dropdown", standalone: true, imports: [
@@ -925,7 +953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
925
953
  DateGridComponent,
926
954
  StackComponent,
927
955
  ClusterComponent,
928
- ], 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"] }]
956
+ ], 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"] }]
929
957
  }], propDecorators: { controller: [{
930
958
  type: Input
931
959
  }], showPills: [{
@@ -1285,8 +1313,14 @@ function arrEq(a, b) {
1285
1313
  }
1286
1314
  return true;
1287
1315
  }
1316
+ /**
1317
+ * UI-visible loading: a suggest request outside re-edit and the post-select
1318
+ * press animation, or an `optionOverrides` entry still answering for the pill
1319
+ * on screen (which shows the skeleton in any mode — its pill has nothing else
1320
+ * to show yet).
1321
+ */
1288
1322
  function computeUiLoading(s) {
1289
- return s.isLoading && !s.editingParam && !s.inSelectionAnimation;
1323
+ return (s.isLoading && !s.editingParam && !s.inSelectionAnimation) || s.isSearchingOptions;
1290
1324
  }
1291
1325
  function computeState(s) {
1292
1326
  return {
@@ -1315,6 +1349,7 @@ function computeState(s) {
1315
1349
  function computeDropdown(s, optionsPosition) {
1316
1350
  const editingParam = s.editingParam;
1317
1351
  const editingIdentified = s.editingIdentified;
1352
+ const dateSelection = dateSelectionFor(s);
1318
1353
  const activeSuggestion = s.actionableSuggestions[0];
1319
1354
  const dropdownPill = editingParam
1320
1355
  ? {
@@ -1352,9 +1387,9 @@ function computeDropdown(s, optionsPosition) {
1352
1387
  // has to know which body to draw.
1353
1388
  formatType: s.activeFormatType,
1354
1389
  dateView: s.dateView,
1355
- selectedDateIso: editingIdentified
1356
- ? editingIdentified.iso
1357
- : selectedIsoFromText(editingParam === null || editingParam === void 0 ? void 0 : editingParam.text),
1390
+ selectedDateIso: dateSelection.selectedIso,
1391
+ selectedDateRange: dateSelection.selectedRange,
1392
+ dateRangeStart: dateSelection.rangeStart,
1358
1393
  optionsPosition,
1359
1394
  };
1360
1395
  }
@@ -2429,10 +2464,20 @@ const monthLabel = monthLabel$1;
2429
2464
  const parseDate = parseDate$1;
2430
2465
  const parseLooseDate = parseLooseDate$1;
2431
2466
  const WEEKDAY_LABELS = WEEKDAY_LABELS$1;
2467
+ // Range helpers, for a custom calendar that answers a span in two taps.
2468
+ // The two metadata keys are what a committed range records its ends under, so
2469
+ // a consumer reading them back never hardcodes the strings.
2470
+ const DATE_RANGE_META_END = DATE_RANGE_META_END$1;
2471
+ const DATE_RANGE_META_START = DATE_RANGE_META_START$1;
2472
+ const dateCellMarks = dateCellMarks$1;
2473
+ const formatDateRange = formatDateRange$1;
2474
+ const parseLooseDateRange = parseLooseDateRange$1;
2475
+ const selectedRangeFor = selectedRangeFor$1;
2476
+ const visibleDateRange = visibleDateRange$1;
2432
2477
 
2433
2478
  /**
2434
2479
  * Generated bundle index. Do not edit.
2435
2480
  */
2436
2481
 
2437
- export { AIAutocompleteComponent, AIAutocompleteController, AIAutocompleteDropdownComponent, AIAutocompleteInputDirective, AIAutocompleteModule, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, formatDate, isoDate, monthLabel, parseDate, parseLooseDate, withSkippedParams };
2482
+ 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 };
2438
2483
  //# sourceMappingURL=magicx-eng-ai-autocomplete-angular.mjs.map