import { Component, Output, Input, EventEmitter, ViewChild } from '@angular/core';
import { DropAreaComponent } from '../drop-area/drop-area.component';
import { isEmpty } from 'lodash-es';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "../forms/form-group.component";
import * as i3 from "../forms/required-input-placeholder.directive";
import * as i4 from "@angular/common";
import * as i5 from "../drop-area/drop-area.component";
import * as i6 from "../common/icon.directive";
import * as i7 from "ngx-bootstrap/popover";
import * as i8 from "../i18n/c8y-translate.pipe";
/**
 * User can upload a binary directly or use an URL.
 *
 * ## Usage
 *
 * ```html
 * <div>
 * <c8y-file-picker [maxAllowedFiles]="1" (onFilesPicked)="onFile($event)">
 * </c8y-file-picker>
 * </div>
 * ```
 */
export class FilePickerComponent {
    constructor() {
        this.onFilesPicked = new EventEmitter();
        this.maxAllowedFiles = Infinity;
        this.uploadChoice = 'uploadBinary';
        this.config = { maxlength: 2048 };
    }
    /**
     * @ignore
     */
    ngOnInit() {
        if (this.fileBinary) {
            this.droppedFiles = [this.fileBinary];
        }
    }
    /**
     * Triggered by dropped file in component and pass it into drop-area component.
     */
    onFileDropped(droppedFiles) {
        this.onFilesPicked.emit({
            droppedFiles
        });
    }
    /**
     * Triggered when user changes upload choice, from upload url to upload binary.
     */
    clearInputFromUrl() {
        delete this.fileUrl;
        this.fileToSave = {
            url: undefined
        };
        this.onFilesPicked.emit(this.fileToSave);
    }
    /**
     * Triggered when user changes upload choice, to avoid cumulation of droppedFiles.
     */
    clearSelectedFiles() {
        this.dropArea.onDelete();
        this.fileToSave = {
            droppedFiles: undefined
        };
        this.onFilesPicked.emit(this.fileToSave);
    }
    /**
     * Triggered when user puts binary's url to upload.
     */
    onFileUrlChange(urlStr) {
        this.fileToSave = {
            url: urlStr
        };
        this.onFilesPicked.emit(this.fileToSave);
    }
    /**
     * Checks if there is popover to display.
     */
    isPopoverUsed() {
        return !isEmpty(this.fileUrlPopover);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FilePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FilePickerComponent, selector: "c8y-file-picker", inputs: { maxAllowedFiles: "maxAllowedFiles", uploadChoice: "uploadChoice", fileUrl: "fileUrl", fileBinary: "fileBinary", config: "config", filePickerIndex: "filePickerIndex", fileUrlPopover: "fileUrlPopover" }, outputs: { onFilesPicked: "onFilesPicked" }, viewQueries: [{ propertyName: "dropArea", first: true, predicate: DropAreaComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <label title=\"{{ 'Upload a binary' | translate }}\" class=\"c8y-radio radio-inline\">\n    <input\n      #radio\n      type=\"radio\"\n      value=\"uploadBinary\"\n      name=\"uploadChoice-{{filePickerIndex}}\"\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label\n    title=\"{{ 'Provide a file path' | translate }}\"\n    class=\"c8y-radio radio-inline m-l-8\"\n    data-cy=\"file-picker--file-path-input\"\n  >\n    <input\n      #radio\n      type=\"radio\"\n      value=\"uploadUrl\"\n      name=\"uploadChoice-{{filePickerIndex}}\"\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    <button\n      class=\"btn-help\"\n      type=\"button\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ fileUrlPopover | translate }}\"\n      placement=\"top\"\n      triggers=\"focus\"\n      container=\"body\"\n      placement=\"top\"\n      *ngIf=\"isPopoverUsed()\"\n    ></button>\n  </label>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      (dropped)=\"onFileDropped($event)\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [attr.aria-label]=\"'Drop file or click to browse' | translate\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          name=\"fileUrl\"\n          data-cy=\"file-picker--fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          maxlength=\"{{ config.maxlength }}\"\n          required\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n", dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: i6.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i8.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FilePickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-file-picker', template: "<div class=\"form-group\">\n  <label title=\"{{ 'Upload a binary' | translate }}\" class=\"c8y-radio radio-inline\">\n    <input\n      #radio\n      type=\"radio\"\n      value=\"uploadBinary\"\n      name=\"uploadChoice-{{filePickerIndex}}\"\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label\n    title=\"{{ 'Provide a file path' | translate }}\"\n    class=\"c8y-radio radio-inline m-l-8\"\n    data-cy=\"file-picker--file-path-input\"\n  >\n    <input\n      #radio\n      type=\"radio\"\n      value=\"uploadUrl\"\n      name=\"uploadChoice-{{filePickerIndex}}\"\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    <button\n      class=\"btn-help\"\n      type=\"button\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ fileUrlPopover | translate }}\"\n      placement=\"top\"\n      triggers=\"focus\"\n      container=\"body\"\n      placement=\"top\"\n      *ngIf=\"isPopoverUsed()\"\n    ></button>\n  </label>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      (dropped)=\"onFileDropped($event)\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [attr.aria-label]=\"'Drop file or click to browse' | translate\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          name=\"fileUrl\"\n          data-cy=\"file-picker--fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          maxlength=\"{{ config.maxlength }}\"\n          required\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n" }]
        }], propDecorators: { dropArea: [{
                type: ViewChild,
                args: [DropAreaComponent, { static: true }]
            }], onFilesPicked: [{
                type: Output
            }], maxAllowedFiles: [{
                type: Input
            }], uploadChoice: [{
                type: Input
            }], fileUrl: [{
                type: Input
            }], fileBinary: [{
                type: Input
            }], config: [{
                type: Input
            }], filePickerIndex: [{
                type: Input
            }], fileUrlPopover: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 