angular2-mentions - npm Package Compare versions

Comparing version 0.5.2 to 0.6.0

mention/mention.directive.d.ts

@@ -14,2 +14,10 @@ import { ElementRef, ComponentFactoryResolver, ViewContainerRef } from "@angular/core";
     private _viewContainerRef;
+    mention: any[];
+    mentionConfig: any;
+    searchTerm: EventEmitter<{}>;
+    private triggerChar;
+    private labelKey;
+    private disableSearch;
+    private maxItems;
+    private mentionSelect;
     searchString: string;
@@ -23,9 +31,3 @@ startPos: number;
     constructor(_element: ElementRef, _componentResolver: ComponentFactoryResolver, _viewContainerRef: ViewContainerRef);
-    triggerChar: string;
-    mention: any[];
-    mentionSelect: (selection: string) => (string);
-    labelKey: string;
-    disableSearch: boolean;
-    maxItems: number;
-    searchTerm: EventEmitter<{}>;
+    ngOnInit(): void;
     setIframe(iframe: HTMLIFrameElement): void;
@@ -32,0 +34,0 @@ stopEvent(event: any): void;

mention/mention.directive.js

@@ -28,4 +28,6 @@ "use strict";
         this._viewContainerRef = _viewContainerRef;
+        // event emitted whenever the search term changes
+        this.searchTerm = new core_2.EventEmitter();
+        // the character that will trigger the menu behavior
         this.triggerChar = "@";
-        this.mentionSelect = function (selection) { return selection; };
         // option to specify the field in the objects to be used as the item label
@@ -38,26 +40,8 @@ this.labelKey = 'label';
         this.maxItems = -1;
-        // event emitted whenever the search term changes
-        this.searchTerm = new core_2.EventEmitter();
+        // optional function to format the selected item before inserting the text
+        this.mentionSelect = function (selection) { return selection; };
     }
     Object.defineProperty(MentionDirective.prototype, "mention", {
         set: function (items) {
-            var _this = this;
-            if (items && items.length > 0) {
-                if (typeof items[0] == 'string') {
-                    // convert strings to objects
-                    var me_1 = this;
-                    this.items = items.map(function (label) {
-                        var object = {};
-                        object[me_1.labelKey] = label;
-                        return object;
-                    });
-                }
-                else {
-                    this.items = items;
-                }
-                // remove items without an objectKey (label)
-                this.items = this.items.filter(function (e) { return e[_this.labelKey]; });
-                this.items.sort(function (a, b) { return a[_this.labelKey].localeCompare(b[_this.labelKey]); });
-                this.updateSearchList();
-            }
+            this.items = items;
         },
@@ -67,2 +51,31 @@ enumerable: true,
     });
+    Object.defineProperty(MentionDirective.prototype, "mentionConfig", {
+        set: function (config) {
+            this.triggerChar = config.triggerChar || this.triggerChar;
+            this.labelKey = config.labelKey || this.labelKey;
+            this.disableSearch = config.disableSearch || this.disableSearch;
+            this.maxItems = config.maxItems || this.maxItems;
+            this.mentionSelect = config.mentionSelect || this.mentionSelect;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    MentionDirective.prototype.ngOnInit = function () {
+        var _this = this;
+        if (this.items && this.items.length > 0) {
+            if (typeof this.items[0] == 'string') {
+                // convert strings to objects
+                var me_1 = this;
+                this.items = this.items.map(function (label) {
+                    var object = {};
+                    object[me_1.labelKey] = label;
+                    return object;
+                });
+            }
+            // remove items without an labelKey or valueKey
+            this.items = this.items.filter(function (e) { return e[_this.labelKey]; });
+            this.items.sort(function (a, b) { return a[_this.labelKey].localeCompare(b[_this.labelKey]); });
+            this.updateSearchList();
+        }
+    };
     MentionDirective.prototype.setIframe = function (iframe) {
@@ -241,10 +254,6 @@ this.iframe = iframe;
 MentionDirective.propDecorators = {
-    'triggerChar': [{ type: core_1.Input },],
     'mention': [{ type: core_1.Input },],
-    'mentionSelect': [{ type: core_1.Input },],
-    'labelKey': [{ type: core_1.Input },],
-    'disableSearch': [{ type: core_1.Input },],
-    'maxItems': [{ type: core_1.Input },],
+    'mentionConfig': [{ type: core_1.Input },],
     'searchTerm': [{ type: core_2.Output },],
 };
 exports.MentionDirective = MentionDirective;

mention/mention.directive.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"MentionDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[mention]","host":{"(keydown)":"keyHandler($event)","(blur)":"blurHandler($event)","$quoted$":["(keydown)","(blur)"]}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}],"triggerChar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"mention":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"mentionSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"labelKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"searchTerm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"setIframe":[{"__symbolic":"method"}],"stopEvent":[{"__symbolic":"method"}],"blurHandler":[{"__symbolic":"method"}],"keyHandler":[{"__symbolic":"method"}],"updateSearchList":[{"__symbolic":"method"}],"showSearchList":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MentionDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[mention]","host":{"(keydown)":"keyHandler($event)","(blur)":"blurHandler($event)"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}],"triggerChar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"mention":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"mentionSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"labelKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"searchTerm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"setIframe":[{"__symbolic":"method"}],"stopEvent":[{"__symbolic":"method"}],"blurHandler":[{"__symbolic":"method"}],"keyHandler":[{"__symbolic":"method"}],"updateSearchList":[{"__symbolic":"method"}],"showSearchList":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"MentionDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[mention]","host":{"(keydown)":"keyHandler($event)","(blur)":"blurHandler($event)","$quoted$":["(keydown)","(blur)"]}}]}],"members":{"mention":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"mentionConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"searchTerm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"setIframe":[{"__symbolic":"method"}],"stopEvent":[{"__symbolic":"method"}],"blurHandler":[{"__symbolic":"method"}],"keyHandler":[{"__symbolic":"method"}],"updateSearchList":[{"__symbolic":"method"}],"showSearchList":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MentionDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[mention]","host":{"(keydown)":"keyHandler($event)","(blur)":"blurHandler($event)"}}]}],"members":{"mention":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"mentionConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"searchTerm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"setIframe":[{"__symbolic":"method"}],"stopEvent":[{"__symbolic":"method"}],"blurHandler":[{"__symbolic":"method"}],"keyHandler":[{"__symbolic":"method"}],"updateSearchList":[{"__symbolic":"method"}],"showSearchList":[{"__symbolic":"method"}]}}}}]

package.json

 {
   "name": "angular2-mentions",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "Angular 2 mentions for text fields.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -1,4 +0,4 @@
-# Angular 2 Mentions
+# Angular Mentions
 
-Simple Angular 2 mentions inspired by [Ment.io](https://github.com/jeff-collins/ment.io).
+Simple Angular mentions inspired by [Ment.io](https://github.com/jeff-collins/ment.io).
 
@@ -45,15 +45,20 @@ [Click here for a Demo](http://dmacfarlane.github.io/angular2-mentions/)
 
-#### Options
+#### Configuration Options
 
-- `[triggerChar]="@"` to specify the character that should trigger the menu behavior. The default value is '@'.
-- `[maxItems]="10"` to limit the number of items shown in the pop-up menu. The default is no limit.
-- `[mentionSelect]="formatter"` to specify a optional function to format the selected item before inserting the text.
-- `[labelKey]="'label'"` to specify the field to be used as the item label (when the items are objects).
-- `[disableSearch]="true"` to disable internal filtering (only useful if async search is used).
-- `(searchTerm)=""` event emitted whenever the search term changes. Can be used to trigger async search.
+The following optional configuration items can be used.
 
-#### TODO:
+| Option        | Default  | Description |
+| ---           | ---      | ---         |
+| triggerChar   | @        | The character that will trigger the menu behavior. |
+| maxItems      |          | Limit the number of items shown in the pop-up menu. The default is no limit. |
+| mentionSelect |          | An optional function to format the selected item before inserting the text. |
+| labelKey      | label    | The field to be used as the item label (when the items are objects). |
+| disableSearch | false    | Disable internal filtering (only useful if async search is used). |
 
-- Improve npm package structure
-- Improve menu positioning
-- Additional tests for options
+For Example: 
+
+    <input type="text" [mention]="items" [mentionConfig]="{triggerChar:'#',maxItems:10,labelKey:'name',valueKey:'value'}">
+
+#### Output Events
+
+- `(searchTerm)=""` event emitted whenever the search term changes. Can be used to trigger async search.

No alert changes

Improved metrics

Number of package files

24

increased by14.29%

Lines of code

773

increased by2.52%

Number of lines in readme file

64

increased by10.34%

Worsened metrics

Total package byte prevSize

48557

decreased by-0.36%

No dependency changes