polythene-core-textfield - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/polythene-core-textfield.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('polythene-core'), require('polythene-theme')) :
-	typeof define === 'function' && define.amd ? define(['exports', 'polythene-core', 'polythene-theme'], factory) :
-	(factory((global.polythene = {}),global['polythene-core'],global['polythene-theme']));
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('polythene-core'), require('polythene-theme')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'polythene-core', 'polythene-theme'], factory) :
+  (factory((global.polythene = {}),global['polythene-core'],global['polythene-theme']));
 }(this, (function (exports,polytheneCore,polytheneTheme) { 'use strict';
 
-var classes = {
-  component: "pe-textfield",
+  var classes = {
+    component: "pe-textfield",
 
-  // elements
-  counter: "pe-textfield__counter",
-  error: "pe-textfield__error",
-  errorPlaceholder: "pe-textfield__error-placeholder",
-  focusHelp: "pe-textfield__help-focus",
-  help: "pe-textfield__help",
-  input: "pe-textfield__input",
-  inputArea: "pe-textfield__input-area",
-  label: "pe-textfield__label",
-  optionalIndicator: "pe-textfield__optional-indicator",
-  requiredIndicator: "pe-textfield__required-indicator",
+    // elements
+    counter: "pe-textfield__counter",
+    error: "pe-textfield__error",
+    errorPlaceholder: "pe-textfield__error-placeholder",
+    focusHelp: "pe-textfield__help-focus",
+    help: "pe-textfield__help",
+    input: "pe-textfield__input",
+    inputArea: "pe-textfield__input-area",
+    label: "pe-textfield__label",
+    optionalIndicator: "pe-textfield__optional-indicator",
+    requiredIndicator: "pe-textfield__required-indicator",
 
-  // states
-  hasCounter: "pe-textfield--counter",
-  hasFloatingLabel: "pe-textfield--floating-label",
-  hasFullWidth: "pe-textfield--full-width",
-  hideClear: "pe-textfield--hide-clear",
-  hideSpinner: "pe-textfield--hide-spinner",
-  hideValidation: "pe-textfield--hide-validation",
-  isDense: "pe-textfield--dense",
-  isRequired: "pe-textfield--required",
-  stateDirty: "pe-textfield--dirty",
-  stateDisabled: "pe-textfield--disabled",
-  stateFocused: "pe-textfield--focused",
-  stateInvalid: "pe-textfield--invalid",
-  stateReadonly: "pe-textfield--readonly"
-};
+    // states
+    hasCounter: "pe-textfield--counter",
+    hasFloatingLabel: "pe-textfield--floating-label",
+    hasFullWidth: "pe-textfield--full-width",
+    hideClear: "pe-textfield--hide-clear",
+    hideSpinner: "pe-textfield--hide-spinner",
+    hideValidation: "pe-textfield--hide-validation",
+    isDense: "pe-textfield--dense",
+    isRequired: "pe-textfield--required",
+    stateDirty: "pe-textfield--dirty",
+    stateDisabled: "pe-textfield--disabled",
+    stateFocused: "pe-textfield--focused",
+    stateInvalid: "pe-textfield--invalid",
+    stateReadonly: "pe-textfield--readonly"
+  };
 
-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 _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; }
+  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; }
 
-var getElement = function getElement(vnode) {
-  return vnode.attrs.element || "div";
-};
+  var getElement = function getElement(vnode) {
+    return vnode.attrs.element || "div";
+  };
 
-var DEFAULT_VALID_STATE = {
-  invalid: false,
-  message: undefined
-};
+  var DEFAULT_VALID_STATE = {
+    invalid: false,
+    message: undefined
+  };
 
-var validateCustom = function validateCustom(state, attrs) {
-  var el = state.inputEl();
-  if (!el) {
-    return DEFAULT_VALID_STATE;
-  }
-  var validState = attrs.validate(state.inputEl().value);
-  return {
-    invalid: validState && !validState.valid,
-    message: validState && validState.error
+  var validateCustom = function validateCustom(state, attrs) {
+    var el = state.inputEl();
+    if (!el) {
+      return DEFAULT_VALID_STATE;
+    }
+    var validState = attrs.validate(state.inputEl().value);
+    return {
+      invalid: validState && !validState.valid,
+      message: validState && validState.error
+    };
   };
-};
 
-var validateCounter = function validateCounter(state, attrs) {
-  return {
-    invalid: state.inputEl().value.length > attrs.counter,
-    message: attrs.error
+  var validateCounter = function validateCounter(state, attrs) {
+    return {
+      invalid: state.inputEl().value.length > attrs.counter,
+      message: attrs.error
+    };
   };
-};
 
-var validateHTML = function validateHTML(state, attrs) {
-  return {
-    invalid: !state.inputEl().checkValidity(),
-    message: attrs.error
+  var validateHTML = function validateHTML(state, attrs) {
+    return {
+      invalid: !state.inputEl().checkValidity(),
+      message: attrs.error
+    };
   };
-};
 
-var getValidStatus = function getValidStatus(state, attrs) {
-  var status = DEFAULT_VALID_STATE;
+  var getValidStatus = function getValidStatus(state, attrs) {
+    var status = DEFAULT_VALID_STATE;
 
-  // attrs.validateResetOnClear: reset validation when field is cleared
-  if (state.isTouched() && state.isInvalid() && state.inputEl().value.length === 0 && attrs.validateResetOnClear) {
-    state.isTouched(false);
-    state.isInvalid(false);
-    state.error(undefined);
-  }
-  if (!status.invalid && attrs.counter) {
-    status = validateCounter(state, attrs);
-  }
-  if (!status.invalid && state.inputEl() && state.inputEl().checkValidity) {
-    status = validateHTML(state, attrs);
-  }
-  if (!status.invalid && attrs.validate) {
-    status = validateCustom(state, attrs);
-  }
-  return status;
-};
+    // attrs.validateResetOnClear: reset validation when field is cleared
+    if (state.isTouched() && state.isInvalid() && state.inputEl().value.length === 0 && attrs.validateResetOnClear) {
+      state.isTouched(false);
+      state.isInvalid(false);
+      state.error(undefined);
+    }
+    if (!status.invalid && attrs.counter) {
+      status = validateCounter(state, attrs);
+    }
+    if (!status.invalid && state.inputEl() && state.inputEl().checkValidity) {
+      status = validateHTML(state, attrs);
+    }
+    if (!status.invalid && attrs.validate) {
+      status = validateCustom(state, attrs);
+    }
+    return status;
+  };
 
-var checkValidity = function checkValidity(vnode) {
-  var state = vnode.state;
-  var attrs = vnode.attrs;
-  // default
+  var checkValidity = function checkValidity(vnode) {
+    var state = vnode.state;
+    var attrs = vnode.attrs;
+    // default
+    var status = attrs.valid !== undefined ? {
+      invalid: !attrs.valid,
+      message: attrs.error
+    } : !state.isTouched() && !attrs.validateAtStart ? DEFAULT_VALID_STATE : getValidStatus(state, attrs);
+    var previousInvalid = state.isInvalid();
+    state.error(status.message);
+    if (status.invalid !== previousInvalid) {
+      state.isInvalid(status.invalid);
+    }
+    if (!status.invalid) {
+      state.error(undefined);
+    }
+  };
 
-  var status = attrs.valid !== undefined ? {
-    invalid: !attrs.valid,
-    message: attrs.error
-  } : !state.isTouched() && !attrs.validateAtStart ? DEFAULT_VALID_STATE : getValidStatus(state, attrs);
-  var previousInvalid = state.isInvalid();
-  state.error(status.message);
+  var notifyState = function notifyState(vnode) {
+    var state = vnode.state;
+    var attrs = vnode.attrs;
+    if (attrs.onChange) {
+      var status = getValidStatus(state, attrs);
+      attrs.onChange({
+        focus: state.hasFocus(),
+        dirty: state.isDirty(),
+        el: state.inputEl(),
+        invalid: status.invalid,
+        error: status.error,
+        value: state.inputEl().value,
+        setInputState: function setInputState(newState) {
+          return state.setInputState(_extends({}, newState, { vnode: vnode }));
+        }
+      });
+    }
+  };
 
-  if (status.invalid !== previousInvalid) {
-    state.isInvalid(status.invalid);
-  }
-  if (!status.invalid) {
-    state.error(undefined);
-  }
-};
+  var ignoreEvent = function ignoreEvent(attrs, name) {
+    return attrs.ignoreEvents && attrs.ignoreEvents.indexOf(name) !== -1;
+  };
 
-var notifyState = function notifyState(vnode) {
-  var state = vnode.state;
-  var attrs = vnode.attrs;
-  if (attrs.onChange) {
-    var status = getValidStatus(state, attrs);
-    attrs.onChange({
-      focus: state.hasFocus(),
-      dirty: state.isDirty(),
-      el: state.inputEl(),
-      invalid: status.invalid,
-      error: status.error,
-      value: state.inputEl().value,
-      setInputState: function setInputState(newState) {
-        return state.setInputState(newState);
-      }
-    });
-  }
-};
+  var getInitialState = function getInitialState(vnode, createStream, _ref) {
+    var k = _ref.keys;
 
-var ignoreEvent = function ignoreEvent(attrs, name) {
-  return attrs.ignoreEvents && attrs.ignoreEvents.indexOf(name) !== -1;
-};
+    var attrs = vnode.attrs;
 
-var getInitialState = function getInitialState(vnode, createStream) {
-  var attrs = vnode.attrs;
+    var defaultValue = attrs.defaultValue !== undefined && attrs.defaultValue !== null ? attrs.defaultValue.toString() : attrs.value !== undefined && attrs.value !== null ? attrs.value.toString() : "";
 
-  var defaultValue = attrs.defaultValue !== undefined && attrs.defaultValue !== null ? attrs.defaultValue.toString() : attrs.value !== undefined && attrs.value !== null ? attrs.value.toString() : "";
+    var el = createStream(null);
+    var inputEl = createStream(null);
+    var setInputState = createStream({});
+    var error = createStream(attrs.error);
+    var hasFocus = createStream(false);
+    var isTouched = createStream(false); // true when any change is made
+    var isDirty = createStream(defaultValue !== ""); // true for any input
+    var isInvalid = createStream(false);
+    var previousValue = createStream(undefined);
+    var didSetFocusTime = 0;
+    var showErrorPlaceholder = !!(attrs.valid !== undefined || attrs.validate || attrs.min || attrs.max || attrs[k.minlength] || attrs[k.maxlength] || attrs.required || attrs.pattern);
 
-  var el = createStream(null);
-  var inputEl = createStream(null);
-  var setInputState = createStream({});
-  var error = createStream(attrs.error);
-  var hasFocus = createStream(false);
-  var isTouched = createStream(false); // true when any change is made
-  var isDirty = createStream(defaultValue !== ""); // true for any input
-  var isInvalid = createStream(false);
-  var previousValue = createStream(undefined);
-  var didSetFocusTime = 0;
-
-  return {
-    defaultValue: defaultValue,
-    didSetFocusTime: didSetFocusTime,
-    el: el,
-    error: error,
-    hasFocus: hasFocus,
-    inputEl: inputEl,
-    isDirty: isDirty,
-    isInvalid: isInvalid,
-    isTouched: isTouched,
-    previousValue: previousValue,
-    setInputState: setInputState,
-    redrawOnUpdate: createStream.merge([inputEl, isInvalid, isDirty])
+    return {
+      defaultValue: defaultValue,
+      didSetFocusTime: didSetFocusTime,
+      el: el,
+      error: error,
+      hasFocus: hasFocus,
+      inputEl: inputEl,
+      isDirty: isDirty,
+      isInvalid: isInvalid,
+      isTouched: isTouched,
+      previousValue: previousValue,
+      setInputState: setInputState,
+      showErrorPlaceholder: showErrorPlaceholder,
+      redrawOnUpdate: createStream.merge([inputEl, isInvalid, isDirty])
+    };
   };
-};
 
-var onMount = function onMount(vnode) {
-  var dom = vnode.dom;
-  var state = vnode.state;
-  var attrs = vnode.attrs;
+  var onMount = function onMount(vnode) {
+    var dom = vnode.dom;
+    var state = vnode.state;
+    var attrs = vnode.attrs;
 
-  state.el(dom);
-  var inputType = attrs.multiLine ? "textarea" : "input";
-  var inputEl = dom.querySelector(inputType);
-  vnode.state.inputEl(inputEl);
-  state.inputEl().value = state.defaultValue;
+    state.el(dom);
+    var inputType = attrs.multiLine ? "textarea" : "input";
+    var inputEl = dom.querySelector(inputType);
+    vnode.state.inputEl(inputEl);
+    state.inputEl().value = state.defaultValue;
 
-  state.setInputState.map(function (_ref) {
-    var type = _ref.type,
-        focus = _ref.focus,
-        value = _ref.value;
-    return value !== undefined ? state.inputEl().value = value : null, focus !== undefined && (state.hasFocus(focus), focus ? state.inputEl().focus() : state.inputEl().blur()), type === "input" && (attrs.validateOnInput || attrs.counter) && state.isTouched(state.inputEl().value !== state.defaultValue), type !== "input" && state.isTouched(state.inputEl().value !== state.defaultValue), type === "onblur" && state.isTouched(true), state.isDirty(state.inputEl().value !== ""), checkValidity(vnode), notifyState(vnode), state.previousValue(state.inputEl().value);
-  });
+    state.setInputState.map(function (_ref2) {
+      var vnode = _ref2.vnode,
+          type = _ref2.type,
+          focus = _ref2.focus,
+          value = _ref2.value;
 
-  notifyState(vnode);
-};
+      if (vnode) {
+        value !== undefined ? state.inputEl().value = value : null;
+        focus !== undefined && (state.hasFocus(focus), focus ? state.inputEl().focus() : state.inputEl().blur());
+        type === "input" && (attrs.validateOnInput || attrs.counter) && state.isTouched(state.inputEl().value !== state.defaultValue);
+        type !== "input" && state.isTouched(state.inputEl().value !== state.defaultValue);
+        type === "onblur" && state.isTouched(true);
+        state.isDirty(state.inputEl().value !== "");
+        checkValidity(vnode);
+        notifyState(vnode);
+        state.previousValue(state.inputEl().value);
+      }
+    });
 
-var onUpdate = function onUpdate(vnode) {
-  var state = vnode.state;
-  var attrs = vnode.attrs;
-  checkValidity(vnode);
+    notifyState(vnode);
+  };
 
-  var inputEl = state.inputEl();
-  var value = attrs.value !== undefined && attrs.value !== null ? attrs.value : inputEl ? inputEl.value : state.previousValue();
-  var valueStr = value === undefined || value === null ? "" : value.toString();
+  var onUpdate = function onUpdate(vnode) {
+    var state = vnode.state;
+    var attrs = vnode.attrs;
+    checkValidity(vnode);
 
-  if (inputEl && state.previousValue() !== valueStr) {
-    inputEl.value = valueStr;
-    state.previousValue(valueStr);
-    state.setInputState({ type: "input" });
-  }
-};
+    var inputEl = state.inputEl();
+    var value = attrs.value !== undefined && attrs.value !== null ? attrs.value : inputEl ? inputEl.value : state.previousValue();
+    var valueStr = value === undefined || value === null ? "" : value.toString();
 
-var createProps = function createProps(vnode, _ref2) {
-  var k = _ref2.keys;
+    if (inputEl && state.previousValue() !== valueStr) {
+      inputEl.value = valueStr;
+      state.previousValue(valueStr);
+      state.setInputState({ vnode: vnode, type: "input" });
+    }
+  };
 
-  var state = vnode.state;
-  var attrs = vnode.attrs;
-  var isInvalid = state.isInvalid();
+  var createProps = function createProps(vnode, _ref3) {
+    var k = _ref3.keys;
 
-  return _extends({}, polytheneCore.filterSupportedAttributes(attrs), {
-    className: [classes.component, isInvalid ? classes.stateInvalid : "", state.hasFocus() ? classes.stateFocused : "", state.isDirty() ? classes.stateDirty : "", attrs.floatingLabel ? classes.hasFloatingLabel : "", attrs.disabled ? classes.stateDisabled : "", attrs.readonly ? classes.stateReadonly : "", attrs.dense ? classes.isDense : "", attrs.required ? classes.isRequired : "", attrs.fullWidth ? classes.hasFullWidth : "", attrs.counter ? classes.hasCounter : "", attrs.hideSpinner !== false && attrs.hideSpinner !== undefined ? classes.hideSpinner : "", attrs.hideClear !== false && attrs.hideClear !== undefined ? classes.hideClear : "", attrs.hideValidation ? classes.hideValidation : "", attrs.tone === "dark" ? "pe-dark-tone" : null, attrs.tone === "light" ? "pe-light-tone" : null, attrs.className || attrs[k.class]].join(" ")
-  });
-};
+    var state = vnode.state;
+    var attrs = vnode.attrs;
+    var isInvalid = state.isInvalid();
 
-var createContent = function createContent(vnode, _ref3) {
-  var h = _ref3.renderer,
-      k = _ref3.keys;
+    return _extends({}, polytheneCore.filterSupportedAttributes(attrs), {
+      className: [classes.component, isInvalid ? classes.stateInvalid : "", state.hasFocus() ? classes.stateFocused : "", state.isDirty() ? classes.stateDirty : "", attrs.floatingLabel ? classes.hasFloatingLabel : "", attrs.disabled ? classes.stateDisabled : "", attrs.readonly ? classes.stateReadonly : "", attrs.dense ? classes.isDense : "", attrs.required ? classes.isRequired : "", attrs.fullWidth ? classes.hasFullWidth : "", attrs.counter ? classes.hasCounter : "", attrs.hideSpinner !== false && attrs.hideSpinner !== undefined ? classes.hideSpinner : "", attrs.hideClear !== false && attrs.hideClear !== undefined ? classes.hideClear : "", attrs.hideValidation ? classes.hideValidation : "", attrs.tone === "dark" ? "pe-dark-tone" : null, attrs.tone === "light" ? "pe-light-tone" : null, attrs.className || attrs[k.class]].join(" ")
+    });
+  };
 
-  var state = vnode.state;
-  var attrs = vnode.attrs;
+  var createContent = function createContent(vnode, _ref4) {
+    var h = _ref4.renderer,
+        k = _ref4.keys;
 
-  var inputEl = state.inputEl();
-  var error = attrs.error || state.error();
-  var isInvalid = state.isInvalid();
-  var inputType = attrs.multiLine ? "textarea" : "input";
-  var type = attrs.multiLine ? null : !attrs.type || attrs.type === "submit" || attrs.type === "search" ? "text" : attrs.type;
-  var showError = isInvalid && error !== undefined;
+    var state = vnode.state;
+    var attrs = vnode.attrs;
 
-  var validates = !!(attrs.valid !== undefined || attrs.validate || attrs.min || attrs.max || attrs[k.minlength] || attrs[k.maxlength] || attrs.required || attrs.pattern);
-  var inactive = attrs.disabled || attrs[k.readonly];
+    var inputEl = state.inputEl();
+    var error = attrs.error || state.error();
+    var isInvalid = state.isInvalid();
+    var inputType = attrs.multiLine ? "textarea" : "input";
+    var type = attrs.multiLine ? null : !attrs.type || attrs.type === "submit" || attrs.type === "search" ? "text" : attrs.type;
+    var showError = isInvalid && error !== undefined;
 
-  var requiredIndicator = attrs.required && attrs.requiredIndicator !== "" ? h("span", {
-    key: "required",
-    className: classes.requiredIndicator
-  }, attrs.requiredIndicator || "*") : null;
-  var optionalIndicator = !attrs.required && attrs.optionalIndicator ? h("span", {
-    key: "optional",
-    className: classes.optionalIndicator
-  }, attrs.optionalIndicator) : null;
-  var label = attrs.label ? [attrs.label, requiredIndicator, optionalIndicator] : null;
+    var inactive = attrs.disabled || attrs[k.readonly];
 
-  return [h("div", {
-    className: classes.inputArea,
-    key: "input-area"
-  }, [label ? h("label", {
-    key: "label",
-    className: classes.label
-  }, label) : null, h(inputType, _extends({}, {
-    key: "input",
-    className: classes.input,
-    disabled: attrs.disabled
-  }, type ? { type: type } : null, attrs.name ? { name: attrs.name } : null, !ignoreEvent(attrs, k.onclick) ? _defineProperty({}, k.onclick, function () {
-    if (inactive) {
-      return;
-    }
-    // in case the browser does not give the field focus,
-    // for instance when the user tapped to the current field off screen
-    state.setInputState({ focus: true });
-    notifyState(vnode);
-  }) : null, !ignoreEvent(attrs, k.onfocus) ? _defineProperty({}, k.onfocus, function () {
-    if (inactive) {
-      return;
-    }
-    state.setInputState({ focus: true });
+    var requiredIndicator = attrs.required && attrs.requiredIndicator !== "" ? h("span", {
+      key: "required",
+      className: classes.requiredIndicator
+    }, attrs.requiredIndicator || "*") : null;
+    var optionalIndicator = !attrs.required && attrs.optionalIndicator ? h("span", {
+      key: "optional",
+      className: classes.optionalIndicator
+    }, attrs.optionalIndicator) : null;
+    var label = attrs.label ? [attrs.label, requiredIndicator, optionalIndicator] : null;
 
-    // set CSS class manually in case field gets focus but is off screen
-    // and no redraw is triggered
-    // at the next redraw state.hasFocus() will be read and the focus class be set
-    // in the props.class statement
-    if (state.el()) {
-      state.el().classList.add(classes.stateFocused);
-    }
-    notifyState(vnode);
-  }) : null, !ignoreEvent(attrs, k.onblur) ? _defineProperty({}, k.onblur, function () {
-    state.setInputState({ type: "onblur", focus: false });
-    // same principle as onfocus
-    state.el().classList.remove(classes.stateFocused);
-  }) : null, !ignoreEvent(attrs, k.oninput) ? _defineProperty({}, k.oninput, function () {
-    // default input event
-    // may be overwritten by attrs.events
-    state.setInputState({ type: "input" });
-  }) : null, !ignoreEvent(attrs, k.onkeydown) ? _defineProperty({}, k.onkeydown, function (e) {
-    if (e.key === "Enter") {
-      state.isTouched(true);
-    } else if (e.key === "Escape" || e.key === "Esc") {
-      state.setInputState({ focus: false });
-    }
-  }) : null, attrs.events ? attrs.events : null, // NOTE: may overwrite oninput
-  attrs.required !== undefined && !!attrs.required ? { required: true } : null, attrs[k.readonly] !== undefined && !!attrs[k.readonly] ? _defineProperty({}, k.readonly, true) : null, attrs.pattern !== undefined ? { pattern: attrs.pattern } : null, attrs[k.maxlength] !== undefined ? _defineProperty({}, k.maxlength, attrs[k.maxlength]) : null, attrs[k.minlength] !== undefined ? _defineProperty({}, k.minlength, attrs[k.minlength]) : null, attrs.max !== undefined ? { max: attrs.max } : null, attrs.min !== undefined ? { min: attrs.min } : null, attrs[k.autofocus] !== undefined ? _defineProperty({}, k.autofocus, attrs[k.autofocus]) : null, attrs[k.tabindex] !== undefined ? _defineProperty({}, k.tabindex, attrs[k.tabindex]) : null, attrs.rows !== undefined ? { rows: attrs.rows } : null))]), attrs.counter ? h("div", {
-    key: "counter",
-    className: classes.counter
-  }, (inputEl && inputEl.value.length || 0) + " / " + attrs.counter) : null, attrs.help && !showError ? h("div", {
-    key: "help",
-    className: [classes.help, attrs.focusHelp ? classes.focusHelp : null].join(" ")
-  }, attrs.help) : null, showError ? h("div", {
-    key: "error",
-    className: classes.error
-  }, error) : validates && !attrs.help ? h("div", {
-    key: "error-placeholder",
-    className: classes.errorPlaceholder
-  }) : null];
-};
+    return [h("div", {
+      className: classes.inputArea,
+      key: "input-area"
+    }, [label ? h("label", {
+      key: "label",
+      className: classes.label
+    }, label) : null, h(inputType, _extends({}, {
+      key: "input",
+      className: classes.input,
+      disabled: attrs.disabled
+    }, type ? { type: type } : null, attrs.name ? { name: attrs.name } : null, !ignoreEvent(attrs, k.onclick) ? _defineProperty({}, k.onclick, function () {
+      if (inactive) {
+        return;
+      }
+      // in case the browser does not give the field focus,
+      // for instance when the user tapped to the current field off screen
+      state.setInputState({ vnode: vnode, focus: true });
+      notifyState(vnode);
+    }) : null, !ignoreEvent(attrs, k.onfocus) ? _defineProperty({}, k.onfocus, function () {
+      if (inactive) {
+        return;
+      }
+      state.setInputState({ vnode: vnode, focus: true });
 
-var textfield = Object.freeze({
-	getElement: getElement,
-	getInitialState: getInitialState,
-	onMount: onMount,
-	onUpdate: onUpdate,
-	createProps: createProps,
-	createContent: createContent
-});
+      // set CSS class manually in case field gets focus but is off screen
+      // and no redraw is triggered
+      // at the next redraw state.hasFocus() will be read and the focus class be set
+      // in the props.class statement
+      if (state.el()) {
+        state.el().classList.add(classes.stateFocused);
+      }
+      notifyState(vnode);
+    }) : null, !ignoreEvent(attrs, k.onblur) ? _defineProperty({}, k.onblur, function () {
+      state.setInputState({ vnode: vnode, type: "onblur", focus: false });
+      // same principle as onfocus
+      state.el().classList.remove(classes.stateFocused);
+    }) : null, !ignoreEvent(attrs, k.oninput) ? _defineProperty({}, k.oninput, function () {
+      // default input event
+      // may be overwritten by attrs.events
+      state.setInputState({ vnode: vnode, type: "input" });
+    }) : null, !ignoreEvent(attrs, k.onkeydown) ? _defineProperty({}, k.onkeydown, function (e) {
+      if (e.key === "Enter") {
+        state.isTouched(true);
+      } else if (e.key === "Escape" || e.key === "Esc") {
+        state.setInputState({ vnode: vnode, focus: false });
+      }
+    }) : null, attrs.events ? attrs.events : null, // NOTE: may overwrite oninput
+    attrs.required !== undefined && !!attrs.required ? { required: true } : null, attrs[k.readonly] !== undefined && !!attrs[k.readonly] ? _defineProperty({}, k.readonly, true) : null, attrs.pattern !== undefined ? { pattern: attrs.pattern } : null, attrs[k.maxlength] !== undefined ? _defineProperty({}, k.maxlength, attrs[k.maxlength]) : null, attrs[k.minlength] !== undefined ? _defineProperty({}, k.minlength, attrs[k.minlength]) : null, attrs.max !== undefined ? { max: attrs.max } : null, attrs.min !== undefined ? { min: attrs.min } : null, attrs[k.autofocus] !== undefined ? _defineProperty({}, k.autofocus, attrs[k.autofocus]) : null, attrs[k.tabindex] !== undefined ? _defineProperty({}, k.tabindex, attrs[k.tabindex]) : null, attrs.rows !== undefined ? { rows: attrs.rows } : null))]), attrs.counter ? h("div", {
+      key: "counter",
+      className: classes.counter
+    }, (inputEl && inputEl.value.length || 0) + " / " + attrs.counter) : null, attrs.help && !showError ? h("div", {
+      key: "help",
+      className: [classes.help, attrs.focusHelp ? classes.focusHelp : null].join(" ")
+    }, attrs.help) : null, showError ? h("div", {
+      key: "error",
+      className: classes.error
+    }, error) : state.showErrorPlaceholder && !attrs.help ? h("div", {
+      key: "error-placeholder",
+      className: classes.errorPlaceholder
+    }) : null];
+  };
 
-var rgba = function rgba(colorStr) {
-  var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  return "rgba(" + colorStr + ", " + opacity + ")";
-};
+  var textfield = /*#__PURE__*/Object.freeze({
+    getElement: getElement,
+    getInitialState: getInitialState,
+    onMount: onMount,
+    onUpdate: onUpdate,
+    createProps: createProps,
+    createContent: createContent
+  });
 
-var line_height_input = 20;
-var input_padding_v = 7;
+  var rgba = function rgba(colorStr) {
+    var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    return "rgba(" + colorStr + ", " + opacity + ")";
+  };
 
-var vars$1 = {
-  vertical_spacing_top: 6, // 8 minus natural label height padding (1)
-  vertical_spacing_bottom: 7, // 8 minus natural label height padding (1)
-  input_focus_border_width: 2,
-  input_focus_border_animation_duration: polytheneTheme.vars.animation_duration,
+  var line_height_input = 20;
+  var input_padding_v = 7;
 
-  floating_label_vertical_spacing_top: 30, // 16 + 8 + 8 minus natural label height padding (2)
-  floating_label_vertical_spacing_bottom: 7, // 8 minus natural label height padding (1)
-  floating_label_top: 14,
-  floating_label_animation_duration: ".12s",
+  var vars = {
+    vertical_spacing_top: 6, // 8 minus natural label height padding (1)
+    vertical_spacing_bottom: 7, // 8 minus natural label height padding (1)
+    input_focus_border_width: 2,
+    input_focus_border_animation_duration: polytheneTheme.vars.animation_duration,
 
-  input_padding_h: 0,
-  input_padding_v: input_padding_v,
-  input_border_width: 1,
-  margin_top_error_message: 6,
-  font_size_input: 16,
-  font_size_error: 12,
-  font_size_floating_label: 12,
+    floating_label_vertical_spacing_top: 30, // 16 + 8 + 8 minus natural label height padding (2)
+    floating_label_vertical_spacing_bottom: 7, // 8 minus natural label height padding (1)
+    floating_label_top: 14,
+    floating_label_animation_duration: ".12s",
 
-  line_height_input: line_height_input,
+    input_padding_h: 0,
+    input_padding_v: input_padding_v,
+    input_border_width: 1,
+    margin_top_error_message: 6,
+    font_size_input: 16,
+    font_size_error: 12,
+    font_size_floating_label: 12,
 
-  dense_floating_label_vertical_spacing_top: 23, // 12 + 8 + 4 minus natural label height padding (1)
-  dense_floating_label_vertical_spacing_bottom: 4, // 8 minus natural label height padding (1)
-  dense_floating_label_top: 10,
-  dense_font_size_input: 13,
-  dense_font_size_floating_label: 13,
+    line_height_input: line_height_input,
 
-  full_width_input_padding_h: 20,
-  full_width_input_padding_v: 18, // 20 minus natural label height padding (2)
+    dense_floating_label_vertical_spacing_top: 23, // 12 + 8 + 4 minus natural label height padding (1)
+    dense_floating_label_vertical_spacing_bottom: 4, // 8 minus natural label height padding (1)
+    dense_floating_label_top: 10,
+    dense_font_size_input: 13,
+    dense_font_size_floating_label: 13,
 
-  dense_full_width_input_padding_h: 16,
-  dense_full_width_input_padding_v: 15, // 16 minus natural label height padding (1)
-  dense_full_width_font_size_input: 13,
+    full_width_input_padding_h: 20,
+    full_width_input_padding_v: 18, // 20 minus natural label height padding (2)
 
-  color_light_input_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_primary),
-  color_light_input_background: "transparent", // only used to "remove" autofill color
-  color_light_highlight_text: rgba(polytheneTheme.vars.color_primary, polytheneTheme.vars.blend_light_text_primary),
-  color_light_input_bottom_border: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_border_light),
-  color_light_input_error_text: rgba("221, 44, 0"),
-  color_light_input_error_border: rgba("221, 44, 0"),
-  color_light_input_placeholder: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_tertiary),
-  color_light_label_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_tertiary),
-  color_light_disabled_label_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_disabled),
-  color_light_readonly_label_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_tertiary),
-  color_light_help_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_tertiary),
-  color_light_required_symbol: rgba("221, 44, 0"),
-  color_light_focus_border: rgba(polytheneTheme.vars.color_primary),
-  color_light_counter_ok_border: rgba(polytheneTheme.vars.color_primary),
+    dense_full_width_input_padding_h: 16,
+    dense_full_width_input_padding_v: 15, // 16 minus natural label height padding (1)
+    dense_full_width_font_size_input: 13,
 
-  color_dark_input_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_primary),
-  color_dark_input_background: "transparent", // only used to "remove" autofill color
-  color_dark_highlight_text: rgba(polytheneTheme.vars.color_primary, polytheneTheme.vars.blend_dark_text_primary),
-  color_dark_input_bottom_border: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_border_light),
-  color_dark_input_error_text: rgba("222, 50, 38"),
-  color_dark_input_error_border: rgba("222, 50, 38"),
-  color_dark_input_placeholder: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_tertiary),
-  color_dark_label_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_tertiary),
-  color_dark_disabled_label_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_disabled),
-  color_dark_readonly_label_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_tertiary),
-  color_dark_help_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_tertiary),
-  color_dark_required_symbol: rgba("221, 44, 0"),
-  color_dark_focus_border: rgba(polytheneTheme.vars.color_primary),
-  color_dark_counter_ok_border: rgba(polytheneTheme.vars.color_primary)
-};
+    color_light_input_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_primary),
+    color_light_input_background: "transparent", // only used to "remove" autofill color
+    color_light_highlight_text: rgba(polytheneTheme.vars.color_primary, polytheneTheme.vars.blend_light_text_primary),
+    color_light_input_bottom_border: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_border_light),
+    color_light_input_error_text: rgba("221, 44, 0"),
+    color_light_input_error_border: rgba("221, 44, 0"),
+    color_light_input_placeholder: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_tertiary),
+    color_light_label_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_tertiary),
+    color_light_disabled_label_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_disabled),
+    color_light_readonly_label_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_tertiary),
+    color_light_help_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_tertiary),
+    color_light_required_symbol: rgba("221, 44, 0"),
+    color_light_focus_border: rgba(polytheneTheme.vars.color_primary),
+    color_light_counter_ok_border: rgba(polytheneTheme.vars.color_primary),
 
-exports.coreTextField = textfield;
-exports.vars = vars$1;
+    color_dark_input_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_primary),
+    color_dark_input_background: "transparent", // only used to "remove" autofill color
+    color_dark_highlight_text: rgba(polytheneTheme.vars.color_primary, polytheneTheme.vars.blend_dark_text_primary),
+    color_dark_input_bottom_border: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_border_light),
+    color_dark_input_error_text: rgba("222, 50, 38"),
+    color_dark_input_error_border: rgba("222, 50, 38"),
+    color_dark_input_placeholder: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_tertiary),
+    color_dark_label_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_tertiary),
+    color_dark_disabled_label_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_disabled),
+    color_dark_readonly_label_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_tertiary),
+    color_dark_help_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_tertiary),
+    color_dark_required_symbol: rgba("221, 44, 0"),
+    color_dark_focus_border: rgba(polytheneTheme.vars.color_primary),
+    color_dark_counter_ok_border: rgba(polytheneTheme.vars.color_primary)
+  };
 
-Object.defineProperty(exports, '__esModule', { value: true });
+  exports.coreTextField = textfield;
+  exports.vars = vars;
 
+  Object.defineProperty(exports, '__esModule', { value: true });
+
 })));
 //# sourceMappingURL=polythene-core-textfield.js.map

package.json

 {
   "name": "polythene-core-textfield",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
-  "main": "dist/polythene-core-textfield.js",
+  "main": "dist/polythene-core-textfield",
   "module": "dist/polythene-core-textfield.mjs",
   "scripts": {
-    "clean": "rm -rf dist && mkdir dist",
+    "clean": "rm -rf dist/*",
     "rollup": "../../node_modules/rollup/bin/rollup -c ../../scripts/rollup.umd.js && ../../node_modules/rollup/bin/rollup -c ../../scripts/rollup.es.js",
-    "build": "yarn run rollup"
+    "build": "yarn run clean && yarn run rollup"
   },
@@ -17,5 +17,5 @@ "files": [
   "dependencies": {
-    "polythene-core": "^1.0.0",
-    "polythene-css-classes": "^1.0.0",
-    "polythene-theme": "^1.0.0"
+    "polythene-core": "^1.1.0",
+    "polythene-css-classes": "^1.1.0",
+    "polythene-theme": "^1.1.0"
   },
@@ -22,0 +22,0 @@ "author": "Arthur Clemens <[e-mail]> (http://arthurclemens.com)",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

72722

increased by7.74%

Lines of code

719

increased by3.45%

Dependency changes

• Updatedpolythene-core@^1.1.0

• Updatedpolythene-css-classes@^1.1.0

• Updatedpolythene-theme@^1.1.0