UNPKG

igniteui-angular

Version:

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

283 lines (282 loc) 8.37 kB
import { EventEmitter, ElementRef, ChangeDetectorRef, Renderer2, 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 renderer: Renderer2; 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, renderer: Renderer2, 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, 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; }