polythene-core-textfield - npm Package Compare versions

Comparing version 1.0.0-rc.9 to 1.0.0-rc.10

dist/polythene-core-textfield.js

@@ -1,2 +0,399 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("polythene-core"),require("polythene-theme")):"function"==typeof define&&define.amd?define(["exports","polythene-core","polythene-theme"],t):t(e.polythene={},e["polythene-core"],e["polythene-theme"])}(this,function(e,t,r){"use strict";function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var i={component:"pe-textfield",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",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"},o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},n=function(e){return e.attrs.element||"div"},a=function(e,t){var r=t.validate(e.inputEl().value);return{invalid:r&&!r.valid,message:r&&r.error}},d=function(e,t){return{invalid:e.inputEl().value.length>t.counter,message:t.error}},u=function(e,t){return{invalid:!e.inputEl().checkValidity(),message:t.error}},_=function(e,t){var r={invalid:!1,message:void 0};return e.isTouched()&&e.isInvalid()&&0===e.inputEl().value.length&&t.validateResetOnClear&&(e.isTouched(!1),e.isInvalid(!1),e.error(void 0)),!r.invalid&&t.counter&&(r=d(e,t)),!r.invalid&&e.inputEl()&&e.inputEl().checkValidity&&(r=u(e,t)),!r.invalid&&t.validate&&(r=a(e,t)),r},s=function(e){var t=e.state,r=e.attrs,l=t.isTouched()||r.validateAtStart?_(t,r):{invalid:!1,message:void 0},i=t.isInvalid();t.error(l.message),l.invalid!==i&&t.isInvalid(l.invalid),l.invalid||t.error(void 0)},c=function(e){var t=e.state,r=e.attrs;if(r.onChange){var l=_(t,r);r.onChange({focus:t.hasFocus(),dirty:t.isDirty(),el:t.inputEl(),invalid:l.invalid,error:l.error,value:t.inputEl().value})}},p=function(e,t){return e.ignoreEvents&&-1!==e.ignoreEvents.indexOf(t)},v=function(e,t){var r=e.attrs,l=void 0!==r.defaultValue?r.defaultValue:void 0!==r.value?r.value:"",i=t(null),o=t(null),n=t({}),a=t(r.error),d=t(r.focus||!1),u=t(!1),_=t(!1),s=t(""!==l),c=t(!1);return{defaultValue:l,didSetFocusTime:0,el:i,error:a,hasFocus:d,inputEl:o,isDirty:s,isInvalid:c,isTouched:_,previousValue:t(void 0),setFocus:u,setValue:n,redrawOnUpdate:t.merge([o,c,s])}},h=function(e){var t=e.dom,r=e.state,l=e.attrs;r.el(t);var i=l.multiLine?"textarea":"input",o=t.querySelector(i);e.state.inputEl(o),r.inputEl().value=r.defaultValue,r.setValue.map(function(t){var i=t.type,o=t.focus;return void 0!==o&&r.setFocus(o),"input"===i&&(l.validateOnInput||l.counter)&&r.isTouched(""!==r.inputEl().value),"input"!==i&&r.isTouched(""!==r.inputEl().value),"onblur"===i&&r.isTouched(!0),r.isDirty(""!==r.inputEl().value),s(e),c(e),r.previousValue(r.inputEl().value)}),r.setFocus.map(function(e){r.didSetFocusTime+150>(new Date).getTime()||(r.hasFocus(e),e&&r.inputEl()&&setTimeout(function(){return r.inputEl()&&r.inputEl().focus&&r.inputEl().focus(),r.didSetFocusTime=(new Date).getTime()},0))}),c(e)},f=function(e,r){var l=r.keys,n=e.state,a=e.attrs,d=n.isInvalid();return o({},t.filterSupportedAttributes(a),{className:[i.component,d?i.stateInvalid:"",n.hasFocus()?i.stateFocused:"",n.isDirty()?i.stateDirty:"",a.floatingLabel?i.hasFloatingLabel:"",a.disabled?i.stateDisabled:"",a.readonly?i.stateReadonly:"",a.dense?i.isDense:"",a.required?i.isRequired:"",a.fullWidth?i.hasFullWidth:"",a.counter?i.hasCounter:"",!1!==a.hideSpinner&&void 0!==a.hideSpinner?i.hideSpinner:"",!1!==a.hideClear&&void 0!==a.hideClear?i.hideClear:"",a.hideValidation?i.hideValidation:"","dark"===a.tone?"pe-dark-tone":null,"light"===a.tone?"pe-light-tone":null,a.className||a[l.class]].join(" ")})},g=function(e,r){var n=r.renderer,a=r.keys,d=e.state,u=e.attrs,_=d.inputEl(),s=d.isInvalid(),v=u.multiLine?"textarea":"input",h=u.multiLine?null:u.type&&"submit"!==u.type&&"search"!==u.type?u.type:"text",f=s&&void 0!==d.error(),g=u.validate||u.min||u.max||u[a.minlength]||u[a.maxlength]||u.required||u.pattern,b=u.disabled||u[a.readonly];!u.focus||d.hasFocus()||b||d.setFocus(!0);var m=void 0!==u.value&&null!==u.value?u.value:_?_.value:d.previousValue(),y=void 0===m||null===m?"":m.toString();_&&d.previousValue()!==y&&(_.value=y,d.previousValue(y),setTimeout(function(){return d.setValue({type:"input"})},0));var x=u.required&&""!==u.requiredIndicator?n("span",{key:"required",className:i.requiredIndicator},u.requiredIndicator||"*"):null,k=!u.required&&u.optionalIndicator?n("span",{key:"optional",className:i.optionalIndicator},u.optionalIndicator):null,E=u.label?[u.label,x,k]:null;return[n("div",{className:i.inputArea,key:"input-area"},[E?n("label",l({key:"label",className:i.label},a["on"+t.pointerStartEvent],function(){b||setTimeout(function(){d.inputEl.focus()},0)}),E):null,n(v,o({},{key:"input",className:i.input,disabled:u.disabled},h?{type:h}:null,u.name?{name:u.name}:null,p(u,a.onclick)?null:l({},a.onclick,function(){b||(d.setFocus(!0),c(e))}),p(u,a.onfocus)?null:l({},a.onfocus,function(){b||(d.setFocus(!0),d.el()&&d.el().classList.add(i.stateFocused),c(e))}),p(u,a.onblur)?null:l({},a.onblur,function(){d.setValue({type:"onblur",focus:!1}),d.el().classList.remove(i.stateFocused)}),p(u,a.oninput)?null:l({},a.oninput,function(){d.setValue({type:"input"})}),p(u,a.onkeydown)?null:l({},a.onkeydown,function(e){"Enter"===e.key?d.isTouched(!0):"Escape"===e.key&&_.blur(e)}),u.events?u.events:null,void 0!==u.required&&u.required?{required:!0}:null,void 0!==u[a.readonly]&&u[a.readonly]?l({},a.readonly,!0):null,void 0!==u.pattern?{pattern:u.pattern}:null,void 0!==u[a.maxlength]?l({},a.maxlength,u[a.maxlength]):null,void 0!==u[a.minlength]?l({},a.minlength,u[a.minlength]):null,void 0!==u.max?{max:u.max}:null,void 0!==u.min?{min:u.min}:null,void 0!==u[a.autofocus]?l({},a.autofocus,u[a.autofocus]):null,void 0!==u[a.tabindex]?l({},a.tabindex,u[a.tabindex]):null,void 0!==u.rows?{rows:u.rows}:null))]),u.counter?n("div",{key:"counter",className:i.counter},(_&&_.value.length||0)+" / "+u.counter):null,u.help&&!f?n("div",{key:"help",className:[i.help,u.focusHelp?i.focusHelp:null].join(" ")},u.help):null,f?n("div",{key:"error",className:i.error},d.error()):g&&!u.help?n("div",{key:"error-placeholder",className:i.errorPlaceholder}):null]},b=Object.freeze({getElement:n,getInitialState:v,onMount:h,createProps:f,createContent:g}),m=function(e){return"rgba("+e+", "+(arguments.length>1&&void 0!==arguments[1]?arguments[1]:1)+")"},y={vertical_spacing_top:6,vertical_spacing_bottom:7,input_focus_border_width:2,input_focus_border_animation_duration:r.vars.animation_duration,floating_label_vertical_spacing_top:30,floating_label_vertical_spacing_bottom:7,floating_label_top:14,floating_label_animation_duration:".12s",input_padding_h:0,input_padding_v:7,input_border_width:1,margin_top_error_message:6,font_size_input:16,font_size_error:12,font_size_floating_label:12,line_height_input:20,dense_floating_label_vertical_spacing_top:23,dense_floating_label_vertical_spacing_bottom:4,dense_floating_label_top:10,dense_font_size_input:13,dense_font_size_floating_label:13,full_width_input_padding_h:20,full_width_input_padding_v:18,dense_full_width_input_padding_h:16,dense_full_width_input_padding_v:15,dense_full_width_font_size_input:13,color_light_input_text:m(r.vars.color_light_foreground,r.vars.blend_light_text_primary),color_light_input_background:"transparent",color_light_highlight_text:m(r.vars.color_primary,r.vars.blend_light_text_primary),color_light_input_bottom_border:m(r.vars.color_light_foreground,r.vars.blend_light_border_light),color_light_input_error_text:m("221, 44, 0"),color_light_input_error_border:m("221, 44, 0"),color_light_input_placeholder:m(r.vars.color_light_foreground,r.vars.blend_light_text_tertiary),color_light_label_text:m(r.vars.color_light_foreground,r.vars.blend_light_text_tertiary),color_light_disabled_label_text:m(r.vars.color_light_foreground,r.vars.blend_light_text_disabled),color_light_readonly_label_text:m(r.vars.color_light_foreground,r.vars.blend_light_text_tertiary),color_light_help_text:m(r.vars.color_light_foreground,r.vars.blend_light_text_tertiary),color_light_required_symbol:m("221, 44, 0"),color_light_focus_border:m(r.vars.color_primary),color_light_counter_ok_border:m(r.vars.color_primary),color_dark_input_text:m(r.vars.color_dark_foreground,r.vars.blend_dark_text_primary),color_dark_input_background:"transparent",color_dark_highlight_text:m(r.vars.color_primary,r.vars.blend_dark_text_primary),color_dark_input_bottom_border:m(r.vars.color_dark_foreground,r.vars.blend_dark_border_light),color_dark_input_error_text:m("222, 50, 38"),color_dark_input_error_border:m("222, 50, 38"),color_dark_input_placeholder:m(r.vars.color_dark_foreground,r.vars.blend_dark_text_tertiary),color_dark_label_text:m(r.vars.color_dark_foreground,r.vars.blend_dark_text_tertiary),color_dark_disabled_label_text:m(r.vars.color_dark_foreground,r.vars.blend_dark_text_disabled),color_dark_readonly_label_text:m(r.vars.color_dark_foreground,r.vars.blend_dark_text_tertiary),color_dark_help_text:m(r.vars.color_dark_foreground,r.vars.blend_dark_text_tertiary),color_dark_required_symbol:m("221, 44, 0"),color_dark_focus_border:m(r.vars.color_primary),color_dark_counter_ok_border:m(r.vars.color_primary)};e.coreTextField=b,e.vars=y,Object.defineProperty(e,"__esModule",{value:!0})});
+(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']));
+}(this, (function (exports,polytheneCore,polytheneTheme) { 'use strict';
+
+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",
+
+  // 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; };
+
+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 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 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 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;
+};
+
+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 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 ignoreEvent = function ignoreEvent(attrs, name) {
+  return attrs.ignoreEvents && attrs.ignoreEvents.indexOf(name) !== -1;
+};
+
+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 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])
+  };
+};
+
+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.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);
+  });
+
+  notifyState(vnode);
+};
+
+var onUpdate = function onUpdate(vnode) {
+  var state = vnode.state;
+  var attrs = vnode.attrs;
+  checkValidity(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();
+
+  if (inputEl && state.previousValue() !== valueStr) {
+    inputEl.value = valueStr;
+    state.previousValue(valueStr);
+    state.setInputState({ type: "input" });
+  }
+};
+
+var createProps = function createProps(vnode, _ref2) {
+  var k = _ref2.keys;
+
+  var state = vnode.state;
+  var attrs = vnode.attrs;
+  var isInvalid = state.isInvalid();
+
+  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 createContent = function createContent(vnode, _ref3) {
+  var h = _ref3.renderer,
+      k = _ref3.keys;
+
+  var state = vnode.state;
+  var attrs = vnode.attrs;
+
+  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 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 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;
+
+  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 });
+
+    // 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];
+};
+
+var textfield = Object.freeze({
+	getElement: getElement,
+	getInitialState: getInitialState,
+	onMount: onMount,
+	onUpdate: onUpdate,
+	createProps: createProps,
+	createContent: createContent
+});
+
+var rgba = function rgba(colorStr) {
+  var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  return "rgba(" + colorStr + ", " + opacity + ")";
+};
+
+var line_height_input = 20;
+var input_padding_v = 7;
+
+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,
+
+  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",
+
+  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,
+
+  line_height_input: line_height_input,
+
+  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,
+
+  full_width_input_padding_h: 20,
+  full_width_input_padding_v: 18, // 20 minus natural label height padding (2)
+
+  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_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),
+
+  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)
+};
+
+exports.coreTextField = textfield;
+exports.vars = vars$1;
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
 //# sourceMappingURL=polythene-core-textfield.js.map

package.json

 {
   "name": "polythene-core-textfield",
-  "version": "1.0.0-rc.9",
+  "version": "1.0.0-rc.10",
   "description": "",
@@ -17,5 +17,5 @@ "main": "dist/polythene-core-textfield.js",
   "dependencies": {
-    "polythene-core": "^1.0.0-rc.9",
-    "polythene-css-classes": "^1.0.0-rc.9",
-    "polythene-theme": "^1.0.0-rc.9"
+    "polythene-core": "^1.0.0-rc.10",
+    "polythene-css-classes": "^1.0.0-rc.10",
+    "polythene-theme": "^1.0.0-rc.10"
   },
@@ -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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67522

increased by22.29%

Lines of code

695

increased by75.95%

Number of low quality alerts

2

decreased by-33.33%

Dependency changes

• Updatedpolythene-core@^1.0.0-rc.10

• Updatedpolythene-css-classes@^1.0.0-rc.10

• Updatedpolythene-theme@^1.0.0-rc.10