cocori-ng/esm2020/src/feature-form/shared/component/uploader/cocoring-uploader.component.mjs

Cocori-ng is an Angular full of great components & utilites based on Material

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { ExtendInputsComponent } from '../form/inputs/extend-inputs/extend-inputs.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/material/list";
import * as i4 from "@angular/material/form-field";
import * as i5 from "../error-handler/input-error-handler/cocoring-input-error.component";
import * as i6 from "./cocoring-uploader-list-file/cocoring-uploader-list-file.component";
export class CocoringUploaderComponent extends ExtendInputsComponent {
    constructor(injector) {
        super(injector);
    }
    set config(config) {
        if (!config) {
            throw new Error(`La config du composant uploader n'est pas correcte... config: ${config}`);
        }
        this.configInput(config);
        this.addArrayForm();
        this.apisFile = { apiFile: config.apiFile, apiFileDownload: config.apiFileDownload };
    }
    ngOnInit() { }
    ngOnDestroy() { }
}
CocoringUploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CocoringUploaderComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
CocoringUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: CocoringUploaderComponent, selector: "cocoring-uploader", inputs: { config: "config" }, usesInheritance: true, ngImport: i0, template: "<div class=\"upload-drop\">\r\n  <mat-selection-list [multiple]=\"false\">\r\n    <div mat-subheader>{{nameLabel}}</div>\r\n    <ng-container *ngIf=\"dataSource$ | async as files; else loadingTpl\">\r\n      <cocoring-uploader-list-file *ngFor=\"let file of files\" [formGroup]=\"formGroup\" [nameControl]=\"nameControl\"\r\n        [apisFile]=\"apisFile\" [fileModel]=\"file\">\r\n      </cocoring-uploader-list-file>\r\n    </ng-container>\r\n    <ng-template #loadingTpl>\r\n      <div class=\"fake-list-file\" *ngFor=\"let i of [].constructor(2)\">\r\n        <div class=\"fake-icon loading-animation\"></div>\r\n        <div class=\"fake-file-infos\">\r\n          <div class=\"fake-info info-name loading-animation\"></div>\r\n          <div class=\"fake-info loading-animation\"></div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <!-- #todo: normalement pas n\u00E9cessaire ce ngIf, mais l\u00E0 le message ne dispara\u00EEt pas... -->\r\n    <mat-error *ngIf=\"formGroup.get(nameControl).errors\" error-handler [form]=\"formGroup\" [controlName]=\"nameControl\">\r\n    </mat-error>\r\n  </mat-selection-list>\r\n  <!-- {{formGroup.get(nameControl).value | json}} -->\r\n</div>", styles: [":host{display:block}.upload-drop{width:100%}.fake-list-file{max-width:300px;padding:16px;display:flex;align-items:center}.fake-list-file .fake-icon{height:27px;width:27px;margin-left:5px;border-radius:50%}.fake-list-file .fake-file-infos{display:flex;flex-direction:column;margin:0 20px;flex:1}.fake-list-file .fake-file-infos .fake-info{height:16px}.fake-list-file .fake-file-infos .fake-info.info-name{margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i3.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.CocoringInputErrorComponent, selector: "[error-handler]", inputs: ["form", "controlName"] }, { kind: "component", type: i6.CocoringUploaderListFileComponent, selector: "cocoring-uploader-list-file", inputs: ["formGroup", "nameControl", "fileModel", "apisFile"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CocoringUploaderComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'cocoring-uploader', template: "<div class=\"upload-drop\">\r\n  <mat-selection-list [multiple]=\"false\">\r\n    <div mat-subheader>{{nameLabel}}</div>\r\n    <ng-container *ngIf=\"dataSource$ | async as files; else loadingTpl\">\r\n      <cocoring-uploader-list-file *ngFor=\"let file of files\" [formGroup]=\"formGroup\" [nameControl]=\"nameControl\"\r\n        [apisFile]=\"apisFile\" [fileModel]=\"file\">\r\n      </cocoring-uploader-list-file>\r\n    </ng-container>\r\n    <ng-template #loadingTpl>\r\n      <div class=\"fake-list-file\" *ngFor=\"let i of [].constructor(2)\">\r\n        <div class=\"fake-icon loading-animation\"></div>\r\n        <div class=\"fake-file-infos\">\r\n          <div class=\"fake-info info-name loading-animation\"></div>\r\n          <div class=\"fake-info loading-animation\"></div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <!-- #todo: normalement pas n\u00E9cessaire ce ngIf, mais l\u00E0 le message ne dispara\u00EEt pas... -->\r\n    <mat-error *ngIf=\"formGroup.get(nameControl).errors\" error-handler [form]=\"formGroup\" [controlName]=\"nameControl\">\r\n    </mat-error>\r\n  </mat-selection-list>\r\n  <!-- {{formGroup.get(nameControl).value | json}} -->\r\n</div>", styles: [":host{display:block}.upload-drop{width:100%}.fake-list-file{max-width:300px;padding:16px;display:flex;align-items:center}.fake-list-file .fake-icon{height:27px;width:27px;margin-left:5px;border-radius:50%}.fake-list-file .fake-file-infos{display:flex;flex-direction:column;margin:0 20px;flex:1}.fake-list-file .fake-file-infos .fake-info{height:16px}.fake-list-file .fake-file-infos .fake-info.info-name{margin-bottom:5px}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { config: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29jb3JpbmctdXBsb2FkZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29jb3JpLW5nL3NyYy9mZWF0dXJlLWZvcm0vc2hhcmVkL2NvbXBvbmVudC91cGxvYWRlci9jb2NvcmluZy11cGxvYWRlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb2Nvcmktbmcvc3JjL2ZlYXR1cmUtZm9ybS9zaGFyZWQvY29tcG9uZW50L3VwbG9hZGVyL2NvY29yaW5nLXVwbG9hZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQVksS0FBSyxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUd2RyxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSxzREFBc0QsQ0FBQzs7Ozs7Ozs7QUFhN0YsTUFBTSxPQUFPLHlCQUEwQixTQUFRLHFCQUFxQjtJQWdCbEUsWUFBWSxRQUFrQjtRQUM1QixLQUFLLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDbEIsQ0FBQztJQWZELElBQ0ksTUFBTSxDQUFDLE1BQTJCO1FBQ3BDLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDWCxNQUFNLElBQUksS0FBSyxDQUFDLGlFQUFpRSxNQUFNLEVBQUUsQ0FBQyxDQUFDO1NBQzVGO1FBRUQsSUFBSSxDQUFDLFdBQVcsQ0FBQyxNQUFNLENBQUMsQ0FBQTtRQUV4QixJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7UUFFcEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLE9BQU8sRUFBRSxNQUFNLENBQUMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLENBQUMsZUFBZSxFQUFFLENBQUE7SUFDdEYsQ0FBQztJQU1ELFFBQVEsS0FBSyxDQUFDO0lBRWQsV0FBVyxLQUFLLENBQUM7O3NIQXRCTix5QkFBeUI7MEdBQXpCLHlCQUF5Qiw4R0NoQnRDLHNyQ0FzQk07MkZETk8seUJBQXlCO2tCQU5yQyxTQUFTO3NDQUNTLHVCQUF1QixDQUFDLE1BQU0sWUFDckMsbUJBQW1COytGQVF6QixNQUFNO3NCQURULEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbmplY3RvciwgSW5wdXQsIE9uRGVzdHJveSwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IENvbmZpZ0FQSXNGaWxlLCBDb25maWdVcGxvYWRlck1vZGVsIH0gZnJvbSAnY29jb3JpLW5nL3NyYy9mZWF0dXJlLWNvcmUnO1xyXG5cclxuaW1wb3J0IHsgRXh0ZW5kSW5wdXRzQ29tcG9uZW50IH0gZnJvbSAnLi4vZm9ybS9pbnB1dHMvZXh0ZW5kLWlucHV0cy9leHRlbmQtaW5wdXRzLmNvbXBvbmVudCc7XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIFNlY3Rpb24ge1xyXG4gIG5hbWU6IHN0cmluZztcclxuICB1cGRhdGVkOiBEYXRlO1xyXG59XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcclxuICBzZWxlY3RvcjogJ2NvY29yaW5nLXVwbG9hZGVyJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vY29jb3JpbmctdXBsb2FkZXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2NvY29yaW5nLXVwbG9hZGVyLmNvbXBvbmVudC5zY3NzJ10sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDb2NvcmluZ1VwbG9hZGVyQ29tcG9uZW50IGV4dGVuZHMgRXh0ZW5kSW5wdXRzQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xyXG4gIGFwaXNGaWxlOiBDb25maWdBUElzRmlsZTtcclxuXHJcbiAgQElucHV0KClcclxuICBzZXQgY29uZmlnKGNvbmZpZzogQ29uZmlnVXBsb2FkZXJNb2RlbCkge1xyXG4gICAgaWYgKCFjb25maWcpIHtcclxuICAgICAgdGhyb3cgbmV3IEVycm9yKGBMYSBjb25maWcgZHUgY29tcG9zYW50IHVwbG9hZGVyIG4nZXN0IHBhcyBjb3JyZWN0ZS4uLiBjb25maWc6ICR7Y29uZmlnfWApO1xyXG4gICAgfVxyXG5cclxuICAgIHRoaXMuY29uZmlnSW5wdXQoY29uZmlnKVxyXG5cclxuICAgIHRoaXMuYWRkQXJyYXlGb3JtKCk7XHJcblxyXG4gICAgdGhpcy5hcGlzRmlsZSA9IHsgYXBpRmlsZTogY29uZmlnLmFwaUZpbGUsIGFwaUZpbGVEb3dubG9hZDogY29uZmlnLmFwaUZpbGVEb3dubG9hZCB9XHJcbiAgfVxyXG5cclxuICBjb25zdHJ1Y3RvcihpbmplY3RvcjogSW5qZWN0b3IpIHtcclxuICAgIHN1cGVyKGluamVjdG9yKTtcclxuICB9XHJcblxyXG4gIG5nT25Jbml0KCkgeyB9XHJcblxyXG4gIG5nT25EZXN0cm95KCkgeyB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cInVwbG9hZC1kcm9wXCI+XHJcbiAgPG1hdC1zZWxlY3Rpb24tbGlzdCBbbXVsdGlwbGVdPVwiZmFsc2VcIj5cclxuICAgIDxkaXYgbWF0LXN1YmhlYWRlcj57e25hbWVMYWJlbH19PC9kaXY+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiZGF0YVNvdXJjZSQgfCBhc3luYyBhcyBmaWxlczsgZWxzZSBsb2FkaW5nVHBsXCI+XHJcbiAgICAgIDxjb2NvcmluZy11cGxvYWRlci1saXN0LWZpbGUgKm5nRm9yPVwibGV0IGZpbGUgb2YgZmlsZXNcIiBbZm9ybUdyb3VwXT1cImZvcm1Hcm91cFwiIFtuYW1lQ29udHJvbF09XCJuYW1lQ29udHJvbFwiXHJcbiAgICAgICAgW2FwaXNGaWxlXT1cImFwaXNGaWxlXCIgW2ZpbGVNb2RlbF09XCJmaWxlXCI+XHJcbiAgICAgIDwvY29jb3JpbmctdXBsb2FkZXItbGlzdC1maWxlPlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcbiAgICA8bmctdGVtcGxhdGUgI2xvYWRpbmdUcGw+XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJmYWtlLWxpc3QtZmlsZVwiICpuZ0Zvcj1cImxldCBpIG9mIFtdLmNvbnN0cnVjdG9yKDIpXCI+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImZha2UtaWNvbiBsb2FkaW5nLWFuaW1hdGlvblwiPjwvZGl2PlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJmYWtlLWZpbGUtaW5mb3NcIj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJmYWtlLWluZm8gaW5mby1uYW1lIGxvYWRpbmctYW5pbWF0aW9uXCI+PC9kaXY+XHJcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmFrZS1pbmZvIGxvYWRpbmctYW5pbWF0aW9uXCI+PC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgPC9uZy10ZW1wbGF0ZT5cclxuICAgIDwhLS0gI3RvZG86IG5vcm1hbGVtZW50IHBhcyBuw6ljZXNzYWlyZSBjZSBuZ0lmLCBtYWlzIGzDoCBsZSBtZXNzYWdlIG5lIGRpc3BhcmHDrnQgcGFzLi4uIC0tPlxyXG4gICAgPG1hdC1lcnJvciAqbmdJZj1cImZvcm1Hcm91cC5nZXQobmFtZUNvbnRyb2wpLmVycm9yc1wiIGVycm9yLWhhbmRsZXIgW2Zvcm1dPVwiZm9ybUdyb3VwXCIgW2NvbnRyb2xOYW1lXT1cIm5hbWVDb250cm9sXCI+XHJcbiAgICA8L21hdC1lcnJvcj5cclxuICA8L21hdC1zZWxlY3Rpb24tbGlzdD5cclxuICA8IS0tIHt7Zm9ybUdyb3VwLmdldChuYW1lQ29udHJvbCkudmFsdWUgfCBqc29ufX0gLS0+XHJcbjwvZGl2PiJdfQ==