@gravionlabs/helix-core 22.1.2 → 22.1.3

package/fesm2022/gravionlabs-helix-core-dom.mjs

@@ -1,550 +1,433 @@
-import * as utils from '@gravionlabs/helix-core/uix/utils';
-import { getCSSVariableByRegex } from '@gravionlabs/helix-core/uix/utils';
-import { $dt } from '@gravionlabs/helix-core/uix/styled';
-
-/**
- * @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;
-        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, origin = 'top';
-        if (targetOffset.top + targetHeight + elementDimensions.height > viewport.height) {
-            top = targetOffset.top - relativeElementOffset.top - elementDimensions.height;
-            origin = 'bottom';
-            if (targetOffset.top + top < 0) {
-                top = -1 * targetOffset.top;
-            }
-        }
-        else {
-            top = targetHeight + targetOffset.top - relativeElementOffset.top;
-            origin = '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';
-        element.style.transformOrigin = origin;
-        if (gutter) {
-            const gutterValue = getCSSVariableByRegex(/-anchor-gutter$/)?.value;
-            element.style.marginTop = origin === 'bottom' ? `calc(${gutterValue ?? '2px'} * -1)` : (gutterValue ?? '');
-        }
-    }
-    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;
-        const targetOuterWidth = target.offsetWidth;
-        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(--h-anchor-gutter) * -1)' : 'calc(var(--h-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) {
-                if (window.requestAnimationFrame)
-                    window.requestAnimationFrame(tick);
-                else
-                    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 = 'h-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 = 'h-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 && window.getSelection()) {
-            if (window.getSelection()?.empty) {
-                window.getSelection()?.empty();
-            }
-            else if (window.getSelection()?.removeAllRanges && (window.getSelection()?.rangeCount || 0) > 0 && (window.getSelection()?.getRangeAt(0)?.getClientRects()?.length || 0) > 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},
+import * as utils from "@gravionlabs/helix-core/uix/utils";
+import { getCSSVariableByRegex } from "@gravionlabs/helix-core/uix/utils";
+import { $dt } from "@gravionlabs/helix-core/uix/styled";
+var DomHandler = class DomHandler {
+	static zindex = 1e3;
+	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;
+		const targetOffset = target.getBoundingClientRect();
+		const windowScrollTop = this.getWindowScrollTop();
+		const windowScrollLeft = this.getWindowScrollLeft();
+		const viewport = this.getViewport();
+		const relativeElementOffset = getClosestRelativeElement(element)?.getBoundingClientRect() || {
+			top: -1 * windowScrollTop,
+			left: -1 * windowScrollLeft
+		};
+		let top, left, origin = "top";
+		if (targetOffset.top + targetHeight + elementDimensions.height > viewport.height) {
+			top = targetOffset.top - relativeElementOffset.top - elementDimensions.height;
+			origin = "bottom";
+			if (targetOffset.top + top < 0) top = -1 * targetOffset.top;
+		} else {
+			top = targetHeight + targetOffset.top - relativeElementOffset.top;
+			origin = "top";
+		}
+		const horizontalOverflow = targetOffset.left + elementDimensions.width - viewport.width;
+		const targetLeftOffsetInSpaceOfRelativeElement = targetOffset.left - relativeElementOffset.left;
+		if (elementDimensions.width > viewport.width) left = (targetOffset.left - relativeElementOffset.left) * -1;
+		else if (horizontalOverflow > 0) left = targetLeftOffsetInSpaceOfRelativeElement - horizontalOverflow;
+		else left = targetOffset.left - relativeElementOffset.left;
+		element.style.top = top + "px";
+		element.style.left = left + "px";
+		element.style.transformOrigin = origin;
+		if (gutter) {
+			const gutterValue = getCSSVariableByRegex(/-anchor-gutter$/)?.value;
+			element.style.marginTop = origin === "bottom" ? `calc(${gutterValue ?? "2px"} * -1)` : gutterValue ?? "";
+		}
+	}
+	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;
+		const targetOuterWidth = target.offsetWidth;
+		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(--h-anchor-gutter) * -1)" : "calc(var(--h-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 offset = item.getBoundingClientRect().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 = +/* @__PURE__ */ new Date();
+		let opacity = 0;
+		let tick = function() {
+			opacity = +element.style.opacity.replace(",", ".") + ((/* @__PURE__ */ new Date()).getTime() - last) / duration;
+			element.style.opacity = opacity;
+			last = +/* @__PURE__ */ new Date();
+			if (+opacity < 1) if (window.requestAnimationFrame) window.requestAnimationFrame(tick);
+			else setTimeout(tick, 16);
+		};
+		tick();
+	}
+	static fadeOut(element, ms) {
+		var opacity = 1, interval = 50, gap = interval / ms;
+		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;
+		return (p["matches"] || p.webkitMatchesSelector || p["mozMatchesSelector"] || p["msMatchesSelector"] || function(s) {
+			return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
+		}).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];
+		return {
+			width: win.innerWidth || e.clientWidth || g.clientWidth,
+			height: win.innerHeight || e.clientHeight || g.clientHeight
+		};
+	}
+	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;
+		if (ua.indexOf("MSIE ") > 0) return true;
+		if (ua.indexOf("Trident/") > 0) {
+			ua.indexOf("rv:");
+			return true;
+		}
+		if (ua.indexOf("Edge/") > 0) return true;
+		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 = "h-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 = "h-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 && window.getSelection()) {
+			if (window.getSelection()?.empty) window.getSelection()?.empty();
+			else if (window.getSelection()?.removeAllRanges && (window.getSelection()?.rangeCount || 0) > 0 && (window.getSelection()?.getRangeAt(0)?.getClientRects()?.length || 0) > 0) window.getSelection()?.removeAllRanges();
+		} else if (document["selection"] && document["selection"].empty) try {
+			document["selection"].empty();
+		} catch (error) {}
+	}
+	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},
@@ -553,226 +436,172 @@ class DomHandler {
         [contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
         .h-inputtext:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
         .h-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 = 'h-overflow-hidden') {
-        document.body.style.setProperty('--scrollbar-width', this.calculateBodyScrollbarWidth() + 'px');
-        this.addClass(document.body, className);
-    }
-    static unblockBodyScroll(className = 'h-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 === 'hBind') {
-                        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},
+	}
+	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 : void 0;
+				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;
+		}
+	}
+	static calculateBodyScrollbarWidth() {
+		return window.innerWidth - document.documentElement.offsetWidth;
+	}
+	static blockBodyScroll(className = "h-overflow-hidden") {
+		document.body.style.setProperty("--scrollbar-width", this.calculateBodyScrollbarWidth() + "px");
+		this.addClass(document.body, className);
+	}
+	static unblockBodyScroll(className = "h-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;
+		}
+	}
+	static setAttribute(element, attribute = "", value) {
+		if (this.isElement(element) && value !== null && value !== void 0) 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 !== void 0) {
+						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 : void 0);
+							cv = _cv.length ? cv.concat(_cv.filter((c) => !!c)) : cv;
+						}
+					}
+					return cv;
+				}, styles);
+			};
+			Object.entries(attributes).forEach(([key, value]) => {
+				if (value !== void 0 && value !== null) {
+					const matchedEvent = key.match(/^on(.+)/);
+					if (matchedEvent) element.addEventListener(matchedEvent[1].toLowerCase(), value);
+					else if (key === "hBind") 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;
-    }
-}
-// @todo: update this when we remove the old domhandler
+                [contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector}`) : false;
+	}
+};
 function blockBodyScroll() {
-    utils.blockBodyScroll({ variableName: $dt('scrollbar.width').name });
+	utils.blockBodyScroll({ variableName: $dt("scrollbar.width").name });
 }
 function unblockBodyScroll() {
-    utils.unblockBodyScroll({ variableName: $dt('scrollbar.width').name });
-}
-
-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;
-    }
+	utils.unblockBodyScroll({ variableName: $dt("scrollbar.width").name });
 }
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var ConnectedOverlayScrollHandler = class {
+	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;
+	}
+};
 export { ConnectedOverlayScrollHandler, DomHandler, blockBodyScroll, unblockBodyScroll };
-//# sourceMappingURL=gravionlabs-helix-core-dom.mjs.map
+
+//# sourceMappingURL=gravionlabs-helix-core-dom.mjs.map