@stackline/angular-multiselect-dropdown 2.0.5 → 4.0.1

package/README.md

@@ -6,13 +6,13 @@
 [![npm downloads](https://img.shields.io/npm/dt/@stackline/angular-multiselect-dropdown.svg?style=flat-square)](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)
 [![npm monthly](https://img.shields.io/npm/dm/@stackline/angular-multiselect-dropdown.svg?style=flat-square)](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)
 [![license](https://img.shields.io/npm/l/@stackline/angular-multiselect-dropdown.svg?style=flat-square)](https://github.com/alexandroit/angular-multiselect-dropdown/blob/master/LICENSE)
-[![Angular 2](https://img.shields.io/badge/Angular-2.x-red?style=flat-square&logo=angular)](https://alexandro.net/docs/angular/multiselect/angular-2/)
+[![Angular 4](https://img.shields.io/badge/Angular-4.x-red?style=flat-square&logo=angular)](https://alexandro.net/docs/angular/multiselect/angular-4/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-2.4-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org)
 [![GitHub stars](https://img.shields.io/github/stars/alexandroit/angular-multiselect-dropdown.svg?style=flat-square)](https://github.com/alexandroit/angular-multiselect-dropdown/stargazers)
 
-**[Documentation & Live Demos](https://alexandro.net/docs/angular/multiselect/)** | **[Angular 2 Demo](https://alexandro.net/docs/angular/multiselect/angular-2/)** | **[npm](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)** | **[Issues](https://github.com/alexandroit/angular-multiselect-dropdown/issues)** | **[Repository](https://github.com/alexandroit/angular-multiselect-dropdown)**
+**[Documentation & Live Demos](https://alexandro.net/docs/angular/multiselect/)** | **[Angular 4 Demo](https://alexandro.net/docs/angular/multiselect/angular-4/)** | **[npm](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)** | **[Issues](https://github.com/alexandroit/angular-multiselect-dropdown/issues)** | **[Repository](https://github.com/alexandroit/angular-multiselect-dropdown)**
 
-**Latest tested npm release:** `2.0.5` for Angular `2.x`
+**Latest tested npm release:** `4.0.1` for Angular `4.x`
 
 ---
 
@@ -24,15 +24,15 @@
 
 The original `angular2-multiselect-dropdown` package became difficult to keep current across multiple Angular generations. This maintained package keeps the classic API and template structure intact, introduces the new primary selector `<angular-multiselect>`, preserves the legacy alias `<angular2-multiselect>`, and publishes the project line by line so older applications can keep a predictable upgrade path.
 
-The repository contains the full documentation matrix from Angular 2 through Angular 21. The current public npm release is `2.0.5` for Angular 2.x applications.
+The repository contains the full documentation matrix from Angular 2 through Angular 21. The current public npm release is `4.0.1` for Angular 4.x applications.
 
-The Angular 2 package is compatible with Angular 2.x and was tested in a real Angular 2.4.10 application before publication.
+The Angular 4 package is compatible with Angular 4.x and was tested in a real Angular 4.4.7 application before npm publication.
 
 ## Features
 
 | Feature | Supported |
 | :--- | :---: |
-| Angular 2 tested published release line | ✅ |
+| Angular 4 tested published release line | ✅ |
 | Multi-select and single-select modes | ✅ |
 | Search and filter | ✅ |
 | Group by field | ✅ |
@@ -54,12 +54,13 @@ The Angular 2 package is compatible with Angular 2.x and was tested in a real An
 4. [Setup](#setup)
 5. [Custom CSS and SCSS Themes](#custom-css-and-scss-themes)
 6. [Basic Usage](#basic-usage)
-7. [Custom Templates](#custom-templates)
-8. [Forms Integration](#forms-integration)
-9. [Lazy Loading and Remote Data](#lazy-loading-and-remote-data)
-10. [Events](#events)
-11. [Run Locally](#run-locally)
-12. [License](#license)
+7. [Official Angular 4 Test Matrix](#official-angular-4-test-matrix)
+8. [Custom Templates](#custom-templates)
+9. [Forms Integration](#forms-integration)
+10. [Lazy Loading and Remote Data](#lazy-loading-and-remote-data)
+11. [Events](#events)
+12. [Run Locally](#run-locally)
+13. [License](#license)
 
 ## Rename Note
 
@@ -98,10 +99,10 @@ Each package family only installs on its matching Angular family. Framework majo
 ## Installation
 
 ```bash
-npm install @stackline/angular-multiselect-dropdown@2.0.5
+npm install @stackline/angular-multiselect-dropdown@4.0.1 --save-exact
 ```
 
-Install `2.0.5` for Angular 2.x applications. This patch keeps the tested Angular 2 behavior, makes `<angular-multiselect>` the documented standard selector, and keeps `<angular2-multiselect>` only as a legacy compatibility alias.
+Install `4.0.1` for Angular 4.x applications. This line keeps the tested Angular 4 behavior, makes `<angular-multiselect>` the documented standard selector, and keeps `<angular2-multiselect>` only as a legacy compatibility alias.
 
 ## Setup
 
@@ -155,20 +156,30 @@ Use the `css` file when you want a plain compiled starter that can be copied and
 
 ```ts
 dropdownList = [
-  { id: 1, itemName: 'India' },
-  { id: 2, itemName: 'Singapore' },
-  { id: 3, itemName: 'Australia' },
-  { id: 4, itemName: 'Canada' }
+  { id: 1, itemName: 'Brazil' },
+  { id: 2, itemName: 'Canada' },
+  { id: 3, itemName: 'Portugal' },
+  { id: 4, itemName: 'United States' },
+  { id: 5, itemName: 'Argentina' },
+  { id: 6, itemName: 'Germany' },
+  { id: 7, itemName: 'Japan' },
+  { id: 8, itemName: 'South Africa' }
 ];
 
-selectedItems = [{ id: 2, itemName: 'Singapore' }];
+selectedItems = [{ id: 2, itemName: 'Canada' }];
 
 dropdownSettings = {
   singleSelection: false,
-  text: 'Select Countries',
-  selectAllText: 'Select All',
-  unSelectAllText: 'UnSelect All',
+  text: 'Classic basic',
+  selectAllText: 'Select all',
+  unSelectAllText: 'Clear all',
   enableSearchFilter: true,
+  searchPlaceholderText: 'Search',
+  badgeShowLimit: 4,
+  maxHeight: 260,
+  showCheckbox: true,
+  noDataLabel: 'No data',
+  theme: 'classic',
   tagToBody: false
 };
 ```
@@ -185,6 +196,41 @@ dropdownSettings = {
 </angular-multiselect>
 ```
 
+## Official Angular 4 Test Matrix
+
+The published Angular 4 release was tested in a real Angular `4.4.7` application with `@stackline/angular-multiselect-dropdown@4.0.1`. The docs now use the same examples from that test app.
+
+Switch between skins through the settings object:
+
+```ts
+settings = {
+  text: 'Classic basic',
+  theme: 'classic'
+};
+
+materialSettings = {
+  text: 'Material basic',
+  theme: 'material'
+};
+```
+
+The same twelve scenarios are validated for both `classic` and `material`:
+
+| # | Scenario | Main settings tested |
+| :---: | :--- | :--- |
+| 01 | Basic multi | `{ enableSearchFilter: false }` |
+| 02 | Search + select all | Search, select all, clear all, events |
+| 03 | Single without checkbox | `{ singleSelection: true, showCheckbox: false, enableCheckAll: false }` |
+| 04 | Multi without checkbox | `{ showCheckbox: false, enableCheckAll: false }` |
+| 05 | Selection limit | `{ limitSelection: 2, badgeShowLimit: 2 }` |
+| 06 | Badge overflow | `{ badgeShowLimit: 2, maxHeight: 220 }` |
+| 07 | Grouped by region | `{ groupBy: 'region', maxHeight: 220 }` |
+| 08 | Disabled with value | `{ disabled: true }` |
+| 09 | Empty data | `{ noDataLabel: 'No records found' }` |
+| 10 | Long list with scroll | `{ maxHeight: 120, badgeShowLimit: 3 }` |
+| 11 | Local lazy loading | `{ lazyLoading: true, maxHeight: 120, badgeShowLimit: 3 }` |
+| 12 | Item + chip template | `<c-badge>` and `<c-item>` custom templates |
+
 ## Custom Templates
 
 ```html
@@ -264,10 +310,6 @@ The classic output contract is preserved:
 ```bash
 npm install
 npm run docs:sync
-npm run build-package
-cd docs-src/angular-21
-npm install --ignore-scripts
-npm run build
 ```
 
 ## 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]);
+}