Merge branch 'beta.4'

basvandenberg · Mar 12, 2017 · b6c5f1e · b6c5f1e
2 parents 0869192 + e065fcc
commit b6c5f1e
Show file tree

Hide file tree

Showing 27 changed files with 1,949 additions and 2,248 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,4 +8,3 @@ yarn-error.log
 *.orig
 *.swp
 *.tgz
-*.sh
diff --git a/.npmignore b/.npmignore
@@ -4,6 +4,10 @@
 /node_modules
 /src
 
+/dist/ng-select.js
+/dist/ng-select.d.ts
+/dist/ng-select.metadata.json
+
 yarn.lock
 gulpfile.js
 tslint.json
@@ -14,6 +18,9 @@ tslint.json
 npm-debug.log
 yarn-error.log
 
+*.spec.d.ts
+*.spec.js
+
 *.orig
 *.swp
 *.tgz

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,25 @@
 # Changelog
 
+<a name="1.0.0-beta.4"></a>
+## [1.0.0-beta.4](https://github.com/basvandenberg/ng-select/compare/1.0.0-beta.3...1.0.0-beta.4) (2017-03-12)
+
+### Features
+
+- Add `filterPlaceholder` input to set the filter placeholder (#121, #124).
+- Add `label` input to show persistent label above select container (#106).
+
+### Bug fixes
+
+- Re-enable AoT compilation (#113).
+
+### Improvements
+
+- Enable import of SelectComponent and IOption interface (#118).
+- Selected and deselected events return original option object.
+- Disable autocomplete for filter inputs (#126).
+- The NoOptionsFound output event returns filter term instead of null (#109).
+- Setup unit testing.
+
 
 <a name="1.0.0-beta.3"></a>
 ## [1.0.0-beta.3](https://github.com/basvandenberg/ng-select/compare/1.0.0-beta.2...1.0.0-beta.3) (2017-02-11)

diff --git a/README.md b/README.md
@@ -10,9 +10,9 @@ A select component for angular, based on the select2 JQuery plugin. See the
 -------------------------------------------------------------------------------
 ***IMPORTANT NOTICE***
 
-*The angular [press kit](https://angular.io/presskit.html) states that 3rd party
-projects should avoid the use of version numbers in their names. The name of
-this project is therefore changed from angular2-select to ng-select (since 
+*The angular [press kit](https://angular.io/presskit.html) states that 3rd
+party projects should avoid the use of version numbers in their names. The name
+of this project is therefore changed from angular2-select to ng-select (since
 angular-select was not available on npm anymore).*
 
 *The npm package `angular2-select` will be deprecated, the upcoming beta.4
@@ -43,7 +43,6 @@ For npm users:
 ```
 npm install --save ng-select
 ```
-
 For yarn users:
 ```
 yarn add ng-select
@@ -80,8 +79,6 @@ export class AppModule {}
 
 #### Systemjs
 
-*Not yet tested for the beta version.*
-
 In `systemjs.config.js` add `ng-select` to map and package:
 
 ```javascript
@@ -101,29 +98,31 @@ var packages = {
 
 | Name               | Type              | Default               | Description                                                                                |
 | ------------------ | ----------------- | --------------------- | ------------------------------------------------------------------------------------------ |
-| options            | `Array<option>`\* |                       | List of select option.                                                                     |
+| options            | `Array<IOption>`\* |                      | List of select option.                                                                     |
+| multiple           | `boolean`         | `false`               | If set to true, the select component is multi-select, otherwise single select.             |
 | allowClear         | `boolean`         | `false`               | Only applies to single select. If set to true, a clickable clear selection cross is shown. |
 | disabled           | `boolean`         | `false`               | If set to true, the select component is disabled.                                          |
 | highlightColor     | `string`          | `#2196f3`             | Background color of highlighted option.                                                    |
 | highlightTextColor | `string`          | `#fff`                | Text color of highlighted option.                                                          |
-| multiple           | `boolean`         | `false`               | If set to true, the select component is multi-select, otherwise single select.             |
+| label              | `string`          | ''                    | Label above select container. |
 | noFilter           | `number`          | `0`                   | Filter is hidden if the number of options is less than the given number.                   |
 | notFoundMsg        | `string`          | `"No results found"`  | The message shown if no options are found for the current filter input value.              |
 | placeholder        | `string`          | `""`                  | Placeholder text that is shown if no options are selected.
+| filterPlaceholder  | `string`          | `""`                  | Placeholder text that is shown on the filter input (**single select only**).
 
-\* `option` is an object with value and label (`{value: string, label: string}`)
+\* Object that implements the IOption interface (`{value: string, label: string}`)
 
 ## Output events
 
-| Name          | Value                      | Description                                                              |
-| ------------- | -------------------------- | ------------------------------------------------------------------------ |
-| opened        | `null`                     | If the select drop down is opened.                                       |
-| closed        | `null`                     | If the select drop down is closed.                                       |
-| selected      | `option`\*                 | If an options is selected, returning the selected option.                |
-| deselected    | `option`\* or `[option]`\* | If one or more options are deselected, returning the selected option(s). |
-| noOptionsFound| `null`                     | When the filter result changes to 'no results found'.                    |
+| Name          | Value                       | Description                                                              |
+| ------------- | --------------------------- | ------------------------------------------------------------------------ |
+| opened        | `null`                      | If the select drop down is opened.                                       |
+| closed        | `null`                      | If the select drop down is closed.                                       |
+| selected      | `IOption`\*                 | Returns selected option object.                                          |
+| deselected    | `IOption`\* or `[IOption]`\*| Returns deselected option object(s).                                     |
+| noOptionsFound| `string`                    | Returns search term if filter does not return any results.               |
 
-\* `option` is an object with value and label (`{value: string, label: string}`)
+\* Object that implements the IOption interface (`{value: string, label: string}`)
 
 ## Methods
 
@@ -136,16 +135,21 @@ var packages = {
 
 ## Limitations
 
+This component has limitations, which will be handled in future versions.
+Currently the goal is to work towards a stable 1.0 release version.
+
 ### Scalability
 
-For now, this component is not suitable for large numbers of options. If the
+The component is currently not suitable for large numbers of options. If the
 dropdown is opened, all options are added to the DOM, which will cause browser
 performance issues for large numbers of options. Therefore, if you have more
 that a few hundred options, then you will be better of with another solution.
 
-### Drop down positioning
+### Custom option view (using an option template)
 
-TODO
+In version 1.0 it will only be possible to define an option label that will be
+shown in the select dropdown. Customizing the option's view (adding an icon for
+example) is not possible. Also grouping of options is not supported.
 
 ## Develop
 

diff --git a/copy_to_demo.sh b/copy_to_demo.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+rm -v ng-select-*.tgz
+rm -rv demo/node_modules/ng-select/*
+
+npm pack
+tar -xzvf ng-select-*.tgz
+mv -v package/* demo/node_modules/ng-select/
+
+rm ng-select-*.tgz
+rmdir -v package
diff --git a/demo/package.json b/demo/package.json
@@ -13,7 +13,6 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cli": "^1.0.0-rc.0",
     "@angular/common": "^2.3.1",
     "@angular/compiler": "^2.3.1",
     "@angular/core": "^2.3.1",
@@ -24,13 +23,14 @@
     "@angular/platform-browser-dynamic": "^2.3.1",
     "@angular/router": "^3.3.1",
     "core-js": "^2.4.1",
-    "ng-select": "^1.0.0-beta.3",
+    "ng-select": "1.0.0-beta.4",
     "normalize.css": "^5.0.0",
     "rxjs": "^5.0.1",
     "ts-helpers": "^1.1.1",
     "zone.js": "^0.7.2"
   },
   "devDependencies": {
+    "@angular/cli": "^1.0.0-rc.0",
     "@angular/compiler-cli": "^2.3.1",
     "@types/jasmine": "2.5.38",
     "@types/node": "^6.0.42",

diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
@@ -82,6 +82,7 @@ <h1 id="value">Get the select value</h1>
             <ng-select
                 [options]="OPTIONS_BASIC"
                 [multiple]="true"
+                (noOptionsFound)="onNoOptionsFound($event)"
                 (selected)="lastEvent='selected ' + $event.label"
                 (deselected)="lastEvent='deselected ' + $event.label">
             </ng-select>
@@ -263,7 +264,7 @@ <h1 id="selection">Selection</h1>
             <div class="button-bar">
                 <button
                     md-raised-button
-                    (click)="clearSelectExample.clear()">
+                    (click)="onClearSelectionClick()">
                     Clear selection
                 </button>
             </div>
@@ -313,6 +314,20 @@ <h1 id="text">Customized text</h1>
         </md-card-content>
     </md-card>
 
+    <md-card>
+        <md-card-title>
+            Placeholder for filter input (single select only)
+        </md-card-title>
+        <md-card-content>
+            <ng-select
+                [options]="OPTIONS_BASIC"
+                filterPlaceholder="Type to filter">
+            </ng-select>
+            <p>If you set the <code>filterPlaceholder</code> property, this text will be shown in an empty filter input field.</p>
+            <section [innerHTML]="sample19html" highlight-js-content=".highlight"></section>
+        </md-card-content>
+    </md-card>
+
     <md-card>
         <md-card-title>
             No results found text
@@ -359,6 +374,20 @@ <h1 id="style">Customized style</h1>
         </md-card-content>
     </md-card>
 
+    <md-card>
+        <md-card-title>
+            Show a label
+        </md-card-title>
+        <md-card-content>
+            <ng-select
+                [options]="OPTIONS_BASIC"
+                label="Favorite character">
+            </ng-select>
+            <p>Set label property to show a label above the select container</p>
+            <section [innerHTML]="sample20html" highlight-js-content=".highlight"></section>
+        </md-card-content>
+    </md-card>
+
     <h1 id="filter">Hide filter</h1>
 
     <md-card>
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,4 +8,3 @@ yarn-error.log @@
     *.orig
     *.swp
     *.tgz
-    *.sh