@likable-hair/svelte 4.2.5 → 4.3.0

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

@@ -1,316 +1,426 @@
-<script lang="ts" module>export {};
+<script lang="ts" module>
+  export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+
+  export type LabelMapper = {
+    [label: string]: {extended?: string, short: string}
+  }
 </script>
 
-<script lang="ts">import './Filters.css';
-import '../../../css/main.css';
-import Drawer from '../../simple/navigation/Drawer.svelte';
-import Menu from '../../simple/common/Menu.svelte';
-import MediaQuery from '../../simple/common/MediaQuery.svelte';
-import Button from '../../simple/buttons/Button.svelte';
-import Icon from '../../simple/media/Icon.svelte';
-import {} from 'svelte';
-import { ENGLISH_LABELS_MAPPER, isDateMode, isSelectMode, isStringMode, ITALIAN_LABELS_MAPPER } from '../../../utils/filters/filters';
-import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
-import Chip from '../../simple/navigation/Chip.svelte';
-import FilterEditor from './FilterEditor.svelte';
-import MobileFilterEditor from './MobileFilterEditor.svelte';
-import { fly } from 'svelte/transition';
-import Dialog from '../../simple/dialogs/Dialog.svelte';
-import Validator from '../../../utils/filters/validator';
-import ToolTip from '../common/ToolTip.svelte';
-import { DateTime } from 'luxon';
-import { TabSwitcher } from '../../..';
-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'
-    ? ENGLISH_LABELS_MAPPER
-    : ITALIAN_LABELS_MAPPER, drawerSpace = '85vh', multiEditTabs, onaddFilterClick, onapplyFilter, onremoveAllFilters, onremoveFilter, customSnippet: customInternalSnippet, customChipSnippet, appendSnippet, contentSnippet, onclick: onclickInternal, onkeydown, } = $props();
-let open = $state(false), mobileOpen = $state(false), activator = $state(), localMultiEditTabs = $derived.by(() => {
-    return filters.some(f => !multiEditTabs?.find(tab => tab.name == f.tabName))
-        ? undefined
-        : multiEditTabs;
-}), selectedTab = $state(), selectedTabFilters = $derived.by(() => {
-    return selectedTab
+<script lang="ts">
+  import './Filters.css'
+  import '../../../css/main.css'
+  import Drawer from '../../simple/navigation/Drawer.svelte';
+  import Menu from '../../simple/common/Menu.svelte';
+  import MediaQuery from '../../simple/common/MediaQuery.svelte';
+  import Button from '../../simple/buttons/Button.svelte';
+  import Icon from '../../simple/media/Icon.svelte';
+  import { type ComponentProps, type Snippet } from 'svelte';
+  import { ENGLISH_LABELS_MAPPER, isDateMode, isSelectMode, isStringMode, ITALIAN_LABELS_MAPPER, type DateMode, type Filter, type NumberMode, type SelectMode, type StringMode } from '../../../utils/filters/filters';
+  import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
+  import Chip from '../../simple/navigation/Chip.svelte';
+  import type { Locale } from '../../simple/dates/utils';
+  import FilterEditor from './FilterEditor.svelte';
+  import MobileFilterEditor from './MobileFilterEditor.svelte';
+  import { fly } from 'svelte/transition';
+  import Dialog from '../../simple/dialogs/Dialog.svelte';
+  import Validator from '../../../utils/filters/validator';
+  import ToolTip from '../common/ToolTip.svelte';
+  import { DateTime } from 'luxon';
+  import type { KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
+  import { TabSwitcher } from '../../..';
+
+  interface Props {
+    filters?: Filter[];
+    lang?: 'it' | 'en';
+    addFilterLabel?: string;
+    cancelFilterLabel?: string;
+    applyFilterLabel?: string;
+    showActiveFilters?: boolean;
+    filterTitleLabel?: string;
+    dateLocale?: Locale;
+    betweenSeparator?: string;
+    trueString?: string;
+    falseString?: string;
+    editFilterMode?: 'one-edit' | 'multi-edit';
+    labelsMapper?: LabelMapper;
+    drawerSpace?: string
+    multiEditTabs?: ComponentProps<typeof TabSwitcher>['tabs']
+    onaddFilterClick?: () => void
+    onapplyFilter?: () => void
+    onremoveAllFilters?: () => void
+    onremoveFilter?: (event: {
+      detail: {
+        filter: Filter
+      }
+    }) => void
+    customSnippet?: Snippet<[{
+      filter: Filter | undefined,
+      updateFunction: typeof updateFunction,
+      mAndDown: boolean
+    }]>
+    customChipSnippet?: Snippet<[{
+      filter: Filter
+    }]>
+    appendSnippet?: Snippet<[]>
+    contentSnippet?: Snippet<[{ 
+      mAndDown: boolean,
+      updateMultiFilterValues: typeof updateMultiFilterValues,
+      handleRemoveAllFilters: typeof handleRemoveAllFilters,
+      filters: Filter[]
+    }]>
+    onclick?: MouseEventHandler<HTMLDivElement>
+    onkeydown?: KeyboardEventHandler<HTMLDivElement>
+  }
+
+  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'
+      ? ENGLISH_LABELS_MAPPER
+      : ITALIAN_LABELS_MAPPER,
+    drawerSpace = '85vh',
+    multiEditTabs,
+    onaddFilterClick,
+    onapplyFilter,
+    onremoveAllFilters,
+    onremoveFilter,
+    customSnippet: customInternalSnippet,
+    customChipSnippet,
+    appendSnippet,
+    contentSnippet,
+    onclick: onclickInternal,
+    onkeydown,
+  }: Props = $props();
+
+  let open: boolean = $state(false),
+    mobileOpen: boolean = $state(false),
+    activator: HTMLElement | undefined = $state(),
+    localMultiEditTabs = $derived.by(() => {
+      return filters.some(f => !multiEditTabs?.find(tab => tab.name == f.tabName)) 
+        ? undefined 
+        : multiEditTabs
+    }),
+    selectedTab: ComponentProps<typeof TabSwitcher>['selected'] = $state(),
+    selectedTabFilters: Filter[] = $derived.by(() => {
+      return selectedTab
         ? filters.filter(f => f.tabName == selectedTab)
-        : filters;
-});
-function handleAddFilterClick() {
-    if (onaddFilterClick) {
-        onaddFilterClick();
+        : filters
+    })
+
+  function handleAddFilterClick() {
+    if(onaddFilterClick) {
+      onaddFilterClick()
     }
-    open = true;
-    mobileOpen = true;
-}
-let filterOptions = $derived(filters.map((f) => {
+    open = true
+    mobileOpen = true
+  }
+
+  let filterOptions = $derived(filters.map((f) => {
     return {
-        title: f.label,
-        name: f.name
-    };
-}));
-let deletableFilterOptions = $derived(filters.map((f) => {
+      title: f.label,
+      name: f.name
+    }
+  }))
+
+  let deletableFilterOptions = $derived(filters.map((f) => {
     return {
-        title: f.label,
-        name: f.name,
-        appendIcon: f.active ? 'mdi-delete' : undefined
-    };
-}));
-let selected = $state();
-let focused = $state();
-$effect(() => {
-    if (!!focused && !open)
-        focused = undefined;
-});
-let filterOpened = $state('new');
-let filterOptionsListActivator = $state();
-let singleFilterActivator = $state();
-let singleFilterMenuAnchor = $state('right-center');
-let singleFilterMenuOpened = $state(false);
-let selectedFilter = $state();
-let selectedFilterIndex = $derived(filters.findIndex((f) => { return f.name === selected; }));
-$effect(() => {
-    selectedFilter = selected === undefined ? undefined : filters[selectedFilterIndex];
-});
-function handleFilterSelection(e, mobile = false) {
-    if (mobile) {
-        selected = e.detail.element.name;
-        singleFilterMenuOpened = true;
+      title: f.label,
+      name: f.name,
+      appendIcon: f.active ? 'mdi-delete' : undefined
     }
-    else {
-        singleFilterActivator = filterOptionsListActivator;
-        singleFilterMenuAnchor = 'right-center';
-        singleFilterMenuOpened = true;
-        selected = e.detail.element.name;
-        filterOpened = 'new';
+  }))
+
+  let selected: ArrayElement<NonNullable<ComponentProps<typeof SelectableVerticalList>['elements']>>['name'] | undefined = $state()
+  let focused: ArrayElement<NonNullable<ComponentProps<typeof SelectableVerticalList>['elements']>>['name'] | undefined = $state()
+  $effect(() => {
+    if(!!focused && !open) focused = undefined
+  })
+
+  let filterOpened: 'edit' | 'new' = $state('new')
+
+
+  let filterOptionsListActivator: HTMLElement | undefined = $state()
+  let singleFilterActivator:  HTMLElement | undefined = $state()
+  let singleFilterMenuAnchor: 'right-center' | 'bottom-center' = $state('right-center')
+  let singleFilterMenuOpened: boolean = $state(false)
+
+  let selectedFilter : Filter | undefined = $state()
+  let selectedFilterIndex = $derived(filters.findIndex((f) => { return f.name === selected }))
+  $effect(() => {
+    selectedFilter = selected === undefined ? undefined : filters[selectedFilterIndex]
+  })
+
+
+  function handleFilterSelection(e: Parameters<NonNullable<ComponentProps<typeof SelectableVerticalList>['onselect']>>[0], mobile: boolean = false) {
+    if(mobile) {
+      selected = e.detail.element.name
+      singleFilterMenuOpened = true;
+    } else {
+      singleFilterActivator = filterOptionsListActivator
+      singleFilterMenuAnchor = 'right-center'
+      singleFilterMenuOpened = true;
+      selected = e.detail.element.name
+      filterOpened = 'new'
     }
-    selectedTmpFilter = undefined;
-    let filter = filters.find(f => f.name === e.detail.element.name);
-    if (!!filter) {
-        if (filter.type === 'custom') {
-            customFilterApplyDisabled = filter.active === undefined || filter.active === false;
-        }
+    selectedTmpFilter = undefined
+
+    let filter = filters.find(f => f.name === e.detail.element.name)
+    if(!!filter) {
+      if(filter.type === 'custom') {
+        customFilterApplyDisabled = filter.active === undefined || filter.active === false
+      }
     }
-}
-function handleCancelFilterClick() {
-    open = false;
-    mobileOpen = false;
+  }
+
+  function handleCancelFilterClick() {
+    open = false
+    mobileOpen = false
     singleFilterMenuOpened = false;
-}
-function handleApplyFilterClick() {
-    if (!!selectedFilter && !!selectedTmpFilter) {
-        selectedFilter = { ...selectedTmpFilter };
-        selectedFilter.active = true;
-        filters[selectedFilterIndex] = selectedFilter;
-        open = false;
-        mobileOpen = false;
-        singleFilterMenuOpened = false;
-        if (onapplyFilter) {
-            onapplyFilter();
-        }
+  }
+
+  function handleApplyFilterClick() {
+    if(!!selectedFilter && !!selectedTmpFilter) {
+      selectedFilter = {...selectedTmpFilter}
+      selectedFilter.active = true
+      filters[selectedFilterIndex] = selectedFilter
+      open = false
+      mobileOpen = false
+      singleFilterMenuOpened = false;
+      if(onapplyFilter) {
+        onapplyFilter()
+      }
     }
-}
-let activeFilters = $derived(filters.filter((f) => f.active));
-function handleRemoveFilter(filter) {
-    let filterIndex = filters.findIndex((f) => f.name === filter.name);
-    let filterName = filter.name;
-    filters[filterIndex].active = false;
+  }
+
+  let activeFilters = $derived(filters.filter((f) => f.active))
+
+  function handleRemoveFilter(filter: { name: string }) {
+    let filterIndex = filters.findIndex((f) => f.name === filter.name)
+    let filterName = filter.name
+    filters[filterIndex].active = false
     if (tmpFilters[filterName]) {
-        tmpFilters[filterName].active = false;
+      tmpFilters[filterName].active = false
     }
-    if (Object.keys(filters[filterIndex]).includes('value')) {
+    if(Object.keys(filters[filterIndex]).includes('value')) {
+      //@ts-ignore
+      filters[filterIndex].value = undefined
+      if(!!tmpFilters[filterName] && Object.keys(tmpFilters[filterName]).includes('value')) {
         //@ts-ignore
-        filters[filterIndex].value = undefined;
-        if (!!tmpFilters[filterName] && Object.keys(tmpFilters[filterName]).includes('value')) {
-            //@ts-ignore
-            tmpFilters[filterName].value = undefined;
-        }
+        tmpFilters[filterName].value = undefined
+      }
     }
-    if (Object.keys(filters[filterIndex]).includes('from')) {
+    if(Object.keys(filters[filterIndex]).includes('from')) {
+      //@ts-ignore
+      filters[filterIndex].from = undefined
+      if(!!tmpFilters[filterName] && Object.keys(tmpFilters[filterName]).includes('from')) {
         //@ts-ignore
-        filters[filterIndex].from = undefined;
-        if (!!tmpFilters[filterName] && Object.keys(tmpFilters[filterName]).includes('from')) {
-            //@ts-ignore
-            tmpFilters[filterName].from = undefined;
-        }
+        tmpFilters[filterName].from = undefined
+      }
     }
-    if (Object.keys(filters[filterIndex]).includes('to')) {
+    if(Object.keys(filters[filterIndex]).includes('to')) {
+      //@ts-ignore
+      filters[filterIndex].to = undefined
+      if(!!tmpFilters[filterName] && Object.keys(tmpFilters[filterName]).includes('to')) {
         //@ts-ignore
-        filters[filterIndex].to = undefined;
-        if (!!tmpFilters[filterName] && Object.keys(tmpFilters[filterName]).includes('to')) {
-            //@ts-ignore
-            tmpFilters[filterName].to = undefined;
-        }
+        tmpFilters[filterName].to = undefined
+      }
     }
-    if (Object.keys(filters[filterIndex]).includes('values')) {
+    if(Object.keys(filters[filterIndex]).includes('values')) {
+      //@ts-ignore
+      filters[filterIndex].values = undefined
+      if(!!tmpFilters[filterName] && Object.keys(tmpFilters[filterName]).includes('values')) {
         //@ts-ignore
-        filters[filterIndex].values = undefined;
-        if (!!tmpFilters[filterName] && Object.keys(tmpFilters[filterName]).includes('values')) {
-            //@ts-ignore
-            tmpFilters[filterName].values = undefined;
-        }
+        tmpFilters[filterName].values = undefined
+      }
     }
-    singleFilterMenuOpened = false;
+    singleFilterMenuOpened = false
     filters = [...filters];
-    if (onremoveFilter) {
-        onremoveFilter({
-            detail: {
-                filter: filters[filterIndex]
-            }
-        });
+    if(onremoveFilter) {
+      onremoveFilter({
+        detail: {
+          filter: filters[filterIndex]
+        }
+      })
     }
-}
-let activeFiltersActivators = $state({});
-function handleActiveFilterClick(filter) {
-    singleFilterActivator = activeFiltersActivators[filter.name];
-    singleFilterMenuAnchor = 'bottom-center';
+  }
+
+  let activeFiltersActivators: Record<string, HTMLElement> = $state({})
+  function handleActiveFilterClick(filter: { name: string, type: 'custom' | string }) {
+    singleFilterActivator = activeFiltersActivators[filter.name]
+    singleFilterMenuAnchor = 'bottom-center'
     singleFilterMenuOpened = true;
-    mobileOpen = true;
-    selected = filter.name;
-    filterOpened = 'edit';
-    if (filter.type === 'custom') {
-        customFilterApplyDisabled = false;
+    mobileOpen=true
+    selected = filter.name
+    filterOpened = 'edit'
+
+    if(filter.type === 'custom') {
+      customFilterApplyDisabled = false
     }
-}
-function handleMobileBackTap() {
-    closeFilterMenu(0);
-}
-function closeFilterMenu(delay) {
+  }
+
+  function handleMobileBackTap() {
+    closeFilterMenu(0)
+  }
+
+  function closeFilterMenu(delay: number) {
     setTimeout(() => {
-        singleFilterMenuOpened = false;
-    }, delay);
-}
-function handleDeleteIconClick(event) {
-    let filterIndex = event.detail.index;
-    let name = filters[filterIndex].name;
-    handleRemoveFilter({ name });
-}
-function handleRemoveAllFilters(event) {
-    if (!!event)
-        event.stopPropagation();
-    for (let i = 0; i < filters.length; i += 1) {
-        filters[i].active = false;
-        if (Object.keys(filters[i]).includes('value')) {
-            //@ts-ignore
-            filters[i].value = undefined;
-        }
-        if (Object.keys(filters[i]).includes('from')) {
-            //@ts-ignore
-            filters[i].from = undefined;
-        }
-        if (Object.keys(filters[i]).includes('to')) {
-            //@ts-ignore
-            filters[i].to = undefined;
-        }
-        if (Object.keys(filters[i]).includes('values')) {
-            //@ts-ignore
-            filters[i].values = undefined;
-        }
-        singleFilterMenuOpened = false;
-    }
-    filters = filters;
-    tmpFilters = {};
-    customToBeInitialized = true;
-    if (onremoveAllFilters) {
-        onremoveAllFilters();
+      singleFilterMenuOpened = false
+    }, delay)
+  }
+
+  function handleDeleteIconClick(event: Parameters<NonNullable<ComponentProps<typeof SelectableVerticalList>['oniconClick']>>[0]) {
+    let filterIndex = event.detail.index
+    let name = filters[filterIndex].name
+    handleRemoveFilter({name})
+  }
+
+  function handleRemoveAllFilters(event?: Parameters<NonNullable<ComponentProps<typeof Icon>['onclick']>>[0]) {
+    if(!!event) event.stopPropagation()
+    for(let i = 0; i < filters.length; i += 1) {
+      filters[i].active = false
+      if(Object.keys(filters[i]).includes('value')) {
+        //@ts-ignore
+        filters[i].value = undefined
+      }
+      if(Object.keys(filters[i]).includes('from')) {
+        //@ts-ignore
+        filters[i].from = undefined
+      }
+      if(Object.keys(filters[i]).includes('to')) {
+        //@ts-ignore
+        filters[i].to = undefined
+      }
+      if(Object.keys(filters[i]).includes('values')) {
+        //@ts-ignore
+        filters[i].values = undefined
+      }
+      singleFilterMenuOpened = false
     }
-}
-function handleMultiEditApplyClick() {
-    open = false;
-    mobileOpen = false;
-    if (onapplyFilter) {
-        onapplyFilter();
+    filters = filters
+    tmpFilters = {}
+    customToBeInitialized = true
+    if(onremoveAllFilters) {
+      onremoveAllFilters()
     }
-}
-function handleMultiEditRemoveClick() {
-    handleRemoveAllFilters();
-    open = false;
-    mobileOpen = false;
-}
-let selectedTmpFilter = $state();
-let tmpFilters = $state({});
-function handleApplyMultiFilterClick() {
-    for (let i = 0; i < filters.length; i += 1) {
-        if (!!filters[i] && !!tmpFilters[filters[i].name]) {
-            filters[i] = { ...tmpFilters[filters[i].name] };
-            filters[i].active = filters[i].type !== 'custom' ? Validator.isValid(tmpFilters[filters[i].name]) : tmpFilters[filters[i].name].active;
-        }
+  }
+
+  function handleMultiEditApplyClick() {
+    open = false
+    mobileOpen = false
+    if(onapplyFilter) {
+      onapplyFilter()
     }
-    filters = filters;
-    handleMultiEditApplyClick();
-}
-function updateMultiFilterValues(filterName, newValue, newValid, mode) {
-    let filter = filters.find(f => f.name === filterName);
-    if (!filter)
-        throw new Error('cannot find filter with name ' + filterName);
-    if (!tmpFilters[filterName])
-        tmpFilters[filterName] = { ...filter };
-    let tmpFilter = tmpFilters[filterName];
-    if ('mode' in tmpFilter && !!mode) {
-        if (tmpFilter.type == 'date' && isDateMode(mode)) {
-            tmpFilter.mode = mode;
-        }
-        else if (tmpFilter.type == 'number' && isDateMode(mode)) {
-            tmpFilter.mode = mode;
-        }
-        else if (tmpFilter.type == 'string' && isStringMode(mode)) {
-            tmpFilter.mode = mode;
-        }
-        else if (tmpFilter.type == 'select' && isSelectMode(mode)) {
-            tmpFilter.mode = mode;
-        }
+  }
+
+  function handleMultiEditRemoveClick() {
+    handleRemoveAllFilters()
+    open = false
+    mobileOpen = false
+  }
+
+  let selectedTmpFilter: Filter | undefined = $state()
+
+  let tmpFilters: {[filterName: string]: Filter} = $state({})
+
+  function handleApplyMultiFilterClick() {
+    for(let i = 0; i < filters.length; i += 1) {
+      if(!!filters[i] && !!tmpFilters[filters[i].name]) {
+        filters[i] = {...tmpFilters[filters[i].name]}
+        filters[i].active = filters[i].type !== 'custom' ? Validator.isValid(tmpFilters[filters[i].name]) : tmpFilters[filters[i].name].active
+      }
     }
-    if (tmpFilter.type == 'select') {
-        tmpFilter.values = newValue;
+    filters = filters
+    handleMultiEditApplyClick()
+  }
+
+  function updateMultiFilterValues(filterName: string, newValue: any, newValid: boolean, mode?: NumberMode | StringMode | SelectMode | DateMode) {
+    let filter = filters.find(f => f.name === filterName)
+    if(!filter) throw new Error('cannot find filter with name ' + filterName)
+    if(!tmpFilters[filterName]) tmpFilters[filterName] = {...filter}
+    let tmpFilter = tmpFilters[filterName]
+    if('mode' in tmpFilter && !!mode) {
+      if(tmpFilter.type == 'date' && isDateMode(mode)){
+        tmpFilter.mode = mode
+      }
+      else if(tmpFilter.type == 'number' && isDateMode(mode)){
+        tmpFilter.mode = mode
+      }
+      else if(tmpFilter.type == 'string' && isStringMode(mode)){
+        tmpFilter.mode = mode
+      }
+      else if(tmpFilter.type == 'select' && isSelectMode(mode)){
+        tmpFilter.mode = mode
+      }
     }
-    else if ('mode' in tmpFilter && tmpFilter.mode == 'between') {
-        if (tmpFilter.type == 'date') {
-            if (newValue.from) {
-                tmpFilter.from = DateTime.fromJSDate(newValue.from).setLocale('it-IT').startOf('day').toJSDate();
-            }
-            if (newValue.to) {
-                tmpFilter.to = DateTime.fromJSDate(newValue.to).setLocale('it-IT').endOf('day').toJSDate();
-            }
+    if(tmpFilter.type == 'select') {
+      tmpFilter.values = newValue
+    } else if('mode' in tmpFilter && tmpFilter.mode == 'between') {
+      if(tmpFilter.type == 'date'){
+        if(newValue.from){
+          tmpFilter.from = DateTime.fromJSDate(newValue.from).setLocale('it-IT').startOf('day').toJSDate()
         }
-        else {
-            tmpFilter.from = newValue.from;
-            tmpFilter.to = newValue.to;
+        if(newValue.to){
+          tmpFilter.to = DateTime.fromJSDate(newValue.to).setLocale('it-IT').endOf('day').toJSDate()
         }
+      }
+      else {
+        tmpFilter.from = newValue.from
+        tmpFilter.to = newValue.to
+      }
+    } else {
+      tmpFilter.value = newValue
     }
-    else {
-        tmpFilter.value = newValue;
-    }
-    tmpFilter.active = newValid;
-}
-let customToBeInitialized = true;
-$effect(() => {
-    if (customToBeInitialized && !!tmpFilters)
-        initCustomTmpFilters();
-});
-function initCustomTmpFilters() {
-    let customFilters = filters.filter(f => f.type === 'custom');
-    for (const customFilter of customFilters) {
-        if (!tmpFilters[customFilter.name]) {
-            tmpFilters[customFilter.name] = { ...customFilter };
-        }
+    tmpFilter.active = newValid
+  }
+
+  let customToBeInitialized = true
+  $effect(() => {
+    if(customToBeInitialized && !!tmpFilters) initCustomTmpFilters()
+  })
+
+  function initCustomTmpFilters() {
+    let customFilters = filters.filter(f => f.type === 'custom')
+    for(const customFilter of customFilters) {
+      if(!tmpFilters[customFilter.name]) {
+        tmpFilters[customFilter.name] = { ...customFilter }
+      }
     }
-    customToBeInitialized = false;
-}
-let customFilterApplyDisabled = $state(true);
-function updateFunction(filterName, newValue, newValid) {
-    let tmpFilter = tmpFilters[filterName];
-    if (!!tmpFilter && tmpFilter.type == 'custom') {
-        tmpFilter.value = newValue;
-        tmpFilter.active = newValid;
-        selectedTmpFilter = { ...tmpFilter };
-        customFilterApplyDisabled = !newValid;
+    customToBeInitialized = false
+  }
+
+  let customFilterApplyDisabled: boolean = $state(true)
+  function updateFunction(filterName: string, newValue: any, newValid: boolean) {
+    let tmpFilter = tmpFilters[filterName]
+    if(!!tmpFilter && tmpFilter.type == 'custom') {
+      tmpFilter.value = newValue
+      tmpFilter.active = newValid
+      selectedTmpFilter = {...tmpFilter}
+      customFilterApplyDisabled = !newValid
     }
-}
-let moreItemsActivator = $state();
-function onclick(event, stopPropagation = false) {
-    if (stopPropagation) {
-        event.stopPropagation();
+  }
+
+  let moreItemsActivator: HTMLElement | undefined = $state()
+
+  function onclick(event: MouseEvent & {
+    currentTarget: EventTarget & HTMLDivElement;
+  }, stopPropagation: boolean = false) {
+    if(stopPropagation){
+      event.stopPropagation()
     }
-    if (onclickInternal) {
-        onclickInternal(event);
+    if(onclickInternal) {
+      onclickInternal(event)
     }
-}
+  }
 </script>
 
 <MediaQuery>