ngx-lite-form 1.3.7 → 1.3.9

package/README.md

@@ -47,47 +47,28 @@ Lite Form is ideal for a wide range of applications, including but not limited t
 
 ## Components
 
-### LiteInput
-Basic text input component with floating labels and validation.
-
-### LitePassword
-Password input component with toggle visibility, strength indicator, and advanced validation features.
-
-### LiteTextarea  
-Multi-line text input with auto-resize capabilities.
-
-### LiteSelect
-Single-selection dropdown with search and filtering.
-
-### LiteMultiSelect
-Multi-selection dropdown with inline selected items display and dynamic height adjustment.
-
-### LiteRadio
-Radio button group component for single selection from multiple options.
-
-### LiteCheckbox
-Checkbox component for boolean input with validation support.
-
-### LiteDate
-Advanced date picker component with single date and date range selection, custom formatting, and intelligent calendar positioning.
-
-### LiteFile
-File upload component with drag & drop, badge, file management panel, and camera capture support.
-
-### LiteDateTime
-Date and time picker with timezone-safe handling and consistent formatting utilities.
-
-### LiteTable
-Flexible data table component with custom columns, cell templates, nested property access, and integrated pagination.
-
-### LitePaginator
-Standalone pagination component with customizable page navigation, items per page selection, and total item display.
-
-### LitePanel
-Modal-style panel component that renders string content, Angular templates, or dynamic components. Supports configurable header text and action buttons via `LitePanelAction` definitions. Accepts custom `width`, `height`, `maxWidth`, and `maxHeight` inputs with automatic `px` suffix for numeric values.
-
-### LiteLoading
-Loading indicator component with view toggle for spinner (loading wheel) or progress bar modes. Supports defined progress percentage (0-100) or indeterminate animation, optional message display, and configurable spinner sizes (small, medium, large).
+Lite Form provides 15+ 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
+- **[LitePassword](docs/lite-password.md)** - Password input with visibility toggle and strength analysis
+- **[LiteTextarea](docs/lite-textarea.md)** - Multi-line text input with auto-resize
+- **[LiteSelect](docs/lite-select.md)** - Single-selection dropdown with search
+- **[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
+- **[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
+
+### Data Display & Navigation
+- **[LiteTable](docs/lite-table.md)** - Flexible data table with pagination and row actions
+- **[LitePaginator](docs/lite-paginator.md)** - Standalone pagination component
+
+### UI Components
+- **[LitePanel](docs/lite-panel.md)** - Modal panel for dialogs and forms
+- **[LiteLoading](docs/lite-loading.md)** - Loading spinner and progress bar
+- **[LiteSnackbar](docs/lite-snackbar.md)** - Toast notifications service
 
 ---
 
@@ -340,629 +321,32 @@ export class AppComponent {
 
 ## Component Documentation
 
-### LiteInput Component
-
-**Selector:** `lite-input`
-
-| Input    | Type        | Default | Description                               |
-| :------- | :---------- | :------ | :---------------------------------------- |
-| `control`| `FieldDto`  | -       | Field configuration and form control.     |
-| `inEdit` | `boolean`   | `true`  | Toggles between edit and read-only mode. |
-
-**Example:**
-```typescript
-// Component
-nameField = new FieldDto('Full Name', new FormControl('', [Validators.required]));
-
-// Template
-<lite-input [control]="nameField"></lite-input>
-```
-
-### LitePassword Component
-
-**Selector:** `lite-password`
-
-| Input                   | Type      | Default | Description                                            |
-| :---------------------- | :-------- | :------ | :----------------------------------------------------- |
-| `control`               | `FieldDto`| -       | Field configuration and form control.                  |
-| `inEdit`                | `boolean` | `true`  | Toggles between edit and read-only mode.               |
-| `showToggle`            | `boolean` | `true`  | If `true`, shows the password visibility toggle button.  |
-| `showStrengthIndicator` | `boolean` | `false` | If `true`, shows the password strength analysis bar.   |
-
-**Features:**
-- Password visibility toggle with eye/eye-off icons
-- Real-time password strength analysis
-- Advanced password validation error messages
-- Support for complex password patterns
-- Accessibility features (ARIA labels)
-
-**Example:**
-```typescript
-// Basic password
-passwordField = new FieldDto('Password', new FormControl('', [
-  Validators.required,
-  Validators.minLength(8)
-]));
-
-// Advanced password with pattern validation
-strongPasswordField = new FieldDto('Strong Password', new FormControl('', [
-  Validators.required,
-  Validators.minLength(8),
-  Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/)
-]));
-
-// Template
-<lite-password [control]="passwordField"></lite-password>
-<lite-password [control]="strongPasswordField" [showStrengthIndicator]="true"></lite-password>
-<lite-password [control]="confirmPasswordField" [showToggle]="false"></lite-password>
-```
-
-**Password Strength Analysis:**
-```typescript
-import { FormUtils } from 'ngx-lite-form';
-
-// Analyze password strength programmatically
-const analysis = FormUtils.analyzePasswordStrength('MyStr0ng@Pass');
-// Returns: { score: 6, level: 'Good', feedback: ['Consider using 12+ characters'] }
-```
-
-### LiteTextarea Component
-
-**Selector:** `lite-textarea`
-
-| Input     | Type       | Default | Description                                                   |
-| :-------- | :--------- | :------ | :------------------------------------------------------------ |
-| `control` | `FieldDto` | -       | Field configuration, including `rows` for initial height.     |
-| `inEdit`  | `boolean`  | `true`  | Toggles between edit and read-only mode.                      |
-
-**Example:**
-```typescript
-// Component
-// With validation
-descriptionField = new FieldDto('Description', new FormControl(''), 4);
-
-// Template
-<lite-textarea [control]="descriptionField"></lite-textarea>
-```
-
-### LiteSelect Component
-
-**Selector:** `lite-select`
-
-| Input     | Type                | Default | Description                                      |
-| :-------- | :------------------ | :------ | :----------------------------------------------- |
-| `control` | `SelectFieldDto<T>` | -       | Field configuration, including `options`.        |
-| `inEdit`  | `boolean`           | `true`  | Toggles between edit and read-only mode.         |
-
-**Example:**
-```typescript
-// Component
-statusField = new SelectFieldDto(
-  'Status',
-  new FormControl(''),
-  [
-    { id: 1, name: 'Active' },
-    { id: 2, name: 'Inactive' }
-  ],
-  (option) => option.name
-);
-
-// Template
-<lite-select [control]="statusField"></lite-select>
-```
-
-### LiteMultiSelect Component
+For detailed API documentation, examples, and usage guides for each component, please refer to the individual documentation files in the `/docs` folder:
+
+- [LiteInput Documentation](docs/lite-input.md)
+- [LitePassword Documentation](docs/lite-password.md)
+- [LiteTextarea Documentation](docs/lite-textarea.md)
+- [LiteSelect Documentation](docs/lite-select.md)
+- [LiteMultiSelect Documentation](docs/lite-multi-select.md)
+- [LiteRadio Documentation](docs/lite-radio.md)
+- [LiteCheckbox Documentation](docs/lite-checkbox.md)
+- [LiteDate Documentation](docs/lite-date.md)
+- [LiteDateTime Documentation](docs/lite-datetime.md)
+- [LiteFile Documentation](docs/lite-file.md)
+- [LiteTable Documentation](docs/lite-table.md)
+- [LitePaginator Documentation](docs/lite-paginator.md)
+- [LitePanel Documentation](docs/lite-panel.md)
+- [LiteLoading Documentation](docs/lite-loading.md)
+- [LiteSnackbar Documentation](docs/lite-snackbar.md)
 
-**Selector:** `lite-multi-select`
-
-| Input     | Type                     | Default | Description                                      |
-| :-------- | :----------------------- | :------ | :----------------------------------------------- |
-| `control` | `MultiSelectFieldDto<T>` | -       | Field configuration, including `options`.        |
-| `inEdit`  | `boolean`                | `true`  | Toggles between edit and read-only mode.         |
-
-**Features:**
-- Inline selected items display
-- Dynamic height adjustment
-- Filtering/search functionality
-- Individual item removal
-
-**Example:**
-```typescript
-// Component
-tagsField = new MultiSelectFieldDto(
-  'Tags',
-  new FormControl<string[]>([]),
-  ['Frontend', 'Backend', 'DevOps', 'Testing'],
-  (option) => option
-);
-
-// Template
-<lite-multi-select [control]="tagsField"></lite-multi-select>
-```
-
-### LiteDate Component
-
-**Selector:** `lite-date`
-
-| Input     | Type                          | Default        | Description                                      |
-| :-------- | :---------------------------- | :------------- | :----------------------------------------------- |
-| `control` | `FieldDto` or `DateRangeFieldDto` | -              | Field configuration for single or range date.    |
-| `inEdit`  | `boolean`                     | `true`         | Toggles between edit and read-only mode.         |
-| `format`  | `string`                      | `'dd/MM/yyyy'` | Date display format string.                      |
-| `range`   | `boolean`                     | `false`        | If `true`, enables date range selection mode.    |
-
-**Features:**
-- Single date and date range selection
-- Custom date formatting (dd/MM/yyyy, MM/dd/yyyy, yyyy-MM-dd)
-- Intelligent calendar positioning (auto-adjusts based on screen space)
-- Dual calendar display for range selection
-- Visual range highlighting with different styles for start, end, and in-between dates
-- Manual input parsing with format validation
-- Timezone-safe date handling
-- Today's date highlighting with distinctive styling
-- Auto-close calendar after range selection
-
-**Single Date Example:**
-```typescript
-// Component
-birthdateField: FieldDto = {
-  label: 'Birth Date',
-  formControl: new FormControl<string>('', { 
-    nonNullable: true, 
-    validators: [Validators.required] 
-  })
-};
-
-// Template
-<lite-date [control]="birthdateField" [format]="'dd/MM/yyyy'"></lite-date>
-```
-
-**Date Range Example:**
-```typescript
-// Component
-import { DateRangeFieldDto } from 'ngx-lite-form';
-
-eventDateField: DateRangeFieldDto = {
-  label: 'Event Date Range',
-  formControl: new FormControl<string[]>(['', ''], { nonNullable: true })
-};
-
-// Template
-<lite-date [control]="eventDateField" [range]="true" [format]="'dd/MM/yyyy'"></lite-date>
-```
-
-**Range Selection Behavior:**
-- First click: Sets start date, clears any existing range
-- Second click: Sets end date, completes range selection
-- Clicking same date twice: Resets to single start date
-- Auto-orders dates (earlier date becomes start, later becomes end)
-- Calendar auto-closes 1 second after completing range selection
-
-### LiteFile Component
-
-**Selector:** `lite-file`
-
-| Input     | Type           | Default | Description                                      |
-| :-------- | :------------- | :------ | :----------------------------------------------- |
-| `control` | `FileFieldDto` | -       | Field configuration for file uploads.            |
-| `inEdit`  | `boolean`      | `true`  | Toggles between edit and read-only mode.         |
-
-**Features:**
-- File upload via button, drag & drop, or camera capture (on supported devices)
-- Always-visible badge shows file count
-- Management panel lists files, upload area, and action buttons
-- Camera capture on devices with a camera using `<input type="file" accept="image/*" capture="environment">`
-- Validation: max files, max file size, file type restrictions
-- Image preview with thumbnails for image files
-- Progress tracking for file uploads
-- Accessibility: keyboard and screen reader friendly
-
-**Example:**
-```typescript
-// Component
-import { FileFieldDto } from 'ngx-lite-form';
-
-// Basic file upload
-fileField = new FileFieldDto('Upload Files', new FormControl([]));
-
-// Image upload with restrictions
-imageField = new FileFieldDto(
-  'Profile Picture',
-  new FormControl([]),
-  false, // single file only
-  'image/*', // images only
-  2 * 1024 * 1024, // 2MB limit
-  1, // max 1 file
-  true // show preview
-);
-
-// Template
-<lite-file [control]="fileField"></lite-file>
-<lite-file [control]="imageField"></lite-file>
-```
-
-**Camera Capture:**
-- The "Take Picture" button opens the device camera using a hidden file input with `accept="image/*" capture="environment"`
-- Works on mobile devices and laptops with a camera
-- On desktops without a camera, the button will do nothing or fall back to file selection
-- No special permissions required, but the browser may prompt for camera access
-
-**File Management Panel:**
-- Click the file icon button to open the management panel
-- Drag & drop files or click the upload area to select files
-- Use action buttons to upload files, take a picture, or close the panel
-- Remove files individually or clear all files
-
-### LiteTable Component
-
-**Selector:** `lite-table`
-
-| Input   | Type                | Default | Description                                      |
-| :------ | :------------------ | :------ | :----------------------------------------------- |
-| `table` | `TableFieldDto<T>`  | -       | Table configuration including columns and data.  |
-
-| Output               | Type                             | Description                                            |
-| :------------------- | :------------------------------- | :----------------------------------------------------- |
-| `pageChange`         | `number`                         | Emitted with the new page number on page change.       |
-| `itemsPerPageChange` | `number`                         | Emitted with the new items-per-page count.             |
-| `menuAction`         | `{ action: string; row: T }`     | Emitted when a row action is selected from a menu.     |
-
-**Features:**
-- Flexbox-based responsive layout for modern table design
-- Custom column definitions with labels, flex sizing, and cell templates
-- Support for nested object property access (dot notation)
-- Integrated pagination with lite-paginator component
-- Custom cell templates for advanced formatting (images, status indicators, dates)
-- Automatic handling of special data formats (name objects, nested properties)
-- Empty state display when no data is available
-- Sorting indicators (visual styling support)
-- Per-row actions menu via a dedicated `menu`-type column (kebab/tri-dot)
-
-**Example:**
-```typescript
-// Component
-import { TableFieldDto, TableColumn } from 'ngx-lite-form';
-
-interface Product {
-  id: number;
-  name: string;
-  price: number;
-  category: string;
-  inStock: boolean;
-}
-
-const columns: TableColumn[] = [
-  { key: 'id', label: 'ID', flex: '0 0 80px' },
-  { key: 'name', label: 'Product Name', flex: '2' },
-  { key: 'price', label: 'Price', flex: '0 0 100px', cellTemplate: (value) => `$${value?.toFixed(2)}` },
-  { key: 'category', label: 'Category', flex: '1' },
-  { key: 'inStock', label: 'Status', flex: '0 0 100px', cellTemplate: (value) => value ? '✓ In Stock' : '✗ Out of Stock' }
-];
-
-productTable = new TableFieldDto(columns, productData, false);
-
-// Template
-<lite-table [table]="productTable"></lite-table>
-```
-
-#### Row Actions Menu
-
-Add a dedicated menu column to show a kebab (tri-dot) button per row. Configure menu items on the column and handle the `(menuAction)` output.
-
-```typescript
-import { TableFieldDto, TableColumn } from 'ngx-lite-form';
-
-const columns: TableColumn[] = [
-  { key: 'name', label: 'Name', flex: '1' },
-  { key: 'email', label: 'Email', flex: '1' },
-  // Menu column (last column)
-  {
-    key: 'actions',
-    label: '',
-    flex: '0 0 44px',
-    type: 'menu',
-    menuItems: [
-      { label: 'Edit', value: 'edit' },
-      { label: 'Delete', value: 'delete', variant: 'danger' }
-    ]
-  }
-];
-
-table = new TableFieldDto(columns, userData, false);
-
-// In your component class
-onRowMenuAction(event: { action: string; row: any }) {
-  if (event.action === 'edit') {
-    // handle edit
-  } else if (event.action === 'delete') {
-    // handle delete
-  }
-}
-```
-
-```html
-<lite-table [table]="table" (menuAction)="onRowMenuAction($event)"></lite-table>
-```
-
-### LitePanel Component
-
-**Selector:** `lite-panel`
-
-| Input | Type | Default | Description |
-| :---- | :--- | :------ | :---------- |
-| `title` | `string \| null` | `null` | Panel header title text |
-| `content` | `string \| TemplateRef \| Type<any> \| null` | `null` | Content to display: string, template, or component |
-| `contentInputs` | `Record<string, any> \| null` | `null` | Inputs to pass to dynamic component content |
-| `actions` | `LitePanelAction[] \| null` | `null` | Action buttons (defaults to single OK button) |
-| `closeOnOverlayClick` | `boolean` | `true` | Whether clicking backdrop closes the panel |
-| `width` | `string \| number \| null` | `null` | Panel width (numeric values get px suffix) |
-| `height` | `string \| number \| null` | `null` | Panel height (numeric values get px suffix) |
-| `maxWidth` | `string \| number \| null` | `null` | Maximum panel width |
-| `maxHeight` | `string \| number \| null` | `null` | Maximum panel height |
-
-| Output | Type | Description |
-| :----- | :--- | :---------- |
-| `closed` | `unknown \| null` | Emitted when panel closes with action value or null |
-
-**Features:**
-- Three content types: string, Angular template, or dynamic component
-- Configurable action buttons with variants (primary, secondary, danger)
-- Customizable dimensions with automatic px suffix for numbers
-- Backdrop click to close (configurable)
-- Close button in header
-- Component content with input binding support
-- Accessible with ARIA attributes
-
-**String Content Example:**
-```typescript
-panelOpen = signal(false);
-
-openPanel() {
-  this.panelOpen.set(true);
-}
-
-onPanelClosed(result: unknown | null) {
-  this.panelOpen.set(false);
-}
-```
-
-```html
-@if (panelOpen()) {
-  <lite-panel
-    [title]="'Information'"
-    [content]="'This is simple text content.'"
-    (closed)="onPanelClosed($event)">
-  </lite-panel>
-}
-```
-
-**Template Content Example:**
-```typescript
-panelActions: LitePanelAction[] = [
-  { label: 'Confirm', value: 'confirm', variant: 'primary' },
-  { label: 'Cancel', value: null, variant: 'secondary' }
-];
-```
-
-```html
-@if (panelOpen()) {
-  <lite-panel
-    [title]="'Confirmation'"
-    [content]="confirmTemplate"
-    [actions]="panelActions"
-    width="500px"
-    (closed)="onPanelClosed($event)">
-  </lite-panel>
-}
-
-<ng-template #confirmTemplate let-close="close">
-  <p>Are you sure you want to proceed?</p>
-  <button (click)="close('custom-value')">Custom Action</button>
-</ng-template>
-```
-
-**Component Content Example:**
-```typescript
-import { Component, Type } from '@angular/core';
-import { FormControl, Validators } from '@angular/forms';
-import { LiteInput, FieldDto } from 'ngx-lite-form';
-
-// Create a standalone component for panel content
-@Component({
-  selector: 'user-form',
-  standalone: true,
-  imports: [LiteInput],
-  template: `
-    <div class="form-content">
-      <p>Fill out the form below:</p>
-      <lite-input [control]="nameField"></lite-input>
-      <lite-input [control]="emailField"></lite-input>
-    </div>
-  `
-})
-export class UserFormComponent {
-  nameField = new FieldDto('Name', new FormControl('', [Validators.required]));
-  emailField = new FieldDto('Email', new FormControl('', [Validators.required, Validators.email]));
-}
-
-// In your main component
-userFormComponent: Type<any> = UserFormComponent;
-panelActions: LitePanelAction[] = [
-  { label: 'Submit', value: 'submit', variant: 'primary' },
-  { label: 'Cancel', value: null, variant: 'secondary' }
-];
-```
-
-```html
-@if (panelOpen()) {
-  <lite-panel
-    [title]="'User Registration'"
-    [content]="userFormComponent"
-    [actions]="panelActions"
-    width="600px"
-    maxHeight="80vh"
-    (closed)="onPanelClosed($event)">
-  </lite-panel>
-}
-```
-
-**Passing Inputs to Component Content:**
-```typescript
-// Component with inputs
-@Component({...})
-export class DataViewComponent {
-  @Input() userId!: number;
-  @Input() mode!: string;
-}
-
-// Usage
-componentInputs = { userId: 123, mode: 'edit' };
-```
-
-```html
-<lite-panel
-  [content]="dataViewComponent"
-  [contentInputs]="componentInputs"
-  (closed)="onPanelClosed($event)">
-</lite-panel>
-```
-
-### LiteLoading Component
-
-**Selector:** `lite-loading`
-
-| Input      | Type                            | Default     | Description                                                  |
-| :--------- | :------------------------------ | :---------- | :----------------------------------------------------------- |
-| `view`     | `'spinner' \| 'progress'`       | `'spinner'` | The view type: spinner for loading wheel, progress for bar. |
-| `progress` | `number \| undefined`           | `undefined` | Progress percentage (0-100). Undefined shows indeterminate.  |
-| `message`  | `string \| undefined`           | `undefined` | Optional message to display below the indicator.             |
-| `size`     | `'small' \| 'medium' \| 'large'`| `'medium'`  | Size of the spinner (only applies to spinner view).          |
-| `visible`  | `boolean`                       | `true`      | Whether the loading indicator is visible.                    |
-
-**Features:**
-- View toggle between spinner (loading wheel) and progress bar
-- Defined progress with percentage display (0-100%)
-- Indeterminate progress with animated sliding bar
-- Three spinner sizes: small, medium, large
-- Optional message display below indicator
-- Visibility control for conditional rendering
-- Smooth animations and transitions
-- Accessible with ARIA attributes
-
-**Example:**
-```typescript
-// Component
-import { signal } from '@angular/core';
-
-isLoading = signal(true);
-uploadProgress = signal(0);
-
-// Simulate progress
-startUpload() {
-  this.uploadProgress.set(0);
-  const interval = setInterval(() => {
-    const current = this.uploadProgress();
-    if (current >= 100) {
-      clearInterval(interval);
-      this.isLoading.set(false);
-    } else {
-      this.uploadProgress.set(current + 10);
-    }
-  }, 300);
-}
-```
-
-```html
-<!-- Basic spinner -->
-<lite-loading></lite-loading>
-
-<!-- Spinner with message and size -->
-<lite-loading 
-  [size]="'large'" 
-  [message]="'Loading data...'"></lite-loading>
-
-<!-- Defined progress bar -->
-<lite-loading 
-  [view]="'progress'" 
-  [progress]="uploadProgress()" 
-  [message]="'Uploading files...'"></lite-loading>
-
-<!-- Indeterminate progress bar -->
-<lite-loading 
-  [view]="'progress'" 
-  [message]="'Processing your request...'\"></lite-loading>
-
-<!-- Controlled visibility -->
-<lite-loading 
-  [visible]="isLoading()" 
-  [message]="'Please wait...'"></lite-loading>
-```
-
-### LitePaginator Component
-
-**Selector:** `lite-paginator`
-
-| Input       | Type                | Default | Description                                      |
-| :---------- | :------------------ | :------ | :----------------------------------------------- |
-| `paginator` | `PaginatorFieldDto` | -       | Paginator configuration object.                  |
-
-| Output               | Type     | Description                                      |
-| :------------------- | :------- | :----------------------------------------------- |
-| `pageChange`         | `number` | Emitted with the new page number on page change. |
-| `itemsPerPageChange` | `number` | Emitted with the new items-per-page count.     |
-
-**Features:**
-- Previous/Next navigation buttons with disabled states
-- Numbered page buttons with active state highlighting
-- Items per page dropdown selection
-- Total items display with customizable formatting
-- Keyboard navigation support (arrow keys)
-- Responsive design that adapts to different screen sizes
-- Accessibility features with ARIA labels and screen reader support
-- Configurable page range display and navigation controls
-
-**Example:**
-```typescript
-// Component
-import { PaginatorFieldDto } from 'ngx-lite-form';
-
-paginator = new PaginatorFieldDto(1, 500, 25); // Page 1, 500 total items, 25 per page
-
-// Template
-<lite-paginator
-  [paginator]="paginator"
-  (pageChange)="onPageChange($event)"
-  (itemsPerPageChange)="onItemsPerPageChange($event)">
-</lite-paginator>
-```
-
-## Snackbar Service
-
-The library provides a simple snackbar notification service for showing messages at the top of the page. No component or template is needed.
-
-### Usage
-
-Inject the service and call `show()` with your message and type:
-
-```typescript
-import { LiteSnackbarService } from 'ngx-lite-form';
-
-constructor(private snackbar: LiteSnackbarService) {}
-
-// Show a success message
-this.snackbar.show('Operation completed!', 'done');
-
-// Show a warning
-this.snackbar.show('Please check your input.', 'warn');
-
-// Show an error (with custom duration)
-this.snackbar.show('Something went wrong.', 'error', 5000);
-```
+---
 
-- Types: `'done' | 'warn' | 'error'`
-- Duration: Optional, in milliseconds (default: 3000)
+## Additional Resources
 
-The snackbar will appear at the top of the page and auto-dismiss.
+- **[Contributing Guide](docs/CONTRIBUTING.md)** - How to contribute to the project
+- **[Style Guide](docs/STYLEGUIDE.md)** - SCSS styling conventions
+- **[Migration Guide](docs/MIGRATION.md)** - Upgrading between versions
+- **[Changelog](docs/CHANGELOG.md)** - Version history and release notes
 
 ---
 
@@ -1122,11 +506,10 @@ lite-form/
 └── scripts/                  # Build and publishing utilities
 ```
 
-For the full contributor guide and extended structure diagram, see [docs/CONTRIBUTING.md](https://github.com/liangk/lite-form/blob/main/docs/CONTRIBUTING.md).
 ## License
 This project is licensed under the MIT License - see the [LICENSE](https://github.com/liangk/lite-form/blob/main/LICENSE) file for details.
 
 ---
-
 ## Changelog
-- See [docs/CHANGELOG.md](https://github.com/liangk/lite-form/blob/main/docs/CHANGELOG.md) for the full historical record, including the latest `v1.3.6` release with smart dropdown positioning, input signal support, and enhanced table UI.
+- See [docs/CHANGELOG.md](https://github.com/liangk/lite-form/blob/main/docs/CHANGELOG.md) for the full historical record, including the latest `v1.3.9` release with smart form validation-based action disabling for LitePanel.
+-