angular2-tinymce - npm Package Compare versions

Comparing version 1.3.2 to 2.0.2

dist/angular2-tinymce.module.d.ts

@@ -1,4 +0,2 @@
-import tinymce from 'tinymce/tinymce.js';
 export declare class TinymceModule {
 }
-export { tinymce };

dist/angular2-tinymce.module.js

@@ -1,5 +0,11 @@
-import { NgModule } from '@angular/core';
-import { TinymceComponent } from './angular2-tinymce.component';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import tinymce from 'tinymce/tinymce.js';
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("@angular/core");
+var common_1 = require("@angular/common");
 var TinymceModule = (function () {
@@ -10,20 +16,8 @@ function TinymceModule() {
 }());
-export { TinymceModule };
-TinymceModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    TinymceComponent
-                ],
-                imports: [
-                    FormsModule,
-                    ReactiveFormsModule
-                ],
-                exports: [
-                    TinymceComponent
-                ]
-            },] },
-];
-/** @nocollapse */
-TinymceModule.ctorParameters = function () { return []; };
-export { tinymce };
+TinymceModule = __decorate([
+    core_1.NgModule({
+        imports: [common_1.CommonModule],
+    })
+], TinymceModule);
+exports.TinymceModule = TinymceModule;
 //# sourceMappingURL=angular2-tinymce.module.js.map

dist/angular2-tinymce.module.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"TinymceModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./angular2-tinymce.component","name":"TinymceComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"}],"exports":[{"__symbolic":"reference","module":"./angular2-tinymce.component","name":"TinymceComponent"}]}]}]},"tinymce":{"__symbolic":"reference","module":"tinymce/tinymce.js","default":true}}},{"__symbolic":"module","version":1,"metadata":{"TinymceModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./angular2-tinymce.component","name":"TinymceComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"}],"exports":[{"__symbolic":"reference","module":"./angular2-tinymce.component","name":"TinymceComponent"}]}]}]},"tinymce":{"__symbolic":"reference","module":"tinymce/tinymce.js","default":true}}}]
+[{"__symbolic":"module","version":3,"metadata":{"TinymceModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"TinymceModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}]}}}]

package.json

 {
   "name": "angular2-tinymce",
-  "version": "1.3.2",
-  "description": "Angular 2 component for TinyMCE MCE WYSIWYG editor",
-  "main": "dist/angular2-tinymce.module",
+  "version": "2.0.2",
+  "description": "Angular component for TinyMCE MCE WYSIWYG editor",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server --inline",
-    "build": "rm -rf dist && ngc -p tsconfig-aot.json",
-    "watch": "tsc --watch --project ./lib",
-    "ngc": "node_modules/.bin/ngc"
+    "build": "ngc -p ./tsconfig.json && tsc -p ./tsconfig.json",
+    "prebuild": "rimraf ./dist ./compiled && mkdir dist"
   },
+  "main": "dist/index.js",
   "keywords": [
+    "angular4",
     "angular2",
@@ -23,29 +21,26 @@ "angular",
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Ledzz/angular2-tinymce.git"
+  },
+  "bugs": {
+    "web": "https://github.com/Ledzz/angular2-tinymce/issues"
+  },
   "author": "Ledzz",
   "license": "ISC",
-  "dependencies": {
-    "@angular/common": "^2.4.4",
-    "@angular/compiler": "^2.4.4",
-    "@angular/core": "^2.4.4",
-    "@angular/forms": "^2.4.4",
-    "@angular/platform-browser": "^2.4.4",
-    "@angular/platform-browser-dynamic": "^2.4.4",
-    "core-js": "^2.4.1",
-    "rxjs": "^5.0.3",
-    "tinymce": "^4.5.2",
-    "zone.js": "^0.7.6"
-  },
   "devDependencies": {
-    "@angular/compiler": "^2.4.10",
-    "@angular/compiler-cli": "^4.0.0",
-    "@angular/platform-server": "^4.0.0",
-    "typescript": "^2.3.0-dev.20170326"
+    "@angular/common": "^4.0.1",
+    "@angular/compiler": "^4.0.1",
+    "@angular/compiler-cli": "^4.0.1",
+    "@angular/core": "^4.0.1",
+    "@angular/forms": "^4.0.1",
+    "@angular/platform-browser": "^4.0.1",
+    "@angular/platform-server": "^4.0.1",
+    "rimraf": "^2.6.1",
+    "rxjs": "^5.2.0",
+    "typescript": "^2.2.2",
+    "zone.js": "^0.8.5"
   },
-  "bugs": {
-    "web": "https://github.com/Ledzz/angular2-tinymce/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Ledzz/angular2-tinymce.git"
-  }
+  "typings": "dist/index.d.ts",
+  "dependencies": {}
 }

README.md

@@ -1,96 +0,245 @@
-# angular2-tinymce
-`Compatible with Angular 4!`
-## Usage
+# Pagination for Angular 2+[![Build Status](https://travis-ci.org/michaelbromley/ng2-pagination.svg?branch=master)](https://travis-ci.org/michaelbromley/ng2-pagination)
 
-First, install package via npm:
+This is a port of my [angular-utils-pagination](https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination)
+module from Angular 1.x to Angular 2. Due to fundamental differences in the design of Angular from version 2 onwards, the API is different but
+the idea is the same - the most simple possible way to add full-featured pagination to an Angular app.
+
+## Demo
+
+Check out the live demo here: http://michaelbromley.github.io/ng2-pagination/
+
+Play with it on Plunker here: http://plnkr.co/edit/JVQMPvV8z2brCIzdG3N4?p=preview
+
+## Quick Start
+
 ```
-npm install --save angular2-tinymce
+npm install ng2-pagination --save
 ```
 
-Then copy lightgray skin from [here] (https://github.com/Ledzz/angular2-tinymce/tree/master/demo/assets/tinymce/skins/lightgray) to the `/assets` folder. So, i.e. there must be available `/assets/tinymce/skins/lightgray/skin.min.css` file.
-You can override skin path by specifying `skin_url` option (default `/assets/tinymce/skins/lightgray`).
+### Angular Version
 
-Import `TinymceModule` in you `app.module.ts`:
-```typescript
-import { TinymceModule } from 'angular2-tinymce';
+This library is built to work with **Angular 2.3.0+**, and support ahead-of-time compilation.
+If you need to support an earlier or pre-release version of Angular for now, please see the changelog for advice on which version to use.
 
+### CommonJS
+
+ng2-pagination ships as un-bundled CommonJS modules (located in the `dist` folder), which can be imported with 
+`require('ng2-pagination');`, or `import` for those environments that support this method (e.g. TypeScript 1.6+).
+
+### System.register
+
+ng2-pagination also ships with a bundle in the system format (`dist/ng2-pagination-bundle.js`), suitable for use with the [es6-module-loader](https://github.com/ModuleLoader/es6-module-loader) 
+and related loaders such as SystemJS.
+
+## Simple Example
+
+```TypeScript
+// app.module.ts
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {Ng2PaginationModule} from 'ng2-pagination'; // <-- import the module
+import {MyComponent} from './my.component';
+
 @NgModule({
-  imports: [
-    ...
-    TinymceModule.withConfig()
-  ],
-  ...
+    imports: [BrowserModule, Ng2PaginationModule], // <-- include it in your app module
+    declarations: [MyComponent],
+    bootstrap: [MyComponent]
 })
-export class AppModule { }
+export class MyAppModule {}
 ```
 
-Then use it:
-```html
-<app-tinymce [formControl]='contentControl'></app-tinymce>
+```TypeScript
+// my.component.ts
+import {Component} from '@angular/core';
+
+@Component({
+    selector: 'my-component',
+    template: `
+    <ul>
+      <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li>
+    </ul>
+               
+    <pagination-controls (pageChange)="p = $event"></pagination-controls>
+    `
+})
+export class MyComponent {
+    public collection: any[] = someArrayOfThings;  
+}
 ```
-or
-```html
-<app-tinymce [(ngModel)]='content'></app-tinymce>
+
+## API
+
+### PaginatePipe
+
+The PaginatePipe should be placed at the end of an NgFor expression. It accepts a single argument, an object conforming 
+to the [`PaginationInstance` interface](/src/pagination-instance.ts). The following config options are available:
+
+```HTML
+<element *ngFor="let item of collection | paginate: { id: 'foo',
+                                                      itemsPerPage: pageSize,
+                                                      currentPage: p,
+                                                      totalItems: total }">...</element>
+
 ```
 
-## Configure
-You can configure TinyMCE globally:
-```typescript
-import { TinymceModule } from 'angular2-tinymce';
+* **`itemsPerPage`** [`number`] - **required** The number of items to display on each page.
+* **`currentPage`** [`number`] - **required** The current (active) page number.
+* **`id`** [`string`] If you need to support more than one instance of pagination at a time, set the `id` and ensure it
+matches the id attribute of the `PaginationControlsComponent` / `PaginationControlsDirective` (see below).
+* **`totalItems`** [`number`] The total number of items in the collection. Only useful when doing server-side paging, 
+where the collection size is limited to a single page returned by the server API. For in-memory paging, 
+this property should not be set, as it will be automatically set to the value of `collection.length`.
 
-@NgModule({
-  imports: [
-    ...
-    TinymceModule.withConfig({
-      ...  //any TinyMCE config here
-    })
-  ],
-  ...
-})
-export class AppModule { }
+### PaginationControlsComponent
+
+This a default component for displaying pagination controls. It is implemented on top of the `PaginationControlsDirective`, and has a pre-set
+template and styles based on the [Foundation 6 pagination component](http://foundation.zurb.com/sites/docs/pagination.html). If you require a more 
+customised set of controls, you will need to use the `PaginationControlsDirective` and implement your own component.
+
+```HTML
+<pagination-controls  id="some_id"
+                      (pageChange)="pageChanged($event)"
+                      maxSize="9"
+                      directionLinks="true"
+                      autoHide="true"
+                      previousLabel="Previous"
+                      nextLabel="Next"
+                      screenReaderPaginationLabel="Pagination"
+                      screenReaderPageLabel="page"
+                      screenReaderCurrentLabel="You're on page">
+</pagination-controls>
 ```
-Please note that config is extended a bit.
 
-- Besides the original config angular2-tinymce supports `baseURL` for providing, i.e., custom plugins paths.
+* **`id`** [`string`] If you need to support more than one instance of pagination at a time, set the `id` and ensure it
+matches the id set in the PaginatePipe config.
+* **`pageChange`** [`event handler`] The expression specified will be invoked whenever the page changes via a click on one of the
+pagination controls. The `$event` argument will be the number of the new page. This should be used to update the value of
+the `currentPage` variable which was passed to the `PaginatePipe`.
+* **`maxSize`** [`number`] Defines the maximum number of page links to display. Default is `7`.
+* **`directionLinks`** [`boolean`] If set to `false`, the "previous" and "next" links will not be displayed. Default is `true`.
+* **`autoHide`** [`boolean`] If set to `true`, the pagination controls will not be displayed when all items in the
+collection fit onto the first page. Default is `false`.
+* **`previousLabel`** [`string`] The label displayed on the "previous" link.
+* **`nextLabel`** [`string`] The label displayed on the "next" link.
+* **`screenReaderPaginationLabel`** [`string`] The word for "Pagination" used to label the controls for screen readers.
+* **`screenReaderPageLabel`** [`string`] The word for "page" used in certain strings generated for screen readers, e.g. "Next page".
+* **`screenReaderCurrentLabel`** [`string`] The phrase indicating the current page for screen readers, e.g. "You're on page <x>".
 
-- `auto_focus` option is boolean instead of string.
-- You cannot specify `selector` option (and you don't need to, right?).
-- `setup` and `init_instance_callback` are executed after the components'.
-- You can view more info about supported options [here] (https://github.com/Ledzz/angular2-tinymce/blob/master/src/angular2-tinymce.config.interface.ts)
+### PaginationControlsDirective
 
-## Plugins
-If you need other plugins than standart (`link paste table advlist autoresize lists code`) you should create plugins folder in the `baseURL` (default '/assets/tinymce') and place your plugins in it.
+The `PaginationControlsDirective` is used to build components for controlling your pagination instances. The directive selector is `pagination-template`, either as an element or an attribute. 
+It exports an API named "paginationApi", which can then be used to build the controls component.
 
-**Example:** 
-Place emoticons plugin to an `/assets/tinymce/plugins` folder, then:
-```typescript
-import { TinymceModule } from 'angular2-tinymce';
+It has the following inputs and outputs:
 
-@NgModule({
-  imports: [
-    ...
-    TinymceModule.withConfig({
-      plugins: ['emoticons'],
-      toolbar: 'emoticons'
-    })
-  ],
-  ...
-})
-export class AppModule { }
+```TypeScript
+@Input() id: string;
+@Input() maxSize: number;
+@Output() pageChange: EventEmitter<number>;
 ```
 
-Alternativaly you can `npm install tinymce --save` and import plugins like that:
-```typescript
-import 'tinymce/plugins/emoticons/plugin.js';
+Here is an example of how it would be used to build a custom component:
+
+```HTML
+<pagination-template #p="paginationApi"
+                     (pageChange)="pageChange.emit($event)">
+
+        <div class="pagination-previous" [class.disabled]="p.isFirstPage()">
+            <a *ngIf="!p.isFirstPage()" (click)="p.previous()"> < </a>
+        </div>
+
+        <div *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
+            <a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
+                <span>{{ page.label }}</span>
+            </a>
+            <div *ngIf="p.getCurrent() === page.value">
+                <span>{{ page.label }}</span>
+            </div>
+        </div>
+
+        <div class="pagination-next" [class.disabled]="p.isLastPage()">
+            <a *ngIf="!p.isLastPage()" (click)="p.next()"> > </a>
+        </div>
+    
+</pagination-template>
 ```
-## Contributing
-Please feel free to leave your PRs, issues, feature requests.
 
-## Upcoming features
-- [x] Tinymce configuration
-- [ ] Per-editor configuration
-- [ ] Add github pages demo
-- [ ] File uploading
-- [ ] Events
-- [ ] Aot support
-- [ ] Tests
+The key thing to note here is `#p="paginationApi"` - this provides a local variable, `p` (name it however you like), which can be used in the 
+template to access the directive's API methods and properties, which are explained below:
+
+* **`pages`** [`{ label: string, value: any }[]`] Array of page objects containing the page number and label.
+* **`maxSize`** [`number`]  Corresponds to the value of `maxSize` which is passed to the directive.
+* **`getCurrent()`** [`() => number`] Returns the current page number.
+* **`setCurrent(val)`** [`(val: number) => void`] Triggers the `pageChange` event with the page number passed as `val`.
+* **`previous()`** [`() => void`] Sets current page to previous, triggering the `pageChange` event.
+* **`next()`** [`() => void`] Sets current page to next, triggering the `pageChange` event.
+* **`isFirstPage()`** [`() => boolean`] Returns true if the current page is the first page.
+* **`isLastPage()`** [`() => boolean`] Returns true if the current page is the last page
+* **`getLastPage()`** [`() => number`] Returns the page number of the last page.
+
+For a real-world implementation of a custom component, take a look at [the source for the PaginationControlsComponent](/src/pagination-controls.component.ts).
+
+## Styling
+
+The `PaginationControlsComponent` can be styled by simply overriding the default styles. The component does not use view encapsulation, which means you do not need to use operators such as `/deep/` to target it.
+
+To avoid specificity issues, just add your own custom class name to the element, which will allow your styles to override the defaults:
+
+```HTML
+// head
+<style>
+  .my-pagination .ng2-pagination .current {
+    background: red;
+  }
+</style>
+
+// body
+<pagination-controls class="my-pagination"><pagination-controls>
+```
+
+## Server-Side Paging
+
+In many cases - for example when working with very large data-sets - we do not want to work with the full collection 
+in memory, and use some kind of server-side paging, where the server sends just a single page at a time.
+
+This scenario is supported by ng2-pagination by using the `totalItems` config option. 
+
+Given a server response json object like this:
+
+```
+{
+  "count": 14453,
+  "data": [
+    { /* item 1 */ },
+    { /* item 2 */ },
+    { /* item 3 */ },
+    { /*   ...  */ },
+    { /* item 10 */ }
+  ]
+}
+```
+
+we should pass the value of `count` to the `PaginatePipe` as the `totalItems` argument:
+
+```HTML
+<li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p, totalItems: res.count }">...</li>
+```
+
+This will allow the correct number of page links to be calculated. To see a complete example of this (including
+using the `async` pipe), see the [demo](http://michaelbromley.github.io/ng2-pagination/).
+
+## Build
+
+Requires globally-installed node (tested with v5.x) & npm. 
+
+```
+npm install
+npm run typings:install
+
+npm run test // Karma unit tests
+npm run docs:watch // Build the demo/docs app and watch
+```
+
+## License
+
+MIT

tsconfig.json

 {
+  "compileOnSave": false,
   "compilerOptions": {
-    "target": "es5",
-    "module": "es2015",
-    "sourceMap": true,
-    "moduleResolution": "node",
+    "declaration": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "lib": ["dom", "es6"],
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noImplicitAny": false,
     "outDir": "./dist",
-    "declaration": true,
-    "lib": ["es2015", "dom"]
+    "rootDir": "./src",
+    "sourceMap": true,
+    "target": "es5",
+    "inlineSources": false
   },
+
   "files": [
-    "lib/angular2-tinymce.module.ts"
-  ]
-}
+    "./src/index.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "genDir": "compiled",
+    "debug": true,
+    "skipMetadataEmit" : false,
+    "strictMetadataEmit": true
+  }
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

143929

increased by390.36%

Dependency count

0

decreased by-100%

Number of package files

27

increased by3.85%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

246

increased by153.61%

Worsened metrics

Dev dependency count

11

increased by175%

Lines of code

157

decreased by-72.5%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removed@angular/common@^2.4.4

• - Removed@angular/compiler@^2.4.4

• - Removed@angular/core@^2.4.4

• - Removed@angular/forms@^2.4.4

• - Removed@angular/platform-browser@^2.4.4

• - Removed@angular/platform-browser-dynamic@^2.4.4

• - Removedcore-js@^2.4.1

• - Removedrxjs@^5.0.3

• - Removedtinymce@^4.5.2

• - Removedzone.js@^0.7.6

• - Removed@angular/common@2.4.10(transitive)

• - Removed@angular/compiler@2.4.10(transitive)

• - Removed@angular/core@2.4.10(transitive)

• - Removed@angular/forms@2.4.10(transitive)

• - Removed@angular/platform-browser@2.4.10(transitive)

• - Removed@angular/platform-browser-dynamic@2.4.10(transitive)

• - Removedcore-js@2.6.12(transitive)

• - Removedrxjs@5.5.12(transitive)

• - Removedsymbol-observable@1.0.1(transitive)

• - Removedtinymce@4.9.11(transitive)

• - Removedzone.js@0.7.8(transitive)