ngx-techlify-checksheet 18.0.0 → 18.2.0

package/fesm2022/ngx-techlify-checksheet.mjs

@@ -1,56 +1,58 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Inject, EventEmitter, Input, Output, ViewEncapsulation, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, Inject, ViewEncapsulation, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i6$2 from '@angular/router';
+import { NgIf, CommonModule } from '@angular/common';
+import * as i4$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i2 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
 import * as i1 from 'ngx-techlify-core';
-import { TechlifyServiceBaseClass, MaterialModule as MaterialModule$1, TechlifyListingControllerInterface, ActionPopupComponent, TechlifyFormComponentInterface, DateValidator, Timeline, LoaderModule, ActionPopupModule, SearchableSelectorModule, NoteModule, EntityFilesViewAllModule, ExportExcelModule, TimelineFilterModule } from 'ngx-techlify-core';
-import * as i3$1 from 'ngx-spinner';
-import * as i1$1 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { TechlifyServiceBaseClass, ActionPopupComponent, MaterialModule as MaterialModule$1, TechlifyListingControllerInterface, FileDropperModule, ReadMoreModule, WrapPipe, TechlifyFormComponentInterface, DateValidator, Timeline, LoaderModule, ActionPopupModule, SearchableSelectorModule, NoteModule, EntityFilesViewAllModule, ExportExcelModule, TimelineFilterModule } from 'ngx-techlify-core';
 import * as i6 from '@angular/flex-layout/flex';
-import * as i8 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i7 from '@angular/material/card';
+import * as i7 from '@angular/material/button';
+import { MatButton, MatButtonModule } from '@angular/material/button';
+import * as i8 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i10 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i12 from '@angular/material/input';
+import * as i6$1 from '@angular/material/icon';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
+import * as i11 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i8$1 from '@angular/material/progress-bar';
+import * as i9 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i11 from 'ngx-editor';
+import * as i7$4 from '@angular/material/tooltip';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
+import * as i1$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i11$1 from 'ngx-editor';
 import { Editor, NgxEditorModule } from 'ngx-editor';
-import * as i3 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i9$2 from 'ngx-infinite-scroll';
+import * as i1$2 from 'ngx-spinner';
+import * as i7$2 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { __decorate } from 'tslib';
 import { debounceTime } from 'rxjs/operators';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import * as i4$1 from '@angular/material/checkbox';
+import * as i5 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i9 from '@angular/material/datepicker';
+import * as i9$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i9$1 from '@angular/material/radio';
+import * as i10$1 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import { map, forkJoin, debounceTime as debounceTime$1, distinctUntilChanged } from 'rxjs';
-import * as i6$1 from '@angular/material/table';
+import * as i7$1 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import * as i6$3 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i7$1 from '@angular/material/core';
+import * as i7$3 from '@angular/material/core';
 import { MatCommonModule, MatLineModule, MatNativeDateModule, MatOptionModule, MatPseudoCheckboxModule, MatRippleModule } from '@angular/material/core';
-import * as i12$1 from '@angular/material/select';
+import * as i12 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import moment from 'moment';
 import * as i13 from '@angular/material/sort';
 import { MatSortModule } from '@angular/material/sort';
 import * as i15 from 'ngx-permissions';
 import { NgxPermissionsModule } from 'ngx-permissions';
+import * as i7$5 from 'ngx-avatars';
+import { AvatarComponent } from 'ngx-avatars';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
@@ -92,6 +94,205 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.HttpService }] });
 
+class ChecksheetFormatCopyButtonComponent {
+    dialog;
+    alertService;
+    service;
+    checksheetFormat;
+    changed = new EventEmitter();
+    constructor(dialog, alertService, service) {
+        this.dialog = dialog;
+        this.alertService = alertService;
+        this.service = service;
+    }
+    copyChecksheet() {
+        const dialogRef = this.dialog.open(ActionPopupComponent, {
+            width: '400px',
+            data: {
+                title: 'Copy Checksheet Format',
+                message: `Are you sure to proceed copy the ${this.checksheetFormat?.title}?`
+            },
+            autoFocus: false
+        });
+        dialogRef.afterClosed().subscribe(async (result) => {
+            if (result) {
+                this.service.copy(this.checksheetFormat).subscribe({
+                    next: () => {
+                        this.alertService.addAlert('Checksheet format copied successfully!', 'success');
+                        this.changed.emit();
+                    }
+                });
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatCopyButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: i1.AlertService }, { token: ChecksheetFormatService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetFormatCopyButtonComponent, isStandalone: true, selector: "app-checksheet-format-copy-button", inputs: { checksheetFormat: "checksheetFormat" }, outputs: { changed: "changed" }, ngImport: i0, template: "<mat-icon *ngIf=\"!checksheetFormat.is_published\" (click)=\"copyChecksheet()\" matTooltip=\"Copy\" class=\"cursor-pointer\">\n  content_copy\n</mat-icon>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatCopyButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-checksheet-format-copy-button', standalone: true, imports: [
+                        MatIcon,
+                        MatTooltip,
+                        NgIf
+                    ], template: "<mat-icon *ngIf=\"!checksheetFormat.is_published\" (click)=\"copyChecksheet()\" matTooltip=\"Copy\" class=\"cursor-pointer\">\n  content_copy\n</mat-icon>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i1.AlertService }, { type: ChecksheetFormatService }], propDecorators: { checksheetFormat: [{
+                type: Input
+            }], changed: [{
+                type: Output
+            }] } });
+
+class ChecksheetFormatDeleteButtonComponent {
+    dialog;
+    alertService;
+    service;
+    checksheetFormat;
+    deleted = new EventEmitter();
+    constructor(dialog, alertService, service) {
+        this.dialog = dialog;
+        this.alertService = alertService;
+        this.service = service;
+    }
+    delete() {
+        const dialogRef = this.dialog.open(ActionPopupComponent, {
+            width: '400px',
+            data: {
+                title: 'Deactivate Checksheet Format',
+                message: `Are you sure to proceed deactivate the ${this.checksheetFormat?.title}?`
+            },
+            autoFocus: false
+        });
+        dialogRef.afterClosed().subscribe(async (result) => {
+            if (result) {
+                this.service.delete(this.checksheetFormat).subscribe({
+                    next: () => {
+                        this.alertService.addAlert('Checksheet format deactivated successfully!', 'success');
+                        this.deleted.emit();
+                    }
+                });
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatDeleteButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: i1.AlertService }, { token: ChecksheetFormatService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetFormatDeleteButtonComponent, isStandalone: true, selector: "app-checksheet-format-delete-button", inputs: { checksheetFormat: "checksheetFormat" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<mat-icon class=\"cursor-pointer\" *ngIf=\"!checksheetFormat?.submissions_count\" (click)=\"delete()\">\n  delete\n</mat-icon>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatDeleteButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-checksheet-format-delete-button', standalone: true, imports: [
+                        MatIcon,
+                        NgIf
+                    ], template: "<mat-icon class=\"cursor-pointer\" *ngIf=\"!checksheetFormat?.submissions_count\" (click)=\"delete()\">\n  delete\n</mat-icon>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i1.AlertService }, { type: ChecksheetFormatService }], propDecorators: { checksheetFormat: [{
+                type: Input
+            }], deleted: [{
+                type: Output
+            }] } });
+
+class ChecksheetFormatUnpublishButtonComponent {
+    dialog;
+    alertService;
+    service;
+    checksheetFormat;
+    changed = new EventEmitter();
+    constructor(dialog, alertService, service) {
+        this.dialog = dialog;
+        this.alertService = alertService;
+        this.service = service;
+    }
+    unpublishChecksheet() {
+        const dialogRef = this.dialog.open(ActionPopupComponent, {
+            width: '400px',
+            data: {
+                title: 'Unpublish Checksheet Format',
+                message: `Are you sure to unpublish the format ${this.checksheetFormat.title}?
+                This checksheet format would no longer be available to team members to create submissions for. `
+            },
+            autoFocus: false
+        });
+        dialogRef.afterClosed().subscribe(async (result) => {
+            if (result) {
+                this.service.unpublish(this.checksheetFormat).subscribe({
+                    next: () => {
+                        this.alertService.addAlert('Checksheet Format unpublished successfully!', 'success');
+                        this.changed.emit();
+                    }
+                });
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatUnpublishButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: i1.AlertService }, { token: ChecksheetFormatService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetFormatUnpublishButtonComponent, isStandalone: true, selector: "app-checksheet-format-unpublish-button", inputs: { checksheetFormat: "checksheetFormat" }, outputs: { changed: "changed" }, ngImport: i0, template: "<mat-icon class=\"cursor-pointer\" *ngIf=\"checksheetFormat?.is_published\" matTooltip=\"Unpublish\"\n          (click)=\"unpublishChecksheet()\">\n  unpublished\n</mat-icon>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatUnpublishButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-checksheet-format-unpublish-button', standalone: true, imports: [
+                        MatIcon,
+                        MatTooltip,
+                        NgIf
+                    ], template: "<mat-icon class=\"cursor-pointer\" *ngIf=\"checksheetFormat?.is_published\" matTooltip=\"Unpublish\"\n          (click)=\"unpublishChecksheet()\">\n  unpublished\n</mat-icon>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i1.AlertService }, { type: ChecksheetFormatService }], propDecorators: { checksheetFormat: [{
+                type: Input
+            }], changed: [{
+                type: Output
+            }] } });
+
+class ChecksheetFormatPublishButtonComponent {
+    dialog;
+    alertService;
+    service;
+    checksheetFormat;
+    changed = new EventEmitter();
+    viewMode = 'button';
+    isSaving = false;
+    constructor(dialog, alertService, service) {
+        this.dialog = dialog;
+        this.alertService = alertService;
+        this.service = service;
+    }
+    publishChecksheet() {
+        const dialogRef = this.dialog.open(ActionPopupComponent, {
+            width: '400px',
+            data: {
+                title: 'Publish Checksheet Format',
+                message: `Review the checksheet format completely before publishing, you cannot alter once it is published.
+        Are you sure to publish the Checksheet format?`
+            },
+            autoFocus: false
+        });
+        dialogRef.afterClosed().subscribe(async (result) => {
+            if (result) {
+                const model = { ...this.checksheetFormat };
+                model.is_published = true;
+                this.isSaving = true;
+                this.service.update(model).subscribe({
+                    next: (response) => {
+                        this.alertService.addAlert('Checksheet format published successfully.', 'success');
+                        this.changed.emit(response?.item);
+                        this.isSaving = false;
+                    },
+                    error: () => { this.isSaving = false; }
+                });
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatPublishButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: i1.AlertService }, { token: ChecksheetFormatService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetFormatPublishButtonComponent, isStandalone: true, selector: "app-checksheet-format-publish-button", inputs: { checksheetFormat: "checksheetFormat", viewMode: "viewMode" }, outputs: { changed: "changed" }, ngImport: i0, template: "<button mat-raised-button [disabled]=\"isSaving\" color=\"accent\"  type=\"button\" (click)=\"publishChecksheet()\"\n        *ngIf=\"viewMode === 'button' && !checksheetFormat?.is_published\">\n  Publish\n</button>\n<span matTooltip=\"Publish\" class=\"material-symbols-outlined cursor-pointer\" (click)=\"publishChecksheet()\"\n      *ngIf=\"viewMode === 'icon' && !checksheetFormat?.is_published\">\n  published_with_changes\n</span>\n", styles: [""], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatPublishButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-checksheet-format-publish-button', standalone: true, imports: [
+                        MatButton,
+                        NgIf,
+                        MatIcon,
+                        MatTooltip
+                    ], template: "<button mat-raised-button [disabled]=\"isSaving\" color=\"accent\"  type=\"button\" (click)=\"publishChecksheet()\"\n        *ngIf=\"viewMode === 'button' && !checksheetFormat?.is_published\">\n  Publish\n</button>\n<span matTooltip=\"Publish\" class=\"material-symbols-outlined cursor-pointer\" (click)=\"publishChecksheet()\"\n      *ngIf=\"viewMode === 'icon' && !checksheetFormat?.is_published\">\n  published_with_changes\n</span>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i1.AlertService }, { type: ChecksheetFormatService }], propDecorators: { checksheetFormat: [{
+                type: Input
+            }], changed: [{
+                type: Output
+            }], viewMode: [{
+                type: Input
+            }] } });
+
 class ChecksheetFormatQuestionService extends TechlifyServiceBaseClass {
     constructor(httpService) {
         super(httpService, 'checksheet-format-questions');
@@ -228,7 +429,7 @@ class ChecksheetQuestionFormComponent {
         return this.formValidatorService.getErrorMessage(field, formGroup, errorMessages$4);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetQuestionFormComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.UntypedFormBuilder }, { token: i1.FormValidatorService }, { token: i1.AlertService }, { token: ChecksheetFormatQuestionService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetQuestionFormComponent, selector: "app-checksheet-question-form", ngImport: i0, template: "<form [formGroup]=\"questionFormGroup\" (ngSubmit)=\"submit()\">\n  <div fxLayout=\"column\" class=\"mat-typography\">\n    <div mat-dialog-title class=\"text-center\">\n      <div>Checksheet Question</div>\n    </div>\n\n    <div mat-dialog-content fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n      <div fxFlex=\"100%\" class=\"mt-2\">Question</div>\n      <div fxFlex=\"100%\" class=\"mt-3 border\">\n        <div class=\"NgxEditor__Wrapper\">\n          <ngx-editor-menu [editor]=\"editor\"> </ngx-editor-menu>\n          <ngx-editor [editor]=\"editor\" formControlName=\"label\"></ngx-editor>\n        </div>\n      </div>\n      <div class=\"text-danger my-1\" fxFlex=\"100%\" *ngIf=\"isFieldValid('label')\">\n        {{ getErrorMessage('label') }}\n      </div>\n\n      <mat-form-field fxFlex=\"100%\" class=\"mt-2\">\n        <mat-label>Question Type</mat-label>\n        <app-searchable-selector\n          apiUrl=\"api/checksheet-question-types\"\n          [enableSearch]=\"false\"\n          formControlName=\"type_id\"\n          (selectionChange)=\"questionChange($event)\"\n        ></app-searchable-selector>\n        <mat-error *ngIf=\"isFieldValid('type_id')\">\n          {{ getErrorMessage('type_id') }}\n        </mat-error>\n      </mat-form-field>\n\n      <div\n        fxFlex=\"100%\"\n        fxLayout=\"column\"\n        fxLayoutGap=\"0.25rem\"\n        *ngIf=\"isChoiceTypeSelected\"\n      >\n        <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n          <h3 class=\"m-0\">Answers</h3>\n          <button\n            mat-icon-button\n            color=\"primary\"\n            type=\"button\"\n            (click)=\"addAnswer()\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n        </div>\n\n        <ng-container\n          formArrayName=\"answers\"\n          *ngFor=\"let answer of answerFormArray.controls; let i = index\"\n        >\n          <form\n            [formGroupName]=\"i\"\n            fxLayout=\"row\"\n            fxLayoutAlign=\"center center\"\n            fxLayoutGap=\"0.5rem\"\n          >\n            <mat-form-field>\n              <input\n                matInput\n                formControlName=\"value\"\n                placeholder=\"Answer\"\n                autocomplete=\"off\"\n                required\n              />\n              <mat-error *ngIf=\"isFieldValid('value', answer)\"\n                >{{ getErrorMessage('value', answer) }}\n              </mat-error>\n            </mat-form-field>\n\n            <button\n              [disabled]=\"questionFormGroup.get('answers')?.value?.length <= 2\"\n              mat-icon-button\n              color=\"primary\"\n              type=\"button\"\n              (click)=\"answerFormArray.removeAt(i)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\n          </form>\n        </ng-container>\n      </div>\n\n      <div\n        class=\"my-2\"\n        fxLayout=\"row\"\n        fxLayoutGap=\"30px\"\n        fxLayoutAlign=\"end\"\n        fxFlex=\"100%\"\n      >\n        <button\n          [disabled]=\"isSaving\"\n          mat-raised-button\n          type=\"button\"\n          (click)=\"cancel()\"\n        >\n          Cancel\n        </button>\n        <button\n          [disabled]=\"isSaving\"\n          mat-raised-button\n          type=\"submit\"\n          color=\"primary\"\n        >\n          Save\n        </button>\n      </div>\n    </div>\n  </div>\n</form>\n", styles: [":host ::ng-deep .ck.ck-content{min-height:200px!important}::ng-deep .ck.ck-balloon-panel{z-index:10000!important}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i6.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i12.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: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i11.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i11.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetQuestionFormComponent, selector: "app-checksheet-question-form", ngImport: i0, template: "<form [formGroup]=\"questionFormGroup\" (ngSubmit)=\"submit()\">\n  <div fxLayout=\"column\" class=\"mat-typography\">\n    <div mat-dialog-title class=\"text-center\">\n      <div>Checksheet Question</div>\n    </div>\n\n    <div mat-dialog-content fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n      <div fxFlex=\"100%\" class=\"mt-2\">Question</div>\n      <div fxFlex=\"100%\" class=\"mt-3 border\">\n        <div class=\"NgxEditor__Wrapper\">\n          <ngx-editor-menu [editor]=\"editor\"> </ngx-editor-menu>\n          <ngx-editor [editor]=\"editor\" formControlName=\"label\"></ngx-editor>\n        </div>\n      </div>\n      <div class=\"text-danger my-1\" fxFlex=\"100%\" *ngIf=\"isFieldValid('label')\">\n        {{ getErrorMessage('label') }}\n      </div>\n\n      <mat-form-field fxFlex=\"100%\" class=\"mt-2\">\n        <mat-label>Question Type</mat-label>\n        <app-searchable-selector\n          apiUrl=\"api/checksheet-question-types\"\n          [enableSearch]=\"false\"\n          formControlName=\"type_id\"\n          (selectionChange)=\"questionChange($event)\"\n        ></app-searchable-selector>\n        <mat-error *ngIf=\"isFieldValid('type_id')\">\n          {{ getErrorMessage('type_id') }}\n        </mat-error>\n      </mat-form-field>\n\n      <div\n        fxFlex=\"100%\"\n        fxLayout=\"column\"\n        fxLayoutGap=\"0.25rem\"\n        *ngIf=\"isChoiceTypeSelected\"\n      >\n        <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n          <h3 class=\"m-0\">Answers</h3>\n          <button\n            mat-icon-button\n            color=\"primary\"\n            type=\"button\"\n            (click)=\"addAnswer()\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n        </div>\n\n        <ng-container\n          formArrayName=\"answers\"\n          *ngFor=\"let answer of answerFormArray.controls; let i = index\"\n        >\n          <form\n            [formGroupName]=\"i\"\n            fxLayout=\"row\"\n            fxLayoutAlign=\"center center\"\n            fxLayoutGap=\"0.5rem\"\n          >\n            <mat-form-field>\n              <input\n                matInput\n                formControlName=\"value\"\n                placeholder=\"Answer\"\n                autocomplete=\"off\"\n                required\n              />\n              <mat-error *ngIf=\"isFieldValid('value', answer)\"\n                >{{ getErrorMessage('value', answer) }}\n              </mat-error>\n            </mat-form-field>\n\n            <button\n              [disabled]=\"questionFormGroup.get('answers')?.value?.length <= 2\"\n              mat-icon-button\n              color=\"primary\"\n              type=\"button\"\n              (click)=\"answerFormArray.removeAt(i)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\n          </form>\n        </ng-container>\n      </div>\n\n      <div\n        class=\"my-2\"\n        fxLayout=\"row\"\n        fxLayoutGap=\"30px\"\n        fxLayoutAlign=\"end\"\n        fxFlex=\"100%\"\n      >\n        <button\n          [disabled]=\"isSaving\"\n          mat-raised-button\n          type=\"button\"\n          (click)=\"cancel()\"\n        >\n          Cancel\n        </button>\n        <button\n          [disabled]=\"isSaving\"\n          mat-raised-button\n          type=\"submit\"\n          color=\"primary\"\n        >\n          Save\n        </button>\n      </div>\n    </div>\n  </div>\n</form>\n", styles: [":host ::ng-deep .ck.ck-content{min-height:200px!important}::ng-deep .ck.ck-balloon-panel{z-index:10000!important}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i6.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i11.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: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i11$1.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i11$1.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetQuestionFormComponent, decorators: [{
             type: Component,
@@ -252,48 +453,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.HttpService }] });
 
-class FileUploadButtonComponent {
-    entityFileService;
-    config;
-    uploaded = new EventEmitter();
-    DEFAULT_FILE_ID = 'file-upload-button';
-    isUploading;
-    constructor(entityFileService) {
-        this.entityFileService = entityFileService;
-    }
-    async onFileChange(event) {
-        if (event.target.files && event.target.files.length) {
-            const fileArray = Array.from(event.target.files);
-            const fileInput = document.getElementById(this.config?.fileId ?? this.DEFAULT_FILE_ID);
-            fileInput.value = '';
-            this.isUploading = true;
-            const results = await this.uploadFiles(fileArray);
-            this.uploaded.emit(results);
-            this.isUploading = false;
-        }
-    }
-    selectFiles(event) {
-        event.preventDefault();
-        document
-            .getElementById(this.config?.fileId ?? this.DEFAULT_FILE_ID)
-            ?.click();
-    }
-    async uploadFiles(files) {
-        const uploadPromises = files.map((file) => this.entityFileService.uploadEntityFile(file));
-        return await Promise.all(uploadPromises);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileUploadButtonComponent, deps: [{ token: i1.EntityFileService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FileUploadButtonComponent, isStandalone: true, selector: "app-file-upload-button", inputs: { config: "config" }, outputs: { uploaded: "uploaded" }, ngImport: i0, template: "<button\n  [disabled]=\"isUploading\"\n  mat-stroked-button\n  type=\"button\"\n  (click)=\"selectFiles($event)\"\n>\n  <mat-icon>attachment</mat-icon> Attach\n</button>\n\n<input\n  type=\"file\"\n  id=\"{{ config.fileId ?? DEFAULT_FILE_ID }}\"\n  [accept]=\"config.accept ?? '*'\"\n  (change)=\"onFileChange($event)\"\n  [multiple]=\"config.multiple ?? false\"\n  class=\"d-none\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileUploadButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-file-upload-button', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule], template: "<button\n  [disabled]=\"isUploading\"\n  mat-stroked-button\n  type=\"button\"\n  (click)=\"selectFiles($event)\"\n>\n  <mat-icon>attachment</mat-icon> Attach\n</button>\n\n<input\n  type=\"file\"\n  id=\"{{ config.fileId ?? DEFAULT_FILE_ID }}\"\n  [accept]=\"config.accept ?? '*'\"\n  (change)=\"onFileChange($event)\"\n  [multiple]=\"config.multiple ?? false\"\n  class=\"d-none\"\n/>\n" }]
-        }], ctorParameters: () => [{ type: i1.EntityFileService }], propDecorators: { config: [{
-                type: Input
-            }], uploaded: [{
-                type: Output
-            }] } });
-
 class ChecksheetSubmissionFileService extends TechlifyServiceBaseClass {
     constructor(httpService) {
         super(httpService, 'checksheet-submission-files');
@@ -308,46 +467,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.HttpService }] });
 
-class ChecksheetSubmissionFileUploadComponent {
-    checksheetSubmissionFileService;
-    submissionId;
-    questionId;
-    uploaded = new EventEmitter();
-    constructor(checksheetSubmissionFileService) {
-        this.checksheetSubmissionFileService = checksheetSubmissionFileService;
-    }
-    onUploadComplete(uploadedFiles) {
-        const uploadObservables = uploadedFiles.map((file) => {
-            const data = {
-                file_name: file.item.file_name,
-                file_url: file.item.url,
-                submission_id: this.submissionId,
-                question_id: this.questionId
-            };
-            return this.checksheetSubmissionFileService
-                .store(data)
-                .pipe(map((response) => response?.item));
-        });
-        forkJoin(uploadObservables).subscribe({
-            next: (checksheetSubmissionFiles) => {
-                this.uploaded.emit(checksheetSubmissionFiles);
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionFileUploadComponent, deps: [{ token: ChecksheetSubmissionFileService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetSubmissionFileUploadComponent, isStandalone: true, selector: "app-checksheet-submission-file-upload", inputs: { submissionId: "submissionId", questionId: "questionId" }, outputs: { uploaded: "uploaded" }, ngImport: i0, template: "<app-file-upload-button\n  (uploaded)=\"onUploadComplete($event)\"\n  [config]=\"{ fileId: 'question-' + questionId }\"\n></app-file-upload-button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FileUploadButtonComponent, selector: "app-file-upload-button", inputs: ["config"], outputs: ["uploaded"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionFileUploadComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-checksheet-submission-file-upload', standalone: true, imports: [CommonModule, FileUploadButtonComponent], template: "<app-file-upload-button\n  (uploaded)=\"onUploadComplete($event)\"\n  [config]=\"{ fileId: 'question-' + questionId }\"\n></app-file-upload-button>\n" }]
-        }], ctorParameters: () => [{ type: ChecksheetSubmissionFileService }], propDecorators: { submissionId: [{
-                type: Input
-            }], questionId: [{
-                type: Input
-            }], uploaded: [{
-                type: Output
-            }] } });
-
 class ChecksheetSubmissionFileDeleteButtonComponent {
     matDialog;
     checksheetSubmissionFileService;
@@ -383,7 +502,7 @@ class ChecksheetSubmissionFileDeleteButtonComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionFileDeleteButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: ChecksheetSubmissionFileService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetSubmissionFileDeleteButtonComponent, isStandalone: true, selector: "app-checksheet-submission-file-delete-button", inputs: { checksheetSubmissionFile: "checksheetSubmissionFile" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<mat-icon class=\"cursor-pointer\" (click)=\"openDialog(deleteTemplate)\">\n  delete\n</mat-icon>\n\n<ng-template #deleteTemplate>\n  <h3 mat-dialog-title>Delete Checksheet Attachment</h3>\n  <div mat-dialog-content>\n    <p>Are you sure you want to delete the file?</p>\n  </div>\n  <div\n    mat-dialog-actions\n    class=\"d-flex justify-content-end gap-2 align-items-center\"\n  >\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-flat-button\n      mat-dialog-close\n    >\n      Cancel\n    </button>\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      (click)=\"deleteModel()\"\n      mat-raised-button\n      color=\"warn\"\n    >\n      Delete\n    </button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MaterialModule$1 }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetSubmissionFileDeleteButtonComponent, isStandalone: true, selector: "app-checksheet-submission-file-delete-button", inputs: { checksheetSubmissionFile: "checksheetSubmissionFile" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<mat-icon class=\"cursor-pointer\" (click)=\"openDialog(deleteTemplate)\">\n  delete\n</mat-icon>\n\n<ng-template #deleteTemplate>\n  <h3 mat-dialog-title>Delete Checksheet Attachment</h3>\n  <div mat-dialog-content>\n    <p>Are you sure you want to delete the file?</p>\n  </div>\n  <div\n    mat-dialog-actions\n    class=\"d-flex justify-content-end gap-2 align-items-center\"\n  >\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-flat-button\n      mat-dialog-close\n    >\n      Cancel\n    </button>\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      (click)=\"deleteModel()\"\n      mat-raised-button\n      color=\"warn\"\n    >\n      Delete\n    </button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MaterialModule$1 }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionFileDeleteButtonComponent, decorators: [{
             type: Component,
@@ -396,14 +515,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class ChecksheetSubmissionFilesComponent extends TechlifyListingControllerInterface {
     formBuilder;
-    checksheetSubmissionFileService;
+    service;
+    entityFileService;
+    alertService;
     submissionId;
     questionId;
+    viewMode = 'horizontal-timeline';
+    fileDropperHeight = '150px';
+    allowMultipleFiles = false;
     displayedColumns = ['No', 'File', 'Actions'];
-    constructor(formBuilder, checksheetSubmissionFileService) {
+    fileConfig;
+    fileList = [];
+    constructor(formBuilder, service, entityFileService, alertService) {
         super();
         this.formBuilder = formBuilder;
-        this.checksheetSubmissionFileService = checksheetSubmissionFileService;
+        this.service = service;
+        this.entityFileService = entityFileService;
+        this.alertService = alertService;
         this.lastPage = 0;
         this.filterForm = this.formBuilder.group({
             search: [''],
@@ -412,6 +540,17 @@ class ChecksheetSubmissionFilesComponent extends TechlifyListingControllerInterf
         });
     }
     ngOnInit() {
+        this.fileConfig = {
+            fileId: "entityDashboardDropper-" + this.submissionId + '-' + this.questionId,
+            containerId: "entityDashboardDropperContainer-" + this.submissionId + '-' + this.questionId,
+            styles: {
+                height: this.fileDropperHeight
+            },
+            multiple: this.allowMultipleFiles,
+            acceptFile: "*",
+            maxSize: 10,
+            acceptFileText: "All Files"
+        };
         this.filterForm.patchValue({
             submission_ids: this.submissionId ?? '',
             question_ids: this.questionId ?? ''
@@ -423,10 +562,11 @@ class ChecksheetSubmissionFilesComponent extends TechlifyListingControllerInterf
         const params = {
             ...this.filterForm.value,
             perPage: this.perPage,
-            page: this.page
+            page: this.page,
+            with: 'creator'
         };
         this.isWorking = true;
-        this.checksheetSubmissionFileService.index(params).subscribe({
+        this.service.index(params).subscribe({
             next: (response) => {
                 this.models = this.models.concat(response?.data);
                 this.lastPage = response?.last_page;
@@ -434,16 +574,59 @@ class ChecksheetSubmissionFilesComponent extends TechlifyListingControllerInterf
             complete: () => (this.isWorking = false)
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionFilesComponent, deps: [{ token: i2.FormBuilder }, { token: ChecksheetSubmissionFileService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetSubmissionFilesComponent, isStandalone: true, selector: "app-checksheet-submission-files", inputs: { submissionId: "submissionId", questionId: "questionId" }, usesInheritance: true, ngImport: i0, template: "<mat-card class=\"p-0\">\n  <mat-card-content\n    class=\"p-2 mb-0 d-flex justify-content-between align-items-center\"\n  >\n    <div>\n      <h3 class=\"mb-0\">Files</h3>\n    </div>\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input\n          formControlName=\"search\"\n          type=\"text\"\n          matInput\n          placeholder=\"Search\"\n        />\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\n      <!-- No Column -->\n      <ng-container matColumnDef=\"No\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ 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\">{{ element?.title }}</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\">{{ element?.description }}</td>\n      </ng-container>\n\n      <!-- File Column -->\n      <ng-container matColumnDef=\"File\">\n        <th mat-header-cell *matHeaderCellDef>File</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.file_name }}</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\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <a\n              class=\"text-decoration-none cursor-pointer text-dark\"\n              [href]=\"element?.file_url\"\n              target=\"_blank\"\n            >\n              <span class=\"material-symbols-outlined\"> visibility </span>\n            </a>\n\n            <app-checksheet-submission-file-delete-button\n              [checksheetSubmissionFile]=\"element\"\n              (deleted)=\"reload()\"\n            ></app-checksheet-submission-file-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    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MaterialModule$1 }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i12.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: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChecksheetSubmissionFileDeleteButtonComponent, selector: "app-checksheet-submission-file-delete-button", inputs: ["checksheetSubmissionFile"], outputs: ["deleted"] }] });
+    async fileChanged(event) {
+        if (event && event?.length > 0) {
+            const fileArray = Array.from(event);
+            // upload files
+            const results = await this.uploadFiles(fileArray);
+            // link with submission question
+            this.onUploadComplete(results);
+        }
+    }
+    async uploadFiles(files) {
+        const uploadPromises = files.map((file) => this.entityFileService.uploadEntityFile(file));
+        return await Promise.all(uploadPromises);
+    }
+    onUploadComplete(uploadedFiles) {
+        const uploadObservables = uploadedFiles.map((file) => {
+            const data = {
+                file_name: file.item.file_name,
+                file_url: file.item.url,
+                submission_id: this.submissionId,
+                question_id: this.questionId
+            };
+            return this.service
+                .store(data)
+                .pipe(map((response) => response?.item));
+        });
+        forkJoin(uploadObservables).subscribe({
+            next: () => {
+                this.reload();
+                this.fileList = [];
+                const fileInput = document.getElementById("entityDashboardDropper-" + this.submissionId + '-' + this.questionId);
+                fileInput.value = '';
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionFilesComponent, deps: [{ token: i2.FormBuilder }, { token: ChecksheetSubmissionFileService }, { token: i1.EntityFileService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetSubmissionFilesComponent, isStandalone: true, selector: "app-checksheet-submission-files", inputs: { submissionId: "submissionId", questionId: "questionId", viewMode: "viewMode", fileDropperHeight: "fileDropperHeight", allowMultipleFiles: "allowMultipleFiles" }, usesInheritance: true, ngImport: i0, template: "<mat-card class=\"p-0\" *ngIf=\"viewMode === 'table'\">\n  <mat-card-content\n    class=\"p-2 mb-0 d-flex justify-content-between align-items-center\"\n  >\n    <div>\n      <h3 class=\"mb-0\">Files</h3>\n    </div>\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input\n          formControlName=\"search\"\n          type=\"text\"\n          matInput\n          placeholder=\"Search\"\n        />\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\n      <!-- No Column -->\n      <ng-container matColumnDef=\"No\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ 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\">{{ element?.title }}</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\">{{ element?.description }}</td>\n      </ng-container>\n\n      <!-- File Column -->\n      <ng-container matColumnDef=\"File\">\n        <th mat-header-cell *matHeaderCellDef>File</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.file_name }}</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\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <a\n              class=\"text-decoration-none cursor-pointer text-dark\"\n              [href]=\"element?.file_url\"\n              target=\"_blank\"\n            >\n              <span class=\"material-symbols-outlined\"> visibility </span>\n            </a>\n\n            <app-checksheet-submission-file-delete-button\n              [checksheetSubmissionFile]=\"element\"\n              (deleted)=\"reload()\"\n            ></app-checksheet-submission-file-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    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n\n<mat-card *ngIf=\"viewMode === 'horizontal-timeline'\">\n  <mat-card-content class=\"mt-3 d-flex justify-content-start gap-3\">\n    <app-file-dropper class=\"w-50\" [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n    </app-file-dropper>\n    <div style=\"width: calc(50% - 1rem)\">\n      <div *ngFor=\"let model 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\">{{ model?.file_name | wrap:20 }}</p>\n          </div>\n        </div>\n        <app-read-more [text]=\"model?.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 {{ model?.creator?.name }} {{ model?.created_at | date: 'mediumDate'}}</i>\n          </small>\n          <div class=\"d-flex justify-content-end align-items-center gap-1\">\n            <a class=\"text-decoration-none cursor-pointer text-dark\" [href]=\"model?.file_url\" target=\"_blank\">\n              <span class=\"material-symbols-outlined\"> download </span>\n            </a>\n            <app-checksheet-submission-file-delete-button [checksheetSubmissionFile]=\"model\" (deleted)=\"reload()\">\n            </app-checksheet-submission-file-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    </div>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "ngmodule", type: MaterialModule$1 }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.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: i7$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$1.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: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChecksheetSubmissionFileDeleteButtonComponent, selector: "app-checksheet-submission-file-delete-button", inputs: ["checksheetSubmissionFile"], outputs: ["deleted"] }, { kind: "ngmodule", type: FileDropperModule }, { kind: "component", type: i1.FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "ngmodule", type: ReadMoreModule }, { kind: "component", type: i1.ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { kind: "pipe", type: WrapPipe, name: "wrap" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionFilesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-checksheet-submission-files', standalone: true, imports: [CommonModule, MaterialModule$1, MatProgressBarModule, ReactiveFormsModule, ChecksheetSubmissionFileDeleteButtonComponent], template: "<mat-card class=\"p-0\">\n  <mat-card-content\n    class=\"p-2 mb-0 d-flex justify-content-between align-items-center\"\n  >\n    <div>\n      <h3 class=\"mb-0\">Files</h3>\n    </div>\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input\n          formControlName=\"search\"\n          type=\"text\"\n          matInput\n          placeholder=\"Search\"\n        />\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\n      <!-- No Column -->\n      <ng-container matColumnDef=\"No\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ 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\">{{ element?.title }}</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\">{{ element?.description }}</td>\n      </ng-container>\n\n      <!-- File Column -->\n      <ng-container matColumnDef=\"File\">\n        <th mat-header-cell *matHeaderCellDef>File</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.file_name }}</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\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <a\n              class=\"text-decoration-none cursor-pointer text-dark\"\n              [href]=\"element?.file_url\"\n              target=\"_blank\"\n            >\n              <span class=\"material-symbols-outlined\"> visibility </span>\n            </a>\n\n            <app-checksheet-submission-file-delete-button\n              [checksheetSubmissionFile]=\"element\"\n              (deleted)=\"reload()\"\n            ></app-checksheet-submission-file-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    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n" }]
-        }], ctorParameters: () => [{ type: i2.FormBuilder }, { type: ChecksheetSubmissionFileService }], propDecorators: { submissionId: [{
+            args: [{ selector: 'app-checksheet-submission-files', standalone: true, imports: [
+                        CommonModule, MaterialModule$1, MatProgressBarModule, ReactiveFormsModule,
+                        ChecksheetSubmissionFileDeleteButtonComponent, FileDropperModule, ReadMoreModule, WrapPipe
+                    ], template: "<mat-card class=\"p-0\" *ngIf=\"viewMode === 'table'\">\n  <mat-card-content\n    class=\"p-2 mb-0 d-flex justify-content-between align-items-center\"\n  >\n    <div>\n      <h3 class=\"mb-0\">Files</h3>\n    </div>\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input\n          formControlName=\"search\"\n          type=\"text\"\n          matInput\n          placeholder=\"Search\"\n        />\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\n      <!-- No Column -->\n      <ng-container matColumnDef=\"No\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ 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\">{{ element?.title }}</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\">{{ element?.description }}</td>\n      </ng-container>\n\n      <!-- File Column -->\n      <ng-container matColumnDef=\"File\">\n        <th mat-header-cell *matHeaderCellDef>File</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.file_name }}</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\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <a\n              class=\"text-decoration-none cursor-pointer text-dark\"\n              [href]=\"element?.file_url\"\n              target=\"_blank\"\n            >\n              <span class=\"material-symbols-outlined\"> visibility </span>\n            </a>\n\n            <app-checksheet-submission-file-delete-button\n              [checksheetSubmissionFile]=\"element\"\n              (deleted)=\"reload()\"\n            ></app-checksheet-submission-file-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    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n\n<mat-card *ngIf=\"viewMode === 'horizontal-timeline'\">\n  <mat-card-content class=\"mt-3 d-flex justify-content-start gap-3\">\n    <app-file-dropper class=\"w-50\" [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n    </app-file-dropper>\n    <div style=\"width: calc(50% - 1rem)\">\n      <div *ngFor=\"let model 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\">{{ model?.file_name | wrap:20 }}</p>\n          </div>\n        </div>\n        <app-read-more [text]=\"model?.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 {{ model?.creator?.name }} {{ model?.created_at | date: 'mediumDate'}}</i>\n          </small>\n          <div class=\"d-flex justify-content-end align-items-center gap-1\">\n            <a class=\"text-decoration-none cursor-pointer text-dark\" [href]=\"model?.file_url\" target=\"_blank\">\n              <span class=\"material-symbols-outlined\"> download </span>\n            </a>\n            <app-checksheet-submission-file-delete-button [checksheetSubmissionFile]=\"model\" (deleted)=\"reload()\">\n            </app-checksheet-submission-file-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    </div>\n  </mat-card-content>\n</mat-card>\n" }]
+        }], ctorParameters: () => [{ type: i2.FormBuilder }, { type: ChecksheetSubmissionFileService }, { type: i1.EntityFileService }, { type: i1.AlertService }], propDecorators: { submissionId: [{
                 type: Input
             }], questionId: [{
                 type: Input
+            }], viewMode: [{
+                type: Input
+            }], fileDropperHeight: [{
+                type: Input
+            }], allowMultipleFiles: [{
+                type: Input
             }] } });
 
 let ChecksheetQuestionComponent = class ChecksheetQuestionComponent {
@@ -462,7 +645,6 @@ let ChecksheetQuestionComponent = class ChecksheetQuestionComponent {
         this.checksheetSubmissionAnswerService = checksheetSubmissionAnswerService;
     }
     ngOnInit() {
-        console.log(this.disableInput, this.submissionView);
         this.editor = new Editor();
         this.submittedAnswer.valueChanges
             .pipe(debounceTime(1000))
@@ -575,14 +757,14 @@ let ChecksheetQuestionComponent = class ChecksheetQuestionComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetQuestionComponent, deps: [{ token: ChecksheetSubmissionAnswerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetQuestionComponent, selector: "app-checksheet-question", inputs: { questionInfo: "questionInfo", index: "index", submissionView: "submissionView", submissionId: "submissionId", disableInput: "disableInput", isWorking: "isWorking" }, outputs: { isWorkingChange: "isWorkingChange" }, ngImport: i0, template: "<div\n  fxLayout=\"column\"\n  fxLayoutGap=\"0.5rem\"\n  class=\"mat-typography\"\n  *ngIf=\"!submissionView\"\n>\n  <div fxLayout=\"row\" fxLayoutGap=\"0.5rem\" class=\"font-weight-bold\">\n    <div>{{ index + 1 }}.</div>\n    <div [innerHTML]=\"questionInfo?.label\"></div>\n  </div>\n  <div fxLayout=\"row\" fxLayoutGap=\"0.5rem\">\n    <small>{{ questionInfo?.type?.title }}</small>\n  </div>\n\n  <div\n    *ngIf=\"questionInfo?.type_id === 1\"\n    fxLayout=\"column\"\n    fxLayoutGap=\"0.25rem\"\n    class=\"mr-3\"\n  >\n    <mat-radio-group class=\"answer-radio-group\" [disabled]=\"true\">\n      <mat-radio-button\n        class=\"answer-radio-button\"\n        *ngFor=\"let answer of questionInfo?.answers\"\n        [value]=\"answer.id\"\n      >\n        {{ answer.value }}\n      </mat-radio-button>\n    </mat-radio-group>\n  </div>\n\n  <div\n    *ngIf=\"questionInfo?.type_id === 2\"\n    fxLayout=\"column\"\n    fxLayoutGap=\"0.25rem\"\n    class=\"mr-3\"\n  >\n    <div\n      fxLayout=\"row\"\n      fxLayoutAlign=\"start center\"\n      *ngFor=\"let answer of questionInfo?.answers; let i = index\"\n    >\n      <mat-checkbox [disabled]=\"true\" fxFlex=\"80%\"\n        >{{ i + 1 }} ) {{ answer.value }}</mat-checkbox\n      >\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"\n      questionInfo?.type_id === 3 ||\n      questionInfo?.type_id === 5 ||\n      questionInfo?.type_id === 6\n    \"\n    fxLayout=\"column\"\n    fxLayoutGap=\"0.25rem\"\n    class=\"mr-3 w-50 border short-answer\"\n  ></div>\n\n  <div\n    *ngIf=\"questionInfo?.type_id === 4\"\n    fxLayout=\"column\"\n    fxLayoutGap=\"0.25rem\"\n    class=\"mr-3 w-50 border long-answer\"\n  ></div>\n\n  <div\n    *ngIf=\"questionInfo?.type_id === 7\"\n    fxLayout=\"column\"\n    fxLayoutGap=\"0.25rem\"\n    class=\"mr-3\"\n  >\n    <ol>\n      <li *ngFor=\"let answer of questionInfo?.answers\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <div>{{ answer?.value }} -</div>\n          <mat-radio-group [disabled]=\"true\" fxLayout=\"row\">\n            <mat-radio-button class=\"mt-1 ml-2 yes-no\" value=\"1\"\n              >Yes\n            </mat-radio-button>\n            <mat-radio-button class=\"mt-1 ml-2 yes-no\" value=\"0\"\n              >No\n            </mat-radio-button>\n          </mat-radio-group>\n        </div>\n      </li>\n    </ol>\n  </div>\n</div>\n\n<div *ngIf=\"submissionView\">\n  <div class=\"d-flex justify-content-between align-items-center gap-3 mb-2\">\n    <div class=\"d-flex align-items-center gap-2\">\n      <strong>{{ index + 1 }}.</strong>\n      <strong [innerHTML]=\"questionInfo?.label\"></strong>\n      <app-checksheet-submission-file-upload\n        [submissionId]=\"submissionId\"\n        [questionId]=\"questionInfo?.id\"\n        (uploaded)=\"checksheetSubmissionFilesComponent.reload()\"\n        class=\"ml-3\"\n      ></app-checksheet-submission-file-upload>\n    </div>\n    <span class=\"badge badge-primary\">{{ questionInfo?.type?.title }}</span>\n  </div>\n  <div class=\"d-flex justify-content-between align-items-start gap-1\">\n    <div *ngIf=\"questionInfo?.type_id === 1\" class=\"d-flex flex-column gap-2\">\n      <mat-radio-group\n        class=\"answer-radio-group\"\n        [disabled]=\"disableInput\"\n        *ngIf=\"!disableInput\"\n        [formControl]=\"submittedAnswer\"\n      >\n        <mat-radio-button\n          class=\"answer-radio-button\"\n          *ngFor=\"let answer of questionInfo?.answers\"\n          [value]=\"answer.id\"\n        >\n          {{ answer.value }}\n        </mat-radio-button>\n      </mat-radio-group>\n      <span *ngIf=\"disableInput\">\n        <b>Answer:</b>\n        {{\n          getSubmittedMCQAnswer(\n            questionInfo?.answers,\n            this.submittedAnswer.value\n          )\n        }}\n      </span>\n    </div>\n\n    <div *ngIf=\"questionInfo?.type_id === 2\" class=\"d-flex flex-column gap-2\">\n      <ng-container *ngIf=\"!disableInput\">\n        <div\n          fxLayout=\"row\"\n          fxLayoutAlign=\"start center\"\n          *ngFor=\"let answer of questionInfo?.answers; let i = index\"\n        >\n          <mat-checkbox\n            (change)=\"onMultiSelectAnswerChange()\"\n            [disabled]=\"disableInput\"\n            [(ngModel)]=\"answer.isChecked\"\n            fxFlex=\"80%\"\n          >\n            {{ i + 1 }}\n            )\n            {{ answer.value }}\n          </mat-checkbox>\n        </div>\n      </ng-container>\n\n      <span *ngIf=\"disableInput\">\n        <b>Answers:</b>\n        {{ getSubmittedMSQAnswer() }}\n      </span>\n    </div>\n\n    <div *ngIf=\"questionInfo?.type_id === 3 || questionInfo?.type_id === 4\">\n      <div class=\"NgxEditor__Wrapper mb-2\" *ngIf=\"!disableInput\">\n        <ngx-editor-menu [editor]=\"editor\"> </ngx-editor-menu>\n        <ngx-editor\n          [editor]=\"editor\"\n          [formControl]=\"submittedAnswer\"\n        ></ngx-editor>\n      </div>\n      <div *ngIf=\"disableInput\" [innerHtml]=\"submittedAnswer.value\"></div>\n    </div>\n\n    <div *ngIf=\"questionInfo?.type_id === 5\">\n      <mat-form-field *ngIf=\"!disableInput\">\n        <mat-label>Answer</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          size=\"10\"\n          [formControl]=\"submittedAnswer\"\n        />\n      </mat-form-field>\n      <span *ngIf=\"disableInput\">{{ submittedAnswer.value }}</span>\n    </div>\n\n    <div *ngIf=\"questionInfo?.type_id === 6\">\n      <mat-form-field *ngIf=\"!disableInput\">\n        <input\n          matInput\n          [matDatepicker]=\"picker\"\n          placeholder=\"Date\"\n          [formControl]=\"submittedAnswer\"\n          (focus)=\"picker.open()\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n      </mat-form-field>\n      <span *ngIf=\"disableInput\">{{ submittedAnswer.value | date }}</span>\n    </div>\n\n    <div *ngIf=\"questionInfo?.type_id === 7 && !disableInput\">\n      <ol>\n        <li *ngFor=\"let answer of questionInfo?.answers\">\n          <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n            <div>{{ answer?.value }} -</div>\n            <mat-radio-group\n              fxLayout=\"row\"\n              (change)=\"onMultiSelectYesNoAnswerChange($event, answer)\"\n              [disabled]=\"disableInput\"\n              [value]=\"answer.selectedValue\"\n            >\n              <mat-radio-button class=\"mt-1 ml-2 yes-no\" [value]=\"true\">\n                Yes\n              </mat-radio-button>\n              <mat-radio-button class=\"mt-1 ml-2 yes-no\" [value]=\"false\">\n                No\n              </mat-radio-button>\n            </mat-radio-group>\n          </div>\n        </li>\n      </ol>\n    </div>\n\n    <app-checksheet-submission-files\n      class=\"w-50\"\n      #checksheetSubmissionFilesComponent\n      [submissionId]=\"submissionId\"\n      [questionId]=\"questionInfo?.id\"\n    ></app-checksheet-submission-files>\n  </div>\n\n  <ng-container *ngIf=\"questionInfo?.type_id === 7 && disableInput\">\n    <div *ngFor=\"let answer of questionInfo?.answers\">\n      {{ answer?.value }} - {{ answer?.selectedValue ? 'Yes' : 'No' }}\n    </div>\n  </ng-container>\n\n  <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n</div>\n", styles: [".answer-radio-group{display:flex;flex-direction:column;margin:15px 0}.answer-radio-button{margin:5px}:host ::ng-deep .short-answer .ck.ck-content{min-height:100px!important}:host ::ng-deep .long-answer .ck.ck-content{min-height:200px!important}.scroll-container{max-height:650px;overflow-y:auto}.small-margin{margin-top:2px}:host ::ng-deep .yes-no .mat-radio-label-content{padding-left:3px}.main{display:block;position:relative;padding-left:24px;margin-bottom:15px;cursor:pointer}input[type=checkbox]{visibility:hidden}.geekmark{position:absolute;top:2px;left:0;height:15px;width:15px;background-color:#fff}.main input:checked~.geekmark{background-color:green}.geekmark:after{content:\"\";position:absolute;display:none}.main input:checked~.geekmark:after{display:block}.main .geekmark:after{left:5px;bottom:3px;width:6px;height:10px;border:solid white;border-width:0 4px 4px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}img{max-width:500px!important;max-height:500px!important}p{margin-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i6.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i4$1.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: "component", type: i9.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i12.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: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i9$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i9$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i11.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i11.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "component", type: ChecksheetSubmissionFileUploadComponent, selector: "app-checksheet-submission-file-upload", inputs: ["submissionId", "questionId"], outputs: ["uploaded"] }, { kind: "component", type: ChecksheetSubmissionFilesComponent, selector: "app-checksheet-submission-files", inputs: ["submissionId", "questionId"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetQuestionComponent, selector: "app-checksheet-question", inputs: { questionInfo: "questionInfo", index: "index", submissionView: "submissionView", submissionId: "submissionId", disableInput: "disableInput", isWorking: "isWorking" }, outputs: { isWorkingChange: "isWorkingChange" }, ngImport: i0, template: "<div class=\"d-flex flex-column gap-2\" *ngIf=\"!submissionView\">\n  <div class=\"d-flex justify-content-between align-items-center gap-3 mb-2\">\n    <div class=\"d-flex align-items-center gap-2\">\n      <strong>{{ index + 1 }}.</strong>\n      <strong [innerHTML]=\"questionInfo?.label\"></strong>\n      <span class=\"badge bg-secondary\">{{ questionInfo?.type?.title }}</span>\n    </div>\n  </div>\n\n  <div *ngIf=\"questionInfo?.type_id === 1\" fxLayout=\"column\" fxLayoutGap=\"0.25rem\" class=\"mr-3\">\n    <mat-radio-group class=\"answer-radio-group\" [disabled]=\"true\">\n      <mat-radio-button class=\"answer-radio-button\" *ngFor=\"let answer of questionInfo?.answers\" [value]=\"answer.id\">\n        {{ answer.value }}\n      </mat-radio-button>\n    </mat-radio-group>\n  </div>\n\n  <div *ngIf=\"questionInfo?.type_id === 2\" fxLayout=\"column\" fxLayoutGap=\"0.25rem\" class=\"mr-3\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" *ngFor=\"let answer of questionInfo?.answers; let i = index\">\n      <mat-checkbox [disabled]=\"true\" fxFlex=\"80%\">{{ i + 1 }} ) {{ answer.value }}</mat-checkbox>\n    </div>\n  </div>\n\n  <div *ngIf=\"questionInfo?.type_id === 3 || questionInfo?.type_id === 5 || questionInfo?.type_id === 6\"\n       class=\"mr-3 d-flex justify-content-start align-items-center gap-2\">\n    <span class=\"material-symbols-outlined\">lightbulb</span>\n    <p class=\"mb-0\">{{ questionInfo?.type?.title }}</p>\n  </div>\n\n  <div *ngIf=\"questionInfo?.type_id === 4\" class=\"mr-3 d-flex justify-content-start align-items-center gap-2\">\n    <span class=\"material-symbols-outlined\">lightbulb</span>\n    <p class=\"mb-0\">{{ questionInfo?.type?.title }}</p>\n  </div>\n\n  <div\n    *ngIf=\"questionInfo?.type_id === 7\"\n    fxLayout=\"column\"\n    fxLayoutGap=\"0.25rem\"\n    class=\"mr-3\"\n  >\n    <ol>\n      <li *ngFor=\"let answer of questionInfo?.answers\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <div>{{ answer?.value }} -</div>\n          <mat-radio-group [disabled]=\"true\" fxLayout=\"row\">\n            <mat-radio-button class=\"mt-1 ml-2 yes-no\" value=\"1\"\n            >Yes\n            </mat-radio-button>\n            <mat-radio-button class=\"mt-1 ml-2 yes-no\" value=\"0\"\n            >No\n            </mat-radio-button>\n          </mat-radio-group>\n        </div>\n      </li>\n    </ol>\n  </div>\n</div>\n\n<mat-card *ngIf=\"submissionView\">\n  <mat-card-content>\n    <div class=\"d-flex justify-content-between align-items-center gap-3 mb-2\">\n      <div class=\"d-flex align-items-center gap-2\">\n        <strong>{{ index + 1 }}.</strong>\n        <strong [innerHTML]=\"questionInfo?.label\"></strong>\n        <span class=\"badge bg-secondary\">{{ questionInfo?.type?.title }}</span>\n      </div>\n    </div>\n    <div class=\"d-flex justify-content-between align-items-start gap-1\">\n      <div *ngIf=\"questionInfo?.type_id === 1\" class=\"d-flex flex-column gap-2\">\n        <mat-radio-group class=\"answer-radio-group\" [disabled]=\"disableInput\" [formControl]=\"submittedAnswer\">\n          <mat-radio-button class=\"answer-radio-button\" *ngFor=\"let answer of questionInfo?.answers\"\n                            [value]=\"answer.id\" [disabled]=\"disableInput\">\n            {{ answer.value }}\n          </mat-radio-button>\n        </mat-radio-group>\n      </div>\n\n      <div *ngIf=\"questionInfo?.type_id === 2\" class=\"d-flex flex-column gap-2\">\n        <ng-container>\n          <div fxLayout=\"row\" fxLayoutAlign=\"start center\" *ngFor=\"let answer of questionInfo?.answers; let i = index\">\n            <mat-checkbox (change)=\"onMultiSelectAnswerChange()\" [disabled]=\"disableInput\" [(ngModel)]=\"answer.isChecked\"\n                          fxFlex=\"80%\">\n              {{ i + 1 }} ) {{ answer.value }}\n            </mat-checkbox>\n          </div>\n        </ng-container>\n      </div>\n\n      <div *ngIf=\"questionInfo?.type_id === 3 || questionInfo?.type_id === 4\">\n        <div class=\"NgxEditor__Wrapper mb-2\" *ngIf=\"!disableInput\">\n          <ngx-editor-menu [editor]=\"editor\"> </ngx-editor-menu>\n          <ngx-editor\n            [editor]=\"editor\"\n            [formControl]=\"submittedAnswer\"\n          ></ngx-editor>\n        </div>\n        <div *ngIf=\"disableInput\" [innerHtml]=\"submittedAnswer.value\"></div>\n      </div>\n\n      <div *ngIf=\"questionInfo?.type_id === 5\">\n        <mat-form-field *ngIf=\"!disableInput\">\n          <mat-label>Answer</mat-label>\n          <input matInput type=\"number\" size=\"10\" [formControl]=\"submittedAnswer\"/>\n        </mat-form-field>\n        <span *ngIf=\"disableInput\">{{ submittedAnswer.value }}</span>\n      </div>\n\n      <div *ngIf=\"questionInfo?.type_id === 6\">\n        <mat-form-field *ngIf=\"!disableInput\">\n          <input matInput [matDatepicker]=\"picker\" placeholder=\"Date\" [formControl]=\"submittedAnswer\"\n                 (focus)=\"picker.open()\"/>\n          <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n          <mat-datepicker #picker></mat-datepicker>\n        </mat-form-field>\n        <span *ngIf=\"disableInput\">{{ submittedAnswer.value | date }}</span>\n      </div>\n\n      <div *ngIf=\"questionInfo?.type_id === 7\">\n        <ol>\n          <li *ngFor=\"let answer of questionInfo?.answers\">\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n              <div>{{ answer?.value }} -</div>\n              <mat-radio-group fxLayout=\"row\" (change)=\"onMultiSelectYesNoAnswerChange($event, answer)\"\n                               [disabled]=\"disableInput\" [value]=\"answer.selectedValue\">\n                <mat-radio-button class=\"mt-1 ml-2 yes-no\" [value]=\"true\" [disabled]=\"disableInput\">\n                  Yes\n                </mat-radio-button>\n                <mat-radio-button class=\"mt-1 ml-2 yes-no\" [value]=\"false\" [disabled]=\"disableInput\">\n                  No\n                </mat-radio-button>\n              </mat-radio-group>\n            </div>\n          </li>\n        </ol>\n      </div>\n\n      <span class=\"flex-fill\"></span>\n\n      <app-checksheet-submission-files style=\"width: calc(33.33%)\" [submissionId]=\"submissionId\"\n                                       [questionId]=\"questionInfo?.id\"></app-checksheet-submission-files>\n    </div>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [".answer-radio-group{display:flex;flex-direction:column;margin:15px 0}.answer-radio-button{margin:5px}:host ::ng-deep .short-answer .ck.ck-content{min-height:100px!important}:host ::ng-deep .long-answer .ck.ck-content{min-height:200px!important}.scroll-container{max-height:650px;overflow-y:auto}.small-margin{margin-top:2px}:host ::ng-deep .yes-no .mat-radio-label-content{padding-left:3px}.main{display:block;position:relative;padding-left:24px;margin-bottom:15px;cursor:pointer}input[type=checkbox]{visibility:hidden}.geekmark{position:absolute;top:2px;left:0;height:15px;width:15px;background-color:#fff}.main input:checked~.geekmark{background-color:green}.geekmark:after{content:\"\";position:absolute;display:none}.main input:checked~.geekmark:after{display:block}.main .geekmark:after{left:5px;bottom:3px;width:6px;height:10px;border:solid white;border-width:0 4px 4px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}img{max-width:500px!important;max-height:500px!important}p{margin-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i6.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5.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: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i11.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.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i10$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i11$1.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i11$1.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "component", type: ChecksheetSubmissionFilesComponent, selector: "app-checksheet-submission-files", inputs: ["submissionId", "questionId", "viewMode", "fileDropperHeight", "allowMultipleFiles"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None });
 };
 ChecksheetQuestionComponent = __decorate([
     UntilDestroy()
 ], ChecksheetQuestionComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetQuestionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-checksheet-question', encapsulation: ViewEncapsulation.None, template: "<div\n  fxLayout=\"column\"\n  fxLayoutGap=\"0.5rem\"\n  class=\"mat-typography\"\n  *ngIf=\"!submissionView\"\n>\n  <div fxLayout=\"row\" fxLayoutGap=\"0.5rem\" class=\"font-weight-bold\">\n    <div>{{ index + 1 }}.</div>\n    <div [innerHTML]=\"questionInfo?.label\"></div>\n  </div>\n  <div fxLayout=\"row\" fxLayoutGap=\"0.5rem\">\n    <small>{{ questionInfo?.type?.title }}</small>\n  </div>\n\n  <div\n    *ngIf=\"questionInfo?.type_id === 1\"\n    fxLayout=\"column\"\n    fxLayoutGap=\"0.25rem\"\n    class=\"mr-3\"\n  >\n    <mat-radio-group class=\"answer-radio-group\" [disabled]=\"true\">\n      <mat-radio-button\n        class=\"answer-radio-button\"\n        *ngFor=\"let answer of questionInfo?.answers\"\n        [value]=\"answer.id\"\n      >\n        {{ answer.value }}\n      </mat-radio-button>\n    </mat-radio-group>\n  </div>\n\n  <div\n    *ngIf=\"questionInfo?.type_id === 2\"\n    fxLayout=\"column\"\n    fxLayoutGap=\"0.25rem\"\n    class=\"mr-3\"\n  >\n    <div\n      fxLayout=\"row\"\n      fxLayoutAlign=\"start center\"\n      *ngFor=\"let answer of questionInfo?.answers; let i = index\"\n    >\n      <mat-checkbox [disabled]=\"true\" fxFlex=\"80%\"\n        >{{ i + 1 }} ) {{ answer.value }}</mat-checkbox\n      >\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"\n      questionInfo?.type_id === 3 ||\n      questionInfo?.type_id === 5 ||\n      questionInfo?.type_id === 6\n    \"\n    fxLayout=\"column\"\n    fxLayoutGap=\"0.25rem\"\n    class=\"mr-3 w-50 border short-answer\"\n  ></div>\n\n  <div\n    *ngIf=\"questionInfo?.type_id === 4\"\n    fxLayout=\"column\"\n    fxLayoutGap=\"0.25rem\"\n    class=\"mr-3 w-50 border long-answer\"\n  ></div>\n\n  <div\n    *ngIf=\"questionInfo?.type_id === 7\"\n    fxLayout=\"column\"\n    fxLayoutGap=\"0.25rem\"\n    class=\"mr-3\"\n  >\n    <ol>\n      <li *ngFor=\"let answer of questionInfo?.answers\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <div>{{ answer?.value }} -</div>\n          <mat-radio-group [disabled]=\"true\" fxLayout=\"row\">\n            <mat-radio-button class=\"mt-1 ml-2 yes-no\" value=\"1\"\n              >Yes\n            </mat-radio-button>\n            <mat-radio-button class=\"mt-1 ml-2 yes-no\" value=\"0\"\n              >No\n            </mat-radio-button>\n          </mat-radio-group>\n        </div>\n      </li>\n    </ol>\n  </div>\n</div>\n\n<div *ngIf=\"submissionView\">\n  <div class=\"d-flex justify-content-between align-items-center gap-3 mb-2\">\n    <div class=\"d-flex align-items-center gap-2\">\n      <strong>{{ index + 1 }}.</strong>\n      <strong [innerHTML]=\"questionInfo?.label\"></strong>\n      <app-checksheet-submission-file-upload\n        [submissionId]=\"submissionId\"\n        [questionId]=\"questionInfo?.id\"\n        (uploaded)=\"checksheetSubmissionFilesComponent.reload()\"\n        class=\"ml-3\"\n      ></app-checksheet-submission-file-upload>\n    </div>\n    <span class=\"badge badge-primary\">{{ questionInfo?.type?.title }}</span>\n  </div>\n  <div class=\"d-flex justify-content-between align-items-start gap-1\">\n    <div *ngIf=\"questionInfo?.type_id === 1\" class=\"d-flex flex-column gap-2\">\n      <mat-radio-group\n        class=\"answer-radio-group\"\n        [disabled]=\"disableInput\"\n        *ngIf=\"!disableInput\"\n        [formControl]=\"submittedAnswer\"\n      >\n        <mat-radio-button\n          class=\"answer-radio-button\"\n          *ngFor=\"let answer of questionInfo?.answers\"\n          [value]=\"answer.id\"\n        >\n          {{ answer.value }}\n        </mat-radio-button>\n      </mat-radio-group>\n      <span *ngIf=\"disableInput\">\n        <b>Answer:</b>\n        {{\n          getSubmittedMCQAnswer(\n            questionInfo?.answers,\n            this.submittedAnswer.value\n          )\n        }}\n      </span>\n    </div>\n\n    <div *ngIf=\"questionInfo?.type_id === 2\" class=\"d-flex flex-column gap-2\">\n      <ng-container *ngIf=\"!disableInput\">\n        <div\n          fxLayout=\"row\"\n          fxLayoutAlign=\"start center\"\n          *ngFor=\"let answer of questionInfo?.answers; let i = index\"\n        >\n          <mat-checkbox\n            (change)=\"onMultiSelectAnswerChange()\"\n            [disabled]=\"disableInput\"\n            [(ngModel)]=\"answer.isChecked\"\n            fxFlex=\"80%\"\n          >\n            {{ i + 1 }}\n            )\n            {{ answer.value }}\n          </mat-checkbox>\n        </div>\n      </ng-container>\n\n      <span *ngIf=\"disableInput\">\n        <b>Answers:</b>\n        {{ getSubmittedMSQAnswer() }}\n      </span>\n    </div>\n\n    <div *ngIf=\"questionInfo?.type_id === 3 || questionInfo?.type_id === 4\">\n      <div class=\"NgxEditor__Wrapper mb-2\" *ngIf=\"!disableInput\">\n        <ngx-editor-menu [editor]=\"editor\"> </ngx-editor-menu>\n        <ngx-editor\n          [editor]=\"editor\"\n          [formControl]=\"submittedAnswer\"\n        ></ngx-editor>\n      </div>\n      <div *ngIf=\"disableInput\" [innerHtml]=\"submittedAnswer.value\"></div>\n    </div>\n\n    <div *ngIf=\"questionInfo?.type_id === 5\">\n      <mat-form-field *ngIf=\"!disableInput\">\n        <mat-label>Answer</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          size=\"10\"\n          [formControl]=\"submittedAnswer\"\n        />\n      </mat-form-field>\n      <span *ngIf=\"disableInput\">{{ submittedAnswer.value }}</span>\n    </div>\n\n    <div *ngIf=\"questionInfo?.type_id === 6\">\n      <mat-form-field *ngIf=\"!disableInput\">\n        <input\n          matInput\n          [matDatepicker]=\"picker\"\n          placeholder=\"Date\"\n          [formControl]=\"submittedAnswer\"\n          (focus)=\"picker.open()\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n      </mat-form-field>\n      <span *ngIf=\"disableInput\">{{ submittedAnswer.value | date }}</span>\n    </div>\n\n    <div *ngIf=\"questionInfo?.type_id === 7 && !disableInput\">\n      <ol>\n        <li *ngFor=\"let answer of questionInfo?.answers\">\n          <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n            <div>{{ answer?.value }} -</div>\n            <mat-radio-group\n              fxLayout=\"row\"\n              (change)=\"onMultiSelectYesNoAnswerChange($event, answer)\"\n              [disabled]=\"disableInput\"\n              [value]=\"answer.selectedValue\"\n            >\n              <mat-radio-button class=\"mt-1 ml-2 yes-no\" [value]=\"true\">\n                Yes\n              </mat-radio-button>\n              <mat-radio-button class=\"mt-1 ml-2 yes-no\" [value]=\"false\">\n                No\n              </mat-radio-button>\n            </mat-radio-group>\n          </div>\n        </li>\n      </ol>\n    </div>\n\n    <app-checksheet-submission-files\n      class=\"w-50\"\n      #checksheetSubmissionFilesComponent\n      [submissionId]=\"submissionId\"\n      [questionId]=\"questionInfo?.id\"\n    ></app-checksheet-submission-files>\n  </div>\n\n  <ng-container *ngIf=\"questionInfo?.type_id === 7 && disableInput\">\n    <div *ngFor=\"let answer of questionInfo?.answers\">\n      {{ answer?.value }} - {{ answer?.selectedValue ? 'Yes' : 'No' }}\n    </div>\n  </ng-container>\n\n  <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n</div>\n", styles: [".answer-radio-group{display:flex;flex-direction:column;margin:15px 0}.answer-radio-button{margin:5px}:host ::ng-deep .short-answer .ck.ck-content{min-height:100px!important}:host ::ng-deep .long-answer .ck.ck-content{min-height:200px!important}.scroll-container{max-height:650px;overflow-y:auto}.small-margin{margin-top:2px}:host ::ng-deep .yes-no .mat-radio-label-content{padding-left:3px}.main{display:block;position:relative;padding-left:24px;margin-bottom:15px;cursor:pointer}input[type=checkbox]{visibility:hidden}.geekmark{position:absolute;top:2px;left:0;height:15px;width:15px;background-color:#fff}.main input:checked~.geekmark{background-color:green}.geekmark:after{content:\"\";position:absolute;display:none}.main input:checked~.geekmark:after{display:block}.main .geekmark:after{left:5px;bottom:3px;width:6px;height:10px;border:solid white;border-width:0 4px 4px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}img{max-width:500px!important;max-height:500px!important}p{margin-bottom:0!important}\n"] }]
+            args: [{ selector: 'app-checksheet-question', encapsulation: ViewEncapsulation.None, template: "<div class=\"d-flex flex-column gap-2\" *ngIf=\"!submissionView\">\n  <div class=\"d-flex justify-content-between align-items-center gap-3 mb-2\">\n    <div class=\"d-flex align-items-center gap-2\">\n      <strong>{{ index + 1 }}.</strong>\n      <strong [innerHTML]=\"questionInfo?.label\"></strong>\n      <span class=\"badge bg-secondary\">{{ questionInfo?.type?.title }}</span>\n    </div>\n  </div>\n\n  <div *ngIf=\"questionInfo?.type_id === 1\" fxLayout=\"column\" fxLayoutGap=\"0.25rem\" class=\"mr-3\">\n    <mat-radio-group class=\"answer-radio-group\" [disabled]=\"true\">\n      <mat-radio-button class=\"answer-radio-button\" *ngFor=\"let answer of questionInfo?.answers\" [value]=\"answer.id\">\n        {{ answer.value }}\n      </mat-radio-button>\n    </mat-radio-group>\n  </div>\n\n  <div *ngIf=\"questionInfo?.type_id === 2\" fxLayout=\"column\" fxLayoutGap=\"0.25rem\" class=\"mr-3\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" *ngFor=\"let answer of questionInfo?.answers; let i = index\">\n      <mat-checkbox [disabled]=\"true\" fxFlex=\"80%\">{{ i + 1 }} ) {{ answer.value }}</mat-checkbox>\n    </div>\n  </div>\n\n  <div *ngIf=\"questionInfo?.type_id === 3 || questionInfo?.type_id === 5 || questionInfo?.type_id === 6\"\n       class=\"mr-3 d-flex justify-content-start align-items-center gap-2\">\n    <span class=\"material-symbols-outlined\">lightbulb</span>\n    <p class=\"mb-0\">{{ questionInfo?.type?.title }}</p>\n  </div>\n\n  <div *ngIf=\"questionInfo?.type_id === 4\" class=\"mr-3 d-flex justify-content-start align-items-center gap-2\">\n    <span class=\"material-symbols-outlined\">lightbulb</span>\n    <p class=\"mb-0\">{{ questionInfo?.type?.title }}</p>\n  </div>\n\n  <div\n    *ngIf=\"questionInfo?.type_id === 7\"\n    fxLayout=\"column\"\n    fxLayoutGap=\"0.25rem\"\n    class=\"mr-3\"\n  >\n    <ol>\n      <li *ngFor=\"let answer of questionInfo?.answers\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <div>{{ answer?.value }} -</div>\n          <mat-radio-group [disabled]=\"true\" fxLayout=\"row\">\n            <mat-radio-button class=\"mt-1 ml-2 yes-no\" value=\"1\"\n            >Yes\n            </mat-radio-button>\n            <mat-radio-button class=\"mt-1 ml-2 yes-no\" value=\"0\"\n            >No\n            </mat-radio-button>\n          </mat-radio-group>\n        </div>\n      </li>\n    </ol>\n  </div>\n</div>\n\n<mat-card *ngIf=\"submissionView\">\n  <mat-card-content>\n    <div class=\"d-flex justify-content-between align-items-center gap-3 mb-2\">\n      <div class=\"d-flex align-items-center gap-2\">\n        <strong>{{ index + 1 }}.</strong>\n        <strong [innerHTML]=\"questionInfo?.label\"></strong>\n        <span class=\"badge bg-secondary\">{{ questionInfo?.type?.title }}</span>\n      </div>\n    </div>\n    <div class=\"d-flex justify-content-between align-items-start gap-1\">\n      <div *ngIf=\"questionInfo?.type_id === 1\" class=\"d-flex flex-column gap-2\">\n        <mat-radio-group class=\"answer-radio-group\" [disabled]=\"disableInput\" [formControl]=\"submittedAnswer\">\n          <mat-radio-button class=\"answer-radio-button\" *ngFor=\"let answer of questionInfo?.answers\"\n                            [value]=\"answer.id\" [disabled]=\"disableInput\">\n            {{ answer.value }}\n          </mat-radio-button>\n        </mat-radio-group>\n      </div>\n\n      <div *ngIf=\"questionInfo?.type_id === 2\" class=\"d-flex flex-column gap-2\">\n        <ng-container>\n          <div fxLayout=\"row\" fxLayoutAlign=\"start center\" *ngFor=\"let answer of questionInfo?.answers; let i = index\">\n            <mat-checkbox (change)=\"onMultiSelectAnswerChange()\" [disabled]=\"disableInput\" [(ngModel)]=\"answer.isChecked\"\n                          fxFlex=\"80%\">\n              {{ i + 1 }} ) {{ answer.value }}\n            </mat-checkbox>\n          </div>\n        </ng-container>\n      </div>\n\n      <div *ngIf=\"questionInfo?.type_id === 3 || questionInfo?.type_id === 4\">\n        <div class=\"NgxEditor__Wrapper mb-2\" *ngIf=\"!disableInput\">\n          <ngx-editor-menu [editor]=\"editor\"> </ngx-editor-menu>\n          <ngx-editor\n            [editor]=\"editor\"\n            [formControl]=\"submittedAnswer\"\n          ></ngx-editor>\n        </div>\n        <div *ngIf=\"disableInput\" [innerHtml]=\"submittedAnswer.value\"></div>\n      </div>\n\n      <div *ngIf=\"questionInfo?.type_id === 5\">\n        <mat-form-field *ngIf=\"!disableInput\">\n          <mat-label>Answer</mat-label>\n          <input matInput type=\"number\" size=\"10\" [formControl]=\"submittedAnswer\"/>\n        </mat-form-field>\n        <span *ngIf=\"disableInput\">{{ submittedAnswer.value }}</span>\n      </div>\n\n      <div *ngIf=\"questionInfo?.type_id === 6\">\n        <mat-form-field *ngIf=\"!disableInput\">\n          <input matInput [matDatepicker]=\"picker\" placeholder=\"Date\" [formControl]=\"submittedAnswer\"\n                 (focus)=\"picker.open()\"/>\n          <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n          <mat-datepicker #picker></mat-datepicker>\n        </mat-form-field>\n        <span *ngIf=\"disableInput\">{{ submittedAnswer.value | date }}</span>\n      </div>\n\n      <div *ngIf=\"questionInfo?.type_id === 7\">\n        <ol>\n          <li *ngFor=\"let answer of questionInfo?.answers\">\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n              <div>{{ answer?.value }} -</div>\n              <mat-radio-group fxLayout=\"row\" (change)=\"onMultiSelectYesNoAnswerChange($event, answer)\"\n                               [disabled]=\"disableInput\" [value]=\"answer.selectedValue\">\n                <mat-radio-button class=\"mt-1 ml-2 yes-no\" [value]=\"true\" [disabled]=\"disableInput\">\n                  Yes\n                </mat-radio-button>\n                <mat-radio-button class=\"mt-1 ml-2 yes-no\" [value]=\"false\" [disabled]=\"disableInput\">\n                  No\n                </mat-radio-button>\n              </mat-radio-group>\n            </div>\n          </li>\n        </ol>\n      </div>\n\n      <span class=\"flex-fill\"></span>\n\n      <app-checksheet-submission-files style=\"width: calc(33.33%)\" [submissionId]=\"submissionId\"\n                                       [questionId]=\"questionInfo?.id\"></app-checksheet-submission-files>\n    </div>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [".answer-radio-group{display:flex;flex-direction:column;margin:15px 0}.answer-radio-button{margin:5px}:host ::ng-deep .short-answer .ck.ck-content{min-height:100px!important}:host ::ng-deep .long-answer .ck.ck-content{min-height:200px!important}.scroll-container{max-height:650px;overflow-y:auto}.small-margin{margin-top:2px}:host ::ng-deep .yes-no .mat-radio-label-content{padding-left:3px}.main{display:block;position:relative;padding-left:24px;margin-bottom:15px;cursor:pointer}input[type=checkbox]{visibility:hidden}.geekmark{position:absolute;top:2px;left:0;height:15px;width:15px;background-color:#fff}.main input:checked~.geekmark{background-color:green}.geekmark:after{content:\"\";position:absolute;display:none}.main input:checked~.geekmark:after{display:block}.main .geekmark:after{left:5px;bottom:3px;width:6px;height:10px;border:solid white;border-width:0 4px 4px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}img{max-width:500px!important;max-height:500px!important}p{margin-bottom:0!important}\n"] }]
         }], ctorParameters: () => [{ type: ChecksheetSubmissionAnswerService }], propDecorators: { questionInfo: [{
                 type: Input
             }], index: [{
@@ -730,13 +912,13 @@ class ChecksheetQuestionListComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetQuestionListComponent, deps: [{ token: i3$1.NgxSpinnerService }, { token: i1.AlertService }, { token: i1$1.MatDialog }, { token: i1.DataManager }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetQuestionListComponent, selector: "app-checksheet-question-list", inputs: { checksheet: "checksheet", submission: "submission", disableInput: "disableInput" }, outputs: { checksheetChange: "checksheetChange" }, ngImport: i0, template: "<ng-container *ngIf=\"checksheet?.id\">\n  <button\n    *ngIf=\"!disableInput\"\n    type=\"button\"\n    mat-raised-button\n    color=\"primary\"\n    (click)=\"addQuestion()\"\n    class=\"mb-2\"\n  >\n    Add Question\n  </button>\n\n  <div\n    class=\"d-flex flex-column gap-3 mat-typography scroll-container\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"1\"\n    [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\"\n    [scrollWindow]=\"false\"\n  >\n    <mat-card\n      class=\"d-flex flex-column gap-3\"\n      *ngFor=\"let question of questions; let i = index\"\n    >\n      <div\n        class=\"d-flex flex-row gap-3 justify-content-end\"\n        *ngIf=\"!disableInput\"\n      >\n        <mat-icon class=\"cursor-pointer\" (click)=\"deleteQuestion(question)\">\n          delete\n        </mat-icon>\n        <mat-icon class=\"cursor-pointer\" (click)=\"editQuestion(question, i)\">\n          edit\n        </mat-icon>\n        <mat-icon\n          class=\"cursor-pointer\"\n          *ngIf=\"i > 0\"\n          (click)=\"moveQuestionUp(i)\"\n        >\n          arrow_upward\n        </mat-icon>\n        <mat-icon\n          class=\"cursor-pointer\"\n          *ngIf=\"i < questions.length - 1\"\n          (click)=\"moveQuestionDown(i)\"\n        >\n          arrow_downward\n        </mat-icon>\n      </div>\n\n      <div>\n        <app-checksheet-question\n          [questionInfo]=\"question\"\n          [index]=\"i\"\n        ></app-checksheet-question>\n      </div>\n    </mat-card>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"submission?.id\">\n  <div fxLayout=\"column\" fxLayoutGap=\"1rem\" class=\"mat-typography\">\n    <mat-card\n      fxLayout=\"column\"\n      fxLayoutGap=\"0.5rem\"\n      class=\"w-100\"\n      *ngFor=\"let question of submission.format.questions; let i = index\"\n    >\n      <app-checksheet-question\n        [questionInfo]=\"question\"\n        [index]=\"i\"\n        [submissionView]=\"true\"\n        [submissionId]=\"submission.id\"\n        [disableInput]=\"disableInput\"\n      >\n      </app-checksheet-question>\n    </mat-card>\n  </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9$2.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: ChecksheetQuestionComponent, selector: "app-checksheet-question", inputs: ["questionInfo", "index", "submissionView", "submissionId", "disableInput", "isWorking"], outputs: ["isWorkingChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetQuestionListComponent, deps: [{ token: i1$2.NgxSpinnerService }, { token: i1.AlertService }, { token: i1$1.MatDialog }, { token: i1.DataManager }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetQuestionListComponent, selector: "app-checksheet-question-list", inputs: { checksheet: "checksheet", submission: "submission", disableInput: "disableInput" }, outputs: { checksheetChange: "checksheetChange" }, ngImport: i0, template: "<ng-container *ngIf=\"checksheet?.id\">\n  <mat-card *ngIf=\"!disableInput\" class=\"mb-3\">\n    <mat-card-content class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h2 class=\"mb-0\">Questions</h2>\n      <mat-icon (click)=\"addQuestion()\" class=\"cursor-pointer\">add</mat-icon>\n    </mat-card-content>\n  </mat-card>\n\n  <div class=\"d-flex flex-column gap-3 mat-typography\" infiniteScroll\n    [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n    <mat-card *ngFor=\"let question of questions; let i = index\">\n      <mat-card-content class=\"d-flex justify-content-between align-items-start gap-3\">\n        <app-checksheet-question [questionInfo]=\"question\" [index]=\"i\"></app-checksheet-question>\n        <div class=\"d-flex flex-row gap-3 justify-content-end\" *ngIf=\"!disableInput\">\n          <mat-icon class=\"cursor-pointer\" (click)=\"deleteQuestion(question)\">delete</mat-icon>\n          <mat-icon class=\"cursor-pointer\" (click)=\"editQuestion(question, i)\">edit</mat-icon>\n          <mat-icon class=\"cursor-pointer\" *ngIf=\"i > 0\" (click)=\"moveQuestionUp(i)\">arrow_upward</mat-icon>\n          <mat-icon class=\"cursor-pointer\" *ngIf=\"i < questions.length - 1\" (click)=\"moveQuestionDown(i)\">\n            arrow_downward\n          </mat-icon>\n        </div>\n\n      </mat-card-content>\n    </mat-card>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"submission?.id\">\n  <div class=\"d-flex flex-column gap-2\">\n    <app-checksheet-question *ngFor=\"let question of submission.format.questions; let i = index\"\n                             [questionInfo]=\"question\" [index]=\"i\" [submissionView]=\"true\"\n                             [submissionId]=\"submission.id\" [disableInput]=\"disableInput\">\n    </app-checksheet-question>\n  </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$2.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: ChecksheetQuestionComponent, selector: "app-checksheet-question", inputs: ["questionInfo", "index", "submissionView", "submissionId", "disableInput", "isWorking"], outputs: ["isWorkingChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetQuestionListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-checksheet-question-list', template: "<ng-container *ngIf=\"checksheet?.id\">\n  <button\n    *ngIf=\"!disableInput\"\n    type=\"button\"\n    mat-raised-button\n    color=\"primary\"\n    (click)=\"addQuestion()\"\n    class=\"mb-2\"\n  >\n    Add Question\n  </button>\n\n  <div\n    class=\"d-flex flex-column gap-3 mat-typography scroll-container\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"1\"\n    [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\"\n    [scrollWindow]=\"false\"\n  >\n    <mat-card\n      class=\"d-flex flex-column gap-3\"\n      *ngFor=\"let question of questions; let i = index\"\n    >\n      <div\n        class=\"d-flex flex-row gap-3 justify-content-end\"\n        *ngIf=\"!disableInput\"\n      >\n        <mat-icon class=\"cursor-pointer\" (click)=\"deleteQuestion(question)\">\n          delete\n        </mat-icon>\n        <mat-icon class=\"cursor-pointer\" (click)=\"editQuestion(question, i)\">\n          edit\n        </mat-icon>\n        <mat-icon\n          class=\"cursor-pointer\"\n          *ngIf=\"i > 0\"\n          (click)=\"moveQuestionUp(i)\"\n        >\n          arrow_upward\n        </mat-icon>\n        <mat-icon\n          class=\"cursor-pointer\"\n          *ngIf=\"i < questions.length - 1\"\n          (click)=\"moveQuestionDown(i)\"\n        >\n          arrow_downward\n        </mat-icon>\n      </div>\n\n      <div>\n        <app-checksheet-question\n          [questionInfo]=\"question\"\n          [index]=\"i\"\n        ></app-checksheet-question>\n      </div>\n    </mat-card>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"submission?.id\">\n  <div fxLayout=\"column\" fxLayoutGap=\"1rem\" class=\"mat-typography\">\n    <mat-card\n      fxLayout=\"column\"\n      fxLayoutGap=\"0.5rem\"\n      class=\"w-100\"\n      *ngFor=\"let question of submission.format.questions; let i = index\"\n    >\n      <app-checksheet-question\n        [questionInfo]=\"question\"\n        [index]=\"i\"\n        [submissionView]=\"true\"\n        [submissionId]=\"submission.id\"\n        [disableInput]=\"disableInput\"\n      >\n      </app-checksheet-question>\n    </mat-card>\n  </div>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i3$1.NgxSpinnerService }, { type: i1.AlertService }, { type: i1$1.MatDialog }, { type: i1.DataManager }], propDecorators: { checksheet: [{
+            args: [{ selector: 'app-checksheet-question-list', template: "<ng-container *ngIf=\"checksheet?.id\">\n  <mat-card *ngIf=\"!disableInput\" class=\"mb-3\">\n    <mat-card-content class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h2 class=\"mb-0\">Questions</h2>\n      <mat-icon (click)=\"addQuestion()\" class=\"cursor-pointer\">add</mat-icon>\n    </mat-card-content>\n  </mat-card>\n\n  <div class=\"d-flex flex-column gap-3 mat-typography\" infiniteScroll\n    [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n    <mat-card *ngFor=\"let question of questions; let i = index\">\n      <mat-card-content class=\"d-flex justify-content-between align-items-start gap-3\">\n        <app-checksheet-question [questionInfo]=\"question\" [index]=\"i\"></app-checksheet-question>\n        <div class=\"d-flex flex-row gap-3 justify-content-end\" *ngIf=\"!disableInput\">\n          <mat-icon class=\"cursor-pointer\" (click)=\"deleteQuestion(question)\">delete</mat-icon>\n          <mat-icon class=\"cursor-pointer\" (click)=\"editQuestion(question, i)\">edit</mat-icon>\n          <mat-icon class=\"cursor-pointer\" *ngIf=\"i > 0\" (click)=\"moveQuestionUp(i)\">arrow_upward</mat-icon>\n          <mat-icon class=\"cursor-pointer\" *ngIf=\"i < questions.length - 1\" (click)=\"moveQuestionDown(i)\">\n            arrow_downward\n          </mat-icon>\n        </div>\n\n      </mat-card-content>\n    </mat-card>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"submission?.id\">\n  <div class=\"d-flex flex-column gap-2\">\n    <app-checksheet-question *ngFor=\"let question of submission.format.questions; let i = index\"\n                             [questionInfo]=\"question\" [index]=\"i\" [submissionView]=\"true\"\n                             [submissionId]=\"submission.id\" [disableInput]=\"disableInput\">\n    </app-checksheet-question>\n  </div>\n</ng-container>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.NgxSpinnerService }, { type: i1.AlertService }, { type: i1$1.MatDialog }, { type: i1.DataManager }], propDecorators: { checksheet: [{
                 type: Input
             }], checksheetChange: [{
                 type: Output
@@ -751,33 +933,26 @@ const errorMessages$3 = {
         required: 'The title is required.'
     }
 };
-class ChecksheetFormComponent {
+class ChecksheetFormatFormComponent {
     formValidatorService;
     fb;
-    spinnerService;
     alertService;
     location;
-    errorHandler;
-    dataManager;
-    dialog;
     route;
     checksheetFormatService;
     checksheetForm;
     updateMode;
-    checksheet;
+    checksheetFormat;
     isSaving = false;
     id;
     disableInput;
     isLoading = false;
-    constructor(formValidatorService, fb, spinnerService, alertService, location, errorHandler, dataManager, dialog, route, checksheetFormatService) {
+    isShowChecksheetInfo = false;
+    constructor(formValidatorService, fb, alertService, location, route, checksheetFormatService) {
         this.formValidatorService = formValidatorService;
         this.fb = fb;
-        this.spinnerService = spinnerService;
         this.alertService = alertService;
         this.location = location;
-        this.errorHandler = errorHandler;
-        this.dataManager = dataManager;
-        this.dialog = dialog;
         this.route = route;
         this.checksheetFormatService = checksheetFormatService;
         this.id = parseInt(this.route.snapshot.params?.['checksheetId']);
@@ -824,68 +999,51 @@ class ChecksheetFormComponent {
         request.subscribe({
             next: (result) => {
                 this.isSaving = false;
-                if (!this.updateMode) {
-                    this.checksheet = result.item;
-                    this.checksheetForm.patchValue({ ...this.checksheet });
-                }
+                this.checksheetFormat = result?.item;
+                this.checksheetForm.patchValue({ ...this.checksheetFormat });
                 this.updateMode = true;
-                this.alertService.addAlert('Checksheet saved successfully', 'success');
+                this.isShowChecksheetInfo = false;
+                this.alertService.addAlert('Checksheet format saved successfully', 'success');
             },
-            error: (error) => {
+            error: () => {
                 this.isSaving = false;
             }
         });
     }
-    publishChecksheet() {
-        const dialogRef = this.dialog.open(ActionPopupComponent, {
-            width: '400px',
-            data: {
-                title: 'Publish Checksheet',
-                message: `Review the checksheet completely before publishing, you cannot alter once it is published. Are you sure to publish the Checksheet?`
-            },
-            autoFocus: false
-        });
-        dialogRef.afterClosed().subscribe(async (result) => {
-            if (result) {
-                //Action confirmed
-                try {
-                    this.spinnerService.show();
-                    const model = this.checksheetForm.value;
-                    model.is_published = true;
-                    const result = await this.dataManager.PUT(`api/checksheet-formats/${model.id}`, model);
-                    this.alertService.addAlert('Checksheet successfully published', 'success');
-                    this.location.back();
-                }
-                catch (error) {
-                    this.errorHandler.handleError(error, 'Unable to publish checksheet, try later');
-                }
-                finally {
-                    this.spinnerService.hide();
-                }
-            }
-        });
-    }
     loadChecksheetFormat() {
         this.isLoading = true;
-        const params = { with: 'questions.answers,questions.type' };
-        this.checksheetFormatService.show(this.id, params).subscribe({
+        const params = { with: 'questions.answers,questions.type,creator', withCount: 'submissions' };
+        const formatId = this.checksheetFormat ? this.checksheetFormat?.id : this.id;
+        if (!formatId) {
+            this.alertService.addAlert('Unable to load the checksheet format.', 'error');
+            return;
+        }
+        this.checksheetFormatService.show(formatId, params).subscribe({
             next: (result) => {
                 this.isLoading = false;
                 this.checksheetForm.patchValue(result?.item);
-                this.checksheet = result?.item;
+                this.checksheetFormat = result?.item;
             },
             error: () => {
                 this.isLoading = false;
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2.UntypedFormBuilder }, { token: i3$1.NgxSpinnerService }, { token: i1.AlertService }, { token: i4.Location }, { token: i1.ErrorHandlerService }, { token: i1.DataManager }, { token: i1$1.MatDialog }, { token: i6$2.ActivatedRoute }, { token: ChecksheetFormatService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetFormComponent, selector: "app-checksheet-form", inputs: { disableInput: "disableInput" }, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"0.5rem\">\n  <h2>Checksheet Form</h2>\n\n  <div\n    class=\"d-flex justify-content-start align-items-start gap-3\"\n    *ngIf=\"!isLoading\"\n  >\n    <div style=\"width: calc(70% - 1rem)\" *ngIf=\"checksheet\">\n      <app-checksheet-question-list\n        class=\"w-100\"\n        [(checksheet)]=\"checksheet\"\n        [disableInput]=\"disableInput\"\n      >\n      </app-checksheet-question-list>\n    </div>\n    <mat-card style=\"width: calc(30% - 1rem)\">\n      <mat-card-content>\n        <h3>Checksheet Info</h3>\n        <form\n          [formGroup]=\"checksheetForm\"\n          (submit)=\"submit()\"\n          fxLayout=\"column\"\n          fxLayoutGap=\"0.25rem\"\n        >\n          <mat-form-field>\n            <input\n              matInput\n              formControlName=\"title\"\n              placeholder=\"Title\"\n              autocomplete=\"off\"\n              required\n            />\n            <mat-error *ngIf=\"isFieldValid('title')\">\n              {{ getErrorMessage('title') }}\n            </mat-error>\n          </mat-form-field>\n\n          <div\n            class=\"my-2\"\n            fxLayout=\"row\"\n            fxLayoutGap=\"15px\"\n            fxLayoutAlign=\"end\"\n            *ngIf=\"!disableInput\"\n          >\n            <button\n              [disabled]=\"isSaving\"\n              mat-flat-button\n              type=\"button\"\n              (click)=\"location.back()\"\n            >\n              Cancel\n            </button>\n            <button\n              [disabled]=\"isSaving\"\n              mat-raised-button\n              type=\"submit\"\n              color=\"primary\"\n            >\n              Save\n            </button>\n\n            <button\n              mat-raised-button\n              [disabled]=\"isSaving\"\n              color=\"accent\"\n              *ngIf=\"updateMode\"\n              type=\"button\"\n              (click)=\"publishChecksheet()\"\n            >\n              Publish\n            </button>\n          </div>\n        </form>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i12.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: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChecksheetQuestionListComponent, selector: "app-checksheet-question-list", inputs: ["checksheet", "submission", "disableInput"], outputs: ["checksheetChange"] }] });
+    handleCancel() {
+        if (this.checksheetFormat) {
+            this.isShowChecksheetInfo = false;
+        }
+        else {
+            this.location.back();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2.UntypedFormBuilder }, { token: i1.AlertService }, { token: i4.Location }, { token: i4$1.ActivatedRoute }, { token: ChecksheetFormatService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetFormatFormComponent, selector: "app-checksheet-format-form", inputs: { disableInput: "disableInput" }, ngImport: i0, template: "<div class=\"d-flex justify-content-start align-items-start gap-3 w-100\" *ngIf=\"!isLoading\">\n  <div class=\"d-flex flex-column gap-3\" style=\"width: 80%\">\n    <mat-card>\n      <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n        <div class=\"d-flex justify-content-start align-items-center gap-2\">\n          <span class=\"material-symbols-outlined fs-1\">\n            list_alt_check\n          </span>\n          <h2 class=\"mb-0\">{{ checksheetFormat ? 'Update' : 'Create' }} Checksheet Format</h2>\n        </div>\n        <span class=\"badge bg-secondary\" *ngIf=\"checksheetFormat?.questions\">\n          {{ checksheetFormat?.questions?.length }} Questions\n        </span>\n      </mat-card-content>\n    </mat-card>\n\n    <app-checksheet-question-list class=\"w-100\" [(checksheet)]=\"checksheetFormat\" [disableInput]=\"disableInput\">\n    </app-checksheet-question-list>\n  </div>\n  <div style=\"width: calc(20% - 1rem)\" class=\"d-flex flex-column gap-3\">\n    <mat-card *ngIf=\"!checksheetFormat || isShowChecksheetInfo\">\n      <mat-card-content>\n        <h3>Checksheet Format Information</h3>\n        <form [formGroup]=\"checksheetForm\" (submit)=\"submit()\" fxLayout=\"column\" fxLayoutGap=\"0.25rem\">\n          <mat-form-field>\n            <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" required/>\n            <mat-error *ngIf=\"isFieldValid('title')\">\n              {{ getErrorMessage('title') }}\n            </mat-error>\n          </mat-form-field>\n\n          <div class=\"my-2 d-flex justify-content-end align-items-center gap-1 flex-wrap\" *ngIf=\"!disableInput\">\n            <button [disabled]=\"isSaving\" mat-raised-button type=\"submit\" color=\"primary\">\n              Save\n            </button>\n\n            <app-checksheet-format-publish-button [checksheetFormat]=\"checksheetFormat\" *ngIf=\"updateMode\"\n                                                  (changed)=\"loadChecksheetFormat()\">\n            </app-checksheet-format-publish-button>\n\n            <button [disabled]=\"isSaving\" mat-flat-button type=\"button\" (click)=\"handleCancel()\">\n              Cancel\n            </button>\n          </div>\n        </form>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card *ngIf=\"checksheetFormat && !isShowChecksheetInfo\">\n      <mat-card-content>\n        <div class=\"d-flex justify-content-between align-items-center gap-2\">\n          <h3 class=\"mb-0\">Information</h3>\n          <div class=\"d-flex justify-content-end align-items-center gap-2\">\n            <mat-icon class=\"cursor-pointer\" (click)=\"isShowChecksheetInfo = true\">edit</mat-icon>\n            <app-checksheet-format-delete-button [checksheetFormat]=\"checksheetFormat\" (deleted)=\"loadChecksheetFormat()\">\n            </app-checksheet-format-delete-button>\n\n            <app-checksheet-format-copy-button [checksheetFormat]=\"checksheetFormat\" (changed)=\"loadChecksheetFormat()\">\n            </app-checksheet-format-copy-button>\n\n            <app-checksheet-format-unpublish-button [checksheetFormat]=\"checksheetFormat\" (changed)=\"loadChecksheetFormat()\">\n            </app-checksheet-format-unpublish-button>\n\n            <app-checksheet-format-publish-button [checksheetFormat]=\"checksheetFormat\" (changed)=\"loadChecksheetFormat()\" viewMode=\"icon\">\n            </app-checksheet-format-publish-button>\n          </div>\n        </div>\n      </mat-card-content>\n      <mat-card-content class=\"mt-3 d-flex flex-column justify-content-center align-items-center gap-2\">\n        <h2 class=\"mb-0\">{{ checksheetFormat?.title }}</h2>\n        <div class=\"d-flex flex-wrap justify-content-center align-items-center gap-2\">\n          <span class=\"badge bg-secondary\">{{ checksheetFormat?.submissions_count }} Checksheet Submissions</span>\n          <span class=\"badge\" [class.bg-success]=\"checksheetFormat?.is_published\"\n                [class.bg-danger]=\"!checksheetFormat?.is_published\">\n            {{ checksheetFormat?.is_published ? 'Published' : 'Unpublished' }}\n          </span>\n        </div>\n        <small class=\"text-secondary\">\n          By {{ checksheetFormat?.creator?.name }} on {{ checksheetFormat?.created_at| date }}\n        </small>\n      </mat-card-content>\n    </mat-card>\n\n    <app-note-list *ngIf=\"checksheetFormat\" viewMode=\"timeline\" [relatedModelId]=\"checksheetFormat?.id\"\n                   modelType=\"ChecksheetFormat\"></app-note-list>\n  </div>\n</div>\n\n<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i11.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.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.NoteListComponent, selector: "app-note-list", inputs: ["relatedModelId", "modelType", "readonly", "labelText", "commentsView", "viewMode"] }, { kind: "component", type: ChecksheetFormatCopyButtonComponent, selector: "app-checksheet-format-copy-button", inputs: ["checksheetFormat"], outputs: ["changed"] }, { kind: "component", type: ChecksheetFormatDeleteButtonComponent, selector: "app-checksheet-format-delete-button", inputs: ["checksheetFormat"], outputs: ["deleted"] }, { kind: "component", type: ChecksheetFormatUnpublishButtonComponent, selector: "app-checksheet-format-unpublish-button", inputs: ["checksheetFormat"], outputs: ["changed"] }, { kind: "component", type: ChecksheetFormatPublishButtonComponent, selector: "app-checksheet-format-publish-button", inputs: ["checksheetFormat", "viewMode"], outputs: ["changed"] }, { kind: "component", type: ChecksheetQuestionListComponent, selector: "app-checksheet-question-list", inputs: ["checksheet", "submission", "disableInput"], outputs: ["checksheetChange"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-checksheet-form', template: "<div fxLayout=\"column\" fxLayoutGap=\"0.5rem\">\n  <h2>Checksheet Form</h2>\n\n  <div\n    class=\"d-flex justify-content-start align-items-start gap-3\"\n    *ngIf=\"!isLoading\"\n  >\n    <div style=\"width: calc(70% - 1rem)\" *ngIf=\"checksheet\">\n      <app-checksheet-question-list\n        class=\"w-100\"\n        [(checksheet)]=\"checksheet\"\n        [disableInput]=\"disableInput\"\n      >\n      </app-checksheet-question-list>\n    </div>\n    <mat-card style=\"width: calc(30% - 1rem)\">\n      <mat-card-content>\n        <h3>Checksheet Info</h3>\n        <form\n          [formGroup]=\"checksheetForm\"\n          (submit)=\"submit()\"\n          fxLayout=\"column\"\n          fxLayoutGap=\"0.25rem\"\n        >\n          <mat-form-field>\n            <input\n              matInput\n              formControlName=\"title\"\n              placeholder=\"Title\"\n              autocomplete=\"off\"\n              required\n            />\n            <mat-error *ngIf=\"isFieldValid('title')\">\n              {{ getErrorMessage('title') }}\n            </mat-error>\n          </mat-form-field>\n\n          <div\n            class=\"my-2\"\n            fxLayout=\"row\"\n            fxLayoutGap=\"15px\"\n            fxLayoutAlign=\"end\"\n            *ngIf=\"!disableInput\"\n          >\n            <button\n              [disabled]=\"isSaving\"\n              mat-flat-button\n              type=\"button\"\n              (click)=\"location.back()\"\n            >\n              Cancel\n            </button>\n            <button\n              [disabled]=\"isSaving\"\n              mat-raised-button\n              type=\"submit\"\n              color=\"primary\"\n            >\n              Save\n            </button>\n\n            <button\n              mat-raised-button\n              [disabled]=\"isSaving\"\n              color=\"accent\"\n              *ngIf=\"updateMode\"\n              type=\"button\"\n              (click)=\"publishChecksheet()\"\n            >\n              Publish\n            </button>\n          </div>\n        </form>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2.UntypedFormBuilder }, { type: i3$1.NgxSpinnerService }, { type: i1.AlertService }, { type: i4.Location }, { type: i1.ErrorHandlerService }, { type: i1.DataManager }, { type: i1$1.MatDialog }, { type: i6$2.ActivatedRoute }, { type: ChecksheetFormatService }], propDecorators: { disableInput: [{
+            args: [{ selector: 'app-checksheet-format-form', template: "<div class=\"d-flex justify-content-start align-items-start gap-3 w-100\" *ngIf=\"!isLoading\">\n  <div class=\"d-flex flex-column gap-3\" style=\"width: 80%\">\n    <mat-card>\n      <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n        <div class=\"d-flex justify-content-start align-items-center gap-2\">\n          <span class=\"material-symbols-outlined fs-1\">\n            list_alt_check\n          </span>\n          <h2 class=\"mb-0\">{{ checksheetFormat ? 'Update' : 'Create' }} Checksheet Format</h2>\n        </div>\n        <span class=\"badge bg-secondary\" *ngIf=\"checksheetFormat?.questions\">\n          {{ checksheetFormat?.questions?.length }} Questions\n        </span>\n      </mat-card-content>\n    </mat-card>\n\n    <app-checksheet-question-list class=\"w-100\" [(checksheet)]=\"checksheetFormat\" [disableInput]=\"disableInput\">\n    </app-checksheet-question-list>\n  </div>\n  <div style=\"width: calc(20% - 1rem)\" class=\"d-flex flex-column gap-3\">\n    <mat-card *ngIf=\"!checksheetFormat || isShowChecksheetInfo\">\n      <mat-card-content>\n        <h3>Checksheet Format Information</h3>\n        <form [formGroup]=\"checksheetForm\" (submit)=\"submit()\" fxLayout=\"column\" fxLayoutGap=\"0.25rem\">\n          <mat-form-field>\n            <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" required/>\n            <mat-error *ngIf=\"isFieldValid('title')\">\n              {{ getErrorMessage('title') }}\n            </mat-error>\n          </mat-form-field>\n\n          <div class=\"my-2 d-flex justify-content-end align-items-center gap-1 flex-wrap\" *ngIf=\"!disableInput\">\n            <button [disabled]=\"isSaving\" mat-raised-button type=\"submit\" color=\"primary\">\n              Save\n            </button>\n\n            <app-checksheet-format-publish-button [checksheetFormat]=\"checksheetFormat\" *ngIf=\"updateMode\"\n                                                  (changed)=\"loadChecksheetFormat()\">\n            </app-checksheet-format-publish-button>\n\n            <button [disabled]=\"isSaving\" mat-flat-button type=\"button\" (click)=\"handleCancel()\">\n              Cancel\n            </button>\n          </div>\n        </form>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card *ngIf=\"checksheetFormat && !isShowChecksheetInfo\">\n      <mat-card-content>\n        <div class=\"d-flex justify-content-between align-items-center gap-2\">\n          <h3 class=\"mb-0\">Information</h3>\n          <div class=\"d-flex justify-content-end align-items-center gap-2\">\n            <mat-icon class=\"cursor-pointer\" (click)=\"isShowChecksheetInfo = true\">edit</mat-icon>\n            <app-checksheet-format-delete-button [checksheetFormat]=\"checksheetFormat\" (deleted)=\"loadChecksheetFormat()\">\n            </app-checksheet-format-delete-button>\n\n            <app-checksheet-format-copy-button [checksheetFormat]=\"checksheetFormat\" (changed)=\"loadChecksheetFormat()\">\n            </app-checksheet-format-copy-button>\n\n            <app-checksheet-format-unpublish-button [checksheetFormat]=\"checksheetFormat\" (changed)=\"loadChecksheetFormat()\">\n            </app-checksheet-format-unpublish-button>\n\n            <app-checksheet-format-publish-button [checksheetFormat]=\"checksheetFormat\" (changed)=\"loadChecksheetFormat()\" viewMode=\"icon\">\n            </app-checksheet-format-publish-button>\n          </div>\n        </div>\n      </mat-card-content>\n      <mat-card-content class=\"mt-3 d-flex flex-column justify-content-center align-items-center gap-2\">\n        <h2 class=\"mb-0\">{{ checksheetFormat?.title }}</h2>\n        <div class=\"d-flex flex-wrap justify-content-center align-items-center gap-2\">\n          <span class=\"badge bg-secondary\">{{ checksheetFormat?.submissions_count }} Checksheet Submissions</span>\n          <span class=\"badge\" [class.bg-success]=\"checksheetFormat?.is_published\"\n                [class.bg-danger]=\"!checksheetFormat?.is_published\">\n            {{ checksheetFormat?.is_published ? 'Published' : 'Unpublished' }}\n          </span>\n        </div>\n        <small class=\"text-secondary\">\n          By {{ checksheetFormat?.creator?.name }} on {{ checksheetFormat?.created_at| date }}\n        </small>\n      </mat-card-content>\n    </mat-card>\n\n    <app-note-list *ngIf=\"checksheetFormat\" viewMode=\"timeline\" [relatedModelId]=\"checksheetFormat?.id\"\n                   modelType=\"ChecksheetFormat\"></app-note-list>\n  </div>\n</div>\n\n<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2.UntypedFormBuilder }, { type: i1.AlertService }, { type: i4.Location }, { type: i4$1.ActivatedRoute }, { type: ChecksheetFormatService }], propDecorators: { disableInput: [{
                 type: Input
             }] } });
 
@@ -910,67 +1068,6 @@ class ChecksheetFormatListComponent extends TechlifyListingControllerInterface {
     ngOnInit() {
         this.loadData();
     }
-    deactivateChecksheet(checksheet) {
-        const dialogRef = this.dialog.open(ActionPopupComponent, {
-            width: '400px',
-            data: {
-                title: 'Deactivate Checksheet',
-                message: `Are you sure to proceed deactivate the ${checksheet.title}?`
-            },
-            autoFocus: false
-        });
-        dialogRef.afterClosed().subscribe(async (result) => {
-            if (result) {
-                this.service.delete(checksheet).subscribe({
-                    next: () => {
-                        this.alertService.addAlert('Checksheet deactivated successfully!', 'success');
-                        this.models = this.models.filter((x) => x.id !== checksheet.id);
-                    }
-                });
-            }
-        });
-    }
-    copyChecksheet(checksheet) {
-        const dialogRef = this.dialog.open(ActionPopupComponent, {
-            width: '400px',
-            data: {
-                title: 'Copy Checksheet',
-                message: `Are you sure to proceed copy the ${checksheet.title}?`
-            },
-            autoFocus: false
-        });
-        dialogRef.afterClosed().subscribe(async (result) => {
-            if (result) {
-                this.service.copy(checksheet).subscribe({
-                    next: () => {
-                        this.alertService.addAlert('Checksheet copied successfully!', 'success');
-                        this.reload();
-                    }
-                });
-            }
-        });
-    }
-    unpublishChecksheet(checksheet) {
-        const dialogRef = this.dialog.open(ActionPopupComponent, {
-            width: '400px',
-            data: {
-                title: 'Unpublish Checksheet',
-                message: `Are you sure to unpublish the format ${checksheet.title}?
-                This checksheet format would no longer be available to team members to create submissions for. `
-            },
-            autoFocus: false
-        });
-        dialogRef.afterClosed().subscribe(async (result) => {
-            if (result) {
-                this.service.unpublish(checksheet).subscribe({
-                    next: () => {
-                        this.alertService.addAlert('Checksheet unpublished successfully!', 'success');
-                        this.reload();
-                    }
-                });
-            }
-        });
-    }
     loadData() {
         this.isWorking = true;
         const params = {
@@ -991,11 +1088,11 @@ class ChecksheetFormatListComponent extends TechlifyListingControllerInterface {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatListComponent, deps: [{ token: i1$1.MatDialog }, { token: ChecksheetFormatService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetFormatListComponent, selector: "app-checksheet-format-list", usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">Checksheet Formats</h3>\n      <a [routerLink]=\"['../checksheet-form']\" class=\"text-decoration-none text-dark mt-2\">\n        <mat-icon>add</mat-icon>\n      </a>\n    </div>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table [dataSource]=\"models\" class=\"w-100\"\n      infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\"\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 = index\">\n          {{ i + 1 }}\n        </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\">{{ element.title }} <br /></td>\n      </ng-container>\n\n      <!-- Questions Column -->\n      <ng-container matColumnDef=\"questions\">\n        <th mat-header-cell *matHeaderCellDef>Questions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.questions_count }}\n        </td>\n      </ng-container>\n\n      <!-- Submissions Column -->\n      <ng-container matColumnDef=\"submissions\">\n        <th mat-header-cell *matHeaderCellDef>Submissions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.submissions_count }}\n        </td>\n      </ng-container>\n\n      <!-- is Published Column -->\n      <ng-container matColumnDef=\"is_published\">\n        <th mat-header-cell *matHeaderCellDef>Published</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.is_published ? 'Yes' : 'No' }}\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\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <a\n              [routerLink]=\"['../checksheet-view/', element?.id]\"\n              class=\"text-decoration-none text-dark\"\n            >\n              <mat-icon>search</mat-icon>\n            </a>\n\n            <a\n              *ngIf=\"!element.is_published\"\n              [routerLink]=\"['../checksheet-form/', element?.id]\"\n              class=\"text-decoration-none text-dark\"\n            >\n              <mat-icon>edit</mat-icon>\n            </a>\n\n            <mat-icon\n              class=\"cursor-pointer text-dark\"\n              *ngIf=\"!element.submissions_count\"\n              (click)=\"$event.stopPropagation(); deactivateChecksheet(element)\"\n            >\n              delete\n            </mat-icon>\n\n            <a\n              *ngIf=\"!element.is_published\"\n              [routerLink]=\"['../checksheet-view/', element?.id]\"\n              (click)=\"$event.stopPropagation(); copyChecksheet(element)\"\n              class=\"text-decoration-none text-dark\"\n              matTooltip=\"Copy\"\n            >\n              <mat-icon>content_copy</mat-icon>\n            </a>\n\n            <mat-icon\n              class=\"cursor-pointer text-dark\"\n              *ngIf=\"element.is_published\"\n              (click)=\"$event.stopPropagation(); unpublishChecksheet(element)\"\n              matTooltip=\"Unpublish\"\n            >\n              unpublished\n            </mat-icon>\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  </mat-card-content>\n</mat-card>\n", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i9$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetFormatListComponent, selector: "app-checksheet-format-list", usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">Checksheet Formats</h3>\n      <a [routerLink]=\"['../checksheet-format-form']\" class=\"text-decoration-none text-dark mt-2\">\n        <mat-icon>add</mat-icon>\n      </a>\n    </div>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table [dataSource]=\"models\" class=\"w-100\"\n      infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\"\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 = index\">\n          {{ i + 1 }}\n        </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\">{{ element.title }} <br /></td>\n      </ng-container>\n\n      <!-- Questions Column -->\n      <ng-container matColumnDef=\"questions\">\n        <th mat-header-cell *matHeaderCellDef>Questions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.questions_count }}\n        </td>\n      </ng-container>\n\n      <!-- Submissions Column -->\n      <ng-container matColumnDef=\"submissions\">\n        <th mat-header-cell *matHeaderCellDef>Submissions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.submissions_count }}\n        </td>\n      </ng-container>\n\n      <!-- is Published Column -->\n      <ng-container matColumnDef=\"is_published\">\n        <th mat-header-cell *matHeaderCellDef>Published</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.is_published ? 'Yes' : 'No' }}\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; let i = index;\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <a [routerLink]=\"['../checksheet-format-view/', element?.id]\" class=\"text-decoration-none text-dark\">\n              <mat-icon>search</mat-icon>\n            </a>\n\n            <a *ngIf=\"!element.is_published\" [routerLink]=\"['../checksheet-format-form/', element?.id]\"\n               class=\"text-decoration-none text-dark\">\n              <mat-icon>edit</mat-icon>\n            </a>\n\n            <app-checksheet-format-delete-button [checksheetFormat]=\"element\" (deleted)=\"modelDeleted(i)\">\n            </app-checksheet-format-delete-button>\n\n            <app-checksheet-format-copy-button [checksheetFormat]=\"element\" (changed)=\"reload()\">\n            </app-checksheet-format-copy-button>\n\n            <app-checksheet-format-unpublish-button [checksheetFormat]=\"element\" (changed)=\"reload()\">\n            </app-checksheet-format-unpublish-button>\n\n            <app-checksheet-format-publish-button [checksheetFormat]=\"element\" (changed)=\"reload()\" viewMode=\"icon\">\n            </app-checksheet-format-publish-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  </mat-card-content>\n</mat-card>\n", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i7$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i7$2.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: ChecksheetFormatCopyButtonComponent, selector: "app-checksheet-format-copy-button", inputs: ["checksheetFormat"], outputs: ["changed"] }, { kind: "component", type: ChecksheetFormatDeleteButtonComponent, selector: "app-checksheet-format-delete-button", inputs: ["checksheetFormat"], outputs: ["deleted"] }, { kind: "component", type: ChecksheetFormatUnpublishButtonComponent, selector: "app-checksheet-format-unpublish-button", inputs: ["checksheetFormat"], outputs: ["changed"] }, { kind: "component", type: ChecksheetFormatPublishButtonComponent, selector: "app-checksheet-format-publish-button", inputs: ["checksheetFormat", "viewMode"], outputs: ["changed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-checksheet-format-list', template: "<mat-card>\n  <mat-card-content>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">Checksheet Formats</h3>\n      <a [routerLink]=\"['../checksheet-form']\" class=\"text-decoration-none text-dark mt-2\">\n        <mat-icon>add</mat-icon>\n      </a>\n    </div>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table [dataSource]=\"models\" class=\"w-100\"\n      infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\"\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 = index\">\n          {{ i + 1 }}\n        </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\">{{ element.title }} <br /></td>\n      </ng-container>\n\n      <!-- Questions Column -->\n      <ng-container matColumnDef=\"questions\">\n        <th mat-header-cell *matHeaderCellDef>Questions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.questions_count }}\n        </td>\n      </ng-container>\n\n      <!-- Submissions Column -->\n      <ng-container matColumnDef=\"submissions\">\n        <th mat-header-cell *matHeaderCellDef>Submissions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.submissions_count }}\n        </td>\n      </ng-container>\n\n      <!-- is Published Column -->\n      <ng-container matColumnDef=\"is_published\">\n        <th mat-header-cell *matHeaderCellDef>Published</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.is_published ? 'Yes' : 'No' }}\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\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <a\n              [routerLink]=\"['../checksheet-view/', element?.id]\"\n              class=\"text-decoration-none text-dark\"\n            >\n              <mat-icon>search</mat-icon>\n            </a>\n\n            <a\n              *ngIf=\"!element.is_published\"\n              [routerLink]=\"['../checksheet-form/', element?.id]\"\n              class=\"text-decoration-none text-dark\"\n            >\n              <mat-icon>edit</mat-icon>\n            </a>\n\n            <mat-icon\n              class=\"cursor-pointer text-dark\"\n              *ngIf=\"!element.submissions_count\"\n              (click)=\"$event.stopPropagation(); deactivateChecksheet(element)\"\n            >\n              delete\n            </mat-icon>\n\n            <a\n              *ngIf=\"!element.is_published\"\n              [routerLink]=\"['../checksheet-view/', element?.id]\"\n              (click)=\"$event.stopPropagation(); copyChecksheet(element)\"\n              class=\"text-decoration-none text-dark\"\n              matTooltip=\"Copy\"\n            >\n              <mat-icon>content_copy</mat-icon>\n            </a>\n\n            <mat-icon\n              class=\"cursor-pointer text-dark\"\n              *ngIf=\"element.is_published\"\n              (click)=\"$event.stopPropagation(); unpublishChecksheet(element)\"\n              matTooltip=\"Unpublish\"\n            >\n              unpublished\n            </mat-icon>\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  </mat-card-content>\n</mat-card>\n", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"] }]
+            args: [{ selector: 'app-checksheet-format-list', template: "<mat-card>\n  <mat-card-content>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">Checksheet Formats</h3>\n      <a [routerLink]=\"['../checksheet-format-form']\" class=\"text-decoration-none text-dark mt-2\">\n        <mat-icon>add</mat-icon>\n      </a>\n    </div>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table [dataSource]=\"models\" class=\"w-100\"\n      infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\"\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 = index\">\n          {{ i + 1 }}\n        </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\">{{ element.title }} <br /></td>\n      </ng-container>\n\n      <!-- Questions Column -->\n      <ng-container matColumnDef=\"questions\">\n        <th mat-header-cell *matHeaderCellDef>Questions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.questions_count }}\n        </td>\n      </ng-container>\n\n      <!-- Submissions Column -->\n      <ng-container matColumnDef=\"submissions\">\n        <th mat-header-cell *matHeaderCellDef>Submissions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.submissions_count }}\n        </td>\n      </ng-container>\n\n      <!-- is Published Column -->\n      <ng-container matColumnDef=\"is_published\">\n        <th mat-header-cell *matHeaderCellDef>Published</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.is_published ? 'Yes' : 'No' }}\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; let i = index;\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <a [routerLink]=\"['../checksheet-format-view/', element?.id]\" class=\"text-decoration-none text-dark\">\n              <mat-icon>search</mat-icon>\n            </a>\n\n            <a *ngIf=\"!element.is_published\" [routerLink]=\"['../checksheet-format-form/', element?.id]\"\n               class=\"text-decoration-none text-dark\">\n              <mat-icon>edit</mat-icon>\n            </a>\n\n            <app-checksheet-format-delete-button [checksheetFormat]=\"element\" (deleted)=\"modelDeleted(i)\">\n            </app-checksheet-format-delete-button>\n\n            <app-checksheet-format-copy-button [checksheetFormat]=\"element\" (changed)=\"reload()\">\n            </app-checksheet-format-copy-button>\n\n            <app-checksheet-format-unpublish-button [checksheetFormat]=\"element\" (changed)=\"reload()\">\n            </app-checksheet-format-unpublish-button>\n\n            <app-checksheet-format-publish-button [checksheetFormat]=\"element\" (changed)=\"reload()\" viewMode=\"icon\">\n            </app-checksheet-format-publish-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  </mat-card-content>\n</mat-card>\n", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: ChecksheetFormatService }, { type: i1.AlertService }] });
 
 class ChecksheetService extends TechlifyServiceBaseClass {
@@ -1038,9 +1135,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.HttpService }, { type: i1.DataManager }] });
 
-class ChecksheetSubmissionFormComponent extends TechlifyFormComponentInterface {
+class ChecksheetFormComponent extends TechlifyFormComponentInterface {
     fb;
-    checksheetSubmissionService;
+    service;
     alertService;
     dialog;
     submittableType;
@@ -1050,10 +1147,10 @@ class ChecksheetSubmissionFormComponent extends TechlifyFormComponentInterface {
     updateMode;
     checksheetSubmission;
     isSaving = false;
-    constructor(formValidatorService, fb, checksheetSubmissionService, alertService, dialog) {
+    constructor(formValidatorService, fb, service, alertService, dialog) {
         super(formValidatorService);
         this.fb = fb;
-        this.checksheetSubmissionService = checksheetSubmissionService;
+        this.service = service;
         this.alertService = alertService;
         this.dialog = dialog;
         this.errorMessages = {
@@ -1077,6 +1174,7 @@ class ChecksheetSubmissionFormComponent extends TechlifyFormComponentInterface {
         });
     }
     ngOnInit() {
+        console.log(this.submittableType, this.submittableId);
         // Set the submittable type and id and make it readonly
         if (this.submittableType && this.submittableId) {
             this.form.patchValue({
@@ -1099,8 +1197,8 @@ class ChecksheetSubmissionFormComponent extends TechlifyFormComponentInterface {
         }
         const data = { ...this.form.value };
         const request = this.updateMode
-            ? this.checksheetSubmissionService.update(data)
-            : this.checksheetSubmissionService.store(data);
+            ? this.service.update(data)
+            : this.service.store(data);
         this.isSaving = true;
         request.subscribe({
             next: (response) => {
@@ -1117,14 +1215,15 @@ class ChecksheetSubmissionFormComponent extends TechlifyFormComponentInterface {
             width: '400px',
             data: {
                 title: 'Submit Checksheet',
-                message: `Review the checksheet completely before submitting, you cannot alter once it is submitted. Are you sure to submit the Checksheet?`
+                message: `Review the checksheet completely before submitting, you cannot alter once it is submitted.
+        Are you sure to submit the Checksheet?`
             },
             autoFocus: false
         });
         dialogRef.afterClosed().subscribe(async (result) => {
             if (result) {
                 // Action confirmed
-                this.checksheetSubmissionService
+                this.service
                     .submit(this.checksheetSubmission?.id)
                     .subscribe({
                     next: (response) => {
@@ -1135,12 +1234,12 @@ class ChecksheetSubmissionFormComponent extends TechlifyFormComponentInterface {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2.UntypedFormBuilder }, { token: ChecksheetService }, { token: i1.AlertService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetSubmissionFormComponent, selector: "app-checksheet-submission-form", inputs: { submittableType: "submittableType", submittableId: "submittableId", checksheetSubmission: "checksheetSubmission" }, outputs: { cancelled: "cancelled", saved: "saved" }, usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"submit()\">\n  <div fxLayout=\"column\" class=\"mat-typography\">\n    <h3>Checksheet</h3>\n\n    <mat-form-field>\n      <mat-label>Date</mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker\"\n        placeholder=\"Date (MM/DD/YYYY)\"\n        formControlName=\"date\"\n        autocomplete=\"off\"\n        required\n        (focus)=\"picker.open()\"\n      />\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n      <mat-error *ngIf=\"isFieldValid('date')\"\n        >{{ getErrorMessage('date') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Checksheet Format</mat-label>\n      <app-searchable-selector\n        formControlName=\"format_id\"\n        apiUrl=\"api/checksheet-formats?is_published=1\"\n        [enableSearch]=\"true\"\n      >\n      </app-searchable-selector>\n      <mat-error *ngIf=\"isFieldValid('format_id')\"\n        >{{ getErrorMessage('format_id') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Checksheet For</mat-label>\n      <mat-select formControlName=\"submittable_type\">\n        <mat-option value=\"fixed-asset\">Fixed Asset</mat-option>\n      </mat-select>\n    </mat-form-field>\n\n    <mat-form-field\n      *ngIf=\"form.get('submittable_type')?.value === 'fixed-asset'\"\n    >\n      <mat-label>Fixed Asset</mat-label>\n      <app-searchable-selector\n        apiUrl=\"api/accounting-plus/fixed-assets\"\n        titleField=\"name\"\n        formControlName=\"submittable_id\"\n      ></app-searchable-selector>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Details</mat-label>\n      <textarea\n        matInput\n        placeholder=\"Details\"\n        formControlName=\"details\"\n      ></textarea>\n    </mat-form-field>\n    <div class=\"d-flex justify-content-end align-items-center gap-2\">\n      <button\n        [disabled]=\"isSaving\"\n        mat-flat-button\n        type=\"button\"\n        (click)=\"cancelled.emit()\"\n      >\n        Cancel\n      </button>\n      <button\n        [disabled]=\"isSaving\"\n        mat-raised-button\n        type=\"submit\"\n        color=\"primary\"\n      >\n        Save\n      </button>\n      <button\n        *ngIf=\"checksheetSubmission?.id\"\n        [disabled]=\"isSaving\"\n        mat-raised-button\n        (click)=\"submitChecksheet()\"\n        type=\"button\"\n        color=\"accent\"\n      >\n        Submit\n      </button>\n    </div>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i10.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i12.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: i12$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2.UntypedFormBuilder }, { token: ChecksheetService }, { token: i1.AlertService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetFormComponent, selector: "app-checksheet-form", inputs: { submittableType: "submittableType", submittableId: "submittableId", checksheetSubmission: "checksheetSubmission" }, outputs: { cancelled: "cancelled", saved: "saved" }, usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"submit()\">\n  <div fxLayout=\"column\" class=\"mat-typography\">\n    <h3>Checksheet</h3>\n\n    <mat-form-field>\n      <mat-label>Date</mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker\"\n        placeholder=\"Date (MM/DD/YYYY)\"\n        formControlName=\"date\"\n        autocomplete=\"off\"\n        required\n        (focus)=\"picker.open()\"\n      />\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n      <mat-error *ngIf=\"isFieldValid('date')\"\n        >{{ getErrorMessage('date') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Checksheet Format</mat-label>\n      <app-searchable-selector\n        formControlName=\"format_id\"\n        apiUrl=\"api/checksheet-formats?is_published=1\"\n        [enableSearch]=\"true\"\n      >\n      </app-searchable-selector>\n      <mat-error *ngIf=\"isFieldValid('format_id')\"\n        >{{ getErrorMessage('format_id') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field *ngIf=\"!submittableType\">\n      <mat-label>Checksheet For</mat-label>\n      <mat-select formControlName=\"submittable_type\">\n        <mat-option value=\"fixed-asset\">Fixed Asset</mat-option>\n      </mat-select>\n    </mat-form-field>\n\n    <ng-container *ngIf=\"!submittableId\">\n      <mat-form-field *ngIf=\"form.get('submittable_type')?.value === 'fixed-asset'\">\n        <mat-label>Fixed Asset</mat-label>\n        <app-searchable-selector\n          apiUrl=\"api/accounting-plus/fixed-assets\"\n          titleField=\"name\"\n          formControlName=\"submittable_id\"\n        ></app-searchable-selector>\n      </mat-form-field>\n    </ng-container>\n\n    <mat-form-field>\n      <mat-label>Details</mat-label>\n      <textarea\n        matInput\n        placeholder=\"Details\"\n        formControlName=\"details\"\n      ></textarea>\n    </mat-form-field>\n    <div class=\"d-flex justify-content-end align-items-center gap-2\">\n      <button\n        [disabled]=\"isSaving\"\n        mat-flat-button\n        type=\"button\"\n        (click)=\"cancelled.emit()\"\n      >\n        Cancel\n      </button>\n      <button\n        [disabled]=\"isSaving\"\n        mat-raised-button\n        type=\"submit\"\n        color=\"primary\"\n      >\n        Save\n      </button>\n      <button\n        *ngIf=\"checksheetSubmission?.id\"\n        [disabled]=\"isSaving\"\n        mat-raised-button\n        (click)=\"submitChecksheet()\"\n        type=\"button\"\n        color=\"accent\"\n      >\n        Submit\n      </button>\n    </div>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: i7$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i10.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i11.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: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-checksheet-submission-form', template: "<form [formGroup]=\"form\" (submit)=\"submit()\">\n  <div fxLayout=\"column\" class=\"mat-typography\">\n    <h3>Checksheet</h3>\n\n    <mat-form-field>\n      <mat-label>Date</mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker\"\n        placeholder=\"Date (MM/DD/YYYY)\"\n        formControlName=\"date\"\n        autocomplete=\"off\"\n        required\n        (focus)=\"picker.open()\"\n      />\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n      <mat-error *ngIf=\"isFieldValid('date')\"\n        >{{ getErrorMessage('date') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Checksheet Format</mat-label>\n      <app-searchable-selector\n        formControlName=\"format_id\"\n        apiUrl=\"api/checksheet-formats?is_published=1\"\n        [enableSearch]=\"true\"\n      >\n      </app-searchable-selector>\n      <mat-error *ngIf=\"isFieldValid('format_id')\"\n        >{{ getErrorMessage('format_id') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Checksheet For</mat-label>\n      <mat-select formControlName=\"submittable_type\">\n        <mat-option value=\"fixed-asset\">Fixed Asset</mat-option>\n      </mat-select>\n    </mat-form-field>\n\n    <mat-form-field\n      *ngIf=\"form.get('submittable_type')?.value === 'fixed-asset'\"\n    >\n      <mat-label>Fixed Asset</mat-label>\n      <app-searchable-selector\n        apiUrl=\"api/accounting-plus/fixed-assets\"\n        titleField=\"name\"\n        formControlName=\"submittable_id\"\n      ></app-searchable-selector>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Details</mat-label>\n      <textarea\n        matInput\n        placeholder=\"Details\"\n        formControlName=\"details\"\n      ></textarea>\n    </mat-form-field>\n    <div class=\"d-flex justify-content-end align-items-center gap-2\">\n      <button\n        [disabled]=\"isSaving\"\n        mat-flat-button\n        type=\"button\"\n        (click)=\"cancelled.emit()\"\n      >\n        Cancel\n      </button>\n      <button\n        [disabled]=\"isSaving\"\n        mat-raised-button\n        type=\"submit\"\n        color=\"primary\"\n      >\n        Save\n      </button>\n      <button\n        *ngIf=\"checksheetSubmission?.id\"\n        [disabled]=\"isSaving\"\n        mat-raised-button\n        (click)=\"submitChecksheet()\"\n        type=\"button\"\n        color=\"accent\"\n      >\n        Submit\n      </button>\n    </div>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'app-checksheet-form', template: "<form [formGroup]=\"form\" (submit)=\"submit()\">\n  <div fxLayout=\"column\" class=\"mat-typography\">\n    <h3>Checksheet</h3>\n\n    <mat-form-field>\n      <mat-label>Date</mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker\"\n        placeholder=\"Date (MM/DD/YYYY)\"\n        formControlName=\"date\"\n        autocomplete=\"off\"\n        required\n        (focus)=\"picker.open()\"\n      />\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n      <mat-error *ngIf=\"isFieldValid('date')\"\n        >{{ getErrorMessage('date') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Checksheet Format</mat-label>\n      <app-searchable-selector\n        formControlName=\"format_id\"\n        apiUrl=\"api/checksheet-formats?is_published=1\"\n        [enableSearch]=\"true\"\n      >\n      </app-searchable-selector>\n      <mat-error *ngIf=\"isFieldValid('format_id')\"\n        >{{ getErrorMessage('format_id') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field *ngIf=\"!submittableType\">\n      <mat-label>Checksheet For</mat-label>\n      <mat-select formControlName=\"submittable_type\">\n        <mat-option value=\"fixed-asset\">Fixed Asset</mat-option>\n      </mat-select>\n    </mat-form-field>\n\n    <ng-container *ngIf=\"!submittableId\">\n      <mat-form-field *ngIf=\"form.get('submittable_type')?.value === 'fixed-asset'\">\n        <mat-label>Fixed Asset</mat-label>\n        <app-searchable-selector\n          apiUrl=\"api/accounting-plus/fixed-assets\"\n          titleField=\"name\"\n          formControlName=\"submittable_id\"\n        ></app-searchable-selector>\n      </mat-form-field>\n    </ng-container>\n\n    <mat-form-field>\n      <mat-label>Details</mat-label>\n      <textarea\n        matInput\n        placeholder=\"Details\"\n        formControlName=\"details\"\n      ></textarea>\n    </mat-form-field>\n    <div class=\"d-flex justify-content-end align-items-center gap-2\">\n      <button\n        [disabled]=\"isSaving\"\n        mat-flat-button\n        type=\"button\"\n        (click)=\"cancelled.emit()\"\n      >\n        Cancel\n      </button>\n      <button\n        [disabled]=\"isSaving\"\n        mat-raised-button\n        type=\"submit\"\n        color=\"primary\"\n      >\n        Save\n      </button>\n      <button\n        *ngIf=\"checksheetSubmission?.id\"\n        [disabled]=\"isSaving\"\n        mat-raised-button\n        (click)=\"submitChecksheet()\"\n        type=\"button\"\n        color=\"accent\"\n      >\n        Submit\n      </button>\n    </div>\n  </div>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2.UntypedFormBuilder }, { type: ChecksheetService }, { type: i1.AlertService }, { type: i1$1.MatDialog }], propDecorators: { submittableType: [{
                 type: Input
             }], submittableId: [{
@@ -1252,7 +1351,7 @@ let ChecksheetReportComponent = class ChecksheetReportComponent {
         return this.currentUserService.getUser().id;
     }
     createChecksheetSubmission() {
-        const dialogRef = this.dialog.open(ChecksheetSubmissionFormComponent, {
+        const dialogRef = this.dialog.open(ChecksheetFormComponent, {
             width: '400px',
             data: {
                 submission: {},
@@ -1358,8 +1457,8 @@ let ChecksheetReportComponent = class ChecksheetReportComponent {
     getErrorMessage(field) {
         return this.formValidator.getErrorMessage(field, this.filterFormGroup, errorMessages$2);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetReportComponent, deps: [{ token: i3$1.NgxSpinnerService }, { token: i1.AlertService }, { token: i6$2.Router }, { token: i1.DataManager }, { token: i1.CurrentUserService }, { token: i1$1.MatDialog }, { token: i1.FormValidatorService }, { token: i2.UntypedFormBuilder }, { token: i4.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetReportComponent, selector: "app-checksheet-report", inputs: { vehicle: "vehicle" }, ngImport: i0, template: "<div\n  fxLayout=\"column\"\n  fxLayoutAlign=\"start\"\n  fxLayoutGap=\"1.5rem\"\n  class=\"mat-typography m-4\"\n>\n  <div fxLayout fxLayoutAlign=\"center center\">\n    <h3 class=\"m-0 font-weight-bold mr-3\">\n      Checksheet Report\n\n      <app-export-excel-button\n        class=\"ml-2\"\n        elementId=\"pdfable-section\"\n        name=\"checksheet-report-download\"\n        [data]=\"excelData\"\n      >\n      </app-export-excel-button>\n    </h3>\n  </div>\n\n  <form\n    fxLayout=\"row wrap d-print-none\"\n    fxLayoutGap=\"1rem\"\n    [formGroup]=\"filterFormGroup\"\n  >\n    <mat-form-field>\n      <input\n        matInput\n        [matDatepicker]=\"picker\"\n        placeholder=\"Start Date (MM/DD/YYYY)\"\n        formControlName=\"date_from\"\n        autocomplete=\"off\"\n      />\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n      <mat-error *ngIf=\"isFieldValid('date_from')\"\n        >{{ getErrorMessage('date_from') }}\n      </mat-error>\n      <button\n        mat-button\n        *ngIf=\"getFieldValue('date_from')\"\n        matSuffix\n        mat-icon-button\n        (click)=\"resetFieldValue('date_from', $event)\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n\n    <mat-form-field>\n      <input\n        matInput\n        [matDatepicker]=\"p2\"\n        placeholder=\"End Date (MM/DD/YYYY)\"\n        formControlName=\"date_to\"\n        autocomplete=\"off\"\n      />\n      <mat-datepicker-toggle matSuffix [for]=\"p2\"></mat-datepicker-toggle>\n      <mat-datepicker #p2></mat-datepicker>\n      <mat-error *ngIf=\"isFieldValid('date_to')\"\n        >{{ getErrorMessage('date_to') }}\n      </mat-error>\n      <button\n        mat-button\n        *ngIf=\"getFieldValue('date_to')\"\n        matSuffix\n        mat-icon-button\n        (click)=\"resetFieldValue('date_to', $event)\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Status</mat-label>\n      <app-searchable-selector\n        formControlName=\"status_id\"\n        apiUrl=\"api/checksheet-submission-statuses\"\n        [enableSearch]=\"false\"\n      >\n      </app-searchable-selector>\n      <mat-icon\n        matSuffix\n        *ngIf=\"getFieldValue('status_id')\"\n        (click)=\"resetFieldValue('status_id', $event)\"\n      >\n        close</mat-icon\n      >\n    </mat-form-field>\n\n    <mat-form-field *ngIf=\"!vehicle\">\n      <mat-label>Vehicle</mat-label>\n      <app-searchable-selector\n        formControlName=\"model_id\"\n        apiUrl=\"api/vehicles\"\n        [enableSearch]=\"true\"\n        titleField=\"title_field\"\n        [sort]=\"false\"\n      >\n      </app-searchable-selector>\n      <mat-icon\n        matSuffix\n        *ngIf=\"getFieldValue('model_id')\"\n        (click)=\"resetFieldValue('model_id', $event)\"\n      >\n        close</mat-icon\n      >\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Creator</mat-label>\n      <app-searchable-selector\n        formControlName=\"creator_id\"\n        apiUrl=\"api/users\"\n        [enableSearch]=\"true\"\n        titleField=\"name\"\n      >\n      </app-searchable-selector>\n      <mat-icon\n        matSuffix\n        *ngIf=\"getFieldValue('creator_id')\"\n        (click)=\"resetFieldValue('creator_id', $event)\"\n      >\n        close</mat-icon\n      >\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Reviewer</mat-label>\n      <app-searchable-selector\n        formControlName=\"reviewer_id\"\n        apiUrl=\"api/users\"\n        [enableSearch]=\"true\"\n        titleField=\"name\"\n      >\n      </app-searchable-selector>\n      <mat-icon\n        matSuffix\n        *ngIf=\"getFieldValue('reviewer_id')\"\n        (click)=\"resetFieldValue('reviewer_id', $event)\"\n      >\n        close</mat-icon\n      >\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Checksheet Format</mat-label>\n      <app-searchable-selector\n        formControlName=\"checksheet_format_id\"\n        apiUrl=\"api/checksheet-formats?is_published=true\"\n        [enableSearch]=\"true\"\n      >\n      </app-searchable-selector>\n      <mat-icon\n        matSuffix\n        *ngIf=\"getFieldValue('checksheet_format_id')\"\n        (click)=\"resetFieldValue('checksheet_format_id', $event)\"\n      >\n        close</mat-icon\n      >\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Vehicle Assigned Customer</mat-label>\n      <app-searchable-selector\n        formControlName=\"vehicle_assigned_customer_id\"\n        apiUrl=\"api/customers\"\n        [enableSearch]=\"true\"\n        titleField=\"name\"\n      >\n      </app-searchable-selector>\n      <mat-icon\n        matSuffix\n        *ngIf=\"getFieldValue('vehicle_assigned_customer_id')\"\n        (click)=\"resetFieldValue('vehicle_assigned_customer_id', $event)\"\n      >\n        close</mat-icon\n      >\n    </mat-form-field>\n\n    <!-- <mat-form-field>\n            <mat-label>Driver Assigned Customer</mat-label>\n            <app-searchable-selector formControlName=\"driver_assigned_customer_id\" apiUrl=\"api/customers\"\n                [enableSearch]=\"true\" titleField=\"name\">\n            </app-searchable-selector>\n            <mat-icon matSuffix *ngIf=\"getFieldValue('driver_assigned_customer_id')\"\n                (click)=\"resetFieldValue('driver_assigned_customer_id', $event)\">\n                close</mat-icon>\n        </mat-form-field> -->\n  </form>\n\n  <div\n    id=\"pdfable-section\"\n    class=\"scroll-container\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\"\n    [scrollWindow]=\"false\"\n  >\n    <table\n      mat-table\n      [dataSource]=\"checksheetSubmissionList\"\n      class=\"w-100\"\n      multiTemplateDataRows\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\">\n          {{ i + 1 }}\n        </td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef>Date</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.date | date : 'mediumDate' }}\n        </td>\n      </ng-container>\n\n      <!-- Vehicle Column -->\n      <ng-container matColumnDef=\"vehicle\">\n        <th mat-header-cell *matHeaderCellDef>Vehicle</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.vehicle?.title_field }}\n        </td>\n      </ng-container>\n\n      <!-- Category Column -->\n      <ng-container matColumnDef=\"created_at\">\n        <th mat-header-cell *matHeaderCellDef>Submitted On</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.created_at | date : 'mediumDate' }}\n          {{ element.created_at | date : 'shortTime' }} <br />\n          <small>by {{ element.creator?.name }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Category Column -->\n      <ng-container matColumnDef=\"reviewer.name\">\n        <th mat-header-cell *matHeaderCellDef>Verified By</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.reviewer?.name }} <br />\n          <small *ngIf=\"element.reviewed_at\">\n            on {{ element.reviewed_at | date : 'mediumDate' }}\n            {{ element.reviewed_at | date : 'shortTime' }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Category Column -->\n      <ng-container matColumnDef=\"mechanical_issues\">\n        <th mat-header-cell *matHeaderCellDef>Mechanical Issues</th>\n        <td mat-cell *matCellDef=\"let element\" class=\"w-50\">\n          <ul>\n            <li\n              *ngFor=\"let issue of element?.mechanical_issues\"\n              [innerHTML]=\"issue.details_without_html\"\n            ></li>\n          </ul>\n        </td>\n      </ng-container>\n\n      <!-- Category Column -->\n      <ng-container matColumnDef=\"notes\">\n        <th mat-header-cell *matHeaderCellDef>Notes</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.comments }}\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  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i9.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i10.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i12.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: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i9$2.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: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.ExportExcelButtonComponent, selector: "app-export-excel-button", inputs: ["name", "data"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetReportComponent, deps: [{ token: i1$2.NgxSpinnerService }, { token: i1.AlertService }, { token: i4$1.Router }, { token: i1.DataManager }, { token: i1.CurrentUserService }, { token: i1$1.MatDialog }, { token: i1.FormValidatorService }, { token: i2.UntypedFormBuilder }, { token: i4.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetReportComponent, selector: "app-checksheet-report", inputs: { vehicle: "vehicle" }, ngImport: i0, template: "<div\n  fxLayout=\"column\"\n  fxLayoutAlign=\"start\"\n  fxLayoutGap=\"1.5rem\"\n  class=\"mat-typography m-4\"\n>\n  <div fxLayout fxLayoutAlign=\"center center\">\n    <h3 class=\"m-0 font-weight-bold mr-3\">\n      Checksheet Report\n\n      <app-export-excel-button\n        class=\"ml-2\"\n        elementId=\"pdfable-section\"\n        name=\"checksheet-report-download\"\n        [data]=\"excelData\"\n      >\n      </app-export-excel-button>\n    </h3>\n  </div>\n\n  <form\n    fxLayout=\"row wrap d-print-none\"\n    fxLayoutGap=\"1rem\"\n    [formGroup]=\"filterFormGroup\"\n  >\n    <mat-form-field>\n      <input\n        matInput\n        [matDatepicker]=\"picker\"\n        placeholder=\"Start Date (MM/DD/YYYY)\"\n        formControlName=\"date_from\"\n        autocomplete=\"off\"\n      />\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n      <mat-error *ngIf=\"isFieldValid('date_from')\"\n        >{{ getErrorMessage('date_from') }}\n      </mat-error>\n      <button\n        mat-button\n        *ngIf=\"getFieldValue('date_from')\"\n        matSuffix\n        mat-icon-button\n        (click)=\"resetFieldValue('date_from', $event)\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n\n    <mat-form-field>\n      <input\n        matInput\n        [matDatepicker]=\"p2\"\n        placeholder=\"End Date (MM/DD/YYYY)\"\n        formControlName=\"date_to\"\n        autocomplete=\"off\"\n      />\n      <mat-datepicker-toggle matSuffix [for]=\"p2\"></mat-datepicker-toggle>\n      <mat-datepicker #p2></mat-datepicker>\n      <mat-error *ngIf=\"isFieldValid('date_to')\"\n        >{{ getErrorMessage('date_to') }}\n      </mat-error>\n      <button\n        mat-button\n        *ngIf=\"getFieldValue('date_to')\"\n        matSuffix\n        mat-icon-button\n        (click)=\"resetFieldValue('date_to', $event)\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Status</mat-label>\n      <app-searchable-selector\n        formControlName=\"status_id\"\n        apiUrl=\"api/checksheet-submission-statuses\"\n        [enableSearch]=\"false\"\n      >\n      </app-searchable-selector>\n      <mat-icon\n        matSuffix\n        *ngIf=\"getFieldValue('status_id')\"\n        (click)=\"resetFieldValue('status_id', $event)\"\n      >\n        close</mat-icon\n      >\n    </mat-form-field>\n\n    <mat-form-field *ngIf=\"!vehicle\">\n      <mat-label>Vehicle</mat-label>\n      <app-searchable-selector\n        formControlName=\"model_id\"\n        apiUrl=\"api/vehicles\"\n        [enableSearch]=\"true\"\n        titleField=\"title_field\"\n        [sort]=\"false\"\n      >\n      </app-searchable-selector>\n      <mat-icon\n        matSuffix\n        *ngIf=\"getFieldValue('model_id')\"\n        (click)=\"resetFieldValue('model_id', $event)\"\n      >\n        close</mat-icon\n      >\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Creator</mat-label>\n      <app-searchable-selector\n        formControlName=\"creator_id\"\n        apiUrl=\"api/users\"\n        [enableSearch]=\"true\"\n        titleField=\"name\"\n      >\n      </app-searchable-selector>\n      <mat-icon\n        matSuffix\n        *ngIf=\"getFieldValue('creator_id')\"\n        (click)=\"resetFieldValue('creator_id', $event)\"\n      >\n        close</mat-icon\n      >\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Reviewer</mat-label>\n      <app-searchable-selector\n        formControlName=\"reviewer_id\"\n        apiUrl=\"api/users\"\n        [enableSearch]=\"true\"\n        titleField=\"name\"\n      >\n      </app-searchable-selector>\n      <mat-icon\n        matSuffix\n        *ngIf=\"getFieldValue('reviewer_id')\"\n        (click)=\"resetFieldValue('reviewer_id', $event)\"\n      >\n        close</mat-icon\n      >\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Checksheet Format</mat-label>\n      <app-searchable-selector\n        formControlName=\"checksheet_format_id\"\n        apiUrl=\"api/checksheet-formats?is_published=true\"\n        [enableSearch]=\"true\"\n      >\n      </app-searchable-selector>\n      <mat-icon\n        matSuffix\n        *ngIf=\"getFieldValue('checksheet_format_id')\"\n        (click)=\"resetFieldValue('checksheet_format_id', $event)\"\n      >\n        close</mat-icon\n      >\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Vehicle Assigned Customer</mat-label>\n      <app-searchable-selector\n        formControlName=\"vehicle_assigned_customer_id\"\n        apiUrl=\"api/customers\"\n        [enableSearch]=\"true\"\n        titleField=\"name\"\n      >\n      </app-searchable-selector>\n      <mat-icon\n        matSuffix\n        *ngIf=\"getFieldValue('vehicle_assigned_customer_id')\"\n        (click)=\"resetFieldValue('vehicle_assigned_customer_id', $event)\"\n      >\n        close</mat-icon\n      >\n    </mat-form-field>\n\n    <!-- <mat-form-field>\n            <mat-label>Driver Assigned Customer</mat-label>\n            <app-searchable-selector formControlName=\"driver_assigned_customer_id\" apiUrl=\"api/customers\"\n                [enableSearch]=\"true\" titleField=\"name\">\n            </app-searchable-selector>\n            <mat-icon matSuffix *ngIf=\"getFieldValue('driver_assigned_customer_id')\"\n                (click)=\"resetFieldValue('driver_assigned_customer_id', $event)\">\n                close</mat-icon>\n        </mat-form-field> -->\n  </form>\n\n  <div\n    id=\"pdfable-section\"\n    class=\"scroll-container\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\"\n    [scrollWindow]=\"false\"\n  >\n    <table\n      mat-table\n      [dataSource]=\"checksheetSubmissionList\"\n      class=\"w-100\"\n      multiTemplateDataRows\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\">\n          {{ i + 1 }}\n        </td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef>Date</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.date | date : 'mediumDate' }}\n        </td>\n      </ng-container>\n\n      <!-- Vehicle Column -->\n      <ng-container matColumnDef=\"vehicle\">\n        <th mat-header-cell *matHeaderCellDef>Vehicle</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.vehicle?.title_field }}\n        </td>\n      </ng-container>\n\n      <!-- Category Column -->\n      <ng-container matColumnDef=\"created_at\">\n        <th mat-header-cell *matHeaderCellDef>Submitted On</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.created_at | date : 'mediumDate' }}\n          {{ element.created_at | date : 'shortTime' }} <br />\n          <small>by {{ element.creator?.name }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Category Column -->\n      <ng-container matColumnDef=\"reviewer.name\">\n        <th mat-header-cell *matHeaderCellDef>Verified By</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.reviewer?.name }} <br />\n          <small *ngIf=\"element.reviewed_at\">\n            on {{ element.reviewed_at | date : 'mediumDate' }}\n            {{ element.reviewed_at | date : 'shortTime' }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Category Column -->\n      <ng-container matColumnDef=\"mechanical_issues\">\n        <th mat-header-cell *matHeaderCellDef>Mechanical Issues</th>\n        <td mat-cell *matCellDef=\"let element\" class=\"w-50\">\n          <ul>\n            <li\n              *ngFor=\"let issue of element?.mechanical_issues\"\n              [innerHTML]=\"issue.details_without_html\"\n            ></li>\n          </ul>\n        </td>\n      </ng-container>\n\n      <!-- Category Column -->\n      <ng-container matColumnDef=\"notes\">\n        <th mat-header-cell *matHeaderCellDef>Notes</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.comments }}\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  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i10.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i11.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: i7$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7$2.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: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.ExportExcelButtonComponent, selector: "app-export-excel-button", inputs: ["name", "data"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
 };
 ChecksheetReportComponent = __decorate([
     UntilDestroy()
@@ -1367,7 +1466,7 @@ ChecksheetReportComponent = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetReportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-checksheet-report', template: "<div\n  fxLayout=\"column\"\n  fxLayoutAlign=\"start\"\n  fxLayoutGap=\"1.5rem\"\n  class=\"mat-typography m-4\"\n>\n  <div fxLayout fxLayoutAlign=\"center center\">\n    <h3 class=\"m-0 font-weight-bold mr-3\">\n      Checksheet Report\n\n      <app-export-excel-button\n        class=\"ml-2\"\n        elementId=\"pdfable-section\"\n        name=\"checksheet-report-download\"\n        [data]=\"excelData\"\n      >\n      </app-export-excel-button>\n    </h3>\n  </div>\n\n  <form\n    fxLayout=\"row wrap d-print-none\"\n    fxLayoutGap=\"1rem\"\n    [formGroup]=\"filterFormGroup\"\n  >\n    <mat-form-field>\n      <input\n        matInput\n        [matDatepicker]=\"picker\"\n        placeholder=\"Start Date (MM/DD/YYYY)\"\n        formControlName=\"date_from\"\n        autocomplete=\"off\"\n      />\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n      <mat-error *ngIf=\"isFieldValid('date_from')\"\n        >{{ getErrorMessage('date_from') }}\n      </mat-error>\n      <button\n        mat-button\n        *ngIf=\"getFieldValue('date_from')\"\n        matSuffix\n        mat-icon-button\n        (click)=\"resetFieldValue('date_from', $event)\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n\n    <mat-form-field>\n      <input\n        matInput\n        [matDatepicker]=\"p2\"\n        placeholder=\"End Date (MM/DD/YYYY)\"\n        formControlName=\"date_to\"\n        autocomplete=\"off\"\n      />\n      <mat-datepicker-toggle matSuffix [for]=\"p2\"></mat-datepicker-toggle>\n      <mat-datepicker #p2></mat-datepicker>\n      <mat-error *ngIf=\"isFieldValid('date_to')\"\n        >{{ getErrorMessage('date_to') }}\n      </mat-error>\n      <button\n        mat-button\n        *ngIf=\"getFieldValue('date_to')\"\n        matSuffix\n        mat-icon-button\n        (click)=\"resetFieldValue('date_to', $event)\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Status</mat-label>\n      <app-searchable-selector\n        formControlName=\"status_id\"\n        apiUrl=\"api/checksheet-submission-statuses\"\n        [enableSearch]=\"false\"\n      >\n      </app-searchable-selector>\n      <mat-icon\n        matSuffix\n        *ngIf=\"getFieldValue('status_id')\"\n        (click)=\"resetFieldValue('status_id', $event)\"\n      >\n        close</mat-icon\n      >\n    </mat-form-field>\n\n    <mat-form-field *ngIf=\"!vehicle\">\n      <mat-label>Vehicle</mat-label>\n      <app-searchable-selector\n        formControlName=\"model_id\"\n        apiUrl=\"api/vehicles\"\n        [enableSearch]=\"true\"\n        titleField=\"title_field\"\n        [sort]=\"false\"\n      >\n      </app-searchable-selector>\n      <mat-icon\n        matSuffix\n        *ngIf=\"getFieldValue('model_id')\"\n        (click)=\"resetFieldValue('model_id', $event)\"\n      >\n        close</mat-icon\n      >\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Creator</mat-label>\n      <app-searchable-selector\n        formControlName=\"creator_id\"\n        apiUrl=\"api/users\"\n        [enableSearch]=\"true\"\n        titleField=\"name\"\n      >\n      </app-searchable-selector>\n      <mat-icon\n        matSuffix\n        *ngIf=\"getFieldValue('creator_id')\"\n        (click)=\"resetFieldValue('creator_id', $event)\"\n      >\n        close</mat-icon\n      >\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Reviewer</mat-label>\n      <app-searchable-selector\n        formControlName=\"reviewer_id\"\n        apiUrl=\"api/users\"\n        [enableSearch]=\"true\"\n        titleField=\"name\"\n      >\n      </app-searchable-selector>\n      <mat-icon\n        matSuffix\n        *ngIf=\"getFieldValue('reviewer_id')\"\n        (click)=\"resetFieldValue('reviewer_id', $event)\"\n      >\n        close</mat-icon\n      >\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Checksheet Format</mat-label>\n      <app-searchable-selector\n        formControlName=\"checksheet_format_id\"\n        apiUrl=\"api/checksheet-formats?is_published=true\"\n        [enableSearch]=\"true\"\n      >\n      </app-searchable-selector>\n      <mat-icon\n        matSuffix\n        *ngIf=\"getFieldValue('checksheet_format_id')\"\n        (click)=\"resetFieldValue('checksheet_format_id', $event)\"\n      >\n        close</mat-icon\n      >\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Vehicle Assigned Customer</mat-label>\n      <app-searchable-selector\n        formControlName=\"vehicle_assigned_customer_id\"\n        apiUrl=\"api/customers\"\n        [enableSearch]=\"true\"\n        titleField=\"name\"\n      >\n      </app-searchable-selector>\n      <mat-icon\n        matSuffix\n        *ngIf=\"getFieldValue('vehicle_assigned_customer_id')\"\n        (click)=\"resetFieldValue('vehicle_assigned_customer_id', $event)\"\n      >\n        close</mat-icon\n      >\n    </mat-form-field>\n\n    <!-- <mat-form-field>\n            <mat-label>Driver Assigned Customer</mat-label>\n            <app-searchable-selector formControlName=\"driver_assigned_customer_id\" apiUrl=\"api/customers\"\n                [enableSearch]=\"true\" titleField=\"name\">\n            </app-searchable-selector>\n            <mat-icon matSuffix *ngIf=\"getFieldValue('driver_assigned_customer_id')\"\n                (click)=\"resetFieldValue('driver_assigned_customer_id', $event)\">\n                close</mat-icon>\n        </mat-form-field> -->\n  </form>\n\n  <div\n    id=\"pdfable-section\"\n    class=\"scroll-container\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\"\n    [scrollWindow]=\"false\"\n  >\n    <table\n      mat-table\n      [dataSource]=\"checksheetSubmissionList\"\n      class=\"w-100\"\n      multiTemplateDataRows\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\">\n          {{ i + 1 }}\n        </td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef>Date</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.date | date : 'mediumDate' }}\n        </td>\n      </ng-container>\n\n      <!-- Vehicle Column -->\n      <ng-container matColumnDef=\"vehicle\">\n        <th mat-header-cell *matHeaderCellDef>Vehicle</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.vehicle?.title_field }}\n        </td>\n      </ng-container>\n\n      <!-- Category Column -->\n      <ng-container matColumnDef=\"created_at\">\n        <th mat-header-cell *matHeaderCellDef>Submitted On</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.created_at | date : 'mediumDate' }}\n          {{ element.created_at | date : 'shortTime' }} <br />\n          <small>by {{ element.creator?.name }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Category Column -->\n      <ng-container matColumnDef=\"reviewer.name\">\n        <th mat-header-cell *matHeaderCellDef>Verified By</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.reviewer?.name }} <br />\n          <small *ngIf=\"element.reviewed_at\">\n            on {{ element.reviewed_at | date : 'mediumDate' }}\n            {{ element.reviewed_at | date : 'shortTime' }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Category Column -->\n      <ng-container matColumnDef=\"mechanical_issues\">\n        <th mat-header-cell *matHeaderCellDef>Mechanical Issues</th>\n        <td mat-cell *matCellDef=\"let element\" class=\"w-50\">\n          <ul>\n            <li\n              *ngFor=\"let issue of element?.mechanical_issues\"\n              [innerHTML]=\"issue.details_without_html\"\n            ></li>\n          </ul>\n        </td>\n      </ng-container>\n\n      <!-- Category Column -->\n      <ng-container matColumnDef=\"notes\">\n        <th mat-header-cell *matHeaderCellDef>Notes</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.comments }}\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  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i3$1.NgxSpinnerService }, { type: i1.AlertService }, { type: i6$2.Router }, { type: i1.DataManager }, { type: i1.CurrentUserService }, { type: i1$1.MatDialog }, { type: i1.FormValidatorService }, { type: i2.UntypedFormBuilder }, { type: i4.DatePipe }], propDecorators: { vehicle: [{
+        }], ctorParameters: () => [{ type: i1$2.NgxSpinnerService }, { type: i1.AlertService }, { type: i4$1.Router }, { type: i1.DataManager }, { type: i1.CurrentUserService }, { type: i1$1.MatDialog }, { type: i1.FormValidatorService }, { type: i2.UntypedFormBuilder }, { type: i4.DatePipe }], propDecorators: { vehicle: [{
                 type: Input
             }] } });
 
@@ -1394,25 +1493,25 @@ class ChecksheetFormButtonComponent {
     /**
      * Handle Checksheet save event.
      *
-     * @param checksheetSubmission
+     * @param checksheet
      */
-    onSaved(checksheetSubmission) {
-        this.saved.emit(checksheetSubmission);
+    onSaved(checksheet) {
+        this.saved.emit(checksheet);
         this.matDialog.closeAll();
         this.alertService.addAlert('The Checksheet is saved successfully!', 'success');
         this.router.navigate([
-            'fixed-assets/checksheets/checksheets',
-            checksheetSubmission?.id,
+            '/checksheets/checksheets',
+            checksheet?.id,
             'view'
         ]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: i1.AlertService }, { token: i6$2.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetFormButtonComponent, selector: "app-checksheet-form-button", inputs: { submittableType: "submittableType", submittableId: "submittableId" }, outputs: { saved: "saved" }, ngImport: i0, template: "<span\n  *ngIf=\"submittableId\"\n  class=\"material-symbols-outlined text-secondary\"\n  matTooltip=\"Add Checksheet\"\n  (click)=\"openForm(formTemplate)\"\n>\n  assignment_turned_in\n</span>\n<mat-icon\n  *ngIf=\"!submittableId\"\n  class=\"cursor-pointer text-secondary\"\n  (click)=\"openForm(formTemplate)\"\n>\n  add\n</mat-icon>\n\n<ng-template #formTemplate>\n  <app-checksheet-submission-form\n    mat-dialog-content\n    (cancelled)=\"matDialog.closeAll()\"\n    (saved)=\"onSaved($event)\"\n    [submittableType]=\"submittableType\"\n    [submittableId]=\"submittableId\"\n  ></app-checksheet-submission-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChecksheetSubmissionFormComponent, selector: "app-checksheet-submission-form", inputs: ["submittableType", "submittableId", "checksheetSubmission"], outputs: ["cancelled", "saved"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: i1.AlertService }, { token: i4$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetFormButtonComponent, selector: "app-checksheet-form-button", inputs: { submittableType: "submittableType", submittableId: "submittableId" }, outputs: { saved: "saved" }, ngImport: i0, template: "<mat-icon\n  class=\"cursor-pointer text-secondary\"\n  (click)=\"openForm(formTemplate)\"\n>\n  add\n</mat-icon>\n\n<ng-template #formTemplate>\n  <app-checksheet-form\n    mat-dialog-content\n    (cancelled)=\"matDialog.closeAll()\"\n    (saved)=\"onSaved($event)\"\n    [submittableType]=\"submittableType\"\n    [submittableId]=\"submittableId\"\n  ></app-checksheet-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ChecksheetFormComponent, selector: "app-checksheet-form", inputs: ["submittableType", "submittableId", "checksheetSubmission"], outputs: ["cancelled", "saved"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-checksheet-form-button', template: "<span\n  *ngIf=\"submittableId\"\n  class=\"material-symbols-outlined text-secondary\"\n  matTooltip=\"Add Checksheet\"\n  (click)=\"openForm(formTemplate)\"\n>\n  assignment_turned_in\n</span>\n<mat-icon\n  *ngIf=\"!submittableId\"\n  class=\"cursor-pointer text-secondary\"\n  (click)=\"openForm(formTemplate)\"\n>\n  add\n</mat-icon>\n\n<ng-template #formTemplate>\n  <app-checksheet-submission-form\n    mat-dialog-content\n    (cancelled)=\"matDialog.closeAll()\"\n    (saved)=\"onSaved($event)\"\n    [submittableType]=\"submittableType\"\n    [submittableId]=\"submittableId\"\n  ></app-checksheet-submission-form>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i1.AlertService }, { type: i6$2.Router }], propDecorators: { submittableType: [{
+            args: [{ selector: 'app-checksheet-form-button', template: "<mat-icon\n  class=\"cursor-pointer text-secondary\"\n  (click)=\"openForm(formTemplate)\"\n>\n  add\n</mat-icon>\n\n<ng-template #formTemplate>\n  <app-checksheet-form\n    mat-dialog-content\n    (cancelled)=\"matDialog.closeAll()\"\n    (saved)=\"onSaved($event)\"\n    [submittableType]=\"submittableType\"\n    [submittableId]=\"submittableId\"\n  ></app-checksheet-form>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i1.AlertService }, { type: i4$1.Router }], propDecorators: { submittableType: [{
                 type: Input
             }], submittableId: [{
                 type: Input
@@ -1455,7 +1554,7 @@ class ChecksheetSubmissionDeleteButtonComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionDeleteButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: ChecksheetService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetSubmissionDeleteButtonComponent, selector: "app-checksheet-submission-delete-button", inputs: { checksheetSubmission: "checksheetSubmission" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<mat-icon class=\"cursor-pointer\" (click)=\"openDialog(deleteTemplate)\">\n  delete\n</mat-icon>\n\n<ng-template #deleteTemplate>\n  <h3 mat-dialog-title>Delete Checksheet</h3>\n  <div mat-dialog-content>\n    <p>Are you sure you want to delete the Checksheet?</p>\n  </div>\n  <div\n    mat-dialog-actions\n    class=\"d-flex justify-content-end gap-2 align-items-center\"\n  >\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-flat-button\n      mat-dialog-close\n    >\n      Cancel\n    </button>\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      (click)=\"deleteModel()\"\n      mat-raised-button\n      color=\"warn\"\n    >\n      Delete\n    </button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetSubmissionDeleteButtonComponent, selector: "app-checksheet-submission-delete-button", inputs: { checksheetSubmission: "checksheetSubmission" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<mat-icon class=\"cursor-pointer\" (click)=\"openDialog(deleteTemplate)\">\n  delete\n</mat-icon>\n\n<ng-template #deleteTemplate>\n  <h3 mat-dialog-title>Delete Checksheet</h3>\n  <div mat-dialog-content>\n    <p>Are you sure you want to delete the Checksheet?</p>\n  </div>\n  <div\n    mat-dialog-actions\n    class=\"d-flex justify-content-end gap-2 align-items-center\"\n  >\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-flat-button\n      mat-dialog-close\n    >\n      Cancel\n    </button>\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      (click)=\"deleteModel()\"\n      mat-raised-button\n      color=\"warn\"\n    >\n      Delete\n    </button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionDeleteButtonComponent, decorators: [{
             type: Component,
@@ -1510,7 +1609,7 @@ class ChecksheetReviewButtonComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetReviewButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: i1.CredentialsService }, { token: ChecksheetService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetReviewButtonComponent, selector: "app-checksheet-review-button", inputs: { submission: "submission", viewType: "viewType", requestParams: "requestParams" }, outputs: { reviewed: "reviewed" }, ngImport: i0, template: "<ng-container\n  *ngIf=\"submission?.status_id === 2 && submission?.creator_id !== user?.id\"\n>\n  <button\n    *ngIf=\"viewType === 'button'\"\n    mat-raised-button\n    color=\"primary\"\n    type=\"button\"\n    (click)=\"openDialog(reviewTemplate)\"\n  >\n    Review\n  </button>\n\n  <mat-icon\n    *ngIf=\"viewType === 'icon'\"\n    class=\"cursor-pointer\"\n    matTooltip=\"Review\"\n    (click)=\"openDialog(reviewTemplate)\"\n  >\n    rate_review\n  </mat-icon>\n</ng-container>\n\n<ng-template #reviewTemplate>\n  <h3 mat-dialog-title>Review Checksheet</h3>\n  <div mat-dialog-content>\n    <p>Are you sure you want to mark the Checksheet as Reviewed?</p>\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end align-items-center\">\n    <button [disabled]=\"isWorking\" mat-flat-button mat-dialog-close>\n      Cancel\n    </button>\n    <button\n      [disabled]=\"isWorking\"\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"reviewChecksheet()\"\n    >\n      Review\n    </button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetReviewButtonComponent, selector: "app-checksheet-review-button", inputs: { submission: "submission", viewType: "viewType", requestParams: "requestParams" }, outputs: { reviewed: "reviewed" }, ngImport: i0, template: "<ng-container\n  *ngIf=\"submission?.status_id === 2 && submission?.creator_id !== user?.id\"\n>\n  <button\n    *ngIf=\"viewType === 'button'\"\n    mat-raised-button\n    color=\"primary\"\n    type=\"button\"\n    (click)=\"openDialog(reviewTemplate)\"\n  >\n    Review\n  </button>\n\n  <mat-icon\n    *ngIf=\"viewType === 'icon'\"\n    class=\"cursor-pointer\"\n    matTooltip=\"Review\"\n    (click)=\"openDialog(reviewTemplate)\"\n  >\n    rate_review\n  </mat-icon>\n</ng-container>\n\n<ng-template #reviewTemplate>\n  <h3 mat-dialog-title>Review Checksheet</h3>\n  <div mat-dialog-content>\n    <p>Are you sure you want to mark the Checksheet as Reviewed?</p>\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end align-items-center\">\n    <button [disabled]=\"isWorking\" mat-flat-button mat-dialog-close>\n      Cancel\n    </button>\n    <button\n      [disabled]=\"isWorking\"\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"reviewChecksheet()\"\n    >\n      Review\n    </button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetReviewButtonComponent, decorators: [{
             type: Component,
@@ -1528,9 +1627,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 let ChecksheetListComponent = class ChecksheetListComponent extends TechlifyListingControllerInterface {
     alertService;
     fb;
-    checksheetSubmissionService;
+    service;
     requestHelperService;
     activatedRoute;
+    submittableId;
+    submittableType;
     displayedColumns = [
         'index',
         'date',
@@ -1542,16 +1643,23 @@ let ChecksheetListComponent = class ChecksheetListComponent extends TechlifyList
         'actions'
     ];
     with = 'format,creator,reviewer,status,submittable';
-    constructor(alertService, fb, checksheetSubmissionService, requestHelperService, activatedRoute) {
+    constructor(alertService, fb, service, requestHelperService, activatedRoute) {
         super();
         this.alertService = alertService;
         this.fb = fb;
-        this.checksheetSubmissionService = checksheetSubmissionService;
+        this.service = service;
         this.requestHelperService = requestHelperService;
         this.activatedRoute = activatedRoute;
         this.createForm();
     }
     ngOnInit() {
+        if (this.submittableId) {
+            this.filterForm.get('submittable_ids')?.setValue(this.submittableId, { emitEvent: false });
+            this.displayedColumns = this.displayedColumns.filter((column) => column !== 'for');
+        }
+        if (this.submittableType) {
+            this.filterForm.get('submittable_type')?.setValue(this.submittableType, { emitEvent: false });
+        }
         this.updateFormWithQueryParams();
         this.subscribeToFormChanges();
         this.subscribeToRouteChanges();
@@ -1567,6 +1675,8 @@ let ChecksheetListComponent = class ChecksheetListComponent extends TechlifyList
             reviewer_ids: [''],
             format_ids: [''],
             sort_by: ['created_at|DESC'],
+            submittable_ids: [''],
+            submittable_type: [''],
             with: [this.with]
         });
     }
@@ -1577,7 +1687,7 @@ let ChecksheetListComponent = class ChecksheetListComponent extends TechlifyList
             perPage: this.perPage,
             page: this.page
         };
-        this.checksheetSubmissionService.index(params).subscribe({
+        this.service.index(params).subscribe({
             next: (response) => {
                 this.models = this.models.concat(response?.data);
                 this.lastPage = response?.last_page;
@@ -1591,7 +1701,7 @@ let ChecksheetListComponent = class ChecksheetListComponent extends TechlifyList
         this.filterForm.patchValue({
             date_from: date_from ? moment(date_from).format('YYYY-MM-DD') : '',
             date_to: date_to ? moment(date_to).format('YYYY-MM-DD') : ''
-        });
+        }, { emitEvent: false });
     }
     /**
      * Handle Checksheet delete event.
@@ -1601,7 +1711,9 @@ let ChecksheetListComponent = class ChecksheetListComponent extends TechlifyList
         this.reload();
     }
     updateFormWithQueryParams() {
-        this.requestHelperService.updateFormWithQueryParams(this.filterForm, {});
+        this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
+            submittable_ids: { multiple: true }
+        });
     }
     subscribeToFormChanges() {
         this.filterForm.valueChanges.pipe(debounceTime$1(800)).subscribe({
@@ -1625,42 +1737,96 @@ let ChecksheetListComponent = class ChecksheetListComponent extends TechlifyList
             direction = 'desc';
         this.filterForm.get('sort_by')?.setValue(active + '|' + direction);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetListComponent, deps: [{ token: i1.AlertService }, { token: i2.UntypedFormBuilder }, { token: ChecksheetService }, { token: i1.RequestHelperService }, { token: i6$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetListComponent, selector: "app-checksheet-list", usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n    <div class=\"d-flex justify-content-center align-items-center gap-2\">\n      <h3 class=\"m-0 font-weight-bold\">Checksheets</h3>\n      <app-checksheet-form-button class=\"mt-1\"></app-checksheet-form-button>\n      <a\n        [routerLink]=\"['checksheet-formats']\"\n        mat-raised-button\n      >\n        Formats\n      </a>\n    </div>\n\n    <form fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" [formGroup]=\"filterForm\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput formControlName=\"search\" placeholder=\"Search Checksheets\">\n      </mat-form-field>\n\n      <app-timeline-filter\n        formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\"\n        [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"\n        appearance=\"fill\"\n      ></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Status</mat-label>\n        <app-searchable-selector\n          formControlName=\"status_ids\"\n          apiUrl=\"api/checksheet-submission-statuses\"\n          [enableSearch]=\"false\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field *ngxPermissionsOnly=\"['user_read']\">\n        <mat-label>Creator</mat-label>\n        <app-searchable-selector\n          formControlName=\"creator_ids\"\n          apiUrl=\"api/users\"\n          [enableSearch]=\"true\"\n          titleField=\"name\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field *ngxPermissionsOnly=\"['user_read']\">\n        <mat-label>Reviewer</mat-label>\n        <app-searchable-selector\n          formControlName=\"reviewer_ids\"\n          apiUrl=\"api/users\"\n          [enableSearch]=\"true\"\n          titleField=\"name\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Format</mat-label>\n        <app-searchable-selector\n          formControlName=\"format_ids\"\n          apiUrl=\"api/checksheet-formats?is_published=1\"\n          [enableSearch]=\"true\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card\n  class=\"p-0 mt-3\"\n  infiniteScroll\n  [infiniteScrollDistance]=\"2\"\n  [infiniteScrollThrottle]=\"50\"\n  (scrolled)=\"onScroll()\"\n  [fromRoot]=\"true\"\n>\n  <table\n    mat-table\n    [dataSource]=\"models\"\n    class=\"w-100\"\n    multiTemplateDataRows\n    aria-describedby=\"Checksheets\"\n    matSort\n    (matSortChange)=\"onSortChange($event)\"\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\">\n        {{ i + 1 }}\n      </td>\n    </ng-container>\n\n    <!-- Format Column -->\n    <ng-container matColumnDef=\"format.title\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>Format</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.format?.title }}\n      </td>\n    </ng-container>\n\n    <!-- Creator Column -->\n    <ng-container matColumnDef=\"creator.name\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>Creator</th>\n      <td mat-cell *matCellDef=\"let element\">\n        <p class=\"mb-0\">{{ element?.creator?.name }}</p>\n        <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n      </td>\n    </ng-container>\n\n    <!-- Reviewer Column -->\n    <ng-container matColumnDef=\"reviewer.name\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>Reviewer</th>\n      <td mat-cell *matCellDef=\"let element\">\n        <p class=\"mb-0\">{{ element?.reviewer?.name }}</p>\n        <small class=\"text-secondary\" *ngIf=\"element?.reviewed_at\">{{ element?.reviewed_at | date }}</small>\n      </td>\n    </ng-container>\n\n    <!-- For Column -->\n    <ng-container matColumnDef=\"for\">\n      <th mat-header-cell *matHeaderCellDef>For</th>\n      <td mat-cell *matCellDef=\"let element\">\n        <a\n          class=\"mb-0 text-decoration-none text-dark\"\n          *ngIf=\"element?.submittable\"\n          [routerLink]=\"['/fixed-assets/', element?.submittable_id, 'read']\"\n        >\n          {{ element?.submittable?.name }}\n        </a> <br>\n        <small class=\"text-secondary\" *ngIf=\"element?.submittable_type\">{{ element?.submittable_type }}</small>\n      </td>\n    </ng-container>\n\n    <!-- Status Column -->\n    <ng-container matColumnDef=\"status.title\">\n      <th mat-header-cell *matHeaderCellDef>Status</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.status?.title }}\n      </td>\n    </ng-container>\n\n    <!-- Date Column -->\n    <ng-container matColumnDef=\"date\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element.date | date }}\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;\">\n        <div class=\"d-flex gap-2\">\n          <mat-icon\n            [routerLink]=\"['../checksheets-view', element?.id]\"\n            class=\"cursor-pointer\"\n          >\n            visibility\n          </mat-icon>\n\n          <mat-icon\n            *ngIf=\"element.status_id === 1\"\n            [routerLink]=\"[element?.id, 'view']\"\n            class=\"cursor-pointer\"\n          >\n            edit\n          </mat-icon>\n          <app-checksheet-review-button\n            [submission]=\"element\"\n            [requestParams]=\"{ with: this.with }\"\n            (reviewed)=\"reload()\"\n          ></app-checksheet-review-button>\n          <app-checksheet-submission-delete-button\n            [checksheetSubmission]=\"element\"\n            (deleted)=\"onDeleted()\"\n          ></app-checksheet-submission-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 *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n</mat-card>\n", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "component", type: i8.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i12.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: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i13.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i15.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i9$2.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: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "component", type: ChecksheetFormButtonComponent, selector: "app-checksheet-form-button", inputs: ["submittableType", "submittableId"], outputs: ["saved"] }, { kind: "component", type: ChecksheetSubmissionDeleteButtonComponent, selector: "app-checksheet-submission-delete-button", inputs: ["checksheetSubmission"], outputs: ["deleted"] }, { kind: "component", type: ChecksheetReviewButtonComponent, selector: "app-checksheet-review-button", inputs: ["submission", "viewType", "requestParams"], outputs: ["reviewed"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetListComponent, deps: [{ token: i1.AlertService }, { token: i2.UntypedFormBuilder }, { token: ChecksheetService }, { token: i1.RequestHelperService }, { token: i4$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetListComponent, selector: "app-checksheet-list", inputs: { submittableId: "submittableId", submittableType: "submittableType" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n    <div class=\"d-flex justify-content-center align-items-center gap-2\">\n      <h3 class=\"m-0 font-weight-bold\">Checksheets</h3>\n      <app-checksheet-form-button class=\"mt-1\" [submittableType]=\"submittableType\" [submittableId]=\"submittableId\">\n      </app-checksheet-form-button>\n      <a [routerLink]=\"['checksheet-formats']\" mat-raised-button>Formats</a>\n    </div>\n\n    <form fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" [formGroup]=\"filterForm\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput formControlName=\"search\" placeholder=\"Search Checksheets\">\n      </mat-form-field>\n\n      <app-timeline-filter\n        formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\"\n        [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"\n        appearance=\"fill\"\n      ></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Status</mat-label>\n        <app-searchable-selector\n          formControlName=\"status_ids\"\n          apiUrl=\"api/checksheet-submission-statuses\"\n          [enableSearch]=\"false\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field *ngxPermissionsOnly=\"['user_read']\">\n        <mat-label>Creator</mat-label>\n        <app-searchable-selector\n          formControlName=\"creator_ids\"\n          apiUrl=\"api/users\"\n          [enableSearch]=\"true\"\n          titleField=\"name\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field *ngxPermissionsOnly=\"['user_read']\">\n        <mat-label>Reviewer</mat-label>\n        <app-searchable-selector\n          formControlName=\"reviewer_ids\"\n          apiUrl=\"api/users\"\n          [enableSearch]=\"true\"\n          titleField=\"name\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Format</mat-label>\n        <app-searchable-selector\n          formControlName=\"format_ids\"\n          apiUrl=\"api/checksheet-formats?is_published=1\"\n          [enableSearch]=\"true\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card\n  class=\"p-0 mt-3\"\n  infiniteScroll\n  [infiniteScrollDistance]=\"2\"\n  [infiniteScrollThrottle]=\"50\"\n  (scrolled)=\"onScroll()\"\n  [fromRoot]=\"true\"\n>\n  <table\n    mat-table\n    [dataSource]=\"models\"\n    class=\"w-100\"\n    multiTemplateDataRows\n    aria-describedby=\"Checksheets\"\n    matSort\n    (matSortChange)=\"onSortChange($event)\"\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\">\n        {{ i + 1 }}\n      </td>\n    </ng-container>\n\n    <!-- Format Column -->\n    <ng-container matColumnDef=\"format.title\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>Format</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.format?.title }}\n      </td>\n    </ng-container>\n\n    <!-- Creator Column -->\n    <ng-container matColumnDef=\"creator.name\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>Creator</th>\n      <td mat-cell *matCellDef=\"let element\">\n        <p class=\"mb-0\">{{ element?.creator?.name }}</p>\n        <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n      </td>\n    </ng-container>\n\n    <!-- Reviewer Column -->\n    <ng-container matColumnDef=\"reviewer.name\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>Reviewer</th>\n      <td mat-cell *matCellDef=\"let element\">\n        <p class=\"mb-0\">{{ element?.reviewer?.name }}</p>\n        <small class=\"text-secondary\" *ngIf=\"element?.reviewed_at\">{{ element?.reviewed_at | date }}</small>\n      </td>\n    </ng-container>\n\n    <!-- For Column -->\n    <ng-container matColumnDef=\"for\">\n      <th mat-header-cell *matHeaderCellDef>For</th>\n      <td mat-cell *matCellDef=\"let element\">\n        <a\n          class=\"mb-0 text-decoration-none text-dark\"\n          *ngIf=\"element?.submittable\"\n          [routerLink]=\"['/fixed-assets/', element?.submittable_id, 'read']\"\n        >\n          {{ element?.submittable?.name }}\n        </a> <br>\n        <small class=\"text-secondary\" *ngIf=\"element?.submittable_type\">{{ element?.submittable_type }}</small>\n      </td>\n    </ng-container>\n\n    <!-- Status Column -->\n    <ng-container matColumnDef=\"status.title\">\n      <th mat-header-cell *matHeaderCellDef>Status</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.status?.title }}\n      </td>\n    </ng-container>\n\n    <!-- Date Column -->\n    <ng-container matColumnDef=\"date\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element.date | date }}\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;\">\n        <div class=\"d-flex gap-2\">\n          <mat-icon\n            [routerLink]=\"['/checksheets/checksheets-view', element?.id]\"\n            class=\"cursor-pointer\"\n          >\n            visibility\n          </mat-icon>\n\n          <mat-icon\n            *ngIf=\"element.status_id === 1\"\n            [routerLink]=\"['/checksheets/checksheets', element?.id, 'view']\"\n            class=\"cursor-pointer\"\n          >\n            edit\n          </mat-icon>\n          <app-checksheet-review-button\n            [submission]=\"element\"\n            [requestParams]=\"{ with: this.with }\"\n            (reviewed)=\"reload()\"\n          ></app-checksheet-review-button>\n          <app-checksheet-submission-delete-button\n            [checksheetSubmission]=\"element\"\n            (deleted)=\"onDeleted()\"\n          ></app-checksheet-submission-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 *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n</mat-card>\n", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "component", type: i7.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i11.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.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i13.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i15.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7$2.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: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "component", type: ChecksheetFormButtonComponent, selector: "app-checksheet-form-button", inputs: ["submittableType", "submittableId"], outputs: ["saved"] }, { kind: "component", type: ChecksheetSubmissionDeleteButtonComponent, selector: "app-checksheet-submission-delete-button", inputs: ["checksheetSubmission"], outputs: ["deleted"] }, { kind: "component", type: ChecksheetReviewButtonComponent, selector: "app-checksheet-review-button", inputs: ["submission", "viewType", "requestParams"], outputs: ["reviewed"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
 };
 ChecksheetListComponent = __decorate([
     UntilDestroy()
 ], ChecksheetListComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-checksheet-list', template: "<mat-card>\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n    <div class=\"d-flex justify-content-center align-items-center gap-2\">\n      <h3 class=\"m-0 font-weight-bold\">Checksheets</h3>\n      <app-checksheet-form-button class=\"mt-1\"></app-checksheet-form-button>\n      <a\n        [routerLink]=\"['checksheet-formats']\"\n        mat-raised-button\n      >\n        Formats\n      </a>\n    </div>\n\n    <form fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" [formGroup]=\"filterForm\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput formControlName=\"search\" placeholder=\"Search Checksheets\">\n      </mat-form-field>\n\n      <app-timeline-filter\n        formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\"\n        [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"\n        appearance=\"fill\"\n      ></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Status</mat-label>\n        <app-searchable-selector\n          formControlName=\"status_ids\"\n          apiUrl=\"api/checksheet-submission-statuses\"\n          [enableSearch]=\"false\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field *ngxPermissionsOnly=\"['user_read']\">\n        <mat-label>Creator</mat-label>\n        <app-searchable-selector\n          formControlName=\"creator_ids\"\n          apiUrl=\"api/users\"\n          [enableSearch]=\"true\"\n          titleField=\"name\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field *ngxPermissionsOnly=\"['user_read']\">\n        <mat-label>Reviewer</mat-label>\n        <app-searchable-selector\n          formControlName=\"reviewer_ids\"\n          apiUrl=\"api/users\"\n          [enableSearch]=\"true\"\n          titleField=\"name\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Format</mat-label>\n        <app-searchable-selector\n          formControlName=\"format_ids\"\n          apiUrl=\"api/checksheet-formats?is_published=1\"\n          [enableSearch]=\"true\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card\n  class=\"p-0 mt-3\"\n  infiniteScroll\n  [infiniteScrollDistance]=\"2\"\n  [infiniteScrollThrottle]=\"50\"\n  (scrolled)=\"onScroll()\"\n  [fromRoot]=\"true\"\n>\n  <table\n    mat-table\n    [dataSource]=\"models\"\n    class=\"w-100\"\n    multiTemplateDataRows\n    aria-describedby=\"Checksheets\"\n    matSort\n    (matSortChange)=\"onSortChange($event)\"\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\">\n        {{ i + 1 }}\n      </td>\n    </ng-container>\n\n    <!-- Format Column -->\n    <ng-container matColumnDef=\"format.title\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>Format</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.format?.title }}\n      </td>\n    </ng-container>\n\n    <!-- Creator Column -->\n    <ng-container matColumnDef=\"creator.name\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>Creator</th>\n      <td mat-cell *matCellDef=\"let element\">\n        <p class=\"mb-0\">{{ element?.creator?.name }}</p>\n        <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n      </td>\n    </ng-container>\n\n    <!-- Reviewer Column -->\n    <ng-container matColumnDef=\"reviewer.name\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>Reviewer</th>\n      <td mat-cell *matCellDef=\"let element\">\n        <p class=\"mb-0\">{{ element?.reviewer?.name }}</p>\n        <small class=\"text-secondary\" *ngIf=\"element?.reviewed_at\">{{ element?.reviewed_at | date }}</small>\n      </td>\n    </ng-container>\n\n    <!-- For Column -->\n    <ng-container matColumnDef=\"for\">\n      <th mat-header-cell *matHeaderCellDef>For</th>\n      <td mat-cell *matCellDef=\"let element\">\n        <a\n          class=\"mb-0 text-decoration-none text-dark\"\n          *ngIf=\"element?.submittable\"\n          [routerLink]=\"['/fixed-assets/', element?.submittable_id, 'read']\"\n        >\n          {{ element?.submittable?.name }}\n        </a> <br>\n        <small class=\"text-secondary\" *ngIf=\"element?.submittable_type\">{{ element?.submittable_type }}</small>\n      </td>\n    </ng-container>\n\n    <!-- Status Column -->\n    <ng-container matColumnDef=\"status.title\">\n      <th mat-header-cell *matHeaderCellDef>Status</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.status?.title }}\n      </td>\n    </ng-container>\n\n    <!-- Date Column -->\n    <ng-container matColumnDef=\"date\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element.date | date }}\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;\">\n        <div class=\"d-flex gap-2\">\n          <mat-icon\n            [routerLink]=\"['../checksheets-view', element?.id]\"\n            class=\"cursor-pointer\"\n          >\n            visibility\n          </mat-icon>\n\n          <mat-icon\n            *ngIf=\"element.status_id === 1\"\n            [routerLink]=\"[element?.id, 'view']\"\n            class=\"cursor-pointer\"\n          >\n            edit\n          </mat-icon>\n          <app-checksheet-review-button\n            [submission]=\"element\"\n            [requestParams]=\"{ with: this.with }\"\n            (reviewed)=\"reload()\"\n          ></app-checksheet-review-button>\n          <app-checksheet-submission-delete-button\n            [checksheetSubmission]=\"element\"\n            (deleted)=\"onDeleted()\"\n          ></app-checksheet-submission-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 *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n</mat-card>\n", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"] }]
-        }], ctorParameters: () => [{ type: i1.AlertService }, { type: i2.UntypedFormBuilder }, { type: ChecksheetService }, { type: i1.RequestHelperService }, { type: i6$2.ActivatedRoute }] });
+            args: [{ selector: 'app-checksheet-list', template: "<mat-card>\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n    <div class=\"d-flex justify-content-center align-items-center gap-2\">\n      <h3 class=\"m-0 font-weight-bold\">Checksheets</h3>\n      <app-checksheet-form-button class=\"mt-1\" [submittableType]=\"submittableType\" [submittableId]=\"submittableId\">\n      </app-checksheet-form-button>\n      <a [routerLink]=\"['checksheet-formats']\" mat-raised-button>Formats</a>\n    </div>\n\n    <form fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" [formGroup]=\"filterForm\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput formControlName=\"search\" placeholder=\"Search Checksheets\">\n      </mat-form-field>\n\n      <app-timeline-filter\n        formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\"\n        [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"\n        appearance=\"fill\"\n      ></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Status</mat-label>\n        <app-searchable-selector\n          formControlName=\"status_ids\"\n          apiUrl=\"api/checksheet-submission-statuses\"\n          [enableSearch]=\"false\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field *ngxPermissionsOnly=\"['user_read']\">\n        <mat-label>Creator</mat-label>\n        <app-searchable-selector\n          formControlName=\"creator_ids\"\n          apiUrl=\"api/users\"\n          [enableSearch]=\"true\"\n          titleField=\"name\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field *ngxPermissionsOnly=\"['user_read']\">\n        <mat-label>Reviewer</mat-label>\n        <app-searchable-selector\n          formControlName=\"reviewer_ids\"\n          apiUrl=\"api/users\"\n          [enableSearch]=\"true\"\n          titleField=\"name\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Format</mat-label>\n        <app-searchable-selector\n          formControlName=\"format_ids\"\n          apiUrl=\"api/checksheet-formats?is_published=1\"\n          [enableSearch]=\"true\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card\n  class=\"p-0 mt-3\"\n  infiniteScroll\n  [infiniteScrollDistance]=\"2\"\n  [infiniteScrollThrottle]=\"50\"\n  (scrolled)=\"onScroll()\"\n  [fromRoot]=\"true\"\n>\n  <table\n    mat-table\n    [dataSource]=\"models\"\n    class=\"w-100\"\n    multiTemplateDataRows\n    aria-describedby=\"Checksheets\"\n    matSort\n    (matSortChange)=\"onSortChange($event)\"\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\">\n        {{ i + 1 }}\n      </td>\n    </ng-container>\n\n    <!-- Format Column -->\n    <ng-container matColumnDef=\"format.title\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>Format</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.format?.title }}\n      </td>\n    </ng-container>\n\n    <!-- Creator Column -->\n    <ng-container matColumnDef=\"creator.name\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>Creator</th>\n      <td mat-cell *matCellDef=\"let element\">\n        <p class=\"mb-0\">{{ element?.creator?.name }}</p>\n        <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n      </td>\n    </ng-container>\n\n    <!-- Reviewer Column -->\n    <ng-container matColumnDef=\"reviewer.name\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>Reviewer</th>\n      <td mat-cell *matCellDef=\"let element\">\n        <p class=\"mb-0\">{{ element?.reviewer?.name }}</p>\n        <small class=\"text-secondary\" *ngIf=\"element?.reviewed_at\">{{ element?.reviewed_at | date }}</small>\n      </td>\n    </ng-container>\n\n    <!-- For Column -->\n    <ng-container matColumnDef=\"for\">\n      <th mat-header-cell *matHeaderCellDef>For</th>\n      <td mat-cell *matCellDef=\"let element\">\n        <a\n          class=\"mb-0 text-decoration-none text-dark\"\n          *ngIf=\"element?.submittable\"\n          [routerLink]=\"['/fixed-assets/', element?.submittable_id, 'read']\"\n        >\n          {{ element?.submittable?.name }}\n        </a> <br>\n        <small class=\"text-secondary\" *ngIf=\"element?.submittable_type\">{{ element?.submittable_type }}</small>\n      </td>\n    </ng-container>\n\n    <!-- Status Column -->\n    <ng-container matColumnDef=\"status.title\">\n      <th mat-header-cell *matHeaderCellDef>Status</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.status?.title }}\n      </td>\n    </ng-container>\n\n    <!-- Date Column -->\n    <ng-container matColumnDef=\"date\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element.date | date }}\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;\">\n        <div class=\"d-flex gap-2\">\n          <mat-icon\n            [routerLink]=\"['/checksheets/checksheets-view', element?.id]\"\n            class=\"cursor-pointer\"\n          >\n            visibility\n          </mat-icon>\n\n          <mat-icon\n            *ngIf=\"element.status_id === 1\"\n            [routerLink]=\"['/checksheets/checksheets', element?.id, 'view']\"\n            class=\"cursor-pointer\"\n          >\n            edit\n          </mat-icon>\n          <app-checksheet-review-button\n            [submission]=\"element\"\n            [requestParams]=\"{ with: this.with }\"\n            (reviewed)=\"reload()\"\n          ></app-checksheet-review-button>\n          <app-checksheet-submission-delete-button\n            [checksheetSubmission]=\"element\"\n            (deleted)=\"onDeleted()\"\n          ></app-checksheet-submission-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 *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n</mat-card>\n", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"] }]
+        }], ctorParameters: () => [{ type: i1.AlertService }, { type: i2.UntypedFormBuilder }, { type: ChecksheetService }, { type: i1.RequestHelperService }, { type: i4$1.ActivatedRoute }], propDecorators: { submittableId: [{
+                type: Input
+            }], submittableType: [{
+                type: Input
+            }] } });
+
+class ChecksheetListWidgetComponent extends TechlifyListingControllerInterface {
+    service;
+    submittable;
+    submittableType;
+    title = 'Checksheets';
+    submittableTitleField = 'name';
+    showChecksheetButton = false;
+    constructor(service) {
+        super();
+        this.service = service;
+        this.perPage = 5;
+    }
+    ngOnInit() {
+        this.loadData();
+    }
+    loadData() {
+        const params = {
+            page: 1,
+            perPage: this.perPage,
+            submittable_type: this.submittableType,
+            submittable_ids: this.submittable?.id,
+            with: 'creator',
+        };
+        this.isWorking = true;
+        this.service.index(params).subscribe({
+            next: (response) => {
+                this.models = this.models.concat(response?.data);
+                this.isWorking = false;
+            },
+            error: () => { this.isWorking = false; }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetListWidgetComponent, deps: [{ token: ChecksheetService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetListWidgetComponent, selector: "app-checksheet-list-widget", inputs: { submittable: "submittable", submittableType: "submittableType", title: "title", submittableTitleField: "submittableTitleField", showChecksheetButton: "showChecksheetButton" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <h3 class=\"mb-0 fw-bold\">{{ title }}</h3>\n    <span class=\"flex-fill\"></span>\n    <app-checksheet-form-button *ngIf=\"showChecksheetButton\" [submittableType]=\"submittableType\"\n                                [submittableId]=\"submittable?.id\"></app-checksheet-form-button>\n  </mat-card-content>\n  <mat-card-content>\n    <p class=\"mb-0\">Checksheets for <span class=\"badge bg-secondary\">{{ submittableType }}</span>\n      # {{ submittable?.id }} : {{ submittable[submittableTitleField] }}\n    </p>\n  </mat-card-content>\n  <mat-card-content>\n    <a *ngFor=\"let model of models\" [routerLink]=\"['/checksheets/checksheets-view', model?.id]\"\n       class=\"d-flex justify-content-start align-items-center gap-2 p-2 cursor-pointer text-decoration-none text-dark\">\n      <span class=\"material-symbols-outlined fs-2\">\n        article\n      </span>\n      <div class=\"d-flex flex-column gap-1\">\n        <p class=\"mb-0\">on {{ model?.date | date }}</p>\n        <small class=\"text-secondary\">By {{ model?.creator?.name }}</small>\n      </div>\n    </a>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ChecksheetFormButtonComponent, selector: "app-checksheet-form-button", inputs: ["submittableType", "submittableId"], outputs: ["saved"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetListWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-checksheet-list-widget', template: "<mat-card>\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <h3 class=\"mb-0 fw-bold\">{{ title }}</h3>\n    <span class=\"flex-fill\"></span>\n    <app-checksheet-form-button *ngIf=\"showChecksheetButton\" [submittableType]=\"submittableType\"\n                                [submittableId]=\"submittable?.id\"></app-checksheet-form-button>\n  </mat-card-content>\n  <mat-card-content>\n    <p class=\"mb-0\">Checksheets for <span class=\"badge bg-secondary\">{{ submittableType }}</span>\n      # {{ submittable?.id }} : {{ submittable[submittableTitleField] }}\n    </p>\n  </mat-card-content>\n  <mat-card-content>\n    <a *ngFor=\"let model of models\" [routerLink]=\"['/checksheets/checksheets-view', model?.id]\"\n       class=\"d-flex justify-content-start align-items-center gap-2 p-2 cursor-pointer text-decoration-none text-dark\">\n      <span class=\"material-symbols-outlined fs-2\">\n        article\n      </span>\n      <div class=\"d-flex flex-column gap-1\">\n        <p class=\"mb-0\">on {{ model?.date | date }}</p>\n        <small class=\"text-secondary\">By {{ model?.creator?.name }}</small>\n      </div>\n    </a>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n" }]
+        }], ctorParameters: () => [{ type: ChecksheetService }], propDecorators: { submittable: [{
+                type: Input
+            }], submittableType: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], submittableTitleField: [{
+                type: Input
+            }], showChecksheetButton: [{
+                type: Input
+            }] } });
 
 class ChecksheetNodeViewComponent {
-    location;
     route;
-    checksheetSubmissionService;
+    service;
     submission;
     submissionId;
     isLoading = false;
-    with = 'format.questions.answers,format.questions.type,creator,reviewer,status';
-    constructor(location, route, checksheetSubmissionService) {
-        this.location = location;
+    with = 'format.questions.answers,format.questions.type,creator,reviewer,status,submittable';
+    constructor(route, service) {
         this.route = route;
-        this.checksheetSubmissionService = checksheetSubmissionService;
-        this.submissionId = parseInt(this.route.snapshot.params?.['submissionId']);
+        this.service = service;
     }
     ngOnInit() {
-        if (this.submissionId) {
-            this.loadSubmission();
-        }
+        this.route.params.subscribe((params) => {
+            this.submissionId = params['submissionId'];
+            if (this.submissionId) {
+                this.loadSubmission();
+            }
+        });
     }
     loadSubmission() {
         const params = {
             with: this.with
         };
         this.isLoading = true;
-        this.checksheetSubmissionService.show(this.submissionId, params).subscribe({
+        this.service.show(this.submissionId, params).subscribe({
             next: (response) => {
                 this.submission = response?.item;
                 this.isLoading = false;
@@ -1676,13 +1842,13 @@ class ChecksheetNodeViewComponent {
     onUpdated(model) {
         this.submission = model;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetNodeViewComponent, deps: [{ token: i4.Location }, { token: i6$2.ActivatedRoute }, { token: ChecksheetService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetNodeViewComponent, selector: "app-checksheet-node-view", ngImport: i0, template: "<div\n  fxLayout=\"column\"\n  fxLayoutGap=\"0.5rem\"\n  id=\"pdfable-section\"\n  *ngIf=\"submission\"\n>\n  <div fxLayout fxLayoutAlign=\"start center\">\n    <h2 class=\"m-auto\">Checksheet</h2>\n  </div>\n\n  <div fxLayout=\"column\">\n    <mat-card class=\"w-100\">\n      <h4>Date: {{ submission?.date | date }}</h4>\n      <h4>Format: {{ submission?.format?.title }}</h4>\n      <h4>Creator: {{ submission?.creator?.name }}</h4>\n      <h4 *ngIf=\"submission?.reviewer\">\n        Reviewer: {{ submission?.reviewer?.name }}\n      </h4>\n      <h4 *ngIf=\"submission?.status\">\n        Status: {{ submission?.status?.title }}\n      </h4>\n\n      <div\n        class=\"my-2 d-print-none\"\n        fxLayout=\"row\"\n        fxLayoutGap=\"5px\"\n        fxLayoutAlign=\"center\"\n      >\n        <app-checksheet-review-button\n          [submission]=\"submission\"\n          viewType=\"button\"\n          [requestParams]=\"{ with: this.with }\"\n          (reviewed)=\"onUpdated($event)\"\n        ></app-checksheet-review-button>\n      </div>\n    </mat-card>\n  </div>\n\n  <div fxLayout=\"column\" *ngIf=\"submission\">\n    <h2>Submission</h2>\n    <app-checksheet-question-list\n      class=\"w-100 pt-0 pr-4\"\n      [submission]=\"submission\"\n      [disableInput]=\"true\"\n    >\n    </app-checksheet-question-list>\n  </div>\n\n  <app-note-list\n    *ngIf=\"submission?.id\"\n    [relatedModelId]=\"submission?.id\"\n    modelType=\"ChecksheetSubmission\"\n  ></app-note-list>\n</div>\n\n<mat-progress-bar *ngIf=\"isLoading\" mode=\"indeterminate\"></mat-progress-bar>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i1.NoteListComponent, selector: "app-note-list", inputs: ["relatedModelId", "modelType", "readonly", "labelText", "commentsView", "viewMode"] }, { kind: "component", type: ChecksheetQuestionListComponent, selector: "app-checksheet-question-list", inputs: ["checksheet", "submission", "disableInput"], outputs: ["checksheetChange"] }, { kind: "component", type: ChecksheetReviewButtonComponent, selector: "app-checksheet-review-button", inputs: ["submission", "viewType", "requestParams"], outputs: ["reviewed"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetNodeViewComponent, deps: [{ token: i4$1.ActivatedRoute }, { token: ChecksheetService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetNodeViewComponent, selector: "app-checksheet-node-view", ngImport: i0, template: "<div class=\"d-flex justify-content-start gap-3 w-100\" id=\"pdfable-section\" *ngIf=\"submission\">\n  <div class=\"d-flex flex-column gap-3\" style=\"width: 85%\">\n    <mat-card>\n      <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n        <div class=\"d-flex justify-content-start align-items-center gap-2\">\n          <span class=\"material-symbols-outlined fs-1\">\n            list_alt_check\n          </span>\n          <div>\n            <h2 class=\"mb-0\">{{ submission?.format?.title }}</h2>\n            <p class=\"mb-0\" *ngIf=\"submission?.details\">{{ submission?.details }}</p>\n          </div>\n        </div>\n        <div class=\"d-flex justify-content-end align-items-center gap-2\">\n          <div class=\"d-flex flex-column gap-1\">\n            <p class=\"mb-0 text-secondary\">for <span class=\"badge bg-secondary\">{{ submission?.submittable_type }}</span>\n              #{{ submission?.submittable_id }} : {{ submission?.submittable?.name }}\n            </p>\n            <div class=\"d-flex justify-content-end align-items-center gap-2\">\n              <p class=\"mb-0 text-secondary\">By</p> <ngx-avatars [name]=\"submission?.creator?.name\" size=\"30\"></ngx-avatars>\n              <p class=\"text-dark mb-0\">{{ submission?.creator?.name }}</p>\n              <p class=\"mb-0 text-secondary\">on {{ submission?.date | date }}</p>\n            </div>\n          </div>\n        </div>\n      </mat-card-content>\n    </mat-card>\n\n    <app-checksheet-question-list [submission]=\"submission\" [disableInput]=\"true\"></app-checksheet-question-list>\n\n  </div>\n  <div class=\"d-flex flex-column gap-3\" style=\"width: calc(15% - 1rem)\">\n    <app-checksheet-list-widget title=\"Previous Checksheets\" [submittableType]=\"submission?.submittable_type\"\n                                [submittable]=\"submission?.submittable\"></app-checksheet-list-widget>\n    <app-note-list *ngIf=\"submission?.id && !isLoading\" [relatedModelId]=\"submission?.id\" class=\"w-100\"\n                   modelType=\"ChecksheetSubmission\" viewMode=\"timeline\"></app-note-list>\n  </div>\n</div>\n\n<mat-progress-bar *ngIf=\"isLoading\" mode=\"indeterminate\"></mat-progress-bar>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i1.NoteListComponent, selector: "app-note-list", inputs: ["relatedModelId", "modelType", "readonly", "labelText", "commentsView", "viewMode"] }, { kind: "component", type: i7$5.AvatarComponent, selector: "ngx-avatars", inputs: ["round", "size", "textSizeRatio", "bgColor", "fgColor", "borderColor", "style", "cornerRadius", "facebookId", "twitterId", "googleId", "instagramId", "vkontakteId", "skypeId", "gravatarId", "githubId", "src", "alt", "name", "value", "referrerpolicy", "placeholder", "initialsSize"], outputs: ["clickOnAvatar"] }, { kind: "component", type: ChecksheetQuestionListComponent, selector: "app-checksheet-question-list", inputs: ["checksheet", "submission", "disableInput"], outputs: ["checksheetChange"] }, { kind: "component", type: ChecksheetListWidgetComponent, selector: "app-checksheet-list-widget", inputs: ["submittable", "submittableType", "title", "submittableTitleField", "showChecksheetButton"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetNodeViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-checksheet-node-view', template: "<div\n  fxLayout=\"column\"\n  fxLayoutGap=\"0.5rem\"\n  id=\"pdfable-section\"\n  *ngIf=\"submission\"\n>\n  <div fxLayout fxLayoutAlign=\"start center\">\n    <h2 class=\"m-auto\">Checksheet</h2>\n  </div>\n\n  <div fxLayout=\"column\">\n    <mat-card class=\"w-100\">\n      <h4>Date: {{ submission?.date | date }}</h4>\n      <h4>Format: {{ submission?.format?.title }}</h4>\n      <h4>Creator: {{ submission?.creator?.name }}</h4>\n      <h4 *ngIf=\"submission?.reviewer\">\n        Reviewer: {{ submission?.reviewer?.name }}\n      </h4>\n      <h4 *ngIf=\"submission?.status\">\n        Status: {{ submission?.status?.title }}\n      </h4>\n\n      <div\n        class=\"my-2 d-print-none\"\n        fxLayout=\"row\"\n        fxLayoutGap=\"5px\"\n        fxLayoutAlign=\"center\"\n      >\n        <app-checksheet-review-button\n          [submission]=\"submission\"\n          viewType=\"button\"\n          [requestParams]=\"{ with: this.with }\"\n          (reviewed)=\"onUpdated($event)\"\n        ></app-checksheet-review-button>\n      </div>\n    </mat-card>\n  </div>\n\n  <div fxLayout=\"column\" *ngIf=\"submission\">\n    <h2>Submission</h2>\n    <app-checksheet-question-list\n      class=\"w-100 pt-0 pr-4\"\n      [submission]=\"submission\"\n      [disableInput]=\"true\"\n    >\n    </app-checksheet-question-list>\n  </div>\n\n  <app-note-list\n    *ngIf=\"submission?.id\"\n    [relatedModelId]=\"submission?.id\"\n    modelType=\"ChecksheetSubmission\"\n  ></app-note-list>\n</div>\n\n<mat-progress-bar *ngIf=\"isLoading\" mode=\"indeterminate\"></mat-progress-bar>\n" }]
-        }], ctorParameters: () => [{ type: i4.Location }, { type: i6$2.ActivatedRoute }, { type: ChecksheetService }] });
+            args: [{ selector: 'app-checksheet-node-view', template: "<div class=\"d-flex justify-content-start gap-3 w-100\" id=\"pdfable-section\" *ngIf=\"submission\">\n  <div class=\"d-flex flex-column gap-3\" style=\"width: 85%\">\n    <mat-card>\n      <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n        <div class=\"d-flex justify-content-start align-items-center gap-2\">\n          <span class=\"material-symbols-outlined fs-1\">\n            list_alt_check\n          </span>\n          <div>\n            <h2 class=\"mb-0\">{{ submission?.format?.title }}</h2>\n            <p class=\"mb-0\" *ngIf=\"submission?.details\">{{ submission?.details }}</p>\n          </div>\n        </div>\n        <div class=\"d-flex justify-content-end align-items-center gap-2\">\n          <div class=\"d-flex flex-column gap-1\">\n            <p class=\"mb-0 text-secondary\">for <span class=\"badge bg-secondary\">{{ submission?.submittable_type }}</span>\n              #{{ submission?.submittable_id }} : {{ submission?.submittable?.name }}\n            </p>\n            <div class=\"d-flex justify-content-end align-items-center gap-2\">\n              <p class=\"mb-0 text-secondary\">By</p> <ngx-avatars [name]=\"submission?.creator?.name\" size=\"30\"></ngx-avatars>\n              <p class=\"text-dark mb-0\">{{ submission?.creator?.name }}</p>\n              <p class=\"mb-0 text-secondary\">on {{ submission?.date | date }}</p>\n            </div>\n          </div>\n        </div>\n      </mat-card-content>\n    </mat-card>\n\n    <app-checksheet-question-list [submission]=\"submission\" [disableInput]=\"true\"></app-checksheet-question-list>\n\n  </div>\n  <div class=\"d-flex flex-column gap-3\" style=\"width: calc(15% - 1rem)\">\n    <app-checksheet-list-widget title=\"Previous Checksheets\" [submittableType]=\"submission?.submittable_type\"\n                                [submittable]=\"submission?.submittable\"></app-checksheet-list-widget>\n    <app-note-list *ngIf=\"submission?.id && !isLoading\" [relatedModelId]=\"submission?.id\" class=\"w-100\"\n                   modelType=\"ChecksheetSubmission\" viewMode=\"timeline\"></app-note-list>\n  </div>\n</div>\n\n<mat-progress-bar *ngIf=\"isLoading\" mode=\"indeterminate\"></mat-progress-bar>\n" }]
+        }], ctorParameters: () => [{ type: i4$1.ActivatedRoute }, { type: ChecksheetService }] });
 
 const errorMessages$1 = {
     date: {
@@ -1699,7 +1865,7 @@ const errorMessages$1 = {
         required: 'Status is required'
     }
 };
-class ChecksheetViewComponent {
+class ChecksheetFormatViewComponent {
     formValidatorService;
     fb;
     spinnerService;
@@ -1804,13 +1970,13 @@ class ChecksheetViewComponent {
         this.alertService.addAlert('Checksheet saved successfully!', 'success');
         this.redirectBack();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetViewComponent, deps: [{ token: i1.FormValidatorService }, { token: i2.UntypedFormBuilder }, { token: i3$1.NgxSpinnerService }, { token: i1.AlertService }, { token: i4.Location }, { token: i1.ErrorHandlerService }, { token: i1.DataManager }, { token: i1$1.MatDialog }, { token: i6$2.ActivatedRoute }, { token: ChecksheetService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetViewComponent, selector: "app-checksheet-view", ngImport: i0, template: "<app-checksheet-form [disableInput]=\"false\"></app-checksheet-form>\n", styles: [""], dependencies: [{ kind: "component", type: ChecksheetFormComponent, selector: "app-checksheet-form", inputs: ["disableInput"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatViewComponent, deps: [{ token: i1.FormValidatorService }, { token: i2.UntypedFormBuilder }, { token: i1$2.NgxSpinnerService }, { token: i1.AlertService }, { token: i4.Location }, { token: i1.ErrorHandlerService }, { token: i1.DataManager }, { token: i1$1.MatDialog }, { token: i4$1.ActivatedRoute }, { token: ChecksheetService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetFormatViewComponent, selector: "app-checksheet-format-view", ngImport: i0, template: "<app-checksheet-format-form [disableInput]=\"false\"></app-checksheet-format-form>\n", styles: [""], dependencies: [{ kind: "component", type: ChecksheetFormatFormComponent, selector: "app-checksheet-format-form", inputs: ["disableInput"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-checksheet-view', template: "<app-checksheet-form [disableInput]=\"false\"></app-checksheet-form>\n" }]
-        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2.UntypedFormBuilder }, { type: i3$1.NgxSpinnerService }, { type: i1.AlertService }, { type: i4.Location }, { type: i1.ErrorHandlerService }, { type: i1.DataManager }, { type: i1$1.MatDialog }, { type: i6$2.ActivatedRoute }, { type: ChecksheetService }] });
+            args: [{ selector: 'app-checksheet-format-view', template: "<app-checksheet-format-form [disableInput]=\"false\"></app-checksheet-format-form>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2.UntypedFormBuilder }, { type: i1$2.NgxSpinnerService }, { type: i1.AlertService }, { type: i4.Location }, { type: i1.ErrorHandlerService }, { type: i1.DataManager }, { type: i1$1.MatDialog }, { type: i4$1.ActivatedRoute }, { type: ChecksheetService }] });
 
 const errorMessages = {
     date: {
@@ -1932,20 +2098,20 @@ class ChecksheetSubmissionViewComponent {
             checksheet_format_id: ['', Validators.required]
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionViewComponent, deps: [{ token: i1.FormValidatorService }, { token: i2.UntypedFormBuilder }, { token: i3$1.NgxSpinnerService }, { token: i1.AlertService }, { token: i4.Location }, { token: i1.ErrorHandlerService }, { token: i1.DataManager }, { token: i1$1.MatDialog }, { token: i6$2.ActivatedRoute }, { token: ChecksheetService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetSubmissionViewComponent, selector: "app-checksheet-submission-view", ngImport: i0, template: "<div>\n  <h2 class=\"m-0\">Checksheet</h2>\n\n  <div class=\"d-flex justify-content-start align-items-start gap-1\">\n    <app-checksheet-question-list\n      *ngIf=\"submission\"\n      class=\"w-100 p-4\"\n      [submission]=\"submission\"\n      style=\"width: calc(70% - 1rem)\"\n    >\n    </app-checksheet-question-list>\n    <div style=\"width: calc(30% - 1rem)\">\n      <mat-card class=\"w-100\" *ngIf=\"submission\">\n        <app-checksheet-submission-form\n          (cancelled)=\"redirectBack()\"\n          (saved)=\"onSaved()\"\n          [checksheetSubmission]=\"submission\"\n        ></app-checksheet-submission-form>\n      </mat-card>\n      <mat-card class=\"mt-2 p-0\" *ngIf=\"submission?.id\">\n        <app-note-list\n          [relatedModelId]=\"submission?.id\"\n          modelType=\"ChecksheetSubmission\"\n        ></app-note-list>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1.NoteListComponent, selector: "app-note-list", inputs: ["relatedModelId", "modelType", "readonly", "labelText", "commentsView", "viewMode"] }, { kind: "component", type: ChecksheetQuestionListComponent, selector: "app-checksheet-question-list", inputs: ["checksheet", "submission", "disableInput"], outputs: ["checksheetChange"] }, { kind: "component", type: ChecksheetSubmissionFormComponent, selector: "app-checksheet-submission-form", inputs: ["submittableType", "submittableId", "checksheetSubmission"], outputs: ["cancelled", "saved"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionViewComponent, deps: [{ token: i1.FormValidatorService }, { token: i2.UntypedFormBuilder }, { token: i1$2.NgxSpinnerService }, { token: i1.AlertService }, { token: i4.Location }, { token: i1.ErrorHandlerService }, { token: i1.DataManager }, { token: i1$1.MatDialog }, { token: i4$1.ActivatedRoute }, { token: ChecksheetService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetSubmissionViewComponent, selector: "app-checksheet-submission-view", ngImport: i0, template: "<div>\n  <h2 class=\"m-0\">Checksheet</h2>\n\n  <div class=\"d-flex justify-content-start align-items-start gap-1\">\n    <app-checksheet-question-list\n      *ngIf=\"submission\"\n      class=\"w-100 p-4\"\n      [submission]=\"submission\"\n      style=\"width: calc(70% - 1rem)\"\n    >\n    </app-checksheet-question-list>\n    <div style=\"width: calc(30% - 1rem)\">\n      <mat-card class=\"w-100\" *ngIf=\"submission\">\n        <app-checksheet-form\n          (cancelled)=\"redirectBack()\"\n          (saved)=\"onSaved()\"\n          [checksheetSubmission]=\"submission\"\n          [submittableType]=\"submission?.submittable_type\"\n          [submittableId]=\"submission?.submission_id\"\n        ></app-checksheet-form>\n      </mat-card>\n      <mat-card class=\"mt-2 p-0\" *ngIf=\"submission?.id\">\n        <app-note-list\n          [relatedModelId]=\"submission?.id\"\n          modelType=\"ChecksheetSubmission\"\n        ></app-note-list>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1.NoteListComponent, selector: "app-note-list", inputs: ["relatedModelId", "modelType", "readonly", "labelText", "commentsView", "viewMode"] }, { kind: "component", type: ChecksheetQuestionListComponent, selector: "app-checksheet-question-list", inputs: ["checksheet", "submission", "disableInput"], outputs: ["checksheetChange"] }, { kind: "component", type: ChecksheetFormComponent, selector: "app-checksheet-form", inputs: ["submittableType", "submittableId", "checksheetSubmission"], outputs: ["cancelled", "saved"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-checksheet-submission-view', template: "<div>\n  <h2 class=\"m-0\">Checksheet</h2>\n\n  <div class=\"d-flex justify-content-start align-items-start gap-1\">\n    <app-checksheet-question-list\n      *ngIf=\"submission\"\n      class=\"w-100 p-4\"\n      [submission]=\"submission\"\n      style=\"width: calc(70% - 1rem)\"\n    >\n    </app-checksheet-question-list>\n    <div style=\"width: calc(30% - 1rem)\">\n      <mat-card class=\"w-100\" *ngIf=\"submission\">\n        <app-checksheet-submission-form\n          (cancelled)=\"redirectBack()\"\n          (saved)=\"onSaved()\"\n          [checksheetSubmission]=\"submission\"\n        ></app-checksheet-submission-form>\n      </mat-card>\n      <mat-card class=\"mt-2 p-0\" *ngIf=\"submission?.id\">\n        <app-note-list\n          [relatedModelId]=\"submission?.id\"\n          modelType=\"ChecksheetSubmission\"\n        ></app-note-list>\n      </mat-card>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2.UntypedFormBuilder }, { type: i3$1.NgxSpinnerService }, { type: i1.AlertService }, { type: i4.Location }, { type: i1.ErrorHandlerService }, { type: i1.DataManager }, { type: i1$1.MatDialog }, { type: i6$2.ActivatedRoute }, { type: ChecksheetService }] });
+            args: [{ selector: 'app-checksheet-submission-view', template: "<div>\n  <h2 class=\"m-0\">Checksheet</h2>\n\n  <div class=\"d-flex justify-content-start align-items-start gap-1\">\n    <app-checksheet-question-list\n      *ngIf=\"submission\"\n      class=\"w-100 p-4\"\n      [submission]=\"submission\"\n      style=\"width: calc(70% - 1rem)\"\n    >\n    </app-checksheet-question-list>\n    <div style=\"width: calc(30% - 1rem)\">\n      <mat-card class=\"w-100\" *ngIf=\"submission\">\n        <app-checksheet-form\n          (cancelled)=\"redirectBack()\"\n          (saved)=\"onSaved()\"\n          [checksheetSubmission]=\"submission\"\n          [submittableType]=\"submission?.submittable_type\"\n          [submittableId]=\"submission?.submission_id\"\n        ></app-checksheet-form>\n      </mat-card>\n      <mat-card class=\"mt-2 p-0\" *ngIf=\"submission?.id\">\n        <app-note-list\n          [relatedModelId]=\"submission?.id\"\n          modelType=\"ChecksheetSubmission\"\n        ></app-note-list>\n      </mat-card>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2.UntypedFormBuilder }, { type: i1$2.NgxSpinnerService }, { type: i1.AlertService }, { type: i4.Location }, { type: i1.ErrorHandlerService }, { type: i1.DataManager }, { type: i1$1.MatDialog }, { type: i4$1.ActivatedRoute }, { type: ChecksheetService }] });
 
 const routes = [
     { path: 'checksheet-format-list', component: ChecksheetFormatListComponent },
     { path: 'checksheet-report', component: ChecksheetReportComponent },
-    { path: 'checksheet-form', component: ChecksheetFormComponent },
-    { path: 'checksheet-view/:checksheetId', component: ChecksheetViewComponent },
-    { path: 'checksheet-form/:checksheetId', component: ChecksheetFormComponent },
+    { path: 'checksheet-format-form', component: ChecksheetFormatFormComponent },
+    { path: 'checksheet-format-view/:checksheetId', component: ChecksheetFormatViewComponent },
+    { path: 'checksheet-format-form/:checksheetId', component: ChecksheetFormatFormComponent },
     {
         path: 'checksheets',
         component: ChecksheetListComponent
@@ -1962,7 +2128,7 @@ const routes = [
 ];
 class ChecksheetRoutingModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetRoutingModule, imports: [i6$2.RouterModule], exports: [RouterModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetRoutingModule, imports: [i4$1.RouterModule], exports: [RouterModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetRoutingModule, decorators: [{
@@ -2024,8 +2190,8 @@ class MechanicalIssueFormComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MechanicalIssueFormComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ChecksheetService }, { token: i1.ErrorHandlerService }, { token: i3$1.NgxSpinnerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MechanicalIssueFormComponent, selector: "app-mechanical-issue-form", ngImport: i0, template: "<div>\n    <h4>Mechanical Issues Form</h4>\n    <form>\n        <div *ngFor=\"let issue of mechanicalIssues\">\n            <mat-checkbox name=\"mechanicalIssues[]\" [(ngModel)]=\"issue.is_selected\">\n                {{issue.question.label}}: {{issue.answer.value}}\n            </mat-checkbox>\n        </div>\n        <div>\n            <button mat-raised-button type=\"submit\" color=\"primary\" (click)=\"submit()\">Save</button>\n        </div>\n    </form>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.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: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MechanicalIssueFormComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ChecksheetService }, { token: i1.ErrorHandlerService }, { token: i1$2.NgxSpinnerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MechanicalIssueFormComponent, selector: "app-mechanical-issue-form", ngImport: i0, template: "<div>\n    <h4>Mechanical Issues Form</h4>\n    <form>\n        <div *ngFor=\"let issue of mechanicalIssues\">\n            <mat-checkbox name=\"mechanicalIssues[]\" [(ngModel)]=\"issue.is_selected\">\n                {{issue.question.label}}: {{issue.answer.value}}\n            </mat-checkbox>\n        </div>\n        <div>\n            <button mat-raised-button type=\"submit\" color=\"primary\" (click)=\"submit()\">Save</button>\n        </div>\n    </form>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.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: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MechanicalIssueFormComponent, decorators: [{
             type: Component,
@@ -2033,7 +2199,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: ChecksheetService }, { type: i1.ErrorHandlerService }, { type: i3$1.NgxSpinnerService }] });
+                }] }, { type: ChecksheetService }, { type: i1.ErrorHandlerService }, { type: i1$2.NgxSpinnerService }] });
+
+class FileUploadButtonComponent {
+    entityFileService;
+    config;
+    uploaded = new EventEmitter();
+    DEFAULT_FILE_ID = 'file-upload-button';
+    isUploading;
+    constructor(entityFileService) {
+        this.entityFileService = entityFileService;
+    }
+    async onFileChange(event) {
+        if (event.target.files && event.target.files.length) {
+            const fileArray = Array.from(event.target.files);
+            const fileInput = document.getElementById(this.config?.fileId ?? this.DEFAULT_FILE_ID);
+            fileInput.value = '';
+            this.isUploading = true;
+            const results = await this.uploadFiles(fileArray);
+            this.uploaded.emit(results);
+            this.isUploading = false;
+        }
+    }
+    selectFiles(event) {
+        event.preventDefault();
+        document
+            .getElementById(this.config?.fileId ?? this.DEFAULT_FILE_ID)
+            ?.click();
+    }
+    async uploadFiles(files) {
+        const uploadPromises = files.map((file) => this.entityFileService.uploadEntityFile(file));
+        return await Promise.all(uploadPromises);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileUploadButtonComponent, deps: [{ token: i1.EntityFileService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FileUploadButtonComponent, isStandalone: true, selector: "app-file-upload-button", inputs: { config: "config" }, outputs: { uploaded: "uploaded" }, ngImport: i0, template: "<button\n  [disabled]=\"isUploading\"\n  mat-stroked-button\n  type=\"button\"\n  (click)=\"selectFiles($event)\"\n>\n  <mat-icon>attachment</mat-icon> Attach\n</button>\n\n<input\n  type=\"file\"\n  id=\"{{ config.fileId ?? DEFAULT_FILE_ID }}\"\n  [accept]=\"config.accept ?? '*'\"\n  (change)=\"onFileChange($event)\"\n  [multiple]=\"config.multiple ?? false\"\n  class=\"d-none\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileUploadButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-file-upload-button', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule], template: "<button\n  [disabled]=\"isUploading\"\n  mat-stroked-button\n  type=\"button\"\n  (click)=\"selectFiles($event)\"\n>\n  <mat-icon>attachment</mat-icon> Attach\n</button>\n\n<input\n  type=\"file\"\n  id=\"{{ config.fileId ?? DEFAULT_FILE_ID }}\"\n  [accept]=\"config.accept ?? '*'\"\n  (change)=\"onFileChange($event)\"\n  [multiple]=\"config.multiple ?? false\"\n  class=\"d-none\"\n/>\n" }]
+        }], ctorParameters: () => [{ type: i1.EntityFileService }], propDecorators: { config: [{
+                type: Input
+            }], uploaded: [{
+                type: Output
+            }] } });
+
+class ChecksheetSubmissionFileUploadComponent {
+    checksheetSubmissionFileService;
+    submissionId;
+    questionId;
+    uploaded = new EventEmitter();
+    constructor(checksheetSubmissionFileService) {
+        this.checksheetSubmissionFileService = checksheetSubmissionFileService;
+    }
+    onUploadComplete(uploadedFiles) {
+        const uploadObservables = uploadedFiles.map((file) => {
+            const data = {
+                file_name: file.item.file_name,
+                file_url: file.item.url,
+                submission_id: this.submissionId,
+                question_id: this.questionId
+            };
+            return this.checksheetSubmissionFileService
+                .store(data)
+                .pipe(map((response) => response?.item));
+        });
+        forkJoin(uploadObservables).subscribe({
+            next: (checksheetSubmissionFiles) => {
+                this.uploaded.emit(checksheetSubmissionFiles);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionFileUploadComponent, deps: [{ token: ChecksheetSubmissionFileService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetSubmissionFileUploadComponent, isStandalone: true, selector: "app-checksheet-submission-file-upload", inputs: { submissionId: "submissionId", questionId: "questionId" }, outputs: { uploaded: "uploaded" }, ngImport: i0, template: "<app-file-upload-button\n  (uploaded)=\"onUploadComplete($event)\"\n  [config]=\"{ fileId: 'question-' + questionId }\"\n></app-file-upload-button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FileUploadButtonComponent, selector: "app-file-upload-button", inputs: ["config"], outputs: ["uploaded"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionFileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-checksheet-submission-file-upload', standalone: true, imports: [CommonModule, FileUploadButtonComponent], template: "<app-file-upload-button\n  (uploaded)=\"onUploadComplete($event)\"\n  [config]=\"{ fileId: 'question-' + questionId }\"\n></app-file-upload-button>\n" }]
+        }], ctorParameters: () => [{ type: ChecksheetSubmissionFileService }], propDecorators: { submissionId: [{
+                type: Input
+            }], questionId: [{
+                type: Input
+            }], uploaded: [{
+                type: Output
+            }] } });
 
 /*
  * This module imports and re-exports all Angular Material modules for convenience,
@@ -2214,55 +2462,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-class ChecksheetSubmissionFormButtonComponent {
-    matDialog;
-    alertService;
-    router;
-    submittableType = 'fixed-asset';
-    submittableId;
-    saved = new EventEmitter();
-    constructor(matDialog, alertService, router) {
-        this.matDialog = matDialog;
-        this.alertService = alertService;
-        this.router = router;
-    }
-    /**
-     * Open checksheet submission form.
-     *
-     * @param templateRef
-     */
-    openForm(templateRef) {
-        this.matDialog.open(templateRef, { width: '500px' });
-    }
-    /**
-     * Handle checksheet submission save event.
-     *
-     * @param checksheetSubmission
-     */
-    onSaved(checksheetSubmission) {
-        this.saved.emit(checksheetSubmission);
-        this.matDialog.closeAll();
-        this.alertService.addAlert('The checksheet submission is saved successfully!', 'success');
-        this.router.navigate([
-            'fixed-assets/checksheets/checksheet-submissions',
-            checksheetSubmission?.id,
-            'view'
-        ]);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionFormButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: i1.AlertService }, { token: i6$2.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetSubmissionFormButtonComponent, selector: "app-checksheet-submission-form-button", inputs: { submittableType: "submittableType", submittableId: "submittableId" }, outputs: { saved: "saved" }, ngImport: i0, template: "<span\n  *ngIf=\"submittableId\"\n  class=\"material-symbols-outlined text-secondary\"\n  matTooltip=\"Add Checksheet Submission\"\n  (click)=\"openForm(formTemplate)\"\n>\n  assignment_turned_in\n</span>\n<mat-icon\n  *ngIf=\"!submittableId\"\n  class=\"cursor-pointer text-secondary\"\n  (click)=\"openForm(formTemplate)\"\n>\n  add\n</mat-icon>\n\n<ng-template #formTemplate>\n  <app-checksheet-submission-form\n    mat-dialog-content\n    (cancelled)=\"matDialog.closeAll()\"\n    (saved)=\"onSaved($event)\"\n    [submittableType]=\"submittableType\"\n    [submittableId]=\"submittableId\"\n  ></app-checksheet-submission-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChecksheetSubmissionFormComponent, selector: "app-checksheet-submission-form", inputs: ["submittableType", "submittableId", "checksheetSubmission"], outputs: ["cancelled", "saved"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionFormButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-checksheet-submission-form-button', template: "<span\n  *ngIf=\"submittableId\"\n  class=\"material-symbols-outlined text-secondary\"\n  matTooltip=\"Add Checksheet Submission\"\n  (click)=\"openForm(formTemplate)\"\n>\n  assignment_turned_in\n</span>\n<mat-icon\n  *ngIf=\"!submittableId\"\n  class=\"cursor-pointer text-secondary\"\n  (click)=\"openForm(formTemplate)\"\n>\n  add\n</mat-icon>\n\n<ng-template #formTemplate>\n  <app-checksheet-submission-form\n    mat-dialog-content\n    (cancelled)=\"matDialog.closeAll()\"\n    (saved)=\"onSaved($event)\"\n    [submittableType]=\"submittableType\"\n    [submittableId]=\"submittableId\"\n  ></app-checksheet-submission-form>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i1.AlertService }, { type: i6$2.Router }], propDecorators: { submittableType: [{
-                type: Input
-            }], submittableId: [{
-                type: Input
-            }], saved: [{
-                type: Output
-            }] } });
-
 class ChecksheetSubmissionService extends TechlifyServiceBaseClass {
     constructor(httpService) {
         super(httpService, 'checksheet-submissions');
@@ -2339,7 +2538,7 @@ class ChecksheetSubmissionReviewButtonComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionReviewButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: i1.CredentialsService }, { token: ChecksheetSubmissionService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetSubmissionReviewButtonComponent, selector: "app-checksheet-submission-review-button", inputs: { submission: "submission", viewType: "viewType", requestParams: "requestParams" }, outputs: { reviewed: "reviewed" }, ngImport: i0, template: "<ng-container\n  *ngIf=\"submission?.status_id === 2 && submission?.creator_id !== user?.id\"\n>\n  <button\n    *ngIf=\"viewType === 'button'\"\n    mat-raised-button\n    color=\"primary\"\n    type=\"button\"\n    (click)=\"openDialog(reviewTemplate)\"\n  >\n    Review\n  </button>\n\n  <mat-icon\n    *ngIf=\"viewType === 'icon'\"\n    class=\"cursor-pointer\"\n    matTooltip=\"Review\"\n    (click)=\"openDialog(reviewTemplate)\"\n  >\n    rate_review\n  </mat-icon>\n</ng-container>\n\n<ng-template #reviewTemplate>\n  <h3 mat-dialog-title>Review Checksheet Submission</h3>\n  <div mat-dialog-content>\n    <p>Are you sure you want to mark the checksheet submission as Reviewed?</p>\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end align-items-center\">\n    <button [disabled]=\"isWorking\" mat-flat-button mat-dialog-close>\n      Cancel\n    </button>\n    <button\n      [disabled]=\"isWorking\"\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"reviewChecksheet()\"\n    >\n      Review\n    </button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetSubmissionReviewButtonComponent, selector: "app-checksheet-submission-review-button", inputs: { submission: "submission", viewType: "viewType", requestParams: "requestParams" }, outputs: { reviewed: "reviewed" }, ngImport: i0, template: "<ng-container\n  *ngIf=\"submission?.status_id === 2 && submission?.creator_id !== user?.id\"\n>\n  <button\n    *ngIf=\"viewType === 'button'\"\n    mat-raised-button\n    color=\"primary\"\n    type=\"button\"\n    (click)=\"openDialog(reviewTemplate)\"\n  >\n    Review\n  </button>\n\n  <mat-icon\n    *ngIf=\"viewType === 'icon'\"\n    class=\"cursor-pointer\"\n    matTooltip=\"Review\"\n    (click)=\"openDialog(reviewTemplate)\"\n  >\n    rate_review\n  </mat-icon>\n</ng-container>\n\n<ng-template #reviewTemplate>\n  <h3 mat-dialog-title>Review Checksheet Submission</h3>\n  <div mat-dialog-content>\n    <p>Are you sure you want to mark the checksheet submission as Reviewed?</p>\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end align-items-center\">\n    <button [disabled]=\"isWorking\" mat-flat-button mat-dialog-close>\n      Cancel\n    </button>\n    <button\n      [disabled]=\"isWorking\"\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"reviewChecksheet()\"\n    >\n      Review\n    </button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionReviewButtonComponent, decorators: [{
             type: Component,
@@ -2427,26 +2626,26 @@ let ChecksheetSubmissionListComponent = class ChecksheetSubmissionListComponent
         this.reload();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionListComponent, deps: [{ token: i1.AlertService }, { token: i2.UntypedFormBuilder }, { token: ChecksheetSubmissionService }, { token: i1.RequestHelperService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetSubmissionListComponent, selector: "app-checksheet-submission-list", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-center align-items-center gap-3\">\n  <h3 class=\"m-0 font-weight-bold\">Checksheet Submissions</h3>\n  <app-checksheet-submission-form-button></app-checksheet-submission-form-button>\n</div>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content>\n    <form fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" [formGroup]=\"filterForm\">\n      <app-timeline-filter\n        formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\"\n        [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"\n        appearance=\"fill\"\n      ></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Status</mat-label>\n        <app-searchable-selector\n          formControlName=\"status_ids\"\n          apiUrl=\"api/checksheet-submission-statuses\"\n          [enableSearch]=\"false\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field *ngxPermissionsOnly=\"['user_read']\">\n        <mat-label>Creator</mat-label>\n        <app-searchable-selector\n          formControlName=\"creator_ids\"\n          apiUrl=\"api/users\"\n          [enableSearch]=\"true\"\n          titleField=\"name\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field *ngxPermissionsOnly=\"['user_read']\">\n        <mat-label>Reviewer</mat-label>\n        <app-searchable-selector\n          formControlName=\"reviewer_ids\"\n          apiUrl=\"api/users\"\n          [enableSearch]=\"true\"\n          titleField=\"name\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Checksheet Format</mat-label>\n        <app-searchable-selector\n          formControlName=\"format_ids\"\n          apiUrl=\"api/checksheet-formats?is_published=1\"\n          [enableSearch]=\"true\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card\n  class=\"p-0 mt-3\"\n  infiniteScroll\n  [infiniteScrollDistance]=\"2\"\n  [infiniteScrollThrottle]=\"50\"\n  (scrolled)=\"onScroll()\"\n  [fromRoot]=\"true\"\n>\n  <table\n    mat-table\n    [dataSource]=\"models\"\n    class=\"w-100\"\n    multiTemplateDataRows\n    aria-describedby=\"Checksheet Submissions\"\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\">\n        {{ i + 1 }}\n      </td>\n    </ng-container>\n\n    <!-- Checksheet Format Column -->\n    <ng-container matColumnDef=\"format.title\">\n      <th mat-header-cell *matHeaderCellDef>Checksheet Format</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.format?.title }}\n      </td>\n    </ng-container>\n\n    <!-- Creator Column -->\n    <ng-container matColumnDef=\"creator.name\">\n      <th mat-header-cell *matHeaderCellDef>Creator</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.creator?.name }}\n      </td>\n    </ng-container>\n\n    <!-- Reviewer Column -->\n    <ng-container matColumnDef=\"reviewer.name\">\n      <th mat-header-cell *matHeaderCellDef>Reviewer</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.reviewer?.name }}\n      </td>\n    </ng-container>\n\n    <!-- Status Column -->\n    <ng-container matColumnDef=\"status.title\">\n      <th mat-header-cell *matHeaderCellDef>Status</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.status?.title }}\n      </td>\n    </ng-container>\n\n    <!-- Date Column -->\n    <ng-container matColumnDef=\"date\">\n      <th mat-header-cell *matHeaderCellDef>Date</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element.date | date }}\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;\">\n        <div class=\"d-flex gap-2\">\n          <mat-icon\n            [routerLink]=\"['../checksheet-submissions-view', element?.id]\"\n            class=\"cursor-pointer\"\n          >\n            visibility\n          </mat-icon>\n\n          <mat-icon\n            *ngIf=\"element.status_id === 1\"\n            [routerLink]=\"[element?.id, 'view']\"\n            class=\"cursor-pointer\"\n          >\n            edit\n          </mat-icon>\n          <app-checksheet-submission-review-button\n            [submission]=\"element\"\n            [requestParams]=\"{ with: this.with }\"\n            (reviewed)=\"reload()\"\n          ></app-checksheet-submission-review-button>\n          <app-checksheet-submission-delete-button\n            [checksheetSubmission]=\"element\"\n            (deleted)=\"onDeleted()\"\n          ></app-checksheet-submission-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 *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n</mat-card>\n", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i15.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i9$2.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: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "component", type: ChecksheetSubmissionDeleteButtonComponent, selector: "app-checksheet-submission-delete-button", inputs: ["checksheetSubmission"], outputs: ["deleted"] }, { kind: "component", type: ChecksheetSubmissionFormButtonComponent, selector: "app-checksheet-submission-form-button", inputs: ["submittableType", "submittableId"], outputs: ["saved"] }, { kind: "component", type: ChecksheetSubmissionReviewButtonComponent, selector: "app-checksheet-submission-review-button", inputs: ["submission", "viewType", "requestParams"], outputs: ["reviewed"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChecksheetSubmissionListComponent, selector: "app-checksheet-submission-list", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-center align-items-center gap-3\">\n  <h3 class=\"m-0 font-weight-bold\">Checksheet Submissions</h3>\n  <app-checksheet-form-button></app-checksheet-form-button>\n</div>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content>\n    <form fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" [formGroup]=\"filterForm\">\n      <app-timeline-filter\n        formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\"\n        [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"\n        appearance=\"fill\"\n      ></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Status</mat-label>\n        <app-searchable-selector\n          formControlName=\"status_ids\"\n          apiUrl=\"api/checksheet-submission-statuses\"\n          [enableSearch]=\"false\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field *ngxPermissionsOnly=\"['user_read']\">\n        <mat-label>Creator</mat-label>\n        <app-searchable-selector\n          formControlName=\"creator_ids\"\n          apiUrl=\"api/users\"\n          [enableSearch]=\"true\"\n          titleField=\"name\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field *ngxPermissionsOnly=\"['user_read']\">\n        <mat-label>Reviewer</mat-label>\n        <app-searchable-selector\n          formControlName=\"reviewer_ids\"\n          apiUrl=\"api/users\"\n          [enableSearch]=\"true\"\n          titleField=\"name\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Checksheet Format</mat-label>\n        <app-searchable-selector\n          formControlName=\"format_ids\"\n          apiUrl=\"api/checksheet-formats?is_published=1\"\n          [enableSearch]=\"true\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card\n  class=\"p-0 mt-3\"\n  infiniteScroll\n  [infiniteScrollDistance]=\"2\"\n  [infiniteScrollThrottle]=\"50\"\n  (scrolled)=\"onScroll()\"\n  [fromRoot]=\"true\"\n>\n  <table\n    mat-table\n    [dataSource]=\"models\"\n    class=\"w-100\"\n    multiTemplateDataRows\n    aria-describedby=\"Checksheet Submissions\"\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\">\n        {{ i + 1 }}\n      </td>\n    </ng-container>\n\n    <!-- Checksheet Format Column -->\n    <ng-container matColumnDef=\"format.title\">\n      <th mat-header-cell *matHeaderCellDef>Checksheet Format</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.format?.title }}\n      </td>\n    </ng-container>\n\n    <!-- Creator Column -->\n    <ng-container matColumnDef=\"creator.name\">\n      <th mat-header-cell *matHeaderCellDef>Creator</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.creator?.name }}\n      </td>\n    </ng-container>\n\n    <!-- Reviewer Column -->\n    <ng-container matColumnDef=\"reviewer.name\">\n      <th mat-header-cell *matHeaderCellDef>Reviewer</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.reviewer?.name }}\n      </td>\n    </ng-container>\n\n    <!-- Status Column -->\n    <ng-container matColumnDef=\"status.title\">\n      <th mat-header-cell *matHeaderCellDef>Status</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.status?.title }}\n      </td>\n    </ng-container>\n\n    <!-- Date Column -->\n    <ng-container matColumnDef=\"date\">\n      <th mat-header-cell *matHeaderCellDef>Date</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element.date | date }}\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;\">\n        <div class=\"d-flex gap-2\">\n          <mat-icon\n            [routerLink]=\"['../checksheet-submissions-view', element?.id]\"\n            class=\"cursor-pointer\"\n          >\n            visibility\n          </mat-icon>\n\n          <mat-icon\n            *ngIf=\"element.status_id === 1\"\n            [routerLink]=\"[element?.id, 'view']\"\n            class=\"cursor-pointer\"\n          >\n            edit\n          </mat-icon>\n          <app-checksheet-submission-review-button\n            [submission]=\"element\"\n            [requestParams]=\"{ with: this.with }\"\n            (reviewed)=\"reload()\"\n          ></app-checksheet-submission-review-button>\n          <app-checksheet-submission-delete-button\n            [checksheetSubmission]=\"element\"\n            (deleted)=\"onDeleted()\"\n          ></app-checksheet-submission-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 *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n</mat-card>\n", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i7$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i15.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7$2.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: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "component", type: ChecksheetFormButtonComponent, selector: "app-checksheet-form-button", inputs: ["submittableType", "submittableId"], outputs: ["saved"] }, { kind: "component", type: ChecksheetSubmissionDeleteButtonComponent, selector: "app-checksheet-submission-delete-button", inputs: ["checksheetSubmission"], outputs: ["deleted"] }, { kind: "component", type: ChecksheetSubmissionReviewButtonComponent, selector: "app-checksheet-submission-review-button", inputs: ["submission", "viewType", "requestParams"], outputs: ["reviewed"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
 };
 ChecksheetSubmissionListComponent = __decorate([
     UntilDestroy()
 ], ChecksheetSubmissionListComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-checksheet-submission-list', template: "<div class=\"d-flex justify-content-center align-items-center gap-3\">\n  <h3 class=\"m-0 font-weight-bold\">Checksheet Submissions</h3>\n  <app-checksheet-submission-form-button></app-checksheet-submission-form-button>\n</div>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content>\n    <form fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" [formGroup]=\"filterForm\">\n      <app-timeline-filter\n        formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\"\n        [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"\n        appearance=\"fill\"\n      ></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Status</mat-label>\n        <app-searchable-selector\n          formControlName=\"status_ids\"\n          apiUrl=\"api/checksheet-submission-statuses\"\n          [enableSearch]=\"false\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field *ngxPermissionsOnly=\"['user_read']\">\n        <mat-label>Creator</mat-label>\n        <app-searchable-selector\n          formControlName=\"creator_ids\"\n          apiUrl=\"api/users\"\n          [enableSearch]=\"true\"\n          titleField=\"name\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field *ngxPermissionsOnly=\"['user_read']\">\n        <mat-label>Reviewer</mat-label>\n        <app-searchable-selector\n          formControlName=\"reviewer_ids\"\n          apiUrl=\"api/users\"\n          [enableSearch]=\"true\"\n          titleField=\"name\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Checksheet Format</mat-label>\n        <app-searchable-selector\n          formControlName=\"format_ids\"\n          apiUrl=\"api/checksheet-formats?is_published=1\"\n          [enableSearch]=\"true\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card\n  class=\"p-0 mt-3\"\n  infiniteScroll\n  [infiniteScrollDistance]=\"2\"\n  [infiniteScrollThrottle]=\"50\"\n  (scrolled)=\"onScroll()\"\n  [fromRoot]=\"true\"\n>\n  <table\n    mat-table\n    [dataSource]=\"models\"\n    class=\"w-100\"\n    multiTemplateDataRows\n    aria-describedby=\"Checksheet Submissions\"\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\">\n        {{ i + 1 }}\n      </td>\n    </ng-container>\n\n    <!-- Checksheet Format Column -->\n    <ng-container matColumnDef=\"format.title\">\n      <th mat-header-cell *matHeaderCellDef>Checksheet Format</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.format?.title }}\n      </td>\n    </ng-container>\n\n    <!-- Creator Column -->\n    <ng-container matColumnDef=\"creator.name\">\n      <th mat-header-cell *matHeaderCellDef>Creator</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.creator?.name }}\n      </td>\n    </ng-container>\n\n    <!-- Reviewer Column -->\n    <ng-container matColumnDef=\"reviewer.name\">\n      <th mat-header-cell *matHeaderCellDef>Reviewer</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.reviewer?.name }}\n      </td>\n    </ng-container>\n\n    <!-- Status Column -->\n    <ng-container matColumnDef=\"status.title\">\n      <th mat-header-cell *matHeaderCellDef>Status</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.status?.title }}\n      </td>\n    </ng-container>\n\n    <!-- Date Column -->\n    <ng-container matColumnDef=\"date\">\n      <th mat-header-cell *matHeaderCellDef>Date</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element.date | date }}\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;\">\n        <div class=\"d-flex gap-2\">\n          <mat-icon\n            [routerLink]=\"['../checksheet-submissions-view', element?.id]\"\n            class=\"cursor-pointer\"\n          >\n            visibility\n          </mat-icon>\n\n          <mat-icon\n            *ngIf=\"element.status_id === 1\"\n            [routerLink]=\"[element?.id, 'view']\"\n            class=\"cursor-pointer\"\n          >\n            edit\n          </mat-icon>\n          <app-checksheet-submission-review-button\n            [submission]=\"element\"\n            [requestParams]=\"{ with: this.with }\"\n            (reviewed)=\"reload()\"\n          ></app-checksheet-submission-review-button>\n          <app-checksheet-submission-delete-button\n            [checksheetSubmission]=\"element\"\n            (deleted)=\"onDeleted()\"\n          ></app-checksheet-submission-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 *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n</mat-card>\n", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"] }]
+            args: [{ selector: 'app-checksheet-submission-list', template: "<div class=\"d-flex justify-content-center align-items-center gap-3\">\n  <h3 class=\"m-0 font-weight-bold\">Checksheet Submissions</h3>\n  <app-checksheet-form-button></app-checksheet-form-button>\n</div>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content>\n    <form fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" [formGroup]=\"filterForm\">\n      <app-timeline-filter\n        formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\"\n        [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"\n        appearance=\"fill\"\n      ></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Status</mat-label>\n        <app-searchable-selector\n          formControlName=\"status_ids\"\n          apiUrl=\"api/checksheet-submission-statuses\"\n          [enableSearch]=\"false\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field *ngxPermissionsOnly=\"['user_read']\">\n        <mat-label>Creator</mat-label>\n        <app-searchable-selector\n          formControlName=\"creator_ids\"\n          apiUrl=\"api/users\"\n          [enableSearch]=\"true\"\n          titleField=\"name\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field *ngxPermissionsOnly=\"['user_read']\">\n        <mat-label>Reviewer</mat-label>\n        <app-searchable-selector\n          formControlName=\"reviewer_ids\"\n          apiUrl=\"api/users\"\n          [enableSearch]=\"true\"\n          titleField=\"name\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Checksheet Format</mat-label>\n        <app-searchable-selector\n          formControlName=\"format_ids\"\n          apiUrl=\"api/checksheet-formats?is_published=1\"\n          [enableSearch]=\"true\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card\n  class=\"p-0 mt-3\"\n  infiniteScroll\n  [infiniteScrollDistance]=\"2\"\n  [infiniteScrollThrottle]=\"50\"\n  (scrolled)=\"onScroll()\"\n  [fromRoot]=\"true\"\n>\n  <table\n    mat-table\n    [dataSource]=\"models\"\n    class=\"w-100\"\n    multiTemplateDataRows\n    aria-describedby=\"Checksheet Submissions\"\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\">\n        {{ i + 1 }}\n      </td>\n    </ng-container>\n\n    <!-- Checksheet Format Column -->\n    <ng-container matColumnDef=\"format.title\">\n      <th mat-header-cell *matHeaderCellDef>Checksheet Format</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.format?.title }}\n      </td>\n    </ng-container>\n\n    <!-- Creator Column -->\n    <ng-container matColumnDef=\"creator.name\">\n      <th mat-header-cell *matHeaderCellDef>Creator</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.creator?.name }}\n      </td>\n    </ng-container>\n\n    <!-- Reviewer Column -->\n    <ng-container matColumnDef=\"reviewer.name\">\n      <th mat-header-cell *matHeaderCellDef>Reviewer</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.reviewer?.name }}\n      </td>\n    </ng-container>\n\n    <!-- Status Column -->\n    <ng-container matColumnDef=\"status.title\">\n      <th mat-header-cell *matHeaderCellDef>Status</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element?.status?.title }}\n      </td>\n    </ng-container>\n\n    <!-- Date Column -->\n    <ng-container matColumnDef=\"date\">\n      <th mat-header-cell *matHeaderCellDef>Date</th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{ element.date | date }}\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;\">\n        <div class=\"d-flex gap-2\">\n          <mat-icon\n            [routerLink]=\"['../checksheet-submissions-view', element?.id]\"\n            class=\"cursor-pointer\"\n          >\n            visibility\n          </mat-icon>\n\n          <mat-icon\n            *ngIf=\"element.status_id === 1\"\n            [routerLink]=\"[element?.id, 'view']\"\n            class=\"cursor-pointer\"\n          >\n            edit\n          </mat-icon>\n          <app-checksheet-submission-review-button\n            [submission]=\"element\"\n            [requestParams]=\"{ with: this.with }\"\n            (reviewed)=\"reload()\"\n          ></app-checksheet-submission-review-button>\n          <app-checksheet-submission-delete-button\n            [checksheetSubmission]=\"element\"\n            (deleted)=\"onDeleted()\"\n          ></app-checksheet-submission-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 *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n</mat-card>\n", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"] }]
         }], ctorParameters: () => [{ type: i1.AlertService }, { type: i2.UntypedFormBuilder }, { type: ChecksheetSubmissionService }, { type: i1.RequestHelperService }] });
 
 class ChecksheetModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetModule, declarations: [ChecksheetFormatListComponent,
-            ChecksheetFormComponent,
+            ChecksheetFormatFormComponent,
             ChecksheetQuestionFormComponent,
             ChecksheetQuestionComponent,
             ChecksheetQuestionListComponent,
             ChecksheetListComponent,
-            ChecksheetSubmissionFormComponent,
-            ChecksheetViewComponent,
+            ChecksheetFormComponent,
+            ChecksheetFormatViewComponent,
             ChecksheetNodeViewComponent,
             MechanicalIssueFormComponent,
             ChecksheetReportComponent,
@@ -2454,9 +2653,9 @@ class ChecksheetModule {
             ChecksheetSubmissionDeleteButtonComponent,
             ChecksheetReviewButtonComponent,
             ChecksheetSubmissionViewComponent,
-            ChecksheetSubmissionFormButtonComponent,
             ChecksheetSubmissionListComponent,
-            ChecksheetSubmissionReviewButtonComponent], imports: [CommonModule,
+            ChecksheetSubmissionReviewButtonComponent,
+            ChecksheetListWidgetComponent], imports: [CommonModule,
             ChecksheetRoutingModule,
             SharedModule,
             InfiniteScrollModule,
@@ -2471,8 +2670,14 @@ class ChecksheetModule {
             TimelineFilterModule,
             ChecksheetSubmissionFileUploadComponent,
             ChecksheetSubmissionFilesComponent,
-            SharedModule], exports: [ChecksheetListComponent,
-            ChecksheetFormButtonComponent] });
+            SharedModule,
+            AvatarComponent,
+            ChecksheetFormatCopyButtonComponent,
+            ChecksheetFormatDeleteButtonComponent,
+            ChecksheetFormatUnpublishButtonComponent,
+            ChecksheetFormatPublishButtonComponent], exports: [ChecksheetListComponent,
+            ChecksheetFormButtonComponent,
+            ChecksheetListWidgetComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetModule, imports: [CommonModule,
             ChecksheetRoutingModule,
             SharedModule,
@@ -2488,20 +2693,25 @@ class ChecksheetModule {
             TimelineFilterModule,
             ChecksheetSubmissionFileUploadComponent,
             ChecksheetSubmissionFilesComponent,
-            SharedModule] });
+            SharedModule,
+            AvatarComponent,
+            ChecksheetFormatCopyButtonComponent,
+            ChecksheetFormatDeleteButtonComponent,
+            ChecksheetFormatUnpublishButtonComponent,
+            ChecksheetFormatPublishButtonComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         ChecksheetFormatListComponent,
-                        ChecksheetFormComponent,
+                        ChecksheetFormatFormComponent,
                         ChecksheetQuestionFormComponent,
                         ChecksheetQuestionComponent,
                         ChecksheetQuestionListComponent,
                         ChecksheetListComponent,
-                        ChecksheetSubmissionFormComponent,
-                        ChecksheetViewComponent,
+                        ChecksheetFormComponent,
+                        ChecksheetFormatViewComponent,
                         ChecksheetNodeViewComponent,
                         MechanicalIssueFormComponent,
                         ChecksheetReportComponent,
@@ -2509,9 +2719,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ChecksheetSubmissionDeleteButtonComponent,
                         ChecksheetReviewButtonComponent,
                         ChecksheetSubmissionViewComponent,
-                        ChecksheetSubmissionFormButtonComponent,
                         ChecksheetSubmissionListComponent,
-                        ChecksheetSubmissionReviewButtonComponent
+                        ChecksheetSubmissionReviewButtonComponent,
+                        ChecksheetListWidgetComponent
                     ],
                     imports: [
                         CommonModule,
@@ -2529,11 +2739,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TimelineFilterModule,
                         ChecksheetSubmissionFileUploadComponent,
                         ChecksheetSubmissionFilesComponent,
-                        SharedModule
+                        SharedModule,
+                        AvatarComponent,
+                        ChecksheetFormatCopyButtonComponent,
+                        ChecksheetFormatDeleteButtonComponent,
+                        ChecksheetFormatUnpublishButtonComponent,
+                        ChecksheetFormatPublishButtonComponent
                     ],
                     exports: [
                         ChecksheetListComponent,
-                        ChecksheetFormButtonComponent
+                        ChecksheetFormButtonComponent,
+                        ChecksheetListWidgetComponent
                     ]
                 }]
         }] });
@@ -2546,5 +2762,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ChecksheetFormButtonComponent, ChecksheetListComponent, ChecksheetModule, ChecksheetSubmissionFormButtonComponent, ChecksheetSubmissionListComponent };
+export { ChecksheetFormButtonComponent, ChecksheetListComponent, ChecksheetListWidgetComponent, ChecksheetModule, ChecksheetSubmissionListComponent };
 //# sourceMappingURL=ngx-techlify-checksheet.mjs.map