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

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

@@ -0,0 +1,13 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const DELETE_TABLE_COLUMN = 'DELETE_TABLE_COLUMN';
+/**
+ * Action to delete a table column
+ */
+export class DeleteTableColumnAction extends ModifyContentAction {
+  constructor(target) {
+    super();
+    this.isFlushable = true;
+    this.type = DELETE_TABLE_COLUMN;
+    this.tableCellDeleteRange = target;
+  }
+}

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

@@ -0,0 +1,18 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const DELETE_TABLE_ROW = 'DELETE_TABLE_ROW';
+/**
+ * Action class for deleting a specific table row.
+ */
+export class DeleteTableRowAction extends ModifyContentAction {
+  /**
+   * Constructs an InsertTableRowAction.
+   *
+   * @param {RTETableRowBlock[]} rowsToBeRemoved - The rows to be removed from the table.
+   */
+  constructor(rowsToBeRemoved) {
+    super();
+    this.isFlushable = true;
+    this.type = DELETE_TABLE_ROW;
+    this.rowsToBeRemoved = rowsToBeRemoved;
+  }
+}

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

@@ -0,0 +1,13 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const INSERT_TABLE_BLOCK = 'INSERT_TABLE_BLOCK';
+/**
+ * Action to insert a table block into the rich text editor.
+ */
+export class InsertTableBlockAction extends ModifyContentAction {
+  constructor(rowCount, columnCount) {
+    super();
+    this.type = INSERT_TABLE_BLOCK;
+    this.rowCount = rowCount;
+    this.columnCount = columnCount;
+  }
+}

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

@@ -0,0 +1,19 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const INSERT_TABLE_COLUMN = 'INSERT_TABLE_COLUMN';
+export var InsertTableColumnDirection;
+(function (InsertTableColumnDirection) {
+  InsertTableColumnDirection["LEFT"] = "LEFT";
+  InsertTableColumnDirection["RIGHT"] = "RIGHT";
+})(InsertTableColumnDirection || (InsertTableColumnDirection = {}));
+/**
+ * Action to insert a table column into the RTETable.
+ */
+export class InsertTableColumnAction extends ModifyContentAction {
+  constructor(insertDirection, tableCellInsertRange) {
+    super();
+    this.isFlushable = true;
+    this.type = INSERT_TABLE_COLUMN;
+    this.tableCellInsertRange = tableCellInsertRange;
+    this.insertDirection = insertDirection;
+  }
+}

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

@@ -0,0 +1,26 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const INSERT_TABLE_ROW = 'INSERT_TABLE_ROW';
+export var InsertTableRowDirection;
+(function (InsertTableRowDirection) {
+  InsertTableRowDirection["ABOVE"] = "ABOVE";
+  InsertTableRowDirection["BELOW"] = "BELOW";
+})(InsertTableRowDirection || (InsertTableRowDirection = {}));
+/**
+ * Action class for inserting a new row into a table within the rich text editor.
+ */
+export class InsertTableRowAction extends ModifyContentAction {
+  /**
+   * Constructs an InsertTableRowAction.
+   *
+   * @param {InsertTableRowDirection} insertDirection - The direction to insert the new row (above or below the current row).
+   * @param {RTETableRowBlock[]} selectedRows - The currently selected rows in the table.
+   */
+  constructor(insertDirection, selectedRows = []) {
+    super();
+    this.isFlushable = true;
+    this.type = INSERT_TABLE_ROW;
+    this.selectedRows = [];
+    this.insertDirection = insertDirection;
+    this.selectedRows = selectedRows;
+  }
+}

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

@@ -0,0 +1,13 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const SELECT_TABLE_COLUMN = 'SELECT_TABLE_COLUMN';
+/**
+ * Action to select a table column into the RTETable.
+ */
+export class SelectTableColumnAction extends ModifyContentAction {
+  constructor(tableCellSelectRange, selectCellCallback) {
+    super();
+    this.type = SELECT_TABLE_COLUMN;
+    this.tableCellSelectRange = tableCellSelectRange;
+    this.selectCellCallback = selectCellCallback;
+  }
+}

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

@@ -0,0 +1,18 @@
+import { AnnotationAction } from '../../../dto/actions/annotation-action.abstract';
+import { RTETableAnnotation } from '../annotations/table-annotation';
+/**
+ * Action to apply annotations to a table.
+ */
+export class RTETableAnnotationsAction extends AnnotationAction {
+  constructor(table) {
+    super();
+    this.isFlushable = true;
+    this.table = table;
+  }
+  /**
+   * @inheritDoc
+   */
+  toAnnotation() {
+    return new RTETableAnnotation(this.table);
+  }
+}

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

@@ -0,0 +1,13 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const TOGGLE_TABLE_CAPTION = 'TOGGLE_TABLE_CAPTION';
+/**
+ * Action payload for toggling the optional table caption block.
+ */
+export class TableCaptionAction extends ModifyContentAction {
+  constructor(shouldEnable) {
+    super();
+    this.type = TOGGLE_TABLE_CAPTION;
+    this.isFlushable = true;
+    this.shouldEnable = shouldEnable;
+  }
+}

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

@@ -0,0 +1,18 @@
+import { AnnotationAction } from '../../../dto/actions/annotation-action.abstract';
+import { RTETableCellAnnotation } from '../annotations/table-cell-annotation';
+/**
+ * Action to apply annotations to a table cell.
+ */
+export class RTETableCellAnnotationsAction extends AnnotationAction {
+  constructor(cellAnnotation) {
+    super();
+    this.isFlushable = true;
+    this.cellAnnotation = cellAnnotation;
+  }
+  /**
+   * @inheritDoc
+   */
+  toAnnotation() {
+    return new RTETableCellAnnotation(this.cellAnnotation);
+  }
+}

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

@@ -0,0 +1,18 @@
+import { AnnotationAction } from '../../../dto/actions/annotation-action.abstract';
+import { RTETableHeadCellAnnotation } from '../annotations/table-head-cell-annotation';
+/**
+ * Action to apply annotations to a table head cell.
+ */
+export class RTETableHeadCellAnnotationsAction extends AnnotationAction {
+  constructor(tableCell) {
+    super();
+    this.isFlushable = true;
+    this.tableCell = tableCell;
+  }
+  /**
+   * @inheritDoc
+   */
+  toAnnotation() {
+    return new RTETableHeadCellAnnotation(this.tableCell);
+  }
+}

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

@@ -0,0 +1,13 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const TOGGLE_HEADER_ROW = 'TOGGLE_HEADER_ROW';
+/**
+ * Action to convert selected rows to header rows or revert them back to normal rows.
+ */
+export class ToggleHeaderRowAction extends ModifyContentAction {
+  constructor(selectedRows) {
+    super();
+    this.isFlushable = true;
+    this.type = TOGGLE_HEADER_ROW;
+    this.selectedRows = selectedRows;
+  }
+}

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',
+      },
+    };
+  }
+}