vevet 3.2.3 → 3.3.0

package/lib/cjs/components/AnimationFrame/index.js

@@ -49,7 +49,7 @@ var AnimationFrame = /** @class */ (function (_super) {
         return _this;
     }
     AnimationFrame.prototype._getDefaultProps = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProps.call(this)), { fps: 'auto', autoFpsFrames: 50, isEnabled: false });
+        return __assign(__assign({}, _super.prototype._getDefaultProps.call(this)), { fps: 'auto', autoFpsFrames: 10, isEnabled: false });
     };
     Object.defineProperty(AnimationFrame.prototype, "isPlaying", {
         get: function () {

package/lib/cjs/components/Marquee/index.js

@@ -0,0 +1,262 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Marquee = void 0;
+var vevet_dom_1 = require("vevet-dom");
+var Component_1 = require("../../base/Component");
+var math_1 = require("../../utils/math");
+var onResize_1 = require("../../utils/listeners/onResize");
+var AnimationFrame_1 = require("../AnimationFrame");
+/**
+ * Custom Marquee
+ */
+var Marquee = /** @class */ (function (_super) {
+    __extends(Marquee, _super);
+    function Marquee(initialProps, canInit) {
+        if (canInit === void 0) { canInit = true; }
+        var _this = _super.call(this, initialProps, false) || this;
+        _this._container = (0, vevet_dom_1.selectOne)(_this.props.container);
+        if (!(_this._container instanceof HTMLElement)) {
+            throw new Error('No container');
+        }
+        _this.toggleClassName(_this._container, _this.className(''), true);
+        _this._initialHTML = _this._container.innerHTML;
+        _this._quantity = 0;
+        _this._items = [];
+        _this._itemWidth = 0;
+        _this._xCoord = 0;
+        _this._canPlay = true;
+        _this.resize();
+        if (canInit) {
+            _this.init();
+        }
+        return _this;
+    }
+    Marquee.prototype._getDefaultProps = function () {
+        return __assign(__assign({}, _super.prototype._getDefaultProps.call(this)), { container: "#".concat(this.prefix), viewportTarget: 'width', resizeDebounce: 0, speed: 1, isEnabled: true, pauseOnHover: false, prependWhitespace: true, isFpsNormalized: true });
+    };
+    Object.defineProperty(Marquee.prototype, "prefix", {
+        get: function () {
+            return "".concat(this.app.prefix, "marquee");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Marquee.prototype, "container", {
+        /** Marquee container */
+        get: function () {
+            return this._container;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /** Init the class */
+    Marquee.prototype._init = function () {
+        _super.prototype._init.call(this);
+        this._setEvents();
+    };
+    /** Handle properties mutation */
+    Marquee.prototype._onPropsMutate = function () {
+        var _a, _b;
+        _super.prototype._onPropsMutate.call(this);
+        if (this.props.isEnabled) {
+            (_a = this._animationFrame) === null || _a === void 0 ? void 0 : _a.play();
+        }
+        else {
+            (_b = this._animationFrame) === null || _b === void 0 ? void 0 : _b.pause();
+        }
+    };
+    /** Set module event */
+    Marquee.prototype._setEvents = function () {
+        var _this = this;
+        var _a = this, container = _a.container, props = _a.props;
+        var hasPauseOnHover = props.pauseOnHover, viewportTarget = props.viewportTarget, resizeDebounce = props.resizeDebounce;
+        // create animation frame
+        this._animationFrame = new AnimationFrame_1.AnimationFrame();
+        this._animationFrame.addCallback('frame', function () { return _this._render(); });
+        this.addDestroyableAction(function () { var _a; return (_a = _this._animationFrame) === null || _a === void 0 ? void 0 : _a.destroy(); });
+        // initial play
+        if (this.props.isEnabled) {
+            this._animationFrame.play();
+        }
+        // pause on hover
+        this.addEventListener(container, 'mouseenter', function () {
+            if (hasPauseOnHover) {
+                _this._canPlay = false;
+            }
+        });
+        // play on mouseleave
+        this.addEventListener(container, 'mouseleave', function () {
+            _this._canPlay = true;
+        });
+        // resize the scene
+        var resizeHandler = (0, onResize_1.onResize)({
+            onResize: function () { return _this.resize(); },
+            element: this.container,
+            viewportTarget: viewportTarget,
+            resizeDebounce: resizeDebounce,
+            hasBothEvents: true,
+        });
+        this.addDestroyableAction(function () { return resizeHandler.remove(); });
+    };
+    Marquee.prototype.resize = function () {
+        this._createItems();
+    };
+    Marquee.prototype._createItems = function () {
+        this._disconnectMutations();
+        var container = this.container;
+        // clear
+        this._quantity = 0;
+        this._items = [];
+        this.container.innerHTML = '';
+        // apply styles to the container
+        container.style.position = 'relative';
+        container.style.display = 'block';
+        container.style.width = '100%';
+        container.style.overflow = 'hidden';
+        container.style.whiteSpace = 'nowrap';
+        // create the first item and get its sizes
+        // to calculate the further quantity of inner elements
+        var firstItem = this._createItem(true);
+        // get first item width
+        var itemWidth = firstItem.clientWidth;
+        if (itemWidth <= 0) {
+            itemWidth = window.innerWidth;
+        }
+        this._itemWidth = itemWidth;
+        // get items quantity
+        if (itemWidth < container.clientWidth) {
+            this._quantity = Math.ceil((container.clientWidth + itemWidth) / itemWidth);
+        }
+        this._quantity = Math.max(this._quantity, 4);
+        // now when we know the total quantity,
+        // we can create the rest of the items
+        for (var index = 1; index < this._quantity; index += 1) {
+            this._createItem(false);
+        }
+        // render for the first time
+        this._render(0);
+        // enable mutation observer
+        this._observeMutations();
+    };
+    /** Create a single item */
+    Marquee.prototype._createItem = function (isFirst) {
+        if (isFirst === void 0) { isFirst = false; }
+        var element = document.createElement('div');
+        element.classList.add(this.className('__element'));
+        if (!isFirst) {
+            element.setAttribute('aria-hidden', 'true');
+        }
+        var prefix = "".concat(this.props.prependWhitespace ? '&nbsp;' : '');
+        var body = this._initialHTML;
+        element.innerHTML = "".concat(prefix).concat(body);
+        // apply styles
+        if (!isFirst) {
+            element.style.position = 'absolute';
+            element.style.top = '0';
+            element.style.left = '0';
+        }
+        element.style.display = 'inline-block';
+        // append the element
+        this.container.appendChild(element);
+        this._items.push(element);
+        return element;
+    };
+    /**
+     * Observe DOM changes
+     * If a change happens inside the parent element,
+     * we recreate the marquee element
+     */
+    Marquee.prototype._observeMutations = function () {
+        var _this = this;
+        if (this._mutationObserver) {
+            return;
+        }
+        var config = {
+            childList: true,
+        };
+        var callback = function (mutationsList) {
+            mutationsList.forEach(function (mutation) {
+                if (mutation.type === 'childList') {
+                    _this._initialHTML = _this.container.innerHTML;
+                    _this._createItems();
+                }
+            });
+        };
+        this._mutationObserver = new MutationObserver(callback);
+        this._mutationObserver.observe(this.container, config);
+    };
+    /**
+     * Destroy mutation observer
+     */
+    Marquee.prototype._disconnectMutations = function () {
+        var _a;
+        (_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._mutationObserver = undefined;
+    };
+    /** Render marquee */
+    Marquee.prototype.render = function (speed) {
+        if (speed === void 0) { speed = this.props.speed; }
+        this._render(speed);
+    };
+    /** Render marquee */
+    Marquee.prototype._render = function (speedProp) {
+        var _a, _b;
+        if (!this._canPlay) {
+            return;
+        }
+        var _c = this, qunantity = _c._quantity, itemWidth = _c._itemWidth, props = _c.props;
+        var isFpsNormalized = props.isFpsNormalized;
+        var fpsMultiplier = isFpsNormalized
+            ? (_b = (_a = this._animationFrame) === null || _a === void 0 ? void 0 : _a.easeMultiplier) !== null && _b !== void 0 ? _b : 1
+            : 1;
+        var defaultSpeed = props.speed * fpsMultiplier;
+        var speed = speedProp !== null && speedProp !== void 0 ? speedProp : defaultSpeed;
+        this._xCoord -= speed;
+        // get total width
+        var totalWidth = itemWidth * (qunantity - 1);
+        // render elements
+        for (var index = 0; index < qunantity; index += 1) {
+            var element = this._items[index];
+            // calulate transforms
+            var x = (0, math_1.wrap)(-itemWidth, totalWidth, this._xCoord + itemWidth * index);
+            // apply transforms
+            element.style.transform = "matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0, ".concat(x, ", 0, 0,1)");
+        }
+        // callbacks
+        this.callbacks.tbt('render', undefined);
+    };
+    Marquee.prototype._destroy = function () {
+        _super.prototype._destroy.call(this);
+        this._disconnectMutations();
+        this.container.innerHTML = this._initialHTML;
+    };
+    return Marquee;
+}(Component_1.Component));
+exports.Marquee = Marquee;
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/Marquee/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Marquee/index.ts"],"names":[],"mappings":"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"}

package/lib/cjs/components/Marquee/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/lib/cjs/components/Marquee/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/Marquee/types.ts"],"names":[],"mappings":""}

package/lib/cjs/components/index.js

@@ -21,6 +21,7 @@ __exportStar(require("./Ctx2DPrerender"), exports);
 __exportStar(require("./CustomCursor"), exports);
 __exportStar(require("./DraggerDirection"), exports);
 __exportStar(require("./DraggerMove"), exports);
+__exportStar(require("./Marquee"), exports);
 __exportStar(require("./Preloader"), exports);
 __exportStar(require("./ProgressPreloader"), exports);
 __exportStar(require("./ScrollBar"), exports);

package/lib/cjs/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,mDAAiC;AACjC,iDAA+B;AAC/B,0CAAwB;AACxB,mDAAiC;AACjC,iDAA+B;AAC/B,qDAAmC;AACnC,gDAA8B;AAC9B,8CAA4B;AAC5B,sDAAoC;AACpC,8CAA4B;AAC5B,+CAA6B;AAC7B,0DAAwC;AACxC,iDAA+B;AAC/B,2DAAyC;AACzC,+DAA6C;AAC7C,8CAA4B;AAC5B,6CAA2B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,mDAAiC;AACjC,iDAA+B;AAC/B,0CAAwB;AACxB,mDAAiC;AACjC,iDAA+B;AAC/B,qDAAmC;AACnC,gDAA8B;AAC9B,4CAA0B;AAC1B,8CAA4B;AAC5B,sDAAoC;AACpC,8CAA4B;AAC5B,+CAA6B;AAC7B,0DAAwC;AACxC,iDAA+B;AAC/B,2DAAyC;AACzC,+DAA6C;AAC7C,8CAA4B;AAC5B,6CAA2B"}

package/lib/cjs/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var version = '3.2.3';
+var version = '3.3.0';
 exports.default = version;
 //# sourceMappingURL=version.js.map

package/lib/esm/components/AnimationFrame/index.js

@@ -4,7 +4,7 @@ import { Component as ComponentClass } from '../../base/Component';
  */
 export class AnimationFrame extends ComponentClass {
     _getDefaultProps() {
-        return Object.assign(Object.assign({}, super._getDefaultProps()), { fps: 'auto', autoFpsFrames: 50, isEnabled: false });
+        return Object.assign(Object.assign({}, super._getDefaultProps()), { fps: 'auto', autoFpsFrames: 10, isEnabled: false });
     }
     get isPlaying() {
         return this._isPlaying;

package/lib/esm/components/Marquee/index.js

@@ -0,0 +1,216 @@
+import { selectOne } from 'vevet-dom';
+import { Component as ComponentClass } from '../../base/Component';
+import { wrap } from '../../utils/math';
+import { onResize } from '../../utils/listeners/onResize';
+import { AnimationFrame } from '../AnimationFrame';
+/**
+ * Custom Marquee
+ */
+export class Marquee extends ComponentClass {
+    _getDefaultProps() {
+        return Object.assign(Object.assign({}, super._getDefaultProps()), { container: `#${this.prefix}`, viewportTarget: 'width', resizeDebounce: 0, speed: 1, isEnabled: true, pauseOnHover: false, prependWhitespace: true, isFpsNormalized: true });
+    }
+    get prefix() {
+        return `${this.app.prefix}marquee`;
+    }
+    /** Marquee container */
+    get container() {
+        return this._container;
+    }
+    constructor(initialProps, canInit = true) {
+        super(initialProps, false);
+        this._container = selectOne(this.props.container);
+        if (!(this._container instanceof HTMLElement)) {
+            throw new Error('No container');
+        }
+        this.toggleClassName(this._container, this.className(''), true);
+        this._initialHTML = this._container.innerHTML;
+        this._quantity = 0;
+        this._items = [];
+        this._itemWidth = 0;
+        this._xCoord = 0;
+        this._canPlay = true;
+        this.resize();
+        if (canInit) {
+            this.init();
+        }
+    }
+    /** Init the class */
+    _init() {
+        super._init();
+        this._setEvents();
+    }
+    /** Handle properties mutation */
+    _onPropsMutate() {
+        var _a, _b;
+        super._onPropsMutate();
+        if (this.props.isEnabled) {
+            (_a = this._animationFrame) === null || _a === void 0 ? void 0 : _a.play();
+        }
+        else {
+            (_b = this._animationFrame) === null || _b === void 0 ? void 0 : _b.pause();
+        }
+    }
+    /** Set module event */
+    _setEvents() {
+        const { container, props } = this;
+        const { pauseOnHover: hasPauseOnHover, viewportTarget, resizeDebounce, } = props;
+        // create animation frame
+        this._animationFrame = new AnimationFrame();
+        this._animationFrame.addCallback('frame', () => this._render());
+        this.addDestroyableAction(() => { var _a; return (_a = this._animationFrame) === null || _a === void 0 ? void 0 : _a.destroy(); });
+        // initial play
+        if (this.props.isEnabled) {
+            this._animationFrame.play();
+        }
+        // pause on hover
+        this.addEventListener(container, 'mouseenter', () => {
+            if (hasPauseOnHover) {
+                this._canPlay = false;
+            }
+        });
+        // play on mouseleave
+        this.addEventListener(container, 'mouseleave', () => {
+            this._canPlay = true;
+        });
+        // resize the scene
+        const resizeHandler = onResize({
+            onResize: () => this.resize(),
+            element: this.container,
+            viewportTarget,
+            resizeDebounce,
+            hasBothEvents: true,
+        });
+        this.addDestroyableAction(() => resizeHandler.remove());
+    }
+    resize() {
+        this._createItems();
+    }
+    _createItems() {
+        this._disconnectMutations();
+        const { container } = this;
+        // clear
+        this._quantity = 0;
+        this._items = [];
+        this.container.innerHTML = '';
+        // apply styles to the container
+        container.style.position = 'relative';
+        container.style.display = 'block';
+        container.style.width = '100%';
+        container.style.overflow = 'hidden';
+        container.style.whiteSpace = 'nowrap';
+        // create the first item and get its sizes
+        // to calculate the further quantity of inner elements
+        const firstItem = this._createItem(true);
+        // get first item width
+        let itemWidth = firstItem.clientWidth;
+        if (itemWidth <= 0) {
+            itemWidth = window.innerWidth;
+        }
+        this._itemWidth = itemWidth;
+        // get items quantity
+        if (itemWidth < container.clientWidth) {
+            this._quantity = Math.ceil((container.clientWidth + itemWidth) / itemWidth);
+        }
+        this._quantity = Math.max(this._quantity, 4);
+        // now when we know the total quantity,
+        // we can create the rest of the items
+        for (let index = 1; index < this._quantity; index += 1) {
+            this._createItem(false);
+        }
+        // render for the first time
+        this._render(0);
+        // enable mutation observer
+        this._observeMutations();
+    }
+    /** Create a single item */
+    _createItem(isFirst = false) {
+        const element = document.createElement('div');
+        element.classList.add(this.className('__element'));
+        if (!isFirst) {
+            element.setAttribute('aria-hidden', 'true');
+        }
+        const prefix = `${this.props.prependWhitespace ? '&nbsp;' : ''}`;
+        const body = this._initialHTML;
+        element.innerHTML = `${prefix}${body}`;
+        // apply styles
+        if (!isFirst) {
+            element.style.position = 'absolute';
+            element.style.top = '0';
+            element.style.left = '0';
+        }
+        element.style.display = 'inline-block';
+        // append the element
+        this.container.appendChild(element);
+        this._items.push(element);
+        return element;
+    }
+    /**
+     * Observe DOM changes
+     * If a change happens inside the parent element,
+     * we recreate the marquee element
+     */
+    _observeMutations() {
+        if (this._mutationObserver) {
+            return;
+        }
+        const config = {
+            childList: true,
+        };
+        const callback = (mutationsList) => {
+            mutationsList.forEach((mutation) => {
+                if (mutation.type === 'childList') {
+                    this._initialHTML = this.container.innerHTML;
+                    this._createItems();
+                }
+            });
+        };
+        this._mutationObserver = new MutationObserver(callback);
+        this._mutationObserver.observe(this.container, config);
+    }
+    /**
+     * Destroy mutation observer
+     */
+    _disconnectMutations() {
+        var _a;
+        (_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._mutationObserver = undefined;
+    }
+    /** Render marquee */
+    render(speed = this.props.speed) {
+        this._render(speed);
+    }
+    /** Render marquee */
+    _render(speedProp) {
+        var _a, _b;
+        if (!this._canPlay) {
+            return;
+        }
+        const { _quantity: qunantity, _itemWidth: itemWidth, props } = this;
+        const { isFpsNormalized } = props;
+        const fpsMultiplier = isFpsNormalized
+            ? (_b = (_a = this._animationFrame) === null || _a === void 0 ? void 0 : _a.easeMultiplier) !== null && _b !== void 0 ? _b : 1
+            : 1;
+        const defaultSpeed = props.speed * fpsMultiplier;
+        const speed = speedProp !== null && speedProp !== void 0 ? speedProp : defaultSpeed;
+        this._xCoord -= speed;
+        // get total width
+        const totalWidth = itemWidth * (qunantity - 1);
+        // render elements
+        for (let index = 0; index < qunantity; index += 1) {
+            const element = this._items[index];
+            // calulate transforms
+            const x = wrap(-itemWidth, totalWidth, this._xCoord + itemWidth * index);
+            // apply transforms
+            element.style.transform = `matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0, ${x}, 0, 0,1)`;
+        }
+        // callbacks
+        this.callbacks.tbt('render', undefined);
+    }
+    _destroy() {
+        super._destroy();
+        this._disconnectMutations();
+        this.container.innerHTML = this._initialHTML;
+    }
+}
+//# sourceMappingURL=index.js.map

package/lib/esm/components/Marquee/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Marquee/index.ts"],"names":[],"mappings":"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"}

package/lib/esm/components/Marquee/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/esm/components/Marquee/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/Marquee/types.ts"],"names":[],"mappings":""}

package/lib/esm/components/index.js

@@ -5,6 +5,7 @@ export * from './Ctx2DPrerender';
 export * from './CustomCursor';
 export * from './DraggerDirection';
 export * from './DraggerMove';
+export * from './Marquee';
 export * from './Preloader';
 export * from './ProgressPreloader';
 export * from './ScrollBar';

package/lib/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC"}

package/lib/esm/version.js

@@ -1,3 +1,3 @@
-const version = '3.2.3';
+const version = '3.3.0';
 export default version;
 //# sourceMappingURL=version.js.map

package/lib/types/components/AnimationFrame/types.d.ts

@@ -10,7 +10,7 @@ export declare namespace NAnimationFrame {
         fps?: 'auto' | number;
         /**
          * How many frames to be tested to detect real FPS
-         * @default 50
+         * @default 10
          */
         autoFpsFrames?: number;
         /**

package/lib/types/components/Marquee/index.d.ts

@@ -0,0 +1,66 @@
+import { NMarquee } from './types';
+import { Component as ComponentClass } from '../../base/Component';
+export type { NMarquee };
+/**
+ * Custom Marquee
+ */
+export declare class Marquee<StaticProps extends NMarquee.IStaticProps = NMarquee.IStaticProps, ChangeableProps extends NMarquee.IChangeableProps = NMarquee.IChangeableProps, CallbacksTypes extends NMarquee.ICallbacksTypes = NMarquee.ICallbacksTypes> extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
+    protected _getDefaultProps(): import("ts-essentials").DeepRequired<StaticProps & ChangeableProps> & {
+        container: string;
+        viewportTarget: string;
+        resizeDebounce: number;
+        speed: number;
+        isEnabled: boolean;
+        pauseOnHover: boolean;
+        prependWhitespace: boolean;
+        isFpsNormalized: boolean;
+    };
+    get prefix(): string;
+    /** Marquee container */
+    protected _container: HTMLElement;
+    /** Marquee container */
+    get container(): HTMLElement;
+    /** Initial html */
+    protected _initialHTML: string;
+    /** Mutation observer */
+    protected _mutationObserver?: MutationObserver;
+    /** Items quantity */
+    protected _quantity: number;
+    /** Items */
+    protected _items: HTMLElement[];
+    /** Single item width */
+    protected _itemWidth: number;
+    /** X Coordinate */
+    protected _xCoord: number;
+    /** Can play */
+    protected _canPlay: boolean;
+    /** Animation frame */
+    private _animationFrame?;
+    constructor(initialProps?: StaticProps & ChangeableProps, canInit?: boolean);
+    /** Init the class */
+    protected _init(): void;
+    /** Handle properties mutation */
+    protected _onPropsMutate(): void;
+    /** Set module event */
+    protected _setEvents(): void;
+    resize(): void;
+    protected _createItems(): void;
+    /** Create a single item */
+    protected _createItem(isFirst?: boolean): HTMLDivElement;
+    /**
+     * Observe DOM changes
+     * If a change happens inside the parent element,
+     * we recreate the marquee element
+     */
+    protected _observeMutations(): void;
+    /**
+     * Destroy mutation observer
+     */
+    protected _disconnectMutations(): void;
+    /** Render marquee */
+    render(speed?: number): void;
+    /** Render marquee */
+    protected _render(speedProp?: number): void;
+    protected _destroy(): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/lib/types/components/Marquee/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Marquee/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,SAAS,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAK/D,YAAY,EAAE,QAAQ,EAAE,CAAC;AAEzB;;GAEG;AACH,qBAAa,OAAO,CAClB,WAAW,SAAS,QAAQ,CAAC,YAAY,GAAG,QAAQ,CAAC,YAAY,EACjE,eAAe,SAAS,QAAQ,CAAC,gBAAgB,GAAG,QAAQ,CAAC,gBAAgB,EAC7E,cAAc,SAAS,QAAQ,CAAC,eAAe,GAAG,QAAQ,CAAC,eAAe,CAC1E,SAAQ,cAAc,CAAC,WAAW,EAAE,eAAe,EAAE,cAAc,CAAC;IACpE,SAAS,CAAC,gBAAgB;;;;;;;;;;IAc1B,IAAI,MAAM,WAET;IAED,wBAAwB;IACxB,SAAS,CAAC,UAAU,EAAE,WAAW,CAAC;IAElC,wBAAwB;IACxB,IAAI,SAAS,gBAEZ;IAED,mBAAmB;IACnB,SAAS,CAAC,YAAY,EAAE,MAAM,CAAC;IAE/B,wBAAwB;IACxB,SAAS,CAAC,iBAAiB,CAAC,EAAE,gBAAgB,CAAC;IAE/C,qBAAqB;IACrB,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC;IAE5B,YAAY;IACZ,SAAS,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC;IAEhC,wBAAwB;IACxB,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC;IAE7B,mBAAmB;IACnB,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC;IAE1B,eAAe;IACf,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC;IAE5B,sBAAsB;IACtB,OAAO,CAAC,eAAe,CAAC,CAAiB;gBAE7B,YAAY,CAAC,EAAE,WAAW,GAAG,eAAe,EAAE,OAAO,UAAO;IAwBxE,qBAAqB;IACrB,SAAS,CAAC,KAAK;IAMf,iCAAiC;IACjC,SAAS,CAAC,cAAc;IAUxB,uBAAuB;IACvB,SAAS,CAAC,UAAU;IAyCb,MAAM;IAIb,SAAS,CAAC,YAAY;IAiDtB,2BAA2B;IAC3B,SAAS,CAAC,WAAW,CAAC,OAAO,UAAQ;IA6BrC;;;;OAIG;IACH,SAAS,CAAC,iBAAiB;IAuB3B;;OAEG;IACH,SAAS,CAAC,oBAAoB;IAK9B,qBAAqB;IACd,MAAM,CAAC,KAAK,SAAmB;IAItC,qBAAqB;IACrB,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,MAAM;IAmCpC,SAAS,CAAC,QAAQ;CAOnB"}

package/lib/types/components/Marquee/types.d.ts

@@ -0,0 +1,53 @@
+import { NComponent } from '../../base/Component/types';
+import { TOnResizeTarget } from '../../utils/listeners/onResize';
+export declare namespace NMarquee {
+    interface IStaticProps extends NComponent.IStaticProps {
+        /**
+         * Marquee container. You may use a CSS selector or the element itself.
+         * @default '#v-marquee'
+         */
+        container?: string | HTMLElement;
+        /**
+         * Viewport target
+         * @default 'width'
+         */
+        viewportTarget?: TOnResizeTarget;
+        /**
+         * Timeout of resize event
+         * @default 0
+         */
+        resizeDebounce?: number;
+    }
+    interface IChangeableProps extends NComponent.IChangeableProps {
+        /**
+         * Marquee speed
+         * @default 1
+         */
+        speed?: number;
+        /**
+         * Enable animation
+         * @default true
+         */
+        isEnabled?: boolean;
+        /**
+         * Pause on hover
+         * @default false
+         */
+        pauseOnHover?: boolean;
+        /**
+         * Prepend a whitespace
+         * @default true
+         */
+        prependWhitespace?: boolean;
+        /**
+         * On different screens with different FPS, animation may be slower or faster.
+         * This property is to normalize animation speed across different screens.
+         * @default true
+         */
+        isFpsNormalized?: boolean;
+    }
+    interface ICallbacksTypes extends NComponent.ICallbacksTypes {
+        render: undefined;
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/types/components/Marquee/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Marquee/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,yBAAiB,QAAQ,CAAC;IACxB,UAAiB,YAAa,SAAQ,UAAU,CAAC,YAAY;QAC3D;;;WAGG;QACH,SAAS,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;QACjC;;;WAGG;QACH,cAAc,CAAC,EAAE,eAAe,CAAC;QACjC;;;WAGG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB;IAED,UAAiB,gBAAiB,SAAQ,UAAU,CAAC,gBAAgB;QACnE;;;WAGG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QACf;;;WAGG;QACH,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB;;;WAGG;QACH,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB;;;WAGG;QACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;QAC5B;;;;WAIG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B;IAED,UAAiB,eAAgB,SAAQ,UAAU,CAAC,eAAe;QACjE,MAAM,EAAE,SAAS,CAAC;KACnB;CACF"}

package/lib/types/components/index.d.ts

@@ -5,6 +5,7 @@ export * from './Ctx2DPrerender';
 export * from './CustomCursor';
 export * from './DraggerDirection';
 export * from './DraggerMove';
+export * from './Marquee';
 export * from './Preloader';
 export * from './ProgressPreloader';
 export * from './ScrollBar';

package/lib/types/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC"}

package/lib/types/version.d.ts

@@ -1,3 +1,3 @@
-declare const version = "3.2.3";
+declare const version = "3.3.0";
 export default version;
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vevet",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "description": "Vevet - a JavaScript library of ready-made solutions and helpers",
   "scripts": {
     "storybook": "storybook dev -p 6006",
@@ -44,6 +44,7 @@
     "cursor",
     "drag",
     "swipe",
+    "marquee",
     "preloader",
     "scrollbar",
     "smooth scroll",

package/src/components/AnimationFrame/index.ts

@@ -15,7 +15,7 @@ export class AnimationFrame<
     return {
       ...super._getDefaultProps(),
       fps: 'auto',
-      autoFpsFrames: 50,
+      autoFpsFrames: 10,
       isEnabled: false,
     };
   }

package/src/components/AnimationFrame/types.ts

@@ -11,7 +11,7 @@ export namespace NAnimationFrame {
     fps?: 'auto' | number;
     /**
      * How many frames to be tested to detect real FPS
-     * @default 50
+     * @default 10
      */
     autoFpsFrames?: number;
     /**

package/src/components/Marquee/index.ts

@@ -0,0 +1,319 @@
+import { selectOne } from 'vevet-dom';
+import { NMarquee } from './types';
+import { Component as ComponentClass } from '@/base/Component';
+import { wrap } from '@/utils/math';
+import { onResize } from '@/utils/listeners/onResize';
+import { AnimationFrame } from '../AnimationFrame';
+
+export type { NMarquee };
+
+/**
+ * Custom Marquee
+ */
+export class Marquee<
+  StaticProps extends NMarquee.IStaticProps = NMarquee.IStaticProps,
+  ChangeableProps extends NMarquee.IChangeableProps = NMarquee.IChangeableProps,
+  CallbacksTypes extends NMarquee.ICallbacksTypes = NMarquee.ICallbacksTypes
+> extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
+  protected _getDefaultProps() {
+    return {
+      ...super._getDefaultProps(),
+      container: `#${this.prefix}`,
+      viewportTarget: 'width',
+      resizeDebounce: 0,
+      speed: 1,
+      isEnabled: true,
+      pauseOnHover: false,
+      prependWhitespace: true,
+      isFpsNormalized: true,
+    };
+  }
+
+  get prefix() {
+    return `${this.app.prefix}marquee`;
+  }
+
+  /** Marquee container */
+  protected _container: HTMLElement;
+
+  /** Marquee container */
+  get container() {
+    return this._container;
+  }
+
+  /** Initial html */
+  protected _initialHTML: string;
+
+  /** Mutation observer */
+  protected _mutationObserver?: MutationObserver;
+
+  /** Items quantity */
+  protected _quantity: number;
+
+  /** Items */
+  protected _items: HTMLElement[];
+
+  /** Single item width */
+  protected _itemWidth: number;
+
+  /** X Coordinate */
+  protected _xCoord: number;
+
+  /** Can play */
+  protected _canPlay: boolean;
+
+  /** Animation frame */
+  private _animationFrame?: AnimationFrame;
+
+  constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
+    super(initialProps, false);
+
+    this._container = selectOne(this.props.container)! as HTMLElement;
+    if (!(this._container instanceof HTMLElement)) {
+      throw new Error('No container');
+    }
+
+    this.toggleClassName(this._container, this.className(''), true);
+
+    this._initialHTML = this._container.innerHTML;
+    this._quantity = 0;
+    this._items = [];
+    this._itemWidth = 0;
+    this._xCoord = 0;
+    this._canPlay = true;
+
+    this.resize();
+
+    if (canInit) {
+      this.init();
+    }
+  }
+
+  /** Init the class */
+  protected _init() {
+    super._init();
+
+    this._setEvents();
+  }
+
+  /** Handle properties mutation */
+  protected _onPropsMutate() {
+    super._onPropsMutate();
+
+    if (this.props.isEnabled) {
+      this._animationFrame?.play();
+    } else {
+      this._animationFrame?.pause();
+    }
+  }
+
+  /** Set module event */
+  protected _setEvents() {
+    const { container, props } = this;
+    const {
+      pauseOnHover: hasPauseOnHover,
+      viewportTarget,
+      resizeDebounce,
+    } = props;
+
+    // create animation frame
+    this._animationFrame = new AnimationFrame();
+    this._animationFrame.addCallback('frame', () => this._render());
+    this.addDestroyableAction(() => this._animationFrame?.destroy());
+
+    // initial play
+    if (this.props.isEnabled) {
+      this._animationFrame.play();
+    }
+
+    // pause on hover
+    this.addEventListener(container, 'mouseenter', () => {
+      if (hasPauseOnHover) {
+        this._canPlay = false;
+      }
+    });
+
+    // play on mouseleave
+    this.addEventListener(container, 'mouseleave', () => {
+      this._canPlay = true;
+    });
+
+    // resize the scene
+    const resizeHandler = onResize({
+      onResize: () => this.resize(),
+      element: this.container,
+      viewportTarget,
+      resizeDebounce,
+      hasBothEvents: true,
+    });
+    this.addDestroyableAction(() => resizeHandler.remove());
+  }
+
+  public resize() {
+    this._createItems();
+  }
+
+  protected _createItems() {
+    this._disconnectMutations();
+
+    const { container } = this;
+
+    // clear
+    this._quantity = 0;
+    this._items = [];
+    this.container.innerHTML = '';
+
+    // apply styles to the container
+    container.style.position = 'relative';
+    container.style.display = 'block';
+    container.style.width = '100%';
+    container.style.overflow = 'hidden';
+    container.style.whiteSpace = 'nowrap';
+
+    // create the first item and get its sizes
+    // to calculate the further quantity of inner elements
+    const firstItem = this._createItem(true);
+
+    // get first item width
+    let itemWidth = firstItem.clientWidth;
+    if (itemWidth <= 0) {
+      itemWidth = window.innerWidth;
+    }
+    this._itemWidth = itemWidth;
+
+    // get items quantity
+    if (itemWidth < container.clientWidth) {
+      this._quantity = Math.ceil(
+        (container.clientWidth + itemWidth) / itemWidth
+      );
+    }
+    this._quantity = Math.max(this._quantity, 4);
+
+    // now when we know the total quantity,
+    // we can create the rest of the items
+    for (let index = 1; index < this._quantity; index += 1) {
+      this._createItem(false);
+    }
+
+    // render for the first time
+    this._render(0);
+
+    // enable mutation observer
+    this._observeMutations();
+  }
+
+  /** Create a single item */
+  protected _createItem(isFirst = false) {
+    const element = document.createElement('div');
+    element.classList.add(this.className('__element'));
+
+    if (!isFirst) {
+      element.setAttribute('aria-hidden', 'true');
+    }
+
+    const prefix = `${this.props.prependWhitespace ? '&nbsp;' : ''}`;
+    const body = this._initialHTML;
+
+    element.innerHTML = `${prefix}${body}`;
+
+    // apply styles
+    if (!isFirst) {
+      element.style.position = 'absolute';
+      element.style.top = '0';
+      element.style.left = '0';
+    }
+
+    element.style.display = 'inline-block';
+
+    // append the element
+    this.container.appendChild(element);
+    this._items.push(element);
+
+    return element;
+  }
+
+  /**
+   * Observe DOM changes
+   * If a change happens inside the parent element,
+   * we recreate the marquee element
+   */
+  protected _observeMutations() {
+    if (this._mutationObserver) {
+      return;
+    }
+
+    const config: MutationObserverInit = {
+      childList: true,
+    };
+
+    const callback: MutationCallback = (mutationsList) => {
+      mutationsList.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          this._initialHTML = this.container.innerHTML;
+
+          this._createItems();
+        }
+      });
+    };
+
+    this._mutationObserver = new MutationObserver(callback);
+    this._mutationObserver.observe(this.container, config);
+  }
+
+  /**
+   * Destroy mutation observer
+   */
+  protected _disconnectMutations() {
+    this._mutationObserver?.disconnect();
+    this._mutationObserver = undefined;
+  }
+
+  /** Render marquee */
+  public render(speed = this.props.speed) {
+    this._render(speed);
+  }
+
+  /** Render marquee */
+  protected _render(speedProp?: number) {
+    if (!this._canPlay) {
+      return;
+    }
+
+    const { _quantity: qunantity, _itemWidth: itemWidth, props } = this;
+    const { isFpsNormalized } = props;
+
+    const fpsMultiplier = isFpsNormalized
+      ? this._animationFrame?.easeMultiplier ?? 1
+      : 1;
+
+    const defaultSpeed = props.speed * fpsMultiplier;
+    const speed = speedProp ?? defaultSpeed;
+
+    this._xCoord -= speed;
+
+    // get total width
+    const totalWidth = itemWidth * (qunantity - 1);
+
+    // render elements
+    for (let index = 0; index < qunantity; index += 1) {
+      const element = this._items[index];
+
+      // calulate transforms
+      const x = wrap(-itemWidth, totalWidth, this._xCoord + itemWidth * index);
+
+      // apply transforms
+      element.style.transform = `matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0, ${x}, 0, 0,1)`;
+    }
+
+    // callbacks
+    this.callbacks.tbt('render', undefined);
+  }
+
+  protected _destroy() {
+    super._destroy();
+
+    this._disconnectMutations();
+
+    this.container.innerHTML = this._initialHTML;
+  }
+}

package/src/components/Marquee/stories/index.stories.tsx

@@ -0,0 +1,27 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { Component } from '.';
+
+type TComponent = typeof Component;
+
+const meta: Meta<TComponent> = {
+  title: 'Components/Marquee',
+  component: Component,
+};
+
+export default meta;
+
+export const Default: StoryObj<TComponent> = {
+  args: {},
+};
+
+export const WithPauseOnHover: StoryObj<TComponent> = {
+  args: {
+    pauseOnHover: true,
+  },
+};
+
+export const WithReverseSpeed: StoryObj<TComponent> = {
+  args: {
+    speed: -1,
+  },
+};

package/src/components/Marquee/stories/index.tsx

@@ -0,0 +1,69 @@
+import React, { FC, useEffect, useRef, useState } from 'react';
+import { Marquee, NMarquee } from '..';
+
+interface IProps extends NMarquee.IChangeableProps {}
+
+export const Component: FC<IProps> = ({
+  speed,
+  isEnabled,
+  pauseOnHover,
+  prependWhitespace,
+  isFpsNormalized,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const [width, setWidth] = useState(400);
+  const [marquee, setMarquee] = useState<Marquee | undefined>();
+
+  useEffect(() => {
+    if (!ref.current) {
+      return undefined;
+    }
+
+    const instance = new Marquee({
+      container: ref.current,
+      speed,
+      isEnabled,
+      pauseOnHover,
+      prependWhitespace,
+      isFpsNormalized,
+    });
+
+    setMarquee(instance);
+
+    return () => instance.destroy();
+  }, [isEnabled, isFpsNormalized, pauseOnHover, prependWhitespace, speed]);
+
+  return (
+    <>
+      <button type="button" onClick={() => setWidth((val) => val + 20)}>
+        Rezize
+      </button>
+
+      <button
+        type="button"
+        onClick={() => marquee?.changeProps({ isEnabled: true })}
+      >
+        Play
+      </button>
+
+      <button
+        type="button"
+        onClick={() => marquee?.changeProps({ isEnabled: false })}
+      >
+        Pause
+      </button>
+
+      <button type="button" onClick={() => marquee?.render()}>
+        Manual render
+      </button>
+
+      <br />
+      <br />
+
+      <div style={{ background: '#ccc', width }}>
+        <span ref={ref}>Marquee</span>
+      </div>
+    </>
+  );
+};

package/src/components/Marquee/types.ts

@@ -0,0 +1,55 @@
+import { NComponent } from '@/base/Component/types';
+import { TOnResizeTarget } from '@/utils/listeners/onResize';
+
+export namespace NMarquee {
+  export interface IStaticProps extends NComponent.IStaticProps {
+    /**
+     * Marquee container. You may use a CSS selector or the element itself.
+     * @default '#v-marquee'
+     */
+    container?: string | HTMLElement;
+    /**
+     * Viewport target
+     * @default 'width'
+     */
+    viewportTarget?: TOnResizeTarget;
+    /**
+     * Timeout of resize event
+     * @default 0
+     */
+    resizeDebounce?: number;
+  }
+
+  export interface IChangeableProps extends NComponent.IChangeableProps {
+    /**
+     * Marquee speed
+     * @default 1
+     */
+    speed?: number;
+    /**
+     * Enable animation
+     * @default true
+     */
+    isEnabled?: boolean;
+    /**
+     * Pause on hover
+     * @default false
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Prepend a whitespace
+     * @default true
+     */
+    prependWhitespace?: boolean;
+    /**
+     * On different screens with different FPS, animation may be slower or faster.
+     * This property is to normalize animation speed across different screens.
+     * @default true
+     */
+    isFpsNormalized?: boolean;
+  }
+
+  export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
+    render: undefined;
+  }
+}

package/src/components/index.ts

@@ -5,6 +5,7 @@ export * from './Ctx2DPrerender';
 export * from './CustomCursor';
 export * from './DraggerDirection';
 export * from './DraggerMove';
+export * from './Marquee';
 export * from './Preloader';
 export * from './ProgressPreloader';
 export * from './ScrollBar';

package/src/version.ts

@@ -1,2 +1,2 @@
-const version = '3.2.3';
+const version = '3.3.0';
 export default version;