🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

polythene-core-textfield

Package Overview
Dependencies
Maintainers
1
Versions
37
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

polythene-core-textfield - npm Package Compare versions

Comparing version

1.0.0
to
1.1.0

691

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

14

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 <arthurclemens@gmail.com> (http://arthurclemens.com)",

dist/polythene-core-textfield.js.map

Sorry, the diff of this file is not supported yet

dist/polythene-core-textfield.mjs

Sorry, the diff of this file is not supported yet