vevet 2.16.1 → 3.0.0-beta.0

package/lib/cjs/base/MutableProps/index.js

@@ -0,0 +1,190 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MutableProps = void 0;
+var common_1 = require("../../utils/common");
+/**
+ * A class for creating mutable properties that can change on window resize. <br><br>
+ *
+ * There are two ways to change properties:
+ * - To set a resize-listener on window (or use {@linkcode Viewport}).
+ * When the window is resized, change the properties with the help of
+ * {@linkcode MutableProps.changeProps}
+ *
+ * - The second way is to use the MutableProps and add responsive properties
+ * with help of {@linkcode MutableProps.addResponsiveProps}.
+ *
+ * @example
+ *
+ * interface IStatic {
+ *   static: string;
+ * }
+
+ * interface IChangeable {
+ *   changeable: string;
+ * }
+
+ * const props = new MutableProps<IStatic, IChangeable>({
+ *   static: '',
+ *   changeable: 'something',
+ * });
+
+ * props.addResponsiveProps({
+ *   breakpoint: 'viewport_phone',
+ *   settings: {
+ *     changeable: 'phone',
+ *   },
+ * });
+
+ * props.changeProps({ changeable: 'changed' });
+ */
+var MutableProps = /** @class */ (function () {
+    /**
+     * @example
+     *
+     * const static = {
+     *   myProp: true,
+     * };
+     *
+     * const responsive = [
+     *   {
+     *     breakpoint: 'm',
+     *     settings: {
+     *       myProp: false
+     *     }
+     *   }
+     * ];
+     *
+     * const props = new MutableProps(static, responsive);
+     */
+    function MutableProps(
+    /**
+     * The properties that were set while initialization.
+     * These properties will nevet change.
+     */
+    _initProps, 
+    /**
+     * A callback that is launched when properties are changed
+     */
+    _onMutate, 
+    /**
+     * Name of the responsive properties.
+     */
+    _name) {
+        if (_onMutate === void 0) { _onMutate = function () { }; }
+        if (_name === void 0) { _name = 'Responsive Props'; }
+        this._initProps = _initProps;
+        this._onMutate = _onMutate;
+        this._name = _name;
+        /**
+         * A set of responsive rules
+         */
+        this._responsiveRules = [];
+        this._app = window.vevetApp;
+        this._refProps = (0, common_1.mergeWithoutArrays)({}, _initProps);
+        this._props = (0, common_1.mergeWithoutArrays)({}, _initProps);
+        this._activeBreakpoints = [];
+    }
+    Object.defineProperty(MutableProps.prototype, "props", {
+        /**
+         * Get current properties
+         */
+        get: function () {
+            return this._props;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Add responsive rules
+     */
+    MutableProps.prototype.addResponsiveProps = function (rules) {
+        this._responsiveRules.push(rules);
+        this._responseProps();
+        if (typeof this._viewportCallback !== 'undefined') {
+            return;
+        }
+        this._viewportCallback = this._app.viewport.add('width', this._responseProps.bind(this), { name: this._name });
+    };
+    /**
+     * Change properties according to the "responsive" settings
+     */
+    MutableProps.prototype._responseProps = function () {
+        var _this = this;
+        var app = this._app;
+        var viewport = app.viewport;
+        var newProps = false;
+        var statProp = (0, common_1.mergeWithoutArrays)({}, this._refProps);
+        var prevActiveBreakpointsString = __spreadArray([], this._activeBreakpoints, true).join('_');
+        this._activeBreakpoints = [];
+        // go through all breakpoints
+        // and check if a proper breakpoint exists
+        this._responsiveRules.forEach(function (_a) {
+            var settings = _a.settings, breakpoint = _a.breakpoint;
+            if (typeof breakpoint === 'number') {
+                if (viewport.width <= breakpoint) {
+                    _this._activeBreakpoints.push(breakpoint);
+                    newProps = (0, common_1.mergeWithoutArrays)(statProp, settings);
+                }
+            }
+            else if (typeof breakpoint === 'string') {
+                // viewport size
+                if ((breakpoint === 'viewport_desktop' && viewport.isDesktop) ||
+                    (breakpoint === 'viewport_tablet' && viewport.isTablet) ||
+                    (breakpoint === 'viewport_phone' && viewport.isPhone)) {
+                    _this._activeBreakpoints.push(breakpoint);
+                    newProps = (0, common_1.mergeWithoutArrays)(statProp, settings);
+                }
+                // device type
+                if ((breakpoint === 'device_phone' && app.isPhone) ||
+                    (breakpoint === 'device_tablet' && app.isTablet) ||
+                    (breakpoint === 'device_mobile' && app.isMobile)) {
+                    _this._activeBreakpoints.push(breakpoint);
+                    newProps = (0, common_1.mergeWithoutArrays)(statProp, settings);
+                }
+            }
+        });
+        // check if properties really changed
+        var activeBreakpointsString = this._activeBreakpoints.join('_');
+        var isPropsChanged = activeBreakpointsString !== prevActiveBreakpointsString;
+        // if there's no breakpoint, restore the props
+        if (!newProps) {
+            this._props = (0, common_1.mergeWithoutArrays)(this._props, this._refProps);
+        }
+        else {
+            // otherwise, change the properties
+            this._props = (0, common_1.mergeWithoutArrays)(this._props, newProps);
+        }
+        // callback
+        if (isPropsChanged) {
+            this._onMutate();
+        }
+    };
+    /**
+     * This method allows you to change the properties manually.
+     */
+    MutableProps.prototype.changeProps = function (props) {
+        this._props = (0, common_1.mergeWithoutArrays)(this._props, props);
+        this._refProps = (0, common_1.mergeWithoutArrays)(this._refProps, props);
+        this._onMutate();
+    };
+    /**
+     * Destroy the responsive properties.
+     */
+    MutableProps.prototype.destroy = function () {
+        if (this._viewportCallback) {
+            this._viewportCallback.remove();
+        }
+    };
+    return MutableProps;
+}());
+exports.MutableProps = MutableProps;
+//# sourceMappingURL=index.js.map

package/lib/cjs/base/MutableProps/index.js.map

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

package/lib/cjs/base/MutableProps/types.js

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

package/lib/cjs/base/MutableProps/types.js.map

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

package/lib/cjs/base/Plugin/index.js

@@ -0,0 +1,47 @@
+"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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Plugin = void 0;
+var Module_1 = require("../Module");
+/**
+ * A class for Plugins.
+ */
+var Plugin = /** @class */ (function (_super) {
+    __extends(Plugin, _super);
+    function Plugin(initialProps) {
+        return _super.call(this, initialProps, false) || this;
+    }
+    Object.defineProperty(Plugin.prototype, "component", {
+        get: function () {
+            return this._component;
+        },
+        set: function (value) {
+            this._component = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Plugin.prototype.init = function () {
+        if (!this.component) {
+            throw new Error('Component is unknown. Be sure that `plugin.component` is non-nullable.');
+        }
+        _super.prototype.init.call(this);
+    };
+    return Plugin;
+}(Module_1.Module));
+exports.Plugin = Plugin;
+//# sourceMappingURL=index.js.map

package/lib/cjs/base/Plugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/base/Plugin/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,oCAAmC;AAKnC;;GAEG;AACH;IAKU,0BAAoD;IAC5D,gBAAY,YAA4C;eACtD,kBAAM,YAAY,EAAE,KAAK,CAAC;IAC5B,CAAC;IAID,sBAAI,6BAAS;aAAb;YACE,OAAO,IAAI,CAAC,UAAU,CAAC;QACzB,CAAC;aAED,UAAc,KAAK;YACjB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAC1B,CAAC;;;OAJA;IAMM,qBAAI,GAAX;QACE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,MAAM,IAAI,KAAK,CACb,wEAAwE,CACzE,CAAC;SACH;QAED,iBAAM,IAAI,WAAE,CAAC;IACf,CAAC;IACH,aAAC;AAAD,CAAC,AA7BD,CAKU,eAAM,GAwBf;AA7BqB,wBAAM"}

package/lib/cjs/base/Plugin/types.js

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

package/lib/cjs/base/Plugin/types.js.map

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

package/lib/cjs/base/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Callbacks"), exports);
+__exportStar(require("./Component"), exports);
+__exportStar(require("./Module"), exports);
+__exportStar(require("./MutableProps"), exports);
+__exportStar(require("./Plugin"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/base/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,8CAA4B;AAC5B,2CAAyB;AACzB,iDAA+B;AAC/B,2CAAyB"}

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

@@ -0,0 +1,190 @@
+"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.AnimationFrame = void 0;
+var Component_1 = require("../../base/Component");
+/**
+ * Launch an animation frame with a certain FPS
+ */
+var AnimationFrame = /** @class */ (function (_super) {
+    __extends(AnimationFrame, _super);
+    function AnimationFrame(initialProps, canInit) {
+        if (canInit === void 0) { canInit = true; }
+        var _this = _super.call(this, initialProps, false) || this;
+        _this._isPlaying = false;
+        _this._frame = null;
+        _this._frameIndex = -1;
+        _this._firstFrameTime = null;
+        _this._lastFrameTime = null;
+        _this._frameDurations = [];
+        _this._computedFPS = _this.props.fps !== 'auto' ? _this.props.fps : 60;
+        if (canInit) {
+            _this.init();
+        }
+        return _this;
+    }
+    AnimationFrame.prototype._getDefaultProps = function () {
+        return __assign(__assign({}, _super.prototype._getDefaultProps.call(this)), { fps: 'auto', autoFpsFrames: 50, isEnabled: false });
+    };
+    Object.defineProperty(AnimationFrame.prototype, "isPlaying", {
+        get: function () {
+            return this._isPlaying;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AnimationFrame.prototype, "computedFPS", {
+        /** Computed real time fps */
+        get: function () {
+            return this._computedFPS;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AnimationFrame.prototype, "easeMultiplier", {
+        /** Coefficient of standard fps (60) divided by computed fps */
+        get: function () {
+            return 60 / this.computedFPS;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    AnimationFrame.prototype._init = function () {
+        _super.prototype._init.call(this);
+        if (this.props.isEnabled) {
+            this.play();
+        }
+    };
+    AnimationFrame.prototype._onPropsMutate = function () {
+        _super.prototype._onPropsMutate.call(this);
+        this._frameIndex = -1;
+        this._firstFrameTime = null;
+        this._lastFrameTime = null;
+        if (this.props.isEnabled) {
+            this._play();
+        }
+        else {
+            this._pause();
+        }
+    };
+    /** Play animation */
+    AnimationFrame.prototype.play = function () {
+        if (this.isDestroyed) {
+            return;
+        }
+        if (this.props.isEnabled) {
+            return;
+        }
+        this.changeProps({ isEnabled: true });
+    };
+    /** Play animation */
+    AnimationFrame.prototype._play = function () {
+        if (this.isPlaying) {
+            return;
+        }
+        this._isPlaying = true;
+        this.callbacks.tbt('play', undefined);
+        this.callbacks.tbt('toggle', undefined);
+        this._frame = window.requestAnimationFrame(this._animate.bind(this));
+    };
+    /** Pause animation */
+    AnimationFrame.prototype.pause = function () {
+        if (!this.props.isEnabled) {
+            return;
+        }
+        this.changeProps({ isEnabled: false });
+    };
+    /** Pause animation */
+    AnimationFrame.prototype._pause = function () {
+        if (!this.isPlaying) {
+            return;
+        }
+        if (this._frame) {
+            window.cancelAnimationFrame(this._frame);
+            this._frame = null;
+        }
+        this._isPlaying = false;
+        this.callbacks.tbt('pause', undefined);
+        this.callbacks.tbt('toggle', undefined);
+    };
+    /** Launch the animation frame */
+    AnimationFrame.prototype._animate = function () {
+        if (!this._isPlaying) {
+            return;
+        }
+        this._frame = window.requestAnimationFrame(this._animate.bind(this));
+        // update time
+        var startTime = +new Date();
+        if (this._firstFrameTime === null) {
+            this._firstFrameTime = startTime;
+        }
+        // calculate frame index
+        var minFrameDuration = this.props.fps === 'auto' ? 1 : 1000 / this.props.fps;
+        var newFrameIndex = Math.floor((startTime - this._firstFrameTime) / minFrameDuration);
+        // break if frame index the same
+        if (newFrameIndex <= this._frameIndex) {
+            return;
+        }
+        // update frame index
+        this._frameIndex = newFrameIndex;
+        // compute fps
+        this._computeFPS(startTime);
+        // launch callbacks
+        this.callbacks.tbt('frame', undefined);
+        // update vars
+        this._lastFrameTime = startTime;
+    };
+    /** Compute real-time FPS */
+    AnimationFrame.prototype._computeFPS = function (startTime) {
+        var _a;
+        var lastFrameDuration = startTime - ((_a = this._lastFrameTime) !== null && _a !== void 0 ? _a : startTime);
+        // skip frames that seem not real
+        if (lastFrameDuration <= 0 || lastFrameDuration > 250) {
+            return;
+        }
+        this._frameDurations.push(lastFrameDuration);
+        if (this._frameDurations.length < this.props.autoFpsFrames) {
+            return;
+        }
+        var totalFramesDuration = this._frameDurations.reduce(function (prev, curr) { return prev + curr; });
+        var approximateFrameDuration = totalFramesDuration / this._frameDurations.length;
+        var computedFPS = Math.floor(1000 / approximateFrameDuration);
+        var normalizedFPS = Math.round(computedFPS / 10) * 10;
+        this._computedFPS = normalizedFPS;
+        // clear durations
+        this._frameDurations = [];
+    };
+    /** Destroy the animation frame */
+    AnimationFrame.prototype._destroy = function () {
+        this.pause();
+        _super.prototype._destroy.call(this);
+    };
+    return AnimationFrame;
+}(Component_1.Component));
+exports.AnimationFrame = AnimationFrame;
+//# sourceMappingURL=index.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,124 @@
+"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.BaseTimeline = void 0;
+var Component_1 = require("../../base/Component");
+var math_1 = require("../../utils/math");
+var common_1 = require("../../utils/common");
+/**
+ * `BaseTimeline` is the base class for the `Timeline` itself.
+ * The difference between the coponents is that `BaseTimeline` has no autonomous animation.
+ */
+var BaseTimeline = /** @class */ (function (_super) {
+    __extends(BaseTimeline, _super);
+    function BaseTimeline(initialProps, canInit) {
+        if (canInit === void 0) { canInit = true; }
+        var _this = _super.call(this, initialProps, false) || this;
+        // set default vars
+        _this._progress = 0;
+        _this._easing = 0;
+        _this._nestedTimelines = [];
+        if (canInit) {
+            _this.init();
+        }
+        return _this;
+    }
+    BaseTimeline.prototype._getDefaultProps = function () {
+        return __assign(__assign({}, _super.prototype._getDefaultProps.call(this)), { easing: this.app.props.easing, scope: [0, 1], hasNestedEasingProgress: false });
+    };
+    Object.defineProperty(BaseTimeline.prototype, "progress", {
+        /** Global timeline progress */
+        get: function () {
+            return this._progress;
+        },
+        set: function (val) {
+            this._progress = val;
+            this._handleProgressUpdate();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BaseTimeline.prototype, "easing", {
+        /** Easing progress */
+        get: function () {
+            return this._easing;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /** Add a nested timeline */
+    BaseTimeline.prototype.addNestedTimeline = function (timeline) {
+        var _this = this;
+        var id = (0, common_1.uid)();
+        this._nestedTimelines.push({ id: id, timeline: timeline });
+        return {
+            remove: function () {
+                _this._nestedTimelines = _this._nestedTimelines.filter(function (_a) {
+                    var nestedTimelineId = _a.id;
+                    return nestedTimelineId !== id;
+                });
+            },
+        };
+    };
+    /** Handle progress event */
+    BaseTimeline.prototype._handleProgressUpdate = function () {
+        this._easing = (0, math_1.easing)(this._progress, this.props.easing);
+        this.callbacks.tbt('progress', {
+            progress: this._progress,
+            easing: this._easing,
+        });
+        this._renderNestedTimelines();
+    };
+    /** Render nested timelines */
+    BaseTimeline.prototype._renderNestedTimelines = function () {
+        var length = this._nestedTimelines.length;
+        if (length === 0) {
+            return;
+        }
+        var progressForNestedTimeline = this.props.hasNestedEasingProgress
+            ? this.easing
+            : this.progress;
+        this._nestedTimelines.forEach(function (_a) {
+            var timeline = _a.timeline;
+            var timelineProgress = (0, math_1.clampScope)(progressForNestedTimeline, timeline.props.nestedScope, [0, 1]);
+            // eslint-disable-next-line no-param-reassign
+            timeline.progress = timelineProgress;
+        });
+    };
+    /** Destroy the module */
+    BaseTimeline.prototype._destroy = function () {
+        _super.prototype._destroy.call(this);
+        this._nestedTimelines.forEach(function (_a) {
+            var timeline = _a.timeline;
+            return timeline.destroy();
+        });
+    };
+    return BaseTimeline;
+}(Component_1.Component));
+exports.BaseTimeline = BaseTimeline;
+//# sourceMappingURL=index.js.map

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

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

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

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

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

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