styledot/forms.js

23andMe Design System

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

var LabelInside = /*#__PURE__*/function () {
  function LabelInside(el) {
    _classCallCheck(this, LabelInside);

    var that = this;
    this.el = el;
    this.formElement = this.el.querySelectorAll('input, select')[0];
    this.checkValue();
    this.checkAutofill();
    this.formElement.focus(this.focus.bind(this));
    this.formElement.blur(this.checkValue.bind(this));
    this.checkAutofocus();
    setInterval(function () {
      that.checkValue();
    }, 35);
  }

  _createClass(LabelInside, [{
    key: "focus",
    value: function focus() {
      this.el.classList.add('mod-active');
    }
  }, {
    key: "checkAutofill",
    value: function checkAutofill() {
      var _this = this;

      var onAnimationStart = function onAnimationStart() {
        return _this.el.classList.add('mod-active');
      };

      this.formElement.addEventListener('animationstart', onAnimationStart, false);
    }
  }, {
    key: "checkValue",
    value: function checkValue() {
      if (this.formElement.value) {
        this.el.classList.add('mod-active');
      } else {
        this.el.classList.remove('mod-active');
      }
    }
  }, {
    key: "checkAutofocus",
    value: function checkAutofocus() {
      if (this.formElement.autofocus) {
        this.formElement.focus();
      }
    }
  }]);

  return LabelInside;
}();

document.addEventListener('DOMContentLoaded', function () {
  var fieldsWithInsideLabel = document.querySelectorAll('.sd-form-field.mod-label-inside');
  fieldsWithInsideLabel.forEach(function (field) {
    return new LabelInside(field);
  });
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJMYWJlbEluc2lkZSIsImVsIiwidGhhdCIsImZvcm1FbGVtZW50IiwicXVlcnlTZWxlY3RvckFsbCIsImNoZWNrVmFsdWUiLCJjaGVja0F1dG9maWxsIiwiZm9jdXMiLCJiaW5kIiwiYmx1ciIsImNoZWNrQXV0b2ZvY3VzIiwic2V0SW50ZXJ2YWwiLCJjbGFzc0xpc3QiLCJhZGQiLCJvbkFuaW1hdGlvblN0YXJ0IiwiYWRkRXZlbnRMaXN0ZW5lciIsInZhbHVlIiwicmVtb3ZlIiwiYXV0b2ZvY3VzIiwiZG9jdW1lbnQiLCJmaWVsZHNXaXRoSW5zaWRlTGFiZWwiLCJmb3JFYWNoIiwiZmllbGQiXSwic291cmNlcyI6WyIuLi9zcmMvbGliL2Zvcm1zLmpzIl0sInNvdXJjZXNDb250ZW50IjpbImNsYXNzIExhYmVsSW5zaWRlIHtcbiAgICBjb25zdHJ1Y3RvcihlbCkge1xuICAgICAgICBjb25zdCB0aGF0ID0gdGhpcztcbiAgICAgICAgdGhpcy5lbCA9IGVsO1xuICAgICAgICB0aGlzLmZvcm1FbGVtZW50ID0gdGhpcy5lbC5xdWVyeVNlbGVjdG9yQWxsKCdpbnB1dCwgc2VsZWN0JylbMF07XG4gICAgICAgIHRoaXMuY2hlY2tWYWx1ZSgpO1xuICAgICAgICB0aGlzLmNoZWNrQXV0b2ZpbGwoKTtcbiAgICAgICAgdGhpcy5mb3JtRWxlbWVudC5mb2N1cyh0aGlzLmZvY3VzLmJpbmQodGhpcykpO1xuICAgICAgICB0aGlzLmZvcm1FbGVtZW50LmJsdXIodGhpcy5jaGVja1ZhbHVlLmJpbmQodGhpcykpO1xuICAgICAgICB0aGlzLmNoZWNrQXV0b2ZvY3VzKCk7XG4gICAgICAgIHNldEludGVydmFsKCgpID0+IHtcbiAgICAgICAgICAgIHRoYXQuY2hlY2tWYWx1ZSgpO1xuICAgICAgICB9LCAzNSk7XG4gICAgfVxuXG4gICAgZm9jdXMoKSB7XG4gICAgICAgIHRoaXMuZWwuY2xhc3NMaXN0LmFkZCgnbW9kLWFjdGl2ZScpO1xuICAgIH1cblxuICAgIGNoZWNrQXV0b2ZpbGwoKSB7XG4gICAgICAgIGNvbnN0IG9uQW5pbWF0aW9uU3RhcnQgPSAoKSA9PiB0aGlzLmVsLmNsYXNzTGlzdC5hZGQoJ21vZC1hY3RpdmUnKTtcbiAgICAgICAgdGhpcy5mb3JtRWxlbWVudC5hZGRFdmVudExpc3RlbmVyKCdhbmltYXRpb25zdGFydCcsIG9uQW5pbWF0aW9uU3RhcnQsIGZhbHNlKTtcbiAgICB9XG5cbiAgICBjaGVja1ZhbHVlKCkge1xuICAgICAgICBpZiAodGhpcy5mb3JtRWxlbWVudC52YWx1ZSkge1xuICAgICAgICAgICAgdGhpcy5lbC5jbGFzc0xpc3QuYWRkKCdtb2QtYWN0aXZlJyk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICB0aGlzLmVsLmNsYXNzTGlzdC5yZW1vdmUoJ21vZC1hY3RpdmUnKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIGNoZWNrQXV0b2ZvY3VzKCkge1xuICAgICAgICBpZiAodGhpcy5mb3JtRWxlbWVudC5hdXRvZm9jdXMpIHtcbiAgICAgICAgICAgIHRoaXMuZm9ybUVsZW1lbnQuZm9jdXMoKTtcbiAgICAgICAgfVxuICAgIH1cbn1cblxuZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignRE9NQ29udGVudExvYWRlZCcsICgpID0+IHtcbiAgICBjb25zdCBmaWVsZHNXaXRoSW5zaWRlTGFiZWwgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCcuc2QtZm9ybS1maWVsZC5tb2QtbGFiZWwtaW5zaWRlJyk7XG4gICAgZmllbGRzV2l0aEluc2lkZUxhYmVsLmZvckVhY2goZmllbGQgPT4gbmV3IExhYmVsSW5zaWRlKGZpZWxkKSk7XG59KTtcbiJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7SUFBTUEsVztFQUNGLHFCQUFZQyxFQUFaLEVBQWdCO0lBQUE7O0lBQ1osSUFBTUMsSUFBSSxHQUFHLElBQWI7SUFDQSxLQUFLRCxFQUFMLEdBQVVBLEVBQVY7SUFDQSxLQUFLRSxXQUFMLEdBQW1CLEtBQUtGLEVBQUwsQ0FBUUcsZ0JBQVIsQ0FBeUIsZUFBekIsRUFBMEMsQ0FBMUMsQ0FBbkI7SUFDQSxLQUFLQyxVQUFMO0lBQ0EsS0FBS0MsYUFBTDtJQUNBLEtBQUtILFdBQUwsQ0FBaUJJLEtBQWpCLENBQXVCLEtBQUtBLEtBQUwsQ0FBV0MsSUFBWCxDQUFnQixJQUFoQixDQUF2QjtJQUNBLEtBQUtMLFdBQUwsQ0FBaUJNLElBQWpCLENBQXNCLEtBQUtKLFVBQUwsQ0FBZ0JHLElBQWhCLENBQXFCLElBQXJCLENBQXRCO0lBQ0EsS0FBS0UsY0FBTDtJQUNBQyxXQUFXLENBQUMsWUFBTTtNQUNkVCxJQUFJLENBQUNHLFVBQUw7SUFDSCxDQUZVLEVBRVIsRUFGUSxDQUFYO0VBR0g7Ozs7V0FFRCxpQkFBUTtNQUNKLEtBQUtKLEVBQUwsQ0FBUVcsU0FBUixDQUFrQkMsR0FBbEIsQ0FBc0IsWUFBdEI7SUFDSDs7O1dBRUQseUJBQWdCO01BQUE7O01BQ1osSUFBTUMsZ0JBQWdCLEdBQUcsU0FBbkJBLGdCQUFtQjtRQUFBLE9BQU0sS0FBSSxDQUFDYixFQUFMLENBQVFXLFNBQVIsQ0FBa0JDLEdBQWxCLENBQXNCLFlBQXRCLENBQU47TUFBQSxDQUF6Qjs7TUFDQSxLQUFLVixXQUFMLENBQWlCWSxnQkFBakIsQ0FBa0MsZ0JBQWxDLEVBQW9ERCxnQkFBcEQsRUFBc0UsS0FBdEU7SUFDSDs7O1dBRUQsc0JBQWE7TUFDVCxJQUFJLEtBQUtYLFdBQUwsQ0FBaUJhLEtBQXJCLEVBQTRCO1FBQ3hCLEtBQUtmLEVBQUwsQ0FBUVcsU0FBUixDQUFrQkMsR0FBbEIsQ0FBc0IsWUFBdEI7TUFDSCxDQUZELE1BRU87UUFDSCxLQUFLWixFQUFMLENBQVFXLFNBQVIsQ0FBa0JLLE1BQWxCLENBQXlCLFlBQXpCO01BQ0g7SUFDSjs7O1dBRUQsMEJBQWlCO01BQ2IsSUFBSSxLQUFLZCxXQUFMLENBQWlCZSxTQUFyQixFQUFnQztRQUM1QixLQUFLZixXQUFMLENBQWlCSSxLQUFqQjtNQUNIO0lBQ0o7Ozs7OztBQUdMWSxRQUFRLENBQUNKLGdCQUFULENBQTBCLGtCQUExQixFQUE4QyxZQUFNO0VBQ2hELElBQU1LLHFCQUFxQixHQUFHRCxRQUFRLENBQUNmLGdCQUFULENBQTBCLGlDQUExQixDQUE5QjtFQUNBZ0IscUJBQXFCLENBQUNDLE9BQXRCLENBQThCLFVBQUFDLEtBQUs7SUFBQSxPQUFJLElBQUl0QixXQUFKLENBQWdCc0IsS0FBaEIsQ0FBSjtFQUFBLENBQW5DO0FBQ0gsQ0FIRCJ9