@maskito/core
Advanced tools
Comparing version 3.0.1 to 3.0.2
121
index.cjs.js
@@ -11,7 +11,7 @@ 'use strict'; | ||
function setContentEditableSelection(element, [from, to]) { | ||
var _a, _b; | ||
var _a, _b, _c, _d; | ||
const document = element.ownerDocument; | ||
const range = document.createRange(); | ||
range.setStart(element.firstChild || element, Math.min(from, ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.length) || 0)); | ||
range.setEnd(element.lastChild || element, Math.min(to, ((_b = element.textContent) === null || _b === void 0 ? void 0 : _b.length) || 0)); | ||
range.setStart(element.firstChild || element, Math.min(from, (_b = (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0)); | ||
range.setEnd(element.lastChild || element, Math.min(to, (_d = (_c = element.textContent) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0)); | ||
const selection = document.getSelection(); | ||
@@ -43,3 +43,3 @@ if (selection) { | ||
setSelectionRange(from, to) { | ||
setContentEditableSelection(this.element, [from || 0, to || 0]); | ||
setContentEditableSelection(this.element, [from !== null && from !== void 0 ? from : 0, to !== null && to !== void 0 ? to : 0]); | ||
} | ||
@@ -179,8 +179,2 @@ select() { | ||
const charConstraint = mask[newValidatedChars.length] || ''; | ||
if (isFixedCharacter(charConstraint)) { | ||
return newValidatedChars + charConstraint; | ||
} | ||
if (!char.match(charConstraint)) { | ||
return newValidatedChars; | ||
} | ||
if (maskedFrom === null && charIndex >= elementState.selection[0]) { | ||
@@ -192,3 +186,8 @@ maskedFrom = newValidatedChars.length; | ||
} | ||
return newValidatedChars + char; | ||
if (isFixedCharacter(charConstraint)) { | ||
return newValidatedChars + charConstraint; | ||
} | ||
return char.match(charConstraint) | ||
? newValidatedChars + char | ||
: newValidatedChars; | ||
}, ''); | ||
@@ -334,3 +333,3 @@ const trailingFixedCharacters = getLeadingFixedCharacters(mask, maskedValue, '', initialElementState); | ||
this.element.addEventListener(eventType, untypedFn, options); | ||
this.listeners.push(() => this.element.removeEventListener(eventType, untypedFn)); | ||
this.listeners.push(() => this.element.removeEventListener(eventType, untypedFn, options)); | ||
} | ||
@@ -479,3 +478,3 @@ destroy() { | ||
.reverse() | ||
.findIndex((char) => char.match(SPACE_REG)); | ||
.findIndex((char) => SPACE_REG.exec(char)); | ||
return [ | ||
@@ -487,3 +486,3 @@ selectedWordLength !== -1 ? to - trailingSpaces.length - selectedWordLength : 0, | ||
/* eslint-disable @typescript-eslint/ban-types */ | ||
/* eslint-disable @typescript-eslint/no-restricted-types */ | ||
/** | ||
@@ -517,2 +516,3 @@ * @internal | ||
this.options = Object.assign(Object.assign({}, MASKITO_DEFAULT_OPTIONS), this.maskitoOptions); | ||
this.upcomingElementState = null; | ||
this.preprocessor = maskitoPipe(this.options.preprocessors); | ||
@@ -533,3 +533,3 @@ this.postprocessor = maskitoPipe(this.options.postprocessors); | ||
this.eventListener.listen('beforeinput', (event) => { | ||
var _a; | ||
var _a, _b, _c; | ||
const isForward = event.inputType.includes('Forward'); | ||
@@ -596,9 +596,13 @@ this.updateHistory(this.elementState); | ||
default: | ||
return this.handleInsert(event, event.data || | ||
( | ||
// `event.data` for `contentEditable` is always `null` for paste/drop events | ||
(_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('text/plain')) || | ||
''); | ||
return this.handleInsert(event, (_c = (_a = event.data) !== null && _a !== void 0 ? _a : | ||
// `event.data` for `contentEditable` is always `null` for paste/drop events | ||
(_b = event.dataTransfer) === null || _b === void 0 ? void 0 : _b.getData('text/plain')) !== null && _c !== void 0 ? _c : ''); | ||
} | ||
}); | ||
this.eventListener.listen('input', () => { | ||
if (this.upcomingElementState) { | ||
this.updateElementState(this.upcomingElementState); | ||
this.upcomingElementState = null; | ||
} | ||
}, { capture: true }); | ||
this.eventListener.listen('input', ({ inputType }) => { | ||
@@ -616,2 +620,14 @@ if (inputType === 'insertCompositionText') { | ||
} | ||
destroy() { | ||
this.eventListener.destroy(); | ||
this.teardowns.forEach((teardown) => teardown === null || teardown === void 0 ? void 0 : teardown()); | ||
} | ||
updateElementState({ value, selection }, eventInit) { | ||
const initialValue = this.elementState.value; | ||
this.updateValue(value); | ||
this.updateSelectionRange(selection); | ||
if (eventInit && initialValue !== value) { | ||
this.dispatchInputEvent(eventInit); | ||
} | ||
} | ||
get elementState() { | ||
@@ -621,3 +637,3 @@ const { value, selectionStart, selectionEnd } = this.element; | ||
value, | ||
selection: [selectionStart || 0, selectionEnd || 0], | ||
selection: [selectionStart !== null && selectionStart !== void 0 ? selectionStart : 0, selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : 0], | ||
}; | ||
@@ -629,17 +645,2 @@ } | ||
} | ||
destroy() { | ||
this.eventListener.destroy(); | ||
this.teardowns.forEach((teardown) => teardown === null || teardown === void 0 ? void 0 : teardown()); | ||
} | ||
updateElementState({ value, selection }, eventInit = { | ||
inputType: 'insertText', | ||
data: null, | ||
}) { | ||
const initialValue = this.elementState.value; | ||
this.updateValue(value); | ||
this.updateSelectionRange(selection); | ||
if (initialValue !== value) { | ||
this.dispatchInputEvent(eventInit); | ||
} | ||
} | ||
updateSelectionRange([from, to]) { | ||
@@ -657,3 +658,6 @@ var _a; | ||
ensureValueFitsMask() { | ||
this.updateElementState(maskitoTransform(this.elementState, this.options)); | ||
this.updateElementState(maskitoTransform(this.elementState, this.options), { | ||
inputType: 'insertText', | ||
data: null, | ||
}); | ||
} | ||
@@ -689,15 +693,11 @@ dispatchInputEvent(eventInit = { | ||
} | ||
event.preventDefault(); | ||
if (areElementValuesEqual(initialState, elementState, maskModel, newElementState)) { | ||
event.preventDefault(); | ||
// User presses Backspace/Delete for the fixed value | ||
return this.updateSelectionRange(isForward ? [to, to] : [from, from]); | ||
} | ||
this.updateElementState(newElementState, { | ||
inputType: event.inputType, | ||
data: null, | ||
}); | ||
this.updateHistory(newElementState); | ||
this.upcomingElementState = newElementState; | ||
} | ||
handleInsert(event, data) { | ||
const initialElementState = this.elementState; | ||
const { options, maxLength, element, elementState: initialElementState } = this; | ||
const { elementState, data: insertedText = data } = this.preprocessor({ | ||
@@ -707,3 +707,3 @@ data, | ||
}, 'insert'); | ||
const maskModel = new MaskModel(elementState, this.options); | ||
const maskModel = new MaskModel(elementState, options); | ||
try { | ||
@@ -720,13 +720,16 @@ maskModel.addCharacters(elementState.selection, insertedText); | ||
const newElementState = this.postprocessor(maskModel, initialElementState); | ||
if (newElementState.value.length > this.maxLength) { | ||
if (newElementState.value.length > maxLength) { | ||
return event.preventDefault(); | ||
} | ||
if (newPossibleValue !== newElementState.value || | ||
this.element.isContentEditable) { | ||
event.preventDefault(); | ||
this.updateElementState(newElementState, { | ||
data, | ||
inputType: event.inputType, | ||
}); | ||
this.updateHistory(newElementState); | ||
if (newPossibleValue !== newElementState.value || element.isContentEditable) { | ||
this.upcomingElementState = newElementState; | ||
if (options.overwriteMode === 'replace' && | ||
newPossibleValue.length > maxLength) { | ||
/** | ||
* Browsers know nothing about Maskito and its `overwriteMode`. | ||
* When textfield value length is already equal to attribute `maxlength`, | ||
* pressing any key (even with valid value) does not emit `input` event. | ||
*/ | ||
this.dispatchInputEvent({ inputType: 'insertText', data }); | ||
} | ||
} | ||
@@ -768,4 +771,5 @@ } | ||
return (element, options) => { | ||
const from = element.selectionStart || 0; | ||
const to = element.selectionEnd || 0; | ||
var _a, _b; | ||
const from = (_a = element.selectionStart) !== null && _a !== void 0 ? _a : 0; | ||
const to = (_b = element.selectionEnd) !== null && _b !== void 0 ? _b : 0; | ||
maskitoUpdateElement(element, { | ||
@@ -781,2 +785,3 @@ value: maskitoTransform(element.value, customOptions || options), | ||
const listener = (event) => { | ||
var _a, _b; | ||
if (event.inputType !== 'insertCompositionText') { | ||
@@ -786,4 +791,4 @@ return; | ||
const selection = [ | ||
element.selectionStart || 0, | ||
element.selectionEnd || 0, | ||
(_a = element.selectionStart) !== null && _a !== void 0 ? _a : 0, | ||
(_b = element.selectionEnd) !== null && _b !== void 0 ? _b : 0, | ||
]; | ||
@@ -790,0 +795,0 @@ const elementState = { |
121
index.esm.js
@@ -9,7 +9,7 @@ function getContentEditableSelection(element) { | ||
function setContentEditableSelection(element, [from, to]) { | ||
var _a, _b; | ||
var _a, _b, _c, _d; | ||
const document = element.ownerDocument; | ||
const range = document.createRange(); | ||
range.setStart(element.firstChild || element, Math.min(from, ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.length) || 0)); | ||
range.setEnd(element.lastChild || element, Math.min(to, ((_b = element.textContent) === null || _b === void 0 ? void 0 : _b.length) || 0)); | ||
range.setStart(element.firstChild || element, Math.min(from, (_b = (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0)); | ||
range.setEnd(element.lastChild || element, Math.min(to, (_d = (_c = element.textContent) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0)); | ||
const selection = document.getSelection(); | ||
@@ -41,3 +41,3 @@ if (selection) { | ||
setSelectionRange(from, to) { | ||
setContentEditableSelection(this.element, [from || 0, to || 0]); | ||
setContentEditableSelection(this.element, [from !== null && from !== void 0 ? from : 0, to !== null && to !== void 0 ? to : 0]); | ||
} | ||
@@ -177,8 +177,2 @@ select() { | ||
const charConstraint = mask[newValidatedChars.length] || ''; | ||
if (isFixedCharacter(charConstraint)) { | ||
return newValidatedChars + charConstraint; | ||
} | ||
if (!char.match(charConstraint)) { | ||
return newValidatedChars; | ||
} | ||
if (maskedFrom === null && charIndex >= elementState.selection[0]) { | ||
@@ -190,3 +184,8 @@ maskedFrom = newValidatedChars.length; | ||
} | ||
return newValidatedChars + char; | ||
if (isFixedCharacter(charConstraint)) { | ||
return newValidatedChars + charConstraint; | ||
} | ||
return char.match(charConstraint) | ||
? newValidatedChars + char | ||
: newValidatedChars; | ||
}, ''); | ||
@@ -332,3 +331,3 @@ const trailingFixedCharacters = getLeadingFixedCharacters(mask, maskedValue, '', initialElementState); | ||
this.element.addEventListener(eventType, untypedFn, options); | ||
this.listeners.push(() => this.element.removeEventListener(eventType, untypedFn)); | ||
this.listeners.push(() => this.element.removeEventListener(eventType, untypedFn, options)); | ||
} | ||
@@ -477,3 +476,3 @@ destroy() { | ||
.reverse() | ||
.findIndex((char) => char.match(SPACE_REG)); | ||
.findIndex((char) => SPACE_REG.exec(char)); | ||
return [ | ||
@@ -485,3 +484,3 @@ selectedWordLength !== -1 ? to - trailingSpaces.length - selectedWordLength : 0, | ||
/* eslint-disable @typescript-eslint/ban-types */ | ||
/* eslint-disable @typescript-eslint/no-restricted-types */ | ||
/** | ||
@@ -515,2 +514,3 @@ * @internal | ||
this.options = Object.assign(Object.assign({}, MASKITO_DEFAULT_OPTIONS), this.maskitoOptions); | ||
this.upcomingElementState = null; | ||
this.preprocessor = maskitoPipe(this.options.preprocessors); | ||
@@ -531,3 +531,3 @@ this.postprocessor = maskitoPipe(this.options.postprocessors); | ||
this.eventListener.listen('beforeinput', (event) => { | ||
var _a; | ||
var _a, _b, _c; | ||
const isForward = event.inputType.includes('Forward'); | ||
@@ -594,9 +594,13 @@ this.updateHistory(this.elementState); | ||
default: | ||
return this.handleInsert(event, event.data || | ||
( | ||
// `event.data` for `contentEditable` is always `null` for paste/drop events | ||
(_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('text/plain')) || | ||
''); | ||
return this.handleInsert(event, (_c = (_a = event.data) !== null && _a !== void 0 ? _a : | ||
// `event.data` for `contentEditable` is always `null` for paste/drop events | ||
(_b = event.dataTransfer) === null || _b === void 0 ? void 0 : _b.getData('text/plain')) !== null && _c !== void 0 ? _c : ''); | ||
} | ||
}); | ||
this.eventListener.listen('input', () => { | ||
if (this.upcomingElementState) { | ||
this.updateElementState(this.upcomingElementState); | ||
this.upcomingElementState = null; | ||
} | ||
}, { capture: true }); | ||
this.eventListener.listen('input', ({ inputType }) => { | ||
@@ -614,2 +618,14 @@ if (inputType === 'insertCompositionText') { | ||
} | ||
destroy() { | ||
this.eventListener.destroy(); | ||
this.teardowns.forEach((teardown) => teardown === null || teardown === void 0 ? void 0 : teardown()); | ||
} | ||
updateElementState({ value, selection }, eventInit) { | ||
const initialValue = this.elementState.value; | ||
this.updateValue(value); | ||
this.updateSelectionRange(selection); | ||
if (eventInit && initialValue !== value) { | ||
this.dispatchInputEvent(eventInit); | ||
} | ||
} | ||
get elementState() { | ||
@@ -619,3 +635,3 @@ const { value, selectionStart, selectionEnd } = this.element; | ||
value, | ||
selection: [selectionStart || 0, selectionEnd || 0], | ||
selection: [selectionStart !== null && selectionStart !== void 0 ? selectionStart : 0, selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : 0], | ||
}; | ||
@@ -627,17 +643,2 @@ } | ||
} | ||
destroy() { | ||
this.eventListener.destroy(); | ||
this.teardowns.forEach((teardown) => teardown === null || teardown === void 0 ? void 0 : teardown()); | ||
} | ||
updateElementState({ value, selection }, eventInit = { | ||
inputType: 'insertText', | ||
data: null, | ||
}) { | ||
const initialValue = this.elementState.value; | ||
this.updateValue(value); | ||
this.updateSelectionRange(selection); | ||
if (initialValue !== value) { | ||
this.dispatchInputEvent(eventInit); | ||
} | ||
} | ||
updateSelectionRange([from, to]) { | ||
@@ -655,3 +656,6 @@ var _a; | ||
ensureValueFitsMask() { | ||
this.updateElementState(maskitoTransform(this.elementState, this.options)); | ||
this.updateElementState(maskitoTransform(this.elementState, this.options), { | ||
inputType: 'insertText', | ||
data: null, | ||
}); | ||
} | ||
@@ -687,15 +691,11 @@ dispatchInputEvent(eventInit = { | ||
} | ||
event.preventDefault(); | ||
if (areElementValuesEqual(initialState, elementState, maskModel, newElementState)) { | ||
event.preventDefault(); | ||
// User presses Backspace/Delete for the fixed value | ||
return this.updateSelectionRange(isForward ? [to, to] : [from, from]); | ||
} | ||
this.updateElementState(newElementState, { | ||
inputType: event.inputType, | ||
data: null, | ||
}); | ||
this.updateHistory(newElementState); | ||
this.upcomingElementState = newElementState; | ||
} | ||
handleInsert(event, data) { | ||
const initialElementState = this.elementState; | ||
const { options, maxLength, element, elementState: initialElementState } = this; | ||
const { elementState, data: insertedText = data } = this.preprocessor({ | ||
@@ -705,3 +705,3 @@ data, | ||
}, 'insert'); | ||
const maskModel = new MaskModel(elementState, this.options); | ||
const maskModel = new MaskModel(elementState, options); | ||
try { | ||
@@ -718,13 +718,16 @@ maskModel.addCharacters(elementState.selection, insertedText); | ||
const newElementState = this.postprocessor(maskModel, initialElementState); | ||
if (newElementState.value.length > this.maxLength) { | ||
if (newElementState.value.length > maxLength) { | ||
return event.preventDefault(); | ||
} | ||
if (newPossibleValue !== newElementState.value || | ||
this.element.isContentEditable) { | ||
event.preventDefault(); | ||
this.updateElementState(newElementState, { | ||
data, | ||
inputType: event.inputType, | ||
}); | ||
this.updateHistory(newElementState); | ||
if (newPossibleValue !== newElementState.value || element.isContentEditable) { | ||
this.upcomingElementState = newElementState; | ||
if (options.overwriteMode === 'replace' && | ||
newPossibleValue.length > maxLength) { | ||
/** | ||
* Browsers know nothing about Maskito and its `overwriteMode`. | ||
* When textfield value length is already equal to attribute `maxlength`, | ||
* pressing any key (even with valid value) does not emit `input` event. | ||
*/ | ||
this.dispatchInputEvent({ inputType: 'insertText', data }); | ||
} | ||
} | ||
@@ -766,4 +769,5 @@ } | ||
return (element, options) => { | ||
const from = element.selectionStart || 0; | ||
const to = element.selectionEnd || 0; | ||
var _a, _b; | ||
const from = (_a = element.selectionStart) !== null && _a !== void 0 ? _a : 0; | ||
const to = (_b = element.selectionEnd) !== null && _b !== void 0 ? _b : 0; | ||
maskitoUpdateElement(element, { | ||
@@ -779,2 +783,3 @@ value: maskitoTransform(element.value, customOptions || options), | ||
const listener = (event) => { | ||
var _a, _b; | ||
if (event.inputType !== 'insertCompositionText') { | ||
@@ -784,4 +789,4 @@ return; | ||
const selection = [ | ||
element.selectionStart || 0, | ||
element.selectionEnd || 0, | ||
(_a = element.selectionStart) !== null && _a !== void 0 ? _a : 0, | ||
(_b = element.selectionEnd) !== null && _b !== void 0 ? _b : 0, | ||
]; | ||
@@ -788,0 +793,0 @@ const elementState = { |
{ | ||
"name": "@maskito/core", | ||
"version": "3.0.1", | ||
"version": "3.0.2", | ||
"description": "The main zero-dependency and framework-agnostic Maskito's package to create an input mask", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -9,2 +9,3 @@ import { MaskHistory } from './classes'; | ||
private readonly options; | ||
private upcomingElementState; | ||
private readonly preprocessor; | ||
@@ -14,6 +15,6 @@ private readonly postprocessor; | ||
constructor(element: MaskitoElement, maskitoOptions: MaskitoOptions); | ||
destroy(): void; | ||
protected updateElementState({ value, selection }: ElementState, eventInit?: Pick<TypedInputEvent, 'data' | 'inputType'>): void; | ||
private get elementState(); | ||
private get maxLength(); | ||
destroy(): void; | ||
protected updateElementState({ value, selection }: ElementState, eventInit?: Pick<TypedInputEvent, 'data' | 'inputType'>): void; | ||
private updateSelectionRange; | ||
@@ -20,0 +21,0 @@ private updateValue; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
96474
1750