@likable-hair/svelte 3.3.18 → 3.3.19

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

@@ -52,6 +52,7 @@ onMount(() => {
   table.classList.add("dynamic-resizable");
   resizeObserver = new ResizeObserver(() => {
     updateRemainingWidth();
+    updateHeaderHeight();
   });
   resizeObserver.observe(tableContainer);
   return () => {
@@ -1059,7 +1060,7 @@ function resizeHeader(th, header) {
               </slot>
             </th>
           {/each}
-          {#if remainingWidth && (customizeHeaders || resizableColumns)}
+          {#if remainingWidth && (customizeHeaders || $$slots.rowActions || $$slots.append || resizableColumns)}
             <th
               style:width={remainingWidth + 'px'}
               class="filler"
@@ -1220,7 +1221,7 @@ function resizeHeader(th, header) {
                   {/if}
                 </td>
               {/each}
-              {#if remainingWidth && (customizeHeaders || resizableColumns)}
+              {#if remainingWidth && (customizeHeaders || $$slots.rowActions || $$slots.append || resizableColumns)}
                 <td/>
               {/if}
               {#if $$slots.rowActions || $$slots.append}

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

@@ -3,34 +3,21 @@ import Icon from "../../simple/media/Icon.svelte";
 import Paginator from "../../simple/lists/Paginator.svelte";
 import Dropdown from "../forms/Dropdown.svelte";
 import { createEventDispatcher } from "svelte";
-import "./PaginatedTable.css";
 </script>
 
 <script>import Filters from "../search/Filters.svelte";
 import SearchBar from "../search/SearchBar.svelte";
 import Converter from "../../../utils/filters/filters";
-import CircularLoader from "../../simple/loaders/CircularLoader.svelte";
-import { DateTime } from "luxon";
-import { FilterBuilder } from "../../..";
-import Menu from "../../simple/common/Menu.svelte";
-import LabelAndTextField from "../forms/LabelAndTextField.svelte";
-import Autocomplete from "../../simple/forms/Autocomplete.svelte";
-import Chip from "../../simple/navigation/Chip.svelte";
-import FlagIcon from "../../simple/media/FlagIcon.svelte";
-import CountriesAutocomplete from "../forms/CountriesAutocomplete.svelte";
-import DatePickerTextField from "../forms/DatePickerTextField.svelte";
-import ConfirmOrCancelButtons from "../forms/ConfirmOrCancelButtons.svelte";
-import Divider from "../../simple/common/Divider.svelte";
 let clazz = {};
 export { clazz as class };
 export let headers = [], items = [], sortedBy = void 0, sortDirection = void 0, page = 1, maxPage = void 0, rowsPerPageOptions = [
   { label: "20", value: 20 },
   { label: "50", value: 50 },
   { label: "100", value: 100 }
-], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20, filters = [], searchBarColumns = void 0, searchBarVisible = true, searchBarPlaceholder = "Type something to search...", lang = "en", editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = {}, pointerOnRowHover = void 0, doubleClickActive = false, doubleClickDelay = 250, quickFilters = [];
+], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20, filters = [], searchBarColumns = void 0, searchBarVisible = true, searchBarPlaceholder = "Type something to search...", lang = "en", editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = {}, pointerOnRowHover = void 0, doubleClickActive = false, doubleClickDelay = 250;
 export let calculateRowStyles = void 0;
 export let calculateRowClasses = void 0;
-let searchBarInput, searchText = void 0, sortModify, menuElementQuickFilters, saveEditDisabled = false, calendarOpened = false, calendarOpened2 = false, loading = false, quickFilterActive, openQuickFilter = false, quickFiltersVisible = true, quickFilterActivator = void 0, globalBuilder = new FilterBuilder();
+let searchBarInput, searchText = void 0, sortModify;
 let dispatch = createEventDispatcher();
 let rowsPerPageSelection = [];
 $:
@@ -93,266 +80,6 @@ function buildFilters(params) {
   }
   return builder;
 }
-function handleCancelClick() {
-  quickFilterActivator = void 0;
-  openQuickFilter = false;
-}
-function handleQuickFilterClick(mouseEvent, quickFilter) {
-  handleCancelClick();
-  setTimeout(() => {
-    if (quickFilter) {
-      if (!quickFilterActivator) {
-        let target = mouseEvent.target;
-        quickFilterActivator = target;
-        quickFilterActive = quickFilter;
-        openQuickFilter = !openQuickFilter;
-      }
-    }
-  }, 300);
-}
-function setQuickFilterMissingValue(quickFilter) {
-  if (quickFilter.type.key == "custom") {
-    quickFilter.type.missingValue = true;
-    quickFilter.type.value = void 0;
-  } else if (quickFilter.type.key == "multi-select") {
-    quickFilter.type.missingValue = true;
-    quickFilter.type.values = [];
-  } else if (quickFilter.type.key == "string") {
-    quickFilter.type.missingValue = true;
-    quickFilter.type.value = void 0;
-  } else if (quickFilter.type.key == "country") {
-    quickFilter.type.missingValue = true;
-    quickFilter.type.selected = void 0;
-  } else if (quickFilter.type.key == "number") {
-    quickFilter.type.missingValue = true;
-    quickFilter.type.value = void 0;
-  }
-  handleApplyClick(quickFilter);
-}
-function setQuickFilterValue(quickFilter, value) {
-  if (quickFilter.type.key == "custom") {
-    quickFilter.type.value = value;
-  } else if (quickFilter.type.key == "boolean") {
-    quickFilter.type.value = value;
-  }
-  handleApplyClick(quickFilter);
-}
-function handleApplyClick(quickFilter, dispatchCustomFilterClick = false) {
-  if (quickFilter.type.key == "custom" && dispatchCustomFilterClick) {
-    dispatch("applyCustomQuickFilter", { quickFilter, setQuickFilterValue });
-  } else {
-    quickFilter.active = true;
-    quickFilters = quickFilters;
-    globalBuilder = quickFilterBuilder(globalBuilder, quickFilter);
-    handleFiltersChange();
-    quickFilterActivator = void 0;
-    openQuickFilter = false;
-  }
-}
-function quickFilterBuilder(builder, quickFilter, clearPreaviousValue = true) {
-  if (quickFilter.type.key == "custom") {
-    let value = quickFilter.type.value, missingValue = quickFilter.type.missingValue;
-    if (clearPreaviousValue) {
-      builder = handleClearQuickFilter(quickFilter, false);
-    }
-    quickFilter.type.value = value;
-    quickFilter.type.missingValue = missingValue;
-    builder = quickFilter.type.modify({
-      builder,
-      value: { value, missingValue }
-    });
-  } else if (quickFilter.type.key == "string") {
-    let value = quickFilter.type.value, missingValue = quickFilter.type.missingValue;
-    if (clearPreaviousValue) {
-      builder = handleClearQuickFilter(quickFilter, false);
-    }
-    quickFilter.type.value = value;
-    quickFilter.type.missingValue = missingValue;
-    if (quickFilter.type.modify) {
-      builder = quickFilter.type.modify({
-        builder,
-        value: { value, missingValue }
-      });
-    }
-    if (!!quickFilter.column) {
-      if (missingValue) {
-        builder.whereNull(quickFilter.column);
-      } else if (!!value) {
-        builder.where(
-          quickFilter.column,
-          quickFilter.type.mode ?? "equal",
-          value
-        );
-      }
-    }
-  } else if (quickFilter.type.key == "boolean") {
-    let value = quickFilter.type.value;
-    if (clearPreaviousValue) {
-      builder = handleClearQuickFilter(quickFilter, false);
-    }
-    quickFilter.type.value = value;
-    if (quickFilter.type.modify) {
-      builder = quickFilter.type.modify({
-        builder,
-        value
-      });
-    }
-    if (!!quickFilter.column && value != void 0) {
-      builder.where(quickFilter.column, value);
-    }
-  } else if (quickFilter.type.key == "country") {
-    let value = quickFilter.type.selected, missingValue = quickFilter.type.missingValue;
-    if (clearPreaviousValue) {
-      builder = handleClearQuickFilter(quickFilter, false);
-    }
-    quickFilter.type.selected = value;
-    quickFilter.type.missingValue = missingValue;
-    const values = value?.map((item) => item.value);
-    if (quickFilter.type.modify) {
-      builder = quickFilter.type.modify({
-        builder,
-        value: { values, missingValue }
-      });
-    }
-    if (!!quickFilter.column) {
-      if (missingValue) {
-        builder.whereNull(quickFilter.column);
-      } else if (!!values && values.length > 0) {
-        builder.whereIn(quickFilter.column, values);
-      }
-    }
-  } else if (quickFilter.type.key == "date") {
-    let from = quickFilter.type.from, to = quickFilter.type.to;
-    if (clearPreaviousValue) {
-      builder = handleClearQuickFilter(quickFilter, false);
-    }
-    quickFilter.type.from = from;
-    quickFilter.type.to = to;
-    if (quickFilter.type.modify) {
-      builder = quickFilter.type.modify({
-        builder,
-        value: { from, to }
-      });
-    } else if (!!quickFilter.column) {
-      if (!!from) {
-        builder.where(
-          quickFilter.column,
-          ">=",
-          DateTime.fromJSDate(from).setLocale("it-IT").startOf("day").toString()
-        );
-      }
-      if (!!to) {
-        builder.where(
-          quickFilter.column,
-          "<=",
-          DateTime.fromJSDate(to).setLocale("it-IT").endOf("day").toString()
-        );
-      }
-    }
-  } else if (quickFilter.type.key == "multi-select") {
-    let value = quickFilter.type.values, missingValue = quickFilter.type.missingValue;
-    if (clearPreaviousValue) {
-      builder = handleClearQuickFilter(quickFilter, false);
-    }
-    quickFilter.type.values = value;
-    quickFilter.type.missingValue = missingValue;
-    const values = value.map((item) => item.value);
-    if (quickFilter.type.modify) {
-      builder = quickFilter.type.modify({
-        builder,
-        value: { values, missingValue }
-      });
-    } else if (quickFilter.column) {
-      if (missingValue) {
-        builder.whereNull(quickFilter.column);
-      } else if (values.length > 0) {
-        builder.whereIn(quickFilter.column, values);
-      }
-    }
-  } else if (quickFilter.type.key == "number") {
-    let value = quickFilter.type.value, missingValue = quickFilter.type.missingValue;
-    if (clearPreaviousValue) {
-      builder = handleClearQuickFilter(quickFilter, false);
-    }
-    quickFilter.type.value = value;
-    quickFilter.type.missingValue = missingValue;
-    if (quickFilter.type.modify) {
-      builder = quickFilter.type.modify({
-        builder,
-        value: { value, missingValue }
-      });
-    }
-    if (quickFilter.column) {
-      if (missingValue) {
-        builder.whereNull(quickFilter.column);
-      } else if (!!value) {
-        builder.where(quickFilter.column, value);
-      }
-    }
-  }
-  return builder;
-}
-function handleClearQuickFilter(quickFilter, dispatchFiltersChange = true) {
-  if (quickFilter.type.key == "custom") {
-    quickFilter.type.value = void 0;
-    quickFilter.type.missingValue = void 0;
-    if (dispatchFiltersChange) {
-      dispatch("removeCustomQuickFilter", { quickFilter });
-    }
-  } else if (quickFilter.type.key == "string") {
-    quickFilter.type.value = void 0;
-    quickFilter.type.missingValue = void 0;
-  } else if (quickFilter.type.key == "number") {
-    quickFilter.type.value = void 0;
-    quickFilter.type.missingValue = void 0;
-  } else if (quickFilter.type.key == "boolean") {
-    quickFilter.type.value = void 0;
-  } else if (quickFilter.type.key == "country") {
-    quickFilter.type.selected = void 0;
-    quickFilter.type.missingValue = void 0;
-  } else if (quickFilter.type.key == "date") {
-    quickFilter.type.from = void 0;
-    quickFilter.type.to = void 0;
-  } else if (quickFilter.type.key == "multi-select") {
-    quickFilter.type.values = [];
-    quickFilter.type.missingValue = false;
-    quickFilter.type.missingValue = void 0;
-  }
-  if (dispatchFiltersChange) {
-    quickFilter.active = false;
-  }
-  globalBuilder = searchTextBuilder(searchText);
-  for (let i = 0; i < quickFilters.length; i++) {
-    if (quickFilters[i].active) {
-      globalBuilder = quickFilterBuilder(
-        globalBuilder,
-        quickFilters[i],
-        false
-      );
-    }
-  }
-  if (dispatchFiltersChange) {
-    quickFilters = quickFilters;
-    handleFiltersChange();
-  }
-  return globalBuilder;
-}
-function searchTextBuilder(searchText2) {
-  let builder;
-  let converter = new Converter();
-  builder = converter.createBuilder({
-    filters: filters || []
-  });
-  if (!!searchText2 && !!searchBarColumns && searchBarColumns.length > 0) {
-    builder.where((b) => {
-      b.where(searchBarColumns[0], "ilike", "%" + searchText2 + "%");
-      for (let i = 1; i < searchBarColumns.length; i += 1) {
-        b.orWhere(searchBarColumns[i], "ilike", "%" + searchText2 + "%");
-      }
-    });
-  }
-  return builder;
-}
 </script>
 
 <div class="paginated-table">
@@ -392,54 +119,6 @@ function searchTextBuilder(searchText2) {
       </svelte:fragment>
     </Filters>
   </div>
-  <div class="quick-filters-results-container">
-    <div class="quick-filters">
-      {#if !!quickFilters && quickFilters.length > 0 && quickFiltersVisible}
-        {#each quickFilters as quickFilter}
-          <div
-            class={quickFilter.active ? "active-quick-filters" : "non-active-quick-filters"}
-          >
-            <button
-              on:click={(e) => {
-                handleQuickFilterClick(e, quickFilter);
-              }}
-            >
-              <div class="quick-filter-icon">
-                <Icon name={quickFilter.icon} --icon-size="20px" />
-                {quickFilter.title}
-              </div>
-            </button>
-            {#if quickFilter.active}
-              <div style:padding-top="1px" style:padding-right="3px">
-                <Icon
-                  name="mdi-close-circle"
-                  click
-                  --icon-size="14px"
-                  on:click={() => {
-                    handleClearQuickFilter(quickFilter);
-                  }}
-                />
-              </div>
-            {/if}
-          </div>
-        {/each}
-      {/if}
-    </div>
-    {#if totalElements}
-      <div class='results-number'>
-        { lang == 'en' ? 'Results: ' : 'Risultati: '}
-        {#if !loading && !!items}
-          {totalElements || items.length}
-        {:else}
-          <CircularLoader
-            {loading}
-            --circular-loader-height='10px'
-          ></CircularLoader>
-        {/if}
-      </div>
-      {/if}
-  </div>
-  
   <SimpleTable
     bind:headers
     bind:class={clazz.simpleTable}
@@ -539,261 +218,6 @@ function searchTextBuilder(searchText2) {
   </div>
 </div>
 
-
-<Menu
-  bind:open={openQuickFilter}
-  activator={quickFilterActivator}
-  bind:menuElement={menuElementQuickFilters}
-  anchor="bottom"
-  openingId="quick-filter"
-  closeOnClickOutside
->
-  <div
-    class="quick-filter-container"
-  >
-    <div style:grid-column="1 / 3">
-      {#if quickFilterActive.type.key == 'custom'}
-        <slot name="custom-quick-filter" quickFilter={quickFilterActive} {setQuickFilterMissingValue}>
-        </slot>
-      {:else if quickFilterActive.type.key === "string"}
-        <div class="space-between" style="font-weight: 500;">
-          {quickFilterActive.title}
-          {#if !!quickFilterActive.type.missingLabel}
-            <button
-              on:click={() =>
-                setQuickFilterMissingValue(quickFilterActive)}
-              >{quickFilterActive.type.missingLabel}</button
-            >
-          {/if}
-        </div>
-        <LabelAndTextField
-          description={quickFilterActive.description}
-          name={quickFilterActive.title}
-          info={quickFilterActive.info}
-          type="text"
-          bind:value={quickFilterActive.type.value}          
-          --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))'
-        />
-      {:else if quickFilterActive.type.key === "number"}
-        <div class="space-between" style="font-weight: 500; margin-bottom: 8px;">
-          {quickFilterActive.title}
-          {#if !!quickFilterActive.type.missingLabel}
-            <button
-              on:click={() =>
-                setQuickFilterMissingValue(quickFilterActive)}
-              >{quickFilterActive.type.missingLabel}</button
-            >
-          {/if}
-        </div>
-        <LabelAndTextField
-          description={quickFilterActive.description}
-          name={quickFilterActive.title}
-          info={quickFilterActive.info}
-          type="number"
-          error={saveEditDisabled}
-          bind:value={quickFilterActive.type.value}          
-          --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))'
-        />
-      {:else if quickFilterActive.type.key === "multi-select"}
-        <div class="space-between" style="font-weight: 500; margin-bottom: 8px;">
-          {quickFilterActive.title}
-          {#if !!quickFilterActive.type.missingLabel}
-            <button
-              on:click={() =>
-                setQuickFilterMissingValue(quickFilterActive)}
-              >{quickFilterActive.type.missingLabel}</button
-            >
-          {/if}
-        </div>
-        <div on:click|stopPropagation role="presentation" tabindex="-1">
-          <Autocomplete
-            multiple
-            items={quickFilterActive.type.items}
-            bind:values={quickFilterActive.type.values}
-            --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))"
-          >
-            <svelte:fragment slot="selection" let:selection let:unselect>
-              <slot name="selection" {selection} {unselect}>
-                <div tabindex="-1">
-                  <Chip
-                    close={true}
-                    on:close={() => unselect(selection)}
-                    --chip-default-border-radius="var(--autocomplete-border-radius, var(--autocomplete-default-border-radius))"
-                    buttonTabIndex={-1}
-                    truncateText
-                  >
-                    <slot name="chip-label" {selection}>
-                      {#if !!quickFilterActive.type.countriesAlpha2 && quickFilterActive.type.countriesAlpha2.find((c) => c.value == selection.value)}
-                        <div>
-                          <FlagIcon
-                            alpha2={quickFilterActive.type.countriesAlpha2
-                              .find((c) => c.value == selection.value)
-                              ?.label?.toString()
-                              .toLowerCase() ?? ""}
-                            --flag-icon-size="16px"
-                          />
-                        </div>
-                      {/if}
-                      {selection.label}
-                    </slot>
-                  </Chip>
-                </div>
-              </slot>
-            </svelte:fragment>
-            <svelte:fragment slot="item-label" let:item>
-              <slot name="item-label" {item}>
-                {#if !!quickFilterActive.type.countriesAlpha2 && quickFilterActive.type.countriesAlpha2.find((c) => c.value == item.value)}
-                  <FlagIcon
-                    alpha2={quickFilterActive.type.countriesAlpha2
-                      .find((c) => c.value == item.value)
-                      ?.label?.toString()
-                      .toLowerCase() ?? ""}
-                  />
-                {/if}
-                {item.label}
-              </slot>
-            </svelte:fragment>
-          </Autocomplete>
-        </div>
-      {:else if quickFilterActive.type.key === "boolean"}
-        {#if quickFilterActive.type.params}
-          <div class="vertical-quick-filters">
-            <button
-              on:click={() => setQuickFilterValue(quickFilterActive, true)}
-            >
-              {quickFilterActive.type.params.labelTrue}
-            </button>
-            <button
-              on:click={() => setQuickFilterValue(quickFilterActive, false)}
-            >
-              {quickFilterActive.type.params.labelFalse}
-            </button>
-            <button
-              on:click={() => setQuickFilterValue(quickFilterActive, undefined)}
-            >
-              {lang == 'en' ? 'All' : 'Tutti'}
-            </button>
-          </div>
-        {/if}
-      {:else if quickFilterActive.type.key === "country"}
-        <div class="space-between" style="font-weight: 500; margin-bottom: 8px;">
-          {quickFilterActive.title}
-          {#if !!quickFilterActive.type.missingLabel}
-            <button
-              on:click={() =>
-                setQuickFilterMissingValue(quickFilterActive)}
-              >{quickFilterActive.type.missingLabel}</button
-            >
-          {/if}
-        </div>
-        <div on:click|stopPropagation role="presentation" tabindex="-1">
-          <CountriesAutocomplete
-            bind:selected={quickFilterActive.type.selected}
-            {...((!!quickFilterActive.type.countriesOptions && quickFilterActive.type.countriesOptions.length > 0) && {
-              items: quickFilterActive.type.countriesOptions,
-            })}
-            autocompleteProps={{
-              placeholder: !!quickFilterActive.type.selected
-                ? quickFilterActive.type.selected.length > 0
-                  ? ""
-                  : quickFilterActive.description
-                : quickFilterActive.description,
-              multiple: true,
-            }}
-            --autocomplete-border-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))"
-          />
-        </div>
-      {:else if quickFilterActive.type.key === "date"}
-        <div on:click|stopPropagation role="presentation" tabindex="-1">
-          <div>
-            <DatePickerTextField
-              bind:selectedDate={quickFilterActive.type.from}
-              placeholder={lang == 'en' ? "From" : 'Da'}
-              --simple-textfield-width="100%"
-              --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))'
-              flipOnOverflow
-              bind:menuOpened={calendarOpened}
-              on:day-click={() => (calendarOpened = false)}
-            >
-              <svelte:fragment slot="append-inner">
-                <Icon
-                  name="mdi-close-circle"
-                  click
-                  on:click={() => {
-                    if (
-                      !!quickFilterActive &&
-                      quickFilterActive.type.key === "date"
-                    ) {
-                      quickFilterActive.type.from = undefined;
-                    }
-                  }}
-                />
-              </svelte:fragment>
-            </DatePickerTextField>
-          </div>
-          <div>
-            <DatePickerTextField
-              bind:selectedDate={quickFilterActive.type.to}
-              placeholder={lang == 'en' ? "To" : 'A'}
-              --simple-textfield-width="100%"
-              --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))'
-              flipOnOverflow
-              bind:menuOpened={calendarOpened2}
-              on:day-click={() => (calendarOpened2 = false)}
-            >
-              <svelte:fragment slot="append-inner">
-                <Icon
-                  name="mdi-close-circle"
-                  click
-                  on:click={() => {
-                    if (
-                      !!quickFilterActive &&
-                      quickFilterActive.type.key === "date"
-                    ) {
-                      quickFilterActive.type.to = undefined;
-                    }
-                  }}
-                />
-              </svelte:fragment>
-            </DatePickerTextField>
-          </div>
-        </div>
-      {/if}
-    </div>
-
-    {#if quickFilterActive.type.key != "boolean"}
-      <div style:margin-top="10px" style:grid-row="2" style:grid-column="1 / 3">
-        <Divider --divider-color=rgb(var(--global-color-contrast-100)) />
-      </div>
-      <div style:grid-row="3" style:grid-column="2" style:margin-top="-15px">
-        <ConfirmOrCancelButtons
-          confirmDisable={saveEditDisabled}
-          confirmText={lang == 'en' ? "Apply" : 'Applica'}
-          cancelText={lang == 'en' ? "Cancel" : 'Annulla'}
-          on:cancel-click={handleCancelClick}
-          on:confirm-click={() => handleApplyClick(quickFilterActive, quickFilterActive.type.key == 'custom')}
-        />
-      </div>
-    {/if}
-  </div>
-</Menu>
-
 <style>
   .paginated-table {
     width: 100%;
@@ -837,64 +261,6 @@ function searchTextBuilder(searchText2) {
     );
   }
 
-  .quick-filter-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    justify-content: center;
-    align-items: center;
-    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
-    position: fixed;
-    padding: 10px;
-    border-radius: 10px;
-    background-color: var(
-      --paginated-table-quick-filter-background-color,
-      var(--paginated-table-default-quick-filter-background-color)
-    );
-  }
-
-  .quick-filters {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 10px;
-  }
-
-  .quick-filters-results-container {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .vertical-quick-filters {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    width: 130px;
-  }
-
-  
-  .active-quick-filters {
-    display: flex;
-    margin-right: 15px;
-    background-color: rgb(var(--global-color-primary-500));
-    border-radius: 5px;
-    width: fit-content;
-  }
-
-  .non-active-quick-filters {
-    display: flex;
-    margin-right: 16px;
-  }
-
-  .quick-filter-icon {
-    display: flex;
-    gap: 4px;
-    margin: 0 8px;
-  }
-
-  .space-between {
-    display: flex;
-    justify-content: space-between;
-  }
-
   @media only screen and (max-width: 768px) {
     .per-page-dropdown {
       display: none;

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

@@ -3,12 +3,10 @@ import SimpleTable, { type CalculateRowClasses, type CalculateRowStyles } from "
 import Paginator from "../../simple/lists/Paginator.svelte";
 import Dropdown from "../forms/Dropdown.svelte";
 import { type ComponentProps } from "svelte";
-import './PaginatedTable.css';
 type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
 export type Header = ArrayElement<NonNullable<ComponentProps<SimpleTable>["headers"]>>;
 import Filters from "../search/Filters.svelte";
 import type Builder from "../../../utils/filters/builder";
-import type { QuickFilter } from "../../../utils/filters/quickFilters";
 declare const __propDef: {
     props: {
         class?: {
@@ -38,7 +36,6 @@ declare const __propDef: {
         pointerOnRowHover?: boolean | undefined;
         doubleClickActive?: ComponentProps<SimpleTable>['doubleClickActive'];
         doubleClickDelay?: ComponentProps<SimpleTable>['doubleClickDelay'];
-        quickFilters?: QuickFilter[] | undefined;
         calculateRowStyles?: CalculateRowStyles | undefined;
         calculateRowClasses?: CalculateRowClasses | undefined;
     };
@@ -61,7 +58,6 @@ declare const __propDef: {
         rowDoubleClick: CustomEvent<{
             item: import("../../simple/lists/SimpleTable.svelte").Item;
         }>;
-        click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -98,8 +94,8 @@ declare const __propDef: {
         };
         footer: {
             hideRowsPerPage: boolean;
-            rowsPerPageOptions: import("../../simple/forms/Autocomplete.svelte").Item[] | undefined;
-            rowsPerPageSelection: import("../../simple/forms/Autocomplete.svelte").Item[];
+            rowsPerPageOptions: import("../forms/Dropdown.svelte").Item[] | undefined;
+            rowsPerPageSelection: import("../forms/Dropdown.svelte").Item[];
             totalElements: number | undefined;
             page: number;
             maxPage: number | undefined;
@@ -112,20 +108,6 @@ declare const __propDef: {
             rowsPerPage: number;
             totalElements: number | undefined;
         };
-        'custom-quick-filter': {
-            quickFilter: QuickFilter;
-            setQuickFilterMissingValue: (quickFilter: QuickFilter) => void;
-        };
-        selection: {
-            selection: import("../../simple/forms/Autocomplete.svelte").Item;
-            unselect: (item: import("../../simple/forms/Autocomplete.svelte").Item) => void;
-        };
-        'chip-label': {
-            selection: import("../../simple/forms/Autocomplete.svelte").Item;
-        };
-        'item-label': {
-            item: import("../../simple/forms/Autocomplete.svelte").Item;
-        };
     };
 };
 export type PaginatedTableProps = typeof __propDef.props;

package/package.json

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

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

@@ -1,3 +0,0 @@
-:root {
-  --paginated-table-default-quick-filter-background-color: rgb(var(--global-color-background-300));
-}