import { type AfterViewChecked, type OnChanges, type OnDestroy, type OnInit, type SimpleChanges } from "@angular/core";
import { type AppearanceMode, type DateMonthView, type DateSelection, type Product, type ProductImageFallback, type ProductsLayout, type Suggestion, type SuggestionOption, type UIStrings } from "@magicx-eng/ai-autocomplete-vanilla";
import { type Observable } from "rxjs";
import type { AIAutocompleteController } from "../controller/ai-autocomplete.controller";
import * as i0 from "@angular/core";
interface DropdownVm {
    pills: Suggestion[];
    options: SuggestionOption[];
    activeIndex: number;
    isActivePillSelected: boolean;
    isLoading: boolean;
    /** The loading skeleton is fading out before the response's options replace it. */
    skeletonExiting: boolean;
    showsPills: boolean;
    /** Whether the pillbar ends in the trailing "skip" button. */
    showsSkip: boolean;
    /**
     * Disabled state for the skip button: loading, or the post-selection window
     * where isLoading is suppressed but the core's skipActivePill() no-ops.
     */
    skipDisabled: boolean;
    /** Active pill's label, for the skip button's aria-label. */
    activePillLabel: string;
    showsOptions: boolean;
    /** Whether the calendar body renders in place of the options grid. */
    showsDateGrid: boolean;
    /** The month the calendar shows. Null unless `showsDateGrid`. */
    dateView: DateMonthView | null;
    /** What the calendar paints as answered — see the core's `dateSelectionFor`. */
    dateSelection: DateSelection;
    showsFallbackSkeleton: boolean;
    isVisible: boolean;
    /** Product cards for the strip. Empty unless `products` is configured. */
    products: Product[];
    /** Identity of the suggestion the options belong to — drives the grid's scroll reset. */
    groupKey: string;
    footerKey: string;
    footerHint: string;
    /** The words of the widget language. */
    strings: UIStrings;
    optionsPosition: "above" | "below";
    /** Whether option rows draw their `icon_svg` before the text. */
    showOptionIcons: boolean;
    /** Whether option rows draw their `image_url` as a thumbnail before the text. */
    showOptionImages: boolean;
    /** Whether option rows show their `item_count` at the trailing edge. */
    showOptionCounts: boolean;
}
/**
 * Tier 2 dropdown component — the Angular equivalent of React's
 * `<AIAutocompleteDropdown />`. Renders the pillbar, options grid, and
 * loading skeleton based on the supplied controller's `dropdown$` snapshot.
 *
 * ```html
 * <ai-autocomplete-dropdown [controller]="ac"></ai-autocomplete-dropdown>
 * ```
 *
 * All actions (pill click, option select, option highlight) are forwarded to
 * the controller. Consumers who need to observe these events can subscribe
 * to the controller's per-field observables.
 *
 * @public
 */
export declare class AIAutocompleteDropdownComponent implements OnInit, OnChanges, AfterViewChecked, OnDestroy {
    /** The controller that owns the autocomplete state. Required. */
    controller: AIAutocompleteController;
    /** Whether to render the pillbar above the options grid. Default: true. */
    showPills: boolean;
    /**
     * Whether the pillbar ends in a small "skip" button that dismisses the
     * active pill — same action as pressing → at the end of the input. It sits
     * at the trailing edge of the bar: visually top-right when the dropdown
     * opens below the input, bottom-right when `optionsPosition` is "above".
     * Default: true. Hidden automatically during re-edit and while the fallback
     * skeleton renders.
     */
    showSkipButton: boolean;
    /**
     * Whether option rows draw their `icon_svg` before the text. Default: true.
     * Set to false to render option rows as text only.
     */
    showOptionIcons: boolean;
    /**
     * Whether option rows draw their `image_url` as a square thumbnail before
     * the text, in place of the icon. Default: true. Set to false to render
     * option rows without pictures.
     */
    showOptionImages: boolean;
    /**
     * Whether option rows show their `item_count` as a muted label at the
     * trailing edge ("12 items"). Default: true. Set to false to hide the counts.
     */
    showOptionCounts: boolean;
    /**
     * How the product strip lays its cards out: a horizontally scrolling row
     * (the default), or the same cards stacked as full-width rows.
     */
    productsLayout: ProductsLayout;
    /** Missing/failed image fallback. Style initials with `[data-aia-product-initial]`. */
    productImageFallback: ProductImageFallback;
    /** Optional CSS class applied to the dropdown root. */
    className?: string;
    /**
     * Color mode for a standalone dropdown. When set, the dropdown self-scopes the
     * design tokens to its own root (adds `magicx-aia` + `data-mode`), so it needs
     * no `.magicx-aia` wrapper. `"auto"` follows `prefers-color-scheme`. Leave it
     * unset when the dropdown sits inside a `.magicx-aia` ancestor (e.g. Tier 1).
     */
    mode?: AppearanceMode;
    /**
     * The widget language. It picks the words the dropdown draws: Spanish for
     * any "es" tag, else English. Only this input counts, as in the vanilla
     * widget. Tier 1 passes its own `language`.
     */
    language?: string;
    /** Concrete resolved mode, or null when `mode` is unset (inherit from ancestor). */
    resolvedMode: "light" | "dark" | null;
    private modeMql?;
    private modeListener?;
    private readonly cdr;
    private readonly host;
    private readonly zone;
    private releaseScroll?;
    /** Root class list — adds `magicx-aia` only when self-scoping via `mode`. */
    get rootClass(): string;
    /** Fallback skeleton-bar widths used when loading with zero cached options. */
    readonly fallbackSkeletonBarWidths: number[];
    /** Accessible name of the "more below" scroll arrow. */
    get scrollArrowLabel(): string;
    private dropdownRootRef?;
    private scrollArrowRef?;
    /** The grid the scroll-arrow controller is currently bound to. */
    private scrollArrowBinding;
    /**
     * Attribution/branding link URL for the footer, with a `utm_source` derived
     * from the embedding page's hostname (see {@link buildAttributionUrl}).
     */
    readonly brandHref: string;
    /**
     * View-model derived from the controller's `dropdown$`. Adds three booleans
     * (`showsPills`, `showsOptions`, `showsFallbackSkeleton`, `isVisible`) that
     * keep template-level logic to a property read per §19.6.
     *
     * Initialized once in `ngOnInit` — must NOT be a getter. A getter returns a
     * fresh `Observable` instance on every property read; with OnPush + `async`
     * pipe that means each change-detection cycle unsubscribes/resubscribes,
     * causing the `*ngIf="vm$ | async as vm"` root to briefly resolve `null`
     * and flicker the entire dropdown DOM.
     */
    vm$: Observable<DropdownVm>;
    private readonly showPills$;
    private readonly showSkipButton$;
    private readonly showOptionIcons$;
    private readonly showOptionImages$;
    private readonly showOptionCounts$;
    private readonly language$;
    private lastVisibleContent;
    ngOnInit(): void;
    ngOnChanges(changes: SimpleChanges): void;
    /**
     * Keep the core's "more below" arrow controller bound to whichever options
     * grid is currently rendered — the Angular analogue of React's
     * useScrollArrow. The controller owns the behaviour (measuring, visibility,
     * the page-scroll on click — see the core's scrollArrow.ts); this only hands
     * it the live elements after each view check, re-attaching when the grid
     * element is replaced and tearing down when there is no grid.
     */
    ngAfterViewChecked(): void;
    ngOnDestroy(): void;
    /**
     * Resolve the `mode` input into `resolvedMode`. Unset → null (the dropdown
     * stays class-less and inherits from a `.magicx-aia` ancestor). `"auto"` reads
     * `prefers-color-scheme` and tracks it live via a media-query listener.
     */
    private applyMode;
    private teardownModeListener;
    /** Build the view-model stream from the current controller + showPills$. */
    private initVm;
    trackByWidth: (_: number, w: number) => number;
    onPillClick(index: number): void;
    onSkip(): void;
    onSelect(option: SuggestionOption): void;
    onPreviousMonth(): void;
    onNextMonth(): void;
    onHighlight(index: number): void;
    onUnhighlight(index: number): void;
    onProductSelect(product: Product): void;
    /**
     * A card taking focus blurs the editor, which would otherwise close the
     * panel out from under the card the user just tabbed to.
     */
    onProductFocusChange(focused: boolean): void;
    preventBlur(event: Event): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<AIAutocompleteDropdownComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<AIAutocompleteDropdownComponent, "ai-autocomplete-dropdown", never, { "controller": "controller"; "showPills": "showPills"; "showSkipButton": "showSkipButton"; "showOptionIcons": "showOptionIcons"; "showOptionImages": "showOptionImages"; "showOptionCounts": "showOptionCounts"; "productsLayout": "productsLayout"; "productImageFallback": "productImageFallback"; "className": "className"; "mode": "mode"; "language": "language"; }, {}, never, never, true, never>;
}
export {};
//# sourceMappingURL=ai-autocomplete-dropdown.component.d.ts.map