From b7074090c18b1ecedd094bf73c5ad44415ad6b94 Mon Sep 17 00:00:00 2001 From: Volodymyr O Date: Wed, 22 Nov 2017 04:27:25 +0200 Subject: [PATCH] chore: refactoring ngx-editor (#11) --- TREE.md | 111 ++++++++ package-lock.json | 241 +++++++----------- package.json | 5 +- src/app/app.component.html | 2 +- src/app/app.component.scss | 6 +- .../services/command-executor.service.spec.ts | 15 ++ .../services/command-executor.service.ts | 66 +++++ .../common/services/message.service.spec.ts | 15 ++ .../common/services/message.service.ts | 30 +++ .../ngx-editor-message.component.html | 3 + .../ngx-editor-message.component.scss | 9 + .../ngx-editor-message.component.spec.ts | 27 ++ .../ngx-editor-message.component.ts | 22 ++ src/app/ngx-editor/ngx-editor.component.html | 126 +-------- src/app/ngx-editor/ngx-editor.component.scss | 67 +---- .../ngx-editor/ngx-editor.component.spec.ts | 11 +- src/app/ngx-editor/ngx-editor.component.ts | 116 ++------- src/app/ngx-editor/ngx-editor.module.ts | 13 +- .../ngx-grippie/ngx-grippie.component.html | 2 +- .../ngx-grippie/ngx-grippie.component.scss | 3 +- .../ngx-grippie/ngx-grippie.component.spec.ts | 9 +- .../ngx-grippie/ngx-grippie.component.ts | 8 +- .../{ => ngx-toolbar}/ngx-editor.utils.ts | 0 .../ngx-toolbar/ngx-toolbar.component.html | 116 +++++++++ .../ngx-toolbar/ngx-toolbar.component.scss | 55 ++++ .../ngx-toolbar/ngx-toolbar.component.spec.ts | 28 ++ .../ngx-toolbar/ngx-toolbar.component.ts | 28 ++ tsconfig.json | 2 +- yarn.lock | 128 ++++------ 29 files changed, 749 insertions(+), 515 deletions(-) create mode 100644 TREE.md create mode 100644 src/app/ngx-editor/common/services/command-executor.service.spec.ts create mode 100644 src/app/ngx-editor/common/services/command-executor.service.ts create mode 100644 src/app/ngx-editor/common/services/message.service.spec.ts create mode 100644 src/app/ngx-editor/common/services/message.service.ts create mode 100644 src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.html create mode 100644 src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.scss create mode 100644 src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.spec.ts create mode 100644 src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.ts rename src/app/ngx-editor/{ => ngx-toolbar}/ngx-editor.utils.ts (100%) create mode 100644 src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.html create mode 100644 src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.scss create mode 100644 src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.spec.ts create mode 100644 src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.ts diff --git a/TREE.md b/TREE.md new file mode 100644 index 00000000..f7acd3a2 --- /dev/null +++ b/TREE.md @@ -0,0 +1,111 @@ +``` +. +├── e2e +│   ├── app.e2e-spec.ts +│   ├── app.po.ts +│   └── tsconfig.e2e.json +├── scripts +│   ├── build.sh +│   └── release.sh +├── src +│   ├── app +│   │   ├── ngx-editor +│   │   │   ├── common +│   │   │   │   └── services +│   │   │   │   ├── command-executor.service.spec.ts +│   │   │   │   ├── command-executor.service.ts +│   │   │   │   ├── message.service.spec.ts +│   │   │   │   └── message.service.ts +│   │   │   ├── ngx-editor-message +│   │   │   │   ├── ngx-editor-message.component.html +│   │   │   │   ├── ngx-editor-message.component.scss +│   │   │   │   ├── ngx-editor-message.component.spec.ts +│   │   │   │   └── ngx-editor-message.component.ts +│   │   │   ├── ngx-grippie +│   │   │   │   ├── ngx-grippie.component.html +│   │   │   │   ├── ngx-grippie.component.scss +│   │   │   │   ├── ngx-grippie.component.spec.ts +│   │   │   │   └── ngx-grippie.component.ts +│   │   │   ├── ngx-toolbar +│   │   │   │   ├── ngx-editor.utils.ts +│   │   │   │   ├── ngx-toolbar.component.html +│   │   │   │   ├── ngx-toolbar.component.scss +│   │   │   │   ├── ngx-toolbar.component.spec.ts +│   │   │   │   └── ngx-toolbar.component.ts +│   │   │   ├── ngx-editor.component.html +│   │   │   ├── ngx-editor.component.scss +│   │   │   ├── ngx-editor.component.spec.ts +│   │   │   ├── ngx-editor.component.ts +│   │   │   ├── ngx-editor.defaults.ts +│   │   │   └── ngx-editor.module.ts +│   │   ├── app.component.html +│   │   ├── app.component.scss +│   │   ├── app.component.spec.ts +│   │   ├── app.component.ts +│   │   ├── app.module.ts +│   │   ├── app.service.spec.ts +│   │   └── app.service.ts +│   ├── assets +│   │   └── icons +│   │   ├── ngx-editor-opt1 +│   │   │   ├── ang_edit1_128.ico +│   │   │   ├── ang_edit1_128.png +│   │   │   ├── ang_edit1_256.ico +│   │   │   ├── ang_edit1_256.png +│   │   │   ├── ang_edit1_32.png +│   │   │   ├── ang_edit1_64.ico +│   │   │   ├── ang_edit1_64.png +│   │   │   ├── ang_editv1_32_128.ico +│   │   │   ├── ang_editv1_32_256.ico +│   │   │   ├── ngx-editor1_64x64.ico +│   │   │   ├── ngx-editor1.gvdesign +│   │   │   ├── ngx-editor1.png +│   │   │   └── ngx-editor1.svg +│   │   ├── ngx-editor-opt2 +│   │   │   ├── ang_editv4_128.ico +│   │   │   ├── ang_editv4_128.png +│   │   │   ├── ang_editv4_256.ico +│   │   │   ├── ang_editv4_256.png +│   │   │   ├── ang_editv4_32_128.ico +│   │   │   ├── ang_editv4_32_256.ico +│   │   │   ├── ang_editv4_32.ico +│   │   │   ├── ang_editv4_32.png +│   │   │   ├── ang_editv4_64.ico +│   │   │   ├── ang_editv4_64.png +│   │   │   ├── ngx-editor2_64x64.ico +│   │   │   ├── ngx-editor2.gvdesign +│   │   │   ├── ngx-editor2.png +│   │   │   └── ngx-editor2.svg +│   │   ├── ngx-editor.png +│   │   └── ngx-editor.svg +│   ├── environments +│   │   ├── environment.prod.ts +│   │   └── environment.ts +│   ├── favicon.ico +│   ├── index.html +│   ├── main.ts +│   ├── polyfills.ts +│   ├── styles.scss +│   ├── test.ts +│   ├── tsconfig.app.json +│   ├── tsconfig.spec.json +│   └── typings.d.ts +├── .vscode +│   └── settings.json +├── .angular-cli.json +├── .editorconfig +├── karma.conf.js +├── LICENSE +├── ng-package.json +├── package.json +├── package-lock.json +├── protractor.conf.js +├── public_api.ts +├── .pullapprove.yml +├── README.md +├── .travis.yml +├── TREE.md +├── tsconfig.json +├── tslint.json +└── yarn.lock +``` diff --git a/package-lock.json b/package-lock.json index d1b63491..00627db5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,15 +46,15 @@ } }, "@angular/cli": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.5.0.tgz", - "integrity": "sha512-nCXvqNCdi+8aOU2v6EABZsMg5bB7iM+wfaoWKnu9M5fOW2Rm+7/3Y1gDQKyFkgXCzXdy3J/xpfmwT0gjmjlvIA==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.5.3.tgz", + "integrity": "sha512-PuMcYmnoPP/RqCVIguiJrkc+vek9eVPi+iQ+UE3W/JTDQhZsAkm4qm8zLYR/Z2bp1a5xHuP+PFMtAQysPFag+Q==", "dev": true, "requires": { "@angular-devkit/build-optimizer": "0.0.32", "@angular-devkit/schematics": "0.0.35", "@ngtools/json-schema": "1.1.0", - "@ngtools/webpack": "1.8.0", + "@ngtools/webpack": "1.8.3", "@schematics/angular": "0.1.0", "autoprefixer": "6.7.7", "chalk": "2.2.2", @@ -79,14 +79,15 @@ "license-webpack-plugin": "1.1.1", "lodash": "4.17.4", "memory-fs": "0.4.1", + "minimatch": "3.0.4", "node-modules-path": "1.0.1", "node-sass": "4.5.3", "nopt": "4.0.1", "opn": "5.1.0", "portfinder": "1.0.13", "postcss-custom-properties": "6.2.0", - "postcss-loader": "1.3.3", - "postcss-url": "5.1.2", + "postcss-loader": "2.0.8", + "postcss-url": "7.2.1", "raw-loader": "0.5.1", "resolve": "1.5.0", "rxjs": "5.5.2", @@ -108,6 +109,78 @@ "webpack-sources": "1.0.1", "webpack-subresource-integrity": "1.0.1", "zone.js": "0.8.18" + }, + "dependencies": { + "@ngtools/webpack": { + "version": "1.8.3", + "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-1.8.3.tgz", + "integrity": "sha512-Yf6leN/IuBhhZ93qq3NRJL1NlAtn1NsowRagZ2y5gpIw64wheuaHNg52EB+HiyQ23Mejc811gKYCbs1KpcaYVw==", + "dev": true, + "requires": { + "chalk": "2.2.2", + "enhanced-resolve": "3.4.1", + "loader-utils": "1.1.0", + "magic-string": "0.22.4", + "semver": "5.4.1", + "source-map": "0.5.7", + "tree-kill": "1.2.0" + } + }, + "postcss": { + "version": "6.0.14", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.14.tgz", + "integrity": "sha512-NJ1z0f+1offCgadPhz+DvGm5Mkci+mmV5BqD13S992o0Xk9eElxUfPPF+t2ksH5R/17gz4xVK8KWocUQ5o3Rog==", + "dev": true, + "requires": { + "chalk": "2.3.0", + "source-map": "0.6.1", + "supports-color": "4.5.0" + }, + "dependencies": { + "chalk": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz", + "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==", + "dev": true, + "requires": { + "ansi-styles": "3.2.0", + "escape-string-regexp": "1.0.5", + "supports-color": "4.5.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, + "postcss-loader": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.0.8.tgz", + "integrity": "sha512-KtXBiQ/r/WYW8LxTSJK7h8wLqvCMSub/BqmRnud/Mu8RzwflW9cmXxwsMwbn15TNv287Hcufdb3ZSs7xHKnG8Q==", + "dev": true, + "requires": { + "loader-utils": "1.1.0", + "postcss": "6.0.14", + "postcss-load-config": "1.2.0", + "schema-utils": "0.3.0" + } + }, + "postcss-url": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-7.2.1.tgz", + "integrity": "sha512-jycW2XYgU39SpA+MJOOP7Fe7I2NxiCq8rOXiG61NBoJ4vG/WFn2IhS18vGiphla4VTN3WoHJOBMMJz1n4h1VYQ==", + "dev": true, + "requires": { + "mime": "1.4.1", + "minimatch": "3.0.4", + "mkdirp": "0.5.1", + "postcss": "6.0.14", + "xxhashjs": "0.2.1" + } + } } }, "@angular/common": { @@ -221,21 +294,6 @@ "integrity": "sha1-w6DFRNYjkqzCgTpCyKDcb1j4aSI=", "dev": true }, - "@ngtools/webpack": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-1.8.0.tgz", - "integrity": "sha512-QefALj8VUakHMI/Z/7RjyQR4UpAAfCXeoHqqD9+7Td3CZkuryyGQILqOSAg3d+cP+64iCwIb2jSKC+YAIy722Q==", - "dev": true, - "requires": { - "chalk": "2.2.2", - "enhanced-resolve": "3.4.1", - "loader-utils": "1.1.0", - "magic-string": "0.22.4", - "semver": "5.4.1", - "source-map": "0.5.7", - "tree-kill": "1.2.0" - } - }, "@schematics/angular": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.1.0.tgz", @@ -2101,6 +2159,12 @@ "source-map": "0.5.7" } }, + "cuint": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz", + "integrity": "sha1-QICG1AlVDCYxFVYZ6fp7ytw7mRs=", + "dev": true + }, "currently-unhandled": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", @@ -2334,40 +2398,6 @@ "randombytes": "2.0.5" } }, - "directory-encoder": { - "version": "0.7.2", - "resolved": "https://registry.npmjs.org/directory-encoder/-/directory-encoder-0.7.2.tgz", - "integrity": "sha1-WbTiqk8lQi9sY7UntGL14tDdLFg=", - "dev": true, - "requires": { - "fs-extra": "0.23.1", - "handlebars": "1.3.0", - "img-stats": "0.5.2" - }, - "dependencies": { - "fs-extra": { - "version": "0.23.1", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.23.1.tgz", - "integrity": "sha1-ZhHbpq3yq43Jxp+rN83fiBgVfj0=", - "dev": true, - "requires": { - "graceful-fs": "4.1.11", - "jsonfile": "2.4.0", - "path-is-absolute": "1.0.1", - "rimraf": "2.6.2" - } - }, - "jsonfile": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz", - "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=", - "dev": true, - "requires": { - "graceful-fs": "4.1.11" - } - } - } - }, "dns-equal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", @@ -3970,47 +4000,6 @@ "integrity": "sha1-/Xqtcmvxpf0W38KbL3pmAdJxOcQ=", "dev": true }, - "handlebars": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-1.3.0.tgz", - "integrity": "sha1-npsTCpPjiUkTItl1zz7BgYw3zjQ=", - "dev": true, - "requires": { - "optimist": "0.3.7", - "uglify-js": "2.3.6" - }, - "dependencies": { - "async": { - "version": "0.2.10", - "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz", - "integrity": "sha1-trvgsGdLnXGXCMo43owjfLUmw9E=", - "dev": true, - "optional": true - }, - "source-map": { - "version": "0.1.43", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz", - "integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=", - "dev": true, - "optional": true, - "requires": { - "amdefine": "1.0.1" - } - }, - "uglify-js": { - "version": "2.3.6", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.3.6.tgz", - "integrity": "sha1-+gmEdwtCi3qbKoBY9GNV0U/vIRo=", - "dev": true, - "optional": true, - "requires": { - "async": "0.2.10", - "optimist": "0.3.7", - "source-map": "0.1.43" - } - } - } - }, "har-schema": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz", @@ -4462,15 +4451,6 @@ "dev": true, "optional": true }, - "img-stats": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/img-stats/-/img-stats-0.5.2.tgz", - "integrity": "sha1-wgNJbELy2esuWrgjL6dWurMsnis=", - "dev": true, - "requires": { - "xmldom": "0.1.27" - } - }, "import-local": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/import-local/-/import-local-0.1.1.tgz", @@ -6632,15 +6612,6 @@ "is-wsl": "1.1.0" } }, - "optimist": { - "version": "0.3.7", - "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.3.7.tgz", - "integrity": "sha1-yQlBrVnkJzMokjB00s8ufLxuwNk=", - "dev": true, - "requires": { - "wordwrap": "0.0.3" - } - }, "options": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/options/-/options-0.0.6.tgz", @@ -7219,18 +7190,6 @@ "object-assign": "4.1.1" } }, - "postcss-loader": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-1.3.3.tgz", - "integrity": "sha1-piHqH6KQYqg5cqRvVEhncTAZFus=", - "dev": true, - "requires": { - "loader-utils": "1.1.0", - "object-assign": "4.1.1", - "postcss": "5.2.18", - "postcss-load-config": "1.2.0" - } - }, "postcss-merge-idents": { "version": "2.1.7", "resolved": "https://registry.npmjs.org/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz", @@ -7525,21 +7484,6 @@ "uniqs": "2.0.0" } }, - "postcss-url": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-5.1.2.tgz", - "integrity": "sha1-mLMWW+jVkkccsMqt3iwNH4MvEz4=", - "dev": true, - "requires": { - "directory-encoder": "0.7.2", - "js-base64": "2.3.2", - "mime": "1.4.1", - "minimatch": "3.0.4", - "mkdirp": "0.5.1", - "path-is-absolute": "1.0.1", - "postcss": "5.2.18" - } - }, "postcss-value-parser": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz", @@ -10608,12 +10552,6 @@ "integrity": "sha1-UZy0ymhtAFqEINNJbz8MruzKWA8=", "dev": true }, - "xmldom": { - "version": "0.1.27", - "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.27.tgz", - "integrity": "sha1-1QH5ezvbQDr4757MIFcxh6rawOk=", - "dev": true - }, "xmlhttprequest-ssl": { "version": "1.5.3", "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.3.tgz", @@ -10626,6 +10564,15 @@ "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=", "dev": true }, + "xxhashjs": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.1.tgz", + "integrity": "sha1-m76b6JYUKXbfo0wGGy0GjEPTDeA=", + "dev": true, + "requires": { + "cuint": "0.2.2" + } + }, "y18n": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz", diff --git a/package.json b/package.json index d4199dcf..4c7b85a3 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ "build": "ng build --prod", "build:package": "ng build --prod && sh scripts/build.sh", "test:single-run": "ng test --watch false", - "precommit": "ng test --watch false && yarn run build:package", "cz": "git-cz", "release": "sh scripts/release.sh" }, @@ -50,7 +49,7 @@ "zone.js": "^0.8.14" }, "devDependencies": { - "@angular/cli": "1.5.0", + "@angular/cli": "1.5.3", "@angular/compiler-cli": "^5.0.0", "@angular/language-service": "^5.0.0", "@types/jasmine": "~2.5.53", @@ -79,4 +78,4 @@ "path": "node_modules/cz-conventional-changelog" } } -} \ No newline at end of file +} diff --git a/src/app/app.component.html b/src/app/app.component.html index 3bab1fb2..4772ba04 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -26,4 +26,4 @@
Documentation

Check wiki for more information

- \ No newline at end of file + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index d25471ff..b4b54fa1 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,14 +1,18 @@ .container { padding-top: 1rem; + .block { margin-bottom: 1rem; } + .logo { text-align: center; + img { margin-bottom: 0.3rem; } } + .htmlblock { .html { border: 1px solid #ddd; @@ -31,4 +35,4 @@ mark { background-color: #f1f1f1; padding: 0.1rem 0.4rem; border-radius: 3px; -} \ No newline at end of file +} diff --git a/src/app/ngx-editor/common/services/command-executor.service.spec.ts b/src/app/ngx-editor/common/services/command-executor.service.spec.ts new file mode 100644 index 00000000..7728715a --- /dev/null +++ b/src/app/ngx-editor/common/services/command-executor.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { CommandExecutorService } from './command-executor.service'; + +describe('CommandExecutorService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [CommandExecutorService] + }); + }); + + it('should be created', inject([CommandExecutorService], (service: CommandExecutorService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/src/app/ngx-editor/common/services/command-executor.service.ts b/src/app/ngx-editor/common/services/command-executor.service.ts new file mode 100644 index 00000000..82841977 --- /dev/null +++ b/src/app/ngx-editor/common/services/command-executor.service.ts @@ -0,0 +1,66 @@ +import { Injectable } from '@angular/core'; + +@Injectable() +export class CommandExecutorService { + + public execute(command: string): void { + + if (command === 'enableObjectResizing') { + document.execCommand('enableObjectResizing', true, true); + return; + } + + if (command === 'blockquote') { + document.execCommand('formatBlock', false, '
'); + return; + } + + if (command === 'removeBlockquote') { + document.execCommand('formatBlock', false, 'div'); + return; + } + + if (command === 'link') { + this.createLink(); + return; + } + + if (command === 'image') { + this.insertImage(); + return; + } + + document.execCommand(command, false, null); + } + + private insertImage() { + const imageURI = prompt('Enter Image URL', 'http://'); + if (imageURI) { + const inserted = document.execCommand('insertImage', false, imageURI); + if (!inserted) { + throw new Error('Invalid URL'); + } + } + } + + private createLink() { + const selection = document.getSelection(); + + if (selection.anchorNode.parentElement.tagName === 'A') { + const linkURL = prompt('Enter URL', selection.anchorNode.parentElement.getAttribute('href')); + if (linkURL) { + document.execCommand('createLink', false, linkURL); + } + } else { + if (selection['type'] === 'None') { + throw new Error('No selection made'); + } else { + const linkURL = prompt('Enter URL', 'http://'); + if (linkURL) { + document.execCommand('createLink', false, linkURL); + } + } + } + } + +} diff --git a/src/app/ngx-editor/common/services/message.service.spec.ts b/src/app/ngx-editor/common/services/message.service.spec.ts new file mode 100644 index 00000000..63ecfd8f --- /dev/null +++ b/src/app/ngx-editor/common/services/message.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { MessageService } from './message.service'; + +describe('MessageService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [MessageService] + }); + }); + + it('should be created', inject([MessageService], (service: MessageService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/src/app/ngx-editor/common/services/message.service.ts b/src/app/ngx-editor/common/services/message.service.ts new file mode 100644 index 00000000..a8758487 --- /dev/null +++ b/src/app/ngx-editor/common/services/message.service.ts @@ -0,0 +1,30 @@ +import { Injectable } from '@angular/core'; +import { Subject } from 'rxjs/Subject'; +import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/operator/map'; + +const FIVE_SECONDS = 5000; + +@Injectable() +export class MessageService { + + private message: Subject = new Subject(); + + constructor() { } + + getMessage(): Observable { + return this.message.asObservable(); + } + + sendMessage(message: string) { + this.message.next(message); + this.clearMessageIn(FIVE_SECONDS); + } + + private clearMessageIn(milliseconds: number): void { + setTimeout(() => { + this.message.next(undefined); + }, milliseconds); + } + +} diff --git a/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.html b/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.html new file mode 100644 index 00000000..c0192d2d --- /dev/null +++ b/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.html @@ -0,0 +1,3 @@ +
+ {{ngxMessage}} +
diff --git a/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.scss b/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.scss new file mode 100644 index 00000000..b368807e --- /dev/null +++ b/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.scss @@ -0,0 +1,9 @@ +.ngx-editor-message { + font-size: 80%; + background-color: #f1f1f1; + border: 1px solid #ddd; + border-top: transparent; + padding: 0 0.5rem; + padding-bottom: 0.1rem; + transition: 0.5s ease-in; +} diff --git a/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.spec.ts b/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.spec.ts new file mode 100644 index 00000000..6cb21838 --- /dev/null +++ b/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.spec.ts @@ -0,0 +1,27 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NgxEditorMessageComponent } from './ngx-editor-message.component'; +import { MessageService } from '../common/services/message.service'; + +describe('NgxEditorMessageComponent', () => { + let component: NgxEditorMessageComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + providers: [MessageService], + declarations: [NgxEditorMessageComponent] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NgxEditorMessageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.ts b/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.ts new file mode 100644 index 00000000..3fbbcbf7 --- /dev/null +++ b/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.ts @@ -0,0 +1,22 @@ +import { Component } from '@angular/core'; + +import { MessageService } from '../common/services/message.service'; + +@Component({ + selector: 'app-ngx-editor-message', + templateUrl: './ngx-editor-message.component.html', + styleUrls: ['./ngx-editor-message.component.scss'] +}) + +export class NgxEditorMessageComponent { + + ngxMessage = ''; + + constructor(private _messageService: MessageService) { + this._messageService.getMessage().subscribe((message: string) => this.ngxMessage = message); + } + + clearMessage() { + this.ngxMessage = undefined; + } +} diff --git a/src/app/ngx-editor/ngx-editor.component.html b/src/app/ngx-editor/ngx-editor.component.html index 1f9a743a..48aa69f5 100644 --- a/src/app/ngx-editor/ngx-editor.component.html +++ b/src/app/ngx-editor/ngx-editor.component.html @@ -1,130 +1,14 @@
- -
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - - -
-
+
- -
- {{ngxMessage}} -
+ -
\ No newline at end of file + + diff --git a/src/app/ngx-editor/ngx-editor.component.scss b/src/app/ngx-editor/ngx-editor.component.scss index 81164e98..ea606ca2 100644 --- a/src/app/ngx-editor/ngx-editor.component.scss +++ b/src/app/ngx-editor/ngx-editor.component.scss @@ -4,57 +4,13 @@ .ngx-editor { position: relative; - ::ng-deep [contenteditable=true]:empty:before { + + ::ng-deep [contenteditable=true]:empty:before { content: attr(placeholder); display: block; // for firefox + } - .ngx-toolbar { - background-color: #f5f5f5; - border-bottom: 1px solid #ddd; - font-size: 0.8rem; - padding: 0.2rem; - border: 1px solid #ddd; - .ngx-toolbar-set { - display: inline-block; - border: 1px solid #ddd; - border-radius: 5px; - background-color: white; - .ngx-editor-button { - background-color: #f5f5f5; - background-color: transparent; - border: 0; - padding: 0.4rem; - min-width: 2.5rem; - float: left; - border-right: 1px solid #ddd; - &:hover { - cursor: pointer; - background-color: #f1f1f1; - transition: 0.2s ease; - } - &:focus, - &.focus { - outline: 0; - } - &:last-child { - border-right: transparent; - } - &:first-child { - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; - } - &:last-child { - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; - } - &:disabled { - background-color: #f5f5f5; - pointer-events: none; - cursor: not-allowed; - } - } - } - } + .ngx-editor-textarea { min-height: 5rem; padding: 0.5rem 0.8rem 1rem 0.8rem; @@ -62,23 +18,16 @@ border-top: transparent !important; background-color: #fff; overflow: auto; + &:focus, &.focus { outline: 0; } - ::ng-deep blockquote { + + ::ng-deep blockquote { margin-left: 1rem; border-left: 0.2em solid #dfe2e5; padding-left: 0.5rem; } } - .ngx-editor-message { - font-size: 80%; - background-color: #f1f1f1; - border: 1px solid #ddd; - border-top: transparent; - padding: 0 0.5rem; - padding-bottom: 0.1rem; - transition: 0.5s ease-in; - } -} \ No newline at end of file +} diff --git a/src/app/ngx-editor/ngx-editor.component.spec.ts b/src/app/ngx-editor/ngx-editor.component.spec.ts index 80a72641..e69d7b1d 100644 --- a/src/app/ngx-editor/ngx-editor.component.spec.ts +++ b/src/app/ngx-editor/ngx-editor.component.spec.ts @@ -2,6 +2,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { NgxEditorComponent } from './ngx-editor.component'; import { NgxGrippieComponent } from './ngx-grippie/ngx-grippie.component'; +import { NgxToolbarComponent } from './ngx-toolbar/ngx-toolbar.component'; +import { NgxEditorMessageComponent } from './ngx-editor-message/ngx-editor-message.component'; +import { MessageService } from './common/services/message.service'; +import { CommandExecutorService } from './common/services/command-executor.service'; describe('NgxEditorComponent', () => { let component: NgxEditorComponent; @@ -9,7 +13,12 @@ describe('NgxEditorComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [NgxEditorComponent, NgxGrippieComponent] + providers: [MessageService, CommandExecutorService], + declarations: [NgxEditorComponent, + NgxGrippieComponent, + NgxToolbarComponent, + NgxEditorMessageComponent + ] }) .compileComponents(); })); diff --git a/src/app/ngx-editor/ngx-editor.component.ts b/src/app/ngx-editor/ngx-editor.component.ts index fe6fcf84..11aaad53 100644 --- a/src/app/ngx-editor/ngx-editor.component.ts +++ b/src/app/ngx-editor/ngx-editor.component.ts @@ -1,6 +1,8 @@ -import { Component, OnInit, HostListener, Input, Output, ElementRef, EventEmitter, ViewChild } from '@angular/core'; +import { Component, OnInit, Input, Output, ViewChild, HostListener, ElementRef, EventEmitter } from '@angular/core'; + import { ngxEditorConfig } from './ngx-editor.defaults'; -import * as Utils from './ngx-editor.utils'; +import { CommandExecutorService } from './common/services/command-executor.service'; +import { MessageService } from './common/services/message.service'; @Component({ selector: 'app-ngx-editor', @@ -17,7 +19,6 @@ export class NgxEditorComponent implements OnInit { _config: any; _html: any; _resizer: string; - ngxMessage: string; enableToolbar = false; @Input() editable: boolean; @@ -31,22 +32,20 @@ export class NgxEditorComponent implements OnInit { @Input() toolbar: any; // set resizer - @Input() - set resizer(value: string) { - console.log(value); + @Input() set resizer(value: string) { if (value === 'basic') { this._resizer = value; } else { this._resizer = 'stack'; } } + get resizer(): string { return this._resizer || 'stack'; } // set configuration - @Input() - set config(value: JSON) { + @Input() set config(value: JSON) { for (const i in ngxEditorConfig) { if (i) { @@ -60,15 +59,16 @@ export class NgxEditorComponent implements OnInit { } this._config = value; } + get config(): JSON { return this._config || ngxEditorConfig; } // set HTML value - @Input() - set html(value: any) { + @Input() set html(value: any) { this._html = value; } + get html(): any { return this._html; } @@ -76,7 +76,7 @@ export class NgxEditorComponent implements OnInit { /* * update html on changes in content editable */ - htmlContentChange(value) { + htmlContentChange(value: string) { if (value === '
') { this.htmlChange.emit(''); } else { @@ -84,69 +84,10 @@ export class NgxEditorComponent implements OnInit { } } - constructor(private _element: ElementRef) { } - - /* - * editor actions - */ - executeCommand(commandName) { - document.execCommand(commandName, false, null); - } - - // blockquote - blockQuote() { - document.execCommand('formatBlock', false, '
'); - } - - removeQuote() { - document.execCommand('formatBlock', false, 'div'); - } - - // insert link - createLink() { - const selection = document.getSelection(); - - if (selection.anchorNode.parentElement.tagName === 'A') { - const linkURL = prompt('Enter URL', selection.anchorNode.parentElement.getAttribute('href')); - if (linkURL) { - document.execCommand('createLink', false, linkURL); - } - } else { - if (selection['type'] === 'None') { - this.createMessage('No selection made'); - } else { - const linkURL = prompt('Enter URL', 'http://'); - if (linkURL) { - document.execCommand('createLink', false, linkURL); - } - } - } - } - - // insert image - insertImage() { - const imageURI = prompt('Enter Image URL', 'http://'); - if (imageURI) { - const inserted = document.execCommand('insertImage', false, imageURI); - if (!inserted) { - this.createMessage('Invalid URL'); - } - } - } - - /* - * message box - */ - createMessage(message) { - this.ngxMessage = message; - setTimeout(() => { - this.clearMessage(); - }, 5000); - } - - clearMessage() { - this.ngxMessage = undefined; - } + constructor( + private _element: ElementRef, + private _messageService: MessageService, + private _commandExecutor: CommandExecutorService) { } /* * focus event @@ -156,24 +97,13 @@ export class NgxEditorComponent implements OnInit { } @HostListener('document:click', ['$event']) onDocumentClick(event) { - if (this._element.nativeElement.contains(event.target)) { - this.enableToolbar = true; - } else { - this.enableToolbar = false; - } - } - - /* - * enable or diable toolbar based on configuration - */ - canEnableToolbarOptions(value) { - return Utils.canEnableToolbarOptions(value, this.config['toolbar']); + this.enableToolbar = !!this._element.nativeElement.contains(event.target); } /* * resizing text area */ - resizeTextArea(offsetY) { + resizeTextArea(offsetY: number) { let newHeight = parseInt(this.height, 10); newHeight += offsetY; this.height = newHeight + 'px'; @@ -196,7 +126,17 @@ export class NgxEditorComponent implements OnInit { this.height = this.height || this.textArea.nativeElement.offsetHeight; - document.execCommand('enableObjectResizing', true, true); + this.executeCommand('enableObjectResizing'); } + /* + * editor actions + */ + executeCommand(commandName: string) { + try { + this._commandExecutor.execute(commandName); + } catch (error) { + this._messageService.sendMessage(error.message); + } + } } diff --git a/src/app/ngx-editor/ngx-editor.module.ts b/src/app/ngx-editor/ngx-editor.module.ts index fa317b27..a43a7c0b 100644 --- a/src/app/ngx-editor/ngx-editor.module.ts +++ b/src/app/ngx-editor/ngx-editor.module.ts @@ -1,14 +1,23 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; + +// components import { NgxEditorComponent } from './ngx-editor.component'; import { NgxGrippieComponent } from './ngx-grippie/ngx-grippie.component'; +import { NgxToolbarComponent } from './ngx-toolbar/ngx-toolbar.component'; +import { NgxEditorMessageComponent } from './ngx-editor-message/ngx-editor-message.component'; + +// services +import { MessageService } from './common/services/message.service'; +import { CommandExecutorService } from './common/services/command-executor.service'; @NgModule({ imports: [ CommonModule ], - declarations: [NgxEditorComponent, NgxGrippieComponent], - exports: [NgxEditorComponent, NgxGrippieComponent] + declarations: [NgxEditorComponent, NgxGrippieComponent, NgxToolbarComponent, NgxEditorMessageComponent], + exports: [NgxEditorComponent, NgxGrippieComponent], + providers: [CommandExecutorService, MessageService] }) export class NgxEditorModule { } diff --git a/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.html b/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.html index 411dd0e8..2e3bd6a4 100644 --- a/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.html +++ b/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.html @@ -6,4 +6,4 @@ fill="rgb(147,153,159)" /> - \ No newline at end of file + diff --git a/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.scss b/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.scss index 1c904de2..7901bb5b 100644 --- a/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.scss +++ b/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.scss @@ -6,8 +6,9 @@ cursor: s-resize; border: 1px solid #ddd; border-top: transparent; + svg { position: absolute; top: 1.5px; } -} \ No newline at end of file +} diff --git a/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.spec.ts b/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.spec.ts index 24e461e2..83fabfdf 100644 --- a/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.spec.ts +++ b/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.spec.ts @@ -1,8 +1,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - import { ElementRef } from '@angular/core'; + import { NgxGrippieComponent } from './ngx-grippie.component'; import { NgxEditorComponent } from '../ngx-editor.component'; +import { MessageService } from '../common/services/message.service'; +import { CommandExecutorService } from '../common/services/command-executor.service'; export class MockElementRef extends ElementRef { constructor() { super(null); } @@ -15,7 +17,10 @@ describe('NgxGrippieComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [NgxGrippieComponent], - providers: [NgxEditorComponent, + providers: [ + NgxEditorComponent, + MessageService, + CommandExecutorService, { provide: ElementRef, useClass: MockElementRef }] }) .compileComponents(); diff --git a/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.ts b/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.ts index 0d40445b..d2ddd6b9 100644 --- a/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.ts +++ b/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, HostListener, EventEmitter } from '@angular/core'; +import { Component, OnInit, HostListener } from '@angular/core'; import { NgxEditorComponent } from '../ngx-editor.component'; @Component({ @@ -15,8 +15,7 @@ export class NgxGrippieComponent { constructor(private _editorComponent: NgxEditorComponent) { } - @HostListener('document:mousemove', ['$event']) - onMouseMove(event: MouseEvent) { + @HostListener('document:mousemove', ['$event']) onMouseMove(event: MouseEvent) { if (!this.grabber) { return; @@ -26,8 +25,7 @@ export class NgxGrippieComponent { this.oldY = event.clientY; } - @HostListener('document:mouseup', ['$event']) - onMouseUp(event: MouseEvent) { + @HostListener('document:mouseup', ['$event']) onMouseUp(event: MouseEvent) { this.grabber = false; } diff --git a/src/app/ngx-editor/ngx-editor.utils.ts b/src/app/ngx-editor/ngx-toolbar/ngx-editor.utils.ts similarity index 100% rename from src/app/ngx-editor/ngx-editor.utils.ts rename to src/app/ngx-editor/ngx-toolbar/ngx-editor.utils.ts diff --git a/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.html b/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.html new file mode 100644 index 00000000..f2203118 --- /dev/null +++ b/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.html @@ -0,0 +1,116 @@ + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + +
+
diff --git a/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.scss b/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.scss new file mode 100644 index 00000000..21066462 --- /dev/null +++ b/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.scss @@ -0,0 +1,55 @@ +.ngx-toolbar { + background-color: #f5f5f5; + border-bottom: 1px solid #ddd; + font-size: 0.8rem; + padding: 0.2rem; + border: 1px solid #ddd; + + .ngx-toolbar-set { + display: inline-block; + border: 1px solid #ddd; + border-radius: 5px; + background-color: white; + + .ngx-editor-button { + background-color: #f5f5f5; + background-color: transparent; + border: 0; + padding: 0.4rem; + min-width: 2.5rem; + float: left; + border-right: 1px solid #ddd; + + &:hover { + cursor: pointer; + background-color: #f1f1f1; + transition: 0.2s ease; + } + + &:focus, + &.focus { + outline: 0; + } + + &:last-child { + border-right: transparent; + } + + &:first-child { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + } + + &:last-child { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + + &:disabled { + background-color: #f5f5f5; + pointer-events: none; + cursor: not-allowed; + } + } + } +} diff --git a/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.spec.ts b/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.spec.ts new file mode 100644 index 00000000..982c9621 --- /dev/null +++ b/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.spec.ts @@ -0,0 +1,28 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NgxToolbarComponent } from './ngx-toolbar.component'; +import { ngxEditorConfig } from '../ngx-editor.defaults'; + +describe('NgxToolbarComponent', () => { + let component: NgxToolbarComponent; + let fixture: ComponentFixture; + + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [NgxToolbarComponent] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NgxToolbarComponent); + component = fixture.componentInstance; + component.config = ngxEditorConfig; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.ts b/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.ts new file mode 100644 index 00000000..d56d4235 --- /dev/null +++ b/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.ts @@ -0,0 +1,28 @@ +import { Component, Input, Output, EventEmitter } from '@angular/core'; +import * as Utils from './ngx-editor.utils'; + +@Component({ + selector: 'app-ngx-toolbar', + templateUrl: './ngx-toolbar.component.html', + styleUrls: ['./ngx-toolbar.component.scss'] +}) + +export class NgxToolbarComponent { + + @Input() config: any; + @Input() enableToolbar = false; + @Output() execute = new EventEmitter(); + + constructor() { } + + /* + * enable or diable toolbar based on configuration + */ + canEnableToolbarOptions(value) { + return Utils.canEnableToolbarOptions(value, this.config['toolbar']); + } + + triggerCommand(command: string): void { + this.execute.emit(command); + } +} diff --git a/tsconfig.json b/tsconfig.json index ada797a8..cf17ddff 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,4 +19,4 @@ "exclude": [ ".ng_build" ] -} \ No newline at end of file +} diff --git a/yarn.lock b/yarn.lock index cf6df331..6fdba1e5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -32,14 +32,14 @@ dependencies: tslib "^1.7.1" -"@angular/cli@1.5.0": - version "1.5.0" - resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.5.0.tgz#2abc3ff1648d54ad4a14f82f9d517f371370406c" +"@angular/cli@1.5.3": + version "1.5.3" + resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.5.3.tgz#9d98abbfdf42706853dfeb10f33410adf6b8038b" dependencies: "@angular-devkit/build-optimizer" "~0.0.31" "@angular-devkit/schematics" "~0.0.34" "@ngtools/json-schema" "1.1.0" - "@ngtools/webpack" "1.8.0" + "@ngtools/webpack" "1.8.3" "@schematics/angular" "~0.1.0" autoprefixer "^6.5.3" chalk "~2.2.0" @@ -64,13 +64,14 @@ license-webpack-plugin "^1.0.0" lodash "^4.11.1" memory-fs "^0.4.1" + minimatch "^3.0.4" node-modules-path "^1.0.0" nopt "^4.0.1" opn "~5.1.0" portfinder "~1.0.12" postcss-custom-properties "^6.1.0" - postcss-loader "^1.3.3" - postcss-url "^5.1.2" + postcss-loader "^2.0.8" + postcss-url "^7.1.2" raw-loader "^0.5.1" resolve "^1.1.7" rxjs "^5.5.2" @@ -166,9 +167,9 @@ version "1.1.0" resolved "https://registry.yarnpkg.com/@ngtools/json-schema/-/json-schema-1.1.0.tgz#c3a0c544d62392acc2813a42c8a0dc6f58f86922" -"@ngtools/webpack@1.8.0": - version "1.8.0" - resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-1.8.0.tgz#443204e016aa3a287544eacadb4c95964ae6e2c4" +"@ngtools/webpack@1.8.3": + version "1.8.3" + resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-1.8.3.tgz#8bafa749fc2626d11e146899e5b14e3e85bc787f" dependencies: chalk "~2.2.0" enhanced-resolve "^3.1.0" @@ -480,10 +481,6 @@ async@^2.0.0-rc.5, async@^2.1.2, async@^2.1.4, async@^2.1.5, async@^2.4.1, async dependencies: lodash "^4.14.0" -async@~0.2.6: - version "0.2.10" - resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1" - asynckit@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" @@ -946,7 +943,7 @@ chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3: strip-ansi "^3.0.0" supports-color "^2.0.0" -chalk@^2.0.0, chalk@^2.1.0: +chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba" dependencies: @@ -1504,6 +1501,10 @@ csso@~2.3.1: clap "^1.0.9" source-map "^0.5.3" +cuint@latest: + version "0.2.2" + resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b" + currently-unhandled@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea" @@ -1702,14 +1703,6 @@ diffie-hellman@^5.0.0: miller-rabin "^4.0.0" randombytes "^2.0.0" -directory-encoder@^0.7.2: - version "0.7.2" - resolved "https://registry.yarnpkg.com/directory-encoder/-/directory-encoder-0.7.2.tgz#59b4e2aa4f25422f6c63b527b462f5e2d0dd2c58" - dependencies: - fs-extra "^0.23.1" - handlebars "^1.3.0" - img-stats "^0.5.2" - dns-equal@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d" @@ -2435,15 +2428,6 @@ fs-exists-sync@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add" -fs-extra@^0.23.1: - version "0.23.1" - resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.23.1.tgz#6611dba6adf2ab8dc9c69fab37cddf8818157e3d" - dependencies: - graceful-fs "^4.1.2" - jsonfile "^2.1.0" - path-is-absolute "^1.0.0" - rimraf "^2.2.8" - fs-extra@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-1.0.0.tgz#cd3ce5f7e7cb6145883fcae3191e9877f8587950" @@ -2734,14 +2718,6 @@ handle-thing@^1.2.5: version "1.2.5" resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4" -handlebars@^1.3.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-1.3.0.tgz#9e9b130a93e389491322d975cf3ec1818c37ce34" - dependencies: - optimist "~0.3" - optionalDependencies: - uglify-js "~2.3" - handlebars@^4.0.3: version "4.0.11" resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc" @@ -3027,12 +3003,6 @@ image-size@~0.5.0: version "0.5.5" resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c" -img-stats@^0.5.2: - version "0.5.2" - resolved "https://registry.yarnpkg.com/img-stats/-/img-stats-0.5.2.tgz#c203496c42f2d9eb2e5ab8232fa756bab32c9e2b" - dependencies: - xmldom "^0.1.19" - import-local@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/import-local/-/import-local-0.1.1.tgz#b1179572aacdc11c6a91009fb430dbcab5f668a8" @@ -3452,7 +3422,7 @@ jasminewd2@^2.1.0: version "2.2.0" resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.2.0.tgz#e37cf0b17f199cce23bea71b2039395246b4ec4e" -js-base64@^2.1.5, js-base64@^2.1.8, js-base64@^2.1.9: +js-base64@^2.1.8, js-base64@^2.1.9: version "2.3.2" resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.3.2.tgz#a79a923666372b580f8e27f51845c6f7e8fbfbaf" @@ -4377,7 +4347,7 @@ object-assign@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2" -object-assign@^4.0.0, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: +object-assign@^4.0.0, object-assign@^4.0.1, object-assign@^4.1.0: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" @@ -4433,12 +4403,6 @@ optimist@^0.6.1, optimist@~0.6.0: minimist "~0.0.1" wordwrap "~0.0.2" -optimist@~0.3, optimist@~0.3.5: - version "0.3.7" - resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.3.7.tgz#c90941ad59e4273328923074d2cf2e7cbc6ec0d9" - dependencies: - wordwrap "~0.0.2" - options@>=0.0.5: version "0.0.6" resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f" @@ -4779,14 +4743,14 @@ postcss-load-plugins@^2.3.0: cosmiconfig "^2.1.1" object-assign "^4.1.0" -postcss-loader@^1.3.3: - version "1.3.3" - resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-1.3.3.tgz#a621ea1fa29062a83972a46f54486771301916eb" +postcss-loader@^2.0.8: + version "2.0.8" + resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.0.8.tgz#8c67ddb029407dfafe684a406cfc16bad2ce0814" dependencies: - loader-utils "^1.0.2" - object-assign "^4.1.1" - postcss "^5.2.15" + loader-utils "^1.1.0" + postcss "^6.0.0" postcss-load-config "^1.2.0" + schema-utils "^0.3.0" postcss-merge-idents@^2.1.5: version "2.1.7" @@ -4944,17 +4908,15 @@ postcss-unique-selectors@^2.0.2: postcss "^5.0.4" uniqs "^2.0.0" -postcss-url@^5.1.2: - version "5.1.2" - resolved "https://registry.yarnpkg.com/postcss-url/-/postcss-url-5.1.2.tgz#98b3165be8d592471cb0caadde2c0d1f832f133e" +postcss-url@^7.1.2: + version "7.2.1" + resolved "https://registry.yarnpkg.com/postcss-url/-/postcss-url-7.2.1.tgz#bf47ff1b5395538567cea19ef3241a70fb925f5c" dependencies: - directory-encoder "^0.7.2" - js-base64 "^2.1.5" - mime "^1.2.11" - minimatch "^3.0.0" + mime "^1.4.1" + minimatch "^3.0.4" mkdirp "^0.5.0" - path-is-absolute "^1.0.0" - postcss "^5.0.0" + postcss "^6.0.1" + xxhashjs "^0.2.1" postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0: version "3.3.0" @@ -4968,7 +4930,7 @@ postcss-zindex@^2.0.1: postcss "^5.0.4" uniqs "^2.0.0" -postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.15, postcss@^5.2.16: +postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16: version "5.2.18" resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5" dependencies: @@ -4977,6 +4939,14 @@ postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0. source-map "^0.5.6" supports-color "^3.2.3" +postcss@^6.0.0: + version "6.0.14" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.14.tgz#5534c72114739e75d0afcf017db853099f562885" + dependencies: + chalk "^2.3.0" + source-map "^0.6.1" + supports-color "^4.4.0" + postcss@^6.0.1, postcss@^6.0.13, postcss@^6.0.2: version "6.0.13" resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.13.tgz#b9ecab4ee00c89db3ec931145bd9590bbf3f125f" @@ -5873,7 +5843,7 @@ source-map-support@^0.4.0, source-map-support@^0.4.1, source-map-support@^0.4.2, dependencies: source-map "^0.5.6" -source-map@0.1.x, source-map@~0.1.7: +source-map@0.1.x: version "0.1.43" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346" dependencies: @@ -6432,14 +6402,6 @@ uglify-js@^2.6, uglify-js@^2.8.29: optionalDependencies: uglify-to-browserify "~1.0.0" -uglify-js@~2.3: - version "2.3.6" - resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.3.6.tgz#fa0984770b428b7a9b2a8058f46355d14fef211a" - dependencies: - async "~0.2.6" - optimist "~0.3.5" - source-map "~0.1.7" - uglify-to-browserify@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7" @@ -6919,10 +6881,6 @@ xmlbuilder@>=1.0.0, xmlbuilder@~9.0.1: version "9.0.4" resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.4.tgz#519cb4ca686d005a8420d3496f3f0caeecca580f" -xmldom@^0.1.19: - version "0.1.27" - resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.27.tgz#d501f97b3bdb403af8ef9ecc20573187aadac0e9" - xmlhttprequest-ssl@1.5.3: version "1.5.3" resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.3.tgz#185a888c04eca46c3e4070d99f7b49de3528992d" @@ -6931,6 +6889,12 @@ xmlhttprequest-ssl@1.5.3: version "4.0.1" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af" +xxhashjs@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/xxhashjs/-/xxhashjs-0.2.1.tgz#9bbe9be896142976dfa34c061b2d068c43d30de0" + dependencies: + cuint latest + y18n@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"