@syncfusion/ej2-dropdowns 20.2.48 → 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-model.d.ts

@@ -1,4 +1,4 @@
-import { DropDownBase, SelectEventArgs, dropDownBaseClasses, PopupEventArgs, FilteringEventArgs } from '../drop-down-base/drop-down-base';import { FocusEventArgs, BeforeOpenEventArgs, FilterType, FieldSettings, ResultData } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, FloatLabelType } from '@syncfusion/ej2-inputs';import { attributes, setValue, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';import { EventHandler, Property, Event, compile, L10n, EmitType, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, prepend, Complex } from '@syncfusion/ej2-base';import { Search } from '../common/incremental-search';import { append, addClass, removeClass, closest, detach, remove, select, selectAll } from '@syncfusion/ej2-base';import { getUniqueID, formatUnit, isNullOrUndefined, isUndefined, ModuleDeclaration } from '@syncfusion/ej2-base';import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';import { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur, encodePlaceholder } from './float-label';
+import { DropDownBase, SelectEventArgs, dropDownBaseClasses, PopupEventArgs, FilteringEventArgs } from '../drop-down-base/drop-down-base';import { FocusEventArgs, BeforeOpenEventArgs, FilterType, FieldSettings, ResultData } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, FloatLabelType, Input } from '@syncfusion/ej2-inputs';import { attributes, setValue, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';import { EventHandler, Property, Event, compile, L10n, EmitType, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, prepend, Complex } from '@syncfusion/ej2-base';import { Search } from '../common/incremental-search';import { append, addClass, removeClass, closest, detach, remove, select, selectAll } from '@syncfusion/ej2-base';import { getUniqueID, formatUnit, isNullOrUndefined, isUndefined, ModuleDeclaration } from '@syncfusion/ej2-base';import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';import { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur, encodePlaceholder } from './float-label';
 import {visualMode,MultiSelectChangeEventArgs,RemoveEventArgs,ISelectAllEventArgs,TaggingEventArgs,CustomValueEventArgs} from "./multi-select";
 import {DropDownBaseModel} from "../drop-down-base/drop-down-base-model";
 

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

@@ -22,6 +22,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';
 import { FieldSettings } from '../drop-down-base/drop-down-base';
 import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+import { Input } from '@syncfusion/ej2-inputs';
 import { attributes, setValue, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';
 import { EventHandler, Property, Event, compile, L10n } from '@syncfusion/ej2-base';
@@ -250,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();
                 }
@@ -320,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;
@@ -334,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' });
         }
@@ -861,6 +866,11 @@ var MultiSelect = /** @class */ (function (_super) {
             this.ulElement = this.mainList;
         }
         this.checkPlaceholderSize();
+        Input.createSpanElement(this.overAllWrapper, this.createElement);
+        Input.calculateWidth(this.inputElement, 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');
+        }
     };
     MultiSelect.prototype.checkPlaceholderSize = function () {
         if (this.showDropDownIcon) {
@@ -991,6 +1001,7 @@ var MultiSelect = /** @class */ (function (_super) {
             if (this.isPopupOpen()) {
                 this.refreshPopup();
             }
+            Input.calculateWidth(this.inputElement, this.overAllWrapper);
             return true;
         }
         else {
@@ -2130,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);
@@ -2620,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) {
@@ -3466,6 +3479,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 case 'cssClass':
                     this.updateOldPropCssClass(oldProp.cssClass);
                     this.updateCssClass();
+                    Input.calculateWidth(this.inputElement.parentElement.parentElement, this.overAllWrapper);
                     break;
                 case 'enableRtl':
                     this.enableRTL(newProp.enableRtl);
@@ -3492,6 +3506,11 @@ var MultiSelect = /** @class */ (function (_super) {
                 case 'floatLabelType':
                     this.setFloatLabelType();
                     this.addValidInputClass();
+                    Input.createSpanElement(this.overAllWrapper, this.createElement);
+                    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');
+                    }
                     break;
                 case 'enableSelectionOrder':
                     break;
@@ -3642,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' });
                     }
@@ -3829,6 +3850,11 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.element.hasAttribute('data-val')) {
             this.element.setAttribute('data-val', 'false');
         }
+        Input.createSpanElement(this.overAllWrapper, this.createElement);
+        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');
+        }
         this.renderComplete();
     };
     MultiSelect.prototype.checkInitialValue = function () {
@@ -3965,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 */