@syncfusion/ej2-dropdowns 20.2.50 → 20.3.47

package/styles/drop-down-base/highcontrast-light.css

@@ -91,7 +91,8 @@
   position: relative;
 }
 
-.e-popup.e-ddl .e-dropdownbase.e-nodata {
+.e-popup.e-ddl .e-dropdownbase.e-nodata,
+.e-popup.e-mention .e-dropdownbase.e-nodata {
   color: #000;
   cursor: default;
   font-family: inherit;
@@ -100,6 +101,45 @@
   text-align: center;
 }
 
+.e-mention.e-popup {
+  background: #400074;
+  border: 0;
+  box-shadow: 0 2px 3px 1px 0 0 5px 0 rgba(0, 0, 0, 0.4);
+  margin-top: 2px;
+  position: absolute;
+}
+
+.e-mention .e-dropdownbase .e-list-item .e-highlight {
+  display: inline;
+  font-weight: bold;
+  vertical-align: baseline;
+}
+
+.e-mention .e-mention-chip,
+.e-mention .e-mention-chip:hover {
+  background: transparent;
+  border-radius: 0;
+  border: 1px solid #757575;
+  color: #400074;
+  cursor: default;
+}
+
+.e-mention .e-mention-chip::selection {
+  color: #000;
+  background: #400074;
+}
+
+.e-mention.e-editable-element {
+  border: 2px solid #757575;
+  height: auto;
+  min-height: 120px;
+  width: 100%;
+}
+
+.e-form-mirror-div {
+  white-space: pre-wrap;
+}
+
 .e-rtl .e-dropdownbase.e-dd-group .e-list-item {
   padding-right: 20px;
 }
@@ -162,6 +202,7 @@
   border-color: #757575;
 }
 .e-dropdownbase .e-list-item {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   background-color: #fff;
   border-bottom: 2px;

package/styles/drop-down-base/highcontrast.css

@@ -91,7 +91,8 @@
   position: relative;
 }
 
-.e-popup.e-ddl .e-dropdownbase.e-nodata {
+.e-popup.e-ddl .e-dropdownbase.e-nodata,
+.e-popup.e-mention .e-dropdownbase.e-nodata {
   color: #fff;
   cursor: default;
   font-family: inherit;
@@ -100,6 +101,45 @@
   text-align: center;
 }
 
+.e-mention.e-popup {
+  background: #ffd939;
+  border: 0;
+  box-shadow: 0 2px 3px 1px 0 0 5px 0 rgba(0, 0, 0, 0.4);
+  margin-top: 2px;
+  position: absolute;
+}
+
+.e-mention .e-dropdownbase .e-list-item .e-highlight {
+  display: inline;
+  font-weight: bold;
+  vertical-align: baseline;
+}
+
+.e-mention .e-mention-chip,
+.e-mention .e-mention-chip:hover {
+  background: transparent;
+  border-radius: 0;
+  border: 1px solid #969696;
+  color: #ffd939;
+  cursor: default;
+}
+
+.e-mention .e-mention-chip::selection {
+  color: #000;
+  background: #ffd939;
+}
+
+.e-mention.e-editable-element {
+  border: 2px solid #969696;
+  height: auto;
+  min-height: 120px;
+  width: 100%;
+}
+
+.e-form-mirror-div {
+  white-space: pre-wrap;
+}
+
 .e-rtl .e-dropdownbase.e-dd-group .e-list-item {
   padding-right: 20px;
 }
@@ -162,6 +202,7 @@
   border-color: #969696;
 }
 .e-dropdownbase .e-list-item {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   background-color: #000;
   border-bottom: 2px;

package/styles/drop-down-base/material-dark.css

@@ -77,7 +77,8 @@
   position: relative;
 }
 
-.e-popup.e-ddl .e-dropdownbase.e-nodata {
+.e-popup.e-ddl .e-dropdownbase.e-nodata,
+.e-popup.e-mention .e-dropdownbase.e-nodata {
   color: rgba(255, 255, 255, 0.7);
   cursor: default;
   font-family: inherit;
@@ -86,6 +87,45 @@
   text-align: center;
 }
 
+.e-mention.e-popup {
+  background: rgba(255, 255, 255, 0.18);
+  border: 0;
+  box-shadow: 0 2px 3px 1px 0 2px 3px 1px rgba(0, 0, 0, 0.21);
+  margin-top: 2px;
+  position: absolute;
+}
+
+.e-mention .e-dropdownbase .e-list-item .e-highlight {
+  display: inline;
+  font-weight: bold;
+  vertical-align: baseline;
+}
+
+.e-mention .e-mention-chip,
+.e-mention .e-mention-chip:hover {
+  background: #424242;
+  border-radius: 2px;
+  border: none;
+  color: #00b0ff;
+  cursor: default;
+}
+
+.e-mention .e-mention-chip::selection {
+  color: #000;
+  background: #00b0ff;
+}
+
+.e-mention.e-editable-element {
+  border: 2px solid transparent;
+  height: auto;
+  min-height: 120px;
+  width: 100%;
+}
+
+.e-form-mirror-div {
+  white-space: pre-wrap;
+}
+
 .e-rtl .e-dropdownbase.e-dd-group .e-list-item {
   padding-right: 2em;
 }
@@ -148,6 +188,7 @@
   border-color: transparent;
 }
 .e-dropdownbase .e-list-item {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   background-color: #424242;
   border-bottom: 0;

package/styles/drop-down-base/material.css

@@ -77,7 +77,8 @@
   position: relative;
 }
 
-.e-popup.e-ddl .e-dropdownbase.e-nodata {
+.e-popup.e-ddl .e-dropdownbase.e-nodata,
+.e-popup.e-mention .e-dropdownbase.e-nodata {
   color: #000;
   cursor: default;
   font-family: inherit;
@@ -86,6 +87,45 @@
   text-align: center;
 }
 
+.e-mention.e-popup {
+  background: #fff;
+  border: 0;
+  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
+  margin-top: 2px;
+  position: absolute;
+}
+
+.e-mention .e-dropdownbase .e-list-item .e-highlight {
+  display: inline;
+  font-weight: bold;
+  vertical-align: baseline;
+}
+
+.e-mention .e-mention-chip,
+.e-mention .e-mention-chip:hover {
+  background: #eee;
+  border-radius: 2px;
+  border: none;
+  color: #e3165b;
+  cursor: default;
+}
+
+.e-mention .e-mention-chip::selection {
+  color: #fff;
+  background: #e3165b;
+}
+
+.e-mention.e-editable-element {
+  border: 2px solid #e0e0e0;
+  height: auto;
+  min-height: 120px;
+  width: 100%;
+}
+
+.e-form-mirror-div {
+  white-space: pre-wrap;
+}
+
 .e-rtl .e-dropdownbase.e-dd-group .e-list-item {
   padding-right: 2em;
 }
@@ -148,6 +188,7 @@
   border-color: #e0e0e0;
 }
 .e-dropdownbase .e-list-item {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   background-color: #fff;
   border-bottom: 0;

package/styles/drop-down-base/tailwind-dark.css

@@ -112,7 +112,8 @@
   position: relative;
 }
 
-.e-popup.e-ddl .e-dropdownbase.e-nodata {
+.e-popup.e-ddl .e-dropdownbase.e-nodata,
+.e-popup.e-mention .e-dropdownbase.e-nodata {
   color: #fff;
   cursor: default;
   font-family: "Inter";
@@ -121,6 +122,45 @@
   text-align: center;
 }
 
+.e-mention.e-popup {
+  background: #1f2937;
+  border: 0;
+  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
+  margin-top: 2px;
+  position: absolute;
+}
+
+.e-mention .e-dropdownbase .e-list-item .e-highlight {
+  display: inline;
+  font-weight: bold;
+  vertical-align: baseline;
+}
+
+.e-mention .e-mention-chip,
+.e-mention .e-mention-chip:hover {
+  background: #374151;
+  border-radius: 2px;
+  border: none;
+  color: #22d3ee;
+  cursor: default;
+}
+
+.e-mention .e-mention-chip::selection {
+  color: #fff;
+  background: #22d3ee;
+}
+
+.e-mention.e-editable-element {
+  border: 2px solid #4b5563;
+  height: auto;
+  min-height: 120px;
+  width: 100%;
+}
+
+.e-form-mirror-div {
+  white-space: pre-wrap;
+}
+
 .e-bigger.e-ddl .e-dropdownbase.e-nodata,
 .e-bigger .e-ddl .e-dropdownbase.e-nodata {
   font-size: 16px;
@@ -254,6 +294,7 @@
   border-color: #4b5563;
 }
 .e-dropdownbase .e-list-item {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   background-color: #374151;
   border-bottom: 0;

package/styles/drop-down-base/tailwind.css

@@ -112,7 +112,8 @@
   position: relative;
 }
 
-.e-popup.e-ddl .e-dropdownbase.e-nodata {
+.e-popup.e-ddl .e-dropdownbase.e-nodata,
+.e-popup.e-mention .e-dropdownbase.e-nodata {
   color: #111827;
   cursor: default;
   font-family: "Inter";
@@ -121,6 +122,45 @@
   text-align: center;
 }
 
+.e-mention.e-popup {
+  background: #fff;
+  border: 0;
+  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
+  margin-top: 2px;
+  position: absolute;
+}
+
+.e-mention .e-dropdownbase .e-list-item .e-highlight {
+  display: inline;
+  font-weight: bold;
+  vertical-align: baseline;
+}
+
+.e-mention .e-mention-chip,
+.e-mention .e-mention-chip:hover {
+  background: #f3f4f6;
+  border-radius: 2px;
+  border: none;
+  color: #4f46e5;
+  cursor: default;
+}
+
+.e-mention .e-mention-chip::selection {
+  color: #fff;
+  background: #4f46e5;
+}
+
+.e-mention.e-editable-element {
+  border: 2px solid #e5e7eb;
+  height: auto;
+  min-height: 120px;
+  width: 100%;
+}
+
+.e-form-mirror-div {
+  white-space: pre-wrap;
+}
+
 .e-bigger.e-ddl .e-dropdownbase.e-nodata,
 .e-bigger .e-ddl .e-dropdownbase.e-nodata {
   font-size: 16px;
@@ -254,6 +294,7 @@
   border-color: #e5e7eb;
 }
 .e-dropdownbase .e-list-item {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   background-color: #fff;
   border-bottom: 0;

package/styles/drop-down-list/_all.scss

@@ -1,2 +1,3 @@
-@import 'layout.scss';
+@import 'layout.scss';
+
 @import 'theme.scss';

package/styles/drop-down-list/_bootstrap-dark-definition.scss

@@ -1,4 +1,4 @@
-//default 
+//default
 $ddl-input-font-size: 14px !default;
 $ddl-input-border: $border-size $border-type !default;
 $ddl-input-font-family: inherit !default;
@@ -24,6 +24,7 @@ $ddl-default-border-color: $grey-44 !default;
 $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-filter-margin: 0 !default;
+
 // small size
 $ddl-small-list-font-size: 13px !default;
 

package/styles/drop-down-list/_bootstrap-definition.scss

@@ -23,6 +23,7 @@ $ddl-default-border-color: $grey-cc !default;
 $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-filter-margin: 0 !default;
+
 // small size
 $ddl-small-list-font-size: 13px !default;
 
@@ -32,7 +33,7 @@ $ddl-bigger-small-list-font-size: 14px !default;
 @include export-module('dropdownlist-bootstrap') {
   #{&}.e-popup.e-ddl {
     border-radius: 4px;
-    box-shadow:  0 6px 12px $ddl-list-box-shadow-color;
+    box-shadow: 0 6px 12px $ddl-list-box-shadow-color;
     margin-top: 3px;
     @at-root {
       #{if(&, '&', '*')} .e-input-group {

package/styles/drop-down-list/_bootstrap4-definition.scss

@@ -1,4 +1,5 @@
 $ddl-input-font-size: 14px !default;
+
 // $ddl-input-border: $border-size $border-type !default;
 $ddl-input-font-family: inherit !default;
 $ddl-zero-value: 0 !default;
@@ -25,6 +26,7 @@ $ddl-icon-color: rgba($black, .5) !default;
 $ddl-icon-hover-color: rgba($black, .4) !default;
 $ddl-readonly-bg-color: $gray-200 !default;
 $ddl-filter-margin: 0 !default;
+
 // small size
 $ddl-small-list-font-size: 13px !default;
 
@@ -34,7 +36,7 @@ $ddl-bigger-small-list-font-size: 14px !default;
 @include export-module('dropdownlist-bootstrap4') {
   #{&}.e-popup.e-ddl {
     border-radius: 4px;
-    box-shadow:  none;
+    box-shadow: none;
     margin-top: 3px;
     @at-root {
       #{if(&, '&', '*')} .e-input-group {

package/styles/drop-down-list/_bootstrap5-definition.scss

@@ -17,6 +17,7 @@ $ddl-back-icon-padding: 0 8px !default;
 $ddl-popup-shadow: $shadow-lg !default;
 $ddl-readonly-bg-color: $content-bg-color-alt2 !default;
 $ddl-filter-margin: 0 !default;
+
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
 
@@ -38,7 +39,7 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
 @include export-module('dropdownlist-bootstrap5') {
   #{&}.e-popup.e-ddl {
     border-radius: 4px;
-    box-shadow:  none;
+    box-shadow: none;
     margin-top: 3px;
     @at-root {
       #{if(&, '&', '*')} .e-input-group {
@@ -126,7 +127,7 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
 
   .e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
   .e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
-  .e-float-input.e-ddl input[readonly]  ~ span.e-input-group-icon.e-ddl-icon,
+  .e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
   .e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
     background: transparent;
     color: $ddl-list-icon-color;
@@ -139,7 +140,6 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
     background: $content-bg-color-alt2;
   }
 
-
   .e-input-group:not(.e-disabled) .e-control#{&}.e-dropdownlist ~ .e-ddl-icon,
   .e-input-group.e-disabled.e-ddl .e-control#{&}.e-dropdownlist ~ .e-input-group-icon,
   .e-control#{&}.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,

package/styles/drop-down-list/_fabric-dark-definition.scss

@@ -1,4 +1,4 @@
-//default 
+//default
 $ddl-input-font-size: 14px !default;
 $ddl-input-border: $border-size $border-type !default;
 $ddl-input-font-family: inherit !default;
@@ -24,6 +24,7 @@ $ddl-filter-background-color: $neutral-white !default;
 $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-filter-margin: 0 !default;
+
 //small size
 $ddl-small-list-font-size: 13px !default;
 

package/styles/drop-down-list/_fabric-definition.scss

@@ -23,8 +23,10 @@ $ddl-filter-background-color: $neutral-white !default;
 $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-filter-margin: 0 !default;
+
 //small size
 $ddl-small-list-font-size: 13px !default;
+
 // touch size
 $ddl-bigger-small-list-font-size: 14px !default;
 

package/styles/drop-down-list/_fluent-definition.scss

@@ -18,6 +18,7 @@ $ddl-popup-shadow: $shadow-lg !default;
 $ddl-readonly-bg-color: $content-bg-color !default;
 $ddl-filter-parent-border: 1px solid $flyout-border !default;
 $ddl-filter-margin: 0 !default;
+
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
 
@@ -39,7 +40,7 @@ $ddl-filter-box-shadow: none !default;
 @include export-module('dropdownlist-bootstrap5') {
   #{&}.e-popup.e-ddl {
     border-radius: 4px;
-    box-shadow:  none;
+    box-shadow: none;
     margin-top: 1px;
     @at-root {
       #{if(&, '&', '*')} .e-input-group {

package/styles/drop-down-list/_fusionnew-definition.scss

@@ -17,6 +17,7 @@ $ddl-back-icon-padding: 0 8px !default;
 $ddl-popup-shadow: $shadow-lg !default;
 $ddl-readonly-bg-color: $content-bg-color-alt2 !default;
 $ddl-filter-margin: 0 !default;
+
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
 
@@ -38,7 +39,7 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
 @include export-module('dropdownlist-bootstrap5') {
   #{&}.e-popup.e-ddl {
     border-radius: 4px;
-    box-shadow:  none;
+    box-shadow: none;
     margin-top: 3px;
     @at-root {
       #{if(&, '&', '*')} .e-input-group {
@@ -126,7 +127,7 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
 
   .e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
   .e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
-  .e-float-input.e-ddl input[readonly]  ~ span.e-input-group-icon.e-ddl-icon,
+  .e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
   .e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
     background: transparent;
     color: $ddl-list-icon-color;
@@ -139,7 +140,6 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
     background: $content-bg-color-alt2;
   }
 
-
   .e-input-group:not(.e-disabled) .e-control#{&}.e-dropdownlist ~ .e-ddl-icon,
   .e-input-group.e-disabled.e-ddl .e-control#{&}.e-dropdownlist ~ .e-input-group-icon,
   .e-control#{&}.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,

package/styles/drop-down-list/_highcontrast-definition.scss

@@ -23,8 +23,10 @@ $ddl-filter-background-color: $bg-base-0 !default;
 $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-filter-margin: 0 !default;
+
 //small size
 $ddl-small-list-font-size: 13px !default;
+
 // touch size
 $ddl-bigger-small-list-font-size: 14px !default;
 
@@ -41,40 +43,49 @@ $ddl-bigger-small-list-font-size: 14px !default;
     #{if(&, '&', '*')}.e-popup {
       border: 0;
       box-shadow: 0 0 5px 0 $ddl-list-box-shadow-color;
-      margin-top: 1px;#{if(&, '&', '*')} .e-content.e-nodata {
+      margin-top: 1px;
+      #{if(&, '&', '*')} .e-content.e-nodata {
         background-color: $bg-base-0;
-      }#{if(&, '&', '*')} .e-dropdownbase {
+      }
+      #{if(&, '&', '*')} .e-dropdownbase {
         #{if(&, '&', '*')} .e-list-item {
           #{if(&, '&', '*')} .e-highlight {
             color: $header-font;
           }
         }
-      }#{if(&, '&', '*')} .e-input-group {
+      }
+      #{if(&, '&', '*')} .e-input-group {
         display: flex;
         width: auto;
         @at-root {
           #{if(&, '&', '*')} input {
             line-height: 15px;
           }
-        }#{if(&, '&', '*')} .e-clear-icon {
+        }
+        #{if(&, '&', '*')} .e-clear-icon {
           border-radius: 20px;
           height: 20px;
           margin: 5px;
           min-width: 20px;
-        }#{if(&, '&', '*')} .e-clear-icon {
+        }
+        #{if(&, '&', '*')} .e-clear-icon {
           #{if(&, '&', '*')}::before {
             font-size: 10px;
+          }
         }
       }
-      }#{if(&, '&', '*')} .e-filter-parent {
+      #{if(&, '&', '*')} .e-filter-parent {
         border-left-width: 0;
-        border-right-width: 0;#{if(&, '&', '*')} .e-input-group.e-control-wrapper:hover:active {
+        border-right-width: 0;
+        #{if(&, '&', '*')} .e-input-group.e-control-wrapper:hover:active {
           border-color: $border-fg;
         }
-      }.e-bigger #{if(&, '&', '*')} {
+      }
+      .e-bigger #{if(&, '&', '*')} {
         #{if(&, '&', '*')}.e-ddl-device.e-ddl-device-filter {
           margin-top: 0;
-        }#{if(&, '&', '*')} .e-list-item,
+        }
+        #{if(&, '&', '*')} .e-list-item,
         #{if(&, '&', '*')} .e-list-group-item,
         #{if(&, '&', '*')} .e-fixed-head {
           font-size: 15px;
@@ -98,7 +109,7 @@ $ddl-bigger-small-list-font-size: 14px !default;
             height: 46px;
           }
         }
-        }
+      }
 
       .e-bigger.e-small #{if(&, '&', '*')} {
         #{if(&, '&', '*')} .e-list-item,