@stackline/angular-multiselect-dropdown 2.0.4 → 2.0.5

package/package.json

@@ -1,116 +1,69 @@
 {
+  "$schema": "../../../node_modules/ng-packagr/package.schema.json",
   "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.5",
+  "license": "MIT",
+  "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",
-    "angular2",
-    "angular 2",
+    "angular-library",
+    "angular-component",
     "angular-multiselect-dropdown",
+    "angular multiselect dropdown",
+    "angular-multiselect",
     "angular multiselect",
-    "angular dropdown",
+    "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",
-    "stackline"
+    "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"
   ],
-  "license": "MIT",
-  "angular-cli": {},
-  "author": "Pradeep Terli",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "e2e": "ng e2e",
-    "build": "npm run build:esm && npm run build:umd && gulp copy",
-    "build:esm": "gulp inline-templates && npm run ngcompile",
-    "build:esm:watch": "gulp build:esm:watch",
-    "build:umd": "webpack --config webpack-umd.config.ts",
-    "build:umd:watch": "npm run build:umd -- --watch",
-    "build:watch": "concurrently --raw \"npm run build:umd:watch\" \"npm run build:esm:watch\"",
-    "ci": "npm run lint && npm run test && npm run build && npm run docs",
-    "clean:all": "npm run clean:tmp && rimraf node_modules",
-    "clean:tmp": "rimraf coverage dist tmp docs",
-    "codecov": "cat coverage/lcov.info | codecov",
-    "docs": "compodoc -p tsconfig.json -d docs --disableCoverage --disablePrivateOrInternalSupport",
-    "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",
-    "postversion": "git push && git push --tags",
-    "prebuild": "rimraf dist tmp",
-    "prebuild:watch": "rimraf dist tmp",
-    "preversion": "npm run ci",
-    "test": "karma start",
-    "test:watch": "karma start --auto-watch --no-single-run",
-    "tslint": "tslint",
-    "github-pages": "ng build --base-href /angular2-multiselect-dropdown/"
+  "homepage": "https://alexandro.net/docs/angular/multiselect/",
+  "peerDependencies": {
+    "@angular/core": ">=2.0.0 <3.0.0",
+    "@angular/forms": ">=2.0.0 <3.0.0",
+    "@angular/common": ">=2.0.0 <3.0.0"
   },
-  "private": false,
   "dependencies": {
-    "font-awesome": "*"
-  },
-  "devDependencies": {
-    "@angular/common": "^4.0.0",
-    "@angular/compiler": "^4.0.0",
-    "@angular/compiler-cli": "^4.0.0",
-    "@angular/animations": "^4.0.0",
-    "@angular/cli": "^1.3.2",
-    "@angular/core": "^4.0.0",
-    "@angular/forms": "^4.0.0",
-    "@angular/http": "^4.0.0",
-    "@angular/platform-browser": "^4.0.0",
-    "@angular/platform-browser-dynamic": "^4.0.0",
-    "@angular/router": "^4.0.0",
-    "@compodoc/compodoc": "^1.0.0-beta.9",
-    "@types/jasmine": "^2.5.47",
-    "@types/karma": "^0.13.35",
-    "@types/node": "^7.0.18",
-    "@types/webpack": "^2.2.15",
-    "@types/webpack-env": "^1.13.0",
-    "angular2-template-loader": "^0.6.2",
-    "awesome-typescript-loader": "^3.1.3",
-    "codecov": "^2.2.0",
-    "codelyzer": "^3.0.1",
-    "concurrently": "^3.4.0",
-    "css-loader": "^0.28.1",
-    "gh-pages": "^1.0.0",
-    "gulp": "^3.9.1",
-    "gulp-copy": "^1.0.1",
-    "gulp-inline-ng2-template": "^4.0.0",
-    "istanbul-instrumenter-loader": "^2.0.0",
-    "jasmine-core": "^2.6.1",
-    "json-loader": "^0.5.4",
-    "@types/log4js": "0.0.33",
-    "karma": "^1.7.0",
-    "karma-chrome-launcher": "^2.1.1",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
-    "karma-jasmine": "^1.1.0",
-    "karma-mocha-reporter": "^2.2.3",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.3",
-    "node-sass": "^4.5.2",
-    "raw-loader": "^0.5.1",
-    "rimraf": "2.6.1",
-    "rxjs": "^5.3.1",
-    "sass-loader": "^6.0.5",
-    "source-map-explorer": "^1.3.3",
-    "to-string-loader": "^1.1.5",
-    "ts-node": "^3.0.4",
-    "tslint": "^5.2.0",
-    "typescript": "^2.3.2",
-    "webpack": "^2.5.1",
-    "webpack-angular-externals": "^1.0.2",
-    "webpack-rxjs-externals": "^1.0.0",
-    "zone.js": "^0.8.10",
-    "ng2-gist": "*",
-    "primeng": "*",
-    "bootstrap": "^4.0.0-beta.2"
+    "@tweenjs/tween.js": "^17.4.0",
+    "tslib": "^2.3.0"
   },
   "repository": {
     "type": "git",
@@ -119,12 +72,20 @@
   "bugs": {
     "url": "https://github.com/alexandroit/angular-multiselect-dropdown/issues"
   },
-  "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"
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "module": "fesm2022/stackline-angular-multiselect-dropdown.mjs",
+  "typings": "types/stackline-angular-multiselect-dropdown.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/stackline-angular-multiselect-dropdown.d.ts",
+      "default": "./fesm2022/stackline-angular-multiselect-dropdown.mjs"
+    }
   },
-  "homepage": "https://alexandro.net/docs/angular/multiselect/"
+  "sideEffects": false,
+  "type": "module"
 }

package/themes/custom.theme.css

@@ -0,0 +1,202 @@
+/*
+  Custom theme starter for @stackline/angular-multiselect-dropdown.
+
+  Copy this file into your application and edit the values below when you want
+  full control over the dropdown look without touching the library source.
+*/
+.stackline-dropdown {
+  --ms-primary: #3f51b5;
+  --ms-primary-soft: rgba(63, 81, 181, 0.12);
+  --ms-surface: #ffffff;
+  --ms-surface-soft: #f5f7fb;
+  --ms-surface-muted: #e8eaf6;
+  --ms-outline: #c5cae9;
+  --ms-outline-strong: #7986cb;
+  --ms-on-surface: #212121;
+  --ms-on-surface-muted: #5f6368;
+  --ms-chip-bg: #e8eaf6;
+  --ms-chip-text: #303f9f;
+  --ms-chip-remove: #303f9f;
+  --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);
+}
+
+.stackline-dropdown .c-btn {
+  min-height: 56px;
+  padding: 11px 54px 11px 16px;
+  border-radius: 18px;
+  background: var(--ms-surface);
+  border: 1px solid var(--ms-outline);
+  color: var(--ms-on-surface);
+  box-shadow: var(--ms-shadow-soft);
+}
+
+.stackline-dropdown .c-btn:hover {
+  border-color: var(--ms-outline-strong);
+}
+
+.stackline-dropdown .c-btn.is-active {
+  border-color: var(--ms-primary);
+  box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.14), var(--ms-shadow-soft);
+}
+
+.stackline-dropdown .c-placeholder,
+.stackline-dropdown .c-single-value,
+.stackline-dropdown .countplaceholder,
+.stackline-dropdown .c-angle-down,
+.stackline-dropdown .c-angle-up,
+.stackline-dropdown .clear-all {
+  color: var(--ms-on-surface-muted);
+}
+
+.stackline-dropdown .c-chip-list {
+  gap: 8px;
+}
+
+.stackline-dropdown .c-token {
+  display: inline-block;
+  vertical-align: middle;
+  min-height: 32px;
+  max-width: 100%;
+  padding: 6px 30px 6px 12px;
+  border-radius: 999px;
+  background: var(--ms-chip-bg);
+  color: var(--ms-chip-text);
+  box-shadow: inset 0 0 0 1px rgba(63, 81, 181, 0.08);
+  line-height: 1.35;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.stackline-dropdown .c-remove {
+  color: inherit;
+}
+
+.stackline-dropdown .c-token .c-label {
+  max-width: 100%;
+  color: inherit;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.stackline-dropdown .list-area {
+  border-radius: 22px;
+  background: var(--ms-surface);
+  border: 1px solid var(--ms-outline);
+  box-shadow: var(--ms-shadow);
+}
+
+.stackline-dropdown .select-all,
+.stackline-dropdown .filter-select-all {
+  background: var(--ms-surface-soft);
+  border-bottom: 1px solid rgba(121, 134, 203, 0.16);
+}
+
+.stackline-dropdown .list-filter {
+  min-height: 52px;
+  padding-left: 48px;
+  padding-right: 44px;
+  background: var(--ms-surface);
+  border-bottom: 1px solid rgba(121, 134, 203, 0.16);
+}
+
+.stackline-dropdown .list-filter .c-input,
+.stackline-dropdown .list-filter input {
+  color: var(--ms-on-surface);
+}
+
+.stackline-dropdown .list-filter .c-input::placeholder,
+.stackline-dropdown .list-filter input::placeholder,
+.stackline-dropdown .list-filter .c-search,
+.stackline-dropdown .list-filter .c-clear {
+  color: var(--ms-on-surface-muted);
+}
+
+.stackline-dropdown .btn-iceblue {
+  width: 100%;
+  min-height: 40px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  background: var(--ms-primary);
+  color: #ffffff;
+  font-weight: 600;
+}
+
+.stackline-dropdown .dropdown-list ul {
+  padding: 8px;
+}
+
+.stackline-dropdown .dropdown-list ul li {
+  min-height: 0;
+  margin: 4px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  color: var(--ms-on-surface);
+  line-height: 1.35;
+}
+
+.stackline-dropdown .dropdown-list ul li:hover {
+  background: var(--ms-surface-soft);
+}
+
+.stackline-dropdown .selected-item {
+  background: var(--ms-primary-soft) !important;
+  color: var(--ms-primary);
+}
+
+.stackline-dropdown .grp-title {
+  color: var(--ms-on-surface-muted);
+}
+
+.stackline-dropdown .grp-title label,
+.stackline-dropdown .list-grp h4 {
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.stackline-dropdown .pure-checkbox input[type=checkbox] + label {
+  padding-left: 32px;
+  color: inherit;
+  font-weight: 500;
+}
+
+.stackline-dropdown .pure-checkbox input[type=checkbox] + label::before {
+  width: 18px;
+  height: 18px;
+  margin-top: -10px;
+  border: 2px solid var(--ms-outline-strong);
+  border-radius: 6px;
+  background: var(--ms-surface);
+}
+
+.stackline-dropdown .pure-checkbox input[type=checkbox] + label::after {
+  left: 5px;
+  width: 7px;
+  height: 3px;
+  margin-top: -3px;
+  border-width: 0 0 2px 2px;
+  border-color: #ffffff;
+}
+
+.stackline-dropdown .pure-checkbox input[type=checkbox]:focus + label::before,
+.stackline-dropdown .pure-checkbox input[type=checkbox]:hover + label::before {
+  border-color: var(--ms-primary);
+  box-shadow: 0 0 0 4px rgba(63, 81, 181, 0.12);
+}
+
+.stackline-dropdown .pure-checkbox input[type=checkbox]:checked + label::before {
+  border-color: var(--ms-primary);
+  background: var(--ms-primary);
+}
+
+.stackline-dropdown .list-message,
+.stackline-dropdown .nodata-label {
+  color: var(--ms-on-surface-muted);
+}
+
+.stackline-dropdown .loading-icon {
+  width: 18px;
+  top: 18px;
+  right: 16px;
+}
+

package/themes/custom.theme.scss

@@ -0,0 +1,202 @@
+/*
+  Custom theme starter for @stackline/angular-multiselect-dropdown.
+
+  Copy this file into your application and edit the values below when you want
+  full control over the dropdown look without touching the library source.
+*/
+
+.stackline-dropdown {
+  --ms-primary: #3f51b5;
+  --ms-primary-soft: rgba(63, 81, 181, 0.12);
+  --ms-surface: #ffffff;
+  --ms-surface-soft: #f5f7fb;
+  --ms-surface-muted: #e8eaf6;
+  --ms-outline: #c5cae9;
+  --ms-outline-strong: #7986cb;
+  --ms-on-surface: #212121;
+  --ms-on-surface-muted: #5f6368;
+  --ms-chip-bg: #e8eaf6;
+  --ms-chip-text: #303f9f;
+  --ms-chip-remove: #303f9f;
+  --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);
+}
+
+.stackline-dropdown .c-btn {
+  min-height: 56px;
+  padding: 11px 54px 11px 16px;
+  border-radius: 18px;
+  background: var(--ms-surface);
+  border: 1px solid var(--ms-outline);
+  color: var(--ms-on-surface);
+  box-shadow: var(--ms-shadow-soft);
+}
+
+.stackline-dropdown .c-btn:hover {
+  border-color: var(--ms-outline-strong);
+}
+
+.stackline-dropdown .c-btn.is-active {
+  border-color: var(--ms-primary);
+  box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.14), var(--ms-shadow-soft);
+}
+
+.stackline-dropdown .c-placeholder,
+.stackline-dropdown .c-single-value,
+.stackline-dropdown .countplaceholder,
+.stackline-dropdown .c-angle-down,
+.stackline-dropdown .c-angle-up,
+.stackline-dropdown .clear-all {
+  color: var(--ms-on-surface-muted);
+}
+
+.stackline-dropdown .c-chip-list {
+  gap: 8px;
+}
+
+.stackline-dropdown .c-token {
+  display: inline-block;
+  vertical-align: middle;
+  min-height: 32px;
+  max-width: 100%;
+  padding: 6px 30px 6px 12px;
+  border-radius: 999px;
+  background: var(--ms-chip-bg);
+  color: var(--ms-chip-text);
+  box-shadow: inset 0 0 0 1px rgba(63, 81, 181, 0.08);
+  line-height: 1.35;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.stackline-dropdown .c-remove {
+  color: inherit;
+}
+
+.stackline-dropdown .c-token .c-label {
+  max-width: 100%;
+  color: inherit;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.stackline-dropdown .list-area {
+  border-radius: 22px;
+  background: var(--ms-surface);
+  border: 1px solid var(--ms-outline);
+  box-shadow: var(--ms-shadow);
+}
+
+.stackline-dropdown .select-all,
+.stackline-dropdown .filter-select-all {
+  background: var(--ms-surface-soft);
+  border-bottom: 1px solid rgba(121, 134, 203, 0.16);
+}
+
+.stackline-dropdown .list-filter {
+  min-height: 52px;
+  padding-left: 48px;
+  padding-right: 44px;
+  background: var(--ms-surface);
+  border-bottom: 1px solid rgba(121, 134, 203, 0.16);
+}
+
+.stackline-dropdown .list-filter .c-input,
+.stackline-dropdown .list-filter input {
+  color: var(--ms-on-surface);
+}
+
+.stackline-dropdown .list-filter .c-input::placeholder,
+.stackline-dropdown .list-filter input::placeholder,
+.stackline-dropdown .list-filter .c-search,
+.stackline-dropdown .list-filter .c-clear {
+  color: var(--ms-on-surface-muted);
+}
+
+.stackline-dropdown .btn-iceblue {
+  width: 100%;
+  min-height: 40px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  background: var(--ms-primary);
+  color: #ffffff;
+  font-weight: 600;
+}
+
+.stackline-dropdown .dropdown-list ul {
+  padding: 8px;
+}
+
+.stackline-dropdown .dropdown-list ul li {
+  min-height: 0;
+  margin: 4px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  color: var(--ms-on-surface);
+  line-height: 1.35;
+}
+
+.stackline-dropdown .dropdown-list ul li:hover {
+  background: var(--ms-surface-soft);
+}
+
+.stackline-dropdown .selected-item {
+  background: var(--ms-primary-soft) !important;
+  color: var(--ms-primary);
+}
+
+.stackline-dropdown .grp-title {
+  color: var(--ms-on-surface-muted);
+}
+
+.stackline-dropdown .grp-title label,
+.stackline-dropdown .list-grp h4 {
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.stackline-dropdown .pure-checkbox input[type="checkbox"] + label {
+  padding-left: 32px;
+  color: inherit;
+  font-weight: 500;
+}
+
+.stackline-dropdown .pure-checkbox input[type="checkbox"] + label::before {
+  width: 18px;
+  height: 18px;
+  margin-top: -10px;
+  border: 2px solid var(--ms-outline-strong);
+  border-radius: 6px;
+  background: var(--ms-surface);
+}
+
+.stackline-dropdown .pure-checkbox input[type="checkbox"] + label::after {
+  left: 5px;
+  width: 7px;
+  height: 3px;
+  margin-top: -3px;
+  border-width: 0 0 2px 2px;
+  border-color: #ffffff;
+}
+
+.stackline-dropdown .pure-checkbox input[type="checkbox"]:focus + label::before,
+.stackline-dropdown .pure-checkbox input[type="checkbox"]:hover + label::before {
+  border-color: var(--ms-primary);
+  box-shadow: 0 0 0 4px rgba(63, 81, 181, 0.12);
+}
+
+.stackline-dropdown .pure-checkbox input[type="checkbox"]:checked + label::before {
+  border-color: var(--ms-primary);
+  background: var(--ms-primary);
+}
+
+.stackline-dropdown .list-message,
+.stackline-dropdown .nodata-label {
+  color: var(--ms-on-surface-muted);
+}
+
+.stackline-dropdown .loading-icon {
+  width: 18px;
+  top: 18px;
+  right: 16px;
+}

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;
+}