/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import * as tslib_1 from "tslib";
import { CommonModule } from '@angular/common';
import { Component, ContentChild, ContentChildren, ElementRef, HostBinding, HostListener, Input, NgModule, QueryList, Inject, Optional } from '@angular/core';
import { IgxHintDirective } from '../directives/hint/hint.directive';
import { IgxInputDirective, IgxInputState } from '../directives/input/input.directive';
import { IgxLabelDirective } from '../directives/label/label.directive';
import { IgxPrefixDirective, IgxPrefixModule } from '../directives/prefix/prefix.directive';
import { IgxSuffixDirective, IgxSuffixModule } from '../directives/suffix/suffix.directive';
import { DisplayDensity, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity';
import { IgxInputGroupBase } from './input-group.common';
/** @type {?} */
var NEXT_ID = 0;
/** @enum {number} */
var IgxInputGroupType = {
    LINE: 0,
    BOX: 1,
    BORDER: 2,
    FLUENT: 3,
    SEARCH: 4,
    FLUENT_SEARCH: 5,
};
IgxInputGroupType[IgxInputGroupType.LINE] = 'LINE';
IgxInputGroupType[IgxInputGroupType.BOX] = 'BOX';
IgxInputGroupType[IgxInputGroupType.BORDER] = 'BORDER';
IgxInputGroupType[IgxInputGroupType.FLUENT] = 'FLUENT';
IgxInputGroupType[IgxInputGroupType.SEARCH] = 'SEARCH';
IgxInputGroupType[IgxInputGroupType.FLUENT_SEARCH] = 'FLUENT_SEARCH';
var IgxInputGroupComponent = /** @class */ (function (_super) {
    tslib_1.__extends(IgxInputGroupComponent, _super);
    function IgxInputGroupComponent(_element, _displayDensityOptions) {
        var _this = _super.call(this, _displayDensityOptions) || this;
        _this._element = _element;
        _this._displayDensityOptions = _displayDensityOptions;
        _this._type = IgxInputGroupType.LINE;
        _this._filled = false;
        _this._supressInputAutofocus = false;
        /**
         * An \@Input property that sets the value of `id` attribute. If not provided it will be automatically generated.
         * ```html
         * <igx-input-group [id]="'igx-input-group-55'"></igx-input-group>
         * ```
         */
        _this.id = "igx-input-group-" + NEXT_ID++;
        /**
         * Property that enables/disables the autogenerated class of the `IgxInputGroupComponent`.
         * By default applied the class is applied.
         * ```typescript
         * \@ViewChild("MyInputGroup")
         * public inputGroup: IgxInputGroupComponent;
         * ngAfterViewInit(){
         * this.inputGroup.defaultClass = false;
         * ```
         * }
         */
        _this.defaultClass = true;
        /**
         * @hidden
         */
        _this.hasPlaceholder = false;
        /**
         * @hidden
         */
        _this.isRequired = false;
        /**
         * @hidden
         */
        _this.isFocused = false;
        /**
         * @hidden
         */
        _this.isBox = false;
        /**
         * @hidden
         */
        _this.isBorder = false;
        /**
         * @hidden
         */
        _this.isSearch = false;
        /**
         * @hidden
         */
        _this.isFluentSearch = false;
        /**
         * @hidden
         */
        _this.isFluent = false;
        /**
         * An \@Input property that disables the `IgxInputGroupComponent`.
         * ```html
         * <igx-input-group [disabled]="'true'"></igx-input-group>
         * ```
         */
        _this.disabled = false;
        /**
         * @hidden
         */
        _this.hasWarning = false;
        _this.element = _element;
        return _this;
    }
    Object.defineProperty(IgxInputGroupComponent.prototype, "validClass", {
        /**
         * @hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            return this.input.valid === IgxInputState.VALID;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxInputGroupComponent.prototype, "invalidClass", {
        /**
         * @hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            return this.input.valid === IgxInputState.INVALID;
        },
        enumerable: true,
        configurable: true
    });
    /**
     *@hidden
     */
    /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    IgxInputGroupComponent.prototype.onClick = /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    function (event) {
        if (!this._supressInputAutofocus) {
            this.input.focus();
        }
    };
    Object.defineProperty(IgxInputGroupComponent.prototype, "type", {
        /**
         * Returns the type of the `IgxInputGroupComponent`. How the input is styled.
         * Values are `line` - 0, `box` - 1, `border` - 2,  `fluent` - 3 `fluentSearch` - 4 and `search` - 5. The default is `line`.
         * ```typescript
         *@ViewChild("MyInputGroup")
         *public inputGroup: IgxInputGroupComponent;
         *ngAfterViewInit(){
         *    let inputType = this.inputGroup.type;
         *}
         * ```
         */
        get: /**
         * Returns the type of the `IgxInputGroupComponent`. How the input is styled.
         * Values are `line` - 0, `box` - 1, `border` - 2,  `fluent` - 3 `fluentSearch` - 4 and `search` - 5. The default is `line`.
         * ```typescript
         * \@ViewChild("MyInputGroup")
         * public inputGroup: IgxInputGroupComponent;
         * ngAfterViewInit(){
         *    let inputType = this.inputGroup.type;
         * }
         * ```
         * @return {?}
         */
        function () {
            return this._type.toString();
        },
        /**
         * An @Input property that sets how the input will be styled.
         * The allowed values are `line`, `box`, `border`, `fluent`, `search` and `fluentSearch`. The default is `line`.
         * ```html
         *<igx-input-group [type]="'search'">
         * ```
         */
        set: /**
         * An \@Input property that sets how the input will be styled.
         * The allowed values are `line`, `box`, `border`, `fluent`, `search` and `fluentSearch`. The default is `line`.
         * ```html
         * <igx-input-group [type]="'search'">
         * ```
         * @param {?} value
         * @return {?}
         */
        function (value) {
            /** @type {?} */
            var type = ((/** @type {?} */ (IgxInputGroupType)))[value.toUpperCase()];
            if (type !== undefined) {
                this.isBox = this.isFluent = this.isFluentSearch = this.isBorder = this.isSearch = false;
                switch (type) {
                    case IgxInputGroupType.BOX:
                        this.isBox = true;
                        break;
                    case IgxInputGroupType.BORDER:
                        this.isBorder = true;
                        break;
                    case IgxInputGroupType.FLUENT:
                        this.isFluent = true;
                        break;
                    case IgxInputGroupType.FLUENT_SEARCH:
                        this.isFluentSearch = true;
                        break;
                    case IgxInputGroupType.SEARCH:
                        this.isSearch = true;
                        break;
                    default: break;
                }
                this._type = type;
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxInputGroupComponent.prototype, "supressInputAutofocus", {
        /**
         * Returns whether the input element of the input group will be automatically focused on click.
         * ```typescript
         * let supressInputAutofocus = this.inputGroup.supressInputAutofocus;
         * ```
         */
        get: /**
         * Returns whether the input element of the input group will be automatically focused on click.
         * ```typescript
         * let supressInputAutofocus = this.inputGroup.supressInputAutofocus;
         * ```
         * @return {?}
         */
        function () {
            return this._supressInputAutofocus;
        },
        /**
         * Sets whether the input element of the input group will be automatically focused on click.
         * ```html
         * <igx-input-group [supressInputAutofocus]="true"></igx-input-group>
         * ```
         */
        set: /**
         * Sets whether the input element of the input group will be automatically focused on click.
         * ```html
         * <igx-input-group [supressInputAutofocus]="true"></igx-input-group>
         * ```
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._supressInputAutofocus = value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxInputGroupComponent.prototype, "isFilled", {
        /**
         *@hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            return this._filled || (this.input && this.input.value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxInputGroupComponent.prototype, "isDisplayDensityCosy", {
        /**
         *@hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            return this.displayDensity === DisplayDensity.cosy;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxInputGroupComponent.prototype, "isDisplayDensityComfortable", {
        /**
         *@hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            return this.displayDensity === DisplayDensity.comfortable;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxInputGroupComponent.prototype, "isDisplayDensityCompact", {
        /**
         *@hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            return this.displayDensity === DisplayDensity.compact;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxInputGroupComponent.prototype, "hasHints", {
        /**
         * Returns whether the `IgxInputGroupComponent` has hints.
         * ```typescript
         *@ViewChild("MyInputGroup")
         *public inputGroup: IgxInputGroupComponent;
         *ngAfterViewInit(){
         *    let inputHints = this.inputGroup.hasHints;
         *}
         * ```
         */
        get: /**
         * Returns whether the `IgxInputGroupComponent` has hints.
         * ```typescript
         * \@ViewChild("MyInputGroup")
         * public inputGroup: IgxInputGroupComponent;
         * ngAfterViewInit(){
         *    let inputHints = this.inputGroup.hasHints;
         * }
         * ```
         * @return {?}
         */
        function () {
            return this.hints.length > 0;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxInputGroupComponent.prototype, "hasBorder", {
        /**
         * Returns whether the `IgxInputGroupComponent` has border.
         * ```typescript
         *@ViewChild("MyInputGroup")
         *public inputGroup: IgxInputGroupComponent;
         *ngAfterViewInit(){
         *    let inputBroder = this.inputGroup.hasBorder;
         *}
         * ```
         */
        get: /**
         * Returns whether the `IgxInputGroupComponent` has border.
         * ```typescript
         * \@ViewChild("MyInputGroup")
         * public inputGroup: IgxInputGroupComponent;
         * ngAfterViewInit(){
         *    let inputBroder = this.inputGroup.hasBorder;
         * }
         * ```
         * @return {?}
         */
        function () {
            return this._type === IgxInputGroupType.LINE ||
                this._type === IgxInputGroupType.BOX;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxInputGroupComponent.prototype, "isTypeLine", {
        /**
         * Returns whether the `IgxInputGroupComponent` type is line.
         * ```typescript
         *@ViewChild("MyInputGroup1")
         *public inputGroup: IgxInputGroupComponent;
         *ngAfterViewInit(){
         *    let isTypeLine = this.inputGroup.isTypeLine;
         *}
         * ```
         */
        get: /**
         * Returns whether the `IgxInputGroupComponent` type is line.
         * ```typescript
         * \@ViewChild("MyInputGroup1")
         * public inputGroup: IgxInputGroupComponent;
         * ngAfterViewInit(){
         *    let isTypeLine = this.inputGroup.isTypeLine;
         * }
         * ```
         * @return {?}
         */
        function () {
            return this._type === IgxInputGroupType.LINE;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxInputGroupComponent.prototype, "isTypeBox", {
        /**
         * Returns whether the `IgxInputGroupComponent` type is box.
         * ```typescript
         *@ViewChild("MyInputGroup1")
         *public inputGroup: IgxInputGroupComponent;
         *ngAfterViewInit(){
         *    let isTypeBox = this.inputGroup.isTypeBox;
         *}
         *```
         */
        get: /**
         * Returns whether the `IgxInputGroupComponent` type is box.
         * ```typescript
         * \@ViewChild("MyInputGroup1")
         * public inputGroup: IgxInputGroupComponent;
         * ngAfterViewInit(){
         *    let isTypeBox = this.inputGroup.isTypeBox;
         * }
         * ```
         * @return {?}
         */
        function () {
            return this._type === IgxInputGroupType.BOX;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxInputGroupComponent.prototype, "isTypeBorder", {
        /**
         * Returns whether the `IgxInputGroupComponent` type is border.
         * ```typescript
         *@ViewChild("MyInputGroup1")
         *public inputGroup: IgxInputGroupComponent;
         *ngAfterViewInit(){
         *    let isTypeBorder = this.inputGroup.isTypeBorder;
         *}
         * ```
         */
        get: /**
         * Returns whether the `IgxInputGroupComponent` type is border.
         * ```typescript
         * \@ViewChild("MyInputGroup1")
         * public inputGroup: IgxInputGroupComponent;
         * ngAfterViewInit(){
         *    let isTypeBorder = this.inputGroup.isTypeBorder;
         * }
         * ```
         * @return {?}
         */
        function () {
            return this._type === IgxInputGroupType.BORDER;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxInputGroupComponent.prototype, "isTypeFluent", {
        /**
         * Returns whether the `IgxInputGroupComponent` type is Fluent.
         * ```typescript
         *@ViewChild("MyInputGroup1")
         *public inputGroup: IgxInputGroupComponent;
         *ngAfterViewInit(){
         *    let isTypeFluent = this.inputGroup.isTypeFluent;
         *}
         * ```
         */
        get: /**
         * Returns whether the `IgxInputGroupComponent` type is Fluent.
         * ```typescript
         * \@ViewChild("MyInputGroup1")
         * public inputGroup: IgxInputGroupComponent;
         * ngAfterViewInit(){
         *    let isTypeFluent = this.inputGroup.isTypeFluent;
         * }
         * ```
         * @return {?}
         */
        function () {
            return this._type === IgxInputGroupType.FLUENT;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxInputGroupComponent.prototype, "isTypeSearch", {
        /**
         * Returns whether the `IgxInputGroupComponent` type is search.
         * ```typescript
         *@ViewChild("MyInputGroup1")
         *public inputGroup: IgxInputGroupComponent;
         *ngAfterViewInit(){
         *    let isTypeSearch = this.inputGroup.isTypeSearch;
         *}
         * ```
         */
        get: /**
         * Returns whether the `IgxInputGroupComponent` type is search.
         * ```typescript
         * \@ViewChild("MyInputGroup1")
         * public inputGroup: IgxInputGroupComponent;
         * ngAfterViewInit(){
         *    let isTypeSearch = this.inputGroup.isTypeSearch;
         * }
         * ```
         * @return {?}
         */
        function () {
            return this._type === IgxInputGroupType.SEARCH;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxInputGroupComponent.prototype, "isTypeFluentSearch", {
        /**
         * Returns whether the `IgxInputGroupComponent` type is fluentSearch.
         * ```typescript
         *@ViewChild("MyInputGroup1")
         *public inputGroup: IgxInputGroupComponent;
         *ngAfterViewInit(){
         *    let isTypeFluentSearch = this.inputGroup.isTypeFluentSearch;
         *}
         * ```
         */
        get: /**
         * Returns whether the `IgxInputGroupComponent` type is fluentSearch.
         * ```typescript
         * \@ViewChild("MyInputGroup1")
         * public inputGroup: IgxInputGroupComponent;
         * ngAfterViewInit(){
         *    let isTypeFluentSearch = this.inputGroup.isTypeFluentSearch;
         * }
         * ```
         * @return {?}
         */
        function () {
            return this._type === IgxInputGroupType.FLUENT_SEARCH;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxInputGroupComponent.prototype, "filled", {
        get: /**
         * @return {?}
         */
        function () {
            return this._filled;
        },
        set: /**
         * @param {?} val
         * @return {?}
         */
        function (val) {
            this._filled = val;
        },
        enumerable: true,
        configurable: true
    });
    IgxInputGroupComponent.decorators = [
        { type: Component, args: [{
                    selector: 'igx-input-group',
                    template: "<div class=\"igx-input-group__wrapper\" *ngIf=\"isTypeBox; else bundle\">\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n</div>\n\n<div class=\"igx-input-group__hint\">\n    <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n</div>\n\n<ng-template #material>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #bundle>\n\n<!--    <ng-content *ngIf=\"isTypeFluent\" select=\"[igxLabel]\"></ng-content>-->\n    <ng-container *ngIf=\"isTypeFluent\">\n        <ng-container *ngTemplateOutlet=\"material\"></ng-container>\n    </ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n        <div class=\"igx-input-group__bundle-main\">\n\n                <ng-container *ngIf=\"!isTypeFluent\">\n                    <ng-container *ngTemplateOutlet=\"material\"></ng-container>\n                </ng-container>\n<!--            <ng-content *ngIf=\"!isTypeFluent\" select=\"[igxLabel]\"></ng-content>-->\n\n            <ng-content select=\"[igxInput]\"></ng-content>\n        </div>\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </div>\n    <div class=\"igx-input-group__border\" *ngIf=\"hasBorder\"></div>\n</ng-template>\n",
                    providers: [{ provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }]
                }] }
    ];
    /** @nocollapse */
    IgxInputGroupComponent.ctorParameters = function () { return [
        { type: ElementRef },
        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DisplayDensityToken,] }] }
    ]; };
    IgxInputGroupComponent.propDecorators = {
        id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }],
        defaultClass: [{ type: HostBinding, args: ['class.igx-input-group',] }],
        hasPlaceholder: [{ type: HostBinding, args: ['class.igx-input-group--placeholder',] }],
        isRequired: [{ type: HostBinding, args: ['class.igx-input-group--required',] }],
        isFocused: [{ type: HostBinding, args: ['class.igx-input-group--focused',] }],
        isBox: [{ type: HostBinding, args: ['class.igx-input-group--box',] }],
        isBorder: [{ type: HostBinding, args: ['class.igx-input-group--border',] }],
        isSearch: [{ type: HostBinding, args: ['class.igx-input-group--search',] }],
        isFluentSearch: [{ type: HostBinding, args: ['class.igx-input-group--fluent-search',] }],
        isFluent: [{ type: HostBinding, args: ['class.igx-input-group--fluent',] }],
        disabled: [{ type: HostBinding, args: ['class.igx-input-group--disabled',] }, { type: Input }],
        validClass: [{ type: HostBinding, args: ['class.igx-input-group--valid',] }],
        invalidClass: [{ type: HostBinding, args: ['class.igx-input-group--invalid',] }],
        hasWarning: [{ type: HostBinding, args: ['class.igx-input-group--warning',] }],
        hints: [{ type: ContentChildren, args: [IgxHintDirective, { read: IgxHintDirective },] }],
        input: [{ type: ContentChild, args: [IgxInputDirective, { read: IgxInputDirective, static: true },] }],
        onClick: [{ type: HostListener, args: ['click', ['$event'],] }],
        type: [{ type: Input, args: ['type',] }],
        supressInputAutofocus: [{ type: Input }],
        isFilled: [{ type: HostBinding, args: ['class.igx-input-group--filled',] }],
        isDisplayDensityCosy: [{ type: HostBinding, args: ['class.igx-input-group--cosy',] }],
        isDisplayDensityComfortable: [{ type: HostBinding, args: ['class.igx-input-group--comfortable',] }],
        isDisplayDensityCompact: [{ type: HostBinding, args: ['class.igx-input-group--compact',] }]
    };
    return IgxInputGroupComponent;
}(DisplayDensityBase));
export { IgxInputGroupComponent };
if (false) {
    /**
     * @type {?}
     * @private
     */
    IgxInputGroupComponent.prototype._type;
    /**
     * @type {?}
     * @private
     */
    IgxInputGroupComponent.prototype._filled;
    /**
     * @type {?}
     * @private
     */
    IgxInputGroupComponent.prototype._supressInputAutofocus;
    /**
     * An ElementRef property of the `IgxInputGroupComponent`.
     * @type {?}
     */
    IgxInputGroupComponent.prototype.element;
    /**
     * An \@Input property that sets the value of `id` attribute. If not provided it will be automatically generated.
     * ```html
     * <igx-input-group [id]="'igx-input-group-55'"></igx-input-group>
     * ```
     * @type {?}
     */
    IgxInputGroupComponent.prototype.id;
    /**
     * Property that enables/disables the autogenerated class of the `IgxInputGroupComponent`.
     * By default applied the class is applied.
     * ```typescript
     * \@ViewChild("MyInputGroup")
     * public inputGroup: IgxInputGroupComponent;
     * ngAfterViewInit(){
     * this.inputGroup.defaultClass = false;
     * ```
     * }
     * @type {?}
     */
    IgxInputGroupComponent.prototype.defaultClass;
    /**
     * @hidden
     * @type {?}
     */
    IgxInputGroupComponent.prototype.hasPlaceholder;
    /**
     * @hidden
     * @type {?}
     */
    IgxInputGroupComponent.prototype.isRequired;
    /**
     * @hidden
     * @type {?}
     */
    IgxInputGroupComponent.prototype.isFocused;
    /**
     * @hidden
     * @type {?}
     */
    IgxInputGroupComponent.prototype.isBox;
    /**
     * @hidden
     * @type {?}
     */
    IgxInputGroupComponent.prototype.isBorder;
    /**
     * @hidden
     * @type {?}
     */
    IgxInputGroupComponent.prototype.isSearch;
    /**
     * @hidden
     * @type {?}
     */
    IgxInputGroupComponent.prototype.isFluentSearch;
    /**
     * @hidden
     * @type {?}
     */
    IgxInputGroupComponent.prototype.isFluent;
    /**
     * An \@Input property that disables the `IgxInputGroupComponent`.
     * ```html
     * <igx-input-group [disabled]="'true'"></igx-input-group>
     * ```
     * @type {?}
     */
    IgxInputGroupComponent.prototype.disabled;
    /**
     * @hidden
     * @type {?}
     */
    IgxInputGroupComponent.prototype.hasWarning;
    /**
     * @hidden
     * @type {?}
     * @protected
     */
    IgxInputGroupComponent.prototype.hints;
    /**
     * @hidden
     * @type {?}
     * @protected
     */
    IgxInputGroupComponent.prototype.input;
    /**
     * @type {?}
     * @private
     */
    IgxInputGroupComponent.prototype._element;
    /**
     * @type {?}
     * @private
     */
    IgxInputGroupComponent.prototype._displayDensityOptions;
}
/**
 * @hidden
 */
var IgxInputGroupModule = /** @class */ (function () {
    function IgxInputGroupModule() {
    }
    IgxInputGroupModule.decorators = [
        { type: NgModule, args: [{
                    declarations: [IgxInputGroupComponent, IgxHintDirective, IgxInputDirective, IgxLabelDirective],
                    exports: [IgxInputGroupComponent, IgxHintDirective, IgxInputDirective, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective],
                    imports: [CommonModule, IgxPrefixModule, IgxSuffixModule]
                },] }
    ];
    return IgxInputGroupModule;
}());
export { IgxInputGroupModule };
//# sourceMappingURL=data:application/json;base64, 