@doku-dev/doku-fragment/lib/select/select.component.d.ts

A new Angular UI library that moving away from Bootstrap and built from scratch.

import { NgClass } from '@angular/common';
import { AfterContentInit, AfterViewInit, ApplicationRef, ChangeDetectorRef, EnvironmentInjector, EventEmitter, Injector, NgZone, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { ControlValueAccessor, NgControl } from '@angular/forms';
import { BehaviorSubject, Subject } from 'rxjs';
import { DokuFormField, DokuFormFieldAccessor, DokuFormFieldAccessorValidateState, DokuFormFieldAccessorValidateValue } from '../form-field';
import { DokuSelectLabelTemplate } from './directives/select-label-template.directive';
import { DokuSelectOptionItem, DokuSelectOptionItemRecord } from './select.interface';
import * as i0 from "@angular/core";
type DokuSelectArrowPlacement = 'left' | 'right';
export type DokuSelectSearchMatcherFn = (searchTerm: string, item: DokuSelectOptionItemRecord) => boolean;
export declare class DokuSelect implements ControlValueAccessor, OnDestroy, AfterViewInit, DokuFormFieldAccessor, OnInit, AfterContentInit {
    private envInjector;
    private appRef;
    private ngZone;
    private injector;
    private cdr;
    private renderer;
    private document;
    private ngControl?;
    private formField?;
    /**
     * List of options that will be shown on the dropdown.
     *
     * Supported values:
     * - array of string or number
     * - array of object (nested object is not supported)
     *
     * @default []
     */
    get items(): DokuSelectOptionItemRecord[];
    set items(value: DokuSelectOptionItem[]);
    private _items;
    /**
     * Bind property key of the label from the item if `items` value is an array of object.
     *
     * @default 'label'
     */
    bindLabel: string;
    /**
     * Bind property key of the value from the item if `items` value is an array of object.
     *
     * @default 'value'
     */
    bindValue: string;
    /**
     * Value of the selected options.
     *
     * @default undefined
     */
    get value(): string | string[];
    set value(value: string | string[]);
    private _value;
    /**
     * Placeholder of the field.
     *
     * @default ''
     */
    placeholder: string;
    /**
     * Additional class that will be attached to the portal element of the dropdown element.
     *
     * @default undefined
     */
    portalClass?: string;
    /**
     * Whether the select should allow multiple options selected simultaneously.
     *
     * @default false
     */
    get multiple(): boolean;
    set multiple(value: boolean);
    private _multiple;
    /**
     * Whether to truncate the label when the width is reached.
     *
     * Does not truncate the label if `multiple` is true.
     *
     * @default false
     */
    get truncateLabel(): boolean;
    set truncateLabel(value: boolean);
    private _truncateLabel;
    /**
     * The placement of the arrow icon.
     *
     * @default 'right'
     */
    get arrowPlacement(): DokuSelectArrowPlacement;
    set arrowPlacement(value: DokuSelectArrowPlacement);
    private _arrowPlacement;
    /**
     * Whether the select input should be disabled.
     *
     * @default false;
     */
    get disabled(): boolean;
    set disabled(value: boolean);
    private _disabled;
    /**
     * Whether the select input is readonly.
     *
     * @default false
     */
    get readonly(): boolean;
    set readonly(value: boolean);
    private _readonly;
    /**
     * Whether the select options are searchable.
     *
     * @default false
     */
    searchable: boolean;
    /**
     * Whether to provide async data fetching when searching data.
     * It will display a loading state in the select options.
     *
     * Only works when `searchable` is true.
     *
     * @default false
     */
    get isAsync(): boolean;
    set isAsync(value: boolean);
    private _isAsync;
    /**
     * Custom matcher for searchable options.
     *
     * It will filter each items and when returning true, the item will be shown.
     *
     * @default undefined
     */
    searchMatcherFn?: DokuSelectSearchMatcherFn;
    /**
     * Whether the selected item can be cleared by clicking an icon.
     *
     * For `multiple`, it will remove all selected items.
     *
     * @default false
     */
    clearable: boolean;
    /**
     * An event emitted when value changes.
     */
    valueChange: EventEmitter<string | string[]>;
    /**
     * An event emitted if `searchable` is `true`.
     */
    search: EventEmitter<string>;
    _notifyOnChange$: Subject<{
        type: 'item' | 'value' | 'loading' | 'disabled' | 'readonly' | 'arrowPlacement' | 'multiple';
    }>;
    /**
     * Whether options dropdown state is opened.
     */
    protected get isOpen(): boolean;
    protected set isOpen(value: boolean);
    private _isOpen;
    /**
     * Loading state used when `isAsync` is true.
     */
    private get loading();
    private set loading(value);
    private _loading;
    protected search$: BehaviorSubject<string>;
    protected filteredItems: DokuSelectOptionItemRecord[];
    protected valueDetails: DokuSelectOptionItemRecord[];
    private cleanup?;
    private destroy$;
    protected labelTemplate?: DokuSelectLabelTemplate;
    private optionTemplate?;
    private noItemTemplate?;
    private loadingTemplate?;
    private searchInput?;
    private portalRef?;
    constructor(envInjector: EnvironmentInjector, appRef: ApplicationRef, ngZone: NgZone, injector: Injector, cdr: ChangeDetectorRef, renderer: Renderer2, document: Document, ngControl?: NgControl | undefined, formField?: DokuFormField | undefined);
    protected get classes(): NgClass['ngClass'];
    protected get hasValue(): boolean;
    protected get shouldShowPlaceholder(): boolean;
    protected get shouldShowValueSingleSelect(): boolean;
    protected get shouldShowValueMultipleSelect(): boolean;
    private get inputWrapperElement();
    ngOnInit(): void;
    ngAfterContentInit(): void;
    ngAfterViewInit(): void;
    ngOnDestroy(): void;
    onChange?: (value: unknown) => void;
    onTouched?: () => void;
    writeValue(value: string | string[]): void;
    registerOnChange(fn: (value: unknown) => void): void;
    registerOnTouched(fn: () => void): void;
    setDisabledState(isDisabled: boolean): void;
    onDisable?: ((value: boolean) => void) | undefined;
    onReadonly?: ((value: boolean) => void) | undefined;
    onValidate?: ((value?: DokuFormFieldAccessorValidateValue | undefined, state?: DokuFormFieldAccessorValidateState) => void) | undefined;
    onClickWrapperElement(): void;
    registerOnDisable(fn: (value: boolean) => void): void;
    registerOnReadonly(fn: (value: boolean) => void): void;
    registerOnValidate(fn: (value?: DokuFormFieldAccessorValidateValue | undefined) => void): void;
    /**
     * Open select dropdown programmatically.
     */
    open(): void;
    /**
     * Close select dropdown programmatically.
     */
    close(): void;
    /**
     * Toggle select dropdown programmatically.
     */
    toggle(): void;
    protected clearValue(event: Event): void;
    protected removeItem(item: DokuSelectOptionItemRecord): void;
    protected onSearchValueChange(event: Event): void;
    /**
     * Update value from upcoming.
     *
     * If `multiple` is true, it will add/push value if not exist
     * or will remove value when already exist.
     */
    private patchNextValue;
    /**
     * Normalize input items to object where the value will be converted to string.
     * @param items Input items.
     * @returns Normalized items to object key-value pairs.
     */
    private normalizeInputItems;
    private openSelectDropdownPortal;
    private closeSelectDropdownPortal;
    private injectSelectOptions;
    private handleOnClickSelectOption;
    private handleCloseOptionsClickOutside;
    private scrollToActiveOption;
    private doAutoUpdateDropdownPosition;
    static ɵfac: i0.ɵɵFactoryDeclaration<DokuSelect, [null, null, null, null, null, null, null, { optional: true; self: true; }, { optional: true; }]>;
    static ɵcmp: i0.ɵɵComponentDeclaration<DokuSelect, "doku-select", ["dokuSelect"], { "items": "items"; "bindLabel": "bindLabel"; "bindValue": "bindValue"; "value": "value"; "placeholder": "placeholder"; "portalClass": "portalClass"; "multiple": "multiple"; "truncateLabel": "truncateLabel"; "arrowPlacement": "arrowPlacement"; "disabled": "disabled"; "readonly": "readonly"; "searchable": "searchable"; "isAsync": "isAsync"; "searchMatcherFn": "searchMatcherFn"; "clearable": "clearable"; }, { "valueChange": "valueChange"; "search": "search"; }, ["labelTemplate", "optionTemplate", "noItemTemplate", "loadingTemplate"], never, true>;
}
export {};