@blox/material/components/select/mdc.select.directive.d.ts

Material Components for Angular

import { AfterContentInit, ElementRef, OnDestroy, OnInit, Renderer2, EventEmitter } from '@angular/core';
import { AbstractMdcRipple } from '../ripple/abstract.mdc.ripple';
import { MdcEventRegistry } from '../../utils/mdc.event.registry';
import { MdcMenuDirective } from '../menu/mdc.menu.directive';
import { MdcMenuSurfaceDirective } from '../menu-surface/mdc.menu-surface.directive';
import { HasId } from '../abstract/mixin.mdc.hasid';
import { ControlValueAccessor } from '@angular/forms';
declare class MdcSelectTextDirectiveBase {
}
interface MdcSelectTextDirectiveBase extends HasId {
}
/**
 * Directive for showing the text of the currently selected `mdcSelect` item. It is the responsibility
 * of the host component to set the actual text (see examples). This makes the `mdcSelect` more flexible,
 * so that e.g. the text of options can also contain markup to style parts of it differently.
 * When no value is selected, the embedded text must be empty.
 *
 * # Accessibility
 * * When no `id` is assigned, the component will generate a unique `id`, so that the `mdcSelectAnchor`
 *   and `mdcList` for this select can be labelled (with `aria-labelledBy`) appropriately.
 * * The element will be made focusable and tabbable (with `tabindex=0`), unless disabled.
 * * The `aria-disabled` will get a value based on the `disabled` property of the `mdcSelect`.
 * * The `aria-required` will get a value based on the `required` property of the `mdcSelect`.
 * * The `role` attribute will be set to `button`.
 * * The  `aria-haspopup` attribute will be set to `listbox`.
 * * The `aria-labelledBy` attribute will list the ids of the `mdcFloatinglabel` and the `mdcSelectText` self.
 * * The `aria-expanded` attribute will reflect whether this element is focused (the menu-surface is open).
 */
export declare class MdcSelectTextDirective extends MdcSelectTextDirectiveBase implements OnInit {
    _elm: ElementRef;
    private select;
    constructor(_elm: ElementRef, select: MdcSelectDirective);
    ngOnInit(): void;
    private getNormalizedXCoordinate;
}
/**
 * The `mdcSelectAnchor` should be the first child of an `mdcSelect`. It contains the dropdown-icon,
 * `mdcSelectText`, `mdcFloatingLabel`, ripples, and may contain an optional `mdcNotchedOutline`.
 * See the examples for the required structure of these directives.
 */
export declare class MdcSelectAnchorDirective extends AbstractMdcRipple implements AfterContentInit, OnDestroy {
    _elm: ElementRef;
    private rndr;
    private select;
    private onDestroy$;
    private onLabelsChange$;
    private _bottomLineElm;
    private mdcLineRippleAdapter;
    constructor(_elm: ElementRef, rndr: Renderer2, registry: MdcEventRegistry, select: MdcSelectDirective, doc: any);
    ngAfterContentInit(): void;
    ngOnDestroy(): void;
    private initComponent;
    private destroyComponent;
    private reconstructComponent;
    private addIcon;
    private initLineRipple;
    private destroyLineRipple;
    private computeLabelledBy;
}
/**
 * Directive for the options list of an `mdcSelect`. This directive should be the second (last) child
 * of an `mdcSelect`, and should wrap an `mdcList` with all selection options.
 * See the examples for the required structure of these directives.
 *
 * An `mdcSelectMenu` element will also match with the selector of the menu surface directive, documented
 * <a href="/components/menu-surface#mdcMenuSurface">here: mdcMenuSurface API</a>.
 */
export declare class MdcSelectMenuDirective {
    _menu: MdcMenuDirective;
    _surface: MdcMenuSurfaceDirective;
    constructor(_menu: MdcMenuDirective, _surface: MdcMenuSurfaceDirective);
}
/**
 * Directive for a spec aligned material design 'Select Control'. This directive should contain
 * and `mdcSelectAnchor` and an `mdcSelectMenu`. See the examples for the required structure of
 * these directives.
 *
 * If leaving the select empty should be a valid option, include an `mdcListItem` as first element in the list,
 * with an ampty string as `value`.
 *
 * # Accessibility
 * * This directive implements the aria practices recommendations for a
 *   [listbox](https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html).
 *   Most `aria-*` and `role` attributes affect the embedded `mdcSelectAnchor`, and `mdcList`, and are
 *   explained in the documentation for these directives.
 */
export declare class MdcSelectDirective implements AfterContentInit, OnDestroy {
    private elm;
    private rndr;
    private onDestroy$;
    private onMenuChange$;
    private onItemsChange$;
    private document;
    private _onChange;
    private _onTouched;
    private _lastMenu;
    private _value;
    private _valueSource;
    private _disabled;
    private _required;
    private _listLabelledBy;
    /**
     * emits the value of the item when the selected item changes
     */
    readonly valueChange: EventEmitter<string | null>;
    private mdcAdapter;
    constructor(elm: ElementRef, rndr: Renderer2, doc: any);
    ngAfterContentInit(): void;
    ngOnDestroy(): void;
    private initComponent;
    private destroyComponent;
    private reconstructComponent;
    private setupMenuHandlers;
    private initListLabel;
    /**
     * The value of the selected item.
     */
    get value(): string | null;
    set value(value: string | null);
    /**
     * To disable the select, set this input to a value other then false.
     */
    get disabled(): boolean;
    set disabled(value: boolean);
    static ngAcceptInputType_disabled: boolean | '';
    /**
     * To make the select a required input, set this input to a value other then false.
     */
    get required(): boolean;
    set required(value: boolean);
    static ngAcceptInputType_required: boolean | '';
    private get menu();
    private get surface();
    private get anchor();
    private get label();
    private get text();
    private getSelectedItem;
}
/**
 * Directive for adding Angular Forms (<code>ControlValueAccessor</code>) behavior to an
 * `mdcSelect`. Allows the use of the Angular Forms API with select inputs,
 * e.g. binding to <code>[(ngModel)]</code>, form validation, etc.
 */
export declare class MdcFormsSelectDirective implements ControlValueAccessor {
    private mdcSelect;
    constructor(mdcSelect: MdcSelectDirective);
    /** @docs-private */
    writeValue(obj: any): void;
    /** @docs-private */
    registerOnChange(onChange: (value: any) => void): void;
    /** @docs-private */
    registerOnTouched(onTouched: () => any): void;
    /** @docs-private */
    setDisabledState(disabled: boolean): void;
}
export declare const SELECT_DIRECTIVES: (typeof MdcSelectTextDirective | typeof MdcSelectDirective | typeof MdcSelectAnchorDirective | typeof MdcSelectMenuDirective | typeof MdcFormsSelectDirective)[];
export {};