@globalpayments/vega 2.88.0 → 2.89.0

package/dist/collection/components/vega-rich-text-editor/extensions/horizontal-line/filter-styles-strategies/horizontal-line-block/horizontal-line-filter-styles-strategy.js

@@ -0,0 +1,45 @@
+import { RTEFilterStylesStrategy, } from '../../../../dto/filter-styles-strategies/filter-styles-strategy.abstract';
+import { Predicate } from './predicate';
+/**
+ * Default visual styles for the `<hr>` element in the RTE.
+ * These styles match the CSS applied in `horizontal-line-block-styles.css`.
+ *
+ * @see {@link file://extensions/horizontal-line/renderers/horizontal-line-block-styles.css} — must stay in sync.
+ */
+export const HR_DEFAULT_STYLES = {
+  display: 'inline-block',
+  width: '100%',
+  height: '4px',
+  backgroundColor: 'rgb(222, 222, 222)',
+  borderWidth: '0px',
+};
+/**
+ * Filter styles strategy for horizontal line blocks.
+ * Strips default HR visual styles during output and refills them during input,
+ * ensuring source edit round-trips do not lose information.
+ */
+export class HorizontalLineFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = HR_DEFAULT_STYLES;
+    this.elementTagName = 'hr';
+  }
+  /**
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    return Predicate.isHorizontalLineBlock(blockOrNodeInstance.dtoName);
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(_blockOrNodeClassName, element) {
+    return element.tagName.toLowerCase() === this.elementTagName;
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    return this.buildCssTextForStyles(this.elementTagName, this.classNameToBeAdded);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/horizontal-line/filter-styles-strategies/horizontal-line-block/predicate.js

@@ -0,0 +1,14 @@
+/**
+ * Predicate class provides static methods to check specific conditions on HTML elements or dto instances.
+ */
+export class Predicate {
+  /**
+   * Checks if the given class name corresponds to a horizontal line block.
+   *
+   * @param {string} className The class name to check.
+   * @returns {boolean} True if the class name corresponds to a horizontal line block, false otherwise.
+   */
+  static isHorizontalLineBlock(className) {
+    return className === 'RTEHorizontalLineBlock';
+  }
+}

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

@@ -0,0 +1,41 @@
+import { VegaRTEExtension } from '../extension.abstract';
+import { RTEHorizontalLineBlock } from './dto/horizontal-line-block';
+import { RTEHorizontalLineBlockRenderer } from './renderers/horizontal-line-block-renderer';
+import { RTEHorizontalLineToolbarButtonRenderer } from './renderers/horizontal-line-toolbar-button-renderer';
+import { HrToHorizontalLineBlockStrategy } from './action-handler-strategies/hr-to-horizontal-line-block-strategy';
+import { InsertHorizontalLineBlockStrategy } from './action-handler-strategies/horizontal-line-block-insert-strategy';
+import { INSERT_HORIZONTAL_LINE_BLOCK } from './actions/insert-horizontal-line-block-action';
+import { RTETextBlock } from '../../dto/blocks/text-block';
+import { RTEImageBlock } from '../../dto/blocks/image-block';
+import { VegaRTEContent } from '../../dto/content-state';
+import { HorizontalLineFilterStylesStrategy } from './filter-styles-strategies/horizontal-line-block/horizontal-line-filter-styles-strategy';
+/**
+ * Extension that adds horizontal line (`<hr>`) support to the Vega Rich Text Editor.
+ */
+export class VegaRTEHorizontalLineExtension extends VegaRTEExtension {
+  constructor() {
+    super();
+    this.blockRenderer = new RTEHorizontalLineBlockRenderer();
+    this.toolbarButtonRenderer = new RTEHorizontalLineToolbarButtonRenderer();
+    // Register basic block strategies (delete, append, paste, etc.)
+    this.registerBlockBasicStrategies(RTEHorizontalLineBlock.name);
+    // Register the block DTO class
+    this.registerNode('horizontal-line', RTEHorizontalLineBlock);
+    // Register the renderer
+    this.registerRenderer('horizontal-line', this.blockRenderer);
+    // Register the toolbar button
+    this.registerToolbarButtonRenderer('horizontalLine', this.toolbarButtonRenderer);
+    // Register HTML → DTO conversion strategy
+    this.registerElementToBlockDTOClassStrategy(new HrToHorizontalLineBlockStrategy());
+    // Register filter styles strategy for source edit round-trip
+    VegaRTEExtension.registerFilterStylesStrategy(RTEHorizontalLineBlock.dtoName, new HorizontalLineFilterStylesStrategy());
+  }
+}
+(() => {
+  const insertStrategy = new InsertHorizontalLineBlockStrategy();
+  // Register insert strategy for all block types that can be a target
+  VegaRTEExtension.registerActionHandleStrategy(VegaRTEContent.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTETextBlock.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTEImageBlock.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTEHorizontalLineBlock.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
+})();

package/dist/collection/components/vega-rich-text-editor/extensions/horizontal-line/renderers/horizontal-line-block-renderer.js

@@ -0,0 +1,37 @@
+import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
+import { RTEDecoratorNode } from '../../../dto/nodes/decorator-node';
+import styles from './horizontal-line-block-styles.css';
+/**
+ * Renderer for horizontal line blocks in the rich text editor.
+ */
+export class RTEHorizontalLineBlockRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(createElement, block, rteContext) {
+    const node = block.children[0];
+    const customStyles = block.getStyles(rteContext);
+    const annotationClasses = block.getClasses(rteContext);
+    const hrClass = [RTEDecoratorNode.DECORATOR_NODE_CLASS, annotationClasses]
+      .filter(Boolean)
+      .join(' ');
+    return createElement('div', {
+      key: block.id,
+      class: `v-rte-horizontal-line ${RTEDecoratorNode.DECORATOR_CONTAINER_CLASS}`,
+      ref: this.useRef(block),
+    }, [
+      createElement('hr', {
+        key: (node === null || node === void 0 ? void 0 : node.id) || block.id + '-hr',
+        class: hrClass,
+        style: Object.keys(customStyles).length > 0 ? customStyles : undefined,
+        ref: node ? this.useRef(node) : undefined,
+      }),
+    ]);
+  }
+  /**
+   * @inheritDoc
+   */
+  injectRTEScopeStyles() {
+    return styles;
+  }
+}

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

@@ -0,0 +1,77 @@
+import { VegaRTEToolbarButtonRenderer } from '../../base-toolbar-button-renderer';
+import HorizontalLine from '../assets/horizontal-line';
+import { INSERT_HORIZONTAL_LINE_BLOCK, InsertHorizontalLineBlockAction, } from '../actions/insert-horizontal-line-block-action';
+import { ActionHandleStrategyRegistry } from '../../../dto/action-handle-strategies/action-handle-strategy-registry';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import { VegaInternalTranslation } from '../../../../../helpers/translation/internal-translation-controller';
+/**
+ * Toolbar button renderer for horizontal line insertion.
+ */
+export class RTEHorizontalLineToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  /**
+   * Renders the horizontal line toolbar button.
+   *
+   * @param {VegaRTECreateElementFunction} createElement - The function to create elements.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context.
+   * @returns {VegaRTERenderResult} The rendered toolbar button.
+   */
+  render(createElement, editorContext) {
+    return this.renderButton(createElement, editorContext, {
+      icon: 'horizontal-line',
+      tooltip: { text: VegaInternalTranslation.t('Horizontal line') },
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  isDisabled(editorContext) {
+    const context = this.getExtensionContext(editorContext.host);
+    if (context) {
+      const { host, getSelectedNodes } = context;
+      const [startNode] = getSelectedNodes();
+      return startNode
+        ? host.disabled ||
+          !ActionHandleStrategyRegistry.canHandle(INSERT_HORIZONTAL_LINE_BLOCK, startNode.parent)
+        : host.disabled;
+    }
+    return false;
+  }
+  /**
+   * @inheritDoc
+   */
+  handleButtonClick(editorContext) {
+    if (this.isDisabled(editorContext)) {
+      return;
+    }
+    const context = this.getExtensionContext(editorContext.host);
+    if (context) {
+      const { host, getSelectedNodes, flushValue } = context;
+      const selectedNodes = getSelectedNodes();
+      const focusNode = selectedNodes[0];
+      const startOffset = editorContext.rteRange.startOffset;
+      const action = new InsertHorizontalLineBlockAction(focusNode, startOffset);
+      if (!focusNode) {
+        host.value.apply(action);
+      }
+      else if (focusNode.parent) {
+        focusNode.parent.apply(action);
+      }
+      if (action.nextFocusNode) {
+        host.value.apply(new UpdateCursorPositionAction(action.nextFocusNode, 0));
+      }
+      flushValue(host.value);
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  handleDropdownClick() {
+    // No dropdown for horizontal line
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'horizontal-line': HorizontalLine,
+  });
+})();

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

@@ -19,6 +19,7 @@ export { RTELanguageToolbarButtonRenderer } from './extensions/languages/languag
 export { VegaRTELanguageExtension } from './extensions/languages/language-extension';
 export { VegaRTEFunctionExtension } from './extensions/functions/function-extension';
 export { VegaRTETableExtension } from './extensions/table/table-extension';
+export { VegaRTEHorizontalLineExtension } from './extensions/horizontal-line/horizontal-line-extension';
 export { VegaRTESpecialCharactersExtension } from './extensions/special-characters/special-characters-extension';
 export { VegaRTESpecialCharactersEssentials, VegaRTESpecialCharactersLatin, VegaRTESpecialCharactersMathematical, VegaRTESpecialCharactersArrows, VegaRTESpecialCharactersCurrency, VegaRTESpecialCharactersText, } from './extensions/special-characters/constants/default-categories';
 export { VegaRTELineHeightExtension } from './extensions/line-height/line-height-extension';

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

@@ -64,6 +64,14 @@ export class HtmlBlockStrategy extends BlockToRTEBlockStrategyAbstract {
    * @returns {boolean} True if the element should be treated as inline content.
    */
   isInlineTagWithoutBlockChildren(element, options) {
+    // An empty always-inline tag (e.g. a loose <br>) is phrasing content and must
+    // never become a standalone html-block — it has to stay inline so it becomes an
+    // editable line-break text node (matching <p><br></p>) instead of a non-editable
+    // html-block. Non-empty always-inline tags (e.g. <a> wrapping a block <video>)
+    // fall through to the regular block-children checks below.
+    if (ALWAYS_INLINE_TAGS.has(element.nodeName) && element.childNodes.length === 0) {
+      return true;
+    }
     if (isInBlockTextContext(element)) {
       // Empty elements that are not recognized inline elements should not
       // be forced inline — they may represent block-level embedded content

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/inline-element-to-text-node-strategy.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
 import { isHTMLElement } from '../../../../../../utils/ui';
 import { ElementToTextNodeStrategy } from './element-to-text-node-strategy';
 import htmlElementToAnnotationGenerator from './annotation-handler/html-element-to-annotation-generator';
@@ -31,7 +42,13 @@ export class InlineElementToTextNodeStrategy extends ElementToTextNodeStrategy {
         }
         : annotations }, options));
     if (child.nodeName === 'BR') {
-      return this.generateTextNode('\n', curAnnotations);
+      // Represent <br> as a plain '\n' text node; the renderer emits <br> for text === '\n'.
+      // Carrying the br as an INLINE_HTML annotation here would let it suppress later
+      // user-typed characters at the same caret position (VD-9229). br is void so when
+      // it ends up at the top of the inlineHtml chain it has no parent wrapper to keep.
+      const { inlineHtml } = curAnnotations, rest = __rest(curAnnotations, ["inlineHtml"]);
+      const brAnnotations = inlineHtml && inlineHtml.htmlTag === 'br' ? rest : curAnnotations;
+      return this.generateTextNode('\n', brAnnotations);
     }
     else if (child.childNodes.length === 0) {
       // For empty dom, there will be no internal iteration, we need to handle it directly here.

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

@@ -14,7 +14,7 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.renderHintMessage = () => {
-      return h("vega-text", null, this.hint);
+      return h("vega-text", { text: this.hint });
     };
     this.renderTextContent = () => {
       return (h("div", { class: {

package/dist/collection/components/vega-segment-control/slimmers/renderers/vega-segment-renderer.js

@@ -42,7 +42,7 @@ export class VegaSegmentRenderer extends VegaSlimmer {
       h("vega-icon", { icon: props.icon, size: "size-16" })));
   }
   renderText(props) {
-    return (h("vega-text", { overflow: "ellipsis", tooltip: { placement: ['bottom', 'top'] } }, props.text));
+    return (h("vega-text", { overflow: "ellipsis", tooltip: { placement: ['bottom', 'top'] }, text: props.text }));
   }
 }
 __decorate([

package/dist/collection/components/vega-selection-tile/vega-selection-tile-group/slimmers/renderers/vega-selection-tile-group-renderer.js

@@ -17,27 +17,9 @@ export class VegaSelectionTileGroupRenderer extends VegaSlimmer {
       this.renderHint()));
   }
   renderLabel() {
-    return (this.label && (
-    // The label is exposed as its own focusable VoiceOver stop:
-    // `tabindex="0"` puts it in the tab / VO swipe order, and
-    // `aria-label` provides a clean accessible name that includes
-    // "required" as a spoken word.
-    //
-    // The visible text + asterisk are wrapped in an
-    // `aria-hidden="true"` span so VoiceOver does not descend into
-    // the children and create extra swipe stops on the raw text
-    // or the decorative "*" — the `aria-label` above is the
-    // single thing AT users hear for this stop.
-    h("div", { class: "vega-label" },
-      h("span", { 
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabindex: 0, "aria-label": this.required ? `${this.label} (required)` : this.label },
-        h("span", { "aria-hidden": "true" },
-          this.label,
-          this.renderRequire())))));
-  }
-  renderRequire() {
-    return (this.required && (h("span", { class: "vega-require", "aria-hidden": "true" }, "*")));
+    return (
+    // Make label focusable so VoiceOver/keyboard navigation lands on it before tile
+    h("vega-field-label", { isFieldRequired: this.required, label: this.label, disabled: this.disabled, tabindex: 0, optional: this.optional }));
   }
   renderContainer() {
     return (
@@ -83,12 +65,18 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaSelectionTileGroupRenderer.prototype, "required", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSelectionTileGroupRenderer.prototype, "optional", void 0);
 __decorate([
   MapToComponentField()
 ], VegaSelectionTileGroupRenderer.prototype, "hint", void 0);
 __decorate([
   MapToComponentField()
 ], VegaSelectionTileGroupRenderer.prototype, "layout", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSelectionTileGroupRenderer.prototype, "disabled", void 0);
 __decorate([
   MapToComponentField()
 ], VegaSelectionTileGroupRenderer.prototype, "itemsController", void 0);

package/dist/collection/components/vega-selection-tile/vega-selection-tile-group/vega-selection-tile-group.css

@@ -48,45 +48,8 @@
 :host .vega-hidden {
   display: none;
 }
-:host .vega-label {
-  font-family: "Inter", sans-serif;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 22px;
-  letter-spacing: 0px;
+:host vega-field-label {
   margin-bottom: 16px;
-  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  :host .vega-label {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 22px;
-    letter-spacing: 0px;
-  }
-}
-@media screen and (min-width: 1024px) and (max-width: 1439px) {
-  :host .vega-label {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 22px;
-    letter-spacing: 0px;
-  }
-}
-@media screen and (min-width: 1440px) and (max-width: 9999px) {
-  :host .vega-label {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 22px;
-    letter-spacing: 0px;
-  }
-}
-:host .vega-label .vega-require {
-  color: rgba(var(--v-text-error, 189, 41, 71, 1));
-  margin-left: 4px;
 }
 :host .vega-hint {
   font-family: "Inter", sans-serif;

package/dist/collection/components/vega-selection-tile/vega-selection-tile-group/vega-selection-tile-group.js

@@ -89,6 +89,16 @@ export class VegaSelectionTileGroup {
      * @vegaVersion 2.7.0
      */
     this.layout = 'vertical';
+    /**
+     * Indicates whether the field should be presented as optional.
+     *
+     * This property only takes effect when `required` is `false`.
+     * When `true`, an "optional" label is displayed next to the field label.
+     *
+     * @default false
+     * @vegaVersion 2.89.0
+     */
+    this.optional = false;
     /**
      * Defines custom validation rules for the selection tile group field.
      *
@@ -275,6 +285,30 @@ export class VegaSelectionTileGroup {
       "attribute": "required",
       "reflect": false
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.89.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/vega-signature-capture/slimmers/written-mode/renderers/written-mode-renderer.js

@@ -33,7 +33,7 @@ export class WrittenModeRenderer extends VegaSlimmer {
       this.renderFooter()));
   }
   renderLabel() {
-    return (this.label && (h("vega-field-label", { onClick: this.signatureCaptureFocus, isFieldRequired: this.required, label: this.label, disabled: this.disabled })));
+    return (this.label && (h("vega-field-label", { onClick: this.signatureCaptureFocus, isFieldRequired: this.required, label: this.label, disabled: this.disabled, optional: this.optional })));
   }
   renderContainer() {
     return (h("div", { class: {
@@ -83,6 +83,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], WrittenModeRenderer.prototype, "required", void 0);
+__decorate([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "optional", void 0);
 __decorate([
   MapToComponentField()
 ], WrittenModeRenderer.prototype, "showClearBtn", void 0);

package/dist/collection/components/vega-signature-capture/vega-signature-capture.js

@@ -71,6 +71,16 @@ export class VegaSignatureCapture {
      * @vegaVersion 2.19.0
      */
     this.required = false;
+    /**
+     * Indicates whether the field should be presented as optional.
+     *
+     * This property only takes effect when `required` is `false`.
+     * When `true`, an "optional" label is displayed next to the field label.
+     *
+     * @default false
+     * @vegaVersion 2.89.0
+     */
+    this.optional = false;
     /**
      * Determines whether the clear button is displayed.
      *
@@ -230,6 +240,30 @@ export class VegaSignatureCapture {
       "reflect": true,
       "defaultValue": "false"
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.89.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "showClearBtn": {
       "type": "boolean",
       "mutable": false,