@globalpayments/vega 2.63.0 → 2.64.0

package/dist/collection/components/vega-form/vega-form.js

@@ -24,6 +24,8 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/
 import { createSubStateNotifySlimmer } from '../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
 import { VegaFormNestStateController } from './slimmers/controllers/vega-form-nest-state-controller';
 import { VegaFormFieldValidationStateController } from './slimmers/controllers/vega-form-field-validation-state-controller';
+import { NativeFormRenderer } from './slimmers/renderers/native-form-renderer';
+import { tryGetDocument } from '../../utils/try-get-document';
 /**
  * @vegaVersion 1.3.0
  */
@@ -49,6 +51,7 @@ export class VegaForm {
     this.childNodeValueChangeObserver = new ChildNodesNotifyObserverSlimmer(FORM_ELEMENT_VALUE_CHANGE, () => this.updateInternalTouchedStatus());
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.vegaFormFieldValidationStateController = new VegaFormFieldValidationStateController();
+    this.nativeFormRenderer = new NativeFormRenderer();
     this.invalidFieldPathMap = new ImmutableMap(new Map(), (newMap) => {
       this.invalidFieldPathMap = newMap;
       this.updateIsValidFlag();
@@ -108,6 +111,19 @@ export class VegaForm {
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.disableBlurValidation = false;
+    /**
+     * Determines whether the `vega-form` content is wrapped in a native HTML <form> element.
+     *
+     * @vegaVersion 2.64.0
+     */
+    this.useNativeForm = false;
+    /**
+     * Specifies the HTTP method used for form submission.
+     *   This property takes effect only when {@link useNativeForm} is set to `true`.
+     *
+     * @vegaVersion 2.64.0
+     */
+    this.method = 'get';
     /**
      * If the element is valid, remove it from the set of
      *    invalid elements. If the element is invalid,
@@ -287,8 +303,7 @@ export class VegaForm {
       : element['value'];
   }
   render() {
-    return sanitizeVegaComponent(h(Host, null,
-      h("slot", null)), this.host);
+    return sanitizeVegaComponent(h(Host, null, this.useNativeForm ? this.nativeFormRenderer.render() : h("slot", null)), this.host);
   }
   /**
    * If the value of any child elements have changed,
@@ -408,8 +423,36 @@ export class VegaForm {
     const valid = await this.valid();
     if (valid.isValid) {
       const formValue = await this.getValue();
-      this.submitEventEmitter.emit(formValue);
+      const submitEvent = this.submitEventEmitter.emit(formValue);
+      if (!submitEvent.defaultPrevented) {
+        await this.submitWithFormData();
+      }
+    }
+  }
+  /**
+   * Submits the form using native HTML form submission with all current field values.
+   *
+   * This method collects all form field values, creates hidden input elements for each field,
+   * appends them to a container inside the native form, and then triggers the native
+   * `requestSubmit()` method to submit the form.
+   *
+   * The method ensures that the form data is available in the native form for submission,
+   * which is useful when `useNativeForm` is enabled.
+   *
+   * @returns {Promise<void>} Resolves when the form submission process is complete.
+   */
+  async submitWithFormData() {
+    if (!this.useNativeForm)
+      return;
+    const data = await this.getValue();
+    for (const dataKey in data) {
+      const hiddenInput = tryGetDocument().createElement('input');
+      hiddenInput.type = 'hidden';
+      hiddenInput.name = dataKey;
+      hiddenInput.value = data[dataKey];
+      this.nativeFormRenderer.getNativeFormRef().append(hiddenInput);
     }
+    this.nativeFormRenderer.getNativeFormRef().requestSubmit();
   }
   registerFormResetChangeManager() {
     this.formEventsObserver = new Observer(this.canAcceptFormResetEvent.bind(this), this.handleResetEvents.bind(this));
@@ -527,6 +570,68 @@ export class VegaForm {
       "attribute": "disable-blur-validation",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "useNativeForm": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.64.0"
+          }],
+        "text": "Determines whether the `vega-form` content is wrapped in a native HTML <form> element."
+      },
+      "attribute": "use-native-form",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "action": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.64.0"
+          }],
+        "text": "Specifies the HTTP URL for form submission.\n   This property takes effect only when {@link useNativeForm} is set to `true`."
+      },
+      "attribute": "action",
+      "reflect": false
+    },
+    "method": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'post' | 'get'",
+        "resolved": "\"get\" | \"post\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.64.0"
+          }],
+        "text": "Specifies the HTTP method used for form submission.\n  This property takes effect only when {@link useNativeForm} is set to `true`."
+      },
+      "attribute": "method",
+      "reflect": false,
+      "defaultValue": "'get'"
     }
   }; }
   static get events() { return [{
@@ -915,3 +1020,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaForm.prototype, "vegaFormFieldValidationStateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaForm.prototype, "nativeFormRenderer", void 0);

package/dist/collection/components/vega-image-uploader/slimmers/controllers/vega-image-uploader-preview-controller.js

@@ -45,11 +45,20 @@ export class VegaImageUploaderPreviewController extends VegaSlimmer {
       if (this.value && this.value.name) {
         previewModal.modalTitle = this.value.name;
       }
-      previewModal.innerHTML = `
-            <div style='text-align: center'>
-                <img style='width: 100%' class="preview-image" src="${imagePreviewURL}" alt="" />
-            </div>
-        `;
+      // eslint-disable-next-line no-restricted-globals
+      const container = document.createElement('div');
+      container.style.textAlign = 'center';
+      // eslint-disable-next-line no-restricted-globals
+      const img = document.createElement('img');
+      img.width = 0;
+      img.className = 'preview-image';
+      if (imagePreviewURL) {
+        img.src = imagePreviewURL;
+      }
+      img.alt = '';
+      img.style.width = '100%';
+      container.appendChild(img);
+      previewModal.appendChild(container);
       this.previewModalRef = previewModal;
       // eslint-disable-next-line no-restricted-globals
       document.body.append(previewModal);

package/dist/collection/components/vega-input-credit-card/assets/icons.js

@@ -16,7 +16,7 @@ export const Icons = {
     autoSize: true,
   },
   'regular-credit-card': {
-    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" fill="none"><rect width="36" height="24" rx="2" style='fill: rgba(var(--v-regular-credit-card-bg, 205, 209, 211, 1))'/><g clip-path="url(#a)"><path style="fill: rgba(var(--v-regular-credit-card-top, 252, 252, 252, 1))" d="M11 5c-1.103 0-2 .897-2 2v1h18V7c0-1.103-.897-2-2-2H11Zm16 6H9v6c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-6Zm-14.5 4h2c.275 0 .5.225.5.5s-.225.5-.5.5h-2a.501.501 0 0 1-.5-.5c0-.275.225-.5.5-.5Zm3.5.5c0-.275.225-.5.5-.5h4c.275 0 .5.225.5.5s-.225.5-.5.5h-4a.501.501 0 0 1-.5-.5Z"/></g><defs><clipPath id="a"><path d="M9 4h18v16H9z" style='fill: rgba(var(--v-regular-credit-card-bottom, 255, 255, 255, 1))'/></clipPath></defs></svg>`,
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" fill="none"><rect width="36" height="24" rx="2" fill='rgba(var(--v-regular-credit-card-bg, 205, 209, 211, 1))'/><g clip-path="url(#a)"><path fill="rgba(var(--v-regular-credit-card-top, 252, 252, 252, 1))" d="M11 5c-1.103 0-2 .897-2 2v1h18V7c0-1.103-.897-2-2-2H11Zm16 6H9v6c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-6Zm-14.5 4h2c.275 0 .5.225.5.5s-.225.5-.5.5h-2a.501.501 0 0 1-.5-.5c0-.275.225-.5.5-.5Zm3.5.5c0-.275.225-.5.5-.5h4c.275 0 .5.225.5.5s-.225.5-.5.5h-4a.501.501 0 0 1-.5-.5Z"/></g><defs><clipPath id="a"><path d="M9 4h18v16H9z" fill='rgba(var(--v-regular-credit-card-bottom, 255, 255, 255, 1))'/></clipPath></defs></svg>`,
     autoSize: true,
   },
 };

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

@@ -33,7 +33,7 @@ export class LinkAnnotation extends NodeAnnotation {
    * @inheritDoc
    */
   clone() {
-    return new LinkAnnotation(this.link);
+    return new LinkAnnotation(this.link, this.useInternalStyle);
   }
   /**
    * Verify whether two link annotation is same or not

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

@@ -43,7 +43,7 @@ export class LinkGroupAnnotation extends Annotation {
   toJsx(linkAnnotation, options) {
     const linkStyle = this.getStyle(linkAnnotation, options);
     const linkClass = this.getClass(linkAnnotation, options);
-    const attributes = this.getAttribute(linkAnnotation, options);
+    const attributes = this.getAttribute(linkAnnotation);
     if (linkClass.length > 0) {
       attributes.class = linkClass.join(' ');
     }
@@ -87,15 +87,13 @@ export class LinkGroupAnnotation extends Annotation {
    * Get the custom attribute for the annotation
    *
    * @param {LinkAnnotation} linkAnnotation current link annotation which saved custom style, class and attribute.
-   * @param {RTERenderContext} options - Render context options.
    * @returns {Record<string, string>} Link attributes
    */
-  getAttribute(linkAnnotation, options) {
-    var _a;
+  getAttribute(linkAnnotation) {
     const { href, customAttribute = {} } = linkAnnotation.link;
-    const autoMatchFormat = (_a = options === null || options === void 0 ? void 0 : options.autoMatchFormat) !== null && _a !== void 0 ? _a : true;
-    const target = customAttribute.target || (autoMatchFormat ? '_blank' : '');
-    return Object.assign(Object.assign(Object.assign({}, customAttribute), (href ? { href } : autoMatchFormat ? { href } : {})), (target ? { target } : {}));
+    const useInternalStyle = linkAnnotation.useInternalStyle;
+    const target = customAttribute.target || (useInternalStyle ? '_blank' : '');
+    return Object.assign(Object.assign(Object.assign({}, customAttribute), (href ? { href } : useInternalStyle ? { href } : {})), (target ? { target } : {}));
   }
   /**
    * Convert style to string which can be used to html string.

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

@@ -137,13 +137,13 @@ export class RTETextBlock extends RTEBlock {
   /**
    * @inheritDoc
    */
-  toHtml(options) {
+  toHtml() {
     const BlockTag = this.getBlockTag();
     const attrStr = super.generateAttributeString();
     const linkGroupAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
     let nodesHtml = this.children.map((node) => node.toHtml()).join('');
     if (linkGroupAnnotation && this.children.length > 0) {
-      nodesHtml = this.generateLinkHtml(linkGroupAnnotation, nodesHtml, options);
+      nodesHtml = this.generateLinkHtml(linkGroupAnnotation, nodesHtml);
     }
     return super.shouldRenderAsInternalWrapper()
       ? nodesHtml
@@ -228,10 +228,9 @@ export class RTETextBlock extends RTEBlock {
    *
    * @param {LinkGroupAnnotation} linkGroupAnnotation - linkGroupAnnotation
    * @param {string} nodesHtml - The nodes html
-   * @param {VegaRTETransformOptions} options - options
    * @returns {string} link html
    */
-  generateLinkHtml(linkGroupAnnotation, nodesHtml, options) {
+  generateLinkHtml(linkGroupAnnotation, nodesHtml) {
     nodesHtml = '';
     let linkGroupNodes = [];
     for (let i = 0; i < this.children.length; i++) {
@@ -245,7 +244,6 @@ export class RTETextBlock extends RTEBlock {
           currentLinkAnnotation.link.groupKey !== nextLinkAnnotation.link.groupKey) {
           const linkAttributes = linkGroupAnnotation.toString(currentLinkAnnotation, {
             standalone: true,
-            autoMatchFormat: options === null || options === void 0 ? void 0 : options.autoMatchFormat,
           });
           nodesHtml += [
             `<a${linkAttributes ? ` ${linkAttributes}` : ''}>`,

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

@@ -15,6 +15,8 @@ import { AppendChildrenStrategy } from './action-handle-strategies/modify-conten
 import { InsertChildrenBeforeStrategy } from './action-handle-strategies/modify-content-strategies/insert-children-before-strategy';
 import { InsertChildrenAfterStrategy } from './action-handle-strategies/modify-content-strategies/insert-children-after-strategy';
 import './setup';
+import { StylePreservator } from '../../../helpers/csp/styles-preservator';
+import { LogUtility } from '../../../utils/log';
 /**
  * Class representing the content state of the rich text editor.
  */
@@ -94,8 +96,12 @@ export class VegaRTEContent {
     })
       .replace(/(>)[\n\t]+(?=[a-zA-Z0-9_\W])/g, '$1')
       .replace(/([a-zA-Z0-9_\W])[\n\t]+(?=<)/g, '$1');
-    const body = new DOMParser().parseFromString(formattedHtml, 'text/html').body;
-    const blocks = ElementToDtoStrategyProcessor.process(Array.from(body.childNodes), options)
+    const context = StylePreservator.preserve(formattedHtml);
+    const safeHtml = context.getProcessedHtml();
+    const body = new DOMParser().parseFromString(safeHtml, 'text/html').body;
+    const htmlElements = Array.from(body.childNodes);
+    context.restore(htmlElements);
+    const blocks = ElementToDtoStrategyProcessor.process(htmlElements, options)
       .filter(isNonNullable)
       .map((output) => output.toDto(options))
       .filter(isNonNullable);
@@ -123,11 +129,15 @@ export class VegaRTEContent {
   /**
    * Converts the content state to HTML.
    *
-   * @param {VegaRTETransformOptions} [options] - Optional rendering context for the content.
+   * @deprecated The [`options`]{@link options} parameter is deprecated and will be removed in the future.
+   * @param {VegaRTETransformOptions} [options] - Deprecated. Optional rendering context (currently unused).
    * @returns {string} The HTML representation of the content state.
    */
   toHtml(options) {
-    return this.children.map((block) => block.toHtml(options)).join('');
+    if (options) {
+      LogUtility.warn(`The 'options' parameter in toHtml method is deprecated and will be removed in the future.`);
+    }
+    return this.children.map((block) => block.toHtml()).join('');
   }
   /**
    * Internal method to add the block item, remove the block item

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

@@ -1,5 +1,4 @@
 import { findParent } from '../../../../utils/ui';
-import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
 import { RTENode } from './node.abstract';
 /**
  * Abstract class for decorator nodes. A decorator node modifies content like an image node that will delete the whole node when the delete button is pressed.
@@ -38,7 +37,7 @@ export class RTEDecoratorNode extends RTENode {
    * @inheritDoc
    */
   getRangeContainer() {
-    const element = stateEntityRenderingRegistry.getDOMByEntity(this);
+    const element = this.getElementRef();
     if (element) {
       return findParent(element, `.${RTEDecoratorNode.DECORATOR_CONTAINER_CLASS}`);
     }

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

@@ -130,6 +130,14 @@ export class RTENode {
   isTextNode() {
     return false;
   }
+  /**
+   * Get the HTMLElement reference associated with this node.
+   *
+   * @returns {Nullable<HTMLElement>} The HTMLElement reference or null if not found.
+   */
+  getElementRef() {
+    return stateEntityRenderingRegistry.getDOMByEntity(this);
+  }
   /**
    * Generate attributes as string
    *

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

@@ -3,7 +3,6 @@ import { NodeAnnotation, NodeAnnotationTypeEnum } from '../annotations/node-anno
 import { AnnotationAction } from '../actions/annotation-action.abstract';
 import { TextSplittableAction } from '../actions/splittable-action.abstract';
 import { SelectionRangeAnnotation } from '../annotations/selection-range-annotation';
-import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
 import { generateUUID } from '../../../../utils/misc';
 import { InternalAnnotationTypeEnum } from '../annotations/annotation.abstract';
 import { StrikethroughAnnotation } from '../annotations/strikethrough-annotation';
@@ -188,7 +187,7 @@ export class RTETextNode extends RTENode {
    * @inheritDoc
    */
   getRangeContainer() {
-    const element = stateEntityRenderingRegistry.getDOMByEntity(this);
+    const element = this.getElementRef();
     if (element) {
       if (this.isContentEditable()) {
         return element.firstChild;
@@ -289,7 +288,7 @@ export class RTETextNode extends RTENode {
    * @param {RTETextNode} selectedNode - The selected node
    */
   syncUpSelectedNodes(selectedNode) {
-    const currentNodeDom = stateEntityRenderingRegistry.getDOMByEntity(this);
+    const currentNodeDom = this.getElementRef();
     if (currentNodeDom) {
       const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, VegaInternalRichTextEditorSelectionRangeChange);
       if (nodeSubject) {

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

@@ -80,13 +80,16 @@ export class VegaRTELanguageExtension extends VegaRTEExtension {
   applyLanguageContent(selectedLanguage, contentMap) {
     if (this.extensionContext && contentMap) {
       let content = contentMap[selectedLanguage];
+      const { host, flushValue } = this.extensionContext;
       if (content) {
-        content = content instanceof VegaRTEContent ? content : VegaRTEContent.fromJSON(content);
+        content =
+          content instanceof VegaRTEContent
+            ? content
+            : VegaRTEContent.fromJSON(content, host.sourceEditConfig);
       }
       else {
         content = VegaRTEContent.createEmptyContent();
       }
-      const { host, flushValue } = this.extensionContext;
       if (host.value !== content) {
         flushValue(content, true);
       }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/insert-paste-handler.js

@@ -4,6 +4,7 @@ import { InsertChildrenAfterAction } from '../../../../dto/actions/insert-childr
 import { SplitBlockWithNodeAction } from '../../../../dto/actions/split-block-with-node-action';
 import { InsertChildrenBeforeAction } from '../../../../dto/actions/insert-children-before-block';
 import ElementToDtoStrategyProcessor from '../element-to-dto-strategy/element-to-dto-strategy-processor';
+import { StylePreservator } from '../../../../../../helpers/csp/styles-preservator';
 /**
  * Handle user paste
  */
@@ -65,7 +66,7 @@ export class InsertPasteHandler extends BaseHandler {
     }
   }
   /**
-   * Format and parse elements from user paste.
+   * Format and parse elements from user paste with simple style preservation.
    *
    * @param {InputEvent} event - Paste event.
    * @returns {RTEContentBlock[]} - RTEContentBlock.
@@ -76,10 +77,13 @@ export class InsertPasteHandler extends BaseHandler {
       const pastedText = event.dataTransfer.getData('text/plain');
       pastedHTML = this.parsePlainText(pastedText);
     }
-    // eslint-disable-next-line no-restricted-globals
-    const tempContainer = document.createElement('div');
-    tempContainer.innerHTML = pastedHTML;
-    return ElementToDtoStrategyProcessor.process(Array.from(tempContainer.childNodes))
+    const context = StylePreservator.preserve(pastedHTML);
+    const safeHtml = context.getProcessedHtml();
+    const parser = new DOMParser();
+    const parsedDoc = parser.parseFromString(safeHtml, 'text/html');
+    const htmlElements = Array.from(parsedDoc.body.childNodes);
+    context.restore(htmlElements);
+    return ElementToDtoStrategyProcessor.process(htmlElements)
       .filter(Boolean)
       .map((output) => output.toDto())
       .filter(Boolean);

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

@@ -43,11 +43,7 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
     this.renderSourceViewContent = () => {
       if (!this.allowSourceEdit)
         return;
-      const sourceViewValue = this.sourceView
-        ? CodeFormatter.format(this.value.toHtml({
-          autoMatchFormat: this.sourceEditConfig.autoMatchFormat,
-        }))
-        : '';
+      const sourceViewValue = this.sourceView ? CodeFormatter.format(this.value.toHtml()) : '';
       return (h("div", { class: {
           'source-view-container': true,
           'vega-hidden': !this.sourceView,

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

@@ -272,6 +272,14 @@ describe('annotations', () => {
     });
     expect(new LinkAnnotation({ href: 'www.google.com', groupKey: '123' }).toEqual(new LinkAnnotation({ href: 'www.google.com', groupKey: '123' }))).toEqual(true);
   });
+  it('link annotation clone', () => {
+    const linkAnnotation = new LinkAnnotation({
+      href: 'www.google.com',
+      groupKey: '123',
+    }, false);
+    expect(linkAnnotation.clone()).toEqual(linkAnnotation);
+    expect(linkAnnotation.clone()).not.toBe(linkAnnotation);
+  });
   it('link group annotation', () => {
     const linkGroupAnnotation = new LinkGroupAnnotation('123');
     const linkAnnotation = new LinkAnnotation({
@@ -296,7 +304,7 @@ describe('annotations', () => {
     expect(linkGroupAnnotation.toString(LinkAnnotation.from({
       href: 'www.google.com',
       groupKey: '123',
-    }, false)[1])).toEqual('href="www.google.com" target="_blank"');
+    }, false)[1])).toEqual('href="www.google.com"');
   });
   it('list annotation', () => {
     expect(new ListAnnotation().renderStyle()).toEqual(null);

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

@@ -188,6 +188,6 @@ describe('text block', () => {
       ],
     };
     expect(RTETextBlock.from(textBlock).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="www.google.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>This is a text.</span></a></p>`);
-    expect(RTETextBlock.from(textBlock, { autoMatchFormat: false }).toHtml({ autoMatchFormat: false })).toEqual(`<p><a href="www.google.com"><span>This is a text.</span></a></p>`);
+    expect(RTETextBlock.from(textBlock, { autoMatchFormat: false }).toHtml()).toEqual(`<p><a href="www.google.com"><span>This is a text.</span></a></p>`);
   });
 });