@sellmate/design-system 1.19.0 → 1.20.1

package/dist/esm/sd-portal.entry.js

@@ -1,241 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CAxodB5I.js';
-
-const SdPortal = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.close = createEvent(this, "sdClose", 3);
-    }
-    get hostEl() { return getElement(this); }
-    to = 'body';
-    parentRef = null;
-    offset = [0, 4];
-    viewportPadding = 0;
-    zIndex = 998;
-    open = false;
-    close;
-    container;
-    wrapper;
-    rafId;
-    isInsideClick = false;
-    closeTransitionTimer;
-    handleObservedScroll = () => this.updatePosition();
-    resizeObserver;
-    mutationObserver;
-    scrollParents = [];
-    isObserved = false;
-    handleOpenChange() {
-        this.syncPortalState();
-    }
-    componentDidLoad() {
-        this.container = this.resolveContainer();
-        this.syncPortalState();
-    }
-    componentDidRender() {
-        this.syncPortalState();
-    }
-    disconnectedCallback() {
-        if (this.closeTransitionTimer)
-            clearTimeout(this.closeTransitionTimer);
-        this.unobserveParent();
-        if (this.wrapper?.parentNode) {
-            try {
-                this.wrapper.parentNode.removeChild(this.wrapper);
-            }
-            catch {
-                // Stencil spec mock DOM can already detach the wrapper before this callback runs.
-            }
-        }
-    }
-    resolveContainer() {
-        const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
-        return el instanceof HTMLElement ? el : document.body;
-    }
-    createWrapper() {
-        this.wrapper = document.createElement('div');
-        Object.assign(this.wrapper.style, {
-            position: 'fixed',
-            top: '0',
-            left: '0',
-            zIndex: (this.zIndex ?? 998).toString(),
-            opacity: '0',
-            transition: 'opacity 0.15s ease-out',
-            boxSizing: 'border-box',
-            visibility: 'hidden',
-        });
-        this.container.appendChild(this.wrapper);
-    }
-    ensureWrapper() {
-        if (this.wrapper)
-            return;
-        this.container ||= this.resolveContainer();
-        this.createWrapper();
-        this.moveSlotContent();
-    }
-    syncPortalState() {
-        if (!this.open) {
-            if (this.wrapper) {
-                this.wrapper.style.transition = 'opacity 0.15s ease-out';
-                this.wrapper.style.opacity = '0';
-                this.wrapper.style.pointerEvents = 'none';
-                if (this.closeTransitionTimer)
-                    clearTimeout(this.closeTransitionTimer);
-                this.closeTransitionTimer = setTimeout(() => {
-                    if (this.wrapper && !this.open) {
-                        this.wrapper.style.display = 'none';
-                    }
-                }, 150);
-            }
-            this.unobserveParent();
-            return;
-        }
-        if (this.closeTransitionTimer)
-            clearTimeout(this.closeTransitionTimer);
-        this.ensureWrapper();
-        if (!this.wrapper)
-            return;
-        this.wrapper.style.display = 'block';
-        this.wrapper.style.transition = 'opacity 0.25s ease-out';
-        this.wrapper.style.opacity = '0';
-        this.wrapper.style.pointerEvents = '';
-        this.observeParent();
-        this.updatePosition();
-    }
-    moveSlotContent() {
-        if (!this.wrapper)
-            return;
-        const nodes = Array.from(this.hostEl.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);
-        nodes.forEach(n => this.wrapper.appendChild(n));
-    }
-    // 위치 갱신 (scroll / resize)
-    updatePosition() {
-        if (this.rafId !== undefined)
-            cancelAnimationFrame(this.rafId);
-        this.rafId = requestAnimationFrame(() => {
-            if (!this.parentRef || !this.wrapper)
-                return;
-            const parentRect = this.parentRef.getBoundingClientRect();
-            const viewport = {
-                width: window.innerWidth,
-                height: window.innerHeight,
-            };
-            const offset = this.offset ?? [0, 4];
-            const viewportPadding = Math.max(0, this.viewportPadding ?? 0);
-            const maxWidth = Math.max(viewport.width - viewportPadding * 2, 0);
-            const maxHeight = Math.max(viewport.height - viewportPadding * 2, 0);
-            this.wrapper.style.maxWidth = `${maxWidth}px`;
-            this.wrapper.style.maxHeight = `${maxHeight}px`;
-            const wrapperRect = this.wrapper.getBoundingClientRect();
-            const availableBelow = viewport.height - parentRect.bottom - offset[1] - viewportPadding;
-            const availableAbove = parentRect.top - offset[1] - viewportPadding;
-            let top = parentRect.bottom + offset[1];
-            let left = parentRect.left + offset[0];
-            if (availableBelow < wrapperRect.height && availableAbove > availableBelow) {
-                top = parentRect.top - wrapperRect.height - offset[1];
-            }
-            const minTop = viewportPadding;
-            const maxTop = viewport.height - viewportPadding - wrapperRect.height;
-            if (maxTop < minTop) {
-                top = minTop;
-            }
-            else {
-                top = Math.min(Math.max(top, minTop), maxTop);
-            }
-            if (parentRect.left + wrapperRect.width + offset[0] > viewport.width - viewportPadding) {
-                left = parentRect.right - wrapperRect.width - offset[0];
-            }
-            const minLeft = viewportPadding;
-            const maxLeft = viewport.width - viewportPadding - wrapperRect.width;
-            if (maxLeft < minLeft) {
-                left = minLeft;
-            }
-            else {
-                left = Math.min(Math.max(left, minLeft), maxLeft);
-            }
-            this.wrapper.style.top = `${top}px`;
-            this.wrapper.style.left = `${left}px`;
-            this.wrapper.style.visibility = 'visible';
-            this.wrapper.style.opacity = '1';
-        });
-    }
-    // parentRef의 이동 / 크기변경 감지
-    observeParent() {
-        if (!this.parentRef || this.isObserved)
-            return;
-        this.observeScrollParents(this.parentRef);
-        if (typeof ResizeObserver !== 'undefined') {
-            this.resizeObserver = new ResizeObserver(() => this.updatePosition());
-            this.resizeObserver.observe(this.parentRef);
-        }
-        if (typeof MutationObserver !== 'undefined') {
-            this.mutationObserver = new MutationObserver(() => this.updatePosition());
-            this.mutationObserver.observe(document.body, {
-                childList: true,
-                subtree: true,
-            });
-        }
-        this.isObserved = true;
-    }
-    unobserveParent() {
-        if (!this.isObserved)
-            return;
-        this.unobserveScrollParents();
-        this.resizeObserver?.disconnect();
-        this.resizeObserver = undefined;
-        this.mutationObserver?.disconnect();
-        this.mutationObserver = undefined;
-        this.isObserved = false;
-    }
-    observeScrollParents(element) {
-        const nextScrollParents = this.getScrollParents(element);
-        nextScrollParents.forEach(parent => {
-            parent.addEventListener('scroll', this.handleObservedScroll, { passive: true });
-        });
-        this.scrollParents = nextScrollParents;
-    }
-    unobserveScrollParents() {
-        this.scrollParents.forEach(parent => {
-            parent.removeEventListener('scroll', this.handleObservedScroll);
-        });
-        this.scrollParents = [];
-    }
-    getScrollParents(element) {
-        const scrollParents = [];
-        let currentElement = element.parentElement;
-        while (currentElement) {
-            const { overflow, overflowX, overflowY } = getComputedStyle(currentElement);
-            const isScrollable = [overflow, overflowX, overflowY].some(value => /(auto|scroll|overlay)/.test(value));
-            if (isScrollable) {
-                scrollParents.push(currentElement);
-            }
-            currentElement = currentElement.parentElement;
-        }
-        return scrollParents;
-    }
-    isInsideTarget(target) {
-        return !!((this.wrapper?.contains(target)) ||
-            (this.parentRef?.contains(target)));
-    }
-    // 외부 클릭 감지
-    handleMouseDown(e) {
-        this.isInsideClick = this.isInsideTarget(e.target);
-    }
-    handleWindowClick(e) {
-        if (this.isInsideClick) {
-            this.isInsideClick = false;
-            return;
-        }
-        if (this.isInsideTarget(e.target))
-            return;
-        this.close.emit();
-    }
-    render() {
-        return h("slot", { key: '22e09896836d017f33a9c6b92772a00fc85f8997' });
-    }
-    static get watchers() { return {
-        "open": [{
-                "handleOpenChange": 0
-            }]
-    }; }
-};
-
-export { SdPortal as sd_portal };