@visa/nova-angular
Version:
Visa Product Design System Nova Angular library
195 lines (194 loc) • 8.33 kB
TypeScript
/**
* Copyright (c) 2025 Visa, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
**/
import { BooleanInput } from '@angular/cdk/coercion';
import { AfterContentInit, EventEmitter, OnInit, QueryList, Renderer2 } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { Subscription } from 'rxjs';
import { AppReadyService } from '../_utilities/services/app-stable-check.service';
import { UUIDService } from '../_utilities/services/uuid.service';
import { FloatingUIContainer } from '../floating-ui-container/floating-ui-container.directive';
import { InputContainerComponent } from '../input-container/input-container.component';
import { InputDirective } from '../input/input.directive';
import { LabelDirective } from '../label/label.directive';
import { ListboxContainerDirective } from '../listbox-container/listbox-container.directive';
import { ListboxItemComponent } from '../listbox-item/listbox-item.component';
import { ListboxDirective } from '../listbox/listbox.directive';
import { ListboxService } from '../listbox/listbox.service';
import { NovaLibService } from '../nova-lib.service';
import { ComboboxFilterType } from './combobox.constants';
import { ButtonDirective } from '../button/button.directive';
import { ChipDirective } from '../chip/chip.directive';
import * as i0 from "@angular/core";
declare enum STATE {
READONLY = "readonly",
DISABLED = "disabled",
INVALID = "invalid",
REQUIRED = "required"
}
export declare class ComboboxDirective implements ControlValueAccessor, OnInit, AfterContentInit {
novaLibService: NovaLibService;
private listboxService;
private appReadyService;
private renderer;
private UUIDService;
floatingContainer?: FloatingUIContainer | undefined;
inputContainer: InputContainerComponent;
input: InputDirective;
listboxContainer: ListboxContainerDirective;
listbox: ListboxDirective;
label: LabelDirective;
interactiveChildren: QueryList<ButtonDirective>;
chips: QueryList<ChipDirective>;
_highlightedIndex: number | null;
_activeIndex: number | null;
_lastHighlightedOnClose: number | null;
initialListItems: ListboxItemComponent[];
currentListItems: QueryList<ListboxItemComponent>;
listboxSubscription: Subscription;
_prevActiveItem: ListboxItemComponent | any;
private _fromInput;
private _inputFocused;
/**
* Provides custom class(es) for custom styling.
* @default .v-combobox
*/
get class(): string;
set class(value: string);
_class: string;
get hostClass(): string;
/**
* Removes appended screenreader readonly text when true. <br>
* By default (when <code>removeReadonlyText="false"</code>), if a combobox is readonly, a span element with text '(readonly)' will be appended to the label element for screenreader support.
* @default false
*/
get removeReadonlyText(): boolean;
set removeReadonlyText(value: BooleanInput);
_removeReadonlyText: boolean;
/**
* Temporary prop to opt into new **multiselect** behavior. <br>
* Will be deprecated and defaulted to in the next breaking change release.
*/
get EXPERIMENTAL_ADA_OPT_IN(): boolean;
set EXPERIMENTAL_ADA_OPT_IN(value: BooleanInput);
_EXPERIMENTAL_ADA_OPT_IN: boolean;
/**
* Sets component as readonly when true.
* @default false
*/
get readonly(): boolean;
set readonly(value: BooleanInput);
_readonly: boolean;
/**
* Sets component as disabled when true.
* @default false
*/
get disabled(): boolean;
set disabled(value: BooleanInput);
_disabled: boolean;
get hostDisabled(): "disabled" | null;
/** Fires when a formControl's disabled state updates */
setDisabledState(isDisabled: boolean): void;
/**
* Marks component as invalid when true.
* @default false
*/
get invalid(): boolean;
set invalid(value: BooleanInput);
_invalid: boolean;
get ariaInvalid(): boolean;
/**
* Marks component as required when true.
* @default false
*/
get required(): boolean;
set required(value: BooleanInput);
_required: boolean;
/**
* Value of combobox.
*/
get value(): any;
set value(value: any);
get val(): any;
set val(value: any);
_value: {
label: string;
value: string;
} | null | '';
updateValue(value: any): void;
/**
* Emits value of selected item(s).
*/
itemSelected: EventEmitter<string | number | (string | number)[] | null>;
/**
* Emitted when a listbox item is selected, when an input value is entered, and when the combobox is reset. <br />
* Subscribe to provide your own filter function when this event is emitted. <br />
* Emits { type: 'selection' | 'input' | 'reset'; listbox: string; input: string } where type is the type of filter event, listbox is the value of the selected item(s), and input is the value of the input.
*/
filter: EventEmitter<{
type: ComboboxFilterType;
listbox: string | number | (string | number)[] | null;
input: string;
}>;
/**
* Emits the filtered array of ListboxItemComponents when the list is filtered by ComboboxService.
*/
filteredListEmitter: EventEmitter<ListboxItemComponent[]>;
constructor(novaLibService: NovaLibService, listboxService: ListboxService, appReadyService: AppReadyService, renderer: Renderer2, UUIDService: UUIDService, floatingContainer?: FloatingUIContainer | undefined);
handleFocus(event: Event): void;
ngOnInit(): void;
ngAfterContentInit(): void;
setUpInput(): void;
setUpListItems(): void;
setUpFloatingContainer(): void;
setInitialValue(): void;
setState(): void;
hostKeyDown(event: KeyboardEvent): void;
hostKeyup(event: KeyboardEvent): void;
documentKeydown(event: KeyboardEvent): void;
/**
* Highlight next enabled item or previous enabled item depending on type.
* @param type 'next' | 'prev'
*/
highlightNextPrevItem(type: 'next' | 'prev'): void;
highlightIndex(index: number): void;
selectItem(index: number): void;
/**
* @param index
* @returns ListboxItemComponent at index given.
*/
getListItem(index: number | null): ListboxItemComponent | undefined;
/**
* Update children (input and listbox) state based on parent state.
*/
updateChildrenStates(prop: STATE): void;
currentID: string;
appendReadonlyText(): void;
clearCombobox(): void;
/**
* @returns ListboxDirective
*/
getList(): ListboxItemComponent[];
findListItem(text: string): number;
onChange: (_: any) => void;
onTouched: (_: any) => void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
writeValue(value: any): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ComboboxDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ComboboxDirective, "[v-combobox]", never, { "class": { "alias": "class"; "required": false; }; "removeReadonlyText": { "alias": "removeReadonlyText"; "required": false; }; "EXPERIMENTAL_ADA_OPT_IN": { "alias": "EXPERIMENTAL_ADA_OPT_IN"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "itemSelected": "itemSelected"; "filter": "filter"; "filteredListEmitter": "filteredListEmitter"; }, ["inputContainer", "input", "listboxContainer", "listbox", "label", "interactiveChildren", "chips"], never, true, never>;
}
export {};