@stackline/angular-multiselect-dropdown 2.0.3

package/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+Copyright (c) 2016 Cuppa Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,264 @@
+# @stackline/angular-multiselect-dropdown
+
+Angular 2 multiselect dropdown component for web applications. Easy to integrate and use.
+
+## Compatibility
+
+This package version is compatible with Angular 2.x and was tested in a real Angular 2.4.10 application.
+
+- Package: `@stackline/angular-multiselect-dropdown@2.0.3`
+- Angular peer range: `>=2.0.0 <3.0.0`
+- Tested Angular runtime: `2.4.10`
+
+## Table of Contents
+##### 1. Getting Started
+##### 2. Installation
+##### 3. Usage
+##### 4. Templates
+##### 5. Template Driven Forms support
+##### 5. Reactive Forms support
+##### 6. Settings configuration
+##### 7. Callbacks and events
+##### 8. Lazy lodaing - handle large data lists
+##### 9. Group By feature
+##### 10. Search filter for both plain list and grouped list
+
+
+
+
+
+## Getting Started
+### Installation
+- The Mutiselect Dropdown package is published as `@stackline/angular-multiselect-dropdown`.
+- Install the tested Angular 2 package:
+    `npm install @stackline/angular-multiselect-dropdown@2.0.3`
+
+- Once installed import `AngularMultiSelectModule` from the installed package into your module as follows:
+
+### Theme option
+
+The package ships two built-in skins:
+
+- `classic` keeps the original compact layout and is the default.
+- `material` enables the rounded chip and list-item spacing skin.
+
+```js
+this.dropdownSettings = {
+  text: 'Select Countries',
+  enableSearchFilter: true,
+  theme: 'material'
+};
+```
+
+### Usage
+Import `AngularMultiSelectModule` into `NgModule` in `app.module.ts`
+```js
+import { AngularMultiSelectModule } from '@stackline/angular-multiselect-dropdown/angular2-multiselect-dropdown';
+
+@NgModule({
+  // ...
+  imports: [
+    AngularMultiSelectModule,
+  ]
+  // ...
+})
+
+```
+
+Declare the component data variables and options in your component where you want to consume the dropdown component.
+
+```js
+
+import { Component, OnInit } from '@angular/core';
+
+export class AppComponent implements OnInit {
+    dropdownList = [];
+    selectedItems = [];
+    dropdownSettings = {};
+    ngOnInit(){
+        this.dropdownList = [
+                              {"id":1,"itemName":"India"},
+                              {"id":2,"itemName":"Singapore"},
+                              {"id":3,"itemName":"Australia"},
+                              {"id":4,"itemName":"Canada"},
+                              {"id":5,"itemName":"South Korea"},
+                              {"id":6,"itemName":"Germany"},
+                              {"id":7,"itemName":"France"},
+                              {"id":8,"itemName":"Russia"},
+                              {"id":9,"itemName":"Italy"},
+                              {"id":10,"itemName":"Sweden"}
+                            ];
+        this.selectedItems = [
+                                {"id":2,"itemName":"Singapore"},
+                                {"id":3,"itemName":"Australia"},
+                                {"id":4,"itemName":"Canada"},
+                                {"id":5,"itemName":"South Korea"}
+                            ];
+        this.dropdownSettings = { 
+                                  singleSelection: false, 
+                                  text:"Select Countries",
+                                  selectAllText:'Select All',
+                                  unSelectAllText:'UnSelect All',
+                                  enableSearchFilter: true,
+                                  classes:"myclass custom-class"
+                                };            
+    }
+    onItemSelect(item:any){
+        console.log(item);
+        console.log(this.selectedItems);
+    }
+    OnItemDeSelect(item:any){
+        console.log(item);
+        console.log(this.selectedItems);
+    }
+    onSelectAll(items: any){
+        console.log(items);
+    }
+    onDeSelectAll(items: any){
+        console.log(items);
+    }
+}
+```
+
+Add the following component tag in you template 
+```html
+<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" 
+    [settings]="dropdownSettings" 
+    (onSelect)="onItemSelect($event)" 
+    (onDeSelect)="OnItemDeSelect($event)"
+    (onSelectAll)="onSelectAll($event)"
+    (onDeSelectAll)="onDeSelectAll($event)"></angular2-multiselect>
+
+```
+### Template - For custom html of menu item
+
+```html
+<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings">
+  <c-item>
+          <ng-template let-item="item">
+            <label style="color: #333;min-width: 150px;">{{item.itemName}}</label>
+            <img [src]="item.image" style="width: 30px; border: 1px solid #efefef;margin-right: 20px;" />
+            <label>Capital - {{item.capital}}</label>
+          </ng-template>
+  </c-item>    
+</angular2-multiselect>
+
+```
+
+### Template - For custom html of Selected item - badge
+
+```html
+<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings">
+  <c-badge>
+           <ng-template let-item="item">
+            <label style="margin: 0px;">{{item.itemName}}</label>
+            <img [src]="item.image" style="width: 16px; margin-right: 5px;" />
+           </ng-template>
+  </c-badge>  
+</angular2-multiselect>
+
+```
+
+### Template Driven Forms support
+
+```html
+
+<form (ngSubmit)="onSubmit()" #loginForm="ngForm" style="border: 1px solid #ccc; padding: 10px;">
+        <div class="form-group">
+            <label for="name">Skills</label>
+            <angular2-multiselect [data]="itemList" [(ngModel)]="formModel.skills" 
+                                  [settings]="settings" 
+                                  (onSelect)="onItemSelect($event)"
+                                  (onDeSelect)="OnItemDeSelect($event)" 
+                                  (onSelectAll)="onSelectAll($event)" 
+                                  (onDeSelectAll)="onDeSelectAll($event)" name="skills">
+            </angular2-multiselect>
+        </div>
+</form>
+
+```
+
+```js
+
+formModel = {
+        name: '',
+        email: 'ascasc@aa.com',
+        skills: [{ "id": 1, "itemName": "Angular" }]
+    };
+
+```
+
+### Reactive Forms support
+
+```html
+
+<form [formGroup]="userForm" novalidate style="border: 1px solid #ccc; padding: 10px;">
+        <div class="form-group">
+            <label for="name">Skills</label>
+           <angular2-multiselect [data]="itemList" [(ngModel)]="selectedItems" 
+                                  [settings]="settings" 
+                                  (onSelect)="onItemSelect($event)"
+                                  (onDeSelect)="OnItemDeSelect($event)" 
+                                  (onSelectAll)="onSelectAll($event)" 
+                                  (onDeSelectAll)="onDeSelectAll($event)" formControlName="skills">
+            </angular2-multiselect>
+        </div>
+</form>
+
+```
+
+```js
+userForm: FormGroup;
+this.userForm = this.fb.group({
+            name: '',
+            email: ['', Validators.required],
+            skills: [[], Validators.required]
+        });
+
+```
+
+### Settings
+The following list of settings are supported by the component. Configure the settings to meet your requirement.
+
+| Setting         |Type    | Description            | Default Value |
+|:--- |:--- |:--- |:--- |
+| singleSelection | Boolean | To set the dropdown for single item selection only. | false |
+| text | String | Text to be show in the dropdown, when no items are selected. | 'Select' |
+| enableCheckAll | Boolean | Enable the option to select all items in list | false |
+| selectAllText | String | Text to display as the label of select all option | Select All |
+| unSelectAllText | String | Text to display as the label of unSelect option | UnSelect All |
+| enableSearchFilter | Boolean | Enable filter option for the list. | false |
+| maxHeight | Number | Set maximum height of the dropdown list in px. | 300 |
+| badgeShowLimit | Number | Limit the number of badges/items to show in the input field. If not set will show all selected. | All |
+| classes | String | Custom classes to the dropdown component. Classes are added to the dropdown selector tag. To add multiple classes, the value should be space separated class names.| '' |
+| limitSelection | Number | Limit the selection of number of items from the dropdown list. Once the limit is reached, all unselected items gets disabled. | none |
+| disabled | Boolean | Disable the dropdown | false |
+| searchPlaceholderText | String | Custom text for the search placeholder text. Default value would be 'Search' | 'Search' |
+| groupBy | String | Name of the field by which the list should be grouped. | none |
+| searchAutofocus | Boolean | Autofocus search input field| true |
+| labelKey | String | The property name which should be rendered as label in the dropdown| itemName |
+
+
+### Callback Methods
+- `onSelect` - Return the selected item on selection.
+    Example : (onSelect)="onItemSelect($event)"
+- `onDeSelect` - Return the un-selected item on un-selecting.
+    Example : (onDeSelect)="OnItemDeSelect($event)"
+- `onSelectAll` - Return the list of all selected items.
+    Example : (onSelectAll)="onSelectAll($event)"
+- `onDeSelectAll` - Returns an empty array.
+    Example : (onDeSelectAll)="onDeSelectAll($event)"
+- `onOpen` - Callback method fired after the dropdown opens
+    Example : (onOpen)="onOpen($event)"
+- `onClose` - Callback method, fired when the dropdown is closed
+    Example : (onClose)="onClose($event)"
+
+## Run locally
+- Clone the repository or downlod the .zip,.tar files.
+- Run `npm install`
+- Run `ng serve` for a dev server
+- Navigate to `http://localhost:4200/`
+ The app will automatically reload if you change any of the source files.
+
+## License
+MIT License.

package/angular2-multiselect-dropdown.ts

@@ -0,0 +1 @@
+export * from './src/app/angular2-multiselect-dropdown/multiselect.component';

package/gulpfile.js

@@ -0,0 +1,68 @@
+const gulp = require('gulp');
+const sass = require('node-sass');
+const inlineTemplates = require('gulp-inline-ng2-template');
+const exec = require('child_process').exec;
+
+/**
+ * Inline templates configuration.
+ * @see  https://github.com/ludohenin/gulp-inline-ng2-template
+ */
+const INLINE_TEMPLATES = {
+  SRC: './src/app/angular2-multiselect-dropdown/**/*.ts',
+  DIST: './tmp/src-inlined',
+  CONFIG: {
+    base: '/src/app/angular2-multiselect-dropdown',
+    target: 'es6',
+    useRelativePaths: true,
+    styleProcessor: compileSass
+  }
+};
+
+/**
+ * Inline external HTML and SCSS templates into Angular component files.
+ * @see: https://github.com/ludohenin/gulp-inline-ng2-template
+ */
+gulp.task('inline-templates', () => {
+  return gulp.src(INLINE_TEMPLATES.SRC)
+    .pipe(inlineTemplates(INLINE_TEMPLATES.CONFIG))
+    .pipe(gulp.dest(INLINE_TEMPLATES.DIST));
+});
+
+/**
+ * Build ESM by running npm task.
+ * This is a temporary solution until ngc is supported --watch mode.
+ * @see: https://github.com/angular/angular/issues/12867
+ */
+gulp.task('build:esm', ['inline-templates'], (callback) => {
+  exec('npm run ngcompile', function (error, stdout, stderr) {
+    console.log(stdout, stderr);
+    callback(error)
+  });
+});
+
+/**
+ * Implements ESM build watch mode.
+ * This is a temporary solution until ngc is supported --watch mode.
+ * @see: https://github.com/angular/angular/issues/12867
+ */
+gulp.task('build:esm:watch', ['build:esm'], () => {
+  gulp.watch('src/**/*', ['build:esm']);
+});
+
+gulp.task('copy', () => {
+  return gulp.src(['package.json','LICENSE','README.md'])
+  .pipe(gulp.dest('dist/'));
+});
+
+/**
+ * Compile SASS to CSS.
+ * @see https://github.com/ludohenin/gulp-inline-ng2-template
+ * @see https://github.com/sass/node-sass
+ */
+function compileSass(path, ext, file, callback) {
+  let compiledCss = sass.renderSync({
+    data: file,
+    outputStyle: 'compressed',
+  });
+  callback(null, compiledCss.css);
+}

package/inline-resources.js

@@ -0,0 +1,119 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+
+
+/**
+ * Simple Promiseify function that takes a Node API and return a version that supports promises.
+ * We use promises instead of synchronized functions to make the process less I/O bound and
+ * faster. It also simplifies the code.
+ */
+function promiseify(fn) {
+  return function () {
+    const args = [].slice.call(arguments, 0);
+    return new Promise((resolve, reject) => {
+      fn.apply(this, args.concat([function (err, value) {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(value);
+        }
+      }]));
+    });
+  };
+}
+
+const readFile = promiseify(fs.readFile);
+const writeFile = promiseify(fs.writeFile);
+
+/**
+ * Inline resources in a tsc/ngc compilation.
+ * @param projectPath {string} Path to the project.
+ */
+function inlineResources(projectPath) {
+
+  // Match only TypeScript files in projectPath.
+  const files = glob.sync('**/*.ts', {cwd: projectPath});
+
+  // For each file, inline the templates and styles under it and write the new file.
+  return Promise.all(files.map(filePath => {
+    const fullFilePath = path.join(projectPath, filePath);
+    return readFile(fullFilePath, 'utf-8')
+      .then(content => inlineResourcesFromString(content, url => {
+        // Resolve the template url.
+        return path.join(path.dirname(fullFilePath), url);
+      }))
+      .then(content => writeFile(fullFilePath, content))
+      .catch(err => {
+        console.error('An error occured: ', err);
+      });
+  }));
+}
+
+/**
+ * Inline resources from a string content.
+ * @param content {string} The source file's content.
+ * @param urlResolver {Function} A resolver that takes a URL and return a path.
+ * @returns {string} The content with resources inlined.
+ */
+function inlineResourcesFromString(content, urlResolver) {
+  // Curry through the inlining functions.
+  return [
+    inlineTemplate,
+    inlineStyle
+  ].reduce((content, fn) => fn(content, urlResolver), content);
+}
+
+/**
+ * Inline the templates for a source file. Simply search for instances of `templateUrl: ...` and
+ * replace with `template: ...` (with the content of the file included).
+ * @param content {string} The source file's content.
+ * @param urlResolver {Function} A resolver that takes a URL and return a path.
+ * @return {string} The content with all templates inlined.
+ */
+function inlineTemplate(content, urlResolver) {
+  return content.replace(/templateUrl:\s*'([^']+?\.html)'/g, function (m, templateUrl) {
+    const templateFile = urlResolver(templateUrl);
+    const templateContent = fs.readFileSync(templateFile, 'utf-8');
+    const shortenedTemplate = templateContent
+      .replace(/([\n\r]\s*)+/gm, ' ')
+      .replace(/"/g, '\\"');
+    return `template: "${shortenedTemplate}"`;
+  });
+}
+
+
+/**
+ * Inline the styles for a source file. Simply search for instances of `styleUrls: [...]` and
+ * replace with `styles: [...]` (with the content of the file included).
+ * @param urlResolver {Function} A resolver that takes a URL and return a path.
+ * @param content {string} The source file's content.
+ * @return {string} The content with all styles inlined.
+ */
+function inlineStyle(content, urlResolver) {
+  return content.replace(/styleUrls:\s*(\[[\s\S]*?\])/gm, function (m, styleUrls) {
+    const urls = eval(styleUrls);
+    return 'styles: ['
+      + urls.map(styleUrl => {
+        const styleFile = urlResolver(styleUrl);
+        const styleContent = fs.readFileSync(styleFile, 'utf-8');
+        const shortenedStyle = styleContent
+          .replace(/([\n\r]\s*)+/gm, ' ')
+          .replace(/"/g, '\\"');
+        return `"${shortenedStyle}"`;
+      })
+        .join(',\n')
+      + ']';
+  });
+}
+
+module.exports = inlineResources;
+module.exports.inlineResourcesFromString = inlineResourcesFromString;
+
+// Run inlineResources if module is being called directly from the CLI with arguments.
+if (require.main === module && process.argv.length > 2) {
+  console.log('Inlining resources from project:', process.argv[2]);
+  return inlineResources(process.argv[2]);
+}