@globalpayments/vega 2.32.0 → 2.34.0

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

@@ -0,0 +1,133 @@
+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 { h } from '@stencil/core';
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import trashCan from '../../../../../global/icons/trash-can';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaChange, VegaClick, VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { findParent } from '../../../../../utils/ui';
+import changeManager from '../../../../../helpers/change-manager/change-manager';
+import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalRichTextImageClick, VegaInternalRichTextImageDeleteButtonClicked, } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+export class VegaRichTextImageEditorRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.handleKeyDown = (e) => {
+      if (e.key === 'Enter') {
+        void this.formRef.getValue().then(({ alt }) => {
+          this.changeEventEmitter.emit({ action: 'edit', payload: { size: this.size, alt: alt } });
+        });
+        void this.popoverRef.hide();
+      }
+    };
+  }
+  render() {
+    return (h("vega-popover", { style: { width: '100%' }, trigger: "click", alignment: "start", placement: "bottom", showArrow: false, ref: (ref) => {
+        this.popoverRef = ref;
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
+          this.selected = true;
+          this.notifyImageSelected();
+          void this.formRef.setValue({
+            alt: this.alt,
+          });
+        });
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverHide, () => {
+          this.currentPage = 1;
+          this.selected = false;
+          void this.formRef.reset();
+        });
+      } },
+      h("div", { slot: "popover-content" },
+        h("slot", null)),
+      h("div", { slot: "popover" },
+        this.renderImageEditor(),
+        this.renderAltTextEditor())));
+  }
+  findParentContainerRef() {
+    this.parentContainerRef = findParent(this.host, 'vega-rich-text-content');
+  }
+  renderImageEditor() {
+    return (h("vega-box", { display: this.currentPage === 1 ? 'block' : 'none' },
+      h("vega-flex", { gap: "size-12", alignItems: "center" },
+        h("vega-font", { variant: "font-field-label-sm", color: "text-primary" }, "Size:"),
+        h("vega-segment-control", { size: "small", segments: [
+            { key: 'sm', text: 'Sm' },
+            { key: 'md', text: 'Md' },
+            { key: 'lg', text: 'Lg' },
+          ], selected: this.size, ref: (ref) => {
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => {
+              const size = e.detail;
+              this.size = size;
+              this.changeEventEmitter.emit({
+                action: 'edit',
+                payload: { size: size, alt: this.alt },
+              });
+            });
+          } }),
+        h("vega-button-group", { variant: "tertiary", size: "small", ref: (ref) => {
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (payload) => {
+              if (payload.detail === 'Alt Text') {
+                this.currentPage = 2;
+              }
+              else {
+                this.notifyImageDeleteButtonClicked();
+                this.changeEventEmitter.emit({ action: 'delete' });
+                void this.popoverRef.hide();
+              }
+            });
+          } },
+          h("vega-button-group-item", { label: "Alt Text", itemKey: "Alt Text" }),
+          h("vega-button-group-item", { label: "Delete Image", icon: VegaInternalIconManager.getIconKey('trash-can'), iconOnly: true, itemKey: "trash-can" })))));
+  }
+  renderAltTextEditor() {
+    return (h("vega-box", { display: this.currentPage === 2 ? 'block' : 'none' },
+      h("vega-form", { ref: (ref) => (this.formRef = ref) },
+        h("vega-input", { "data-vega-form": "alt", style: { width: '315px' }, label: "Alt Text", ref: (ref) => {
+            void ref.doFocus();
+          }, onKeyDown: this.handleKeyDown }))));
+  }
+  notifyImageSelected() {
+    if (this.parentContainerRef) {
+      changeManager.notify(domNodeSubjectFactory.getSubject(this.parentContainerRef, VegaInternalRichTextImageClick), { host: this.host });
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * {module:vega-rich-text-editor-image-click-delete-button}
+   */
+  /* istanbul ignore next */
+  notifyImageDeleteButtonClicked() {
+    if (this.parentContainerRef) {
+      changeManager.notify(domNodeSubjectFactory.getSubject(this.parentContainerRef, VegaInternalRichTextImageDeleteButtonClicked), { host: this.host });
+    }
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'trash-can': trashCan });
+})();
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaRichTextImageEditorRenderer.prototype, "currentPage", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaRichTextImageEditorRenderer.prototype, "selected", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextImageEditorRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextImageEditorRenderer.prototype, "alt", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaRichTextImageEditorRenderer.prototype, "size", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextImageEditorRenderer.prototype, "changeEventEmitter", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaRichTextImageEditorRenderer.prototype, "findParentContainerRef", null);

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-image-editor/vega-rich-text-image-editor.css

@@ -0,0 +1,13 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+:host {
+  display: inline-block;
+}
+
+:host(.rte-image-selected) {
+  outline: 2px solid rgba(var(--v-border-color-tile-selected, 19, 98, 226, 1));
+  outline-offset: -2px;
+}

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

@@ -0,0 +1,165 @@
+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 { Component, Host, h, Element, Prop, State, Event } from '@stencil/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
+import { sanitizeVegaComponent } from '../../../utils/component';
+import { VegaRichTextImageEditorRenderer } from './slimmers/renderers/vega-rich-text-image-editor-renderer';
+import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/event-emit-slimmer';
+import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-id';
+/**
+ * This is an internal used component and shouldn't be used by clients,
+ *    it doesn't show up in storybook either.
+ *
+ * @vegaVersion 2.34.0
+ */
+export class VegaRichTextImageEditor {
+  constructor() {
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.renderer = new VegaRichTextImageEditorRenderer();
+    this.changeEventEmitter = createEventEmitSlimmer(VegaRichTextImageEditor, VegaChange);
+    this.currentPage = 1;
+    this.selected = false;
+    /**
+     * Specifies the value of image alt
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.alt = '';
+    /**
+     * Specifies the size of the image to the container
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.size = 'md';
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { class: { 'rte-image-selected': this.selected } }, this.renderer.render()), this.host);
+  }
+  static get is() { return "vega-rich-text-image-editor"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-rich-text-image-editor.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-rich-text-image-editor.css"]
+  }; }
+  static get properties() { return {
+    "alt": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.34.0"
+          }],
+        "text": "Specifies the value of image alt"
+      },
+      "attribute": "alt",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaRichTextImageEditorSizeType",
+        "resolved": "\"lg\" | \"md\" | \"sm\"",
+        "references": {
+          "VegaRichTextImageEditorSizeType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.34.0"
+          }],
+        "text": "Specifies the size of the image to the container"
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "'md'"
+    }
+  }; }
+  static get states() { return {
+    "currentPage": {},
+    "selected": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaChange",
+      "name": "vegaChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.34.0"
+          }],
+        "text": "An event emitter notifying content change."
+      },
+      "complexType": {
+        "original": "VegaRichTextImageEditorChangeDetail",
+        "resolved": "{ action: \"delete\"; } | { action: \"edit\"; payload: VegaRTEImageEditorRecord; }",
+        "references": {
+          "VegaRichTextImageEditorChangeDetail": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.34.0"
+          }],
+        "text": "An event emitter notifying content change."
+      },
+      "complexType": {
+        "original": "VegaRichTextImageEditorChangeDetail",
+        "resolved": "{ action: \"delete\"; } | { action: \"edit\"; payload: VegaRTEImageEditorRecord; }",
+        "references": {
+          "VegaRichTextImageEditorChangeDetail": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaRichTextImageEditor.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextImageEditor.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextImageEditor.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextImageEditor.prototype, "changeEventEmitter", void 0);

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

@@ -0,0 +1,144 @@
+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 { h } from '@stencil/core';
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaClick, VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaInternalComponentDidRender, VegaInternalPopoverUpdateTarget, } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import ChangeManager from '../../../../../helpers/change-manager/change-manager';
+import remoteInvocationRegistry from '../../../../../helpers/remote-invocation/remote-invocation-registry';
+export class VegaRichTextLinkEditorRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.handleKeyDown = (e) => {
+      if (e.key === 'Enter') {
+        void this.formRef.getValue().then(({ text, url }) => {
+          if (url.length > 0) {
+            this.changeEventEmitter.emit({
+              action: 'link',
+              payload: { text: text || url, url },
+            });
+            void this.popoverRef.hide();
+          }
+        });
+      }
+    };
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaRichTextLinkEditor.componentDidLoad}
+   */
+  componentDidLoad() {
+    this.updatePopoverTarget();
+  }
+  /**
+   * Component lifecycle - [componentDidRender]{@link VegaRichTextLinkEditor.componentDidRender}
+   */
+  componentDidRender() {
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalComponentDidRender), {});
+  }
+  watchStatusChange() {
+    if (this.status === 'linkEdit') {
+      setTimeout(() => {
+        void this.urlInputRef.doFocus();
+      });
+    }
+  }
+  watchTargetChange() {
+    this.updatePopoverTarget();
+  }
+  getPopoverRef() {
+    return this.popoverRef;
+  }
+  render() {
+    return (h("vega-popover", { trigger: "click", alignment: "start", placement: "bottom", showArrow: false, ref: (ref) => {
+        this.popoverRef = ref;
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
+          var _a, _b;
+          if (this.status === 'linkEdit') {
+            void this.urlInputRef.doFocus();
+          }
+          void this.formRef.setValue({
+            text: (_a = this.record) === null || _a === void 0 ? void 0 : _a.text,
+            url: (_b = this.record) === null || _b === void 0 ? void 0 : _b.url,
+          });
+        });
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverHide, () => {
+          void this.formRef.reset();
+          if (this.resetStatusAfterHide) {
+            this.status = 'editOrUnlinkSelection';
+          }
+        });
+      } },
+      h("span", { slot: "popover-content" },
+        h("slot", null)),
+      h("div", { slot: "popover" },
+        this.renderLinkUnlinkContent(),
+        this.renderLinkEditContent())));
+  }
+  renderLinkUnlinkContent() {
+    return (h("vega-box", { display: this.status === 'editOrUnlinkSelection' ? 'block' : 'none' },
+      h("vega-button-group", { size: "small", variant: "tertiary", ref: (node) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaClick, ({ detail }) => {
+            switch (detail) {
+              case 'edit': {
+                this.status = 'linkEdit';
+                return;
+              }
+              case 'unlink': {
+                this.changeEventEmitter.emit({ action: 'unlink' });
+                void this.popoverRef.hide();
+              }
+            }
+          });
+        } },
+        h("vega-button-group-item", { label: "Edit", itemKey: "edit" }),
+        h("vega-button-group-item", { label: "Unlink", itemKey: "unlink" }))));
+  }
+  renderLinkEditContent() {
+    return (h("vega-box", { display: this.status === 'linkEdit' ? 'block' : 'none' },
+      h("vega-form", { ref: (ref) => (this.formRef = ref) },
+        h("vega-flex", { style: { width: '419px' }, direction: "col", gap: "size-16" },
+          h("vega-input", { "data-vega-form": "url", ref: (ref) => {
+              this.urlInputRef = ref;
+            }, size: "small", label: "URL", onKeyDown: this.handleKeyDown }),
+          h("vega-input", { size: "small", label: "Text", "data-vega-form": "text", onKeyDown: this.handleKeyDown })))));
+  }
+  updatePopoverTarget() {
+    remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), this.target);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaRichTextLinkEditorRenderer.prototype, "status", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaRichTextLinkEditorRenderer.prototype, "record", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "changeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "resetStatusAfterHide", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "target", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaRichTextLinkEditorRenderer.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], VegaRichTextLinkEditorRenderer.prototype, "componentDidRender", null);
+__decorate([
+  MapToComponentMethod('watchStatusChange')
+], VegaRichTextLinkEditorRenderer.prototype, "watchStatusChange", null);
+__decorate([
+  MapToComponentMethod('watchTargetChange')
+], VegaRichTextLinkEditorRenderer.prototype, "watchTargetChange", null);

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-link-editor/vega-rich-text-link-editor.css

@@ -0,0 +1,11 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+:host {
+  display: contents;
+}
+:host vega-popover {
+  display: inline;
+}