@designbasekorea/ui-wc 0.5.6 → 0.6.1

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

@@ -1,372 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const SIZES = ['s', 'm', 'l', 'xl'];
-class DbLightbox extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.portalEl = null;
-        this.imageEl = null;
-        this.loadingEl = null;
-        this.errorEl = null;
-        this.counterBadge = null;
-        this.prevNav = null;
-        this.nextNav = null;
-        this.currentIndex = 0;
-        this.imageLoaded = false;
-        this.imageError = false;
-        this.keydownHandler = null;
-        this.boundSrc = '';
-        this.thumbnailSignature = '';
-        this.handleImageLoad = () => {
-            this.imageLoaded = true;
-            this.imageError = false;
-            this.syncImageLayers();
-        };
-        this.handleImageError = () => {
-            this.imageLoaded = false;
-            this.imageError = true;
-            this.syncImageLayers();
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'images',
-            'current-index',
-            'size',
-            'open',
-            'enable-keyboard',
-            'show-thumbnails',
-            'show-counter',
-            'show-close-button',
-            'show-navigation-buttons',
-            'show-toolbar',
-            'close-on-backdrop-click',
-            'close-on-escape',
-        ];
-    }
-    connectedCallback() {
-        this.classList.add('designbase-wc-lightbox-host');
-        this.syncOpenState();
-    }
-    disconnectedCallback() {
-        this.unmount();
-    }
-    attributeChangedCallback(name, _old, newValue) {
-        if (name === 'current-index') {
-            this.currentIndex = Number(newValue || 0);
-            this.resetImageState();
-            if (this.open)
-                this.refreshView();
-            return;
-        }
-        if (name === 'open') {
-            this.syncOpenState();
-            return;
-        }
-        if (name === 'images' && this.open) {
-            this.refreshView();
-        }
-    }
-    get open() {
-        return this.hasAttribute('open') && this.getAttribute('open') !== 'false';
-    }
-    set open(value) {
-        if (value)
-            this.setAttribute('open', '');
-        else
-            this.removeAttribute('open');
-    }
-    parseImages() {
-        const raw = this.getAttribute('images');
-        if (!raw)
-            return [];
-        try {
-            const parsed = JSON.parse(raw);
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    getCurrentImage() {
-        return this.parseImages()[this.currentIndex] || null;
-    }
-    resetImageState() {
-        this.imageLoaded = false;
-        this.imageError = false;
-        this.boundSrc = '';
-    }
-    close() {
-        this.open = false;
-        this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
-    }
-    goTo(index) {
-        const images = this.parseImages();
-        if (!images.length)
-            return;
-        const next = ((index % images.length) + images.length) % images.length;
-        if (next === this.currentIndex)
-            return;
-        this.currentIndex = next;
-        this.setAttribute('current-index', String(next));
-        this.resetImageState();
-        this.refreshView();
-        this.dispatchEvent(new CustomEvent('db-image-change', {
-            bubbles: true,
-            composed: true,
-            detail: { index: next },
-        }));
-    }
-    createIconButton(className, icon, label, onClick, options = {}) {
-        const button = document.createElement('db-button');
-        button.className = className;
-        button.setAttribute('variant', options.variant || 'ghost');
-        button.setAttribute('size', options.size || 'm');
-        button.setAttribute('icon-only', '');
-        button.setAttribute('start-icon', icon);
-        button.setAttribute('aria-label', label);
-        if (options.radius)
-            button.setAttribute('radius', options.radius);
-        button.addEventListener('db-click', onClick);
-        return button;
-    }
-    buildPortal() {
-        const size = this.getAttribute('size') || 'l';
-        const sizeClass = SIZES.includes(size) ? size : 'l';
-        const root = document.createElement('div');
-        root.className = `designbase-wc-lightbox designbase-wc-lightbox--size-${sizeClass}`;
-        root.setAttribute('data-wc-internal', '');
-        const overlay = document.createElement('div');
-        overlay.className = 'designbase-wc-lightbox__overlay';
-        const modal = document.createElement('div');
-        modal.className = 'designbase-wc-lightbox__modal';
-        const header = document.createElement('div');
-        header.className = 'designbase-wc-lightbox__header';
-        const titleWrap = document.createElement('div');
-        titleWrap.className = 'designbase-wc-lightbox__title';
-        const title = document.createElement('h3');
-        title.className = 'designbase-wc-lightbox__title-text';
-        const counter = document.createElement('db-badge');
-        counter.className = 'designbase-wc-lightbox__counter';
-        counter.setAttribute('size', 's');
-        counter.setAttribute('variant', 'secondary');
-        counter.setAttribute('badge-style', 'text');
-        titleWrap.append(title, counter);
-        const headerActions = document.createElement('div');
-        headerActions.className = 'designbase-wc-lightbox__header-actions';
-        if (this.getAttribute('show-close-button') !== 'false') {
-            headerActions.append(this.createIconButton('designbase-wc-lightbox__close-button', 'close', '닫기', () => this.close()));
-        }
-        header.append(titleWrap, headerActions);
-        const content = document.createElement('div');
-        content.className = 'designbase-wc-lightbox__content';
-        this.prevNav = this.createIconButton('designbase-wc-lightbox__nav-button designbase-wc-lightbox__nav-button--prev', 'chevron-left', '이전 이미지', () => this.goTo(this.currentIndex - 1), { radius: 'pill', size: 'l' });
-        this.nextNav = this.createIconButton('designbase-wc-lightbox__nav-button designbase-wc-lightbox__nav-button--next', 'chevron-right', '다음 이미지', () => this.goTo(this.currentIndex + 1), { radius: 'pill', size: 'l' });
-        const imageContainer = document.createElement('div');
-        imageContainer.className = 'designbase-wc-lightbox__image-container';
-        this.errorEl = document.createElement('div');
-        this.errorEl.className = 'designbase-wc-lightbox__error';
-        this.errorEl.hidden = true;
-        const errorIcon = createDbIcon('gallery', 24);
-        errorIcon.classList.add('designbase-wc-lightbox__error-icon');
-        this.errorEl.append(errorIcon);
-        const errorText = document.createElement('p');
-        errorText.className = 'designbase-wc-lightbox__error-text';
-        errorText.textContent = '이미지를 불러올 수 없습니다';
-        this.errorEl.append(errorText);
-        this.loadingEl = document.createElement('div');
-        this.loadingEl.className = 'designbase-wc-lightbox__loading';
-        const spinner = document.createElement('db-spinner');
-        spinner.setAttribute('type', 'circular');
-        spinner.setAttribute('size', 'm');
-        spinner.setAttribute('show-label', '');
-        spinner.setAttribute('label', '이미지 로딩 중...');
-        this.loadingEl.append(spinner);
-        this.imageEl = document.createElement('img');
-        this.imageEl.className = 'designbase-wc-lightbox__image';
-        this.imageEl.draggable = false;
-        this.imageEl.addEventListener('load', this.handleImageLoad);
-        this.imageEl.addEventListener('error', this.handleImageError);
-        imageContainer.append(this.errorEl, this.loadingEl, this.imageEl);
-        const description = document.createElement('div');
-        description.className = 'designbase-wc-lightbox__description';
-        const descriptionText = document.createElement('p');
-        descriptionText.className = 'designbase-wc-lightbox__description-text';
-        description.append(descriptionText);
-        if (this.getAttribute('show-navigation-buttons') !== 'false') {
-            content.append(this.prevNav, this.nextNav);
-        }
-        content.append(imageContainer, description);
-        const thumbnails = document.createElement('div');
-        thumbnails.className = 'designbase-wc-lightbox__thumbnails';
-        const thumbnailsContainer = document.createElement('div');
-        thumbnailsContainer.className = 'designbase-wc-lightbox__thumbnails-container';
-        thumbnails.append(thumbnailsContainer);
-        modal.append(header, content, thumbnails);
-        overlay.append(modal);
-        root.append(overlay);
-        overlay.addEventListener('click', (event) => {
-            if (event.target === overlay && this.getAttribute('close-on-backdrop-click') !== 'false') {
-                this.close();
-            }
-        });
-        this.portalEl = root;
-        this.counterBadge = counter;
-        return root;
-    }
-    syncImageLayers() {
-        if (!this.imageEl || !this.loadingEl || !this.errorEl)
-            return;
-        this.imageEl.classList.toggle('designbase-wc-lightbox__image--loaded', this.imageLoaded);
-        this.loadingEl.hidden = this.imageLoaded || this.imageError;
-        this.errorEl.hidden = !this.imageError;
-        this.imageEl.hidden = this.imageError;
-    }
-    updateThumbnails() {
-        if (!this.portalEl)
-            return;
-        const thumbnailsContainer = this.portalEl.querySelector('.designbase-wc-lightbox__thumbnails-container');
-        const thumbnailsWrap = this.portalEl.querySelector('.designbase-wc-lightbox__thumbnails');
-        if (!thumbnailsContainer || !thumbnailsWrap)
-            return;
-        const images = this.parseImages();
-        const showThumbnails = this.getAttribute('show-thumbnails') !== 'false' && images.length > 1;
-        thumbnailsWrap.hidden = !showThumbnails;
-        if (!showThumbnails) {
-            thumbnailsContainer.replaceChildren();
-            this.thumbnailSignature = '';
-            return;
-        }
-        const signature = images.map((image) => image.thumbnail || image.src).join('|');
-        // 이미지 목록이 그대로면 재생성하지 않고 활성 상태만 갱신 → 썸네일 재로딩/깜빡임 방지
-        if (signature === this.thumbnailSignature && thumbnailsContainer.childElementCount === images.length) {
-            Array.from(thumbnailsContainer.children).forEach((child, index) => {
-                const button = child;
-                const active = index === this.currentIndex;
-                button.classList.toggle('designbase-wc-lightbox__thumbnail--active', active);
-                button.setAttribute('aria-current', active ? 'true' : 'false');
-            });
-            return;
-        }
-        this.thumbnailSignature = signature;
-        thumbnailsContainer.replaceChildren();
-        images.forEach((image, index) => {
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = [
-                'designbase-wc-lightbox__thumbnail',
-                index === this.currentIndex && 'designbase-wc-lightbox__thumbnail--active',
-            ]
-                .filter(Boolean)
-                .join(' ');
-            button.title = image.title || `이미지 ${index + 1}`;
-            button.setAttribute('aria-label', image.alt || image.title || `이미지 ${index + 1}`);
-            button.setAttribute('aria-current', index === this.currentIndex ? 'true' : 'false');
-            const thumb = document.createElement('img');
-            thumb.className = 'designbase-wc-lightbox__thumbnail-image';
-            thumb.src = image.thumbnail || image.src;
-            thumb.alt = '';
-            thumb.draggable = false;
-            thumb.loading = 'lazy';
-            thumb.decoding = 'async';
-            button.append(thumb);
-            button.addEventListener('click', () => this.goTo(index));
-            thumbnailsContainer.append(button);
-        });
-    }
-    loadCurrentImage() {
-        if (!this.imageEl)
-            return;
-        const image = this.getCurrentImage();
-        if (!image?.src) {
-            this.imageEl.removeAttribute('src');
-            this.resetImageState();
-            this.syncImageLayers();
-            return;
-        }
-        if (this.boundSrc !== image.src) {
-            this.boundSrc = image.src;
-            this.resetImageState();
-            this.imageEl.src = image.src;
-            this.imageEl.alt = image.alt || image.title || `이미지 ${this.currentIndex + 1}`;
-            this.syncImageLayers();
-            if (this.imageEl.complete && this.imageEl.naturalWidth > 0) {
-                this.handleImageLoad();
-            }
-        }
-    }
-    refreshView() {
-        if (!this.portalEl)
-            return;
-        const image = this.getCurrentImage();
-        const images = this.parseImages();
-        const title = this.portalEl.querySelector('.designbase-wc-lightbox__title-text');
-        const descriptionText = this.portalEl.querySelector('.designbase-wc-lightbox__description-text');
-        const description = this.portalEl.querySelector('.designbase-wc-lightbox__description');
-        if (title) {
-            title.textContent = image?.title || '';
-            title.hidden = !image?.title;
-        }
-        if (this.counterBadge) {
-            const showCounter = this.getAttribute('show-counter') !== 'false';
-            const text = showCounter && images.length > 1 ? `${this.currentIndex + 1} / ${images.length}` : '';
-            this.counterBadge.textContent = text;
-            this.counterBadge.hidden = !text;
-        }
-        if (description && descriptionText) {
-            descriptionText.textContent = image?.description || '';
-            description.hidden = !image?.description;
-        }
-        const showNav = this.getAttribute('show-navigation-buttons') !== 'false' && images.length > 1;
-        if (this.prevNav)
-            this.prevNav.hidden = !showNav;
-        if (this.nextNav)
-            this.nextNav.hidden = !showNav;
-        this.loadCurrentImage();
-        this.updateThumbnails();
-    }
-    mount() {
-        if (!this.portalEl) {
-            this.portalEl = this.buildPortal();
-        }
-        if (!this.portalEl.isConnected) {
-            document.body.append(this.portalEl);
-        }
-        document.body.style.overflow = 'hidden';
-        if (!this.keydownHandler) {
-            this.keydownHandler = (event) => {
-                if (!this.open || this.getAttribute('enable-keyboard') === 'false')
-                    return;
-                if (event.key === 'Escape' && this.getAttribute('close-on-escape') !== 'false') {
-                    event.preventDefault();
-                    this.close();
-                }
-                if (event.key === 'ArrowLeft')
-                    this.goTo(this.currentIndex - 1);
-                if (event.key === 'ArrowRight')
-                    this.goTo(this.currentIndex + 1);
-            };
-            document.addEventListener('keydown', this.keydownHandler);
-        }
-        this.currentIndex = Number(this.getAttribute('current-index') || 0);
-        this.refreshView();
-    }
-    unmount() {
-        this.portalEl?.remove();
-        document.body.style.overflow = '';
-        if (this.keydownHandler) {
-            document.removeEventListener('keydown', this.keydownHandler);
-            this.keydownHandler = null;
-        }
-    }
-    syncOpenState() {
-        if (this.open)
-            this.mount();
-        else
-            this.unmount();
-    }
-}
-if (!customElements.get('db-lightbox'))
-    customElements.define('db-lightbox', DbLightbox);
-
-export { DbLightbox };
+import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l","xl"];class DbLightbox extends HTMLElement{constructor(){super(...arguments),this.portalEl=null,this.imageEl=null,this.loadingEl=null,this.errorEl=null,this.counterBadge=null,this.prevNav=null,this.nextNav=null,this.currentIndex=0,this.imageLoaded=!1,this.imageError=!1,this.keydownHandler=null,this.boundSrc="",this.thumbnailSignature="",this.handleImageLoad=()=>{this.imageLoaded=!0,this.imageError=!1,this.syncImageLayers()},this.handleImageError=()=>{this.imageLoaded=!1,this.imageError=!0,this.syncImageLayers()}}static get observedAttributes(){return["images","current-index","size","open","enable-keyboard","show-thumbnails","show-counter","show-close-button","show-navigation-buttons","show-toolbar","close-on-backdrop-click","close-on-escape"]}connectedCallback(){this.classList.add("designbase-wc-lightbox-host"),this.syncOpenState()}disconnectedCallback(){this.unmount()}attributeChangedCallback(e,t,s){if("current-index"===e)return this.currentIndex=Number(s||0),this.resetImageState(),void(this.open&&this.refreshView());"open"!==e?"images"===e&&this.open&&this.refreshView():this.syncOpenState()}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}parseImages(){const e=this.getAttribute("images");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}getCurrentImage(){return this.parseImages()[this.currentIndex]||null}resetImageState(){this.imageLoaded=!1,this.imageError=!1,this.boundSrc=""}close(){this.open=!1,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}goTo(e){const t=this.parseImages();if(!t.length)return;const s=(e%t.length+t.length)%t.length;s!==this.currentIndex&&(this.currentIndex=s,this.setAttribute("current-index",String(s)),this.resetImageState(),this.refreshView(),this.dispatchEvent(new CustomEvent("db-image-change",{bubbles:!0,composed:!0,detail:{index:s}})))}createIconButton(e,t,s,i,n={}){const a=document.createElement("db-button");return a.className=e,a.setAttribute("variant",n.variant||"ghost"),a.setAttribute("size",n.size||"m"),a.setAttribute("icon-only",""),a.setAttribute("start-icon",t),a.setAttribute("aria-label",s),n.radius&&a.setAttribute("radius",n.radius),a.addEventListener("db-click",i),a}buildPortal(){const s=this.getAttribute("size")||"l",i=t.includes(s)?s:"l",n=document.createElement("div");n.className=`designbase-wc-lightbox designbase-wc-lightbox--size-${i}`,n.setAttribute("data-wc-internal","");const a=document.createElement("div");a.className="designbase-wc-lightbox__overlay";const r=document.createElement("div");r.className="designbase-wc-lightbox__modal";const o=document.createElement("div");o.className="designbase-wc-lightbox__header";const l=document.createElement("div");l.className="designbase-wc-lightbox__title";const h=document.createElement("h3");h.className="designbase-wc-lightbox__title-text";const c=document.createElement("db-badge");c.className="designbase-wc-lightbox__counter",c.setAttribute("size","s"),c.setAttribute("variant","secondary"),c.setAttribute("badge-style","text"),l.append(h,c);const d=document.createElement("div");d.className="designbase-wc-lightbox__header-actions","false"!==this.getAttribute("show-close-button")&&d.append(this.createIconButton("designbase-wc-lightbox__close-button","close","닫기",()=>this.close())),o.append(l,d);const g=document.createElement("div");g.className="designbase-wc-lightbox__content",this.prevNav=this.createIconButton("designbase-wc-lightbox__nav-button designbase-wc-lightbox__nav-button--prev","chevron-left","이전 이미지",()=>this.goTo(this.currentIndex-1),{radius:"pill",size:"l"}),this.nextNav=this.createIconButton("designbase-wc-lightbox__nav-button designbase-wc-lightbox__nav-button--next","chevron-right","다음 이미지",()=>this.goTo(this.currentIndex+1),{radius:"pill",size:"l"});const u=document.createElement("div");u.className="designbase-wc-lightbox__image-container",this.errorEl=document.createElement("div"),this.errorEl.className="designbase-wc-lightbox__error",this.errorEl.hidden=!0;const b=e("gallery",24);b.classList.add("designbase-wc-lightbox__error-icon"),this.errorEl.append(b);const m=document.createElement("p");m.className="designbase-wc-lightbox__error-text",m.textContent="이미지를 불러올 수 없습니다",this.errorEl.append(m),this.loadingEl=document.createElement("div"),this.loadingEl.className="designbase-wc-lightbox__loading";const p=document.createElement("db-spinner");p.setAttribute("type","circular"),p.setAttribute("size","m"),p.setAttribute("show-label",""),p.setAttribute("label","이미지 로딩 중..."),this.loadingEl.append(p),this.imageEl=document.createElement("img"),this.imageEl.className="designbase-wc-lightbox__image",this.imageEl.draggable=!1,this.imageEl.addEventListener("load",this.handleImageLoad),this.imageEl.addEventListener("error",this.handleImageError),u.append(this.errorEl,this.loadingEl,this.imageEl);const E=document.createElement("div");E.className="designbase-wc-lightbox__description";const x=document.createElement("p");x.className="designbase-wc-lightbox__description-text",E.append(x),"false"!==this.getAttribute("show-navigation-buttons")&&g.append(this.prevNav,this.nextNav),g.append(u,E);const w=document.createElement("div");w.className="designbase-wc-lightbox__thumbnails";const v=document.createElement("div");return v.className="designbase-wc-lightbox__thumbnails-container",w.append(v),r.append(o,g,w),a.append(r),n.append(a),a.addEventListener("click",e=>{e.target===a&&"false"!==this.getAttribute("close-on-backdrop-click")&&this.close()}),this.portalEl=n,this.counterBadge=c,n}syncImageLayers(){this.imageEl&&this.loadingEl&&this.errorEl&&(this.imageEl.classList.toggle("designbase-wc-lightbox__image--loaded",this.imageLoaded),this.loadingEl.hidden=this.imageLoaded||this.imageError,this.errorEl.hidden=!this.imageError,this.imageEl.hidden=this.imageError)}updateThumbnails(){if(!this.portalEl)return;const e=this.portalEl.querySelector(".designbase-wc-lightbox__thumbnails-container"),t=this.portalEl.querySelector(".designbase-wc-lightbox__thumbnails");if(!e||!t)return;const s=this.parseImages(),i="false"!==this.getAttribute("show-thumbnails")&&s.length>1;if(t.hidden=!i,!i)return e.replaceChildren(),void(this.thumbnailSignature="");const n=s.map(e=>e.thumbnail||e.src).join("|");n!==this.thumbnailSignature||e.childElementCount!==s.length?(this.thumbnailSignature=n,e.replaceChildren(),s.forEach((t,s)=>{const i=document.createElement("button");i.type="button",i.className=["designbase-wc-lightbox__thumbnail",s===this.currentIndex&&"designbase-wc-lightbox__thumbnail--active"].filter(Boolean).join(" "),i.title=t.title||`이미지 ${s+1}`,i.setAttribute("aria-label",t.alt||t.title||`이미지 ${s+1}`),i.setAttribute("aria-current",s===this.currentIndex?"true":"false");const n=document.createElement("img");n.className="designbase-wc-lightbox__thumbnail-image",n.src=t.thumbnail||t.src,n.alt="",n.draggable=!1,n.loading="lazy",n.decoding="async",i.append(n),i.addEventListener("click",()=>this.goTo(s)),e.append(i)})):Array.from(e.children).forEach((e,t)=>{const s=e,i=t===this.currentIndex;s.classList.toggle("designbase-wc-lightbox__thumbnail--active",i),s.setAttribute("aria-current",i?"true":"false")})}loadCurrentImage(){if(!this.imageEl)return;const e=this.getCurrentImage();if(!e?.src)return this.imageEl.removeAttribute("src"),this.resetImageState(),void this.syncImageLayers();this.boundSrc!==e.src&&(this.boundSrc=e.src,this.resetImageState(),this.imageEl.src=e.src,this.imageEl.alt=e.alt||e.title||`이미지 ${this.currentIndex+1}`,this.syncImageLayers(),this.imageEl.complete&&this.imageEl.naturalWidth>0&&this.handleImageLoad())}refreshView(){if(!this.portalEl)return;const e=this.getCurrentImage(),t=this.parseImages(),s=this.portalEl.querySelector(".designbase-wc-lightbox__title-text"),i=this.portalEl.querySelector(".designbase-wc-lightbox__description-text"),n=this.portalEl.querySelector(".designbase-wc-lightbox__description");if(s&&(s.textContent=e?.title||"",s.hidden=!e?.title),this.counterBadge){const e="false"!==this.getAttribute("show-counter")&&t.length>1?`${this.currentIndex+1} / ${t.length}`:"";this.counterBadge.textContent=e,this.counterBadge.hidden=!e}n&&i&&(i.textContent=e?.description||"",n.hidden=!e?.description);const a="false"!==this.getAttribute("show-navigation-buttons")&&t.length>1;this.prevNav&&(this.prevNav.hidden=!a),this.nextNav&&(this.nextNav.hidden=!a),this.loadCurrentImage(),this.updateThumbnails()}mount(){this.portalEl||(this.portalEl=this.buildPortal()),this.portalEl.isConnected||document.body.append(this.portalEl),document.body.style.overflow="hidden",this.keydownHandler||(this.keydownHandler=e=>{this.open&&"false"!==this.getAttribute("enable-keyboard")&&("Escape"===e.key&&"false"!==this.getAttribute("close-on-escape")&&(e.preventDefault(),this.close()),"ArrowLeft"===e.key&&this.goTo(this.currentIndex-1),"ArrowRight"===e.key&&this.goTo(this.currentIndex+1))},document.addEventListener("keydown",this.keydownHandler)),this.currentIndex=Number(this.getAttribute("current-index")||0),this.refreshView()}unmount(){this.portalEl?.remove(),document.body.style.overflow="",this.keydownHandler&&(document.removeEventListener("keydown",this.keydownHandler),this.keydownHandler=null)}syncOpenState(){this.open?this.mount():this.unmount()}}customElements.get("db-lightbox")||customElements.define("db-lightbox",DbLightbox);export{DbLightbox};