@likable-hair/svelte 3.3.21 → 3.3.22

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

@@ -1,4 +1,3 @@
-import { SvelteComponent } from "svelte";
 export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
 export type LabelMapper = {
     [label: string]: {
@@ -10,56 +9,61 @@ import './Filters.css';
 import '../../../css/main.css';
 import { type DateMode, type Filter, type NumberMode, type SelectMode, type StringMode } from '../../../utils/filters/filters';
 import type { Locale } from '../../simple/dates/utils';
-declare const __propDef: {
-    props: {
-        filters?: Filter[] | undefined;
-        lang?: "it" | "en" | undefined;
-        addFilterLabel?: string | undefined;
-        cancelFilterLabel?: string | undefined;
-        applyFilterLabel?: string | undefined;
-        showActiveFilters?: boolean | undefined;
-        filterTitleLabel?: string | undefined;
-        dateLocale?: Locale | undefined;
-        betweenSeparator?: string | undefined;
-        trueString?: string | undefined;
-        falseString?: string | undefined;
-        editFilterMode?: "one-edit" | "multi-edit" | undefined;
-        labelsMapper?: LabelMapper | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        click: MouseEvent;
-        keydown: KeyboardEvent;
-        addFilterClick: CustomEvent<undefined>;
-        applyFilter: CustomEvent<undefined>;
-        removeFilter: CustomEvent<{
-            filter: Filter;
-        }>;
-        removeAllFilters: CustomEvent<undefined>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+declare const Filters: $$__sveltets_2_IsomorphicComponent<{
+    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;
+}, {
+    click: MouseEvent;
+    keydown: KeyboardEvent;
+    addFilterClick: CustomEvent<undefined>;
+    applyFilter: CustomEvent<undefined>;
+    removeFilter: CustomEvent<{
+        filter: Filter;
+    }>;
+    removeAllFilters: CustomEvent<undefined>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'custom-chip': {
+        filter: Filter;
     };
-    slots: {
-        'custom-chip': {
-            filter: Filter;
-        };
-        append: {};
-        custom: {
-            slot: string;
-            updateFunction: (filterName: string, newValue: any, newValid: boolean) => void;
-            mAndDown: boolean;
-            filter: Filter;
-        };
-        content: {
-            mAndDown: boolean;
-            updateMultiFilterValues: (filterName: string, newValue: any, newValid: boolean, mode?: NumberMode | StringMode | SelectMode | DateMode) => void;
-            handleRemoveAllFilters: (e?: MouseEvent) => void;
-            filters: Filter[];
-        };
+    append: {};
+    custom: {
+        slot: string;
+        updateFunction: (filterName: string, newValue: any, newValid: boolean) => void;
+        mAndDown: boolean;
+        filter: Filter;
     };
-};
-export type FiltersProps = typeof __propDef.props;
-export type FiltersEvents = typeof __propDef.events;
-export type FiltersSlots = typeof __propDef.slots;
-export default class Filters extends SvelteComponent<FiltersProps, FiltersEvents, FiltersSlots> {
-}
-export {};
+    content: {
+        mAndDown: boolean;
+        updateMultiFilterValues: (filterName: string, newValue: any, newValid: boolean, mode?: NumberMode | StringMode | SelectMode | DateMode) => void;
+        handleRemoveAllFilters: (e?: MouseEvent) => void;
+        filters: Filter[];
+    };
+}, {}, string>;
+type Filters = InstanceType<typeof Filters>;
+export default Filters;

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

@@ -1,45 +1,83 @@
-<script>import "../../../css/main.css";
-import "./GlobalSearchTextField.css";
-import Dialog from "../../simple/dialogs/Dialog.svelte";
-import { createEventDispatcher, onMount } from "svelte";
-import SearchBar from "./SearchBar.svelte";
-import Keyboarder, {} from "../../../utils/keyboarder";
-import SearchResults, {} from "./SearchResults.svelte";
-let clazz = {};
-export { clazz as class };
-export let searchButtonText = "Search", searchDialogOpened = false, transitionDuration = ".8s", searcher = () => Promise.resolve([]);
-let searchBarInput, searchText = void 0, searchResults = void 0, searchLoading = false, searchBarFocused = false;
-let dispatch = createEventDispatcher();
-onMount(() => {
-  let handler = (params) => {
-    if ((params.meta || params.ctrl) && params.key == "k") {
-      toggleSearchDialog();
+<script lang="ts">
+  import '../../../css/main.css'
+  import './GlobalSearchTextField.css'
+  import Dialog from '../../simple/dialogs/Dialog.svelte'
+  import { createEventDispatcher, onMount } from 'svelte';
+  import SearchBar from './SearchBar.svelte';
+  import Keyboarder, { type CallbackFunction } from '../../../utils/keyboarder';
+  import SearchResults, { type Result } from './SearchResults.svelte';
+
+  let clazz: {
+    container?: string,
+    button?: string,
+    shortcut?: string
+  } = {};
+	export { clazz as class };
+
+  /* 
+    Styles:
+    
+    --global-search-text-field-ring-color
+    --global-search-text-field-hover-ring-color
+    --global-search-text-field-color
+    --global-search-text-field-width
+    --global-search-text-field-max-width
+    --global-search-text-field-height
+    --global-search-text-field-background-color
+    --global-search-text-field-padding
+    --global-search-text-field-font-size
+  */
+
+  export let searchButtonText: string = "Search",
+    searchDialogOpened: boolean = false,
+    transitionDuration: string = ".8s",
+    searcher: (params: { searchText: string }) => Promise<Result[] | undefined> = () => Promise.resolve([])
+
+    let searchBarInput: HTMLElement,
+      searchText: string | undefined = undefined,
+      searchResults: Result[] | undefined = undefined,
+      searchLoading: boolean = false,
+      searchBarFocused: boolean = false
+
+    let dispatch = createEventDispatcher<{
+      'toggle-search-dialog': {
+        opened: boolean
+      }
+    }>()
+
+    onMount(() => {
+      let handler: CallbackFunction = (params) => {
+        if((params.meta || params.ctrl) && params.key == 'k') {
+          toggleSearchDialog()
+        }
+      }
+
+      Keyboarder.on(handler)
+
+      return () => {
+        Keyboarder.off(handler)
+      }
+    })
+
+    function handleKeydown(event: KeyboardEvent) {
+      if(event.key == 'ArrowDown' || event.key == 'ArrowUp') event.preventDefault()
+    }
+
+    function toggleSearchDialog()  {
+      searchDialogOpened = !searchDialogOpened
+      if(searchDialogOpened) searchBarInput.focus()
+      dispatch('toggle-search-dialog', { opened: searchDialogOpened })
+    }
+
+    async function search() {
+      if(!!searchText) {
+        searchLoading = true
+        searchResults = await searcher({
+          searchText
+        })
+        searchLoading = false
+      }
     }
-  };
-  Keyboarder.on(handler);
-  return () => {
-    Keyboarder.off(handler);
-  };
-});
-function handleKeydown(event) {
-  if (event.key == "ArrowDown" || event.key == "ArrowUp")
-    event.preventDefault();
-}
-function toggleSearchDialog() {
-  searchDialogOpened = !searchDialogOpened;
-  if (searchDialogOpened)
-    searchBarInput.focus();
-  dispatch("toggle-search-dialog", { opened: searchDialogOpened });
-}
-async function search() {
-  if (!!searchText) {
-    searchLoading = true;
-    searchResults = await searcher({
-      searchText
-    });
-    searchLoading = false;
-  }
-}
 </script>
 
 <div class={clazz.container || ''}>

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

@@ -1,45 +1,49 @@
-import { SvelteComponent } from "svelte";
 import '../../../css/main.css';
 import './GlobalSearchTextField.css';
 import { type Result } from './SearchResults.svelte';
-declare const __propDef: {
-    props: {
-        class?: {
-            container?: string | undefined;
-            button?: string | undefined;
-            shortcut?: string | undefined;
-        } | undefined;
-        searchButtonText?: string | undefined;
-        searchDialogOpened?: boolean | undefined;
-        transitionDuration?: string | undefined;
-        searcher?: ((params: {
-            searchText: string;
-        }) => Promise<Result[] | undefined>) | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        select: CustomEvent<{
-            element: import("../../simple/lists/SelectableVerticalList.svelte").Element;
-        }>;
-        'toggle-search-dialog': CustomEvent<{
-            opened: boolean;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+declare const GlobalSearchTextField: $$__sveltets_2_IsomorphicComponent<{
+    class?: {
+        container?: string;
+        button?: string;
+        shortcut?: string;
     };
-    slots: {
-        'search-button': {
-            toggleSearchDialog: () => void;
-        };
-        'search-button-icon': {};
-        'search-button-text': {};
-        'search-button-shortcut': {};
-        'search-bar': {};
-        'search-results': {};
+    searchButtonText?: string;
+    searchDialogOpened?: boolean;
+    transitionDuration?: string;
+    searcher?: (params: {
+        searchText: string;
+    }) => Promise<Result[] | undefined>;
+}, {
+    select: CustomEvent<{
+        element: import("../../simple/lists/SelectableVerticalList.svelte").Element;
+    }>;
+    'toggle-search-dialog': CustomEvent<{
+        opened: boolean;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'search-button': {
+        toggleSearchDialog: () => void;
     };
-};
-export type GlobalSearchTextFieldProps = typeof __propDef.props;
-export type GlobalSearchTextFieldEvents = typeof __propDef.events;
-export type GlobalSearchTextFieldSlots = typeof __propDef.slots;
-export default class GlobalSearchTextField extends SvelteComponent<GlobalSearchTextFieldProps, GlobalSearchTextFieldEvents, GlobalSearchTextFieldSlots> {
-}
-export {};
+    'search-button-icon': {};
+    'search-button-text': {};
+    'search-button-shortcut': {};
+    'search-bar': {};
+    'search-results': {};
+}, {}, string>;
+type GlobalSearchTextField = InstanceType<typeof GlobalSearchTextField>;
+export default GlobalSearchTextField;

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

@@ -1,116 +1,158 @@
-<script>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 Button from "../../simple/buttons/Button.svelte";
-import { createEventDispatcher } from "svelte";
-import Validator from "../../../utils/filters/validator";
-import SelectableVerticalList, {} from "../../simple/lists/SelectableVerticalList.svelte";
-import Icon from "../../simple/media/Icon.svelte";
-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";
-export let filter = void 0, lang = "en", backIcon = "mdi-arrow-left", betweenFromLabel = lang == "en" ? "From" : "Da", betweenToLabel = lang == "en" ? "To" : "A", labelsMapper, forceApplyValid = false, tmpFilter = void 0;
-let dispatch = createEventDispatcher();
-let step;
-function initTmpFilter() {
-  tmpFilter = filter === void 0 ? void 0 : { ...filter };
-  if (!!tmpFilter && tmpFilter.advanced) {
-    if (["string", "number", "date", "select"].includes(tmpFilter.type) && Object.keys(tmpFilter).includes("mode")) {
-      if (tmpFilter.mode == "between" && tmpFilter.from !== void 0 && tmpFilter.to !== void 0 || tmpFilter.value !== void 0 || tmpFilter.type == "select" && tmpFilter.values !== void 0 && tmpFilter.values.length > 0) {
-        step = "editor";
-        advancedModeSelectedOption = tmpFilter.mode;
+<script lang="ts">
+  import type { Filter, NumberMode, SelectMode, StringMode } from "../../../utils/filters/filters";
+  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 Button from "../../simple/buttons/Button.svelte";
+  import { createEventDispatcher } from "svelte";
+  import Validator from "../../../utils/filters/validator";
+  import SelectableVerticalList, { type Element } from "../../simple/lists/SelectableVerticalList.svelte";
+  import Icon from "../../simple/media/Icon.svelte";
+  import { fly } from "svelte/transition";
+  import Autocomplete from "../../simple/forms/Autocomplete.svelte";
+  import Checkbox from "../../simple/forms/Checkbox.svelte";
+  import type { LabelMapper } from "./Filters.svelte";
+    import ToggleList from "../forms/ToggleList.svelte";
+
+  export let filter: Filter | undefined = undefined,
+    lang: 'it' | 'en' = 'en',
+    backIcon: string = "mdi-arrow-left",
+    betweenFromLabel: string = lang == 'en' ? "From" : "Da",
+    betweenToLabel: string = lang == 'en' ? "To" : "A",
+    labelsMapper: LabelMapper,
+    forceApplyValid: boolean = false,
+    tmpFilter: Filter | undefined = undefined
+
+  let dispatch = createEventDispatcher<{
+    'backClick': undefined,
+    'cancelClick': undefined
+  }>()
+
+
+  // function handleApplyFilterClick() {
+  //   if(!!filter && !!tmpFilter) {
+  //     filter = {...tmpFilter}
+  //     filter.active = true
+  //     dispatch('apply')
+  //   }
+  // }
+
+  let step: 'advanced' | 'editor'
+
+  function initTmpFilter() {
+    tmpFilter = filter === undefined ? undefined : {...filter}
+    if(!!tmpFilter && tmpFilter.advanced) {
+      if(['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)) {
+          step = 'editor'
+          //@ts-ignore
+          advancedModeSelectedOption = tmpFilter.mode
+        } else {
+          step = 'advanced'
+        }
       } else {
-        step = "advanced";
+        step = 'advanced'
       }
     } else {
-      step = "advanced";
+      step = "editor"
     }
-  } else {
-    step = "editor";
   }
-}
-$:
-  if (!!filter) {
-    initTmpFilter();
+
+
+  $: if(!!filter) {
+    initTmpFilter()
   }
-let advancedModeOptions, advancedModeSelectedOption;
-$:
-  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;
+
+
+  let advancedModeOptions: Element[],
+    advancedModeSelectedOption: string | undefined
+
+  $: 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
     }
-    if (!!modes) {
-      advancedModeOptions = modes.map((mode) => {
+
+    if(!!modes) {
+      advancedModeOptions = modes.map(mode => {
         return {
           title: labelsMapper[mode].short || mode,
           name: mode
-        };
-      });
+        }
+      })
     }
+
   }
-$:
-  if (!tmpFilter?.advanced) {
-    advancedModeSelectedOption = void 0;
+
+  $: if(!tmpFilter?.advanced) {
+    advancedModeSelectedOption = undefined
   }
-let calendarOpened = false, calendarOpened2 = false;
-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 calendarOpened: boolean = false,
+    calendarOpened2: boolean = 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 as DateMode
+      else if(tmpFilter.type == 'string') tmpFilter.mode = advancedModeSelectedOption as StringMode
+      else if(tmpFilter.type == 'number') tmpFilter.mode = advancedModeSelectedOption as NumberMode
+      else if(tmpFilter.type == 'select') tmpFilter.mode = advancedModeSelectedOption as SelectMode
+
+      step = 'editor'
+      canRenderOptions = false
+    }
   }
-}
-let canRenderOptions = true;
-$:
-  applyFilterDisabled = !Validator.isValid(tmpFilter) && !forceApplyValid;
-$:
-  if (!!tmpFilter && tmpFilter.type == "bool") {
-    if (tmpFilter.value === void 0) {
-      tmpFilter.value = false;
+
+  let canRenderOptions: boolean = true
+
+
+  $: applyFilterDisabled = !Validator.isValid(tmpFilter) && !forceApplyValid
+
+  $: if(!!tmpFilter && tmpFilter.type == 'bool') {
+    if(tmpFilter.value === undefined) {
+      tmpFilter.value = false
     }
   }
-$:
-  if (!!tmpFilter && tmpFilter.type == "select") {
-    if (tmpFilter.values === void 0) {
-      tmpFilter.values = [];
+
+  $: if(!!tmpFilter && tmpFilter.type == 'select') {
+    if(tmpFilter.values === undefined) {
+      tmpFilter.values = []
     }
   }
-function handleModeBackClick() {
-  dispatch("backClick");
-}
-function handleEditorBackCLick() {
-  if (!!tmpFilter && !tmpFilter.advanced) {
-    dispatch("backClick");
-  } else {
-    step = "advanced";
-    advancedModeSelectedOption = void 0;
-    setTimeout(() => {
-      canRenderOptions = true;
-    }, 100);
+
+  function handleModeBackClick() {
+    dispatch('backClick')
   }
-}
-$:
-  if (!!tmpFilter && tmpFilter.type == "date" && tmpFilter.mode == "between") {
-    if (!tmpFilter.from)
-      tmpFilter.from = /* @__PURE__ */ new Date();
-    if (!tmpFilter.to)
-      tmpFilter.to = /* @__PURE__ */ new Date();
+
+  function handleEditorBackCLick() {
+    if(!!tmpFilter && !tmpFilter.advanced) {
+      dispatch('backClick')
+    } else {
+      step = 'advanced'
+      advancedModeSelectedOption = undefined
+      setTimeout(() => {
+        canRenderOptions = true
+      }, 100)
+    }
   }
+
+  $: if(!!tmpFilter && tmpFilter.type == 'date' && tmpFilter.mode == 'between') {
+    if(!tmpFilter.from) tmpFilter.from = new Date()
+    if(!tmpFilter.to) tmpFilter.to = new Date()
+  }
+
+
 </script>
 
 <div class="container">