@heartlandone/vega-sandbox-pr-1474-a64385b416d2e92ec0fb6cf2ef83219880562cb4 2.26.0

package/dist/cjs/vega-line-chart.cjs.entry.js

@@ -0,0 +1,382 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-09acd3c9.js');
+const legendInputProcessor = require('./legend-input-processor-6ab8782a.js');
+const yAxisInputProcessor = require('./y-axis-input-processor-cc6e9196.js');
+const array = require('./array-6e559cde.js');
+const component = require('./component-73a88c4e.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-1ee24991.js');
+require('./typography-4560e7f1.js');
+require('./pixel-98f2a10c.js');
+require('./number-459031f7.js');
+
+function map(values, mapper) {
+  if (typeof values[Symbol.iterator] !== "function") throw new TypeError("values is not iterable");
+  if (typeof mapper !== "function") throw new TypeError("mapper is not a function");
+  return Array.from(values, (value, index) => mapper(value, index, values));
+}
+
+/** The PathDrawer class draws a path on a chart using provided data and color options. */
+class PathDrawer extends legendInputProcessor.BaseDrawer {
+  /** This function adds interaction support */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  addInteractionSupport() { }
+  /**
+   * This function draws a path on a chart using specified options.
+   */
+  draw() {
+    const { positions, colors } = this.options.renderOptions;
+    let renderPositions = positions;
+    if (positions && positions[0] && !Array.isArray(positions[0])) {
+      renderPositions = [positions];
+    }
+    renderPositions.forEach((item, index) => {
+      const color = this.getColorByIndex(index, colors);
+      this.renderer.drawLinePath(item, this.getColorFromToken(color));
+      item.forEach((position) => {
+        this.renderer.drawCircle(position, 4, this.getColorFromToken('bg-primary'), 2, this.getColorFromToken(color));
+      });
+    });
+  }
+}
+
+/** The `LinePathInputProcessor` class generates chart path options based on input data and previous scale records for a line chart. */
+class LinePathInputProcessor {
+  /**
+   * This function generates chart path options based on input data and previous scale records.
+   *
+   * @param {ChartOptions<LineChartDataType>} input - The input parameter is an object of type ChartOptions that contains two properties:
+   * dataSource and colors. The dataSource property is of type LineChartDataType and represents the data
+   * used to generate the chart. The colors property is an array of strings that represents the colors
+   * to be used for the chart.
+   * @param {ScaleRecordType} previousOutput - The `previousOutput` parameter is of type
+   * `ScaleRecordType` and is the output of the previous step in the chart rendering process. It
+   * contains the x and y scales that were calculated in the previous step and are used in this step to
+   * generate the positions for the chart path.
+   * @returns {ChartPathOptions} A `ChartPathOptions` object is being returned, which contains an array of `positions`
+   * generated using the `pathPositionGenerator` and the `xScale` and `yScale` scales from the
+   * `previousOutput`, as well as the `colors` from the `dataSource`.
+   */
+  process(input, previousOutput) {
+    const { dataSource, colors } = input;
+    const { xScale, yScale } = previousOutput;
+    return {
+      positions: this.getPathPositions(dataSource, xScale, yScale),
+      colors,
+    };
+  }
+  /**
+   * convert array to array[], convert x,y position to relative position
+   *
+   * @param {LineChartDataType['dataSource']} originData origin line data source
+   * @param {AxisScale<AxisDomain>} xScale x scale
+   * @param {AxisScale<AxisDomain>} yScale y scale
+   * @returns {ChartPosition[][]} x,y relative position
+   */
+  getPathPositions(originData, xScale, yScale) {
+    const flatData = array.flatNestedArray(originData);
+    let dataLengthArr = [];
+    const flatPathData = flatData.map(({ x, y }) => {
+      return {
+        x: xScale(x),
+        y: yScale(y),
+      };
+    });
+    let pathData = [];
+    if (originData && Array.isArray(originData[0])) {
+      dataLengthArr = originData.map((item) => item.length);
+      pathData = array.convertArrayToNestedArray(flatPathData, dataLengthArr);
+    }
+    else {
+      pathData = [flatPathData];
+    }
+    return pathData;
+  }
+}
+
+/** The FormatTimePositionsInputProcessor class processes input data for a line chart by formatting time positions if the x-axis type is 'time'. */
+class FormatTimePositionsInputProcessor {
+  /**
+   * This function processes chart options for a line chart, converting the x-axis data to a time format if necessary.
+   *
+   * @param {ChartOptions<LineChartDataType>} input - A ChartOptions object that contains the data source and configuration options for a line chart.
+   * @returns {ChartOptions<LineChartDataType>} A modified version of the input ChartOptions object with the dataSource property
+   * potentially transformed based on the xAxis type.
+   */
+  process(input) {
+    const { dataSource, xAxis } = input;
+    const xAxisType = (xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) || 'value';
+    let renderData = dataSource;
+    if (xAxisType === 'time') {
+      renderData = this.formatTimePositionArray(dataSource);
+    }
+    input.dataSource = renderData;
+    return input;
+  }
+  /**
+   * format date position array function for chart, parse date string yyyy-MM-DD to date
+   *
+   * @param {StringCategorizedChartData[] | StringCategorizedChartData[][]} data data source
+   * @returns {DateCategorizedChartData[] | DateCategorizedChartData[][]} result array
+   */
+  formatTimePositionArray(data) {
+    let result = [];
+    let lengthArray = [];
+    const flatArray = array.flatNestedArray(data);
+    const flatArray_date = map(flatArray, (d) => {
+      return { x: typeof d.x === 'string' ? yAxisInputProcessor.timeParse('%Y-%m-%d')(d.x) : d.x, y: d.y };
+    });
+    if (data && Array.isArray(data[0])) {
+      lengthArray = data.map((item) => item.length);
+      result = array.convertArrayToNestedArray(flatArray_date, lengthArray);
+    }
+    else {
+      result = flatArray_date;
+    }
+    return result;
+  }
+}
+
+/** The SortPositionsInputProcessor class sorts the data source of a line chart based on the type of x-axis. */
+class SortPositionsInputProcessor {
+  /**
+   * This function sorts the data source of a line chart based on the type of x-axis.
+   *
+   * @param {ChartOptions<LineChartDataType>} input - The input parameter is an object of type ChartOptions with a generic type of
+   * LineChartDataType. It contains the data source and configuration options for a line chart,
+   * including the x-axis type.
+   * @returns {ChartOptions<LineChartDataType>} a modified version of the input `ChartOptions` object with the `dataSource` property
+   * sorted based on the `xAxis` type. The modified `ChartOptions` object is of type
+   * `ChartOptions<LineChartDataType>`.
+   */
+  process(input) {
+    const { dataSource, xAxis } = input;
+    const xAxisType = (xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) || 'value';
+    let renderData = dataSource;
+    switch (xAxisType) {
+      case 'time':
+        renderData = array.sortArrayOrNestedArray(dataSource, (data) => data.x.valueOf());
+        break;
+      case 'value':
+        renderData = array.sortArrayOrNestedArray(dataSource, (data) => data.x);
+        break;
+      case 'category':
+        renderData = array.sortAsExistArray(dataSource, (item) => item.x, xAxis.sorter);
+    }
+    input.dataSource = renderData;
+    return input;
+  }
+}
+
+/** The XAxisInputProcessor class generates X-axis options for a line chart based on input data and previous layout results. */
+class XAxisLabelFormatterInputProcessor {
+  constructor() {
+    this.formatMillisecond = yAxisInputProcessor.timeFormat('.%L');
+    this.formatSecond = yAxisInputProcessor.timeFormat(':%S');
+    this.formatMinute = yAxisInputProcessor.timeFormat('%I:%M');
+    //return 18:00
+    this.formatHour = yAxisInputProcessor.timeFormat('%H:00');
+    //return 01
+    this.formatDay = yAxisInputProcessor.timeFormat('%d');
+    //return Jan 01
+    this.formatWeek = yAxisInputProcessor.timeFormat('%b %d');
+    //return Jan
+    this.formatMonth = yAxisInputProcessor.timeFormat('%b');
+    //return 2023
+    this.formatYear = yAxisInputProcessor.timeFormat('%Y');
+  }
+  /**
+   * This function checks if the xAxis type is 'time' and sets a tickFormat if a labelFormatter is not provided.
+   *
+   * @param {ChartOptions<unknown>} input - An object containing chart options, including the type of x-axis and a label
+   * formatter function.
+   * @param {ChartExtend<AxisScale<AxisDomain>>} previousOutput - `previousOutput` is a parameter that represents the output of the previous
+   * step in the charting process. It is of type `ChartExtend<AxisScale<AxisDomain>>`, which is an
+   * object that contains information about the chart's axis scales. This parameter is used to update
+   * the axis scale information
+   * @returns {ChartExtend<AxisScale<AxisDomain>>} a `ChartExtend` object that contains an `AxisScale` object with a tick format function.
+   * The tick format function is either the `timeFormatter` function or the previous tick format
+   * function if the `xAxisType` is not `'time'`.
+   */
+  process(input, previousOutput) {
+    const { xAxis } = input;
+    const xAxisType = (xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) || 'value';
+    if (xAxisType === 'time' && typeof previousOutput.labelFormatter !== 'function') {
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      previousOutput.scale['tickFormat'] = () => this.timeFormatter.bind(this);
+    }
+    return previousOutput;
+  }
+  /**
+   * override the scaleTime default ticks label formatter function
+   * The function formats a given date object based on its time interval using a set of predefined format strings.
+   *
+   * @param {Date} date - The input date that needs to be formatted.
+   * @returns {string} A string representing the formatted date based on the input date parameter. The format of
+   * the string depends on the time interval between the input date and the current time, and is
+   * determined by the conditional statements in the function.
+   */
+  timeFormatter(date) {
+    return (yAxisInputProcessor.second(date) < date
+      ? this.formatMillisecond
+      : yAxisInputProcessor.timeMinute(date) < date
+        ? this.formatSecond
+        : yAxisInputProcessor.timeHour(date) < date
+          ? this.formatMinute
+          : yAxisInputProcessor.timeDay(date) < date
+            ? this.formatHour
+            : yAxisInputProcessor.timeMonth(date) < date
+              ? yAxisInputProcessor.timeSunday(date) < date
+                ? this.formatDay
+                : this.formatWeek
+              : yAxisInputProcessor.timeYear(date) < date
+                ? this.formatMonth
+                : this.formatYear)(date);
+  }
+}
+
+/**
+ * The LineChart class is a TypeScript implementation of a line chart that extends the BaseChart class
+ * and includes methods for creating a drawer chain
+ */
+class LineChart extends legendInputProcessor.BaseChart {
+  constructor() {
+    super(...arguments);
+    this.layoutInputProcessor = new legendInputProcessor.LayoutInputProcessor();
+    this.lineDataSourceInputProcessorChain = new legendInputProcessor.ProcessorChain([new FormatTimePositionsInputProcessor(), new SortPositionsInputProcessor()]);
+    this.xAxisInputProcessorChain = new legendInputProcessor.ProcessorChain([
+      this.layoutInputProcessor,
+      new yAxisInputProcessor.XAxisInputProcessor(),
+      new XAxisLabelFormatterInputProcessor(),
+    ]);
+    this.yAxisInputProcessorChain = new legendInputProcessor.ProcessorChain([this.layoutInputProcessor, new yAxisInputProcessor.YAxisInputProcessor()]);
+    this.legendInputProcessorChain = new legendInputProcessor.ProcessorChain([
+      this.layoutInputProcessor,
+      new legendInputProcessor.LegendInputProcessor(),
+    ]);
+    this.linePathInputProcessor = new LinePathInputProcessor();
+  }
+  /**
+   * This function creates an array of BaseDrawer objects for rendering a chart with axes, legends, and paths.
+   *
+   * @param {BaseRenderer<SVGElement | HTMLCanvasElement>} renderer - an instance of a BaseRenderer class that can render SVG or Canvas elements.
+   * @param {BaseInteractor<SVGElement | HTMLCanvasElement>} interactor - an instance of a BaseInteractor class.
+   * @returns {BaseDrawer<unknown>[]} An array of BaseDrawer array.
+   */
+  createDrawerChain(renderer, interactor) {
+    const lineRenderOptionsOutput = this.lineDataSourceInputProcessorChain.process(this.options);
+    const xAxisOutput = this.xAxisInputProcessorChain.process(lineRenderOptionsOutput);
+    const yAxisOutput = this.yAxisInputProcessorChain.process(lineRenderOptionsOutput);
+    return [
+      new yAxisInputProcessor.XAxisDrawer(renderer, interactor, {
+        renderOptions: xAxisOutput,
+      }),
+      new yAxisInputProcessor.YAxisDrawer(renderer, interactor, {
+        renderOptions: yAxisOutput,
+      }),
+      new legendInputProcessor.LegendDrawer(renderer, interactor, {
+        renderOptions: this.legendInputProcessorChain.process(this.options),
+      }),
+      new PathDrawer(renderer, interactor, {
+        renderOptions: this.linePathInputProcessor.process(lineRenderOptionsOutput, {
+          xScale: xAxisOutput.scale,
+          yScale: yAxisOutput.scale,
+        }),
+      }),
+    ];
+  }
+}
+
+const vegaLineChartCss = ".vega-chart-legend-item{cursor:pointer}.vega-chart-line-path:hover{stroke-width:5}:host{display:block}";
+
+var __decorate = (undefined && undefined.__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;
+};
+var __rest = (undefined && undefined.__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;
+};
+const VegaLineChart = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+  }
+  watchOptionsHandel(options) {
+    this.updateChart(options);
+  }
+  disconnectedCallback() {
+    this.chart = null;
+    this.reRenderTimer && clearTimeout(this.reRenderTimer);
+  }
+  componentWillLoad() {
+    this.updateChart(this.options);
+  }
+  /**
+   * Invoke this method to render the chart using the existing options.
+   *    If the chart is displayed incorrectly within a modal or tab,
+   *    ensure that this method is invoked after the chart is shown
+   *    to ensure proper rendering.
+   *
+   * @vegaVersion 1.32.0
+   */
+  async reRender() {
+    this.reRenderTimer && clearTimeout(this.reRenderTimer);
+    /* istanbul ignore next */
+    this.reRenderTimer = setTimeout(() => {
+      this.chart.reRender();
+    }, 0);
+  }
+  render() {
+    return component.sanitizeVegaComponent(index.h(index.Host, null), this.host);
+  }
+  /**
+   * This function draws a line chart using the provided options and data source.
+   *
+   * @param {LineChartOptionsType} options - The options parameter is an object that contains various options for configuring and rendering a line chart.
+   */
+  updateChart(options) {
+    if (!options)
+      return;
+    const { mode = 'svg', dataSource } = options, restOptions = __rest(options, ["mode", "dataSource"]);
+    const mergedOptions = Object.assign(Object.assign({}, restOptions), { mode, container: this.host, dataSource: dataSource || [] });
+    if (this.chart) {
+      this.chart.updateOptions(mergedOptions);
+    }
+    else {
+      this.chart = new LineChart(mergedOptions);
+      this.chart.render();
+    }
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "options": ["watchOptionsHandel"]
+  }; }
+};
+__decorate([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaLineChart.prototype, "globalSlimmers", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLineChart.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaLineChart.style = vegaLineChartCss;
+
+exports.vega_line_chart = VegaLineChart;

package/dist/cjs/vega-loader-wrapper_2.cjs.entry.js

@@ -0,0 +1,211 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-09acd3c9.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-1ee24991.js');
+const component = require('./component-73a88c4e.js');
+const ui = require('./ui-08f33116.js');
+const responsiveFormatFacade = require('./responsive-format-facade-aa849dc7.js');
+const breakpoints = require('./breakpoints-cb3291ba.js');
+const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-1e404fc7.js');
+require('./type-guard-4d05d4b2.js');
+require('./ui-077fc009.js');
+require('./regex-c1f70fd4.js');
+require('./typography-4560e7f1.js');
+require('./number-459031f7.js');
+require('./pixel-98f2a10c.js');
+
+const vegaLoaderWrapperCss = ":host{display:block;display:inline-flex;align-items:center;justify-content:center;top:0px;right:0px;bottom:0px;left:0px;background-color:rgba(var(--v-bg-backdrop-loading, 255, 255, 255, 0.5))}:host(.absolute-wrapper){position:absolute}:host(.fixed-wrapper){width:100%;height:100%;position:fixed}";
+
+var __decorate$1 = (undefined && undefined.__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;
+};
+const VegaLoaderWrapper = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+  }
+  render() {
+    return (index.h(index.Host, { class: "vega-loader-wrapper" }, index.h("slot", null)));
+  }
+  get host() { return index.getElement(this); }
+};
+__decorate$1([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaLoaderWrapper.prototype, "globalSlimmers", void 0);
+__decorate$1([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLoaderWrapper.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaLoaderWrapper.style = vegaLoaderWrapperCss;
+
+const VegaLoadingIndicatorRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'MODE_IS_INDETERMINATE',
+    payloadDescription: 'Specifies the mode of the loading indicator',
+    /**
+     * The function checks if the `mode` property of the `host` element is equal to 'indeterminate'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.mode === 'indeterminate',
+  },
+  {
+    payloadKey: 'MODE_IS_DETERMINATE',
+    payloadDescription: 'Specifies the mode of the loading indicator',
+    /**
+     * The function checks if the `mode` property of the `host` element is equal to 'determinate'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.mode === 'determinate',
+  },
+];
+
+const vegaLoadingIndicatorCss = ":host{display:inline-block}:host(.vega-loading-indicator-bar){width:100%}:host(.vega-loading-indicator-indeterminate) .circle-loader{animation:circle-loader-animation 2000ms linear infinite;transform:rotate(-90deg)}:host(.vega-loading-indicator-determinate) .circle-loader{transform:rotate(-180deg)}:host(.vega-loading-indicator-default) .circle-loader{width:48px;height:48px}:host(.vega-loading-indicator-micro) .circle-loader{width:16px;height:16px}:host(.vega-loading-indicator-small) .circle-loader{width:24px;height:24px}:host(.vega-loading-indicator-large) .circle-loader{width:120px;height:120px}:host .circle-loader-track{stroke:rgba(var(--v-bg-loading-track, 229, 239, 255, 1));fill:none;cy:50%;cx:50%}:host .circle-loader-progress-pointer.v-hidden{display:none}:host .circle-loader-progress-pointer,:host .circle-loader-progress{stroke:rgba(var(--v-bg-loading-progress, 153, 192, 255, 1));fill:none;cy:50%;cx:50%}:host(.vega-loading-indicator-status-success) .circle-loader-progress-pointer,:host(.vega-loading-indicator-status-success) .circle-loader-progress{stroke:rgba(var(--v-bg-status-success, 160, 233, 167, 1))}:host(.vega-loading-indicator-status-error) .circle-loader-progress-pointer,:host(.vega-loading-indicator-status-error) .circle-loader-progress{stroke:rgba(var(--v-bg-status-error, 255, 110, 139, 1))}:host(.vega-loading-indicator-default) .circle-loader-progress-pointer,:host(.vega-loading-indicator-default) .circle-loader-track,:host(.vega-loading-indicator-default) .circle-loader-progress{stroke-width:8px}:host .circle-loader-progress-pointer{stroke-linecap:round}:host(.vega-loading-indicator-micro) .circle-loader-progress-pointer,:host(.vega-loading-indicator-micro) .circle-loader-track,:host(.vega-loading-indicator-micro) .circle-loader-progress{stroke-width:3px}:host(.vega-loading-indicator-small) .circle-loader-progress-pointer,:host(.vega-loading-indicator-small) .circle-loader-track,:host(.vega-loading-indicator-small) .circle-loader-progress{stroke-width:4px}:host(.vega-loading-indicator-large) .circle-loader-progress-pointer,:host(.vega-loading-indicator-large) .circle-loader-track,:host(.vega-loading-indicator-large) .circle-loader-progress{stroke-width:16px}@keyframes circle-loader-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host .bar-loader{border-radius:9999px;position:absolute;box-sizing:border-box;height:8px;background-color:rgba(var(--v-bg-loading-progress, 153, 192, 255, 1));content:\"\";width:75%;top:0;left:0}:host(.vega-loading-indicator-status-success) .bar-loader{background-color:rgba(var(--v-bg-status-success, 160, 233, 167, 1))}:host(.vega-loading-indicator-status-error) .bar-loader{background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1))}:host(.vega-loading-indicator-micro) .bar-loader,:host(.vega-loading-indicator-micro) .bar-loader-track{height:3px}:host(.vega-loading-indicator-small) .bar-loader,:host(.vega-loading-indicator-small) .bar-loader-track{height:4px}:host(.vega-loading-indicator-large) .bar-loader,:host(.vega-loading-indicator-large) .bar-loader-track{height:16px}:host(.vega-loading-indicator-indeterminate) .bar-loader{animation:bar-loader-animation 1250ms cubic-bezier(0.75, 0, 0.5, 1) infinite;animation-delay:50ms}@keyframes bar-loader-animation{0%{left:0;transform:translateX(-100%)}100%{left:100%;transform:translateX(0%)}}:host .bar-loader-track{display:inline-block;border-radius:9999px;position:relative;overflow:hidden;height:8px;width:100%;background-color:rgba(var(--v-bg-loading-track, 229, 239, 255, 1))}:host .vega-loading-indicator-label{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-loading-indicator-label{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-loading-indicator-label{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-loading-indicator-label{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}:host .vega-loading-indicator-hint{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-loading-indicator-hint{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-loading-indicator-hint{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-loading-indicator-hint{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}";
+
+var __decorate = (undefined && undefined.__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;
+};
+const VegaLoadingIndicator = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-loading-indicator-resize-e2e}
+     */
+    this.pageResizeObserverSlimmer = new pageResizeObserverSlimmer.PageResizeObserverSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer(VegaLoadingIndicatorRuntimeMetricsPayloadDefinition);
+    this.currentBreakpoint = breakpoints.getCurrentBreakpoint();
+    /**
+     * Specifies the shape of the loading indicator.
+     *
+     * @vegaVersion 1.16.0
+     */
+    this.shape = 'circle';
+    /**
+     * Specifies the size of the loading indicator.
+     *    It is provided as a ResponsiveType.
+     *
+     * @vegaVersion 1.16.0
+     */
+    this.size = 'default';
+    /**
+     * Specifies the mode of the loading indicator.
+     *
+     * When the mode is set to `determinate`, there will be no animation.
+     *
+     * @vegaVersion 1.16.0
+     */
+    this.mode = 'indeterminate';
+    /**
+     * Specifies the completion percentage when
+     *    the mode is set to `determinate`.
+     *
+     * @vegaVersion 1.16.0
+     */
+    this.percent = 0;
+    /**
+     * Provides a descriptive text or message that indicates
+     *    the status or progress of the process.
+     *
+     * @vegaVersion 1.16.0
+     */
+    this.label = '';
+    /**
+     * Provides a supplementary prompt message that assists users in
+     *    understanding the ongoing loading process.
+     *
+     * @vegaVersion 1.16.0
+     */
+    this.hint = '';
+    /**
+     * Indicates the current status or state of the loading process.
+     *
+     * @vegaVersion 1.16.0
+     */
+    this.status = 'default';
+    this.renderCircleLoader = () => {
+      const r = this.getCircleLoaderRadius(this.getResponsiveSize());
+      const percent = this.mode === 'indeterminate' ? 0.75 : this.percent / 100;
+      const perimeter = Math.PI * 2 * r;
+      const progress = this.status === 'error' ? perimeter : perimeter * percent;
+      return (index.h("svg", { class: "circle-loader" }, index.h("circle", { r: r, class: "circle-loader-track", part: "circle-loader-track" }), index.h("circle", { r: r, class: "circle-loader-progress", part: "circle-loader-progress", "stroke-linecap": this.mode === 'indeterminate' ? 'round' : 'butt', "stroke-dasharray": [progress, perimeter].join(' ') }), this.mode === 'determinate' && (index.h("circle", { r: r, class: ui.arrayToClassString(['circle-loader-progress-pointer', percent === 0 && 'v-hidden'].filter(Boolean)), "stroke-dashoffset": -progress, "stroke-dasharray": [0, perimeter].join(' ') }))));
+    };
+    this.renderBarLoader = () => {
+      let progress = 75;
+      if (this.mode === 'determinate') {
+        if (this.status === 'error') {
+          progress = 100;
+        }
+        else {
+          progress = this.percent;
+        }
+      }
+      return (index.h("div", { class: "bar-loader-track" }, index.h("div", { class: ui.arrayToClassString(['bar-loader', this.getResponsiveSize()]), style: { width: `${progress}%` } })));
+    };
+    this.renderLabelAndHint = () => {
+      if (!this.label && !this.hint)
+        return;
+      return (index.h("vega-flex", { direction: "col", gap: "size-4", alignItems: "center" }, this.label && index.h("span", { class: "vega-loading-indicator-label" }, this.label), this.hint && index.h("span", { class: "vega-loading-indicator-hint" }, this.hint)));
+    };
+    this.getResponsiveSize = () => {
+      return responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(this.size);
+    };
+    /**
+     * Radius = Inner Diameter + ((Outer Diameter - Inner Diameter) / 2)
+     * @param {number} size The size of loading indicator
+     */
+    this.getCircleLoaderRadius = (size) => {
+      switch (size) {
+        case 'micro':
+          return 6.5;
+        case 'small':
+          return 10;
+        case 'large':
+          return 52;
+        default:
+          return 20;
+      }
+    };
+  }
+  render() {
+    const classNames = ui.arrayToClassString([this.getResponsiveSize(), this.mode, `status-${this.status}`, this.shape].map((item) => `vega-loading-indicator-${item}`));
+    return component.sanitizeVegaComponent(index.h(index.Host, { class: classNames }, index.h("vega-flex", { direction: "col", gap: "size-16", alignItems: "center" }, this.shape === 'circle' ? this.renderCircleLoader() : this.renderBarLoader(), this.renderLabelAndHint())), this.host);
+  }
+  get host() { return index.getElement(this); }
+};
+__decorate([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaLoadingIndicator.prototype, "globalSlimmers", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLoadingIndicator.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLoadingIndicator.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaLoadingIndicator.style = vegaLoadingIndicatorCss;
+
+exports.vega_loader_wrapper = VegaLoaderWrapper;
+exports.vega_loading_indicator = VegaLoadingIndicator;