@porscheinformatik/clr-addons 12.5.0 → 12.5.1

package/fesm2020/clr-addons.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, NgModule, Injectable, EventEmitter, Input, Output, Directive, ViewChild, TemplateRef, ContentChildren, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, ContentChild, HostListener, InjectionToken, Inject, Optional } from '@angular/core';
+import { Component, NgModule, Injectable, EventEmitter, Input, Output, Directive, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, ContentChild, HostListener, InjectionToken, Inject, Optional } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i3$1 from '@angular/forms';
 import { FormsModule, NG_VALIDATORS, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@clr/angular';
-import { ClarityModule, ClrFormsModule, ClrForm, ClrAlert, ClrAxis, ClrSide, ClrAlignment, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService, ClrIconModule, ClrDropdownModule } from '@clr/angular';
+import { ClarityModule, ClrFormsModule, ClrDropdown, ClrForm, ClrAlert, ClrAxis, ClrSide, ClrAlignment, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService, ClrIconModule, ClrDropdownModule } from '@clr/angular';
 import { Subject, BehaviorSubject, timer, asyncScheduler, interval, of, ReplaySubject, takeUntil as takeUntil$1 } from 'rxjs';
 import { takeUntil, observeOn, take } from 'rxjs/operators';
 import * as i3 from '@angular/router';
@@ -645,22 +645,49 @@ class ClrDropdownOverflowDirective {
         this.elRef = elRef;
         this.defaultItemMinHeightRem = 1.5;
         this.marginBottomRem = 0.1;
+        this.destroy$ = new Subject();
     }
-    ngAfterViewInit() {
-        this.calculateDropdownMenu();
+    ngAfterContentInit() {
+        // first trigger manually because the subscription lower only triggers after first change
+        if (!this.nestedDropdownChildren?.length) {
+            this.applyDropdownOverflowStyles();
+        }
+        this.nestedDropdownChildren.changes.pipe(takeUntil(this.destroy$)).subscribe((children) => {
+            // if there are any nested dropdowns, our overflow fix prevents those from showing and needs to be removed
+            if (!children?.length) {
+                this.applyDropdownOverflowStyles();
+            }
+            else if (children?.length) {
+                this.removeDropdownOverflowStyles();
+            }
+        });
     }
-    calculateDropdownMenu() {
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    applyDropdownOverflowStyles() {
         // the vertical position of our element in the current window
         const y = this.elRef.nativeElement.getBoundingClientRect().y;
         const itemMinHeightPx = this.getItemMinHeight(this.clrDropdownMenuItemMinHeight);
         // see https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements
-        for (const item of this.elRef.nativeElement.getElementsByClassName('dropdown-item')) {
+        for (const item of this.getAllChildDropdownMenuItems()) {
             item.style.minHeight = itemMinHeightPx + 'px';
         }
         this.elRef.nativeElement.style.maxHeight =
             this.getMenuMaxHeight(this.clrDropdownMenuMaxHeight, window.innerHeight - y - this.convertRemToPixels(this.marginBottomRem)) + 'px';
         this.elRef.nativeElement.style.overflowY = 'auto';
     }
+    removeDropdownOverflowStyles() {
+        for (const item of this.getAllChildDropdownMenuItems()) {
+            item.style.minHeight = null;
+        }
+        this.elRef.nativeElement.style.maxHeight = null;
+        this.elRef.nativeElement.style.overflowY = null;
+    }
+    getAllChildDropdownMenuItems() {
+        return this.elRef.nativeElement.getElementsByClassName('dropdown-item');
+    }
     getMenuMaxHeight(menuMaxHeightProvided, menuMaxHeightPx) {
         if (menuMaxHeightProvided) {
             const maxHeightPx = this.convertToPixels(menuMaxHeightProvided);
@@ -698,7 +725,7 @@ class ClrDropdownOverflowDirective {
     }
 }
 ClrDropdownOverflowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ClrDropdownOverflowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: { clrDropdownMenuMaxHeight: "clrDropdownMenuMaxHeight", clrDropdownMenuItemMinHeight: "clrDropdownMenuItemMinHeight" }, ngImport: i0 });
+ClrDropdownOverflowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: { clrDropdownMenuMaxHeight: "clrDropdownMenuMaxHeight", clrDropdownMenuItemMinHeight: "clrDropdownMenuItemMinHeight" }, queries: [{ propertyName: "nestedDropdownChildren", predicate: ClrDropdown, descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'clr-dropdown-menu' }]
@@ -706,6 +733,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 type: Input
             }], clrDropdownMenuItemMinHeight: [{
                 type: Input
+            }], nestedDropdownChildren: [{
+                type: ContentChildren,
+                args: [ClrDropdown, { descendants: true }]
             }] } });
 
 /*