@likable-hair/svelte 4.2.5 → 4.3.0

package/dist/components/composed/progress/HorizontalStackedProgress.svelte

@@ -1,43 +1,81 @@
-<script lang="ts" module>export function isProgressItem(obj) {
-    return ((obj.label === undefined || typeof obj.label === 'string') &&
-        (obj.color === undefined || typeof obj.color === 'string') &&
-        typeof obj.value === 'number');
-}
+<script lang="ts" module>
+  export type ProgressItem = {
+    label?: string,
+    color?: string,
+    value: number,
+    valueLabel?: string | number
+  };
+
+  export function isProgressItem(obj: any): obj is ProgressItem {
+    return (
+      (obj.label === undefined || typeof obj.label === 'string') &&
+      (obj.color === undefined || typeof obj.color === 'string') &&
+      typeof obj.value === 'number'
+    );
+  }
 </script>
 
-<script lang="ts">import './HorizontalStackedProgress.css';
-import ProgressBar from "../../simple/progress/ProgressBar.svelte";
-let { progresses = [], labelVisible = true, labelValueVisible = true, labelTextVisible = true, legendVisible = false, legendValueVisible = true, legendTextVisible = true, hideLabelUnderPercentage, tooltipVisible = true, } = $props();
-let colors = [
+<script lang="ts">
+  import './HorizontalStackedProgress.css'
+  import ProgressBar from "../../simple/progress/ProgressBar.svelte";
+
+  interface Props {
+    progresses?: (number | ProgressItem)[];
+    labelVisible?: boolean;
+    labelValueVisible?: boolean;
+    labelTextVisible?: boolean;
+    legendVisible?: boolean;
+    legendValueVisible?: boolean;
+    legendTextVisible?: boolean;
+    hideLabelUnderPercentage?: number;
+    tooltipVisible?: boolean
+  }
+
+  let {
+    progresses = [],
+    labelVisible = true,
+    labelValueVisible = true,
+    labelTextVisible = true,
+    legendVisible = false,
+    legendValueVisible = true,
+    legendTextVisible = true,
+    hideLabelUnderPercentage,
+    tooltipVisible = true,
+  }: Props = $props();
+
+  let colors = [
     'rgb(var(--global-color-primary-500))',
     'rgb(var(--global-color-primary-300))',
     'rgb(var(--global-color-primary-700))',
     'rgb(var(--global-color-primary-500), .5)',
     'rgb(var(--global-color-primary-600), .5)',
     'rgb(var(--global-color-primary-700), .5)'
-];
-let total = $derived(progresses.reduce((p, c, i, a) => {
-    if (isProgressItem(c)) {
-        return p + c.value;
-    }
-    else {
-        return p + c;
+  ]
+
+  let total = $derived(progresses.reduce<number>((p, c, i, a) => {
+    if(isProgressItem(c)) {
+      return p + c.value
+    } else {
+      return p + c
     }
-}, 0));
-let progressesItems = $derived(progresses.map((p, i) => {
-    let item;
-    let value = isProgressItem(p) ? p.value : p;
+  }, 0))
+
+  let progressesItems = $derived(progresses.map((p, i) => {
+    let item: ProgressItem & { percentage: number }
+    let value = isProgressItem(p) ? p.value : p
     // x : 100 = value : total
-    let percentage = Number(((100 * value) / total).toFixed(2));
-    let color = isProgressItem(p) ? p.color : colors[i % colors.length];
+    let percentage = Number(((100 * value) / total).toFixed(2))
+    let color = isProgressItem(p) ? p.color : colors[i % colors.length]
+
     item = {
-        ...(isProgressItem(p) ? p : {}),
-        color,
-        value,
-        percentage
-    };
-    return item;
-}).filter(p => p.value !== 0));
+      ...(isProgressItem(p) ? p : {}),
+      color,
+      value,
+      percentage
+    }
+
+    return item
+  }).filter(p => p.value !== 0))
 </script>
 
 <div class="horizontal-stacked-progress">

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

@@ -1,98 +1,133 @@
-<script lang="ts">import { FilterEditor, Icon } from "../../..";
-import MediaQuery from "../../simple/common/MediaQuery.svelte";
-import {} from "svelte";
-let { filters = [], lang = "en", mAndDown = false, labelsMapper = lang == 'en' ? {
-    equal: { extended: "equal to", short: "equal" },
-    like: { short: "includes" },
-    ilike: { short: "includes" },
-    contains: { short: "contains" },
-    greater: { short: "greater", extended: "greater than" },
-    lower: { short: "lower", extended: "lower than" },
-    between: { short: "between", extended: "is between" },
-    different: { short: "different", extended: "different from" },
-} : {
-    equal: { extended: "uguale a", short: "uguale" },
-    like: { short: "include" },
-    ilike: { short: "include" },
-    contains: { short: "contiene" },
-    greater: { short: "maggiore", extended: "maggiore di" },
-    lower: { short: "minore", extended: "minore di" },
-    between: { short: "compreso", extended: "è compreso tra" },
-    different: { short: "diverso", extended: "diverso da" },
-}, onchange, updateMultiFilterValues, customSnippet: customSnippetInternal, } = $props();
-let selectedFilter = $state();
-let tmpFilters = $state(filters.reduce((acc, f) => {
+<script lang="ts">
+	import { FilterEditor, Icon } from "../../..";
+	import MediaQuery from "../../simple/common/MediaQuery.svelte";
+	import type { DateMode, Filter, NumberMode, SelectMode, StringMode } from "../../../utils/filters/filters";
+	import { type Snippet } from "svelte"
+
+	interface Props {
+    filters?: Filter[];
+    lang?: "it" | "en";
+    mAndDown?: boolean;
+		labelsMapper?: LabelMapper,
+		onchange?: (event: {
+			detail: {
+				filter: Filter
+			}
+		}) => void
+		customSnippet?: Snippet<[{
+			filter: Filter | undefined,
+			mAndDown: boolean,
+			updateCustomFilterValues: typeof updateCustomFilterValues
+		}]>
+		updateMultiFilterValues?: (filterName: string, newValue: any, newValid: boolean, mode?: NumberMode | StringMode | SelectMode | DateMode) => void
+  }
+
+  let {
+    filters = [],
+    lang = "en",
+    mAndDown = false,
+		labelsMapper = lang == 'en' ? {
+			equal: { extended: "equal to", short: "equal" },
+			like: { short: "includes" },
+			ilike: { short: "includes" },
+			contains: { short: "contains" },
+			greater: { short: "greater", extended: "greater than" },
+			lower: { short: "lower", extended: "lower than" },
+			between: { short: "between", extended: "is between" },
+			different: { short: "different", extended: "different from" },
+		} : {
+			equal: { extended: "uguale a", short: "uguale" },
+			like: { short: "include" },
+			ilike: { short: "include" },
+			contains: { short: "contiene" },
+			greater: { short: "maggiore", extended: "maggiore di" },
+			lower: { short: "minore", extended: "minore di" },
+			between: { short: "compreso", extended: "è compreso tra" },
+			different: { short: "diverso", extended: "diverso da" },
+		},
+		onchange,
+		updateMultiFilterValues,
+		customSnippet: customSnippetInternal,
+  }: Props = $props();	
+
+	let selectedFilter: Filter | undefined = $state();
+	let tmpFilters: { [filterName: string]: Filter } = $state(filters.reduce((acc, f) => {
     if (f.active) {
-        acc[f.name] = f;
+        acc[f.name] = f; 
     }
     return acc;
-}, {}));
-function selectFilter(filter) {
-    selectedFilter = filter === selectedFilter ? undefined : filter;
-}
-function handleKeyPress(event, filter) {
-    if (event.key === "Enter" || event.key === " ") {
-        selectFilter(filter);
-    }
-}
-function handleFilterChange() {
-    if (!!selectedFilter) {
-        if (!!onchange) {
-            onchange({
-                detail: {
-                    filter: tmpFilters[selectedFilter.name]
-                }
-            });
-        }
-        filters = filters.map(f => {
-            if (f.name === selectedFilter?.name) {
-                return tmpFilters[selectedFilter.name];
-            }
-            return f;
-        });
-    }
-}
-function isActiveFilter(filter) {
-    let newValue = {}, newValid = false;
-    if (filter.type == 'select') {
-        newValue = filter.values;
-        if (!!newValue && newValue.length > 0) {
-            newValid = true;
-        }
-    }
-    else if ('mode' in filter && filter.mode == 'between') {
-        newValue.to = filter.to;
-        newValue.from = filter.from;
-        if (newValue.from != undefined || newValue.to != undefined) {
-            newValid = true;
-        }
-    }
-    else if (filter.type == 'custom') {
-        newValue = filter.value;
-        if ((Array.isArray(newValue) && newValue.length > 0) || (!Array.isArray(newValue) && newValue != undefined)) {
-            newValid = true;
-        }
-    }
-    else {
-        newValue = filter.value;
-        if (newValue != undefined) {
-            newValid = true;
-        }
-    }
-    return newValid;
-}
-function updateCustomFilterValues(filterName, newValue, newValid, mode) {
-    let filter = filters.find(f => f.name === filterName);
-    if (!filter)
-        throw new Error('cannot find filter with name ' + filterName);
-    if (filter.type != 'custom')
-        throw new Error('filter is not custom');
-    filter.value = newValue;
-    filter.active = newValid;
-    if (updateMultiFilterValues) {
-        updateMultiFilterValues(filterName, newValue, newValid, mode);
+	}, {} as { [filterName: string]: Filter }))
+
+	type LabelMapper = {
+		[label: string]: { extended?: string; short: string };
+	};
+
+	function selectFilter(filter: Filter) {
+		selectedFilter = filter === selectedFilter ? undefined : filter;
+	}
+	
+	function handleKeyPress(event: any, filter: Filter) {
+		if (event.key === "Enter" || event.key === " ") {
+			selectFilter(filter);
+		}
+	}
+
+	function handleFilterChange() {
+		if(!!selectedFilter){
+			if(!!onchange){
+				onchange({
+					detail: {
+						filter: tmpFilters[selectedFilter.name]
+					}
+				})
+			}
+			filters = filters.map(f => {
+				if (f.name === selectedFilter?.name) {
+					return tmpFilters[selectedFilter.name]
+				}
+				return f
+			})
+		}
+	}
+
+	function isActiveFilter(filter: Filter) {
+    let newValue: any = {},
+      newValid: boolean = false
+    if(filter.type == 'select') {
+      newValue = filter.values 
+      if(!!newValue && newValue.length > 0) {
+        newValid = true
+      }
+    } else if('mode' in filter && filter.mode == 'between') {
+      newValue.to = filter.to
+      newValue.from = filter.from
+      if(newValue.from != undefined || newValue.to != undefined) {
+        newValid = true
+			}
+    } else if (filter.type == 'custom') {
+      newValue = filter.value
+			if ((Array.isArray(newValue) && newValue.length > 0) || (!Array.isArray(newValue) && newValue != undefined)) {
+				newValid = true;
+			}
+		} else {
+      newValue = filter.value
+      if(newValue != undefined) {
+        newValid = true
+      }
     }
-}
+		return newValid
+  }
+
+	function updateCustomFilterValues(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(filter.type != 'custom') throw new Error('filter is not custom')
+		filter.value = newValue
+		filter.active = newValid
+		if(updateMultiFilterValues){
+			updateMultiFilterValues(filterName, newValue, newValid, mode)
+		}
+  }
 </script>
 
 <MediaQuery>

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

@@ -1,119 +1,179 @@
-<script lang="ts">import Dropdown from "../forms/Dropdown.svelte";
-import { GENERIC_MODES, SELECT_MODES, STRING_MODES } from '../../../utils/filters/filters';
-import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
-import DatePickerTextField from "../forms/DatePickerTextField.svelte";
-import Validator from "../../../utils/filters/validator";
-import Autocomplete, {} from "../../simple/forms/Autocomplete.svelte";
-import Checkbox from "../../simple/forms/Checkbox.svelte";
-import Icon from "../../simple/media/Icon.svelte";
-import ToggleList from "../forms/ToggleList.svelte";
-import { tick } from "svelte";
-let { filter = $bindable(), lang = 'en', betweenFromLabel = lang === 'en' ? "From" : "Da", betweenToLabel = lang === 'en' ? "To" : "A", labelsMapper, forceApplyValid = false, editFilterMode = 'one-edit', tmpFilter = $bindable(), mobile = false, onchange, onclick: onclickInternal, onkeypress, customSnippet, filterActionsSnippet, } = $props();
-let advancedModeOptions = $state(), advancedModeSelectedOptions = $state([]);
-function closeDropDown() {
-    dropdownOpened = false;
-}
-$effect(() => {
-    if (!!filter && !tmpFilter) {
-        tick().then(() => {
-            tmpFilter = filter === undefined ? undefined : { ...filter };
-            closeDropDown();
-        });
+<script lang="ts">
+  import type { Filter, NumberMode, SelectMode, StringMode } from "../../../utils/filters/filters";
+  import Dropdown from "../forms/Dropdown.svelte";
+  import { GENERIC_MODES, SELECT_MODES, STRING_MODES } from '../../../utils/filters/filters';
+  import type { DateMode } from "../../../utils/filters/filters";
+  import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
+  import DatePickerTextField from "../forms/DatePickerTextField.svelte";
+  import Validator from "../../../utils/filters/validator";
+  import Autocomplete, { type Item } from "../../simple/forms/Autocomplete.svelte";
+  import Checkbox from "../../simple/forms/Checkbox.svelte";
+  import type { LabelMapper } from "./Filters.svelte";
+  import Icon from "../../simple/media/Icon.svelte";
+  import ToggleList from "../forms/ToggleList.svelte";
+  import type { KeyboardEventHandler, MouseEventHandler } from "svelte/elements";
+  import { tick, type Snippet } from "svelte";
+
+  interface Props {
+    filter?: Filter;
+    lang?: 'en' | 'it';
+    betweenFromLabel?: string;
+    betweenToLabel?: string;
+    labelsMapper: LabelMapper;
+    forceApplyValid?: boolean;
+    editFilterMode?: 'one-edit' | 'multi-edit';
+    tmpFilter?: Filter;
+    mobile?: boolean;
+    onchange?: (event:{
+      detail: {
+        filter: Filter | undefined,
+        tmpFilter: Filter | undefined
+      }
+    }) => void
+    onclick?: MouseEventHandler<HTMLDivElement>
+    onkeypress?: KeyboardEventHandler<HTMLDivElement>
+    customSnippet?: Snippet<[{
+      filter: typeof tmpFilter
+    }]>
+    filterActionsSnippet?: Snippet<[{
+      applyFilterDisabled: typeof applyFilterDisabled,
+      filter: typeof tmpFilter
+    }]>
+  }
+
+  let {
+    filter = $bindable(),
+    lang = 'en',
+    betweenFromLabel = lang === 'en' ? "From" : "Da",
+    betweenToLabel = lang === 'en' ? "To" : "A",
+    labelsMapper,
+    forceApplyValid = false,
+    editFilterMode = 'one-edit',
+    tmpFilter = $bindable(),
+    mobile = false,
+    onchange,
+    onclick: onclickInternal,
+    onkeypress,
+    customSnippet,
+    filterActionsSnippet,
+  }: Props = $props();
+
+  let advancedModeOptions: Item[] | undefined = $state(),
+    advancedModeSelectedOptions: Item[] = $state([])
+
+  function closeDropDown() {
+    dropdownOpened = false
+  }
+
+  $effect(() => {
+    if(!!filter && !tmpFilter) {
+      tick().then(() => {
+        tmpFilter = filter === undefined ? undefined : {...filter}
+        closeDropDown();
+      });
     }
-    if (!!tmpFilter && ['string', 'number', 'date', 'select'].includes(tmpFilter.type) && Object.keys(tmpFilter).includes('mode')) {
-        //@ts-ignore
-        if ((tmpFilter.mode == 'between' && tmpFilter.from !== undefined && tmpFilter.to !== undefined) || tmpFilter.value !== undefined || (tmpFilter.type == 'select' && tmpFilter.values !== undefined && tmpFilter.values.length > 0)) {
-            advancedModeSelectedOptions = [{
-                    //@ts-ignore
-                    value: tmpFilter.mode, label: labelsMapper[tmpFilter.mode].short || tmpFilter.mode
-                }];
-        }
+    
+    if(!!tmpFilter && ['string', 'number', 'date', 'select'].includes(tmpFilter.type) && Object.keys(tmpFilter).includes('mode')) {
+      //@ts-ignore
+      if((tmpFilter.mode == 'between' && tmpFilter.from !== undefined && tmpFilter.to !== undefined) || tmpFilter.value !== undefined || (tmpFilter.type == 'select' && tmpFilter.values !== undefined && tmpFilter.values.length > 0)) {
+        advancedModeSelectedOptions = [{
+          //@ts-ignore
+          value: tmpFilter.mode, label: labelsMapper[tmpFilter.mode].short || tmpFilter.mode
+        }]
+      }
     }
-});
-$effect(() => {
-    if (!!tmpFilter) {
-        let modes;
-        if (tmpFilter.type == 'string') {
-            modes = STRING_MODES;
-        }
-        else if (tmpFilter.type == 'date') {
-            modes = GENERIC_MODES;
-        }
-        else if (tmpFilter.type == 'number') {
-            modes = GENERIC_MODES;
-        }
-        else if (tmpFilter.type == 'select') {
-            modes = SELECT_MODES;
-        }
-        else if (tmpFilter.type == 'bool') {
-            modes = undefined;
-        }
-        if (!!modes) {
-            advancedModeOptions = modes.map(mode => {
-                return {
-                    value: mode,
-                    label: labelsMapper[mode].short || mode
-                };
-            });
-        }
+  }) 
+
+  $effect(() => {
+    if(!!tmpFilter) {
+      let modes
+      if(tmpFilter.type == 'string') {
+        modes = STRING_MODES
+      } else if(tmpFilter.type == 'date') {
+        modes = GENERIC_MODES
+      } else if(tmpFilter.type == 'number') {
+        modes = GENERIC_MODES
+      } else if(tmpFilter.type == 'select') {
+        modes = SELECT_MODES
+      } else if(tmpFilter.type == 'bool') {
+        modes = undefined
+      }
+  
+      if(!!modes) {
+        advancedModeOptions = modes.map(mode => {
+          return {
+            value: mode,
+            label: labelsMapper[mode].short || mode
+          }
+        })
+      }
     }
-});
-$effect(() => {
-    if (!tmpFilter?.advanced) {
-        advancedModeSelectedOptions = [];
+  }) 
+
+  $effect(() => {
+    if(!tmpFilter?.advanced) {
+      advancedModeSelectedOptions = []
     }
-});
-let dropdownOpened = $state(false), 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 (advancedModeSelectedOptions.length > 0 && !!tmpFilter) {
-        if (tmpFilter.type == 'date')
-            tmpFilter.mode = advancedModeSelectedOptions[0].value;
-        else if (tmpFilter.type == 'number')
-            tmpFilter.mode = advancedModeSelectedOptions[0].value;
-        else if (tmpFilter.type == 'string')
-            tmpFilter.mode = advancedModeSelectedOptions[0].value;
-        else if (tmpFilter.type == 'select')
-            tmpFilter.mode = advancedModeSelectedOptions[0].value;
+  }) 
+
+  let dropdownOpened: boolean = $state(false),
+    calendarOpened: boolean = $state(false),
+    calendarOpened2: boolean = $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(advancedModeSelectedOptions.length > 0 && !!tmpFilter) {
+      if(tmpFilter.type == 'date') tmpFilter.mode = advancedModeSelectedOptions[0].value as DateMode
+      else if(tmpFilter.type == 'number') tmpFilter.mode = advancedModeSelectedOptions[0].value as NumberMode
+      else if(tmpFilter.type == 'string') tmpFilter.mode = advancedModeSelectedOptions[0].value as StringMode
+      else if(tmpFilter.type == 'select') tmpFilter.mode = advancedModeSelectedOptions[0].value as SelectMode
     }
+
     dropdownOpened = false;
-    handleChangeValue();
-}
-let applyFilterDisabled = $derived(!Validator.isValid(tmpFilter) && !forceApplyValid);
-$effect.pre(() => {
-    if (!!tmpFilter && tmpFilter.type == 'bool') {
-        if (tmpFilter.value === undefined) {
-            tmpFilter.value = false;
-        }
+    handleChangeValue()
+  }
+
+  let applyFilterDisabled = $derived(!Validator.isValid(tmpFilter) && !forceApplyValid)
+
+  $effect.pre(() => {
+    if(!!tmpFilter && tmpFilter.type == 'bool') {
+      if(tmpFilter.value === undefined) {
+        tmpFilter.value = false
+      }
     }
-});
-$effect.pre(() => {
-    if (!!tmpFilter && tmpFilter.type == 'select') {
-        if (tmpFilter.values === undefined) {
-            tmpFilter.values = [];
-        }
+  })
+
+  $effect.pre(() => {
+    if(!!tmpFilter && tmpFilter.type == 'select') {
+      if(tmpFilter.values === undefined) {
+        tmpFilter.values = []
+      }
     }
-});
-function handleChangeValue(isCalendarOpened = false) {
-    calendarOpened = isCalendarOpened;
-    calendarOpened2 = isCalendarOpened;
-    if (onchange) {
-        onchange({
-            detail: {
-                filter,
-                tmpFilter
-            }
-        });
+  })
+  
+  function handleChangeValue(isCalendarOpened = false) {  
+    calendarOpened = isCalendarOpened
+    calendarOpened2 = isCalendarOpened
+    if(onchange) {
+      onchange({
+        detail: {
+          filter,
+          tmpFilter
+        }
+      })
     }
-}
-function onclick(event) {
-    event.stopPropagation();
-    if (onclickInternal) {
-        onclickInternal(event);
+  }
+
+  function onclick(event: MouseEvent & {
+    currentTarget: EventTarget & HTMLDivElement;
+  }) {
+    event.stopPropagation()
+    if(onclickInternal) {
+      onclickInternal(event)
     }
-}
+  }
 </script>
 
 
@@ -133,8 +193,8 @@ function onclick(event) {
               openingId="advanced-filter"
               mobileDrawer={mobile}
               {lang}
-              minWidth={'100px'}
-              height={'100%'}
+              minWidth="100px"
+              height="100%"
               --button-padding="10px 12px"
               --button-border='var(--dropdown-button-border)'
               --button-background-color='var(--dropdown-button-background-color)'
@@ -215,7 +275,7 @@ function onclick(event) {
                 mobileDrawer={mobile}
                 onchange={() => handleChangeValue()}
                 placeholder={editFilterMode == 'one-edit' ? tmpFilter?.label : undefined}
-                minWidth={''}
+                minWidth=""
                 ></Autocomplete>
             </div>
           {:else if tmpFilter.type === "select" && (tmpFilter.view === 'toggle')}