@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

@@ -1 +1,324 @@
-import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-tutorial";class DbTutorial extends HTMLElement{constructor(){super(...arguments),this.internalStep=0,this.targetElement=null,this.keyHandler=null,this.resizeHandler=null,this.isMounted=!1}static get observedAttributes(){return["open","steps","current-step","indicator-type","indicator-size"]}connectedCallback(){this.style.display="contents",this.syncStepFromAttribute(),this.syncOpenState()}disconnectedCallback(){this.detachListeners(),this.clearTargetHighlight(),this.unmount()}attributeChangedCallback(t){this.isConnected&&("open"!==t?("current-step"===t&&this.syncStepFromAttribute(),this.isMounted&&this.render()):this.syncOpenState())}get steps(){return this.parseSteps()}set steps(t){this.setAttribute("steps","string"==typeof t?t:JSON.stringify(t))}parseSteps(){try{const t=JSON.parse(this.getAttribute("steps")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}syncStepFromAttribute(){if(!this.hasAttribute("current-step"))return;const t=Number(this.getAttribute("current-step")||0);Number.isFinite(t)&&(this.internalStep=Math.max(0,t))}isOpenRequested(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}getCurrentStepData(){const t=this.parseSteps();if(!t.length)return;const e=Math.min(Math.max(this.internalStep,0),t.length-1);return{step:t[e],index:e,steps:t}}syncOpenState(){if(this.isOpenRequested())return this.mount(),void this.attachListeners();this.detachListeners(),this.clearTargetHighlight(),this.unmount()}mount(){this.root||(this.root=document.createElement("div"),this.root.className=e,this.root.setAttribute("role","dialog"),this.root.setAttribute("aria-modal","true"),this.root.tabIndex=-1,this.ensureStructure()),this.root.isConnected||document.body.append(this.root),this.isMounted=!0,this.render()}unmount(){this.isMounted=!1,this.root?.remove()}ensureStructure(){if(!this.root||this.popoverEl)return;this.overlayEl=document.createElement("div"),this.overlayEl.className=`${e}__overlay`,this.overlayEl.addEventListener("click",()=>this.handleEnd()),this.popoverEl=document.createElement("div"),this.popoverEl.className=`${e}__popover`,this.closeButtonEl=document.createElement("button"),this.closeButtonEl.type="button",this.closeButtonEl.className=`${e}__close-button`,this.closeButtonEl.setAttribute("aria-label","튜토리얼 종료"),this.closeButtonEl.append(t("close",16)),this.closeButtonEl.addEventListener("click",()=>this.handleEnd());const i=document.createElement("div");i.className=`${e}__content`;const s=document.createElement("div");s.className=`${e}__text`,this.titleEl=document.createElement("h3"),this.titleEl.id="tutorial-title",this.titleEl.className=`${e}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.id="tutorial-content",this.descriptionEl.className=`${e}__description`,s.append(this.titleEl,this.descriptionEl);const n=document.createElement("div");n.className=`${e}__navigation`,this.prevButtonEl=document.createElement("db-button"),this.prevButtonEl.setAttribute("variant","secondary"),this.prevButtonEl.setAttribute("size","s"),this.prevButtonEl.setAttribute("start-icon","chevron-left"),this.prevButtonEl.textContent="이전",this.prevButtonEl.addEventListener("db-click",()=>this.handlePrev()),this.indicatorEl=document.createElement("db-indicator"),this.indicatorEl.addEventListener("db-step-click",t=>{const e=t.detail;"number"==typeof e.index&&this.goToStep(e.index)}),this.nextButtonEl=document.createElement("db-button"),this.nextButtonEl.setAttribute("variant","primary"),this.nextButtonEl.setAttribute("size","s"),this.nextButtonEl.addEventListener("db-click",()=>this.handleNext()),n.append(this.prevButtonEl,this.indicatorEl,this.nextButtonEl),i.append(s,n),this.popoverEl.append(this.closeButtonEl,i),this.root.append(this.overlayEl,this.popoverEl)}attachListeners(){this.keyHandler||(this.keyHandler=t=>{"Escape"===t.key?this.handleEnd():"ArrowLeft"===t.key?this.handlePrev():"ArrowRight"===t.key&&this.handleNext()},document.addEventListener("keydown",this.keyHandler)),this.resizeHandler||(this.resizeHandler=()=>this.updateTargetElement(),window.addEventListener("resize",this.resizeHandler))}detachListeners(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null),this.resizeHandler&&(window.removeEventListener("resize",this.resizeHandler),this.resizeHandler=null)}clearTargetHighlight(){this.targetElement&&(this.targetElement.classList.remove(`${e}__target`),this.targetElement.style.position="",this.targetElement.style.zIndex="",this.targetElement=null)}updateTargetElement(){const t=this.getCurrentStepData();if(!t?.step.target||!this.popoverEl)return;this.clearTargetHighlight();const i=document.querySelector(t.step.target);if(!i)return;this.targetElement=i,i.style.position="relative",i.style.zIndex="1000",i.classList.add(`${e}__target`);const s=i.getBoundingClientRect(),n=window.innerWidth,r=window.innerHeight,o=300,l=200,h=16;let a="auto"!==t.step.placement&&t.step.placement?t.step.placement:"bottom",d=s.bottom+h,c=s.left+s.width/2-150;if("auto"===t.step.placement)s.top-l-h>0?(a="top",d=s.top-l-h):s.bottom+l+h<r?(a="bottom",d=s.bottom+h):s.left-o-h>0?(a="left",d=s.top+s.height/2-100,c=s.left-o-h):(a="right",d=s.top+s.height/2-100,c=s.right+h);else switch(a){case"top":d=s.top-l-h;break;case"bottom":d=s.bottom+h;break;case"left":d=s.top+s.height/2-100,c=s.left-o-h;break;case"right":d=s.top+s.height/2-100,c=s.right+h}c=Math.max(h,Math.min(c,n-o-h)),d=Math.max(h,Math.min(d,r-l-h)),this.popoverEl.className=[`${e}__popover`,`${e}__popover--${a}`].join(" "),this.popoverEl.style.top=`${d}px`,this.popoverEl.style.left=`${c}px`}emitStepChange(t){this.dispatchEvent(new CustomEvent("db-step-change",{bubbles:!0,composed:!0,detail:{step:t}}))}goToStep(t){const e=this.parseSteps();e.length&&(this.clearTargetHighlight(),this.internalStep=Math.min(Math.max(t,0),e.length-1),this.setAttribute("current-step",String(this.internalStep)),this.emitStepChange(this.internalStep),this.render())}handlePrev(){const t=this.getCurrentStepData();!t||t.index<=0||(this.dispatchEvent(new CustomEvent("db-prev",{bubbles:!0,composed:!0})),this.goToStep(t.index-1))}handleNext(){const t=this.getCurrentStepData();t&&(t.index>=t.steps.length-1?this.handleEnd():(this.dispatchEvent(new CustomEvent("db-next",{bubbles:!0,composed:!0})),this.goToStep(t.index+1)))}handleEnd(){this.dispatchEvent(new CustomEvent("db-end",{bubbles:!0,composed:!0})),this.setAttribute("open","false")}render(){const t=this.getCurrentStepData();if(!t||!this.root)return;const{step:e,index:i,steps:s}=t,n=0===i,r=i===s.length-1;this.titleEl&&(this.titleEl.textContent=e.title||"",this.titleEl.hidden=!e.title),this.descriptionEl&&(this.descriptionEl.textContent=e.content||"",this.descriptionEl.hidden=!e.content),this.prevButtonEl&&(this.prevButtonEl.hidden=n),this.nextButtonEl&&(this.nextButtonEl.textContent=r?"완료":"다음",r?this.nextButtonEl.removeAttribute("end-icon"):this.nextButtonEl.setAttribute("end-icon","chevron-right")),this.indicatorEl&&(this.indicatorEl.setAttribute("current",String(i)),this.indicatorEl.setAttribute("total",String(s.length)),this.indicatorEl.setAttribute("type",this.getAttribute("indicator-type")||"numbers"),this.indicatorEl.setAttribute("size",this.getAttribute("indicator-size")||"m")),this.updateTargetElement()}}customElements.get("db-tutorial")||customElements.define("db-tutorial",DbTutorial);export{DbTutorial};
+import { createDbIcon } from './db-icons.js';
+
+const CLASS = 'designbase-wc-tutorial';
+class DbTutorial extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.internalStep = 0;
+        this.targetElement = null;
+        this.keyHandler = null;
+        this.resizeHandler = null;
+        this.isMounted = false;
+    }
+    static get observedAttributes() {
+        return ['open', 'steps', 'current-step', 'indicator-type', 'indicator-size'];
+    }
+    connectedCallback() {
+        this.style.display = 'contents';
+        this.syncStepFromAttribute();
+        this.syncOpenState();
+    }
+    disconnectedCallback() {
+        this.detachListeners();
+        this.clearTargetHighlight();
+        this.unmount();
+    }
+    attributeChangedCallback(name) {
+        if (!this.isConnected)
+            return;
+        if (name === 'open') {
+            this.syncOpenState();
+            return;
+        }
+        if (name === 'current-step')
+            this.syncStepFromAttribute();
+        if (this.isMounted)
+            this.render();
+    }
+    get steps() {
+        return this.parseSteps();
+    }
+    set steps(value) {
+        this.setAttribute('steps', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    parseSteps() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('steps') || '[]');
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    syncStepFromAttribute() {
+        if (!this.hasAttribute('current-step'))
+            return;
+        const next = Number(this.getAttribute('current-step') || 0);
+        if (Number.isFinite(next))
+            this.internalStep = Math.max(0, next);
+    }
+    isOpenRequested() {
+        return this.hasAttribute('open') && this.getAttribute('open') !== 'false';
+    }
+    getCurrentStepData() {
+        const steps = this.parseSteps();
+        if (!steps.length)
+            return undefined;
+        const index = Math.min(Math.max(this.internalStep, 0), steps.length - 1);
+        return { step: steps[index], index, steps };
+    }
+    syncOpenState() {
+        if (this.isOpenRequested()) {
+            this.mount();
+            this.attachListeners();
+            return;
+        }
+        this.detachListeners();
+        this.clearTargetHighlight();
+        this.unmount();
+    }
+    mount() {
+        if (!this.root) {
+            this.root = document.createElement('div');
+            this.root.className = CLASS;
+            this.root.setAttribute('role', 'dialog');
+            this.root.setAttribute('aria-modal', 'true');
+            this.root.tabIndex = -1;
+            this.ensureStructure();
+        }
+        if (!this.root.isConnected)
+            document.body.append(this.root);
+        this.isMounted = true;
+        this.render();
+    }
+    unmount() {
+        this.isMounted = false;
+        this.root?.remove();
+    }
+    ensureStructure() {
+        if (!this.root || this.popoverEl)
+            return;
+        this.overlayEl = document.createElement('div');
+        this.overlayEl.className = `${CLASS}__overlay`;
+        this.overlayEl.addEventListener('click', () => this.handleEnd());
+        this.popoverEl = document.createElement('div');
+        this.popoverEl.className = `${CLASS}__popover`;
+        this.closeButtonEl = document.createElement('button');
+        this.closeButtonEl.type = 'button';
+        this.closeButtonEl.className = `${CLASS}__close-button`;
+        this.closeButtonEl.setAttribute('aria-label', '튜토리얼 종료');
+        this.closeButtonEl.append(createDbIcon('close', 16));
+        this.closeButtonEl.addEventListener('click', () => this.handleEnd());
+        const content = document.createElement('div');
+        content.className = `${CLASS}__content`;
+        const text = document.createElement('div');
+        text.className = `${CLASS}__text`;
+        this.titleEl = document.createElement('h3');
+        this.titleEl.id = 'tutorial-title';
+        this.titleEl.className = `${CLASS}__title`;
+        this.descriptionEl = document.createElement('p');
+        this.descriptionEl.id = 'tutorial-content';
+        this.descriptionEl.className = `${CLASS}__description`;
+        text.append(this.titleEl, this.descriptionEl);
+        const navigation = document.createElement('div');
+        navigation.className = `${CLASS}__navigation`;
+        this.prevButtonEl = document.createElement('db-button');
+        this.prevButtonEl.setAttribute('variant', 'secondary');
+        this.prevButtonEl.setAttribute('size', 's');
+        this.prevButtonEl.setAttribute('start-icon', 'chevron-left');
+        this.prevButtonEl.textContent = '이전';
+        this.prevButtonEl.addEventListener('db-click', () => this.handlePrev());
+        this.indicatorEl = document.createElement('db-indicator');
+        this.indicatorEl.addEventListener('db-step-click', (event) => {
+            const detail = event.detail;
+            if (typeof detail.index === 'number')
+                this.goToStep(detail.index);
+        });
+        this.nextButtonEl = document.createElement('db-button');
+        this.nextButtonEl.setAttribute('variant', 'primary');
+        this.nextButtonEl.setAttribute('size', 's');
+        this.nextButtonEl.addEventListener('db-click', () => this.handleNext());
+        navigation.append(this.prevButtonEl, this.indicatorEl, this.nextButtonEl);
+        content.append(text, navigation);
+        this.popoverEl.append(this.closeButtonEl, content);
+        this.root.append(this.overlayEl, this.popoverEl);
+    }
+    attachListeners() {
+        if (!this.keyHandler) {
+            this.keyHandler = (event) => {
+                if (event.key === 'Escape')
+                    this.handleEnd();
+                else if (event.key === 'ArrowLeft')
+                    this.handlePrev();
+                else if (event.key === 'ArrowRight')
+                    this.handleNext();
+            };
+            document.addEventListener('keydown', this.keyHandler);
+        }
+        if (!this.resizeHandler) {
+            this.resizeHandler = () => this.updateTargetElement();
+            window.addEventListener('resize', this.resizeHandler);
+        }
+    }
+    detachListeners() {
+        if (this.keyHandler) {
+            document.removeEventListener('keydown', this.keyHandler);
+            this.keyHandler = null;
+        }
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
+    }
+    clearTargetHighlight() {
+        if (!this.targetElement)
+            return;
+        this.targetElement.classList.remove(`${CLASS}__target`);
+        this.targetElement.style.position = '';
+        this.targetElement.style.zIndex = '';
+        this.targetElement = null;
+    }
+    updateTargetElement() {
+        const current = this.getCurrentStepData();
+        if (!current?.step.target || !this.popoverEl)
+            return;
+        this.clearTargetHighlight();
+        const element = document.querySelector(current.step.target);
+        if (!element)
+            return;
+        this.targetElement = element;
+        element.style.position = 'relative';
+        element.style.zIndex = '1000';
+        element.classList.add(`${CLASS}__target`);
+        const rect = element.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const popoverWidth = 300;
+        const popoverHeight = 200;
+        const margin = 16;
+        let placement = current.step.placement === 'auto' || !current.step.placement
+            ? 'bottom'
+            : current.step.placement;
+        let top = rect.bottom + margin;
+        let left = rect.left + rect.width / 2 - popoverWidth / 2;
+        if (current.step.placement === 'auto') {
+            if (rect.top - popoverHeight - margin > 0) {
+                placement = 'top';
+                top = rect.top - popoverHeight - margin;
+            }
+            else if (rect.bottom + popoverHeight + margin < viewportHeight) {
+                placement = 'bottom';
+                top = rect.bottom + margin;
+            }
+            else if (rect.left - popoverWidth - margin > 0) {
+                placement = 'left';
+                top = rect.top + rect.height / 2 - popoverHeight / 2;
+                left = rect.left - popoverWidth - margin;
+            }
+            else {
+                placement = 'right';
+                top = rect.top + rect.height / 2 - popoverHeight / 2;
+                left = rect.right + margin;
+            }
+        }
+        else {
+            switch (placement) {
+                case 'top':
+                    top = rect.top - popoverHeight - margin;
+                    break;
+                case 'bottom':
+                    top = rect.bottom + margin;
+                    break;
+                case 'left':
+                    top = rect.top + rect.height / 2 - popoverHeight / 2;
+                    left = rect.left - popoverWidth - margin;
+                    break;
+                case 'right':
+                    top = rect.top + rect.height / 2 - popoverHeight / 2;
+                    left = rect.right + margin;
+                    break;
+            }
+        }
+        left = Math.max(margin, Math.min(left, viewportWidth - popoverWidth - margin));
+        top = Math.max(margin, Math.min(top, viewportHeight - popoverHeight - margin));
+        this.popoverEl.className = [`${CLASS}__popover`, `${CLASS}__popover--${placement}`].join(' ');
+        this.popoverEl.style.top = `${top}px`;
+        this.popoverEl.style.left = `${left}px`;
+    }
+    emitStepChange(step) {
+        this.dispatchEvent(new CustomEvent('db-step-change', {
+            bubbles: true,
+            composed: true,
+            detail: { step },
+        }));
+    }
+    goToStep(step) {
+        const steps = this.parseSteps();
+        if (!steps.length)
+            return;
+        this.clearTargetHighlight();
+        this.internalStep = Math.min(Math.max(step, 0), steps.length - 1);
+        this.setAttribute('current-step', String(this.internalStep));
+        this.emitStepChange(this.internalStep);
+        this.render();
+    }
+    handlePrev() {
+        const current = this.getCurrentStepData();
+        if (!current || current.index <= 0)
+            return;
+        this.dispatchEvent(new CustomEvent('db-prev', { bubbles: true, composed: true }));
+        this.goToStep(current.index - 1);
+    }
+    handleNext() {
+        const current = this.getCurrentStepData();
+        if (!current)
+            return;
+        if (current.index >= current.steps.length - 1) {
+            this.handleEnd();
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('db-next', { bubbles: true, composed: true }));
+        this.goToStep(current.index + 1);
+    }
+    handleEnd() {
+        this.dispatchEvent(new CustomEvent('db-end', { bubbles: true, composed: true }));
+        this.setAttribute('open', 'false');
+    }
+    render() {
+        const current = this.getCurrentStepData();
+        if (!current || !this.root)
+            return;
+        const { step, index, steps } = current;
+        const isFirst = index === 0;
+        const isLast = index === steps.length - 1;
+        if (this.titleEl) {
+            this.titleEl.textContent = step.title || '';
+            this.titleEl.hidden = !step.title;
+        }
+        if (this.descriptionEl) {
+            this.descriptionEl.textContent = step.content || '';
+            this.descriptionEl.hidden = !step.content;
+        }
+        if (this.prevButtonEl)
+            this.prevButtonEl.hidden = isFirst;
+        if (this.nextButtonEl) {
+            this.nextButtonEl.textContent = isLast ? '완료' : '다음';
+            if (isLast)
+                this.nextButtonEl.removeAttribute('end-icon');
+            else
+                this.nextButtonEl.setAttribute('end-icon', 'chevron-right');
+        }
+        if (this.indicatorEl) {
+            this.indicatorEl.setAttribute('current', String(index));
+            this.indicatorEl.setAttribute('total', String(steps.length));
+            this.indicatorEl.setAttribute('type', this.getAttribute('indicator-type') || 'numbers');
+            this.indicatorEl.setAttribute('size', this.getAttribute('indicator-size') || 'm');
+        }
+        this.updateTargetElement();
+    }
+}
+if (!customElements.get('db-tutorial')) {
+    customElements.define('db-tutorial', DbTutorial);
+}
+
+export { DbTutorial };