@klippa/ngx-enhancy-forms 14.12.1 → 14.13.0

package/fesm2020/klippa-ngx-enhancy-forms.mjs

@@ -3,7 +3,7 @@ import { Directive, Input, EventEmitter, Component, SkipSelf, Optional, Output,
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { UntypedFormArray, UntypedFormGroup, UntypedFormControl, FormControl, FormArray, FormGroup, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { UntypedFormArray, UntypedFormGroup, FormControl, UntypedFormControl, FormArray, FormGroup, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { isString } from 'lodash-es';
 import { isArray } from 'lodash';
 import * as i4 from '@ng-select/ng-select';
@@ -202,13 +202,13 @@ class FormComponent {
             const injectAt = this.subFormPlaceholder.at;
             if (injectInto instanceof UntypedFormArray) {
                 const idx = injectInto.controls.findIndex(e => e === this.formGroup);
-                injectInto.removeAt(idx);
+                injectInto.setControl(idx, new FormControl());
             }
             else if (injectInto instanceof UntypedFormGroup) {
                 if (typeof injectAt !== 'string') {
                     throw new Error(`cannot index FormGroup with ${typeof injectAt}`);
                 }
-                injectInto.removeControl(injectAt);
+                injectInto.setControl(injectAt, new FormControl());
             }
         }
     }
@@ -1037,12 +1037,18 @@ class SelectComponent extends ValueAccessorBase {
     async setWidthBasedOnOptionsWidths() {
         if (this.truncateOptions === false) {
             await awaitableForNextCycle();
-            const widths = Array.from(this.elRef.nativeElement.querySelectorAll('.ng-option > *')).map((e) => e.scrollWidth);
+            const optionRefs = Array.from(this.elRef.nativeElement.querySelectorAll('.ng-option > *'));
+            const widths = optionRefs.map((e) => e.scrollWidth);
             const maxWidth = Math.max(...widths);
             const dropdownPanel = this.elRef.nativeElement.querySelector('ng-dropdown-panel');
             if (dropdownPanel) {
+                const firstOption = this.elRef.nativeElement.querySelector('.ng-option');
+                let padding = 0;
+                if (firstOption) {
+                    padding = parseInt(getComputedStyle(firstOption).paddingLeft, 10) + parseInt(getComputedStyle(firstOption).paddingRight, 10);
+                }
                 dropdownPanel.style.minWidth = `${this.elRef.nativeElement.clientWidth}px`;
-                dropdownPanel.style.width = `${Math.max(this.elRef.nativeElement.clientWidth, maxWidth + 40, dropdownPanel.getBoundingClientRect().width)}px`;
+                dropdownPanel.style.width = `${Math.max(this.elRef.nativeElement.clientWidth, maxWidth + padding, dropdownPanel.getBoundingClientRect().width)}px`;
                 await awaitableForNextCycle();
                 const pickerWidth = this.elRef.nativeElement.getBoundingClientRect().width;
                 const dropdownPanelWidth = dropdownPanel.getBoundingClientRect().width;