ngx-surveys/esm2022/lib/form-item/form-item-file/file-list-item-image/file-list-item-image.component.mjs

Angular 18+ survey / form builder

import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/icon";
import * as i3 from "@angular/material/progress-bar";
import * as i4 from "../../../pipes/file-size.pipe";
import * as i5 from "../../../pipes/truncate.pipe";
export class FileListItemImageComponent {
    constructor() {
        this.onDelete = new EventEmitter();
    }
    ngOnInit() {
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FileListItemImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FileListItemImageComponent, selector: "ammo-file-list-item-image", inputs: { file: "file", allowDelete: "allowDelete", type: "type" }, outputs: { onDelete: "onDelete" }, ngImport: i0, template: "<div class=\"image-upload-item\" [ngClass]=\"{uploading: file.uploading}\">\n    <img [src]=\"file.src || file.url\" width=\"100%\" *ngIf=\"type==='image' && (file.src || file.url)\">\n    <mat-icon class=\"file-icon\" *ngIf=\"type!=='image'\">insert_drive_file</mat-icon>\n    <mat-progress-bar mode=\"determinate\"  *ngIf=\"file.uploading\" [value]=\"file.progressValue\"></mat-progress-bar>\n    <div class=\"file-upload-img-info\" *ngIf=\"file.size || file.name\">\n        <div *ngIf=\"file.size\">\n        Size: <span class=\"file-upload-img-info-value\" [innerHTML]=\"file.size| fileSize\"></span>\n        </div>\n        <div *ngIf=\"file.name\" >\n            <a [href]=\"file.url\" class=\"file-name\" target=\"_blank\" [title]=\"file.name\" *ngIf=\"!file.uploading\">{{file.name | truncate}}</a>\n            <span class=\"file-name\" *ngIf=\"file.uploading\">{{file.name | truncate}}</span>\n        </div>\n    </div>\n    <a class=\"delete-btn\" *ngIf=\"allowDelete\" (click)=\"onDelete.emit(file)\" title=\"Delete Image\"><mat-icon>cancel</mat-icon></a>\n</div>\n", styles: [".image-upload-item{padding:15px 10px;position:relative;margin-bottom:1rem;border:1px solid #c2c9d8;border-radius:4px;background-color:#fff;width:94px;margin-right:5px}.image-upload-item.uploading img{opacity:.5}.image-upload-item .file-upload-img-info{padding-top:10px;text-align:center;color:#9e9e9e}.image-upload-item .file-upload-img-info .file-upload-img-info-value{font-weight:500;color:#363e49}.image-upload-item .delete-btn{position:absolute;top:2px;right:2px;color:#c72939!important;cursor:pointer;font-size:20px}.image-upload-item .file-icon{width:95px;height:95px;display:block;font-size:95px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i4.FileSizePipe, name: "fileSize" }, { kind: "pipe", type: i5.TruncatePipe, name: "truncate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FileListItemImageComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ammo-file-list-item-image', template: "<div class=\"image-upload-item\" [ngClass]=\"{uploading: file.uploading}\">\n    <img [src]=\"file.src || file.url\" width=\"100%\" *ngIf=\"type==='image' && (file.src || file.url)\">\n    <mat-icon class=\"file-icon\" *ngIf=\"type!=='image'\">insert_drive_file</mat-icon>\n    <mat-progress-bar mode=\"determinate\"  *ngIf=\"file.uploading\" [value]=\"file.progressValue\"></mat-progress-bar>\n    <div class=\"file-upload-img-info\" *ngIf=\"file.size || file.name\">\n        <div *ngIf=\"file.size\">\n        Size: <span class=\"file-upload-img-info-value\" [innerHTML]=\"file.size| fileSize\"></span>\n        </div>\n        <div *ngIf=\"file.name\" >\n            <a [href]=\"file.url\" class=\"file-name\" target=\"_blank\" [title]=\"file.name\" *ngIf=\"!file.uploading\">{{file.name | truncate}}</a>\n            <span class=\"file-name\" *ngIf=\"file.uploading\">{{file.name | truncate}}</span>\n        </div>\n    </div>\n    <a class=\"delete-btn\" *ngIf=\"allowDelete\" (click)=\"onDelete.emit(file)\" title=\"Delete Image\"><mat-icon>cancel</mat-icon></a>\n</div>\n", styles: [".image-upload-item{padding:15px 10px;position:relative;margin-bottom:1rem;border:1px solid #c2c9d8;border-radius:4px;background-color:#fff;width:94px;margin-right:5px}.image-upload-item.uploading img{opacity:.5}.image-upload-item .file-upload-img-info{padding-top:10px;text-align:center;color:#9e9e9e}.image-upload-item .file-upload-img-info .file-upload-img-info-value{font-weight:500;color:#363e49}.image-upload-item .delete-btn{position:absolute;top:2px;right:2px;color:#c72939!important;cursor:pointer;font-size:20px}.image-upload-item .file-icon{width:95px;height:95px;display:block;font-size:95px}\n"] }]
        }], ctorParameters: () => [], propDecorators: { file: [{
                type: Input
            }], allowDelete: [{
                type: Input
            }], onDelete: [{
                type: Output
            }], type: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS1saXN0LWl0ZW0taW1hZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXN1cnZleXMvc3JjL2xpYi9mb3JtLWl0ZW0vZm9ybS1pdGVtLWZpbGUvZmlsZS1saXN0LWl0ZW0taW1hZ2UvZmlsZS1saXN0LWl0ZW0taW1hZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXN1cnZleXMvc3JjL2xpYi9mb3JtLWl0ZW0vZm9ybS1pdGVtLWZpbGUvZmlsZS1saXN0LWl0ZW0taW1hZ2UvZmlsZS1saXN0LWl0ZW0taW1hZ2UuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7OztBQVEvRSxNQUFNLE9BQU8sMEJBQTBCO0lBT25DO1FBSFUsYUFBUSxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7SUFHcEMsQ0FBQztJQUVqQixRQUFRO0lBQ1IsQ0FBQzsrR0FWUSwwQkFBMEI7bUdBQTFCLDBCQUEwQix3S0NSdkMsMGpDQWVBOzs0RkRQYSwwQkFBMEI7a0JBTHRDLFNBQVM7K0JBQ0UsMkJBQTJCO3dEQU0xQixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDSSxRQUFRO3NCQUFqQixNQUFNO2dCQUNFLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFN1cnZleUZpbGUgfSBmcm9tICcuLi8uLi9mb3JtLWl0ZW0nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhbW1vLWZpbGUtbGlzdC1pdGVtLWltYWdlJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2ZpbGUtbGlzdC1pdGVtLWltYWdlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZmlsZS1saXN0LWl0ZW0taW1hZ2UuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBGaWxlTGlzdEl0ZW1JbWFnZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgICBASW5wdXQoKSBmaWxlOiBTdXJ2ZXlGaWxlO1xuICAgIEBJbnB1dCgpIGFsbG93RGVsZXRlOiBib29sZWFuO1xuICAgIEBPdXRwdXQoKSBvbkRlbGV0ZSA9IG5ldyBFdmVudEVtaXR0ZXI8U3VydmV5RmlsZT4oKTtcbiAgICBASW5wdXQoKSB0eXBlOiBzdHJpbmc7XG5cbiAgICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgfVxuXG59XG4iLCI8ZGl2IGNsYXNzPVwiaW1hZ2UtdXBsb2FkLWl0ZW1cIiBbbmdDbGFzc109XCJ7dXBsb2FkaW5nOiBmaWxlLnVwbG9hZGluZ31cIj5cbiAgICA8aW1nIFtzcmNdPVwiZmlsZS5zcmMgfHwgZmlsZS51cmxcIiB3aWR0aD1cIjEwMCVcIiAqbmdJZj1cInR5cGU9PT0naW1hZ2UnICYmIChmaWxlLnNyYyB8fCBmaWxlLnVybClcIj5cbiAgICA8bWF0LWljb24gY2xhc3M9XCJmaWxlLWljb25cIiAqbmdJZj1cInR5cGUhPT0naW1hZ2UnXCI+aW5zZXJ0X2RyaXZlX2ZpbGU8L21hdC1pY29uPlxuICAgIDxtYXQtcHJvZ3Jlc3MtYmFyIG1vZGU9XCJkZXRlcm1pbmF0ZVwiICAqbmdJZj1cImZpbGUudXBsb2FkaW5nXCIgW3ZhbHVlXT1cImZpbGUucHJvZ3Jlc3NWYWx1ZVwiPjwvbWF0LXByb2dyZXNzLWJhcj5cbiAgICA8ZGl2IGNsYXNzPVwiZmlsZS11cGxvYWQtaW1nLWluZm9cIiAqbmdJZj1cImZpbGUuc2l6ZSB8fCBmaWxlLm5hbWVcIj5cbiAgICAgICAgPGRpdiAqbmdJZj1cImZpbGUuc2l6ZVwiPlxuICAgICAgICBTaXplOiA8c3BhbiBjbGFzcz1cImZpbGUtdXBsb2FkLWltZy1pbmZvLXZhbHVlXCIgW2lubmVySFRNTF09XCJmaWxlLnNpemV8IGZpbGVTaXplXCI+PC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiAqbmdJZj1cImZpbGUubmFtZVwiID5cbiAgICAgICAgICAgIDxhIFtocmVmXT1cImZpbGUudXJsXCIgY2xhc3M9XCJmaWxlLW5hbWVcIiB0YXJnZXQ9XCJfYmxhbmtcIiBbdGl0bGVdPVwiZmlsZS5uYW1lXCIgKm5nSWY9XCIhZmlsZS51cGxvYWRpbmdcIj57e2ZpbGUubmFtZSB8IHRydW5jYXRlfX08L2E+XG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cImZpbGUtbmFtZVwiICpuZ0lmPVwiZmlsZS51cGxvYWRpbmdcIj57e2ZpbGUubmFtZSB8IHRydW5jYXRlfX08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxhIGNsYXNzPVwiZGVsZXRlLWJ0blwiICpuZ0lmPVwiYWxsb3dEZWxldGVcIiAoY2xpY2spPVwib25EZWxldGUuZW1pdChmaWxlKVwiIHRpdGxlPVwiRGVsZXRlIEltYWdlXCI+PG1hdC1pY29uPmNhbmNlbDwvbWF0LWljb24+PC9hPlxuPC9kaXY+XG4iXX0=