/**
 * @fileoverview added by tsickle
 * Generated from: lib/file-picker/file-picker.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import * as tslib_1 from "tslib";
import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, forwardRef, HostListener, Input, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { mixinDisabled, mixinGrouped, mixinRequired, mixinError, mixinHideErrors } from '@bravobit/bb-foundation';
import { animate, style, transition, trigger } from '@angular/animations';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { BehaviorSubject } from 'rxjs';
/** @type {?} */
var nextUniqueId = 0;
var BbFilePickerBase = /** @class */ (function () {
    function BbFilePickerBase() {
    }
    return BbFilePickerBase;
}());
/** @type {?} */
var BbFilePickerMixinBase = mixinRequired(mixinDisabled(mixinGrouped(mixinError(mixinHideErrors(BbFilePickerBase)))));
var BbFilePicker = /** @class */ (function (_super) {
    tslib_1.__extends(BbFilePicker, _super);
    function BbFilePicker() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        // Inputs.
        _this.label = null;
        _this.hint = null;
        _this.accept = null;
        _this.showImages = true;
        _this.allowDragging = true;
        // State.
        _this.labelId = "bb-file-picker-" + nextUniqueId++;
        _this.hovered = false;
        _this.value$ = new BehaviorSubject({});
        _this.valueChange = new EventEmitter();
        _this.onTouchedCallback = (/**
         * @return {?}
         */
        function () {
        });
        _this.onChangeCallback = (/**
         * @return {?}
         */
        function () {
        });
        _this.saveFile = (/**
         * @param {?=} files
         * @return {?}
         */
        function (files) {
            // Validate the files exist.
            if (!files) {
                return;
            }
            // Retrieve the first file.
            /** @type {?} */
            var file = files[0];
            // Validate the first file exists.
            if (!file) {
                return;
            }
            // Save the file.
            _this.value = file;
        });
        _this.getFileListFromEvent = (/**
         * @param {?} event
         * @return {?}
         */
        function (event) {
            /** @type {?} */
            var element = (/** @type {?} */ (event.target));
            if (!element) {
                return null;
            }
            return element.files;
        });
        _this.preventDefault = (/**
         * @param {?} event
         * @return {?}
         */
        function (event) {
            event.preventDefault();
            event.stopPropagation();
        });
        return _this;
    }
    Object.defineProperty(BbFilePicker.prototype, "value", {
        get: /**
         * @return {?}
         */
        function () {
            var file = this.value$.getValue().file;
            return file;
        },
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this.value$.next({ file: value });
            this.valueChange.emit(value);
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @param {?} event
     * @param {?} isHovered
     * @return {?}
     */
    BbFilePicker.prototype.onDrag = /**
     * @param {?} event
     * @param {?} isHovered
     * @return {?}
     */
    function (event, isHovered) {
        // Validate the input can support drag.
        if (!this.allowDragging || this.disabled) {
            return;
        }
        // Prevent the default event action
        // and start the hovering.
        this.preventDefault(event);
        this.hovered = isHovered;
    };
    /**
     * @param {?} event
     * @return {?}
     */
    BbFilePicker.prototype.onDrop = /**
     * @param {?} event
     * @return {?}
     */
    function (event) {
        // Validate the input can support drag.
        if (!this.allowDragging || this.disabled) {
            return;
        }
        // Prevent the default event action
        // and stop the hovering.
        this.preventDefault(event);
        this.hovered = false;
        // Save the file.
        this.saveFile(event['dataTransfer'].files);
        // Run the on change callback.
        this.onChangeCallback(this.value);
    };
    /**
     * @param {?=} file
     * @return {?}
     */
    BbFilePicker.prototype.onButtonPressed = /**
     * @param {?=} file
     * @return {?}
     */
    function (file) {
        if (file) {
            this.value = null;
            this.onChangeCallback(this.value);
            return;
        }
        return this.openFilePicker();
    };
    /**
     * @return {?}
     */
    BbFilePicker.prototype.openFilePicker = /**
     * @return {?}
     */
    function () {
        return this.fileInput
            && this.fileInput.nativeElement
            && this.fileInput.nativeElement.click
            && this.fileInput.nativeElement.click();
    };
    /**
     * @param {?} event
     * @return {?}
     */
    BbFilePicker.prototype.onFileChange = /**
     * @param {?} event
     * @return {?}
     */
    function (event) {
        // Validate the input is not disabled.
        if (this.disabled) {
            return;
        }
        // Extract the file from the event.
        /** @type {?} */
        var fileList = this.getFileListFromEvent(event);
        // Save the file.
        this.saveFile(fileList);
        // Run the on change callback.
        this.onChangeCallback(this.value);
        // Clear the file input.
        if (this.fileInput && this.fileInput.nativeElement) {
            this.fileInput.nativeElement.value = '';
        }
    };
    /**
     * @param {?} value
     * @return {?}
     */
    BbFilePicker.prototype.writeValue = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        this.value = value;
    };
    /**
     * @param {?} method
     * @return {?}
     */
    BbFilePicker.prototype.registerOnChange = /**
     * @param {?} method
     * @return {?}
     */
    function (method) {
        this.onChangeCallback = method;
    };
    /**
     * @param {?} method
     * @return {?}
     */
    BbFilePicker.prototype.registerOnTouched = /**
     * @param {?} method
     * @return {?}
     */
    function (method) {
        this.onTouchedCallback = method;
    };
    /**
     * @param {?} isDisabled
     * @return {?}
     */
    BbFilePicker.prototype.setDisabledState = /**
     * @param {?} isDisabled
     * @return {?}
     */
    function (isDisabled) {
        this.disabled = isDisabled;
    };
    /**
     * @param {?} error
     * @return {?}
     */
    BbFilePicker.prototype.onErrorChange = /**
     * @param {?} error
     * @return {?}
     */
    function (error) {
        this.error = !!error;
    };
    BbFilePicker.decorators = [
        { type: Component, args: [{
                    selector: 'bb-file-picker',
                    template: "<!-- The label of the input. -->\r\n<label *ngIf=\"label as labelContent\"\r\n       [for]=\"labelId\"\r\n       class=\"bb-file-picker-label\">\r\n    <ng-template [bbTemplate]=\"labelContent\">\r\n        {{ labelContent }}\r\n    </ng-template>\r\n</label>\r\n\r\n<!-- The input that can open the file picker. -->\r\n<input #fileInput\r\n       [accept]=\"accept\"\r\n       [disabled]=\"disabled\"\r\n       (change)=\"onFileChange($event)\"\r\n       class=\"bb-file-picker-input\"\r\n       type=\"file\"\r\n       tabindex=\"-1\">\r\n\r\n<div *ngIf=\"value$ | async as data\"\r\n     class=\"bb-file-picker-wrapper\">\r\n    <!-- The button that accepts files. -->\r\n    <div class=\"bb-file-picker-container\">\r\n        <button [class.destructive]=\"!!data?.file\"\r\n                [class.standalone]=\"!allowDragging\"\r\n                [disabled]=\"disabled\"\r\n                [id]=\"labelId\"\r\n                (click)=\"onButtonPressed(data?.file)\"\r\n                type=\"button\"\r\n                class=\"bb-file-picker-button\">\r\n            <ng-container *ngTemplateOutlet=\"data?.file ? closeIcon : uploadIcon\"></ng-container>\r\n            {{ (data?.file ? 'file-picker.remove' : 'file-picker.choose') | bbLocalize }}\r\n        </button>\r\n        <div *ngIf=\"allowDragging\"\r\n             class=\"bb-file-picker-zone\">\r\n            {{ 'file-picker.drop' | bbLocalize }}\r\n        </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"!!extraTemplate\">\r\n        <ng-container *ngTemplateOutlet=\"extraTemplate; context: {$implicit: data?.file}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"showImages\">\r\n        <div *ngIf=\"data?.file | bbFileImage | async as image\"\r\n             class=\"bb-file-picker-image-container\">\r\n            <div class=\"bb-file-picker-image-wrapper\">\r\n                <div [@bbFilePickerImageAnimation]=\"true\"\r\n                     [style.padding-top.%]=\"image?.aspectRatio * 100\"\r\n                     [style.background-image]=\"image?.background\"\r\n                     class=\"bb-file-picker-image\">\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <!-- Extra information of the file. -->\r\n    <div [class.visible]=\"!!data?.file\"\r\n         class=\"bb-file-picker-info\">\r\n        <span *ngIf=\"data?.file?.name as name\">{{ name }}</span>\r\n        <span *ngIf=\"data?.file?.size as size\">{{ size | bbFileSize }}</span>\r\n    </div>\r\n</div>\r\n\r\n<bb-form-error *ngIf=\"!hideErrors\"\r\n               (errorChange)=\"onErrorChange($event)\">\r\n</bb-form-error>\r\n\r\n<!-- The file picker hint. -->\r\n<p *ngIf=\"hint as hintContent\"\r\n   class=\"bb-file-picker-hint\">\r\n    <ng-template [bbTemplate]=\"hintContent\">\r\n        {{ hintContent }}\r\n    </ng-template>\r\n</p>\r\n\r\n<!-- Upload icon. -->\r\n<ng-template #uploadIcon>\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n         class=\"bb-file-picker-icon\"\r\n         width=\"24\"\r\n         height=\"24\">\r\n        <path fill=\"currentColor\"\r\n              d=\"M2 12.5C2 9.46 4.46 7 7.5 7H18c2.21 0 4 1.79 4 4s-1.79 4-4 4H9.5a2.5 2.5 0 010-5H17v2H9.41c-.55 0-.55 1 0 1H18c1.1 0 2-.9 2-2s-.9-2-2-2H7.5C5.57 9 4 10.57 4 12.5S5.57 16 7.5 16H17v2H7.5C4.46 18 2 15.54 2 12.5z\"></path>\r\n        <path fill=\"none\" d=\"M0 0h24v24H0V0z\"></path>\r\n    </svg>\r\n</ng-template>\r\n\r\n<!-- Close icon. -->\r\n<ng-template #closeIcon>\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n         class=\"bb-file-picker-icon\"\r\n         width=\"24\"\r\n         height=\"24\">\r\n        <path fill=\"currentColor\"\r\n              d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\r\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n    </svg>\r\n</ng-template>\r\n",
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef((/**
                             * @return {?}
                             */
                            function () { return BbFilePicker; })),
                            multi: true
                        }
                    ],
                    host: {
                        'class': 'bb-file-picker',
                        '[class.required]': 'required',
                        '[class.disabled]': 'disabled',
                        '[class.grouped]': 'grouped',
                        '[class.hovered]': 'hovered',
                        '[class.error]': 'error'
                    },
                    animations: [
                        trigger('bbFilePickerImageAnimation', [
                            transition(':enter', [
                                style({ opacity: 0 }),
                                animate('200ms', style({ opacity: 1 }))
                            ]),
                            transition(':leave', [
                                animate('200ms', style({ opacity: 0 }))
                            ])
                        ])
                    ],
                    inputs: ['disabled', 'hideErrors', 'grouped', 'required'],
                    preserveWhitespaces: false,
                    styles: [".bb-file-picker{display:block}.bb-file-picker.disabled>.bb-file-picker-wrapper{cursor:default;background-color:rgba(204,204,204,.64)}.bb-file-picker.grouped{margin-bottom:20px}.bb-file-picker.full>.bb-file-picker-wrapper{width:100%}.bb-file-picker:not(.disabled) .bb-file-picker-button{background-color:#fff}.bb-file-picker:not(.disabled).hovered>.bb-file-picker-wrapper,.bb-file-picker:not(.disabled):focus>.bb-file-picker-wrapper{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-file-picker.required>.bb-file-picker-label:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5}.bb-file-picker.error>.bb-file-picker-label{color:#c23934}.bb-file-picker.error>.bb-file-picker-hint{display:none}.bb-file-picker.error>.bb-file-picker-wrapper{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-file-picker.error .bb-file-picker-button{background-color:transparent}.bb-file-picker-wrapper{max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:3px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;border:1px solid #b6bbc1;background-color:#fff8ff;transition:box-shadow .2s 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-file-picker-label{color:#000;display:block;position:relative;margin-bottom:4px}.bb-file-picker-input{opacity:0;z-index:-1;width:.1px;height:.1px;overflow:hidden;position:absolute}.bb-file-picker-container{min-height:38px;display:-ms-inline-flexbox;display:inline-flex}.bb-file-picker-button{margin:0;z-index:1;border:none;color:#2196f3;line-height:1;cursor:pointer;padding:0 12px;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-weight:500;-ms-flex-align:center;align-items:center;white-space:nowrap;display:-ms-inline-flexbox;display:inline-flex;border-top-left-radius:3px;border-bottom-left-radius:3px;border-right:1px solid #b6bbc1;background-color:rgba(255,255,255,.5);transition:box-shadow .2s cubic-bezier(0,0,.2,1)}.bb-file-picker-button:focus{box-shadow:0 0 0 3px rgba(0,123,255,.2)}.bb-file-picker-button:disabled{cursor:default}.bb-file-picker-button.destructive{color:#f55656}.bb-file-picker-button.standalone{width:100%;border-right:none;border-top-right-radius:3px;border-bottom-right-radius:3px}.bb-file-picker-icon{margin-right:4px}.bb-file-picker-zone{-ms-flex:1;flex:1;color:#848f99;font-size:14px;padding:8px 12px;line-height:18px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center}.bb-file-picker-info{height:0;color:#848f99;padding:0 12px;overflow:hidden;line-height:36px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;background-color:#fff8ff;border-top:0 solid #b6bbc1;transition:height .2s cubic-bezier(0,0,.2,1)}.bb-file-picker-info.visible{height:38px;border-top-width:1px}.bb-file-picker-info>span{opacity:.4;max-width:100%;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.bb-file-picker-info>span:first-child{-ms-flex:1;flex:1}.bb-file-picker-info>span:last-child{margin-left:12px}.bb-file-picker-image-container{overflow:hidden;border-top:1px solid #b6bbc1}.bb-file-picker-image-wrapper{width:100%;max-width:40%;margin:20px auto}.bb-file-picker-image{width:100%;display:-ms-flexbox;display:flex;overflow:hidden;position:relative;border-radius:4px;will-change:opacity;background-size:cover;background-position:center;background-repeat:no-repeat}.bb-file-picker-hint{display:block;color:#738694;font-size:13px;margin-top:4px}"]
                }] }
    ];
    BbFilePicker.propDecorators = {
        fileInput: [{ type: ViewChild, args: ['fileInput', { static: true },] }],
        extraTemplate: [{ type: ContentChild, args: ['extra', { static: false },] }],
        label: [{ type: Input }],
        hint: [{ type: Input }],
        accept: [{ type: Input }],
        showImages: [{ type: Input }],
        allowDragging: [{ type: Input }],
        value: [{ type: Input }],
        valueChange: [{ type: Output }],
        onDrag: [{ type: HostListener, args: ['dragover', ['$event', 'true'],] }, { type: HostListener, args: ['dragleave', ['$event', 'false'],] }],
        onDrop: [{ type: HostListener, args: ['drop', ['$event'],] }]
    };
    return BbFilePicker;
}(BbFilePickerMixinBase));
export { BbFilePicker };
if (false) {
    /** @type {?} */
    BbFilePicker.prototype.fileInput;
    /** @type {?} */
    BbFilePicker.prototype.extraTemplate;
    /** @type {?} */
    BbFilePicker.prototype.label;
    /** @type {?} */
    BbFilePicker.prototype.hint;
    /** @type {?} */
    BbFilePicker.prototype.accept;
    /** @type {?} */
    BbFilePicker.prototype.showImages;
    /** @type {?} */
    BbFilePicker.prototype.allowDragging;
    /** @type {?} */
    BbFilePicker.prototype.labelId;
    /** @type {?} */
    BbFilePicker.prototype.hovered;
    /** @type {?} */
    BbFilePicker.prototype.value$;
    /** @type {?} */
    BbFilePicker.prototype.valueChange;
    /** @type {?} */
    BbFilePicker.prototype.onTouchedCallback;
    /** @type {?} */
    BbFilePicker.prototype.onChangeCallback;
    /**
     * @type {?}
     * @private
     */
    BbFilePicker.prototype.saveFile;
    /**
     * @type {?}
     * @private
     */
    BbFilePicker.prototype.getFileListFromEvent;
    /**
     * @type {?}
     * @private
     */
    BbFilePicker.prototype.preventDefault;
}
//# sourceMappingURL=data:application/json;base64, 