material-datetimepicker-rails 2.4.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: a8f23e83c5665cd36f28070dd49c69a12773bb63
+  data.tar.gz: 2ce52086a4e408dccaeea286685106b92802e8d2
+SHA512:
+  metadata.gz: e20a7cf8150f194ae19f78eca6fb17e3faf587ad0558e36dcb906801f5da8a62567777e8af338cf6f7b447f6c83739183deb49060bd792bee26db6a6ffc5da7c
+  data.tar.gz: 6de06b6fb8235a769d5ee697868e2add9c5b36916625173672e65b9806283b5d1182ec50b9379e0d63450fb44d37d82b69d5389204c0f9e8e53ab204aa292762

data/.gitignore

@@ -0,0 +1,14 @@
+/.idea/
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+
+# rspec failure tracking
+.rspec_status
+/*.gem

data/.rspec

@@ -0,0 +1,2 @@
+--format documentation
+--color

data/.travis.yml

@@ -0,0 +1,5 @@
+sudo: false
+language: ruby
+rvm:
+  - 2.4.0
+before_install: gem install bundler -v 1.14.6

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,74 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at al3xander.koval@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in material-datetimepicker-rails.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 hetsketch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,41 @@
+# Material::Datetimepicker::Rails
+
+Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/material/datetimepicker/rails`. To experiment with that code, run `bin/console` for an interactive prompt.
+
+TODO: Delete this and the text above, and describe your gem
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'material-datetimepicker-rails'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install material-datetimepicker-rails
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/material-datetimepicker-rails. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
+

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "material/datetimepicker/rails"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start(__FILE__)

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/lib/material/datetimepicker/rails.rb

@@ -0,0 +1,9 @@
+require 'material/datetimepicker/rails/version'
+
+module Material
+  module Datetimepicker
+    module Rails
+      class Engine < ::Rails::Engine; end
+    end
+  end
+end

data/lib/material/datetimepicker/rails/version.rb

@@ -0,0 +1,7 @@
+module Material
+  module Datetimepicker
+    module Rails
+      VERSION = '2.4.1'
+    end
+  end
+end

data/material-datetimepicker-rails.gemspec

@@ -0,0 +1,38 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'material/datetimepicker/rails/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "material-datetimepicker-rails"
+  spec.version       = Material::Datetimepicker::Rails::VERSION
+  spec.authors       = ["hetsketch"]
+  spec.email         = ["al3xander.koval@gmail.com"]
+
+  spec.summary       = %q{Material date and time picker assets for Rails}
+  spec.description   = %q{Simple wrapper for material-datetime-picker JS library}
+  spec.homepage      = "https://github.com/hetsketch/material-datetimepicker-rails"
+  spec.license       = "MIT"
+
+  # Prevent pushing this gem to RubyGems.org. To allow pushes either set the 'allowed_push_host'
+  # to allow pushing to a single host or delete this section to allow pushing to any host.
+  if spec.respond_to?(:metadata)
+    # spec.metadata['allowed_push_host'] = "http://rubygems.org"
+  else
+    raise "RubyGems 2.0 or newer is required to protect against " \
+      "public gem pushes."
+  end
+
+  spec.files         = `git ls-files -z`.split("\x0").reject do |f|
+    f.match(%r{^(test|spec|features)/})
+  end
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.14"
+  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "rspec", "~> 3.0"
+  spec.add_runtime_dependency     "momentjs-rails", "~> 2.17", ">= 2.17.1"
+  spec.add_runtime_dependency     "rome-rails", "~> 2.1", ">= 2.1.22"
+end

data/vendor/assets/javascripts/material-datetime-picker.js

@@ -0,0 +1,744 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('rome'), require('moment')) :
+	typeof define === 'function' && define.amd ? define(['rome', 'moment'], factory) :
+	(global.MaterialDatetimePicker = factory(global.rome,global.moment));
+}(this, (function (rome,moment) { 'use strict';
+
+rome = 'default' in rome ? rome['default'] : rome;
+moment = 'default' in moment ? moment['default'] : moment;
+
+var popupTemplate = (function () {
+  return "\n<div class=\"c-datepicker\">\n  <a class=\"c-datepicker__toggle c-datepicker__toggle--right c-datepicker--show-time js-show-clock\" title=\"show time picker\">\n  </a>\n\n  <a class=\"c-datepicker__toggle c-datepicker__toggle--left c-datepicker--show-calendar is-selected js-show-calendar\" title=\"show date picker\">\n  </a>\n\n  <div class=\"c-datepicker__header\">\n    <div class=\"c-datepicker__header-day\">\n      <span class=\"js-day\">Monday</span>\n    </div>\n    <div class=\"c-datepicker__header-date\">\n      <span class=\"c-datepicker__header-date__month js-date-month\"></span>\n      <span class=\"c-datepicker__header-date__day js-date-day\"></span>\n      <span class=\"c-datepicker__header-date__time js-date-time\">\n        <span class=\"c-datepicker__header-date__hours js-date-hours active\">09</span>:<span class=\"c-datepicker__header-date__minutes js-date-minutes\">00</span>\n      </span>\n    </div>\n  </div>\n\n  <div class=\"c-datepicker__calendar\"></div>\n  <div class=\"c-datepicker__clock\">\n    <div class=\"c-datepicker__clock__am-pm-toggle\">\n      <label class=\"c-datepicker__toggle--checked\">\n        <input checked=\"checked\" class=\"c-datepicker__toggle c-datepicker__toggle--right c-datepicker__clock--am\" type=\"radio\" name=\"time-date-toggle\" value=\"AM\" />\n        AM\n      </label>\n\n      <label>\n        <input class=\"c-datepicker__toggle c-datepicker__toggle--right c-datepicker__clock--pm\" type=\"radio\" name=\"time-date-toggle\" value=\"PM\" />\n        PM\n      </label>\n    </div>\n    <div class=\"c-datepicker__mask\"></div>\n    <div class=\"c-datepicker__clock__hours js-clock-hours active\">\n      <div class=\"c-datepicker__clock__num\" data-number=\"3\">3</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"4\">4</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"5\">5</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"6\">6</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"7\">7</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"8\">8</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"9\">9</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"10\">10</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"11\">11</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"0\">12</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"1\">1</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"2\">2</div>\n      <div class=\"c-datepicker__clock-hands\">\n        <div class=\"c-datepicker__hour-hand\"></div>\n      </div>\n    </div>\n    <div class=\"c-datepicker__clock__minutes js-clock-minutes\">\n      <div class=\"c-datepicker__clock__num\" data-number=\"15\">15</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"20\">20</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"25\">25</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"30\">30</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"35\">35</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"40\">40</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"45\">45</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"50\">50</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"55\">55</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"0\">0</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"5\">5</div>\n      <div class=\"c-datepicker__clock__num\" data-number=\"10\">10</div>\n      <div class=\"c-datepicker__clock-hands\">\n        <div class=\"c-datepicker__hour-hand\"></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"modal-btns\">\n    <a class=\"c-btn c-btn--flat js-cancel\">Cancel</a>\n    <a class=\"c-btn c-btn--flat js-ok\">OK</a>\n  </div>\n</div>\n";
+});
+
+var scrimTemplate = (function (_ref) {
+  var styles = _ref.styles;
+  return "\n<div class=\"" + styles.scrim + "\"></div>\n";
+});
+
+var classCallCheck = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+};
+
+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 inherits = function (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 possibleConstructorReturn = function (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;
+};
+
+
+
+
+
+var slicedToArray = function () {
+  function sliceIterator(arr, i) {
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _e = undefined;
+
+    try {
+      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value);
+
+        if (i && _arr.length === i) break;
+      }
+    } catch (err) {
+      _d = true;
+      _e = err;
+    } finally {
+      try {
+        if (!_n && _i["return"]) _i["return"]();
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+
+    return _arr;
+  }
+
+  return function (arr, i) {
+    if (Array.isArray(arr)) {
+      return arr;
+    } else if (Symbol.iterator in Object(arr)) {
+      return sliceIterator(arr, i);
+    } else {
+      throw new TypeError("Invalid attempt to destructure non-iterable instance");
+    }
+  };
+}();
+
+
+
+
+
+
+
+
+
+
+
+
+
+var toConsumableArray = function (arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+
+    return arr2;
+  } else {
+    return Array.from(arr);
+  }
+};
+
+//
+// basic event triggering and listening
+//
+var Events = function () {
+  function Events() {
+    classCallCheck(this, Events);
+
+    this._events = {
+      '*': []
+    };
+  }
+
+  createClass(Events, [{
+    key: 'trigger',
+    value: function trigger(eventName, evtData) {
+      var _this = this;
+
+      eventName.split(' ').forEach(function (evtName) {
+        // trigger a global event event
+        _this._events['*'].forEach(function (evt) {
+          return evt.fn.call(evt.scope, evtName, evtData);
+        });
+        // if there are any listeners to this event
+        // then fire their handlers
+        if (_this._events[evtName]) {
+          _this._events[evtName].forEach(function (evt) {
+            evt.fn.call(evt.scope, evtData);
+          });
+        }
+      });
+      return this;
+    }
+  }, {
+    key: 'on',
+    value: function on(eventName, fn, scope) {
+      if (!this._events[eventName]) this._events[eventName] = [];
+      this._events[eventName].push({
+        eventName: eventName,
+        fn: fn,
+        scope: scope || this
+      });
+      return this;
+    }
+  }, {
+    key: 'off',
+    value: function off(eventName, fn) {
+      if (!this._events[eventName]) return this;
+      if (!fn) {
+        this._events[eventName] = [];
+      }
+      this._events[eventName] = this._events[eventName].filter(function (evt) {
+        return evt.fn !== fn;
+      });
+      return this;
+    }
+  }, {
+    key: 'once',
+    value: function once(eventName, fn, scope) {
+      var _this2 = this;
+
+      var func = function func() {
+        fn.call(scope, eventName, fn, scope);
+        _this2.off(eventName, func);
+      };
+      return this.on(eventName, func, scope);
+    }
+  }]);
+  return Events;
+}();
+
+var ESC_KEY = 27;
+
+var prefix = 'c-datepicker';
+var defaults$$1 = function defaults$$1() {
+  return {
+    default: moment().startOf('hour'),
+    // allow the user to override all the classes
+    // used for styling the calendar
+    styles: {
+      scrim: 'c-scrim',
+      back: prefix + '__back',
+      container: prefix + '__calendar',
+      date: prefix + '__date',
+      dayBody: prefix + '__days-body',
+      dayBodyElem: prefix + '__day-body',
+      dayConcealed: prefix + '__day--concealed',
+      dayDisabled: prefix + '__day--disabled',
+      dayHead: prefix + '__days-head',
+      dayHeadElem: prefix + '__day-head',
+      dayRow: prefix + '__days-row',
+      dayTable: prefix + '__days',
+      month: prefix + '__month',
+      next: prefix + '__next',
+      positioned: prefix + '--fixed',
+      selectedDay: prefix + '__day--selected',
+      selectedTime: prefix + '__time--selected',
+      time: prefix + '__time',
+      timeList: prefix + '__time-list',
+      timeOption: prefix + '__time-option',
+      clockNum: prefix + '__clock__num'
+    },
+    // format to display in the input, or set on the element
+    format: 'DD/MM/YY',
+    // the container to append the picker
+    container: document.body,
+    // allow any dates
+    dateValidator: undefined
+  };
+};
+
+var DateTimePicker = function (_Events) {
+  inherits(DateTimePicker, _Events);
+
+  function DateTimePicker() {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    classCallCheck(this, DateTimePicker);
+
+    var _this = possibleConstructorReturn(this, (DateTimePicker.__proto__ || Object.getPrototypeOf(DateTimePicker)).call(this));
+
+    var styles = Object.assign(defaults$$1().styles, options.styles);
+    _this.options = Object.assign(defaults$$1(), options);
+    _this.options.styles = styles;
+
+    // listen to any event
+    _this.on('*', function (evtName, evtData) {
+      if (_this.options.el) {
+        // if there is a custom element, fire a real dom
+        // event on that now
+        var event = new CustomEvent(evtName, _this, evtData);
+        _this.options.el.dispatchEvent(event);
+      }
+    });
+    return _this;
+  }
+
+  // intialize the rom calendar with our default date and
+  // style options
+
+
+  createClass(DateTimePicker, [{
+    key: 'initializeRome',
+    value: function initializeRome(container, validator) {
+      var onData = this.onChangeDate.bind(this);
+
+      return rome(container, {
+        styles: this.options.styles,
+        time: false,
+        dateValidator: validator,
+        initialValue: this.value
+      }).on('data', onData);
+    }
+
+    // called to open the picker
+
+  }, {
+    key: 'open',
+    value: function open() {
+      var scrimEl = scrimTemplate(this.options);
+      _appendTemplate(document.body, scrimEl);
+      _appendTemplate(this.options.container, popupTemplate());
+      this.pickerEl = this.options.container.querySelector('.' + prefix);
+      this.scrimEl = document.body.querySelector('.' + this.options.styles.scrim);
+      this.amToggleEl = this.$('.c-datepicker__clock--am');
+      this.pmToggleEl = this.$('.c-datepicker__clock--pm');
+
+      if (!this.value) {
+        // TODO hack
+        // set/setDate/setTime need refactoring to have single concerns
+        // (set: set the value; setDate/setTime rename to renderDate/renderTime
+        //  and deal with updating the view only).
+        // For now this allows us to set the default time using the same quantize
+        // rules as setting the date explicitly. Setting this.value meets setTime|Date's
+        // expectation that we have a value, and `0` guarantees that we will detect
+        this.value = moment(0);
+        this.setDate(this.options.default);
+        this.setTime(this.options.default);
+      } else {
+        this.setDate(this.value);
+        this.setTime(this.value);
+      }
+
+      this.initializeRome(this.$('.' + this.options.styles.container), this.options.dateValidator);
+      this._listenForCloseEvents();
+
+      this._show();
+    }
+  }, {
+    key: 'close',
+    value: function close() {
+      this._stopListeningForCloseEvents();
+      this._hide();
+    }
+  }, {
+    key: '_hide',
+    value: function _hide() {
+      var _this2 = this;
+
+      this.pickerEl.classList.remove('open');
+      window.setTimeout(function () {
+        _this2.options.container.removeChild(_this2.pickerEl);
+        document.body.removeChild(_this2.scrimEl);
+        _this2.trigger('close');
+      }, 200);
+      return this;
+    }
+  }, {
+    key: '_show',
+    value: function _show() {
+      var _this3 = this;
+
+      this.delegateEvents();
+      // add the animation classes on the next animation tick
+      // so that they actually work
+      window.requestAnimationFrame(function () {
+        _this3.scrimEl.classList.add(_this3.options.styles.scrim + '--shown');
+        _this3.pickerEl.classList.add(prefix + '--open');
+        _this3.trigger('open');
+      });
+      return this;
+    }
+  }, {
+    key: '_listenForCloseEvents',
+    value: function _listenForCloseEvents() {
+      var _this4 = this;
+
+      this._onWindowKeypress = function (e) {
+        if (e.which === ESC_KEY) {
+          _this4.close();
+        }
+      };
+
+      window.addEventListener("keydown", this._onWindowKeypress);
+    }
+  }, {
+    key: '_stopListeningForCloseEvents',
+    value: function _stopListeningForCloseEvents() {
+      window.removeEventListener("keydown", this._onWindowKeypress);
+      this._closeHandler = null;
+    }
+  }, {
+    key: 'delegateEvents',
+    value: function delegateEvents() {
+      var _this5 = this;
+
+      this.$('.js-cancel').addEventListener('click', function () {
+        return _this5.clickCancel();
+      }, false);
+      this.$('.js-ok').addEventListener('click', function () {
+        return _this5.clickSubmit();
+      }, false);
+
+      this.$('.js-date-hours').addEventListener('click', function (e) {
+        return _this5.showHourClock(e);
+      }, false);
+      this.$('.js-date-minutes').addEventListener('click', function (e) {
+        return _this5.showMinuteClock(e);
+      }, false);
+
+      this.$('.js-clock-hours').addEventListener('mouseleave', function (e) {
+        return _this5.mouseOutHourClock(e);
+      }, false);
+      this.$('.js-clock-hours .' + this.options.styles.clockNum).forEach(function (el) {
+        el.addEventListener('click', function (e) {
+          return _this5.clickClickHour(e).showMinuteClock();
+        }, false);
+        el.addEventListener('mouseenter', function (e) {
+          return _this5.mouseInHourClock(e);
+        }, false);
+      });
+
+      this.$('.js-clock-minutes').addEventListener('mouseleave', function (e) {
+        return _this5.mouseOutMinuteClock(e);
+      }, false);
+      this.$('.js-clock-minutes .' + this.options.styles.clockNum).forEach(function (el) {
+        el.addEventListener('click', function (e) {
+          return _this5.clickClockMinute(e);
+        }, false);
+        el.addEventListener('mouseenter', function (e) {
+          return _this5.mouseInMinuteClock(e);
+        }, false);
+      });
+
+      this.$('.c-datepicker__clock--am').addEventListener('click', function (e) {
+        return _this5.clickAm(e);
+      }, false);
+      this.$('.c-datepicker__clock--pm').addEventListener('click', function (e) {
+        return _this5.clickPm(e);
+      }, false);
+
+      this.$('.js-show-calendar').addEventListener('click', function (e) {
+        return _this5.clickShowCalendar(e);
+      }, false);
+      this.$('.js-date-day').addEventListener('click', function (e) {
+        return _this5.clickShowCalendar(e);
+      }, false);
+      this.$('.js-date-month').addEventListener('click', function (e) {
+        return _this5.clickShowCalendar(e);
+      }, false);
+
+      this.$('.js-show-clock').addEventListener('click', function (e) {
+        return _this5.clickShowClock(e);
+      }, false);
+
+      this.scrimEl.addEventListener('click', function () {
+        return _this5.close();
+      }, false);
+
+      return this;
+    }
+  }, {
+    key: 'clickSubmit',
+    value: function clickSubmit() {
+      this.close();
+      this.trigger('submit', this.value, this);
+      return this;
+    }
+  }, {
+    key: 'clickCancel',
+    value: function clickCancel() {
+      this.close();
+      this.trigger('cancel', this.value, this);
+      return this;
+    }
+  }, {
+    key: 'clickClickHour',
+    value: function clickClickHour(e) {
+      var newValue = moment(this.value);
+      var number = parseInt(e.currentTarget.getAttribute('data-number'), 10);
+      if (number === 0 && this.meridiem === 'pm') {
+        number = 12;
+      } else if (this.meridiem === 'pm') {
+        number += 12;
+      }
+
+      newValue.hour(number);
+      this.set(newValue);
+      return this;
+    }
+  }, {
+    key: 'clickClockMinute',
+    value: function clickClockMinute(e) {
+      var newValue = moment(this.value);
+      var number = parseInt(e.currentTarget.getAttribute('data-number'), 10);
+
+      newValue.minute(number);
+      this.set(newValue);
+      return this;
+    }
+  }, {
+    key: 'onChangeDate',
+    value: function onChangeDate(dateString) {
+      var newValue = moment(this.value);
+
+      var _dateString$split = dateString.split('-'),
+          _dateString$split2 = slicedToArray(_dateString$split, 3),
+          year = _dateString$split2[0],
+          month = _dateString$split2[1],
+          date = _dateString$split2[2];
+
+      newValue.set({ year: year, month: month - 1, date: date });
+
+      this.set(newValue);
+      return this;
+    }
+  }, {
+    key: 'mouseInHourClock',
+    value: function mouseInHourClock() {
+      var active = this.$('.js-clock-hours .' + this.options.styles.clockNum + '--active');
+
+      if (active) {
+        active.classList.add('hide-hand');
+      }
+    }
+  }, {
+    key: 'mouseInMinuteClock',
+    value: function mouseInMinuteClock() {
+      var active = this.$('.js-clock-minutes .' + this.options.styles.clockNum + '--active');
+
+      if (active) {
+        active.classList.add('hide-hand');
+      }
+    }
+  }, {
+    key: 'mouseOutHourClock',
+    value: function mouseOutHourClock() {
+      var hideHand = this.$('.js-clock-hours .' + this.options.styles.clockNum + '--active.hide-hand');
+
+      if (hideHand) {
+        hideHand.classList.remove('hide-hand');
+      }
+    }
+  }, {
+    key: 'mouseOutMinuteClock',
+    value: function mouseOutMinuteClock() {
+      var hideHand = this.$('.js-clock-minutes .' + this.options.styles.clockNum + '--active.hide-hand');
+
+      if (hideHand) {
+        hideHand.classList.remove('hide-hand');
+      }
+    }
+  }, {
+    key: 'clickAm',
+    value: function clickAm() {
+      var newValue = moment(this.value);
+      if (this.meridiem === 'pm') {
+        this.meridiem = 'am';
+        newValue.hour(newValue.hour() - 12);
+      }
+      this.set(newValue);
+      return this;
+    }
+  }, {
+    key: 'clickPm',
+    value: function clickPm() {
+      var newValue = moment(this.value);
+      if (this.meridiem === 'am') {
+        this.meridiem = 'pm';
+        newValue.hour(newValue.hour() + 12);
+      }
+      this.set(newValue);
+      return this;
+    }
+  }, {
+    key: 'showHourClock',
+    value: function showHourClock() {
+      this.clickShowClock();
+      this.$('.js-clock-hours').classList.add('active');
+      this.$('.js-clock-minutes').classList.remove('active');
+      this.$('.js-date-hours').classList.add('active');
+      this.$('.js-date-minutes').classList.remove('active');
+    }
+  }, {
+    key: 'showMinuteClock',
+    value: function showMinuteClock() {
+      this.clickShowClock();
+      this.$('.js-clock-hours').classList.remove('active');
+      this.$('.js-clock-minutes').classList.add('active');
+      this.$('.js-date-hours').classList.remove('active');
+      this.$('.js-date-minutes').classList.add('active');
+    }
+  }, {
+    key: 'clickShowCalendar',
+    value: function clickShowCalendar() {
+      this.$('.js-show-calendar').classList.add('is-selected');
+      this.$('.js-show-clock').classList.remove('is-selected');
+    }
+  }, {
+    key: 'clickShowClock',
+    value: function clickShowClock() {
+      this.$('.js-show-clock').classList.add('is-selected');
+      this.$('.js-show-calendar').classList.remove('is-selected');
+    }
+  }, {
+    key: 'data',
+    value: function data(val) {
+      console.warn('MaterialDatetimePicker#data is deprecated and will be removed in a future release. Please use get or set.');
+      return val ? this.set(val) : this.value;
+    }
+  }, {
+    key: 'get',
+    value: function get$$1() {
+      return moment(this.value);
+    }
+
+    // update the picker's date/time value
+    // value: moment
+    // silent: if true, do not fire any events on change
+
+  }, {
+    key: 'set',
+    value: function set$$1(value) {
+      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+          _ref$silent = _ref.silent,
+          silent = _ref$silent === undefined ? false : _ref$silent;
+
+      var m = moment(value);
+
+      // maintain a list of change events to fire all at once later
+      var evts = [];
+      if (m.date() !== this.value.date() || m.month() !== this.value.month() || m.year() !== this.value.year()) {
+        this.setDate(m);
+        evts.push('change:date');
+      }
+
+      if (m.hour() !== this.value.hour() || m.minutes() !== this.value.minutes()) {
+        this.setTime(m);
+        evts.push('change:time');
+      }
+
+      if (this.options.el) {
+        // if there is an element to fire events on
+        if (this.options.el.tagName === 'INPUT') {
+          // and it is an input element then set the value
+          this.options.el.value = m.format(this.options.format);
+        } else {
+          // or any other element set a data-value attribute
+          this.options.el.setAttribute('data-value', m.format(this.options.format));
+        }
+      }
+      if (evts.length > 0 && !silent) {
+        // fire all the events we've collected
+        this.trigger(['change'].concat(evts).join(' '), this.value, this);
+      }
+    }
+
+    // set the value and header elements to `date`
+    // the calendar will be updated automatically
+    // by rome when clicked
+
+  }, {
+    key: 'setDate',
+    value: function setDate(date) {
+      var m = moment(date);
+      var month = m.format('MMM');
+      var day = m.format('Do');
+      var dayOfWeek = m.format('dddd');
+      var year = m.format('YYYY');
+
+      this.$('.js-day').innerText = dayOfWeek;
+      this.$('.js-date-month').innerText = month + ' ' + year;
+      this.$('.js-date-day').innerText = day;
+      this.value.year(m.year());
+      this.value.month(m.month());
+      this.value.date(m.date());
+      return this;
+    }
+
+    // set the value and header elements to `time`
+    // also update the hands of the clock
+
+  }, {
+    key: 'setTime',
+    value: function setTime(time) {
+      var m = moment(time);
+      var minuteAsInt = Math.round(parseInt(m.format('mm'), 10) / 5) * 5;
+      m.minutes(minuteAsInt);
+
+      var hour = m.format('HH');
+      var minutes = m.format('mm');
+      var hourAsInt = parseInt(hour, 10) % 12;
+
+      var oldActiveHours = this.$('.js-clock-hours .' + this.options.styles.clockNum + '--active');
+      var oldActiveMinutes = this.$('.js-clock-minutes .' + this.options.styles.clockNum + '--active');
+
+      this.$('.js-date-hours').innerText = hour;
+      this.$('.js-date-minutes').innerText = minutes;
+
+      if (oldActiveHours) {
+        oldActiveHours.classList.remove(this.options.styles.clockNum + '--active');
+      }
+
+      if (oldActiveMinutes) {
+        oldActiveMinutes.classList.remove(this.options.styles.clockNum + '--active');
+      }
+
+      this.$('.js-clock-hours .' + this.options.styles.clockNum + '[data-number="' + hourAsInt + '"]').classList.add(this.options.styles.clockNum + '--active');
+      this.$('.js-clock-minutes .' + this.options.styles.clockNum + '[data-number="' + minuteAsInt + '"]').classList.add(this.options.styles.clockNum + '--active');
+
+      this.value.hours(m.hours());
+      this.value.minutes(m.minutes());
+      this.meridiem = this.value.format('a');
+
+      if (this.meridiem === 'pm') {
+        this.amToggleEl.removeAttribute('checked');
+        this.pmToggleEl.setAttribute('checked', 'checked');
+        this.amToggleEl.parentElement.classList.remove('c-datepicker__toggle--checked');
+        this.pmToggleEl.parentElement.classList.add('c-datepicker__toggle--checked');
+      } else {
+        this.pmToggleEl.removeAttribute('checked');
+        this.amToggleEl.setAttribute('checked', 'checked');
+        this.pmToggleEl.parentElement.classList.remove('c-datepicker__toggle--checked');
+        this.amToggleEl.parentElement.classList.add('c-datepicker__toggle--checked');
+      }
+      return this;
+    }
+  }, {
+    key: '$',
+    value: function $(selector) {
+      var els = this.pickerEl.querySelectorAll(selector);
+      return els.length > 1 ? [].concat(toConsumableArray(els)) : els[0];
+    }
+  }]);
+  return DateTimePicker;
+}(Events);
+
+function _appendTemplate(parent, template) {
+  var tempEl = document.createElement('div');
+  tempEl.innerHTML = template.trim();
+  parent.appendChild(tempEl.firstChild);
+  return this;
+}
+
+return DateTimePicker;
+
+})));
+//# sourceMappingURL=material-datetime-picker.js.map