@open-rlb/ng-bootstrap 3.3.7 → 3.3.8

package/fesm2022/open-rlb-ng-bootstrap.mjs

@@ -6225,7 +6225,14 @@ class AbstractAutocompleteComponent extends AbstractComponent {
         const dropdown = this.dropdownEl();
         if (!dropdown)
             return;
-        // Always ensure the display is set, even if isOpen was already true
+        const rect = this.el?.nativeElement.getBoundingClientRect();
+        if (rect) {
+            this.renderer.setStyle(dropdown.nativeElement, 'position', 'fixed');
+            this.renderer.setStyle(dropdown.nativeElement, 'top', `${rect.bottom}px`);
+            this.renderer.setStyle(dropdown.nativeElement, 'left', `${rect.left}px`);
+            this.renderer.setStyle(dropdown.nativeElement, 'width', `${rect.width}px`);
+            this.renderer.setStyle(dropdown.nativeElement, 'z-index', '1050');
+        }
         this.renderer.setStyle(dropdown.nativeElement, 'display', 'block');
         this.isOpen = true;
     }
@@ -6354,6 +6361,9 @@ class AutocompleteCountryDialCodeComponent extends AbstractComponent {
     constructor() {
         super();
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.dropdownTop = signal(0, ...(ngDevMode ? [{ debugName: "dropdownTop" }] : /* istanbul ignore next */ []));
+        this.dropdownLeft = signal(0, ...(ngDevMode ? [{ debugName: "dropdownLeft" }] : /* istanbul ignore next */ []));
+        this.dropdownWidth = signal(0, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
         this.suggestions = signal([], ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
         this.hasSuggestions = computed(() => this.suggestions().length > 0, ...(ngDevMode ? [{ debugName: "hasSuggestions" }] : /* istanbul ignore next */ []));
         this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -7646,6 +7656,12 @@ class AutocompleteCountryDialCodeComponent extends AbstractComponent {
             this.closeDropdown();
     }
     openDropdown() {
+        const rect = this.el()?.nativeElement.getBoundingClientRect();
+        if (rect) {
+            this.dropdownTop.set(rect.bottom);
+            this.dropdownLeft.set(rect.left);
+            this.dropdownWidth.set(rect.width);
+        }
         this.isOpen.set(true);
     }
     closeDropdown() {
@@ -7690,10 +7706,13 @@ class AutocompleteCountryDialCodeComponent extends AbstractComponent {
       @if (isOpen()) {
         <div
           #autocomplete
-          class="dropdown-menu show w-100 position-absolute overflow-y-auto shadow"
+          class="dropdown-menu show overflow-y-auto shadow"
           [style.max-height.px]="maxHeight()"
           [style.max-width.px]="menuMaxWidth()"
-          style="z-index: 1000; top: 100%;"
+          [style.top.px]="dropdownTop()"
+          [style.left.px]="dropdownLeft()"
+          [style.width.px]="dropdownWidth()"
+          style="z-index: 1050; position: fixed;"
         >
           @if (!hasSuggestions()) {
             <a class="dropdown-item disabled text-center italic">No suggestions</a>
@@ -7768,10 +7787,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
       @if (isOpen()) {
         <div
           #autocomplete
-          class="dropdown-menu show w-100 position-absolute overflow-y-auto shadow"
+          class="dropdown-menu show overflow-y-auto shadow"
           [style.max-height.px]="maxHeight()"
           [style.max-width.px]="menuMaxWidth()"
-          style="z-index: 1000; top: 100%;"
+          [style.top.px]="dropdownTop()"
+          [style.left.px]="dropdownLeft()"
+          [style.width.px]="dropdownWidth()"
+          style="z-index: 1050; position: fixed;"
         >
           @if (!hasSuggestions()) {
             <a class="dropdown-item disabled text-center italic">No suggestions</a>
@@ -7815,12 +7837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         '[attr.id]': 'null',
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
-                        NgClass,
-                        InputValidationComponent,
-                        ProgressComponent,
-                        DataTableActionComponent,
-                    ],
+                    imports: [NgClass, InputValidationComponent, ProgressComponent],
                 }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "max-height", required: false }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], enableFlagIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-flag-icons", required: false }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
@@ -7828,6 +7845,9 @@ class AutocompleteCountryComponent extends AbstractComponent {
     constructor() {
         super();
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.dropdownTop = signal(0, ...(ngDevMode ? [{ debugName: "dropdownTop" }] : /* istanbul ignore next */ []));
+        this.dropdownLeft = signal(0, ...(ngDevMode ? [{ debugName: "dropdownLeft" }] : /* istanbul ignore next */ []));
+        this.dropdownWidth = signal(0, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
         this.suggestions = signal([], ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
         this.hasSuggestions = computed(() => this.suggestions().length > 0, ...(ngDevMode ? [{ debugName: "hasSuggestions" }] : /* istanbul ignore next */ []));
         this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -8105,6 +8125,12 @@ class AutocompleteCountryComponent extends AbstractComponent {
             this.closeDropdown();
     }
     openDropdown() {
+        const rect = this.el()?.nativeElement.getBoundingClientRect();
+        if (rect) {
+            this.dropdownTop.set(rect.bottom);
+            this.dropdownLeft.set(rect.left);
+            this.dropdownWidth.set(rect.width);
+        }
         this.isOpen.set(true);
     }
     closeDropdown() {
@@ -8149,10 +8175,13 @@ class AutocompleteCountryComponent extends AbstractComponent {
       @if (isOpen()) {
         <div
           #autocomplete
-          class="dropdown-menu show w-100 position-absolute overflow-y-auto"
+          class="dropdown-menu show overflow-y-auto"
           [style.max-height.px]="maxHeight()"
           [style.max-width.px]="menuMaxWidth()"
-          style="z-index: 1000; top: 100%;"
+          [style.top.px]="dropdownTop()"
+          [style.left.px]="dropdownLeft()"
+          [style.width.px]="dropdownWidth()"
+          style="z-index: 1050; position: fixed;"
         >
           @if (!hasSuggestions()) {
             <a class="dropdown-item disabled text-center">No suggestions</a>
@@ -8216,10 +8245,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
       @if (isOpen()) {
         <div
           #autocomplete
-          class="dropdown-menu show w-100 position-absolute overflow-y-auto"
+          class="dropdown-menu show overflow-y-auto"
           [style.max-height.px]="maxHeight()"
           [style.max-width.px]="menuMaxWidth()"
-          style="z-index: 1000; top: 100%;"
+          [style.top.px]="dropdownTop()"
+          [style.left.px]="dropdownLeft()"
+          [style.width.px]="dropdownWidth()"
+          style="z-index: 1050; position: fixed;"
         >
           @if (!hasSuggestions()) {
             <a class="dropdown-item disabled text-center">No suggestions</a>
@@ -8253,11 +8285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         '[attr.id]': 'null',
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
-                        NgClass,
-                        InputValidationComponent,
-                        DataTableActionComponent,
-                    ],
+                    imports: [NgClass, InputValidationComponent],
                 }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "max-height", required: false }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], enableFlagIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-flag-icons", required: false }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
@@ -8501,6 +8529,9 @@ class AutocompleteComponent extends AbstractComponent {
         this.acLoading = signal(false, ...(ngDevMode ? [{ debugName: "acLoading" }] : /* istanbul ignore next */ []));
         // State
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.dropdownTop = signal(0, ...(ngDevMode ? [{ debugName: "dropdownTop" }] : /* istanbul ignore next */ []));
+        this.dropdownLeft = signal(0, ...(ngDevMode ? [{ debugName: "dropdownLeft" }] : /* istanbul ignore next */ []));
+        this.dropdownWidth = signal(0, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
         this.suggestions = signal([], ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
         this.hasSuggestions = computed(() => this.suggestions().length > 0, ...(ngDevMode ? [{ debugName: "hasSuggestions" }] : /* istanbul ignore next */ []));
         // Inputs
@@ -8629,6 +8660,12 @@ class AutocompleteComponent extends AbstractComponent {
     openDropdown() {
         if (this.isOpen())
             return;
+        const rect = this.el()?.nativeElement.getBoundingClientRect();
+        if (rect) {
+            this.dropdownTop.set(rect.bottom);
+            this.dropdownLeft.set(rect.left);
+            this.dropdownWidth.set(rect.width);
+        }
         this.isOpen.set(true);
     }
     closeDropdown() {
@@ -8670,10 +8707,13 @@ class AutocompleteComponent extends AbstractComponent {
       @if (isOpen()) {
         <div
           #autocomplete
-          class="dropdown-menu show w-100 position-absolute overflow-y-auto"
+          class="dropdown-menu show overflow-y-auto"
           [style.max-height.px]="maxHeight()"
           [style.max-width.px]="menuMaxWidth()"
-          style="z-index: 1000; top: 100%;"
+          [style.top.px]="dropdownTop()"
+          [style.left.px]="dropdownLeft()"
+          [style.width.px]="dropdownWidth()"
+          style="z-index: 1050; position: fixed;"
         >
           @if (acLoading()) {
             <div class="dropdown-item disabled text-center">Loading...</div>
@@ -8738,10 +8778,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
       @if (isOpen()) {
         <div
           #autocomplete
-          class="dropdown-menu show w-100 position-absolute overflow-y-auto"
+          class="dropdown-menu show overflow-y-auto"
           [style.max-height.px]="maxHeight()"
           [style.max-width.px]="menuMaxWidth()"
-          style="z-index: 1000; top: 100%;"
+          [style.top.px]="dropdownTop()"
+          [style.left.px]="dropdownLeft()"
+          [style.width.px]="dropdownWidth()"
+          style="z-index: 1050; position: fixed;"
         >
           @if (acLoading()) {
             <div class="dropdown-item disabled text-center">Loading...</div>
@@ -8770,17 +8813,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
     <ng-content select="[after]"></ng-content>
   `,
                     host: {
-                        // Modern Angular 21 syntax for global listeners
                         '(document:pointerdown)': 'onDocumentPointerDown($event)',
                         '(document:keydown.escape)': 'onEscape($event)',
                         '[attr.id]': 'null',
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
-                        NgClass,
-                        InputValidationComponent,
-                        DataTableActionComponent,
-                    ],
+                    imports: [NgClass, InputValidationComponent],
                 }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "max-height", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], charsToSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "chars-to-search", required: false }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }], inputAutocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAutocomplete", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });