ngx-techlify-core 18.12.0 → 18.14.0

package/fesm2022/ngx-techlify-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Inject, EventEmitter, Input, Output, ViewChild, Injectable, InjectionToken, Optional, Self, NgModule, SkipSelf, Directive, forwardRef } from '@angular/core';
+import { Component, Inject, EventEmitter, Input, Output, ViewChild, Injectable, InjectionToken, Optional, Self, NgModule, Pipe, SkipSelf, Directive, forwardRef } from '@angular/core';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i7 from '@angular/flex-layout/flex';
@@ -1483,11 +1483,11 @@ class FileDropperComponent {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileDropperComponent, deps: [{ token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FileDropperComponent, selector: "app-file-dropper", inputs: { fileArray: "fileArray", config: "config", styles: "styles" }, outputs: { fileChanged: "fileChanged" }, ngImport: i0, template: "<div\n  id=\"{{ config.containerId }}\"\n  [ngStyle]=\"config.styles\"\n  class=\"file-border\"\n  (dragleave)=\"dragLeave($event)\"\n  (dragenter)=\"dragEnter($event)\"\n  (dragover)=\"dragOver($event)\"\n  (click)=\"clickEvent($event)\"\n  (drop)=\"dropEvent($event)\"\n  [ngClass]=\"{ 'disable-div': isSingleMode && fileArray.length > 0 }\"\n>\n  <div fxFill fxLayout=\"column\" fxLayoutAlign=\"center center\">\n    <div>\n      <span>Drag and drop file</span>\n    </div>\n\n    <div class=\"mt-2\">\n      <span>or</span>\n    </div>\n\n    <div class=\"mt-2\">\n      <button mat-raised-button color=\"primary\" type=\"button\">Browse</button>\n    </div>\n\n    <div class=\"mt-4\">\n      <span>Supported files</span>\n    </div>\n\n    <div *ngIf=\"config.acceptFileText\">\n      <span>{{ config.acceptFileText }}</span>\n    </div>\n  </div>\n</div>\n<input\n  type=\"file\"\n  id=\"{{ config.fileId }}\"\n  [accept]=\"config.acceptFile\"\n  (change)=\"onFileChange($event)\"\n  [multiple]=\"config.multiple === true\"\n  style=\"display:none\"\n/>\n", styles: [".disable-div{cursor:not-allowed}.file-border{border:1px dashed #989898}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i7.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: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FileDropperComponent, selector: "app-file-dropper", inputs: { fileArray: "fileArray", config: "config", styles: "styles" }, outputs: { fileChanged: "fileChanged" }, ngImport: i0, template: "<div\n  id=\"{{ config.containerId }}\"\n  [ngStyle]=\"config.styles\"\n  class=\"file-border\"\n  (dragleave)=\"dragLeave($event)\"\n  (dragenter)=\"dragEnter($event)\"\n  (dragover)=\"dragOver($event)\"\n  (click)=\"clickEvent($event)\"\n  (drop)=\"dropEvent($event)\"\n  [ngClass]=\"{ 'disable-div': isSingleMode && fileArray.length > 0 }\"\n>\n  <div fxFill fxLayout=\"column\" fxLayoutAlign=\"center center\">\n    <div>\n      <span>Drag and drop file</span>\n    </div>\n\n    <div class=\"mt-2\">\n      <span>or</span>\n    </div>\n\n    <div class=\"mt-2\">\n      <button mat-raised-button color=\"primary\" type=\"button\">Browse</button>\n    </div>\n\n    <div class=\"mt-4\">\n      <span>Supported files</span> <span *ngIf=\"config.acceptFileText\" class=\"mr-2\">: {{ config.acceptFileText }}</span>\n    </div>\n  </div>\n</div>\n<input\n  type=\"file\"\n  id=\"{{ config.fileId }}\"\n  [accept]=\"config.acceptFile\"\n  (change)=\"onFileChange($event)\"\n  [multiple]=\"config.multiple === true\"\n  style=\"display:none\"\n/>\n", styles: [".disable-div{cursor:not-allowed}.file-border{border:1px dashed #989898}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i7.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: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileDropperComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-file-dropper", template: "<div\n  id=\"{{ config.containerId }}\"\n  [ngStyle]=\"config.styles\"\n  class=\"file-border\"\n  (dragleave)=\"dragLeave($event)\"\n  (dragenter)=\"dragEnter($event)\"\n  (dragover)=\"dragOver($event)\"\n  (click)=\"clickEvent($event)\"\n  (drop)=\"dropEvent($event)\"\n  [ngClass]=\"{ 'disable-div': isSingleMode && fileArray.length > 0 }\"\n>\n  <div fxFill fxLayout=\"column\" fxLayoutAlign=\"center center\">\n    <div>\n      <span>Drag and drop file</span>\n    </div>\n\n    <div class=\"mt-2\">\n      <span>or</span>\n    </div>\n\n    <div class=\"mt-2\">\n      <button mat-raised-button color=\"primary\" type=\"button\">Browse</button>\n    </div>\n\n    <div class=\"mt-4\">\n      <span>Supported files</span>\n    </div>\n\n    <div *ngIf=\"config.acceptFileText\">\n      <span>{{ config.acceptFileText }}</span>\n    </div>\n  </div>\n</div>\n<input\n  type=\"file\"\n  id=\"{{ config.fileId }}\"\n  [accept]=\"config.acceptFile\"\n  (change)=\"onFileChange($event)\"\n  [multiple]=\"config.multiple === true\"\n  style=\"display:none\"\n/>\n", styles: [".disable-div{cursor:not-allowed}.file-border{border:1px dashed #989898}\n"] }]
+            args: [{ selector: "app-file-dropper", template: "<div\n  id=\"{{ config.containerId }}\"\n  [ngStyle]=\"config.styles\"\n  class=\"file-border\"\n  (dragleave)=\"dragLeave($event)\"\n  (dragenter)=\"dragEnter($event)\"\n  (dragover)=\"dragOver($event)\"\n  (click)=\"clickEvent($event)\"\n  (drop)=\"dropEvent($event)\"\n  [ngClass]=\"{ 'disable-div': isSingleMode && fileArray.length > 0 }\"\n>\n  <div fxFill fxLayout=\"column\" fxLayoutAlign=\"center center\">\n    <div>\n      <span>Drag and drop file</span>\n    </div>\n\n    <div class=\"mt-2\">\n      <span>or</span>\n    </div>\n\n    <div class=\"mt-2\">\n      <button mat-raised-button color=\"primary\" type=\"button\">Browse</button>\n    </div>\n\n    <div class=\"mt-4\">\n      <span>Supported files</span> <span *ngIf=\"config.acceptFileText\" class=\"mr-2\">: {{ config.acceptFileText }}</span>\n    </div>\n  </div>\n</div>\n<input\n  type=\"file\"\n  id=\"{{ config.fileId }}\"\n  [accept]=\"config.acceptFile\"\n  (change)=\"onFileChange($event)\"\n  [multiple]=\"config.multiple === true\"\n  style=\"display:none\"\n/>\n", styles: [".disable-div{cursor:not-allowed}.file-border{border:1px dashed #989898}\n"] }]
         }], ctorParameters: () => [{ type: AlertService }], propDecorators: { fileArray: [{
                 type: Input
             }], config: [{
@@ -4440,6 +4440,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+class WrapPipe {
+    transform(value, length = 50) {
+        if (!value) {
+            return '';
+        }
+        return value.length > length ? value.substring(0, length) + '...' : value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WrapPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: WrapPipe, isStandalone: true, name: "wrap" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WrapPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'wrap',
+                    standalone: true
+                }]
+        }] });
+
 let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
     constructor(entityFileService, location, alertService, dialog, fb, errorHandler, currentUserService) {
         this.entityFileService = entityFileService;
@@ -4452,6 +4470,8 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
         this.viewOnly = false;
         this.allowMultipleFiles = false;
         this.allowBulkUpdate = false;
+        this.viewMode = 'list';
+        this.fileDropperHeight = '500px';
         this.documentIds = [];
         this.isAllSelected = false;
         /**
@@ -4504,7 +4524,7 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
             fileId: "entityDashboardDropper",
             containerId: "entityDashboardDropperContainer",
             styles: {
-                height: "500px"
+                height: this.fileDropperHeight
             },
             multiple: this.allowMultipleFiles,
             acceptFile: "*",
@@ -4563,6 +4583,7 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
             next: (result) => {
                 this.lastPage = result.last_page || this.page;
                 this.entityFiles = this.entityFiles.concat(result.data);
+                this.total = result?.total;
                 this.isWorking = false;
             },
             error: () => this.isWorking = false
@@ -4715,14 +4736,14 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EntityFilesViewAllComponent, deps: [{ token: EntityFileService }, { token: i2$1.Location }, { token: AlertService }, { token: i1.MatDialog }, { token: i1$4.UntypedFormBuilder }, { token: ErrorHandlerService }, { token: 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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.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: i7.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: i7.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: i2.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: FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "component", type: DocumentViewerComponent, selector: "app-document-viewer", inputs: ["config", "file", "fileUrl", "disableEdit"], outputs: ["remove"] }, { kind: "directive", type: i14.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: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.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: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: i9$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9$2.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: i9.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i7$1.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: i7$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: TechlifyTaggerTagFormFieldComponent, selector: "app-techlify-tagger-tag-form-field", inputs: ["config", "modelType", "modelId", "allTags", "categories", "defaultCreateCategory", "required", "disabled", "value", "placeholder"] }, { kind: "component", type: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
+    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", viewMode: "viewMode", fileDropperHeight: "fileDropperHeight", useTechlifyTags: "useTechlifyTags", techlifyTagCategories: "techlifyTagCategories", techlifyTagConfig: "techlifyTagConfig", title: "title", permission: "permission" }, ngImport: i0, template: "<div *ngIf=\"viewMode === 'list'\">\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>\n\n<mat-card *ngIf=\"viewMode === 'timeline'\">\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      <span class=\"badge bg-primary\" *ngIf=\"total > 0\">{{ total }}</span>\n      <mat-icon color=\"primary\" class=\"cursor-pointer\" *ngIf=\"!viewOnly && isShowCreateAction\"\n                (click)=\"addEntityFile()\">\n        add\n      </mat-icon>\n    </div>\n  </mat-card-content>\n  <mat-card-content *ngIf=\"!this.documentIds.length && !viewOnly && isShowCreateAction\" class=\"mt-3\">\n    <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n    </app-file-dropper>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3\">\n    <div *ngFor=\"let entityFile of entityFiles\" class=\"d-flex flex-column gap-0\">\n      <div class=\"d-flex flex-column gap-0\">\n        <div class=\"d-flex justify-content-between align-items-center gap-1\">\n          <p class=\"mb-0 fw-bold text-wrap\">{{ entityFile?.title | wrap:20 }}</p>\n          <span class=\"badge bg-dark\" *ngFor=\"let tag of entityFile?.tags\">\n              {{ tag?.title }}\n            </span>\n          <small class=\"text-dark\">{{ sizeOf(entityFile.file_size) }}</small>\n        </div>\n      </div>\n      <app-read-more [text]=\"entityFile?.details\" [maxLength]=\"50\"></app-read-more>\n      <div class=\"d-flex justify-content-between gap-2\">\n        <small class=\"text-secondary\" style=\"max-width: 70%\">\n          <i>Uploaded By {{ entityFile?.creator?.name }} {{ entityFile?.created_at | date: 'mediumDate'}}</i>\n        </small>\n        <div class=\"d-flex justify-content-end align-items-center gap-1\">\n          <a href=\"{{entityFile?.url}}\" target=\"_blank\" class=\"text-decoration-none text-secondary mt-2\">\n            <mat-icon>download</mat-icon>\n          </a>\n          <mat-icon *ngIf=\"isShowUpdateAction\" (click)=\"editEntityFile(entityFile)\"\n                    class=\"cursor-pointer text-secondary\">\n            edit\n          </mat-icon>\n          <mat-icon *ngIf=\"isShowDeleteAction\" (click)=\"deleteEntityFile(entityFile)\"\n                    class=\"cursor-pointer text-secondary\">\n            delete\n          </mat-icon>\n        </div>\n      </div>\n      <hr style=\"margin: 0.5rem 0\">\n    </div>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", 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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.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: i7.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: i7.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: i2.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: FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "component", type: DocumentViewerComponent, selector: "app-document-viewer", inputs: ["config", "file", "fileUrl", "disableEdit"], outputs: ["remove"] }, { kind: "directive", type: i14.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: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.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: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: i9$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9$2.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: i9.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i7$1.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: i7$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: TechlifyTaggerTagFormFieldComponent, selector: "app-techlify-tagger-tag-form-field", inputs: ["config", "modelType", "modelId", "allTags", "categories", "defaultCreateCategory", "required", "disabled", "value", "placeholder"] }, { kind: "component", type: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: WrapPipe, name: "wrap" }] }); }
 };
 EntityFilesViewAllComponent = __decorate([
     UntilDestroy()
 ], 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"] }]
+            args: [{ selector: 'app-entity-files-view-all', template: "<div *ngIf=\"viewMode === 'list'\">\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>\n\n<mat-card *ngIf=\"viewMode === 'timeline'\">\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      <span class=\"badge bg-primary\" *ngIf=\"total > 0\">{{ total }}</span>\n      <mat-icon color=\"primary\" class=\"cursor-pointer\" *ngIf=\"!viewOnly && isShowCreateAction\"\n                (click)=\"addEntityFile()\">\n        add\n      </mat-icon>\n    </div>\n  </mat-card-content>\n  <mat-card-content *ngIf=\"!this.documentIds.length && !viewOnly && isShowCreateAction\" class=\"mt-3\">\n    <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n    </app-file-dropper>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3\">\n    <div *ngFor=\"let entityFile of entityFiles\" class=\"d-flex flex-column gap-0\">\n      <div class=\"d-flex flex-column gap-0\">\n        <div class=\"d-flex justify-content-between align-items-center gap-1\">\n          <p class=\"mb-0 fw-bold text-wrap\">{{ entityFile?.title | wrap:20 }}</p>\n          <span class=\"badge bg-dark\" *ngFor=\"let tag of entityFile?.tags\">\n              {{ tag?.title }}\n            </span>\n          <small class=\"text-dark\">{{ sizeOf(entityFile.file_size) }}</small>\n        </div>\n      </div>\n      <app-read-more [text]=\"entityFile?.details\" [maxLength]=\"50\"></app-read-more>\n      <div class=\"d-flex justify-content-between gap-2\">\n        <small class=\"text-secondary\" style=\"max-width: 70%\">\n          <i>Uploaded By {{ entityFile?.creator?.name }} {{ entityFile?.created_at | date: 'mediumDate'}}</i>\n        </small>\n        <div class=\"d-flex justify-content-end align-items-center gap-1\">\n          <a href=\"{{entityFile?.url}}\" target=\"_blank\" class=\"text-decoration-none text-secondary mt-2\">\n            <mat-icon>download</mat-icon>\n          </a>\n          <mat-icon *ngIf=\"isShowUpdateAction\" (click)=\"editEntityFile(entityFile)\"\n                    class=\"cursor-pointer text-secondary\">\n            edit\n          </mat-icon>\n          <mat-icon *ngIf=\"isShowDeleteAction\" (click)=\"deleteEntityFile(entityFile)\"\n                    class=\"cursor-pointer text-secondary\">\n            delete\n          </mat-icon>\n        </div>\n      </div>\n      <hr style=\"margin: 0.5rem 0\">\n    </div>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: ["th.mat-header-cell,td.mat-cell,td.mat-footer-cell{padding:2px}.entity-file-card{overflow-x:auto}\n"] }]
         }], ctorParameters: () => [{ type: EntityFileService }, { type: i2$1.Location }, { type: AlertService }, { type: i1.MatDialog }, { type: i1$4.UntypedFormBuilder }, { type: ErrorHandlerService }, { type: CurrentUserService }], propDecorators: { entityId: [{
                 type: Input
             }], entityType: [{
@@ -4739,6 +4760,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], allowBulkUpdate: [{
                 type: Input
+            }], viewMode: [{
+                type: Input
+            }], fileDropperHeight: [{
+                type: Input
             }], useTechlifyTags: [{
                 type: Input
             }], techlifyTagCategories: [{
@@ -5548,7 +5573,8 @@ class EntityFilesViewAllModule {
             TechlifyTaggerTagFormFieldModule,
             SearchableSelectorModule,
             ReadMoreModule,
-            MatProgressBarModule], exports: [EntityFilesViewAllComponent] }); }
+            MatProgressBarModule,
+            WrapPipe], exports: [EntityFilesViewAllComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EntityFilesViewAllModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -5580,7 +5606,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TechlifyTaggerTagFormFieldModule,
                         SearchableSelectorModule,
                         ReadMoreModule,
-                        MatProgressBarModule
+                        MatProgressBarModule,
+                        WrapPipe
                     ],
                     exports: [
                         EntityFilesViewAllComponent
@@ -12238,11 +12265,11 @@ class TechlifyCompanySwitcherComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyCompanySwitcherComponent, deps: [{ token: HttpService }, { token: CredentialsService }, { token: AlertService }, { token: CurrentUserService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyCompanySwitcherComponent, selector: "app-techlify-company-switcher", ngImport: i0, template: "<div\n  mat-menu-item\n  [matMenuTriggerFor]=\"menu\"\n>\n  {{ user.client?.name }}\n</div>\n<mat-menu #menu=\"matMenu\">\n  <button\n    mat-menu-item\n    *ngFor=\"let userClient of userClients\"\n    (click)=\"switchClient(userClient)\"\n    [disabled]=\"!userClient.is_enabled || userClient.client?.status_id == 3\"\n  >\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <span>\n        {{ userClient?.client?.name }}\n      </span>\n      <span *ngIf=\"userClient?.client_id === user.client_id\" class=\"active-company\"></span>\n      <span *ngIf=\"!userClient.is_enabled\">(disabled)</span>\n      <span *ngIf=\"userClient.client?.status_id == 3\">(Inactive)</span>\n    </div>\n  </button>\n</mat-menu>\n", styles: [".active-company{width:10px;height:10px;background-color:#00ce00;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyCompanySwitcherComponent, selector: "app-techlify-company-switcher", ngImport: i0, template: "<div\n  mat-menu-item\n  [matMenuTriggerFor]=\"menu\"\n>\n  {{ user.client?.name }}\n</div>\n<mat-menu #menu=\"matMenu\">\n  <ng-container *ngFor=\"let userClient of userClients\">\n    <button\n      *ngIf=\"userClient?.client\"\n      mat-menu-item\n      (click)=\"switchClient(userClient)\"\n      [disabled]=\"!userClient.is_enabled || userClient.client?.status_id == 3\"\n    >\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <span>\n        {{ userClient?.client?.name }}\n      </span>\n        <span *ngIf=\"userClient?.client_id === user.client_id\" class=\"active-company\"></span>\n        <span *ngIf=\"!userClient.is_enabled\">(disabled)</span>\n        <span *ngIf=\"userClient.client?.status_id == 3\">(Inactive)</span>\n      </div>\n    </button>\n  </ng-container>\n</mat-menu>\n", styles: [".active-company{width:10px;height:10px;background-color:#00ce00;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyCompanySwitcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-techlify-company-switcher', template: "<div\n  mat-menu-item\n  [matMenuTriggerFor]=\"menu\"\n>\n  {{ user.client?.name }}\n</div>\n<mat-menu #menu=\"matMenu\">\n  <button\n    mat-menu-item\n    *ngFor=\"let userClient of userClients\"\n    (click)=\"switchClient(userClient)\"\n    [disabled]=\"!userClient.is_enabled || userClient.client?.status_id == 3\"\n  >\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <span>\n        {{ userClient?.client?.name }}\n      </span>\n      <span *ngIf=\"userClient?.client_id === user.client_id\" class=\"active-company\"></span>\n      <span *ngIf=\"!userClient.is_enabled\">(disabled)</span>\n      <span *ngIf=\"userClient.client?.status_id == 3\">(Inactive)</span>\n    </div>\n  </button>\n</mat-menu>\n", styles: [".active-company{width:10px;height:10px;background-color:#00ce00;border-radius:50%}\n"] }]
+            args: [{ selector: 'app-techlify-company-switcher', template: "<div\n  mat-menu-item\n  [matMenuTriggerFor]=\"menu\"\n>\n  {{ user.client?.name }}\n</div>\n<mat-menu #menu=\"matMenu\">\n  <ng-container *ngFor=\"let userClient of userClients\">\n    <button\n      *ngIf=\"userClient?.client\"\n      mat-menu-item\n      (click)=\"switchClient(userClient)\"\n      [disabled]=\"!userClient.is_enabled || userClient.client?.status_id == 3\"\n    >\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <span>\n        {{ userClient?.client?.name }}\n      </span>\n        <span *ngIf=\"userClient?.client_id === user.client_id\" class=\"active-company\"></span>\n        <span *ngIf=\"!userClient.is_enabled\">(disabled)</span>\n        <span *ngIf=\"userClient.client?.status_id == 3\">(Inactive)</span>\n      </div>\n    </button>\n  </ng-container>\n</mat-menu>\n", styles: [".active-company{width:10px;height:10px;background-color:#00ce00;border-radius:50%}\n"] }]
         }], ctorParameters: () => [{ type: HttpService }, { type: CredentialsService }, { type: AlertService }, { type: CurrentUserService }] });
 
 class TechlifyCompanySwitcherModule {
@@ -12942,7 +12969,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: FormValidatorService }, { type: i1$4.FormBuilder }, { type: CurrentUserService }, { type: ClientService }, { type: AlertService }, { type: i2$1.Location }] });
 
 class CompanyInfoDisplayComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CompanyInfoDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    constructor(currentUserService) {
+        this.currentUserService = currentUserService;
+        this.currentUserService.getUserObservable(true).subscribe((user) => {
+            this.client = user?.client;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CompanyInfoDisplayComponent, deps: [{ token: CurrentUserService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CompanyInfoDisplayComponent, isStandalone: true, selector: "app-company-info-display", inputs: { client: "client" }, ngImport: i0, template: "<div *ngIf=\"client\" class=\"d-flex justify-content-start align-items-start gap-2\">\n  <img *ngIf=\"client?.logo\" [src]=\"client?.logo\" class=\"img img-thumbnail\" style=\"max-height: 75px\" alt=\"\">\n  <div>\n    <h3 class=\"text-dark mb-1\">{{ client?.name }}</h3>\n    <p class=\"mb-1 text-secondary\" *ngIf=\"client?.address\">\n      {{ client?.address }}\n    </p>\n    <p class=\"mb-1 text-secondary\" *ngIf=\"client?.phone\">\n      {{ client?.phone }}\n    </p>\n    <p class=\"mb-1 text-secondary\" *ngIf=\"client?.email\">\n      {{ client?.email }}\n    </p>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CompanyInfoDisplayComponent, decorators: [{
@@ -12950,7 +12983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ selector: 'app-company-info-display', standalone: true, imports: [
                         NgIf
                     ], template: "<div *ngIf=\"client\" class=\"d-flex justify-content-start align-items-start gap-2\">\n  <img *ngIf=\"client?.logo\" [src]=\"client?.logo\" class=\"img img-thumbnail\" style=\"max-height: 75px\" alt=\"\">\n  <div>\n    <h3 class=\"text-dark mb-1\">{{ client?.name }}</h3>\n    <p class=\"mb-1 text-secondary\" *ngIf=\"client?.address\">\n      {{ client?.address }}\n    </p>\n    <p class=\"mb-1 text-secondary\" *ngIf=\"client?.phone\">\n      {{ client?.phone }}\n    </p>\n    <p class=\"mb-1 text-secondary\" *ngIf=\"client?.email\">\n      {{ client?.email }}\n    </p>\n  </div>\n</div>\n" }]
-        }], propDecorators: { client: [{
+        }], ctorParameters: () => [{ type: CurrentUserService }], propDecorators: { client: [{
                 type: Input
             }] } });
 
@@ -13111,5 +13144,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccessControlConfigModule, ActionPopup, ActionPopupComponent, ActionPopupModule, AlertService, ApiPrefixInterceptor, AppAdminHomeComponent, AppAdminModule, AppSwitcherComponent, AuditLogForModelComponent, AuditLogForModelModule, AuditLogForModelRoutingModule, AuditLogListComponent, AuditLogListFilterComponent, AuditLogListFilterModule, AuditLogListFilterRoutingModule, AuditLogListModule, AuditLogListRoutingModule, AuditLogModule, AuditLogRoutingModule, AuditLogViewComponent, AuditLogViewModelComponent, AuditLogViewModelModule, AuditLogViewModelRoutingModule, AuditLogViewModule, AuditLogViewRoutingModule, AuditLogsViewModelComponent, AuditLogsViewModelModule, AuditLogsViewModelRoutingModule, AuthenticationGuard, AuthenticationService, CacheInterceptor, ChangePasswordModule, ClientService, ColumnConfig, ColumnSelectorComponent, ColumnSelectorModule, CommentFormComponent, CompanyInfoDisplayComponent, CompanyInformationComponent, ConfigService, CoreModule, CredentialsService, CurrentUserService, DEFAULT_SELECTED_VALUE, DataManager, DataTable, DataTableComponent, DataTableModule, DateUtils, DateValidator, DocumentViewerComponent, DocumentViewerModule, EmailSubscriptionForUserComponent, EmailSubscriptionForUserModule, EmailSubscriptionForUserRoutingModule, EmailSubscriptionModule, EmailSubscriptionRoutingModule, EmailSubscriptionTypeFormComponent, EmailSubscriptionTypeFormModule, EmailSubscriptionTypeFormRoutingModule, EmailSubscriptionTypeListComponent, EmailSubscriptionTypeListModule, EmailSubscriptionTypeListRoutingModule, EmailSubscriptionTypeModule, EmailSubscriptionTypeRoutingModule, EmailSubscriptionUserFormComponent, EmailSubscriptionUserFormModule, EmailSubscriptionUserFormRoutingModule, EmailSubscriptionUserListComponent, EmailSubscriptionUserListFilterComponent, EmailSubscriptionUserListFilterModule, EmailSubscriptionUserListFilterRoutingModule, EmailSubscriptionUserListModule, EmailSubscriptionUserListRoutingModule, EmailSubscriptionUserModule, EmailSubscriptionUserRoutingModule, EntityFileFormComponent, EntityFileService, EntityFilesViewAllComponent, EntityFilesViewAllModule, ErrorHandlerInterceptor, ErrorHandlerService, ErrorSnackComponent, ExportExcelButtonComponent, ExportExcelModule, FileDragdropUploaderComponent, FileDragdropUploaderModule, FileDropperComponent, FileDropperConfig, FileDropperModule, FilterService, ForgotPasswordComponent, ForgotPasswordModule, ForgotPasswordRoutingModule, FormValidatorService, HTTP_DYNAMIC_INTERCEPTORS, HttpCacheService, HttpService, ImportCsvComponent, ImportCsvModule, LoaderComponent, LoaderModule, LogLevel, Logger, LoginComponent, LoginFormFieldsComponent, LoginHistoryForUserComponent, LoginHistoryForUserModule, LoginHistoryForUserRoutingModule, LoginModule, LoginRoutingModule, MaterialModule, MultiUserConfig, NgxTechlifyUsersModule, NoteFormComponent, NoteListComponent, NoteModule, NumItemsSelector, NumberInputButtonComponent, NumberInputButtonModule, NumberSelector, PageEvent, Permission, PermissionModule, PermissionRoutingProvider, PermissionsManagementComponent, ProfileEditComponent, ProfileModule, ProfileRoutingModule, ReadMoreComponent, ReadMoreModule, RequestHelperService, ResetPasswordComponent, ResetPasswordModule, ResetPasswordRoutingModule, ResetPasswordService, RestrictorTypeSelectorComponent, RestrictorTypeSelectorModule, RestrictorsModule, Role, RoleFormButtonComponent, RoleFormComponent, RoleModule, RoleRoutingProvider, RoleService, RolesViewAllComponent, RouteReusableStrategy, SearchableSelectorComponent, SearchableSelectorModule, SignUpComponent, SignupModule, SignupRoutingModule, SnackModule, StorageService, SuccessSnackComponent, TechlifyCompanySwitcherComponent, TechlifyCompanySwitcherModule, TechlifyConfig, TechlifyFeatureEnabledDirective, TechlifyFeatureListingComponent, TechlifyFeatureModule, TechlifyFeatureRoutes, TechlifyFormComponentInterface, TechlifyListingControllerInterface, TechlifyNotificationForUserComponent, TechlifyNotificationForUserModule, TechlifyNotificationForUserRoutingModule, TechlifyNotificationModule, TechlifyNotificationRoutingModule, TechlifyServiceBaseClass, TechlifyTaggerTagFormConfigModel, TechlifyTaggerTagFormFieldComponent, TechlifyTaggerTagFormFieldModule, TechlifyTaggerTagSelectorComponent, TechlifyTaggerTagSelectorModule, TechlifyUpdateHistoryModule, TechlifyUpdateModule, TechlifyUpdateService, TechlifyUpdatesTeaserComponent, TechlifyUpdatesTeaserModule, TenantListWidgetComponent, Timeline, TimelineFilterComponent, TimelineFilterModule, TokenInterceptor, UpdateNotifierComponent, UpdateNotifierModule, User, UserClientEnableDisableButtonComponent, UserClientsListComponent, UserConfig, UserConfigService, UserDataService, UserEnableButtonComponent, UserExploreComponent, UserFormComponent, UserListPageConfig, UserModule, UserRoutingProvider, UserSelectorComponent, UserSelectorModule, UserService, UserSessionsComponent, UsersViewAllComponent, UtilityModule, ViewerConfig, calculateTimeline, esfur, estlr, esulr };
+export { AccessControlConfigModule, ActionPopup, ActionPopupComponent, ActionPopupModule, AlertService, ApiPrefixInterceptor, AppAdminHomeComponent, AppAdminModule, AppSwitcherComponent, AuditLogForModelComponent, AuditLogForModelModule, AuditLogForModelRoutingModule, AuditLogListComponent, AuditLogListFilterComponent, AuditLogListFilterModule, AuditLogListFilterRoutingModule, AuditLogListModule, AuditLogListRoutingModule, AuditLogModule, AuditLogRoutingModule, AuditLogViewComponent, AuditLogViewModelComponent, AuditLogViewModelModule, AuditLogViewModelRoutingModule, AuditLogViewModule, AuditLogViewRoutingModule, AuditLogsViewModelComponent, AuditLogsViewModelModule, AuditLogsViewModelRoutingModule, AuthenticationGuard, AuthenticationService, CacheInterceptor, ChangePasswordModule, ClientService, ColumnConfig, ColumnSelectorComponent, ColumnSelectorModule, CommentFormComponent, CompanyInfoDisplayComponent, CompanyInformationComponent, ConfigService, CoreModule, CredentialsService, CurrentUserService, DEFAULT_SELECTED_VALUE, DataManager, DataTable, DataTableComponent, DataTableModule, DateUtils, DateValidator, DocumentViewerComponent, DocumentViewerModule, EmailSubscriptionForUserComponent, EmailSubscriptionForUserModule, EmailSubscriptionForUserRoutingModule, EmailSubscriptionModule, EmailSubscriptionRoutingModule, EmailSubscriptionTypeFormComponent, EmailSubscriptionTypeFormModule, EmailSubscriptionTypeFormRoutingModule, EmailSubscriptionTypeListComponent, EmailSubscriptionTypeListModule, EmailSubscriptionTypeListRoutingModule, EmailSubscriptionTypeModule, EmailSubscriptionTypeRoutingModule, EmailSubscriptionUserFormComponent, EmailSubscriptionUserFormModule, EmailSubscriptionUserFormRoutingModule, EmailSubscriptionUserListComponent, EmailSubscriptionUserListFilterComponent, EmailSubscriptionUserListFilterModule, EmailSubscriptionUserListFilterRoutingModule, EmailSubscriptionUserListModule, EmailSubscriptionUserListRoutingModule, EmailSubscriptionUserModule, EmailSubscriptionUserRoutingModule, EntityFileFormComponent, EntityFileService, EntityFilesViewAllComponent, EntityFilesViewAllModule, ErrorHandlerInterceptor, ErrorHandlerService, ErrorSnackComponent, ExportExcelButtonComponent, ExportExcelModule, FileDragdropUploaderComponent, FileDragdropUploaderModule, FileDropperComponent, FileDropperConfig, FileDropperModule, FilterService, ForgotPasswordComponent, ForgotPasswordModule, ForgotPasswordRoutingModule, FormValidatorService, HTTP_DYNAMIC_INTERCEPTORS, HttpCacheService, HttpService, ImportCsvComponent, ImportCsvModule, LoaderComponent, LoaderModule, LogLevel, Logger, LoginComponent, LoginFormFieldsComponent, LoginHistoryForUserComponent, LoginHistoryForUserModule, LoginHistoryForUserRoutingModule, LoginModule, LoginRoutingModule, MaterialModule, MultiUserConfig, NgxTechlifyUsersModule, NoteFormComponent, NoteListComponent, NoteModule, NumItemsSelector, NumberInputButtonComponent, NumberInputButtonModule, NumberSelector, PageEvent, Permission, PermissionModule, PermissionRoutingProvider, PermissionsManagementComponent, ProfileEditComponent, ProfileModule, ProfileRoutingModule, ReadMoreComponent, ReadMoreModule, RequestHelperService, ResetPasswordComponent, ResetPasswordModule, ResetPasswordRoutingModule, ResetPasswordService, RestrictorTypeSelectorComponent, RestrictorTypeSelectorModule, RestrictorsModule, Role, RoleFormButtonComponent, RoleFormComponent, RoleModule, RoleRoutingProvider, RoleService, RolesViewAllComponent, RouteReusableStrategy, SearchableSelectorComponent, SearchableSelectorModule, SignUpComponent, SignupModule, SignupRoutingModule, SnackModule, StorageService, SuccessSnackComponent, TechlifyCompanySwitcherComponent, TechlifyCompanySwitcherModule, TechlifyConfig, TechlifyFeatureEnabledDirective, TechlifyFeatureListingComponent, TechlifyFeatureModule, TechlifyFeatureRoutes, TechlifyFormComponentInterface, TechlifyListingControllerInterface, TechlifyNotificationForUserComponent, TechlifyNotificationForUserModule, TechlifyNotificationForUserRoutingModule, TechlifyNotificationModule, TechlifyNotificationRoutingModule, TechlifyServiceBaseClass, TechlifyTaggerTagFormConfigModel, TechlifyTaggerTagFormFieldComponent, TechlifyTaggerTagFormFieldModule, TechlifyTaggerTagSelectorComponent, TechlifyTaggerTagSelectorModule, TechlifyUpdateHistoryModule, TechlifyUpdateModule, TechlifyUpdateService, TechlifyUpdatesTeaserComponent, TechlifyUpdatesTeaserModule, TenantListWidgetComponent, Timeline, TimelineFilterComponent, TimelineFilterModule, TokenInterceptor, UpdateNotifierComponent, UpdateNotifierModule, User, UserClientEnableDisableButtonComponent, UserClientsListComponent, UserConfig, UserConfigService, UserDataService, UserEnableButtonComponent, UserExploreComponent, UserFormComponent, UserListPageConfig, UserModule, UserRoutingProvider, UserSelectorComponent, UserSelectorModule, UserService, UserSessionsComponent, UsersViewAllComponent, UtilityModule, ViewerConfig, WrapPipe, calculateTimeline, esfur, estlr, esulr };
 //# sourceMappingURL=ngx-techlify-core.mjs.map