@natec/mef-dev-ui-kit

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

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

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

Peer Dependencies

Install the required peer dependencies:

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

Optional Dependencies

Some components may require additional dependencies:

# 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:

{
  "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:

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

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

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

2. Enable Animations

Import BrowserAnimationsModule in your root module:

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

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:

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

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

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:

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

Component-Specific Styling

V2 components use ViewEncapsulation.None for easy customization:

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
• Live Demo: https://platform.mef.dev/ui_kit_demo
• Interactive Preview: https://preview.mef.dev

Resources

• Creating Your First Plugin: Developer Guide
• NPM Package: npmjs.com/package/@natec/mef-dev-ui-kit
• GitHub Repository: 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.