@stackline/angular-multiselect-dropdown 2.0.4 → 2.0.6

package/multiselect.component.css

@@ -72,7 +72,7 @@
   box-sizing: border-box;
   width: 100%;
   box-shadow: 0px 1px 5px #959595;
-  padding: 10px 36px 10px 10px;
+  padding: 10px 68px 10px 10px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -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;
@@ -333,7 +382,7 @@
   gap: 8px;
   width: 100%;
   min-height: 56px;
-  padding: 11px 54px 11px 16px;
+  padding: 11px 84px 11px 16px;
   border-radius: 18px;
   border: 1px solid var(--ms-outline);
   background: var(--ms-surface);
@@ -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,59 @@
 }
 
 .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 */
+
+.selected-list .clear-all {
+  font-size: 12pt;
+  position: absolute;
+  right: 42px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.stackline-dropdown.theme-material .selected-list .clear-all,
+.stackline-dropdown.theme-dark .selected-list .clear-all,
+.stackline-dropdown.theme-custom .selected-list .clear-all {
+  position: absolute;
+  top: 50%;
+  right: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  transform: translateY(-50%);
+  color: var(--ms-on-surface-muted);
+  cursor: pointer;
+}

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": "2.0.6",
+  "description": "Angular 2 compatible multiselect dropdown package for the Stackline Angular 2 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": {},
@@ -126,5 +114,5 @@
     "@angular/core": ">=2.0.0 <3.0.0",
     "@angular/forms": ">=2.0.0 <3.0.0"
   },
-  "homepage": "https://alexandro.net/docs/angular/multiselect/"
+  "homepage": "https://alexandro.net/docs/angular/multiselect/angular-2/"
 }

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>
@@ -17,6 +17,7 @@
                 </div>
             </div> 
             <span class="countplaceholder" *ngIf="selectedItems?.length > settings.badgeShowLimit">+{{selectedItems?.length - settings.badgeShowLimit }}</span>
+            <span class="fa fa-remove clear-all" *ngIf="settings.clearAll && selectedItems?.length > 0 && !settings.disabled" (click)="clearSelection($event);$event.stopPropagation()"></span>
             <span class="fa" [ngClass]="{'fa-angle-down': !isActive,'fa-angle-up':isActive}"></span>
         </div>      
     </div>