@likable-hair/svelte 4.2.0 → 4.2.2

package/dist/components/composed/forms/PeriodSelector.svelte.d.ts

@@ -0,0 +1,75 @@
+type RollingMeasurementUnit = 'days' | 'weeks' | 'months' | 'years';
+type RollingDirection = 'last' | 'next';
+type PickerSelectValues = {
+    from?: Date;
+    to?: Date;
+};
+type RollingSelectValues = {
+    numberOfUnits?: number;
+    measurementUnit?: RollingMeasurementUnit;
+    direction?: RollingDirection;
+};
+type TimespanMap<T extends string> = {
+    quick: T | undefined;
+    rolling: RollingSelectValues;
+    picker: PickerSelectValues;
+};
+export type TimespanSettings<T extends string = string> = {
+    [K in keyof TimespanMap<T>]: {
+        method?: K;
+        values?: TimespanMap<T>[K];
+    };
+}[keyof TimespanMap<T>];
+export declare const defaultQuickOptions: {
+    it: {
+        value: string;
+        label: string;
+    }[];
+    en: {
+        value: string;
+        label: string;
+    }[];
+};
+export declare function getPeriodLabel<T extends string>(settings: TimespanSettings<T> | undefined, lang?: 'en' | 'it', quickOptions?: {
+    value: string | T;
+    label: string;
+}[]): string;
+declare class __sveltets_Render<T extends string = string> {
+    props(): {
+        timespanSettings?: TimespanSettings<T> | undefined;
+        quickSelectOptions?: {
+            value: T;
+            label: string;
+        }[] | undefined;
+        valid?: boolean;
+        mode?: "default" | "datepicker";
+        lang?: "it" | "en";
+        locale?: "it" | "en";
+        showTimeRangeLabel?: boolean;
+        isSelectionMode?: boolean;
+        onchange?: ((event: {
+            timespanSettings?: TimespanSettings<T> | undefined;
+        }) => void) | undefined;
+        quickRangeConvertor?: ((value: string) => {
+            from?: Date;
+            to: Date;
+        } | undefined) | undefined;
+        setTimespanLabel?: ((params: {
+            timespanSettings: TimespanSettings<T> | undefined;
+        }) => string) | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "timespanSettings" | "valid" | "isSelectionMode";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string = string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PeriodSelector: $$IsomorphicComponent;
+type PeriodSelector<T extends string = string> = InstanceType<typeof PeriodSelector<T>>;
+export default PeriodSelector;

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

@@ -20,42 +20,50 @@ import HeadersDrawer from "../common/HeadersDrawer.svelte";
 import lodash from "lodash";
 const deepEqual = lodash.isEqual;
 onMount(() => {
-    if (rowAppendSnippet && headersHTML['row-append-header']) {
-        const actionCells = tableContainer?.querySelectorAll('.row-append-cell');
-        if (actionCells && actionCells.length > 0) {
-            let maxActionWidth = 0;
-            for (let i = 0; i < actionCells.length; i++) {
-                const cellContent = actionCells[i];
-                const width = cellContent.getBoundingClientRect().width;
-                if (width > maxActionWidth) {
-                    maxActionWidth = width;
+    (async () => {
+        await tick();
+        if (rowAppendSnippet && headersHTML['row-append-header']) {
+            const actionCells = tableContainer?.querySelectorAll('.row-append-cell');
+            if (actionCells && actionCells.length > 0) {
+                let maxActionWidth = 0;
+                for (let i = 0; i < actionCells.length; i++) {
+                    const cellContent = actionCells[i];
+                    const width = cellContent.getBoundingClientRect().width;
+                    if (width > maxActionWidth) {
+                        maxActionWidth = width;
+                    }
                 }
+                const finalWidth = Math.max(Math.ceil(maxActionWidth), 40);
+                headersHTML['row-append-header'].style.width = `${finalWidth}px`;
+                headersHTML['row-append-header'].style.minWidth = `${finalWidth}px`;
             }
-            const finalWidth = Math.ceil(maxActionWidth + 15);
-            headersHTML['row-append-header'].style.width = `${finalWidth}px`;
-            headersHTML['row-append-header'].style.minWidth = `${finalWidth}px`;
-        }
-    }
-    updateHeaderHeight();
-    window.addEventListener('resize', updateHeaderHeight);
-    tableContainer?.addEventListener("scroll", setReachedBottomOrTop);
-    if (tableContainer?.scrollHeight && tableContainer.clientHeight) {
-        hideScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight;
-    }
-    for (const head of headers) {
-        let th = headersHTML[head.value];
-        if (!!th) {
-            resizeHeader(th, head);
         }
-    }
-    tableHTML?.classList.add('dynamic-resizable');
-    resizeObserver = new ResizeObserver(() => {
-        updateRemainingWidth();
         updateHeaderHeight();
-    });
-    if (tableContainer) {
-        resizeObserver.observe(tableContainer);
-    }
+        window.addEventListener('resize', updateHeaderHeight);
+        tableContainer?.addEventListener("scroll", setReachedBottomOrTop);
+        if (tableContainer?.scrollHeight && tableContainer.clientHeight) {
+            hideScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight;
+        }
+        for (const head of headers) {
+            let th = headersHTML[head.value];
+            if (!!th) {
+                resizeHeader(th, head);
+            }
+        }
+        tableHTML?.classList.add('dynamic-resizable');
+        resizeObserver = new ResizeObserver(() => {
+            if (tableContainer) {
+                const rect = tableContainer.getBoundingClientRect();
+                containerWidth = rect.width;
+            }
+            calculateStickyMetrics();
+            updateRemainingWidth();
+            updateHeaderHeight();
+        });
+        if (tableContainer) {
+            resizeObserver.observe(tableContainer);
+        }
+    })();
     return () => {
         window.removeEventListener('resize', updateHeaderHeight);
         tableContainer?.removeEventListener("scroll", setReachedBottomOrTop);
@@ -93,14 +101,20 @@ $effect(() => {
         }, 30);
     }
 });
-let { headers = [], headersToShowInTable = $bindable(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, multiEditTabs, 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 = $bindable({}), pinnableColumns, dynamicFilters = true, useSelectedItemsOnly = false, selectedAllDisabled = false, headerDrawerProps, 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, customRowSnippet, subRowAppendSnippet, subHeaderLabelSnippet, subHeaderSnippet, subRowActionsSnippet, customSubRowSnippet, customQuickFilterSnippet, appendSnippet, headerDrawerContentSnippet, headerDrawerHeadersToAddSnippet, headerDrawerItemSnippet, } = $props();
-let openCellEditor = $state(false), cellEditorActivator = $state(), cellEditorContainer = $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(), tableHTML = $state(), headersHTML = $state({}), userScrolling = $state(true), reachedBottom = $state(false), reachedTop = false, resizing = false, remainingWidth = $state(0), hideScrollbar = $state(false), sortModify, mainHeader = $state(), resizeObserver, ignoreSelectAll = rows.length == totalRows && useSelectedItemsOnly, colspan = $derived.by(() => {
+let { headers = [], headersToShowInTable = $bindable(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, multiEditTabs, 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 = $bindable({}), pinnableColumns, dynamicFilters = true, useSelectedItemsOnly = false, selectedAllDisabled = false, stickyMinContainerWidth = 1024, headerDrawerProps, filterLabels, 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, customRowSnippet, subRowAppendSnippet, subHeaderLabelSnippet, subHeaderSnippet, subRowActionsSnippet, customSubRowSnippet, customQuickFilterSnippet, appendSnippet, headerDrawerContentSnippet, headerDrawerHeadersToAddSnippet, headerDrawerItemSnippet, } = $props();
+let openCellEditor = $state(false), cellEditorActivator = $state(), cellEditorContainer = $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(), tableHTML = $state(), headersHTML = $state({}), userScrolling = $state(true), reachedBottom = $state(false), reachedTop = false, resizing = false, remainingWidth = $state(0), hideScrollbar = $state(false), sortModify, mainHeader = $state(), resizeObserver, ignoreSelectAll = rows.length == totalRows && useSelectedItemsOnly, containerWidth = $state(0), totalStickyWidth = $state(0), colspan = $derived.by(() => {
     return headersToShowInTable.length +
         (!!showSelect && !showExpand && rows.length > 0 ? 1 : 0) +
         (showExpand ? 1 : 0) +
         (remainingWidth ? 1 : 0) +
-        (rowAppendSnippet ? 1 : 0) +
-        (customizeHeaders ? 1 : 0);
+        (customizeHeaders || rowAppendSnippet ? 1 : 0);
+});
+let stickyEnabled = $derived.by(() => {
+    if (containerWidth <= stickyMinContainerWidth)
+        return false;
+    if (totalStickyWidth >= containerWidth)
+        return false;
+    return true;
 });
 const organizedHeaders = () => {
     let pinnedFixedHeaders = headers.filter(h => h.pinned).map(h => ({
@@ -122,7 +136,32 @@ $effect(() => {
         headersToShowInTable = organizedHeaders();
     }
 });
-const DEFAULT_MIN_WIDTH_PX = 100, DEFAULT_MAX_WIDTH_PX = 400;
+function calculateStickyMetrics() {
+    let width = 0;
+    const hasPinnedData = headersToShowInTable.find(h => h.pinned);
+    if (hasPinnedData) {
+        if (headersHTML['select'])
+            width += headersHTML['select'].getBoundingClientRect().width;
+        if (headersHTML['expand'])
+            width += headersHTML['expand'].getBoundingClientRect().width;
+    }
+    headersToShowInTable.forEach(head => {
+        if (head.pinned) {
+            const stored = resizedColumnSizeWithPadding[head.value];
+            if (stored) {
+                width += stored;
+            }
+            else if (headersHTML[head.value]) {
+                width += headersHTML[head.value].getBoundingClientRect().width;
+            }
+        }
+    });
+    if (customizeHeaders && headersHTML['row-append-header']) {
+        width += headersHTML['row-append-header'].getBoundingClientRect().width;
+    }
+    totalStickyWidth = width;
+}
+const DEFAULT_MIN_WIDTH_PX = 130, DEFAULT_MAX_WIDTH_PX = 400;
 let totalSections = $derived((totalRows - renderedRowsNumber) / sectionRowsNumber);
 let hasMoreToRender = $derived(totalSections > currentSectionNumber);
 let totalCachedSections = $derived((rows.length - renderedRowsNumber) / sectionRowsNumber);
@@ -809,6 +848,7 @@ function resize(node) {
                     resizedColumnSizeWithPadding = {
                         ...resizedColumnSizeWithPadding,
                     };
+                    calculateStickyMetrics();
                 }
             }
         }
@@ -828,6 +868,7 @@ function resize(node) {
                         }
                     });
                 }
+                calculateStickyMetrics();
             }
         }
         function mouseDownHandler(e) {
@@ -851,12 +892,14 @@ function resize(node) {
     }
 }
 $effect(() => {
-    if (!!tableContainer &&
-        headersToShowInTable.length > 0 &&
-        resizedColumnSizeWithPadding &&
-        mainHeader) {
-        tick().then(updateRemainingWidth);
-    }
+    headersToShowInTable;
+    resizedColumnSizeWithPadding;
+    showSelect;
+    showExpand;
+    tick().then(() => {
+        calculateStickyMetrics();
+        updateRemainingWidth();
+    });
 });
 async function updateRemainingWidth() {
     if (tableContainer != null && !!tableContainer && mainHeader) {
@@ -870,7 +913,7 @@ async function updateRemainingWidth() {
                 const width = th?.getBoundingClientRect().width || 0;
                 return sum + width + 1;
             }, 0);
-            const extraStaticWidth = Array.from(mainHeader.querySelectorAll('th.non-resizable, th.row-append-header, th.fixed-col'))
+            const extraStaticWidth = Array.from(mainHeader.querySelectorAll('th.non-resizable, th.row-append-header'))
                 .reduce((sum, th) => sum + th.getBoundingClientRect().width + 1, 0);
             remainingWidth = Math.max(0, containerWidth - totalResizableWidth - extraStaticWidth + 18);
         }
@@ -962,6 +1005,7 @@ function handleSaveHeadersToShow(event) {
                     drawerSpace='40rem'
                     appendSnippet={filterAppendSnippet}
                     customChipSnippet={customFilterChipSnippet}
+                    {...filterLabels}
                   >
                     {#snippet contentSnippet({ filters, mAndDown, updateMultiFilterValues, })}  
                       {#key filters}
@@ -971,6 +1015,7 @@ function handleSaveHeadersToShow(event) {
                           {mAndDown}
                           onchange={e => updateFilterValues(e.detail.filter, updateMultiFilterValues)}    
                           {updateMultiFilterValues}
+                          labelsMapper={filterLabels?.labelsMapper}
                         >
                           {#snippet customSnippet({ filter, mAndDown, updateCustomFilterValues })}
                             {@render customFilterSnippet?.({ filter, mAndDown, updateCustomFilterValues })}
@@ -996,6 +1041,7 @@ function handleSaveHeadersToShow(event) {
                     appendSnippet={filterAppendSnippet}
                     customChipSnippet={customFilterChipSnippet}
                     customSnippet={customFilterSnippet}
+                    {...filterLabels}
                   >
                   </Filters>
                 {/if}
@@ -1098,9 +1144,10 @@ function handleSaveHeadersToShow(event) {
         <tr>
           {#if !!showSelect && !showExpand && rows.length > 0}
             <th
+              bind:this={headersHTML['select']}
               class="non-resizable"
-              class:sticky-col={headersToShowInTable.find(h => h.pinned)}
-              style:left={"0"}
+              class:sticky-col={headersToShowInTable.find(h => h.pinned) && stickyEnabled}
+              style:left={headersToShowInTable.find(h => h.pinned) && stickyEnabled ? 0 : undefined}
             > 
               {#if selectMode === "multiple" && !selectedAllDisabled}
                 <Checkbox
@@ -1114,9 +1161,10 @@ function handleSaveHeadersToShow(event) {
           {/if}
           {#if showExpand}
             <th
+              bind:this={headersHTML['expand']}
               class="non-resizable"
-              class:sticky-col={headersToShowInTable.find(h => h.pinned)}
-              style:left={"0"}
+              class:sticky-col={headersToShowInTable.find(h => h.pinned) && stickyEnabled}
+              style:left={headersToShowInTable.find(h => h.pinned) && stickyEnabled ? 0 : undefined}
             ></th>
           {/if}
           {#each headersToShowInTable as header, index}
@@ -1127,9 +1175,9 @@ function handleSaveHeadersToShow(event) {
               style:min-width={header.minWidth}
               style:max-width={header.maxWidth}
               class:sortable={header.sortable}
-              class:sticky-col={header.pinned}
+              class:sticky-col={header.pinned && stickyEnabled}
               style:left={
-                header.pinned 
+                (header.pinned && stickyEnabled)
                   ? (showExpand || showSelect)
                     ? `calc(${baseLeft}px + ${extraLeft})`
                     : `${baseLeft}px`
@@ -1178,26 +1226,25 @@ function handleSaveHeadersToShow(event) {
               {/if}
             </th>
           {/each}
-          {#if rowAppendSnippet}
+          {#if customizeHeaders || rowAppendSnippet}
             <th
+              class:sticky-col={(customizeHeaders || !!rowAppendSnippet) && stickyEnabled}
+              style:right={((customizeHeaders || !!rowAppendSnippet) && stickyEnabled) ? 0 : undefined}
               class="row-append-header"
               bind:this={headersHTML['row-append-header']}
             >
-              {@render rowAppendSnippet({ index: -1, row: undefined })}
-            </th>
-          {/if}
-          {#if customizeHeaders}
-            <th
-              class="fixed-col"
-            >
-              <Icon
-                name="mdi-plus-circle-outline"
-                onclick={() => (openHeaderDrawer = true)}
-                --icon-size="var(
-                  --dynamic-table-customize-headers-icon-size,
-                  var(--dynamic-table-default-customize-headers-icon-size)
-                )"
-              />
+              {#if customizeHeaders}
+                <Icon
+                  name="mdi-plus-circle-outline"
+                  onclick={() => (openHeaderDrawer = true)}
+                  --icon-size="var(
+                    --dynamic-table-customize-headers-icon-size,
+                    var(--dynamic-table-default-customize-headers-icon-size)
+                  )"
+                />
+              {:else if rowAppendSnippet}
+                {@render rowAppendSnippet({ index: -1, row: undefined })}
+              {/if}
             </th>
           {/if}
           {#if remainingWidth}
@@ -1267,8 +1314,8 @@ function handleSaveHeadersToShow(event) {
               {#if !!showSelect && !showExpand}
                 <td 
                   class=non-resizable
-                  class:sticky-col={headersToShowInTable.find(h => h.pinned)}
-                  style:left={"0"}
+                  class:sticky-col={headersToShowInTable.find(h => h.pinned) && stickyEnabled}
+                  style:left={headersToShowInTable.find(h => h.pinned) && stickyEnabled ? 0 : undefined}
                 >
                   <Checkbox
                     id={row.item[uniqueKey]}
@@ -1290,8 +1337,8 @@ function handleSaveHeadersToShow(event) {
               {#if showExpand}
                 <td
                   class=non-resizable
-                  class:sticky-col={headersToShowInTable.find(h => h.pinned)}
-                  style:left={"0"}
+                  class:sticky-col={headersToShowInTable.find(h => h.pinned) && stickyEnabled}
+                  style:left={headersToShowInTable.find(h => h.pinned) && stickyEnabled ? 0 : undefined}
                 >
                   <Icon
                     name={expandedRows.findIndex(
@@ -1313,9 +1360,9 @@ function handleSaveHeadersToShow(event) {
                 <td
                   class:hover-cell={cellEdit && !loading && !!header.cellEditorInfo}
                   class:cell-edit-activator={cellEditorIndexHeader == indexHeader && cellEditorIndexRow == indexRow && !cellEditorSubItem}
-                  class:sticky-col={header.pinned}
+                  class:sticky-col={header.pinned && stickyEnabled}
                   style:left={
-                    header.pinned 
+                    (header.pinned && stickyEnabled)
                       ? (showExpand || showSelect)
                         ? `calc(${baseLeft}px + ${extraLeft})`
                         : `${baseLeft}px`
@@ -1361,16 +1408,20 @@ function handleSaveHeadersToShow(event) {
                   {/if}
                 </td>
               {/each}
-              {#if rowAppendSnippet}
-                <td class={clazz.cell || ""}>
-                  <div class="row-append-cell" style="display: inline-block; white-space: nowrap;">
+              {#if customizeHeaders || rowAppendSnippet}
+                <td
+                  class={clazz.cell || ""}
+                  class:sticky-col={(customizeHeaders || !!rowAppendSnippet) && stickyEnabled}
+                  style:right={((customizeHeaders || !!rowAppendSnippet) && stickyEnabled) ? 0 : undefined}
+                >
+                  <div 
+                    class="row-append-cell"
+                    style="display: inline-block; white-space: nowrap;"
+                  >
                     {@render rowAppendSnippet?.({ index: indexRow, row })}
                   </div>
                 </td>
               {/if}
-              {#if customizeHeaders}
-                <td></td>
-              {/if}
               {#if remainingWidth}
                 <td></td>
               {/if}
@@ -2289,10 +2340,7 @@ function handleSaveHeadersToShow(event) {
   .pointer {
     cursor: pointer;
   }
-  .table-header th.fixed-col {
-    position: sticky;
-    right: 0;
-    z-index: 3;
+  .row-append-header {
     width: 23px;
     min-width: 23px;
   }

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

@@ -177,7 +177,9 @@ declare class __sveltets_Render<Item extends {
         dynamicFilters?: boolean;
         useSelectedItemsOnly?: boolean;
         selectedAllDisabled?: boolean;
+        stickyMinContainerWidth?: number;
         headerDrawerProps?: ComponentProps<typeof HeadersDrawer>["drawerProps"];
+        filterLabels?: Pick<ComponentProps<typeof Filters>, "addFilterLabel" | "applyFilterLabel" | "filterTitleLabel" | "cancelFilterLabel" | "labelsMapper" | "trueString" | "falseString" | "betweenSeparator">;
         class?: {
             container?: string;
             header?: string;

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

@@ -4,7 +4,7 @@ import { Icon } from "../../..";
 import './EnhancedPaginatedTable.css';
 import lodash from "lodash";
 const deepEqual = lodash.isEqual;
-let { headersToShowInTable = $bindable(), pinnableColumns, headerDrawerProps, onsaveHeadersToShow, headerDrawerContentSnippet, headerDrawerItemSnippet, headerDrawerHeadersToAddSnippet, lang = 'en', headers, stickyAppendSnippet: internalStickyAppendSnippet, sortedBy = $bindable(undefined), sortDirection = $bindable("asc"), page = $bindable(1), rowsPerPage = $bindable(20), filters = $bindable([]), quickFilters = $bindable(), selectedItems = $bindable([]), selectedAll = $bindable(), stickFirstColumn, resizedColumnSizeWithPadding = $bindable({}), ...rest } = $props();
+let { headersToShowInTable = $bindable(), pinnableColumns, headerDrawerProps, onsaveHeadersToShow, headerDrawerContentSnippet, headerDrawerItemSnippet, headerDrawerHeadersToAddSnippet, lang = 'en', headers, stickyAppendSnippet: internalStickyAppendSnippet, sortedBy = $bindable(undefined), sortDirection = $bindable("asc"), page = $bindable(1), rowsPerPage = $bindable(20), filters = $bindable([]), quickFilters = $bindable(), selectedItems = $bindable([]), selectedAll = $bindable(), resizedColumnSizeWithPadding = $bindable({}), ...rest } = $props();
 const organizedHeaders = () => {
     let pinnedFixedHeaders = headers.filter(h => h.pinned).map(h => ({
         ...h,
@@ -43,7 +43,6 @@ function handleSaveHeadersToShow(event) {
   {...rest} 
   {lang} 
   headers={headersToShowInTable}
-  {stickFirstColumn}
   bind:sortedBy
   bind:sortDirection
   bind:page

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

@@ -19,9 +19,9 @@ declare class __sveltets_Render<Item extends {
         loading?: boolean;
         doubleClickActive?: boolean;
         doubleClickDelay?: number;
-        stickFirstColumn?: boolean;
         calculateRowStyles?: import("../../simple/lists/SimpleTable.svelte").CalculateRowStyles<Item> | undefined;
         calculateRowClasses?: import("../../simple/lists/SimpleTable.svelte").CalculateRowClasses<Item> | undefined;
+        stickyMinContainerWidth?: number;
         onsort?: ((event: {
             detail: {
                 sortedBy: string | undefined;
@@ -99,6 +99,7 @@ declare class __sveltets_Render<Item extends {
         uniqueKey?: keyof Item | undefined;
         hideActions?: boolean;
         actionsForSelectedItems?: import("../common/QuickActions.svelte").Action[];
+        filterLabels?: Pick<ComponentProps<typeof import("../../..").Filters>, "addFilterLabel" | "applyFilterLabel" | "filterTitleLabel" | "cancelFilterLabel" | "labelsMapper" | "trueString" | "falseString" | "betweenSeparator">;
         class?: {
             simpleTable?: {
                 container?: string;

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

@@ -13,7 +13,7 @@ let { headers = [], items = [], sortedBy = $bindable(undefined), sortDirection =
     { label: "20", value: 20 },
     { label: "50", value: 50 },
     { label: "100", value: 100 },
-], hideRowsPerPage = false, totalElements = undefined, rowsPerPage = $bindable(20), filters = $bindable([]), quickFilters = $bindable(), searchBarColumns = undefined, searchBarVisible = true, quickFiltersVisible = false, lang = "en", dateLocale, multiEditTabs, searchBarPlaceholder = lang == 'en' ? "Type to search..." : "Scrivi per cercare...", editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = $bindable({}), pointerOnRowHover = undefined, doubleClickActive = false, doubleClickDelay = 250, searchTimeoutDelay = 300, hideSelectAll, showSelection, selectedItems = $bindable([]), selectionMode = 'multiple', selectedAll = $bindable(), uniqueKey = 'id', hideActions, actionsForSelectedItems = [], calculateRowStyles = undefined, calculateRowClasses = undefined, class: clazz = {}, onfiltersChange, onpaginationChange, onremoveFilter, onremoveAllFilters, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onrowClick, onrowDoubleClick, appendSnippet, customSnippet, headerLabelSnippet, headerSnippet, onsort, footerSnippet, rangeDescriptorSnippet, searchBarSnippet, noDataSnippet, totalsSnippet, oncolumnResize, prependSnippet: prependSnippetInternal, ...rest } = $props();
+], hideRowsPerPage = false, totalElements = undefined, rowsPerPage = $bindable(20), filters = $bindable(), quickFilters = $bindable(), searchBarColumns = undefined, searchBarVisible = true, quickFiltersVisible = false, lang = "en", dateLocale, multiEditTabs, searchBarPlaceholder = lang == 'en' ? "Type to search..." : "Scrivi per cercare...", editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = $bindable({}), pointerOnRowHover = undefined, doubleClickActive = false, doubleClickDelay = 250, searchTimeoutDelay = 300, hideSelectAll, showSelection, selectedItems = $bindable([]), selectionMode = 'multiple', selectedAll = $bindable(), uniqueKey = 'id', hideActions, actionsForSelectedItems = [], filterLabels, calculateRowStyles = undefined, calculateRowClasses = undefined, class: clazz = {}, onfiltersChange, onpaginationChange, onremoveFilter, onremoveAllFilters, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onrowClick, onrowDoubleClick, appendSnippet, customSnippet, headerLabelSnippet, headerSnippet, onsort, footerSnippet, rangeDescriptorSnippet, searchBarSnippet, noDataSnippet, totalsSnippet, oncolumnResize, prependSnippet: prependSnippetInternal, ...rest } = $props();
 let searchBarInput = $state(), searchText = $state(), sortModify, searchTimeout, selectedIndexes = [];
 let rowsPerPageSelection = $state([]);
 $effect(() => {
@@ -188,21 +188,24 @@ function handleSelect(item, shiftKeyPressed) {
               ></SearchBar>
             {/if}
           {/if}
-          <Filters
-            bind:filters
-            onapplyFilter={handleFiltersChange}
-            onremoveFilter={handleRemoveFilter}
-            onremoveAllFilters={handleRemoveAllFilters}
-            --filters-default-wrapper-width={!!searchBarVisible ? undefined : "100%"}
-            {lang}
-            {dateLocale}
-            {editFilterMode}
-            {showActiveFilters}
-            {multiEditTabs}
-            appendSnippet={filterAppendSnippet}
-            customChipSnippet={customFilterChipSnippet}
-            customSnippet={customFilterSnippet}
-          ></Filters>
+          {#if filters?.length}
+            <Filters
+              bind:filters
+              onapplyFilter={handleFiltersChange}
+              onremoveFilter={handleRemoveFilter}
+              onremoveAllFilters={handleRemoveAllFilters}
+              --filters-default-wrapper-width={!!searchBarVisible ? undefined : "100%"}
+              {lang}
+              {dateLocale}
+              {editFilterMode}
+              {showActiveFilters}
+              {multiEditTabs}
+              appendSnippet={filterAppendSnippet}
+              customChipSnippet={customFilterChipSnippet}
+              customSnippet={customFilterSnippet}
+              {...filterLabels}
+            ></Filters>
+          {/if}
         </div>
         {#if quickFiltersVisible}
           <div class="quick-filters-container">
@@ -254,6 +257,7 @@ function handleSelect(item, shiftKeyPressed) {
           <div
             style:display=flex
             style:align-items=middle
+            style:justify-content=center
             style:padding="8px 0px"
           >
             <Checkbox

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

@@ -24,9 +24,9 @@ declare class __sveltets_Render<Item extends {
         loading?: boolean;
         doubleClickActive?: boolean;
         doubleClickDelay?: number;
-        stickFirstColumn?: boolean;
         calculateRowStyles?: import("../../simple/lists/SimpleTable.svelte").CalculateRowStyles<Item> | undefined;
         calculateRowClasses?: import("../../simple/lists/SimpleTable.svelte").CalculateRowClasses<Item> | undefined;
+        stickyMinContainerWidth?: number;
         onsort?: ((event: {
             detail: {
                 sortedBy: string | undefined;
@@ -104,6 +104,7 @@ declare class __sveltets_Render<Item extends {
         uniqueKey?: keyof Item | undefined;
         hideActions?: boolean;
         actionsForSelectedItems?: Action[];
+        filterLabels?: Pick<ComponentProps<typeof Filters>, "addFilterLabel" | "applyFilterLabel" | "filterTitleLabel" | "cancelFilterLabel" | "labelsMapper" | "trueString" | "falseString" | "betweenSeparator">;
         class?: {
             simpleTable?: {
                 container?: string;

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

@@ -1,15 +1,7 @@
 <script lang="ts">import { FilterEditor, Icon } from "../../..";
 import MediaQuery from "../../simple/common/MediaQuery.svelte";
 import {} from "svelte";
-let { filters = [], lang = "en", mAndDown = false, onchange, updateMultiFilterValues, customSnippet: customSnippetInternal, } = $props();
-let selectedFilter = $state();
-let tmpFilters = $state(filters.reduce((acc, f) => {
-    if (f.active) {
-        acc[f.name] = f;
-    }
-    return acc;
-}, {}));
-let labelsMapper = lang == 'en' ? {
+let { filters = [], lang = "en", mAndDown = false, labelsMapper = lang == 'en' ? {
     equal: { extended: "equal to", short: "equal" },
     like: { short: "includes" },
     ilike: { short: "includes" },
@@ -27,7 +19,14 @@ let labelsMapper = lang == 'en' ? {
     lower: { short: "minore", extended: "minore di" },
     between: { short: "compreso", extended: "è compreso tra" },
     different: { short: "diverso", extended: "diverso da" },
-};
+}, onchange, updateMultiFilterValues, customSnippet: customSnippetInternal, } = $props();
+let selectedFilter = $state();
+let tmpFilters = $state(filters.reduce((acc, f) => {
+    if (f.active) {
+        acc[f.name] = f;
+    }
+    return acc;
+}, {}));
 function selectFilter(filter) {
     selectedFilter = filter === selectedFilter ? undefined : filter;
 }
@@ -148,6 +147,7 @@ function updateCustomFilterValues(filterName, newValue, newValid, mode) {
 								--dropdown-button-active-color='transparent'
 								--dropdown-button-active-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
 								--dropdown-button-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
+								--dropdown-button-box-sizing=content-box
 							>
 								{#snippet customSnippet({ filter })}
 									{@render customSnippetInternal?.({ filter, mAndDown, updateCustomFilterValues })}

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

@@ -4,6 +4,12 @@ declare const DynamicFilters: import("svelte").Component<{
     filters?: Filter[];
     lang?: "it" | "en";
     mAndDown?: boolean;
+    labelsMapper?: {
+        [label: string]: {
+            extended?: string;
+            short: string;
+        };
+    };
     onchange?: (event: {
         detail: {
             filter: Filter;