/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
import * as tslib_1 from "tslib";
import { Component, Directive, EventEmitter, forwardRef, HostBinding, Input, NgModule, Output, ViewChild } from '@angular/core';
import { CheckboxRequiredValidator, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
import { IgxRippleModule } from '../directives/ripple/ripple.directive';
/** @enum {string} */
var LabelPosition = {
    BEFORE: 'before',
    AFTER: 'after',
};
export { LabelPosition };
/**
 * @record
 */
export function IChangeCheckboxEventArgs() { }
function IChangeCheckboxEventArgs_tsickle_Closure_declarations() {
    /** @type {?} */
    IChangeCheckboxEventArgs.prototype.checked;
    /** @type {?} */
    IChangeCheckboxEventArgs.prototype.checkbox;
}
var /** @type {?} */ noop = function () { };
var ɵ0 = noop;
var /** @type {?} */ nextId = 0;
/**
 * **Ignite UI for Angular Checkbox** -
 * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/checkbox.html)
 *
 * The Ignite UI Checkbox is a selection control that allows users to make a binary choice. It behaves similarly
 * to the native browser checkbox.
 *
 * Example:
 * ```html
 * <igx-checkbox checked="true">
 *   simple checkbox
 * </igx-checkbox>
 * ```
 */
var IgxCheckboxComponent = /** @class */ (function () {
    function IgxCheckboxComponent() {
        /**
         * Sets/gets the `id` of the checkbox component.
         * If not set, the `id` of the first checkbox component will be `"igx-checkbox-0"`.
         * ```html
         * <igx-checkbox id="my-first-checkbox"></igx-checkbox>
         * ```
         * ```typescript
         * let checkboxId =  this.checkbox.id;
         * ```
         * \@memberof IgxCheckboxComponent
         */
        this.id = "igx-checkbox-" + nextId++;
        /**
         * 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"`.
         * ```html
         * <igx-checkbox labelId = "Label1"></igx-checkbox>
         * ```
         * ```typescript
         * let labelId =  this.checkbox.labelId;
         * ```
         * \@memberof IgxCheckboxComponent
         */
        this.labelId = this.id + "-label";
        /**
         * Sets/gets the value of the `tabindex` attribute.
         * ```html
         * <igx-checkbox [tabindex] = "1"></igx-checkbox>
         * ```
         * ```typescript
         * let tabIndex =  this.checkbox.tabindex;
         * ```
         * \@memberof IgxCheckboxComponent
         */
        this.tabindex = null;
        /**
         *  Sets/gets the position of the `label`.
         *  If not set, the `labelPosition` will have value `"after"`.
         * ```html
         * <igx-checkbox labelPosition = "before"></igx-checkbox>
         * ```
         * ```typescript
         * let labelPosition =  this.checkbox.labelPosition;
         * ```
         * \@memberof IgxCheckboxComponent
         */
        this.labelPosition = LabelPosition.AFTER;
        /**
         * Enables/Disables the ripple effect.
         * If not set, `disableRipple` will have value `false`.
         * ```html
         * <igx-checkbox [disableRipple] = "true"></igx-checkbox>
         * ```
         * ```typescript
         * let isRippleDisabled = this.checkbox.desableRipple;
         * ```
         * \@memberof IgxCheckboxComponent
         */
        this.disableRipple = false;
        /**
         * Sets/gets whether the checkbox is required.
         * If not set, `required` will have value `false`.
         * ```html
         * <igx-checkbox [required] = "true"></igx-checkbox>
         * ```
         * ```typescript
         * let isRequired =  this.checkbox.required;
         * ```
         * \@memberof IgxCheckboxComponent
         */
        this.required = false;
        /**
         * Sets/gets the `aria-labelledby` attribute.
         * If not set, the `aria-labelledby` will be equal to the value of `labelId` attribute.
         * ```html
         * <igx-checkbox aria-labelledby = "Checkbox1"></igx-checkbox>
         * ```
         * ```typescript
         * let ariaLabelledBy =  this.checkbox.ariaLabelledBy;
         * ```
         * \@memberof IgxCheckboxComponent
         */
        this.ariaLabelledBy = this.labelId;
        /**
         * Sets/gets the value of the `aria-label` attribute.
         * ```html
         * <igx-checkbox aria-label = "Checkbox1"></igx-checkbox>
         * ```
         * ```typescript
         * let ariaLabel = this.checkbox.aruaLabel;
         * ```
         * \@memberof IgxCheckboxComponent
         */
        this.ariaLabel = null;
        /**
         * An event that is emitted after the checkbox state is changed.
         * Provides references to the `IgxCheckboxComponent` and the `checked` property as event arguments.
         * \@memberof IgxCheckboxComponent
         */
        this.change = new EventEmitter();
        /**
         * Returns the class of the checkbox component.
         * ```typescript
         * let class =  this.checkbox.cssClass;
         * ```
         * \@memberof IgxCheckboxComponent
         */
        this.cssClass = 'igx-checkbox';
        /**
         * Sets/gets whether the checkbox component is on focus.
         * Default value is `false`.
         * ```typescript
         * this.checkbox.focused =  true;
         * ```
         * ```typescript
         * let isFocused =  this.checkbox.focused;
         * ```
         * \@memberof IgxCheckboxComponent
         */
        this.focused = false;
        /**
         * Sets/gets the checkbox indeterminate visual state.
         * Default value is `false`;
         * ```html
         * <igx-checkbox [indeterminate] = "true"></igx-checkbox>
         * ```
         * ```typescript
         * let isIndeterminate = this.checkbox.indeterminate;
         * ```
         * \@memberof IgxCheckboxComponent
         */
        this.indeterminate = false;
        /**
         * Sets/gets whether the checkbox is checked.
         * Default value is `false`.
         * ```html
         * <igx-checkbox [checked] = "true"></igx-checkbox>
         * ```
         * ```typescript
         * let isChecked =  this.checkbox.checked;
         * ```
         * \@memberof IgxCheckboxComponent
         */
        this.checked = false;
        /**
         * Sets/gets whether the checkbox is disabled.
         * Default value is `false`.
         * ```html
         * <igx-checkbox [disabled] = "true"></igx-checkbox>
         * ```
         * ```typescript
         * let isDesabled = this.checkbox.disabled;
         * ```
         * \@memberof IgxCheckboxComponent
         */
        this.disabled = false;
        /**
         * @hidden
         */
        this.inputId = this.id + "-input";
        /**
         * @hidden
         */
        this._onTouchedCallback = noop;
        /**
         * @hidden
         */
        this._onChangeCallback = noop;
    }
    /**
     * If `disabled` is `false`, switches the `checked` state.
     * ```typescript
     * this.checkbox.toggle();
     * ```
     * \@memberof IgxCheckboxComponent
     * @return {?}
     */
    IgxCheckboxComponent.prototype.toggle = /**
     * If `disabled` is `false`, switches the `checked` state.
     * ```typescript
     * this.checkbox.toggle();
     * ```
     * \@memberof IgxCheckboxComponent
     * @return {?}
     */
    function () {
        if (this.disabled) {
            return;
        }
        this.indeterminate = false;
        this.focused = false;
        this.checked = !this.checked;
        this.change.emit({ checked: this.checked, checkbox: this });
        this._onChangeCallback(this.checked);
    };
    /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    IgxCheckboxComponent.prototype._onCheckboxChange = /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    function (event) {
        // We have to stop the original checkbox change event
        // from bubbling up since we emit our own change event
        event.stopPropagation();
    };
    /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    IgxCheckboxComponent.prototype._onCheckboxClick = /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    function (event) {
        // Since the original checkbox is hidden and the label
        // is used for styling and to change the checked state of the checkbox,
        // we need to prevent the checkbox click event from bubbling up
        // as it gets triggered on label click
        event.stopPropagation();
        this.toggle();
    };
    /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    IgxCheckboxComponent.prototype._onLabelClick = /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    function (event) {
        // We use a span element as a placeholder label
        // in place of the native label, we need to emit
        // the change event separately here alongside
        // the click event emitted on click
        this.toggle();
    };
    /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    IgxCheckboxComponent.prototype.onFocus = /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    function (event) {
        this.focused = true;
    };
    /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    IgxCheckboxComponent.prototype.onBlur = /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    function (event) {
        this.focused = false;
        this._onTouchedCallback();
    };
    /**
     * @hidden
     * @param {?} value
     * @return {?}
     */
    IgxCheckboxComponent.prototype.writeValue = /**
     * @hidden
     * @param {?} value
     * @return {?}
     */
    function (value) {
        this._value = value;
        this.checked = !!this._value;
    };
    Object.defineProperty(IgxCheckboxComponent.prototype, "labelClass", {
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            switch (this.labelPosition) {
                case LabelPosition.BEFORE:
                    return this.cssClass + "__label--before";
                case LabelPosition.AFTER:
                default:
                    return this.cssClass + "__label";
            }
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @hidden
     * @param {?} fn
     * @return {?}
     */
    IgxCheckboxComponent.prototype.registerOnChange = /**
     * @hidden
     * @param {?} fn
     * @return {?}
     */
    function (fn) { this._onChangeCallback = fn; };
    /**
     * @hidden
     * @param {?} fn
     * @return {?}
     */
    IgxCheckboxComponent.prototype.registerOnTouched = /**
     * @hidden
     * @param {?} fn
     * @return {?}
     */
    function (fn) { this._onTouchedCallback = fn; };
    IgxCheckboxComponent.decorators = [
        { type: Component, args: [{
                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxCheckboxComponent, multi: true }],
                    selector: 'igx-checkbox',
                    preserveWhitespaces: false,
                    template: "<input #checkbox class=\"igx-checkbox__input\"\n    type=\"checkbox\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [tabindex]=\"tabindex\"\n    [disabled]=\"disabled\"\n    [indeterminate]=\"indeterminate\"\n    [checked]=\"checked\"\n    [required]=\"required\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-label]=\"ariaLabel\"\n    (change)=\"_onCheckboxChange($event)\"\n    (click)=\"_onCheckboxClick($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\" />\n\n<label #label class=\"igx-checkbox__composite\"\n    igxRipple\n    igxRippleTarget=\".igx-checkbox__ripple\"\n    [igxRippleDisabled]=\"disableRipple\"\n    [igxRippleCentered]=\"true\"\n    [igxRippleDuration]=\"300\"\n    [attr.for]=\"inputId\">\n    <svg class=\"igx-checkbox__composite-mark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path d=\"M4.1,12.7 9,17.6 20.3,6.3\" />\n    </svg>\n    <div class=\"igx-checkbox__ripple\"></div>\n</label>\n\n<span #placeholderLabel role=\"label\"\n    [class]=\"labelClass\"\n    [id]=\"labelId\"\n    (click)=\"_onLabelClick($event)\">\n    <ng-content></ng-content>\n</span>\n"
                },] },
    ];
    /** @nocollapse */
    IgxCheckboxComponent.propDecorators = {
        "nativeCheckbox": [{ type: ViewChild, args: ['checkbox',] },],
        "nativeLabel": [{ type: ViewChild, args: ['label',] },],
        "placeholderLabel": [{ type: ViewChild, args: ['placeholderLabel',] },],
        "id": [{ type: HostBinding, args: ['attr.id',] }, { type: Input },],
        "labelId": [{ type: Input },],
        "value": [{ type: Input },],
        "name": [{ type: Input },],
        "tabindex": [{ type: Input },],
        "labelPosition": [{ type: Input },],
        "disableRipple": [{ type: Input },],
        "required": [{ type: Input },],
        "ariaLabelledBy": [{ type: Input, args: ['aria-labelledby',] },],
        "ariaLabel": [{ type: Input, args: ['aria-label',] },],
        "change": [{ type: Output },],
        "cssClass": [{ type: HostBinding, args: ['class.igx-checkbox',] },],
        "focused": [{ type: HostBinding, args: ['class.igx-checkbox--focused',] },],
        "indeterminate": [{ type: HostBinding, args: ['class.igx-checkbox--indeterminate',] }, { type: Input },],
        "checked": [{ type: HostBinding, args: ['class.igx-checkbox--checked',] }, { type: Input },],
        "disabled": [{ type: HostBinding, args: ['class.igx-checkbox--disabled',] }, { type: Input },],
    };
    return IgxCheckboxComponent;
}());
export { IgxCheckboxComponent };
function IgxCheckboxComponent_tsickle_Closure_declarations() {
    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
    IgxCheckboxComponent.decorators;
    /**
     * @nocollapse
     * @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
     */
    IgxCheckboxComponent.ctorParameters;
    /** @type {!Object<string,!Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
    IgxCheckboxComponent.propDecorators;
    /**
     * @hidden
     * @type {?}
     */
    IgxCheckboxComponent.prototype._value;
    /**
     * Returns reference to the native checkbox element.
     * ```typescript
     * let checkboxElement =  this.checkbox.checkboxElement;
     * ```
     * \@memberof IgxSwitchComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.nativeCheckbox;
    /**
     * Returns reference to the native label element.
     * ```typescript
     * let labelElement =  this.checkbox.nativeLabel;
     * ```
     * \@memberof IgxSwitchComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.nativeLabel;
    /**
     * Returns reference to the label placeholder element.
     * ```typescript
     * let labelPlaceholder =  this.checkbox.placeholderLabel;
     * ```
     * \@memberof IgxSwitchComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.placeholderLabel;
    /**
     * Sets/gets the `id` of the checkbox component.
     * If not set, the `id` of the first checkbox component will be `"igx-checkbox-0"`.
     * ```html
     * <igx-checkbox id="my-first-checkbox"></igx-checkbox>
     * ```
     * ```typescript
     * let checkboxId =  this.checkbox.id;
     * ```
     * \@memberof IgxCheckboxComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.id;
    /**
     * 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"`.
     * ```html
     * <igx-checkbox labelId = "Label1"></igx-checkbox>
     * ```
     * ```typescript
     * let labelId =  this.checkbox.labelId;
     * ```
     * \@memberof IgxCheckboxComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.labelId;
    /**
     * Sets/gets the `value` attribute.
     * ```html
     * <igx-checkbox [value] = "'CheckboxValue'"></igx-checkbox>
     * ```
     * ```typescript
     * let value =  this.checkbox.value;
     * ```
     * \@memberof IgxCheckboxComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.value;
    /**
     * Sets/gets the `name` attribute.
     * ```html
     * <igx-checkbox name = "Checkbox1"></igx-checkbox>
     * ```
     * ```typescript
     * let name =  this.checkbox.name;
     * ```
     * \@memberof IgxCheckboxComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.name;
    /**
     * Sets/gets the value of the `tabindex` attribute.
     * ```html
     * <igx-checkbox [tabindex] = "1"></igx-checkbox>
     * ```
     * ```typescript
     * let tabIndex =  this.checkbox.tabindex;
     * ```
     * \@memberof IgxCheckboxComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.tabindex;
    /**
     *  Sets/gets the position of the `label`.
     *  If not set, the `labelPosition` will have value `"after"`.
     * ```html
     * <igx-checkbox labelPosition = "before"></igx-checkbox>
     * ```
     * ```typescript
     * let labelPosition =  this.checkbox.labelPosition;
     * ```
     * \@memberof IgxCheckboxComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.labelPosition;
    /**
     * Enables/Disables the ripple effect.
     * If not set, `disableRipple` will have value `false`.
     * ```html
     * <igx-checkbox [disableRipple] = "true"></igx-checkbox>
     * ```
     * ```typescript
     * let isRippleDisabled = this.checkbox.desableRipple;
     * ```
     * \@memberof IgxCheckboxComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.disableRipple;
    /**
     * Sets/gets whether the checkbox is required.
     * If not set, `required` will have value `false`.
     * ```html
     * <igx-checkbox [required] = "true"></igx-checkbox>
     * ```
     * ```typescript
     * let isRequired =  this.checkbox.required;
     * ```
     * \@memberof IgxCheckboxComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.required;
    /**
     * Sets/gets the `aria-labelledby` attribute.
     * If not set, the `aria-labelledby` will be equal to the value of `labelId` attribute.
     * ```html
     * <igx-checkbox aria-labelledby = "Checkbox1"></igx-checkbox>
     * ```
     * ```typescript
     * let ariaLabelledBy =  this.checkbox.ariaLabelledBy;
     * ```
     * \@memberof IgxCheckboxComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.ariaLabelledBy;
    /**
     * Sets/gets the value of the `aria-label` attribute.
     * ```html
     * <igx-checkbox aria-label = "Checkbox1"></igx-checkbox>
     * ```
     * ```typescript
     * let ariaLabel = this.checkbox.aruaLabel;
     * ```
     * \@memberof IgxCheckboxComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.ariaLabel;
    /**
     * An event that is emitted after the checkbox state is changed.
     * Provides references to the `IgxCheckboxComponent` and the `checked` property as event arguments.
     * \@memberof IgxCheckboxComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.change;
    /**
     * Returns the class of the checkbox component.
     * ```typescript
     * let class =  this.checkbox.cssClass;
     * ```
     * \@memberof IgxCheckboxComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.cssClass;
    /**
     * Sets/gets whether the checkbox component is on focus.
     * Default value is `false`.
     * ```typescript
     * this.checkbox.focused =  true;
     * ```
     * ```typescript
     * let isFocused =  this.checkbox.focused;
     * ```
     * \@memberof IgxCheckboxComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.focused;
    /**
     * Sets/gets the checkbox indeterminate visual state.
     * Default value is `false`;
     * ```html
     * <igx-checkbox [indeterminate] = "true"></igx-checkbox>
     * ```
     * ```typescript
     * let isIndeterminate = this.checkbox.indeterminate;
     * ```
     * \@memberof IgxCheckboxComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.indeterminate;
    /**
     * Sets/gets whether the checkbox is checked.
     * Default value is `false`.
     * ```html
     * <igx-checkbox [checked] = "true"></igx-checkbox>
     * ```
     * ```typescript
     * let isChecked =  this.checkbox.checked;
     * ```
     * \@memberof IgxCheckboxComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.checked;
    /**
     * Sets/gets whether the checkbox is disabled.
     * Default value is `false`.
     * ```html
     * <igx-checkbox [disabled] = "true"></igx-checkbox>
     * ```
     * ```typescript
     * let isDesabled = this.checkbox.disabled;
     * ```
     * \@memberof IgxCheckboxComponent
     * @type {?}
     */
    IgxCheckboxComponent.prototype.disabled;
    /**
     * @hidden
     * @type {?}
     */
    IgxCheckboxComponent.prototype.inputId;
    /**
     * @hidden
     * @type {?}
     */
    IgxCheckboxComponent.prototype._onTouchedCallback;
    /**
     * @hidden
     * @type {?}
     */
    IgxCheckboxComponent.prototype._onChangeCallback;
}
export var /** @type {?} */ IGX_CHECKBOX_REQUIRED_VALIDATOR = {
    provide: NG_VALIDATORS,
    useExisting: forwardRef(function () { return IgxCheckboxRequiredDirective; }),
    multi: true
};
var IgxCheckboxRequiredDirective = /** @class */ (function (_super) {
    tslib_1.__extends(IgxCheckboxRequiredDirective, _super);
    function IgxCheckboxRequiredDirective() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    IgxCheckboxRequiredDirective.decorators = [
        { type: Directive, args: [{
                    selector: "igx-checkbox[required][formControlName],\n    igx-checkbox[required][formControl],\n    igx-checkbox[required][ngModel]",
                    providers: [IGX_CHECKBOX_REQUIRED_VALIDATOR]
                },] },
    ];
    return IgxCheckboxRequiredDirective;
}(CheckboxRequiredValidator));
export { IgxCheckboxRequiredDirective };
function IgxCheckboxRequiredDirective_tsickle_Closure_declarations() {
    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
    IgxCheckboxRequiredDirective.decorators;
    /**
     * @nocollapse
     * @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
     */
    IgxCheckboxRequiredDirective.ctorParameters;
}
/**
 * The IgxCheckboxModule provides the {\@link IgxCheckboxComponent} inside your application.
 */
var IgxCheckboxModule = /** @class */ (function () {
    function IgxCheckboxModule() {
    }
    IgxCheckboxModule.decorators = [
        { type: NgModule, args: [{
                    declarations: [IgxCheckboxComponent, IgxCheckboxRequiredDirective],
                    exports: [IgxCheckboxComponent, IgxCheckboxRequiredDirective],
                    imports: [IgxRippleModule]
                },] },
    ];
    return IgxCheckboxModule;
}());
export { IgxCheckboxModule };
function IgxCheckboxModule_tsickle_Closure_declarations() {
    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
    IgxCheckboxModule.decorators;
    /**
     * @nocollapse
     * @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
     */
    IgxCheckboxModule.ctorParameters;
}
export { ɵ0 };

//# sourceMappingURL=data:application/json;base64, 