@neuravision/ng-construct 0.9.0 → 0.10.0

package/fesm2022/neuravision-ng-construct.mjs

@@ -7790,6 +7790,681 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
   `, styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], comboboxId: [{ type: i0.Input, args: [{ isSignal: true, alias: "comboboxId", required: false }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], listboxRef: [{ type: i0.ViewChild, args: ['listboxEl', { isSignal: true }] }] } });
 
+/**
+ * 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>
+ */
+class AfAutocompleteOptionDirective {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfAutocompleteOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: AfAutocompleteOptionDirective, isStandalone: true, selector: "ng-template[afAutocompleteOption]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfAutocompleteOptionDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[afAutocompleteOption]' }]
+        }] });
+/**
+ * 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>
+ */
+class AfAutocompleteComponent {
+    static nextId = 0;
+    /** Field label rendered above the input. */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Placeholder text for the input. */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Hint text shown below the input (hidden while {@link error} is set). */
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    /** Error message — shows the error state and message. */
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    /** Whether the field is required (renders the `*` indicator). */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : {}), transform: booleanAttribute });
+    /** Whether the input is disabled. */
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Size variant. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * The suggestions to display, already filtered and ordered by the consumer.
+     * The component does not filter them.
+     */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /** Shows the loading row / spinner while a fetch is in flight. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+    /** Minimum trimmed query length before the listbox opens. */
+    minChars = input(1, ...(ngDevMode ? [{ debugName: "minChars" }] : []));
+    /** Text shown when a query is present but no options match. */
+    emptyText = input('No results found', ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
+    /** Text shown in the loading row. */
+    loadingText = input('Searching…', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
+    /** Whether re-focusing the input re-opens the listbox. */
+    openOnFocus = input(true, { ...(ngDevMode ? { debugName: "openOnFocus" } : {}), transform: booleanAttribute });
+    /**
+     * 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.
+     */
+    hideOnEmpty = input(false, { ...(ngDevMode ? { debugName: "hideOnEmpty" } : {}), transform: booleanAttribute });
+    /** When true the query text is cleared after a selection (action-style use). */
+    clearQueryOnSelect = input(false, { ...(ngDevMode ? { debugName: "clearQueryOnSelect" } : {}), transform: booleanAttribute });
+    /** Render the leading search icon. */
+    showSearchIcon = input(true, { ...(ngDevMode ? { debugName: "showSearchIcon" } : {}), transform: booleanAttribute });
+    /** Render the trailing clear (×) button when the query is non-empty. */
+    showClear = input(true, { ...(ngDevMode ? { debugName: "showClear" } : {}), transform: booleanAttribute });
+    /** Accessible label for the clear button. */
+    clearAriaLabel = input('Clear search', ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : []));
+    /** Maps a group key to its display heading; falls back to the key itself. */
+    groupLabels = input({}, ...(ngDevMode ? [{ debugName: "groupLabels" }] : []));
+    /** Explicit group ordering by key; unlisted keys keep first-seen order. */
+    groupOrder = input([], ...(ngDevMode ? [{ debugName: "groupOrder" }] : []));
+    /** Unique base id for the field's `id`/`aria` wiring. */
+    autocompleteId = input(`af-autocomplete-${AfAutocompleteComponent.nextId++}`, ...(ngDevMode ? [{ debugName: "autocompleteId" }] : []));
+    /** Two-way bound query text. The consumer debounces this and feeds `options`. */
+    query = model('', ...(ngDevMode ? [{ debugName: "query" }] : []));
+    /** Emitted when the user selects an enabled option. */
+    optionSelected = output();
+    optionTemplate = contentChild(AfAutocompleteOptionDirective, ...(ngDevMode ? [{ debugName: "optionTemplate" }] : []));
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : []));
+    get inputId() {
+        return `${this.autocompleteId()}-input`;
+    }
+    get listboxId() {
+        return `${this.autocompleteId()}-listbox`;
+    }
+    get hintId() {
+        return `${this.autocompleteId()}-hint`;
+    }
+    get errorId() {
+        return `${this.autocompleteId()}-error`;
+    }
+    rootClasses = computed(() => {
+        const classes = ['ct-autocomplete'];
+        const s = this.size();
+        if (s === 'sm')
+            classes.push('ct-autocomplete--sm');
+        if (s === 'lg')
+            classes.push('ct-autocomplete--lg');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "rootClasses" }] : []));
+    /** True once the trimmed query reaches {@link minChars}. */
+    hasMinChars = computed(() => this.query().trim().length >= this.minChars(), ...(ngDevMode ? [{ debugName: "hasMinChars" }] : []));
+    /** Flat, display-ordered options used for keyboard navigation. */
+    flatOptions = computed(() => this.options(), ...(ngDevMode ? [{ debugName: "flatOptions" }] : []));
+    /** Options grouped for rendering, each paired with its flat index. */
+    displayGroups = computed(() => {
+        const order = this.groupOrder();
+        const labels = this.groupLabels();
+        const groups = new Map();
+        this.options().forEach((option, flatIndex) => {
+            const key = option.group ?? '';
+            let group = groups.get(key);
+            if (!group) {
+                group = { key, label: key ? (labels[key] ?? key) : undefined, items: [] };
+                groups.set(key, group);
+            }
+            group.items.push({ option, flatIndex });
+        });
+        const result = [...groups.values()];
+        if (order.length > 0) {
+            result.sort((a, b) => {
+                const ia = order.indexOf(a.key);
+                const ib = order.indexOf(b.key);
+                return (ia === -1 ? order.length : ia) - (ib === -1 ? order.length : ib);
+            });
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "displayGroups" }] : []));
+    /** Whether the listbox is visually open. */
+    panelOpen = computed(() => {
+        if (!this.isOpen() || !this.hasMinChars())
+            return false;
+        if (this.hideOnEmpty() && !this.loading() && this.flatOptions().length === 0)
+            return false;
+        return true;
+    }, ...(ngDevMode ? [{ debugName: "panelOpen" }] : []));
+    /** Whether to render the "no results" row. */
+    showEmpty = computed(() => !this.loading() && this.flatOptions().length === 0 && this.hasMinChars(), ...(ngDevMode ? [{ debugName: "showEmpty" }] : []));
+    activeDescendantId = computed(() => {
+        const idx = this.highlightedIndex();
+        if (!this.panelOpen() || idx < 0 || idx >= this.flatOptions().length)
+            return null;
+        return this.optionDomId(idx);
+    }, ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : []));
+    statusMessage = computed(() => {
+        if (!this.panelOpen())
+            return '';
+        if (this.loading())
+            return this.loadingText();
+        const count = this.flatOptions().length;
+        if (count === 0)
+            return this.emptyText();
+        return `${count} result${count === 1 ? '' : 's'} available`;
+    }, ...(ngDevMode ? [{ debugName: "statusMessage" }] : []));
+    ariaDescribedBy() {
+        if (this.error())
+            return this.errorId;
+        if (this.hint())
+            return this.hintId;
+        return null;
+    }
+    optionDomId(flatIndex) {
+        return `${this.autocompleteId()}-option-${flatIndex}`;
+    }
+    groupLabelId(groupIndex) {
+        return `${this.autocompleteId()}-group-${groupIndex}`;
+    }
+    onInput(event) {
+        const value = event.target.value;
+        this.query.set(value);
+        // Manual-selection pattern (WAI-ARIA APG): keep nothing highlighted until
+        // the user navigates, so a free-text Enter never hijacks into a selection.
+        this.highlightedIndex.set(-1);
+        this.isOpen.set(value.trim().length >= this.minChars());
+    }
+    onFocus() {
+        if (this.openOnFocus() && this.hasMinChars()) {
+            this.isOpen.set(true);
+        }
+    }
+    /** Selects an enabled option: emits it, then clears or restores the text. */
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        this.optionSelected.emit(option);
+        this.query.set(this.clearQueryOnSelect() ? '' : option.label);
+        this.close();
+        this.inputRef()?.nativeElement.focus();
+    }
+    /** Clears the query text and closes the listbox. */
+    clear() {
+        this.query.set('');
+        this.close();
+        this.inputRef()?.nativeElement.focus();
+    }
+    /** Closes the listbox without changing the query. */
+    close() {
+        this.isOpen.set(false);
+        this.highlightedIndex.set(-1);
+    }
+    onKeydown(event) {
+        const options = this.flatOptions();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.panelOpen()) {
+                    this.isOpen.set(true);
+                    this.highlightedIndex.set(this.firstEnabledIndex());
+                }
+                else {
+                    this.moveHighlight(1);
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!this.panelOpen()) {
+                    this.isOpen.set(true);
+                    this.highlightedIndex.set(this.lastEnabledIndex());
+                }
+                else {
+                    this.moveHighlight(-1);
+                }
+                break;
+            case 'Enter': {
+                const idx = this.highlightedIndex();
+                if (this.panelOpen() && idx >= 0 && idx < options.length && !options[idx].disabled) {
+                    event.preventDefault();
+                    this.selectOption(options[idx]);
+                }
+                break;
+            }
+            case 'Escape':
+                if (this.panelOpen()) {
+                    event.preventDefault();
+                    this.close();
+                }
+                break;
+            case 'Home':
+                if (this.panelOpen()) {
+                    event.preventDefault();
+                    this.highlightedIndex.set(this.firstEnabledIndex());
+                    this.scrollHighlightedIntoView();
+                }
+                break;
+            case 'End':
+                if (this.panelOpen()) {
+                    event.preventDefault();
+                    this.highlightedIndex.set(this.lastEnabledIndex());
+                    this.scrollHighlightedIntoView();
+                }
+                break;
+            case 'Tab':
+                if (this.panelOpen()) {
+                    const idx = this.highlightedIndex();
+                    if (idx >= 0 && idx < options.length && !options[idx].disabled) {
+                        this.selectOption(options[idx]);
+                    }
+                    this.close();
+                }
+                break;
+        }
+    }
+    onDocumentClick(event) {
+        const host = this.inputRef()?.nativeElement.closest('.ct-autocomplete');
+        if (host && !host.contains(event.target)) {
+            this.close();
+        }
+    }
+    moveHighlight(direction) {
+        const options = this.flatOptions();
+        if (options.length === 0)
+            return;
+        let idx = this.highlightedIndex();
+        let attempts = 0;
+        do {
+            idx += direction;
+            if (idx < 0)
+                idx = options.length - 1;
+            if (idx >= options.length)
+                idx = 0;
+            attempts++;
+        } while (options[idx]?.disabled && attempts <= options.length);
+        if (!options[idx]?.disabled) {
+            this.highlightedIndex.set(idx);
+            this.scrollHighlightedIntoView();
+        }
+    }
+    firstEnabledIndex() {
+        return this.flatOptions().findIndex((o) => !o.disabled);
+    }
+    lastEnabledIndex() {
+        const options = this.flatOptions();
+        for (let i = options.length - 1; i >= 0; i--) {
+            if (!options[i].disabled)
+                return i;
+        }
+        return -1;
+    }
+    scrollHighlightedIntoView() {
+        queueMicrotask(() => {
+            const host = this.inputRef()?.nativeElement.closest('.ct-autocomplete');
+            const optionEl = host?.querySelector('[data-highlighted]');
+            optionEl?.scrollIntoView?.({ block: 'nearest' });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfAutocompleteComponent, isStandalone: true, selector: "af-autocomplete", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, hideOnEmpty: { classPropertyName: "hideOnEmpty", publicName: "hideOnEmpty", isSignal: true, isRequired: false, transformFunction: null }, clearQueryOnSelect: { classPropertyName: "clearQueryOnSelect", publicName: "clearQueryOnSelect", isSignal: true, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, groupLabels: { classPropertyName: "groupLabels", publicName: "groupLabels", isSignal: true, isRequired: false, transformFunction: null }, groupOrder: { classPropertyName: "groupOrder", publicName: "groupOrder", isSignal: true, isRequired: false, transformFunction: null }, autocompleteId: { classPropertyName: "autocompleteId", publicName: "autocompleteId", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", query: "queryChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: AfAutocompleteOptionDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="ct-field" [class.ct-field--error]="error()">
+      @if (label()) {
+        <label class="ct-field__label" [attr.for]="inputId">
+          {{ label() }}
+          @if (required()) {
+            <span aria-label="required"> *</span>
+          }
+        </label>
+      }
+
+      <div [class]="rootClasses()" [attr.data-state]="panelOpen() ? 'open' : 'closed'">
+        <div class="ct-autocomplete__input-wrap">
+          @if (showSearchIcon()) {
+            <span class="ct-autocomplete__leading" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none">
+                <circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.5" />
+                <path
+                  d="M10.5 10.5L14 14"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </span>
+          }
+          <input
+            #inputEl
+            class="ct-autocomplete__input"
+            [class.ct-autocomplete__input--with-leading]="showSearchIcon()"
+            [id]="inputId"
+            type="text"
+            role="combobox"
+            autocomplete="off"
+            autocapitalize="off"
+            spellcheck="false"
+            [attr.aria-expanded]="panelOpen()"
+            [attr.aria-controls]="listboxId"
+            aria-autocomplete="list"
+            [attr.aria-activedescendant]="activeDescendantId()"
+            [attr.aria-invalid]="error() ? true : null"
+            [attr.aria-describedby]="ariaDescribedBy()"
+            [attr.aria-busy]="loading() || null"
+            [attr.aria-required]="required() || null"
+            [placeholder]="placeholder()"
+            [disabled]="disabled()"
+            [value]="query()"
+            (input)="onInput($event)"
+            (focus)="onFocus()"
+            (keydown)="onKeydown($event)"
+          />
+
+          @if (loading()) {
+            <span class="ct-autocomplete__spinner" aria-hidden="true"></span>
+          } @else if (showClear() && query()) {
+            <button
+              type="button"
+              class="ct-autocomplete__clear"
+              [attr.aria-label]="clearAriaLabel()"
+              (click)="clear()"
+              (mousedown)="$event.preventDefault()"
+            >
+              <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                <path
+                  d="M4 4l8 8M12 4l-8 8"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          }
+        </div>
+
+        <div
+          #listboxEl
+          [id]="listboxId"
+          class="ct-autocomplete__listbox"
+          role="listbox"
+          [attr.aria-label]="label() || placeholder() || 'Suggestions'"
+          [attr.aria-busy]="loading() || null"
+        >
+          @if (panelOpen()) {
+            @for (group of displayGroups(); track group.key; let gi = $index) {
+              @if (group.label) {
+                <div
+                  class="ct-autocomplete__group"
+                  role="group"
+                  [attr.aria-labelledby]="groupLabelId(gi)"
+                >
+                  <div class="ct-autocomplete__group-label" [id]="groupLabelId(gi)">
+                    {{ group.label }}
+                  </div>
+                  @for (item of group.items; track item.option.id) {
+                    <ng-container
+                      [ngTemplateOutlet]="optionRow"
+                      [ngTemplateOutletContext]="{ $implicit: item }"
+                    />
+                  }
+                </div>
+              } @else {
+                @for (item of group.items; track item.option.id) {
+                  <ng-container
+                    [ngTemplateOutlet]="optionRow"
+                    [ngTemplateOutletContext]="{ $implicit: item }"
+                  />
+                }
+              }
+            }
+
+            @if (loading()) {
+              <div class="ct-autocomplete__loading" role="presentation">
+                <span class="ct-autocomplete__spinner" aria-hidden="true"></span>
+                {{ loadingText() }}
+              </div>
+            } @else if (showEmpty()) {
+              <div class="ct-autocomplete__empty" role="presentation">{{ emptyText() }}</div>
+            }
+          }
+        </div>
+
+        <div class="ct-autocomplete__status" role="status" aria-live="polite" aria-atomic="true">
+          {{ statusMessage() }}
+        </div>
+      </div>
+
+      @if (hint() && !error()) {
+        <div class="ct-field__hint" [id]="hintId">{{ hint() }}</div>
+      }
+      @if (error()) {
+        <div class="ct-field__error" role="alert" [id]="errorId">{{ error() }}</div>
+      }
+    </div>
+
+    <ng-template #optionRow let-item>
+      <div
+        class="ct-autocomplete__option"
+        role="option"
+        [id]="optionDomId(item.flatIndex)"
+        [attr.aria-selected]="highlightedIndex() === item.flatIndex"
+        [attr.aria-disabled]="item.option.disabled || null"
+        [attr.data-highlighted]="highlightedIndex() === item.flatIndex ? '' : null"
+        (click)="selectOption(item.option)"
+        (mouseenter)="highlightedIndex.set(item.flatIndex)"
+        (mousedown)="$event.preventDefault()"
+      >
+        @if (optionTemplate(); as tpl) {
+          <ng-container
+            [ngTemplateOutlet]="tpl.template"
+            [ngTemplateOutletContext]="{
+              $implicit: item.option,
+              option: item.option,
+              query: query(),
+            }"
+          />
+        } @else {
+          <span class="ct-autocomplete__option-label">{{ item.option.label }}</span>
+          @if (item.option.description) {
+            <span class="ct-autocomplete__option-description">{{ item.option.description }}</span>
+          }
+        }
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block}.ct-autocomplete{--ct-ac-height: var(--control-height-md);--ct-ac-font-size: var(--font-size-md);--ct-ac-line-height: var(--line-height-md);--ct-ac-padding-x: var(--space-5);--ct-ac-option-padding-x: var(--space-4);--ct-ac-option-padding-y: var(--space-3);--ct-ac-listbox-max-height: 320px;position:relative;display:flex;flex-direction:column;width:100%}.ct-autocomplete--sm{--ct-ac-height: var(--control-height-sm);--ct-ac-font-size: var(--font-size-sm);--ct-ac-line-height: var(--line-height-sm);--ct-ac-padding-x: var(--space-4);--ct-ac-option-padding-y: var(--space-2)}.ct-autocomplete--lg{--ct-ac-height: var(--control-height-lg);--ct-ac-font-size: var(--font-size-lg);--ct-ac-line-height: var(--line-height-lg);--ct-ac-padding-x: var(--space-6);--ct-ac-option-padding-y: var(--space-4)}.ct-autocomplete__input-wrap{position:relative;display:flex;align-items:center}.ct-autocomplete__leading{position:absolute;inset-inline-start:var(--ct-ac-padding-x);display:inline-flex;align-items:center;justify-content:center;color:var(--color-text-muted);pointer-events:none}.ct-autocomplete__leading svg{width:var(--icon-sm, 1rem);height:var(--icon-sm, 1rem)}.ct-autocomplete__input{width:100%;height:var(--ct-ac-height);padding:0 var(--ct-ac-padding-x);padding-inline-end:calc(var(--ct-ac-padding-x) + var(--icon-md, 1.25rem) + var(--space-2));border:var(--border-thin) solid var(--ct-control-border);border-radius:var(--ct-control-radius);background:var(--ct-control-bg);color:var(--ct-control-text);font-size:var(--ct-ac-font-size);line-height:var(--ct-ac-line-height);transition:var(--ct-control-transition)}.ct-autocomplete__input--with-leading{padding-inline-start:calc(var(--ct-ac-padding-x) + var(--icon-sm, 1rem) + var(--space-2))}.ct-autocomplete__input::placeholder{color:var(--ct-control-placeholder)}@media(hover:hover){.ct-autocomplete__input:hover{border-color:var(--ct-control-border-hover)}}.ct-autocomplete__input:focus-visible{border-color:var(--ct-control-border-focus);outline:2px solid var(--color-focus-ring);outline-offset:-1px}.ct-autocomplete__input:disabled{background:var(--ct-control-bg-disabled);border-color:var(--color-border-subtle);color:var(--color-text-muted);pointer-events:none}.ct-autocomplete__input[aria-invalid=true]{border-color:var(--color-state-danger)}.ct-autocomplete__input[aria-invalid=true]:focus-visible{outline-color:var(--color-state-danger)}.ct-autocomplete__clear{appearance:none;position:absolute;inset-inline-end:var(--space-2);display:inline-flex;align-items:center;justify-content:center;width:var(--icon-lg, 1.5rem);height:var(--icon-lg, 1.5rem);padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-muted);cursor:pointer;transition:color var(--duration-fast) var(--easing-standard),background var(--duration-fast) var(--easing-standard)}.ct-autocomplete__clear svg{width:var(--icon-sm, 1rem);height:var(--icon-sm, 1rem)}@media(hover:hover){.ct-autocomplete__clear:hover{color:var(--color-text-secondary);background:var(--color-bg-muted)}}.ct-autocomplete__clear:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:1px}.ct-autocomplete__spinner{position:absolute;inset-inline-end:var(--space-4);width:var(--icon-sm, 1rem);height:var(--icon-sm, 1rem);border:2px solid var(--color-border-subtle);border-top-color:var(--color-brand-primary);border-radius:var(--radius-full, 999px);animation:ct-ac-spin .6s linear infinite}.ct-autocomplete__loading .ct-autocomplete__spinner,.ct-autocomplete__empty .ct-autocomplete__spinner{position:static;inset-inline-end:auto}@keyframes ct-ac-spin{to{transform:rotate(360deg)}}.ct-autocomplete__listbox{position:absolute;inset-inline-start:0;inset-inline-end:0;inset-block-start:calc(100% + var(--space-2));z-index:var(--z-dropdown, 50);max-height:var(--ct-ac-listbox-max-height);overflow-y:auto;padding:var(--space-2);border-radius:var(--radius-md);border:var(--border-thin) solid var(--color-border-subtle);background:var(--color-bg-elevated);box-shadow:var(--shadow-dropdown);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard),visibility 0s linear var(--duration-fast)}.ct-autocomplete[data-state=open] .ct-autocomplete__listbox{opacity:1;visibility:visible;transform:translateY(0);transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard),visibility 0s linear 0s}.ct-autocomplete__group+.ct-autocomplete__group{margin-top:var(--space-1);border-top:var(--border-thin) solid var(--color-border-subtle);padding-top:var(--space-1)}.ct-autocomplete__group-label{padding:var(--space-2) var(--ct-ac-option-padding-x);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide, .04em)}.ct-autocomplete__option{display:flex;align-items:center;gap:var(--space-3);padding:var(--ct-ac-option-padding-y) var(--ct-ac-option-padding-x);border-radius:var(--radius-sm);color:var(--color-text-primary);font-size:var(--ct-ac-font-size);line-height:var(--ct-ac-line-height);cursor:pointer;transition:background var(--duration-fast) var(--easing-standard)}@media(hover:hover){.ct-autocomplete__option:hover{background:var(--color-bg-muted)}}.ct-autocomplete__option[data-highlighted]{background:var(--color-bg-muted);outline:var(--border-medium) solid var(--color-brand-primary);outline-offset:-2px}.ct-autocomplete__option[aria-disabled=true]{opacity:var(--opacity-disabled, .5);pointer-events:none;cursor:not-allowed}.ct-autocomplete__option-label{flex:1;min-width:0}.ct-autocomplete__option-description{font-size:var(--font-size-xs);color:var(--color-text-muted)}.ct-autocomplete__empty,.ct-autocomplete__loading{padding:var(--space-6) var(--ct-ac-option-padding-x);text-align:center;color:var(--color-text-muted);font-size:var(--font-size-sm)}.ct-autocomplete__loading{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ct-autocomplete__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}@media(prefers-reduced-motion:reduce){.ct-autocomplete__listbox{transition:none}.ct-autocomplete__spinner{animation-duration:1.5s}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'af-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: {
+                        '(document:click)': 'onDocumentClick($event)',
+                    }, template: `
+    <div class="ct-field" [class.ct-field--error]="error()">
+      @if (label()) {
+        <label class="ct-field__label" [attr.for]="inputId">
+          {{ label() }}
+          @if (required()) {
+            <span aria-label="required"> *</span>
+          }
+        </label>
+      }
+
+      <div [class]="rootClasses()" [attr.data-state]="panelOpen() ? 'open' : 'closed'">
+        <div class="ct-autocomplete__input-wrap">
+          @if (showSearchIcon()) {
+            <span class="ct-autocomplete__leading" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none">
+                <circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.5" />
+                <path
+                  d="M10.5 10.5L14 14"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </span>
+          }
+          <input
+            #inputEl
+            class="ct-autocomplete__input"
+            [class.ct-autocomplete__input--with-leading]="showSearchIcon()"
+            [id]="inputId"
+            type="text"
+            role="combobox"
+            autocomplete="off"
+            autocapitalize="off"
+            spellcheck="false"
+            [attr.aria-expanded]="panelOpen()"
+            [attr.aria-controls]="listboxId"
+            aria-autocomplete="list"
+            [attr.aria-activedescendant]="activeDescendantId()"
+            [attr.aria-invalid]="error() ? true : null"
+            [attr.aria-describedby]="ariaDescribedBy()"
+            [attr.aria-busy]="loading() || null"
+            [attr.aria-required]="required() || null"
+            [placeholder]="placeholder()"
+            [disabled]="disabled()"
+            [value]="query()"
+            (input)="onInput($event)"
+            (focus)="onFocus()"
+            (keydown)="onKeydown($event)"
+          />
+
+          @if (loading()) {
+            <span class="ct-autocomplete__spinner" aria-hidden="true"></span>
+          } @else if (showClear() && query()) {
+            <button
+              type="button"
+              class="ct-autocomplete__clear"
+              [attr.aria-label]="clearAriaLabel()"
+              (click)="clear()"
+              (mousedown)="$event.preventDefault()"
+            >
+              <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                <path
+                  d="M4 4l8 8M12 4l-8 8"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          }
+        </div>
+
+        <div
+          #listboxEl
+          [id]="listboxId"
+          class="ct-autocomplete__listbox"
+          role="listbox"
+          [attr.aria-label]="label() || placeholder() || 'Suggestions'"
+          [attr.aria-busy]="loading() || null"
+        >
+          @if (panelOpen()) {
+            @for (group of displayGroups(); track group.key; let gi = $index) {
+              @if (group.label) {
+                <div
+                  class="ct-autocomplete__group"
+                  role="group"
+                  [attr.aria-labelledby]="groupLabelId(gi)"
+                >
+                  <div class="ct-autocomplete__group-label" [id]="groupLabelId(gi)">
+                    {{ group.label }}
+                  </div>
+                  @for (item of group.items; track item.option.id) {
+                    <ng-container
+                      [ngTemplateOutlet]="optionRow"
+                      [ngTemplateOutletContext]="{ $implicit: item }"
+                    />
+                  }
+                </div>
+              } @else {
+                @for (item of group.items; track item.option.id) {
+                  <ng-container
+                    [ngTemplateOutlet]="optionRow"
+                    [ngTemplateOutletContext]="{ $implicit: item }"
+                  />
+                }
+              }
+            }
+
+            @if (loading()) {
+              <div class="ct-autocomplete__loading" role="presentation">
+                <span class="ct-autocomplete__spinner" aria-hidden="true"></span>
+                {{ loadingText() }}
+              </div>
+            } @else if (showEmpty()) {
+              <div class="ct-autocomplete__empty" role="presentation">{{ emptyText() }}</div>
+            }
+          }
+        </div>
+
+        <div class="ct-autocomplete__status" role="status" aria-live="polite" aria-atomic="true">
+          {{ statusMessage() }}
+        </div>
+      </div>
+
+      @if (hint() && !error()) {
+        <div class="ct-field__hint" [id]="hintId">{{ hint() }}</div>
+      }
+      @if (error()) {
+        <div class="ct-field__error" role="alert" [id]="errorId">{{ error() }}</div>
+      }
+    </div>
+
+    <ng-template #optionRow let-item>
+      <div
+        class="ct-autocomplete__option"
+        role="option"
+        [id]="optionDomId(item.flatIndex)"
+        [attr.aria-selected]="highlightedIndex() === item.flatIndex"
+        [attr.aria-disabled]="item.option.disabled || null"
+        [attr.data-highlighted]="highlightedIndex() === item.flatIndex ? '' : null"
+        (click)="selectOption(item.option)"
+        (mouseenter)="highlightedIndex.set(item.flatIndex)"
+        (mousedown)="$event.preventDefault()"
+      >
+        @if (optionTemplate(); as tpl) {
+          <ng-container
+            [ngTemplateOutlet]="tpl.template"
+            [ngTemplateOutletContext]="{
+              $implicit: item.option,
+              option: item.option,
+              query: query(),
+            }"
+          />
+        } @else {
+          <span class="ct-autocomplete__option-label">{{ item.option.label }}</span>
+          @if (item.option.description) {
+            <span class="ct-autocomplete__option-description">{{ item.option.description }}</span>
+          }
+        }
+      </div>
+    </ng-template>
+  `, styles: [":host{display:block}.ct-autocomplete{--ct-ac-height: var(--control-height-md);--ct-ac-font-size: var(--font-size-md);--ct-ac-line-height: var(--line-height-md);--ct-ac-padding-x: var(--space-5);--ct-ac-option-padding-x: var(--space-4);--ct-ac-option-padding-y: var(--space-3);--ct-ac-listbox-max-height: 320px;position:relative;display:flex;flex-direction:column;width:100%}.ct-autocomplete--sm{--ct-ac-height: var(--control-height-sm);--ct-ac-font-size: var(--font-size-sm);--ct-ac-line-height: var(--line-height-sm);--ct-ac-padding-x: var(--space-4);--ct-ac-option-padding-y: var(--space-2)}.ct-autocomplete--lg{--ct-ac-height: var(--control-height-lg);--ct-ac-font-size: var(--font-size-lg);--ct-ac-line-height: var(--line-height-lg);--ct-ac-padding-x: var(--space-6);--ct-ac-option-padding-y: var(--space-4)}.ct-autocomplete__input-wrap{position:relative;display:flex;align-items:center}.ct-autocomplete__leading{position:absolute;inset-inline-start:var(--ct-ac-padding-x);display:inline-flex;align-items:center;justify-content:center;color:var(--color-text-muted);pointer-events:none}.ct-autocomplete__leading svg{width:var(--icon-sm, 1rem);height:var(--icon-sm, 1rem)}.ct-autocomplete__input{width:100%;height:var(--ct-ac-height);padding:0 var(--ct-ac-padding-x);padding-inline-end:calc(var(--ct-ac-padding-x) + var(--icon-md, 1.25rem) + var(--space-2));border:var(--border-thin) solid var(--ct-control-border);border-radius:var(--ct-control-radius);background:var(--ct-control-bg);color:var(--ct-control-text);font-size:var(--ct-ac-font-size);line-height:var(--ct-ac-line-height);transition:var(--ct-control-transition)}.ct-autocomplete__input--with-leading{padding-inline-start:calc(var(--ct-ac-padding-x) + var(--icon-sm, 1rem) + var(--space-2))}.ct-autocomplete__input::placeholder{color:var(--ct-control-placeholder)}@media(hover:hover){.ct-autocomplete__input:hover{border-color:var(--ct-control-border-hover)}}.ct-autocomplete__input:focus-visible{border-color:var(--ct-control-border-focus);outline:2px solid var(--color-focus-ring);outline-offset:-1px}.ct-autocomplete__input:disabled{background:var(--ct-control-bg-disabled);border-color:var(--color-border-subtle);color:var(--color-text-muted);pointer-events:none}.ct-autocomplete__input[aria-invalid=true]{border-color:var(--color-state-danger)}.ct-autocomplete__input[aria-invalid=true]:focus-visible{outline-color:var(--color-state-danger)}.ct-autocomplete__clear{appearance:none;position:absolute;inset-inline-end:var(--space-2);display:inline-flex;align-items:center;justify-content:center;width:var(--icon-lg, 1.5rem);height:var(--icon-lg, 1.5rem);padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-muted);cursor:pointer;transition:color var(--duration-fast) var(--easing-standard),background var(--duration-fast) var(--easing-standard)}.ct-autocomplete__clear svg{width:var(--icon-sm, 1rem);height:var(--icon-sm, 1rem)}@media(hover:hover){.ct-autocomplete__clear:hover{color:var(--color-text-secondary);background:var(--color-bg-muted)}}.ct-autocomplete__clear:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:1px}.ct-autocomplete__spinner{position:absolute;inset-inline-end:var(--space-4);width:var(--icon-sm, 1rem);height:var(--icon-sm, 1rem);border:2px solid var(--color-border-subtle);border-top-color:var(--color-brand-primary);border-radius:var(--radius-full, 999px);animation:ct-ac-spin .6s linear infinite}.ct-autocomplete__loading .ct-autocomplete__spinner,.ct-autocomplete__empty .ct-autocomplete__spinner{position:static;inset-inline-end:auto}@keyframes ct-ac-spin{to{transform:rotate(360deg)}}.ct-autocomplete__listbox{position:absolute;inset-inline-start:0;inset-inline-end:0;inset-block-start:calc(100% + var(--space-2));z-index:var(--z-dropdown, 50);max-height:var(--ct-ac-listbox-max-height);overflow-y:auto;padding:var(--space-2);border-radius:var(--radius-md);border:var(--border-thin) solid var(--color-border-subtle);background:var(--color-bg-elevated);box-shadow:var(--shadow-dropdown);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard),visibility 0s linear var(--duration-fast)}.ct-autocomplete[data-state=open] .ct-autocomplete__listbox{opacity:1;visibility:visible;transform:translateY(0);transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard),visibility 0s linear 0s}.ct-autocomplete__group+.ct-autocomplete__group{margin-top:var(--space-1);border-top:var(--border-thin) solid var(--color-border-subtle);padding-top:var(--space-1)}.ct-autocomplete__group-label{padding:var(--space-2) var(--ct-ac-option-padding-x);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide, .04em)}.ct-autocomplete__option{display:flex;align-items:center;gap:var(--space-3);padding:var(--ct-ac-option-padding-y) var(--ct-ac-option-padding-x);border-radius:var(--radius-sm);color:var(--color-text-primary);font-size:var(--ct-ac-font-size);line-height:var(--ct-ac-line-height);cursor:pointer;transition:background var(--duration-fast) var(--easing-standard)}@media(hover:hover){.ct-autocomplete__option:hover{background:var(--color-bg-muted)}}.ct-autocomplete__option[data-highlighted]{background:var(--color-bg-muted);outline:var(--border-medium) solid var(--color-brand-primary);outline-offset:-2px}.ct-autocomplete__option[aria-disabled=true]{opacity:var(--opacity-disabled, .5);pointer-events:none;cursor:not-allowed}.ct-autocomplete__option-label{flex:1;min-width:0}.ct-autocomplete__option-description{font-size:var(--font-size-xs);color:var(--color-text-muted)}.ct-autocomplete__empty,.ct-autocomplete__loading{padding:var(--space-6) var(--ct-ac-option-padding-x);text-align:center;color:var(--color-text-muted);font-size:var(--font-size-sm)}.ct-autocomplete__loading{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ct-autocomplete__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}@media(prefers-reduced-motion:reduce){.ct-autocomplete__listbox{transition:none}.ct-autocomplete__spinner{animation-duration:1.5s}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnFocus", required: false }] }], hideOnEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnEmpty", required: false }] }], clearQueryOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearQueryOnSelect", required: false }] }], showSearchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearchIcon", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], groupLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupLabels", required: false }] }], groupOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupOrder", required: false }] }], autocompleteId: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteId", required: false }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AfAutocompleteOptionDirective), { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
+
 /**
  * File upload component with drag-and-drop, validation, and form control support.
  *
@@ -13626,5 +14301,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 { 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 };
 //# sourceMappingURL=neuravision-ng-construct.mjs.map