@zambon-dev/library 1.6.1 → 1.6.3

package/CHANGELOG.md

@@ -23,6 +23,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### ⚠ Breaking Changes / Migration
 
+## [1.6.3] - 2026-09-20
+
+### Fixed
+
+- Declared `ngx-resize-observer` and `rxjs` in `peerDependencies`. `DataGridRowComponent` imports
+  `ngx-resize-observer` at runtime, but the package was never declared, so installing
+  `@zambon-dev/library` on its own left the dependency unresolved.
+- Added a README to the published package.
+
+## [1.6.2] - 2026-09-20
+
+### Fixed
+
+- **A `lib-data-grid` column with no room from the start no longer drags its heading out of line.**
+  1.6.1 removes the heading of a collapsed column, but only once that column had measured a real
+  width at some point. A column that never has any room does not, so it kept a heading over nothing
+  and pushed every column to its right along -- up to 263px on a fourteen-column screen, which is
+  the same drift 1.6.1 set out to remove.
+
+  Whether a zero is believable is now settled by the row rather than by what the column measured
+  before: if the row has a width the layout is live, so a column reporting zero really has
+  collapsed.
+
+- **`lib-data-grid` headings no longer stay behind after you revisit a tab.** Re-activating a
+  detached tab puts the grid back in the page with its horizontal scroll at the start again, and no
+  scroll event follows to say so, so the headings kept the offset they had when you left: on a grid
+  scrolled 300px every heading sat 300px away from its column. The header now reconciles with the
+  body whenever the grid is re-measured, which is what re-inserting it triggers.
+
 ## [1.6.1] - 2026-09-19
 
 ### Fixed
@@ -48,6 +77,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   the body does not have. Measured in a running application the drift is zero across every column,
   at rest and scrolled.
 
+  A column that declares no `size` is laid out as `minmax(0, 1fr)`, which is free to collapse. If
+  one of yours does, its heading now goes with it rather than staying behind as a label over
+  nothing. Give such a column a real minimum -- `size: 'minmax(8rem, 1fr)'` -- to keep both on
+  screen.
+
 ## [1.6.0] - 2026-09-16
 
 ### Added
@@ -290,7 +324,9 @@ config options and the `getUserProfile()` method still exist but are no longer c
   available via [GitHub Releases](https://github.com/RicardoZambon/ZLibraries/releases) and the
   `library-v*` tags.
 
-[Unreleased]: https://github.com/RicardoZambon/ZLibraries/compare/library-v1.6.1...HEAD
+[Unreleased]: https://github.com/RicardoZambon/ZLibraries/compare/library-v1.6.3...HEAD
+[1.6.3]: https://github.com/RicardoZambon/ZLibraries/releases/tag/library-v1.6.3
+[1.6.2]: https://github.com/RicardoZambon/ZLibraries/releases/tag/library-v1.6.2
 [1.6.1]: https://github.com/RicardoZambon/ZLibraries/releases/tag/library-v1.6.1
 [1.6.0]: https://github.com/RicardoZambon/ZLibraries/releases/tag/library-v1.6.0
 [1.5.0]: https://github.com/RicardoZambon/ZLibraries/releases/tag/library-v1.5.0

package/README.md

@@ -0,0 +1,90 @@
+# @zambon-dev/library
+
+Angular UI components and shared presentation utilities for Zambon applications.
+
+This is the presentation layer of [ZLibraries](https://github.com/RicardoZambon/ZLibraries). It has no
+knowledge of authentication, routing shells or backend contracts — those live in
+[`@zambon-dev/framework`](https://www.npmjs.com/package/@zambon-dev/framework) and
+[`@zambon-dev/shared`](https://www.npmjs.com/package/@zambon-dev/shared), both of which build on this package.
+
+## Installation
+
+```bash
+npm install @zambon-dev/library
+```
+
+### Peer dependencies
+
+All peers must be present in the consuming application:
+
+| Package | Range |
+| --- | --- |
+| `@angular/cdk` | `^19.1.5` |
+| `@angular/common` | `^19.1.0` |
+| `@angular/core` | `^19.1.0` |
+| `@angular/forms` | `^19.1.0` |
+| `@angular/router` | `^19.1.0` |
+| `@ngx-translate/core` | `^16.0.4` |
+| `ngx-resize-observer` | `^3.0.0` |
+| `rxjs` | `^7.8.0` |
+
+## Usage
+
+Every component is standalone, so import only what a given component needs:
+
+```ts
+import { Component } from '@angular/core';
+import { DataGridComponent, FormInputComponent } from '@zambon-dev/library';
+
+@Component({
+  selector: 'app-customers',
+  imports: [DataGridComponent, FormInputComponent],
+  templateUrl: './customers.component.html',
+})
+export class CustomersComponent {}
+```
+
+`LibraryModule` is also exported for applications that are still NgModule-based, and re-exports every
+component, directive and pipe listed below.
+
+## Styles
+
+The package ships SCSS that the components expect. Import it once, at the application root:
+
+```scss
+@use '@zambon-dev/library/styles' as library;
+```
+
+That entry point resolves to `styles/variables.scss` and is also reachable as
+`@zambon-dev/library/styles/variables`.
+
+## What's included
+
+**Components** — `BaseComponent`, `CatalogSelectComponent`, `DataGridComponent`, `DataGridRowComponent`,
+`FormInputComponent`, `FormInputGroupComponent`, `FormGroupComponent`, `GroupAccordionComponent`,
+`GroupContainerComponent`, `GroupScrollSpyComponent`, `ModalComponent`, `MultiEditorComponent`,
+`MultiSelectComponent`, `MultiSelectResultGridComponent`, `SidebarComponent`, `RibbonComponent`,
+`RibbonButtonComponent`, `RibbonGroupComponent`
+
+**Directives** — `ScrollSpyDirective`
+
+**Pipes** — `EnumTranslatePipe`, `ReplacePipe`, `ReplaceManyPipe`
+
+Helpers, models, configuration providers, services and validators are exported from the package root as well.
+
+## Documentation
+
+Component behaviour and variants are documented as Storybook stories alongside the source. To browse them:
+
+```bash
+npm run storybook:library
+```
+
+## Contributing
+
+See the [workspace README](https://github.com/RicardoZambon/ZLibraries#readme) for the development setup,
+and [CHANGELOG.md](./CHANGELOG.md) for release history.
+
+## License
+
+MIT © Ricardo Zambon

package/fesm2022/zambon-dev-library.mjs

@@ -2215,7 +2215,7 @@ class DataGridRowComponent extends BaseComponent {
     dataGridDataset = inject(DataGridDataset);
     selected = false;
     _rowData;
-    hasMeasured = {};
+    elementRef = inject(ElementRef);
     //#endregion
     //#region Properties
     get rowData() {
@@ -2224,6 +2224,9 @@ class DataGridRowComponent extends BaseComponent {
     get columns() {
         return this.dataGridDataset.columns;
     }
+    get isLaidOut() {
+        return (this.elementRef.nativeElement?.getBoundingClientRect().width ?? 0) > 0;
+    }
     get isRowDataSelected() {
         return this.dataGridDataset.isKeySelected(this.rowKey);
     }
@@ -2250,14 +2253,16 @@ class DataGridRowComponent extends BaseComponent {
     //#region Event handlers
     onResize(colIndex, event) {
         const width = event.contentRect.width;
-        // The very first callback can arrive before the grid is laid out and reports zero for every
-        // column; taking that at face value would pin the heading at zero. Once a column has measured
-        // something real, a later zero is believable -- that is a 1fr column collapsing, and the
-        // heading has to collapse with it or every column to its right sits under the wrong one.
-        if (width <= 0 && !this.hasMeasured[colIndex]) {
+        // A zero means one of two very different things. Before the grid is laid out every column
+        // reports zero, and taking that at face value would pin every heading at zero. Once the row
+        // itself has a width the layout is live, and a zero is then the real thing: a 1fr column
+        // collapsed for want of room, whose heading has to collapse with it or every column to its
+        // right sits under the wrong one. Asking the row -- rather than remembering whether this
+        // column once measured something -- also covers a column that is born collapsed and never
+        // measures anything else.
+        if (width <= 0 && !this.isLaidOut) {
             return;
         }
-        this.hasMeasured[colIndex] = true;
         // Reported on every change, not just the first. The body lays the columns out as a CSS grid of
         // minmax(x, min-content), so a column is only as wide as the content currently rendered --
         // which virtual scrolling keeps changing. Measuring once and latching left the header copying
@@ -2489,6 +2494,7 @@ class DataGridComponent extends BaseComponent {
                 this.headerRightMargin = this.bodyElement.nativeElement.clientWidth - viewportWidth;
             }
             this.viewport?.checkViewportSize();
+            this.syncHeaderScroll();
             this.changeDetectorRef.detectChanges();
         });
         this.ngZone.runOutsideAngular(() => {
@@ -2520,6 +2526,15 @@ class DataGridComponent extends BaseComponent {
     }
     //#endregion
     //#region Private methods
+    syncHeaderScroll() {
+        // Re-inserting the viewport into the DOM -- which is what re-activating a detached tab does --
+        // puts its scroll position back to zero without firing a scroll event, so nothing tells the
+        // header to come back with it and the headings sit at an offset the body no longer has.
+        const scrollLeft = this.viewport?.elementRef?.nativeElement?.scrollLeft ?? 0;
+        if (this.headerScrollLeft !== scrollLeft) {
+            this.headerScrollLeft = scrollLeft;
+        }
+    }
     trackByFn(index, item) {
         return item.key;
     }