@kws3/ui 1.7.1 → 1.7.4

package/CHANGELOG.mdx

@@ -1,3 +1,17 @@
+## 1.7.4
+ - Update ApexCharts to version 3.33.2
+ - Added support for subscribing to chart events
+ - Added support for distributed bar charts using new `distributed` prop on `BarChart` component
+ - Added examples for leveraging advanced chart features
+ 
+## 1.7.3
+ - Fix docs for `Popover`
+ - Increase performance for `SlidingPane` by using ResizeObserver when available
+
+## 1.7.2
+ - `DatePicker` component: fix initialisation bug on mobile
+ - `Pagination` component: rename property `breakThreshold` -> `maxVisiblePages` plus bugfix and documentation update
+
 ## 1.7.1
  - `Skeleton` component: Illustrate in example the use of empty string for `color` prop.
  - `Pagination` component: Deprecate `meta` prop. And use separate props for `offset`, `limit`, `count` and `total` instead.
@@ -6,9 +20,8 @@
  - `Modal` component can now be opened and closed programatically via `open()` and `close()` methods.
  - Added linting rules for ESLint. And corrected all resulting issues.
 
-
 ## 1.7.0
-- Ensure uniform usage of $kws-theme-colors across all components, this means $kws-theme-colors can be independent of the global $colors SCSS variable.
+- Ensure uniform usage of `$kws-theme-colors` across all components, this means `$kws-theme-colors` can be independent of the global `$colors` SCSS variable.
 - `DataSearch` component: Expand filters to fill area when main search input is not present.
 - `DataSort` component: Increase click area for activating dropdown, and provide visual segementation between label and dropdown.
 - New `Skeleton` component.

package/charts/AreaChart.svelte

@@ -15,16 +15,60 @@ squeezed into small spaces, Default: `false`
   @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
 
 Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+  @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
+This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`
+  @method `getInstance()` - Returns the ApexCharts instance
+
+  ### Events
+  - `animationEnd` - All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events.
+  - `beforeMount`
+  - `mounted`
+  - `updated`
+  - `mouseMove`
+  - `mouseLeave`
+  - `click`
+  - `legendClick`
+  - `markerClick`
+  - `selection`
+  - `dataPointSelection`
+  - `dataPointMouseEnter`
+  - `dataPointMouseLeave`
+  - `beforeZoom`
+  - `beforeResetZoom`
+  - `zoomed`
+  - `scrolled`
+  - `brushScrolled`
 
 -->
+<!-- All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events. -->
 <Chart
+  bind:this={chart}
+  on:animationEnd
+  on:beforeMount
+  on:mounted
+  on:updated
+  on:mouseMove
+  on:mouseLeave
+  on:click
+  on:legendClick
+  on:markerClick
+  on:selection
+  on:dataPointSelection
+  on:dataPointMouseEnter
+  on:dataPointMouseLeave
+  on:beforeZoom
+  on:beforeResetZoom
+  on:zoomed
+  on:scrolled
+  on:brushScrolled
   class={__class}
   options={_options}
   series={_data}
   type="area"
   {height}
-  {width} />
+  {width}
+  {captured_events} />
 
 <script>
   import { Chart } from "@kws3/ui";
@@ -71,7 +115,12 @@ Send an array of colors to override the default colors, or do not send anything
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null;
+    colors = null,
+    /**
+     * String array of event names that will be captured and fired as svelte events.
+     * This is to prevent unnecessary event subscriptions.
+     */
+    captured_events = [];
 
   /**
    * CSS classes for container
@@ -79,6 +128,14 @@ Send an array of colors to override the default colors, or do not send anything
   let klass = "";
   export { klass as class };
 
+  let chart;
+  /**
+   * Returns the ApexCharts instance
+   */
+  export function getInstance() {
+    return chart.getInstance();
+  }
+
   $: __class =
     "kws-area-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
 

package/charts/BarChart.svelte

@@ -10,6 +10,7 @@
 These are charts with minimal UI and can be
 squeezed into small spaces, Default: `false`
   @param {boolean} [horizontal=false] - Whether the chart displays horizontal bars, Default: `false`
+  @param {boolean} [distributed=false] - Make bars discrete. Each value indicates one bar per series., Default: `false`
   @param {boolean} [stacked=false] - Whether the bars are stacked on top of each other, Default: `false`
   @param {boolean} [stacked_full_width=false] - When bars are stacked, should they span the full width/height of the chart, Default: `false`
   @param {object} [y_axis_options={}] - Y Axis options, see ApexCharts options for Y Axis, Default: `{}`
@@ -18,16 +19,60 @@ squeezed into small spaces, Default: `false`
   @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
 
 Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+  @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
+This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`
+  @method `getInstance()` - Returns the ApexCharts instance
+
+  ### Events
+  - `animationEnd` - All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events.
+  - `beforeMount`
+  - `mounted`
+  - `updated`
+  - `mouseMove`
+  - `mouseLeave`
+  - `click`
+  - `legendClick`
+  - `markerClick`
+  - `selection`
+  - `dataPointSelection`
+  - `dataPointMouseEnter`
+  - `dataPointMouseLeave`
+  - `beforeZoom`
+  - `beforeResetZoom`
+  - `zoomed`
+  - `scrolled`
+  - `brushScrolled`
 
 -->
+<!-- All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events. -->
 <Chart
+  bind:this={chart}
+  on:animationEnd
+  on:beforeMount
+  on:mounted
+  on:updated
+  on:mouseMove
+  on:mouseLeave
+  on:click
+  on:legendClick
+  on:markerClick
+  on:selection
+  on:dataPointSelection
+  on:dataPointMouseEnter
+  on:dataPointMouseLeave
+  on:beforeZoom
+  on:beforeResetZoom
+  on:zoomed
+  on:scrolled
+  on:brushScrolled
   class={__class}
   options={_options}
   series={_data}
   type="bar"
   {height}
-  {width} />
+  {width}
+  {captured_events} />
 
 <script>
   import { Chart } from "@kws3/ui";
@@ -60,6 +105,10 @@ Send an array of colors to override the default colors, or do not send anything
      * Whether the chart displays horizontal bars
      */
     horizontal = false,
+    /**
+     * Make bars discrete. Each value indicates one bar per series.
+     */
+    distributed = false,
     /**
      * Whether the bars are stacked on top of each other
      */
@@ -86,7 +135,12 @@ Send an array of colors to override the default colors, or do not send anything
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null;
+    colors = null,
+    /**
+     * String array of event names that will be captured and fired as svelte events.
+     * This is to prevent unnecessary event subscriptions.
+     */
+    captured_events = [];
 
   /**
    * CSS classes for container
@@ -94,6 +148,14 @@ Send an array of colors to override the default colors, or do not send anything
   let klass = "";
   export { klass as class };
 
+  let chart;
+  /**
+   * Returns the ApexCharts instance
+   */
+  export function getInstance() {
+    return chart.getInstance();
+  }
+
   $: __class =
     "kws-bar-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
 
@@ -113,6 +175,7 @@ Send an array of colors to override the default colors, or do not send anything
       yAxis,
       sparklines,
       horizontal,
+      distributed,
       stacked,
       stacked_full_width
     ),
@@ -120,7 +183,7 @@ Send an array of colors to override the default colors, or do not send anything
   );
 
   const normaliseAll = () => {
-    if (data.length !== sets.length) {
+    if (data.length !== sets.length && !distributed) {
       console.warn("Data and sets lengths do not match");
     }
     normaliseSets();

package/charts/Chart.svelte

@@ -7,7 +7,10 @@
   @param {array} [series=[]] - Series data, Default: `[]`
   @param {string} [width="100%"] - Chart width, Default: `"100%"`
   @param {string} [height="auto"] - Chart height, Default: `"auto"`
+  @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
+This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`
+  @method `getInstance()` - Returns the ApexCharts instance
 
 -->
 <div class="kws-chart {klass}" bind:this={canvas} />
@@ -17,6 +20,14 @@
   import ApexCharts from "apexcharts/dist/apexcharts.esm";
   import { merge } from "./utils";
 
+  //some functions such as brush charts
+  //require ApexCharts to be globally available
+  if (window) {
+    if (!window.ApexCharts) {
+      window.ApexCharts = ApexCharts;
+    }
+  }
+
   const fire = createEventDispatcher();
   let canvas, chart;
 
@@ -39,7 +50,12 @@
     /**
      * Chart height
      */
-    height = "auto";
+    height = "auto",
+    /**
+     * String array of event names that will be captured and fired as svelte events.
+     * This is to prevent unnecessary event subscriptions.
+     */
+    captured_events = [];
 
   /**
    * CSS classes for container
@@ -47,6 +63,34 @@
   let klass = "";
   export { klass as class };
 
+  /**
+   * Returns the ApexCharts instance
+   */
+  export function getInstance() {
+    return chart;
+  }
+
+  const supported_events = [
+    "animationEnd",
+    "beforeMount",
+    "mounted",
+    "updated",
+    "mouseMove",
+    "mouseLeave",
+    "click",
+    "legendClick",
+    "markerClick",
+    "selection",
+    "dataPointSelection",
+    "dataPointMouseEnter",
+    "dataPointMouseLeave",
+    "beforeZoom",
+    "beforeResetZoom",
+    "zoomed",
+    "scrolled",
+    "brushScrolled",
+  ];
+
   onMount(() => {
     init();
     return () => {
@@ -54,20 +98,23 @@
     };
   });
 
+  let Events;
+
   $: width, height, type, refresh();
   $: series, seriesChanged();
-  $: options, optionsChanged();
+  $: options, Events, optionsChanged();
+  $: captured_events, patchEvents();
 
-  const patchEvents = (evs) => {
+  const patchEvents = () => {
     const events = {};
-    if (typeof evs != "undefined") {
-      for (var type in evs) {
+    supported_events.forEach((type) => {
+      if (captured_events && captured_events.indexOf(type) > -1) {
         events[type] = (a, b, c) => {
           fire(type, [a, b, c]);
         };
       }
-    }
-    return events;
+    });
+    Events = events;
   };
 
   const init = () => {
@@ -78,22 +125,20 @@
         type,
         height,
         width,
+        events: Events,
       },
       type,
       series,
     };
 
-    var events = {};
-
+    //replace any user sent events with patched events
     if (typeof options.chart.events != "undefined") {
-      events = patchEvents(options.chart.events);
       options.chart.events = {};
     }
 
     const config = merge(options, newOptions);
 
     if (canvas) {
-      config.chart.events = events;
       chart = new ApexCharts(canvas, config);
       chart.render();
     }
@@ -111,12 +156,11 @@
   const optionsChanged = () => {
     if (chart) {
       if (typeof options.chart.events != "undefined") {
-        options.chart.events = patchEvents(options.chart.events);
+        options.chart.events = Events;
       }
       chart.updateOptions(options, true);
     } else {
       init();
     }
-    chart ? chart.updateOptions(options, true) : init();
   };
 </script>

package/charts/DonutChart.svelte

@@ -13,16 +13,60 @@ squeezed into small spaces, Default: `false`
   @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
 
 Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+  @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
+This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`
+  @method `getInstance()` - Returns the ApexCharts instance
+
+  ### Events
+  - `animationEnd` - All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events.
+  - `beforeMount`
+  - `mounted`
+  - `updated`
+  - `mouseMove`
+  - `mouseLeave`
+  - `click`
+  - `legendClick`
+  - `markerClick`
+  - `selection`
+  - `dataPointSelection`
+  - `dataPointMouseEnter`
+  - `dataPointMouseLeave`
+  - `beforeZoom`
+  - `beforeResetZoom`
+  - `zoomed`
+  - `scrolled`
+  - `brushScrolled`
 
 -->
+<!-- All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events. -->
 <Chart
+  bind:this={chart}
+  on:animationEnd
+  on:beforeMount
+  on:mounted
+  on:updated
+  on:mouseMove
+  on:mouseLeave
+  on:click
+  on:legendClick
+  on:markerClick
+  on:selection
+  on:dataPointSelection
+  on:dataPointMouseEnter
+  on:dataPointMouseLeave
+  on:beforeZoom
+  on:beforeResetZoom
+  on:zoomed
+  on:scrolled
+  on:brushScrolled
   class={__class}
   options={_options}
   series={_data}
   type="donut"
   {height}
-  {width} />
+  {width}
+  {captured_events} />
 
 <script>
   import { Chart } from "@kws3/ui";
@@ -61,13 +105,27 @@ Send an array of colors to override the default colors, or do not send anything
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null;
+    colors = null,
+    /**
+     * String array of event names that will be captured and fired as svelte events.
+     * This is to prevent unnecessary event subscriptions.
+     */
+    captured_events = [];
+
   /**
    * CSS classes for container
    */
   let klass = "";
   export { klass as class };
 
+  let chart;
+  /**
+   * Returns the ApexCharts instance
+   */
+  export function getInstance() {
+    return chart.getInstance();
+  }
+
   $: __class =
     "kws-donut-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
 

package/charts/LineChart.svelte

@@ -15,16 +15,60 @@ squeezed into small spaces, Default: `false`
   @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
 
 Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+  @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
+This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`
+  @method `getInstance()` - Returns the ApexCharts instance
+
+  ### Events
+  - `animationEnd` - All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events.
+  - `beforeMount`
+  - `mounted`
+  - `updated`
+  - `mouseMove`
+  - `mouseLeave`
+  - `click`
+  - `legendClick`
+  - `markerClick`
+  - `selection`
+  - `dataPointSelection`
+  - `dataPointMouseEnter`
+  - `dataPointMouseLeave`
+  - `beforeZoom`
+  - `beforeResetZoom`
+  - `zoomed`
+  - `scrolled`
+  - `brushScrolled`
 
 -->
+<!-- All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events. -->
 <Chart
+  bind:this={chart}
+  on:animationEnd
+  on:beforeMount
+  on:mounted
+  on:updated
+  on:mouseMove
+  on:mouseLeave
+  on:click
+  on:legendClick
+  on:markerClick
+  on:selection
+  on:dataPointSelection
+  on:dataPointMouseEnter
+  on:dataPointMouseLeave
+  on:beforeZoom
+  on:beforeResetZoom
+  on:zoomed
+  on:scrolled
+  on:brushScrolled
   class={__class}
   options={_options}
   series={_data}
   type="line"
   {height}
-  {width} />
+  {width}
+  {captured_events} />
 
 <script>
   import { Chart } from "@kws3/ui";
@@ -71,7 +115,12 @@ Send an array of colors to override the default colors, or do not send anything
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null;
+    colors = null,
+    /**
+     * String array of event names that will be captured and fired as svelte events.
+     * This is to prevent unnecessary event subscriptions.
+     */
+    captured_events = [];
 
   /**
    * CSS classes for container
@@ -79,6 +128,14 @@ Send an array of colors to override the default colors, or do not send anything
   let klass = "";
   export { klass as class };
 
+  let chart;
+  /**
+   * Returns the ApexCharts instance
+   */
+  export function getInstance() {
+    return chart.getInstance();
+  }
+
   $: __class =
     "kws-line-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
 

package/charts/MixedChart.svelte

@@ -16,16 +16,60 @@ squeezed into small spaces, Default: `false`
   @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
 
 Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+  @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
+This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`
+  @method `getInstance()` - Returns the ApexCharts instance
+
+  ### Events
+  - `animationEnd` - All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events.
+  - `beforeMount`
+  - `mounted`
+  - `updated`
+  - `mouseMove`
+  - `mouseLeave`
+  - `click`
+  - `legendClick`
+  - `markerClick`
+  - `selection`
+  - `dataPointSelection`
+  - `dataPointMouseEnter`
+  - `dataPointMouseLeave`
+  - `beforeZoom`
+  - `beforeResetZoom`
+  - `zoomed`
+  - `scrolled`
+  - `brushScrolled`
 
 -->
+<!-- All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events. -->
 <Chart
+  bind:this={chart}
+  on:animationEnd
+  on:beforeMount
+  on:mounted
+  on:updated
+  on:mouseMove
+  on:mouseLeave
+  on:click
+  on:legendClick
+  on:markerClick
+  on:selection
+  on:dataPointSelection
+  on:dataPointMouseEnter
+  on:dataPointMouseLeave
+  on:beforeZoom
+  on:beforeResetZoom
+  on:zoomed
+  on:scrolled
+  on:brushScrolled
   class={__class}
   options={_options}
   series={_data}
   type="bar"
   {height}
-  {width} />
+  {width}
+  {captured_events} />
 
 <script>
   import { Chart } from "@kws3/ui";
@@ -76,7 +120,12 @@ Send an array of colors to override the default colors, or do not send anything
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null;
+    colors = null,
+    /**
+     * String array of event names that will be captured and fired as svelte events.
+     * This is to prevent unnecessary event subscriptions.
+     */
+    captured_events = [];
 
   /**
    * CSS classes for container
@@ -84,6 +133,14 @@ Send an array of colors to override the default colors, or do not send anything
   let klass = "";
   export { klass as class };
 
+  let chart;
+  /**
+   * Returns the ApexCharts instance
+   */
+  export function getInstance() {
+    return chart.getInstance();
+  }
+
   $: __class =
     "kws-mixed-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
 

package/charts/PieChart.svelte

@@ -13,16 +13,60 @@ squeezed into small spaces, Default: `false`
   @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
 
 Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+  @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
+This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`
+  @method `getInstance()` - Returns the ApexCharts instance
+
+  ### Events
+  - `animationEnd` - All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events.
+  - `beforeMount`
+  - `mounted`
+  - `updated`
+  - `mouseMove`
+  - `mouseLeave`
+  - `click`
+  - `legendClick`
+  - `markerClick`
+  - `selection`
+  - `dataPointSelection`
+  - `dataPointMouseEnter`
+  - `dataPointMouseLeave`
+  - `beforeZoom`
+  - `beforeResetZoom`
+  - `zoomed`
+  - `scrolled`
+  - `brushScrolled`
 
 -->
+<!-- All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events. -->
 <Chart
+  bind:this={chart}
+  on:animationEnd
+  on:beforeMount
+  on:mounted
+  on:updated
+  on:mouseMove
+  on:mouseLeave
+  on:click
+  on:legendClick
+  on:markerClick
+  on:selection
+  on:dataPointSelection
+  on:dataPointMouseEnter
+  on:dataPointMouseLeave
+  on:beforeZoom
+  on:beforeResetZoom
+  on:zoomed
+  on:scrolled
+  on:brushScrolled
   class={__class}
   options={_options}
   series={_data}
   type="pie"
   {height}
-  {width} />
+  {width}
+  {captured_events} />
 
 <script>
   import { Chart } from "@kws3/ui";
@@ -61,7 +105,12 @@ Send an array of colors to override the default colors, or do not send anything
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null;
+    colors = null,
+    /**
+     * String array of event names that will be captured and fired as svelte events.
+     * This is to prevent unnecessary event subscriptions.
+     */
+    captured_events = [];
 
   /**
    * CSS classes for container
@@ -69,6 +118,14 @@ Send an array of colors to override the default colors, or do not send anything
   let klass = "";
   export { klass as class };
 
+  let chart;
+  /**
+   * Returns the ApexCharts instance
+   */
+  export function getInstance() {
+    return chart.getInstance();
+  }
+
   $: __class =
     "kws-pie-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
 

package/charts/RadialChart.svelte

@@ -15,16 +15,60 @@ squeezed into small spaces, Default: `false`
   @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
 
 Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+  @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
+This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`
+  @method `getInstance()` - Returns the ApexCharts instance
+
+  ### Events
+  - `animationEnd` - All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events.
+  - `beforeMount`
+  - `mounted`
+  - `updated`
+  - `mouseMove`
+  - `mouseLeave`
+  - `click`
+  - `legendClick`
+  - `markerClick`
+  - `selection`
+  - `dataPointSelection`
+  - `dataPointMouseEnter`
+  - `dataPointMouseLeave`
+  - `beforeZoom`
+  - `beforeResetZoom`
+  - `zoomed`
+  - `scrolled`
+  - `brushScrolled`
 
 -->
+<!-- All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events. -->
 <Chart
+  bind:this={chart}
+  on:animationEnd
+  on:beforeMount
+  on:mounted
+  on:updated
+  on:mouseMove
+  on:mouseLeave
+  on:click
+  on:legendClick
+  on:markerClick
+  on:selection
+  on:dataPointSelection
+  on:dataPointMouseEnter
+  on:dataPointMouseLeave
+  on:beforeZoom
+  on:beforeResetZoom
+  on:zoomed
+  on:scrolled
+  on:brushScrolled
   class={__class}
   options={_options}
   series={_data}
   type="radialBar"
   {height}
-  {width} />
+  {width}
+  {captured_events} />
 
 <script>
   import { Chart } from "@kws3/ui";
@@ -71,7 +115,12 @@ Send an array of colors to override the default colors, or do not send anything
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null;
+    colors = null,
+    /**
+     * String array of event names that will be captured and fired as svelte events.
+     * This is to prevent unnecessary event subscriptions.
+     */
+    captured_events = [];
 
   /**
    * CSS classes for container
@@ -79,6 +128,14 @@ Send an array of colors to override the default colors, or do not send anything
   let klass = "";
   export { klass as class };
 
+  let chart;
+  /**
+   * Returns the ApexCharts instance
+   */
+  export function getInstance() {
+    return chart.getInstance();
+  }
+
   let _data = [],
     _labels = [];
 

package/charts/utils.js

@@ -99,6 +99,9 @@ export function mixedChartOptions(xAxis, yAxis, is_sparkline) {
       sparkline: {
         enabled: is_sparkline ? true : false,
       },
+      zoom: {
+        enabled: false,
+      },
     },
     colors: themeColors,
     fill: {
@@ -189,6 +192,7 @@ export function barChartOptions(
   yAxis,
   is_sparkline,
   is_horizontal,
+  is_distributed,
   is_stacked,
   is_stacked_full
 ) {
@@ -197,6 +201,7 @@ export function barChartOptions(
   opts.chart.stacked = is_stacked ? true : false;
   opts.chart.stackType = is_stacked_full ? "100%" : false;
   opts.plotOptions.bar.horizontal = is_horizontal ? true : false;
+  opts.plotOptions.bar.distributed = is_distributed ? true : false;
   return opts;
 }
 

package/datagrid/Pagination/Pagination.svelte

@@ -12,7 +12,7 @@
   @param {boolean} [showTotal=true] - Determines whether to show total or not, Default: `true`
   @param {boolean} [showCurrent=true] - Determines whether to show current page details, Default: `true`
   @param {boolean} [showPerPage=true] - Determines whether to show per page options, Default: `true`
-  @param {number} [breakThreshold=10] - Limit the number of visible pages in pagination, Default: `10`
+  @param {number} [maxVisiblePages=10] - Maximum number of consecutive pages to show in pagination after which a break is introduced in between them, Default: `10`
   @param {string} [entityName="entries"] - String to display total entries, Default: `"entries"`
   @param {''|'small'|'medium'|'large'} [size="small"] - Size of the pagination elements, Default: `"small"`
   @param {boolean} [frame=false] - Determines whether to show pagination frame or not, Default: `false`
@@ -180,9 +180,9 @@
      */
     showPerPage = true,
     /**
-     * Limit the number of visible pages in pagination
+     * Maximum number of consecutive pages to show in pagination after which a break is introduced in between them
      */
-    breakThreshold = 10,
+    maxVisiblePages = 10,
     /**
      * String to display total entries
      */
@@ -242,7 +242,7 @@
   $: totalItems = meta && _total ? _total : 0;
   $: currentPage = Math.floor(_offset / _limit);
   $: totalPages = Math.ceil(_total / (_limit || 1));
-  $: totalPages, currentPage, breakThreshold, calculatePages();
+  $: totalPages, currentPage, maxVisiblePages, calculatePages();
 
   function calculatePages() {
     pages = new Array(totalPages || 0);
@@ -251,10 +251,14 @@
       ret = [];
 
     for (var i = 0; i < total; i++) {
-      if (total > breakThreshold) {
-        if (i < 3) {
+      if (total > maxVisiblePages) {
+        let threshold = Math.max(
+          Math.floor(maxVisiblePages / 3),
+          Math.min(3, maxVisiblePages - 3)
+        );
+        if (i < threshold) {
           ret.push({ p: i });
-        } else if (i > total - 4) {
+        } else if (i >= total - threshold) {
           ret.push({ p: i });
         } else if (i === Math.floor(total / 2)) {
           ret.push({ p: i });
@@ -272,7 +276,7 @@
 
     let _prev = 0,
       items = []; // _prev was prev
-    if (total > breakThreshold) {
+    if (total > maxVisiblePages) {
       for (var j = 0; j < ret.length; j++) {
         var page = ret[j].p;
         if (page !== _prev + 1 && page !== 0) {

package/forms/actions.js

@@ -50,17 +50,19 @@ function createFlatpickrAction(defaultOpts, hooks) {
 
     function applyColorClass(instance, color) {
       let contains = false;
-      instance.calendarContainer.classList.forEach((c) => {
-        if (c.charAt(3).toLowerCase() === "is-") {
-          contains = c;
+      if (instance && instance.calendarContainer) {
+        instance.calendarContainer.classList.forEach((c) => {
+          if (c.charAt(3).toLowerCase() === "is-") {
+            contains = c;
+          }
+        });
+
+        if (contains) {
+          instance.calendarContainer.classList.remove(contains);
         }
-      });
 
-      if (contains) {
-        instance.calendarContainer.classList.remove(contains);
+        instance.calendarContainer.classList.add("is-" + color);
       }
-
-      instance.calendarContainer.classList.add("is-" + color);
     }
 
     function applyInitialInputAttributes(instance, { style }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.7.1",
+  "version": "1.7.4",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -23,11 +23,11 @@
     "access": "public"
   },
   "dependencies": {
-    "apexcharts": "^3.32.0",
+    "apexcharts": "3.33.2",
     "flatpickr": "^4.5.2",
     "svelte-portal": "^2.1.2",
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "f9be2abdbb4f340ade0d47be929aac91381a5e4b"
+  "gitHead": "fefd40197784db6665d8f74c358931cc5e8becaf"
 }

package/sliding-panes/SlidingPane.svelte

@@ -18,24 +18,40 @@ This will work only when `track_height` is set to `true`
   - `<slot name="default"  />` - Used to display content
 
 -->
-<div
-  bind:clientHeight={_height}
-  class="sliding-pane {v_center ? 'v-centered' : ''} {h_center
-    ? 'h-centered'
-    : ''} {active ? 'is-active' : ''} {klass}"
-  {style}>
+{#if hasResizeObserver}
   <div
-    bind:this={slideInner}
-    class="sliding-pane-inner {v_center ? 'v-centered' : ''} {h_center
-      ? 'h-centered'
-      : ''}">
-    <!--Used to display content--><slot />
+    class="sliding-pane with-resize-observer {v_center
+      ? 'v-centered'
+      : ''} {h_center ? 'h-centered' : ''} {active ? 'is-active' : ''} {klass}"
+    {style}>
+    <div
+      bind:this={slideInner}
+      class="sliding-pane-inner {v_center ? 'v-centered' : ''} {h_center
+        ? 'h-centered'
+        : ''}">
+      <!--Used to display content--><slot />
+    </div>
   </div>
-</div>
+{:else}
+  <div
+    bind:clientHeight={_height}
+    class="sliding-pane with-legacy-observer {v_center
+      ? 'v-centered'
+      : ''} {h_center ? 'h-centered' : ''} {active ? 'is-active' : ''} {klass}"
+    {style}>
+    <div
+      bind:this={slideInner}
+      class="sliding-pane-inner {v_center ? 'v-centered' : ''} {h_center
+        ? 'h-centered'
+        : ''}">
+      <!--Used to display content--><slot />
+    </div>
+  </div>
+{/if}
 
 <script>
   import { onMount, createEventDispatcher } from "svelte";
-  import { rAF } from "../utils";
+  import { debounce } from "@kws3/ui/utils";
 
   const fire = createEventDispatcher();
 
@@ -60,7 +76,8 @@ This will work only when `track_height` is set to `true`
      */
     track_height = true;
 
-  let _height, slideInner;
+  const hasResizeObserver = typeof window.ResizeObserver != "undefined";
+  let _height, slideInner, Observer;
 
   /**
    * CSS classes for the panel
@@ -68,15 +85,9 @@ This will work only when `track_height` is set to `true`
   let klass = "";
   export { klass as class };
 
-  onMount(() => {
-    pollForRender();
-  });
-
   $: {
     if (active && track_height && (active || _height)) {
-      rAF(() => {
-        fireSizeChange();
-      });
+      fireSizeChange();
     }
   }
 
@@ -86,11 +97,12 @@ This will work only when `track_height` is set to `true`
     } else {
       setTimeout(() => {
         pollForRender();
-      }, 200);
+      }, 50);
     }
   }
 
   function init() {
+    setupResizeObserver();
     fireSizeChange();
   }
 
@@ -99,21 +111,41 @@ This will work only when `track_height` is set to `true`
       if (!slideInner || typeof slideInner == "undefined") {
         pollForRender();
       } else {
-        rAF(() => {
-          if (!slideInner || typeof slideInner == "undefined") {
-            return;
-          }
-          var h1 = slideInner.scrollHeight,
-            h2 = slideInner.clientHeight;
-          var new_height = Math.max(h1, h2);
-          /**
-           * Event fired when the height of the pane changes
-           *
-           * This will work only when `track_height` is set to `true`
-           */
-          fire("heightChange", { height: new_height });
-        });
+        if (!slideInner || typeof slideInner == "undefined") {
+          return;
+        }
+        var h1 = slideInner.scrollHeight,
+          h2 = slideInner.clientHeight;
+        var new_height = Math.max(h1, h2);
+        /**
+         * Event fired when the height of the pane changes
+         *
+         * This will work only when `track_height` is set to `true`
+         */
+        fire("heightChange", { height: new_height });
       }
     }
   }
+
+  const debouncedFireSizeChange = debounce(fireSizeChange, 150, false);
+
+  const setupResizeObserver = () => {
+    if (hasResizeObserver) {
+      if (!slideInner || typeof slideInner == "undefined") {
+        pollForRender();
+      } else {
+        Observer = new ResizeObserver(() => {
+          debouncedFireSizeChange();
+        });
+        Observer.observe(slideInner);
+      }
+    }
+  };
+
+  onMount(() => {
+    pollForRender();
+    return () => {
+      Observer && Observer.disconnect();
+    };
+  });
 </script>