ng-jvx-multiselect 18.0.0 → 18.0.2

package/lib/panel/panel.component.d.ts

@@ -0,0 +1,19 @@
+import { ElementRef, EventEmitter, OnDestroy, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class PanelComponent implements OnDestroy {
+    menuTemplate: TemplateRef<any>;
+    protected isOpen: import("@angular/core").WritableSignal<boolean>;
+    private unsubscribe;
+    trigger: ElementRef<any>;
+    yPosition: 'above' | 'below';
+    onClose: EventEmitter<void>;
+    onClosed: EventEmitter<void>;
+    onOpened: EventEmitter<void>;
+    constructor();
+    ngOnDestroy(): void;
+    open(): void;
+    close(): void;
+    protected clickOnMenu(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PanelComponent, "lib-panel", never, { "trigger": { "alias": "trigger"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; }, { "onClose": "onClose"; "onClosed": "onClosed"; "onOpened": "onOpened"; }, never, ["*"], true, never>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-jvx-multiselect",
-  "version": "18.0.0",
+  "version": "18.0.2",
   "license": "MIT",
   "description": "ng-jvx-multiselect is a select based on angular material. It handles both single and multiple selections and allows to retrieves the options via asynchronous calls.",
   "exports": {
@@ -18,8 +18,8 @@
   "peerDependencies": {
     "@angular/common": "^18.0.5",
     "@angular/core": "^18.0.5",
-    "@angular/material": "^18.0.5",
-    "ngx-scrollbar": "^13.0.3"
+    "ngx-scrollbar": "^13.0.3",
+    "@angular/cdk": "^18.0.5"
   },
   "dependencies": {
     "tslib": "^2.0.0"

package/src/lib/chiplist/chip/chip.component.scss

@@ -0,0 +1,32 @@
+lib-chip{
+  > div{
+    padding: 0 .2rem;
+    height: 1.8rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    border-radius: 1rem;
+    width: auto;
+    background-color: var(--jvx-multiselect-primary);
+    color: var(--jvx-multiselect-on-primary);
+    display: flex;
+    align-items: center;
+    .chip-text{
+      flex: 1 1 100%;
+      padding-inline: .5rem;
+    }
+    .remove-button{
+      cursor: pointer;
+      color: var(--jvx-multiselect-on-primary);
+    }
+    &.disabled{
+      background-color: #c2c3c4;
+      color: currentColor;
+      .chip-text {
+        pointer-events: none;
+      }
+      .remove-button{
+        color: currentColor;
+      }
+    }
+  }
+}

package/src/lib/ng-jvx-multiselect.component.scss

@@ -1,260 +1,171 @@
-@use '@angular/material' as  mat;
 @use 'sass:map';
 
-  $primary: var(--jvx-multiselect-primary);
-  $accent: var(--jvx-multiselect-accent);
-  $warn: var(--jvx-multiselect-warn);
-  ng-jvx-multiselect {
+$primary: var(--jvx-multiselect-primary);
+$accent: var(--jvx-multiselect-accent);
+$warn: var(--jvx-multiselect-warn);
+ng-jvx-multiselect {
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  .ng-jvx-multiselect {
+    width: 100%;
     display: flex;
     align-items: center;
-    width: 100%;
 
-    .ng-jvx-multiselect {
+    .ng-jvx-multiselect-value-container {
       width: 100%;
       display: flex;
+      cursor: pointer;
+      position: relative;
+      justify-content: space-between;
       align-items: center;
 
-      .ng-jvx-multiselect-value-container {
-        width: 100%;
+      .ng-jvx-multiselect__placeholder {
+        height: 100%;
         display: flex;
-        cursor: pointer;
-        position: relative;
-        justify-content: space-between;
         align-items: center;
+        position: absolute;
+      }
 
-        .ng-jvx-multiselect__placeholder {
-          height: 100%;
-          display: flex;
-          align-items: center;
-          position: absolute;
-        }
-
-        .ng-jvx-multiselect-value {
-          flex: 1 1 100%;
-          max-width: calc(100% - 28px);
-          display: flex;
-          align-items: center;
-          /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
-          /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
-          .mat-chip-list-wrapper {
-            .mat-mdc-standard-chip {
-              padding: 0 5px 0 7px;
-              margin: 4px 5px 0;
+      .ng-jvx-multiselect-value {
+        flex: 1 1 100%;
+        max-width: calc(100% - 28px);
+        display: flex;
+        align-items: center;
+      }
 
-              .chip-content {
-                margin-left: 4px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                display: inline-block;
-              }
-            }
-          }
 
-        }
+      .ng-jvx-multiselect__remove-button {
+        display: flex;
+        height: 100%;
+        align-items: center;
+      }
 
+      .ng-jvx-multiselect-arrow {
+        width: 24px;
+        padding-right: 4px;
+        display: flex;
+        align-items: center;
+        height: 24px;
 
-        .ng-jvx-multiselect__remove-button {
-          display: flex;
-          height: 100%;
-          align-items: center;
+        svg {
+          transition: transform 0.3s ease-in-out;
         }
 
-        .ng-jvx-multiselect-arrow {
-          width: 24px;
-          padding-right: 4px;
-          display: flex;
-          align-items: center;
-
-          mat-icon {
-            transition: transform 0.3s ease-in-out;
+        @keyframes lds-ring {
+          0% {
+            transform: rotate(0deg);
           }
-
-          @keyframes lds-ring {
-            0% {
-              transform: rotate(0deg);
-            }
-            100% {
-              transform: rotate(360deg);
-            }
+          100% {
+            transform: rotate(360deg);
           }
+        }
 
-          .lds-ring {
-            display: inline-block;
-            position: relative;
-            width: 24px;
-            height: 24px;
-
-            div {
-              box-sizing: border-box;
-              display: block;
-              position: absolute;
-              width: 6px;
-              height: 16px;
-              margin: 4px;
-              border: 2px solid;
-              border-radius: 50%;
-              animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-              border-color: #{$accent} transparent transparent transparent;
-
-              &:nth-child(1) {
-                animation-delay: -0.45s;
-              }
-
-              &:nth-child(2) {
-                animation-delay: -0.3s;
-              }
+        .lds-ring {
+          display: inline-block;
+          position: relative;
+          width: 24px;
+          height: 24px;
+
+          div {
+            box-sizing: border-box;
+            display: block;
+            position: absolute;
+            width: 6px;
+            height: 16px;
+            margin: 4px;
+            border: 2px solid;
+            border-radius: 50%;
+            animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+            border-color: #{$accent} transparent transparent transparent;
+
+            &:nth-child(1) {
+              animation-delay: -0.45s;
+            }
 
-              &:nth-child(3) {
-                animation-delay: -0.15s;
-              }
+            &:nth-child(2) {
+              animation-delay: -0.3s;
             }
-          }
-        }
 
-        &.is-open {
-          .ng-jvx-multiselect-arrow {
-            mat-icon {
-              transform: rotate(180deg);
+            &:nth-child(3) {
+              animation-delay: -0.15s;
             }
           }
         }
-
       }
 
-      &.disabled {
-        pointer-events: none;
-
+      &.is-open {
         .ng-jvx-multiselect-arrow {
-          mat-icon {
-            opacity: 0.3;
+          svg {
+            transform: rotate(180deg);
           }
         }
       }
 
-      &.has-errors {
-        color: red;
+    }
 
-        .ng-jvx-multiselect-value {
-          &.single-value-container {
-            color: red;
-          }
+    &.disabled {
+      pointer-events: none;
 
-          &.multi-value-container {
-            width: 100%;
-          }
-        }
-
-        .ng-jvx-multiselect-arrow {
-          mat-icon {
-            color: red;
-          }
+      .ng-jvx-multiselect-arrow {
+        svg {
+          opacity: 0.3;
         }
       }
     }
-  }
-  /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-  .mat-select-test {
-    width: 250px;
-  }
 
-  .menu-list-container {
-    max-height: 300px;
-    display: flex;
-    flex-direction: column;
-  }
-  .menu-footer {
-    max-height: 30px;
-    overflow: hidden;
-  }
-  .cdk-overlay-pane {
-    .mat-mdc-menu-panel.jvx-multiselect-panel {
-      //min-width: 100%;
-      max-width: 100%;
-      position: relative;
-      overflow: visible;
+    &.has-errors {
+      color: red;
 
-      .closeMenuButton {
-        height: 22px;
-        width: 22px;
-        background-color: #{$primary};
-        position: absolute;
-        top: -11px;
-        right: 11px;
-        border-radius: 100%;
-        cursor: pointer;
-        color: #fff;
-        z-index: 10;
+      .ng-jvx-multiselect-value {
+        &.single-value-container {
+          color: red;
+        }
 
-        mat-icon {
-          color: #fff;
-          font-size: 15px;
-          height: 100%;
+        &.multi-value-container {
           width: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
         }
       }
 
-      .mat-mdc-menu-content {
-        padding-top: 0 !important;
-        padding-bottom: 0 !important;
-
-        .menu-list-container {
-          ng-scrollbar {
-            --scrollbar-color: transparent;
-            --scrollbar-container-color: transparent;
-            --scrollbar-thumb-color: #{$accent};
-            --scrollbar-thumb-hover-color: #{$accent};
-            --scrollbar-border-radius: 4px;
-            --scrollbar-size: 6px;
-            --scrollbar-padding: 8px;
-            --scroll-view-margin: 0;
-            --scroll-view-color: transparent;
-          }
+      .ng-jvx-multiselect-arrow {
+        svg {
+          color: red;
         }
+      }
+    }
+  }
+}
 
-        .search-input-container {
-          height: 40px;
-          display: flex;
-          align-items: center;
-          padding: 10px;
-
-          input {
-            width: 100%;
-            outline: none;
-            border: none;
-
-            &:focus {
-              outline: none;
-            }
-
-            &:active {
-              outline: none
-            }
-          }
-        }
-
-        .mat-mdc-selection-list {
-          padding-top: 0 !important;
-          padding-bottom: 0 !important;
-
-          .mat-mdc-list-option[aria-selected="true"], .mat-mdc-list-option[aria-selected="false"] {
-            .ng-jvx-option-wrapper{
-              padding-inline: 10px;
-            }
-            .mdc-list-item__end {
-              display: none;
+.menu-list-container {
+  max-height: 300px;
+  display: flex;
+  flex-direction: column;
+}
 
-            }
-            //.mdc-checkbox {
-            //  display: none
-            //}
-          }
-        }
+.menu-footer {
+  max-height: 30px;
+  overflow: hidden;
+}
 
-      }
+.cdk-overlay-pane {
+  .closeMenuButton {
+    height: 22px;
+    width: 22px;
+    background-color: #{$primary};
+    position: absolute;
+    top: -11px;
+    right: 11px;
+    border-radius: 100%;
+    cursor: pointer;
+    color: #fff;
+    z-index: 10;
+
+    svg {
+      fill: var(--jvx-multiselect-on-primary);
+      font-size: 15px;
+      height: 100%;
+      width: 100%;
     }
-
+  }
 }

package/src/lib/ng-jvx-option/ng-jvx-option.component.scss

@@ -1,25 +1,17 @@
-@use '@angular/material' as mat;
 @use 'sass:map';
 
 $primary: var(--jvx-multiselect-primary);
 $accent: var(--jvx-multiselect-accent);
 $warn: var(--jvx-multiselect-warn);
 ng-jvx-option {
-  .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option {
+  .ng-jvx-option {
     padding: 0;
     height: auto;
     min-height: 48px;
+    cursor: pointer;
+    position: relative;
 
-
-    .mat-list-text {
-      min-height: 48px;
-      display: flex;
-      justify-content: center;
-    }
-
-    &[aria-selected="true"] {
-
-      color: #{$primary};
+    &.ng-jvx-single-selected-option {
 
       .list-option-background {
         position: absolute;
@@ -29,7 +21,8 @@ ng-jvx-option {
         opacity: 0.45;
         height: 100%;
         width: 100%;
-        background: #{$primary};
+        background-color: #{$primary};
+        background-opacity: .3;
       }
     }
   }

package/src/lib/panel/panel.component.scss

@@ -0,0 +1,10 @@
+@import '@angular/cdk/overlay-prebuilt';
+
+.ng-jvx-panel{
+  display: inline-block;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
+  background: var(--jvx-multiselect-panel-bg);
+}
+.ng-jvx-panel-overlay{
+  background-opacity: 0;
+}