@ux-aspects/ux-aspects

import { BooleanInput, NumberInput } from '@angular/cdk/coercion'; import { ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges, StaticProvider, TemplateRef } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; import { Observable, ReplaySubject } from 'rxjs'; import { InfiniteScrollLoadFunction } from '../../directives/infinite-scroll/index'; import { TagInputComponent, TagTemplateContext } from '../tag-input/index'; import { TypeaheadComponent, TypeaheadOptionEvent } from '../typeahead/index'; import { TypeaheadOptionContext } from '../typeahead/typeahead-option-context'; import * as i0 from "@angular/core"; export declare const SELECT_VALUE_ACCESSOR: StaticProvider; export declare class SelectComponent<T> implements OnInit, OnChanges, OnDestroy, ControlValueAccessor { private readonly _element; private readonly _platform; private readonly _typeaheadKeyService; private readonly _changeDetector; private readonly _document; /** A unique id for the component. */ id: string; /** The selected option (for single select) or array of options (for multiple select). */ set value(value: T | ReadonlyArray<T>); get value(): T | ReadonlyArray<T>; /** The text in the input area. This is used to filter the options dropdown. */ set input(value: string); get input(): string; /** The status of the typeahead dropdown. */ set dropdownOpen(value: boolean); get dropdownOpen(): boolean; /** * If an array is provided, this is the list of options which can be chosen from. It can be an array of strings or * custom objects. If custom objects are required, the display property must also be set. If a function is provided, * this is used as a callback to dynamically retrieve data in pages. The function parameters are: * @param pageNum The index of the requested page, starting from 0. * @param pageSize The number of items requested. * @param filter The filter details as provided via the filter binding. * @returns Either a promise which resolves to an array, or a plain array in case the data can be loaded * synchronously. An empty array or an array with fewer than `pageSize` items can be returned, which indicates that * the end of the data set has been reached. */ options: T[] | InfiniteScrollLoadFunction; /** * Determines the display value of the `options`, if they are custom objects. This may be a function or a string. * If a function is provided, it receives the option object as an argument, and should return the appropriate * display value. If the name of a property is provided as a string, that property is used as the display value. */ display: ((option: T) => string) | string; /** * Determines the unique key value of the `options`, if they are custom objects. This may be a function or a string. * If a function is provided, it receives the option object as an argument, and should return the appropriate * key value. If the name of a property is provided as a string, that property is used as the key value. */ key: ((option: T) => string) | string; /** * Controls whether the value of the single select control can be cleared by deleting the selected value in the * input field. This does not affect the initial state of the control, so specify a value for `value` if null should * never be allowed. */ allowNull: boolean; /** The aria-label to apply to the child `input` element. */ ariaLabel: string; /** ID of the element which serves as a label for the input element. */ ariaLabelledby: string; /** The aria-label to apply to the typeahead listbox */ listboxAriaLabel: string; /** Controls the disabled state of the tag input. */ disabled: boolean; /** The positioning of the typeahead dropdown in relation to its parent. */ dropDirection: 'auto' | 'up' | 'down'; /** The maximum height of the typeahead dropdown, as a CSS value. */ maxHeight: string; /** * Controls whether the user can select more than one option in the select control. If set to true, selected * options will appear as tags in the input area. If set to false, the selected value will appear as editable text * in the input area. */ multiple: boolean; /** * The number of options to request in a page. This should ideally be more than twice the number of items which * fit into the height of the dropdown, but this is not required. */ pageSize: number; /** The placeholder text which appears in the text input area when it is empty. */ placeholder: string; /** * A template which will be rendered as the content of each selected option. The following context * properties are available in the template via the TagTemplateContext: * - `tag: T` - the string or custom object representing the selected option. * - `index: number` - the zero-based index of the selected option as it appears in the dropdown. * - `api: TagApi` - provides the functions getTagDisplay, removeTagAt and canRemoveTagAt. */ tagTemplate: TemplateRef<TagTemplateContext>; optionsHeadingTemplate: TemplateRef<void>; recentOptionsHeadingTemplate: TemplateRef<void>; /** * Defines the `autocomplete` property on the `input` element which can be used to prevent the browser from * displaying autocomplete suggestions. */ autocomplete: string; /** A template which will be rendered in the dropdown while options are being loaded. */ loadingTemplate: TemplateRef<void>; /** A template which will be rendered in the dropdown if no options match the current filter value. */ noOptionsTemplate: TemplateRef<void>; /** If `true` the input field will be readonly and selection can only occur by using the dropdown. */ readonlyInput: boolean; /** Determine if we should show the clear all button */ clearButton: boolean; /** Determine an aria label for the clear button */ clearButtonAriaLabel: string; /** Determine if the dropdown panel should close on external click.*/ set autoCloseDropdown(value: boolean); get autoCloseDropdown(): boolean; /** * A template which will be rendered in the dropdown for each option. * The following context properties are available in the template: * - option: any - the string or custom object representing the option. * - api: TypeaheadOptionApi - provides the functions `getKey`, `getDisplay` and `getDisplayHtml`. */ optionTemplate: TemplateRef<TypeaheadOptionContext<T>>; /** * An initial list of recently selected options, to be presented above the full list of options. * Bind an empty array to `recentOptions` to enable this feature without providing an initial set. */ recentOptions: ReadonlyArray<T>; /** Maximum number of displayed recently selected options. */ recentOptionsMaxCount: number; /** Specified if this is a required input. */ required: boolean; /** Specify the debounceTime value for the select filter */ get filterDebounceTime(): number; set filterDebounceTime(filterDebounceTime: number); /** Emits when `value` changes. */ valueChange: EventEmitter<T | readonly T[]>; /** Emits when `input` changes. */ inputChange: EventEmitter<string>; /** Emits when `dropdownOpen` changes. */ dropdownOpenChange: EventEmitter<boolean>; /** Emits when recently selected options change. */ recentOptionsChange: EventEmitter<readonly T[]>; /** Allow a custom icon to be used instead of the chevron */ icon: TemplateRef<void>; singleInput: ElementRef; tagInput: TagInputComponent; multipleTypeahead: TypeaheadComponent; singleTypeahead: TypeaheadComponent; highlightedElement: HTMLElement; filter$: Observable<string>; _value$: ReplaySubject<T | readonly T[]>; _hasValue: boolean; /** We need to store the most recent value*/ private _value; private readonly _input$; private _dropdownOpen; private _userInput; private _filterDebounceTime; private _autoCloseDropdown; private _onChange; private _onTouched; private readonly _onDestroy; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; writeValue(obj: T): void; registerOnChange(fn: (value: T) => void): void; registerOnTouched(fn: () => void): void; setDisabledState(isDisabled: boolean): void; inputClickHandler(): void; inputBlurHandler(): void; /** * Key handler for single select only. Multiple select key handling is in TagInputComponent. */ inputKeyHandler(event: KeyboardEvent): void; /** This gets called whenever the user types in the input */ onInputChange(input: string): void; /** Whenever a single select item is selected emit the values */ _singleOptionSelected(event: TypeaheadOptionEvent): void; /** Whenever a multi-select item is selected emit the values */ _multipleOptionSelected(selection: ReadonlyArray<T>): void; /** * Returns the display value of the given option. */ getDisplay(option: T | readonly T[]): string; /** Toggle the dropdown open state */ toggle(): void; /** Handle input focus events */ onFocus(): void; clear(): void; private selectInputText; static ngAcceptInputType_filterDebounceTime: NumberInput; static ngAcceptInputType_autoCloseDropdown: BooleanInput; static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent<any>, never>; static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent<any>, "ux-select, ux-combobox, ux-dropdown", never, { "id": { "alias": "id"; "required": false; }; "value": { "alias": "value"; "required": false; }; "input": { "alias": "input"; "required": false; }; "dropdownOpen": { "alias": "dropdownOpen"; "required": false; }; "options": { "alias": "options"; "required": false; }; "display": { "alias": "display"; "required": false; }; "key": { "alias": "key"; "required": false; }; "allowNull": { "alias": "allowNull"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "listboxAriaLabel": { "alias": "listboxAriaLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "dropDirection": { "alias": "dropDirection"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tagTemplate": { "alias": "tagTemplate"; "required": false; }; "optionsHeadingTemplate": { "alias": "optionsHeadingTemplate"; "required": false; }; "recentOptionsHeadingTemplate": { "alias": "recentOptionsHeadingTemplate"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "noOptionsTemplate": { "alias": "noOptionsTemplate"; "required": false; }; "readonlyInput": { "alias": "readonlyInput"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "clearButtonAriaLabel": { "alias": "clearButtonAriaLabel"; "required": false; }; "autoCloseDropdown": { "alias": "autoCloseDropdown"; "required": false; }; "optionTemplate": { "alias": "optionTemplate"; "required": false; }; "recentOptions": { "alias": "recentOptions"; "required": false; }; "recentOptionsMaxCount": { "alias": "recentOptionsMaxCount"; "required": false; }; "required": { "alias": "required"; "required": false; }; "filterDebounceTime": { "alias": "filterDebounceTime"; "required": false; }; }, { "valueChange": "valueChange"; "inputChange": "inputChange"; "dropdownOpenChange": "dropdownOpenChange"; "recentOptionsChange": "recentOptionsChange"; }, ["icon"], never, false, never>; }