@dialpad/dialtone-vue/dist/lib/motion-text/motion-text.cjs

Vue component library for Dialpad's design system Dialtone

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("./motion-text-constants.cjs"),l=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),m={compatConfig:{MODE:3},name:"DtRecipeMotionText",inheritAttrs:!1,props:{text:{type:String,default:""},animationMode:{type:String,default:"gradient-in",validator:e=>h.MOTION_TEXT_ANIMATION_MODES.includes(e)},speed:{type:String,default:"md",validator:e=>h.MOTION_TEXT_SPEEDS.includes(e)},autoStart:{type:Boolean,default:!0},loop:{type:Boolean,default:!1},respectsReducedMotion:{type:Boolean,default:!0},screenReaderText:{type:String,default:""}},emits:["start","complete","progress","pause","resume"],data(){return{words:[],visibleWordCount:0,visibleCharsPerWord:[],isAnimating:!1,isPaused:!1,isLooped:!1,animationTimeouts:[],prefersReducedMotion:!1,animationKey:0}},computed:{timing(){return h.MOTION_TEXT_TIMING_PRESETS[this.speed]},componentStyles(){return{"--dt-recipe-motion-text-duration":`${this.timing.duration}ms`,"--dt-recipe-motion-text-char-duration":`${this.timing.duration}ms`,"--dt-recipe-motion-text-word-duration":`${this.timing.duration*2}ms`}},isStaticAnimationMode(){return this.animationMode==="gradient-sweep"||this.animationMode==="shimmer"},motionTextClasses(){return["dt-recipe-motion-text",`dt-recipe-motion-text--${this.animationMode}`,{"dt-recipe-motion-text--animating":this.isAnimating,"dt-recipe-motion-text--paused":this.isPaused,"dt-recipe-motion-text--looped":this.isLooped},this.$attrs.class]}},watch:{text(){this.reset(),this.initializeContent()},loop:{handler(e){this.isLooped=e},immediate:!0}},mounted(){this.checkReducedMotion(),this.initializeContent()},beforeUnmount(){this.clearTimeouts()},methods:{processTextToChars(e){const t=[],i=(s,n=0)=>{var r;if(s.nodeType===Node.TEXT_NODE){const o=((r=s.textContent)==null?void 0:r.match(/\S+\s*/g))||[];return t.push(...o.map((a,d)=>({text:a,chars:a.split(""),index:n+d}))),n+o.length}else if(s.nodeType===Node.ELEMENT_NODE){let o=n;return Array.from(s.childNodes).forEach(a=>{o=i(a,o)}),o}return n};return i(e),t},processDirectText(e){return e?(e.match(/\S+\s*/g)||[]).map((i,s)=>({text:i,chars:i.split(""),index:s})):[]},checkReducedMotion(){typeof window<"u"&&window.matchMedia&&(this.prefersReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches)},clearTimeouts(){this.animationTimeouts.forEach(e=>clearTimeout(e)),this.animationTimeouts=[]},start(){if(!this.isAnimating){if(this.isAnimating=!0,this.isPaused=!1,this.$emit("start"),this.respectsReducedMotion&&this.prefersReducedMotion){this.showAllContent();return}if(this.animationMode==="none"){this.showAllContent();return}this.isStaticAnimationMode||this.showNextWord()}},pause(){!this.isAnimating||this.isPaused||(this.isPaused=!0,this.clearTimeouts(),this.$emit("pause"))},resume(){this.isPaused&&(this.isPaused=!1,this.$emit("resume"),this.showNextWord())},reset(){this.clearTimeouts(),this.isAnimating=!1,this.isPaused=!1,this.visibleWordCount=0,this.visibleCharsPerWord=Array(this.words.length).fill(0),this.animationKey++},skipToEnd(){this.showAllContent()},showAllContent(){this.visibleWordCount=this.words.length,this.visibleCharsPerWord=this.words.map(e=>e.chars.length),setTimeout(()=>{this.isAnimating=!1,this.$emit("complete")},0)},showNextWord(){if(this.isPaused||this.visibleWordCount>=this.words.length){this.visibleWordCount>=this.words.length&&this.completeAnimation();return}const e=setTimeout(()=>{this.visibleWordCount++,this.$emit("progress",{wordsComplete:this.visibleWordCount,totalWords:this.words.length,progress:this.visibleWordCount/this.words.length}),this.animateCharsForWord(this.visibleWordCount-1)},this.timing.wordDelay);this.animationTimeouts.push(e)},animateCharsForWord(e){if(this.isPaused||e>=this.words.length)return;this.visibleCharsPerWord[e]=0;const t=this.words[e].chars.length,i=()=>{if(this.isPaused||this.visibleCharsPerWord[e]>=t){this.visibleCharsPerWord[e]>=t&&this.showNextWord();return}this.visibleCharsPerWord[e]++;const s=setTimeout(i,this.timing.characterDelay);this.animationTimeouts.push(s)};i()},completeAnimation(){if(this.isAnimating=!1,this.clearTimeouts(),this.$emit("complete"),this.loop){const e=setTimeout(()=>{this.reset(),this.$nextTick(()=>{this.start()})},500);this.animationTimeouts.push(e)}},initializeContent(){if(this.isStaticAnimationMode){this.autoStart&&this.$nextTick(()=>this.start());return}this.text?this.words=this.processDirectText(this.text):this.$refs.contentRef&&(this.words=this.processTextToChars(this.$refs.contentRef)),this.visibleCharsPerWord=Array(this.words.length).fill(0),this.visibleWordCount=0,this.autoStart&&this.words.length>0&&this.$nextTick(()=>this.start())}}};var c=function(){var t=this,i=t._self._c;return i("span",{ref:"contentRef",class:t.motionTextClasses,style:t.componentStyles,attrs:{"data-text-content":t.isStaticAnimationMode?t.text:void 0,"aria-live":t.isAnimating?"polite":"off","aria-label":t.screenReaderText||void 0}},[t.screenReaderText?i("span",{staticClass:"dt-recipe-motion-text__sr-only"},[t._v(" "+t._s(t.screenReaderText)+" ")]):t._e(),t.isStaticAnimationMode?[t._v(" "+t._s(t.text)+" "),t.text?t._e():t._t("default")]:i("span",{key:t.animationKey,staticClass:"dt-recipe-motion-text__content",attrs:{"aria-hidden":t.isAnimating}},[t._l(t.words,function(s,n){return[i("Transition",{key:`${t.animationKey}-${n}`,attrs:{name:`dt-recipe-motion-text-word-${t.animationMode}`}},[n<t.visibleWordCount?i("span",{staticClass:"dt-recipe-motion-text__word",style:{"--word-index":n},attrs:{"data-text-content":s.text}},[t._l(s.chars,function(r,o){return[i("Transition",{key:`${t.animationKey}-${n}-${o}`,attrs:{name:`dt-recipe-motion-text-char-${t.animationMode}`}},[o<t.visibleCharsPerWord[n]?i("span",{staticClass:"dt-recipe-motion-text__char",style:{"--char-index":o,"--char-delay":`${o*t.timing.characterDelay}ms`}},[t._v(t._s(r))]):t._e()])]})],2):t._e()])]})],2),!t.words.length&&!t.text&&!t.isStaticAnimationMode?i("span",{staticClass:"dt-recipe-motion-text__fallback"},[t._t("default")],2):t._e()],2)},u=[],p=l.n(m,c,u);const f=p.exports;exports.default=f;
//# sourceMappingURL=motion-text.cjs.map