@likable-hair/svelte 4.0.10 → 4.0.12

package/dist/components/composed/forms/AsyncAutocomplete.svelte

@@ -4,7 +4,8 @@
 <script lang="ts" generics="Data">import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
 import debounceStore from "../../../stores/debounce";
 import { writable } from 'svelte/store';
-let { items = [], values = [], multiple = false, searcher, placeholder, searchThreshold = 2, debounceTimeout = 500, searching = false, search = false, searchText, maxVisibleChips, menuOpened = false, mobileDrawer = false, closeOnSelect = false, disabled = false, chipLabelSnippet, itemLabelSnippet, onchange, } = $props();
+import Menu from "../../simple/common/Menu.svelte";
+let { items = [], values = [], multiple = false, searcher, placeholder, searchThreshold = 2, debounceTimeout = 500, searching = false, search = false, searchText, maxVisibleChips, menuOpened = false, mobileDrawer = false, closeOnSelect = false, disabled = false, menuAnchor, menuWidth, chipLabelSnippet, itemLabelSnippet, onchange, } = $props();
 const searchTextValue = writable(searchText);
 let searchTextDebounce = $derived(debounceStore(searchTextValue, debounceTimeout));
 $effect(() => {
@@ -44,6 +45,8 @@ $effect(() => {
   {placeholder}
   {closeOnSelect}
   {disabled}
+  {menuWidth}
+  {menuAnchor}
   searchFunction={() => true}
   {onchange}
   {chipLabelSnippet}

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

@@ -1,5 +1,7 @@
 import type { Item } from "../../../components/simple/forms/Autocomplete.svelte";
 export type { Item };
+import type { ComponentProps } from "svelte";
+import Menu from "../../simple/common/Menu.svelte";
 declare class __sveltets_Render<Data> {
     props(): {
         items: Item<Data>[];
@@ -19,6 +21,8 @@ declare class __sveltets_Render<Data> {
         mobileDrawer?: boolean;
         closeOnSelect?: boolean;
         disabled?: boolean;
+        menuWidth?: string;
+        menuAnchor?: ComponentProps<typeof Menu>["anchor"];
         chipLabelSnippet?: import("svelte").Snippet<[{
             selection: Item<Data>;
         }]> | undefined;

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

@@ -29,19 +29,12 @@ onMount(() => {
         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: 'customize-headers', minWidth: DEFAULT_MIN_WIDTH_PX + 'px', maxWidth: DEFAULT_MAX_WIDTH_PX + 'px' }]) {
-        let th;
-        if (head.value == 'non-resizable' || head.value == 'customize-headers') {
-            th = document.getElementsByClassName(head.value).item(0);
-        }
-        else {
-            th = document.getElementById(head.value);
-        }
+        let th = headersHTML[head.value];
         if (!!th) {
             resizeHeader(th, head);
         }
     }
-    let table = document.getElementsByClassName('dynamic-table')[0];
-    table.classList.add('dynamic-resizable');
+    tableHTML?.classList.add('dynamic-resizable');
     resizeObserver = new ResizeObserver(() => {
         updateRemainingWidth();
         updateHeaderHeight();
@@ -101,8 +94,8 @@ const [send, receive] = crossfade({
         };
     },
 });
-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 = {}, dynamicFilters = true, 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, } = $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, mainHeader = $state(), resizeObserver;
+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 = {}, dynamicFilters = true, useSelectedItemsOnly = false, 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, } = $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(), tableHTML = $state(), headersHTML = {}, 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;
 const DEFAULT_MIN_WIDTH_PX = 100, DEFAULT_MAX_WIDTH_PX = 400;
 let totalSections = $derived((totalRows - renderedRowsNumber) / sectionRowsNumber);
 let hasMoreToRender = $derived(totalSections > currentSectionNumber);
@@ -240,7 +233,7 @@ function handleCancelClick() {
 }
 function handleSelect(item, shiftKeyPressed) {
     let index = -1;
-    if (selectedAll) {
+    if (selectedAll && !ignoreSelectAll) {
         index = unselectedItems.findIndex((i) => i[uniqueKey] == item[uniqueKey]);
     }
     else {
@@ -262,7 +255,7 @@ function handleSelect(item, shiftKeyPressed) {
                         selectedIndex = x;
                     }
                     for (let i = lastSelectedIndex + 1; i <= selectedIndex; i++) {
-                        if (selectedAll) {
+                        if (selectedAll && !ignoreSelectAll) {
                             if (!unselectedItems.find((unselectedItem) => unselectedItem[uniqueKey] == rows[i].item[uniqueKey])) {
                                 unselectedItems = [...unselectedItems, rows[i].item];
                             }
@@ -276,7 +269,7 @@ function handleSelect(item, shiftKeyPressed) {
                 }
             }
             else {
-                if (selectedAll) {
+                if (selectedAll && !ignoreSelectAll) {
                     unselectedItems = [...unselectedItems, item];
                 }
                 else {
@@ -287,7 +280,7 @@ function handleSelect(item, shiftKeyPressed) {
         }
     }
     else {
-        if (selectedAll) {
+        if (selectedAll && !ignoreSelectAll) {
             unselectedItems = unselectedItems.filter((i) => i[uniqueKey] != item[uniqueKey]);
         }
         else {
@@ -298,7 +291,12 @@ function handleSelect(item, shiftKeyPressed) {
 }
 function handleSelectAll() {
     if (selectMode == "multiple") {
-        selectedItems = [];
+        if (!selectedAll && ignoreSelectAll) {
+            selectedItems = rows.map(r => r.item);
+        }
+        else {
+            selectedItems = [];
+        }
         selectedIndexes = [];
         unselectedItems = [];
         selectedAll = !selectedAll;
@@ -855,14 +853,14 @@ async function updateRemainingWidth() {
         const containerWidth = tableContainer.getBoundingClientRect().width - 30;
         if (containerWidth) {
             const totalResizableWidth = headersToShowInTable.reduce((sum, head) => {
-                let th = document.getElementById(head.value);
+                let th = headersHTML[head.value];
                 if (!!th) {
                     resizeHeader(th, head);
                 }
                 const width = th?.getBoundingClientRect().width || 0;
                 return sum + width + 1;
             }, 0);
-            const extraStaticWidth = Array.from(mainHeader.querySelectorAll('th.non-resizable, th.slot-append, th.customize-headers'))
+            const extraStaticWidth = Array.from(mainHeader.querySelectorAll('th.non-resizable, th.customize-headers'))
                 .reduce((sum, th) => sum + th.getBoundingClientRect().width + 1, 0);
             remainingWidth = Math.max(0, containerWidth - totalResizableWidth - extraStaticWidth);
         }
@@ -1052,7 +1050,7 @@ function resizeHeader(th, header) {
       hasMore={currentSectionNumber > 0 && userScrolling}
       direction='backward'
     />
-    <table style="display: table;" class="dynamic-table">
+    <table style="display: table;" class="dynamic-table" bind:this={tableHTML}>
       <thead class="table-header" bind:this={mainHeader}>
         <tr>
           {#if !!showSelect && !showExpand && rows.length > 0}
@@ -1061,6 +1059,7 @@ function resizeHeader(th, header) {
               style:min-width="30px"
               style:text-align="center"
               class="non-resizable"
+              bind:this={headersHTML['non-resizable']}
             > 
               {#if selectMode === "multiple"}
                 <Checkbox
@@ -1078,6 +1077,7 @@ function resizeHeader(th, header) {
               style:max-width="60px"
               style:text-align="center"
               class="non-resizable"
+              bind:this={headersHTML['non-resizable']}
             ></th>
           {/if}
           {#each headersToShowInTable as header, index}
@@ -1087,7 +1087,7 @@ function resizeHeader(th, header) {
               style:max-width={header.maxWidth}
               class:sortable={header.sortable}
               onclick={() => handleHeaderClick(header)}
-              id={header.value}
+              bind:this={headersHTML[header.value]}
             >
               {#if resizableColumns}
                 <div class="resizer" use:resize></div>
@@ -1139,7 +1139,7 @@ function resizeHeader(th, header) {
               {/if}
             </th>
           {/each}
-          {#if remainingWidth && (customizeHeaders || rowAppendSnippet || resizableColumns)}
+          {#if remainingWidth}
             <th
               style:width={remainingWidth + 'px'}
               class="filler"
@@ -1150,6 +1150,7 @@ function resizeHeader(th, header) {
             <th
               style:text-align="center"
               class="customize-headers"
+              bind:this={headersHTML['customize-headers']}
             >
               {#if customizeHeaders}
                 <div style="display: flex; justify-content: center;">
@@ -1207,7 +1208,7 @@ function resizeHeader(th, header) {
                     : '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
+                    : selectedAll && !ignoreSelectAll
                       ? !unselectedItems.find(i => i[uniqueKey] == row.item[uniqueKey])
                         ? 'var(--dynamic-table-selected-row-background-color, var(--dynamic-table-default-selected-row-background-color))'
                         : ''
@@ -1223,7 +1224,7 @@ function resizeHeader(th, header) {
                   <Checkbox
                     id={row.item[uniqueKey]}
                     value={
-                      selectedAll ?
+                      selectedAll && !ignoreSelectAll ?
                         unselectedItems.findIndex(
                           (i) => i[uniqueKey] == row.item[uniqueKey]
                         ) == -1 :
@@ -1292,7 +1293,7 @@ function resizeHeader(th, header) {
                   {/if}
                 </td>
               {/each}
-              {#if remainingWidth && (customizeHeaders || rowAppendSnippet || resizableColumns)}
+              {#if remainingWidth}
                 <td></td>
               {/if}
               {#if rowAppendSnippet}
@@ -1901,30 +1902,17 @@ function resizeHeader(th, header) {
     width: fit-content;
   }
 
-  .slot-append {
-    width: 1px;
-    min-width: unset;
-    box-sizing: content-box;
-  }
-
   .table-header {
     position: sticky;
     top: 0;
     z-index: 2;
+    top: -1px;
     height: var(
       --dynamic-table-header-height,
       var(--dynamic-table-default-header-height)
     );
   }
 
-  @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;

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

@@ -169,6 +169,7 @@ declare class __sveltets_Render<Item extends {
             [value: string]: number;
         } | undefined;
         dynamicFilters?: boolean;
+        useSelectedItemsOnly?: boolean;
         class?: {
             container?: string;
             header?: string;

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

@@ -1,7 +1,4 @@
-<script lang="ts" module>export {};
-</script>
-
-<script lang="ts">import SimpleTable from "../../simple/lists/SimpleTable.svelte";
+<script lang="ts" generics="Item extends {[key: string]: any}, Data">import SimpleTable, {} from "../../simple/lists/SimpleTable.svelte";
 import Paginator from "../../simple/lists/Paginator.svelte";
 import Dropdown from "../forms/Dropdown.svelte";
 import {} from "svelte";

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

@@ -1,144 +1,153 @@
-type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
-export type Header = ArrayElement<NonNullable<ComponentProps<typeof SimpleTable>["headers"]>>;
-import SimpleTable from "../../simple/lists/SimpleTable.svelte";
+import { type Header } from "../../simple/lists/SimpleTable.svelte";
 import Paginator from "../../simple/lists/Paginator.svelte";
 import Dropdown from "../forms/Dropdown.svelte";
 import { type ComponentProps, type Snippet } from "svelte";
 import Filters from "../search/Filters.svelte";
 import type Builder from "../../../utils/filters/builder";
-declare const PaginatedTable: import("svelte").Component<Omit<{
-    headers: import("../../simple/lists/SimpleTable.svelte").Header<unknown>[];
-    items: {
-        [key: string]: any;
-    }[];
-    sortedBy?: string;
-    sortDirection?: "asc" | "desc";
-    resizableColumns?: boolean;
-    resizedColumnSizeWithPadding?: {
-        [value: string]: number;
-    } | undefined;
-    pointerOnRowHover?: boolean;
-    lang?: "it" | "en";
-    doubleClickActive?: boolean;
-    doubleClickDelay?: number;
-    calculateRowStyles?: import("../../simple/lists/SimpleTable.svelte").CalculateRowStyles<{
-        [key: string]: any;
-    }> | undefined;
-    calculateRowClasses?: import("../../simple/lists/SimpleTable.svelte").CalculateRowClasses<{
-        [key: string]: any;
-    }> | undefined;
-    onsort?: ((event: {
-        detail: {
-            sortedBy: string | undefined;
-            sortDirection: string;
-            sortModify: import("../../simple/lists/SimpleTable.svelte").Header["sortModify"];
-        };
-    }) => void) | undefined;
-    onrowClick?: ((event: {
-        detail: {
-            item: {
-                [key: string]: any;
+declare class __sveltets_Render<Item extends {
+    [key: string]: any;
+}, Data> {
+    props(): Omit<{
+        headers: Header<Data>[];
+        items: Item[];
+        sortedBy?: string;
+        sortDirection?: "asc" | "desc";
+        resizableColumns?: boolean;
+        resizedColumnSizeWithPadding?: {
+            [value: string]: number;
+        } | undefined;
+        pointerOnRowHover?: boolean;
+        lang?: "it" | "en";
+        doubleClickActive?: boolean;
+        doubleClickDelay?: number;
+        calculateRowStyles?: import("../../simple/lists/SimpleTable.svelte").CalculateRowStyles<Item> | undefined;
+        calculateRowClasses?: import("../../simple/lists/SimpleTable.svelte").CalculateRowClasses<Item> | undefined;
+        onsort?: ((event: {
+            detail: {
+                sortedBy: string | undefined;
+                sortDirection: string;
+                sortModify: Header["sortModify"];
             };
-        };
-    }) => void) | undefined;
-    onrowDoubleClick?: ((event: {
-        detail: {
-            item: {
-                [key: string]: any;
+        }) => void) | undefined;
+        onrowClick?: ((event: {
+            detail: {
+                item: Item;
             };
-        };
-    }) => void) | undefined;
-    oncolumnResize?: ((event: {
-        detail: {
-            id: string;
-            newWidthPx: number;
-        };
-    }) => void) | undefined;
-    headerSnippet?: Snippet<[{
-        head: import("../../simple/lists/SimpleTable.svelte").Header<unknown>;
-    }]> | undefined;
-    headerLabelSnippet?: Snippet<[{
-        head: import("../../simple/lists/SimpleTable.svelte").Header<unknown>;
-    }]> | undefined;
-    appendSnippet?: Snippet<[{
-        index: number;
-        item?: {
-            [key: string]: any;
+        }) => void) | undefined;
+        onrowDoubleClick?: ((event: {
+            detail: {
+                item: Item;
+            };
+        }) => void) | undefined;
+        oncolumnResize?: ((event: {
+            detail: {
+                id: string;
+                newWidthPx: number;
+            };
+        }) => void) | undefined;
+        headerSnippet?: Snippet<[{
+            head: Header<Data>;
+        }]> | undefined;
+        headerLabelSnippet?: Snippet<[{
+            head: Header<Data>;
+        }]> | undefined;
+        appendSnippet?: Snippet<[{
+            index: number;
+            item?: Item | undefined;
+        }]> | undefined;
+        rowActionsSnippet?: Snippet<[{
+            index: number;
+            item: Item;
+        }]> | undefined;
+        customSnippet?: Snippet<[{
+            index: number;
+            columnIndex: number;
+            header: Header<Data>;
+            item: Item;
+        }]> | undefined;
+        noDataSnippet?: Snippet<[]>;
+        class?: {
+            container?: string;
+            header?: string;
+            row?: string;
+            cell?: string;
         } | undefined;
-    }]> | undefined;
-    rowActionsSnippet?: Snippet<[{
-        index: number;
-        item: {
-            [key: string]: any;
-        };
-    }]> | undefined;
-    customSnippet?: Snippet<[{
-        index: number;
-        columnIndex: number;
-        header: import("../../simple/lists/SimpleTable.svelte").Header<unknown>;
-        item: {
-            [key: string]: any;
-        };
-    }]> | undefined;
-    noDataSnippet?: Snippet<[]>;
-    class?: {
-        container?: string;
-        header?: string;
-        row?: string;
-        cell?: string;
-    } | undefined;
-}, "class"> & {
-    page?: NonNullable<ComponentProps<typeof Paginator>["page"]>;
-    maxPage?: ComponentProps<typeof Paginator>["maxPage"];
-    rowsPerPageOptions?: ComponentProps<typeof Dropdown>["items"];
-    hideRowsPerPage?: boolean;
-    totalElements?: number;
-    rowsPerPage?: number;
-    filters?: ComponentProps<typeof Filters>["filters"];
-    searchBarColumns?: string[];
-    searchBarVisible?: boolean;
-    searchBarPlaceholder?: string;
-    editFilterMode?: "one-edit" | "multi-edit";
-    showActiveFilters?: boolean;
-    class?: {
-        simpleTable?: ComponentProps<typeof SimpleTable>["class"];
-    };
-    onpaginationChange?: (event: {
-        detail: {
+    }, "class"> & {
+        page?: NonNullable<ComponentProps<typeof Paginator>["page"]>;
+        maxPage?: ComponentProps<typeof Paginator>["maxPage"];
+        rowsPerPageOptions?: ComponentProps<typeof Dropdown>["items"];
+        hideRowsPerPage?: boolean;
+        totalElements?: number;
+        rowsPerPage?: number;
+        filters?: ComponentProps<typeof Filters>["filters"];
+        searchBarColumns?: string[];
+        searchBarVisible?: boolean;
+        searchBarPlaceholder?: string;
+        editFilterMode?: "one-edit" | "multi-edit";
+        showActiveFilters?: boolean;
+        class?: {
+            simpleTable?: {
+                container?: string;
+                header?: string;
+                row?: string;
+                cell?: string;
+            } | undefined;
+        } | undefined;
+        onpaginationChange?: ((event: {
+            detail: {
+                rowsPerPage: number;
+                page: number;
+                builder: Builder;
+            };
+        }) => void) | undefined;
+        onfiltersChange?: ((event: {
+            detail: {
+                builder: Builder;
+            };
+        }) => void) | undefined;
+        onremoveFilter?: ComponentProps<typeof Filters>["onremoveFilter"];
+        onremoveAllFilters?: ComponentProps<typeof Filters>["onremoveAllFilters"];
+        filterAppendSnippet?: ComponentProps<typeof Filters>["appendSnippet"];
+        customFilterChipSnippet?: ComponentProps<typeof Filters>["customChipSnippet"];
+        customFilterSnippet?: ComponentProps<typeof Filters>["customSnippet"];
+        searchBarSnippet?: Snippet<[{
+            handleSearchChange: (searchText: string | undefined) => void;
+        }]> | undefined;
+        footerSnippet?: Snippet<[{
+            hideRowsPerPage: boolean;
+            rowsPerPageOptions: import("../forms/AsyncAutocomplete.svelte").Item<unknown>[];
+            rowsPerPageSelection: import("../forms/AsyncAutocomplete.svelte").Item<unknown>[] | undefined;
+            totalElements: number | undefined;
+            page: number;
+            maxPage: number | undefined;
             rowsPerPage: number;
+            handlePaginationChange: () => void;
+        }]> | undefined;
+        rangeDescriptorSnippet?: Snippet<[{
+            totalElements: number | undefined;
             page: number;
-            builder: Builder;
-        };
-    }) => void;
-    onfiltersChange?: (event: {
-        detail: {
-            builder: Builder;
-        };
-    }) => void;
-    onremoveFilter?: ComponentProps<typeof Filters>["onremoveFilter"];
-    onremoveAllFilters?: ComponentProps<typeof Filters>["onremoveAllFilters"];
-    filterAppendSnippet?: ComponentProps<typeof Filters>["appendSnippet"];
-    customFilterChipSnippet?: ComponentProps<typeof Filters>["customChipSnippet"];
-    customFilterSnippet?: ComponentProps<typeof Filters>["customSnippet"];
-    searchBarSnippet?: Snippet<[{
-        handleSearchChange: (searchText: string | undefined) => void;
-    }]>;
-    footerSnippet?: Snippet<[{
-        hideRowsPerPage: boolean;
-        rowsPerPageOptions: import("../forms/AsyncAutocomplete.svelte").Item<unknown>[];
-        rowsPerPageSelection: import("../forms/AsyncAutocomplete.svelte").Item<unknown>[] | undefined;
-        totalElements: number | undefined;
-        page: number;
-        maxPage: number | undefined;
-        rowsPerPage: number;
-        handlePaginationChange: () => void;
-    }]>;
-    rangeDescriptorSnippet?: Snippet<[{
-        totalElements: number | undefined;
-        page: number;
-        maxPage: number | undefined;
-        rowsPerPage: number;
-    }]>;
-}, {}, "page" | "sortedBy" | "sortDirection" | "filters" | "rowsPerPage">;
-type PaginatedTable = ReturnType<typeof PaginatedTable>;
+            maxPage: number | undefined;
+            rowsPerPage: number;
+        }]> | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "page" | "sortedBy" | "sortDirection" | "filters" | "rowsPerPage";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item extends {
+        [key: string]: any;
+    }, Data>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item, Data>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item, Data>['props']>, ReturnType<__sveltets_Render<Item, Data>['events']>, ReturnType<__sveltets_Render<Item, Data>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item, Data>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item, Data>['exports']>;
+    <Item extends {
+        [key: string]: any;
+    }, Data>(internal: unknown, props: ReturnType<__sveltets_Render<Item, Data>['props']> & {}): ReturnType<__sveltets_Render<Item, Data>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const PaginatedTable: $$IsomorphicComponent;
+type PaginatedTable<Item extends {
+    [key: string]: any;
+}, Data> = InstanceType<typeof PaginatedTable<Item, Data>>;
 export default PaginatedTable;

package/dist/components/simple/forms/Autocomplete.svelte

@@ -4,7 +4,7 @@
 <script lang="ts" generics="Data">import "../../../css/main.css";
 import "./Autocomplete.css";
 import { scrollInMenu } from "../common/scroller";
-let { values = $bindable(), items = [], searchFunction = undefined, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = undefined, minWidth = "200px", openingId = $bindable("autocomplete-menu"), searchText = $bindable(undefined), maxVisibleChips = undefined, menuOpened = $bindable(false), closeOnSelect = !multiple, emptySearchTextOnMenuClose = true, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false, menuWidth = undefined, class: clazz = {}, selectionContainerSnippet, selectionSnippet, chipLabelSnippet, exceedCounterSnippet, menuSnippet, itemLabelSnippet, itemSnippet, onchange, onfocus, onblur, onkeydown, onclose, } = $props();
+let { values = $bindable(), items = [], searchFunction = undefined, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = undefined, minWidth = "200px", openingId = $bindable("autocomplete-menu"), searchText = $bindable(undefined), maxVisibleChips = undefined, menuOpened = $bindable(false), closeOnSelect = !multiple, emptySearchTextOnMenuClose = true, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false, menuWidth = undefined, menuAnchor = 'bottom-center', class: clazz = {}, selectionContainerSnippet, selectionSnippet, chipLabelSnippet, exceedCounterSnippet, menuSnippet, itemLabelSnippet, itemSnippet, onchange, onfocus, onblur, onkeydown, onclose, } = $props();
 let notVisibleChipNumber = $derived(Math.max((values?.length || 0) - (maxVisibleChips || 0), 0));
 function select(item) {
     if (disabled)
@@ -286,7 +286,7 @@ import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
       _boxShadow={menuBoxShadow}
       _borderRadius={menuBorderRadius}
       bind:open={menuOpened}
-      anchor="bottom-center"
+      anchor={menuAnchor}
       closeOnClickOutside
       bind:refreshPosition
       bind:menuElement

package/dist/components/simple/forms/Autocomplete.svelte.d.ts

@@ -5,6 +5,7 @@ export type Item<Data = any> = {
 };
 import "../../../css/main.css";
 import "./Autocomplete.css";
+import Menu from "../common/Menu.svelte";
 import { type ComponentProps, type Snippet } from "svelte";
 import SimpleTextField from "./SimpleTextField.svelte";
 import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
@@ -31,6 +32,7 @@ declare class __sveltets_Render<Data> {
         menuBorderRadius?: string;
         mobileDrawer?: boolean;
         menuWidth?: string | null;
+        menuAnchor?: ComponentProps<typeof Menu>["anchor"];
         class?: {
             activator?: string;
             menu?: string;

package/dist/components/simple/navigation/TabSwitcher.svelte

@@ -3,24 +3,15 @@
 
 <script lang="ts">import { onMount } from "svelte";
 import './TabSwitcher.css';
-import { BROWSER } from 'esm-env';
 import Icon from "../media/Icon.svelte";
-let { tabs = [], selected = $bindable(undefined), mandatory = true, class: clazz = {}, ontabClick, ontabKeypress, appendSnippet, } = $props();
+let { tabs = [], selected = $bindable(undefined), mandatory = true, class: clazz = {}, ontabClick, appendSnippet, } = $props();
 let tabButtons = {};
 onMount(() => {
     if (mandatory && !selected && tabs.length > 0)
         selected = tabs[0].name;
-    if (selected) {
-        setBookmarkPosition();
-    }
-});
-$effect(() => {
-    setBookmarkPosition();
 });
-let bookmarkWidth = $state(0), bookmarkLeft = $state(0);
 function handleTabClick(clickedTab, nativeEvent) {
     selected = clickedTab.name;
-    setBookmarkPosition();
     if (ontabClick) {
         ontabClick({
             detail: {
@@ -30,50 +21,23 @@ function handleTabClick(clickedTab, nativeEvent) {
         });
     }
 }
-function handleTabKeypress(clickedTab, nativeEvent) {
-    selected = clickedTab.name;
-    setBookmarkPosition();
-    if (ontabKeypress) {
-        ontabKeypress({
-            detail: {
-                nativeEvent,
-                tab: clickedTab
-            }
-        });
-    }
-}
-function setBookmarkPosition() {
-    if (BROWSER) {
-        let tabButton = selected
-            ? tabButtons[selected]
-            : undefined;
-        if (tabButton) {
-            bookmarkWidth = tabButton.offsetWidth - 10;
-            bookmarkLeft = tabButton.offsetLeft + 5;
-        }
-    }
-}
-$effect(() => { if (!!selected)
-    setBookmarkPosition(); });
 </script>
 
 <div
   class="{clazz.container || ''} tabs-container"
 >
   {#each tabs as tab}
-    <div
-      role="presentation"
+    <button
       class:selected-tab={tab.name == selected}
       class="tab-label {clazz.tabs || ''} {tab.name == selected ? clazz.selected || '' : ''}"
       onclick={(event) => handleTabClick(tab, event)}
-      onkeypress={(event) => handleTabKeypress(tab, event)}
       bind:this={tabButtons[tab.name]}
     >
       {#if !!tab.icon}
         <Icon name={tab.icon}></Icon>
       {/if}
       {tab.label}
-    </div>
+    </button>
   {/each}
   {#if appendSnippet}
     <div
@@ -84,11 +48,6 @@ $effect(() => { if (!!selected)
       {@render appendSnippet()}
     </div>
   {/if}
-  <span
-    style:left={bookmarkLeft + "px"}
-    style:width={bookmarkWidth + "px"}
-    class="{clazz.bookmark || ''} bookmark"
-  ></span>
   <span
     class="{clazz.guide || ''} horizontal-guide"
   ></span>
@@ -110,6 +69,21 @@ $effect(() => { if (!!selected)
     );
   }
 
+  button {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    outline: none;  
+  }
+
+  button:focus {
+    outline: none;
+  }
+
   .selected-tab {
     color: var(
       --tab-switcher-selected-color,
@@ -117,9 +91,21 @@ $effect(() => { if (!!selected)
     );
   }
 
+  .selected-tab::after {
+    content: '';
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    height: 2px;
+    background-color: var(
+      --tab-switcher-bookmark-color,
+      var(--tab-switcher-default-bookmark-color)
+    );
+  }
+
   .horizontal-guide {
     position: absolute;
-    z-index: 5;
     bottom: 0px;
     height: 1px;
     background-color: var(
@@ -139,18 +125,6 @@ $effect(() => { if (!!selected)
     -webkit-tap-highlight-color: rgba(0,0,0,0);
     cursor: pointer;
     padding: 8px;
-  }
-
-  .bookmark {
-    position: absolute;
-    bottom: 0px;
-    height: 2px;
-    border-radius: 0.125rem;
-    z-index: 10;
-    background-color: var(
-      --tab-switcher-bookmark-color,
-      var(--tab-switcher-default-bookmark-color)
-    );
-    transition: left 400ms, width 400ms;
+    position: relative;
   }
 </style>

package/package.json

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