import { __decorate } from "tslib";
import { Component, Input } from '@angular/core';
import { EntityFileFormComponent } from './entity-file-form/entity-file-form.component';
import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
import { debounceTime } from 'rxjs/operators';
import { ActionPopupComponent } from '../action-popup/action-popup.component';
import { TechlifyTaggerTagFormConfigModel } from "../techlify-tagger-tag-form-field/techlify-tagger-tag-form-config.model";
import { UserTypeEnum } from "../user/user-type.enum";
import * as i0 from "@angular/core";
import * as i1 from "./entity-file.service";
import * as i2 from "@angular/common";
import * as i3 from "../core/alert.service";
import * as i4 from "@angular/material/dialog";
import * as i5 from "@angular/forms";
import * as i6 from "../core/error-handler.service";
import * as i7 from "../user";
import * as i8 from "@angular/flex-layout/flex";
import * as i9 from "@angular/flex-layout/extended";
import * as i10 from "../file-dropper/file-dropper.component";
import * as i11 from "../document-viewer/document-viewer.component";
import * as i12 from "ngx-infinite-scroll";
import * as i13 from "@angular/material/button";
import * as i14 from "@angular/material/checkbox";
import * as i15 from "@angular/material/form-field";
import * as i16 from "@angular/material/icon";
import * as i17 from "@angular/material/input";
import * as i18 from "@angular/material/sort";
import * as i19 from "@angular/material/table";
import * as i20 from "@angular/material/card";
import * as i21 from "@angular/material/chips";
import * as i22 from "@angular/material/tooltip";
import * as i23 from "@angular/material/progress-bar";
import * as i24 from "../techlify-tagger-tag-form-field/techlify-tagger-tag-form-field.component";
import * as i25 from "../read-more/read-more.component";
let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
    constructor(entityFileService, location, alertService, dialog, fb, errorHandler, currentUserService) {
        this.entityFileService = entityFileService;
        this.location = location;
        this.alertService = alertService;
        this.dialog = dialog;
        this.fb = fb;
        this.errorHandler = errorHandler;
        this.currentUserService = currentUserService;
        this.viewOnly = false;
        this.allowMultipleFiles = false;
        this.allowBulkUpdate = false;
        this.documentIds = [];
        this.isAllSelected = false;
        /**
         * Should we allow tagging entity-files?
         */
        this.useTechlifyTags = false;
        this.techlifyTagCategories = [];
        this.techlifyTagConfig = new TechlifyTaggerTagFormConfigModel();
        this.title = "File";
        this.filters = {};
        this.entityFiles = [];
        this.displayedColumns = [
            'index',
            'title',
            'details',
            'file_size',
            'uploaded_on',
        ];
        this.isWorking = false;
        this.page = 1;
        this.perPage = 25;
        this.lastPage = 0;
        this.fileList = [];
        this.isReload = false;
        this.isShowCreateAction = true;
        this.isShowUpdateAction = true;
        this.isShowDeleteAction = true;
        this.isShowReadAction = true;
        this.user = this.currentUserService.getUser();
        this.filterFormGroup = this.fb.group({
            title: [""],
            tag_ids: [""]
        });
        this.updateRowForm = this.fb.group({
            title: [''],
            details: [''],
            tag_ids: [''],
        });
    }
    ngOnInit() {
        // Check permissions
        if (this.user.user_type_id !== UserTypeEnum.CLIENT_ADMIN) {
            this.isShowCreateAction = this.permission?.create ? this.currentUserService.hasPermission(this.permission.create) : true;
            this.isShowUpdateAction = this.permission?.update ? this.currentUserService.hasPermission(this.permission.update) : true;
            this.isShowReadAction = this.permission?.read ? this.currentUserService.hasPermission(this.permission.read) : true;
            this.isShowDeleteAction = this.permission?.delete ? this.currentUserService.hasPermission(this.permission.delete) : true;
        }
        // File dropper config
        this.fileConfig = {
            fileId: "entityDashboardDropper",
            containerId: "entityDashboardDropperContainer",
            styles: {
                height: "500px"
            },
            multiple: this.allowMultipleFiles,
            acceptFile: "*",
            maxSize: 10,
            acceptFileText: "All Files"
        };
        this.viewerConfig = {
            imageStyle: {
                height: '200px',
                width: '200px'
            },
            viewerStyle: {
                height: ' 160px',
                width: '200px'
            },
            hideRemove: true
        };
        if (this.hideTitleAndDetails) {
            this.displayedColumns = this.displayedColumns.filter(x => (x !== 'details') && (x !== 'title'));
        }
        this.listenRoutes();
        this.filters = {
            entity_type: this.entityType,
            entity_id: this.entityId,
            title: ""
        };
        this.fetchEntityFilesDetails();
        if (this.useTechlifyTags) {
            this.displayedColumns.push('tag');
        }
        if (!this.viewOnly) {
            this.displayedColumns.push('actions');
        }
        if (this.allowBulkUpdate) {
            this.displayedColumns.push('select');
        }
    }
    listenRoutes() {
        this.filterFormGroup.valueChanges.pipe(debounceTime(500), untilDestroyed(this))
            .subscribe(changes => {
            this.reload();
        });
    }
    fetchEntityFilesDetails() {
        this.filters.page = this.page;
        this.filters.perPage = this.perPage;
        const formGroup = this.filterFormGroup.value;
        formGroup.tag_ids = formGroup.tag_ids.toString();
        this.filters = {
            ...this.filters,
            ...formGroup,
            with: 'creator,tags'
        };
        this.isWorking = true;
        this.entityFileService.index(this.filters).subscribe({
            next: (result) => {
                this.lastPage = result.last_page || this.page;
                this.entityFiles = this.entityFiles.concat(result.data);
                this.isWorking = false;
            },
            error: () => this.isWorking = false
        });
    }
    addEntityFile() {
        this.isWorking = true;
        const dialogRef = this.dialog.open(EntityFileFormComponent, {
            width: "700px",
            data: {
                entity: this.filters,
                hideTitleAndDetails: this.hideTitleAndDetails,
                useTechlifyTags: this.useTechlifyTags,
                techlifyTagCategories: this.techlifyTagCategories,
                techlifyTagConfig: this.techlifyTagConfig,
            },
            autoFocus: false,
            restoreFocus: false
        });
        dialogRef.afterClosed().subscribe(async (result) => {
            this.isWorking = false;
            if (result) {
                this.reload();
            }
        });
    }
    editEntityFile(file) {
        this.isWorking = true;
        const dialogRef = this.dialog.open(EntityFileFormComponent, {
            width: "700px",
            autoFocus: false,
            data: {
                file,
                hideTitleAndDetails: this.hideTitleAndDetails,
                useTechlifyTags: this.useTechlifyTags,
                techlifyTagCategories: this.techlifyTagCategories,
                techlifyTagConfig: this.techlifyTagConfig,
            } // Any data passed here will be injected into the model
        });
        dialogRef.afterClosed().subscribe(result => {
            this.isWorking = false;
            if (result) {
                this.reload();
            }
        });
    }
    deleteEntityFile(file) {
        const dialogRef = this.dialog.open(ActionPopupComponent, {
            width: "400px",
            data: {
                title: "Delete File",
                message: `Are you sure to proceed delete the file ${file.title}?`
            },
            autoFocus: false
        });
        dialogRef.afterClosed().subscribe(async (result) => {
            if (result) {
                //Action confirmed
                const result = await this.entityFileService.deleteEntityFile(file);
                this.alertService.addAlert("File successfully deleted", "success");
                this.reload();
            }
        });
    }
    onScroll() {
        if (this.page < this.lastPage && !this.isWorking) {
            this.page += 1;
            this.fetchEntityFilesDetails();
        }
    }
    reload() {
        this.entityFiles = [];
        this.documentIds = [];
        this.isReload = false;
        this.page = 1;
        if (!this.isWorking) {
            this.fetchEntityFilesDetails();
        }
    }
    ngOnDestroy() { }
    resetFieldValue(event, field) {
        event.stopPropagation();
        this.filterFormGroup.get(field).setValue("");
    }
    sizeOf(bytes) {
        if (!bytes) {
            return "0.00 B";
        }
        var e = Math.floor(Math.log(bytes) / Math.log(1024));
        return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
    }
    async fileChanged(event) {
        this.fileList = event;
        if (this.fileList.length > 0) {
            await this.fileList.forEach(async (file) => {
                const result = await this.entityFileService.uploadEntityFile(file, {
                    entity_type: this.entityType,
                    entity_id: this.entityId,
                });
                this.reload();
            });
            this.fileList = [];
            this.alertService.addAlert('Files uploaded successfully!', 'success');
        }
    }
    selectAll() {
        this.documentIds = [];
        this.entityFiles.map((employee) => {
            employee.is_selected = this.isAllSelected;
            if (this.isAllSelected) {
                this.documentIds.push(employee.id);
            }
        });
        this.entityFiles = [...this.entityFiles];
    }
    employeeListModified(event, employee) {
        this.isAllSelected = false;
        if (event.checked) {
            this.documentIds.push(employee.id);
        }
        else {
            this.documentIds = this.documentIds.filter((employeeData) => employeeData != employee.id);
        }
    }
    unCheckAll() {
        this.isAllSelected = false;
        this.documentIds = [];
        this.entityFiles.map((employee) => {
            employee.is_selected = false;
        });
        this.entityFiles = [...this.entityFiles];
    }
    resetFieldValueOfRow(field, event) {
        event.stopPropagation();
        this.updateRowForm.get(field).setValue("");
    }
    async bulkUpdate(fieldName) {
        var data = this.updateRowForm.value;
        this.isReload = this.isWorking = true;
        data.field_name = fieldName;
        data.document_ids = this.documentIds;
        try {
            await this.entityFileService.bulkUpdate(data).then(res => {
                this.alertService.addAlert("Successfully updated", "success");
                this.isWorking = false;
            });
        }
        catch (error) {
            this.errorHandler.handleError(error);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EntityFilesViewAllComponent, deps: [{ token: i1.EntityFileService }, { token: i2.Location }, { token: i3.AlertService }, { token: i4.MatDialog }, { token: i5.UntypedFormBuilder }, { token: i6.ErrorHandlerService }, { token: i7.CurrentUserService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EntityFilesViewAllComponent, selector: "app-entity-files-view-all", inputs: { entityId: "entityId", entityType: "entityType", viewOnly: "viewOnly", removeSearch: "removeSearch", hideTitleAndDetails: "hideTitleAndDetails", displayMode: "displayMode", allowMultipleFiles: "allowMultipleFiles", allowBulkUpdate: "allowBulkUpdate", useTechlifyTags: "useTechlifyTags", techlifyTagCategories: "techlifyTagCategories", techlifyTagConfig: "techlifyTagConfig", title: "title", permission: "permission" }, ngImport: i0, template: "<div>\n  <div fxLayout=\"column\" [fxHide]=\"!this.documentIds.length\" fxHide.xs fxHide.sm fxHide.lt-md>\n    <mat-card class=\"update_card\" *ngIf=\"this.documentIds.length\">\n      <mat-card-header>\n        <mat-card-title>\n          <div mat-dialog-title class=\"mt-2 ml-2 text-center\">\n            <div>Update Selected Rows</div>\n          </div>\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content fxLayout=\"column\">\n        <form [formGroup]=\"updateRowForm\">\n          <div fxLayout=\"column\">\n\n            <mat-form-field fxFlex=\"100%\" class=\"px-1\">\n              <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" />\n              <button *ngIf=\"updateRowForm.get('title').value || updateRowForm.get('title').value===0\" matSuffix\n                mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('title', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('title').value || updateRowForm.get('title').value===0)\n                && updateRowForm.get('title').valid\" (click)=\"bulkUpdate('title')\">\n                <mat-icon>done</mat-icon>\n              </button>\n            </mat-form-field>\n\n            <mat-form-field fxFlex=\"100%\" class=\"px-1\">\n              <textarea matInput formControlName=\"details\" placeholder=\"Details\" autocomplete=\"off\"></textarea>\n              <button *ngIf=\"updateRowForm.get('details').value || updateRowForm.get('details').value===0\" matSuffix\n                mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('details', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('details').value || updateRowForm.get('details').value===0)\n                && updateRowForm.get('details').valid\" (click)=\"bulkUpdate('details')\">\n                <mat-icon>done</mat-icon>\n              </button>\n            </mat-form-field>\n\n            <ng-container *ngIf=\"useTechlifyTags\">\n              <mat-form-field>\n                <mat-label>Tag</mat-label>\n                <app-techlify-tagger-tag-form-field modelType=\"entity-file\" formControlName=\"tag_ids\"\n                  placeholder=\"Enter new tag\">\n                </app-techlify-tagger-tag-form-field>\n                <button *ngIf=\"updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0\" matSuffix\n                  mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('tag_ids', $event)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n                <button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0)\n                  && updateRowForm.get('tag_ids').valid\" (click)=\"bulkUpdate('tag_ids')\">\n                  <mat-icon>done</mat-icon>\n                </button>\n              </mat-form-field>\n            </ng-container>\n          </div>\n        </form>\n      </mat-card-content>\n    </mat-card>\n\n  </div>\n\n  <div>\n    <div class=\"mat-typography\" *ngIf=\"!displayMode\">\n      <div fxLayout=\"row\" fxLayoutGap=\"1rem\">\n        <mat-card [fxFlex]=\"this.documentIds.length ? '100%' : '70%'\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-start align-items-center gap-2\">\n              <mat-icon>\n                description\n              </mat-icon>\n              <h3 class=\"font-weight-bold primary-color mb-0\">\n                {{title}}s\n              </h3>\n              <mat-icon color=\"primary\" class=\"cursor-pointer\" *ngIf=\"!viewOnly && isShowCreateAction\"\n                (click)=\"addEntityFile()\">\n                add\n              </mat-icon>\n              <div>\n              </div>\n            </div>\n          </mat-card-content>\n          <mat-card-content>\n            <form [formGroup]=\"filterFormGroup\" style=\"font-size: 10px;\" fxLayout fxLayoutGap=\"1rem\">\n              <mat-form-field *ngIf=\"!removeSearch\" appearance=\"outline\">\n                <mat-label>Search</mat-label>\n                <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Search\" name=\"title\"\n                  autocomplete=\"off\" />\n                <button *ngIf=\"filters.title\" matSuffix mat-icon-button (click)=\"resetFieldValue($event, 'title')\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </mat-form-field>\n\n              <ng-container *ngIf=\"useTechlifyTags\">\n                <mat-form-field>\n                  <mat-label>Tag</mat-label>\n                  <app-techlify-tagger-tag-form-field [categories]=\"techlifyTagCategories\" formControlName=\"tag_ids\"\n                    placeholder=\"Select Tags\" [config]=\"techlifyTagConfig\"></app-techlify-tagger-tag-form-field>\n                </mat-form-field>\n              </ng-container>\n\n\n              <button mat-icon-button (click)=\"reload()\" *ngIf=\"isReload\" type=\"button\" matTooltip=\"Refresh\">\n                <mat-icon>\n                  <span class=\"material-icons\">\n                    refresh\n                  </span>\n                </mat-icon>\n              </button>\n            </form>\n          </mat-card-content>\n          <mat-card-content class=\"entity-file-card p-0\">\n            <table mat-table [dataSource]=\"entityFiles\" class=\"w-100\" matSort multiTemplateDataRows infiniteScroll\n              [infiniteScrollDistance]=\"1.5\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n\n              <!-- Select Column -->\n              <ng-container matColumnDef=\"select\">\n                <th mat-header-cell *matHeaderCellDef style=\"width:30px\">\n                  <mat-checkbox name=\"employee\" [(ngModel)]=\"isAllSelected\" (change)=\"selectAll()\">\n                  </mat-checkbox>\n                </th>\n                <td mat-cell *matCellDef=\"let element\" style=\"width:30px\">\n                  <mat-checkbox name=\"employee[{{element?.id}}]\" (click)=\"$event.stopPropagation()\"\n                    [(ngModel)]=\"element.is_selected\" (change)=\"employeeListModified($event, element)\"\n                    [disabled]=\"!entityFiles.length\">\n                  </mat-checkbox>\n                </td>\n              </ng-container>\n\n              <!-- Index Column -->\n              <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let element; let i = dataIndex\"> {{ i+1 }} </td>\n              </ng-container>\n\n              <!-- Title Column -->\n              <ng-container matColumnDef=\"title\">\n                <th mat-header-cell *matHeaderCellDef> Title </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <div>\n                    <span>\n                      {{element.title}}\n                    </span>\n                    <span>\n                      <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted\">\n                        <button mat-icon-button type=\"button\">\n                          <mat-icon>download</mat-icon>\n                        </button>\n                      </a>\n                    </span>\n                  </div>\n                </td>\n              </ng-container>\n\n              <!-- Details Column -->\n              <ng-container matColumnDef=\"details\">\n                <th mat-header-cell *matHeaderCellDef> Details </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <app-read-more [text]=\"element.details\" [maxLength]=\"50\"></app-read-more>\n                </td>\n              </ng-container>\n\n              <!-- File size Column -->\n              <ng-container matColumnDef=\"file_size\">\n                <th mat-header-cell *matHeaderCellDef> File Size </th>\n                <td mat-cell *matCellDef=\"let element\"> {{ sizeOf(element.file_size)}} </td>\n              </ng-container>\n\n              <!-- Tags Column -->\n              <ng-container matColumnDef=\"tag\">\n                <th mat-header-cell *matHeaderCellDef> Tag </th>\n                <td mat-cell *matCellDef=\"let element\" class=\"p-1\">\n                  <mat-chip-listbox aria-label=\"Tags\">\n                    <mat-chip *ngFor=\"let tag of element.tags\">\n                      {{ tag?.title }}\n                    </mat-chip>\n                  </mat-chip-listbox>\n                </td>\n              </ng-container>\n\n              <!-- Uploaded On Column -->\n              <ng-container matColumnDef=\"uploaded_on\">\n                <th mat-header-cell *matHeaderCellDef> Uploaded On </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <div>\n                    {{element.created_at | date: 'mediumDate'}}\n                  </div>\n                  <div class=\"text-muted\">\n                    By {{element.creator?.name}}\n                  </div>\n                </td>\n              </ng-container>\n\n              <!-- Actions Column -->\n              <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef> Actions </th>\n                <td mat-cell *matCellDef=\"let element\" style=\"min-width:110px\" class=\"text-muted\">\n                  <button *ngIf=\"isShowUpdateAction\" type=\"button\" mat-icon-button (click)=\"editEntityFile(element)\">\n                    <mat-icon>edit</mat-icon>\n                  </button>\n                  <button *ngIf=\"isShowDeleteAction\" type=\"button\" mat-icon-button (click)=\"deleteEntityFile(element)\">\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                </td>\n              </ng-container>\n\n              <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n              <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n            </table>\n\n            <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n          </mat-card-content>\n        </mat-card>\n        <section fxFlex=\"30%\" *ngIf=\"!this.documentIds.length && !viewOnly && isShowCreateAction\">\n          <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n          </app-file-dropper>\n        </section>\n      </div>\n    </div>\n  </div>\n\n  <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" class=\"mat-typography p-4\" *ngIf=\"displayMode\">\n    <div *ngFor=\"let efile of entityFiles\">\n      <app-document-viewer [file]=\"efile.file\" [fileUrl]=\"efile.url\" [config]=\"this.viewerConfig\" [disableEdit]=\"true\">\n      </app-document-viewer>\n      <a href=\"{{efile.url}}\" target=\"_blank\">\n        <button mat-button type=\"button\">View</button>\n      </a>\n    </div>\n  </div>\n</div>", styles: ["th.mat-header-cell,td.mat-cell,td.mat-footer-cell{padding:2px}.entity-file-card{overflow-x:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "component", type: i10.FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "component", type: i11.DocumentViewerComponent, selector: "app-document-viewer", inputs: ["config", "file", "fileUrl", "disableEdit"], outputs: ["remove"] }, { kind: "directive", type: i12.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: i13.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i13.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: i15.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i15.MatLabel, selector: "mat-label" }, { kind: "directive", type: i15.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i16.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i17.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i18.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i19.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i19.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i19.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i19.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i19.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i19.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i19.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i19.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i19.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i19.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i20.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i20.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i20.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i20.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i21.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i21.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i22.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i23.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i24.TechlifyTaggerTagFormFieldComponent, selector: "app-techlify-tagger-tag-form-field", inputs: ["config", "modelType", "modelId", "allTags", "categories", "defaultCreateCategory", "required", "disabled", "value", "placeholder"] }, { kind: "component", type: i25.ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] }); }
};
EntityFilesViewAllComponent = __decorate([
    UntilDestroy()
], EntityFilesViewAllComponent);
export { EntityFilesViewAllComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EntityFilesViewAllComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-entity-files-view-all', template: "<div>\n  <div fxLayout=\"column\" [fxHide]=\"!this.documentIds.length\" fxHide.xs fxHide.sm fxHide.lt-md>\n    <mat-card class=\"update_card\" *ngIf=\"this.documentIds.length\">\n      <mat-card-header>\n        <mat-card-title>\n          <div mat-dialog-title class=\"mt-2 ml-2 text-center\">\n            <div>Update Selected Rows</div>\n          </div>\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content fxLayout=\"column\">\n        <form [formGroup]=\"updateRowForm\">\n          <div fxLayout=\"column\">\n\n            <mat-form-field fxFlex=\"100%\" class=\"px-1\">\n              <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" />\n              <button *ngIf=\"updateRowForm.get('title').value || updateRowForm.get('title').value===0\" matSuffix\n                mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('title', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('title').value || updateRowForm.get('title').value===0)\n                && updateRowForm.get('title').valid\" (click)=\"bulkUpdate('title')\">\n                <mat-icon>done</mat-icon>\n              </button>\n            </mat-form-field>\n\n            <mat-form-field fxFlex=\"100%\" class=\"px-1\">\n              <textarea matInput formControlName=\"details\" placeholder=\"Details\" autocomplete=\"off\"></textarea>\n              <button *ngIf=\"updateRowForm.get('details').value || updateRowForm.get('details').value===0\" matSuffix\n                mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('details', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('details').value || updateRowForm.get('details').value===0)\n                && updateRowForm.get('details').valid\" (click)=\"bulkUpdate('details')\">\n                <mat-icon>done</mat-icon>\n              </button>\n            </mat-form-field>\n\n            <ng-container *ngIf=\"useTechlifyTags\">\n              <mat-form-field>\n                <mat-label>Tag</mat-label>\n                <app-techlify-tagger-tag-form-field modelType=\"entity-file\" formControlName=\"tag_ids\"\n                  placeholder=\"Enter new tag\">\n                </app-techlify-tagger-tag-form-field>\n                <button *ngIf=\"updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0\" matSuffix\n                  mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('tag_ids', $event)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n                <button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0)\n                  && updateRowForm.get('tag_ids').valid\" (click)=\"bulkUpdate('tag_ids')\">\n                  <mat-icon>done</mat-icon>\n                </button>\n              </mat-form-field>\n            </ng-container>\n          </div>\n        </form>\n      </mat-card-content>\n    </mat-card>\n\n  </div>\n\n  <div>\n    <div class=\"mat-typography\" *ngIf=\"!displayMode\">\n      <div fxLayout=\"row\" fxLayoutGap=\"1rem\">\n        <mat-card [fxFlex]=\"this.documentIds.length ? '100%' : '70%'\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-start align-items-center gap-2\">\n              <mat-icon>\n                description\n              </mat-icon>\n              <h3 class=\"font-weight-bold primary-color mb-0\">\n                {{title}}s\n              </h3>\n              <mat-icon color=\"primary\" class=\"cursor-pointer\" *ngIf=\"!viewOnly && isShowCreateAction\"\n                (click)=\"addEntityFile()\">\n                add\n              </mat-icon>\n              <div>\n              </div>\n            </div>\n          </mat-card-content>\n          <mat-card-content>\n            <form [formGroup]=\"filterFormGroup\" style=\"font-size: 10px;\" fxLayout fxLayoutGap=\"1rem\">\n              <mat-form-field *ngIf=\"!removeSearch\" appearance=\"outline\">\n                <mat-label>Search</mat-label>\n                <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Search\" name=\"title\"\n                  autocomplete=\"off\" />\n                <button *ngIf=\"filters.title\" matSuffix mat-icon-button (click)=\"resetFieldValue($event, 'title')\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </mat-form-field>\n\n              <ng-container *ngIf=\"useTechlifyTags\">\n                <mat-form-field>\n                  <mat-label>Tag</mat-label>\n                  <app-techlify-tagger-tag-form-field [categories]=\"techlifyTagCategories\" formControlName=\"tag_ids\"\n                    placeholder=\"Select Tags\" [config]=\"techlifyTagConfig\"></app-techlify-tagger-tag-form-field>\n                </mat-form-field>\n              </ng-container>\n\n\n              <button mat-icon-button (click)=\"reload()\" *ngIf=\"isReload\" type=\"button\" matTooltip=\"Refresh\">\n                <mat-icon>\n                  <span class=\"material-icons\">\n                    refresh\n                  </span>\n                </mat-icon>\n              </button>\n            </form>\n          </mat-card-content>\n          <mat-card-content class=\"entity-file-card p-0\">\n            <table mat-table [dataSource]=\"entityFiles\" class=\"w-100\" matSort multiTemplateDataRows infiniteScroll\n              [infiniteScrollDistance]=\"1.5\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n\n              <!-- Select Column -->\n              <ng-container matColumnDef=\"select\">\n                <th mat-header-cell *matHeaderCellDef style=\"width:30px\">\n                  <mat-checkbox name=\"employee\" [(ngModel)]=\"isAllSelected\" (change)=\"selectAll()\">\n                  </mat-checkbox>\n                </th>\n                <td mat-cell *matCellDef=\"let element\" style=\"width:30px\">\n                  <mat-checkbox name=\"employee[{{element?.id}}]\" (click)=\"$event.stopPropagation()\"\n                    [(ngModel)]=\"element.is_selected\" (change)=\"employeeListModified($event, element)\"\n                    [disabled]=\"!entityFiles.length\">\n                  </mat-checkbox>\n                </td>\n              </ng-container>\n\n              <!-- Index Column -->\n              <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let element; let i = dataIndex\"> {{ i+1 }} </td>\n              </ng-container>\n\n              <!-- Title Column -->\n              <ng-container matColumnDef=\"title\">\n                <th mat-header-cell *matHeaderCellDef> Title </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <div>\n                    <span>\n                      {{element.title}}\n                    </span>\n                    <span>\n                      <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted\">\n                        <button mat-icon-button type=\"button\">\n                          <mat-icon>download</mat-icon>\n                        </button>\n                      </a>\n                    </span>\n                  </div>\n                </td>\n              </ng-container>\n\n              <!-- Details Column -->\n              <ng-container matColumnDef=\"details\">\n                <th mat-header-cell *matHeaderCellDef> Details </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <app-read-more [text]=\"element.details\" [maxLength]=\"50\"></app-read-more>\n                </td>\n              </ng-container>\n\n              <!-- File size Column -->\n              <ng-container matColumnDef=\"file_size\">\n                <th mat-header-cell *matHeaderCellDef> File Size </th>\n                <td mat-cell *matCellDef=\"let element\"> {{ sizeOf(element.file_size)}} </td>\n              </ng-container>\n\n              <!-- Tags Column -->\n              <ng-container matColumnDef=\"tag\">\n                <th mat-header-cell *matHeaderCellDef> Tag </th>\n                <td mat-cell *matCellDef=\"let element\" class=\"p-1\">\n                  <mat-chip-listbox aria-label=\"Tags\">\n                    <mat-chip *ngFor=\"let tag of element.tags\">\n                      {{ tag?.title }}\n                    </mat-chip>\n                  </mat-chip-listbox>\n                </td>\n              </ng-container>\n\n              <!-- Uploaded On Column -->\n              <ng-container matColumnDef=\"uploaded_on\">\n                <th mat-header-cell *matHeaderCellDef> Uploaded On </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <div>\n                    {{element.created_at | date: 'mediumDate'}}\n                  </div>\n                  <div class=\"text-muted\">\n                    By {{element.creator?.name}}\n                  </div>\n                </td>\n              </ng-container>\n\n              <!-- Actions Column -->\n              <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef> Actions </th>\n                <td mat-cell *matCellDef=\"let element\" style=\"min-width:110px\" class=\"text-muted\">\n                  <button *ngIf=\"isShowUpdateAction\" type=\"button\" mat-icon-button (click)=\"editEntityFile(element)\">\n                    <mat-icon>edit</mat-icon>\n                  </button>\n                  <button *ngIf=\"isShowDeleteAction\" type=\"button\" mat-icon-button (click)=\"deleteEntityFile(element)\">\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                </td>\n              </ng-container>\n\n              <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n              <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n            </table>\n\n            <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n          </mat-card-content>\n        </mat-card>\n        <section fxFlex=\"30%\" *ngIf=\"!this.documentIds.length && !viewOnly && isShowCreateAction\">\n          <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n          </app-file-dropper>\n        </section>\n      </div>\n    </div>\n  </div>\n\n  <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" class=\"mat-typography p-4\" *ngIf=\"displayMode\">\n    <div *ngFor=\"let efile of entityFiles\">\n      <app-document-viewer [file]=\"efile.file\" [fileUrl]=\"efile.url\" [config]=\"this.viewerConfig\" [disableEdit]=\"true\">\n      </app-document-viewer>\n      <a href=\"{{efile.url}}\" target=\"_blank\">\n        <button mat-button type=\"button\">View</button>\n      </a>\n    </div>\n  </div>\n</div>", styles: ["th.mat-header-cell,td.mat-cell,td.mat-footer-cell{padding:2px}.entity-file-card{overflow-x:auto}\n"] }]
        }], ctorParameters: () => [{ type: i1.EntityFileService }, { type: i2.Location }, { type: i3.AlertService }, { type: i4.MatDialog }, { type: i5.UntypedFormBuilder }, { type: i6.ErrorHandlerService }, { type: i7.CurrentUserService }], propDecorators: { entityId: [{
                type: Input
            }], entityType: [{
                type: Input
            }], viewOnly: [{
                type: Input
            }], removeSearch: [{
                type: Input
            }], hideTitleAndDetails: [{
                type: Input
            }], displayMode: [{
                type: Input
            }], allowMultipleFiles: [{
                type: Input
            }], allowBulkUpdate: [{
                type: Input
            }], useTechlifyTags: [{
                type: Input
            }], techlifyTagCategories: [{
                type: Input
            }], techlifyTagConfig: [{
                type: Input
            }], title: [{
                type: Input
            }], permission: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 