v1.0.0

.angular-cli.json

@@ -0,0 +1,57 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "blurred-image-app"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json"
+    },
+    {
+      "project": "src/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db

README.md

@@ -0,0 +1,40 @@
+Angular2 blurred image component.
+
+## Installation
+
+Install the npm package.
+
+    npm i ngx-blurred-image
+        
+Import module:
+
+    import { NgModule }         from '@angular/core';
+    import { BrowserModule }    from '@angular/platform-browser';
+    import { AppComponent }     from './app.component';
+    import { BlurredImageComponent } from 'ngx-blurred-image/components';
+     
+    @NgModule({
+        imports:      [ BrowserModule ],
+        declarations: [ AppComponent, BlurredImageComponent ],
+        bootstrap:    [ AppComponent ]
+    })
+    export class AppModule { } 
+
+## Usage
+
+	<div blurred-image
+		[small]="base64"
+		preview="/assets/img/annie-spratt-419262-preview.jpg"
+		[size]="{width: 880, height: 587}"
+	></div>
+
+## Properties
+
+| name             | type                                | description                                       |
+|------------------|-------------------------------------|---------------------------------------------------|
+| small            | string                              | Thumbnail image in base64 format.                 |
+| preview          | string                              | Path to full-size image.                          |
+| size             | object                              | Width and height of the container with the image. |
+
+## Demo
+http://crystalui.org/components/blurred-image/example

e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { BlurredImageAppPage } from './app.po';
+
+describe('blurred-image-app App', () => {
+  let page: BlurredImageAppPage;
+
+  beforeEach(() => {
+    page = new BlurredImageAppPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});

e2e/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor';
+
+export class BlurredImageAppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

e2e/tsconfig.e2e.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types":[
+      "jasmine",
+      "node"
+    ]
+  }
+}

karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['@angular/cli']
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'coverage-istanbul']
+              : ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "blurred-image-app",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.0.0",
+    "core-js": "^2.4.1",
+    "rxjs": "^5.1.0",
+    "zone.js": "^0.8.4"
+  },
+  "devDependencies": {
+    "@angular/cli": "1.0.0",
+    "@angular/compiler-cli": "^4.0.0",
+    "@types/jasmine": "2.5.38",
+    "@types/node": "~6.0.60",
+    "codelyzer": "~2.0.0",
+    "jasmine-core": "~2.5.2",
+    "jasmine-spec-reporter": "~3.2.0",
+    "karma": "~1.4.1",
+    "karma-chrome-launcher": "~2.0.0",
+    "karma-cli": "~1.0.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-coverage-istanbul-reporter": "^0.2.0",
+    "protractor": "~5.1.0",
+    "ts-node": "~2.0.0",
+    "tslint": "~4.5.0",
+    "typescript": "~2.2.0"
+  }
+}

protractor.conf.js

@@ -0,0 +1,30 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+  },
+  onPrepare() {
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

src/app/app.component.html

@@ -0,0 +1,12 @@
+<p>Morbi tempus magna ac orci pharetra tincidunt. Nulla massa massa, gravida ornare iaculis eget, tincidunt non est. Fusce sollicitudin blandit odio ac condimentum. Aliquam non dictum metus. Quisque tristique nulla at eleifend pharetra. Pellentesque a libero metus. Nulla facilisi. Cras pretium urna eu massa sollicitudin, quis blandit elit dictum.</p>
+<div blurred-image
+	[small]="base64[0]"
+	preview="/assets/img/annie-spratt-419262-preview.jpg"
+	[size]="{width: 880, height: 587}"
+	></div>
+<p>Nam vitae pulvinar lorem, ut hendrerit nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc vestibulum rutrum urna vitae varius. Maecenas pellentesque dui in purus molestie, sed eleifend eros malesuada. Sed venenatis vel sapien et luctus. Vivamus elementum faucibus quam. </p>
+<div blurred-image
+	[small]="base64[1]"
+	preview="/assets/img/annie-spratt-419261-preview.jpg" 
+	[size]="{width: 880, height: 587}"
+	></div>

src/app/app.component.spec.ts

@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});

src/app/app.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+	title = 'app works!';
+
+	base64: any = [
+		'data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABMAAD/4QMtaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzEzOCA3OS4xNTk4MjQsIDIwMTYvMDkvMTQtMDE6MDk6MDEgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjkzOUIzNzJCQkFEQjExRTdBNTI5RDE5Q0Q0QkQ3NkVGIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjkzOUIzNzJBQkFEQjExRTdBNTI5RDE5Q0Q0QkQ3NkVGIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE3IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0QTVGOUI4QUJBODgxMUU3ODNCOEY2Njg0MjJDODEwQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0QTVGOUI4QkJBODgxMUU3ODNCOEY2Njg0MjJDODEwQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/uAA5BZG9iZQBkwAAAAAH/2wCEAAMCAgICAgMCAgMEAwIDBAUEAwMEBQYFBQUFBQYIBgcGBgcGCAgJCQoJCQgMDAwMDAwNDQ0NDQ8PDw8PDw8PDw8BAwMDBgYGCwgICxENCw0RFA8PDw8UEQ8PDw8PEREPDw8PDw8RDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PD//AABEIABsAKAMBEQACEQEDEQH/xACTAAACAgMBAAAAAAAAAAAAAAAEBgUIAgMJBwEAAgMBAAAAAAAAAAAAAAAAAwQAAQIFEAABAgQEBAIHCQEAAAAAAAABAgMREgQFACETBjEiFAdBFVFhkSMzNAhxgaEyQlJigiQWEQABAwEFBQYHAQAAAAAAAAABABECAyExQVEE8GFxoRKBkTJCExTB0fGSwjMFFf/aAAwDAQACEQMRAD8Aqjc0bcW/cbCw0WhRW1T1LXJBLjiummU2QYxAUcocBjNSQdlmNydNk9mO4e+Kamqtkilcu9IyxLS3QUzbVW6EoVOwonTUpvwCoqA8OOBxh1IhV6fpQqe6tD3hr6TeuwKjYtgve36UUtXTN6FuurtmRLMqnZmYaeVqlSlA+8SOUwwZy9yiuBHEUWKjl6sWFFwYpLS1bbEqso3ymrYYqC/SOr01ttqQfeIUY6oVGEE44/ux1AHb5J0aEmJkDcvaNh9x7VtJumt1Q5cnLa68zVoFM1TvstpaAcni8lQKUnj7DwwU64RkRkVBpHY5q5u0Pro7Y2Ky220XekuKKN4QoatpDS2FjMhLYaglIGYAHswyNfA4FSWhkGchjinu2/WR2luzYcpHX2yUhQbqR07kDw5HADjPvob1cdCT5gj1/VFsBbSnUlRQkymVaVwPCBljDFf6VIXuiD+VVNzFcY7dWMrZNO+uqrnHwNJmoSlbSikmZwOqEEy5HKH245lSBdwwba5aoh7LS/d3pptdwCXqaio2XnE07kzboP8AkbcTkqZQTMqCofxjhUwx+qfiwIEQ7fa+O1yY7ju2jsm2n9tXYVzt/u9YH66rYUlUriBELaRkgSpzJAE+DUgSHDWItWMaUD6hJMss9yB1LRdw2myXAqrqZQfQw/O0zVLUZVHlJcadMOYJinxGWLjVI8QbgkYRhNgDbyKWN01tv80Q/cC7Q3BwnqG4qkdSn9CVkpRGOXrOG4CTZoNeAibbFGW7V/5FUOu0tR+bT0+nmiIxjzw/fDl4QwtP9uHx25p2i/oebHh248cMlM7Wl8uqYeVSyOfKzSzTmGpHPj/X05YFW8XmTeg8Jbo7OOLoa3avnBn1odO9Nqael+XOaTOT0Q+7BKzdPak9U/VbvybktDOt5gfnJZkfD0oxlEJfGeHH8c8UWYXc0hijO5Uemrp9LTmy66EIyJ+BLze3KOOhprgjal+k/kv/2Q==',
+		'data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABMAAD/4QMtaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzEzOCA3OS4xNTk4MjQsIDIwMTYvMDkvMTQtMDE6MDk6MDEgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJBMTI0QzlDQkFEQzExRTc4M0EyOTg2MEMyNTQ0MkVEIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJBMTI0QzlCQkFEQzExRTc4M0EyOTg2MEMyNTQ0MkVEIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE3IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3ODQ3QzU4REJBODgxMUU3QUE0RUFBNTIyQ0I4RTFFNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3ODQ3QzU4RUJBODgxMUU3QUE0RUFBNTIyQ0I4RTFFNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/uAA5BZG9iZQBkwAAAAAH/2wCEAAMCAgICAgMCAgMEAwIDBAUEAwMEBQYFBQUFBQYIBgcGBgcGCAgJCQoJCQgMDAwMDAwNDQ0NDQ8PDw8PDw8PDw8BAwMDBgYGCwgICxENCw0RFA8PDw8UEQ8PDw8PEREPDw8PDw8RDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PD//AABEIABsAKAMBEQACEQEDEQH/xAB/AAABAwUAAAAAAAAAAAAAAAAEAgMJAAEGBwgBAAMBAQEAAAAAAAAAAAAAAAECAwQABRAAAQIEAwUGBgMAAAAAAAAAAQIDABEEBTESByFBcRMGUWGxIjIUkcHRQjMIcoJEEQADAAIBBQEAAAAAAAAAAAAAAQIRMQMhEiITBBT/2gAMAwEAAhEDEQA/AOYG9R7lSaXXHS1a111lr6qnqqJL6lrNC4ysrV7NKswa5n3ZAJnaZw/sxDkPZ59xI9+nqtO770J031DZ6kN6kJszS76ikedb59PzVtBFYguOodGdOYJIQps4BKTKL5zKZl5M5aOlWTCMEoObAlCNjopxIKTACQCO1CpBGUlREyeIwiDZtN9/rRq91fpdcKm92FsNqCeQ3SuqLrT/ADE/e2qWxJ8w8ZRp+eujT0Q5ePJJBoxrGvVKkqFO2/2VTSNtqLiF523iQEql2HNPZ2RW5SM6TWzaiKhafUJcdnjEApiX7nTNJJefaR/JaR4mAxiBRhboUlKZZhgDPfiYytnpTIX759oAF5ZOaSRmIUe2FQ76BND1Z1Pa5Ltt5rqQS/zVTrcu8hKhDCq2ZJTaxajKPId6nualpT6zWOEKl3zidQaI+l6AarU7qutUVVN4rnFCfrqHT8Dm2wvoG/YzEWPy/XHDdFWZJ2WqPzjH5wVoF7G075Y+bD5zgiDbcvNPGWzGf9Zb+McBClYDjslHHH//2Q==',
+	];
+}