/**
 * @fileoverview added by tsickle
 * Generated from: lib/form-control/form-control.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import * as tslib_1 from "tslib";
import { mixinRequired, mixinDisabled, mixinReadonly, mixinGrouped, mixinFocused, mixinError, mixinHideErrors } from '@bravobit/bb-foundation';
import { ChangeDetectionStrategy, Component, ContentChild, Input, ViewEncapsulation } from '@angular/core';
import { NgControl } from '@angular/forms';
/** @type {?} */
var nextUniqueId = 0;
var BbFormControlBase = /** @class */ (function () {
    function BbFormControlBase() {
    }
    return BbFormControlBase;
}());
/** @type {?} */
var BbFormControlMixinBase = mixinDisabled(mixinFocused(mixinReadonly(mixinGrouped(mixinRequired(mixinError(mixinHideErrors(BbFormControlBase)))))));
var BbFormControl = /** @class */ (function (_super) {
    tslib_1.__extends(BbFormControl, _super);
    function BbFormControl() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        // Inputs.
        _this.label = null;
        _this.hint = null;
        // Data.
        _this.arrow = false;
        // Data.
        _this.labelId = "bb-form-control-" + nextUniqueId++;
        return _this;
    }
    /**
     * @param {?} error
     * @return {?}
     */
    BbFormControl.prototype.onErrorChange = /**
     * @param {?} error
     * @return {?}
     */
    function (error) {
        this.error = !!error;
    };
    BbFormControl.decorators = [
        { type: Component, args: [{
                    selector: 'bb-form-control',
                    template: "<!-- Label of the form control. -->\r\n<label *ngIf=\"label as labelContent\"\r\n       [attr.for]=\"labelId\"\r\n       class=\"bb-form-control-label\">\r\n    <ng-template [bbTemplate]=\"labelContent\">\r\n        {{ labelContent }}\r\n    </ng-template>\r\n</label>\r\n\r\n<!-- The input with the addons. -->\r\n<div class=\"bb-form-control-container\">\r\n    <ng-content select=\"[bbPrefix]\"></ng-content>\r\n    <ng-content select=\"[bbInput]\"></ng-content>\r\n    <ng-content select=\"[bbSuffix]\"></ng-content>\r\n</div>\r\n\r\n<!-- The error component. -->\r\n<bb-form-error *ngIf=\"!hideErrors\"\r\n               [control]=\"ngControl\"\r\n               (errorChange)=\"onErrorChange($event)\">\r\n</bb-form-error>\r\n\r\n<!-- The form control hint. -->\r\n<p *ngIf=\"hint as hintContent\"\r\n   class=\"bb-form-control-hint\">\r\n    <ng-template [bbTemplate]=\"hintContent\">\r\n        {{ hintContent }}\r\n    </ng-template>\r\n</p>\r\n",
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    host: {
                        'class': 'bb-form-control',
                        '[class.readonly]': 'readonly',
                        '[class.required]': 'required',
                        '[class.disabled]': 'disabled',
                        '[class.focused]': 'focused',
                        '[class.grouped]': 'grouped',
                        '[class.arrow]': 'arrow',
                        '[class.error]': 'error'
                    },
                    inputs: ['grouped', 'hideErrors'],
                    preserveWhitespaces: false,
                    styles: [".bb-form-control{color:#2d3c4d;display:block}.bb-form-control>.bb-form-control-container>.bb-prefix,.bb-form-control>.bb-form-control-container>.bb-suffix{margin:0 8px;color:#b4b4b4;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control.grouped{margin-bottom:20px}.bb-form-control.small{max-width:240px}.bb-form-control.medium{max-width:480px}.bb-form-control.large{max-width:720px}.bb-form-control.required>.bb-form-control-label:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5}.bb-form-control.disabled>.bb-form-control-container{cursor:default;pointer-events:none;background-color:rgba(204,204,204,.64)}.bb-form-control.disabled>.bb-form-control-container>input,.bb-form-control.disabled>.bb-form-control-container>select,.bb-form-control.disabled>.bb-form-control-container>textarea{color:#aaa}.bb-form-control.readonly>.bb-form-control-container{cursor:default;border:1px dotted #bdc4c9}.bb-form-control:not(.disabled):not(.readonly).focused>.bb-form-control-container{background-color:#fff;box-shadow:inset 0 3px 0 0 rgba(183,188,194,.2),0 6px 6px -6px rgba(0,0,0,.1),0 0 0 3px rgba(0,123,255,.2)}.bb-form-control:not(.disabled):not(.readonly).focused>.bb-form-control-container>input::-webkit-input-placeholder,.bb-form-control:not(.disabled):not(.readonly).focused>.bb-form-control-container>textarea::-webkit-input-placeholder{color:#b4b4b4;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control:not(.disabled):not(.readonly).focused>.bb-form-control-container>input::-moz-placeholder,.bb-form-control:not(.disabled):not(.readonly).focused>.bb-form-control-container>textarea::-moz-placeholder{color:#b4b4b4;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control:not(.disabled):not(.readonly).focused>.bb-form-control-container>input:-ms-input-placeholder,.bb-form-control:not(.disabled):not(.readonly).focused>.bb-form-control-container>textarea:-ms-input-placeholder{color:#b4b4b4;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control:not(.disabled):not(.readonly).focused>.bb-form-control-container>input::-ms-input-placeholder,.bb-form-control:not(.disabled):not(.readonly).focused>.bb-form-control-container>textarea::-ms-input-placeholder{color:#b4b4b4;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control:not(.disabled):not(.readonly).focused>.bb-form-control-container>input::placeholder,.bb-form-control:not(.disabled):not(.readonly).focused>.bb-form-control-container>textarea::placeholder{color:#b4b4b4;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control.error>.bb-form-control-label{color:#c23934}.bb-form-control.error>.bb-form-control-hint{display:none}.bb-form-control.error>.bb-form-control-container{border:1px solid #962b26;background-color:rgba(194,57,52,.25)!important;box-shadow:inset 0 3px 0 0 rgba(183,188,194,.2),0 6px 6px -6px rgba(0,0,0,.1),0 0 0 3px rgba(194,57,52,.4)!important}.bb-form-control.error>.bb-form-control-container>.bb-prefix,.bb-form-control.error>.bb-form-control-container>.bb-suffix{color:#c23934}.bb-form-control.error>.bb-form-control-container>input::-webkit-input-placeholder,.bb-form-control.error>.bb-form-control-container>textarea::-webkit-input-placeholder{color:rgba(194,57,52,.4)!important}.bb-form-control.error>.bb-form-control-container>input::-moz-placeholder,.bb-form-control.error>.bb-form-control-container>textarea::-moz-placeholder{color:rgba(194,57,52,.4)!important}.bb-form-control.error>.bb-form-control-container>input:-ms-input-placeholder,.bb-form-control.error>.bb-form-control-container>textarea:-ms-input-placeholder{color:rgba(194,57,52,.4)!important}.bb-form-control.error>.bb-form-control-container>input::-ms-input-placeholder,.bb-form-control.error>.bb-form-control-container>textarea::-ms-input-placeholder{color:rgba(194,57,52,.4)!important}.bb-form-control.error>.bb-form-control-container>input::placeholder,.bb-form-control.error>.bb-form-control-container>textarea::placeholder{color:rgba(194,57,52,.4)!important}.bb-form-control.arrow>.bb-form-control-container:after{width:20px;content:\"\";height:36px;display:-ms-flexbox;display:flex;min-width:20px;background-repeat:no-repeat;background-position:calc(100% - 8px) center;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAGCAYAAAAYLBS/AAAACXBIWXMAAAsSAAALEgHS3X78AAAAWUlEQVQYlY3QsQ2DMAAEwMMTsAkrZInvWY3WXiIjJJtkA1OBRCIRf/nSffFTrXXGE4uxbCXJBw+8R0CStcAg3JKsUI7mDzzBBd3AC4Cp9/4z21o7znl9A9gBAf4fpjLTwkUAAAAASUVORK5CYII=)}.bb-form-control-container{width:100%;display:-ms-flexbox;display:flex;overflow:hidden;position:relative;border-radius:3px;-ms-flex-align:center;align-items:center;border:1px solid #b6bbc1;background-color:#fff8ff;transition-duration:250ms;transition-property:background-color,box-shadow;transition-timing-function:cubic-bezier(0,0,.2,1);box-shadow:inset 0 3px 0 0 rgba(183,188,194,.2),0 6px 6px -6px rgba(0,0,0,.1)}.bb-form-control-container>input::-webkit-input-placeholder,.bb-form-control-container>textarea::-webkit-input-placeholder{color:#d2d2d2;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control-container>input::-moz-placeholder,.bb-form-control-container>textarea::-moz-placeholder{color:#d2d2d2;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control-container>input:-ms-input-placeholder,.bb-form-control-container>textarea:-ms-input-placeholder{color:#d2d2d2;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control-container>input::-ms-input-placeholder,.bb-form-control-container>textarea::-ms-input-placeholder{color:#d2d2d2;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control-container>input::placeholder,.bb-form-control-container>textarea::placeholder{color:#d2d2d2;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control-container>input,.bb-form-control-container>select,.bb-form-control-container>textarea{margin:0;width:100%;border:none;color:#3d464d;font-size:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.bb-form-control-container>input,.bb-form-control-container>select{height:36px;padding:0 8px}.bb-form-control-container>select::-ms-expand{display:none}.bb-form-control-container>input::-ms-clear,.bb-form-control-container>input::-ms-reveal{width:0;height:0;display:none}.bb-form-control-container>input::-webkit-search-cancel-button,.bb-form-control-container>input::-webkit-search-decoration,.bb-form-control-container>input::-webkit-search-results-button,.bb-form-control-container>input::-webkit-search-results-decoration{display:none}.bb-form-control-container>textarea{resize:none;padding:8px}.bb-form-control-label{color:#000;display:block;position:relative;margin-bottom:4px;transition:color 30ms cubic-bezier(0,0,.2,1)}.bb-form-control-error,.bb-form-control-hint{display:block;font-size:13px;margin-top:4px}.bb-form-control-error{color:#c23934}.bb-form-control-hint{color:#738694}"]
                }] }
    ];
    BbFormControl.propDecorators = {
        ngControl: [{ type: ContentChild, args: [NgControl, { static: false },] }],
        label: [{ type: Input }],
        hint: [{ type: Input }]
    };
    return BbFormControl;
}(BbFormControlMixinBase));
export { BbFormControl };
if (false) {
    /** @type {?} */
    BbFormControl.prototype.ngControl;
    /** @type {?} */
    BbFormControl.prototype.label;
    /** @type {?} */
    BbFormControl.prototype.hint;
    /** @type {?} */
    BbFormControl.prototype.arrow;
    /** @type {?} */
    BbFormControl.prototype.labelId;
}
//# sourceMappingURL=data:application/json;base64, 