@syncfusion/ej2-dropdowns 29.1.40 → 29.2.4

package/src/mention/mention.js

@@ -38,7 +38,9 @@ var Mention = /** @class */ (function (_super) {
      * @private
      */
     function Mention(options, element) {
-        return _super.call(this, options, element) || this;
+        var _this = _super.call(this, options, element) || this;
+        _this.debounceTimer = null;
+        return _this;
     }
     /**
      * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.
@@ -473,22 +475,8 @@ var Mention = /** @class */ (function (_super) {
         this.range = this.inputElement.ownerDocument.getSelection().getRangeAt(0);
         return this.range;
     };
-    Mention.prototype.searchLists = function (e) {
+    Mention.prototype.performFiltering = function (e) {
         var _this = this;
-        this.isDataFetched = false;
-        if (isNullOrUndefined(this.list)) {
-            _super.prototype.render.call(this);
-            this.unWireListEvents();
-            this.wireListEvents();
-        }
-        if (e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38)) {
-            this.queryString = this.queryString === '' ? null : this.queryString;
-            this.beforePopupOpen = true;
-            this.resetList(this.dataSource, this.fields);
-            return;
-        }
-        this.isSelected = false;
-        this.activeIndex = null;
         var eventArgs = {
             preventDefaultAction: false,
             text: this.queryString,
@@ -507,6 +495,28 @@ var Mention = /** @class */ (function (_super) {
             }
         });
     };
+    Mention.prototype.searchLists = function (e) {
+        this.isDataFetched = false;
+        if (isNullOrUndefined(this.list)) {
+            _super.prototype.render.call(this);
+            this.unWireListEvents();
+            this.wireListEvents();
+        }
+        if (e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38)) {
+            this.queryString = this.queryString === '' ? null : this.queryString;
+            this.beforePopupOpen = true;
+            this.resetList(this.dataSource, this.fields);
+            return;
+        }
+        this.isSelected = false;
+        this.activeIndex = null;
+        if (this.queryString !== '' && this.debounceDelay > 0) {
+            this.debouncedFiltering(e, this.debounceDelay);
+        }
+        else {
+            this.performFiltering(e);
+        }
+    };
     Mention.prototype.filterAction = function (dataSource, query, fields) {
         this.beforePopupOpen = true;
         if (this.queryString.length >= this.minLength) {
@@ -1704,6 +1714,9 @@ var Mention = /** @class */ (function (_super) {
     __decorate([
         Property('300px')
     ], Mention.prototype, "popupHeight", void 0);
+    __decorate([
+        Property(300)
+    ], Mention.prototype, "debounceDelay", void 0);
     __decorate([
         Property(null)
     ], Mention.prototype, "displayTemplate", void 0);

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

@@ -298,6 +298,13 @@ export interface MultiSelectModel extends DropDownBaseModel{
      */
     allowFiltering?: boolean;
 
+    /**
+     * Specifies the delay time in milliseconds for filtering operations.
+     *
+     * @default 300
+     */
+    debounceDelay?: number;
+
     /**
      * Defines whether the popup opens in fullscreen mode on mobile devices when filtering is enabled. When set to false, the popup will display similarly on both mobile and desktop devices.
      *

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

@@ -74,6 +74,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private isBlurDispatching;
     private isFilterPrevented;
     private isFilteringAction;
+    private headerTemplateHeight;
     /**
      * 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.
@@ -341,6 +342,12 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      * @default null
      */
     allowFiltering: boolean;
+    /**
+     * Specifies the delay time in milliseconds for filtering operations.
+     *
+     * @default 300
+     */
+    debounceDelay: number;
     /**
      * Defines whether the popup opens in fullscreen mode on mobile devices when filtering is enabled. When set to false, the popup will display similarly on both mobile and desktop devices.
      *
@@ -663,6 +670,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private preventSetCurrentData;
     private virtualCustomData;
     private isSelectAllLoop;
+    private initialPopupHeight;
     private enableRTL;
     requiredModules(): ModuleDeclaration[];
     private updateHTMLAttribute;
@@ -807,6 +815,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     protected wireEvent(): void;
     private onInput;
     private pasteHandler;
+    protected performFiltering(e: KeyboardEventArgs | MouseEvent): void;
     protected search(e: KeyboardEventArgs): void;
     protected preRender(): void;
     protected getLocaleName(): string;

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

@@ -615,7 +615,7 @@ var MultiSelect = /** @class */ (function (_super) {
             valuecheck = this.presentItemValue(this.ulElement);
         }
         if (valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
-            && this.listData != null) {
+            && this.listData != null && !(valuecheck.length === 1 && valuecheck[0] == null)) {
             this.isaddNonPresentItems = true;
             this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
             this.isaddNonPresentItems = false;
@@ -1493,7 +1493,7 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.pageDownSelection = function (steps, isVirtualKeyAction) {
         var list = this.getItems();
         var collection = this.list.querySelectorAll('li.'
-            + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
+            + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)' + ':not(.e-virtual-list-end)');
         var previousItem = steps <= collection.length ? collection[steps - 1] : collection[collection.length - 1];
         if (this.fields.disabled && previousItem && !this.enableVirtualization) {
             while (previousItem && (previousItem.classList.contains('e-disabled') || previousItem.classList.contains(HIDE_LIST) ||
@@ -1510,6 +1510,9 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.enableVirtualization && isVirtualKeyAction) {
             previousItem = steps <= list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];
         }
+        if (this.enableVirtualization && previousItem && previousItem.classList.contains('e-virtual-list-end')) {
+            previousItem = collection[collection.length - 1];
+        }
         this.isKeyBoardAction = true;
         this.addListFocus(previousItem);
         this.previousFocusItem = previousItem;
@@ -1994,9 +1997,10 @@ var MultiSelect = /** @class */ (function (_super) {
         var selectedListMargin = selectedLI && !isNaN(parseInt(window.getComputedStyle(selectedLI).marginBottom, 10)) ?
             parseInt(window.getComputedStyle(selectedLI).marginBottom, 10) : 0;
         this.isUpwardScrolling = false;
-        var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
-        var lastElementValue = this.list.querySelector('li:last-of-type') ?
-            this.list.querySelector('li:last-of-type').getAttribute('data-value') : null;
+        var virtualListCount = this.list.querySelectorAll('.e-virtual-list:not(.e-virtual-list-end)').length;
+        var liItems = this.list.querySelectorAll('li:not(.e-virtual-list-end)');
+        var lastElementValue = liItems && liItems.length > 0 && liItems[liItems.length - 1] ?
+            liItems[liItems.length - 1].getAttribute('data-value') : null;
         var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ?
             selectedLI.offsetTop + (this.virtualListInfo.startIndex * (selectedLI.offsetHeight + selectedListMargin))
             : selectedLI.offsetTop;
@@ -2052,7 +2056,7 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.scrollTop = function (selectedLI, activeIndex, keyCode) {
         if (keyCode === void 0) { keyCode = null; }
-        var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
+        var virtualListCount = this.list.querySelectorAll('.e-virtual-list:not(.e-virtual-list-end)').length;
         var selectedListMargin = selectedLI && !isNaN(parseInt(window.getComputedStyle(selectedLI).marginBottom, 10)) ?
             parseInt(window.getComputedStyle(selectedLI).marginBottom, 10) : 0;
         var selectedLiOffsetTop = (this.virtualListInfo && this.virtualListInfo.startIndex) ?
@@ -2281,11 +2285,11 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.list) {
             var elements = this.list.querySelectorAll('li.'
                 + dropDownBaseClasses.li
-                + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
+                + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)' + ':not(.e-virtual-list-end)');
             if (this.mode === 'CheckBox' && this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {
                 elements = this.list.querySelectorAll('li.'
                     + dropDownBaseClasses.li + ',li.' + dropDownBaseClasses.group
-                    + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
+                    + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)' + ':not(.e-virtual-list-end)');
             }
             var selectedElem = this.list.querySelector('li.' + dropDownBaseClasses.focus);
             if (this.enableVirtualization && isVirtualKeyAction && !isNullOrUndefined(this.currentFocuedListElement)) {
@@ -2984,7 +2988,7 @@ var MultiSelect = /** @class */ (function (_super) {
             var inputWidth = (this.componentWrapper.offsetWidth) * parseFloat(width) / 100;
             width = inputWidth.toString() + 'px';
         }
-        return width;
+        return (this.allowResize && this.resizeWidth) ? this.resizeWidth + 'px' : width;
     };
     MultiSelect.prototype.mouseIn = function () {
         if (this.enabled && !this.readonly) {
@@ -3259,7 +3263,7 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.updateInitialData = function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var currentData = this.selectData;
-        var ulElement = this.renderItems(currentData, this.fields);
+        var ulElement = this.renderItems(currentData, this.fields, false, this.isClearAllAction);
         this.list.scrollTop = 0;
         this.virtualListInfo = {
             currentPageNumber: null,
@@ -3480,8 +3484,40 @@ var MultiSelect = /** @class */ (function (_super) {
             _this.search(event);
         });
     };
-    MultiSelect.prototype.search = function (e) {
+    MultiSelect.prototype.performFiltering = function (e) {
         var _this = this;
+        var eventArgs = {
+            preventDefaultAction: false,
+            text: this.targetElement(),
+            updateData: function (dataSource, query, fields) {
+                if (eventArgs.cancel) {
+                    return;
+                }
+                _this.isFiltered = true;
+                _this.customFilterQuery = query;
+                _this.remoteFilterAction = true;
+                _this.isCustomFiltering = true;
+                _this.dataUpdater(dataSource, query, fields);
+            },
+            event: e,
+            cancel: false
+        };
+        this.trigger('filtering', eventArgs, function (eventArgs) {
+            _this.isFilterPrevented = eventArgs.cancel;
+            if (!eventArgs.cancel) {
+                if (!_this.isFiltered && !eventArgs.preventDefaultAction) {
+                    _this.filterAction = true;
+                    _this.isFilteringAction = true;
+                    if (_this.dataSource instanceof DataManager && _this.allowCustomValue) {
+                        _this.isCustomRendered = false;
+                    }
+                    _this.dataUpdater(_this.dataSource, null, _this.fields);
+                    _this.isFilteringAction = false;
+                }
+            }
+        });
+    };
+    MultiSelect.prototype.search = function (e) {
         this.preventSetCurrentData = false;
         this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         if (!isNullOrUndefined(e)) {
@@ -3502,36 +3538,12 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
                 this.checkAndResetCache();
                 this.isRequesting = false;
-                var eventArgs_1 = {
-                    preventDefaultAction: false,
-                    text: this.targetElement(),
-                    updateData: function (dataSource, query, fields) {
-                        if (eventArgs_1.cancel) {
-                            return;
-                        }
-                        _this.isFiltered = true;
-                        _this.customFilterQuery = query;
-                        _this.remoteFilterAction = true;
-                        _this.isCustomFiltering = true;
-                        _this.dataUpdater(dataSource, query, fields);
-                    },
-                    event: e,
-                    cancel: false
-                };
-                this.trigger('filtering', eventArgs_1, function (eventArgs) {
-                    _this.isFilterPrevented = eventArgs.cancel;
-                    if (!eventArgs.cancel) {
-                        if (!_this.isFiltered && !eventArgs.preventDefaultAction) {
-                            _this.filterAction = true;
-                            _this.isFilteringAction = true;
-                            if (_this.dataSource instanceof DataManager && _this.allowCustomValue) {
-                                _this.isCustomRendered = false;
-                            }
-                            _this.dataUpdater(_this.dataSource, null, _this.fields);
-                            _this.isFilteringAction = false;
-                        }
-                    }
-                });
+                if (this.targetElement() !== '' && this.debounceDelay > 0) {
+                    this.debouncedFiltering(e, this.debounceDelay);
+                }
+                else {
+                    this.performFiltering(e);
+                }
             }
             else if (this.allowCustomValue) {
                 var query = new Query();
@@ -4645,7 +4657,7 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.checkClearIconWidth = function () {
         if (this.showClearButton) {
-            this.clearIconWidth = parseInt(window.getComputedStyle(this.overAllClear).width, 10);
+            this.clearIconWidth = parseInt(window.getComputedStyle(this.overAllClear).width, 10) || this.overAllClear.offsetWidth;
         }
     };
     MultiSelect.prototype.updateRemainWidth = function (viewWrapper, totalWidth) {
@@ -5564,7 +5576,9 @@ var MultiSelect = /** @class */ (function (_super) {
                         _this.list.parentElement.style.paddingBottom = '';
                         var overAllHeight = parseInt(_this.popupHeight, 10);
                         _this.list.style.maxHeight = formatUnit(overAllHeight);
-                        _this.list.parentElement.style.height = formatUnit(_this.popupHeight);
+                        if (_this.popupHeight.toString().toLowerCase() !== 'auto' && _this.initialPopupHeight >= (parseInt(_this.popupHeight.toString(), 10) - 2)) {
+                            _this.list.parentElement.style.height = formatUnit(_this.popupHeight);
+                        }
                         _this.list.parentElement.style.maxHeight = formatUnit(_this.popupHeight);
                     }
                     if (_this.resizer) {
@@ -5892,7 +5906,8 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         if (this.list && this.list.parentElement) {
             this.list.parentElement.classList.add('e-resize');
-            if (this.popupHeight.toString().toLowerCase() !== 'auto') {
+            this.initialPopupHeight = this.list.parentElement.clientHeight;
+            if (this.popupHeight.toString().toLowerCase() !== 'auto' && this.initialPopupHeight >= (parseInt(this.popupHeight.toString(), 10) - 2)) {
                 this.list.parentElement.style.height = '100%';
             }
             this.list.parentElement.style.boxSizing = 'border-box'; // Ensures padding doesn't affect element size
@@ -5903,6 +5918,18 @@ var MultiSelect = /** @class */ (function (_super) {
             this.list.parentElement.style.height = this.resizeHeight + 'px';
             this.list.parentElement.style.maxHeight = this.resizeHeight + 'px';
             this.list.style.maxHeight = this.resizeHeight + "px";
+            if (this.headerTemplate) {
+                var headerElem = this.list.parentElement.querySelector('.e-ddl-header');
+                if (headerElem && headerElem.offsetHeight) {
+                    this.headerTemplateHeight = headerElem.offsetHeight;
+                }
+                if (this.resizeHeight) {
+                    this.list.style.maxHeight = this.resizeHeight - this.headerTemplateHeight - 16 + "px";
+                }
+                else {
+                    this.list.style.maxHeight = parseInt(this.list.style.maxHeight, 10) - 16 + "px";
+                }
+            }
         }
         if (this.resizer) {
             EventHandler.add(this.resizer, 'mousedown', this.startResizing, this);
@@ -5957,6 +5984,9 @@ var MultiSelect = /** @class */ (function (_super) {
             this.list.parentElement.style.height = this.resizeHeight + "px";
             this.list.parentElement.style.maxHeight = this.resizeHeight + "px";
             this.list.style.maxHeight = this.resizeHeight + "px";
+            if (this.headerTemplate) {
+                this.list.style.maxHeight = this.resizeHeight - this.headerTemplateHeight - 16 + "px";
+            }
             if (this.fixedHeaderElement && this.ulElement) {
                 this.fixedHeaderElement.style.width = this.ulElement.offsetWidth + "px";
             }
@@ -6456,6 +6486,9 @@ var MultiSelect = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], MultiSelect.prototype, "allowFiltering", void 0);
+    __decorate([
+        Property(300)
+    ], MultiSelect.prototype, "debounceDelay", void 0);
     __decorate([
         Property(true)
     ], MultiSelect.prototype, "isDeviceFullScreen", void 0);

package/styles/bds-lite.css

@@ -1613,7 +1613,7 @@ ejs-dropdownlist {
 }
 
 .e-multi-select-wrapper .e-delim-values {
-  font-family: "Inter";
+  font-family: "Inter", 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;
   line-height: 28px;
   max-width: 100%;

package/styles/bds.css

@@ -1979,7 +1979,7 @@ ejs-dropdownlist {
 }
 
 .e-multi-select-wrapper .e-delim-values {
-  font-family: "Inter";
+  font-family: "Inter", 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;
   line-height: 28px;
   max-width: 100%;

package/styles/multi-select/_bds-definition.scss

@@ -199,6 +199,7 @@ $ddl-multi-list-hover-bg-color: $content-bg-color-hover !default;
 $ddl-delim-font-color: $content-text-color !default;
 $ddl-close-icon-color: $icon-color !default;
 $ddl-close-icon-hover-color: $icon-color-hover !default;
+$multi-select-delim-font-family: 'Inter', 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' !default;
 
 @include export-module('multiselect-bds') {
   .e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {

package/styles/multi-select/_layout.scss

@@ -411,7 +411,12 @@
 }
 
 .e-multi-select-wrapper .e-delim-values {
-  font-family: $ddl-chip-font-family;
+  @if $ddl-multiselect-skin-name == 'tailwind' {
+    font-family: $multi-select-delim-font-family;
+  }
+  @else {
+    font-family: $ddl-chip-font-family;
+  }
   font-size: $ddl-delim-font-size;
   line-height: $ddl-delimviewheight;
   max-width: 100%;

package/styles/multi-select/_tailwind-definition.scss

@@ -199,6 +199,7 @@ $ddl-multi-list-hover-bg-color: $content-bg-color-hover !default;
 $ddl-delim-font-color: $content-text-color !default;
 $ddl-close-icon-color: $icon-color !default;
 $ddl-close-icon-hover-color: $icon-color-hover !default;
+$multi-select-delim-font-family: 'Inter', 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' !default;
 
 @include export-module('multiselect-tailwind') {
   .e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {

package/styles/multi-select/bds.css

@@ -607,7 +607,7 @@
 }
 
 .e-multi-select-wrapper .e-delim-values {
-  font-family: "Inter";
+  font-family: "Inter", 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;
   line-height: 28px;
   max-width: 100%;

package/styles/multi-select/tailwind-dark.css

@@ -457,7 +457,7 @@
 }
 
 .e-multi-select-wrapper .e-delim-values {
-  font-family: "Inter";
+  font-family: "Inter", 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;
   line-height: 28px;
   max-width: 100%;

package/styles/multi-select/tailwind.css

@@ -457,7 +457,7 @@
 }
 
 .e-multi-select-wrapper .e-delim-values {
-  font-family: "Inter";
+  font-family: "Inter", 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;
   line-height: 28px;
   max-width: 100%;

package/styles/tailwind-dark-lite.css

@@ -1467,7 +1467,7 @@ ejs-dropdownlist {
 }
 
 .e-multi-select-wrapper .e-delim-values {
-  font-family: "Inter";
+  font-family: "Inter", 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;
   line-height: 28px;
   max-width: 100%;

package/styles/tailwind-dark.css

@@ -1833,7 +1833,7 @@ ejs-dropdownlist {
 }
 
 .e-multi-select-wrapper .e-delim-values {
-  font-family: "Inter";
+  font-family: "Inter", 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;
   line-height: 28px;
   max-width: 100%;

package/styles/tailwind-lite.css

@@ -1467,7 +1467,7 @@ ejs-dropdownlist {
 }
 
 .e-multi-select-wrapper .e-delim-values {
-  font-family: "Inter";
+  font-family: "Inter", 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;
   line-height: 28px;
   max-width: 100%;

package/styles/tailwind.css

@@ -1833,7 +1833,7 @@ ejs-dropdownlist {
 }
 
 .e-multi-select-wrapper .e-delim-values {
-  font-family: "Inter";
+  font-family: "Inter", 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;
   line-height: 28px;
   max-width: 100%;