ngx-techlify-core 18.91.0 → 18.93.0

package/esm2022/lib/audit-log/audit-log-for-model/audit-log-for-model.component.mjs

@@ -44,11 +44,11 @@ export class AuditLogForModelComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuditLogForModelComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AuditLogForModelComponent, selector: "app-audit-log-for-model", inputs: { isIconView: "isIconView", modelType: "modelType", modelId: "modelId", logView: "logView" }, ngImport: i0, template: "<ng-container *ngIf=\"isIconView\">\n    <app-techlify-icon *ngIf=\"logView==='recent'\" name=\"history\" matTooltip=\"Recent Audit Log\"\n        (click)=\"$event.stopPropagation();getLogView()\" class=\"clickable\"></app-techlify-icon>\n    <app-techlify-icon *ngIf=\"logView==='all'\" name=\"history\" matTooltip=\"All Audit Logs\"\n        (click)=\"$event.stopPropagation();getLogsView()\" class=\"clickable\"></app-techlify-icon>\n</ng-container>\n\n\n<ng-container *ngIf=\"!isIconView\">\n    <button type=\"button\" *ngIf=\"logView==='recent'\" mat-icon-button matTooltip=\"Recent Audit Log\"\n        (click)=\"$event.stopPropagation();getLogView()\">\n        <mat-icon>history</mat-icon>\n    </button>\n\n    <button type=\"button\" *ngIf=\"logView==='all'\" mat-icon-button matTooltip=\"All Audit Logs\"\n        (click)=\"$event.stopPropagation();getLogsView()\">\n        <mat-icon>history</mat-icon>\n    </button>\n</ng-container>", styles: [".icon-md{height:24px!important;width:24px!important;font-size:24px!important;margin:0 1px}.icon-sm{height:20px!important;width:20px!important;font-size:20px!important}.icon-xs{height:16px!important;width:16px!important;font-size:16px!important}.fl-md{width:200px!important}.fl-md .mat-mdc-form-field{width:100%!important}.fl-sm{width:150px!important}.fl-sm .mat-mdc-form-field{width:100%!important}.mat-btn-md{height:25px!important;padding:0 8px!important}.fs-12{font-size:12px!important}.fs-16{font-size:16px!important}.fs-13{font-size:13px!important}.fs-18{font-size:18px!important}.clickable:hover{cursor:pointer}.mat-mdc-form-field-hint-wrapper{padding:0 4px!important}.nil-subscript-wrapper .mat-mdc-form-field-subscript-wrapper{height:0!important}.create-another .mat-mdc-checkbox label{margin:0!important}.create-another .mdc-checkbox{padding:0!important}.create-another .mdc-checkbox__background{position:relative;top:0;left:0}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element{color:#555!important;-webkit-text-fill-color:#555555!important}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#555!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AuditLogForModelComponent, selector: "app-audit-log-for-model", inputs: { isIconView: "isIconView", modelType: "modelType", modelId: "modelId", logView: "logView" }, ngImport: i0, template: "<ng-container *ngIf=\"isIconView\">\n    <app-techlify-icon *ngIf=\"logView==='recent'\" name=\"history\" matTooltip=\"Recent Audit Log\"\n        (click)=\"$event.stopPropagation();getLogView()\" class=\"clickable\"></app-techlify-icon>\n    <app-techlify-icon *ngIf=\"logView==='all'\" name=\"history\" matTooltip=\"All Audit Logs\"\n        (click)=\"$event.stopPropagation();getLogsView()\" class=\"clickable\"></app-techlify-icon>\n</ng-container>\n\n\n<ng-container *ngIf=\"!isIconView\">\n    <button type=\"button\" *ngIf=\"logView==='recent'\" mat-icon-button matTooltip=\"Recent Audit Log\"\n        (click)=\"$event.stopPropagation();getLogView()\">\n        <mat-icon>history</mat-icon>\n    </button>\n\n    <button type=\"button\" *ngIf=\"logView==='all'\" mat-icon-button matTooltip=\"All Audit Logs\"\n        (click)=\"$event.stopPropagation();getLogsView()\">\n        <mat-icon>history</mat-icon>\n    </button>\n</ng-container>", styles: [".fl-md{width:200px!important}.fl-md .mat-mdc-form-field{width:100%!important}.fl-sm{width:150px!important}.fl-sm .mat-mdc-form-field{width:100%!important}.wpx-50{width:50px!important}.wpx-100{width:100px!important}.wpx-120{width:120px!important}.wpx-125{width:125px!important}.wpx-150{width:150px!important}.wpx-200{width:200px!important}.wpx-250{width:250px!important}.min-wpx-200{min-width:200px!important}.max-width-px-115{max-width:115px}.w-description{width:300px!important}.side-panel{width:300px!important;min-width:300px!important;flex-shrink:0!important}.h-250px{height:250px!important}.scroll-y{overflow-y:auto}.flex-basis-0{flex-basis:0}.flex-basis-5{flex-basis:5%}.flex-basis-8{flex-basis:8%}.flex-basis-10{flex-basis:10%}.flex-basis-15{flex-basis:15%}.flex-basis-20{flex-basis:20%}.flex-basis-25{flex-basis:25%}.flex-basis-30{flex-basis:30%}.flex-basis-35{flex-basis:35%}.flex-basis-40{flex-basis:40%}.flex-basis-45{flex-basis:45%}.flex-basis-48{flex-basis:48%}.flex-basis-49{flex-basis:49%}.flex-basis-50{flex-basis:50%}.flex-basis-60{flex-basis:60%}.flex-basis-65{flex-basis:65%}.flex-basis-70{flex-basis:70%}.flex-basis-80{flex-basis:80%}.flex-basis-90{flex-basis:90%}.flex-basis-95{flex-basis:95%}.flex-basis-100{flex-basis:100%}.flex-basis-50-minus-1rem{flex-basis:calc(50% - 1rem)}.flex-basis-50-minus-0-2rem{flex-basis:calc(50% - .2rem)}.flex-basis-20-minus-1rem{flex-basis:calc(20% - 1rem)}.flex-basis-15-minus-1rem{flex-basis:calc(15% - 1rem)}.flex-basis-50-minus-4px{flex-basis:calc(50% - 4px)}@media (min-width: 992px){.flex-lg-basis-50{flex-basis:50%}}@media (min-width: 1200px){.flex-xl-basis-30{flex-basis:30%}.flex-xl-basis-30-minus-1rem{flex:0 1 calc(30% - 1rem)}}.column-gap-1{column-gap:.25rem!important}.column-gap-2{column-gap:.5rem!important}.column-gap-3{column-gap:1rem!important}.column-gap-4{column-gap:1.5rem!important}.column-gap-5{column-gap:3rem!important}button,a,input{outline:none!important}::-webkit-scrollbar{width:.5em}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:gray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#4d4c4c}.icon-md{height:24px!important;width:24px!important;font-size:24px!important;margin:0 1px}.icon-sm{height:20px!important;width:20px!important;font-size:20px!important}.icon-xs{height:16px!important;width:16px!important;font-size:16px!important}.mat-icon-xl{height:40px!important;width:40px!important;font-size:40px!important}.mat-icon-20px{font-size:20px!important;height:20px!important;width:20px!important}.mat-small-icon{height:16px!important;width:16px!important;font-size:16px!important}.mat-btn-md{height:25px!important;padding:0 8px!important}.mdc-button__label{letter-spacing:normal!important}.mat-mdc-button .mat-icon{height:24px!important;width:24px!important;font-size:24px!important}.mat-button-toggle-group{height:48px!important;align-items:center}.mat-button-toggle-button{height:48px!important}.mat-button-toggle-label-content{padding:0 8px!important;font-size:14px!important}.mat-mdc-slide-toggle label{margin:0!important}.small-slide-toggle{transform:scale(.8);transform-origin:left center}.fs-8{font-size:8px!important}.fs-12{font-size:12px!important}.fs-13{font-size:13px!important}.fs-16{font-size:16px!important}.fs-18{font-size:18px!important}.clickable:hover{cursor:pointer}.mat-mdc-form-field-hint-wrapper{padding:0 4px!important}.mat-mdc-floating-label{pointer-events:none!important}.nil-subscript-wrapper .mat-mdc-form-field-subscript-wrapper{height:0!important}.create-another .mat-mdc-checkbox label{margin:0!important}.create-another .mdc-checkbox{padding:0!important}.create-another .mdc-checkbox__background{position:relative;top:0;left:0}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element{color:#555!important;-webkit-text-fill-color:#555555!important}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#555!important}.mat-mdc-card{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);padding:16px}.mat-mdc-card-content{padding:0!important}.mat-mdc-dialog-surface{padding:24px}.mat-mdc-dialog-title{padding:0!important}.mat-mdc-dialog-title .mat-mdc-dialog-title:before{height:0!important}.mat-mdc-dialog-title *{position:relative;top:-30px!important}.mat-mdc-dialog-container .mat-mdc-dialog-title+.mat-mdc-dialog-content{padding-top:6px!important}.mdc-data-table__cell,.mdc-data-table__header-cell{padding:0 8px!important}.mdc-data-table__row:last-child .mat-mdc-cell{border-bottom:inset!important}.mat-column-actions .mat-mdc-icon-button{width:30px!important;height:30px!important;top:6px!important}.mat-column-actions .mat-mdc-icon-button .mat-icon{bottom:9px!important;right:9px!important}.mat-mdc-progress-bar{border-radius:2px}.chip-mini-grey{background-color:#d9d9d9!important;border-radius:3px;display:inline-block;padding:0 6px;font-size:13px}.chip-mini-outline{background-color:#fff!important;border-radius:3px;display:inline-block;padding:0 6px;outline:1px solid #bbb;font-size:13px}.techlify-badge-grey-outlined{background-color:#f2f3f5!important;font-weight:400!important;font-size:12px!important;color:#000!important}.techlify-badge-white-outlined{font-weight:400!important;font-size:12px!important;border-style:solid!important;border-width:thin!important;color:#000!important;border-color:#000!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuditLogForModelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-audit-log-for-model', template: "<ng-container *ngIf=\"isIconView\">\n    <app-techlify-icon *ngIf=\"logView==='recent'\" name=\"history\" matTooltip=\"Recent Audit Log\"\n        (click)=\"$event.stopPropagation();getLogView()\" class=\"clickable\"></app-techlify-icon>\n    <app-techlify-icon *ngIf=\"logView==='all'\" name=\"history\" matTooltip=\"All Audit Logs\"\n        (click)=\"$event.stopPropagation();getLogsView()\" class=\"clickable\"></app-techlify-icon>\n</ng-container>\n\n\n<ng-container *ngIf=\"!isIconView\">\n    <button type=\"button\" *ngIf=\"logView==='recent'\" mat-icon-button matTooltip=\"Recent Audit Log\"\n        (click)=\"$event.stopPropagation();getLogView()\">\n        <mat-icon>history</mat-icon>\n    </button>\n\n    <button type=\"button\" *ngIf=\"logView==='all'\" mat-icon-button matTooltip=\"All Audit Logs\"\n        (click)=\"$event.stopPropagation();getLogsView()\">\n        <mat-icon>history</mat-icon>\n    </button>\n</ng-container>", styles: [".icon-md{height:24px!important;width:24px!important;font-size:24px!important;margin:0 1px}.icon-sm{height:20px!important;width:20px!important;font-size:20px!important}.icon-xs{height:16px!important;width:16px!important;font-size:16px!important}.fl-md{width:200px!important}.fl-md .mat-mdc-form-field{width:100%!important}.fl-sm{width:150px!important}.fl-sm .mat-mdc-form-field{width:100%!important}.mat-btn-md{height:25px!important;padding:0 8px!important}.fs-12{font-size:12px!important}.fs-16{font-size:16px!important}.fs-13{font-size:13px!important}.fs-18{font-size:18px!important}.clickable:hover{cursor:pointer}.mat-mdc-form-field-hint-wrapper{padding:0 4px!important}.nil-subscript-wrapper .mat-mdc-form-field-subscript-wrapper{height:0!important}.create-another .mat-mdc-checkbox label{margin:0!important}.create-another .mdc-checkbox{padding:0!important}.create-another .mdc-checkbox__background{position:relative;top:0;left:0}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element{color:#555!important;-webkit-text-fill-color:#555555!important}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#555!important}\n"] }]
+            args: [{ selector: 'app-audit-log-for-model', template: "<ng-container *ngIf=\"isIconView\">\n    <app-techlify-icon *ngIf=\"logView==='recent'\" name=\"history\" matTooltip=\"Recent Audit Log\"\n        (click)=\"$event.stopPropagation();getLogView()\" class=\"clickable\"></app-techlify-icon>\n    <app-techlify-icon *ngIf=\"logView==='all'\" name=\"history\" matTooltip=\"All Audit Logs\"\n        (click)=\"$event.stopPropagation();getLogsView()\" class=\"clickable\"></app-techlify-icon>\n</ng-container>\n\n\n<ng-container *ngIf=\"!isIconView\">\n    <button type=\"button\" *ngIf=\"logView==='recent'\" mat-icon-button matTooltip=\"Recent Audit Log\"\n        (click)=\"$event.stopPropagation();getLogView()\">\n        <mat-icon>history</mat-icon>\n    </button>\n\n    <button type=\"button\" *ngIf=\"logView==='all'\" mat-icon-button matTooltip=\"All Audit Logs\"\n        (click)=\"$event.stopPropagation();getLogsView()\">\n        <mat-icon>history</mat-icon>\n    </button>\n</ng-container>", styles: [".fl-md{width:200px!important}.fl-md .mat-mdc-form-field{width:100%!important}.fl-sm{width:150px!important}.fl-sm .mat-mdc-form-field{width:100%!important}.wpx-50{width:50px!important}.wpx-100{width:100px!important}.wpx-120{width:120px!important}.wpx-125{width:125px!important}.wpx-150{width:150px!important}.wpx-200{width:200px!important}.wpx-250{width:250px!important}.min-wpx-200{min-width:200px!important}.max-width-px-115{max-width:115px}.w-description{width:300px!important}.side-panel{width:300px!important;min-width:300px!important;flex-shrink:0!important}.h-250px{height:250px!important}.scroll-y{overflow-y:auto}.flex-basis-0{flex-basis:0}.flex-basis-5{flex-basis:5%}.flex-basis-8{flex-basis:8%}.flex-basis-10{flex-basis:10%}.flex-basis-15{flex-basis:15%}.flex-basis-20{flex-basis:20%}.flex-basis-25{flex-basis:25%}.flex-basis-30{flex-basis:30%}.flex-basis-35{flex-basis:35%}.flex-basis-40{flex-basis:40%}.flex-basis-45{flex-basis:45%}.flex-basis-48{flex-basis:48%}.flex-basis-49{flex-basis:49%}.flex-basis-50{flex-basis:50%}.flex-basis-60{flex-basis:60%}.flex-basis-65{flex-basis:65%}.flex-basis-70{flex-basis:70%}.flex-basis-80{flex-basis:80%}.flex-basis-90{flex-basis:90%}.flex-basis-95{flex-basis:95%}.flex-basis-100{flex-basis:100%}.flex-basis-50-minus-1rem{flex-basis:calc(50% - 1rem)}.flex-basis-50-minus-0-2rem{flex-basis:calc(50% - .2rem)}.flex-basis-20-minus-1rem{flex-basis:calc(20% - 1rem)}.flex-basis-15-minus-1rem{flex-basis:calc(15% - 1rem)}.flex-basis-50-minus-4px{flex-basis:calc(50% - 4px)}@media (min-width: 992px){.flex-lg-basis-50{flex-basis:50%}}@media (min-width: 1200px){.flex-xl-basis-30{flex-basis:30%}.flex-xl-basis-30-minus-1rem{flex:0 1 calc(30% - 1rem)}}.column-gap-1{column-gap:.25rem!important}.column-gap-2{column-gap:.5rem!important}.column-gap-3{column-gap:1rem!important}.column-gap-4{column-gap:1.5rem!important}.column-gap-5{column-gap:3rem!important}button,a,input{outline:none!important}::-webkit-scrollbar{width:.5em}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:gray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#4d4c4c}.icon-md{height:24px!important;width:24px!important;font-size:24px!important;margin:0 1px}.icon-sm{height:20px!important;width:20px!important;font-size:20px!important}.icon-xs{height:16px!important;width:16px!important;font-size:16px!important}.mat-icon-xl{height:40px!important;width:40px!important;font-size:40px!important}.mat-icon-20px{font-size:20px!important;height:20px!important;width:20px!important}.mat-small-icon{height:16px!important;width:16px!important;font-size:16px!important}.mat-btn-md{height:25px!important;padding:0 8px!important}.mdc-button__label{letter-spacing:normal!important}.mat-mdc-button .mat-icon{height:24px!important;width:24px!important;font-size:24px!important}.mat-button-toggle-group{height:48px!important;align-items:center}.mat-button-toggle-button{height:48px!important}.mat-button-toggle-label-content{padding:0 8px!important;font-size:14px!important}.mat-mdc-slide-toggle label{margin:0!important}.small-slide-toggle{transform:scale(.8);transform-origin:left center}.fs-8{font-size:8px!important}.fs-12{font-size:12px!important}.fs-13{font-size:13px!important}.fs-16{font-size:16px!important}.fs-18{font-size:18px!important}.clickable:hover{cursor:pointer}.mat-mdc-form-field-hint-wrapper{padding:0 4px!important}.mat-mdc-floating-label{pointer-events:none!important}.nil-subscript-wrapper .mat-mdc-form-field-subscript-wrapper{height:0!important}.create-another .mat-mdc-checkbox label{margin:0!important}.create-another .mdc-checkbox{padding:0!important}.create-another .mdc-checkbox__background{position:relative;top:0;left:0}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element{color:#555!important;-webkit-text-fill-color:#555555!important}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#555!important}.mat-mdc-card{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);padding:16px}.mat-mdc-card-content{padding:0!important}.mat-mdc-dialog-surface{padding:24px}.mat-mdc-dialog-title{padding:0!important}.mat-mdc-dialog-title .mat-mdc-dialog-title:before{height:0!important}.mat-mdc-dialog-title *{position:relative;top:-30px!important}.mat-mdc-dialog-container .mat-mdc-dialog-title+.mat-mdc-dialog-content{padding-top:6px!important}.mdc-data-table__cell,.mdc-data-table__header-cell{padding:0 8px!important}.mdc-data-table__row:last-child .mat-mdc-cell{border-bottom:inset!important}.mat-column-actions .mat-mdc-icon-button{width:30px!important;height:30px!important;top:6px!important}.mat-column-actions .mat-mdc-icon-button .mat-icon{bottom:9px!important;right:9px!important}.mat-mdc-progress-bar{border-radius:2px}.chip-mini-grey{background-color:#d9d9d9!important;border-radius:3px;display:inline-block;padding:0 6px;font-size:13px}.chip-mini-outline{background-color:#fff!important;border-radius:3px;display:inline-block;padding:0 6px;outline:1px solid #bbb;font-size:13px}.techlify-badge-grey-outlined{background-color:#f2f3f5!important;font-weight:400!important;font-size:12px!important;color:#000!important}.techlify-badge-white-outlined{font-weight:400!important;font-size:12px!important;border-style:solid!important;border-width:thin!important;color:#000!important;border-color:#000!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialog }], propDecorators: { isIconView: [{
                 type: Input
             }], modelType: [{

package/esm2022/lib/delete-button/techlify-delete-button.component.mjs

@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { Component, input, output } from '@angular/core';
+import { finalize } from 'rxjs/operators';
 import { MaterialModule } from '../material.module';
 import { TechlifyIconModule } from '../techlify-icon/techlify-icon.module';
 import { ActionPopupComponent } from '../action-popup';
@@ -20,6 +21,8 @@ export class TechlifyDeleteButtonComponent {
         this.message = input();
         this.service = input.required();
         this.deleted = output();
+        //Emits true while the delete request is in progress, so the parent can show its own progress indicator
+        this.loading = output();
     }
     open() {
         let message = this.message();
@@ -43,7 +46,10 @@ export class TechlifyDeleteButtonComponent {
                 console.error('Service not provided');
                 return;
             }
-            this.service().delete(this.model()).subscribe({
+            this.loading.emit(true);
+            this.service().delete(this.model())
+                .pipe(finalize(() => this.loading.emit(false)))
+                .subscribe({
                 next: (response) => {
                     this.alertService.addAlert('Successfully Deleted', 'success');
                     this.deleted.emit(response.item);
@@ -55,7 +61,7 @@ export class TechlifyDeleteButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyDeleteButtonComponent, deps: [{ token: i1.MatDialog }, { token: i2.AlertService }, { token: i2.ErrorHandlerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: TechlifyDeleteButtonComponent, isStandalone: true, selector: "app-techlify-delete-button", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<app-techlify-icon role='button' name='delete' (click)=\"open()\"></app-techlify-icon>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MaterialModule }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: i3.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: TechlifyDeleteButtonComponent, isStandalone: true, selector: "app-techlify-delete-button", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { deleted: "deleted", loading: "loading" }, ngImport: i0, template: "<app-techlify-icon role='button' name='delete' (click)=\"open()\"></app-techlify-icon>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MaterialModule }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: i3.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyDeleteButtonComponent, decorators: [{
             type: Component,
@@ -65,4 +71,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TechlifyIconModule
                     ], template: "<app-techlify-icon role='button' name='delete' (click)=\"open()\"></app-techlify-icon>" }]
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2.AlertService }, { type: i2.ErrorHandlerService }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVjaGxpZnktZGVsZXRlLWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdGVjaGxpZnktY29yZS9zcmMvbGliL2RlbGV0ZS1idXR0b24vdGVjaGxpZnktZGVsZXRlLWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdGVjaGxpZnktY29yZS9zcmMvbGliL2RlbGV0ZS1idXR0b24vdGVjaGxpZnktZGVsZXRlLWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRWpFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUNwRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQztBQUMzRSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7Ozs7QUFvQnZELE1BQU0sT0FBTyw2QkFBNkI7SUFZdEMsWUFDWSxNQUFpQixFQUNmLFlBQTBCLEVBQzFCLFlBQWlDO1FBRm5DLFdBQU0sR0FBTixNQUFNLENBQVc7UUFDZixpQkFBWSxHQUFaLFlBQVksQ0FBYztRQUMxQixpQkFBWSxHQUFaLFlBQVksQ0FBcUI7UUFiL0MsU0FBSSxHQUFHLEtBQUssQ0FBbUI7WUFDM0IsS0FBSyxFQUFFLGVBQWU7WUFDdEIsSUFBSSxFQUFFLEVBQUU7U0FDWCxDQUFDLENBQUM7UUFDSCxVQUFLLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBTyxDQUFDO1FBQzlCLFlBQU8sR0FBRyxLQUFLLEVBQVUsQ0FBQztRQUMxQixZQUFPLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBbUIsQ0FBQztRQUU1QyxZQUFPLEdBQUcsTUFBTSxFQUFXLENBQUM7SUFNeEIsQ0FBQztJQUVMLElBQUk7UUFDQSxJQUFJLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDN0IsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1FBRXpCLElBQUksQ0FBQyxPQUFPLElBQUksSUFBSSxFQUFFLEtBQUssRUFBRSxDQUFDO1lBQzFCLE9BQU8sR0FBRyxpQkFBaUIsSUFBSSxDQUFDLElBQUksSUFBSSxPQUFPLFlBQVksSUFBSSxDQUFDLEtBQUsscUVBQXFFLENBQUM7UUFDL0ksQ0FBQzthQUFNLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNsQixPQUFPLEdBQUcsNkNBQTZDLENBQUM7UUFDNUQsQ0FBQztRQUVELElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLG9CQUFvQixFQUFFO1lBQ25DLElBQUksRUFBRTtnQkFDRixLQUFLLEVBQUUsUUFBUTtnQkFDZixPQUFPLEVBQUUsT0FBTzthQUNuQjtTQUNKLENBQUMsQ0FBQyxXQUFXLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FBQyxNQUFNLEVBQUUsRUFBRTtZQUNsQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7Z0JBQ1YsT0FBTztZQUNYLENBQUM7WUFFRCxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxFQUFFLENBQUM7Z0JBQ2xCLE9BQU8sQ0FBQyxLQUFLLENBQUMsc0JBQXNCLENBQUMsQ0FBQztnQkFDdEMsT0FBTztZQUNYLENBQUM7WUFFRCxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLFNBQVMsQ0FBQztnQkFDMUMsSUFBSSxFQUFFLENBQUMsUUFBYSxFQUFFLEVBQUU7b0JBQ3BCLElBQUksQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLHNCQUFzQixFQUFFLFNBQVMsQ0FBQyxDQUFDO29CQUM5RCxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBQ3JDLENBQUM7Z0JBQ0QsS0FBSyxFQUFFLENBQUMsS0FBSyxFQUFFLEVBQUU7b0JBQ2IsSUFBSSxDQUFDLFlBQVksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7Z0JBQ3pDLENBQUM7YUFDSixDQUFDLENBQUE7UUFFTixDQUFDLENBQUMsQ0FBQTtJQUNOLENBQUM7K0dBdERRLDZCQUE2QjttR0FBN0IsNkJBQTZCLDBtQkN6QjFDLHdGQUFvRiwyQ0RtQjVFLFlBQVksOEJBQ1osY0FBYyw4QkFDZCxrQkFBa0I7OzRGQUliLDZCQUE2QjtrQkFYekMsU0FBUzsrQkFDSSw0QkFBNEIsY0FFMUIsSUFBSSxXQUNQO3dCQUNMLFlBQVk7d0JBQ1osY0FBYzt3QkFDZCxrQkFBa0I7cUJBQ3JCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgaW5wdXQsIE9uSW5pdCwgb3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXREaWFsb2cgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9kaWFsb2cnO1xuaW1wb3J0IHsgTWF0ZXJpYWxNb2R1bGUgfSBmcm9tICcuLi9tYXRlcmlhbC5tb2R1bGUnO1xuaW1wb3J0IHsgVGVjaGxpZnlJY29uTW9kdWxlIH0gZnJvbSAnLi4vdGVjaGxpZnktaWNvbi90ZWNobGlmeS1pY29uLm1vZHVsZSc7XG5pbXBvcnQgeyBBY3Rpb25Qb3B1cENvbXBvbmVudCB9IGZyb20gJy4uL2FjdGlvbi1wb3B1cCc7XG5pbXBvcnQgeyBUZWNobGlmeVNlcnZpY2UgfSBmcm9tICcuLi9iYXNlLW1vZGVsJztcbmltcG9ydCB7IEFsZXJ0U2VydmljZSwgRXJyb3JIYW5kbGVyU2VydmljZSB9IGZyb20gJy4uL2NvcmUnO1xuXG5pbnRlcmZhY2UgRGVsZXRlQnV0dG9uRGF0YSB7XG4gICAgdGl0bGU6IHN0cmluZztcbiAgICB0eXBlOiBzdHJpbmc7XG59XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnYXBwLXRlY2hsaWZ5LWRlbGV0ZS1idXR0b24nLFxuICAgIHRlbXBsYXRlVXJsOiAnLi90ZWNobGlmeS1kZWxldGUtYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIGltcG9ydHM6IFtcbiAgICAgICAgQ29tbW9uTW9kdWxlLFxuICAgICAgICBNYXRlcmlhbE1vZHVsZSxcbiAgICAgICAgVGVjaGxpZnlJY29uTW9kdWxlXG4gICAgXVxufSlcblxuZXhwb3J0IGNsYXNzIFRlY2hsaWZ5RGVsZXRlQnV0dG9uQ29tcG9uZW50IHtcblxuICAgIGRhdGEgPSBpbnB1dDxEZWxldGVCdXR0b25EYXRhPih7XG4gICAgICAgIHRpdGxlOiAnRGVsZXRlIFJlY29yZCcsXG4gICAgICAgIHR5cGU6ICcnXG4gICAgfSk7XG4gICAgbW9kZWwgPSBpbnB1dC5yZXF1aXJlZDxhbnk+KCk7XG4gICAgbWVzc2FnZSA9IGlucHV0PHN0cmluZz4oKTtcbiAgICBzZXJ2aWNlID0gaW5wdXQucmVxdWlyZWQ8VGVjaGxpZnlTZXJ2aWNlPigpO1xuXG4gICAgZGVsZXRlZCA9IG91dHB1dDxib29sZWFuPigpO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIHByaXZhdGUgZGlhbG9nOiBNYXREaWFsb2csXG4gICAgICAgIHByb3RlY3RlZCBhbGVydFNlcnZpY2U6IEFsZXJ0U2VydmljZSxcbiAgICAgICAgcHJvdGVjdGVkIGVycm9ySGFuZGxlcjogRXJyb3JIYW5kbGVyU2VydmljZVxuICAgICkgeyB9XG5cbiAgICBvcGVuKCkge1xuICAgICAgICBsZXQgbWVzc2FnZSA9IHRoaXMubWVzc2FnZSgpO1xuICAgICAgICBjb25zdCBkYXRhID0gdGhpcy5kYXRhKCk7XG5cbiAgICAgICAgaWYgKCFtZXNzYWdlICYmIGRhdGE/LnRpdGxlKSB7XG4gICAgICAgICAgICBtZXNzYWdlID0gYERlbGV0aW5nIHRoaXMgJHtkYXRhLnR5cGUgfHwgJ21vZGVsJ30gPHN0cm9uZz4ke2RhdGEudGl0bGV9PC9zdHJvbmc+IGNhbm5vdCBiZSB1bmRvbmUuIDxicj4gQXJlIHlvdSBzdXJlIHlvdSB3YW50IHRvIGNvbnRpbnVlP2A7XG4gICAgICAgIH0gZWxzZSBpZiAoIW1lc3NhZ2UpIHtcbiAgICAgICAgICAgIG1lc3NhZ2UgPSAnQXJlIHlvdSBzdXJlIHlvdSB3YW50IHRvIGRlbGV0ZSB0aGlzIG1vZGVsPyc7XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLmRpYWxvZy5vcGVuKEFjdGlvblBvcHVwQ29tcG9uZW50LCB7XG4gICAgICAgICAgICBkYXRhOiB7XG4gICAgICAgICAgICAgICAgdGl0bGU6ICdEZWxldGUnLFxuICAgICAgICAgICAgICAgIG1lc3NhZ2U6IG1lc3NhZ2UsXG4gICAgICAgICAgICB9XG4gICAgICAgIH0pLmFmdGVyQ2xvc2VkKCkuc3Vic2NyaWJlKChyZXN1bHQpID0+IHtcbiAgICAgICAgICAgIGlmICghcmVzdWx0KSB7XG4gICAgICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICBpZiAoIXRoaXMuc2VydmljZSgpKSB7XG4gICAgICAgICAgICAgICAgY29uc29sZS5lcnJvcignU2VydmljZSBub3QgcHJvdmlkZWQnKTtcbiAgICAgICAgICAgICAgICByZXR1cm47XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIHRoaXMuc2VydmljZSgpLmRlbGV0ZSh0aGlzLm1vZGVsKCkpLnN1YnNjcmliZSh7XG4gICAgICAgICAgICAgICAgbmV4dDogKHJlc3BvbnNlOiBhbnkpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgdGhpcy5hbGVydFNlcnZpY2UuYWRkQWxlcnQoJ1N1Y2Nlc3NmdWxseSBEZWxldGVkJywgJ3N1Y2Nlc3MnKTtcbiAgICAgICAgICAgICAgICAgICAgdGhpcy5kZWxldGVkLmVtaXQocmVzcG9uc2UuaXRlbSk7XG4gICAgICAgICAgICAgICAgfSxcbiAgICAgICAgICAgICAgICBlcnJvcjogKGVycm9yKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIHRoaXMuZXJyb3JIYW5kbGVyLmhhbmRsZUVycm9yKGVycm9yKTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9KVxuXG4gICAgICAgIH0pXG4gICAgfVxuXG59XG4iLCI8YXBwLXRlY2hsaWZ5LWljb24gcm9sZT0nYnV0dG9uJyBuYW1lPSdkZWxldGUnIChjbGljayk9XCJvcGVuKClcIj48L2FwcC10ZWNobGlmeS1pY29uPiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVjaGxpZnktZGVsZXRlLWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdGVjaGxpZnktY29yZS9zcmMvbGliL2RlbGV0ZS1idXR0b24vdGVjaGxpZnktZGVsZXRlLWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdGVjaGxpZnktY29yZS9zcmMvbGliL2RlbGV0ZS1idXR0b24vdGVjaGxpZnktZGVsZXRlLWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRWpFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMxQyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDcEQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFDM0UsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0saUJBQWlCLENBQUM7Ozs7O0FBb0J2RCxNQUFNLE9BQU8sNkJBQTZCO0lBY3RDLFlBQ1ksTUFBaUIsRUFDZixZQUEwQixFQUMxQixZQUFpQztRQUZuQyxXQUFNLEdBQU4sTUFBTSxDQUFXO1FBQ2YsaUJBQVksR0FBWixZQUFZLENBQWM7UUFDMUIsaUJBQVksR0FBWixZQUFZLENBQXFCO1FBZi9DLFNBQUksR0FBRyxLQUFLLENBQW1CO1lBQzNCLEtBQUssRUFBRSxlQUFlO1lBQ3RCLElBQUksRUFBRSxFQUFFO1NBQ1gsQ0FBQyxDQUFDO1FBQ0gsVUFBSyxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQU8sQ0FBQztRQUM5QixZQUFPLEdBQUcsS0FBSyxFQUFVLENBQUM7UUFDMUIsWUFBTyxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQW1CLENBQUM7UUFFNUMsWUFBTyxHQUFHLE1BQU0sRUFBVyxDQUFDO1FBQzVCLHVHQUF1RztRQUN2RyxZQUFPLEdBQUcsTUFBTSxFQUFXLENBQUM7SUFNeEIsQ0FBQztJQUVMLElBQUk7UUFDQSxJQUFJLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDN0IsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1FBRXpCLElBQUksQ0FBQyxPQUFPLElBQUksSUFBSSxFQUFFLEtBQUssRUFBRSxDQUFDO1lBQzFCLE9BQU8sR0FBRyxpQkFBaUIsSUFBSSxDQUFDLElBQUksSUFBSSxPQUFPLFlBQVksSUFBSSxDQUFDLEtBQUsscUVBQXFFLENBQUM7UUFDL0ksQ0FBQzthQUFNLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNsQixPQUFPLEdBQUcsNkNBQTZDLENBQUM7UUFDNUQsQ0FBQztRQUVELElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLG9CQUFvQixFQUFFO1lBQ25DLElBQUksRUFBRTtnQkFDRixLQUFLLEVBQUUsUUFBUTtnQkFDZixPQUFPLEVBQUUsT0FBTzthQUNuQjtTQUNKLENBQUMsQ0FBQyxXQUFXLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FBQyxNQUFNLEVBQUUsRUFBRTtZQUNsQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7Z0JBQ1YsT0FBTztZQUNYLENBQUM7WUFFRCxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxFQUFFLENBQUM7Z0JBQ2xCLE9BQU8sQ0FBQyxLQUFLLENBQUMsc0JBQXNCLENBQUMsQ0FBQztnQkFDdEMsT0FBTztZQUNYLENBQUM7WUFFRCxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUN4QixJQUFJLENBQUMsT0FBTyxFQUFFLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztpQkFDOUIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO2lCQUM5QyxTQUFTLENBQUM7Z0JBQ1AsSUFBSSxFQUFFLENBQUMsUUFBYSxFQUFFLEVBQUU7b0JBQ3BCLElBQUksQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLHNCQUFzQixFQUFFLFNBQVMsQ0FBQyxDQUFDO29CQUM5RCxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBQ3JDLENBQUM7Z0JBQ0QsS0FBSyxFQUFFLENBQUMsS0FBSyxFQUFFLEVBQUU7b0JBQ2IsSUFBSSxDQUFDLFlBQVksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7Z0JBQ3pDLENBQUM7YUFDSixDQUFDLENBQUM7UUFFWCxDQUFDLENBQUMsQ0FBQTtJQUNOLENBQUM7K0dBM0RRLDZCQUE2QjttR0FBN0IsNkJBQTZCLDhuQkMxQjFDLHdGQUFvRiwyQ0RvQjVFLFlBQVksOEJBQ1osY0FBYyw4QkFDZCxrQkFBa0I7OzRGQUliLDZCQUE2QjtrQkFYekMsU0FBUzsrQkFDSSw0QkFBNEIsY0FFMUIsSUFBSSxXQUNQO3dCQUNMLFlBQVk7d0JBQ1osY0FBYzt3QkFDZCxrQkFBa0I7cUJBQ3JCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgaW5wdXQsIE9uSW5pdCwgb3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXREaWFsb2cgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9kaWFsb2cnO1xuaW1wb3J0IHsgZmluYWxpemUgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBNYXRlcmlhbE1vZHVsZSB9IGZyb20gJy4uL21hdGVyaWFsLm1vZHVsZSc7XG5pbXBvcnQgeyBUZWNobGlmeUljb25Nb2R1bGUgfSBmcm9tICcuLi90ZWNobGlmeS1pY29uL3RlY2hsaWZ5LWljb24ubW9kdWxlJztcbmltcG9ydCB7IEFjdGlvblBvcHVwQ29tcG9uZW50IH0gZnJvbSAnLi4vYWN0aW9uLXBvcHVwJztcbmltcG9ydCB7IFRlY2hsaWZ5U2VydmljZSB9IGZyb20gJy4uL2Jhc2UtbW9kZWwnO1xuaW1wb3J0IHsgQWxlcnRTZXJ2aWNlLCBFcnJvckhhbmRsZXJTZXJ2aWNlIH0gZnJvbSAnLi4vY29yZSc7XG5cbmludGVyZmFjZSBEZWxldGVCdXR0b25EYXRhIHtcbiAgICB0aXRsZTogc3RyaW5nO1xuICAgIHR5cGU6IHN0cmluZztcbn1cblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdhcHAtdGVjaGxpZnktZGVsZXRlLWJ1dHRvbicsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3RlY2hsaWZ5LWRlbGV0ZS1idXR0b24uY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgaW1wb3J0czogW1xuICAgICAgICBDb21tb25Nb2R1bGUsXG4gICAgICAgIE1hdGVyaWFsTW9kdWxlLFxuICAgICAgICBUZWNobGlmeUljb25Nb2R1bGVcbiAgICBdXG59KVxuXG5leHBvcnQgY2xhc3MgVGVjaGxpZnlEZWxldGVCdXR0b25Db21wb25lbnQge1xuXG4gICAgZGF0YSA9IGlucHV0PERlbGV0ZUJ1dHRvbkRhdGE+KHtcbiAgICAgICAgdGl0bGU6ICdEZWxldGUgUmVjb3JkJyxcbiAgICAgICAgdHlwZTogJydcbiAgICB9KTtcbiAgICBtb2RlbCA9IGlucHV0LnJlcXVpcmVkPGFueT4oKTtcbiAgICBtZXNzYWdlID0gaW5wdXQ8c3RyaW5nPigpO1xuICAgIHNlcnZpY2UgPSBpbnB1dC5yZXF1aXJlZDxUZWNobGlmeVNlcnZpY2U+KCk7XG5cbiAgICBkZWxldGVkID0gb3V0cHV0PGJvb2xlYW4+KCk7XG4gICAgLy9FbWl0cyB0cnVlIHdoaWxlIHRoZSBkZWxldGUgcmVxdWVzdCBpcyBpbiBwcm9ncmVzcywgc28gdGhlIHBhcmVudCBjYW4gc2hvdyBpdHMgb3duIHByb2dyZXNzIGluZGljYXRvclxuICAgIGxvYWRpbmcgPSBvdXRwdXQ8Ym9vbGVhbj4oKTtcblxuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBwcml2YXRlIGRpYWxvZzogTWF0RGlhbG9nLFxuICAgICAgICBwcm90ZWN0ZWQgYWxlcnRTZXJ2aWNlOiBBbGVydFNlcnZpY2UsXG4gICAgICAgIHByb3RlY3RlZCBlcnJvckhhbmRsZXI6IEVycm9ySGFuZGxlclNlcnZpY2VcbiAgICApIHsgfVxuXG4gICAgb3BlbigpIHtcbiAgICAgICAgbGV0IG1lc3NhZ2UgPSB0aGlzLm1lc3NhZ2UoKTtcbiAgICAgICAgY29uc3QgZGF0YSA9IHRoaXMuZGF0YSgpO1xuXG4gICAgICAgIGlmICghbWVzc2FnZSAmJiBkYXRhPy50aXRsZSkge1xuICAgICAgICAgICAgbWVzc2FnZSA9IGBEZWxldGluZyB0aGlzICR7ZGF0YS50eXBlIHx8ICdtb2RlbCd9IDxzdHJvbmc+JHtkYXRhLnRpdGxlfTwvc3Ryb25nPiBjYW5ub3QgYmUgdW5kb25lLiA8YnI+IEFyZSB5b3Ugc3VyZSB5b3Ugd2FudCB0byBjb250aW51ZT9gO1xuICAgICAgICB9IGVsc2UgaWYgKCFtZXNzYWdlKSB7XG4gICAgICAgICAgICBtZXNzYWdlID0gJ0FyZSB5b3Ugc3VyZSB5b3Ugd2FudCB0byBkZWxldGUgdGhpcyBtb2RlbD8nO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5kaWFsb2cub3BlbihBY3Rpb25Qb3B1cENvbXBvbmVudCwge1xuICAgICAgICAgICAgZGF0YToge1xuICAgICAgICAgICAgICAgIHRpdGxlOiAnRGVsZXRlJyxcbiAgICAgICAgICAgICAgICBtZXNzYWdlOiBtZXNzYWdlLFxuICAgICAgICAgICAgfVxuICAgICAgICB9KS5hZnRlckNsb3NlZCgpLnN1YnNjcmliZSgocmVzdWx0KSA9PiB7XG4gICAgICAgICAgICBpZiAoIXJlc3VsdCkge1xuICAgICAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgaWYgKCF0aGlzLnNlcnZpY2UoKSkge1xuICAgICAgICAgICAgICAgIGNvbnNvbGUuZXJyb3IoJ1NlcnZpY2Ugbm90IHByb3ZpZGVkJyk7XG4gICAgICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICB0aGlzLmxvYWRpbmcuZW1pdCh0cnVlKTtcbiAgICAgICAgICAgIHRoaXMuc2VydmljZSgpLmRlbGV0ZSh0aGlzLm1vZGVsKCkpXG4gICAgICAgICAgICAgICAgLnBpcGUoZmluYWxpemUoKCkgPT4gdGhpcy5sb2FkaW5nLmVtaXQoZmFsc2UpKSlcbiAgICAgICAgICAgICAgICAuc3Vic2NyaWJlKHtcbiAgICAgICAgICAgICAgICAgICAgbmV4dDogKHJlc3BvbnNlOiBhbnkpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHRoaXMuYWxlcnRTZXJ2aWNlLmFkZEFsZXJ0KCdTdWNjZXNzZnVsbHkgRGVsZXRlZCcsICdzdWNjZXNzJyk7XG4gICAgICAgICAgICAgICAgICAgICAgICB0aGlzLmRlbGV0ZWQuZW1pdChyZXNwb25zZS5pdGVtKTtcbiAgICAgICAgICAgICAgICAgICAgfSxcbiAgICAgICAgICAgICAgICAgICAgZXJyb3I6IChlcnJvcikgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy5lcnJvckhhbmRsZXIuaGFuZGxlRXJyb3IoZXJyb3IpO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgfSk7XG5cbiAgICAgICAgfSlcbiAgICB9XG5cbn1cbiIsIjxhcHAtdGVjaGxpZnktaWNvbiByb2xlPSdidXR0b24nIG5hbWU9J2RlbGV0ZScgKGNsaWNrKT1cIm9wZW4oKVwiPjwvYXBwLXRlY2hsaWZ5LWljb24+Il19

package/esm2022/lib/entity-files/entity-file-list/entity-file-list.component.mjs

@@ -208,7 +208,7 @@ export class EntityFileListComponent extends TechlifyListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EntityFileListComponent, deps: [{ token: i1.EntityFileService }, { token: i2.AlertService }, { token: i3.UntypedFormBuilder }, { token: i4.ErrorHandlerService }, { token: i5.NgxPermissionsService }, { token: i6.FormConfigurationFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: EntityFileListComponent, selector: "app-entity-file-list, app-entity-files-view-all", inputs: { entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: false, isRequired: false, transformFunction: null }, entityType: { classPropertyName: "entityType", publicName: "entityType", isSignal: false, isRequired: false, transformFunction: null }, viewOnly: { classPropertyName: "viewOnly", publicName: "viewOnly", isSignal: false, isRequired: false, transformFunction: null }, removeSearch: { classPropertyName: "removeSearch", publicName: "removeSearch", isSignal: false, isRequired: false, transformFunction: null }, hideTitleAndDetails: { classPropertyName: "hideTitleAndDetails", publicName: "hideTitleAndDetails", isSignal: false, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: false, isRequired: false, transformFunction: null }, allowMultipleFiles: { classPropertyName: "allowMultipleFiles", publicName: "allowMultipleFiles", isSignal: false, isRequired: false, transformFunction: null }, allowBulkUpdate: { classPropertyName: "allowBulkUpdate", publicName: "allowBulkUpdate", isSignal: false, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: false, isRequired: false, transformFunction: null }, fileDropperHeight: { classPropertyName: "fileDropperHeight", publicName: "fileDropperHeight", isSignal: false, isRequired: false, transformFunction: null }, isShowDragDropSection: { classPropertyName: "isShowDragDropSection", publicName: "isShowDragDropSection", isSignal: false, isRequired: false, transformFunction: null }, defaultFilters: { classPropertyName: "defaultFilters", publicName: "defaultFilters", isSignal: true, isRequired: false, transformFunction: null }, isFilterPatchFromRoute: { classPropertyName: "isFilterPatchFromRoute", publicName: "isFilterPatchFromRoute", isSignal: false, isRequired: false, transformFunction: null }, useTechlifyTags: { classPropertyName: "useTechlifyTags", publicName: "useTechlifyTags", isSignal: false, isRequired: false, transformFunction: null }, techlifyTagCategories: { classPropertyName: "techlifyTagCategories", publicName: "techlifyTagCategories", isSignal: false, isRequired: false, transformFunction: null }, techlifyTagConfig: { classPropertyName: "techlifyTagConfig", publicName: "techlifyTagConfig", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, permission: { classPropertyName: "permission", publicName: "permission", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"viewMode === 'list'\">\n  <div *ngIf=\"this.selectedModelIds.length\" class=\"d-none d-md-flex flex-column\">\n    <mat-card class=\"update_card\" *ngIf=\"this.selectedModelIds.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 class=\"d-flex flex-column\">\n        <form [formGroup]=\"updateRowForm\">\n          <div class=\"d-flex flex-column\">\n\n            <mat-form-field class=\"w-100 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)=\"updateRowForm.get('title').setValue('')\">\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 class=\"w-100 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)=\"updateRowForm.get('details').setValue('')\">\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)=\"updateRowForm.get('tag_ids').setValue('')\">\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 class=\"d-flex flex-row gap-3\">\n        <div class=\"d-flex flex-column gap-2 flex-grow-1\">\n          <mat-card>\n            <mat-card-content>\n              <div class=\"d-flex gap-2 align-items-center\">\n                <mat-icon>\n                  description\n                </mat-icon>\n                <h3 class=\"font-weight-bold mb-0\">\n                  {{title}}s\n                </h3>\n                <app-techlify-form-button class=\"ms-2\" *ngIf=\"!viewOnly && isShowCreateAction && entityId\"\n                  [component]=\"entityFileForm()\" [data]=\"formData\"\n                  (saved)=\"modelCreated($event)\"></app-techlify-form-button>\n                <span class=\"flex-grow-1\"></span>\n                <form [formGroup]=\"filterForm\" class=\"d-flex gap-2\">\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=\"filterForm.get('title').value\" matSuffix mat-icon-button\n                      (click)=\"resetFilter('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                  <app-timeline-filter class=\"fl-sm\" formControlName='period_id' labelText=\"Expires On\"\n                    dateFrom=\"expires_on_from\" dateTo=\"expires_on_to\" [form]=\"filterForm\"></app-timeline-filter>\n                </form>\n              </div>\n            </mat-card-content>\n            <mat-card-content class=\"entity-file-card p-0\" *ngIf=\"entityId\">\n              <ng-container *ngTemplateOutlet=\"tableView\"></ng-container>\n            </mat-card-content>\n          </mat-card>\n\n          <mat-card *ngIf=\"!entityId\">\n            <mat-card-content class=\"entity-file-card p-0\">\n              <ng-container *ngTemplateOutlet=\"tableView\"></ng-container>\n            </mat-card-content>\n          </mat-card>\n        </div>\n        <ng-container *ngIf=\"isShowDragDropSection && entityId\">\n          <section style=\"flex: 0 1 30%;\" *ngIf=\"!this.selectedModelIds.length && !viewOnly && isShowCreateAction\">\n            <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\">\n            </app-file-dropper>\n          </section>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <ng-template #tableView>\n    <table mat-table [dataSource]=\"models\" 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)=\"isSelectionModified($event, element)\"\n            [disabled]=\"!models.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          {{element.title}}\n          <ng-container *ngIf=\"useTechlifyTags\">\n            <br>\n            <small class=\"badge badge-secondary mr-1\" *ngFor=\"let tag of element?.tags\">{{tag?.title}}</small>\n          </ng-container>\n\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"expires_on\">\n        <th mat-header-cell *matHeaderCellDef> Expires On </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{element?.expires_on | date:'mediumDate'}}\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\">\n          <span *ngIf=\"element?.file_size\"> {{ element.file_size | fileSize }} </span>\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\" *ngIf=\"element.creator\">\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\" class=\"text-muted\">\n          <div class=\"d-flex flex-row gap-2 text-secondary align-items-center\">\n            <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted clickable\">\n              <mat-icon>download</mat-icon>\n            </a>\n            <app-techlify-form-button *ngIf=\"!viewOnly && isShowUpdateAction\" [component]=\"entityFileForm()\"\n              [model]=\"element\" [data]=\"formData\" (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n            <app-techlify-delete-button *ngIf=\"!viewOnly && isShowDeleteAction\" [model]=\"element\" [service]=\"service\"\n              message=\"Are you sure to proceed delete the file {{element.title}}\"\n              (deleted)=\"modelsDeletedById(element)\">\n            </app-techlify-delete-button>\n          </div>\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  </ng-template>\n\n  <div class=\"d-flex flex-wrap gap-3 mat-typography p-4\" *ngIf=\"displayMode\">\n    <div *ngFor=\"let efile of models\">\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 mb-0\">\n        {{title}}s\n      </h3>\n      <app-techlify-form-button *ngIf=\"!viewOnly && isShowCreateAction\" [component]=\"entityFileForm()\" [data]=\"formData\"\n        (saved)=\"modelCreated($event)\"></app-techlify-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content *ngIf=\"!this.selectedModelIds.length && !viewOnly && isShowCreateAction\" class=\"mt-3\">\n    <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\">\n    </app-file-dropper>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3\">\n    <div *ngFor=\"let entityFile of models\" 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\">{{ entityFile.file_size | fileSize }}</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          <app-techlify-form-button class=\"text-secondary\" *ngIf=\"!viewOnly && isShowUpdateAction\"\n            [component]=\"entityFileForm()\" [model]=\"entityFile\" [data]=\"formData\"\n            (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n          <app-techlify-delete-button *ngIf=\"!viewOnly && isShowDeleteAction\" class='text-secondary ms-1'\n            [model]=\"entityFile\" [service]=\"service\"\n            message=\"Are you sure to proceed delete the file {{entityFile.title}}\"\n            (deleted)=\"modelsDeletedById(entityFile)\">\n          </app-techlify-delete-button>\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>", styles: ["th.mat-header-cell,td.mat-cell,td.mat-footer-cell{padding:2px}.entity-file-card{overflow-x:auto}.clickable:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.DocumentViewerComponent, selector: "app-document-viewer", inputs: ["config", "file", "fileUrl", "disableEdit"], outputs: ["remove"] }, { kind: "component", type: i9.FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i10.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: i11.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i11.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.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: i13.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: i14.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i14.MatLabel, selector: "mat-label" }, { kind: "directive", type: i14.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i15.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i16.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: i17.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i18.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i18.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i18.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i18.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i18.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i18.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i18.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i18.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i18.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i18.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i19.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i19.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i19.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i19.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i20.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i21.ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { kind: "component", type: i22.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: i23.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "component", type: i24.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "component", type: i25.TechlifyTaggerTagFormFieldComponent, selector: "app-techlify-tagger-tag-form-field", inputs: ["config", "modelType", "modelId", "allTags", "categories", "defaultCreateCategory", "required", "disabled", "value", "placeholder"] }, { kind: "pipe", type: i7.DatePipe, name: "date" }, { kind: "pipe", type: i26.WrapPipe, name: "wrap" }, { kind: "pipe", type: i27.FileSizePipe, name: "fileSize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: EntityFileListComponent, selector: "app-entity-file-list, app-entity-files-view-all", inputs: { entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: false, isRequired: false, transformFunction: null }, entityType: { classPropertyName: "entityType", publicName: "entityType", isSignal: false, isRequired: false, transformFunction: null }, viewOnly: { classPropertyName: "viewOnly", publicName: "viewOnly", isSignal: false, isRequired: false, transformFunction: null }, removeSearch: { classPropertyName: "removeSearch", publicName: "removeSearch", isSignal: false, isRequired: false, transformFunction: null }, hideTitleAndDetails: { classPropertyName: "hideTitleAndDetails", publicName: "hideTitleAndDetails", isSignal: false, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: false, isRequired: false, transformFunction: null }, allowMultipleFiles: { classPropertyName: "allowMultipleFiles", publicName: "allowMultipleFiles", isSignal: false, isRequired: false, transformFunction: null }, allowBulkUpdate: { classPropertyName: "allowBulkUpdate", publicName: "allowBulkUpdate", isSignal: false, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: false, isRequired: false, transformFunction: null }, fileDropperHeight: { classPropertyName: "fileDropperHeight", publicName: "fileDropperHeight", isSignal: false, isRequired: false, transformFunction: null }, isShowDragDropSection: { classPropertyName: "isShowDragDropSection", publicName: "isShowDragDropSection", isSignal: false, isRequired: false, transformFunction: null }, defaultFilters: { classPropertyName: "defaultFilters", publicName: "defaultFilters", isSignal: true, isRequired: false, transformFunction: null }, isFilterPatchFromRoute: { classPropertyName: "isFilterPatchFromRoute", publicName: "isFilterPatchFromRoute", isSignal: false, isRequired: false, transformFunction: null }, useTechlifyTags: { classPropertyName: "useTechlifyTags", publicName: "useTechlifyTags", isSignal: false, isRequired: false, transformFunction: null }, techlifyTagCategories: { classPropertyName: "techlifyTagCategories", publicName: "techlifyTagCategories", isSignal: false, isRequired: false, transformFunction: null }, techlifyTagConfig: { classPropertyName: "techlifyTagConfig", publicName: "techlifyTagConfig", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, permission: { classPropertyName: "permission", publicName: "permission", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"viewMode === 'list'\">\n  <div *ngIf=\"this.selectedModelIds.length\" class=\"d-none d-md-flex flex-column\">\n    <mat-card class=\"update_card\" *ngIf=\"this.selectedModelIds.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 class=\"d-flex flex-column\">\n        <form [formGroup]=\"updateRowForm\">\n          <div class=\"d-flex flex-column\">\n\n            <mat-form-field class=\"w-100 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)=\"updateRowForm.get('title').setValue('')\">\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 class=\"w-100 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)=\"updateRowForm.get('details').setValue('')\">\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)=\"updateRowForm.get('tag_ids').setValue('')\">\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 class=\"d-flex flex-row gap-3\">\n        <div class=\"d-flex flex-column gap-2 flex-grow-1\">\n          <mat-card>\n            <mat-card-content>\n              <div class=\"d-flex gap-2 align-items-center\">\n                <mat-icon>\n                  description\n                </mat-icon>\n                <h3 class=\"font-weight-bold mb-0\">\n                  {{title}}s\n                </h3>\n                <app-techlify-form-button class=\"ms-2\" *ngIf=\"!viewOnly && isShowCreateAction && entityId\"\n                  [component]=\"entityFileForm()\" [data]=\"formData\"\n                  (saved)=\"modelCreated($event)\"></app-techlify-form-button>\n                <span class=\"flex-grow-1\"></span>\n                <form [formGroup]=\"filterForm\" class=\"d-flex gap-2\">\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=\"filterForm.get('title').value\" matSuffix mat-icon-button\n                      (click)=\"resetFilter('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                  <app-timeline-filter class=\"fl-sm\" formControlName='period_id' labelText=\"Expires On\"\n                    dateFrom=\"expires_on_from\" dateTo=\"expires_on_to\" [form]=\"filterForm\"></app-timeline-filter>\n                </form>\n              </div>\n            </mat-card-content>\n            <mat-card-content class=\"entity-file-card p-0\" *ngIf=\"entityId\">\n              <ng-container *ngTemplateOutlet=\"tableView\"></ng-container>\n            </mat-card-content>\n          </mat-card>\n\n          <mat-card *ngIf=\"!entityId\">\n            <mat-card-content class=\"entity-file-card p-0\">\n              <ng-container *ngTemplateOutlet=\"tableView\"></ng-container>\n            </mat-card-content>\n          </mat-card>\n        </div>\n        <ng-container *ngIf=\"isShowDragDropSection && entityId\">\n          <section style=\"flex: 0 1 30%;\" *ngIf=\"!this.selectedModelIds.length && !viewOnly && isShowCreateAction\">\n            <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\">\n            </app-file-dropper>\n          </section>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <ng-template #tableView>\n    <table mat-table [dataSource]=\"models\" 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)=\"isSelectionModified($event, element)\"\n            [disabled]=\"!models.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          {{element.title}}\n          <ng-container *ngIf=\"useTechlifyTags\">\n            <br>\n            <small class=\"badge badge-secondary mr-1\" *ngFor=\"let tag of element?.tags\">{{tag?.title}}</small>\n          </ng-container>\n\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"expires_on\">\n        <th mat-header-cell *matHeaderCellDef> Expires On </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{element?.expires_on | date:'mediumDate'}}\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\">\n          <span *ngIf=\"element?.file_size\"> {{ element.file_size | fileSize }} </span>\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\" *ngIf=\"element.creator\">\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\" class=\"text-muted\">\n          <div class=\"d-flex flex-row gap-2 text-secondary align-items-center\">\n            <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted clickable\">\n              <mat-icon>download</mat-icon>\n            </a>\n            <app-techlify-form-button *ngIf=\"!viewOnly && isShowUpdateAction\" [component]=\"entityFileForm()\"\n              [model]=\"element\" [data]=\"formData\" (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n            <app-techlify-delete-button *ngIf=\"!viewOnly && isShowDeleteAction\" [model]=\"element\" [service]=\"service\"\n              message=\"Are you sure to proceed delete the file {{element.title}}\"\n              (deleted)=\"modelsDeletedById(element)\">\n            </app-techlify-delete-button>\n          </div>\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  </ng-template>\n\n  <div class=\"d-flex flex-wrap gap-3 mat-typography p-4\" *ngIf=\"displayMode\">\n    <div *ngFor=\"let efile of models\">\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 mb-0\">\n        {{title}}s\n      </h3>\n      <app-techlify-form-button *ngIf=\"!viewOnly && isShowCreateAction\" [component]=\"entityFileForm()\" [data]=\"formData\"\n        (saved)=\"modelCreated($event)\"></app-techlify-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content *ngIf=\"!this.selectedModelIds.length && !viewOnly && isShowCreateAction\" class=\"mt-3\">\n    <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\">\n    </app-file-dropper>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3\">\n    <div *ngFor=\"let entityFile of models\" 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\">{{ entityFile.file_size | fileSize }}</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          <app-techlify-form-button class=\"text-secondary\" *ngIf=\"!viewOnly && isShowUpdateAction\"\n            [component]=\"entityFileForm()\" [model]=\"entityFile\" [data]=\"formData\"\n            (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n          <app-techlify-delete-button *ngIf=\"!viewOnly && isShowDeleteAction\" class='text-secondary ms-1'\n            [model]=\"entityFile\" [service]=\"service\"\n            message=\"Are you sure to proceed delete the file {{entityFile.title}}\"\n            (deleted)=\"modelsDeletedById(entityFile)\">\n          </app-techlify-delete-button>\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>", styles: ["th.mat-header-cell,td.mat-cell,td.mat-footer-cell{padding:2px}.entity-file-card{overflow-x:auto}.clickable:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.DocumentViewerComponent, selector: "app-document-viewer", inputs: ["config", "file", "fileUrl", "disableEdit"], outputs: ["remove"] }, { kind: "component", type: i9.FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i10.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: i11.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i11.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.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: i13.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: i14.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i14.MatLabel, selector: "mat-label" }, { kind: "directive", type: i14.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i15.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i16.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: i17.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i18.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i18.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i18.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i18.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i18.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i18.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i18.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i18.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i18.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i18.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i19.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i19.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i19.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i19.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i20.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i21.ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { kind: "component", type: i22.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted", "loading"] }, { kind: "component", type: i23.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "component", type: i24.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "component", type: i25.TechlifyTaggerTagFormFieldComponent, selector: "app-techlify-tagger-tag-form-field", inputs: ["config", "modelType", "modelId", "allTags", "categories", "defaultCreateCategory", "required", "disabled", "value", "placeholder"] }, { kind: "pipe", type: i7.DatePipe, name: "date" }, { kind: "pipe", type: i26.WrapPipe, name: "wrap" }, { kind: "pipe", type: i27.FileSizePipe, name: "fileSize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EntityFileListComponent, decorators: [{
             type: Component,

package/esm2022/lib/export-excel/export-excel-button/export-excel-button.component.mjs

@@ -89,11 +89,11 @@ export class ExportExcelButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExportExcelButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ExportExcelButtonComponent, selector: "app-export-excel-button", inputs: { isCSV: "isCSV", iconName: "iconName", fileName: "fileName", data: "data", tableId: "tableId", isParseNumeric: "isParseNumeric" }, outputs: { isExportingToExcel: "isExportingToExcel" }, ngImport: i0, template: "<app-techlify-icon class=\"clickable d-print-none\" *ngIf=\"!isWorking\" [name]=\"iconName\" (click)=\"exportToExcel()\"\n    matTooltip=\"Excel Export\">\n</app-techlify-icon>", styles: [".icon-md{height:24px!important;width:24px!important;font-size:24px!important;margin:0 1px}.icon-sm{height:20px!important;width:20px!important;font-size:20px!important}.icon-xs{height:16px!important;width:16px!important;font-size:16px!important}.fl-md{width:200px!important}.fl-md .mat-mdc-form-field{width:100%!important}.fl-sm{width:150px!important}.fl-sm .mat-mdc-form-field{width:100%!important}.mat-btn-md{height:25px!important;padding:0 8px!important}.fs-12{font-size:12px!important}.fs-16{font-size:16px!important}.fs-13{font-size:13px!important}.fs-18{font-size:18px!important}.clickable:hover{cursor:pointer}.mat-mdc-form-field-hint-wrapper{padding:0 4px!important}.nil-subscript-wrapper .mat-mdc-form-field-subscript-wrapper{height:0!important}.create-another .mat-mdc-checkbox label{margin:0!important}.create-another .mdc-checkbox{padding:0!important}.create-another .mdc-checkbox__background{position:relative;top:0;left:0}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element{color:#555!important;-webkit-text-fill-color:#555555!important}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#555!important}:host{display:flex;align-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ExportExcelButtonComponent, selector: "app-export-excel-button", inputs: { isCSV: "isCSV", iconName: "iconName", fileName: "fileName", data: "data", tableId: "tableId", isParseNumeric: "isParseNumeric" }, outputs: { isExportingToExcel: "isExportingToExcel" }, ngImport: i0, template: "<app-techlify-icon class=\"clickable d-print-none\" *ngIf=\"!isWorking\" [name]=\"iconName\" (click)=\"exportToExcel()\"\n    matTooltip=\"Excel Export\">\n</app-techlify-icon>", styles: [".fl-md{width:200px!important}.fl-md .mat-mdc-form-field{width:100%!important}.fl-sm{width:150px!important}.fl-sm .mat-mdc-form-field{width:100%!important}.wpx-50{width:50px!important}.wpx-100{width:100px!important}.wpx-120{width:120px!important}.wpx-125{width:125px!important}.wpx-150{width:150px!important}.wpx-200{width:200px!important}.wpx-250{width:250px!important}.min-wpx-200{min-width:200px!important}.max-width-px-115{max-width:115px}.w-description{width:300px!important}.side-panel{width:300px!important;min-width:300px!important;flex-shrink:0!important}.h-250px{height:250px!important}.scroll-y{overflow-y:auto}.flex-basis-0{flex-basis:0}.flex-basis-5{flex-basis:5%}.flex-basis-8{flex-basis:8%}.flex-basis-10{flex-basis:10%}.flex-basis-15{flex-basis:15%}.flex-basis-20{flex-basis:20%}.flex-basis-25{flex-basis:25%}.flex-basis-30{flex-basis:30%}.flex-basis-35{flex-basis:35%}.flex-basis-40{flex-basis:40%}.flex-basis-45{flex-basis:45%}.flex-basis-48{flex-basis:48%}.flex-basis-49{flex-basis:49%}.flex-basis-50{flex-basis:50%}.flex-basis-60{flex-basis:60%}.flex-basis-65{flex-basis:65%}.flex-basis-70{flex-basis:70%}.flex-basis-80{flex-basis:80%}.flex-basis-90{flex-basis:90%}.flex-basis-95{flex-basis:95%}.flex-basis-100{flex-basis:100%}.flex-basis-50-minus-1rem{flex-basis:calc(50% - 1rem)}.flex-basis-50-minus-0-2rem{flex-basis:calc(50% - .2rem)}.flex-basis-20-minus-1rem{flex-basis:calc(20% - 1rem)}.flex-basis-15-minus-1rem{flex-basis:calc(15% - 1rem)}.flex-basis-50-minus-4px{flex-basis:calc(50% - 4px)}@media (min-width: 992px){.flex-lg-basis-50{flex-basis:50%}}@media (min-width: 1200px){.flex-xl-basis-30{flex-basis:30%}.flex-xl-basis-30-minus-1rem{flex:0 1 calc(30% - 1rem)}}.column-gap-1{column-gap:.25rem!important}.column-gap-2{column-gap:.5rem!important}.column-gap-3{column-gap:1rem!important}.column-gap-4{column-gap:1.5rem!important}.column-gap-5{column-gap:3rem!important}button,a,input{outline:none!important}::-webkit-scrollbar{width:.5em}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:gray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#4d4c4c}.icon-md{height:24px!important;width:24px!important;font-size:24px!important;margin:0 1px}.icon-sm{height:20px!important;width:20px!important;font-size:20px!important}.icon-xs{height:16px!important;width:16px!important;font-size:16px!important}.mat-icon-xl{height:40px!important;width:40px!important;font-size:40px!important}.mat-icon-20px{font-size:20px!important;height:20px!important;width:20px!important}.mat-small-icon{height:16px!important;width:16px!important;font-size:16px!important}.mat-btn-md{height:25px!important;padding:0 8px!important}.mdc-button__label{letter-spacing:normal!important}.mat-mdc-button .mat-icon{height:24px!important;width:24px!important;font-size:24px!important}.mat-button-toggle-group{height:48px!important;align-items:center}.mat-button-toggle-button{height:48px!important}.mat-button-toggle-label-content{padding:0 8px!important;font-size:14px!important}.mat-mdc-slide-toggle label{margin:0!important}.small-slide-toggle{transform:scale(.8);transform-origin:left center}.fs-8{font-size:8px!important}.fs-12{font-size:12px!important}.fs-13{font-size:13px!important}.fs-16{font-size:16px!important}.fs-18{font-size:18px!important}.clickable:hover{cursor:pointer}.mat-mdc-form-field-hint-wrapper{padding:0 4px!important}.mat-mdc-floating-label{pointer-events:none!important}.nil-subscript-wrapper .mat-mdc-form-field-subscript-wrapper{height:0!important}.create-another .mat-mdc-checkbox label{margin:0!important}.create-another .mdc-checkbox{padding:0!important}.create-another .mdc-checkbox__background{position:relative;top:0;left:0}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element{color:#555!important;-webkit-text-fill-color:#555555!important}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#555!important}.mat-mdc-card{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);padding:16px}.mat-mdc-card-content{padding:0!important}.mat-mdc-dialog-surface{padding:24px}.mat-mdc-dialog-title{padding:0!important}.mat-mdc-dialog-title .mat-mdc-dialog-title:before{height:0!important}.mat-mdc-dialog-title *{position:relative;top:-30px!important}.mat-mdc-dialog-container .mat-mdc-dialog-title+.mat-mdc-dialog-content{padding-top:6px!important}.mdc-data-table__cell,.mdc-data-table__header-cell{padding:0 8px!important}.mdc-data-table__row:last-child .mat-mdc-cell{border-bottom:inset!important}.mat-column-actions .mat-mdc-icon-button{width:30px!important;height:30px!important;top:6px!important}.mat-column-actions .mat-mdc-icon-button .mat-icon{bottom:9px!important;right:9px!important}.mat-mdc-progress-bar{border-radius:2px}.chip-mini-grey{background-color:#d9d9d9!important;border-radius:3px;display:inline-block;padding:0 6px;font-size:13px}.chip-mini-outline{background-color:#fff!important;border-radius:3px;display:inline-block;padding:0 6px;outline:1px solid #bbb;font-size:13px}.techlify-badge-grey-outlined{background-color:#f2f3f5!important;font-weight:400!important;font-size:12px!important;color:#000!important}.techlify-badge-white-outlined{font-weight:400!important;font-size:12px!important;border-style:solid!important;border-width:thin!important;color:#000!important;border-color:#000!important}:host{display:flex;align-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExportExcelButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-export-excel-button', template: "<app-techlify-icon class=\"clickable d-print-none\" *ngIf=\"!isWorking\" [name]=\"iconName\" (click)=\"exportToExcel()\"\n    matTooltip=\"Excel Export\">\n</app-techlify-icon>", styles: [".icon-md{height:24px!important;width:24px!important;font-size:24px!important;margin:0 1px}.icon-sm{height:20px!important;width:20px!important;font-size:20px!important}.icon-xs{height:16px!important;width:16px!important;font-size:16px!important}.fl-md{width:200px!important}.fl-md .mat-mdc-form-field{width:100%!important}.fl-sm{width:150px!important}.fl-sm .mat-mdc-form-field{width:100%!important}.mat-btn-md{height:25px!important;padding:0 8px!important}.fs-12{font-size:12px!important}.fs-16{font-size:16px!important}.fs-13{font-size:13px!important}.fs-18{font-size:18px!important}.clickable:hover{cursor:pointer}.mat-mdc-form-field-hint-wrapper{padding:0 4px!important}.nil-subscript-wrapper .mat-mdc-form-field-subscript-wrapper{height:0!important}.create-another .mat-mdc-checkbox label{margin:0!important}.create-another .mdc-checkbox{padding:0!important}.create-another .mdc-checkbox__background{position:relative;top:0;left:0}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element{color:#555!important;-webkit-text-fill-color:#555555!important}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#555!important}:host{display:flex;align-content:center}\n"] }]
+            args: [{ selector: 'app-export-excel-button', template: "<app-techlify-icon class=\"clickable d-print-none\" *ngIf=\"!isWorking\" [name]=\"iconName\" (click)=\"exportToExcel()\"\n    matTooltip=\"Excel Export\">\n</app-techlify-icon>", styles: [".fl-md{width:200px!important}.fl-md .mat-mdc-form-field{width:100%!important}.fl-sm{width:150px!important}.fl-sm .mat-mdc-form-field{width:100%!important}.wpx-50{width:50px!important}.wpx-100{width:100px!important}.wpx-120{width:120px!important}.wpx-125{width:125px!important}.wpx-150{width:150px!important}.wpx-200{width:200px!important}.wpx-250{width:250px!important}.min-wpx-200{min-width:200px!important}.max-width-px-115{max-width:115px}.w-description{width:300px!important}.side-panel{width:300px!important;min-width:300px!important;flex-shrink:0!important}.h-250px{height:250px!important}.scroll-y{overflow-y:auto}.flex-basis-0{flex-basis:0}.flex-basis-5{flex-basis:5%}.flex-basis-8{flex-basis:8%}.flex-basis-10{flex-basis:10%}.flex-basis-15{flex-basis:15%}.flex-basis-20{flex-basis:20%}.flex-basis-25{flex-basis:25%}.flex-basis-30{flex-basis:30%}.flex-basis-35{flex-basis:35%}.flex-basis-40{flex-basis:40%}.flex-basis-45{flex-basis:45%}.flex-basis-48{flex-basis:48%}.flex-basis-49{flex-basis:49%}.flex-basis-50{flex-basis:50%}.flex-basis-60{flex-basis:60%}.flex-basis-65{flex-basis:65%}.flex-basis-70{flex-basis:70%}.flex-basis-80{flex-basis:80%}.flex-basis-90{flex-basis:90%}.flex-basis-95{flex-basis:95%}.flex-basis-100{flex-basis:100%}.flex-basis-50-minus-1rem{flex-basis:calc(50% - 1rem)}.flex-basis-50-minus-0-2rem{flex-basis:calc(50% - .2rem)}.flex-basis-20-minus-1rem{flex-basis:calc(20% - 1rem)}.flex-basis-15-minus-1rem{flex-basis:calc(15% - 1rem)}.flex-basis-50-minus-4px{flex-basis:calc(50% - 4px)}@media (min-width: 992px){.flex-lg-basis-50{flex-basis:50%}}@media (min-width: 1200px){.flex-xl-basis-30{flex-basis:30%}.flex-xl-basis-30-minus-1rem{flex:0 1 calc(30% - 1rem)}}.column-gap-1{column-gap:.25rem!important}.column-gap-2{column-gap:.5rem!important}.column-gap-3{column-gap:1rem!important}.column-gap-4{column-gap:1.5rem!important}.column-gap-5{column-gap:3rem!important}button,a,input{outline:none!important}::-webkit-scrollbar{width:.5em}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:gray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#4d4c4c}.icon-md{height:24px!important;width:24px!important;font-size:24px!important;margin:0 1px}.icon-sm{height:20px!important;width:20px!important;font-size:20px!important}.icon-xs{height:16px!important;width:16px!important;font-size:16px!important}.mat-icon-xl{height:40px!important;width:40px!important;font-size:40px!important}.mat-icon-20px{font-size:20px!important;height:20px!important;width:20px!important}.mat-small-icon{height:16px!important;width:16px!important;font-size:16px!important}.mat-btn-md{height:25px!important;padding:0 8px!important}.mdc-button__label{letter-spacing:normal!important}.mat-mdc-button .mat-icon{height:24px!important;width:24px!important;font-size:24px!important}.mat-button-toggle-group{height:48px!important;align-items:center}.mat-button-toggle-button{height:48px!important}.mat-button-toggle-label-content{padding:0 8px!important;font-size:14px!important}.mat-mdc-slide-toggle label{margin:0!important}.small-slide-toggle{transform:scale(.8);transform-origin:left center}.fs-8{font-size:8px!important}.fs-12{font-size:12px!important}.fs-13{font-size:13px!important}.fs-16{font-size:16px!important}.fs-18{font-size:18px!important}.clickable:hover{cursor:pointer}.mat-mdc-form-field-hint-wrapper{padding:0 4px!important}.mat-mdc-floating-label{pointer-events:none!important}.nil-subscript-wrapper .mat-mdc-form-field-subscript-wrapper{height:0!important}.create-another .mat-mdc-checkbox label{margin:0!important}.create-another .mdc-checkbox{padding:0!important}.create-another .mdc-checkbox__background{position:relative;top:0;left:0}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element{color:#555!important;-webkit-text-fill-color:#555555!important}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#555!important}.mat-mdc-card{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);padding:16px}.mat-mdc-card-content{padding:0!important}.mat-mdc-dialog-surface{padding:24px}.mat-mdc-dialog-title{padding:0!important}.mat-mdc-dialog-title .mat-mdc-dialog-title:before{height:0!important}.mat-mdc-dialog-title *{position:relative;top:-30px!important}.mat-mdc-dialog-container .mat-mdc-dialog-title+.mat-mdc-dialog-content{padding-top:6px!important}.mdc-data-table__cell,.mdc-data-table__header-cell{padding:0 8px!important}.mdc-data-table__row:last-child .mat-mdc-cell{border-bottom:inset!important}.mat-column-actions .mat-mdc-icon-button{width:30px!important;height:30px!important;top:6px!important}.mat-column-actions .mat-mdc-icon-button .mat-icon{bottom:9px!important;right:9px!important}.mat-mdc-progress-bar{border-radius:2px}.chip-mini-grey{background-color:#d9d9d9!important;border-radius:3px;display:inline-block;padding:0 6px;font-size:13px}.chip-mini-outline{background-color:#fff!important;border-radius:3px;display:inline-block;padding:0 6px;outline:1px solid #bbb;font-size:13px}.techlify-badge-grey-outlined{background-color:#f2f3f5!important;font-weight:400!important;font-size:12px!important;color:#000!important}.techlify-badge-white-outlined{font-weight:400!important;font-size:12px!important;border-style:solid!important;border-width:thin!important;color:#000!important;border-color:#000!important}:host{display:flex;align-content:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isCSV: [{
                 type: Input
             }], iconName: [{

package/esm2022/lib/locked-date/locked-dates-list/locked-date-list.component.mjs

@@ -53,7 +53,7 @@ export class LockedDateListComponent extends TechlifyListComponent {
         this.loadData();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LockedDateListComponent, deps: [{ token: i1.LockedDateService }, { token: i2.FormBuilder }, { token: i3.UserConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LockedDateListComponent, selector: "app-locked-date-list", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex flex-column gap-2\">\n  <mat-card appearance=\"outlined\" class=\"d-print-none\">\n    <mat-card-content class=\"d-flex flex-row align-items-center justify-content-between\">\n      <div class=\"d-flex flex-row gap-2 align-items-center justify-content-between\">\n        <h5 class=\"mb-0\">Locked Dates</h5>\n        <app-techlify-form-button [component]=\"formComponent()\"\n          (saved)=\"modelCreated($event)\"></app-techlify-form-button>\n      </div>\n\n      <form [formGroup]=\"filterForm\" class='d-flex flex-row gap-2'>\n        <app-timeline-filter labelText=\"Period\" [form]='filterForm'></app-timeline-filter>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card>\n    <mat-card-content>\n      <table class='w-100' mat-table [dataSource]=\"models\" matSort multiTemplateDataRows infiniteScroll\n        [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\"\n        [infiniteScrollContainer]=\"scrollContainer\" [fromRoot]=\"true\" (matSortChange)=\"sortColumn($event)\">\n\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          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"date\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-row align-items-center gap-2\">\n              <span>{{element?.date | date: 'longDate'}}</span>\n              <span>\n                <i class=\"fa-solid fa-lock text-danger\" *ngIf=\"element?.status_id == 1\" matTooltip=\"Locked\"></i>\n                <i class=\"fa-solid fa-lock-open text-success\" *ngIf=\"element?.status_id == 2\" matTooltip=\"Unlocked\"></i>\n              </span>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"locked_on\">\n          <th mat-header-cell *matHeaderCellDef> Locked On </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.created_at | date:'medium' }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"locked_by\">\n          <th mat-header-cell *matHeaderCellDef> Locked By </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.creator?.name }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"details\">\n          <th mat-header-cell *matHeaderCellDef> Details </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.details }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"actions\">\n          <th mat-header-cell *matHeaderCellDef> Actions </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-row gap-2 text-secondary\">\n              <app-locked-date-lock-unlock-button [lockedDate]='element'\n                (onSave)='modelsUpdatedById($event)'></app-locked-date-lock-unlock-button>\n              <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n                [data]=\"{type: 'Locked Date', title: element?.date | date:'longDate'}\"\n                (deleted)=\"modelsDeletedById($event)\"></app-techlify-delete-button>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n      </table>\n    </mat-card-content>\n  </mat-card>\n</div>", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i6.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i7.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i10.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: i11.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "component", type: i12.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "component", type: i13.LockedDateLockUnlockButtonComponent, selector: "app-locked-date-lock-unlock-button", inputs: ["lockedDate"], outputs: ["onSave"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LockedDateListComponent, selector: "app-locked-date-list", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex flex-column gap-2\">\n  <mat-card appearance=\"outlined\" class=\"d-print-none\">\n    <mat-card-content class=\"d-flex flex-row align-items-center justify-content-between\">\n      <div class=\"d-flex flex-row gap-2 align-items-center justify-content-between\">\n        <h5 class=\"mb-0\">Locked Dates</h5>\n        <app-techlify-form-button [component]=\"formComponent()\"\n          (saved)=\"modelCreated($event)\"></app-techlify-form-button>\n      </div>\n\n      <form [formGroup]=\"filterForm\" class='d-flex flex-row gap-2'>\n        <app-timeline-filter labelText=\"Period\" [form]='filterForm'></app-timeline-filter>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card>\n    <mat-card-content>\n      <table class='w-100' mat-table [dataSource]=\"models\" matSort multiTemplateDataRows infiniteScroll\n        [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\"\n        [infiniteScrollContainer]=\"scrollContainer\" [fromRoot]=\"true\" (matSortChange)=\"sortColumn($event)\">\n\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          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"date\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-row align-items-center gap-2\">\n              <span>{{element?.date | date: 'longDate'}}</span>\n              <span>\n                <i class=\"fa-solid fa-lock text-danger\" *ngIf=\"element?.status_id == 1\" matTooltip=\"Locked\"></i>\n                <i class=\"fa-solid fa-lock-open text-success\" *ngIf=\"element?.status_id == 2\" matTooltip=\"Unlocked\"></i>\n              </span>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"locked_on\">\n          <th mat-header-cell *matHeaderCellDef> Locked On </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.created_at | date:'medium' }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"locked_by\">\n          <th mat-header-cell *matHeaderCellDef> Locked By </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.creator?.name }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"details\">\n          <th mat-header-cell *matHeaderCellDef> Details </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.details }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"actions\">\n          <th mat-header-cell *matHeaderCellDef> Actions </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-row gap-2 text-secondary\">\n              <app-locked-date-lock-unlock-button [lockedDate]='element'\n                (onSave)='modelsUpdatedById($event)'></app-locked-date-lock-unlock-button>\n              <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n                [data]=\"{type: 'Locked Date', title: element?.date | date:'longDate'}\"\n                (deleted)=\"modelsDeletedById($event)\"></app-techlify-delete-button>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n      </table>\n    </mat-card-content>\n  </mat-card>\n</div>", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i6.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i7.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i10.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted", "loading"] }, { kind: "component", type: i11.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "component", type: i12.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "component", type: i13.LockedDateLockUnlockButtonComponent, selector: "app-locked-date-lock-unlock-button", inputs: ["lockedDate"], outputs: ["onSave"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LockedDateListComponent, decorators: [{
             type: Component,

package/esm2022/lib/note/note-list/note-list.component.mjs

@@ -90,7 +90,7 @@ export class NoteListComponent extends TechlifyListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoteListComponent, deps: [{ token: i1.NoteService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NoteListComponent, selector: "app-note-list", inputs: { relatedModelId: "relatedModelId", modelType: "modelType", readonly: "readonly", labelText: "labelText", commentsView: "commentsView", viewMode: "viewMode" }, usesInheritance: true, ngImport: i0, template: "<app-note-comment-list *ngIf=\"commentsView\" [relatedModelId]=\"relatedModelId\" [modelType]=\"modelType\"\n  [labelText]=\"labelText\"></app-note-comment-list>\n\n<div class=\"d-flex flex-column gap-4\" *ngIf=\"!commentsView\">\n\n  <ng-container *ngIf=\"viewMode === 'list'\">\n    <div class=\"d-flex align-items-center\">\n      <h5 class=\"m-0\">{{ labelText }}s</h5>\n      <app-techlify-form-button class=\"d-print-none ml-1\" [component]=\"noteForm()\" width=\"400px\"\n        [data]=\"{ model_type: modelType, related_model_id: relatedModelId, labelText: labelText }\"\n        (saved)=\"modelCreated($event); total = total + 1\"></app-techlify-form-button>\n    </div>\n\n    <div class=\"w-100 scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n      <table mat-table [dataSource]=\"models\" class=\"w-100\" multiTemplateDataRows>\n\n        <!-- Index Column -->\n        <ng-container matColumnDef=\"index\">\n          <th mat-header-cell *matHeaderCellDef> #</th>\n          <td mat-cell *matCellDef=\"let note; let i = dataIndex\"> {{ i + 1 }}</td>\n        </ng-container>\n\n\n        <ng-container matColumnDef=\"note\">\n          <th mat-header-cell *matHeaderCellDef> {{ labelText }}</th>\n          <td mat-cell *matCellDef=\"let note\">\n            {{ note?.note }}\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"actions\">\n          <th mat-header-cell *matHeaderCellDef class=\"d-print-none\"> Actions</th>\n          <td mat-cell *matCellDef=\"let note\" class=\"d-print-none text-secondary\">\n            <div class=\"d-flex flex-row align-items-center gap-1\">\n              <app-techlify-form-button [component]=\"noteForm()\" [model]=\"note\" width=\"400px\"\n                [data]=\"{ labelText: labelText }\" (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n              <app-techlify-delete-button [service]=\"noteService\" [model]=\"note\"\n                [data]=\"{ type: labelText, title: note?.note }\"\n                (deleted)=\"modelsDeletedById(note); total = total - 1\"></app-techlify-delete-button>\n            </div>\n          </td>\n        </ng-container>\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n      </table>\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewMode === 'timeline'\">\n    <mat-card>\n      <mat-card-content class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h5 class=\"mb-0\">Notes</h5>\n        <span class=\"badge badge-info ml-1\" *ngIf=\"total\">{{ total }}</span>\n      </mat-card-content>\n      <mat-card-content class=\"mt-2\">\n        <form (ngSubmit)=\"saveNote()\">\n          <mat-form-field class=\"w-100\" appearance=\"outline\">\n            <input [(ngModel)]=\"note\" [ngModelOptions]=\"{standalone: true}\" type=\"text\" matInput\n              placeholder=\"Write your notes here...\" [disabled]=\"isSaving\">\n            <mat-icon *ngIf=\"!isSaving\" matSuffix class=\"cursor-pointer\" (click)=\"saveNote()\">send</mat-icon>\n            <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter=\"20\" *ngIf=\"isSaving\"></mat-progress-spinner>\n          </mat-form-field>\n        </form>\n      </mat-card-content>\n      <mat-card-content>\n        <div *ngFor=\"let note of models;last as isLast\">\n          <div class=\"d-flex justify-content-between align-items-center gap-2\">\n            <div class=\"d-flex flex-column\">\n              <p class=\"mb-0\">{{ note?.creator?.name }}</p>\n              <small class=\"text-secondary\">On {{ note?.created_at | date: 'medium' }}</small>\n            </div>\n            <div class=\"d-flex justify-content-end align-items-center gap-1\">\n              <app-techlify-form-button [component]=\"noteForm()\" [model]=\"note\" width=\"400px\"\n                [data]=\"{ labelText: labelText }\" (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n              <!-- @todo Pass $event once NoteController::destroy returns the deleted item -->\n              <app-techlify-delete-button [service]=\"noteService\" [model]=\"note\"\n                [data]=\"{ type: labelText, title: note?.note }\"\n                (deleted)=\"modelsDeletedById(note); total = total - 1\"></app-techlify-delete-button>\n            </div>\n          </div>\n          <div>{{ note?.note }}</div>\n          <mat-divider class=\"my-2\" *ngIf=\"!isLast\"></mat-divider>\n        </div>\n        <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n      </mat-card-content>\n    </mat-card>\n  </ng-container>\n\n</div>\n", styles: [".scroll-container{max-height:400px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i11.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i13.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i14.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: i15.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "component", type: i16.NoteCommentListComponent, selector: "app-note-comment-list", inputs: ["relatedModelId", "modelType", "labelText"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NoteListComponent, selector: "app-note-list", inputs: { relatedModelId: "relatedModelId", modelType: "modelType", readonly: "readonly", labelText: "labelText", commentsView: "commentsView", viewMode: "viewMode" }, usesInheritance: true, ngImport: i0, template: "<app-note-comment-list *ngIf=\"commentsView\" [relatedModelId]=\"relatedModelId\" [modelType]=\"modelType\"\n  [labelText]=\"labelText\"></app-note-comment-list>\n\n<div class=\"d-flex flex-column gap-4\" *ngIf=\"!commentsView\">\n\n  <ng-container *ngIf=\"viewMode === 'list'\">\n    <div class=\"d-flex align-items-center\">\n      <h5 class=\"m-0\">{{ labelText }}s</h5>\n      <app-techlify-form-button class=\"d-print-none ml-1\" [component]=\"noteForm()\" width=\"400px\"\n        [data]=\"{ model_type: modelType, related_model_id: relatedModelId, labelText: labelText }\"\n        (saved)=\"modelCreated($event); total = total + 1\"></app-techlify-form-button>\n    </div>\n\n    <div class=\"w-100 scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n      <table mat-table [dataSource]=\"models\" class=\"w-100\" multiTemplateDataRows>\n\n        <!-- Index Column -->\n        <ng-container matColumnDef=\"index\">\n          <th mat-header-cell *matHeaderCellDef> #</th>\n          <td mat-cell *matCellDef=\"let note; let i = dataIndex\"> {{ i + 1 }}</td>\n        </ng-container>\n\n\n        <ng-container matColumnDef=\"note\">\n          <th mat-header-cell *matHeaderCellDef> {{ labelText }}</th>\n          <td mat-cell *matCellDef=\"let note\">\n            {{ note?.note }}\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"actions\">\n          <th mat-header-cell *matHeaderCellDef class=\"d-print-none\"> Actions</th>\n          <td mat-cell *matCellDef=\"let note\" class=\"d-print-none text-secondary\">\n            <div class=\"d-flex flex-row align-items-center gap-1\">\n              <app-techlify-form-button [component]=\"noteForm()\" [model]=\"note\" width=\"400px\"\n                [data]=\"{ labelText: labelText }\" (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n              <app-techlify-delete-button [service]=\"noteService\" [model]=\"note\"\n                [data]=\"{ type: labelText, title: note?.note }\"\n                (deleted)=\"modelsDeletedById(note); total = total - 1\"></app-techlify-delete-button>\n            </div>\n          </td>\n        </ng-container>\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n      </table>\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewMode === 'timeline'\">\n    <mat-card>\n      <mat-card-content class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h5 class=\"mb-0\">Notes</h5>\n        <span class=\"badge badge-info ml-1\" *ngIf=\"total\">{{ total }}</span>\n      </mat-card-content>\n      <mat-card-content class=\"mt-2\">\n        <form (ngSubmit)=\"saveNote()\">\n          <mat-form-field class=\"w-100\" appearance=\"outline\">\n            <input [(ngModel)]=\"note\" [ngModelOptions]=\"{standalone: true}\" type=\"text\" matInput\n              placeholder=\"Write your notes here...\" [disabled]=\"isSaving\">\n            <mat-icon *ngIf=\"!isSaving\" matSuffix class=\"cursor-pointer\" (click)=\"saveNote()\">send</mat-icon>\n            <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter=\"20\" *ngIf=\"isSaving\"></mat-progress-spinner>\n          </mat-form-field>\n        </form>\n      </mat-card-content>\n      <mat-card-content>\n        <div *ngFor=\"let note of models;last as isLast\">\n          <div class=\"d-flex justify-content-between align-items-center gap-2\">\n            <div class=\"d-flex flex-column\">\n              <p class=\"mb-0\">{{ note?.creator?.name }}</p>\n              <small class=\"text-secondary\">On {{ note?.created_at | date: 'medium' }}</small>\n            </div>\n            <div class=\"d-flex justify-content-end align-items-center gap-1\">\n              <app-techlify-form-button [component]=\"noteForm()\" [model]=\"note\" width=\"400px\"\n                [data]=\"{ labelText: labelText }\" (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n              <!-- @todo Pass $event once NoteController::destroy returns the deleted item -->\n              <app-techlify-delete-button [service]=\"noteService\" [model]=\"note\"\n                [data]=\"{ type: labelText, title: note?.note }\"\n                (deleted)=\"modelsDeletedById(note); total = total - 1\"></app-techlify-delete-button>\n            </div>\n          </div>\n          <div>{{ note?.note }}</div>\n          <mat-divider class=\"my-2\" *ngIf=\"!isLast\"></mat-divider>\n        </div>\n        <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n      </mat-card-content>\n    </mat-card>\n  </ng-container>\n\n</div>\n", styles: [".scroll-container{max-height:400px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i11.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i13.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i14.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted", "loading"] }, { kind: "component", type: i15.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "component", type: i16.NoteCommentListComponent, selector: "app-note-comment-list", inputs: ["relatedModelId", "modelType", "labelText"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoteListComponent, decorators: [{
             type: Component,