# @natec/mef-dev-ui-kit

A comprehensive Angular UI component library for building modern web applications on the MEF.DEV platform.

[![npm version](https://img.shields.io/npm/v/@natec/mef-dev-ui-kit.svg)](https://www.npmjs.com/package/@natec/mef-dev-ui-kit)
[![Angular](https://img.shields.io/badge/Angular-20-red.svg)](https://angular.io/)

## Overview

MEF.DEV UI Kit is a production-ready Angular component library that provides 50+ components organized into three distinct categories. Each component is built with modern Angular practices, accessibility in mind, and supports reactive forms integration.

## Features

- **Responsive Design** with mobile-first approach
- **Accessibility** with ARIA support and keyboard navigation
- **Angular Forms** integration with ControlValueAccessor
- **Smooth Animations** using Angular animations
- **TypeScript** first with full type definitions
- **Tree-shakeable** modular architecture

## Version Compatibility

| Angular/CLI | @natec/mef-dev-ui-kit |
|-------------|----------------------|
| v13         | v1.x                 |
| v14         | v14.x                |
| v15         | v15.x                |
| v16         | v16.x                |
| v20         | v20.x                |

## Installation

```bash
npm install @natec/mef-dev-ui-kit@20
```

### Peer Dependencies

Install the required peer dependencies:

```bash
npm install @angular/cdk@20 @angular/forms@20
```

### Optional Dependencies

Some components may require additional dependencies:

```bash
# For enhanced data tables
npm install @swimlane/ngx-datatable@20

# For styling (if not using custom theme)
npm install bootstrap@5 ngx-bootstrap@10 font-awesome@4
```

## Setup

### 1. Import Styles

Add the library styles to your `angular.json`:

```json
{
  "architect": {
    "build": {
      "options": {
        "styles": [
          "node_modules/bootstrap/scss/bootstrap.scss",
          "node_modules/@natec/mef-dev-ui-kit/src/lib/styles/core.scss",
          "node_modules/font-awesome/scss/font-awesome.scss",
          "src/styles.scss"
        ]
      }
    }
  }
}
```

Alternatively, import styles in your `styles.scss`:

```scss
@import '@natec/mef-dev-ui-kit/styles/core';
```

Icomoon icons are optional. Import them only when the application uses `icon-*` classes:

```scss
@import '@natec/mef-dev-ui-kit/styles/icomoon';
```

### 2. Enable Animations

Import `BrowserAnimationsModule` in your root module:

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ]
})
export class AppModule { }
```

## Usage

### Basic Example

```typescript
import { Component } from '@angular/core';
import { MefDevCardModule } from '@natec/mef-dev-ui-kit';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [MefDevCardModule],
  template: `
    <mefdev-card
      [description]="'Card description'"
      [card_type]="'primary'">
      <ng-template #card_title>
        Card Title
      </ng-template>
      <ng-template #card_footer>
        <button>Action</button>
      </ng-template>
    </mefdev-card>
  `
})
export class ExampleComponent { }
```

## Component Categories

### Markup-Kit Components

Layout and structural components for building page templates.

#### Available Modules

- **MefDevCardModule** - Card containers with header, content, and footer
- **MefDevCollapseModule** - Collapsible panels with animation
- **MefDevDropDownMenuModule** - Dropdown menus with positioning
- **MefDevModalModule** - Modal dialogs (fill screen, slide-up, slide-right, filter panel)
- **MefDevPageLayoutsModule** - Pre-built page layouts (central, table, manage)
- **MefDevStepExecutorModule** - Step-by-step execution wizards
- **MefDevFilteredFieldModule** - Filtered field inputs with suggestions

### PG-Components

Specialized form controls and interactive components.

#### Available Modules

- **MefDevProgressModule** - Progress bars and indicators
- **MefDevSelectModule** - Custom select dropdowns with option pipes
- **MefDevSwitchModule** - Toggle switches
- **MefDevTabsModule** - Tabbed content panels

### V2 Components (Material Design)

Modern Material Design components with full form integration and accessibility support.

#### Available Modules

- **MDCardModule** - Material Design cards
- **MDCheckBoxModule** - Checkboxes with form validation
- **MDCollapseModule** - Expansion panels and accordions
- **MDSteppperModule** - Multi-step forms and wizards
- **MDMenuModule** - Context menus and dropdown menus
- **MDModalModule** - Material Design dialogs
- **MDSelectModule** - Advanced select with search and grouping
- **MDSwitchModule** - Material Design toggle switches
- **MDTabsModule** - Material Design tabs with animations

## Advanced Usage

### Form Integration

V2 components implement `ControlValueAccessor` for seamless reactive forms integration:

```typescript
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MDCheckBoxModule, MDSelectModule } from '@natec/mef-dev-ui-kit';

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [ReactiveFormsModule, MDCheckBoxModule, MDSelectModule],
  template: `
    <form [formGroup]="form">
      <md-checkbox formControlName="agreed">
        I agree to terms
      </md-checkbox>

      <md-select formControlName="country" placeholder="Select country">
        <md-option value="ua">Ukraine</md-option>
        <md-option value="us">United States</md-option>
      </md-select>
    </form>
  `
})
export class FormComponent {
  form = new FormGroup({
    agreed: new FormControl(false),
    country: new FormControl('')
  });
}
```

### Modal Dialogs

```typescript
import { Component, inject } from '@angular/core';
import { MDDialog, MDModalModule } from '@natec/mef-dev-ui-kit';

@Component({
  selector: 'app-dialog-example',
  template: `
    <button (click)="openDialog()">Open Dialog</button>
  `
})
export class DialogExampleComponent {
  private dialog = inject(MDDialog);

  openDialog() {
    const dialogRef = this.dialog.open(MyDialogComponent, {
      width: '400px',
      data: { name: 'Example' }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('Dialog closed with result:', result);
    });
  }
}
```

### Stepper Wizard

```typescript
import { Component } from '@angular/core';
import { MDSteppperModule } from '@natec/mef-dev-ui-kit';

@Component({
  selector: 'app-wizard',
  standalone: true,
  imports: [MDSteppperModule],
  template: `
    <md-stepper>
      <md-step label="Step 1">
        <md-step-content>
          Content for step 1
        </md-step-content>
        <md-step-footer>
          <button mdStepperNext>Next</button>
        </md-step-footer>
      </md-step>

      <md-step label="Step 2">
        <md-step-content>
          Content for step 2
        </md-step-content>
        <md-step-footer>
          <button mdStepperPrevious>Back</button>
          <button mdStepperNext>Next</button>
        </md-step-footer>
      </md-step>
    </md-stepper>
  `
})
export class WizardComponent { }
```

## Styling and Theming

### Using CSS Variables

The library exposes CSS variables that you can override:

```scss
:root {
  --mef-primary-color: #007bff;
  --mef-secondary-color: #6c757d;
  --mef-border-radius: 4px;
}
```

### Component-Specific Styling

V2 components use `ViewEncapsulation.None` for easy customization:

```scss
md-select {
  .md-select-trigger {
    border: 2px solid #custom-color;
  }
}
```

## API Documentation

For detailed component APIs, properties, methods, and events, visit:

- **Full Documentation**: [https://platform.mef.dev/ui_kit](https://platform.mef.dev/ui_kit)
- **Live Demo**: [https://platform.mef.dev/ui_kit_demo](https://platform.mef.dev/ui_kit_demo)
- **Interactive Preview**: [https://preview.mef.dev](https://preview.mef.dev/)

## Resources

- **Creating Your First Plugin**: [Developer Guide](https://platform.mef.dev/dev_guides/first_ui_plugin.md)
- **NPM Package**: [npmjs.com/package/@natec/mef-dev-ui-kit](https://www.npmjs.com/package/@natec/mef-dev-ui-kit)
- **GitHub Repository**: [github.com/mef-dev/ui-kit-demo](https://github.com/mef-dev/ui-kit-demo)

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Contributing

This library is maintained by NATEC for the MEF.DEV platform.

## License

Proprietary - Copyright © NATEC

## Support

For issues, questions, or feature requests, please refer to the [MEF.DEV platform documentation](https://platform.mef.dev).