bpm-core 0.0.128 → 0.0.129

package/README.md

@@ -11,7 +11,7 @@
   To see all available commands, run:
 
   ```bash
-  bpm-core --help
+  npx bpm-core --help
   ```
 
   The BPM Core CLI includes several helper scripts. You can run any script using its corresponding command.
@@ -20,8 +20,8 @@
 
   ---
 
-  - `deploy`  
-    Use this command to deploy your service (currently supports only **library services**) to one of the following environments: `dev`, `sit`, or `bat`.
+  - `deploy` (supports only library services)
+    Use this command to deploy your service to one of the following environments: `dev`, `sit`, or `bat`.
 
     The deployment process includes:
     - Running the Angular build  
@@ -32,14 +32,26 @@
     In your terminal, navigate to the service directory and run the following command:
 
     ```bash
-    bpm-core deploy --env sit --repo-path D:\stc\build\sit --commit-msg "COW: correct typo in Arabic translation" --remote-dir "cow-new" --username jenkinsUserName --token jenkinsTokenOrPassword
+    npx bpm-core deploy --env sit --repo-path D:\stc\build\sit --commit-msg "COW: correct typo in Arabic translation" --remote-dir "cow-new" --username jenkinsUserName --token jenkinsTokenOrPassword
     ```
 
     **For more details about available options**, run:
 
     ```bash
-    bpm-core deploy --help
+    npx bpm-core deploy --help
     ```
+  - `generate` (alias: `g`) — *Supports only library services* Provides subcommands for generating development utilities used in your service.
+    - `mock` (alias: `m`) Use this subcommand to generate mock data for your service. The generated mock data will be saved in your service root as a file named `mock-output.json`.
+
+      **Example usage**  
+      In your terminal, navigate to the service directory and run the following command:
+
+      ```bash
+      npx bpm-core generate mock
+      # or using aliases
+      npx bpm-core g m
+      ```
+
 
 
 - ### [Input Mapping and Filtering](#input-mapping-and-filtering)
@@ -200,6 +212,11 @@
 
 ## [Changes Log](#changes-log)
 
+<a id="bpm-core00129-2025-09-01"></a>
+### [bpm-core@0.0.129 — 2025-09-01](#bpm-core00129-2025-09-01)
+- feat(cli): add generate command with mock subcommand to produce mock data
+- fix(file-uploader): update max length error visibility when removing an attachment from multiple files.
+
 <a id="bpm-core00128-2025-08-25"></a>
 ### [bpm-core@0.0.128 — 2025-08-25](#bpm-core00128-2025-08-25)
 - feat(cli): implement BPM Core CLI with deploy command.

package/cli/generate/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateCommand = void 0;
+const commander_1 = require("commander");
+const mock_1 = require("./mock");
+exports.generateCommand = new commander_1.Command('generate');
+exports.generateCommand.alias('g');
+exports.generateCommand.addCommand(mock_1.generateMockDataCommand);

package/cli/generate/mock/form-node.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ControlNode = exports.GroupNode = void 0;
+const lov_1 = require("./lov");
+const randomNumber = () => Math.floor(Math.random() * 100);
+const CONTROL_MOCK_MAP = {
+    'app-input': () => `Sample text ${randomNumber()}`,
+    'app-textarea': () => `Multiline ${randomNumber()}\nText ${randomNumber()}\nHere ${randomNumber()}`,
+    'app-datepicker': () => new Date().toISOString(),
+    'app-input-number': () => randomNumber().toString(),
+    'app-custom-searchable': (control) => {
+        const lovName = control.options?.options?.match(/lov\??\.(?<lovName>\w+?)\??\.options/)?.groups?.lovName || control.name;
+        return (0, lov_1.getLOVFieldValue)(lovName);
+    },
+    'app-checkbox': () => "false",
+    'app-search-employee': () => ({
+        "personName": "Jehad Saleh A Alluhayd",
+        "personEmail": "jsalluhayd@stc.com.sa"
+    }),
+    'app-file-uploader': (control) => {
+        const attachment = () => ({
+            "fileName": `ajm_location_issue_${randomNumber()}.png`,
+            "attachmentId": `b7d2915d-930e-4e93-930e-3675a5959ba8${randomNumber()}`,
+            "mimeType": "image\/png"
+        });
+        control.options?.multiple === 'true' ? [attachment(), attachment()] : attachment();
+    },
+    'app-input-currency': () => '123' + randomNumber().toString(),
+    'app-attachment-section': () => {
+        const attachment = () => ({
+            "fileDescription": "desc " + randomNumber(),
+            "attachmentcomment": "comm " + randomNumber(),
+            "fileComments": "comm " + randomNumber(),
+            "fileName": `dummy_${randomNumber()}.pdf`,
+            "attachmentId": "idd_40910B7B-0000-CE16-BD92-EC800D2FDFC6" + randomNumber(),
+            "mimeType": "application/pdf"
+        });
+        return [attachment(), attachment()];
+    },
+    'app-radio': (control) => {
+        const lovName = control.options?.options?.match(/lov\??\.(?<lovName>\w+?)\??\.options/)?.groups?.lovName || control.name;
+        return (0, lov_1.getLOVFieldValue)(lovName);
+    },
+};
+class FormNode {
+}
+class GroupNode extends FormNode {
+    constructor(name, children = {}) {
+        super();
+        this.name = name;
+        this.children = children;
+    }
+    getValue() {
+        const output = {};
+        for (const key in this.children) {
+            output[key] = this.children[key].getValue();
+        }
+        return output;
+    }
+    addChild(child) {
+        this.children[child.name] = child;
+    }
+}
+exports.GroupNode = GroupNode;
+class ControlNode extends FormNode {
+    constructor(name, tag, options) {
+        super();
+        this.name = name;
+        this.tag = tag;
+        this.options = options;
+    }
+    getValue() {
+        const generator = CONTROL_MOCK_MAP[this.tag] || (() => 'Unknown');
+        return generator(this);
+    }
+}
+exports.ControlNode = ControlNode;

package/cli/generate/mock/index.js

@@ -0,0 +1,207 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateMockDataCommand = void 0;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const cheerio = __importStar(require("cheerio"));
+const commander_1 = require("commander");
+const form_node_1 = require("./form-node");
+const lov_1 = require("./lov");
+exports.generateMockDataCommand = new commander_1.Command('mock');
+exports.generateMockDataCommand.alias('m');
+exports.generateMockDataCommand.action((options) => {
+    main();
+});
+const projectRoot = process.cwd();
+const serviceName = path.basename(projectRoot);
+const configDir = path.join(projectRoot, 'src', 'app', 'config');
+const configFile = path.join(configDir, 'segment-dynamic-loader.config.ts');
+function extractComponentPaths(configContent) {
+    const importRegex = /import\s*{\s*(?<name>\w+)\s*}\s+from\s+['"](?<path>.+?)['"]/g;
+    const imports = [...configContent.matchAll(importRegex)].reduce((prev, curr) => {
+        prev.push(curr.groups);
+        return prev;
+    }, []);
+    const exportRegex = /roleToApprovalSectionMapping\s*:\s*{([^}]+)}/s;
+    const exportMatch = configContent.match(exportRegex);
+    const body = exportMatch[1];
+    const usageRegex = /\s*(?<role>\w+)\s*:\s*(?<name>\w+)/g;
+    const roleToCompClassName = [...body.matchAll(usageRegex)].reduce((prev, curr) => {
+        prev.push(curr.groups);
+        return prev;
+    }, []);
+    const roleToRealCompPath = roleToCompClassName.reduce((prev, curr) => {
+        const importPathInConfigFile = imports.find((imp) => imp.name === curr.name).path;
+        const realPath = path.join(configDir, importPathInConfigFile + '.ts');
+        prev.push({ role: curr.role, path: realPath });
+        return prev;
+    }, []);
+    return roleToRealCompPath;
+}
+function getTemplatePath(componentTsPath) {
+    if (!fs.existsSync(componentTsPath))
+        return null;
+    const content = fs.readFileSync(componentTsPath, 'utf-8');
+    const match = content.match(/templateUrl\s*:\s*['"](.+?)['"]/);
+    if (!match)
+        return null;
+    return path.resolve(path.dirname(componentTsPath), match[1]);
+}
+function parseAttributesWithoutBinding(attributes) {
+    const attrAsString = JSON.stringify(attributes);
+    const output = [...attrAsString.matchAll(/"\[?(?<name>[^"]+?)\]?"\s*?:\s*?"(?<value>[^"]+?)"/g)].reduce((prev, curr) => {
+        prev[curr.groups.name] = curr.groups.value;
+        return prev;
+    }, {});
+    return output;
+}
+function parseFormControls($, $el, groupNode) {
+    $el.children().each((_, child) => {
+        const tagName = child.tagName.toLowerCase();
+        const formGroup = child.attribs?.formgroupname;
+        const formControl = child.attribs?.formcontrolname;
+        if (formGroup) {
+            const childGroup = new form_node_1.GroupNode(formGroup);
+            groupNode.addChild(childGroup);
+            parseFormControls($, $(child), childGroup);
+        }
+        if (formControl) {
+            const options = parseAttributesWithoutBinding(child.attribs);
+            groupNode.addChild(new form_node_1.ControlNode(formControl, tagName, options));
+        }
+    });
+    return groupNode;
+}
+function getTemplateMockData(templatePath) {
+    if (!fs.existsSync(templatePath)) {
+        throw new Error(`Template not found: ${templatePath}`);
+    }
+    const html = fs.readFileSync(templatePath, 'utf-8');
+    const $ = cheerio.load(html);
+    const $form = $('form');
+    const controlsTree = parseFormControls($, $form, new form_node_1.GroupNode(''));
+    return controlsTree.getValue();
+}
+function buildPayloadWithMockData(roleToStageMockMap, requestMock) {
+    const workflowSteps = Object.entries(roleToStageMockMap).map(([role, stageMock]) => {
+        return {
+            "actor": {
+                "delegate": null,
+                "recipient": {
+                    "role": role.toUpperCase(),
+                    "name": "Sami Sulaiman M Alfayez",
+                    "shortName": null,
+                    "email": "sfayez@stc.com.sa",
+                    "employeeNumber": null
+                },
+                "email": "sfayez@stc.com.sa",
+                "status": "COMPLETED"
+            },
+            "date": "2025-07-31T13:11:28.584+03:00",
+            "details": {
+                ...stageMock,
+                "decision": {
+                    "value": "Pending",
+                    "key": "PENDING"
+                }
+            }
+        };
+    });
+    const output = {
+        "data": {
+            "requester": {
+                "departmentName": "Enterprise HR Business Partner Section_Private",
+                "directManagerName": "Hissah Ibrahim M Bin Zuayr",
+                "generalDepartmentName": "",
+                "generalDepartmentCode": "",
+                "onBehalfAuthorized": "false",
+                "employeeEmail": "iimran@stc.com.sa",
+                "fullName": "Ibrahim A. Alimran",
+                "employeeId": "",
+                "sectorName": "",
+                "seniorSectorName": "",
+                "humanResourceLocation": "",
+                "jobPosition": "",
+                "nationality": "",
+                "businessPhone": "966555008873"
+            },
+            workflowSteps,
+            "request": {
+                "details": requestMock
+            },
+            "form": {
+                "formId": `${serviceName.toUpperCase()}5000015`,
+                "currentActor": {
+                    "name": "Ibrahim Ahmed M Alimran",
+                    "email": "iimran@stc.com.sa"
+                },
+                "formName": serviceName.toUpperCase(),
+                "formStatus": {
+                    "value": "Pending",
+                    "key": "PENDING"
+                },
+                "readOnly": "false",
+                "formStep": workflowSteps[workflowSteps.length - 1].actor.recipient.role,
+                "creationDate": "2025-07-28T20:13:11.650+03:00"
+            }
+        },
+        "meta": {
+            "decision": {
+                "options": [
+                    {
+                        "description": "Submit to Account manager",
+                        "value": "SUBMIT_TO_ACCOUNT_MANAGER",
+                    },
+                    {
+                        "description": "Send Back",
+                        "value": "SENDBACK",
+                    }
+                ],
+                "type": "button"
+            },
+            ...(0, lov_1.getLOVs)()
+        }
+    };
+    return output;
+}
+function main() {
+    if (!fs.existsSync(configFile)) {
+        throw new Error(`Config file not found: ${configFile}`);
+    }
+    const configContent = fs.readFileSync(configFile, 'utf-8');
+    const componentPaths = extractComponentPaths(configContent);
+    const stageMocks = {};
+    for (const { role, path: tsPath } of componentPaths) {
+        const templatePath = getTemplatePath(tsPath);
+        stageMocks[role] = getTemplateMockData(templatePath);
+    }
+    const requestTemplatePath = path.join(projectRoot, '/src/app/page-components/request-details-section/request-details-section.component.html');
+    const requestMock = getTemplateMockData(requestTemplatePath);
+    const payload = buildPayloadWithMockData(stageMocks, requestMock);
+    const outputPath = projectRoot + '/mock-output.json';
+    fs.writeFileSync(outputPath, JSON.stringify(payload, null, 2), 'utf-8');
+    console.log(`Mock data written to: ${outputPath}`);
+}

package/cli/generate/mock/lov.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLOVFieldValue = getLOVFieldValue;
+exports.getLOVs = getLOVs;
+const lovs = {};
+function getLOVFieldValue(lovName) {
+    if (!lovs[lovName]) {
+        const randomNumber = () => Math.floor(Math.random() * 100);
+        lovs[lovName] = {
+            type: 'combo',
+            options: Array.from({ length: 5 }).map((_, index) => ({ description: `Op_${index + 1} ${randomNumber()}`, value: (index + 1).toString() }))
+        };
+    }
+    return { key: lovs[lovName].options[0].value, value: lovs[lovName].options[0].description };
+}
+function getLOVs() {
+    return lovs;
+}

package/cli/index.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const commander_1 = require("commander");
 const deploy_1 = require("./deploy");
+const generate_1 = require("./generate");
 const program = new commander_1.Command();
 program
     .name("bpm-core")
     .description("BPM Core CLI tool.")
     .version("1.0.0");
 program.addCommand(deploy_1.deployCommand);
+program.addCommand(generate_1.generateCommand);
 program.parse(process.argv);

package/fesm2022/bpm-core.mjs

@@ -4427,6 +4427,7 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
     removeMulti(index) {
         this.displayedFiles.splice(index, 1);
         this.allAttachments.splice(index, 1);
+        this.lengthError = this.displayedFiles?.length >= +this.maxLength;
     }
     downloadFileNew(fileData) {
         const fileType = this.getFileType(fileData);
@@ -4464,7 +4465,7 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
                 this.uploadValidAndNonDuplicateFile(input, fileData);
             }
             else {
-                this.allowedFileSize = false;
+                this.allowedFileSize = +this.filesize < +this.maxSize;
             }
             input.value = '';
         }
@@ -8261,10 +8262,10 @@ class RequestDetailsSectionComponent {
         this.pageNumber = event.pageIndex;
         this.pageSize = event.pageSize;
     }
-    mapFn = InputMappers.toLowerCase;
-    filterFn = InputFilters.buildPattern().allowEnglishAlphabets().allowSpace().build();
+    filterFn = InputFilters.buildPattern().allowEnglishAlphabets().allowDigits().allowSpace().build();
+    mapFn = InputMappers.toUpperCase;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", 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: "19.2.1", 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\" \r\n    [isReadOnly]=\"isReadOnly\" \r\n    formControlName=\"test\" \r\n    label=\"Input\"\r\n    [filterFn]=\"filterFn\">\r\n    </app-input>\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [maxLength]=\"2\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\" [multiple]=\"true\"\r\n      [displayedFiles]=\"formGroup.controls.attachment.value\"></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      <!-- <app-timepicker\r\n        label=\"time picker\"\r\n        formControlName=\"timePicker\" \r\n        [isReadOnly]=\"false\" placeholder=\"Select time\">\r\n      </app-timepicker> -->\r\n    <!-- <div class=\"table-responsive full\">\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th>time</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody formArrayName=\"candidates\">\r\n          <tr>\r\n            <td>\r\n            <app-timepicker\r\n              [ngModel]=\"timePicker\" \r\n              (ngModelChange)=\"timePickerChange($event)\"\r\n              [isReadOnly]=\"false\" placeholder=\"Select time\"\r\n              [insideTable]=\"true\">\r\n            </app-timepicker>\r\n            </td>\r\n        </tbody>\r\n      </table>\r\n    </div> -->\r\n      <!-- <app-timepicker\r\n      label=\"time picker\"\r\n      [(ngModel)]=\"timePicker\" (ngModelChange)=\"timePickerChange($event)\" [ngModelOptions]=\"{standalone: true}\"\r\n      placeholder=\"test placeholder\"></app-timepicker> -->\r\n\r\n<!--    {{formGroup.valid}}-->\r\n<!--    <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [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-timepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"false\"\r\n      formControlName=\"test\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"/>\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", "mapFn", "filterFn"] }, { 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: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "allAttachments", "signType", "customDownload", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize", "maxLength"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "component", type: AttachmentSectionComponent, selector: "app-attachment-section", inputs: ["className", "customDownload", "attachmentsMax", "isSortable", "downloadAll", "isRequired", "descriptionRequired", "commentsRequired", "allowedExtensions"], outputs: ["downloadActionClicked", "emitedValue"] }, { kind: "component", type: TimepickerComponent, selector: "app-timepicker" }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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\" \r\n    [isReadOnly]=\"isReadOnly\" \r\n    formControlName=\"test\" \r\n    label=\"Input\"\r\n    [filterFn]=\"filterFn\"\r\n    [mapFn]=\"mapFn\">\r\n    </app-input>\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [maxLength]=\"2\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\" [multiple]=\"true\"\r\n      [displayedFiles]=\"formGroup.controls.attachment.value\"></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      <!-- <app-timepicker\r\n        label=\"time picker\"\r\n        formControlName=\"timePicker\" \r\n        [isReadOnly]=\"false\" placeholder=\"Select time\">\r\n      </app-timepicker> -->\r\n    <!-- <div class=\"table-responsive full\">\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th>time</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody formArrayName=\"candidates\">\r\n          <tr>\r\n            <td>\r\n            <app-timepicker\r\n              [ngModel]=\"timePicker\" \r\n              (ngModelChange)=\"timePickerChange($event)\"\r\n              [isReadOnly]=\"false\" placeholder=\"Select time\"\r\n              [insideTable]=\"true\">\r\n            </app-timepicker>\r\n            </td>\r\n        </tbody>\r\n      </table>\r\n    </div> -->\r\n      <!-- <app-timepicker\r\n      label=\"time picker\"\r\n      [(ngModel)]=\"timePicker\" (ngModelChange)=\"timePickerChange($event)\" [ngModelOptions]=\"{standalone: true}\"\r\n      placeholder=\"test placeholder\"></app-timepicker> -->\r\n\r\n<!--    {{formGroup.valid}}-->\r\n<!--    <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [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-timepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"false\"\r\n      formControlName=\"test\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"/>\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", "mapFn", "filterFn"] }, { 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: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "allAttachments", "signType", "customDownload", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize", "maxLength"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "component", type: AttachmentSectionComponent, selector: "app-attachment-section", inputs: ["className", "customDownload", "attachmentsMax", "isSortable", "downloadAll", "isRequired", "descriptionRequired", "commentsRequired", "allowedExtensions"], outputs: ["downloadActionClicked", "emitedValue"] }, { kind: "component", type: TimepickerComponent, selector: "app-timepicker" }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RequestDetailsSectionComponent, decorators: [{
             type: Component,
@@ -8293,7 +8294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         FormsModule,
                         InputMaskComponent,
                         MultiselectComponent
-                    ], 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\" \r\n    [isReadOnly]=\"isReadOnly\" \r\n    formControlName=\"test\" \r\n    label=\"Input\"\r\n    [filterFn]=\"filterFn\">\r\n    </app-input>\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [maxLength]=\"2\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\" [multiple]=\"true\"\r\n      [displayedFiles]=\"formGroup.controls.attachment.value\"></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      <!-- <app-timepicker\r\n        label=\"time picker\"\r\n        formControlName=\"timePicker\" \r\n        [isReadOnly]=\"false\" placeholder=\"Select time\">\r\n      </app-timepicker> -->\r\n    <!-- <div class=\"table-responsive full\">\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th>time</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody formArrayName=\"candidates\">\r\n          <tr>\r\n            <td>\r\n            <app-timepicker\r\n              [ngModel]=\"timePicker\" \r\n              (ngModelChange)=\"timePickerChange($event)\"\r\n              [isReadOnly]=\"false\" placeholder=\"Select time\"\r\n              [insideTable]=\"true\">\r\n            </app-timepicker>\r\n            </td>\r\n        </tbody>\r\n      </table>\r\n    </div> -->\r\n      <!-- <app-timepicker\r\n      label=\"time picker\"\r\n      [(ngModel)]=\"timePicker\" (ngModelChange)=\"timePickerChange($event)\" [ngModelOptions]=\"{standalone: true}\"\r\n      placeholder=\"test placeholder\"></app-timepicker> -->\r\n\r\n<!--    {{formGroup.valid}}-->\r\n<!--    <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [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-timepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"false\"\r\n      formControlName=\"test\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"/>\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"] }]
+                    ], 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\" \r\n    [isReadOnly]=\"isReadOnly\" \r\n    formControlName=\"test\" \r\n    label=\"Input\"\r\n    [filterFn]=\"filterFn\"\r\n    [mapFn]=\"mapFn\">\r\n    </app-input>\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [maxLength]=\"2\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\" [multiple]=\"true\"\r\n      [displayedFiles]=\"formGroup.controls.attachment.value\"></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      <!-- <app-timepicker\r\n        label=\"time picker\"\r\n        formControlName=\"timePicker\" \r\n        [isReadOnly]=\"false\" placeholder=\"Select time\">\r\n      </app-timepicker> -->\r\n    <!-- <div class=\"table-responsive full\">\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th>time</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody formArrayName=\"candidates\">\r\n          <tr>\r\n            <td>\r\n            <app-timepicker\r\n              [ngModel]=\"timePicker\" \r\n              (ngModelChange)=\"timePickerChange($event)\"\r\n              [isReadOnly]=\"false\" placeholder=\"Select time\"\r\n              [insideTable]=\"true\">\r\n            </app-timepicker>\r\n            </td>\r\n        </tbody>\r\n      </table>\r\n    </div> -->\r\n      <!-- <app-timepicker\r\n      label=\"time picker\"\r\n      [(ngModel)]=\"timePicker\" (ngModelChange)=\"timePickerChange($event)\" [ngModelOptions]=\"{standalone: true}\"\r\n      placeholder=\"test placeholder\"></app-timepicker> -->\r\n\r\n<!--    {{formGroup.valid}}-->\r\n<!--    <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [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-timepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"false\"\r\n      formControlName=\"test\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"/>\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: [{