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

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/assets/align-bottom.js

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M24 512l464 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L24 464c-13.3 0-24 10.7-24 24s10.7 24 24 24zM64 336c0 26.5 21.5 48 48 48h64c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48H112C85.5 0 64 21.5 64 48l0 288zm224 0c0 26.5 21.5 48 48 48l64 0c26.5 0 48-21.5 48-48l0-160c0-26.5-21.5-48-48-48H336c-26.5 0-48 21.5-48 48l0 160z"/></svg>`,
+};

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/assets/align-middle.js

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M64 80c0-26.5 21.5-48 48-48h64c26.5 0 48 21.5 48 48V232h64V144c0-26.5 21.5-48 48-48h64c26.5 0 48 21.5 48 48v88h40c13.3 0 24 10.7 24 24s-10.7 24-24 24H448v88c0 26.5-21.5 48-48 48H336c-26.5 0-48-21.5-48-48V280H224V432c0 26.5-21.5 48-48 48H112c-26.5 0-48-21.5-48-48V280H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H64V80z"/></svg>`,
+};

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/assets/align-top.js

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M24 0H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 48 0 37.3 0 24S10.7 0 24 0zM64 176c0-26.5 21.5-48 48-48h64c26.5 0 48 21.5 48 48V464c0 26.5-21.5 48-48 48H112c-26.5 0-48-21.5-48-48V176zm224 0c0-26.5 21.5-48 48-48h64c26.5 0 48 21.5 48 48V336c0 26.5-21.5 48-48 48H336c-26.5 0-48-21.5-48-48V176z"/></svg>`,
+};

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/assets/objects-align-center-horizontal.js

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill='currentColor' d="M400 176L48 176l0-64 352 0 0 64zm48-64c0-26.5-21.5-48-48-48L248 64l0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L48 64C21.5 64 0 85.5 0 112l0 64c0 26.5 21.5 48 48 48l152 0 0 64-88 0c-26.5 0-48 21.5-48 48l0 64c0 26.5 21.5 48 48 48l88 0 0 40c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40 88 0c26.5 0 48-21.5 48-48l0-64c0-26.5-21.5-48-48-48l-88 0 0-64 152 0c26.5 0 48-21.5 48-48l0-64zM336 400l-224 0 0-64 224 0 0 64z"/></svg>`,
+};

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/assets/objects-align-left.js

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill='currentColor' d="M0 24C0 10.7 10.7 0 24 0S48 10.7 48 24l0 464c0 13.3-10.7 24-24 24s-24-10.7-24-24L0 24zM176 176l288 0 0-64-288 0 0 64zm-48-64c0-26.5 21.5-48 48-48l288 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-288 0c-26.5 0-48-21.5-48-48l0-64zm48 288l160 0 0-64-160 0 0 64zm-48-64c0-26.5 21.5-48 48-48l160 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-160 0c-26.5 0-48-21.5-48-48l0-64z"/></svg>`,
+};

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/assets/objects-align-right.js

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill='currentColor' d="M512 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 464c0 13.3 10.7 24 24 24s24-10.7 24-24l0-464zM336 176L48 176l0-64 288 0 0 64zm48-64c0-26.5-21.5-48-48-48L48 64C21.5 64 0 85.5 0 112l0 64c0 26.5 21.5 48 48 48l288 0c26.5 0 48-21.5 48-48l0-64zM336 400l-160 0 0-64 160 0 0 64zm48-64c0-26.5-21.5-48-48-48l-160 0c-26.5 0-48 21.5-48 48l0 64c0 26.5 21.5 48 48 48l160 0c26.5 0 48-21.5 48-48l0-64z"/></svg>`,
+};

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/slimmers/controllers/vega-rich-text-table-properties-color-controller.js

@@ -0,0 +1,27 @@
+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 { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+/**
+ * Handles the color related properties for the table properties component.`
+ */
+export class TableColorController extends VegaSlimmer {
+  /**
+   * Returns an array of light color values from the color schema.
+   *
+   * @returns {string[]} An array of light color strings.
+   */
+  getLightColors() {
+    let result = [];
+    if (this.colors) {
+      result = this.colors.map((colorSchema) => colorSchema.light);
+    }
+    return result;
+  }
+}
+__decorate([
+  MapToComponentField()
+], TableColorController.prototype, "colors", void 0);

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/slimmers/renderers/vega-rich-text-cell-properties-form-field-renderer.js

@@ -0,0 +1,106 @@
+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 { Fragment, h } from '@stencil/core';
+import { MapToComponentMethod } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaClick } from '../../../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaRichTextTablePropertiesBaseFormFieldRenderer } from './vega-rich-text-table-properties-basic-form-field-renderer.abstract';
+export class VegaRichTextCellPropertiesFormFieldRenderer extends VegaRichTextTablePropertiesBaseFormFieldRenderer {
+  constructor() {
+    super(...arguments);
+    this.changesNeedApply = {};
+    /**
+     * Emit a change event on each form field value change.
+     *
+     * @param {string} fieldName - The name of the changed field.
+     * @param {RTETablePropertiesType} formData - The current form data.
+     */
+    this.emitFormDataChange = (fieldName, formData) => {
+      this.vegaChange.emit(this.mergeFormDataWithStyleMap({
+        [fieldName]: formData[fieldName],
+      }));
+    };
+    /**
+     * Emit save event on save button click.
+     *
+     * @param {HTMLVegaButtonLinkElement} btn - The save button element.
+     */
+    this.handleSave = (btn) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(btn, VegaClick, () => {
+        this.vegaSave.emit();
+      });
+    };
+    /**
+     * Emit cancel event on cancel button click.
+     *
+     * @param {HTMLVegaButtonLinkElement} btn - The cancel button element.
+     */
+    this.handleCancel = (btn) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(btn, VegaClick, () => {
+        this.vegaCancel.emit(this.styleMap);
+      });
+    };
+  }
+  onDefaultValueChange() {
+    this.resetChangesNeedApply();
+  }
+  /**
+   * Render cell properties fields.
+   *
+   * @returns {HTMLElement} The cell properties fields element.
+   */
+  renderPropertiesFields() {
+    return (h(Fragment, null,
+      h("vega-font", { variant: "font-h6", color: "text-black" }, "Cell properties"),
+      h("vega-divider", { direction: "horizontal" }),
+      super.renderBorderFields(),
+      h("vega-divider", { direction: "horizontal" }),
+      super.renderBackgroundColorPicker(),
+      h("vega-divider", { direction: "horizontal" }),
+      this.renderDimensionFields(true),
+      h("vega-divider", { direction: "horizontal" }),
+      this.renderTextAlignmentField(),
+      h("vega-divider", { direction: "horizontal" }),
+      this.renderActionButtons()));
+  }
+  /**
+   * Render style text alignment field.
+   *
+   * @returns { HTMLElement } The text alignment field element.
+   */
+  renderTextAlignmentField() {
+    return (h("div", { class: "text-alignment-container" },
+      h("vega-font", { variant: "font-field-label", color: "text-primary" }, "Text Alignment"),
+      h("vega-flex", { direction: "row", gap: "size-16" },
+        this.renderAlignmentField(['left', 'center', 'right', 'justify'], 'align-', 'textAlign'),
+        this.renderAlignmentField(['top', 'middle', 'bottom'], 'align-', 'verticalAlign'))));
+  }
+  /**
+   * Merge form data with style map for all selected cell blocks.
+   *
+   * @param {RTETablePropertiesType} formData - The form data.
+   * @returns {Record<string, RTETablePropertiesType>} The merged data.
+   */
+  mergeFormDataWithStyleMap(formData) {
+    this.changesNeedApply = Object.assign(Object.assign({}, this.changesNeedApply), formData);
+    const mergedData = {};
+    for (const id in this.styleMap) {
+      mergedData[id] = Object.assign(Object.assign({}, this.styleMap[id]), this.changesNeedApply);
+    }
+    return mergedData;
+  }
+  /**
+   * Reset the changesNeedApply object.
+   *
+   */
+  resetChangesNeedApply() {
+    this.changesNeedApply = {};
+  }
+}
+__decorate([
+  MapToComponentMethod('watchDefaultValueChange')
+], VegaRichTextCellPropertiesFormFieldRenderer.prototype, "onDefaultValueChange", null);

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/slimmers/renderers/vega-rich-text-table-properties-basic-form-field-renderer.abstract.js

@@ -0,0 +1,259 @@
+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, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaChange, VegaClick, VegaFocus, VegaPopoverShow, } from '../../../../../../../helpers/event-manager/event-id/vega-event-id';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../../../../utils/accessibility';
+import { RTE_TABLE_BORDER_STYLES } from '../../../constants/styles.constants';
+import { VegaInternalIconManager } from '../../../../../../../helpers/icon/internal-icon-manager';
+export class VegaRichTextTablePropertiesBaseFormFieldRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.dimensionFieldValidationRule = [
+      {
+        canEvaluate: (input) => {
+          return !!input;
+        },
+        shouldShowError: () => {
+          return true;
+        },
+        evaluate: (input) => {
+          const dimensionRegex = /^[0-9]*\.?[0-9]+(px|em|rem|%)?$/;
+          return {
+            isValid: dimensionRegex.test(input),
+            message: '',
+          };
+        },
+      },
+    ];
+    /**
+     * Emit a change event on each form field value change.
+     *
+     * @param {HTMLElement} el - The form field element.
+     */
+    this.handleFormChange = (el) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaChange, async (input) => {
+        if (this.formRef) {
+          const validateResult = await this.formRef.valid();
+          if (validateResult.isValid) {
+            if (this.renderer.isFormTouched()) {
+              const formData = (await this.formRef.getValue());
+              const fieldName = el.dataset.vegaForm;
+              this.emitFormDataChange(fieldName, formData);
+            }
+          }
+          this.updateBorderDisplayColor(input.host);
+        }
+      });
+      if (el && el.tagName === 'VEGA-INPUT') {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaFocus, this.markFormTouched);
+      }
+    };
+    /**
+     * Emit a change event on each form field value change.
+     *
+     * @param {string} fieldName - The name of the changed field.
+     * @param {RTETablePropertiesType} formData - The current form data.
+     */
+    this.emitFormDataChange = (_fieldName, formData) => {
+      this.vegaChange.emit(formData);
+    };
+    /**
+     * Handle text alignment button click event.
+     *
+     * @param {MouseEvent} e - The click event.
+     */
+    this.handleAlignmentButtonClick = async (e) => {
+      const button = e.currentTarget;
+      const formFieldName = button.dataset.formFieldName;
+      if (this.formRef) {
+        await this.formRef.setValue({ [formFieldName]: button.dataset.id }, { skipInvisible: false });
+      }
+    };
+    /**
+     * Clear border color value and hide the color picker popover.
+     *
+     * @param {HTMLElement} btn - The clear button element.
+     */
+    this.clearBorderColor = (btn) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(btn, VegaClick, () => {
+        if (this.borderColorPickerRef) {
+          this.borderColorPickerRef.value = '';
+          if (this.formRef) {
+            void this.formRef.setValue({ borderColor: '' });
+          }
+        }
+        if (this.colorPickerPopoverRef) {
+          void this.colorPickerPopoverRef.hide();
+        }
+      });
+    };
+    /**
+     * Apply border color value and hide the color picker popover.
+     *
+     * @param {HTMLElement} btn - The apply button element.
+     */
+    this.applyBorderColor = (btn) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(btn, VegaClick, () => {
+        if (this.borderColorPickerRef && this.formRef) {
+          void this.formRef.setValue({ borderColor: this.borderColorPickerRef.value });
+        }
+        if (this.colorPickerPopoverRef) {
+          void this.colorPickerPopoverRef.hide();
+        }
+      });
+    };
+    /**
+     * Clear background color value.
+     *
+     * @param {MouseEvent} event - The mouse event.
+     */
+    this.clearBackgroundColor = (event) => {
+      event.stopPropagation();
+      if (this.formRef) {
+        void this.formRef.setValue({ backgroundColor: '' });
+      }
+    };
+    /**
+     * Mark the form as touched.
+     */
+    this.markFormTouched = () => {
+      this.renderer.markFormTouched();
+    };
+  }
+  get formRef() {
+    return this.renderer.getFormRef();
+  }
+  /**
+   * Render style border fields.
+   *
+   * @returns { HTMLElement } The border fields element.
+   */
+  renderBorderFields() {
+    return (h("vega-flex", { gap: "size-16", direction: "row", alignItems: "center" },
+      h("vega-input-select", { "data-vega-form": "borderStyle", label: "Border Style", placeholder: "Select style", vegaDropdownProps: { searchable: false, matchTargetWidth: false }, source: VegaRichTextTablePropertiesBaseFormFieldRenderer.TABLE_BORDER_STYLES, ref: this.handleFormChange }),
+      h("vega-input", { ref: this.handleFormChange, "data-vega-form": "borderWidth", label: "Width", validationRules: this.dimensionFieldValidationRule }),
+      this.renderBorderColorPicker()));
+  }
+  /**
+   * Render background color picker.
+   *
+   * @returns {HTMLElement} The background color picker element.
+   */
+  renderBackgroundColorPicker() {
+    return (h("div", { class: "background-color-group" },
+      h("vega-font", { class: "field-label", variant: "font-field-label", color: "text-primary" }, "Background Color"),
+      h("div", { class: "color-picker-container" },
+        h("span", { role: "button", tabIndex: 0, "aria-label": "Clear background color", onClick: this.clearBackgroundColor, onKeyDown: createEnterKeyHandlerToTriggerClick(), class: "color-none" }),
+        h("vega-divider", { direction: "vertical" }),
+        h("vega-color-picker", { isInline: true, ref: this.handleFormChange, "data-vega-form": "backgroundColor", colors: this.controller.getLightColors() }))));
+  }
+  /**
+   * Render style dimension fields.
+   *
+   * @returns { HTMLElement } The dimension fields element.
+   */
+  renderDimensionFields(withPadding = false) {
+    return (h("vega-flex", { gap: "size-16", direction: "row", alignItems: "end" },
+      h("vega-input", { ref: this.handleFormChange, "data-vega-form": "width", label: "Width", validationRules: this.dimensionFieldValidationRule }),
+      h("vega-input", { ref: this.handleFormChange, "data-vega-form": "height", label: "Height", validationRules: this.dimensionFieldValidationRule }),
+      withPadding && (h("vega-input", { ref: this.handleFormChange, "data-vega-form": "padding", label: "Padding", validationRules: this.dimensionFieldValidationRule }))));
+  }
+  renderAlignmentField(alignmentList, iconPrefix, formFieldName) {
+    return (h("vega-flex", { direction: "row", gap: "0", class: "text-alignment-button-group" },
+      h("vega-input", { ref: this.handleFormChange, "data-vega-form": formFieldName, type: "hidden" }),
+      alignmentList.map((key) => {
+        return (h("button", { "data-id": key, "data-form-field-name": formFieldName, class: `text-alignment-${key}`, onClick: this.handleAlignmentButtonClick },
+          h("vega-icon", { icon: VegaInternalIconManager.getIconKey(`${iconPrefix}${key}`) })));
+      })));
+  }
+  /**
+   * Render save and cancel action buttons.
+   *
+   * @returns {HTMLElement} The action buttons element.
+   */
+  renderActionButtons() {
+    return (h("div", { class: "action-buttons" },
+      h("vega-button-link", { ref: this.handleSave }, "Save"),
+      h("vega-button-link", { ref: this.handleCancel }, "Cancel")));
+  }
+  /**
+   * Render border color field color picker.
+   *
+   * @returns {HTMLElement} The border color picker element.
+   */
+  renderBorderColorPicker() {
+    return (h("div", { class: "color-picker-group" },
+      h("vega-font", { class: "field-label", variant: "font-field-label", color: "text-primary" }, "Color"),
+      h("vega-popover", { ref: (el) => {
+          this.colorPickerPopoverRef = el;
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaPopoverShow, async () => {
+            if (this.formRef && this.borderColorPickerRef) {
+              const formValue = await this.formRef.getValue();
+              this.borderColorPickerRef.value = formValue['borderColor'];
+            }
+          });
+        }, trigger: "click" },
+        h("div", { slot: "popover-content", class: "color-picker-container" },
+          h("vega-input", { ref: this.handleFormChange, "data-vega-form": "borderColor", type: "hidden" }),
+          h("span", { role: "button", tabIndex: 0, "aria-label": "Clear border color", onKeyDown: createEnterKeyHandlerToTriggerClick(), class: "display-color-placeholder color-none" })),
+        h("vega-box", { slot: "popover" },
+          h("vega-color-picker", { ref: (el) => {
+              this.borderColorPickerRef = el;
+            }, isInline: true, colors: this.controller.getLightColors() }),
+          h("vega-flex", { margin: { top: 'size-16' }, justifyContent: "end", gap: "size-16" },
+            h("vega-button-link", { ref: this.clearBorderColor }, "Clear"),
+            h("vega-button-link", { ref: this.applyBorderColor }, "Apply"))))));
+  }
+  /**
+   * Update the color display span background color when border color changes.
+   *
+   * @param {HTMLElement} colorPickerRef - The border color field element.
+   */
+  updateBorderDisplayColor(colorPickerRef) {
+    if (colorPickerRef && colorPickerRef.dataset.vegaForm === 'borderColor') {
+      const selectedColor = colorPickerRef.value;
+      const displayColorDiv = colorPickerRef.nextElementSibling;
+      displayColorDiv.style.backgroundColor = selectedColor;
+      if (selectedColor) {
+        displayColorDiv.classList.remove('color-none');
+      }
+      else {
+        displayColorDiv.classList.add('color-none');
+      }
+      if (this.borderColorPickerRef && selectedColor !== this.borderColorPickerRef.value) {
+        this.borderColorPickerRef.value = selectedColor;
+      }
+    }
+  }
+}
+VegaRichTextTablePropertiesBaseFormFieldRenderer.TABLE_BORDER_STYLES = RTE_TABLE_BORDER_STYLES.map((style) => ({
+  id: style,
+  displayName: style.charAt(0).toUpperCase() + style.slice(1),
+}));
+__decorate([
+  MapToComponentField()
+], VegaRichTextTablePropertiesBaseFormFieldRenderer.prototype, "controller", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextTablePropertiesBaseFormFieldRenderer.prototype, "defaultValue", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextTablePropertiesBaseFormFieldRenderer.prototype, "renderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextTablePropertiesBaseFormFieldRenderer.prototype, "styleMap", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextTablePropertiesBaseFormFieldRenderer.prototype, "vegaChange", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextTablePropertiesBaseFormFieldRenderer.prototype, "vegaCancel", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextTablePropertiesBaseFormFieldRenderer.prototype, "vegaSave", void 0);

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/slimmers/renderers/vega-rich-text-table-properties-form-field-renderer.js

@@ -0,0 +1,58 @@
+import { Fragment, h } from '@stencil/core';
+import { DomNodeSubjectObserverFactory } from '../../../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaClick } from '../../../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaRichTextTablePropertiesBaseFormFieldRenderer } from './vega-rich-text-table-properties-basic-form-field-renderer.abstract';
+export class VegaRichTextTablePropertiesFormFieldRenderer extends VegaRichTextTablePropertiesBaseFormFieldRenderer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Emit save event on save button click.
+     *
+     * @param {HTMLVegaButtonLinkElement} btn - The save button element.
+     */
+    this.handleSave = (btn) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(btn, VegaClick, () => {
+        this.vegaSave.emit();
+      });
+    };
+    /**
+     * Emit cancel event on cancel button click.
+     *
+     * @param {HTMLVegaButtonLinkElement} btn - The cancel button element.
+     */
+    this.handleCancel = (btn) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(btn, VegaClick, () => {
+        this.vegaCancel.emit(this.defaultValue);
+      });
+    };
+  }
+  /**
+   * Render table properties fields.
+   *
+   * @returns {HTMLElement} The table properties fields element.
+   */
+  renderPropertiesFields() {
+    return (h(Fragment, null,
+      h("vega-font", { variant: "font-h6", color: "text-black" }, "Table properties"),
+      h("vega-divider", { direction: "horizontal" }),
+      this.renderBorderFields(),
+      h("vega-divider", { direction: "horizontal" }),
+      this.renderBackgroundColorPicker(),
+      h("vega-divider", { direction: "horizontal" }),
+      this.renderDimensionFields(),
+      h("vega-divider", { direction: "horizontal" }),
+      this.renderTextAlignmentField(),
+      h("vega-divider", { direction: "horizontal" }),
+      this.renderActionButtons()));
+  }
+  /**
+   * Render style text alignment field.
+   *
+   * @returns { HTMLElement } The text alignment field element.
+   */
+  renderTextAlignmentField() {
+    return (h("div", { class: "text-alignment-container" },
+      h("vega-font", { variant: "font-field-label", color: "text-primary" }, "Alignment"),
+      h("vega-flex", { direction: "row", gap: "size-16" }, this.renderAlignmentField(['left', 'center', 'right'], 'objects-align-', 'textAlign'))));
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/slimmers/renderers/vega-rich-text-table-properties-form-renderer.js

@@ -0,0 +1,93 @@
+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 AlignRight from '../../../../../assets/align-right';
+import AlignCenter from '../../../../../assets/align-center';
+import AlignJustify from '../../../../../assets/align-justify';
+import AlignLeft from '../../../../../assets/align-left';
+import AlignTop from '../../assets/align-top';
+import AlignBottom from '../../assets/align-bottom';
+import AlignMiddle from '../../assets/align-middle';
+import ObjectsAlignCenterHorizontal from '../../assets/objects-align-center-horizontal';
+import ObjectsAlignLeft from '../../assets/objects-align-left';
+import ObjectsAlignRight from '../../assets/objects-align-right';
+export class VegaRichTextTablePropertiesRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.formTouched = false;
+    /**
+     * Mark the form as touched.
+     */
+    this.markFormTouched = () => {
+      this.formTouched = true;
+    };
+    /**
+     * Reset the touch state.
+     */
+    this.resetTouchedState = () => {
+      this.formTouched = false;
+    };
+  }
+  watchDefaultValueChange(newValue) {
+    this.resetTouchedState();
+    this.setFormFieldValues(newValue);
+  }
+  getFormRef() {
+    return this.formRef;
+  }
+  /**
+   * Indicates whether the form has been interacted with.
+   *
+   * @returns {boolean} True if the form has been touched; otherwise, false.
+   */
+  isFormTouched() {
+    return this.formTouched;
+  }
+  render() {
+    return (h("vega-form", { class: "table-properties-form", ref: (el) => (this.formRef = el), onMouseDown: this.markFormTouched }, this.type === 'TABLE'
+      ? this.tableFormRenderer.renderPropertiesFields()
+      : this.cellFormRenderer.renderPropertiesFields()));
+  }
+  /**
+   * Set form field values if the form is not touched.
+   *
+   * @param formValues
+   */
+  setFormFieldValues(formValues) {
+    if (this.formRef) {
+      void this.formRef.reset(formValues);
+    }
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'align-center': AlignCenter,
+    'align-justify': AlignJustify,
+    'align-left': AlignLeft,
+    'align-right': AlignRight,
+    'align-top': AlignTop,
+    'align-bottom': AlignBottom,
+    'align-middle': AlignMiddle,
+    'objects-align-left': ObjectsAlignLeft,
+    'objects-align-center': ObjectsAlignCenterHorizontal,
+    'objects-align-right': ObjectsAlignRight,
+  });
+})();
+__decorate([
+  MapToComponentField()
+], VegaRichTextTablePropertiesRenderer.prototype, "type", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextTablePropertiesRenderer.prototype, "tableFormRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextTablePropertiesRenderer.prototype, "cellFormRenderer", void 0);
+__decorate([
+  MapToComponentMethod('watchDefaultValueChange')
+], VegaRichTextTablePropertiesRenderer.prototype, "watchDefaultValueChange", null);