@db-ux/wc-core-components 4.13.1-angular-signal-forms13-577b861 → 4.14.0

package/dist/cjs/{floating-components-SpHkZuLA.js → floating-components-Ns3Jt7dw.js}

@@ -1,66 +1,6 @@
 'use strict';
 
 // TODO: We should reevaluate this as soon as CSS Anchor Positioning is supported in all relevant browsers
-const isInView = (el) => {
-    var _a;
-    const { top, bottom, left, right } = el.getBoundingClientRect();
-    const { innerHeight, innerWidth } = window;
-    let outTop = top < 0;
-    let outBottom = bottom > innerHeight;
-    let outLeft = left < 0;
-    let outRight = right > innerWidth;
-    // We need to check if it was already outside
-    const outsideY = el.dataset['outsideVy'];
-    const outsideX = el.dataset['outsideVx'];
-    const parentRect = (_a = el === null || el === void 0 ? void 0 : el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    if (parentRect) {
-        if (outsideY) {
-            const position = el.dataset['outsideVy'];
-            if (position === 'top') {
-                outTop = parentRect.top - (bottom - parentRect.bottom) < 0;
-            }
-            else {
-                outBottom = parentRect.bottom + (parentRect.top - top) > innerHeight;
-            }
-        }
-        if (outsideX) {
-            const position = el.dataset['outsideVx'];
-            if (position === 'left') {
-                outLeft = parentRect.left - (right - parentRect.right) < 0;
-            }
-            else {
-                outRight = parentRect.right + (parentRect.left - left) > innerWidth;
-            }
-        }
-    }
-    return {
-        outTop,
-        outBottom,
-        outLeft,
-        outRight
-    };
-};
-const handleDataOutside = (el) => {
-    const { outTop, outBottom, outLeft, outRight } = isInView(el);
-    let dataOutsidePair = {};
-    if (outTop || outBottom) {
-        dataOutsidePair = {
-            vy: outTop ? 'top' : 'bottom'
-        };
-        el.dataset['outsideVy'] = dataOutsidePair.vy;
-    }
-    else {
-        delete el.dataset['outsideVy'];
-    }
-    if (outLeft || outRight) {
-        dataOutsidePair = Object.assign(Object.assign({}, dataOutsidePair), { vx: outRight ? 'right' : 'left' });
-        el.dataset['outsideVx'] = dataOutsidePair.vx;
-    }
-    else {
-        delete el.dataset['outsideVx'];
-    }
-    return dataOutsidePair;
-};
 const handleFixedDropdown = (element, parent, placement) => {
     if (!element || !parent)
         return;
@@ -76,9 +16,11 @@ const handleFixedDropdown = (element, parent, placement) => {
     // mobile max-inline-size guard and overflows the viewport.
     element.style.inlineSize = '';
     element.style.minInlineSize = '';
-    // We skip the rest if we are in mobile, it's already fixed via CSS.
-    if (getComputedStyle(element).zIndex === '9999')
+    // We skip this if we are in mobile it's already fixed or if we don't have a floating dropdown
+    const computedStyle = getComputedStyle(element);
+    if (computedStyle.zIndex === '9999' || computedStyle.position !== 'fixed' && computedStyle.position !== 'absolute') {
         return;
+    }
     const { top, bottom, childHeight, childWidth, width, right, left, correctedPlacement, innerWidth } = getFloatingProps(element, parent, placement);
     // For auto width the dropdown is forced to be at least as wide as the trigger,
     // but clamped to its own max-inline-size: CSS lets a min-inline-size override
@@ -153,27 +95,38 @@ const getFloatingProps = (element, parent, placement) => {
     let childHeight = childRect.height;
     let childWidth = childRect.width;
     if (placement === 'bottom' || placement === 'top') {
-        childWidth = childWidth / 2;
+        childWidth = width > childWidth ? 0 : childWidth / 2;
     }
     if (placement === 'left' || placement === 'right') {
-        childHeight = childHeight / 2;
+        childHeight = height > childHeight ? 0 : childHeight / 2;
     }
-    const outsideBottom = bottom + childHeight > innerHeight;
-    const outsideTop = top - childHeight < 0;
-    const outsideLeft = left - childWidth < 0;
-    const outsideRight = right + childWidth > innerWidth;
+    const outsideBottom = Math.floor(bottom + childHeight) > innerHeight;
+    const outsideTop = Math.ceil(top - childHeight) < 0;
+    const outsideLeft = Math.ceil(left - childWidth) < 0;
+    const outsideRight = Math.floor(right + childWidth) > innerWidth;
     let correctedPlacement = placement;
     if (placement.startsWith('bottom')) {
         if (outsideBottom) {
-            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('bottom', 'top');
-            if (outsideLeft && outsideRight) {
-                correctedPlacement = 'top';
-            }
-            else if (outsideLeft) {
-                correctedPlacement = 'top-start';
+            if (!outsideTop) {
+                correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('bottom', 'top');
+                if (outsideLeft && outsideRight) {
+                    correctedPlacement = 'top';
+                }
+                else if (outsideLeft) {
+                    correctedPlacement = 'top-start';
+                }
+                else if (outsideRight) {
+                    correctedPlacement = 'top-end';
+                }
             }
-            else if (outsideRight) {
-                correctedPlacement = 'top-end';
+            else {
+                // Both outsideBottom and outsideTop: keep bottom but still apply horizontal correction
+                if (outsideLeft) {
+                    correctedPlacement = 'bottom-start';
+                }
+                else if (outsideRight) {
+                    correctedPlacement = 'bottom-end';
+                }
             }
         }
         else {
@@ -190,15 +143,26 @@ const getFloatingProps = (element, parent, placement) => {
     }
     else if (placement.startsWith('top')) {
         if (outsideTop) {
-            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('top', 'bottom');
-            if (outsideLeft && outsideRight) {
-                correctedPlacement = 'bottom';
+            if (!outsideBottom) {
+                correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('top', 'bottom');
+                if (outsideLeft && outsideRight) {
+                    correctedPlacement = 'bottom';
+                }
+                else if (outsideLeft) {
+                    correctedPlacement = 'bottom-start';
+                }
+                else if (outsideRight) {
+                    correctedPlacement = 'bottom-end';
+                }
             }
-            else if (outsideLeft) {
-                correctedPlacement = 'bottom-start';
-            }
-            else if (outsideRight) {
-                correctedPlacement = 'bottom-end';
+            else {
+                // Both outsideTop and outsideBottom: keep top but still apply horizontal correction
+                if (outsideLeft) {
+                    correctedPlacement = 'top-start';
+                }
+                else if (outsideRight) {
+                    correctedPlacement = 'top-end';
+                }
             }
         }
         else {
@@ -215,15 +179,17 @@ const getFloatingProps = (element, parent, placement) => {
     }
     else if (placement.startsWith('left')) {
         if (outsideLeft) {
-            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('left', 'right');
-            if (outsideBottom && outsideTop) {
-                correctedPlacement = 'right';
-            }
-            else if (outsideBottom) {
-                correctedPlacement = 'right-end';
-            }
-            else if (outsideTop) {
-                correctedPlacement = 'right-start';
+            if (!outsideRight) {
+                correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('left', 'right');
+                if (outsideBottom && outsideTop) {
+                    correctedPlacement = 'right';
+                }
+                else if (outsideBottom) {
+                    correctedPlacement = 'right-end';
+                }
+                else if (outsideTop) {
+                    correctedPlacement = 'right-start';
+                }
             }
         }
         else {
@@ -240,15 +206,17 @@ const getFloatingProps = (element, parent, placement) => {
     }
     else if (correctedPlacement.startsWith('right')) {
         if (outsideRight) {
-            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('right', 'left');
-            if (outsideBottom && outsideTop) {
-                correctedPlacement = 'left';
-            }
-            else if (outsideBottom) {
-                correctedPlacement = 'left-end';
-            }
-            else if (outsideTop) {
-                correctedPlacement = 'left-start';
+            if (!outsideLeft) {
+                correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('right', 'left');
+                if (outsideBottom && outsideTop) {
+                    correctedPlacement = 'left';
+                }
+                else if (outsideBottom) {
+                    correctedPlacement = 'left-end';
+                }
+                else if (outsideTop) {
+                    correctedPlacement = 'left-start';
+                }
             }
         }
         else {
@@ -274,7 +242,8 @@ const getFloatingProps = (element, parent, placement) => {
         childWidth: childRect.width,
         correctedPlacement,
         innerWidth,
-        innerHeight
+        innerHeight,
+        outsideYBoth: outsideTop && outsideBottom
     };
 };
 const MAX_ANCESTOR_DEPTH = 10;
@@ -297,15 +266,24 @@ const getAncestorHasCorrectedPlacement = (element) => {
     return null;
 };
 const handleFixedPopover = (element, parent, placement) => {
-    var _a, _b;
+    var _a, _b, _c;
     if (!element || !parent)
         return;
     const parentComputedStyles = getComputedStyle(parent);
     const parentHasFloatingPosition = ['absolute', 'fixed'].includes(parentComputedStyles.position);
     const ancestorWithCorrectedPlacement = getAncestorHasCorrectedPlacement(element);
     const noFloatingAncestor = !ancestorWithCorrectedPlacement && !parentHasFloatingPosition;
-    const distance = (_b = (_a = getComputedStyle(element)) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--db-popover-distance')) !== null && _b !== void 0 ? _b : '0px';
-    let { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
+    const computedStyle = getComputedStyle(element);
+    // We skip if we don't have a floating popover
+    if (computedStyle.position !== 'fixed' && computedStyle.position !== 'absolute') {
+        return;
+    }
+    let distance = computedStyle.getPropertyValue('--db-popover-distance');
+    if (!distance.length) {
+        distance = '0px';
+    }
+    const elementPlacement = (_c = (_b = (_a = element === null || element === void 0 ? void 0 : element.dataset) === null || _a === void 0 ? void 0 : _a['placement']) !== null && _b !== void 0 ? _b : placement) !== null && _c !== void 0 ? _c : 'bottom';
+    let { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight, outsideYBoth } = getFloatingProps(element, parent, elementPlacement);
     if (ancestorWithCorrectedPlacement) {
         const ancestorRect = ancestorWithCorrectedPlacement.getBoundingClientRect();
         left = Math.abs(left - ancestorRect.left);
@@ -353,6 +331,10 @@ const handleFixedPopover = (element, parent, placement) => {
         }
     }
     // Popover position
+    // Reset shorthand inset properties from previous calls (e.g. outsideYBoth)
+    // before writing new individual inset values
+    element.style.insetBlock = '';
+    element.style.insetInline = '';
     if (correctedPlacement === 'right' || correctedPlacement === 'left') {
         // center horizontally
         element.style.insetBlockStart = `${top + height / 2}px`;
@@ -401,8 +383,81 @@ const handleFixedPopover = (element, parent, placement) => {
         element.style.insetBlockStart = `calc(${parentHasFloatingPosition ? end : bottom}px + ${distance})`;
         element.style.insetBlockEnd = `calc(${noFloatingAncestor && end > innerHeight ? innerHeight : end}px + ${distance})`;
     }
+    // In this case we are outside of top and bottom so we need to scroll
+    // We use the full height in this case
+    if (outsideYBoth) {
+        element.style.overflow = 'hidden auto';
+        element.style.insetBlock = distance;
+        element.style.maxBlockSize = `calc(${innerHeight}px - 2 * ${distance})`;
+    }
+    else {
+        element.style.overflow = '';
+        element.style.maxBlockSize = '';
+    }
     element.style.position = 'fixed';
     element.dataset['correctedPlacement'] = correctedPlacement;
+    // Set data-outside-vy / data-outside-vx for CSS-based flipping
+    handleDataOutside(element);
+};
+const handleDataOutside = (el) => {
+    const { outTop, outBottom, outLeft, outRight } = isInView(el);
+    let dataOutsidePair = {};
+    if (outTop || outBottom) {
+        dataOutsidePair = {
+            vy: outTop ? 'top' : 'bottom'
+        };
+        el.dataset['outsideVy'] = dataOutsidePair.vy;
+    }
+    else {
+        delete el.dataset['outsideVy'];
+    }
+    if (outLeft || outRight) {
+        dataOutsidePair = Object.assign(Object.assign({}, dataOutsidePair), { vx: outRight ? 'right' : 'left' });
+        el.dataset['outsideVx'] = dataOutsidePair.vx;
+    }
+    else {
+        delete el.dataset['outsideVx'];
+    }
+    return dataOutsidePair;
+};
+const isInView = (el) => {
+    var _a;
+    const { top, bottom, left, right } = el.getBoundingClientRect();
+    const { innerHeight, innerWidth } = window;
+    let outTop = top < 0;
+    let outBottom = bottom > innerHeight;
+    let outLeft = left < 0;
+    let outRight = right > innerWidth;
+    // We need to check if it was already outside
+    const outsideY = el.dataset['outsideVy'];
+    const outsideX = el.dataset['outsideVx'];
+    const parentRect = (_a = el === null || el === void 0 ? void 0 : el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (parentRect) {
+        if (outsideY) {
+            const position = el.dataset['outsideVy'];
+            if (position === 'top') {
+                outTop = parentRect.top - (bottom - parentRect.bottom) < 0;
+            }
+            else {
+                outBottom = parentRect.bottom + (parentRect.top - top) > innerHeight;
+            }
+        }
+        if (outsideX) {
+            const position = el.dataset['outsideVx'];
+            if (position === 'left') {
+                outLeft = parentRect.left - (right - parentRect.right) < 0;
+            }
+            else {
+                outRight = parentRect.right + (parentRect.left - left) > innerWidth;
+            }
+        }
+    }
+    return {
+        outTop,
+        outBottom,
+        outLeft,
+        outRight
+    };
 };
 
 exports.getFloatingProps = getFloatingProps;

package/dist/cjs/index.cjs.js

@@ -1,11 +1,12 @@
 'use strict';
 
 var index = require('./index-BmNxQ4GI.js');
-var constants = require('./constants-bMY2_d8A.js');
-var documentClickListener = require('./document-click-listener-Bt1Iysz5.js');
-var documentScrollListener = require('./document-scroll-listener-Dd_hGebZ.js');
-var floatingComponents = require('./floating-components-SpHkZuLA.js');
-var navigation = require('./navigation-DUTSDY4q.js');
+var constants = require('./constants-Dy7QIUQi.js');
+var documentClickListener = require('./document-click-listener-DyO00UZC.js');
+var intersectionObserverListener = require('./intersection-observer-listener-BBUA6END.js');
+var floatingComponents = require('./floating-components-Ns3Jt7dw.js');
+require('./resize-observer-listener-B1uhHzqv.js');
+var navigation = require('./navigation-fsWSnlKn.js');
 
 const AccordionVariantList = ['divider', 'card'];
 const AccordionBehaviorList = ['multiple', 'single'];
@@ -148,6 +149,8 @@ exports.DEFAULT_PLACEHOLDER = constants.DEFAULT_PLACEHOLDER;
 exports.DEFAULT_PLACEHOLDER_ID_SUFFIX = constants.DEFAULT_PLACEHOLDER_ID_SUFFIX;
 exports.DEFAULT_REMOVE = constants.DEFAULT_REMOVE;
 exports.DEFAULT_ROWS = constants.DEFAULT_ROWS;
+exports.DEFAULT_SCROLL_LEFT = constants.DEFAULT_SCROLL_LEFT;
+exports.DEFAULT_SCROLL_RIGHT = constants.DEFAULT_SCROLL_RIGHT;
 exports.DEFAULT_SELECTED = constants.DEFAULT_SELECTED;
 exports.DEFAULT_SELECT_ID_SUFFIX = constants.DEFAULT_SELECT_ID_SUFFIX;
 exports.DEFAULT_VALID_MESSAGE = constants.DEFAULT_VALID_MESSAGE;
@@ -167,7 +170,7 @@ Object.defineProperty(exports, "SEMANTIC", {
 exports.SEMANTICS = constants.SEMANTICS;
 exports.TESTING_VIEWPORTS = constants.TESTING_VIEWPORTS;
 exports.DocumentClickListener = documentClickListener.DocumentClickListener;
-exports.DocumentScrollListener = documentScrollListener.DocumentScrollListener;
+exports.DocumentScrollListener = intersectionObserverListener.DocumentScrollListener;
 exports.getFloatingProps = floatingComponents.getFloatingProps;
 exports.handleDataOutside = floatingComponents.handleDataOutside;
 exports.handleFixedDropdown = floatingComponents.handleFixedDropdown;

package/dist/cjs/intersection-observer-listener-BBUA6END.js

@@ -0,0 +1,101 @@
+'use strict';
+
+var index = require('./index-BmNxQ4GI.js');
+var resizeObserverListener = require('./resize-observer-listener-B1uhHzqv.js');
+
+/**
+ * Generic base class for singleton document event listeners.
+ * Manages a shared set of callbacks dispatched when a document-level
+ * event fires.
+ *
+ * Subclasses own their static state (callbacks, instance) and expose
+ * it via the abstract accessor methods below.
+ *
+ * @template TEvent - The event type passed to callbacks (Event, MouseEvent, etc.)
+ */
+class AbstractDocumentListener {
+    addCallback(callback) {
+        const id = index.uuid();
+        const callbacks = this.getCallbacks();
+        callbacks[id] = callback;
+        return id;
+    }
+    removeCallback(id) {
+        const callbacks = this.getCallbacks();
+        delete callbacks[id];
+    }
+}
+
+class DocumentScrollListener extends AbstractDocumentListener {
+    static runCallbacks(event) {
+        for (const callback of Object.values(DocumentScrollListener.callbacks)) {
+            if (typeof callback === 'function') {
+                callback(event);
+            }
+        }
+    }
+    constructor() {
+        super();
+        this.ticking = false;
+        if (DocumentScrollListener._instance) {
+            return DocumentScrollListener._instance;
+        }
+        DocumentScrollListener._instance = this;
+        if (self.document) {
+            self.document.addEventListener('scroll', event => {
+                if (!this.ticking) {
+                    window.requestAnimationFrame(() => {
+                        DocumentScrollListener.runCallbacks(event);
+                        this.ticking = false;
+                    });
+                    this.ticking = true;
+                }
+            }, true);
+        }
+    }
+    getCallbacks() {
+        return DocumentScrollListener.callbacks;
+    }
+}
+DocumentScrollListener.callbacks = {};
+DocumentScrollListener._instance = null;
+
+class IntersectionObserverListener extends resizeObserverListener.AbstractObserverListener {
+    constructor() {
+        super();
+        if (IntersectionObserverListener._instance) {
+            return IntersectionObserverListener._instance;
+        }
+        IntersectionObserverListener._instance = this;
+        if (typeof window !== 'undefined' && 'IntersectionObserver' in window) {
+            IntersectionObserverListener.observer = new IntersectionObserver(entries => {
+                for (const entry of entries) {
+                    this.dispatchEntry(entry.target, entry);
+                }
+            });
+        }
+    }
+    getCallbacksByElement() {
+        return IntersectionObserverListener.callbacksByElement;
+    }
+    getIdToElement() {
+        return IntersectionObserverListener.idToElement;
+    }
+    getObserver() {
+        return IntersectionObserverListener.observer;
+    }
+    observeElement(observer, element) {
+        observer.observe(element);
+    }
+    unobserveElement(observer, element) {
+        observer.unobserve(element);
+    }
+}
+IntersectionObserverListener._instance = null;
+IntersectionObserverListener.callbacksByElement = new Map();
+IntersectionObserverListener.idToElement = new Map();
+IntersectionObserverListener.observer = null;
+
+exports.AbstractDocumentListener = AbstractDocumentListener;
+exports.DocumentScrollListener = DocumentScrollListener;
+exports.IntersectionObserverListener = IntersectionObserverListener;