@globalpayments/vega 2.32.0 → 2.34.0

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

@@ -0,0 +1,102 @@
+import { h } from '@stencil/core';
+import { Annotation, InternalAnnotationTypeEnum } from './annotation.abstract';
+import { generateUUID } from '../../../../utils/misc';
+import { LinkAnnotationAction } from '../actions/link-annotation-action';
+import { NodeAnnotationTypeEnum } from './node-annotation.abstract';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaChange } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import { isNonNullable } from '../../../../types/type-guard';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
+/**
+ * Annotation to represent a link of grouped nodes
+ */
+export class LinkGroupAnnotation extends Annotation {
+  constructor(groupKey) {
+    super();
+    this.type = InternalAnnotationTypeEnum.LINK_GROUP;
+    this.linkGroups = new Map();
+    this.linkGroups = new Map([[groupKey, []]]);
+  }
+  renderNodes(nodes, { editable }) {
+    const blockNodes = this.groupNodesByLink(nodes);
+    return blockNodes.flatMap((item) => {
+      if (this.isLinkGroup(item)) {
+        const linkAnnotation = item[0].getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+        return editable
+          ? this.renderLinkEditorWrapper(item, linkAnnotation)
+          : this.renderLink(item, linkAnnotation);
+      }
+      return item.render();
+    });
+  }
+  renderLinkEditorWrapper(linkNodes, linkAnnotation) {
+    const { href } = linkAnnotation.link;
+    const textFromNodes = linkNodes.map((node) => node.text).join('');
+    const handleChange = ({ detail, }) => {
+      switch (detail.action) {
+        case 'link': {
+          const { url, text } = detail.payload;
+          const textChanged = text !== textFromNodes;
+          const groupKey = generateUUID();
+          linkNodes.forEach((node) => {
+            const linkAnnotationAction = new LinkAnnotationAction({
+              link: { href: url, groupKey: groupKey },
+              newText: textChanged ? text : undefined,
+              needMergeNode: textChanged && linkNodes.length > 1,
+              doSplit: false,
+            });
+            node.apply(linkAnnotationAction);
+          });
+          return;
+        }
+        case 'unlink': {
+          linkNodes.forEach((node) => node.deleteAnnotationByType(NodeAnnotationTypeEnum.LINK));
+          return;
+        }
+      }
+    };
+    let linkWrapperRef;
+    return (h("span", { class: "link-editor-wrapper", role: "link", tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (ref) => {
+        if (ref) {
+          linkWrapperRef = ref;
+        }
+      } },
+      this.renderLink(linkNodes, linkAnnotation),
+      h("vega-rich-text-link-editor", { record: {
+          text: textFromNodes,
+          url: href,
+        }, ref: (ref) => {
+          if (ref) {
+            ref.target = linkWrapperRef;
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);
+          }
+        } })));
+  }
+  renderLink(linkNodes, linkAnnotation) {
+    const { href } = linkAnnotation.link;
+    return (h("a", { class: "v-rte--link", href: href, target: "_blank" }, linkNodes.map((node) => node.render())));
+  }
+  isLinkGroup(item) {
+    return Array.isArray(item);
+  }
+  groupNodesByLink(nodes) {
+    return nodes.reduce((acc, node) => {
+      const nodeLinkAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+      const lastGroup = acc[acc.length - 1];
+      if (isNonNullable(nodeLinkAnnotation)) {
+        if (lastGroup &&
+          this.isLinkGroup(lastGroup) &&
+          lastGroup[0].getAnnotationByType(NodeAnnotationTypeEnum.LINK).toEqual(nodeLinkAnnotation)) {
+          lastGroup.push(node);
+        }
+        else {
+          acc.push([node]);
+        }
+      }
+      else {
+        acc.push(node);
+      }
+      return acc;
+    }, []);
+  }
+}

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

@@ -0,0 +1,18 @@
+import { Annotation } from './annotation.abstract';
+export var NodeAnnotationTypeEnum;
+(function (NodeAnnotationTypeEnum) {
+  NodeAnnotationTypeEnum["BOLD"] = "BOLD";
+  NodeAnnotationTypeEnum["ITALIC"] = "ITALIC";
+  NodeAnnotationTypeEnum["UNDERLINE"] = "UNDERLINE";
+  NodeAnnotationTypeEnum["STRIKETHROUGH"] = "STRIKETHROUGH";
+  NodeAnnotationTypeEnum["SELECTION_RANGE"] = "SELECTION_RANGE";
+  NodeAnnotationTypeEnum["IMAGE"] = "IMAGE";
+  NodeAnnotationTypeEnum["CODE"] = "CODE";
+  NodeAnnotationTypeEnum["TEXT_COLOR"] = "TEXT_COLOR";
+  NodeAnnotationTypeEnum["LINK"] = "LINK";
+})(NodeAnnotationTypeEnum || (NodeAnnotationTypeEnum = {}));
+/**
+ * Abstract class for all annotations
+ */
+export class NodeAnnotation extends Annotation {
+}

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

@@ -0,0 +1,11 @@
+import { Annotation, InternalAnnotationTypeEnum } from './annotation.abstract';
+/**
+ * Annotation to represent a selection range
+ */
+export class SelectionRangeAnnotation extends Annotation {
+  constructor(range) {
+    super();
+    this.type = InternalAnnotationTypeEnum.SELECTION_RANGE;
+    this.range = range;
+  }
+}

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

@@ -0,0 +1,57 @@
+import { NodeAnnotation, NodeAnnotationTypeEnum } from './node-annotation.abstract';
+/**
+ * Annotation to make text with strikethrough
+ */
+export class StrikethroughAnnotation extends NodeAnnotation {
+  constructor(underline) {
+    super();
+    this.type = NodeAnnotationTypeEnum.STRIKETHROUGH;
+    this.strikethrough = underline;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {Nullable<boolean>} strikethrough - Strikethrough annotation
+   * @returns {[NodeAnnotationTypeEnum.STRIKETHROUGH, StrikethroughAnnotation]} Map item for the annotation
+   */
+  static from(strikethrough) {
+    return [NodeAnnotationTypeEnum.STRIKETHROUGH, new StrikethroughAnnotation(strikethrough)];
+  }
+  /**
+   * Generate the map item for the annotation by html element
+   *
+   * @param {HTMLElement} node - An html element.
+   * @returns {[NodeAnnotationTypeEnum.STRIKETHROUGH, StrikethroughAnnotation]} Map item for the annotation
+   */
+  static fromHTML(node) {
+    return this.from(node.style.textDecoration.includes('line-through') ||
+      node.nodeName === 'S' ||
+      node.classList.contains('v-rte--strikethrough'));
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      strikethrough: this.strikethrough,
+    };
+  }
+  /**
+   * Generate the class for the annotation
+   *
+   * @returns {Nullable<string>} - Annotation class
+   */
+  renderClass() {
+    return this.strikethrough ? 'v-rte--strikethrough' : null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   */
+  render() {
+    return null;
+  }
+}

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

@@ -0,0 +1,85 @@
+import { NodeAnnotation, NodeAnnotationTypeEnum } from './node-annotation.abstract';
+import { RTE_TEXT_COLORS } from '../../constants/constant';
+import { rgbToHex } from '../../../../utils/ui';
+import { VegaThemeManager } from '../../../../helpers/theme/theme-manager';
+/**
+ * Annotation to make text with text color
+ */
+export class TextColorAnnotation extends NodeAnnotation {
+  constructor(textColor) {
+    super();
+    this.type = NodeAnnotationTypeEnum.TEXT_COLOR;
+    this.textColor = this.formatTextColor(textColor);
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {string} textColor - text color annotation
+   * @returns {[NodeAnnotationTypeEnum.TEXT_COLOR, TextColorAnnotation]} Map item for the annotation
+   */
+  static from(textColor) {
+    return [NodeAnnotationTypeEnum.TEXT_COLOR, new TextColorAnnotation(textColor)];
+  }
+  /**
+   * Generate the map item for the annotation by html element
+   *
+   * @param {HTMLElement} node - An html element.
+   * @returns {[NodeAnnotationTypeEnum.TEXT_COLOR, TextColorAnnotation]} Map item for the annotation
+   */
+  static fromHTML(node) {
+    var _a;
+    const color = node.style.color;
+    const hexColor = (_a = rgbToHex(color)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+    if (hexColor) {
+      const colorSchema = RTE_TEXT_COLORS.find((schema) => schema.light === hexColor || schema.dark === hexColor);
+      if (colorSchema)
+        return this.from(colorSchema.key);
+      return null;
+    }
+    else {
+      for (const color of RTE_TEXT_COLORS) {
+        if (node.style.color.includes(color.key)) {
+          return this.from(color.key);
+        }
+      }
+      return null;
+    }
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      textColor: this.textColor.key,
+    };
+  }
+  /**
+   * Generate the class for the annotation
+   *
+   * @returns {Nullable<string>} - Annotation class
+   */
+  renderClass() {
+    return null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   */
+  render() {
+    return {
+      color: VegaThemeManager.isDarkMode() ? this.textColor.dark : this.textColor.light,
+    };
+  }
+  /**
+   * format text color
+   *
+   * @param {string} textColor - text color
+   * @returns {VegaRTEColorSchema} - VegaRTEColorSchema
+   */
+  formatTextColor(textColor) {
+    return (RTE_TEXT_COLORS.find((item) => item.key === textColor) || RTE_TEXT_COLORS[0]);
+  }
+}

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

@@ -0,0 +1,105 @@
+import { BlockAnnotation, BlockAnnotationTypeEnum } from './block-annotation.abstract';
+/**
+ * Text style annotation
+ */
+export class TextStyleAnnotation extends BlockAnnotation {
+  constructor(textStyle) {
+    super();
+    this.type = BlockAnnotationTypeEnum.TEXT_STYLE;
+    this.textStyle = textStyle;
+  }
+  /**
+   * Generate the map item for the annotations
+   *
+   * @param {VegaRTETextStyleType} textStyle - the text style type
+   * @returns {[BlockAnnotationTypeEnum.TEXT_STYLE, TextStyleAnnotation]} Map item for the annotation
+   */
+  static from(textStyle) {
+    return [BlockAnnotationTypeEnum.TEXT_STYLE, new TextStyleAnnotation(textStyle)];
+  }
+  /**
+   * Generate the map item for the annotation by html element
+   *
+   * @param {HTMLElement} node - An html element.
+   * @returns {[BlockAnnotationTypeEnum.TEXT_STYLE, TextStyleAnnotation]} Map item for the annotation
+   */
+  static fromHTML(node) {
+    return this.from(this.getTextStyle(node));
+  }
+  /**
+   * Get the type of block.
+   *
+   * @param {HTMLElement} node - An HTMLElement.
+   * @returns {VegaRTETextStyleType} text style type.
+   */
+  static getTextStyle(node) {
+    if (node.nodeType !== Node.TEXT_NODE && node.hasAttribute('data-type')) {
+      return node.getAttribute('data-type');
+    }
+    switch (node.style.fontSize) {
+      case '36px':
+        return 'title';
+      case '28px':
+        return 'subtitle';
+      case '22px':
+        return 'heading-1';
+      case '20px':
+        return 'heading-2';
+      case '18px':
+        return 'heading-3';
+      default:
+        break;
+    }
+    switch (node.nodeName) {
+      case 'H1':
+        return 'heading-1';
+      case 'H2':
+        return 'heading-2';
+      case 'H3':
+        return 'heading-3';
+      default:
+        return 'paragraph';
+    }
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
+   */
+  toJSON() {
+    return { textStyle: this.textStyle };
+  }
+  /**
+   * Render the styles by block type
+   *
+   * @returns {AnnotationStyle} the styles to apply
+   */
+  render() {
+    const paragraphStyle = {
+      fontFamily: 'Inter',
+      fontSize: '16px',
+      lineHeight: '22px',
+      fontWeight: '500',
+    };
+    switch (this.textStyle) {
+      case 'paragraph': {
+        return paragraphStyle;
+      }
+      case 'title': {
+        return { fontFamily: 'Inter', fontSize: '36px', lineHeight: '40px', fontWeight: '500' };
+      }
+      case 'subtitle': {
+        return { fontFamily: 'Inter', fontSize: '28px', lineHeight: '32px', fontWeight: '500' };
+      }
+      case 'heading-1': {
+        return { fontFamily: 'Inter', fontSize: '22px', lineHeight: '24px', fontWeight: '500' };
+      }
+      case 'heading-2': {
+        return { fontFamily: 'Inter', fontSize: '20px', lineHeight: '24px', fontWeight: '500' };
+      }
+      case 'heading-3': {
+        return { fontFamily: 'Inter', fontSize: '18px', lineHeight: '22px', fontWeight: '500' };
+      }
+    }
+  }
+}

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

@@ -0,0 +1,57 @@
+import { NodeAnnotation, NodeAnnotationTypeEnum } from './node-annotation.abstract';
+/**
+ * Annotation to make text with underline
+ */
+export class UnderlineAnnotation extends NodeAnnotation {
+  constructor(underline) {
+    super();
+    this.type = NodeAnnotationTypeEnum.UNDERLINE;
+    this.underline = underline;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} underline - Underline annotation
+   * @returns {[NodeAnnotationTypeEnum.UNDERLINE, UnderlineAnnotation]} Map item for the annotation
+   */
+  static from(underline) {
+    return [NodeAnnotationTypeEnum.UNDERLINE, new UnderlineAnnotation(underline)];
+  }
+  /**
+   * Generate the map item for the annotation by html element
+   *
+   * @param {HTMLElement} node - An html element.
+   * @returns {[NodeAnnotationTypeEnum.UNDERLINE, UnderlineAnnotation]} Map item for the annotation
+   */
+  static fromHTML(node) {
+    return this.from(node.style.textDecoration.includes('underline') ||
+      node.nodeName === 'U' ||
+      node.classList.contains('v-rte--underline'));
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      underline: this.underline,
+    };
+  }
+  /**
+   * Generate the class for the annotation
+   *
+   * @returns {Nullable<string>} - Annotation class
+   */
+  renderClass() {
+    return this.underline ? 'v-rte--underline' : null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   */
+  render() {
+    return null;
+  }
+}