@heartlandone/vega 2.73.0 → 2.74.0-RTE-table-preview

package/dist/collection/components/vega-rich-text-editor/extensions/table/actions/toggle-header-table-column-action.js

@@ -0,0 +1,15 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const TOGGLE_HEADER_TABLE_COLUMN = 'TOGGLE_HEADER_TABLE_COLUMN';
+/**
+ * Action to toggle header state of a table column in the RTETable.
+ */
+export class ToggleHeaderTableColumnAction extends ModifyContentAction {
+  constructor(tableCellHeaderRange, headerOn) {
+    super();
+    this.isFlushable = true;
+    this.type = TOGGLE_HEADER_TABLE_COLUMN;
+    this.headerOn = false;
+    this.tableCellHeaderRange = tableCellHeaderRange;
+    this.headerOn = headerOn;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/actions/update-table-properties-action.js

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import { parseToPixelString } from '../../../../../utils/pixel';
+import { AnnotationAction } from '../../../dto/actions/annotation-action.abstract';
+import { RTETableAnnotation } from '../annotations/table-annotation';
+export const UPDATE_TABLE_PROPERTIES = 'UPDATE_TABLE_PROPERTIES';
+/**
+ * Action to update table properties
+ */
+export class UpdateTablePropertiesAction extends AnnotationAction {
+  constructor(tableProperties) {
+    super();
+    this.isFlushable = true;
+    const { textAlign, width, borderWidth, borderColor, borderStyle, height } = tableProperties, restStyles = __rest(tableProperties, ["textAlign", "width", "borderWidth", "borderColor", "borderStyle", "height"]);
+    this.tableProperties = Object.assign(Object.assign({}, restStyles), { alignment: textAlign, border: {
+        style: borderStyle,
+        color: borderColor,
+        width: borderWidth ? parseToPixelString(borderWidth) : '',
+      }, width: width ? parseToPixelString(width) : '', height: height ? parseToPixelString(height) : '' });
+  }
+  /**
+   * Generate annotation from action data
+   *
+   * @returns {RTETableAnnotation} The generated annotation
+   */
+  toAnnotation() {
+    return new RTETableAnnotation(this.tableProperties);
+  }
+}

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

@@ -0,0 +1,97 @@
+import { AnnotationGeneratorStrategyAbstract } from '../../../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/annotation-generator-strategy.abstract';
+/**
+ * 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 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 if border is defined
+    if (style.border) {
+      return this.parseBorderString(style.border);
+    }
+    // Check individual border properties
+    const borderStyle = style.borderStyle || style.borderTopStyle;
+    const borderWidth = style.borderWidth || style.borderTopWidth;
+    const borderColor = style.borderColor || style.borderTopColor;
+    if (borderStyle && borderWidth && borderColor) {
+      return {
+        style: borderStyle,
+        width: borderWidth,
+        color: borderColor,
+      };
+    }
+    return null;
+  }
+  /**
+   * Parse border string into structured border type.
+   *
+   * @param {string} borderStr - Border CSS string.
+   * @returns {Nullable<VegaRTETableBorderType>} Parsed border properties.
+   */
+  parseBorderString(borderStr) {
+    // Expected format: "style width color" (e.g., "solid 1px #ddd")
+    const parts = borderStr.trim().split(/\s+/);
+    if (parts.length >= 3) {
+      return {
+        style: parts[0],
+        width: parts[1],
+        color: parts.slice(2).join(' '), // Handle colors with spaces like "rgb(0, 0, 0)"
+      };
+    }
+    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,82 @@
+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),
+    });
+    return Object.keys(cellAnnotation).length > 0
+      ? { tableCell: cellAnnotation }
+      : {};
+  }
+  /**
+   * 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,91 @@
+import { cleanObject } from '../../../../../utils/object';
+import { BlockAnnotation } from '../../../dto/annotations/block-annotation.abstract';
+export var RTETableExtensionAnnotationTypeEnum;
+(function (RTETableExtensionAnnotationTypeEnum) {
+  RTETableExtensionAnnotationTypeEnum["TABLE"] = "EXTENSION_TABLE";
+  RTETableExtensionAnnotationTypeEnum["CELL"] = "EXTENSION_TABLE_CELL";
+  RTETableExtensionAnnotationTypeEnum["CAPTION"] = "EXTENSION_TABLE_CAPTION";
+})(RTETableExtensionAnnotationTypeEnum || (RTETableExtensionAnnotationTypeEnum = {}));
+/**
+ * Class representing a table annotation in the rich text editor.
+ */
+export class RTETableAnnotation extends BlockAnnotation {
+  constructor({ backgroundColor, border, width, height, alignment = 'center', } = {}) {
+    super();
+    this.type = RTETableExtensionAnnotationTypeEnum.TABLE;
+    this.backgroundColor = backgroundColor;
+    this.border = border;
+    this.width = width;
+    this.height = height;
+    this.alignment = alignment;
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(value) {
+    return [RTETableExtensionAnnotationTypeEnum.TABLE, new RTETableAnnotation(value)];
+  }
+  /**
+   * 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.border.color}`.trim();
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTETableAnnotation({
+      backgroundColor: this.backgroundColor,
+      border: this.border,
+      width: this.width,
+      height: this.height,
+      alignment: this.alignment,
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return {
+      table: cleanObject({
+        backgroundColor: this.backgroundColor,
+        border: this.border,
+        width: this.width,
+        height: this.height,
+        alignment: this.alignment,
+      }),
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle() {
+    const defaultStyles = {
+      borderCollapse: 'collapse',
+    };
+    const tableStyles = Object.assign({ backgroundColor: this.backgroundColor, border: this.borderStr, width: this.width, height: this.height }, this.renderAlignmentStyle());
+    return cleanObject(Object.assign(Object.assign({}, defaultStyles), tableStyles));
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass() {
+    return 'v-rte--extension-table';
+  }
+  /**
+   * Generates the alignment styles for the table.
+   *
+   * @returns {Record<string, string>} The alignment styles.
+   */
+  renderAlignmentStyle() {
+    return {
+      margin: this.alignment === 'center' ? '0 auto' : this.alignment === 'left' ? '0' : '0 0 0 auto',
+    };
+  }
+}

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

@@ -0,0 +1,57 @@
+import { BlockAnnotation } from '../../../dto/annotations/block-annotation.abstract';
+import { RTETableExtensionAnnotationTypeEnum } from './table-annotation';
+/**
+ * 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: '#f7f7f7',
+      position: 'relative',
+      textAlign: 'center',
+      minHeight: '22px',
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return {
+      caption: {
+        padding: '8px 12px',
+        border: '1px solid #ddd',
+        borderBottom: 'none',
+        backgroundColor: '#f7f7f7',
+        position: 'relative',
+        textAlign: 'center',
+        minHeight: '22px',
+      },
+    };
+  }
+}

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

@@ -0,0 +1,121 @@
+import { cleanObject } from '../../../../../utils/object';
+import { RTETableExtensionAnnotationTypeEnum } from './table-annotation';
+import { BlockAnnotation } from '../../../dto/annotations/block-annotation.abstract';
+/**
+ * Class representing a table cell annotation in the rich text editor.
+ */
+export class RTETableCellAnnotation extends BlockAnnotation {
+  constructor({ backgroundColor, padding = RTETableCellAnnotation.DEFAULT_PADDING, border = RTETableCellAnnotation.DEFAULT_BORDER, width, height, textAlign = RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN, verticalAlign = RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN, } = {}) {
+    super();
+    this.type = RTETableExtensionAnnotationTypeEnum.CELL;
+    this.backgroundColor = backgroundColor;
+    this.padding = padding;
+    this.border = border;
+    this.width = width;
+    this.height = height;
+    this.textAlign = textAlign;
+    this.verticalAlign = verticalAlign;
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(cellAnnotation) {
+    return [RTETableExtensionAnnotationTypeEnum.CELL, new RTETableCellAnnotation(cellAnnotation)];
+  }
+  /**
+   * 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.border.color}`;
+  }
+  /**
+   * @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,
+    });
+  }
+  /**
+   * @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,
+      }),
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    const style = {
+      backgroundColor: this.backgroundColor,
+      padding: this.padding,
+      border: this.borderStr,
+      width: this.width,
+      height: this.height,
+      textAlign: this.textAlign,
+      verticalAlign: this.verticalAlign,
+    };
+    if (!(options === null || options === void 0 ? void 0 : options.standalone)) {
+      return cleanObject(this.removeDefaultValues(style));
+    }
+    return cleanObject(Object.assign(Object.assign({}, style), { minWidth: RTETableCellAnnotation.DEFAULT_CELL_MIN_WIDTH }));
+  }
+  /**
+   * @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;
+    }
+    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 = '30px';

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

@@ -0,0 +1,40 @@
+import { cleanObject } from '../../../../../utils/object';
+import { RTETableExtensionAnnotationTypeEnum } from './table-annotation';
+import { RTETableCellAnnotation } from './table-cell-annotation';
+/**
+ * Class representing a table head cell annotation in the rich text editor.
+ */
+export class RTETableHeadCellAnnotation extends RTETableCellAnnotation {
+  constructor(annotation = {}) {
+    super(annotation);
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(cellAnnotation) {
+    return [RTETableExtensionAnnotationTypeEnum.CELL, new RTETableHeadCellAnnotation(cellAnnotation)];
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTETableHeadCellAnnotation({
+      backgroundColor: this.backgroundColor,
+      padding: this.padding,
+      border: this.border,
+      width: this.width,
+      height: this.height,
+      textAlign: this.textAlign,
+      verticalAlign: this.verticalAlign,
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    var _a;
+    const styles = super.renderStyle(options);
+    return cleanObject(Object.assign(Object.assign({}, styles), { backgroundColor: (_a = this.backgroundColor) !== null && _a !== void 0 ? _a : RTETableHeadCellAnnotation.DEFAULT_BACKGROUND_COLOR }));
+  }
+}
+RTETableHeadCellAnnotation.DEFAULT_BACKGROUND_COLOR = '#f2f2f2';

package/dist/collection/components/vega-rich-text-editor/extensions/table/constants/styles.constants.js

@@ -0,0 +1,21 @@
+export const RTE_TABLE_BORDER_STYLES = [
+  'none',
+  'solid',
+  'dashed',
+  'dotted',
+  'double',
+  'groove',
+  'ridge',
+  'inset',
+  'outset',
+];
+export const RTE_TABLE_DEFAULT_COLORS = [
+  { dark: '#04041C', light: '#FCFCFC' },
+  { dark: '#AA091C', light: '#FF4C61' },
+  { dark: '#974502', light: '#FDAB68' },
+  { dark: '#735C00', light: '#FFDC4C' },
+  { dark: '#2E6D18', light: '#7BDA58' },
+  { dark: '#287171', light: '#7BD1D1' },
+  { dark: '#595959', light: '#999999' },
+  { dark: '#FCFCFC', light: '#04041C' },
+];