igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
282 lines (281 loc) • 8.29 kB
TypeScript
import { EventEmitter, ElementRef, ChangeDetectorRef, DestroyRef, AfterViewInit } from '@angular/core';
import { NgControl } from '@angular/forms';
import { IBaseEventArgs } from '../core/utils';
import { Subject } from 'rxjs';
import { IgxTheme, ThemeToken } from '../services/theme/theme.token';
import * as i0 from "@angular/core";
export declare const LabelPosition: {
BEFORE: "before";
AFTER: "after";
};
export type LabelPosition = typeof LabelPosition[keyof typeof LabelPosition];
export interface IChangeCheckboxEventArgs extends IBaseEventArgs {
checked: boolean;
value?: any;
}
export declare class CheckboxBaseDirective implements AfterViewInit {
protected cdr: ChangeDetectorRef;
protected themeToken: ThemeToken;
ngControl: NgControl;
/**
* An event that is emitted after the checkbox state is changed.
* Provides references to the `IgxCheckboxComponent` and the `checked` property as event arguments.
*/
readonly change: EventEmitter<IChangeCheckboxEventArgs>;
/**
* @hidden
* @internal
*/
destroy$: Subject<boolean>;
/**
* Returns reference to the native checkbox element.
*
* @example
* ```typescript
* let checkboxElement = this.component.checkboxElement;
* ```
*/
nativeInput: ElementRef;
/**
* Returns reference to the native label element.
* ```typescript
*
* @example
* let labelElement = this.component.nativeLabel;
* ```
*/
nativeLabel: ElementRef;
cssClass: string;
disabled: boolean;
readonly: boolean;
indeterminate: boolean;
focused: boolean;
invalid: boolean;
get checked(): boolean;
set checked(value: boolean);
/**
* Returns reference to the `nativeElement` of the igx-checkbox/igx-switch.
*
* @example
* ```typescript
* let nativeElement = this.component.nativeElement;
* ```
*/
get nativeElement(): any;
/**
* Returns reference to the label placeholder element.
* ```typescript
*
* @example
* let labelPlaceholder = this.component.placeholderLabel;
* ```
*/
placeholderLabel: ElementRef;
/**
* Sets/gets the `id` of the checkbox component.
* If not set, the `id` of the first checkbox component will be `"igx-checkbox-0"`.
*
* @example
* ```html
* <igx-checkbox id="my-first-checkbox"></igx-checkbox>
* ```
* ```typescript
* let checkboxId = this.checkbox.id;
* ```
*/
id: string;
/**
* Sets/gets the id of the `label` element.
* If not set, the id of the `label` in the first checkbox component will be `"igx-checkbox-0-label"`.
*
* @example
* ```html
* <igx-checkbox labelId="Label1"></igx-checkbox>
* ```
* ```typescript
* let labelId = this.component.labelId;
* ```
*/
labelId: string;
/**
* Sets/gets the `value` attribute.
*
* @example
* ```html
* <igx-checkbox [value]="'CheckboxValue'"></igx-checkbox>
* ```
* ```typescript
* let value = this.checkbox.value;
* ```
*/
value: any;
/**
* Sets/gets the `name` attribute.
*
* @example
* ```html
* <igx-checkbox name="Checkbox1"></igx-checkbox>
* ```
* ```typescript
* let name = this.checkbox.name;
* ```
*/
name: string;
/**
* Sets/gets the value of the `tabindex` attribute.
*
* @example
* ```html
* <igx-checkbox [tabindex]="1"></igx-checkbox>
* ```
* ```typescript
* let tabIndex = this.checkbox.tabindex;
* ```
*/
tabindex: number;
/**
* Sets/gets the position of the `label`.
* If not set, the `labelPosition` will have value `"after"`.
*
* @example
* ```html
* <igx-checkbox labelPosition="before"></igx-checkbox>
* ```
* ```typescript
* let labelPosition = this.checkbox.labelPosition;
* ```
*/
labelPosition: LabelPosition | string;
/**
* Enables/Disables the ripple effect.
* If not set, `disableRipple` will have value `false`.
*
* @example
* ```html
* <igx-checkbox [disableRipple]="true"></igx-checkbox>
* ```
* ```typescript
* let isRippleDisabled = this.checkbox.desableRipple;
* ```
*/
disableRipple: boolean;
/**
* Sets/gets the `aria-labelledby` attribute.
* If not set, the `aria-labelledby` will be equal to the value of `labelId` attribute.
*
* @example
* ```html
* <igx-checkbox aria-labelledby="Checkbox1"></igx-checkbox>
* ```
* ```typescript
* let ariaLabelledBy = this.checkbox.ariaLabelledBy;
* ```
*/
ariaLabelledBy: string;
/**
* Sets/gets the value of the `aria-label` attribute.
*
* @example
* ```html
* <igx-checkbox aria-label="Checkbox1"></igx-checkbox>
* ```
* ```typescript
* let ariaLabel = this.checkbox.ariaLabel;
* ```
*/
ariaLabel: string | null;
constructor(cdr: ChangeDetectorRef, themeToken: ThemeToken, ngControl: NgControl);
/**
* Sets/gets whether the checkbox is required.
* If not set, `required` will have value `false`.
*
* @example
* ```html
* <igx-checkbox required></igx-checkbox>
* ```
* ```typescript
* let isRequired = this.checkbox.required;
* ```
*/
get required(): boolean;
set required(value: boolean);
/**
* @hidden
* @internal
*/
ngAfterViewInit(): void;
/**
* @hidden
* @internal
*/
inputId: string;
/**
* @hidden
*/
protected _onChangeCallback: (_: any) => void;
/**
* @hidden
*/
private _onTouchedCallback;
/**
* @hidden
* @internal
*/
protected _checked: boolean;
/**
* @hidden
* @internal
*/
protected theme: IgxTheme;
/**
* @hidden
* @internal
*/
_required: boolean;
private elRef;
protected destroyRef: DestroyRef;
private setComponentTheme;
/** @hidden @internal */
onKeyUp(event: KeyboardEvent): void;
/** @hidden @internal */
_onCheckboxClick(event: PointerEvent | MouseEvent): void;
/**
* @hidden
* @internal
*/
get ariaChecked(): boolean | "mixed";
/** @hidden @internal */
_onCheckboxChange(event: Event): void;
/** @hidden @internal */
onBlur(): void;
/** @hidden @internal */
writeValue(value: boolean): void;
/** @hidden @internal */
get labelClass(): string;
/** @hidden @internal */
registerOnChange(fn: (_: any) => void): void;
/** @hidden @internal */
registerOnTouched(fn: () => void): void;
/** @hidden @internal */
setDisabledState(isDisabled: boolean): void;
/** @hidden @internal */
getEditElement(): any;
/**
* @hidden
* @internal
*/
protected updateValidityState(): void;
/**
* A function to assign a native validity property of a checkbox.
* This should be used when there's no ngControl
*
* @hidden
* @internal
*/
private checkNativeValidity;
static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxBaseDirective, [null, null, { optional: true; self: true; }]>;
static ɵdir: i0.ɵɵDirectiveDeclaration<CheckboxBaseDirective, never, never, { "checked": { "alias": "checked"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelId": { "alias": "labelId"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
static ngAcceptInputType_checked: unknown;
static ngAcceptInputType_disableRipple: unknown;
static ngAcceptInputType_required: unknown;
}