@globalpayments/vega 2.73.0 → 2.76.0

package/dist/collection/components/vega-progress-tracker/slimmers/controllers/dto/internal-progress-tracker-step.js

@@ -13,23 +13,29 @@ export class InternalProgressTrackerStep {
    * @param {string} title - The title of the step.
    * @param {ProgressStepStatus} progressStatus - The progress status of the step.
    * @param {boolean} isCurrent - Indicates if this step is the current step.
+   * @param {boolean} clickable - Indicates if this step is clickable.
    */
-  constructor(stepKey, title, progressStatus, isCurrent) {
+  constructor(stepKey, title, progressStatus, isCurrent, clickable) {
     this.stepKey = stepKey;
     this.title = title;
     this.progressStatus = progressStatus;
     this.isCurrent = isCurrent;
+    this.clickable = clickable;
   }
   /**
    * Create InternalProgressTrackerStep array from steps property
    *
-   * @param {string[]} steps - An array of step keys.
+   * @param {HTMLElement} host - The host element.
+   * @param {string[] | VegaProgressTrackerStepItem[]} steps - An array of step keys.
    * @param {number} current - The current step index.
    * @param {string[]} completedSteps - An array of completed step keys.
    * @returns {InternalProgressTrackerStep[]} An array of InternalProgressTrackerStep instances.
    */
-  static fromSteps(steps, current, completedSteps) {
-    return steps.map((step, index) => new InternalProgressTrackerStep(step, step, this.getStepStatus(step, index, current, completedSteps), index === current));
+  static fromSteps(host, steps, current, completedSteps) {
+    return steps.map((step, index) => {
+      const stepKey = typeof step === 'string' ? step : step.title;
+      return new InternalProgressTrackerStep(stepKey, stepKey, this.getStepStatus(stepKey, index, current, completedSteps), index === current, this.getIsStepClickable(host, step));
+    });
   }
   /**
    * Create InternalProgressTrackerStep array from host slot elements
@@ -41,9 +47,27 @@ export class InternalProgressTrackerStep {
    */
   static fromHostSlot(host, current, completedSteps) {
     return Array.from(host.querySelectorAll('vega-progress-tracker-step')).map((step, index) => {
-      return new InternalProgressTrackerStep(step.stepKey, '', this.getStepStatus(step.stepKey, index, current, completedSteps), index === current);
+      const stepKey = step.stepKey;
+      return new InternalProgressTrackerStep(stepKey, '', this.getStepStatus(stepKey, index, current, completedSteps), index === current, this.getIsStepClickable(host, step));
     });
   }
+  /**
+   * Gets the clickable mode of the step.
+   *
+   * @param {HTMLElement} host - The host element.
+   * @param {string | VegaProgressTrackerStepItem} step - The step element.
+   * @returns { boolean } The clickable mode of the step.
+   */
+  static getIsStepClickable(host, step) {
+    //For the legacy string type steps, the clickable mode is determined by the canClickStep property on the host
+    if (typeof step === 'string')
+      return host.canClickStep;
+    //If host has disabled click step, return false regardless of individual step setting
+    if (!host.canClickStep)
+      return false;
+    //Return default VegaProgressTrackerStepItem clickable value
+    return typeof step.clickable === 'boolean' ? step.clickable : host.canClickStep;
+  }
   /**
    * Checks if the step is completed.
    *
@@ -59,7 +83,7 @@ export class InternalProgressTrackerStep {
  * @param {string} stepKey - The unique key for the step.
  * @param {number} stepIndex - The index of the step.
  * @param {number} current - The current step index.
- * @param {string[]} completedSteps - An array of completed step keys.
+ * @param {string[]} completedSteps - An array of completed step keys. TODO: In the future, this will be derived from the step's own status rather than relying on an external array.
  * @returns {ProgressStepStatus} The progress status of the step.
  */
 InternalProgressTrackerStep.getStepStatus = (stepKey, stepIndex, current, completedSteps) => {

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

@@ -64,7 +64,7 @@ export class VegaProgressTrackerCurrentStepsController extends VegaSlimmer {
    */
   syncUpCurrentSteps() {
     this.currentSteps = this.renderModeController.isSourceRenderMode()
-      ? InternalProgressTrackerStep.fromSteps(this.steps, this.current, this.deprecatedPropertySlimmer.getValue())
+      ? InternalProgressTrackerStep.fromSteps(this.host, this.steps, this.current, this.deprecatedPropertySlimmer.getValue())
       : InternalProgressTrackerStep.fromHostSlot(this.host, this.current, this.deprecatedPropertySlimmer.getValue());
   }
   /**

package/dist/collection/components/vega-progress-tracker/slimmers/renderers/vega-progress-tracker-renderer.js

@@ -22,7 +22,14 @@ export class VegaProgressTrackerRenderer extends VegaSlimmer {
     };
     this.renderStep = (step, stepIndex) => {
       var _a;
-      return (h("div", { role: !this.canClickStep ? null : 'button', class: `vega-progress-step ${step.progressStatus} ${step.isCurrent ? 'current' : ''}`, "data-index": stepIndex, tabIndex: !this.canClickStep ? null : 0, onClick: !this.canClickStep ? null : this.onStepIconClick, onKeyDown: !this.canClickStep ? null : createEnterKeyHandlerToTriggerClick(), "aria-label": step.title },
+      return (h("div", { role: !step.clickable ? null : 'button', class: [
+          'vega-progress-step',
+          step.progressStatus,
+          step.isCurrent ? 'current' : '',
+          !step.clickable ? 'disabled' : '',
+        ]
+          .filter(Boolean)
+          .join(' '), "data-index": stepIndex, tabIndex: !step.clickable ? null : 0, onClick: !step.clickable ? null : this.onStepIconClick, onKeyDown: !step.clickable ? null : createEnterKeyHandlerToTriggerClick(), "aria-label": step.title },
         h("div", { class: "vega-progress-step-icon-divider" },
           h("div", { class: `vega-progress-step__divider left ${((_a = this.currentSteps[stepIndex - 1]) === null || _a === void 0 ? void 0 : _a.isCompleted()) ? 'background' : ''}` }),
           this.renderStepIcon(step, stepIndex),

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

@@ -26,6 +26,12 @@ export class VegaProgressTrackerStep {
      * @vegaVersion 2.73.0
      */
     this.stepKey = '';
+    /**
+     * If step is clickable.
+     *
+     * @vegaVersion 2.76.0
+     */
+    this.clickable = true;
   }
   render() {
     return sanitizeVegaComponent(h(Host, null,
@@ -65,6 +71,27 @@ export class VegaProgressTrackerStep {
       "attribute": "step-key",
       "reflect": true,
       "defaultValue": "''"
+    },
+    "clickable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.76.0"
+          }],
+        "text": "If step is clickable."
+      },
+      "attribute": "clickable",
+      "reflect": true,
+      "defaultValue": "true"
     }
   }; }
   static get states() { return {

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

@@ -61,6 +61,18 @@
 :host(:not(.click-step-disabled)) .vega-progress-step.complete.current:hover .vega-progress-step__icon vega-icon {
   color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
 }
+:host(:not(.click-step-disabled)) .vega-progress-step.disabled {
+  cursor: initial;
+}
+:host(:not(.click-step-disabled)) .vega-progress-step.disabled.default:hover .vega-progress-step__icon {
+  background-color: rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1));
+}
+:host(:not(.click-step-disabled)) .vega-progress-step.disabled.default:active .vega-progress-step__icon {
+  background-color: rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1));
+}
+:host(:not(.click-step-disabled)) .vega-progress-step.disabled.inProgress:hover .vega-progress-step__icon, :host(:not(.click-step-disabled)) .vega-progress-step.disabled.current:hover .vega-progress-step__icon {
+  background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
+}
 
 :host .vega-progress-step:focus-visible {
   outline-width: 0px;

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

@@ -220,9 +220,14 @@ export class VegaProgressTracker {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
+        "original": "string[] | VegaProgressTrackerStepItem[]",
+        "resolved": "VegaProgressTrackerStepItem[] | string[]",
+        "references": {
+          "VegaProgressTrackerStepItem": {
+            "location": "import",
+            "path": "./type"
+          }
+        }
       },
       "required": false,
       "optional": false,

package/dist/collection/components/vega-rich-text-content/vega-rich-text-content.js

@@ -11,7 +11,7 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/
 import { VegaRichTextContentRenderer } from './slimmers/renderers/vega-rich-text-content-renderer';
 import { VegaRichTextContentStateController } from './slimmers/controllers/vega-rich-text-content-state-controller';
 import { findParent } from '../../utils/ui';
-import { waitForComponentDidRender } from '../../helpers/common';
+import { waitForComponentDidRender } from '../../helpers/common/wait-for-component-did-render';
 import { RTEExtensionStylesController } from './slimmers/controllers/vega-rich-text-content-extensions-styles-controller';
 /**
  * @vegaVersion 2.34.0

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

@@ -37,6 +37,6 @@ export class PlainTextAnnotation extends NodeAnnotation {
    * @inheritDoc
    */
   toJSON() {
-    return { plainText: this.plainText };
+    return this.plainText ? { plainText: this.plainText } : undefined;
   }
 }

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

@@ -53,6 +53,12 @@ export class RTEHtmlBlock extends RTEBlock {
   toHtml() {
     const BlockTag = this.htmlTag;
     const attrStr = super.generateAttributeString();
+    // Handle void/self-closing tags (hr, input, col, etc.)
+    // Uses HTML5 syntax without self-closing slash for consistency with img and br tags
+    if (RTEHtmlBlock.VOID_TAGS.has(this.htmlTag)) {
+      return `<${BlockTag}${attrStr}>`;
+    }
+    // Handle normal tags with children
     return [
       `<${BlockTag}${attrStr}>`,
       this.children.map((block) => block.toHtml()).join(''),
@@ -66,3 +72,13 @@ export class RTEHtmlBlock extends RTEBlock {
     return Object.assign(Object.assign({}, super.toJSON()), { id: this.id, type: this.type, htmlTag: this.htmlTag, children: this.children.map((child) => child.toJSON()) });
   }
 }
+/**
+ * Void/self-closing tags that don't have closing tags and don't contain children.
+ * These tags should be rendered as <tag> or <tag/> instead of <tag></tag>.
+ *
+ * Based on canHandleTags from html-block-strategy.ts, the following are void tags:
+ * - HR: horizontal rule
+ * - INPUT: form input
+ * - COL: table column
+ */
+RTEHtmlBlock.VOID_TAGS = new Set(['hr', 'input', 'col']);

package/dist/collection/components/vega-rich-text-editor/dto/content-state.js

@@ -21,6 +21,7 @@ import { VegaInternalRichTextEditorFlushChanges } from '../../../helpers/event-m
 import './setup';
 import { StylePreservator } from '../../../helpers/csp/styles-preservator';
 import { LogUtility } from '../../../utils/log';
+import { HTMLContentCleaner } from '../slimmers/controllers/html-cleaner';
 /**
  * Class representing the content state of the rich text editor.
  */
@@ -53,22 +54,27 @@ export class VegaRTEContent {
   /**
    * Create an empty content state
    *
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
    * @returns {VegaRTEContent} An empty content state
    */
-  static createEmptyContent() {
+  static createEmptyContent(options = { autoMatchFormat: true }) {
     return VegaRTEContent.fromJSON([
       {
         id: generateUUID(),
         type: 'paragraph',
+        annotations: {
+          internalWrapper: !options.autoMatchFormat,
+        },
         nodes: [
           {
             id: generateUUID(),
+            annotations: { plainText: !options.autoMatchFormat },
             type: 'text',
             text: '',
           },
         ],
       },
-    ]);
+    ], options);
   }
   /**
    * Converts HTML content to a VegaRTEContent instance.
@@ -78,28 +84,8 @@ export class VegaRTEContent {
    * @returns {VegaRTEContent} The converted content state.
    */
   static fromHtml(html, options = { autoMatchFormat: true, skipCustomAnnotations: false }) {
-    /**
-     * remove redundant spaces between tags, for example:
-     * case1:
-     * '<p>\n\t <span>test</span>\n\t </p>' will be formatted into '<p><span>test</span></p>'
-     * '<p>
-     * 		test
-     * 	</p>' will be formatted into '<p>test</p>'
-     *
-     * case2:
-     * <h1>
-     * _test&*....
-     * </h1> will be formatted into <h1>_test&*....</h1>
-     *
-     * The blank space between individual tags should be preserved:
-     * <span> </span>
-     */
-    const formattedHtml = html
-      .replace(/>\s+<\/?/g, (match) => {
-      return match.endsWith('</') ? match : '><';
-    })
-      .replace(/(>)[\n\t]+(?=[a-zA-Z0-9_\W])/g, '$1')
-      .replace(/([a-zA-Z0-9_\W])[\n\t]+(?=<)/g, '$1');
+    const cleaner = new HTMLContentCleaner();
+    const formattedHtml = cleaner.clean(html);
     const context = StylePreservator.preserve(formattedHtml);
     const safeHtml = context.getProcessedHtml();
     const body = new DOMParser().parseFromString(safeHtml, 'text/html').body;
@@ -141,8 +127,19 @@ export class VegaRTEContent {
     if (options) {
       LogUtility.warn(`The 'options' parameter in toHtml method is deprecated and will be removed in the future.`);
     }
+    if (this.isEmpty()) {
+      return '';
+    }
     return this.children.map((block) => block.toHtml()).join('');
   }
+  /**
+   * Checks if the content state is empty.
+   *
+   * @returns {boolean} True if the content state is empty, false otherwise.
+   */
+  isEmpty() {
+    return this.children.length === 0 || (this.children.length === 1 && !this.children[0].isNotEmpty());
+  }
   /**
    * Internal method to add the block item, remove the block item
    *

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

@@ -90,7 +90,7 @@ __decorate([
   MapToComponentField()
 ], RTEExtensionController.prototype, "selectionController", void 0);
 __decorate([
-  MapToComponentMethod('connectedCallback')
+  MapToComponentMethod('componentDidLoad')
 ], RTEExtensionController.prototype, "initialExtensionContext", null);
 __decorate([
   MapToComponentMethod('watchExtensions')

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/html-cleaner/html-content-cleaner-processor.interface.js

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

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/html-cleaner/html-content-cleaner.js

@@ -0,0 +1,59 @@
+import { RemoveWhitespaceBetweenTagsProcessor } from './processors/remove-whitespace-between-tags-processor';
+import { RemoveWhitespaceAfterOpeningTagProcessor } from './processors/remove-whitespace-after-opening-tag-processor';
+import { RemoveWhitespaceBeforeClosingTagProcessor } from './processors/remove-whitespace-before-closing-tag-processor';
+/**
+ * Main HTML content cleaner that orchestrates multiple cleaning processors.
+ *
+ * This class implements a chain of responsibility pattern where each processor
+ * handles a specific aspect of HTML cleaning. The processors are applied in sequence
+ * and the entire chain is repeated until no more changes occur.
+ *
+ * Processors (in order):
+ * 1. RemoveWhitespaceBetweenTagsProcessor - Removes whitespace between non-matching tags
+ * 2. RemoveWhitespaceAfterOpeningTagProcessor - Removes \n and \t after opening tags
+ * 3. RemoveWhitespaceBeforeClosingTagProcessor - Removes \n and \t before closing tags
+ */
+export class HTMLContentCleaner {
+  constructor() {
+    this.processors = [
+      new RemoveWhitespaceBetweenTagsProcessor(),
+      new RemoveWhitespaceAfterOpeningTagProcessor(),
+      new RemoveWhitespaceBeforeClosingTagProcessor(),
+    ];
+  }
+  /**
+   * Cleans HTML by applying all processors in the chain repeatedly until no changes occur.
+   *
+   * The cleaning process:
+   * 1. Applies each processor in sequence
+   * 2. Compares the result with the input
+   * 3. If changes were made, repeats the process
+   * 4. Returns the final cleaned HTML
+   *
+   * Examples of transformations:
+   * - `<p>\n\t <span>test</span>\n\t </p>` → `<p><span>test</span></p>`
+   * - `<p>\n\tHello</p>` → `<p>Hello</p>`
+   * - `<p>Hello\n\t</p>` → `<p>Hello</p>`
+   * - `<span> </span>` → `<span> </span>` (preserved - matching tags)
+   * - `<p>Hello  World</p>` → `<p>Hello  World</p>` (preserved - regular spaces)
+   *
+   * @param {string} html - The HTML string to clean.
+   * @returns {string} The cleaned HTML string.
+   */
+  clean(html) {
+    if (!html || html.trim().length === 0) {
+      return html;
+    }
+    let result = html;
+    let previousResult;
+    // Keep processing until no more changes occur
+    do {
+      previousResult = result;
+      // Apply each processor in the chain
+      for (const processor of this.processors) {
+        result = processor.process(result);
+      }
+    } while (result !== previousResult);
+    return result;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/html-cleaner/index.js

@@ -0,0 +1,4 @@
+export { HTMLContentCleaner } from './html-content-cleaner';
+export { RemoveWhitespaceBetweenTagsProcessor } from './processors/remove-whitespace-between-tags-processor';
+export { RemoveWhitespaceAfterOpeningTagProcessor } from './processors/remove-whitespace-after-opening-tag-processor';
+export { RemoveWhitespaceBeforeClosingTagProcessor } from './processors/remove-whitespace-before-closing-tag-processor';

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/html-cleaner/processors/remove-whitespace-after-opening-tag-processor.js

@@ -0,0 +1,21 @@
+/**
+ * Removes `\n` and `\t` characters after opening tags (before text content).
+ *
+ * Transforms patterns like `>[\n\t]+(text)` to `>(text)`.
+ *
+ * Examples:
+ * - `<p>\n\tHello` → `<p>Hello`
+ * - `<div>\n\n\tWorld` → `<div>World`
+ */
+export class RemoveWhitespaceAfterOpeningTagProcessor {
+  /**
+   * Process the HTML string to remove `\n` and `\t` after opening tags.
+   *
+   * @param {string} html - The HTML string to process.
+   * @returns {string} The processed HTML string.
+   */
+  process(html) {
+    // Pattern: `>[\n\t]+(text)` → `>(text)`
+    return html.replace(/(>)[\n\t]+(?=.)/g, '$1');
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/html-cleaner/processors/remove-whitespace-before-closing-tag-processor.js

@@ -0,0 +1,21 @@
+/**
+ * Removes `\n` and `\t` characters before closing tags (after text content).
+ *
+ * Transforms patterns like `(text)[\n\t]+<` to `(text)<`.
+ *
+ * Examples:
+ * - `World\n\t</p>` → `World</p>`
+ * - `Hello\n</div>` → `Hello</div>`
+ */
+export class RemoveWhitespaceBeforeClosingTagProcessor {
+  /**
+   * Process the HTML string to remove `\n` and `\t` before closing tags.
+   *
+   * @param {string} html - The HTML string to process.
+   * @returns {string} The processed HTML string.
+   */
+  process(html) {
+    // Pattern: `(text)[\n\t]+<` → `(text)<`
+    return html.replace(/(.?)[\n\t]+(?=<)/g, '$1');
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/html-cleaner/processors/remove-whitespace-between-tags-processor.js

@@ -0,0 +1,77 @@
+/**
+ * Removes whitespace between tags, except preserves ALL whitespace between matching opening/closing tag pairs.
+ *
+ * This processor scans for patterns of `<tag>(whitespace)<tag>` and:
+ * - If the first tag is an opening tag and the second tag is its matching closing tag (e.g., `<span> </span>`),
+ *   preserves ALL the whitespace between them (including spaces, tabs, newlines)
+ * - Otherwise, removes all the whitespace between the tags
+ *
+ * Examples:
+ * - `</p>\n\t<div>` → `</p><div>` (different tags: closing p, opening div - whitespace removed)
+ * - `<div>\n\t<span>` → `<div><span>` (different tags: opening div, opening span - whitespace removed)
+ * - `<span> </span>` → `<span> </span>` (matching tags: opening span, closing span - space preserved)
+ * - `<span>  </span>` → `<span>  </span>` (matching tags - multiple spaces preserved)
+ * - `<span>\n\t</span>` → `<span>\n\t</span>` (matching tags - \n\t preserved)
+ * - `<code> </code>` → `<code> </code>` (matching tags - space preserved)
+ * - `</div> <p>` → `</div><p>` (different tags: closing div, opening p - whitespace removed)
+ */
+export class RemoveWhitespaceBetweenTagsProcessor {
+  /**
+   * Process the HTML string to remove whitespace between non-matching tags.
+   *
+   * @param {string} html - The HTML string to process.
+   * @returns {string} The processed HTML string.
+   */
+  process(html) {
+    return html.replace(/(<[^>]+>)(\s+)(<[^>]+>)/g, (_match, tag1, whitespace, tag2) => {
+      const openingTagName = this.extractOpeningTagName(tag1);
+      const closingTagName = this.extractClosingTagName(tag2);
+      // Preserve all whitespace if tags match (e.g., <span> </span>)
+      if (openingTagName && closingTagName && openingTagName === closingTagName) {
+        return `${tag1}${whitespace}${tag2}`;
+      }
+      // Remove whitespace for non-matching tags
+      return `${tag1}${tag2}`;
+    });
+  }
+  /**
+   * Extracts the tag name from an opening HTML tag.
+   *
+   * Supports standard HTML tags (div, span, h1, etc.) and custom elements with hyphens (my-component).
+   *
+   * Examples:
+   * - `<span>` → `span`
+   * - `<div class="test">` → `div`
+   * - `<my-component id="123">` → `my-component`
+   * - `</span>` → `null` (not an opening tag)
+   *
+   * @param {string} tag - The tag string to extract from (e.g., '<span>', '<div class="test">').
+   * @returns {string | null} The tag name or null if not an opening tag.
+   * @private
+   */
+  extractOpeningTagName(tag) {
+    // Pattern: <(tag name) where tag name starts with letter, followed by letters/numbers/hyphens
+    const match = tag.match(/<(\w[\w-]*)/);
+    return match ? match[1] : null;
+  }
+  /**
+   * Extracts the tag name from a closing HTML tag.
+   *
+   * Supports standard HTML tags (div, span, h1, etc.) and custom elements with hyphens (my-component).
+   *
+   * Examples:
+   * - `</span>` → `span`
+   * - `</div>` → `div`
+   * - `</my-component>` → `my-component`
+   * - `<span>` → `null` (not a closing tag)
+   *
+   * @param {string} tag - The tag string to extract from (e.g., '</span>', '</div>').
+   * @returns {string | null} The tag name or null if not a closing tag.
+   * @private
+   */
+  extractClosingTagName(tag) {
+    // Pattern: </(tag name) where tag name starts with letter, followed by letters/numbers/hyphens
+    const match = tag.match(/<\/(\w[\w-]*)/);
+    return match ? match[1] : null;
+  }
+}

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

@@ -13,7 +13,7 @@ import { VegaInternalRichTextEditorFlushChanges } from '../../../../helpers/even
 import { Observer } from '../../../../helpers/change-manager/observer/observer';
 import { debounce } from '../../../../utils/timer';
 import { VegaRTEContent } from '../../dto/content-state';
-import { waitForComponentDidRender } from '../../../../helpers/common';
+import { waitForComponentDidRender } from '../../../../helpers/common/wait-for-component-did-render';
 import { RTEEditorState } from '../../dto/editor-state';
 import { RTESelectionState } from '../../dto/selection-state';
 import stateEntityRenderingRegistry from './state-entity-rendering-registry';
@@ -50,11 +50,12 @@ export class ValueController extends VegaSlimmer {
    * Watches the value of the editor and updates the internal value.
    */
   watchValueUpdate() {
+    const autoMatchFormat = this.sourceEditConfig.autoMatchFormat;
     if (this.value && !(this.value instanceof VegaRTEContent)) {
-      this.value = VegaRTEContent.fromJSON(this.value);
+      this.value = VegaRTEContent.fromJSON(this.value, { autoMatchFormat });
     }
     else if (!this.value || this.value.children.length === 0) {
-      this.value = VegaRTEContent.createEmptyContent();
+      this.value = VegaRTEContent.createEmptyContent({ autoMatchFormat });
     }
     else {
       this.changeEventEmitter.emit(this.value);
@@ -114,6 +115,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], ValueController.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentField()
+], ValueController.prototype, "sourceEditConfig", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], ValueController.prototype, "connectedCallback", null);

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

@@ -14,7 +14,7 @@ import { LinkAnnotationAction } from '../../../dto/actions/link-annotation-actio
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import { SelectionChangeAction } from '../../../dto/actions/selection-change-action';
 import { generateUUID } from '../../../../../utils/misc';
-import { waitForComponentDidRender } from '../../../../../helpers/common';
+import { waitForComponentDidRender } from '../../../../../helpers/common/wait-for-component-did-render';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 export class LinkToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {

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

@@ -37,6 +37,9 @@ export class SourceEditToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   async saveSourceCode() {
     const sourceViewValue = this.vegaRichTextEditorRenderer.getSourceCode();
+    if (!sourceViewValue && this.value.isEmpty()) {
+      return;
+    }
     if (typeof sourceViewValue === 'string') {
       await this.valueController.flushChanges(VegaRTEContent.fromHtml(sourceViewValue, {
         autoMatchFormat: this.sourceEditConfig.autoMatchFormat,
@@ -62,3 +65,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], SourceEditToolbarButtonSlimmer.prototype, "sourceEditConfig", void 0);
+__decorate([
+  MapToComponentField()
+], SourceEditToolbarButtonSlimmer.prototype, "value", void 0);

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

@@ -39,6 +39,45 @@ describe('HTMLBlock', () => {
         ],
       }, { autoMatchFormat: false }).toHtml()).toMatchSnapshot();
     });
+    it('toHtml should handle self-closing hr tag correctly', () => {
+      const hrBlock = RTEHtmlBlock.from({
+        id: 'hr-1',
+        type: 'html-block',
+        htmlTag: 'hr',
+        children: [],
+      }, { autoMatchFormat: false });
+      expect(hrBlock.toHtml()).toBe('<hr>');
+    });
+    it('toHtml should handle self-closing hr tag with attributes correctly', () => {
+      const hrBlock = RTEHtmlBlock.from({
+        id: 'hr-1',
+        type: 'html-block',
+        htmlTag: 'hr',
+        annotations: { customClass: ['divider'] },
+        children: [],
+      }, { autoMatchFormat: false });
+      expect(hrBlock.toHtml()).toBe('<hr class="divider">');
+    });
+    it('toHtml should handle self-closing input tag correctly', () => {
+      const inputBlock = RTEHtmlBlock.from({
+        id: 'input-1',
+        type: 'html-block',
+        htmlTag: 'input',
+        annotations: { customAttribute: { type: 'text', placeholder: 'Enter text' } },
+        children: [],
+      }, { autoMatchFormat: false });
+      expect(inputBlock.toHtml()).toBe('<input type="text" placeholder="Enter text">');
+    });
+    it('toHtml should handle self-closing col tag correctly', () => {
+      const colBlock = RTEHtmlBlock.from({
+        id: 'col-1',
+        type: 'html-block',
+        htmlTag: 'col',
+        annotations: { customAttribute: { span: '2' } },
+        children: [],
+      }, { autoMatchFormat: false });
+      expect(colBlock.toHtml()).toBe('<col span="2">');
+    });
   });
   describe('public methods', () => {
     let htmlBlock;