ng-jvx-multiselect 1.1.28

package/public-api.d.ts

@@ -0,0 +1,11 @@
+export * from './lib/ng-jvx-option/ng-jvx-option.component';
+export * from './lib/directives/ng-jvx-options-template.directive';
+export * from './lib/directives/ng-jvx-selection-template.directive';
+export * from './lib/directives/ng-jvx-group-header.directive';
+export * from './lib/directives/ng-jvx-disabled-option.directive';
+export * from './lib/ng-jvx-multiselect.service';
+export * from './lib/ng-jvx-multiselect.component';
+export * from './lib/ng-jvx-multiselect.module';
+export * from './lib/interfaces/ng-jvx-option-mapper';
+export * from './lib/interfaces/ng-jvx-search-mapper';
+export * from './lib/interfaces/ng-jvx-group-mapper';

package/public-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../projects/ng-jvx-multiselect/src/public-api.ts"],"names":[],"mappings":"AAIA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,oDAAoD,CAAC;AACnE,cAAc,sDAAsD,CAAC;AACrE,cAAc,gDAAgD,CAAC;AAC/D,cAAc,mDAAmD,CAAC;AAClE,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,cAAc,sCAAsC,CAAC"}

package/src/lib/mixins.scss

@@ -0,0 +1,6 @@
+@mixin alpha($property, $color-variable, $opacity) {
+  $color-variable-h: var(#{$color-variable+'-h'});
+  $color-variable-s: var(#{$color-variable+'-s'});
+  $color-variable-l: var(#{$color-variable+'-l'});
+  #{$property}: hsla($color-variable-h, $color-variable-s, $color-variable-l, $opacity);
+}

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

@@ -0,0 +1,234 @@
+@use '@angular/material' as  mat;
+@use 'sass:map';
+@import 'ng-jvx-option/ng-jvx-option.component';
+
+@mixin ng-jvx-multiselect-style($theme: null) {
+  $primary: var(--jvx-multiselect-primary);
+  $accent: var(--jvx-multiselect-accent);
+  $warn: var(--jvx-multiselect-warn);
+  @if ($theme) {
+    $primary: mat.get-color-from-palette(map.get($theme, primary));
+    $accent: mat.get-color-from-palette(map.get($theme, accent));
+    $warn: mat.get-color-from-palette(map.get($theme, warn));
+  }
+  @include ng-jvx-option-style($theme);
+  ng-jvx-multiselect {
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    .ng-jvx-multiselect {
+      width: 100%;
+      display: flex;
+      align-items: center;
+
+      .ng-jvx-multiselect-value-container {
+        width: 100%;
+        display: flex;
+        cursor: pointer;
+        position: relative;
+        justify-content: space-between;
+        align-items: center;
+
+        .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;
+
+          .mat-chip-list-wrapper {
+            .mat-standard-chip {
+              padding: 0 5px 0 7px;
+              margin: 4px 5px 0;
+
+              .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;
+
+          mat-icon {
+            transition: transform 0.3s ease-in-out;
+          }
+
+          @keyframes lds-ring {
+            0% {
+              transform: rotate(0deg);
+            }
+            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;
+              }
+
+              &:nth-child(3) {
+                animation-delay: -0.15s;
+              }
+            }
+          }
+        }
+
+        &.is-open {
+          .ng-jvx-multiselect-arrow {
+            mat-icon {
+              transform: rotate(180deg);
+            }
+          }
+        }
+
+      }
+
+      &.disabled {
+        pointer-events: none;
+
+        .ng-jvx-multiselect-arrow {
+          mat-icon {
+            opacity: 0.3;
+          }
+        }
+      }
+
+      &.has-errors {
+        color: red;
+
+        .ng-jvx-multiselect-value {
+          &.single-value-container {
+            color: red;
+          }
+
+          &.multi-value-container {
+            width: 100%;
+          }
+        }
+
+        .ng-jvx-multiselect-arrow {
+          mat-icon {
+            color: red;
+          }
+        }
+      }
+    }
+  }
+  .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-menu-panel.jvx-multiselect-panel {
+      min-width: 100%;
+      max-width: 100%;
+
+      .mat-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;
+          }
+        }
+
+        .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-selection-list {
+          padding-top: 0 !important;
+          padding-bottom: 0 !important;
+
+          mat-list-option[aria-selected="true"], mat-list-option[aria-selected="false"] {
+            mat-pseudo-checkbox {
+              display: none
+            }
+          }
+        }
+
+      }
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin ng-jvx-option-style($theme: null) {
+  $primary: var(--jvx-multiselect-primary);
+  $accent: var(--jvx-multiselect-accent);
+  $warn: var(--jvx-multiselect-warn);
+  @if ($theme) {
+    $primary: mat.get-color-from-palette(map.get($theme, primary));
+    $accent: mat.get-color-from-palette(map.get($theme, accent));
+    $warn: mat.get-color-from-palette(map.get($theme, warn));
+  }
+
+  mat-list-option.mat-list-item.mat-list-option.ng-jvx-option {
+    height: auto;
+    min-height: 48px;
+
+    .mat-list-text {
+      min-height: 48px;
+      display: flex;
+      justify-content: center;
+    }
+
+    &[aria-selected="true"] {
+
+      color: #{$primary};
+
+      .list-option-background {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: -1;
+        opacity: 0.45;
+        height: 100%;
+        width: 100%;
+        background: #{$primary};
+      }
+    }
+  }
+}