npm package: @srikanthsai27/afrisure-blockly-expression
Description: A reusable Angular library for building visual block-based expressions using Google Blockly.
Latest version: 1.1.0

# Afrisure Blockly Expression Library

A reusable Angular library for building visual block-based expressions using Google Blockly.

## Features

- 🧩 **Visual Expression Builder**: Drag-and-drop interface for creating complex expressions
- 🎨 **Custom Blocks**: Math operations (addition, subtraction, multiplication, division, max, min)
- 🔢 **Dynamic Variables**: Support for custom lookup variables
- 💾 **Save/Load**: Serialize and deserialize block configurations
- 🎯 **Type-Safe**: Full TypeScript support
- 🌐 **i18n Ready**: Built with ngx-translate support

## Installation

### From NPM (After Publishing)
```bash
npm install afrisure-blockly-expression
```

### Local Development
The library is already built and available in your workspace at:
```
dist/afrisure-blockly-expression
```

## Dependencies

This library requires the following peer dependencies:

```json
{
  "@angular/common": "^20.0.0",
  "@angular/core": "^20.0.0",
  "@angular/material": "^20.0.0",
  "@ngx-translate/core": "^16.0.0",
  "blockly": "^10.4.3",
  "@blockly/continuous-toolbox": "^5.0.19",
  "@blockly/toolbox-search": "^1.2.11",
  "@blockly/zoom-to-fit": "^5.0.18"
}
```

## Usage

### 1. Import the Component

```typescript
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { BlocklyExpression } from 'afrisure-blockly-expression';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="openBlocklyDialog()">
      Open Expression Builder
    </button>
  `
})
export class MyComponent {
  constructor(private dialog: MatDialog) {}

  openBlocklyDialog() {
    const dialogRef = this.dialog.open(BlocklyExpression, {
      width: '90vw',
      height: '90vh',
      disableClose: true,
      data: {
        InputBlockyExpression: {
          lookup: [
            { id: 'var1', name: 'Variable 1', type: '' },
            { id: 'var2', name: 'Variable 2', type: '' },
            { id: 'var3', name: 'Variable 3', type: '' }
          ],
          blockExpressionJSON: {
            loadexpression: null // or previously saved JSON string
          }
        }
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        console.log('Expression:', result.expression);
        console.log('JavaScript Code:', result.javascriptCode);
        console.log('Saved State:', result.loadexpression);
      }
    });
  }
}
```

### 2. Test the Library

Navigate to the test page in your application:
```
http://localhost:1223/blockly-test
```

## API Reference

### BlocklyExpression Component

#### Input Data Structure

```typescript
interface BlocklyInputData {
  InputBlockyExpression: {
    lookup: Array<{
      id: string;
      name: string;
      type: string;
    }>;
    blockExpressionJSON: {
      loadexpression: string | null;
    };
  };
}
```

#### Output Data Structure

```typescript
interface BlocklyOutputData {
  expression: string;          // Generated expression string
  javascriptCode: string;       // JavaScript code representation
  loadexpression: string;       // Serialized block configuration (JSON)
}
```

### Available Blocks

#### Math Operations
- **Addition**: Add 2 or more numbers
- **Subtraction**: Subtract 2 or more numbers
- **Multiplication**: Multiply 2 or more numbers
- **Division**: Divide 2 or more numbers
- **Max**: Get maximum of 2 or more numbers
- **Min**: Get minimum of 2 or more numbers

#### Logical Operations
- **If/Else**: Conditional logic
- **Comparison**: Equal, Not Equal, Less Than, Greater Than, etc.
- **Boolean**: True/False values

#### Values
- **Number**: Numeric input
- **String**: Text input
- **Variables**: Custom lookup variables

## Exported Components & Services

```typescript
// Components
export { BlocklyExpression } from './lib/components/blockly-expression/blockly-expression';
export { PopUpTemplate } from './lib/components/pop-up-template/pop-up-template';

// Services
export { LoaderService } from './lib/services/loader.service';

// Modules
export { MaterialModule } from './lib/material.module';
```

## Building the Library

```bash
# Build the library
ng build afrisure-blockly-expression

# Build output location
dist/afrisure-blockly-expression
```

## Publishing to NPM

```bash
# Navigate to build output
cd dist/afrisure-blockly-expression

# Login to NPM (if not already logged in)
npm login

# Publish
npm publish --access public
```

## Development

### Project Structure
```
projects/afrisure-blockly-expression/
├── src/
│   ├── lib/
│   │   ├── components/
│   │   │   ├── blockly-expression/
│   │   │   │   ├── blockly-expression.ts
│   │   │   │   ├── blockly-expression.html
│   │   │   │   └── blockly-expression.scss
│   │   │   └── pop-up-template/
│   │   │       ├── pop-up-template.ts
│   │   │       ├── pop-up-template.html
│   │   │       └── pop-up-template.scss
│   │   ├── services/
│   │   │   └── loader.service.ts
│   │   └── material.module.ts
│   └── public-api.ts
├── package.json
├── ng-package.json
└── README.md
```

## License

This library is part of the Afrisure Product Configuration project.

## Support

For issues and feature requests, please contact the development team.

---

**Version**: 0.0.1  
**Author**: Afrisure Development Team  
**Last Updated**: January 2026