@chayns-components/typewriter 5.0.0-beta.56 → 5.0.0-beta.59

package/lib/components/typewriter/Typewriter.d.ts

@@ -1,9 +1,15 @@
 import { FC, ReactElement } from 'react';
+export declare enum TypewriterSpeed {
+    Slow = 40,
+    Medium = 30,
+    Fast = 20
+}
 export type TypewriterProps = {
     /**
      * The text to type
      */
     children: ReactElement | string;
+    speed?: TypewriterSpeed;
 };
 declare const Typewriter: FC<TypewriterProps>;
 export default Typewriter;

package/lib/components/typewriter/Typewriter.js

@@ -3,44 +3,53 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.TypewriterSpeed = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _server = require("react-dom/server");
 var _Typewriter = require("./Typewriter.styles");
 var _utils = require("./utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+let TypewriterSpeed;
+exports.TypewriterSpeed = TypewriterSpeed;
+(function (TypewriterSpeed) {
+  TypewriterSpeed[TypewriterSpeed["Slow"] = 40] = "Slow";
+  TypewriterSpeed[TypewriterSpeed["Medium"] = 30] = "Medium";
+  TypewriterSpeed[TypewriterSpeed["Fast"] = 20] = "Fast";
+})(TypewriterSpeed || (exports.TypewriterSpeed = TypewriterSpeed = {}));
 const Typewriter = _ref => {
   let {
-    children
+    children,
+    speed = TypewriterSpeed.Medium
   } = _ref;
   const [shownCharCount, setShownCharCount] = (0, _react.useState)(0);
   const [shouldStopAnimation, setShouldStopAnimation] = (0, _react.useState)(false);
   const textContent = /*#__PURE__*/_react.default.isValidElement(children) ? (0, _server.renderToString)(children) : children;
-  const isAnimatingText = shownCharCount !== textContent.length;
+  const textLength = (0, _react.useMemo)(() => (0, _utils.getCharactersCount)(textContent), [textContent]);
+  const isAnimatingText = shownCharCount !== textLength;
   const handleClick = (0, _react.useCallback)(() => {
     setShouldStopAnimation(true);
   }, []);
   (0, _react.useEffect)(() => {
     let interval;
     if (shouldStopAnimation) {
-      setShownCharCount(textContent.length);
+      setShownCharCount(textLength);
     } else {
       setShownCharCount(0);
       interval = window.setInterval(() => {
         setShownCharCount(prevState => {
           const nextState = prevState + 1;
-          if (nextState === textContent.length) {
+          if (nextState === textLength) {
             window.clearInterval(interval);
           }
           return nextState;
         });
-      }, 35);
+      }, speed);
     }
     return () => {
       window.clearInterval(interval);
     };
-  }, [shouldStopAnimation, textContent.length]);
+  }, [shouldStopAnimation, speed, textLength]);
   const shownText = (0, _react.useMemo)(() => (0, _utils.getSubTextFromHTML)(textContent, shownCharCount), [shownCharCount, textContent]);
   return /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriter, {
     onClick: handleClick

package/lib/components/typewriter/Typewriter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typewriter.js","names":["Typewriter","children","shownCharCount","setShownCharCount","useState","shouldStopAnimation","setShouldStopAnimation","textContent","React","isValidElement","renderToString","isAnimatingText","length","handleClick","useCallback","useEffect","interval","window","setInterval","prevState","nextState","clearInterval","shownText","useMemo","getSubTextFromHTML","__html","displayName"],"sources":["../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport { renderToString } from 'react-dom/server';\nimport {\n    StyledTypewriter,\n    StyledTypewriterPseudoText,\n    StyledTypewriterText,\n} from './Typewriter.styles';\nimport { getSubTextFromHTML } from './utils';\n\nexport type TypewriterProps = {\n    /**\n     * The text to type\n     */\n    children: ReactElement | string;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({ children }) => {\n    const [shownCharCount, setShownCharCount] = useState(0);\n    const [shouldStopAnimation, setShouldStopAnimation] = useState(false);\n\n    const textContent = React.isValidElement(children) ? renderToString(children) : children;\n\n    const isAnimatingText = shownCharCount !== textContent.length;\n\n    const handleClick = useCallback(() => {\n        setShouldStopAnimation(true);\n    }, []);\n\n    useEffect(() => {\n        let interval: number | undefined;\n\n        if (shouldStopAnimation) {\n            setShownCharCount(textContent.length);\n        } else {\n            setShownCharCount(0);\n\n            interval = window.setInterval(() => {\n                setShownCharCount((prevState) => {\n                    const nextState = prevState + 1;\n\n                    if (nextState === textContent.length) {\n                        window.clearInterval(interval);\n                    }\n\n                    return nextState;\n                });\n            }, 35);\n        }\n\n        return () => {\n            window.clearInterval(interval);\n        };\n    }, [shouldStopAnimation, textContent.length]);\n\n    const shownText = useMemo(\n        () => getSubTextFromHTML(textContent, shownCharCount),\n        [shownCharCount, textContent]\n    );\n\n    return (\n        <StyledTypewriter onClick={handleClick}>\n            <StyledTypewriterText\n                dangerouslySetInnerHTML={{ __html: shownText }}\n                isAnimatingText={isAnimatingText}\n            />\n            {isAnimatingText && <StyledTypewriterPseudoText>{children}</StyledTypewriterPseudoText>}\n        </StyledTypewriter>\n    );\n};\n\nTypewriter.displayName = 'Typewriter';\n\nexport default Typewriter;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAKA;AAA6C;AAAA;AAS7C,MAAMA,UAA+B,GAAG,QAAkB;EAAA,IAAjB;IAAEC;EAAS,CAAC;EACjD,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC,CAAC;EACvD,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EAErE,MAAMG,WAAW,GAAG,aAAAC,cAAK,CAACC,cAAc,CAACR,QAAQ,CAAC,GAAG,IAAAS,sBAAc,EAACT,QAAQ,CAAC,GAAGA,QAAQ;EAExF,MAAMU,eAAe,GAAGT,cAAc,KAAKK,WAAW,CAACK,MAAM;EAE7D,MAAMC,WAAW,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAClCR,sBAAsB,CAAC,IAAI,CAAC;EAChC,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAS,gBAAS,EAAC,MAAM;IACZ,IAAIC,QAA4B;IAEhC,IAAIX,mBAAmB,EAAE;MACrBF,iBAAiB,CAACI,WAAW,CAACK,MAAM,CAAC;IACzC,CAAC,MAAM;MACHT,iBAAiB,CAAC,CAAC,CAAC;MAEpBa,QAAQ,GAAGC,MAAM,CAACC,WAAW,CAAC,MAAM;QAChCf,iBAAiB,CAAEgB,SAAS,IAAK;UAC7B,MAAMC,SAAS,GAAGD,SAAS,GAAG,CAAC;UAE/B,IAAIC,SAAS,KAAKb,WAAW,CAACK,MAAM,EAAE;YAClCK,MAAM,CAACI,aAAa,CAACL,QAAQ,CAAC;UAClC;UAEA,OAAOI,SAAS;QACpB,CAAC,CAAC;MACN,CAAC,EAAE,EAAE,CAAC;IACV;IAEA,OAAO,MAAM;MACTH,MAAM,CAACI,aAAa,CAACL,QAAQ,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,CAACX,mBAAmB,EAAEE,WAAW,CAACK,MAAM,CAAC,CAAC;EAE7C,MAAMU,SAAS,GAAG,IAAAC,cAAO,EACrB,MAAM,IAAAC,yBAAkB,EAACjB,WAAW,EAAEL,cAAc,CAAC,EACrD,CAACA,cAAc,EAAEK,WAAW,CAAC,CAChC;EAED,oBACI,6BAAC,4BAAgB;IAAC,OAAO,EAAEM;EAAY,gBACnC,6BAAC,gCAAoB;IACjB,uBAAuB,EAAE;MAAEY,MAAM,EAAEH;IAAU,CAAE;IAC/C,eAAe,EAAEX;EAAgB,EACnC,EACDA,eAAe,iBAAI,6BAAC,sCAA0B,QAAEV,QAAQ,CAA8B,CACxE;AAE3B,CAAC;AAEDD,UAAU,CAAC0B,WAAW,GAAG,YAAY;AAAC,eAEvB1B,UAAU;AAAA"}
+{"version":3,"file":"Typewriter.js","names":["TypewriterSpeed","Typewriter","children","speed","Medium","shownCharCount","setShownCharCount","useState","shouldStopAnimation","setShouldStopAnimation","textContent","React","isValidElement","renderToString","textLength","useMemo","getCharactersCount","isAnimatingText","handleClick","useCallback","useEffect","interval","window","setInterval","prevState","nextState","clearInterval","shownText","getSubTextFromHTML","__html","displayName"],"sources":["../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport { renderToString } from 'react-dom/server';\nimport {\n    StyledTypewriter,\n    StyledTypewriterPseudoText,\n    StyledTypewriterText,\n} from './Typewriter.styles';\nimport { getCharactersCount, getSubTextFromHTML } from './utils';\n\nexport enum TypewriterSpeed {\n    Slow = 40,\n    Medium = 30,\n    Fast = 20,\n}\n\nexport type TypewriterProps = {\n    /**\n     * The text to type\n     */\n    children: ReactElement | string;\n    speed?: TypewriterSpeed;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({ children, speed = TypewriterSpeed.Medium }) => {\n    const [shownCharCount, setShownCharCount] = useState(0);\n    const [shouldStopAnimation, setShouldStopAnimation] = useState(false);\n\n    const textContent = React.isValidElement(children) ? renderToString(children) : children;\n\n    const textLength = useMemo(() => getCharactersCount(textContent), [textContent]);\n\n    const isAnimatingText = shownCharCount !== textLength;\n\n    const handleClick = useCallback(() => {\n        setShouldStopAnimation(true);\n    }, []);\n\n    useEffect(() => {\n        let interval: number | undefined;\n\n        if (shouldStopAnimation) {\n            setShownCharCount(textLength);\n        } else {\n            setShownCharCount(0);\n\n            interval = window.setInterval(() => {\n                setShownCharCount((prevState) => {\n                    const nextState = prevState + 1;\n\n                    if (nextState === textLength) {\n                        window.clearInterval(interval);\n                    }\n\n                    return nextState;\n                });\n            }, speed);\n        }\n\n        return () => {\n            window.clearInterval(interval);\n        };\n    }, [shouldStopAnimation, speed, textLength]);\n\n    const shownText = useMemo(\n        () => getSubTextFromHTML(textContent, shownCharCount),\n        [shownCharCount, textContent]\n    );\n\n    return (\n        <StyledTypewriter onClick={handleClick}>\n            <StyledTypewriterText\n                dangerouslySetInnerHTML={{ __html: shownText }}\n                isAnimatingText={isAnimatingText}\n            />\n            {isAnimatingText && <StyledTypewriterPseudoText>{children}</StyledTypewriterPseudoText>}\n        </StyledTypewriter>\n    );\n};\n\nTypewriter.displayName = 'Typewriter';\n\nexport default Typewriter;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAKA;AAAiE;AAAA;AAAA,IAErDA,eAAe;AAAA;AAAA,WAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;AAAA,GAAfA,eAAe,+BAAfA,eAAe;AAc3B,MAAMC,UAA+B,GAAG,QAAkD;EAAA,IAAjD;IAAEC,QAAQ;IAAEC,KAAK,GAAGH,eAAe,CAACI;EAAO,CAAC;EACjF,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC,CAAC;EACvD,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EAErE,MAAMG,WAAW,GAAG,aAAAC,cAAK,CAACC,cAAc,CAACV,QAAQ,CAAC,GAAG,IAAAW,sBAAc,EAACX,QAAQ,CAAC,GAAGA,QAAQ;EAExF,MAAMY,UAAU,GAAG,IAAAC,cAAO,EAAC,MAAM,IAAAC,yBAAkB,EAACN,WAAW,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEhF,MAAMO,eAAe,GAAGZ,cAAc,KAAKS,UAAU;EAErD,MAAMI,WAAW,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAClCV,sBAAsB,CAAC,IAAI,CAAC;EAChC,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAW,gBAAS,EAAC,MAAM;IACZ,IAAIC,QAA4B;IAEhC,IAAIb,mBAAmB,EAAE;MACrBF,iBAAiB,CAACQ,UAAU,CAAC;IACjC,CAAC,MAAM;MACHR,iBAAiB,CAAC,CAAC,CAAC;MAEpBe,QAAQ,GAAGC,MAAM,CAACC,WAAW,CAAC,MAAM;QAChCjB,iBAAiB,CAAEkB,SAAS,IAAK;UAC7B,MAAMC,SAAS,GAAGD,SAAS,GAAG,CAAC;UAE/B,IAAIC,SAAS,KAAKX,UAAU,EAAE;YAC1BQ,MAAM,CAACI,aAAa,CAACL,QAAQ,CAAC;UAClC;UAEA,OAAOI,SAAS;QACpB,CAAC,CAAC;MACN,CAAC,EAAEtB,KAAK,CAAC;IACb;IAEA,OAAO,MAAM;MACTmB,MAAM,CAACI,aAAa,CAACL,QAAQ,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,CAACb,mBAAmB,EAAEL,KAAK,EAAEW,UAAU,CAAC,CAAC;EAE5C,MAAMa,SAAS,GAAG,IAAAZ,cAAO,EACrB,MAAM,IAAAa,yBAAkB,EAAClB,WAAW,EAAEL,cAAc,CAAC,EACrD,CAACA,cAAc,EAAEK,WAAW,CAAC,CAChC;EAED,oBACI,6BAAC,4BAAgB;IAAC,OAAO,EAAEQ;EAAY,gBACnC,6BAAC,gCAAoB;IACjB,uBAAuB,EAAE;MAAEW,MAAM,EAAEF;IAAU,CAAE;IAC/C,eAAe,EAAEV;EAAgB,EACnC,EACDA,eAAe,iBAAI,6BAAC,sCAA0B,QAAEf,QAAQ,CAA8B,CACxE;AAE3B,CAAC;AAEDD,UAAU,CAAC6B,WAAW,GAAG,YAAY;AAAC,eAEvB7B,UAAU;AAAA"}

package/lib/components/typewriter/Typewriter.styles.js

@@ -8,6 +8,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const StyledTypewriter = _styledComponents.default.span`
+    display: flex;
     position: relative;
 `;
 exports.StyledTypewriter = StyledTypewriter;
@@ -35,6 +36,7 @@ const StyledTypewriterText = _styledComponents.default.span`
   } = _ref2;
   return isAnimatingText ? 'absolute' : 'relative';
 }};
+    width: 100%;
 
     ${_ref3 => {
   let {

package/lib/components/typewriter/Typewriter.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typewriter.styles.js","names":["StyledTypewriter","styled","span","blinkAnimation","keyframes","StyledTypewriterPseudoText","StyledTypewriterText","theme","text","isAnimatingText","css"],"sources":["../../../src/components/typewriter/Typewriter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css, keyframes } from 'styled-components';\n\nexport const StyledTypewriter = styled.span`\n    position: relative;\n`;\n\nconst blinkAnimation = keyframes`\n  100% {\n    visibility: hidden;\n  }\n`;\n\nexport const StyledTypewriterPseudoText = styled.span`\n    opacity: 0;\n    pointer-events: none;\n    user-select: none;\n`;\n\ntype StyledTypewriterTextProps = WithTheme<{\n    isAnimatingText: boolean;\n}>;\n\nexport const StyledTypewriterText = styled.span<StyledTypewriterTextProps>`\n    color: ${({ theme }: StyledTypewriterTextProps) => theme.text};\n    position: ${({ isAnimatingText }) => (isAnimatingText ? 'absolute' : 'relative')};\n\n    ${({ isAnimatingText }) =>\n        isAnimatingText &&\n        css`\n            &:after {\n                animation: ${blinkAnimation} 1s steps(5, start) infinite;\n                color: ${({ theme }: StyledTypewriterTextProps) => theme.text};\n                content: '▋';\n                margin-left: 0.25rem;\n                opacity: 0.85;\n                vertical-align: baseline;\n            }\n        `}\n`;\n"],"mappings":";;;;;;AACA;AAA2D;AAAA;AAEpD,MAAMA,gBAAgB,GAAGC,yBAAM,CAACC,IAAK;AAC5C;AACA,CAAC;AAAC;AAEF,MAAMC,cAAc,GAAG,IAAAC,2BAAS,CAAC;AACjC;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0BAA0B,GAAGJ,yBAAM,CAACC,IAAK;AACtD;AACA;AACA;AACA,CAAC;AAAC;AAMK,MAAMI,oBAAoB,GAAGL,yBAAM,CAACC,IAAgC;AAC3E,aAAa;EAAA,IAAC;IAAEK;EAAiC,CAAC;EAAA,OAAKA,KAAK,CAACC,IAAI;AAAA,CAAC;AAClE,gBAAgB;EAAA,IAAC;IAAEC;EAAgB,CAAC;EAAA,OAAMA,eAAe,GAAG,UAAU,GAAG,UAAU;AAAA,CAAE;AACrF;AACA,MAAM;EAAA,IAAC;IAAEA;EAAgB,CAAC;EAAA,OAClBA,eAAe,IACf,IAAAC,qBAAG,CAAC;AACZ;AACA,6BAA6BP,cAAe;AAC5C,yBAAyB;IAAA,IAAC;MAAEI;IAAiC,CAAC;IAAA,OAAKA,KAAK,CAACC,IAAI;EAAA,CAAC;AAC9E;AACA;AACA;AACA;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAAC"}
+{"version":3,"file":"Typewriter.styles.js","names":["StyledTypewriter","styled","span","blinkAnimation","keyframes","StyledTypewriterPseudoText","StyledTypewriterText","theme","text","isAnimatingText","css"],"sources":["../../../src/components/typewriter/Typewriter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css, keyframes } from 'styled-components';\n\nexport const StyledTypewriter = styled.span`\n    display: flex;\n    position: relative;\n`;\n\nconst blinkAnimation = keyframes`\n  100% {\n    visibility: hidden;\n  }\n`;\n\nexport const StyledTypewriterPseudoText = styled.span`\n    opacity: 0;\n    pointer-events: none;\n    user-select: none;\n`;\n\ntype StyledTypewriterTextProps = WithTheme<{\n    isAnimatingText: boolean;\n}>;\n\nexport const StyledTypewriterText = styled.span<StyledTypewriterTextProps>`\n    color: ${({ theme }: StyledTypewriterTextProps) => theme.text};\n    position: ${({ isAnimatingText }) => (isAnimatingText ? 'absolute' : 'relative')};\n    width: 100%;\n\n    ${({ isAnimatingText }) =>\n        isAnimatingText &&\n        css`\n            &:after {\n                animation: ${blinkAnimation} 1s steps(5, start) infinite;\n                color: ${({ theme }: StyledTypewriterTextProps) => theme.text};\n                content: '▋';\n                margin-left: 0.25rem;\n                opacity: 0.85;\n                vertical-align: baseline;\n            }\n        `}\n`;\n"],"mappings":";;;;;;AACA;AAA2D;AAAA;AAEpD,MAAMA,gBAAgB,GAAGC,yBAAM,CAACC,IAAK;AAC5C;AACA;AACA,CAAC;AAAC;AAEF,MAAMC,cAAc,GAAG,IAAAC,2BAAS,CAAC;AACjC;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0BAA0B,GAAGJ,yBAAM,CAACC,IAAK;AACtD;AACA;AACA;AACA,CAAC;AAAC;AAMK,MAAMI,oBAAoB,GAAGL,yBAAM,CAACC,IAAgC;AAC3E,aAAa;EAAA,IAAC;IAAEK;EAAiC,CAAC;EAAA,OAAKA,KAAK,CAACC,IAAI;AAAA,CAAC;AAClE,gBAAgB;EAAA,IAAC;IAAEC;EAAgB,CAAC;EAAA,OAAMA,eAAe,GAAG,UAAU,GAAG,UAAU;AAAA,CAAE;AACrF;AACA;AACA,MAAM;EAAA,IAAC;IAAEA;EAAgB,CAAC;EAAA,OAClBA,eAAe,IACf,IAAAC,qBAAG,CAAC;AACZ;AACA,6BAA6BP,cAAe;AAC5C,yBAAyB;IAAA,IAAC;MAAEI;IAAiC,CAAC;IAAA,OAAKA,KAAK,CAACC,IAAI;EAAA,CAAC;AAC9E;AACA;AACA;AACA;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAAC"}

package/lib/components/typewriter/utils.d.ts

@@ -9,3 +9,4 @@
  * @return string - The text part with the specified length - additionally the HTML elements are added
  */
 export declare const getSubTextFromHTML: (html: string, length: number) => string;
+export declare const getCharactersCount: (html: string) => number;

package/lib/components/typewriter/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSubTextFromHTML = void 0;
+exports.getSubTextFromHTML = exports.getCharactersCount = void 0;
 /**
  * This function extracts a part of the text from an HTML text. The HTML elements themselves are
  * returned in the result. In addition, the function ensures that the closing tag of the Bold HTML
@@ -59,4 +59,19 @@ const getSubTextFromHTML = (html, length) => {
   return text;
 };
 exports.getSubTextFromHTML = getSubTextFromHTML;
+const getCharactersCount = html => {
+  const div = document.createElement('div');
+  div.innerHTML = html;
+  let count = 0;
+  const traverse = node => {
+    if (node.nodeType === 3 && typeof node.textContent === 'string') {
+      count += node.textContent.trim().length;
+    } else if (node.nodeType === 1) {
+      Array.from(node.childNodes).forEach(traverse);
+    }
+  };
+  Array.from(div.childNodes).forEach(traverse);
+  return count;
+};
+exports.getCharactersCount = getCharactersCount;
 //# sourceMappingURL=utils.js.map

package/lib/components/typewriter/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["getSubTextFromHTML","html","length","div","document","createElement","innerHTML","text","currLength","traverse","element","nodeType","textContent","nodeText","substring","nodeName","toLowerCase","attributes","attribute","name","value","i","childNodes","childNode"],"sources":["../../../src/components/typewriter/utils.ts"],"sourcesContent":["/**\n * This function extracts a part of the text from an HTML text. The HTML elements themselves are\n * returned in the result. In addition, the function ensures that the closing tag of the Bold HTML\n * element is also returned for text that is cut off in the middle of a Bold element, for example.\n *\n * @param html - The text from which a part should be taken\n * @param length - The length of the text to be extracted\n *\n * @return string - The text part with the specified length - additionally the HTML elements are added\n */\nexport const getSubTextFromHTML = (html: string, length: number): string => {\n    const div = document.createElement('div');\n\n    div.innerHTML = html;\n\n    let text = '';\n    let currLength = 0;\n\n    const traverse = (element: Element): boolean => {\n        if (element.nodeType === 3 && typeof element.textContent === 'string') {\n            const nodeText = element.textContent;\n\n            if (currLength + nodeText.length <= length) {\n                text += nodeText;\n                currLength += nodeText.length;\n            } else {\n                text += nodeText.substring(0, length - currLength);\n\n                return false;\n            }\n        } else if (element.nodeType === 1) {\n            const nodeName = element.nodeName.toLowerCase();\n\n            let attributes = '';\n\n            // @ts-expect-error: Type is correct here\n            // eslint-disable-next-line no-restricted-syntax\n            for (const attribute of element.attributes) {\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/restrict-template-expressions\n                attributes += ` ${attribute.name}=\"${attribute.value}\"`;\n            }\n\n            text += `<${nodeName}${attributes}>`;\n\n            for (let i = 0; i < element.childNodes.length; i++) {\n                const childNode = element.childNodes[i];\n\n                if (childNode && !traverse(childNode as Element)) {\n                    return false;\n                }\n            }\n\n            text += `</${nodeName}>`;\n        }\n\n        return true;\n    };\n\n    for (let i = 0; i < div.childNodes.length; i++) {\n        const childNode = div.childNodes[i];\n\n        if (childNode && !traverse(childNode as Element)) {\n            return text;\n        }\n    }\n\n    return text;\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,kBAAkB,GAAG,CAACC,IAAY,EAAEC,MAAc,KAAa;EACxE,MAAMC,GAAG,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAEzCF,GAAG,CAACG,SAAS,GAAGL,IAAI;EAEpB,IAAIM,IAAI,GAAG,EAAE;EACb,IAAIC,UAAU,GAAG,CAAC;EAElB,MAAMC,QAAQ,GAAIC,OAAgB,IAAc;IAC5C,IAAIA,OAAO,CAACC,QAAQ,KAAK,CAAC,IAAI,OAAOD,OAAO,CAACE,WAAW,KAAK,QAAQ,EAAE;MACnE,MAAMC,QAAQ,GAAGH,OAAO,CAACE,WAAW;MAEpC,IAAIJ,UAAU,GAAGK,QAAQ,CAACX,MAAM,IAAIA,MAAM,EAAE;QACxCK,IAAI,IAAIM,QAAQ;QAChBL,UAAU,IAAIK,QAAQ,CAACX,MAAM;MACjC,CAAC,MAAM;QACHK,IAAI,IAAIM,QAAQ,CAACC,SAAS,CAAC,CAAC,EAAEZ,MAAM,GAAGM,UAAU,CAAC;QAElD,OAAO,KAAK;MAChB;IACJ,CAAC,MAAM,IAAIE,OAAO,CAACC,QAAQ,KAAK,CAAC,EAAE;MAC/B,MAAMI,QAAQ,GAAGL,OAAO,CAACK,QAAQ,CAACC,WAAW,EAAE;MAE/C,IAAIC,UAAU,GAAG,EAAE;;MAEnB;MACA;MACA,KAAK,MAAMC,SAAS,IAAIR,OAAO,CAACO,UAAU,EAAE;QACxC;QACAA,UAAU,IAAK,IAAGC,SAAS,CAACC,IAAK,KAAID,SAAS,CAACE,KAAM,GAAE;MAC3D;MAEAb,IAAI,IAAK,IAAGQ,QAAS,GAAEE,UAAW,GAAE;MAEpC,KAAK,IAAII,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGX,OAAO,CAACY,UAAU,CAACpB,MAAM,EAAEmB,CAAC,EAAE,EAAE;QAChD,MAAME,SAAS,GAAGb,OAAO,CAACY,UAAU,CAACD,CAAC,CAAC;QAEvC,IAAIE,SAAS,IAAI,CAACd,QAAQ,CAACc,SAAS,CAAY,EAAE;UAC9C,OAAO,KAAK;QAChB;MACJ;MAEAhB,IAAI,IAAK,KAAIQ,QAAS,GAAE;IAC5B;IAEA,OAAO,IAAI;EACf,CAAC;EAED,KAAK,IAAIM,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGlB,GAAG,CAACmB,UAAU,CAACpB,MAAM,EAAEmB,CAAC,EAAE,EAAE;IAC5C,MAAME,SAAS,GAAGpB,GAAG,CAACmB,UAAU,CAACD,CAAC,CAAC;IAEnC,IAAIE,SAAS,IAAI,CAACd,QAAQ,CAACc,SAAS,CAAY,EAAE;MAC9C,OAAOhB,IAAI;IACf;EACJ;EAEA,OAAOA,IAAI;AACf,CAAC;AAAC"}
+{"version":3,"file":"utils.js","names":["getSubTextFromHTML","html","length","div","document","createElement","innerHTML","text","currLength","traverse","element","nodeType","textContent","nodeText","substring","nodeName","toLowerCase","attributes","attribute","name","value","i","childNodes","childNode","getCharactersCount","count","node","trim","Array","from","forEach"],"sources":["../../../src/components/typewriter/utils.ts"],"sourcesContent":["/**\n * This function extracts a part of the text from an HTML text. The HTML elements themselves are\n * returned in the result. In addition, the function ensures that the closing tag of the Bold HTML\n * element is also returned for text that is cut off in the middle of a Bold element, for example.\n *\n * @param html - The text from which a part should be taken\n * @param length - The length of the text to be extracted\n *\n * @return string - The text part with the specified length - additionally the HTML elements are added\n */\nexport const getSubTextFromHTML = (html: string, length: number): string => {\n    const div = document.createElement('div');\n\n    div.innerHTML = html;\n\n    let text = '';\n    let currLength = 0;\n\n    const traverse = (element: Element): boolean => {\n        if (element.nodeType === 3 && typeof element.textContent === 'string') {\n            const nodeText = element.textContent;\n\n            if (currLength + nodeText.length <= length) {\n                text += nodeText;\n                currLength += nodeText.length;\n            } else {\n                text += nodeText.substring(0, length - currLength);\n\n                return false;\n            }\n        } else if (element.nodeType === 1) {\n            const nodeName = element.nodeName.toLowerCase();\n\n            let attributes = '';\n\n            // @ts-expect-error: Type is correct here\n            // eslint-disable-next-line no-restricted-syntax\n            for (const attribute of element.attributes) {\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/restrict-template-expressions\n                attributes += ` ${attribute.name}=\"${attribute.value}\"`;\n            }\n\n            text += `<${nodeName}${attributes}>`;\n\n            for (let i = 0; i < element.childNodes.length; i++) {\n                const childNode = element.childNodes[i];\n\n                if (childNode && !traverse(childNode as Element)) {\n                    return false;\n                }\n            }\n\n            text += `</${nodeName}>`;\n        }\n\n        return true;\n    };\n\n    for (let i = 0; i < div.childNodes.length; i++) {\n        const childNode = div.childNodes[i];\n\n        if (childNode && !traverse(childNode as Element)) {\n            return text;\n        }\n    }\n\n    return text;\n};\n\nexport const getCharactersCount = (html: string): number => {\n    const div = document.createElement('div');\n\n    div.innerHTML = html;\n\n    let count = 0;\n\n    const traverse = (node: Node): void => {\n        if (node.nodeType === 3 && typeof node.textContent === 'string') {\n            count += node.textContent.trim().length;\n        } else if (node.nodeType === 1) {\n            Array.from(node.childNodes).forEach(traverse);\n        }\n    };\n\n    Array.from(div.childNodes).forEach(traverse);\n\n    return count;\n};\n"],"mappings":"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"}

package/lib/index.d.ts

@@ -1 +1 @@
-export { default as Typewriter } from './components/typewriter/Typewriter';
+export { default as Typewriter, TypewriterSpeed } from './components/typewriter/Typewriter';

package/lib/index.js

@@ -9,6 +9,13 @@ Object.defineProperty(exports, "Typewriter", {
     return _Typewriter.default;
   }
 });
-var _Typewriter = _interopRequireDefault(require("./components/typewriter/Typewriter"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+Object.defineProperty(exports, "TypewriterSpeed", {
+  enumerable: true,
+  get: function () {
+    return _Typewriter.TypewriterSpeed;
+  }
+});
+var _Typewriter = _interopRequireWildcard(require("./components/typewriter/Typewriter"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["export { default as Typewriter } from './components/typewriter/Typewriter';\n"],"mappings":";;;;;;;;;;;AAAA;AAA2E"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["export { default as Typewriter, TypewriterSpeed } from './components/typewriter/Typewriter';\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAA4F;AAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/typewriter",
-    "version": "5.0.0-beta.56",
+    "version": "5.0.0-beta.59",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -63,5 +63,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "27baa90fb0accd997bb09e646697afcfd42bd0df"
+    "gitHead": "7156cfb6cf8c80809fd4655db8e7b87dbef8ef4e"
 }