ngx-render-material-forms 1.1.0 → 1.1.2

package/fesm2020/ngx-render-material-forms.js

@@ -2562,6 +2562,21 @@ class MaterialSelectComponent extends MaterialComponent {
         });
         this.filteredOptions = this.selectOptions;
     }
+    calculateViewportHeight() {
+        if (!this.viewport)
+            return 0;
+        // Get the range of rendered items
+        const renderedRange = this.viewport.getRenderedRange();
+        // Get the number of items in the rendered range
+        const itemCount = renderedRange.end - renderedRange.start;
+        console.log(itemCount);
+        // Calculate the total height of items
+        const totalHeight = itemCount * 200; // Assuming each item has a height of 50 pixels
+        // Add extra padding if needed
+        const padding = 500; // Adjust as needed
+        // Return the calculated height
+        return totalHeight + padding;
+    }
     // onFilter(value) {
     //   this.filteredOptions = this.selectOptions.then((options) => {
     //     const filtered = options.filter((option) => option.label.toLowerCase().indexOf(value.toLowerCase()) !== -1);
@@ -2574,7 +2589,7 @@ class MaterialSelectComponent extends MaterialComponent {
     }
 }
 MaterialSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialSelectComponent, selector: "mat-formio-select", viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialSelectComponent, selector: "mat-formio-select", viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true, static: true }, { propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
     <ng-template #componentTemplate let-hasLabel>
       <mat-form-field fxFill>
@@ -2599,7 +2614,7 @@ MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
       </mat-option>
 
       <ng-container *ngIf="(filteredOptions | async)?.length > 4; else regularOptions">
-      <cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
+      <cdk-virtual-scroll-viewport itemSize="50" [minBufferPx]="500" [maxBufferPx]="1000" class="example-viewport">
         <mat-option *cdkVirtualFor="let option of filteredOptions | async" [value]="option.value">
           <span [innerHTML]="option.label"></span>
         </mat-option>
@@ -2651,7 +2666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
       </mat-option>
 
       <ng-container *ngIf="(filteredOptions | async)?.length > 4; else regularOptions">
-      <cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
+      <cdk-virtual-scroll-viewport itemSize="50" [minBufferPx]="500" [maxBufferPx]="1000" class="example-viewport">
         <mat-option *cdkVirtualFor="let option of filteredOptions | async" [value]="option.value">
           <span [innerHTML]="option.label"></span>
         </mat-option>
@@ -2679,6 +2694,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
         }], propDecorators: { multiSelect: [{
                 type: ViewChild,
                 args: ['multiSelect', { static: true }]
+            }], viewport: [{
+                type: ViewChild,
+                args: ['viewport']
             }] } });
 SelectComponent.MaterialComponent = MaterialSelectComponent;
 // Make sure we detect changes when new items make their way into the select dropdown.