@syncfusion/ej2-dropdowns 20.2.50 → 20.3.47

package/src/multi-select/checkbox-selection.js

@@ -277,11 +277,8 @@ var CheckBoxSelection = /** @class */ (function () {
             prepend([this.parent.filterParent], args.popupElement);
             attributes(this.filterInput, {
                 'aria-disabled': 'false',
-                'aria-owns': this.parent.element.id + '_options',
-                'role': 'listbox',
-                'aria-activedescendant': null,
+                'role': 'combobox',
                 'autocomplete': 'off',
-                'autocorrect': 'off',
                 'autocapitalize': 'off',
                 'spellcheck': 'false'
             });

package/src/multi-select/multi-select.d.ts

@@ -47,6 +47,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private isSelectAll;
     private clearIconWidth;
     private previousFilterText;
+    private selectedElementID;
     /**
      * The `fields` property maps the columns of the data table and binds the data to the component.
      * * text - Maps the text column from data table for each list item.

package/src/multi-select/multi-select.js

@@ -251,7 +251,13 @@ var MultiSelect = /** @class */ (function (_super) {
                 _this.refreshPopup();
                 _this.renderReactTemplates();
                 _this.popupObj.show(eventArgs.animation, (_this.zIndex === 1000) ? _this.element : null);
-                attributes(_this.inputElement, { 'aria-expanded': 'true' });
+                attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.inputElement.id + '_options' });
+                if (_this.selectedElementID == null) {
+                    _this.inputElement.removeAttribute('aria-activedescendant');
+                }
+                else {
+                    attributes(_this.inputElement, { 'aria-activedescendant': _this.selectedElementID });
+                }
                 if (_this.isFirstClick) {
                     _this.loadTemplate();
                 }
@@ -321,11 +327,7 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.getAriaAttributes = function () {
         var ariaAttributes = {
             'aria-disabled': 'false',
-            'aria-owns': this.element.id + '_options',
-            'role': 'listbox',
-            'aria-multiselectable': 'true',
-            'aria-activedescendant': 'null',
-            'aria-haspopup': 'true',
+            'role': 'combobox',
             'aria-expanded': 'false'
         };
         return ariaAttributes;
@@ -335,7 +337,9 @@ var MultiSelect = /** @class */ (function (_super) {
             attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
         }
         var disableStatus = (this.inputElement.disabled) ? true : false;
-        attributes(this.inputElement, this.getAriaAttributes());
+        if (!this.isPopupOpen()) {
+            attributes(this.inputElement, this.getAriaAttributes());
+        }
         if (disableStatus) {
             attributes(this.inputElement, { 'aria-disabled': 'true' });
         }
@@ -2137,6 +2141,8 @@ var MultiSelect = /** @class */ (function (_super) {
                         this.removeValue(temp, e, null, true);
                     }
                 }
+                this.selectedElementID = null;
+                this.inputElement.removeAttribute('aria-activedescendant');
             }
             else {
                 this.clearAllCallback(e);
@@ -2627,7 +2633,7 @@ var MultiSelect = /** @class */ (function (_super) {
             if (this.chipCollectionWrapper) {
                 this.removeChipSelection();
             }
-            attributes(this.inputElement, { 'aria-activedescendant': element.id });
+            this.selectedElementID = element.id;
         }
     };
     MultiSelect.prototype.updateDelimeter = function (delimChar, e) {
@@ -3655,6 +3661,8 @@ var MultiSelect = /** @class */ (function (_super) {
                     _this.overAllWrapper.classList.remove(iconAnimation);
                     _this.popupObj.hide(new Animation(eventArgs.animation));
                     attributes(_this.inputElement, { 'aria-expanded': 'false' });
+                    _this.inputElement.removeAttribute('aria-owns');
+                    _this.inputElement.removeAttribute('aria-activedescendant');
                     if (_this.allowFiltering) {
                         _this.notify('inputFocus', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'clear' });
                     }
@@ -3843,7 +3851,7 @@ var MultiSelect = /** @class */ (function (_super) {
             this.element.setAttribute('data-val', 'false');
         }
         Input.createSpanElement(this.overAllWrapper, this.createElement);
-        Input.calculateWidth(this.inputElement, this.overAllWrapper);
+        Input.calculateWidth(this.inputElement.parentElement.parentElement, this.overAllWrapper);
         if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
             this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
         }
@@ -3983,7 +3991,7 @@ var MultiSelect = /** @class */ (function (_super) {
         this.ulElement = null;
         this.mainListCollection = null;
         _super.prototype.destroy.call(this);
-        var temp = ['readonly', 'aria-disabled', 'aria-placeholder', 'placeholder'];
+        var temp = ['readonly', 'aria-disabled', 'placeholder'];
         var length = temp.length;
         while (length > 0) {
             this.inputElement.removeAttribute(temp[length - 1]);

package/styles/auto-complete/_all.scss

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

package/styles/auto-complete/_bootstrap-dark-definition.scss

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

package/styles/auto-complete/_bootstrap-definition.scss

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

package/styles/auto-complete/_bootstrap4-definition.scss

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

package/styles/auto-complete/_bootstrap5-definition.scss

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

package/styles/auto-complete/_fabric-dark-definition.scss

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

package/styles/auto-complete/_fabric-definition.scss

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

package/styles/auto-complete/_fluent-definition.scss

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

package/styles/auto-complete/_fusionnew-definition.scss

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

package/styles/auto-complete/_highcontrast-definition.scss

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

package/styles/auto-complete/_highcontrast-light-definition.scss

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

package/styles/auto-complete/_material-dark-definition.scss

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

package/styles/auto-complete/_material-definition.scss

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

package/styles/auto-complete/_material3-definition.scss

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

package/styles/auto-complete/_tailwind-definition.scss

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

package/styles/auto-complete/bootstrap-dark.css

@@ -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/auto-complete/bootstrap.css

@@ -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/auto-complete/bootstrap4.css

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

package/styles/auto-complete/bootstrap5-dark.css

@@ -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/auto-complete/bootstrap5.css

@@ -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/auto-complete/fabric-dark.css

@@ -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/auto-complete/fabric.css

@@ -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/auto-complete/fluent-dark.css

@@ -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/auto-complete/fluent.css

@@ -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/auto-complete/highcontrast-light.css

@@ -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/auto-complete/highcontrast.css

@@ -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/auto-complete/material-dark.css

@@ -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/auto-complete/material.css

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

package/styles/auto-complete/tailwind-dark.css

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

package/styles/auto-complete/tailwind.css

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

package/styles/bootstrap-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: #a4a4a4;
   cursor: default;
   font-family: inherit;
@@ -86,6 +87,45 @@
   text-align: center;
 }
 
+.e-mention.e-popup {
+  background: #6e6e6e;
+  border: 0;
+  box-shadow: 0 2px 3px 1px 0 6px 12px rgba(0, 0, 0, 0.5);
+  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: #2a2a2a;
+  border-radius: 2px;
+  border: none;
+  color: #0070f0;
+  cursor: default;
+}
+
+.e-mention .e-mention-chip::selection {
+  color: #fff;
+  background: #0070f0;
+}
+
+.e-mention.e-editable-element {
+  border: 2px solid #414141;
+  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: 30px;
 }
@@ -148,6 +188,7 @@
   border-color: #414141;
 }
 .e-dropdownbase .e-list-item {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   background-color: #2a2a2a;
   border-bottom: 1px;
@@ -334,6 +375,8 @@
   color: #f0f0f0;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
   0% {
     transform: rotate(0);
@@ -517,6 +560,7 @@
   background-color: #6e6e6e;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 .e-ddl input.e-input::-webkit-contacts-auto-fill-button {
   display: none;
   pointer-events: none;
@@ -525,6 +569,7 @@
   visibility: hidden;
 }
 
+/* stylelint-enable property-no-vendor-prefix */
 .e-filter-parent {
   border: #414141;
   border-top-width: 0;
@@ -568,6 +613,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;
@@ -710,6 +756,8 @@ ejs-dropdownlist {
   color: #fff;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
   0% {
     transform: rotate(0);
@@ -726,6 +774,8 @@ ejs-dropdownlist {
     transform: rotate(360deg);
   }
 }
+/* stylelint-disable */
+/* stylelint-disable */
 .e-ddt .e-ddt-icon::before {
   content: "\e969";
 }
@@ -1117,6 +1167,9 @@ ejs-dropdownlist {
   color: #f0f0f0;
 }
 
+/* stylelint-disable-line no-empty-source */ /* stylelint-disable-line no-empty-source */
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
   0% {
     transform: rotate(0);
@@ -1465,7 +1518,7 @@ ejs-dropdownlist {
   border: 0;
   font-family: inherit;
   font-size: 15px;
-  font-weight: 400;
+  font-weight: normal;
   height: 32px;
   min-height: 32px;
   outline: none;
@@ -1479,7 +1532,7 @@ ejs-dropdownlist {
   color: inherit;
   font-family: inherit;
   font-size: 14px;
-  font-weight: 400;
+  font-weight: normal;
   height: 32px;
   min-height: 32px;
   outline: none;
@@ -1502,6 +1555,7 @@ ejs-dropdownlist {
   min-height: 38px;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 .e-multi-select-wrapper input[type=text]::-ms-clear {
   display: none;
 }
@@ -2142,6 +2196,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: #f0f0f0;
   color: #f0f0f0;
@@ -2270,19 +2325,19 @@ ejs-multiselect {
   border: 1px 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: #767676;
 }
 
-.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: #767676;
 }
 
-.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: #767676;
 }
 
-.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: #767676;
 }
 
@@ -2360,6 +2415,7 @@ ejs-multiselect {
   content: "\e656";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 .e-listbox-wrapper,
 .e-listbox-container {
   -webkit-overflow-scrolling: touch;
@@ -2378,7 +2434,7 @@ ejs-multiselect {
 }
 .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
 .e-listbox-container.e-listboxtool-container .e-list-wrap {
-  width: 86% !important;
+  width: 86% !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-listbox-wrapper:focus,
 .e-listbox-container:focus {
@@ -2737,16 +2793,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;
@@ -2760,7 +2806,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: 85% !important;
+  width: 85% !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-bigger .e-listbox-wrapper .e-list-item,
 .e-listbox-wrapper.e-bigger .e-list-item,
@@ -2849,30 +2895,16 @@ ejs-listbox {
 .e-listbox-container.e-bigger .e-list-header .e-text {
   font-size: 15px;
 }
-.e-listbox-wrapper.e-filter-list .e-list-parent {
-  height: calc(100% - 52px);
-}
-
-.e-listbox-container.e-filter-list .e-list-wrap {
-  height: calc(100% - 52px) !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% - 46px);
 }
 
-.e-small .e-listbox-container.e-filter-list .e-list-wrap {
-  height: calc(100% - 46px) !important;
-}
-
-.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
+.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% - 58px);
 }
 
-.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
-  height: calc(100% - 58px) !important;
-}
-
 .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
 .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
   height: calc(100% - 106px);
@@ -2883,14 +2915,11 @@ ejs-listbox {
   height: calc(100% - 48px);
 }
 
-.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% - 54px);
 }
 
-.e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
-  height: calc(100% - 54px) !important;
-}
-
 .e-listbox-wrapper,
 .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
 .e-listboxtool-container.e-listbox-container .e-ul {
@@ -2910,6 +2939,11 @@ ejs-listbox {
   font-size: 14px;
 }
 
+.e-listbox-wrapper.e-filter-list .e-list-parent,
+.e-listbox-container.e-filter-list .e-list-parent {
+  height: calc(100% - 52px);
+}
+
 .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% - 92px);
@@ -3145,4 +3179,22 @@ ejs-listbox {
 .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
   padding-left: 3.9285em;
   padding-right: 1.0714em;
+}
+
+/* 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);
+  }
 }

package/styles/bootstrap-dark.scss

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