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

@@ -51,6 +51,7 @@ const globals = {
 	"@ngx-translate/core": "ngxTranslate.core",
 	"@uirouter/core": "uirouter.core",
 	"@uirouter/angular": "uirouter.angular",
+	"angular2-text-mask": "ng2TextMask",
 	"class-validator": "class-validator",
 	cerialize: "cerialize",
 	ibantools: "ibantools",
@@ -67,6 +68,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/input-mask-directives.ts

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

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

@@ -0,0 +1,3 @@
+export * from "./directives/text-mask.constants";
+export * from "./directives/text-mask.directive";
+export * from "./directives/text-mask-config.intf";

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

@@ -0,0 +1,46 @@
+import * as textMaskCore from "text-mask-core";
+
+/**
+ * Defines the base configuration for the mask directives provided by Stark.
+ */
+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 {@link 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 {@link 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.
+	 *
+	 * See {@link https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#keepcharpositions}
+	 */
+	keepCharPositions?: boolean;
+}
+
+/**
+ * Defines the configuration for the {@link StarkTextMaskDirective}.
+ */
+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 {@link 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 {@link https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#pipe}
+	 */
+	pipe?: textMaskCore.PipeFunction;
+}

packages/stark-ui/src/modules/input-mask-directives/directives/text-mask.constants.ts

@@ -0,0 +1,55 @@
+/**
+ * Util class containing some constants with predefined masks for common mask patterns to be used with the {@link StarkTextMaskDirective}.
+ */
+export class StarkTextMasks {
+	/**
+	 * Mask for Belgian Structured Communication numbers: "+++ddd/dddd/ddddd/+++"
+	 */
+	public static STRUCTURED_COMMUNICATION_NUMBER: (RegExp | string)[] = [
+		"+",
+		"+",
+		"+",
+		/\d/,
+		/\d/,
+		/\d/,
+		"/",
+		/\d/,
+		/\d/,
+		/\d/,
+		/\d/,
+		"/",
+		/\d/,
+		/\d/,
+		/\d/,
+		/\d/,
+		/\d/,
+		"+",
+		"+",
+		"+"
+	];
+
+	/**
+	 * Mask for credit card numbers: "dddd-dddd-dddd-dddd"
+	 */
+	public static CREDITCARD_NUMBER: (RegExp | string)[] = [
+		/\d/,
+		/\d/,
+		/\d/,
+		/\d/,
+		"-",
+		/\d/,
+		/\d/,
+		/\d/,
+		/\d/,
+		"-",
+		/\d/,
+		/\d/,
+		/\d/,
+		/\d/,
+		"-",
+		/\d/,
+		/\d/,
+		/\d/,
+		/\d/
+	];
+}