@likable-hair/svelte 4.0.15 → 4.0.17

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

@@ -5,7 +5,7 @@
 import debounceStore from "../../../stores/debounce";
 import { writable } from 'svelte/store';
 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();
+let { items = [], values = $bindable(), multiple = false, searcher, placeholder, searchThreshold = 2, debounceTimeout = 500, searching = false, search = false, searchText = $bindable(), maxVisibleChips, menuOpened = $bindable(false), mobileDrawer = false, closeOnSelect = false, disabled = false, menuAnchor, menuWidth, chipLabelSnippet, itemLabelSnippet, onchange, } = $props();
 const searchTextValue = writable(searchText);
 let searchTextDebounce = $derived(debounceStore(searchTextValue, debounceTimeout));
 $effect(() => {

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

@@ -39,7 +39,7 @@ declare class __sveltets_Render<Data> {
     };
     events(): {};
     slots(): {};
-    bindings(): "";
+    bindings(): "values" | "menuOpened" | "searchText";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -51,10 +51,9 @@ function handleCancel(nativeEvent) {
 
 
 <style>
-  @media (max-width: 768px){
-  	.button-container {
-      flex-direction: column-reverse;
-    }
+  .button-container {
+    display: flex;
+    flex-direction: column-reverse;
   }
 
   @media (min-width: 769px){
@@ -62,6 +61,7 @@ function handleCancel(nativeEvent) {
       justify-content: end;
       align-items: center;
       gap: 15px;
+      flex-direction: row;
     }
   }
 
@@ -82,10 +82,6 @@ function handleCancel(nativeEvent) {
     cursor: pointer;
   }
 
-  .button-container {
-    display: flex;
-  }
-
   .link-button-container {
     height: 45px;
     display: flex;

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

@@ -1,7 +1,7 @@
 <script lang="ts">import Autocomplete, {} from "../../simple/forms/Autocomplete.svelte";
 import { countriesOptions } from '../../../utils/countries';
 import FlagIcon from "../../simple/media/FlagIcon.svelte";
-let { autocompleteProps = {}, selected = $bindable([]), items = countriesOptions, onblur, onchange, onclose, onfocus, onkeydown, class: clazz = {} } = $props();
+let { autocompleteProps = {}, selected = $bindable(), items = countriesOptions, onblur, onchange, onclose, onfocus, onkeydown, class: clazz = {} } = $props();
 </script>
 
 <Autocomplete

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

@@ -1,4 +1,4 @@
-<script lang="ts">import IMask, { InputMask } from 'imask';
+<script lang="ts">import IMask, {} from 'imask';
 import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
 import DatePicker from "../../simple/dates/DatePicker.svelte";
 import Menu from "../../simple/common/Menu.svelte";

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

@@ -1,4 +1,4 @@
-import { InputMask } from 'imask';
+import { type InputMask } from 'imask';
 import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
 import { type ComponentProps, type Snippet } from 'svelte';
 import type { DateStat } from '../../simple/dates/utils';

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

@@ -1,4 +1,4 @@
-<script lang="ts">import IMask, { InputMask } from 'imask';
+<script lang="ts">import IMask, {} from 'imask';
 import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
 import Menu from "../../simple/common/Menu.svelte";
 import Icon from "../../simple/media/Icon.svelte";

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

@@ -1,4 +1,4 @@
-import { InputMask } from 'imask';
+import { type InputMask } from 'imask';
 import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
 import { type ComponentProps, type Snippet } from 'svelte';
 declare const YearPickerTextField: import("svelte").Component<{

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

@@ -1,4 +1,4 @@
-<script lang="ts" generics="Item extends {[key: string]: any}">import { Checkbox, Chip, Converter, CountriesAutocomplete, DatePickerTextField, Drawer, FilterBuilder, FlagIcon, Icon, MediaQuery, Menu, ToolTip } from "../../..";
+<script lang="ts" generics="Item extends {[key: string]: any} = {[key: string]: any}, SubItem extends {[key: string]: any} = {[key: string]: any}">import { Checkbox, Chip, Converter, CountriesAutocomplete, DatePickerTextField, Drawer, FilterBuilder, FlagIcon, Icon, MediaQuery, Menu, ToolTip } from "../../..";
 import { DateTime } from "luxon";
 import { onMount, tick } from "svelte";
 import { quintOut } from "svelte/easing";
@@ -435,7 +435,12 @@ function handleClearQuickFilter(quickFilter, dispatchFiltersChange = true) {
         }
     }
     if (dispatchFiltersChange) {
-        quickFilters = quickFilters;
+        quickFilters = quickFilters.map(f => {
+            if (f.title == quickFilter.title) {
+                return { ...quickFilter };
+            }
+            return f;
+        });
         handleFiltersChange();
     }
     return globalBuilder;
@@ -503,7 +508,12 @@ function handleApplyClick(quickFilter, dispatchCustomFilterClick = false) {
     }
     else {
         quickFilter.active = true;
-        quickFilters = quickFilters;
+        quickFilters = quickFilters.map(f => {
+            if (f.title == quickFilter.title) {
+                return { ...quickFilter };
+            }
+            return f;
+        });
         globalBuilder = quickFilterBuilder(globalBuilder, quickFilter);
         handleFiltersChange();
         quickFilterActivator = undefined;
@@ -850,7 +860,7 @@ $effect(() => {
 });
 async function updateRemainingWidth() {
     if (tableContainer != null && !!tableContainer && mainHeader) {
-        const containerWidth = tableContainer.getBoundingClientRect().width - 30;
+        const containerWidth = tableContainer.getBoundingClientRect().width - 26;
         if (containerWidth) {
             const totalResizableWidth = headersToShowInTable.reduce((sum, head) => {
                 let th = headersHTML[head.value];
@@ -907,90 +917,95 @@ function resizeHeader(th, header) {
   {/if}
 
   {#if searchBarVisible || filtersVisible || appendSnippet}
-    <div class="filter-container">
-      <div class="search-bar-container">
-        {#if searchBarVisible}
-          {#if searchBarSnippet}
-            {@render searchBarSnippet({ handleSearchChange })}
-          {:else}
-            <div style="margin-right: 20px;">
-              <SimpleTextField
-                placeholder={searchBarPlaceholder}
-                appendInnerIcon="mdi-magnify"
-                bind:value={searchText}
-                bind:input={searchBarInput}
-                onkeydown={handleSearchBoxKeydown}
-                --simple-textfield-default-width="450px"
-                --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))'
-              />
-            </div>
-          {/if}
-        {/if}
-  
-        {#if filtersVisible}
-          <div>
-            {#if dynamicFilters}
-              <Filters
-                bind:filters
-                onapplyFilter={() => {
-                  handleSearchChange(searchText);
-                }}
-                onremoveFilter={e => { handleRemoveFilter(e.detail.filter) }}
-                onremoveAllFilters={() => handleRemoveAllFilters()}
-                --filters-default-wrapper-width="100%"
-                {lang}
-                {dateLocale}
-                {editFilterMode}
-                {showActiveFilters}
-                appendSnippet={filterAppendSnippet}
-                customChipSnippet={customFilterChipSnippet}
-              >
-                {#snippet contentSnippet({ filters, mAndDown, updateMultiFilterValues, })}  
-                  {#key filters}
-                    <DynamicFilters
-                      {lang}
-                      {filters}                      
-                      {mAndDown}
-                      onchange={e => updateFilterValues(e.detail.filter, updateMultiFilterValues)}    
-                      {updateMultiFilterValues}
-                    >
-                      {#snippet customSnippet({ filter, mAndDown, updateCustomFilterValues })}
-                        {@render customFilterSnippet?.({ filter, mAndDown, updateCustomFilterValues })}
-                      {/snippet}
-                    </DynamicFilters>
-                  {/key}
-                {/snippet}
-              </Filters>
+    <MediaQuery>
+      {#snippet defaultSnippet({ mAndDown })}
+        <div class="searchbar-and-filter-container {mAndDown ? 'mobile' : 'desktop'}">
+          {#if searchBarVisible}
+            {#if searchBarSnippet}
+              {@render searchBarSnippet({ handleSearchChange })}
             {:else}
-              <Filters
-                bind:filters
-                onapplyFilter={() => {
-                  handleSearchChange(searchText);
-                }}
-                onremoveFilter={e => { handleRemoveFilter(e.detail.filter) }}
-                onremoveAllFilters={() => handleRemoveAllFilters()}
-                --filters-default-wrapper-width="100%"
-                {lang}
-                {dateLocale}
-                {editFilterMode}
-                {showActiveFilters}
-                appendSnippet={filterAppendSnippet}
-                customChipSnippet={customFilterChipSnippet}
-                customSnippet={customFilterSnippet}
-              >
-              </Filters>
+              <div style="margin-right: {mAndDown ? '0px' : '20px'};">
+                <SimpleTextField
+                  placeholder={searchBarPlaceholder}
+                  appendInnerIcon="mdi-magnify"
+                  bind:value={searchText}
+                  bind:input={searchBarInput}
+                  onkeydown={handleSearchBoxKeydown}
+                  --simple-textfield-width={mAndDown ? "100%" : "450px"}
+                  --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))'
+                />
+              </div>
+            {/if}
+          {/if}
+          
+          <div class="filter-container">
+            {#if filtersVisible}
+              <div>
+                {#if dynamicFilters}
+                  <Filters
+                    bind:filters
+                    onapplyFilter={() => {
+                      handleSearchChange(searchText);
+                    }}
+                    onremoveFilter={e => { handleRemoveFilter(e.detail.filter) }}
+                    onremoveAllFilters={() => handleRemoveAllFilters()}
+                    --filters-default-wrapper-width="100%"
+                    {lang}
+                    {dateLocale}
+                    {editFilterMode}
+                    {showActiveFilters}
+                    drawerSpace='40rem'
+                    appendSnippet={filterAppendSnippet}
+                    customChipSnippet={customFilterChipSnippet}
+                  >
+                    {#snippet contentSnippet({ filters, mAndDown, updateMultiFilterValues, })}  
+                      {#key filters}
+                        <DynamicFilters
+                          {lang}
+                          {filters}                      
+                          {mAndDown}
+                          onchange={e => updateFilterValues(e.detail.filter, updateMultiFilterValues)}    
+                          {updateMultiFilterValues}
+                        >
+                          {#snippet customSnippet({ filter, mAndDown, updateCustomFilterValues })}
+                            {@render customFilterSnippet?.({ filter, mAndDown, updateCustomFilterValues })}
+                          {/snippet}
+                        </DynamicFilters>
+                      {/key}
+                    {/snippet}
+                  </Filters>
+                {:else}
+                  <Filters
+                    bind:filters
+                    onapplyFilter={() => {
+                      handleSearchChange(searchText);
+                    }}
+                    onremoveFilter={e => { handleRemoveFilter(e.detail.filter) }}
+                    onremoveAllFilters={() => handleRemoveAllFilters()}
+                    --filters-default-wrapper-width="100%"
+                    {lang}
+                    {dateLocale}
+                    {editFilterMode}
+                    {showActiveFilters}
+                    appendSnippet={filterAppendSnippet}
+                    customChipSnippet={customFilterChipSnippet}
+                    customSnippet={customFilterSnippet}
+                  >
+                  </Filters>
+                {/if}
+              </div>
             {/if}
+  
+            <div>
+              {@render appendSnippet?.()}
+            </div>
           </div>
-        {/if}
-      </div>
-
-      <div>
-        {@render appendSnippet?.()}
-      </div>
-    </div>
+        </div>
+      {/snippet}
+    </MediaQuery>
   {/if}
 
   {#if quickFiltersVisible || numberOfResultsVisible}
@@ -1153,7 +1168,7 @@ function resizeHeader(th, header) {
               bind:this={headersHTML['customize-headers']}
             >
               {#if customizeHeaders}
-                <div style="display: flex; justify-content: center;">
+                <div style="display: flex; justify-content: start;">
                   <Icon
                     name="mdi-plus-circle-outline"
                     onclick={() => (openHeaderDrawer = true)}
@@ -1200,6 +1215,7 @@ function resizeHeader(th, header) {
           {#each renderedRows as row, indexRow}
             <tr
               class="item-row"
+              class:pointer={!!onrowClick}
               data-key={row.item[uniqueKey]}
               style:background-color={
                 !!row.item.disableEdit
@@ -1359,24 +1375,9 @@ function resizeHeader(th, header) {
                       <tbody>
                         {#each row.subItems as subItem, indexSubItem}
                           <tr
-                            onclick={() => handleRowClick(subItem)}
-                            class:row-activator={cellEditorIndexRow == indexSubItem && cellEditorSubItem}
                           >
                             {#each subHeaders as subHeader, indexSubHeader}
                               <td
-                                class:cell-edit-activator={cellEditorIndexHeader == indexSubHeader && cellEditorIndexRow == indexSubItem && cellEditorSubItem}
-                                class:hover-cell={cellEdit && !loading && !!subHeader.cellEditorInfo}
-                                onclick={(e) => {
-                                  handleCellClick(
-                                    e,
-                                    subItem,
-                                    subHeader.cellEditorInfo,
-                                    subItem[subHeader.value],
-                                    indexSubItem,
-                                    indexSubHeader,
-                                    true
-                                  );
-                                }}
                               >
                                 {#if subHeader.type.key == "custom"}
                                   {@render customSubRowSnippet?.({ index: indexSubItem, columnIndex: indexSubHeader, header: subHeader, row: subItem})}
@@ -1702,6 +1703,9 @@ function resizeHeader(th, header) {
             />
           </div>
         {:else if quickFilterActive.type.key === "date"}
+          <div style="font-weight: 500; margin-bottom: 8px;">
+            {quickFilterActive.title}
+          </div>
           <div onclick={e => e.stopPropagation()} role="presentation" tabindex="-1">
             <div>
               <DatePickerTextField
@@ -1764,10 +1768,7 @@ function resizeHeader(th, header) {
       </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">
+        <div style:grid-row="3" style:grid-column="2" style:margin-top="-10px">
           <ConfirmOrCancelButtons
             confirmDisable={saveEditDisabled}
             confirmText={lang == 'en' ? "Apply" : 'Applica'}
@@ -2112,22 +2113,44 @@ function resizeHeader(th, header) {
     flex-direction: row;
   }
 
-  .filter-container {
+  .searchbar-and-filter-container {
     display: flex;
+    margin-bottom: 16px;
+  }
+  
+  .searchbar-and-filter-container.desktop {
     flex-direction: row;
+  }
+
+  .searchbar-and-filter-container.mobile {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .filter-container {
+    display: flex;
     justify-content: space-between;
-    margin-bottom: 20px;
+    flex-grow: 1;
   }
 
   .quick-filters {
     display: flex;
     flex-direction: row;
-    margin-bottom: 10px;
+    overflow-x: auto;
+    white-space: nowrap;
+    padding-bottom: 4px;
+    gap: 8px;
+  }
+
+  .quick-filters::-webkit-scrollbar:horizontal {
+    height: 12px;
   }
 
   .quick-filters-results-container {
     display: flex;
     justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 8px;
   }
 
   .vertical-quick-filters {
@@ -2225,6 +2248,7 @@ function resizeHeader(th, header) {
     display: flex;
     align-items: center;
     gap: 4px;
+    min-width: 90px;
   }
 
   .resizer {
@@ -2239,4 +2263,7 @@ function resizeHeader(th, header) {
   .filler {
     padding: 0 !important;
   }
+  .pointer {
+    cursor: pointer;
+  }
 </style>

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

@@ -10,6 +10,12 @@ import type { QuickFilter } from "../../../utils/filters/quickFilters";
 import type { UIEventHandler } from "svelte/elements";
 declare class __sveltets_Render<Item extends {
     [key: string]: any;
+} = {
+    [key: string]: any;
+}, SubItem extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
 }> {
     props(): {
         headers?: (import("../../simple/lists/SimpleTable.svelte").Header<unknown> & {
@@ -117,7 +123,7 @@ declare class __sveltets_Render<Item extends {
                 disableEdit?: boolean;
                 rowDisableBackgroundColor?: string;
             };
-            subItems: (Item & {
+            subItems: (SubItem & {
                 disableEdit?: boolean;
                 rowDisableBackgroundColor?: string;
             })[];
@@ -334,7 +340,7 @@ declare class __sveltets_Render<Item extends {
                     disableEdit?: boolean;
                     rowDisableBackgroundColor?: string;
                 };
-                subItems: (Item & {
+                subItems: (SubItem & {
                     disableEdit?: boolean;
                     rowDisableBackgroundColor?: string;
                 })[];
@@ -381,7 +387,7 @@ declare class __sveltets_Render<Item extends {
                     disableEdit?: boolean;
                     rowDisableBackgroundColor?: string;
                 };
-                subItems: (Item & {
+                subItems: (SubItem & {
                     disableEdit?: boolean;
                     rowDisableBackgroundColor?: string;
                 })[];
@@ -459,14 +465,14 @@ declare class __sveltets_Render<Item extends {
         }]> | undefined;
         subRowAppendSnippet?: Snippet<[{
             index: number;
-            row?: (Item & {
+            row?: (SubItem & {
                 disableEdit?: boolean;
                 rowDisableBackgroundColor?: string;
             }) | undefined;
         }]> | undefined;
         subRowActionsSnippet?: Snippet<[{
             index: number;
-            row?: (Item & {
+            row?: (SubItem & {
                 disableEdit?: boolean;
                 rowDisableBackgroundColor?: string;
             }) | undefined;
@@ -507,7 +513,7 @@ declare class __sveltets_Render<Item extends {
                 info?: string;
                 maxWidth?: string;
             };
-            row: Item & {
+            row: SubItem & {
                 disableEdit?: boolean;
                 rowDisableBackgroundColor?: string;
             };
@@ -526,16 +532,34 @@ declare class __sveltets_Render<Item extends {
 interface $$IsomorphicComponent {
     new <Item extends {
         [key: string]: any;
-    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
-    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    } = {
+        [key: string]: any;
+    }, SubItem extends {
+        [key: string]: any;
+    } = {
+        [key: string]: any;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item, SubItem>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item, SubItem>['props']>, ReturnType<__sveltets_Render<Item, SubItem>['events']>, ReturnType<__sveltets_Render<Item, SubItem>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item, SubItem>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item, SubItem>['exports']>;
     <Item extends {
         [key: string]: any;
-    }>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    } = {
+        [key: string]: any;
+    }, SubItem extends {
+        [key: string]: any;
+    } = {
+        [key: string]: any;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<Item, SubItem>['props']> & {}): ReturnType<__sveltets_Render<Item, SubItem>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const DynamicTable: $$IsomorphicComponent;
 type DynamicTable<Item extends {
     [key: string]: any;
-}> = InstanceType<typeof DynamicTable<Item>>;
+} = {
+    [key: string]: any;
+}, SubItem extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}> = InstanceType<typeof DynamicTable<Item, SubItem>>;
 export default DynamicTable;