import { Primitive } from 'tableau-ui-angular/types'; import * as i0 from '@angular/core'; import { Signal, AfterViewInit, OnDestroy, InputSignal, TemplateRef, WritableSignal, PipeTransform } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; import { Subscription } from 'rxjs'; import * as i6 from 'tableau-ui-angular/common'; import { OptionComponent, PrefixComponent, SuffixComponent, IOptionLineContext, IOptionGridContext } from 'tableau-ui-angular/common'; import * as i5 from '@angular/common'; import * as i7 from 'tableau-ui-angular/icon'; import * as i8 from 'tableau-ui-angular/button'; import * as i9 from 'tableau-ui-angular/dialog'; declare class MultiSelectComponent extends SelectBaseComponent { protected $isMultiSelect(): this is MultiSelectComponent; /** * The maximum number of items to display in the selected value field when multiple items are selected * @default 2 */ readonly $multipleSelectionMaxItemsListed: i0.InputSignal; /** * The display template to use when more than the maximum number of items selected * @remarks * Use {number} as a placeholder for the number of items selected */ readonly $multipleSelectionNumberSelectedTemplate: i0.InputSignal; readonly $hasValue: Signal; protected selectValueInternal: (currentValue: T[] | undefined, selectedValue: T) => void; protected clearValueInternal: () => void; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵcmp: i0.ɵɵComponentDeclaration, "tab-multi-select", never, { "$multipleSelectionMaxItemsListed": { "alias": "multipleSelectionMaxItemsListed"; "required": false; "isSignal": true; }; "$multipleSelectionNumberSelectedTemplate": { "alias": "multipleSelectionNumberSelectedTemplate"; "required": false; "isSignal": true; }; }, {}, never, ["tab-prefix", "tab-suffix"], false, never>; } declare abstract class SelectBaseComponent implements ControlValueAccessor, AfterViewInit, OnDestroy { protected readonly selectId: string; protected readonly dropdownId: string; protected readonly $options: Signal[]>; protected $isMultiSelect(): this is MultiSelectComponent; private readonly optionsChanged; protected readonly $dropdownPrefix: Signal; protected readonly $dropdownSuffix: Signal; private readonly $dropdownTemplate; private readonly dialogService; private readonly elementRef; /** * Whether the select is disabled * @remarks * Set this using the FormControl if you are using reactive forms. * Only set this manually if you are not using reactive forms. * * @default false */ readonly $disabled: i0.ModelSignal; /** * Placeholder text to display when no value is selected * // nullable Signal type needs to be set explicitly -> ng-packagr strips nullability */ readonly $placeholder: InputSignal; /** * The currently selected value. * @remarks * If allowMultiple is true, this should be an array of values. * If allowMultiple is false, this should be a single value. */ readonly $value: i0.ModelSignal; /** * The CSS text to apply to the dropdown container * @remarks * Use this to apply height, maxHeight, etc. to the dropdown container * @default '{}' */ readonly $dropdownContainerCss: InputSignal>; /** * The CSS text to apply to the options container in the dropdown * @remarks * Use this to apply height, maxHeight, etc. to the dropdown * This is applied to the options container, excluding the prefix & suffix * * @default "{ maxHeight: '300px', height: 'fit-content'}" */ readonly $dropdownOptionsContainerCss: InputSignal>; /** * Whether to show the chevron icon on the right side of the select */ readonly $showChevron: InputSignal; /** * The location of the check icon in dropdown option if an option is selected * @default 'none' */ readonly $selectedCheckIconLocation: InputSignal<"left" | "none" | "right">; /** * Highlight the selected item(s) with a primary back color * @default true */ readonly $selectedItemHighlight: InputSignal; /** * Whether the clear button should be displayed * @remarks * It is only displayed if there are any values selected even if this is true * @default false */ readonly $allowClear: InputSignal; /** * The wrapping mode for the selected value field * @remarks * If set to 'wrap', the text will wrap to the next line if it is too long to fit on one line. This will increase the height of the control * If set to 'truncate', the text will be truncated with an ellipsis if it is too long to fit on one line. This will keep the height of the control the same * @default 'wrap' */ readonly $selectedValueWrapMode: InputSignal<"truncate" | "wrap">; /** * The template context to use for the selected value field * @remarks * Use this to display the 'icon' and 'text' properties of the selected value conditionally */ readonly $selectedValueTemplateContext: InputSignal; /** * The template context to use for the dropdown options * @remarks * Use this to display the 'icon', 'text', and 'hint' properties of the options conditionally */ readonly $dropdownValueTemplateContext: InputSignal; constructor(); ngAfterViewInit(): void; ngOnDestroy(): void; abstract readonly $hasValue: Signal; protected readonly $selectedValueTemplates: Signal<{ value: Primitive; template: TemplateRef; }[]>; protected readonly $displayClearButton: Signal; onChange: (value: TValue | undefined) => void; onTouched: () => void; writeValue(value: TValue | undefined): void; registerOnChange(fn: (value: TValue | undefined) => void): void; registerOnTouched(fn: () => void): void; setDisabledState(isDisabled: boolean): void; protected readonly $highlightedOption: WritableSignal | undefined>; optionMouseDown(event: MouseEvent): void; selectValue(option: OptionComponent): void; protected abstract readonly selectValueInternal: (currentValue: TValue | undefined, selectedValue: TOption) => void; clearValue(e: Event): void; protected abstract readonly clearValueInternal: () => void; private readonly $dropdownReference; protected readonly $dropdownOpen: Signal; openDropdown(): void; /** * * @param e Handles KeyDown event for: * - host element * - global keydown event when dropdown is open * @returns */ onKeyDown(e: KeyboardEvent): void; clearKeyDown(e: KeyboardEvent): void; optionKeyNavSubscription: Subscription | undefined; private registerOptionKeyNavigation; private unregisterOptionKeyNavigation; focusChangeFn: ((event: FocusEvent) => void) | undefined; registerFocusChange(): void; unregisterFocusChange(): void; checkFocus(event: FocusEvent): void; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, never, never, { "$disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "$placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "$value": { "alias": "value"; "required": false; "isSignal": true; }; "$dropdownContainerCss": { "alias": "dropdownContainerCss"; "required": false; "isSignal": true; }; "$dropdownOptionsContainerCss": { "alias": "dropdownOptionsContainerCss"; "required": false; "isSignal": true; }; "$showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; "$selectedCheckIconLocation": { "alias": "selectedCheckIconLocation"; "required": false; "isSignal": true; }; "$selectedItemHighlight": { "alias": "selectedItemHighlight"; "required": false; "isSignal": true; }; "$allowClear": { "alias": "allowClear"; "required": false; "isSignal": true; }; "$selectedValueWrapMode": { "alias": "selectedValueWrapMode"; "required": false; "isSignal": true; }; "$selectedValueTemplateContext": { "alias": "selectedValueTemplateContext"; "required": false; "isSignal": true; }; "$dropdownValueTemplateContext": { "alias": "dropdownValueTemplateContext"; "required": false; "isSignal": true; }; }, { "$disabled": "disabledChange"; "$value": "valueChange"; }, ["$options", "$dropdownPrefix", "$dropdownSuffix"], never, true, never>; } declare class SingleSelectComponent extends SelectBaseComponent { protected readonly $multipleSelectionMaxItemsListed: InputSignal; readonly $hasValue: Signal; protected selectValueInternal: (currentValue: T | undefined, selectedValue: T) => void; protected clearValueInternal: () => void; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵcmp: i0.ɵɵComponentDeclaration, "tab-single-select", never, { "$multipleSelectionMaxItemsListed": { "alias": "$multipleSelectionMaxItemsListed"; "required": false; "isSignal": true; }; }, {}, never, ["tab-prefix", "tab-suffix"], false, never>; } declare class IsSelectedValuePipe implements PipeTransform { transform(option: OptionComponent, allowMultiple: boolean, value: T | T[] | undefined): boolean; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵpipe: i0.ɵɵPipeDeclaration, "isSelectedValue", false>; } declare class MultipleTemplatePipe implements PipeTransform { transform(template: string, number: number): unknown; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵpipe: i0.ɵɵPipeDeclaration; } declare class TableauUiSelectModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } export { MultiSelectComponent, SingleSelectComponent, TableauUiSelectModule };