angular2-select - npm Package Compare versions

Comparing version 1.0.0-alpha.11 to 1.0.0-alpha.12

CHANGELOG.md

@@ -6,4 +6,11 @@ # Changelog
 
+### Breaking changes
 
+- The method `clearSelected` is changed to `clear`.
 
+### Bug fixes
+
+- Trigger `deselected` event on clear single select click (#23).
+- Typo fixes.
+
 <a name="1.0.0-alpha.11"></a>
@@ -10,0 +17,0 @@ ## [1.0.0-alpha.11](https://github.com/basvandenberg/angular2-select/compare/1.0.0-alpha.10...1.0.0-alpha.11) ()

package.json

 {
   "name": "angular2-select",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.12",
   "description": "Select component for Angular 2 (based on select2 JQuery plugin).",
@@ -5,0 +5,0 @@ "main": "./index.js",

src/select.component.d.ts

@@ -42,3 +42,10 @@ /// <reference types="core-js" />
     onSelectionClick(event: any): void;
-    onClearAllClick(event: any): void;
+    /**
+     * Event handler of the single select clear (x) button click. It is assumed
+     * that there is exactly one item selected.
+     *
+     * The `deselect` method is used instead of `clear`, to heve the deselected
+     * event emitted.
+     */
+    onClearClick(event: any): void;
     onClearItemClick(event: any): void;
@@ -72,3 +79,3 @@ onToggleSelect(optionValue: any): void;
     popSelect(): void;
-    clearSelected(): void;
+    clear(): void;
     getOutputValue(): any;
@@ -75,0 +82,0 @@ /***************************************************************************

src/select.component.js

@@ -60,4 +60,11 @@ "use strict";
     };
-    SelectComponent.prototype.onClearAllClick = function (event) {
-        this.clearSelected();
+    /**
+     * Event handler of the single select clear (x) button click. It is assumed
+     * that there is exactly one item selected.
+     *
+     * The `deselect` method is used instead of `clear`, to heve the deselected
+     * event emitted.
+     */
+    SelectComponent.prototype.onClearClick = function (event) {
+        this.deselect(this.selection[0].value);
         event.stopPropagation();
@@ -215,3 +222,3 @@ };
     };
-    SelectComponent.prototype.clearSelected = function () {
+    SelectComponent.prototype.clear = function () {
         for (var item in this.optionsDict) {
@@ -374,3 +381,3 @@ this.optionsDict[item].selected = false;
                     selector: 'ng-select',
-                    template: "\n<div style=\"width:100%;position:relative;\">\n    <span style=\"width:100%\"\n        #container\n        [ngClass]=\"getContainerClass()\"\n        (window:resize)=\"onWindowResize()\"\n        (window:click)=\"onWindowClick()\">\n        <span class=\"selection\">\n            <span tabindex=0\n                #selectionSpan\n                [ngClass]=\"getSelectionClass()\"\n                (click)=\"onSelectionClick($event)\"\n                (keydown)=\"onKeydown($event)\">\n\n                <span class=\"select2-selection__rendered\"\n                    *ngIf=\"!multiple\">\n                    <span class=\"select2-selection__placeholder\">\n                        {{getPlaceholder()}}\n                    </span>\n                </span>\n\n                <span class=\"select2-selection__rendered\"\n                    *ngIf=\"!multiple && selection.length > 0\">\n                    <span class=\"select2-selection__clear\"\n                        *ngIf=\"allowClear\"\n                        (click)=\"onClearAllClick($event)\">\n                        x\n                    </span>\n                    {{selection[0].label}}\n                </span>\n\n                <ul class=\"select2-selection__rendered\"\n                    *ngIf=\"multiple\">\n                    <li class=\"select2-selection__choice\" title=\"{{option.label}}\"\n                        *ngFor=\"let option of selection\">\n                        <span class=\"select2-selection__choice__remove\"\n                            [attr.data-value]=\"option.value\"\n                            (click)=onClearItemClick($event)>\n                            \u00D7</span>\n                        {{option.label}}\n                    </li>\n                    <li class=\"select2-search select2-search--inline\">\n                        <input class=\"select2-search__field\"\n                            #searchInput\n                            placeholder=\"{{getPlaceholder()}}\"\n                            [ngStyle]=\"getInputStyle()\"\n                            (input)=\"onInput($event)\"\n                            (keydown)=\"onSearchKeydown($event)\"/>\n                    </li>\n                </ul>\n\n                <span class=\"select2-selection__arrow\">\n                    <b></b>\n                </span>\n            </span>\n        </span>\n    </span>\n    <select-dropdown\n        *ngIf=\"isOpen\"\n        #dropdown\n        [multiple]=\"multiple\"\n        [optionValues]=\"optionValues\"\n        [optionsDict]=\"optionsDict\"\n        [selection]=\"selection\"\n        [width]=\"width\"\n        [top]=\"top\"\n        [left]=\"left\"\n        (toggleSelect)=\"onToggleSelect($event)\"\n        (close)=\"onClose($event)\">\n    </select-dropdown>\n</div>\n",
+                    template: "\n<div style=\"width:100%;position:relative;\">\n    <span style=\"width:100%\"\n        #container\n        [ngClass]=\"getContainerClass()\"\n        (window:resize)=\"onWindowResize()\"\n        (window:click)=\"onWindowClick()\">\n        <span class=\"selection\">\n            <span tabindex=0\n                #selectionSpan\n                [ngClass]=\"getSelectionClass()\"\n                (click)=\"onSelectionClick($event)\"\n                (keydown)=\"onKeydown($event)\">\n\n                <span class=\"select2-selection__rendered\"\n                    *ngIf=\"!multiple\">\n                    <span class=\"select2-selection__placeholder\">\n                        {{getPlaceholder()}}\n                    </span>\n                </span>\n\n                <span class=\"select2-selection__rendered\"\n                    *ngIf=\"!multiple && selection.length > 0\">\n                    <span class=\"select2-selection__clear\"\n                        *ngIf=\"allowClear\"\n                        (click)=\"onClearClick($event)\">\n                        x\n                    </span>\n                    {{selection[0].label}}\n                </span>\n\n                <ul class=\"select2-selection__rendered\"\n                    *ngIf=\"multiple\">\n                    <li class=\"select2-selection__choice\" title=\"{{option.label}}\"\n                        *ngFor=\"let option of selection\">\n                        <span class=\"select2-selection__choice__remove\"\n                            [attr.data-value]=\"option.value\"\n                            (click)=onClearItemClick($event)>\n                            \u00D7</span>\n                        {{option.label}}\n                    </li>\n                    <li class=\"select2-search select2-search--inline\">\n                        <input class=\"select2-search__field\"\n                            #searchInput\n                            placeholder=\"{{getPlaceholder()}}\"\n                            [ngStyle]=\"getInputStyle()\"\n                            (input)=\"onInput($event)\"\n                            (keydown)=\"onSearchKeydown($event)\"/>\n                    </li>\n                </ul>\n\n                <span class=\"select2-selection__arrow\">\n                    <b></b>\n                </span>\n            </span>\n        </span>\n    </span>\n    <select-dropdown\n        *ngIf=\"isOpen\"\n        #dropdown\n        [multiple]=\"multiple\"\n        [optionValues]=\"optionValues\"\n        [optionsDict]=\"optionsDict\"\n        [selection]=\"selection\"\n        [width]=\"width\"\n        [top]=\"top\"\n        [left]=\"left\"\n        (toggleSelect)=\"onToggleSelect($event)\"\n        (close)=\"onClose($event)\">\n    </select-dropdown>\n</div>\n",
                     styles: [
@@ -377,0 +384,0 @@ style_1.DEFAULT_STYLES

src/select.component.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"SELECT_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"SelectComponent"},"multi":true},"SelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-select","template":"\n<div style=\"width:100%;position:relative;\">\n    <span style=\"width:100%\"\n        #container\n        [ngClass]=\"getContainerClass()\"\n        (window:resize)=\"onWindowResize()\"\n        (window:click)=\"onWindowClick()\">\n        <span class=\"selection\">\n            <span tabindex=0\n                #selectionSpan\n                [ngClass]=\"getSelectionClass()\"\n                (click)=\"onSelectionClick($event)\"\n                (keydown)=\"onKeydown($event)\">\n\n                <span class=\"select2-selection__rendered\"\n                    *ngIf=\"!multiple\">\n                    <span class=\"select2-selection__placeholder\">\n                        {{getPlaceholder()}}\n                    </span>\n                </span>\n\n                <span class=\"select2-selection__rendered\"\n                    *ngIf=\"!multiple && selection.length > 0\">\n                    <span class=\"select2-selection__clear\"\n                        *ngIf=\"allowClear\"\n                        (click)=\"onClearAllClick($event)\">\n                        x\n                    </span>\n                    {{selection[0].label}}\n                </span>\n\n                <ul class=\"select2-selection__rendered\"\n                    *ngIf=\"multiple\">\n                    <li class=\"select2-selection__choice\" title=\"{{option.label}}\"\n                        *ngFor=\"let option of selection\">\n                        <span class=\"select2-selection__choice__remove\"\n                            [attr.data-value]=\"option.value\"\n                            (click)=onClearItemClick($event)>\n                            ×</span>\n                        {{option.label}}\n                    </li>\n                    <li class=\"select2-search select2-search--inline\">\n                        <input class=\"select2-search__field\"\n                            #searchInput\n                            placeholder=\"{{getPlaceholder()}}\"\n                            [ngStyle]=\"getInputStyle()\"\n                            (input)=\"onInput($event)\"\n                            (keydown)=\"onSearchKeydown($event)\"/>\n                    </li>\n                </ul>\n\n                <span class=\"select2-selection__arrow\">\n                    <b></b>\n                </span>\n            </span>\n        </span>\n    </span>\n    <select-dropdown\n        *ngIf=\"isOpen\"\n        #dropdown\n        [multiple]=\"multiple\"\n        [optionValues]=\"optionValues\"\n        [optionsDict]=\"optionsDict\"\n        [selection]=\"selection\"\n        [width]=\"width\"\n        [top]=\"top\"\n        [left]=\"left\"\n        (toggleSelect)=\"onToggleSelect($event)\"\n        (close)=\"onClose($event)\">\n    </select-dropdown>\n</div>\n","styles":[{"__symbolic":"reference","module":"./style","name":"DEFAULT_STYLES"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"providers":[{"__symbolic":"reference","name":"SELECT_VALUE_ACCESSOR"}]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allowClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"opened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"deselected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"selectionSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["selectionSpan"]}]}],"dropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dropdown"]}]}],"searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["searchInput"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"onSelectionClick":[{"__symbolic":"method"}],"onClearAllClick":[{"__symbolic":"method"}],"onClearItemClick":[{"__symbolic":"method"}],"onToggleSelect":[{"__symbolic":"method"}],"onClose":[{"__symbolic":"method"}],"onWindowClick":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method"}],"onKeydown":[{"__symbolic":"method"}],"onInput":[{"__symbolic":"method"}],"onSearchKeydown":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"initOptions":[{"__symbolic":"method"}],"initDefaults":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"toggleSelect":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"deselect":[{"__symbolic":"method"}],"updateSelection":[{"__symbolic":"method"}],"popSelect":[{"__symbolic":"method"}],"clearSelected":[{"__symbolic":"method"}],"getOutputValue":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"handleKeyDown":[{"__symbolic":"method"}],"handleInput":[{"__symbolic":"method"}],"handleSearchKeyDown":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"blur":[{"__symbolic":"method"}],"updateWidth":[{"__symbolic":"method"}],"updatePosition":[{"__symbolic":"method"}],"getContainerClass":[{"__symbolic":"method"}],"getSelectionClass":[{"__symbolic":"method"}],"showPlaceholder":[{"__symbolic":"method"}],"getPlaceholder":[{"__symbolic":"method"}],"getInputStyle":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"SELECT_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"SelectComponent"},"multi":true},"SelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-select","template":"\n<div style=\"width:100%;position:relative;\">\n    <span style=\"width:100%\"\n        #container\n        [ngClass]=\"getContainerClass()\"\n        (window:resize)=\"onWindowResize()\"\n        (window:click)=\"onWindowClick()\">\n        <span class=\"selection\">\n            <span tabindex=0\n                #selectionSpan\n                [ngClass]=\"getSelectionClass()\"\n                (click)=\"onSelectionClick($event)\"\n                (keydown)=\"onKeydown($event)\">\n\n                <span class=\"select2-selection__rendered\"\n                    *ngIf=\"!multiple\">\n                    <span class=\"select2-selection__placeholder\">\n                        {{getPlaceholder()}}\n                    </span>\n                </span>\n\n                <span class=\"select2-selection__rendered\"\n                    *ngIf=\"!multiple && selection.length > 0\">\n                    <span class=\"select2-selection__clear\"\n                        *ngIf=\"allowClear\"\n                        (click)=\"onClearClick($event)\">\n                        x\n                    </span>\n                    {{selection[0].label}}\n                </span>\n\n                <ul class=\"select2-selection__rendered\"\n                    *ngIf=\"multiple\">\n                    <li class=\"select2-selection__choice\" title=\"{{option.label}}\"\n                        *ngFor=\"let option of selection\">\n                        <span class=\"select2-selection__choice__remove\"\n                            [attr.data-value]=\"option.value\"\n                            (click)=onClearItemClick($event)>\n                            ×</span>\n                        {{option.label}}\n                    </li>\n                    <li class=\"select2-search select2-search--inline\">\n                        <input class=\"select2-search__field\"\n                            #searchInput\n                            placeholder=\"{{getPlaceholder()}}\"\n                            [ngStyle]=\"getInputStyle()\"\n                            (input)=\"onInput($event)\"\n                            (keydown)=\"onSearchKeydown($event)\"/>\n                    </li>\n                </ul>\n\n                <span class=\"select2-selection__arrow\">\n                    <b></b>\n                </span>\n            </span>\n        </span>\n    </span>\n    <select-dropdown\n        *ngIf=\"isOpen\"\n        #dropdown\n        [multiple]=\"multiple\"\n        [optionValues]=\"optionValues\"\n        [optionsDict]=\"optionsDict\"\n        [selection]=\"selection\"\n        [width]=\"width\"\n        [top]=\"top\"\n        [left]=\"left\"\n        (toggleSelect)=\"onToggleSelect($event)\"\n        (close)=\"onClose($event)\">\n    </select-dropdown>\n</div>\n","styles":[{"__symbolic":"reference","module":"./style","name":"DEFAULT_STYLES"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"providers":[{"__symbolic":"reference","name":"SELECT_VALUE_ACCESSOR"}]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allowClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"opened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"deselected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"selectionSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["selectionSpan"]}]}],"dropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dropdown"]}]}],"searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["searchInput"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"onSelectionClick":[{"__symbolic":"method"}],"onClearClick":[{"__symbolic":"method"}],"onClearItemClick":[{"__symbolic":"method"}],"onToggleSelect":[{"__symbolic":"method"}],"onClose":[{"__symbolic":"method"}],"onWindowClick":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method"}],"onKeydown":[{"__symbolic":"method"}],"onInput":[{"__symbolic":"method"}],"onSearchKeydown":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"initOptions":[{"__symbolic":"method"}],"initDefaults":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"toggleSelect":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"deselect":[{"__symbolic":"method"}],"updateSelection":[{"__symbolic":"method"}],"popSelect":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"getOutputValue":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"handleKeyDown":[{"__symbolic":"method"}],"handleInput":[{"__symbolic":"method"}],"handleSearchKeyDown":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"blur":[{"__symbolic":"method"}],"updateWidth":[{"__symbolic":"method"}],"updatePosition":[{"__symbolic":"method"}],"getContainerClass":[{"__symbolic":"method"}],"getSelectionClass":[{"__symbolic":"method"}],"showPlaceholder":[{"__symbolic":"method"}],"getPlaceholder":[{"__symbolic":"method"}],"getInputStyle":[{"__symbolic":"method"}]}}}}

src/select.component.ngfactory.ts

@@ -433,3 +433,3 @@ /**
     this.markPathToRootAsCheckOnce();
-    const pd_0:any = ((<any>this.parent.parent.context.onClearAllClick($event)) !== false);
+    const pd_0:any = ((<any>this.parent.parent.context.onClearClick($event)) !== false);
     return (true && pd_0);
@@ -436,0 +436,0 @@ }

New alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Lines of code

4033

increased by0.35%

Worsened metrics

Total package byte prevSize

238078

decreased by-2.43%

Number of package files

22

decreased by-4.35%

Number of medium quality alerts

2

increased by100%

Number of lines in readme file

0

decreased by-100%

No dependency changes