@globalpayments/vega 2.92.0 → 2.94.0

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

@@ -0,0 +1,156 @@
+import { vegaNonceManager } from '../../../../../helpers/csp/vega-nonce-manager';
+import InternalVegaZIndexManager from '../../../../../helpers/zindex/internal-vega-z-index-manager';
+/**
+ * Controls fullscreen behavior and DOM manipulation for a single RTE host instance.
+ *
+ * One controller is bound to one host and owns all enter/exit side effects
+ * for that host.
+ *
+ * Strategy: set position:fixed on the host, and inject one <style> rule into
+ * its shadow root to override the inline height Stencil sets on the container.
+ * Exit just restores the original host style and removes the injected rule.
+ */
+export class FullscreenController {
+  constructor(host) {
+    this.active = false;
+    this.hostStyle = null;
+    this.scrollX = 0;
+    this.scrollY = 0;
+    this.host = host;
+  }
+  /**
+   * Returns whether fullscreen mode is currently active.
+   *
+   * @returns {boolean} Whether fullscreen mode is active.
+   */
+  isActive() {
+    return this.active;
+  }
+  /**
+   * Enters fullscreen mode for the bound RTE host.
+   */
+  enterFullscreen() {
+    var _a, _b, _c, _d;
+    const host = this.host;
+    if (this.active || !host.shadowRoot || !host.ownerDocument) {
+      return;
+    }
+    // Snapshot what needs to be restored
+    this.hostStyle = host.getAttribute('style');
+    this.scrollX = (_b = (_a = host.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.scrollX) !== null && _b !== void 0 ? _b : 0;
+    this.scrollY = (_d = (_c = host.ownerDocument.defaultView) === null || _c === void 0 ? void 0 : _c.scrollY) !== null && _d !== void 0 ? _d : 0;
+    this.lockDocumentScroll(host.ownerDocument);
+    // Anchor host to viewport — ensure a semicolon delimiter so existing styles are not corrupted
+    const baseStyle = this.hostStyle
+      ? /;\s*$/.test(this.hostStyle)
+        ? this.hostStyle
+        : `${this.hostStyle};`
+      : '';
+    host.setAttribute('style', `${baseStyle}${FullscreenController.HOST_FULLSCREEN_STYLE}`);
+    if (host instanceof HTMLElement) {
+      InternalVegaZIndexManager.setZIndex(host, 'base');
+    }
+    // Override Stencil's inline height on the container
+    const styleTag = host.ownerDocument.createElement('style');
+    styleTag.id = FullscreenController.STYLE_TAG_ID;
+    if (vegaNonceManager.nonce) {
+      styleTag.setAttribute('nonce', vegaNonceManager.nonce);
+    }
+    styleTag.textContent = FullscreenController.INNER_FULLSCREEN_CSS;
+    host.shadowRoot.appendChild(styleTag);
+    this.active = true;
+  }
+  /**
+   * Exits fullscreen mode for the bound RTE host.
+   */
+  exitFullscreen() {
+    var _a, _b, _c, _d;
+    const host = this.host;
+    if (!this.active) {
+      return;
+    }
+    if (host.ownerDocument) {
+      this.unlockDocumentScroll(host.ownerDocument);
+    }
+    if (host instanceof HTMLElement) {
+      InternalVegaZIndexManager.removeZIndex(host, 'base');
+    }
+    // Restore host style
+    if (this.hostStyle === null) {
+      host.removeAttribute('style');
+    }
+    else {
+      host.setAttribute('style', this.hostStyle);
+    }
+    // Remove injected CSS — container height reverts automatically
+    (_b = (_a = host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`#${FullscreenController.STYLE_TAG_ID}`)) === null || _b === void 0 ? void 0 : _b.remove();
+    // Restore scroll position so the host element remains visible after exit
+    (_d = (_c = host.ownerDocument) === null || _c === void 0 ? void 0 : _c.defaultView) === null || _d === void 0 ? void 0 : _d.scrollTo(this.scrollX, this.scrollY);
+    this.active = false;
+  }
+  /**
+   * Toggles fullscreen mode for the bound RTE host.
+   */
+  toggleFullscreen() {
+    if (this.active) {
+      this.exitFullscreen();
+    }
+    else {
+      this.enterFullscreen();
+    }
+  }
+  /**
+   * Locks document scrolling for the given document and records the first snapshot.
+   *
+   * @param {Document} ownerDocument - The document whose scroll should be locked.
+   */
+  lockDocumentScroll(ownerDocument) {
+    const currentState = FullscreenController.documentScrollLockStates.get(ownerDocument);
+    if (currentState) {
+      FullscreenController.documentScrollLockStates.set(ownerDocument, Object.assign(Object.assign({}, currentState), { lockCount: currentState.lockCount + 1 }));
+      return;
+    }
+    FullscreenController.documentScrollLockStates.set(ownerDocument, {
+      lockCount: 1,
+      bodyOverflow: ownerDocument.body.style.overflow,
+      documentOverflow: ownerDocument.documentElement.style.overflow,
+    });
+    ownerDocument.body.style.overflow = 'hidden';
+    ownerDocument.documentElement.style.overflow = 'hidden';
+  }
+  /**
+   * Unlocks document scrolling when the last fullscreen owner exits.
+   *
+   * @param {Document} ownerDocument - The document whose scroll should be restored.
+   */
+  unlockDocumentScroll(ownerDocument) {
+    const currentState = FullscreenController.documentScrollLockStates.get(ownerDocument);
+    if (!currentState) {
+      return;
+    }
+    if (currentState.lockCount > 1) {
+      FullscreenController.documentScrollLockStates.set(ownerDocument, Object.assign(Object.assign({}, currentState), { lockCount: currentState.lockCount - 1 }));
+      return;
+    }
+    ownerDocument.body.style.overflow = currentState.bodyOverflow;
+    ownerDocument.documentElement.style.overflow = currentState.documentOverflow;
+    FullscreenController.documentScrollLockStates.delete(ownerDocument);
+  }
+}
+FullscreenController.STYLE_TAG_ID = 'v-rte-fullscreen-styles';
+FullscreenController.HOST_FULLSCREEN_STYLE = 'position:fixed;inset:0;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));';
+/**
+ * Only three things need overriding inside the shadow root:
+ * 1. The outer vega-flex wrapper must fill the host height (`:host >`
+ *    avoids hitting the toolbar's nested vega-flex).
+ * 2. The editor container must grow to fill remaining space and drop
+ *    the fixed pixel height that Stencil injects from the `rows` prop.
+ * 3. The source-view container (shown in source-edit mode) also grows
+ *    and owns vertical scrolling so long source code is reachable.
+ * 4. overflow:auto on the container lets content scroll without clipping
+ *    internal pop-ups (link editor, color picker, etc.) at the host level.
+ */
+FullscreenController.INNER_FULLSCREEN_CSS = ':host > vega-flex { height: 100%; padding: 5px; box-sizing: border-box; }' +
+  ' .rich-text-editor-container { flex: 1 !important; height: auto !important; min-height: 0 !important; resize: none !important; overflow: auto !important; }' +
+  ' .source-view-container:not(.vega-hidden) { display: flex !important; flex: 1 !important; min-height: 0 !important; overflow: auto !important; flex-direction: column; }';
+FullscreenController.documentScrollLockStates = new WeakMap();

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/image/image-extension.js

@@ -0,0 +1,34 @@
+import { VegaRTEExtension } from '../extension.abstract';
+/**
+ * Rich Text Editor extension that configures built-in image behavior.
+ */
+export class VegaRTEImageExtension extends VegaRTEExtension {
+  constructor(config = {}) {
+    super();
+    this.config = config;
+  }
+  /**
+   * Store config per host so both toolbar-image and inline-image editors
+   * can consistently read the extension settings.
+   *
+   * @param {HTMLElement} host - The host rich text editor element.
+   */
+  prepareBeforeLoad(host) {
+    VegaRTEImageExtension.configStore.set(host, this.config);
+  }
+  /**
+   * Remove config for the current host when the extension is destroyed.
+   */
+  destroyExtension() {
+    var _a;
+    if ((_a = this.extensionContext) === null || _a === void 0 ? void 0 : _a.host) {
+      VegaRTEImageExtension.configStore.delete(this.extensionContext.host);
+    }
+  }
+}
+/**
+ * Per-host config store. Declare as static readonly to isolate config per editor host.
+ *
+ * @type {RTEExtensionStateStore<VegaRTEImageExtensionConfig>}
+ */
+VegaRTEImageExtension.configStore = VegaRTEImageExtension.createStateStore();

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

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

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

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M80 96v16c0 17.7 14.3 32 32 32h60.8c16.6-28.7 47.6-48 83.2-48h62c-7.1-27.6-32.2-48-62-48H215.4C211.6 20.9 188.2 0 160 0s-51.6 20.9-55.4 48H64C28.7 48 0 76.7 0 112V384c0 35.3 28.7 64 64 64h96V400H64c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H80zm64-40a16 16 0 1 1 32 0 16 16 0 1 1 -32 0zM256 464c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H384v48c0 17.7 14.3 32 32 32h48V448c0 8.8-7.2 16-16 16H256zm192 48c35.3 0 64-28.7 64-64V227.9c0-12.7-5.1-24.9-14.1-33.9l-51.9-51.9c-9-9-21.2-14.1-33.9-14.1H256c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H448z"/></svg>`,
+};

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

@@ -0,0 +1,145 @@
+import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import { VegaInternalTranslation } from '../../../../helpers/translation/internal-translation-controller';
+import paste from './assets/paste';
+/**
+ * Renders and manages the paste format chooser UI.
+ */
+export class RTEPasteChooserUI {
+  constructor(hostRoot, callbacks) {
+    this.hostRoot = hostRoot;
+    this.callbacks = callbacks;
+    this.chooserEl = null;
+    this.dropdownEl = null;
+    this.triggerButtonEl = null;
+  }
+  /**
+   * Opens the paste-mode chooser at the given position.
+   *
+   * @param {PasteChooserPosition} position Viewport position for the chooser.
+   */
+  open(position) {
+    this.destroy();
+    const doc = this.hostRoot.ownerDocument;
+    const chooser = doc.createElement('div');
+    chooser.setAttribute(RTEPasteChooserUI.CHOOSER_ATTR, 'true');
+    chooser.style.position = 'fixed';
+    chooser.style.zIndex = '1000';
+    chooser.style.left = `${position.left}px`;
+    chooser.style.top = `${position.top}px`;
+    const dropdownEl = this.createPasteChooserDropdown(doc, position.placement);
+    dropdownEl.placement = position.placement;
+    chooser.append(dropdownEl);
+    this.hostRoot.appendChild(chooser);
+    this.chooserEl = chooser;
+    this.dropdownEl = dropdownEl;
+    dropdownEl.addEventListener('vegaShow', () => {
+      if (this.triggerButtonEl) {
+        this.triggerButtonEl.selected = true;
+      }
+    });
+    dropdownEl.addEventListener('vegaHide', () => {
+      if (this.triggerButtonEl) {
+        this.triggerButtonEl.selected = false;
+      }
+    });
+  }
+  /**
+   * Removes the chooser from the DOM.
+   */
+  destroy() {
+    var _a;
+    if (this.dropdownEl && typeof this.dropdownEl.hide === 'function') {
+      void this.dropdownEl.hide();
+    }
+    if ((_a = this.chooserEl) === null || _a === void 0 ? void 0 : _a.parentNode) {
+      this.chooserEl.parentNode.removeChild(this.chooserEl);
+    }
+    if (this.triggerButtonEl) {
+      this.triggerButtonEl.selected = false;
+    }
+    this.dropdownEl = null;
+    this.chooserEl = null;
+    this.triggerButtonEl = null;
+  }
+  /**
+   * Determines whether the given event path targets the chooser.
+   *
+   * @param {EventTarget[]} eventPath Composed path of an event.
+   * @returns {boolean} `true` when the path includes the chooser.
+   */
+  includesEventPath(eventPath) {
+    if (!this.chooserEl) {
+      return false;
+    }
+    const isDropdownContentClick = eventPath.some((target) => {
+      return 'tagName' in target && target.tagName === 'VEGA-DROPDOWN-CONTENT-BOX';
+    });
+    return eventPath.includes(this.chooserEl) || isDropdownContentClick;
+  }
+  /**
+   * Builds the dropdown element with the rich text paste option.
+   *
+   * @param {Document} doc Document used to create elements.
+   * @param {['bottom', 'top'] | ['top', 'bottom']} placement Preferred placement order.
+   * @returns {HTMLElement} Configured dropdown element.
+   */
+  createPasteChooserDropdown(doc, placement) {
+    const dropdownEl = doc.createElement('vega-dropdown');
+    dropdownEl.trigger = 'click';
+    dropdownEl.selectType = 'single';
+    dropdownEl.selectedSourceKey = 'rich';
+    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');
+    triggerButton.setAttribute('aria-label', VegaInternalTranslation.t('Paste options'));
+    triggerButton.setAttribute('arrow-icon', arrowIcon);
+    triggerButton.icon = 'rte-paste';
+    triggerButton.showArrowIcon = true;
+    triggerButton.selected = false;
+    this.triggerButtonEl = triggerButton;
+    const tooltipEl = doc.createElement('vega-tooltip');
+    tooltipEl.text = VegaInternalTranslation.t('Paste options');
+    tooltipEl.placement = ['bottom', 'top'];
+    tooltipEl.append(triggerButton);
+    dropdownEl.append(tooltipEl);
+    const itemsContainer = doc.createElement('div');
+    itemsContainer.setAttribute('slot', 'items');
+    itemsContainer.append(this.createDropdownItem(doc, 'rich', VegaInternalTranslation.t('Use rich text'), RTEPasteChooserUI.CHOOSER_RICH_ATTR));
+    dropdownEl.append(itemsContainer);
+    dropdownEl.addEventListener('vegaDropdownClick', (event) => {
+      const mode = event.detail;
+      if (mode === 'rich') {
+        this.callbacks.onModeSelect(mode);
+      }
+    });
+    return dropdownEl;
+  }
+  /**
+   * Creates a single dropdown item element for a paste mode.
+   *
+   * @param {Document} doc Document used to create the element.
+   * @param {PasteMode} key Paste mode key for the item.
+   * @param {string} label Display label for the item.
+   * @param {string} dataAttrName Data attribute marker for the item.
+   * @returns {HTMLVegaDropdownItemElement} Configured dropdown item element.
+   */
+  createDropdownItem(doc, key, label, dataAttrName) {
+    const itemEl = doc.createElement('vega-dropdown-item');
+    itemEl.itemKey = key;
+    itemEl.label = label;
+    itemEl.setAttribute(dataAttrName, 'true');
+    return itemEl;
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'rte-paste': paste,
+  });
+})();
+RTEPasteChooserUI.CHOOSER_ATTR = 'data-rte-paste-chooser';
+RTEPasteChooserUI.CHOOSER_RICH_ATTR = 'data-rte-paste-type-rich';
+RTEPasteChooserUI.CHOOSER_TRIGGER_ATTR = 'data-rte-paste-trigger';

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

@@ -0,0 +1,6 @@
+/**
+ * Custom DataTransfer MIME type used to tag a synthetic paste with the chosen
+ * paste mode (e.g. 'rich' or 'plain'), so downstream paste handling can decide
+ * whether to preserve the original inline styles.
+ */
+export const RTE_PASTE_MODE_DATA_TYPE = 'application/x-vega-rte-paste-mode';