ngx-techlify-checksheet 18.0.0

package/fesm2022/ngx-techlify-checksheet.mjs

@@ -0,0 +1,2550 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, Inject, EventEmitter, Input, Output, ViewEncapsulation, NgModule } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i6$2 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 * 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 { 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 { MatInputModule } from '@angular/material/input';
+import * as i8$1 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i11 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 { 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 { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i9 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i9$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 { 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 { MatCommonModule, MatLineModule, MatNativeDateModule, MatOptionModule, MatPseudoCheckboxModule, MatRippleModule } from '@angular/material/core';
+import * as i12$1 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 { FlexLayoutModule } from '@angular/flex-layout';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTreeModule } from '@angular/material/tree';
+
+class ChecksheetFormatService extends TechlifyServiceBaseClass {
+    constructor(httpService) {
+        super(httpService, 'checksheet-formats');
+    }
+    copy(model) {
+        return this.http.post(`api/checksheet-formats-copy/${model.id}`, {});
+    }
+    unpublish(model) {
+        return this.http.put(`api/checksheet-formats/${model.id}/unpublish`, {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
+class ChecksheetFormatQuestionService extends TechlifyServiceBaseClass {
+    constructor(httpService) {
+        super(httpService, 'checksheet-format-questions');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatQuestionService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatQuestionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormatQuestionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
+const errorMessages$4 = {
+    label: {
+        required: 'Question is required'
+    },
+    type_id: {
+        required: 'Question Type is required'
+    },
+    value: {
+        required: 'Answer is required'
+    }
+};
+class ChecksheetQuestionFormComponent {
+    dialogRef;
+    data;
+    fb;
+    formValidatorService;
+    alertService;
+    checksheetFormatQuestionService;
+    updateMode;
+    questionFormGroup;
+    questionFormFirstAttempt;
+    editor;
+    isSaving = false;
+    constructor(dialogRef, data, fb, formValidatorService, alertService, checksheetFormatQuestionService) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.fb = fb;
+        this.formValidatorService = formValidatorService;
+        this.alertService = alertService;
+        this.checksheetFormatQuestionService = checksheetFormatQuestionService;
+        this.createForm();
+    }
+    /** Method to create a form **/
+    createForm() {
+        this.questionFormGroup = this.fb.group({
+            id: [''],
+            label: ['', Validators.compose([Validators.required])],
+            type_id: ['', Validators.required],
+            format_id: ['', Validators.required],
+            answers: this.fb.array([]),
+            rank: [1]
+        });
+    }
+    createAnswer() {
+        return this.fb.group({
+            id: '',
+            question_id: '',
+            value: ['', Validators.required],
+            rank: [1]
+        });
+    }
+    ngOnDestroy() {
+        this.editor.destroy();
+    }
+    ngOnInit() {
+        this.editor = new Editor();
+        if (this.data.update) {
+            this.updateMode = true;
+        }
+        this.questionFormGroup.patchValue(this.data.question);
+        if (this.data.question.type_id === 1 ||
+            this.data.question.type_id === 2 ||
+            this.data.question.type_id === 7) {
+            this.data.question.answers.forEach((answer) => {
+                const form = this.createAnswer();
+                form.patchValue(answer);
+                this.answerFormArray.push(form);
+            });
+        }
+    }
+    submit() {
+        this.questionFormFirstAttempt = true;
+        this.answerFormArray.controls.forEach((fb) => {
+            fb.markAllAsTouched();
+        });
+        if (this.questionFormGroup.valid) {
+            const model = this.questionFormGroup.value;
+            const params = { with: 'answers,type' };
+            this.isSaving = true;
+            let request = this.updateMode
+                ? this.checksheetFormatQuestionService.update(model, params)
+                : this.checksheetFormatQuestionService.store(model, params);
+            request.subscribe({
+                next: (result) => {
+                    this.isSaving = false;
+                    this.dialogRef.close(result?.item);
+                    this.alertService.addAlert('Question saved successfully!', 'success');
+                },
+                error: () => { this.isSaving = false; }
+            });
+        }
+    }
+    cancel() {
+        this.dialogRef.close();
+    }
+    get isChoiceTypeSelected() {
+        return (this.questionFormGroup.get('type_id')?.value === 1 ||
+            this.questionFormGroup.get('type_id')?.value === 2 ||
+            this.questionFormGroup.get('type_id')?.value === 7);
+    }
+    get answerFormArray() {
+        return this.questionFormGroup.get('answers');
+    }
+    addAnswer() {
+        this.answerFormArray.push(this.createAnswer());
+    }
+    questionChange(value) {
+        this.answerFormArray.clear();
+        if (value === 1 || value === 2 || value === 7) {
+            this.addAnswer();
+            this.addAnswer();
+        }
+    }
+    /**Method to evaluate form fields*/
+    isFieldValid(field, formGroup = this.questionFormGroup) {
+        return this.formValidatorService.isFieldValid(field, formGroup, this.questionFormFirstAttempt);
+    }
+    /**Method to find error in form fields*/
+    getErrorMessage(field, formGroup = this.questionFormGroup) {
+        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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetQuestionFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-checksheet-question-form', 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"] }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i2.UntypedFormBuilder }, { type: i1.FormValidatorService }, { type: i1.AlertService }, { type: ChecksheetFormatQuestionService }] });
+
+class ChecksheetSubmissionAnswerService extends TechlifyServiceBaseClass {
+    constructor(httpService) {
+        super(httpService, 'checksheet-submission-answers');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionAnswerService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionAnswerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionAnswerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], 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');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionFileService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionFileService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionFileService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], 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;
+    checksheetSubmissionFile;
+    deleted = new EventEmitter();
+    isDeleting = false;
+    constructor(matDialog, checksheetSubmissionFileService) {
+        this.matDialog = matDialog;
+        this.checksheetSubmissionFileService = checksheetSubmissionFileService;
+    }
+    /**
+     * Show delete confirmation dialog.
+     *
+     * @param templateRef
+     */
+    openDialog(templateRef) {
+        this.matDialog.open(templateRef, { width: '400px' });
+    }
+    /**
+     * Send request to delete the model.
+     */
+    deleteModel() {
+        this.isDeleting = true;
+        this.checksheetSubmissionFileService
+            .delete(this.checksheetSubmissionFile)
+            .subscribe({
+            next: () => {
+                this.isDeleting = false;
+                this.deleted.emit();
+                this.matDialog.closeAll();
+            },
+            error: () => (this.isDeleting = false)
+        });
+    }
+    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]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionFileDeleteButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-checksheet-submission-file-delete-button', standalone: true, imports: [CommonModule, MatIconModule, MaterialModule$1], 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" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: ChecksheetSubmissionFileService }], propDecorators: { checksheetSubmissionFile: [{
+                type: Input
+            }], deleted: [{
+                type: Output
+            }] } });
+
+class ChecksheetSubmissionFilesComponent extends TechlifyListingControllerInterface {
+    formBuilder;
+    checksheetSubmissionFileService;
+    submissionId;
+    questionId;
+    displayedColumns = ['No', 'File', 'Actions'];
+    constructor(formBuilder, checksheetSubmissionFileService) {
+        super();
+        this.formBuilder = formBuilder;
+        this.checksheetSubmissionFileService = checksheetSubmissionFileService;
+        this.lastPage = 0;
+        this.filterForm = this.formBuilder.group({
+            search: [''],
+            submission_ids: [''],
+            question_ids: ['']
+        });
+    }
+    ngOnInit() {
+        this.filterForm.patchValue({
+            submission_ids: this.submissionId ?? '',
+            question_ids: this.questionId ?? ''
+        }, { emitEvent: false });
+        this.listenForChanges();
+        this.loadData();
+    }
+    loadData() {
+        const params = {
+            ...this.filterForm.value,
+            perPage: this.perPage,
+            page: this.page
+        };
+        this.isWorking = true;
+        this.checksheetSubmissionFileService.index(params).subscribe({
+            next: (response) => {
+                this.models = this.models.concat(response?.data);
+                this.lastPage = response?.last_page;
+            },
+            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"] }] });
+}
+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: [{
+                type: Input
+            }], questionId: [{
+                type: Input
+            }] } });
+
+let ChecksheetQuestionComponent = class ChecksheetQuestionComponent {
+    checksheetSubmissionAnswerService;
+    questionInfo;
+    index;
+    submissionView;
+    submissionId;
+    disableInput;
+    fileEntityId;
+    editor;
+    isWorking = false;
+    isWorkingChange = new EventEmitter();
+    submittedAnswer = new FormControl('');
+    constructor(checksheetSubmissionAnswerService) {
+        this.checksheetSubmissionAnswerService = checksheetSubmissionAnswerService;
+    }
+    ngOnInit() {
+        console.log(this.disableInput, this.submissionView);
+        this.editor = new Editor();
+        this.submittedAnswer.valueChanges
+            .pipe(debounceTime(1000))
+            .subscribe((val) => {
+            if (this.questionInfo?.type_id === 1) {
+                this.saveAnswer({ answer_id: val });
+            }
+            else {
+                this.saveAnswer({ details: val });
+            }
+        });
+        if (this.submissionView) {
+            // load the answer for current submission question
+            this.loadAnswer();
+        }
+        this.fileEntityId = this.questionInfo.id;
+    }
+    onMultiSelectAnswerChange() {
+        const answerIds = this.questionInfo.answers
+            .filter((item) => item.isChecked)
+            .map((item) => item.id);
+        this.saveAnswer({ answer_ids: answerIds });
+    }
+    onMultiSelectYesNoAnswerChange(event, answer) {
+        this.saveAnswer({ answer_id: answer?.id, details: event.value });
+    }
+    getSubmittedMCQAnswer(answers = [], answer_id = null) {
+        if (answer_id) {
+            const submittedAnswer = answers.find((x) => x.id === answer_id);
+            if (submittedAnswer) {
+                return submittedAnswer?.value || '';
+            }
+        }
+        return '';
+    }
+    getSubmittedMSQAnswer() {
+        return (this.questionInfo?.answers)
+            .filter((answer) => answer?.isChecked)
+            ?.map((answer) => answer.value)
+            ?.join(', ');
+    }
+    loadAnswer() {
+        const params = {
+            submission_ids: this.submissionId,
+            question_ids: this.questionInfo?.id
+        };
+        this.isWorking = true;
+        this.checksheetSubmissionAnswerService.index(params).subscribe({
+            next: (response) => {
+                this.isWorking = false;
+                const answers = response?.data;
+                if (this.questionInfo?.type_id === 1 && answers?.length > 0) {
+                    this.submittedAnswer.setValue(answers[0]?.answer_id, {
+                        emitEvent: false
+                    });
+                }
+                else if (this.questionInfo?.type_id === 2) {
+                    this.submittedAnswer.setValue(answers, { emitEvent: false });
+                    this.questionInfo.answers = (this.questionInfo?.answers).map((answer) => {
+                        return {
+                            ...answer,
+                            isChecked: answers.some((item) => item.answer_id === answer.id)
+                        };
+                    });
+                }
+                else if ((this.questionInfo?.type_id === 3 ||
+                    this.questionInfo?.type_id === 4 ||
+                    this.questionInfo?.type_id === 5 ||
+                    this.questionInfo?.type_id === 6) &&
+                    answers?.length > 0) {
+                    this.submittedAnswer.setValue(answers[0].details || '', {
+                        emitEvent: false
+                    });
+                }
+                else if (this.questionInfo?.type_id === 7) {
+                    this.submittedAnswer.setValue(answers, { emitEvent: false });
+                    this.questionInfo.answers = (this.questionInfo?.answers).map((answer) => {
+                        const result = answers.find((item) => item.answer_id === answer.id);
+                        return {
+                            ...answer,
+                            selectedValue: result ? Boolean(Number(result?.details)) : null
+                        };
+                    });
+                }
+            },
+            error: () => (this.isWorking = false)
+        });
+    }
+    /**
+     * Send request to save the question answers.
+     *
+     * @param answerData
+     * @private
+     */
+    saveAnswer(answerData) {
+        const data = {
+            question_id: this.questionInfo?.id,
+            submission_id: this.submissionId,
+            answer_id: answerData?.answer_id,
+            answer_ids: answerData?.answer_ids,
+            question_type_id: this.questionInfo?.type_id,
+            details: answerData?.details
+        };
+        this.isWorking = true;
+        this.checksheetSubmissionAnswerService.store(data).subscribe({
+            next: () => {
+                this.isWorking = false;
+            },
+            error: () => (this.isWorking = false)
+        });
+    }
+    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 });
+};
+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"] }]
+        }], ctorParameters: () => [{ type: ChecksheetSubmissionAnswerService }], propDecorators: { questionInfo: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], submissionView: [{
+                type: Input
+            }], submissionId: [{
+                type: Input
+            }], disableInput: [{
+                type: Input
+            }], isWorking: [{
+                type: Input
+            }], isWorkingChange: [{
+                type: Output
+            }] } });
+
+class ChecksheetQuestionListComponent {
+    spinnerService;
+    alertService;
+    dialog;
+    dataManager;
+    checksheet = {};
+    checksheetChange = new EventEmitter();
+    submission;
+    disableInput;
+    questions = [];
+    constructor(spinnerService, alertService, dialog, dataManager) {
+        this.spinnerService = spinnerService;
+        this.alertService = alertService;
+        this.dialog = dialog;
+        this.dataManager = dataManager;
+    }
+    ngOnInit() {
+        this.questions = this.checksheet?.questions || [];
+    }
+    onScroll() { }
+    editQuestion(question, index) {
+        const dialogRef = this.dialog.open(ChecksheetQuestionFormComponent, {
+            width: '800px',
+            data: {
+                update: true,
+                question: question
+            },
+            autoFocus: false
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                question = result;
+                this.questions[index] = question;
+            }
+        });
+    }
+    addQuestion() {
+        const dialogRef = this.dialog.open(ChecksheetQuestionFormComponent, {
+            width: '800px',
+            data: {
+                question: {
+                    format_id: this.checksheet.id
+                }
+            },
+            autoFocus: false
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.questions.push(result);
+            }
+        });
+    }
+    async moveQuestionUp(index) {
+        if (index < this.questions.length) {
+            this.spinnerService.show();
+            try {
+                if (index <= 0) {
+                    return;
+                }
+                const q1 = this.questions[index];
+                const q2 = this.questions[index - 1];
+                await this.dataManager.PUT(`api/checksheet-format-questions/${q1.id}`, {
+                    ...q1,
+                    rank: index - 1
+                });
+                await this.dataManager.PUT(`api/checksheet-format-questions/${q2.id}`, {
+                    ...q2,
+                    rank: index
+                });
+                this.questions[index] = q2;
+                this.questions[index - 1] = q1;
+            }
+            catch (error) {
+                this.alertService.addAlert('Unable to move question, try later', 'warn');
+            }
+            finally {
+                this.spinnerService.hide();
+            }
+        }
+    }
+    async moveQuestionDown(index) {
+        if (index < this.questions.length) {
+            this.spinnerService.show();
+            try {
+                const q1 = this.questions[index];
+                const q2 = this.questions[index + 1];
+                await this.dataManager.PUT(`api/checksheet-format-questions/${q1.id}`, {
+                    ...q1,
+                    rank: index + 1
+                });
+                await this.dataManager.PUT(`api/checksheet-format-questions/${q2.id}`, {
+                    ...q2,
+                    rank: index
+                });
+                this.questions[index] = q2;
+                this.questions[index + 1] = q1;
+            }
+            catch (error) {
+                this.alertService.addAlert('Unable to move question, try later', 'warn');
+            }
+            finally {
+                this.spinnerService.hide();
+            }
+        }
+    }
+    deleteQuestion(question) {
+        const dialogRef = this.dialog.open(ActionPopupComponent, {
+            width: '400px',
+            data: {
+                title: 'Delete Question',
+                message: `Are you sure to delete the question?`
+            },
+            autoFocus: false
+        });
+        dialogRef.afterClosed().subscribe(async (result) => {
+            if (result) {
+                //Action confirmed
+                try {
+                    this.spinnerService.show();
+                    await this.dataManager.DELETE(`api/checksheet-format-questions/${question.id}`);
+                    this.questions = this.questions.filter((x) => x.id !== question.id);
+                }
+                catch (error) {
+                    this.alertService.addAlert('Unable to delete question, try later', 'warn');
+                }
+                finally {
+                    this.spinnerService.hide();
+                }
+            }
+        });
+    }
+    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"] }] });
+}
+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: [{
+                type: Input
+            }], checksheetChange: [{
+                type: Output
+            }], submission: [{
+                type: Input
+            }], disableInput: [{
+                type: Input
+            }] } });
+
+const errorMessages$3 = {
+    title: {
+        required: 'The title is required.'
+    }
+};
+class ChecksheetFormComponent {
+    formValidatorService;
+    fb;
+    spinnerService;
+    alertService;
+    location;
+    errorHandler;
+    dataManager;
+    dialog;
+    route;
+    checksheetFormatService;
+    checksheetForm;
+    updateMode;
+    checksheet;
+    isSaving = false;
+    id;
+    disableInput;
+    isLoading = false;
+    constructor(formValidatorService, fb, spinnerService, alertService, location, errorHandler, dataManager, dialog, 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']);
+        this.createForm();
+    }
+    ngOnInit() {
+        if (this.disableInput) {
+            this.checksheetForm.disable();
+        }
+        if (this.id) {
+            this.updateMode = true;
+            this.loadChecksheetFormat();
+        }
+    }
+    /**
+     * Create a check-sheet form.
+     * @private
+     */
+    createForm() {
+        this.checksheetForm = this.fb.group({
+            id: [''],
+            title: ['', Validators.required]
+        });
+    }
+    /**Method to evaluate form fields*/
+    isFieldValid(field) {
+        return this.formValidatorService.isFieldValid(field, this.checksheetForm);
+    }
+    /**Method to find error in form fields*/
+    getErrorMessage(field) {
+        return this.formValidatorService.getErrorMessage(field, this.checksheetForm, errorMessages$3);
+    }
+    submit() {
+        this.checksheetForm.markAllAsTouched();
+        if (this.checksheetForm.invalid) {
+            this.alertService.addAlert('Please check the form for errors.', 'error');
+            return;
+        }
+        const model = { ...this.checksheetForm.value };
+        this.isSaving = true;
+        let request = this.updateMode
+            ? this.checksheetFormatService.update(model)
+            : this.checksheetFormatService.store(model);
+        request.subscribe({
+            next: (result) => {
+                this.isSaving = false;
+                if (!this.updateMode) {
+                    this.checksheet = result.item;
+                    this.checksheetForm.patchValue({ ...this.checksheet });
+                }
+                this.updateMode = true;
+                this.alertService.addAlert('Checksheet saved successfully', 'success');
+            },
+            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({
+            next: (result) => {
+                this.isLoading = false;
+                this.checksheetForm.patchValue(result?.item);
+                this.checksheet = 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetFormComponent, 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: [{
+                type: Input
+            }] } });
+
+class ChecksheetFormatListComponent extends TechlifyListingControllerInterface {
+    dialog;
+    service;
+    alertService;
+    displayedColumns = [
+        'index',
+        'title',
+        'questions',
+        'submissions',
+        'is_published',
+        'actions'
+    ];
+    constructor(dialog, service, alertService) {
+        super();
+        this.dialog = dialog;
+        this.service = service;
+        this.alertService = alertService;
+    }
+    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 = {
+            sort_by: 'created_at|DESC',
+            withCount: 'questions,submissions',
+            page: this.page,
+            perPage: this.perPage,
+        };
+        this.service.index(params).subscribe({
+            next: (response) => {
+                this.models = this.models?.concat(response?.data);
+                this.lastPage = response?.last_page;
+                this.isWorking = false;
+            },
+            error: () => {
+                this.isWorking = false;
+            },
+        });
+    }
+    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"] }] });
+}
+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"] }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: ChecksheetFormatService }, { type: i1.AlertService }] });
+
+class ChecksheetService extends TechlifyServiceBaseClass {
+    dataManager;
+    constructor(httpService, dataManager) {
+        super(httpService, 'checksheets');
+        this.dataManager = dataManager;
+    }
+    /**
+     * Sent request to submit the Checksheet.
+     *
+     * @param submissionId
+     * @param params
+     */
+    submit(submissionId, params) {
+        return this.http.put('api/checksheets/' + submissionId + '/submit', {}, { params });
+    }
+    /**
+     * Send request to submit the Checksheet review.
+     *
+     * @param submissionId
+     * @param params
+     */
+    review(submissionId, params) {
+        return this.http.put('api/checksheets/' + submissionId + '/review', {}, { params });
+    }
+    async getMechanicalIssues(submissionId) {
+        return this.dataManager.GET(`api/checksheets/` + submissionId + `/mechanical-issues`);
+    }
+    async createMechanicalIssues(submissionId, data) {
+        return this.dataManager.POST(`api/checksheets/` + submissionId + `/mechanical-issues`, data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetService, deps: [{ token: i1.HttpService }, { token: i1.DataManager }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }, { type: i1.DataManager }] });
+
+class ChecksheetSubmissionFormComponent extends TechlifyFormComponentInterface {
+    fb;
+    checksheetSubmissionService;
+    alertService;
+    dialog;
+    submittableType;
+    submittableId;
+    cancelled = new EventEmitter();
+    saved = new EventEmitter();
+    updateMode;
+    checksheetSubmission;
+    isSaving = false;
+    constructor(formValidatorService, fb, checksheetSubmissionService, alertService, dialog) {
+        super(formValidatorService);
+        this.fb = fb;
+        this.checksheetSubmissionService = checksheetSubmissionService;
+        this.alertService = alertService;
+        this.dialog = dialog;
+        this.errorMessages = {
+            date: {
+                required: 'The date field is required.'
+            },
+            format_id: {
+                required: 'The checksheet format is required.'
+            }
+        };
+        this.createForm();
+    }
+    createForm() {
+        this.form = this.fb.group({
+            id: [''],
+            date: ['', Validators.compose([Validators.required, DateValidator()])],
+            format_id: ['', Validators.required],
+            submittable_type: ['fixed-asset'],
+            submittable_id: ['', Validators.required],
+            details: ['']
+        });
+    }
+    ngOnInit() {
+        // Set the submittable type and id and make it readonly
+        if (this.submittableType && this.submittableId) {
+            this.form.patchValue({
+                submittable_type: this.submittableType,
+                submittable_id: this.submittableId
+            });
+        }
+        // Set the Checksheet to form
+        if (this.checksheetSubmission) {
+            this.updateMode = true;
+            this.form.patchValue({
+                ...this.checksheetSubmission,
+                date: new Date(this.checksheetSubmission?.date)
+            });
+        }
+    }
+    submit() {
+        if (this.form.invalid) {
+            this.alertService.addAlert('Please check the form for errors', 'error');
+        }
+        const data = { ...this.form.value };
+        const request = this.updateMode
+            ? this.checksheetSubmissionService.update(data)
+            : this.checksheetSubmissionService.store(data);
+        this.isSaving = true;
+        request.subscribe({
+            next: (response) => {
+                this.isSaving = false;
+                this.saved.emit(response?.item);
+            },
+            error: () => {
+                this.isSaving = false;
+            }
+        });
+    }
+    submitChecksheet() {
+        const dialogRef = this.dialog.open(ActionPopupComponent, {
+            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?`
+            },
+            autoFocus: false
+        });
+        dialogRef.afterClosed().subscribe(async (result) => {
+            if (result) {
+                // Action confirmed
+                this.checksheetSubmissionService
+                    .submit(this.checksheetSubmission?.id)
+                    .subscribe({
+                    next: (response) => {
+                        this.alertService.addAlert('The Checksheet submitted!', 'success');
+                        this.saved.emit(response?.item);
+                    }
+                });
+            }
+        });
+    }
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionFormComponent, 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" }]
+        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2.UntypedFormBuilder }, { type: ChecksheetService }, { type: i1.AlertService }, { type: i1$1.MatDialog }], propDecorators: { submittableType: [{
+                type: Input
+            }], submittableId: [{
+                type: Input
+            }], cancelled: [{
+                type: Output
+            }], saved: [{
+                type: Output
+            }], checksheetSubmission: [{
+                type: Input
+            }] } });
+
+const errorMessages$2 = {
+    date_from: {
+        required: 'Start date is required',
+        invalidDate: 'Invalid date'
+    },
+    date_to: {
+        required: 'End date is required',
+        invalidDate: 'Invalid date'
+    }
+};
+let ChecksheetReportComponent = class ChecksheetReportComponent {
+    spinnerService;
+    alertService;
+    router;
+    dataManager;
+    currentUserService;
+    dialog;
+    formValidator;
+    fb;
+    datePipe;
+    checksheetSubmissionList = [];
+    pageEvent = { page: 1, perPage: 25, lastPage: 1 };
+    filters;
+    vehicle;
+    displayedColumns = [
+        'index',
+        'date',
+        'vehicle',
+        'created_at',
+        'reviewer.name',
+        'mechanical_issues',
+        'notes'
+    ];
+    filterFormGroup;
+    constructor(spinnerService, alertService, router, dataManager, currentUserService, dialog, formValidator, fb, datePipe) {
+        this.spinnerService = spinnerService;
+        this.alertService = alertService;
+        this.router = router;
+        this.dataManager = dataManager;
+        this.currentUserService = currentUserService;
+        this.dialog = dialog;
+        this.formValidator = formValidator;
+        this.fb = fb;
+        this.datePipe = datePipe;
+        this.filters = {};
+        this.filters.sort_by = 'created_at|DESC';
+        this.createForm();
+    }
+    get excelData() {
+        if (this.checksheetSubmissionList.length <= 0) {
+            return [];
+        }
+        return this.checksheetSubmissionList.map((item) => {
+            return {
+                Date: item?.date ? new Date(item?.date).toDateString() : '',
+                Vehicle: item?.vehicle?.title_field,
+                Driver: item?.creator?.name,
+                'Time Submitted': item?.created_at
+                    ? this.datePipe.transform(new Date(item?.created_at), 'yyyy-MM-dd HH:mm')
+                    : '',
+                'Verified By ': item?.reviewer?.name,
+                'Mechanical Issues': (item?.mechanical_issues || []).reduce((a, v) => `${a}${v?.details_without_html}, `, ''),
+                Notes: item?.comments
+            };
+        });
+    }
+    ngOnInit() {
+        this.filterFormGroup.valueChanges
+            .pipe(debounceTime(500), untilDestroyed(this))
+            .subscribe((x) => {
+            let model = this.filterFormGroup.value;
+            model.date_from = model.date_from
+                ? this.datePipe.transform(model.date_from, 'yyyy-MM-dd')
+                : '';
+            model.date_to = model.date_to
+                ? this.datePipe.transform(model.date_to, 'yyyy-MM-dd')
+                : '';
+            this.filters = { ...this.filters, ...model };
+            this.reload();
+        });
+        this.fetchChecksheetSubmissionsDetails();
+    }
+    createForm() {
+        this.filterFormGroup = this.fb.group({
+            date_from: ['', Validators.compose([DateValidator()])],
+            date_to: ['', Validators.compose([DateValidator()])],
+            status_id: [''],
+            model_id: [''],
+            creator_id: [''],
+            reviewer_id: [''],
+            checksheet_format_id: [''],
+            driver_assigned_customer_id: [''],
+            vehicle_assigned_customer_id: ['']
+        });
+    }
+    get currentUserId() {
+        return this.currentUserService.getUser().id;
+    }
+    createChecksheetSubmission() {
+        const dialogRef = this.dialog.open(ChecksheetSubmissionFormComponent, {
+            width: '400px',
+            data: {
+                submission: {},
+                vehicle: this.vehicle
+            },
+            autoFocus: false
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                //Action confirmed
+                this.editChecksheetSubmission(result);
+            }
+        });
+    }
+    deactivateChecksheetSubmission(checksheetSubmission) {
+        const dialogRef = this.dialog.open(ActionPopupComponent, {
+            width: '400px',
+            data: {
+                title: 'Deactivate Submissions',
+                message: `Are you sure to proceed deactivate?`
+            },
+            autoFocus: false
+        });
+        dialogRef.afterClosed().subscribe(async (result) => {
+            if (result) {
+                //Action confirmed
+                try {
+                    this.spinnerService.show();
+                    await this.dataManager.DELETE(`api/checksheets/${checksheetSubmission.id}`);
+                    this.checksheetSubmissionList = this.checksheetSubmissionList.filter((x) => x.id !== checksheetSubmission.id);
+                }
+                catch (error) {
+                    this.alertService.addAlert('Unable to deactivate Checksheet, try later', 'warn');
+                }
+                finally {
+                    this.spinnerService.hide();
+                }
+            }
+        });
+    }
+    editChecksheetSubmission(checksheetSubmission) {
+        this.router.navigate([
+            'vehicles/checksheets/checksheets/view',
+            checksheetSubmission.id
+        ], { queryParams: { is_vehicle_view: true } });
+    }
+    viewChecksheetSubmission(checksheetSubmission) {
+        this.router.navigate([
+            'vehicles/checksheets/checksheets-view',
+            checksheetSubmission.id
+        ]);
+    }
+    reviewChecksheetSubmission(checksheetSubmission) {
+        this.router.navigate([
+            'vehicles/checksheets/checksheets/review',
+            checksheetSubmission.id
+        ]);
+    }
+    onScroll() {
+        if (this.pageEvent.page < this.pageEvent.lastPage) {
+            this.pageEvent.page += 1;
+        }
+        this.fetchChecksheetSubmissionsDetails();
+    }
+    async fetchChecksheetSubmissionsDetails() {
+        this.spinnerService.show();
+        if (this.vehicle) {
+            this.filters.model_id = this.vehicle.id;
+        }
+        try {
+            const result = await this.dataManager.GET(`api/checksheets`, {
+                ...this.pageEvent,
+                ...this.filters
+            });
+            this.checksheetSubmissionList = this.checksheetSubmissionList.concat(result.data);
+            this.pageEvent.page = result.current_page;
+            this.pageEvent.lastPage = result.last_page;
+        }
+        catch (error) {
+            this.alertService.addAlert('Unable to get Checksheets, try later', 'warn');
+        }
+        finally {
+            this.spinnerService.hide();
+        }
+    }
+    reload() {
+        this.pageEvent = { page: 1, perPage: 25, lastPage: 1 };
+        this.checksheetSubmissionList = [];
+        this.fetchChecksheetSubmissionsDetails();
+    }
+    getFieldValue(field) {
+        return this.filterFormGroup.get(field)?.value;
+    }
+    resetFieldValue(field, event) {
+        event.stopPropagation();
+        this.filterFormGroup.get(field)?.setValue('');
+    }
+    /** Method to evaluate form fields*/
+    isFieldValid(field) {
+        return this.formValidator.isFieldValid(field, this.filterFormGroup, true);
+    }
+    /** Method to find error in form fields*/
+    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" }] });
+};
+ChecksheetReportComponent = __decorate([
+    UntilDestroy()
+], ChecksheetReportComponent);
+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: [{
+                type: Input
+            }] } });
+
+class ChecksheetFormButtonComponent {
+    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 form.
+     *
+     * @param templateRef
+     */
+    openForm(templateRef) {
+        this.matDialog.open(templateRef, { width: '500px' });
+    }
+    /**
+     * Handle Checksheet save event.
+     *
+     * @param checksheetSubmission
+     */
+    onSaved(checksheetSubmission) {
+        this.saved.emit(checksheetSubmission);
+        this.matDialog.closeAll();
+        this.alertService.addAlert('The Checksheet is saved successfully!', 'success');
+        this.router.navigate([
+            'fixed-assets/checksheets/checksheets',
+            checksheetSubmission?.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"] }] });
+}
+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: [{
+                type: Input
+            }], submittableId: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }] } });
+
+class ChecksheetSubmissionDeleteButtonComponent {
+    matDialog;
+    checksheetSubmissionService;
+    checksheetSubmission;
+    deleted = new EventEmitter();
+    isDeleting = false;
+    constructor(matDialog, checksheetSubmissionService) {
+        this.matDialog = matDialog;
+        this.checksheetSubmissionService = checksheetSubmissionService;
+    }
+    /**
+     * Show delete confirmation dialog.
+     *
+     * @param templateRef
+     */
+    openDialog(templateRef) {
+        this.matDialog.open(templateRef, { width: '400px' });
+    }
+    /**
+     * Send request to delete the model.
+     */
+    deleteModel() {
+        this.isDeleting = true;
+        this.checksheetSubmissionService
+            .delete(this.checksheetSubmission)
+            .subscribe({
+            next: () => {
+                this.isDeleting = false;
+                this.deleted.emit();
+                this.matDialog.closeAll();
+            },
+            error: () => (this.isDeleting = false)
+        });
+    }
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionDeleteButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-checksheet-submission-delete-button', 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" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: ChecksheetService }], propDecorators: { checksheetSubmission: [{
+                type: Input
+            }], deleted: [{
+                type: Output
+            }] } });
+
+class ChecksheetReviewButtonComponent {
+    matDialog;
+    credentialsService;
+    checksheetSubmissionService;
+    alertService;
+    submission;
+    viewType = 'icon';
+    requestParams;
+    reviewed = new EventEmitter();
+    user;
+    isWorking = false;
+    constructor(matDialog, credentialsService, checksheetSubmissionService, alertService) {
+        this.matDialog = matDialog;
+        this.credentialsService = credentialsService;
+        this.checksheetSubmissionService = checksheetSubmissionService;
+        this.alertService = alertService;
+        this.user = this.credentialsService.credentials?.user;
+    }
+    /**
+     * Show the review dialog.
+     *
+     * @param templateRef
+     */
+    openDialog(templateRef) {
+        this.matDialog.open(templateRef, { width: '400px' });
+    }
+    /**
+     * Review checksheet.
+     */
+    reviewChecksheet() {
+        this.isWorking = true;
+        this.checksheetSubmissionService
+            .review(this.submission?.id, this.requestParams)
+            .subscribe({
+            next: (response) => {
+                this.matDialog.closeAll();
+                this.isWorking = false;
+                this.reviewed.next(response?.item);
+                this.alertService.addAlert('The Checksheet marked as reviewed.', 'success');
+            },
+            error: () => (this.isWorking = false)
+        });
+    }
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetReviewButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-checksheet-review-button', 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" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i1.CredentialsService }, { type: ChecksheetService }, { type: i1.AlertService }], propDecorators: { submission: [{
+                type: Input
+            }], viewType: [{
+                type: Input
+            }], requestParams: [{
+                type: Input
+            }], reviewed: [{
+                type: Output
+            }] } });
+
+let ChecksheetListComponent = class ChecksheetListComponent extends TechlifyListingControllerInterface {
+    alertService;
+    fb;
+    checksheetSubmissionService;
+    requestHelperService;
+    activatedRoute;
+    displayedColumns = [
+        'index',
+        'date',
+        'format.title',
+        'for',
+        'creator.name',
+        'reviewer.name',
+        'status.title',
+        'actions'
+    ];
+    with = 'format,creator,reviewer,status,submittable';
+    constructor(alertService, fb, checksheetSubmissionService, requestHelperService, activatedRoute) {
+        super();
+        this.alertService = alertService;
+        this.fb = fb;
+        this.checksheetSubmissionService = checksheetSubmissionService;
+        this.requestHelperService = requestHelperService;
+        this.activatedRoute = activatedRoute;
+        this.createForm();
+    }
+    ngOnInit() {
+        this.updateFormWithQueryParams();
+        this.subscribeToFormChanges();
+        this.subscribeToRouteChanges();
+    }
+    createForm() {
+        this.filterForm = this.fb.group({
+            search: [''],
+            duration: [Timeline.ALL],
+            date_from: [''],
+            date_to: [''],
+            status_ids: [''],
+            creator_ids: [''],
+            reviewer_ids: [''],
+            format_ids: [''],
+            sort_by: ['created_at|DESC'],
+            with: [this.with]
+        });
+    }
+    loadData() {
+        this.isWorking = true;
+        const params = {
+            ...this.requestHelperService.convertToFormData(this.filterForm.value),
+            perPage: this.perPage,
+            page: this.page
+        };
+        this.checksheetSubmissionService.index(params).subscribe({
+            next: (response) => {
+                this.models = this.models.concat(response?.data);
+                this.lastPage = response?.last_page;
+                this.isWorking = false;
+            },
+            error: () => (this.isWorking = false)
+        });
+    }
+    onDurationChange(timelineValue) {
+        let { date_to, date_from } = timelineValue;
+        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') : ''
+        });
+    }
+    /**
+     * Handle Checksheet delete event.
+     */
+    onDeleted() {
+        this.alertService.addAlert('Checksheet deleted successfully!', 'success');
+        this.reload();
+    }
+    updateFormWithQueryParams() {
+        this.requestHelperService.updateFormWithQueryParams(this.filterForm, {});
+    }
+    subscribeToFormChanges() {
+        this.filterForm.valueChanges.pipe(debounceTime$1(800)).subscribe({
+            next: () => {
+                this.requestHelperService.updateQueryParams(this.requestHelperService.convertToFormData(this.filterForm.value));
+            }
+        });
+    }
+    subscribeToRouteChanges() {
+        this.activatedRoute.queryParams
+            .pipe(debounceTime$1(500), distinctUntilChanged())
+            .subscribe(() => {
+            this.reload();
+        });
+    }
+    onSortChange(sort) {
+        let { active, direction } = sort;
+        if (!active)
+            active = 'id';
+        if (!direction)
+            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" }] });
+};
+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 }] });
+
+class ChecksheetNodeViewComponent {
+    location;
+    route;
+    checksheetSubmissionService;
+    submission;
+    submissionId;
+    isLoading = false;
+    with = 'format.questions.answers,format.questions.type,creator,reviewer,status';
+    constructor(location, route, checksheetSubmissionService) {
+        this.location = location;
+        this.route = route;
+        this.checksheetSubmissionService = checksheetSubmissionService;
+        this.submissionId = parseInt(this.route.snapshot.params?.['submissionId']);
+    }
+    ngOnInit() {
+        if (this.submissionId) {
+            this.loadSubmission();
+        }
+    }
+    loadSubmission() {
+        const params = {
+            with: this.with
+        };
+        this.isLoading = true;
+        this.checksheetSubmissionService.show(this.submissionId, params).subscribe({
+            next: (response) => {
+                this.submission = response?.item;
+                this.isLoading = false;
+            },
+            error: () => (this.isLoading = false)
+        });
+    }
+    /**
+     * On Checksheet reviewed.
+     *
+     * @param model
+     */
+    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" }] });
+}
+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 }] });
+
+const errorMessages$1 = {
+    date: {
+        required: 'Date is required',
+        invalid: 'Invalid date'
+    },
+    model_id: {
+        required: 'Vehicle is required'
+    },
+    checksheet_format_id: {
+        required: 'Checksheet Format is required'
+    },
+    status_id: {
+        required: 'Status is required'
+    }
+};
+class ChecksheetViewComponent {
+    formValidatorService;
+    fb;
+    spinnerService;
+    alertService;
+    location;
+    errorHandler;
+    dataManager;
+    dialog;
+    route;
+    checksheetSubmissionService;
+    checksheetSubmissionForm;
+    submission;
+    selectedFormat;
+    submissionId;
+    constructor(formValidatorService, fb, spinnerService, alertService, location, errorHandler, dataManager, dialog, route, checksheetSubmissionService) {
+        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.checksheetSubmissionService = checksheetSubmissionService;
+        this.submissionId = parseInt(this.route.snapshot.params['submissionId']);
+        this.createForm();
+    }
+    ngOnInit() {
+        if (this.submissionId) {
+            const params = {
+                with: 'format.questions.type,format.questions.answers'
+            };
+            this.checksheetSubmissionService
+                .show(this.submissionId, params)
+                .subscribe({
+                next: (response) => {
+                    this.submission = response?.item;
+                    this.selectedFormat = this.submission?.format;
+                }
+            });
+        }
+    }
+    createForm() {
+        this.checksheetSubmissionForm = this.fb.group({
+            id: [''],
+            date: ['', Validators.compose([Validators.required, DateValidator()])],
+            reviewer_id: [''],
+            model_id: ['', Validators.required],
+            model: ['vehicle'],
+            status_id: [''],
+            comments: [''],
+            checksheet_format_id: ['', Validators.required]
+        });
+    }
+    redirectBack() {
+        this.location.back();
+    }
+    /**Method to evaluate form fields*/
+    isFieldValid(field) {
+        return this.formValidatorService.isFieldValid(field, this.checksheetSubmissionForm);
+    }
+    /**Method to find error in form fields*/
+    getErrorMessage(field) {
+        return this.formValidatorService.getErrorMessage(field, this.checksheetSubmissionForm, errorMessages$1);
+    }
+    async submit() {
+        if (this.checksheetSubmissionForm.valid) {
+            this.spinnerService.show();
+            let result;
+            const model = this.checksheetSubmissionForm.value;
+            const submission = (await this.dataManager.GET(`api/checksheets/${this.submission.id}`)).item;
+            //Submission Validation for MSQYN
+            let validSubmission = true;
+            (submission.format.questions || [])
+                .filter((question) => question.type_id === 7)
+                .forEach((question) => {
+                if (question?.submitted_answers == null ||
+                    (question?.answers || []).length >
+                        (question?.submitted_answer?.msq_answer || []).length) {
+                    this.alertService.addAlert(`Answer all the required Yes/No Question`, 'warn');
+                    validSubmission = false;
+                    return;
+                }
+            });
+            if (!validSubmission) {
+                return;
+            }
+            try {
+                result = await this.dataManager.PUT(`api/checksheets/${model.id}`, model);
+                this.alertService.addAlert('Checksheet saved successfully', 'success');
+            }
+            catch (error) {
+                this.errorHandler.handleError(error, 'Unable to save Checksheet, try later');
+            }
+            finally {
+                this.spinnerService.hide();
+            }
+        }
+    }
+    onSaved() {
+        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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetViewComponent, 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 }] });
+
+const errorMessages = {
+    date: {
+        required: 'Date is required',
+        invalid: 'Invalid date'
+    },
+    model_id: {
+        required: 'Vehicle is required'
+    },
+    checksheet_format_id: {
+        required: 'Checksheet Format is required'
+    },
+    status_id: {
+        required: 'Status is required'
+    }
+};
+class ChecksheetSubmissionViewComponent {
+    formValidatorService;
+    fb;
+    spinnerService;
+    alertService;
+    location;
+    errorHandler;
+    dataManager;
+    dialog;
+    route;
+    service;
+    checksheetSubmissionForm;
+    submission;
+    selectedFormat;
+    submissionId;
+    constructor(formValidatorService, fb, spinnerService, alertService, location, errorHandler, dataManager, dialog, route, service) {
+        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.service = service;
+        this.submissionId = parseInt(this.route.snapshot.params['submissionId']);
+        this.createForm();
+    }
+    ngOnInit() {
+        if (this.submissionId) {
+            const params = {
+                with: 'format.questions.type,format.questions.answers'
+            };
+            this.service
+                .show(this.submissionId, params)
+                .subscribe({
+                next: (response) => {
+                    this.submission = response?.item;
+                    this.selectedFormat = this.submission?.format;
+                }
+            });
+        }
+    }
+    redirectBack() {
+        this.location.back();
+    }
+    /**Method to evaluate form fields*/
+    isFieldValid(field) {
+        return this.formValidatorService.isFieldValid(field, this.checksheetSubmissionForm);
+    }
+    /**Method to find error in form fields*/
+    getErrorMessage(field) {
+        return this.formValidatorService.getErrorMessage(field, this.checksheetSubmissionForm, errorMessages);
+    }
+    async submit() {
+        if (this.checksheetSubmissionForm.valid) {
+            this.spinnerService.show();
+            let result;
+            const model = this.checksheetSubmissionForm.value;
+            const submission = (await this.dataManager.GET(`api/checksheet-submissions/${this.submission.id}`)).item;
+            //Submission Validation for MSQYN
+            let validSubmission = true;
+            (submission.format.questions || [])
+                .filter((question) => question.type_id === 7)
+                .forEach((question) => {
+                if (question?.submitted_answers == null ||
+                    (question?.answers || []).length >
+                        (question?.submitted_answer?.msq_answer || []).length) {
+                    this.alertService.addAlert(`Answer all the required Yes/No Question`, 'warn');
+                    validSubmission = false;
+                    return;
+                }
+            });
+            if (!validSubmission) {
+                return;
+            }
+            try {
+                result = await this.dataManager.PUT(`api/checksheet-submissions/${model.id}`, model);
+                this.alertService.addAlert('Checksheet Submission saved successfully', 'success');
+            }
+            catch (error) {
+                this.errorHandler.handleError(error, 'Unable to save checksheet submission, try later');
+            }
+            finally {
+                this.spinnerService.hide();
+            }
+        }
+    }
+    onSaved() {
+        this.alertService.addAlert('Checksheet submission saved successfully!', 'success');
+        this.redirectBack();
+    }
+    createForm() {
+        this.checksheetSubmissionForm = this.fb.group({
+            id: [''],
+            date: ['', Validators.compose([Validators.required, DateValidator()])],
+            reviewer_id: [''],
+            model_id: ['', Validators.required],
+            model: ['vehicle'],
+            status_id: [''],
+            comments: [''],
+            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"] }] });
+}
+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 }] });
+
+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: 'checksheets',
+        component: ChecksheetListComponent
+    },
+    {
+        path: 'checksheets-view/:submissionId',
+        component: ChecksheetNodeViewComponent
+    },
+    {
+        path: 'checksheets/:submissionId/view',
+        component: ChecksheetSubmissionViewComponent
+    },
+    { path: '**', redirectTo: 'checksheet-format-list', pathMatch: 'full' }
+];
+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 ɵ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: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes)],
+                    exports: [RouterModule]
+                }]
+        }] });
+
+class MechanicalIssueFormComponent {
+    dialogRef;
+    data;
+    service;
+    errorHandler;
+    spinnerService;
+    submission;
+    mechanicalIssues;
+    constructor(dialogRef, data, service, errorHandler, spinnerService) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.service = service;
+        this.errorHandler = errorHandler;
+        this.spinnerService = spinnerService;
+    }
+    ngOnInit() {
+        if (!this.data?.submission) {
+            // do some error
+            return;
+        }
+        this.submission = this.data.submission;
+        this.loadMechanicalIssues();
+    }
+    async loadMechanicalIssues() {
+        let result = await this.service.getMechanicalIssues(this.submission.id);
+        console.log(result);
+        this.mechanicalIssues = result.data;
+        this.mechanicalIssues.forEach((element) => {
+            element.is_selected = true;
+        });
+    }
+    async submit() {
+        let result;
+        try {
+            this.spinnerService.show();
+            let data = {
+                submission_id: this.submission,
+                issues: this.mechanicalIssues
+            };
+            result = await this.service.createMechanicalIssues(this.submission.id, data);
+        }
+        catch (error) {
+            this.errorHandler.handleError(error);
+        }
+        finally {
+            this.spinnerService.hide();
+            if (result) {
+                this.dialogRef.close(result.item);
+            }
+        }
+    }
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MechanicalIssueFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-mechanical-issue-form', 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>" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: ChecksheetService }, { type: i1.ErrorHandlerService }, { type: i3$1.NgxSpinnerService }] });
+
+/*
+ * This module imports and re-exports all Angular Material modules for convenience,
+ * so only 1 module import is needed in your feature modules.
+ * See https://material.angular.io/guide/getting-started#step-3-import-the-component-modules.
+ *
+ * To optimize your production builds, you should only import the components used in your app.
+ */
+class MaterialModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MaterialModule, exports: [MatAutocompleteModule,
+            MatBadgeModule,
+            MatButtonModule,
+            MatButtonToggleModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatChipsModule,
+            MatCommonModule,
+            MatDatepickerModule,
+            MatDialogModule,
+            MatDividerModule,
+            MatExpansionModule,
+            MatFormFieldModule,
+            MatGridListModule,
+            MatIconModule,
+            MatInputModule,
+            MatLineModule,
+            MatListModule,
+            MatMenuModule,
+            MatNativeDateModule,
+            MatOptionModule,
+            MatPaginatorModule,
+            MatProgressBarModule,
+            MatProgressSpinnerModule,
+            MatPseudoCheckboxModule,
+            MatRadioModule,
+            MatRippleModule,
+            MatSelectModule,
+            MatSidenavModule,
+            MatSlideToggleModule,
+            MatSliderModule,
+            MatSnackBarModule,
+            MatSortModule,
+            MatStepperModule,
+            MatTableModule,
+            MatTabsModule,
+            MatToolbarModule,
+            MatTooltipModule,
+            MatTreeModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MaterialModule, imports: [MatAutocompleteModule,
+            MatBadgeModule,
+            MatButtonModule,
+            MatButtonToggleModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatChipsModule,
+            MatCommonModule,
+            MatDatepickerModule,
+            MatDialogModule,
+            MatDividerModule,
+            MatExpansionModule,
+            MatFormFieldModule,
+            MatGridListModule,
+            MatIconModule,
+            MatInputModule,
+            MatLineModule,
+            MatListModule,
+            MatMenuModule,
+            MatNativeDateModule,
+            MatOptionModule,
+            MatPaginatorModule,
+            MatProgressBarModule,
+            MatProgressSpinnerModule,
+            MatPseudoCheckboxModule,
+            MatRadioModule,
+            MatRippleModule,
+            MatSelectModule,
+            MatSidenavModule,
+            MatSlideToggleModule,
+            MatSliderModule,
+            MatSnackBarModule,
+            MatSortModule,
+            MatStepperModule,
+            MatTableModule,
+            MatTabsModule,
+            MatToolbarModule,
+            MatTooltipModule,
+            MatTreeModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        MatAutocompleteModule,
+                        MatBadgeModule,
+                        MatButtonModule,
+                        MatButtonToggleModule,
+                        MatCardModule,
+                        MatCheckboxModule,
+                        MatChipsModule,
+                        MatCommonModule,
+                        MatDatepickerModule,
+                        MatDialogModule,
+                        MatDividerModule,
+                        MatExpansionModule,
+                        MatFormFieldModule,
+                        MatGridListModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatLineModule,
+                        MatListModule,
+                        MatMenuModule,
+                        MatNativeDateModule,
+                        MatOptionModule,
+                        MatPaginatorModule,
+                        MatProgressBarModule,
+                        MatProgressSpinnerModule,
+                        MatPseudoCheckboxModule,
+                        MatRadioModule,
+                        MatRippleModule,
+                        MatSelectModule,
+                        MatSidenavModule,
+                        MatSlideToggleModule,
+                        MatSliderModule,
+                        MatSnackBarModule,
+                        MatSortModule,
+                        MatStepperModule,
+                        MatTableModule,
+                        MatTabsModule,
+                        MatToolbarModule,
+                        MatTooltipModule,
+                        MatTreeModule
+                    ]
+                }]
+        }] });
+
+class SharedModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SharedModule, imports: [FlexLayoutModule,
+            MaterialModule,
+            CommonModule], exports: [FlexLayoutModule,
+            MaterialModule,
+            NgxPermissionsModule,
+            FormsModule,
+            ReactiveFormsModule,
+            InfiniteScrollModule,
+            RouterModule,
+            LoaderModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedModule, imports: [FlexLayoutModule,
+            MaterialModule,
+            CommonModule, FlexLayoutModule,
+            MaterialModule,
+            NgxPermissionsModule,
+            FormsModule,
+            ReactiveFormsModule,
+            InfiniteScrollModule,
+            RouterModule,
+            LoaderModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        FlexLayoutModule,
+                        MaterialModule,
+                        CommonModule
+                    ],
+                    exports: [
+                        FlexLayoutModule,
+                        MaterialModule,
+                        NgxPermissionsModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        InfiniteScrollModule,
+                        RouterModule,
+                        LoaderModule
+                    ]
+                }]
+        }] });
+
+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');
+    }
+    /**
+     * Sent request to submit the checksheet submission.
+     *
+     * @param submissionId
+     * @param params
+     */
+    submit(submissionId, params) {
+        return this.http.put('api/checksheet-submissions/' + submissionId + '/submit', {}, { params });
+    }
+    /**
+     * Send request to submit the checksheet submission review.
+     *
+     * @param submissionId
+     * @param params
+     */
+    review(submissionId, params) {
+        return this.http.put('api/checksheet-submissions/' + submissionId + '/review', {}, { params });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
+class ChecksheetSubmissionReviewButtonComponent {
+    matDialog;
+    credentialsService;
+    checksheetSubmissionService;
+    alertService;
+    submission;
+    viewType = 'icon';
+    requestParams;
+    reviewed = new EventEmitter();
+    user;
+    isWorking = false;
+    constructor(matDialog, credentialsService, checksheetSubmissionService, alertService) {
+        this.matDialog = matDialog;
+        this.credentialsService = credentialsService;
+        this.checksheetSubmissionService = checksheetSubmissionService;
+        this.alertService = alertService;
+        this.user = this.credentialsService.credentials?.user;
+    }
+    /**
+     * Show the review dialog.
+     *
+     * @param templateRef
+     */
+    openDialog(templateRef) {
+        this.matDialog.open(templateRef, { width: '400px' });
+    }
+    /**
+     * Review checksheet.
+     */
+    reviewChecksheet() {
+        this.isWorking = true;
+        this.checksheetSubmissionService
+            .review(this.submission?.id, this.requestParams)
+            .subscribe({
+            next: (response) => {
+                this.matDialog.closeAll();
+                this.isWorking = false;
+                this.reviewed.next(response?.item);
+                this.alertService.addAlert('The checksheet submission marked as reviewed.', 'success');
+            },
+            error: () => (this.isWorking = false)
+        });
+    }
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetSubmissionReviewButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-checksheet-submission-review-button', 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" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i1.CredentialsService }, { type: ChecksheetSubmissionService }, { type: i1.AlertService }], propDecorators: { submission: [{
+                type: Input
+            }], viewType: [{
+                type: Input
+            }], requestParams: [{
+                type: Input
+            }], reviewed: [{
+                type: Output
+            }] } });
+
+let ChecksheetSubmissionListComponent = class ChecksheetSubmissionListComponent extends TechlifyListingControllerInterface {
+    alertService;
+    fb;
+    checksheetSubmissionService;
+    requestHelperService;
+    displayedColumns = [
+        'index',
+        'date',
+        'format.title',
+        'creator.name',
+        'reviewer.name',
+        'status.title',
+        'actions'
+    ];
+    with = 'format,creator,reviewer,status';
+    constructor(alertService, fb, checksheetSubmissionService, requestHelperService) {
+        super();
+        this.alertService = alertService;
+        this.fb = fb;
+        this.checksheetSubmissionService = checksheetSubmissionService;
+        this.requestHelperService = requestHelperService;
+        this.createForm();
+    }
+    ngOnInit() {
+        this.loadData();
+        this.filterForm.valueChanges
+            .pipe(debounceTime$1(800))
+            .subscribe(() => this.reload());
+    }
+    createForm() {
+        this.filterForm = this.fb.group({
+            duration: [Timeline.ALL],
+            date_from: [''],
+            date_to: [''],
+            status_ids: [''],
+            creator_ids: [''],
+            reviewer_ids: [''],
+            format_ids: [''],
+            sort_by: ['created_at|DESC'],
+            with: [this.with]
+        });
+    }
+    loadData() {
+        this.isWorking = true;
+        const params = {
+            ...this.requestHelperService.convertToFormData(this.filterForm.value),
+            perPage: this.perPage,
+            page: this.page
+        };
+        this.checksheetSubmissionService.index(params).subscribe({
+            next: (response) => {
+                this.models = this.models.concat(response?.data);
+                this.lastPage = response?.last_page;
+                this.isWorking = false;
+            },
+            error: () => (this.isWorking = false)
+        });
+    }
+    onDurationChange(timelineValue) {
+        let { date_to, date_from } = timelineValue;
+        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') : ''
+        });
+    }
+    /**
+     * Handle checksheet submission delete event.
+     */
+    onDeleted() {
+        this.alertService.addAlert('Checksheet submission deleted successfully!', 'success');
+        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" }] });
+};
+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"] }]
+        }], 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,
+            ChecksheetQuestionFormComponent,
+            ChecksheetQuestionComponent,
+            ChecksheetQuestionListComponent,
+            ChecksheetListComponent,
+            ChecksheetSubmissionFormComponent,
+            ChecksheetViewComponent,
+            ChecksheetNodeViewComponent,
+            MechanicalIssueFormComponent,
+            ChecksheetReportComponent,
+            ChecksheetFormButtonComponent,
+            ChecksheetSubmissionDeleteButtonComponent,
+            ChecksheetReviewButtonComponent,
+            ChecksheetSubmissionViewComponent,
+            ChecksheetSubmissionFormButtonComponent,
+            ChecksheetSubmissionListComponent,
+            ChecksheetSubmissionReviewButtonComponent], imports: [CommonModule,
+            ChecksheetRoutingModule,
+            SharedModule,
+            InfiniteScrollModule,
+            ActionPopupModule,
+            SearchableSelectorModule,
+            NoteModule,
+            NgxEditorModule,
+            MatRadioModule,
+            EntityFilesViewAllModule,
+            ExportExcelModule,
+            MatProgressBarModule,
+            TimelineFilterModule,
+            ChecksheetSubmissionFileUploadComponent,
+            ChecksheetSubmissionFilesComponent,
+            SharedModule], exports: [ChecksheetListComponent,
+            ChecksheetFormButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetModule, imports: [CommonModule,
+            ChecksheetRoutingModule,
+            SharedModule,
+            InfiniteScrollModule,
+            ActionPopupModule,
+            SearchableSelectorModule,
+            NoteModule,
+            NgxEditorModule,
+            MatRadioModule,
+            EntityFilesViewAllModule,
+            ExportExcelModule,
+            MatProgressBarModule,
+            TimelineFilterModule,
+            ChecksheetSubmissionFileUploadComponent,
+            ChecksheetSubmissionFilesComponent,
+            SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecksheetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ChecksheetFormatListComponent,
+                        ChecksheetFormComponent,
+                        ChecksheetQuestionFormComponent,
+                        ChecksheetQuestionComponent,
+                        ChecksheetQuestionListComponent,
+                        ChecksheetListComponent,
+                        ChecksheetSubmissionFormComponent,
+                        ChecksheetViewComponent,
+                        ChecksheetNodeViewComponent,
+                        MechanicalIssueFormComponent,
+                        ChecksheetReportComponent,
+                        ChecksheetFormButtonComponent,
+                        ChecksheetSubmissionDeleteButtonComponent,
+                        ChecksheetReviewButtonComponent,
+                        ChecksheetSubmissionViewComponent,
+                        ChecksheetSubmissionFormButtonComponent,
+                        ChecksheetSubmissionListComponent,
+                        ChecksheetSubmissionReviewButtonComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        ChecksheetRoutingModule,
+                        SharedModule,
+                        InfiniteScrollModule,
+                        ActionPopupModule,
+                        SearchableSelectorModule,
+                        NoteModule,
+                        NgxEditorModule,
+                        MatRadioModule,
+                        EntityFilesViewAllModule,
+                        ExportExcelModule,
+                        MatProgressBarModule,
+                        TimelineFilterModule,
+                        ChecksheetSubmissionFileUploadComponent,
+                        ChecksheetSubmissionFilesComponent,
+                        SharedModule
+                    ],
+                    exports: [
+                        ChecksheetListComponent,
+                        ChecksheetFormButtonComponent
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of ngx-techlify-checksheet
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChecksheetFormButtonComponent, ChecksheetListComponent, ChecksheetModule, ChecksheetSubmissionFormButtonComponent, ChecksheetSubmissionListComponent };
+//# sourceMappingURL=ngx-techlify-checksheet.mjs.map