@pongrass/utils 0.0.3-v20 → 1.0.1-v20

package/README.md

@@ -1,122 +1,230 @@
-# Utils
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.0.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project utils` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project utils`.
-
-> Note: Don't forget to add `--project utils` or else it will be added to the default project in your `angular.json` file.
-
-## Build
-
-Run `ng build utils` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build utils`, go to the dist folder `cd dist/utils` and run `npm publish`.
-
-## Multi-Form Module
-
-The Multi-Form module is a flexible form builder that allows you to create dynamic forms with various field types and validation rules.
-
-### Features
-
-- Support for multiple field types (text, email, number, select, textarea, date, checkbox, etc.)
-- Configurable validation rules
-- Dynamic form generation based on configuration objects
-- Unsaved changes detection and handling
-- Custom styling options
-
-### Usage
-
-1. Import the `MultiFormModule` in your application module:
-
-```typescript
-import { MultiFormModule } from 'utils';
-
-@NgModule({
-  imports: [MultiFormModule]
-})
-export class YourModule {}
-```
-
-2. Use the component in your template:
-
-```html
-<app-multi-form [config]="formConfig" [showUnsavedFlags]="true" (fieldAction)="handleFieldAction($event)" (formSavedUnsavedListen)="handleFormSave($event)">
-</app-multi-form>
-```
-
-3. Define your form configuration:
-
-```typescript
-import { IFormConfig, FormFieldType } from 'utils';
-
-const formConfig: IFormConfig = {
-  formName: 'Sample Form',
-  rows: [
-    [
-      {
-        label: 'Name',
-        type: FormFieldType.Text,
-        controlName: 'name',
-        validations: { required: true },
-        placeholder: 'Enter your name'
-      },
-      {
-        label: 'Email',
-        type: FormFieldType.Email,
-        controlName: 'email',
-        validations: { required: true, pattern: '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$' },
-        placeholder: 'Enter your email'
-      }
-    ]
-  ]
-};
-```
-
-## Local Development and Linking
-
-To use this library in another project during development:
-
-1. In the utils library directory, start the watch mode:
-
-   ```bash
-   npm run watch
-   ```
-
-2. Create a symlink to the library:
-
-   ```bash
-   npm link
-   ```
-
-3. In your target project directory, link to the library:
-
-   ```bash
-   npm link @pongrass/utils
-   ```
-
-4. Your target project will now use the local version of the library, and changes will be reflected immediately.
-
-To unlink:
-
-1. In your target project directory:
-
-   ```bash
-   npm unlink @pongrass/utils
-   ```
-
-2. In the utils library directory:
-   ```bash
-   npm unlink
-   ```
-
-## Running unit tests
-
-Run `ng test utils` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+# Utils
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project utils` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project utils`.
+
+> Note: Don't forget to add `--project utils` or else it will be added to the default project in your `angular.json` file.
+
+## Build
+
+Run `ng build utils` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build utils`, go to the dist folder `cd dist/utils` and run `npm publish`.
+
+## Available Modules
+
+This library provides several Angular modules that can be imported separately based on your needs:
+
+### TableGridModule
+
+A comprehensive AG Grid wrapper module that provides advanced table functionality with built-in column management, filtering, and state persistence.
+
+- Includes column visibility toggling
+- Pagination support
+- Column resizing and reordering
+- State persistence
+- Custom cell renderers
+- Filter management
+
+```typescript
+import { TableGridModule } from '@pongrass/utils';
+
+@NgModule({
+  imports: [TableGridModule]
+})
+export class YourModule { }
+```
+
+### MultiFormModule
+
+A flexible form builder that allows you to create dynamic forms with various field types and validation rules.
+
+- Support for multiple field types (text, email, number, select, textarea, date, checkbox, etc.)
+- Configurable validation rules
+- Dynamic form generation based on configuration objects
+- Unsaved changes detection and handling
+- Custom styling options
+
+```typescript
+import { MultiFormModule } from '@pongrass/utils';
+
+@NgModule({
+  imports: [MultiFormModule]
+})
+export class YourModule { }
+```
+
+## Available Components
+
+### Cell Renderers
+
+- **ColorCellRendererComponent** - Renders color values with visual color indicators
+- **CheckboxCellRendererComponent** - Renders boolean values as checkboxes
+- **CommentsButtonCellRendererComponent** - Renders a button for managing comments
+- **IndustryUpdateListboxCellRendererComponent** - Renders industry updates in a listbox format
+- **PageStatusCellRendererComponent** - Renders page status with appropriate styling
+- **StatusSelectCellRendererComponent** - Renders status values with a select dropdown
+
+### Other Components
+
+- **EditionListGroupedComponent** - Displays editions in a grouped list format
+- **GenericFilterModelComponent** - Provides a generic filter interface
+
+## Available Directives
+
+- **CircularFocusDirective** - Enables circular focus navigation in form elements
+- **DecimalInputDirective** - Restricts input to decimal values
+- **MultiSelectStylerDirective** - Applies custom styling to multi-select components
+- **ShowTooltipIfTruncatedDirective** - Shows a tooltip when text is truncated
+
+## Available Services
+
+- **ConfigurationService** - Manages application configuration and preferences
+- **JsonrpcService** - Handles JSON-RPC communication with backend services
+- **UtilsService** - Provides various utility functions
+
+## Styles
+
+This library relies on AG Grid and other third-party component styles that need to be included in your application's global styles.
+
+### Global Styles via angular.json
+
+To use the library styles globally, add the following to your `angular.json` file:
+
+```json
+{
+  "projects": {
+    "your-app-name": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": [
+              "src/scss/styles.scss",
+              "node_modules/@ag-grid-community/styles/ag-grid.css",
+              "node_modules/@ag-grid-community/styles/ag-theme-quartz.min.css",
+              "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
+            ]
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+### Component-Level Styles
+
+When using components from this library, ensure that the required styles are available in your application:
+
+- AG-Grid community styles
+- Bootstrap datepicker styles from ngx-bootstrap
+
+## Multi-Form Module
+
+The Multi-Form module is a flexible form builder that allows you to create dynamic forms with various field types and validation rules.
+
+### Features
+
+- Support for multiple field types (text, email, number, select, textarea, date, checkbox, etc.)
+- Configurable validation rules
+- Dynamic form generation based on configuration objects
+- Unsaved changes detection and handling
+- Custom styling options
+
+### Usage
+
+1. Import the `MultiFormModule` in your application module:
+
+```typescript
+import { MultiFormModule } from '@pongrass/utils';
+
+@NgModule({
+  imports: [MultiFormModule]
+})
+export class YourModule {}
+```
+
+2. Use the component in your template:
+
+```html
+<app-multi-form [config]="formConfig" [showUnsavedFlags]="true" (fieldAction)="handleFieldAction($event)" (formSavedUnsavedListen)="handleFormSave($event)">
+</app-multi-form>
+```
+
+3. Define your form configuration:
+
+```typescript
+import { IFormConfig, FormFieldType } from '@pongrass/utils';
+
+const formConfig: IFormConfig = {
+  formName: 'Sample Form',
+  rows: [
+    [
+      {
+        label: 'Name',
+        type: FormFieldType.Text,
+        controlName: 'name',
+        validations: { required: true },
+        placeholder: 'Enter your name'
+      },
+      {
+        label: 'Email',
+        type: FormFieldType.Email,
+        controlName: 'email',
+        validations: { required: true, pattern: '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$' },
+        placeholder: 'Enter your email'
+      }
+    ]
+  ]
+};
+```
+
+## Local Development and Linking
+
+To use this library in another project during development:
+
+1. In the utils library directory, start the watch mode:
+
+   ```bash
+   npm run watch
+   ```
+
+2. Create a symlink to the library:
+
+   ```bash
+   npm link
+   ```
+
+3. In your target project directory, link to the library:
+
+   ```bash
+   npm link @pongrass/utils
+   ```
+
+4. Your target project will now use the local version of the library, and changes will be reflected immediately.
+
+To unlink:
+
+1. In your target project directory:
+
+   ```bash
+   npm unlink @pongrass/utils
+   ```
+
+2. In the utils library directory:
+   ```bash
+   npm unlink
+   ```
+
+## Running unit tests
+
+Run `ng test utils` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.