ng-form-helper
Version:
Feature set to use in your angular form
468 lines (460 loc) • 15.3 kB
JavaScript
import { __extends } from 'tslib';
import { HostListener, Directive, ElementRef, forwardRef, Input, Renderer2, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
/**
* @fileoverview added by tsickle
* Generated from: lib/form-field.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @abstract
*/
var FormFieldDirective = /** @class */ (function () {
function FormFieldDirective() {
this.oldState = {
cursorStart: 0,
cursorEnd: 0,
value: ''
};
// These are for angular use
this.isDisabled = false;
this.onChange = (/**
* @param {...?} arg
* @return {?}
*/
function () {
var arg = [];
for (var _i = 0; _i < arguments.length; _i++) {
arg[_i] = arguments[_i];
}
return void (0);
});
this.onTouch = (/**
* @return {?}
*/
function () { return void (0); });
}
/**
* @return {?}
*/
FormFieldDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.oldState.value = this.element.nativeElement.value;
};
/**
* @return {?}
*/
FormFieldDirective.prototype.onKeyDown = /**
* @return {?}
*/
function () {
this.oldState.cursorStart = this.element.nativeElement.selectionStart;
this.oldState.cursorEnd = this.element.nativeElement.selectionEnd;
};
/**
* @return {?}
*/
FormFieldDirective.prototype.onBlur = /**
* @return {?}
*/
function () {
this.onTouch();
};
/**
* @param {?} value
* @return {?}
*/
FormFieldDirective.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var normalizedValue = value == null ? '' : value;
this.oldState.value = normalizedValue;
this.onChange(value);
this.renderer.setProperty(this.element.nativeElement, 'value', normalizedValue);
};
/**
* @param {?} isDisabled
* @return {?}
*/
FormFieldDirective.prototype.setDisabledState = /**
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.renderer.setProperty(this.element.nativeElement, 'disabled', isDisabled);
this.isDisabled = isDisabled;
};
/**
* @protected
* @param {?} event
* @return {?}
*/
FormFieldDirective.prototype.getValueFromKeyboardEvent = /**
* @protected
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var el = event.target && (/** @type {?} */ (event.target)) || null;
return el && el.value || '';
};
/**
* @protected
* @param {?} start
* @param {?=} end
* @return {?}
*/
FormFieldDirective.prototype.setCursorPosition = /**
* @protected
* @param {?} start
* @param {?=} end
* @return {?}
*/
function (start, end) {
if (end === void 0) { end = start; }
/** @type {?} */
var el = this.element.nativeElement;
/** @type {?} */
var type = el.getAttribute('type');
el.setAttribute('type', 'text');
el.selectionStart = start;
el.selectionEnd = end;
el.setAttribute('type', type);
};
/**
* @return {?}
*/
FormFieldDirective.prototype.resetField = /**
* @return {?}
*/
function () {
this.onChange(this.oldState.value);
this.writeValue(this.oldState.value);
this.setCursorPosition(this.oldState.cursorStart, this.oldState.cursorEnd);
};
/**
* @param {?} value
* @return {?}
*/
FormFieldDirective.prototype.updateFieldValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.writeValue(value);
this.oldState.value = value;
};
/**
* @param {?} fn
* @return {?}
*/
FormFieldDirective.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
FormFieldDirective.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouch = fn;
};
FormFieldDirective.propDecorators = {
onKeyDown: [{ type: HostListener, args: ['keydown',] }],
onBlur: [{ type: HostListener, args: ['blur',] }]
};
return FormFieldDirective;
}());
/**
* @fileoverview added by tsickle
* Generated from: lib/field-mask.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var FieldMaskDirective = /** @class */ (function (_super) {
__extends(FieldMaskDirective, _super);
function FieldMaskDirective(element, renderer) {
var _this = _super.call(this) || this;
_this.element = element;
_this.renderer = renderer;
/**
* The mask can't contain numbers
*/
_this.MASK_SHOULD_NOT_HAVE_NUMBERS = /[0-8]/gi;
_this.MASK_MUST_FINISH_WITH_A_NUMBER = /\d$/;
_this.generatedMaskConfig = {};
return _this;
}
Object.defineProperty(FieldMaskDirective.prototype, "setFormFieldMask", {
set: /**
* @param {?} formFieldMask
* @return {?}
*/
function (formFieldMask) {
this.generatedMaskConfig = this.generateMaskConfig(formFieldMask);
},
enumerable: true,
configurable: true
});
/**
* @private
* @param {?} formFieldMask
* @return {?}
*/
FieldMaskDirective.prototype.generateMaskConfig = /**
* @private
* @param {?} formFieldMask
* @return {?}
*/
function (formFieldMask) {
if (this.MASK_SHOULD_NOT_HAVE_NUMBERS.test(formFieldMask)) {
throw new Error("Can't generate mask: \"" + formFieldMask + "\". Invalid charactere found.\n You should not use numeric character to compose the field mask.");
}
if (!this.MASK_MUST_FINISH_WITH_A_NUMBER.test(formFieldMask)) {
throw new Error("Can't generate mask: \"" + formFieldMask + "\". Invalid format found.\n The mask must finish with a numeric character (9).");
}
/** @type {?} */
var generatedMaskConfig = {};
/** @type {?} */
var decomposeGivenMask = formFieldMask.match(/(9+|[^9]+)/g);
if (!decomposeGivenMask) {
throw new Error("Can't generate mask: \"" + formFieldMask + "\". Invalid format found.\n You must have at least one 9 character in the mask.");
}
/** @type {?} */
var isNumeric = /^\d+$/;
/** @type {?} */
var composeMask = '';
/** @type {?} */
var numberMapper = '';
/** @type {?} */
var numberGroup = 1;
/** @type {?} */
var numericLength = 0;
decomposeGivenMask.forEach((/**
* @param {?} textGroup
* @return {?}
*/
function (textGroup) {
if (isNumeric.test(textGroup)) {
numericLength += textGroup.length;
composeMask += "$" + numberGroup++;
/** @type {?} */
var currentNumberMapper = numberMapper + "([0-9]{1," + textGroup.length + "})";
numberMapper += "([0-9]{" + textGroup.length + "})";
generatedMaskConfig[String(numericLength)] = {
valueStructure: new RegExp(currentNumberMapper, 'g'),
maskStructure: composeMask
};
return;
}
composeMask += textGroup;
}));
return generatedMaskConfig;
};
/**
* @private
* @param {?} currentValue
* @return {?}
*/
FieldMaskDirective.prototype.getPartialMask = /**
* @private
* @param {?} currentValue
* @return {?}
*/
function (currentValue) {
/** @type {?} */
var lengths = Object.keys(this.generatedMaskConfig);
/** @type {?} */
var length = lengths.find((/**
* @param {?} maxLength
* @return {?}
*/
function (maxLength) { return currentValue.length <= Number(maxLength); }));
length = length || lengths.pop() || '';
/** @type {?} */
var maskConfig = this.generatedMaskConfig[length];
return {
valueStructure: maskConfig.valueStructure,
maskStructure: maskConfig.maskStructure,
maxLength: Number(length)
};
};
/**
* @param {?} event
* @return {?}
*/
FieldMaskDirective.prototype.onInput = /**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var currentMaskedValue = this.getValueFromKeyboardEvent(event);
// this validation is here for IE11 or lower... it emmits the input event for anything
// and create a loop
if (currentMaskedValue === this.oldState.value) {
return;
}
/** @type {?} */
var currentValue = currentMaskedValue.replace(/[^0-9]/g, '');
/** @type {?} */
var maskConfig = this.getPartialMask(currentValue);
if (currentValue.length > maskConfig.maxLength) {
this.resetField();
return;
}
/** @type {?} */
var maskedValue = currentValue.replace(maskConfig.valueStructure, maskConfig.maskStructure);
this.updateFieldValue(maskedValue);
};
FieldMaskDirective.decorators = [
{ type: Directive, args: [{
selector: '[formFieldMask]',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
function () { return FieldMaskDirective; })),
multi: true
}
]
},] }
];
/** @nocollapse */
FieldMaskDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: Renderer2 }
]; };
FieldMaskDirective.propDecorators = {
setFormFieldMask: [{ type: Input, args: ['formFieldMask',] }],
onInput: [{ type: HostListener, args: ['input', ['$event'],] }]
};
return FieldMaskDirective;
}(FormFieldDirective));
/**
* @fileoverview added by tsickle
* Generated from: lib/regexed-field.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var RegexedFieldDirective = /** @class */ (function (_super) {
__extends(RegexedFieldDirective, _super);
function RegexedFieldDirective(element, renderer) {
var _this = _super.call(this) || this;
_this.element = element;
_this.renderer = renderer;
_this.regexRule = /(?:)/;
return _this;
}
Object.defineProperty(RegexedFieldDirective.prototype, "setRegex", {
set: /**
* @param {?} regex
* @return {?}
*/
function (regex) {
this.regexRule = new RegExp(regex);
},
enumerable: true,
configurable: true
});
/**
* @param {?} event
* @return {?}
*/
RegexedFieldDirective.prototype.onInput = /**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var value = this.getValueFromKeyboardEvent(event);
// this validation is here for IE11 or lower... it emmits the input event for anything
// and create a loop
if (value === this.oldState.value) {
return;
}
if (this.regexRule.test(value)) {
/** @type {?} */
var cursorInitialPosition = this.element.nativeElement.selectionStart;
this.updateFieldValue(value);
this.setCursorPosition(cursorInitialPosition);
return;
}
this.resetField();
};
RegexedFieldDirective.decorators = [
{ type: Directive, args: [{
selector: '[formRegexedField]',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
function () { return RegexedFieldDirective; })),
multi: true
}
]
},] }
];
/** @nocollapse */
RegexedFieldDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: Renderer2 }
]; };
RegexedFieldDirective.propDecorators = {
setRegex: [{ type: Input, args: ['formRegexedField',] }],
onInput: [{ type: HostListener, args: ['input', ['$event'],] }]
};
return RegexedFieldDirective;
}(FormFieldDirective));
/**
* @fileoverview added by tsickle
* Generated from: lib/form-helper.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var FormHelperModule = /** @class */ (function () {
function FormHelperModule() {
}
FormHelperModule.decorators = [
{ type: NgModule, args: [{
imports: [
FormsModule
],
declarations: [
FieldMaskDirective,
RegexedFieldDirective
],
exports: [
FieldMaskDirective,
RegexedFieldDirective
]
},] }
];
return FormHelperModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-form-helper.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { FieldMaskDirective, FormHelperModule, RegexedFieldDirective, FormFieldDirective as ɵa };
//# sourceMappingURL=ng-form-helper.js.map