@syncfusion/ej2-richtexteditor 21.2.10 → 22.1.34

package/src/rich-text-editor/base/rich-text-editor.js

@@ -44,7 +44,7 @@ import { RendererFactory } from '../services/renderer-factory';
 import { RenderType, ToolbarType, DialogType } from './enum';
 import { ExecCommandCallBack } from '../actions/execute-command-callback';
 import { KeyboardEvents } from '../actions/keyboard';
-import { ToolbarSettings, ImageSettings, AudioSettings, VideoSettings, QuickToolbarSettings, FontFamily, FontSize, Format, NumberFormatList, BulletFormatList, FormatPainterSettings } from '../models/toolbar-settings';
+import { ToolbarSettings, ImageSettings, AudioSettings, VideoSettings, QuickToolbarSettings, FontFamily, FontSize, Format, NumberFormatList, BulletFormatList, FormatPainterSettings, EmojiSettings } from '../models/toolbar-settings';
 import { FileManagerSettings } from '../models/toolbar-settings';
 import { TableSettings, PasteCleanupSettings } from '../models/toolbar-settings';
 import { FontColor, BackgroundColor } from '../models/toolbar-settings';
@@ -122,6 +122,10 @@ var RichTextEditor = /** @class */ (function (_super) {
                 member: 'formatPainter',
                 args: [this]
             });
+            modules.push({
+                member: 'emojiPicker',
+                args: [this, this.serviceLocator]
+            });
         }
         if (this.fileManagerSettings.enable) {
             modules.push({ member: 'fileManager', args: [this, this.serviceLocator] });
@@ -321,6 +325,20 @@ var RichTextEditor = /** @class */ (function (_super) {
         });
         return str;
     };
+    /**
+     * Shows the emoji picker
+     *
+     * @param {number} x - specifies the number value.
+     * @param {number} y - specifies the number value.
+     * @returns {void}
+     * @public
+     */
+    RichTextEditor.prototype.showEmojiPicker = function (x, y) {
+        if (this.readonly) {
+            return;
+        }
+        this.notify(events.emojiPicker, { x: x, y: y });
+    };
     /**
      * Executes the commands
      *
@@ -556,7 +574,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             this.valueContainer.defaultValue = this.value;
         }
         // eslint-disable-next-line
-        (!this.enabled) ? this.unWireEvents() : this.eventInitializer();
+        (this.enabled && !this.readonly) ? this.eventInitializer() : this.unWireEvents();
         this.notify(events.bindCssClass, { cssClass: this.cssClass });
         this.addAudioVideoWrapper();
         this.notify(events.tableclass, {});
@@ -642,6 +660,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         var currentEndContainer = range.endContainer;
         var currentStartOffset = range.startOffset;
         var isSameContainer = currentStartContainer === currentEndContainer ? true : false;
+        // eslint-disable-next-line
         var currentEndOffset = currentEndContainer.textContent.length;
         var endNode = range.endContainer.nodeName === '#text' ? range.endContainer.parentElement :
             range.endContainer;
@@ -724,7 +743,8 @@ var RichTextEditor = /** @class */ (function (_super) {
                 this.formatter.editorManager.nodeSelection.setCursorPoint(this.contentModule.getDocument(), range.startContainer, range.startOffset);
             }
         }
-        if (this.formatter.getUndoRedoStack().length === 0) {
+        var notFormatPainterCopy = !isNOU(e.action) && e.action !== 'format-copy';
+        if (this.formatter.getUndoRedoStack().length === 0 && notFormatPainterCopy) {
             this.formatter.saveData();
         }
         if (e.action !== 'insert-link' &&
@@ -756,8 +776,8 @@ var RichTextEditor = /** @class */ (function (_super) {
             if ((!isNOU(this.placeHolderWrapper)) && (this.inputElement.textContent.length !== 1)) {
                 this.placeHolderWrapper.style.display = 'none';
             }
-            else if (this.iframeSettings.enable && this.inputElement.classList.contains("e-rte-placeholder")) {
-                removeClass([this.inputElement], "e-rte-placeholder");
+            else if (this.iframeSettings.enable && this.inputElement.classList.contains('e-rte-placeholder')) {
+                removeClass([this.inputElement], 'e-rte-placeholder');
             }
             else {
                 this.setPlaceHolder();
@@ -786,7 +806,9 @@ var RichTextEditor = /** @class */ (function (_super) {
             this.inputElement.innerHTML = getEditValue(getDefaultValue(this), this);
         }
         var allowedKeys = e.which === 32 || e.which === 13 || e.which === 8 || e.which === 46;
-        if (((e.key !== 'shift' && !e.ctrlKey) && e.key && e.key.length === 1 || allowedKeys) || (this.editorMode === 'Markdown'
+        var formatPainterCopy = e.key === 'C' && e.altKey && e.shiftKey;
+        var formatPainterPaste = e.key === 'V' && e.altKey && e.shiftKey;
+        if ((!formatPainterCopy && !formatPainterPaste) && ((e.key !== 'shift' && !e.ctrlKey) && e.key && e.key.length === 1 || allowedKeys) || (this.editorMode === 'Markdown'
             && ((e.key !== 'shift' && !e.ctrlKey) && e.key && e.key.length === 1 || allowedKeys)) && !this.inlineMode.enable) {
             this.formatter.onKeyHandler(this, e);
         }
@@ -1337,6 +1359,9 @@ var RichTextEditor = /** @class */ (function (_super) {
                     newProp.quickToolbarSettings.showOnRightClick ? this.wireContextEvent() : this.unWireContextEvent();
                     this.notify(events.modelChanged, { newProp: newProp, oldProp: oldProp });
                     break;
+                case 'formatPainterSettings':
+                    this.formatter.editorManager.observer.notify(CONSTANT.MODEL_CHANGED, { module: 'formatPainter', newProp: newProp });
+                    break;
                 default:
                     this.notify(events.modelChanged, { newProp: newProp, oldProp: oldProp });
                     break;
@@ -1466,11 +1491,11 @@ var RichTextEditor = /** @class */ (function (_super) {
             if (this.inputElement.textContent.length === 0 && this.inputElement.childNodes.length < 2 && !isNOU(this.inputElement.firstChild) && (this.inputElement.firstChild.nodeName === 'BR' ||
                 ((this.inputElement.firstChild.nodeName === 'P' || this.inputElement.firstChild.nodeName === 'DIV') && !isNOU(this.inputElement.firstChild.firstChild) &&
                     this.inputElement.firstChild.firstChild.nodeName === 'BR'))) {
-                addClass([this.inputElement], "e-rte-placeholder");
+                addClass([this.inputElement], 'e-rte-placeholder');
                 this.inputElement.setAttribute('placeholder', this.placeholder);
             }
             else {
-                removeClass([this.inputElement], "e-rte-placeholder");
+                removeClass([this.inputElement], 'e-rte-placeholder');
             }
         }
     };
@@ -1700,7 +1725,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         var _this = this;
         if (this.valueTemplate) {
             var regEx = new RegExp(/<(?=.*? .*?\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\/\1>/i);
-            if (regEx.test(this.valueTemplate)) {
+            if (typeof this.valueTemplate === 'string' && regEx.test(this.valueTemplate)) {
                 this.setProperties({ value: this.valueTemplate });
             }
             else {
@@ -2199,7 +2224,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                 this.timeInterval = null;
             }
             if (!isNOU(this.placeHolderWrapper) && this.element.querySelector('[title = Preview]')) {
-                this.placeHolderWrapper.style.display = "none";
+                this.placeHolderWrapper.style.display = 'none';
             }
             EventHandler.remove(document, 'mousedown', this.onDocumentClick);
         }
@@ -2258,7 +2283,8 @@ var RichTextEditor = /** @class */ (function (_super) {
             EventHandler.add(element, 'scroll', this.scrollHandler, this);
         }
         if (!this.iframeSettings.enable) {
-            EventHandler.add(this.contentModule.getPanel(), 'scroll', this.contentScrollHandler, this);
+            // Add the scroll event handler from the inputElement
+            EventHandler.add(this.inputElement, 'scroll', this.contentScrollHandler, this);
         }
     };
     RichTextEditor.prototype.wireContextEvent = function () {
@@ -2287,7 +2313,8 @@ var RichTextEditor = /** @class */ (function (_super) {
             EventHandler.remove(element, 'scroll', this.scrollHandler);
         }
         if (!this.iframeSettings.enable) {
-            EventHandler.remove(this.contentModule.getPanel(), 'scroll', this.contentScrollHandler);
+            // Remove the scroll event handler from the inputElement
+            EventHandler.remove(this.inputElement, 'scroll', this.contentScrollHandler);
         }
     };
     RichTextEditor.prototype.touchHandler = function (e) {
@@ -2470,6 +2497,9 @@ var RichTextEditor = /** @class */ (function (_super) {
     __decorate([
         Complex({}, FormatPainterSettings)
     ], RichTextEditor.prototype, "formatPainterSettings", void 0);
+    __decorate([
+        Complex({}, EmojiSettings)
+    ], RichTextEditor.prototype, "emojiPickerSettings", void 0);
     __decorate([
         Complex({}, IFrameSettings)
     ], RichTextEditor.prototype, "iframeSettings", void 0);

package/src/rich-text-editor/base/util.js

@@ -152,7 +152,8 @@ export function setToolbarStatus(e, isPopToolbar, self) {
             var item = e.tbItems[j].subCommand;
             var itemStr = item && item.toLocaleLowerCase();
             if (item && (itemStr === key) || (item === 'UL' && key === 'unorderedlist') || (item === 'OL' && key === 'orderedlist') ||
-                (itemStr === 'pre' && key === 'insertcode')) {
+                (itemStr === 'pre' && key === 'insertcode') || (item === 'NumberFormatList' && key === 'numberFormatList' ||
+                item === 'BulletFormatList' && key === 'bulletFormatList')) {
                 if (typeof data["" + key] === 'boolean') {
                     if (data["" + key] === true) {
                         addClass([e.tbElements[j]], [classes.CLS_ACTIVE]);
@@ -204,7 +205,6 @@ export function setToolbarStatus(e, isPopToolbar, self) {
                             var fontNameContent = isNOU(e.parent.fontFamily.default) ? fontNameItems[0].text :
                                 e.parent.fontFamily.default;
                             var name_1 = (isNOU(result) ? fontNameContent : result);
-                            e.tbElements[j].title = name_1;
                             dropDown.fontNameDropDown.content = ('<span style="display: inline-flex;' +
                                 'width:' + e.parent.fontFamily.width + '" >' +
                                 '<span class="e-rte-dropdown-btn-text' + (isNOU(e.parent.cssClass) ? '' : ' ' + e.parent.cssClass) + '">'

package/src/rich-text-editor/formatter/formatter.js

@@ -45,6 +45,7 @@ var Formatter = /** @class */ (function () {
             && args.item.command !== 'Files'
             && args.item.command !== 'Audios'
             && args.item.command !== 'Videos'
+            && args.item.command !== 'EmojiPicker'
             && range
             && !(self.contentModule.getEditPanel().contains(this.getAncestorNode(range.commonAncestorContainer))
                 || self.contentModule.getEditPanel() === range.commonAncestorContainer
@@ -110,13 +111,14 @@ var Formatter = /** @class */ (function () {
             && args.item.command !== 'Font')
             || ((args.item.subCommand === 'FontName' || args.item.subCommand === 'FontSize') && args.name === 'dropDownSelect')
             || ((args.item.subCommand === 'BackgroundColor' || args.item.subCommand === 'FontColor')
-                && args.name === 'colorPickerChanged') || args.item.subCommand === 'FormatPainter')) {
+                && args.name === 'colorPickerChanged') || args.item.subCommand === 'FormatPainter' || args.item.subCommand === 'EmojiPicker')) {
             extend(args, args, { requestType: args.item.subCommand, cancel: false, itemCollection: value, selectType: args.name }, true);
             self.trigger(CONSTANT.actionBegin, args, function (actionBeginArgs) {
                 if (!actionBeginArgs.cancel) {
-                    var formatPainterCopyAction = !isNOU(actionBeginArgs.name) && actionBeginArgs.name === 'format-copy';
-                    if (_this.getUndoRedoStack().length === 0 && actionBeginArgs.item.command !== 'Links'
-                        && actionBeginArgs.item.command !== 'Images' && !formatPainterCopyAction) {
+                    var formatPainterCopy = !isNOU(actionBeginArgs.requestType) && actionBeginArgs.requestType === 'FormatPainter' && actionBeginArgs.name === 'format-copy';
+                    var formatPainterPaste = !isNOU(actionBeginArgs.requestType) && actionBeginArgs.requestType === 'FormatPainter' && actionBeginArgs.name === 'format-paste';
+                    if ((_this.getUndoRedoStack().length === 0 && actionBeginArgs.item.command !== 'Links' && actionBeginArgs.item.command !== 'Images' && !formatPainterCopy)
+                        || formatPainterPaste) {
                         _this.saveData();
                     }
                     self.isBlur = false;
@@ -138,7 +140,7 @@ var Formatter = /** @class */ (function () {
                 }
             });
         }
-        if (isNOU(event) || event && event.action !== 'copy') {
+        if ((isNOU(event) || event && event.action !== 'copy')) {
             this.enableUndo(self);
         }
     };

package/src/rich-text-editor/models/default-locale.js

@@ -191,7 +191,13 @@ export var defaultLocale = {
     'bulletFormatListSquare': 'Square',
     'numberFormatListNone': 'None',
     'bulletFormatListNone': 'None',
-    'formatPainter': 'Format Painter'
+    'formatPainter': 'Format Painter',
+    'emojiPicker': 'Emoji Picker',
+    'embeddedCode': 'Embedded Code',
+    'pasteEmbeddedCodeHere': 'Paste Embedded Code here',
+    'emojiPickerTypeToFind': 'Type to find',
+    'emojiPickerNoResultFound': 'No results found',
+    'emojiPickerTrySomethingElse': 'Try something else',
 };
 export var toolsLocale = {
     'alignments': 'alignments',
@@ -279,7 +285,13 @@ export var toolsLocale = {
     'insertrowbefore': 'insertRowBefore',
     'insertrowafter': 'insertRowAfter',
     'deleterow': 'deleteRow',
-    'formatpainter': 'formatPainter'
+    'formatpainter': 'formatPainter',
+    'emojipicker': 'emojiPicker',
+    'embeddedCode': 'Embedded Code',
+    'pasteEmbeddedCodeHere': 'Paste Embedded Code here',
+    'emojiPickerTypeToFind': 'Type to find',
+    'emojiPickerNoResultFound': 'No results found',
+    'emojiPickerTrySomethingElse': 'Try something else',
 };
 export var fontNameLocale = [
     { locale: 'fontNameSegoeUI', value: 'Segoe UI' },

package/src/rich-text-editor/models/items.d.ts

@@ -1,7 +1,7 @@
 /**
  * Export items model
  */
-import { IToolsItems, IDropDownItemModel, IRichTextEditor, IListDropDownModel } from '../base/interface';
+import { IToolsItems, IDropDownItemModel, IRichTextEditor, IListDropDownModel, EmojiIconsSet } from '../base/interface';
 export declare let templateItems: string[];
 export declare let tools: {
     [key: string]: IToolsItems;
@@ -33,3 +33,4 @@ export declare function updateDropDownLocale(self: IRichTextEditor): void;
 export declare let windowKeys: {
     [key: string]: string;
 };
+export declare const defaultEmojiIcons: EmojiIconsSet[];

package/src/rich-text-editor/models/items.js

@@ -558,6 +558,13 @@ export var tools = {
         'tooltip': 'Format Painter',
         'command': 'FormatPainter',
         'subCommand': 'FormatPainter'
+    },
+    'emojipicker': {
+        'id': 'EmojiPicker',
+        'icon': 'e-emoji',
+        'tooltip': 'Emoji Icon',
+        'command': 'EmojiPicker',
+        'subCommand': 'EmojiPicker'
     }
 };
 var alignmentLocale = [
@@ -770,5 +777,185 @@ export var windowKeys = {
     'Clear Format': 'Ctrl + Shift + R',
     'Numbered List': 'Ctrl + Shift + O',
     'Bulleted List': 'Ctrl + Alt + O',
-    'Format Painter': 'Ctrl + Shift + C, Ctrl + Shift + V'
+    'Format Painter': 'Alt + Shift + C, Alt + Shift + V'
 };
+export var defaultEmojiIcons = [{
+        name: 'Smilies & People', code: '1F600', iconCss: 'e-emoji', icons: [{ code: '1F600', desc: 'Grinning face' },
+            { code: '1F603', desc: 'Grinning face with big eyes' },
+            { code: '1F604', desc: 'Grinning face with smiling eyes' },
+            { code: '1F606', desc: 'Grinning squinting face' },
+            { code: '1F605', desc: 'Grinning face with sweat' },
+            { code: '1F602', desc: 'Face with tears of joy' },
+            { code: '1F923', desc: 'Rolling on the floor laughing' },
+            { code: '1F60A', desc: 'Smiling face with smiling eyes' },
+            { code: '1F607', desc: 'Smiling face with halo' },
+            { code: '1F642', desc: 'Slightly smiling face' },
+            { code: '1F643', desc: 'Upside-down face' },
+            { code: '1F60D', desc: 'Smiling face with heart-eyes' },
+            { code: '1F618', desc: 'Face blowing a kiss' },
+            { code: '1F61B', desc: 'Face with tongue' },
+            { code: '1F61C', desc: 'Winking face with tongue' },
+            { code: '1F604', desc: 'Grinning face with smiling eyes' },
+            { code: '1F469', desc: 'Woman' },
+            { code: '1F468', desc: 'Man' },
+            { code: '1F467', desc: 'Girl' },
+            { code: '1F466', desc: 'Boy' },
+            { code: '1F476', desc: 'Baby' },
+            { code: '1F475', desc: 'Old woman' },
+            { code: '1F474', desc: 'Old man' },
+            { code: '1F46E', desc: 'Police officer' },
+            { code: '1F477', desc: 'Construction worker' },
+            { code: '1F482', desc: 'Guard' },
+            { code: '1F575', desc: 'Detective' },
+            { code: '1F9D1', desc: 'Cook' }]
+    }, {
+        name: 'Animals & Nature', code: '1F435', iconCss: 'e-animals', icons: [{ code: '1F436', desc: 'Dog face' },
+            { code: '1F431', desc: 'Cat face' },
+            { code: '1F42D', desc: 'Mouse face' },
+            { code: '1F439', desc: 'Hamster face' },
+            { code: '1F430', desc: 'Rabbit face' },
+            { code: '1F98A', desc: 'Fox face' },
+            { code: '1F43B', desc: 'Bear face' },
+            { code: '1F43C', desc: 'Panda face' },
+            { code: '1F428', desc: 'Koala' },
+            { code: '1F42F', desc: 'Tiger face' },
+            { code: '1F981', desc: 'Lion face' },
+            { code: '1F42E', desc: 'Cow face' },
+            { code: '1F437', desc: 'Pig face' },
+            { code: '1F43D', desc: 'Pig nose' },
+            { code: '1F438', desc: 'Frog face' },
+            { code: '1F435', desc: 'Monkey face' },
+            { code: '1F649', desc: 'Hear-no-evil monkey' },
+            { code: '1F64A', desc: 'Speak-no-evil monkey' },
+            { code: '1F412', desc: 'Monkey' },
+            { code: '1F414', desc: 'Chicken' },
+            { code: '1F427', desc: 'Penguin' },
+            { code: '1F426', desc: 'Bird' },
+            { code: '1F424', desc: 'Baby chick' },
+            { code: '1F986', desc: 'Duck' },
+            { code: '1F985', desc: 'Eagle' }]
+    }, {
+        name: 'Food & Drink', code: '1F347', iconCss: 'e-food-and-drinks', icons: [{ code: '1F34E', desc: 'Red apple' },
+            { code: '1F34C', desc: 'Banana' },
+            { code: '1F347', desc: 'Grapes' },
+            { code: '1F353', desc: 'Strawberry' },
+            { code: '1F35E', desc: 'Bread' },
+            { code: '1F950', desc: 'Croissant' },
+            { code: '1F955', desc: 'Carrot' },
+            { code: '1F354', desc: 'Hamburger' },
+            { code: '1F355', desc: 'Pizza' },
+            { code: '1F32D', desc: 'Hot dog' },
+            { code: '1F35F', desc: 'French fries' },
+            { code: '1F37F', desc: 'Popcorn' },
+            { code: '1F366', desc: 'Soft ice cream' },
+            { code: '1F367', desc: 'Shaved ice' },
+            { code: '1F36A', desc: 'Cookie' },
+            { code: '1F382', desc: 'Birthday cake' },
+            { code: '1F370', desc: 'Shortcake' },
+            { code: '1F36B', desc: 'Chocolate bar' },
+            { code: '1F369', desc: 'Donut' },
+            { code: '1F36E', desc: 'Custard' },
+            { code: '1F36D', desc: 'Lollipop' },
+            { code: '1F36C', desc: 'Candy' },
+            { code: '1F377', desc: 'Wine glass' },
+            { code: '1F37A', desc: 'Beer mug' },
+            { code: '1F37E', desc: 'Bottle with popping cork' }]
+    }, {
+        name: 'Activities', code: '1F383', iconCss: 'e-activities', icons: [{ code: '26BD', desc: 'Soccer ball' },
+            { code: '1F3C0', desc: 'Basketball' },
+            { code: '1F3C8', desc: 'American football' },
+            { code: '26BE', desc: 'Baseball' },
+            { code: '1F3BE', desc: 'Tennis' },
+            { code: '1F3D0', desc: 'Volleyball' },
+            { code: '1F3C9', desc: 'Rugby football' },
+            { code: '1F3B1', desc: 'Pool 8 ball' },
+            { code: '1F3D3', desc: 'Ping pong' },
+            { code: '1F3F8', desc: 'Badminton' },
+            { code: '1F94A', desc: 'Boxing glove' },
+            { code: '1F3CA', desc: 'Swimmer' },
+            { code: '1F3CB', desc: 'Weightlifter' },
+            { code: '1F6B4', desc: 'Bicyclist' },
+            { code: '1F6F9', desc: 'Skateboard' },
+            { code: '1F3AE', desc: 'Video game' },
+            { code: '1F579', desc: 'Joystick' },
+            { code: '1F3CF', desc: 'Cricket' },
+            { code: '1F3C7', desc: 'Horse racing' },
+            { code: '1F3AF', desc: 'Direct hit' },
+            { code: '1F3D1', desc: 'Field hockey' },
+            { code: '1F3B0', desc: 'Slot machine' },
+            { code: '1F3B3', desc: 'Bowling' },
+            { code: '1F3B2', desc: 'Game die' },
+            { code: '265F', desc: 'Chess pawn' }]
+    }, {
+        name: 'Travel & Places', code: '1F30D', iconCss: 'e-travel-and-places', icons: [{ code: '2708', desc: 'Airplane' },
+            { code: '1F697', desc: 'Automobile' },
+            { code: '1F695', desc: 'Taxi' },
+            { code: '1F6B2', desc: 'Bicycle' },
+            { code: '1F68C', desc: 'Bus' },
+            { code: '1F682', desc: 'Locomotive' },
+            { code: '1F6F3', desc: 'Passenger ship' },
+            { code: '1F680', desc: 'Rocket' },
+            { code: '1F681', desc: 'Helicopter' },
+            { code: '1F6A2', desc: 'Ship' },
+            { code: '1F3DF', desc: 'Stadium' },
+            { code: '1F54C', desc: 'Mosque' },
+            { code: '26EA', desc: 'Church' },
+            { code: '1F6D5', desc: 'Hindu Temple' },
+            { code: '1F3D4', desc: 'Snow-capped mountain' },
+            { code: '1F3EB', desc: 'School' },
+            { code: '1F30B', desc: 'Volcano' },
+            { code: '1F3D6', desc: 'Beach with umbrella' },
+            { code: '1F3DD', desc: 'Desert island' },
+            { code: '1F3DE', desc: 'National park' },
+            { code: '1F3F0', desc: 'Castle' },
+            { code: '1F5FC', desc: 'Tokyo tower' },
+            { code: '1F5FD', desc: 'Statue of liberty' },
+            { code: '26E9', desc: 'Shinto shrine' },
+            { code: '1F3EF', desc: 'Japanese castle' },
+            { code: '1F3A2', desc: 'Roller coaster' }]
+    }, {
+        name: 'Objects', code: '1F507', iconCss: 'e-objects', icons: [{ code: '1F4A1', desc: 'Light bulb' },
+            { code: '1F526', desc: 'Flashlight' },
+            { code: '1F4BB', desc: 'Laptop computer' },
+            { code: '1F5A5', desc: 'Desktop computer' },
+            { code: '1F5A8', desc: 'Printer' },
+            { code: '1F4F7', desc: 'Camera' },
+            { code: '1F4F8', desc: 'Camera with flash' },
+            { code: '1F4FD', desc: 'Film projector' },
+            { code: '1F3A5', desc: 'Movie camera' },
+            { code: '1F4FA', desc: 'Television' },
+            { code: '1F4FB', desc: 'Radio' },
+            { code: '1F50B', desc: 'Battery' },
+            { code: '231A', desc: 'Watch' },
+            { code: '1F4F1', desc: 'Mobile phone' },
+            { code: '260E', desc: 'Telephone' },
+            { code: '1F4BE', desc: 'Floppy disk' },
+            { code: '1F4BF', desc: 'Optical disk' },
+            { code: '1F4C0', desc: 'Digital versatile disc' },
+            { code: '1F4BD', desc: 'Computer disk' },
+            { code: '1F3A7', desc: 'Headphone' },
+            { code: '1F3A4', desc: 'Microphone' },
+            { code: '1F3B6', desc: 'Multiple musical notes' },
+            { code: '1F4DA', desc: 'Books' }]
+    }, {
+        name: 'Symbols', code: '1F3E7', iconCss: 'e-symbols', icons: [{ code: '274C', desc: 'Cross mark' },
+            { code: '2714', desc: 'Check mark' },
+            { code: '26A0', desc: 'Warning sign' },
+            { code: '1F6AB', desc: 'Prohibited' },
+            { code: '2139', desc: 'Information' },
+            { code: '267B', desc: 'Recycling symbol' },
+            { code: '1F6AD', desc: 'No smoking' },
+            { code: '1F4F5', desc: 'No mobile phones' },
+            { code: '1F6AF', desc: 'No littering' },
+            { code: '1F6B3', desc: 'No bicycles' },
+            { code: '1F6B7', desc: 'No pedestrians' },
+            { code: '2795', desc: 'Plus' },
+            { code: '2796', desc: 'Minus' },
+            { code: '2797', desc: 'Divide' },
+            { code: '2716', desc: 'Multiplication' },
+            { code: '1F4B2', desc: 'Dollar banknote' },
+            { code: '1F4AC', desc: 'Speech balloon' },
+            { code: '2755', desc: 'White exclamation mark' },
+            { code: '2754', desc: 'White question mark' },
+            { code: '2764', desc: 'Red heart' }]
+    }];