@globalpayments/vega 2.49.1 → 2.51.0

package/dist/types/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/jira-code-to-rte-code-block-strategy.d.ts

@@ -0,0 +1,31 @@
+import { Nullable } from '../../../../../../types/general';
+import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
+import { RTECodeBlock } from '../../../../dto/blocks/code-block';
+/** Transform other editor code element which has attribute data-language to RTE code block DTO */
+export declare class JiraCodeToRTECodeBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray: HTMLElement[], currentIndex: number): number;
+  /**
+   * Parse to a code block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTECodeBlock>} - Code block.
+   */
+  handle(elementsArray: HTMLElement[]): Nullable<RTECodeBlock>;
+  /**
+   * Append child blocks.
+   */
+  appendChildBlocks(): void;
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren(): boolean;
+}

package/dist/types/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/vega-code-block-to-rte-code-block-strategy.d.ts

@@ -0,0 +1,42 @@
+import { Nullable } from '../../../../../../types/general';
+import { JiraCodeToRTECodeBlockStrategy } from './jira-code-to-rte-code-block-strategy';
+import { RTECodeBlock } from '../../../../dto/blocks/code-block';
+/** Transform vega-code-block element to code block DTO */
+export declare class VegaCodeBlockToRTECodeBlockStrategy extends JiraCodeToRTECodeBlockStrategy {
+  /**
+   * Can be handle.
+   *
+   * TODO: Update the browser clipboard data to fix the issue with nested vega-code-block elements.
+   * In safari the html snippet will be like: <vega-code-block><p><span>paragraph</span></p><vega-code-block></vega-code-block></vega-code-block>
+   * The vega-code-block nested inside the vega-code-block, so we need to check the child element.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray: HTMLElement[], currentIndex: number): number;
+  /**
+   * Parse to a code block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTECodeBlock>} - Code block.
+   */
+  handle(elementsArray: HTMLElement[]): Nullable<RTECodeBlock>;
+  /**
+   * Append child blocks.
+   */
+  appendChildBlocks(): void;
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren(): boolean;
+  /**
+   * Checks if the given element is a code block container.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} - Boolean result.
+   */
+  private isCodeBlockContainer;
+}

package/dist/types/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/insert-paste-handler.d.ts

@@ -41,4 +41,11 @@ export declare class InsertPasteHandler extends BaseHandler {
    * @param {RTEBlock} newBlock - Represents a new create block element in a rich text editor.
    */
   private switchCaretPositionToNextElement;
+  /**
+   * Parses the content of a plain text and formats it into HTML.
+   *
+   * @param {string} content - The content of plain text.
+   * @returns {string} - The formatted HTML string.
+   */
+  private parsePlainText;
 }

package/dist/types/components/vega-rich-text-editor/slimmers/controllers/internal-code-block-selection-controller.d.ts

@@ -0,0 +1,45 @@
+import { AutoRunWhenReRenderTaskQueueSlimmer } from '../../../../helpers/slimmers/auto-run-when-re-render-task-queue-slimmer.abstract';
+import { RTECodeBlock } from '../../dto/blocks/code-block';
+import { RTECodeBlockNode } from '../../dto/nodes/code-block-node';
+/**
+ * The rich text internal code block selection controller.
+ */
+export declare class InternalCodeBlockSelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
+  protected focusNodeOffset: number;
+  private shouldFocusNode;
+  constructor();
+  /**
+   * Update the internal code block selection.
+   *
+   * @param {RTECodeBlockNode} startNode - The internal code block node DTO.
+   * @param {number} startOffset - The content offset.
+   * @param {boolean} immediatelyRun - Whether to invoke the method immediately.
+   */
+  enqueueSelectionRangeFutureState(startNode: RTECodeBlockNode, startOffset: number, immediatelyRun?: boolean): void;
+  /**
+   * Check the code block is actually selected or not. Because the Code block is a shadow dom, so can't detect the content selected state.
+   * We add two placeholder spans at the begin and end position, we could check the placeholder spans selected state to make sure the code block is selected or not.
+   *
+   *
+   * @example
+   * <div>
+   * <span></span>
+   * <vega-code-block></vega-code-block>
+   * <span><span>
+   * </div>
+   * @param {RTECodeBlock} codeBlock - The code block DTO.
+   * @param {Range} range - The range instance.
+   * @returns {boolean} - The boolean result.
+   */
+  isCodeBlockSelected(codeBlock: RTECodeBlock, range: Range): boolean;
+  /**
+   * The method invoke after the component re-render.
+   */
+  protected doTask: () => Promise<void>;
+  /**
+   * Focus the code block component.
+   *
+   * @param {RTECodeBlockNode} node - The code block node DTO.
+   */
+  private focusTheCodeBlock;
+}

package/dist/types/components/vega-rich-text-editor/slimmers/controllers/selection-controller.d.ts

@@ -1,9 +1,9 @@
-import { VegaSlimmer } from '../../../../vega-slimmer/vega-slimmer-core';
 import { VegaRichTextEditor } from '../../vega-rich-text-editor';
 import { RTEBlock } from '../../dto/blocks/block.abstract';
 import { RTENode } from '../../dto/nodes/node.abstract';
 import { RTERange } from '../../dto/range';
 import { RTESelectionState } from '../../dto/selection-state';
+import { AutoRunWhenReRenderTaskQueueSlimmer } from '../../../../helpers/slimmers/auto-run-when-re-render-task-queue-slimmer.abstract';
 declare type SelectionStateType = {
   startNode: Node | RTENode;
   endNode: Node | RTENode;
@@ -13,7 +13,7 @@ declare type SelectionStateType = {
 /**
  * The text selection controller
  */
-export declare class SelectionController extends VegaSlimmer {
+export declare class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
   static readonly SELECTION_CHANGE_DEBOUNCE_TIME: number;
   vegaRichTextEditorRenderer: VegaRichTextEditor['vegaRichTextEditorRenderer'];
   selectionMap: VegaRichTextEditor['selectionMap'];
@@ -23,8 +23,8 @@ export declare class SelectionController extends VegaSlimmer {
   protected readonly valueController: VegaRichTextEditor['valueController'];
   protected insertCompositionTextController: VegaRichTextEditor['insertCompositionTextController'];
   protected readonly historyController: VegaRichTextEditor['historyController'];
+  protected internalCodeBlockSelectionController: VegaRichTextEditor['internalCodeBlockSelectionController'];
   private currentRange;
-  private updateCaretPositionTaskQueue;
   private handleSelectionWithDebounce;
   private pendingRestoreSelectionNodes;
   private selectionRangeChangeObserver;
@@ -41,14 +41,11 @@ export declare class SelectionController extends VegaSlimmer {
    * Component lifecycle - [componentDidLoad]{@link VegaRichTextEditor.componentDidLoad}
    */
   componentDidLoad(): void;
+  constructor();
   /**
    * Watches the internal value of the editor
    */
   watchValueUpdate(): void;
-  /**
-   * Update the caret position after the component re-render
-   */
-  updateCaretPosition(): Promise<void>;
   /**
    * Get the current RTE selection range
    *
@@ -89,6 +86,16 @@ export declare class SelectionController extends VegaSlimmer {
    * @param {Range} range - The range to set
    */
   setSelectionRange(range: Range): void;
+  /**
+   * The method invoke after the component re-render.
+   */
+  protected doTask: () => Promise<void>;
+  /**
+   * Get the rich text content selected range
+   *
+   * @returns {Selection} A [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) object
+   */
+  protected getSelection(): Selection;
   /**
    * Save the current selection range detail
    */
@@ -97,29 +104,15 @@ export declare class SelectionController extends VegaSlimmer {
    * Restore the selection to the current selected nodes
    */
   private restoreSelection;
-  /**
-   * Get the rich text content selected range
-   *
-   * @returns {Selection} A [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) object
-   */
-  private getSelection;
   /**
    * Get selected rich text
    */
   private handleSelectionChange;
   /**
-   * Clear the selection map
+   * Clear the selection map.
+   * The code node don't need clear here, because the code node will manager the selection state itself. `code-node-renderer.tsx#handleSelectionChange`
    */
   private clearSelectionMap;
-  /**
-   * Sets the next selection state with specified start and end nodes, offsets, and a timestamp.
-   *
-   * Example:
-   * Before insert text start offset is 0, the new start offset should update to 1
-   * Before delete text start offset is 1, the new start offset should update to 0
-   *
-   */
-  private createUpdateSelectionRangeTask;
   /**
    * Check if the selection range change is acceptable
    *

package/dist/types/components/vega-rich-text-editor/slimmers/controllers/user-input-controller.d.ts

@@ -34,10 +34,6 @@ export declare class UserInputController extends VegaSlimmer {
    * @returns {Nullable<HTMLDivElement>} A reference to an HTMLDivElement element that is editable.
    */
   private getEditableElementRef;
-  /**
-   * Notifies a change manager with the host and value details and logs the current value.
-   */
-  private notifyComponentFlushValue;
   /**
    * Prevents the default behavior of a drag event.
    *
@@ -48,4 +44,10 @@ export declare class UserInputController extends VegaSlimmer {
    * Initializes the value to an empty array if it is currently empty.
    */
   private initValueIfEmpty;
+  /**
+   * The code block placeholder element is non-editable, so we need to check if the focus node is a code block placeholder element.
+   *
+   * @returns {boolean} - Returns true if the focus node is a code block placeholder element, otherwise false.
+   */
+  private isFocusNodeNonEditable;
 }

package/dist/types/components/vega-rich-text-editor/slimmers/renderers/toolbar-renderer.d.ts

@@ -16,6 +16,7 @@ export declare class ToolbarRenderer extends VegaSlimmer {
   lessIndentToolbarButtonSlimmer: VegaRichTextEditor['lessIndentToolbarButtonSlimmer'];
   codeToolbarButtonSlimmer: VegaRichTextEditor['codeToolbarButtonSlimmer'];
   linkToolbarButtonSlimmer: VegaRichTextEditor['linkToolbarButtonSlimmer'];
+  codeBlockToolbarButtonSlimmer: VegaRichTextEditor['codeBlockToolbarButtonSlimmer'];
   render(): HTMLElement;
   private getToolbarBtnRenderer;
 }

package/dist/types/components/vega-rich-text-editor/slimmers/renderers/tools/code-block-toolbar-button-slimmer.d.ts

@@ -0,0 +1,22 @@
+import { ToolbarButtonSlimmer } from './toolbar-button-slimmer.abstract';
+import { VegaRichTextEditor } from '../../../vega-rich-text-editor';
+/**
+ * The code block toolbar button slimmer.
+ */
+export declare class CodeBlockToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  selectionController: VegaRichTextEditor['selectionController'];
+  valueController: VegaRichTextEditor['valueController'];
+  value: VegaRichTextEditor['value'];
+  constructor();
+  /**
+   * The selected blocks should convert to a code block.
+   */
+  protected onClick(): void;
+  /**
+   * The button will be selected if the selected blocks all code block.
+   *
+   * @returns {boolean} - The code block should selected or not.
+   */
+  protected isSelected(): boolean;
+  protected isDisabled(): boolean;
+}

package/dist/types/components/vega-rich-text-editor/slimmers/renderers/tools/horizontal-alignment/horizontal-alignment-toolbar-button-slimmer.d.ts

@@ -16,4 +16,5 @@ export declare class HorizontalAlignmentToolbarButtonSlimmer extends ToolbarButt
   protected renderBtnWrapper(renderBtn: (toolbarInternalButton: ToolbarInternalButtonConfig) => HTMLElement): HTMLElement;
   protected renderContent(): HTMLElement;
   protected isSelected(): boolean;
+  protected isDisabled(): boolean;
 }

package/dist/types/components/vega-rich-text-editor/test/dto/action-handle-strategies/code-block-strategy-registry.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/vega-rich-text-editor/test/dto/blocks/code-block.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/vega-rich-text-editor/test/element-to-dto-strategy/jira-code-to-rte-code-block-strategy.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/vega-rich-text-editor/test/element-to-dto-strategy/vega-code-block-to-rte-code-block-strategy.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/vega-rich-text-editor/vega-rich-text-editor.d.ts

@@ -39,6 +39,8 @@ import { InsertCompositionTextController } from './slimmers/controllers/insert-c
 import { DeleteSelectedNodesController } from './slimmers/controllers/delete-selected-nodes-controller';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 import { HistoryController } from './slimmers/controllers/history-controller';
+import { CodeBlockToolbarButtonSlimmer } from './slimmers/renderers/tools/code-block-toolbar-button-slimmer';
+import { InternalCodeBlockSelectionController } from './slimmers/controllers/internal-code-block-selection-controller';
 /**
  * @vegaVersion 2.34.0
  */
@@ -68,6 +70,7 @@ export declare class VegaRichTextEditor {
   protected readonly lessIndentToolbarButtonSlimmer: LessIndentToolbarButtonSlimmer;
   protected readonly bulletsNumbersToolbarButtonSlimmer: BulletsNumbersToolbarButtonSlimmer;
   protected readonly horizontalAlignmentToolbarButtonSlimmer: HorizontalAlignmentToolbarButtonSlimmer;
+  protected readonly codeBlockToolbarButtonSlimmer: CodeBlockToolbarButtonSlimmer;
   protected readonly placeholderNotifySlimmer: SubStateNotifySlimmerBase;
   protected readonly disabledNotifySlimmer: SubStateNotifySlimmerBase;
   protected readonly richTextContentController: RichTextContentController;
@@ -79,6 +82,7 @@ export declare class VegaRichTextEditor {
   protected readonly textNodeColorController: TextNodeColorController;
   protected readonly deleteSelectedNodesController: DeleteSelectedNodesController;
   protected readonly historyController: HistoryController;
+  protected readonly internalCodeBlockSelectionController: InternalCodeBlockSelectionController;
   host: HTMLVegaRichTextEditorElement;
   richTextContentEditable: boolean;
   watchRichTextContentEditable(): void;

package/dist/types/components/vega-table/interface.d.ts

@@ -230,3 +230,6 @@ export declare type VegaTableRowSelectAllEventDetail = {
    */
   changedRows: VegaTableDataSourceItem[];
 };
+export declare type TableHeadCellObserverPayload = {
+  host: HTMLVegaTableHeadCellElement;
+};

package/dist/types/components/vega-table/vega-table-head-cell/slimmers/controllers/vega-table-head-cell-sort-config-controller.d.ts

@@ -0,0 +1,42 @@
+import { VegaSlimmer } from '../../../../../../../vega-slimmer/src/decorators/vega-slimmer';
+import { VegaTableHeadCell } from '../../vega-table-head-cell';
+/**
+ * Controller for the table head cell sort configuration
+ */
+export declare class VegaTableHeadCellSortConfigController extends VegaSlimmer {
+  host: VegaTableHeadCell['host'];
+  sortOrder: VegaTableHeadCell['sortOrder'];
+  sortConfig: VegaTableHeadCell['sortConfig'];
+  private observer;
+  private hostTable;
+  private isTemplateRenderMode;
+  /**
+   * Component lifecycle - [disconnectedCallback]
+   */
+  disconnectedCallback(): void;
+  /**
+   * Component lifecycle - [componentWillLoad]
+   */
+  componentWillLoad(): void;
+  /**
+   * Notify other table head cells on click sort
+   */
+  notifyOtherHeadCellOnClickSort(): void;
+  /**
+   * The function isAcceptableObserver checks if the input host matches a specified vega table head cell.
+   *
+   * @param {TableHeadCellObserverPayload} input - The `input` parameter is of type `TableHeadCellObserverPayload`
+   * @returns {boolean} The `isAcceptableObserver` function is returns `true`.
+   */
+  private isAcceptableObserver;
+  /**
+   * The function checks if table is in template render mode and if sortConfig is of type single
+   */
+  private observerListener;
+  /**
+   * Check whether render mode is template render
+   *
+   * @returns {boolean} return true if the mode is template, otherwise false
+   */
+  private checkIsTemplateRenderMode;
+}

package/dist/types/components/vega-table/vega-table-head-cell/vega-table-head-cell.d.ts

@@ -8,6 +8,7 @@ import { BreakpointsTokenType } from '../../../types/design-token.type';
 import { PageResizeObserverSlimmer } from '../../../helpers/slimmers/page-resize-observer-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
 import { SortIconRenderer } from './slimmers/renderers/sort-icon-renderer';
+import { VegaTableHeadCellSortConfigController } from './slimmers/controllers/vega-table-head-cell-sort-config-controller';
 /**
  * @vegaVersion 1.44.0
  */
@@ -18,6 +19,7 @@ export declare class VegaTableHeadCell {
   protected readonly pageResizeObserverSlimmer: PageResizeObserverSlimmer;
   protected vegaComponentUsageRuntimeMetricsSlimmer: VegaComponentUsageRuntimeMetricsSlimmer<HTMLVegaTableHeadCellElement>;
   protected sortIconRenderer: SortIconRenderer;
+  protected readonly vegaTableHeadCellSortConfigController: VegaTableHeadCellSortConfigController;
   host: HTMLVegaTableHeadCellElement;
   currentBreakpoint: BreakpointsTokenType;
   /**

package/dist/types/components.d.ts

@@ -23,6 +23,7 @@ import { Nullable, TimeFormat } from "./types/general";
 import { CalendarEvent } from "./helpers/calendar/calendar-event";
 import { FormFieldValidationRule } from "./helpers/validator/rules/form-field-validation-rule";
 import { VegaChipIconAlign, VegaChipSize, VegaChipType, VegaChipVariant } from "./components/vega-chip/types";
+import { VegaCodeBlockValue } from "./components/vega-code-block/types";
 import { VegaComboBoxSize, VegaDropdownPropsForComboBox } from "./components/vega-combo-box/types";
 import { DatePickerModeType, DatePickerValueType, DropdownConfigForDatePicker } from "./components/vega-date-picker/types";
 import { VegaDialogAction, VegaDialogActionButtonProps } from "./components/vega-dialog/types";
@@ -35,7 +36,7 @@ import { VegaFontAs } from "./components/vega-font/types";
 import { FormControlOption, FormValidateResult } from "./components/vega-form/types";
 import { EvaluateResultBase } from "./helpers/validator/rules/validation-rule";
 import { VegaFile, VegaFileOptional, VegaImageUploaderStatus } from "./components/vega-image-uploader/types";
-import { InputValueUpdateTriggeredBy, MaskConfigType } from "./components/vega-input/types";
+import { InputType, InputValueUpdateTriggeredBy, MaskConfigType } from "./components/vega-input/types";
 import { FormFieldValidationRule as FormFieldValidationRule1 } from "./types/components.type";
 import { VegaCountryType } from "./components/vega-input-phone-number/types";
 import { InputRangeStackType, InputRangeValueType } from "./components/vega-input-range/types";
@@ -901,6 +902,38 @@ export namespace Components {
          */
         "variant": VegaChipVariant;
     }
+    interface VegaCodeBlock {
+        /**
+          * Specifies whether the code block editor is disabled.
+          * @vegaVersion 2.50.0
+         */
+        "disabled": boolean;
+        /**
+          * Invoke this method to focus the current code block.
+          * @vegaVersion 2.50.0
+         */
+        "doFocus": () => Promise<void>;
+        /**
+          * Specifies whether the code block editor is in read-only mode.
+          * @vegaVersion 2.50.0
+         */
+        "readOnly": boolean;
+        /**
+          * Specifies whether to display the copy button in the code block.
+          * @vegaVersion 2.50.0
+         */
+        "showCopyButton": boolean;
+        /**
+          * Specifies whether to display the code line number in the code block.
+          * @vegaVersion 2.50.0
+         */
+        "showLineNumber": boolean;
+        /**
+          * Specifies the content or value to be displayed in the code block.
+          * @vegaVersion 2.50.0
+         */
+        "value": VegaCodeBlockValue;
+    }
     interface VegaColorPicker {
         /**
           * Determines whether automatic validation should be implemented  for the color picker when a color is selected.
@@ -1927,7 +1960,7 @@ export namespace Components {
           * Defines the specific type or category of the input field.  It specifies the intended format or purpose of the    data to be entered by the user.
           * @vegaVersion 1.0.9
          */
-        "type": 'text' | 'email' | 'password' | 'number' | 'hidden';
+        "type": InputType;
         /**
           * Defines custom validation rules for the input field.
           * @vegaVersion 1.0.10
@@ -4173,6 +4206,10 @@ export interface VegaChipCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLVegaChipElement;
 }
+export interface VegaCodeBlockCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVegaCodeBlockElement;
+}
 export interface VegaColorPickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLVegaColorPickerElement;
@@ -4490,6 +4527,12 @@ declare global {
         prototype: HTMLVegaChipElement;
         new (): HTMLVegaChipElement;
     };
+    interface HTMLVegaCodeBlockElement extends Components.VegaCodeBlock, HTMLStencilElement {
+    }
+    var HTMLVegaCodeBlockElement: {
+        prototype: HTMLVegaCodeBlockElement;
+        new (): HTMLVegaCodeBlockElement;
+    };
     interface HTMLVegaColorPickerElement extends Components.VegaColorPicker, HTMLStencilElement {
     }
     var HTMLVegaColorPickerElement: {
@@ -5023,6 +5066,7 @@ declare global {
         "vega-checkbox": HTMLVegaCheckboxElement;
         "vega-checkbox-group": HTMLVegaCheckboxGroupElement;
         "vega-chip": HTMLVegaChipElement;
+        "vega-code-block": HTMLVegaCodeBlockElement;
         "vega-color-picker": HTMLVegaColorPickerElement;
         "vega-combo-box": HTMLVegaComboBoxElement;
         "vega-counter-badge": HTMLVegaCounterBadgeElement;
@@ -6135,6 +6179,55 @@ declare namespace LocalJSX {
          */
         "variant"?: VegaChipVariant;
     }
+    interface VegaCodeBlock {
+        /**
+          * Specifies whether the code block editor is disabled.
+          * @vegaVersion 2.50.0
+         */
+        "disabled"?: boolean;
+        /**
+          * An event emitter notifying a value change.
+          * @vegaVersion 2.50.0
+          * @eventSemantics namespace:native
+         */
+        "onChange"?: (event: VegaCodeBlockCustomEvent<VegaCodeBlockValue>) => void;
+        /**
+          * An event emitter notifying the deletion of the code block. By default, the element is removed from the page, but this behavior can be prevented.
+          * @vegaVersion 2.50.0
+          * @eventSemantics namespace:native
+         */
+        "onRemove"?: (event: VegaCodeBlockCustomEvent<any>) => void;
+        /**
+          * An event emitter notifying a value change.
+          * @vegaVersion 2.50.0
+         */
+        "onVegaChange"?: (event: VegaCodeBlockCustomEvent<VegaCodeBlockValue>) => void;
+        /**
+          * An event emitter notifying the deletion of the code block. By default, the element is removed from the page, but this behavior can be prevented.
+          * @vegaVersion 2.50.0
+         */
+        "onVegaRemove"?: (event: VegaCodeBlockCustomEvent<any>) => void;
+        /**
+          * Specifies whether the code block editor is in read-only mode.
+          * @vegaVersion 2.50.0
+         */
+        "readOnly"?: boolean;
+        /**
+          * Specifies whether to display the copy button in the code block.
+          * @vegaVersion 2.50.0
+         */
+        "showCopyButton"?: boolean;
+        /**
+          * Specifies whether to display the code line number in the code block.
+          * @vegaVersion 2.50.0
+         */
+        "showLineNumber"?: boolean;
+        /**
+          * Specifies the content or value to be displayed in the code block.
+          * @vegaVersion 2.50.0
+         */
+        "value"?: VegaCodeBlockValue;
+    }
     interface VegaColorPicker {
         /**
           * Determines whether automatic validation should be implemented  for the color picker when a color is selected.
@@ -7389,7 +7482,7 @@ declare namespace LocalJSX {
           * Defines the specific type or category of the input field.  It specifies the intended format or purpose of the    data to be entered by the user.
           * @vegaVersion 1.0.9
          */
-        "type"?: 'text' | 'email' | 'password' | 'number' | 'hidden';
+        "type"?: InputType;
         /**
           * Defines custom validation rules for the input field.
           * @vegaVersion 1.0.10
@@ -10009,6 +10102,7 @@ declare namespace LocalJSX {
         "vega-checkbox": VegaCheckbox;
         "vega-checkbox-group": VegaCheckboxGroup;
         "vega-chip": VegaChip;
+        "vega-code-block": VegaCodeBlock;
         "vega-color-picker": VegaColorPicker;
         "vega-combo-box": VegaComboBox;
         "vega-counter-badge": VegaCounterBadge;
@@ -10122,6 +10216,7 @@ declare module "@stencil/core" {
             "vega-checkbox": LocalJSX.VegaCheckbox & JSXBase.HTMLAttributes<HTMLVegaCheckboxElement>;
             "vega-checkbox-group": LocalJSX.VegaCheckboxGroup & JSXBase.HTMLAttributes<HTMLVegaCheckboxGroupElement>;
             "vega-chip": LocalJSX.VegaChip & JSXBase.HTMLAttributes<HTMLVegaChipElement>;
+            "vega-code-block": LocalJSX.VegaCodeBlock & JSXBase.HTMLAttributes<HTMLVegaCodeBlockElement>;
             "vega-color-picker": LocalJSX.VegaColorPicker & JSXBase.HTMLAttributes<HTMLVegaColorPickerElement>;
             "vega-combo-box": LocalJSX.VegaComboBox & JSXBase.HTMLAttributes<HTMLVegaComboBoxElement>;
             "vega-counter-badge": LocalJSX.VegaCounterBadge & JSXBase.HTMLAttributes<HTMLVegaCounterBadgeElement>;

package/dist/types/helpers/event-manager/event-id/vega-internal-event-id.d.ts

@@ -46,3 +46,5 @@ export declare const VegaInternalPaginationPageSizeChange: VegaInternalEventID;
 export declare const VegaInternalPaginationCurrentChange: VegaInternalEventID;
 export declare const VegaInternalPasteEvent: VegaInternalEventID;
 export declare const VegaInternalNestEAHierarchyTreeChange: VegaInternalEventID;
+export declare const VegaInternalTableHeadCellSortEvent: VegaInternalEventID;
+export declare const VegaInternalCodeBlockSelectionChange: VegaInternalEventID;

package/dist/types/helpers/slimmers/auto-run-when-re-render-task-queue-slimmer.abstract.d.ts

@@ -0,0 +1,20 @@
+import { VegaSlimmer } from '../../vega-slimmer/vega-slimmer-core';
+import { SynchronizeTaskQueue } from '../queue/synchronize-task-queue';
+/**
+ * The current slimmer contains a task queue and will call the task after component re-render.
+ */
+export declare abstract class AutoRunWhenReRenderTaskQueueSlimmer extends VegaSlimmer {
+  protected autoRunTaskQueue: SynchronizeTaskQueue;
+  constructor(maxCount?: number);
+  /**
+   * Update the caret position after the component re-render
+   */
+  protected executeTaskHook(): Promise<void>;
+  /**
+   * Push the update task to a queue.
+   *
+   * @param {boolean} [immediatelyRun] - Should the task run immediately. default is false
+   */
+  protected enqueueTheTaskIntoQueue(immediatelyRun?: boolean): void;
+  protected abstract doTask(): Promise<void>;
+}

package/dist/types/helpers/slimmers/test/auto-run-when-re-render-task-queue-slimmer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/helpers/translation/interface.d.ts

@@ -131,4 +131,9 @@ export type StaticTranslationKey =
 	| 'Heading 2'
 	| 'Heading 3'
 	| 'Paragraph'
-	| 'Reset Selection';
+	| 'Reset Selection'
+	| 'Select Language'
+	| 'Delete Code'
+	| 'Copy Code'
+	| 'Code Block'
+	| 'Copied';

package/dist/types/polyfill/shadow-selection/shadow-selection-polyfill.d.ts

@@ -1,4 +1,30 @@
 import { Nullable } from '../../types/general';
+/**
+ * Simulate a selection for browsers that don't support shadow selection.
+ * Cypress test case added in https://github.com/heartlandpayments/Vega/pull/1561/files#diff-83bdbaaf47fc156ab878099aa1f21b0e8ab92abe5852521299f1fb6efab001c2R300
+ */
+export declare class ShadowSelection {
+  rangeCount: number;
+  private ranges;
+  constructor();
+  /**
+   * Returns a Range object at a specified index.
+   *
+   * @param {number} index - A specified index.
+   * @returns {Range} - A Range object.
+   */
+  getRangeAt(index: number): Range;
+  /**
+   * Adds a Range to ranges array.
+   *
+   * @param {Range} range - The range of selection.
+   */
+  addRange(range: Range): void;
+  /**
+   * Clears all ranges.
+   */
+  removeAllRanges(): void;
+}
 /**
  * Due to the ShadowRoot.getSelection is not a standard API, we add this polyfill to achieve this function.
  *