feat(stark-ui): implement text-mask-directive

ISSUES CLOSED: #680

build-functions.sh

@@ -10,7 +10,7 @@
 isIgnoredDirectory() {
   #logTrace "${FUNCNAME[0]}: Checking for ${1}" 1
   name=$(basename ${1})
-  if [[ -f "${1}" || "${name}" == "src" || "${name}" == "test" || "${name}" == "integrationtest" || "${name}" == "reports" || "${name}" == "coverage" || "${name}" == "assets" || "${name}" == "node_modules" ]]; then
+  if [[ -f "${1}" || "${name}" == "src" || "${name}" == "test" || "${name}" == "integrationtest" || "${name}" == "reports" || "${name}" == "coverage" || "${name}" == "assets" || "${name}" == "typings" || "${name}" == "node_modules" ]]; then
     #logTrace "No" 1
     return 0
   else

build.sh

@@ -258,6 +258,11 @@ do
           syncOptions=(-a --include="**/assets/" --exclude="*.js" --exclude="*.js.map" --exclude="*.ts" --include="*.json" --exclude="node_modules/" --exclude="coverage/" --exclude="reports/")
           syncFiles ${SRC_DIR} ${OUT_DIR} "${syncOptions[@]}"
           unset syncOptions
+
+          logInfo "******************************* Copy typings folders for package $PACKAGE"
+          syncOptions=(-a --include="/typings/***" --exclude="*")
+          syncFiles $SRC_DIR $OUT_DIR "${syncOptions[@]}"
+          unset syncOptions
         fi
 
         if [[ ${BUNDLE} == true ]]; then

packages/rollup.config.common-data.js

@@ -67,6 +67,7 @@ const globals = {
 	"prismjs/components/prism-json.min.js": "Prism.languages.json",
 	"prismjs/components/prism-css-extras.min.js": "Prism.languages.css.selector",
 	"prismjs/components/prism-scss.min.js": "Prism.languages.scss",
+	"text-mask-core": "textMaskCore",
 	uuid: "uuid",
 
 	rxjs: "rxjs",

packages/stark-ui/package.json

@@ -30,11 +30,14 @@
     "@mdi/angular-material": "^3.3.92",
     "@types/nouislider": "^9.0.4",
     "@types/prismjs": "^1.9.0",
+    "angular2-text-mask": "^9.0.0",
     "normalize.css": "^8.0.1",
     "nouislider": "^12.1.0",
     "prettier": "^1.16.1",
     "pretty-data": "^0.40.0",
-    "prismjs": "^1.15.0"
+    "prismjs": "^1.15.0",
+    "text-mask-addons": "^3.8.0",
+    "text-mask-core": "^5.1.2"
   },
   "devDependencies": {
     "@nationalbankbelgium/stark-testing": "../stark-testing"

packages/stark-ui/src/modules.ts

@@ -13,6 +13,7 @@ export * from "./modules/dropdown";
 export * from "./modules/generic-search";
 export * from "./modules/keyboard-directives";
 export * from "./modules/language-selector";
+export * from "./modules/mask-directives";
 export * from "./modules/message-pane";
 export * from "./modules/minimap";
 export * from "./modules/pagination";

packages/stark-ui/src/modules/mask-directives.ts

@@ -0,0 +1,2 @@
+export * from "./mask-directives/directives";
+export * from "./mask-directives/mask-directives.module";

packages/stark-ui/src/modules/mask-directives/directives.ts

@@ -0,0 +1,9 @@
+export * from "./directives/email-mask.directive";
+export * from "./directives/number-mask.directive";
+export * from "./directives/number-mask-config.intf";
+export * from "./directives/text-mask.constants";
+export * from "./directives/text-mask.directive";
+export * from "./directives/text-mask-config.intf";
+export * from "./directives/timestamp-mask.directive";
+export * from "./directives/timestamp-mask-config.intf";
+export * from "./directives/timestamp-pipe.fn";

packages/stark-ui/src/modules/mask-directives/directives/email-mask.directive.ts

@@ -0,0 +1,55 @@
+import { Directive, ElementRef, forwardRef, Inject, Input, OnChanges, Optional, Provider, Renderer2, SimpleChanges } from "@angular/core";
+import { COMPOSITION_BUFFER_MODE, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { CombinedPipeMask } from "text-mask-core";
+import * as textMaskAddons from "text-mask-addons";
+import { MaskedInputDirective, TextMaskConfig as Ng2TextMaskConfig } from "angular2-text-mask";
+
+/**
+ * Name of the directive
+ */
+const directiveName: string = "[starkEmailMask]";
+
+export const STARK_EMAIL_MASK_VALUE_ACCESSOR: Provider = {
+	provide: NG_VALUE_ACCESSOR,
+	// tslint:disable-next-line:no-forward-ref
+	useExisting: forwardRef(() => StarkEmailMaskDirective),
+	multi: true
+};
+
+@Directive({
+	host: {
+		"(input)": "_handleInput($event.target.value)",
+		"(blur)": "onTouched()",
+		"(compositionstart)": "_compositionStart()",
+		"(compositionend)": "_compositionEnd($event.target.value)"
+	},
+	selector: directiveName,
+	exportAs: "starkEmailMask",
+	providers: [STARK_EMAIL_MASK_VALUE_ACCESSOR]
+})
+export class StarkEmailMaskDirective extends MaskedInputDirective implements OnChanges {
+	/* tslint:disable:no-input-rename */
+	@Input("starkEmailMask")
+	public maskConfig: boolean;
+
+	public constructor(
+		_renderer: Renderer2,
+		_elementRef: ElementRef,
+		@Optional() @Inject(COMPOSITION_BUFFER_MODE) _compositionMode: boolean
+	) {
+		super(_renderer, _elementRef, _compositionMode);
+	}
+
+	public ngOnChanges(changes: SimpleChanges): void {
+		// TODO: Ng2TextMaskConfig is not the same as Core TextMaskConfig
+		// even though emailMask is passed as a mask, it is actually made of both a mask and a pipe bundled together for convenience
+		// https://github.com/text-mask/text-mask/tree/master/addons
+		const { mask, pipe }: CombinedPipeMask = textMaskAddons.emailMask;
+		const textMaskConfig: Ng2TextMaskConfig = { mask: <any>mask, pipe: <any>pipe };
+
+		console.log("CCR==========> textMaskConfig", textMaskConfig);
+		this.textMaskConfig = textMaskConfig;
+
+		super.ngOnChanges(changes);
+	}
+}

packages/stark-ui/src/modules/mask-directives/directives/number-mask-config.intf.ts

@@ -0,0 +1,60 @@
+/**
+ * Interface based on the API of the createNumberMask() function from the text-mask-addons library
+ * See https://github.com/text-mask/text-mask/tree/master/addons#createnumbermask
+ */
+export interface StarkNumberMaskConfig {
+	/**
+	 * String to be displayed before the amount. Default: empty string ("")
+	 */
+	prefix?: string;
+
+	/**
+	 * String to be displayed after the amount. Default: empty string ("")
+	 */
+	suffix?: string;
+
+	/**
+	 * Whether or not to separate thousands. Default: true
+	 */
+	includeThousandsSeparator?: boolean;
+
+	/**
+	 * Character to be used as thousands separator. Default: ","
+	 */
+	thousandsSeparatorSymbol?: string;
+
+	/**
+	 * Whether or not to allow the user to enter a fraction with the amount. Default: false
+	 */
+	allowDecimal?: boolean;
+
+	/**
+	 * Character to be used as decimal point. Default: "."
+	 */
+	decimalSymbol?: string;
+
+	/**
+	 * Number of digits to allow in the decimal part of the number. Default: 2
+	 */
+	decimalLimit?: number;
+
+	/**
+	 * Limit the length of the integer number. Default: undefined (unlimited)
+	 */
+	integerLimit?: number;
+
+	/**
+	 * Whether or not to always include a decimal point and placeholder for decimal digits after the integer. Default: false
+	 */
+	requireDecimal?: boolean;
+
+	/**
+	 * Whether or not to allow negative numbers. Default: true
+	 */
+	allowNegative?: boolean;
+
+	/**
+	 * Whether or not to allow leading zeroes. Default: false
+	 */
+	allowLeadingZeroes?: boolean;
+}

packages/stark-ui/src/modules/mask-directives/directives/number-mask.directive.ts

@@ -0,0 +1,66 @@
+import { Directive, ElementRef, forwardRef, Inject, Input, OnChanges, Optional, Provider, Renderer2, SimpleChanges } from "@angular/core";
+import { COMPOSITION_BUFFER_MODE, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { MaskedInputDirective, TextMaskConfig as Ng2TextMaskConfig } from "angular2-text-mask";
+import { StarkNumberMaskConfig } from "./number-mask-config.intf";
+import * as textMaskAddons from "text-mask-addons";
+
+/**
+ * Name of the directive
+ */
+const directiveName: string = "[starkNumberMask]";
+
+export const STARK_NUMBER_MASK_VALUE_ACCESSOR: Provider = {
+	provide: NG_VALUE_ACCESSOR,
+	// tslint:disable-next-line:no-forward-ref
+	useExisting: forwardRef(() => StarkNumberMaskDirective),
+	multi: true
+};
+
+const defaultNumberMaskConfig: StarkNumberMaskConfig = {
+	prefix: "",
+	suffix: "",
+	includeThousandsSeparator: true,
+	thousandsSeparatorSymbol: ",",
+	allowDecimal: false,
+	decimalSymbol: ".",
+	decimalLimit: 2,
+	requireDecimal: false,
+	allowNegative: true,
+	allowLeadingZeroes: false
+};
+
+@Directive({
+	host: {
+		"(input)": "_handleInput($event.target.value)",
+		"(blur)": "onTouched()",
+		"(compositionstart)": "_compositionStart()",
+		"(compositionend)": "_compositionEnd($event.target.value)"
+	},
+	selector: directiveName,
+	exportAs: "starkNumberMask",
+	providers: [STARK_NUMBER_MASK_VALUE_ACCESSOR]
+})
+export class StarkNumberMaskDirective extends MaskedInputDirective implements OnChanges {
+	/* tslint:disable:no-input-rename */
+	@Input("starkNumberMask")
+	public maskConfig: StarkNumberMaskConfig;
+
+	public constructor(
+		_renderer: Renderer2,
+		_elementRef: ElementRef,
+		@Optional() @Inject(COMPOSITION_BUFFER_MODE) _compositionMode: boolean
+	) {
+		super(_renderer, _elementRef, _compositionMode);
+	}
+
+	public ngOnChanges(changes: SimpleChanges): void {
+		// TODO: Ng2TextMaskConfig is not the same as Core TextMaskConfig
+		const numberMaskConfig: StarkNumberMaskConfig = { ...defaultNumberMaskConfig, ...this.maskConfig };
+		const textMaskConfig: Ng2TextMaskConfig = { mask: textMaskAddons.createNumberMask(numberMaskConfig) };
+
+		console.log("CCR==========> textMaskConfig", textMaskConfig);
+		this.textMaskConfig = textMaskConfig;
+
+		super.ngOnChanges(changes);
+	}
+}

packages/stark-ui/src/modules/mask-directives/directives/text-mask-config.intf.ts

@@ -0,0 +1,35 @@
+import * as textMaskCore from "text-mask-core";
+
+export interface StarkTextMaskBaseConfig {
+	/**
+	 * Whether to show the mask while the user is typing in the input field in order to guide him. Default: true.
+	 * See https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#guide
+	 */
+	guide?: boolean;
+
+	/**
+	 * Placeholder character represents the fillable spot in the mask. Default: "_".
+	 * See https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#placeholderchar
+	 */
+	placeholderChar?: string;
+
+	/**
+	 * Whether to keep the spaces used by character after they are added/deleted. Default: true.
+	 * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#keepcharpositions
+	 */
+	keepCharPositions?: boolean;
+}
+
+export interface StarkTextMaskConfig extends StarkTextMaskBaseConfig {
+	/**
+	 * Array or a function that defines how the user input is going to be masked. If is set to false, the mask will be removed.
+	 * See https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#mask
+	 */
+	mask: textMaskCore.Mask | false;
+
+	/**
+	 * Function that can modify the conformed value before it is displayed on the screen.
+	 * See https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#pipe
+	 */
+	pipe?: textMaskCore.PipeFunction;
+}