@likable-hair/svelte 4.0.17 → 4.0.19

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

@@ -3,12 +3,12 @@
 
 <script lang="ts" generics="Data">import '../../../css/main.css';
 import Chip from "../../simple/navigation/Chip.svelte";
-let { values = $bindable([]), items, multiple = true, disabled = false, onchange, } = $props();
+let { values = $bindable(), items, multiple = true, disabled = false, onchange, } = $props();
 function select(item) {
-    const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
+    const alreadyPresent = values?.findIndex((i) => i.value === item.value) !== -1;
     if (!alreadyPresent) {
         if (multiple)
-            values = [...values, item];
+            values = [...(values || []), item];
         else
             values = [item];
         if (onchange) {
@@ -23,19 +23,19 @@ function select(item) {
     }
 }
 function unselect(item) {
-    values = values.filter((i) => i.value != item.value);
+    values = values?.filter((i) => i.value != item.value);
     if (onchange) {
         onchange({
             detail: {
                 unselect: item,
                 select: undefined,
-                selection: values,
+                selection: values || [],
             }
         });
     }
 }
 function toggle(item) {
-    const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
+    const alreadyPresent = values?.findIndex((i) => i.value === item.value) !== -1;
     if (alreadyPresent)
         unselect(item);
     else
@@ -55,7 +55,7 @@ function toggle(item) {
       {#each (items || []) as item}
         <div class="chip">
           <Chip
-            outlined={values.findIndex(i => i.value === item.value) === -1}
+            outlined={!values || values?.findIndex(i => i.value === item.value) === -1}
             onclick={() => toggle(item)}
             buttonTabIndex={0}
             truncateText

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

@@ -5,16 +5,16 @@ import {} from "svelte";
 import Filters from "../search/Filters.svelte";
 import SearchBar from "../search/SearchBar.svelte";
 import Converter from "../../../utils/filters/filters";
-let { headers = [], items = [], sortedBy = $bindable(undefined), sortDirection = $bindable('asc'), page = $bindable(1), maxPage = undefined, rowsPerPageOptions = [
+let { headers = [], items = [], sortedBy = $bindable(undefined), sortDirection = $bindable("asc"), page = $bindable(1), maxPage = undefined, rowsPerPageOptions = [
     { label: "20", value: 20 },
     { label: "50", value: 50 },
     { label: "100", value: 100 },
-], hideRowsPerPage = false, totalElements = undefined, rowsPerPage = $bindable(20), filters = $bindable([]), searchBarColumns = undefined, searchBarVisible = true, searchBarPlaceholder = "Type something to search...", lang = "en", editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = {}, pointerOnRowHover = undefined, doubleClickActive = false, doubleClickDelay = 250, calculateRowStyles = undefined, calculateRowClasses = undefined, class: clazz = {}, onfiltersChange, onpaginationChange, onremoveFilter, onremoveAllFilters, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onrowClick, onrowDoubleClick, appendSnippet, customSnippet, headerLabelSnippet, headerSnippet, rowActionsSnippet, onsort, footerSnippet, rangeDescriptorSnippet, searchBarSnippet, noDataSnippet, oncolumnResize, } = $props();
+], hideRowsPerPage = false, totalElements = undefined, rowsPerPage = $bindable(20), filters = $bindable([]), searchBarColumns = undefined, searchBarVisible = true, lang = "en", editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = {}, pointerOnRowHover = undefined, doubleClickActive = false, doubleClickDelay = 250, calculateRowStyles = undefined, calculateRowClasses = undefined, class: clazz = {}, onfiltersChange, onpaginationChange, onremoveFilter, onremoveAllFilters, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onrowClick, onrowDoubleClick, appendSnippet, customSnippet, headerLabelSnippet, headerSnippet, rowActionsSnippet, onsort, footerSnippet, rangeDescriptorSnippet, searchBarSnippet, noDataSnippet, oncolumnResize, } = $props();
 let searchBarInput = $state(), searchText = $state(), sortModify;
 let rowsPerPageSelection = $state([]);
 $effect(() => {
     rowsPerPageSelection = [
-        { label: rowsPerPage.toString(), value: rowsPerPage }
+        { label: rowsPerPage.toString(), value: rowsPerPage },
     ];
 });
 $effect(() => {
@@ -30,8 +30,10 @@ function handlePaginationChange() {
     if (onpaginationChange) {
         onpaginationChange({
             detail: {
-                rowsPerPage, page, builder
-            }
+                rowsPerPage,
+                page,
+                builder,
+            },
         });
     }
 }
@@ -40,8 +42,8 @@ function handleSearchChange(searchText) {
     if (onfiltersChange) {
         onfiltersChange({
             detail: {
-                builder
-            }
+                builder,
+            },
         });
     }
 }
@@ -53,8 +55,8 @@ function handleFiltersChange() {
     if (onfiltersChange) {
         onfiltersChange({
             detail: {
-                builder
-            }
+                builder,
+            },
         });
     }
 }
@@ -81,19 +83,24 @@ function buildFilters(params) {
     let converter = new Converter();
     let builder;
     builder = converter.createBuilder({
-        filters: filters || []
+        filters: filters || [],
     });
-    if (!!params?.searchText && !!searchBarColumns && searchBarColumns.length > 0) {
-        builder.where(b => {
-            b.where(searchBarColumns[0], 'ilike', '%' + params?.searchText + '%');
+    if (!!params?.searchText &&
+        !!searchBarColumns &&
+        searchBarColumns.length > 0) {
+        builder.where((b) => {
+            b.where(searchBarColumns[0], "ilike", "%" + params?.searchText + "%");
             for (let i = 1; i < searchBarColumns.length; i += 1) {
-                b.orWhere(searchBarColumns[i], 'ilike', '%' + params?.searchText + '%');
+                b.orWhere(searchBarColumns[i], "ilike", "%" + params?.searchText + "%");
             }
         });
     }
     if (!!sortedBy) {
         if (sortModify) {
-            builder = sortModify({ builder, sortDirection: sortDirection || 'asc' });
+            builder = sortModify({
+                builder,
+                sortDirection: sortDirection || "asc",
+            });
         }
         else {
             builder.orderBy(sortedBy, sortDirection || "asc");
@@ -104,35 +111,36 @@ function buildFilters(params) {
 </script>
 
 <div class="paginated-table">
-  {#if searchBarVisible}
-    {#if searchBarSnippet}
-      {@render searchBarSnippet({ handleSearchChange })}
-    {:else}
-      <div class="search-bar-container">
-        <SearchBar
-          placeholder={searchBarPlaceholder}
-          bind:input={searchBarInput}
-          bind:value={searchText}
-        >
-        </SearchBar>
-      </div>
-    {/if}
-  {/if}
   <div class="filter-container">
+    {#if searchBarVisible}
+      {#if searchBarSnippet}
+        {@render searchBarSnippet({ handleSearchChange })}
+      {:else}
+        <div class="search-bar-container">
+          <SearchBar
+            bind:input={searchBarInput}
+            bind:value={searchText}
+            --search-bar-default-height="36px"
+            --search-bar-default-border-radius="4px"
+            --search-bar-default-ring-color="rgb(var(--global-color-background-300),.6)"
+            --search-bar-default-background-color="rgb(var(--global-color-background-300),.4)"
+          ></SearchBar>
+        </div>
+      {/if}
+    {/if}
     <Filters
       bind:filters
       onapplyFilter={handleFiltersChange}
       onremoveFilter={handleRemoveFilter}
       onremoveAllFilters={handleRemoveAllFilters}
-      --filters-default-wrapper-width="100%"
+      --filters-default-wrapper-width={!!searchBarVisible ? undefined : "100%"}
       {lang}
       {editFilterMode}
       {showActiveFilters}
       appendSnippet={filterAppendSnippet}
       customChipSnippet={customFilterChipSnippet}
       customSnippet={customFilterSnippet}
-    >
-    </Filters>
+    ></Filters>
   </div>
   <SimpleTable
     {headers}
@@ -158,12 +166,11 @@ function buildFilters(params) {
     {headerLabelSnippet}
     {noDataSnippet}
     {oncolumnResize}
-  >
-  </SimpleTable>
+  ></SimpleTable>
 
   <div class="footer">
     {#if footerSnippet}
-      {@render footerSnippet({ 
+      {@render footerSnippet({
         hideRowsPerPage,
         rowsPerPageOptions,
         rowsPerPageSelection,
@@ -171,7 +178,7 @@ function buildFilters(params) {
         page,
         maxPage,
         rowsPerPage,
-        handlePaginationChange
+        handlePaginationChange,
       })}
     {:else}
       {#if !hideRowsPerPage}
@@ -189,17 +196,20 @@ function buildFilters(params) {
       {/if}
       {#if totalElements !== undefined}
         {#if rangeDescriptorSnippet}
-          {@render rangeDescriptorSnippet({ page, maxPage, rowsPerPage, totalElements })}
+          {@render rangeDescriptorSnippet({
+            page,
+            maxPage,
+            rowsPerPage,
+            totalElements,
+          })}
         {:else}
           <div class="range-descriptor">
-            viewing {((page || 1) - 1) * rowsPerPage} - {(page || 1) * rowsPerPage} of {totalElements}
+            viewing {((page || 1) - 1) * rowsPerPage} - {(page || 1) *
+              rowsPerPage} of {totalElements}
           </div>
         {/if}
       {/if}
-      <Paginator
-        bind:page
-        {maxPage}
-        onchange={handlePaginationChange}
+      <Paginator bind:page {maxPage} onchange={handlePaginationChange}
       ></Paginator>
     {/if}
   </div>
@@ -214,7 +224,7 @@ function buildFilters(params) {
   }
 
   .range-descriptor {
-    font-size: .7rem;
+    font-size: 0.7rem;
   }
 
   .footer {
@@ -225,11 +235,10 @@ function buildFilters(params) {
   }
 
   .filter-container {
-    margin-top: var(--paginated-table-filter-container-margin-top, 10px);
     display: flex;
     align-items: center;
     flex-direction: row;
-    gap: 10px;
+    gap: 12px;
     width: 100%;
   }
 
@@ -238,6 +247,7 @@ function buildFilters(params) {
       --paginated-table-search-bar-container-padding,
       var(--paginated-table-search-bar-container-default-padding, 0)
     );
+    flex-grow: 1;
   }
 
   @media only screen and (max-width: 768px) {
@@ -245,5 +255,4 @@ function buildFilters(params) {
       display: none;
     }
   }
-
-</style>
+</style>

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

@@ -26,6 +26,7 @@ function closeDropDown() {
     dropdownOpened = false;
 }
 $effect(() => {
+    console.log('effect 1');
     if (!!filter) {
         tick().then(() => {
             initTmpFilter();
@@ -34,6 +35,7 @@ $effect(() => {
     }
 });
 $effect(() => {
+    console.log('effect 2');
     if (!!tmpFilter) {
         let modes;
         if (tmpFilter.type == 'string') {
@@ -62,6 +64,7 @@ $effect(() => {
     }
 });
 $effect(() => {
+    console.log('effect 3');
     if (!tmpFilter?.advanced) {
         advancedModeSelectedOptions = [];
     }
@@ -86,6 +89,7 @@ function handleAdvancedModeSelection() {
 }
 let applyFilterDisabled = $derived(!Validator.isValid(tmpFilter) && !forceApplyValid);
 $effect.pre(() => {
+    console.log('effect 4');
     if (!!tmpFilter && tmpFilter.type == 'bool') {
         if (tmpFilter.value === undefined) {
             tmpFilter.value = false;
@@ -93,6 +97,7 @@ $effect.pre(() => {
     }
 });
 $effect.pre(() => {
+    console.log('effect 5');
     if (!!tmpFilter && tmpFilter.type == 'select') {
         if (tmpFilter.values === undefined) {
             tmpFilter.values = [];

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

@@ -3,5 +3,5 @@
   --filters-button-cancel-default-color: rgb(var(--global-color-primary-400));
   --filters-default-one-edit-menu-max-height: 100%;
   --filters-default-wrapper-width: auto;
-  --filters-default-button-height: 28px;
+  --filters-default-button-height: 20px;
 }

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

@@ -19,7 +19,7 @@ import Dialog from '../../simple/dialogs/Dialog.svelte';
 import Validator from '../../../utils/filters/validator';
 import ToolTip from '../common/ToolTip.svelte';
 import { DateTime } from 'luxon';
-let { filters = $bindable([]), lang = 'en', addFilterLabel = lang === 'en' ? "Filters" : "Filtri", cancelFilterLabel = lang === 'en' ? "Cancel" : "Annulla", applyFilterLabel = lang === 'en' ? "Apply filter" : "Applica filtro", showActiveFilters = true, filterTitleLabel = lang === 'en' ? "Filter by" : "Filtra per", dateLocale = lang === 'en' ? 'en' : 'it', betweenSeparator = lang === 'en' ? "and" : "e", trueString = lang === 'en' ? "true" : "vero", falseString = lang === 'en' ? "false" : "falso", editFilterMode = 'one-edit', labelsMapper = lang === 'en'
+let { filters = $bindable([]), lang = 'en', addFilterLabel = lang === 'en' ? "Filters" : "Filtri", cancelFilterLabel = lang === 'en' ? "Cancel" : "Annulla", applyFilterLabel = lang === 'en' ? "Apply filters" : "Applica filtri", showActiveFilters = true, filterTitleLabel = lang === 'en' ? "Filter by" : "Filtra per", dateLocale = lang === 'en' ? 'en' : 'it', betweenSeparator = lang === 'en' ? "and" : "e", trueString = lang === 'en' ? "true" : "vero", falseString = lang === 'en' ? "false" : "falso", editFilterMode = 'one-edit', labelsMapper = lang === 'en'
     ? {
         equal: { extended: 'equal to', short: 'equal' },
         like: { short: 'includes' },
@@ -39,7 +39,7 @@ let { filters = $bindable([]), lang = 'en', addFilterLabel = lang === 'en' ? "Fi
         lower: { short: 'minore', extended: 'minore di' },
         between: { short: 'compreso', extended: 'è compreso tra' },
         different: { short: 'diverso', extended: 'diverso da' }
-    }, drawerSpace = '20rem', onaddFilterClick, onapplyFilter, onremoveAllFilters, onremoveFilter, customSnippet: customInternalSnippet, customChipSnippet, appendSnippet, contentSnippet, onclick: onclickInternal, onkeydown, } = $props();
+    }, drawerSpace = '60vh', onaddFilterClick, onapplyFilter, onremoveAllFilters, onremoveFilter, customSnippet: customInternalSnippet, customChipSnippet, appendSnippet, contentSnippet, onclick: onclickInternal, onkeydown, } = $props();
 let open = $state(false), mobileOpen = $state(false), activator = $state();
 function handleAddFilterClick() {
     if (onaddFilterClick) {
@@ -321,7 +321,7 @@ function onclick(event, stopPropagation = false) {
 
 <MediaQuery>
   {#snippet defaultSnippet({ mAndDown})}
-    <div class="filters-wrapper" class:mobile={mAndDown} style:--filter-dot-size={activeFilters.length > 0 ? '22px' : '0px'} style:--filter-dot-content={activeFilters.length > 0 ? `"${activeFilters.length}"` : '""'}>
+    <div class="filters-wrapper" class:mobile={mAndDown} style:--filter-dot-size={activeFilters.length > 0 ? '16px' : '0px'} style:--filter-dot-content={activeFilters.length > 0 ? `"${activeFilters.length}"` : '""'}>
       <div class="filters-container" class:mobile={mAndDown} class:hidden={mAndDown && (!showActiveFilters || activeFilters.length == 0)}>
         {#if showActiveFilters}
           {#each activeFilters as filter}
@@ -332,6 +332,7 @@ function onclick(event, stopPropagation = false) {
               <Chip
                 label
                 close
+                --chip-border-radius="4px"
                 onclose={() => handleRemoveFilter(filter)}
                 onclick={() => handleActiveFilterClick(filter)}
               >
@@ -385,7 +386,7 @@ function onclick(event, stopPropagation = false) {
                       <span class="more-items" bind:this={moreItemsActivator}>+{filter.values.length - 1}</span>
                       <ToolTip activator={moreItemsActivator}>
                         <div class="more-tooltip-content">
-                          <ul>
+                          <ul style:margin="0px">
                             {#each filter.values as value}
                               <li><div class="truncate-text">{value.label}</div></li>
                             {/each}
@@ -408,6 +409,7 @@ function onclick(event, stopPropagation = false) {
           >
             <Button
               --button-color="var(--chip-color, var(--chip-default-color))"
+              --button-border-radius="4px"
               --button-height="var(--filters-button-height, var(--filters-default-button-height))"
               onclick={handleAddFilterClick}
             >
@@ -415,7 +417,11 @@ function onclick(event, stopPropagation = false) {
                 <Icon name="mdi-filter"></Icon>
                 {addFilterLabel}
                 <div class="remove-filters" class:hidden={activeFilters.length <= 0}>
-                  <Icon name="mdi-close-circle" onclick={handleRemoveAllFilters}></Icon>
+                  <Icon 
+                    name="mdi-close-circle" 
+                    onclick={handleRemoveAllFilters} 
+                    --icon-hover-color="var(--chip-color, var(--chip-default-color))"
+                  ></Icon>
                 </div>
               </div>
             </Button>
@@ -430,6 +436,8 @@ function onclick(event, stopPropagation = false) {
         >
           <Button
             --button-color="var(--chip-color, var(--chip-default-color))"
+            --button-hover-color="var(--chip-color, var(--chip-default-color))"
+            --button-border-radius="4px"
             --button-height="var(--filters-button-height, var(--filters-default-button-height))"
             onclick={handleAddFilterClick}
           >
@@ -437,7 +445,11 @@ function onclick(event, stopPropagation = false) {
               <Icon name="mdi-filter"></Icon>
               {addFilterLabel}
               <div class="remove-filters" class:hidden={activeFilters.length <= 0}>
-                <Icon name="mdi-close-circle" onclick={handleRemoveAllFilters}></Icon>
+                <Icon 
+                  name="mdi-close-circle" 
+                  onclick={handleRemoveAllFilters}
+                  --icon-hover-color="var(--chip-color, var(--chip-default-color))"
+                ></Icon>
               </div>
             </div>
           </Button>
@@ -536,9 +548,9 @@ function onclick(event, stopPropagation = false) {
             >
               <div class="form-container" style:background-color={mAndDown ? 'transparent' : 'rgb(var(--global-color-background-100))'} style:width={mAndDown ? '100%' : '50vw'} style:box-sizing="border-box">
                 <div class="header">
-                  <h1>{addFilterLabel}</h1>
+                  <div>{addFilterLabel}</div>
                 </div>
-                <div class="body">
+                <div class="drawer-body">
                   {#if contentSnippet}
                     {@render contentSnippet({ mAndDown, updateMultiFilterValues, filters, handleRemoveAllFilters })}
                   {:else}
@@ -706,12 +718,19 @@ function onclick(event, stopPropagation = false) {
       {:else if editFilterMode === 'multi-edit'}
         <Dialog
           bind:open={open}
+          _overlayOpacity="50%"
+          _overlayBackdropFilter="blur(4px)"
         >
-          <div class="form-container" style:background-color={mAndDown ? 'transparent' : 'rgb(var(--global-color-background-100))'} style:width={mAndDown ? '100%' : '50vw'} style:box-sizing="border-box">
+          <div 
+            class="form-container" 
+            style:background-color={mAndDown ? 'transparent' : 'rgb(var(--global-color-background-100))'} 
+            style:width={mAndDown ? '100%' : '800px'} 
+            style:box-sizing="border-box"
+          >
             <div class="header">
-              <h1>{addFilterLabel}</h1>
+              <div>{addFilterLabel}</div>
             </div>
-            <div class="body">
+            <div class="dialog-body">
               {#if contentSnippet}
                 {@render contentSnippet({ mAndDown, updateMultiFilterValues, filters, handleRemoveAllFilters })}
               {:else}
@@ -744,30 +763,37 @@ function onclick(event, stopPropagation = false) {
                 </div>
               {/if}
             </div>
-            <div class="footer">
+            <div class="dialog-footer">
               <div class="actions" style:padding-bottom={mAndDown ? '20px' : undefined}>
                 <Button
-                  --button-background-color="var(--filters-button-cancel-background-color, var(--filters-button-cancel-default-background-color))"
-                  --button-color="var(--filters-button-cancel-color, var(--filters-button-cancel-default-color))"
-                  --button-hover-background-color="rgb(var(--global-color-primary-500))"
-                  --button-hover-box-shadow="0 0 0.5rem rgba(0, 0, 0, 0.3)"
+                  --button-color="rgb(var(--global-color-contrast-900))"
+                  --button-background-color="transparent"
+                  --button-focus-background-color="rgb(var(--global-color-background-200, .5))"
+                  --button-active-background-color="rgb(var(--global-color-background-200, .5))"
+                  --button-hover-background-color="rgb(var(--global-color-background-200, .5))"
+                  --button-hover-box-shadow="none"
                   --button-box-shadow="none"
+                  --button-padding="12px 16px"
                   onclick={handleCancelFilterClick}
                 >
                   {cancelFilterLabel}
                 </Button>
                 <Button
-                  --button-color="rgb(var(--global-color-primary-400))"
+                  --button-color="rgb(var(--global-color-contrast-900))"
                   --button-background-color="transparent"
-                  --button-hover-background-color="rgb(var(--global-color-primary-500))"
-                  --button-hover-box-shadow="0 0 0.5rem rgba(0, 0, 0, 0.3)"
+                  --button-focus-background-color="rgb(var(--global-color-background-200, .5))"
+                  --button-active-background-color="rgb(var(--global-color-background-200, .5))"
+                  --button-hover-background-color="rgb(var(--global-color-background-200, .5))"
+                  --button-hover-box-shadow="none"
                   --button-box-shadow="none"
+                  --button-padding="12px 16px"
                   onclick={handleMultiEditRemoveClick}
                 >
                   {lang == 'en' ? "Remove filters" : "Rimuovi filtri"}
                 </Button>
                 <Button
-                  --button-min-width="100px"
+                  --button-min-width="fit-content"
+                  --button-padding="12px 16px"
                   onclick={handleApplyMultiFilterClick}
                 >
                   {applyFilterLabel}
@@ -798,7 +824,6 @@ function onclick(event, stopPropagation = false) {
   }
 
   .filter-button-content .remove-filters {
-    margin: 0px 8px 0px 8px;
     color: rgb(var(--global-color-primary-100));
   }
 
@@ -813,15 +838,16 @@ function onclick(event, stopPropagation = false) {
   .filter-button::before {
     content: var(--filter-dot-content, '0');
     text-align: center;
-    font-size: .6rem;
+    font-size: .5rem;
     background-color: rgb(var(--global-color-background-500));
     color: rgb(var(--global-color-contrast-700));
     position: absolute;
     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
-    top: -40%;
-    left: calc(100% - 10px);
+    top: -16%;
+    right: -8%;
     border-radius: 100px;
     width: var(--filter-dot-size, 0px);
+    line-height: 16px;
     height: var(--filter-dot-size, 0px);
   }
 
@@ -840,7 +866,7 @@ function onclick(event, stopPropagation = false) {
   .filters-container {
     display: flex;
     flex-wrap: wrap;
-    gap: 5px;
+    gap: 8px;
     align-items: center;
   }
 
@@ -852,7 +878,7 @@ function onclick(event, stopPropagation = false) {
   .filters-wrapper {
     display: flex;
     align-items: start;
-    gap: 20px;
+    gap: 8px;
     max-width: 100%;
     width: var(
       --filters-wrapper-width,
@@ -873,13 +899,13 @@ function onclick(event, stopPropagation = false) {
 
   .more-items {
     position: relative;
-    padding: 2px 8px 2px 8px;
-    border-radius: 20px;
-    margin-left: 5px;
+    padding: 0px 6px;
+    border-radius: 8px;
+    margin-left: 2px;
     background-color: rgb(var(--global-color-grey-50));
     color: rgb(var(--global-color-primary-500));
     font-weight: 800;
-    font-size: .7rem;
+    font-size: 10px;
   }
 
   .more-tooltip-content {
@@ -887,7 +913,7 @@ function onclick(event, stopPropagation = false) {
     text-overflow: ellipsis;
     width: fit-content;
     border-radius: 6px;
-    padding: 10px 20px 10px 20px;
+    padding: 16px;
     text-align: left;
     background-color: rgb(var(--global-color-background-200));
     color: rgb(var(--global-color-background-950));
@@ -913,7 +939,7 @@ function onclick(event, stopPropagation = false) {
 
   .form-container {
     border-radius: 10px;
-    padding: 20px;
+    box-shadow: 0 0 1px 1px rgb(var(--global-color-background-200));
     height: 100%;
     max-height: 90vh;
     overflow-y: auto;
@@ -963,7 +989,31 @@ function onclick(event, stopPropagation = false) {
   .header {
     font-weight: 600;
     font-size: 1.5rem;
-    padding: 0 0 8px 8px;
+    padding: 16px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid rgb(var(--global-color-background-200));
+  }
+
+  .drawer-body {
+    padding: 16px;
+  }
+
+  .dialog-body {
+    padding: 16px;
+    height: calc(90vh - 96px);
+    max-height: calc(90vh - 164px);
+    overflow-y: auto;
+  }
+
+  .dialog-footer {
+    height: 32px;
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    border-top: 1px solid rgb(var(--global-color-background-200));
   }
 
 </style>

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

@@ -8,17 +8,11 @@ import { fly } from "svelte/transition";
 import Autocomplete from "../../simple/forms/Autocomplete.svelte";
 import Checkbox from "../../simple/forms/Checkbox.svelte";
 import ToggleList from "../forms/ToggleList.svelte";
-let { filter = $bindable(undefined), lang = 'en', backIcon = "mdi-arrow-left", betweenFromLabel = lang === 'en' ? "From" : "Da", betweenToLabel = lang === 'en' ? "To" : "A", labelsMapper, forceApplyValid = false, tmpFilter = $bindable(undefined), onbackClick, onkeypress, onclick: onclickInternal, onclose, customSnippet, filterActionsSnippet, titleSnippet, } = $props();
-// function handleApplyFilterClick() {
-//   if(!!filter && !!tmpFilter) {
-//     filter = {...tmpFilter}
-//     filter.active = true
-//     dispatch('apply')
-//   }
-// }
+import lodash from 'lodash';
+let { filter = $bindable(), lang = 'en', backIcon = "mdi-arrow-left", betweenFromLabel = lang === 'en' ? "From" : "Da", betweenToLabel = lang === 'en' ? "To" : "A", labelsMapper, forceApplyValid = false, tmpFilter = $bindable(), onbackClick, onkeypress, onclick: onclickInternal, onclose, customSnippet, filterActionsSnippet, titleSnippet, } = $props();
 let step = $state();
 function initTmpFilter() {
-    tmpFilter = filter === undefined ? undefined : { ...filter };
+    tmpFilter = filter === undefined ? undefined : lodash.cloneDeep(filter);
     if (!!tmpFilter && tmpFilter.advanced) {
         if (['string', 'number', 'date', 'select'].includes(tmpFilter.type) && Object.keys(tmpFilter).includes('mode')) {
             //@ts-ignore
@@ -39,14 +33,53 @@ function initTmpFilter() {
         step = "editor";
     }
 }
+let advancedModeOptions = $state(), advancedModeSelectedOption = $state();
+let calendarOpened = $state(false), calendarOpened2 = $state(false);
+// TODO I don't like that there is a single dropdown to handle all filter advance mode.
+// In some case would be necessary to handle more than one selection and this code
+// could become non sense
+function handleAdvancedModeSelection() {
+    if (!!advancedModeSelectedOption && !!tmpFilter) {
+        if (tmpFilter.type == 'date')
+            tmpFilter.mode = advancedModeSelectedOption;
+        else if (tmpFilter.type == 'string')
+            tmpFilter.mode = advancedModeSelectedOption;
+        else if (tmpFilter.type == 'number')
+            tmpFilter.mode = advancedModeSelectedOption;
+        else if (tmpFilter.type == 'select')
+            tmpFilter.mode = advancedModeSelectedOption;
+        step = 'editor';
+        canRenderOptions = false;
+    }
+}
+let canRenderOptions = $state(true);
+let applyFilterDisabled = $derived(!Validator.isValid(tmpFilter) && !forceApplyValid);
+let lastSyncedFilter = $state(filter);
 $effect(() => {
-    if (!!filter) {
+    if (!tmpFilter || !step || (!!filter && !lodash.isEqual($state.snapshot(filter), $state.snapshot(lastSyncedFilter)))) {
         initTmpFilter();
+        lastSyncedFilter = filter;
     }
-});
-let advancedModeOptions = $state(), advancedModeSelectedOption = $state();
-$effect(() => {
     if (!!tmpFilter) {
+        if (tmpFilter.type == 'bool') {
+            if (tmpFilter.value === undefined) {
+                tmpFilter.value = false;
+            }
+        }
+        else if (tmpFilter.type == 'select') {
+            if (tmpFilter.values === undefined) {
+                tmpFilter.values = [];
+            }
+        }
+        else if (tmpFilter.type == 'date' && tmpFilter.mode == 'between') {
+            if (!tmpFilter.from)
+                tmpFilter.from = new Date();
+            if (!tmpFilter.to)
+                tmpFilter.to = new Date();
+        }
+        if (!tmpFilter.advanced) {
+            advancedModeSelectedOption = undefined;
+        }
         let modes;
         if (tmpFilter.type == 'string') {
             modes = STRING_MODES;
@@ -70,45 +103,6 @@ $effect(() => {
         }
     }
 });
-$effect(() => {
-    if (!tmpFilter?.advanced) {
-        advancedModeSelectedOption = undefined;
-    }
-});
-let calendarOpened = $state(false), calendarOpened2 = $state(false);
-// TODO I don't like that there is a singlo dropdow to handle all filter advance mode.
-// In some case would be necessary to handle more than one selection and this code
-// could become non sense
-function handleAdvancedModeSelection() {
-    if (!!advancedModeSelectedOption && !!tmpFilter) {
-        if (tmpFilter.type == 'date')
-            tmpFilter.mode = advancedModeSelectedOption;
-        else if (tmpFilter.type == 'string')
-            tmpFilter.mode = advancedModeSelectedOption;
-        else if (tmpFilter.type == 'number')
-            tmpFilter.mode = advancedModeSelectedOption;
-        else if (tmpFilter.type == 'select')
-            tmpFilter.mode = advancedModeSelectedOption;
-        step = 'editor';
-        canRenderOptions = false;
-    }
-}
-let canRenderOptions = $state(true);
-let applyFilterDisabled = $derived(!Validator.isValid(tmpFilter) && !forceApplyValid);
-$effect(() => {
-    if (!!tmpFilter && tmpFilter.type == 'bool') {
-        if (tmpFilter.value === undefined) {
-            tmpFilter.value = false;
-        }
-    }
-});
-$effect(() => {
-    if (!!tmpFilter && tmpFilter.type == 'select') {
-        if (tmpFilter.values === undefined) {
-            tmpFilter.values = [];
-        }
-    }
-});
 function handleModeBackClick() {
     if (onbackClick) {
         onbackClick();
@@ -128,14 +122,6 @@ function handleEditorBackCLick() {
         }, 100);
     }
 }
-$effect(() => {
-    if (!!tmpFilter && tmpFilter.type == 'date' && tmpFilter.mode == 'between') {
-        if (!tmpFilter.from)
-            tmpFilter.from = new Date();
-        if (!tmpFilter.to)
-            tmpFilter.to = new Date();
-    }
-});
 function onclick(event) {
     event.stopPropagation();
     if (onclickInternal) {

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

@@ -1,5 +1,6 @@
 :root {
   --search-bar-default-ring-color: rgb(var(--global-color-contrast-100));
+  --search-bar-default-ring-width: 1px;
   --search-bar-default-background-color: rgb(var(--global-color-background-100));
   --search-bar-default-border-radius: 0.5rem;
   --search-bar-default-height: 3rem;

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

@@ -1,11 +1,9 @@
-<script lang="ts">import '../../../css/main.css';
-import './SearchBar.css';
+<script lang="ts">import "../../../css/main.css";
+import "./SearchBar.css";
 let { input = $bindable(undefined), value = $bindable(undefined), placeholder = undefined, class: clazz = {}, onblur, onchange, onfocus, oninput, onkeydown, iconSnippet, inputSnippet, } = $props();
 </script>
 
-<div
-  class="search-bar-container {clazz.container}"
->
+<div class="search-bar-container {clazz.container}">
   {#if iconSnippet}
     {@render iconSnippet()}
   {:else}
@@ -34,11 +32,11 @@ let { input = $bindable(undefined), value = $bindable(undefined), placeholder =
       autocapitalize="off"
       enterkeyhint="search"
       spellcheck="false"
-      placeholder={placeholder}
+      {placeholder}
       maxlength="512"
       tabindex="0"
       bind:this={input}
-      bind:value={value}
+      bind:value
       {oninput}
       {onchange}
       {onkeydown}
@@ -47,15 +45,12 @@ let { input = $bindable(undefined), value = $bindable(undefined), placeholder =
       class="input {clazz.input}"
     />
   {/if}
-  
 </div>
 
 <style>
   .search-bar-container {
-    box-shadow: inset 0 0 0 1px var(
-      --search-bar-ring-color,
-      var(--search-bar-default-ring-color)
-    );
+    box-shadow: inset 0 0 0 var(--search-bar-ring-width, var(--search-bar-default-ring-width))
+      var(--search-bar-ring-color, var(--search-bar-default-ring-color));
     background-color: var(
       --search-bar-background-color,
       var(--search-bar-default-background-color)
@@ -64,33 +59,18 @@ let { input = $bindable(undefined), value = $bindable(undefined), placeholder =
       --search-bar-border-radius,
       var(--search-bar-default-border-radius)
     );
-    height: var(
-      --search-bar-height,
-      var(--search-bar-default-height)
-    );
+    height: var(--search-bar-height, var(--search-bar-default-height));
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    padding: var(
-      --search-bar-padding,
-      var(--search-bar-default-padding)
-    );
+    padding: var(--search-bar-padding, var(--search-bar-default-padding));
     box-sizing: border-box;
-    max-width: var(
-      --search-bar-max-width,
-      var(--search-bar-default-max-width)
-    );
-    width: var(
-      --search-bar-width,
-      var(--search-bar-default-width)
-    );
+    max-width: var(--search-bar-max-width, var(--search-bar-default-max-width));
+    width: var(--search-bar-width, var(--search-bar-default-width));
   }
 
   .input {
-    font-size: var(
-      --search-bar-font-size,
-      var(--search-bar-default-font-size)
-    );
+    font-size: var(--search-bar-font-size, var(--search-bar-default-font-size));
     line-height: var(
       --search-bar-line-height,
       var(--search-bar-default-line-height)
@@ -110,4 +90,4 @@ let { input = $bindable(undefined), value = $bindable(undefined), placeholder =
     width: 1.25rem;
     stroke: currentColor;
   }
-</style>
+</style>

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

@@ -1,7 +1,7 @@
-import type { ChangeEventHandler, FocusEventHandler, FormEventHandler, KeyboardEventHandler } from 'svelte/elements';
-import '../../../css/main.css';
-import './SearchBar.css';
-import type { Snippet } from 'svelte';
+import type { ChangeEventHandler, FocusEventHandler, FormEventHandler, KeyboardEventHandler } from "svelte/elements";
+import "../../../css/main.css";
+import "./SearchBar.css";
+import type { Snippet } from "svelte";
 interface Props {
     input?: HTMLElement;
     value?: string;

package/dist/components/layouts/CollapsibleSideBarLayout.svelte

@@ -49,13 +49,23 @@ function toggleSidebar() {
                 />
               </div>
             {:else if !sidebarExpanded}
-              <div style:margin-right="2rem">
-                <Icon
-                  name="mdi-menu-close"
-                  --icon-default-size="1.5rem"
-                  onclick={toggleSidebar}
-                />
-              </div>
+              {#if !sidebarExpanded}
+                <div style:margin-right="2rem">
+                  <Icon
+                    name="mdi-dock-left"
+                    --icon-default-size="1.5rem"
+                    onclick={toggleSidebar}
+                  />
+                </div>
+              {:else}
+                <div style:margin-right="2rem">
+                  <Icon
+                    name="mdi-dock-left"
+                    --icon-default-size="1.5rem"
+                    onclick={toggleSidebar}
+                  />
+                </div>
+              {/if}
             {/if}
             {#if innerMenuSnippet}
               {@render innerMenuSnippet({ hamburgerVisible: mAndDown })}
@@ -87,17 +97,6 @@ function toggleSidebar() {
                       <div class="logo">Logo</div>
                     {/if}
                   </div>
-                  <div class="pin-container">
-                    {#if sidebarExpanded}
-                      <div class="sidebar-close-button">
-                        <Icon
-                          name="mdi-menu-open"
-                          --icon-default-size="1.5rem"
-                          onclick={toggleSidebar}
-                        />
-                      </div>
-                    {/if}
-                  </div>
                 </div>
                 {#if menuSnippet}
                   {@render menuSnippet({ hamburgerVisible: mAndDown, sidebarExpanded })}
@@ -188,15 +187,6 @@ function toggleSidebar() {
     margin-bottom: 1rem;
   }
 
-  .pin-container {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    width: 30%;
-    margin-bottom: 1rem;
-    margin-right: 1rem;
-  }
-
   .sidebar-close-button {
     cursor: pointer;
     display: flex;

package/dist/components/simple/buttons/Button.css

@@ -20,6 +20,6 @@
   --button-default-text-active-background-color: rgb(var(--global-color-primary-500), 0.4);
   --button-default-icon-active-color: rgb(var(--global-color-primary-500));
   --button-default-icon-focus-color: rgb(var(--global-color-primary-500));
-  --button-default-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
+  --button-default-box-shadow: none;
   --button-default-text-font-weight: 600;
 }

package/package.json

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