@natec/mef-dev-ui-kit 20.0.166 → 20.0.167

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +302 -111
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,141 +1,332 @@
1
1
  # @natec/mef-dev-ui-kit
2
2
 
3
- ## Description
4
- This is Ui-kit-lib to create plugins according to the template and visual on the platform [preview.mef.dev](https://preview.mef.dev/) with the help of ready made solutions.It provides users with the opportunity to explore and test various components and functionalities of the library before using them in their own projects.
5
-
6
- How to create your first Ui-package click [here](https://platform.mef.dev/dev_guides/first_ui_plugin.md)
7
-
8
- Also you can check displaying of all the elements together here [UI-kit-demo](https://platform.mef.dev/ui_kit_demo).
9
-
10
- This guide created for Angular@15 version project. Cause we will use packages compatible with Angular 15 version.
11
-
12
- ## Version control
13
- You can use the library on the following versions of Angular:
14
- |Angular/CLI|@natec/mef-dev-ui-kit|
15
- |--------|:--------------|
16
- |v.13 | v.1 |
17
- |v.14 | v.14 |
18
- |v.15 | v.15 |
19
- |v.16 | v.16 |
20
-
21
- ## Getting Started
22
- ### Installing
23
- Firstly you need to install following packages:
24
-
25
- > @natec/mef-dev-ui-kit:
26
- ```sh
27
- npm i @natec/mef-dev-ui-kit@15
28
- ```
29
-
30
- > Simple table extension with sorting, filtering, paging... for Angular apps. ngx-datatable:
31
- ```sh
32
- npm i @swimlane/ngx-datatable@20
33
- ```
34
-
35
- > Sleek, intuitive, and powerful front-end framework for faster and easier web development. bootstrap:
36
- ```sh
37
- npm i bootstrap@5
38
- ```
39
-
40
- > Ngx-bootstrap provides Bootstrap components powered by Angular, so you don't need to include original JS components.ngx-bootstrap:
41
- ```sh
42
- npm i ngx-bootstrap@10
43
- ```
44
-
45
- > CSS font-family parser/stringifier. Font-awesome:
46
- ```sh
47
- npm i font-awesome@4
48
- ```
49
- ### Adding dependencies:
50
- Now you need to add path in your Angular.json file
51
-
52
- ```html
3
+ A comprehensive Angular UI component library for building modern web applications on the MEF.DEV platform.
4
+
5
+ [![npm version](https://img.shields.io/npm/v/@natec/mef-dev-ui-kit.svg)](https://www.npmjs.com/package/@natec/mef-dev-ui-kit)
6
+ [![Angular](https://img.shields.io/badge/Angular-20-red.svg)](https://angular.io/)
7
+
8
+ ## Overview
9
+
10
+ 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.
11
+
12
+ ## Features
13
+
14
+ - **Responsive Design** with mobile-first approach
15
+ - **Accessibility** with ARIA support and keyboard navigation
16
+ - **Angular Forms** integration with ControlValueAccessor
17
+ - **Smooth Animations** using Angular animations
18
+ - **TypeScript** first with full type definitions
19
+ - **Tree-shakeable** modular architecture
20
+
21
+ ## Version Compatibility
22
+
23
+ | Angular/CLI | @natec/mef-dev-ui-kit |
24
+ |-------------|----------------------|
25
+ | v13 | v1.x |
26
+ | v14 | v14.x |
27
+ | v15 | v15.x |
28
+ | v16 | v16.x |
29
+ | v20 | v20.x |
30
+
31
+ ## Installation
32
+
33
+ ```bash
34
+ npm install @natec/mef-dev-ui-kit@20
35
+ ```
36
+
37
+ ### Peer Dependencies
38
+
39
+ Install the required peer dependencies:
40
+
41
+ ```bash
42
+ npm install @angular/cdk@20 @angular/forms@20
43
+ ```
44
+
45
+ ### Optional Dependencies
46
+
47
+ Some components may require additional dependencies:
48
+
49
+ ```bash
50
+ # For enhanced data tables
51
+ npm install @swimlane/ngx-datatable@20
52
+
53
+ # For styling (if not using custom theme)
54
+ npm install bootstrap@5 ngx-bootstrap@10 font-awesome@4
55
+ ```
56
+
57
+ ## Setup
58
+
59
+ ### 1. Import Styles
60
+
61
+ Add the library styles to your `angular.json`:
62
+
63
+ ```json
64
+ {
53
65
  "architect": {
54
66
  "build": {
55
67
  "options": {
56
68
  "styles": [
57
- "node_modules/bootstrap/scss/bootstrap.scss",
58
- "node_modules/@natec/mef-dev-ui-kit/src/lib/styles/core.scss",
59
- "node_modules/font-awesome/scss/font-awesome.scss",
60
- "src/styles.scss"
69
+ "node_modules/bootstrap/scss/bootstrap.scss",
70
+ "node_modules/@natec/mef-dev-ui-kit/src/lib/styles/core.scss",
71
+ "node_modules/font-awesome/scss/font-awesome.scss",
72
+ "src/styles.scss"
61
73
  ]
62
74
  }
63
75
  }
64
76
  }
65
- ```
66
- ### Usage
67
- Firstly, you need to import BrowserAnimationsModule in your `app.module.ts`
68
- ```html
77
+ }
78
+ ```
79
+
80
+ Alternatively, import styles in your `styles.scss`:
81
+
82
+ ```scss
83
+ @import '@natec/mef-dev-ui-kit/styles/core';
84
+ ```
85
+
86
+ ### 2. Enable Animations
87
+
88
+ Import `BrowserAnimationsModule` in your root module:
89
+
90
+ ```typescript
69
91
  import { NgModule } from '@angular/core';
70
92
  import { BrowserModule } from '@angular/platform-browser';
71
93
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
72
94
 
73
- import { AppRoutingModule } from './app-routing.module';
74
- import { AppComponent } from './app.component';
75
-
76
95
  @NgModule({
77
- declarations: [AppComponent],
78
96
  imports: [
79
97
  BrowserModule,
80
- AppRoutingModule,
81
98
  BrowserAnimationsModule
82
- ],
83
- providers: [],
84
- bootstrap: [AppComponent]
99
+ ]
85
100
  })
86
101
  export class AppModule { }
87
102
  ```
88
103
 
89
- You need to import Module from Ui-kit-lib installed earlier in your own module, and add to imports too.
90
- Example:
91
- ```html
92
- import { NgModule } from '@angular/core';
93
- import { CommonModule } from '@angular/common';
94
- import { MefDevCardModule } from '@natec/mef-dev-ui-kit';
104
+ ## Usage
95
105
 
96
- @NgModule({
97
- declarations:[],
98
- imports: [
99
- CommonModule,
100
- MefDevCardModule,
101
- ]
102
- })
103
- export class CardsModule { }
104
- ```
106
+ ### Basic Example
107
+
108
+ ```typescript
109
+ import { Component } from '@angular/core';
110
+ import { MefDevCardModule } from '@natec/mef-dev-ui-kit';
105
111
 
106
- After, you can use MefDev components in your project. Example of usage:
107
- ```html
108
- <mefdev-card
109
- class="b-color-Light-Gray-2 pt-3"
110
- [description] = "'Description'"
111
- [card_type]="'type'"
112
- [img]="'assets/imgs/store/Frame 521.png'">
113
- <ng-template #card_title >
114
- card_title
112
+ @Component({
113
+ selector: 'app-example',
114
+ standalone: true,
115
+ imports: [MefDevCardModule],
116
+ template: `
117
+ <mefdev-card
118
+ [description]="'Card description'"
119
+ [card_type]="'primary'">
120
+ <ng-template #card_title>
121
+ Card Title
115
122
  </ng-template>
116
123
  <ng-template #card_footer>
117
- card_footer
124
+ <button>Action</button>
118
125
  </ng-template>
119
126
  </mefdev-card>
127
+ `
128
+ })
129
+ export class ExampleComponent { }
120
130
  ```
121
131
 
122
- ### List of modules you can import in your project:
123
- * MefDevCardModule
124
- * MefDevCollapseModule
125
- * MefDevModalModule
126
- * MefDevPageLayoutsModule
127
- * MefDevFilteredFieldModule
128
- * MefDevHelpBlockModule
129
- * MefDevProgressModule
130
- * MefDevSelectModule
131
- * MefDevSwitchModule
132
- * MefDevTabsModule
133
-
134
- > Examples of other components you can find in this documentation in left menubar.
135
-
136
- ### Useful links:
137
- ___
138
- * Documentation of the library: https://platform.mef.dev/ui_kit
139
- * Demo of the library: https://platform.mef.dev/ui_kit_demo
140
- * Library package: https://www.npmjs.com/package/@natec/mef-dev-ui-kit
141
- * Ui-kit-lib at GitHub: https://github.com/mef-dev/ui-kit-demo.git
132
+ ## Component Categories
133
+
134
+ ### Markup-Kit Components
135
+
136
+ Layout and structural components for building page templates.
137
+
138
+ #### Available Modules
139
+
140
+ - **MefDevCardModule** - Card containers with header, content, and footer
141
+ - **MefDevCollapseModule** - Collapsible panels with animation
142
+ - **MefDevDropDownMenuModule** - Dropdown menus with positioning
143
+ - **MefDevModalModule** - Modal dialogs (fill screen, slide-up, slide-right, filter panel)
144
+ - **MefDevPageLayoutsModule** - Pre-built page layouts (central, table, manage)
145
+ - **MefDevStepExecutorModule** - Step-by-step execution wizards
146
+ - **MefDevFilteredFieldModule** - Filtered field inputs with suggestions
147
+
148
+ ### PG-Components
149
+
150
+ Specialized form controls and interactive components.
151
+
152
+ #### Available Modules
153
+
154
+ - **MefDevProgressModule** - Progress bars and indicators
155
+ - **MefDevSelectModule** - Custom select dropdowns with option pipes
156
+ - **MefDevSwitchModule** - Toggle switches
157
+ - **MefDevTabsModule** - Tabbed content panels
158
+
159
+ ### V2 Components (Material Design)
160
+
161
+ Modern Material Design components with full form integration and accessibility support.
162
+
163
+ #### Available Modules
164
+
165
+ - **MDCardModule** - Material Design cards
166
+ - **MDCheckBoxModule** - Checkboxes with form validation
167
+ - **MDCollapseModule** - Expansion panels and accordions
168
+ - **MDSteppperModule** - Multi-step forms and wizards
169
+ - **MDMenuModule** - Context menus and dropdown menus
170
+ - **MDModalModule** - Material Design dialogs
171
+ - **MDSelectModule** - Advanced select with search and grouping
172
+ - **MDSwitchModule** - Material Design toggle switches
173
+ - **MDTabsModule** - Material Design tabs with animations
174
+
175
+ ## Advanced Usage
176
+
177
+ ### Form Integration
178
+
179
+ V2 components implement `ControlValueAccessor` for seamless reactive forms integration:
180
+
181
+ ```typescript
182
+ import { Component } from '@angular/core';
183
+ import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
184
+ import { MDCheckBoxModule, MDSelectModule } from '@natec/mef-dev-ui-kit';
185
+
186
+ @Component({
187
+ selector: 'app-form',
188
+ standalone: true,
189
+ imports: [ReactiveFormsModule, MDCheckBoxModule, MDSelectModule],
190
+ template: `
191
+ <form [formGroup]="form">
192
+ <md-checkbox formControlName="agreed">
193
+ I agree to terms
194
+ </md-checkbox>
195
+
196
+ <md-select formControlName="country" placeholder="Select country">
197
+ <md-option value="ua">Ukraine</md-option>
198
+ <md-option value="us">United States</md-option>
199
+ </md-select>
200
+ </form>
201
+ `
202
+ })
203
+ export class FormComponent {
204
+ form = new FormGroup({
205
+ agreed: new FormControl(false),
206
+ country: new FormControl('')
207
+ });
208
+ }
209
+ ```
210
+
211
+ ### Modal Dialogs
212
+
213
+ ```typescript
214
+ import { Component, inject } from '@angular/core';
215
+ import { MDDialog, MDModalModule } from '@natec/mef-dev-ui-kit';
216
+
217
+ @Component({
218
+ selector: 'app-dialog-example',
219
+ template: `
220
+ <button (click)="openDialog()">Open Dialog</button>
221
+ `
222
+ })
223
+ export class DialogExampleComponent {
224
+ private dialog = inject(MDDialog);
225
+
226
+ openDialog() {
227
+ const dialogRef = this.dialog.open(MyDialogComponent, {
228
+ width: '400px',
229
+ data: { name: 'Example' }
230
+ });
231
+
232
+ dialogRef.afterClosed().subscribe(result => {
233
+ console.log('Dialog closed with result:', result);
234
+ });
235
+ }
236
+ }
237
+ ```
238
+
239
+ ### Stepper Wizard
240
+
241
+ ```typescript
242
+ import { Component } from '@angular/core';
243
+ import { MDSteppperModule } from '@natec/mef-dev-ui-kit';
244
+
245
+ @Component({
246
+ selector: 'app-wizard',
247
+ standalone: true,
248
+ imports: [MDSteppperModule],
249
+ template: `
250
+ <md-stepper>
251
+ <md-step label="Step 1">
252
+ <md-step-content>
253
+ Content for step 1
254
+ </md-step-content>
255
+ <md-step-footer>
256
+ <button mdStepperNext>Next</button>
257
+ </md-step-footer>
258
+ </md-step>
259
+
260
+ <md-step label="Step 2">
261
+ <md-step-content>
262
+ Content for step 2
263
+ </md-step-content>
264
+ <md-step-footer>
265
+ <button mdStepperPrevious>Back</button>
266
+ <button mdStepperNext>Next</button>
267
+ </md-step-footer>
268
+ </md-step>
269
+ </md-stepper>
270
+ `
271
+ })
272
+ export class WizardComponent { }
273
+ ```
274
+
275
+ ## Styling and Theming
276
+
277
+ ### Using CSS Variables
278
+
279
+ The library exposes CSS variables that you can override:
280
+
281
+ ```scss
282
+ :root {
283
+ --mef-primary-color: #007bff;
284
+ --mef-secondary-color: #6c757d;
285
+ --mef-border-radius: 4px;
286
+ }
287
+ ```
288
+
289
+ ### Component-Specific Styling
290
+
291
+ V2 components use `ViewEncapsulation.None` for easy customization:
292
+
293
+ ```scss
294
+ md-select {
295
+ .md-select-trigger {
296
+ border: 2px solid #custom-color;
297
+ }
298
+ }
299
+ ```
300
+
301
+ ## API Documentation
302
+
303
+ For detailed component APIs, properties, methods, and events, visit:
304
+
305
+ - **Full Documentation**: [https://platform.mef.dev/ui_kit](https://platform.mef.dev/ui_kit)
306
+ - **Live Demo**: [https://platform.mef.dev/ui_kit_demo](https://platform.mef.dev/ui_kit_demo)
307
+ - **Interactive Preview**: [https://preview.mef.dev](https://preview.mef.dev/)
308
+
309
+ ## Resources
310
+
311
+ - **Creating Your First Plugin**: [Developer Guide](https://platform.mef.dev/dev_guides/first_ui_plugin.md)
312
+ - **NPM Package**: [npmjs.com/package/@natec/mef-dev-ui-kit](https://www.npmjs.com/package/@natec/mef-dev-ui-kit)
313
+ - **GitHub Repository**: [github.com/mef-dev/ui-kit-demo](https://github.com/mef-dev/ui-kit-demo)
314
+
315
+ ## Browser Support
316
+
317
+ - Chrome (latest)
318
+ - Firefox (latest)
319
+ - Safari (latest)
320
+ - Edge (latest)
321
+
322
+ ## Contributing
323
+
324
+ This library is maintained by NATEC for the MEF.DEV platform.
325
+
326
+ ## License
327
+
328
+ Proprietary - Copyright © NATEC
329
+
330
+ ## Support
331
+
332
+ For issues, questions, or feature requests, please refer to the [MEF.DEV platform documentation](https://platform.mef.dev).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@natec/mef-dev-ui-kit",
3
- "version": "20.0.166",
3
+ "version": "20.0.167",
4
4
  "description": "MEF.DEV UI Kit Library",
5
5
  "author": {
6
6
  "name": "NATEC"