@designbasekorea/ui-wc 0.5.6 → 0.6.1

package/dist/esm/components/db-animation-text.js

@@ -1,601 +1 @@
-const CLASS = 'designbase-wc-animation-text';
-class DbAnimationText extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.timers = [];
-        this.displayText = '';
-        this.isVisible = false;
-        this.isAnimating = false;
-        this.wordEls = [];
-        this.rotateToken = 0;
-    }
-    static get observedAttributes() {
-        return [
-            'text',
-            'texts',
-            'interval',
-            'trigger',
-            'type',
-            'speed',
-            'repeat',
-            'delay',
-            'direction',
-            'size',
-            'color',
-            'custom-color',
-            'weight',
-            'align',
-            'gradient-colors',
-            'wave-colors',
-            'glow-color',
-            'clickable',
-            'disabled',
-        ];
-    }
-    connectedCallback() {
-        this.style.display = 'inline-block';
-        this.ensureStructure();
-        this.syncFromAttributes();
-        this.setupTrigger();
-    }
-    disconnectedCallback() {
-        this.clearTimers();
-        this.observer?.disconnect();
-        this.teardownScrollFill();
-        this.rotateObserver?.disconnect();
-    }
-    attributeChangedCallback() {
-        if (!this.isConnected)
-            return;
-        this.syncFromAttributes();
-        this.setupTrigger();
-    }
-    getText() {
-        return this.getAttribute('text') || this.textContent?.trim() || '';
-    }
-    getRotateTexts() {
-        const raw = this.getAttribute('texts');
-        if (raw) {
-            const list = raw
-                .split(',')
-                .map((s) => s.trim())
-                .filter(Boolean);
-            if (list.length)
-                return list;
-        }
-        const single = this.getText();
-        return single ? [single] : [];
-    }
-    getLongestText() {
-        return this.getRotateTexts().reduce((a, b) => (b.length > a.length ? b : a), '');
-    }
-    getType() {
-        const value = this.getAttribute('type') || 'fade';
-        const allowed = [
-            'typing',
-            'fade',
-            'slide',
-            'bounce',
-            'shake',
-            'glow',
-            'gradient',
-            'wave',
-            'flip',
-            'scale',
-            'decode',
-            'roll',
-            'reveal',
-            'scroll-fill',
-            'text-rotate',
-        ];
-        return allowed.includes(value) ? value : 'fade';
-    }
-    getTrigger() {
-        const value = this.getAttribute('trigger') || 'mount';
-        return ['mount', 'hover', 'click', 'in-view'].includes(value) ? value : 'mount';
-    }
-    ensureStructure() {
-        if (this.ghostEl)
-            return;
-        this.ghostEl = document.createElement('span');
-        this.ghostEl.setAttribute('aria-hidden', 'true');
-        this.ghostEl.style.visibility = 'hidden';
-        this.ghostEl.style.pointerEvents = 'none';
-        this.ghostEl.style.userSelect = 'none';
-        this.layerEl = document.createElement('span');
-        this.layerEl.style.position = 'absolute';
-        this.layerEl.style.top = '0';
-        this.layerEl.style.left = '0';
-        this.append(this.ghostEl, this.layerEl);
-        this.addEventListener('mouseenter', () => {
-            if (this.getTrigger() !== 'hover' || this.hasAttribute('disabled'))
-                return;
-            // roll 은 정적 렌더 + CSS :hover 로만 동작한다. 재렌더 시 transition 이 리셋된다.
-            if (this.getType() === 'roll')
-                return;
-            this.isVisible = true;
-            this.startAnimation();
-            this.syncClasses();
-        });
-        this.addEventListener('mouseleave', () => {
-            if (this.getTrigger() !== 'hover')
-                return;
-            if (this.getType() === 'roll')
-                return;
-            this.isVisible = false;
-            this.isAnimating = false;
-            this.clearTimers();
-            const type = this.getType();
-            if (type === 'typing' || type === 'decode') {
-                this.displayText = this.getText();
-            }
-            this.renderLayer();
-            this.syncClasses();
-        });
-        this.addEventListener('click', () => {
-            if (this.hasAttribute('disabled'))
-                return;
-            if (this.getTrigger() === 'click') {
-                this.isVisible = !this.isVisible;
-                if (this.isVisible)
-                    this.startAnimation();
-                else {
-                    this.isAnimating = false;
-                    this.clearTimers();
-                    const type = this.getType();
-                    if (type === 'typing' || type === 'decode')
-                        this.displayText = this.getText();
-                    this.renderLayer();
-                }
-                this.syncClasses();
-            }
-            if (this.hasAttribute('clickable')) {
-                this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
-            }
-        });
-    }
-    clearTimers() {
-        this.timers.forEach((id) => window.clearInterval(id));
-        this.timers.forEach((id) => window.clearTimeout(id));
-        this.timers = [];
-    }
-    syncFromAttributes() {
-        const text = this.getText();
-        const type = this.getType();
-        const trigger = this.getTrigger();
-        const speed = Number(this.getAttribute('speed') || 1000);
-        const repeat = Number(this.getAttribute('repeat') || 1);
-        const customColor = this.getAttribute('custom-color');
-        const gradientColors = (this.getAttribute('gradient-colors') || '#667eea,#764ba2').split(',');
-        const waveColors = (this.getAttribute('wave-colors') || '#ff6b6b,#4ecdc4,#45b7d1,#96ceb4,#feca57').split(',');
-        const glowColor = this.getAttribute('glow-color') || '#667eea';
-        this.className = [
-            CLASS,
-            type !== 'typing' && `${CLASS}--${type}`,
-            `${CLASS}--${this.getAttribute('size') || 'm'}`,
-            `${CLASS}--${this.getAttribute('color') || 'primary'}`,
-            `${CLASS}--${this.getAttribute('weight') || 'normal'}`,
-            `${CLASS}--${this.getAttribute('align') || 'left'}`,
-            `${CLASS}--${this.getAttribute('direction') || 'left'}`,
-            this.isVisible && `${CLASS}--visible`,
-            this.isAnimating && `${CLASS}--animating`,
-            (this.hasAttribute('clickable') || trigger === 'click') && `${CLASS}--clickable`,
-            this.hasAttribute('disabled') && `${CLASS}--disabled`,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.style.setProperty('--db-animation-speed', `${Number.isFinite(speed) ? speed : 1000}ms`);
-        this.style.setProperty('--db-animation-iteration-count', repeat === 0 ? 'infinite' : String(repeat));
-        if (customColor)
-            this.style.setProperty('--db-text-custom', customColor);
-        this.style.setProperty('--db-wave-colors', waveColors.join(', '));
-        this.style.setProperty('--db-glow-color', glowColor);
-        // 그라디언트 텍스트는 실제 텍스트가 들어있는 레이어(span)에 적용해야 한다.
-        // (host에 background-clip:text를 걸면 자식 레이어 텍스트는 투명하게만 보인다)
-        this.style.removeProperty('background');
-        this.style.removeProperty('background-size');
-        this.style.removeProperty('-webkit-background-clip');
-        this.style.removeProperty('-webkit-text-fill-color');
-        this.style.removeProperty('background-clip');
-        if (this.layerEl) {
-            if (type === 'gradient' && gradientColors.length >= 2) {
-                this.layerEl.style.backgroundImage = `linear-gradient(45deg, ${gradientColors.join(', ')})`;
-            }
-            else {
-                this.layerEl.style.removeProperty('background-image');
-            }
-        }
-        if ((type === 'typing' || type === 'decode') && trigger === 'mount' && !this.isAnimating) {
-            this.displayText = '';
-        }
-        else if (!this.isAnimating) {
-            this.displayText = text;
-        }
-        // typing/decode 는 글자 수가 변하고 roll 은 1줄 높이를 고정해야 하므로
-        // ghost 로 공간을 예약하고 layer 를 절대배치로 겹친다.
-        // 그 외 타입(fade·reveal·scroll-fill 등)은 일반 흐름으로 렌더해
-        // 문장 길이(줄바꿈)에 따라 호스트 높이가 자연스럽게 늘어나도록 한다.
-        const overlay = type === 'typing' || type === 'decode' || type === 'roll' || type === 'text-rotate';
-        const whiteSpace = type === 'roll' || type === 'text-rotate' ? 'nowrap' : overlay ? 'pre-wrap' : '';
-        if (this.ghostEl) {
-            if (overlay) {
-                this.ghostEl.textContent = type === 'text-rotate' ? this.getLongestText() : text;
-                this.ghostEl.style.display = 'inline-block';
-                this.ghostEl.style.whiteSpace = whiteSpace;
-                // 타이핑은 완료 시 텍스트가 폭을 꽉 채워 캐럿이 다음 줄로 밀리지 않도록 여유 확보
-                this.ghostEl.style.paddingRight = type === 'typing' ? '0.25em' : '';
-            }
-            else {
-                this.ghostEl.textContent = '';
-                this.ghostEl.style.display = 'none';
-            }
-        }
-        if (this.layerEl) {
-            this.layerEl.className = [
-                `${CLASS}__layer`,
-                type === 'typing' && `${CLASS}--typing`,
-                this.isAnimating && type === 'typing' && `${CLASS}--animating`,
-            ]
-                .filter(Boolean)
-                .join(' ');
-            if (overlay) {
-                this.layerEl.style.position = 'absolute';
-                this.layerEl.style.top = '0';
-                this.layerEl.style.left = '0';
-                this.layerEl.style.width = '100%';
-                this.layerEl.style.height = '100%';
-                this.layerEl.style.whiteSpace = whiteSpace;
-            }
-            else {
-                this.layerEl.style.position = 'static';
-                this.layerEl.style.removeProperty('top');
-                this.layerEl.style.removeProperty('left');
-                this.layerEl.style.width = 'auto';
-                this.layerEl.style.height = 'auto';
-                this.layerEl.style.whiteSpace = '';
-            }
-        }
-        this.renderLayer();
-    }
-    syncClasses() {
-        this.classList.toggle(`${CLASS}--visible`, this.isVisible);
-        this.classList.toggle(`${CLASS}--animating`, this.isAnimating);
-    }
-    setupTrigger() {
-        this.clearTimers();
-        this.observer?.disconnect();
-        this.teardownScrollFill();
-        this.rotateObserver?.disconnect();
-        this.rotateObserver = undefined;
-        this.rotateToken++; // 대기 중이던 이전 rotate 예약 무효화
-        const trigger = this.getTrigger();
-        const delay = Number(this.getAttribute('delay') || 0);
-        // scroll-fill 은 스크롤 위치에 연동되므로 별도 핸들러로 처리한다.
-        if (this.getType() === 'scroll-fill') {
-            this.setupScrollFill();
-            return;
-        }
-        // text-rotate 는 타이머로 자동 순환한다.
-        if (this.getType() === 'text-rotate') {
-            this.setupTextRotate();
-            return;
-        }
-        if (trigger === 'mount') {
-            const timer = window.setTimeout(() => {
-                this.isVisible = true;
-                this.syncClasses();
-                this.startAnimation();
-            }, delay);
-            this.timers.push(timer);
-            return;
-        }
-        if (trigger === 'in-view') {
-            this.observer = new IntersectionObserver((entries) => {
-                if (entries[0]?.isIntersecting) {
-                    window.setTimeout(() => {
-                        this.isVisible = true;
-                        this.syncClasses();
-                        this.startAnimation();
-                    }, delay);
-                    this.observer?.disconnect();
-                }
-            });
-            this.observer.observe(this);
-        }
-    }
-    setupTextRotate() {
-        const texts = this.getRotateTexts();
-        if (texts.length <= 1)
-            return; // 순환할 텍스트가 없으면 정적 표시
-        // 재설정마다 토큰을 올려, 폰트 로드 후 뒤늦게 실행되는 이전 예약을 무효화한다.
-        const token = ++this.rotateToken;
-        const start = () => {
-            if (token !== this.rotateToken || !this.isConnected || this.getType() !== 'text-rotate')
-                return;
-            const track = this.layerEl?.querySelector(`.${CLASS}__rotate-track`);
-            if (!track || !track.firstElementChild)
-                return;
-            const items = Array.from(track.children);
-            const duration = Number(this.getAttribute('speed') || 500);
-            const interval = Math.max(duration + 200, Number(this.getAttribute('interval') || 2000));
-            let index = 0;
-            // 줄 높이·폭은 폰트 로드 타이밍에 따라 달라지므로 매번 실측한다.
-            const stepOf = () => items[0].getBoundingClientRect().height;
-            const widthOf = (i) => items[i].getBoundingClientRect().width;
-            // 현재 index 위치로 트랙/호스트를 맞춘다. animate=false 면 즉시(트랜지션 없이) 스냅.
-            const apply = (animate) => {
-                const step = stepOf();
-                if (!step)
-                    return;
-                const ease = 'cubic-bezier(0.22, 1, 0.36, 1)';
-                track.style.transition = animate ? `transform ${duration}ms ${ease}` : 'none';
-                track.style.transform = `translateY(-${index * step}px)`;
-                this.style.transition = animate ? `width ${duration}ms ${ease}` : 'none';
-                this.style.width = `${widthOf(index)}px`;
-            };
-            apply(false);
-            const advance = () => {
-                index += 1;
-                apply(true);
-                if (index === items.length - 1) {
-                    // 마지막 복제본(=첫 항목) 위치 → 트랜지션 종료 후 순간 이동으로 원점 복귀
-                    const reset = window.setTimeout(() => {
-                        index = 0;
-                        apply(false);
-                    }, duration);
-                    this.timers.push(reset);
-                }
-            };
-            const timer = window.setInterval(advance, interval);
-            this.timers.push(timer);
-            // 폰트 로드 등으로 항목 크기가 바뀌면(초기 폴백→웹폰트) 현재 위치를 다시 맞춰
-            // 세로 어긋남·가로 잘림을 보정한다. 최초 observe 콜백(초기 크기)은 건너뛴다.
-            this.rotateObserver?.disconnect();
-            let firstObserve = true;
-            const ro = new ResizeObserver(() => {
-                if (firstObserve) {
-                    firstObserve = false;
-                    return;
-                }
-                apply(false);
-            });
-            ro.observe(items[0]);
-            this.rotateObserver = ro;
-        };
-        // 웹폰트 로드 후 측정을 시도하되, ready 가 조기 resolve 되는 경우는 위 ResizeObserver 가 보정한다.
-        if (typeof document !== 'undefined' && document.fonts) {
-            document.fonts.ready.then(() => window.requestAnimationFrame(start));
-        }
-        else {
-            window.requestAnimationFrame(start);
-        }
-    }
-    setupScrollFill() {
-        this.scrollHandler = () => {
-            if (this.rafId != null)
-                return;
-            this.rafId = window.requestAnimationFrame(() => {
-                this.rafId = undefined;
-                this.updateScrollFill();
-            });
-        };
-        window.addEventListener('scroll', this.scrollHandler, { passive: true });
-        window.addEventListener('resize', this.scrollHandler, { passive: true });
-        this.updateScrollFill();
-    }
-    teardownScrollFill() {
-        if (this.scrollHandler) {
-            window.removeEventListener('scroll', this.scrollHandler);
-            window.removeEventListener('resize', this.scrollHandler);
-            this.scrollHandler = undefined;
-        }
-        if (this.rafId != null) {
-            window.cancelAnimationFrame(this.rafId);
-            this.rafId = undefined;
-        }
-    }
-    updateScrollFill() {
-        if (this.getType() !== 'scroll-fill' || this.wordEls.length === 0)
-            return;
-        const clamp = (v) => Math.max(0, Math.min(1, v));
-        const rect = this.getBoundingClientRect();
-        const vh = window.innerHeight || document.documentElement.clientHeight;
-        // 요소 상단이 뷰포트 85% 지점에 오면 시작, 35% 지점에 오면 완료
-        const start = vh * 0.85;
-        const end = vh * 0.35;
-        const progress = clamp((start - rect.top) / (start - end || 1));
-        const n = this.wordEls.length;
-        const softness = 4; // 몇 단어에 걸쳐 부드럽게 채워질지
-        const minOpacity = 0.18;
-        this.wordEls.forEach((el, i) => {
-            const p = clamp((progress * (n + softness) - i) / softness);
-            el.style.opacity = String(minOpacity + (1 - minOpacity) * p);
-        });
-    }
-    startAnimation() {
-        const type = this.getType();
-        const text = this.getText();
-        this.isAnimating = true;
-        this.syncClasses();
-        this.syncFromAttributes();
-        if (type === 'typing') {
-            this.startTyping(0);
-            return;
-        }
-        if (type === 'decode') {
-            this.startDecoding(0);
-            return;
-        }
-        // reveal 은 --visible 클래스로 CSS stagger 가 재생되므로 재빌드 루프를 타지 않는다.
-        // roll 은 이미 정적으로 렌더되어 있고 CSS :hover 로만 동작하므로 재렌더하지 않는다.
-        if (type === 'reveal' || type === 'scroll-fill' || type === 'roll') {
-            this.displayText = text;
-            if (type !== 'roll')
-                this.renderLayer();
-            this.isAnimating = false;
-            this.syncClasses();
-            return;
-        }
-        this.displayText = text;
-        this.renderLayer();
-        const speed = Number(this.getAttribute('speed') || 1000);
-        const timer = window.setTimeout(() => {
-            this.isAnimating = false;
-            this.syncClasses();
-            this.syncFromAttributes();
-        }, speed);
-        this.timers.push(timer);
-    }
-    startTyping(iteration) {
-        const text = this.getText();
-        const speed = Number(this.getAttribute('speed') || 1000);
-        const repeat = Number(this.getAttribute('repeat') || 1);
-        this.displayText = '';
-        this.renderLayer();
-        let currentIndex = 0;
-        const interval = window.setInterval(() => {
-            if (currentIndex >= text.length) {
-                window.clearInterval(interval);
-                if (repeat === 0 || iteration < repeat - 1) {
-                    const timer = window.setTimeout(() => this.startTyping(iteration + 1), 500);
-                    this.timers.push(timer);
-                }
-                else {
-                    this.isAnimating = false;
-                    this.syncClasses();
-                }
-                return;
-            }
-            this.displayText = text.slice(0, currentIndex + 1);
-            this.renderLayer();
-            currentIndex += 1;
-        }, Math.max(16, speed / Math.max(text.length, 1)));
-        this.timers.push(interval);
-    }
-    startDecoding(iteration) {
-        const text = this.getText();
-        const repeat = Number(this.getAttribute('repeat') || 1);
-        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+';
-        let iterations = 0;
-        const interval = window.setInterval(() => {
-            this.displayText = text
-                .split('')
-                .map((char, index) => {
-                if (index < iterations)
-                    return text[index];
-                return characters[Math.floor(Math.random() * characters.length)] || char;
-            })
-                .join('');
-            this.renderLayer();
-            if (iterations >= text.length) {
-                window.clearInterval(interval);
-                this.displayText = text;
-                this.renderLayer();
-                if (repeat === 0 || iteration < repeat - 1) {
-                    const timer = window.setTimeout(() => this.startDecoding(iteration + 1), 500);
-                    this.timers.push(timer);
-                }
-                else {
-                    this.isAnimating = false;
-                    this.syncClasses();
-                }
-            }
-            iterations += 1 / 3;
-        }, 30);
-        this.timers.push(interval);
-    }
-    renderLayer() {
-        if (!this.layerEl)
-            return;
-        const type = this.getType();
-        const text = this.getText();
-        const visible = this.isVisible || this.isAnimating;
-        // Reveal / Scroll-fill: 텍스트를 단어 단위 span 으로 렌더한다.
-        // (reveal 은 CSS stagger 애니메이션, scroll-fill 은 스크롤 연동 투명도)
-        if (type === 'reveal' || type === 'scroll-fill') {
-            this.wordEls = [];
-            const frag = document.createDocumentFragment();
-            const tokens = text.split(/(\s+)/);
-            let wordIndex = 0;
-            for (const token of tokens) {
-                if (token === '')
-                    continue;
-                if (/^\s+$/.test(token)) {
-                    frag.appendChild(document.createTextNode(token));
-                    continue;
-                }
-                const span = document.createElement('span');
-                span.className = `${CLASS}__word`;
-                span.textContent = token;
-                if (type === 'reveal')
-                    span.style.animationDelay = `${wordIndex * 0.06}s`;
-                this.wordEls.push(span);
-                frag.appendChild(span);
-                wordIndex += 1;
-            }
-            this.layerEl.replaceChildren(frag);
-            if (type === 'scroll-fill')
-                this.updateScrollFill();
-            return;
-        }
-        // Text-rotate: 여러 텍스트를 세로로 쌓아 일정 간격으로 위로 롤링하며 순환한다.
-        if (type === 'text-rotate') {
-            const texts = this.getRotateTexts();
-            const list = texts.length ? texts : [text];
-            const track = document.createElement('span');
-            track.className = `${CLASS}__rotate-track`;
-            const build = (t) => {
-                const s = document.createElement('span');
-                s.className = `${CLASS}__rotate-item`;
-                s.textContent = t;
-                return s;
-            };
-            list.forEach((t) => track.appendChild(build(t)));
-            // 마지막 → 첫 항목으로 끊김 없이 순환하도록 첫 항목 복제본을 덧붙인다.
-            if (list.length > 1)
-                track.appendChild(build(list[0]));
-            this.layerEl.replaceChildren(track);
-            return;
-        }
-        // Roll: 동일 텍스트 2개를 세로로 쌓고 hover 시 위로 굴려 교체한다.
-        if (type === 'roll') {
-            const track = document.createElement('span');
-            track.className = `${CLASS}__roll-track`;
-            const first = document.createElement('span');
-            first.className = `${CLASS}__roll-item`;
-            first.textContent = text;
-            const second = first.cloneNode(true);
-            track.append(first, second);
-            this.layerEl.replaceChildren(track);
-            return;
-        }
-        // Typing: 타이핑된 부분 텍스트 뒤에 인라인 캐럿을 붙여 텍스트를 따라가게 한다.
-        // 캐럿은 타이핑 중(isAnimating)에만 표시하고, 완료되면 제거한다.
-        if (type === 'typing') {
-            this.layerEl.textContent = this.displayText;
-            if (this.isAnimating) {
-                const caret = document.createElement('span');
-                caret.className = `${CLASS}__caret`;
-                caret.setAttribute('aria-hidden', 'true');
-                this.layerEl.appendChild(caret);
-            }
-            return;
-        }
-        if ((type === 'wave' || type === 'shake') && visible) {
-            this.layerEl.replaceChildren(...text.split('').map((char, index) => {
-                const span = document.createElement('span');
-                span.style.animationDelay = `${index * 0.05}s`;
-                span.style.display = 'inline-block';
-                span.textContent = char === ' ' ? '\u00A0' : char;
-                return span;
-            }));
-            return;
-        }
-        this.layerEl.textContent = this.displayText || (visible ? text : '');
-    }
-}
-if (!customElements.get('db-animation-text')) {
-    customElements.define('db-animation-text', DbAnimationText);
-}
-
-export { DbAnimationText };
+const t="designbase-wc-animation-text";class DbAnimationText extends HTMLElement{constructor(){super(...arguments),this.timers=[],this.displayText="",this.isVisible=!1,this.isAnimating=!1,this.wordEls=[],this.rotateToken=0}static get observedAttributes(){return["text","texts","interval","trigger","type","speed","repeat","delay","direction","size","color","custom-color","weight","align","gradient-colors","wave-colors","glow-color","clickable","disabled"]}connectedCallback(){this.style.display="inline-block",this.ensureStructure(),this.syncFromAttributes(),this.setupTrigger()}disconnectedCallback(){this.clearTimers(),this.observer?.disconnect(),this.teardownScrollFill(),this.rotateObserver?.disconnect()}attributeChangedCallback(){this.isConnected&&(this.syncFromAttributes(),this.setupTrigger())}getText(){return this.getAttribute("text")||this.textContent?.trim()||""}getRotateTexts(){const t=this.getAttribute("texts");if(t){const e=t.split(",").map(t=>t.trim()).filter(Boolean);if(e.length)return e}const e=this.getText();return e?[e]:[]}getLongestText(){return this.getRotateTexts().reduce((t,e)=>e.length>t.length?e:t,"")}getType(){const t=this.getAttribute("type")||"fade";return["typing","fade","slide","bounce","shake","glow","gradient","wave","flip","scale","decode","roll","reveal","scroll-fill","text-rotate"].includes(t)?t:"fade"}getTrigger(){const t=this.getAttribute("trigger")||"mount";return["mount","hover","click","in-view"].includes(t)?t:"mount"}ensureStructure(){this.ghostEl||(this.ghostEl=document.createElement("span"),this.ghostEl.setAttribute("aria-hidden","true"),this.ghostEl.style.visibility="hidden",this.ghostEl.style.pointerEvents="none",this.ghostEl.style.userSelect="none",this.layerEl=document.createElement("span"),this.layerEl.style.position="absolute",this.layerEl.style.top="0",this.layerEl.style.left="0",this.append(this.ghostEl,this.layerEl),this.addEventListener("mouseenter",()=>{"hover"!==this.getTrigger()||this.hasAttribute("disabled")||"roll"!==this.getType()&&(this.isVisible=!0,this.startAnimation(),this.syncClasses())}),this.addEventListener("mouseleave",()=>{if("hover"!==this.getTrigger())return;if("roll"===this.getType())return;this.isVisible=!1,this.isAnimating=!1,this.clearTimers();const t=this.getType();"typing"!==t&&"decode"!==t||(this.displayText=this.getText()),this.renderLayer(),this.syncClasses()}),this.addEventListener("click",()=>{if(!this.hasAttribute("disabled")){if("click"===this.getTrigger()){if(this.isVisible=!this.isVisible,this.isVisible)this.startAnimation();else{this.isAnimating=!1,this.clearTimers();const t=this.getType();"typing"!==t&&"decode"!==t||(this.displayText=this.getText()),this.renderLayer()}this.syncClasses()}this.hasAttribute("clickable")&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))}}))}clearTimers(){this.timers.forEach(t=>window.clearInterval(t)),this.timers.forEach(t=>window.clearTimeout(t)),this.timers=[]}syncFromAttributes(){const e=this.getText(),i=this.getType(),s=this.getTrigger(),r=Number(this.getAttribute("speed")||1e3),n=Number(this.getAttribute("repeat")||1),l=this.getAttribute("custom-color"),o=(this.getAttribute("gradient-colors")||"#667eea,#764ba2").split(","),a=(this.getAttribute("wave-colors")||"#ff6b6b,#4ecdc4,#45b7d1,#96ceb4,#feca57").split(","),h=this.getAttribute("glow-color")||"#667eea";this.className=[t,"typing"!==i&&`${t}--${i}`,`${t}--${this.getAttribute("size")||"m"}`,`${t}--${this.getAttribute("color")||"primary"}`,`${t}--${this.getAttribute("weight")||"normal"}`,`${t}--${this.getAttribute("align")||"left"}`,`${t}--${this.getAttribute("direction")||"left"}`,this.isVisible&&`${t}--visible`,this.isAnimating&&`${t}--animating`,(this.hasAttribute("clickable")||"click"===s)&&`${t}--clickable`,this.hasAttribute("disabled")&&`${t}--disabled`].filter(Boolean).join(" "),this.style.setProperty("--db-animation-speed",`${Number.isFinite(r)?r:1e3}ms`),this.style.setProperty("--db-animation-iteration-count",0===n?"infinite":String(n)),l&&this.style.setProperty("--db-text-custom",l),this.style.setProperty("--db-wave-colors",a.join(", ")),this.style.setProperty("--db-glow-color",h),this.style.removeProperty("background"),this.style.removeProperty("background-size"),this.style.removeProperty("-webkit-background-clip"),this.style.removeProperty("-webkit-text-fill-color"),this.style.removeProperty("background-clip"),this.layerEl&&("gradient"===i&&o.length>=2?this.layerEl.style.backgroundImage=`linear-gradient(45deg, ${o.join(", ")})`:this.layerEl.style.removeProperty("background-image")),"typing"!==i&&"decode"!==i||"mount"!==s||this.isAnimating?this.isAnimating||(this.displayText=e):this.displayText="";const c="typing"===i||"decode"===i||"roll"===i||"text-rotate"===i,d="roll"===i||"text-rotate"===i?"nowrap":c?"pre-wrap":"";this.ghostEl&&(c?(this.ghostEl.textContent="text-rotate"===i?this.getLongestText():e,this.ghostEl.style.display="inline-block",this.ghostEl.style.whiteSpace=d,this.ghostEl.style.paddingRight="typing"===i?"0.25em":""):(this.ghostEl.textContent="",this.ghostEl.style.display="none")),this.layerEl&&(this.layerEl.className=[`${t}__layer`,"typing"===i&&`${t}--typing`,this.isAnimating&&"typing"===i&&`${t}--animating`].filter(Boolean).join(" "),c?(this.layerEl.style.position="absolute",this.layerEl.style.top="0",this.layerEl.style.left="0",this.layerEl.style.width="100%",this.layerEl.style.height="100%",this.layerEl.style.whiteSpace=d):(this.layerEl.style.position="static",this.layerEl.style.removeProperty("top"),this.layerEl.style.removeProperty("left"),this.layerEl.style.width="auto",this.layerEl.style.height="auto",this.layerEl.style.whiteSpace="")),this.renderLayer()}syncClasses(){this.classList.toggle(`${t}--visible`,this.isVisible),this.classList.toggle(`${t}--animating`,this.isAnimating)}setupTrigger(){this.clearTimers(),this.observer?.disconnect(),this.teardownScrollFill(),this.rotateObserver?.disconnect(),this.rotateObserver=void 0,this.rotateToken++;const t=this.getTrigger(),e=Number(this.getAttribute("delay")||0);if("scroll-fill"!==this.getType())if("text-rotate"!==this.getType()){if("mount"===t){const t=window.setTimeout(()=>{this.isVisible=!0,this.syncClasses(),this.startAnimation()},e);return void this.timers.push(t)}"in-view"===t&&(this.observer=new IntersectionObserver(t=>{t[0]?.isIntersecting&&(window.setTimeout(()=>{this.isVisible=!0,this.syncClasses(),this.startAnimation()},e),this.observer?.disconnect())}),this.observer.observe(this))}else this.setupTextRotate();else this.setupScrollFill()}setupTextRotate(){if(this.getRotateTexts().length<=1)return;const e=++this.rotateToken,start=()=>{if(e!==this.rotateToken||!this.isConnected||"text-rotate"!==this.getType())return;const i=this.layerEl?.querySelector(`.${t}__rotate-track`);if(!i||!i.firstElementChild)return;const s=Array.from(i.children),r=Number(this.getAttribute("speed")||500),n=Math.max(r+200,Number(this.getAttribute("interval")||2e3));let l=0;const apply=t=>{const e=s[0].getBoundingClientRect().height;if(!e)return;const n="cubic-bezier(0.22, 1, 0.36, 1)";var o;i.style.transition=t?`transform ${r}ms ${n}`:"none",i.style.transform=`translateY(-${l*e}px)`,this.style.transition=t?`width ${r}ms ${n}`:"none",this.style.width=`${o=l,s[o].getBoundingClientRect().width}px`};apply(!1);const o=window.setInterval(()=>{if(l+=1,apply(!0),l===s.length-1){const t=window.setTimeout(()=>{l=0,apply(!1)},r);this.timers.push(t)}},n);this.timers.push(o),this.rotateObserver?.disconnect();let a=!0;const h=new ResizeObserver(()=>{a?a=!1:apply(!1)});h.observe(s[0]),this.rotateObserver=h};"undefined"!=typeof document&&document.fonts?document.fonts.ready.then(()=>window.requestAnimationFrame(start)):window.requestAnimationFrame(start)}setupScrollFill(){this.scrollHandler=()=>{null==this.rafId&&(this.rafId=window.requestAnimationFrame(()=>{this.rafId=void 0,this.updateScrollFill()}))},window.addEventListener("scroll",this.scrollHandler,{passive:!0}),window.addEventListener("resize",this.scrollHandler,{passive:!0}),this.updateScrollFill()}teardownScrollFill(){this.scrollHandler&&(window.removeEventListener("scroll",this.scrollHandler),window.removeEventListener("resize",this.scrollHandler),this.scrollHandler=void 0),null!=this.rafId&&(window.cancelAnimationFrame(this.rafId),this.rafId=void 0)}updateScrollFill(){if("scroll-fill"!==this.getType()||0===this.wordEls.length)return;const clamp=t=>Math.max(0,Math.min(1,t)),t=this.getBoundingClientRect(),e=window.innerHeight||document.documentElement.clientHeight,i=.85*e,s=.35*e,r=clamp((i-t.top)/(i-s||1)),n=this.wordEls.length;this.wordEls.forEach((t,e)=>{const i=clamp((r*(n+4)-e)/4);t.style.opacity=String(.18+(1-.18)*i)})}startAnimation(){const t=this.getType(),e=this.getText();if(this.isAnimating=!0,this.syncClasses(),this.syncFromAttributes(),"typing"===t)return void this.startTyping(0);if("decode"===t)return void this.startDecoding(0);if("reveal"===t||"scroll-fill"===t||"roll"===t)return this.displayText=e,"roll"!==t&&this.renderLayer(),this.isAnimating=!1,void this.syncClasses();this.displayText=e,this.renderLayer();const i=Number(this.getAttribute("speed")||1e3),s=window.setTimeout(()=>{this.isAnimating=!1,this.syncClasses(),this.syncFromAttributes()},i);this.timers.push(s)}startTyping(t){const e=this.getText(),i=Number(this.getAttribute("speed")||1e3),s=Number(this.getAttribute("repeat")||1);this.displayText="",this.renderLayer();let r=0;const n=window.setInterval(()=>{if(r>=e.length)if(window.clearInterval(n),0===s||t<s-1){const e=window.setTimeout(()=>this.startTyping(t+1),500);this.timers.push(e)}else this.isAnimating=!1,this.syncClasses();else this.displayText=e.slice(0,r+1),this.renderLayer(),r+=1},Math.max(16,i/Math.max(e.length,1)));this.timers.push(n)}startDecoding(t){const e=this.getText(),i=Number(this.getAttribute("repeat")||1),s="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+";let r=0;const n=window.setInterval(()=>{if(this.displayText=e.split("").map((t,i)=>i<r?e[i]:s[Math.floor(74*Math.random())]||t).join(""),this.renderLayer(),r>=e.length)if(window.clearInterval(n),this.displayText=e,this.renderLayer(),0===i||t<i-1){const e=window.setTimeout(()=>this.startDecoding(t+1),500);this.timers.push(e)}else this.isAnimating=!1,this.syncClasses();r+=1/3},30);this.timers.push(n)}renderLayer(){if(!this.layerEl)return;const e=this.getType(),i=this.getText(),s=this.isVisible||this.isAnimating;if("reveal"===e||"scroll-fill"===e){this.wordEls=[];const s=document.createDocumentFragment(),r=i.split(/(\s+)/);let n=0;for(const i of r){if(""===i)continue;if(/^\s+$/.test(i)){s.appendChild(document.createTextNode(i));continue}const r=document.createElement("span");r.className=`${t}__word`,r.textContent=i,"reveal"===e&&(r.style.animationDelay=.06*n+"s"),this.wordEls.push(r),s.appendChild(r),n+=1}return this.layerEl.replaceChildren(s),void("scroll-fill"===e&&this.updateScrollFill())}if("text-rotate"===e){const e=this.getRotateTexts(),s=e.length?e:[i],r=document.createElement("span");r.className=`${t}__rotate-track`;const build=e=>{const i=document.createElement("span");return i.className=`${t}__rotate-item`,i.textContent=e,i};return s.forEach(t=>r.appendChild(build(t))),s.length>1&&r.appendChild(build(s[0])),void this.layerEl.replaceChildren(r)}if("roll"===e){const e=document.createElement("span");e.className=`${t}__roll-track`;const s=document.createElement("span");s.className=`${t}__roll-item`,s.textContent=i;const r=s.cloneNode(!0);return e.append(s,r),void this.layerEl.replaceChildren(e)}if("typing"!==e)"wave"!==e&&"shake"!==e||!s?this.layerEl.textContent=this.displayText||(s?i:""):this.layerEl.replaceChildren(...i.split("").map((t,e)=>{const i=document.createElement("span");return i.style.animationDelay=.05*e+"s",i.style.display="inline-block",i.textContent=" "===t?" ":t,i}));else if(this.layerEl.textContent=this.displayText,this.isAnimating){const e=document.createElement("span");e.className=`${t}__caret`,e.setAttribute("aria-hidden","true"),this.layerEl.appendChild(e)}}}customElements.get("db-animation-text")||customElements.define("db-animation-text",DbAnimationText);export{DbAnimationText};