UNPKG

5.31 kBTypeScriptView Raw
1import { ElementRef, EventEmitter, Renderer, ModuleWithProviders } from '@angular/core';
2import { ControlValueAccessor } from '@angular/forms';
3/**
4 * Provider Expression that allows md-checkbox to register as a ControlValueAccessor. This allows it
5 * to support [(ngModel)].
6 */
7export declare const MD_CHECKBOX_CONTROL_VALUE_ACCESSOR: any;
8/**
9 * Represents the different states that require custom transitions between them.
10 */
11export declare enum TransitionCheckState {
12 /** The initial state of the component before any user interaction. */
13 Init = 0,
14 /** The state representing the component when it's becoming checked. */
15 Checked = 1,
16 /** The state representing the component when it's becoming unchecked. */
17 Unchecked = 2,
18 /** The state representing the component when it's becoming indeterminate. */
19 Indeterminate = 3,
20}
21export declare class MdCheckboxChange {
22 source: MdCheckbox;
23 checked: boolean;
24}
25/**
26 * A material design checkbox component. Supports all of the functionality of an HTML5 checkbox,
27 * and exposes a similar API. An MdCheckbox can be either checked, unchecked, indeterminate, or
28 * disabled. Note that all additional accessibility attributes are taken care of by the component,
29 * so there is no need to provide them yourself. However, if you want to omit a label and still
30 * have the checkbox be accessible, you may supply an [aria-label] input.
31 * See: https://www.google.com/design/spec/components/selection-controls.html
32 */
33export declare class MdCheckbox implements ControlValueAccessor {
34 private _renderer;
35 private _elementRef;
36 /**
37 * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will
38 * take precedence so this may be omitted.
39 */
40 ariaLabel: string;
41 /**
42 * Users can specify the `aria-labelledby` attribute which will be forwarded to the input element
43 */
44 ariaLabelledby: string;
45 /** A unique id for the checkbox. If one is not supplied, it is auto-generated. */
46 id: string;
47 /** ID to be applied to the `input` element */
48 readonly inputId: string;
49 /** Whether or not the checkbox should come before or after the label. */
50 align: 'start' | 'end';
51 /**
52 * Whether the checkbox is disabled. When the checkbox is disabled it cannot be interacted with.
53 * The correct ARIA attributes are applied to denote this to assistive technology.
54 */
55 disabled: boolean;
56 /**
57 * The tabindex attribute for the checkbox. Note that when the checkbox is disabled, the attribute
58 * on the host element will be removed. It will be placed back when the checkbox is re-enabled.
59 */
60 tabindex: number;
61 /** Name value will be applied to the input element if present */
62 name: string;
63 /** Event emitted when the checkbox's `checked` value changes. */
64 change: EventEmitter<MdCheckboxChange>;
65 /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
66 onTouched: () => any;
67 private _currentAnimationClass;
68 private _currentCheckState;
69 private _checked;
70 private _indeterminate;
71 private _controlValueAccessorChangeFn;
72 hasFocus: boolean;
73 constructor(_renderer: Renderer, _elementRef: ElementRef);
74 /**
75 * Whether the checkbox is checked. Note that setting `checked` will immediately set
76 * `indeterminate` to false.
77 */
78 checked: boolean;
79 /**
80 * Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to
81 * represent a checkbox with three states, e.g. a checkbox that represents a nested list of
82 * checkable items. Note that whenever `checked` is set, indeterminate is immediately set to
83 * false. This differs from the web platform in that indeterminate state on native
84 * checkboxes is only remove when the user manually checks the checkbox (rather than setting the
85 * `checked` property programmatically). However, we feel that this behavior is more accommodating
86 * to the way consumers would envision using this component.
87 */
88 indeterminate: boolean;
89 /**
90 * Implemented as part of ControlValueAccessor.
91 * TODO: internal
92 */
93 writeValue(value: any): void;
94 /**
95 * Implemented as part of ControlValueAccessor.
96 * TODO: internal
97 */
98 registerOnChange(fn: (value: any) => void): void;
99 /**
100 * Implemented as part of ControlValueAccessor.
101 * TODO: internal
102 */
103 registerOnTouched(fn: any): void;
104 private _transitionCheckState(newState);
105 private _emitChangeEvent();
106 /** Informs the component when the input has focus so that we can style accordingly */
107 _onInputFocus(): void;
108 /** Informs the component when we lose focus in order to style accordingly */
109 _onInputBlur(): void;
110 /**
111 * Toggles the `checked` value between true and false
112 */
113 toggle(): void;
114 /**
115 * Event handler for checkbox input element.
116 * Toggles checked state if element is not disabled.
117 * @param event
118 */
119 _onInteractionEvent(event: Event): void;
120 _onInputClick(event: Event): void;
121 private _getAnimationClassForCheckStateTransition(oldState, newState);
122}
123export declare class MdCheckboxModule {
124 static forRoot(): ModuleWithProviders;
125}