masoneffect 2.0.11 → 2.0.13

package/dist/svelte/index.mjs

@@ -1080,7 +1080,7 @@ class Typing {
     style.id = "masoneffect-typing-styles";
     style.textContent = `
       .typing-char {
-        transition: opacity 0.2s ease-in;
+        transition: opacity 0.3s ease-in;
         display: inline-block;
       }
       .typing-cursor {
@@ -1088,6 +1088,7 @@ class Typing {
       }
     `;
     document.head.appendChild(style);
+    this.container.style.whiteSpace = "pre-wrap";
   }
   setupVisibilityManager() {
     this.visibilityManager = new VisibilityManager(this.container, {
@@ -1189,10 +1190,11 @@ class Typing {
     for (let i = 0; i < textWithoutCursor.length; i++) {
       const char = textWithoutCursor[i];
       const isNewChar = i >= previousTextWithoutCursor.length;
+      const displayChar = char === " " ? "&nbsp;" : this.escapeHtml(char);
       if (isNewChar) {
-        html += `<span class="typing-char typing-fade-in" style="opacity: 0;">${this.escapeHtml(char)}</span>`;
+        html += `<span class="typing-char typing-fade-in" style="opacity: 0;">${displayChar}</span>`;
       } else {
-        html += `<span class="typing-char" style="opacity: 1;">${this.escapeHtml(char)}</span>`;
+        html += `<span class="typing-char" style="opacity: 1;">${displayChar}</span>`;
       }
     }
     if (hasCursor) {
@@ -1465,7 +1467,188 @@ class ScrollFadeIn {
     this.container.style.transition = "";
   }
 }
-function create_fragment$3(ctx) {
+class TextSpin {
+  constructor(container, options) {
+    this.container = typeof container === "string" ? document.querySelector(container) : container;
+    if (!this.container) {
+      throw new Error("Container element not found");
+    }
+    if (!options.text) {
+      throw new Error("Text is required");
+    }
+    this.config = {
+      text: options.text,
+      delay: options.delay ?? 0.2,
+      duration: options.duration ?? 0.6,
+      randomDelay: options.randomDelay ?? 2,
+      threshold: options.threshold ?? 0.1,
+      rootMargin: options.rootMargin ?? "0px",
+      root: options.root ?? null,
+      triggerOnce: options.triggerOnce ?? false,
+      enabled: options.enabled ?? true,
+      onStart: options.onStart || null,
+      onComplete: options.onComplete || null
+    };
+    this.visibilityManager = null;
+    this.textElements = [];
+    this.randomPoints = [];
+    this.hasTriggered = false;
+    this.isActive = false;
+    this.init();
+  }
+  init() {
+    this.injectStyles();
+    this.createTextStructure();
+    this.setupVisibilityManager();
+  }
+  injectStyles() {
+    if (document.getElementById("masoneffect-textspin-styles")) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = "masoneffect-textspin-styles";
+    style.textContent = `
+      .masoneffect-textspin {
+        display: inline-block;
+      }
+      .masoneffect-textspin-char {
+        display: inline-block;
+        opacity: 0;
+        transform: rotateY(90deg);
+        transition: opacity ${this.config.duration}s ease-out, transform ${this.config.duration}s ease-out;
+      }
+      .masoneffect-textspin-char.active {
+        opacity: 1;
+        transform: rotateY(0deg);
+      }
+      .masoneffect-textspin-char.space {
+        width: 0.25em;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+  createTextStructure() {
+    this.container.innerHTML = "";
+    this.textElements = [];
+    this.randomPoints = [];
+    const chars = this.config.text.split("");
+    chars.forEach(() => {
+      this.randomPoints.push(Math.random());
+    });
+    chars.forEach((char, index) => {
+      const charElement = document.createElement("span");
+      charElement.className = "masoneffect-textspin-char";
+      if (char === " ") {
+        charElement.classList.add("space");
+        charElement.innerHTML = "&nbsp;";
+      } else {
+        charElement.textContent = char;
+      }
+      this.container.appendChild(charElement);
+      this.textElements.push(charElement);
+    });
+    this.container.classList.add("masoneffect-textspin");
+  }
+  setupVisibilityManager() {
+    this.visibilityManager = new VisibilityManager(this.container, {
+      threshold: this.config.threshold,
+      rootMargin: this.config.rootMargin,
+      root: this.config.root,
+      onVisible: () => {
+        if (this.config.enabled) {
+          if (!this.config.triggerOnce || !this.hasTriggered) {
+            this.hasTriggered = true;
+            this.start();
+          }
+        }
+      },
+      onHidden: () => {
+        if (this.config.enabled) {
+          this.stop();
+          if (!this.config.triggerOnce) {
+            this.hasTriggered = false;
+          }
+        }
+      }
+    });
+  }
+  start() {
+    if (this.isActive) return;
+    this.isActive = true;
+    if (this.config.onStart) {
+      this.config.onStart();
+    }
+    this.textElements.forEach((element2, index) => {
+      const delay = this.config.delay + this.randomPoints[index] * this.config.randomDelay;
+      element2.style.transitionDelay = `${delay}s`;
+      requestAnimationFrame(() => {
+        element2.classList.add("active");
+      });
+    });
+    const maxDelay = this.config.delay + this.config.randomDelay + this.config.duration;
+    setTimeout(() => {
+      if (this.config.onComplete) {
+        this.config.onComplete();
+      }
+    }, maxDelay * 1e3);
+  }
+  stop() {
+    if (!this.isActive) return;
+    this.isActive = false;
+    this.textElements.forEach((element2) => {
+      element2.classList.remove("active");
+      element2.style.transitionDelay = "";
+    });
+  }
+  reset() {
+    this.stop();
+    this.hasTriggered = false;
+  }
+  // 텍스트 업데이트
+  updateText(newText) {
+    this.config.text = newText;
+    this.createTextStructure();
+    if (this.isActive) {
+      this.start();
+    }
+  }
+  // 설정 업데이트
+  updateConfig(newConfig) {
+    const wasActive = this.isActive;
+    this.stop();
+    this.config = {
+      ...this.config,
+      ...newConfig,
+      text: newConfig.text ?? this.config.text,
+      onStart: newConfig.onStart ?? this.config.onStart,
+      onComplete: newConfig.onComplete ?? this.config.onComplete
+    };
+    if (newConfig.text !== void 0) {
+      this.createTextStructure();
+    }
+    if (newConfig.threshold !== void 0 || newConfig.rootMargin !== void 0 || newConfig.root !== void 0) {
+      if (this.visibilityManager) {
+        this.visibilityManager.destroy();
+        this.visibilityManager = null;
+      }
+      this.setupVisibilityManager();
+    }
+    if (wasActive && this.config.enabled) {
+      this.start();
+    }
+  }
+  // 파괴 및 정리
+  destroy() {
+    this.stop();
+    if (this.visibilityManager) {
+      this.visibilityManager.destroy();
+      this.visibilityManager = null;
+    }
+    this.container.innerHTML = "";
+    this.container.classList.remove("masoneffect-textspin");
+  }
+}
+function create_fragment$4(ctx) {
   let div;
   return {
     c() {
@@ -1517,7 +1700,7 @@ function create_fragment$3(ctx) {
     }
   };
 }
-function instance_1$2($$self, $$props, $$invalidate) {
+function instance_1$3($$self, $$props, $$invalidate) {
   let { text = "mason effect" } = $$props;
   let { densityStep = 2 } = $$props;
   let { maxParticles = 3200 } = $$props;
@@ -1663,7 +1846,7 @@ function instance_1$2($$self, $$props, $$invalidate) {
 class TextToParticle_1 extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance_1$2, create_fragment$3, safe_not_equal, {
+    init(this, options, instance_1$3, create_fragment$4, safe_not_equal, {
       text: 3,
       densityStep: 4,
       maxParticles: 5,
@@ -1698,7 +1881,7 @@ class TextToParticle_1 extends SvelteComponent {
     return this.$$.ctx[19];
   }
 }
-function create_fragment$2(ctx) {
+function create_fragment$3(ctx) {
   let div;
   return {
     c() {
@@ -1750,7 +1933,7 @@ function create_fragment$2(ctx) {
     }
   };
 }
-function instance_1$1($$self, $$props, $$invalidate) {
+function instance_1$2($$self, $$props, $$invalidate) {
   let { targetValue = 0 } = $$props;
   let { duration = 2e3 } = $$props;
   let { startValue = 0 } = $$props;
@@ -1890,7 +2073,7 @@ function instance_1$1($$self, $$props, $$invalidate) {
 class Count_1 extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance_1$1, create_fragment$2, safe_not_equal, {
+    init(this, options, instance_1$2, create_fragment$3, safe_not_equal, {
       targetValue: 3,
       duration: 4,
       startValue: 5,
@@ -1928,7 +2111,7 @@ class Count_1 extends SvelteComponent {
     return this.$$.ctx[16];
   }
 }
-function create_fragment$1(ctx) {
+function create_fragment$2(ctx) {
   let div;
   return {
     c() {
@@ -2036,7 +2219,7 @@ function instance($$self, $$props, $$invalidate) {
 class Typing_1 extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance, create_fragment$1, safe_not_equal, {
+    init(this, options, instance, create_fragment$2, safe_not_equal, {
       start: 3,
       stop: 4,
       reset: 5,
@@ -2060,7 +2243,7 @@ class Typing_1 extends SvelteComponent {
     return this.$$.ctx[7];
   }
 }
-function create_fragment(ctx) {
+function create_fragment$1(ctx) {
   let div;
   let current;
   const default_slot_template = (
@@ -2160,7 +2343,7 @@ function create_fragment(ctx) {
     }
   };
 }
-function instance_1($$self, $$props, $$invalidate) {
+function instance_1$1($$self, $$props, $$invalidate) {
   let { $$slots: slots = {}, $$scope } = $$props;
   let { direction = "bottom" } = $$props;
   let { distance = "50px" } = $$props;
@@ -2297,7 +2480,7 @@ function instance_1($$self, $$props, $$invalidate) {
 class ScrollFadeIn_1 extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance_1, create_fragment, safe_not_equal, {
+    init(this, options, instance_1$1, create_fragment$1, safe_not_equal, {
       direction: 3,
       distance: 4,
       duration: 5,
@@ -2331,10 +2514,235 @@ class ScrollFadeIn_1 extends SvelteComponent {
     return this.$$.ctx[15];
   }
 }
+function create_fragment(ctx) {
+  let div;
+  return {
+    c() {
+      div = element("div");
+      attr(
+        div,
+        "class",
+        /*className*/
+        ctx[0]
+      );
+      attr(
+        div,
+        "style",
+        /*style*/
+        ctx[1]
+      );
+    },
+    m(target, anchor) {
+      insert(target, div, anchor);
+      ctx[21](div);
+    },
+    p(ctx2, [dirty]) {
+      if (dirty & /*className*/
+      1) {
+        attr(
+          div,
+          "class",
+          /*className*/
+          ctx2[0]
+        );
+      }
+      if (dirty & /*style*/
+      2) {
+        attr(
+          div,
+          "style",
+          /*style*/
+          ctx2[1]
+        );
+      }
+    },
+    i: noop,
+    o: noop,
+    d(detaching) {
+      if (detaching) {
+        detach(div);
+      }
+      ctx[21](null);
+    }
+  };
+}
+function instance_1($$self, $$props, $$invalidate) {
+  let { text = "" } = $$props;
+  let { delay = 0.2 } = $$props;
+  let { duration = 0.6 } = $$props;
+  let { randomDelay = 2 } = $$props;
+  let { threshold = 0.1 } = $$props;
+  let { rootMargin = "0px" } = $$props;
+  let { root = null } = $$props;
+  let { triggerOnce = false } = $$props;
+  let { enabled = true } = $$props;
+  let { className = "" } = $$props;
+  let { style = {} } = $$props;
+  let { onStart = null } = $$props;
+  let { onComplete = null } = $$props;
+  let container;
+  let instance2 = null;
+  onMount(() => {
+    if (!container) return;
+    const options = {
+      text,
+      delay,
+      duration,
+      randomDelay,
+      threshold,
+      rootMargin,
+      root,
+      triggerOnce,
+      enabled,
+      onStart: onStart || void 0,
+      onComplete: onComplete || void 0
+    };
+    $$invalidate(20, instance2 = new TextSpin(container, options));
+  });
+  onDestroy(() => {
+    if (instance2) {
+      instance2.destroy();
+      $$invalidate(20, instance2 = null);
+    }
+  });
+  function start() {
+    if (instance2) instance2.start();
+  }
+  function stop() {
+    if (instance2) instance2.stop();
+  }
+  function reset() {
+    if (instance2) instance2.reset();
+  }
+  function updateText(newText) {
+    if (instance2) instance2.updateText(newText);
+  }
+  function updateConfig(config) {
+    if (instance2) instance2.updateConfig(config);
+  }
+  function destroy() {
+    if (instance2) {
+      instance2.destroy();
+      $$invalidate(20, instance2 = null);
+    }
+  }
+  function div_binding($$value) {
+    binding_callbacks[$$value ? "unshift" : "push"](() => {
+      container = $$value;
+      $$invalidate(2, container);
+    });
+  }
+  $$self.$$set = ($$props2) => {
+    if ("text" in $$props2) $$invalidate(3, text = $$props2.text);
+    if ("delay" in $$props2) $$invalidate(4, delay = $$props2.delay);
+    if ("duration" in $$props2) $$invalidate(5, duration = $$props2.duration);
+    if ("randomDelay" in $$props2) $$invalidate(6, randomDelay = $$props2.randomDelay);
+    if ("threshold" in $$props2) $$invalidate(7, threshold = $$props2.threshold);
+    if ("rootMargin" in $$props2) $$invalidate(8, rootMargin = $$props2.rootMargin);
+    if ("root" in $$props2) $$invalidate(9, root = $$props2.root);
+    if ("triggerOnce" in $$props2) $$invalidate(10, triggerOnce = $$props2.triggerOnce);
+    if ("enabled" in $$props2) $$invalidate(11, enabled = $$props2.enabled);
+    if ("className" in $$props2) $$invalidate(0, className = $$props2.className);
+    if ("style" in $$props2) $$invalidate(1, style = $$props2.style);
+    if ("onStart" in $$props2) $$invalidate(12, onStart = $$props2.onStart);
+    if ("onComplete" in $$props2) $$invalidate(13, onComplete = $$props2.onComplete);
+  };
+  $$self.$$.update = () => {
+    if ($$self.$$.dirty & /*instance, text, delay, duration, randomDelay, threshold, rootMargin, root, triggerOnce, enabled, onStart, onComplete*/
+    1064952) {
+      {
+        if (instance2) {
+          instance2.updateConfig({
+            text,
+            delay,
+            duration,
+            randomDelay,
+            threshold,
+            rootMargin,
+            root,
+            triggerOnce,
+            enabled,
+            onStart: onStart || void 0,
+            onComplete: onComplete || void 0
+          });
+        }
+      }
+    }
+  };
+  return [
+    className,
+    style,
+    container,
+    text,
+    delay,
+    duration,
+    randomDelay,
+    threshold,
+    rootMargin,
+    root,
+    triggerOnce,
+    enabled,
+    onStart,
+    onComplete,
+    start,
+    stop,
+    reset,
+    updateText,
+    updateConfig,
+    destroy,
+    instance2,
+    div_binding
+  ];
+}
+class TextSpin_1 extends SvelteComponent {
+  constructor(options) {
+    super();
+    init(this, options, instance_1, create_fragment, safe_not_equal, {
+      text: 3,
+      delay: 4,
+      duration: 5,
+      randomDelay: 6,
+      threshold: 7,
+      rootMargin: 8,
+      root: 9,
+      triggerOnce: 10,
+      enabled: 11,
+      className: 0,
+      style: 1,
+      onStart: 12,
+      onComplete: 13,
+      start: 14,
+      stop: 15,
+      reset: 16,
+      updateText: 17,
+      updateConfig: 18,
+      destroy: 19
+    });
+  }
+  get start() {
+    return this.$$.ctx[14];
+  }
+  get stop() {
+    return this.$$.ctx[15];
+  }
+  get reset() {
+    return this.$$.ctx[16];
+  }
+  get updateText() {
+    return this.$$.ctx[17];
+  }
+  get updateConfig() {
+    return this.$$.ctx[18];
+  }
+  get destroy() {
+    return this.$$.ctx[19];
+  }
+}
 export {
   Count_1 as Count,
   TextToParticle_1 as MasonEffect,
   ScrollFadeIn_1 as ScrollFadeIn,
+  TextSpin_1 as TextSpin,
   TextToParticle_1 as TextToParticle,
   Typing_1 as Typing,
   TextToParticle_1 as default

package/dist/svelte/scrollFadeIn/index.d.ts

@@ -98,6 +98,45 @@ export declare interface ScrollFadeInOptions {
     onComplete?: () => void;
 }
 
+export declare class TextSpin {
+    container: HTMLElement;
+    config: Required<Omit<TextSpinOptions, 'onStart' | 'onComplete' | 'root'>> & {
+        root: HTMLElement | null;
+        onStart: TextSpinOptions['onStart'];
+        onComplete: TextSpinOptions['onComplete'];
+    };
+    visibilityManager: VisibilityManager | null;
+    textElements: HTMLElement[];
+    randomPoints: number[];
+    hasTriggered: boolean;
+    isActive: boolean;
+    constructor(container: HTMLElement | string, options: TextSpinOptions);
+    init(): void;
+    injectStyles(): void;
+    createTextStructure(): void;
+    setupVisibilityManager(): void;
+    start(): void;
+    stop(): void;
+    reset(): void;
+    updateText(newText: string): void;
+    updateConfig(newConfig: Partial<TextSpinOptions>): void;
+    destroy(): void;
+}
+
+export declare interface TextSpinOptions {
+    text: string;
+    delay?: number;
+    duration?: number;
+    randomDelay?: number;
+    threshold?: number;
+    rootMargin?: string;
+    root?: HTMLElement | null;
+    triggerOnce?: boolean;
+    enabled?: boolean;
+    onStart?: () => void;
+    onComplete?: () => void;
+}
+
 declare class TextToParticle {
     container: HTMLElement;
     config: Required<Omit<TextToParticleOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {

package/dist/svelte/textSpin/index.cjs

@@ -0,0 +1 @@
+"use strict";var t=Object.defineProperty,e=(e,i,n)=>((e,i,n)=>i in e?t(e,i,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[i]=n)(e,"symbol"!=typeof i?i+"":i,n);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("svelte");function n(){}function s(t){return t()}function o(){return Object.create(null)}function r(t){t.forEach(s)}function a(t){return"function"==typeof t}function l(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function c(t){t.parentNode&&t.parentNode.removeChild(t)}function h(t,e,i){null==i?t.removeAttribute(e):t.getAttribute(e)!==i&&t.setAttribute(e,i)}let d;function u(t){d=t}const f=[],g=[];let p=[];const m=[],y=Promise.resolve();let b=!1;function v(t){p.push(t)}const $=new Set;let x=0;function M(){if(0!==x)return;const t=d;do{try{for(;x<f.length;){const t=f[x];x++,u(t),O(t.$$)}}catch(e){throw f.length=0,x=0,e}for(u(null),f.length=0,x=0;g.length;)g.pop()();for(let t=0;t<p.length;t+=1){const e=p[t];$.has(e)||($.add(e),e())}p.length=0}while(f.length);for(;m.length;)m.pop()();b=!1,$.clear(),u(t)}function O(t){if(null!==t.fragment){t.update(),r(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(v)}}const C=new Set;function V(t,e){const i=t.$$;null!==i.fragment&&(!function(t){const e=[],i=[];p.forEach(n=>-1===t.indexOf(n)?e.push(n):i.push(n)),i.forEach(t=>t()),p=e}(i.after_update),r(i.on_destroy),i.fragment&&i.fragment.d(e),i.on_destroy=i.fragment=null,i.ctx=[])}function _(t,e){-1===t.$$.dirty[0]&&(f.push(t),b||(b=!0,y.then(M)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function S(t,e,i,l,h,f,g=null,p=[-1]){const m=d;u(t);const y=t.$$={fragment:null,ctx:[],props:f,update:n,not_equal:h,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(m?m.$$.context:[])),callbacks:o(),dirty:p,skip_bound:!1,root:e.target||m.$$.root};g&&g(y.root);let b=!1;if(y.ctx=i?i(t,e.props||{},(e,i,...n)=>{const s=n.length?n[0]:i;return y.ctx&&h(y.ctx[e],y.ctx[e]=s)&&(!y.skip_bound&&y.bound[e]&&y.bound[e](s),b&&_(t,e)),i}):[],y.update(),b=!0,r(y.before_update),y.fragment=!!l&&l(y.ctx),e.target){if(e.hydrate){const t=(O=e.target,Array.from(O.childNodes));y.fragment&&y.fragment.l(t),t.forEach(c)}else y.fragment&&y.fragment.c();e.intro&&(($=t.$$.fragment)&&$.i&&(C.delete($),$.i(x))),function(t,e,i){const{fragment:n,after_update:o}=t.$$;n&&n.m(e,i),v(()=>{const e=t.$$.on_mount.map(s).filter(a);t.$$.on_destroy?t.$$.on_destroy.push(...e):r(e),t.$$.on_mount=[]}),o.forEach(v)}(t,e.target,e.anchor),M()}var $,x,O;u(m)}class w{constructor(){e(this,"$$"),e(this,"$$set")}$destroy(){V(this,1),this.$destroy=n}$on(t,e){if(!a(e))return n;const i=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return i.push(e),()=>{const t=i.indexOf(e);-1!==t&&i.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class E{constructor(t,e={}){this.container=t,this.options={threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",root:e.root??null,onVisible:e.onVisible,onHidden:e.onHidden},this.intersectionObserver=null,this.visibilityChangeHandler=null,this.isVisible=!1,this.isPageVisible="undefined"==typeof document||!document.hidden,this.setupIntersectionObserver(),this.setupPageVisibility()}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void(this.isPageVisible&&this.options.onVisible&&this.options.onVisible());this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)e.target===this.container&&(e.isIntersecting?(this.isVisible=!0,this.isPageVisible&&this.options.onVisible&&this.options.onVisible()):(this.isVisible=!1,this.options.onHidden&&this.options.onHidden()))},{threshold:this.options.threshold,rootMargin:this.options.rootMargin,root:this.options.root||null}),this.intersectionObserver.observe(this.container)}setupPageVisibility(){"undefined"!=typeof document&&(this.visibilityChangeHandler=()=>{const t=this.isPageVisible;this.isPageVisible=!document.hidden,document.hidden?this.options.onHidden&&this.options.onHidden():t!==this.isPageVisible&&this.isVisible&&this.options.onVisible&&this.options.onVisible()},document.addEventListener("visibilitychange",this.visibilityChangeHandler),document.hidden&&this.isVisible&&this.options.onHidden&&this.options.onHidden())}getIsVisible(){return this.isVisible&&this.isPageVisible}updateOptions(t){this.options={...this.options,...t},this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.setupIntersectionObserver()}destroy(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityChangeHandler&&"undefined"!=typeof document&&(document.removeEventListener("visibilitychange",this.visibilityChangeHandler),this.visibilityChangeHandler=null)}}class T{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");if(!e.text)throw new Error("Text is required");this.config={text:e.text,delay:e.delay??.2,duration:e.duration??.6,randomDelay:e.randomDelay??2,threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",root:e.root??null,triggerOnce:e.triggerOnce??!1,enabled:e.enabled??!0,onStart:e.onStart||null,onComplete:e.onComplete||null},this.visibilityManager=null,this.textElements=[],this.randomPoints=[],this.hasTriggered=!1,this.isActive=!1,this.init()}init(){this.injectStyles(),this.createTextStructure(),this.setupVisibilityManager()}injectStyles(){if(document.getElementById("masoneffect-textspin-styles"))return;const t=document.createElement("style");t.id="masoneffect-textspin-styles",t.textContent=`\n      .masoneffect-textspin {\n        display: inline-block;\n      }\n      .masoneffect-textspin-char {\n        display: inline-block;\n        opacity: 0;\n        transform: rotateY(90deg);\n        transition: opacity ${this.config.duration}s ease-out, transform ${this.config.duration}s ease-out;\n      }\n      .masoneffect-textspin-char.active {\n        opacity: 1;\n        transform: rotateY(0deg);\n      }\n      .masoneffect-textspin-char.space {\n        width: 0.25em;\n      }\n    `,document.head.appendChild(t)}createTextStructure(){this.container.innerHTML="",this.textElements=[],this.randomPoints=[];const t=this.config.text.split("");t.forEach(()=>{this.randomPoints.push(Math.random())}),t.forEach((t,e)=>{const i=document.createElement("span");i.className="masoneffect-textspin-char"," "===t?(i.classList.add("space"),i.innerHTML="&nbsp;"):i.textContent=t,this.container.appendChild(i),this.textElements.push(i)}),this.container.classList.add("masoneffect-textspin")}setupVisibilityManager(){this.visibilityManager=new E(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,root:this.config.root,onVisible:()=>{this.config.enabled&&(this.config.triggerOnce&&this.hasTriggered||(this.hasTriggered=!0,this.start()))},onHidden:()=>{this.config.enabled&&(this.stop(),this.config.triggerOnce||(this.hasTriggered=!1))}})}start(){if(this.isActive)return;this.isActive=!0,this.config.onStart&&this.config.onStart(),this.textElements.forEach((t,e)=>{const i=this.config.delay+this.randomPoints[e]*this.config.randomDelay;t.style.transitionDelay=`${i}s`,requestAnimationFrame(()=>{t.classList.add("active")})});const t=this.config.delay+this.config.randomDelay+this.config.duration;setTimeout(()=>{this.config.onComplete&&this.config.onComplete()},1e3*t)}stop(){this.isActive&&(this.isActive=!1,this.textElements.forEach(t=>{t.classList.remove("active"),t.style.transitionDelay=""}))}reset(){this.stop(),this.hasTriggered=!1}updateText(t){this.config.text=t,this.createTextStructure(),this.isActive&&this.start()}updateConfig(t){const e=this.isActive;this.stop(),this.config={...this.config,...t,text:t.text??this.config.text,onStart:t.onStart??this.config.onStart,onComplete:t.onComplete??this.config.onComplete},void 0!==t.text&&this.createTextStructure(),void 0===t.threshold&&void 0===t.rootMargin&&void 0===t.root||(this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.setupVisibilityManager()),e&&this.config.enabled&&this.start()}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.container.innerHTML="",this.container.classList.remove("masoneffect-textspin")}}function H(t){let e;return{c(){var i;i="div",e=document.createElement(i),h(e,"class",t[0]),h(e,"style",t[1])},m(i,n){!function(t,e,i){t.insertBefore(e,i||null)}(i,e,n),t[21](e)},p(t,[i]){1&i&&h(e,"class",t[0]),2&i&&h(e,"style",t[1])},i:n,o:n,d(i){i&&c(e),t[21](null)}}}function P(t,e,n){let s,{text:o=""}=e,{delay:r=.2}=e,{duration:a=.6}=e,{randomDelay:l=2}=e,{threshold:c=.1}=e,{rootMargin:h="0px"}=e,{root:d=null}=e,{triggerOnce:u=!1}=e,{enabled:f=!0}=e,{className:p=""}=e,{style:m={}}=e,{onStart:y=null}=e,{onComplete:b=null}=e,v=null;return i.onMount(()=>{if(!s)return;n(20,v=new T(s,{text:o,delay:r,duration:a,randomDelay:l,threshold:c,rootMargin:h,root:d,triggerOnce:u,enabled:f,onStart:y||void 0,onComplete:b||void 0}))}),i.onDestroy(()=>{v&&(v.destroy(),n(20,v=null))}),t.$$set=t=>{"text"in t&&n(3,o=t.text),"delay"in t&&n(4,r=t.delay),"duration"in t&&n(5,a=t.duration),"randomDelay"in t&&n(6,l=t.randomDelay),"threshold"in t&&n(7,c=t.threshold),"rootMargin"in t&&n(8,h=t.rootMargin),"root"in t&&n(9,d=t.root),"triggerOnce"in t&&n(10,u=t.triggerOnce),"enabled"in t&&n(11,f=t.enabled),"className"in t&&n(0,p=t.className),"style"in t&&n(1,m=t.style),"onStart"in t&&n(12,y=t.onStart),"onComplete"in t&&n(13,b=t.onComplete)},t.$$.update=()=>{1064952&t.$$.dirty&&v&&v.updateConfig({text:o,delay:r,duration:a,randomDelay:l,threshold:c,rootMargin:h,root:d,triggerOnce:u,enabled:f,onStart:y||void 0,onComplete:b||void 0})},[p,m,s,o,r,a,l,c,h,d,u,f,y,b,function(){v&&v.start()},function(){v&&v.stop()},function(){v&&v.reset()},function(t){v&&v.updateText(t)},function(t){v&&v.updateConfig(t)},function(){v&&(v.destroy(),n(20,v=null))},v,function(t){g[t?"unshift":"push"](()=>{s=t,n(2,s)})}]}exports.TextSpin=T,exports.default=class extends w{constructor(t){super(),S(this,t,P,H,l,{text:3,delay:4,duration:5,randomDelay:6,threshold:7,rootMargin:8,root:9,triggerOnce:10,enabled:11,className:0,style:1,onStart:12,onComplete:13,start:14,stop:15,reset:16,updateText:17,updateConfig:18,destroy:19})}get start(){return this.$$.ctx[14]}get stop(){return this.$$.ctx[15]}get reset(){return this.$$.ctx[16]}get updateText(){return this.$$.ctx[17]}get updateConfig(){return this.$$.ctx[18]}get destroy(){return this.$$.ctx[19]}};