@kws3/ui 2.0.5 → 2.1.1

package/helpers/Modal.svelte

@@ -2,7 +2,7 @@
   @component
 
 
-  @param {'small'|'medium'|'large'} [size="small"] - Size of the modal, Default: `"small"`
+  @param {SizeOptions} [size=small] - Size of the modal, Default: `small`
   @param {boolean} [is_active=false] - Determines whether modal is displayed or not, Default: `false`
   @param {boolean} [closable=true] - If this is set to false, the modal cannot be closed using the UI
 
@@ -74,9 +74,14 @@ Only programmatic closing is possible, Default: `true`
 <script>
   import { fade, scale } from "svelte/transition";
   import { hasTransitions } from "../settings";
+
+  /**
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   */
+
   /**
    * Size of the modal
-   * @type {import('@kws3/ui/types').SizeOptions}
+   * @type {SizeOptions}
    */
   export let size = "small",
     /**

package/helpers/Notification.svelte

@@ -2,7 +2,7 @@
   @component
 
 
-  @param {''|'primary'|'success'|'warning'|'info'|'danger'|'light'|'dark'} [color="info"] - Color of the Notification box, Default: `"info"`
+  @param {ColorOptions} [color=info] - Color of the Notification box, Default: `info`
   @param {string} [style=""] - Inline CSS for notification content, Default: `""`
   @param {boolean} [light=false] - Inverted colors for notification box and contents, Default: `false`
   @param {boolean} [dismissable=false] - Determines whether close button is displayed or not, Default: `false`
@@ -33,9 +33,13 @@ The parent can then decide what to do with the component
   import { createEventDispatcher } from "svelte";
   const fire = createEventDispatcher();
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   */
+
   /**
    * Color of the Notification box
-   * @type {import('@kws3/ui/types').ColorOptions}
+   * @type {ColorOptions}
    */
   export let color = "info";
 

package/helpers/Popover.svelte

@@ -3,16 +3,16 @@
 
 
   @param {string} [icon="info-circle"] - Icon used when default slot has no content, Default: `"info-circle"`
-  @param {string|''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [icon_color="primary"] - Colour of the trigger icon displayed when default slot has no content, Default: `"primary"`
-  @param {string|''|'small'|'medium'|'large'} [icon_size="small"] - Size of the trigger icon displayed when default slot has no content, Default: `"small"`
+  @param {ExtendedColorOptions} [icon_color=primary] - Colour of the trigger icon displayed when default slot has no content, Default: `primary`
+  @param {SizeOptions} [icon_size=small] - Size of the trigger icon displayed when default slot has no content, Default: `small`
   @param {string} [trigger="click"] - Determines the events that cause the Popover to show. Multiple event names are separated by spaces.
 
 **Examples:** `click`, `mouseenter`, `mouseenter focus`
 
 If you would like to trigger the popover programatically only, you can use `manual`., Default: `"click"`
-  @param {string} [placement="auto"] - Preferred placement of the Popover
+  @param {TippyPositions} [placement=auto] - Preferred placement of the Popover
 
-Available options: <a target="_blank" href="https://atomiks.github.io/tippyjs/v6/all-props/#placement">https://atomiks.github.io/tippyjs/v6/all-props/#placement</a>, Default: `"auto"`
+Available options: <a target="_blank" href="https://atomiks.github.io/tippyjs/v6/all-props/#placement">https://atomiks.github.io/tippyjs/v6/all-props/#placement</a>, Default: `auto`
   @param {boolean} [interactive=false] - Allows you to interact with the Popover content, when turned on, Default: `false`
   @param {boolean} [hide_on_click=true] - Whether the popover should hide on clicking outside of it, Default: `true`
   @param {object} [external_target=null] - Specify a target node reference to use as the Popover content
@@ -79,18 +79,24 @@ It can be any CSS value associated with `max-width` property, including `"none"`
 
   const fire = createEventDispatcher();
 
+  /**
+   * @typedef {import('@kws3/ui/types').ExtendedColorOptions} ExtendedColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   * @typedef {import('@kws3/ui/types').TippyPositions} TippyPositions
+   */
+
   /**
    * Icon used when default slot has no content
    */
   export let icon = "info-circle";
   /**
    * Colour of the trigger icon displayed when default slot has no content
-   * @type {import('@kws3/ui/types').ColorOptions | 'grey'}
+   * @type {ExtendedColorOptions}
    */
   export let icon_color = "primary";
   /**
    * Size of the trigger icon displayed when default slot has no content
-   * @type {import('@kws3/ui/types').SizeOptions}
+   * @type {SizeOptions}
    */
   export let icon_size = "small";
   /**
@@ -105,6 +111,7 @@ It can be any CSS value associated with `max-width` property, including `"none"`
    * Preferred placement of the Popover
    *
    * Available options: <a target="_blank" href="https://atomiks.github.io/tippyjs/v6/all-props/#placement">https://atomiks.github.io/tippyjs/v6/all-props/#placement</a>
+   * @type {TippyPositions}
    */
   export let placement = "auto";
   /**

package/helpers/Skeleton.svelte

@@ -11,7 +11,7 @@
 **Examples:** `10px` | `5rem`, Default: `"0px"`
   @param {boolean} [circle=false] - Whether the Skeleton should be rendered as a circle.
 If this is set to `true`, the `radius` property will be ignored., Default: `false`
-  @param {'' | 'transparent' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link'} [color=""] - Color of the Skeleton lines, Default: `""`
+  @param {ColorOptions} [color=] - Color of the Skeleton lines, Default: ``
   @param {string} [class=""] - CSS class for Skeleton, Default: `""`
 
 -->
@@ -26,7 +26,7 @@ If this is set to `true`, the `radius` property will be ignored., Default: `fals
 
 <script>
   /**
-   * @typedef {import('@kws3/ui/types').BGColorOptions} BGColorOptions
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
    */
   export let /**
      * Number of lines of text to display.
@@ -54,7 +54,7 @@ If this is set to `true`, the `radius` property will be ignored., Default: `fals
     circle = false,
     /**
      * Color of the Skeleton lines
-     * @type {BGColorOptions}
+     * @type {ColorOptions}
      */
     color = "";
 

package/helpers/Timeline/Timeline.svelte

@@ -2,7 +2,7 @@
   @component
 
 
-  @param {'left'|'center'|'right'} [align="left"] - Alignment of the Timeline child items, Default: `"left"`
+  @param {string|'left'|'center'|'right'} [align="left"] - Alignment of the Timeline child items, Default: `"left"`
   @param {string} [class=""] - CSS classes for the Timeline container, Default: `""`
 
   ### Slots

package/helpers/Timeline/TimelineItem.svelte

@@ -2,9 +2,9 @@
   @component
 
 
-  @param {''|'dark' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'} [color="primary"] - Color of marker and border, Default: `"primary"`
-  @param {string} [marker_icon=""] - Any icon name accepted by the Icon component, icon will be placed inside the marker, Default: `"null"`
-  @param {string} [marker_image=""] - Any image URL, the image will be placed inside the marker, Default: `"null"`
+  @param {ColorOptions} [color=primary] - Color of marker and border, Default: `primary`
+  @param {string} [marker_icon=""] - Any icon name accepted by the Icon component, icon will be placed inside the marker, Default: `""`
+  @param {string} [marker_image=""] - Any image URL, the image will be placed inside the marker, Default: `""`
   @param {string} [class=""] - CSS classes for the TimelineItem container, Default: `""`
 
   ### Slots
@@ -46,9 +46,13 @@
 <script>
   import { Icon } from "@kws3/ui";
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   */
+
   /**
    * Color of marker and border
-   * @type {import('@kws3/ui/types').ColorOptions}
+   * @type {ColorOptions}
    */
   export let color = "primary";
   /**

package/helpers/Tooltip.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @typedef {import('@kws3/ui/types').TippyPositions} TippyPositions
+ */
+/**
+ * Activates tooltips via event delegation
+ * @param {string} container - CSS selector of container
+ * @param {object?} opts - tooltip options
+ */
+export function activateTooltips(container: string, opts?: object | null): void;
+/**
+ * @type {import("svelte/action").Action}
+ */
+export let popover: import("svelte/action").Action;
+/**
+ * @type {import("svelte/action").Action}
+ */
+export let tooltip: import("svelte/action").Action;
+export type TippyPositions = import('@kws3/ui/types').TippyPositions;
+//# sourceMappingURL=Tooltip.d.ts.map

package/helpers/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["Tooltip.js"],"names":[],"mappings":"AAEA;;GAEG;AAEH;;;;GAIG;AACH,4CAHW,MAAM,SACN,MAAM,eAmBhB;AA8DD;;GAEG;AACH,oBAFU,OAAO,eAAe,EAAE,MAAM,CAkBrC;AAEH;;GAEG;AACH,oBAFU,OAAO,eAAe,EAAE,MAAM,CAWrC;6BAxHU,OAAO,gBAAgB,EAAE,cAAc"}

package/helpers/Tooltip.js

@@ -1,9 +1,13 @@
 import tippy, { delegate } from "tippy.js";
 
+/**
+ * @typedef {import('@kws3/ui/types').TippyPositions} TippyPositions
+ */
+
 /**
  * Activates tooltips via event delegation
  * @param {string} container - CSS selector of container
- * @param {object} opts - tooltip options
+ * @param {object?} opts - tooltip options
  */
 export function activateTooltips(container, opts = {}) {
   let _opts = Object.assign(
@@ -84,6 +88,9 @@ function createTippyAction(defaultOpts) {
   };
 }
 
+/**
+ * @type {import("svelte/action").Action}
+ */
 export let popover = createTippyAction({
   appendTo: () => document.body,
   hideOnClick: true,
@@ -92,6 +99,9 @@ export let popover = createTippyAction({
   allowHTML: true,
   inertia: true,
   touch: true,
+  /**
+   * @type {TippyPositions}
+   */
   placement: "auto",
   trigger: "click",
   offset: [0, 10],
@@ -99,6 +109,9 @@ export let popover = createTippyAction({
   maxWidth: "none",
 });
 
+/**
+ * @type {import("svelte/action").Action}
+ */
 export let tooltip = createTippyAction({
   animation: "scale",
   content(el) {

package/index.d.ts

@@ -0,0 +1,69 @@
+export { applySettings } from "./settings.js";
+export { default as Popover } from "./helpers/Popover.svelte";
+export { default as Icon } from "./helpers/Icon.svelte";
+export { default as Message } from "./helpers/Message.svelte";
+export { default as Modal } from "./helpers/Modal.svelte";
+export { default as CardModal } from "./helpers/CardModal.svelte";
+export { default as Panel } from "./helpers/Panel.svelte";
+export { default as Notification } from "./helpers/Notification.svelte";
+export { default as Loader } from "./helpers/Loader.svelte";
+export { default as ActionSheet } from "./helpers/ActionSheet.svelte";
+export { default as Skeleton } from "./helpers/Skeleton.svelte";
+export { default as Divider } from "./helpers/Divider.svelte";
+export { default as Timeline } from "./helpers/Timeline/Timeline.svelte";
+export { default as TimelineItem } from "./helpers/Timeline/TimelineItem.svelte";
+export { default as TimelineHeader } from "./helpers/Timeline/TimelineHeader.svelte";
+export { default as Nl2br } from "./helpers/Nl2br.svelte";
+export { default as ClipboardCopier } from "./helpers/ClipboardCopier.svelte";
+export { default as ScrollableList } from "./helpers/ScrollableList.svelte";
+export { default as FloatingUIOutput } from "./helpers/FloatingUI/FloatingUIOutput.svelte";
+export { default as Floatie } from "./helpers/FloatingUI/Floatie.svelte";
+export { default as ConfirmButton } from "./buttons/ConfirmButton.svelte";
+export { default as DeleteButton } from "./buttons/DeleteButton.svelte";
+export { default as SubmitButton } from "./buttons/SubmitButton.svelte";
+export { default as ProcessButton } from "./buttons/ProcessButton.svelte";
+export { default as Checkbox } from "./controls/Checkbox.svelte";
+export { default as FileUpload } from "./controls/FileUpload.svelte";
+export { default as NumberInput } from "./controls/NumberInput.svelte";
+export { default as Radio } from "./controls/Radio.svelte";
+export { default as Toggle } from "./controls/Toggle.svelte";
+export { default as ToggleButtons } from "./controls/ToggleButtons.svelte";
+export { default as ToggleControl } from "./controls/ToggleControl.svelte";
+export { default as RangeSlider } from "./controls/RangeSlider.svelte";
+export { default as Canvas } from "./canvas/Canvas.svelte";
+export { default as ESignature } from "./canvas/ESignature.svelte";
+export { default as PenControls } from "./canvas/PenControls.svelte";
+export { default as PenInput } from "./canvas/PenInput.svelte";
+export { default as Transition } from "./transitions/Transition.svelte";
+export { default as SlidingPane } from "./sliding-panes/SlidingPane.svelte";
+export { default as SlidingPaneSet } from "./sliding-panes/SlidingPaneSet.svelte";
+export { default as AutoComplete } from "./forms/AutoComplete.svelte";
+export { default as SearchableSelect } from "./forms/select/SearchableSelect.svelte";
+export { default as MultiSelect } from "./forms/select/MultiSelect.svelte";
+export { default as MaskedInput } from "./forms/MaskedInput.svelte";
+export { default as PasswordInput } from "./forms/PasswordInput.svelte";
+export { default as Colorpicker } from "./forms/colorpicker/Colorpicker.svelte";
+export { default as Datepicker } from "./forms/Datepicker.svelte";
+export { default as Timepicker } from "./forms/Timepicker.svelte";
+export { default as SearchInput } from "./forms/SearchInput.svelte";
+export { default as PasswordValidator } from "./forms/PasswordValidator/PasswordValidator.svelte";
+export { default as GridView } from "./datagrid/GridView/GridView.svelte";
+export { default as TileView } from "./datagrid/TileView/TileView.svelte";
+export { default as DataSearch } from "./datagrid/DataSearch/DataSearch.svelte";
+export { default as Pagination } from "./datagrid/Pagination/Pagination.svelte";
+export { default as DataSort } from "./datagrid/DataSort/DataSort.svelte";
+export { default as Chart } from "./charts/Chart.svelte";
+export { default as DonutChart } from "./charts/DonutChart.svelte";
+export { default as PieChart } from "./charts/PieChart.svelte";
+export { default as MixedChart } from "./charts/MixedChart.svelte";
+export { default as BarChart } from "./charts/BarChart.svelte";
+export { default as LineChart } from "./charts/LineChart.svelte";
+export { default as AreaChart } from "./charts/AreaChart.svelte";
+export { default as RadialChart } from "./charts/RadialChart.svelte";
+export { activateTooltips, tooltip, popover } from "./helpers/Tooltip.js";
+export { alert, confirm, prompt, default as Dialog } from "./helpers/Dialog/index.js";
+export { Notifications, Toasts, Snackbars, FloatiesStore } from "./helpers/FloatingUI/index.js";
+export { portal, default as Portal } from "svelte-portal";
+export { Pen, Eraser } from "./internal/DrawingPad.js";
+export { datepicker as DatepickerAction, timepicker as TimepickerAction } from "./forms/actions.js";
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":""}

package/index.js

@@ -49,6 +49,12 @@ export { default as ToggleButtons } from "./controls/ToggleButtons.svelte";
 export { default as ToggleControl } from "./controls/ToggleControl.svelte";
 export { default as RangeSlider } from "./controls/RangeSlider.svelte";
 
+export { default as Canvas } from "./canvas/Canvas.svelte";
+export { default as ESignature } from "./canvas/ESignature.svelte";
+export { default as PenControls } from "./canvas/PenControls.svelte";
+export { default as PenInput } from "./canvas/PenInput.svelte";
+export { Pen, Eraser } from "./internal/DrawingPad.js";
+
 export { default as Transition } from "./transitions/Transition.svelte";
 
 export { default as SlidingPane } from "./sliding-panes/SlidingPane.svelte";
@@ -58,6 +64,7 @@ export { default as AutoComplete } from "./forms/AutoComplete.svelte";
 export { default as SearchableSelect } from "./forms/select/SearchableSelect.svelte";
 export { default as MultiSelect } from "./forms/select/MultiSelect.svelte";
 export { default as MaskedInput } from "./forms/MaskedInput.svelte";
+export { default as PasswordInput } from "./forms/PasswordInput.svelte";
 export { default as Colorpicker } from "./forms/colorpicker/Colorpicker.svelte";
 export { default as Datepicker } from "./forms/Datepicker.svelte";
 export { default as Timepicker } from "./forms/Timepicker.svelte";

package/internal/DrawingPad.d.ts

@@ -0,0 +1,86 @@
+export class DrawingPad {
+    /**
+     * DrawingPad constructor
+     * @param {{CANVAS:HTMLCanvasElement, fire:(string, object)=>void}} app
+     * @param {DrawingPadOptions} opts - Parameter description.
+     */
+    constructor(app: {
+        CANVAS: HTMLCanvasElement;
+        fire: (string: any, object: any) => void;
+    }, opts: DrawingPadOptions);
+    app: {
+        CANVAS: HTMLCanvasElement;
+        fire: (string: any, object: any) => void;
+    };
+    canvas: HTMLCanvasElement;
+    context: CanvasRenderingContext2D;
+    drawing: boolean;
+    currentPos: {
+        x: number;
+        y: number;
+    };
+    lastPos: {
+        x: number;
+        y: number;
+    };
+    scaleFactor: number;
+    drawingType: string;
+    penColor: string;
+    penWidth: number;
+    eraserWidth: number;
+    readonly: boolean;
+    image: string;
+    tools: import("@kws3/ui/types").DrawingTools;
+    undoManager: UndoManager;
+    prevState: ImageData;
+    START: any;
+    MOVE: any;
+    END: any;
+    RENDER: any;
+    prevent(e: any): void;
+    getPosition(e: any): {
+        x: number;
+        y: number;
+    };
+    render(): void;
+    draw(): void;
+    move(e: any): void;
+    end(e: any): void;
+    start(e: any): void;
+    addHistory(): void;
+    resetHistory(): void;
+    getImageData(): ImageData;
+    setImageData(data: any): void;
+    setImage(imgSrc: any, callBackFn: any): void;
+    fire(type: any): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    init(): void;
+    is_readonly: boolean;
+    imageDataUrl: string;
+    syncImage(imgData: any): void;
+    addEvent(): void;
+    removeEvent(): void;
+    undo(): void;
+    redo(): void;
+    reset(): void;
+    setScaleFactor(f: any): void;
+    setTool(toolType: any): void;
+    setColor(color: any): void;
+}
+export namespace Pen {
+    const name: string;
+    const icon: string;
+    function draw(instance: any): void;
+}
+export namespace Eraser {
+    const name_1: string;
+    export { name_1 as name };
+    const icon_1: string;
+    export { icon_1 as icon };
+    export function draw_1(instance: any): void;
+    export { draw_1 as draw };
+}
+export type DrawingPadOptions = import('@kws3/ui/types').DrawingPadOptions;
+import UndoManager from "./UndoManager";
+//# sourceMappingURL=DrawingPad.d.ts.map

package/internal/DrawingPad.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawingPad.d.ts","sourceRoot":"","sources":["DrawingPad.js"],"names":[],"mappings":"AAoBA;IACE;;;;OAIG;IACH;gBAHmB,iBAAiB;4CAAyB,IAAI;aACtD,iBAAiB,EA8B3B;IA3BC;gBAJiB,iBAAiB;4CAAyB,IAAI;MAIjD;IACd,0BAA6B;IAC7B,kCAA2C;IAC3C,iBAAoB;IACpB;;;MAAgC;IAChC;;;MAA8B;IAC9B,oBAAoC;IACpC,oBAAwB;IAExB,iBAA6B;IAC7B,iBAA6B;IAC7B,oBAAmC;IACnC,kBAA6B;IAC7B,cAAuB;IACvB,6CAAuB;IAMvB,yBAAoC;IACpC,qBAAqB;IAErB,WAAkC;IAClC,UAAgC;IAChC,SAA8B;IAC9B,YAAoC;IAGtC,sBAIC;IAED;;;MAeC;IAED,eAMC;IAED,aASC;IAED,mBAGC;IAED,kBAYC;IAED,oBAcC;IAED,mBAWC;IAED,qBAEC;IAED,0BAOC;IAED,8BAMC;IAED,6CAuBC;IAED,sBAUC;IAED,mBAEC;IAED,mBAEC;IAED,aASC;IARC,qBAAyC;IACzC,qBAAoC;IAStC,8BASC;IAED,iBAKC;IAED,oBAGC;IAED,aAKC;IAED,aAKC;IAED,cAKC;IAED,6BAEC;IAED,6BAEC;IAED,2BAEC;CACF;;;;IAKO,mCAQL;;;;;;;IAMK,4CAOL;;;gCA7SU,OAAO,gBAAgB,EAAE,iBAAiB;wBAH/B,eAAe"}