@heartlandone/vega 2.84.0 → 2.86.0

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/vega-date-picker-calendar.js

@@ -51,6 +51,13 @@ export class VegaDatePickerCalendar {
      * @vegaVersion 2.72.0
      */
     this.size = 'regular';
+    /**
+     * Specifies whether to allow the calendar picker to fill the width and height of its parent container.
+     *    As default, the calendar picker has a max width and height limit based on the size and mode variant.
+     *
+     * @vegaVersion 2.86.0
+     */
+    this.fillContainer = false;
     /**
      * Specifies the selection mode of the date picker calendar.
      *
@@ -81,6 +88,7 @@ export class VegaDatePickerCalendar {
     this.clearButton = false;
     /**
      * Specifies the calendar is static height.
+     *    It means the height of calendar will not change according to the number of weeks in the month.
      *
      * @vegaVersion 2.72.0
      */
@@ -170,6 +178,7 @@ export class VegaDatePickerCalendar {
     return sanitizeVegaComponent(h(Host, { class: {
         [this.size]: true,
         [this.mode]: true,
+        'fill-container': this.fillContainer,
         'mobile': this.isMobileDevice,
         'dual-months': this.isDualMonths,
       } }, this.renderer.render()), this.host);
@@ -209,6 +218,27 @@ export class VegaDatePickerCalendar {
       "reflect": false,
       "defaultValue": "'regular'"
     },
+    "fillContainer": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.86.0"
+          }],
+        "text": "Specifies whether to allow the calendar picker to fill the width and height of its parent container.\n   As default, the calendar picker has a max width and height limit based on the size and mode variant."
+      },
+      "attribute": "fill-container",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "mode": {
       "type": "string",
       "mutable": false,
@@ -362,7 +392,7 @@ export class VegaDatePickerCalendar {
             "name": "vegaVersion",
             "text": "2.72.0"
           }],
-        "text": "Specifies the calendar is static height."
+        "text": "Specifies the calendar is static height.\n   It means the height of calendar will not change according to the number of weeks in the month."
       },
       "attribute": "static-height",
       "reflect": false,

package/dist/collection/components/vega-input-phone-number/vega-input-phone-number.js

@@ -13,6 +13,7 @@ import { PhoneNumberInputRenderer } from './slimmers/renderers/phone-number-inpu
 import { getCountryCallingCode } from '../../polyfill/libphonenumber';
 import { VegaInputPhoneNumberValueController } from './slimmers/controllers/vega-input-phone-number-value-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { ValidPhoneNumberRule } from '../../helpers/validator/rules/valid-phone-number-rule';
 import { CountrySelectController } from './slimmers/controllers/country-select-controller';
@@ -34,6 +35,12 @@ export class VegaInputPhoneNumber {
     this.countrySelectController = new CountrySelectController();
     this.changeEventEmitter = createEventEmitSlimmer(VegaInputPhoneNumber, VegaChange);
     this.countryChangeEventEmitter = createEventEmitSlimmer(VegaInputPhoneNumber, VegaCountryChange);
+    this.ariaAttributesValueMapper = new AriaAttributesValueMapper(() => this.host.shadowRoot.querySelector('vega-input'), {
+      'data-aria-label': {
+        dependency: ['data-aria-label', 'label'],
+        defaultValue: 'No label defined',
+      },
+    });
     this.inputPhoneNumberEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host, true);
     this.formFieldController = new FormFieldControllerSlimmer({
       propertyRules: [
@@ -699,6 +706,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputPhoneNumber.prototype, "countryChangeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "ariaAttributesValueMapper", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputPhoneNumber.prototype, "inputPhoneNumberEventPrevent", void 0);

package/dist/collection/components/vega-modal/slimmers/renderers/vega-modal-renderer.js

@@ -55,7 +55,7 @@ export class VegaModalRenderer extends VegaSlimmer {
     return (h("vega-box", { class: {
         'vega-modal-content': true,
         'vega-modal-content-with-scroll': this.isContentScrollable(),
-      }, padding: this.sectionPaddingState.getContentPadding(), maxHeight: this.contentMaxHeight, ref: (e) => (this.modalContent = e) },
+      }, padding: this.sectionPaddingState.getContentPadding(), maxHeight: this.contentMaxHeight, ref: (e) => (this.modalContent = e), role: this.isContentScrollable() ? 'document' : undefined, tabindex: this.isContentScrollable() ? '-1' : undefined },
       h(Fragment, null,
         h("slot", null),
         h("slot", { name: "content" }),

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/controllers/vega-left-nav-backdrop-controller.js

@@ -19,13 +19,17 @@ export class VegaLeftNavBackdropController extends PageResizeObserverSlimmer {
         this.updateBackdropUI(this.openState);
       },
     });
+    this.backdrop = null;
     /* eslint-enable jsdoc/require-jsdoc*/
   }
   connectedCallback() {
-    this.backdrop = this.createBackdrop();
+    if (!this.backdrop || !this.backdrop.isConnected) {
+      this.backdrop = this.createBackdrop();
+    }
   }
   disconnectedCallback() {
     this.backdrop && this.backdrop.remove();
+    this.backdrop = null;
   }
   watchOpenState(newState) {
     this.updateBackdropUI(newState);
@@ -59,16 +63,14 @@ export class VegaLeftNavBackdropController extends PageResizeObserverSlimmer {
   updateBackdropUI(state) {
     // eslint-disable-next-line no-restricted-globals
     const mainContent = document.querySelector('vega-left-nav + .vega-left-nav-content');
+    const backdrop = this.backdrop;
+    if (!backdrop)
+      return;
     if (state === 'open') {
-      if (mainContent && !this.shouldShowBackdrop()) {
-        this.backdrop.visible = false;
-      }
-      else {
-        this.backdrop.visible = true;
-      }
+      backdrop.visible = !mainContent || this.shouldShowBackdrop();
     }
     else {
-      this.backdrop.visible = false;
+      backdrop.visible = false;
     }
   }
   isLargeScreen() {

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/controllers/vega-left-nav-zindex-controller.js

@@ -19,12 +19,12 @@ export class VegaLeftNavZIndexController extends VegaSlimmer {
   updateZIndex() {
     const backDrop = this.backdropController.getBackdrop();
     if (this.openState == 'open') {
-      InternalVegaZIndexManager.setZIndex(backDrop, 'base');
+      backDrop && InternalVegaZIndexManager.setZIndex(backDrop, 'base');
       InternalVegaZIndexManager.setZIndex(this.host, 'base');
     }
     else {
       executeAfterTransition(() => {
-        InternalVegaZIndexManager.removeZIndex(backDrop, 'base');
+        backDrop && InternalVegaZIndexManager.removeZIndex(backDrop, 'base');
         InternalVegaZIndexManager.removeZIndex(this.host, 'base');
       }, this.host, 300);
     }

package/dist/collection/components/vega-rich-text-editor/dto/nodes/text-node.js

@@ -245,6 +245,12 @@ export class RTETextNode extends RTENode {
    * @returns {string} HTML string from that depth onward.
    */
   renderHtmlFromDepth(depth, options) {
+    // At depth 0 this is, by contract, equivalent to `toHtml`. Delegate
+    // so derived classes that override `toHtml` (token, and future RTE
+    // extensions) emit their own markup instead of falling back to the
+    // base text rendering. See VD-9042.
+    if (depth === 0)
+      return this.toHtml(options);
     const annotation = this.getInlineHtmlAnnotationAtDepth(depth);
     if (!annotation)
       return this.renderTextStr(options);

package/dist/collection/components/vega-rich-text-editor/extensions/base-toolbar-button-renderer.js

@@ -110,6 +110,8 @@ export class VegaRTEToolbarButtonRenderer {
   }
   /**
    * Renders a common toolbar button with optional icon, label, and arrow icon.
+   * When a tooltip is provided via `buttonProps.tooltip`, the button is wrapped
+   * in a `vega-tooltip` element, matching the behavior of default toolbar buttons.
    *
    * @param {VegaRTECreateElementFunction} h - Create element function.
    * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
@@ -117,9 +119,9 @@ export class VegaRTEToolbarButtonRenderer {
    * @returns {VegaRTERenderResult} - The render result for the button.
    */
   renderButton(h, editorContext, buttonProps) {
-    const { icon, label, showArrowIcon } = buttonProps;
+    const { icon, label, showArrowIcon, tooltip } = buttonProps;
     const isDisabled = this.isDisabled(editorContext);
-    return h('vega-rich-text-editor-toolbar-button', {
+    const button = h('vega-rich-text-editor-toolbar-button', {
       disabled: isDisabled,
       icon: icon,
       hidden: this.isHidden(editorContext),
@@ -140,6 +142,10 @@ export class VegaRTEToolbarButtonRenderer {
         })
         : null,
     ].filter(isNonNullable));
+    if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.text) {
+      return h('vega-tooltip', { text: tooltip.text, placement: ['bottom', 'top'] }, [button]);
+    }
+    return button;
   }
   /**
    * Renders the button label.

package/dist/collection/components/vega-rich-text-editor/extensions/functions/renderers/function-toolbar-button-renderer.js

@@ -14,6 +14,7 @@ export class FunctionToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
       this.renderButton(h, editorContext, {
         label: 'Functions',
         showArrowIcon: true,
+        tooltip: { text: 'Insert function' },
       }),
       this.renderDropdownListTemplate(h, FunctionToolbarButtonRenderer.FUNCTION_LIST),
     ]);

package/dist/collection/components/vega-rich-text-editor/extensions/languages/language-toolbar-button-renderer.js

@@ -62,6 +62,7 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
       this.renderButton(createElement, editorContext, {
         label: this.getLanguageLabelByKey(this.selectedLanguage),
         showArrowIcon: true,
+        tooltip: { text: 'Select language' },
       }),
     ]);
   }

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-dynamic-popover-renderer.js

@@ -25,7 +25,6 @@ import { TablePopoverBaseRenderer } from './table-popover-base-renderer';
 export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
   constructor(colors, renderContext) {
     super(renderContext);
-    this.tableColorSchema = [];
     this.popoverCloseType = 'none'; // 'save' | 'cancel' | 'change' | 'none'
     this.tablePropertiesHandlerMap = {
       save: new TablePropertiesSaveEventHandler(),
@@ -53,7 +52,7 @@ export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
         this.tablePropertiesHandlerMap[eventKey].handle(extensionContext, this.currentTableBlock, e.detail, this.currentFocusNode);
       }
       // Update popover position to follow the target after styles change
-      if (eventKey === 'change' && this.popoverRef) {
+      if (eventKey === 'change') {
         void this.popoverRef.show(true);
       }
     };
@@ -73,7 +72,7 @@ export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
         this.cellPropertiesHandlerMap[eventKey].handle(extensionContext, e.detail, this.currentFocusNode);
       }
       // Update popover position to follow the target after styles change
-      if (eventKey === 'change' && this.popoverRef) {
+      if (eventKey === 'change') {
         void this.popoverRef.show(true);
       }
     };
@@ -125,55 +124,58 @@ export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
     await this.popoverRef.hide();
   }
   /**
-   * Renders a vega-popover whose target and content are provided dynamically by callers.
+   * Re-targets the shared popovers to the given table.
    *
-   * @param {VegaRTECreateElementFunction} h - The create element function.
-   * @param {() => HTMLElement} getTableRef - Current table DOM reference
-   * @param {RTETableBlock} renderData - Current table block being rendered.
-   * @returns {VegaRTERenderResult} The rendered popover host.
+   * @param {RTETableBlock} tableBlock - The clicked table's block data.
+   * @param {() => HTMLElement} getTableRef - Getter for the clicked table's DOM element.
    */
-  render(h, getTableRef, renderData) {
+  reTarget(tableBlock, getTableRef) {
     this.getTableRef = getTableRef;
-    this.currentTableBlock = renderData;
-    return h('vega-popover', {
-      trigger: 'click',
-      isScreenPosition: true,
-      class: 'rte-table-dynamic-popover',
-      // eslint-disable-next-line jsdoc/require-jsdoc
-      ref: (popover) => {
-        this.popoverRef = popover;
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, () => {
-          const extensionContext = this.getTableExtensionContext();
-          if (this.popoverCloseType === 'change' && extensionContext) {
-            extensionContext.flushValue(extensionContext.host.value);
-          }
-        });
-      },
-    }, [
-      h('div', {
-        slot: 'popover',
-        class: 'rte-table-dynamic-popover-content',
-      }, [
-        h('vega-rich-text-table-properties', {
-          // eslint-disable-next-line jsdoc/require-jsdoc
-          ref: (el) => (this.tablePropertiesFormRef = el),
-          colors: this.tableColorSchema,
-          type: TableSettingType.TABLE,
-          onVegaCancel: this.handleTablePropertiesUpdate,
-          onVegaChange: this.handleTablePropertiesUpdate,
-          onVegaSave: this.handleTablePropertiesUpdate,
-        }),
-        h('vega-rich-text-table-properties', {
-          // eslint-disable-next-line jsdoc/require-jsdoc
-          ref: (el) => (this.cellPropertiesFormRef = el),
-          colors: this.tableColorSchema,
-          type: TableSettingType.CELL,
-          onVegaCancel: this.handleCellPropertiesUpdate,
-          onVegaChange: this.handleCellPropertiesUpdate,
-          onVegaSave: this.handleCellPropertiesUpdate,
-        }),
-      ]),
-    ]);
+    this.currentTableBlock = tableBlock;
+  }
+  /**
+   * Builds the popover DOM and appends it to the given container.
+   *
+   * @returns {Nullable<HTMLElement>} The constructed popover element.
+   */
+  render() {
+    const safeDocument = tryGetDocument();
+    if (safeDocument) {
+      const popover = safeDocument.createElement('vega-popover');
+      popover.trigger = 'click';
+      popover.isScreenPosition = true;
+      popover.className = 'rte-table-dynamic-popover';
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, () => {
+        const extensionContext = this.getTableExtensionContext();
+        if (this.popoverCloseType === 'change' && extensionContext) {
+          extensionContext.flushValue(extensionContext.host.value);
+        }
+      });
+      const slotDiv = safeDocument.createElement('div');
+      slotDiv.setAttribute('slot', 'popover');
+      slotDiv.className = 'rte-table-dynamic-popover-content';
+      const tablePropsForm = safeDocument.createElement('vega-rich-text-table-properties');
+      tablePropsForm.colors = this.tableColorSchema;
+      tablePropsForm.type = TableSettingType.TABLE;
+      tablePropsForm.setAttribute('type', TableSettingType.TABLE);
+      tablePropsForm.addEventListener('vegaCancel', this.handleTablePropertiesUpdate);
+      tablePropsForm.addEventListener('vegaChange', this.handleTablePropertiesUpdate);
+      tablePropsForm.addEventListener('vegaSave', this.handleTablePropertiesUpdate);
+      const cellPropsForm = safeDocument.createElement('vega-rich-text-table-properties');
+      cellPropsForm.colors = this.tableColorSchema;
+      cellPropsForm.type = TableSettingType.CELL;
+      cellPropsForm.setAttribute('type', TableSettingType.CELL);
+      cellPropsForm.addEventListener('vegaCancel', this.handleCellPropertiesUpdate);
+      cellPropsForm.addEventListener('vegaChange', this.handleCellPropertiesUpdate);
+      cellPropsForm.addEventListener('vegaSave', this.handleCellPropertiesUpdate);
+      slotDiv.appendChild(tablePropsForm);
+      slotDiv.appendChild(cellPropsForm);
+      popover.appendChild(slotDiv);
+      this.popoverRef = popover;
+      this.tablePropertiesFormRef = tablePropsForm;
+      this.cellPropertiesFormRef = cellPropsForm;
+      return popover;
+    }
   }
   /**
    * Updates the visibility of the pre-rendered content blocks based on type.
@@ -183,13 +185,13 @@ export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
   updateContent(type) {
     this.popoverCloseType = 'none';
     const extensionContext = this.getTableExtensionContext();
-    if (this.tablePropertiesFormRef && type === 'TABLE') {
+    if (type === 'TABLE') {
       this.tablePropertiesFormRef.classList.remove('vega-hidden');
       this.cellPropertiesFormRef.classList.add('vega-hidden');
       this.tablePropertiesFormRef.defaultValue =
         TablePropertiesEventHandler.generateTablePropertiesForm(this.currentTableBlock);
     }
-    else if (this.cellPropertiesFormRef && type === 'CELL') {
+    else if (type === 'CELL') {
       this.cellPropertiesFormRef.classList.remove('vega-hidden');
       this.tablePropertiesFormRef.classList.add('vega-hidden');
       if (extensionContext) {

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

@@ -1,13 +1,11 @@
 import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
 import styles from '../table-block-styles.css';
 import { DeleteTableBlockAction } from '../actions/delete-table-block-action';
-import { TableSettingPopoverRenderer } from './table-setting-popover-renderer';
 import { RTETableExtensionAnnotationTypeEnum } from '../annotations/table-annotation';
-import { TableDynamicPopoverRenderer } from './table-dynamic-popover-renderer';
 import changeManager from '../../../../../helpers/change-manager/change-manager';
 import DomNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalRTEExtensionTableCellsSelectionAnchor } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
-import { RTETableColorManager } from '../utils/table-color-manager';
+import { TableSettingPopoverRenderer } from './table-setting-popover-renderer';
 /**
  * Renderer for the RTETableBlock.
  */
@@ -16,12 +14,9 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
    * @inheritDoc
    */
   doRender(h, renderData, rteContext) {
-    const tableSettingPopoverRenderer = new TableSettingPopoverRenderer(rteContext);
-    const tableDynamicPopoverRenderer = new TableDynamicPopoverRenderer(RTETableColorManager.getTableColors(), rteContext);
     let tableRef;
     const table = this.renderTable(h, renderData, (ref) => (tableRef = ref));
-    const tableSettingPopover = tableSettingPopoverRenderer.render(h, renderData, () => tableRef, tableDynamicPopoverRenderer);
-    const tableDynamicPopover = tableDynamicPopoverRenderer.render(h, () => tableRef, renderData);
+    this.renderTableToolbar(rteContext);
     const tableAnnotation = renderData.getAnnotationByType(RTETableExtensionAnnotationTypeEnum.TABLE);
     const children = rteContext.editable
       ? [
@@ -32,17 +27,23 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
             this.handleTableRemove(renderData, tableRef);
           },
           // eslint-disable-next-line jsdoc/require-jsdoc
-          onClick: (event) => tableSettingPopoverRenderer.handleTableClick(event, tableRef),
+          onClick: (event) => {
+            if (this.tableToolbar) {
+              this.tableToolbar.handleTableClick(event, renderData, () => tableRef);
+            }
+          },
           // eslint-disable-next-line jsdoc/require-jsdoc
           onMouseLeave: () => {
-            tableSettingPopoverRenderer.syncSelectedCells();
+            if (this.tableToolbar) {
+              this.tableToolbar.syncSelectedCells();
+            }
           },
         }, [
           // Add an extra div as slot container, to make sure the cursor can move to before/end of the table.
           h('div', {
             contentEditable: true,
             ref: this.useRef(renderData),
-          }, [table, tableSettingPopover, tableDynamicPopover]),
+          }, [table]),
         ]),
       ]
       : [table];
@@ -64,6 +65,12 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
     result.childrenContainerGetter = () => table;
     return result;
   }
+  /**
+   * Destroys the table toolbar popover.
+   */
+  destroy() {
+    this.destroyTableToolbar();
+  }
   /**
    * @inheritDoc
    */
@@ -113,4 +120,27 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
       }
     }
   }
+  /**
+   * Renders the table setting popover toolbar if the context is editable.
+   *
+   * @param {RTERenderContext} rteContext - The rendering context of the rich text editor.
+   */
+  renderTableToolbar(rteContext) {
+    if (!rteContext.editable) {
+      this.destroyTableToolbar();
+      return;
+    }
+    if (!this.tableToolbar) {
+      this.tableToolbar = new TableSettingPopoverRenderer(rteContext);
+      this.tableToolbar.render();
+    }
+  }
+  /**
+   * Destroys the table setting popover toolbar if it exists.
+   */
+  destroyTableToolbar() {
+    var _a;
+    (_a = this.tableToolbar) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.tableToolbar = null;
+  }
 }