@blox/material
Version:
Material Components for Angular
261 lines (260 loc) • 12.6 kB
TypeScript
import { AfterContentInit, ElementRef, OnDestroy, Renderer2, EventEmitter, ChangeDetectorRef } from '@angular/core';
import { AbstractMdcRipple } from '../ripple/abstract.mdc.ripple';
import { MdcEventRegistry } from '../../utils/mdc.event.registry';
/**
* Directive for a separator in a list (between list items), or as a separator in a
* list group (between lists).
*
* # Accessibility
* This directive adds a `role=separator` attribute when it is used as a separator
* between list items.
*/
export declare class MdcListDividerDirective {
private _inset;
private _padded;
constructor(_elm: ElementRef);
/**
* When this input is defined and does not have value false, the divider is styled with
* an inset.
*/
get inset(): boolean;
set inset(val: boolean);
static ngAcceptInputType_inset: boolean | '';
/**
* When this input is defined and does not have value false, the divider leaves
* gaps on each site to match the padding of <code>mdcListItemMeta</code>.
*/
get padded(): boolean;
set padded(val: boolean);
static ngAcceptInputType_padded: boolean | '';
}
/**
* Directive for the items of a material list.
* This directive should be used for the direct children (list items) of an
* `mdcList`.
*
* # Children
* * Use `mdcListItemText` for the text content of the list. One line and two line
* lists are supported. See `mdcListItemText` for more info.
* * Optional: `mdcListItemGraphic` for a starting detail (typically icon or image).
* * Optional: `mdcListItemMeta` for the end detail (typically icon or image).
*
* # Accessibility
* * All items in a list will get a `tabindex=-1` attribute to make them focusable,
* but not tabbable. The focused, active/current, or first (in that preference) item will
* get `tabindex=0`, so that the list can be tabbed into. Keyboard navigation
* between list items is done with arrow, home, and end keys. Keyboard based selection of
* an item (when items are selectable), can be done with the enter or space key.
* * The `role` attribute with be set to `option` for single selection lists,
* `checkbox` for list items that can be selected with embedded checkbox inputs, `radio`
* for for list items that can be selected with embedded radio inputs, `menuitem` when the
* list is part of an `mdcMenu`. Otherwise there will be no `role` attribute, so the default
* role for a standard list item (`role=listitem`) will apply.
* * Single selection lists set the `aria-selected` or `aria-current` attributes, based on the
* chosen `selectionMode` of the list. Please see [WAI-ARIA aria-current](https://www.w3.org/TR/wai-aria-1.1/#aria-current)
* for recommendations.
* * `aria-checked` will be set for lists with embedded checkbox or radio inputs.
* * Disabled list items will be included in the keyboard navigation. This follows
* [focusability of disabled controls](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_disabled_controls)
* recommendations in the ARIA practices article. Exception: when the list is part of an `mdcMenu` or `mdcSelect`,
* disabled items are not included in the keyboard navigation.
* * As the user navigates through the list, any button and anchor elements within list items that are not focused
* will receive `tabindex=-1`. When the list item receives focus, those elements will receive `tabindex=0`.
* This allows for the user to tab through list item elements and then tab to the first element after the list.
* * Lists are interactive by default (unless `nonInteractive` is set on the `mdcList`). List items will
* show ripples when interacted with.
* * `aria-disabled` will be set for disabled list items. When the list uses checkbox or radio inputs to control
* the checked state, the disabled state will mirror the state of those inputs.
*/
export declare class MdcListItemDirective extends AbstractMdcRipple implements AfterContentInit, OnDestroy {
_elm: ElementRef;
private _initialized;
private _interactive;
private _disabled;
private _active;
/**
* Event emitted for user action on the list item, including keyboard and mouse actions.
* This will not emit when the `mdcList` has `nonInteractive` set.
*/
readonly action: EventEmitter<void>;
/**
* Event emitted when the active state of a list item in a single-selection list
* (`selectionMode` is `single` or `active`) is changed. This event does not emit
* for lists that do not have the mentioned `selectionMode`, and therefore does also
* not emit for lists where the active/selected state is controlled by embedded checkbox
* or radio inputs. (Note that for lists controlled by an `mdcSelect`, the `selectionMode`
* will be either `single` or `active`).
*/
readonly selectedChange: EventEmitter<boolean>;
private _value;
constructor(_elm: ElementRef, rndr: Renderer2, registry: MdcEventRegistry, doc: any);
ngAfterContentInit(): void;
ngOnDestroy(): void;
/**
* If set to a value other than false, the item will be disabled. This affects styling
* and selectability, and may affect keyboard navigation.
* This input is ignored for lists where the selection is controlled by embedded checkbox
* or radio inputs. In those cases the disabled state of the input will be used instead.
*/
get disabled(): boolean;
set disabled(val: boolean);
static ngAcceptInputType_disabled: boolean | '';
/**
* Assign this field with a value that should be reflected in the `value` property of
* a `selectionMode=single|active` or and `mdcMenu` or `mdcSelect` for the active property.
* Ignored for lists that don't offer a selection, and for lists that use checkbox/radio
* inputs for selection.
*/
get value(): string | null;
set value(newValue: string | null);
/**
* This input can be used to change the active or selected state of the item. This should *not* be used for lists
* inside an `mdcSelect`/`mdcMenu`, or for lists that use checkbox/radio inputs for selection.
* Depending on the `selectionMode` of the list this will update the `selected` or `active` state of the item.
*/
set selected(val: boolean);
static ngAcceptInputType_selected: boolean | '';
}
/**
* Directive to mark the text portion(s) of an `mdcListItem`. This directive should be the child of an `mdcListItem`.
* For single line lists, the text can be added directly to this directive.
* For two line lists, add `mdcListItemPrimaryText` and `mdcListItemSecondaryText` children.
*/
export declare class MdcListItemTextDirective {
}
/**
* Directive to mark the first line of an item with "two line list" styling.
* This directive, if used, should be the child of an `mdcListItemText`.
* Using this directive will put the list "two line" mode.
*/
export declare class MdcListItemPrimaryTextDirective {
}
/**
* Directive for the secondary text of an item with "two line list" styling.
* This directive, if used, should be the child of an `mdcListItemText`, and
* come after the `mdcListItemPrimaryText`.
*/
export declare class MdcListItemSecondaryTextDirective {
}
/**
* Directive for the start detail item of a list item.
* This directive, if used, should be the child of an`mdcListItem`.
*/
export declare class MdcListItemGraphicDirective {
}
/**
* Directive for the end detail item of a list item.
* This directive, if used, should be the child of an `mdcListItem`.
*/
export declare class MdcListItemMetaDirective {
}
/** @docs-private */
export declare enum MdcListFunction {
plain = 0,
menu = 1,
select = 2
}
/**
* Lists are continuous, vertical indexes of text or images. They can be interactive, and may support
* selaction/activation of list of items. Single-line and Two-line lists are supported, as well as
* starting and end details (images or controls) on a list. A list contains `mdcListItem` children,
* and may also contain `mdcListDivider` children.
*
* A list can be used by itself, or contained inside `mdcListGroup`, `mdcMenu`, or `mdcSelect`.
*
* # Accessibility
* * See Accessibility section of `mdcListItem` for navigation, focus, and tab(index) affordances.
* * The `role` attribute will be set to `listbox` for single selection lists (`selectionMode` is `single`
* or `active`), to `radiogroup` when selection is triggered by embedded radio inputs, to
* `checkbox` when selection is triggered by embedded checkbox inputs, to `menu` when used inside
* `mdcMenu`. Otherwise there will be no `role` attribute, so the default role for a standard list
* (`role=list`) will apply.
* * You should set an appropriate `label` for checkbox based selection lists. The
* `label` will be reflected to the `aria-label` attribute.
*/
export declare class MdcListDirective implements AfterContentInit, OnDestroy {
_elm: ElementRef;
private rndr;
private cdRef;
private onDestroy$;
private document;
private _function;
private _dense;
private _avatar;
private _nonInteractive;
private _selectionMode;
private _wrapFocus;
private mdcAdapter;
constructor(_elm: ElementRef, rndr: Renderer2, cdRef: ChangeDetectorRef, doc: any);
ngAfterContentInit(): void;
ngOnDestroy(): void;
private initFoundation;
private destroyFoundation;
private subscribeItemActivationRequests;
private updateItems;
private updateLayout;
private updateFoundationSelections;
private updateItemSelections;
private activateOrSelectItem;
private getSelection;
/**
* When this input is defined and does not have value false, the list will be styled more
* compact.
*/
get dense(): boolean;
set dense(val: boolean);
static ngAcceptInputType_dense: boolean | '';
/**
* When set to `single` or `active`, the list will act as a single-selection-list.
* This enables the enter and space keys for selecting/deselecting a list item,
* and sets the appropriate accessibility options.
* When not set, the list will not act as a single-selection-list.
*
* When using `single`, the active selection is announced with `aria-selected`
* attributes on the list elements. When using `active`, the active selection
* is announced with `aria-current`. See [WAI-ARIA aria-current](https://www.w3.org/TR/wai-aria-1.1/#aria-current)
* article for recommendations on usage.
*
* The selectionMode is ignored when there are embedded checkbox or radio inputs inside the list, in which case
* those inputs will trigger selection of list items.
*/
get selectionMode(): 'single' | 'active' | null;
set selectionMode(val: 'single' | 'active' | null);
static ngAcceptInputType_selectionMode: 'single' | 'active' | '' | null;
/**
* When this input is defined and does not have value false, the list will be made
* non-interactive. Users will not be able to interact with list items, and the styling will
* reflect this (e.g. by not adding ripples to the items).
*/
get nonInteractive(): boolean;
set nonInteractive(val: boolean);
static ngAcceptInputType_nonInteractive: boolean | '';
/**
* When this input is defined and does not have value false, focus will wrap from last to
* first and vice versa when using keyboard navigation through list items.
*/
get wrapFocus(): boolean;
set wrapFocus(val: boolean);
static ngAcceptInputType_wrapFocus: boolean | '';
/**
* When this input is defined and does not have value false, elements with directive <code>mdcListItemGraphic</code>
* will be styled for avatars: large, circular elements that lend themselves well to contact images, profile pictures, etc.
*/
get avatarList(): boolean;
set avatarList(val: boolean);
static ngAcceptInputType_avatarList: boolean | '';
private getListItemIndex;
}
/**
* Directive for a header inside a list group (<code>mdcListGroup</code>) directive.
*/
export declare class MdcListGroupSubHeaderDirective {
}
/**
* Directive for a material designed list group, grouping several `mdcList` lists.
* List groups should contain elements with `mdcListGroupSubHeader`,
* and `mdcList` directives. Lists may be separated by `mdcListSeparator` directives.
*/
export declare class MdcListGroupDirective {
}
export declare const LIST_DIRECTIVES: (typeof MdcListDividerDirective | typeof MdcListItemDirective | typeof MdcListItemTextDirective | typeof MdcListDirective)[];