@globalpayments/vega 2.49.1 → 2.51.0

package/dist/types/components/vega-code-block/slimmers/controllers/code-block-range.d.ts

@@ -0,0 +1,64 @@
+import { Nullable } from '../../../../types/general';
+import { CodeNodeType } from '../../types';
+/**
+ * The code block component range class.
+ */
+export declare class CodeBlockRange {
+  contentOffset: number;
+  selectedText: string;
+  private codeContainerRef;
+  /**
+   * Initial the code block range.
+   *
+   * @param {HTMLElement} codeContainerRef - The code content container ref.
+   */
+  constructor(codeContainerRef: HTMLElement);
+  /**
+   * Update the code block range when the focus node changed or focus node content changed.
+   *
+   * @param {Node} startContainer - The focus node instance.
+   * @param {number} startOffset - The focus offset.
+   * @param {CodeNodeType[]} currentNodes - The current code node array.
+   * @param {string} [selectedText] - The range selected text.
+   * @returns {CodeBlockRange} - The new code block range instance.
+   */
+  updateRange(startContainer: Node, startOffset: number, currentNodes: CodeNodeType[], selectedText?: string): CodeBlockRange;
+  /**
+   * Update the cursor position when insert text or delete text...
+   *
+   * @param {number} newContentOffset - New value for content offset.
+   * @returns {number} - The new content offset.
+   */
+  updateContentOffset(newContentOffset: number): number;
+  /**
+   * Create a native range from the current code block range.
+   *
+   * @param {CodeNodeType[]} nextCodeNodes - The code block node array.
+   * @returns {Nullable<Range>} - The range instance.
+   */
+  createNativeRange(nextCodeNodes: CodeNodeType[]): Nullable<Range>;
+  /**
+   * Calculate the cursor position.
+   *
+   * @param {Node} startContainer - The cursor node.
+   * @param {number} startOffset - The cursor offset.
+   * @param {CodeNodeType[]} currentNodes - The code block node array.
+   * @returns {number} - A number value.
+   */
+  private getContentOffset;
+  /**
+   * Get the next focus node of the code block node array.
+   *
+   * @param {CodeNodeType[]} codeNodes - The current code block array.
+   * @param {number} contentOffset - The cursor position.
+   * @returns {FocusNodeStateType} - The object contains next focus node index and offset.
+   */
+  private getFocusNodeState;
+  /**
+   * Get all code content from the code block node array.
+   *
+   * @param {CodeNodeType[]} codeNodes - The code block node array.
+   * @returns {string} - The code content.
+   */
+  private getCodeContent;
+}

package/dist/types/components/vega-code-block/slimmers/controllers/code-highlight-parser.abstract.d.ts

@@ -0,0 +1,47 @@
+import { VegaSlimmer } from '../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCodeBlock } from '../../vega-code-block';
+import { CodeNodeType } from '../../types';
+import { Nullable } from '../../../../types/general';
+/**
+ * Processing the code content into different types of nodes.
+ */
+export declare abstract class CodeHighlightParser extends VegaSlimmer {
+  protected value: VegaCodeBlock['value'];
+  /**
+   * Split the HTML tag to avoid the content render to a html element.
+   *
+   * @example <div> -> ['<', 'div', '>']
+   * @param {string} text - The code content.
+   * @returns {string[]} - The code content array.
+   */
+  protected splitTag(text: string): string[];
+  /**
+   * Check the current language is a preset language and the language is not plain text.
+   *
+   * @param {Nullable<string>} language - The input language.
+   * @returns {boolean} - The boolean result.
+   */
+  protected isHighlightLanguage(language: Nullable<string>): boolean;
+  /**
+   * Mark the line number class for the first node of each line.
+   *
+   * @param {CodeNodeType[]} codeNodes - The code nodes array.
+   * @returns {CodeNodeType[]} - The code node array with line number tag.
+   */
+  protected markLineNumberNodes(codeNodes: CodeNodeType[]): CodeNodeType[];
+  /**
+   * Check the text has special character.
+   *
+   * @param {string} text - The test text.
+   * @returns {boolean} - Return true is the text has <, > , /.
+   */
+  private hasSpecialCharacter;
+  /**
+   * Check the current parser should handle or not.
+   */
+  abstract canParse(): boolean;
+  /**
+   * The core function to get the code node array.
+   */
+  abstract parse(): CodeNodeType[];
+}

package/dist/types/components/vega-code-block/slimmers/controllers/default-code-highlight-parse-controller.d.ts

@@ -0,0 +1,19 @@
+import { CodeNodeType } from '../../types';
+import { CodeHighlightParser } from './code-highlight-parser.abstract';
+/**
+ * Plain text parse logic.
+ */
+export declare class DefaultCodeHighlightParseController extends CodeHighlightParser {
+  /**
+   * Default parser will handle if others not catch.
+   *
+   * @returns {boolean} True value.
+   */
+  canParse(): boolean;
+  /**
+   * The default parse will split the html tag and create the line number.
+   *
+   * @returns {CodeNodeType[]} - The code node array.
+   */
+  parse(): CodeNodeType[];
+}

package/dist/types/components/vega-code-block/slimmers/controllers/insert-composition-text-controller.d.ts

@@ -0,0 +1,50 @@
+import { VegaSlimmer } from '../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCodeBlock } from '../../vega-code-block';
+/**
+ * The class used to control the code block insert composition text action.
+ */
+export declare class InsertCompositionTextController extends VegaSlimmer {
+  /**
+   * The class used to control the code block modify content action.
+   */
+  protected selectionController: VegaCodeBlock['selectionController'];
+  protected contentRenderer: VegaCodeBlock['contentRenderer'];
+  protected valueController: VegaCodeBlock['valueController'];
+  protected contentParseController: VegaCodeBlock['contentParseController'];
+  protected value: VegaCodeBlock['value'];
+  private insertCompositionTextEndFlag;
+  /**
+   * The method is to get the composition text insert end or not.
+   *
+   * @returns {boolean} The false is mean that insert composition text process is end.
+   */
+  isComposing(): boolean;
+  /**
+   * Stop `beforeinput` and `input` event bubbles to parent element.
+   */
+  registerInputEvent(): void;
+  /**
+   * Remove the event listener.
+   */
+  unregisterEventListener(): void;
+  /**
+   * Stop the event bubbles.
+   *
+   * @param {Event} e - The event object.
+   */
+  private stopEventPropagation;
+  /**
+   * An event handler function that is triggered when the composition of text input starts. In this case,
+   *  it sets the `insertCompositionTextEndFlag` property of the `UserInputController` class to `false`.
+   *
+   * @param {CompositionEvent} e The composition event instance
+   */
+  private handleCompositionStart;
+  /**
+   * An event handler function that is triggered when the composition of text input ends. In this case,
+   *  it sets the `insertCompositionTextEndFlag` property of the `UserInputController` class to `true`.
+   *
+   * @param {CompositionEvent} e The composition event instance
+   */
+  private handleCompositionEnd;
+}

package/dist/types/components/vega-code-block/slimmers/controllers/prism-code-highlight-parse-controller.d.ts

@@ -0,0 +1,43 @@
+import { CodeNodeType } from '../../types';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-tsx';
+import { CodeHighlightParser } from './code-highlight-parser.abstract';
+/**
+ * Use the plugin Prism to highlight the code content.
+ */
+export declare class PrismCodeHighlightParseController extends CodeHighlightParser {
+  /**
+   * Return true when the content and language are defined.
+   *
+   * @returns {boolean} - Boolean value.
+   */
+  canParse(): boolean;
+  /**
+   * Use plugin to parse the string code into an array of nodes with different keywords.
+   *
+   * @returns {CodeNodeType[]} - The object contains content and highlight type.
+   */
+  parse(): CodeNodeType[];
+  /**
+   * Parse the plugin parse result to a usable array.
+   *
+   * @param {(string | CodeHighlightToken)[]} tokens - The plugin parse result.
+   * @param {string} [type] - The keywords. Such as variable, function-name, attr-name...
+   * @returns {CodeNodeType[]} - The code node array.
+   */
+  private getHighlightNodes;
+  /**
+   * Create a CodeNodeType type object by the code content and highlight type.
+   *
+   * @param {string} text - The code content.
+   * @param {string} highlightType - The highlight type.
+   * @returns {CodeNodeType} - The code node object.
+   */
+  private createCodeNode;
+}

package/dist/types/components/vega-code-block/slimmers/controllers/vega-code-block-content-parse-controller.d.ts

@@ -0,0 +1,23 @@
+import { VegaSlimmer } from '../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCodeBlock } from '../../vega-code-block';
+import { CodeNodeType } from '../../types';
+/**
+ * Parse the code content to different tokens.
+ */
+export declare class CodeContentParseController extends VegaSlimmer {
+  protected prismCodeHighlightParser: VegaCodeBlock['prismCodeHighlightParser'];
+  protected defaultCodeHighlightParser: VegaCodeBlock['defaultCodeHighlightParser'];
+  private codeNodes;
+  /**
+   * Get the current rendering code node array.
+   *
+   * @returns {CodeNodeType[]} - The code node array.
+   */
+  getCurrentCodeNodes(): CodeNodeType[];
+  /**
+   * Split the code content to code node array. The default parse used if the language is not defined.
+   *
+   * @returns {CodeNodeType[]} - The code node array.
+   */
+  parseCode(): CodeNodeType[];
+}

package/dist/types/components/vega-code-block/slimmers/controllers/vega-code-block-focus-controller.d.ts

@@ -0,0 +1,21 @@
+import { VegaSlimmer } from '../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCodeBlock } from '../../vega-code-block';
+/**
+ * Control the component focus state.
+ */
+export declare class VegaCodeBlockFocusController extends VegaSlimmer {
+  protected host: VegaCodeBlock['host'];
+  protected value: VegaCodeBlock['value'];
+  protected readOnly: VegaCodeBlock['readOnly'];
+  protected disabled: VegaCodeBlock['disabled'];
+  protected contentRenderer: VegaCodeBlock['contentRenderer'];
+  protected selectionController: VegaCodeBlock['selectionController'];
+  /**
+   * Focus the code block and update the selection range offset to end.
+   */
+  protected focusAndUpdateSelection(): void;
+  /**
+   * Remove the focus class when component disabled or readonly.
+   */
+  protected removeFocusAfterDisabled(): void;
+}

package/dist/types/components/vega-code-block/slimmers/controllers/vega-code-block-input-controller.d.ts

@@ -0,0 +1,92 @@
+import { VegaSlimmer } from '../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCodeBlock } from '../../vega-code-block';
+/**
+ * The class used to control the code block modify content action.
+ */
+export declare class CodeBlockInputController extends VegaSlimmer {
+  protected selectionController: VegaCodeBlock['selectionController'];
+  protected contentRenderer: VegaCodeBlock['contentRenderer'];
+  protected valueController: VegaCodeBlock['valueController'];
+  protected contentParseController: VegaCodeBlock['contentParseController'];
+  protected insertCompositionTextController: VegaCodeBlock['insertCompositionTextController'];
+  protected value: VegaCodeBlock['value'];
+  /**
+   * Stop `beforeinput` and `input` event bubbles to parent element.
+   */
+  registerInputEvent(): void;
+  /**
+   * Remove the event listener.
+   */
+  unregisterEventListener(): void;
+  /**
+   * Stop the input event bubbles and update the code value.
+   *
+   * @param {InputEvent} e - The input event object.
+   */
+  private handleInputEvent;
+  /**
+   * Stop the event bubbles.
+   *
+   * @param {Event} e - The event object.
+   */
+  private stopEventPropagation;
+  /**
+   * Prevent paste the file into code block. Prevent to delete the last space.
+   *
+   * @param {InputEvent} e - The input event object.
+   */
+  private handleBeforeInput;
+  /**
+   * Modify the component code content when user press delete key.
+   *
+   * @param {InputEvent} e - The input event object.
+   */
+  private handleDeleteAction;
+  /**
+   * Delete the selected text manually.
+   *
+   * @param {string} oldValue - The old value.
+   * @param {number} contentStartOffset - The start index.
+   * @param {number} length - The selected text length.
+   * @returns {string} - The content after delete.
+   */
+  private deleteSelectedText;
+  /**
+   * Update the code block range base on input data.
+   *
+   * @param {InputEvent} e - The input event object.
+   */
+  private updateCodeBlockRange;
+  /**
+   * Calculates the length of the inserted data based on the input event type.
+   *
+   * @param {InputEvent} e - The input event object.
+   * @returns {number} - The length of the inserted data.
+   */
+  private getInsertDataLength;
+  /**
+   * Get the paste content text length.
+   *
+   * @param {InputEvent} e - The input event object.
+   * @returns {number} - The text length.
+   */
+  private getPasteContentLength;
+  /**
+   * Update the code content after user modify action.
+   */
+  private updateCodeContent;
+  /**
+   * Collect the code nodes content from the code nodes array.
+   *
+   * @param {CodeNodeType[]} codeNodes - The code nodes array.
+   * @returns {string} - The content of code nodes.
+   */
+  private getCodeNodesContent;
+  /**
+   * Check if the new content update by insert line break in low version Firefox.
+   *
+   * @param {string} newText - The new text content.
+   * @returns {boolean} - Boolean value.
+   */
+  private isInsertLineBreakInLowVersionFirefox;
+}

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

@@ -0,0 +1,63 @@
+import { VegaCodeBlock } from '../../vega-code-block';
+import { Nullable } from '../../../../types/general';
+import { AutoRunWhenReRenderTaskQueueSlimmer } from '../../../../helpers/slimmers/auto-run-when-re-render-task-queue-slimmer.abstract';
+import { CodeBlockRange } from './code-block-range';
+/**
+ * The class used to control the code block input cursor.
+ */
+export declare class VegaCodeBlockSelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
+  static readonly SELECTION_CHANGE_DEBOUNCE_TIME: number;
+  protected host: VegaCodeBlock['host'];
+  protected contentRenderer: VegaCodeBlock['contentRenderer'];
+  protected contentParseController: VegaCodeBlock['contentParseController'];
+  protected insertCompositionTextController: VegaCodeBlock['insertCompositionTextController'];
+  private codeBlockRange;
+  private handleSelectionWithDebounce;
+  constructor();
+  /**
+   * Get current range instance.
+   *
+   * @returns {Nullable<CodeBlockRange>} - The range instance or null.
+   */
+  getCurrentRange(): Nullable<CodeBlockRange>;
+  /**
+   * Update the text content offset, push the update native range task to a queue.
+   *
+   * @param {number} contentOffset - The next content offset.
+   * @param {boolean} [immediatelyRun] - Run the task immediately or not.
+   */
+  setNextCodeBlockRange(contentOffset: number, immediatelyRun?: boolean): void;
+  /**
+   * Component lifecycle
+   */
+  protected addSelectionChangeEventListener(): void;
+  /**
+   * Component lifecycle
+   */
+  protected removeSelectionChangeEventListener(): void;
+  /**
+   * Get the code block selected range
+   *
+   * @returns {Selection} A [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) object
+   */
+  protected getSelection(): Selection;
+  /**
+   * The method invoke after the component re-render.
+   */
+  protected doTask: () => Promise<void>;
+  /**
+   * Notify the code content selection change event.
+   */
+  private handleSelectionChange;
+  /**
+   * Sync the code block range to make sure the code block range content offset is up to date after user click or selected text.
+   */
+  private syncCodeRangeByNativeRange;
+  /**
+   * This method is used to determine if the code block is currently focused or active.
+   * In firefox and safari, the selection change event will trigger when the code block is not active, because the shadow selection polyfill will always return the selection of the code block.
+   *
+   * @returns {boolean} - Returns true if the code block is active, otherwise false.
+   */
+  private isCodeBlockActive;
+}

package/dist/types/components/vega-code-block/slimmers/controllers/vega-code-block-value-controller.d.ts

@@ -0,0 +1,21 @@
+import { VegaSlimmer } from '../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCodeBlock } from '../../vega-code-block';
+import { VegaCodeBlockValue } from '../../types';
+/**
+ * The component value controller.
+ */
+export declare class VegaCodeBlockValueController extends VegaSlimmer {
+  protected value: VegaCodeBlock['value'];
+  protected changeEventEmitter: VegaCodeBlock['changeEventEmitter'];
+  /**
+   * Update the component value if code content or code language update.
+   *
+   * @param {string} code - The new code content.
+   * @param {string} language - The new code language.
+   */
+  updateValue(code: string, language: VegaCodeBlockValue['language']): void;
+  /**
+   * Set a default value if the value is not defined.
+   */
+  protected initialValue(): void;
+}

package/dist/types/components/vega-code-block/slimmers/renderers/vega-code-block-content-renderer.d.ts

@@ -0,0 +1,55 @@
+import { VegaSlimmer } from '../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCodeBlock } from '../../vega-code-block';
+/**
+ * The code block content renderer class.
+ */
+export declare class VegaCodeBlockContentRenderer extends VegaSlimmer {
+  protected host: VegaCodeBlock['host'];
+  protected readOnly: VegaCodeBlock['readOnly'];
+  protected disabled: VegaCodeBlock['disabled'];
+  protected value: VegaCodeBlock['value'];
+  protected contentParseController: VegaCodeBlock['contentParseController'];
+  private codeContentContainerRef;
+  /**
+   * Get the editable root element.
+   *
+   * @returns {HTMLElement} - The root element.
+   */
+  getCodeContentContainerRef(): HTMLElement;
+  /**
+   * Add focus and blur event listener.
+   */
+  registerEventListener(): void;
+  /**
+   * Remove the event listener.
+   */
+  unregisterEventListener(): void;
+  /**
+   * Render the code content.
+   *
+   * @returns {HTMLElement} - The code element.
+   */
+  render(): HTMLElement;
+  /**
+   * The code input area focus.
+   */
+  private handleFocus;
+  /**
+   * The code input area blur.
+   */
+  private handleBlur;
+  /**
+   * Render the code node the html element.
+   *
+   * @param {CodeNodeType} codeNode - The code node object.
+   * @returns {string} - The html element.
+   */
+  private renderCodeNode;
+  /**
+   * Dynamic calculate line number element width and update the margin and padding variable.
+   *
+   * @param {CodeNodeType[]} codeNodes - The code node array.
+   * @returns {string} - The style content.
+   */
+  private getLineNumberStyleVariable;
+}

package/dist/types/components/vega-code-block/slimmers/renderers/vega-code-block-copy-button-renderer.d.ts

@@ -0,0 +1,23 @@
+import { VegaSlimmer } from '../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCodeBlock } from '../../vega-code-block';
+import { Nullable } from '../../../../types/general';
+export declare class VegaCodeBlockCopyButtonRenderer extends VegaSlimmer {
+  static RESET_TOOLTIP_TIME: number;
+  protected value: VegaCodeBlock['value'];
+  protected readOnly: VegaCodeBlock['readOnly'];
+  protected showCopyButton: VegaCodeBlock['showCopyButton'];
+  protected translationSlimmer: VegaCodeBlock['translationSlimmer'];
+  private updateLabelTimer;
+  /**
+   * Render a copy button.
+   *
+   * @returns {Nullable<HTMLElement>} The button element.
+   */
+  render(): Nullable<HTMLElement>;
+  /**
+   * Copy the code.
+   *
+   * @param {HTMLVegaButtonCircleElement} node - The copy button.
+   */
+  private handleCopyClick;
+}

package/dist/types/components/vega-code-block/slimmers/renderers/vega-code-block-renderer.d.ts

@@ -0,0 +1,50 @@
+import { VegaSlimmer } from '../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCodeBlock } from '../../vega-code-block';
+/**
+ * The code block editor renderer class.
+ */
+export declare class VegaCodeBlockRenderer extends VegaSlimmer {
+  protected readOnly: VegaCodeBlock['readOnly'];
+  protected host: VegaCodeBlock['host'];
+  protected disabled: VegaCodeBlock['disabled'];
+  protected showCopyButton: VegaCodeBlock['showCopyButton'];
+  protected value: VegaCodeBlock['value'];
+  protected contentRenderer: VegaCodeBlock['contentRenderer'];
+  protected valueController: VegaCodeBlock['valueController'];
+  protected removeEventEmitter: VegaCodeBlock['removeEventEmitter'];
+  protected translationSlimmer: VegaCodeBlock['translationSlimmer'];
+  protected copyButtonRenderer: VegaCodeBlock['copyButtonRenderer'];
+  private languageDropdownProps;
+  private languageOptions;
+  private toolbarContainerRef;
+  /**
+   * Get the toolbar container element ref.
+   *
+   * @returns {HTMLDivElement} - The div element.
+   */
+  getToolbarContainerRef(): HTMLDivElement;
+  /**
+   * Render the code block editor toolbar element or copy element.
+   *
+   * @returns {HTMLElement} - The code block operate action button.
+   */
+  render(): HTMLElement;
+  /**
+   * Render a language select and delete button.
+   *
+   * @returns {Nullable<HTMLElement>} The editor toolbar container element.
+   */
+  private renderEditorToolbar;
+  /**
+   * Handle the code language update.
+   *
+   * @param {HTMLVegaInputSelectElement} node - The language select element.
+   */
+  private handleLanguageChange;
+  /**
+   * Handle the code language update.
+   *
+   * @param {HTMLVegaButtonCircleElement} node - The delete button.
+   */
+  private handleDeleteClick;
+}

package/dist/types/components/vega-code-block/test/code-block-range.test.d.ts

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

package/dist/types/components/vega-code-block/types.d.ts

@@ -0,0 +1,19 @@
+export declare type VegaCodeBlockValue = {
+  language?: `${CodeLanguage}`;
+  code: string;
+};
+export declare type CodeNodeType = {
+  text: string;
+  key: string;
+  className?: string;
+  mark?: string;
+};
+export declare enum CodeLanguage {
+  CSS = "css",
+  HTML = "html",
+  JavaScript = "js",
+  JSX = "jsx",
+  'Plain Text' = "plainText",
+  TypeScript = "ts",
+  TSX = "tsx"
+}