bpm-core 0.0.91 → 0.0.92

package/fesm2022/bpm-core.mjs

@@ -25,9 +25,9 @@ import { MatInput, MatInputModule } from '@angular/material/input';
 import * as i1$2 from '@ncstate/sat-popover';
 import { SatPopoverModule } from '@ncstate/sat-popover';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { format } from 'date-fns';
 import * as i1$4 from '@angular/material/autocomplete';
 import { MatAutocomplete, MatOption, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
-import { format } from 'date-fns';
 import { NgxMaskDirective } from 'ngx-mask';
 import * as i3$1 from 'ngx-intl-tel-input-gg';
 import { CountryISO, SearchCountryField, NgxIntlTelInputModule } from 'ngx-intl-tel-input-gg';
@@ -2044,8 +2044,11 @@ class InfoItemComponent {
     getImage(email) {
         return '/group/i-gate/wm-bpm/forms/-/proxy/portrait?email=' + email;
     }
+    getDate(date) {
+        return format(new Date(date), "dd/MM/yyyy");
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InfoItemComponent, deps: [{ token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: InfoItemComponent, isStandalone: true, selector: "app-info-item", inputs: { label: "label", value: "value", name: "name", type: "type", dateType: "dateType", multiple: "multiple", insideTable: "insideTable", hasLabel: "hasLabel", arrayList: "arrayList", actionType: "actionType", download: "download" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\r\n  @if(label){\r\n    <span class=\"name \">{{ label }}</span>\r\n  }\r\n\r\n  <!-- class=\"disc\" -->\r\n  <span *ngSwitchCase=\"'attach'\">\r\n<!--    <app-docs-uploader [field]=\"value\" styleHeight=\"mini\" display=\"only-files\"></app-docs-uploader>-->\r\n  </span>\r\n  <span class=\"disc mt-2 \" *ngSwitchCase=\"'user-picker'\">\r\n    @if(!multiple){\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"img-card circled-img small\">\r\n          <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n        </div>\r\n        <div class=\"line-height-1 mx-2\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n          <h6 class=\"fs-14 fw-bold fc-onyx mb-0\">{{name}}</h6>\r\n          <span class=\"fs-12 fc-dark-gray\">{{value}}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @if(multiple){\r\n      @if(multiple){\r\n        <ng-container>\r\n            @for (emails of arrayList; track $index; let ind = $index) {\r\n          <div class=\"d-flex flex-wrap\">\r\n              <ng-container>\r\n                <div class=\"img-card circled-img small mb-3\">\r\n                  <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n                </div>\r\n                <div class=\"line-height-1 mx-2 mb-3\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n                  <h6 class=\"fs-14 fw-bold fc-onyx mb-0\"> {{(emails?.['personName'])}}</h6>\r\n                  <span class=\"fs-12 fc-dark-gray\"> {{emails?.['personEmail']}}</span>\r\n                </div>\r\n              </ng-container>\r\n          </div>\r\n            }\r\n        </ng-container>\r\n      }\r\n    }\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggle'\">\r\n    <mat-slide-toggle [checked]=\"value\"></mat-slide-toggle>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggleBtn'\">\r\n    <span>{{value}}</span>\r\n  </span>\r\n  <span class=\"disc\" *ngSwitchCase=\"'telephone'\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <bdi>{{ value }}</bdi>\r\n    </div>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'currency'\">\r\n    <span>{{value  | number:'1.2-2'}}</span>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'date'\">\r\n    @if(dateType === 'hijri'){\r\n      <span>\r\n        {{ value }}\r\n      </span>\r\n    }\r\n   @if(dateType === 'yearOnly'){\r\n    <span>\r\n      {{ value }}\r\n    </span>\r\n   }\r\n@if(dateType !== 'hijri' && dateType !== 'yearOnly' && !value?.startDate){\r\n  <span>\r\n    {{value  | date :'dd/MM/yyyy'}}\r\n  </span>\r\n}\r\n  @if(dateType !== 'hijri' && dateType !== 'yearOnly' && value?.startDate){\r\n    <span>\r\n      {{value?.['startDate']  | date :'dd/MM/yyyy'}}\r\n      -\r\n      {{value?.['endDate']  | date :'dd/MM/yyyy'}}\r\n    </span>\r\n  }\r\n\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'dateHijri'\">\r\n    {{ value }}\r\n  </span>\r\n\r\n  <span class=\"disc breakLine fc-coral cursor-pointer\" *ngSwitchCase=\"'link'\">\r\n    <a [href]=\"value\" target=\"_blank\">{{'View' | translate}} {{ label }} </a>\r\n  </span>\r\n  <span class=\"disc breakLine\" *ngSwitchCase=\"'formIdLink'\">\r\n    <a (click)=\"viewForm(value)\">{{ value }} </a>\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'text'\">\r\n    {{ value }}\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \"  *ngSwitchCase=\"'multipleSelect'\">\r\n    @for(item of value; track $index; let i =$index){\r\n      <span>{{item.value}}\r\n        @if(!(i === value.length-1)){\r\n          <span>, </span>\r\n        }\r\n    </span>\r\n    }\r\n\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" [innerHTML]=\"value\" *ngSwitchDefault>\r\n  </span>\r\n</ng-container>\r\n", styles: [":host.slide-end .disc{text-align:end}:host.user-picker{border-radius:4px;padding:1rem;background-color:var(--light-gray);max-width:320px;width:100%}:host.user-picker .name{display:none}:host.user-picker .disc{width:100%}.name{width:270px;font-size:.875rem;font-weight:var(--font-medium);color:var(--dark-gray);margin-bottom:0;display:inline-block}.disc{width:calc(100% - 270px);font-size:.875rem;font-weight:var(--font-regular);color:var(--black);display:inline-block}@media (max-width: 768px){.name,.disc{width:100%!important}}.breakLine{line-break:anywhere}a{color:#0d6efd!important}a:hover{cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: InfoItemComponent, isStandalone: true, selector: "app-info-item", inputs: { label: "label", value: "value", name: "name", type: "type", dateType: "dateType", multiple: "multiple", insideTable: "insideTable", hasLabel: "hasLabel", arrayList: "arrayList", actionType: "actionType", download: "download" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\r\n  @if(label){\r\n    <span class=\"name \">{{ label }}</span>\r\n  }\r\n\r\n  <!-- class=\"disc\" -->\r\n  <span *ngSwitchCase=\"'attach'\">\r\n<!--    <app-docs-uploader [field]=\"value\" styleHeight=\"mini\" display=\"only-files\"></app-docs-uploader>-->\r\n  </span>\r\n  <span class=\"disc mt-2 \" *ngSwitchCase=\"'user-picker'\">\r\n    @if(!multiple){\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"img-card circled-img small\">\r\n          <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n        </div>\r\n        <div class=\"line-height-1 mx-2\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n          <h6 class=\"fs-14 fw-bold fc-onyx mb-0\">{{name}}</h6>\r\n          <span class=\"fs-12 fc-dark-gray\">{{value}}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @if(multiple){\r\n      @if(multiple){\r\n        <ng-container>\r\n            @for (emails of arrayList; track $index; let ind = $index) {\r\n          <div class=\"d-flex flex-wrap\">\r\n              <ng-container>\r\n                <div class=\"img-card circled-img small mb-3\">\r\n                  <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n                </div>\r\n                <div class=\"line-height-1 mx-2 mb-3\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n                  <h6 class=\"fs-14 fw-bold fc-onyx mb-0\"> {{(emails?.['personName'])}}</h6>\r\n                  <span class=\"fs-12 fc-dark-gray\"> {{emails?.['personEmail']}}</span>\r\n                </div>\r\n              </ng-container>\r\n          </div>\r\n            }\r\n        </ng-container>\r\n      }\r\n    }\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggle'\">\r\n    <mat-slide-toggle [checked]=\"value\"></mat-slide-toggle>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggleBtn'\">\r\n    <span>{{value}}</span>\r\n  </span>\r\n  <span class=\"disc\" *ngSwitchCase=\"'telephone'\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <bdi>{{ value }}</bdi>\r\n    </div>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'currency'\">\r\n    <span>{{value  | number:'1.2-2'}}</span>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'date'\">\r\n    @if(dateType === 'hijri'){\r\n      <span>\r\n        {{ value }}\r\n      </span>\r\n    }\r\n   @if(dateType === 'yearOnly'){\r\n    <span>\r\n      {{ value }}\r\n    </span>\r\n   }\r\n@if(dateType !== 'hijri' && dateType !== 'yearOnly' && !value?.startDate){\r\n  <span>\r\n    {{value  | date :'dd/MM/yyyy' : 'GMT+3'}}\r\n<!--    {{ getDate(value) }}-->\r\n  </span>\r\n}\r\n  @if(dateType !== 'hijri' && dateType !== 'yearOnly' && value?.startDate){\r\n    <span>\r\n      {{value?.['startDate']  | date :'dd/MM/yyyy'}}\r\n      -\r\n      {{value?.['endDate']  | date :'dd/MM/yyyy'}}\r\n    </span>\r\n  }\r\n\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'dateHijri'\">\r\n    {{ value }}\r\n  </span>\r\n\r\n  <span class=\"disc breakLine fc-coral cursor-pointer\" *ngSwitchCase=\"'link'\">\r\n    <a [href]=\"value\" target=\"_blank\">{{'View' | translate}} {{ label }} </a>\r\n  </span>\r\n  <span class=\"disc breakLine\" *ngSwitchCase=\"'formIdLink'\">\r\n    <a (click)=\"viewForm(value)\">{{ value }} </a>\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'text'\">\r\n    {{ value }}\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \"  *ngSwitchCase=\"'multipleSelect'\">\r\n    @for(item of value; track $index; let i =$index){\r\n      <span>{{item.value}}\r\n        @if(!(i === value.length-1)){\r\n          <span>, </span>\r\n        }\r\n    </span>\r\n    }\r\n\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" [innerHTML]=\"value\" *ngSwitchDefault>\r\n  </span>\r\n</ng-container>\r\n", styles: [":host.slide-end .disc{text-align:end}:host.user-picker{border-radius:4px;padding:1rem;background-color:var(--light-gray);max-width:320px;width:100%}:host.user-picker .name{display:none}:host.user-picker .disc{width:100%}.name{width:270px;font-size:.875rem;font-weight:var(--font-medium);color:var(--dark-gray);margin-bottom:0;display:inline-block}.disc{width:calc(100% - 270px);font-size:.875rem;font-weight:var(--font-regular);color:var(--black);display:inline-block}@media (max-width: 768px){.name,.disc{width:100%!important}}.breakLine{line-break:anywhere}a{color:#0d6efd!important}a:hover{cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InfoItemComponent, decorators: [{
             type: Component,
@@ -2058,7 +2061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         NgSwitchDefault,
                         NgSwitch,
                         TranslatePipe
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container [ngSwitch]=\"type\">\r\n  @if(label){\r\n    <span class=\"name \">{{ label }}</span>\r\n  }\r\n\r\n  <!-- class=\"disc\" -->\r\n  <span *ngSwitchCase=\"'attach'\">\r\n<!--    <app-docs-uploader [field]=\"value\" styleHeight=\"mini\" display=\"only-files\"></app-docs-uploader>-->\r\n  </span>\r\n  <span class=\"disc mt-2 \" *ngSwitchCase=\"'user-picker'\">\r\n    @if(!multiple){\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"img-card circled-img small\">\r\n          <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n        </div>\r\n        <div class=\"line-height-1 mx-2\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n          <h6 class=\"fs-14 fw-bold fc-onyx mb-0\">{{name}}</h6>\r\n          <span class=\"fs-12 fc-dark-gray\">{{value}}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @if(multiple){\r\n      @if(multiple){\r\n        <ng-container>\r\n            @for (emails of arrayList; track $index; let ind = $index) {\r\n          <div class=\"d-flex flex-wrap\">\r\n              <ng-container>\r\n                <div class=\"img-card circled-img small mb-3\">\r\n                  <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n                </div>\r\n                <div class=\"line-height-1 mx-2 mb-3\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n                  <h6 class=\"fs-14 fw-bold fc-onyx mb-0\"> {{(emails?.['personName'])}}</h6>\r\n                  <span class=\"fs-12 fc-dark-gray\"> {{emails?.['personEmail']}}</span>\r\n                </div>\r\n              </ng-container>\r\n          </div>\r\n            }\r\n        </ng-container>\r\n      }\r\n    }\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggle'\">\r\n    <mat-slide-toggle [checked]=\"value\"></mat-slide-toggle>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggleBtn'\">\r\n    <span>{{value}}</span>\r\n  </span>\r\n  <span class=\"disc\" *ngSwitchCase=\"'telephone'\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <bdi>{{ value }}</bdi>\r\n    </div>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'currency'\">\r\n    <span>{{value  | number:'1.2-2'}}</span>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'date'\">\r\n    @if(dateType === 'hijri'){\r\n      <span>\r\n        {{ value }}\r\n      </span>\r\n    }\r\n   @if(dateType === 'yearOnly'){\r\n    <span>\r\n      {{ value }}\r\n    </span>\r\n   }\r\n@if(dateType !== 'hijri' && dateType !== 'yearOnly' && !value?.startDate){\r\n  <span>\r\n    {{value  | date :'dd/MM/yyyy'}}\r\n  </span>\r\n}\r\n  @if(dateType !== 'hijri' && dateType !== 'yearOnly' && value?.startDate){\r\n    <span>\r\n      {{value?.['startDate']  | date :'dd/MM/yyyy'}}\r\n      -\r\n      {{value?.['endDate']  | date :'dd/MM/yyyy'}}\r\n    </span>\r\n  }\r\n\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'dateHijri'\">\r\n    {{ value }}\r\n  </span>\r\n\r\n  <span class=\"disc breakLine fc-coral cursor-pointer\" *ngSwitchCase=\"'link'\">\r\n    <a [href]=\"value\" target=\"_blank\">{{'View' | translate}} {{ label }} </a>\r\n  </span>\r\n  <span class=\"disc breakLine\" *ngSwitchCase=\"'formIdLink'\">\r\n    <a (click)=\"viewForm(value)\">{{ value }} </a>\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'text'\">\r\n    {{ value }}\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \"  *ngSwitchCase=\"'multipleSelect'\">\r\n    @for(item of value; track $index; let i =$index){\r\n      <span>{{item.value}}\r\n        @if(!(i === value.length-1)){\r\n          <span>, </span>\r\n        }\r\n    </span>\r\n    }\r\n\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" [innerHTML]=\"value\" *ngSwitchDefault>\r\n  </span>\r\n</ng-container>\r\n", styles: [":host.slide-end .disc{text-align:end}:host.user-picker{border-radius:4px;padding:1rem;background-color:var(--light-gray);max-width:320px;width:100%}:host.user-picker .name{display:none}:host.user-picker .disc{width:100%}.name{width:270px;font-size:.875rem;font-weight:var(--font-medium);color:var(--dark-gray);margin-bottom:0;display:inline-block}.disc{width:calc(100% - 270px);font-size:.875rem;font-weight:var(--font-regular);color:var(--black);display:inline-block}@media (max-width: 768px){.name,.disc{width:100%!important}}.breakLine{line-break:anywhere}a{color:#0d6efd!important}a:hover{cursor:pointer}\n"] }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container [ngSwitch]=\"type\">\r\n  @if(label){\r\n    <span class=\"name \">{{ label }}</span>\r\n  }\r\n\r\n  <!-- class=\"disc\" -->\r\n  <span *ngSwitchCase=\"'attach'\">\r\n<!--    <app-docs-uploader [field]=\"value\" styleHeight=\"mini\" display=\"only-files\"></app-docs-uploader>-->\r\n  </span>\r\n  <span class=\"disc mt-2 \" *ngSwitchCase=\"'user-picker'\">\r\n    @if(!multiple){\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"img-card circled-img small\">\r\n          <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n        </div>\r\n        <div class=\"line-height-1 mx-2\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n          <h6 class=\"fs-14 fw-bold fc-onyx mb-0\">{{name}}</h6>\r\n          <span class=\"fs-12 fc-dark-gray\">{{value}}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @if(multiple){\r\n      @if(multiple){\r\n        <ng-container>\r\n            @for (emails of arrayList; track $index; let ind = $index) {\r\n          <div class=\"d-flex flex-wrap\">\r\n              <ng-container>\r\n                <div class=\"img-card circled-img small mb-3\">\r\n                  <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n                </div>\r\n                <div class=\"line-height-1 mx-2 mb-3\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n                  <h6 class=\"fs-14 fw-bold fc-onyx mb-0\"> {{(emails?.['personName'])}}</h6>\r\n                  <span class=\"fs-12 fc-dark-gray\"> {{emails?.['personEmail']}}</span>\r\n                </div>\r\n              </ng-container>\r\n          </div>\r\n            }\r\n        </ng-container>\r\n      }\r\n    }\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggle'\">\r\n    <mat-slide-toggle [checked]=\"value\"></mat-slide-toggle>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggleBtn'\">\r\n    <span>{{value}}</span>\r\n  </span>\r\n  <span class=\"disc\" *ngSwitchCase=\"'telephone'\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <bdi>{{ value }}</bdi>\r\n    </div>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'currency'\">\r\n    <span>{{value  | number:'1.2-2'}}</span>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'date'\">\r\n    @if(dateType === 'hijri'){\r\n      <span>\r\n        {{ value }}\r\n      </span>\r\n    }\r\n   @if(dateType === 'yearOnly'){\r\n    <span>\r\n      {{ value }}\r\n    </span>\r\n   }\r\n@if(dateType !== 'hijri' && dateType !== 'yearOnly' && !value?.startDate){\r\n  <span>\r\n    {{value  | date :'dd/MM/yyyy' : 'GMT+3'}}\r\n<!--    {{ getDate(value) }}-->\r\n  </span>\r\n}\r\n  @if(dateType !== 'hijri' && dateType !== 'yearOnly' && value?.startDate){\r\n    <span>\r\n      {{value?.['startDate']  | date :'dd/MM/yyyy'}}\r\n      -\r\n      {{value?.['endDate']  | date :'dd/MM/yyyy'}}\r\n    </span>\r\n  }\r\n\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'dateHijri'\">\r\n    {{ value }}\r\n  </span>\r\n\r\n  <span class=\"disc breakLine fc-coral cursor-pointer\" *ngSwitchCase=\"'link'\">\r\n    <a [href]=\"value\" target=\"_blank\">{{'View' | translate}} {{ label }} </a>\r\n  </span>\r\n  <span class=\"disc breakLine\" *ngSwitchCase=\"'formIdLink'\">\r\n    <a (click)=\"viewForm(value)\">{{ value }} </a>\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'text'\">\r\n    {{ value }}\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \"  *ngSwitchCase=\"'multipleSelect'\">\r\n    @for(item of value; track $index; let i =$index){\r\n      <span>{{item.value}}\r\n        @if(!(i === value.length-1)){\r\n          <span>, </span>\r\n        }\r\n    </span>\r\n    }\r\n\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" [innerHTML]=\"value\" *ngSwitchDefault>\r\n  </span>\r\n</ng-container>\r\n", styles: [":host.slide-end .disc{text-align:end}:host.user-picker{border-radius:4px;padding:1rem;background-color:var(--light-gray);max-width:320px;width:100%}:host.user-picker .name{display:none}:host.user-picker .disc{width:100%}.name{width:270px;font-size:.875rem;font-weight:var(--font-medium);color:var(--dark-gray);margin-bottom:0;display:inline-block}.disc{width:calc(100% - 270px);font-size:.875rem;font-weight:var(--font-regular);color:var(--black);display:inline-block}@media (max-width: 768px){.name,.disc{width:100%!important}}.breakLine{line-break:anywhere}a{color:#0d6efd!important}a:hover{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: CoreI18nService }], propDecorators: { label: [{
                 type: Input
             }], value: [{
@@ -7492,7 +7495,7 @@ class RequestDetailsSectionComponent {
             // customSearchable: new FormControl(null, Validators.required),
             // checkbox: new FormControl(null, [Validators.requiredTrue, Validators.required]),
             // textArea: new FormControl(null, [Validators.required, Validators.maxLength(5)]),
-            // datePicker: new FormControl(null, Validators.required),
+            datePicker: new FormControl(null, Validators.required),
             // datePickerRange: new FormControl(null, Validators.required),
             // radio: new FormControl(null, Validators.required),
             // toggle: new FormControl(null, Validators.required),
@@ -7500,7 +7503,7 @@ class RequestDetailsSectionComponent {
             // searchEmployee: new FormControl(null, Validators.required),
             // // ...newForm,
             // attachment: new FormControl(null, Validators.required),
-            attachmentSection: new FormControl([], Validators.required),
+            // attachmentSection: new FormControl([], Validators.required),
         });
         this.lov?.['decision']?.options?.forEach(option => {
             let isActionValid = this.checkValidity(option.value);
@@ -7532,6 +7535,7 @@ class RequestDetailsSectionComponent {
             this.lov?.['decision']?.options?.forEach(option => {
                 let isActionValid = this.checkValidity(option.value);
                 this.actionStateService.setActionValid(option.value, isActionValid);
+                this.section.body.details = { ...this.section.body.details, ...this.formGroup.value };
             });
         });
     }
@@ -7617,7 +7621,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    <app-input class=\"section-item full\" [isReadOnly]=\"false\" [required]=\"false\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\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    <!--\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-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?.['decision']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'description'\"\r\n      [key]=\"'value'\"></app-toggle-button>-->\r\n    <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\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-->\r\n\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    <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  </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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: AttachmentSectionComponent, selector: "app-attachment-section", inputs: ["className", "customDownload", "attachmentsMax", "isSortable", "downloadAll", "isRequired", "descriptionRequired", "commentsRequired", "allowedExtensions"], outputs: ["downloadActionClicked", "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    <app-input class=\"section-item full\" [isReadOnly]=\"false\" [required]=\"false\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\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    <!--\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-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\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?.['decision']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'description'\"\r\n      [key]=\"'value'\"></app-toggle-button>-->\r\n    <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\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\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\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      <app-datepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"true\"\r\n      formControlName=\"datePicker\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"></app-datepicker>\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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: DatePickerComponent, selector: "app-datepicker", inputs: ["className", "calendarType", "yearOnly", "error", "format"], outputs: ["dateValue"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RequestDetailsSectionComponent, decorators: [{
             type: Component,
@@ -7642,7 +7646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         AttachmentSectionComponent,
                         TableComponent,
                         TranslatePipe
-                    ], template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n    <app-input class=\"section-item full\" [isReadOnly]=\"false\" [required]=\"false\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\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    <!--\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-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?.['decision']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'description'\"\r\n      [key]=\"'value'\"></app-toggle-button>-->\r\n    <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\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-->\r\n\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    <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  </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"] }]
+                    ], template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n    <app-input class=\"section-item full\" [isReadOnly]=\"false\" [required]=\"false\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\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    <!--\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-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\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?.['decision']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'description'\"\r\n      [key]=\"'value'\"></app-toggle-button>-->\r\n    <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\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\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\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      <app-datepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"true\"\r\n      formControlName=\"datePicker\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"></app-datepicker>\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"] }]
         }], ctorParameters: () => [{ type: CoreI18nService }, { type: i4.FormBuilder }, { type: ActionStateService }], propDecorators: { isReadOnly: [{
                 type: Input
             }], section: [{