@designbasekorea/ui-wc 0.5.6 → 0.6.1

package/dist/esm/components/db-modal.js

@@ -1,522 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const SIZES = ['s', 'm', 'l', 'xl', 'full'];
-const HEADER_VARIANTS = ['default', 'tabs', 'segment'];
-const NAV_SIZES = ['s', 'm', 'l'];
-class DbModal extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.titleId = `db-modal-title-${Math.random().toString(36).slice(2, 9)}`;
-        this.isMounted = false;
-        this.internalTabId = '';
-        this.internalSegment = '';
-        this.exitTimerId = null;
-        this.handleDocumentKeyDown = (event) => {
-            if (event.key === 'Escape' && this.open && this.getAttribute('close-on-escape') !== 'false') {
-                event.preventDefault();
-                this.close();
-            }
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'open',
-            'title',
-            'size',
-            'header-variant',
-            'tabs',
-            'segments',
-            'selected-tab-id',
-            'default-selected-tab-id',
-            'segment-value',
-            'default-segment-value',
-            'nav-size',
-            'segment-full-width',
-            'close-on-outside-click',
-            'close-on-escape',
-            'show-close-button',
-        ];
-    }
-    get open() {
-        return this.hasAttribute('open') && this.getAttribute('open') !== 'false';
-    }
-    set open(value) {
-        if (value)
-            this.setAttribute('open', 'true');
-        else
-            this.removeAttribute('open');
-    }
-    connectedCallback() {
-        this.classList.add('designbase-wc-modal-host');
-        document.addEventListener('keydown', this.handleDocumentKeyDown);
-        this.childObserver = new MutationObserver(() => {
-            if (this.open)
-                this.render();
-        });
-        this.childObserver.observe(this, { childList: true });
-        this.syncOpenState();
-    }
-    disconnectedCallback() {
-        this.childObserver?.disconnect();
-        document.removeEventListener('keydown', this.handleDocumentKeyDown);
-        if (this.exitTimerId)
-            clearTimeout(this.exitTimerId);
-        this.teardown();
-    }
-    attributeChangedCallback(name) {
-        if (!this.isConnected)
-            return;
-        if (name === 'open') {
-            this.syncOpenState();
-            return;
-        }
-        if (name === 'selected-tab-id' || name === 'segment-value') {
-            const classified = this.getClassifiedChildren();
-            this.renderBodyContent(classified.body);
-            this.renderHeader(classified.header);
-            return;
-        }
-        this.render();
-        if (this.isMounted)
-            this.syncVisibility();
-    }
-    resolvedSize() {
-        return SIZES.includes(this.size) ? this.size : 'm';
-    }
-    get size() {
-        return this.getAttribute('size') || 'm';
-    }
-    set size(value) {
-        if (value)
-            this.setAttribute('size', value);
-        else
-            this.removeAttribute('size');
-    }
-    resolvedHeaderVariant() {
-        const value = this.getAttribute('header-variant') || 'default';
-        return HEADER_VARIANTS.includes(value) ? value : 'default';
-    }
-    parsedTabs() {
-        const raw = this.getAttribute('tabs');
-        if (!raw)
-            return [];
-        try {
-            const parsed = JSON.parse(raw);
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    parsedSegments() {
-        const raw = this.getAttribute('segments');
-        if (!raw)
-            return [];
-        try {
-            const parsed = JSON.parse(raw);
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    usesIntegratedNav() {
-        const variant = this.resolvedHeaderVariant();
-        return ((variant === 'tabs' && this.parsedTabs().length > 0) ||
-            (variant === 'segment' && this.parsedSegments().length > 0));
-    }
-    closeIconSize() {
-        const size = this.resolvedSize();
-        if (size === 's')
-            return 16;
-        if (size === 'l')
-            return 20;
-        if (size === 'xl')
-            return 24;
-        return 18;
-    }
-    activeTabId() {
-        return (this.getAttribute('selected-tab-id') ||
-            this.internalTabId ||
-            this.getAttribute('default-selected-tab-id') ||
-            this.parsedTabs()[0]?.id ||
-            '');
-    }
-    activeSegmentValue() {
-        return (this.getAttribute('segment-value') ||
-            this.internalSegment ||
-            this.getAttribute('default-segment-value') ||
-            this.parsedSegments()[0]?.value ||
-            '');
-    }
-    collectUserChildren() {
-        return Array.from(this.children).filter((child) => !child.hasAttribute('data-wc-internal'));
-    }
-    classifyChildren(children) {
-        const isPart = (child, part, className) => child.classList.contains(className) || child.getAttribute('data-modal-part') === part;
-        const header = children.filter((child) => isPart(child, 'header', 'designbase-wc-modal__header'));
-        const footer = children.filter((child) => isPart(child, 'footer', 'designbase-wc-modal__footer') || child.getAttribute('slot') === 'footer');
-        const body = children.filter((child) => isPart(child, 'body', 'designbase-wc-modal__body'));
-        const rest = children.filter((child) => !header.includes(child) && !footer.includes(child) && !body.includes(child));
-        return { header, body: [...body, ...rest], footer };
-    }
-    getClassifiedChildren() {
-        const fromHost = this.classifyChildren(this.collectUserChildren());
-        if (fromHost.header.length || fromHost.body.length || fromHost.footer.length) {
-            return fromHost;
-        }
-        const header = Array.from(this.headerEl?.children || []).filter((child) => {
-            if (child === this.closeButton || child.classList.contains('designbase-wc-modal__header-row'))
-                return false;
-            return child.getAttribute('data-modal-part') === 'header' || child.classList.contains('designbase-wc-modal__header');
-        });
-        const body = this.collectContentParts('body');
-        const footer = this.collectContentParts('footer');
-        return { header, body, footer };
-    }
-    isBodyPart(child) {
-        return child.classList.contains('designbase-wc-modal__body') || child.getAttribute('data-modal-part') === 'body';
-    }
-    isFooterPart(child) {
-        return (child.classList.contains('designbase-wc-modal__footer') ||
-            child.getAttribute('data-modal-part') === 'footer' ||
-            child.getAttribute('slot') === 'footer');
-    }
-    collectContentParts(kind) {
-        if (!this.contentEl)
-            return [];
-        const matches = Array.from(this.contentEl.children).filter((child) => kind === 'body' ? this.isBodyPart(child) : this.isFooterPart(child));
-        if (matches.length > 0)
-            return matches;
-        return Array.from(this.children).filter((child) => kind === 'body' ? this.isBodyPart(child) : this.isFooterPart(child));
-    }
-    placeContentParts(kind, parts) {
-        if (!this.contentEl)
-            return;
-        parts.forEach((part) => {
-            if (part.parentElement === this.contentEl)
-                return;
-            if (kind === 'body') {
-                const anchor = this.contentEl.querySelector(':scope > .designbase-wc-modal__footer, :scope > [data-modal-part="footer"]') ||
-                    null;
-                this.contentEl.insertBefore(part, anchor);
-                return;
-            }
-            this.contentEl.append(part);
-        });
-    }
-    restorePartsToHost() {
-        if (!this.contentEl)
-            return;
-        Array.from(this.contentEl.children)
-            .filter((child) => !child.classList.contains('designbase-wc-modal__integrated-content') &&
-            !child.hasAttribute('data-wc-internal'))
-            .forEach((child) => {
-            if (child.parentElement !== this) {
-                this.append(child);
-            }
-        });
-    }
-    bindFooterActions() {
-        if (!this.contentEl || this.contentEl.dataset.modalActionsBound === 'true')
-            return;
-        this.contentEl.dataset.modalActionsBound = 'true';
-        const handleClose = (event) => {
-            const target = event.target?.closest('[data-modal-close]');
-            if (target && this.contentEl?.contains(target)) {
-                this.close();
-            }
-        };
-        this.contentEl.addEventListener('click', handleClose);
-        this.contentEl.addEventListener('db-click', handleClose);
-    }
-    ensureStructure() {
-        if (!this.root) {
-            this.root = document.createElement('div');
-            this.root.className = 'designbase-wc-modal__overlay';
-            this.root.setAttribute('data-wc-internal', '');
-            this.root.addEventListener('click', (event) => {
-                if (event.target === this.root && this.getAttribute('close-on-outside-click') !== 'false') {
-                    this.close();
-                }
-            });
-            this.panel = document.createElement('div');
-            this.panel.className = 'designbase-wc-modal';
-            this.panel.setAttribute('role', 'dialog');
-            this.panel.setAttribute('aria-modal', 'true');
-            this.panel.addEventListener('click', (event) => event.stopPropagation());
-            this.headerEl = document.createElement('div');
-            this.headerEl.className = 'designbase-wc-modal__header';
-            this.headerContentEl = document.createElement('div');
-            this.headerContentEl.className = 'designbase-wc-modal__header-content';
-            this.titleEl = document.createElement('h2');
-            this.titleEl.className = 'designbase-wc-modal__title';
-            this.titleEl.id = this.titleId;
-            this.closeButton = document.createElement('button');
-            this.closeButton.type = 'button';
-            this.closeButton.className = 'designbase-wc-modal__close-button';
-            this.closeButton.setAttribute('aria-label', '모달 닫기');
-            this.closeButton.addEventListener('click', () => this.close());
-            this.navEl = document.createElement('div');
-            this.navEl.className = 'designbase-wc-modal__header-nav';
-            this.contentEl = document.createElement('div');
-            this.contentEl.className = 'designbase-wc-modal__content';
-            this.panel.append(this.headerEl, this.contentEl);
-            this.root.append(this.panel);
-        }
-    }
-    renderCloseButton() {
-        if (!this.closeButton)
-            return;
-        const iconSize = this.closeIconSize();
-        this.closeButton.replaceChildren(createDbIcon('close', iconSize));
-        this.closeButton.hidden = this.getAttribute('show-close-button') === 'false';
-    }
-    renderDefaultHeader(customHeader) {
-        if (!this.headerEl || !this.headerContentEl || !this.titleEl || !this.closeButton)
-            return;
-        this.headerEl.className = 'designbase-wc-modal__header';
-        this.headerEl.replaceChildren();
-        if (customHeader.length > 0) {
-            customHeader.forEach((child) => this.headerEl.append(child));
-            if (this.getAttribute('show-close-button') !== 'false') {
-                this.headerEl.append(this.closeButton);
-            }
-            return;
-        }
-        const title = this.getAttribute('title') || '';
-        this.titleEl.textContent = title;
-        this.titleEl.hidden = !title;
-        this.headerContentEl.replaceChildren();
-        if (title)
-            this.headerContentEl.append(this.titleEl);
-        this.renderCloseButton();
-        this.headerEl.append(this.headerContentEl);
-        if (this.getAttribute('show-close-button') !== 'false') {
-            this.headerEl.append(this.closeButton);
-        }
-        if (this.panel) {
-            if (title)
-                this.panel.setAttribute('aria-labelledby', this.titleId);
-            else
-                this.panel.removeAttribute('aria-labelledby');
-        }
-    }
-    renderNavHeader() {
-        if (!this.headerEl || !this.headerContentEl || !this.titleEl || !this.closeButton || !this.navEl)
-            return;
-        const variant = this.resolvedHeaderVariant();
-        const tabs = this.parsedTabs();
-        const segments = this.parsedSegments();
-        const navSize = NAV_SIZES.includes((this.getAttribute('nav-size') || 'm'))
-            ? this.getAttribute('nav-size') || 'm'
-            : 's';
-        this.headerEl.className = [
-            'designbase-wc-modal__header',
-            variant === 'tabs' && 'designbase-wc-modal__header--tabs',
-            variant === 'segment' && 'designbase-wc-modal__header--segment',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const title = this.getAttribute('title') || '';
-        this.titleEl.textContent = title;
-        this.titleEl.hidden = !title;
-        this.headerContentEl.replaceChildren();
-        if (title)
-            this.headerContentEl.append(this.titleEl);
-        this.renderCloseButton();
-        const headerRow = document.createElement('div');
-        headerRow.className = 'designbase-wc-modal__header-row';
-        headerRow.append(this.headerContentEl);
-        if (this.getAttribute('show-close-button') !== 'false') {
-            headerRow.append(this.closeButton);
-        }
-        this.headerEl.replaceChildren(headerRow);
-        this.navEl.replaceChildren();
-        if (variant === 'tabs' && tabs.length > 0) {
-            const tabsComponent = document.createElement('db-tabs');
-            tabsComponent.setAttribute('size', navSize);
-            tabsComponent.setAttribute('items', JSON.stringify(tabs.map((tab) => ({ id: tab.id, label: tab.label, disabled: tab.disabled }))));
-            tabsComponent.setAttribute('selected-id', this.activeTabId());
-            tabsComponent.addEventListener('db-change', (event) => {
-                const tabId = event.detail?.id;
-                if (!tabId)
-                    return;
-                if (!this.hasAttribute('selected-tab-id')) {
-                    this.internalTabId = tabId;
-                }
-                this.dispatchEvent(new CustomEvent('db-tab-change', {
-                    detail: { tabId },
-                    bubbles: true,
-                    composed: true,
-                }));
-                this.renderBodyContent(this.getClassifiedChildren().body);
-            });
-            this.tabsEl = tabsComponent;
-            this.navEl.append(tabsComponent);
-            this.headerEl.append(this.navEl);
-        }
-        if (variant === 'segment' && segments.length > 0) {
-            const segmentComponent = document.createElement('db-segment-control');
-            segmentComponent.setAttribute('size', navSize);
-            segmentComponent.setAttribute('options', JSON.stringify(segments.map((segment) => ({ value: segment.value, label: segment.label, disabled: segment.disabled }))));
-            segmentComponent.setAttribute('value', this.activeSegmentValue());
-            if (this.getAttribute('segment-full-width') !== 'false') {
-                segmentComponent.setAttribute('full-width', '');
-            }
-            segmentComponent.addEventListener('db-change', (event) => {
-                const value = event.detail?.value;
-                if (!value)
-                    return;
-                if (!this.hasAttribute('segment-value')) {
-                    this.internalSegment = value;
-                }
-                this.dispatchEvent(new CustomEvent('db-segment-change', {
-                    detail: { value },
-                    bubbles: true,
-                    composed: true,
-                }));
-                this.renderBodyContent(this.getClassifiedChildren().body);
-            });
-            this.segmentEl = segmentComponent;
-            this.navEl.append(segmentComponent);
-            this.headerEl.append(this.navEl);
-        }
-        if (this.panel) {
-            if (title)
-                this.panel.setAttribute('aria-labelledby', this.titleId);
-            else
-                this.panel.removeAttribute('aria-labelledby');
-        }
-    }
-    renderHeader(customHeader) {
-        if (!this.headerEl)
-            return;
-        if (customHeader.length > 0) {
-            this.headerEl.hidden = false;
-            this.renderDefaultHeader(customHeader);
-            return;
-        }
-        if (this.usesIntegratedNav()) {
-            this.headerEl.hidden = false;
-            this.renderNavHeader();
-            return;
-        }
-        const title = this.getAttribute('title') || '';
-        if (!title) {
-            this.headerEl.hidden = true;
-            return;
-        }
-        this.headerEl.hidden = false;
-        this.renderDefaultHeader([]);
-    }
-    renderBodyContent(userBody = []) {
-        if (!this.contentEl)
-            return;
-        let integratedEl = this.contentEl.querySelector(':scope > .designbase-wc-modal__integrated-content');
-        let integratedText = '';
-        if (this.usesIntegratedNav()) {
-            const variant = this.resolvedHeaderVariant();
-            if (variant === 'tabs') {
-                const tab = this.parsedTabs().find((item) => item.id === this.activeTabId());
-                integratedText = tab?.content || '';
-            }
-            if (variant === 'segment') {
-                const segment = this.parsedSegments().find((item) => item.value === this.activeSegmentValue());
-                integratedText = segment?.content || '';
-            }
-        }
-        if (integratedText) {
-            if (!integratedEl) {
-                integratedEl = document.createElement('div');
-                integratedEl.className = 'designbase-wc-modal__integrated-content designbase-wc-modal__body';
-                this.contentEl.insertBefore(integratedEl, this.contentEl.firstChild);
-            }
-            integratedEl.textContent = integratedText;
-        }
-        else {
-            integratedEl?.remove();
-        }
-        const bodyWrappers = userBody.filter((child) => this.isBodyPart(child));
-        const looseBody = userBody.filter((child) => !this.isBodyPart(child) && !this.isFooterPart(child));
-        this.placeContentParts('body', bodyWrappers.length > 0 ? bodyWrappers : looseBody);
-    }
-    renderFooter(footerChildren) {
-        if (!this.contentEl)
-            return;
-        const footerWrappers = footerChildren.filter((child) => this.isFooterPart(child));
-        const looseFooter = footerChildren.filter((child) => !this.isFooterPart(child) && !this.isBodyPart(child));
-        const footerParts = footerWrappers.length > 0 ? footerWrappers : looseFooter;
-        this.placeContentParts('footer', footerParts);
-        footerParts.forEach((part) => {
-            part.hidden = false;
-        });
-        this.bindFooterActions();
-    }
-    render() {
-        this.ensureStructure();
-        const { header, body, footer } = this.getClassifiedChildren();
-        SIZES.forEach((size) => this.panel?.classList.remove(`designbase-wc-modal--${size}`));
-        this.panel?.classList.add(`designbase-wc-modal--${this.resolvedSize()}`);
-        this.renderHeader(header);
-        this.renderBodyContent(body);
-        this.renderFooter(footer);
-    }
-    syncVisibility() {
-        if (!this.root || !this.panel)
-            return;
-        if (this.open) {
-            this.root.setAttribute('data-state', 'entering');
-            this.panel.setAttribute('data-state', 'entering');
-            requestAnimationFrame(() => {
-                void this.panel?.offsetHeight;
-                requestAnimationFrame(() => {
-                    if (!this.open || !this.root || !this.panel)
-                        return;
-                    this.root.setAttribute('data-state', 'entered');
-                    this.panel.setAttribute('data-state', 'entered');
-                });
-            });
-            return;
-        }
-        this.root.setAttribute('data-state', 'exiting');
-        this.panel.setAttribute('data-state', 'exiting');
-    }
-    syncOpenState() {
-        if (this.open) {
-            this.render();
-            if (this.root && !this.root.isConnected) {
-                document.body.append(this.root);
-            }
-            document.body.style.overflow = 'hidden';
-            this.isMounted = true;
-            this.syncVisibility();
-            return;
-        }
-        if (!this.isMounted)
-            return;
-        this.syncVisibility();
-        document.body.style.overflow = '';
-        if (this.exitTimerId)
-            clearTimeout(this.exitTimerId);
-        this.exitTimerId = window.setTimeout(() => {
-            if (!this.open)
-                this.teardown();
-        }, 200);
-    }
-    teardown() {
-        this.restorePartsToHost();
-        this.root?.remove();
-        this.isMounted = false;
-        document.body.style.overflow = '';
-    }
-    close() {
-        this.open = false;
-        this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
-    }
-}
-if (!customElements.get('db-modal')) {
-    customElements.define('db-modal', DbModal);
-}
-
-export { DbModal };
+import{createDbIcon as t}from"./db-icons.js";const e=["s","m","l","xl","full"],s=["default","tabs","segment"],i=["s","m","l"];class DbModal extends HTMLElement{constructor(){super(...arguments),this.titleId=`db-modal-title-${Math.random().toString(36).slice(2,9)}`,this.isMounted=!1,this.internalTabId="",this.internalSegment="",this.exitTimerId=null,this.handleDocumentKeyDown=t=>{"Escape"===t.key&&this.open&&"false"!==this.getAttribute("close-on-escape")&&(t.preventDefault(),this.close())}}static get observedAttributes(){return["open","title","size","header-variant","tabs","segments","selected-tab-id","default-selected-tab-id","segment-value","default-segment-value","nav-size","segment-full-width","close-on-outside-click","close-on-escape","show-close-button"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open","true"):this.removeAttribute("open")}connectedCallback(){this.classList.add("designbase-wc-modal-host"),document.addEventListener("keydown",this.handleDocumentKeyDown),this.childObserver=new MutationObserver(()=>{this.open&&this.render()}),this.childObserver.observe(this,{childList:!0}),this.syncOpenState()}disconnectedCallback(){this.childObserver?.disconnect(),document.removeEventListener("keydown",this.handleDocumentKeyDown),this.exitTimerId&&clearTimeout(this.exitTimerId),this.teardown()}attributeChangedCallback(t){if(this.isConnected)if("open"!==t){if("selected-tab-id"===t||"segment-value"===t){const t=this.getClassifiedChildren();return this.renderBodyContent(t.body),void this.renderHeader(t.header)}this.render(),this.isMounted&&this.syncVisibility()}else this.syncOpenState()}resolvedSize(){return e.includes(this.size)?this.size:"m"}get size(){return this.getAttribute("size")||"m"}set size(t){t?this.setAttribute("size",t):this.removeAttribute("size")}resolvedHeaderVariant(){const t=this.getAttribute("header-variant")||"default";return s.includes(t)?t:"default"}parsedTabs(){const t=this.getAttribute("tabs");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}parsedSegments(){const t=this.getAttribute("segments");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}usesIntegratedNav(){const t=this.resolvedHeaderVariant();return"tabs"===t&&this.parsedTabs().length>0||"segment"===t&&this.parsedSegments().length>0}closeIconSize(){const t=this.resolvedSize();return"s"===t?16:"l"===t?20:"xl"===t?24:18}activeTabId(){return this.getAttribute("selected-tab-id")||this.internalTabId||this.getAttribute("default-selected-tab-id")||this.parsedTabs()[0]?.id||""}activeSegmentValue(){return this.getAttribute("segment-value")||this.internalSegment||this.getAttribute("default-segment-value")||this.parsedSegments()[0]?.value||""}collectUserChildren(){return Array.from(this.children).filter(t=>!t.hasAttribute("data-wc-internal"))}classifyChildren(t){const isPart=(t,e,s)=>t.classList.contains(s)||t.getAttribute("data-modal-part")===e,e=t.filter(t=>isPart(t,"header","designbase-wc-modal__header")),s=t.filter(t=>isPart(t,"footer","designbase-wc-modal__footer")||"footer"===t.getAttribute("slot")),i=t.filter(t=>isPart(t,"body","designbase-wc-modal__body")),n=t.filter(t=>!e.includes(t)&&!s.includes(t)&&!i.includes(t));return{header:e,body:[...i,...n],footer:s}}getClassifiedChildren(){const t=this.classifyChildren(this.collectUserChildren());if(t.header.length||t.body.length||t.footer.length)return t;return{header:Array.from(this.headerEl?.children||[]).filter(t=>t!==this.closeButton&&!t.classList.contains("designbase-wc-modal__header-row")&&("header"===t.getAttribute("data-modal-part")||t.classList.contains("designbase-wc-modal__header"))),body:this.collectContentParts("body"),footer:this.collectContentParts("footer")}}isBodyPart(t){return t.classList.contains("designbase-wc-modal__body")||"body"===t.getAttribute("data-modal-part")}isFooterPart(t){return t.classList.contains("designbase-wc-modal__footer")||"footer"===t.getAttribute("data-modal-part")||"footer"===t.getAttribute("slot")}collectContentParts(t){if(!this.contentEl)return[];const e=Array.from(this.contentEl.children).filter(e=>"body"===t?this.isBodyPart(e):this.isFooterPart(e));return e.length>0?e:Array.from(this.children).filter(e=>"body"===t?this.isBodyPart(e):this.isFooterPart(e))}placeContentParts(t,e){this.contentEl&&e.forEach(e=>{if(e.parentElement!==this.contentEl){if("body"===t){const t=this.contentEl.querySelector(':scope > .designbase-wc-modal__footer, :scope > [data-modal-part="footer"]')||null;return void this.contentEl.insertBefore(e,t)}this.contentEl.append(e)}})}restorePartsToHost(){this.contentEl&&Array.from(this.contentEl.children).filter(t=>!t.classList.contains("designbase-wc-modal__integrated-content")&&!t.hasAttribute("data-wc-internal")).forEach(t=>{t.parentElement!==this&&this.append(t)})}bindFooterActions(){if(!this.contentEl||"true"===this.contentEl.dataset.modalActionsBound)return;this.contentEl.dataset.modalActionsBound="true";const handleClose=t=>{const e=t.target?.closest("[data-modal-close]");e&&this.contentEl?.contains(e)&&this.close()};this.contentEl.addEventListener("click",handleClose),this.contentEl.addEventListener("db-click",handleClose)}ensureStructure(){this.root||(this.root=document.createElement("div"),this.root.className="designbase-wc-modal__overlay",this.root.setAttribute("data-wc-internal",""),this.root.addEventListener("click",t=>{t.target===this.root&&"false"!==this.getAttribute("close-on-outside-click")&&this.close()}),this.panel=document.createElement("div"),this.panel.className="designbase-wc-modal",this.panel.setAttribute("role","dialog"),this.panel.setAttribute("aria-modal","true"),this.panel.addEventListener("click",t=>t.stopPropagation()),this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-modal__header",this.headerContentEl=document.createElement("div"),this.headerContentEl.className="designbase-wc-modal__header-content",this.titleEl=document.createElement("h2"),this.titleEl.className="designbase-wc-modal__title",this.titleEl.id=this.titleId,this.closeButton=document.createElement("button"),this.closeButton.type="button",this.closeButton.className="designbase-wc-modal__close-button",this.closeButton.setAttribute("aria-label","모달 닫기"),this.closeButton.addEventListener("click",()=>this.close()),this.navEl=document.createElement("div"),this.navEl.className="designbase-wc-modal__header-nav",this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-modal__content",this.panel.append(this.headerEl,this.contentEl),this.root.append(this.panel))}renderCloseButton(){if(!this.closeButton)return;const e=this.closeIconSize();this.closeButton.replaceChildren(t("close",e)),this.closeButton.hidden="false"===this.getAttribute("show-close-button")}renderDefaultHeader(t){if(!(this.headerEl&&this.headerContentEl&&this.titleEl&&this.closeButton))return;if(this.headerEl.className="designbase-wc-modal__header",this.headerEl.replaceChildren(),t.length>0)return t.forEach(t=>this.headerEl.append(t)),void("false"!==this.getAttribute("show-close-button")&&this.headerEl.append(this.closeButton));const e=this.getAttribute("title")||"";this.titleEl.textContent=e,this.titleEl.hidden=!e,this.headerContentEl.replaceChildren(),e&&this.headerContentEl.append(this.titleEl),this.renderCloseButton(),this.headerEl.append(this.headerContentEl),"false"!==this.getAttribute("show-close-button")&&this.headerEl.append(this.closeButton),this.panel&&(e?this.panel.setAttribute("aria-labelledby",this.titleId):this.panel.removeAttribute("aria-labelledby"))}renderNavHeader(){if(!(this.headerEl&&this.headerContentEl&&this.titleEl&&this.closeButton&&this.navEl))return;const t=this.resolvedHeaderVariant(),e=this.parsedTabs(),s=this.parsedSegments(),n=i.includes(this.getAttribute("nav-size")||"m")?this.getAttribute("nav-size")||"m":"s";this.headerEl.className=["designbase-wc-modal__header","tabs"===t&&"designbase-wc-modal__header--tabs","segment"===t&&"designbase-wc-modal__header--segment"].filter(Boolean).join(" ");const a=this.getAttribute("title")||"";this.titleEl.textContent=a,this.titleEl.hidden=!a,this.headerContentEl.replaceChildren(),a&&this.headerContentEl.append(this.titleEl),this.renderCloseButton();const r=document.createElement("div");if(r.className="designbase-wc-modal__header-row",r.append(this.headerContentEl),"false"!==this.getAttribute("show-close-button")&&r.append(this.closeButton),this.headerEl.replaceChildren(r),this.navEl.replaceChildren(),"tabs"===t&&e.length>0){const t=document.createElement("db-tabs");t.setAttribute("size",n),t.setAttribute("items",JSON.stringify(e.map(t=>({id:t.id,label:t.label,disabled:t.disabled})))),t.setAttribute("selected-id",this.activeTabId()),t.addEventListener("db-change",t=>{const e=t.detail?.id;e&&(this.hasAttribute("selected-tab-id")||(this.internalTabId=e),this.dispatchEvent(new CustomEvent("db-tab-change",{detail:{tabId:e},bubbles:!0,composed:!0})),this.renderBodyContent(this.getClassifiedChildren().body))}),this.tabsEl=t,this.navEl.append(t),this.headerEl.append(this.navEl)}if("segment"===t&&s.length>0){const t=document.createElement("db-segment-control");t.setAttribute("size",n),t.setAttribute("options",JSON.stringify(s.map(t=>({value:t.value,label:t.label,disabled:t.disabled})))),t.setAttribute("value",this.activeSegmentValue()),"false"!==this.getAttribute("segment-full-width")&&t.setAttribute("full-width",""),t.addEventListener("db-change",t=>{const e=t.detail?.value;e&&(this.hasAttribute("segment-value")||(this.internalSegment=e),this.dispatchEvent(new CustomEvent("db-segment-change",{detail:{value:e},bubbles:!0,composed:!0})),this.renderBodyContent(this.getClassifiedChildren().body))}),this.segmentEl=t,this.navEl.append(t),this.headerEl.append(this.navEl)}this.panel&&(a?this.panel.setAttribute("aria-labelledby",this.titleId):this.panel.removeAttribute("aria-labelledby"))}renderHeader(t){if(!this.headerEl)return;if(t.length>0)return this.headerEl.hidden=!1,void this.renderDefaultHeader(t);if(this.usesIntegratedNav())return this.headerEl.hidden=!1,void this.renderNavHeader();this.getAttribute("title")||""?(this.headerEl.hidden=!1,this.renderDefaultHeader([])):this.headerEl.hidden=!0}renderBodyContent(t=[]){if(!this.contentEl)return;let e=this.contentEl.querySelector(":scope > .designbase-wc-modal__integrated-content"),s="";if(this.usesIntegratedNav()){const t=this.resolvedHeaderVariant();if("tabs"===t){const t=this.parsedTabs().find(t=>t.id===this.activeTabId());s=t?.content||""}if("segment"===t){const t=this.parsedSegments().find(t=>t.value===this.activeSegmentValue());s=t?.content||""}}s?(e||(e=document.createElement("div"),e.className="designbase-wc-modal__integrated-content designbase-wc-modal__body",this.contentEl.insertBefore(e,this.contentEl.firstChild)),e.textContent=s):e?.remove();const i=t.filter(t=>this.isBodyPart(t)),n=t.filter(t=>!this.isBodyPart(t)&&!this.isFooterPart(t));this.placeContentParts("body",i.length>0?i:n)}renderFooter(t){if(!this.contentEl)return;const e=t.filter(t=>this.isFooterPart(t)),s=t.filter(t=>!this.isFooterPart(t)&&!this.isBodyPart(t)),i=e.length>0?e:s;this.placeContentParts("footer",i),i.forEach(t=>{t.hidden=!1}),this.bindFooterActions()}render(){this.ensureStructure();const{header:t,body:s,footer:i}=this.getClassifiedChildren();e.forEach(t=>this.panel?.classList.remove(`designbase-wc-modal--${t}`)),this.panel?.classList.add(`designbase-wc-modal--${this.resolvedSize()}`),this.renderHeader(t),this.renderBodyContent(s),this.renderFooter(i)}syncVisibility(){if(this.root&&this.panel){if(this.open)return this.root.setAttribute("data-state","entering"),this.panel.setAttribute("data-state","entering"),void requestAnimationFrame(()=>{this.panel,requestAnimationFrame(()=>{this.open&&this.root&&this.panel&&(this.root.setAttribute("data-state","entered"),this.panel.setAttribute("data-state","entered"))})});this.root.setAttribute("data-state","exiting"),this.panel.setAttribute("data-state","exiting")}}syncOpenState(){if(this.open)return this.render(),this.root&&!this.root.isConnected&&document.body.append(this.root),document.body.style.overflow="hidden",this.isMounted=!0,void this.syncVisibility();this.isMounted&&(this.syncVisibility(),document.body.style.overflow="",this.exitTimerId&&clearTimeout(this.exitTimerId),this.exitTimerId=window.setTimeout(()=>{this.open||this.teardown()},200))}teardown(){this.restorePartsToHost(),this.root?.remove(),this.isMounted=!1,document.body.style.overflow=""}close(){this.open=!1,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}}customElements.get("db-modal")||customElements.define("db-modal",DbModal);export{DbModal};