import * as i0 from '@angular/core'; import { RendererFactory2, ElementRef, OnInit, OnDestroy, AfterViewInit, TemplateRef, EventEmitter, ChangeDetectorRef, PipeTransform, Injector, InjectionToken, Renderer2, OnChanges, SimpleChanges } from '@angular/core'; import * as i6 from '@skyux/core'; import { SkyCoreAdapterService, SkyOverlayInstance, SkyAffixService, SkyOverlayService, SkyStackingContext, SkyContentInfo } from '@skyux/core'; import * as i3$1 from '@skyux/forms'; import { SkyInputBoxHostService } from '@skyux/forms'; import { Observable, Subject } from 'rxjs'; import * as i3 from '@angular/forms'; import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors, UntypedFormControl, NgControl } from '@angular/forms'; import * as i2 from '@angular/common'; import * as i7 from '@skyux/indicators'; import { SkyToken, SkyTokensMessage } from '@skyux/indicators'; import * as i8 from '@skyux/icon'; import * as i1 from '@skyux/i18n'; import * as i7$1 from '@skyux/theme'; import { SkyThemeService } from '@skyux/theme'; import { AnimationEvent } from '@angular/animations'; import { SkyModalService } from '@skyux/modals'; /** * @internal */ declare class SkyAutocompleteAdapterService { #private; constructor(coreAdapterService: SkyCoreAdapterService, rendererFactory: RendererFactory2); /** * Adds the className for the provided element. */ addCSSClass(element: HTMLElement, className: string): void; getOverlayFocusableElements(overlay: SkyOverlayInstance): HTMLElement[]; /** * Removes the className for the provided element. */ removeCSSClass(element: HTMLElement, className: string): void; setDropdownWidth(elementRef: ElementRef, dropdownRef: ElementRef, isInputBox: boolean): void; /** * Sets the `tabIndex` of the `element` to the provided `tabIndex`. */ setTabIndex(element: HTMLElement, tabIndex: number): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @internal */ interface SkyAutocompleteInputTextChange { value?: string; } declare class SkyAutocompleteInputDirective implements OnInit, OnDestroy, ControlValueAccessor, Validator { #private; /** * The value for the `autocomplete` attribute on the form input. * @default "off" * @deprecated SKY UX only supports browser autofill on components where the direct input matches the return value. This input may not behave as expected due to the dropdown selection interaction. */ set autocompleteAttribute(value: string | undefined); get autocompleteAttribute(): string; /** * Whether to disable the autocomplete field on template-driven forms. Don't use this input on reactive forms because they may overwrite the input or leave the control out of sync. * To set the disabled state on reactive forms, use the `FormControl` instead. * @default false */ set disabled(value: boolean | undefined); get disabled(): boolean; get blur(): Observable; get displayWith(): string; set displayWith(value: string); get focus(): Observable; get inputTextValue(): string; set inputTextValue(value: string); get textChanges(): Observable; get value(): any; set value(value: any); constructor(); ngOnInit(): void; ngOnDestroy(): void; writeValue(value: any): void; registerOnChange(fn: (value: any) => void): void; registerOnTouched(fn: () => void): void; registerOnValidatorChange(fn: () => void): void; restoreInputTextValueToPreviousState(): void; setDisabledState(disabled: boolean): void; validate(control: AbstractControl): ValidationErrors | null; setActiveDescendant(descendantId: string | null): void; /** * Used to connect the input to the overlay. */ setAriaControls(overlayId: string | null): void; onChange(value: any): void; onTouched(): void; onValidatorChange: () => void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @internal */ declare enum SkyAutocompleteMessageType { /** * Closes the dropdown. */ CloseDropdown = 0, /** * Repositions the dropdown. */ RepositionDropdown = 1 } /** * @internal */ interface SkyAutocompleteMessage { /** * The type of message. */ type?: SkyAutocompleteMessageType; } /** * The result of searching for items to display in an autocomplete or lookup field. */ interface SkyAutocompleteSearchAsyncResult { /** * Data provided on "load more" search result requests. Use this property for * information such as a continuation token for paged database queries. */ continuationData?: unknown; /** * Whether there are more results that match the search criteria. */ hasMore?: boolean; /** * A list of items matching the search criteria. When there are more items that match * the search criteria, set the `hasMore` property to `true` more records can be lazy-loaded * as the user scrolls through the search results. */ items: unknown[]; /** * The total number of records that match the search criteria, including items not returned in * the current list of items. */ totalCount: number; } type AutocompleteSearchAsyncResultDisplayType = 'popover' | 'modal'; /** * Arguments passed when an asynchronous search is executed from the * autocomplete or lookup component. */ interface SkyAutocompleteSearchAsyncArgs { /** * The search text entered by the user. */ searchText: string; /** * How the search results will be displayed. Use this value to determine * how many results to return. */ displayType: AutocompleteSearchAsyncResultDisplayType; /** * The offset index of the first result to return. When search is executed * as a result of an infinite scroll event, for example, offset will be set * to the number of items already displayed. */ offset: number; /** * A continuation token which can be set and then will be passed back with any future searches. * This is helpful for applications which utilize a token instead of an offset when fetching data. */ continuationData?: unknown; /** * An Observable representing the search results. Consumers should set this * when the event fires so the autocomplete or lookup component can subscribe * to it and then display the results. */ result?: Observable; } type SkyAutocompleteSearchContext = 'popover' | 'modal'; interface SkyAutocompleteSearchArgs { context?: SkyAutocompleteSearchContext; } type SkyAutocompleteSearchFunctionResponse = any[] | Promise; type SkyAutocompleteSearchFunction = (searchText: string, data: any[], args?: SkyAutocompleteSearchArgs) => SkyAutocompleteSearchFunctionResponse; type SkyAutocompleteSearchFunctionFilter = (searchText: string, item: any, args?: SkyAutocompleteSearchArgs) => boolean; interface SkyAutocompleteSelectionChange { /** * The search result object that users select in the dropdown list. */ selectedItem?: any; } /** * @internal */ interface SkyAutocompleteShowMoreArgs { /** * Returns the value of the input element when the show more event is triggered. */ inputValue: string; } /** * @internal */ interface SkyAutocompleteSearchResult { elementId: string; data: any; } declare class SkyAutocompleteComponent implements OnDestroy, AfterViewInit { #private; /** * The HTML element ID of the element that labels * the autocomplete text input. This sets the input's `aria-labelledby` attribute to provide a text equivalent for screen readers * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility). * For more information about the `aria-labelledby` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-labelledby). */ ariaLabelledBy: string | undefined; /** * The static data source for the autocomplete component to search * when users enter text. For a dynamic data source, such as an array that * changes due to server calls, use `search` or `searchAsync` instead. * You can specify static data, such as an array of objects, * or you can pull data from a database. */ set data(value: any[] | undefined); get data(): any[]; /** * How many milliseconds to wait before searching while users * enter text in the autocomplete field. * @default 0 */ set debounceTime(value: number | undefined); get debounceTime(): number; /** * The object property to display in the text input after users * select an item in the dropdown list. * @default "name" */ set descriptorProperty(value: string | undefined); get descriptorProperty(): string; /** * Hint text to show in the dropdown * @internal */ dropdownHintText: string | undefined; /** * @internal * Whether to display a button in the dropdown that opens a picker where users can view all options. */ set enableShowMore(value: boolean | undefined); get enableShowMore(): boolean; /** * The observable of `SkyAutocompleteMessage` that can close the dropdown. * @internal */ set messageStream(value: Subject | undefined); get messageStream(): Subject; /** * @internal */ wrapperClass: string | undefined; /** * The object properties to search. * @default ["name"] * @deprecated We recommend against using this property. To search specific properties, use the `searchAsync` event instead. */ set propertiesToSearch(value: string[] | undefined); get propertiesToSearch(): string[]; /** * The function that dynamically manages the data to display in search results when users * change the text in the autocomplete field. The search function must return * an array or a promise of an array. The `search` property is particularly * useful when the data source does not live in the source code. * @deprecated We recommend against using this property. To call a remote data source, use the `searchAsync` event instead. */ set search(value: SkyAutocompleteSearchFunction | undefined); get search(): SkyAutocompleteSearchFunction | undefined; /** * The template that formats each search result in the dropdown list. * The autocomplete component injects search result values into the template * as `item` variables that reference all of the object properties of the search results. */ searchResultTemplate: TemplateRef | undefined; /** * The minimum number of characters that users must enter before * the autocomplete component searches the data source and displays search * results in the dropdown list. * @default 1 */ set searchTextMinimumCharacters(value: number | undefined); get searchTextMinimumCharacters(): number; /** * The array of functions to call against each search result. This filters * the search results when using the `data` input and the default search function. * When the `search` property specifies a custom search function, you must * manually apply filters inside that function. The function must return `true` * or `false` for each result to indicate whether to display it in the dropdown list. * * @deprecated We recommend against using this property. To filter results, use the `searchAsync` event instead. */ set searchFilters(value: SkyAutocompleteSearchFunctionFilter[] | undefined); get searchFilters(): SkyAutocompleteSearchFunctionFilter[] | undefined; /** * The maximum number of search results to display in the dropdown list. * By default, the component displays all matching results. */ set searchResultsLimit(value: number | undefined); get searchResultsLimit(): number; /** * @internal * Whether to display a button that lets users add options to the data source. * @default false */ set showAddButton(value: boolean | undefined); get showAddButton(): boolean; /** * The text to display when no search results are found. * @default "No matches found" */ noResultsFoundText: string | undefined; /** * @internal * Allows async search to be disabled even when a listener is specified for * the `searchAsync` output. * @default false */ searchAsyncDisabled: boolean | undefined; /** * When using `searchAsync`, allows the user to specify arbitrary * values not in the search results. This only works in combination * with `searchAsync`. * @default false */ allowAnyValue: i0.InputSignalWithTransform; /** * Highlights the search text in each search result. Set this to `false` * when your search returns results that aren't exact text matches, such as * returning "Bob" for "Robert." * @default true */ highlightSearchText: i0.InputSignalWithTransform; /** * @internal * Fires when users select the button to add options to the data source. */ addClick: EventEmitter; /** * @internal * Fires when users select the button to view all options. */ showMoreClick: EventEmitter; /** * Fires when users select items in the dropdown list. */ selectionChange: EventEmitter; /** * Fires when users enter new search information and allows results to be * returned via an observable. */ searchAsync: EventEmitter; /** * @internal */ openChange: EventEmitter; get searchResults(): SkyAutocompleteSearchResult[]; set searchResults(value: SkyAutocompleteSearchResult[]); get highlightText(): string[]; set highlightText(value: string[]); isOpen: boolean; resultsListId: string; resultsWrapperId: string; searchText: string; get showActionsArea(): boolean; isSearchingAsync: boolean; searchResultsCount: number | undefined; set inputDirective(directive: SkyAutocompleteInputDirective | undefined); get inputDirective(): SkyAutocompleteInputDirective | undefined; resultsTemplateRef: TemplateRef | undefined; set resultsRef(value: ElementRef | undefined); get resultsRef(): ElementRef | undefined; searchOrDefault: SkyAutocompleteSearchFunction; protected isResultsVisible: Observable; constructor(changeDetector: ChangeDetectorRef, elementRef: ElementRef, affixService: SkyAffixService, adapterService: SkyAutocompleteAdapterService, overlayService: SkyOverlayService, inputBoxHostSvc?: SkyInputBoxHostService, stackingContext?: SkyStackingContext); ngAfterViewInit(): void; ngOnDestroy(): void; addButtonClicked(): void; handleKeydown(event: KeyboardEvent): void; moreButtonClicked(): void; onResultClick(id: string, event: MouseEvent): void; onResultMouseMove(id: number): void; isElementFocused(ref: HTMLElement): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @internal */ declare class SkyAutocompleteSearchAsyncDisabledPipe implements PipeTransform { transform(searchAsync: EventEmitter, searchAsyncDisabled: boolean | undefined): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵpipe: i0.ɵɵPipeDeclaration; } /** * Import into any component library module that needs to use resource strings. */ declare class SkyLookupResourcesModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class SkyAutocompleteModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @internal */ interface SkyAutocompleteDefaultSearchFunctionOptions { propertiesToSearch: string[]; searchFilters?: SkyAutocompleteSearchFunctionFilter[]; /** @deprecated */ searchResultsLimit?: number; } /** * Represents the data for a given country. */ interface SkyCountryFieldCountry { /** * The [International Organization for Standardization Alpha 2](https://www.nationsonline.org/oneworld/country_code_list.htm) * country code for the country. * @required */ iso2: string; /** * The name of the country. */ name?: string; /** * The country's international dial code. * This property is only set when the country field is within a phone field. * @internal */ dialCode?: string; /** * @internal */ areaCodes?: string[]; /** * @internal */ priority?: number; } /** * @internal */ interface SkyCountryFieldContext { inPhoneField: boolean; } declare class SkyCountryFieldComponent implements ControlValueAccessor, OnDestroy, OnInit, Validator { #private; inputBoxHostSvc?: SkyInputBoxHostService | undefined; /** * The value for the HTML `autocomplete` attribute on the form input. * @default 'off' * @deprecated SKY UX only supports browser autofill on components where the direct input matches the return value. This input may not behave as expected due to the dropdown selection interaction. */ autocompleteAttribute: string | undefined; /** * The [International Organization for Standardization Alpha 2](https://www.nationsonline.org/oneworld/country_code_list.htm) * country code for the default country. * When search results include the default country, it appears at the top of the list. * @default "us" */ set defaultCountry(value: string | undefined); get defaultCountry(): string | undefined; /** * Whether to disable the country field on template-driven forms. Don't use this input on reactive forms because they may overwrite the input or leave the control out of sync. * To set the disabled state on reactive forms, use the `FormControl` instead. * @default false */ set disabled(isDisabled: boolean | undefined); get disabled(): boolean; /** * The [International Organization for Standardization Alpha 2](https://www.nationsonline.org/oneworld/country_code_list.htm) * country codes for the countries that users can select. By default, all countries are available. */ set supportedCountryISOs(value: string[] | undefined); get supportedCountryISOs(): string[]; /** * Fires when the selected country changes. */ selectedCountryChange: EventEmitter; /** * Fires when the country field is focused out. * @internal */ countryFieldFocusout: EventEmitter; countries: SkyCountryFieldCountry[]; countrySearchFormControl: UntypedFormControl; searchTextMinimumCharacters: number; countrySearchAutocompleteDirective: SkyAutocompleteInputDirective | undefined; set selectedCountry(newCountry: SkyCountryFieldCountry | undefined); get selectedCountry(): SkyCountryFieldCountry | undefined; context: SkyCountryFieldContext | null; inputId: string; protected ariaDescribedBy: Observable | undefined; inputTemplateRef: TemplateRef | undefined; constructor(changeDetector: ChangeDetectorRef, injector: Injector, inputBoxHostSvc?: SkyInputBoxHostService | undefined); /** * Angular lifecycle hook for when the component is initialized * @internal */ ngOnInit(): void; /** * Angular lifecycle hook for when the component is destructed. * @internal */ ngOnDestroy(): void; /** * Sets the component's touched value when the autocomplete is blurred * @internal */ onAutocompleteBlur(): void; /** * Sets the country to validate against based on the county's iso2 code. * @param newCountry The International Organization for Standardization's two-letter code * for the default country. * @internal */ onCountrySelected(newCountry: SkyAutocompleteSelectionChange): void; /** * Called when the Autocomplete textarea loses focus * @internal */ onAutocompleteFocusout(e: FocusEvent): void; onChange: (value: SkyCountryFieldCountry | undefined) => void; onTouched: () => void; registerOnChange(fn: (value: SkyCountryFieldCountry | undefined) => void): void; registerOnTouched(fn: () => void): void; setDisabledState(disabled: boolean): void; validate(control: AbstractControl): ValidationErrors | null; writeValue(value: SkyCountryFieldCountry | undefined): void; protected onFocus($event: FocusEvent): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class SkyCountryFieldModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @internal */ declare const SKY_COUNTRY_FIELD_CONTEXT: InjectionToken; /** * @internal */ declare class SkyLookupAutocompleteAdapter { #private; /** * How many milliseconds to wait before searching while users * enter text in the lookup field. * @default 0 */ debounceTime: number | undefined; /** * The object property to display in the text input after users * select an item in the dropdown list. * @default "name" */ set descriptorProperty(value: string | undefined); get descriptorProperty(): string; /** * The array of object properties to search when utilizing the `data` property and the built-in search function. * @default ["name"] * @deprecated Use the `searchAsync` event emitter and callback instead to provide data to the lookup component. */ set propertiesToSearch(value: string[] | undefined); get propertiesToSearch(): string[]; /** * The function that dynamically manages the data to display in search results when users * change the text in the lookup field. The search function must return * an array or a promise of an array. The `search` property is particularly * useful when the data source does not live in the source code. * @deprecated Use the `searchAsync` event emitter and callback instead to provide searched data to the lookup component. */ set search(value: SkyAutocompleteSearchFunction | undefined); get search(): SkyAutocompleteSearchFunction | undefined; /** * The template that formats each option in the dropdown list. The lookup component * injects values into the template as `item` variables that reference all of the object * properties of the search results. */ searchResultTemplate: TemplateRef | undefined; /** * The minimum number of characters that users must enter before * the lookup component searches the data source and displays search results * in the dropdown list. * @default 1 */ searchTextMinimumCharacters: number | undefined; /** * The array of functions to call against each search result in order * to filter the search results when using the `data` input and the default search function. When * using a custom search function via the `search` property filters must be * applied manually inside that function. The function must return `true` or * `false` for each result to indicate whether to display it in the dropdown list. * @deprecated Use the `searchAsync` event emitter and callback instead to provide searched data to the lookup component. */ set searchFilters(value: SkyAutocompleteSearchFunctionFilter[] | undefined); get searchFilters(): SkyAutocompleteSearchFunctionFilter[] | undefined; /** * The maximum number of search results to display in the dropdown * list. By default, the lookup component displays all matching results. * This property has no effect on the results in the "Show more" picker. */ searchResultsLimit: number | undefined; /** * Fires when users enter new search information and allows results to be * returned via an observable. The event is also fired * when the "Show more" picker is opened without search text. */ searchAsync: EventEmitter; searchOrDefault: SkyAutocompleteSearchFunction; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Specifies the information for the callback used when adding a new item to the lookup component. */ interface SkyLookupAddCallbackArgs { /** * The new item which has been added to the data. This item will be automatically selected. */ item: any; /** * The new state of the data source for the lookup component to search when users * enter text. If not specified, the component will use the current state of the lookup * component's `data` input; however, if this is not yet updated the new item will not be * automatically selected. */ data?: any[]; } /** * Specifies a callback function for the consumer to use to notify the lookup that a new item has been added. */ interface SkyLookupAddClickEventArgs { /** * A callback function for the consumer to use to notify the lookup that a new item has been added. * @param args Specifies information about the item that was added. */ itemAdded: (args: SkyLookupAddCallbackArgs) => void; } type SkyLookupSelectModeType = 'single' | 'multiple'; /** * Specifies configuration options to launch a custom picker when users select * the button to view all options. */ declare class SkyLookupShowMoreCustomPickerContext { /** * The options that users can select in the custom picker. */ items: any[]; /** * Search text to filter the contents of the custom picker. */ initialSearch: string; /** * The current selections in the lookup field. */ initialValue: any; } /** * Defines a custom picker to display when users select the button to view all options. */ interface SkyLookupShowMoreCustomPicker { open: (pickerContext: SkyLookupShowMoreCustomPickerContext) => void; } /** * Specifies configuration options to display the native picker when users select * the button to view all options. */ interface SkyLookupShowMoreNativePickerConfig { /** * The template that formats each option in the picker. The lookup component * injects values into the template as `item` variables that reference all the object * properties of the options, and `checkboxId` when using multi-select, suitable for * using with `