@flusys/ng-ui 8.1.2 → 8.1.4

package/README.md

@@ -256,7 +256,13 @@ Native single-select dropdown with filtering. Selector: `f-select`.
 <f-select [options]="countries" optionLabel="name" optionValue="code" [(ngModel)]="selectedCountry" [filter]="true" [placeholder]="'form.selectCountry' | translate" />
 ```
 
-Key inputs: `options`, `optionLabel`, `optionValue`, `placeholder`, `disabled`, `filter`, `showClear`, `loading`, `invalid`, `touched`, `editable`, `appendTo` (`self | body`). Outputs: `onFilter`, `onChange`, `onShow`, `onHide`, `onBlur`. Supports `fTemplate="selectedItem"` / `fTemplate="item"` content templates.
+Key inputs: `options`, `optionLabel`, `optionValue`, `placeholder`, `disabled`, `filter`, `lazy`, `selectedObject`, `showClear`, `loading`, `invalid`, `touched`, `editable`, `appendTo` (`self | body`). Outputs: `onFilter`, `onChange`, `onShow`, `onHide`, `onBlur`, `onLazyLoad`. Supports `fTemplate="selectedItem"` / `fTemplate="item"` content templates.
+
+**Lazy/search edit forms — `selectedObject`:** when `[lazy]="true"` or `[filter]="true"` is combined with a server-paged/searched `options()` list, the page currently loaded may not contain the option matching the bound value (e.g. editing a record whose selected item isn't in the first lazy page). Pass the full entity being edited via `[selectedObject]` and the component pins it into the option pool (deduped by `optionValue`, only while it actually matches the current value) so the trigger label, checkmark and list row always resolve correctly:
+
+```html
+<f-select [options]="users()" optionLabel="name" optionValue="id" [lazy]="true" (onLazyLoad)="loadUsers($event)" [selectedObject]="editingUser()" [(ngModel)]="managerId" />
+```
 
 ### MultiSelectComponent
 
@@ -266,7 +272,13 @@ Multi-value select with chip/comma display. Selector: `f-multiselect`.
 <f-multiselect [options]="roles" optionLabel="name" [(ngModel)]="selectedRoles" display="chip" [showToggleAll]="true" />
 ```
 
-Key inputs: `options`, `optionLabel`, `optionValue`, `placeholder`, `filter`, `display` (`comma | chip`), `maxSelectedLabels`, `selectionLimit`, `showToggleAll`, `invalid`, `touched`, `appendTo` (`self | body`).
+Key inputs: `options`, `optionLabel`, `optionValue`, `placeholder`, `filter`, `lazy`, `selectedObjects`, `display` (`comma | chip`), `maxSelectedLabels`, `selectionLimit`, `showToggleAll`, `invalid`, `touched`, `appendTo` (`self | body`).
+
+**Lazy/search edit forms — `selectedObjects`:** same problem as `f-select` but for every currently selected value — pass the full entities (e.g. the record's already-selected roles) via `[selectedObjects]` so chips never silently vanish when the lazy/filtered `options()` page doesn't include them:
+
+```html
+<f-multiselect [options]="roles()" optionLabel="name" optionValue="id" [lazy]="true" (onLazyLoad)="loadRoles($event)" [selectedObjects]="editingUser().roles" [(ngModel)]="roleIds" />
+```
 
 ### CheckboxComponent
 
@@ -470,15 +482,17 @@ Key inputs: `options` (`TreeNode[]`), `placeholder`, `disabled`, `filter`, `sele
 
 ### IconFieldComponent / InputIconComponent
 
-Positions an icon inside a text input (search boxes, etc.) via content projection. Selectors: `f-iconfield`, `f-inputicon`.
+Positions an icon inside a text input (search boxes, etc.). Selectors: `f-iconfield`, `f-inputicon`.
 
 ```html
 <f-iconfield>
-  <f-inputicon><ui-icon name="search" /></f-inputicon>
+  <f-inputicon icon="search" />
   <input fInputText [placeholder]="'shared.search' | translate" />
 </f-iconfield>
 ```
 
+`f-inputicon`'s `icon` input renders the icon at a fixed 17px regardless of ambient font-size, so it always aligns with the field — prefer it over projecting a manually-sized `<ui-icon>` as content. Content projection (`<f-inputicon><ui-icon .../></f-inputicon>`) still works for cases needing a non-Lucide icon or custom template.
+
 ### FloatLabelComponent
 
 Floats a `<label>` above the input on focus/fill. Selector: `f-floatlabel`.
@@ -1246,7 +1260,7 @@ Renders a Lucide icon by name, with PrimeIcons-style aliases mapped internally f
 <ui-icon name="check-circle" [size]="20" [spin]="false" />
 ```
 
-Key inputs: `name`, `size` (default `16`), `spin`, `fill`.
+Key inputs: `name`, `size` (unset by default — renders at `1em`, scaling with whatever font-size context, e.g. a Tailwind `text-*` class, surrounds it; pass a number to pin an exact pixel size instead), `spin`, `fill`.
 
 ### EditorComponent