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

ISSUES CLOSED: #680
NationalBankBelgium · Feb 14, 2019 · f430ad0 · f430ad0
1 parent 2e69669
commit f430ad0
Show file tree

Hide file tree

Showing 39 changed files with 7,897 additions and 6,785 deletions.
diff --git a/build-functions.sh b/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

diff --git a/build.sh b/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

diff --git a/docs/stark-ui/GETTING_STARTED.md b/docs/stark-ui/GETTING_STARTED.md
@@ -4,7 +4,7 @@ The recommended way to get started with **Stark** is to download the [starter](.
 
 ## Styling
 
-The starter comes with most things preconfigured and all SCSS files needed for stark-ui are imported by default via `~@nationalbankbelgium/stark-ui/assets/stark-ui-bundle`:
+The starter comes with most things preconfigured meaning that all SCSS files needed for Stark-UI are imported by default via `~@nationalbankbelgium/stark-ui/assets/stark-ui-bundle`:
 
 ```scss
 /*
@@ -16,39 +16,63 @@ IMPORTANT: Stark styles are provided as SCSS styles so they should be imported i
 @import "../app/app.component";
 ```
 
-You can also pick and choose which parts of the Stark styling/theming you want to use. Simply remove `@import "~@nationalbankbelgium/stark-ui/assets/stark-ui-bundle";` from `src/styles/styles.scss` and import only the desired files.
+You can also pick and choose which parts of the Stark-UI styling/theming you want to use.
+Simply remove `@import "~@nationalbankbelgium/stark-ui/assets/stark-ui-bundle";` from `src/styles/styles.scss` and import only the desired files.
 
 **IMPORTANT:** Import `base.scss` and `base-theme.scss` since these provide you with a clean basis and some basics for styling/theming your app.
 
 ```scss
 /*
-IMPORTANT: Stark styles are provided as SCSS styles so they should be imported in a SCSS file!
+IMPORTANT: Stark-UI styles are provided as SCSS styles so they should be imported in a SCSS file!
 */
 @import "theme";
-/* Stark styles */
+/* Stark-UI styles */
 @import "~@nationalbankbelgium/stark-ui/assets/styles/base";
 @import "~@nationalbankbelgium/stark-ui/assets/theming/base-theme";
-/* Stark component styles */
+/* Stark-UI component styles */
 @import "~@nationalbankbelgium/stark-ui/src/modules/app-logo/components/app-logo-theme";
 @import "~@nationalbankbelgium/stark-ui/src/modules/app-logo/components/app-logo.component";
 /* App */
 @import "../app/app.component";
 ```
 
-Or you can replace the Stark styling with your own:
+Or you can replace the Stark-UI styling with your own:
 
 ```scss
 /*
-IMPORTANT: Stark styles are provided as SCSS styles so they should be imported in a SCSS file!
+IMPORTANT: Stark-UI styles are provided as SCSS styles so they should be imported in a SCSS file!
 */
 @import "theme";
-/* Stark styles */
+/* Stark-UI styles */
 @import "~@nationalbankbelgium/stark-ui/assets/styles/base";
 @import "~@nationalbankbelgium/stark-ui/assets/theming/base-theme";
-/* Stark component styles */
+/* Stark-UI component styles */
 @import "~@nationalbankbelgium/stark-ui/src/modules/app-logo/components/app-logo-theme";
-/* Custom Stark component styles */
-@import "your-custom-stark-styles/app-logo.component";
+/* Custom Stark-UI component styles */
+@import "your-custom-stark-ui-styles/app-logo.component";
 /* App */
 @import "../app/app.component";
 ```
+
+## Typings
+
+Stark-UI also provides some typings for some libraries that are used internally by some components/directives. This are located under the `typings` folder.
+For this reason, you must add these typings to the `typeRoots` in the `tsconfig.json` of your app so that Angular compiler can build your application correctly:
+
+```text
+{
+  ...
+  "compilerOptions": {
+ 	...
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules/@nationalbankbelgium/stark-build/typings",
+      "./node_modules/@nationalbankbelgium/stark-ui/typings"  // typings folder from Stark-UI
+    ],
+    ...
+  },
+  ...
+}
+```
+
+**IMPORTANT:** This should always be done even if you don't use such types yourself. As mentioned above, this is used by Stark-UI internally.