cax-design-system 1.0.0

package/fesm2022/cax-design-system-dom.mjs

@@ -0,0 +1,757 @@
+/**
+ * @dynamic is for runtime initializing DomHandler.browser
+ *
+ * If delete below comment, we can see this error message:
+ *  Metadata collected contains an error that will be reported at runtime:
+ *  Only initialized variables and constants can be referenced
+ *  because the value of this variable is needed by the template compiler.
+ */
+// @dynamic
+class DomHandler {
+    static zindex = 1000;
+    static calculatedScrollbarWidth = null;
+    static calculatedScrollbarHeight = null;
+    static browser;
+    static addClass(element, className) {
+        if (element && className) {
+            if (element.classList)
+                element.classList.add(className);
+            else
+                element.className += ' ' + className;
+        }
+    }
+    static addMultipleClasses(element, className) {
+        if (element && className) {
+            if (element.classList) {
+                let styles = className.trim().split(' ');
+                for (let i = 0; i < styles.length; i++) {
+                    element.classList.add(styles[i]);
+                }
+            }
+            else {
+                let styles = className.split(' ');
+                for (let i = 0; i < styles.length; i++) {
+                    element.className += ' ' + styles[i];
+                }
+            }
+        }
+    }
+    static removeClass(element, className) {
+        if (element && className) {
+            if (element.classList)
+                element.classList.remove(className);
+            else
+                element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+        }
+    }
+    static removeMultipleClasses(element, classNames) {
+        if (element && classNames) {
+            [classNames]
+                .flat()
+                .filter(Boolean)
+                .forEach((cNames) => cNames.split(' ').forEach((className) => this.removeClass(element, className)));
+        }
+    }
+    static hasClass(element, className) {
+        if (element && className) {
+            if (element.classList)
+                return element.classList.contains(className);
+            else
+                return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
+        }
+        return false;
+    }
+    static siblings(element) {
+        return Array.prototype.filter.call(element.parentNode.children, function (child) {
+            return child !== element;
+        });
+    }
+    static find(element, selector) {
+        return Array.from(element.querySelectorAll(selector));
+    }
+    static findSingle(element, selector) {
+        return this.isElement(element) ? element.querySelector(selector) : null;
+    }
+    static index(element) {
+        let children = element.parentNode.childNodes;
+        let num = 0;
+        for (var i = 0; i < children.length; i++) {
+            if (children[i] == element)
+                return num;
+            if (children[i].nodeType == 1)
+                num++;
+        }
+        return -1;
+    }
+    static indexWithinGroup(element, attributeName) {
+        let children = element.parentNode ? element.parentNode.childNodes : [];
+        let num = 0;
+        for (var i = 0; i < children.length; i++) {
+            if (children[i] == element)
+                return num;
+            if (children[i].attributes && children[i].attributes[attributeName] && children[i].nodeType == 1)
+                num++;
+        }
+        return -1;
+    }
+    static appendOverlay(overlay, target, appendTo = 'self') {
+        if (appendTo !== 'self' && overlay && target) {
+            this.appendChild(overlay, target);
+        }
+    }
+    static alignOverlay(overlay, target, appendTo = 'self', calculateMinWidth = true) {
+        if (overlay && target) {
+            if (calculateMinWidth) {
+                overlay.style.minWidth = `${DomHandler.getOuterWidth(target)}px`;
+            }
+            if (appendTo === 'self') {
+                this.relativePosition(overlay, target);
+            }
+            else {
+                this.absolutePosition(overlay, target);
+            }
+        }
+    }
+    static relativePosition(element, target, gutter = true) {
+        const getClosestRelativeElement = (el) => {
+            if (!el)
+                return;
+            return getComputedStyle(el).getPropertyValue('position') === 'relative' ? el : getClosestRelativeElement(el.parentElement);
+        };
+        const elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
+        const targetHeight = target.offsetHeight ?? target.getBoundingClientRect().height;
+        const targetOffset = target.getBoundingClientRect();
+        const windowScrollTop = this.getWindowScrollTop();
+        const windowScrollLeft = this.getWindowScrollLeft();
+        const viewport = this.getViewport();
+        const relativeElement = getClosestRelativeElement(element);
+        const relativeElementOffset = relativeElement?.getBoundingClientRect() || { top: -1 * windowScrollTop, left: -1 * windowScrollLeft };
+        let top, left;
+        if (targetOffset.top + targetHeight + elementDimensions.height > viewport.height) {
+            top = targetOffset.top - relativeElementOffset.top - elementDimensions.height;
+            element.style.transformOrigin = 'bottom';
+            if (targetOffset.top + top < 0) {
+                top = -1 * targetOffset.top;
+            }
+        }
+        else {
+            top = targetHeight + targetOffset.top - relativeElementOffset.top;
+            element.style.transformOrigin = 'top';
+        }
+        const horizontalOverflow = targetOffset.left + elementDimensions.width - viewport.width;
+        const targetLeftOffsetInSpaceOfRelativeElement = targetOffset.left - relativeElementOffset.left;
+        if (elementDimensions.width > viewport.width) {
+            // element wider then viewport and cannot fit on screen (align at left side of viewport)
+            left = (targetOffset.left - relativeElementOffset.left) * -1;
+        }
+        else if (horizontalOverflow > 0) {
+            // element wider then viewport but can be fit on screen (align at right side of viewport)
+            left = targetLeftOffsetInSpaceOfRelativeElement - horizontalOverflow;
+        }
+        else {
+            // element fits on screen (align with target)
+            left = targetOffset.left - relativeElementOffset.left;
+        }
+        element.style.top = top + 'px';
+        element.style.left = left + 'px';
+        gutter && (element.style.marginTop = origin === 'bottom' ? 'calc(var(--cax-anchor-gutter) * -1)' : 'calc(var(--cax-anchor-gutter))');
+    }
+    static absolutePosition(element, target, gutter = true) {
+        const elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
+        const elementOuterHeight = elementDimensions.height;
+        const elementOuterWidth = elementDimensions.width;
+        const targetOuterHeight = target.offsetHeight ?? target.getBoundingClientRect().height;
+        const targetOuterWidth = target.offsetWidth ?? target.getBoundingClientRect().width;
+        const targetOffset = target.getBoundingClientRect();
+        const windowScrollTop = this.getWindowScrollTop();
+        const windowScrollLeft = this.getWindowScrollLeft();
+        const viewport = this.getViewport();
+        let top, left;
+        if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
+            top = targetOffset.top + windowScrollTop - elementOuterHeight;
+            element.style.transformOrigin = 'bottom';
+            if (top < 0) {
+                top = windowScrollTop;
+            }
+        }
+        else {
+            top = targetOuterHeight + targetOffset.top + windowScrollTop;
+            element.style.transformOrigin = 'top';
+        }
+        if (targetOffset.left + elementOuterWidth > viewport.width)
+            left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth);
+        else
+            left = targetOffset.left + windowScrollLeft;
+        element.style.top = top + 'px';
+        element.style.left = left + 'px';
+        gutter && (element.style.marginTop = origin === 'bottom' ? 'calc(var(--cax-anchor-gutter) * -1)' : 'calc(var(--cax-anchor-gutter))');
+    }
+    static getParents(element, parents = []) {
+        return element['parentNode'] === null ? parents : this.getParents(element.parentNode, parents.concat([element.parentNode]));
+    }
+    static getScrollableParents(element) {
+        let scrollableParents = [];
+        if (element) {
+            let parents = this.getParents(element);
+            const overflowRegex = /(auto|scroll)/;
+            const overflowCheck = (node) => {
+                let styleDeclaration = window['getComputedStyle'](node, null);
+                return overflowRegex.test(styleDeclaration.getPropertyValue('overflow')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflowX')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflowY'));
+            };
+            for (let parent of parents) {
+                let scrollSelectors = parent.nodeType === 1 && parent.dataset['scrollselectors'];
+                if (scrollSelectors) {
+                    let selectors = scrollSelectors.split(',');
+                    for (let selector of selectors) {
+                        let el = this.findSingle(parent, selector);
+                        if (el && overflowCheck(el)) {
+                            scrollableParents.push(el);
+                        }
+                    }
+                }
+                if (parent.nodeType !== 9 && overflowCheck(parent)) {
+                    scrollableParents.push(parent);
+                }
+            }
+        }
+        return scrollableParents;
+    }
+    static getHiddenElementOuterHeight(element) {
+        element.style.visibility = 'hidden';
+        element.style.display = 'block';
+        let elementHeight = element.offsetHeight;
+        element.style.display = 'none';
+        element.style.visibility = 'visible';
+        return elementHeight;
+    }
+    static getHiddenElementOuterWidth(element) {
+        element.style.visibility = 'hidden';
+        element.style.display = 'block';
+        let elementWidth = element.offsetWidth;
+        element.style.display = 'none';
+        element.style.visibility = 'visible';
+        return elementWidth;
+    }
+    static getHiddenElementDimensions(element) {
+        let dimensions = {};
+        element.style.visibility = 'hidden';
+        element.style.display = 'block';
+        dimensions.width = element.offsetWidth;
+        dimensions.height = element.offsetHeight;
+        element.style.display = 'none';
+        element.style.visibility = 'visible';
+        return dimensions;
+    }
+    static scrollInView(container, item) {
+        let borderTopValue = getComputedStyle(container).getPropertyValue('borderTopWidth');
+        let borderTop = borderTopValue ? parseFloat(borderTopValue) : 0;
+        let paddingTopValue = getComputedStyle(container).getPropertyValue('paddingTop');
+        let paddingTop = paddingTopValue ? parseFloat(paddingTopValue) : 0;
+        let containerRect = container.getBoundingClientRect();
+        let itemRect = item.getBoundingClientRect();
+        let offset = itemRect.top + document.body.scrollTop - (containerRect.top + document.body.scrollTop) - borderTop - paddingTop;
+        let scroll = container.scrollTop;
+        let elementHeight = container.clientHeight;
+        let itemHeight = this.getOuterHeight(item);
+        if (offset < 0) {
+            container.scrollTop = scroll + offset;
+        }
+        else if (offset + itemHeight > elementHeight) {
+            container.scrollTop = scroll + offset - elementHeight + itemHeight;
+        }
+    }
+    static fadeIn(element, duration) {
+        element.style.opacity = 0;
+        let last = +new Date();
+        let opacity = 0;
+        let tick = function () {
+            opacity = +element.style.opacity.replace(',', '.') + (new Date().getTime() - last) / duration;
+            element.style.opacity = opacity;
+            last = +new Date();
+            if (+opacity < 1) {
+                (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
+            }
+        };
+        tick();
+    }
+    static fadeOut(element, ms) {
+        var opacity = 1, interval = 50, duration = ms, gap = interval / duration;
+        let fading = setInterval(() => {
+            opacity = opacity - gap;
+            if (opacity <= 0) {
+                opacity = 0;
+                clearInterval(fading);
+            }
+            element.style.opacity = opacity;
+        }, interval);
+    }
+    static getWindowScrollTop() {
+        let doc = document.documentElement;
+        return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+    }
+    static getWindowScrollLeft() {
+        let doc = document.documentElement;
+        return (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
+    }
+    static matches(element, selector) {
+        var p = Element.prototype;
+        var f = p['matches'] ||
+            p.webkitMatchesSelector ||
+            p['mozMatchesSelector'] ||
+            p['msMatchesSelector'] ||
+            function (s) {
+                return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
+            };
+        return f.call(element, selector);
+    }
+    static getOuterWidth(el, margin) {
+        let width = el.offsetWidth;
+        if (margin) {
+            let style = getComputedStyle(el);
+            width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+        }
+        return width;
+    }
+    static getHorizontalPadding(el) {
+        let style = getComputedStyle(el);
+        return parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+    }
+    static getHorizontalMargin(el) {
+        let style = getComputedStyle(el);
+        return parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+    }
+    static innerWidth(el) {
+        let width = el.offsetWidth;
+        let style = getComputedStyle(el);
+        width += parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+        return width;
+    }
+    static width(el) {
+        let width = el.offsetWidth;
+        let style = getComputedStyle(el);
+        width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+        return width;
+    }
+    static getInnerHeight(el) {
+        let height = el.offsetHeight;
+        let style = getComputedStyle(el);
+        height += parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+        return height;
+    }
+    static getOuterHeight(el, margin) {
+        let height = el.offsetHeight;
+        if (margin) {
+            let style = getComputedStyle(el);
+            height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
+        }
+        return height;
+    }
+    static getHeight(el) {
+        let height = el.offsetHeight;
+        let style = getComputedStyle(el);
+        height -= parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+        return height;
+    }
+    static getWidth(el) {
+        let width = el.offsetWidth;
+        let style = getComputedStyle(el);
+        width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
+        return width;
+    }
+    static getViewport() {
+        let win = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], w = win.innerWidth || e.clientWidth || g.clientWidth, h = win.innerHeight || e.clientHeight || g.clientHeight;
+        return { width: w, height: h };
+    }
+    static getOffset(el) {
+        var rect = el.getBoundingClientRect();
+        return {
+            top: rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0),
+            left: rect.left + (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0)
+        };
+    }
+    static replaceElementWith(element, replacementElement) {
+        let parentNode = element.parentNode;
+        if (!parentNode)
+            throw `Can't replace element`;
+        return parentNode.replaceChild(replacementElement, element);
+    }
+    static getUserAgent() {
+        if (navigator && this.isClient()) {
+            return navigator.userAgent;
+        }
+    }
+    static isIE() {
+        var ua = window.navigator.userAgent;
+        var msie = ua.indexOf('MSIE ');
+        if (msie > 0) {
+            // IE 10 or older => return version number
+            return true;
+        }
+        var trident = ua.indexOf('Trident/');
+        if (trident > 0) {
+            // IE 11 => return version number
+            var rv = ua.indexOf('rv:');
+            return true;
+        }
+        var edge = ua.indexOf('Edge/');
+        if (edge > 0) {
+            // Edge (IE 12+) => return version number
+            return true;
+        }
+        // other browser
+        return false;
+    }
+    static isIOS() {
+        return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'];
+    }
+    static isAndroid() {
+        return /(android)/i.test(navigator.userAgent);
+    }
+    static isTouchDevice() {
+        return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    }
+    static appendChild(element, target) {
+        if (this.isElement(target))
+            target.appendChild(element);
+        else if (target && target.el && target.el.nativeElement)
+            target.el.nativeElement.appendChild(element);
+        else
+            throw 'Cannot append ' + target + ' to ' + element;
+    }
+    static removeChild(element, target) {
+        if (this.isElement(target))
+            target.removeChild(element);
+        else if (target.el && target.el.nativeElement)
+            target.el.nativeElement.removeChild(element);
+        else
+            throw 'Cannot remove ' + element + ' from ' + target;
+    }
+    static removeElement(element) {
+        if (!('remove' in Element.prototype))
+            element.parentNode.removeChild(element);
+        else
+            element.remove();
+    }
+    static isElement(obj) {
+        return typeof HTMLElement === 'object' ? obj instanceof HTMLElement : obj && typeof obj === 'object' && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === 'string';
+    }
+    static calculateScrollbarWidth(el) {
+        if (el) {
+            let style = getComputedStyle(el);
+            return el.offsetWidth - el.clientWidth - parseFloat(style.borderLeftWidth) - parseFloat(style.borderRightWidth);
+        }
+        else {
+            if (this.calculatedScrollbarWidth !== null)
+                return this.calculatedScrollbarWidth;
+            let scrollDiv = document.createElement('div');
+            scrollDiv.className = 'cax-scrollbar-measure';
+            document.body.appendChild(scrollDiv);
+            let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+            document.body.removeChild(scrollDiv);
+            this.calculatedScrollbarWidth = scrollbarWidth;
+            return scrollbarWidth;
+        }
+    }
+    static calculateScrollbarHeight() {
+        if (this.calculatedScrollbarHeight !== null)
+            return this.calculatedScrollbarHeight;
+        let scrollDiv = document.createElement('div');
+        scrollDiv.className = 'cax-scrollbar-measure';
+        document.body.appendChild(scrollDiv);
+        let scrollbarHeight = scrollDiv.offsetHeight - scrollDiv.clientHeight;
+        document.body.removeChild(scrollDiv);
+        this.calculatedScrollbarWidth = scrollbarHeight;
+        return scrollbarHeight;
+    }
+    static invokeElementMethod(element, methodName, args) {
+        element[methodName].apply(element, args);
+    }
+    static clearSelection() {
+        if (window.getSelection) {
+            if (window.getSelection().empty) {
+                window.getSelection().empty();
+            }
+            else if (window.getSelection().removeAllRanges && window.getSelection().rangeCount > 0 && window.getSelection().getRangeAt(0).getClientRects().length > 0) {
+                window.getSelection().removeAllRanges();
+            }
+        }
+        else if (document['selection'] && document['selection'].empty) {
+            try {
+                document['selection'].empty();
+            }
+            catch (error) {
+                //ignore IE bug
+            }
+        }
+    }
+    static getBrowser() {
+        if (!this.browser) {
+            let matched = this.resolveUserAgent();
+            this.browser = {};
+            if (matched.browser) {
+                this.browser[matched.browser] = true;
+                this.browser['version'] = matched.version;
+            }
+            if (this.browser['chrome']) {
+                this.browser['webkit'] = true;
+            }
+            else if (this.browser['webkit']) {
+                this.browser['safari'] = true;
+            }
+        }
+        return this.browser;
+    }
+    static resolveUserAgent() {
+        let ua = navigator.userAgent.toLowerCase();
+        let match = /(chrome)[ \/]([\w.]+)/.exec(ua) || /(webkit)[ \/]([\w.]+)/.exec(ua) || /(opera)(?:.*version|)[ \/]([\w.]+)/.exec(ua) || /(msie) ([\w.]+)/.exec(ua) || (ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua)) || [];
+        return {
+            browser: match[1] || '',
+            version: match[2] || '0'
+        };
+    }
+    static isInteger(value) {
+        if (Number.isInteger) {
+            return Number.isInteger(value);
+        }
+        else {
+            return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
+        }
+    }
+    static isHidden(element) {
+        return !element || element.offsetParent === null;
+    }
+    static isVisible(element) {
+        return element && element.offsetParent != null;
+    }
+    static isExist(element) {
+        return element !== null && typeof element !== 'undefined' && element.nodeName && element.parentNode;
+    }
+    static focus(element, options) {
+        element && document.activeElement !== element && element.focus(options);
+    }
+    static getFocusableSelectorString(selector = '') {
+        return `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+        [href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+        input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+        select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+        textarea:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+        [tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+        [contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+        .cax-inputtext:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+        .cax-button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector}`;
+    }
+    static getFocusableElements(element, selector = '') {
+        let focusableElements = this.find(element, this.getFocusableSelectorString(selector));
+        let visibleFocusableElements = [];
+        for (let focusableElement of focusableElements) {
+            const computedStyle = getComputedStyle(focusableElement);
+            if (this.isVisible(focusableElement) && computedStyle.display != 'none' && computedStyle.visibility != 'hidden')
+                visibleFocusableElements.push(focusableElement);
+        }
+        return visibleFocusableElements;
+    }
+    static getFocusableElement(element, selector = '') {
+        let focusableElement = this.findSingle(element, this.getFocusableSelectorString(selector));
+        if (focusableElement) {
+            const computedStyle = getComputedStyle(focusableElement);
+            if (this.isVisible(focusableElement) && computedStyle.display != 'none' && computedStyle.visibility != 'hidden')
+                return focusableElement;
+        }
+        return null;
+    }
+    static getFirstFocusableElement(element, selector = '') {
+        const focusableElements = this.getFocusableElements(element, selector);
+        return focusableElements.length > 0 ? focusableElements[0] : null;
+    }
+    static getLastFocusableElement(element, selector) {
+        const focusableElements = this.getFocusableElements(element, selector);
+        return focusableElements.length > 0 ? focusableElements[focusableElements.length - 1] : null;
+    }
+    static getNextFocusableElement(element, reverse = false) {
+        const focusableElements = DomHandler.getFocusableElements(element);
+        let index = 0;
+        if (focusableElements && focusableElements.length > 0) {
+            const focusedIndex = focusableElements.indexOf(focusableElements[0].ownerDocument.activeElement);
+            if (reverse) {
+                if (focusedIndex == -1 || focusedIndex === 0) {
+                    index = focusableElements.length - 1;
+                }
+                else {
+                    index = focusedIndex - 1;
+                }
+            }
+            else if (focusedIndex != -1 && focusedIndex !== focusableElements.length - 1) {
+                index = focusedIndex + 1;
+            }
+        }
+        return focusableElements[index];
+    }
+    static generateZIndex() {
+        this.zindex = this.zindex || 999;
+        return ++this.zindex;
+    }
+    static getSelection() {
+        if (window.getSelection)
+            return window.getSelection().toString();
+        else if (document.getSelection)
+            return document.getSelection().toString();
+        else if (document['selection'])
+            return document['selection'].createRange().text;
+        return null;
+    }
+    static getTargetElement(target, el) {
+        if (!target)
+            return null;
+        switch (target) {
+            case 'document':
+                return document;
+            case 'window':
+                return window;
+            case '@next':
+                return el?.nextElementSibling;
+            case '@prev':
+                return el?.previousElementSibling;
+            case '@parent':
+                return el?.parentElement;
+            case '@grandparent':
+                return el?.parentElement.parentElement;
+            default:
+                const type = typeof target;
+                if (type === 'string') {
+                    return document.querySelector(target);
+                }
+                else if (type === 'object' && target.hasOwnProperty('nativeElement')) {
+                    return this.isExist(target.nativeElement) ? target.nativeElement : undefined;
+                }
+                const isFunction = (obj) => !!(obj && obj.constructor && obj.call && obj.apply);
+                const element = isFunction(target) ? target() : target;
+                return (element && element.nodeType === 9) || this.isExist(element) ? element : null;
+        }
+    }
+    static isClient() {
+        return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+    }
+    static getAttribute(element, name) {
+        if (element) {
+            const value = element.getAttribute(name);
+            if (!isNaN(value)) {
+                return +value;
+            }
+            if (value === 'true' || value === 'false') {
+                return value === 'true';
+            }
+            return value;
+        }
+        return undefined;
+    }
+    static calculateBodyScrollbarWidth() {
+        return window.innerWidth - document.documentElement.offsetWidth;
+    }
+    static blockBodyScroll(className = 'cax-overflow-hidden') {
+        document.body.style.setProperty('--scrollbar-width', this.calculateBodyScrollbarWidth() + 'px');
+        this.addClass(document.body, className);
+    }
+    static unblockBodyScroll(className = 'cax-overflow-hidden') {
+        document.body.style.removeProperty('--scrollbar-width');
+        this.removeClass(document.body, className);
+    }
+    static createElement(type, attributes = {}, ...children) {
+        if (type) {
+            const element = document.createElement(type);
+            this.setAttributes(element, attributes);
+            element.append(...children);
+            return element;
+        }
+        return undefined;
+    }
+    static setAttribute(element, attribute = '', value) {
+        if (this.isElement(element) && value !== null && value !== undefined) {
+            element.setAttribute(attribute, value);
+        }
+    }
+    static setAttributes(element, attributes = {}) {
+        if (this.isElement(element)) {
+            const computedStyles = (rule, value) => {
+                const styles = element?.$attrs?.[rule] ? [element?.$attrs?.[rule]] : [];
+                return [value].flat().reduce((cv, v) => {
+                    if (v !== null && v !== undefined) {
+                        const type = typeof v;
+                        if (type === 'string' || type === 'number') {
+                            cv.push(v);
+                        }
+                        else if (type === 'object') {
+                            const _cv = Array.isArray(v)
+                                ? computedStyles(rule, v)
+                                : Object.entries(v).map(([_k, _v]) => (rule === 'style' && (!!_v || _v === 0) ? `${_k.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}:${_v}` : !!_v ? _k : undefined));
+                            cv = _cv.length ? cv.concat(_cv.filter((c) => !!c)) : cv;
+                        }
+                    }
+                    return cv;
+                }, styles);
+            };
+            Object.entries(attributes).forEach(([key, value]) => {
+                if (value !== undefined && value !== null) {
+                    const matchedEvent = key.match(/^on(.+)/);
+                    if (matchedEvent) {
+                        element.addEventListener(matchedEvent[1].toLowerCase(), value);
+                    }
+                    else if (key === 'pBind') {
+                        this.setAttributes(element, value);
+                    }
+                    else {
+                        value = key === 'class' ? [...new Set(computedStyles('class', value))].join(' ').trim() : key === 'style' ? computedStyles('style', value).join(';').trim() : value;
+                        (element.$attrs = element.$attrs || {}) && (element.$attrs[key] = value);
+                        element.setAttribute(key, value);
+                    }
+                }
+            });
+        }
+    }
+    static isFocusableElement(element, selector = '') {
+        return this.isElement(element)
+            ? element.matches(`button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+                [href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+                input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+                select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+                textarea:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+                [tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+                [contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector}`)
+            : false;
+    }
+}
+
+class ConnectedOverlayScrollHandler {
+    element;
+    listener;
+    scrollableParents;
+    constructor(element, listener = () => { }) {
+        this.element = element;
+        this.listener = listener;
+    }
+    bindScrollListener() {
+        this.scrollableParents = DomHandler.getScrollableParents(this.element);
+        for (let i = 0; i < this.scrollableParents.length; i++) {
+            this.scrollableParents[i].addEventListener('scroll', this.listener);
+        }
+    }
+    unbindScrollListener() {
+        if (this.scrollableParents) {
+            for (let i = 0; i < this.scrollableParents.length; i++) {
+                this.scrollableParents[i].removeEventListener('scroll', this.listener);
+            }
+        }
+    }
+    destroy() {
+        this.unbindScrollListener();
+        this.element = null;
+        this.listener = null;
+        this.scrollableParents = null;
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ConnectedOverlayScrollHandler, DomHandler };
+//# sourceMappingURL=cax-design-system-dom.mjs.map