@globalpayments/vega 2.50.0 → 2.51.0

package/dist/collection/components/vega-code-block/slimmers/controllers/vega-code-block-input-controller.js

@@ -36,6 +36,7 @@ export class CodeBlockInputController extends VegaSlimmer {
         }
         // Should prevent the paste action if the plain text is empty.
         const htmlContent = e.dataTransfer.getData('text/html');
+        // eslint-disable-next-line no-restricted-globals
         const tempContainer = document.createElement('div');
         tempContainer.innerHTML = htmlContent;
         if (htmlContent && !tempContainer.innerText) {
@@ -44,20 +45,13 @@ export class CodeBlockInputController extends VegaSlimmer {
         }
       }
       else if (inputType === 'deleteContentBackward') {
-        if (!this.value || !this.value.code || this.value.code === ' ') {
+        if (!this.value || !this.value.code || this.value.code === '') {
           e.preventDefault();
-          return;
         }
-        // In low version firefox, the selected text could not delete when press delete key, so we handle the action manually.
-        const range = this.selectionController.getCurrentRange();
-        if (range && range.selectedText.length) {
-          const contentStartOffset = range.contentOffset;
-          const newValue = this.deleteSelectedText(contentStartOffset, range.selectedText.length);
-          e.preventDefault();
-          this.valueController.updateValue(newValue, this.value.language);
-          this.selectionController.setNextCodeBlockRange(contentStartOffset);
-          return;
+        else {
+          this.handleDeleteAction(e);
         }
+        return;
       }
       this.updateCodeBlockRange(e);
     };
@@ -90,15 +84,40 @@ export class CodeBlockInputController extends VegaSlimmer {
   stopEventPropagation(e) {
     e.stopPropagation();
   }
+  /**
+   * Modify the component code content when user press delete key.
+   *
+   * @param {InputEvent} e - The input event object.
+   */
+  handleDeleteAction(e) {
+    const range = this.selectionController.getCurrentRange();
+    if (range) {
+      e.preventDefault();
+      const contentStartOffset = range.contentOffset;
+      const currentNodes = this.contentParseController.getCurrentCodeNodes();
+      let content = this.getCodeNodesContent(currentNodes);
+      let nextOffset = contentStartOffset;
+      // In low version firefox, the selected text could not delete when press delete key, so we handle the action manually.
+      if (range.selectedText.length) {
+        content = this.deleteSelectedText(content, contentStartOffset, range.selectedText.length);
+      }
+      else if (contentStartOffset > 0) {
+        content = content.slice(0, contentStartOffset - 1) + content.slice(contentStartOffset);
+        nextOffset -= 1;
+      }
+      this.valueController.updateValue(content, this.value.language);
+      this.selectionController.setNextCodeBlockRange(nextOffset);
+    }
+  }
   /**
    * 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.
    */
-  deleteSelectedText(contentStartOffset, length) {
-    let oldValue = this.value.code;
+  deleteSelectedText(oldValue, contentStartOffset, length) {
     if (length >= oldValue.length) {
       oldValue = '';
     }
@@ -131,31 +150,13 @@ export class CodeBlockInputController extends VegaSlimmer {
         return data.length; // For insert text, we return the length of the inserted text.
       case 'insertParagraph':
       case 'insertLineBreak':
-        return this.getLineBreakLength();
-      case 'deleteContentBackward':
-        return -1; // For delete backward, we return -1.
+        return 1;
       case 'insertFromPaste':
         return this.getPasteContentLength(e);
       default:
         return 0; // For other input types, we return 0.
     }
   }
-  /**
-   * Get the insert text length when press enter.
-   *
-   * @returns {number} - The text length.
-   */
-  getLineBreakLength() {
-    const range = this.selectionController.getCurrentRange();
-    let length = 1; // For line break, we consider it as a single character.
-    const content = range['getCodeContent'](this.contentParseController.getCurrentCodeNodes());
-    if (content.charAt(range.contentOffset - 1) === '' ||
-      content.charAt(range.contentOffset - 1) === '\n') {
-      // There will add a blank space when wrapping at a boundary or behind a line break, the length should be 2.
-      length++;
-    }
-    return length;
-  }
   /**
    * Get the paste content text length.
    *
@@ -165,6 +166,7 @@ export class CodeBlockInputController extends VegaSlimmer {
   getPasteContentLength(e) {
     const htmlContent = e.dataTransfer.getData('text/html');
     if (htmlContent) {
+      // eslint-disable-next-line no-restricted-globals
       const tempContainer = document.createElement('div');
       tempContainer.innerHTML = htmlContent;
       return tempContainer.innerText.length;
@@ -181,40 +183,32 @@ export class CodeBlockInputController extends VegaSlimmer {
     var _a;
     if (!this.insertCompositionTextController.isComposing()) {
       const codeContentContainerRef = this.contentRenderer.getCodeContentContainerRef();
-      // Remove the unnecessary line break tag before get the code content.
-      this.removeUnnecessaryLineBreak(codeContentContainerRef.querySelector('br'));
-      let newContent = codeContentContainerRef.innerText;
-      if (newContent.endsWith('\n\n')) {
-        newContent = newContent.slice(0, newContent.length - '\n'.length) + ' ';
-      }
-      if (this.isInsertSingleLineBreakAtEnd(newContent)) {
-        newContent = newContent + ' ';
-      }
-      if (newContent.endsWith('\n')) {
-        newContent = newContent.slice(0, newContent.length - '\n'.length);
+      let newText = codeContentContainerRef.innerText;
+      if (this.isInsertLineBreakInLowVersionFirefox(newText)) {
+        newText = newText + '\n';
       }
-      this.valueController.updateValue(newContent, (_a = this.value) === null || _a === void 0 ? void 0 : _a.language);
+      this.valueController.updateValue(newText, (_a = this.value) === null || _a === void 0 ? void 0 : _a.language);
     }
   }
   /**
-   * If remove all content of span element, browser will create a new <br/> element, we need remove the unnecessary element.
-   * In firefox, the new <br/> element will append in span element when insert line break at end of content, and the current element should not remove.
+   * Collect the code nodes content from the code nodes array.
    *
-   * @param {Nullable<HTMLElement>} br - The new create line break element.
+   * @param {CodeNodeType[]} codeNodes - The code nodes array.
+   * @returns {string} - The content of code nodes.
    */
-  removeUnnecessaryLineBreak(br) {
-    if (br && br.parentElement && br.parentElement.tagName !== 'SPAN') {
-      br.remove();
-    }
+  getCodeNodesContent(codeNodes) {
+    return codeNodes.map((codeNode) => codeNode.text).join('');
   }
   /**
-   * In some low versions of firefox, there are only one line break tag when insert line break at end of content. We need check this and add white space to make the line break work properly.
+   * Check if the new content update by insert line break in low version Firefox.
    *
-   * @param {string} newValue - The new code content.
-   * @returns {boolean} - Boolean result.
+   * @param {string} newText - The new text content.
+   * @returns {boolean} - Boolean value.
    */
-  isInsertSingleLineBreakAtEnd(newValue) {
-    if ((!this.value && newValue === ' \n') || (this.value && this.value.code + '\n' === newValue)) {
+  isInsertLineBreakInLowVersionFirefox(newText) {
+    var _a;
+    const oldValue = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.code) || '';
+    if (!oldValue.endsWith('\n') && newText === oldValue + '\n') {
       return true;
     }
     return false;

package/dist/collection/components/vega-code-block/slimmers/controllers/vega-code-block-selection-controller.js

@@ -57,12 +57,14 @@ export class VegaCodeBlockSelectionController extends AutoRunWhenReRenderTaskQue
    */
   addSelectionChangeEventListener() {
     this.codeBlockRange = new CodeBlockRange(this.contentRenderer.getCodeContentContainerRef());
+    // eslint-disable-next-line no-restricted-globals
     document.addEventListener('selectionchange', this.handleSelectionWithDebounce);
   }
   /**
    * Component lifecycle
    */
   removeSelectionChangeEventListener() {
+    // eslint-disable-next-line no-restricted-globals
     document.removeEventListener('selectionchange', this.handleSelectionWithDebounce);
   }
   /**

package/dist/collection/components/vega-code-block/vega-code-block.css

@@ -103,7 +103,7 @@
 
 :host(.focus:not(.disabled, .readonly)) {
   outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
-  outline-offset: 0px;
+  outline-offset: 2px;
 }
 
 :host(.highlight) code {

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-calendar-month-year-dropdown-renderer.js

@@ -24,6 +24,7 @@ export class VegaDatePickerMonthYearDropdownRenderer extends VegaSlimmer {
       month: null,
       year: null,
     };
+    /* eslint-enable no-restricted-globals */
     /**
      * When interacting with open vega-dropdown, prevent it from collapsing since is treated as outside element by litepicker
      *
@@ -85,6 +86,7 @@ export class VegaDatePickerMonthYearDropdownRenderer extends VegaSlimmer {
       this.syncDropdownOptions('month', item, index);
       const selectedOptionValue = this.getSelectedOptionFromSelect(item);
       const value = VegaDatePickerMonthYearDropdownRenderer.monthName[parseInt(selectedOptionValue)];
+      // eslint-disable-next-line no-restricted-globals
       const monthButton = document.createElement('span');
       monthButton.classList.add('dropdown-current-value');
       monthButton.innerText = `${this.translationSlimmer.t(value)}`;
@@ -110,6 +112,7 @@ export class VegaDatePickerMonthYearDropdownRenderer extends VegaSlimmer {
     ui.querySelectorAll('select.month-item-year').forEach((item, index) => {
       this.syncDropdownOptions('year', item, index);
       const value = this.getSelectedOptionFromSelect(item);
+      // eslint-disable-next-line no-restricted-globals
       const yearButton = document.createElement('span');
       yearButton.classList.add('dropdown-current-value');
       yearButton.innerText = `${this.translationSlimmer.t(value)}`;
@@ -250,6 +253,7 @@ export class VegaDatePickerMonthYearDropdownRenderer extends VegaSlimmer {
   removeActiveDropdownClass() {
     Array.from(this.datePicker.ui.querySelectorAll('.dropdown-current-value.active')).forEach((item) => item.classList.remove('active'));
   }
+  /* eslint-disable no-restricted-globals */
   onDropdownShow() {
     document.addEventListener('mouseenter', this.onVegaDropdownContentBoxActivate, true);
     document.addEventListener('click', this.onVegaDropdownContentBoxClick);
@@ -266,6 +270,7 @@ export class VegaDatePickerMonthYearDropdownRenderer extends VegaSlimmer {
   initSetup() {
     const hideLitepicker = this.datePicker.hide.bind(this.datePicker);
     this.datePicker.hide = async () => {
+      // eslint-disable-next-line no-restricted-globals
       const activeElement = document.activeElement;
       if (!this.isMonthsOrYearsDropdownContentBoxOnFocus &&
         (activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) !== 'VEGA-DROPDOWN-CONTENT-BOX') {

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-calendar-renderer.js

@@ -64,8 +64,10 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
       });
     };
     this.renderClearButton = (ui) => {
+      // eslint-disable-next-line no-restricted-globals
       const footerContainer = document.createElement('div');
       footerContainer.className = 'footer-container';
+      // eslint-disable-next-line no-restricted-globals
       const clearButton = document.createElement('vega-button-link');
       clearButton.label = this.translationSlimmer.t('Clear');
       clearButton.addEventListener('click', this.vegaDatePickerCalendarController.handleClear);
@@ -91,7 +93,9 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
     if (this.datePicker === null) {
       this.initDatePicker();
     }
+    // eslint-disable-next-line no-restricted-globals
     this.calendarContainerRef = document.createElement('vega-date-picker-calendar');
+    // eslint-disable-next-line no-restricted-globals
     document.body.append(this.calendarContainerRef);
   }
   /*

package/dist/collection/components/vega-icon/vega-icon.js

@@ -140,12 +140,15 @@ export class VegaIcon {
   appendStyles(iconStyles) {
     var _a;
     if (iconStyles) {
-      const styleElement = (_a = this.host.shadowRoot.querySelector('#fa-icon-styles')) !== null && _a !== void 0 ? _a : document.createElement('style');
+      const styleElement = 
+      // eslint-disable-next-line no-restricted-globals
+      (_a = this.host.shadowRoot.querySelector('#fa-icon-styles')) !== null && _a !== void 0 ? _a : document.createElement('style');
       styleElement.id = 'fa-icon-styles';
       styleElement.innerHTML = iconStyles;
       this.host.shadowRoot.appendChild(styleElement);
     }
   }
+  /* eslint-disable no-restricted-globals */
   /**
    * The below method is e2e-test covered in
    * @see {module:append-fa-icon-styles-to-shadow-dom}

package/dist/collection/components/vega-image-uploader/slimmers/controllers/vega-image-uploader-preview-controller.js

@@ -40,6 +40,7 @@ export class VegaImageUploaderPreviewController extends VegaSlimmer {
      * @returns {HTMLElement} a preview vega modal
      */
     this.generatePreviewModal = (imagePreviewURL) => {
+      // eslint-disable-next-line no-restricted-globals
       const previewModal = document.createElement('vega-modal');
       if (this.value && this.value.name) {
         previewModal.modalTitle = this.value.name;
@@ -50,6 +51,7 @@ export class VegaImageUploaderPreviewController extends VegaSlimmer {
             </div>
         `;
       this.previewModalRef = previewModal;
+      // eslint-disable-next-line no-restricted-globals
       document.body.append(previewModal);
       return previewModal;
     };

package/dist/collection/components/vega-input/slimmers/controllers/vega-input-compact-width-controller.js

@@ -82,6 +82,7 @@ export class VegaInputCompactWidthController extends VegaSlimmer {
    */
   getCalculateTextWidthContainer() {
     if (!this.calculateTextWidthContainer) {
+      // eslint-disable-next-line no-restricted-globals
       const container = document.createElement('div');
       container.classList.add('v-font-field-value');
       container.style.visibility = 'hidden';

package/dist/collection/components/vega-input/vega-input.css

@@ -55,7 +55,7 @@ vega-field-label {
   border-radius: 8px;
 }
 
-.vega-input-container:focus-within {
+.vega-input-container:not(.no-focus):focus-within {
   outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
   outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
@@ -69,11 +69,15 @@ vega-field-label {
   border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
 }
 
-.vega-input-container.error:focus-within {
+.vega-input-container.error:not(.no-focus):focus-within {
   outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
   outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
 }
+.vega-input-container.error .vega-input-clear-icon:focus-within {
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
+}
 
 .vega-input-prefix {
   text-align: center;
@@ -251,6 +255,12 @@ vega-field-label {
   cursor: pointer;
   color: rgba(var(--v-text-secondary, 107, 116, 125, 1));
 }
+.vega-input-clear-icon:focus-within {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+  border-radius: 4px;
+  padding: 2px;
+}
 
 .vega-input-clear-icon.invisible {
   visibility: hidden;

package/dist/collection/components/vega-input/vega-input.js

@@ -276,6 +276,12 @@ export class VegaInput {
     this.isClearIconVisible = () => {
       return !this.disabled && Boolean(this.value);
     };
+    this.onClearInputFocus = () => {
+      this.inputContainerRef.classList.add('no-focus');
+    };
+    this.onClearInputBlur = () => {
+      this.inputContainerRef.classList.remove('no-focus');
+    };
     /**
      * Handles input event and updates the value based on a specified trigger.
      * The below method is e2e-test covered in
@@ -326,6 +332,16 @@ export class VegaInput {
       detail: this.value,
     });
   }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-input-on-type-change}
+   */
+  /* istanbul ignore next */
+  watchTypeChange(newType, oldType) {
+    if (newType === 'number' || oldType === 'number') {
+      this.maskConfigController.setupStringFormatter(this.inputRef);
+    }
+  }
   watchValidationRules() {
     methodPlaceholder();
   }
@@ -397,7 +413,7 @@ export class VegaInput {
     return (h("div", { class: {
         'vega-input-clear-icon': true,
         'invisible': !this.isClearIconVisible(),
-      }, tabIndex: -1, "aria-label": "clear input", role: "button", onClick: this.onClickClearIcon, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      }, tabIndex: !this.disabled ? 0 : -1, "aria-label": "clear input", role: "button", onClick: this.onClickClearIcon, onKeyDown: createEnterKeyHandlerToTriggerClick(), onFocusin: this.onClearInputFocus, onFocusout: this.onClearInputBlur },
       h("vega-icon", { icon: "close" })));
   }
   renderHintDom() {
@@ -520,9 +536,14 @@ export class VegaInput {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'text' | 'email' | 'password' | 'number' | 'hidden'",
+        "original": "InputType",
         "resolved": "\"email\" | \"hidden\" | \"number\" | \"password\" | \"text\"",
-        "references": {}
+        "references": {
+          "InputType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -1152,6 +1173,9 @@ export class VegaInput {
     }, {
       "propName": "value",
       "methodName": "watchValue"
+    }, {
+      "propName": "type",
+      "methodName": "watchTypeChange"
     }, {
       "propName": "validationRules",
       "methodName": "watchValidationRules"

package/dist/collection/components/vega-input-range/slimmers/renderers/vega-input-range-clear-icon-renderer.js

@@ -27,7 +27,7 @@ export class VegaInputRangeClearIconRenderer extends VegaSlimmer {
     return (h("div", { class: {
         'vega-input-range-clear-icon': true,
         'invisible': !this.shouldShowClearIcon(),
-      }, "aria-label": "clear input range", role: "button", tabindex: "-1", onClick: this.clearInputRangeValue, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      }, "aria-label": "clear input range", role: "button", tabindex: !this.disabled ? 0 : -1, onClick: this.clearInputRangeValue, onKeyDown: createEnterKeyHandlerToTriggerClick() },
       h("vega-icon", { icon: "close" })));
   }
   /**

package/dist/collection/components/vega-input-range/vega-input-range.css

@@ -46,6 +46,12 @@
 .vega-input-range-input-container .vega-input-range-clear-icon.invisible {
   visibility: hidden;
 }
+.vega-input-range-input-container .vega-input-range-clear-icon:focus-within {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+  border-radius: 4px;
+  padding: 2px;
+}
 .vega-input-range-input-container vega-input::part(input-container) {
   border-width: 0px;
 }
@@ -103,6 +109,10 @@
 .vega-input-range-container.error .vega-input-range-input-container:hover {
   border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
 }
+.vega-input-range-container.error .vega-input-range-input-container .vega-input-range-clear-icon:focus-within {
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
+}
 .vega-input-range-container.error vega-input::part(input-container):focus-within {
   outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
   outline-offset: 3px;

package/dist/collection/components/vega-loader-wrapper/slimmers/controllers/manage-vega-loader-wrapper-z-index-controller.js

@@ -24,6 +24,7 @@ export class ManageVegaLoaderWrapperZIndexController extends VegaSlimmer {
    * Sets the z-index level for the vega-loader-wrapper based on the target container.
    */
   setIndex() {
+    // eslint-disable-next-line no-restricted-globals
     const containerElement = document.querySelector(this.host.dataset.container);
     if (containerElement) {
       if (containerElement.tagName === 'BODY') {

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-backdrop-controller.js

@@ -31,12 +31,15 @@ export class VegaModalBackdropController extends VegaSlimmer {
   setBackdrop() {
     if (this.backdrop === 'none')
       return;
+    // eslint-disable-next-line no-restricted-globals
     let backdrop = document.querySelector('vega-backdrop.modal-backdrop');
     if (!backdrop) {
+      // eslint-disable-next-line no-restricted-globals
       backdrop = document.createElement('vega-backdrop');
       backdrop.classList.add('modal-backdrop');
       backdrop.color = VegaModalBackdropController.backdropColorMap[this.backdropColor];
       backdrop.visible = true;
+      // eslint-disable-next-line no-restricted-globals
       document.querySelector('body').append(backdrop);
     }
     this.backdropRef = backdrop;

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-open-state-controller.js

@@ -159,9 +159,11 @@ export class VegaModalOpenStateController extends VegaSlimmer {
       return;
     const openedModalStackLength = this.openedModalStackController.length();
     if (this.open && openedModalStackLength === 1) {
+      // eslint-disable-next-line no-restricted-globals
       document.body.classList.add('disable-scroll-in-desktop');
     }
     else if (!this.open && openedModalStackLength === 0) {
+      // eslint-disable-next-line no-restricted-globals
       document.body.classList.remove('disable-scroll-in-desktop');
     }
   }

package/dist/collection/components/vega-modal/slimmers/controllers/vega-nested-modal-controller.js

@@ -21,6 +21,7 @@ export class VegaNestedModalController extends VegaSlimmer {
    */
   appendNestedModalToBody() {
     this.host.querySelectorAll('vega-modal').forEach((modal) => {
+      // eslint-disable-next-line no-restricted-globals
       document.body.append(modal);
     });
   }

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/controllers/vega-left-nav-backdrop-controller.js

@@ -45,16 +45,19 @@ export class VegaLeftNavBackdropController extends PageResizeObserverSlimmer {
    */
   /* istanbul ignore next */
   createBackdrop() {
+    // eslint-disable-next-line no-restricted-globals
     const backdrop = document.createElement('vega-backdrop');
     backdrop.visible = false;
     backdrop.duration = 150;
     backdrop.addEventListener('vegaClick', () => {
       this.openStateController.setOpenState('close');
     });
+    // eslint-disable-next-line no-restricted-globals
     document.body.append(backdrop);
     return backdrop;
   }
   updateBackdropUI(state) {
+    // eslint-disable-next-line no-restricted-globals
     const mainContent = document.querySelector('vega-left-nav + .vega-left-nav-content');
     if (state === 'open') {
       if (mainContent && !this.shouldShowBackdrop()) {

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/controllers/vega-left-nav-open-state-controller.js

@@ -81,7 +81,9 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
    */
   /* istanbul ignore next */
   updateMainContentUI(state) {
+    // eslint-disable-next-line no-restricted-globals
     const bodyElement = document.querySelector('body');
+    // eslint-disable-next-line no-restricted-globals
     const mainContent = document.querySelector('vega-left-nav + .vega-left-nav-content');
     if (state === 'open') {
       this.host.style.display = 'flex';

package/dist/collection/components/vega-rich-text-editor/dto/renderers/nodes/code-block-node-renderer.js

@@ -54,11 +54,8 @@ class RTECodeBlockNodeRenderer extends RTENodeRenderer {
   shouldSwitchOutOfCodeBlock(oldCode, newCode) {
     const newCodes = newCode.split('\n');
     if (newCode.length > oldCode.length &&
-      newCodes.length > 3 &&
-      newCodes
-        .slice(newCodes.length - 3)
-        .join('')
-        .trim() === '') {
+      newCodes.length > 4 &&
+      newCodes.slice(newCodes.length - 4).join('') === ``) {
       return true;
     }
     return false;

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

@@ -35,6 +35,7 @@ export class VegaCodeBlockToRTECodeBlockStrategy extends JiraCodeToRTECodeBlockS
     }
     else if (codeBlockElement.hasAttribute('data-content')) {
       // The code element in shadow dom could be empty in firefox.
+      // eslint-disable-next-line no-restricted-globals
       const code = document.createElement('code');
       code.textContent = codeBlockElement.dataset.content;
       code.dataset.language = codeBlockElement.dataset.language;

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/insert-paste-handler.js

@@ -80,6 +80,7 @@ export class InsertPasteHandler extends BaseHandler {
       const pastedText = event.dataTransfer.getData('text/plain');
       pastedHTML = this.parsePlainText(pastedText);
     }
+    // eslint-disable-next-line no-restricted-globals
     const tempContainer = document.createElement('div');
     tempContainer.innerHTML = pastedHTML;
     return this.elementToDTOProcessor

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/selection-controller.js

@@ -59,6 +59,7 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
    * Component lifecycle - [componentDidLoad]{@link VegaRichTextEditor.componentDidLoad}
    */
   componentDidLoad() {
+    // eslint-disable-next-line no-restricted-globals
     document.addEventListener('selectionchange', this.handleSelectionWithDebounce);
   }
   /**

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

@@ -62,19 +62,23 @@ export const changeAlignStyle = async (page, style) => {
   switch (style) {
     case 'left':
       await (await find(page, 'vega-popover-content-box div:nth-of-type(1) vega-rich-text-editor-toolbar-button >>> button')).click();
+      await page.waitForChanges();
       break;
     case 'center': {
       const centerAlignBtn = await find(page, 'vega-popover-content-box div:nth-of-type(2) vega-rich-text-editor-toolbar-button >>> button');
       await centerAlignBtn.click();
+      await page.waitForChanges();
       break;
     }
     case 'right': {
       const rightAlignBtn = await page.find('vega-popover-content-box div:nth-of-type(3) vega-rich-text-editor-toolbar-button >>> button');
       await rightAlignBtn.click();
+      await page.waitForChanges();
       break;
     }
     case 'justified':
       await (await find(page, 'vega-popover-content-box div:nth-of-type(4) vega-rich-text-editor-toolbar-button >>> button')).click();
+      await page.waitForChanges();
       break;
   }
 };
@@ -106,6 +110,7 @@ export const changeIndent = async (page, style) => {
 export const clickClearBtn = async (page) => {
   const clearStyleButton = await find(page, 'vega-rich-text-editor >>> vega-rich-text-editor-toolbar-button >>> button');
   await clearStyleButton.click();
+  await page.waitForChanges();
 };
 /**
  * set RTE link

package/dist/collection/components/vega-sidenav/slimmers/controllers/vega-sidenav-backdrop-controller.js

@@ -58,10 +58,13 @@ export class VegaSidenavBackdropController extends VegaSlimmer {
    * Appends a backdrop element to the body of the document and sets its visibility based on a breakpoint.
    */
   append() {
+    // eslint-disable-next-line no-restricted-globals
     let backdrop = document.querySelector(`vega-backdrop.${VegaSidenavBackdropController.backdropClassName}`);
     if (!backdrop) {
+      // eslint-disable-next-line no-restricted-globals
       backdrop = document.createElement('vega-backdrop');
       backdrop.classList.add(VegaSidenavBackdropController.backdropClassName);
+      // eslint-disable-next-line no-restricted-globals
       document.querySelector('body').append(backdrop);
     }
     backdrop.visible = this.getBackdropVisibleByBreakpoint();

package/dist/collection/components/vega-sidenav/slimmers/controllers/vega-sidenav-open-status-controller.js

@@ -226,6 +226,7 @@ export class VegaSidenavOpenStatusController extends PageResizeObserverSlimmer {
    */
   updateOverflowAvailability() {
     var _a;
+    // eslint-disable-next-line no-restricted-globals
     const bodyElement = document.querySelector('body');
     if (!((_a = this.responsiveBehavior) === null || _a === void 0 ? void 0 : _a.canBeScrolled) && this.openState === 'open') {
       bodyElement.style['overflow'] = 'hidden';

package/dist/collection/components/vega-signature-capture/slimmers/written-mode/controllers/written-mode-svg-controller.js

@@ -37,6 +37,7 @@ export class WrittenModeSvgController extends VegaSlimmer {
         return;
       this.isDrawing = true;
       const { x, y } = this.getPoint(e);
+      // eslint-disable-next-line no-restricted-globals
       this.currentPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
       this.currentPath.setAttribute('d', `M ${x} ${y}`);
       Object.assign(this.currentPath.style, {