@heartlandone/vega 2.74.0-RTE-table-preview → 2.75.0-RTE-table-preview

package/dist/collection/components/vega-rich-text-editor/test/extensions/table/table-element-to-dto-strategies.test.js

@@ -1,12 +1,5 @@
 import '../../../../../polyfill/test-polyfill/unit/index';
-import { TableToTableBlockStrategy } from '../../../extensions/table/element-to-dto-strategies/table-to-table-block-strategy';
-import { TheadToTableHeadBlockStrategy } from '../../../extensions/table/element-to-dto-strategies/thead-to-table-head-block-strategy';
-import { TbodyToTableBodyBlockStrategy } from '../../../extensions/table/element-to-dto-strategies/tbody-to-table-body-block-strategy';
-import { TrToTableRowBlockStrategy } from '../../../extensions/table/element-to-dto-strategies/tr-to-table-row-block-strategy';
-import { TdToTableCellBlockStrategy } from '../../../extensions/table/element-to-dto-strategies/td-to-table-cell-block-strategy';
-import ElementToDTOClassStrategyManager from '../../../../../helpers/rte-manager/element-dto-class-strategy-manager';
 import { VegaRTEContent } from '../../../dto/content-state';
-import { CaptionToCaptionBlockStrategy } from '../../../extensions/table/element-to-dto-strategies/caption-to-caption-block-strategy';
 import { RTETableBlock } from '../../../extensions/table/dto/table-block';
 import { RTETableCaptionBlock } from '../../../extensions/table/dto/table-caption-block';
 import { RTETableHeadBlock } from '../../../extensions/table/dto/table-head-block';
@@ -15,14 +8,10 @@ import { RTETableHeadCellBlock } from '../../../extensions/table/dto/table-head-
 import { RTETableRowBlock } from '../../../extensions/table/dto/table-row-block';
 import { RTETableCellBlock } from '../../../extensions/table/dto/table-cell-block';
 import { RTEHtmlBlock } from '../../../dto/blocks/html-block';
+import { VegaRTETableExtension } from '../../../extensions/table/table-extension';
 describe('table element to dto strategies', () => {
   beforeAll(() => {
-    ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new TableToTableBlockStrategy());
-    ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new TheadToTableHeadBlockStrategy());
-    ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new TbodyToTableBodyBlockStrategy());
-    ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new TrToTableRowBlockStrategy());
-    ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new TdToTableCellBlockStrategy());
-    ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new CaptionToCaptionBlockStrategy());
+    new VegaRTETableExtension().initialExtension(null);
   });
   it('should convert the table with children elements to extension table DTOs', () => {
     const html = `<table>
@@ -67,6 +56,7 @@ describe('table element to dto strategies', () => {
         annotations: {
           table: {
             alignment: 'center',
+            borderCollapse: 'collapse',
           },
         },
         type: 'table-block',
@@ -122,6 +112,8 @@ describe('table element to dto strategies', () => {
                         },
                         textAlign: 'left',
                         verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
                       },
                     },
                     type: 'table-head-cell',
@@ -154,6 +146,8 @@ describe('table element to dto strategies', () => {
                         },
                         textAlign: 'left',
                         verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
                       },
                     },
                     type: 'table-head-cell',
@@ -198,6 +192,8 @@ describe('table element to dto strategies', () => {
                         },
                         textAlign: 'left',
                         verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
                       },
                     },
                     type: 'table-cell',
@@ -230,6 +226,8 @@ describe('table element to dto strategies', () => {
                         },
                         textAlign: 'left',
                         verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
                       },
                     },
                     type: 'table-cell',
@@ -268,6 +266,8 @@ describe('table element to dto strategies', () => {
                         },
                         textAlign: 'left',
                         verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
                       },
                     },
                     type: 'table-cell',
@@ -300,6 +300,8 @@ describe('table element to dto strategies', () => {
                         },
                         textAlign: 'left',
                         verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
                       },
                     },
                     type: 'table-cell',
@@ -630,14 +632,14 @@ describe('table element to dto strategies', () => {
           </caption>
 		  <thead>
 			<tr>
-			  <th style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 30px; background-color: #f2f2f2;">
+			  <th style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box; background-color: #f2f2f2;">
 				<p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
 				  <span>
 					Header 1
 				  </span>
 				</p>
 			  </th>
-			  <th style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 30px; background-color: #f2f2f2;">
+			  <th style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box; background-color: #f2f2f2;">
 				<p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
 				  <span>
 					Header 2
@@ -648,14 +650,14 @@ describe('table element to dto strategies', () => {
 		  </thead>
 		  <tbody>
 			<tr>
-			  <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 30px;">
+			  <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box;">
 				<p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
 				  <span>
 					Cell 1
 				  </span>
 				</p>
 			  </td>
-			  <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 30px;">
+			  <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box;">
 				<p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
 				  <span>
 					Cell 2
@@ -664,14 +666,14 @@ describe('table element to dto strategies', () => {
 			  </td>
 			</tr>
 			<tr>
-			  <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 30px;">
+			  <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box;">
 				<p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
 				  <span>
 					Cell 3
 				  </span>
 				</p>
 			  </td>
-			  <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 30px;">
+			  <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box;">
 				<p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
 				  <span>
 					Cell 4
@@ -971,6 +973,7 @@ describe('table element to dto strategies', () => {
         annotations: {
           table: {
             alignment: 'center',
+            borderCollapse: 'collapse',
           },
           customAttribute: {
             id: 'table',
@@ -1065,6 +1068,8 @@ describe('table element to dto strategies', () => {
                         },
                         textAlign: 'left',
                         verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
                       },
                       customAttribute: {
                         id: 'head-cell-1',
@@ -1111,6 +1116,8 @@ describe('table element to dto strategies', () => {
                         },
                         textAlign: 'left',
                         verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
                       },
                     },
                     type: 'table-head-cell',
@@ -1164,6 +1171,8 @@ describe('table element to dto strategies', () => {
                         },
                         textAlign: 'left',
                         verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
                       },
                       customAttribute: {
                         id: 'cell-1',
@@ -1210,6 +1219,8 @@ describe('table element to dto strategies', () => {
                         },
                         textAlign: 'left',
                         verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
                       },
                     },
                     type: 'table-cell',
@@ -1248,6 +1259,8 @@ describe('table element to dto strategies', () => {
                         },
                         textAlign: 'left',
                         verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
                       },
                     },
                     type: 'table-cell',
@@ -1280,6 +1293,8 @@ describe('table element to dto strategies', () => {
                         },
                         textAlign: 'left',
                         verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
                       },
                     },
                     type: 'table-cell',
@@ -1319,14 +1334,14 @@ describe('table element to dto strategies', () => {
       </caption>
       <thead class="thead" id="head" style="background: red;">
         <tr class="tr" id="row-1" style="background: purple;">
-          <th class="th" id="head-cell-1" style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 30px; background-color: #f2f2f2; background: pink;">
+          <th class="th" id="head-cell-1" style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box; background-color: #f2f2f2; background: pink;">
             <p class="th" id="head-cell-1" style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px; background: pink;">
               <span>
                 Header 1
               </span>
             </p>
           </th>
-          <th style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 30px; background-color: #f2f2f2;">
+          <th style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box; background-color: #f2f2f2;">
             <p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
               <span>
                 Header 2
@@ -1337,14 +1352,14 @@ describe('table element to dto strategies', () => {
       </thead>
       <tbody class="tbody" id="body" style="background: green;">
         <tr>
-          <td class="td" id="cell-1" style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 30px; background: yellow;">
+          <td class="td" id="cell-1" style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box; background: yellow;">
             <p class="td" id="cell-1" style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px; background: yellow;">
               <span>
                 Cell 1
               </span>
             </p>
           </td>
-          <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 30px;">
+          <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box;">
             <p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
               <span>
                 Cell 2
@@ -1353,14 +1368,14 @@ describe('table element to dto strategies', () => {
           </td>
         </tr>
         <tr>
-          <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 30px;">
+          <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box;">
             <p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
               <span>
                 Cell 3
               </span>
             </p>
           </td>
-          <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 30px;">
+          <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box;">
             <p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
               <span>
                 Cell 4
@@ -1447,4 +1462,78 @@ describe('table element to dto strategies', () => {
       nodes: [{ id: expect.anything(), annotations: { plainText: true }, text: '', type: 'text' }],
     });
   });
+  it('should convert changed minWidth and boxSizing', () => {
+    const html = `<table style="border-collapse: collapse;margin: 0 auto;">
+			<tbody>
+				<tr>
+					<td style="padding: 12px;border: solid 1px #ddd;text-align: left;vertical-align: middle;min-width: 100px;box-sizing: border-box;">
+						<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;">
+							<span>A</span>
+						</p>
+					</td>
+					<td style="padding: 12px;border: solid 1px #ddd;text-align: left;vertical-align: middle;min-width: 55px;box-sizing: content-box;">
+						<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;">
+							<span>B</span>
+						</p>
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 12px;border: solid 1px #ddd;text-align: left;vertical-align: middle;min-width: 55px;box-sizing: border-box;">
+						<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;">
+							<span>C</span>
+						</p>
+					</td>
+					<td style="padding: 12px;border: solid 1px #ddd;text-align: left;vertical-align: middle;min-width: 55px;box-sizing: border-box;">
+						<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;">
+							<span>D</span>
+						</p>
+					</td>
+				</tr>
+			</tbody>
+		</table>`;
+    const value = VegaRTEContent.fromHtml(html);
+    const jsonValue = value.toJSON()[0];
+    const tbody = jsonValue.children[0];
+    const firstRow = tbody.children[0];
+    const firstCell = firstRow.children[0];
+    const secondCell = firstRow.children[1];
+    expect(firstCell.annotations.tableCell.minWidth).toBe('100px');
+    expect(secondCell.annotations.tableCell.boxSizing).toBe('content-box');
+    expect(firstCell.annotations.customStyle.minWidth).toBe('100px');
+    expect(secondCell.annotations.customStyle.boxSizing).toBe('content-box');
+    expect(value.toHtml()).toEqualHtml(html);
+  });
+  it('should convert changed minWidth and boxSizing when autoMatchFormat is false', () => {
+    const html = `<table style="border-collapse: collapse;margin: 0 auto;">
+			<tbody>
+				<tr>
+					<td style="padding: 12px;border: solid 1px #ddd;text-align: left;vertical-align: middle;min-width: 100px;box-sizing: border-box;">
+						<p><span>A</span></p>
+					</td>
+					<td style="padding: 12px;border: solid 1px #ddd;text-align: left;vertical-align: middle;min-width: 55px;box-sizing: content-box;">
+						<p><span>B</span></p>
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 12px;border: solid 1px #ddd;text-align: left;vertical-align: middle;min-width: 55px;box-sizing: border-box;">
+						<p><span>C</span></p>
+					</td>
+					<td style="padding: 12px;border: solid 1px #ddd;text-align: left;vertical-align: middle;min-width: 55px;box-sizing: border-box;">
+						<p><span>D</span></p>
+					</td>
+				</tr>
+			</tbody>
+		</table>`;
+    const value = VegaRTEContent.fromHtml(html, { autoMatchFormat: false });
+    const jsonValue = value.toJSON()[0];
+    const tbody = jsonValue.children[0];
+    const firstRow = tbody.children[0];
+    const firstCell = firstRow.children[0];
+    const secondCell = firstRow.children[1];
+    expect(firstCell.annotations.tableCell.minWidth).toBe('100px');
+    expect(secondCell.annotations.tableCell.boxSizing).toBe('content-box');
+    expect(firstCell.annotations.customStyle.minWidth).toBe('100px');
+    expect(secondCell.annotations.customStyle.boxSizing).toBe('content-box');
+    expect(value.toHtml()).toEqualHtml(html);
+  });
 });

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor.js

@@ -38,7 +38,6 @@ import { RichTextEditorRequiredRule } from '../../helpers/validator/rules/rich-t
 import { InsertImageController } from './slimmers/controllers/insert-image-controller';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { FocusController } from './slimmers/controllers/focus-controller';
-import { TextNodeColorController } from './slimmers/controllers/text-node-color-controller';
 import { InsertCompositionTextController } from './slimmers/controllers/insert-composition-text-controller';
 import { DeleteSelectedNodesController } from './slimmers/controllers/delete-selected-nodes-controller';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
@@ -101,7 +100,6 @@ export class VegaRichTextEditor {
     this.insertCompositionTextController = new InsertCompositionTextController();
     this.imageInsertedEventEmitter = createEventEmitSlimmer(VegaRichTextEditor, VegaImageInserted);
     this.changeEventPreventSlimmer = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaRichTextEditorRenderer.getRichTextWrapperRef());
-    this.textNodeColorController = new TextNodeColorController();
     this.deleteSelectedNodesController = new DeleteSelectedNodesController();
     this.historyController = new HistoryController();
     this.internalCodeBlockSelectionController = new InternalCodeBlockSelectionController();
@@ -787,9 +785,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "changeEventPreventSlimmer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaRichTextEditor.prototype, "textNodeColorController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "deleteSelectedNodesController", void 0);

package/dist/collection/components/vega-selection-chip/vega-selection-chip.js

@@ -241,7 +241,7 @@ export class VegaSelectionChip {
       "mutable": false,
       "complexType": {
         "original": "VegaSelectionChipTooltipProps",
-        "resolved": "{ size?: ResponsiveType<SizeType>; trigger?: \"hover\" | \"click\" | \"none\"; positionRelativeTo?: string; minWidth?: ResponsiveType<SizeType>; maxWidth?: ResponsiveType<SizeType>; content?: string; disableInteractive?: boolean; text?: string; placement?: ElementAppenderPlacementType; alignment?: ElementAppenderAlignmentType; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; trigger?: \"click\" | \"hover\" | \"none\"; positionRelativeTo?: string; minWidth?: ResponsiveType<SizeType>; maxWidth?: ResponsiveType<SizeType>; content?: string; disableInteractive?: boolean; text?: string; placement?: ElementAppenderPlacementType; alignment?: ElementAppenderAlignmentType; }",
         "references": {
           "VegaSelectionChipTooltipProps": {
             "location": "import",

package/dist/collection/components/vega-time-picker/slimmers/controllers/vega-time-picker-range-dropdown-controller.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
+import { ClickOutsideOnlyToDismissStrategy } from '../../../../helpers/slimmers/element-appender/trigger-strategies/click-outside-only-to-dismiss-strategy';
 /** The `VegaTimePickerRangeDropdownController` class is responsible for managing the dropdown menu for selecting a range of time in the VegaTimePicker component. */
 export class VegaTimePickerRangeDropdownController extends ElementAppenderSlimmer {
   /**
@@ -29,7 +30,7 @@ export class VegaTimePickerRangeDropdownController extends ElementAppenderSlimme
         placement: ['bottom', 'top'],
         matchTargetWidth: true,
       };
-    }, () => 'custom', 'isRangeDropdownShow');
+    }, () => new ClickOutsideOnlyToDismissStrategy(), 'isRangeDropdownShow');
     this.isRangeDropdownShow = false;
     this.rangeDropdownType = 'start';
     /*

package/dist/collection/components/vega-time-picker/slimmers/controllers/vega-time-picker-single-dropdown-controller.js

@@ -8,6 +8,7 @@ import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
 import { LogUtility } from '../../../../utils/log';
 import { pad } from '../../../../utils/date';
+import { ClickOutsideOnlyToDismissStrategy } from '../../../../helpers/slimmers/element-appender/trigger-strategies/click-outside-only-to-dismiss-strategy';
 /** The `VegaTimePickerDropdownController` class is responsible for managing the dropdown functionality of the VegaTimePicker component in a TypeScript application. */
 export class VegaTimePickerSingleDropdownController extends ElementAppenderSlimmer {
   /**
@@ -23,7 +24,7 @@ export class VegaTimePickerSingleDropdownController extends ElementAppenderSlimm
       positionRelativeTo: this.positionRelativeTo,
       translocation: { X: 0, Y: 8 },
       placement: ['bottom', 'top'],
-    }), () => 'custom');
+    }), () => new ClickOutsideOnlyToDismissStrategy());
   }
   /**
    * The function initializes a value controller and dropdown source.

package/dist/collection/constants/ui.js

@@ -91,6 +91,8 @@ export const VegaNativeEventName = [
   'clear',
   'periodChange',
   'selectionChange',
+  'suggestionItemClick',
+  'nativeInputChange',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const CssStates = ['default', 'hover', 'active', 'focus-visible'];

package/dist/collection/helpers/event-manager/event-id/component-event-id-map.js

@@ -1,4 +1,4 @@
-import { VegaExpand, VegaClick, VegaDropdownClick, VegaReset, VegaClose, VegaActionButtonClick, VegaChange, VegaEventClick, VegaDateDblClick, VegaMoreActionClick, VegaDateClick, VegaPageUpdate, VegaRemove, VegaCreate, VegaSearch, VegaMonthYearChange, VegaClear, VegaSelectionChange, VegaDropdownShow, VegaDropdownHide, VegaDropdownSearch, VegaSearchTrigger, VegaLabelButtonClick, VegaSelectFileChange, VegaRetry, VegaPreview, VegaFormSubmit, VegaFormReset, VegaValidate, VegaCancel, VegaFocus, VegaBlur, VegaPaste, VegaComplete, VegaCountryChange, VegaShow, VegaHide, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaImageInserted, VegaSelectChange, VegaSelectAllChange, VegaRowClick, VegaRowExpand, VegaRowSelect, VegaRowSelectAll, } from './vega-event-id';
+import { VegaExpand, VegaClick, VegaDropdownClick, VegaReset, VegaClose, VegaActionButtonClick, VegaChange, VegaEventClick, VegaDateDblClick, VegaMoreActionClick, VegaDateClick, VegaPageUpdate, VegaRemove, VegaCreate, VegaSearch, VegaMonthYearChange, VegaClear, VegaSelectionChange, VegaDropdownShow, VegaDropdownHide, VegaDropdownSearch, VegaSearchTrigger, VegaLabelButtonClick, VegaSelectFileChange, VegaRetry, VegaPreview, VegaFormSubmit, VegaFormReset, VegaValidate, VegaCancel, VegaNativeInputChange, VegaFocus, VegaBlur, VegaSuggestionItemClick, VegaPaste, VegaComplete, VegaCountryChange, VegaShow, VegaHide, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaImageInserted, VegaSelectChange, VegaSelectAllChange, VegaRowClick, VegaRowExpand, VegaRowSelect, VegaRowSelectAll, } from './vega-event-id';
 const entries = [
   ['vega-accordion', [VegaExpand]],
   ['vega-app-header-button', [VegaClick, VegaDropdownClick, VegaReset]],
@@ -35,7 +35,18 @@ const entries = [
   ['vega-file-uploader', [VegaChange, VegaSelectFileChange, VegaRemove, VegaRetry, VegaPreview]],
   ['vega-form', [VegaFormSubmit, VegaFormReset, VegaValidate]],
   ['vega-image-uploader', [VegaChange, VegaRemove, VegaCancel]],
-  ['vega-input', [VegaChange, VegaFocus, VegaBlur, VegaLabelButtonClick, VegaPaste]],
+  [
+    'vega-input',
+    [
+      VegaChange,
+      VegaNativeInputChange,
+      VegaFocus,
+      VegaBlur,
+      VegaLabelButtonClick,
+      VegaSuggestionItemClick,
+      VegaPaste,
+    ],
+  ],
   ['vega-input-credit-card', [VegaChange, VegaBlur, VegaFocus]],
   ['vega-input-numeric', [VegaChange]],
   ['vega-input-passcode', [VegaChange, VegaComplete]],

package/dist/collection/helpers/event-manager/event-id/vega-event-id.js

@@ -107,3 +107,5 @@ export const VegaPaste = new VegaEventID('vegaPaste', 'paste');
 export const HTMLNativeEventIds = [VegaChange, VegaClick, VegaFocus, VegaBlur, VegaPaste];
 export const VegaMonthYearChange = new VegaEventID('vegaMonthYearChange', 'monthYearChange');
 export const VegaSelectionChange = new VegaEventID('vegaSelectionChange', 'selectionChange');
+export const VegaSuggestionItemClick = new VegaEventID('vegaSuggestionItemClick', 'suggestionItemClick');
+export const VegaNativeInputChange = new VegaEventID('vegaNativeInputChange', 'nativeInputChange');

package/dist/collection/helpers/event-manager/test/component-event-id-map.test.js

@@ -1,14 +1,16 @@
 import { VEGA_COMPONENT_EVENT_MAP } from '../event-id/component-event-id-map';
-import { VegaBlur, VegaChange, VegaFocus, VegaLabelButtonClick, VegaPaste } from '../event-id/vega-event-id';
+import { VegaBlur, VegaChange, VegaFocus, VegaLabelButtonClick, VegaNativeInputChange, VegaPaste, VegaSuggestionItemClick, } from '../event-id/vega-event-id';
 test('VEGA_COMPONENT_EVENT_MAP size', () => {
   expect(VEGA_COMPONENT_EVENT_MAP.size).not.toEqual(0);
 });
 test('VEGA_COMPONENT_EVENT_MAP vega-input', () => {
   expect(VEGA_COMPONENT_EVENT_MAP.get('vega-input')).toEqual([
     VegaChange,
+    VegaNativeInputChange,
     VegaFocus,
     VegaBlur,
     VegaLabelButtonClick,
+    VegaSuggestionItemClick,
     VegaPaste,
   ]);
 });

package/dist/collection/helpers/event-manager/test/vega-event-manager.test.js

@@ -1,5 +1,5 @@
 import { VegaEventManager } from '../../public-api';
-import { VegaBlur, VegaChange, VegaCreate, VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaFocus, VegaLabelButtonClick, VegaPaste, VegaReset, VegaSearchTrigger, } from '../event-id/vega-event-id';
+import { VegaBlur, VegaChange, VegaCreate, VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaFocus, VegaLabelButtonClick, VegaNativeInputChange, VegaPaste, VegaReset, VegaSearchTrigger, VegaSuggestionItemClick, } from '../event-id/vega-event-id';
 import VegaTelemetryRuntimeMetricsManager from '@heartlandone/vega-telemetry-runtime-metrics/index';
 import { sleep } from '../../../utils/test-utils';
 describe('VegaEventManager', () => {
@@ -20,9 +20,11 @@ describe('VegaEventManager', () => {
   it('should work proper while call getNativeEventName', () => {
     expect(VegaEventManager.getEnabledEventIdsByComponent('vega-input')).toEqual([
       VegaChange,
+      VegaNativeInputChange,
       VegaFocus,
       VegaBlur,
       VegaLabelButtonClick,
+      VegaSuggestionItemClick,
       VegaPaste,
     ]);
     expect(VegaEventManager.getEnabledEventIdsByComponent('vega-dropdown')).toEqual([