@ng-simplicity/forms-core 1.1.2 → 1.1.4

package/README.md

@@ -9,12 +9,13 @@ The core engine package for **NG-Simplicity Forms**. This package manages form s
 This core package is extended by styling integration packages that provide prebuilt themed form components:
 - **[@ng-simplicity/forms-bootstrap](../forms-bootstrap/README.md)**: Dynamic forms pre-styled with Bootstrap form fields and layouts.
 - **[@ng-simplicity/forms-material](../forms-material/README.md)**: Dynamic forms pre-styled with Angular Material inputs and controls.
+- **[@ng-simplicity/forms-tailwind](../forms-tailwind/README.md)**: Dynamic forms styled with Tailwind CSS utility classes, with every class overridable through `provideNgsFormsTailwindClasses()`.
 
 ## Compatibility
 
 | Package | Package version | Angular support |
 |---|---:|---|
-| `@ng-simplicity/forms-core` | `1.1.2` | `17.x`–`22.x` |
+| `@ng-simplicity/forms-core` | `1.1.4` | `17.x`–`22.x` |
 
 ---
 
@@ -26,6 +27,16 @@ Add this package to your Angular application:
 npm install @ng-simplicity/forms-core
 ```
 
+To render prebuilt inputs, add one styling package and register its components:
+
+| Styling | Install | Register |
+|---|---|---|
+| Bootstrap 5 | `npm install @ng-simplicity/forms-bootstrap bootstrap` | `NgsFormsBootstrapModule.registerAllBootStrapComponents(registry)` |
+| Angular Material | `npm install @ng-simplicity/forms-material` (after `ng add @angular/material`) | `NgsFormsMaterialModule.registerAllMaterialComponents(registry)` |
+| Tailwind CSS | `npm install @ng-simplicity/forms-tailwind`, then add `@source '../node_modules/@ng-simplicity/forms-tailwind';` to your Tailwind stylesheet | `NgsFormsTailwindModule.registerAllTailwindComponents(registry)` |
+
+Each `registerAll…` helper also registers the core structural components, so it is the only registration call you need. See each package's README for full setup.
+
 ---
 
 ## Architecture Overview
@@ -386,10 +397,17 @@ import { NgsFormsFormArrayRemoveItemComponent } from '@ng-simplicity/forms-core'
 const removeContactBtn = NgsFormsFormArrayRemoveItemComponent.create({
   buttonText: 'Delete',
   buttonClass: 'btn btn-danger',
-  buttonIcon: 'trash-icon'
+  buttonIcon: 'trash-icon',
+  // Optional accessible name. Defaults to `${buttonText} item ${index + 1}`, for example "Delete item 2".
+  ariaLabel: (index) => `Delete contact ${index + 1}`,
 });
 ```
 
+The button always removes its own row, even after earlier rows have been removed. When the removed row held the focus, focus moves to the Remove button of the row that takes its place. Custom components inside a row can inject `NGS_FORMS_ARRAY_ROW` (the row's `UntypedFormGroup`) and use `formArray.controls.indexOf(row)` to find the row's current index; `NGS_FORMS_ITEM_INDEX` is the index the row had when it was created.
+
+```typescript
+```
+
 ### 5. Section (`section`)
 A visual layout grouping with a title and subtitle.
 - **Component**: `NgsFormsFormSectionComponent`
@@ -402,6 +420,7 @@ import { NgsFormsFormSectionComponent } from '@ng-simplicity/forms-core';
 const personalSection = NgsFormsFormSectionComponent.create({
   title: 'Personal Information',
   titleClass: 'custom-title-class', // Optional, defaults to 'h3'
+  headingLevel: 2, // Optional heading level announced by screen readers, defaults to 3
   subtitle: 'Tell us a bit about yourself',
   subtitleClass: 'custom-subtitle-class', // Optional, defaults to 'lead'
   items: [
@@ -521,6 +540,7 @@ Ensure your custom configuration type extends one of these core interfaces for f
 Fully functional example applications demonstrating the form engine functionality are located in the [`apps/`](../../apps) folder of this monorepo:
 - **`forms-bootstrap-demo`**: Integrates and showcases the `@ng-simplicity/forms-bootstrap` package.
 - **`forms-material-demo`**: Integrates and showcases the `@ng-simplicity/forms-material` package.
+- **`forms-tailwind-demo`**: Integrates and showcases the `@ng-simplicity/forms-tailwind` package.
 
 ---