ngx-lite-form 1.4.9 → 1.5.0

package/README.md

@@ -1,6 +1,6 @@
 # Lite Form: A Lightweight and Powerful Angular Form Library
 
-**Lite Form is a comprehensive, open-source library of 13+ standalone components for building modern, reactive forms in Angular (v20+). It provides lightweight, customizable, and fully-typed form controls—from basic inputs to advanced data tables and loading indicators—designed to accelerate development and improve user experience.**
+**Lite Form is a comprehensive, open-source library of 18+ standalone components for building modern, reactive forms in Angular (v20+). It provides lightweight, customizable, and fully-typed form controls—from basic inputs to advanced data tables, loading indicators, and badge components—designed to accelerate development and improve user experience.**
 
 This library is built for developers who need a robust, out-of-the-box solution for form-heavy applications without the overhead of heavy-weight dependencies. All components are standalone, tree-shakable, and integrate seamlessly with Angular's Reactive Forms module.
 
@@ -47,7 +47,7 @@ Lite Form is ideal for a wide range of applications, including but not limited t
 
 ## Components
 
-Lite Form provides 15+ form and UI components. Click on any component below for detailed documentation:
+Lite Form provides 18+ form and UI components. Click on any component below for detailed documentation:
 
 ### Form Controls
 - **[LiteInput](docs/lite-input.md)** - Text input with floating labels and validation
@@ -57,6 +57,8 @@ Lite Form provides 15+ form and UI components. Click on any component below for
 - **[LiteMultiSelect](docs/lite-multi-select.md)** - Multi-selection dropdown with inline display
 - **[LiteRadio](docs/lite-radio.md)** - Radio button group for single selection
 - **[LiteCheckbox](docs/lite-checkbox.md)** - Checkbox for boolean input
+- **[LiteToggle](docs/lite-toggle.md)** - Modern iOS-style toggle switch for boolean states
+- **[LiteSlider](docs/lite-slider.md)** - Range slider for numeric input with visual feedback
 - **[LiteDate](docs/lite-date.md)** - Date picker with single/range selection
 - **[LiteDateTime](docs/lite-datetime.md)** - Combined date and time picker
 - **[LiteFile](docs/lite-file.md)** - File upload with drag & drop and camera capture
@@ -69,6 +71,7 @@ Lite Form provides 15+ form and UI components. Click on any component below for
 - **[LitePanel](docs/lite-panel.md)** - Modal panel for dialogs and forms
 - **[LiteLoading](docs/lite-loading.md)** - Loading spinner and progress bar
 - **[LiteTabGroup](docs/lite-tab-group.md)** - Tabs with sliding track and Angular projection
+- **[LiteBadge](docs/lite-badge.md)** - Badge and chip component for status indicators and tags
 - **[LiteSnackbar](docs/lite-snackbar.md)** - Toast notifications service
 
 ---
@@ -92,13 +95,16 @@ import {
   LiteMultiSelect,
   LiteRadio,
   LiteCheckbox,
+  LiteToggle,
+  LiteSlider,
   LiteDate,
   LiteDateTime,
   LiteFile,
   LiteTable,
   LitePaginator,
   LitePanel,
-  LiteLoading
+  LiteLoading,
+  LiteBadge
 } from 'ngx-lite-form';
 import { FormControl, Validators } from '@angular/forms';
 
@@ -109,9 +115,11 @@ import {
   RadioFieldDto,
   DateRangeFieldDto,
   FileFieldDto,
+  SliderFieldDto,
   TableFieldDto,
   PaginatorFieldDto,
-  LitePanelAction
+  LitePanelAction,
+  BadgeFieldDto
 } from 'ngx-lite-form';
 
 @Component({
@@ -124,12 +132,15 @@ import {
     LiteMultiSelect,
     LiteRadio,
     LiteCheckbox,
+    LiteToggle,
+    LiteSlider,
     LiteDate,
     LiteDateTime,
     LiteFile,
     LiteTable,
     LitePaginator,
-    LiteLoading
+    LiteLoading,
+    LiteBadge
   ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
@@ -158,6 +169,20 @@ export class AppComponent {
   // Checkbox (using basic FieldDto for boolean)
   agreeField = new FieldDto('I agree to terms', new FormControl<boolean>(false, { nonNullable: true }));
   
+  // Toggle switch
+  notificationsField = new FieldDto('Enable Notifications', new FormControl<boolean>(true, { nonNullable: true }));
+  
+  // Slider
+  volumeField = new SliderFieldDto(
+    'Volume',
+    new FormControl<number>(75, { nonNullable: true }),
+    0,
+    100,
+    1,
+    true,
+    (value) => `${value}%`
+  );
+  
   // Select dropdown
   countryField = new SelectFieldDto(
     'Country',
@@ -273,6 +298,21 @@ export class AppComponent {
     this.panelResult.set(result);
     this.basicPanelOpen.set(false);
   }
+
+  // Badge examples
+  statusBadge = new BadgeFieldDto('Active', 'success');
+  warningBadge = new BadgeFieldDto('Pending', 'warning');
+  infoBadge = new BadgeFieldDto('New', 'info', 'small');
+  
+  tags = signal<BadgeFieldDto[]>([
+    new BadgeFieldDto('Angular', 'primary', 'medium', true),
+    new BadgeFieldDto('TypeScript', 'info', 'medium', true),
+    new BadgeFieldDto('RxJS', 'success', 'medium', true)
+  ]);
+
+  removeTag(index: number) {
+    this.tags.update(current => current.filter((_, i) => i !== index));
+  }
 }
 ```
 
@@ -284,6 +324,8 @@ export class AppComponent {
   <lite-password [control]="passwordField" [showStrengthIndicator]="true"></lite-password>
   <lite-textarea [control]="descriptionField"></lite-textarea>
   <lite-checkbox [control]="agreeField"></lite-checkbox>
+  <lite-toggle [control]="notificationsField"></lite-toggle>
+  <lite-slider [control]="volumeField"></lite-slider>
   <lite-select [control]="countryField"></lite-select>
   <lite-multi-select [control]="skillsField"></lite-multi-select>
   <lite-radio [control]="planField"></lite-radio>
@@ -354,6 +396,17 @@ export class AppComponent {
 
 <!-- Controlled visibility -->
 <lite-loading [visible]="isLoading" [message]="'Please wait...'"></lite-loading>
+
+<!-- Badges and Chips -->
+<!-- Status badges -->
+<lite-badge [badge]="statusBadge"></lite-badge>
+<lite-badge [badge]="warningBadge"></lite-badge>
+<lite-badge [badge]="infoBadge"></lite-badge>
+
+<!-- Removable tags/chips -->
+@for (tag of tags(); track $index) {
+  <lite-badge [badge]="tag" (remove)="removeTag($index)"></lite-badge>
+}
 ```
 ---
 
@@ -368,6 +421,8 @@ For detailed API documentation, examples, and usage guides for each component, p
 - [LiteMultiSelect Documentation](docs/lite-multi-select.md)
 - [LiteRadio Documentation](docs/lite-radio.md)
 - [LiteCheckbox Documentation](docs/lite-checkbox.md)
+- [LiteToggle Documentation](docs/lite-toggle.md)
+- [LiteSlider Documentation](docs/lite-slider.md)
 - [LiteDate Documentation](docs/lite-date.md)
 - [LiteDateTime Documentation](docs/lite-datetime.md)
 - [LiteFile Documentation](docs/lite-file.md)
@@ -376,6 +431,7 @@ For detailed API documentation, examples, and usage guides for each component, p
 - [LitePanel Documentation](docs/lite-panel.md)
 - [LiteLoading Documentation](docs/lite-loading.md)
 - [LiteTabGroup Documentation](docs/lite-tab-group.md)
+- [LiteBadge Documentation](docs/lite-badge.md)
 - [LiteSnackbar Documentation](docs/lite-snackbar.md)
 
 ---
@@ -500,6 +556,59 @@ class PaginatorFieldDto {
 }
 ```
 
+### BadgeFieldDto
+Badge and chip configuration for the LiteBadge component.
+
+```typescript
+type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+type BadgeSize = 'small' | 'medium' | 'large';
+
+class BadgeFieldDto {
+  label: string;
+  variant?: BadgeVariant;  // Color variant (default: 'default')
+  size?: BadgeSize;        // Size option (default: 'medium')
+  removable?: boolean;     // Show remove button (default: false)
+  icon?: string;           // SVG or HTML string for icon
+
+  constructor(
+    label: string,
+    variant: BadgeVariant = 'default',
+    size: BadgeSize = 'medium',
+    removable: boolean = false,
+    icon?: string
+  )
+}
+```
+
+### SliderFieldDto
+Slider field configuration for the LiteSlider component.
+
+```typescript
+class SliderFieldDto {
+  label: string;
+  formControl: FormControl<number>;
+  min?: number;                            // Minimum value (default: 0)
+  max?: number;                            // Maximum value (default: 100)
+  step?: number;                           // Step increment (default: 1)
+  showMinMax?: boolean;                    // Show min/max labels (default: true)
+  valueFormatter?: (value: number) => string;  // Custom value formatter
+  hint?: string;                           // Helper text
+
+  constructor(
+    label: string,
+    formControl: FormControl<number>,
+    min: number = 0,
+    max: number = 100,
+    step: number = 1,
+    showMinMax: boolean = true,
+    valueFormatter?: (value: number) => string,
+    hint?: string
+  )
+}
+```
+
+**Note:** LiteToggle uses the standard `FieldDto` with a `FormControl<boolean>`.
+
 ---
 
 ## Validation