@kws3/ui 4.1.4 → 4.2.0

package/CHANGELOG.mdx

@@ -1,3 +1,10 @@
+## 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
   

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "4.1.4",
+  "version": "4.2.0",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "svelte": "index.js",
@@ -29,11 +29,11 @@
     "@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.2.2"
   },
-  "gitHead": "69ffd54529ddc0d7ccddbc0304d48acff0724c4c"
+  "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/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/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

@@ -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);
+  };
+}