@vendure/admin-ui 2.2.4 → 2.2.5

package/fesm2022/vendure-admin-ui-core.mjs

@@ -7393,21 +7393,44 @@ class DropdownMenuComponent {
             }
         }
     }
-    constructor(overlay, viewContainerRef, dropdown, localizationService) {
+    constructor(overlay, viewContainerRef, dropdown, localizationService, changeDetector) {
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
         this.dropdown = dropdown;
         this.localizationService = localizationService;
+        this.changeDetector = changeDetector;
         this.position = 'bottom-left';
+        this.resizeObserver = new ResizeObserver(entries => {
+            const margin = 12;
+            for (const entry of entries) {
+                const contentWrapper = entry.target.querySelector('.dropdown-content-wrapper');
+                if (contentWrapper) {
+                    const { bottom, top } = contentWrapper?.getBoundingClientRect();
+                    if (bottom > window.innerHeight - margin) {
+                        // dropdown is going off the bottom of the screen
+                        this.maxHeight = window.innerHeight - top - margin;
+                        this.changeDetector.markForCheck();
+                    }
+                    if (top < margin) {
+                        // dropdown is going off the top of the screen
+                        this.maxHeight = bottom - margin;
+                        this.changeDetector.markForCheck();
+                    }
+                }
+            }
+        });
     }
     ngOnInit() {
         this.direction$ = this.localizationService.direction$;
         this.dropdown.onOpenChange(isOpen => {
             if (isOpen) {
                 this.overlayRef.attach(this.menuPortal);
+                this.resizeObserver.observe(this.overlayRef.overlayElement);
             }
             else {
                 this.overlayRef.detach();
+                this.resizeObserver.unobserve(this.overlayRef.overlayElement);
+                this.maxHeight = undefined;
             }
         });
     }
@@ -7473,45 +7496,45 @@ class DropdownMenuComponent {
         inverted.overlayY = pos.overlayY === 'top' ? 'bottom' : 'top';
         return inverted;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: i1$3.Overlay }, { token: i0.ViewContainerRef }, { token: DropdownComponent }, { token: LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: { position: ["vdrPosition", "position"], customClasses: "customClasses" }, host: { listeners: { "window:keydown.escape": "onEscapeKeydown($event)", "window:keydown": "onArrowKey($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: `
-        <ng-template #menu>
-            <div [dir]="direction$ | async">
-                <div class="dropdown open">
-                    <div class="dropdown-menu" [ngClass]="customClasses">
-                        <div
-                            class="dropdown-content-wrapper"
-                            [cdkTrapFocus]="true"
-                            [cdkTrapFocusAutoCapture]="true"
-                        >
-                            <ng-content></ng-content>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </ng-template>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: i1$3.Overlay }, { token: i0.ViewContainerRef }, { token: DropdownComponent }, { token: LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: { position: ["vdrPosition", "position"], customClasses: "customClasses" }, host: { listeners: { "window:keydown.escape": "onEscapeKeydown($event)", "window:keydown": "onArrowKey($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: `
+        <ng-template #menu>
+            <div [dir]="direction$ | async">
+                <div class="dropdown open">
+                    <div class="dropdown-menu" [ngClass]="customClasses" [style.maxHeight.px]="maxHeight">
+                        <div
+                            class="dropdown-content-wrapper"
+                            [cdkTrapFocus]="true"
+                            [cdkTrapFocusAutoCapture]="true"
+                        >
+                            <ng-content></ng-content>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </ng-template>
     `, isInline: true, styles: [".clear-backdrop{background-color:#ff69b4}::ng-deep .dropdown-menu{max-width:initial}::ng-deep .dropdown-menu .dropdown-item{display:flex;align-items:center;padding:3px 24px}::ng-deep .dropdown-menu .dropdown-item clr-icon{margin-inline-end:3px}::ng-deep .dropdown-menu .dropdown-item:focus{outline:var(--color-dropdown-item-focus-outline) solid 1px;outline-offset:1px 0}.dropdown.open>.dropdown-menu{position:relative;top:0;height:100%;overflow-y:auto}:host{opacity:1;transition:opacity .3s}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DropdownMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-dropdown-menu', template: `
-        <ng-template #menu>
-            <div [dir]="direction$ | async">
-                <div class="dropdown open">
-                    <div class="dropdown-menu" [ngClass]="customClasses">
-                        <div
-                            class="dropdown-content-wrapper"
-                            [cdkTrapFocus]="true"
-                            [cdkTrapFocusAutoCapture]="true"
-                        >
-                            <ng-content></ng-content>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </ng-template>
+            args: [{ selector: 'vdr-dropdown-menu', template: `
+        <ng-template #menu>
+            <div [dir]="direction$ | async">
+                <div class="dropdown open">
+                    <div class="dropdown-menu" [ngClass]="customClasses" [style.maxHeight.px]="maxHeight">
+                        <div
+                            class="dropdown-content-wrapper"
+                            [cdkTrapFocus]="true"
+                            [cdkTrapFocusAutoCapture]="true"
+                        >
+                            <ng-content></ng-content>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </ng-template>
     `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".clear-backdrop{background-color:#ff69b4}::ng-deep .dropdown-menu{max-width:initial}::ng-deep .dropdown-menu .dropdown-item{display:flex;align-items:center;padding:3px 24px}::ng-deep .dropdown-menu .dropdown-item clr-icon{margin-inline-end:3px}::ng-deep .dropdown-menu .dropdown-item:focus{outline:var(--color-dropdown-item-focus-outline) solid 1px;outline-offset:1px 0}.dropdown.open>.dropdown-menu{position:relative;top:0;height:100%;overflow-y:auto}:host{opacity:1;transition:opacity .3s}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.Overlay }, { type: i0.ViewContainerRef }, { type: DropdownComponent }, { type: LocalizationService }], propDecorators: { position: [{
+        }], ctorParameters: () => [{ type: i1$3.Overlay }, { type: i0.ViewContainerRef }, { type: DropdownComponent }, { type: LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { position: [{
                 type: Input,
                 args: ['vdrPosition']
             }], customClasses: [{
@@ -7603,7 +7626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
         }], ctorParameters: () => [{ type: AlertsService }] });
 
 // Auto-generated by the set-version.js script.
-const ADMIN_UI_VERSION = '2.2.4';
+const ADMIN_UI_VERSION = '2.2.5';
 
 /* eslint-disable @angular-eslint/directive-selector */
 class FormFieldControlDirective {
@@ -18964,18 +18987,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 }]
         }], ctorParameters: () => [{ type: I18nService }] });
 
-const GET_ZONE_SELECTOR_LIST = gql `
-    query GetZoneSelectorList($options: ZoneListOptions) {
-        zones(options: $options) {
-            items {
-                id
-                createdAt
-                updatedAt
-                name
-            }
-            totalItems
-        }
-    }
+const GET_ZONE_SELECTOR_LIST = gql `
+    query GetZoneSelectorList($options: ZoneListOptions) {
+        zones(options: $options) {
+            items {
+                id
+                createdAt
+                updatedAt
+                name
+            }
+            totalItems
+        }
+    }
 `;
 /**
  * @description
@@ -18993,7 +19016,7 @@ class ZoneSelectorComponent {
         this.selectedId$ = new Subject();
         this.disabled = false;
         this.zones$ = this.dataService
-            .query(GetZoneSelectorListDocument, { options: { take: 999 } }, 'cache-first')
+            .query(GetZoneSelectorListDocument, { options: { take: 999 } })
             .mapSingle(result => result.zones.items);
     }
     onChange(selected) {