@kws3/ui 4.1.3 → 4.2.0

package/CHANGELOG.mdx

@@ -1,92 +1,105 @@
-# 4.1.3
+## 4.2.0
+  - Fix grid row transitions to be global
+  - Add `createScaler` and `scale` functions to utils
+  - `GridView` is no longer wrapped in `div.data-table`
+  - New component `StickyColumnsTableWrapper` added
+  - Use dynamic scroll shadows for `InfiniteList` component
+
+## 4.1.4
+  - add `black` and `white` as valid color types
+  
+## 4.1.3
   - Ensure transitions are global for `Modal`, `CardModal` and `ActionSheet` components
   - `InfiniteList` - do not fake a scroll event on a resize event, fixes loading bugs
 
-# 4.1.2
+## 4.1.2
   - `MultiSelect` - fixed issue where raw object were initially outputted (if provided)
   - `SearchableSelect and `MultiSelect` (Async): resolved issue with the 'active' class not attaching to the most matched item in dropdown options
   - `SearchableSelect` - improved behavior, ensuring the `tab` key correctly loses focus
   - `AutoComplete` - dropdown now closes on loss of focus triggered by the `tab` key
 
-# 4.1.1
+## 4.1.1
   - `DatePicker` - add support for configurable border radius
   - `DatePicker` - add support for configurable box shadow
   - `DatePicker` - bug fix on date range selection colors
 
-# 4.1.0
+## 4.1.0
   - New component `InfiniteList` Added
 
-# 4.0.3
+## 4.0.3
   - `ScrollableList` - bugfixes, and add support for removing items without affecting scroll position
 
-# 4.0.2
+## 4.0.2
   - `ToggleButtons` - add support for count tags, and fix css not applying
 
-# 4.0.1
+## 4.0.1
   - `ScrollableList` - add support for custom iteration key for keyed each block
 
-# 4.0.0
+## 4.0.0
   - add svelte 4 compatibility
   
 --------------
-# 2.3.3
+## 2.3.4
+  - add `black` and `white` as valid color types
+
+## 2.3.3
   - `InfiniteList` - do not fake a scroll event on a resize event, fixes loading bugs
 
-# 2.3.2
+## 2.3.2
   - `MultiSelect` - fixed issue where raw object were initially outputted (if provided)
   - `SearchableSelect and `MultiSelect` (Async): resolved issue with the 'active' class not attaching to the most matched item in dropdown options
   - `SearchableSelect` - improved behavior, ensuring the `tab` key correctly loses focus
   - `AutoComplete` - dropdown now closes on loss of focus triggered by the `tab` key
 
 
-# 2.3.1
+## 2.3.1
   - `DatePicker` - add support for configurable border radius
   - `DatePicker` - add support for configurable box shadow
   - `DatePicker` - bug fix on date range selection colors
 
-# 2.3.0
+## 2.3.0
   - New component `InfiniteList` Added
 
-# 2.2.5
+## 2.2.5
   - `ScrollableList` - bugfixes, and add support for removing items without affecting scroll position
 
-# 2.2.4
+## 2.2.4
   - `ToggleButtons` - add support for count tags, and fix css not applying
 
-# 2.2.3
+## 2.2.3
   - `ScrollableList` - add support for custom iteration key for keyed each block
 
-# 2.2.2
+## 2.2.2
   - `ScrollableList` - fix jumping issue when edge of scrollable regions are reached
 
-# 2.2.1
+## 2.2.1
   - `Icon` fix icon sizes when line-awesome icons are loaded
   - `Icon` fix material icons when icon family is set globally
   - `Icon` add support for adding custom icon families
   - `Chart` fix, ensure ApexCharts is loaded before trying to initialise it
 
-# 2.2.0
+## 2.2.0
   - Fix bug where `ScrollableList` component puts extra padding on top of list when fast scroll to top
   - `ScrollableList` - Fix bug to reset internal positioning props when data changes
   - fix Popperjs position strategy to work better on mobile by default, affects `SearchableSelect`, `MultiSelect` and `AutoComplete` components
   - `ActionSheet` - Update styling to make it wokr better visually on desktop
 
-# 2.1.4
+## 2.1.4
   - Fix bug where disabled `Checkbox` components wrongly appeared as if they were checked
   - Allow adding CSS classes to the input field in `NumberInput` component
 
-# 2.1.3
+## 2.1.3
  - `PasswordInput` - add support for field `autocomplete` and `required`
  - `PasswordValidator` - fix `valid` field binding
 
-# 2.1.2
+## 2.1.2
  - `PasswordInput` - add support for field `name`
  - `PasswordInput` - fix spacing when icons are turned off
 
-# 2.1.1
+## 2.1.1
  - Package `text-mask-core` moved to @kws3 namespace.
 
-# 2.1.0
+## 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`

package/charts/Chart.svelte

@@ -16,7 +16,7 @@ This is to prevent unnecessary event subscriptions., Default: `[]`
 <div class="kws-chart {klass}" bind:this={canvas} />
 
 <script>
-  import { createEventDispatcher, onMount } from "svelte";
+  import { createEventDispatcher, onMount, onDestroy } from "svelte";
   import { merge } from "./utils";
 
   const fire = createEventDispatcher();
@@ -88,12 +88,11 @@ This is to prevent unnecessary event subscriptions., Default: `[]`
     const module = await import("apexcharts/dist/apexcharts.esm");
     ApexCharts = module.default;
     window.ApexCharts = ApexCharts;
-
     init();
+  });
 
-    return () => {
-      chart && chart.destroy();
-    };
+  onDestroy(() => {
+    if (chart) chart.destroy();
   });
 
   let Events;

package/datagrid/GridView/GridCell.svelte

@@ -11,7 +11,7 @@
 -->
 
 <td class={classNames(column, row)} style={styles(column, row)}>
-  <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
+  <!--  eslint-disable-next-line svelte/no-at-html-tags -->
   {@html transforms(column, row)}
 </td>
 

package/datagrid/GridView/GridRow.svelte

@@ -28,7 +28,7 @@
 -->
 {#if transition}
   <tr
-    in:fly={{ x: 20, delay: 25 * row_index }}
+    in:fly|global={{ x: 20, delay: 25 * row_index }}
     on:click|stopPropagation={rowClick}
     class:is-selected={activated && visualActivationOnClick}
     class:is-checked={checked}>

package/datagrid/GridView/GridView.svelte

@@ -32,59 +32,60 @@
   - `_forwardEvent`
 
 -->
-<div class="data-table" data-cy="data-table">
-  <table
-    class="table is-fullwidth {is_striped ? 'is-striped' : ''} {is_narrow
-      ? 'is-narrow'
-      : ''} {clickableRows ? 'is-hoverable' : ''} is-bordered {klass}">
-    <thead>
-      <tr>
-        {#if bulk_actions}
-          <th width="30">
-            <Checkbox
-              size="medium"
-              color={selectAllCheckboxColor}
-              style="margin:0;"
-              inverted={true}
-              bind:checked={selectAll}
-              on:change={changed} />
-          </th>
+
+<table
+  class="table kws-grid-view is-fullwidth {is_striped
+    ? 'is-striped'
+    : ''} {is_narrow ? 'is-narrow' : ''} {clickableRows
+    ? 'is-hoverable'
+    : ''} is-bordered {klass}">
+  <thead>
+    <tr>
+      {#if bulk_actions}
+        <th style="width:30px">
+          <Checkbox
+            size="medium"
+            color={selectAllCheckboxColor}
+            style="margin:0;"
+            inverted={true}
+            bind:checked={selectAll}
+            on:change={changed} />
+        </th>
+      {/if}
+      {#each column_keys as column}
+        {#if isVisible(column)}
+          <th>{columns[column]}</th>
         {/if}
-        {#each column_keys as column}
-          {#if isVisible(column)}
-            <th>{columns[column]}</th>
-          {/if}
-        {/each}
-      </tr>
-    </thead>
-    <tbody data-cy="grid-view-tbody">
-      {#each data as row, row_index (row[iteration_key])}
-        <svelte:component
-          this={mainRowComponent}
-          on:rowClick
-          on:rowSelectChecked
-          on:_forwardEvent
-          {row_index}
-          {transition}
-          {column_keys}
-          {clickableRows}
-          {visualActivationOnClick}
-          {isVisible}
-          {transforms}
-          {classNames}
-          {styles}
-          {cellComponent}
-          {row}
-          {bulk_actions}
-          {activatedId}
-          {selectedIds}
-          {selectCheckboxColor}
-          {selectCheckboxSize}
-          checked={selectAll} />
       {/each}
-    </tbody>
-  </table>
-</div>
+    </tr>
+  </thead>
+  <tbody data-cy="grid-view-tbody">
+    {#each data as row, row_index (row[iteration_key])}
+      <svelte:component
+        this={mainRowComponent}
+        on:rowClick
+        on:rowSelectChecked
+        on:_forwardEvent
+        {row_index}
+        {transition}
+        {column_keys}
+        {clickableRows}
+        {visualActivationOnClick}
+        {isVisible}
+        {transforms}
+        {classNames}
+        {styles}
+        {cellComponent}
+        {row}
+        {bulk_actions}
+        {activatedId}
+        {selectedIds}
+        {selectCheckboxColor}
+        {selectCheckboxSize}
+        checked={selectAll} />
+    {/each}
+  </tbody>
+</table>
 
 <script>
   import GridRow from "./GridRow.svelte";

package/datagrid/StickyColumnsTableWrapper.svelte

@@ -0,0 +1,107 @@
+<!--
+  @component
+
+
+  @param {string} [outer_class=""] - CSS classes for the outer container, Default: `""`
+  @param {string} [inner_class=""] - CSS classes for the inner container, Default: `""`
+  @param {string} [width="100%"] - CSS value string to determine the width of the inner table, Default: `"100%"`
+  @method `relayout()` - Method to recalculate layouts.
+Call this method when the content of the <slot> changes
+
+  ### Slots
+  - `<slot name="default"  />`
+
+-->
+<svelte:window on:resize={debouncedResize} />
+<div class="kws-sticky-columns-table-wrapper data-table-wrapper {outer_class}">
+  <div class="data-list-inner-wrapper {inner_class}">
+    <div
+      class="data-table has-custom-scrollbar"
+      bind:this={scrollContainer}
+      on:scroll={scrollHandler}>
+      <slot />
+    </div>
+  </div>
+  <div
+    class="fake-shadow-contraint left"
+    style="left: {leftShadowLeft}px;opacity:{needsScroll
+      ? scale(scrollLeft)
+      : 0};">
+    <div class="fake-inner-shadow" />
+  </div>
+  <div
+    class="fake-shadow-contraint right"
+    style="opacity:{needsScroll ? 1 - scale(scrollLeft) : 0};">
+    <div class="fake-inner-shadow" />
+  </div>
+</div>
+
+<script>
+  import { debounce, createScaler } from "@kws3/ui/utils";
+  import { onMount, tick } from "svelte";
+
+  /** CSS classes for the outer container*/
+  export let outer_class = "";
+  /** CSS classes for the inner container*/
+  export let inner_class = "";
+  /** CSS value string to determine the width of the inner table*/
+  export let width = "100%";
+
+  $: width, applyWidth(width);
+
+  let scrollContainer;
+
+  let leftShadowLeft = 0;
+  let scrollWidth = 0;
+  let offsetWidth = 0;
+  let needsScroll = false;
+  let scrollLeft = 0;
+
+  let scale = createScaler([0, 1], [0, 1]);
+
+  onMount(mounted);
+
+  function mounted() {
+    relayout();
+  }
+
+  /**
+   * Method to recalculate layouts.
+   * Call this method when the content of the <slot> changes
+   */
+  export function relayout() {
+    tick().then(() => {
+      leftShadowLeft = -1;
+      needsScroll = false;
+      const stickies = scrollContainer.querySelectorAll(
+        "thead>tr>th.is-sticky-column",
+      );
+
+      stickies.forEach((th) => {
+        leftShadowLeft += th.offsetWidth;
+      });
+
+      scrollWidth = scrollContainer.scrollWidth;
+      offsetWidth = scrollContainer.offsetWidth;
+
+      let diff = scrollWidth - offsetWidth;
+      if (scrollWidth > offsetWidth) {
+        needsScroll = true;
+      }
+      scale = createScaler([0, diff], [0, 1]);
+    });
+  }
+
+  const debouncedResize = debounce(relayout, 350);
+
+  function scrollHandler(e) {
+    scrollLeft = e.target.scrollLeft;
+  }
+
+  function applyWidth(width) {
+    tick().then(() => {
+      scrollContainer.querySelector("table.table").style.width = width;
+      debouncedResize();
+    });
+  }
+</script>

package/datagrid/TileView/TileViewItem.svelte

@@ -23,7 +23,7 @@
   {#each column_keys as column}
     {#if isVisible(column)}
       <div class={classNames(column, row)} style={styles(column, row)}>
-        <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
         {@html transforms(column, row)}
       </div>
     {/if}

package/form/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="svelte" />
 export function makeForms(items: any): any[] | {
     formData: import("svelte/store").Writable<any>;
     errors: import("svelte/store").Readable<any>;

package/form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAGA;;;;;;;;;;EAWC;AA2ID,0CAA4C;AAE5C,0CAAqC;AAErC,8EAA8E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":";AAGA;;;;;;;;;;EAWC;AA2ID,0CAA4C;AAE5C,0CAAqC;AAErC,8EAA8E"}

package/helpers/Dialog/Dialog.svelte

@@ -38,7 +38,7 @@ For internal use only - not part of config object, Default: `""`
       {/if}
       <div class="column">
         <div>
-          <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
           <span class="is-block">{@html _text}</span>
           {#if _type === "prompt"}
             <div class="field" style="margin-top:0.5rem;">

package/helpers/FloatingUI/Floatie.svelte

@@ -49,7 +49,7 @@
         <h4 class="title is-5 is-marginless">{title}</h4>
       {/if}
 
-      <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
+      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
       <p>{@html message}</p>
 
       {#if !persistent}

package/helpers/FloatingUI/FloatingUIOutput.svelte

@@ -13,7 +13,7 @@
           class="kws-floatie-item has-{variant} is-{item.position}"
           id={item.id}
           animate:flip={{ easing: sineOut }}
-          transition:fly={{
+          transition:fly|global={{
             y: transitionDistance(item.position),
             duration: transitionDuration,
             easing: sineOut,

package/helpers/FloatingUI/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="svelte" />
 export namespace FloatiesStore {
     export { create };
     export { remove };
@@ -35,7 +36,7 @@ declare const subscribe: (this: void, run: import("svelte/store").Subscriber<{
         snackbar: any[];
         toast: any[];
     };
-}>, invalidate?: (value?: {
+}>, invalidate?: import("svelte/store").Invalidator<{
     top: {
         notification: any[];
         snackbar: any[];
@@ -46,6 +47,6 @@ declare const subscribe: (this: void, run: import("svelte/store").Subscriber<{
         snackbar: any[];
         toast: any[];
     };
-}) => void) => import("svelte/store").Unsubscriber;
+}>) => import("svelte/store").Unsubscriber;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/helpers/FloatingUI/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":";;;;;AA4GA;;GAEG;AAEH;;GAEG;AACH,4BAFU,WAAW,CAgBnB;AAEF;;GAEG;AACH,qBAFU,WAAW,CAiBnB;AAEF;;GAEG;AACH,wBAFU,WAAW,CAiBnB;0BA5DW,OAAO,gBAAgB,EAAE,WAAW;AAxD/C;;;EA6BC;AAED,0CAYC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":";;;;;;AA4GA;;GAEG;AAEH;;GAEG;AACH,4BAFU,WAAW,CAgBnB;AAEF;;GAEG;AACH,qBAFU,WAAW,CAiBnB;AAEF;;GAEG;AACH,wBAFU,WAAW,CAiBnB;0BA5DW,OAAO,gBAAgB,EAAE,WAAW;AAxD/C;;;EA6BC;AAED,0CAYC"}

package/helpers/InfiniteList.svelte

@@ -21,12 +21,14 @@ while more items are loading
 {#if hasResizeObserver}
   <div
     bind:this={viewport}
-    class="kws-scrollable-list kws-infinite-list with-resize-observer {klass}"
-    on:scroll={handle_scroll}
+    class="kws-infinite-list with-resize-observer {klass}"
     style="height:{height};{style}"
     use:resizeObserver
     on:resize={resize}>
-    <div bind:this={contents}>
+    <div
+      class="kws-infinite-list-inner"
+      on:scroll={handle_scroll}
+      bind:this={contents}>
       {#each visible as item (item.index)}
         <div class="row">
           <!--Default slot for list view items-->
@@ -34,18 +36,30 @@ while more items are loading
         </div>
       {/each}
       <!--Optional slot to display a loading graphic at the bottom of the list
-        while more items are loading-->
+          while more items are loading-->
       <slot name="loader" />
     </div>
+    <div
+      class="fake-shadow-contraint top"
+      style="opacity:{needsScroll ? scale(scrollTop) : 0};">
+      <div class="fake-inner-shadow" />
+    </div>
+    <div
+      class="fake-shadow-contraint bottom"
+      style="opacity:{needsScroll ? 1 - scale(scrollTop) : 0};">
+      <div class="fake-inner-shadow" />
+    </div>
   </div>
 {:else}
   <div
     bind:this={viewport}
-    class="kws-scrollable-list kws-infinite-list {klass}"
-    on:scroll={handle_scroll}
+    class="kws-infinite-list {klass}"
     style="height:{height};{style}"
-    bind:offsetHeight={viewport_height}>
-    <div bind:this={contents}>
+    bind:offsetHeight={viewportHeight}>
+    <div
+      class="kws-infinite-list-inner"
+      on:scroll={handle_scroll}
+      bind:this={contents}>
       {#each visible as item (item.index)}
         <div class="row">
           <!--Default slot for list view items-->
@@ -53,24 +67,72 @@ while more items are loading
         </div>
       {/each}
       <!--Optional slot to display a loading graphic at the bottom of the list
-        while more items are loading-->
+          while more items are loading-->
       <slot name="loader" />
     </div>
+    <div
+      class="fake-shadow-contraint top"
+      style="opacity:{needsScroll ? scale(scrollTop) : 0};">
+      <div class="fake-inner-shadow" />
+    </div>
+    <div
+      class="fake-shadow-contraint bottom"
+      style="opacity:{needsScroll ? 1 - scale(scrollTop) : 0};">
+      <div class="fake-inner-shadow" />
+    </div>
   </div>
 {/if}
 
 <style>
   .kws-infinite-list {
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
     position: relative;
     height: 100%;
   }
+
+  .kws-infinite-list-inner {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .fake-shadow-contraint {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 20px;
+    overflow: hidden;
+  }
+  .fake-shadow-contraint .fake-inner-shadow {
+    position: absolute;
+    left: 0;
+    top: -1px;
+    width: 100%;
+    height: 1px;
+    box-shadow:
+      0 0 6px 0 #000,
+      0 0 12px 0 #000,
+      0 0 18px 0 #000,
+      0 0 20px 0 #000;
+  }
+
+  .fake-shadow-contraint.bottom {
+    top: auto;
+    bottom: 0;
+  }
+
+  .fake-shadow-contraint.bottom .fake-inner-shadow {
+    top: auto;
+    bottom: -1px;
+  }
 </style>
 
 <script>
   import { hasResizeObserver, resizeObserver } from "@kws3/ui/resizeObserver";
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, tick } from "svelte";
+  import { createScaler } from "@kws3/ui/utils";
 
   const fire = createEventDispatcher();
   /**
@@ -103,18 +165,28 @@ while more items are loading
   // local state
   let viewport,
     contents,
-    viewport_height = 0,
+    viewportHeight = 0,
+    scrollHeight = 0,
+    offsetHeight = 0,
     visible,
     fired = false;
 
+  let scale = createScaler([0, 1], [0, 1]);
+
+  let needsScroll = false,
+    scrollTop = 0;
+
   $: visible = items.slice().map((data, i) => ({
     index: iteration_key ? data[iteration_key] : i,
     data,
   }));
 
+  $: viewportHeight, visible, relayout();
+
   function handle_scroll() {
-    const { scrollTop, scrollHeight } = viewport;
-    let offset = scrollHeight - viewport_height - scrollTop;
+    scrollHeight = contents.scrollHeight;
+    scrollTop = contents.scrollTop;
+    let offset = scrollHeight - viewportHeight - scrollTop;
     // fire on:end event if we scrolled past the end_offset
     if (offset <= end_offset) {
       if (!fired) {
@@ -130,6 +202,21 @@ while more items are loading
   }
 
   const resize = () => {
-    viewport_height = viewport.offsetHeight;
+    viewportHeight = viewport.offsetHeight;
   };
+
+  export function relayout() {
+    tick().then(() => {
+      needsScroll = false;
+
+      scrollHeight = contents.scrollHeight;
+      offsetHeight = contents.offsetHeight;
+
+      let diff = scrollHeight - offsetHeight;
+      if (scrollHeight > offsetHeight) {
+        needsScroll = true;
+      }
+      scale = createScaler([0, diff], [0, 1]);
+    });
+  }
 </script>

package/helpers/Panel.svelte

@@ -48,7 +48,7 @@ This will not work if there is no title area
       <div class="level is-mobile">
         <div class="level-left">
           <div class="level-item">
-            <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
             <h2 class="subtitle">{@html title}</h2>
           </div>
         </div>
@@ -74,7 +74,7 @@ This will not work if there is no title area
             </div>
           {/if}
           <div class="level-item">
-            <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
             <h2 class="subtitle is-6">{@html subtitle}</h2>
           </div>
           <span class="collapsor level-item">

package/index.d.ts

@@ -53,6 +53,7 @@ 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 StickyColumnsTableWrapper } from "./datagrid/StickyColumnsTableWrapper.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";

package/index.js

@@ -79,6 +79,7 @@ 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 StickyColumnsTableWrapper } from "./datagrid/StickyColumnsTableWrapper.svelte";
 
 export { default as Chart } from "./charts/Chart.svelte";
 export { default as DonutChart } from "./charts/DonutChart.svelte";

package/internal/DrawingPad.d.ts

@@ -69,14 +69,14 @@ export class DrawingPad {
     setColor(color: any): void;
 }
 export namespace Pen {
-    const name: string;
-    const icon: string;
+    let name: string;
+    let icon: string;
     function draw(instance: any): void;
 }
 export namespace Eraser {
-    const name_1: string;
+    let name_1: string;
     export { name_1 as name };
-    const icon_1: string;
+    let icon_1: string;
     export { icon_1 as icon };
     export function draw_1(instance: any): void;
     export { draw_1 as draw };

package/internal/DrawingPad.js

@@ -153,7 +153,7 @@ export class DrawingPad {
       0,
       0,
       this.canvas.width,
-      this.canvas.height
+      this.canvas.height,
     );
   }
 
@@ -179,7 +179,7 @@ export class DrawingPad {
           0,
           0,
           this.canvas.width,
-          this.canvas.height
+          this.canvas.height,
         );
         if (callBackFn) {
           callBackFn();

package/internal/UndoManager.d.ts

@@ -4,11 +4,11 @@ declare class UndoManager {
     index: number;
     isExecuting: boolean;
     callback: any;
-    execute(command: any, action: any): UndoManager;
-    add(command: any): UndoManager;
+    execute(command: any, action: any): this;
+    add(command: any): this;
     setCallback(callbackFunc: any): void;
-    undo(): UndoManager;
-    redo(): UndoManager;
+    undo(): this;
+    redo(): this;
     clear(): void;
     hasUndo(): boolean;
     hasRedo(): boolean;

package/internal/UndoManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UndoManager.d.ts","sourceRoot":"","sources":["UndoManager.js"],"names":[],"mappings":";AAAA;IAEI,gBAAkB;IAClB,cAAe;IACf,qBAAwB;IACxB,cAAoB;IAGtB,gDAQC;IAED,+BAcC;IAED,qCAEC;IAED,oBAWC;IAED,oBAWC;IAED,cAOC;IACD,mBAEC;IACD,mBAEC;IACD,qBAEC;CACF"}
+{"version":3,"file":"UndoManager.d.ts","sourceRoot":"","sources":["UndoManager.js"],"names":[],"mappings":";AAAA;IAEI,gBAAkB;IAClB,cAAe;IACf,qBAAwB;IACxB,cAAoB;IAGtB,yCAQC;IAED,wBAcC;IAED,qCAEC;IAED,aAWC;IAED,aAWC;IAED,cAOC;IACD,mBAEC;IACD,mBAEC;IACD,qBAEC;CACF"}

package/keyboard/index.d.ts

@@ -1,19 +1,20 @@
+/// <reference types="svelte" />
 /**
  * @param {string | number} definition - can be a string like 'Enter', 'Tab' or number as keyCode, also allow combination key like 'ctrl+d', 'ctrl+alt+x'
  * @param {boolean} CommandKey - if true, in mac 'ctrl' key binding will be shift on 'command' key.
  * @returns {import("svelte/action").Action} .
  */
 export function makeKeyDefinition(definition: string | number, CommandKey?: boolean): import("svelte/action").Action;
-export let enter: import("svelte/action").Action<HTMLElement, any, any>;
-export let tab: import("svelte/action").Action<HTMLElement, any, any>;
-export let escape: import("svelte/action").Action<HTMLElement, any, any>;
-export let space: import("svelte/action").Action<HTMLElement, any, any>;
-export let leftarrow: import("svelte/action").Action<HTMLElement, any, any>;
-export let rightarrow: import("svelte/action").Action<HTMLElement, any, any>;
-export let downarrow: import("svelte/action").Action<HTMLElement, any, any>;
-export let uparrow: import("svelte/action").Action<HTMLElement, any, any>;
-export let backspace: import("svelte/action").Action<HTMLElement, any, any>;
-export let del: import("svelte/action").Action<HTMLElement, any, any>;
+export let enter: import("svelte/action").Action<HTMLElement, undefined, any>;
+export let tab: import("svelte/action").Action<HTMLElement, undefined, any>;
+export let escape: import("svelte/action").Action<HTMLElement, undefined, any>;
+export let space: import("svelte/action").Action<HTMLElement, undefined, any>;
+export let leftarrow: import("svelte/action").Action<HTMLElement, undefined, any>;
+export let rightarrow: import("svelte/action").Action<HTMLElement, undefined, any>;
+export let downarrow: import("svelte/action").Action<HTMLElement, undefined, any>;
+export let uparrow: import("svelte/action").Action<HTMLElement, undefined, any>;
+export let backspace: import("svelte/action").Action<HTMLElement, undefined, any>;
+export let del: import("svelte/action").Action<HTMLElement, undefined, any>;
 declare namespace _default {
     export { enter };
     export { tab };

package/keyboard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAQA;;;;GAIG;AAEH,8CALW,MAAM,GAAG,MAAM,eACf,OAAO,GACL,OAAO,eAAe,EAAE,MAAM,CA0D1C;AAED,wEAA8C;AAC9C,sEAA0C;AAC1C,yEAAgD;AAChD,wEAA0C;AAC1C,4EAAsD;AACtD,6EAAwD;AACxD,4EAAsD;AACtD,0EAAkD;AAClD,4EAAsD;AACtD,sEAA6C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":";AAQA;;;;GAIG;AAEH,8CALW,MAAM,GAAG,MAAM,eACf,OAAO,GACL,OAAO,eAAe,EAAE,MAAM,CA2D1C;AAED,8EAA8C;AAC9C,4EAA0C;AAC1C,+EAAgD;AAChD,8EAA0C;AAC1C,kFAAsD;AACtD,mFAAwD;AACxD,kFAAsD;AACtD,gFAAkD;AAClD,kFAAsD;AACtD,4EAA6C"}

package/keyboard/index.js

@@ -54,7 +54,8 @@ export function makeKeyDefinition(definition, CommandKey = false) {
         valid = true;
       }
 
-      if (valid) {
+      if (valid && fire) {
+        // @ts-ignore
         fire(event);
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "4.1.3",
+  "version": "4.2.0",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "svelte": "index.js",
@@ -26,14 +26,14 @@
   },
   "types": "./index.d.ts",
   "dependencies": {
-    "@kws3/text-mask-core": "^5.1.2",
+    "@kws3/text-mask-core": "^5.1.3",
     "apexcharts": "3.33.2",
     "flatpickr": "^4.5.2",
-    "svelte-portal": "^2.1.2",
+    "svelte-portal": "^2.2.1",
     "tippy.js": "^6.3.1"
   },
   "devDependencies": {
-    "typescript": "^5.0.4"
+    "typescript": "^5.2.2"
   },
-  "gitHead": "4fd2b4a801628800fc5498495277ad45b40a01c6"
+  "gitHead": "cc7a86edeb6099b9ac018c0bf73a4134ebf287a3"
 }

package/search/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * @typedef {import('@kws3/ui/types').SearchOptions} SearchOptions - contains search options and fuzzy lib options
- * @typedef {import('@kws3/ui/types').SearchHelper} SearchHelper - returned search helper function which take unction take params `needle` and `haystack`.
+ * @typedef {import('@kws3/ui/types').SearchHelper} SearchHelper - returned search helper function which take function take params `needle` and `haystack`.
  */
 /**
  * @param {SearchOptions} opts
@@ -11,7 +11,7 @@ export function makeSearchEngine(opts: SearchOptions): (needle: string, haystack
  */
 export type SearchOptions = import('@kws3/ui/types').SearchOptions;
 /**
- * - returned search helper function which take unction take params `needle` and `haystack`.
+ * - returned search helper function which take function take params `needle` and `haystack`.
  */
 export type SearchHelper = import('@kws3/ui/types').SearchHelper;
 //# sourceMappingURL=index.d.ts.map

package/search/index.js

@@ -2,7 +2,7 @@ import { fuzzy } from "../internal";
 
 /**
  * @typedef {import('@kws3/ui/types').SearchOptions} SearchOptions - contains search options and fuzzy lib options
- * @typedef {import('@kws3/ui/types').SearchHelper} SearchHelper - returned search helper function which take unction take params `needle` and `haystack`.
+ * @typedef {import('@kws3/ui/types').SearchHelper} SearchHelper - returned search helper function which take function take params `needle` and `haystack`.
  */
 
 /**
@@ -45,7 +45,7 @@ export function makeSearchEngine(opts) {
     let calculatedLimit = maxScore - scoreThreshold;
 
     OPTS = OPTS.filter(
-      (r) => r.score > (calculatedLimit > 0 ? calculatedLimit : 0)
+      (r) => r.score > (calculatedLimit > 0 ? calculatedLimit : 0),
     );
     return OPTS.map((i) => i.original);
   };

package/settings.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="svelte" />
 /**
  * - `defaultIconFamily`: `"fa"` - default icon family
  * - `defaultToastPlacement`: `"bottom"` - default placement of toast notifications

package/settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["settings.js"],"names":[],"mappings":"AAsCA;;;;;;;;;GASG;AAEH,mCAJW,cAAc,QAQxB;6BAlDY,OAAO,gBAAgB,EAAE,cAAc;AADpD;;GAEG;AAEH,wEAAyC;AACzC,4EAAiD;AACjD,+EAA0D;AAC1D,mFAA2D;AAC3D,sEAAsC;AACtC,2EAOG"}
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["settings.js"],"names":[],"mappings":";AAsCA;;;;;;;;;GASG;AAEH,mCAJW,cAAc,QAQxB;6BAlDY,OAAO,gBAAgB,EAAE,cAAc;AADpD;;GAEG;AAEH,wEAAyC;AACzC,4EAAiD;AACjD,+EAA0D;AAC1D,mFAA2D;AAC3D,sEAAsC;AACtC,2EAOG"}

package/styles/Grid.scss

@@ -1,12 +1,20 @@
-$kws-gridview-box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1),
+$kws-gridview-box-shadow:
+  0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1),
   0 0 0 0.0625rem rgba(0, 0, 0, 0.1) !default;
 $kws-gridview-th-background: $table-background-color !default;
 $kws-gridview-th-color: $text !default;
 $kws-gridview-tag-margin: 0 0.125rem 0.125rem 0 !default;
 $kws-gridview-icon-size: 1.5em !default;
-$kws-gridview-checked-row-background: $primary-light !default;
+$kws-gridview-checked-row-background: $info-light !default;
 
-.data-table .table {
+$kws-gridview-active-row-background: $table-row-active-background-color !default;
+$kws-gridview-active-row-color: $table-row-active-color !default;
+
+$kws-gridview-background: $table-background-color !default;
+$kws-gridview-striped-row-background: $table-striped-row-even-background-color !default;
+$kws-gridview-sticky-column-border-color: $border !default;
+
+.table.kws-grid-view {
   box-shadow: $kws-gridview-box-shadow;
   th {
     background: $kws-gridview-th-background;
@@ -69,3 +77,85 @@ $kws-gridview-checked-row-background: $primary-light !default;
     }
   }
 }
+
+.data-table {
+  overflow: auto;
+}
+.kws-sticky-columns-table-wrapper {
+  position: relative;
+
+  .data-table {
+    margin-bottom: 1.5rem;
+    .table {
+      margin-bottom: 0;
+    }
+  }
+
+  .data-table .table {
+    &.is-striped tbody {
+      tr:not(.is-selected):nth-child(odd) td.is-sticky-column {
+        background: $kws-gridview-background;
+      }
+      tr:not(.is-selected):nth-child(even) td.is-sticky-column {
+        background: $kws-gridview-striped-row-background;
+      }
+      tr.is-selected {
+        background-color: transparent;
+        td {
+          background: $kws-gridview-active-row-background;
+          color: $kws-gridview-active-row-color;
+        }
+      }
+    }
+    td,
+    th {
+      &.is-sticky-column {
+        position: sticky;
+        &:first-child {
+          left: 0;
+        }
+      }
+    }
+    &.is-bordered {
+      td.is-sticky-column,
+      th.is-sticky-column {
+        box-shadow: inset -1px 0 0 $kws-gridview-sticky-column-border-color;
+        border-left-width: 0;
+        border-right-width: 0;
+      }
+    }
+    &.has-sticky-columns {
+      margin-bottom: 0px;
+    }
+  }
+
+  .fake-shadow-contraint {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 15px;
+    overflow: hidden;
+    .fake-inner-shadow {
+      position: absolute;
+      top: 0;
+      right: -1px;
+      height: 100%;
+      width: 1px;
+      box-shadow:
+        0 0 6px 0 #000,
+        0 0 9px 0 #000,
+        0 0 15px 0 #000;
+    }
+
+    &.left {
+      right: auto;
+      left: 0;
+      .fake-inner-shadow {
+        right: auto;
+        left: -1px;
+      }
+    }
+  }
+}

package/tsconfig.json

@@ -5,6 +5,8 @@
     "lib": ["es2020", "DOM"],
     "skipLibCheck": true,
     "checkJs": true,
+    "jsx": "react",
+    "esModuleInterop": true,
     // Tells TypeScript to read JS files, as
     // normally they are ignored as source files
     "allowJs": true,

package/types/index.d.ts

@@ -56,7 +56,7 @@ export type SearchOptions = {
 
 export type SearchHelper = (
   needle: string,
-  haystack: Array<string>
+  haystack: Array<string>,
 ) => Array<any>;
 
 export type ValidatePasswordOptions = {

package/types/type-defs/index.d.ts

@@ -7,6 +7,8 @@ export const Colors = [
   "danger",
   "dark",
   "light",
+  "white",
+  "black",
   "link",
 ] as const;
 

package/utils/index.d.ts

@@ -69,6 +69,22 @@ export function randomPercent(min?: number, max?: number): string;
  * @param {string} [fileName=''] - File Name.
  */
 export function fileDownloader(data?: any, fileName?: string): void;
+/**
+ * Scales `value` between `inputRange` and `outputRange`
+ * @param {number} value
+ * @param {[number, number]} inputRange
+ * @param {[number, number]} outputRange
+ * @returns {number}
+ */
+export function scale(value: number, inputRange: [number, number], outputRange: [number, number]): number;
+/**
+ * Returns a function that can scale a `value` between
+ * `inputRange` and `outputRange`
+ * @param {[number, number]} inputRange
+ * @param {[number, number]} outputRange
+ * @returns {function}
+ */
+export function createScaler(inputRange: [number, number], outputRange: [number, number]): Function;
 /**
  * Request an animation before the next repaint.
  * @param {function} [callback=function(){}] - callback function

package/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,+BAHW,MAAM,QACN,MAAM,UAIhB;AAED;;;GAGG;AACH,8BAFW,MAAM,UAQhB;AAED;;;GAGG;AACH,kCAFW,MAAM,OAIhB;AAsBD;;;;;;;;GAQG;AACH,oDAJW,MAAM,WACN,OAAO;;;EA2BjB;AAED;;;GAGG;AACH,+CAFW,MAAM,UAIhB;AAED;;;;GAIG;AACH,qCAFW,MAAM,QAKhB;AAED;;;GAGG;AACH,6BAFW,MAAM,UAKhB;AAED;;;GAGG;AACH,kCAFW,MAAM,UAUhB;AAED;;;;;;;GAOG;AACH,gDAHW,MAAM,QACN,MAAM,UAMhB;AAED;;;;GAIG;AACH,oCAHW,MAAM,QACN,MAAM,UAIhB;AAED;;;;GAIG;AACH,sDAFW,MAAM,QAYhB;AAtID;;;GAGG;AACH,sBAce"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,+BAHW,MAAM,QACN,MAAM,UAIhB;AAED;;;GAGG;AACH,8BAFW,MAAM,UAQhB;AAED;;;GAGG;AACH,kCAFW,MAAM,OAIhB;AAsBD;;;;;;;;GAQG;AACH,oDAJW,MAAM,WACN,OAAO;;;EA2BjB;AAED;;;GAGG;AACH,+CAFW,MAAM,UAIhB;AAED;;;;GAIG;AACH,qCAFW,MAAM,QAKhB;AAED;;;GAGG;AACH,6BAFW,MAAM,UAKhB;AAED;;;GAGG;AACH,kCAFW,MAAM,UAUhB;AAED;;;;;;;GAOG;AACH,gDAHW,MAAM,QACN,MAAM,UAMhB;AAED;;;;GAIG;AACH,oCAHW,MAAM,QACN,MAAM,UAIhB;AAED;;;;GAIG;AACH,sDAFW,MAAM,QAYhB;AAED;;;;;;GAMG;AACH,6BALW,MAAM,cACN,CAAC,MAAM,EAAE,MAAM,CAAC,eAChB,CAAC,MAAM,EAAE,MAAM,CAAC,GACd,MAAM,CAQlB;AAED;;;;;;GAMG;AACH,yCAJW,CAAC,MAAM,EAAE,MAAM,CAAC,eAChB,CAAC,MAAM,EAAE,MAAM,CAAC,YAU1B;AArKD;;;GAGG;AACH,sBAce"}

package/utils/index.js

@@ -143,7 +143,7 @@ export function randomIntegerFromInterval(min = 0, max = Infinity) {
  * @param {number} [max=100] - Maximum Number, Default: `100`
  */
 export function randomPercent(min = 1, max = 100) {
-  return randomIntegerFromInterval(min, max) + "%";
+  return `${randomIntegerFromInterval(min, max)}%`;
 }
 
 /**
@@ -162,3 +162,34 @@ export function fileDownloader(data, fileName = "file_name") {
   a.click();
   window.URL.revokeObjectURL(url);
 }
+
+/**
+ * Scales `value` between `inputRange` and `outputRange`
+ * @param {number} value
+ * @param {[number, number]} inputRange
+ * @param {[number, number]} outputRange
+ * @returns {number}
+ */
+export function scale(value, inputRange, outputRange) {
+  return (
+    ((value - inputRange[0]) * (outputRange[1] - outputRange[0])) /
+      (inputRange[1] - inputRange[0]) +
+    outputRange[0]
+  );
+}
+
+/**
+ * Returns a function that can scale a `value` between
+ * `inputRange` and `outputRange`
+ * @param {[number, number]} inputRange
+ * @param {[number, number]} outputRange
+ * @returns {function}
+ */
+export function createScaler(inputRange, outputRange) {
+  /**
+   * @param {number} value
+   */
+  return function (value) {
+    return scale(value, inputRange, outputRange);
+  };
+}