@likable-hair/svelte 3.3.19 → 3.3.21

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

@@ -3,7 +3,7 @@
 <script>import "../../../css/main.css";
 import MenuOrDrawer from "./MenuOrDrawer.svelte";
 import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
-export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bottom-center", elements = [], stayInViewport = true, flipOnOverflow = false, _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _maxHeight = void 0, _minWidth = "100px", _borderRadius = "5px", openingId = void 0;
+export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bottom-center", elements = [], stayInViewport = true, flipOnOverflow = false, _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "300px", _maxHeight = void 0, _minWidth = "100px", _borderRadius = "5px", openingId = void 0;
 let selected;
 let focused;
 $:

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

@@ -3,7 +3,7 @@
 <script>import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
 import debounceStore from "../../../stores/debounce";
 import { writable } from "svelte/store";
-export let items = [], values = [], multiple = false, searcher, placeholder = void 0, searchThreshold = 2, debounceTimeout = 500, searching = false, search = false, searchText = void 0, maxVisibleChips = void 0, menuOpened = false, mobileDrawer = false, closeOnSelect = false, disabled = false;
+export let items = [], values = [], multiple = false, searcher, placeholder = void 0, searchThreshold = 2, debounceTimeout = 500, searching = false, search = false, searchText = void 0, maxVisibleChips = void 0, menuOpened = false, mobileDrawer = false, closeOnSelect = false, disabled = false, menuWidth = void 0, menuAnchor = "bottom-center";
 const searchTextValue = writable(searchText);
 $:
   searchTextDebounce = debounceStore(searchTextValue, debounceTimeout);
@@ -41,6 +41,8 @@ $:
   bind:placeholder
   bind:closeOnSelect
   bind:disabled
+  {menuWidth}
+  {menuAnchor}
   searchFunction={() => true}
   on:change
 >

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

@@ -20,6 +20,8 @@ declare const __propDef: {
         mobileDrawer?: boolean | undefined;
         closeOnSelect?: boolean | undefined;
         disabled?: boolean | undefined;
+        menuWidth?: string | undefined | null;
+        menuAnchor?: "bottom" | "bottom-center" | "right-center" | undefined;
     };
     events: {
         change: CustomEvent<any>;

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

@@ -38,6 +38,7 @@ declare const __propDef: {
             menuBorderRadius?: string | undefined;
             mobileDrawer?: boolean | undefined;
             menuWidth?: string | null | undefined;
+            menuAnchor?: "bottom" | "bottom-center" | "right-center" | undefined;
         }, "items"> | undefined;
         selected?: Item[] | undefined;
         items?: Item[] | undefined;

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

@@ -38,18 +38,12 @@ onMount(() => {
   tableContainer.addEventListener("scroll", setReachedBottomOrTop);
   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();
@@ -106,8 +100,8 @@ const [send, receive] = crossfade({
 let clazz = {};
 export { clazz as class };
 const dispatch = createEventDispatcher();
-export let headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = void 0, sortDirection = "asc", cellEdit = false, lang = "en", dateLocale = void 0, noItemsText = lang == "en" ? "No items to show" : "Nessun elemento da visualizzare", showSelect = false, showActions = true, selectMode = "single", selectedItems = [], unselectedItems = [], selectedAll = false, showExpand = false, loading = false, disabled = false, filters = [], searchBarColumns = void 0, 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 = void 0, renderedRowsNumber = 100, sectionRowsNumber = 20, sectionThreshold = 2, backwardThresholdPixel = 100, forwardThresholdPixel = 100, uniqueKey = "id", numberOfResultsVisible = false, endLineVisible = false, resizableColumns = false, resizedColumnSizeWithPadding = {}, dynamicFilters = true;
-let openCellEditor = false, cellEditorActivator, cellEditorContainer, menuElementCellEditor, menuElementQuickFilters, cellEditorInfoActive, saveEditDisabled = false, searchBarInput = void 0, openQuickFilter = false, quickFilterActivator, quickFilterActive, globalBuilder = new FilterBuilder(), calendarOpened = false, calendarOpened2 = false, selectedIndexes = [], cellEditorIndexRow, cellEditorIndexHeader, cellEditorSubItem, currentSectionNumber = 0, tableBody, tableContainer, userScrolling = true, reachedBottom = false, reachedTop = false, resizing = false, remainingWidth = 0, hideScrollbar = false, sortModify, mainHeader, resizeObserver;
+export let headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = void 0, sortDirection = "asc", cellEdit = false, lang = "en", dateLocale = void 0, noItemsText = lang == "en" ? "No items to show" : "Nessun elemento da visualizzare", showSelect = false, showActions = true, selectMode = "single", selectedItems = [], unselectedItems = [], selectedAll = false, showExpand = false, loading = false, disabled = false, filters = [], searchBarColumns = void 0, 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 = void 0, renderedRowsNumber = 100, sectionRowsNumber = 20, sectionThreshold = 2, backwardThresholdPixel = 100, forwardThresholdPixel = 100, uniqueKey = "id", numberOfResultsVisible = false, endLineVisible = false, resizableColumns = false, resizedColumnSizeWithPadding = {}, dynamicFilters = true, useSelectedItemsOnly = false;
+let openCellEditor = false, cellEditorActivator, cellEditorContainer, menuElementCellEditor, menuElementQuickFilters, cellEditorInfoActive, saveEditDisabled = false, searchBarInput = void 0, openQuickFilter = false, quickFilterActivator, quickFilterActive, globalBuilder = new FilterBuilder(), calendarOpened = false, calendarOpened2 = false, selectedIndexes = [], cellEditorIndexRow, cellEditorIndexHeader, cellEditorSubItem, currentSectionNumber = 0, tableBody, tableContainer, tableHTML, headersHTML = {}, userScrolling = true, reachedBottom = false, reachedTop = false, resizing = false, remainingWidth = 0, hideScrollbar = false, sortModify, mainHeader, resizeObserver, ignoreSelectAll = rows.length == totalRows && useSelectedItemsOnly;
 const DEFAULT_MIN_WIDTH_PX = 100, DEFAULT_MAX_WIDTH_PX = 400;
 $:
   totalSections = (totalRows - renderedRowsNumber) / sectionRowsNumber;
@@ -223,7 +217,7 @@ function handleCancelClick() {
 }
 function handleSelect(item, shiftKeyPressed) {
   let index = -1;
-  if (selectedAll) {
+  if (selectedAll && !ignoreSelectAll) {
     index = unselectedItems.findIndex((i) => i[uniqueKey] == item[uniqueKey]);
   } else {
     index = selectedItems.findIndex((i) => i[uniqueKey] == item[uniqueKey]);
@@ -242,7 +236,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];
               }
@@ -254,7 +248,7 @@ function handleSelect(item, shiftKeyPressed) {
           }
         }
       } else {
-        if (selectedAll) {
+        if (selectedAll && !ignoreSelectAll) {
           unselectedItems = [...unselectedItems, item];
         } else {
           selectedItems = [...selectedItems, item];
@@ -263,7 +257,7 @@ function handleSelect(item, shiftKeyPressed) {
       }
     }
   } else {
-    if (selectedAll) {
+    if (selectedAll && !ignoreSelectAll) {
       unselectedItems = unselectedItems.filter((i) => i[uniqueKey] != item[uniqueKey]);
     } else {
       selectedItems = selectedItems.filter((i) => i[uniqueKey] != item[uniqueKey]);
@@ -273,7 +267,11 @@ 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;
@@ -760,14 +758,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")).reduce((sum, th) => sum + th.getBoundingClientRect().width + 1, 0);
+      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);
     }
   }
@@ -979,7 +977,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}
@@ -988,6 +986,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
@@ -1005,6 +1004,7 @@ function resizeHeader(th, header) {
               style:max-width="60px"
               style:text-align="center"
               class="non-resizable"
+              bind:this={headersHTML['non-resizable']}
             />
           {/if}
           {#each headersToShowInTable as head, index}
@@ -1014,7 +1014,7 @@ function resizeHeader(th, header) {
               style:max-width={head.maxWidth}
               class:sortable={head.sortable}
               on:click={() => handleHeaderClick(head)}
-              id={head.value}
+              bind:this={headersHTML[head.value]}
             >
               {#if resizableColumns}
                 <div class="resizer" use:resize></div>
@@ -1060,7 +1060,7 @@ function resizeHeader(th, header) {
               </slot>
             </th>
           {/each}
-          {#if remainingWidth && (customizeHeaders || $$slots.rowActions || $$slots.append || resizableColumns)}
+          {#if remainingWidth}
             <th
               style:width={remainingWidth + 'px'}
               class="filler"
@@ -1071,6 +1071,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: start;">
@@ -1129,7 +1130,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))'
                         : ''
@@ -1145,7 +1146,7 @@ function resizeHeader(th, header) {
                   <Checkbox
                     id={row.item[uniqueKey]}
                     value={
-                      selectedAll ?
+                      selectedAll && !ignoreSelectAll ?
                         unselectedItems.findIndex(
                           (i) => i[uniqueKey] == row.item[uniqueKey]
                         ) == -1 :
@@ -1221,7 +1222,7 @@ function resizeHeader(th, header) {
                   {/if}
                 </td>
               {/each}
-              {#if remainingWidth && (customizeHeaders || $$slots.rowActions || $$slots.append || resizableColumns)}
+              {#if remainingWidth}
                 <td/>
               {/if}
               {#if $$slots.rowActions || $$slots.append}
@@ -1835,30 +1836,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

@@ -179,6 +179,7 @@ declare const __propDef: {
             [value: string]: number;
         } | undefined;
         dynamicFilters?: boolean | undefined;
+        useSelectedItemsOnly?: boolean | undefined;
     };
     events: {
         scroll: Event;

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

@@ -5,7 +5,7 @@ import "./Autocomplete.css";
 import { scrollInMenu } from "../common/scroller";
 let clazz = {};
 export { clazz as class };
-export let values = [], items, searchFunction = void 0, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = void 0, minWidth = "200px", openingId = "autocomplete-menu", searchText = void 0, maxVisibleChips = void 0, menuOpened = false, closeOnSelect = !multiple, emptySearchTextOnMenuClose = true, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false, menuWidth = void 0;
+export let values = [], items, searchFunction = void 0, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = void 0, minWidth = "200px", openingId = "autocomplete-menu", searchText = void 0, maxVisibleChips = void 0, menuOpened = false, closeOnSelect = !multiple, emptySearchTextOnMenuClose = true, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false, menuWidth = void 0, menuAnchor = "bottom-center";
 let dispatch = createEventDispatcher();
 function select(item) {
   if (disabled)
@@ -232,7 +232,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

@@ -36,6 +36,7 @@ declare const __propDef: {
         menuBorderRadius?: string | undefined;
         mobileDrawer?: boolean | undefined;
         menuWidth?: string | undefined | null;
+        menuAnchor?: "bottom" | "bottom-center" | "right-center" | undefined;
     };
     events: {
         focus: FocusEvent;

package/package.json

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