@oracle/oraclejet-core-pack 16.1.4 → 17.0.0

package/oj-c/area-chart/__webdriver__/AreaChartWebElementBase.js

@@ -162,6 +162,15 @@ class AreaChartWebElementBase extends elements_1.OjWebElement {
     getHiddenCategories() {
         return this.getProperty('hiddenCategories');
     }
+    /**
+     * Gets the value of <code>dragMode</code> property.
+     * The action that is performed when a drag occurs on the chart.
+     * @return The value of <code>dragMode</code> property.
+     *
+     */
+    getDragMode() {
+        return this.getProperty('dragMode');
+    }
     /**
      * Sets the value of <code>highlightedCategories</code> property.
      * An array of category string used for highlighting.

package/oj-c/area-chart/__webdriver__/AreaChartWebElementBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChartWebElementBase.js","sourceRoot":"","sources":["AreaChartWebElementBase.ts"],"names":[],"mappings":"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","sourcesContent":["import { OjWebElement } from '@oracle/oraclejet-webdriver/elements';\n\n/**\n * This is the base class for oj-c-area-chart WebElement, and is generated from the\n * component's metadata. Do not modify these contents since they'll be replaced\n * during the next generation.\n * Put overrides into the WebElements's subclass, AreaChartWebElement.ts.\n */\nexport class AreaChartWebElementBase extends OjWebElement {\n  /**\n   * Gets the value of <code>data</code> property.\n   * Specifies the DataProvider for the sections and items of the area-chart.\n   * @return The value of <code>data</code> property.\n   *\n   */\n  public getData(): Promise<null> {\n    return this.getProperty<null>('data');\n  }\n\n  /**\n   * Gets the value of <code>seriesComparator</code> property.\n   * A comparator function that determines the ordering of the chart series when using a DataProvider. If undefined, the series will follow the order in which they are found in the data.\n   * @return The value of <code>seriesComparator</code> property.\n   *\n   */\n  public getSeriesComparator(): Promise<null> {\n    return this.getProperty<null>('seriesComparator');\n  }\n\n  /**\n   * Gets the value of <code>groupComparator</code> property.\n   * A comparator function that determines the ordering of the chart groups when using a DataProvider. If undefined, the group will follow the order in which they are found in the data.\n   * @return The value of <code>groupComparator</code> property.\n   *\n   */\n  public getGroupComparator(): Promise<null> {\n    return this.getProperty<null>('groupComparator');\n  }\n\n  /**\n   * Gets the value of <code>stack</code> property.\n   * Defines whether the data items are stacked.\n   * @return The value of <code>stack</code> property.\n   *\n   */\n  public getStack(): Promise<string> {\n    return this.getProperty<string>('stack');\n  }\n\n  /**\n   * Gets the value of <code>drilling</code> property.\n   * Whether drilling is enabled.\n   * @return The value of <code>drilling</code> property.\n   *\n   */\n  public getDrilling(): Promise<string> {\n    return this.getProperty<string>('drilling');\n  }\n\n  /**\n   * Gets the value of <code>orientation</code> property.\n   * The orientation of the chart.\n   * @return The value of <code>orientation</code> property.\n   *\n   */\n  public getOrientation(): Promise<string> {\n    return this.getProperty<string>('orientation');\n  }\n\n  /**\n   * Gets the value of <code>timeAxisType</code> property.\n   * The time axis type of the chart x axis.\n   * @return The value of <code>timeAxisType</code> property.\n   *\n   */\n  public getTimeAxisType(): Promise<string> {\n    return this.getProperty<string>('timeAxisType');\n  }\n\n  /**\n   * Gets the value of <code>yAxis</code> property.\n   * An object defining y axis properties.\n   * @return The value of <code>yAxis</code> property.\n   *\n   */\n  public getYAxis(): Promise<YAxis> {\n    return this.getProperty<YAxis>('yAxis');\n  }\n\n  /**\n   * Gets the value of <code>xAxis</code> property.\n   * An object defining x axis properties.\n   * @return The value of <code>xAxis</code> property.\n   *\n   */\n  public getXAxis(): Promise<XAxis> {\n    return this.getProperty<XAxis>('xAxis');\n  }\n\n  /**\n   * Gets the value of <code>plotArea</code> property.\n   * An object defining the style of the plot area.\n   * @return The value of <code>plotArea</code> property.\n   *\n   */\n  public getPlotArea(): Promise<PlotArea> {\n    return this.getProperty<PlotArea>('plotArea');\n  }\n\n  /**\n   * Gets the value of <code>zoomAndScroll</code> property.\n   * Specifies the zoom and scroll behavior of the chart.\n   * @return The value of <code>zoomAndScroll</code> property.\n   *\n   */\n  public getZoomAndScroll(): Promise<string> {\n    return this.getProperty<string>('zoomAndScroll');\n  }\n\n  /**\n   * Gets the value of <code>valueFormats</code> property.\n   * An object specifying value formatting and tooltip behavior.\n   * @return The value of <code>valueFormats</code> property.\n   *\n   */\n  public getValueFormats(): Promise<ValueFormats> {\n    return this.getProperty<ValueFormats>('valueFormats');\n  }\n\n  /**\n   * Gets the value of <code>selectionMode</code> property.\n   * Specifies the selection mode.\n   * @return The value of <code>selectionMode</code> property.\n   *\n   */\n  public getSelectionMode(): Promise<string> {\n    return this.getProperty<string>('selectionMode');\n  }\n\n  /**\n   * Sets the value of <code>selection</code> property.\n   * An array containing the ids of the initially selected data items.\n   * @param selection The value to set for <code>selection</code>\n   *\n   */\n  public changeSelection(selection: Array<any>): Promise<void> {\n    return this.setProperty<Array<any>>('selection', selection);\n  }\n\n  /**\n   * Gets the value of <code>selection</code> property.\n   * An array containing the ids of the initially selected data items.\n   * @return The value of <code>selection</code> property.\n   *\n   */\n  public getSelection(): Promise<Array<any>> {\n    return this.getProperty<Array<any>>('selection');\n  }\n\n  /**\n   * Sets the value of <code>hiddenCategories</code> property.\n   * An array of category string used for filtering.\n   * @param hiddenCategories The value to set for <code>hiddenCategories</code>\n   *\n   */\n  public changeHiddenCategories(hiddenCategories: Array<string>): Promise<void> {\n    return this.setProperty<Array<string>>('hiddenCategories', hiddenCategories);\n  }\n\n  /**\n   * Gets the value of <code>hiddenCategories</code> property.\n   * An array of category string used for filtering.\n   * @return The value of <code>hiddenCategories</code> property.\n   *\n   */\n  public getHiddenCategories(): Promise<Array<string>> {\n    return this.getProperty<Array<string>>('hiddenCategories');\n  }\n\n  /**\n   * Sets the value of <code>highlightedCategories</code> property.\n   * An array of category string used for highlighting.\n   * @param highlightedCategories The value to set for <code>highlightedCategories</code>\n   *\n   */\n  public changeHighlightedCategories(highlightedCategories: Array<string>): Promise<void> {\n    return this.setProperty<Array<string>>('highlightedCategories', highlightedCategories);\n  }\n\n  /**\n   * Gets the value of <code>highlightedCategories</code> property.\n   * An array of category string used for highlighting.\n   * @return The value of <code>highlightedCategories</code> property.\n   *\n   */\n  public getHighlightedCategories(): Promise<Array<string>> {\n    return this.getProperty<Array<string>>('highlightedCategories');\n  }\n\n  /**\n   * Gets the value of <code>hideAndShowBehavior</code> property.\n   * Defines the hide and show behavior that is performed when clicking on a leegnd item.\n   * @return The value of <code>hideAndShowBehavior</code> property.\n   *\n   */\n  public getHideAndShowBehavior(): Promise<string> {\n    return this.getProperty<string>('hideAndShowBehavior');\n  }\n\n  /**\n   * Gets the value of <code>hoverBehavior</code> property.\n   * Defines the behavior applied when hovering over data items.\n   * @return The value of <code>hoverBehavior</code> property.\n   *\n   */\n  public getHoverBehavior(): Promise<string> {\n    return this.getProperty<string>('hoverBehavior');\n  }\n\n  /**\n   * Gets the value of <code>highlightMatch</code> property.\n   * The matching condition for the highlighted property.\n   * @return The value of <code>highlightMatch</code> property.\n   *\n   */\n  public getHighlightMatch(): Promise<string> {\n    return this.getProperty<string>('highlightMatch');\n  }\n\n  /**\n   * Gets the value of <code>legend</code> property.\n   * An object defining the style, positioning, and behavior of the legend.\n   * @return The value of <code>legend</code> property.\n   *\n   */\n  public getLegend(): Promise<Legend> {\n    return this.getProperty<Legend>('legend');\n  }\n}\nexport interface YAxis {\n  /**\n   * The maximum value of the chart data.\n   */\n  dataMax: number;\n  /**\n   * The minimum value of the chart data.\n   */\n  dataMin: number;\n  /**\n   * The maximum value of the y axis.\n   */\n  max: number;\n  /**\n   * The minimum value of the y axis.\n   */\n  min: number;\n  /**\n   * The y axis major tick properties.\n   */\n  majorTick: YAxisMajorTick;\n  /**\n   * The y axis minor tick properties.\n   */\n  minorTick: YAxisMinorTick;\n  /**\n   * The y axis tick label properties.\n   */\n  tickLabel: YAxisTickLabel;\n  /**\n   * The current minimum value of y axis viewport.\n   */\n  viewportMin: number;\n  /**\n   * The current maximum value of y axis viewport.\n   */\n  viewportMax: number;\n  /**\n   * The increment between major tick marks in y axis.\n   */\n  step: number;\n  /**\n   * The size of the axis.\n   */\n  size: number;\n  /**\n   * The scale of the axis.\n   */\n  scale: string;\n  /**\n   * The axis title.\n   */\n  title: string;\n  /**\n   * The axis title style.\n   */\n  titleStyle: object;\n}\nexport interface YAxisMajorTick {\n  /**\n   * The color of the line.\n   */\n  lineColor: string;\n  /**\n   * The style of the line.\n   */\n  lineStyle: string;\n  /**\n   * The width of the line.\n   */\n  lineWidth: number;\n  /**\n   * The color of the line.\n   */\n  rendered: string;\n}\nexport interface YAxisMinorTick {\n  /**\n   * The color of the line.\n   */\n  lineColor: string;\n  /**\n   * The style of the line.\n   */\n  lineStyle: string;\n  /**\n   * The width of the line.\n   */\n  lineWidth: number;\n  /**\n   * Whether the minor tick are rendered.\n   */\n  rendered: string;\n}\nexport interface YAxisTickLabel {\n  /**\n   * The converter to format the axis tick labels.\n   */\n  converter: object;\n  /**\n   * Whether the tick labels are rendered or not.\n   */\n  rendered: string;\n  /**\n   * The style of the tick labels.\n   */\n  style: object;\n}\nexport interface XAxis {\n  /**\n   * The x axis major tick properties.\n   */\n  majorTick: XAxisMajorTick;\n  /**\n   * The x axis minor tick properties.\n   */\n  minorTick: XAxisMinorTick;\n  /**\n   * The x axis tick label properties.\n   */\n  tickLabel: XAxisTickLabel;\n  /**\n   * The current minimum value of x axis viewport.\n   */\n  viewportMin: number;\n  /**\n   * The current maximum value of x axis viewport.\n   */\n  viewportMax: number;\n  /**\n   * The increment between major tick marks in x axis.\n   */\n  step: number;\n  /**\n   * The size of the axis.\n   */\n  size: number;\n  /**\n   * The scale of the axis.\n   */\n  scale: string;\n  /**\n   * The axis title.\n   */\n  title: string;\n  /**\n   * The axis title style.\n   */\n  titleStyle: object;\n}\nexport interface XAxisMajorTick {\n  /**\n   * The color of the line.\n   */\n  lineColor: string;\n  /**\n   * The style of the line.\n   */\n  lineStyle: string;\n  /**\n   * The width of the line.\n   */\n  lineWidth: number;\n  /**\n   * The color of the line.\n   */\n  rendered: string;\n}\nexport interface XAxisMinorTick {\n  /**\n   * The color of the line.\n   */\n  lineColor: string;\n  /**\n   * The style of the line.\n   */\n  lineStyle: string;\n  /**\n   * The width of the line.\n   */\n  lineWidth: number;\n  /**\n   * Whether the minor tick are rendered.\n   */\n  rendered: string;\n}\nexport interface XAxisTickLabel {\n  /**\n   * The converter to format the axis tick labels.\n   */\n  converter: object;\n  /**\n   * Whether the tick labels are rendered or not.\n   */\n  rendered: string;\n  /**\n   * The style of the tick labels.\n   */\n  style: object;\n}\nexport interface PlotArea {\n  /**\n   * The background color of the plot area.\n   */\n  backgroundColor: string;\n}\nexport interface ValueFormats {\n  /**\n   * The object defining formatting and tooltip behavior for the group.\n   */\n  group: ValueFormatsGroup;\n  /**\n   * The object defining formatting and tooltip behavior for the series.\n   */\n  series: ValueFormatsSeries;\n  /**\n   * The object defining formatting and tooltip behavior for the value.\n   */\n  value: ValueFormatsValue;\n}\nexport interface ValueFormatsGroup {\n  /**\n   * A string representing the label that is displayed before the value in the tooltip.\n   */\n  tooltipLabel: string;\n  /**\n   * Whether the value is displayed in the tooltip.\n   */\n  tooltipDisplay: string;\n}\nexport interface ValueFormatsSeries {\n  /**\n   * A string representing the label that is displayed before the value in the tooltip.\n   */\n  tooltipLabel: string;\n  /**\n   * Whether the value is displayed in the tooltip.\n   */\n  tooltipDisplay: string;\n}\nexport interface ValueFormatsValue {\n  /**\n   * The converter to format the numerical value for the tooltip.\n   */\n  converter: object;\n  /**\n   * A string representing the label that is displayed before the value in the tooltip.\n   */\n  tooltipLabel: string;\n  /**\n   * Whether the value is displayed in the tooltip.\n   */\n  tooltipDisplay: string;\n}\nexport interface Legend {\n  /**\n   *\n   */\n  position: string;\n  /**\n   *\n   */\n  rendered: string;\n  /**\n   *\n   */\n  maxSize: number | string;\n  /**\n   *\n   */\n  size: number | string;\n  /**\n   *\n   */\n  symbolHeight: number;\n  /**\n   *\n   */\n  symbolWidth: number;\n}\n"]}
+{"version":3,"file":"AreaChartWebElementBase.js","sourceRoot":"","sources":["AreaChartWebElementBase.ts"],"names":[],"mappings":"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","sourcesContent":["import { OjWebElement } from '@oracle/oraclejet-webdriver/elements';\n\n/**\n * This is the base class for oj-c-area-chart WebElement, and is generated from the\n * component's metadata. Do not modify these contents since they'll be replaced\n * during the next generation.\n * Put overrides into the WebElements's subclass, AreaChartWebElement.ts.\n */\nexport class AreaChartWebElementBase extends OjWebElement {\n  /**\n   * Gets the value of <code>data</code> property.\n   * Specifies the DataProvider for the sections and items of the area-chart.\n   * @return The value of <code>data</code> property.\n   *\n   */\n  public getData(): Promise<null> {\n    return this.getProperty<null>('data');\n  }\n\n  /**\n   * Gets the value of <code>seriesComparator</code> property.\n   * A comparator function that determines the ordering of the chart series when using a DataProvider. If undefined, the series will follow the order in which they are found in the data.\n   * @return The value of <code>seriesComparator</code> property.\n   *\n   */\n  public getSeriesComparator(): Promise<null> {\n    return this.getProperty<null>('seriesComparator');\n  }\n\n  /**\n   * Gets the value of <code>groupComparator</code> property.\n   * A comparator function that determines the ordering of the chart groups when using a DataProvider. If undefined, the group will follow the order in which they are found in the data.\n   * @return The value of <code>groupComparator</code> property.\n   *\n   */\n  public getGroupComparator(): Promise<null> {\n    return this.getProperty<null>('groupComparator');\n  }\n\n  /**\n   * Gets the value of <code>stack</code> property.\n   * Defines whether the data items are stacked.\n   * @return The value of <code>stack</code> property.\n   *\n   */\n  public getStack(): Promise<string> {\n    return this.getProperty<string>('stack');\n  }\n\n  /**\n   * Gets the value of <code>drilling</code> property.\n   * Whether drilling is enabled.\n   * @return The value of <code>drilling</code> property.\n   *\n   */\n  public getDrilling(): Promise<string> {\n    return this.getProperty<string>('drilling');\n  }\n\n  /**\n   * Gets the value of <code>orientation</code> property.\n   * The orientation of the chart.\n   * @return The value of <code>orientation</code> property.\n   *\n   */\n  public getOrientation(): Promise<string> {\n    return this.getProperty<string>('orientation');\n  }\n\n  /**\n   * Gets the value of <code>timeAxisType</code> property.\n   * The time axis type of the chart x axis.\n   * @return The value of <code>timeAxisType</code> property.\n   *\n   */\n  public getTimeAxisType(): Promise<string> {\n    return this.getProperty<string>('timeAxisType');\n  }\n\n  /**\n   * Gets the value of <code>yAxis</code> property.\n   * An object defining y axis properties.\n   * @return The value of <code>yAxis</code> property.\n   *\n   */\n  public getYAxis(): Promise<YAxis> {\n    return this.getProperty<YAxis>('yAxis');\n  }\n\n  /**\n   * Gets the value of <code>xAxis</code> property.\n   * An object defining x axis properties.\n   * @return The value of <code>xAxis</code> property.\n   *\n   */\n  public getXAxis(): Promise<XAxis> {\n    return this.getProperty<XAxis>('xAxis');\n  }\n\n  /**\n   * Gets the value of <code>plotArea</code> property.\n   * An object defining the style of the plot area.\n   * @return The value of <code>plotArea</code> property.\n   *\n   */\n  public getPlotArea(): Promise<PlotArea> {\n    return this.getProperty<PlotArea>('plotArea');\n  }\n\n  /**\n   * Gets the value of <code>zoomAndScroll</code> property.\n   * Specifies the zoom and scroll behavior of the chart.\n   * @return The value of <code>zoomAndScroll</code> property.\n   *\n   */\n  public getZoomAndScroll(): Promise<string> {\n    return this.getProperty<string>('zoomAndScroll');\n  }\n\n  /**\n   * Gets the value of <code>valueFormats</code> property.\n   * An object specifying value formatting and tooltip behavior.\n   * @return The value of <code>valueFormats</code> property.\n   *\n   */\n  public getValueFormats(): Promise<ValueFormats> {\n    return this.getProperty<ValueFormats>('valueFormats');\n  }\n\n  /**\n   * Gets the value of <code>selectionMode</code> property.\n   * Specifies the selection mode.\n   * @return The value of <code>selectionMode</code> property.\n   *\n   */\n  public getSelectionMode(): Promise<string> {\n    return this.getProperty<string>('selectionMode');\n  }\n\n  /**\n   * Sets the value of <code>selection</code> property.\n   * An array containing the ids of the initially selected data items.\n   * @param selection The value to set for <code>selection</code>\n   *\n   */\n  public changeSelection(selection: Array<any>): Promise<void> {\n    return this.setProperty<Array<any>>('selection', selection);\n  }\n\n  /**\n   * Gets the value of <code>selection</code> property.\n   * An array containing the ids of the initially selected data items.\n   * @return The value of <code>selection</code> property.\n   *\n   */\n  public getSelection(): Promise<Array<any>> {\n    return this.getProperty<Array<any>>('selection');\n  }\n\n  /**\n   * Sets the value of <code>hiddenCategories</code> property.\n   * An array of category string used for filtering.\n   * @param hiddenCategories The value to set for <code>hiddenCategories</code>\n   *\n   */\n  public changeHiddenCategories(hiddenCategories: Array<string>): Promise<void> {\n    return this.setProperty<Array<string>>('hiddenCategories', hiddenCategories);\n  }\n\n  /**\n   * Gets the value of <code>hiddenCategories</code> property.\n   * An array of category string used for filtering.\n   * @return The value of <code>hiddenCategories</code> property.\n   *\n   */\n  public getHiddenCategories(): Promise<Array<string>> {\n    return this.getProperty<Array<string>>('hiddenCategories');\n  }\n\n  /**\n   * Gets the value of <code>dragMode</code> property.\n   * The action that is performed when a drag occurs on the chart.\n   * @return The value of <code>dragMode</code> property.\n   *\n   */\n  public getDragMode(): Promise<string> {\n    return this.getProperty<string>('dragMode');\n  }\n\n  /**\n   * Sets the value of <code>highlightedCategories</code> property.\n   * An array of category string used for highlighting.\n   * @param highlightedCategories The value to set for <code>highlightedCategories</code>\n   *\n   */\n  public changeHighlightedCategories(highlightedCategories: Array<string>): Promise<void> {\n    return this.setProperty<Array<string>>('highlightedCategories', highlightedCategories);\n  }\n\n  /**\n   * Gets the value of <code>highlightedCategories</code> property.\n   * An array of category string used for highlighting.\n   * @return The value of <code>highlightedCategories</code> property.\n   *\n   */\n  public getHighlightedCategories(): Promise<Array<string>> {\n    return this.getProperty<Array<string>>('highlightedCategories');\n  }\n\n  /**\n   * Gets the value of <code>hideAndShowBehavior</code> property.\n   * Defines the hide and show behavior that is performed when clicking on a leegnd item.\n   * @return The value of <code>hideAndShowBehavior</code> property.\n   *\n   */\n  public getHideAndShowBehavior(): Promise<string> {\n    return this.getProperty<string>('hideAndShowBehavior');\n  }\n\n  /**\n   * Gets the value of <code>hoverBehavior</code> property.\n   * Defines the behavior applied when hovering over data items.\n   * @return The value of <code>hoverBehavior</code> property.\n   *\n   */\n  public getHoverBehavior(): Promise<string> {\n    return this.getProperty<string>('hoverBehavior');\n  }\n\n  /**\n   * Gets the value of <code>highlightMatch</code> property.\n   * The matching condition for the highlighted property.\n   * @return The value of <code>highlightMatch</code> property.\n   *\n   */\n  public getHighlightMatch(): Promise<string> {\n    return this.getProperty<string>('highlightMatch');\n  }\n\n  /**\n   * Gets the value of <code>legend</code> property.\n   * An object defining the style, positioning, and behavior of the legend.\n   * @return The value of <code>legend</code> property.\n   *\n   */\n  public getLegend(): Promise<Legend> {\n    return this.getProperty<Legend>('legend');\n  }\n}\nexport interface YAxis {\n  /**\n   * The maximum value of the chart data.\n   */\n  dataMax: number;\n  /**\n   * The minimum value of the chart data.\n   */\n  dataMin: number;\n  /**\n   * The maximum value of the y axis.\n   */\n  max: number;\n  /**\n   * The minimum value of the y axis.\n   */\n  min: number;\n  /**\n   * The y axis major tick properties.\n   */\n  majorTick: YAxisMajorTick;\n  /**\n   * The y axis minor tick properties.\n   */\n  minorTick: YAxisMinorTick;\n  /**\n   * The y axis tick label properties.\n   */\n  tickLabel: YAxisTickLabel;\n  /**\n   * The current minimum value of y axis viewport.\n   */\n  viewportMin: number;\n  /**\n   * The current maximum value of y axis viewport.\n   */\n  viewportMax: number;\n  /**\n   * The increment between major tick marks in y axis.\n   */\n  step: number;\n  /**\n   * The size of the axis.\n   */\n  size: number;\n  /**\n   * The scale of the axis.\n   */\n  scale: string;\n  /**\n   * The axis title.\n   */\n  title: string;\n  /**\n   * The axis title style.\n   */\n  titleStyle: object;\n}\nexport interface YAxisMajorTick {\n  /**\n   * The color of the line.\n   */\n  lineColor: string;\n  /**\n   * The style of the line.\n   */\n  lineStyle: string;\n  /**\n   * The width of the line.\n   */\n  lineWidth: number;\n  /**\n   * The color of the line.\n   */\n  rendered: string;\n}\nexport interface YAxisMinorTick {\n  /**\n   * The color of the line.\n   */\n  lineColor: string;\n  /**\n   * The style of the line.\n   */\n  lineStyle: string;\n  /**\n   * The width of the line.\n   */\n  lineWidth: number;\n  /**\n   * Whether the minor tick are rendered.\n   */\n  rendered: string;\n}\nexport interface YAxisTickLabel {\n  /**\n   * The converter to format the axis tick labels.\n   */\n  converter: object;\n  /**\n   * Whether the tick labels are rendered or not.\n   */\n  rendered: string;\n  /**\n   * The style of the tick labels.\n   */\n  style: object;\n}\nexport interface XAxis {\n  /**\n   * The x axis major tick properties.\n   */\n  majorTick: XAxisMajorTick;\n  /**\n   * The x axis minor tick properties.\n   */\n  minorTick: XAxisMinorTick;\n  /**\n   * The x axis tick label properties.\n   */\n  tickLabel: XAxisTickLabel;\n  /**\n   * The current minimum value of x axis viewport.\n   */\n  viewportMin: number;\n  /**\n   * The current maximum value of x axis viewport.\n   */\n  viewportMax: number;\n  /**\n   * The increment between major tick marks in x axis.\n   */\n  step: number;\n  /**\n   * The size of the axis.\n   */\n  size: number;\n  /**\n   * The scale of the axis.\n   */\n  scale: string;\n  /**\n   * The axis title.\n   */\n  title: string;\n  /**\n   * The axis title style.\n   */\n  titleStyle: object;\n}\nexport interface XAxisMajorTick {\n  /**\n   * The color of the line.\n   */\n  lineColor: string;\n  /**\n   * The style of the line.\n   */\n  lineStyle: string;\n  /**\n   * The width of the line.\n   */\n  lineWidth: number;\n  /**\n   * The color of the line.\n   */\n  rendered: string;\n}\nexport interface XAxisMinorTick {\n  /**\n   * The color of the line.\n   */\n  lineColor: string;\n  /**\n   * The style of the line.\n   */\n  lineStyle: string;\n  /**\n   * The width of the line.\n   */\n  lineWidth: number;\n  /**\n   * Whether the minor tick are rendered.\n   */\n  rendered: string;\n}\nexport interface XAxisTickLabel {\n  /**\n   * The converter to format the axis tick labels.\n   */\n  converter: object;\n  /**\n   * Whether the tick labels are rendered or not.\n   */\n  rendered: string;\n  /**\n   * Whether the ticklabels can be rotated.\n   */\n  rotation: string;\n  /**\n   * The style of the tick labels.\n   */\n  style: object;\n}\nexport interface PlotArea {\n  /**\n   * The background color of the plot area.\n   */\n  backgroundColor: string;\n}\nexport interface ValueFormats {\n  /**\n   * The object defining formatting and tooltip behavior for the group.\n   */\n  group: ValueFormatsGroup;\n  /**\n   * The object defining formatting and tooltip behavior for the series.\n   */\n  series: ValueFormatsSeries;\n  /**\n   * The object defining formatting and tooltip behavior for the value.\n   */\n  value: ValueFormatsValue;\n}\nexport interface ValueFormatsGroup {\n  /**\n   * A string representing the label that is displayed before the value in the tooltip.\n   */\n  tooltipLabel: string;\n  /**\n   * Whether the value is displayed in the tooltip.\n   */\n  tooltipDisplay: string;\n}\nexport interface ValueFormatsSeries {\n  /**\n   * A string representing the label that is displayed before the value in the tooltip.\n   */\n  tooltipLabel: string;\n  /**\n   * Whether the value is displayed in the tooltip.\n   */\n  tooltipDisplay: string;\n}\nexport interface ValueFormatsValue {\n  /**\n   * The converter to format the numerical value for the tooltip.\n   */\n  converter: object;\n  /**\n   * A string representing the label that is displayed before the value in the tooltip.\n   */\n  tooltipLabel: string;\n  /**\n   * Whether the value is displayed in the tooltip.\n   */\n  tooltipDisplay: string;\n}\nexport interface Legend {\n  /**\n   *\n   */\n  position: string;\n  /**\n   *\n   */\n  rendered: string;\n  /**\n   *\n   */\n  maxSize: number | string;\n  /**\n   *\n   */\n  size: number | string;\n  /**\n   *\n   */\n  symbolHeight: number;\n  /**\n   *\n   */\n  symbolWidth: number;\n}\n"]}

package/oj-c/area-chart/area-chart.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "preact/hooks", "@oracle/oraclejet-preact/UNSAFE_LineAreaChart", "ojs/ojcontext", "@oracle/oraclejet-preact/UNSAFE_Legend", "@oracle/oraclejet-preact/UNSAFE_ChartWithLegend", "ojs/ojvcomponent", "../hooks/UNSAFE_useChartData/useChartData", "../utils/PRIVATE_chartUtils/events", "../utils/PRIVATE_chartUtils/legendUtils", "../hooks/UNSAFE_useVizCategories/useVizCategories", "../hooks/UNSAFE_useLegendPosition/useLegendPosition", "../utils/PRIVATE_chartUtils/lineAreaUtils", "../utils/PRIVATE_chartUtils/plotAreaUtils", "../utils/PRIVATE_chartUtils/axisUtils", "css!oj-c/area-chart/area-chart-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, hooks_1, UNSAFE_LineAreaChart_1, Context, UNSAFE_Legend_1, UNSAFE_ChartWithLegend_1, ojvcomponent_1, useChartData_1, events_1, legendUtils_1, useVizCategories_1, useLegendPosition_1, lineAreaUtils_1, plotAreaUtils_1, axisUtils_1) {
+define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "preact/hooks", "@oracle/oraclejet-preact/UNSAFE_VisProgressiveLoader", "@oracle/oraclejet-preact/UNSAFE_LineAreaChart", "@oracle/oraclejet-preact/UNSAFE_VisStatusMessage", "@oracle/oraclejet-preact/UNSAFE_Legend", "@oracle/oraclejet-preact/UNSAFE_ChartWithLegend", "../hooks/UNSAFE_useVisBusyState/useVisBusyState", "ojs/ojvcomponent", "../hooks/UNSAFE_useChartData/useChartData", "../utils/PRIVATE_chartUtils/events", "../utils/PRIVATE_chartUtils/legendUtils", "../hooks/UNSAFE_useVizCategories/useVizCategories", "../hooks/UNSAFE_useLegendPosition/useLegendPosition", "../utils/PRIVATE_chartUtils/lineAreaUtils", "../utils/PRIVATE_chartUtils/plotAreaUtils", "../utils/PRIVATE_chartUtils/axisUtils", "css!oj-c/area-chart/area-chart-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, hooks_1, UNSAFE_VisProgressiveLoader_1, UNSAFE_LineAreaChart_1, UNSAFE_VisStatusMessage_1, UNSAFE_Legend_1, UNSAFE_ChartWithLegend_1, useVisBusyState_1, ojvcomponent_1, useChartData_1, events_1, legendUtils_1, useVizCategories_1, useLegendPosition_1, lineAreaUtils_1, plotAreaUtils_1, axisUtils_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.AreaChart = void 0;
@@ -7,14 +7,8 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
         position: 'auto'
     }, ...props }) {
         const rootRef = (0, hooks_1.useRef)(null);
-        const addBusyState = (0, hooks_1.useCallback)((description) => {
-            return rootRef.current
-                ? Context.getContext(rootRef.current)
-                    .getBusyContext()
-                    .addBusyState({ description: `oj-c-area-chart: ${description}` })
-                : () => { };
-        }, []);
-        const { series, groups, getDataItem } = (0, useChartData_1.useChartData)(data, addBusyState, itemTemplate, seriesTemplate, groupTemplate, 'oj-c-area-chart-item', 'oj-c-area-chart-series', 'oj-c-area-chart-group', seriesComparator, groupComparator);
+        const addBusyState = (0, useVisBusyState_1.useVisBusyState)(rootRef, 'oj-c-area-chart');
+        const { series, groups, getDataItem, isLoading } = (0, useChartData_1.useChartData)(data, addBusyState, itemTemplate, seriesTemplate, groupTemplate, 'oj-c-area-chart-item', 'oj-c-area-chart-series', 'oj-c-area-chart-group', seriesComparator, groupComparator);
         const { majorTick: xMajorTick, ...xAxisRest } = xAxis ?? {};
         const { majorTick: yMajorTick, minorTick: yMinorTick, ...yAxisRest } = yAxis ?? {};
         const { itemDrillHandler, groupDrillHandler, seriesDrillHandler } = (0, events_1.getChartEventsHandler)(series, groups, drilling, props.onOjItemDrill, props.onOjGroupDrill, props.onOjSeriesDrill);
@@ -45,11 +39,11 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
                 updateHighlighted(detail.itemId);
             }
         };
-        const chart = series.length > 0 && groups.length > 0 ? ((0, jsx_runtime_1.jsx)(UNSAFE_LineAreaChart_1.LineAreaChart, { type: "area", width: "100%", height: "100%", series: series, groups: groups, getDataItem: getDataItem, onItemInput: onItemInput, drilling: drilling, onItemDrill: itemDrillHandler, onGroupDrill: groupDrillHandler, onSelectionChange: selectionChangeHandler, selectionMode: selectionMode, selectedIds: selectionMode === 'none' ? undefined : selection, orientation: orientation, xAxis: (0, axisUtils_1.getPreactAxisProps)({ ...xAxisRest, timeAxisType }), yAxis: (0, axisUtils_1.getPreactAxisProps)(yAxisRest), highlightedIds: highlightedIds.length === 0 ? undefined : highlightedIds, hiddenIds: hiddenIds, plotArea: (0, plotAreaUtils_1.getPlotArea)(plotArea, yMajorTick, yMinorTick, xMajorTick), hideAndShowBehavior: hideAndShowBehavior, hoverBehavior: hoverBehavior, isStacked: stack === 'on', valueFormats: (0, lineAreaUtils_1.transformValueFormats)(valueFormats), "aria-label": props['aria-label'], "aria-describedBy": props['aria-describedby'], "aria-labelledBy": props['aria-labelledby'] })) : undefined;
-        const chartLegend = isLegendRendered && legendData.length > 0 ? ((0, jsx_runtime_1.jsx)(UNSAFE_Legend_1.Legend, { items: legendData, orientation: legendPosition === 'start' || legendPosition === 'end' ? 'vertical' : 'horizontal', isReadOnly: !isLegendInteractive, highlightedIds: highlightedIds.length === 0 ? undefined : highlightedIds, hiddenIds: hiddenIds.length === 0 ? undefined : hiddenIds, symbolHeight: legend.symbolHeight, symbolWidth: legend.symbolWidth, onItemAction: legendItemActionHandler, onInput: legendItemInputHandler })) : undefined;
-        return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ref: rootRef, children: (0, jsx_runtime_1.jsx)(UNSAFE_ChartWithLegend_1.ChartWithLegend, { chart: chart, position: legendPosition, maxSize: legend.maxSize, size: legend.size, legend: chartLegend }) }));
+        const chart = series.length > 0 && groups.length > 0 ? ((0, jsx_runtime_1.jsx)(UNSAFE_LineAreaChart_1.LineAreaChart, { type: "area", width: "100%", height: "100%", series: series, groups: groups, getDataItem: getDataItem, onItemHover: onItemInput, onItemFocus: onItemInput, drilling: drilling, dragMode: props.dragMode, onItemDrill: itemDrillHandler, onGroupDrill: groupDrillHandler, onSelectionChange: selectionChangeHandler, selectionMode: selectionMode, selectedIds: selectionMode === 'none' ? undefined : selection, orientation: orientation, xAxis: (0, axisUtils_1.getPreactAxisProps)({ ...xAxisRest, timeAxisType }), yAxis: (0, axisUtils_1.getPreactAxisProps)(yAxisRest), highlightedIds: highlightedIds.length === 0 ? undefined : highlightedIds, hiddenIds: hiddenIds, plotArea: (0, plotAreaUtils_1.getPlotArea)(plotArea, yMajorTick, yMinorTick, xMajorTick), hideAndShowBehavior: hideAndShowBehavior, hoverBehavior: hoverBehavior, isStacked: stack === 'on', valueFormats: (0, lineAreaUtils_1.transformValueFormats)(valueFormats), "aria-label": props['aria-label'], "aria-describedBy": props['aria-describedby'], "aria-labelledBy": props['aria-labelledby'] })) : (!isLoading && ((0, jsx_runtime_1.jsx)(UNSAFE_VisStatusMessage_1.VisNoData, { "aria-label": props['aria-label'], "aria-describedby": props['aria-describedby'], "aria-labelledby": props['aria-labelledby'] })));
+        const chartLegend = isLegendRendered && legendData.length > 0 ? ((0, jsx_runtime_1.jsx)(UNSAFE_Legend_1.Legend, { items: legendData, orientation: legendPosition === 'start' || legendPosition === 'end' ? 'vertical' : 'horizontal', isReadOnly: !isLegendInteractive, highlightedIds: highlightedIds.length === 0 ? undefined : highlightedIds, hiddenIds: hiddenIds.length === 0 ? undefined : hiddenIds, symbolHeight: legend.symbolHeight, symbolWidth: legend.symbolWidth, onItemAction: legendItemActionHandler, onItemHover: legendItemInputHandler, onItemFocus: legendItemInputHandler })) : undefined;
+        return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ref: rootRef, children: (0, jsx_runtime_1.jsx)(UNSAFE_VisProgressiveLoader_1.VisProgressiveLoader, { isLoading: isLoading, type: "area", "aria-label": props['aria-label'], "aria-describedBy": props['aria-describedby'], "aria-labelledBy": props['aria-labelledby'], children: (0, jsx_runtime_1.jsx)(UNSAFE_ChartWithLegend_1.ChartWithLegend, { chart: chart, position: legendPosition, maxSize: legend.maxSize, size: legend.size, legend: chartLegend }) }) }));
     }
-    exports.AreaChart = (0, ojvcomponent_1.registerCustomElement)('oj-c-area-chart', AreaChartComp, "AreaChart", { "properties": { "data": { "type": "DataProvider|null" }, "seriesComparator": { "type": "function" }, "groupComparator": { "type": "function" }, "stack": { "type": "string", "enumValues": ["off", "on"] }, "drilling": { "type": "string", "enumValues": ["off", "on"] }, "orientation": { "type": "string", "enumValues": ["horizontal", "vertical"] }, "timeAxisType": { "type": "string", "enumValues": ["enabled", "mixedFrequency", "skipGaps"] }, "yAxis": { "type": "object", "properties": { "dataMax": { "type": "number" }, "dataMin": { "type": "number" }, "max": { "type": "number" }, "min": { "type": "number" }, "majorTick": { "type": "object", "properties": { "lineColor": { "type": "string" }, "lineStyle": { "type": "string", "enumValues": ["dashed", "dotted", "solid"] }, "lineWidth": { "type": "number" }, "rendered": { "type": "string", "enumValues": ["auto", "off", "on"] } } }, "minorTick": { "type": "object", "properties": { "lineColor": { "type": "string" }, "lineStyle": { "type": "string", "enumValues": ["dashed", "dotted", "solid"] }, "lineWidth": { "type": "number" }, "rendered": { "type": "string", "enumValues": ["auto", "off", "on"] } } }, "tickLabel": { "type": "object", "properties": { "converter": { "type": "object" }, "rendered": { "type": "string", "enumValues": ["off", "on"] }, "style": { "type": "object" } } }, "viewportMin": { "type": "number" }, "viewportMax": { "type": "number" }, "step": { "type": "number" }, "size": { "type": "number" }, "scale": { "type": "string", "enumValues": ["linear", "log"] }, "title": { "type": "string" }, "titleStyle": { "type": "object" } } }, "xAxis": { "type": "object", "properties": { "majorTick": { "type": "object", "properties": { "lineColor": { "type": "string" }, "lineStyle": { "type": "string", "enumValues": ["dashed", "dotted", "solid"] }, "lineWidth": { "type": "number" }, "rendered": { "type": "string", "enumValues": ["auto", "off", "on"] } } }, "minorTick": { "type": "object", "properties": { "lineColor": { "type": "string" }, "lineStyle": { "type": "string", "enumValues": ["dashed", "dotted", "solid"] }, "lineWidth": { "type": "number" }, "rendered": { "type": "string", "enumValues": ["auto", "off", "on"] } } }, "tickLabel": { "type": "object", "properties": { "converter": { "type": "object|" }, "rendered": { "type": "string", "enumValues": ["off", "on"] }, "style": { "type": "object" } } }, "viewportMin": { "type": "number" }, "viewportMax": { "type": "number" }, "step": { "type": "number" }, "size": { "type": "number" }, "scale": { "type": "string", "enumValues": ["linear", "log"] }, "title": { "type": "string" }, "titleStyle": { "type": "object" } } }, "plotArea": { "type": "object", "properties": { "backgroundColor": { "type": "string" } } }, "zoomAndScroll": { "type": "string", "enumValues": ["off", "live"] }, "valueFormats": { "type": "object", "properties": { "group": { "type": "object", "properties": { "tooltipLabel": { "type": "string" }, "tooltipDisplay": { "type": "string", "enumValues": ["auto", "off"] } } }, "series": { "type": "object", "properties": { "tooltipLabel": { "type": "string" }, "tooltipDisplay": { "type": "string", "enumValues": ["auto", "off"] } } }, "value": { "type": "object", "properties": { "converter": { "type": "object" }, "tooltipLabel": { "type": "string" }, "tooltipDisplay": { "type": "string", "enumValues": ["auto", "off"] } } } } }, "selectionMode": { "type": "string", "enumValues": ["none", "multiple", "single"] }, "selection": { "type": "Array<any>", "writeback": true }, "hiddenCategories": { "type": "Array<string>", "writeback": true }, "highlightedCategories": { "type": "Array<string>", "writeback": true }, "hideAndShowBehavior": { "type": "string", "enumValues": ["none", "withoutRescale", "withRescale"] }, "hoverBehavior": { "type": "string", "enumValues": ["none", "dim"] }, "highlightMatch": { "type": "string", "enumValues": ["all", "any"] }, "legend": { "type": "object", "properties": { "position": { "type": "string", "enumValues": ["auto", "end", "start", "top", "bottom"] }, "rendered": { "type": "string", "enumValues": ["auto", "off", "on"] }, "maxSize": { "type": "number|string" }, "size": { "type": "number|string" }, "symbolHeight": { "type": "number" }, "symbolWidth": { "type": "number" } } } }, "slots": { "itemTemplate": { "data": {} }, "seriesTemplate": { "data": {} }, "groupTemplate": { "data": {} } }, "events": { "ojViewportChange": {}, "ojItemDrill": {}, "ojGroupDrill": {}, "ojSeriesDrill": {} }, "extension": { "_WRITEBACK_PROPS": ["selection", "hiddenCategories", "highlightedCategories"], "_READ_ONLY_PROPS": [], "_OBSERVED_GLOBAL_PROPS": ["aria-label", "aria-describedby", "aria-labelledby"] } }, { "hideAndShowBehavior": "none", "orientation": "vertical", "hoverBehavior": "none", "drilling": "off", "hiddenCategories": [], "highlightedCategories": [], "highlightMatch": "any", "selection": [], "selectionMode": "none", "stack": "off", "legend": { "rendered": "on", "position": "auto" } }, {
+    exports.AreaChart = (0, ojvcomponent_1.registerCustomElement)('oj-c-area-chart', AreaChartComp, "AreaChart", { "properties": { "data": { "type": "DataProvider|null" }, "seriesComparator": { "type": "function" }, "groupComparator": { "type": "function" }, "stack": { "type": "string", "enumValues": ["off", "on"] }, "drilling": { "type": "string", "enumValues": ["off", "on"] }, "orientation": { "type": "string", "enumValues": ["horizontal", "vertical"] }, "timeAxisType": { "type": "string", "enumValues": ["enabled", "mixedFrequency", "skipGaps"] }, "yAxis": { "type": "object", "properties": { "dataMax": { "type": "number" }, "dataMin": { "type": "number" }, "max": { "type": "number" }, "min": { "type": "number" }, "majorTick": { "type": "object", "properties": { "lineColor": { "type": "string" }, "lineStyle": { "type": "string", "enumValues": ["dashed", "solid", "dotted"] }, "lineWidth": { "type": "number" }, "rendered": { "type": "string", "enumValues": ["auto", "off", "on"] } } }, "minorTick": { "type": "object", "properties": { "lineColor": { "type": "string" }, "lineStyle": { "type": "string", "enumValues": ["dashed", "solid", "dotted"] }, "lineWidth": { "type": "number" }, "rendered": { "type": "string", "enumValues": ["auto", "off", "on"] } } }, "tickLabel": { "type": "object", "properties": { "converter": { "type": "object" }, "rendered": { "type": "string", "enumValues": ["off", "on"] }, "style": { "type": "object" } } }, "viewportMin": { "type": "number" }, "viewportMax": { "type": "number" }, "step": { "type": "number" }, "size": { "type": "number" }, "scale": { "type": "string", "enumValues": ["linear", "log"] }, "title": { "type": "string" }, "titleStyle": { "type": "object" } } }, "xAxis": { "type": "object", "properties": { "majorTick": { "type": "object", "properties": { "lineColor": { "type": "string" }, "lineStyle": { "type": "string", "enumValues": ["dashed", "solid", "dotted"] }, "lineWidth": { "type": "number" }, "rendered": { "type": "string", "enumValues": ["auto", "off", "on"] } } }, "minorTick": { "type": "object", "properties": { "lineColor": { "type": "string" }, "lineStyle": { "type": "string", "enumValues": ["dashed", "solid", "dotted"] }, "lineWidth": { "type": "number" }, "rendered": { "type": "string", "enumValues": ["auto", "off", "on"] } } }, "tickLabel": { "type": "object", "properties": { "converter": { "type": "object|" }, "rendered": { "type": "string", "enumValues": ["off", "on"] }, "rotation": { "type": "string", "enumValues": ["auto", "none"] }, "style": { "type": "object" } } }, "viewportMin": { "type": "number" }, "viewportMax": { "type": "number" }, "step": { "type": "number" }, "size": { "type": "number" }, "scale": { "type": "string", "enumValues": ["linear", "log"] }, "title": { "type": "string" }, "titleStyle": { "type": "object" } } }, "plotArea": { "type": "object", "properties": { "backgroundColor": { "type": "string" } } }, "zoomAndScroll": { "type": "string", "enumValues": ["off", "live"] }, "valueFormats": { "type": "object", "properties": { "group": { "type": "object", "properties": { "tooltipLabel": { "type": "string" }, "tooltipDisplay": { "type": "string", "enumValues": ["auto", "off"] } } }, "series": { "type": "object", "properties": { "tooltipLabel": { "type": "string" }, "tooltipDisplay": { "type": "string", "enumValues": ["auto", "off"] } } }, "value": { "type": "object", "properties": { "converter": { "type": "object" }, "tooltipLabel": { "type": "string" }, "tooltipDisplay": { "type": "string", "enumValues": ["auto", "off"] } } } } }, "selectionMode": { "type": "string", "enumValues": ["none", "multiple", "single"] }, "selection": { "type": "Array<any>", "writeback": true }, "hiddenCategories": { "type": "Array<string>", "writeback": true }, "dragMode": { "type": "string", "enumValues": ["pan", "select", "off", "user", "zoom"] }, "highlightedCategories": { "type": "Array<string>", "writeback": true }, "hideAndShowBehavior": { "type": "string", "enumValues": ["none", "withoutRescale", "withRescale"] }, "hoverBehavior": { "type": "string", "enumValues": ["none", "dim"] }, "highlightMatch": { "type": "string", "enumValues": ["all", "any"] }, "legend": { "type": "object", "properties": { "position": { "type": "string", "enumValues": ["auto", "end", "start", "top", "bottom"] }, "rendered": { "type": "string", "enumValues": ["auto", "off", "on"] }, "maxSize": { "type": "number|string" }, "size": { "type": "number|string" }, "symbolHeight": { "type": "number" }, "symbolWidth": { "type": "number" } } } }, "slots": { "itemTemplate": { "data": {} }, "seriesTemplate": { "data": {} }, "groupTemplate": { "data": {} } }, "events": { "ojViewportChange": {}, "ojItemDrill": {}, "ojGroupDrill": {}, "ojSeriesDrill": {} }, "extension": { "_WRITEBACK_PROPS": ["selection", "hiddenCategories", "highlightedCategories"], "_READ_ONLY_PROPS": [], "_OBSERVED_GLOBAL_PROPS": ["aria-label", "aria-describedby", "aria-labelledby"] } }, { "hideAndShowBehavior": "none", "orientation": "vertical", "hoverBehavior": "none", "drilling": "off", "hiddenCategories": [], "highlightedCategories": [], "highlightMatch": "any", "selection": [], "selectionMode": "none", "stack": "off", "legend": { "rendered": "on", "position": "auto" } }, {
         '@oracle/oraclejet-preact': translationBundle_1.default
     });
 });

package/oj-c/area-chart/component.json

@@ -1,7 +1,7 @@
 {
   "name": "area-chart",
-  "version": "16.1.4",
-  "jetVersion": "^16.1.4",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -13,6 +13,12 @@
   "displayName": "Area Chart",
   "main": "oj-c/area-chart",
   "help": "oj-c.AreaChart.html",
+  "status": [
+    {
+      "type": "candidate",
+      "since": "17.0.0"
+    }
+  ],
   "extension": {
     "catalog": {
       "category": "Visualizations"
@@ -27,15 +33,16 @@
       "uxSpecs": [
         "area-chart"
       ]
+    },
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/AreaChartWebElement.html"
     }
   },
   "propertyLayout": [
     {
       "propertyGroup": "common",
       "items": [
-        "type",
         "orientation",
-        "legend.title",
         "legend.position",
         "legend.rendered",
         "stack",
@@ -202,8 +209,8 @@
               },
               "enumValues": [
                 "dashed",
-                "dotted",
-                "solid"
+                "solid",
+                "dotted"
               ]
             },
             "lineWidth": {
@@ -268,8 +275,8 @@
               },
               "enumValues": [
                 "dashed",
-                "dotted",
-                "solid"
+                "solid",
+                "dotted"
               ]
             },
             "lineWidth": {
@@ -427,8 +434,8 @@
               },
               "enumValues": [
                 "dashed",
-                "dotted",
-                "solid"
+                "solid",
+                "dotted"
               ]
             },
             "lineWidth": {
@@ -493,8 +500,8 @@
               },
               "enumValues": [
                 "dashed",
-                "dotted",
-                "solid"
+                "solid",
+                "dotted"
               ]
             },
             "lineWidth": {
@@ -557,6 +564,25 @@
                 "on"
               ]
             },
+            "rotation": {
+              "type": "string",
+              "description": "Whether the ticklabels can be rotated.",
+              "displayName": "Rotation",
+              "propertyEditorValues": {
+                "none": {
+                  "description": "The axis labels will not be rotated.",
+                  "displayName": "On"
+                },
+                "off": {
+                  "description": "The axis labels might be rotated in order to fit more labels.",
+                  "displayName": "auto"
+                }
+              },
+              "enumValues": [
+                "auto",
+                "none"
+              ]
+            },
             "style": {
               "type": "object",
               "description": "The style of the tick labels.",
@@ -773,6 +799,19 @@
       "writeback": true,
       "value": []
     },
+    "dragMode": {
+      "type": "string",
+      "description": "The action that is performed when a drag occurs on the chart.",
+      "displayName": "Drag Mode",
+      "help": "#dragMode",
+      "enumValues": [
+        "pan",
+        "select",
+        "off",
+        "user",
+        "zoom"
+      ]
+    },
     "highlightedCategories": {
       "type": "Array<string>",
       "description": "An array of category string used for highlighting.",

package/oj-c/area-chart-group/component.json

@@ -1,7 +1,7 @@
 {
   "name": "area-chart-group",
-  "version": "16.1.4",
-  "jetVersion": "^16.1.4",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -14,6 +14,12 @@
   "displayName": "AreaChartGroup",
   "main": "oj-c/area-chart-group",
   "help": "oj-c.AreaChartGroup.html",
+  "status": [
+    {
+      "type": "candidate",
+      "since": "17.0.0"
+    }
+  ],
   "extension": {
     "catalog": {
       "category": "Visualizations"

package/oj-c/area-chart-group.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "./area-chart-group/area-chart-group"], function (require, exports, area_chart_group_1) {
+define(["require", "exports", "oj-c/area-chart-group/area-chart-group"], function (require, exports, area_chart_group_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.AreaChartGroup = void 0;

package/oj-c/area-chart-item/component.json

@@ -1,7 +1,7 @@
 {
   "name": "area-chart-item",
-  "version": "16.1.4",
-  "jetVersion": "^16.1.4",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -14,6 +14,12 @@
   "displayName": "AreaChartItem",
   "main": "oj-c/area-chart-item",
   "help": "oj-c.AreaChartItem.html",
+  "status": [
+    {
+      "type": "candidate",
+      "since": "17.0.0"
+    }
+  ],
   "extension": {
     "catalog": {
       "category": "Visualizations"

package/oj-c/area-chart-item.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "./area-chart-item/area-chart-item"], function (require, exports, area_chart_item_1) {
+define(["require", "exports", "oj-c/area-chart-item/area-chart-item"], function (require, exports, area_chart_item_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.AreaChartItem = void 0;

package/oj-c/area-chart-series/component.json

@@ -1,7 +1,7 @@
 {
   "name": "area-chart-series",
-  "version": "16.1.4",
-  "jetVersion": "^16.1.4",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -14,6 +14,12 @@
   "displayName": "AreaChartSeries",
   "main": "oj-c/area-chart-series",
   "help": "oj-c.AreaChartSeries.html",
+  "status": [
+    {
+      "type": "candidate",
+      "since": "17.0.0"
+    }
+  ],
   "extension": {
     "catalog": {
       "category": "Visualizations"

package/oj-c/area-chart-series.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "./area-chart-series/area-chart-series"], function (require, exports, area_chart_series_1) {
+define(["require", "exports", "oj-c/area-chart-series/area-chart-series"], function (require, exports, area_chart_series_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.AreaChartSeries = void 0;

package/oj-c/area-chart.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "./area-chart/area-chart"], function (require, exports, area_chart_1) {
+define(["require", "exports", "oj-c/area-chart/area-chart"], function (require, exports, area_chart_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.AreaChart = void 0;

package/oj-c/avatar/avatar-styles.css

@@ -7,4 +7,5 @@ oj-c-avatar[hidden] {
 }
 oj-c-avatar {
   display: inline-block;
+  font-size: 0;
 }

package/oj-c/avatar/component.json

@@ -1,7 +1,7 @@
 {
   "name": "avatar",
-  "version": "16.1.4",
-  "jetVersion": "^16.1.4",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -34,6 +34,9 @@
       "uxSpecs": [
         "avatar"
       ]
+    },
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/AvatarWebElement.html"
     }
   },
   "propertyLayout": [

package/oj-c/avatar.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "./avatar/avatar"], function (require, exports, avatar_1) {
+define(["require", "exports", "oj-c/avatar/avatar"], function (require, exports, avatar_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Avatar = void 0;

package/oj-c/button/button.js

@@ -4,52 +4,32 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
-define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "@oracle/oraclejet-preact/UNSAFE_Button", "@oracle/oraclejet-preact/UNSAFE_IconButton", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "preact", "preact/hooks", "preact/compat", "@oracle/oraclejet-preact/hooks/UNSAFE_useTooltip", "ojs/ojvcomponent-binding", "ojs/ojvcomponent", "css!oj-c/button/button-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, UNSAFE_Button_1, UNSAFE_IconButton_1, UNSAFE_useTabbableMode_1, preact_1, hooks_1, compat_1, UNSAFE_useTooltip_1, ojvcomponent_binding_1, ojvcomponent_1) {
+define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "ojs/ojvcomponent-binding", "ojs/ojvcomponent", "@oracle/oraclejet-preact/UNSAFE_Button", "@oracle/oraclejet-preact/UNSAFE_IconButton", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "@oracle/oraclejet-preact/hooks/UNSAFE_useTooltip", "@oracle/oraclejet-preact/utils/UNSAFE_mergeProps", "preact", "preact/hooks", "preact/compat", "css!oj-c/button/button-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, ojvcomponent_binding_1, ojvcomponent_1, UNSAFE_Button_1, UNSAFE_IconButton_1, UNSAFE_useTabbableMode_1, UNSAFE_useTooltip_1, UNSAFE_mergeProps_1, preact_1, hooks_1, compat_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Button = void 0;
-    const FunctionalButton = (0, compat_1.forwardRef)((props, ref) => {
-        const buttonRef = (0, hooks_1.useRef)();
-        (0, hooks_1.useImperativeHandle)(ref, () => ({
-            focus: () => buttonRef.current?.focus(),
-            blur: () => buttonRef.current?.blur()
-        }), []);
-        return (0, jsx_runtime_1.jsx)(UNSAFE_Button_1.Button, { ref: buttonRef, ...props });
-    });
-    const FunctionalIconButton = (0, compat_1.forwardRef)((props, ref) => {
-        const iconButtonRef = (0, hooks_1.useRef)();
-        (0, hooks_1.useImperativeHandle)(ref, () => ({
-            focus: () => iconButtonRef.current?.focus(),
-            blur: () => iconButtonRef.current?.blur()
-        }), []);
-        return (0, jsx_runtime_1.jsx)(UNSAFE_IconButton_1.IconButton, { ref: iconButtonRef, ...props });
-    });
     let Button = class Button extends preact_1.Component {
         constructor() {
             super(...arguments);
             this.buttonRef = (0, preact_1.createRef)();
         }
         render(props) {
-            const widthSize = { width: props.edge === 'bottom' ? '100%' : props.width };
-            const { chroming: variant, disabled: isDisabled, onOjAction: onAction, 'aria-label': accessibleLabel, 'aria-describedby': ariaDescribedBy, width: throwAwayWidth, display: display, label: label, ...otherProps } = { ...props };
-            const { tooltipContent, tooltipProps } = (0, UNSAFE_useTooltip_1.useTooltip)({
-                text: props.tooltip,
-                isDisabled
-            });
-            const widthProps = props.width || props.edge !== 'none' ? { style: widthSize } : {};
-            if (props.display != 'icons' ||
-                (props.startIcon && props.endIcon && props.display == 'icons') ||
-                (!props.startIcon && !props.endIcon && props.display == 'icons')) {
-                return ((0, jsx_runtime_1.jsxs)(ojvcomponent_1.Root, { ...widthProps, children: [(0, jsx_runtime_1.jsx)(FunctionalButton, { ref: this.buttonRef, type: "submit", variant: variant, isDisabled: isDisabled, width: '100%', onAction: onAction, "aria-label": accessibleLabel, "aria-describedby": ariaDescribedBy, startIcon: props.startIcon, endIcon: props.endIcon, size: props.size, label: props.display == 'icons'
-                                ? !props.startIcon && !props.endIcon
-                                    ? props.label
-                                    : ''
-                                : props.label, display: props.display != 'icons' ? props.display : 'all', ...tooltipProps, ...otherProps }), tooltipContent] }));
+            const { chroming: variant, disabled: isDisabled, onOjAction: onAction, 'aria-label': accessibleLabel, 'aria-describedby': ariaDescribedBy, display, startIcon, endIcon, size, edge, tooltip, width, label, ...otherProps } = { ...props };
+            const widthSize = { width: edge === 'bottom' ? '100%' : width };
+            const widthProps = width || edge !== 'none' ? { style: widthSize } : {};
+            const ariaProps = { 'aria-describedby': ariaDescribedBy, 'aria-label': accessibleLabel };
+            if (display != 'icons' ||
+                (startIcon && endIcon && display == 'icons') ||
+                (!startIcon && !endIcon && display == 'icons')) {
+                return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ...widthProps, "aria-describedby": ariaProps['aria-describedby'], children: (0, jsx_runtime_1.jsx)(FunctionalButton, { ref: this.buttonRef, type: "submit", variant: variant, tooltip: tooltip, isDisabled: isDisabled, width: '100%', onAction: onAction, startIcon: startIcon, endIcon: endIcon, size: size, label: props.display == 'icons' ? (!startIcon && !endIcon ? label : '') : label, display: display != 'icons' ? display : 'all', ...ariaProps, ...otherProps }) }));
             }
             else {
-                return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ...widthProps, children: (0, jsx_runtime_1.jsx)(FunctionalIconButton, { width: '100%', ref: this.buttonRef, type: "submit", variant: variant, isDisabled: isDisabled, tooltip: props.tooltip && props.tooltip !== '' ? props.tooltip : props.label, onAction: onAction, "aria-label": accessibleLabel && accessibleLabel !== '' ? accessibleLabel : props.label, "aria-describedby": ariaDescribedBy, size: props.size, ...otherProps, children: props.startIcon ?? props.endIcon }) }));
+                return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ...widthProps, "aria-describedby": ariaDescribedBy, children: (0, jsx_runtime_1.jsx)(FunctionalIconButton, { width: '100%', ref: this.buttonRef, type: "submit", variant: variant, isDisabled: isDisabled, tooltip: tooltip && tooltip !== '' ? tooltip : label, onAction: onAction, "aria-label": accessibleLabel && accessibleLabel !== '' ? accessibleLabel : label, "aria-describedby": ariaDescribedBy, size: props.size, ...otherProps, children: startIcon ?? endIcon }) }));
             }
         }
+        click() {
+            this.buttonRef.current?.click();
+        }
         blur() {
             this.buttonRef.current?.blur();
         }
@@ -68,7 +48,7 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
         edge: 'none',
         tooltip: ''
     };
-    Button._metadata = { "properties": { "label": { "type": "string" }, "tooltip": { "type": "string" }, "disabled": { "type": "boolean" }, "width": { "type": "number|string" }, "display": { "type": "string", "enumValues": ["all", "label", "icons"] }, "size": { "type": "string", "enumValues": ["sm", "md", "lg"] }, "edge": { "type": "string", "enumValues": ["none", "bottom"] }, "chroming": { "type": "string", "enumValues": ["solid", "ghost", "borderless", "outlined", "callToAction", "danger"], "binding": { "consume": { "name": "containerChroming" } } } }, "slots": { "startIcon": {}, "endIcon": {} }, "events": { "ojAction": { "bubbles": true } }, "extension": { "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "aria-label"] }, "methods": { "blur": {}, "focus": {} } };
+    Button._metadata = { "properties": { "label": { "type": "string" }, "tooltip": { "type": "string" }, "disabled": { "type": "boolean" }, "width": { "type": "number|string" }, "display": { "type": "string", "enumValues": ["all", "label", "icons"] }, "size": { "type": "string", "enumValues": ["xs", "sm", "md", "lg"] }, "edge": { "type": "string", "enumValues": ["none", "bottom"] }, "chroming": { "type": "string", "enumValues": ["solid", "ghost", "borderless", "outlined", "callToAction", "danger"], "binding": { "consume": { "name": "containerChroming" } } } }, "slots": { "startIcon": {}, "endIcon": {} }, "events": { "ojAction": { "bubbles": true } }, "extension": { "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "aria-label"] }, "methods": { "click": {}, "blur": {}, "focus": {} } };
     Button._translationBundleMap = {
         '@oracle/oraclejet-preact': translationBundle_1.default
     };
@@ -76,4 +56,26 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
     exports.Button = Button = __decorate([
         (0, ojvcomponent_1.customElement)('oj-c-button')
     ], Button);
+    const FunctionalButton = (0, compat_1.forwardRef)((props, ref) => {
+        const buttonRef = (0, hooks_1.useRef)();
+        (0, hooks_1.useImperativeHandle)(ref, () => ({
+            focus: () => buttonRef.current?.focus(),
+            blur: () => buttonRef.current?.blur(),
+            click: () => buttonRef.current?.click()
+        }), []);
+        const { tooltipContent, tooltipProps } = (0, UNSAFE_useTooltip_1.useTooltip)({
+            text: props.tooltip,
+            isDisabled: props.isDisabled
+        });
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(UNSAFE_Button_1.Button, { ref: buttonRef, ...(0, UNSAFE_mergeProps_1.mergeProps)(props, tooltipProps) }), tooltipContent] }));
+    });
+    const FunctionalIconButton = (0, compat_1.forwardRef)((props, ref) => {
+        const iconButtonRef = (0, hooks_1.useRef)();
+        (0, hooks_1.useImperativeHandle)(ref, () => ({
+            focus: () => iconButtonRef.current?.focus(),
+            blur: () => iconButtonRef.current?.blur(),
+            click: () => iconButtonRef.current?.click()
+        }), []);
+        return (0, jsx_runtime_1.jsx)(UNSAFE_IconButton_1.IconButton, { ref: iconButtonRef, ...props });
+    });
 });