├── .angular-cli.json ├── .codeclimate.yaml ├── .editorconfig ├── .gitignore ├── .npmignore ├── .travis.yml ├── .yo-rc.json ├── CHANGELOG.md ├── LICENSE.txt ├── README.md ├── changelog ├── changelog.config.js ├── convention.md └── templates │ ├── commit.hbs │ ├── footer.hbs │ ├── header.hbs │ └── template.hbs ├── e2e ├── app.e2e-spec.ts ├── app.po.ts └── tsconfig.e2e.json ├── examples ├── angular4 │ ├── .angular-cli.json │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── e2e │ │ ├── app.e2e-spec.ts │ │ ├── app.po.ts │ │ └── tsconfig.e2e.json │ ├── karma.conf.js │ ├── package.json │ ├── protractor.conf.js │ ├── src │ │ ├── app │ │ │ ├── app-routing.module.js │ │ │ ├── app-routing.module.ts │ │ │ ├── app.component.html │ │ │ ├── app.component.js │ │ │ ├── app.component.scss │ │ │ ├── app.component.spec.js │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ ├── app.module.js │ │ │ ├── app.module.ts │ │ │ ├── core │ │ │ │ ├── core.module.js │ │ │ │ ├── core.module.ts │ │ │ │ └── custom-transform-functions │ │ │ │ │ ├── mask-string.js │ │ │ │ │ └── mask-string.ts │ │ │ └── page │ │ │ │ ├── basic-usage │ │ │ │ ├── basic-usage.component.html │ │ │ │ ├── basic-usage.component.js │ │ │ │ ├── basic-usage.component.scss │ │ │ │ ├── basic-usage.component.spec.js │ │ │ │ ├── basic-usage.component.spec.ts │ │ │ │ └── basic-usage.component.ts │ │ │ │ └── built-in-functions │ │ │ │ ├── built-in-functions.component.html │ │ │ │ ├── built-in-functions.component.scss │ │ │ │ ├── built-in-functions.component.spec.ts │ │ │ │ └── built-in-functions.component.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.js │ │ │ ├── environment.prod.js │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.js │ │ ├── main.ts │ │ ├── polyfills.js │ │ ├── polyfills.ts │ │ ├── styles.scss │ │ ├── test.js │ │ ├── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.spec.json │ │ └── typings.d.ts │ ├── tsconfig.json │ └── tslint.json └── ionic3 │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── config.xml │ ├── ionic.config.json │ ├── package.json │ ├── resources │ ├── android │ │ ├── icon │ │ │ ├── drawable-hdpi-icon.png │ │ │ ├── drawable-ldpi-icon.png │ │ │ ├── drawable-mdpi-icon.png │ │ │ ├── drawable-xhdpi-icon.png │ │ │ ├── drawable-xxhdpi-icon.png │ │ │ └── drawable-xxxhdpi-icon.png │ │ └── splash │ │ │ ├── drawable-land-hdpi-screen.png │ │ │ ├── drawable-land-ldpi-screen.png │ │ │ ├── drawable-land-mdpi-screen.png │ │ │ ├── drawable-land-xhdpi-screen.png │ │ │ ├── drawable-land-xxhdpi-screen.png │ │ │ ├── drawable-land-xxxhdpi-screen.png │ │ │ ├── drawable-port-hdpi-screen.png │ │ │ ├── drawable-port-ldpi-screen.png │ │ │ ├── drawable-port-mdpi-screen.png │ │ │ ├── drawable-port-xhdpi-screen.png │ │ │ ├── drawable-port-xxhdpi-screen.png │ │ │ └── drawable-port-xxxhdpi-screen.png │ ├── icon.png │ ├── ios │ │ ├── icon │ │ │ ├── icon-40.png │ │ │ ├── icon-40@2x.png │ │ │ ├── icon-40@3x.png │ │ │ ├── icon-50.png │ │ │ ├── icon-50@2x.png │ │ │ ├── icon-60.png │ │ │ ├── icon-60@2x.png │ │ │ ├── icon-60@3x.png │ │ │ ├── icon-72.png │ │ │ ├── icon-72@2x.png │ │ │ ├── icon-76.png │ │ │ ├── icon-76@2x.png │ │ │ ├── icon-83.5@2x.png │ │ │ ├── icon-small.png │ │ │ ├── icon-small@2x.png │ │ │ ├── icon-small@3x.png │ │ │ ├── icon.png │ │ │ └── icon@2x.png │ │ └── splash │ │ │ ├── Default-568h@2x~iphone.png │ │ │ ├── Default-667h.png │ │ │ ├── Default-736h.png │ │ │ ├── Default-Landscape-736h.png │ │ │ ├── Default-Landscape@2x~ipad.png │ │ │ ├── Default-Landscape@~ipadpro.png │ │ │ ├── Default-Landscape~ipad.png │ │ │ ├── Default-Portrait@2x~ipad.png │ │ │ ├── Default-Portrait@~ipadpro.png │ │ │ ├── Default-Portrait~ipad.png │ │ │ ├── Default@2x~iphone.png │ │ │ └── Default~iphone.png │ └── splash.png │ ├── src │ ├── app │ │ ├── app.component.ts │ │ ├── app.html │ │ ├── app.module.ts │ │ ├── app.scss │ │ └── main.ts │ ├── assets │ │ └── icon │ │ │ └── favicon.ico │ ├── core │ │ ├── core.module.js │ │ ├── core.module.ts │ │ └── custom-transform-functions │ │ │ ├── mask-string.js │ │ │ └── mask-string.ts │ ├── index.html │ ├── manifest.json │ ├── pages │ │ └── home │ │ │ ├── home.html │ │ │ ├── home.scss │ │ │ └── home.ts │ ├── service-worker.js │ └── theme │ │ └── variables.scss │ ├── tsconfig.json │ └── tslint.json ├── gulpfile.js ├── karma.conf.js ├── package.json ├── protractor.conf.js ├── release-flow.md ├── resources └── demo.gif ├── scripts └── release.ps1 ├── src ├── formatter-parser.directive.ts ├── formatter-parser.injectionToken.ts ├── formatter-parser.service.ts ├── formatter-parser.ts ├── index.ts ├── input-context.service.ts ├── main.ts ├── package.json ├── polyfills.ts ├── static-vendors │ ├── README.md │ ├── adjustCaretPosition.ts │ ├── conformToMask.ts │ ├── constants.ts │ ├── index.ts │ └── utilities.ts ├── struct │ ├── formatter-parser-config.js │ ├── formatter-parser-config.ts │ ├── formatter-parser-function.js │ ├── formatter-parser-function.ts │ ├── formatter-parser-item-config.js │ ├── formatter-parser-item-config.ts │ ├── formatter-parser-result.js │ ├── formatter-parser-result.ts │ ├── input-context.interface.ts │ └── transform-functions │ │ └── conform-to-mask-config.ts ├── test.ts ├── tests │ ├── formatter-parser.directive.spec.ts │ ├── formatter-parser.service.spec.ts │ ├── formatter-parser.spec.ts │ └── index.spec.ts ├── tsconfig.es5.json └── tsconfig.spec.json ├── tools └── gulp │ └── inline-resources.js ├── tsconfig.json └── tslint.json /.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "a-f-p" 5 | }, 6 | "apps": [ 7 | { 8 | "root": "src", 9 | "outDir": "dist", 10 | "assets": [ 11 | "assets", 12 | "favicon.ico" 13 | ], 14 | "index": "index.html", 15 | "main": "main.ts", 16 | "polyfills": "polyfills.ts", 17 | "test": "test.ts", 18 | "tsconfig": "tsconfig.app.json", 19 | "testTsconfig": "tsconfig.spec.json", 20 | "prefix": "", 21 | "styles": [ 22 | "styles.css" 23 | ], 24 | "scripts": [], 25 | "environmentSource": "environments/environment.ts", 26 | "environments": { 27 | "dev": "environments/environment.ts", 28 | "prod": "environments/environment.prod.ts" 29 | } 30 | } 31 | ], 32 | "e2e": { 33 | "protractor": { 34 | "config": "./protractor.conf.js" 35 | } 36 | }, 37 | "lint": [ 38 | { 39 | "project": "src/tsconfig.app.json" 40 | }, 41 | { 42 | "project": "src/tsconfig.spec.json" 43 | }, 44 | { 45 | "project": "e2e/tsconfig.e2e.json" 46 | } 47 | ], 48 | "test": { 49 | "karma": { 50 | "config": "./karma.conf.js" 51 | }, 52 | "codeCoverage": { 53 | "exclude": ["./src/static-vendors/**/*"] 54 | } 55 | }, 56 | "defaults": { 57 | "styleExt": "css", 58 | "component": {} 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /.codeclimate.yaml: -------------------------------------------------------------------------------- 1 | engines: 2 | duplication: 3 | enabled: true 4 | config: 5 | languages: 6 | - javascript 7 | eslint: 8 | enabled: true 9 | fixme: 10 | enabled: true 11 | ratings: 12 | paths: 13 | - "**.css" 14 | - "**.ts" 15 | - "**.js" 16 | exclude_paths: [ 17 | "examples/**/*", 18 | "./examples/**/*", 19 | "examples/", 20 | "./examples/" 21 | ] 22 | 23 | parserOptions: 24 | sourceType: module 25 | 26 | env: 27 | amd: true 28 | browser: true 29 | es6: true 30 | 31 | # http://eslint.org/docs/rules/ 32 | rules: 33 | # Possible Errors 34 | no-await-in-loop: off 35 | no-cond-assign: error 36 | no-console: off 37 | no-constant-condition: error 38 | no-control-regex: error 39 | no-debugger: error 40 | no-dupe-args: error 41 | no-dupe-keys: error 42 | no-duplicate-case: error 43 | no-empty-character-class: error 44 | no-empty: error 45 | no-ex-assign: error 46 | no-extra-boolean-cast: error 47 | no-extra-parens: off 48 | no-extra-semi: error 49 | no-func-assign: error 50 | no-inner-declarations: 51 | - error 52 | - functions 53 | no-invalid-regexp: error 54 | no-irregular-whitespace: error 55 | no-negated-in-lhs: error 56 | no-obj-calls: error 57 | no-prototype-builtins: off 58 | no-regex-spaces: error 59 | no-sparse-arrays: error 60 | no-template-curly-in-string: off 61 | no-unexpected-multiline: error 62 | no-unreachable: error 63 | no-unsafe-finally: off 64 | no-unsafe-negation: off 65 | use-isnan: error 66 | valid-jsdoc: off 67 | valid-typeof: error 68 | 69 | # Best Practices 70 | accessor-pairs: error 71 | array-callback-return: off 72 | block-scoped-var: off 73 | class-methods-use-this: off 74 | complexity: 75 | - error 76 | - 6 77 | consistent-return: off 78 | curly: off 79 | default-case: off 80 | dot-location: off 81 | dot-notation: off 82 | eqeqeq: error 83 | guard-for-in: error 84 | no-alert: error 85 | no-caller: error 86 | no-case-declarations: error 87 | no-div-regex: error 88 | no-else-return: off 89 | no-empty-function: off 90 | no-empty-pattern: error 91 | no-eq-null: error 92 | no-eval: error 93 | no-extend-native: error 94 | no-extra-bind: error 95 | no-extra-label: off 96 | no-fallthrough: error 97 | no-floating-decimal: off 98 | no-global-assign: off 99 | no-implicit-coercion: off 100 | no-implied-eval: error 101 | no-invalid-this: off 102 | no-iterator: error 103 | no-labels: 104 | - error 105 | - allowLoop: true 106 | allowSwitch: true 107 | no-lone-blocks: error 108 | no-loop-func: error 109 | no-magic-number: off 110 | no-multi-spaces: off 111 | no-multi-str: off 112 | no-native-reassign: error 113 | no-new-func: error 114 | no-new-wrappers: error 115 | no-new: error 116 | no-octal-escape: error 117 | no-octal: error 118 | no-param-reassign: off 119 | no-proto: error 120 | no-redeclare: error 121 | no-restricted-properties: off 122 | no-return-assign: error 123 | no-return-await: off 124 | no-script-url: error 125 | no-self-assign: off 126 | no-self-compare: error 127 | no-sequences: off 128 | no-throw-literal: off 129 | no-unmodified-loop-condition: off 130 | no-unused-expressions: error 131 | no-unused-labels: off 132 | no-useless-call: error 133 | no-useless-concat: error 134 | no-useless-escape: off 135 | no-useless-return: off 136 | no-void: error 137 | no-warning-comments: off 138 | no-with: error 139 | prefer-promise-reject-errors: off 140 | radix: error 141 | require-await: off 142 | vars-on-top: off 143 | wrap-iife: error 144 | yoda: off 145 | 146 | # Strict 147 | strict: off 148 | 149 | # Variables 150 | init-declarations: off 151 | no-catch-shadow: error 152 | no-delete-var: error 153 | no-label-var: error 154 | no-restricted-globals: off 155 | no-shadow-restricted-names: error 156 | no-shadow: off 157 | no-undef-init: error 158 | no-undef: off 159 | no-undefined: off 160 | no-unused-vars: off 161 | no-use-before-define: off 162 | 163 | # Node.js and CommonJS 164 | callback-return: error 165 | global-require: error 166 | handle-callback-err: error 167 | no-mixed-requires: off 168 | no-new-require: off 169 | no-path-concat: error 170 | no-process-env: off 171 | no-process-exit: error 172 | no-restricted-modules: off 173 | no-sync: off 174 | 175 | # Stylistic Issues 176 | array-bracket-spacing: off 177 | block-spacing: off 178 | brace-style: off 179 | camelcase: off 180 | capitalized-comments: off 181 | comma-dangle: 182 | - error 183 | - never 184 | comma-spacing: off 185 | comma-style: off 186 | computed-property-spacing: off 187 | consistent-this: off 188 | eol-last: off 189 | func-call-spacing: off 190 | func-name-matching: off 191 | func-names: off 192 | func-style: off 193 | id-length: off 194 | id-match: off 195 | indent: off 196 | jsx-quotes: off 197 | key-spacing: off 198 | keyword-spacing: off 199 | line-comment-position: off 200 | linebreak-style: off 201 | lines-around-comment: off 202 | lines-around-directive: off 203 | max-depth: off 204 | max-len: off 205 | max-nested-callbacks: off 206 | max-params: off 207 | max-statements-per-line: off 208 | max-statements: 209 | - error 210 | - 30 211 | multiline-ternary: off 212 | new-cap: off 213 | new-parens: off 214 | newline-after-var: off 215 | newline-before-return: off 216 | newline-per-chained-call: off 217 | no-array-constructor: off 218 | no-bitwise: off 219 | no-continue: off 220 | no-inline-comments: off 221 | no-lonely-if: off 222 | no-mixed-operators: off 223 | no-mixed-spaces-and-tabs: off 224 | no-multi-assign: off 225 | no-multiple-empty-lines: off 226 | no-negated-condition: off 227 | no-nested-ternary: off 228 | no-new-object: off 229 | no-plusplus: off 230 | no-restricted-syntax: off 231 | no-spaced-func: off 232 | no-tabs: off 233 | no-ternary: off 234 | no-trailing-spaces: off 235 | no-underscore-dangle: off 236 | no-unneeded-ternary: off 237 | object-curly-newline: off 238 | object-curly-spacing: off 239 | object-property-newline: off 240 | one-var-declaration-per-line: off 241 | one-var: off 242 | operator-assignment: off 243 | operator-linebreak: off 244 | padded-blocks: off 245 | quote-props: off 246 | quotes: off 247 | require-jsdoc: off 248 | semi-spacing: off 249 | semi: off 250 | sort-keys: off 251 | sort-vars: off 252 | space-before-blocks: off 253 | space-before-function-paren: off 254 | space-in-parens: off 255 | space-infix-ops: off 256 | space-unary-ops: off 257 | spaced-comment: off 258 | template-tag-spacing: off 259 | unicode-bom: off 260 | wrap-regex: off 261 | 262 | # ECMAScript 6 263 | arrow-body-style: off 264 | arrow-parens: off 265 | arrow-spacing: off 266 | constructor-super: off 267 | generator-star-spacing: off 268 | no-class-assign: off 269 | no-confusing-arrow: off 270 | no-const-assign: off 271 | no-dupe-class-members: off 272 | no-duplicate-imports: off 273 | no-new-symbol: off 274 | no-restricted-imports: off 275 | no-this-before-super: off 276 | no-useless-computed-key: off 277 | no-useless-constructor: off 278 | no-useless-rename: off 279 | no-var: off 280 | object-shorthand: off 281 | prefer-arrow-callback: off 282 | prefer-const: off 283 | prefer-destructuring: off 284 | prefer-numeric-literals: off 285 | prefer-rest-params: off 286 | prefer-reflect: off 287 | prefer-spread: off 288 | prefer-template: off 289 | require-yield: off 290 | rest-spread-spacing: off 291 | sort-imports: off 292 | symbol-description: off 293 | template-curly-spacing: off 294 | yield-star-spacing: off 295 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Node 2 | node_modules/* 3 | npm-debug.log 4 | 5 | # TypeScript 6 | src/*.js 7 | src/*.map 8 | src/*.d.ts 9 | 10 | # JetBrains 11 | .idea 12 | .project 13 | .settings 14 | .idea/* 15 | *.iml 16 | 17 | # VS Code 18 | .vscode/* 19 | 20 | # Windows 21 | Thumbs.db 22 | Desktop.ini 23 | 24 | # Mac 25 | .DS_Store 26 | **/.DS_Store 27 | 28 | # Ngc generated files 29 | **/*.ngfactory.ts 30 | 31 | # Build files 32 | dist/* 33 | 34 | # Karma transform 35 | init-test-bed.spec.js 36 | src/**/*.js 37 | 38 | # coverage 39 | coverage 40 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Node 2 | node_modules/* 3 | npm-debug.log 4 | docs/* 5 | # DO NOT IGNORE TYPESCRIPT FILES FOR NPM 6 | # TypeScript 7 | # *.js 8 | # *.map 9 | # *.d.ts 10 | 11 | # JetBrains 12 | .idea 13 | .project 14 | .settings 15 | .idea/* 16 | *.iml 17 | 18 | # VS Code 19 | .vscode/* 20 | 21 | # Windows 22 | Thumbs.db 23 | Desktop.ini 24 | 25 | # Mac 26 | .DS_Store 27 | **/.DS_Store 28 | 29 | # Ngc generated files 30 | **/*.ngfactory.ts 31 | 32 | # Library files 33 | src/* 34 | build/* 35 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: false 3 | node_js: 4 | - '6.11.1' 5 | 6 | cache: 7 | directories: 8 | - ./node_modules 9 | 10 | install: 11 | - npm i 12 | 13 | before_script: 14 | 15 | script: 16 | - npm run coverage 17 | 18 | after_success: 19 | - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js 20 | - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js 21 | - rm -rf ./coverage 22 | -------------------------------------------------------------------------------- /.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "generator-angular2-library": { 3 | "promptValues": { 4 | "gitRepositoryUrl": "https://github.com/username/repo" 5 | } 6 | } 7 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 2 | # [0.0.0](https://github.com/BioPhoton/angular-formatter-parser/compare/0.2.0...v0.0.0) (2017-07-19) 3 | 4 | 5 | ### Bug Fixes 6 | 7 | * **module versions:** updated module version ([84c65d8](https://github.com/BioPhoton/angular-formatter-parser/commit/84c65d8)) 8 | 9 | 10 | 11 | 12 | # [0.0.0](https://github.com/BioPhoton/angular-formatter-parser/compare/0.1.15...v0.0.0) (2017-07-17) 13 | 14 | 15 | ### Bug Fixes 16 | 17 | * **built in transforms:** moved conformToMask to vendors ([412fde3](https://github.com/BioPhoton/angular-formatter-parser/commit/412fde3)) 18 | 19 | 20 | ### Features 21 | 22 | * **cursor position:** implemented exchangeable service for cursor focus handling ([eec3300](https://github.com/BioPhoton/angular-formatter-parser/commit/eec3300)) 23 | * **cursor position:** implemented exchangeable service for cursor focus handling ([a4d7871](https://github.com/BioPhoton/angular-formatter-parser/commit/a4d7871)) 24 | 25 | 26 | 27 | 28 | # [0.0.0](https://github.com/BioPhoton/angular-formatter-parser/compare/0.1.14...v0.0.0) (2017-07-07) 29 | 30 | 31 | ### Bug Fixes 32 | 33 | * **default formatter:** implement built in masking function ([c3313b4](https://github.com/BioPhoton/angular-formatter-parser/commit/c3313b4)) 34 | 35 | 36 | 37 | 38 | ## [0.1.10](https://github.com/BioPhoton/angular-formatter-parser/compare/0.1.13...v0.1.10) (2017-06-26) 39 | 40 | 41 | ### Bug Fixes 42 | 43 | * **added conformToMask:** added new built in transform conformToMask ([5dba567](https://github.com/BioPhoton/angular-formatter-parser/commit/5dba567)) 44 | * **adopt conformToMask:** adopt confirmToMask ([d1747b6](https://github.com/BioPhoton/angular-formatter-parser/commit/d1747b6)) 45 | 46 | 47 | 48 | 49 | ## [0.1.10](https://github.com/BioPhoton/angular-formatter-parser/compare/0.1.12...v0.1.10) (2017-06-25) 50 | 51 | 52 | ### Bug Fixes 53 | 54 | * **release comments:** place right version bump type in comment ([50fe212](https://github.com/BioPhoton/angular-formatter-parser/commit/50fe212)) 55 | * **release workflow:** add npm release to script ([3de56ce](https://github.com/BioPhoton/angular-formatter-parser/commit/3de56ce)) 56 | 57 | 58 | 59 | 60 | ## [0.1.10](https://github.com/BioPhoton/angular-formatter-parser/compare/v0.1.11...v0.1.10) (2017-06-25) 61 | 62 | 63 | 64 | 65 | ## [0.1.10](https://github.com/BioPhoton/angular-formatter-parser/compare/v0.1.11...v0.1.10) (2017-06-25) 66 | 67 | 68 | 69 | 70 | ## [0.1.10](https://github.com/BioPhoton/angular-formatter-parser/compare/0.0.10...v0.1.10) (2017-06-25) 71 | 72 | 73 | 74 | 75 | ## [0.1.10](https://github.com/BioPhoton/angular-formatter-parser/compare/0.1.9...v0.1.10) (2017-06-25) 76 | 77 | 78 | 79 | 80 | ## [0.1.9](https://github.com/BioPhoton/angular-formatter-parser/compare/0.1.8...v0.1.9) (2017-06-20) 81 | 82 | 83 | ### Bug Fixes 84 | 85 | * **license:** added license ([803c842](https://github.com/BioPhoton/angular-formatter-parser/commit/803c842)) 86 | 87 | 88 | 89 | 90 | ## [0.1.8](https://github.com/BioPhoton/angular-formatter-parser/compare/0.1.7...0.1.8) (2017-06-20) 91 | 92 | 93 | ### Bug Fixes 94 | 95 | * **ReactiveForms:** implement onTouch and make FormControl optional ([a254e29](https://github.com/BioPhoton/angular-formatter-parser/commit/a254e29)) 96 | 97 | 98 | 99 | 100 | ## [0.1.7](https://github.com/BioPhoton/angular-formatter-parser/compare/0.1.6...0.1.7) (2017-06-20) 101 | 102 | 103 | ### Bug Fixes 104 | 105 | * **default transform functions:** fixed transform result and typing, also fixed export of token ([ba425f9](https://github.com/BioPhoton/angular-formatter-parser/commit/ba425f9)) 106 | 107 | 108 | 109 | 110 | ## [0.1.6](https://github.com/BioPhoton/angular-formatter-parser/compare/0.1.4...0.1.6) (2017-06-20) 111 | 112 | 113 | ### Bug Fixes 114 | 115 | * **typing:** fixed wrong type in formatter-parser-config ([716f877](https://github.com/BioPhoton/angular-formatter-parser/commit/716f877)) 116 | 117 | 118 | 119 | 120 | ## [0.1.4](https://github.com/BioPhoton/angular-formatter-parser/compare/0.1.3...0.1.4) (2017-06-18) 121 | 122 | 123 | 124 | 125 | ## [0.1.3](https://github.com/BioPhoton/angular-formatter-parser/compare/0.1.2...0.1.3) (2017-06-18) 126 | 127 | 128 | ### Bug Fixes 129 | 130 | * **release workflow:** order ([37e34c0](https://github.com/BioPhoton/angular-formatter-parser/commit/37e34c0)) 131 | 132 | 133 | 134 | 135 | ## [0.1.2](https://github.com/BioPhoton/angular-formatter-parser/compare/v0.0.0-alpha.5...0.1.2) (2017-06-18) 136 | 137 | 138 | ### Bug Fixes 139 | 140 | * **release flow:** wip ([e770474](https://github.com/BioPhoton/angular-formatter-parser/commit/e770474)) 141 | * **reset versions:** experiment with release workflow ([66fb805](https://github.com/BioPhoton/angular-formatter-parser/commit/66fb805)) 142 | 143 | 144 | 145 | 146 | # [0.0.0-alpha.5](https://github.com/BioPhoton/angular-formatter-parser/compare/v0.0.1-0...v0.0.0-alpha.5) (2017-06-18) 147 | 148 | 149 | 150 | 151 | ## [0.0.1-0](https://github.com/BioPhoton/angular-formatter-parser/compare/v0.0.1...v0.0.1-0) (2017-06-18) 152 | 153 | 154 | 155 | 156 | ## [0.0.1](https://github.com/BioPhoton/angular-formatter-parser/compare/0.0.0-alpha.1...v0.0.1) (2017-06-18) 157 | 158 | 159 | ### Bug Fixes 160 | 161 | * **npm:** added task to scripts ([0d6b888](https://github.com/BioPhoton/angular-formatter-parser/commit/0d6b888)) 162 | 163 | 164 | 165 | 166 | # [0.0.0-alpha.1](https://github.com/BioPhoton/angular-formatter-parser/compare/b773b16...0.0.0-alpha.1) (2017-06-18) 167 | 168 | 169 | ### Bug Fixes 170 | 171 | * **linting:** fix lint error ([b773b16](https://github.com/BioPhoton/angular-formatter-parser/commit/b773b16)) 172 | 173 | 174 | 175 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Michael Hladky 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angular-formatter-parser 2 | 3 | #### Angular Formatter Parser - The AngularJS Port 4 | This library provides an option to hook into the value flow of inputs and other "editable" html elements. 5 | Easy to implement and elegant to use it also provides the possibility to register custom transform functions over an InjectionToken. 6 | 7 | ![License](https://img.shields.io/npm/l/angular-formatter-parser.svg) 8 | [![NPM Version](https://img.shields.io/npm/v/angular-formatter-parser.svg)](https://www.npmjs.com/package/angular-formatter-parser) 9 | [![Build Status](https://travis-ci.org/BioPhoton/angular-formatter-parser.svg?branch=master)](https://travis-ci.org/BioPhoton/angular-formatter-parser) 10 | [![Coverage Status](https://coveralls.io/repos/github/BioPhoton/angular-formatter-parser/badge.svg?branch=master)](https://coveralls.io/github/BioPhoton/angular-formatter-parser?branch=master) 11 | 12 | ## Demo 13 | 14 | - [x] [angular4 demo with ng-cli](https://github.com/BioPhoton/angular-formatter-parser/tree/master/examples/angular4) 15 | - [x] [plunkr demo](https://embed.plnkr.co/7xFXTccR1hfLGbPBTjai/) 16 | 17 | 18 | ![Angular-Formatter-Psrser](https://raw.githubusercontent.com/BioPhoton/angular-formatter-parser/master/resources/demo.gif) 19 | 20 | ## Quick code example 21 | 22 | ``` html 23 | // app.component.html 24 | 25 | 26 | ``` 27 | 28 | 29 | ## Basic Usage: 30 | 31 | #### Implement Library 32 | 33 | ``` bash 34 | $ npm install angular-formatter-parser --save 35 | ``` 36 | 37 | ``` typescript 38 | // app.module.ts 39 | ... 40 | // IMPORT YOUR LIBRARY 41 | import { FormatterParserModule } from 'angular-formatter-parser'; 42 | 43 | @NgModule({ 44 | imports: [ 45 | ... 46 | FormatterParserModule.forRoot() 47 | ] 48 | ... 49 | }) 50 | export class AppModule { } 51 | 52 | ``` 53 | 54 | 55 | #### Create formatterParser config object 56 | 57 | ``` typescript 58 | // app.component.ts 59 | ... 60 | import { IFormatterParserConfig } from 'angular-formatter-parser/struct/formatter-parser-config'; 61 | 62 | @Component({ 63 | selector: 'app-basic-usage', 64 | templateUrl: './basic-usage.component.html', 65 | styleUrls: ['./basic-usage.component.scss'] 66 | }) 67 | export class BasicUsageComponent { 68 | 69 | fPConfig: IFormatterParserConfig = { 70 | formatterParser:[ 71 | { name: 'toCapitalized' } 72 | ] 73 | } 74 | 75 | constructor() { } 76 | 77 | } 78 | 79 | ``` 80 | 81 | 82 | #### Use directive with config object 83 | 84 | ``` html 85 | // app.component.html 86 | 87 | 88 | ``` 89 | 90 | 91 | ## Usage with Reactive Forms 92 | 93 | #### Create FormGroup 94 | 95 | ``` typescript 96 | // app.component.ts 97 | 98 | ... 99 | export class BasicUsageComponent { 100 | 101 | fPConfig: IFormatterParserConfig = { 102 | ... 103 | } 104 | 105 | formGroup: FormGroup; 106 | 107 | constructor(private fb: FormBuilder) { 108 | this.basicFormGroup = this.fb.group({ name: [] }); 109 | } 110 | 111 | } 112 | ``` 113 | 114 | 115 | #### Set formGroup and formControlName 116 | 117 | ``` html 118 | // app.component.html 119 |
120 | 121 | {{formGroup.get('name').value}} 122 |
123 | ``` 124 | 125 | 126 | #### Specify the target (transform the value of the view or the model) 127 | 128 | ``` typescript 129 | // app.component.ts 130 | ... 131 | export class BasicUsageComponent { 132 | 133 | fPConfig: IFormatterParserConfig = { 134 | formatterParser:[ 135 | //0 for view, 1 for model, 2 or nothing for both 136 | { name: 'toCapitalized', target: 0 } 137 | ] 138 | } 139 | 140 | } 141 | 142 | ``` 143 | 144 | 145 | #### Use multiple transform functions 146 | 147 | ``` typescript 148 | // app.component.ts 149 | ... 150 | fPConfig: IFormatterParserConfig = { 151 | formatterParser:[ 152 | { name: 'toCapitalized', target: 0}, 153 | { name: 'replaceString', params: [/ /g, ''], target: 1 } 154 | ] 155 | } 156 | ... 157 | ``` 158 | 159 | ## Use custom transform function 160 | 161 | #### Create custom function 162 | 163 | ``` typescript 164 | //add-questionmark-transform.ts 165 | import { IFormatterParserFn } from 'angular-formatter-parser/struct/formatter-parser-function'; 166 | 167 | export function addQuestionmark(value:any): IFormatterParserResult { 168 | const transformadValue = value; 169 | const result:IFormatterParserResult = { 170 | name: "addQuestionmark", 171 | result : transformadValue+'?', 172 | previous: value 173 | }; 174 | 175 | return result; 176 | } 177 | 178 | ``` 179 | 180 | #### Provide the function over the FORMATTER_PARSER token 181 | 182 | ``` typescript 183 | // app.module.ts 184 | 185 | ... 186 | // IMPORT FORMATTER_PARSER 187 | import { FORMATTER_PARSER, FormatterParserModule } from 'angular-formatter-parser'; 188 | ... 189 | 190 | @NgModule({ 191 | ... 192 | providers: [ 193 | { provide: FORMATTER_PARSER, useValue: addQuestionmark, multi: true } 194 | ] 195 | ... 196 | }) 197 | export class AppModule { 198 | 199 | } 200 | 201 | ``` 202 | 203 | #### Use custom transform function in config object 204 | 205 | ``` typescript 206 | // app.component.ts 207 | ... 208 | export class BasicUsageComponent { 209 | 210 | fPConfig: IFormatterParserConfig = { 211 | formatterParser:[ 212 | { name: 'addQuestionMark' } 213 | ] 214 | } 215 | 216 | } 217 | 218 | ``` 219 | 220 | # Built in transform functions 221 | 222 | 223 | # What it is 224 | The angular FormatterParser library in a port of the Angular 1.x `ngModel.$formatter` and `ngModel.$parser` implementation. 225 | 226 | It is implemented as an configurable directive which mimics the angular reactive-forms validation. 227 | 228 | Like the `Validators` service provides a set default validation functions there is a `FormatterParser` service that provides a set of default transform functions. 229 | 230 | When you custom a custom validator you implement the `ValidatorFn` on your custom validation function. 231 | Then you implement `ControlValueAccessor` and use the `NG_VALIDATORS` token to hook into the validation section and provide your custom function as a validator. 232 | 233 | Same with transform functions with a little more options. As you know in angular1 we have `$parser` and `$formatter`. 234 | `$parser`, the array of transform functions that are called when the model changes and updates the `HtmlInputElement` value. 235 | And `$formatter`, the array of transform functions that are called when the `HtmlInputElement` fires it's input event with changes and updates the model. 236 | 237 | We hook into the two directions by using the `ControlValueAccessor` for the `$formatter` direction, and the `@HostListener('input')` to hook into the `$parser` direction. 238 | 239 | To register our transform functions we use the `FORMATTER_PARSER` token to provide our functions 240 | 241 | To apply validators to a `FormControl` you setup an array of validator functions, default or custom and provide it under the validators key in the `FormControl` constructor parmas. 242 | 243 | To apply transform functions to a `FormControl` use use the `formatterParser` directive which also binds a config array. 244 | But instead of providing an array of validator functions use just provide an array of strings that are the name of the transform functions. the directive automatically recogizes the strings and finds the related transform function. 245 | Your custom transform functions can be registered under `FORMATTER_PARSER`, similar as you would with `NG_VALIDATORS`. 246 | 247 | 248 | # License 249 | 250 | MIT © [Michael Hladky](mailto:michael@hladky.at) 251 | 252 | Copyright 2017 [Michael Hladky](mailto:michael@hladky.at). All Rights Reserved. 253 | Use of this source code is governed by an MIT-style license that 254 | can be found in the LICENSE file at [angular-formatter-parser](https://github.com/BioPhoton/angular-formatter-parser/blob/master/LICENSE.txt) 255 | -------------------------------------------------------------------------------- /changelog/changelog.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var compareFunc = require('compare-func'); 3 | var Q = require('q'); 4 | var readFile = Q.denodeify(require('fs').readFile); 5 | var resolve = require('path').resolve; 6 | var path = require('path'); 7 | var pkgJson = {}; 8 | var gufg = require('github-url-from-git'); 9 | try { 10 | pkgJson = require(path.resolve( 11 | process.cwd(), 12 | './package.json' 13 | )); 14 | } catch (err) { 15 | console.error('no root package.json found'); 16 | } 17 | 18 | var parserOpts = { 19 | headerPattern: /^(\w*)(?:\((.*)\))?\: (.*)$/, 20 | headerCorrespondence: [ 21 | 'type', 22 | 'scope', 23 | 'subject' 24 | ], 25 | noteKeywords: ['BREAKING CHANGE', 'BREAKING CHANGES'], 26 | revertPattern: /^revert:\s([\s\S]*?)\s*This reverts commit (\w*)\./, 27 | revertCorrespondence: ['header', 'hash'] 28 | }; 29 | 30 | function issueUrl() { 31 | if (pkgJson.repository && pkgJson.repository.url && ~pkgJson.repository.url.indexOf('github.com')) { 32 | var gitUrl = gufg(pkgJson.repository.url); 33 | 34 | if (gitUrl) { 35 | return gitUrl + '/issues/'; 36 | } 37 | } 38 | } 39 | 40 | var writerOpts = { 41 | transform: function(commit) { 42 | var discard = true; 43 | var issues = []; 44 | 45 | commit.notes.forEach(function(note) { 46 | note.title = 'BREAKING CHANGES'; 47 | discard = false; 48 | }); 49 | 50 | if (commit.type === 'feat') { 51 | commit.type = 'Features'; 52 | } else if (commit.type === 'fix') { 53 | commit.type = 'Bug Fixes'; 54 | } else if (commit.type === 'perf') { 55 | commit.type = 'Performance Improvements'; 56 | } else if (commit.type === 'revert') { 57 | commit.type = 'Reverts'; 58 | } else if (discard) { 59 | return; 60 | } else if (commit.type === 'docs') { 61 | commit.type = 'Documentation'; 62 | } else if (commit.type === 'style') { 63 | commit.type = 'Styles'; 64 | } else if (commit.type === 'refactor') { 65 | commit.type = 'Code Refactoring'; 66 | } else if (commit.type === 'test') { 67 | commit.type = 'Tests'; 68 | } else if (commit.type === 'chore') { 69 | commit.type = 'Chores'; 70 | } 71 | 72 | if (commit.scope === '*') { 73 | commit.scope = ''; 74 | } 75 | 76 | if (typeof commit.hash === 'string') { 77 | commit.hash = commit.hash.substring(0, 7); 78 | } 79 | 80 | if (typeof commit.subject === 'string') { 81 | var url = issueUrl(); 82 | if (url) { 83 | // GitHub issue URLs. 84 | commit.subject = commit.subject.replace(/#([0-9]+)/g, function(_, issue) { 85 | issues.push(issue); 86 | return '[#' + issue + '](' + url + issue + ')'; 87 | }); 88 | } 89 | // GitHub user URLs. 90 | commit.subject = commit.subject.replace(/@([a-zA-Z0-9_]+)/g, '[@$1](https://github.com/$1)'); 91 | commit.subject = commit.subject; 92 | } 93 | 94 | // remove references that already appear in the subject 95 | commit.references = commit.references.filter(function(reference) { 96 | if (issues.indexOf(reference.issue) === -1) { 97 | return true; 98 | } 99 | 100 | return false; 101 | }); 102 | 103 | return commit; 104 | }, 105 | groupBy: 'type', 106 | commitGroupsSort: 'title', 107 | commitsSort: ['scope', 'subject'], 108 | noteGroupsSort: 'title', 109 | notesSort: compareFunc 110 | }; 111 | 112 | module.exports = Q.all([ 113 | readFile(resolve(__dirname, 'templates/template.hbs'), 'utf-8'), 114 | readFile(resolve(__dirname, 'templates/header.hbs'), 'utf-8'), 115 | readFile(resolve(__dirname, 'templates/commit.hbs'), 'utf-8'), 116 | readFile(resolve(__dirname, 'templates/footer.hbs'), 'utf-8') 117 | ]) 118 | .spread(function(template, header, commit, footer) { 119 | 120 | writerOpts.mainTemplate = template; 121 | writerOpts.headerPartial = header; 122 | writerOpts.commitPartial = commit; 123 | writerOpts.footerPartial = footer; 124 | 125 | return { 126 | parserOpts: parserOpts, 127 | writerOpts: writerOpts 128 | }; 129 | }); -------------------------------------------------------------------------------- /changelog/convention.md: -------------------------------------------------------------------------------- 1 | #### Examples 2 | 3 | Appears under "Features" header, pencil subheader: 4 | 5 | ``` 6 | feat(pencil): add 'graphiteWidth' option 7 | ``` 8 | 9 | Appears under "Bug Fixes" header, graphite subheader, with a link to issue #28: 10 | 11 | ``` 12 | fix(graphite): stop graphite breaking when width < 0.1 13 | 14 | Closes #28 15 | ``` 16 | 17 | Appears under "Performance Improvements" header, and under "Breaking Changes" with the breaking change explanation: 18 | 19 | ``` 20 | perf(pencil): remove graphiteWidth option 21 | 22 | BREAKING CHANGE: The graphiteWidth option has been removed. The default graphite width of 10mm is always used for performance reason. 23 | ``` 24 | 25 | The following commit and commit `667ecc1` do not appear in the changelog if they are under the same release. If not, the revert commit appears under the "Reverts" header. 26 | 27 | ``` 28 | revert: feat(pencil): add 'graphiteWidth' option 29 | 30 | This reverts commit 667ecc1654a317a13331b17617d973392f415f02. 31 | ``` 32 | 33 | ### Commit Message Format 34 | 35 | A commit message consists of a **header**, **body** and **footer**. The header has a **type**, **scope** and **subject**: 36 | 37 | ``` 38 | (): 39 | 40 | 41 | 42 |