rollex 1.0.0.pre.rc.1

data/vendor/assets/javascripts/rollex.js

@@ -0,0 +1,1527 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("React"), require("ReactDOM"));
+	else if(typeof define === 'function' && define.amd)
+		define("Rollex", ["React", "ReactDOM"], factory);
+	else if(typeof exports === 'object')
+		exports["Rollex"] = factory(require("React"), require("ReactDOM"));
+	else
+		root["Rollex"] = factory(root["React"], root["ReactDOM"]);
+})(this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_10__) {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// identity function for calling harmony imports with the correct context
+/******/ 	__webpack_require__.i = function(value) { return value; };
+
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 11);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var _React$PropTypes = _react2.default.PropTypes,
+    objectOf = _React$PropTypes.objectOf,
+    any = _React$PropTypes.any,
+    number = _React$PropTypes.number,
+    string = _React$PropTypes.string,
+    func = _React$PropTypes.func;
+
+/**
+ * Common logic for {@link StaticCounterDigit} and {@link AnimatedCounterDigit}.
+ */
+
+var AbstractCounterDigit = function (_React$Component) {
+  _inherits(AbstractCounterDigit, _React$Component);
+
+  function AbstractCounterDigit() {
+    _classCallCheck(this, AbstractCounterDigit);
+
+    return _possibleConstructorReturn(this, (AbstractCounterDigit.__proto__ || Object.getPrototypeOf(AbstractCounterDigit)).apply(this, arguments));
+  }
+
+  _createClass(AbstractCounterDigit, [{
+    key: 'decorateDigit',
+
+
+    /**
+     * Decorates given digit according to radix, digit map and digit wrapper.
+     * @param {number} digit
+     * @return {string} decoratedDigit
+     */
+    value: function decorateDigit(digit) {
+      var digitString = digit.toString(this.props.radix);
+      return this.props.digitWrapper(this.props.digitMap[digitString] || digitString);
+    }
+    /**
+     * @property {string} digit - digit to display
+     * @property {number} radix
+     * @property {Object} digitMap - a map for transforming particular digits
+     * @property {function(digit: number)} digitWrapper - a function for wrapping mapped digits
+     */
+
+  }]);
+
+  return AbstractCounterDigit;
+}(_react2.default.Component);
+
+AbstractCounterDigit.propTypes = {
+  digit: string.isRequired,
+  radix: number.isRequired,
+  digitMap: objectOf(any).isRequired,
+  digitWrapper: func.isRequired
+};
+exports.default = AbstractCounterDigit;
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/**
+ * @type {Object}
+ * Durations for available periods (in milliseconds).
+ */
+var PERIOD_DURATIONS = {
+  'days': 86400000,
+  'hours': 3600000,
+  'minutes': 60000,
+  'seconds': 1000
+};
+
+/**
+ * @type {Object}
+ * Time calculation functions for available periods.
+ */
+var PERIOD_DURATION_FUNCTIONS = {
+  'hours': 'getUTCHours',
+  'minutes': 'getMinutes',
+  'seconds': 'getSeconds'
+};
+
+/**
+ * Handles period number calculations.
+ */
+var NumberCalculator = {
+  /**
+   * Calculates numbers for each period for a given timestamp.
+   * @param {string[]} periods - periods to calculate numbers for
+   * @param {number} timestamp - timestamp to calculate numbers for
+   * @return {Map<string, number>} numbers - a map from periods to corresponding numbers
+   */
+  calculateNumbers: function calculateNumbers(periods, timestamp) {
+    var numbers = {};
+    var maxPeriod = periods[0];
+    var _iteratorNormalCompletion = true;
+    var _didIteratorError = false;
+    var _iteratorError = undefined;
+
+    try {
+      for (var _iterator = periods[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var period = _step.value;
+
+        numbers = _extends({}, numbers, _defineProperty({}, period, this.getPeriodNumberAt(period, maxPeriod, timestamp)));
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+
+    return numbers;
+  },
+
+  /**
+   * Calculates number for given period and timestamp.
+   * @param {string} period
+   * @param {string} maxPeriod
+   * @param {number} timestamp
+   * @return {number}
+   */
+  getPeriodNumberAt: function getPeriodNumberAt(period, maxPeriod, timestamp) {
+    var date = new Date(timestamp);
+    if (maxPeriod === period) {
+      return Math.floor(timestamp / PERIOD_DURATIONS[period]);
+    } else {
+      return date[PERIOD_DURATION_FUNCTIONS[period]]();
+    }
+  }
+};
+
+exports.default = NumberCalculator;
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _CounterSegment = __webpack_require__(5);
+
+var _CounterSegment2 = _interopRequireDefault(_CounterSegment);
+
+var _CounterSegmentSeparator = __webpack_require__(6);
+
+var _CounterSegmentSeparator2 = _interopRequireDefault(_CounterSegmentSeparator);
+
+var _globalIntervals = __webpack_require__(9);
+
+var _globalIntervals2 = _interopRequireDefault(_globalIntervals);
+
+var _counterBuilder = __webpack_require__(8);
+
+var _counterBuilder2 = _interopRequireDefault(_counterBuilder);
+
+var _numberCalculator = __webpack_require__(2);
+
+var _numberCalculator2 = _interopRequireDefault(_numberCalculator);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var _React$PropTypes = _react2.default.PropTypes,
+    number = _React$PropTypes.number,
+    string = _React$PropTypes.string,
+    bool = _React$PropTypes.bool,
+    objectOf = _React$PropTypes.objectOf,
+    object = _React$PropTypes.object,
+    oneOfType = _React$PropTypes.oneOfType,
+    oneOf = _React$PropTypes.oneOf,
+    func = _React$PropTypes.func,
+    any = _React$PropTypes.any;
+
+/**
+ * Main counter component.
+ * @example
+ * <Counter seconds={98} />
+ */
+
+var Counter = function (_React$Component) {
+  _inherits(Counter, _React$Component);
+
+  /**
+   * constructor
+   * @param {Object} props
+   */
+
+  /**
+   * @property {number} from - timestamp to count from
+   * @property {number} to - timestamp to count to
+   * @property {number} seconds - a number of seconds to count
+   * @property {number} interval - update interval
+   * @property {string} direction - direction to count in
+   * @property {number|object} digits - number of digits per segment
+   * @property {string} minPeriod - smallest period to create a segment for
+   * @property {string} maxPeriod - largest period to create a segment for
+   * @property {boolean} frozen - determines if counter is frozen
+   * @property {boolean} syncTime - determines if counter should try to synchronize with client
+   * time.
+   * @property {string} easingFunction - easing function to use for rolling digits
+   * @property {number} easingDuration - easing duration in milliseconds
+   * @property {number} radix - numeral base to use
+   * @property {Object} digitMap - a map to use when transforming digit symbols
+   * @property {function(digit: number)} digitWrapper - a wrapping function for mapped digits
+   * @property {Map<string, string>|function(period: string, number: number)} labels - a map or a
+   * function that returns labels for given period and number
+   * @property separator - what to separate segments with
+   */
+  function Counter(props) {
+    _classCallCheck(this, Counter);
+
+    _counterBuilder2.default.validateProps(props);
+
+    /**
+     * @type {object}
+     * @property {number} timeDiff - current amount of time to count from in milliseconds
+     * @property {number} initialTimeDiff - original time diff
+     * @property {Map<string, number>} digits - a map from periods to theis segment sizes
+     * @property {Map<string, number>} numbers - a map from periods to their corresponding numbers
+     * @property {number} startTime - a timestamp of current moment
+     * @property {number} from - timestamp to count from
+     * @property {string[]} periods - an array of periods to create segments for
+     */
+    var _this = _possibleConstructorReturn(this, (Counter.__proto__ || Object.getPrototypeOf(Counter)).call(this, props));
+
+    _this.state = new _counterBuilder2.default(_this).buildInitialState();
+
+    /**
+     * Creates a function bound to "this"
+     * for subscribing to and unsubscribing from global Rollex tick event.
+     */
+    _this.boundTick = _this.tick.bind(_this);
+    return _this;
+  }
+
+  _createClass(Counter, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      if (!this.props.frozen) this.start();
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (!this.props.frozen && !this.state.stopped) this.stop();
+    }
+
+    /**
+     * Handles prop updates.
+     * @param {Object} nextProps - new props
+     */
+
+  }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (this.props.frozen !== nextProps.frozen) {
+        if (nextProps.frozen) {
+          this.stop();
+        } else {
+          this.start();
+        }
+      }
+    }
+
+    /**
+     * Starts the countdown.
+     */
+
+  }, {
+    key: 'start',
+    value: function start() {
+      _globalIntervals2.default.ensureExistence(this.props.interval);
+      _globalIntervals2.default.subscribe(this.props.interval, this.boundTick);
+      this.setState({ stopped: false });
+    }
+
+    /**
+     * Pauses the countdown.
+     */
+
+  }, {
+    key: 'stop',
+    value: function stop() {
+      _globalIntervals2.default.unsubscribe(this.props.interval, this.boundTick);
+      _globalIntervals2.default.cleanup(this.props.interval);
+      this.setState({ stopped: true });
+    }
+
+    /**
+     * Handles counter ticks.
+     */
+
+  }, {
+    key: 'tick',
+    value: function tick() {
+      var newTimeDiff = this.getTimeDiff();
+      if (newTimeDiff < 0) {
+        return this.stop();
+      }
+
+      var timestamp = this.props.direction === 'down' ? newTimeDiff : this.state.initialTimeDiff - newTimeDiff;
+
+      /**
+       * @type {object}
+       * @property {number} timeDiff - current amount of time to count from in milliseconds
+       * @property {Object} numbers - a map from periods to their corresponding numbers
+       */
+      this.setState({
+        timeDiff: newTimeDiff,
+        numbers: _numberCalculator2.default.calculateNumbers(this.state.periods, timestamp)
+      });
+    }
+
+    /**
+     * Gets current amount of time to count from.
+     * @return {number} timestamp
+     */
+
+  }, {
+    key: 'getTimeDiff',
+    value: function getTimeDiff() {
+      if (this.props.syncTime) {
+        return this.props.to - this.state.from - new Date().getTime() + this.state.startTime;
+      } else {
+        return this.state.timeDiff - this.props.interval;
+      }
+    }
+
+    /**
+     * Gets correct digits for given period accounting for counter's radix and periods's segment size.
+     * @param {string} period
+     * @return {string[]} digits
+     */
+
+  }, {
+    key: 'getDigits',
+    value: function getDigits(period) {
+      var number = this.state.numbers[period];
+      var digits = this.state.digits[period];
+      var radix = this.props.radix;
+
+      if (digits && number >= Math.pow(radix, digits)) {
+        var maxValueArray = [];
+        for (var i = 0; i < digits; i++) {
+          maxValueArray.push((radix - 1).toString());
+        }return maxValueArray;
+      }
+
+      number = number.toString(radix);
+      var zeroArray = [];
+      for (var _i = 0; _i < digits - number.length; _i++) {
+        zeroArray.push('0');
+      }return (zeroArray.join('') + number).split('');
+    }
+
+    /**
+     * Gets a label for given period and number.
+     * @param {string} period
+     * @param {number} number
+     * @return {string} label
+     */
+
+  }, {
+    key: 'getLabel',
+    value: function getLabel(period, number) {
+      if (!this.props.labels) {
+        return period;
+      } else if (typeof this.props.labels === 'function') {
+        return this.props.labels(period, number);
+      } else {
+        return this.props.labels[period];
+      }
+    }
+
+    /**
+     * Gets CSS classes for the counter.
+     * @return {string} cssClasses
+     */
+
+  }, {
+    key: 'getCSSClasses',
+    value: function getCSSClasses() {
+      var type = this.props.easingFunction ? 'animated' : 'static';
+      var cssClasses = 'rollex rollex-' + type;
+      if (this.props.frozen) cssClasses += ' rollex-frozen';
+      return cssClasses;
+    }
+
+    /**
+     * Renders the counter.
+     * @return {ReactElement} counter
+     */
+
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var segments = this.state.periods.map(function (period, index) {
+        var separator = index < _this2.state.periods.length - 1 ? _react2.default.createElement(_CounterSegmentSeparator2.default, { content: _this2.props.separator }) : null;
+        return _react2.default.createElement(
+          'div',
+          { key: index, className: 'rollex-segment-wrapper' },
+          _react2.default.createElement(_CounterSegment2.default, {
+            period: period,
+            digits: _this2.getDigits(period),
+            radix: _this2.props.radix,
+            direction: _this2.props.direction,
+            easingFunction: _this2.props.easingFunction,
+            easingDuration: _this2.props.easingDuration,
+            digitMap: _this2.props.digitMap,
+            digitWrapper: _this2.props.digitWrapper,
+            label: _this2.getLabel(period, _this2.state.numbers[period])
+          }),
+          separator
+        );
+      });
+      return _react2.default.createElement(
+        'div',
+        { className: this.getCSSClasses() },
+        segments
+      );
+    }
+  }]);
+
+  return Counter;
+}(_react2.default.Component);
+
+Counter.propTypes = {
+  from: number,
+  to: number,
+  seconds: number,
+  interval: number,
+  direction: oneOf(['up', 'down']),
+  digits: oneOfType([number, object]),
+  minPeriod: string,
+  maxPeriod: string,
+  frozen: bool,
+  syncTime: bool,
+  easingFunction: string,
+  easingDuration: number,
+  radix: number,
+  digitMap: object,
+  digitWrapper: func,
+  labels: oneOfType([objectOf(string), func]),
+  separator: any
+};
+Counter.defaultProps = {
+  interval: 1000,
+  frozen: false,
+  direction: 'down',
+  minPeriod: 'seconds',
+  maxPeriod: 'days',
+  easingFunction: null,
+  easingDuration: 300,
+  radix: 10,
+  digitMap: {},
+  digitWrapper: function digitWrapper(digit) {
+    return _react2.default.createElement(
+      'span',
+      null,
+      digit
+    );
+  }
+};
+exports.default = Counter;
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = __webpack_require__(10);
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _AbstractCounterDigit2 = __webpack_require__(1);
+
+var _AbstractCounterDigit3 = _interopRequireDefault(_AbstractCounterDigit2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var _React$PropTypes = _react2.default.PropTypes,
+    number = _React$PropTypes.number,
+    string = _React$PropTypes.string;
+
+/**
+ * Forces reflow of a given element.
+ * @param {Element} element
+ */
+
+function forceReflow(element) {
+  element.offsetHeight; // eslint-disable-line no-unused-expressions
+}
+
+/**
+ * Animated digit component.
+ * Used when counter has an easing function.
+ * @example
+ * <AnimatedCounterDigit
+ *   digit='5'
+ *   radix={10}
+ *   direction='down'
+ *   digitMap={{}}
+ *   digitWrapper={(digit) => digit}
+ *   maxValue={9}
+ *   easingFunction='ease-in'
+ *   easingDuration={200}
+ * />
+ */
+
+var AnimatedCounterDigit = function (_AbstractCounterDigit) {
+  _inherits(AnimatedCounterDigit, _AbstractCounterDigit);
+
+  function AnimatedCounterDigit(props) {
+    _classCallCheck(this, AnimatedCounterDigit);
+
+    // e.x.: 0..9 and another 0 => 9+2 = 11 digits total (see reset method)
+    var _this = _possibleConstructorReturn(this, (AnimatedCounterDigit.__proto__ || Object.getPrototypeOf(AnimatedCounterDigit)).call(this, props));
+
+    _this.reset = function (event) {
+      if (_this.props.digit === '0') {
+        event.target.style.transitionProperty = 'none';
+        event.target.style.transform = 'translate3D(0, ' + _this.state.initialZeroPosition + '%, 0)';
+        forceReflow(event.target);
+        event.target.style.transitionProperty = '';
+      }
+    };
+
+    var singleDigitHeight = 100 / (_this.props.maxValue + 2);
+    var upperZeroPosition = -singleDigitHeight * (_this.props.radix - _this.props.maxValue - 1);
+    var lowerZeroPosition = -singleDigitHeight * _this.props.radix;
+    var initialZeroPosition = _this.props.direction === 'down' ? lowerZeroPosition : upperZeroPosition;
+    var finalZeroPosition = _this.props.direction === 'down' ? upperZeroPosition : lowerZeroPosition;
+
+    _this.state = {
+      initialZeroPosition: initialZeroPosition,
+      finalZeroPosition: finalZeroPosition,
+      singleDigitHeight: singleDigitHeight,
+      digitLane: _this.buildDigitLane()
+    };
+    return _this;
+  }
+  /**
+   * @property {string} direction - counting direction
+   * @property {number} maxValue - maximum value used to build a digit lane
+   * @property {string} easingFunction - easing function for transitions
+   * @property {number} easingDuration - duration for digit transitions in milliseconds
+   */
+
+
+  _createClass(AnimatedCounterDigit, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.reset({ target: _reactDom2.default.findDOMNode(this) });
+    }
+
+    /**
+     * Changes vertical position of digit lane without triggering a transition.
+     * In a lane like [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0] goes from first zero to last zero instantly.
+     * @param {SyntheticEvent} event
+     */
+
+  }, {
+    key: 'buildDigitDiv',
+
+
+    /**
+     * Creates a div for a digit lane member.
+     * @param {string} digit
+     * @param {number} key - index to use for React's key property
+     * @return {ReactElement}
+     */
+    value: function buildDigitDiv(digit, key) {
+      return _react2.default.createElement(
+        'div',
+        { key: key || digit, className: 'rollex-digit-lane-label' },
+        this.decorateDigit(digit)
+      );
+    }
+
+    /**
+     * Builds the digit lane.
+     * Digit lane contains all available digits.
+     * It changes its vertical position in order to emulate counter rolling.
+     * @return {ReactElement[]}
+     */
+
+  }, {
+    key: 'buildDigitLane',
+    value: function buildDigitLane() {
+      var digitLane = [];
+      for (var i = 0; i <= this.props.maxValue; i++) {
+        digitLane.push(this.buildDigitDiv(i));
+      }
+      digitLane.push(this.buildDigitDiv(0, this.props.radix + 1));
+      return digitLane;
+    }
+
+    /**
+     * Calculates Y position for the digit.
+     * @return {number} yPosition
+     */
+
+  }, {
+    key: 'getDigitPositionY',
+    value: function getDigitPositionY() {
+      var digitIndex = parseInt(this.props.digit, this.props.radix);
+      if (digitIndex === 0) {
+        return this.state.finalZeroPosition;
+      } else {
+        return -this.state.singleDigitHeight * (digitIndex + (this.props.radix - this.props.maxValue - 1));
+      }
+    }
+
+    /**
+     * Renders the digit.
+     * @return {ReactElement} digit
+     */
+
+  }, {
+    key: 'render',
+    value: function render() {
+      var transform = 'translate3D(0, ' + this.getDigitPositionY() + '%, 0)';
+      var style = {
+        transform: transform,
+        WebkitTransform: transform,
+        MsTransform: transform,
+        transitionTimingFunction: this.props.easingFunction,
+        transitionDuration: this.props.easingDuration + 'ms',
+        transitionProperty: 'transform',
+        willChange: 'transform'
+      };
+
+      return _react2.default.createElement(
+        'div',
+        { className: 'rollex-digit', onTransitionEnd: this.reset, style: style },
+        this.state.digitLane
+      );
+    }
+  }]);
+
+  return AnimatedCounterDigit;
+}(_AbstractCounterDigit3.default);
+
+AnimatedCounterDigit.propTypes = _extends({}, _AbstractCounterDigit3.default.propTypes, {
+  direction: string.isRequired,
+  maxValue: number.isRequired,
+  easingFunction: string.isRequired,
+  easingDuration: number.isRequired
+});
+exports.default = AnimatedCounterDigit;
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _AnimatedCounterDigit = __webpack_require__(4);
+
+var _AnimatedCounterDigit2 = _interopRequireDefault(_AnimatedCounterDigit);
+
+var _StaticCounterDigit = __webpack_require__(7);
+
+var _StaticCounterDigit2 = _interopRequireDefault(_StaticCounterDigit);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var _React$PropTypes = _react2.default.PropTypes,
+    arrayOf = _React$PropTypes.arrayOf,
+    object = _React$PropTypes.object,
+    number = _React$PropTypes.number,
+    string = _React$PropTypes.string,
+    func = _React$PropTypes.func;
+
+/**
+ * @type {Object}
+ * Maximum decimal values for available periods' numbers.
+ */
+
+var PERIOD_LIMITS = {
+  'seconds': 59,
+  'minutes': 59,
+  'hours': 23,
+  'days': 0
+};
+
+/**
+ * Counter segment component.
+ * @example
+ * <CounterSegment
+ *   digits={['0', '0']}
+ *   period='days'
+ *   radix={10}
+ *   direction='down'
+ *   easingDuration={300}
+ *   digitMap={{ '0' => 'o' }}
+ *   digitWrapper={(digit) => digit}
+ * />
+ */
+
+var CounterSegment = function (_React$Component) {
+  _inherits(CounterSegment, _React$Component);
+
+  function CounterSegment() {
+    _classCallCheck(this, CounterSegment);
+
+    return _possibleConstructorReturn(this, (CounterSegment.__proto__ || Object.getPrototypeOf(CounterSegment)).apply(this, arguments));
+  }
+
+  _createClass(CounterSegment, [{
+    key: 'getMaxValue',
+
+
+    /**
+     * OPTIMIZE: this probably shouldn't be done in buildDigits. Perhaps we could perform calculations
+     * for each possible index it in the constructor, but only for animated counters.
+     *
+     * Gets maximum value for period's digit with account for radix.
+     * Used for building digit lanes in {@link AnimatedCounterDigit}.
+     * @param {number} index - digit's index in number
+     * @return {number} maxValue
+     */
+    value: function getMaxValue(index) {
+      var maxValue = PERIOD_LIMITS[this.props.period];
+      if (!maxValue) return this.props.radix - 1;
+
+      var maxValueString = maxValue.toString(this.props.radix);
+      var maxDigitPos = maxValueString.length;
+      return index === this.props.digits.length - maxDigitPos ? parseInt(maxValueString[0]) : this.props.radix - 1;
+    }
+
+    /**
+     * Maps digits to corresponding components according to easing function.
+     * @return {ReactElement[]}
+     */
+
+    /**
+     * @property {string[]} digits - digits to display
+     * @property {string} period
+     * @property {number} radix
+     * @property {string} direction - counting direction
+     * @property {string} easingFunction - easing function to use for digit transitions
+     * @property {number} easingDuration - duration of digit transitions
+     * @property {Object} digitMap - a map for transforming particular digits
+     * @property {function(digit: number)} digitWrapper - a function for wrapping mapped digits
+     * @property {string} label
+     */
+
+  }, {
+    key: 'buildDigits',
+    value: function buildDigits() {
+      var _this2 = this;
+
+      return this.props.digits.map(function (digit, index) {
+        if (_this2.props.easingFunction) {
+          return _react2.default.createElement(_AnimatedCounterDigit2.default, {
+            key: index,
+            digit: digit,
+            maxValue: _this2.getMaxValue(index),
+            radix: _this2.props.radix,
+            direction: _this2.props.direction,
+            easingFunction: _this2.props.easingFunction,
+            easingDuration: _this2.props.easingDuration,
+            digitMap: _this2.props.digitMap,
+            digitWrapper: _this2.props.digitWrapper
+          });
+        } else {
+          return _react2.default.createElement(_StaticCounterDigit2.default, {
+            key: index,
+            digit: digit,
+            radix: _this2.props.radix,
+            digitMap: _this2.props.digitMap,
+            digitWrapper: _this2.props.digitWrapper
+          });
+        }
+      });
+    }
+
+    /**
+     * Renders the segment.
+     * @return {ReactElement} counter segment
+     */
+
+  }, {
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement(
+        'div',
+        { className: 'rollex-segment' },
+        _react2.default.createElement(
+          'div',
+          { className: 'rollex-digits', style: { overflow: 'hidden' } },
+          this.buildDigits()
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'rollex-label' },
+          this.props.label
+        )
+      );
+    }
+  }]);
+
+  return CounterSegment;
+}(_react2.default.Component);
+
+CounterSegment.propTypes = {
+  digits: arrayOf(string).isRequired,
+  period: string.isRequired,
+  radix: number.isRequired,
+  direction: string.isRequired,
+  easingFunction: string,
+  easingDuration: number.isRequired,
+  digitMap: object.isRequired,
+  digitWrapper: func.isRequired,
+  label: string
+};
+exports.default = CounterSegment;
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var any = _react2.default.PropTypes.any;
+
+/**
+ * Separator between {@link CounterSegment} elements.
+ * @example
+ * <CounterSegmentSeparator content=':' />
+ */
+
+var CounterSegmentSeparator = function (_React$Component) {
+  _inherits(CounterSegmentSeparator, _React$Component);
+
+  function CounterSegmentSeparator() {
+    _classCallCheck(this, CounterSegmentSeparator);
+
+    return _possibleConstructorReturn(this, (CounterSegmentSeparator.__proto__ || Object.getPrototypeOf(CounterSegmentSeparator)).apply(this, arguments));
+  }
+
+  _createClass(CounterSegmentSeparator, [{
+    key: 'render',
+
+
+    /**
+     * Renders the separator.
+     * @return {ReactElement} separator
+     */
+    value: function render() {
+      if (this.props.content === undefined) return null;
+      return _react2.default.createElement(
+        'div',
+        { className: 'rollex-separator' },
+        this.props.content
+      );
+    }
+    /**
+     * @property content
+     */
+
+  }]);
+
+  return CounterSegmentSeparator;
+}(_react2.default.Component);
+
+CounterSegmentSeparator.propTypes = {
+  content: any
+};
+exports.default = CounterSegmentSeparator;
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _AbstractCounterDigit2 = __webpack_require__(1);
+
+var _AbstractCounterDigit3 = _interopRequireDefault(_AbstractCounterDigit2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/**
+ * Static digit component.
+ * Used when no easing function is set for a counter.
+ * @example
+ * <StaticCounterDigit
+ *   digit='5'
+ *   radix={10}
+ *   digitMap={{}}
+ *   digitWrapper={(digit) => digit}
+ * />
+ */
+var StaticCounterDigit = function (_AbstractCounterDigit) {
+  _inherits(StaticCounterDigit, _AbstractCounterDigit);
+
+  function StaticCounterDigit() {
+    _classCallCheck(this, StaticCounterDigit);
+
+    return _possibleConstructorReturn(this, (StaticCounterDigit.__proto__ || Object.getPrototypeOf(StaticCounterDigit)).apply(this, arguments));
+  }
+
+  _createClass(StaticCounterDigit, [{
+    key: 'render',
+
+    /**
+     * Renders the digit.
+     * @return {ReactElement} digit
+     */
+    value: function render() {
+      return _react2.default.createElement(
+        'div',
+        { className: 'rollex-digit' },
+        this.decorateDigit(this.props.digit)
+      );
+    }
+  }]);
+
+  return StaticCounterDigit;
+}(_AbstractCounterDigit3.default);
+
+exports.default = StaticCounterDigit;
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _numberCalculator = __webpack_require__(2);
+
+var _numberCalculator2 = _interopRequireDefault(_numberCalculator);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+/**
+ * @type {string[]}
+ * Names for available periods.
+ */
+var PERIODS = ['days', 'hours', 'minutes', 'seconds'];
+
+/**
+ * Handles much of Counter initialization
+ */
+
+var CounterBuilder = function () {
+  _createClass(CounterBuilder, null, [{
+    key: 'validateProps',
+
+    /**
+     * Validates counter's props.
+     * @param {Object} props - props to validate
+     */
+    value: function validateProps(props) {
+      if (props.seconds !== undefined) {
+        if (props.to !== undefined || props.from !== undefined) {
+          throw new Error('cannot use "to" and "from" with "seconds"');
+        } else if (props.seconds < 0) {
+          throw new Error('"seconds" must be greater than or equal to zero');
+        }
+      } else if (props.to === undefined) {
+        throw new Error('provide either "seconds" or "to"');
+      } else if (props.to < props.from) {
+        throw new Error('"to" must be bigger than "from"');
+      }
+      if (props.digits !== undefined && props.digits < 0) {
+        throw new Error('"digits" must not be negative');
+      }
+      if (props.minPeriod && PERIODS.indexOf(props.minPeriod) < 0) {
+        throw new Error('"minPeriod" must be one of: ' + PERIODS.join(', ') + '\'');
+      }
+      if (props.maxPeriod && PERIODS.indexOf(props.maxPeriod) < 0) {
+        throw new Error('"maxPeriod" must be one of: ' + PERIODS.join(', '));
+      }
+      if (props.syncTime && props.to === undefined) {
+        throw new Error('"syncTime" must be used with "to"');
+      }
+      if (props.radix < 2 || props.radix > 36) {
+        throw new Error('"radix" must be between 2 and 36');
+      }
+      if (typeof props.digitWrapper !== 'function') {
+        throw new Error('"digitWrapper" must be a function');
+      }
+      if (_typeof(props.digitMap) !== 'object') {
+        throw new Error('"digitMap" must be an object');
+      }
+      if (props.direction !== 'up' && props.direction !== 'down') {
+        throw new Error('"direction" must be either up or down');
+      }
+    }
+
+    /**
+     * @param {Counter} counter
+     */
+
+  }]);
+
+  function CounterBuilder(counter) {
+    _classCallCheck(this, CounterBuilder);
+
+    this.counter = counter;
+    this.props = counter.props;
+    this.state = {};
+  }
+
+  /**
+   * Calculates initial state of the counter.
+   * @return {object} state
+   */
+
+
+  _createClass(CounterBuilder, [{
+    key: 'buildInitialState',
+    value: function buildInitialState() {
+      this.buildTimeProps();
+      this.buildPeriods();
+      this.buildDigitLimits();
+      this.buildInitialNumbers();
+      return this.state;
+    }
+
+    /**
+     * Sets initial time parameters.
+     */
+
+  }, {
+    key: 'buildTimeProps',
+    value: function buildTimeProps() {
+      var startTime = new Date().getTime();
+      var from = this.props.from === undefined ? startTime : this.props.from;
+      var timeDiff = this.props.seconds === undefined ? this.props.to - from : this.props.seconds * 1000;
+      this.state = _extends({}, this.state, {
+        startTime: startTime,
+        from: from,
+        timeDiff: timeDiff,
+        initialTimeDiff: timeDiff
+      });
+    }
+
+    /**
+     * Gets an array of periods to create segments for.
+     */
+
+  }, {
+    key: 'buildPeriods',
+    value: function buildPeriods() {
+      var periods = PERIODS.slice(PERIODS.indexOf(this.props.maxPeriod), PERIODS.indexOf(this.props.minPeriod) + 1);
+      this.state = _extends({}, this.state, {
+        periods: periods
+      });
+    }
+
+    /**
+     * Builds "digits" state property.
+     */
+
+  }, {
+    key: 'buildDigitLimits',
+    value: function buildDigitLimits() {
+      var digits = this.getDigitLimitsFromProps();
+      this.state = _extends({}, this.state, this.normalizeDigitLimits(digits));
+    }
+
+    /**
+     * Gets digit limits from props specified by the user.
+     * @return {Map<string, number>}
+     */
+
+  }, {
+    key: 'getDigitLimitsFromProps',
+    value: function getDigitLimitsFromProps() {
+      var digits = {};
+
+      if (typeof this.props.digits === 'number') {
+        var _iteratorNormalCompletion = true;
+        var _didIteratorError = false;
+        var _iteratorError = undefined;
+
+        try {
+          for (var _iterator = this.state.periods[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+            var period = _step.value;
+            digits[period] = this.props.digits;
+          }
+        } catch (err) {
+          _didIteratorError = true;
+          _iteratorError = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion && _iterator.return) {
+              _iterator.return();
+            }
+          } finally {
+            if (_didIteratorError) {
+              throw _iteratorError;
+            }
+          }
+        }
+      } else if (_typeof(this.props.digits) === 'object') {
+        digits = this.props.digits;
+      }
+      return digits;
+    }
+
+    /**
+     * Normalizes "digits" property.
+     * @param {object} digits
+     * @return {object}
+     */
+
+  }, {
+    key: 'normalizeDigitLimits',
+    value: function normalizeDigitLimits(digits) {
+      var normalizedDigits = {};
+
+      var _iteratorNormalCompletion2 = true;
+      var _didIteratorError2 = false;
+      var _iteratorError2 = undefined;
+
+      try {
+        for (var _iterator2 = this.state.periods[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+          var period = _step2.value;
+
+          if (digits[period]) {
+            normalizedDigits[period] = digits[period];
+          } else {
+            var limited = digits[period] === undefined;
+            normalizedDigits[period] = this.getMinSegmentSize(period, limited);
+          }
+        }
+      } catch (err) {
+        _didIteratorError2 = true;
+        _iteratorError2 = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion2 && _iterator2.return) {
+            _iterator2.return();
+          }
+        } finally {
+          if (_didIteratorError2) {
+            throw _iteratorError2;
+          }
+        }
+      }
+
+      return { digits: normalizedDigits };
+    }
+
+    /**
+     * Calculates number of digits for current radix and given period.
+     * @param {string} period - period to calculate digits for
+     * @param {boolean} limited
+     * @return {number}
+     */
+
+  }, {
+    key: 'getMinSegmentSize',
+    value: function getMinSegmentSize(period, limited) {
+      var maxValue = this.getPeriodMaxValue(period, limited);
+      return maxValue.toString(this.props.radix).length;
+    }
+
+    /**
+     * Calculates maximum value for given period.
+     * @param {string} period
+     * @param {boolean} limited
+     * @return {number}
+     */
+
+  }, {
+    key: 'getPeriodMaxValue',
+    value: function getPeriodMaxValue(period, limited) {
+      if (!limited && period === this.props.maxPeriod) {
+        return _numberCalculator2.default.getPeriodNumberAt(period, this.props.maxPeriod, this.state.initialTimeDiff);
+      }
+      switch (period) {
+        case 'seconds':
+        case 'minutes':
+          return 59;
+        case 'hours':
+          return 23;
+        case 'days':
+          return Math.pow(this.props.radix, 2) - 1; // 99 for decimal
+      }
+    }
+
+    /**
+     * Calculates initial numbers for all periods.
+     */
+
+  }, {
+    key: 'buildInitialNumbers',
+    value: function buildInitialNumbers() {
+      var timestamp = this.props.direction === 'down' ? this.state.initialTimeDiff : 0;
+      this.state = _extends({}, this.state, {
+        numbers: _numberCalculator2.default.calculateNumbers(this.state.periods, timestamp)
+      });
+    }
+  }]);
+
+  return CounterBuilder;
+}();
+
+exports.default = CounterBuilder;
+
+/***/ }),
+/* 9 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+/**
+ * Helper object with global interval management functions.
+ */
+var GlobalIntervals = {
+  /**
+   * Ensures existence of an interval.
+   * @param {!number} duration - interval duration in milliseconds
+   */
+  ensureExistence: function ensureExistence(duration) {
+    if (!window.rollexIntervals) window.rollexIntervals = {};
+    if (!window.rollexIntervals[duration]) {
+      window.rollexIntervals[duration] = {
+        interval: setInterval(function () {
+          window.dispatchEvent(new CustomEvent("rollex:tick:" + duration));
+        }, duration, false),
+        counterCount: 0
+      };
+    }
+  },
+
+  /**
+   * Cleans up an interval.
+   * @param {!number} duration - interval duration in milliseconds
+   */
+  cleanup: function cleanup(duration) {
+    if (window.rollexIntervals[duration].counterCount === 0) {
+      clearInterval(window.rollexIntervals[duration].interval);
+      delete window.rollexIntervals[duration];
+    }
+  },
+
+  /**
+   * Adds a subscriber to an interval.
+   * @param {!number} duration - interval duration in milliseconds
+   * @param {!Object|function} subscriber
+   */
+  subscribe: function subscribe(duration, subscriber) {
+    window.rollexIntervals[duration].counterCount += 1;
+    window.addEventListener("rollex:tick:" + duration, subscriber, false);
+  },
+
+  /**
+   * Removes a subscriber from an interval.
+   * @param {!number} duration - interval duration in milliseconds
+   * @param {!Object|function} subscriber
+   */
+  unsubscribe: function unsubscribe(duration, subscriber) {
+    window.removeEventListener("rollex:tick:" + duration, subscriber, false);
+    window.rollexIntervals[duration].counterCount -= 1;
+  }
+};
+
+exports.default = GlobalIntervals;
+
+/***/ }),
+/* 10 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
+
+/***/ }),
+/* 11 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Counter = undefined;
+
+var _Counter = __webpack_require__(3);
+
+var _Counter2 = _interopRequireDefault(_Counter);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.Counter = _Counter2.default;
+
+/***/ })
+/******/ ]);
+});