@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,372 @@
-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};
+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 };