@globalpayments/vega 2.93.0 → 2.95.0

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

@@ -0,0 +1,74 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { getCurrentBreakpoint } from '../../../../../utils/breakpoints';
+import { SharedBackdropManager } from '../../../../../helpers/backdrop';
+/**
+ * Left-nav specific backdrop manager — extends SharedBackdropManager to get its own static scope.
+ * Each subclass of SharedBackdropManager gets its own separate static state (consumers, visibility intents, etc).
+ */
+export class VegaLeftNavBackdropManager extends SharedBackdropManager {
+  /**
+   * Watch openState changes and update visibility intent.
+   *
+   * @param {LeftNavOpenStateType} newState - The new open state.
+   */
+  watchOpenState(newState) {
+    const shouldShow = newState === 'open' && this.shouldShowBackdrop();
+    this.setVisibilityIntent(shouldShow);
+  }
+  /**
+   * Watch showAsOverlay changes and re-evaluate visibility.
+   */
+  watchShowAsOverlay() {
+    this.watchOpenState(this.openState);
+  }
+  /**
+   * Customize backdrop creation for left-nav use case.
+   *
+   * @param {Document} doc - The document reference.
+   * @returns {HTMLVegaBackdropElement} The created and configured backdrop element.
+   */
+  createBackdrop(doc) {
+    const backdrop = doc.createElement('vega-backdrop');
+    backdrop.classList.add(VegaLeftNavBackdropManager.backdropClassName);
+    backdrop.duration = 150;
+    backdrop.visible = false;
+    doc.body.append(backdrop);
+    return backdrop;
+  }
+  /**
+   * Determine if backdrop should be shown based on current state.
+   *
+   * @returns {boolean} True if backdrop should be visible.
+   */
+  shouldShowBackdrop() {
+    return this.showAsOverlay || !this.isLargeScreen();
+  }
+  /**
+   * Check if current breakpoint is large screen.
+   *
+   * @returns {boolean} True if current breakpoint is 'L' or 'XL'.
+   */
+  isLargeScreen() {
+    const breakpoint = getCurrentBreakpoint();
+    return breakpoint === 'L' || breakpoint === 'XL';
+  }
+}
+VegaLeftNavBackdropManager.backdropClassName = 'vega-left-nav-backdrop';
+__decorate([
+  MapToComponentField()
+], VegaLeftNavBackdropManager.prototype, "openState", void 0);
+__decorate([
+  MapToComponentField()
+], VegaLeftNavBackdropManager.prototype, "showAsOverlay", void 0);
+__decorate([
+  MapToComponentMethod('watchOpenState')
+], VegaLeftNavBackdropManager.prototype, "watchOpenState", null);
+__decorate([
+  MapToComponentMethod('watchShowAsOverlay')
+], VegaLeftNavBackdropManager.prototype, "watchShowAsOverlay", null);

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

@@ -9,6 +9,7 @@ import { PageResizeObserverSlimmer } from '../../../../../helpers/slimmers/page-
 import { executeAfterTransition } from '../../../../../utils/effect';
 import { FeatureFlag } from '../../../../../helpers/feature-control/feature-flag-controller';
 import { checkIsVoiceOverClick, getFirstFocusableElement } from '../../../../../utils/ui';
+import { getCurrentBreakpoint } from '../../../../../utils/breakpoints';
 export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
   /**
    * The below method is e2e-test covered in
@@ -18,7 +19,11 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
     /* eslint-disable jsdoc/require-jsdoc*/
     super({
       callback: /* istanbul ignore next */ () => {
+        if (this.showAsOverlay) {
+          return;
+        }
         this.updateMainContentUI(this.openState);
+        this.backdropManager.watchOpenState(this.openState);
       },
     });
     this.isVoiceOverClick = false;
@@ -72,6 +77,7 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
     }
   }
   watchOpenState(newState) {
+    this.backdropManager.watchOpenState(newState);
     this.updateMainContentUI(newState);
     if (newState === 'open') {
       this.open = true;
@@ -92,6 +98,7 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
     }
   }
   watchShowAsOverlay() {
+    this.backdropManager.watchShowAsOverlay();
     this.updateMainContentUI(this.openState);
   }
   /**
@@ -169,7 +176,7 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
       this.host.style.display = 'flex';
       setTimeout(() => {
         this.host.classList.add('open');
-        if (mainContent && !this.backdropController.shouldShowBackdrop()) {
+        if (mainContent && !this.shouldShowBackdrop()) {
           bodyElement === null || bodyElement === void 0 ? void 0 : bodyElement.classList.remove('vega-overflow-hidden');
           mainContent.classList.add('open');
         }
@@ -190,6 +197,10 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
       }, this.host);
     }
   }
+  shouldShowBackdrop() {
+    const breakpoint = getCurrentBreakpoint();
+    return this.showAsOverlay || (breakpoint !== 'L' && breakpoint !== 'XL');
+  }
 }
 __decorate([
   MapToComponentField()
@@ -205,7 +216,10 @@ __decorate([
 ], VegaLeftNavOpenStateController.prototype, "stateUpdateEventEmitter", void 0);
 __decorate([
   MapToComponentField()
-], VegaLeftNavOpenStateController.prototype, "backdropController", void 0);
+], VegaLeftNavOpenStateController.prototype, "showAsOverlay", void 0);
+__decorate([
+  MapToComponentField()
+], VegaLeftNavOpenStateController.prototype, "backdropManager", void 0);
 __decorate([
   MapToComponentMethod('componentDidLoad')
 ], VegaLeftNavOpenStateController.prototype, "componentDidLoad", null);

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

@@ -17,7 +17,7 @@ export class VegaLeftNavZIndexController extends VegaSlimmer {
    */
   /* istanbul ignore next */
   updateZIndex() {
-    const backDrop = this.backdropController.getBackdrop();
+    const backDrop = this.backdropManager.getBackdrop();
     if (this.openState == 'open') {
       backDrop && InternalVegaZIndexManager.setZIndex(backDrop, 'base');
       InternalVegaZIndexManager.setZIndex(this.host, 'base');
@@ -38,7 +38,7 @@ __decorate([
 ], VegaLeftNavZIndexController.prototype, "openState", void 0);
 __decorate([
   MapToComponentField()
-], VegaLeftNavZIndexController.prototype, "backdropController", void 0);
+], VegaLeftNavZIndexController.prototype, "backdropManager", void 0);
 __decorate([
   MapToComponentMethod('watchOpenState')
 ], VegaLeftNavZIndexController.prototype, "watchOpenState", null);

package/dist/collection/components/vega-nav/vega-left-nav/vega-left-nav.js

@@ -11,6 +11,7 @@ import { VegaLeftNavOpenStateController } from './slimmers/controllers/vega-left
 import { VegaLeftNavHeaderRenderer } from './slimmers/renderers/vega-left-nav-header-renderer';
 import { VegaLeftNavFooterRenderer } from './slimmers/renderers/vega-left-nav-footer-renderer';
 import { VegaLeftNavZIndexController } from './slimmers/controllers/vega-left-nav-zindex-controller';
+import { VegaLeftNavBackdropManager } from './slimmers/controllers/vega-left-nav-backdrop-manager';
 import { VegaLeftNavBackdropController } from './slimmers/controllers/vega-left-nav-backdrop-controller';
 import { InjectKeyboardManager } from '../../../decorators/property-decorators/inject-keyboard-manager';
 import { VegaNavListRenderer } from '../slimmers/renderers/vega-nav-list-renderer';
@@ -33,6 +34,7 @@ export class VegaLeftNav {
     this.headerRenderer = new VegaLeftNavHeaderRenderer();
     this.footerRenderer = new VegaLeftNavFooterRenderer();
     this.openStateController = new VegaLeftNavOpenStateController();
+    this.backdropManager = new VegaLeftNavBackdropManager();
     this.backdropController = new VegaLeftNavBackdropController();
     this.zIndexController = new VegaLeftNavZIndexController();
     this.listRenderer = new VegaNavListRenderer();
@@ -404,6 +406,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "openStateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaLeftNav.prototype, "backdropManager", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "backdropController", void 0);
@@ -437,7 +442,7 @@ __decorate([
       keyCode: 'Escape',
       // eslint-disable-next-line jsdoc/require-jsdoc
       activeElementInScope: /* istanbul ignore next */ () => {
-        const backdrop = target.backdropController.getBackdrop();
+        const backdrop = target.backdropManager.getBackdrop();
         if (backdrop && backdrop.visible) {
           // eslint-disable-next-line no-restricted-globals
           return [document.body];
@@ -445,7 +450,7 @@ __decorate([
         return [target.host];
       },
       callback: /* istanbul ignore next */ () => {
-        const backdrop = target.backdropController.getBackdrop();
+        const backdrop = target.backdropManager.getBackdrop();
         if (backdrop && backdrop.visible) {
           target.openStateController.setOpenState('close');
         }

package/dist/collection/components/vega-progress-tracker/slimmers/controllers/vega-progress-tracker-current-steps-controller.js

@@ -59,6 +59,10 @@ export class VegaProgressTrackerCurrentStepsController extends VegaSlimmer {
   watchCompletedSteps() {
     this.syncUpCurrentSteps();
   }
+  /** while canClickStep changed, we need sync up current steps */
+  watchCanClickStep() {
+    this.syncUpCurrentSteps();
+  }
   /**
    * Sync up current steps
    */
@@ -123,3 +127,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchCompletedSteps')
 ], VegaProgressTrackerCurrentStepsController.prototype, "watchCompletedSteps", null);
+__decorate([
+  MapToComponentMethod('watchCanClickStep')
+], VegaProgressTrackerCurrentStepsController.prototype, "watchCanClickStep", null);

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker.js

@@ -130,6 +130,9 @@ export class VegaProgressTracker {
   watchCompletedSteps() {
     methodPlaceholder();
   }
+  watchCanClickStep() {
+    methodPlaceholder();
+  }
   /**
    * Invoke this method to change the tracker's current step
    *    to the next step, if available.
@@ -486,6 +489,9 @@ export class VegaProgressTracker {
     }, {
       "propName": "completedSteps",
       "methodName": "watchCompletedSteps"
+    }, {
+      "propName": "canClickStep",
+      "methodName": "watchCanClickStep"
     }]; }
 }
 __decorate([

package/dist/collection/components/vega-rich-text-editor/dto/annotations/custom-style-annotation.js

@@ -1,3 +1,4 @@
+import { escapeHtmlAttribute } from '../../helpers/utils';
 import { CommonAnnotation, CommonAnnotationTypeEnum } from './common-annotation.abstract';
 /**
  * Annotation to add custom attributes of element
@@ -60,8 +61,8 @@ export class CustomStyleAnnotation extends CommonAnnotation {
    * @returns {string} custom style string
    */
   toString() {
-    return `style="${Object.entries(this.customStyle)
+    return `style="${escapeHtmlAttribute(Object.entries(this.customStyle)
       .map(([key, value]) => `${key}: ${value};`)
-      .join(' ')}"`;
+      .join(' '))}"`;
   }
 }

package/dist/collection/components/vega-rich-text-editor/dto/blocks/block.abstract.js

@@ -17,6 +17,7 @@ import { InternalWrapperAnnotation } from '../annotations/internal-wrapper-annot
 import RTEDTOClassManager from '../../../../helpers/rte-manager/dto-class-manager';
 import { RTEAnnotationStyle } from '../annotations/annotation-style';
 import { RTEFilterStylesStrategyRegistry } from '../filter-styles-strategies/filter-styles-strategy-registry';
+import { escapeHtmlAttribute } from '../../helpers/utils';
 /**
  * Abstract class for block
  */
@@ -235,7 +236,7 @@ export class RTEBlock {
       ...customAttributeString,
       classNames && classNames.length > 0 ? `class="${classNames.join(' ')}"` : null,
       styles && Object.keys(styles).length > 0
-        ? `style="${blockAnnotationStyle.toCssText({ standalone: true }, undefined, styles)}"`
+        ? `style="${escapeHtmlAttribute(blockAnnotationStyle.toCssText({ standalone: true }, undefined, styles))}"`
         : null,
       ...attrs,
     ].filter(isNonNullable);

package/dist/collection/components/vega-rich-text-editor/dto/filter-styles-strategies/code-block/code-node-filter-styles-strategy.js

@@ -37,7 +37,7 @@ CodeBlockNodeFilterStylesStrategy.STYLES = {
   boxSizing: 'border-box',
   color: 'rgba(var(--v-text-primary, 32, 54, 69, 1))',
   textAlign: 'left',
-  fontFamily: '"Roboto Mono"',
+  fontFamily: "'Roboto Mono'",
   fontWeight: '400',
   lineHeight: '22px',
   fontSize: '16px',

package/dist/collection/components/vega-rich-text-editor/dto/nodes/node.abstract.js

@@ -12,6 +12,7 @@ import { CustomStyleAnnotation } from '../annotations/custom-style-annotation';
 import { methodPlaceholder } from 'vega-slimmer/core';
 import { RTEAnnotationStyle } from '../annotations/annotation-style';
 import { RTEFilterStylesStrategyRegistry } from '../filter-styles-strategies/filter-styles-strategy-registry';
+import { escapeHtmlAttribute } from '../../helpers/utils';
 export var NodeTypeEnum;
 (function (NodeTypeEnum) {
   NodeTypeEnum["TEXT"] = "TEXT";
@@ -167,7 +168,7 @@ export class RTENode {
       ...customAttributeString,
       classNames && classNames.length > 0 ? `class="${classNames.join(' ')}"` : null,
       styles && Object.keys(styles).length > 0
-        ? `style="${nodeAnnotationStyle.toCssText({ standalone: true }, undefined, styles)}"`
+        ? `style="${escapeHtmlAttribute(nodeAnnotationStyle.toCssText({ standalone: true }, undefined, styles))}"`
         : null,
       ...attrs,
     ].filter(isNonNullable);

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

@@ -50,7 +50,7 @@ export class VegaRTEToolbarButtonRenderer {
    * @returns {VegaRTERenderResult} - The render result for the dropdown.
    */
   renderDropdown(h, editorContext, dropdownProps, children) {
-    return h('vega-dropdown', Object.assign({ trigger: 'click', searchable: false, maxWidth: '200', itemDisplayRule: 'ellipsis', 
+    return h('vega-dropdown', Object.assign({ trigger: 'click', searchable: false, maxWidth: '200', itemDisplayRule: 'ellipsis', isScreenPosition: true, 
       // eslint-disable-next-line jsdoc/require-jsdoc
       ref: (el) => {
         this.dropdownEl = el;

package/dist/collection/components/vega-rich-text-editor/extensions/find-replace/slimmer/controllers/helper/find-replace-highlight-manager.js

@@ -19,8 +19,9 @@ const HIGHLIGHT_ACTIVE_BG = `rgba(var(--v-rte-find-highlight-active-bg, ${HIGHLI
  * jumping, and VegaChange events), this manager renders semi-transparent
  * highlight rectangles in an absolutely-positioned overlay container.
  *
- * The overlay lives inside `.rich-text-editor-container` (the RTE's scroll
- * container) so highlight divs scroll naturally with the text content.
+ * The overlay lives inside `vega-rich-text-content`'s internal
+ * `.rich-text-content` container (the actual text scroll coordinate space).
+ * This keeps highlight rectangles aligned when the editable area scrolls.
  * `pointer-events: none` ensures highlights don't interfere with user
  * interaction (selection, typing, clicking).
  *
@@ -83,8 +84,11 @@ export class FindReplaceHighlightManager {
   }
   // ─── Private helpers ──────────────────────────────────────────────────────────
   /**
-   * Gets the existing overlay container or creates one inside the RTE's
-   * scroll container (`.rich-text-editor-container`).
+   * Gets the existing overlay container or creates one in the same coordinate
+   * space as rendered text.
+   *
+   * Mount target: `vega-rich-text-content` shadow root's
+   * `.rich-text-content` element (actual text scroll layer).
    *
    * @typedef HTMLVegaRichTextEditorElement - The type of the host rich text editor element.
    * @param {HTMLVegaRichTextEditorElement} host - The RTE host element.
@@ -96,8 +100,8 @@ export class FindReplaceHighlightManager {
     }
     const safeDocument = tryGetDocument();
     if (safeDocument) {
-      const scrollContainer = host.shadowRoot.querySelector('.rich-text-editor-container');
-      if (scrollContainer) {
+      const textContainer = this.resolveOverlayMountTarget(host);
+      if (textContainer) {
         // The overlay is appended as the last child (paints above content).
         // Blend mode is controlled via CSS variable --v-rte-find-highlight-blend:
         //   - Light (default): multiply (yellow darkens white bg, text readable)
@@ -113,13 +117,23 @@ export class FindReplaceHighlightManager {
         overlay.style.pointerEvents = 'none';
         overlay.style.overflow = 'visible';
         overlay.style.setProperty('mix-blend-mode', 'var(--v-rte-find-highlight-blend, multiply)');
-        scrollContainer.appendChild(overlay);
+        textContainer.appendChild(overlay);
         this.overlayContainer = overlay;
         return overlay;
       }
     }
     return null;
   }
+  /**
+   * Resolves the overlay mount target that matches the text rendering coordinate space.
+   *
+   * @param {HTMLVegaRichTextEditorElement} host - The RTE host element.
+   * @returns {Nullable<HTMLDivElement>} The preferred mount target or null.
+   */
+  resolveOverlayMountTarget(host) {
+    var _a, _b, _c, _d;
+    return ((_d = (_c = (_b = (_a = host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('vega-rich-text-content')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.rich-text-content')) !== null && _d !== void 0 ? _d : null);
+  }
   /**
    * Creates absolutely-positioned highlight rectangles for a single node
    * position within a match.

package/dist/collection/components/vega-rich-text-editor/extensions/find-replace/slimmer/renderers/find-replace-toolbar-button-renderer.js

@@ -139,6 +139,18 @@ export class FindReplaceToolbarButtonRenderer extends VegaRTEToolbarButtonRender
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(editorContext.host, VegaChange, this.debouncedRefresh);
     if (this.isHidden(editorContext) && this.isPopoverOpen && this.popoverRef) {
       void this.popoverRef.hide();
+      return;
+    }
+    // Keep the popover open but force a refresh of placement/z-index.
+    // This prevents stale geometry when editor layout/stacking changes while
+    // the panel is already visible (for example fullscreen toggle or resize).
+    // `show(true)` here is intentionally a refresh call, not a reopen.
+    // Verified behavior: this refresh does not introduce flickering/animation artifacts.
+    // Find & Replace differs from other toolbar popovers because it uses trigger='none'
+    // and stays open until explicitly closed. Other toolbar popovers use
+    // trigger='click' and auto-close when users click the fullscreen button.
+    if (this.isPopoverOpen && this.popoverRef) {
+      void this.popoverRef.show(true);
     }
   }
   /**

package/dist/collection/components/vega-rich-text-editor/extensions/fullscreen/assets/fullscreen-enter.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="M295 183c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l135-135V168c0 13.3 10.7 24 24 24s24-10.7 24-24V24c0-13.3-10.7-24-24-24H344c-13.3 0-24 10.7-24 24s10.7 24 24 24h86.1L295 183zM217 329c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L48 430.1V344c0-13.3-10.7-24-24-24s-24 10.7-24 24V488c0 13.3 10.7 24 24 24H168c13.3 0 24-10.7 24-24s-10.7-24-24-24H81.9L217 329z"/></svg>`,
+};

package/dist/collection/components/vega-rich-text-editor/extensions/fullscreen/assets/fullscreen-exit.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="M473 57c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-135 135V72c0-13.3-10.7-24-24-24s-24 10.7-24 24V216c0 13.3 10.7 24 24 24H424c13.3 0 24-10.7 24-24s-10.7-24-24-24H337.9L473 57zM7 455c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l135-135V440c0 13.3 10.7 24 24 24s24-10.7 24-24V296c0-13.3-10.7-24-24-24H56c-13.3 0-24 10.7-24 24s10.7 24 24 24h86.1L7 455z"/></svg>`,
+};

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();