bpm-core 0.0.129 → 0.0.130

package/README.md

@@ -3,6 +3,19 @@
 
 > Ensure your project is updated to Angular 19 to avoid compatibility issues.
 
+---
+
+## Table of Contents
+
+- [Recently Added Features](#recently-added-features)
+  - [BPM Core CLI](#bpm-core-cli)
+  - [Input Mapping and Filtering](#input-mapping-and-filtering)  
+  - [Time Picker](#time-picker)
+  - [Summary Section](#summary-section)
+- [Changes Log](#changes-log)
+
+---
+
 ## [Recently Added Features](#recently-added-features)
 - ### [BPM Core CLI](#bpm-core-cli)
   A command-line interface tool that provides helper scripts to speed up common tasks.
@@ -20,7 +33,8 @@
 
   ---
 
-  - `deploy` (supports only library services)
+  - `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:
@@ -40,10 +54,16 @@
     ```bash
     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`.
+    ---
+  - `generate` (alias: `g`) — *Supports only library services*.
+  
+    Provides the following subcommands:
+    - `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** 
 
-      **Example usage**  
       In your terminal, navigate to the service directory and run the following command:
 
       ```bash
@@ -51,7 +71,24 @@
       # or using aliases
       npx bpm-core g m
       ```
+      ---
+    - `new` (alias: `n`)
 
+      Use this subcommand to generate a new service, just like the form builder does.
+
+      **Example usage** 
+
+      First, create the service directory. Then, in your terminal, navigate to that directory and run the following command:
+
+      ```bash
+      npx bpm-core generate new --config config.json --service-code MSM
+      # or using aliases
+      npx bpm-core g n --config config.json --service-code MSM
+      ```
+      The required options are:
+      - `--config` the generation config path (like a form builder config).
+      - `--service-code` the service code.
+      ---
 
 
 - ### [Input Mapping and Filtering](#input-mapping-and-filtering)
@@ -212,6 +249,22 @@
 
 ## [Changes Log](#changes-log)
 
+<a id="bpm-core00130-2025-09-18"></a>
+### [bpm-core@0.0.130 — 2025-09-18](#bpm-core00130-2025-09-18)
+- feat(cli): add `generate new` command to generate an initial service from a config like the form builder.
+- fix(cli/mock-data): restructure LOVs in payload and enhance logged path generation.
+- [BREAKING CHANGE] fix(custom-searchable): update the default value of the `key` input property to 'value' (was 'description').
+- feat(radio): activate and enhance radio component.
+- refactor: remove ngx-translate package.
+- [BREAKING CHANGE] refactor(input & textarea): remove 'enOnly' and 'arOnly' type values, use filterFn instead.
+- fix(input-number): prevent dropping text into input number.
+- [BREAKING CHANGE] refactor(attachment-section): replace `isRequired` input with `descriptionRequired` input and add `commentsRequired` input.
+- fix(attachment-section): hide label in read-only mode if no attachments.
+- fix(custom-searchable): add padding for search and clear icons in RTL.
+- feat(input): add `maxLength` input property.
+- feat(datepicker): support typed inputs for `minDate`, `maxDate`, `customMinDate`, and `customMaxDate`.
+- feat(search-employee): add `selectedEmployee` output to emit the full details of the selected employee.
+
 <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

package/cli/deploy/build.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LibraryBuild = exports.Build = void 0;
-const utilities_1 = require("./utilities");
+const utilities_1 = require("../utilities/utilities");
 const fs = __importStar(require("fs"));
 class Build {
     constructor() { }

package/cli/deploy/git-operations-handler.js

@@ -28,7 +28,7 @@ const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
 const util_1 = require("util");
 const child_process_1 = require("child_process");
-const utilities_1 = require("./utilities");
+const utilities_1 = require("../utilities/utilities");
 class GitOperationsHandler {
     constructor() { }
     async sync(localBuildRepoPath, serviceRemoteDir, servicePath, commitMessage, logger, env) {

package/cli/deploy/index.js

@@ -29,7 +29,7 @@ const commander_1 = require("commander");
 const build_1 = require("./build");
 const git_operations_handler_1 = require("./git-operations-handler");
 const jenkins_manager_1 = require("./jenkins-manager");
-const utilities_1 = require("./utilities");
+const utilities_1 = require("../utilities/utilities");
 exports.deployCommand = new commander_1.Command('deploy');
 exports.deployCommand
     .description('Deploy a service to a specific environment, deployment process includes building the service, syncing with the remote repository, and running a Jenkins job if credentials are provided.')

package/cli/generate/index.js

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

package/cli/generate/mock/index.js

@@ -169,20 +169,22 @@ function buildPayloadWithMockData(roleToStageMockMap, requestMock) {
             }
         },
         "meta": {
-            "decision": {
-                "options": [
-                    {
-                        "description": "Submit to Account manager",
-                        "value": "SUBMIT_TO_ACCOUNT_MANAGER",
-                    },
-                    {
-                        "description": "Send Back",
-                        "value": "SENDBACK",
-                    }
-                ],
-                "type": "button"
-            },
-            ...(0, lov_1.getLOVs)()
+            "lovs": {
+                "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;
@@ -201,7 +203,7 @@ function main() {
     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';
+    const outputPath = path.join(projectRoot, '/mock-output.json');
     fs.writeFileSync(outputPath, JSON.stringify(payload, null, 2), 'utf-8');
     console.log(`Mock data written to: ${outputPath}`);
 }

package/cli/generate/new/angular-template/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/cli/generate/new/angular-template/README.md

@@ -0,0 +1,7 @@
+# BPM Core CLI
+
+This project was generated with [BPM Core CLI](https://www.npmjs.com/package/bpm-core?activeTab=readme#bpm-core-cli).
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/` . The app will automatically reload if you change any of the source files.

package/cli/generate/new/angular-template/angular.json.ejs

@@ -0,0 +1,167 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "<%=serviceCode%>": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-builders/custom-webpack:browser",
+          "options": {
+            "customWebpackConfig": {
+              "path": "extra-webpack.config.js",
+              "mergeStrategies": {
+                "externals": "replace"
+              }
+            },
+            "allowedCommonJsDependencies": [
+              "file-saver","handlebars","moment"
+            ],
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "aot": true,
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "node_modules/bpm-core/src/lib/assets",
+                "output": "/assets/"
+              }
+            ],
+            "styles": [
+              "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "node_modules/intl-tel-input/build/css/intlTelInput.css",
+              "node_modules/ngx-toastr/toastr.css",
+              "node_modules/basic-ui-components/dist/assets/scss/base.scss",
+              "node_modules/bpm-core/src/lib/assets/scss/base.scss",
+              "src/styles.scss"
+            ],
+            "scripts": [
+              "./node_modules/intl-tel-input/build/js/intlTelInput.min.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "none",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "4mb",
+                  "maximumError": "6mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6mb",
+                  "maximumError": "6mb"
+                }
+              ]
+            },
+            "local": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.local.ts"
+                }
+              ]
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.local.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {},
+          "configurations": {
+            "production": {
+              "buildTarget": "<%=serviceCode%>:build:production"
+            },
+            "local": {
+              "buildTarget": "<%=serviceCode%>:build:local"
+            },
+            "development": {
+              "buildTarget": "<%=serviceCode%>:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "<%=serviceCode%>:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": []
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "<%=serviceCode%>:serve:production"
+            },
+            "development": {
+              "devServerTarget": "<%=serviceCode%>:serve:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

package/cli/generate/new/angular-template/build.sh

@@ -0,0 +1,6 @@
+npx ng build --aot -c production --output-hashing none
+mv ./dist/main.js ./dist/wm-main.bundle.js
+mv ./dist/styles.css ./dist/wm-styles.bundle.css
+mv ./dist/polyfills.js ./dist/wm-polyfills.bundle.js
+mv ./dist/scripts.js ./dist/wm-scripts.bundle.js
+mv ./dist/runtime.js ./dist/wm-inline.bundle.js

package/cli/generate/new/angular-template/extra-webpack.config.js.ejs

@@ -0,0 +1,5 @@
+module.exports = {
+  output: {
+    chunkLoadingGlobal: "webpackJsonp<%=serviceCode%>"
+  }
+};

package/cli/generate/new/angular-template/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/contractor-service'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/cli/generate/new/angular-template/package.json.ejs

@@ -0,0 +1,67 @@
+{
+  "name": "<%=serviceCode%>",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build --configuration production",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular-builders/custom-webpack": "^19.0.0",
+    "@angular/animations": "^19.0.0",
+    "@angular/cdk": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/localize": "^19.0.0",
+    "@angular/material": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/platform-server": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "@ncstate/sat-popover": "^13.1.0",
+    "basic-ui-components": "^0.0.6992",
+    "bootstrap": "^5.3.3",
+    "bpm-core": "^0.0.124",
+    "date-fns": "^4.1.0",
+    "express": "^4.18.2",
+    "file-saver": "^2.0.5",
+    "google-libphonenumber": "^3.2.42",
+    "handlebars": "^4.7.7",
+    "handlebars-loader": "^1.7.2",
+    "intl-tel-input": "^24.5.0",
+    "moment": "^2.29.4",
+    "moment-hijri": "^2.30.0",
+    "ng-dynamic-component": "^10.7.0",
+    "ngx-bootstrap": "^19.0.2",
+    "ngx-intl-tel-input-gg": "^1.0.12",
+    "ngx-mask": "^18.0.0",
+    "ngx-scrollbar": "^15.1.3",
+    "ngx-toastr": "^19.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.10"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.0.0",
+    "@angular/cli": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "@types/express": "^4.17.17",
+    "@types/jasmine": "~5.1.0",
+    "@types/node": "^18.18.0",
+    "jasmine-core": "~5.2.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-packagr": "^18.2.1",
+    "typescript": "~5.5.2"
+  }
+}

package/cli/generate/new/angular-template/protractor.conf.js

@@ -0,0 +1,28 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

package/cli/generate/new/angular-template/src/app/app.component.html

@@ -0,0 +1,35 @@
+<core-layout>
+  @if (!loading['form']) {
+    @if (noError) {
+      <core-service-header
+        [isLoading]="false"
+        [formTitle]="'formTitle' | translate"
+        [form]="form">
+        <app-print-section [form]="form">
+        </app-print-section>
+      </core-service-header>
+      <app-workflow-section
+        workflow
+        [segmentDynamicLoaderService]="segmentDynamicLoader"
+        [form]="form" [sections]="form?.['sections']">
+        <app-request-details-section
+          [section]="form.sections[0]" [form]="form" [lov]="form?.lovs" className="form-section"
+          [isReadOnly]="form.sections[0].header.readOnly"></app-request-details-section>
+      </app-workflow-section>
+    } @else {
+      @if (errorMessage?.length) {
+        <ds-message></ds-message>
+        @for (item of errorMessage; track $index) {
+          <div class="d-flex justify-content-center">
+            <span class="fc-coral fs-18"  [innerHTML]="item?.['message']"></span>
+          </div>
+        }
+      } @else {
+        <ds-message label="{{'errorOccurred' | translate}}"></ds-message>
+      }
+    }
+  } @else {
+    <core-service-header header [formTitle]="'formTitle' | translate" [isLoading]="true">
+    </core-service-header>
+  }
+</core-layout>

package/cli/generate/new/angular-template/src/app/app.component.ts

@@ -0,0 +1,81 @@
+import {AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from '@angular/core';
+import {
+  CoreService,
+  Form,
+  LayoutComponent,
+  ServiceHeaderComponent,
+  SidenavService,
+  WorkflowSectionComponent,
+  CoreI18nService
+} from 'bpm-core';
+import {DynamicComponentInjectorToken} from 'ng-dynamic-component';
+import {RequestDetailsSectionComponent} from "./page-components/request-details-section/request-details-section.component";
+import {SegmentDynamicLoaderService} from './shared/services/segment-dynamic-loader.service';
+import {DOCUMENT, isPlatformBrowser} from "@angular/common";
+import { Inject,  PLATFORM_ID} from '@angular/core';
+import {Router} from "@angular/router";
+import {PrintSectionComponent} from "./templates/print-section/print-section.component";
+import {I18nService} from "./shared/services/i18n.service";
+import { TranslatePipe } from './shared/pipes/translate.pipe';
+
+@Component({
+  selector: 'app-wm-root',
+  standalone: true,
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss',
+  imports: [
+    LayoutComponent,
+    ServiceHeaderComponent,
+    WorkflowSectionComponent,
+    RequestDetailsSectionComponent,
+    PrintSectionComponent,
+    TranslatePipe
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
+  providers: [
+    {provide: DynamicComponentInjectorToken, useValue: { /* your value here */}}
+  ]
+
+})
+export class AppComponent implements AfterViewInit {
+  loading = {
+    form: false
+  }
+  form: Form
+  noError = true;
+  errorMessage: [];
+  constructor(
+    public segmentDynamicLoader: SegmentDynamicLoaderService,
+    @Inject(DOCUMENT) private readonly document: Document,
+    private readonly router: Router,
+    private readonly sidenavService: SidenavService,
+    public i18n: I18nService,
+    private readonly coreService: CoreService,
+    @Inject(PLATFORM_ID) private readonly platformId: any
+  ) {
+    this.loading['form'] = true
+     this.coreService.loadForm().subscribe({
+      next: (form: any) => {
+        if (form instanceof Form) {
+          this.form = form;
+        } else {
+          this.noError = false;
+        }
+        this.loading['form'] = false;
+      },
+      error: (err) => {
+        this.noError = false;
+        this.loading['form'] = false;
+        this.errorMessage = err?.error?.meta?.messages;
+      }
+    });
+  }
+
+  ngAfterViewInit() {
+    if (isPlatformBrowser(this.platformId)) {
+      const direction = this.i18n.getLanguage() == 'en' ? 'ltr' : 'rtl';
+      document.documentElement.setAttribute('dir', direction);
+    }
+  }
+
+}

package/cli/generate/new/angular-template/src/app/config/segment-dynamic-loader.config.ts.ejs

@@ -0,0 +1,8 @@
+<% const config = getSegmentDynamicLoaderConfig() -%>
+<%- config.imports %>
+
+export default {
+  roleToApprovalSectionMapping: {
+    <%- config.roleToCompClass -%>
+  }
+}