@syncfusion/ej2-buttons
Version:
A package of feature-rich Essential JS 2 components such as Button, CheckBox, RadioButton and Switch.
208 lines (207 loc) • 6.1 kB
TypeScript
import { Component, INotifyPropertyChanged } from '@syncfusion/ej2-base';
import { EmitType } from '@syncfusion/ej2-base';
import { CheckBoxModel } from './check-box-model';
import { ChangeEventArgs } from './../common/common';
/**
* Defines the label position of CheckBox.
* ```props
* After :- When the label is positioned After, it appears to the right of the CheckBox.
* Before :- When the label is positioned Before, it appears to the left of the CheckBox.
* ```
*/
export declare type LabelPosition = 'After' | 'Before';
/**
* The CheckBox is a graphical user interface element that allows you to select one or more options from the choices.
* It contains checked, unchecked, and indeterminate states.
* ```html
* <input type="checkbox" id="checkbox"/>
* <script>
* var checkboxObj = new CheckBox({ label: "Default" });
* checkboxObj.appendTo("#checkbox");
* </script>
* ```
*/
export declare class CheckBox extends Component<HTMLInputElement> implements INotifyPropertyChanged {
private tagName;
private isFocused;
private isMouseClick;
private formElement;
private initialCheckedValue;
private wrapper;
private clickTriggered;
private validCheck;
private type;
/**
* Triggers when the CheckBox state has been changed by user interaction.
*
* @event change
*/
change: EmitType<ChangeEventArgs>;
/**
* Triggers once the component rendering is completed.
*
* @event created
*/
created: EmitType<Event>;
/**
* Specifies a value that indicates whether the CheckBox is `checked` or not.
* When set to `true`, the CheckBox will be in `checked` state.
*
* @default false
*/
checked: boolean;
/**
* Defines class/multiple classes separated by a space in the CheckBox element.
* You can add custom styles to the CheckBox by using this property.
*
* @default ''
*/
cssClass: string;
/**
* Specifies a value that indicates whether the CheckBox is `disabled` or not.
* When set to `true`, the CheckBox will be in `disabled` state.
*
* @default false
*/
disabled: boolean;
/**
* Specifies a value that indicates whether the CheckBox is in `indeterminate` state or not.
* When set to `true`, the CheckBox will be in `indeterminate` state.
*
* @default false
*/
indeterminate: boolean;
/**
* Defines the caption for the CheckBox, that describes the purpose of the CheckBox.
*
* @default ''
*/
label: string;
/**
* Positions label `before`/`after` the CheckBox.
* The possible values are:
* * Before - The label is positioned to left of the CheckBox.
* * After - The label is positioned to right of the CheckBox.
*
* @default 'After'
*/
labelPosition: LabelPosition;
/**
* Defines `name` attribute for the CheckBox.
* It is used to reference form data (CheckBox value) after a form is submitted.
*
* @default ''
*/
name: string;
/**
* Defines `value` attribute for the CheckBox.
* It is a form data passed to the server when submitting the form.
*
* @default ''
*/
value: string;
/**
* Specifies whether to enable the rendering of untrusted HTML values in the CheckBox component.
* If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
*
* @default true
*/
enableHtmlSanitizer: boolean;
/**
* You can add the additional html attributes such as disabled, value etc., to the element.
* If you configured both property and equivalent html attribute then the component considers the property value.
*
* @default {}
*/
htmlAttributes: {
[key: string]: string;
};
/**
* Constructor for creating the widget
*
* @private
* @param {CheckBoxModel} options - Specifies checkbox model
* @param {string | HTMLInputElement} element - Specifies target element
*/
constructor(options?: CheckBoxModel, element?: string | HTMLInputElement);
private changeState;
private clickHandler;
/**
* Destroys the widget.
*
* @returns {void}
*/
destroy(): void;
private focusHandler;
private focusOutHandler;
/**
* Gets the module name.
*
* @private
* @returns {string} - Module Name
*/
protected getModuleName(): string;
/**
* Gets the properties to be maintained in the persistence state.
*
* @private
* @returns {string} - Persist Data
*/
getPersistData(): string;
private getWrapper;
private getLabel;
private initialize;
private initWrapper;
private keyUpHandler;
private labelMouseDownHandler;
private labelMouseLeaveHandler;
private labelMouseUpHandler;
/**
* Called internally if any of the property value changes.
*
* @private
* @param {CheckBoxModel} newProp - Specifies new Properties
* @param {CheckBoxModel} oldProp - Specifies old Properties
*
* @returns {void}
*/
onPropertyChanged(newProp: CheckBoxModel, oldProp: CheckBoxModel): void;
/**
* Initialize Angular, React and Unique ID support.
*
* @private
* @returns {void}
*/
protected preRender(): void;
/**
* Initialize the control rendering.
*
* @private
* @returns {void}
*/
protected render(): void;
private setDisabled;
private setText;
private changeHandler;
private formResetHandler;
protected unWireEvents(): void;
protected wireEvents(): void;
private updateVueArrayModel;
protected updateHtmlAttributeToWrapper(): void;
/**
* Click the CheckBox element
* its native method
*
* @public
* @returns {void}
*/
click(): void;
/**
* Sets the focus to CheckBox
* its native method
*
* @public
* @returns {void}
*/
focusIn(): void;
}