@kws3/ui 2.0.5 → 2.1.1

package/CHANGELOG.mdx

@@ -1,3 +1,13 @@
+# 2.1.1
+ - Package `text-mask-core` moved to @kws3 namespace and removed from dependencies.
+
+# 2.1.0
+ - Bugfix with Colorpicker component, where colors could not be typed in manually.
+ - Extended typing and typescript support
+ - New Components added `Canvas`, `ESignature`, `PenInput` and `PenControls`
+ - Exposed `Canvas` tools (`Pen` and `Eraser`) from `DrawingPad` - drawing helper module.
+ - New Components added `PasswordInput` with value show/hide feature.
+
 ## 2.0.5
  - `RangeSlider` - Expose native `input` event
  - `RangeSlider` - Supports thumb color class `is-thumb-{color}`

package/buttons/ConfirmButton.svelte

@@ -1,11 +1,12 @@
 <!--
   @component
 
+
   @param {string} [button_class=""] - CSS classes for the Confirm button, Default: `""`
   @param {string} [text=""] - Button text, Default: `""`
-  @param {''|'small'|'medium'|'large'} [size=""] - Size of the Button, Default: `""`
+  @param {SizeOptions} [size=] - Size of the Button, Default: ``
   @param {string} [icon="check"] - Name of the icon that is to be displayed in the button, Default: `"check"`
-  @param {''|'dark' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'} [color="primary"] - Color of the Button, Default: `"primary"`
+  @param {ColorOptions} [color=primary] - Color of the Button, Default: `primary`
   @param {string} [cy=""] - data-cy attribute for cypress, Default: `""`
   @param {string} [done_icon="check"] - Name of the icon displayed after task is completed successfully, Default: `"check"`
   @param {string} [done_text="Done"] - Button text displayed after task is completed successfully, Default: `"Done"`
@@ -13,8 +14,8 @@
   @param {boolean} [disabled=false] - Disables the button when `true`, Default: `false`
   @param {boolean} [should_confirm=true] - When `false`, skips the confirmation prompt, and makes it a one step process, Default: `true`
   @param {string} [context=""] - Context property, Default: `""`
-  @param {number} [completion_timeout=600] - How long to wait before `done` event is fired, and the UI state reverts back to normal, Default: `600`
-  @param {number} [error_timeout=3000] - How long to wait before `error` event is fired, and the UI state reverts back to normal, Default: `3000`
+  @param {number} [completion_timeout=600] - Specifies the duration to wait after the `done` event, before the UI state returns to normal, Default: `600`
+  @param {number} [error_timeout=3000] - Specifies the duration to wait after the `error` event, before the UI state returns to normal, Default: `3000`
   @param {string} [class=""] - CSS classes for button container, Default: `""`
 
   ### Events
@@ -137,11 +138,11 @@
      */
     context = "",
     /**
-     * How long to wait before `done` event is fired, and the UI state reverts back to normal
+     * Specifies the duration to wait after the `done` event, before the UI state returns to normal
      */
     completion_timeout = 600,
     /**
-     * How long to wait before `error` event is fired, and the UI state reverts back to normal
+     * Specifies the duration to wait after the `error` event, before the UI state returns to normal
      */
     error_timeout = 3000;
 

package/buttons/DeleteButton.svelte

@@ -1,19 +1,20 @@
 <!--
   @component
 
+
   @param {string} [button_class=""] - CSS classes for the Delete button, Default: `""`
   @param {string} [text="Delete"] - Button text, Default: `"Delete"`
-  @param {''|'small'|'medium'|'large'} [size=""] - Size of the Button, Default: `""`
+  @param {SizeOptions} [size=] - Size of the Button, Default: ``
   @param {string} [icon="minus-circle"] - Name of the icon that is to be displayed in the button, Default: `"minus-circle"`
-  @param {''|'dark' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'} [color="danger"] - Color of the Button, Default: `"danger"`
+  @param {ColorOptions} [color=danger] - Color of the Button, Default: `danger`
   @param {string} [cy=""] - data-cy attribute for cypress, Default: `""`
   @param {string} [done_icon="check"] - Name of the icon displayed after task is completed successfully, Default: `"check"`
   @param {string} [done_text="Deleted"] - Button text displayed after task is completed successfully, Default: `"Deleted"`
   @param {object} [context=null] - Context property, Default: `null`
   @param {boolean} [icon_only=false] - Removes text, and text space in the button, Default: `false`
   @param {boolean} [disabled=false] - Disables the button when `true`, Default: `false`
-  @param {number} [completion_timeout=600] - How long to wait before `erased` event is fired, and the UI state reverts back to normal, Default: `600`
-  @param {number} [error_timeout=3000] - How long to wait before `error` event is fired, and the UI state reverts back to normal, Default: `3000`
+  @param {number} [completion_timeout=600] - Specifies the duration to wait after the `erased` event, before the UI state returns to normal, Default: `600`
+  @param {number} [error_timeout=3000] - Specifies the duration to wait after the `error` event, before the UI state returns to normal, Default: `3000`
   @param {string} [class=""] - CSS classes for the button container, Default: `""`
 
   ### Events
@@ -59,6 +60,11 @@
 
   const fire = createEventDispatcher();
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   */
+
   /**
    * CSS classes for the Delete button
    */
@@ -69,7 +75,7 @@
     text = "Delete",
     /**
      * Size of the Button
-     * @type {import('@kws3/ui/types').SizeOptions}
+     * @type {SizeOptions}
      */
     size = "",
     /**
@@ -78,7 +84,7 @@
     icon = "minus-circle",
     /**
      * Color of the Button
-     * @type {import('@kws3/ui/types').ColorOptions}
+     * @type {ColorOptions}
      */
     color = "danger",
     /**
@@ -106,11 +112,11 @@
      */
     disabled = false,
     /**
-     * How long to wait before `erased` event is fired, and the UI state reverts back to normal
+     * Specifies the duration to wait after the `erased` event, before the UI state returns to normal
      */
     completion_timeout = 600,
     /**
-     * How long to wait before `error` event is fired, and the UI state reverts back to normal
+     * Specifies the duration to wait after the `error` event, before the UI state returns to normal
      */
     error_timeout = 3000;
 

package/buttons/ProcessButton.svelte

@@ -1,19 +1,20 @@
 <!--
   @component
 
+
   @param {string} [button_class=""] - CSS classes for the Process button, Default: `""`
   @param {string} [text="Click Me"] - Button text, Default: `"Click Me"`
-  @param {''|'small'|'medium'|'large'} [size=""] - Size of the Button, Default: `""`
+  @param {SizeOptions} [size=] - Size of the Button, Default: ``
   @param {string} [icon="check"] - Name of the icon that is to be displayed in the button, Default: `"check"`
-  @param {''|'dark' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'} [color="primary"] - Color of the Button, Default: `"primary"`
+  @param {ColorOptions} [color=primary] - Color of the Button, Default: `primary`
   @param {string} [cy=""] - data-cy attribute for cypress, Default: `""`
   @param {string} [done_icon="check"] - Name of the icon displayed after task is completed successfully, Default: `"check"`
   @param {string} [done_text="Done"] - Button text displayed after task is completed successfully, Default: `"Done"`
-  @param {object} [context=null] - Context property, Default: `null`
+  @param {string} [context=""] - Context property, Default: `""`
   @param {boolean} [icon_only=false] - Removes text, and text space in the button, Default: `false`
   @param {boolean} [disabled=false] - Disables the button when `true`, Default: `false`
-  @param {number} [completion_timeout=600] - How long to wait before `done` event is fired, and the UI state reverts back to normal, Default: `600`
-  @param {number} [error_timeout=3000] - How long to wait before `error` event is fired, and the UI state reverts back to normal, Default: `3000`
+  @param {number} [completion_timeout=600] - Specifies the duration to wait after the `done` event, before the UI state returns to normal, Default: `600`
+  @param {number} [error_timeout=3000] - Specifies the duration to wait after the `error` event, before the UI state returns to normal, Default: `3000`
   @param {string} [class=""] - CSS classes for button container, Default: `""`
 
   ### Events
@@ -60,6 +61,11 @@
 
   const fire = createEventDispatcher();
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   */
+
   /**
    * CSS classes for the Process button
    */
@@ -70,7 +76,7 @@
     text = "Click Me",
     /**
      * Size of the Button
-     * @type {import('@kws3/ui/types').SizeOptions}
+     * @type {SizeOptions}
      */
     size = "",
     /**
@@ -79,7 +85,7 @@
     icon = "check",
     /**
      * Color of the Button
-     * @type {import('@kws3/ui/types').ColorOptions}
+     * @type {ColorOptions}
      */
     color = "primary",
     /**
@@ -107,11 +113,11 @@
      */
     disabled = false,
     /**
-     * How long to wait before `done` event is fired, and the UI state reverts back to normal
+     * Specifies the duration to wait after the `done` event, before the UI state returns to normal
      */
     completion_timeout = 600,
     /**
-     * How long to wait before `error` event is fired, and the UI state reverts back to normal
+     * Specifies the duration to wait after the `error` event, before the UI state returns to normal
      */
     error_timeout = 3000;
 

package/buttons/SubmitButton.svelte

@@ -1,8 +1,9 @@
 <!--
   @component
 
-  @param {''|'small'|'medium'|'large'} [size=""] - Size of the Button, Default: `""`
-  @param {''|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [color="primary"] - Color of the Button, Default: `"primary"`
+
+  @param {SizeOptions} [size=] - Size of the Button, Default: ``
+  @param {ColorOptions} [color=primary] - Color of the Button, Default: `primary`
   @param {string} [text="Save Changes"] - Button text, Default: `"Save Changes"`
   @param {string} [saved_text="Saved"] - Text displayed after submission is completed successfully, Default: `"Saved"`
   @param {string} [error_text="Failed to Save"] - Text displayed if submission is not successful, Default: `"Failed to Save"`
@@ -10,9 +11,9 @@
   @param {string} [cy="submit"] - data-cy attribute for cypress, Default: `"submit"`
   @param {boolean} [icon_only=false] - Removes text, and text space in the button, Default: `false`
   @param {boolean} [disabled=false] - Disables the button when `true`, Default: `false`
-  @param {object} [tracker={}] - Tracker object to be sent from outside to change the state of the button., Default: `{}`
-  @param {number} [completion_timeout=600] - How long to wait before `saved` event is fired, and the UI state reverts back to normal, Default: `600`
-  @param {number} [error_timeout=3000] - How long to wait before `error` event is fired, and the UI state reverts back to normal, Default: `3000`
+  @param {ButtonTracker} [tracker=undefined] - Tracker object to be sent from outside to change the state of the button., Default: `undefined`
+  @param {number} [completion_timeout=600] - Specifies the duration to wait after the `saved` event, before the UI state returns to normal, Default: `600`
+  @param {number} [error_timeout=3000] - Specifies the duration to wait after the `error` event, before the UI state returns to normal, Default: `3000`
   @param {string} [class=""] - CSS classes for Button container, Default: `""`
   @method `saving()` - call this method on form saving state
   @method `saved(callback, timeout)` - call this method after form saved
@@ -55,6 +56,7 @@
   /**
    * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
    * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   * @typedef {import('@kws3/ui/types').ButtonTracker} ButtonTracker
    */
 
   /**
@@ -64,7 +66,7 @@
   export let size = "",
     /**
      * Color of the Button
-     * @type {Exclude<ColorOptions , 'success'>}
+     * @type {ColorOptions}
      */
     color = "primary",
     /**
@@ -97,6 +99,7 @@
     disabled = false,
     /**
      * Tracker object to be sent from outside to change the state of the button.
+     * @type {ButtonTracker}
      */
     tracker = {
       saving: false,
@@ -104,11 +107,11 @@
       error: false,
     },
     /**
-     * How long to wait before `saved` event is fired, and the UI state reverts back to normal
+     * Specifies the duration to wait after the `saved` event, before the UI state returns to normal
      */
     completion_timeout = 600,
     /**
-     * How long to wait before `error` event is fired, and the UI state reverts back to normal
+     * Specifies the duration to wait after the `error` event, before the UI state returns to normal
      */
     error_timeout = 3000;
 

package/canvas/Canvas.svelte

@@ -0,0 +1,263 @@
+<!--
+  @component
+
+
+  @param {string} [width="250px"] - Canvas width, Default: `"250px"`
+  @param {string} [height="250px"] - Canvas height, Default: `"250px"`
+  @param {string |'Pen'|'Eraser'} [active_tool=""] - Default active tool, Default: `""`
+  @param {string} [image=""] - The Data created in the canvas by the user, Default: `""`
+  @param {boolean} [is_touched=false] - Determines whether canvas is touched or not, Default: `false`
+  @param {number} [pen_width=2] - `CONST` pen width, Default: `2`
+  @param {number} [eraser_width=6] - `CONST` Eraser width, Default: `6`
+  @param {string} [pen_color="#ff0000"] - line color, Default: `"#ff0000"`
+  @param {string} [background_image=""] - `CONST` Background image for the canvas, Default: `""`
+  @param {boolean} [readonly=false] - `CONST` Determines whether canvas is readonly or not, Default: `false`
+  @param {boolean} [disabled=false] - `CONST` Determines whether canvas is disabled or not, Default: `false`
+  @param {number} [initial_scale=1] - Initial transform scale for the canvas before expansion, Default: `1`
+  @param {string} [expand_from="center"] - The direction from which the canvas should expand.
+'top', 'bottom', 'left', 'right', 'center' and also 'n%', Default: `"center"`
+  @param {string} [expand_to="center"] - The direction to which the canvas should expand.
+'top', 'bottom', 'left', 'right', 'center' and also 'n%', Default: `"center"`
+  @param {number} [expand_scale=50] - Transform scale of the canvas on expansion
+value in percentage %, Default: `50`
+  @param {array} [actions=[]] - `CONST` List of actions toolbar, Default: `[]`
+  @param {Extract<Positions, 'bottom'|'top'>} [toolbar_placement=bottom] - Default position of the action toolbar, Default: `bottom`
+  @param {object} [tools={}] - List of tools available for user to select from, Default: `{}`
+  @param {string} [cy=""] - data-cy attribute for cypress, Default: `""`
+  @param {boolean} [has_controls=true] - Determines control tools available or not, Default: `true`
+  @param {Extract<Positions, 'start'|'center'|'end'>} [control_position=center] - `CONST` Default position of controls, Default: `center`
+  @method `getActions()` - GetActions method
+
+-->
+
+<div
+  class="
+    kws-canvas-wrapper
+    {toolbar_placement === 'top' ? 'has-toolbar-top' : ''}
+  "
+  class:expanded
+  style:width
+  style:--kws-peninput-height={height}
+  style:--kws-peninput-width={width}
+  style:transform="scale({expanded ? 1 + expand_scale * 0.01 : initial_scale})"
+  style:transform-origin="{expand_from}
+  {expand_to}"
+  data-cy={cy}>
+  <PenInput {...$$props} {expanded} bind:DRAWING_PAD on:change={onChange} />
+
+  {#if has_controls}
+    <PenControls
+      {...$$props}
+      on:changeColor={({ detail: { color } }) => changeColor(color)}
+      on:setTool={({ detail: { tool } }) => setTool(tool)}
+      on:undo={() => undo()}
+      on:redo={() => redo()}
+      on:reset={() => reset()}
+      on:toggleExpand={() => toggleExpand()}
+      {active_tool}
+      default_color={pen_color}
+      bind:can_undo
+      bind:can_redo
+      bind:show_tools />
+  {/if}
+</div>
+
+<script>
+  // @ts-nocheck
+
+  import PenInput from "./PenInput.svelte";
+  import PenControls from "./PenControls.svelte";
+  import { onMount } from "svelte";
+
+  /**
+   * @typedef {import('@kws3/ui/types').Positions} Positions
+   */
+
+  /**
+   * Canvas width
+   */
+  export let width = "250px";
+  /**
+   * Canvas height
+   */
+  export let height = "250px";
+  /**
+   * Default active tool
+   * @type {string |'Pen'|'Eraser'}
+   */
+  export let active_tool = "";
+  /**
+   * The Data created in the canvas by the user
+   */
+  export let image = "";
+  /**
+   *  Determines whether canvas is touched or not
+   */
+  export let is_touched = false;
+
+  /**
+   *  pen width
+   */
+  export const pen_width = 2;
+  /**
+   * Eraser width
+   */
+  export const eraser_width = 6;
+  /**
+   * line color
+   */
+  export let pen_color = "#ff0000";
+  /**
+   * Background image for the canvas
+   */
+  export const background_image = "";
+  /**
+   * Determines whether canvas is readonly or not
+   */
+  export const readonly = false;
+  /**
+   * Determines whether canvas is disabled or not
+   */
+  export const disabled = false;
+
+  /**
+   * Initial transform scale for the canvas before expansion
+   */
+  export let initial_scale = 1;
+  /**
+   * The direction from which the canvas should expand.
+   * 'top', 'bottom', 'left', 'right', 'center' and also 'n%'
+   */
+  export let expand_from = "center";
+  /**
+   * The direction to which the canvas should expand.
+   * 'top', 'bottom', 'left', 'right', 'center' and also 'n%'
+   */
+  export let expand_to = "center";
+  /**
+   * Transform scale of the canvas on expansion
+   * value in percentage %
+   */
+  export let expand_scale = 50;
+  /**
+   * List of actions toolbar
+   */
+  export const actions = [
+    "controls",
+    "colorpicker",
+    "undo",
+    "redo",
+    "reset",
+    "expand",
+  ];
+  /**
+   * Default position of the action toolbar
+   * @type {Extract<Positions, 'bottom'|'top'>}
+   */
+  export let toolbar_placement = "bottom";
+  /**
+   * List of tools available for user to select from
+   */
+  export let tools = {};
+
+  /**
+   * data-cy attribute for cypress
+   */
+  export let cy = "";
+
+  /**
+   *  Determines control tools available or not
+   */
+  export let has_controls = true;
+  /**
+   * Default position of controls
+   * @type {Extract<Positions, 'start'|'center'|'end'>}
+   */
+  export const control_position = "center";
+
+  let DRAWING_PAD;
+
+  let can_undo = false,
+    can_redo = false,
+    expanded = false,
+    show_tools = false,
+    settingFlag = false;
+
+  let penColor = "000000";
+
+  $: penColor =
+    typeof window !== "undefined" &&
+    window.CSS &&
+    window.CSS.supports("color", pen_color)
+      ? pen_color
+      : "#000000";
+  $: is_touched = can_undo;
+  $: expanded, setScaleFactor();
+  $: image, syncImage();
+  $: penColor, setColor();
+
+  onMount(() => {
+    setTool(active_tool);
+  });
+
+  export function getActions() {
+    if (DRAWING_PAD) {
+      return DRAWING_PAD;
+    }
+    return null;
+  }
+
+  function setTool(tool) {
+    active_tool = tool;
+    show_tools = false;
+    DRAWING_PAD && DRAWING_PAD.setTool(tool);
+  }
+
+  function setScaleFactor() {
+    DRAWING_PAD &&
+      DRAWING_PAD.setScaleFactor(
+        expanded ? 1 + expand_scale * 0.01 : initial_scale
+      );
+  }
+
+  function setColor() {
+    DRAWING_PAD && DRAWING_PAD.setColor(`#${penColor}`);
+  }
+
+  function syncImage() {
+    if (!settingFlag) {
+      DRAWING_PAD && DRAWING_PAD.syncImage(image);
+    }
+  }
+
+  function changeColor(color) {
+    penColor = color.substring(1);
+    setColor();
+  }
+  function toggleExpand() {
+    expanded = !expanded;
+  }
+
+  function undo() {
+    DRAWING_PAD && DRAWING_PAD.undo();
+  }
+
+  function redo() {
+    DRAWING_PAD && DRAWING_PAD.redo();
+  }
+
+  function reset() {
+    DRAWING_PAD && DRAWING_PAD.reset();
+    can_undo = false;
+    can_redo = false;
+  }
+
+  function onChange({ detail }) {
+    let { canvasImage, canRedo, canUndo } = detail;
+    settingFlag = true;
+    image = canvasImage;
+    can_undo = canUndo;
+    can_redo = canRedo;
+    settingFlag = false;
+  }
+</script>

package/canvas/ESignature.svelte

@@ -0,0 +1,101 @@
+<!--
+  @component
+
+
+  @param {string} [image=""] - The Data created in the canvas by the user (readonly) (base64), Default: `""`
+  @param {boolean} [is_touched=false] - (readonly) Determines whether canvas is touched or not, Default: `false`
+  @param {string} [width="520px"] - Canvas width, Default: `"520px"`
+  @param {string} [height="170px"] - Canvas height, Default: `"170px"`
+  @param {string} [background_image=""] - Background image for the canvas, Default: `""`
+  @param {boolean} [readonly=false] - Determines whether canvas is readonly or not, Default: `false`
+  @param {boolean} [disabled=false] - Determines whether canvas is disabled or not, Default: `false`
+  @param {string} [expand_from="center"] - The direction to which the canvas should expand, Default: `"center"`
+  @param {string} [expand_to="center"] - The direction to which the canvas should expand, Default: `"center"`
+  @param {number} [expand_scale=50] - Transform scale of the canvas on expansion, Default: `50`
+  @param {array} [actions=[]] - `CONST` List of actions toolbar, Default: `[]`
+  @param {Extract<Positions, 'start'|'center'|'end'>} [control_position=center] - Default position of controls, Default: `center`
+
+-->
+<Canvas
+  bind:image
+  bind:is_touched
+  {width}
+  {height}
+  {background_image}
+  {readonly}
+  {disabled}
+  {control_position}
+  {tools}
+  {expand_from}
+  {expand_to}
+  {expand_scale}
+  active_tool="Pen"
+  {actions}
+  has_controls={!readonly && !disabled}
+  toolbar_placement={!readonly && !disabled ? "top" : undefined} />
+
+<script>
+  import { Canvas, Pen } from "@kws3/ui";
+  /**
+   * @typedef {import('@kws3/ui/types').Positions} Positions
+   */
+
+  /**
+   * The Data created in the canvas by the user (readonly) (base64)
+   */
+  export let image = "",
+    /**
+     *  (readonly) Determines whether canvas is touched or not
+     */
+    is_touched = false,
+    /**
+     * Canvas width
+     */
+    width = "520px",
+    /**
+     * Canvas height
+     */
+    height = "170px",
+    /**
+     * Background image for the canvas
+     */
+    background_image = "",
+    /**
+     * Determines whether canvas is readonly or not
+     */
+    readonly = false,
+    /**
+     * Determines whether canvas is disabled or not
+     */
+    disabled = false,
+    /**
+     * The direction from which the canvas should expand.
+     * 'top', 'bottom', 'left', 'right', 'center' and also 'n%'
+     */
+    expand_from = "center",
+    /**
+     * The direction to which the canvas should expand.
+     * 'top', 'bottom', 'left', 'right', 'center' and also 'n%'
+     */
+    expand_to = "center",
+    /**
+     * Transform scale of the canvas on expansion
+     * value in percentage %
+     */
+    expand_scale = 50,
+    /**
+     * Default position of controls
+     * @type {Extract<Positions, 'start'|'center'|'end'>}
+     */
+    control_position = "center",
+    /**
+     * List of actions toolbar
+     */
+    actions = [
+    "undo",
+    "redo",
+    "reset",
+    ];
+
+    let tools = { Pen };
+</script>