+ {{title}} +
+
+ ![]()
+
+
+
+
+
+
+
+
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
new file mode 100644
index 0000000..bcbdf36
--- /dev/null
+++ b/src/app/app.component.spec.ts
@@ -0,0 +1,27 @@
+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'`, async(() => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.debugElement.componentInstance;
+ expect(app.title).toEqual('app');
+ }));
+ 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('Welcome to app!');
+ }));
+});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
new file mode 100644
index 0000000..12a869d
--- /dev/null
+++ b/src/app/app.component.ts
@@ -0,0 +1,85 @@
+import { Component, ViewChild, OnInit, OnChanges } from '@angular/core';
+import { CroppieOptions } from 'croppie';
+import { NgxCroppieComponent } from './modules/ngx-croppie/ngx-croppie.component';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.css']
+})
+export class AppComponent implements OnInit, OnChanges {
+ title = 'app works';
+ @ViewChild('ngxCroppie') ngxCroppie: NgxCroppieComponent;
+
+ widthPx = '400';
+ heightPx = '400';
+ imageUrl = '';
+ currentImage: string;
+ croppieImage: string;
+
+ public get imageToDisplay() {
+ if (this.currentImage) { return this.currentImage; }
+ if (this.imageUrl) { return this.imageUrl; }
+ return `http://placehold.it/${this.widthPx}x${this.heightPx}`;
+ }
+
+ public get croppieOptions(): CroppieOptions {
+ const opts: CroppieOptions = {};
+ opts.viewport = {
+ width: parseInt(this.widthPx, 10),
+ height: parseInt(this.heightPx, 10)
+ };
+ opts.boundary = {
+ width: parseInt(this.widthPx, 10),
+ height: parseInt(this.heightPx, 10)
+ };
+ opts.enforceBoundary = true;
+ return opts;
+ }
+
+ ngOnInit() {
+ this.currentImage = this.imageUrl;
+ this.croppieImage = this.imageUrl;
+ }
+
+ ngOnChanges(changes: any) {
+ if (this.croppieImage) { return; }
+ if (!changes.imageUrl) { return; }
+ if (!changes.imageUrl.previousValue && changes.imageUrl.currentValue) {
+ this.croppieImage = changes.imageUrl.currentValue;
+ }
+ }
+
+
+ // modalOpened() {
+ // if (this.croppieImage) {
+ // console.log('binding image to croppie');
+ // this.ngxCroppie.bind();
+ // }
+ // }
+ newImageResultFromCroppie(img: string) {
+ this.croppieImage = img;
+ }
+
+ saveImageFromCroppie() {
+ this.currentImage = this.croppieImage;
+ }
+
+ cancelCroppieEdit() {
+ this.croppieImage = this.currentImage;
+ }
+
+ imageUploadEvent(evt: any) {
+ if (!evt.target) { return; }
+ if (!evt.target.files) { return; }
+ if (evt.target.files.length !== 1) { return; }
+ const file = evt.target.files[0];
+ if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif' && file.type !== 'image/jpg') { return; }
+ const fr = new FileReader();
+ fr.onloadend = (loadEvent) => {
+ this.croppieImage = fr.result;
+ };
+ fr.readAsDataURL(file);
+ }
+}
+
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
new file mode 100644
index 0000000..5a6336d
--- /dev/null
+++ b/src/app/app.module.ts
@@ -0,0 +1,20 @@
+import { NgxCroppieModule } from './modules/ngx-croppie/ngx-croppie.module';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+
+import { AppComponent } from './app.component';
+
+
+@NgModule({
+ declarations: [
+ AppComponent
+ ],
+ imports: [
+ BrowserModule,
+ NgxCroppieModule
+ ],
+ providers: [],
+ bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/src/app/modules/ngx-croppie/ngx-croppie.component.css b/src/app/modules/ngx-croppie/ngx-croppie.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/ngx-croppie/ngx-croppie.component.html b/src/app/modules/ngx-croppie/ngx-croppie.component.html
new file mode 100644
index 0000000..e7395eb
--- /dev/null
+++ b/src/app/modules/ngx-croppie/ngx-croppie.component.html
@@ -0,0 +1 @@
+
diff --git a/src/app/modules/ngx-croppie/ngx-croppie.component.spec.ts b/src/app/modules/ngx-croppie/ngx-croppie.component.spec.ts
new file mode 100644
index 0000000..47f86ad
--- /dev/null
+++ b/src/app/modules/ngx-croppie/ngx-croppie.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NgxCroppieComponent } from './ngx-croppie.component';
+
+describe('NgxCroppieComponent', () => {
+ let component: NgxCroppieComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ NgxCroppieComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NgxCroppieComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/ngx-croppie.component.ts b/src/app/modules/ngx-croppie/ngx-croppie.component.ts
similarity index 69%
rename from src/ngx-croppie.component.ts
rename to src/app/modules/ngx-croppie/ngx-croppie.component.ts
index 0537e06..6882bd1 100644
--- a/src/ngx-croppie.component.ts
+++ b/src/app/modules/ngx-croppie/ngx-croppie.component.ts
@@ -1,6 +1,6 @@
-import { NgxCroppieModule } from './ngx-croppie';
-import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, OnInit, ViewChild, ElementRef } from '@angular/core';
-import Croppie from 'croppie';
+import { Component, OnInit, Input, EventEmitter, Output, ViewChild, ElementRef } from '@angular/core';
+
+import * as Croppie from 'croppie';
import { CroppieOptions, ResultOptions } from 'croppie';
export type Type = 'canvas' | 'base64' | 'html' | 'blob' | 'rawcanvas';
@@ -10,6 +10,7 @@ export interface TempResultOptions extends ResultOptions {
}
@Component({
+ // tslint:disable-next-line:component-selector
selector: 'ngx-croppie',
template: ``
})
@@ -19,18 +20,20 @@ export class NgxCroppieComponent implements OnInit {
@Input() imageUrl: string;
@Input() bind: (img: string) => void;
@Input() outputFormatOptions: TempResultOptions = { type: 'base64', size: 'viewport' };
- @Output() result: EventEmitter = new EventEmitter();
+ @Output() result: EventEmitter
+ = new EventEmitter();
private _croppie: Croppie;
ngOnInit(): void {
- this._croppie = new Croppie(this.imageEdit.nativeElement, this.croppieOptions);
+ // https://github.com/Foliotek/Croppie/issues/470 :-( )
+ this._croppie = new Croppie['Croppie'](this.imageEdit.nativeElement, this.croppieOptions);
this._croppie.bind({
url: this.imageUrl
});
this.bind = (img: string) => {
this._croppie.bind({ url: this.imageUrl });
- }
+ };
}
newResult() {
@@ -39,7 +42,7 @@ export class NgxCroppieComponent implements OnInit {
});
}
- rotate(degrees: number){
+ rotate(degrees: 90 | 180 | 270 | -90 | -180 | -270) {
this._croppie.rotate(degrees);
}
-}
\ No newline at end of file
+}
diff --git a/src/app/modules/ngx-croppie/ngx-croppie.module.ts b/src/app/modules/ngx-croppie/ngx-croppie.module.ts
new file mode 100644
index 0000000..9383d48
--- /dev/null
+++ b/src/app/modules/ngx-croppie/ngx-croppie.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgxCroppieComponent } from './ngx-croppie.component';
+
+@NgModule({
+ imports: [
+ CommonModule
+ ],
+ declarations: [NgxCroppieComponent],
+ exports: [
+ NgxCroppieComponent
+ ]
+})
+export class NgxCroppieModule { }
diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
new file mode 100644
index 0000000..3612073
--- /dev/null
+++ b/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+ production: true
+};
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
new file mode 100644
index 0000000..b7f639a
--- /dev/null
+++ b/src/environments/environment.ts
@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+ production: false
+};
diff --git a/src/favicon.ico b/src/favicon.ico
new file mode 100644
index 0000000..8081c7c
Binary files /dev/null and b/src/favicon.ico differ
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..41dacea
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+ NgxCroppie
+ _co.newResult()) !== false);
- ad = (pd_0 && ad);
- }
- return ad;
- },(null as any),(null as any)))],(null as any),(null as any));
-}
-export function View_NgxCroppieComponent_Host_0(_l:any):i0.ɵViewDefinition {
- return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),1,'ngx-croppie',
- ([] as any[]),(null as any),(null as any),(null as any),View_NgxCroppieComponent_0,
- RenderType_NgxCroppieComponent)),i0.ɵdid(114688,(null as any),0,i1.NgxCroppieComponent,
- ([] as any[]),(null as any),(null as any))],(_ck,_v) => {
- _ck(_v,1,0);
- },(null as any));
-}
-export const NgxCroppieComponentNgFactory:i0.ComponentFactory = i0.ɵccf('ngx-croppie',
- i1.NgxCroppieComponent,View_NgxCroppieComponent_Host_0,{croppieOptions:'croppieOptions',
- imageUrl:'imageUrl',bind:'bind',outputFormatOptions:'outputFormatOptions'},
- {result:'result'},([] as any[]));
-//# sourceMappingURL=data:application/json;base64,eyJmaWxlIjoiQzovVXNlcnMvZGVlai9Eb2N1bWVudHMvR2l0SHViL25neC1jcm9wcGllL3NyYy9uZ3gtY3JvcHBpZS5jb21wb25lbnQubmdmYWN0b3J5LnRzIiwidmVyc2lvbiI6Mywic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsibmc6Ly8vQzovVXNlcnMvZGVlai9Eb2N1bWVudHMvR2l0SHViL25neC1jcm9wcGllL3NyYy9uZ3gtY3JvcHBpZS5jb21wb25lbnQudHMiLCJuZzovLy9DOi9Vc2Vycy9kZWVqL0RvY3VtZW50cy9HaXRIdWIvbmd4LWNyb3BwaWUvc3JjL25neC1jcm9wcGllLmNvbXBvbmVudC50cy5OZ3hDcm9wcGllQ29tcG9uZW50Lmh0bWwiLCJuZzovLy9DOi9Vc2Vycy9kZWVqL0RvY3VtZW50cy9HaXRIdWIvbmd4LWNyb3BwaWUvc3JjL25neC1jcm9wcGllLmNvbXBvbmVudC50cy5OZ3hDcm9wcGllQ29tcG9uZW50X0hvc3QuaHRtbCJdLCJzb3VyY2VzQ29udGVudCI6WyIgIiwiPGRpdiAjaW1hZ2VFZGl0ICh1cGRhdGUpPVwibmV3UmVzdWx0KClcIj48L2Rpdj4iLCI8bmd4LWNyb3BwaWU+PC9uZ3gtY3JvcHBpZT4iXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7Ozs7Ozt1RENBQTtNQUFBO01BQUE7UUFBQTtRQUFBO1FBQWdCO1VBQUE7VUFBQTtRQUFBO1FBQWhCO01BQUE7OztvQkNBQTtNQUFBO29DQUFBLFVBQUE7TUFBQTtJQUFBOzs7Ozs7In0=
diff --git a/src/ngx-croppie.ngfactory.ts b/src/ngx-croppie.ngfactory.ts
deleted file mode 100644
index e774f30..0000000
--- a/src/ngx-croppie.ngfactory.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @fileoverview This file is generated by the Angular template compiler.
- * Do not edit.
- * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride}
- */
- /* tslint:disable */
-
-
-import * as i0 from '@angular/core';
-import * as i1 from './ngx-croppie';
-import * as i2 from '@angular/common';
-export const NgxCroppieModuleNgFactory:i0.NgModuleFactory = i0.ɵcmf(i1.NgxCroppieModule,
- ([] as any[]),(_l:any) => {
- return i0.ɵmod([i0.ɵmpd(512,i0.ComponentFactoryResolver,i0.ɵCodegenComponentFactoryResolver,
- [[8,([] as any[])],[3,i0.ComponentFactoryResolver],i0.NgModuleRef]),i0.ɵmpd(4608,
- i2.NgLocalization,i2.NgLocaleLocalization,[i0.LOCALE_ID]),i0.ɵmpd(512,i2.CommonModule,
- i2.CommonModule,([] as any[])),i0.ɵmpd(512,i1.NgxCroppieModule,i1.NgxCroppieModule,
- ([] as any[]))]);
- });
-//# sourceMappingURL=data:application/json;base64,eyJmaWxlIjoiQzovVXNlcnMvZGVlai9Eb2N1bWVudHMvR2l0SHViL25neC1jcm9wcGllL3NyYy9uZ3gtY3JvcHBpZS5uZ2ZhY3RvcnkudHMiLCJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJuZzovLy9DOi9Vc2Vycy9kZWVqL0RvY3VtZW50cy9HaXRIdWIvbmd4LWNyb3BwaWUvc3JjL25neC1jcm9wcGllLnRzIl0sInNvdXJjZXNDb250ZW50IjpbIiAiXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=
diff --git a/src/ngx-croppie.ts b/src/ngx-croppie.ts
deleted file mode 100644
index 8b52608..0000000
--- a/src/ngx-croppie.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import {CommonModule} from '@angular/common';
-import { NgxCroppieComponent } from './ngx-croppie.component';
-
-
-@NgModule({
- imports: [CommonModule],
- declarations: [
- NgxCroppieComponent
- ],
- providers: [],
- exports: [
- NgxCroppieComponent
- ]
-})
-export class NgxCroppieModule {
-
-}
diff --git a/src/polyfills.ts b/src/polyfills.ts
new file mode 100644
index 0000000..af84770
--- /dev/null
+++ b/src/polyfills.ts
@@ -0,0 +1,79 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ * file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js'; // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import 'core-js/es6/reflect';
+
+
+/** Evergreen browsers require these. **/
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+import 'core-js/es7/reflect';
+
+
+/**
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
+// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+ // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+
+ /*
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ */
+// (window as any).__Zone_enable_cross_context_check = true;
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..90d4ee0
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/src/test.ts b/src/test.ts
new file mode 100644
index 0000000..1631789
--- /dev/null
+++ b/src/test.ts
@@ -0,0 +1,20 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+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);
diff --git a/src/testing/testing-bootstrap.js b/src/testing/testing-bootstrap.js
deleted file mode 100644
index 5d16182..0000000
--- a/src/testing/testing-bootstrap.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * Bootstrap file for unit tests, based on the example here:
- * https://github.com/AngularClass/angular2-webpack-starter/blob/23dd27f837fd1d3f3775383beec804ffe79245bf/spec-bundle.js
- *
- * The idea is to use Webpack to dynamically require each of the `.spec.ts` files and also set the
- * test providers in a single place, allowing the testing of DOM in component tests.
- */
-
-// @AngularClass
-/*
- * When testing with webpack and ES6, we have to do some extra
- * things get testing to work right. Because we are gonna write test
- * in ES6 to, we have to compile those as well. That's handled in
- * karma.conf.js with the karma-webpack plugin. This is the entry
- * file for webpack test. Just like webpack will create a bundle.js
- * file for our client, when we run test, it well compile and bundle them
- * all here! Crazy huh. So we need to do some setup
-*/
-Error.stackTraceLimit = Infinity;
-
-require('core-js');
-
-require('reflect-metadata/Reflect');
-require('zone.js/dist/zone');
-require('zone.js/dist/long-stack-trace-zone');
-require('zone.js/dist/proxy');
-require('zone.js/dist/sync-test');
-require('zone.js/dist/jasmine-patch');
-require('zone.js/dist/async-test');
-require('zone.js/dist/fake-async-test');
-
-// RxJS
-require('rxjs/Rx');
-
-var testing = require('@angular/core/testing');
-var browser = require('@angular/platform-browser-dynamic/testing');
-
-testing.TestBed.initTestEnvironment(
- browser.BrowserDynamicTestingModule,
- browser.platformBrowserDynamicTesting()
-);
-
-Object.assign(global, testing);
-
-// Jasmine gets into infinite loops on some of Angular's
-// circular data structures. This stops a browser hang.
-// See https://github.com/jasmine/jasmine/issues/424
-jasmine.MAX_PRETTY_PRINT_DEPTH = 3;
-
-/*
- Ok, this is kinda crazy. We can use the the context method on
- require that webpack created in order to tell webpack
- what files we actually want to require or import.
- Below, context will be an function/object with file names as keys.
- using that regex we are saying look in ./src/app and ./test then find
- any file that ends with spec.js and get its path. By passing in true
- we say do this recursively
-*/
-var testContext = require.context('..', true, /\.spec\.ts/);
-
-/*
- * get all the files, for each file, call the context function
- * that will require the file and load it up here. Context will
- * loop and require those spec files here
- */
-function requireAll(requireContext) {
- return requireContext.keys().map(requireContext);
-}
-
-// requires and returns all modules that match
-var modules = requireAll(testContext);
diff --git a/src/testing/testing-helpers.ts b/src/testing/testing-helpers.ts
deleted file mode 100644
index 4c2873b..0000000
--- a/src/testing/testing-helpers.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import {Component, DebugElement, Type} from '@angular/core';
-import {By} from '@angular/platform-browser';
-import {TestBed, ComponentFixture} from '@angular/core/testing';
-
-/**
- * Helper Functions and test components for use in unit tests.
- */
-
-/**
- * Get an array of the inner items text, e.g. ['item 1', 'item 2', 'item 3' ... ]
- */
-export function getListItemsText(fixture: ComponentFixture): string[] {
- return getListItems(fixture).map(el => el.innerText);
-}
-
-/**
- * Return all the items in the component's list
- */
-export function getListItems(fixture: ComponentFixture): HTMLLIElement[] {
- return fixture.debugElement.queryAll(By.css('.list-item'))
- .map((el: DebugElement) => el.nativeElement);
-}
-
-/**
- * Returns the PaginationControlsDirective from the template of the ComponentTestComponent.
- */
-export function getControlsDirective(fixture: ComponentFixture): PaginationControlsDirective {
- return fixture.debugElement.query(By.css('pagination-template')).references['p'];
-}
-
-/**
- * Return the list items making up the pagination links, e.g.
- * ['1', '2', '3', '...', '10']
- *
- * If includeAll is set to true, the boundary links will also be included.
- */
-export function getPageLinkItems(fixture: ComponentFixture,
- selector: string = 'pagination-controls li',
- includeAll: boolean = false): string[] {
- let all = fixture.debugElement.queryAll(By.css(selector))
- .map((el: DebugElement) => el.nativeElement.innerText);
-
- if (includeAll) {
- return all;
- } else {
- return all.filter(str => str.match(/\d+|\.\.\./))
- .map(str => str.match(/\d+|\.\.\./)[0]);
- }
-
-}
-
-/**
- * Shortcut function for setting a custom template on a component under test.
- */
-export function overrideTemplate(component: Type, templateString: string): void {
- TestBed.overrideComponent(component, {
- set: {
- template: templateString
- }
- });
-}
-
-/**
- * Test Component for testing the default controls component
- */
-@Component({
- template: `
-
- `
-})
-export class ComponentTestComponent {
- maxSize: number = 9;
- directionLinks: boolean = true;
- autoHide: boolean = true;
- collection: string[] = [];
- config: PaginationInstance = {
- id: 'test',
- itemsPerPage: 10,
- currentPage: 1
- };
- pageChanged() {}
-
- constructor() {
- this.collection = Array.from(new Array(100), (x, i) => `item ${i + 1}`);
- }
-}
diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json
new file mode 100644
index 0000000..39ba8db
--- /dev/null
+++ b/src/tsconfig.app.json
@@ -0,0 +1,13 @@
+{
+ "extends": "../tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../out-tsc/app",
+ "baseUrl": "./",
+ "module": "es2015",
+ "types": []
+ },
+ "exclude": [
+ "test.ts",
+ "**/*.spec.ts"
+ ]
+}
diff --git a/src/tsconfig.spec.json b/src/tsconfig.spec.json
new file mode 100644
index 0000000..ac22a29
--- /dev/null
+++ b/src/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+ "extends": "../tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../out-tsc/spec",
+ "baseUrl": "./",
+ "module": "commonjs",
+ "types": [
+ "jasmine",
+ "node"
+ ]
+ },
+ "files": [
+ "test.ts"
+ ],
+ "include": [
+ "**/*.spec.ts",
+ "**/*.d.ts"
+ ]
+}
diff --git a/src/typings.d.ts b/src/typings.d.ts
new file mode 100644
index 0000000..ef5c7bd
--- /dev/null
+++ b/src/typings.d.ts
@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+ id: string;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 5748cb6..a6c016b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,32 +1,19 @@
{
+ "compileOnSave": false,
"compilerOptions": {
- "baseUrl": ".",
- "declaration": true,
- "stripInternal": true,
- "experimentalDecorators": true,
- "strictNullChecks": true,
- "noImplicitAny": true,
- "module": "es2015",
- "moduleResolution": "node",
- "paths": {
- "@angular/core": ["node_modules/@angular/core"],
- "rxjs/*": ["node_modules/rxjs/*"]
- },
- "rootDir": ".",
- "outDir": "dist",
+ "outDir": "./dist/out-tsc",
"sourceMap": true,
- "inlineSources": true,
+ "declaration": false,
+ "moduleResolution": "node",
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
"target": "es5",
- "skipLibCheck": true,
+ "typeRoots": [
+ "node_modules/@types"
+ ],
"lib": [
- "es2015",
+ "es2017",
"dom"
]
- },
- "files": [
- "index.ts"
- ],
- "angularCompilerOptions": {
- "strictMetadataEmit": true
}
-}
\ No newline at end of file
+}
diff --git a/tslint.json b/tslint.json
new file mode 100644
index 0000000..9963d6c
--- /dev/null
+++ b/tslint.json
@@ -0,0 +1,143 @@
+{
+ "rulesDirectory": [
+ "node_modules/codelyzer"
+ ],
+ "rules": {
+ "arrow-return-shorthand": true,
+ "callable-types": true,
+ "class-name": true,
+ "comment-format": [
+ true,
+ "check-space"
+ ],
+ "curly": true,
+ "deprecation": {
+ "severity": "warn"
+ },
+ "eofline": true,
+ "forin": true,
+ "import-blacklist": [
+ true,
+ "rxjs",
+ "rxjs/Rx"
+ ],
+ "import-spacing": true,
+ "indent": [
+ true,
+ "spaces"
+ ],
+ "interface-over-type-literal": true,
+ "label-position": true,
+ "max-line-length": [
+ true,
+ 140
+ ],
+ "member-access": false,
+ "member-ordering": [
+ true,
+ {
+ "order": [
+ "static-field",
+ "instance-field",
+ "static-method",
+ "instance-method"
+ ]
+ }
+ ],
+ "no-arg": true,
+ "no-bitwise": true,
+ "no-console": [
+ true,
+ "debug",
+ "info",
+ "time",
+ "timeEnd",
+ "trace"
+ ],
+ "no-construct": true,
+ "no-debugger": true,
+ "no-duplicate-super": true,
+ "no-empty": false,
+ "no-empty-interface": true,
+ "no-eval": true,
+ "no-inferrable-types": [
+ true,
+ "ignore-params"
+ ],
+ "no-misused-new": true,
+ "no-non-null-assertion": true,
+ "no-shadowed-variable": true,
+ "no-string-literal": false,
+ "no-string-throw": true,
+ "no-switch-case-fall-through": true,
+ "no-trailing-whitespace": true,
+ "no-unnecessary-initializer": true,
+ "no-unused-expression": true,
+ "no-use-before-declare": true,
+ "no-var-keyword": true,
+ "object-literal-sort-keys": false,
+ "one-line": [
+ true,
+ "check-open-brace",
+ "check-catch",
+ "check-else",
+ "check-whitespace"
+ ],
+ "prefer-const": true,
+ "quotemark": [
+ true,
+ "single"
+ ],
+ "radix": true,
+ "semicolon": [
+ true,
+ "always"
+ ],
+ "triple-equals": [
+ true,
+ "allow-null-check"
+ ],
+ "typedef-whitespace": [
+ true,
+ {
+ "call-signature": "nospace",
+ "index-signature": "nospace",
+ "parameter": "nospace",
+ "property-declaration": "nospace",
+ "variable-declaration": "nospace"
+ }
+ ],
+ "unified-signatures": true,
+ "variable-name": false,
+ "whitespace": [
+ true,
+ "check-branch",
+ "check-decl",
+ "check-operator",
+ "check-separator",
+ "check-type"
+ ],
+ "directive-selector": [
+ true,
+ "attribute",
+ "app",
+ "camelCase"
+ ],
+ "component-selector": [
+ true,
+ "element",
+ "app",
+ "kebab-case"
+ ],
+ "no-output-on-prefix": true,
+ "use-input-property-decorator": true,
+ "use-output-property-decorator": true,
+ "use-host-property-decorator": true,
+ "no-input-rename": true,
+ "no-output-rename": true,
+ "use-life-cycle-interface": true,
+ "use-pipe-transform-interface": true,
+ "component-class-suffix": true,
+ "directive-class-suffix": true
+ }
+}
-
-
- {{ item }} -