@globalpayments/vega 2.93.0 → 2.94.0

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

@@ -0,0 +1,31 @@
+import { VegaRTEExtension } from '../extension.abstract';
+import { RTEFullscreenToolbarButtonRenderer } from './fullscreen-toolbar-button-renderer';
+import { FullscreenController } from './controller/fullscreen-controller';
+/**
+ * Rich Text Editor extension that adds a toolbar button for viewport fullscreen mode.
+ *
+ * OOP Pattern: Extends VegaRTEExtension with fullscreen feature.
+ * Uses a per-host controller store to isolate state across hosts.
+ */
+export class VegaRTEFullscreenExtension extends VegaRTEExtension {
+  /** @inheritDoc */
+  prepareBeforeLoad(host) {
+    const controller = new FullscreenController(host);
+    VegaRTEFullscreenExtension.controllerStore.set(host, controller);
+    this.registerToolbarButtonRenderer(VegaRTEFullscreenExtension.TOOLBAR_BUTTON_KEY, new RTEFullscreenToolbarButtonRenderer(controller), host);
+  }
+  /**
+   * Restore document scroll if the editor is removed while fullscreen is active.
+   * Without this, body overflow:hidden would persist after the host is gone.
+   */
+  destroyExtension() {
+    var _a, _b;
+    if ((_a = this.extensionContext) === null || _a === void 0 ? void 0 : _a.host) {
+      const host = this.extensionContext.host;
+      (_b = VegaRTEFullscreenExtension.controllerStore.get(host)) === null || _b === void 0 ? void 0 : _b.exitFullscreen();
+      VegaRTEFullscreenExtension.controllerStore.delete(host);
+    }
+  }
+}
+VegaRTEFullscreenExtension.TOOLBAR_BUTTON_KEY = 'fullscreen';
+VegaRTEFullscreenExtension.controllerStore = VegaRTEFullscreenExtension.createStateStore();

package/dist/collection/components/vega-rich-text-editor/extensions/fullscreen/fullscreen-toolbar-button-renderer.js

@@ -0,0 +1,73 @@
+import { VegaRTEToolbarButtonRenderer } from '../base-toolbar-button-renderer';
+import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import { VegaInternalTranslation } from '../../../../helpers/translation/internal-translation-controller';
+import fullscreenEnter from './assets/fullscreen-enter';
+import fullscreenExit from './assets/fullscreen-exit';
+/**
+ * Toolbar button renderer for fullscreen toggle.
+ */
+export class RTEFullscreenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  constructor(controller) {
+    super();
+    this.controller = controller;
+  }
+  /**
+   * Always shows the fullscreen button.
+   *
+   * @returns {boolean} Always false for hidden state.
+   */
+  isHidden() {
+    return false;
+  }
+  /**
+   * Renders the fullscreen toolbar button with current state.
+   *
+   * @param {VegaRTECreateElementFunction} createElement - Create element function.
+   * @param {VegaRTEToolbarRenderContext} editorContext - Toolbar render context.
+   * @returns {VegaRTERenderResult} The toolbar button render result.
+   */
+  render(createElement, editorContext) {
+    const selected = this.isSelected();
+    return this.renderButton(createElement, editorContext, {
+      icon: selected ? 'rte-fullscreen-exit' : 'rte-fullscreen-enter',
+      tooltip: {
+        text: selected
+          ? VegaInternalTranslation.t('Exit fullscreen mode')
+          : VegaInternalTranslation.t('Enter fullscreen mode'),
+      },
+    });
+  }
+  /**
+   * Returns whether fullscreen mode is currently active.
+   *
+   * @returns {boolean} Whether fullscreen mode is active.
+   */
+  isSelected() {
+    return this.controller.isActive();
+  }
+  /**
+   * Toggles fullscreen mode and forces toolbar button refresh.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - Toolbar render context.
+   */
+  handleButtonClick(editorContext) {
+    this.controller.toggleFullscreen();
+    const extensionContext = this.getExtensionContext(editorContext.host);
+    if (extensionContext) {
+      extensionContext.forceUpdate(editorContext.host);
+    }
+  }
+  /**
+   * No dropdown behavior for fullscreen button.
+   */
+  handleDropdownClick() {
+    // No dropdown for fullscreen
+  }
+}
+// Register icons in static block
+(() => {
+  VegaInternalIconManager.register({
+    'rte-fullscreen-enter': fullscreenEnter,
+    'rte-fullscreen-exit': fullscreenExit,
+  });
+})();

package/dist/collection/components/vega-rich-text-editor/extensions/paste/paste-chooser-ui.js

@@ -91,6 +91,7 @@ export class RTEPasteChooserUI {
     dropdownEl.maxWidth = 220;
     dropdownEl.alignment = 'start';
     dropdownEl.itemDisplayRule = 'ellipsis';
+    dropdownEl.isScreenPosition = true;
     const triggerButton = doc.createElement('vega-rich-text-editor-toolbar-button');
     const arrowIcon = placement[0] === 'top' ? 'chevron-up' : 'chevron-down';
     triggerButton.setAttribute(RTEPasteChooserUI.CHOOSER_TRIGGER_ATTR, 'true');

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-toolbar-popover-renderer.js

@@ -25,6 +25,7 @@ export class RTETableToolbarPopoverRenderer extends TablePopoverBaseRenderer {
       alignment: 'start',
       placement: 'bottom',
       showArrow: false,
+      isScreenPosition: true,
       // eslint-disable-next-line jsdoc/require-jsdoc
       ref: (ref) => {
         if (ref) {

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/slimmers/renderers/vega-rich-text-table-properties-basic-form-field-renderer.abstract.js

@@ -216,7 +216,7 @@ export class VegaRichTextTablePropertiesBaseFormFieldRenderer extends VegaSlimme
               this.borderColorPickerRef.value = this.controller.getColorByKey(formValue['borderColor']);
             }
           });
-        }, trigger: "click" },
+        }, trigger: "click", isScreenPosition: true },
         h("div", { slot: "popover-content", class: "color-picker-container" },
           h("vega-input", { ref: this.handleFormChange, "data-vega-form": "borderColor", type: "hidden" }),
           h("span", { role: "button", tabIndex: 0, "aria-label": "Clear border color", onKeyDown: createEnterKeyHandlerToTriggerClick(), class: "display-color-placeholder color-none" })),

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/column-button-slimmer.js

@@ -32,7 +32,7 @@ export class ColumnButtonSlimmer extends TableSettingButtonSlimmer {
     };
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-dropdown", { isScreenPosition: true, minWidth: 210, trigger: "click", ref: (el) => {
+    return (h("vega-dropdown", { minWidth: 210, trigger: "click", ref: (el) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, this.handleDropdownItemClick);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownShow, this.handleDropdownVisibilityChange);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownHide, this.handleDropdownVisibilityChange);

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/merge-cells-button-slimmer.js

@@ -35,7 +35,7 @@ export class MergeCellsButtonSlimmer extends TableSettingButtonSlimmer {
     };
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-dropdown", { isScreenPosition: true, minWidth: 150, trigger: "click", ref: (el) => {
+    return (h("vega-dropdown", { minWidth: 150, trigger: "click", ref: (el) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, this.handleDropdownItemClick);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownShow, this.handleDropdownVisibilityChange);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownHide, this.handleDropdownVisibilityChange);

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/row-button-slimmer.js

@@ -23,7 +23,7 @@ export class RowButtonSlimmer extends TableSettingButtonSlimmer {
     };
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-dropdown", { isScreenPosition: true, minWidth: 180, trigger: "click", ref: (el) => {
+    return (h("vega-dropdown", { minWidth: 180, trigger: "click", ref: (el) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, this.handleDropdownItemClick);
       } },
       renderBtn(),

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

@@ -2,25 +2,67 @@ import { dashCaseToCamel } from '../../../utils/string';
 /**
  * Creates a style map from the inline styles of an HTML element. This function extracts the 'style' attribute from the given element.
  *
+ * Manually parses the style string to handle complex CSS values that contain semicolons (e.g., data URLs),
+ * colons (e.g., https:// URLs), or commas (e.g., rgba, gradients). This approach avoids reliance on
+ * CSSStyleDeclaration's array-like behavior, which is inconsistent in Jest/JSDOM test environments.
+ *
  * @param {HTMLElement} element The HTML element from which to extract inline styles.
  * @returns {AnnotationStyle} An object representing the custom style annotations.
  */
 export function createStyleMapFromElement(element) {
-  const customStyle = element.getAttribute('style');
-  if (!customStyle)
-    return {};
-  const styleValue = customStyle.split(';').filter(Boolean);
-  return styleValue
-    .filter((key) => key !== ' ')
-    .map((key) => {
-    // to remove redundant quote pairs if needed, for example: ['fontFamily: "Roboto Mono"'] will be updated to ['fontFamily: Roboto Mono']
-    const styleObject = key.replace(/(['"])(.*?)\1/g, '$2').split(':');
-    const styleKey = dashCaseToCamel(styleObject[0].trim());
-    return {
-      [styleKey]: styleObject[1].trim().replace(';', ''),
-    };
-  })
-    .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  const styleMap = {};
+  const styleAttr = element.getAttribute('style');
+  if (!styleAttr) {
+    return styleMap;
+  }
+  // Split by semicolons, but only those outside of parentheses (to handle data URLs with semicolons)
+  const properties = splitStyleProperties(styleAttr);
+  for (const property of properties) {
+    const trimmedProperty = property.trim();
+    const colonIndex = trimmedProperty.indexOf(':');
+    const propertyName = trimmedProperty.substring(0, colonIndex).trim();
+    const propertyValue = trimmedProperty.substring(colonIndex + 1).trim();
+    // Convert CSS property name to camelCase (e.g., 'background-color' -> 'backgroundColor')
+    const camelCaseName = dashCaseToCamel(propertyName);
+    styleMap[camelCaseName] = propertyValue;
+  }
+  return styleMap;
+}
+/**
+ * Split a CSS style string by semicolons, but only those outside of parentheses.
+ * This ensures that semicolons inside url() or other functions are not treated as property separators.
+ *
+ * @param {string} styleAttr The style attribute string to split.
+ * @returns {string[]} Array of individual CSS property strings.
+ */
+export function splitStyleProperties(styleAttr) {
+  const properties = [];
+  let currentProperty = '';
+  let parenthesesDepth = 0;
+  for (let i = 0; i < styleAttr.length; i++) {
+    const char = styleAttr[i];
+    if (char === '(') {
+      parenthesesDepth++;
+      currentProperty += char;
+    }
+    else if (char === ')') {
+      parenthesesDepth--;
+      currentProperty += char;
+    }
+    else if (char === ';' && parenthesesDepth === 0) {
+      // Semicolon outside parentheses - this is a property separator
+      properties.push(currentProperty);
+      currentProperty = '';
+    }
+    else {
+      currentProperty += char;
+    }
+  }
+  // Add the last property if it doesn't end with a semicolon
+  if (currentProperty) {
+    properties.push(currentProperty);
+  }
+  return properties;
 }
 /**
  * Escape HTML-sensitive characters so text can be rendered literally in HTML.
@@ -36,3 +78,17 @@ export function escapeHtml(text) {
     .replace(/"/g, '&quot;')
     .replace(/'/g, '&#39;');
 }
+/**
+ * Escape text for use inside a double-quoted HTML attribute value.
+ *
+ * @param {string} value - Raw attribute value.
+ * @returns {string} Escaped attribute-safe value.
+ */
+export function escapeHtmlAttribute(value) {
+  return (value
+    // Keep existing entities (e.g. &quot;, &#39;) intact to avoid double escaping on repeated transforms.
+    .replace(/&(?!(?:[a-zA-Z][a-zA-Z0-9]+|#[0-9]+|#x[a-fA-F0-9]+);)/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;'));
+}

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

@@ -27,9 +27,11 @@ export { VegaRTEFindReplaceExtension } from './extensions/find-replace/find-repl
 export { VegaRTESpecialCharactersEssentials, VegaRTESpecialCharactersLatin, VegaRTESpecialCharactersMathematical, VegaRTESpecialCharactersArrows, VegaRTESpecialCharactersCurrency, VegaRTESpecialCharactersText, } from './extensions/special-characters/constants/default-categories';
 export { VegaRTELineHeightExtension } from './extensions/line-height/line-height-extension';
 export { VegaRTELinkExtension } from './extensions/link/link-extension';
+export { VegaRTEFullscreenExtension } from './extensions/fullscreen/fullscreen-extension';
 export { VegaRTEPasteExtension } from './extensions/paste/paste-extension';
 export { VegaRTECopyExtension } from './extensions/copy/copy-extension';
 export { VegaRTECutExtension } from './extensions/cut/cut-extension';
+export { VegaRTEImageExtension } from './extensions/image/image-extension';
 // actions
 export { ModifyContentAction, ModifyContentActionType } from './dto/actions/modify-content-action.abstract';
 export { AppendChildrenAction } from './dto/actions/append-child-nodes-action';

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

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { isArrayEqual } from '../../../../utils/array';
+import { forceUpdate } from '@stencil/core';
 /**
  * Inject the editor context to the extensions.
  */
@@ -107,6 +108,7 @@ export class RTEExtensionController extends VegaSlimmer {
     return {
       host: this.host,
       flushValue: this.flushValue,
+      forceUpdate: forceUpdate,
       isSourceEditMode: this.isSourceEditMode,
       getSelectedNodes: this.getSelectedNodes,
       setSelectedNodes: this.selectionController.setSelectedNodes.bind(this.selectionController),

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bullets-numbers/bullets-numbers-toolbar-button-slimmer.js

@@ -34,7 +34,7 @@ export class BulletsNumbersToolbarButtonSlimmer extends VisualModeToolbarButtonS
     }
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-popover", { showArrow: false, trigger: "click", placement: "bottom", alignment: "center", ref: (ref) => (this.popoverRef = ref) },
+    return (h("vega-popover", { showArrow: false, trigger: "click", placement: "bottom", alignment: "center", isScreenPosition: true, ref: (ref) => (this.popoverRef = ref) },
       h("div", { slot: "popover-content" }, renderBtn({ showArrowIcon: true })),
       h("div", { slot: "popover" }, this.renderContent())));
   }

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/horizontal-alignment/horizontal-alignment-toolbar-button-slimmer.js

@@ -43,7 +43,7 @@ export class HorizontalAlignmentToolbarButtonSlimmer extends VisualModeToolbarBu
     }
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-popover", { trigger: "click", showArrow: false, alignment: "center", placement: "bottom", ref: (ref) => (this.popoverRef = ref) },
+    return (h("vega-popover", { trigger: "click", showArrow: false, alignment: "center", placement: "bottom", isScreenPosition: true, ref: (ref) => (this.popoverRef = ref) },
       h("div", { slot: "popover-content" }, renderBtn({ showArrowIcon: true })),
       h("div", { slot: "popover" }, this.renderContent())));
   }

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/image-toolbar-button-slimmer.js

@@ -79,7 +79,7 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       return null;
     }
     return (h("vega-box", null,
-      shouldRenderDropdown ? (h("vega-dropdown", { selectType: "none", trigger: "click", alignment: "center", ref: (ref) => {
+      shouldRenderDropdown ? (h("vega-dropdown", { selectType: "none", trigger: "click", alignment: "center", isScreenPosition: true, ref: (ref) => {
           this.dropdownRef = ref;
           this.addDropdownObserver(ref);
         } },

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/text-color-toolbar-button-slimmer.js

@@ -46,7 +46,7 @@ export class TextColorToolbarButtonSlimmer extends VisualModeToolbarButtonSlimme
     this.popoverShow = false;
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-popover", { placement: "bottom", alignment: "center", ref: (ref) => {
+    return (h("vega-popover", { placement: "bottom", alignment: "center", isScreenPosition: true, ref: (ref) => {
         this.popoverRef = ref;
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, this.handlePopoverShowChange.bind(this));
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverHide, this.handlePopoverHideChange.bind(this));

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/text-styles-toolbar-button-slimmer.js

@@ -47,7 +47,7 @@ export class TextStylesToolbarButtonSlimmer extends VisualModeToolbarButtonSlimm
     };
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-dropdown", { selectType: "single", trigger: "click", alignment: "center", selectedSourceKey: this.getSelectedSourceKey(), ref: (ref) => {
+    return (h("vega-dropdown", { selectType: "single", trigger: "click", alignment: "center", isScreenPosition: true, selectedSourceKey: this.getSelectedSourceKey(), ref: (ref) => {
         this.addDropdownObserver(ref);
       } },
       renderBtn({ showArrowIcon: true }),

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

@@ -10,6 +10,7 @@ import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibi
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalComponentDidRender } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { SHADOW_ROOT_ELEMENT_SCROLLING } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import { VegaRTEOneRowHeightPx } from '../../constants/constant';
 export class VegaRichTextEditorRenderer extends VegaSlimmer {
   constructor() {
@@ -31,9 +32,18 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
           'disabled': this.disabled,
           'vega-hidden': this.sourceView,
         }, style: containerStyle, onClick: this.richTextContentFocus, role: "textbox", tabIndex: !this.disabled ? -1 : 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (node) => (this.richTextContainerRef = node) },
-        h("vega-rich-text-content", { ref: (ref) => (this.richTextContentRef = ref), content: this.value, extensions: this.extensions }),
+        h("vega-rich-text-content", { ref: (ref) => (this.richTextContentRef = ref), content: this.value, extensions: this.extensions, onScroll: this.notifyContentScrolling }),
         this.renderCharacterCounter()));
     };
+    /**
+     * Propagates rich-text content scrolling inside shadow root so open appender
+     * can force position recalculation via ElementAppenderSlimmer.
+     */
+    this.notifyContentScrolling = () => {
+      ChangeManager.notify(SHADOW_ROOT_ELEMENT_SCROLLING, {
+        host: this.host,
+      });
+    };
     this.renderCharacterCounter = () => {
       return (h("div", { class: {
           'text-editor-counter': true,

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/vega-rich-text-editor-source-view-renderer.js

@@ -64,7 +64,7 @@ export class VegaRichTextEditorSourceViewRenderer extends VegaSlimmer {
   render() {
     if (!this.allowSourceEdit)
       return;
-    const sourceCode = this.getSourceTemplate();
+    const sourceCode = this.normalizeSourceCodeForEditing(this.getSourceTemplate());
     const sourceViewValue = this.sourceView ? CodeFormatter.format(sourceCode) : '';
     // Record the source view value when rendering, which will be used to compare with the current source view value when blurring the code block to determine whether to emit the source code change event.
     this.prevRecord = sourceCode;
@@ -85,6 +85,24 @@ export class VegaRichTextEditorSourceViewRenderer extends VegaSlimmer {
   getSourceTemplate() {
     return this.value.toHtml({ filterInlineStyles: this.sourceEditConfig.filterInlineStyles });
   }
+  /**
+   * Normalize source HTML for source-mode editing.
+   *
+   * `vega-code-block` renders code as HTML and will decode quote entities, so
+   * convert quote entities inside style attributes to single quotes before entering
+   * source mode. This preserves valid HTML when switching back to normal mode.
+   */
+  normalizeSourceCodeForEditing(html) {
+    return html.replace(/style="([\s\S]*?)"/gi, (_match, styleValue) => {
+      const normalizedStyleValue = styleValue
+        .replace(/&|&|&/gi, '&')
+        .replace(/&lt;|&#60;|&#x3c;/gi, '<')
+        .replace(/&gt;|&#62;|&#x3e;/gi, '>')
+        .replace(/&quot;|&#34;|&#x22;/gi, "'")
+        .replace(/&apos;|&#39;|&#x27;/gi, "'");
+      return `style="${normalizedStyleValue}"`;
+    });
+  }
 }
 __decorate([
   MapToComponentField()

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-link-editor/slimmers/renderers/vega-rich-text-link-editor-renderer.js

@@ -59,7 +59,7 @@ export class VegaRichTextLinkEditorRenderer extends VegaSlimmer {
     return this.popoverRef;
   }
   render() {
-    return (h("vega-popover", { trigger: "click", alignment: "start", placement: "bottom", showArrow: false, ref: (ref) => {
+    return (h("vega-popover", { trigger: "click", alignment: "start", placement: "bottom", showArrow: false, isScreenPosition: true, ref: (ref) => {
         this.popoverRef = ref;
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
           var _a, _b, _c;

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-cell-renderer.js

@@ -102,7 +102,9 @@ export class VegaTableCellRenderer extends VegaSlimmer {
     if (column) {
       const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
       const columnKey = `${rowKey}_${column.key || column.prop}`;
-      return (h("vega-table-cell", { key: columnKey, textAlign: column.align, breakpoint: column.breakpoint, overflow: column.overflow, colSpan: isSpanning ? htmlColspan : undefined, ref: (ref) => {
+      const ellipsisOptions = column.ellipsisOptions;
+      const ellipsisShowTooltip = !!(ellipsisOptions === null || ellipsisOptions === void 0 ? void 0 : ellipsisOptions.showTooltip);
+      return (h("vega-table-cell", { key: columnKey, textAlign: column.align, breakpoint: column.breakpoint, overflow: column.overflow, ellipsisShowTooltip: ellipsisShowTooltip, colSpan: isSpanning ? htmlColspan : undefined, ref: (ref) => {
           this.vegaTableRenderInputController.addCellRenderInputMap(ref, effectiveRenderInput);
         } }, this.renderTableCellContent(column, record, index, isSpanning)));
     }

package/dist/collection/components/vega-table/vega-table-cell/vega-table-cell.js

@@ -30,6 +30,14 @@ export class VegaTableCell {
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.vegaTableRenderInputConsumerSlimmer = new VegaTableChildRenderInputConsumerSlimmer(VegaInternalColumnBodyCellRenderInputRIC);
     this.currentBreakpoint = getCurrentBreakpoint();
+    this.ellipsisTooltipText = '';
+    this.ellipsisTooltipTrigger = 'none';
+    /**
+     * Whether to show a Vega tooltip (instead of the native title attribute) for truncated ellipsis cell content.
+     *
+     * @vegaVersion 2.94.0
+     */
+    this.ellipsisShowTooltip = false;
     this.getCellOverflowClass = () => {
       switch (this.overflow) {
         case 'ellipsis':
@@ -39,6 +47,11 @@ export class VegaTableCell {
       }
     };
   }
+  componentDidLoad() {
+    if (this.overflow === 'ellipsis' && this.ellipsisShowTooltip) {
+      requestAnimationFrame(() => this.updateEllipsisState());
+    }
+  }
   render() {
     var _a, _b, _c, _d, _e, _f;
     const responsiveClass = generateResponsiveClass(this.breakpoint, 'v-table-cell');
@@ -70,17 +83,63 @@ export class VegaTableCell {
         /* eslint-disable-next-line react/jsx-no-bind */
         onMouseEnter: this.onMouseEnter.bind(this), 
         /* eslint-disable-next-line react/jsx-no-bind */
-        onMouseLeave: this.onMouseLeave.bind(this), style: { width: this.width } },
-        h("div", { class: overflowClass },
-          h("slot", null)))), this.host);
+        onMouseLeave: this.onMouseLeave.bind(this), style: { width: this.width } }, this.overflow === 'ellipsis' && this.ellipsisShowTooltip ? (h("vega-tooltip", { text: this.ellipsisTooltipText, trigger: this.ellipsisTooltipTrigger, maxWidth: 300, style: { display: 'block', width: '100%', minWidth: '0' } },
+        h("div", { class: overflowClass, ref: (ref) => {
+            this.overflowContentRef = ref;
+          } },
+          h("slot", { ref: (ref) => {
+              this.slotRef = ref;
+            } })))) : (h("div", { class: overflowClass, ref: (ref) => {
+          this.overflowContentRef = ref;
+        } },
+        h("slot", { ref: (ref) => {
+            this.slotRef = ref;
+          } }))))), this.host);
   }
   onMouseEnter() {
-    const row = this.host.parentElement;
-    row.querySelectorAll('vega-table-cell').forEach((cell) => cell.classList.add('hovered'));
+    this.updateEllipsisState();
+    this.getRowCells().forEach((cell) => cell.classList.add('hovered'));
   }
   onMouseLeave() {
+    this.getRowCells().forEach((cell) => cell.classList.remove('hovered'));
+  }
+  getRowCells() {
     const row = this.host.parentElement;
-    row.querySelectorAll('vega-table-cell').forEach((cell) => cell.classList.remove('hovered'));
+    if (!row) {
+      return [];
+    }
+    return Array.from(row.querySelectorAll('vega-table-cell'));
+  }
+  updateEllipsisState() {
+    if (this.overflow !== 'ellipsis' || !this.overflowContentRef) {
+      return;
+    }
+    const isTruncated = this.overflowContentRef.scrollWidth > this.overflowContentRef.clientWidth;
+    const text = this.getCellText();
+    if (this.ellipsisShowTooltip) {
+      this.overflowContentRef.removeAttribute('title');
+      this.ellipsisTooltipText = text;
+      this.ellipsisTooltipTrigger = isTruncated ? 'hover' : 'none';
+    }
+    else {
+      if (isTruncated && text) {
+        this.overflowContentRef.setAttribute('title', text);
+      }
+      else {
+        this.overflowContentRef.removeAttribute('title');
+      }
+    }
+  }
+  getCellText() {
+    var _a, _b, _c;
+    const assignedNodes = this.slotRef && typeof this.slotRef.assignedNodes === 'function'
+      ? this.slotRef.assignedNodes({ flatten: true })
+      : [];
+    const slotText = assignedNodes
+      .map((node) => { var _a; return ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''; })
+      .filter((text) => text)
+      .join(' ');
+    return (slotText || ((_b = (_a = this.overflowContentRef) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || ((_c = this.host.textContent) === null || _c === void 0 ? void 0 : _c.trim()) || '');
   }
   static get is() { return "vega-table-cell"; }
   static get encapsulation() { return "shadow"; }
@@ -195,6 +254,27 @@ export class VegaTableCell {
       },
       "attribute": "col-span",
       "reflect": false
+    },
+    "ellipsisShowTooltip": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.94.0"
+          }],
+        "text": "Whether to show a Vega tooltip (instead of the native title attribute) for truncated ellipsis cell content."
+      },
+      "attribute": "ellipsis-show-tooltip",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
@@ -206,7 +286,9 @@ export class VegaTableCell {
     "checked": {},
     "striped": {},
     "expanded": {},
-    "renderInput": {}
+    "renderInput": {},
+    "ellipsisTooltipText": {},
+    "ellipsisTooltipTrigger": {}
   }; }
   static get elementRef() { return "host"; }
 }

package/dist/collection/global/scripts/before-vega-load.js

@@ -34,6 +34,7 @@ import { VegaRTELineHeightExtension } from '../../components/vega-rich-text-edit
 import { VegaRTEDefaultLineHeightOptions } from '../../components/vega-rich-text-editor/extensions/line-height/constants';
 import { VegaRTELinkExtension } from '../../components/vega-rich-text-editor/extensions/link/link-extension';
 import { VegaCalendarPeriodFactory } from '../../helpers/calendar';
+import { VegaRTEFullscreenExtension } from '../../components/vega-rich-text-editor/extensions/fullscreen/fullscreen-extension';
 import { VegaRTECopyExtension } from '../../components/vega-rich-text-editor/extensions/copy/copy-extension';
 import { VegaRTECutExtension } from '../../components/vega-rich-text-editor/extensions/cut/cut-extension';
 import { VegaRTEPasteExtension } from '../../components/vega-rich-text-editor/extensions/paste/paste-extension';
@@ -226,6 +227,7 @@ function injectVegaRichTextEditorClassIntoGlobal() {
   globalThis.VegaRTELineHeightExtension = VegaRTELineHeightExtension;
   globalThis.VegaRTEPasteExtension = VegaRTEPasteExtension;
   globalThis.VegaRTELinkExtension = VegaRTELinkExtension;
+  globalThis.VegaRTEFullscreenExtension = VegaRTEFullscreenExtension;
   globalThis.VegaRTECopyExtension = VegaRTECopyExtension;
   globalThis.VegaRTECutExtension = VegaRTECutExtension;
   globalThis.VegaRTEImageExtension = VegaRTEImageExtension;

package/dist/collection/helpers/backdrop/index.js

@@ -0,0 +1 @@
+export { SharedBackdropManager } from './shared-backdrop-manager';