@vsn-ux/ngx-gaia 0.13.0 → 0.14.0

package/docs/data-select.md

@@ -36,7 +36,9 @@ Data select component that automatically generates options from an items array.
 - `bindValue: string` - Property path to use as option value
 - `bindLabel: string` - Property path to use as option label
 - `groupBy: string | ((item: IGaSelectOption) => string)` - Property or function for grouping options
-- `loading: boolean` - Show loading spinner (default: false)
+- `valueLoading: boolean` - Show loading spinner in the trigger area (default: false)
+- `optionsLoading: boolean` - Show loading spinner in the dropdown options list (default: false)
+- `loading: boolean` - **Deprecated.** Maps to `optionsLoading`. Use `valueLoading` or `optionsLoading` instead (default: false)
 - `labelHidden: boolean` - Use when the connected label is not visible; keeps the placeholder always shown so the component remains identifiable (default: false)
 - `withOptionInput: boolean | null` - Show radio/checkbox in options (default: null)
 - `valueDisplayLimit: number | null` - Limit number of displayed values in multi-select (default: null)
@@ -187,7 +189,7 @@ Searchable with custom filtering (server-side)
   searchable
   customFilter
   [items]="filteredOptions.value() ?? []"
-  [loading]="filteredOptions.isLoading()"
+  [optionsLoading]="filteredOptions.isLoading()"
   (searchValueChange)="searchText.set($event)"
   [(value)]="selected"
 />
@@ -333,12 +335,23 @@ Infinite scroll with optionsEndReached
 ```html
 <ga-data-select
   [items]="items"
-  [loading]="isLoading"
+  [optionsLoading]="isLoading"
   (optionsEndReached)="loadMore()"
   [(value)]="selected"
 />
 ```
 
+Value loading
+
+```html
+<ga-data-select
+  [items]="options"
+  [valueLoading]="isLoading"
+  placeholder="Select option"
+  [(value)]="selected"
+/>
+```
+
 i18n configuration
 
 ```typescript

package/docs/form-field.md

@@ -33,12 +33,24 @@ Information text component.
 
 ## `[gaFormControl]`
 
-Form control directive.
+Form control directive that tracks validation state and manages ARIA attributes (`aria-invalid`, `aria-errormessage`). Automatically applied as a host directive on Gaia form controls (`gaInput`, `gaTextArea`, `ga-select`, `ga-data-select`, `ga-switch`, `ga-checkbox`, `ga-radio-group`). Use it explicitly only for custom (non-Gaia) controls inside `<ga-form-field>`.
 
 ### Inputs
 
 - `gaFormControl: NgControl | string` - Optional explicit NgControl reference or control name
 
+## `[gaFormFieldIgnore]`
+
+Opt-out directive. When placed on a Gaia form control inside `<ga-form-field>`, prevents its implicit `gaFormControl` from registering with the form field. Useful when multiple form controls exist in a single form field and only one should drive the error callout.
+
+```html
+<ga-form-field>
+  <ga-label>Primary</ga-label>
+  <input gaInput [formControl]="mainCtrl" />
+  <ga-select gaFormFieldIgnore [formControl]="auxCtrl">...</ga-select>
+</ga-form-field>
+```
+
 ## `[gaError]`
 
 Directive for defining error message templates. Displays the template when the specified error key exists on the control. Does not set errors; only provides the message display for existing errors.
@@ -69,12 +81,12 @@ Standalone directive for connecting form controls to form field labels. Import `
 
 ## Signal Forms Support
 
-The form field works with Angular Signal Forms (`[formField]` directive). Use `gaFormControl` alongside `[formField]`:
+The form field works with Angular Signal Forms (`[formField]` directive):
 
 ```html
 <ga-form-field>
   <ga-label>Email</ga-label>
-  <input gaFormControl gaInput [formField]="myForm.email" />
+  <input gaInput [formField]="myForm.email" />
 </ga-form-field>
 ```
 
@@ -93,7 +105,7 @@ Complete form field
 ```html
 <ga-form-field>
   <ga-label state="(optional)" definition="Help text">Field Label</ga-label>
-  <input gaFormControl gaInput [(ngModel)]="value" required />
+  <input gaInput [(ngModel)]="value" required />
   <ga-info>Additional information</ga-info>
   <ng-template gaError="required">This field is required</ng-template>
 </ga-form-field>
@@ -105,7 +117,6 @@ Manually setting errors with gaFormControlErrors
 <ga-form-field>
   <ga-label>Password</ga-label>
   <input
-    gaFormControl
     gaInput
     [gaFormControlErrors]="{ weakPassword: isPasswordWeak ? 'Password too weak' : null }"
     [(ngModel)]="password"
@@ -155,7 +166,7 @@ Global error override behavior
 ```html
 <ga-form-field>
   <ga-label>Password</ga-label>
-  <input gaFormControl gaInput [(ngModel)]="password" required minlength="8" />
+  <input gaInput [(ngModel)]="password" required minlength="8" />
   <!-- This custom template overrides the global 'required' error -->
   <ng-template gaError="required">Password is required</ng-template>
   <!-- The 'minlength' error will use the global message if configured -->
@@ -175,7 +186,7 @@ emailForm = form(this.model, (schemaPath) => {
 ```html
 <ga-form-field>
   <ga-label>Email</ga-label>
-  <input gaFormControl gaInput [formField]="emailForm.email" />
+  <input gaInput [formField]="emailForm.email" />
   <!-- No gaError templates needed — messages from validators are used automatically -->
 </ga-form-field>
 ```

package/docs/text-area.md

@@ -45,6 +45,6 @@ With form field
 ```html
 <ga-form-field>
   <ga-label>Description</ga-label>
-  <textarea gaFormControl gaTextArea placeholder="Enter description"></textarea>
+  <textarea gaTextArea placeholder="Enter description"></textarea>
 </ga-form-field>
 ```

package/docs/textarea.md

@@ -25,6 +25,6 @@ Text area in form field
 ```html
 <ga-form-field>
   <ga-label>Description</ga-label>
-  <textarea gaFormControl gaTextArea [(ngModel)]="description"></textarea>
+  <textarea gaTextArea [(ngModel)]="description"></textarea>
 </ga-form-field>
 ```