@tedi-design-system/angular 7.1.0-rc.10 → 7.1.0-rc.12

package/fesm2022/tedi-design-system-angular-tedi.mjs

@@ -1559,10 +1559,15 @@ class DropdownComponent {
     }
     setupScrollListener() {
         this.cleanupScrollListener();
-        this.scrollListener = this.renderer.listen(this.document, "scroll", () => {
-            if (this.isOpen()) {
-                this.hideDropdown();
-            }
+        this.scrollListener = this.renderer.listen(this.document, "scroll", (event) => {
+            if (!this.isOpen())
+                return;
+            // Scrolling the dropdown panel itself must not close it
+            const contentEl = this.dropdownContent().host.nativeElement;
+            const target = event.target;
+            if (target && contentEl.contains(target))
+                return;
+            this.hideDropdown();
         }, { capture: true, passive: true });
     }
     cleanupScrollListener() {
@@ -5233,8 +5238,14 @@ class TextFieldComponent {
      * Disables the input from a parent template (e.g. a wrapping field component).
      * Combined with the reactive-forms disabled state and any input-group state.
      */
-    // eslint-disable-next-line @angular-eslint/no-input-rename
-    disabledInput = input(false, ...(ngDevMode ? [{ debugName: "disabledInput", alias: "disabled" }] : [{ alias: "disabled" }]));
+    disabledInput = input(false, ...(ngDevMode ? [{ debugName: "disabledInput", 
+            // eslint-disable-next-line @angular-eslint/no-input-rename
+            alias: "disabled",
+            transform: booleanAttribute }] : [{
+            // eslint-disable-next-line @angular-eslint/no-input-rename
+            alias: "disabled",
+            transform: booleanAttribute,
+        }]));
     disabled = computed(() => this.disabledInput() ||
         this.formDisabled() ||
         (this.group?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
@@ -9246,10 +9257,14 @@ class PopoverComponent {
     }
     setupScrollListener() {
         this.cleanupScrollListener();
-        this.scrollListener = this.renderer.listen(this.document, "scroll", () => {
-            if (this.isOpen()) {
-                this.hidePopover(false);
-            }
+        this.scrollListener = this.renderer.listen(this.document, "scroll", (event) => {
+            if (!this.isOpen())
+                return;
+            // Scrolling content inside the popover — or inside a nested overlay
+            // opened from it — must not close it
+            if (this.isInsideOverlay(event.target))
+                return;
+            this.hidePopover(false);
         }, { capture: true, passive: true });
     }
     cleanupScrollListener() {
@@ -9297,20 +9312,28 @@ class PopoverComponent {
             setTimeout(() => previousElement.focus());
         }
     }
+    /**
+     * Whether the event target belongs to this popover's own overlay, or to a
+     * nested overlay opened from inside it.
+     *
+     * Nested overlays (e.g. a month/year dropdown in the date-picker header)
+     * render in their own pane within the shared CDK overlay container, not
+     * inside this popover's overlayElement. Interacting with, focusing into or
+     * scrolling such a child overlay must not dismiss the popover, so anything
+     * inside the overlay container counts as internal.
+     */
+    isInsideOverlay(target) {
+        if (!target)
+            return false;
+        const overlayEl = this.connectedOverlay()?.overlayRef?.overlayElement;
+        if (overlayEl?.contains(target))
+            return true;
+        return (target instanceof Element && !!target.closest(".cdk-overlay-container"));
+    }
     handleClosePopoverEvent(e) {
         const triggerEl = this.popoverTrigger().host.nativeElement;
-        const containerEl = this.connectedOverlay()?.overlayRef?.overlayElement;
         const target = e.target;
-        if (!target || triggerEl.contains(target) || containerEl?.contains(target)) {
-            return;
-        }
-        // Nested overlays opened from inside the popover (e.g. a month/year
-        // dropdown in the date-picker header) render in their own pane within the
-        // shared CDK overlay container, not inside this popover's overlayElement.
-        // Interacting with — or focusing into — such a child overlay must not
-        // dismiss the popover, so ignore events originating anywhere inside the
-        // overlay container.
-        if (target.closest(".cdk-overlay-container")) {
+        if (!target || triggerEl.contains(target) || this.isInsideOverlay(target)) {
             return;
         }
         this.hidePopover(true);
@@ -11115,10 +11138,15 @@ class SelectComponent {
     }
     setupScrollListener() {
         this.cleanupScrollListener();
-        this.scrollListener = this.renderer.listen(this.document, "scroll", () => {
-            if (this.isOpen()) {
-                this.closeDropdown();
-            }
+        this.scrollListener = this.renderer.listen(this.document, "scroll", (event) => {
+            if (!this.isOpen())
+                return;
+            // Scrolling the option list itself must not close the dropdown
+            const overlayEl = this.connectedOverlay()?.overlayRef?.overlayElement;
+            const target = event.target;
+            if (overlayEl && target && overlayEl.contains(target))
+                return;
+            this.closeDropdown();
         }, { capture: true, passive: true });
     }
     cleanupScrollListener() {