@likable-hair/svelte 4.0.6 → 4.0.7

package/dist/components/composed/common/QuickActions.css

@@ -2,6 +2,8 @@
   --quick-actions-default-background-color: rgb(var(--global-color-background-200));
   --quick-actions-default-selected-items-button-background-color: rgb(var(--global-color-background-500));
   --quick-actions-default-selected-items-button-background-color-hover: rgb(var(--global-color-background-300));
+  --quick-actions-default-selected-items-button-background-color-disabled: rgb(var(--global-color-background-300), .5);
+  --quick-actions-default-selected-items-button-color-disabled: rgb(var(--global-color-contrast-900), .5);
   --quick-actions-default-z-index: 48;
 
   --quick-actions-default-buttons-background-color: var(--quick-actions-background-color, var(--quick-actions-default-background-color));

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

@@ -2,13 +2,12 @@
 </script>
 
 <script lang="ts">import { Button, Icon, mediaQuery, ToolTip } from "../../..";
-import DynamicTable from "../list/DynamicTable.svelte";
 import { fly } from "svelte/transition";
 import { cubicIn } from "svelte/easing";
 import MenuOrDrawer from "./MenuOrDrawer.svelte";
 import './QuickActions.css';
-let { selectedItems, showSelectContainer, isSelectedAll, totalRows, slotSelectActionsContainer = $bindable(), disabled, loading, actionsForSelectedItems, position = 'top', lang = 'en' } = $props();
-let actions = $state([]), extraActions = $state([]), moreActionsActivator = $state(), openMoreActions = $state(false), infoActivators = $state({}), disabledInfoActivators = $state({});
+let { selectedItems, disabled, actionsForSelectedItems, position = 'top', lang = 'en', onClose, } = $props();
+let actions = $state([]), extraActions = $state([]), slotSelectActionsContainer = $state(), moreActionsActivator = $state(), openMoreActions = $state(false), infoActivators = $state({}), disabledInfoActivators = $state({});
 $effect(() => {
     if (!!slotSelectActionsContainer) {
         let numberOfSplit = $mediaQuery.xl ? 5 :
@@ -28,7 +27,7 @@ $effect(() => {
 });
 </script>
 
-{#if selectedItems && selectedItems.length > 0 && showSelectContainer}
+{#if selectedItems > 0}
   <div
     class="container-{position}"
     transition:fly={{ delay: 150, duration: 150, y: -10, easing: cubicIn }}
@@ -37,8 +36,13 @@ $effect(() => {
       class="select-container"
     >
       <div>
-        <button class="select-info" onclick={() => (selectedItems = [], infoActivators = {}, disabledInfoActivators = {})}>
-          {!!isSelectedAll ? totalRows : selectedItems.length} {lang == 'en' ? 'items selected' : 'righe selezionate'}
+        <button class="select-info" {disabled} onclick={() => {
+            infoActivators = {}
+            disabledInfoActivators = {}
+            if(onClose) onClose()
+          }}
+        >
+          {selectedItems} {lang == 'en' ? 'items selected' : 'righe selezionate'}
           <Icon name="mdi-close" />
         </button>
       </div>
@@ -59,7 +63,9 @@ $effect(() => {
                 --button-box-shadow: none;
               '
               --button-height="20px"
-              disabled={action.disabled}
+              --circular-loader-height="17px"
+              disabled={action.disabled || action.loading || disabled}
+              loading={action.loading}
               onclick={action.onClick}
             >
               <div class="action" bind:this={disabledInfoActivators[action.label]}>
@@ -74,7 +80,7 @@ $effect(() => {
                     />
                   </div>
                   <ToolTip
-                    appearTimeout={1000}
+                    appearTimeout={500}
                     activator={infoActivators[action.label]}
                   >
                     <div
@@ -90,7 +96,7 @@ $effect(() => {
                 {action.label}
                 {#if !!action.disabledInfo && action.disabled}
                   <ToolTip
-                    appearTimeout={1000}
+                    appearTimeout={300}
                     activator={disabledInfoActivators[action.label]}
                   >
                     <div
@@ -124,7 +130,6 @@ $effect(() => {
                   margin-left: 8px;
                 '
                 --button-height="20px"
-                disabled={disabled || loading}
                 onclick={(e) => {
                   openMoreActions = !openMoreActions;
                 }}
@@ -172,8 +177,10 @@ $effect(() => {
                 --button-disabled-color: var(--quick-actions-buttons-color-disabled, var(--quick-actions-default-buttons-color-disabled));
                 --button-box-shadow: none;
               '
-              --button-height="35px"
-              disabled={action.disabled}
+              --button-height="30px"
+              --circular-loader-height="25px"
+              disabled={action.disabled || action.loading || disabled}
+              loading={action.loading}
               onclick={action.onClick}
             >
               <div class="action" bind:this={disabledInfoActivators[action.label]}>
@@ -188,7 +195,7 @@ $effect(() => {
                     />
                   </div>
                   <ToolTip
-                    appearTimeout={1000}
+                    appearTimeout={500}
                     activator={infoActivators[action.label]}
                   >
                     <div
@@ -204,7 +211,7 @@ $effect(() => {
                 {action.label}
                 {#if !!action.disabledInfo && action.disabled}
                   <ToolTip
-                    appearTimeout={1000}
+                    appearTimeout={300}
                     activator={disabledInfoActivators[action.label]}
                   >
                     <div
@@ -292,6 +299,19 @@ $effect(() => {
       --quick-actions-selected-items-button-background-color-hover,
       var(--quick-actions-default-selected-items-button-background-color-hover)
     );
+    cursor: pointer;
+  }
+
+  .select-info:disabled {
+    background-color: var(
+      --quick-actions-selected-items-button-background-color-disabled,
+      var(--quick-actions-default-selected-items-button-background-color-disabled)
+    );
+    color: var(
+      --quick-actions-selected-items-button-color-disabled,
+      var(--quick-actions-default-selected-items-button-color-disabled)
+    );
+    cursor: not-allowed;
   }
 
   .select-actions-container {

package/dist/components/composed/common/QuickActions.svelte.d.ts

@@ -2,26 +2,22 @@ export type Action = {
     label: string;
     icon?: string;
     disabled?: boolean;
+    loading?: boolean;
     info?: string;
     disabledInfo?: string;
     onClick: NonNullable<ComponentProps<typeof Button>['onclick']>;
 };
 import { Button } from "../../..";
 import type { ComponentProps } from "svelte";
-import DynamicTable from "../list/DynamicTable.svelte";
 import './QuickActions.css';
 interface Props {
-    selectedItems: ComponentProps<typeof DynamicTable>["selectedItems"];
-    showSelectContainer: boolean;
-    isSelectedAll: boolean;
-    totalRows: number;
-    slotSelectActionsContainer?: HTMLElement;
+    selectedItems: number;
     disabled: boolean;
-    loading: boolean;
     actionsForSelectedItems: Action[];
     position?: 'top' | 'bottom';
     lang?: 'it' | 'en';
+    onClose?: () => void;
 }
-declare const QuickActions: import("svelte").Component<Props, {}, "slotSelectActionsContainer">;
+declare const QuickActions: import("svelte").Component<Props, {}, "">;
 type QuickActions = ReturnType<typeof QuickActions>;
 export default QuickActions;

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

@@ -25,25 +25,23 @@ onMount(() => {
     updateHeaderHeight();
     window.addEventListener('resize', updateHeaderHeight);
     tableContainer?.addEventListener("scroll", setReachedBottomOrTop);
-    if (tableContainer?.scrollHeight && tableContainer.clientHeight && tableContainer?.scrollHeight <= tableContainer?.clientHeight) {
-        tableContainer.style.marginRight = '0px';
-    }
-    if (resizableColumns) {
-        for (const head of [...headers, { value: 'non-resizable', minWidth: DEFAULT_MIN_WIDTH_PX + 'px', maxWidth: DEFAULT_MAX_WIDTH_PX + 'px' }, { value: 'slot-append', minWidth: DEFAULT_MIN_WIDTH_PX + 'px', maxWidth: DEFAULT_MAX_WIDTH_PX + 'px' }]) {
-            let th;
-            if (head.value == 'non-resizable' || head.value == 'slot-append') {
-                th = document.getElementsByClassName(head.value).item(0);
-            }
-            else {
-                th = document.getElementById(head.value);
-            }
-            if (!!th) {
-                resizeHeader(th, head);
-            }
+    if (tableContainer?.scrollHeight && tableContainer.clientHeight) {
+        hideScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight;
+    }
+    for (const head of [...headers, { value: 'non-resizable', minWidth: DEFAULT_MIN_WIDTH_PX + 'px', maxWidth: DEFAULT_MAX_WIDTH_PX + 'px' }, { value: 'slot-append', minWidth: DEFAULT_MIN_WIDTH_PX + 'px', maxWidth: DEFAULT_MAX_WIDTH_PX + 'px' }]) {
+        let th;
+        if (head.value == 'non-resizable' || head.value == 'slot-append') {
+            th = document.getElementsByClassName(head.value).item(0);
+        }
+        else {
+            th = document.getElementById(head.value);
+        }
+        if (!!th) {
+            resizeHeader(th, head);
         }
-        let table = document.getElementsByClassName('table')[0];
-        table.classList.add('resizable');
     }
+    let table = document.getElementsByClassName('table')[0];
+    table.classList.add('resizable');
     return () => {
         window.removeEventListener('resize', updateHeaderHeight);
         tableContainer?.removeEventListener("scroll", setReachedBottomOrTop);
@@ -60,6 +58,7 @@ function setReachedBottomOrTop() {
     if (tableContainer) {
         reachedBottom = tableContainer.scrollHeight - tableContainer.scrollTop === tableContainer.clientHeight;
         reachedTop = tableContainer.scrollTop === 0;
+        hideScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight;
     }
 }
 $effect(() => {
@@ -95,8 +94,8 @@ const [send, receive] = crossfade({
         };
     },
 });
-let { headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = $bindable(), sortDirection = $bindable("asc"), cellEdit = false, lang = "en", noItemsText = lang == 'en' ? "No items to show" : 'Nessun elemento da visualizzare', showSelect = false, showSelectContainer = true, selectMode = "single", selectedItems = $bindable([]), showExpand = false, loading = false, disabled = false, filters = $bindable([]), searchBarColumns, searchBarVisible = false, searchBarPlaceholder = lang == 'en' ? "Type to search..." : "Scrivi per cercare...", filtersVisible = false, quickFiltersVisible = false, editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], totalRows = rows.length, searchText = $bindable(), renderedRowsNumber = 100, sectionRowsNumber = 20, sectionThreshold = 2, backwardThresholdPixel = 100, forwardThresholdPixel = 100, uniqueKey = 'id', numberOfResultsVisible = false, endLineVisible = false, resizableColumns = false, resizedColumnSizeWithPadding = {}, class: clazz = {}, onapplyCustomQuickFilter, oncellClick, onfetchData, onfiltersChange, onsort, onremoveAllFilters, onremoveCustomQuickFilter, onremoveFilter, onrowClick, onsaveCellEdit, onsaveHeadersToShow, oncolumnResize, searchBarSnippet, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onscroll, selectionSnippet: selectionInternalSnippet, itemLabelSnippet: itemLabelInternalSnippet, chipLabelSnippet, headerSnippet, headerLabelSnippet, rowAppendSnippet, rowActionsSnippet, customRowSnippet, subRowAppendSnippet, subHeaderLabelSnippet, subHeaderSnippet, subRowActionsSnippet, customSubRowSnippet, customQuickFilterSnippet, appendSnippet, } = $props();
-let openCellEditor = $state(false), cellEditorActivator = $state(), cellEditorContainer = $state(), menuElementCellEditor = $state(), menuElementQuickFilters = $state(), cellEditorInfoActive = $state(), saveEditDisabled = $state(false), searchBarInput = $state(undefined), openQuickFilter = $state(false), quickFilterActivator = $state(), quickFilterActive = $state(), globalBuilder = new FilterBuilder(), slotSelectActionsContainer, isSelectedAll = $state(false), calendarOpened = $state(false), calendarOpened2 = $state(false), selectedIndexes = [], cellEditorIndexRow = $state(), cellEditorIndexHeader = $state(), cellEditorSubItem = $state(), currentSectionNumber = $state(0), tableBody = $state(), tableContainer = $state(), userScrolling = $state(true), reachedBottom = $state(false), reachedTop = false, resizing = false, remainingWidth = $state(0);
+let { headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = $bindable(), sortDirection = $bindable("asc"), cellEdit = false, lang = "en", dateLocale, noItemsText = lang == 'en' ? "No items to show" : 'Nessun elemento da visualizzare', showSelect = false, showActions = true, selectMode = "single", selectedItems = $bindable([]), unselectedItems = $bindable([]), selectedAll = $bindable(false), showExpand = false, loading = false, disabled = false, filters = $bindable([]), searchBarColumns, searchBarVisible = false, searchBarPlaceholder = lang == 'en' ? "Type to search..." : "Scrivi per cercare...", filtersVisible = false, quickFiltersVisible = false, editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], quickActionsDisabled = false, totalRows = rows.length, searchText = $bindable(), renderedRowsNumber = 100, sectionRowsNumber = 20, sectionThreshold = 2, backwardThresholdPixel = 100, forwardThresholdPixel = 100, uniqueKey = 'id', numberOfResultsVisible = false, endLineVisible = false, resizableColumns = false, resizedColumnSizeWithPadding = {}, class: clazz = {}, onapplyCustomQuickFilter, oncellClick, onfetchData, onfiltersChange, onsort, onremoveAllFilters, onremoveCustomQuickFilter, onremoveFilter, onrowClick, onsaveCellEdit, onsaveHeadersToShow, oncolumnResize, searchBarSnippet, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onscroll, selectionSnippet: selectionInternalSnippet, itemLabelSnippet: itemLabelInternalSnippet, chipLabelSnippet, headerSnippet, headerLabelSnippet, rowAppendSnippet, rowActionsSnippet, customRowSnippet, subRowAppendSnippet, subHeaderLabelSnippet, subHeaderSnippet, subRowActionsSnippet, customSubRowSnippet, customQuickFilterSnippet, appendSnippet, } = $props();
+let openCellEditor = $state(false), cellEditorActivator = $state(), cellEditorContainer = $state(), menuElementCellEditor = $state(), menuElementQuickFilters = $state(), cellEditorInfoActive = $state(), saveEditDisabled = $state(false), searchBarInput = $state(undefined), openQuickFilter = $state(false), quickFilterActivator = $state(), quickFilterActive = $state(), globalBuilder = new FilterBuilder(), calendarOpened = $state(false), calendarOpened2 = $state(false), selectedIndexes = [], cellEditorIndexRow = $state(), cellEditorIndexHeader = $state(), cellEditorSubItem = $state(), currentSectionNumber = $state(0), tableBody = $state(), tableContainer = $state(), userScrolling = $state(true), reachedBottom = $state(false), reachedTop = false, resizing = false, remainingWidth = $state(0), hideScrollbar = $state(false), sortModify;
 const DEFAULT_MIN_WIDTH_PX = 100, DEFAULT_MAX_WIDTH_PX = 400;
 let totalSections = $derived((totalRows - renderedRowsNumber) / sectionRowsNumber);
 let hasMoreToRender = $derived(totalSections > currentSectionNumber);
@@ -137,11 +136,13 @@ function handleHeaderClick(header) {
                 sortDirection = "desc";
             else if (sortDirection == "desc") {
                 sortedBy = undefined;
+                sortModify = undefined;
             }
         }
         else {
             sortedBy = header.value;
             sortDirection = "asc";
+            sortModify = header.sortModify;
         }
         handleSearchChange(searchText);
         if (onsort) {
@@ -231,15 +232,21 @@ function handleCancelClick() {
     openQuickFilter = false;
 }
 function handleSelect(item, shiftKeyPressed) {
-    let index = selectedItems.findIndex((i) => i[uniqueKey] == item[uniqueKey]);
-    // if item is not in the selected items array, add it
+    let index = -1;
+    if (selectedAll) {
+        index = unselectedItems.findIndex((i) => i[uniqueKey] == item[uniqueKey]);
+    }
+    else {
+        index = selectedItems.findIndex((i) => i[uniqueKey] == item[uniqueKey]);
+    }
+    // if item is not in the selected/unselected items array, add it
     if (index == -1) {
         if (selectMode == "single") {
             selectedItems = [item];
             selectedIndexes = [rows.findIndex(r => r.item[uniqueKey] == item[uniqueKey])];
         }
         else if (selectMode == "multiple") {
-            if (shiftKeyPressed && selectedIndexes.length > 0 && !isSelectedAll) {
+            if (shiftKeyPressed && selectedIndexes.length > 0) {
                 let lastSelectedIndex = selectedIndexes[selectedIndexes.length - 1], selectedIndex = rows.findIndex(r => r.item[uniqueKey] == item[uniqueKey]);
                 if (selectedIndex != -1) {
                     if (selectedIndex < lastSelectedIndex) {
@@ -248,35 +255,46 @@ function handleSelect(item, shiftKeyPressed) {
                         selectedIndex = x;
                     }
                     for (let i = lastSelectedIndex + 1; i <= selectedIndex; i++) {
-                        if (!selectedItems.find((selectedItem) => selectedItem[uniqueKey] == rows[i].item[uniqueKey])) {
-                            selectedItems = [...selectedItems, rows[i].item];
+                        if (selectedAll) {
+                            if (!unselectedItems.find((unselectedItem) => unselectedItem[uniqueKey] == rows[i].item[uniqueKey])) {
+                                unselectedItems = [...unselectedItems, rows[i].item];
+                            }
+                        }
+                        else {
+                            if (!selectedItems.find((selectedItem) => selectedItem[uniqueKey] == rows[i].item[uniqueKey])) {
+                                selectedItems = [...selectedItems, rows[i].item];
+                            }
                         }
                     }
                 }
             }
             else {
-                selectedItems = [...selectedItems, item];
+                if (selectedAll) {
+                    unselectedItems = [...unselectedItems, item];
+                }
+                else {
+                    selectedItems = [...selectedItems, item];
+                }
                 selectedIndexes.push(rows.findIndex(r => r.item[uniqueKey] == item[uniqueKey]));
             }
         }
     }
     else {
-        selectedItems = selectedItems.filter((i) => i[uniqueKey] != item[uniqueKey]);
+        if (selectedAll) {
+            unselectedItems = unselectedItems.filter((i) => i[uniqueKey] != item[uniqueKey]);
+        }
+        else {
+            selectedItems = selectedItems.filter((i) => i[uniqueKey] != item[uniqueKey]);
+        }
         selectedIndexes = selectedIndexes.filter(r => r != rows.findIndex(r => r.item[uniqueKey] == item[uniqueKey]));
-        isSelectedAll = false;
     }
 }
 function handleSelectAll() {
     if (selectMode == "multiple") {
-        if (selectedItems.length == rows.length) {
-            selectedItems = [];
-            selectedIndexes = [];
-            isSelectedAll = false;
-        }
-        else {
-            selectedItems = rows.map((r) => r.item);
-            isSelectedAll = true;
-        }
+        selectedItems = [];
+        selectedIndexes = [];
+        unselectedItems = [];
+        selectedAll = !selectedAll;
     }
 }
 function expandRow(row) {
@@ -309,13 +327,6 @@ $effect(() => {
     else {
         saveEditDisabled = false;
     }
-    if (!!isSelectedAll &&
-        rows.length > 0 &&
-        !loading &&
-        !disabled &&
-        selectedItems.length < rows.length) {
-        selectedItems = rows.map((r) => r.item);
-    }
 });
 function searchTextBuilder(searchText) {
     let builder;
@@ -331,9 +342,6 @@ function searchTextBuilder(searchText) {
             }
         });
     }
-    if (!!sortedBy) {
-        builder.orderBy(sortedBy, sortDirection || "asc");
-    }
     return builder;
 }
 let syncTimer;
@@ -358,6 +366,14 @@ function handleFiltersChange() {
         tableContainer.scrollTop = 0;
         setTimeout(() => userScrolling = true, 20);
     }
+    if (!!sortedBy) {
+        if (sortModify) {
+            globalBuilder = sortModify({ builder: globalBuilder, sortDirection });
+        }
+        else {
+            globalBuilder.orderBy(sortedBy, sortDirection || "asc");
+        }
+    }
     if (onfiltersChange) {
         onfiltersChange({
             detail: {
@@ -630,9 +646,6 @@ function quickFilterBuilder(builder, quickFilter, clearPreaviousValue = true) {
             }
         }
     }
-    if (!!sortedBy) {
-        builder.orderBy(sortedBy, sortDirection || "asc");
-    }
     return builder;
 }
 function updateFilterValues(filter, updateMultiFilterValues) {
@@ -663,10 +676,7 @@ function updateFilterValues(filter, updateMultiFilterValues) {
     }
     updateMultiFilterValues(filter.name, newValue, newValid, newMode);
 }
-function handleRemoveAllFilters(removeAllFilters) {
-    if (!!removeAllFilters) {
-        removeAllFilters();
-    }
+function handleRemoveAllFilters() {
     if (onremoveAllFilters) {
         onremoveAllFilters();
     }
@@ -879,17 +889,19 @@ function resizeHeader(th, header) {
 </script>
 
 {#if !!rows && Array.isArray(rows) && !!headersToShowInTable && Array.isArray(headersToShowInTable)}
-  <QuickActions
-    {selectedItems}
-    {showSelectContainer}
-    {isSelectedAll}
-    {totalRows}
-    {slotSelectActionsContainer}
-    {disabled}
-    {loading}
-    {actionsForSelectedItems}
-    {lang}
-  />
+  {#if showActions}
+    <QuickActions
+      selectedItems={selectedAll ? totalRows - unselectedItems.length : selectedItems.length}
+      disabled={quickActionsDisabled}
+      {actionsForSelectedItems}
+      {lang}
+      onClose={() => {
+        selectedAll = false
+        unselectedItems = []
+        selectedItems = []
+      }}
+    />
+  {/if}
 
   {#if searchBarVisible || filtersVisible || appendSnippet}
     <div class="filter-container">
@@ -926,22 +938,23 @@ function resizeHeader(th, header) {
               onremoveAllFilters={() => handleRemoveAllFilters()}
               --filters-default-wrapper-width="100%"
               {lang}
+              {dateLocale}
               {editFilterMode}
               {showActiveFilters}
               appendSnippet={filterAppendSnippet}
               customChipSnippet={customFilterChipSnippet}
             >
-              {#snippet contentSnippet({ filters, mAndDown, updateMultiFilterValues, handleRemoveAllFilters: removeAllFilters })}  
+              {#snippet contentSnippet({ filters, mAndDown, updateMultiFilterValues, })}  
                 {#key filters}
                   <DynamicFilters
                     {lang}
                     {filters}                      
                     {mAndDown}
                     onchange={e => updateFilterValues(e.detail.filter, updateMultiFilterValues)}    
-                    onremoveAllFilters={() => handleRemoveAllFilters(removeAllFilters)}
+                    {updateMultiFilterValues}
                   >
-                    {#snippet customSnippet({ filter })}
-                      {@render customFilterSnippet?.({ filter, updateMultiFilterValues })}
+                    {#snippet customSnippet({ filter, mAndDown, updateCustomFilterValues })}
+                      {@render customFilterSnippet?.({ filter, mAndDown, updateCustomFilterValues })}
                     {/snippet}
                   </DynamicFilters>
                 {/key}
@@ -1007,7 +1020,7 @@ function resizeHeader(th, header) {
   {/if}
 
   <div class="outer-container">
-    <div class="inner-container" bind:this={tableContainer} {onscroll}>
+    <div class="inner-container" class:hide-scrollbar={hideScrollbar} bind:this={tableContainer} {onscroll}>
     <InfiniteScroll
       onloadMore={handleLoadBackward}
       threshold={backwardThresholdPixel}
@@ -1027,7 +1040,7 @@ function resizeHeader(th, header) {
               {#if selectMode === "multiple"}
                 <Checkbox
                   id="select-all"
-                  value={selectedItems.length == totalBatchLength}
+                  value={selectedAll}
                   disabled={disabled || loading}
                   onchange={handleSelectAll}
                 />
@@ -1046,6 +1059,7 @@ function resizeHeader(th, header) {
             <th
               style={`${resizableColumns || !header.width ? '' : `width: ${header.width}`}`}
               style:min-width={header.minWidth}
+              style:max-width={header.maxWidth}
               class:sortable={header.sortable}
               onclick={() => handleHeaderClick(header)}
               id={header.value}
@@ -1167,15 +1181,19 @@ function resizeHeader(th, header) {
               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-default-row-disabled-background-color))' : 
-                expandedRows.findIndex((r) => r.item[uniqueKey] == row.item[uniqueKey] ) != -1 ? 
-                  'var(--dynamic-table-expanded-row-background-color, var(--dynamic-table-default-expanded-row-background-color))' :
-                  !!selectedItems.find(i => i[uniqueKey] == row.item[uniqueKey]) ?
-                    'var(--dynamic-table-selected-row-background-color, var(--dynamic-table-default-selected-row-background-color))' :
-                    ""
+                !!row.item.disableEdit
+                  ? !!row.item.rowDisableBackgroundColor
+                    ? row.item.rowDisableBackgroundColor
+                    : 'var(--dynamic-table-row-disabled-background-color, var(--dynamic-table-default-row-disabled-background-color))'
+                  : expandedRows.findIndex(r => r.item[uniqueKey] == row.item[uniqueKey]) != -1
+                    ? 'var(--dynamic-table-expanded-row-background-color, var(--dynamic-table-default-expanded-row-background-color))'
+                    : selectedAll
+                      ? !unselectedItems.find(i => i[uniqueKey] == row.item[uniqueKey])
+                        ? 'var(--dynamic-table-selected-row-background-color, var(--dynamic-table-default-selected-row-background-color))'
+                        : ''
+                      : selectedItems.find(i => i[uniqueKey] == row.item[uniqueKey])
+                        ? 'var(--dynamic-table-selected-row-background-color, var(--dynamic-table-default-selected-row-background-color))'
+                        : ''
                 }
               class:row-activator={cellEditorIndexRow == indexRow && !cellEditorSubItem}
               onclick={() => handleRowClick(row.item)}
@@ -1184,9 +1202,15 @@ function resizeHeader(th, header) {
                 <td style:padding-left="0px" style:text-align="center">
                   <Checkbox
                     id={row.item[uniqueKey]}
-                    value={selectedItems.findIndex(
-                      (i) => i[uniqueKey] == row.item[uniqueKey]
-                    ) != -1}
+                    value={
+                      selectedAll ?
+                        unselectedItems.findIndex(
+                          (i) => i[uniqueKey] == row.item[uniqueKey]
+                        ) == -1 :
+                        selectedItems.findIndex(
+                          (i) => i[uniqueKey] == row.item[uniqueKey]
+                        ) != -1
+                    }
                     disabled={disabled || loading}
                     onchange={(e) => handleSelect(row.item, e.detail.shiftKeyPressed)}
                   />
@@ -1270,6 +1294,7 @@ function resizeHeader(th, header) {
                             <th
                               style:width={subHeader.width}
                               style:min-width={subHeader.minWidth}
+                              style:max-width={subHeader.maxWidth}
                               class:sortable={subHeader.sortable}
                               onclick={() => handleHeaderClick(subHeader)}
                             >
@@ -1648,6 +1673,7 @@ function resizeHeader(th, header) {
                   : quickFilterActive.description,
                 multiple: true,
               }}
+              --autocomplete-border-radius= 0.5rem
               --autocomplete-border="1px solid rgb(var(--global-color-background-500))"
               --autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
             />
@@ -1833,10 +1859,13 @@ function resizeHeader(th, header) {
 
   .inner-container {
     overflow-y: auto;
-    margin-right: -15px;
     max-height: var(--dynamic-table-max-height, var(--dynamic-table-default-max-height));
   }
 
+  .hide-scrollbar {
+    margin-right: -15px;
+  }
+
   .table {
     background-color: var(
       --dynamic-table-background-color,

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

@@ -127,12 +127,17 @@ declare class __sveltets_Render<Item extends {
         cellEdit?: boolean;
         noItemsText?: string;
         showSelect?: boolean;
-        showSelectContainer?: boolean;
+        showActions?: boolean;
         selectMode?: "single" | "multiple";
         selectedItems?: (Item & {
             disableEdit?: boolean;
             rowDisableBackgroundColor?: string;
         })[] | undefined;
+        unselectedItems?: (Item & {
+            disableEdit?: boolean;
+            rowDisableBackgroundColor?: string;
+        })[] | undefined;
+        selectedAll?: boolean;
         showExpand?: boolean;
         loading?: boolean;
         disabled?: boolean;
@@ -143,10 +148,12 @@ declare class __sveltets_Render<Item extends {
         filtersVisible?: boolean;
         quickFiltersVisible?: boolean;
         lang?: "it" | "en";
+        dateLocale?: "it" | "en";
         editFilterMode?: "one-edit" | "multi-edit";
         showActiveFilters?: boolean;
         quickFilters?: QuickFilter[];
         actionsForSelectedItems?: Action[];
+        quickActionsDisabled?: boolean;
         totalRows?: number;
         searchText?: string;
         renderedRowsNumber?: number;
@@ -238,7 +245,8 @@ declare class __sveltets_Render<Item extends {
         customFilterChipSnippet?: ComponentProps<typeof Filters>["customChipSnippet"];
         customFilterSnippet?: Snippet<[{
             filter: Filter | undefined;
-            updateMultiFilterValues: Parameters<NonNullable<ComponentProps<typeof Filters>["contentSnippet"]>>[0]["updateMultiFilterValues"];
+            mAndDown: boolean;
+            updateCustomFilterValues: Parameters<NonNullable<ComponentProps<typeof Filters>["contentSnippet"]>>[0]["updateMultiFilterValues"];
         }]> | undefined;
         onscroll?: UIEventHandler<HTMLDivElement>;
         selectionSnippet?: ComponentProps<typeof Autocomplete>["selectionSnippet"];
@@ -522,7 +530,7 @@ declare class __sveltets_Render<Item extends {
     };
     events(): {};
     slots(): {};
-    bindings(): "searchText" | "sortedBy" | "sortDirection" | "filters" | "selectedItems";
+    bindings(): "searchText" | "sortedBy" | "sortDirection" | "filters" | "selectedItems" | "unselectedItems" | "selectedAll";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -13,7 +13,7 @@ let { headers = [], items = [], sortedBy = $bindable(undefined), sortDirection =
     { label: "50", value: 50 },
     { label: "100", value: 100 },
 ], hideRowsPerPage = false, totalElements = undefined, rowsPerPage = $bindable(20), filters = $bindable([]), searchBarColumns = undefined, searchBarVisible = true, searchBarPlaceholder = "Type something to search...", lang = "en", editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = {}, pointerOnRowHover = undefined, doubleClickActive = false, doubleClickDelay = 250, calculateRowStyles = undefined, calculateRowClasses = undefined, class: clazz = {}, onfiltersChange, onpaginationChange, onremoveFilter, onremoveAllFilters, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onrowClick, onrowDoubleClick, appendSnippet, customSnippet, headerLabelSnippet, headerSnippet, rowActionsSnippet, onsort, footerSnippet, rangeDescriptorSnippet, searchBarSnippet, noDataSnippet, oncolumnResize, } = $props();
-let searchBarInput = $state(), searchText = $state();
+let searchBarInput = $state(), searchText = $state(), sortModify;
 let rowsPerPageSelection = $state([]);
 $effect(() => {
     rowsPerPageSelection = [
@@ -74,6 +74,7 @@ function handleRemoveAllFilters() {
     }
 }
 function handleOnSort(event) {
+    sortModify = event.detail.sortModify;
     handleFiltersChange();
     if (onsort) {
         onsort(event);
@@ -94,7 +95,12 @@ function buildFilters(params) {
         });
     }
     if (!!sortedBy) {
-        builder.orderBy(sortedBy, sortDirection || 'asc');
+        if (sortModify) {
+            builder = sortModify({ builder, sortDirection: sortDirection || 'asc' });
+        }
+        else {
+            builder.orderBy(sortedBy, sortDirection || "asc");
+        }
     }
     return builder;
 }

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

@@ -31,6 +31,7 @@ declare const PaginatedTable: import("svelte").Component<Omit<{
         detail: {
             sortedBy: string | undefined;
             sortDirection: string;
+            sortModify: import("../../simple/lists/SimpleTable.svelte").Header["sortModify"];
         };
     }) => void) | undefined;
     onrowClick?: ((event: {

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

@@ -1,6 +1,6 @@
 <script lang="ts">import { FilterEditor, Icon } from "../../..";
 import {} from "svelte";
-let { filters = [], lang = "en", mAndDown = false, onchange, onremoveAllFilters, customSnippet, } = $props();
+let { filters = [], lang = "en", mAndDown = false, onchange, updateMultiFilterValues, customSnippet: customSnippetInternal, } = $props();
 let selectedFilter = $state();
 let tmpFilters = $state(filters.reduce((acc, f) => {
     if (f.active) {
@@ -8,14 +8,6 @@ let tmpFilters = $state(filters.reduce((acc, f) => {
     }
     return acc;
 }, {}));
-let activeFilter = $derived(Object.values(tmpFilters).reduce((count, filter) => {
-    if (filter.value !== undefined ||
-        filter.from !== undefined ||
-        filter.to !== undefined ||
-        (filter.values !== undefined && filter.values.length > 0))
-        count++;
-    return count;
-}, 0));
 let labelsMapper = lang == 'en' ? {
     equal: { extended: "equal to", short: "equal" },
     like: { short: "includes" },
@@ -43,46 +35,78 @@ function handleKeyPress(event, filter) {
         selectFilter(filter);
     }
 }
-function clearFilters() {
-    tmpFilters = {};
-    if (onremoveAllFilters) {
-        onremoveAllFilters();
-    }
-}
 function handleFilterChange() {
-    if (!!selectedFilter && onchange) {
-        onchange({
-            detail: {
-                filter: tmpFilters[selectedFilter.name]
+    if (!!selectedFilter) {
+        if (!!onchange) {
+            onchange({
+                detail: {
+                    filter: tmpFilters[selectedFilter.name]
+                }
+            });
+        }
+        filters = filters.map(f => {
+            if (f.name === selectedFilter?.name) {
+                return tmpFilters[selectedFilter.name];
             }
+            return f;
         });
     }
 }
+function isActiveFilter(filter) {
+    let newValue = {}, newValid = false;
+    if (filter.type == 'select') {
+        newValue = filter.values;
+        if (!!newValue && newValue.length > 0) {
+            newValid = true;
+        }
+    }
+    else if ('mode' in filter && filter.mode == 'between') {
+        newValue.to = filter.to;
+        newValue.from = filter.from;
+        if (!!newValue.from || !!newValue.to) {
+            newValid = true;
+        }
+    }
+    else if (filter.type == 'custom') {
+        newValue = filter.value;
+        if ((Array.isArray(newValue) && newValue.length > 0) || (!Array.isArray(newValue) && !!newValue)) {
+            newValid = true;
+        }
+    }
+    else {
+        newValue = filter.value;
+        if (!!newValue) {
+            newValid = true;
+        }
+    }
+    return newValid;
+}
+function updateCustomFilterValues(filterName, newValue, newValid, mode) {
+    let filter = filters.find(f => f.name === filterName);
+    if (!filter)
+        throw new Error('cannot find filter with name ' + filterName);
+    if (filter.type != 'custom')
+        throw new Error('filter is not custom');
+    filter.value = newValue;
+    filter.active = newValid;
+    if (updateMultiFilterValues) {
+        updateMultiFilterValues(filterName, newValue, newValid, mode);
+    }
+}
 </script>
 
-<div class="custom-filters-container">
+<div class="custom-filters-container" class:yscroll={mAndDown}>
 	<div class="filters-selection">
-	
-		{#if activeFilter > 0}
-			<div class="filter-info">
-				{activeFilter} {lang == 'en' ? 'applied' : activeFilter == 1 ? 'applicato' : 'applicati'}
-				<button class="clear-button" onclick={clearFilters}>✕</button>
-			</div>
-		{/if}
-
-	
 		{#each filters as filter}
 			<div
 				tabindex="0"
 				role="button"
 				class="filters-selection-item"
-				class:selected={filter === selectedFilter}
-				onclick={() => selectFilter(filter)}
+				class:selected={filter.name === selectedFilter?.name || isActiveFilter(filter)}				onclick={() => selectFilter(filter)}
 				onkeydown={(event) => handleKeyPress(event, filter)}
-				aria-pressed={filter === selectedFilter}
-			>
+				aria-pressed={filter.name === selectedFilter?.name}			>
 				<div class="filters-selection-title">
-					{filter.label}
+					<div class="filters-selection-title-label">{filter.label}</div>
 					<Icon name="mdi-chevron-right-circle-outline" />
 				</div>
 			</div>
@@ -93,20 +117,32 @@ function handleFilterChange() {
 	<div class="filters-content">
 		{#if selectedFilter}
 			<div class="filters-content-box">
-				<h2>{selectedFilter.label}</h2>				
-				<FilterEditor
-					bind:filter={selectedFilter}
-					{lang}
-					{labelsMapper}
-					editFilterMode="one-edit"
-					bind:tmpFilter={tmpFilters[selectedFilter.name]}
-					mobile={mAndDown}
-					onchange={handleFilterChange}
-					--simple-textfield-border-radius="5px"
-					--chip-default-color="rgb(var(--global-color-primary-foreground))"
-					{customSnippet}
-				>
-				</FilterEditor>
+				<h2>{selectedFilter.label}</h2>	
+				{#key selectedFilter.label}			
+					<FilterEditor
+						bind:filter={selectedFilter}
+						{lang}
+						{labelsMapper}
+						editFilterMode="one-edit"
+						bind:tmpFilter={tmpFilters[selectedFilter?.name || '']}
+						mobile={mAndDown}
+						onchange={handleFilterChange}
+						--simple-textfield-border-radius= 0.5rem
+						--simple-textfield-background-color= transparent
+						--simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
+						--simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
+						--chip-default-color="rgb(var(--global-color-primary-foreground))"
+						--autocomplete-border-radius= 0.5rem
+						--autocomplete-border="1px solid rgb(var(--global-color-background-500))"
+						--autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
+						--autocomplete-padding="9.6px 16px"
+						--autocomplete-background-color="transparent"
+					>
+						{#snippet customSnippet({ filter })}
+							{@render customSnippetInternal?.({ filter, mAndDown, updateCustomFilterValues })}
+						{/snippet}
+					</FilterEditor>
+				{/key}
 			</div>
 		{:else}
 			<div class="filters-content-box">
@@ -115,19 +151,20 @@ function handleFilterChange() {
 		{/if}
 	</div>
 </div>
-
 <style>
-  
 .custom-filters-container {
     display: flex;
     height: 70vh;
-    overflow-y: scroll;
   }
 
+	.yscroll {
+		overflow-y: auto;
+	}
+
   .filters-selection {
     width: 40%;
     padding: 1rem;
-
+		overflow-y: auto;
   }
 
   .filters-selection-item {
@@ -145,13 +182,19 @@ function handleFilterChange() {
     justify-content: space-between;
   }
 
+	.filters-selection-title-label{
+		overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .filters-selection-item.selected {
     border: 1px solid rgb(var(--global-color-primary-500));
     background-color:  rgb(var(--global-color-background-500));
   }
 
 	.filters-content {
-    width: 60%;
+    min-width: 60%;
+		max-width: 60%;
   }
   .filters-content-box {
     padding: 1rem;
@@ -162,36 +205,4 @@ function handleFilterChange() {
     text-align: center;
     font-weight: bold;
   }
-
-  .filter-info {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.25rem 0.5rem;
-    background-color: rgb(var(--global-color-background-700));
-    color: rgb(var(--global-color-primary-600));
-    border-radius: 1rem;
-    font-weight: bold;
-    font-size: 0.9rem;
-		margin-bottom: 10px;
-  }
-
-  .clear-button {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: 1rem;
-    height: 1rem;
-    margin-left: 0.5rem;
-    border-radius: 50%;
-    background-color: rgb(var(--global-color-background-700));
-    color: rgb(var(--global-color-primary-600));
-    font-weight: bold;
-    cursor: pointer;
-    font-size: 0.8rem;
-    border: none;
-  }
-
-  .clear-button:hover {
-    background-color: rgb(var(--global-color-background-500));
-  }
 </style>

package/dist/components/composed/search/DynamicFilters.svelte.d.ts

@@ -1,18 +1,20 @@
-import { FilterEditor } from "../../..";
-import type { Filter } from "../../../utils/filters/filters";
-import { type ComponentProps } from "svelte";
-interface Props {
+import type { DateMode, Filter, NumberMode, SelectMode, StringMode } from "../../../utils/filters/filters";
+import { type Snippet } from "svelte";
+declare const DynamicFilters: import("svelte").Component<{
     filters?: Filter[];
     lang?: "it" | "en";
     mAndDown?: boolean;
-    onremoveAllFilters?: () => void;
     onchange?: (event: {
         detail: {
             filter: Filter;
         };
     }) => void;
-    customSnippet?: ComponentProps<typeof FilterEditor>['customSnippet'];
-}
-declare const DynamicFilters: import("svelte").Component<Props, {}, "">;
+    customSnippet?: Snippet<[{
+        filter: Filter | undefined;
+        mAndDown: boolean;
+        updateCustomFilterValues: (filterName: string, newValue: any, newValid: boolean, mode?: NumberMode | StringMode | SelectMode | DateMode) => void;
+    }]>;
+    updateMultiFilterValues?: (filterName: string, newValue: any, newValid: boolean, mode?: NumberMode | StringMode | SelectMode | DateMode) => void;
+}, {}, "">;
 type DynamicFilters = ReturnType<typeof DynamicFilters>;
 export default DynamicFilters;

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

@@ -195,7 +195,8 @@ function onclick(event) {
               --simple-text-field-margin-left="0px"
               mobileDrawer={mobile}
               onchange={handleChangeValue}
-            ></Autocomplete>
+              placeholder={editFilterMode == 'one-edit' ? tmpFilter?.label : undefined}
+              ></Autocomplete>
           </div>
         {:else if tmpFilter.type === "select" && (tmpFilter.view === 'toggle')}
           <div

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

@@ -2,4 +2,5 @@
   --filters-button-cancel-default-background-color: transparent;
   --filters-button-cancel-default-color: rgb(var(--global-color-primary-400));
   --filters-default-wrapper-width: auto;
+  --filters-default-button-height: 28px;
 }

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

@@ -117,8 +117,9 @@ function handleApplyFilterClick() {
 let activeFilters = $derived(filters.filter((f) => f.active));
 function handleRemoveFilter(filter) {
     let filterIndex = filters.findIndex((f) => f.name === filter.name);
-    filters[filterIndex].active = false;
     let filterName = filter.name;
+    filters[filterIndex].active = false;
+    tmpFilters[filterName].active = false;
     if (Object.keys(filters[filterIndex]).includes('value')) {
         //@ts-ignore
         filters[filterIndex].value = undefined;
@@ -265,8 +266,12 @@ function updateMultiFilterValues(filterName, newValue, newValid, mode) {
     }
     else if ('mode' in tmpFilter && tmpFilter.mode == 'between') {
         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();
+            if (newValue.from) {
+                tmpFilter.from = DateTime.fromJSDate(newValue.from).setLocale('it-IT').startOf('day').toJSDate();
+            }
+            if (newValue.to) {
+                tmpFilter.to = DateTime.fromJSDate(newValue.to).setLocale('it-IT').endOf('day').toJSDate();
+            }
         }
         else {
             tmpFilter.from = newValue.from;
@@ -402,6 +407,7 @@ function onclick(event, stopPropagation = false) {
           >
             <Button
               --button-color="var(--chip-color, var(--chip-default-color))"
+              --button-height="var(--filters-button-height, var(--filters-default-button-height))"
               onclick={handleAddFilterClick}
             >
               <div class="filter-button-content">
@@ -423,6 +429,7 @@ function onclick(event, stopPropagation = false) {
         >
           <Button
             --button-color="var(--chip-color, var(--chip-default-color))"
+            --button-height="var(--filters-button-height, var(--filters-default-button-height))"
             onclick={handleAddFilterClick}
           >
             <div class="filter-button-content">
@@ -842,7 +849,7 @@ function onclick(event, stopPropagation = false) {
 
   .filters-wrapper {
     display: flex;
-    align-items: center;
+    align-items: start;
     gap: 20px;
     max-width: 100%;
     width: var(

package/dist/components/simple/lists/SimpleTable.svelte

@@ -10,7 +10,7 @@ let { headers = [], items = [], sortedBy = $bindable(undefined), sortDirection =
 if (!onrowClick && !!onrowDoubleClick) {
     throw new Error('cannot define an onrowDoubleClick event without defining an onrowClick event');
 }
-let clickTimeout = undefined;
+let clickTimeout = undefined, sortModify;
 onMount(() => {
     if (resizableColumns) {
         if (!resizedColumnSizeWithPadding)
@@ -59,17 +59,20 @@ function handleHeaderClick(header) {
                 sortDirection = 'desc';
             else if (sortDirection == 'desc') {
                 sortedBy = undefined;
+                sortModify = undefined;
             }
         }
         else {
             sortedBy = header.value;
             sortDirection = 'asc';
+            sortModify = header.sortModify;
         }
         if (onsort) {
             onsort({
                 detail: {
                     sortedBy,
-                    sortDirection
+                    sortDirection,
+                    sortModify
                 }
             });
         }

package/dist/components/simple/lists/SimpleTable.svelte.d.ts

@@ -6,6 +6,10 @@ export type Header<Data = any> = {
     width?: string;
     minWidth?: string;
     sortable?: boolean;
+    sortModify?: (params: {
+        builder: FilterBuilder;
+        sortDirection: 'asc' | 'desc';
+    }) => FilterBuilder;
     data?: Data;
 };
 export type CalculateRowStyles<T> = (item: T) => {
@@ -18,6 +22,7 @@ import '../../../css/main.css';
 import './SimpleTable.css';
 import { type Snippet } from 'svelte';
 import type { ColumnBoolean, ColumnCheckBox, ColumnCustom, ColumnDate, ColumnIcon, ColumnNumber, ColumnString } from './columnTypes';
+import type { FilterBuilder } from '../../..';
 declare class __sveltets_Render<Item extends {
     [key: string]: any;
 }, Data> {
@@ -40,6 +45,7 @@ declare class __sveltets_Render<Item extends {
             detail: {
                 sortedBy: string | undefined;
                 sortDirection: string;
+                sortModify: Header["sortModify"];
             };
         }) => void) | undefined;
         onrowClick?: ((event: {

package/package.json

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