Coloration lib

angular.json

@@ -133,6 +133,41 @@
           }
         }
       }
+    },
+    "coloration": {
+      "root": "projects/coloration",
+      "sourceRoot": "projects/coloration/src",
+      "projectType": "library",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/coloration/tsconfig.lib.json",
+            "project": "projects/coloration/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/coloration/src/test.ts",
+            "tsConfig": "projects/coloration/tsconfig.spec.json",
+            "karmaConfig": "projects/coloration/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/coloration/tsconfig.lib.json",
+              "projects/coloration/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
     }
   },
   "defaultProject": "coloration-demo"

package.json

@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.10.0",
+    "@angular-devkit/build-ng-packagr": "~0.10.0",
     "@angular/cli": "~7.0.4",
     "@angular/compiler-cli": "~7.0.0",
     "@angular/language-service": "~7.0.0",
@@ -40,8 +41,11 @@
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "ng-packagr": "^4.2.0",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
+    "tsickle": ">=0.29.0",
+    "tslib": "^1.9.0",
     "tslint": "~5.11.0",
     "typescript": "~3.1.1"
   }

projects/coloration/karma.conf.js

+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

projects/coloration/ng-package.json

+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/coloration",
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  }
+}
\ No newline at end of file

projects/coloration/package.json

+{
+  "name": "coloration",
+  "version": "0.0.1",
+  "peerDependencies": {}
+}
\ No newline at end of file

projects/coloration/src/lib/coloration.ts

+
+// tslint:disable:no-bitwise
+
+const pattern = {
+    hexa: /^^#?(([\da-f]{3})(([\da-f]{3})([\da-f]{2})?|[\da-f]{1})?)$/i,
+    rgba: /^rgba?\(([\d]*(\.[\d]+)?)(,?\s*|\s+)([\d]*(\.[\d]+)?)(,?\s*|\s+)([\d]*(\.[\d]+)?)((,\s*)([\d]*(\.[\d]+)?))?\)$/i
+};
+
+export class Coloration {
+
+    static colorsName: any = {
+        // CSS 1
+        black: '#000000', silver: '#c0c0c0', gray: '#808080', white: '#ffffff', maroon: '#800000', red: '#ff0000',
+        purple: '#800080', fuchsia: '#ff00ff', green: '#008000', lime: '#00ff00', olive: '#808000', yellow: '#ffff00',
+        navy: '#000080', blue: '#0000ff', teal: '#008080', aqua: '#00ffff',
+        // CSS 2 (Revision 1)
+        orange: '#ffa500',
+        // CSS 3
+        aliceblue: '#f0f8ff', antiquewhite: '#faebd7', aquamarine: '#7fffd4', azure: '#f0ffff', beige: '#f5f5dc',
+        bisque: '#ffe4c4', blanchedalmond: '#ffebcd', blueviolet: '#8a2be2', brown: '#a52a2a', burlywood: '#deb887',
+        cadetblue: '#5f9ea0', chartreuse: '#7fff00', chocolate: '#d2691e', coral: '#ff7f50', cornflowerblue: '#6495ed',
+        cornsilk: '#fff8dc', crimson: '#dc143c', cyan: '#00ffff', deaqua: '#00ffff', darkblue: '#00008b',
+        darkcyan: '#008b8b', darkgoldenrod: '#b8860b', darkgray: '#a9a9a9', darkgreen: '#006400', darkgrey: '#a9a9a9',
+        darkkhaki: '#bdb76b', darkmagenta: '#8b008b', darkolivegreen: '#556b2f', darkorange: '#ff8c00',
+        darkorchid: '#9932cc', darkred: '#8b0000', darksalmon: '#e9967a', darkseagreen: '#8fbc8f',
+        darkslateblue: '#483d8b', darkslategray: '#2f4f4f', darkslategrey: '#2f4f4f', darkturquoise: '#00ced1',
+        darkviolet: '#9400d3', deeppink: '#ff1493', deepskyblue: '#00bfff', dimgray: '#696969', dimgrey: '#696969',
+        dodgerblue: '#1e90ff', firebrick: '#b22222', floralwhite: '#fffaf0', forestgreen: '#228b22',
+        gainsboro: '#dcdcdc', ghostwhite: '#f8f8ff', gold: '#ffd700', goldenrod: '#daa520', greenyellow: '#adff2f',
+        grey: '#808080', honeydew: '#f0fff0', hotpink: '#ff69b4', indianred: '#cd5c5c', indigo: '#4b0082',
+        ivory: '#fffff0', khaki: '#f0e68c', lavender: '#e6e6fa', lavenderblush: '#fff0f5', lawngreen: '#7cfc00',
+        lemonchiffon: '#fffacd', lightblue: '#add8e6', lightcoral: '#f08080', lightcyan: '#e0ffff',
+        lightgoldenrodyellow: '#fafad2', lightgray: '#d3d3d3', lightgreen: '#90ee90', lightgrey: '#d3d3d3',
+        lightpink: '#ffb6c1', lightsalmon: '#ffa07a', lightseagreen: '#20b2aa', lightskyblue: '#87cefa',
+        lightslategray: '#778899', lightslategrey: '#778899', lightsteelblue: '#b0c4de', lightyellow: '#ffffe0',
+        limegreen: '#32cd32', linen: '#faf0e6', magenta: '#ff00ff', defuchsia: '#ff00ff', mediumaquamarine: '#66cdaa',
+        mediumblue: '#0000cd', mediumorchid: '#ba55d3', mediumpurple: '#9370db', mediumseagreen: '#3cb371',
+        mediumslateblue: '#7b68ee', mediumspringgreen: '#00fa9a', mediumturquoise: '#48d1cc',
+        mediumvioletred: '#c71585', midnightblue: '#191970', mintcream: '#f5fffa', mistyrose: '#ffe4e1',
+        moccasin: '#ffe4b5', navajowhite: '#ffdead', oldlace: '#fdf5e6', olivedrab: '#6b8e23', orangered: '#ff4500',
+        orchid: '#da70d6', palegoldenrod: '#eee8aa', palegreen: '#98fb98', paleturquoise: '#afeeee',
+        palevioletred: '#db7093', papayawhip: '#ffefd5', peachpuff: '#ffdab9', peru: '#cd853f', pink: '#ffc0cb',
+        plum: '#dda0dd', powderblue: '#b0e0e6', rosybrown: '#bc8f8f', royalblue: '#4169e1', saddlebrown: '#8b4513',
+        salmon: '#fa8072', sandybrown: '#f4a460', seagreen: '#2e8b57', seashell: '#fff5ee', sienna: '#a0522d',
+        skyblue: '#87ceeb', slateblue: '#6a5acd', slategray: '#708090', slategrey: '#708090', snow: '#fffafa',
+        springgreen: '#00ff7f', steelblue: '#4682b4', tan: '#d2b48c', thistle: '#d8bfd8', tomato: '#ff6347',
+        turquoise: '#40e0d0', violet: '#ee82ee', wheat: '#f5deb3', whitesmoke: '#f5f5f5', yellowgreen: '#9acd32',
+        // CSS 4
+        rebeccapurple: '#663399'
+    };
+
+    constructor(public color: string) { }
+
+    /**
+     * change the luminosity of a color
+     * @param lum value between -1 and 1
+     */
+    changeLuminosity(lum: number): string {
+        lum = Math.min(Math.max(lum || 0, -1), 1);
+        return this.maskColor(lum < 0 ? '#000' : '#FFF', Math.abs(lum));
+    }
+
+    /**
+     * add color with a mark
+     * @param color additional color
+     * @param opacity value of opacity between 0 and 1 for the additional color
+     * @returns hexa color
+     */
+    maskColor(color: string, opacity: number = 1): string {
+
+        const baseColor = this.parseColor(this.color);
+        const additionalColor = this.parseColor(color);
+
+        const lum = Math.min(Math.max(opacity || 0, 0), 1);
+
+        const R = baseColor >> 16;
+        const G = baseColor >> 8 & 0x00FF;
+        const B = baseColor & 0x0000FF;
+        return '#' + (0x1000000 +
+            (Math.round(((additionalColor >> 16) - R) * lum) + R) * 0x10000
+            + (Math.round(((additionalColor >> 8 & 0x00FF) - G) * lum) + G) * 0x100
+            + (Math.round(((additionalColor & 0x0000FF) - B) * lum) + B)
+        ).toString(16).slice(1);
+    }
+
+    /**
+     * change color
+     * @param color parse color : name, #HEXA, rgba()
+     * @returns int color
+     */
+    private parseColor(color: string) {
+
+        // si named color
+        if (Coloration.colorsName[color]) {
+            color = Coloration.colorsName[color];
+        }
+
+        // validate hexa string #RGB, #RGBA, #RRGGBB, #RRGGBBAA (ignore alpha)
+        const matchHex = String(color).match(pattern.hexa);
+        let intColor;
+        if (matchHex) {
+            const hexa = matchHex[4]
+                ? matchHex[2] + matchHex[4]
+                : matchHex[2][0] + matchHex[2][0] + matchHex[2][1] + matchHex[2][1] + matchHex[2][2] + matchHex[2][2];
+
+            intColor = parseInt(hexa, 16);
+        }
+
+        if (intColor === undefined) {
+            // validate rgb() / rgba()
+            const matchRgb = String(color).match(pattern.rgba);
+            if (matchRgb) {
+                intColor = parseInt(matchRgb[1], 10) * 65536 + parseInt(matchRgb[3], 10) * 256 + parseInt(matchRgb[5], 10);
+            }
+        }
+
+        return intColor;
+
+    }
+
+}

projects/coloration/src/public_api.ts

+/*
+ * Public API Surface of coloration
+ */
+
+export * from './lib/coloration';

projects/coloration/src/test.ts

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

projects/coloration/tsconfig.lib.json

+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "declaration": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

projects/coloration/tsconfig.spec.json

+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

projects/coloration/tslint.json

+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "lib",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "lib",
+      "kebab-case"
+    ]
+  }
+}

src/app/app.component.html

 <!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
+<div>
   <h1>
     Welcome to {{ title }}!
   </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 </div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+<h2>Test to change color: </h2>
 
-<router-outlet></router-outlet>
+<div>
+  Color : <input type="color"
+         [value]="color"
+         (change)="changeColor($event)">
+
+  Luminosity : <input type="number"
+         max="1"
+         min="-1"
+         step="0.01"
+         [value]="luminosity"
+         (keyup)="changeLuminosity($event)"
+         (change)="changeLuminosity($event)">
+</div>
+<hr>
+<div>Color : {{color}}</div>
+<div>ColorFinal : {{colorFinal}}</div>
+<div [style.background-color]="colorFinal">&nbsp;</div>
\ No newline at end of file

src/app/app.component.ts

 import { Component } from '@angular/core';
+import { Coloration } from 'projects/coloration/src/public_api';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,29 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'coloration-demo';
+
+  color = '#FF0000';
+
+  luminosity = 0;
+
+  colorFinal: string;
+
+  constructor() {
+    this.calculColor();
+  }
+
+  changeColor(event: Event) {
+    this.color = (event.target as any).value;
+    this.calculColor();
+  }
+
+  changeLuminosity(event: Event) {
+    this.luminosity = parseFloat((event.target as any).value);
+    this.calculColor();
+  }
+
+  calculColor() {
+    const color = new Coloration(this.color);
+    this.colorFinal = color.changeLuminosity(this.luminosity);
+  }
 }

tsconfig.json

@@ -16,6 +16,14 @@
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "paths": {
+      "coloration": [
+        "dist/coloration"
+      ],
+      "coloration/*": [
+        "dist/coloration/*"
+      ]
+    }
   }
-}
+}
\ No newline at end of file