@stackline/angular-multiselect-dropdown 2.0.4 → 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.4` 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.4` 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 | ✅ |
@@ -43,7 +43,7 @@ The Angular 2 package is compatible with Angular 2.x and was tested in a real An
 | Lazy loading and remote-data hooks | ✅ |
 | Theming via bundled CSS/SCSS | ✅ |
 | Primary selector `<angular-multiselect>` | ✅ |
-| Legacy selector `<angular2-multiselect>` | ✅ |
+| Legacy compatibility alias `<angular2-multiselect>` | ✅ |
 | Versioned docs builds per Angular line | ✅ |
 
 ## Table of Contents
@@ -54,19 +54,20 @@ 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
 
 - new package: `@stackline/angular-multiselect-dropdown`
 - previous package: `@stackline/angular2-multiselect-dropdown`
 - primary selector: `<angular-multiselect>`
-- legacy alias still accepted: `<angular2-multiselect>`
+- legacy alias still accepted only for compatibility: `<angular2-multiselect>`
 
 ## Angular Version Compatibility
 
@@ -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.4
+npm install @stackline/angular-multiselect-dropdown@4.0.1 --save-exact
 ```
 
-Install `2.0.4` for Angular 2.x applications. This patch keeps the tested Angular 2 behavior and updates the published README, package metadata, and documentation links.
+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
@@ -201,11 +247,7 @@ dropdownSettings = {
 </angular-multiselect>
 ```
 
-The same template contract also works with the legacy selector:
-
-```html
-<angular2-multiselect></angular2-multiselect>
-```
+`<angular2-multiselect>` remains available only as a legacy compatibility alias for applications migrating from the old outdated plugin. New code and all current examples should use `<angular-multiselect>`.
 
 ## Forms Integration
 
@@ -268,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/multiselect.component.css

@@ -300,7 +300,9 @@
   padding-left: 15px !important;
 }
 
-.stackline-dropdown.theme-material {
+.stackline-dropdown.theme-material,
+.stackline-dropdown.theme-dark,
+.stackline-dropdown.theme-custom {
   --ms-primary: #3f51b5;
   --ms-primary-soft: rgba(63, 81, 181, 0.12);
   --ms-surface: #ffffff;
@@ -313,6 +315,9 @@
   --ms-chip-bg: #e8eaf6;
   --ms-chip-text: #303f9f;
   --ms-chip-remove: #303f9f;
+  --ms-divider: rgba(125, 119, 134, 0.16);
+  --ms-section-bg: rgba(247, 242, 250, 0.76);
+  --ms-selected-text: var(--ms-primary);
   --ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);
   --ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);
   display: block;
@@ -321,11 +326,55 @@
   font: inherit;
 }
 
-.stackline-dropdown.theme-material .selected-list {
+.stackline-dropdown.theme-dark {
+  --ms-primary: #8ab4f8;
+  --ms-primary-soft: rgba(138, 180, 248, 0.18);
+  --ms-surface: #151a23;
+  --ms-surface-soft: #202736;
+  --ms-surface-muted: #111722;
+  --ms-outline: #384456;
+  --ms-outline-strong: #8ab4f8;
+  --ms-on-surface: #edf2f7;
+  --ms-on-surface-muted: #aab6c5;
+  --ms-chip-bg: #263247;
+  --ms-chip-text: #d7e6ff;
+  --ms-chip-remove: #d7e6ff;
+  --ms-divider: rgba(170, 182, 197, 0.18);
+  --ms-section-bg: #101620;
+  --ms-selected-text: #d7e6ff;
+  --ms-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
+  --ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.28);
+}
+
+.stackline-dropdown.theme-custom {
+  --ms-primary: var(--stackline-ms-primary, #0f766e);
+  --ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, 0.14));
+  --ms-surface: var(--stackline-ms-surface, #ffffff);
+  --ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);
+  --ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);
+  --ms-outline: var(--stackline-ms-outline, #99f6e4);
+  --ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);
+  --ms-on-surface: var(--stackline-ms-on-surface, #102a2a);
+  --ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);
+  --ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);
+  --ms-chip-text: var(--stackline-ms-chip-text, #115e59);
+  --ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);
+  --ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, 0.16));
+  --ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);
+  --ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));
+  --ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, 0.15));
+  --ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, 0.16), 0 8px 18px rgba(15, 118, 110, 0.09));
+}
+
+.stackline-dropdown.theme-material .selected-list,
+.stackline-dropdown.theme-dark .selected-list,
+.stackline-dropdown.theme-custom .selected-list {
   width: 100%;
 }
 
-.stackline-dropdown.theme-material .selected-list .c-btn {
+.stackline-dropdown.theme-material .selected-list .c-btn,
+.stackline-dropdown.theme-dark .selected-list .c-btn,
+.stackline-dropdown.theme-custom .selected-list .c-btn {
   position: relative;
   display: flex;
   align-items: center;
@@ -345,17 +394,23 @@
   transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
 }
 
-.stackline-dropdown.theme-material .selected-list .c-btn:hover {
+.stackline-dropdown.theme-material .selected-list .c-btn:hover,
+.stackline-dropdown.theme-dark .selected-list .c-btn:hover,
+.stackline-dropdown.theme-custom .selected-list .c-btn:hover {
   border-color: var(--ms-outline-strong);
 }
 
-.stackline-dropdown.theme-material .selected-list .c-btn.disabled {
+.stackline-dropdown.theme-material .selected-list .c-btn.disabled,
+.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,
+.stackline-dropdown.theme-custom .selected-list .c-btn.disabled {
   background: var(--ms-surface);
   cursor: not-allowed;
   opacity: 0.72;
 }
 
-.stackline-dropdown.theme-material .selected-list .c-list {
+.stackline-dropdown.theme-material .selected-list .c-list,
+.stackline-dropdown.theme-dark .selected-list .c-list,
+.stackline-dropdown.theme-custom .selected-list .c-list {
   display: flex;
   flex: 1 1 auto;
   flex-wrap: wrap;
@@ -367,7 +422,9 @@
   float: none;
 }
 
-.stackline-dropdown.theme-material .selected-list .c-list .c-token {
+.stackline-dropdown.theme-material .selected-list .c-list .c-token,
+.stackline-dropdown.theme-dark .selected-list .c-list .c-token,
+.stackline-dropdown.theme-custom .selected-list .c-list .c-token {
   position: relative;
   display: inline-block;
   vertical-align: middle;
@@ -385,7 +442,9 @@
   float: none;
 }
 
-.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label {
+.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,
+.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,
+.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label {
   display: inline-flex;
   align-items: center;
   float: none;
@@ -397,7 +456,9 @@
   overflow-wrap: anywhere;
 }
 
-.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove {
+.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,
+.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,
+.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove {
   position: absolute;
   right: 10px;
   top: 50%;
@@ -412,7 +473,9 @@
   cursor: pointer;
 }
 
-.stackline-dropdown.theme-material .selected-list .countplaceholder {
+.stackline-dropdown.theme-material .selected-list .countplaceholder,
+.stackline-dropdown.theme-dark .selected-list .countplaceholder,
+.stackline-dropdown.theme-custom .selected-list .countplaceholder {
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
@@ -426,7 +489,11 @@
 }
 
 .stackline-dropdown.theme-material .selected-list .fa-angle-down,
-.stackline-dropdown.theme-material .selected-list .fa-angle-up {
+.stackline-dropdown.theme-dark .selected-list .fa-angle-down,
+.stackline-dropdown.theme-custom .selected-list .fa-angle-down,
+.stackline-dropdown.theme-material .selected-list .fa-angle-up,
+.stackline-dropdown.theme-dark .selected-list .fa-angle-up,
+.stackline-dropdown.theme-custom .selected-list .fa-angle-up {
   position: absolute;
   top: 50%;
   right: 16px;
@@ -441,7 +508,9 @@
   pointer-events: none;
 }
 
-.stackline-dropdown.theme-material .dropdown-list {
+.stackline-dropdown.theme-material .dropdown-list,
+.stackline-dropdown.theme-dark .dropdown-list,
+.stackline-dropdown.theme-custom .dropdown-list {
   position: absolute;
   width: 100%;
   padding-top: 8px;
@@ -449,12 +518,20 @@
 }
 
 .stackline-dropdown.theme-material .arrow-up,
+.stackline-dropdown.theme-dark .arrow-up,
+.stackline-dropdown.theme-custom .arrow-up,
 .stackline-dropdown.theme-material .arrow-down,
-.stackline-dropdown.theme-material .arrow-2 {
+.stackline-dropdown.theme-dark .arrow-down,
+.stackline-dropdown.theme-custom .arrow-down,
+.stackline-dropdown.theme-material .arrow-2,
+.stackline-dropdown.theme-dark .arrow-2,
+.stackline-dropdown.theme-custom .arrow-2 {
   display: none;
 }
 
-.stackline-dropdown.theme-material .list-area {
+.stackline-dropdown.theme-material .list-area,
+.stackline-dropdown.theme-dark .list-area,
+.stackline-dropdown.theme-custom .list-area {
   overflow: hidden;
   border-radius: 22px;
   background: var(--ms-surface);
@@ -463,25 +540,31 @@
   margin: 0;
 }
 
-.stackline-dropdown.theme-material .select-all {
+.stackline-dropdown.theme-material .select-all,
+.stackline-dropdown.theme-dark .select-all,
+.stackline-dropdown.theme-custom .select-all {
   padding: 10px 14px;
-  border-bottom: 1px solid rgba(125, 119, 134, 0.16);
-  background: rgba(247, 242, 250, 0.76);
+  border-bottom: 1px solid var(--ms-divider);
+  background: var(--ms-section-bg);
   text-align: left;
 }
 
-.stackline-dropdown.theme-material .list-filter {
+.stackline-dropdown.theme-material .list-filter,
+.stackline-dropdown.theme-dark .list-filter,
+.stackline-dropdown.theme-custom .list-filter {
   position: relative;
   display: flex;
   align-items: center;
   min-height: 52px;
   padding-left: 48px;
   padding-right: 44px;
-  border-bottom: 1px solid rgba(125, 119, 134, 0.16);
+  border-bottom: 1px solid var(--ms-divider);
   background: var(--ms-surface);
 }
 
-.stackline-dropdown.theme-material .list-filter input {
+.stackline-dropdown.theme-material .list-filter input,
+.stackline-dropdown.theme-dark .list-filter input,
+.stackline-dropdown.theme-custom .list-filter input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -491,15 +574,21 @@
   padding: 0;
 }
 
-.stackline-dropdown.theme-material .list-filter input::placeholder {
+.stackline-dropdown.theme-material .list-filter input::placeholder,
+.stackline-dropdown.theme-dark .list-filter input::placeholder,
+.stackline-dropdown.theme-custom .list-filter input::placeholder {
   color: var(--ms-on-surface-muted);
 }
 
-.stackline-dropdown.theme-material .list-filter input:focus {
+.stackline-dropdown.theme-material .list-filter input:focus,
+.stackline-dropdown.theme-dark .list-filter input:focus,
+.stackline-dropdown.theme-custom .list-filter input:focus {
   outline: none;
 }
 
-.stackline-dropdown.theme-material .list-filter .fa {
+.stackline-dropdown.theme-material .list-filter .fa,
+.stackline-dropdown.theme-dark .list-filter .fa,
+.stackline-dropdown.theme-custom .list-filter .fa {
   position: absolute;
   top: 50%;
   left: 16px;
@@ -512,14 +601,18 @@
   color: var(--ms-on-surface-muted);
 }
 
-.stackline-dropdown.theme-material .dropdown-list ul {
+.stackline-dropdown.theme-material .dropdown-list ul,
+.stackline-dropdown.theme-dark .dropdown-list ul,
+.stackline-dropdown.theme-custom .dropdown-list ul {
   list-style: none;
   margin: 0;
   padding: 8px;
   overflow: auto;
 }
 
-.stackline-dropdown.theme-material .dropdown-list ul li {
+.stackline-dropdown.theme-material .dropdown-list ul li,
+.stackline-dropdown.theme-dark .dropdown-list ul li,
+.stackline-dropdown.theme-custom .dropdown-list ul li {
   align-items: center;
   min-height: 0;
   margin: 4px;
@@ -531,23 +624,33 @@
   transition: background-color 0.16s ease, color 0.16s ease;
 }
 
-.stackline-dropdown.theme-material .dropdown-list ul li:first-child {
+.stackline-dropdown.theme-material .dropdown-list ul li:first-child,
+.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,
+.stackline-dropdown.theme-custom .dropdown-list ul li:first-child {
   padding-top: 12px;
 }
 
-.stackline-dropdown.theme-material .dropdown-list ul li:last-child {
+.stackline-dropdown.theme-material .dropdown-list ul li:last-child,
+.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,
+.stackline-dropdown.theme-custom .dropdown-list ul li:last-child {
   padding-bottom: 12px;
 }
 
-.stackline-dropdown.theme-material .dropdown-list ul li:hover {
+.stackline-dropdown.theme-material .dropdown-list ul li:hover,
+.stackline-dropdown.theme-dark .dropdown-list ul li:hover,
+.stackline-dropdown.theme-custom .dropdown-list ul li:hover {
   background: var(--ms-surface-soft);
 }
 
-.stackline-dropdown.theme-material .pure-checkbox {
+.stackline-dropdown.theme-material .pure-checkbox,
+.stackline-dropdown.theme-dark .pure-checkbox,
+.stackline-dropdown.theme-custom .pure-checkbox {
   position: relative;
 }
 
-.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label {
+.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label,
+.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label,
+.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label {
   position: relative;
   display: block;
   width: 100%;
@@ -559,7 +662,9 @@
   user-select: none;
 }
 
-.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:before {
+.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:before,
+.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:before,
+.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:before {
   box-sizing: content-box;
   content: "";
   position: absolute;
@@ -574,7 +679,9 @@
   transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
 }
 
-.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:after {
+.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:after,
+.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:after,
+.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:after {
   box-sizing: content-box;
   content: "";
   position: absolute;
@@ -594,25 +701,33 @@
 }
 
 .stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus + label:before,
-.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover + label:before {
+.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus + label:before,
+.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus + label:before,
+.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover + label:before,
+.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover + label:before,
+.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover + label:before {
   border-color: var(--ms-primary);
   background: var(--ms-surface-soft);
 }
 
-.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:before {
+.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:before,
+.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:before,
+.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:before {
   border-color: var(--ms-primary);
   background: var(--ms-primary);
 }
 
-.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:after {
+.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:after,
+.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:after,
+.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:after {
   transform: rotate(-45deg) scale(1);
 }
 
-.stackline-dropdown.theme-material .list-message {
+.stackline-dropdown.theme-material .list-message,
+.stackline-dropdown.theme-dark .list-message,
+.stackline-dropdown.theme-custom .list-message {
   margin: 0;
   padding: 20px 14px;
   color: var(--ms-on-surface-muted);
   text-align: center;
 }
-
-/*# sourceMappingURL=multiselect.component.css.map */

package/package.json

@@ -1,24 +1,12 @@
 {
   "name": "@stackline/angular-multiselect-dropdown",
-  "version": "2.0.4",
-  "description": "Angular 2 compatible multiselect dropdown for the Stackline maintained Angular release line.",
+  "version": "4.0.1",
+  "description": "Angular 4 compatible multiselect dropdown package for the Stackline Angular 4 release line.",
   "keywords": [
-    "angular",
-    "angular2",
-    "angular 2",
-    "angular-multiselect-dropdown",
+    "angular 2 multiselect dropdown",
+    "angular 4 multiselect dropdown",
     "angular multiselect",
-    "angular dropdown",
-    "multiselect",
-    "multiselect-dropdown",
-    "dropdown",
-    "select",
-    "search-filter",
-    "group-by",
-    "custom-templates",
-    "template-driven-forms",
-    "reactive-forms",
-    "stackline"
+    "angular dropdown"
   ],
   "license": "MIT",
   "angular-cli": {},
@@ -41,7 +29,7 @@
     "explorer": "source-map-explorer ./dist/index.umd.js",
     "gh-pages": "rimraf docs && npm run docs && gh-pages -d docs",
     "lint": "npm run tslint 'src/**/*.ts'",
-    "ngcompile": "node_modules/.bin/ngc -p tsconfig-aot.json",
+    "ngcompile": "ngc -p tsconfig-aot.json",
     "postversion": "git push && git push --tags",
     "prebuild": "rimraf dist tmp",
     "prebuild:watch": "rimraf dist tmp",
@@ -122,9 +110,9 @@
   "main": "angular2-multiselect-dropdown.ts",
   "types": "angular2-multiselect-dropdown.ts",
   "peerDependencies": {
-    "@angular/common": ">=2.0.0 <3.0.0",
-    "@angular/core": ">=2.0.0 <3.0.0",
-    "@angular/forms": ">=2.0.0 <3.0.0"
+    "@angular/common": ">=4.0.0 <5.0.0",
+    "@angular/core": ">=4.0.0 <5.0.0",
+    "@angular/forms": ">=4.0.0 <5.0.0"
   },
-  "homepage": "https://alexandro.net/docs/angular/multiselect/"
+  "homepage": "https://alexandro.net/docs/angular/multiselect/angular-4/"
 }

package/src/app/angular2-multiselect-dropdown/multiselect.component.html

@@ -1,4 +1,4 @@
-<div class="stackline-dropdown" [ngClass]="{'theme-material': settings.theme == 'material', 'theme-classic': settings.theme != 'material'}" (clickOutside)="closeDropdown()">
+<div class="stackline-dropdown" [ngClass]="getDropdownClasses()" (clickOutside)="closeDropdown()">
     <div class="selected-list">
         <div class="c-btn" (click)="toggleDropdown($event)" [ngClass]="{'disabled': settings.disabled}">
             <span *ngIf="selectedItems?.length == 0">{{settings.text}}</span>