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-primary" }, "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'))));
  }
}
