npm - @syncfusion/ej2-angular-dropdowns - Versions diffs - 20.2.50 → 20.3.47 - Mend

@syncfusion/ej2-angular-dropdowns 20.2.50 → 20.3.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (654) hide show

package/styles/bootstrap5.css CHANGED Viewed

@@ -103,7 +103,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: #212529;
   cursor: default;
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -112,6 +113,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: #e9ecef;
+  border-radius: 2px;
+  border: none;
+  color: #0d6efd;
+  cursor: default;
+}
+.e-mention .e-mention-chip::selection {
+  color: #fff;
+  background: #0d6efd;
+}
+.e-mention.e-editable-element {
+  border: 2px solid #dee2e6;
+  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: 12px;
 }
@@ -175,6 +215,7 @@
   border-color: #dee2e6;
 }
 .e-dropdownbase .e-list-item {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   background-color: #fff;
   border-bottom: 0;
@@ -366,6 +407,9 @@
   color: #212529;
 }
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable-line no-empty-source */
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
   0% {
     transform: rotate(0);
@@ -582,6 +626,7 @@
   background-color: #fff;
 }
+/* stylelint-disable property-no-vendor-prefix */
 .e-ddl input.e-input::-webkit-contacts-auto-fill-button {
   display: none;
   pointer-events: none;
@@ -590,6 +635,7 @@
   visibility: hidden;
 }
+/* stylelint-enable property-no-vendor-prefix */
 .e-filter-parent {
   border: 0;
   border-top-width: 0;
@@ -629,6 +675,7 @@
   cursor: default;
 }
+/* stylelint-disable property-no-vendor-prefix */
 .e-ddl.e-input-group .e-ddl-hidden,
 .e-ddl.e-float-input .e-ddl-hidden {
   -webkit-appearance: initial;
@@ -771,6 +818,9 @@ ejs-dropdownlist {
   color: #fff;
 }
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable-line no-empty-source */
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
   0% {
     transform: rotate(0);
@@ -788,6 +838,8 @@ ejs-dropdownlist {
   }
 }
 /*! TreeView's bootstrap5 theme wise override definitions and variables */
+/* stylelint-disable */
+/* stylelint-disable */
 .e-ddt .e-ddt-icon::before {
   content: "\e734";
 }
@@ -1226,6 +1278,10 @@ ejs-dropdownlist {
   color: #212529;
 }
+/* stylelint-disable-line no-empty-source */ /* stylelint-disable-line no-empty-source */
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable-line no-empty-source */
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
   0% {
     transform: rotate(0);
@@ -1607,7 +1663,7 @@ ejs-dropdownlist {
   border: 0;
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 14px;
-  font-weight: 400;
+  font-weight: normal;
   height: 30px;
   min-height: 30px;
   outline: none;
@@ -1621,7 +1677,7 @@ ejs-dropdownlist {
   color: inherit;
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 14px;
-  font-weight: 400;
+  font-weight: normal;
   height: 30px;
   min-height: 30px;
   outline: none;
@@ -1644,6 +1700,7 @@ ejs-dropdownlist {
   min-height: 36px;
 }
+/* stylelint-disable property-no-vendor-prefix */
 .e-multi-select-wrapper input[type=text]::-ms-clear {
   display: none;
 }
@@ -2303,6 +2360,7 @@ ejs-multiselect {
   box-sizing: border-box;
 }
+/* stylelint-disable property-no-vendor-prefix */
 .e-multi-select-wrapper .e-chips > .e-chipcontent {
   -webkit-text-fill-color: #fff;
   color: #fff;
@@ -2429,19 +2487,19 @@ ejs-multiselect {
   border: 0 solid transparent;
 }
-.e-multi-select-wrapper input.e-dropdownbase:-moz-placeholder {
+.e-multi-select-wrapper input.e-dropdownbase:-moz-placeholder { /* stylelint-disable-line selector-no-vendor-prefix */
   color: #6c757d;
 }
-.e-multi-select-wrapper input.e-dropdownbase::-moz-placeholder {
+.e-multi-select-wrapper input.e-dropdownbase::-moz-placeholder { /* stylelint-disable-line selector-no-vendor-prefix */
   color: #6c757d;
 }
-.e-multi-select-wrapper input.e-dropdownbase:-ms-input-placeholder {
+.e-multi-select-wrapper input.e-dropdownbase:-ms-input-placeholder { /* stylelint-disable-line selector-no-vendor-prefix */
   color: #6c757d;
 }
-.e-multi-select-wrapper input.e-dropdownbase::-webkit-input-placeholder {
+.e-multi-select-wrapper input.e-dropdownbase::-webkit-input-placeholder { /* stylelint-disable-line selector-no-vendor-prefix */
   color: #6c757d;
 }
@@ -2522,6 +2580,7 @@ ejs-multiselect {
   content: "\e744";
 }
+/* stylelint-disable property-no-vendor-prefix */
 .e-listbox-wrapper,
 .e-listbox-container {
   -webkit-overflow-scrolling: touch;
@@ -2540,7 +2599,7 @@ ejs-multiselect {
 }
 .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
 .e-listbox-container.e-listboxtool-container .e-list-wrap {
-  width: 84% !important;
+  width: 84% !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-listbox-wrapper:focus,
 .e-listbox-container:focus {
@@ -2899,16 +2958,6 @@ ejs-listbox {
   top: 30%;
 }
-.e-listboxtool-container .e-left {
-  -ms-flex-direction: row-reverse;
-      flex-direction: row-reverse;
-}
-.e-listboxtool-wrapper .e-left {
-  -ms-flex-direction: column-reverse;
-      flex-direction: column-reverse;
-}
 .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
 .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
   margin-right: 15px;
@@ -2922,7 +2971,7 @@ ejs-listbox {
 .e-listbox-wrapper.e-bigger.e-listboxtool-container .e-list-wrap,
 .e-bigger .e-listbox-container.e-listboxtool-container .e-list-wrap,
 .e-listbox-container.e-bigger.e-listboxtool-container .e-list-wrap {
-  width: 80% !important;
+  width: 80% !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-bigger .e-listbox-wrapper .e-list-item,
 .e-listbox-wrapper.e-bigger .e-list-item,
@@ -3011,28 +3060,14 @@ ejs-listbox {
 .e-listbox-container.e-bigger .e-list-header .e-text {
   font-size: 14px;
 }
-.e-listbox-wrapper.e-filter-list .e-list-parent {
-  height: calc(100% - 50px);
-}
-.e-listbox-container.e-filter-list .e-list-wrap {
-  height: calc(100% - 50px) !important;
-}
-.e-small .e-listbox-wrapper.e-filter-list .e-list-parent {
+.e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
+.e-small .e-listbox-container.e-filter-list .e-list-parent {
   height: calc(100% - 45px);
 }
-.e-small .e-listbox-container.e-filter-list .e-list-wrap {
-  height: calc(100% - 45px) !important;
-}
-.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
-  height: calc(100% - 56px);
-}
-.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
-  height: calc(100% - 56px) !important;
+.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
+.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
+  height: calc(100% - 55px);
 }
 .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
@@ -3045,14 +3080,11 @@ ejs-listbox {
   height: calc(100% - 40px);
 }
-.e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
+.e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
+.e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
   height: calc(100% - 45px);
 }
-.e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
-  height: calc(100% - 45px) !important;
-}
 .e-listbox-wrapper,
 .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
 .e-listboxtool-container.e-listbox-container .e-ul {
@@ -3072,6 +3104,11 @@ ejs-listbox {
   font-size: 12px;
 }
+.e-listbox-wrapper.e-filter-list .e-list-parent,
+.e-listbox-container.e-filter-list .e-list-parent {
+  height: calc(100% - 47px);
+}
 .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
 .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
   height: calc(100% - 86px);
@@ -3302,4 +3339,24 @@ ejs-listbox {
 .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
   padding-left: 10px;
   padding-right: 16px;
-}
+}
+/* stylelint-disable-line no-empty-source */
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes material-spinner-rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes fabric-spinner-rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/* stylelint-disable-line no-empty-source */

package/styles/bootstrap5.scss CHANGED Viewed

@@ -5,3 +5,4 @@
 @import 'auto-complete/bootstrap5.scss';
 @import 'multi-select/bootstrap5.scss';
 @import 'list-box/bootstrap5.scss';
+@import 'mention/bootstrap5.scss';

package/styles/combo-box/_all.scss CHANGED Viewed

	@@ -1 +1 @@
1	-
1	+ /* stylelint-disable-line no-empty-source */

package/styles/combo-box/_bootstrap-dark-definition.scss CHANGED Viewed

@@ -1,2 +1,2 @@
-//default
+//default
 //enddefault

package/styles/combo-box/_bootstrap-definition.scss CHANGED Viewed

@@ -1,2 +1,2 @@
-//default
+//default
 //enddefault

package/styles/combo-box/_bootstrap4-definition.scss CHANGED Viewed

@@ -1,10 +1,10 @@
 //default
-.e-input-group.e-ddl .e-control.e-combobox~.e-ddl-icon {
+.e-input-group.e-ddl .e-control.e-combobox ~ .e-ddl-icon {
   font-size: 8px;
 }
-.e-bigger .e-input-group.e-ddl .e-control.e-combobox~.e-ddl-icon {
+.e-bigger .e-input-group.e-ddl .e-control.e-combobox ~ .e-ddl-icon {
   font-size: 10px;
 }

package/styles/combo-box/_bootstrap5-definition.scss CHANGED Viewed

@@ -1,2 +1,2 @@
-//default
+//default
 //enddefault

package/styles/combo-box/_fabric-dark-definition.scss CHANGED Viewed

@@ -1,2 +1,2 @@
-//default
+//default
 //enddefault

package/styles/combo-box/_fabric-definition.scss CHANGED Viewed

@@ -1,2 +1,2 @@
-//default
+//default
 //enddefault

package/styles/combo-box/_fluent-definition.scss CHANGED Viewed

@@ -1,2 +1,2 @@
-//default
+//default
 //enddefault

package/styles/combo-box/_fusionnew-definition.scss CHANGED Viewed

@@ -1,2 +1,2 @@
-//default
+//default
 //enddefault

package/styles/combo-box/_highcontrast-definition.scss CHANGED Viewed

@@ -1,2 +1,2 @@
-//default
+//default
 //enddefault

package/styles/combo-box/_highcontrast-light-definition.scss CHANGED Viewed

@@ -1,3 +1,3 @@
-//default
+//default
 //undefined
 //enddefault

package/styles/combo-box/_material-dark-definition.scss CHANGED Viewed

@@ -1,2 +1,2 @@
-//default
+//default
 //enddefault

package/styles/combo-box/_material-definition.scss CHANGED Viewed

@@ -1,2 +1,2 @@
-//default
+//default
 //enddefault

package/styles/combo-box/_material3-definition.scss CHANGED Viewed

@@ -1,2 +1,2 @@
-//default
+//default
 //enddefault

package/styles/combo-box/_tailwind-definition.scss CHANGED Viewed

@@ -1,2 +1,2 @@
-//default
+//default
 //enddefault

package/styles/combo-box/bootstrap-dark.css CHANGED Viewed

@@ -101,4 +101,6 @@
 .e-bigger.e-small .e-popup.e-ddl .e-dropdownbase {
   min-height: 34px;
-}
+}
+/* stylelint-disable-line no-empty-source */

package/styles/combo-box/bootstrap.css CHANGED Viewed

@@ -101,4 +101,6 @@
 .e-bigger.e-small .e-popup.e-ddl .e-dropdownbase {
   min-height: 34px;
-}
+}
+/* stylelint-disable-line no-empty-source */

package/styles/combo-box/bootstrap4.css CHANGED Viewed

@@ -143,4 +143,6 @@
 .e-bigger .e-input-group.e-ddl .e-control.e-combobox ~ .e-ddl-icon {
   font-size: 10px;
-}
+}
+/* stylelint-disable-line no-empty-source */

package/styles/combo-box/bootstrap5-dark.css CHANGED Viewed

@@ -142,4 +142,6 @@
 .e-bigger.e-small .e-popup.e-ddl .e-dropdownbase {
   min-height: 34px;
-}
+}
+/* stylelint-disable-line no-empty-source */

package/styles/combo-box/bootstrap5.css CHANGED Viewed

@@ -142,4 +142,6 @@
 .e-bigger.e-small .e-popup.e-ddl .e-dropdownbase {
   min-height: 34px;
-}
+}
+/* stylelint-disable-line no-empty-source */

package/styles/combo-box/fabric-dark.css CHANGED Viewed

@@ -77,4 +77,6 @@
 .e-ddl.e-popup .e-bigger.e-small .e-input-group input,
 .e-ddl.e-popup .e-bigger.e-small .e-input-group input.e-input {
   height: 34px;
-}
+}
+/* stylelint-disable-line no-empty-source */

package/styles/combo-box/fabric.css CHANGED Viewed

@@ -70,4 +70,6 @@
 .e-bigger.e-small .e-ddl.e-popup .e-input-group input, .e-bigger.e-small .e-ddl.e-popup .e-input-group input.e-input {
   height: 34px;
-}
+}
+/* stylelint-disable-line no-empty-source */

package/styles/combo-box/fluent-dark.css CHANGED Viewed

@@ -122,4 +122,6 @@
 .e-bigger.e-small .e-popup.e-ddl .e-dropdownbase {
   min-height: 34px;
-}
+}
+/* stylelint-disable-line no-empty-source */

package/styles/combo-box/fluent.css CHANGED Viewed

@@ -122,4 +122,6 @@
 .e-bigger.e-small .e-popup.e-ddl .e-dropdownbase {
   min-height: 34px;
-}
+}
+/* stylelint-disable-line no-empty-source */

package/styles/combo-box/highcontrast-light.css CHANGED Viewed

@@ -74,4 +74,6 @@
 }
 .e-bigger.e-small .e-ddl.e-popup .e-input-group input {
   height: 34px;
-}
+}
+/* stylelint-disable-line no-empty-source */

package/styles/combo-box/highcontrast.css CHANGED Viewed

@@ -74,4 +74,6 @@
 }
 .e-bigger.e-small .e-ddl.e-popup .e-input-group input {
   height: 34px;
-}
+}
+/* stylelint-disable-line no-empty-source */

package/styles/combo-box/material-dark.css CHANGED Viewed

@@ -103,4 +103,6 @@
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
   padding: 5px 5px 5px 12px;
-}
+}
+/* stylelint-disable-line no-empty-source */

package/styles/combo-box/material.css CHANGED Viewed

@@ -128,4 +128,6 @@
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
-}
+}
+/* stylelint-disable-line no-empty-source */

package/styles/combo-box/tailwind-dark.css CHANGED Viewed

@@ -91,4 +91,6 @@
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
-}
+}
+/* stylelint-disable-line no-empty-source */

package/styles/combo-box/tailwind.css CHANGED Viewed

@@ -91,4 +91,6 @@
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
-}
+}
+/* stylelint-disable-line no-empty-source */

package/styles/drop-down-base/_all.scss CHANGED Viewed

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

package/styles/drop-down-base/_bootstrap-dark-definition.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-//default
+//default
 $ddl-last-child-bottom-border: 0 !default;
 $ddl-default-font-family: inherit !default;
 $ddl-list-border-size: 1px !default;
@@ -9,13 +9,19 @@ $ddl-list-bottom-border: $ddl-list-border-size !default;
 $ddl-list-border-color: $grey-44 !default;
 $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: $grey-white !default;
+$mention-gradient-color: $brand-primary-font !default;
+$mention-list-box-shadow-color: 0 6px 12px rgba($base-font, .5) !default;
+$mention-chip-bg-color: $gray-dark !default;
+$mention-chip-border-radius: 2px !default;
+$mention-chip-border: none !default;
 $ddl-list-bg-color: $grey-dark !default;
 $ddl-list-header-bg-color: $grey-white !default;
-$ddl-list-tap-color: transparent  !default;
+$ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $grey-base !default;
 $ddl-list-default-font-color: $grey-dark-font !default;
 $ddl-list-active-border-color: $grey-white !default;
 $ddl-list-active-font-color: $brand-primary-font !default;
+$mention-active-font-color: $brand-primary !default;
 $ddl-list-active-bg-color: $brand-primary !default;
 $ddl-list-hover-bg-color: $grey-44 !default;
 $ddl-list-hover-border-color: $grey-white !default;

package/styles/drop-down-base/_bootstrap-definition.scss CHANGED Viewed

@@ -8,6 +8,11 @@ $ddl-list-border-color: rgba($grey-light, .25) !default;
 $ddl-line-height: 48px !default;
 $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: $grey-white !default;
+$mention-gradient-color: $brand-primary-font !default;
+$mention-list-box-shadow-color: 0 6px 12px rgba(0, 0, 0, .175) !default;
+$mention-chip-bg-color: $grey-lighter !default;
+$mention-chip-border-radius: 2px !default;
+$mention-chip-border: none !default;
 $ddl-list-bg-color: $grey-white !default;
 $ddl-list-header-bg-color: $grey-white !default;
 $ddl-list-tap-color: transparent !default;
@@ -15,6 +20,7 @@ $ddl-list-header-border-color: 1px $grey-base !default;
 $ddl-list-default-font-color: $grey-light-font !default;
 $ddl-list-active-border-color: $grey-white !default;
 $ddl-list-active-font-color: $brand-primary-font !default;
+$mention-active-font-color: $brand-primary !default;
 $ddl-list-active-bg-color: $brand-primary !default;
 $ddl-list-hover-bg-color: $grey-f5 !default;
 $ddl-list-hover-border-color: $grey-white !default;
@@ -74,4 +80,3 @@ $ddl-group-list-item-text-intent: 0 !default;
     padding: 0 8px 0 0;
   }
 }

package/styles/drop-down-base/_bootstrap4-definition.scss CHANGED Viewed

@@ -6,12 +6,18 @@ $ddl-list-border-color: rgba($black, .15) !default;
 $ddl-line-height: 48px !default;
 $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: $white !default;
+$mention-gradient-color: $white !default;
+$mention-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
+$mention-chip-bg-color: $gray-200 !default;
+$mention-chip-border-radius: 2px !default;
+$mention-chip-border: none !default;
 $ddl-list-bg-color: $white !default;
 $ddl-list-header-bg-color: $white !default;
 $ddl-list-tap-color: transparent !default;
 $ddl-list-default-font-color: $gray-900 !default;
 $ddl-list-active-border-color: $white !default;
 $ddl-list-active-font-color: $primary-font !default;
+$mention-active-font-color: $primary !default;
 $ddl-list-active-bg-color: $primary !default;
 $ddl-list-hover-bg-color: darken($gray-100, 2%) !default;
 $ddl-list-hover-border-color: $white !default;
@@ -89,4 +95,3 @@ $ddl-group-list-item-text-intent: 0 !default;
     stroke-width: 1px;
   }
 }

package/styles/drop-down-base/_bootstrap5-definition.scss CHANGED Viewed

@@ -42,10 +42,13 @@ $ddl-bigger-text-indent: 16px !default;
 $ddl-bigger-small-list-header-font-size: $text-xs !default;
 $ddl-group-list-item-text-intent: 0 !default;
-//
 $ddl-list-border-color: $border-light !default;
 $ddl-list-gradient-color: $border-light !default;
+$mention-gradient-color: $white !default;
+$mention-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
+$mention-chip-bg-color: $content-bg-color-alt2 !default;
+$mention-chip-border-radius: 2px !default;
+$mention-chip-border: none !default;
 $ddl-list-bg-color: $flyout-bg-color !default;
 $ddl-list-header-bg-color: $transparent !default;
 $ddl-list-tap-color: transparent !default;
@@ -54,6 +57,7 @@ $ddl-nodata-font-color: $content-text-color !default;
 $ddl-list-default-font-color: $content-text-color !default;
 $ddl-list-active-border-color: $content-bg-color !default;
 $ddl-list-active-font-color: $content-text-color-selected !default;
+$mention-active-font-color: $primary !default;
 $ddl-list-active-bg-color: $content-bg-color-selected !default;
 $ddl-list-hover-border-color: $content-bg-color !default;
 $ddl-list-hover-bg-color: $flyout-bg-color-hover !default;
@@ -62,12 +66,13 @@ $ddl-list-header-font-color: $content-text-color-alt3 !default;
 $ddl-default-header-font-color: $content-text-color-alt3 !default;
 $ddl-list-focus-color: $flyout-text-color-hover !default;
 $ddl-multi-column-border-color: $flyout-border !default;
 // Small Size color
 $ddl-small-list-font-color: $content-text-color !default;
 // Touch Small color
 $ddl-bigger-small-list-font-color: $content-text-color !default;
 @include export-module('dropdownbase-bootstrap5') {
   .e-dropdownbase .e-list-group-item,