feat(stark-ui): feature/replace angular2mask by imaskjs

Add support for `min` and `max` date validation on typing for `starkTimestampMask` directive. ISSUES CLOSED: NationalBankBelgium#2564
mhenkens · Sep 5, 2022 · 580c896 · 580c896
1 parent 40c4413
commit 580c896
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 30 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/...dules/input-mask-directives/directives/abstract-stark-text-mask-base-directive.service.ts b/...dules/input-mask-directives/directives/abstract-stark-text-mask-base-directive.service.ts
@@ -104,6 +104,7 @@ export abstract class AbstractStarkTextMaskBaseDirective<
 			return;
 		}
 		let value = event.target["value"];
+		//by pass the normal call of the event to show the guide if needed.
 		event.stopImmediatePropagation();
 		event.stopPropagation();
 		if (this.maskRef) {

diff --git a/...es/stark-ui/src/modules/input-mask-directives/directives/timestamp-mask.directive.spec.ts b/...es/stark-ui/src/modules/input-mask-directives/directives/timestamp-mask.directive.spec.ts
@@ -160,6 +160,69 @@ describe("TimestampMaskDirective", () => {
 
 			expect(inputElement.nativeElement.value).toBe("02-29-__");
 		});
+
+		it("should allow time only to be entered", () => {
+			hostComponent.timestampMaskConfig = { ...timestampMaskConfig, format: "HH:mm:ss" };
+			fixture.detectChanges();
+
+			changeInputValue(inputElement, "101550");
+			fixture.detectChanges();
+
+			expect(inputElement.nativeElement.value).toBe("10:15:50");
+		});
+
+		it("reject invalid time", () => {
+			hostComponent.timestampMaskConfig = { ...timestampMaskConfig, format: "HH:mm:ss" };
+			fixture.detectChanges();
+
+			changeInputValue(inputElement, "25");
+			fixture.detectChanges();
+
+			expect(inputElement.nativeElement.value).toBe("2_:__:__");
+
+			changeInputValue(inputElement, "3");
+			fixture.detectChanges();
+
+			expect(inputElement.nativeElement.value).toBe("");
+
+			changeInputValue(inputElement, "238");
+			fixture.detectChanges();
+
+			expect(inputElement.nativeElement.value).toBe("23:__:__");
+
+			changeInputValue(inputElement, "23598");
+			fixture.detectChanges();
+
+			expect(inputElement.nativeElement.value).toBe("23:59:__");
+		});
+
+		it("Should allow partial date to be entered", () => {
+			hostComponent.timestampMaskConfig = { ...timestampMaskConfig, format: "MM/DD" };
+			fixture.detectChanges();
+
+			changeInputValue(inputElement, "0531");
+			fixture.detectChanges();
+
+			expect(inputElement.nativeElement.value).toBe("05/31");
+		});
+
+		it("Should allow partial date to be entered february", () => {
+			hostComponent.timestampMaskConfig = { ...timestampMaskConfig, format: "MM/DD" };
+			fixture.detectChanges();
+
+			changeInputValue(inputElement, "023");
+			fixture.detectChanges();
+
+			expect(inputElement.nativeElement.value).toBe("02/__");
+
+			changeInputValue(inputElement, "");
+			fixture.detectChanges();
+
+			changeInputValue(inputElement, "0229");
+			fixture.detectChanges();
+
+			expect(inputElement.nativeElement.value).toBe("02/29");
+		});
 	});
 
 	describe("with ngModel", () => {

diff --git a/packages/stark-ui/src/modules/input-mask-directives/directives/timestamp-mask.directive.ts b/packages/stark-ui/src/modules/input-mask-directives/directives/timestamp-mask.directive.ts
@@ -233,7 +233,12 @@ export class StarkTimestampMaskDirective
 	}
 
 	public validateTypedDate(dateParsed: DateParsed): boolean {
-		if (dateParsed.D.isValid && dateParsed.M.isValid) {
+		if (
+			(dateParsed.D.isValid || dateParsed.D.valueS.length === 1) &&
+			dateParsed.M.isValid &&
+			dateParsed.M.fieldLength > 0 &&
+			dateParsed.D.fieldLength > 0
+		) {
 			switch (dateParsed.M.value) {
 				case 1:
 				case 3:
@@ -249,10 +254,13 @@ export class StarkTimestampMaskDirective
 				case 11:
 					return dateParsed.D.value >= 1 && dateParsed.D.value <= 30;
 				case 2:
-					if (dateParsed.Y.isValid) {
+					if (dateParsed.D.isValid && dateParsed.Y.isValid && dateParsed.Y.fieldLength > 0) {
 						return moment(dateParsed.Y.valueS + "-" + dateParsed.M.valueS + "-" + dateParsed.D.valueS, "YYYY-MM-DD").isValid();
 					}
 					// february but do not know the year
+					if (dateParsed.D.valueS.length === 1) {
+						return dateParsed.D.valueS === "0" || dateParsed.D.valueS === "1" || dateParsed.D.valueS === "2";
+					}
 					return dateParsed.D.value >= 1 && dateParsed.D.value <= 29;
 				default:
 					return false;
@@ -300,6 +308,10 @@ export class StarkTimestampMaskDirective
 
 		return {
 			...defaultMask,
+			...{
+				formatFn: this.defaultFormatFunction(),
+				parseFn: this.defaultParseFunction()
+			},
 			...mask
 		};
 	}
@@ -404,7 +416,12 @@ export class StarkTimestampMaskDirective
 		}
 
 		return (value: string): Date | moment.Moment => {
-			const retVal = moment(value, format);
+			let retVal;
+			if (format.indexOf("D") >= 0 && format.indexOf("M") >= 0 && format.indexOf("Y") === -1) {
+				retVal = moment(value + "/2000", format + "/YYYY");
+			} else {
+				retVal = moment(value, format);
+			}
 			if (usingMoment) {
 				return retVal;
 			}
@@ -455,7 +472,7 @@ export class StarkTimestampMaskDirective
 				case "Y":
 					blocks[frm] = {
 						mask: IMask.MaskedRange,
-						from: 1900,
+						from: frm.length === 2 ? 0 : 1900,
 						to: frm.length === 2 ? 99 : 9999,
 						maxLength: frm.length,
 						eager: true