@neuravision/ng-construct 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuravision/ng-construct",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Angular components for the Construct Design System",
   "keywords": [
     "angular",

package/types/neuravision-ng-construct.d.ts

@@ -1467,7 +1467,7 @@ declare class AfDropdownComponent {
     /** Trigger button size. */
     size: _angular_core.InputSignal<AfButtonSize>;
     /** Horizontal alignment of the menu relative to the trigger. */
-    align: _angular_core.InputSignal<"start" | "end">;
+    align: _angular_core.InputSignal<"end" | "start">;
     /** Which side of the trigger the menu opens on. */
     side: _angular_core.InputSignal<"bottom" | "top">;
     /** Menu items. */
@@ -2429,6 +2429,199 @@ declare class AfComboboxComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfComboboxComponent, "af-combobox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "comboboxId": { "alias": "comboboxId"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, never, never, true, never>;
 }
 
+/**
+ * A single suggestion rendered by {@link AfAutocompleteComponent}.
+ *
+ * The component never filters or sorts these — the consumer supplies the
+ * already-resolved, display-ordered list (remote search, client cache, …).
+ * `id` is the stable identity used for tracking and DOM ids; `value` is the
+ * payload handed back on selection.
+ */
+interface AfAutocompleteOption<T = unknown> {
+    /** Stable identity — used for `@for` tracking and the option's DOM id. */
+    id: string;
+    /** Payload emitted via {@link AfAutocompleteComponent.optionSelected}. */
+    value: T;
+    /** Primary text — the accessible name and the default visual label. */
+    label: string;
+    /** Optional secondary text shown beneath the label in the default row. */
+    description?: string;
+    /**
+     * Optional group key. Consecutive options sharing a key render under one
+     * heading (see {@link AfAutocompleteComponent.groupLabels}). Omit for
+     * ungrouped options.
+     */
+    group?: string;
+    /** When true the option is shown but cannot be highlighted or selected. */
+    disabled?: boolean;
+}
+/** Template context exposed to a custom option template. */
+interface AfAutocompleteOptionContext {
+    /** The option being rendered (also available as the implicit value). */
+    $implicit: AfAutocompleteOption;
+    /** Same as {@link $implicit}; named for readable `let-option="option"`. */
+    option: AfAutocompleteOption;
+    /** The current query text, e.g. for highlighting matched substrings. */
+    query: string;
+}
+/**
+ * Marks an `<ng-template>` as the custom row renderer for
+ * {@link AfAutocompleteComponent}. Without it the component falls back to
+ * rendering `label` + `description`.
+ *
+ * @example
+ * <af-autocomplete [options]="opts">
+ *   <ng-template afAutocompleteOption let-option="option">
+ *     <af-avatar [name]="option.label" />
+ *     {{ option.label }}
+ *   </ng-template>
+ * </af-autocomplete>
+ */
+declare class AfAutocompleteOptionDirective {
+    readonly template: TemplateRef<AfAutocompleteOptionContext>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfAutocompleteOptionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AfAutocompleteOptionDirective, "ng-template[afAutocompleteOption]", never, {}, {}, never, never, true, never>;
+}
+/** Internal: an option paired with its flat index across all groups. */
+interface IndexedOption {
+    option: AfAutocompleteOption;
+    flatIndex: number;
+}
+/** Internal: a rendered group (label `undefined` => ungrouped, no heading). */
+interface DisplayGroup {
+    key: string;
+    label: string | undefined;
+    items: IndexedOption[];
+}
+/**
+ * Accessible async / remote autocomplete (typeahead) following the WAI-ARIA 1.2
+ * combobox-with-listbox pattern.
+ *
+ * Unlike {@link AfComboboxComponent} — which owns a static option list and
+ * filters it by label substring — this component is **external-filter only**:
+ * the consumer owns fetching and filtering, then feeds the resolved results in
+ * via `options` (and toggles `loading`). That makes it suitable for remote
+ * search across multiple sources, where a hit may have matched on a field that
+ * is not part of its visible label (e.g. a user matched by e-mail).
+ *
+ * It emits a selection **event** rather than binding a value, so the same box
+ * can drive an action (apply a filter, navigate) while keeping the free text.
+ *
+ * Features: option groups with headings, a loading row, an empty row, rich
+ * rows via {@link AfAutocompleteOptionDirective}, full keyboard support
+ * (Arrow/Home/End/Enter/Escape/Tab) and screen-reader announcements.
+ *
+ * @example
+ * <af-autocomplete
+ *   label="Search"
+ *   [(query)]="query"
+ *   [options]="results()"
+ *   [loading]="loading()"
+ *   [minChars]="2"
+ *   clearQueryOnSelect
+ *   (optionSelected)="apply($event)"
+ * >
+ *   <ng-template afAutocompleteOption let-option="option">…</ng-template>
+ * </af-autocomplete>
+ */
+declare class AfAutocompleteComponent {
+    private static nextId;
+    /** Field label rendered above the input. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Placeholder text for the input. */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Hint text shown below the input (hidden while {@link error} is set). */
+    readonly hint: _angular_core.InputSignal<string>;
+    /** Error message — shows the error state and message. */
+    readonly error: _angular_core.InputSignal<string>;
+    /** Whether the field is required (renders the `*` indicator). */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the input is disabled. */
+    readonly disabled: _angular_core.ModelSignal<boolean>;
+    /** Size variant. */
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    /**
+     * The suggestions to display, already filtered and ordered by the consumer.
+     * The component does not filter them.
+     */
+    readonly options: _angular_core.InputSignal<AfAutocompleteOption<unknown>[]>;
+    /** Shows the loading row / spinner while a fetch is in flight. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Minimum trimmed query length before the listbox opens. */
+    readonly minChars: _angular_core.InputSignal<number>;
+    /** Text shown when a query is present but no options match. */
+    readonly emptyText: _angular_core.InputSignal<string>;
+    /** Text shown in the loading row. */
+    readonly loadingText: _angular_core.InputSignal<string>;
+    /** Whether re-focusing the input re-opens the listbox. */
+    readonly openOnFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * When true the panel stays closed while there are no options and no fetch
+     * is in flight — instead of showing the empty row. Useful when the same box
+     * also drives a side effect (e.g. a live text filter) so an empty suggestion
+     * list should be silent rather than intrusive.
+     */
+    readonly hideOnEmpty: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When true the query text is cleared after a selection (action-style use). */
+    readonly clearQueryOnSelect: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Render the leading search icon. */
+    readonly showSearchIcon: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Render the trailing clear (×) button when the query is non-empty. */
+    readonly showClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible label for the clear button. */
+    readonly clearAriaLabel: _angular_core.InputSignal<string>;
+    /** Maps a group key to its display heading; falls back to the key itself. */
+    readonly groupLabels: _angular_core.InputSignal<Record<string, string>>;
+    /** Explicit group ordering by key; unlisted keys keep first-seen order. */
+    readonly groupOrder: _angular_core.InputSignal<string[]>;
+    /** Unique base id for the field's `id`/`aria` wiring. */
+    readonly autocompleteId: _angular_core.InputSignal<string>;
+    /** Two-way bound query text. The consumer debounces this and feeds `options`. */
+    readonly query: _angular_core.ModelSignal<string>;
+    /** Emitted when the user selects an enabled option. */
+    readonly optionSelected: _angular_core.OutputEmitterRef<AfAutocompleteOption<unknown>>;
+    protected readonly optionTemplate: _angular_core.Signal<AfAutocompleteOptionDirective | undefined>;
+    protected readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    protected readonly isOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly highlightedIndex: _angular_core.WritableSignal<number>;
+    get inputId(): string;
+    get listboxId(): string;
+    get hintId(): string;
+    get errorId(): string;
+    protected readonly rootClasses: _angular_core.Signal<string>;
+    /** True once the trimmed query reaches {@link minChars}. */
+    protected readonly hasMinChars: _angular_core.Signal<boolean>;
+    /** Flat, display-ordered options used for keyboard navigation. */
+    protected readonly flatOptions: _angular_core.Signal<AfAutocompleteOption<unknown>[]>;
+    /** Options grouped for rendering, each paired with its flat index. */
+    protected readonly displayGroups: _angular_core.Signal<DisplayGroup[]>;
+    /** Whether the listbox is visually open. */
+    protected readonly panelOpen: _angular_core.Signal<boolean>;
+    /** Whether to render the "no results" row. */
+    protected readonly showEmpty: _angular_core.Signal<boolean>;
+    protected readonly activeDescendantId: _angular_core.Signal<string | null>;
+    protected readonly statusMessage: _angular_core.Signal<string>;
+    protected ariaDescribedBy(): string | null;
+    protected optionDomId(flatIndex: number): string;
+    protected groupLabelId(groupIndex: number): string;
+    protected onInput(event: Event): void;
+    protected onFocus(): void;
+    /** Selects an enabled option: emits it, then clears or restores the text. */
+    selectOption(option: AfAutocompleteOption): void;
+    /** Clears the query text and closes the listbox. */
+    clear(): void;
+    /** Closes the listbox without changing the query. */
+    close(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onDocumentClick(event: MouseEvent): void;
+    private moveHighlight;
+    private firstEnabledIndex;
+    private lastEnabledIndex;
+    private scrollHighlightedIntoView;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfAutocompleteComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfAutocompleteComponent, "af-autocomplete", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "openOnFocus": { "alias": "openOnFocus"; "required": false; "isSignal": true; }; "hideOnEmpty": { "alias": "hideOnEmpty"; "required": false; "isSignal": true; }; "clearQueryOnSelect": { "alias": "clearQueryOnSelect"; "required": false; "isSignal": true; }; "showSearchIcon": { "alias": "showSearchIcon"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "groupLabels": { "alias": "groupLabels"; "required": false; "isSignal": true; }; "groupOrder": { "alias": "groupOrder"; "required": false; "isSignal": true; }; "autocompleteId": { "alias": "autocompleteId"; "required": false; "isSignal": true; }; "query": { "alias": "query"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "query": "queryChange"; "optionSelected": "optionSelected"; }, ["optionTemplate"], never, true, never>;
+}
+
 interface AfFileValidationError {
     file: File;
     type: 'type' | 'size';
@@ -4438,5 +4631,5 @@ declare class AfFormatLabelPipe implements PipeTransform {
     static ɵpipe: _angular_core.ɵɵPipeDeclaration<AfFormatLabelPipe, "afFormatLabel", true>;
 }
 
-export { AF_ACCORDION_I18N, AF_ALERT_I18N, AF_CHART_I18N, AF_CHART_PALETTE_SIZE, AF_INPUT_I18N, AF_SELECT_I18N, AF_SELECT_MENU_I18N, AF_TREE_I18N, AVATAR_SEED_PALETTE_SIZE, AfAccordionComponent, AfAccordionHarness, AfAccordionItemComponent, AfAccordionItemHarness, AfAlertComponent, AfAlertHarness, AfAppShellComponent, AfAppShellPageHeaderComponent, AfAppShellV2Component, AfAppShellV2ToolbarComponent, AfAvatarComponent, AfBadgeComponent, AfBadgeHarness, AfBannerComponent, AfBarChartComponent, AfBarChartHarness, AfBreadcrumbsComponent, AfButtonComponent, AfButtonHarness, AfCardComponent, AfCellDefDirective, AfChartDataTableComponent, AfCheckboxComponent, AfChipComponent, AfChipInputComponent, AfComboboxComponent, AfDataTableComponent, AfDatepickerComponent, AfDividerComponent, AfDonutChartComponent, AfDonutChartHarness, AfDrawerComponent, AfDropdownComponent, AfEmptyStateComponent, AfFieldComponent, AfFileUploadComponent, AfFormatLabelPipe, AfGaugeComponent, AfGaugeHarness, AfIconComponent, AfInputComponent, AfInputHarness, AfLineChartComponent, AfLineChartHarness, AfModalComponent, AfNavItemComponent, AfNavTabsComponent, AfNavbarComponent, AfPaginationComponent, AfPopoverComponent, AfPopoverTriggerDirective, AfProgressBarComponent, AfRadioComponent, AfRadioGroupComponent, AfSelectComponent, AfSelectHarness, AfSelectMenuComponent, AfSelectMenuHarness, AfSidebarComponent, AfSkeletonComponent, AfSkipLinkComponent, AfSliderComponent, AfSparklineComponent, AfSparklineHarness, AfSpinnerComponent, AfSwitchComponent, AfTabPanelComponent, AfTableBodyComponent, AfTableCellComponent, AfTableComponent, AfTableHeaderCellComponent, AfTableHeaderComponent, AfTableRowComponent, AfTabsComponent, AfTextareaComponent, AfToastContainerComponent, AfToastService, AfToggleGroupComponent, AfToolbarComponent, AfTooltipDirective, AfTreeComponent, AfTreeHarness, AfTreeNodeHarness };
-export type { AfAccordionI18n, AfAlertI18n, AfAlertVariant, AfAvatarSize, AfAvatarStatus, AfBadgeVariant, AfBannerAppearance, AfBannerPosition, AfBannerVariant, AfBarLayout, AfBreadcrumb, AfButtonSize, AfButtonType, AfButtonVariant, AfCardElevation, AfCardPadding, AfChartDatum, AfChartI18n, AfChartSeries, AfChartStatus, AfChartTableModel, AfChipAppearance, AfChipSize, AfChipVariant, AfColumn, AfComboboxOption, AfDataRow, AfDataTableConfig, AfDateRange, AfDatepickerMode, AfDatepickerValueFormat, AfDatepickerView, AfDividerColor, AfDividerOrientation, AfDividerSpacing, AfDrawerPosition, AfDrawerSize, AfDropdownItem, AfEmptyStateSize, AfEmptyStateVariant, AfFileEntry, AfFileValidationError, AfGaugeThreshold, AfIconSize, AfInputI18n, AfInputType, AfNavTab, AfNavTabsSize, AfNavTabsVariant, AfNavbarSize, AfNavbarVariant, AfPopoverAlign, AfPopoverPosition, AfPopoverSize, AfProgressBarSize, AfProgressBarVariant, AfSelectI18n, AfSelectMenuI18n, AfSelectMenuOption, AfSelectOption, AfShellPanelState, AfShellSidebarState, AfSidebarMode, AfSkeletonVariant, AfSliderSize, AfSortDirection, AfSortState, AfSpinnerSize, AfTab, AfTableCellType, AfTableVariant, AfToast, AfToastVariant, AfToggleGroupSize, AfToggleItem, AfTooltipPosition, AfTreeI18n, TreeNode, TreeNodeTemplateContext, TreeSelectionMode, TreeToggleEvent };
+export { AF_ACCORDION_I18N, AF_ALERT_I18N, AF_CHART_I18N, AF_CHART_PALETTE_SIZE, AF_INPUT_I18N, AF_SELECT_I18N, AF_SELECT_MENU_I18N, AF_TREE_I18N, AVATAR_SEED_PALETTE_SIZE, AfAccordionComponent, AfAccordionHarness, AfAccordionItemComponent, AfAccordionItemHarness, AfAlertComponent, AfAlertHarness, AfAppShellComponent, AfAppShellPageHeaderComponent, AfAppShellV2Component, AfAppShellV2ToolbarComponent, AfAutocompleteComponent, AfAutocompleteOptionDirective, AfAvatarComponent, AfBadgeComponent, AfBadgeHarness, AfBannerComponent, AfBarChartComponent, AfBarChartHarness, AfBreadcrumbsComponent, AfButtonComponent, AfButtonHarness, AfCardComponent, AfCellDefDirective, AfChartDataTableComponent, AfCheckboxComponent, AfChipComponent, AfChipInputComponent, AfComboboxComponent, AfDataTableComponent, AfDatepickerComponent, AfDividerComponent, AfDonutChartComponent, AfDonutChartHarness, AfDrawerComponent, AfDropdownComponent, AfEmptyStateComponent, AfFieldComponent, AfFileUploadComponent, AfFormatLabelPipe, AfGaugeComponent, AfGaugeHarness, AfIconComponent, AfInputComponent, AfInputHarness, AfLineChartComponent, AfLineChartHarness, AfModalComponent, AfNavItemComponent, AfNavTabsComponent, AfNavbarComponent, AfPaginationComponent, AfPopoverComponent, AfPopoverTriggerDirective, AfProgressBarComponent, AfRadioComponent, AfRadioGroupComponent, AfSelectComponent, AfSelectHarness, AfSelectMenuComponent, AfSelectMenuHarness, AfSidebarComponent, AfSkeletonComponent, AfSkipLinkComponent, AfSliderComponent, AfSparklineComponent, AfSparklineHarness, AfSpinnerComponent, AfSwitchComponent, AfTabPanelComponent, AfTableBodyComponent, AfTableCellComponent, AfTableComponent, AfTableHeaderCellComponent, AfTableHeaderComponent, AfTableRowComponent, AfTabsComponent, AfTextareaComponent, AfToastContainerComponent, AfToastService, AfToggleGroupComponent, AfToolbarComponent, AfTooltipDirective, AfTreeComponent, AfTreeHarness, AfTreeNodeHarness };
+export type { AfAccordionI18n, AfAlertI18n, AfAlertVariant, AfAutocompleteOption, AfAutocompleteOptionContext, AfAvatarSize, AfAvatarStatus, AfBadgeVariant, AfBannerAppearance, AfBannerPosition, AfBannerVariant, AfBarLayout, AfBreadcrumb, AfButtonSize, AfButtonType, AfButtonVariant, AfCardElevation, AfCardPadding, AfChartDatum, AfChartI18n, AfChartSeries, AfChartStatus, AfChartTableModel, AfChipAppearance, AfChipSize, AfChipVariant, AfColumn, AfComboboxOption, AfDataRow, AfDataTableConfig, AfDateRange, AfDatepickerMode, AfDatepickerValueFormat, AfDatepickerView, AfDividerColor, AfDividerOrientation, AfDividerSpacing, AfDrawerPosition, AfDrawerSize, AfDropdownItem, AfEmptyStateSize, AfEmptyStateVariant, AfFileEntry, AfFileValidationError, AfGaugeThreshold, AfIconSize, AfInputI18n, AfInputType, AfNavTab, AfNavTabsSize, AfNavTabsVariant, AfNavbarSize, AfNavbarVariant, AfPopoverAlign, AfPopoverPosition, AfPopoverSize, AfProgressBarSize, AfProgressBarVariant, AfSelectI18n, AfSelectMenuI18n, AfSelectMenuOption, AfSelectOption, AfShellPanelState, AfShellSidebarState, AfSidebarMode, AfSkeletonVariant, AfSliderSize, AfSortDirection, AfSortState, AfSpinnerSize, AfTab, AfTableCellType, AfTableVariant, AfToast, AfToastVariant, AfToggleGroupSize, AfToggleItem, AfTooltipPosition, AfTreeI18n, TreeNode, TreeNodeTemplateContext, TreeSelectionMode, TreeToggleEvent };