@stackline/angular-multiselect-dropdown 21.0.1 → 21.0.3

package/package.json

@@ -1,9 +1,66 @@
 {
+  "$schema": "../../../node_modules/ng-packagr/package.schema.json",
   "name": "@stackline/angular-multiselect-dropdown",
-  "version": "21.0.1",
-  "description": "Angular 21 compatible multiselect dropdown package for the Stackline Angular 21 release line.",
+  "version": "21.0.3",
   "license": "MIT",
-  "author": "Pradeep Terli",
+  "author": "Pradeep Terli (Original), Alexandro Paixao Marques (Maintainer)",
+  "description": "Angular multiselect dropdown for maintained release lines from Angular 2 through Angular 21, with search, grouping, custom templates, checkbox selection, reactive and template-driven forms support, and Material-inspired theming from Angular 14 onward.",
+  "keywords": [
+    "angular",
+    "angular-library",
+    "angular-component",
+    "angular-multiselect-dropdown",
+    "angular multiselect dropdown",
+    "angular-multiselect",
+    "angular multiselect",
+    "angular-select",
+    "angular multi select",
+    "multiselect",
+    "multiselect-dropdown",
+    "multi-select",
+    "dropdown",
+    "select",
+    "dropdown-search",
+    "checkbox-dropdown",
+    "checkbox multiselect",
+    "searchable-dropdown",
+    "select-all",
+    "dropdown-with-search",
+    "search-filter",
+    "group-by",
+    "grouped-dropdown",
+    "custom-templates",
+    "template-driven-forms",
+    "reactive-forms",
+    "ngmodel",
+    "formcontrolname",
+    "forms",
+    "ui-component",
+    "material-inspired",
+    "material-like",
+    "theming",
+    "scss-theme",
+    "css-theme",
+    "legacy-angular",
+    "angular-compatibility",
+    "angular21",
+    "angular20",
+    "angular19",
+    "angular14",
+    "angular2-multiselect",
+    "angular2-multiselect-dropdown",
+    "migration-friendly",
+    "maintained",
+    "ngx",
+    "ngx-multiselect",
+    "virtual-scroll"
+  ],
+  "homepage": "https://alexandro.net/docs/angular/multiselect/",
+  "peerDependencies": {
+    "@angular/core": ">=21.0.0 <22.0.0",
+    "@angular/forms": ">=21.0.0 <22.0.0",
+    "@angular/common": ">=21.0.0 <22.0.0"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/alexandroit/angular-multiselect-dropdown.git"
@@ -11,21 +68,8 @@
   "bugs": {
     "url": "https://github.com/alexandroit/angular-multiselect-dropdown/issues"
   },
-  "homepage": "https://alexandro.net/docs/angular/multiselect/angular-21/",
-  "keywords": [
-    "angular 2 multiselect dropdown",
-    "angular 21 multiselect dropdown",
-    "angular multiselect",
-    "angular dropdown"
-  ],
-  "peerDependencies": {
-    "@angular/common": ">=21.0.0 <22.0.0",
-    "@angular/core": ">=21.0.0 <22.0.0",
-    "@angular/forms": ">=21.0.0 <22.0.0"
-  },
-  "dependencies": {
-    "font-awesome": "*",
-    "tslib": "^2.3.0"
+  "engines": {
+    "node": ">=20.19.0"
   },
   "module": "fesm2022/stackline-angular-multiselect-dropdown.mjs",
   "typings": "types/stackline-angular-multiselect-dropdown.d.ts",
@@ -39,5 +83,8 @@
     }
   },
   "sideEffects": false,
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
 }

package/themes/custom.theme.css

@@ -23,7 +23,7 @@
 
 .stackline-dropdown .c-btn {
   min-height: 56px;
-  padding: 11px 84px 11px 16px;
+  padding: 11px 54px 11px 16px;
   border-radius: 18px;
   background: var(--ms-surface);
   border: 1px solid var(--ms-outline);
@@ -200,30 +200,3 @@
   right: 16px;
 }
 
-/*# sourceMappingURL=custom.theme.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/themes/custom.theme.scss

@@ -24,7 +24,7 @@
 
 .stackline-dropdown .c-btn {
   min-height: 56px;
-  padding: 11px 84px 11px 16px;
+  padding: 11px 54px 11px 16px;
   border-radius: 18px;
   background: var(--ms-surface);
   border: 1px solid var(--ms-outline);
@@ -200,29 +200,3 @@
   top: 18px;
   right: 16px;
 }
-
-
-.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/themes/dark.theme.scss

@@ -0,0 +1,113 @@
+
+$base-color: #000000;
+$btn-background: #fff;
+$btn-border: #ccc;
+$btn-text-color: #333;
+$btn-arrow: #333;
+
+
+$token-background: $base-color;
+$token-text-color: #fff;
+$token-remove-color: #fff;
+
+$box-shadow-color: #959595;
+$list-hover-background: #f5f5f5;
+$label-color: #000;
+$selected-background: #e9f4ff;
+
+.c-btn{
+    background: $btn-background;
+    border: 1px solid $btn-border;
+    color: $btn-text-color;
+}
+.selected-list{
+    .c-list{
+        .c-token{
+            background: $token-background;
+            .c-label{
+               color: $token-text-color;
+            }
+            .c-remove {
+                svg {
+                    fill: $token-remove-color;
+                }
+            }
+
+        }
+    }
+    .c-angle-down, .c-angle-up{
+        svg {
+            fill: $btn-arrow;
+        }
+    }
+}
+.dropdown-list{
+    ul{
+        li:hover{
+            background: $list-hover-background;
+        }
+    }
+}
+.arrow-up, .arrow-down {
+  border-bottom: 15px solid #fff;
+}
+
+.arrow-2{
+    border-bottom: 15px solid #ccc;
+}
+.list-area{
+    border: 1px solid #ccc;
+    background: #fff;
+    box-shadow: 0px 1px 5px $box-shadow-color;
+}
+.select-all{
+    border-bottom: 1px solid #ccc;
+}
+.list-filter{
+    border-bottom: 1px solid #ccc;
+    .c-search{
+        svg {
+            fill: #888;
+        }
+    }
+    .c-clear {
+        svg {
+            fill: #888;
+        }
+    }
+}
+
+.pure-checkbox {
+    input[type="checkbox"]:focus + label:before, input[type="checkbox"]:hover + label:before{
+        border-color: $base-color;
+        background-color: #f2f2f2;
+    }
+    input[type="checkbox"] + label{
+        color: $label-color;
+    }
+    input[type="checkbox"] + label:before{
+        color: $base-color;
+        border: 2px solid $base-color;
+    }
+    input[type="checkbox"] + label:after{
+        background-color: $base-color;
+    }
+    input[type="checkbox"]:disabled + label:before{
+        border-color: #cccccc;
+    }
+    input[type="checkbox"]:disabled:checked + label:before{
+        background-color: #cccccc;
+    }
+    input[type="checkbox"] + label:after{
+        border-color: #ffffff;
+    }
+    input[type="radio"]:checked + label:before{
+        background-color: white;
+    }
+    input[type="checkbox"]:checked + label:before{
+        background: $base-color;
+    }
+}
+.selected-item{
+    background: $selected-background;
+}

package/themes/default.theme.css

@@ -34,30 +34,3 @@
   color: #ffffff;
 }
 
-/*# sourceMappingURL=default.theme.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/themes/default.theme.scss

@@ -33,29 +33,3 @@
   background: var(--ms-primary);
   color: #ffffff;
 }
-
-
-.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;
-}