@openkit-labs/ngx-kit-ui 0.0.33 → 0.0.34

package/fesm2022/openkit-labs-ngx-kit-ui.mjs

@@ -3348,6 +3348,10 @@ class KitGridComponent {
         if (this.minRowHeight) {
             const min = this.minRowHeight;
             const max = this.maxRowHeight || '1fr';
+            // Keep grid-template-rows for explicit templates, but also set
+            // grid-auto-rows so implicitly created rows (when items wrap)
+            // receive the same min/max sizing. Using `auto-fit` here alone
+            // doesn't affect implicit rows created by auto-placement.
             return `repeat(auto-fit, minmax(${min}, ${max}))`;
         }
         if (typeof this.rows === 'number') {
@@ -3358,6 +3362,19 @@ class KitGridComponent {
         }
         return 'none';
     }
+    /**
+     * When consumers provide `minRowHeight` we should also set
+     * `grid-auto-rows` so that implicitly generated rows (when
+     * items wrap to additional rows) use the same min/max sizing.
+     */
+    get gridAutoRows() {
+        if (this.minRowHeight) {
+            const min = this.minRowHeight;
+            const max = this.maxRowHeight || '1fr';
+            return `minmax(${min}, ${max})`;
+        }
+        return null;
+    }
     get rowGapStyle() {
         if (this.rowGap !== undefined) {
             return `${this.rowGap}px`;
@@ -3383,7 +3400,7 @@ class KitGridComponent {
         return this.alignContent ?? null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitGridComponent, isStandalone: true, selector: "kit-grid", inputs: { fullWidth: "fullWidth", cols: "cols", rows: "rows", minCols: "minCols", maxCols: "maxCols", minColWidth: "minColWidth", maxColWidth: "maxColWidth", minRowHeight: "minRowHeight", maxRowHeight: "maxRowHeight", rowGap: "rowGap", colGap: "colGap", justifyItems: "justifyItems", alignItems: "alignItems", justifyContent: "justifyContent", alignContent: "alignContent" }, host: { properties: { "style.display": "this.display", "style.width": "this.widthStyle", "style.grid-template-columns": "this.gridTemplateColumns", "style.grid-template-rows": "this.gridTemplateRows", "style.row-gap": "this.rowGapStyle", "style.column-gap": "this.colGapStyle", "style.justify-items": "this.justifyItemsStyle", "style.align-items": "this.alignItemsStyle", "style.justify-content": "this.justifyContentStyle", "style.align-content": "this.alignContentStyle" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{box-sizing:border-box}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitGridComponent, isStandalone: true, selector: "kit-grid", inputs: { fullWidth: "fullWidth", cols: "cols", rows: "rows", minCols: "minCols", maxCols: "maxCols", minColWidth: "minColWidth", maxColWidth: "maxColWidth", minRowHeight: "minRowHeight", maxRowHeight: "maxRowHeight", rowGap: "rowGap", colGap: "colGap", justifyItems: "justifyItems", alignItems: "alignItems", justifyContent: "justifyContent", alignContent: "alignContent" }, host: { properties: { "style.display": "this.display", "style.width": "this.widthStyle", "style.grid-template-columns": "this.gridTemplateColumns", "style.grid-template-rows": "this.gridTemplateRows", "style.grid-auto-rows": "this.gridAutoRows", "style.row-gap": "this.rowGapStyle", "style.column-gap": "this.colGapStyle", "style.justify-items": "this.justifyItemsStyle", "style.align-items": "this.alignItemsStyle", "style.justify-content": "this.justifyContentStyle", "style.align-content": "this.alignContentStyle" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{box-sizing:border-box}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitGridComponent, decorators: [{
             type: Component,
@@ -3430,6 +3447,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }], gridTemplateRows: [{
                 type: HostBinding,
                 args: ['style.grid-template-rows']
+            }], gridAutoRows: [{
+                type: HostBinding,
+                args: ['style.grid-auto-rows']
             }], rowGapStyle: [{
                 type: HostBinding,
                 args: ['style.row-gap']