@likable-hair/svelte 3.3.11 → 3.3.13

package/dist/components/composed/common/MenuOrDrawerOptions.svelte

@@ -48,5 +48,6 @@ $:
   .selectable-list-wrapper {
     background-color: rgb(var(--global-color-background-100));
     overflow: auto;
+    height: 100%
   }
 </style>

package/dist/components/composed/list/DynamicTable.css

@@ -15,4 +15,5 @@
   --dynamic-table-default-hover-color: rgb(var(--global-color-contrast-800), .7);
   --dynamic-table-default-header-border-radius: 5px;
   --dynamic-table-default-header-height: 30px;
+  --dynamic-table-default-row-min-height: auto;
 }

package/dist/components/composed/list/DynamicTable.svelte

@@ -15,7 +15,7 @@
 import { DateTime } from "luxon";
 import { createEventDispatcher, onMount } from "svelte";
 import { quintOut } from "svelte/easing";
-import { crossfade } from "svelte/transition";
+import { crossfade, fade } from "svelte/transition";
 import Filters from "../search/Filters.svelte";
 import ConfirmOrCancelButtons from "../forms/ConfirmOrCancelButtons.svelte";
 import { flip } from "svelte/animate";
@@ -31,10 +31,15 @@ import DynamicFilters from "../search/DynamicFilters.svelte";
 import QuickActions, {} from "../common/QuickActions.svelte";
 import "./DynamicTable.css";
 import Switch from "../../simple/forms/Switch.svelte";
+import CircularLoader from "../../simple/loaders/CircularLoader.svelte";
 onMount(() => {
   updateHeaderHeight();
   window.addEventListener("resize", updateHeaderHeight);
-  return () => window.removeEventListener("resize", updateHeaderHeight);
+  tableContainer.addEventListener("scroll", setReachedBottom);
+  return () => {
+    window.removeEventListener("resize", updateHeaderHeight);
+    tableContainer.removeEventListener("scroll", setReachedBottom);
+  };
 });
 let mainHeader;
 function updateHeaderHeight() {
@@ -43,6 +48,9 @@ function updateHeaderHeight() {
     document.documentElement.style.setProperty("--main-header-height", headerHeight + "px");
   }
 }
+function setReachedBottom() {
+  reachedBottom = tableContainer.scrollHeight - tableContainer.scrollTop === tableContainer.clientHeight;
+}
 const [send, receive] = crossfade({
   duration: 500,
   fallback(node, params) {
@@ -61,8 +69,10 @@ const [send, receive] = crossfade({
 let clazz = {};
 export { clazz as class };
 const dispatch = createEventDispatcher();
-export let headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = void 0, sortDirection = "asc", cellEdit = false, noItemsText = "No items to show", showSelect = false, showSelectContainer = true, selectMode = "single", selectedItems = [], showExpand = false, loading = false, disabled = false, filters = [], searchBarColumns = void 0, searchBarVisible = false, searchBarPlaceholder = "Type to search for identification code, description and MRN...", filtersVisible = false, quickFiltersVisible = false, lang = "en", editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], totalRows = rows.length, searchText = void 0, renderedRowsNumber = 100, sectionRowsNumber = 20, sectionTreshold = 2, backwardTresholdPixel = 100, forwardTresholdPixel = 100;
-let openCellEditor = false, cellEditorActivator, cellEditorContainer, menuElementCellEditor, menuElementQuickFilters, cellEditorInfoActive, saveEditDisabled = false, searchBarInput = void 0, openQuickFilter = false, quickFilterActivator, quickFilterActive, globalBuilder = new FilterBuilder(), slotSelectActionsContainer, isSelectedAll = false, calendarOpened = false, calendarOpened2 = false, selectedIndexes = [], cellEditorIndexRow, cellEditorIndexHeader, cellEditorSubItem, currentSectionNumber = 0, tableBody, tableContainer, userScrolling = true, totalSections = (totalRows - renderedRowsNumber) / sectionRowsNumber;
+export let headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = void 0, sortDirection = "asc", cellEdit = false, noItemsText = "No items to show", showSelect = false, showSelectContainer = true, selectMode = "single", selectedItems = [], showExpand = false, loading = false, disabled = false, filters = [], searchBarColumns = void 0, searchBarVisible = false, searchBarPlaceholder = "Type to search for identification code, description and MRN...", filtersVisible = false, quickFiltersVisible = false, lang = "en", editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], totalRows = rows.length, searchText = void 0, renderedRowsNumber = 100, sectionRowsNumber = 20, sectionThreshold = 2, backwardThresholdPixel = 100, forwardThresholdPixel = 100, uniqueKey = "id", numberOfResultsVisible = false, endLineVisible = false;
+let openCellEditor = false, cellEditorActivator, cellEditorContainer, menuElementCellEditor, menuElementQuickFilters, cellEditorInfoActive, saveEditDisabled = false, searchBarInput = void 0, openQuickFilter = false, quickFilterActivator, quickFilterActive, globalBuilder = new FilterBuilder(), slotSelectActionsContainer, isSelectedAll = false, calendarOpened = false, calendarOpened2 = false, selectedIndexes = [], cellEditorIndexRow, cellEditorIndexHeader, cellEditorSubItem, currentSectionNumber = 0, tableBody, tableContainer, userScrolling = true, reachedBottom = false;
+$:
+  totalSections = (totalRows - renderedRowsNumber) / sectionRowsNumber;
 $:
   hasMoreToRender = totalSections > currentSectionNumber;
 $:
@@ -172,14 +182,14 @@ function handleCancelClick() {
   openQuickFilter = false;
 }
 function handleSelect(item, shiftKeyPressed) {
-  let index = selectedItems.findIndex((i) => i.id == item.id);
+  let index = selectedItems.findIndex((i) => i[uniqueKey] == item[uniqueKey]);
   if (index == -1) {
     if (selectMode == "single") {
       selectedItems = [item];
-      selectedIndexes = [rows.findIndex((r) => r.item.id == item.id)];
+      selectedIndexes = [rows.findIndex((r) => r.item[uniqueKey] == item[uniqueKey])];
     } else if (selectMode == "multiple") {
       if (shiftKeyPressed && selectedIndexes.length > 0 && !isSelectedAll) {
-        let lastSelectedIndex = selectedIndexes[selectedIndexes.length - 1], selectedIndex = rows.findIndex((r) => r.item.id == item.id);
+        let lastSelectedIndex = selectedIndexes[selectedIndexes.length - 1], selectedIndex = rows.findIndex((r) => r.item[uniqueKey] == item[uniqueKey]);
         if (selectedIndex != -1) {
           if (selectedIndex < lastSelectedIndex) {
             let x = lastSelectedIndex;
@@ -187,19 +197,19 @@ function handleSelect(item, shiftKeyPressed) {
             selectedIndex = x;
           }
           for (let i = lastSelectedIndex + 1; i <= selectedIndex; i++) {
-            if (!selectedItems.find((selectedItem) => selectedItem.id == rows[i].item.id)) {
+            if (!selectedItems.find((selectedItem) => selectedItem[uniqueKey] == rows[i].item[uniqueKey])) {
               selectedItems = [...selectedItems, rows[i].item];
             }
           }
         }
       } else {
         selectedItems = [...selectedItems, item];
-        selectedIndexes.push(rows.findIndex((r) => r.item.id == item.id));
+        selectedIndexes.push(rows.findIndex((r) => r.item[uniqueKey] == item[uniqueKey]));
       }
     }
   } else {
-    selectedItems = selectedItems.filter((i) => i.id != item.id);
-    selectedIndexes = selectedIndexes.filter((r) => r != rows.findIndex((r2) => r2.item.id == item.id));
+    selectedItems = selectedItems.filter((i) => i[uniqueKey] != item[uniqueKey]);
+    selectedIndexes = selectedIndexes.filter((r) => r != rows.findIndex((r2) => r2.item[uniqueKey] == item[uniqueKey]));
     isSelectedAll = false;
   }
 }
@@ -216,11 +226,11 @@ function handleSelectAll() {
   }
 }
 function expandRow(row) {
-  let index = expandedRows.findIndex((r) => r.item.id == row.item.id);
+  let index = expandedRows.findIndex((r) => r.item[uniqueKey] == row.item[uniqueKey]);
   if (index == -1) {
     expandedRows = [...expandedRows, row];
   } else {
-    expandedRows = expandedRows.filter((r) => r.item.id != row.item.id);
+    expandedRows = expandedRows.filter((r) => r.item[uniqueKey] != row.item[uniqueKey]);
   }
 }
 function formatDate(dateTime, dateFormat) {
@@ -278,10 +288,12 @@ $:
   if (searchText != void 0)
     handleSearchChange(searchText);
 function handleFiltersChange() {
-  userScrolling = false;
-  currentSectionNumber = 0;
-  tableContainer.scrollTop = 0;
-  setTimeout(() => userScrolling = true, 20);
+  if (!!tableContainer) {
+    userScrolling = false;
+    currentSectionNumber = 0;
+    tableContainer.scrollTop = 0;
+    setTimeout(() => userScrolling = true, 20);
+  }
   dispatch("filtersChange", {
     builder: globalBuilder
   });
@@ -477,14 +489,14 @@ function quickFilterBuilder(builder, quickFilter, clearPreaviousValue = true) {
         builder.where(
           quickFilter.column,
           ">=",
-          DateTime.fromJSDate(from).toString()
+          DateTime.fromJSDate(from).setLocale("it-IT").startOf("day").toString()
         );
       }
       if (!!to) {
         builder.where(
           quickFilter.column,
           "<=",
-          DateTime.fromJSDate(to).toString()
+          DateTime.fromJSDate(to).setLocale("it-IT").endOf("day").toString()
         );
       }
     }
@@ -567,27 +579,68 @@ function handleRemoveFilter(filter) {
   handleSearchChange(searchText);
 }
 function handleLoadForward() {
-  userScrolling = false;
-  let topElementsHeight = 0;
-  for (let i = 0; i < sectionRowsNumber; i++) {
-    topElementsHeight += tableBody?.children.item(i)?.getBoundingClientRect().height || 0;
-  }
-  currentSectionNumber = currentSectionNumber + 1;
-  tableContainer.scrollTop -= topElementsHeight;
-  setTimeout(() => userScrolling = true, 20);
-  if (totalCachedSections - sectionTreshold <= currentSectionNumber && !loading && totalRows > rows.length) {
+  if (renderedRows.length >= renderedRowsNumber) {
+    userScrolling = false;
+    const anchorIndex = renderedRowsNumber - 1;
+    const anchorUniqueKey = renderedRows[anchorIndex].item[uniqueKey];
+    const anchorElement = findAnchorElement(anchorUniqueKey);
+    const anchorOffsetBefore = anchorElement?.getBoundingClientRect().top || 0;
+    let removedRowCount = 0;
+    for (let i = 0; removedRowCount < sectionRowsNumber; i++) {
+      let row = tableBody.children.item(i);
+      removedRowCount++;
+      const rowKey = row?.getAttribute("data-key");
+      const isExpanded = expandedRows.some((r) => r.item[uniqueKey] == rowKey);
+      if (isExpanded) {
+        i++;
+      }
+    }
+    currentSectionNumber = currentSectionNumber + 1;
+    setTimeout(() => {
+      const anchorElementAfter = findAnchorElement(anchorUniqueKey);
+      const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0;
+      const offsetDiff = anchorOffsetAfter - anchorOffsetBefore;
+      tableContainer.scrollTop += offsetDiff;
+      userScrolling = true;
+    }, 10);
+  }
+  if (totalCachedSections - sectionThreshold <= currentSectionNumber && !loading && totalRows > rows.length) {
     dispatch("fetchData", {});
   }
 }
 function handleLoadBackward() {
   userScrolling = false;
-  let topElementsHeight = 0;
-  for (let i = renderedRows.length - 1; i > renderedRows.length - sectionRowsNumber + 1; i--) {
-    topElementsHeight += tableBody?.children.item(i)?.getBoundingClientRect().height || 0;
+  const anchorIndex = 0;
+  const anchorUniqueKey = renderedRows[anchorIndex].item[uniqueKey];
+  const anchorElement = findAnchorElement(anchorUniqueKey);
+  const anchorOffsetBefore = anchorElement?.getBoundingClientRect().top || 0;
+  let removedRowCount = 0;
+  for (let i = renderedRows.length - 1; removedRowCount < sectionRowsNumber; i--) {
+    let row = tableBody.children.item(i);
+    removedRowCount++;
+    const rowKey = row?.getAttribute("data-key");
+    const isExpanded = expandedRows.some((r) => r.item[uniqueKey] == rowKey);
+    if (isExpanded) {
+      i--;
+    }
   }
   currentSectionNumber = currentSectionNumber - 1;
-  tableContainer.scrollTop += topElementsHeight;
-  setTimeout(() => userScrolling = true, 20);
+  setTimeout(() => {
+    const anchorElementAfter = findAnchorElement(anchorUniqueKey);
+    const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0;
+    const offsetDiff = anchorOffsetAfter - anchorOffsetBefore;
+    tableContainer.scrollTop += offsetDiff;
+    userScrolling = true;
+  }, 10);
+}
+function findAnchorElement(key) {
+  for (let i = 0; i < tableBody.children.length; i++) {
+    const child = tableBody.children.item(i);
+    if (child?.getAttribute("data-key") == key) {
+      return child;
+    }
+  }
+  return void 0;
 }
 </script>
 
@@ -705,12 +758,26 @@ function handleLoadBackward() {
       {/if}
     </div>
   {/if}
+
+  {#if numberOfResultsVisible}
+    <div class='results-number'>
+      { lang == 'en' ? 'Results: ' : 'Risultati: '}
+      {#if !loading}
+        {totalRows || rows.length}
+      {:else}
+        <CircularLoader 
+          {loading}
+          --circular-loader-height='10px'
+        ></CircularLoader>
+      {/if}
+    </div>
+  {/if}
   <div class="outer-container">
     <div class="inner-container" bind:this={tableContainer}>
   <!-- <div class="table-container" bind:this={tableContainer}> -->
     <InfiniteScroll
       on:loadMore={handleLoadBackward}
-      treshold={backwardTresholdPixel}
+      threshold={backwardThresholdPixel}
       hasMore={currentSectionNumber > 0 && userScrolling}
       direction='backward'
     />
@@ -843,14 +910,15 @@ function handleLoadBackward() {
           {#each renderedRows as row, indexRow}
             <tr
               class="item-row"
+              data-key={row.item[uniqueKey]}
               style:background-color={
                 !!row.item.disableEdit ?
                   !!row.item.rowDisableBackgroundColor ?
                     row.item.rowDisableBackgroundColor : 
                     'var(--dynamic-table-row-disabled-background-color, var(--dynamic-table-row-default-disabled-background-color))' : 
-                expandedRows.findIndex((r) => r.item.id == row.item.id ) != -1 ? 
+                expandedRows.findIndex((r) => r.item[uniqueKey] == row.item[uniqueKey] ) != -1 ? 
                   'var(--dynamic-table-expanded-row-background-color, var(--dynamic-table-expanded-row-default-background-color))' :
-                  !!selectedItems.find(i => i.id == row.item.id) ?
+                  !!selectedItems.find(i => i[uniqueKey] == row.item[uniqueKey]) ?
                     'var(--dynamic-table-selected-row-background-color, var(--dynamic-table-selected-row-default-background-color))' :
                     ""
                 }
@@ -860,9 +928,9 @@ function handleLoadBackward() {
               {#if !!showSelect && !showExpand}
                 <td style:padding-left="0px" style:text-align="center">
                   <Checkbox
-                    id={row.item.id}
+                    id={row.item[uniqueKey]}
                     value={selectedItems.findIndex(
-                      (i) => i.id == row.item.id
+                      (i) => i[uniqueKey] == row.item[uniqueKey]
                     ) != -1}
                     disabled={disabled || loading}
                     on:change={(e) => handleSelect(row.item, e.detail.shiftKeyPressed)}
@@ -873,7 +941,7 @@ function handleLoadBackward() {
                 <td style:padding-left="0px" style:text-align="center">
                   <Icon
                     name={expandedRows.findIndex(
-                      (r) => r.item.id == row.item.id
+                      (r) => r.item[uniqueKey] == row.item[uniqueKey]
                     ) == -1
                       ? "mdi-chevron-down"
                       : "mdi-chevron-up"}
@@ -940,7 +1008,7 @@ function handleLoadBackward() {
               {/if}
             </tr>
             {#if showExpand}
-              {#if expandedRows.findIndex((r) => r.item.id == row.item.id) != -1}
+              {#if expandedRows.findIndex((r) => r.item[uniqueKey] == row.item[uniqueKey]) != -1}
                 <tr>
                   <td
                     colspan={headersToShowInTable.length + 1}
@@ -1000,7 +1068,7 @@ function handleLoadBackward() {
                             {#each subHeaders as subHeader, indexSubHeader}
                               <td
                                 class:cell-edit-activator={cellEditorIndexHeader == indexSubHeader && cellEditorIndexRow == indexSubItem && cellEditorSubItem}
-                                class:hover-cell={cellEdit}
+                                class:hover-cell={cellEdit && !loading && !!subHeader.cellEditorInfo}
                                 on:click={(e) => {
                                   handleCellClick(
                                     e,
@@ -1042,7 +1110,7 @@ function handleLoadBackward() {
                                       {subHeader.type.params.nullText}
                                     {/if}
                                   {:else}
-                                    {subItem[subHeader.value]}
+                                    <div style="display: flex; justify-content: center;">-</div>
                                   {/if}
                                 {:else}
                                   {subItem[subHeader.value]}
@@ -1077,10 +1145,17 @@ function handleLoadBackward() {
     </table>
     <InfiniteScroll
       on:loadMore={handleLoadForward}
-      treshold={forwardTresholdPixel}
+      threshold={forwardThresholdPixel}
       hasMore={hasMoreToRender && userScrolling}
     />
   </div>
+  {#if totalSections - 1 < currentSectionNumber && reachedBottom && endLineVisible}
+    <div class="line-container" transition:fade>
+      <span class="line"></span>
+      <span class="text">{lang == 'en' ? 'End' : 'Fine'}</span>
+      <span class="line"></span>
+    </div>
+  {/if}
   </div>
 {/if}
 
@@ -1234,55 +1309,57 @@ function handleLoadBackward() {
             >
           {/if}
         </div>
-        <Autocomplete
-          multiple
-          items={quickFilterActive.type.items}
-          bind:values={quickFilterActive.type.values}
-          --autocomplete-border="1px solid rgb(var(--global-color-background-500))"
-          --autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
-        >
-          <svelte:fragment slot="selection" let:selection let:unselect>
-            <slot name="selection" {selection} {unselect}>
-              <div tabindex="-1">
-                <Chip
-                  close={true}
-                  on:close={() => unselect(selection)}
-                  --chip-default-border-radius="var(--autocomplete-border-radius, var(--autocomplete-default-border-radius))"
-                  buttonTabIndex={-1}
-                  truncateText
-                >
-                  <slot name="chip-label" {selection}>
-                    {#if !!quickFilterActive.type.countriesAlpha2 && quickFilterActive.type.countriesAlpha2.find((c) => c.value == selection.value)}
-                      <div>
-                        <FlagIcon
-                          alpha2={quickFilterActive.type.countriesAlpha2
-                            .find((c) => c.value == selection.value)
-                            ?.label?.toString()
-                            .toLowerCase() ?? ""}
-                          --flag-icon-size="16px"
-                        />
-                      </div>
-                    {/if}
-                    {selection.label}
-                  </slot>
-                </Chip>
-              </div>
-            </slot>
-          </svelte:fragment>
-          <svelte:fragment slot="item-label" let:item>
-            <slot name="item-label" {item}>
-              {#if !!quickFilterActive.type.countriesAlpha2 && quickFilterActive.type.countriesAlpha2.find((c) => c.value == item.value)}
-                <FlagIcon
-                  alpha2={quickFilterActive.type.countriesAlpha2
-                    .find((c) => c.value == item.value)
-                    ?.label?.toString()
-                    .toLowerCase() ?? ""}
-                />
-              {/if}
-              {item.label}
-            </slot>
-          </svelte:fragment>
-        </Autocomplete>
+        <div on:click|stopPropagation role="presentation" tabindex="-1">
+          <Autocomplete
+            multiple
+            items={quickFilterActive.type.items}
+            bind:values={quickFilterActive.type.values}
+            --autocomplete-border="1px solid rgb(var(--global-color-background-500))"
+            --autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
+          >
+            <svelte:fragment slot="selection" let:selection let:unselect>
+              <slot name="selection" {selection} {unselect}>
+                <div tabindex="-1">
+                  <Chip
+                    close={true}
+                    on:close={() => unselect(selection)}
+                    --chip-default-border-radius="var(--autocomplete-border-radius, var(--autocomplete-default-border-radius))"
+                    buttonTabIndex={-1}
+                    truncateText
+                  >
+                    <slot name="chip-label" {selection}>
+                      {#if !!quickFilterActive.type.countriesAlpha2 && quickFilterActive.type.countriesAlpha2.find((c) => c.value == selection.value)}
+                        <div>
+                          <FlagIcon
+                            alpha2={quickFilterActive.type.countriesAlpha2
+                              .find((c) => c.value == selection.value)
+                              ?.label?.toString()
+                              .toLowerCase() ?? ""}
+                            --flag-icon-size="16px"
+                          />
+                        </div>
+                      {/if}
+                      {selection.label}
+                    </slot>
+                  </Chip>
+                </div>
+              </slot>
+            </svelte:fragment>
+            <svelte:fragment slot="item-label" let:item>
+              <slot name="item-label" {item}>
+                {#if !!quickFilterActive.type.countriesAlpha2 && quickFilterActive.type.countriesAlpha2.find((c) => c.value == item.value)}
+                  <FlagIcon
+                    alpha2={quickFilterActive.type.countriesAlpha2
+                      .find((c) => c.value == item.value)
+                      ?.label?.toString()
+                      .toLowerCase() ?? ""}
+                  />
+                {/if}
+                {item.label}
+              </slot>
+            </svelte:fragment>
+          </Autocomplete>
+        </div>
       {:else if quickFilterActive.type.key === "boolean"}
         {#if quickFilterActive.type.params}
           <div class="vertical-quick-filters">
@@ -1314,22 +1391,24 @@ function handleLoadBackward() {
             >
           {/if}
         </div>
-        <CountriesAutocomplete
-          bind:selected={quickFilterActive.type.selected}
-          {...((!!quickFilterActive.type.countriesOptions && quickFilterActive.type.countriesOptions.length > 0) && {
-            items: quickFilterActive.type.countriesOptions,
-          })}
-          autocompleteProps={{
-            placeholder: !!quickFilterActive.type.selected
-              ? quickFilterActive.type.selected.length > 0
-                ? ""
-                : quickFilterActive.description
-              : quickFilterActive.description,
-            multiple: true,
-          }}
-          --autocomplete-border="1px solid rgb(var(--global-color-background-500))"
-          --autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
-        />
+        <div on:click|stopPropagation role="presentation" tabindex="-1">
+          <CountriesAutocomplete
+            bind:selected={quickFilterActive.type.selected}
+            {...((!!quickFilterActive.type.countriesOptions && quickFilterActive.type.countriesOptions.length > 0) && {
+              items: quickFilterActive.type.countriesOptions,
+            })}
+            autocompleteProps={{
+              placeholder: !!quickFilterActive.type.selected
+                ? quickFilterActive.type.selected.length > 0
+                  ? ""
+                  : quickFilterActive.description
+                : quickFilterActive.description,
+              multiple: true,
+            }}
+            --autocomplete-border="1px solid rgb(var(--global-color-background-500))"
+            --autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
+          />
+        </div>
       {:else if quickFilterActive.type.key === "date"}
         <div on:click|stopPropagation role="presentation" tabindex="-1">
           <div>
@@ -1513,10 +1592,18 @@ function handleLoadBackward() {
     z-index: 2;
   }
 
+  @media not all and (min-resolution:.001dpcm) { 
+    .table-header {
+      position: sticky;
+      top: -2px;
+      z-index: 2;
+    }
+  }
+
   .table-subheader {
-  top: var(--main-header-height);
-  z-index: 1;
-}
+    top: var(--main-header-height);
+    z-index: 1;
+  }
   .table-header th {
     padding: var(
       --dynamic-table-header-padding,
@@ -1599,7 +1686,7 @@ function handleLoadBackward() {
   }
 
   table {
-    border-collapse: collapse;
+    border-collapse: separate;
     width: 100%;
   }
 
@@ -1620,6 +1707,13 @@ function handleLoadBackward() {
     border-radius: 5px;
   }
 
+  .item-row > td {
+    height: var(
+      --dynamic-table-row-min-height,
+      var(--dynamic-table-default-row-min-height)
+    );
+  }
+
   .item-row:hover {
     background-color: var(
       --dynamic-table-row-background-color-hover,
@@ -1766,4 +1860,30 @@ function handleLoadBackward() {
     gap: 12px;
     padding: 8px;
   }
-</style>
+
+  .line-container {
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 3;
+  }
+
+  .line {
+    flex-grow: 1;
+    height: 1px;
+    background: rgb(var(--global-color-contrast-800));
+    margin: 0 10px;
+  }
+
+  .results-number {
+    margin: 0px 0px 4px 4px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+</style>

package/dist/components/composed/list/DynamicTable.svelte.d.ts

@@ -153,9 +153,16 @@ declare const __propDef: {
         searchText?: string | undefined;
         renderedRowsNumber?: number | undefined;
         sectionRowsNumber?: number | undefined;
-        sectionTreshold?: number | undefined;
-        backwardTresholdPixel?: number | undefined;
-        forwardTresholdPixel?: number | undefined;
+        sectionThreshold?: number | undefined;
+        backwardThresholdPixel?: number | undefined;
+        forwardThresholdPixel?: number | undefined;
+        uniqueKey?: keyof {
+            [key: string]: any;
+            disableEdit?: boolean | undefined;
+            rowDisableBackgroundColor?: string | undefined;
+        } | undefined;
+        numberOfResultsVisible?: boolean | undefined;
+        endLineVisible?: boolean | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/composed/search/Filters.svelte

@@ -17,6 +17,7 @@ import { fly } from "svelte/transition";
 import Dialog from "../../simple/dialogs/Dialog.svelte";
 import Validator from "../../../utils/filters/validator";
 import ToolTip from "../common/ToolTip.svelte";
+import { DateTime } from "luxon";
 export let filters = [], lang = "en", addFilterLabel = lang == "en" ? "Filters" : "Filtri", cancelFilterLabel = lang == "en" ? "Cancel" : "Annulla", applyFilterLabel = lang == "en" ? "Apply filter" : "Applica filtro", showActiveFilters = true, filterTitleLabel = lang == "en" ? "Filter by" : "Filtra per", dateLocale = lang == "en" ? "en" : "it", betweenSeparator = lang == "en" ? "and" : "e", trueString = lang == "en" ? "true" : "vero", falseString = lang == "en" ? "false" : "falso", editFilterMode = "one-edit", labelsMapper = lang == "en" ? {
   "equal": {
     extended: "equal to",
@@ -276,8 +277,13 @@ function updateMultiFilterValues(filterName, newValue, newValid, mode) {
   if (tmpFilter.type == "select") {
     tmpFilter.values = newValue;
   } else if ("mode" in tmpFilter && tmpFilter.mode == "between") {
-    tmpFilter.to = newValue.to;
-    tmpFilter.from = newValue.from;
+    if (tmpFilter.type == "date") {
+      tmpFilter.from = DateTime.fromJSDate(newValue.to).setLocale("it-IT").startOf("day").toJSDate();
+      tmpFilter.to = DateTime.fromJSDate(newValue.to).setLocale("it-IT").endOf("day").toJSDate();
+    } else {
+      tmpFilter.from = newValue.from;
+      tmpFilter.to = newValue.to;
+    }
   } else {
     tmpFilter.value = newValue;
   }

package/dist/components/simple/common/InfiniteScroll.svelte

@@ -1,11 +1,11 @@
 <script>import { onDestroy, createEventDispatcher } from "svelte";
-export let treshold = 0, horizontal = false, elementScroll = null, hasMore = true, direction = "forward";
+export let threshold = 0, horizontal = false, elementScroll = null, hasMore = true, direction = "forward";
 const dispatch = createEventDispatcher();
 let isLoadMore = false, component;
 function onScroll(e) {
   const element = e.target;
   const offset = horizontal ? direction == "forward" ? element.scrollWidth - element.clientWidth - element.scrollLeft : element.scrollLeft : direction == "forward" ? element.scrollHeight - element.clientHeight - element.scrollTop : element.scrollTop;
-  if (offset <= treshold) {
+  if (offset <= threshold) {
     if (!isLoadMore && hasMore) {
       dispatch("loadMore");
     }

package/dist/components/simple/common/InfiniteScroll.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        treshold?: number | undefined;
+        threshold?: number | undefined;
         horizontal?: boolean | undefined;
         elementScroll?: HTMLElement | null | undefined;
         hasMore?: boolean | undefined;

package/dist/utils/filters/filters.js

@@ -93,20 +93,20 @@ export default class Converter {
         return params.builder;
     }
     applyNumberFilter(params) {
-        if (params.filter.mode == 'equal' && !!params.filter.value) {
+        if (params.filter.mode == 'equal' && params.filter.value !== undefined) {
             params.builder.where(params.filter.column, '=', params.filter.value);
         }
-        else if (params.filter.mode == 'greater' && !!params.filter.value) {
+        else if (params.filter.mode == 'greater' && params.filter.value !== undefined) {
             params.builder.where(params.filter.column, '>', params.filter.value);
         }
-        else if (params.filter.mode == 'lower' && !!params.filter.value) {
+        else if (params.filter.mode == 'lower' && params.filter.value !== undefined) {
             params.builder.where(params.filter.column, '<', params.filter.value);
         }
         else if (params.filter.mode == 'between') {
-            if (!!params.filter.from) {
+            if (params.filter.from !== undefined) {
                 params.builder.where(params.filter.column, '>=', params.filter.from);
             }
-            if (!!params.filter.to) {
+            if (params.filter.to !== undefined) {
                 params.builder.where(params.filter.column, '<=', params.filter.to);
             }
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "3.3.11",
+  "version": "3.3.13",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",