bpm-core 0.0.65 → 0.0.67

package/fesm2022/bpm-core.mjs

@@ -4338,6 +4338,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 
 class AttachmentSectionComponent extends ControlValueAccessorDirective {
     className = 'info-section';
+    downloadActionClicked = new EventEmitter();
+    customDownload;
     attachmentsMax = 1000;
     isSortable = false;
     downloadAll = false;
@@ -4473,14 +4475,17 @@ class AttachmentSectionComponent extends ControlValueAccessorDirective {
             });
         });
     }
+    customDownloadAction(event) {
+        this.downloadActionClicked.emit(event);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: AttachmentSectionComponent, isStandalone: true, selector: "app-attachment-section", inputs: { className: "className", attachmentsMax: "attachmentsMax", isSortable: "isSortable", downloadAll: "downloadAll", isRequired: "isRequired", descriptionRequired: "descriptionRequired", commentsRequired: "commentsRequired", allowedExtensions: "allowedExtensions" }, outputs: { emitedValue: "emitedValue" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: AttachmentSectionComponent, isStandalone: true, selector: "app-attachment-section", inputs: { className: "className", customDownload: "customDownload", attachmentsMax: "attachmentsMax", isSortable: "isSortable", downloadAll: "downloadAll", isRequired: "isRequired", descriptionRequired: "descriptionRequired", commentsRequired: "commentsRequired", allowedExtensions: "allowedExtensions" }, outputs: { downloadActionClicked: "downloadActionClicked", emitedValue: "emitedValue" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AttachmentSectionComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mt-2 p-0\">\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n  }\r\n\r\n  @if (!attachments?.length && !isReadOnly) {\r\n    <section\r\n      [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\"\r\n      class=\"mb-2\"\r\n      [class.insideTableStyle]=\"insideTable\"\r\n      (click)=\"addAttachment()\">\r\n      <div\r\n        [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\"\r\n        class=\"file-uploader-input\">\r\n        <div class=\"icon mb-1\">\r\n          <svg\r\n            [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\"\r\n            width=\"41\"\r\n            height=\"38\"\r\n            viewBox=\"0 0 41 38\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n              fill=\"#DEE0E2\"/>\r\n            <path\r\n              d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n              fill=\"#8E9AA0\"/>\r\n            <path\r\n              d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n              fill=\"#F9F9F9\"/>\r\n          </svg>\r\n        </div>\r\n        <div class=\"f-14 fc-black fw-normal\">\r\n          <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ 'addMultiAttachments' | translate }}\r\n        </div>\r\n      </div>\r\n    </section>\r\n  }\r\n\r\n  @if (attachments?.length) {\r\n    <div\r\n      class=\"table-responsive full\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"attachments\"\r\n      (cdkDropListDropped)=\"drop($event)\"\r\n    >\r\n      <table mat-table [dataSource]=\"dataSource\">\r\n\r\n        <!-- index Column -->\r\n        <ng-container matColumnDef=\"index\">\r\n          <th mat-header-cell *matHeaderCellDef>\r\n            <ds-button\r\n              [matTooltip]=\"'downloadAll' | translate\"\r\n              square icon size=\"small\"\r\n              (click)=\"downloadAllAttachments($event)\"\r\n              class=\"icon-btn-shadow\">\r\n              @if (loading) {\r\n                <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n              } @else {\r\n                <ds-icon\r\n                  icon=\"download\"\r\n                  class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n              }\r\n            </ds-button>\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 + pageSize * (pageNumber) }}</td>\r\n        </ng-container>\r\n\r\n        <!-- Name Column -->\r\n        <ng-container matColumnDef=\"file\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ 'FileName' | translate }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <app-file-uploader\r\n              [allowedExtensions]=\"allowedExtensions\"\r\n              [displayedFiles]=\"[element]\"\r\n              name=\"attachment\"\r\n              [showActions]=\"true\"\r\n              [isReadOnly]=\"true\"\r\n              [multiple]=\"true\">\r\n            </app-file-uploader>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- Description Column -->\r\n        <ng-container matColumnDef=\"description\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ 'FileDescription' | translate }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <a\r\n              class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n              [hidden]=\"!element?.['fileDescription']\"\r\n              (click)=\"$event.stopPropagation(); fileDescriptionAnchor.popover.open()\"\r\n              [satPopoverAnchor]=\"fileDescriptionPopover\"\r\n              #fileDescriptionAnchor=\"satPopoverAnchor\"\r\n              [matTooltip]=\"element?.['fileDescription']\">\r\n              {{ element?.['fileDescription']?.length > 10 ? (element?.['fileDescription'] | slice : 0 : 10) + '....' : element?.['fileDescription'] }}\r\n            </a>\r\n            <sat-popover\r\n              #fileDescriptionPopover\r\n              [anchor]=\"fileDescriptionAnchor\"\r\n              [hasBackdrop]=\"true\"\r\n              [restoreFocus]=\"false\"\r\n              verticalAlign=\"below\"\r\n              horizontalAlign=\"center\">\r\n              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">{{ element?.['fileDescription'] }}</bdi>\r\n              </div>\r\n            </sat-popover>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- Comment Column -->\r\n        <ng-container matColumnDef=\"comment\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ 'comment' | translate }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <a\r\n              class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n              [hidden]=\"!element?.['attachmentcomment']\"\r\n              (click)=\"$event.stopPropagation(); commentsAnchor.popover.open()\"\r\n              [satPopoverAnchor]=\"commentsPopover\"\r\n              [matTooltip]=\"element?.['attachmentcomment']\"\r\n              #commentsAnchor=\"satPopoverAnchor\">\r\n              {{ element?.['attachmentcomment']?.length > 10 ? (element?.['attachmentcomment'] | slice : 0 : 10) + '....' : element?.['attachmentcomment'] }}\r\n            </a>\r\n            <sat-popover\r\n              #commentsPopover\r\n              [anchor]=\"commentsAnchor\"\r\n              [hasBackdrop]=\"true\"\r\n              [restoreFocus]=\"false\"\r\n              verticalAlign=\"below\"\r\n              horizontalAlign=\"center\">\r\n              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">{{ element?.['attachmentcomment'] }}</bdi>\r\n              </div>\r\n            </sat-popover>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"actions\">\r\n          <th mat-header-cell *matHeaderCellDef></th>\r\n          <td mat-cell *matCellDef=\"let element; let i = index\">\r\n            @if (!isReadOnly) {\r\n              <td>\r\n                <div class=\"d-flex gap-2\">\r\n                  <ds-button\r\n                    square\r\n                    icon\r\n                    size=\"small\"\r\n                    (click)=\"deleteAttachments(i, element)\"\r\n                    class=\"icon-btn-shadow\">\r\n                    <ds-icon icon=\"trash\" class=\"fs-20 fs-md-17 fc-coral\"></ds-icon>\r\n                  </ds-button>\r\n\r\n                  <ds-button\r\n                    square\r\n                    icon\r\n                    size=\"small\"\r\n                    (click)=\"editRow(element, i)\"\r\n                    class=\"icon-btn-shadow\">\r\n                    <ds-icon icon=\"pen\" class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n                  </ds-button>\r\n                </div>\r\n              </td>\r\n            }\r\n          </td>\r\n        </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n      </table>\r\n\r\n      <mat-paginator\r\n        #paginator\r\n        [pageSizeOptions]=\"[5]\"\r\n        (page)=\"onPaginateChange($event)\"\r\n        [length]=\"attachments.length\"\r\n        [pageSize]=\"pageSize\"\r\n        showFirstLastButtons></mat-paginator>\r\n    </div>\r\n  }\r\n\r\n  @if (!isReadOnly && attachments?.length && attachments?.length < attachmentsMax) {\r\n    <div class=\"text-center full mt-3\">\r\n      <ds-button\r\n        shape=\"{{ attachments?.length ? 'outline' : '' }}\"\r\n        [ngClass]=\"{ 'full-add-btn w-100 pt-1': attachments?.length }\"\r\n        (click)=\"addAttachment(); $event.stopPropagation()\">\r\n        <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22 pb-1\"></ds-icon>\r\n        {{ 'addAttachments' | translate }}\r\n      </ds-button>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px;--popup-width: 100%}::ng-deep .view-note-popover{max-width:250px;max-height:300px;overflow:auto;--popover-bc: var(--black);color:var(--white);--popover-before-width: .6rem}::ng-deep .mat-tooltip{max-width:500px;background:#1d252d}:host ::ng-deep .table-responsive table{--th-bg: var(--white);--th-fc: var(--dark-gray)}:host ::ng-deep .white-attached ds-attachments::part(base){--file-bg: transparent}:host ::ng-deep .full-add-btn::part(base){--btn-min-width: 100%;--btn-bg-color: rgb(248 248 248);--btn-height: 70px;--btn-radius: 6px;border:1px dashed rgb(142,154,160)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}.file-uploader{--uploader-height: 120px;--uploader-width: 100%;--uploader-bg: #f8f8f8;--uploader-border: 1px dashed #8e9aa0;--uploader-radius: 6px;--uploader-padding: 20px 14px 20px 31px;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader--input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-uploader-icon{color:var(--icon-color);font-size:var(--icon-size)}.file-uploader-icon svg{display:block;object-fit:contain;object-position:center;width:41px;height:auto}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}.table-responsive table,.table-responsive .primary-table{--cell-pading: 3px 24px 10px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "signType", "customDownload", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mt-2 p-0\">\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n  }\r\n\r\n  @if (!attachments?.length && !isReadOnly) {\r\n    <section\r\n      [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\"\r\n      class=\"mb-2\"\r\n      [class.insideTableStyle]=\"insideTable\"\r\n      (click)=\"addAttachment()\">\r\n      <div\r\n        [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\"\r\n        class=\"file-uploader-input\">\r\n        <div class=\"icon mb-1\">\r\n          <svg\r\n            [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\"\r\n            width=\"41\"\r\n            height=\"38\"\r\n            viewBox=\"0 0 41 38\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n              fill=\"#DEE0E2\"/>\r\n            <path\r\n              d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n              fill=\"#8E9AA0\"/>\r\n            <path\r\n              d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n              fill=\"#F9F9F9\"/>\r\n          </svg>\r\n        </div>\r\n        <div class=\"f-14 fc-black fw-normal\">\r\n          <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ 'addMultiAttachments' | translate }}\r\n        </div>\r\n      </div>\r\n    </section>\r\n  }\r\n\r\n  @if (attachments?.length) {\r\n    <div\r\n      class=\"table-responsive full\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"attachments\"\r\n      (cdkDropListDropped)=\"drop($event)\"\r\n    >\r\n      <table mat-table [dataSource]=\"dataSource\">\r\n\r\n        <!-- index Column -->\r\n        <ng-container matColumnDef=\"index\">\r\n          <th mat-header-cell *matHeaderCellDef>\r\n            <ds-button\r\n              [matTooltip]=\"'downloadAll' | translate\"\r\n              square icon size=\"small\"\r\n              (click)=\"downloadAllAttachments($event)\"\r\n              class=\"icon-btn-shadow\">\r\n              @if (loading) {\r\n                <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n              } @else {\r\n                <ds-icon\r\n                  icon=\"download\"\r\n                  class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n              }\r\n            </ds-button>\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 + pageSize * (pageNumber) }}</td>\r\n        </ng-container>\r\n\r\n        <!-- Name Column -->\r\n        <ng-container matColumnDef=\"file\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ 'FileName' | translate }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <app-file-uploader\r\n              [allowedExtensions]=\"allowedExtensions\"\r\n              [displayedFiles]=\"[element]\"\r\n              name=\"attachment\"\r\n              [showActions]=\"true\"\r\n              [isReadOnly]=\"true\"\r\n              [customDownload]=\"customDownload\"\r\n              (downloadActionClicked)=\"customDownloadAction($event)\"\r\n              [multiple]=\"true\">\r\n            </app-file-uploader>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- Description Column -->\r\n        <ng-container matColumnDef=\"description\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ 'FileDescription' | translate }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <a\r\n              class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n              [hidden]=\"!element?.['fileDescription']\"\r\n              (click)=\"$event.stopPropagation(); fileDescriptionAnchor.popover.open()\"\r\n              [satPopoverAnchor]=\"fileDescriptionPopover\"\r\n              #fileDescriptionAnchor=\"satPopoverAnchor\"\r\n              [matTooltip]=\"element?.['fileDescription']\">\r\n              {{ element?.['fileDescription']?.length > 10 ? (element?.['fileDescription'] | slice : 0 : 10) + '....' : element?.['fileDescription'] }}\r\n            </a>\r\n            <sat-popover\r\n              #fileDescriptionPopover\r\n              [anchor]=\"fileDescriptionAnchor\"\r\n              [hasBackdrop]=\"true\"\r\n              [restoreFocus]=\"false\"\r\n              verticalAlign=\"below\"\r\n              horizontalAlign=\"center\">\r\n              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">{{ element?.['fileDescription'] }}</bdi>\r\n              </div>\r\n            </sat-popover>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- Comment Column -->\r\n        <ng-container matColumnDef=\"comment\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ 'comment' | translate }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <a\r\n              class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n              [hidden]=\"!element?.['attachmentcomment']\"\r\n              (click)=\"$event.stopPropagation(); commentsAnchor.popover.open()\"\r\n              [satPopoverAnchor]=\"commentsPopover\"\r\n              [matTooltip]=\"element?.['attachmentcomment']\"\r\n              #commentsAnchor=\"satPopoverAnchor\">\r\n              {{ element?.['attachmentcomment']?.length > 10 ? (element?.['attachmentcomment'] | slice : 0 : 10) + '....' : element?.['attachmentcomment'] }}\r\n            </a>\r\n            <sat-popover\r\n              #commentsPopover\r\n              [anchor]=\"commentsAnchor\"\r\n              [hasBackdrop]=\"true\"\r\n              [restoreFocus]=\"false\"\r\n              verticalAlign=\"below\"\r\n              horizontalAlign=\"center\">\r\n              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">{{ element?.['attachmentcomment'] }}</bdi>\r\n              </div>\r\n            </sat-popover>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"actions\">\r\n          <th mat-header-cell *matHeaderCellDef></th>\r\n          <td mat-cell *matCellDef=\"let element; let i = index\">\r\n            @if (!isReadOnly) {\r\n              <td>\r\n                <div class=\"d-flex gap-2\">\r\n                  <ds-button\r\n                    square\r\n                    icon\r\n                    size=\"small\"\r\n                    (click)=\"deleteAttachments(i, element)\"\r\n                    class=\"icon-btn-shadow\">\r\n                    <ds-icon icon=\"trash\" class=\"fs-20 fs-md-17 fc-coral\"></ds-icon>\r\n                  </ds-button>\r\n\r\n                  <ds-button\r\n                    square\r\n                    icon\r\n                    size=\"small\"\r\n                    (click)=\"editRow(element, i)\"\r\n                    class=\"icon-btn-shadow\">\r\n                    <ds-icon icon=\"pen\" class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n                  </ds-button>\r\n                </div>\r\n              </td>\r\n            }\r\n          </td>\r\n        </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n      </table>\r\n\r\n      <mat-paginator\r\n        #paginator\r\n        [pageSizeOptions]=\"[5]\"\r\n        (page)=\"onPaginateChange($event)\"\r\n        [length]=\"attachments.length\"\r\n        [pageSize]=\"pageSize\"\r\n        showFirstLastButtons></mat-paginator>\r\n    </div>\r\n  }\r\n\r\n  @if (!isReadOnly && attachments?.length && attachments?.length < attachmentsMax) {\r\n    <div class=\"text-center full mt-3\">\r\n      <ds-button\r\n        shape=\"{{ attachments?.length ? 'outline' : '' }}\"\r\n        [ngClass]=\"{ 'full-add-btn w-100 pt-1': attachments?.length }\"\r\n        (click)=\"addAttachment(); $event.stopPropagation()\">\r\n        <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22 pb-1\"></ds-icon>\r\n        {{ 'addAttachments' | translate }}\r\n      </ds-button>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px;--popup-width: 100%}::ng-deep .view-note-popover{max-width:250px;max-height:300px;overflow:auto;--popover-bc: var(--black);color:var(--white);--popover-before-width: .6rem}::ng-deep .mat-tooltip{max-width:500px;background:#1d252d}:host ::ng-deep .table-responsive table{--th-bg: var(--white);--th-fc: var(--dark-gray)}:host ::ng-deep .white-attached ds-attachments::part(base){--file-bg: transparent}:host ::ng-deep .full-add-btn::part(base){--btn-min-width: 100%;--btn-bg-color: rgb(248 248 248);--btn-height: 70px;--btn-radius: 6px;border:1px dashed rgb(142,154,160)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}.file-uploader{--uploader-height: 120px;--uploader-width: 100%;--uploader-bg: #f8f8f8;--uploader-border: 1px dashed #8e9aa0;--uploader-radius: 6px;--uploader-padding: 20px 14px 20px 31px;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader--input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-uploader-icon{color:var(--icon-color);font-size:var(--icon-size)}.file-uploader-icon svg{display:block;object-fit:contain;object-position:center;width:41px;height:auto}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}.table-responsive table,.table-responsive .primary-table{--cell-pading: 3px 24px 10px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "signType", "customDownload", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionComponent, decorators: [{
             type: Component,
@@ -4511,9 +4516,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         MatRowDef,
                         FormLabelComponent,
                         TranslatePipe
-                    ], standalone: true, template: "<div class=\"mt-2 p-0\">\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n  }\r\n\r\n  @if (!attachments?.length && !isReadOnly) {\r\n    <section\r\n      [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\"\r\n      class=\"mb-2\"\r\n      [class.insideTableStyle]=\"insideTable\"\r\n      (click)=\"addAttachment()\">\r\n      <div\r\n        [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\"\r\n        class=\"file-uploader-input\">\r\n        <div class=\"icon mb-1\">\r\n          <svg\r\n            [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\"\r\n            width=\"41\"\r\n            height=\"38\"\r\n            viewBox=\"0 0 41 38\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n              fill=\"#DEE0E2\"/>\r\n            <path\r\n              d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n              fill=\"#8E9AA0\"/>\r\n            <path\r\n              d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n              fill=\"#F9F9F9\"/>\r\n          </svg>\r\n        </div>\r\n        <div class=\"f-14 fc-black fw-normal\">\r\n          <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ 'addMultiAttachments' | translate }}\r\n        </div>\r\n      </div>\r\n    </section>\r\n  }\r\n\r\n  @if (attachments?.length) {\r\n    <div\r\n      class=\"table-responsive full\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"attachments\"\r\n      (cdkDropListDropped)=\"drop($event)\"\r\n    >\r\n      <table mat-table [dataSource]=\"dataSource\">\r\n\r\n        <!-- index Column -->\r\n        <ng-container matColumnDef=\"index\">\r\n          <th mat-header-cell *matHeaderCellDef>\r\n            <ds-button\r\n              [matTooltip]=\"'downloadAll' | translate\"\r\n              square icon size=\"small\"\r\n              (click)=\"downloadAllAttachments($event)\"\r\n              class=\"icon-btn-shadow\">\r\n              @if (loading) {\r\n                <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n              } @else {\r\n                <ds-icon\r\n                  icon=\"download\"\r\n                  class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n              }\r\n            </ds-button>\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 + pageSize * (pageNumber) }}</td>\r\n        </ng-container>\r\n\r\n        <!-- Name Column -->\r\n        <ng-container matColumnDef=\"file\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ 'FileName' | translate }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <app-file-uploader\r\n              [allowedExtensions]=\"allowedExtensions\"\r\n              [displayedFiles]=\"[element]\"\r\n              name=\"attachment\"\r\n              [showActions]=\"true\"\r\n              [isReadOnly]=\"true\"\r\n              [multiple]=\"true\">\r\n            </app-file-uploader>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- Description Column -->\r\n        <ng-container matColumnDef=\"description\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ 'FileDescription' | translate }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <a\r\n              class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n              [hidden]=\"!element?.['fileDescription']\"\r\n              (click)=\"$event.stopPropagation(); fileDescriptionAnchor.popover.open()\"\r\n              [satPopoverAnchor]=\"fileDescriptionPopover\"\r\n              #fileDescriptionAnchor=\"satPopoverAnchor\"\r\n              [matTooltip]=\"element?.['fileDescription']\">\r\n              {{ element?.['fileDescription']?.length > 10 ? (element?.['fileDescription'] | slice : 0 : 10) + '....' : element?.['fileDescription'] }}\r\n            </a>\r\n            <sat-popover\r\n              #fileDescriptionPopover\r\n              [anchor]=\"fileDescriptionAnchor\"\r\n              [hasBackdrop]=\"true\"\r\n              [restoreFocus]=\"false\"\r\n              verticalAlign=\"below\"\r\n              horizontalAlign=\"center\">\r\n              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">{{ element?.['fileDescription'] }}</bdi>\r\n              </div>\r\n            </sat-popover>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- Comment Column -->\r\n        <ng-container matColumnDef=\"comment\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ 'comment' | translate }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <a\r\n              class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n              [hidden]=\"!element?.['attachmentcomment']\"\r\n              (click)=\"$event.stopPropagation(); commentsAnchor.popover.open()\"\r\n              [satPopoverAnchor]=\"commentsPopover\"\r\n              [matTooltip]=\"element?.['attachmentcomment']\"\r\n              #commentsAnchor=\"satPopoverAnchor\">\r\n              {{ element?.['attachmentcomment']?.length > 10 ? (element?.['attachmentcomment'] | slice : 0 : 10) + '....' : element?.['attachmentcomment'] }}\r\n            </a>\r\n            <sat-popover\r\n              #commentsPopover\r\n              [anchor]=\"commentsAnchor\"\r\n              [hasBackdrop]=\"true\"\r\n              [restoreFocus]=\"false\"\r\n              verticalAlign=\"below\"\r\n              horizontalAlign=\"center\">\r\n              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">{{ element?.['attachmentcomment'] }}</bdi>\r\n              </div>\r\n            </sat-popover>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"actions\">\r\n          <th mat-header-cell *matHeaderCellDef></th>\r\n          <td mat-cell *matCellDef=\"let element; let i = index\">\r\n            @if (!isReadOnly) {\r\n              <td>\r\n                <div class=\"d-flex gap-2\">\r\n                  <ds-button\r\n                    square\r\n                    icon\r\n                    size=\"small\"\r\n                    (click)=\"deleteAttachments(i, element)\"\r\n                    class=\"icon-btn-shadow\">\r\n                    <ds-icon icon=\"trash\" class=\"fs-20 fs-md-17 fc-coral\"></ds-icon>\r\n                  </ds-button>\r\n\r\n                  <ds-button\r\n                    square\r\n                    icon\r\n                    size=\"small\"\r\n                    (click)=\"editRow(element, i)\"\r\n                    class=\"icon-btn-shadow\">\r\n                    <ds-icon icon=\"pen\" class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n                  </ds-button>\r\n                </div>\r\n              </td>\r\n            }\r\n          </td>\r\n        </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n      </table>\r\n\r\n      <mat-paginator\r\n        #paginator\r\n        [pageSizeOptions]=\"[5]\"\r\n        (page)=\"onPaginateChange($event)\"\r\n        [length]=\"attachments.length\"\r\n        [pageSize]=\"pageSize\"\r\n        showFirstLastButtons></mat-paginator>\r\n    </div>\r\n  }\r\n\r\n  @if (!isReadOnly && attachments?.length && attachments?.length < attachmentsMax) {\r\n    <div class=\"text-center full mt-3\">\r\n      <ds-button\r\n        shape=\"{{ attachments?.length ? 'outline' : '' }}\"\r\n        [ngClass]=\"{ 'full-add-btn w-100 pt-1': attachments?.length }\"\r\n        (click)=\"addAttachment(); $event.stopPropagation()\">\r\n        <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22 pb-1\"></ds-icon>\r\n        {{ 'addAttachments' | translate }}\r\n      </ds-button>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px;--popup-width: 100%}::ng-deep .view-note-popover{max-width:250px;max-height:300px;overflow:auto;--popover-bc: var(--black);color:var(--white);--popover-before-width: .6rem}::ng-deep .mat-tooltip{max-width:500px;background:#1d252d}:host ::ng-deep .table-responsive table{--th-bg: var(--white);--th-fc: var(--dark-gray)}:host ::ng-deep .white-attached ds-attachments::part(base){--file-bg: transparent}:host ::ng-deep .full-add-btn::part(base){--btn-min-width: 100%;--btn-bg-color: rgb(248 248 248);--btn-height: 70px;--btn-radius: 6px;border:1px dashed rgb(142,154,160)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}.file-uploader{--uploader-height: 120px;--uploader-width: 100%;--uploader-bg: #f8f8f8;--uploader-border: 1px dashed #8e9aa0;--uploader-radius: 6px;--uploader-padding: 20px 14px 20px 31px;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader--input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-uploader-icon{color:var(--icon-color);font-size:var(--icon-size)}.file-uploader-icon svg{display:block;object-fit:contain;object-position:center;width:41px;height:auto}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}.table-responsive table,.table-responsive .primary-table{--cell-pading: 3px 24px 10px}\n"] }]
+                    ], standalone: true, template: "<div class=\"mt-2 p-0\">\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n  }\r\n\r\n  @if (!attachments?.length && !isReadOnly) {\r\n    <section\r\n      [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\"\r\n      class=\"mb-2\"\r\n      [class.insideTableStyle]=\"insideTable\"\r\n      (click)=\"addAttachment()\">\r\n      <div\r\n        [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\"\r\n        class=\"file-uploader-input\">\r\n        <div class=\"icon mb-1\">\r\n          <svg\r\n            [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\"\r\n            width=\"41\"\r\n            height=\"38\"\r\n            viewBox=\"0 0 41 38\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n              fill=\"#DEE0E2\"/>\r\n            <path\r\n              d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n              fill=\"#8E9AA0\"/>\r\n            <path\r\n              d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n              fill=\"#F9F9F9\"/>\r\n          </svg>\r\n        </div>\r\n        <div class=\"f-14 fc-black fw-normal\">\r\n          <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ 'addMultiAttachments' | translate }}\r\n        </div>\r\n      </div>\r\n    </section>\r\n  }\r\n\r\n  @if (attachments?.length) {\r\n    <div\r\n      class=\"table-responsive full\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"attachments\"\r\n      (cdkDropListDropped)=\"drop($event)\"\r\n    >\r\n      <table mat-table [dataSource]=\"dataSource\">\r\n\r\n        <!-- index Column -->\r\n        <ng-container matColumnDef=\"index\">\r\n          <th mat-header-cell *matHeaderCellDef>\r\n            <ds-button\r\n              [matTooltip]=\"'downloadAll' | translate\"\r\n              square icon size=\"small\"\r\n              (click)=\"downloadAllAttachments($event)\"\r\n              class=\"icon-btn-shadow\">\r\n              @if (loading) {\r\n                <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n              } @else {\r\n                <ds-icon\r\n                  icon=\"download\"\r\n                  class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n              }\r\n            </ds-button>\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 + pageSize * (pageNumber) }}</td>\r\n        </ng-container>\r\n\r\n        <!-- Name Column -->\r\n        <ng-container matColumnDef=\"file\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ 'FileName' | translate }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <app-file-uploader\r\n              [allowedExtensions]=\"allowedExtensions\"\r\n              [displayedFiles]=\"[element]\"\r\n              name=\"attachment\"\r\n              [showActions]=\"true\"\r\n              [isReadOnly]=\"true\"\r\n              [customDownload]=\"customDownload\"\r\n              (downloadActionClicked)=\"customDownloadAction($event)\"\r\n              [multiple]=\"true\">\r\n            </app-file-uploader>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- Description Column -->\r\n        <ng-container matColumnDef=\"description\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ 'FileDescription' | translate }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <a\r\n              class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n              [hidden]=\"!element?.['fileDescription']\"\r\n              (click)=\"$event.stopPropagation(); fileDescriptionAnchor.popover.open()\"\r\n              [satPopoverAnchor]=\"fileDescriptionPopover\"\r\n              #fileDescriptionAnchor=\"satPopoverAnchor\"\r\n              [matTooltip]=\"element?.['fileDescription']\">\r\n              {{ element?.['fileDescription']?.length > 10 ? (element?.['fileDescription'] | slice : 0 : 10) + '....' : element?.['fileDescription'] }}\r\n            </a>\r\n            <sat-popover\r\n              #fileDescriptionPopover\r\n              [anchor]=\"fileDescriptionAnchor\"\r\n              [hasBackdrop]=\"true\"\r\n              [restoreFocus]=\"false\"\r\n              verticalAlign=\"below\"\r\n              horizontalAlign=\"center\">\r\n              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">{{ element?.['fileDescription'] }}</bdi>\r\n              </div>\r\n            </sat-popover>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- Comment Column -->\r\n        <ng-container matColumnDef=\"comment\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ 'comment' | translate }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <a\r\n              class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n              [hidden]=\"!element?.['attachmentcomment']\"\r\n              (click)=\"$event.stopPropagation(); commentsAnchor.popover.open()\"\r\n              [satPopoverAnchor]=\"commentsPopover\"\r\n              [matTooltip]=\"element?.['attachmentcomment']\"\r\n              #commentsAnchor=\"satPopoverAnchor\">\r\n              {{ element?.['attachmentcomment']?.length > 10 ? (element?.['attachmentcomment'] | slice : 0 : 10) + '....' : element?.['attachmentcomment'] }}\r\n            </a>\r\n            <sat-popover\r\n              #commentsPopover\r\n              [anchor]=\"commentsAnchor\"\r\n              [hasBackdrop]=\"true\"\r\n              [restoreFocus]=\"false\"\r\n              verticalAlign=\"below\"\r\n              horizontalAlign=\"center\">\r\n              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">{{ element?.['attachmentcomment'] }}</bdi>\r\n              </div>\r\n            </sat-popover>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"actions\">\r\n          <th mat-header-cell *matHeaderCellDef></th>\r\n          <td mat-cell *matCellDef=\"let element; let i = index\">\r\n            @if (!isReadOnly) {\r\n              <td>\r\n                <div class=\"d-flex gap-2\">\r\n                  <ds-button\r\n                    square\r\n                    icon\r\n                    size=\"small\"\r\n                    (click)=\"deleteAttachments(i, element)\"\r\n                    class=\"icon-btn-shadow\">\r\n                    <ds-icon icon=\"trash\" class=\"fs-20 fs-md-17 fc-coral\"></ds-icon>\r\n                  </ds-button>\r\n\r\n                  <ds-button\r\n                    square\r\n                    icon\r\n                    size=\"small\"\r\n                    (click)=\"editRow(element, i)\"\r\n                    class=\"icon-btn-shadow\">\r\n                    <ds-icon icon=\"pen\" class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n                  </ds-button>\r\n                </div>\r\n              </td>\r\n            }\r\n          </td>\r\n        </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n      </table>\r\n\r\n      <mat-paginator\r\n        #paginator\r\n        [pageSizeOptions]=\"[5]\"\r\n        (page)=\"onPaginateChange($event)\"\r\n        [length]=\"attachments.length\"\r\n        [pageSize]=\"pageSize\"\r\n        showFirstLastButtons></mat-paginator>\r\n    </div>\r\n  }\r\n\r\n  @if (!isReadOnly && attachments?.length && attachments?.length < attachmentsMax) {\r\n    <div class=\"text-center full mt-3\">\r\n      <ds-button\r\n        shape=\"{{ attachments?.length ? 'outline' : '' }}\"\r\n        [ngClass]=\"{ 'full-add-btn w-100 pt-1': attachments?.length }\"\r\n        (click)=\"addAttachment(); $event.stopPropagation()\">\r\n        <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22 pb-1\"></ds-icon>\r\n        {{ 'addAttachments' | translate }}\r\n      </ds-button>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px;--popup-width: 100%}::ng-deep .view-note-popover{max-width:250px;max-height:300px;overflow:auto;--popover-bc: var(--black);color:var(--white);--popover-before-width: .6rem}::ng-deep .mat-tooltip{max-width:500px;background:#1d252d}:host ::ng-deep .table-responsive table{--th-bg: var(--white);--th-fc: var(--dark-gray)}:host ::ng-deep .white-attached ds-attachments::part(base){--file-bg: transparent}:host ::ng-deep .full-add-btn::part(base){--btn-min-width: 100%;--btn-bg-color: rgb(248 248 248);--btn-height: 70px;--btn-radius: 6px;border:1px dashed rgb(142,154,160)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}.file-uploader{--uploader-height: 120px;--uploader-width: 100%;--uploader-bg: #f8f8f8;--uploader-border: 1px dashed #8e9aa0;--uploader-radius: 6px;--uploader-padding: 20px 14px 20px 31px;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader--input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-uploader-icon{color:var(--icon-color);font-size:var(--icon-size)}.file-uploader-icon svg{display:block;object-fit:contain;object-position:center;width:41px;height:auto}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}.table-responsive table,.table-responsive .primary-table{--cell-pading: 3px 24px 10px}\n"] }]
         }], propDecorators: { className: [{
                 type: Input
+            }], downloadActionClicked: [{
+                type: Output
+            }], customDownload: [{
+                type: Input
             }], attachmentsMax: [{
                 type: Input
             }], isSortable: [{
@@ -6365,7 +6374,7 @@ class FormSectionComponent {
      */
     initSectionName() {
         if (this.section.body.details?.['stageName']) {
-            this.sectionName = this.section.body.details['stageName'];
+            this.sectionName = this.section.body.details['stageName']?.value ?? this.section.body.details['stageName'];
         }
         else {
             this.sectionName = this.segmentDynamicLoaderService.getSectionName(this.section.id);
@@ -7429,7 +7438,7 @@ class RequestDetailsSectionComponent {
         this.pageSize = event.pageSize;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RequestDetailsSectionComponent, deps: [{ token: CoreI18nService }, { token: i4.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: RequestDetailsSectionComponent, isStandalone: true, selector: "app-request-details-section", inputs: { isReadOnly: "isReadOnly", section: "section", form: "form", lov: "lov", className: "className" }, ngImport: i0, template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"true\"\r\n      [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n    <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n    <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n    <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n    <app-custom-searchable\r\n      class=\"section-item mb-0 full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"customSearchable\"\r\n      label=\"Custom-searchable\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-custom-searchable>\r\n    <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>\r\n    <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n    <app-datepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePicker\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"></app-datepicker>\r\n    <app-date-range-picker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePickerRange\"\r\n      label=\"Date-picker-range\"\r\n      [matSuffix]=\"true\"></app-date-range-picker>\r\n    <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>\r\n    <app-toggle-button\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"toggle\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-toggle-button>\r\n    <app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [multiple]=\"false\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\"></app-file-uploader>\r\n    <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"false\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section>\r\n\r\n\r\n    <!-- <app-table\r\n    [columnsConfig]=\"columnsConfig\"\r\n    [columns]=\"columns\"\r\n    [isError]=\"isError\"\r\n    [isLoading]=\"isLoading\"\r\n    [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n    [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n    [totalElements]=\"totalElements\"\r\n    (pageChange)=\"pageChanged($event)\"\r\n    class=\"new-primary-table full\">\r\n    </app-table> -->\r\n\r\n\r\n  </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"formGroup\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1", "customErrorMessages"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType", "fieldsForm", "form", "section", "sections", "showApprovalCycle", "customCall"], outputs: ["resetFormEmit", "customCallEmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "component", type: CheckBoxComponent, selector: "app-checkbox", inputs: ["containTerms", "termsLabel", "linkText", "hrefLink", "link", "termsBody"], outputs: ["downloadCheckBox"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar"] }, { kind: "component", type: InputCurrencyComponent, selector: "app-input-currency", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName"] }, { kind: "component", type: DatePickerComponent, selector: "app-datepicker", inputs: ["className", "calendarType", "yearOnly", "error", "format"], outputs: ["dateValue"] }, { kind: "component", type: DateRangePickerComponent, selector: "app-date-range-picker", inputs: ["className", "yearOnly", "calendarType"] }, { kind: "component", type: InputEmailComponent, selector: "app-input-email", inputs: ["floatLabel", "className", "matPrefix", "iconPrefixName", "iconSuffixName", "numberSuffixName"] }, { kind: "component", type: InputNumberComponent, selector: "app-input-number", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName", "allowedPattern"], outputs: ["emitedChangedValue"] }, { kind: "component", type: RadioComponent, selector: "app-radio", inputs: ["options"] }, { kind: "component", type: ToggleButtonComponent, selector: "app-toggle-button", inputs: ["className", "data", "error", "optionAr", "optionEn", "hasHint", "options", "displayedLabel", "key"], outputs: ["onChange"] }, { kind: "component", type: InputTelephoneComponent, selector: "app-input-telephone", inputs: ["floatLabel", "className"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "signType", "customDownload", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "component", type: SearchEmployeeComponent, selector: "app-search-employee", inputs: ["valueName", "className", "optional", "data", "floatLabel", "error", "showEdit", "arrayList", "isUniqueUsers"], outputs: ["selectedEmp", "onInputChange", "editDirectManger", "deleteDirectManger", "emitedDeletedValue"] }, { kind: "component", type: AttachmentSectionComponent, selector: "app-attachment-section", inputs: ["className", "attachmentsMax", "isSortable", "downloadAll", "isRequired", "descriptionRequired", "commentsRequired", "allowedExtensions"], outputs: ["emitedValue"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: RequestDetailsSectionComponent, isStandalone: true, selector: "app-request-details-section", inputs: { isReadOnly: "isReadOnly", section: "section", form: "form", lov: "lov", className: "className" }, ngImport: i0, template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"true\"\r\n      [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n    <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n    <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n    <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n    <app-custom-searchable\r\n      class=\"section-item mb-0 full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"customSearchable\"\r\n      label=\"Custom-searchable\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-custom-searchable>\r\n    <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>\r\n    <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n    <app-datepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePicker\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"></app-datepicker>\r\n    <app-date-range-picker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePickerRange\"\r\n      label=\"Date-picker-range\"\r\n      [matSuffix]=\"true\"></app-date-range-picker>\r\n    <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>\r\n    <app-toggle-button\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"toggle\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-toggle-button>\r\n    <app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [multiple]=\"false\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\"></app-file-uploader>\r\n    <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"false\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section>\r\n\r\n\r\n    <!-- <app-table\r\n    [columnsConfig]=\"columnsConfig\"\r\n    [columns]=\"columns\"\r\n    [isError]=\"isError\"\r\n    [isLoading]=\"isLoading\"\r\n    [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n    [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n    [totalElements]=\"totalElements\"\r\n    (pageChange)=\"pageChanged($event)\"\r\n    class=\"new-primary-table full\">\r\n    </app-table> -->\r\n\r\n\r\n  </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"formGroup\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1", "customErrorMessages"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType", "fieldsForm", "form", "section", "sections", "showApprovalCycle", "customCall"], outputs: ["resetFormEmit", "customCallEmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "component", type: CheckBoxComponent, selector: "app-checkbox", inputs: ["containTerms", "termsLabel", "linkText", "hrefLink", "link", "termsBody"], outputs: ["downloadCheckBox"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar"] }, { kind: "component", type: InputCurrencyComponent, selector: "app-input-currency", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName"] }, { kind: "component", type: DatePickerComponent, selector: "app-datepicker", inputs: ["className", "calendarType", "yearOnly", "error", "format"], outputs: ["dateValue"] }, { kind: "component", type: DateRangePickerComponent, selector: "app-date-range-picker", inputs: ["className", "yearOnly", "calendarType"] }, { kind: "component", type: InputEmailComponent, selector: "app-input-email", inputs: ["floatLabel", "className", "matPrefix", "iconPrefixName", "iconSuffixName", "numberSuffixName"] }, { kind: "component", type: InputNumberComponent, selector: "app-input-number", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName", "allowedPattern"], outputs: ["emitedChangedValue"] }, { kind: "component", type: RadioComponent, selector: "app-radio", inputs: ["options"] }, { kind: "component", type: ToggleButtonComponent, selector: "app-toggle-button", inputs: ["className", "data", "error", "optionAr", "optionEn", "hasHint", "options", "displayedLabel", "key"], outputs: ["onChange"] }, { kind: "component", type: InputTelephoneComponent, selector: "app-input-telephone", inputs: ["floatLabel", "className"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "signType", "customDownload", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "component", type: SearchEmployeeComponent, selector: "app-search-employee", inputs: ["valueName", "className", "optional", "data", "floatLabel", "error", "showEdit", "arrayList", "isUniqueUsers"], outputs: ["selectedEmp", "onInputChange", "editDirectManger", "deleteDirectManger", "emitedDeletedValue"] }, { kind: "component", type: AttachmentSectionComponent, selector: "app-attachment-section", inputs: ["className", "customDownload", "attachmentsMax", "isSortable", "downloadAll", "isRequired", "descriptionRequired", "commentsRequired", "allowedExtensions"], outputs: ["downloadActionClicked", "emitedValue"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RequestDetailsSectionComponent, decorators: [{
             type: Component,