@alyle/ui/select/select.d.ts

Minimal Design, a set of components for Angular

import { ChangeDetectorRef, DoCheck, ElementRef, OnDestroy, OnInit, Renderer2, TemplateRef, NgZone, OnChanges, QueryList, AfterContentInit, EventEmitter } from '@angular/core';
import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
import { LyField, LyFieldControlBase } from '@alyle/ui/field';
import { LyOverlay, LyTheme2, OverlayFactory, ThemeVariables, CanDisableCtor, LyRippleService, StyleCollection, LyClasses, StyleTemplate, ThemeRef, StyleRenderer, WithStyles } from '@alyle/ui';
import { Subject, Observable } from 'rxjs';
import { Platform } from '@angular/cdk/platform';
import { FocusableOption, FocusOrigin, ActiveDescendantKeyManager } from '@angular/cdk/a11y';
import { BooleanInput } from '@angular/cdk/coercion';
import { SelectionModel } from '@angular/cdk/collections';
import { ViewportRuler } from '@angular/cdk/scrolling';
import * as i0 from "@angular/core";
export interface LySelectTheme {
    /** Styles for Select Component */
    root?: StyleCollection<((classes: LyClasses<typeof STYLES>) => StyleTemplate)> | ((classes: LyClasses<typeof STYLES>) => StyleTemplate);
}
export interface LySelectVariables {
    select?: LySelectTheme;
}
export declare const STYLES: (theme: ThemeVariables & LySelectVariables, ref: ThemeRef) => {
    $priority: number;
    $name: string;
    root: () => (_className: string) => string;
    container: (_className: string) => string;
    valueText: (_className: string) => string;
    option: (_className: string) => string;
    optionActive: (_className: string) => string;
    optionText: (_className: string) => string;
    content: (_className: string) => string;
    /** Style for field */
    _cursorPointer: () => (_className: string) => string;
};
/** Change event object that is emitted when the select value has changed. */
export declare class LySelectChange {
    /** Reference to the select that emitted the change event. */
    source: LySelect;
    /** Current value of the select that emitted the event. */
    value: any;
    constructor(
    /** Reference to the select that emitted the change event. */
    source: LySelect, 
    /** Current value of the select that emitted the event. */
    value: any);
}
/** @docs-private */
export declare class LySelectBase {
}
/** @docs-private */
export declare const LySelectMixinBase: import("@alyle/ui/src/common/constructor").Constructor<import("@alyle/ui").HasTabIndex> & CanDisableCtor;
/**
 * Allows the user to customize the trigger that is displayed when the select has a value.
 */
export declare class LySelectTrigger {
    static ɵfac: i0.ɵɵFactoryDeclaration<LySelectTrigger, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<LySelectTrigger, "ly-select-trigger", never, {}, {}, never, never, false, never>;
}
export declare class LySelect extends LySelectMixinBase implements ControlValueAccessor, LyFieldControlBase, OnInit, DoCheck, AfterContentInit, OnDestroy {
    private _theme;
    readonly sRenderer: StyleRenderer;
    private _renderer;
    private _el;
    private _overlay;
    /** @internal */
    _field: LyField;
    /** @internal */
    _cd: ChangeDetectorRef;
    private _ngZone;
    private _viewportRuler;
    /** @docs-private */
    ngControl: NgControl;
    private _parentForm;
    private _parentFormGroup;
    /** @docs-private */
    static readonly и = "LySelect";
    /** @docs-private */
    readonly classes: LyClasses<(theme: ThemeVariables & LySelectVariables, ref: ThemeRef) => {
        $priority: number;
        $name: string;
        root: () => (_className: string) => string;
        container: (_className: string) => string;
        valueText: (_className: string) => string;
        option: (_className: string) => string;
        optionActive: (_className: string) => string;
        optionText: (_className: string) => string;
        content: (_className: string) => string;
        /** Style for field */
        _cursorPointer: () => (_className: string) => string;
    }>;
    /** @internal */
    _selectionModel: SelectionModel<LyOption>;
    /** @internal */
    _value: any;
    /** The cached font-size of the trigger element. */
    _triggerFontSize: number;
    private _overlayRef;
    protected _disabled: boolean;
    protected _required: boolean;
    protected _placeholder: string;
    readonly stateChanges: Subject<void>;
    private _hasDisabledClass?;
    private _errorClass?;
    private _form;
    private _multiple;
    private _opened;
    private _valueKey;
    private _previousOffsetY;
    _focused: boolean;
    errorState: boolean;
    /**
     * Keeps track of the previous form control assigned to the select.
     * Used to detect if it has changed.
     */
    private _previousControl;
    /** Manages keyboard events for options in the panel. */
    _keyManager: ActiveDescendantKeyManager<LyOption>;
    /** Emits when the panel element is finished transforming in. */
    _panelDoneAnimatingStream: Subject<{
        state: string;
        overlay: OverlayFactory;
    }>;
    /** Comparison function to specify which option is displayed. Defaults to object equality. */
    private _compareWith;
    /** Emits whenever the component is destroyed. */
    private readonly _destroy;
    /** Combined stream of all of the child options' change events. */
    readonly optionSelectionChanges: Observable<LyOptionSelectionChange>;
    templateRef: TemplateRef<any>;
    valueTextDivRef: ElementRef<HTMLDivElement>;
    /** @internal */
    _options: QueryList<LyOption>;
    options: QueryList<LyOption>;
    customTrigger: LySelectTrigger;
    /** Event emitted when the select panel has been toggled. */
    readonly openedChange: EventEmitter<boolean>;
    /** Event emitted when the select has been opened. */
    readonly _openedStream: Observable<void>;
    /** Event emitted when the select has been closed. */
    readonly _closedStream: Observable<void>;
    /** Event emitted when the selected value has been changed by the user. */
    readonly selectionChange: EventEmitter<LySelectChange>;
    /**
     * Event that emits whenever the raw value of the select changes. This is here primarily
     * to facilitate the two-way binding for the `value` input.
     * @docs-private
     */
    readonly valueChange: EventEmitter<any>;
    /**
     * The registered callback function called when a change event occurs on the input element.
     */
    onChange: (_: any) => void;
    /**
     * The registered callback function called when a blur event occurs on the input element.
     */
    onTouched: () => void;
    _onFocus(): void;
    _onBlur(): void;
    /** Time to wait in milliseconds after the last keystroke before moving focus to an item. */
    get typeaheadDebounceInterval(): number;
    set typeaheadDebounceInterval(value: number);
    private _typeaheadDebounceInterval;
    /** Value of the select control. */
    get value(): any;
    set value(newValue: any);
    /** Whether the input is disabled. */
    set disabled(val: BooleanInput);
    get disabled(): boolean;
    set required(value: BooleanInput);
    get required(): boolean;
    set multiple(value: BooleanInput);
    get multiple(): boolean;
    /**
     * @deprecated has been deprecated in favor of `compareWith`
     */
    set valueKey(fn: (opt: unknown) => unknown);
    get valueKey(): (opt: unknown) => unknown;
    set placeholder(val: string);
    get placeholder(): string;
    /**
     * Function to compare the option values with the selected values. The first argument
     * is a value from an option. The second is a value from the selection. A boolean
     * should be returned.
     */
    get compareWith(): (o1: any, o2: any) => boolean;
    set compareWith(fn: (o1: any, o2: any) => boolean);
    /**
     * Function used to sort the values in a select in multiple mode.
     * Follows the same logic as `Array.prototype.sort`.
     */
    sortComparator: (a: LyOption, b: LyOption, options: LyOption[]) => number;
    get focused(): boolean;
    get empty(): boolean;
    get floatingLabel(): boolean;
    /** The value displayed in the trigger. */
    get triggerValue(): string;
    /** Current selecteds */
    get selected(): LyOption | LyOption[];
    constructor(_theme: LyTheme2, sRenderer: StyleRenderer, _renderer: Renderer2, _el: ElementRef, _overlay: LyOverlay, 
    /** @internal */
    _field: LyField, 
    /** @internal */
    _cd: ChangeDetectorRef, _ngZone: NgZone, _viewportRuler: ViewportRuler, 
    /** @docs-private */
    ngControl: NgControl, _parentForm: NgForm, _parentFormGroup: FormGroupDirective);
    ngOnInit(): void;
    ngDoCheck(): void;
    ngAfterContentInit(): void;
    ngOnDestroy(): void;
    open(): void;
    close(): void;
    private _closeOverlay;
    /** @docs-private */
    onContainerClick(): void;
    /** Focuses the select element. */
    focus(options?: FocusOptions): void;
    _getHostElement(): any;
    /**
     * Sets the "value" property on the input element.
     *
     * @param value The checked value
     */
    writeValue(value: any): void;
    /**
     * Registers a function called when the control value changes.
     *
     * @param fn The callback function
     */
    registerOnChange(fn: (value: any) => any): void;
    /**
     * Registers a function called when the control is touched.
     *
     * @param fn The callback function
     */
    registerOnTouched(fn: () => any): void;
    /**
     * Disables the select. Part of the ControlValueAccessor interface required
     * to integrate with Angular's core forms API.
     *
     * @param isDisabled Sets whether the component is disabled.
     */
    setDisabledState(isDisabled: boolean): void;
    /** Handles all keydown events on the select. */
    _handleKeydown(event: KeyboardEvent): void;
    /** Handles keyboard events while the select is closed. */
    private _handleClosedKeydown;
    /** Handles keyboard events when the selected is open. */
    private _handleOpenKeydown;
    private _initializeSelection;
    /**
     * Sets the selected option based on a value. If no option can be
     * found with the designated value, the select trigger is cleared.
     */
    private _setSelectionByValue;
    /**
     * Finds and selects and option based on its value.
     * @returns Option that has the corresponding value.
     */
    private _selectValue;
    private _updatePlacement;
    /** Sets up a key manager to listen to keyboard events on the overlay panel. */
    private _initKeyManager;
    /** Sorts the selected values in the selected based on their order in the panel. */
    private _sortValues;
    private _resetOptions;
    /** Invoked when an option is clicked. */
    private _onSelect;
    /** Emits change event to set the model value. */
    private _propagateChanges;
    /**
     * Highlights the selected item. If no option is selected, it will highlight
     * the first item instead.
     */
    private _highlightCorrectOption;
    /** Scrolls the active option into view. */
    private _scrollActiveOptionIntoView;
    static ɵfac: i0.ɵɵFactoryDeclaration<LySelect, [null, null, null, null, null, { optional: true; }, null, null, null, { optional: true; self: true; }, { optional: true; }, { optional: true; }]>;
    static ɵcmp: i0.ɵɵComponentDeclaration<LySelect, "ly-select", ["lySelect"], { "tabIndex": { "alias": "tabIndex"; "required": false; }; "typeaheadDebounceInterval": { "alias": "typeaheadDebounceInterval"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "valueKey": { "alias": "valueKey"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; }, { "openedChange": "openedChange"; "_openedStream": "opened"; "_closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["customTrigger", "options"], ["ly-select-trigger", "*"], false, never>;
}
/** Event object emitted by LyOption when selected or deselected. */
export declare class LyOptionSelectionChange {
    /** Reference to the option that emitted the event. */
    source: LyOption;
    /** Whether the change in the option's value was a result of a user action. */
    isUserInput: boolean;
    constructor(
    /** Reference to the option that emitted the event. */
    source: LyOption, 
    /** Whether the change in the option's value was a result of a user action. */
    isUserInput?: boolean);
}
/** @docs-private */
export declare class LyOptionBase {
    _theme: LyTheme2;
    _ngZone: NgZone;
    _platform: Platform;
    constructor(_theme: LyTheme2, _ngZone: NgZone, _platform: Platform);
}
/** @docs-private */
export declare const LyOptionMixinBase: import("@alyle/ui/src/common/constructor").Constructor<import("@alyle/ui/src/common/disable-ripple").CanDisableRipple> & typeof LyOptionBase;
/**
 * @dynamic
 */
export declare class LyOption extends LyOptionMixinBase implements WithStyles, FocusableOption, OnInit, OnChanges {
    readonly sRenderer: StyleRenderer;
    /** @internal */
    readonly _select: LySelect;
    private _el;
    /** @internal */
    _rippleService: LyRippleService;
    /** @internal */
    _cd: ChangeDetectorRef;
    /** @docs-private */
    readonly classes: LyClasses<(theme: ThemeVariables & LySelectVariables, ref: ThemeRef) => {
        $priority: number;
        $name: string;
        root: () => (_className: string) => string;
        container: (_className: string) => string;
        valueText: (_className: string) => string;
        option: (_className: string) => string;
        optionActive: (_className: string) => string;
        optionText: (_className: string) => string;
        content: (_className: string) => string;
        /** Style for field */
        _cursorPointer: () => (_className: string) => string;
    }>;
    private _value;
    private _selected;
    private _disabled;
    _rippleContainer: ElementRef;
    /** Event emitted when the option is selected or deselected. */
    readonly onSelectionChange: EventEmitter<LyOptionSelectionChange>;
    _onClick(): void;
    /** Whether or not the option is currently selected. */
    get selected(): boolean;
    /** Whether the wrapping component is in multiple selection mode. */
    get multiple(): boolean;
    /**
     * Tracks simple string values bound to the option element.
     */
    set value(value: any);
    get value(): any;
    /** Whether the option is disabled. */
    set disabled(value: any);
    get disabled(): any;
    _selectedColor: string | null;
    /** The displayed value of the option. */
    get viewValue(): string;
    /** The color of Select option */
    get _color(): string;
    /**
     * @deprecated use instead `selected`
     */
    get isSelected(): boolean;
    constructor(sRenderer: StyleRenderer, 
    /** @internal */
    _select: LySelect, _el: ElementRef, 
    /** @internal */
    _rippleService: LyRippleService, _renderer: Renderer2, _theme: LyTheme2, 
    /** @internal */
    _cd: ChangeDetectorRef, _ngZone: NgZone, platform: Platform);
    ngOnInit(): void;
    ngOnChanges(): void;
    /** Applies the styles for an active item to this item. */
    setActiveStyles(): void;
    /** Applies the styles for an inactive item to this item. */
    setInactiveStyles(): void;
    /** Gets the label to be used when determining whether the option should be focused. */
    getLabel(): string;
    /** Selects the option. */
    select(): void;
    /** Deselects the option. */
    deselect(): void;
    /** Sets focus onto this option. */
    focus(_origin?: FocusOrigin, options?: FocusOptions): void;
    /** Ensures the option is selected when activated from the keyboard. */
    _handleKeydown(event: KeyboardEvent): void;
    /**
     * `Selects the option while indicating the selection came from the user. Used to
     * determine if the select's view -> model callback should be invoked.`
     */
    _selectViaInteraction(): void;
    /** @internal */
    _getHostElement(): HTMLElement;
    /** Returns the correct tabindex for the option depending on disabled state. */
    _getTabIndex(): string;
    /** Emits the selection change event. */
    private _emitSelectionChangeEvent;
    static ɵfac: i0.ɵɵFactoryDeclaration<LyOption, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<LyOption, "ly-option", never, { "disableRipple": { "alias": "disableRipple"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "onSelectionChange": "onSelectionChange"; }, never, ["*"], false, never>;
}