import { __decorate, __extends } from "tslib";
import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, forwardRef, HostListener, Input, Output, 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';
var nextUniqueId = 0;
var BbFilePickerBase = /** @class */ (function () {
    function BbFilePickerBase() {
    }
    return BbFilePickerBase;
}());
var BbFilePickerMixinBase = mixinRequired(mixinDisabled(mixinGrouped(mixinError(mixinHideErrors(BbFilePickerBase)))));
var BbFilePicker = /** @class */ (function (_super) {
    __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 = function () {
        };
        _this.onChangeCallback = function () {
        };
        _this.saveFile = function (files) {
            // Validate the files exist.
            if (!files) {
                return;
            }
            // Retrieve the first file.
            var file = files[0];
            // Validate the first file exists.
            if (!file) {
                return;
            }
            // Save the file.
            _this.value = file;
        };
        _this.getFileListFromEvent = function (event) {
            var element = event.target;
            if (!element) {
                return null;
            }
            return element.files;
        };
        _this.preventDefault = function (event) {
            event.preventDefault();
            event.stopPropagation();
        };
        return _this;
    }
    BbFilePicker_1 = BbFilePicker;
    Object.defineProperty(BbFilePicker.prototype, "value", {
        get: function () {
            var file = this.value$.getValue().file;
            return file;
        },
        set: function (value) {
            this.value$.next({ file: value });
            this.valueChange.emit(value);
        },
        enumerable: true,
        configurable: true
    });
    BbFilePicker.prototype.onDrag = 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;
    };
    BbFilePicker.prototype.onDrop = 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);
    };
    BbFilePicker.prototype.onButtonPressed = function (file) {
        if (file) {
            this.value = null;
            this.onChangeCallback(this.value);
            return;
        }
        return this.openFilePicker();
    };
    BbFilePicker.prototype.openFilePicker = function () {
        return this.fileInput
            && this.fileInput.nativeElement
            && this.fileInput.nativeElement.click
            && this.fileInput.nativeElement.click();
    };
    BbFilePicker.prototype.onFileChange = function (event) {
        // Validate the input is not disabled.
        if (this.disabled) {
            return;
        }
        // Extract the file from the event.
        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 = '';
        }
    };
    BbFilePicker.prototype.writeValue = function (value) {
        this.value = value;
    };
    BbFilePicker.prototype.registerOnChange = function (method) {
        this.onChangeCallback = method;
    };
    BbFilePicker.prototype.registerOnTouched = function (method) {
        this.onTouchedCallback = method;
    };
    BbFilePicker.prototype.setDisabledState = function (isDisabled) {
        this.disabled = isDisabled;
    };
    BbFilePicker.prototype.onErrorChange = function (error) {
        this.error = !!error;
    };
    var BbFilePicker_1;
    __decorate([
        ViewChild('fileInput', { static: true })
    ], BbFilePicker.prototype, "fileInput", void 0);
    __decorate([
        ContentChild('extra')
    ], BbFilePicker.prototype, "extraTemplate", void 0);
    __decorate([
        Input()
    ], BbFilePicker.prototype, "label", void 0);
    __decorate([
        Input()
    ], BbFilePicker.prototype, "hint", void 0);
    __decorate([
        Input()
    ], BbFilePicker.prototype, "accept", void 0);
    __decorate([
        Input()
    ], BbFilePicker.prototype, "showImages", void 0);
    __decorate([
        Input()
    ], BbFilePicker.prototype, "allowDragging", void 0);
    __decorate([
        Input()
    ], BbFilePicker.prototype, "value", null);
    __decorate([
        Output()
    ], BbFilePicker.prototype, "valueChange", void 0);
    __decorate([
        HostListener('dragover', ['$event', 'true']),
        HostListener('dragleave', ['$event', 'false'])
    ], BbFilePicker.prototype, "onDrag", null);
    __decorate([
        HostListener('drop', ['$event'])
    ], BbFilePicker.prototype, "onDrop", null);
    BbFilePicker = BbFilePicker_1 = __decorate([
        Component({
            selector: 'bb-file-picker',
            template: "<!-- The label of the input. -->\n<label *ngIf=\"label as labelContent\"\n       [for]=\"labelId\"\n       class=\"bb-file-picker-label\">\n    <ng-template [bbTemplate]=\"labelContent\">\n        {{ labelContent }}\n    </ng-template>\n</label>\n\n<!-- The input that can open the file picker. -->\n<input #fileInput\n       [accept]=\"accept\"\n       [disabled]=\"disabled\"\n       (change)=\"onFileChange($event)\"\n       class=\"bb-file-picker-input\"\n       type=\"file\"\n       tabindex=\"-1\">\n\n<div *ngIf=\"value$ | async as data\"\n     class=\"bb-file-picker-wrapper\">\n    <!-- The button that accepts files. -->\n    <div class=\"bb-file-picker-container\">\n        <button [class.destructive]=\"!!data?.file\"\n                [class.standalone]=\"!allowDragging\"\n                [disabled]=\"disabled\"\n                [id]=\"labelId\"\n                (click)=\"onButtonPressed(data?.file)\"\n                type=\"button\"\n                class=\"bb-file-picker-button\">\n            <ng-container *ngTemplateOutlet=\"data?.file ? closeIcon : uploadIcon\"></ng-container>\n            {{ (data?.file ? 'file-picker.remove' : 'file-picker.choose') | bbLocalize }}\n        </button>\n        <div *ngIf=\"allowDragging\"\n             class=\"bb-file-picker-zone\">\n            {{ 'file-picker.drop' | bbLocalize }}\n        </div>\n    </div>\n\n    <ng-container *ngIf=\"!!extraTemplate\">\n        <ng-container *ngTemplateOutlet=\"extraTemplate; context: {$implicit: data?.file}\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"showImages\">\n        <div *ngIf=\"data?.file | bbFileImage | async as image\"\n             class=\"bb-file-picker-image-container\">\n            <div class=\"bb-file-picker-image-wrapper\">\n                <div [@bbFilePickerImageAnimation]=\"true\"\n                     [style.padding-top.%]=\"image?.aspectRatio * 100\"\n                     [style.background-image]=\"image?.background\"\n                     class=\"bb-file-picker-image\">\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <!-- Extra information of the file. -->\n    <div [class.visible]=\"!!data?.file\"\n         class=\"bb-file-picker-info\">\n        <span *ngIf=\"data?.file?.name as name\">{{ name }}</span>\n        <span *ngIf=\"data?.file?.size as size\">{{ size | bbFileSize }}</span>\n    </div>\n</div>\n\n<bb-form-error *ngIf=\"!hideErrors\"\n               (errorChange)=\"onErrorChange($event)\">\n</bb-form-error>\n\n<!-- The file picker hint. -->\n<p *ngIf=\"hint as hintContent\"\n   class=\"bb-file-picker-hint\">\n    <ng-template [bbTemplate]=\"hintContent\">\n        {{ hintContent }}\n    </ng-template>\n</p>\n\n<!-- Upload icon. -->\n<ng-template #uploadIcon>\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"bb-file-picker-icon\"\n         width=\"24\"\n         height=\"24\">\n        <path fill=\"currentColor\"\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>\n        <path fill=\"none\" d=\"M0 0h24v24H0V0z\"></path>\n    </svg>\n</ng-template>\n\n<!-- Close icon. -->\n<ng-template #closeIcon>\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"bb-file-picker-icon\"\n         width=\"24\"\n         height=\"24\">\n        <path fill=\"currentColor\"\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>\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n    </svg>\n</ng-template>\n",
            changeDetection: ChangeDetectionStrategy.OnPush,
            encapsulation: ViewEncapsulation.None,
            providers: [
                {
                    provide: NG_VALUE_ACCESSOR,
                    useExisting: forwardRef(function () { return BbFilePicker_1; }),
                    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:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border:1px solid #b6bbc1;background-color:#fff8ff;-webkit-transition:box-shadow .2s cubic-bezier(0,0,.2,1);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:-webkit-inline-box;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;-webkit-box-align:center;-ms-flex-align:center;align-items:center;white-space:nowrap;display:-webkit-inline-box;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);-webkit-transition:box-shadow .2s cubic-bezier(0,0,.2,1);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{-webkit-box-flex:1;-ms-flex:1;flex:1;color:#848f99;font-size:14px;padding:8px 12px;line-height:18px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.bb-file-picker-info{height:0;color:#848f99;padding:0 12px;overflow:hidden;line-height:36px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;background-color:#fff8ff;border-top:0 solid #b6bbc1;-webkit-transition:height .2s cubic-bezier(0,0,.2,1);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{-webkit-box-flex:1;-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:-webkit-box;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);
    return BbFilePicker;
}(BbFilePickerMixinBase));
export { BbFilePicker };
//# sourceMappingURL=data:application/json;base64, 