@magicx-eng/ai-autocomplete-angular 0.15.0 → 0.16.1

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 (20) hide show
  1. package/README.md +24 -4
  2. package/esm2020/lib/ai-autocomplete-dropdown/ai-autocomplete-dropdown.component.mjs +10 -6
  3. package/esm2020/lib/controller/ai-autocomplete.controller.mjs +6 -5
  4. package/esm2020/lib/internal/date-grid/date-grid.component.mjs +33 -9
  5. package/esm2020/lib/shared/types.mjs +1 -1
  6. package/esm2020/public-api.mjs +12 -2
  7. package/fesm2015/magicx-eng-ai-autocomplete-angular.mjs +59 -20
  8. package/fesm2015/magicx-eng-ai-autocomplete-angular.mjs.map +1 -1
  9. package/fesm2020/magicx-eng-ai-autocomplete-angular.mjs +55 -16
  10. package/fesm2020/magicx-eng-ai-autocomplete-angular.mjs.map +1 -1
  11. package/lib/ai-autocomplete-dropdown/ai-autocomplete-dropdown.component.d.ts +3 -3
  12. package/lib/ai-autocomplete-dropdown/ai-autocomplete-dropdown.component.d.ts.map +1 -1
  13. package/lib/controller/ai-autocomplete.controller.d.ts.map +1 -1
  14. package/lib/internal/date-grid/date-grid.component.d.ts +15 -4
  15. package/lib/internal/date-grid/date-grid.component.d.ts.map +1 -1
  16. package/lib/shared/types.d.ts +18 -7
  17. package/lib/shared/types.d.ts.map +1 -1
  18. package/package.json +2 -2
  19. package/public-api.d.ts +9 -2
  20. 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,8 +29,8 @@ 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();
@@ -57,8 +57,32 @@ 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;
@@ -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
@@ -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;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", "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;transition:opacity 1s cubic-bezier(.4,0,.2,1)}.magicx-aia-scroll-arrow[data-aia-visible]{pointer-events:auto;opacity: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-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;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"] }]
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;transition:opacity 1s cubic-bezier(.4,0,.2,1)}.magicx-aia-scroll-arrow[data-aia-visible]{pointer-events:auto;opacity: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-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: [{
@@ -1321,6 +1349,7 @@ function computeState(s) {
1321
1349
  function computeDropdown(s, optionsPosition) {
1322
1350
  const editingParam = s.editingParam;
1323
1351
  const editingIdentified = s.editingIdentified;
1352
+ const dateSelection = dateSelectionFor(s);
1324
1353
  const activeSuggestion = s.actionableSuggestions[0];
1325
1354
  const dropdownPill = editingParam
1326
1355
  ? {
@@ -1358,9 +1387,9 @@ function computeDropdown(s, optionsPosition) {
1358
1387
  // has to know which body to draw.
1359
1388
  formatType: s.activeFormatType,
1360
1389
  dateView: s.dateView,
1361
- selectedDateIso: editingIdentified
1362
- ? editingIdentified.iso
1363
- : selectedIsoFromText(editingParam === null || editingParam === void 0 ? void 0 : editingParam.text),
1390
+ selectedDateIso: dateSelection.selectedIso,
1391
+ selectedDateRange: dateSelection.selectedRange,
1392
+ dateRangeStart: dateSelection.rangeStart,
1364
1393
  optionsPosition,
1365
1394
  };
1366
1395
  }
@@ -2435,10 +2464,20 @@ const monthLabel = monthLabel$1;
2435
2464
  const parseDate = parseDate$1;
2436
2465
  const parseLooseDate = parseLooseDate$1;
2437
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;
2438
2477
 
2439
2478
  /**
2440
2479
  * Generated bundle index. Do not edit.
2441
2480
  */
2442
2481
 
2443
- 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 };
2444
2483
  //# sourceMappingURL=magicx-eng-ai-autocomplete-angular.mjs.map