@heartlandone/vega 2.77.1 → 2.79.0

package/dist/collection/components/vega-rich-text-editor/extensions/table/annotation-handler/table-annotation-handler-base.js

@@ -0,0 +1,78 @@
+import { AnnotationGeneratorStrategyAbstract } from '../../../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/annotation-generator-strategy.abstract';
+import { RTETableColorManager } from '../utils/table-color-manager';
+/**
+ * Base class for table annotation handlers with common extraction methods.
+ */
+export class TableAnnotationHandlerBase extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * Extract background color from element.
+   *
+   * @param {HTMLElement} element - Table element.
+   * @returns {Nullable<string>} Background color value.
+   */
+  getBackgroundColor(element) {
+    if (element.style.backgroundColor) {
+      return (RTETableColorManager.getColorKey(element.style.backgroundColor) ||
+        element.style.backgroundColor);
+    }
+    return null;
+  }
+  /**
+   * Extract border properties from element.
+   *
+   * @param {HTMLElement} element - Table element.
+   * @returns {Nullable<VegaRTETableBorderType>} Border properties.
+   */
+  getBorder(element) {
+    const style = element.style;
+    // Check individual border properties
+    const borderStyle = style.borderStyle;
+    const borderWidth = style.borderWidth;
+    const borderColor = style.borderColor;
+    if (borderColor || borderStyle || borderWidth) {
+      const updatedBorderColor = borderColor === 'initial' ? '' : borderColor;
+      return {
+        style: borderStyle === 'initial' ? '' : borderStyle,
+        width: borderWidth === 'initial' ? '' : borderWidth,
+        color: RTETableColorManager.getColorKey(updatedBorderColor) || updatedBorderColor,
+      };
+    }
+    return null;
+  }
+  /**
+   * Extract width from element.
+   *
+   * @param {HTMLElement} element - Table element.
+   * @returns {Nullable<string>} Width value.
+   */
+  getWidth(element) {
+    if (element.style.width) {
+      return element.style.width;
+    }
+    // Check for width attribute
+    const widthAttr = element.getAttribute('width');
+    if (widthAttr) {
+      // If it's just a number, assume pixels
+      return /^\d+$/.test(widthAttr) ? `${widthAttr}px` : widthAttr;
+    }
+    return null;
+  }
+  /**
+   * Extract height from element.
+   *
+   * @param {HTMLElement} element - Table element.
+   * @returns {Nullable<string>} Height value.
+   */
+  getHeight(element) {
+    if (element.style.height) {
+      return element.style.height;
+    }
+    // Check for height attribute
+    const heightAttr = element.getAttribute('height');
+    if (heightAttr) {
+      // If it's just a number, assume pixels
+      return /^\d+$/.test(heightAttr) ? `${heightAttr}px` : heightAttr;
+    }
+    return null;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/annotation-handler/table-annotation-handler.js

@@ -0,0 +1,69 @@
+import { TableAnnotationHandlerBase } from './table-annotation-handler-base';
+import { cleanObject } from '../../../../../utils/object';
+/**
+ * Handler for table annotation parsing from HTML elements.
+ */
+export class TableAnnotationHandler extends TableAnnotationHandlerBase {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETableBlock';
+  }
+  /**
+   * Handle annotation extraction from table element.
+   *
+   * @param {HTMLElement} element - Current table element.
+   * @returns {VegaRTEAnnotations} - Extracted table annotation.
+   */
+  handle(element) {
+    const tableAnnotation = cleanObject({
+      backgroundColor: this.getBackgroundColor(element),
+      border: this.getBorder(element),
+      width: this.getWidth(element),
+      height: this.getHeight(element),
+      alignment: this.getAlignment(element),
+    });
+    return Object.keys(tableAnnotation).length > 0
+      ? { table: tableAnnotation }
+      : {};
+  }
+  /**
+   * Extract alignment from element.
+   *
+   * @param {HTMLElement} element - Table element.
+   * @returns {Nullable<VegaRTETableAlignment>} Alignment value.
+   */
+  getAlignment(element) {
+    // Check for class-based alignment
+    const classList = element.classList;
+    if (classList.contains('v-rte--extension-table-align-left')) {
+      return 'left';
+    }
+    else if (classList.contains('v-rte--extension-table-align-center')) {
+      return 'center';
+    }
+    else if (classList.contains('v-rte--extension-table-align-right')) {
+      return 'right';
+    }
+    // Check margin-based alignment
+    const style = element.style;
+    const marginLeft = style.marginLeft;
+    const marginRight = style.marginRight;
+    if (marginLeft === 'auto' && marginRight === 'auto') {
+      return 'center';
+    }
+    else if (marginLeft === '0' || marginLeft === '0px') {
+      return 'left';
+    }
+    else if (marginRight === '0' || marginRight === '0px') {
+      return 'right';
+    }
+    // Check for align attribute (deprecated but still used)
+    const alignAttr = element.getAttribute('align');
+    if (alignAttr && ['left', 'center', 'right'].includes(alignAttr)) {
+      return alignAttr;
+    }
+    return null;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/annotation-handler/table-cell-annotation-handler.js

@@ -0,0 +1,108 @@
+import { TableAnnotationHandlerBase } from './table-annotation-handler-base';
+import { cleanObject } from '../../../../../utils/object';
+/**
+ * Handler for table cell annotation parsing from HTML elements.
+ */
+export class TableCellAnnotationHandler extends TableAnnotationHandlerBase {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETableCellBlock';
+  }
+  /**
+   * Handle annotation extraction from table cell element.
+   *
+   * @param {HTMLElement} element - Current table cell element.
+   * @returns {VegaRTEAnnotations} - Extracted table cell annotation.
+   */
+  handle(element) {
+    const cellAnnotation = cleanObject({
+      backgroundColor: this.getBackgroundColor(element),
+      padding: this.getPadding(element),
+      border: this.getBorder(element),
+      width: this.getWidth(element),
+      height: this.getHeight(element),
+      textAlign: this.getTextAlign(element),
+      verticalAlign: this.getVerticalAlign(element),
+      minWidth: this.getMinWidth(element),
+      boxSizing: this.getBoxSizing(element),
+    });
+    return Object.keys(cellAnnotation).length > 0
+      ? { tableCell: cellAnnotation }
+      : {};
+  }
+  /**
+   * Extract minimum width from element.
+   *
+   * @param {HTMLElement} element - Table cell element.
+   * @returns {Nullable<string>} Minimum width value.
+   */
+  getMinWidth(element) {
+    if (element.style.minWidth) {
+      return element.style.minWidth;
+    }
+    return null;
+  }
+  /**
+   * Extract box sizing from element.
+   *
+   * @param {HTMLElement} element - Table cell element.
+   * @returns {Nullable<string>} Box sizing value.
+   */
+  getBoxSizing(element) {
+    if (element.style.boxSizing) {
+      return element.style.boxSizing;
+    }
+    return null;
+  }
+  /**
+   * Extract padding from element.
+   *
+   * @param {HTMLElement} element - Table cell element.
+   * @returns {Nullable<string>} Padding value.
+   */
+  getPadding(element) {
+    if (element.style.padding) {
+      return element.style.padding;
+    }
+    return null;
+  }
+  /**
+   * Extract text alignment from element.
+   *
+   * @param {HTMLElement} element - Table cell element.
+   * @returns {Nullable<VegaRTETableTextAlignType>} Text alignment value.
+   */
+  getTextAlign(element) {
+    // Check inline style
+    if (element.style.textAlign) {
+      const align = element.style.textAlign;
+      if (['left', 'center', 'right', 'justify'].includes(align)) {
+        return align;
+      }
+    }
+    // Check for align attribute (deprecated but still used)
+    const alignAttr = element.getAttribute('align');
+    if (alignAttr && ['left', 'center', 'right', 'justify'].includes(alignAttr)) {
+      return alignAttr;
+    }
+    return null;
+  }
+  /**
+   * Extract vertical alignment from element.
+   *
+   * @param {HTMLElement} element - Table cell element.
+   * @returns {Nullable<VegaRTETableVerticalAlignType>} Vertical alignment value.
+   */
+  getVerticalAlign(element) {
+    // Check inline style
+    if (element.style.verticalAlign) {
+      const align = element.style.verticalAlign;
+      if (['top', 'middle', 'bottom'].includes(align)) {
+        return align;
+      }
+    }
+    return null;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/annotation-handler/table-head-cell-annotation-handler.js

@@ -0,0 +1,14 @@
+import { TableCellAnnotationHandler } from './table-cell-annotation-handler';
+/**
+ * Handler for table head cell annotation parsing from HTML elements.
+ * Extends TableCellAnnotationHandler as the extraction logic is identical,
+ * only differing in the target DTO type (th vs td elements).
+ */
+export class TableHeadCellAnnotationHandler extends TableCellAnnotationHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETableHeadCellBlock';
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/annotations/table-annotation.js

@@ -0,0 +1,106 @@
+import { cleanObject } from '../../../../../utils/object';
+import { BlockAnnotation } from '../../../dto/annotations/block-annotation.abstract';
+import { RTETableColorAnnotation } from './table-color-annotation';
+export var RTETableExtensionAnnotationTypeEnum;
+(function (RTETableExtensionAnnotationTypeEnum) {
+  RTETableExtensionAnnotationTypeEnum["TABLE"] = "EXTENSION_TABLE";
+  RTETableExtensionAnnotationTypeEnum["CELL"] = "EXTENSION_TABLE_CELL";
+  RTETableExtensionAnnotationTypeEnum["CAPTION"] = "EXTENSION_TABLE_CAPTION";
+  RTETableExtensionAnnotationTypeEnum["COLOR"] = "EXTENSION_TABLE_COLOR";
+})(RTETableExtensionAnnotationTypeEnum || (RTETableExtensionAnnotationTypeEnum = {}));
+/**
+ * Class representing a table annotation in the rich text editor.
+ */
+export class RTETableAnnotation extends BlockAnnotation {
+  constructor({ backgroundColor, border, width, height, alignment, borderCollapse } = {}, useInternalStyle = true) {
+    super();
+    this.type = RTETableExtensionAnnotationTypeEnum.TABLE;
+    this.useInternalStyle = useInternalStyle;
+    this.backgroundColor = backgroundColor;
+    this.border = border;
+    this.width = width;
+    this.height = height;
+    this.alignment =
+      useInternalStyle && alignment === undefined ? RTETableAnnotation.DEFAULT_ALIGNMENT : alignment;
+    this.backgroundColorAnnotation = new RTETableColorAnnotation(backgroundColor);
+    this.borderColorAnnotation = new RTETableColorAnnotation(border === null || border === void 0 ? void 0 : border.color);
+    this.borderCollapse =
+      useInternalStyle && borderCollapse === undefined
+        ? RTETableAnnotation.DEFAULT_BORDER_COLLAPSE
+        : borderCollapse;
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(value, useInternalStyle = true) {
+    return [RTETableExtensionAnnotationTypeEnum.TABLE, new RTETableAnnotation(value, useInternalStyle)];
+  }
+  /**
+   * Generates the CSS border string from the border properties.
+   *
+   * @returns {Nullable<string>} The CSS border string.
+   */
+  get borderStr() {
+    if (!this.border) {
+      return null;
+    }
+    return `${this.border.style} ${this.border.width} ${this.borderColorAnnotation.renderStyle().color}`.trim();
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTETableAnnotation({
+      backgroundColor: this.backgroundColor,
+      border: this.border,
+      width: this.width,
+      height: this.height,
+      alignment: this.alignment,
+      borderCollapse: this.borderCollapse,
+    }, this.useInternalStyle);
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return {
+      table: cleanObject({
+        backgroundColor: this.backgroundColor,
+        border: this.border,
+        width: this.width,
+        height: this.height,
+        alignment: this.alignment,
+        borderCollapse: this.borderCollapse,
+      }),
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle() {
+    const backgroundColor = this.backgroundColorAnnotation.renderStyle().color;
+    const tableStyles = Object.assign({ border: this.borderStr, width: this.width, height: this.height, borderCollapse: this.borderCollapse }, this.renderAlignmentStyle());
+    backgroundColor && (tableStyles.backgroundColor = backgroundColor);
+    return cleanObject(tableStyles);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass() {
+    return 'v-rte--extension-table';
+  }
+  /**
+   * Generates the alignment styles for the table.
+   *
+   * @returns {Record<string, string>} The alignment styles.
+   */
+  renderAlignmentStyle() {
+    if (!this.alignment)
+      return {};
+    return {
+      margin: this.alignment === 'center' ? '0 auto' : this.alignment === 'left' ? '0' : '0 0 0 auto',
+    };
+  }
+}
+RTETableAnnotation.DEFAULT_BORDER_COLLAPSE = 'collapse';
+RTETableAnnotation.DEFAULT_ALIGNMENT = 'center';

package/dist/collection/components/vega-rich-text-editor/extensions/table/annotations/table-caption-annotation.js

@@ -0,0 +1,69 @@
+import { BlockAnnotation } from '../../../dto/annotations/block-annotation.abstract';
+import { RTETableExtensionAnnotationTypeEnum } from './table-annotation';
+import { VegaInternalThemeManager } from '../../../../../helpers/theme/internal-theme-manager';
+import { RTE_TABLE_HEAD_DEFAULT_BACKGROUND_COLOR } from '../constants/styles.constants';
+/**
+ * Class representing a table caption annotation in the rich text editor.
+ */
+export class RTETableCaptionAnnotation extends BlockAnnotation {
+  constructor() {
+    super(...arguments);
+    this.type = RTETableExtensionAnnotationTypeEnum.CAPTION;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTETableCaptionAnnotation();
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return 'v-rte--extension-table-caption';
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return {
+      padding: '8px',
+      border: '1px solid #ddd',
+      borderBottom: 'none',
+      backgroundColor: this.getCaptionBackgroundColor(),
+      position: 'relative',
+      textAlign: 'center',
+      minHeight: '22px',
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return {
+      caption: {
+        padding: '8px 12px',
+        border: '1px solid #ddd',
+        borderBottom: 'none',
+        backgroundColor: this.getCaptionBackgroundColor(),
+        position: 'relative',
+        textAlign: 'center',
+        minHeight: '22px',
+      },
+    };
+  }
+  /**
+   * Get the background color for the caption based on the current theme mode.
+   *
+   * @returns {string} The background color for the caption.
+   */
+  getCaptionBackgroundColor() {
+    return VegaInternalThemeManager.isDarkMode()
+      ? RTE_TABLE_HEAD_DEFAULT_BACKGROUND_COLOR.dark
+      : RTE_TABLE_HEAD_DEFAULT_BACKGROUND_COLOR.light;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/annotations/table-cell-annotation.js

@@ -0,0 +1,192 @@
+import { cleanObject } from '../../../../../utils/object';
+import { RTETableExtensionAnnotationTypeEnum } from './table-annotation';
+import { BlockAnnotation } from '../../../dto/annotations/block-annotation.abstract';
+import { RTETableColorAnnotation } from './table-color-annotation';
+/**
+ * Class representing a table cell annotation in the rich text editor.
+ */
+export class RTETableCellAnnotation extends BlockAnnotation {
+  constructor({ backgroundColor, padding, border, width, height, textAlign, verticalAlign, minWidth, boxSizing, } = {}, useInternalStyle = true) {
+    super();
+    this.type = RTETableExtensionAnnotationTypeEnum.CELL;
+    this.useInternalStyle = useInternalStyle;
+    this.backgroundColor = backgroundColor;
+    this.width = width;
+    this.height = height;
+    this.border =
+      useInternalStyle && border === undefined ? RTETableCellAnnotation.DEFAULT_BORDER : border;
+    this.padding =
+      useInternalStyle && padding === undefined ? RTETableCellAnnotation.DEFAULT_PADDING : padding;
+    this.textAlign =
+      useInternalStyle && textAlign === undefined
+        ? RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN
+        : textAlign;
+    this.verticalAlign =
+      useInternalStyle && verticalAlign === undefined
+        ? RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN
+        : verticalAlign;
+    this.minWidth =
+      useInternalStyle && minWidth === undefined
+        ? RTETableCellAnnotation.DEFAULT_CELL_MIN_WIDTH
+        : minWidth;
+    this.boxSizing =
+      useInternalStyle && boxSizing === undefined
+        ? RTETableCellAnnotation.DEFAULT_BOX_SIZING
+        : boxSizing;
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(cellAnnotation, useInternalStyle) {
+    return [
+      RTETableExtensionAnnotationTypeEnum.CELL,
+      new RTETableCellAnnotation(cellAnnotation, useInternalStyle),
+    ];
+  }
+  /**
+   * Generates the CSS border string from the border properties.
+   *
+   * @returns {Nullable<string>} The CSS border string.
+   */
+  get borderStr() {
+    if (!this.border)
+      return null;
+    return `${this.border.style || ''} ${this.border.width || ''} ${this.borderColorAnnotation.renderStyle().color}`.trim();
+  }
+  /**
+   * Sets the background color using a color key.
+   *
+   * @param {Nullable<string>} colorKey - The key representing the background color.
+   */
+  set backgroundColor(colorKey) {
+    this._backgroundColor = colorKey;
+    this.backgroundColorAnnotation = new RTETableColorAnnotation(colorKey);
+  }
+  /**
+   * Gets the background color value.
+   *
+   * @returns {Nullable<string>} The background color value.
+   */
+  get backgroundColor() {
+    return this._backgroundColor;
+  }
+  /**
+   * Sets the border properties and updates the border color annotation accordingly.
+   *
+   * @param {Nullable<VegaRTETableBorderType>} border - The border properties to set.
+   */
+  set border(border) {
+    this._border = border;
+    this.borderColorAnnotation = new RTETableColorAnnotation(border === null || border === void 0 ? void 0 : border.color);
+  }
+  /**
+   * Gets the border properties.
+   *
+   * @returns {Nullable<VegaRTETableBorderType>} The border properties.
+   */
+  get border() {
+    return this._border;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTETableCellAnnotation({
+      backgroundColor: this.backgroundColor,
+      padding: this.padding,
+      border: this.border,
+      width: this.width,
+      height: this.height,
+      textAlign: this.textAlign,
+      verticalAlign: this.verticalAlign,
+      minWidth: this.minWidth,
+      boxSizing: this.boxSizing,
+    }, this.useInternalStyle);
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return {
+      tableCell: cleanObject({
+        backgroundColor: this.backgroundColor,
+        padding: this.padding,
+        border: this.border,
+        width: this.width,
+        height: this.height,
+        textAlign: this.textAlign,
+        verticalAlign: this.verticalAlign,
+        minWidth: this.minWidth,
+        boxSizing: this.boxSizing,
+      }),
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    const backgroundColor = this.backgroundColorAnnotation.renderStyle().color;
+    const style = {
+      padding: this.padding,
+      border: this.borderStr,
+      width: this.width,
+      height: this.height,
+      textAlign: this.textAlign,
+      verticalAlign: this.verticalAlign,
+      minWidth: this.minWidth,
+      boxSizing: this.boxSizing,
+    };
+    if (backgroundColor) {
+      style.backgroundColor = backgroundColor;
+    }
+    if (!(options === null || options === void 0 ? void 0 : options.standalone)) {
+      return cleanObject(this.removeDefaultValues(style), { cleanEmptyString: true });
+    }
+    return cleanObject(style, { cleanEmptyString: true });
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass() {
+    return null;
+  }
+  /**
+   * Removes default values from the style object to avoid redundancy.
+   *
+   * @param {Record<string, Nullable<string>>} style - The style object to clean.
+   * @returns {Record<string, Nullable<string>>} The cleaned style object.
+   */
+  removeDefaultValues(style) {
+    const cleanedStyle = Object.assign({}, style);
+    if (cleanedStyle.padding === RTETableCellAnnotation.DEFAULT_PADDING) {
+      delete cleanedStyle.padding;
+    }
+    if (cleanedStyle.border ===
+      `${RTETableCellAnnotation.DEFAULT_BORDER.style} ${RTETableCellAnnotation.DEFAULT_BORDER.width} ${RTETableCellAnnotation.DEFAULT_BORDER.color}`) {
+      delete cleanedStyle.border;
+    }
+    if (cleanedStyle.textAlign === RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN) {
+      delete cleanedStyle.textAlign;
+    }
+    if (cleanedStyle.verticalAlign === RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN) {
+      delete cleanedStyle.verticalAlign;
+    }
+    if (cleanedStyle.minWidth === RTETableCellAnnotation.DEFAULT_CELL_MIN_WIDTH) {
+      delete cleanedStyle.minWidth;
+    }
+    if (cleanedStyle.boxSizing === RTETableCellAnnotation.DEFAULT_BOX_SIZING) {
+      delete cleanedStyle.boxSizing;
+    }
+    return cleanedStyle;
+  }
+}
+RTETableCellAnnotation.DEFAULT_PADDING = '12px';
+RTETableCellAnnotation.DEFAULT_BORDER = {
+  style: 'solid',
+  width: '1px',
+  color: '#ddd',
+};
+RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN = 'left';
+RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN = 'middle';
+RTETableCellAnnotation.DEFAULT_CELL_MIN_WIDTH = '55px';
+RTETableCellAnnotation.DEFAULT_BOX_SIZING = 'border-box';