@angular/material
Version:
Angular Material
170 lines (169 loc) • 7.28 kB
TypeScript
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { FocusOriginMonitor, MdRipple } from '../core';
import { CanDisable } from '../core/common-behaviors/disabled';
import { CanColor } from '../core/common-behaviors/color';
/**
* Provider Expression that allows md-checkbox to register as a ControlValueAccessor.
* This allows it to support [(ngModel)].
* @docs-private
*/
export declare const MD_CHECKBOX_CONTROL_VALUE_ACCESSOR: any;
/**
* Represents the different states that require custom transitions between them.
* @docs-private
*/
export declare enum TransitionCheckState {
/** The initial state of the component before any user interaction. */
Init = 0,
/** The state representing the component when it's becoming checked. */
Checked = 1,
/** The state representing the component when it's becoming unchecked. */
Unchecked = 2,
/** The state representing the component when it's becoming indeterminate. */
Indeterminate = 3,
}
/** Change event object emitted by MdCheckbox. */
export declare class MdCheckboxChange {
/** The source MdCheckbox of the event. */
source: MdCheckbox;
/** The new `checked` value of the checkbox. */
checked: boolean;
}
export declare class MdCheckboxBase {
_renderer: Renderer2;
_elementRef: ElementRef;
constructor(_renderer: Renderer2, _elementRef: ElementRef);
}
export declare const _MdCheckboxMixinBase: (new (...args: any[]) => CanColor) & (new (...args: any[]) => CanDisable) & typeof MdCheckboxBase;
/**
* A material design checkbox component. Supports all of the functionality of an HTML5 checkbox,
* and exposes a similar API. A MdCheckbox can be either checked, unchecked, indeterminate, or
* disabled. Note that all additional accessibility attributes are taken care of by the component,
* so there is no need to provide them yourself. However, if you want to omit a label and still
* have the checkbox be accessible, you may supply an [aria-label] input.
* See: https://www.google.com/design/spec/components/selection-controls.html
*/
export declare class MdCheckbox extends _MdCheckboxMixinBase implements ControlValueAccessor, AfterViewInit, OnDestroy, CanColor, CanDisable {
private _changeDetectorRef;
private _focusOriginMonitor;
/**
* Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will
* take precedence so this may be omitted.
*/
ariaLabel: string;
/**
* Users can specify the `aria-labelledby` attribute which will be forwarded to the input element
*/
ariaLabelledby: string;
/** A unique id for the checkbox. If one is not supplied, it is auto-generated. */
id: string;
/** Whether the ripple effect on click should be disabled. */
private _disableRipple;
/** Whether the ripple effect for this checkbox is disabled. */
disableRipple: boolean;
/** ID of the native input element inside `<md-checkbox>` */
readonly inputId: string;
private _required;
/** Whether the checkbox is required. */
required: boolean;
/**
* Whether or not the checkbox should appear before or after the label.
* @deprecated
*/
align: 'start' | 'end';
/** Whether the label should appear after or before the checkbox. Defaults to 'after' */
labelPosition: 'before' | 'after';
/** Tabindex value that is passed to the underlying input element. */
tabIndex: number;
/** Name value will be applied to the input element if present */
name: string;
/** Event emitted when the checkbox's `checked` value changes. */
change: EventEmitter<MdCheckboxChange>;
/** Event emitted when the checkbox's `indeterminate` value changes. */
indeterminateChange: EventEmitter<boolean>;
/** The value attribute of the native input element */
value: string;
/** The native `<input type="checkbox"> element */
_inputElement: ElementRef;
/** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
_ripple: MdRipple;
/**
* Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
* @docs-private
*/
onTouched: () => any;
private _currentAnimationClass;
private _currentCheckState;
private _checked;
private _indeterminate;
private _controlValueAccessorChangeFn;
/** Reference to the focused state ripple. */
private _focusRipple;
constructor(renderer: Renderer2, elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _focusOriginMonitor: FocusOriginMonitor);
ngAfterViewInit(): void;
ngOnDestroy(): void;
/**
* Whether the checkbox is checked.
*/
checked: boolean;
/**
* Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to
* represent a checkbox with three states, e.g. a checkbox that represents a nested list of
* checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately
* set to false.
*/
indeterminate: boolean;
_isRippleDisabled(): boolean;
/** Method being called whenever the label text changes. */
_onLabelTextChange(): void;
/**
* Sets the model value. Implemented as part of ControlValueAccessor.
* @param value Value to be set to the model.
*/
writeValue(value: any): void;
/**
* Registers a callback to be triggered when the value has changed.
* Implemented as part of ControlValueAccessor.
* @param fn Function to be called on change.
*/
registerOnChange(fn: (value: any) => void): void;
/**
* Registers a callback to be triggered when the control has been touched.
* Implemented as part of ControlValueAccessor.
* @param fn Callback to be triggered when the checkbox is touched.
*/
registerOnTouched(fn: any): void;
/**
* Sets the checkbox's disabled state. Implemented as a part of ControlValueAccessor.
* @param isDisabled Whether the checkbox should be disabled.
*/
setDisabledState(isDisabled: boolean): void;
private _transitionCheckState(newState);
private _emitChangeEvent();
/** Function is called whenever the focus changes for the input element. */
private _onInputFocusChange(focusOrigin);
/** Toggles the `checked` state of the checkbox. */
toggle(): void;
/**
* Event handler for checkbox input element.
* Toggles checked state if element is not disabled.
* Do not toggle on (change) event since IE doesn't fire change event when
* indeterminate checkbox is clicked.
* @param event
*/
_onInputClick(event: Event): void;
/** Focuses the checkbox. */
focus(): void;
_onInteractionEvent(event: Event): void;
private _getAnimationClassForCheckStateTransition(oldState, newState);
/** Fades out the focus state ripple. */
private _removeFocusRipple();
}