@heartlandone/vega 2.76.0 → 2.77.1

package/dist/collection/components/vega-rich-text-editor/helpers/extension-context-manager.js

@@ -0,0 +1,31 @@
+/**
+ * Manager for storing and retrieving the extension context associated with each rich text editor host element.
+ *
+ * @todo Currently, there are three types of contexts in RTE: toolbar render context, extension context, and DTO render context. The second and third types are bound to the extension context via host props. We are considering optimizing these three types of contexts to make the program more flexible and easier to maintain.
+ */
+class RTEExtensionContextManager {
+  constructor() {
+    this.extensionContextMap = new WeakMap();
+  }
+  /**
+   * Store the extension context for the given rich text editor host element.
+   *
+   * @param {RTEExtensionContext} context - The extension context to store.
+   */
+  setExtensionContext(context) {
+    if (context && context.host) {
+      this.extensionContextMap.set(context.host, context);
+    }
+  }
+  /**
+   * Get the extension context for the given rich text editor host element.
+   *
+   * @typedef HTMLVegaRichTextEditorElement - The type definition for the rich text editor host element.
+   * @param {Nullable<HTMLVegaRichTextEditorElement>} el - The host rich text editor element.
+   * @returns {Nullable<RTEExtensionContext>} - The extension context associated with the host.
+   */
+  getExtensionContext(el) {
+    return el ? this.extensionContextMap.get(el) : null;
+  }
+}
+export default new RTEExtensionContextManager();

package/dist/collection/components/vega-rich-text-editor/helpers/extension-context-manager.test.js

@@ -0,0 +1,19 @@
+import extensionContextManager from './extension-context-manager';
+describe('extension context manager', () => {
+  it('should store and retrieve context by host element', () => {
+    const host = document.createElement('vega-rich-text-editor');
+    const context = {
+      host,
+      isSourceEditMode: jest.fn().mockReturnValue(false),
+      getSelectedNodes: jest.fn().mockReturnValue([]),
+      flushValue: jest.fn(),
+    };
+    extensionContextManager.setExtensionContext(context);
+    expect(extensionContextManager.getExtensionContext(host)).toBe(context);
+    expect(extensionContextManager.getExtensionContext(null)).toBeNull();
+  });
+  it('should return null when no context registered for host', () => {
+    const host = document.createElement('vega-rich-text-editor');
+    expect(extensionContextManager.getExtensionContext(host)).toBeUndefined();
+  });
+});

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/insert-image-controller.js

@@ -20,10 +20,13 @@ export class InsertImageController extends VegaSlimmer {
    * Insert a image to current state
    *
    * @param {string} imageUrl The image url
+   * @param {RTEBlock[]} selectedBlocks The current selected blocks, if not provided, will get from selectionController
+   * @param {RTENode[]} selectedNodes The current selected nodes, if not provided, will get from selectionController
+   * @param {RTERange} currentRange The current selected range, if not provided, will get from selectionController
    * @returns {RTEImageNode} RTEImageNode
    */
-  insertImageToCaretPosition(imageUrl) {
-    const selectedBlocks = this.selectionController.getSelectedBlocks();
+  insertImageToCaretPosition(imageUrl, selectedBlocks, selectedNodes, currentRange) {
+    selectedBlocks || (selectedBlocks = this.selectionController.getSelectedBlocks());
     const imageBlock = new RTEImageBlock(generateUUID());
     const newImageNode = new RTEImageNode(generateUUID(), imageUrl, imageBlock);
     newImageNode.apply(new ImageAnnotationAction('md', ''));
@@ -33,8 +36,8 @@ export class InsertImageController extends VegaSlimmer {
       void this.valueController.flushChanges(this.value);
     }
     else {
-      const { startOffset } = this.selectionController.getCurrentRange();
-      const selectedNodes = this.selectionController.getSelectedNodes();
+      const { startOffset } = currentRange || this.selectionController.getCurrentRange();
+      selectedNodes || (selectedNodes = this.selectionController.getSelectedNodes());
       selectedBlocks[0].apply(new InsertImageToBlockAction(selectedNodes[0], startOffset, imageBlock));
     }
     this.updateCaretPosition(newImageNode);

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/image-toolbar-button-slimmer.js

@@ -6,20 +6,46 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
 import image from '../../../assets/image';
-import { h } from '@stencil/core';
+import { Fragment, h } from '@stencil/core';
 import { MapToComponentField } from 'vega-slimmer/core';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import { ImageUpdateUrlAction } from '../../../dto/actions/image-update-url-action';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 import { ModifyContentActionType } from '../../../dto/actions/modify-content-action.abstract';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaClick, VegaDropdownClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { tryGetDocument } from '../../../../../utils/try-get-document';
 export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'image',
       tooltip: { text: 'Image' },
     });
-    this.onClick = () => {
-      this.inputElementRef.click();
+    this.insertURLImage = async () => {
+      const url = this.normalizeSafeImageUrl(this.insertURLInputRef.value);
+      this.applyImageNode(url, 'url');
+      await this.insertURLModalRef.modal('hide');
+    };
+    this.handleDropdownItemClick = async (payload) => {
+      const safeDocument = tryGetDocument();
+      switch (payload.detail) {
+        case 'upload':
+          this.uploadInputRef.click();
+          break;
+        case 'url':
+          this.currentRange = this.selectionController.getCurrentRange();
+          this.currentSelectedNodes = this.selectionController.getSelectedNodes();
+          this.currentSelectedBlocks = this.selectionController.getSelectedBlocks();
+          safeDocument && safeDocument.body.append(this.insertURLModalRef);
+          this.insertURLInputRef.value = '';
+          await this.insertURLModalRef.modal('show');
+          await this.insertURLInputRef.doFocus();
+          break;
+        /* istanbul ignore next */
+        default:
+          break;
+      }
+      await this.dropdownRef.hide();
     };
     /**
      * The below method is e2e-test covered in
@@ -32,13 +58,7 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       if (!input.files.length) {
         return;
       }
-      const node = this.insertImageController.insertImageToCaretPosition(URL.createObjectURL(input.files[0]));
-      if (!this.updateNodeURLMap) {
-        this.updateNodeURLMap = new Map();
-      }
-      this.updateNodeURLMap.set(node, (url) => {
-        node.apply(new ImageUpdateUrlAction(url));
-      });
+      const node = this.applyImageNode(URL.createObjectURL(input.files[0]), 'upload');
       const payload = {
         file: input.files[0],
         sendBackUploadedURLCallback: this.updateNodeURLMap.get(node),
@@ -49,8 +69,14 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   }
   renderBtnWrapper(renderBtn) {
     return (h("vega-box", null,
-      renderBtn({ showArrowIcon: false }),
-      h("input", { type: "file", style: { display: 'none' }, ref: (node) => (this.inputElementRef = node), accept: "image/*", onChange: this.fileInputChange })));
+      h("vega-dropdown", { selectType: "none", trigger: "click", alignment: "center", ref: (ref) => {
+          this.dropdownRef = ref;
+          this.addDropdownObserver(ref);
+        } },
+        renderBtn({ showArrowIcon: true }),
+        h("div", Object.assign({ slot: "items" }, super.preventLostFocus()), this.renderDropdownContent())),
+      this.renderUploadInput(),
+      this.renderInsertURLModal()));
   }
   isSelected() {
     return false;
@@ -62,10 +88,85 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK)) ||
       this.shouldDisabledToolbar(selectedBlock, ModifyContentActionType.INSERT_IMAGE_TO_BLOCK));
   }
+  renderDropdownContent() {
+    return (h(Fragment, null, ImageToolbarButtonSlimmer.items.map((item) => {
+      return (h("vega-dropdown-item", { key: item.key, itemKey: item.key }, this.translationSlimmer.t(item.label)));
+    })));
+  }
+  renderUploadInput() {
+    return (h("input", { type: "file", style: { display: 'none' }, ref: (node) => (this.uploadInputRef = node), accept: "image/*", onChange: this.fileInputChange }));
+  }
+  renderInsertURLModal() {
+    return (h("vega-modal", { size: 500, backdropColor: "semi", ref: (node) => (this.insertURLModalRef = node) },
+      h("div", { slot: "modal-title" }, this.translationSlimmer.t('Image via URL')),
+      h("div", { slot: "modal-content" },
+        h("vega-input", { placeholder: this.translationSlimmer.t('URL'), ref: (ref) => (this.insertURLInputRef = ref), 
+          /* istanbul ignore next */
+          // eslint-disable-next-line react/jsx-no-bind
+          onKeyDown: async (event) => {
+            event.key === 'Enter' && (await this.insertURLImage());
+          } })),
+      h("vega-flex", { slot: "modal-footer", gap: "size-8", alignItems: "center", justifyContent: "end" },
+        h("vega-button", { label: this.translationSlimmer.t('Cancel'), variant: "secondary", ref: (ref) => {
+            this.addModalCancelObserver(ref);
+          } }),
+        h("vega-button", { label: this.translationSlimmer.t('Insert'), ref: (ref) => {
+            this.addModalInsertObserver(ref);
+          } }))));
+  }
+  addDropdownObserver(dropdownRef) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownClick, this.handleDropdownItemClick);
+  }
+  addModalCancelObserver(buttonRef) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(buttonRef, VegaClick, async () => {
+      await this.insertURLModalRef.modal('hide');
+    });
+  }
+  addModalInsertObserver(buttonRef) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(buttonRef, VegaClick, this.insertURLImage);
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:should-update-url-properly-when-upload-images}
+   */
+  /* istanbul ignore next */
+  applyImageNode(url, type) {
+    const node = type === 'url'
+      ? this.insertImageController.insertImageToCaretPosition(url, this.currentSelectedBlocks, this.currentSelectedNodes, this.currentRange)
+      : this.insertImageController.insertImageToCaretPosition(url);
+    if (!this.updateNodeURLMap) {
+      this.updateNodeURLMap = new Map();
+    }
+    this.updateNodeURLMap.set(node, (url) => {
+      node.apply(new ImageUpdateUrlAction(url));
+    });
+    return node;
+  }
+  normalizeSafeImageUrl(url) {
+    try {
+      const parsedUrl = new URL(url);
+      if (parsedUrl.protocol === 'javascript:') {
+        return '';
+      }
+      // eslint-disable-next-line no-empty
+    }
+    catch (_error) { }
+    return url;
+  }
 }
 (() => {
   VegaInternalIconManager.register({ image: image });
 })();
+ImageToolbarButtonSlimmer.items = [
+  {
+    key: 'upload',
+    label: 'Upload from computer',
+  },
+  {
+    key: 'url',
+    label: 'Insert via URL',
+  },
+];
 __decorate([
   MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "insertImageController", void 0);

package/dist/collection/components/vega-rich-text-editor/test/extensions/extension-test-utils.js

@@ -0,0 +1,41 @@
+import extensionContextManager from '../../helpers/extension-context-manager';
+import { tryGetDocument } from '../../../../utils/try-get-document';
+import { RTERange } from '../../dto/range';
+/**
+ * Gets a mock rich text editor element for testing purposes.
+ *
+ * @returns {HTMLElement} A mock rich text editor element.
+ */
+export function getMockRichTextEditor() {
+  var _a;
+  return (_a = tryGetDocument()) === null || _a === void 0 ? void 0 : _a.createElement('vega-rich-text-editor');
+}
+/**
+ * Mocks the extension context for testing purposes.
+ *
+ * @param {Partial<RTEExtensionContext>} context - Partial context to override default mock values.
+ * @returns {RTEExtensionContext} The mocked extension context.
+ */
+export function mockExtensionContext(context = {}) {
+  const extensionContext = {
+    host: context.host || getMockRichTextEditor(),
+    isSourceEditMode: context.isSourceEditMode || jest.fn().mockReturnValue(false),
+    getSelectedNodes: context.getSelectedNodes || jest.fn().mockReturnValue([]),
+    flushValue: context.flushValue || jest.fn(),
+  };
+  extensionContextManager.setExtensionContext(extensionContext);
+  return extensionContext;
+}
+/**
+ * Mocks the toolbar render context for testing purposes.
+ *
+ * @param {Partial<VegaRTEToolbarRenderContext>} context - Partial context to override default mock values.
+ * @returns {VegaRTEToolbarRenderContext} The mocked toolbar render context.
+ */
+export function mockToolbarRenderContext(context = {}) {
+  return {
+    host: context.host || getMockRichTextEditor(),
+    rteRange: context.rteRange || new RTERange(),
+    sourceEditMode: context.sourceEditMode || false,
+  };
+}

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-image-editor/slimmers/renderers/vega-rich-text-image-editor-renderer.js

@@ -27,7 +27,7 @@ export class VegaRichTextImageEditorRenderer extends VegaSlimmer {
     };
   }
   render() {
-    return (h("vega-popover", { style: { width: '100%' }, trigger: "click", alignment: "start", placement: "bottom", showArrow: false, ref: (ref) => {
+    return (h("vega-popover", { style: { width: '100%' }, trigger: "click", alignment: "start", placement: "bottom", showArrow: false, isScreenPosition: true, ref: (ref) => {
         this.popoverRef = ref;
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
           this.selected = true;

package/dist/collection/components/vega-tooltip/vega-tooltip-content-box/vega-tooltip-content-box.css

@@ -66,6 +66,11 @@
   }
 }
 
+:host(.vega-no-suitable-placement) .vega-tooltip-content::after,
+:host(.vega-no-suitable-alignment) .vega-tooltip-content::after {
+  display: none;
+}
+
 .vega-tooltip-content::after {
   content: "";
   position: absolute;

package/dist/collection/helpers/calendar/test/utils.test.js

@@ -1,4 +1,5 @@
-import { getWeekdays } from '../utils';
+import { getWeekdays, buildDatePickerAnnouncement, getSystemTimezone } from '../utils';
+import { CalendarDate } from '../calendar-date';
 describe('utils', () => {
   it('should return weekdays as expected by default', () => {
     expect(getWeekdays()).toEqual([0, 1, 2, 3, 4, 5, 6]);
@@ -6,4 +7,56 @@ describe('utils', () => {
   it('should return weekdays as expected when change the firstWeekDay', () => {
     expect(getWeekdays(1)).toEqual([1, 2, 3, 4, 5, 6, 0]);
   });
+  it('should return a non-empty string for getSystemTimezone', () => {
+    expect(typeof getSystemTimezone()).toBe('string');
+    expect(getSystemTimezone().length).toBeGreaterThan(0);
+  });
+  describe('buildDatePickerAnnouncement', () => {
+    it('should return empty string when both startDate and endDate are null', () => {
+      expect(buildDatePickerAnnouncement({ mode: 'single', startDate: null })).toBe('');
+      expect(buildDatePickerAnnouncement({ mode: 'range', startDate: null, endDate: null })).toBe('');
+    });
+    it('should return single mode announcement with startDate', () => {
+      const startDate = new CalendarDate(2025, 3, 15);
+      const result = buildDatePickerAnnouncement({ mode: 'single', startDate });
+      expect(result).toContain('Selected result');
+      expect(result).toContain('March');
+      expect(result).toContain('15');
+      expect(result).toContain('2025');
+    });
+    it('should return empty string for single mode without startDate', () => {
+      expect(buildDatePickerAnnouncement({ mode: 'single', startDate: null })).toBe('');
+    });
+    it('should return range mode announcement with both startDate and endDate', () => {
+      const startDate = new CalendarDate(2025, 3, 10);
+      const endDate = new CalendarDate(2025, 3, 20);
+      const result = buildDatePickerAnnouncement({ mode: 'range', startDate, endDate });
+      expect(result).toContain('Selected result');
+      expect(result).toContain('Start Date');
+      expect(result).toContain('End Date');
+      expect(result).toContain('March');
+      expect(result).toContain('10');
+      expect(result).toContain('20');
+    });
+    it('should return range mode announcement with only startDate', () => {
+      const startDate = new CalendarDate(2025, 6, 1);
+      const result = buildDatePickerAnnouncement({ mode: 'range', startDate, endDate: null });
+      expect(result).toContain('Selected result');
+      expect(result).toContain('Start Date');
+      expect(result).toContain('June');
+      expect(result).toContain('1');
+      expect(result).not.toContain('End Date');
+    });
+    it('should return empty string for range mode without any dates', () => {
+      expect(buildDatePickerAnnouncement({ mode: 'range', startDate: null, endDate: null })).toBe('');
+    });
+    it('should return empty string for range mode with only endDate', () => {
+      const endDate = new CalendarDate(2025, 3, 20);
+      expect(buildDatePickerAnnouncement({ mode: 'range', startDate: null, endDate })).toBe('');
+    });
+    it('should return empty string for single mode with only endDate', () => {
+      const endDate = new CalendarDate(2025, 3, 20);
+      expect(buildDatePickerAnnouncement({ mode: 'single', startDate: null, endDate })).toBe('');
+    });
+  });
 });

package/dist/collection/helpers/calendar/utils.js

@@ -1,3 +1,4 @@
+import { VegaInternalTranslation } from '../translation/internal-translation-controller';
 /**
  * Get a week days array
  *
@@ -26,3 +27,37 @@ export var WeekdayLongNames;
 export const getSystemTimezone = () => {
   return Intl.DateTimeFormat().resolvedOptions().timeZone;
 };
+/**
+ * Build an aria announcement string for date picker selection.
+ * TODO: consider to implement i18n for aria announcement .
+ *
+ * @param {object} options - The options for building the announcement.
+ * @param {'single' | 'range'} options.mode - The date picker selection mode.
+ * @param {Nullable<CalendarDate>} options.startDate - The start date.
+ * @param {Nullable<CalendarDate>} [options.endDate] - The end date (used in range mode).
+ * @returns {string} - The aria announcement string.
+ */
+export const buildDatePickerAnnouncement = (options) => {
+  const mode = options.mode;
+  const startDate = options.startDate;
+  const endDate = options.endDate;
+  if (!startDate && !endDate) {
+    return '';
+  }
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  const formatDate = (d) => `${d.getMonthName()} ${d.date} ${d.year}`;
+  if (mode === 'single' && startDate) {
+    return `${VegaInternalTranslation.t('Selected result')}: ${formatDate(startDate)}`;
+  }
+  if (mode === 'range') {
+    const startDateLabel = VegaInternalTranslation.t('Start Date');
+    const endDateLabel = VegaInternalTranslation.t('End Date');
+    if (startDate && endDate) {
+      return `${VegaInternalTranslation.t('Selected result')} ${startDateLabel}: ${formatDate(startDate)}. ${endDateLabel}: ${formatDate(endDate)}.`;
+    }
+    if (startDate) {
+      return `${VegaInternalTranslation.t('Selected result')} ${startDateLabel}: ${formatDate(startDate)}.`;
+    }
+  }
+  return '';
+};

package/dist/collection/helpers/chart/input-processors/format-time-positions-input-processor.js

@@ -1,5 +1,5 @@
 import { convertArrayToNestedArray, flatNestedArray } from '../../../utils/array';
-import { map as d3Map, timeParse as d3TimeParse } from 'd3';
+import { map as d3Map, timeParse as d3TimeParse } from '../../../polyfill/d3';
 /** The FormatTimePositionsInputProcessor class processes input data for a line chart by formatting time positions if the x-axis type is 'time'. */
 export class FormatTimePositionsInputProcessor {
   /**
@@ -30,7 +30,7 @@ export class FormatTimePositionsInputProcessor {
     let lengthArray = [];
     const flatArray = flatNestedArray(data);
     const flatArray_date = d3Map(flatArray, (d) => {
-      return { x: typeof d.x === 'string' ? d3TimeParse('%Y-%m-%d')(d.x) : d.x, y: d.y };
+      return { x: (typeof d.x === 'string' ? d3TimeParse('%Y-%m-%d')(d.x) : d.x), y: d.y };
     });
     if (data && Array.isArray(data[0])) {
       lengthArray = data.map((item) => item.length);

package/dist/collection/helpers/chart/input-processors/pie-chart-arc-path-input-processor.js

@@ -1,4 +1,4 @@
-import { pie as d3Pie } from 'd3';
+import { pie as d3Pie } from '../../../polyfill/d3';
 /** The PieChartArchPathInputProcessor class processes input data to generate options for rendering a pie or donut chart with D3.js. */
 export class PieChartArchPathInputProcessor {
   /**

package/dist/collection/helpers/chart/input-processors/x-axis-input-processor.js

@@ -1,5 +1,5 @@
 import { flatNestedArray } from '../../../utils/array';
-import { scaleTime, scaleLinear, scaleBand, extent as d3Extent } from 'd3';
+import { scaleTime, scaleLinear, scaleBand, extent as d3Extent } from '../../../polyfill/d3';
 /** The XAxisInputProcessor class generates X-axis options for a line chart based on input data and previous layout results. */
 export class XAxisInputProcessor {
   /**
@@ -43,16 +43,18 @@ export class XAxisInputProcessor {
     const xData = flatData.map((item) => item.x);
     let xScale;
     if (xAxisType === 'time') {
+      const ext = d3Extent(xData);
       xScale = scaleTime()
-        .domain(d3Extent(xData))
+        .domain(ext[0] !== undefined ? ext : [new Date(), new Date()])
         .range([0, width]);
     }
     else if (xAxisType === 'category') {
       xScale = scaleBand(typeof sorter === 'function' ? xData.sort(sorter) : xData, [0, width]).padding(padding);
     }
     else {
+      const ext = d3Extent(xData);
       xScale = scaleLinear()
-        .domain(d3Extent(xData))
+        .domain(ext[0] !== undefined ? ext : [0, 0])
         .range([0, width]);
     }
     return xScale;

package/dist/collection/helpers/chart/input-processors/x-axis-label-formatter-input-processor.js

@@ -1,4 +1,5 @@
-import { timeFormat, timeSecond, timeMinute, timeHour, timeDay, timeMonth, timeWeek, timeYear } from 'd3';
+import { timeFormat } from '../../../polyfill/d3/d3-time-format-polyfill';
+import { timeSecond, timeMinute, timeHour, timeDay, timeMonth, timeWeek, timeYear, } from '../../../polyfill/d3/d3-time-polyfill';
 /** The XAxisInputProcessor class generates X-axis options for a line chart based on input data and previous layout results. */
 export class XAxisLabelFormatterInputProcessor {
   constructor() {

package/dist/collection/helpers/chart/input-processors/y-axis-input-processor.js

@@ -1,5 +1,5 @@
 import { flatNestedArray } from '../../../utils/array';
-import { min as d3Min, max as d3Max, extent as d3Extent, scaleLinear } from 'd3';
+import { min as d3Min, max as d3Max, extent as d3Extent, scaleLinear } from '../../../polyfill/d3';
 /** The YAxisInputProcessor class generates Y-axis options for a line chart based on input data and previous layout results. */
 export class YAxisInputProcessor {
   /**
@@ -37,14 +37,16 @@ export class YAxisInputProcessor {
    * @returns {ScaleType}y scale
    */
   getScale(data, range, ticks) {
+    var _a, _b;
     const flatData = flatNestedArray(data);
     const yData = flatData.map((item) => item.y).concat(0);
-    let maxYData = d3Max(yData);
-    let minYData = d3Min(yData);
+    let maxYData = (_a = d3Max(yData)) !== null && _a !== void 0 ? _a : 0;
+    let minYData = (_b = d3Min(yData)) !== null && _b !== void 0 ? _b : 0;
     let yScale = scaleLinear().domain([minYData, maxYData]);
-    const ticksValue = yScale.ticks(ticks);
+    const ticksValue = (yScale.ticks ? yScale.ticks(ticks) : []);
     const step = Math.abs(ticksValue[ticksValue.length - 1] - ticksValue[ticksValue.length - 2]);
-    const [minTickValue, maxTickValue] = d3Extent(ticksValue);
+    const ext = d3Extent(ticksValue);
+    const [minTickValue, maxTickValue] = ext[0] !== undefined ? ext : [0, 0];
     if (minYData < minTickValue) {
       minYData = minTickValue - step;
       ticks += 1;

package/dist/collection/helpers/chart/interacting-entry-generator/arc-path-hover-generator.js

@@ -1,5 +1,5 @@
 import { InteractingEntryGenerator } from './interacting-entry-generator';
-import { select as d3Select } from 'd3';
+import { select as d3Select } from '../../../polyfill/d3';
 /** The `ArcPathHoverGenerator` class is a TypeScript function that handles mouseover events on SVG elements with a specific class and modifies their appearance. */
 export class ArcPathHoverGenerator extends InteractingEntryGenerator {
   constructor() {

package/dist/collection/helpers/chart/interacting-entry-generator/pie-legend-hover-generator.js

@@ -1,5 +1,5 @@
 import { InteractingEntryGenerator } from './interacting-entry-generator';
-import { select as d3Select } from 'd3';
+import { select as d3Select } from '../../../polyfill/d3';
 /** The PieLegendHoverGenerator class generates an InteractingEntry object that handles mouseover events on a legend of a D3 pie chart and triggers a mouseover event on the corresponding path element. */
 export class PieLegendHoverGenerator extends InteractingEntryGenerator {
   constructor() {

package/dist/collection/helpers/chart/renderers/canvas-renderer.js

@@ -1,5 +1,5 @@
 import { BaseRenderer } from './base-renderer';
-import { line as d3Line, create as d3Create } from 'd3';
+import { line as d3Line, create as d3Create } from '../../../polyfill/d3';
 /**
  * The CanvasRenderer class is a TypeScript class that extends the BaseRenderer class and provides
  * methods for drawing various shapes and elements on a canvas.

package/dist/collection/helpers/chart/renderers/svg-renderer.js

@@ -1,5 +1,5 @@
 import { BaseRenderer } from './base-renderer';
-import { select as d3Select, create as d3Create, line as d3Line, axisBottom, axisLeft, arc as d3Arc, } from 'd3';
+import { select as d3Select, create as d3Create, line as d3Line, axisBottom, axisLeft, arc as d3Arc, } from '../../../polyfill/d3';
 /**  This class is used to render charts using SVG elements. */
 export class SVGRenderer extends BaseRenderer {
   /**

package/dist/collection/helpers/chart/test/drawers/arc-path-drawer.test.js

@@ -1,6 +1,6 @@
 import { SVGRenderer } from '../../renderers/svg-renderer';
 import { ArcPathDrawer } from '../../drawers/arc-path-drawer';
-import { pie as d3Pie } from 'd3';
+import { pie as d3Pie } from '../../../../polyfill/d3';
 import { SVGInteractor } from '../../interactors/svg-interactor';
 describe('path drawer', () => {
   it('should call renderer function when run the execute function', () => {

package/dist/collection/helpers/chart/test/input-processors/format-time-positions-input-processor.test.js

@@ -1,5 +1,5 @@
 import { FormatTimePositionsInputProcessor } from '../../input-processors/format-time-positions-input-processor';
-import { timeParse as d3TimeParse } from 'd3';
+import { timeParse as d3TimeParse } from '../../../../polyfill/d3';
 describe('formatTimePositionsInputProcessor', () => {
   const formatTimePositionsInputProcessor = new FormatTimePositionsInputProcessor();
   it('should return expect result when call the process function ', () => {

package/dist/collection/helpers/chart/test/input-processors/sort-positions-input-processor.test.js

@@ -1,5 +1,5 @@
 import { SortPositionsInputProcessor } from '../../input-processors/sort-positions-input-processor';
-import { timeParse as d3TimeParse } from 'd3';
+import { timeParse as d3TimeParse } from '../../../../polyfill/d3';
 describe('sortPositionsInputProcessor', () => {
   const sortPositionsInputProcessor = new SortPositionsInputProcessor();
   it('should return expect result when call the process function ', () => {

package/dist/collection/helpers/chart/test/input-processors/x-axis-input-processor.test.js

@@ -36,4 +36,43 @@ describe('scaleGenerator', () => {
     expect(xAxisInputProcessor['getScale'](stringData, width, 'category').domain()).toEqual(stringData.map((item) => item.x));
     expect(xAxisInputProcessor['getScale'](stringDataNeedSort, width, 'category', 1, (item, nextItem) => 'ABCD'.indexOf(item) - 'ABCD'.indexOf(nextItem)).domain()).toEqual(['A', 'B', 'C', 'D']);
   });
+  it('should fall back to default domains when input data is empty', () => {
+    const width = 200;
+    expect(xAxisInputProcessor['getScale']([], width, 'value').domain()).toEqual([0, 0]);
+    const timeDomain = xAxisInputProcessor['getScale']([], width, 'time', 1).domain();
+    expect(timeDomain[0]).toBeInstanceOf(Date);
+    expect(timeDomain[1]).toBeInstanceOf(Date);
+    expect(Math.abs(timeDomain[1].getTime() - timeDomain[0].getTime())).toBeLessThan(10);
+  });
+  it('should pass correct padding to getScale based on container tagName', () => {
+    const getScaleSpy = jest
+      .spyOn(xAxisInputProcessor, 'getScale')
+      .mockReturnValue({});
+    const previousOutput = {
+      width: 200,
+      height: 100,
+      innerWidth: 200,
+      innerHeight: 100,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    };
+    const dataSource = [];
+    const lineChartInput = {
+      dataSource,
+      container: document.createElement('vega-line-chart'),
+      xAxis: { type: 'value' },
+    };
+    xAxisInputProcessor.process(lineChartInput, previousOutput);
+    expect(getScaleSpy).toHaveBeenLastCalledWith(dataSource, 200, 'value', 1, undefined);
+    const divChartInput = {
+      dataSource,
+      container: document.createElement('div'),
+      xAxis: { type: 'value' },
+    };
+    xAxisInputProcessor.process(divChartInput, previousOutput);
+    expect(getScaleSpy).toHaveBeenLastCalledWith(dataSource, 200, 'value', 0.1, undefined);
+    getScaleSpy.mockRestore();
+  });
 });