gentics-ui-core/components/select/select.component.d.ts

This is the common core framework for the Gentics CMS and Mesh UI, and other Angular applications.

import { ChangeDetectorRef, ElementRef, EventEmitter } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { Subscription } from 'rxjs';
import { SelectOption } from './option.component';
import * as i0 from "@angular/core";
export interface NormalizedOptionGroup {
    options: SelectOption[];
    label: string;
    disabled: boolean;
    isDefaultGroup: boolean;
}
export declare type SelectedSelectOption = [number, number];
/**
 * A Select form control which works with any kind of value - as opposed to the native HTML `<select>` which only works
 * with strings. The Select control depends on the [`<gtx-overlay-host>`](#/overlay-host) being present in the app.
 *
 * ```html
 * <gtx-select label="Choose an option" [(ngModel)]="selectVal">
 *     <gtx-option *ngFor="let item of options"
 *                 [value]="item"
 *                 [disabled]="item.disabled">{{ item.label }}</gtx-option>
 * </gtx-select>
 * ```
 *
 */
export declare class Select implements ControlValueAccessor {
    private changeDetector;
    private elementRef;
    /**
     * Sets the select box to be auto-focused. Handled by `AutofocusDirective`.
     */
    autofocus: boolean;
    /** If true the clear button is displayed, which allows the user to clear the selection. */
    get clearable(): boolean;
    set clearable(val: boolean);
    /**
     * Sets the disabled state.
     */
    get disabled(): boolean;
    set disabled(value: boolean);
    /**
     * When set to true, allows multiple options to be selected. In this case, the input value should be
     * an array of strings; events will emit an array of strings.
     */
    multiple: boolean;
    /**
     * Sets the required state.
     */
    required: boolean;
    /**
     * The value determines which of the options are selected.
     */
    value: any;
    /**
     * Placeholder which is shown if nothing is selected.
     */
    placeholder: string;
    /**
     * A text label for the input.
     */
    label: string;
    /**
     * Blur event.
     */
    blur: EventEmitter<any>;
    /**
     * Focus event.
     */
    focus: EventEmitter<any>;
    /**
     * Change event.
     */
    change: EventEmitter<any>;
    optionGroups: NormalizedOptionGroup[];
    subscriptions: Subscription[];
    selectedOptions: SelectOption[];
    viewValue: string;
    selectedIndex: SelectedSelectOption;
    _clearable: boolean;
    _disabled: boolean;
    private preventDeselect;
    private dropdownList;
    private dropdownContent;
    private _selectOptions;
    private _selectOptionGroups;
    onChange: () => void;
    onTouched: () => void;
    constructor(changeDetector: ChangeDetectorRef, elementRef: ElementRef);
    ngAfterViewInit(): void;
    ngAfterContentInit(): void;
    ngOnDestroy(): void;
    /**
     * Event handler for when one of the Materialize-generated LI elements is clicked.
     */
    selectItem(groupIndex: number, optionIndex: number): void;
    inputBlur(e: Event): void;
    /**
     * Select the initial value when the dropdown is opened.
     */
    dropdownOpened(): void;
    /**
     * Handle keydown events to enable keyboard navigation and selection of options.
     */
    handleKeydown(event: KeyboardEvent): void;
    isSelected(option: SelectOption): boolean;
    deselect(): void;
    writeValue(value: string | string[]): void;
    registerOnChange(fn: (newValue: any) => any): void;
    registerOnTouched(fn: () => any): void;
    setDisabledState(isDisabled: boolean): void;
    /** Clears the selected value and emits `null` with the `change` event. */
    clearSelection(): void;
    /**
     * Given a SelectOption, returns the position in the 2D selectedIndex array.
     */
    private getIndexFromSelectOption;
    /**
     * Once the contents have been compiled, we can build up the optionGroups array, grouping options into
     * a "default" group, i.e. the group of options which are not children of a <gtx-optgroup>, and then any
     * other groups as specified by optgroups.
     */
    private buildOptionGroups;
    /**
     * Select any options which match the value passed in via the `value` attribute.
     */
    private getInitiallySelectedOptions;
    /**
     * Toggle the selection of the given SelectOption, taking into account whether this is a multiple
     * select.
     */
    private toggleSelectedOption;
    private updateViewValue;
    /**
     * When a list of options is too long, there will be a scroll bar. This method ensures that the currently-selected
     * options is scrolled into view in the options list.
     */
    private scrollToSelectedOption;
    /**
     * Searches through the available options and locates the next option with a viewValue whose first character
     * matches the character passed in. Useful for jumping to options quickly by typing the first letter of the
     * option view value.
     */
    private searchByKey;
    private getFirstIndex;
    private getLastIndex;
    private getNextIndex;
    private getPreviousIndex;
    /**
     * Sets the `selectedOptions` array to contain the single option at the selectedIndex.
     */
    private updateSelectedIndex;
    static ɵfac: i0.ɵɵFactoryDeclaration<Select, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<Select, "gtx-select", never, { "autofocus": "autofocus"; "clearable": "clearable"; "disabled": "disabled"; "multiple": "multiple"; "required": "required"; "value": "value"; "placeholder": "placeholder"; "label": "label"; }, { "blur": "blur"; "focus": "focus"; "change": "change"; }, ["_selectOptions", "_selectOptionGroups"], never>;
}