@c8y/ngx-components/core/select/select.component.d.ts

Angular modules for Cumulocity IoT applications

import { AfterContentInit, AfterViewInit, EventEmitter, OnChanges, OnDestroy, QueryList, SimpleChanges } from '@angular/core';
import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
import { SelectItemDirective } from './select-item.directive';
import { SelectKeyboardService } from './select-keyboard.service';
import { SelectableItem, SelectableItemTemplate } from './select.model';
import { SelectedItemsDirective } from './selected-items.directive';
import * as i0 from "@angular/core";
export declare class SelectComponent implements AfterContentInit, OnChanges, OnDestroy, AfterViewInit, ControlValueAccessor, Validator {
    private selectKeyboardService;
    /**
     * Placeholder text to be displayed in the select.
     */
    placeholder: "Select item…";
    /**
     * Items to be displayed in the select.
     * Can be an array of strings or an array of objects with `label` and `value` properties.
     *
     * @example
     * ```html
     * <c8y-select [items]="[{ label: 'Item 1', value: 'item1' }, { label: 'Item 2', value: 'item2' }]"></c8y-select>
     * ```
     *
     * @example
     * ```html
     * <c8y-select [items]="['Item 1', 'Item 2', 'Item 3']"></c8y-select>
     * ```
     *
     * For more complex scenarios, you can use content-projection:
     *
     * @example
     * ```html
     * <c8y-select>
     *    <i [c8yIcon]="'rocket'" class="text-16" *c8ySelectItem="'rocket'; label: 'Rocket'"></i>
     *    <i [c8yIcon]="'car'" class="text-16" *c8ySelectItem="'car'; label: 'Car'"></i>
     * </c8y-select>
     * ```
     */
    set items(value: string[] | SelectableItem[] | SelectableItemTemplate[]);
    /**
     * The items to be displayed in the select.
     */
    get items(): SelectableItemTemplate[];
    /**
     * The selected item.
     */
    set selected(value: string | SelectableItem | Array<string | SelectableItem>);
    /**
     * Returns the selected item.
     */
    get selected(): SelectableItem[];
    /**
     * The container to put the dropdown to. Defaults to body.
     */
    container: '' | 'body';
    /**
     * If set to true, the user can select multiple items.
     */
    multi: boolean;
    /**
     * If enabled, an item can be selected with the space key.
     */
    canSelectWithSpace: boolean;
    /**
     * If set to true, the select is disabled.
     */
    disabled: boolean;
    /**
     * Defines, if the dropdown should close automatically after user interaction.
     */
    autoClose: boolean;
    /**
     * Defines if the dropdown should stay open when the user clicks inside the select.
     * If set to true, the dropdown will only close when the user clicks outside the select.
     */
    insideClick: boolean;
    /**
     * Marks the select as required.
     */
    required: boolean;
    /**
     * Allows the user to clear the selection.
     */
    canDeselect: boolean;
    /**
     * The name used for this select.
     */
    name: string;
    /**
     * The icon to be displayed in the select.
     */
    icon: string;
    /**
     * Emits if a item is selected.
     */
    onSelect: EventEmitter<SelectableItem>;
    /**
     * Emits if a item was deselected.
     */
    onDeselect: EventEmitter<SelectableItem>;
    /**
     * Emits when the select icon is clicked.
     */
    onIconClick: EventEmitter<{
        icon: string;
        $event: MouseEvent;
    }>;
    /**
     * Indicates if the search input has focus.
     */
    searchHasFocus: boolean;
    /**
     * The selectable items when content projection is used.
     * @ignore
     */
    projectedSelectableItems: QueryList<SelectItemDirective>;
    /**
     * The selected items when content projection is used.
     * @ignore
     */
    projectedSelectedItems: SelectedItemsDirective;
    private searchControl;
    private dropdown;
    private list;
    /**
     * A item which is preselected. It is used when a user types in the search input to give a visual typeahead feedback.
     */
    get preselectedItem(): SelectableItem;
    /**
     * The internal select element.
     * @ignore
     */
    private _selected;
    /**
     * The internal pre-select element. It is used when a user types in the search input to give a visual typeahead feedback.
     * @ignore
     */
    private _preselectedItem;
    /**
     * The internal items element.
     * @ignore
     */
    private _items;
    private destroy$;
    private onChange;
    private onTouched;
    /**
     * @ignore
     * @param selectKeyboardService The service to handle keyboard navigation.
     */
    constructor(selectKeyboardService: SelectKeyboardService);
    /**
     * @ignore
     */
    ngAfterContentInit(): void;
    /**
     * @ignore
     */
    ngAfterViewInit(): void;
    /**
     * @ignore
     */
    ngOnChanges(changes: SimpleChanges): void;
    /**
     * @ignore
     */
    ngOnDestroy(): void;
    /**
     * Selects an item. In the multi mode, it will toggle the selection of the item.
     * @param item The item to select.
     */
    select(item: SelectableItem): void;
    /**
     * Deselects an item.
     * @param item The item to deselect.
     */
    deselect(item: SelectableItem): void;
    /**
     * Deselects all items
     */
    deselectAll(): void;
    /**
     * Closes the dropdown.
     */
    close(): void;
    /**
     * Opens the dropdown.
     */
    open(): void;
    /**
     * @ignore
     * @param value The value to write.
     */
    writeValue(value: SelectableItem | SelectableItem[]): void;
    /**
     * @ignore
     * @param fn The function to register for onChange.
     */
    registerOnChange(fn: (items: SelectableItem | SelectableItem[]) => void): void;
    /**
     * @ignore
     * @param fn The function to register for onTouched.
     */
    registerOnTouched(fn: () => void): void;
    /**
     * @ignore
     * @param isDisabled Should disable or not
     */
    setDisabledState(isDisabled: boolean): void;
    /**
     * @ignore
     */
    doBlur(): void;
    /**
     * @ignore
     */
    doFocus(): void;
    /**
     * @ignore
     */
    validate(control: AbstractControl): ValidationErrors;
    /**
     * Triggered if the dropdown was shown.
     * @ignore
     */
    onShown(): void;
    /**
     * Triggered if the dropdown was hidden.
     * @ignore
     */
    onHidden(): void;
    private emitChangeEvent;
    static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "c8y-select", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "items": { "alias": "items"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "container": { "alias": "container"; "required": false; }; "multi": { "alias": "multi"; "required": false; }; "canSelectWithSpace": { "alias": "canSelectWithSpace"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "autoClose": { "alias": "autoClose"; "required": false; }; "insideClick": { "alias": "insideClick"; "required": false; }; "required": { "alias": "required"; "required": false; }; "canDeselect": { "alias": "canDeselect"; "required": false; }; "name": { "alias": "name"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; }, { "onSelect": "onSelect"; "onDeselect": "onDeselect"; "onIconClick": "onIconClick"; }, ["projectedSelectedItems", "projectedSelectableItems"], ["div"], true, never>;
}
//# sourceMappingURL=select.component.d.ts.map