@globalpayments/vega 2.77.0 → 2.78.0

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

@@ -6,20 +6,46 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
 import image from '../../../assets/image';
-import { h } from '@stencil/core';
+import { Fragment, h } from '@stencil/core';
 import { MapToComponentField } from 'vega-slimmer/core';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import { ImageUpdateUrlAction } from '../../../dto/actions/image-update-url-action';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 import { ModifyContentActionType } from '../../../dto/actions/modify-content-action.abstract';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaClick, VegaDropdownClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { tryGetDocument } from '../../../../../utils/try-get-document';
 export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'image',
       tooltip: { text: 'Image' },
     });
-    this.onClick = () => {
-      this.inputElementRef.click();
+    this.insertURLImage = async () => {
+      const url = this.normalizeSafeImageUrl(this.insertURLInputRef.value);
+      this.applyImageNode(url, 'url');
+      await this.insertURLModalRef.modal('hide');
+    };
+    this.handleDropdownItemClick = async (payload) => {
+      const safeDocument = tryGetDocument();
+      switch (payload.detail) {
+        case 'upload':
+          this.uploadInputRef.click();
+          break;
+        case 'url':
+          this.currentRange = this.selectionController.getCurrentRange();
+          this.currentSelectedNodes = this.selectionController.getSelectedNodes();
+          this.currentSelectedBlocks = this.selectionController.getSelectedBlocks();
+          safeDocument && safeDocument.body.append(this.insertURLModalRef);
+          this.insertURLInputRef.value = '';
+          await this.insertURLModalRef.modal('show');
+          await this.insertURLInputRef.doFocus();
+          break;
+        /* istanbul ignore next */
+        default:
+          break;
+      }
+      await this.dropdownRef.hide();
     };
     /**
      * The below method is e2e-test covered in
@@ -32,13 +58,7 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       if (!input.files.length) {
         return;
       }
-      const node = this.insertImageController.insertImageToCaretPosition(URL.createObjectURL(input.files[0]));
-      if (!this.updateNodeURLMap) {
-        this.updateNodeURLMap = new Map();
-      }
-      this.updateNodeURLMap.set(node, (url) => {
-        node.apply(new ImageUpdateUrlAction(url));
-      });
+      const node = this.applyImageNode(URL.createObjectURL(input.files[0]), 'upload');
       const payload = {
         file: input.files[0],
         sendBackUploadedURLCallback: this.updateNodeURLMap.get(node),
@@ -49,8 +69,14 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   }
   renderBtnWrapper(renderBtn) {
     return (h("vega-box", null,
-      renderBtn({ showArrowIcon: false }),
-      h("input", { type: "file", style: { display: 'none' }, ref: (node) => (this.inputElementRef = node), accept: "image/*", onChange: this.fileInputChange })));
+      h("vega-dropdown", { selectType: "none", trigger: "click", alignment: "center", ref: (ref) => {
+          this.dropdownRef = ref;
+          this.addDropdownObserver(ref);
+        } },
+        renderBtn({ showArrowIcon: true }),
+        h("div", Object.assign({ slot: "items" }, super.preventLostFocus()), this.renderDropdownContent())),
+      this.renderUploadInput(),
+      this.renderInsertURLModal()));
   }
   isSelected() {
     return false;
@@ -62,10 +88,85 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK)) ||
       this.shouldDisabledToolbar(selectedBlock, ModifyContentActionType.INSERT_IMAGE_TO_BLOCK));
   }
+  renderDropdownContent() {
+    return (h(Fragment, null, ImageToolbarButtonSlimmer.items.map((item) => {
+      return (h("vega-dropdown-item", { key: item.key, itemKey: item.key }, this.translationSlimmer.t(item.label)));
+    })));
+  }
+  renderUploadInput() {
+    return (h("input", { type: "file", style: { display: 'none' }, ref: (node) => (this.uploadInputRef = node), accept: "image/*", onChange: this.fileInputChange }));
+  }
+  renderInsertURLModal() {
+    return (h("vega-modal", { size: 500, backdropColor: "semi", ref: (node) => (this.insertURLModalRef = node) },
+      h("div", { slot: "modal-title" }, this.translationSlimmer.t('Image via URL')),
+      h("div", { slot: "modal-content" },
+        h("vega-input", { placeholder: this.translationSlimmer.t('URL'), ref: (ref) => (this.insertURLInputRef = ref), 
+          /* istanbul ignore next */
+          // eslint-disable-next-line react/jsx-no-bind
+          onKeyDown: async (event) => {
+            event.key === 'Enter' && (await this.insertURLImage());
+          } })),
+      h("vega-flex", { slot: "modal-footer", gap: "size-8", alignItems: "center", justifyContent: "end" },
+        h("vega-button", { label: this.translationSlimmer.t('Cancel'), variant: "secondary", ref: (ref) => {
+            this.addModalCancelObserver(ref);
+          } }),
+        h("vega-button", { label: this.translationSlimmer.t('Insert'), ref: (ref) => {
+            this.addModalInsertObserver(ref);
+          } }))));
+  }
+  addDropdownObserver(dropdownRef) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownClick, this.handleDropdownItemClick);
+  }
+  addModalCancelObserver(buttonRef) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(buttonRef, VegaClick, async () => {
+      await this.insertURLModalRef.modal('hide');
+    });
+  }
+  addModalInsertObserver(buttonRef) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(buttonRef, VegaClick, this.insertURLImage);
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:should-update-url-properly-when-upload-images}
+   */
+  /* istanbul ignore next */
+  applyImageNode(url, type) {
+    const node = type === 'url'
+      ? this.insertImageController.insertImageToCaretPosition(url, this.currentSelectedBlocks, this.currentSelectedNodes, this.currentRange)
+      : this.insertImageController.insertImageToCaretPosition(url);
+    if (!this.updateNodeURLMap) {
+      this.updateNodeURLMap = new Map();
+    }
+    this.updateNodeURLMap.set(node, (url) => {
+      node.apply(new ImageUpdateUrlAction(url));
+    });
+    return node;
+  }
+  normalizeSafeImageUrl(url) {
+    try {
+      const parsedUrl = new URL(url);
+      if (parsedUrl.protocol === 'javascript:') {
+        return '';
+      }
+      // eslint-disable-next-line no-empty
+    }
+    catch (_error) { }
+    return url;
+  }
 }
 (() => {
   VegaInternalIconManager.register({ image: image });
 })();
+ImageToolbarButtonSlimmer.items = [
+  {
+    key: 'upload',
+    label: 'Upload from computer',
+  },
+  {
+    key: 'url',
+    label: 'Insert via URL',
+  },
+];
 __decorate([
   MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "insertImageController", void 0);

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

@@ -36,7 +36,7 @@ export class SourceEditToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return super.isDisabled();
   }
   async saveSourceCode() {
-    const sourceViewValue = this.vegaRichTextEditorRenderer.getSourceCode();
+    const sourceViewValue = this.richTextEditorSourceViewRenderer.getSourceCode();
     if (!sourceViewValue && this.value.isEmpty()) {
       return;
     }
@@ -61,7 +61,7 @@ __decorate([
 ], SourceEditToolbarButtonSlimmer.prototype, "valueController", void 0);
 __decorate([
   MapToComponentField()
-], SourceEditToolbarButtonSlimmer.prototype, "vegaRichTextEditorRenderer", void 0);
+], SourceEditToolbarButtonSlimmer.prototype, "richTextEditorSourceViewRenderer", void 0);
 __decorate([
   MapToComponentField()
 ], SourceEditToolbarButtonSlimmer.prototype, "sourceEditConfig", void 0);

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

@@ -10,7 +10,6 @@ import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibi
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalComponentDidRender } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
-import CodeFormatter from '../../../../helpers/code-format/code-formatter';
 export class VegaRichTextEditorRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -40,16 +39,6 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
     this.richTextContentFocus = () => {
       void this.richTextContentRef.vegaFocus();
     };
-    this.renderSourceViewContent = () => {
-      if (!this.allowSourceEdit)
-        return;
-      const sourceViewValue = this.sourceView ? CodeFormatter.format(this.value.toHtml()) : '';
-      return (h("div", { class: {
-          'source-view-container': true,
-          'vega-hidden': !this.sourceView,
-        } },
-        h("vega-code-block", { ref: (ref) => (this.sourceCodeBlockRef = ref), disabled: this.disabled, value: { language: 'html', code: sourceViewValue } })));
-    };
   }
   /**
    * Component lifecycle - [componentDidRender]{@link VegaRichTextEditor.componentDidRender}
@@ -91,11 +80,6 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
       return this.richTextContentRef.shadowRoot.querySelector('.rich-text-content');
     }
   }
-  getSourceCode() {
-    if (this.sourceCodeBlockRef) {
-      return this.sourceCodeBlockRef.value.code;
-    }
-  }
   render() {
     return h(Host, null, this.renderRichTextEditor());
   }
@@ -113,7 +97,7 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
   renderContent() {
     return (h(Fragment, null,
       this.renderTextContent(),
-      this.renderSourceViewContent()));
+      this.richTextEditorSourceViewRenderer.render()));
   }
 }
 __decorate([
@@ -158,6 +142,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "extensions", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "richTextEditorSourceViewRenderer", void 0);
 __decorate([
   MapToComponentMethod('componentDidRender')
 ], VegaRichTextEditorRenderer.prototype, "componentDidRender", null);

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

@@ -0,0 +1,102 @@
+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, VegaSlimmer } from 'vega-slimmer/core';
+import { h } from '@stencil/core';
+import CodeFormatter from '../../../../helpers/code-format/code-formatter';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaInternalCodeBlockBlur } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaRTEContent } from '../../dto/content-state';
+/**
+ * The renderer for the source view of the rich text editor. It renders a code block for editing the source code of the rich text editor content.
+ */
+export class VegaRichTextEditorSourceViewRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.prevRecord = '';
+    /**
+     * Handle the blur event of the code block. When the code block loses focus, emit the source code change event with the current source code.
+     */
+    this.handleCodeBlockBlur = () => {
+      var _a;
+      // If source view is closed while blurring, it means the user switch back to normal mode, so we can skip emitting the change event.
+      if (this.sourceView) {
+        const sourceCode = this.getSourceCode();
+        const newValue = VegaRTEContent.fromHtml(sourceCode, {
+          autoMatchFormat: (_a = this.sourceEditConfig.autoMatchFormat) !== null && _a !== void 0 ? _a : true,
+        });
+        const newSourceCode = newValue.toHtml();
+        if (newSourceCode !== this.prevRecord) {
+          this.sourceCodeChangeEventEmitter.emit(newSourceCode);
+          this.prevRecord = newSourceCode;
+        }
+      }
+    };
+  }
+  /**
+   * Clean up the code block blur observer when the component is disconnected to prevent memory leaks.
+   */
+  clearCodeBlockBlurObserver() {
+    if (this.sourceCodeBlockRef) {
+      DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.sourceCodeBlockRef, VegaInternalCodeBlockBlur);
+    }
+  }
+  /**
+   * Get the source code from the source view's code block.
+   *
+   * @returns {Nullable<string>} The source code, or null if the code block reference is not set.
+   */
+  getSourceCode() {
+    if (this.sourceCodeBlockRef) {
+      return this.sourceCodeBlockRef.value.code;
+    }
+  }
+  /**
+   * Render the source view, which is a code block for editing the source code of the rich text editor content.
+   *
+   * @returns {Nullable<HTMLElement>} The rendered source view element, or null if source editing is not allowed.
+   */
+  render() {
+    if (!this.allowSourceEdit)
+      return;
+    const sourceCode = this.value.toHtml();
+    const sourceViewValue = this.sourceView ? CodeFormatter.format(sourceCode) : '';
+    // Record the source view value when rendering, which will be used to compare with the current source view value when blurring the code block to determine whether to emit the source code change event.
+    this.prevRecord = sourceCode;
+    return (h("div", { class: {
+        'source-view-container': true,
+        'vega-hidden': !this.sourceView,
+      } },
+      h("vega-code-block", { ref: (ref) => {
+          this.sourceCodeBlockRef = ref;
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaInternalCodeBlockBlur, this.handleCodeBlockBlur);
+        }, disabled: this.disabled, value: { language: 'html', code: sourceViewValue } })));
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "allowSourceEdit", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "sourceView", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "sourceEditConfig", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "sourceCodeChangeEventEmitter", void 0);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaRichTextEditorSourceViewRenderer.prototype, "clearCodeBlockBlurObserver", null);

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

@@ -23,7 +23,7 @@ import { LessIndentToolbarButtonSlimmer } from './slimmers/renderers/tools/less-
 import { ImageToolbarButtonSlimmer } from './slimmers/renderers/tools/image-toolbar-button-slimmer';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaChange, VegaImageInserted } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaChange, VegaImageInserted, VegaSourceCodeChange, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { TextColorToolbarButtonSlimmer } from './slimmers/renderers/tools/text-color-toolbar-button-slimmer';
 import { createSubStateNotifySlimmer } from '../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
 import { BulletsNumbersToolbarButtonSlimmer } from './slimmers/renderers/tools/bullets-numbers/bullets-numbers-toolbar-button-slimmer';
@@ -49,6 +49,7 @@ import { InternalCodeBlockSelectionController } from './slimmers/controllers/int
 import { SourceEditToolbarButtonSlimmer } from './slimmers/renderers/tools/source-edit-toolbar-button-slimmer';
 import { RTEExtensionController } from './slimmers/controllers/extension-controller';
 import { VegaRTEPresetToolbarItems } from './constants/constant';
+import { VegaRichTextEditorSourceViewRenderer } from './slimmers/renderers/vega-rich-text-editor-source-view-renderer';
 /**
  * @vegaVersion 2.34.0
  */
@@ -106,6 +107,8 @@ export class VegaRichTextEditor {
     this.historyController = new HistoryController();
     this.internalCodeBlockSelectionController = new InternalCodeBlockSelectionController();
     this.rteExtensionController = new RTEExtensionController();
+    this.sourceCodeChangeEventEmitter = createEventEmitSlimmer(VegaRichTextEditor, VegaSourceCodeChange);
+    this.richTextEditorSourceViewRenderer = new VegaRichTextEditorSourceViewRenderer();
     this.richTextContentEditable = true;
     this.selectionMap = new Map();
     this.isInDarkMode = VegaInternalThemeManager.isDarkMode();
@@ -660,6 +663,45 @@ export class VegaRichTextEditor {
           }
         }
       }
+    }, {
+      "method": "vegaSourceCodeChange",
+      "name": "vegaSourceCodeChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.78.0"
+          }],
+        "text": "An event emitter notifying a source code change event. It triggers when the editor loses focus in source edit mode."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "sourceCodeChange",
+      "name": "sourceCodeChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.78.0"
+          }],
+        "text": "An event emitter notifying a source code change event. It triggers when the editor loses focus in source edit mode."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
@@ -802,3 +844,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "rteExtensionController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "sourceCodeChangeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "richTextEditorSourceViewRenderer", void 0);

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

@@ -27,7 +27,7 @@ export class VegaRichTextImageEditorRenderer extends VegaSlimmer {
     };
   }
   render() {
-    return (h("vega-popover", { style: { width: '100%' }, trigger: "click", alignment: "start", placement: "bottom", showArrow: false, ref: (ref) => {
+    return (h("vega-popover", { style: { width: '100%' }, trigger: "click", alignment: "start", placement: "bottom", showArrow: false, isScreenPosition: true, ref: (ref) => {
         this.popoverRef = ref;
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
           this.selected = true;

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

@@ -188,7 +188,7 @@ export class VegaStepper {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaBlur, (input) => this.handleInputBlur(input));
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaChange, (input) => this.onChildInputChange(input));
             return (this.inputRef = el);
-          } }),
+          }, "data-aria-label": this.label || 'stepper' }),
         h("vega-button-circle", { label: "Increase", showTooltip: false, ref: (ref) => {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => this.onIncrease());
           }, icon: "plus-sign", disabled: this.value >= this.max || this.disabled, size: "small", variant: this.buttonVariant == 'secondary' ? 'secondary' : 'primary' }))), this.host);