@syncfusion/ej2-dropdowns 20.4.53 → 21.1.35

package/src/mention/mention.js

@@ -136,8 +136,11 @@ var Mention = /** @class */ (function (_super) {
      * @returns {void}
      */
     Mention.prototype.render = function () {
-        this.inputElement = !isNullOrUndefined(this.target) ? ((typeof this.target) === 'string') ?
-            document.querySelector(this.target) : this.target : this.element;
+        var isSelector = typeof this.target === 'string';
+        this.inputElement = !isNullOrUndefined(this.target) ?
+            this.checkAndUpdateInternalComponent(isSelector
+                ? document.querySelector(this.target)
+                : this.target) : this.element;
         if (this.isContentEditable(this.inputElement)) {
             this.inputElement.setAttribute('contenteditable', 'true');
             addClass([this.inputElement], ['e-mention']);
@@ -145,6 +148,7 @@ var Mention = /** @class */ (function (_super) {
                 addClass([this.inputElement], ['e-editable-element']);
             }
         }
+        this.inputElement.setAttribute('role', 'textbox');
         this.queryString = this.elementValue();
         this.wireEvent();
     };
@@ -180,6 +184,18 @@ var Mention = /** @class */ (function (_super) {
             detach(this.spinnerTemplateElement);
         }
     };
+    Mention.prototype.checkAndUpdateInternalComponent = function (targetElement) {
+        if (!this.isVue && targetElement.classList.contains('e-richtexteditor')) {
+            return targetElement.querySelector('.e-content');
+        }
+        if (this.isVue && targetElement.nodeName === 'TEXTAREA' && targetElement.classList.contains('e-rte-hidden')) {
+            var parentElement = targetElement.parentElement;
+            if (parentElement && parentElement.classList.contains('e-richtexteditor')) {
+                return parentElement.querySelector('.e-content');
+            }
+        }
+        return targetElement;
+    };
     /**
      * Shows the spinner loader.
      *
@@ -236,7 +252,7 @@ var Mention = /** @class */ (function (_super) {
                 if (this.isPopupOpen) {
                     e.preventDefault();
                     if (this.popupObj && this.popupObj.element.contains(this.selectedLI)) {
-                        this.setValue(e);
+                        this.updateSelectedItem(this.selectedLI, e, false, true);
                     }
                 }
                 break;
@@ -282,6 +298,10 @@ var Mention = /** @class */ (function (_super) {
     };
     Mention.prototype.onKeyUp = function (e) {
         var rangetextContent;
+        this.isTyped = e.code !== 'Enter' && e.code !== 'Space' && e.code !== 'ArrowDown' && e.code !== 'ArrowUp' ? true : false;
+        if (document.activeElement != this.inputElement) {
+            this.inputElement.focus();
+        }
         if (this.isContentEditable(this.inputElement)) {
             this.range = this.getCurrentRange();
             rangetextContent = this.range.startContainer.textContent.split('');
@@ -292,10 +312,6 @@ var Mention = /** @class */ (function (_super) {
         var Regex = new RegExp(this.mentionChar, 'g');
         var charRegex = new RegExp('[a-zA-Z]', 'g');
         if (e.key === 'Shift' || e.keyCode === 37 || e.keyCode === 39) {
-            if ((e.keyCode === 37 || e.keyCode === 39) && !isNullOrUndefined(currentRange) &&
-                currentRange.indexOf(this.mentionChar) === -1 && this.isPopupOpen) {
-                this.hidePopup();
-            }
             return;
         }
         if ((!currentRange || !lastWordRange) || e.code === 'Enter' || e.keyCode === 27 ||
@@ -310,7 +326,7 @@ var Mention = /** @class */ (function (_super) {
                 this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
                 this.searchLists(e);
             }
-            else if (this.isPopupOpen && (!this.allowSpaces || !lastWordRange)) {
+            else if (this.isPopupOpen && (!this.allowSpaces || !lastWordRange) && (e.code !== 'ArrowDown' && e.code !== 'ArrowUp')) {
                 this.hidePopup();
                 this.lineBreak = true;
             }
@@ -340,6 +356,7 @@ var Mention = /** @class */ (function (_super) {
                 this.initValue();
             }
             if (!this.isPopupOpen && e.keyCode !== 38 && e.keyCode !== 40) {
+                this.didPopupOpenByTypingInitialChar = true;
                 this.showPopup();
                 if (this.initRemoteRender && this.list.querySelectorAll('li').length === 0) {
                     this.showWaitingSpinner();
@@ -566,6 +583,17 @@ var Mention = /** @class */ (function (_super) {
      */
     Mention.prototype.showPopup = function () {
         this.beforePopupOpen = true;
+        if (document.activeElement != this.inputElement) {
+            this.inputElement.focus();
+        }
+        this.queryString = this.didPopupOpenByTypingInitialChar ? this.queryString : '';
+        this.didPopupOpenByTypingInitialChar = false;
+        if (this.isContentEditable(this.inputElement)) {
+            this.range = this.getCurrentRange();
+        }
+        if (!this.isTyped) {
+            this.resetList(this.dataSource, this.fields);
+        }
         if (isNullOrUndefined(this.list)) {
             this.initValue();
         }
@@ -700,7 +728,7 @@ var Mention = /** @class */ (function (_super) {
         });
     };
     Mention.prototype.setHeight = function (popupEle) {
-        if (this.popupHeight !== 'auto') {
+        if (this.popupHeight !== 'auto' && this.list) {
             this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
             popupEle.style.maxHeight = formatUnit(this.popupHeight);
         }
@@ -729,7 +757,7 @@ var Mention = /** @class */ (function (_super) {
                 mostRecentTriggerCharPos = idx;
             }
         }
-        return mostRecentTriggerCharPos;
+        return mostRecentTriggerCharPos ? mostRecentTriggerCharPos : 0;
     };
     Mention.prototype.initializePopup = function (element, offsetValue, left) {
         var _this = this;
@@ -807,14 +835,37 @@ var Mention = /** @class */ (function (_super) {
             var selectedNodePosition = this.getTriggerCharPosition();
             globalRange = this.range;
             range = document.createRange();
-            range.setStart(globalRange.startContainer, selectedNodePosition);
-            range.setEnd(globalRange.startContainer, selectedNodePosition);
+            if (this.getTextRange() && this.getTextRange().lastIndexOf(this.mentionChar) !== -1 && this.isTyped) {
+                range.setStart(globalRange.startContainer, selectedNodePosition);
+                range.setEnd(globalRange.startContainer, selectedNodePosition);
+            }
+            else {
+                range.setStart(globalRange.startContainer, globalRange.startOffset);
+                range.setEnd(globalRange.startContainer, globalRange.endOffset);
+            }
+            this.isTyped = false;
             range.collapse(false);
-            rect = range.getBoundingClientRect();
+            rect = range.getBoundingClientRect().top === 0 ? range.startContainer.getClientRects()[0] : range.getBoundingClientRect();
         }
         var doc = document.documentElement;
         var windowLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
         var windowTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+        var width = 0;
+        if (!isNullOrUndefined(range) && range.getBoundingClientRect().top === 0) {
+            for (var i = 0; i < this.range.startContainer.childNodes.length; i++) {
+                if (this.range.startContainer.childNodes[i].nodeType !== Node.TEXT_NODE && this.range.startContainer.childNodes[i].textContent.trim() !== '') {
+                    width += this.range.startContainer.childNodes[i].getClientRects()[0].width;
+                }
+                else if (this.range.startContainer.childNodes[i].textContent !== '') {
+                    var span_1 = document.createElement("span");
+                    span_1.innerHTML = this.range.startContainer.childNodes[i].nodeValue;
+                    document.body.appendChild(span_1);
+                    var textNodeWidth = span_1.offsetWidth;
+                    document.body.removeChild(span_1);
+                    width += textNodeWidth;
+                }
+            }
+        }
         if (!this.isContentEditable(this.inputElement)) {
             coordinates = {
                 top: rect.top + windowTop + span.offsetTop + parseInt(computed.borderTopWidth, 10) +
@@ -826,7 +877,7 @@ var Mention = /** @class */ (function (_super) {
         else {
             coordinates = {
                 top: rect.top + windowTop + parseInt(getComputedStyle(this.inputElement).fontSize, 10) - (this.isCollided ? 10 : 0),
-                left: rect.left + windowLeft
+                left: rect.left + windowLeft + width
             };
         }
         return coordinates;
@@ -877,6 +928,7 @@ var Mention = /** @class */ (function (_super) {
         if (!this.isValidLI(li)) {
             return;
         }
+        this.isSelected = true;
         this.setSelection(li, e);
         var delay = 100;
         this.closePopup(delay, e);
@@ -889,7 +941,7 @@ var Mention = /** @class */ (function (_super) {
         this.removeHover();
         var value = this.getFormattedValue(li.getAttribute('data-value'));
         var selectedData = this.getDataByValue(value);
-        if (!preventSelect && !isNullOrUndefined(e)) {
+        if (!preventSelect && !isNullOrUndefined(e) && !(e.action === "down" || e.action === "up")) {
             var items = this.detachChanges(selectedData);
             this.isSelected = true;
             var eventArgs = {
@@ -902,6 +954,8 @@ var Mention = /** @class */ (function (_super) {
             this.trigger('select', eventArgs, function (eventArgs) {
                 if (eventArgs.cancel) {
                     li.classList.remove(dropDownBaseClasses.selected);
+                    _this.isSelected = false;
+                    _this.isSelectCancel = true;
                 }
                 else {
                     _this.selectEventCallback(li, selectedData, value);
@@ -1055,6 +1109,10 @@ var Mention = /** @class */ (function (_super) {
         var selection = this.inputElement.ownerDocument.getSelection();
         var startPos = this.getTriggerCharPosition();
         textSuffix = typeof this.suffixText === 'string' ? this.suffixText : '';
+        if (this.isSelectCancel) {
+            this.isSelectCancel = false;
+            return;
+        }
         if (dataItem.text !== null) {
             value = this.mentionVal(dataItem.text);
         }
@@ -1079,8 +1137,21 @@ var Mention = /** @class */ (function (_super) {
             }
             globalRange = this.range;
             range = document.createRange();
-            range.setStart(globalRange.startContainer, startPos);
-            range.setEnd(globalRange.startContainer, endPos);
+            if (((this.getTextRange() && this.getTextRange().lastIndexOf(this.mentionChar) !== -1 && this.isTyped) || this.getTextRange() && this.getTextRange().trim() === '@')) {
+                range.setStart(globalRange.startContainer, startPos);
+                range.setEnd(globalRange.startContainer, endPos);
+            }
+            else {
+                if (globalRange.commonAncestorContainer.textContent.trim() !== '' && !isNullOrUndefined(globalRange.commonAncestorContainer.textContent.trim()) && this.getTextRange() && this.getTextRange().lastIndexOf(this.mentionChar) !== -1) {
+                    range.setStart(globalRange.startContainer, globalRange.startOffset - 1);
+                    range.setEnd(globalRange.startContainer, globalRange.endOffset - 1);
+                }
+                else {
+                    range.setStart(globalRange.startContainer, globalRange.startOffset);
+                    range.setEnd(globalRange.startContainer, globalRange.endOffset);
+                }
+            }
+            this.isTyped = false;
             range.deleteContents();
             var element = this.createElement('div');
             element.innerHTML = value;

package/styles/bootstrap-dark.css

@@ -190,7 +190,6 @@
 .e-dropdownbase .e-list-item {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
-  background-color: #2a2a2a;
   border-bottom: 1px;
   border-color: #6e6e6e;
   color: #f0f0f0;
@@ -200,11 +199,11 @@
   min-height: 26px;
   padding-right: 20px;
   text-indent: 20px;
+  background-color: #2a2a2a;
 }
 
 .e-dropdownbase .e-list-group-item,
 .e-fixed-head {
-  background-color: #2a2a2a;
   border-color: #6e6e6e;
   color: #3e98ff;
   font-family: inherit;
@@ -214,6 +213,7 @@
   min-height: 26px;
   padding-left: 20px;
   padding-right: 20px;
+  background-color: #2a2a2a;
 }
 
 .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -547,9 +547,6 @@
 .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
   margin: 0;
 }
-.e-popup-full-page .e-popup-full-page.e-ios {
-  position: fixed;
-}
 
 .e-ddl.e-control-wrapper .e-ddl-disable-icon {
   position: relative;
@@ -2457,10 +2454,6 @@ ejs-multiselect {
 .e-listbox-container * {
   box-sizing: border-box;
 }
-.e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
-.e-listbox-container.e-listboxtool-container .e-list-wrap {
-  width: 86% !important; /* stylelint-disable-line declaration-no-important */
-}
 .e-listbox-wrapper:focus,
 .e-listbox-container:focus {
   outline: none;
@@ -2827,12 +2820,6 @@ ejs-listbox {
   margin-left: 15px;
 }
 
-.e-bigger .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
-.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; /* stylelint-disable-line declaration-no-important */
-}
 .e-bigger .e-listbox-wrapper .e-list-item,
 .e-listbox-wrapper.e-bigger .e-list-item,
 .e-bigger .e-listbox-container .e-list-item,

package/styles/bootstrap.css

@@ -190,7 +190,6 @@
 .e-dropdownbase .e-list-item {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
-  background-color: #fff;
   border-bottom: 1px;
   border-color: #fff;
   color: #333;
@@ -200,11 +199,11 @@
   min-height: 26px;
   padding-right: 20px;
   text-indent: 20px;
+  background-color: #fff;
 }
 
 .e-dropdownbase .e-list-group-item,
 .e-fixed-head {
-  background-color: #fff;
   border-color: #fff;
   color: #777;
   font-family: inherit;
@@ -214,6 +213,7 @@
   min-height: 26px;
   padding-left: 20px;
   padding-right: 20px;
+  background-color: #fff;
 }
 
 .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -547,9 +547,6 @@
 .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
   margin: 0;
 }
-.e-popup-full-page .e-popup-full-page.e-ios {
-  position: fixed;
-}
 
 .e-ddl.e-control-wrapper .e-ddl-disable-icon {
   position: relative;

package/styles/bootstrap4.css

@@ -2,14 +2,6 @@
   padding: 0 8px 0 0;
 }
 
-.e-bigger .e-content.e-dropdownbase {
-  padding: 8px 0;
-}
-
-.e-content.e-dropdownbase {
-  padding: 6px 0;
-}
-
 .e-bigger .e-dropdownbase .e-list-item .e-list-icon {
   font-size: 16px;
 }
@@ -208,7 +200,6 @@
 .e-dropdownbase .e-list-item {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
-  background-color: #fff;
   border-bottom: 1px;
   border-color: #fff;
   color: #212529;
@@ -218,11 +209,11 @@
   min-height: 26px;
   padding-right: 24px;
   text-indent: 20px;
+  background-color: #fff;
 }
 
 .e-dropdownbase .e-list-group-item,
 .e-fixed-head {
-  background-color: #fff;
   border-color: #fff;
   color: #6c757d;
   font-family: inherit;
@@ -232,6 +223,7 @@
   min-height: 26px;
   padding-left: 20px;
   padding-right: 24px;
+  background-color: #fff;
 }
 
 .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -591,9 +583,6 @@
 .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
   margin: 0;
 }
-.e-popup-full-page .e-popup-full-page.e-ios {
-  position: fixed;
-}
 
 .e-ddl.e-control-wrapper .e-ddl-disable-icon {
   position: relative;
@@ -622,7 +611,7 @@
   border-top-width: 0;
   box-shadow: none;
   display: block;
-  padding: 0;
+  padding: 6px;
 }
 
 .e-ddl.e-input-group:not(.e-disabled) {

package/styles/bootstrap5-dark.css

@@ -217,7 +217,6 @@
 .e-dropdownbase .e-list-item {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
-  background-color: #343a40;
   border-bottom: 0;
   border-color: #444c54;
   color: #fff;
@@ -227,11 +226,11 @@
   min-height: 30px;
   padding-right: 16px;
   text-indent: 12px;
+  background-color: #343a40;
 }
 
 .e-dropdownbase .e-list-group-item,
 .e-fixed-head {
-  background-color: #343a40;
   border-color: #444c54;
   color: #7b848d;
   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";
@@ -241,6 +240,7 @@
   min-height: 30px;
   padding-left: 12px;
   padding-right: 16px;
+  background-color: #343a40;
 }
 
 .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -613,9 +613,6 @@
 .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
   margin: 0;
 }
-.e-popup-full-page .e-popup-full-page.e-ios {
-  position: fixed;
-}
 
 .e-ddl.e-control-wrapper .e-ddl-disable-icon {
   position: relative;
@@ -1573,7 +1570,7 @@ ejs-dropdownlist {
 .e-multi-select-wrapper .e-chips > .e-chipcontent {
   max-width: 100%;
   overflow: hidden;
-  padding: 0 6px 0 0;
+  padding: 0 6px 1px 0;
   text-indent: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2114,7 +2111,7 @@ ejs-multiselect {
 }
 
 .e-small.e-bigger .e-multi-select-wrapper .e-delim-values {
-  font-size: 13px;
+  font-size: 12px;
   line-height: 28px;
 }
 
@@ -2572,7 +2569,7 @@ ejs-multiselect {
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {
-  font-size: 13px;
+  font-size: 12px;
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips .e-chips-close::before {

package/styles/bootstrap5.css

@@ -217,7 +217,6 @@
 .e-dropdownbase .e-list-item {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
-  background-color: #fff;
   border-bottom: 0;
   border-color: #dee2e6;
   color: #212529;
@@ -227,11 +226,11 @@
   min-height: 30px;
   padding-right: 16px;
   text-indent: 12px;
+  background-color: #fff;
 }
 
 .e-dropdownbase .e-list-group-item,
 .e-fixed-head {
-  background-color: #fff;
   border-color: #dee2e6;
   color: #6c757d;
   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";
@@ -241,6 +240,7 @@
   min-height: 30px;
   padding-left: 12px;
   padding-right: 16px;
+  background-color: #fff;
 }
 
 .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -613,9 +613,6 @@
 .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
   margin: 0;
 }
-.e-popup-full-page .e-popup-full-page.e-ios {
-  position: fixed;
-}
 
 .e-ddl.e-control-wrapper .e-ddl-disable-icon {
   position: relative;
@@ -1573,7 +1570,7 @@ ejs-dropdownlist {
 .e-multi-select-wrapper .e-chips > .e-chipcontent {
   max-width: 100%;
   overflow: hidden;
-  padding: 0 6px 0 0;
+  padding: 0 6px 1px 0;
   text-indent: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2114,7 +2111,7 @@ ejs-multiselect {
 }
 
 .e-small.e-bigger .e-multi-select-wrapper .e-delim-values {
-  font-size: 13px;
+  font-size: 12px;
   line-height: 28px;
 }
 
@@ -2572,7 +2569,7 @@ ejs-multiselect {
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {
-  font-size: 13px;
+  font-size: 12px;
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips .e-chips-close::before {

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

@@ -69,14 +69,6 @@ $ddl-group-list-item-text-intent: 0 !default;
     padding: 0 8px 0 0;
   }
 
-  .e-bigger .e-content.e-dropdownbase {
-    padding: 8px 0;
-  }
-
-  .e-content.e-dropdownbase {
-    padding: 6px 0;
-  }
-
   .e-bigger .e-dropdownbase .e-list-item .e-list-icon {
     font-size: 16px;
   }

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

@@ -28,14 +28,14 @@ $ddl-list-header-font-size: $text-sm !default;
 
 // Small Size
 
-$ddl-small-icon-font-size: 14px !default;
+$ddl-small-icon-font-size: $font-icon-14 !default;
 $ddl-small-line-height: 26px !default;
 $ddl-small-list-text-indent: 8px !default;
 $ddl-small-list-header-font-size: $text-xxs !default;
 
 // Touch Small
 
-$ddl-bigger-small-icon-font-size: 18px !default;
+$ddl-bigger-small-icon-font-size: $font-icon-18 !default;
 $ddl-bigger-small-line-height: 30px !default;
 $ddl-bigger-small-list-text-indent: 16px !default;
 $ddl-bigger-text-indent: 16px !default;

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

@@ -31,14 +31,14 @@ $ddl-bigger-small-list-nodata-font-size: $text-sm;
 
 // Small Size
 
-$ddl-small-icon-font-size: 14px !default;
+$ddl-small-icon-font-size: $font-icon-14 !default;
 $ddl-small-line-height: 26px !default;
 $ddl-small-list-text-indent: 8px !default;
 $ddl-small-list-header-font-size: $text-xxs !default;
 
 // Touch Small
 
-$ddl-bigger-small-icon-font-size: 18px !default;
+$ddl-bigger-small-icon-font-size: $font-icon-18 !default;
 $ddl-bigger-small-line-height: 30px !default;
 $ddl-bigger-small-list-text-indent: 8px !default;
 $ddl-bigger-text-indent: 8px !default;

package/styles/drop-down-base/_tailwind-definition.scss

@@ -32,14 +32,14 @@ $ddl-bigger-small-list-nodata-font-size: $text-sm !default;
 
 // Small Size
 
-$ddl-small-icon-font-size: 14px !default;
+$ddl-small-icon-font-size: $font-icon-14 !default;
 $ddl-small-line-height: 24px !default;
 $ddl-small-list-text-indent: 8px !default;
 $ddl-small-list-header-font-size: $text-xxs !default;
 
 // Touch Small
 
-$ddl-bigger-small-icon-font-size: 18px !default;
+$ddl-bigger-small-icon-font-size: $font-icon-18 !default;
 $ddl-bigger-small-line-height: 32px !default;
 $ddl-bigger-small-list-text-indent: 14px !default;
 $ddl-bigger-small-list-header-font-size: $text-xs !default;