@kws3/ui 2.0.4 → 2.1.0

package/charts/utils.d.ts

@@ -0,0 +1,553 @@
+export function pieChartOptions(labels: any, is_sparkline: any): {
+    chart: {
+        type: string;
+        dropShadow: {
+            enabled: boolean;
+        };
+        toolbar: {
+            show: boolean;
+        };
+        sparkline: {
+            enabled: boolean;
+        };
+    };
+    colors: string[];
+    fill: {
+        opacity: number;
+    };
+    stroke: {
+        width: number;
+    };
+    states: {
+        active: {
+            filter: {
+                type: string;
+            };
+        };
+    };
+    dataLabels: {
+        enabled: boolean;
+    };
+    tooltip: {
+        shared: boolean;
+        intersect: boolean;
+        fillSeriesColor: boolean;
+        x: {
+            show: boolean;
+            formatter: any;
+        };
+        theme: boolean;
+    };
+    labels: any;
+    legend: {
+        position: string;
+        horizontalAlign: string;
+        labels: {
+            useSeriesColors: boolean;
+        };
+        markers: {
+            size: number;
+            shape: string;
+        };
+    };
+};
+export function donutChartOptions(labels: any, is_sparkline: any): {
+    chart: {
+        type: string;
+        dropShadow: {
+            enabled: boolean;
+        };
+        toolbar: {
+            show: boolean;
+        };
+        sparkline: {
+            enabled: boolean;
+        };
+    };
+    colors: string[];
+    fill: {
+        opacity: number;
+    };
+    stroke: {
+        width: number;
+    };
+    states: {
+        active: {
+            filter: {
+                type: string;
+            };
+        };
+    };
+    dataLabels: {
+        enabled: boolean;
+    };
+    tooltip: {
+        shared: boolean;
+        intersect: boolean;
+        fillSeriesColor: boolean;
+        x: {
+            show: boolean;
+            formatter: any;
+        };
+        theme: boolean;
+    };
+    labels: any;
+    legend: {
+        position: string;
+        horizontalAlign: string;
+        labels: {
+            useSeriesColors: boolean;
+        };
+        markers: {
+            size: number;
+            shape: string;
+        };
+    };
+};
+export function radialChartOptions(labels: any, startAngle: any, endAngle: any, is_sparkline: any): {
+    chart: {
+        type: string;
+        dropShadow: {
+            enabled: boolean;
+        };
+        toolbar: {
+            show: boolean;
+        };
+        sparkline: {
+            enabled: boolean;
+        };
+    };
+    colors: string[];
+    fill: {
+        opacity: number;
+    };
+    stroke: {
+        width: number;
+    };
+    states: {
+        active: {
+            filter: {
+                type: string;
+            };
+        };
+    };
+    dataLabels: {
+        enabled: boolean;
+    };
+    tooltip: {
+        shared: boolean;
+        intersect: boolean;
+        fillSeriesColor: boolean;
+        x: {
+            show: boolean;
+            formatter: any;
+        };
+        theme: boolean;
+    };
+    labels: any;
+    legend: {
+        position: string;
+        horizontalAlign: string;
+        labels: {
+            useSeriesColors: boolean;
+        };
+        markers: {
+            size: number;
+            shape: string;
+        };
+    };
+};
+export function mixedChartOptions(xAxis: any, yAxis: any, is_sparkline: any): {
+    chart: {
+        type: string;
+        stacked: boolean;
+        dropShadow: {
+            enabled: boolean;
+        };
+        toolbar: {
+            show: boolean;
+        };
+        sparkline: {
+            enabled: boolean;
+        };
+        zoom: {
+            enabled: boolean;
+        };
+    };
+    colors: string[];
+    fill: {
+        opacity: number;
+    };
+    states: {
+        active: {
+            filter: {
+                type: string;
+            };
+        };
+    };
+    grid: {
+        clipMarkers: boolean;
+    };
+    dataLabels: {
+        enabled: boolean;
+    };
+    markers: {
+        size: number;
+        shape: string;
+        strokeWidth: number;
+        hover: {
+            sizeOffset: number;
+        };
+    };
+    plotOptions: {
+        bar: {
+            horizontal: boolean;
+        };
+    };
+    tooltip: {
+        shared: boolean;
+        intersect: boolean;
+        x: {
+            show: boolean;
+        };
+        y: ({
+            formatter?: undefined;
+        } | {
+            formatter: any;
+        })[];
+        fixed: {
+            enabled: boolean;
+            position: string;
+            offsetY: number;
+            offsetX: number;
+        };
+        theme: boolean;
+    };
+    xaxis: {
+        categories: any;
+        axisBorder: {
+            show: boolean;
+        };
+        axisTicks: {
+            show: boolean;
+        };
+    };
+    yaxis: any;
+    stroke: {
+        width: number;
+        curve: string;
+    };
+    legend: {
+        position: string;
+        horizontalAlign: string;
+        fontSize: string;
+        labels: {
+            useSeriesColors: boolean;
+        };
+        markers: {
+            width: number;
+            height: number;
+            radius: number;
+        };
+        itemMargin: {
+            horizontal: number;
+            vertical: number;
+        };
+    };
+};
+export function barChartOptions(xAxis: any, yAxis: any, is_sparkline: any, is_horizontal: any, is_distributed: any, is_stacked: any, is_stacked_full: any): {
+    chart: {
+        type: string;
+        stacked: boolean;
+        dropShadow: {
+            enabled: boolean;
+        };
+        toolbar: {
+            show: boolean;
+        };
+        sparkline: {
+            enabled: boolean;
+        };
+        zoom: {
+            enabled: boolean;
+        };
+    };
+    colors: string[];
+    fill: {
+        opacity: number;
+    };
+    states: {
+        active: {
+            filter: {
+                type: string;
+            };
+        };
+    };
+    grid: {
+        clipMarkers: boolean;
+    };
+    dataLabels: {
+        enabled: boolean;
+    };
+    markers: {
+        size: number;
+        shape: string;
+        strokeWidth: number;
+        hover: {
+            sizeOffset: number;
+        };
+    };
+    plotOptions: {
+        bar: {
+            horizontal: boolean;
+        };
+    };
+    tooltip: {
+        shared: boolean;
+        intersect: boolean;
+        x: {
+            show: boolean;
+        };
+        y: ({
+            formatter?: undefined;
+        } | {
+            formatter: any;
+        })[];
+        fixed: {
+            enabled: boolean;
+            position: string;
+            offsetY: number;
+            offsetX: number;
+        };
+        theme: boolean;
+    };
+    xaxis: {
+        categories: any;
+        axisBorder: {
+            show: boolean;
+        };
+        axisTicks: {
+            show: boolean;
+        };
+    };
+    yaxis: any;
+    stroke: {
+        width: number;
+        curve: string;
+    };
+    legend: {
+        position: string;
+        horizontalAlign: string;
+        fontSize: string;
+        labels: {
+            useSeriesColors: boolean;
+        };
+        markers: {
+            width: number;
+            height: number;
+            radius: number;
+        };
+        itemMargin: {
+            horizontal: number;
+            vertical: number;
+        };
+    };
+};
+export function lineChartOptions(xAxis: any, yAxis: any, is_sparkline: any): {
+    chart: {
+        type: string;
+        stacked: boolean;
+        dropShadow: {
+            enabled: boolean;
+        };
+        toolbar: {
+            show: boolean;
+        };
+        sparkline: {
+            enabled: boolean;
+        };
+        zoom: {
+            enabled: boolean;
+        };
+    };
+    colors: string[];
+    fill: {
+        opacity: number;
+    };
+    states: {
+        active: {
+            filter: {
+                type: string;
+            };
+        };
+    };
+    grid: {
+        clipMarkers: boolean;
+    };
+    dataLabels: {
+        enabled: boolean;
+    };
+    markers: {
+        size: number;
+        shape: string;
+        strokeWidth: number;
+        hover: {
+            sizeOffset: number;
+        };
+    };
+    plotOptions: {
+        bar: {
+            horizontal: boolean;
+        };
+    };
+    tooltip: {
+        shared: boolean;
+        intersect: boolean;
+        x: {
+            show: boolean;
+        };
+        y: ({
+            formatter?: undefined;
+        } | {
+            formatter: any;
+        })[];
+        fixed: {
+            enabled: boolean;
+            position: string;
+            offsetY: number;
+            offsetX: number;
+        };
+        theme: boolean;
+    };
+    xaxis: {
+        categories: any;
+        axisBorder: {
+            show: boolean;
+        };
+        axisTicks: {
+            show: boolean;
+        };
+    };
+    yaxis: any;
+    stroke: {
+        width: number;
+        curve: string;
+    };
+    legend: {
+        position: string;
+        horizontalAlign: string;
+        fontSize: string;
+        labels: {
+            useSeriesColors: boolean;
+        };
+        markers: {
+            width: number;
+            height: number;
+            radius: number;
+        };
+        itemMargin: {
+            horizontal: number;
+            vertical: number;
+        };
+    };
+};
+export function areaChartOptions(xAxis: any, yAxis: any, is_sparkline: any): {
+    chart: {
+        type: string;
+        stacked: boolean;
+        dropShadow: {
+            enabled: boolean;
+        };
+        toolbar: {
+            show: boolean;
+        };
+        sparkline: {
+            enabled: boolean;
+        };
+        zoom: {
+            enabled: boolean;
+        };
+    };
+    colors: string[];
+    fill: {
+        opacity: number;
+    };
+    states: {
+        active: {
+            filter: {
+                type: string;
+            };
+        };
+    };
+    grid: {
+        clipMarkers: boolean;
+    };
+    dataLabels: {
+        enabled: boolean;
+    };
+    markers: {
+        size: number;
+        shape: string;
+        strokeWidth: number;
+        hover: {
+            sizeOffset: number;
+        };
+    };
+    plotOptions: {
+        bar: {
+            horizontal: boolean;
+        };
+    };
+    tooltip: {
+        shared: boolean;
+        intersect: boolean;
+        x: {
+            show: boolean;
+        };
+        y: ({
+            formatter?: undefined;
+        } | {
+            formatter: any;
+        })[];
+        fixed: {
+            enabled: boolean;
+            position: string;
+            offsetY: number;
+            offsetX: number;
+        };
+        theme: boolean;
+    };
+    xaxis: {
+        categories: any;
+        axisBorder: {
+            show: boolean;
+        };
+        axisTicks: {
+            show: boolean;
+        };
+    };
+    yaxis: any;
+    stroke: {
+        width: number;
+        curve: string;
+    };
+    legend: {
+        position: string;
+        horizontalAlign: string;
+        fontSize: string;
+        labels: {
+            useSeriesColors: boolean;
+        };
+        markers: {
+            width: number;
+            height: number;
+            radius: number;
+        };
+        itemMargin: {
+            horizontal: number;
+            vertical: number;
+        };
+    };
+};
+export function merge(target: any, source: any): any;
+//# sourceMappingURL=utils.d.ts.map

package/charts/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["utils.js"],"names":[],"mappings":"AAqCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAIC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoGC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAIC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAIC;AAlOM,qDAoBN"}

package/charts/utils.js

@@ -1,5 +1,3 @@
-import ApexCharts from "apexcharts/dist/apexcharts.esm";
-
 const themeColors = [
   "#284BED",
   "#ED6134",
@@ -9,8 +7,33 @@ const themeColors = [
   "#77ED11",
 ];
 
-//@ts-ignore
-export const merge = ApexCharts.merge;
+const isObject = (item) => {
+  return (
+    item && typeof item === "object" && !Array.isArray(item) && item != null
+  );
+};
+
+export const merge = (target, source) => {
+  let output = Object.assign({}, target);
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach((key) => {
+      if (isObject(source[key])) {
+        if (!(key in target)) {
+          Object.assign(output, {
+            [key]: source[key],
+          });
+        } else {
+          output[key] = merge(target[key], source[key]);
+        }
+      } else {
+        Object.assign(output, {
+          [key]: source[key],
+        });
+      }
+    });
+  }
+  return output;
+};
 
 export function pieChartOptions(labels, is_sparkline) {
   return {

package/controls/Checkbox.svelte

@@ -2,8 +2,8 @@
   @component
 
 
-  @param {''|'small'|'medium'|'large'} [size=""] - Size of the Checkbox, Default: `""`
-  @param {''|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Colour of the Checkbox, Default: `""`
+  @param {SizeOptions} [size=] - Size of the Checkbox, Default: ``
+  @param {ColorOptions} [color=] - Colour of the Checkbox, Default: ``
   @param {string} [style=""] - Inline CSS for the Checkbox, Default: `""`
   @param {boolean} [inverted=false] - Inverts the Checkbox colour theme, Default: `false`
   @param {boolean} [circle=false] - Makes the Checkbox round, Default: `false`
@@ -13,11 +13,11 @@ Checked\Not Checked, Default: `false`
   @param {boolean} [disabled=false] - Disables the Checkbox, Default: `false`
   @param {string} [icon="check"] - The name of the icon that is to be used in the Checkbox, Default: `"check"`
   @param {string} [label_style=""] - Inline CSS for the Checkbox label, Default: `""`
-  @param {''|'fa'|'lar'|'las'|'gg'|'unicons'} [icon_family="null"] - Icon family to be used
+  @param {FontFamilies} [icon_family=] - Icon family to be used
 
 Defaults to global family set via `Icon.setDefaultIconType()`
 
-Ultimately defaults to `fa`, if family is not set anywhere, Default: `"null"`
+Ultimately defaults to `fa`, if family is not set anywhere, Default: ``
   @param {string} [class=""] - CSS classes of the Checkbox, Default: `""`
 
   ### Events
@@ -50,6 +50,7 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `"null"`
    *
    * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
    * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   * @typedef {import('@kws3/ui/types').FontFamilies} FontFamilies
    *
    */
   /**
@@ -59,7 +60,7 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `"null"`
   export let size = "",
     /**
      * Colour of the Checkbox
-     * @type {Exclude<ColorOptions, 'success'>}
+     * @type {ColorOptions}
      */
     color = "",
     /**
@@ -106,7 +107,7 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `"null"`
      *
      * Ultimately defaults to `fa`, if family is not set anywhere
      *
-     * @type {string|''|'fa'|'lar'|'las'|'gg'|'unicons'|'material'}
+     * @type {FontFamilies}
      */
     icon_family = "";
 

package/controls/FileUpload.svelte

@@ -7,12 +7,12 @@
 It is returned back in the `getFile()` call from `file_chosen` event, Default: `""`
   @param {string} [message="Choose File..."] - Message displayed in uploader, Default: `"Choose File..."`
   @param {string} [info=""] - Information / help / subtitle displayed under the uploader, Default: `""`
-  @param {''|'grey'|'primary'|'warning'|'success'|'info'|'danger'|'dark'|'light'} [info_color="grey"] - Color of the information text, Default: `"grey"`
+  @param {ExtendedColorOptions} [info_color=grey] - Color of the information text, Default: `grey`
   @param {number} [max=5000000] - Maximum allowed size in bytes, Default: `5000000`
   @param {any} [allowed=*] - Allowed file types - accepts the string `"*"`, or an array of file type suffixes, Default: `*`
   @param {boolean} [disabled=false] - Disables the uploader, Default: `false`
-  @param {''|'small'|'medium'|'large'} [size=""] - Size of the File Input, Default: `""`
-  @param {''|'primary'|'warning'|'success'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the File Input, Default: `""`
+  @param {SizeOptions} [size=] - Size of the File Input, Default: ``
+  @param {ColorOptions} [color=] - Color of the File Input, Default: ``
   @param {string} [class=""] - CSS classes for the Uploader, Default: `""`
 
   ### Events
@@ -91,6 +91,7 @@ The following functions are returned in `event.detail`:
   /**
    *
    * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').ExtendedColorOptions} ExtendedColorOptions
    * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
    *
    */
@@ -112,7 +113,7 @@ The following functions are returned in `event.detail`:
     info = "",
     /**
      * Color of the information text
-     * @type {ColorOptions | 'grey'}
+     * @type {ExtendedColorOptions}
      */
     info_color = "grey",
     /**

package/controls/NumberInput.svelte

@@ -2,7 +2,7 @@
   @component
 
 
-  @param {''|'small'|'medium'|'large'} [size=""] - Size of the component, Default: `""`
+  @param {SizeOptions} [size=] - Size of the component, Default: ``
   @param {number} [value=0] - Current value
 
 This property can be bound to, to fetch the current value
@@ -15,11 +15,11 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
   @param {boolean} [fullwidth=false] - Forces the NumberInput to occupy the full width of it's container, Default: `false`
   @param {boolean} [typeable=true] - Allows typing the value into the input, Default: `true`
   @param {string} [minus_icon="minus"] - Name of the icon that is to be displayed in the minus button, Default: `"minus"`
-  @param {''|'success'|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [minus_icon_color="danger"] - Color of the Minus Icon, Default: `"danger"`
-  @param {''|'success'|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [minus_button_color=""] - Color of the Minus Button, Default: `""`
+  @param {ColorOptions} [minus_icon_color=danger] - Color of the Minus Icon, Default: `danger`
+  @param {ColorOptions} [minus_button_color=] - Color of the Minus Button, Default: ``
   @param {string} [plus_icon="plus"] - Name of the icon that is to be displayed in the plus button, Default: `"plus"`
-  @param {''|'success'|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [plus_icon_color="success"] - Color of the Plus Icon, Default: `"success"`
-  @param {''|'success'|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [plus_button_color=""] - Color of the Plus Button, Default: `""`
+  @param {ColorOptions} [plus_icon_color=success] - Color of the Plus Icon, Default: `success`
+  @param {ColorOptions} [plus_button_color=] - Color of the Plus Button, Default: ``
   @param {boolean} [input_only=false] - Show input without controls, Default: `false`
   @param {boolean} [force_integer=false] - Prevent decimal numbers such as `1.5`, Default: `false`
   @param {string} [style=""] - Inline CSS for component, Default: `""`